/* Trematodes 2024 — restored conference site.

   The original Squarespace stylesheet is NOT in the archive (the versioned static1 URL 404s), so
   the palette here is derived from the assets that DID survive rather than guessed: the platypus
   mascot is warm brown, the Brisbane river aerial is blue-grey, and both sponsor lockups are
   transparent PNGs drawn for a light ground. Hence: light paper, eucalypt green for structure,
   ochre for the one accent. */

:root {
  --tr-paper: #f6f5f1;
  --tr-paper-2: #ecebe4;
  --tr-card: #ffffff;
  --tr-ink: #1a1c19;
  --tr-body: #43473f;
  --tr-muted: #676c62;
  --tr-line: #d9d8ce;
  --tr-green: #1f4a3c;
  --tr-green-soft: #e4ede9;
  --tr-ochre: #8a5610;        /* measured 5.9:1 on --tr-paper */
  --tr-ochre-soft: #f4ebdc;
  --tr-max: 1120px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--tr-paper);
  color: var(--tr-body);
  font-family: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.72;
}

h1, h2, h3, h4 {
  font-family: "Space Grotesk", "IBM Plex Sans", system-ui, sans-serif;
  color: var(--tr-ink);
  font-weight: 600;
  line-height: 1.18;
  margin: 0 0 .55em;
  letter-spacing: -.015em;
}

h1 { font-size: clamp(2rem, 1.35rem + 2.6vw, 3.25rem); }
h2 { font-size: clamp(1.4rem, 1.1rem + 1.35vw, 2rem); margin-top: 2.1em; }
h3 { font-size: clamp(1.1rem, 1rem + .5vw, 1.25rem); margin-top: 1.7em; }
h1 + *, h2 + *, h3 + * { margin-top: 0; }

p { margin: 0 0 1.1em; }

a { color: var(--tr-green); text-decoration: underline; text-underline-offset: .18em; }
a:hover { color: var(--tr-ochre); }

strong { color: var(--tr-ink); font-weight: 600; }

img { max-width: 100%; height: auto; display: block; }

.tr-wrap { max-width: var(--tr-max); margin: 0 auto; padding: 0 1.25rem; }
.tr-narrow { max-width: 740px; }

/* ---------- header ---------- */

.tr-head { border-bottom: 1px solid var(--tr-line); background: var(--tr-paper); }

.tr-head-in {
  display: flex;
  align-items: center;
  gap: .9rem 1.5rem;
  min-height: 74px;
  flex-wrap: wrap;
}

.tr-brand {
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--tr-ink);
  text-decoration: none;
  margin-right: auto;
  letter-spacing: -.015em;
}

.tr-brand span { color: var(--tr-ochre); }

.tr-nav { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; }

.tr-nav a {
  color: var(--tr-body);
  text-decoration: none;
  font-size: .9375rem;
  padding: .3rem 0;
  border-bottom: 2px solid transparent;
}

.tr-nav a:hover { color: var(--tr-ink); border-bottom-color: var(--tr-ochre); }
.tr-nav a[aria-current="page"] { color: var(--tr-ink); border-bottom-color: var(--tr-ochre); }

/* ---------- hero ---------- */

.tr-hero { background: var(--tr-paper-2); border-bottom: 1px solid var(--tr-line); padding: 2.5rem 0 3rem; }
/* `width: 100%` is load-bearing, not decoration: the class's own `max-width: 560px` beats the
   global `img { max-width: 100% }` on specificity, so without it the banner kept its 560px
   attribute width and pushed a 375px viewport to 580px of horizontal scroll. */
.tr-hero-art { width: 100%; max-width: 560px; height: auto; margin: 0 auto 1.5rem; }
.tr-hero h1 { text-align: center; margin-bottom: .3em; }

.tr-dates {
  text-align: center;
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-size: clamp(1.05rem, .95rem + .5vw, 1.3rem);
  color: var(--tr-green);
  font-weight: 500;
  margin: 0 0 1.5rem;
}

.tr-lede { font-size: 1.125rem; max-width: 62ch; margin-left: auto; margin-right: auto; }

/* ---------- sections ---------- */

.tr-sect { padding: 3rem 0; }
.tr-sect + .tr-sect { border-top: 1px solid var(--tr-line); }
.tr-sect-alt { background: var(--tr-paper-2); }

.tr-kicker {
  font-size: .75rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tr-ochre);
  font-weight: 600;
  margin: 0 0 .7rem;
}

.tr-meta { color: var(--tr-muted); font-size: .875rem; margin-bottom: 1.6rem; }
.tr-meta a { color: var(--tr-muted); }

.tr-btn {
  display: inline-block;
  background: var(--tr-green);
  color: #fff;
  text-decoration: none;
  font-size: .9375rem;
  font-weight: 500;
  padding: .75rem 1.4rem;
  border-radius: 3px;
}

.tr-btn:hover { background: var(--tr-ochre); color: #fff; }

/* ---------- info blocks ---------- */

.tr-blocks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem 2rem;
  margin-top: 2rem;
}

.tr-block h3 { margin-top: 0; }
.tr-block p:last-child { margin-bottom: 0; }

.tr-figure { margin: 2rem 0; }
.tr-figure img { border-radius: 3px; }
.tr-figure figcaption { font-size: .8438rem; color: var(--tr-muted); margin-top: .5rem; }

.tr-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1rem;
  margin: 2rem 0 0;
}

.tr-gallery img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; border-radius: 3px; }

/* ---------- committee ---------- */

.tr-people {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 1.5rem 1.25rem;
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
}

.tr-person img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  width: 100%;
  border-radius: 999px;
  margin-bottom: .7rem;
}

.tr-person b { display: block; color: var(--tr-ink); font-weight: 600; font-size: .9375rem; }
.tr-person span { display: block; font-size: .8125rem; color: var(--tr-muted); line-height: 1.45; }

/* ---------- programme / social list ---------- */

.tr-days { list-style: none; margin: 1.5rem 0 0; padding: 0; }

.tr-days li {
  border-left: 2px solid var(--tr-ochre);
  padding: .1rem 0 .1rem 1.1rem;
  margin: 0 0 1.1rem;
}

.tr-days b { color: var(--tr-ink); }

/* ---------- casino section ---------- */

.tr-casino { background: var(--tr-green-soft); }
.tr-casino .tr-kicker { color: var(--tr-green); }

.tr-links { list-style: none; margin: 1.75rem 0 0; padding: 0; }
.tr-links li { border-top: 1px solid var(--tr-line); }
.tr-links li:last-child { border-bottom: 1px solid var(--tr-line); }

.tr-links a {
  display: block;
  padding: 1rem .2rem;
  text-decoration: none;
  color: var(--tr-ink);
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-size: 1.0625rem;
  font-weight: 600;
}

.tr-links a:hover { color: var(--tr-ochre); }

.tr-links span {
  display: block;
  font-family: "IBM Plex Sans", system-ui, sans-serif;
  font-size: .9063rem;
  font-weight: 400;
  color: var(--tr-muted);
  margin-top: .1rem;
}

.tr-note {
  background: var(--tr-card);
  border: 1px solid var(--tr-line);
  border-left: 3px solid var(--tr-green);
  padding: 1.1rem 1.3rem;
  margin: 2rem 0;
  font-size: .9375rem;
}

.tr-note.tr-warn { border-left-color: var(--tr-ochre); background: var(--tr-ochre-soft); }
.tr-note p:last-child { margin-bottom: 0; }

.tr-checks { list-style: none; margin: 1.2rem 0 1.4rem; padding: 0; }
.tr-checks li { position: relative; padding: .3rem 0 .3rem 1.65rem; }

.tr-checks li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: .3rem;
  color: var(--tr-ochre);
  font-weight: 700;
}

.tr-toc {
  background: var(--tr-green-soft);
  border-radius: 4px;
  padding: 1.2rem 1.45rem;
  margin: 2.5rem 0 0;
}

.tr-toc p { font-weight: 600; color: var(--tr-ink); margin-bottom: .45rem; }
.tr-toc ul { margin: 0; padding-left: 1.2rem; }
.tr-toc li { margin: .25rem 0; }

.tr-18 {
  display: inline-block;
  border: 2px solid var(--tr-ochre);
  color: var(--tr-ochre);
  border-radius: 999px;
  padding: .1rem .55rem;
  font-size: .8125rem;
  font-weight: 700;
}

/* ---------- footer ---------- */

.tr-foot {
  border-top: 1px solid var(--tr-line);
  background: var(--tr-paper-2);
  padding: 3rem 0 2.5rem;
  font-size: .9375rem;
}

.tr-foot-nav { display: flex; flex-wrap: wrap; gap: .5rem 1.35rem; margin-bottom: 1.5rem; }
.tr-foot-nav a { color: var(--tr-body); text-decoration: none; }
.tr-foot-nav a:hover { color: var(--tr-ochre); text-decoration: underline; }

.tr-sponsors { display: flex; gap: 2rem; align-items: center; flex-wrap: wrap; margin: 1.5rem 0; }
.tr-sponsors img { max-height: 62px; width: auto; }

.tr-fine { color: var(--tr-muted); font-size: .8438rem; margin: 0 0 .8em; max-width: 78ch; }

.tr-skip {
  position: absolute;
  left: -9999px;
  background: var(--tr-green);
  color: #fff;
  padding: .6rem 1rem;
  z-index: 40;
}

.tr-skip:focus { left: .5rem; top: .5rem; }

@media (max-width: 640px) {
  .tr-head-in { min-height: 0; padding: .85rem 0; }
  .tr-brand { width: 100%; margin-bottom: .2rem; }
  .tr-hero { padding: 2rem 0 2.25rem; }
}