@charset "UTF-8";
/* ==========================================================================
   India Influencer Awards 2026 - v6
   After the Grammys' own site: a white page, a rounded bar that floats,
   content in a bento grid of rounded tiles, and sections that alternate
   between white, charcoal and sand. One accent - a muted tan - and one
   typeface, Figtree: light for the big lines, bold for headings.

   Motion is deliberately small: things fade up a few pixels as they
   arrive, images settle, arrows turn, a dot breathes. Nothing bounces,
   nothing glows. All of it is off under prefers-reduced-motion.
   Mobile first.
   ========================================================================== */

:root {
  --white: #ffffff;
  --mist: #f3f4f4;
  --mist-2: #e7e8e8;
  --ink: #23241f;
  --coal: #2f302b;
  --deep: #1a1b17;
  --sand: #ebe5d3;
  --sand-2: #e2dac3;
  --tan: #c7ad74;
  --tan-hi: #d9c38f;
  --tan-deep: #826b38;
  --soft: #5e5d56;
  --on-dark: rgba(255, 255, 255, .72);
  --line: rgba(35, 36, 31, .14);
  --line-dark: rgba(255, 255, 255, .16);

  --sans: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;

  --g: 16px;         /* page gutter */
  --r: 18px;         /* tile radius */
  --gap: 12px;       /* bento gap */
  --ease: cubic-bezier(.22, .7, .25, 1);
}

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

html { scroll-behavior: smooth; scroll-padding-top: 96px; -webkit-text-size-adjust: 100%; interpolate-size: allow-keywords; }

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.is-locked { overflow: hidden; }

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3, h4 { margin: 0; }
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(--tan-deep); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--tan); color: var(--ink); }

.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 999px; background: var(--ink); color: var(--white); font-size: 14px; }
.skip-link:focus { top: 12px; }

.wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 var(--g); }
.wrap--narrow { max-width: 800px; }
.center { display: flex; justify-content: center; margin-top: 40px; }
.tan { color: var(--tan); }

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

.kicker { font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--tan-deep); }
.kicker--center { text-align: center; }
.sec--dark .kicker { color: var(--tan); }

.h2 { margin-top: 12px; font-size: clamp(32px, 7vw, 56px); font-weight: 700; line-height: 1.06; letter-spacing: -.025em; }
.h2--center { text-align: center; }

.display {
  margin-top: 14px;
  font-size: clamp(40px, 9vw, 92px); font-weight: 300; line-height: 1.04; letter-spacing: -.03em;
  text-align: center;
}

.lead { font-size: clamp(19px, 2.4vw, 23px); line-height: 1.5; }

/* --------------------------------------------------------------------------
   Pill buttons - text, then an arrow in a circle that turns on hover
   -------------------------------------------------------------------------- */

.pill {
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 48px; padding: 0 6px 0 22px;
  border: 1px solid transparent; border-radius: 999px;
  font-size: 15px; font-weight: 500; line-height: 1; white-space: nowrap;
  transition: background-color .3s, color .3s, border-color .3s;
}
.pill__icon {
  flex: none;
  display: grid; place-items: center;
  width: 36px; height: 36px; border-radius: 50%;
  transition: transform .45s var(--ease), background-color .3s, color .3s;
}
.pill__icon svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pill:hover .pill__icon { transform: rotate(45deg); }
.pill:active { transform: translateY(1px); }

.pill--dark { background: var(--ink); color: var(--white); }
.pill--dark .pill__icon { background: var(--white); color: var(--ink); }
.pill--dark:hover { background: #000; }

.pill--light { background: var(--white); color: var(--ink); }
.pill--light .pill__icon { background: var(--ink); color: var(--white); }
.pill--light:hover { background: var(--sand); }

.pill--tan { background: var(--tan); color: var(--ink); }
.pill--tan .pill__icon { background: var(--white); color: var(--ink); }
.pill--tan:hover { background: var(--tan-hi); }

.pill--ghost { border-color: var(--line-dark); color: var(--white); }
.pill--ghost .pill__icon { background: rgba(255, 255, 255, .12); color: var(--white); }
.pill--ghost:hover { border-color: rgba(255, 255, 255, .5); }

.pill--sm { min-height: 40px; padding-left: 16px; gap: 10px; font-size: 14px; }
.pill--sm .pill__icon { width: 30px; height: 30px; }
.pill--block { width: 100%; justify-content: space-between; }

/* The shared nomination form's submit button */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 28px; border: 0; border-radius: 999px; background: var(--ink); color: var(--white); font-size: 15px; font-weight: 500; transition: background-color .3s; }
.btn:hover { background: #000; }
.btn--block { width: 100%; }

/* --------------------------------------------------------------------------
   Top: the strip and the floating bar
   -------------------------------------------------------------------------- */

.util { background: var(--ink); color: var(--on-dark); font-size: 13px; }
.util__in { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 40px; }
.util p { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.util p span { color: var(--tan); }
.util a { flex: none; color: var(--tan); transition: color .3s; }
.util a:hover { color: var(--white); }

.bar { position: sticky; top: 0; z-index: 50; padding-top: 10px; }
.bar__in {
  display: flex; align-items: center; gap: 12px;
  height: 60px; padding: 0 8px 0 12px;
  border: 1px solid transparent; border-radius: 16px;
  background: var(--mist);
  transition: background-color .4s, border-color .4s, box-shadow .4s;
}
.bar.is-solid .bar__in { background: rgba(255, 255, 255, .92); backdrop-filter: blur(14px); border-color: var(--line); box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .35); }

.brand { display: flex; align-items: center; gap: 10px; margin-right: auto; }
.brand img { width: 36px; height: 36px; }
.brand span { display: block; font-size: 12.5px; font-weight: 600; letter-spacing: .02em; }
.brand b { color: var(--tan-deep); }

.bar__links { display: none; }
.bar__cta { display: none; }

.burger { display: grid; place-content: center; gap: 6px; width: 44px; height: 44px; border: 0; border-radius: 12px; background: none; }
.burger span { display: block; width: 20px; height: 1.5px; background: var(--ink); transition: transform .35s var(--ease); }
.burger[aria-expanded="true"] span:first-child { transform: translateY(3.75px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { transform: translateY(-3.75px) rotate(-45deg); }

.menu {
  position: fixed; inset: 0; z-index: 45;
  display: flex; flex-direction: column; gap: 32px;
  padding: 100px var(--g) calc(28px + env(safe-area-inset-bottom));
  overflow-y: auto;
  background: var(--white);
  animation: fade .3s ease;
}
.menu__links { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.menu__links a { padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 28px; font-weight: 300; letter-spacing: -.02em; transition: padding-left .35s var(--ease); }
.menu__links a:hover { padding-left: 6px; }
.menu .pill { align-self: flex-start; }
@keyframes fade { from { opacity: 0; } }

/* --------------------------------------------------------------------------
   Tiles - the bento grid's one building block
   -------------------------------------------------------------------------- */

.bento { display: grid; gap: var(--gap); }
.tile { position: relative; overflow: hidden; border-radius: var(--r); padding: 22px; }
.tile--mist { background: var(--mist); }
.tile--sand { background: var(--sand); }
.tile--tan { background: var(--tan); }
.tile--white { background: var(--white); }
.tile--dark { background: var(--ink); color: var(--white); }
.tile--coal { background: var(--coal); color: var(--white); }

.tile__label { display: block; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--tan-deep); }
.tile--dark .tile__label { color: var(--tan); }
.tile__title { font-size: 24px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
.tile__text { margin-top: 8px; font-size: 15px; }
.tile__text--soft { color: var(--on-dark); }
.tile__big { margin-top: 10px; font-size: clamp(26px, 3vw, 34px); font-weight: 300; line-height: 1.15; letter-spacing: -.02em; }
.tile__ctas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.tile__foot { display: flex; align-items: center; gap: 8px; margin-top: 16px; font-size: 14px; color: var(--soft); }
.tile__foot i { font-style: normal; transition: transform .35s var(--ease); }

/* images inside tiles settle very slightly when hovered */
.tile img { transition: transform 1.2s var(--ease); }
.tile:hover img { transform: scale(1.03); }

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

.hero { padding: 14px 0 64px; }

.annc {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  margin-bottom: 14px; padding: 11px 18px;
  border-radius: 12px;
  background: var(--ink); color: var(--white);
  font-size: 14px; text-align: center;
}
.annc span { text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .35); text-underline-offset: 4px; transition: text-decoration-color .3s; }
.annc b { font-weight: 400; color: var(--tan); }
.annc:hover span { text-decoration-color: var(--white); }
/* a tan dot that breathes - nominations are open */
.annc__dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--tan); animation: breathe 2.6s ease-in-out infinite; }
@keyframes breathe { 50% { opacity: .35; } }
.annc__go { flex: none; font-style: normal; transition: transform .35s var(--ease); }
.annc:hover .annc__go { transform: translateX(4px); }

.tile--hero { min-height: 420px; padding: 0; display: flex; align-items: flex-end; background: var(--ink); }
.tile--hero .tile__img { position: absolute; inset: -6% 0 auto; width: 100%; height: 112%; object-fit: cover; object-position: 100% 60%; translate: 0 calc(var(--hy, 0) * 1px); }
/* settles from a touch larger as the page opens */
.js .tile--hero .tile__img { animation: settle 2.4s var(--ease) both; }
@keyframes settle { from { transform: scale(1.05); } }
.tile--hero:hover .tile__img { transform: none; }
.tile--hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(20deg, rgba(20, 20, 17, .82) 0%, rgba(20, 20, 17, .35) 45%, transparent 75%); }
.hero__copy { position: relative; z-index: 1; padding: 26px 22px; color: var(--white); }
.hero__kicker { font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .8); }
.hero__title { margin-top: 10px; font-size: clamp(38px, 10vw, 84px); font-weight: 800; line-height: .96; letter-spacing: -.02em; text-transform: uppercase; }
.hero__title span { display: block; }
.hero__title .tan { color: var(--tan-hi); }
/* the three lines come in one after another */
.js .hero__title span,
.js .hero__kicker { animation: rise .9s var(--ease) both; }
.js .hero__kicker { animation-delay: .1s; }
.js .hero__title span:nth-child(1) { animation-delay: .2s; }
.js .hero__title span:nth-child(2) { animation-delay: .3s; }
.js .hero__title span:nth-child(3) { animation-delay: .4s; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }

.bento--hero { grid-template-columns: 1fr; }

/* Categories tile - an inset picture on tan, as the Grammys do it */
.tile--cats { display: flex; flex-direction: column; padding: 8px 8px 20px; }
.tile__inset { overflow: hidden; aspect-ratio: 4 / 3; border-radius: 12px; }
/* the poster's headline and the entrance below it */
.tile__inset img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.tile--cats .tile__title,
.tile--cats .tile__text { padding: 0 10px; }
.tile--cats .tile__title { margin-top: 16px; }
.tile--cats .tile__text { color: rgba(35, 36, 31, .78); }
.tile--cats .pill { align-self: flex-start; margin: 16px 10px 0; }

/* Countdown tile */
.tile--count { display: flex; flex-direction: column; justify-content: space-between; transition: background-color .3s; }
.tile--count:hover { background: var(--mist-2); }
.tile--count:hover .tile__foot i { transform: translateX(4px); }
.count { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 18px; }
.count__u { display: grid; justify-items: center; padding: 12px 0 10px; border-radius: 12px; background: var(--white); }
.count__u b { font-size: clamp(30px, 8vw, 40px); font-weight: 300; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.count__u b.is-tick { animation: tick .45s ease; }
@keyframes tick { from { opacity: .25; } }
.count__u small { margin-top: 6px; font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--soft); }
.tile--count.is-over .count { display: none; }

.tile--night { display: flex; flex-direction: column; }
.tile--night .tile__text--soft { margin-top: 16px; }

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

.sec { padding: 80px 0; }
.sec--tight { padding-top: 0; }
.sec--dark { background: var(--ink); color: var(--white); }
.sec--sand { background: var(--sand); }
.sec--mist { background: var(--mist); }

.head { display: grid; gap: 16px; margin-bottom: 40px; }
.head--center { justify-items: center; text-align: center; }
.head__lede { max-width: 560px; color: var(--soft); }
.head--center .head__lede { margin-top: 4px; }

/* About */
.about { display: grid; gap: 40px; margin-top: 48px; }
.about__text { display: grid; gap: 18px; color: var(--on-dark); }
.about__text .lead { color: var(--white); }
.about__ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.bento--about { grid-template-columns: 1fr 1fr; }
.stat { display: flex; flex-direction: column; justify-content: space-between; gap: 18px; min-height: 120px; padding: 24px 24px 22px; }
.stat b { font-size: clamp(40px, 8vw, 56px); font-weight: 300; line-height: 1; letter-spacing: -.03em; color: var(--tan-hi); font-variant-numeric: tabular-nums; }
.stat > span { font-size: 13px; color: var(--on-dark); }
.tile--photo { padding: 0; grid-column: 2; grid-row: 1 / 4; min-height: 300px; }
.tile--photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.bento--about .stat:nth-child(3) { grid-column: 1; }

/* Key dates - the calendar */
.cal { display: grid; gap: 12px; margin-top: 36px; }
.cal li {
  position: relative;
  padding: 18px 22px 18px;
  border-radius: 14px;
  background: var(--sand);
  transition: background-color .35s, transform .35s var(--ease);
}
.cal li:hover { background: var(--sand-2); }
.cal p { font-size: 19px; line-height: 1.45; }
.cal b { font-weight: 700; }
.cal span { color: var(--soft); }
.cal i { font-style: italic; }
.cal time { display: block; margin-top: 6px; font-size: 14px; font-weight: 600; color: var(--soft); }
/* the date we are on */
.cal li.is-now { background: var(--ink); color: var(--white); }
.cal li.is-now span,
.cal li.is-now time { color: var(--on-dark); }
.cal li.is-now::after { content: ""; position: absolute; right: 22px; top: 24px; width: 7px; height: 7px; border-radius: 50%; background: var(--tan); animation: breathe 2.6s ease-in-out infinite; }
.cal li.is-done:not(.is-now) { opacity: .62; }

/* World Influencer Day */
.split { display: grid; gap: 28px; }
.split .h2 { font-size: clamp(32px, 6vw, 52px); }
.split__text { display: grid; gap: 16px; color: var(--on-dark); font-size: 17px; }
.pull { margin-top: 64px; padding-top: 40px; border-top: 1px solid var(--line-dark); font-size: clamp(28px, 5.4vw, 56px); font-weight: 300; line-height: 1.12; letter-spacing: -.025em; }
.pull span { display: block; color: var(--tan); }

/* The night */
.bento--night { grid-template-columns: 1fr; }
.act { display: flex; flex-direction: column; gap: 18px; padding: 24px 22px 26px; }
.act__n { font-size: 13px; font-weight: 600; letter-spacing: .1em; color: var(--tan-deep); }
.act p { font-size: 19px; line-height: 1.45; }
.fact p { margin-top: 8px; font-size: clamp(22px, 2.6vw, 28px); font-weight: 300; letter-spacing: -.02em; line-height: 1.2; }

/* Who it's for */
.bento--who { grid-template-columns: 1fr; }
.guest { display: flex; flex-direction: column; gap: 10px; padding: 26px 24px 28px; transition: transform .45s var(--ease), box-shadow .45s; }
.guest:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -26px rgba(0, 0, 0, .35); }
.guest__n { font-size: 13px; font-weight: 600; color: var(--tan-deep); }
.guest h3 { margin-top: 18px; font-size: 22px; font-weight: 700; line-height: 1.15; letter-spacing: -.02em; }
.guest p { font-size: 15px; color: var(--soft); }

.meet { display: grid; gap: 20px; margin-top: 64px; }
.meet__label { font-size: 24px; font-weight: 700; letter-spacing: -.02em; }
/* the Grammys' line list: big light lines between rules */
.lines { position: relative; }
.lines::before,
.lines li::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: var(--ink); transform-origin: 0 50%; transition: transform 1s var(--ease) calc(var(--i, 0) * 90ms); }
.lines::before { top: 0; }
.lines li::after { bottom: 0; }
.lines li { position: relative; padding: 16px 0; font-size: clamp(19px, 2.4vw, 26px); font-weight: 300; letter-spacing: -.01em; line-height: 1.3; transition: padding-left .4s var(--ease), color .3s; }
.lines li:hover { padding-left: 8px; color: var(--tan-deep); }

/* Categories */
.tabs { position: relative; display: flex; gap: 4px; }
.tabs__pill { position: absolute; left: 0; top: 0; z-index: 0; border-radius: 999px; background: var(--tan); opacity: 0; pointer-events: none; transition: transform .5s var(--ease), width .5s var(--ease), height .5s var(--ease), opacity .3s; }
.tabs--chips { margin: 0 calc(var(--g) * -1) 28px; padding: 0 var(--g) 4px; overflow-x: auto; scrollbar-width: none; }
.tabs--chips::-webkit-scrollbar { display: none; }
.chip { position: relative; z-index: 1; flex: none; padding: 9px 16px; border: 0; border-radius: 999px; background: transparent; font-size: 15px; color: var(--ink); transition: color .3s; }
.chip b { margin-left: 4px; font-weight: 500; color: var(--soft); }
.chip:hover { color: var(--tan-deep); }

.cgroup { margin-top: 44px; }
.cgroup__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin-bottom: 16px; }
.cgroup__head h3 { font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--tan-deep); }
.cgroup__head p { font-size: 14px; color: var(--soft); }
.cgroup.is-swap { animation: rise .5s var(--ease); }

.row { position: relative; }
.row::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--ink); transform-origin: 0 50%; transition: transform 1s var(--ease) calc(var(--i, 0) * 60ms); }
.cgroup .row:last-child { border-bottom: 1px solid var(--ink); }
.row summary {
  display: grid; grid-template-columns: 40px 1fr 28px; align-items: center; gap: 12px;
  padding: 16px 0;
  list-style: none; cursor: pointer;
}
.row summary::-webkit-details-marker { display: none; }
.row__n { font-size: 13px; font-weight: 500; color: var(--soft); font-variant-numeric: tabular-nums; }
.row__name { font-size: clamp(20px, 2.8vw, 30px); font-weight: 300; line-height: 1.2; letter-spacing: -.02em; transition: transform .4s var(--ease), color .3s; }
.row summary:hover .row__name { transform: translateX(6px); color: var(--tan-deep); }
/* a plus that turns into a cross */
.row__icon { position: relative; width: 28px; height: 28px; border-radius: 50%; background: var(--mist); transition: transform .45s var(--ease), background-color .3s; }
.row__icon::before,
.row__icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 1.5px; margin: -.75px 0 0 -5.5px; background: var(--ink); }
.row__icon::after { transform: rotate(90deg); }
.row[open] .row__icon { transform: rotate(45deg); background: var(--tan); }
.row summary:hover .row__icon { background: var(--mist-2); }
.row[open] summary:hover .row__icon { background: var(--tan-hi); }
.row__body { padding: 0 40px 22px 52px; color: var(--soft); }
.row__body dl { display: grid; gap: 14px; }
.row__body dt { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--tan-deep); }
.row__body dd { margin-top: 2px; }
/* the answer slides open where the browser can animate it */
.row::details-content { block-size: 0; overflow: hidden; transition: block-size .45s var(--ease), content-visibility .45s allow-discrete; }
.row[open]::details-content { block-size: auto; }

/* Jury */
.jury__meet { margin-top: 14px; font-size: 14px; color: var(--soft); }
.jury__meet b { margin-right: 8px; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--tan-deep); }
.jurors {
  display: grid; grid-auto-flow: column; grid-auto-columns: 62%; gap: var(--gap);
  scroll-padding-inline: var(--g);
  margin: 0 calc(var(--g) * -1); padding: 0 var(--g) 6px;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.jurors::-webkit-scrollbar { display: none; }
.juror { scroll-snap-align: start; }
.juror__photo { position: relative; overflow: hidden; display: grid; place-items: end center; aspect-ratio: 4 / 5; border-radius: var(--r); background: var(--mist-2); }
.juror__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.juror:hover .juror__photo img { transform: scale(1.03); }
.juror__photo svg { width: 76%; fill: none; stroke: rgba(35, 36, 31, .28); stroke-width: .8; transition: stroke .4s; }
.juror:hover .juror__photo svg { stroke: var(--tan-deep); }
.juror h3 { margin-top: 14px; font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
.juror p { margin-top: 2px; font-size: 14px; color: var(--soft); }

/* Partner */
#partners { padding-bottom: 40px; }
.own { display: grid; gap: 28px; padding: 32px 26px; }
.own .h2 { margin-top: 0; font-size: clamp(28px, 5vw, 46px); }
.own p { max-width: 560px; margin-top: 14px; color: rgba(35, 36, 31, .82); }
.own__side { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.own__moments { display: flex; flex-wrap: wrap; gap: 8px; }
.own__moments li { padding: 8px 14px; border-radius: 999px; background: rgba(255, 255, 255, .55); font-size: 14px; transition: background-color .3s; }
.own__moments li:hover { background: var(--white); }

/* Forms */
.panel-card { padding: 8px; border-radius: 24px; background: var(--mist); }
.tabs--forms { display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 999px; background: var(--white); }
.tabs--forms .tabs__pill { background: var(--ink); }
.tab { position: relative; z-index: 1; min-height: 46px; border: 0; border-radius: 999px; background: transparent; font-size: 15px; font-weight: 500; color: var(--soft); transition: color .3s; }
.tab:hover { color: var(--ink); }
.tab.is-on { color: var(--white); }

.panel { padding: 26px 14px 14px; 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 .4s ease; }

.form { display: grid; gap: 28px; }
.form__grid { display: grid; gap: 20px 16px; }
.field { display: block; }
.field > span { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 8px; font-size: 14px; font-weight: 600; }
.field > span i { font-style: normal; font-weight: 400; color: var(--soft); }
.field input,
.field select,
.field textarea {
  width: 100%; height: 52px; padding: 0 16px;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--white); color: var(--ink);
  font: 400 16px var(--sans);
  transition: border-color .25s, box-shadow .25s;
}
.field textarea { height: auto; min-height: 100px; padding: 13px 16px; resize: vertical; }
.field select {
  appearance: none; padding-right: 44px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2323241f' stroke-width='1.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 14px center / 18px no-repeat, var(--white);
}
.field select:invalid { color: rgba(94, 93, 86, .8); }
.field ::placeholder { color: rgba(94, 93, 86, .6); }
.field input:hover,
.field select:hover,
.field textarea:hover { border-color: rgba(35, 36, 31, .3); }
.field input:focus,
.field select:focus,
.field textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(199, 173, 116, .45); }

.done { display: grid; justify-items: center; gap: 4px; padding: 44px 16px 52px; text-align: center; animation: rise .6s var(--ease); }
.done:focus { outline: none; }

/* Closing */
.closing { text-align: center; }
.closing__lines { display: grid; gap: 4px; font-size: 13px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--on-dark); }
.closing .display { margin-top: 22px; }
.closing__when { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; margin-top: 28px; font-size: 17px; color: var(--on-dark); }
.closing__when li + li::before { content: "\b7"; margin-right: 22px; color: var(--tan); }

/* Footer */
.foot { padding: 40px 0 calc(40px + env(safe-area-inset-bottom)); background: var(--deep); color: var(--on-dark); }
.foot__in { display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
.foot__brand { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.foot__brand p { font-size: 14px; font-weight: 600; color: var(--white); }
.foot__links { display: flex; gap: 22px; font-size: 14px; }
.foot__links a { transition: color .3s; }
.foot__links a:hover { color: var(--tan); }
.foot__copy { font-size: 13px; color: rgba(255, 255, 255, .45); }

/* --------------------------------------------------------------------------
   Arriving on scroll - a short fade and a few pixels of lift. --i is set
   by main.js so tiles in a row arrive a beat apart.
   -------------------------------------------------------------------------- */

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

/* ==========================================================================
   >= 700px
   ========================================================================== */

@media (min-width: 700px) {
  :root { --g: 28px; --gap: 14px; }

  .brand span { display: block; }
  .bar__cta { display: inline-flex; }

  .bento--hero { grid-template-columns: 1fr 1fr; }
  .tile--hero { grid-column: 1 / -1; min-height: clamp(420px, 62vh, 600px); }
  .tile--hero .tile__img { object-position: 60% 60%; }
  .tile--night { grid-column: 1 / -1; }
  .hero__copy { padding: 40px 40px; }

  .bento--night { grid-template-columns: repeat(6, 1fr); }
  .act { grid-column: span 2; }
  .fact { grid-column: span 3; }
  .bento--who { grid-template-columns: 1fr 1fr; }

  .tabs--chips { flex-wrap: wrap; justify-content: center; margin-inline: 0; padding-inline: 0; overflow: visible; }

  .row__body dl { grid-template-columns: 1fr 1fr; gap: 28px; }

  .jurors { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); margin: 0; padding: 0; overflow: visible; }

  .panel { padding: 32px 26px 22px; }
  .form__grid { grid-template-columns: 1fr 1fr; }
  .field--wide { grid-column: 1 / -1; }
}

/* ==========================================================================
   >= 1024px
   ========================================================================== */

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

  body { font-size: 17px; }

  .bar__in { padding: 0 10px 0 16px; height: 64px; }
  .bar__links { display: flex; gap: 4px; margin: 0 auto; }
  .bar__links a { position: relative; padding: 8px 14px; font-size: 15px; color: var(--soft); transition: color .3s; }
  /* a short rule grows under the link from its centre */
  .bar__links a::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 2px; height: 1.5px; background: var(--tan); transform: scaleX(0); transition: transform .4s var(--ease); }
  .bar__links a:hover,
  .bar__links a.is-current { color: var(--ink); }
  .bar__links a:hover::after,
  .bar__links a.is-current::after { transform: scaleX(1); }
  .brand { margin-right: 0; }
  .burger { display: none; }

  .bento--hero { grid-template-columns: repeat(12, 1fr); }
  .tile--cats { grid-column: span 3; }
  .tile--count { grid-column: span 4; }
  .tile--night { grid-column: span 5; }
  .hero__copy { padding: 48px 52px; }
  .hero { padding-bottom: 96px; }
  .tile { padding: 28px; }
  .tile--cats { padding: 8px 8px 24px; }
  .tile--hero,
  .tile--photo { padding: 0; }

  .sec { padding: 120px 0; }
  .head:not(.head--center) { grid-template-columns: 1fr 1fr; align-items: end; gap: 48px; margin-bottom: 48px; }

  .about { grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; margin-top: 64px; }

  .split { grid-template-columns: 5fr 7fr; gap: 64px; }

  .bento--night { grid-template-columns: repeat(12, 1fr); }
  .act { grid-column: span 4; min-height: 220px; justify-content: space-between; padding: 28px; }
  .fact { grid-column: span 6; }

  .bento--who { grid-template-columns: repeat(4, 1fr); }
  .meet { grid-template-columns: 4fr 8fr; gap: 48px; margin-top: 72px; }

  .row summary { grid-template-columns: 64px 1fr 32px; padding: 20px 0; }
  .row__icon { width: 32px; height: 32px; }
  .row__body { padding: 0 64px 26px 76px; }

  .jurors { grid-template-columns: repeat(5, 1fr); }

  #partners { padding-bottom: 56px; }
  .own { grid-template-columns: 7fr 5fr; align-items: end; gap: 48px; padding: 52px 52px; }

  .panel { padding: 40px 40px 28px; }

  .foot__in { flex-direction: row; justify-content: space-between; text-align: left; }
  .foot__brand { flex-direction: row; }
}

/* --------------------------------------------------------------------------
   Small details - one quiet movement each, nothing more
   -------------------------------------------------------------------------- */

/* The seal turns once when you point at it */
.brand img { transition: rotate 1.2s var(--ease); }
.brand:hover img { rotate: 360deg; }

/* A hairline along the foot of the bar shows how far down the page you are */
.bar__in { position: relative; }
.bar__in::after {
  content: ""; position: absolute; left: 18px; right: 18px; bottom: -1px; height: 1.5px;
  border-radius: 2px; background: var(--tan);
  transform: scaleX(var(--p, 0)); transform-origin: 0 50%;
  opacity: 0; transition: opacity .4s;
}
.bar.is-solid .bar__in::after { opacity: 1; }

/* The hero's small line closes up its letter-spacing as it arrives */
.js .hero__kicker { animation: rise .9s var(--ease) .1s both, track 1.8s var(--ease) .1s both; }
@keyframes track { from { letter-spacing: .34em; } }

/* A rule of tan draws across the top of a tile when it is pointed at */
.act::before,
.guest::before,
.fact::before,
.stat::before,
.tile--count::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: var(--tan);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .7s var(--ease);
}
.act:hover::before,
.guest:hover::before,
.fact:hover::before,
.stat:hover::before,
.tile--count:hover::before { transform: scaleX(1); }

/* Numbers on tiles open up a touch on hover */
.act__n,
.guest__n { transition: letter-spacing .5s var(--ease), color .3s; }
.act:hover .act__n,
.guest:hover .guest__n { letter-spacing: .24em; color: var(--ink); }

/* The seconds box: a hairline that fills once per second */
.count__u { position: relative; overflow: hidden; }
.count__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--tan); transform: scaleX(0); transform-origin: 0 50%; }
.count__u b.is-tick ~ .count__bar { animation: second 1s linear both; }
@keyframes second { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Stat labels get a short rule that grows in after the number */
.stat > span { position: relative; padding-top: 12px; }
.stat > span::before { content: ""; position: absolute; left: 0; top: 0; width: 24px; height: 1px; background: var(--tan); transform: scaleX(0); transform-origin: 0 50%; transition: transform .9s var(--ease) .5s; }
.stat.is-in > span::before,
html:not(.js) .stat > span::before { transform: scaleX(1); }

/* The big light lines tighten their tracking as they settle */
.js .display[data-rv] {
  letter-spacing: -.005em;
  transition: opacity .9s var(--ease), translate .9s var(--ease), letter-spacing 1.6s var(--ease);
}
.js .display[data-rv].is-in { letter-spacing: -.03em; }

/* Line lists and category rows draw their rules in, one after another */
.js .lines:not(.is-in)::before,
.js .lines:not(.is-in) li::after,
.js .cgroup:not(.is-in) .row::before { transform: scaleX(0); }

/* Calendar: the date slides a step on hover */
.cal time { transition: transform .4s var(--ease), color .3s; }
.cal li:hover time { transform: translateX(4px); color: var(--ink); }
.cal li.is-now:hover time { color: var(--white); }

/* Jury: the empty seat lifts a little */
.juror__photo { transition: background-color .4s; }
.juror:hover .juror__photo { background: var(--sand); }
.juror__photo svg { transition: stroke .4s, translate .6s var(--ease); }
.juror:hover .juror__photo svg { translate: 0 -5px; }
.juror h3 { transition: color .3s; }
.juror:hover h3 { color: var(--tan-deep); }

/* The four moments on the partner tile arrive one by one */
.own__moments li { transition: opacity .6s var(--ease) calc(.35s + var(--i, 0) * 90ms), translate .6s var(--ease) calc(.35s + var(--i, 0) * 90ms), background-color .3s; }
.js .own:not(.is-in) .own__moments li { opacity: 0; translate: 0 8px; }

/* Forms: the label of the field in use takes the accent */
.field > span { transition: color .3s; }
.field:focus-within > span { color: var(--tan-deep); }

/* Pills: the icon gives slightly when pressed */
.pill:active .pill__icon { transform: rotate(45deg) scale(.9); }

/* Footer links: a rule grows under them */
.foot__links a { position: relative; }
.foot__links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px; background: var(--tan); transform: scaleX(0); transform-origin: 100% 50%; transition: transform .45s var(--ease); }
.foot__links a:hover::after { transform: scaleX(1); transform-origin: 0 50%; }

/* Back to top: appears once the hero has gone */
.totop {
  position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 40;
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--ink); color: var(--white);
  box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .5);
  opacity: 0; translate: 0 10px; pointer-events: none;
  transition: opacity .4s, translate .5s var(--ease), background-color .3s;
}
.totop svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: translate .4s var(--ease); }
.totop:hover { background: #000; }
.totop:hover svg { translate: 0 -2px; }
.is-scrolled .totop { opacity: 1; translate: none; pointer-events: auto; }
@media (min-width: 1024px) { .totop { right: 28px; bottom: 28px; } }

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .js [data-rv] { opacity: 1; translate: none; }
  .js .display[data-rv] { letter-spacing: -.03em; }
  .js .cgroup:not(.is-in) .row::before,
  .js .lines:not(.is-in)::before,
  .js .lines:not(.is-in) li::after { transform: none; }
  .js .own:not(.is-in) .own__moments li { opacity: 1; translate: none; }
  .tile--hero .tile__img { translate: none; }
  .totop { transition: none; }
}

/* ==========================================================================
   Award details - a "Details" pill inside each opened row, and the dialog
   it opens (markup: shared/category-modal.php, behaviour: its .js)
   ========================================================================== */

.row__more { margin-top: 18px; }

.cm {
  width: min(620px, 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(26, 27, 23, .5); backdrop-filter: blur(6px); opacity: 0; transition: opacity .35s; }
.cm.is-open::backdrop { opacity: 1; }
.cm__card {
  position: relative;
  display: flex; flex-direction: column;
  max-height: min(86vh, 780px);
  border-radius: 22px;
  overflow: hidden;
  background: var(--white);
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .45);
  opacity: 0; transform: translateY(14px);
  transition: opacity .35s var(--ease), transform .45s var(--ease);
}
.cm.is-open .cm__card { opacity: 1; transform: none; }
.cm.is-closing .cm__card { opacity: 0; transform: translateY(8px); transition-duration: .28s; }
/* a short tan rule draws along the top as it opens */
.cm__card::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; z-index: 2; height: 3px;
  background: var(--tan);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .9s var(--ease) .15s;
}
.cm.is-open .cm__card::before { transform: none; }

.cm__scroll { overflow-y: auto; overscroll-behavior: contain; padding: 38px 30px 24px; scrollbar-width: thin; }
.cm__close {
  position: absolute; right: 14px; top: 14px; z-index: 3;
  display: grid; place-items: center;
  width: 40px; height: 40px; border: 0; border-radius: 50%;
  background: var(--mist);
  transition: transform .45s var(--ease), background-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); }
.cm__close:hover span { background: var(--white); }

.cm__kicker { display: flex; align-items: baseline; gap: 12px; padding-right: 48px; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--tan-deep); }
.cm__kicker b { font-weight: 500; letter-spacing: .06em; color: var(--soft); }
.cm__title { margin-top: 10px; font-size: clamp(28px, 6vw, 38px); font-weight: 700; line-height: 1.08; letter-spacing: -.025em; }
.cm__lede { margin-top: 14px; font-size: 16.5px; color: var(--soft); }
.cm__pair { display: grid; gap: 8px; margin-top: 18px; }
.cm__pair div { padding: 14px 16px; border-radius: 14px; background: var(--mist); }
.cm__pair dt,
.cm__label { display: block; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--tan-deep); }
.cm__pair dd { margin-top: 4px; font-size: 15px; color: var(--soft); }
.cm__note { margin-top: 18px; padding: 14px 16px; border-radius: 14px; background: var(--sand); font-size: 15px; }

.cm__sec { margin-top: 28px; }
.cm__h { padding-bottom: 10px; border-bottom: 1px solid var(--ink); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.cm__award { padding: 16px 0; border-bottom: 1px solid var(--line); }
.cm__award-name { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 19px; font-weight: 600; line-height: 1.25; letter-spacing: -.01em; }
.cm__track { padding: 3px 10px; border-radius: 999px; background: var(--tan); font-size: 11px; font-weight: 600; letter-spacing: .06em; }
.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: 6px 12px; border-radius: 999px; background: var(--mist); font-size: 13.5px; transition: background-color .3s; }
.cm__who li:hover { background: var(--sand); }
.cm__ready li { display: grid; gap: 4px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.cm__ready li:last-child { border-bottom: 0; }
.cm__window { margin-top: 14px; font-size: 13px; color: var(--soft); }

.cm__foot { display: grid; gap: 14px; padding: 16px 30px 20px; border-top: 1px solid var(--line); background: var(--mist); }
.cm__go { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.cm__go .btn { gap: 10px; min-height: 44px; padding: 0 20px; font-size: 14px; }
.cm__go .btn i { font-style: normal; transition: transform .35s var(--ease); }
.cm__go .btn:hover i { transform: translateX(3px); }
.cm__go p { font-size: 13px; 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: 0; border-radius: 50%; background: var(--white); transition: background-color .3s, color .3s, transform .4s var(--ease); }
.cm__step:hover { background: var(--ink); color: var(--white); }
.cm__step[data-cm-step="-1"]:hover { transform: translateX(-3px); }
.cm__step[data-cm-step="1"]:hover { transform: translateX(3px); }
.cm__count { font-size: 14px; font-weight: 500; color: var(--soft); 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: rise .55s var(--ease) both; }
.cm.is-fresh .cm__title { animation-delay: .04s; }
.cm.is-fresh .cm__body > :nth-child(1) { animation-delay: .08s; }
.cm.is-fresh .cm__body > :nth-child(2) { animation-delay: .12s; }
.cm.is-fresh .cm__body > :nth-child(n + 3) { animation-delay: .16s; }

/* phones: a sheet from the bottom */
@media (max-width: 699px) {
  .cm { width: 100%; margin: auto 0 0; }
  .cm__card { max-height: 90vh; border-radius: 22px 22px 0 0; transform: translateY(50px); }
  .cm.is-closing .cm__card { transform: translateY(50px); }
  .cm__scroll { padding: 36px 20px 20px; }
  .cm__foot { padding: 14px 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
   ========================================================================== */

/* A light pill with an ink outline, for the second button */
.pill--outline { border-color: var(--ink); color: var(--ink); }
.pill--outline .pill__icon { background: var(--ink); color: var(--white); }
.pill--outline:hover { background: var(--ink); color: var(--white); }
.pill--outline:hover .pill__icon { background: var(--white); color: var(--ink); }

/* Bar: Nominate Now, and Partner With Us beside it on wide screens */
.bar__ctas { display: flex; gap: 8px; }
.bar__cta--2 { display: none !important; }
@media (min-width: 1180px) { .bar__cta--2 { display: inline-flex !important; } }
.menu__ctas { display: flex; flex-wrap: wrap; gap: 10px; }

/* About: four stat tiles, then the pull line */
.bento--about .stat:nth-child(3) { grid-column: auto; }
.pull--center { text-align: center; }

/* Categories: the list / grid switch */
.viewbar { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin: -8px 0 4px; }
.viewbar__label { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--soft); }
.tabs--view { padding: 4px; border-radius: 999px; background: var(--mist); }
.tabs--view .tabs__pill { background: var(--ink); }
.view {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 38px; padding: 0 16px;
  border: 0; border-radius: 999px; background: none;
  font-size: 14px; font-weight: 500; color: var(--soft);
  transition: color .3s;
}
.view svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; transition: transform .45s var(--ease); }
.view:hover { color: var(--ink); }
.view:hover svg { transform: scale(1.12); }
.view.is-on { color: var(--white); }

/* The sub-title sits under the award name, in both views */
.row__name small { display: block; margin-top: 4px; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--tan-deep); }
.row__body > p { margin-bottom: 14px; }
.row--special .row__name { color: var(--tan-deep); }

/* Grid view: the same awards, one card each, always open */
.awards[data-view="grid"] .rows { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.awards[data-view="grid"] .row {
  display: flex; flex-direction: column;
  padding: 22px 22px 24px;
  border-radius: var(--r);
  background: var(--mist);
  transition: background-color .35s, transform .45s var(--ease), box-shadow .45s;
}
.awards[data-view="grid"] .row:hover { background: var(--sand); transform: translateY(-3px); box-shadow: 0 18px 40px -28px rgba(0, 0, 0, .35); }
.awards[data-view="grid"] .row::before { display: none; }
.awards[data-view="grid"] .cgroup .row:last-child { border-bottom: 0; }
.awards[data-view="grid"] .row summary { display: block; padding: 0; cursor: default; }
.awards[data-view="grid"] .row__n { display: block; margin-bottom: 18px; }
.awards[data-view="grid"] .row__name { display: block; font-size: 23px; font-weight: 600; line-height: 1.15; }
.awards[data-view="grid"] .row summary:hover .row__name { transform: none; color: inherit; }
.awards[data-view="grid"] .row__icon { display: none; }
.awards[data-view="grid"] .row__body { display: flex; flex-direction: column; flex: 1; padding: 14px 0 0; font-size: 15px; }
.awards[data-view="grid"] .row__body dl { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); }
.awards[data-view="grid"] .row__more { align-self: flex-start; }
.awards[data-view="grid"] .row--special { background: var(--sand); }
/* each card steps in when the view changes */
.awards.is-swapping .row { animation: rise .5s var(--ease) calc(var(--i, 0) * 25ms) both; }

/* How to nominate */
.head__end { display: flex; align-items: flex-end; }
.bento--how { grid-template-columns: 1fr; }
.step { display: flex; flex-direction: column; gap: 10px; padding: 26px 24px 28px; }
.step__n {
  display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--tan); color: var(--ink);
  font-size: 16px; font-weight: 700;
  transition: transform .5s var(--ease);
}
.step:hover .step__n { transform: rotate(360deg); }
.step h3 { margin-top: 12px; font-size: 22px; font-weight: 700; line-height: 1.15; letter-spacing: -.02em; }
.step p { font-size: 15px; color: var(--soft); }
.how__list { margin-top: 12px; }
.how__list li { position: relative; padding: 12px 0 12px 20px; border-top: 1px solid var(--line); font-size: 15px; }
.tile--dark .how__list li { border-top-color: var(--line-dark); color: var(--on-dark); }
.how__list li::before { content: ""; position: absolute; left: 2px; top: 20px; width: 7px; height: 7px; border-radius: 50%; background: var(--tan); }
.how__link { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; font-size: 14px; font-weight: 600; color: var(--tan); }
.how__link i { font-style: normal; transition: translate .35s var(--ease); }
.how__link:hover { color: var(--tan-hi); }
.how__link:hover i { translate: 4px 0; }

/* Partner: what can be owned, as a list */
.own__label { color: rgba(35, 36, 31, .7); }
.own__moments { flex-direction: column; align-items: stretch; width: 100%; }
.own__moments li { border-radius: 12px; }

/* The partnership form has the card to itself for now */
.panel-card__title { padding: 22px 14px 0; text-align: center; font-size: clamp(26px, 5vw, 34px); font-weight: 700; letter-spacing: -.02em; }

.closing__ctas { flex-wrap: wrap; gap: 10px; }
.foot__copy a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* Phones: the two things to do, once the hero has gone */
.dock {
  position: fixed; inset: auto 0 0; z-index: 40;
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .94); backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
  translate: 0 110%;
  transition: translate .5s var(--ease);
}
.dock .pill { justify-content: center; padding-left: 14px; }
.is-scrolled .dock { translate: 0 0; }
.is-scrolled .totop { bottom: calc(76px + env(safe-area-inset-bottom)); }
.foot { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }

/* Award details: sub-title, the judging weights, the entry needs */
.cm__sub { margin-top: 6px; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--tan-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: 15px; }
.cm__score b { font-weight: 600; }
.cm__score i { grid-column: 1 / -1; height: 6px; border-radius: 6px; background: var(--mist); overflow: hidden; }
.cm__score i::before { content: ""; display: block; height: 100%; border-radius: inherit; background: var(--tan); transform: scaleX(var(--w)); transform-origin: 0 50%; }
.cm.is-fresh .cm__score i::before { animation: grow 1s var(--ease) .2s both; }
.cm__needs { margin-top: 12px; font-size: 15px; }
@keyframes grow { from { transform: scaleX(0); } }

@media (min-width: 700px) {
  .bento--how { grid-template-columns: repeat(6, 1fr); }
  .step { grid-column: span 2; }
  .how__tile { grid-column: span 3; }
}
@media (min-width: 1024px) {
  .dock { display: none; }
  .is-scrolled .totop { bottom: 28px; }
  .foot { padding-bottom: 40px; }
  .step { padding: 32px 30px 34px; min-height: 240px; }
  .how__tile { padding: 32px 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .awards.is-swapping .row { animation: none; }
}

/* the awards now have one "Ideal for" line, not two side by side */
.awards .row__body dl { grid-template-columns: 1fr; }

/* the shared pages' plain buttons: a little room before the arrow */
.btn { gap: 10px; }
.btn i { font-style: normal; }