/* Dad Olympics — 2026
   Brand system: see marketing/branding.md
   Colors sampled from the 2026 poster; type is Anton / Grand Hotel / Jost. */

:root {
  color-scheme: light;

  /* Core palette */
  --teal: #7fa2a6;
  --teal-dark: #5e8286; /* borders, rules, large accents */
  --brick: #bf4a34;
  --brick-dark: #a83e2b; /* text-bearing surfaces — clears AA on cream */
  --cream: #f2e7cb;
  --cream-lt: #fbf5e6;
  --ink: #33261c;

  /* Soda-fountain accents — one per section, never two */
  --bubblegum: #e8899b;
  --mint: #9cc7b6;
  --gold: #d9a441;
  --rootbeer: #7a4a2b;

  --font-display: "Anton", "Oswald", Impact, sans-serif;
  --font-script: "Grand Hotel", "Lobster Two", cursive;
  --font-text: "Jost", "Futura", system-ui, sans-serif;

  --wrap: 62rem;
  --radius: 18px;
  --keyline: 2px;
}

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

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 1.0625rem;
  line-height: 1.6;
}

/* Paper grain across the whole page — the press effect, not decoration */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.06;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 1.25rem;
}

/* ---------- Type ---------- */

h1,
h2,
h3 {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 400;
  letter-spacing: -0.005em;
  line-height: 0.95;
  margin: 0 0 0.5rem;
}

h2 {
  font-size: clamp(1.9rem, 5vw, 2.75rem);
}

h3 {
  font-size: 1.4rem;
}

p {
  margin: 0 0 1rem;
  max-width: 42rem;
}

a {
  color: var(--ink);
  text-decoration-color: var(--teal-dark);
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}

a:hover {
  text-decoration-color: var(--brick-dark);
}

:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}

.eyebrow {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.78rem;
  color: var(--rootbeer);
  margin: 0 0 0.4rem;
}

.script {
  font-family: var(--font-script);
  text-transform: none;
  letter-spacing: 0;
}

.lede {
  font-size: 1.2rem;
  max-width: 40rem;
}

.fine {
  font-size: 0.85rem;
  color: rgba(51, 38, 28, 0.75);
}

/* ---------- Header ---------- */

.site-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  padding-block: 1.1rem;
  border-bottom: 1px solid rgba(51, 38, 28, 0.2);
}

.site-title {
  font-family: var(--font-display);
  font-size: 1.3rem;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1;
}

.site-header nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
}

.site-header nav a {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-size: 0.78rem;
  text-decoration: none;
  padding-block: 0.2rem;
  border-bottom: 2px solid transparent;
}

.site-header nav a:hover {
  border-bottom-color: var(--brick-dark);
}

/* ---------- Hero ---------- */

.hero {
  --hero-pad: clamp(2rem, 6vw, 3.75rem);
  position: relative;
  overflow: hidden;
  background: var(--teal);
  border-radius: var(--radius);
  margin-top: 2rem;
  padding: var(--hero-pad);
  display: grid;
  align-items: end;
  gap: 1.25rem;
}

/* Inset keyline, straight off the poster */
.hero::before {
  content: "";
  position: absolute;
  inset: 14px;
  border: var(--keyline) solid var(--cream);
  border-radius: calc(var(--radius) - 5px);
  opacity: 0.9;
  pointer-events: none;
}

/* Halftone wash along the bottom edge */
.hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 45%;
  pointer-events: none;
  opacity: 0.14;
  background-image: radial-gradient(var(--ink) 1px, transparent 1.3px);
  background-size: 7px 7px;
  -webkit-mask-image: linear-gradient(transparent, #000);
  mask-image: linear-gradient(transparent, #000);
}

.hero > * {
  position: relative;
  z-index: 1;
}

/* On a phone the mascot would push the date, the details, and the register
   button below the fold, so it's dropped from the hero entirely and reappears
   above the footer instead. See .mascot-band.

   There are two <img> elements and only one is ever shown. Browsers do fetch
   display:none images — loading="lazy" does not prevent it — but both point at
   the same file, so in the common cases they resolve to one URL and one
   request. Worst case is one spare 28 KB fetch at some pixel ratios. */
.hero-mascot {
  display: none;
}

/* Side by side once there's room for the text to keep a sensible measure.
   The mascot is cropped at the waist, so it has to sit on the inner keyline —
   floating it inside the box reads as a mistake rather than a crop. The
   negative margin pulls it through the hero's bottom padding to land exactly
   on the keyline's inner edge (14px inset + 2px border). */
@media (min-width: 54rem) {
  .hero {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: clamp(1.5rem, 4vw, 3rem);
  }

  .hero-mascot {
    display: block;
    width: min(26vw, 19rem);
    height: auto;
    margin-bottom: calc(16px - var(--hero-pad));
  }
}

.hero-year {
  display: inline-block;
  background: var(--brick);
  color: var(--cream);
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 4vw, 2rem);
  line-height: 1;
  letter-spacing: 0.02em;
  padding: 0.35em 0.55em 0.25em;
  border-radius: 14px;
  margin-bottom: 0.9rem;
}

.hero-title {
  color: var(--cream);
  font-size: clamp(3rem, 11vw, 6.5rem);
  line-height: 0.88;
  letter-spacing: -0.01em;
  margin: 0 0 0.75rem;
}

.hero-title span {
  display: block;
}

/* Off-register plate — used once on the page, on the wordmark only */
.misprint {
  position: relative;
  isolation: isolate;
}

.misprint::before {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  color: var(--brick);
  opacity: 0.45;
  transform: translate(3px, 3px);
  z-index: -1;
}

.hero-tagline {
  font-family: var(--font-script);
  font-size: clamp(1.5rem, 4.5vw, 2.1rem);
  line-height: 1.2;
  margin: 0 0 1.25rem;
}

.hero-meta {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.85rem;
  margin: 0 0 1.75rem;
}

.hero-meta span::after {
  content: " · ";
  opacity: 0.6;
}

.hero-meta span:last-child::after {
  content: "";
}

/* ---------- Podium (winners) ---------- */

/* Filled in from games.winners after the closing ceremony; the section
   doesn't render at all until then (see games-page.njk). Built on the same
   row pattern as .schedule — Anton tabular numerals, alternating Counter
   Mint tint — with gold reserved for the first-place row, per
   marketing/branding.md: "Podium, results, first place only." */
.podium {
  list-style: none;
  margin: 1.75rem 0 0;
  padding: 0;
  border: var(--keyline) solid var(--ink);
  border-radius: var(--radius);
  overflow: hidden;
}

.podium li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 1rem;
  padding: 0.85rem 1.25rem;
}

.podium li:nth-child(even) {
  background: rgba(156, 199, 182, 0.32);
}

.podium li.podium-first {
  background: var(--gold);
}

.podium .ord {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  color: var(--teal-dark);
  min-width: 2.6ch;
}

.podium li.podium-first .ord {
  color: var(--ink);
}

.podium .name {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 1.1rem;
  line-height: 1.2;
  flex: 1 1 14rem;
}

.podium .note {
  color: rgba(51, 38, 28, 0.8);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
}

.podium li.podium-first .note {
  color: var(--ink);
}

/* ---------- Countdown ---------- */

/* The band sits directly under the hero, so it's cream rather than teal —
   two teal boxes stacked read as one box with a seam in it.

   Nothing here sets `display` on the section itself: the element carries the
   `hidden` attribute until the script has a real number to show, and any
   display value would override it. The grid lives on the list inside. */
.countdown {
  margin-top: 2.5rem;
  /* Centered on the band below it. Everywhere else on the page a heading sits
     over ranging text and is left-aligned with it; here it sits over four
     evenly spaced numbers, and anything but centered reads as a mistake. */
  text-align: center;
}

/* Bigger than the section headings further down — this is the loudest thing
   on the page after the wordmark — but well short of it, so the hero still
   wins. */
.countdown-title {
  font-size: clamp(2.3rem, 6.5vw, 3.75rem);
  margin-bottom: 0.35rem;
}

/* The subtitle carries the eyebrow's treatment, moved underneath the title
   where it belongs to it rather than announcing it. Sentence case: it's a
   phrase completing the heading, not a label of its own. */
.countdown-subtitle {
  margin: 0 0 1.1rem;
  max-width: none;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: clamp(0.78rem, 2.2vw, 0.95rem);
  color: var(--rootbeer);
}

.countdown-clock {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 0.9rem 0;
  list-style: none;
  background: var(--cream-lt);
  border: var(--keyline) solid var(--ink);
  border-radius: var(--radius);
}

.countdown-clock li {
  text-align: center;
  padding-inline: 0.25rem;
}

.countdown-clock li + li {
  border-left: 1px solid rgba(94, 130, 134, 0.55);
}

.countdown-num {
  display: block;
  font-family: var(--font-display);
  /* Tabular figures so the seconds column doesn't twitch on every tick. */
  font-variant-numeric: tabular-nums;
  font-size: clamp(2.2rem, 10vw, 4.5rem);
  line-height: 1;
  color: var(--brick-dark);
}

.countdown-label {
  display: block;
  margin-top: 0.35rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: clamp(0.6rem, 2vw, 0.78rem);
  color: var(--rootbeer);
}

/* The spoken version of the clock above. Present in the page for screen
   readers; there's nothing in it a sighted reader can't already see. */
.countdown-summary {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-block;
  /* <button> doesn't inherit the page font the way <a> does, and the register
     button becomes one while there's no form to point at. */
  font-family: inherit;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-size: 0.95rem;
  line-height: 1;
  padding: 0.95em 1.7em;
  border: var(--keyline) solid var(--ink);
  border-radius: 12px;
  background: var(--cream-lt);
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
}

.btn-primary {
  background: var(--brick-dark);
  border-color: var(--brick-dark);
  color: var(--cream);
}

.btn:not([aria-disabled="true"]):hover {
  transform: translateY(-2px);
}

@media (prefers-reduced-motion: no-preference) {
  .btn {
    transition: transform 0.12s ease;
  }
}

/* ---------- Button, waiting on a sign-up form ---------- */

/* Outlined rather than dimmed with opacity: the text has to stay legible on
   both the teal hero and the cream section behind the closing call to action,
   and a translucent label on either would not. */
.btn[aria-disabled="true"] {
  position: relative;
  background: transparent;
  border-color: rgba(51, 38, 28, 0.4);
  color: rgba(51, 38, 28, 0.72);
  cursor: not-allowed;
}

.btn[aria-disabled="true"]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 0.55rem);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  background: var(--ink);
  color: var(--cream);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  padding: 0.5em 0.85em;
  border-radius: 10px;
  opacity: 0;
  /* visibility, not opacity alone, so it can't be hit-tested while hidden */
  visibility: hidden;
  pointer-events: none;
}

/* Focus as well as hover, or the explanation is mouse-only. */
.btn[aria-disabled="true"]:hover::after,
.btn[aria-disabled="true"]:focus-visible::after {
  opacity: 1;
  visibility: visible;
}

@media (prefers-reduced-motion: no-preference) {
  .btn[aria-disabled="true"]::after {
    transition: opacity 0.12s ease;
  }
}

/* ---------- Sections ---------- */

.section {
  padding-block: clamp(2.5rem, 7vw, 4rem);
}

/* ---------- Events ---------- */

/* Two across once there's room, so the four events read as a 2x2 block rather
   than a row of three and an orphan. Stays single-column on phones. */
.events {
  display: grid;
  gap: 1.25rem;
  margin: 1.75rem 0 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 42rem) {
  .events {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.event {
  position: relative;
  background: var(--cream-lt);
  border: var(--keyline) solid var(--ink);
  border-radius: var(--radius);
  padding: 1.5rem 1.4rem;
}

.event::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(94, 130, 134, 0.55);
  border-radius: calc(var(--radius) - 6px);
  pointer-events: none;
}
  /* <button> doesn't inherit the page font the way <a> does, and the register
     button becomes one while there's no form to point at. */
  font-family: inherit;

.event-num {
  display: block;
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  font-size: 2.4rem;
  line-height: 1;
  color: var(--teal-dark);
}

.event h3 {
  cursor: pointer;
  margin-block: 0.35rem 0.4rem;
}

.event p {
  margin: 0;
}

/* ---------- Schedule ---------- */

.schedule {
  list-style: none;
  margin: 1.75rem 0 0;
  padding: 0;
  border: var(--keyline) solid var(--ink);
  border-radius: var(--radius);
  overflow: hidden;
}

/* ---------- Button, waiting on a sign-up form ---------- */

/* Outlined rather than dimmed with opacity: the text has to stay legible on
   both the teal hero and the cream section behind the closing call to action,
   and a translucent label on either would not. */
.btn[aria-disabled="true"] {
  position: relative;
  background: transparent;
  border-color: rgba(51, 38, 28, 0.4);
  color: rgba(51, 38, 28, 0.72);
  cursor: not-allowed;
}

.btn[aria-disabled="true"]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 0.55rem);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  background: var(--ink);
  color: var(--cream);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  padding: 0.5em 0.85em;
  border-radius: 10px;
  opacity: 0;
  /* visibility, not opacity alone, so it can't be hit-tested while hidden */
  visibility: hidden;
  pointer-events: none;
}

/* Focus as well as hover, or the explanation is mouse-only. */
.btn[aria-disabled="true"]:hover::after,
.btn[aria-disabled="true"]:focus-visible::after {
  opacity: 1;
  visibility: visible;
}

@media (prefers-reduced-motion: no-preference) {
  .btn[aria-disabled="true"]::after {
    transition: opacity 0.12s ease;
  }
}

.schedule li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 1rem;
  padding: 0.85rem 1.25rem;
}

.schedule li:nth-child(odd) {
  background: rgba(156, 199, 182, 0.32);
}

.schedule .ord {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  color: var(--teal-dark);
  min-width: 1.6ch;
}

.schedule .name {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 1.1rem;
  line-height: 1.2;
}

.schedule .note {
  color: rgba(51, 38, 28, 0.8);
  font-size: 0.92rem;
  flex: 1 1 14rem;
}

/* ---------- Checklist ---------- */

.checklist {
  list-style: none;
  margin: 1.5rem 0;
  padding: 0;
  max-width: 42rem;
}

.checklist li {
  position: relative;
  padding-left: 2rem;
  margin-bottom: 0.7rem;
}

.checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.42em;
  width: 0.9rem;
  height: 0.9rem;
  border: 2px solid var(--ink);
  border-radius: 4px;
  background: var(--cream-lt);
}

/* ---------- Notice ---------- */

.notice {
  border: var(--keyline) solid var(--teal-dark);
  border-left-width: 8px;
  border-radius: 12px;
  background: var(--cream-lt);
  padding: 1.1rem 1.3rem;
  max-width: 42rem;
}

.notice p:last-child {
  margin-bottom: 0;
}

/* ---------- Rule quote ---------- */

.rule-quote {
  position: relative;
  overflow: hidden;
  background: var(--teal);
  border-radius: var(--radius);
  padding: clamp(2rem, 7vw, 3.25rem);
  text-align: center;
}

.rule-quote::before {
  content: "";
  position: absolute;
  inset: 12px;
  border: var(--keyline) solid var(--cream);
  border-radius: calc(var(--radius) - 5px);
  opacity: 0.85;
  pointer-events: none;
}

.rule-quote blockquote {
  position: relative;
  margin: 0;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(2.5rem, 9vw, 4.5rem);
  line-height: 0.9;
}

.rule-quote cite {
  position: relative;
  display: block;
  margin-top: 0.9rem;
  font-style: normal;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.78rem;
}

/* ---------- Closing call to action ---------- */

.cta {
  text-align: center;
  padding-block: clamp(2.5rem, 7vw, 4rem);
}

.cta p {
  margin-inline: auto;
}

/* ---------- Mascot band (phones only) ---------- */

/* Where the mascot goes on phones, having been dropped from the hero. He
   stands on the footer's top keyline, which gives the waist crop something to
   land on. The negative margin cancels the footer's own top margin so there's
   no gap between his feet and that edge. */
.mascot-band {
  display: flex;
  justify-content: center;
  margin-top: 2rem;
  margin-bottom: -1rem;
}

.mascot-band img {
  display: block;
  width: min(58%, 13rem);
  height: auto;
}

@media (min-width: 54rem) {
  .mascot-band {
    display: none;
  }
}

/* ---------- Footer ---------- */

.site-footer {
  background: var(--teal);
  border-top: var(--keyline) solid var(--ink);
  padding-block: 1.75rem;
  margin-top: 1rem;
}

.site-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
}

.site-footer .mark {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 1.1rem;
  line-height: 1;
}

.site-footer p {
  margin: 0;
  font-size: 0.85rem;
}