/* The Draft Report Card: the board on felt, card-stock tiles in team colours, marker grades.
   Tokens come from tokens.css; felt, rust and the two extra faces are this page's own.
   Design settled with Andy across seven labs, 2026-09-15 (docs/mocks/report-card-lab-*.html). */
:root{--rust:#c2643f;--rust-hi:#d9a48f;--rust-lo:#5a2c1c;
  --felt:#13241a;--felt-hi:#1c3324;--felt-lo:#0f1d14;--moss:#8aa290;--moss-hi:#d8e0d6;
  --fc:"Barlow Condensed","Arial Narrow",sans-serif;--fm:"Permanent Marker","Marker Felt",cursive}
html{scrollbar-gutter:stable}
.rc{max-width:1360px;margin:0 auto}
.report-card-page .container{max-width:100rem}
.eyebrow{font-family:var(--fd, var(--font-display));text-transform:uppercase;letter-spacing:.22em;font-size:11px;color:var(--gold);margin:0 0 8px}
.view[hidden]{display:none}

/* ---------- hero: the title and the two pinned tiles ---------- */
.rc-hero{display:grid;grid-template-columns:auto 1fr;gap:20px 40px;align-items:end;padding:10px 0 22px}
.rc-hero h1{font-family:var(--fc);font-weight:800;font-style:italic;text-transform:uppercase;font-size:clamp(52px,7vw,96px);line-height:.85;letter-spacing:-.01em;margin:0}
.rc-hero h1.gold-text{background-size:200% 100%;padding:0 .14em .06em 0;margin-right:-.14em}
.pins{display:flex;gap:34px;justify-self:end;align-items:flex-end;min-height:190px;padding-right:6px}
.pin{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;transform:rotate(var(--r));background:none;border:0;padding:0;cursor:pointer;font:inherit;color:inherit}
.pin .cap{font-family:var(--fm);font-size:19px;color:#f4ecd6;white-space:nowrap;transform:rotate(-2deg)}
.pin.bad .cap{color:#ffb8a0}
.pincard{position:relative;display:block}
.pin .card{width:150px;height:130px;transform:none;padding:9px 10px 8px 22px}
.pin .card::before{width:14px;background:linear-gradient(90deg,var(--tc,var(--steel-4)) 0 11px,var(--tc2,var(--steel-5)) 11px 14px)}
.pin .card .name{font-size:19px}
.pin .card .name .l1{padding-right:34px}
.pin .card .ab{font-size:12px;right:9px;top:7px}
.pin .card .rk{font-size:21px}
.pin .card .pts{font-size:13px}
.pin .card .letter{font-size:46px;margin-right:4px}
.pin .card .stamp-t{display:none}
.pin .tack{position:absolute;left:50%;top:-7px;width:16px;height:16px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#f1e6c0,var(--gold) 55%,#5a4610);transform:translateX(-50%);box-shadow:0 2px 4px rgba(0,0,0,.6);z-index:3}
.pin:hover .card,.pin:focus-visible .card{transform:translateY(-3px);box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 14px 24px rgba(0,0,0,.6)}
.pin:focus-visible{outline:none}
.pins:empty{min-height:0}

/* ---------- the strip: a View label, three tab buttons, one line. Sits on the felt. ---------- */
.strip{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:0 0 22px}
.viewlab{font:600 10px var(--font-body);letter-spacing:.22em;text-transform:uppercase;color:var(--moss)}
.tabs{display:flex}
.tabs button{font:800 14px var(--fc);letter-spacing:.06em;text-transform:uppercase;border:1px solid rgba(201,163,55,.45);background:rgba(0,0,0,.42);color:var(--gold-hi);padding:9px 22px 9px 16px;cursor:pointer;clip-path:polygon(0 0,100% 0,calc(100% - 10px) 100%,0 100%);margin-right:-8px;box-shadow:inset 0 -2px 0 var(--gold-lo);transition:background .2s,color .2s,transform .2s}
.tabs button:hover{background:var(--gold-lo);color:#fff;box-shadow:inset 0 -2px 0 var(--gold-hi)}
.tabs button[aria-pressed="true"]{background:#fff;color:#0a0c10;border-color:#fff;position:relative;z-index:1;box-shadow:none;cursor:default}
.tabs button:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.rc-lede{margin:0 0 0 6px;font-family:var(--fm);font-size:15px;line-height:1.3;color:#f4ecd6;opacity:.9;padding-top:4px}
.view{animation:none}
.view.in{animation:viewin .35s ease both}
@keyframes viewin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---------- the mat: felt that fades in under the board and out below it ---------- */
.mat{position:relative;margin:0 -28px;padding:34px 28px 36px;background:linear-gradient(180deg,rgba(19,36,26,0) 0%,#15291d 6%,var(--felt) 50%,var(--felt-lo) 86%,rgba(11,13,16,0) 100%)}
.mat::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.12;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23f)'/%3E%3C/svg%3E");mask-image:linear-gradient(180deg,transparent,#000 6%,#000 86%,transparent);-webkit-mask-image:linear-gradient(180deg,transparent,#000 6%,#000 86%,transparent)}
.mat>*{position:relative}

/* ---------- board ---------- */
.scroller{overflow-x:auto;padding:0 0 8px}
.board{min-width:1180px;display:grid;grid-template-columns:44px repeat(12,minmax(0,1fr));grid-template-rows:auto repeat(5,96px) auto;gap:6px}
.colhead{padding:0 0 8px}
.rowhead{font:800 22px var(--fc);font-style:italic;color:var(--moss);display:flex;align-items:center;justify-content:center;border-right:1px solid rgba(255,255,255,.14);text-align:center;line-height:1}
.rowhead.six{flex-direction:column;gap:6px;font-size:16px;padding:10px 4px}
.rowhead.six em{font:600 9px var(--font-body);letter-spacing:.1em;text-transform:uppercase;color:var(--moss);font-style:normal}
.slot{position:relative;height:96px}
.slot .card{position:absolute;inset:0;width:auto;height:auto}
.shelf{min-height:104px;border-top:1px dashed rgba(255,255,255,.2);padding-top:8px;position:relative}
.shelf .card{display:flex;width:100%;height:96px}
.board.earned .shelf,.board.earned #sixhead{display:none}

/* owner heads: gold-edged shield with the draft slot, full name, A-to-F strip */
.oh{position:relative;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 3px 4px;border-radius:3px;background:none;border:0;font:inherit;color:inherit;width:100%;transition:transform .2s,background .2s}
.oh:hover,.oh:focus-visible{transform:translateY(-2px);background:rgba(255,255,255,.06);outline:none}
.oh .sh{position:relative;width:36px;height:40px;display:grid;place-items:center;font:800 17px var(--fc);font-style:italic;line-height:1;color:var(--gold-hi);clip-path:polygon(0 0,100% 0,100% 62%,50% 100%,0 62%);background:linear-gradient(180deg,var(--gold-hi),var(--gold) 55%,var(--gold-lo))}
.oh .sh::before{content:"";position:absolute;inset:1.5px;clip-path:polygon(0 0,100% 0,100% 62%,50% 100%,0 62%);background:linear-gradient(180deg,#2a2412,#1a1610)}
.oh .sh span{position:relative}
.oh .nm{font:700 12.5px var(--fc);letter-spacing:.05em;text-transform:uppercase;color:#fff;white-space:nowrap;line-height:1}
.oh .gstrip{display:flex;width:64px;height:4px;border-radius:2px;overflow:hidden;background:rgba(0,0,0,.35);margin-top:2px}
.oh .gstrip i{display:block;height:100%}
.oh .gstrip .A{background:var(--gold-hi)}.oh .gstrip .B{background:var(--gold)}.oh .gstrip .C{background:#7d8a80}.oh .gstrip .D{background:#b4785f}.oh .gstrip .F{background:var(--rust)}
/* the tile: dark stock tinted with the team's colour, the team on a thick spine, the verdict in the letter.
   Settled in labs 13–15 (2026-09-15): no frames, no sweeps on the tiles; gold A, red F; the flashes live in the opened card. */
.card{position:relative;background:linear-gradient(180deg,var(--ink-2),var(--ink-1));background:linear-gradient(180deg,color-mix(in srgb,var(--tc,var(--ink-2)) 26%,var(--ink-2)),color-mix(in srgb,var(--tc,var(--ink-1)) 18%,var(--ink-1)));color:var(--paper);border-radius:2px;padding:6px 8px 5px 18px;display:flex;flex-direction:column;justify-content:space-between;height:96px;overflow:hidden;cursor:pointer;text-align:left;font:inherit;border:0;box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 7px 14px rgba(0,0,0,.5);transform:rotate(var(--tilt,0deg));transition:transform .7s cubic-bezier(.2,.7,.2,1),opacity .4s,box-shadow .25s}
.card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:12px;background:linear-gradient(90deg,var(--tc,var(--steel-4)) 0 9px,var(--tc2,var(--steel-5)) 9px 12px)}
.card::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.06),transparent 40%,rgba(0,0,0,.25)),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2'/%3E%3C/filter%3E%3Crect width='90' height='90' filter='url(%23f)' opacity='.35'/%3E%3C/svg%3E");mix-blend-mode:overlay}
.card:hover,.card:focus-visible{outline:none;transform:rotate(var(--tilt,0deg)) translateY(-3px);box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 14px 24px rgba(0,0,0,.6)}
.card[hidden]{display:none}
.card .ab{position:absolute;right:7px;top:5px;font:700 10px var(--fc);letter-spacing:.14em;text-transform:uppercase;color:var(--paper);opacity:.6;z-index:1;text-align:right;line-height:1.1}
.card .ab small{display:block;font-size:9px;letter-spacing:.1em;opacity:.9}
.card.late .name .l2{padding-right:32px}
.card .name{position:relative;z-index:1;font:800 15px var(--fc);letter-spacing:.02em;text-transform:uppercase;line-height:1;color:var(--paper);height:2.1em;overflow:hidden}
.card .name span{display:block;white-space:nowrap;overflow:hidden}
.card .name .l1{padding-right:26px}
.card .cfoot{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:flex-end;gap:6px;margin-top:auto}
.card .rc-score{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.card .rk{font:800 16px var(--fc);font-style:italic;line-height:1;color:var(--paper)}
.card .pts{font:600 10.5px var(--fc);color:var(--paper);opacity:.75;white-space:nowrap;font-variant-numeric:tabular-nums}
.card .letter{font-family:var(--fm);font-size:34px;line-height:.8;color:var(--paper);transform:rotate(-7deg);margin-right:3px;text-shadow:0 1px 0 rgba(0,0,0,.25)}
.card.g .letter{color:var(--gold-hi)}.card.r .letter{color:#ff4b3a}
.card .letter.out{font:800 15px var(--fc);font-style:italic;letter-spacing:.08em;transform:none}
.card .stamp-t{position:absolute;right:12px;top:34px;z-index:2;transform:rotate(-8deg);font-family:var(--fm);font-size:12px;letter-spacing:.05em;text-transform:uppercase;padding:1px 6px;border:2px solid;border-radius:2px;line-height:1.2;background:#efe8d6;box-shadow:0 3px 6px rgba(0,0,0,.45)}
.card .stamp-t.value{color:#145127;border-color:#145127}.card .stamp-t.reach{color:#8f1d0f;border-color:#8f1d0f}
.card.out{opacity:.5;filter:saturate(.3)}
.card.out .rk{font-size:11px;letter-spacing:.06em;font-style:normal}
.card.k::after{display:none}
.card.k .ab::before{content:"K · ";color:var(--gold-hi)}
.board.dim .card{opacity:.28;filter:saturate(.4)}
.board.dim .card.lit{opacity:1;filter:none}

/* didn't make the cut (Hindsight) */
.cut{margin-top:18px}
.cut[hidden]{display:none}
.cut-head{font:700 12px var(--fc);text-transform:uppercase;letter-spacing:.16em;color:var(--moss);margin:0 0 8px}
.cut-row{display:flex;flex-wrap:wrap;gap:8px}
.cut-row .card{width:103px}

/* ---------- steals & busts: the podium (lab 17, row 41). Three tiles on top, 4 to 10 as rows. ---------- */
.lists{display:grid;grid-template-columns:1fr 1fr;gap:26px 44px;padding:6px 0 12px}
@media (max-width:860px){.lists{grid-template-columns:1fr}}
.ledger h2{font:800 clamp(26px,3vw,36px) var(--fc);font-style:italic;text-transform:uppercase;letter-spacing:.02em;line-height:1;margin:0 0 4px;color:var(--gold-hi)}
.ledger.busts h2{color:#ff4b3a}
.strap{color:var(--moss);margin:0 0 14px;font-size:13px}
.podium{display:flex;gap:16px;align-items:flex-end;margin-bottom:16px;flex-wrap:wrap}
.pod{display:flex;flex-direction:column;align-items:center;gap:6px}
.pod .no{font:800 18px var(--fc);font-style:italic;color:var(--moss)}
.pod:first-child .no{color:var(--gold)}.busts .pod:first-child .no{color:#ff4b3a}
.pod .card{width:120px;height:104px}
.pod:first-child .card{width:150px;height:130px;padding:9px 10px 8px 22px}
.pod:first-child .card::before{width:14px;background:linear-gradient(90deg,var(--tc,var(--steel-4)) 0 11px,var(--tc2,var(--steel-5)) 11px 14px)}
.pod:first-child .card .name{font-size:19px}.pod:first-child .card .name .l1{padding-right:34px}.pod:first-child .card .rk{font-size:21px}.pod:first-child .card .pts{font-size:13px}.pod:first-child .card .letter{font-size:46px}.pod:first-child .card .ab{font-size:12px;right:9px;top:7px}
.pod .ln{font:600 10px var(--font-body);letter-spacing:.06em;text-transform:uppercase;color:var(--moss);text-align:center;white-space:nowrap}
.pod .ln b{color:var(--moss-hi);font-weight:600}
.ledger ol{list-style:none;margin:0;padding:0;border-top:1px solid rgba(255,255,255,.14)}
.ledger li{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:4px 12px;align-items:center;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.12);cursor:pointer}
.ledger li:hover .nm,.ledger li:focus-visible .nm{color:var(--gold-hi)}
.ledger.busts li:hover .nm,.ledger.busts li:focus-visible .nm{color:#ff4b3a}
.ledger li:focus-visible{outline:none;background:rgba(255,255,255,.05)}
.ledger .no{font:800 18px var(--fc);font-style:italic;color:var(--moss);font-variant-numeric:tabular-nums}
.ledger .who{min-width:0}
.ledger .nm{font:800 15px var(--fc);letter-spacing:.03em;text-transform:uppercase;color:#fff;line-height:1}
.ledger .ln{font-size:12px;color:var(--moss-hi);margin-top:3px}
.ledger .ln b{color:#fff;font-weight:600}
.ledger .gr{display:flex;flex-direction:column;align-items:flex-end;gap:2px;font-variant-numeric:tabular-nums}
.ledger .gr .letter{font-family:var(--fm);font-size:26px;line-height:.9;color:var(--gold-hi);transform:rotate(-6deg)}
.ledger.busts .gr .letter{color:#ff4b3a}
.ledger .gr small{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--moss);white-space:nowrap}
.ledger .mv{font-size:10.5px;color:var(--moss);letter-spacing:.06em}
.satout{color:var(--moss);font-size:12.5px;margin:12px 0 0}

/* ---------- pop-outs: the scrim, the owner card, the tile dossier ---------- */
.rc-scrim{position:fixed;inset:0;background:rgba(6,8,11,.78);backdrop-filter:blur(4px);z-index:20;display:flex;align-items:center;justify-content:center;padding:16px;opacity:0;transition:opacity .36s ease}
.rc-scrim.rc-on{opacity:1}
.rc-scrim[hidden]{display:none}
.felt-card{position:relative;background:radial-gradient(ellipse 90% 70% at 50% 0%,var(--felt-hi),var(--felt) 50%,var(--felt-lo) 100%);border:1px solid var(--gold-lo);border-radius:4px;box-shadow:0 0 0 6px var(--ink-1),0 0 0 7px var(--steel-3),0 40px 100px rgba(0,0,0,.7);color:#fff;overflow:hidden;isolation:isolate}
.felt-card::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.12;mix-blend-mode:overlay;z-index:-1;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23f)'/%3E%3C/svg%3E")}
.felt-card .close{position:absolute;right:6px;top:2px;background:none;border:0;color:var(--moss);width:32px;height:32px;font:24px/1 var(--font-body);cursor:pointer;z-index:3;transition:color .2s}
.felt-card .close:hover,.felt-card .close:focus-visible{color:#fff;outline:none}

/* the owner: five tiles, the grade counts, best and worst pick */
.rc-owner{width:min(760px,96vw);padding:24px 26px 22px;font-family:var(--fc);opacity:0;transform:scale(.92);transition:transform .4s cubic-bezier(.16,.8,.24,1),opacity .3s ease}
.rc-scrim.rc-on .rc-owner{opacity:1;transform:none}
.rc-owner .k{font:600 10px var(--font-body);letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin:0 0 6px}
.rc-owner h2{font:800 clamp(30px,5vw,46px) var(--fc);font-style:italic;text-transform:uppercase;line-height:.9;color:#fff;margin:0 0 4px}
.rc-owner .sub{font:400 12px var(--font-body);color:var(--moss-hi);margin:0 0 16px}
.rc-owner .row5{display:flex;gap:8px;margin-bottom:18px;flex-wrap:wrap}
.rc-owner .row5 .card{width:calc((100% - 32px)/5);min-width:104px;height:96px;flex:none}
.rc-owner .bar{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;margin-bottom:16px}
.rc-owner .bar div{background:rgba(0,0,0,.35);border-radius:2px;height:38px;display:flex;align-items:center;justify-content:center;gap:8px;font:800 20px var(--fc);font-style:italic;color:var(--moss)}
.rc-owner .bar div b{font:600 12px var(--font-body);color:var(--moss-hi)}
.rc-owner .bar div.on.A{background:var(--gold-lo);color:var(--gold-hi)}.rc-owner .bar div.on.B{background:#4a3d16;color:var(--gold)}.rc-owner .bar div.on.C{background:#33403a;color:var(--moss-hi)}.rc-owner .bar div.on.D{background:#4a3128;color:#e6a08a}.rc-owner .bar div.on.F{background:var(--rust-lo);color:#ffb8a0}
.rc-owner .lines{display:grid;grid-template-columns:1fr 1fr;gap:10px 24px;font:400 13.5px var(--font-body);color:var(--moss-hi);border-top:1px solid rgba(255,255,255,.14);padding-top:14px}
.rc-owner .lines b{color:#fff;font-weight:600}
.rc-owner .lines small{display:block;font:600 9.5px var(--font-body);letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:3px}
.rc-owner .lines .bad small{color:#e6a08a}
@media (max-width:600px){.rc-owner .lines{grid-template-columns:1fr}}

/* the tile dossier: the tile you clicked, enlarged. Same tinted stock, the team on the spine.
   A: gold edge and one gold flash across the card. F: the letter comes down like a stamp, with a thud.
   Stamps always land: Reach with a red burst, Value with a gold one (the rule, 2026-09-15). */
.rc-dossier{--tx:var(--paper);width:min(540px,92vw,88vh);aspect-ratio:1;padding:26px 28px 24px;display:grid;grid-template-rows:auto 1fr auto auto;gap:0;container-type:inline-size;opacity:0;transform:scale(.86);filter:blur(6px);transition:transform .46s cubic-bezier(.16,.8,.24,1),opacity .34s ease,filter .4s ease;background:linear-gradient(165deg,var(--ink-2),var(--ink-1) 46%);background:linear-gradient(165deg,color-mix(in srgb,var(--tc,var(--ink-2)) 26%,var(--ink-2)),color-mix(in srgb,var(--tc,var(--ink-1)) 16%,var(--ink-1)) 60%);color:var(--paper);border:1px solid var(--steel-3)}
.rc-dossier::before{display:none}
.rc-dossier .spine{position:absolute;left:0;top:0;bottom:0;width:14px;background:linear-gradient(90deg,var(--tc,var(--steel-4)) 0 10px,var(--tc2,var(--steel-5)) 10px 14px);z-index:2}
.rc-scrim.rc-on .rc-dossier{opacity:1;transform:none;filter:none}
.rc-scrim.off .rc-dossier,.rc-scrim.off .rc-owner{transition-duration:.22s,.2s,.2s;transform:scale(.94);opacity:0}
.rc-dossier.out{border-style:dashed;filter:saturate(.4)}
.rc-dossier.g{border-color:var(--gold-lo)}
.rc-dossier.r{border-color:var(--rust-lo)}
.rc-dossier::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 28%,rgba(255,244,200,.42) 48%,transparent 64%);transform:translateX(-130%);z-index:1}
.rc-scrim.rc-on .rc-dossier.g::after{animation:sweep 1.2s .3s ease-out both}
@keyframes sweep{to{transform:translateX(130%)}}
.rc-dossier .bigghost{position:absolute;right:20px;top:4px;font:800 min(124px,23cqw) var(--fc);font-style:italic;line-height:1;color:rgba(255,255,255,.05);pointer-events:none;letter-spacing:.02em;font-variant-numeric:tabular-nums}
.rc-dossier .bigghost.late{font-size:min(40px,8cqw);top:20px;letter-spacing:.12em}
.rc-dossier .close{right:8px;top:8px;color:var(--steel-5)}
.rc-dossier .close:hover,.rc-dossier .close:focus-visible{color:#fff}
.stamp{position:absolute;right:34px;top:78px;transform:rotate(-9deg);font-family:var(--fm);text-transform:uppercase;letter-spacing:.06em;font-size:15px;padding:4px 10px 3px;border:2px solid;border-radius:3px;z-index:2;background:#efe8d6;box-shadow:0 3px 6px rgba(0,0,0,.45)}
.stamp.value{color:#145127;border-color:#145127}.stamp.reach{color:#8f1d0f;border-color:#8f1d0f}.stamp.out{color:var(--steel-4);border-color:var(--steel-4)}
@keyframes slam{0%{opacity:0;transform:rotate(-6deg) scale(2.4);text-shadow:none}55%{opacity:1;transform:rotate(-6deg) scale(.9);text-shadow:0 0 34px rgba(255,75,58,.95),0 0 8px rgba(255,120,100,.7)}100%{opacity:1;transform:rotate(-6deg) scale(1);text-shadow:0 0 0 rgba(0,0,0,0)}}
@keyframes slam-stamp{0%{opacity:0;transform:rotate(-9deg) scale(2.2);box-shadow:none}55%{opacity:1;transform:rotate(-9deg) scale(.92);box-shadow:0 0 28px rgba(255,75,58,.9),0 3px 6px rgba(0,0,0,.45)}100%{opacity:1;transform:rotate(-9deg) scale(1);box-shadow:0 3px 6px rgba(0,0,0,.45)}}
@keyframes slam-stamp-gold{0%{opacity:0;transform:rotate(-9deg) scale(2.2);box-shadow:none}55%{opacity:1;transform:rotate(-9deg) scale(.92);box-shadow:0 0 28px rgba(236,210,124,.9),0 3px 6px rgba(0,0,0,.45)}100%{opacity:1;transform:rotate(-9deg) scale(1);box-shadow:0 3px 6px rgba(0,0,0,.45)}}
@keyframes thud{0%,100%{transform:none}55%{transform:translateY(3px)}70%{transform:translateY(-1px)}}
.rc-scrim.rc-on .fx-heartbeat .z2 .letter{animation:slam .6s .5s cubic-bezier(.2,1.1,.3,1) both}
.rc-scrim.rc-on .fx-heartbeat .z3{animation:thud .35s .78s ease-out both}
.rc-scrim.rc-on .rc-dossier .stamp.reach{animation:slam-stamp .6s .95s cubic-bezier(.2,1.1,.3,1) both}
.rc-scrim.rc-on .rc-dossier .stamp.value{animation:slam-stamp-gold .6s .95s cubic-bezier(.2,1.1,.3,1) both}
@media (prefers-reduced-motion:reduce){.fx-heartbeat .z2 .letter,.fx-heartbeat .z3,.rc-dossier .stamp{animation:none!important;opacity:1}}
/* zones land in sequence */
.z{opacity:0;transform:translateY(10px);transition:opacity .45s ease,transform .5s cubic-bezier(.16,.8,.24,1)}
.rc-scrim.rc-on .z{opacity:1;transform:none}
.rc-scrim.rc-on .z1{transition-delay:.08s}.rc-scrim.rc-on .z2{transition-delay:.16s}.rc-scrim.rc-on .z3{transition-delay:.24s}.rc-scrim.rc-on .z4{transition-delay:.32s}.rc-scrim.rc-on .z5{transition-delay:.38s}
.z1{position:relative;padding-right:130px;align-self:start}
.z1 .kicker{font:600 10.5px var(--font-body);text-transform:uppercase;letter-spacing:.2em;color:var(--gold);margin:0 0 5px}
.z1 h2{font:800 clamp(26px,7.4cqw,40px) var(--fc);font-style:italic;text-transform:uppercase;letter-spacing:.01em;line-height:.94;margin:0 0 5px;color:#fff;max-height:1.9em;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.rc-dossier h2{color:var(--paper)}.rc-dossier.g h2{color:var(--gold-hi)}.rc-dossier.out h2{color:var(--steel-5)}
.z1 .who{color:var(--steel-5);font-size:12.5px;margin:0;letter-spacing:.04em}
/* the thesis: taken → played, and the letter */
.z2{display:grid;grid-template-columns:1fr auto 1fr auto;align-items:center;gap:12px;align-self:center;padding:8px 0}
.z2 .k{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--steel-5);display:block;margin-bottom:4px}
.z2 .rc-big{font:800 clamp(30px,8.5cqw,46px) var(--fc);font-style:italic;line-height:1;color:var(--paper);letter-spacing:.02em;font-variant-numeric:tabular-nums}
.z2 .played .rc-big{color:var(--gold-hi)}.rc-dossier.r .z2 .played .rc-big{color:#ff4b3a}.rc-dossier.out .z2 .played .rc-big{color:var(--steel-4);font-size:clamp(20px,5cqw,28px);letter-spacing:.14em}
.z2 .sub{display:block;font-size:11px;color:var(--steel-5);margin-top:4px}
.z2 .arrow{font:800 30px var(--fc);font-style:italic;color:var(--steel-4);line-height:1;padding-bottom:8px}
.z2 .letter{font-family:var(--fm);font-size:clamp(64px,17cqw,92px);line-height:.85;padding-left:6px;border-left:1px solid var(--steel-3);margin-left:6px;color:var(--paper);transform:rotate(-6deg)}
.rc-dossier.g .z2 .letter{color:var(--gold-hi)}.rc-dossier.r .z2 .letter{color:#ff4b3a}

.z2 .letter.out{font:800 clamp(28px,6cqw,34px) var(--fc);letter-spacing:.12em;color:var(--steel-4);transform:none}
/* scale: the key that explains the letter */
.z3{padding:6px 0 18px;border-top:1px solid var(--steel-3);padding-top:14px}
.ladder{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;position:relative;margin-top:16px}
.ladder div{background:var(--ink-2);border-radius:2px;height:32px;position:relative;text-align:center;font:800 16px var(--fc);font-style:italic;line-height:32px;color:var(--steel-4);transition:background .4s ease,color .4s ease}
.ladder div small{position:absolute;left:0;right:0;top:35px;font:9.5px var(--font-body);letter-spacing:.03em;color:var(--steel-5);line-height:1;font-variant-numeric:tabular-nums}
.rc-scrim.rc-on .ladder div.hit{background:var(--steel-3);color:var(--paper);transition-delay:.55s}
.rc-scrim.rc-on .ladder div.hit.a{background:var(--gold-lo);color:var(--gold-hi)}.rc-scrim.rc-on .ladder div.hit.f{background:#5a1a12;color:#ff6a5a}
.ladder .pin{position:absolute;top:-15px;font:600 9px var(--font-body);letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;transform:translateX(-50%);transition:left .6s cubic-bezier(.16,.8,.24,1) .45s;display:block;cursor:default;background:none;border:0;padding:0}
.ladder .pin::after{display:none}
.ladder .pin.taken{color:var(--steel-5)}.ladder .pin.played{color:var(--gold-hi)}.rc-dossier.r .ladder .pin.played{color:#ff4b3a}
.ladder .pin.both{color:var(--gold-hi)}
.ladder .track{position:absolute;top:-6px;height:1px;background:linear-gradient(90deg,var(--steel-4),var(--gold-hi));transform-origin:left;transform:scaleX(0);transition:transform .6s cubic-bezier(.16,.8,.24,1) .5s}
.rc-dossier.r .ladder .track{background:linear-gradient(90deg,var(--steel-4),#ff4b3a)}
.rc-scrim.rc-on .ladder .track{transform:scaleX(1)}
.zl{font:600 10px var(--font-body);text-transform:uppercase;letter-spacing:.16em;color:var(--steel-5);margin:0}
/* one line */
.z4{font-size:13px;color:var(--paper);padding:0 0 4px;font-variant-numeric:tabular-nums}
.z4 span{color:var(--steel-5)}
.z4 b{font-weight:600}
/* season */
.weeks{display:flex;gap:6px;margin-top:6px}
.weeks span{width:32px;height:32px;border:1px solid rgba(255,255,255,.18);border-radius:3px;display:grid;place-items:center;font:800 16px var(--fc);font-style:italic;color:var(--moss-hi)}
.weeks span.a{color:var(--gold-hi);border-color:var(--gold-lo)}.weeks span.f{color:#ffb8a0;border-color:var(--rust-lo)}
.weeks span.todo{border-style:dashed;color:rgba(255,255,255,.2)}
.z5{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;border-top:1px solid rgba(255,255,255,.14);padding-top:12px}
@container (max-width:430px){.z2 .arrow{font-size:22px}.z1{padding-right:90px}.stamp{right:22px;top:66px;font-size:12px}}
@media (prefers-reduced-motion:reduce){.rc-dossier,.rc-owner,.z,.ladder div,.ladder .pin,.ladder .track,.rc-scrim,.card,.oh{transition:none!important;animation:none!important;transform:none!important;filter:none!important;opacity:1}.rc-dossier::after{display:none}}

/* ---------- phone ---------- */
@media (max-width:720px){
  .mat{margin:0 -8px;padding:24px 8px 28px}
  .rc-hero{grid-template-columns:1fr}
  .pins{justify-self:start;gap:18px;min-height:0}
  .pin .card{width:130px;height:114px}
  .strip{gap:10px}
  .tabs button{padding:8px 18px 8px 12px;font-size:13px}
}

/* ---------- home slab: the week's No. 1 steal and No. 1 bust, as real tiles ---------- */
.rc-slab{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px 28px;align-items:center;padding:18px 20px;border:1px solid var(--steel-3);border-radius:4px;background:var(--ink-1);text-decoration:none;color:inherit;transition:border-color .2s}
.rc-slab:hover{border-color:var(--gold-lo);text-decoration:none}
.rc-slab .rc-slab-head{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.05em;font-size:clamp(22px,2.6vw,30px);line-height:1;color:var(--paper);margin:0 0 6px}
.rc-slab:hover .rc-slab-head{color:var(--gold-hi)}
.rc-slab .rc-slab-line{color:var(--steel-5);font-size:13.5px;margin:0}
.rc-slab .rc-slab-line b{color:var(--paper);font-weight:600}
.rc-slab .rc-slab-cta{display:inline-block;margin-top:10px;font-family:var(--font-display);text-transform:uppercase;letter-spacing:.16em;font-size:11px;color:var(--gold)}
.rc-slab .rc-slab-tiles{display:flex;gap:18px;align-items:flex-end}
.rc-slab .rc-slab-tile{display:flex;flex-direction:column;gap:6px;align-items:center}
.rc-slab .rc-slab-tile .label{font-family:var(--fm);font-size:14px;letter-spacing:0;text-transform:none;color:#f4ecd6;transform:rotate(-2deg)}
.rc-slab .rc-slab-tile.bust .label{color:#ffb8a0}
.rc-slab .card{width:110px;cursor:default}
.rc-slab .card:hover{transform:rotate(var(--tilt,0deg));box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 7px 14px rgba(0,0,0,.5)}
@media (max-width:720px){.rc-slab{grid-template-columns:1fr}.rc-slab .rc-slab-tiles{justify-content:flex-start}}

/* ---------- the home hero: the week's steal and bust pinned under the champion line, the stamps landing ---------- */
.hero-rc{display:flex;gap:34px;align-items:flex-end;justify-content:center;margin:18px auto 6px;text-decoration:none;color:inherit;animation:wire-in .9s .4s ease both}
.hero-rc:hover{text-decoration:none}
.hero-rc .pin .card{width:150px;height:130px;padding:9px 10px 8px 22px}
.hero-rc .pin .card::before{width:14px;background:linear-gradient(90deg,var(--tc,var(--steel-4)) 0 11px,var(--tc2,var(--steel-5)) 11px 14px)}
.hero-rc .pin .card .name{font-size:19px}.hero-rc .pin .card .name .l1{padding-right:34px}.hero-rc .pin .card .rk{font-size:21px}.hero-rc .pin .card .pts{font-size:13px}.hero-rc .pin .card .letter{font-size:46px}.hero-rc .pin .card .ab{font-size:12px;right:9px;top:7px}
.hero-rc .pin .card .stamp-t{display:block;opacity:0}   /* the board's pins hide their stamps; the home hero's land */
.hero-rc .pin .card .stamp-t.value{animation:slam-stamp-gold .6s 1.3s cubic-bezier(.2,1.1,.3,1) both}
.hero-rc .pin .card .stamp-t.reach{animation:slam-stamp .6s 1.7s cubic-bezier(.2,1.1,.3,1) both}
.hero-rc .pin:hover .card .stamp-t.value{animation:slam-stamp-gold .6s cubic-bezier(.2,1.1,.3,1) both}
.hero-rc .pin:hover .card .stamp-t.reach{animation:slam-stamp .6s cubic-bezier(.2,1.1,.3,1) both}
.hero-rc .cta{font:600 11px var(--font-body);letter-spacing:.2em;text-transform:uppercase;color:var(--gold);text-shadow:0 1px 2px rgba(0,0,0,.9);align-self:center;white-space:nowrap}
.hero-rc .cta b{display:block;font:800 22px var(--fc);font-style:italic;letter-spacing:.02em;color:#fff;margin-bottom:6px}
.hero-rc .cta i{font-style:normal;color:var(--gold-hi);transition:transform .25s;display:inline-block}
.hero-rc:hover .cta i{transform:translateX(4px)}
@keyframes wire-in{from{opacity:0}to{opacity:1}}   /* opacity only: the hero owns transform on its children */
@media (max-width:720px){.hero-rc{gap:16px;flex-wrap:wrap}.hero-rc .pin .card{width:130px;height:114px}.hero-rc .cta{width:100%;text-align:center}}
@media (prefers-reduced-motion:reduce){.hero-rc{animation:none;opacity:1}.hero-rc .pin .card .stamp-t{animation:none!important;opacity:1}}

/* the season: one button turns the board over (lab 22, option 2) */
.rc{perspective:1600px}
.turn{margin-left:auto;font:800 14px var(--fc);letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--gold);background:linear-gradient(180deg,rgba(201,163,55,.18),rgba(201,163,55,.04));color:var(--gold-hi);padding:9px 16px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;clip-path:polygon(10px 0,100% 0,100% 100%,0 100%,0 10px)}
.turn i{font-style:normal;font-size:16px;line-height:1}
.turn:hover{background:var(--gold-lo);color:#fff}
.turn.back{border-color:rgba(201,163,55,.45);background:rgba(0,0,0,.42);color:var(--gold-hi)}
.turn[hidden]{display:none}
.mat,.pins{transition:transform .3s ease-in,opacity .3s ease-in;transform-origin:50% 40%}
.mat.turning,.pins.turning{transform:rotateX(90deg);opacity:.15}
@media (prefers-reduced-motion:reduce){.mat,.pins{transition:none}.mat.turning,.pins.turning{transform:none;opacity:1}}
.rc-dossier .z5 .weeks{display:flex;gap:6px;margin-top:6px}
.rc-dossier .z5 .weeks span{width:30px;height:30px;border:1px solid rgba(255,255,255,.18);border-radius:3px;display:grid;place-items:center;font-family:var(--fm);font-size:16px;color:#f4ecd6}
.rc-dossier .z5 .weeks span.a{color:var(--gold-hi);border-color:var(--gold)}.rc-dossier .z5 .weeks span.f{color:#ff4b3a;border-color:#ff4b3a}.rc-dossier .z5 .weeks span.todo{border-style:dashed;color:rgba(255,255,255,.35)}