/* ==========================================================================
   The OpenArt Ad Awards — landing page
   Art direction: a printed awards programme between two film bookends.
   The page opens and closes on dark 35mm stills (hero / finale / footer);
   everything between is cream paper — off-white gradient, white cards,
   brass for prize money. Fonts: Syncopate (display caps), Chakra Petch
   (squarish labels, from the poster's WIN $100 lockup), Space Grotesk (body).
   ========================================================================== */

:root {
  /* --- Dark bookends (hero, nav, finale, footer) --- */
  --pine:        #0D1510;
  --cream:       #F2EDDF;
  --sage:        #AFBAA5;
  --dried:       #7E8A74;
  --wheat:       #E2CF9B;
  --wheat-hi:    #F0E2B6;
  --line:        rgba(242,237,223,0.10);   /* hairlines on dark */
  --line-strong: rgba(242,237,223,0.24);

  /* --- The paper programme (everything between the bookends) --- */
  --paper:         #FBF9F2;
  --paper-2:       #F1EBDD;
  --card:          #FFFFFF;
  --ink:           #1D1B15;
  --muted-l:       #5D594E;   /* 7.3:1 on paper */
  --faint-l:       #767162;   /* 4.6:1 on paper — label sizes only */
  --brass:         #8A6D22;   /* small accents, 5:1 on paper */
  --brass-big:     #A9862F;   /* large numerals only */
  --line-l:        rgba(29,27,21,0.10);
  --line-l-strong: rgba(29,27,21,0.26);

  --danger:  #B4453C;
  --success: #4E7B4F;

  --display: 'Syncopate', 'Avenir Next', 'Futura', 'Helvetica Neue', Arial, sans-serif;
  --label:   'Chakra Petch', 'Trebuchet MS', 'Verdana', sans-serif;
  --body:    'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI',
             'Helvetica Neue', Arial, sans-serif;

  --r: 18px;
  --wrap: min(92vw, 1200px);
  --pad-section: clamp(88px, 10vw, 150px);
  --nav-clear: 96px;
}

/* --------------------------------------------------------------------------
   Reset & base
   -------------------------------------------------------------------------- */

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

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

body {
  margin: 0;
  background: linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%);
  background-color: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;   /* nothing may push the body sideways */
}

/* 35mm grain — reads as paper tooth on the light body, grain on the stills. */
body::after {
  content: '';
  position: fixed;
  inset: -50%;
  z-index: 900;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.04;
}

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

h1, h2, h3, h4 { margin: 0; }

p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }

/* Accent words inside display type. Brass on paper; wheat on the stills. */
em { font-style: normal; color: var(--brass-big); }
.hero em, .final-cta em { color: var(--wheat); }

strong { font-weight: 600; color: inherit; }

::selection { background: var(--brass); color: var(--paper); }

/* --------------------------------------------------------------------------
   Accessibility helpers
   -------------------------------------------------------------------------- */

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  left: 16px; top: -100px;
  z-index: 1200;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--label);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 12px 18px;
  border-radius: 999px;
  transition: top .18s ease;
}
.skip-link:focus { top: 16px; }

:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 3px;
  border-radius: 6px;
}
/* On the dark bookends brass is too dim — focus in wheat there. */
.nav :focus-visible,
.hero :focus-visible,
.final-cta :focus-visible,
.footer :focus-visible {
  outline-color: var(--wheat);
}

[id] { scroll-margin-top: var(--nav-clear); }

/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */

.wrap {
  width: var(--wrap);
  margin-inline: auto;
}

.section { padding-block: var(--pad-section); }

.section__head { margin-bottom: clamp(40px, 5.5vw, 64px); }
.section__head--center { text-align: center; }

.section__title {
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.015em;
  line-height: 1.06;
  font-size: clamp(24px, 4.4vw, 54px);
  max-width: 22ch;
  color: var(--ink);
  overflow-wrap: break-word;
}
.section__head--center .section__title { margin-inline: auto; }

.section__lede {
  margin-top: 20px;
  color: var(--muted-l);
  font-size: clamp(15px, 1.7vw, 17px);
  font-weight: 300;
  max-width: 52ch;
}

/* --- Programme eyebrows: 01 — THE PURSE --- */

.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
  font-family: var(--label);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--faint-l);
}
.section__head--center .eyebrow,
.purse .eyebrow { justify-content: center; }

.eyebrow__num { color: var(--brass); }
.eyebrow__dash { opacity: .6; }

/* --------------------------------------------------------------------------
   Buttons & links — pill lockups from the poster's WIN $100
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 30px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-family: var(--label);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .25s ease, border-color .25s ease,
              color .25s ease, transform .25s ease;
}

/* On paper: ink pills. */
.btn--solid { background: var(--ink); color: var(--paper); }
.btn--solid:hover { background: #3A362B; transform: translateY(-1px); }

.btn--ghost {
  border-color: var(--line-l-strong);
  color: var(--ink);
}
.btn--ghost:hover { border-color: var(--brass); color: var(--brass); }

/* Over the film stills and in the dark nav: cream pills. */
.hero .btn--solid, .final-cta .btn--solid, .nav .btn--solid {
  background: var(--cream);
  color: var(--pine);
}
.hero .btn--solid:hover, .final-cta .btn--solid:hover, .nav .btn--solid:hover {
  background: var(--wheat-hi);
}
.hero .btn--ghost, .final-cta .btn--ghost {
  border-color: var(--line-strong);
  color: var(--cream);
  background: rgba(13,21,16,0.25);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.hero .btn--ghost:hover, .final-cta .btn--ghost:hover {
  border-color: var(--wheat);
  color: var(--wheat-hi);
}

.btn--sm { padding: 11px 20px; font-size: 11px; }
.btn--lg { padding: 18px 38px; font-size: 13.5px; }

.link-gold {
  color: var(--brass);
  font-family: var(--label);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(138,109,34,0.4);
  padding-bottom: 4px;
  transition: color .2s ease, border-color .2s ease;
}
.link-gold:hover { color: var(--ink); border-bottom-color: var(--ink); }

/* --------------------------------------------------------------------------
   Floating pill nav — dark throughout, so the white OpenArt mark always works
   -------------------------------------------------------------------------- */

.nav {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  width: min(92vw, 1080px);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 10px 12px 10px 24px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(13,21,16,0.7);
  -webkit-backdrop-filter: saturate(120%) blur(16px);
  backdrop-filter: saturate(120%) blur(16px);
  transition: background-color .3s ease, border-color .3s ease,
              box-shadow .3s ease;
}

.nav.is-stuck .nav__inner {
  background: rgba(13,21,16,0.92);
  border-color: rgba(242,237,223,0.16);
  box-shadow: 0 12px 40px -18px rgba(29,27,21,0.5);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.wordmark__logo { height: 24px; width: auto; }

.wordmark__sub {
  font-family: var(--label);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--wheat);
  padding-left: 12px;
  border-left: 1px solid var(--line-strong);
}

.nav__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.nav .btn--ghost {
  border-color: var(--line-strong);
  color: var(--cream);
  background: transparent;
}
.nav .btn--ghost:hover { border-color: var(--wheat); color: var(--wheat-hi); }

.nav__links {
  display: none;
  gap: 28px;
  font-size: 14px;
  font-weight: 400;
  color: var(--sage);
}
.nav__links a { transition: color .18s ease; }
.nav__links a:hover { color: var(--cream); }

/* --------------------------------------------------------------------------
   Hero — the living poster (untouched dark bookend)
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  background: var(--pine);
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  transform: scale(1.12);
  will-change: transform;
}
.hero__media img,
.hero__media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
}
/* The loop fades in over its own poster once it can actually play. */
.hero__media video { opacity: 0; transition: opacity .9s ease; }
.hero__media.is-playing video { opacity: 1; }

.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(13,21,16,0.62) 0%, rgba(13,21,16,0) 32%),
    linear-gradient(180deg, rgba(13,21,16,0) 26%, rgba(13,21,16,0.62) 52%,
                    rgba(13,21,16,0.6) 78%, rgba(13,21,16,0) 93%),
    radial-gradient(58% 54% at 50% 48%, rgba(13,21,16,0.48) 0%, rgba(13,21,16,0) 100%),
    linear-gradient(180deg, rgba(251,249,242,0) 76%, rgba(251,249,242,0.5) 89%,
                    rgba(251,249,242,0.95) 97%, var(--paper) 100%);
}

.hero__content {
  position: relative;
  z-index: 2;
  text-align: center;
  text-shadow: 0 1px 30px rgba(13,21,16,0.55);
  padding-top: calc(var(--nav-clear) + 3vh);
  padding-bottom: clamp(150px, 22vh, 260px);
  will-change: transform, opacity;
}

.hero__eyebrow {
  justify-content: center;
  flex-wrap: wrap;
  row-gap: 4px;
  color: rgba(242,237,223,0.92);
  text-shadow: 0 1px 14px rgba(13,21,16,0.8), 0 0 34px rgba(13,21,16,0.6);
  margin-bottom: clamp(20px, 3.4vh, 36px);
  line-height: 1.9;
  display: block;
  max-width: 68ch;
  margin-inline: auto;
}

.hero__title {
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--cream);
  line-height: 1.04;
  /* Syncopate's sidebearings are huge at display sizes — pull it in. */
  letter-spacing: -0.045em;
  font-size: clamp(30px, 7.6vw, 112px);
  text-wrap: balance;
}
.hero__title .line { display: block; }

.hero__deck {
  margin: clamp(22px, 3.2vh, 34px) auto 0;
  max-width: 38ch;
  font-weight: 300;
  font-size: clamp(17px, 2.1vw, 22px);
  line-height: 1.45;
  color: rgba(242,237,223,0.92);
}

.hero__sub {
  margin: clamp(20px, 3vh, 30px) auto 0;
  max-width: 52ch;
  color: rgba(242,237,223,0.9);
  font-weight: 300;
  font-size: clamp(17px, 2.2vw, 23px);
}
.hero__sub strong { color: var(--wheat); font-weight: 500; }

.hero__ctas {
  margin-top: clamp(26px, 3.6vh, 40px);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.hero__sponsor {
  margin-top: 6px;
  font-family: var(--label);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(242,237,223,0.62);
}

/* --- Sound toggle: appears once the loop is playing --- */

.hero__sound {
  position: absolute;
  right: clamp(16px, 2.4vw, 28px);
  /* The hero can grow taller than the viewport, so pin the toggle to the
     bottom of the FIRST fold, not the section's true bottom edge. */
  top: calc(100vh - 72px);
  top: calc(100svh - 72px);
  z-index: 3;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: rgba(13,21,16,0.45);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--cream);
  cursor: pointer;
  transition: border-color .25s ease, color .25s ease, background-color .25s ease;
}
.hero__sound:hover { border-color: var(--wheat); color: var(--wheat-hi); }

/* aria-pressed=true means sound is ON — show the live-speaker glyph. */
.hero__sound .hero__sound-on { display: none; }
.hero__sound[aria-pressed="true"] .hero__sound-on { display: block; }
.hero__sound[aria-pressed="true"] .hero__sound-off { display: none; }

/* --- Countdown: a centered stack under the CTAs --- */

.hero__countdown {
  margin-top: clamp(34px, 5vh, 56px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.countdown {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.countdown__label {
  font-family: var(--label);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(242,237,223,0.75);
  line-height: 1.7;
  text-align: center;
}

.countdown__clock {
  display: flex;
  align-items: baseline;
  gap: clamp(8px, 1.4vw, 14px);
}

.cd { display: flex; align-items: baseline; gap: 7px; }

.cd__num {
  font-family: var(--label);
  font-weight: 300;
  font-size: clamp(24px, 3.2vw, 34px);
  line-height: 1;
  color: var(--cream);
  font-variant-numeric: tabular-nums;
}

.cd__unit {
  font-family: var(--label);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dried);
}

.cd__sep {
  font-family: var(--label);
  font-weight: 300;
  font-size: clamp(18px, 2.4vw, 26px);
  color: rgba(226,207,155,0.5);
}

.countdown__tba {
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: clamp(14px, 2vw, 20px);
  color: var(--wheat);
}

/* --- Stat chips: quiet text run, ✦ separated --- */

.chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 0;
}

.chip {
  font-family: var(--label);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sage);
  white-space: nowrap;
}
.chip span { color: var(--wheat); }
.chip + .chip::before {
  content: '✦';
  color: rgba(226,207,155,0.55);
  font-size: 9px;
  margin-inline: 14px;
}

/* --------------------------------------------------------------------------
   01 — The purse
   -------------------------------------------------------------------------- */

.section--purse { text-align: center; }

.purse__label {
  font-family: var(--label);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--muted-l);
}

.purse__figure {
  margin-top: clamp(18px, 2.6vw, 30px);
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(56px, 13.2vw, 196px);
  line-height: 1;
  letter-spacing: 0.005em;
  color: var(--brass-big);
  font-variant-numeric: tabular-nums;
}

/* The figure is cut from the hero's meadow — the film stock shows through
   the paper. */
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .purse__figure {
    background-image:
      linear-gradient(180deg, rgba(138,109,34,0.3), rgba(138,109,34,0.2)),
      url('../img/film/runner.jpg');
    background-size: cover;
    background-position: center 55%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

.purse__note {
  margin: clamp(24px, 3.4vw, 38px) auto 0;
  max-width: 44ch;
  color: var(--muted-l);
  font-weight: 300;
  font-size: clamp(15px, 1.8vw, 18px);
}

/* --------------------------------------------------------------------------
   02 — The awards
   -------------------------------------------------------------------------- */

.awards { display: grid; gap: clamp(48px, 6vw, 72px); }

.award-group__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 16px;
  padding-bottom: 16px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--line-l);
}

.award-group__label {
  font-family: var(--label);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink);
}

.award-group__note {
  font-family: var(--body);
  font-size: 13px;
  font-weight: 300;
  color: var(--faint-l);
}

/* --- Featured: Ad of the Year — a full film still (dark card) --- */

.award--featured {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: clamp(420px, 58vh, 580px);
  border-radius: calc(var(--r) + 6px);
  overflow: hidden;
  border: 1px solid var(--line-l);
  box-shadow: 0 24px 70px -30px rgba(29,27,21,0.45);
}

.award--featured .award__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.award--featured .award__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.award--featured::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(13,21,16,0.06) 30%,
              rgba(13,21,16,0.62) 68%, rgba(13,21,16,0.92) 100%);
}

.award--featured .award__body {
  position: relative;
  z-index: 2;
  padding: clamp(24px, 3.6vw, 44px);
}

.award__badge {
  display: inline-flex;
  padding: 8px 16px;
  border: 1px solid rgba(226,207,155,0.55);
  border-radius: 999px;
  font-family: var(--label);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--wheat-hi);
  background: rgba(13,21,16,0.35);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.award--featured .award__name {
  margin-top: 18px;
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-size: clamp(24px, 4.6vw, 54px);
  line-height: 1.04;
  color: var(--cream);
}

.award--featured .award__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 28px;
  margin-top: 16px;
}

.award--featured .award__desc {
  max-width: 52ch;
  font-weight: 300;
  font-size: clamp(14px, 1.6vw, 16px);
  line-height: 1.6;
  color: rgba(242,237,223,0.82);
}

.award--featured .award__prize {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(26px, 4vw, 46px);
  line-height: 1;
  color: var(--wheat);
  white-space: nowrap;
}

/* --- Category cards: film still on top, programme text below --- */

.award-grid { display: grid; gap: 14px; }

.award-card {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line-l);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(29,27,21,0.04);
  transition: border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}
.award-card:hover {
  border-color: var(--line-l-strong);
  transform: translateY(-4px);
  box-shadow: 0 18px 44px -18px rgba(29,27,21,0.22);
}

.award-card .award__media {
  aspect-ratio: 4 / 5;
  overflow: hidden;
}
.award-card .award__media > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform 1.1s cubic-bezier(.19,1,.22,1);
}
.award-card:hover .award__media > img { transform: scale(1.07); }

.award-card .award__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 20px;
}

.award__rank {
  font-family: var(--label);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.24em;
  color: var(--faint-l);
  font-variant-numeric: tabular-nums;
}

.award-card .award__name {
  margin-top: 12px;
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 13.5px;
  letter-spacing: 0.02em;
  line-height: 1.5;
  color: var(--ink);
}

.award-card .award__desc {
  margin-top: 10px;
  font-size: 13.5px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--muted-l);
}

.award-card .award__foot {
  margin-top: auto;
  padding-top: 18px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.award__prize {
  font-family: var(--label);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.04em;
  color: var(--brass);
}
.award__prize small {
  display: block;
  font-family: var(--body);
  font-size: 11.5px;
  font-weight: 300;
  letter-spacing: 0;
  color: var(--faint-l);
  margin-top: 4px;
}

/* --- Model awards: medallion rows with the partner's mark --- */

.award-rows { border-top: 1px solid var(--line-l); }

.award-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 22px;
  align-items: baseline;
  padding: clamp(20px, 3vw, 30px) 0;
  border-bottom: 1px solid var(--line-l);
  transition: padding-left .35s ease;
}
.award-row:hover { padding-left: 12px; }

.award-row .award__rank { grid-row: span 3; padding-top: 4px; }

.award-row .award__name {
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(16px, 2.6vw, 28px);
  letter-spacing: 0.015em;
  color: var(--ink);
  transition: color .3s ease;
}
.award-row:hover .award__name { color: var(--brass); }

.award-row .award__desc {
  font-size: 13.5px;
  font-weight: 300;
  color: var(--muted-l);
}

.award-row .award__prize { font-size: clamp(15px, 2vw, 19px); }

/* Partner logo slot. Text lockup only until a real mark lands. */
.award__partner {
  display: flex;
  align-items: center;
  min-height: 24px;
  font-family: var(--label);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--faint-l);
}
.award__partner img { height: 28px; width: auto; max-width: 150px; object-fit: contain; }

/* Media-card grids (model + partner/community): wide stills. */
.award-grid--media .award__media { aspect-ratio: 16 / 10; position: relative; }

/* One fixed plate for every mark — identical box, logo centered inside,
   both dimensions capped so nothing ever stretches or squashes. */
.award__media-logo {
  position: absolute;
  left: 12px;
  bottom: 12px;
  width: 122px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(251,249,242,0.94);
  box-shadow: 0 2px 10px rgba(13,21,16,0.3);
}
.award__media-logo img {
  max-height: 22px;
  max-width: 96px;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Compact variant for the 4-up partner & community grid. */
.award-grid--compact .award__body { padding: 18px; }
.award-grid--compact .award__name { font-size: 12.5px; }
.award-grid--compact .award__desc { font-size: 12.5px; }

/* Optional qualifying line under an award description (e.g. "Wan must be the
   primary video generation model used"). Quieter and italic so it reads as a
   condition rather than part of the description. */
.award__note {
  margin-top: 6px;
  font-size: 12.5px;
  font-style: italic;
  line-height: 1.5;
  color: var(--faint-l);
  text-wrap: balance;
}
.award-grid--compact .award__note { font-size: 11.5px; }
.award-grid--compact .award__prize { font-size: 14px; }

/* --- Partner & community: compact programme cards --- */

.award-minis { display: grid; gap: 14px; }

.award-mini {
  display: flex;
  flex-direction: column;
  padding: 22px;
  background: var(--card);
  border: 1px solid var(--line-l);
  border-radius: var(--r);
  box-shadow: 0 1px 2px rgba(29,27,21,0.04);
  transition: border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}
.award-mini:hover {
  border-color: var(--line-l-strong);
  transform: translateY(-3px);
  box-shadow: 0 14px 36px -16px rgba(29,27,21,0.2);
}

.award-mini .award__name {
  margin-top: 12px;
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 12.5px;
  letter-spacing: 0.02em;
  line-height: 1.55;
  color: var(--ink);
}

.award-mini .award__desc {
  margin-top: 10px;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--muted-l);
}

.award-mini .award__foot {
  margin-top: auto;
  padding-top: 18px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}
.award-mini .award__prize { font-size: 14px; }
.award-mini .award__partner img { height: 18px; max-width: 110px; }

/* --------------------------------------------------------------------------
   03 — How to enter
   -------------------------------------------------------------------------- */

.steps { display: grid; gap: clamp(30px, 4vw, 48px); }

.step {
  position: relative;
  border-top: 1px solid var(--line-l);
  padding-top: 24px;
}

.step__num {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(38px, 5.4vw, 64px);
  line-height: 1;
  color: rgba(138,109,34,0.22);
  letter-spacing: 0.02em;
}

.step__title {
  margin-top: 16px;
  font-family: var(--label);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
}

.step__body {
  margin-top: 12px;
  max-width: 46ch;
  font-size: 14.5px;
  font-weight: 300;
  line-height: 1.65;
  color: var(--muted-l);
}
.step__body strong { color: var(--brass); font-weight: 500; }

.step__note {
  margin-top: 12px;
  max-width: 46ch;
  padding-left: 14px;
  border-left: 2px solid rgba(138,109,34,0.35);
  font-size: 13px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--faint-l);
}
.step__note strong { color: var(--brass); font-weight: 500; }

/* --------------------------------------------------------------------------
   04 — Judging
   -------------------------------------------------------------------------- */

.criteria {
  display: grid;
  gap: 0 48px;
  max-width: 1000px;
}

.criteria li {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 17px 0;
  border-bottom: 1px solid var(--line-l);
  color: var(--muted-l);
  font-weight: 300;
  font-size: clamp(15px, 1.7vw, 16.5px);
  line-height: 1.5;
}

.criteria li::before {
  content: '✦';
  flex-shrink: 0;
  color: var(--brass);
  font-size: 10px;
  line-height: 2.2;
}

.footnote {
  margin-top: 28px;
  max-width: 68ch;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.65;
  color: var(--faint-l);
}
.footnote--center { margin-inline: auto; }

/* --------------------------------------------------------------------------
   05 — The fine print
   -------------------------------------------------------------------------- */

.fineprint { display: grid; gap: clamp(28px, 3.6vw, 44px); }

.fineprint__h {
  font-family: var(--label);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 12px;
}

.fineprint__item p {
  font-size: 14.5px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--muted-l);
  max-width: 58ch;
}

.rules-link { margin-top: clamp(36px, 4.4vw, 52px); }

/* Nav "Rules" pill — same ghost treatment as "Start creating", just narrower
   so the three actions still fit the pill on small screens. */
.nav__rules { padding-left: 16px; padding-right: 16px; }

/* --------------------------------------------------------------------------
   Nav "Start creating" — a light that traces the pill outline, then rests.

   A conic gradient is masked down to the 1px border ring, so the bright head
   runs around the pill's actual rounded path rather than a rectangle. The
   angle is animated through a registered custom property (a plain conic
   gradient cannot be rotated without one). The keyframes reach 360deg at 62%
   and hold, which is the pause before it invites the next click.
   -------------------------------------------------------------------------- */

@property --trace-ang {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

.nav__home {
  position: relative;
  isolation: isolate;
}

.nav__home::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 999px;
  padding: 1px;
  pointer-events: none;
  background: conic-gradient(from var(--trace-ang),
    rgba(242,237,223,0)    0%,
    rgba(242,237,223,0)   62%,
    rgba(242,237,223,0.22) 78%,
    rgba(246,239,219,0.95) 90%,
    rgba(242,237,223,0.30) 95%,
    rgba(242,237,223,0)   100%);
  /* Punch out the middle so only the ring paints. */
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: navTrace 6.4s linear infinite;
}

/* A soft bloom that swells as the head completes the loop and fades in the rest. */
.nav__home::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 999px;
  pointer-events: none;
  z-index: -1;
  box-shadow: 0 0 0 0 rgba(246,239,219,0);
  animation: navTraceGlow 6.4s linear infinite;
}

/* Continuous loop, never stationary. The angle advances unevenly instead:
   quick across the top, easing down as the head rounds the bottom of the
   pill (around 216deg, where the head sits at 6 o'clock), then picking back
   up. 360deg is the same position as 0deg, so the cycle rejoins seamlessly
   and the exit speed roughly matches the entry speed. */
@keyframes navTrace {
  0%   { --trace-ang: 0deg; }
  28%  { --trace-ang: 148deg; }
  48%  { --trace-ang: 202deg; }
  60%  { --trace-ang: 224deg; }
  72%  { --trace-ang: 250deg; }
  86%  { --trace-ang: 302deg; }
  100% { --trace-ang: 360deg; }
}

/* Glow swells while the head is in its slow stretch, so the emphasis lands
   at the bottom of the pill rather than at a hard stop. */
@keyframes navTraceGlow {
  0%   { box-shadow: 0 0 0 0 rgba(246,239,219,0); }
  38%  { box-shadow: 0 0 6px 0 rgba(246,239,219,0.10); }
  62%  { box-shadow: 0 0 14px 1px rgba(246,239,219,0.26); }
  84%  { box-shadow: 0 0 6px 0 rgba(246,239,219,0.10); }
  100% { box-shadow: 0 0 0 0 rgba(246,239,219,0); }
}

/* Hovering is already an intent signal, so stop competing with it. */
.nav__home:hover::before,
.nav__home:hover::after { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .nav__home::before,
  .nav__home::after { animation: none; }
  .nav__home::before { background: none; }
}

/* --------------------------------------------------------------------------
   Inspo — horizontal reel of community work

   Cards reuse .award-card so the shape, radius, border and hover match the
   awards grids exactly. The rail breaks the full width of the viewport and
   pads to the wrap on both sides, so the first card lines up with the
   headings while later cards run off the right edge as a scroll cue.
   -------------------------------------------------------------------------- */

.inspo {
  position: relative;
  margin-top: clamp(28px, 3.4vw, 40px);
}

.inspo__rail {
  display: flex;
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 4px calc((100vw - var(--wrap)) / 2);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.inspo__rail::-webkit-scrollbar { display: none; }
.inspo__rail:focus-visible { outline: 2px solid var(--brass); outline-offset: 4px; }

.inspo__item {
  /* 20% wider than the award cards they sit under (Zozo, Sep 11). Bigger
     cards also mean the 720p preview is displayed closer to 1:1. */
  flex: 0 0 min(84vw, 494px);
  scroll-snap-align: start;
}

.inspo-card { height: 100%; }

/* `.award-card .award__media` sets 4/5 with two classes, so this needs the
   same weight to win. 16/10 matches the Model Awards media cards, which is
   the shape these sit next to. */
.inspo-card .inspo-card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--ink);
  overflow: hidden;
}

/* Blurred still of the same frame, so letterboxed clips sit on their own
   colours rather than black bars. */
.inspo-card__backdrop {
  position: absolute;
  inset: -8%;
  width: 116%;
  height: 116%;
  object-fit: cover;
  filter: blur(26px) saturate(120%) brightness(0.72);
  transform: scale(1.06);
}

.inspo-card__video {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.inspo-card:not(.inspo-card--portrait) .inspo-card__video { object-fit: cover; }
.inspo-card--portrait .inspo-card__video { object-fit: contain; }

/* While the full video is playing the browser's own controls take over. */
.inspo-card.is-playing .inspo-card__backdrop { filter: blur(26px) brightness(0.4); }

.inspo-card__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  cursor: pointer;
  transition: background-color .3s ease;
}
.inspo-card__play:hover { background: rgba(13,21,16,0.18); }
.inspo-card.is-playing .inspo-card__play { display: none; }

.inspo-card__play-icon {
  width: 54px;
  height: 54px;
  border-radius: 999px;
  border: 1px solid rgba(242,237,223,0.55);
  background: rgba(13,21,16,0.42);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  position: relative;
  transition: transform .3s ease, background-color .3s ease;
}
.inspo-card__play-icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 54%;
  transform: translate(-50%, -50%);
  border-left: 13px solid var(--cream);
  border-block: 8px solid transparent;
}
.inspo-card__play:hover .inspo-card__play-icon {
  transform: scale(1.06);
  background: rgba(13,21,16,0.62);
}

/* Cards are the video and nothing else, so the media fills the whole card. */
.inspo-card { overflow: hidden; }
.inspo-card .inspo-card__media { border-radius: inherit; }

/* Faint corner affordance out to the original post, where the creator is
   named. Deliberately quiet at rest so it never competes with the video. */
.inspo-card__out {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid rgba(242,237,223,0.30);
  background: rgba(13,21,16,0.42);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0.5;
  transition: opacity .25s ease, background-color .25s ease;
}
.inspo-card__out svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: var(--cream);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.inspo-card__out:hover,
.inspo-card__out:focus-visible {
  opacity: 1;
  background: rgba(13,21,16,0.72);
}

/* Once the 720p preview has a frame, drop the soft 512px poster behind it. */
.inspo-card.has-frame .inspo-card__video { background: transparent; }

/* Same glass treatment as the card play button, sitting over the cards at
   the very edges of the rail rather than out in the margin. */
.inspo__arrow {
  position: absolute;
  top: calc(50% - 22px);
  z-index: 3;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  /* The blanket 50% opacity used to dim the glyph and the rim together. The
     alphas below reproduce the previous rim and fill exactly (0.30 and 0.42
     seen through 50%), while the glyph goes from an effective 0.50 to 0.65
     so the arrow itself reads brighter against the video behind it. */
  border: 1px solid rgba(242,237,223,0.15);
  background: rgba(13,21,16,0.21);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: rgba(242,237,223,0.65);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition: color .25s ease, background-color .25s ease, transform .25s ease;
}
.inspo__arrow:hover,
.inspo__arrow:focus-visible {
  color: var(--cream);
  background: rgba(13,21,16,0.62);
  transform: scale(1.06);
}
.inspo__arrow--prev { left: 12px; }
.inspo__arrow--next { right: 12px; }

@media (hover: none) {
  .inspo__arrow { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .inspo__rail { scroll-behavior: auto; }
}

/* --------------------------------------------------------------------------
   06 — Timeline
   -------------------------------------------------------------------------- */

.timeline { position: relative; display: grid; }

.timeline::before {
  content: '';
  position: absolute;
  left: 5px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: linear-gradient(180deg,
    rgba(138,109,34,0.55), rgba(138,109,34,0.14));
}

.tl { position: relative; padding: 0 0 36px 32px; }
.tl:last-child { padding-bottom: 0; }

.tl__dot {
  position: absolute;
  left: 0;
  top: 7px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 1px solid var(--brass);
  background: var(--paper);
}

.tl--done .tl__dot { border-color: var(--faint-l); background: var(--faint-l); }
.tl--next .tl__dot { background: transparent; }
.tl--now  .tl__dot { background: var(--brass); }

.tl--now .tl__dot::after {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1px solid var(--brass);
  animation: pulse 2.4s ease-out infinite;
}

@keyframes pulse {
  0%   { transform: scale(0.7); opacity: 0.9; }
  70%  { transform: scale(1.5); opacity: 0; }
  100% { transform: scale(1.5); opacity: 0; }
}

.tl__date {
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(20px, 3vw, 32px);
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--ink);
}
.tl--now .tl__date { color: var(--brass-big); }
.tl--done .tl__date { color: var(--faint-l); }

.tl__label {
  margin-top: 12px;
  font-family: var(--label);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
}
.tl--done .tl__label { color: var(--muted-l); }

.tl__time {
  margin-top: 6px;
  font-size: 12.5px;
  font-weight: 300;
  color: var(--faint-l);
}

/* --------------------------------------------------------------------------
   07 — FAQ
   -------------------------------------------------------------------------- */

.faq {
  max-width: 860px;
  border-top: 1px solid var(--line-l);
}

.faq__item { border-bottom: 1px solid var(--line-l); }

.faq__q {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 0;
  font-family: var(--label);
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  transition: color .2s ease;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
  content: '+';
  flex-shrink: 0;
  font-family: var(--body);
  font-size: 22px;
  font-weight: 300;
  line-height: 1;
  color: var(--brass);
  transition: transform .25s ease;
}
.faq__item[open] .faq__q::after { transform: rotate(45deg); }
.faq__q:hover { color: var(--brass); }

.faq__a {
  padding: 0 36px 22px 0;
  font-size: 14.5px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--muted-l);
  max-width: 70ch;
}

/* --------------------------------------------------------------------------
   Partners & sponsors — real marks on paper
   -------------------------------------------------------------------------- */

.section--partners { border-block: 1px solid var(--line-l); }

.partners { display: grid; gap: clamp(36px, 4.4vw, 52px); }

.partner-row { text-align: center; }

.partner-row__label {
  font-family: var(--label);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--faint-l);
  margin-bottom: 26px;
}

.partner-row__items {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 22px clamp(32px, 5.5vw, 72px);
}

.partner {
  font-family: var(--label);
  font-size: clamp(15px, 2vw, 20px);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-l);
  transition: opacity .25s ease;
}
.partner:hover { opacity: .7; }
.partner img { height: 32px; width: auto; max-width: 190px; object-fit: contain; }

.partner--link {
  display: inline-flex;
  align-items: center;
  color: inherit;
  text-decoration: none;
  border-radius: 4px;
}
.partner--link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 6px;
}

/* --------------------------------------------------------------------------
   Final CTA — the screen in the meadow (untouched dark bookend)
   -------------------------------------------------------------------------- */

.final-cta {
  position: relative;
  min-height: clamp(520px, 86vh, 800px);
  display: flex;
  align-items: center;
  overflow: hidden;
  text-align: center;
  background: var(--pine);
}

.final-cta__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.final-cta__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.08);
  will-change: transform;
}
.final-cta::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, var(--paper-2) 0%, rgba(13,21,16,0.2) 22%,
                    rgba(13,21,16,0.3) 70%, var(--pine) 100%),
    radial-gradient(90% 70% at 50% 55%, rgba(13,21,16,0) 40%, rgba(13,21,16,0.6) 100%);
}

.final-cta__inner { position: relative; z-index: 2; }

.final-cta__title {
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-size: clamp(26px, 5.6vw, 66px);
  line-height: 1.08;
  max-width: 18ch;
  margin-inline: auto;
  color: var(--cream);
  text-shadow: 0 1px 30px rgba(13,21,16,0.55);
}

.final-cta .btn { margin-top: clamp(30px, 4vw, 44px); }

.final-cta__note {
  margin-top: 22px;
  font-size: 13.5px;
  font-weight: 300;
  color: rgba(242,237,223,0.75);
}



/* --------------------------------------------------------------------------
   Footer — stays in the dark with the finale
   -------------------------------------------------------------------------- */

.footer {
  background: var(--pine);
  color: var(--cream);
  border-top: 1px solid var(--line);
  padding-block: clamp(44px, 5.5vw, 64px);
}

.footer__inner { display: grid; gap: 30px; }

.footer__logo { height: 22px; width: auto; }

.footer__tagline {
  margin-top: 12px;
  font-size: 13px;
  font-weight: 300;
  color: var(--dried);
}

.footer__socials {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  font-family: var(--label);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sage);
}
.footer__socials a { transition: color .18s ease; }
.footer__socials a:hover { color: var(--wheat); }

.footer__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  font-size: 12.5px;
  font-weight: 300;
  color: var(--dried);
}
.footer__meta a { transition: color .18s ease; }
.footer__meta a:hover { color: var(--cream); }

/* --------------------------------------------------------------------------
   Scroll reveals
   -------------------------------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .9s cubic-bezier(.19,1,.22,1),
              transform .9s cubic-bezier(.19,1,.22,1);
  transition-delay: var(--stagger, 0ms);
}
.reveal.is-in { opacity: 1; transform: none; }

/* Media inside revealing cards eases from a slight zoom. (Direct child
   only — the partner mark riding the still must never zoom or crop.) */
.reveal .award__media > img { transform: scale(1.1); }
.reveal.is-in .award__media > img { transform: scale(1.02); }
.award-card.reveal.is-in:hover .award__media > img { transform: scale(1.07); }

/* --------------------------------------------------------------------------
   Breakpoints
   -------------------------------------------------------------------------- */

@media (max-width: 699px) {
  .hero__media img { object-position: center 42%; }
  .nav__home { display: none; }

  /* Three pills would overflow the nav capsule on a 360px phone (the capsule
     was already tight before "Rules" was added). Reclaim the space from the
     wordmark suffix and the pill padding rather than dropping an action. */
  .wordmark__sub { display: none; }
  .nav__inner { gap: 10px; padding: 8px 8px 8px 14px; }
  .nav__actions { gap: 6px; }
  .nav .btn--sm { padding: 10px 13px; letter-spacing: 0.1em; }
  .nav__rules { padding-left: 12px; padding-right: 12px; }
}

/* Very small phones (320px, iPhone SE 1st gen) need one more notch. */
@media (max-width: 400px) {
  .nav__inner { gap: 8px; padding: 8px 6px 8px 12px; }
  .nav__actions { gap: 4px; }
  .nav .btn--sm { padding: 9px 10px; font-size: 10.5px; letter-spacing: 0.06em; }
  .nav__rules { padding-left: 10px; padding-right: 10px; }
}

@media (min-width: 700px) {
  .award-grid--cols2 { grid-template-columns: repeat(2, 1fr); }
  .award-grid--cols3 { grid-template-columns: repeat(2, 1fr); }
  .award-grid--cols4 { grid-template-columns: repeat(2, 1fr); }
  .award-minis { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); gap: 48px 44px; }
  .fineprint { grid-template-columns: repeat(2, 1fr); column-gap: 52px; }
  .criteria { grid-template-columns: repeat(2, 1fr); }
  .footer__inner { grid-template-columns: 1fr auto; align-items: start; }
  .footer__meta { grid-column: 1 / -1; }
  .award-row {
    grid-template-columns: 44px 1fr auto auto;
    align-items: center;
    gap: 4px 28px;
  }
  .award-row .award__rank { grid-row: auto; padding-top: 0; }
  .award-row .award__name { grid-column: 2; }
  .award-row .award__desc { grid-column: 2; }
  .award-row .award__partner { grid-column: 3; grid-row: 1 / span 2; justify-self: end; }
  .award-row .award__prize { grid-column: 4; grid-row: 1 / span 2; justify-self: end; }
}

@media (min-width: 900px) {
  .award-grid--cols3 { grid-template-columns: repeat(3, 1fr); }
  .award-minis { grid-template-columns: repeat(4, 1fr); }

  .timeline {
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    padding-top: 36px;
  }
  .timeline::before {
    left: 0; right: 0; top: 5px; bottom: auto;
    width: auto; height: 1px;
    background: linear-gradient(90deg,
      rgba(138,109,34,0.55), rgba(138,109,34,0.14));
  }
  .tl { padding: 0 24px 0 0; }
  .tl__dot { top: -36px; left: 0; }
  .footnote--center { text-align: center; }
}

/* Section links wait for 1024px: with three action pills in the capsule,
   showing them at 900px overflowed the nav (measured 908px into an 826px
   capsule). */
@media (min-width: 1024px) {
  .nav__links { display: flex; }
}

/* The longest model-award qualifier needs 368px of text column. At the
   standard 1200px wrap a 3-up card gives only 349px, so the Seedance line
   wrapped. Break the 3-up media grid out of the wrap by 32px a side and trim
   the card padding: card 412px - 36px padding - 2px border = 374px. Only
   applies once the wrap is at its 1200px ceiling, so nothing narrower moves. */
@media (min-width: 1310px) {
  .award-grid--cols3.award-grid--media {
    margin-inline: -32px;
  }
  .award-grid--cols3.award-grid--media .award__body { padding: 20px 18px; }
}

@media (min-width: 1100px) {
  .award-grid--cols4 { grid-template-columns: repeat(4, 1fr); }
}

/* --------------------------------------------------------------------------
   Reduced motion — kill the parallax, reveals, pulses, zooms.
   main.js reads the same query and skips the count-up + scroll transforms.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .reveal { opacity: 1; transform: none; }
  .hero__media { transform: none !important; }
  .hero__media video { display: none; }
  .hero__sound { display: none; }
  .hero__media img,
  .final-cta__media img,
  .reveal .award__media > img { transform: none !important; }
  .award-card:hover,
  .award-mini:hover { transform: none; }
  .award-row:hover { padding-left: 0; }
  .tl--now .tl__dot::after { animation: none; opacity: 0; }
}