/* Site-level additions on top of the design system: shared nav links, the entry form
   states, and the intake controls. Brand rules apply: five colours, square corners, hard shadows. */

/* the approved page clipped sideways overflow at the body; the token base dropped it.
   Pre-reveal transforms (scaled stamp, shifted form children) otherwise widen the page on phones. */
html,body{overflow-x:hidden}

/* ---------- nav links (all pages) ---------- */
.navlinks{display:flex;gap:26px;font-family:var(--font-label);font-weight:700;letter-spacing:.18em;font-size:12px;text-transform:uppercase}
.navlinks a{color:var(--paper-70)}
.navlinks a:hover{color:var(--paper)}
.navlinks a[aria-current]{color:var(--acid)}
@media(max-width:820px){
  .topbar,nav.site-nav{flex-wrap:wrap;gap:12px 20px}
  .navlinks{order:3;width:100%;gap:14px 18px;flex-wrap:wrap;padding-top:8px;border-top:1px solid var(--paper-10)}
}

/* ---------- footer link row ---------- */
.foot-links{display:flex;gap:22px;flex-wrap:wrap;margin-top:10px;font-family:var(--font-label);font-weight:700;letter-spacing:.18em;font-size:12px;text-transform:uppercase}
.foot-links a{color:var(--paper-70)}
.foot-links a:hover{color:var(--acid)}

/* ---------- small text contrast: paper-40 on ink fails AA for small text, paper-70 passes ---------- */
.vl-meta{color:var(--paper-70)}
.vl-field .hint{color:var(--paper-70)}

/* ---------- form states ---------- */
form[data-vl-entry] [hidden]{display:none!important}
.form-status{margin-top:14px;font-family:var(--font-label);font-weight:700;letter-spacing:.12em;font-size:13px;text-transform:uppercase;padding:10px 14px;border-left:3px solid var(--paper-40);color:var(--paper-70)}
.form-status.is-error{border-left-color:var(--blood);color:var(--blood)}
.vl-field-error{margin:6px 0 10px;font-family:var(--font-label);font-weight:700;letter-spacing:.06em;font-size:14px;line-height:1.4;color:var(--blood);padding:8px 12px;border-left:3px solid var(--blood);background:rgba(255,43,43,.08)}
.form-status.is-note{border-left-color:var(--acid);color:var(--acid)}
form.is-sending [type="submit"]{opacity:.85;cursor:progress}
.form-success{text-align:center;padding:14px 0 4px}
.form-success .big{font-family:var(--font-display);font-size:clamp(34px,4vw,44px);text-transform:uppercase;line-height:.95;margin-bottom:14px}
.form-success .big em{color:var(--acid);font-style:italic}
.form-success p{font-size:16px;line-height:1.6;color:var(--paper-70);max-width:420px;margin:0 auto}
.form-success .vl-stamp{margin-top:28px;border-color:var(--acid);color:var(--acid);transform:rotate(4deg)}
.vl-field textarea{resize:vertical;min-height:84px}
.vl-field+.vl-field,.vl-field+.vl-video,.vl-video+.vl-field{margin-top:20px}

/* ---------- intake: chips, checkboxes, acknowledgements ---------- */
.vl-field label .opt{font-family:var(--font-body);font-weight:400;font-style:italic;letter-spacing:0;text-transform:none;color:var(--paper-70);margin-left:8px}

.chips{display:flex;flex-wrap:wrap;gap:8px}
/* .vl-field label is display:block, uppercase and acid in primitives.css. Chips and
   check rows are labels too, so they have to out-specify that rule. */
.vl-field label.chip{position:relative;display:inline-flex;cursor:pointer;margin:0}
.chip input{position:absolute;opacity:0;width:0;height:0}
.chip span{
  display:inline-block;padding:9px 14px;background:var(--ink);color:var(--paper-70);
  border:1px solid var(--paper-15);font-family:var(--font-label);font-weight:700;
  letter-spacing:.1em;font-size:12px;text-transform:uppercase;
  transform:skewX(var(--skew));transition:background var(--t-micro),color var(--t-micro),border-color var(--t-micro);
}
.chip span>i{display:inline-block;font-style:normal;transform:skewX(var(--skew-counter))}
.chip:hover span{border-color:var(--paper-70);color:var(--paper)}
.chip input:checked+span{background:var(--acid);color:var(--ink);border-color:var(--acid)}
.chip input:focus-visible+span{outline:2px solid var(--acid);outline-offset:2px}

.vl-field label.check{
  display:grid;grid-template-columns:22px 1fr;gap:16px;align-items:start;cursor:pointer;
  margin:0;padding:9px 0;font-family:var(--font-body);font-weight:400;font-size:15px;
  line-height:1.5;letter-spacing:normal;text-transform:none;color:var(--paper-70);
}
.vl-field label.check:hover{color:var(--paper)}
.check+.check{border-top:1px solid var(--paper-10)}
/* Unticked is an empty square, ticked is a solid acid square with an ink tick. The padding reset stops
   the .vl-field input padding from inflating the box. */
.check input{
  appearance:none;-webkit-appearance:none;box-sizing:border-box;flex:none;margin:2px 0 0;padding:0;width:22px;height:22px;
  background:var(--ink);border:2px solid var(--paper-70);cursor:pointer;display:grid;place-content:center;
}
.check input::before{content:"";width:12px;height:12px;background:var(--ink);clip-path:polygon(14% 44%,0 60%,40% 100%,100% 22%,86% 8%,40% 70%);transform:scale(0);transition:transform var(--t-micro)}
.check input:checked{background:var(--acid);border-color:var(--acid)}
.check input:checked::before{transform:scale(1)}
.check input:focus-visible{outline:2px solid var(--acid);outline-offset:2px}
.check a{color:var(--acid);text-decoration:underline;text-underline-offset:3px}
.check a:hover{color:var(--paper)}
.vl-check-group .acks,.vl-field.acks{margin-top:24px}
.vl-field.acks{border-left:3px solid var(--blood);padding-left:16px}

/* ---------- apply page: the scoring card ---------- */
.scorecard{margin-top:40px;border-top:3px solid var(--acid);padding-top:20px}
.scoreline{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:9px 0;border-bottom:1px solid var(--paper-10)}
.scoreline .sl-name{font-family:var(--font-label);font-weight:700;letter-spacing:.12em;font-size:13px;text-transform:uppercase;color:var(--paper-70)}
.scoreline .sl-w{font-family:var(--font-display);font-size:26px;line-height:1;color:var(--acid);font-variant-numeric:tabular-nums}
.scorenote{margin-top:14px;font-size:13.5px;line-height:1.55;color:var(--paper-70);max-width:420px}

/* ---------- shared page footer (subpages) ---------- */
footer.site-foot{width:100%;padding:30px 32px 44px;border-top:1px solid var(--paper-15);margin-top:60px}
footer.site-foot .foot-row .vl{width:38px;height:38px}
footer.site-foot .foot-row{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:flex-start}
footer.site-foot .brand{font-family:var(--font-display);font-size:22px;letter-spacing:.02em;display:flex;align-items:center;gap:10px}
footer.site-foot .brand [data-mark]{width:28px;height:28px;display:inline-block}
/* The tagline under the footer wordmark, on every page. */
.foot-brand{display:flex;flex-direction:column;gap:12px}
.foot-tag{font-family:var(--font-label);font-weight:700;font-style:italic;font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--paper-70)}
footer.site-foot .vl-meta a{color:var(--paper-70)}
footer.site-foot .vl-meta a:hover{color:var(--acid)}
@media(max-width:640px){footer.site-foot{padding:26px 18px 40px}}

/* ---------- the headshot: one component, every size ----------
   A square photo pushed to high-contrast mono and printed in acid, so four different selfies read as
   one fight card. No photo falls back to initials; no viber at all is an open seat. .is-round is the
   table and scorecard size (circles are the one radius the brand allows). Drawn by js/roster.js. */
.vl-shot{position:relative;display:block;aspect-ratio:1;background:var(--steel);overflow:hidden;isolation:isolate;flex:none}
.vl-shot img{display:block;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.4) brightness(.92);transition:filter .3s var(--ease-out),transform .6s var(--ease-out)}
.vl-shot::after{content:"";position:absolute;inset:0;background:var(--acid);mix-blend-mode:multiply;pointer-events:none;transition:opacity .3s var(--ease-out)}
.vl-shot::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background-image:repeating-linear-gradient(0deg,transparent 0 3px,var(--scanline) 3px 4px)}
.vl-shot.is-win::after{background:var(--blood)}
.seat:hover .vl-shot::after,.vl-shot:hover::after{opacity:0}
.seat:hover .vl-shot img{transform:scale(1.04)}
.vl-shot.is-ini,.vl-shot.is-open{display:grid;place-items:center}
.vl-shot.is-ini::after,.vl-shot.is-open::after{display:none}
.vl-shot .ini{font-family:var(--font-display);font-size:clamp(40px,7vw,120px);line-height:1;letter-spacing:.02em;color:var(--acid)}
.vl-shot.is-open .ini{color:transparent;-webkit-text-stroke:2px var(--paper-40)}
.vl-shot.is-open{background:repeating-linear-gradient(135deg,var(--steel) 0 14px,var(--ink) 14px 28px)}
.vl-shot.is-round{width:40px;height:40px;border-radius:50%;border:2px solid var(--paper-40)}
.vl-shot.is-round::before{display:none}
.vl-shot.is-round .ini{font-size:15px;-webkit-text-stroke:0;color:var(--acid)}
.vl-shot.is-round.is-open .ini{color:var(--paper-40)}
.vl-shot.is-round.is-win{border-color:var(--acid)}

/* ---------- season pages: episodes, the episode card, the roster ---------- */
.shell{max-width:1440px;margin:0 auto}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:18px 32px;border-bottom:1px solid var(--paper-15)}
.topbar .brand{font-family:var(--font-display);font-size:20px;letter-spacing:var(--track-wordmark);display:flex;align-items:center;gap:12px;color:inherit}
.topbar .brand .vl{width:30px;height:30px}
.topbar .flag{display:flex;align-items:center;gap:10px;font-family:var(--font-label);font-weight:700;letter-spacing:.2em;font-size:12px;color:var(--acid)}
.season-wrap{padding:34px 32px 70px}
.season-head{display:flex;align-items:baseline;gap:24px;flex-wrap:wrap;margin-bottom:22px}
.season-head h1,.season-head h2{font-family:var(--font-display);font-size:clamp(40px,6vw,80px);text-transform:uppercase;line-height:.92}
.season-head h2{font-size:clamp(30px,4vw,56px)}
.season-head em{color:var(--acid);font-style:italic;transform:skewX(-4deg);display:inline-block}
.season-head .rule{flex:1;height:var(--rule);background:var(--acid);min-width:60px;align-self:center;transform-origin:left;animation:vl-rule .9s var(--ease-out) .2s both}
@keyframes vl-rule{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.season-lede{font-size:var(--size-body-lg);line-height:var(--lh-body);color:var(--paper-75);max-width:680px;margin-bottom:44px}
.season-lede strong{color:var(--paper)}
.season-lede a,.fine-note a{color:var(--acid);text-decoration:underline;text-underline-offset:3px}
.season-sec{margin-top:70px}
.fine-note{margin-top:16px;font-size:13.5px;line-height:1.6;color:var(--paper-40);max-width:640px}

.lineup{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap-grid);background:var(--line)}
.seat{background:var(--ink);position:relative;display:flex;flex-direction:column;animation:vl-deal .65s var(--ease-out) both;animation-delay:calc(.15s + var(--i,0)*.09s);transition:background .2s}
.seat:hover{background:var(--steel)}
.seat-n{position:absolute;z-index:2;top:-6px;right:8px;font-family:var(--font-display);font-size:clamp(48px,6vw,96px);color:transparent;-webkit-text-stroke:1px rgba(243,239,230,.3);pointer-events:none}
.seat.is-win{outline:3px solid var(--acid);outline-offset:-3px}
.seat.is-win .seat-n{color:var(--acid);-webkit-text-stroke:0}
.seat-meta{padding:18px 20px 24px}
.seat-tag{font-family:var(--font-label);font-weight:700;letter-spacing:var(--track-label);font-size:12px;color:var(--blood)}
.seat.is-win .seat-tag{color:var(--acid)}
.seat-name{font-family:var(--font-display);font-size:clamp(22px,2.2vw,32px);text-transform:uppercase;letter-spacing:.03em;margin-top:6px;line-height:1}
.seat.is-open .seat-name{color:var(--paper-70)}
.seat-line{font-size:14px;line-height:1.5;color:var(--paper-40);margin-top:8px}
.seat-line a{color:var(--acid)}
.alts{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:18px;padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.alt{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-label);font-weight:700;letter-spacing:.12em;font-size:14px;text-transform:uppercase;color:var(--paper-70)}

.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap-grid);background:var(--line)}
.card{background:var(--ink);padding:22px 22px 26px;animation:vl-deal .6s var(--ease-out) both;animation-delay:calc(.15s + var(--i,0)*.12s)}
.card-h{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--font-display);font-size:26px;text-transform:uppercase;letter-spacing:.03em;padding-bottom:14px;border-bottom:3px solid var(--acid);margin-bottom:8px}
.card-h span{font-family:var(--font-label);font-weight:800;font-style:italic;font-size:12px;letter-spacing:.25em;color:var(--blood)}
.card-row{display:grid;grid-template-columns:40px minmax(0,1fr) 72px 34px;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--paper-10)}
.card-row .nm{font-family:var(--font-label);font-weight:700;font-size:16px;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-row .bar{display:block;height:8px;background:var(--paper-10)}
.card-row .bar i{display:block;height:100%;background:var(--acid);transform-origin:left;animation:vl-rule .8s var(--ease-out) .6s both}
.card-row b{font-family:var(--font-display);font-size:24px;font-weight:400;color:var(--acid);text-align:right;font-variant-numeric:tabular-nums}
.card-sealed{padding:34px 0 14px;text-align:left}
.card-sealed .vl-stamp{transform:rotate(-6deg)}
.card-sealed p{margin-top:20px;font-size:14px;line-height:1.55;color:var(--paper-40)}
.totals{margin-top:34px}
.total-row{display:grid;grid-template-columns:54px 40px minmax(0,1fr) auto 70px;gap:14px;align-items:center;padding:12px 14px;border-bottom:1px solid var(--line)}
.total-row .rk{font-family:var(--font-display);font-size:26px;color:transparent;-webkit-text-stroke:1px var(--paper-40)}
.total-row .nm{font-family:var(--font-display);font-size:20px;text-transform:uppercase;letter-spacing:.03em}
.total-row .br{font-size:13.5px;color:var(--paper-40);font-variant-numeric:tabular-nums;text-align:right}
.total-row b{font-family:var(--font-display);font-weight:400;font-size:30px;text-align:right;font-variant-numeric:tabular-nums}
.total-row.is-win{background:var(--steel)}
.total-row.is-win .rk,.total-row.is-win .nm,.total-row.is-win b{color:var(--acid);-webkit-text-stroke:0}
.pc{margin-top:18px;font-family:var(--font-label);font-weight:700;letter-spacing:.12em;font-size:15px;text-transform:uppercase;color:var(--paper-70)}
.pc strong{color:var(--blood)}

.tapes{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap-grid);background:var(--line)}
.tape-slot{display:block;background:var(--ink);padding:30px 28px 32px;color:inherit;text-decoration:none;position:relative;overflow:hidden;animation:vl-deal .6s var(--ease-out) both}
.tape-slot+.tape-slot{animation-delay:.12s}
.tape-slot::after{content:"";position:absolute;inset:0;pointer-events:none;background-image:repeating-linear-gradient(0deg,transparent 0 3px,var(--scanline) 3px 4px)}
a.tape-slot:hover{background:var(--steel);color:inherit}
.tape-k{font-family:var(--font-label);font-weight:800;font-style:italic;font-size:12px;letter-spacing:.25em;color:var(--blood)}
.tape-h{font-family:var(--font-display);font-size:clamp(28px,3vw,44px);text-transform:uppercase;line-height:.95;margin:12px 0}
.tape-h span{color:var(--acid);font-style:italic}
.tape-slot p{font-size:15px;line-height:1.55;color:var(--paper-70);max-width:440px}
.tape-state{display:inline-block;margin-top:22px;font-family:var(--font-label);font-weight:800;font-style:italic;letter-spacing:.22em;font-size:12px;padding:6px 12px;border:1px solid var(--paper-40);color:var(--paper-70)}
.tape-slot.is-out .tape-state{background:var(--acid);color:var(--ink);border-color:var(--acid)}

.ep-list{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gap-grid);background:var(--line)}
.ep-card{background:var(--ink);display:grid;grid-template-columns:auto 1fr;gap:26px;padding:30px 28px 34px;color:inherit;text-decoration:none;position:relative;animation:vl-deal .65s var(--ease-out) both;animation-delay:calc(.15s + var(--i,0)*.12s);transition:background .2s}
a.ep-card:hover{background:var(--steel);color:inherit}
.ep-num{font-family:var(--font-label);font-weight:800;font-style:italic;font-size:13px;letter-spacing:.3em;color:var(--blood)}
.ep-num b{display:block;font-family:var(--font-display);font-style:normal;font-weight:400;font-size:clamp(70px,8vw,130px);line-height:.85;letter-spacing:0;color:transparent;-webkit-text-stroke:2px var(--paper);transition:color .2s}
a.ep-card:hover .ep-num b{color:var(--acid);-webkit-text-stroke:2px var(--acid)}
.ep-stamp{display:inline-block;font-family:var(--font-label);font-weight:800;font-style:italic;letter-spacing:.25em;font-size:12px;color:var(--ink);background:var(--acid);padding:5px 12px;transform:rotate(-2deg)}
.ep-body h2{font-family:var(--font-display);font-size:clamp(30px,3.4vw,50px);text-transform:uppercase;line-height:.95;margin:16px 0 8px}
.ep-meta{font-family:var(--font-label);font-weight:700;letter-spacing:.2em;font-size:12px;color:var(--paper-40)}
.ep-seats{display:grid;grid-template-columns:repeat(4,72px);gap:6px;margin:22px 0 18px}
.ep-seats .vl-shot .ini{font-size:26px}
.ep-line{font-size:15px;line-height:1.55;color:var(--paper-70)}
.ep-line.dim{color:var(--paper-40);margin-top:4px}
.ep-line strong{color:var(--acid)}
.ep-card .vl-btn{margin-top:22px}
.ep-card.is-ghost{opacity:.55}
.ep-card.is-ghost .ep-num b{-webkit-text-stroke:1px var(--paper-40)}
.ep-card.is-ghost .ep-stamp{background:transparent;color:var(--paper-40);border:1px solid var(--paper-40)}

table.pts{width:100%;border-collapse:collapse}
table.pts th{font-family:var(--font-label);font-weight:700;letter-spacing:var(--track-label);font-size:12px;text-transform:uppercase;color:var(--paper-40);padding:10px 14px;text-align:left;border-bottom:1px solid var(--line)}
table.pts td{padding:12px 14px;border-bottom:1px solid var(--line);font-size:15px;color:var(--paper-70);font-variant-numeric:tabular-nums}
table.pts .num{text-align:right}
table.pts td.rank{font-family:var(--font-display);font-size:26px;line-height:1;color:transparent;-webkit-text-stroke:1px var(--paper-40)}
table.pts td.who .who-in{display:flex;align-items:center;gap:14px}
table.pts td.who{font-family:var(--font-display);font-size:20px;text-transform:uppercase;letter-spacing:.03em;color:var(--paper)}
table.pts td.tot{font-family:var(--font-display);font-size:24px;color:var(--paper)}
table.pts tr.first td{background:var(--steel)}
table.pts tr.first td.rank,table.pts tr.first td.who,table.pts tr.first td.tot{color:var(--acid);-webkit-text-stroke:0}
table.pts tr.is-open td.who{color:var(--paper-40)}
.brief-box{background:var(--steel);border-left:3px solid var(--blood);padding:26px 28px;max-width:760px}
.brief-box p{font-size:16px;line-height:1.6;color:var(--paper-70);margin-top:18px}
.brief-box p.brief-text{margin-top:0;color:var(--paper);font-size:18px}
.season-cta{display:flex;gap:16px;flex-wrap:wrap;margin-top:30px}
@media(max-width:900px){.lineup{grid-template-columns:1fr 1fr}.cards,.ep-list,.tapes{grid-template-columns:1fr}.total-row{grid-template-columns:40px 40px minmax(0,1fr) 56px}.total-row .br{display:none}}
@media(max-width:640px){.topbar{padding:14px 18px}.season-wrap{padding:26px 18px 50px}.ep-card{grid-template-columns:1fr;gap:10px}.ep-seats{grid-template-columns:repeat(4,1fr)}
  table.pts th:nth-child(3),table.pts td:nth-child(3),table.pts th:nth-child(5),table.pts td:nth-child(5),table.pts th:nth-child(6),table.pts td:nth-child(6){display:none}}
@media (prefers-reduced-motion:reduce){.seat,.card,.tape-slot,.ep-card,.season-head .rule,.card-row .bar i{animation:none!important}}
[data-vl-preview-flag][hidden]{display:none!important}
.seat.is-open .seat-n{display:none}