@charset "UTF-8";
/* ==========================================================================
   India Influencer Awards 2026 - v5
   The light one: warm ivory paper, ink, and gold used the way a printer
   would use it - as foil on a few words and hairlines everywhere else. The
   red carpet photograph sits in an arched window; the page only goes dark
   once, for the closing banner, when the lights go down.
   Fraunces for the display lines, Hanken Grotesk for everything small.
   Mobile first.

   Motion lives in three places: here (states and keyframes), in the
   data-* hooks that js/main.js reads, and in the reduced-motion block at
   the very end, which turns all of it off.
   ========================================================================== */

:root {
  --paper: #f7f2e7;
  --paper-2: #efe7d6;
  --white: #fffdf8;
  --ink: #17130c;
  --soft: #5a5243;          /* body copy that steps back */
  --gold: #b08630;          /* rules and ornaments */
  --gold-deep: #7d5c16;     /* gold that has to be read as text on paper */
  --gold-hi: #f0d898;       /* gold on ink */
  --line: rgba(125, 92, 22, .3);
  --line-soft: rgba(125, 92, 22, .15);

  /* Both end on the colour they start with, so they can slide without a seam.
     --foil is for paper, --foil-hi for the dark closing banner and buttons. */
  --foil: linear-gradient(100deg, #6f5113 0%, #c39a3d 22%, #8a6619 40%, #d9b75f 55%, #8a6619 72%, #c39a3d 88%, #6f5113 100%);
  --foil-hi: linear-gradient(100deg, #b08630 0%, #f7e6b4 22%, #d2ac55 40%, #fff6d8 55%, #d2ac55 72%, #f7e6b4 88%, #b08630 100%);

  --serif: "Fraunces", "Times New Roman", serif;
  --sans: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;

  --g: 20px;        /* page gutter */
  --tick: 34px;     /* height of the ticker */
  --bar: 64px;      /* height of the bar under it */
  --r: 20px;        /* card radius */
  --shadow: 0 30px 60px -34px rgba(74, 52, 8, .45);
  --ease: cubic-bezier(.2, .75, .2, 1);
  --ease-io: cubic-bezier(.75, 0, .2, 1);
}

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

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--bar) + 16px); -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: lining-nums;
  overflow-x: hidden;
}
body.is-locked { overflow: hidden; }

/* Paper grain */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 300; pointer-events: none; opacity: .09;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .22 0 0 0 0 .05 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img { display: block; max-width: 100%; height: auto; }
a { color: var(--gold-deep); text-decoration: none; }
a:hover { color: var(--ink); }
::selection { background: var(--ink); color: var(--gold-hi); }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; }
p, figure, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 3px; }

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 600;
  padding: 10px 16px; border-radius: 999px; background: var(--ink); color: var(--gold-hi);
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
}
.skip-link:focus { top: 12px; color: var(--gold-hi); }

/* the tilted band and the hero's place cards reach past the edge of the page */
main { overflow-x: clip; }

.wrap { position: relative; width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 var(--g); }

/* --------------------------------------------------------------------------
   The curtain, and the line along the top that tracks the scroll
   -------------------------------------------------------------------------- */

.intro {
  position: fixed; inset: 0; z-index: 500;
  display: grid; place-content: center; justify-items: center; gap: 24px;
  background: var(--paper);
  pointer-events: none;
  animation: intro-out .9s var(--ease-io) 1.1s forwards;
}
.intro img { width: 84px; height: 84px; animation: intro-logo 1.1s var(--ease) both; }
.intro span { position: relative; width: 150px; height: 1px; overflow: hidden; background: var(--line-soft); }
.intro span::after { content: ""; position: absolute; inset: 0; background: var(--gold-deep); transform-origin: 0 50%; animation: intro-line 1s var(--ease-io) both; }
@keyframes intro-logo { from { opacity: 0; scale: .8; filter: blur(6px); } }
@keyframes intro-line { from { transform: scaleX(0); } }
@keyframes intro-out { to { transform: translateY(-100%); visibility: hidden; } }

.progress {
  position: fixed; inset: 0 0 auto; z-index: 70; height: 2px;
  background: var(--foil-hi);
  transform-origin: 0 50%; transform: scaleX(var(--p, 0));
  pointer-events: none;
}

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

.eyebrow {
  display: flex; align-items: center; gap: 12px;
  font-size: 11px; font-weight: 700; letter-spacing: .28em; line-height: 1.7; text-transform: uppercase;
  color: var(--gold-deep);
}
.eyebrow::before { content: "\2726"; flex: none; font-size: 10px; letter-spacing: 0; color: var(--gold); animation: twinkle 3.2s ease-in-out infinite; }
.eyebrow--center { justify-content: center; }
@keyframes twinkle { 50% { opacity: .35; scale: .7; rotate: 45deg; } }

.h2 {
  margin-top: 14px;
  font-family: var(--serif); font-weight: 340;
  font-size: clamp(36px, 8.8vw, 76px);
  line-height: 1.02;
  letter-spacing: -.025em;
  color: var(--ink);
}
.h2--xl { font-size: clamp(54px, 15vw, 150px); line-height: .92; letter-spacing: -.04em; }

/* Gold foil: the gradient is wider than the text and slides across it */
.h2 em,
.hero__title em,
.wid__pull em,
.closing__one em {
  font-style: italic; font-weight: 300;
  background: var(--foil); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  padding-right: .06em;
  animation: foil 9s linear infinite;
}
@keyframes foil { to { background-position: 200% 0; } }

/* Words in a slot each, so they can rise out of it (see split() in main.js) */
.w { display: inline-block; vertical-align: top; overflow: hidden; margin: 0 -.09em -.26em; padding: 0 .09em .26em; }
.w > span { display: inline-block; }
/* Once a heading is split, the foil has to sit on the words themselves */
[data-split].is-split em { background: none; animation: none; padding-right: 0; }
[data-split].is-split em .w { margin-inline: -.16em; padding-inline: .16em; }
[data-split].is-split em .w > span {
  /* the foil only paints inside the box, so the box has to reach round the
     italic's overhang and its descenders */
  margin: -.14em -.12em -.28em; padding: .14em .12em .28em;
  background: var(--foil); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text;
  animation: foil 9s linear infinite;
}
.js [data-split].is-split .w > span {
  transform: translateY(118%) rotate(5deg); transform-origin: 0 100%;
  transition: transform 1.1s var(--ease) calc(var(--i) * 60ms);
}
.js [data-split].is-split.is-in .w > span { transform: none; }

/* A paragraph that inks in word by word as it is scrolled through */
[data-scrub] .w { overflow: visible; }
.js [data-scrub] .w > span { opacity: .18; transition: opacity .5s; }
.js [data-scrub] .w > span.is-lit { opacity: 1; }

/* --------------------------------------------------------------------------
   Buttons - pills. The main one is ink with gold lettering; a band of light
   crosses on hover and the arrow leaves by the right and comes back in
   from the left.
   -------------------------------------------------------------------------- */

.btn {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 56px; padding: 0 30px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--sans); font-size: 12.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  white-space: nowrap;
  transition: transform .35s var(--ease), box-shadow .4s, color .3s, border-color .3s, background-color .3s;
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(105deg, transparent 32%, rgba(240, 216, 152, .5) 50%, transparent 68%);
  translate: -130% 0;
  transition: translate .9s var(--ease);
}
.btn:hover::before { translate: 130% 0; }
.btn i { font-style: normal; font-size: 16px; }
.btn:hover i { animation: arrow .55s var(--ease); }
@keyframes arrow {
  45% { translate: 150% 0; opacity: 0; }
  46% { translate: -150% 0; opacity: 0; }
}
.btn:active { scale: .97; }

.btn--gold {
  color: var(--gold-hi);
  background: var(--ink);
  box-shadow: 0 0 0 1px rgba(240, 216, 152, .3) inset, 0 18px 36px -18px rgba(23, 19, 12, .7);
}
.btn--gold:hover { color: #fff6d8; box-shadow: 0 0 0 1px rgba(240, 216, 152, .7) inset, 0 22px 44px -16px rgba(125, 92, 22, .75); }

.btn--line { color: var(--ink); border-color: var(--ink); background: transparent; }
.btn--line::before { background: var(--ink); translate: 0 101%; transition: translate .5s var(--ease); }
.btn--line:hover { color: var(--gold-hi); }
.btn--line:hover::before { translate: 0 0; }

.btn--sm { min-height: 40px; padding: 0 18px; font-size: 10.5px; letter-spacing: .14em; }
.btn--lg { min-height: 64px; padding: 0 40px; font-size: 13.5px; }
.btn--block { width: 100%; }

/* --------------------------------------------------------------------------
   Top: the ticker, then the bar
   -------------------------------------------------------------------------- */

.top { position: fixed; inset: 0 0 auto; z-index: 60; }

.ticker {
  height: var(--tick); overflow: hidden;
  display: flex; align-items: center;
  background: var(--ink);
  transition: margin-top .5s var(--ease);
}
/* tucks away once the page has moved */
.top.is-solid .ticker { margin-top: calc(var(--tick) * -1); }
.ticker__track,
.band__track { display: flex; width: max-content; animation: marquee 48s linear infinite; }
.ticker__track > div,
.band__track > div { flex: none; display: flex; align-items: center; }
.ticker span { font-size: 10.5px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; white-space: nowrap; color: #f3ead6; }
.ticker i { margin: 0 22px; font-style: normal; font-size: 9px; color: var(--gold-hi); }
@keyframes marquee { to { transform: translateX(-50%); } }

.top__in {
  display: flex; align-items: center; gap: 10px;
  height: var(--bar); padding: 0 8px 0 14px;
  border-bottom: 1px solid transparent;
  transition: background-color .4s, border-color .4s, box-shadow .4s;
}
.top.is-solid .top__in,
.top.is-open .top__in { background: rgba(247, 242, 231, .84); backdrop-filter: blur(16px) saturate(1.4); border-bottom-color: var(--line-soft); box-shadow: 0 14px 30px -26px rgba(74, 52, 8, .6); }

.brand { display: flex; align-items: center; gap: 12px; margin-right: auto; color: var(--ink); }
.brand img { width: 40px; height: 40px; transition: rotate .9s var(--ease); }
.brand:hover img { rotate: 360deg; }
.brand span { display: none; font-size: 10px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; white-space: nowrap; color: var(--ink); }
.brand b { color: var(--gold-deep); }

.nav { display: none; }

/* The marker that slides between the items of a group */
[data-pill] { position: relative; }
.pill {
  position: absolute; left: 0; top: 0; z-index: 0;
  border-radius: 999px;
  opacity: 0; pointer-events: none;
  transition: transform .55s var(--ease), width .55s var(--ease), height .55s var(--ease), opacity .3s;
}

.burger {
  width: 44px; height: 44px;
  display: grid; place-content: center; gap: 7px;
  border: 0; background: none;
}
.burger span { display: block; width: 24px; height: 1.5px; background: var(--ink); transition: transform .4s var(--ease), width .4s var(--ease); }
.burger span:last-child { width: 16px; justify-self: end; }
.burger:hover span:last-child { width: 24px; }
.burger[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { width: 24px; transform: translateY(-4.5px) rotate(-45deg); }

/* Full-screen menu */
.menu {
  position: fixed; inset: 0; z-index: 55;
  display: flex; flex-direction: column; justify-content: space-between; gap: 32px;
  padding: calc(var(--tick) + var(--bar) + 28px) var(--g) calc(28px + env(safe-area-inset-bottom));
  overflow-y: auto;
  background: radial-gradient(90% 55% at 50% 110%, rgba(201, 162, 75, .4), transparent 70%), var(--paper);
  animation: menu-in .5s var(--ease);
}
@keyframes menu-in { from { opacity: 0; } }
.menu__links { display: flex; flex-direction: column; }
.menu__links a {
  display: flex; align-items: baseline; gap: 18px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line-soft);
  font-family: var(--serif); font-weight: 340; font-size: clamp(30px, 8vw, 58px); line-height: 1.15; letter-spacing: -.02em;
  color: var(--ink);
  transition: color .3s, padding-left .45s var(--ease);
  animation: fade-up .7s var(--ease) calc(var(--i) * 55ms) both;
}
.menu__links a:hover { color: var(--gold-deep); padding-left: 14px; font-style: italic; }
.menu__links span { font-family: var(--sans); font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: .2em; color: var(--gold-deep); }
.menu__foot { font-size: 11px; font-weight: 600; letter-spacing: .2em; line-height: 1.8; text-transform: uppercase; color: var(--soft); }
@keyframes fade-up { from { opacity: 0; transform: translateY(18px); } }

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

.hero {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column;
  padding: calc(var(--tick) + var(--bar) + 36px) var(--g) 48px;
}

/* Champagne light drifting slowly behind everything */
.hero__glow { position: absolute; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
.hero__glow i { position: absolute; width: 70vmax; height: 70vmax; border-radius: 50%; filter: blur(70px); animation: drift 18s ease-in-out infinite alternate; }
.hero__glow i:nth-child(1) { left: -30vmax; top: -34vmax; background: radial-gradient(closest-side, rgba(233, 207, 139, .75), transparent); }
.hero__glow i:nth-child(2) { right: -34vmax; top: 10%; background: radial-gradient(closest-side, rgba(255, 253, 248, .95), transparent); animation-duration: 23s; animation-delay: -8s; }
.hero__glow i:nth-child(3) { left: 20%; bottom: -46vmax; background: radial-gradient(closest-side, rgba(201, 162, 75, .4), transparent); animation-duration: 27s; animation-delay: -4s; }
@keyframes drift { from { translate: -4% -3%; scale: 1; } to { translate: 5% 4%; scale: 1.12; } }

.hero__dust { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }

.hero__title {
  margin-top: 16px;
  font-family: var(--serif); font-weight: 340;
  font-size: clamp(46px, 14vw, 92px);
  line-height: .96;
  letter-spacing: -.04em;
  color: var(--ink);
}
.hero__title br { display: none; }
/* The headline waits for the curtain, then its words rise one by one */
.js .hero__title.is-split .w > span { transform: none; transition: none; animation: rise 1.2s var(--ease) calc(1.25s + var(--i) * 80ms) both; }
.js .hero__title.is-split em .w > span { animation: rise 1.2s var(--ease) calc(1.25s + var(--i) * 80ms) both, foil 9s linear infinite; }
@keyframes rise { from { transform: translateY(118%) rotate(5deg); } }

.hero__sub { margin-top: 20px; max-width: 520px; font-size: 17px; color: var(--soft); }
.hero__ctas { margin-top: 28px; display: grid; gap: 12px; }
.hero__meta {
  margin-top: 26px; padding-top: 18px;
  display: grid; gap: 6px;
  border-top: 1px solid var(--line);
  font-size: 11px; font-weight: 700; letter-spacing: .2em; line-height: 1.7; text-transform: uppercase; color: var(--ink);
}
.hero__meta li { display: flex; align-items: baseline; gap: 12px; }
.hero__meta li::before { content: ""; flex: none; width: 5px; height: 5px; rotate: 45deg; translate: 0 -2px; background: var(--gold); }

.hero .eyebrow,
.hero__sub,
.hero__ctas,
.hero__meta,
.count { animation: fade-up 1s var(--ease) both; }
.hero .eyebrow { animation-delay: 1.15s; }
.hero__sub { animation-delay: 1.7s; }
.hero__ctas { animation-delay: 1.85s; }
.hero__meta { animation-delay: 2s; }
.count { animation-delay: 2.15s; }

/* The arched window */
.hero__kv {
  position: relative;
  width: min(100%, 380px); margin: 56px auto 0;
  translate: calc(var(--px, 0) * -8px) calc(var(--py, 0) * -6px);
  transition: translate .9s var(--ease);
}
.arch {
  position: relative; overflow: hidden;
  aspect-ratio: 444 / 660;
  border-radius: 999px 999px 26px 26px;
  box-shadow: 0 50px 80px -40px rgba(74, 52, 8, .7), 0 0 0 1px rgba(125, 92, 22, .35);
  /* opens from the sill upwards once the curtain has gone */
  animation: arch-in 1.6s var(--ease-io) 1.2s both;
}
@keyframes arch-in { from { clip-path: inset(100% 0 0 0 round 999px 999px 26px 26px); } to { clip-path: inset(0 0 0 0 round 999px 999px 26px 26px); } }
/* A red carpet between gold stanchions, through a gold-lit marble hall to a
   bright doorway (1024 x 1535, portrait). The photograph is almost the
   window's own shape, so it simply fills it: the hall above, the carpet below. */
.hero__photo {
  position: absolute; inset: -2%;
  background: url("../img/red-carpet.jpg") 50% 55% / cover no-repeat;
  transform-origin: 50% 70%;
  animation: push-in 24s ease-in-out infinite alternate;
}
@keyframes push-in { to { transform: scale(1.09); } }
/* a second arch, a hairline of gold, set off behind the first */
.arch__line {
  position: absolute; inset: -14px 14px 14px -14px; z-index: -1;
  border: 1px solid var(--gold);
  border-radius: 999px 999px 30px 30px;
  animation: line-in 1.4s var(--ease) 2.2s both;
}
@keyframes line-in { from { opacity: 0; translate: 14px 14px; } }

/* Place cards and stars floating beside the window */
.tag {
  position: absolute; z-index: 2;
  padding: 9px 16px;
  border: 1px solid var(--line-soft); border-radius: 999px;
  background: rgba(255, 253, 248, .86); backdrop-filter: blur(8px);
  box-shadow: var(--shadow);
  font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; white-space: nowrap;
  color: var(--ink);
  animation: tag-in 1s var(--ease) both, bob 5s ease-in-out infinite alternate;
}
.tag::before { content: "\2726"; margin-right: 8px; color: var(--gold); }
.tag--a { left: -6px; top: 22%; animation-delay: 2.3s, 0s; }
.tag--b { right: -6px; bottom: 16%; animation-delay: 2.5s, -2.5s; }
@keyframes tag-in { from { opacity: 0; scale: .8; } }
@keyframes bob { from { translate: 0 -5px; } to { translate: 0 5px; } }

.star { position: absolute; font-weight: 400; color: var(--gold); animation: twinkle 3s ease-in-out infinite; }
.star--a { right: 2%; top: 4%; font-size: 26px; }
.star--b { left: -3%; bottom: 30%; font-size: 15px; animation-delay: -1s; }
.star--c { right: -4%; top: 44%; font-size: 12px; animation-delay: -2s; }

/* The seal: a ring of lettering turning around the council's mark */
.seal {
  position: absolute; left: -10px; bottom: -22px; z-index: 3;
  width: 112px; height: 112px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--ink);
  box-shadow: 0 20px 40px -18px rgba(23, 19, 12, .8), 0 0 0 5px var(--paper);
  animation: seal-in 1.2s var(--ease) 1.9s both;
}
.seal svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 26s linear infinite; }
.seal text { font-family: var(--sans); font-size: 12.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; fill: var(--gold-hi); }
.seal img { width: 42%; height: auto; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes seal-in { from { opacity: 0; scale: .5; rotate: -90deg; } }

/* Countdown to the close of nominations - a white card */
.count {
  margin-top: 56px;
  display: grid; gap: 16px;
  padding: 20px 20px 20px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  background: var(--white);
  box-shadow: var(--shadow);
  color: var(--ink);
  transition: border-color .4s, box-shadow .4s, transform .5s var(--ease);
}
.count:hover { color: var(--ink); border-color: var(--gold); transform: translateY(-3px); box-shadow: 0 40px 70px -36px rgba(74, 52, 8, .6); }
.count__label { display: grid; font-size: 13px; color: var(--soft); }
.count__label b { font-size: 10.5px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--gold-deep); }
.count__units { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.count__u { display: grid; justify-items: center; overflow: hidden; padding: 10px 0 8px; border-radius: 12px; background: var(--paper); }
.count__u b {
  font-family: var(--serif); font-weight: 340; font-size: clamp(30px, 9vw, 42px); line-height: 1; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--ink);
}
.count__u b.is-tick { animation: tick .55s var(--ease); }
@keyframes tick { from { transform: translateY(-70%); opacity: 0; filter: blur(3px); } }
.count__u small { margin-top: 4px; font-size: 9px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--soft); }
.count__go { display: flex; align-items: center; justify-content: space-between; white-space: nowrap; padding-top: 14px; border-top: 1px solid var(--line-soft); font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-deep); }
.count__go i { font-style: normal; font-size: 16px; transition: translate .4s var(--ease); }
.count:hover .count__go i { translate: 6px 0; }
/* once nominations have closed only the link is left */
.count.is-over .count__units { display: none; }

/* --------------------------------------------------------------------------
   Band - three words on ink, one in every three in foil
   -------------------------------------------------------------------------- */

.band { overflow: hidden; padding: 14px 0 20px; background: var(--ink); rotate: -1.2deg; scale: 1.03; margin: 20px 0 10px; }
.band__track { animation-duration: 38s; }
.band span {
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: clamp(44px, 10vw, 112px); line-height: 1.1; letter-spacing: -.03em; white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px rgba(240, 216, 152, .75);
}
.band span:nth-of-type(3n + 1) { -webkit-text-stroke: 0; background: var(--foil-hi); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; animation: foil 9s linear infinite; }
.band i { margin: 0 .5em; font-family: var(--sans); font-style: normal; font-weight: 400; font-size: clamp(20px, 3.4vw, 38px); color: var(--gold-hi); }

/* --------------------------------------------------------------------------
   Key dates - four stubs, and a line above them that fills as far as today
   -------------------------------------------------------------------------- */

.dates { padding: 64px 0 40px; }
.timeline { position: relative; margin-top: 26px; padding-left: 26px; display: grid; gap: 12px; }
/* the line, and the part of it that has been lived */
.timeline::before,
.timeline::after { content: ""; position: absolute; left: 4px; top: 8px; bottom: 8px; width: 2px; border-radius: 2px; background: var(--line-soft); }
.timeline::after { background: var(--gold-deep); transform-origin: 50% 0; transform: scaleY(var(--fill, 0)); transition: transform 1.8s var(--ease-io) .3s; }
.js .timeline:not(.is-in)::after { transform: scaleY(0); }

.timeline li {
  position: relative;
  display: flex; flex-direction: column; gap: 2px;
  padding: 18px 20px 20px;
  border: 1px solid var(--line-soft);
  border-radius: 16px;
  background: var(--white);
  transition: transform .5s var(--ease), box-shadow .5s, border-color .4s;
}
.timeline li:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--line); }
.timeline li::before {
  content: ""; position: absolute; left: -27px; top: 22px; z-index: 1;
  width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid var(--gold); background: var(--paper);
  transition: background-color .5s;
}
.timeline li.is-done::before { background: var(--gold-deep); border-color: var(--gold-deep); }
/* the date we are on: its stub turns to ink and a ring keeps opening out from its marker */
.timeline li.is-now { background: var(--ink); border-color: var(--ink); box-shadow: var(--shadow); }
.timeline li.is-now::after {
  content: ""; position: absolute; left: -33px; top: 16px;
  width: 24px; height: 24px; border-radius: 50%;
  border: 1px solid var(--gold-deep);
  animation: ping 2.2s var(--ease) infinite;
}
@keyframes ping { from { scale: .4; opacity: 1; } to { scale: 1.9; opacity: 0; } }
.timeline span { font-size: 10px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-deep); }
.timeline b { font-family: var(--serif); font-weight: 340; font-size: 26px; line-height: 1.15; letter-spacing: -.02em; color: var(--ink); }
.timeline small { font-size: 13px; color: var(--soft); }
.timeline li.is-now span { color: var(--gold-hi); }
.timeline li.is-now b { color: #fff6d8; }
.timeline li.is-now small { color: #cbbf9f; }

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

.sec { position: relative; padding: 84px 0; }

.sec__head { display: grid; gap: 18px; margin-bottom: 40px; }
.sec__head > * { min-width: 0; }
.sec__head .h2:first-child { margin-top: 0; }
.sec__lede { max-width: 560px; color: var(--soft); }

/* A section warmed from wherever the pointer is */
[data-spot]::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(560px circle at var(--sx, 50%) var(--sy, 30%), rgba(233, 207, 139, .5), transparent 65%);
  opacity: 0; transition: opacity .8s;
}
[data-spot].is-spot::before { opacity: 1; }

/* A line of gold on a card's border that follows the pointer
   (--mx / --my are set in main.js) */
[data-glow] { position: relative; }
[data-glow]::before {
  content: ""; position: absolute; inset: 0; z-index: 2;
  padding: 1.5px; border-radius: inherit;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 0%), var(--gold-deep), rgba(176, 134, 48, .5) 40%, transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .5s;
  pointer-events: none;
}
[data-glow]:hover::before { opacity: 1; }

[data-tilt] { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }

/* About */
.about__lead {
  margin-top: 30px;
  font-family: var(--serif); font-weight: 340; font-size: clamp(27px, 6.6vw, 56px); line-height: 1.14; letter-spacing: -.025em;
  color: var(--ink);
}
.about__foot { margin-top: 44px; display: grid; gap: 36px; }
.about__body { max-width: 560px; color: var(--soft); }

.stats { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--ink); }
.stats li { display: grid; gap: 6px; padding: 22px 10px 0 0; }
.stats li + li { padding-left: 14px; border-left: 1px solid var(--line-soft); }
.stats b {
  font-family: var(--serif); font-weight: 300; font-size: clamp(42px, 12vw, 92px); line-height: .95; letter-spacing: -.05em;
  font-variant-numeric: tabular-nums lining-nums;
  background: var(--foil); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: foil 9s linear infinite;
}
.stats li > span { font-size: 10px; font-weight: 700; letter-spacing: .2em; line-height: 1.5; text-transform: uppercase; color: var(--soft); }

/* World Influencer Day */
.wid { overflow: hidden; text-align: center; background: var(--white); border-block: 1px solid var(--line-soft); }
.wid__text { display: grid; gap: 18px; max-width: 720px; margin: 36px auto 0; color: var(--soft); }
.wid__pull {
  max-width: 1040px; margin: 52px auto 0; padding-top: 40px;
  border-top: 1px solid var(--line);
  font-family: var(--serif); font-weight: 340; font-size: clamp(30px, 7.4vw, 72px); line-height: 1.04; letter-spacing: -.03em;
  color: var(--ink);
}
.wid__pull em { display: block; }

/* The night */
.night__grid { display: grid; gap: 48px; }
.night__grid > * { min-width: 0; }
/* the teaser as a print, pinned at an angle on a white mount */
.poster {
  width: min(86%, 380px); margin: 0 auto;
  padding: 10px 10px 34px;
  border-radius: 6px;
  background: var(--white);
  box-shadow: 0 50px 80px -44px rgba(74, 52, 8, .75), 0 0 0 1px var(--line-soft);
  rotate: -3deg;
  transition: rotate .8s var(--ease);
}
.poster:hover { rotate: 0deg; }
.poster img { border-radius: 2px; }

/* the evening in three acts down a thread; the one being read is inked in */
.acts { margin-top: 30px; }
.acts li { position: relative; display: grid; grid-template-columns: 48px 1fr; gap: 18px; padding-bottom: 24px; }
.acts li:last-child { padding-bottom: 0; }
.acts li:not(:last-child)::before { content: ""; position: absolute; left: 23px; top: 54px; bottom: 6px; width: 1px; background: linear-gradient(180deg, var(--gold), transparent); }
.acts span {
  display: grid; place-items: center;
  width: 48px; height: 48px;
  border: 1px solid var(--line); border-radius: 50%;
  font-family: var(--serif); font-style: italic; font-size: 18px; color: var(--gold-deep);
  transition: background-color .5s, color .5s, border-color .5s, box-shadow .5s, scale .5s var(--ease);
}
.acts p { padding-top: 9px; font-size: 17px; color: var(--ink); transition: opacity .5s; }
.acts.is-lit li:not(.is-on) p { opacity: .45; }
.acts.is-lit li.is-on span { color: var(--gold-hi); background: var(--ink); border-color: var(--ink); box-shadow: 0 14px 30px -12px rgba(23, 19, 12, .7); scale: 1.08; }

.plaques { margin-top: 32px; display: grid; gap: 12px; }
.plaques div { padding: 18px 22px; border: 1px solid var(--line-soft); border-radius: 16px; background: var(--white); }
.plaques dt { font-size: 10px; font-weight: 700; letter-spacing: .26em; text-transform: uppercase; color: var(--gold-deep); }
.plaques dd { margin-top: 2px; font-family: var(--serif); font-weight: 340; font-size: 23px; line-height: 1.2; letter-spacing: -.02em; }

/* Who it's for */
.who { background: var(--paper-2); }
.guests { display: grid; gap: 14px; }
.guest {
  overflow: hidden;
  padding: 26px 24px 28px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  background: var(--white);
}
/* a rule of foil draws itself along the top of the card */
.guest::after { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--foil-hi); transform: scaleX(0); transform-origin: 0 50%; transition: transform .7s var(--ease); }
.guest:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.guest:hover::after { transform: scaleX(1); }
.guest__n {
  display: grid; place-items: center;
  width: 42px; height: 42px;
  border: 1px solid var(--line); border-radius: 50%;
  font-family: var(--serif); font-style: italic; font-size: 17px; color: var(--gold-deep);
  transition: rotate .7s var(--ease), background-color .4s, color .4s, border-color .4s;
}
.guest:hover .guest__n { rotate: 360deg; color: var(--gold-hi); background: var(--ink); border-color: var(--ink); }
.guest h3 { margin-top: 22px; font-family: var(--serif); font-weight: 340; font-size: 28px; line-height: 1.08; letter-spacing: -.025em; }
.guest p { margin-top: 12px; font-size: 15px; color: var(--soft); }

.meet {
  margin-top: 14px;
  display: grid; gap: 18px;
  padding: 28px 24px;
  border-radius: var(--r);
  background: var(--ink);
  color: #f3ead6;
}
.meet__label { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: 34px; line-height: 1.05; letter-spacing: -.02em; color: var(--gold-hi); }
.meet__list li { position: relative; padding: 14px 0 14px 30px; border-top: 1px solid rgba(240, 216, 152, .16); transition: padding-left .45s var(--ease), color .3s; }
.meet__list li::before { content: "\2726"; position: absolute; left: 0; top: 15px; font-size: 12px; color: var(--gold-hi); transition: rotate .6s var(--ease), scale .4s; }
.meet__list li:hover { padding-left: 40px; color: var(--gold-hi); }
.meet__list li:hover::before { rotate: 180deg; scale: 1.4; }

/* Categories - a ledger. Each row is washed with gold from the left on hover. */
.categories__cta { margin-top: 22px; }

.chips {
  display: flex; gap: 6px;
  margin: 0 calc(var(--g) * -1) 28px; padding: 0 var(--g) 6px;
  overflow-x: auto; scrollbar-width: none;
}
.chips::-webkit-scrollbar { display: none; }
.chips .pill,
.tabs .pill { background: var(--ink); box-shadow: 0 12px 24px -12px rgba(23, 19, 12, .7); }
.chip {
  position: relative; z-index: 1; flex: none;
  padding: 11px 18px;
  border: 1px solid var(--line); border-radius: 999px;
  background: transparent;
  font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--soft);
  transition: color .35s, border-color .35s;
}
.chip b { margin-left: 6px; font-weight: 700; color: var(--gold); transition: color .35s; }
.chip:hover { color: var(--ink); border-color: var(--ink); }
.chip.is-on { color: var(--gold-hi); border-color: transparent; }
.chip.is-on b { color: rgba(240, 216, 152, .6); }

.cgroup + .cgroup { margin-top: 56px; }
.cgroup__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 22px; padding-bottom: 14px; border-bottom: 1px solid var(--ink); }
.cgroup__name { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: 32px; line-height: 1.1; letter-spacing: -.02em; color: var(--gold-deep); }
.cgroup__note { font-size: 15px; color: var(--soft); }

.cats { isolation: isolate; }
.cat {
  position: relative;
  display: grid; gap: 8px;
  padding: 24px 0 26px;
  border-bottom: 1px solid var(--line-soft);
}
.cat::before {
  content: ""; position: absolute; inset: 0 -14px; z-index: -1;
  border-radius: 14px;
  background: linear-gradient(90deg, rgba(233, 207, 139, .55), rgba(233, 207, 139, 0) 80%);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .7s var(--ease);
}
.cat:hover::before { transform: scaleX(1); }
/* dealt back in when the filter changes */
.cgroup.is-swap .cat.is-in { animation: fade-up .6s var(--ease) calc(var(--i) * 45ms) both; }
.cat__n { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: 20px; line-height: 1; color: var(--gold-deep); transition: letter-spacing .5s var(--ease); }
.cat:hover .cat__n { letter-spacing: .1em; }
.cat h4 { font-family: var(--serif); font-weight: 340; font-size: 27px; line-height: 1.1; letter-spacing: -.025em; color: var(--ink); transition: translate .5s var(--ease); }
.cat > p { font-size: 15px; line-height: 1.55; color: var(--soft); }
.cat dl { display: grid; gap: 12px; }
.cat dt { font-size: 9.5px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-deep); }
.cat dd { margin-top: 2px; font-size: 14.5px; line-height: 1.5; color: var(--soft); }

/* The jury - arched portraits, echoing the hero's window, each with a
   hairline arch set off behind it; a strip to swipe on phones */
.jury { background: var(--white); border-block: 1px solid var(--line-soft); }
.jury + .partners { padding-top: 84px; }
.jury__meet {
  display: inline-flex; flex-wrap: wrap; gap: 4px 12px;
  margin-top: 18px; padding: 9px 18px;
  border: 1px solid var(--line); border-radius: 999px;
  font-size: 13px; color: var(--ink);
}
.jury__meet b { font-size: 10.5px; font-weight: 700; letter-spacing: .22em; line-height: 2; text-transform: uppercase; color: var(--gold-deep); }

.jurors {
  display: grid; grid-auto-flow: column; grid-auto-columns: 62%; gap: 22px;
  margin: 0 calc(var(--g) * -1); padding: 16px var(--g) 12px;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.jurors::-webkit-scrollbar { display: none; }
.juror { position: relative; scroll-snap-align: center; text-align: center; }
.juror::before {
  content: ""; position: absolute; inset: -8px 8px auto -8px;
  aspect-ratio: 4 / 5;
  border: 1px solid var(--gold);
  border-radius: 999px 999px 22px 22px;
  transition: translate .7s var(--ease);
}
.juror:hover::before { translate: -5px -5px; }
.juror__photo {
  position: relative; overflow: hidden;
  display: grid; place-items: end center;
  aspect-ratio: 4 / 5;
  border-radius: 999px 999px 18px 18px;
  background: radial-gradient(90% 60% at 50% 0%, rgba(233, 207, 139, .7), transparent 70%), var(--paper-2);
  box-shadow: 0 0 0 1px var(--line-soft);
  transition: translate .7s var(--ease), box-shadow .7s;
}
.juror:hover .juror__photo { translate: 5px 5px; box-shadow: 0 0 0 1px var(--line), var(--shadow); }
.juror__photo img { width: 100%; height: 100%; object-fit: cover; transition: scale 1.4s var(--ease); }
.juror:hover .juror__photo img { scale: 1.06; }
/* the empty seat */
.juror__photo svg { width: 78%; fill: none; stroke: var(--gold-deep); stroke-width: .7; opacity: .5; transition: opacity .5s, translate .8s var(--ease); translate: 0 4%; }
.juror:hover .juror__photo svg { opacity: 1; translate: 0 0; }
.juror__n { position: absolute; left: 50%; top: 16px; translate: -50% 0; font-family: var(--serif); font-style: italic; font-weight: 300; font-size: 18px; line-height: 1; color: var(--gold-deep); }
.juror h3 { margin-top: 22px; font-family: var(--serif); font-weight: 340; font-size: 24px; line-height: 1.1; letter-spacing: -.025em; }
.juror p { margin-top: 6px; font-size: 13px; line-height: 1.5; color: var(--soft); }

@media (min-width: 600px) {
  .jurors { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); gap: 40px 28px; margin: 0; padding: 8px 0 0 8px; overflow: visible; }
}
@media (min-width: 1100px) {
  .jury + .partners { padding-top: 140px; }
  .jurors { grid-template-columns: repeat(5, 1fr); gap: 32px; }
  /* every other seat steps down, so the row reads as a line-up rather than a grid */
  .juror:nth-child(even) { margin-top: 44px; }
}

/* Partner strip - a card of ink on the paper */
.partners { padding-top: 0; }
.own {
  overflow: hidden;
  display: flex; flex-direction: column; align-items: center;
  padding: 56px 24px 52px;
  border-radius: 28px;
  text-align: center;
  background:
    radial-gradient(80% 90% at 50% -10%, rgba(240, 216, 152, .22), transparent 60%),
    radial-gradient(120% 90% at 50% 120%, rgba(201, 162, 75, .3), transparent 70%),
    var(--ink);
  box-shadow: 0 60px 90px -60px rgba(23, 19, 12, .9);
  color: #f3ead6;
}
.own > * { position: relative; z-index: 3; }
.own::before { background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), #fff6d8, rgba(240, 216, 152, .5) 40%, transparent 70%); }
.own .h2 { margin-top: 0; max-width: 940px; font-size: clamp(31px, 7.4vw, 66px); color: #f7f0df; }
.own .h2:not(.is-split) em,
.own [data-split].is-split em .w > span { background-image: var(--foil-hi); }
.own p { max-width: 560px; margin-top: 18px; color: #d8cdb4; }
/* the four moments, bobbing like place cards */
.own__moments { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 26px; }
.own__moments li {
  padding: 9px 18px;
  border: 1px solid rgba(240, 216, 152, .3); border-radius: 999px;
  font-family: var(--serif); font-style: italic; font-weight: 300; font-size: 17px; line-height: 1.2; color: var(--gold-hi);
  animation: bob 5s ease-in-out calc(var(--i) * -1.3s) infinite alternate;
}
.own .btn { margin-top: 30px; color: var(--ink); background: var(--foil-hi); background-size: 220% 100%; box-shadow: 0 16px 40px -14px rgba(240, 216, 152, .6); }
.own .btn:hover { color: var(--ink); }
.own .btn::before { background: linear-gradient(105deg, transparent 32%, rgba(255, 255, 255, .7) 50%, transparent 68%); }

/* Forms */
.rsvp { padding-top: 0; }
.rsvp__card {
  max-width: 880px; margin: 0 auto;
  padding: 10px;
  border: 1px solid var(--line-soft);
  border-radius: 28px;
  background: var(--white);
  box-shadow: var(--shadow);
}
.tabs { display: grid; grid-template-columns: 1fr 1fr; padding: 6px; border-radius: 999px; background: var(--paper); }
.tab {
  position: relative; z-index: 1;
  min-height: 50px; padding: 0 10px;
  border: 0; border-radius: 999px;
  background: transparent;
  font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--soft);
  transition: color .35s;
}
.tab:hover { color: var(--ink); }
.tab.is-on { color: var(--gold-hi); }

.panel { padding: 26px 14px 16px; scroll-margin-top: 110px; }
/* Without the script the two forms show one after the other */
.js .panel:not(.is-on) { display: none; }
.js .panel.is-on { animation: fade-up .6s var(--ease); }

.form { display: grid; gap: 24px; }
.form__grid { display: grid; gap: 18px; }
.field { display: block; }
.field > span {
  display: flex; justify-content: space-between; gap: 12px;
  margin-bottom: 8px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .18em; line-height: 1.6; text-transform: uppercase; color: var(--gold-deep);
  transition: color .3s, letter-spacing .4s var(--ease);
}
.field:focus-within > span { color: var(--ink); letter-spacing: .22em; }
.field > span i { flex: none; font-style: normal; letter-spacing: .14em; color: var(--soft); }
.field input,
.field select,
.field textarea {
  width: 100%; height: 56px; padding: 0 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--paper);
  color: var(--ink);
  font: 400 16px var(--sans);
  color-scheme: light;
  transition: border-color .3s, box-shadow .3s, background-color .3s;
}
.field textarea { height: auto; min-height: 104px; padding: 14px 18px; resize: vertical; }
.field select {
  appearance: none; padding-right: 46px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237d5c16' stroke-width='1.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 16px center / 18px no-repeat,
    var(--paper);
}
.field select:invalid { color: rgba(90, 82, 67, .7); }
.field input::placeholder,
.field textarea::placeholder { color: rgba(90, 82, 67, .6); transition: opacity .3s, translate .4s var(--ease); }
.field input:focus::placeholder,
.field textarea:focus::placeholder { opacity: .4; translate: 6px 0; }
.field input:hover,
.field select:hover,
.field textarea:hover { border-color: var(--gold-deep); }
.field input:focus,
.field select:focus,
.field textarea:focus { outline: none; border-color: var(--ink); background-color: var(--white); box-shadow: 0 0 0 4px rgba(201, 162, 75, .28), 0 18px 34px -22px rgba(74, 52, 8, .6); }

.done { display: grid; justify-items: center; padding: 48px 16px 56px; text-align: center; animation: fade-up .8s var(--ease); }
.done:focus { outline: none; }
.done__mark { font-size: 34px; color: var(--gold); margin-bottom: 14px; animation: twinkle 2.4s ease-in-out infinite; }

/* Closing banner - the one place the lights go down */
.closing {
  position: relative; overflow: hidden;
  padding: 96px 0 110px;
  text-align: center;
  background: radial-gradient(70% 60% at 50% 105%, rgba(201, 162, 75, .34), transparent 70%), var(--ink);
  color: #f3ead6;
}
.closing[data-spot]::before { background: radial-gradient(560px circle at var(--sx, 50%) var(--sy, 30%), rgba(201, 162, 75, .16), transparent 65%); }
.closing__dust { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.closing__in { display: flex; flex-direction: column; align-items: center; }
.closing__seal { width: 72px; height: 72px; border-radius: 50%; box-shadow: 0 0 0 8px var(--ink), 0 0 0 9px rgba(240, 216, 152, .3), 0 0 60px rgba(201, 162, 75, .5); animation: halo 4s ease-in-out infinite alternate; }
@keyframes halo { to { box-shadow: 0 0 0 8px var(--ink), 0 0 0 9px var(--gold-hi), 0 0 90px rgba(240, 216, 152, .7); } }
.closing__lines { margin-top: 34px; display: grid; gap: 4px; font-size: 11.5px; font-weight: 600; letter-spacing: .26em; line-height: 1.9; text-transform: uppercase; color: #b9ad90; }
.closing__one { margin-top: 18px; font-family: var(--serif); font-weight: 300; font-size: clamp(44px, 12.5vw, 160px); line-height: .94; letter-spacing: -.045em; color: #f7f0df; }
.closing__one em { display: block; }
.closing__one:not(.is-split) em,
.closing__one.is-split em .w > span { background-image: var(--foil-hi); }
.closing__when {
  width: 100%; max-width: 660px; margin-top: 36px;
  display: grid;
  border-block: 1px solid rgba(240, 216, 152, .3);
  font-family: var(--serif); font-weight: 340; font-size: 21px; line-height: 1.25; letter-spacing: -.02em; color: #f7f0df;
}
.closing__when li { padding: 14px 10px; }
.closing__when li + li { border-top: 1px solid rgba(240, 216, 152, .16); }
.closing .btn { margin-top: 36px; color: var(--ink); background: var(--foil-hi); background-size: 220% 100%; box-shadow: 0 16px 44px -14px rgba(240, 216, 152, .7); }
.closing .btn:hover { color: var(--ink); }
.closing .btn::before { background: linear-gradient(105deg, transparent 32%, rgba(255, 255, 255, .7) 50%, transparent 68%); }

/* --------------------------------------------------------------------------
   Footer, and the things pinned to the screen
   -------------------------------------------------------------------------- */

.foot { padding: 44px 0 calc(110px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(240, 216, 152, .14); background: #0f0c07; color: #f3ead6; }
.foot__in { display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; }
.foot__brand { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.foot__brand p { font-size: 10.5px; font-weight: 600; letter-spacing: .28em; text-transform: uppercase; }
.foot__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; }
.foot__links a { position: relative; font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: #b9ad90; }
.foot__links a::after { content: ""; position: absolute; inset: auto 0 -4px; height: 1px; background: var(--gold-hi); transform: scaleX(0); transform-origin: 100% 50%; transition: transform .45s var(--ease); }
.foot__links a:hover { color: var(--gold-hi); }
.foot__links a:hover::after { transform: scaleX(1); transform-origin: 0 50%; }
.foot__copy { font-size: 12px; color: rgba(185, 173, 144, .7); }

/* Phones: the two things to do, once the hero has gone */
.dock {
  position: fixed; inset: auto 0 0; z-index: 50;
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line-soft);
  background: rgba(247, 242, 231, .9); backdrop-filter: blur(16px);
  box-shadow: 0 -18px 30px -24px rgba(74, 52, 8, .5);
  translate: 0 110%;
  transition: translate .6s var(--ease);
}
.is-scrolled .dock:not(.is-away) { translate: 0 0; }
.dock .btn { min-height: 46px; padding: 0 8px; }

/* Back to top, ringed by how far down the page we are */
.totop {
  position: fixed; right: 14px; bottom: calc(82px + env(safe-area-inset-bottom)); z-index: 50;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: conic-gradient(var(--gold-deep) calc(var(--p, 0) * 360deg), var(--line-soft) 0);
  box-shadow: var(--shadow);
  color: var(--ink);
  opacity: 0; scale: .6; pointer-events: none;
  transition: opacity .4s, scale .5s var(--ease);
}
.totop::before { content: ""; position: absolute; inset: 2px; border-radius: 50%; background: var(--white); }
.totop i { position: relative; font-style: normal; font-size: 16px; transition: translate .4s var(--ease); }
.totop:hover { color: var(--gold-deep); }
.totop:hover i { translate: 0 -3px; }
.is-scrolled .totop { opacity: 1; scale: 1; pointer-events: auto; }

/* The ring that trails the pointer, and the sparks a button throws */
.cursor { position: fixed; left: 0; top: 0; z-index: 400; width: 38px; height: 38px; margin: -19px 0 0 -19px; pointer-events: none; opacity: 0; transition: opacity .3s; }
.cursor::before { content: ""; position: absolute; inset: 0; border: 1px solid rgba(125, 92, 22, .7); border-radius: 50%; transition: scale .4s var(--ease), background-color .3s, border-color .3s; }
.cursor.is-on { opacity: 1; }
.cursor.is-over::before { scale: 1.7; background: rgba(201, 162, 75, .18); border-color: var(--gold-deep); }
.cursor.is-text::before { scale: .25; background: var(--gold-deep); }
.cursor.is-down::before { scale: .8; }

.spark { position: fixed; z-index: 450; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 6px rgba(201, 162, 75, .8); pointer-events: none; }
.spark--star { width: auto; height: auto; background: none; box-shadow: none; font-style: normal; font-size: 16px; line-height: 1; color: var(--gold); }
.spark--star::before { content: "\2726"; }

/* --------------------------------------------------------------------------
   Reveal on scroll - switched on by the .js class set in the <head>.
   Uses translate, not transform, so a card can tilt while it arrives; the
   list also carries the hover transitions those cards need.
   -------------------------------------------------------------------------- */

.js [data-rv] {
  opacity: 0; translate: 0 30px;
  transition:
    opacity 1s var(--ease) calc(var(--i, 0) * 80ms),
    translate 1s var(--ease) calc(var(--i, 0) * 80ms),
    transform .45s var(--ease), border-color .4s, background-color .4s, box-shadow .4s, rotate .8s var(--ease);
}
.js [data-rv].is-in { opacity: 1; translate: none; }

/* ==========================================================================
   >= 600px
   ========================================================================== */

@media (min-width: 600px) {
  :root { --g: 32px; }

  .top__in { padding: 0 18px 0 22px; gap: 14px; }
  .brand span { display: block; }

  .hero { padding-top: calc(var(--tick) + var(--bar) + 56px); }
  .hero__ctas { grid-template-columns: auto auto; justify-content: start; }
  .hero__kv { width: min(100%, 420px); }
  .seal { width: 136px; height: 136px; left: -40px; }
  .tag--a { left: -44px; }
  .tag--b { right: -44px; }
  .count { grid-template-columns: auto 1fr; align-items: center; column-gap: 28px; max-width: 620px; }
  .count__go { grid-column: 1 / -1; }

  .timeline { padding: 22px 0 0; grid-template-columns: repeat(4, 1fr); }
  .timeline::before,
  .timeline::after { left: 0; right: 0; top: 5px; bottom: auto; width: auto; height: 2px; }
  .timeline::after { transform-origin: 0 50%; transform: scaleX(var(--fill, 0)); }
  .js .timeline:not(.is-in)::after { transform: scaleX(0); }
  .timeline li::before { left: 0; top: -23px; }
  .timeline li.is-now::after { left: -6px; top: -29px; }

  .plaques { grid-template-columns: 1fr 1fr; }
  .guests { grid-template-columns: 1fr 1fr; }
  .chips { flex-wrap: wrap; margin-inline: 0; padding-inline: 0; overflow: visible; }

  .own { padding: 72px 48px 68px; }
  .rsvp__card { padding: 14px; }
  .tab { font-size: 12.5px; letter-spacing: .18em; }
  .panel { padding: 34px 26px 24px; }
  .form__grid { grid-template-columns: 1fr 1fr; }
  .field--wide { grid-column: 1 / -1; }

  .closing__when { grid-template-columns: 1fr 1fr; align-items: center; }
  .closing__when li + li { border-top: 0; border-left: 1px solid rgba(240, 216, 152, .16); }
}

/* ==========================================================================
   >= 1100px
   ========================================================================== */

@media (min-width: 1100px) {
  :root { --g: 56px; --bar: 76px; }

  body { font-size: 17px; }

  .top__in { padding: 0 40px; }
  .brand img { width: 46px; height: 46px; }
  .btn--sm { min-height: 44px; padding: 0 24px; font-size: 11px; }
  .menu { padding-inline: 12vw; }
  .menu__links { max-width: 820px; }

  /* Hero: the type on the left, the arched window on the right */
  .hero {
    display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: 1fr auto; column-gap: 40px;
    align-items: center;
    min-height: clamp(720px, 100svh, 1060px);
    padding: calc(var(--tick) + var(--bar) + 24px) clamp(40px, 5.4vw, 104px) 40px;
  }
  .hero__copy { grid-column: 1; grid-row: 1; align-self: end; }
  .hero__title { margin-top: 18px; font-size: clamp(64px, 6.6vw, 128px); line-height: .92; white-space: nowrap; }
  .hero__title br { display: inline; }
  .hero__sub { margin-top: 20px; max-width: 520px; font-size: 18px; }
  .hero__ctas { margin-top: 26px; gap: 14px; }
  .hero__meta { max-width: 560px; margin-top: 28px; padding-top: 18px; grid-auto-flow: column; justify-content: start; gap: 34px; }

  .hero__kv { grid-column: 2; grid-row: 1 / 3; justify-self: center; width: min(100%, 44svh, 460px); margin: 0; }
  .seal { width: 156px; height: 156px; left: -64px; bottom: -8px; }
  .tag { font-size: 11px; padding: 11px 20px; }
  .tag--a { left: -72px; top: 20%; }
  .tag--b { right: -40px; bottom: 18%; }
  .star--a { font-size: 38px; right: -4%; }

  .count {
    grid-column: 1; grid-row: 2; align-self: start;
    margin-top: 26px;
    grid-template-columns: auto auto 1fr; max-width: 740px;
    padding: 16px 22px;
  }
  .count__units { gap: 8px; }
  .count__u { min-width: 72px; }
  .count__go { grid-column: auto; justify-content: flex-end; gap: 12px; padding: 0; border: 0; }
  .count__label { white-space: nowrap; }

  .band { padding: 20px 0 28px; margin: 40px 0 20px; }

  .dates { padding: 96px 0 56px; }
  .timeline { gap: 16px; }
  .timeline li { padding: 22px 24px 26px; }
  .timeline b { font-size: 30px; }

  .sec { padding: 140px 0; }
  .sec__head { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; align-items: end; margin-bottom: 64px; }

  .about { padding-top: 96px; }
  .about__lead { max-width: 1120px; margin-top: 44px; }
  .about__foot { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 80px; align-items: end; margin-top: 80px; }
  .about__body { font-size: 18px; }
  .stats li { padding: 30px 16px 0 0; }
  .stats li + li { padding-left: 28px; }
  .stats li > span { font-size: 11px; }

  .wid__text { grid-template-columns: 1fr 1fr; gap: 48px; max-width: 980px; margin-top: 64px; text-align: left; font-size: 18px; }
  .wid__pull { margin-top: 80px; padding-top: 64px; }

  /* copy first, the print on the right */
  .night__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 96px; align-items: center; }
  .night__copy { order: -1; }
  .poster { width: min(100%, 430px); padding: 14px 14px 48px; }
  .acts { margin-top: 38px; }
  .acts li { padding-bottom: 28px; }
  .acts p { font-size: 19px; line-height: 1.55; }
  .plaques dd { font-size: 26px; }

  .guests { grid-template-columns: repeat(4, 1fr); gap: 18px; }
  .guest { padding: 30px 26px 36px; }
  .meet { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 56px; margin-top: 18px; padding: 44px 48px; }
  .meet__label { font-size: 46px; }
  .meet__list li:first-child { border-top: 0; }

  .cgroup + .cgroup { margin-top: 80px; }
  .cgroup__name { font-size: 40px; }
  /* number | award | what it honours */
  .cat { grid-template-columns: 72px minmax(0, 5fr) minmax(0, 6fr); gap: 32px; align-items: baseline; padding: 30px 0 32px; }
  .cat::before { inset: 0 -24px; }
  .cat h4 { font-size: 34px; }
  .cat:hover h4 { translate: 10px 0; }
  .cat > p { font-size: 16px; }
  .cat dl { grid-template-columns: 1fr 1fr; gap: 28px; }

  .own { padding: 104px 64px 96px; border-radius: 36px; }
  .own__moments li { font-size: 20px; padding: 10px 22px; }
  .rsvp__card { border-radius: 36px; }
  .panel { padding: 44px 44px 34px; }

  .closing { padding: 150px 0 170px; }
  .closing__seal { width: 88px; height: 88px; }
  .closing__lines { font-size: 12.5px; }
  .closing__when { font-size: 25px; margin-top: 48px; }
  .closing__when li { padding: 18px 16px; }

  .foot { padding-bottom: 44px; }
  .foot__in { flex-direction: row; justify-content: space-between; text-align: left; }
  .foot__brand { flex-direction: row; }

  .dock { display: none; }
  .totop { right: 28px; bottom: 28px; width: 54px; height: 54px; }
}

/* ==========================================================================
   >= 1340px - room for the section links in the bar. Here the marker is a
   rule under the current link rather than a pill around it.
   ========================================================================== */

@media (min-width: 1340px) {
  .nav { display: flex; gap: 4px; margin-right: 28px; }
  .nav .pill { border-radius: 0; border-bottom: 2px solid var(--ink); }
  .nav a {
    position: relative; z-index: 1;
    padding: 10px 14px;
    font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap;
    color: var(--soft);
    transition: color .3s;
  }
  .nav a:hover,
  .nav a.is-current { color: var(--ink); }
  .burger { display: none; }
}

/* ==========================================================================
   Reduced motion: everything is simply there
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .intro { display: none; }
  .js [data-rv] { opacity: 1; translate: none; }
  .js [data-split].is-split .w > span { transform: none; }
  .js [data-scrub] .w > span { opacity: 1; }
}

/* ==========================================================================
   Award details - a "Details" button at the end of each ledger row, and the
   dialog it opens (markup: shared/category-modal.php, behaviour: its .js)
   ========================================================================== */

.cat__more {
  justify-self: start; align-self: center;
  display: inline-flex; align-items: center; gap: 12px;
  margin-top: 6px; padding: 0;
  border: 0; background: none;
  font-size: 10.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold-deep);
  transition: color .3s;
}
/* the whole row answers the click */
.cat__more::after { content: ""; position: absolute; inset: 0 -14px; z-index: 1; border-radius: 14px; }
.cat__more:focus-visible { outline: none; }
.cat__more:focus-visible::after { outline: 2px solid var(--gold-deep); outline-offset: -2px; }
/* a plus in a ring that turns and fills with ink on hover */
.cat__more i {
  position: relative; flex: none;
  width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 50%;
  background: var(--white);
  transition: transform .5s var(--ease), background-color .3s, border-color .3s;
}
.cat__more i::before,
.cat__more i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 1.5px; margin: -.75px 0 0 -5.5px; background: var(--ink); transition: background-color .3s; }
.cat__more i::after { transform: rotate(90deg); }
.cat:hover .cat__more { color: var(--ink); }
.cat:hover .cat__more i { transform: rotate(90deg); background: var(--ink); border-color: var(--ink); }
.cat:hover .cat__more i::before,
.cat:hover .cat__more i::after { background: var(--gold-hi); }

@media (min-width: 1100px) {
  .cat { grid-template-columns: 72px minmax(0, 5fr) minmax(0, 6fr) auto; }
  .cat__more { margin: 0 0 0 8px; }
}

/* The dialog */
.cm {
  width: min(640px, calc(100% - 32px)); max-width: none; max-height: none;
  margin: auto; padding: 0; border: 0;
  overflow: visible; background: transparent; color: var(--ink);
}
.cm::backdrop { background: rgba(23, 19, 12, .42); backdrop-filter: blur(8px) saturate(1.1); opacity: 0; transition: opacity .35s; }
.cm.is-open::backdrop { opacity: 1; }
.cm__card {
  position: relative;
  display: flex; flex-direction: column;
  max-height: min(86vh, 800px);
  border-radius: 26px;
  overflow: hidden;
  background: radial-gradient(120% 45% at 50% 0%, rgba(233, 207, 139, .45), transparent 65%), var(--white);
  box-shadow: 0 0 0 1px var(--line-soft), 0 60px 110px -40px rgba(23, 19, 12, .55);
  opacity: 0; transform: translateY(18px) scale(.97);
  transition: opacity .35s var(--ease), transform .5s var(--ease);
}
.cm.is-open .cm__card { opacity: 1; transform: none; }
.cm.is-closing .cm__card { opacity: 0; transform: translateY(10px) scale(.985); transition-duration: .28s; }
/* a line of foil draws across the top as it opens */
.cm__card::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; z-index: 2; height: 2px;
  background: var(--foil-hi); background-size: 200% 100%;
  transform: scaleX(0); transition: transform 1.1s var(--ease) .15s;
  animation: foil 9s linear infinite;
}
.cm.is-open .cm__card::before { transform: none; }

.cm__scroll { overflow-y: auto; overscroll-behavior: contain; padding: 44px 34px 26px; scrollbar-width: thin; scrollbar-color: var(--gold) transparent; }
.cm__close {
  position: absolute; right: 16px; top: 16px; z-index: 3;
  display: grid; place-items: center;
  width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 50%;
  background: var(--white);
  transition: transform .5s var(--ease), background-color .3s, border-color .3s;
}
.cm__close span { position: absolute; width: 14px; height: 1.5px; background: var(--ink); transform: rotate(45deg); transition: background-color .3s; }
.cm__close span + span { transform: rotate(-45deg); }
.cm__close:hover { transform: rotate(90deg); background: var(--ink); border-color: var(--ink); }
.cm__close:hover span { background: var(--gold-hi); }

.cm__kicker { display: flex; align-items: baseline; gap: 14px; padding-right: 48px; font-size: 10.5px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--gold-deep); }
.cm__kicker b { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: 20px; letter-spacing: 0; color: var(--gold-deep); }
.cm__title { margin-top: 12px; font-family: var(--serif); font-weight: 340; font-size: clamp(32px, 6.4vw, 46px); line-height: 1.04; letter-spacing: -.03em; color: var(--ink); }
.cm__lede { margin-top: 18px; font-size: 16.5px; color: var(--soft); }
.cm__pair { display: grid; gap: 10px; margin-top: 20px; }
.cm__pair div { padding: 14px 16px; border-radius: 14px; background: var(--paper); }
.cm__pair dt,
.cm__label { display: block; font-size: 9.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-deep); }
.cm__pair dd { margin-top: 4px; font-size: 15px; color: var(--soft); }
.cm__note { margin-top: 20px; padding: 14px 16px; border-left: 2px solid var(--gold); border-radius: 0 12px 12px 0; background: var(--paper); font-size: 14.5px; color: var(--ink); }

.cm__sec { margin-top: 30px; }
.cm__h { padding-bottom: 10px; border-bottom: 1px solid var(--ink); font-size: 10.5px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--ink); }
.cm__award { padding: 16px 0; border-bottom: 1px solid var(--line-soft); }
.cm__award-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; font-family: var(--serif); font-weight: 340; font-size: 22px; line-height: 1.2; letter-spacing: -.02em; color: var(--ink); }
.cm__track { padding: 3px 10px; border-radius: 999px; background: var(--ink); font-family: var(--sans); font-size: 9.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-hi); }
.cm__award .cm__label { margin-top: 12px; color: var(--soft); }
.cm__who { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.cm__who li { padding: 5px 12px; border: 1px solid var(--line-soft); border-radius: 999px; background: var(--paper); font-size: 13px; color: var(--ink); }
.cm__ready li { display: grid; gap: 3px; padding: 12px 0; border-bottom: 1px solid var(--line-soft); font-size: 14.5px; color: var(--ink); }
.cm__ready li:last-child { border-bottom: 0; }
.cm__window { margin-top: 16px; font-size: 12.5px; color: var(--soft); }

.cm__foot { display: grid; gap: 16px; padding: 18px 34px 22px; border-top: 1px solid var(--line-soft); background: var(--paper); }
.cm__go { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.cm__go .btn { min-height: 46px; padding: 0 22px; font-size: 11px; }
.cm__go p { font-size: 12.5px; color: var(--soft); }
.cm__nav { display: flex; align-items: center; justify-content: space-between; }
.cm__step { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 50%; background: var(--white); color: var(--ink); transition: background-color .3s, color .3s, border-color .3s, transform .4s var(--ease); }
.cm__step:hover { background: var(--ink); border-color: var(--ink); color: var(--gold-hi); }
.cm__step[data-cm-step="-1"]:hover { transform: translateX(-3px); }
.cm__step[data-cm-step="1"]:hover { transform: translateX(3px); }
.cm__count { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: 19px; color: var(--gold-deep); font-variant-numeric: tabular-nums; }

/* each award's content steps in */
.cm.is-fresh .cm__kicker,
.cm.is-fresh .cm__title,
.cm.is-fresh .cm__body > * { animation: fade-up .6s var(--ease) both; }
.cm.is-fresh .cm__title { animation-delay: .05s; }
.cm.is-fresh .cm__body > :nth-child(1) { animation-delay: .1s; }
.cm.is-fresh .cm__body > :nth-child(2) { animation-delay: .15s; }
.cm.is-fresh .cm__body > :nth-child(3) { animation-delay: .2s; }
.cm.is-fresh .cm__body > :nth-child(n + 4) { animation-delay: .25s; }

/* phones: a sheet from the bottom */
@media (max-width: 599px) {
  .cm { width: 100%; margin: auto 0 0; }
  .cm__card { max-height: 90vh; border-radius: 24px 24px 0 0; transform: translateY(60px); }
  .cm.is-closing .cm__card { transform: translateY(60px); }
  .cm__scroll { padding: 40px 20px 22px; }
  .cm__foot { padding: 16px 20px calc(18px + env(safe-area-inset-bottom)); }
  .cm__go p { flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .cm__card,
  .cm.is-closing .cm__card { opacity: 1; transform: none; }
  .cm::backdrop { opacity: 1; }
}

/* ==========================================================================
   Content v2 - the pieces the new copy needs
   ========================================================================== */

/* Hero, in the document's order: event line, the two buttons, then the line
   about the 25 awards */
.hero__meta { animation-delay: 1.6s; }
.hero__ctas { animation-delay: 1.75s; }
.hero__sub { animation-delay: 1.9s; }

/* Bar: Nominate Now and, from tablets up, Partner With Us beside it */
.top__ctas { display: flex; gap: 8px; }
.top__cta--2 { display: none; }
@media (min-width: 760px) { .top__cta--2 { display: inline-flex; } }

/* About */
.about__body { display: grid; gap: 16px; }
.about__body .about__cta { justify-self: start; margin-top: 10px; }
.stats--4 { grid-template-columns: 1fr 1fr; }
.stats--4 li:nth-child(3) { padding-left: 0; border-left: 0; }
.stats--4 li:nth-child(n + 3) { margin-top: 18px; padding-top: 22px; border-top: 1px solid var(--line-soft); }
.about__pull {
  margin-top: 56px; padding-top: 40px;
  border-top: 1px solid var(--line);
  font-family: var(--serif); font-weight: 340; font-size: clamp(32px, 7.4vw, 72px); line-height: 1.04; letter-spacing: -.03em; text-align: center;
  color: var(--ink);
}

/* Category rows: the name with its sub-title, then the one-liner and "Ideal for" */
.cat__name { display: grid; gap: 4px; }
.cat > .cat__name p.cat__sub,
.cat__sub { font-size: 10.5px; font-weight: 700; letter-spacing: .18em; line-height: 1.5; text-transform: uppercase; color: var(--gold-deep); }
.cat__about { display: grid; gap: 10px; }
.cat__about > p { font-size: 15px; line-height: 1.55; color: var(--soft); }
.cat__about dt { font-size: 9.5px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-deep); }
.cat__about dd { margin-top: 2px; font-size: 14px; line-height: 1.5; color: var(--soft); }
.cat--special h4 { color: var(--gold-deep); }
.categories__end { display: flex; justify-content: center; margin-top: 56px; }

/* How to nominate */
.how { background: var(--white); border-block: 1px solid var(--line-soft); }
.steps { display: grid; gap: 14px; }
.step { position: relative; overflow: hidden; padding: 26px 24px 28px; border: 1px solid var(--line-soft); border-radius: var(--r); background: var(--paper); transition: transform .45s var(--ease), box-shadow .45s; }
.step::after { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--foil-hi); transform: scaleX(0); transform-origin: 0 50%; transition: transform .7s var(--ease); }
.step:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.step:hover::after { transform: scaleX(1); }
.step__n {
  display: grid; place-items: center;
  width: 46px; height: 46px; border: 1px solid var(--line); border-radius: 50%;
  font-family: var(--serif); font-style: italic; font-size: 20px; color: var(--gold-deep);
  transition: rotate .7s var(--ease), background-color .4s, color .4s, border-color .4s;
}
.step:hover .step__n { rotate: 360deg; color: var(--gold-hi); background: var(--ink); border-color: var(--ink); }
.step h3 { margin-top: 20px; font-family: var(--serif); font-weight: 340; font-size: 28px; line-height: 1.08; letter-spacing: -.025em; }
.step p { margin-top: 10px; font-size: 15px; color: var(--soft); }
.how__more { display: grid; gap: 14px; margin-top: 14px; }
.how__col { padding: 26px 24px; border-radius: var(--r); background: var(--ink); color: #f3ead6; }
.how__h { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: 30px; line-height: 1.05; color: var(--gold-hi); }
.how__list { margin-top: 14px; }
.how__list li { position: relative; padding: 12px 0 12px 26px; border-top: 1px solid rgba(240, 216, 152, .16); font-size: 15px; }
.how__list li::before { content: "\2726"; position: absolute; left: 0; top: 13px; font-size: 11px; color: var(--gold-hi); }
.how__link { display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-hi); }
.how__link:hover { color: #fff6d8; }
.how__link i { font-style: normal; font-size: 15px; transition: translate .4s var(--ease); }
.how__link:hover i { translate: 5px 0; }

/* Partner: the four moments are now a list of what can be owned */
.own__h { margin-top: 30px; font-family: var(--serif); font-style: italic; font-weight: 300; font-size: 28px; color: var(--gold-hi); }
.own__moments { flex-direction: column; align-items: stretch; width: min(100%, 640px); margin-top: 14px; }
.own__moments li { border-radius: 14px; text-align: left; }

/* The partnership form has the card to itself for now */
.rsvp__title { padding: 18px 14px 0; text-align: center; font-family: var(--serif); font-weight: 340; font-size: clamp(32px, 6.4vw, 48px); line-height: 1.04; letter-spacing: -.03em; color: var(--ink); }

/* Closing: both buttons; the second is an outline on the dark banner */
.closing__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 36px; }
.closing__ctas .btn { margin-top: 0; }
.closing .btn--line { color: #f7f0df; background: transparent; border-color: rgba(240, 216, 152, .45); box-shadow: none; }
.closing .btn--line:hover { color: var(--ink); }
.foot__copy a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* Award details: sub-title, the judging weights, the entry needs */
.cm__sub { margin-top: 8px; font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-deep); }
.cm__score { display: grid; gap: 12px; margin-top: 14px; }
.cm__score li { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; font-size: 14.5px; color: var(--ink); }
.cm__score b { font-family: var(--serif); font-size: 18px; font-weight: 340; color: var(--gold-deep); }
.cm__score i { grid-column: 1 / -1; height: 3px; border-radius: 3px; background: var(--paper); overflow: hidden; }
.cm__score i::before { content: ""; display: block; height: 100%; background: var(--foil); background-size: 200% 100%; transform: scaleX(var(--w)); transform-origin: 0 50%; }
.cm.is-fresh .cm__score i::before { animation: rule-in 1s var(--ease) .25s both; }
.cm__needs { margin-top: 12px; font-size: 14.5px; color: var(--ink); }
@keyframes rule-in { from { transform: scaleX(0); } }

@media (min-width: 600px) {
  .stats--4 { grid-template-columns: repeat(4, 1fr); }
  .stats--4 li:nth-child(3) { padding-left: 14px; border-left: 1px solid var(--line-soft); }
  .stats--4 li:nth-child(n + 3) { margin-top: 0; padding-top: 22px; border-top: 0; }
  .steps { grid-template-columns: repeat(3, 1fr); }
  .how__more { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1100px) {
  .about__pull { margin-top: 96px; padding-top: 64px; }
  .stats--4 li:nth-child(3) { padding-left: 28px; }
  .cat { align-items: start; }
  .cat__more { align-self: center; }
  .step { padding: 32px 30px 36px; }
  .how__col { padding: 34px 36px; }
}
@media (min-width: 1100px) {
  /* the banner's longer wording needs the wider card */
  .count { max-width: 900px; }
}