:root{
  --paper:#f9f9fa;
  --paper-2:#f1f1f3;
  --ink:#343a40;
  --title:#212529;
  --grey:#585e63;
  --faint:#a8aca9;
  --line:#dddcd7;
  --red:#e52321;
  --red-ink:#c31e1c;
  --jade:#1f9a63;
  --display:'Archivo',Arial,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--display);line-height:1.55;-webkit-font-smoothing:antialiased}
::selection{background:var(--red);color:#fff}
img{display:block;max-width:100%}
a{color:inherit}
.wrap{max-width:1280px;margin:0 auto;padding:0 clamp(20px,4vw,52px)}
.mono{font-family:var(--mono)}

/* ============ header ============ */
header{position:fixed;inset:0 0 auto 0;z-index:80;background:rgba(247,247,245,.85);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}

/* ============ admin preview-mode banner ============ */
.preview-banner{position:fixed;top:0;left:0;right:0;z-index:95;min-height:34px;background:#ffcf40;color:#3a2c00;display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;font:600 12px var(--mono);letter-spacing:.02em;padding:8px 16px;text-align:center}
.preview-banner strong{font-weight:800}
.preview-banner-actions{display:flex;gap:14px;align-items:center}
.preview-banner-actions form{display:inline;margin:0}
.preview-banner-actions a,.preview-banner-actions button{background:none;border:0;padding:0;font:inherit;color:#3a2c00;text-decoration:underline;cursor:pointer}
.has-preview header{top:34px}
@media (max-width:700px){
  .has-preview header{top:52px}
}
.nav{display:flex;align-items:center;justify-content:space-between;height:62px}
.brand{display:flex;align-items:center;gap:9px}
.wordmark{display:inline-flex;align-items:center}
.wordmark img{height:16px;width:auto;display:block}
.brand-tag{font:800 11px var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--red);padding-top:1px}
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--red);color:#fff;border:0;font:700 13px var(--display);letter-spacing:.03em;padding:11px 20px;text-decoration:none;cursor:pointer;transition:background .2s,transform .2s}
.btn:hover,.btn:focus-visible{background:var(--red-ink);transform:translateY(-1px)}
.btn.line{background:transparent;color:var(--ink);border:1px solid var(--ink);transition:all .2s}
.btn.line:hover{background:var(--ink);color:var(--paper)}
#inkbar{position:absolute;left:0;bottom:-1px;height:3px;width:0;background:var(--red)}

/* deadline strip: last item in the hero's flex column, so it always
   docks below the hero content in flow rather than overlapping it */
.deadline{flex:0 0 auto;border-top:1px solid #ced4db;border-bottom:1px solid #ced4db}
.deadline-inner{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;padding:14px 0;font-family:var(--mono)}
.dl-label{font:700 10.5px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:#343a40}
.dl-time{display:flex;gap:9px}
.dl-seg{display:inline-flex;align-items:baseline;gap:2px}
.dl-seg b{font:700 14px var(--mono);color:var(--red);min-width:1.5em;text-align:right;font-variant-numeric:tabular-nums}
.dl-seg small{font:500 9.5px var(--mono);color:#ced4db;text-transform:uppercase}

/* ============ plate counter (fixed) ============ */
.counter{position:fixed;left:clamp(20px,4vw,52px);bottom:22px;z-index:70;font:500 11px var(--mono);letter-spacing:.2em;color:var(--grey);text-transform:uppercase;display:flex;align-items:center;gap:12px;mix-blend-mode:multiply;pointer-events:none;opacity:0;transition:opacity .4s}
.counter.show{opacity:1}
.counter b{color:var(--red);font-weight:500}
.counter::before{content:"";width:26px;height:1px;background:var(--red)}

/* ============ hero ============ */
.hero{min-height:100svh;display:flex;flex-direction:column;padding:100px 0 0;position:relative;overflow:hidden}
.hero > .wrap{margin-top:auto;margin-bottom:auto;padding-bottom:50px}
.hero h1{margin:0 0 8px;font-weight:900;font-stretch:118%;text-transform:uppercase;letter-spacing:-.015em;line-height:.88;font-size:clamp(52px,10.4vw,164px);color:var(--red)}
.hero h1 .l2{display:block;color:var(--title);font-stretch:70%;font-weight:850}
.hero h1 .l2 i{font-style:italic;font-weight:200;font-stretch:100%;text-transform:lowercase;letter-spacing:0;margin-right:.08em;color:var(--grey)}
.hero .subhead{margin:2px 0 4px;font:800 clamp(19px,2.3vw,29px) var(--display);font-stretch:105%;letter-spacing:.01em;text-transform:uppercase;color:var(--title)}
.hero .subhead .num{color:var(--red);margin-right:.14em}

/* intro sequence: headline + subhead words reveal one after another (fast,
   ~1s total for 8 words), then the paragraphs + plate thumbs fade in right
   as that finishes — the whole thing lands inside ~1.5s. */
.hero .hw{display:inline-block;opacity:0;transform:translateY(.4em);animation:hw-in .48s cubic-bezier(.16,1,.3,1) forwards;animation-delay:calc(var(--i) * 70ms)}
@keyframes hw-in{to{opacity:1;transform:none}}
.hero-fade{opacity:0;transform:translateY(14px);animation:hero-fade-in .5s cubic-bezier(.16,1,.3,1) forwards;animation-delay:1000ms}
@keyframes hero-fade-in{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .hero .hw,.hero-fade{opacity:1;transform:none;animation:none}
}

.hero .split{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(30px,5vw,80px);align-items:end;margin-top:36px}
.hero .lede{font-size:clamp(16px,1.5vw,19px);color:var(--grey);max-width:52ch}
.hero .lede + .lede{margin-top:14px}
.hero .lede-col{min-width:0}
.hero .lede strong{color:var(--ink);font-weight:650}
.thumbs{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.thumbs a{position:relative;display:block;border:1px solid var(--line);transition:transform .3s,border-color .3s,box-shadow .3s}
.thumbs a:hover,.thumbs a:focus-visible{transform:translateY(-6px);border-color:var(--red);box-shadow:0 14px 30px rgba(23,25,27,.14)}
.thumbs img{aspect-ratio:1;object-fit:cover}
.thumbs .t5{aspect-ratio:1;background:var(--red);color:#fff;display:flex;align-items:center;justify-content:center;font:700 22px var(--display)}
.thumbs .lab{position:absolute;left:0;right:0;bottom:-22px;font:500 9.5px var(--mono);letter-spacing:.14em;color:var(--faint);text-transform:uppercase;text-align:center;white-space:nowrap;overflow:hidden}

/* ============ plates (stacked) ============ */
.stack{position:relative}
.plate{position:sticky;top:var(--pin,0px);min-height:100svh;display:flex;align-items:center;background:var(--paper);border-top:1px solid var(--line);overflow:hidden;transition:transform .1s linear, filter .1s linear;will-change:transform}
.plate .wrap{width:100%;padding-top:86px;padding-bottom:56px}
.p-grid{display:grid;grid-template-columns:minmax(280px,470px) 1fr;gap:clamp(34px,5.5vw,90px);align-items:center}
.art{position:relative;border:1px solid var(--line);background:#fff;box-shadow:0 24px 60px -22px rgba(23,25,27,.28)}
.art .photo,.art .ht{width:100%;aspect-ratio:1;object-fit:cover}
/* height:auto matters. The two <img> tags carry different height
   attributes (photo 900, halftone 1000), which browsers apply as
   presentational hints; author CSS here overrides width but not
   height, so aspect-ratio never governs and the halftone rendered
   100px taller than the photo underneath it. It hung below the
   figure and the image appeared to shrink on hover. Pinning the
   overlay to 100% of the figure (and cancelling aspect-ratio, which
   would otherwise size it square) makes the two layers match exactly,
   whatever the attributes say. */
.art .ht{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;transition:opacity .55s ease}
.art:hover .ht,.art:focus-within .ht,.art.developed .ht{opacity:0}
.p-right .status{font:500 11px var(--mono);letter-spacing:.24em;text-transform:uppercase;color:var(--grey);display:flex;align-items:center;gap:14px}
.p-right .status i{font-style:normal;color:var(--jade)}
.p-right .status::after{content:"";flex:1;height:1px;background:var(--line)}
.p-right h2{font-weight:900;font-stretch:116%;text-transform:uppercase;letter-spacing:-.015em;line-height:.92;font-size:clamp(40px,5.6vw,86px);margin:16px 0 10px;color:var(--title)}
.p-right h2 span{color:var(--red)}
.p-right h2 .qq{font-family:var(--mono);font-weight:500}
.role{font-size:clamp(14.5px,1.4vw,17px);font-weight:650}
.role em{font-style:normal;color:var(--grey);font-weight:400}
.p-copy{margin-top:24px;max-width:60ch}
.p-copy p{color:var(--grey);font-size:15.5px}
.p-copy p + p{margin-top:12px}
.p-copy .kick{color:var(--ink);font-weight:650;font-size:17px;line-height:1.5}
.p-copy .locked-copy{font-weight:600}
.p-copy b{color:var(--ink);font-weight:650}
.qrow{margin-top:22px;padding-left:18px;border-left:3px solid var(--red)}
.qrow p{font-weight:650;color:var(--ink);font-size:clamp(16px,1.7vw,20px);line-height:1.35}
.qrow cite{font:400 11px var(--mono);color:var(--faint);font-style:normal;display:block;margin-top:6px}
.p-stats{display:flex;gap:0;margin-top:26px;border-top:1px solid var(--line)}
.p-stats .s{flex:1;padding:16px 18px 0 0}
.p-stats .s + .s{border-left:1px solid var(--line);padding-left:18px}
.p-stats .n{font-weight:900;font-stretch:110%;font-size:clamp(22px,2.3vw,32px);letter-spacing:-.01em;color:var(--red)}
.p-stats .n small{font-size:.52em;font-weight:700;color:var(--grey)}
.p-stats .l{font:500 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin-top:5px;line-height:1.7}
.p-actions{margin-top:28px;display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.p-actions .hint{font:400 11px var(--mono);color:var(--faint)}

/* plate 5 (and any locked plate, which reuses the red "five"-style treatment) */
.plate.five{background:var(--red);color:#fff;border-top:0}
.plate.five .status{color:rgba(255,255,255,.75)}
.plate.five .status::after{background:rgba(255,255,255,.3)}
.plate.five h2{color:#fff}
.plate.five h2 .qq{font-family:var(--mono);font-weight:500;color:var(--title)}
.plate.five .p-copy p{color:rgba(255,255,255,.85)}
.plate.five .art{border-color:rgba(255,255,255,.4);box-shadow:0 24px 60px -22px rgba(0,0,0,.45);background:var(--red)}
.plate.five .btn{background:#fff;color:var(--red)}
.plate.five .btn:hover{background:var(--ink);color:#fff}
.plate.five .btn.line{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
.plate.five .btn.line:hover{background:#fff;color:var(--red)}

/* locked plates (1-4, before their day) look like the mystery plate too */
.plate.locked{background:var(--ink);color:#fff;border-top:0}
.plate.locked .status{color:rgba(255,255,255,.75)}
.plate.locked .status::after{background:rgba(255,255,255,.3)}
.plate.locked h2{color:#fff}
.plate.locked .p-copy p{color:rgba(255,255,255,.75)}
.plate.locked .art{border-color:rgba(255,255,255,.3);background:var(--ink)}
.plate.locked .p-copy b{color:#fff}
.plate.locked .p-copy a{color:#fff}

/* ============ colophon / footer ============ */
footer{position:relative;z-index:5;background:var(--ink);color:var(--paper);padding:56px 0}
.foot-link{display:inline-block;font:500 12px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#b9bec2;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.25);padding-bottom:3px;transition:color .2s,border-color .2s}
.foot-link:hover,.foot-link:focus-visible{color:#fff;border-color:var(--red)}

/* ============ nominate popup ============ */

dialog.nominate-modal{border:1px solid var(--line);padding:0;width:min(600px,92vw);max-height:88vh;background:var(--paper);color:var(--ink);box-shadow:0 40px 90px -24px rgba(23,25,27,.5);position:fixed;inset:0;margin:auto}
dialog.nominate-modal[open]{display:flex;flex-direction:column;animation:modal-in .25s cubic-bezier(.16,1,.3,1)}
dialog.nominate-modal::backdrop{background:rgba(23,25,27,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
html.modal-open{overflow:hidden}
@keyframes modal-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.modal-body{padding:clamp(22px,4vw,36px);overflow:auto;min-height:0}
.modal-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:22px}
.modal-body h3{font-weight:900;font-stretch:112%;text-transform:uppercase;letter-spacing:-.01em;font-size:clamp(24px,3vw,34px);color:var(--title)}
.modal-body h3 .accent{color:var(--red)}
.modal-close{flex:0 0 auto;background:none;border:0;width:32px;height:32px;line-height:1;font-size:26px;cursor:pointer;color:var(--grey);margin-top:.1em;transition:color .2s}
.modal-close:hover,.modal-close:focus-visible{color:var(--red)}

/* ---- criteria panel: mobile-first as a collapsed accordion ---- */
.modal-criteria{margin-bottom:22px;border:1px solid var(--line);background:var(--paper-2)}
.criteria-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px;background:none;border:0;font:700 12px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--title);cursor:pointer;text-align:left}
.criteria-toggle .chevron{color:var(--red);font-size:14px;line-height:1;transition:transform .3s ease}
.criteria-toggle[aria-expanded="true"] .chevron{transform:rotate(180deg)}
.criteria-panel{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .35s ease,opacity .3s ease}
.criteria-panel.open{grid-template-rows:1fr;opacity:1}
.criteria-panel-inner{overflow:hidden;padding:0 16px}
.criteria-panel.open .criteria-panel-inner{padding:0 16px 18px}
.criteria-intro{color:var(--grey);font-size:13.5px;line-height:1.5;margin-bottom:16px}
.criteria-item{opacity:0;transform:translateY(6px);transition:opacity .35s ease,transform .35s ease}
.criteria-panel.open .criteria-item{opacity:1;transform:none}
.criteria-panel.open .criteria-item:nth-child(1){transition-delay:.05s}
.criteria-panel.open .criteria-item:nth-child(2){transition-delay:.12s}
.criteria-panel.open .criteria-item:nth-child(3){transition-delay:.19s}
.criteria-item + .criteria-item{margin-top:16px}
.criteria-item h4{font:700 13px var(--display);letter-spacing:.01em;color:var(--title);margin-bottom:4px;text-align:left}
.criteria-item p{color:var(--grey);font-size:13.5px;line-height:1.55}

@media (min-width:760px){
  dialog.nominate-modal{width:min(900px,94vw)}
  .modal-columns{display:grid;grid-template-columns:1fr 1.2fr;gap:40px;align-items:start}
  .modal-criteria{border:0;background:none;margin-bottom:0;border-right:1px solid var(--line);padding-right:40px}
  .criteria-toggle{padding:0 0 16px;cursor:default;pointer-events:none}
  .criteria-toggle .chevron{display:none}
  .criteria-panel{display:block;opacity:1}
  .criteria-panel-inner{padding:0;overflow:visible}
  .criteria-item{opacity:1;transform:none}
}
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---- one nominee entry: a plain header line (matches the "What we're
   looking for" label on the left) sitting above the fields, no card/box
   around it — just a hairline rule to separate multiple entries ---- */
.nominee-block{border:0;padding:0;margin:28px 0 0;min-width:0;border-top:1px solid var(--line);padding-top:20px}
.nominee-block:first-child{margin-top:0;border-top:0;padding-top:0}
.nominee-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.nominee-label{font:700 12px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--title)}
.nominee-index{color:var(--red)}
.remove-nominee{background:none;border:0;width:22px;height:22px;line-height:1;cursor:pointer;color:var(--grey);font-size:16px;transition:color .2s}
.remove-nominee:hover{color:var(--red)}

/* ---- floating-label fields: label sits inside the field like a
   placeholder until you focus or type, then it shrinks up out of the way ---- */
.field{display:block;position:relative;margin-top:16px}
.field:first-of-type{margin-top:0}
.field input,.field textarea{width:100%;padding:19px 13px 7px;border:1px solid var(--line);background:var(--paper);font:400 15px var(--display);color:var(--ink);transition:border-color .2s,box-shadow .2s}
.field textarea{padding-top:22px;resize:vertical;min-height:70px}
.field input::placeholder{transition:opacity .15s ease}
.field input:not(:focus)::placeholder{opacity:0}
.field span{position:absolute;left:14px;top:50%;transform:translateY(-50%);font:400 15px var(--display);color:var(--faint);pointer-events:none;transition:top .15s ease,font-size .15s ease,letter-spacing .15s ease,color .15s ease;white-space:nowrap}
.field textarea + span{top:19px;transform:none}
.field input:focus + span,.field input:not(:placeholder-shown) + span,
.field textarea:focus + span,.field textarea:not(:placeholder-shown) + span{
  top:9px;transform:none;font:600 10px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--red)
}
.field input:hover,.field textarea:hover{border-color:var(--faint)}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px rgba(229,35,33,.12)}
.field-error{color:var(--red-ink);font-size:13px;margin-top:8px;min-height:1em}
.nom-actions{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:6px}
.nom-status{margin-top:16px;font:600 14px var(--display)}
.nom-status.err{color:var(--red-ink)}
.nom-status.ok{color:var(--jade)}
.nominee-max-hint{font:500 11px var(--mono);letter-spacing:.06em;color:var(--faint);margin:0}

.nominate-success{text-align:center;padding:12px 0 4px}
.nominate-success .success-check{display:flex;align-items:center;justify-content:center;width:52px;height:52px;margin:0 auto 20px;border:2px solid var(--jade);color:var(--jade);font-size:24px;font-weight:700}
.nominate-success .success-lead{font-weight:900;font-stretch:112%;text-transform:uppercase;letter-spacing:-.01em;font-size:clamp(19px,2.4vw,24px);color:var(--title);margin-bottom:10px}
.nominate-success p{color:var(--grey);font-size:15px;max-width:44ch;margin:0 auto 26px}
.nominate-success .btn{margin:0 auto}

/* ============ reveal ============ */
.rv{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.16,1,.3,1)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
  .plate{position:relative !important;transform:none !important;filter:none !important}
}

/* ============ responsive ============ */
@media (max-width:1000px){
  .p-grid{grid-template-columns:1fr;gap:30px}
  .plate{position:relative;top:auto;min-height:auto}
  .plate .wrap{padding-top:70px;padding-bottom:70px}
  .art{max-width:430px}
  .hero .split{grid-template-columns:1fr;align-items:start}
  .thumbs{max-width:520px}
  .counter{display:none}
  .p-stats{flex-wrap:wrap}
  .p-stats .s{flex:1 1 45%}
  .p-stats .s + .s{border-left:0;padding-left:0}
}
/* A plate pins at the top of the viewport, which only works while the whole
   plate fits on screen. Taller than that and everything past the fold is
   stranded: the plate can't scroll under its own pin, and the next one
   slides up over it. main.js measures each plate and moves its pin line
   down by the overflow (--pin, set negative) so a tall plate scrolls all
   the way through and pins only once its bottom edge is reached. This is
   the belt-and-braces floor for a viewport too short for any of that, and
   mirrors what the max-width:1000px rule above already does. */
@media (max-height:700px){
  .plate{position:relative;top:auto;min-height:auto}
  .plate .wrap{padding-top:70px;padding-bottom:70px}
}
@media (max-width:640px){
  .dl-label{display:none}
  .p-stats .s{flex:1 1 100%;padding:14px 0 0}
  .hero{padding-top:90px}
}
@media (max-width:420px){
  .thumbs{gap:6px}
  .thumbs .lab{font-size:8px;letter-spacing:.02em}
}