/* Inter for body copy only — names and rank numerals keep the system stack.
   Self-hosted (latin subset, variable) so the page makes no third-party
   request; swap the file to change weights. */
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('/fonts/inter-latin-var.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
:root{--pr-rank-size:34px}
.mode-pr{background:linear-gradient(165deg,#121122 0%,#131228 55%,#17142F 100%);color:var(--jfl-cream);min-height:100vh}
.pr-hero{padding:40px 22px 8px;max-width:880px;margin:0 auto}
.pr-hero-lock{display:flex;align-items:center;gap:16px}
.pr-hero-lock h1{min-width:0}
.jfl-crest{display:block;flex:0 0 auto;width:auto}
.pr-mast .jfl-crest{margin-left:auto;height:30px}
.pr-hero-lock .jfl-crest{height:calc(clamp(38px,8vw,54px)*0.95)}
.pr-hero h1{font-size:clamp(38px,8vw,54px);text-transform:uppercase;font-style:italic;letter-spacing:-.5px;margin:0}
.pr-soon{color:rgba(245,244,235,.6);font-size:14px;margin-top:10px}
.pr-mast-wrap{max-width:880px;margin:28px auto 0;padding:0 22px}
.pr-mast{display:flex;align-items:flex-end;gap:12px;border-bottom:3px solid var(--jfl-purple-bright);padding-bottom:8px}
.pr-mast-text{display:flex;flex-direction:column;gap:3px;min-width:0}
.pr-mast .wk{font-size:30px;font-weight:900;letter-spacing:-.5px;text-transform:uppercase;font-style:italic}
.pr-mast .t{font-size:11.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--jfl-light-purple);font-weight:800;line-height:1}
.pr-mast .d{margin-left:auto;font-size:11px;color:rgba(245,244,235,.5)}
/* ---- Editions rail ------------------------------------------------------
   Same shape as the Constitution's contents rail: a fixed-width column beside
   the article on wide screens, a sticky disclosure above it on narrow ones.
   The article keeps its own 880px measure inside .pr-stage, so the rail only
   ever changes *horizontal* layout — the reveal's FLIP reads vertical
   positions and stays honest. */
.pr-shell{display:flex;align-items:flex-start;gap:26px;max-width:1178px;margin:0 auto}
.pr-stage{flex:1 1 auto;min-width:0;max-width:880px}
.pr-rail{width:192px;flex:0 0 auto;position:sticky;top:16px;padding:32px 0 0 22px;
  font-family:'Inter',system-ui,sans-serif}
.pr-rail .label{font-size:9px;letter-spacing:.16em;text-transform:uppercase;font-weight:800;
  color:var(--jfl-light-purple);margin-bottom:9px;padding-left:9px}
.pr-rail a{display:block;text-decoration:none;padding:7px 9px;margin-bottom:2px;
  border-radius:7px;border-left:2px solid transparent}
.pr-rail a .e{display:block;font-size:12.5px;font-weight:700;line-height:1.25;
  color:rgba(245,244,235,.72)}
.pr-rail a .d{display:block;font-size:10px;color:rgba(245,244,235,.36);margin-top:2px}
.pr-rail a:hover{background:rgba(255,255,255,.05)}
.pr-rail a:hover .e{color:rgba(245,244,235,.94)}
.pr-rail a.active{background:rgba(123,51,245,.16);border-left-color:var(--jfl-purple-bright)}
.pr-rail a.active .e{color:var(--jfl-cream)}
/* Narrow: the rail becomes a scrollable chip row above the masthead. No
   disclosure and no script — a breakpoint cannot leave the archive stuck
   closed the way a parse-time `<details>` toggle did. */
@media(max-width:900px){
  .pr-shell{flex-direction:column;gap:0;max-width:none}
  .pr-stage{max-width:none;width:100%}
  .pr-rail{width:auto;position:static;display:flex;align-items:center;gap:6px;
    padding:16px 22px 0;overflow-x:auto;scrollbar-width:none}
  .pr-rail::-webkit-scrollbar{display:none}
  .pr-rail .label{display:none}
  .pr-rail a{flex:0 0 auto;margin:0;padding:5px 11px;border-left:0;border-radius:999px;
    background:rgba(255,255,255,.06)}
  .pr-rail a .e{font-size:11.5px;white-space:nowrap}
  .pr-rail a .d{display:none}
  .pr-rail a.active{background:rgba(123,51,245,.34);border-left:0}
}
.pr-wrap{max-width:880px;margin:14px auto 0;padding:0 22px 44px}
.pr-intro{font-family:'Inter',system-ui,sans-serif;color:rgba(245,244,235,.82);font-size:16.5px;line-height:1.62;margin:6px 0 18px}
.pr-card{display:grid;grid-template-columns:62px 1fr;gap:15px;align-items:start;padding:14px 16px;border-radius:10px;background:rgba(255,255,255,.03);margin-bottom:9px;border-left:4px solid var(--sp,var(--tc))}
.pr-rank{text-align:center}
.pr-rank .pr-num{font-size:var(--pr-rank-size);font-weight:900;line-height:1}
.pr-mv{font-size:14px;font-weight:800;display:block;margin-top:3px}
.pr-mv.up{color:#57F26B}.pr-mv.dn{color:#F2685C}.pr-mv.ev{color:rgba(245,244,235,.4)}.pr-mv.new{color:var(--jfl-light-purple)}
/* Name and season line share a row. The row carries the min-height that keeps
   the name optically centred against the rank numeral. */
.pr-nmrow{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;min-height:var(--pr-rank-size)}
.pr-mid .nm{font-size:19px;font-weight:800;color:var(--tc);line-height:1.15}
.pr-mid .bl{font-family:'Inter',system-ui,sans-serif;font-size:15px;color:rgba(245,244,235,.78);margin-top:0;line-height:1.55}
.pr-meta{display:inline-flex;align-items:baseline;gap:6px;white-space:nowrap;
  font-variant-numeric:tabular-nums;font-size:12.5px;font-weight:700;
  padding-bottom:1px}
.pr-meta .dot{color:rgba(245,244,235,.28)}
.pr-meta .rec{font-weight:800}
.pr-meta .rec .w{color:#57F26B}
.pr-meta .rec .l{color:#F2685C}
.pr-meta .rec .dash{color:rgba(245,244,235,.3);margin:0 2px}
.pr-meta .stk{font-weight:800}
.pr-meta .stk.w{color:#57F26B}
.pr-meta .stk.l{color:#F2685C}
.pr-meta .pf{color:rgba(245,244,235,.5);font-weight:600}
.pr-h2{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--jfl-light-purple);font-weight:800;margin:26px 0 12px;border-bottom:2px solid var(--jfl-purple-bright);padding-bottom:6px}
.pr-empty{color:rgba(245,244,235,.5);font-size:14px;font-style:italic;padding:6px 0}
.pr-tc{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.09);border-radius:12px;overflow:hidden;margin-bottom:10px}
.pr-tc-body{display:grid;grid-template-columns:1fr 44px 1fr}
.pr-tc-stack{display:flex;flex-direction:column}
.pr-tc-side{padding:14px}
.pr-tc-side.r{text-align:right}
.pr-tc-top{display:flex;align-items:center;gap:9px;margin-bottom:9px}
.pr-tc-side.r .pr-tc-top{flex-direction:row-reverse}
.pr-tc-nm{font-size:17px;font-weight:900}
.grade{width:34px;height:30px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:900;color:#12102a;flex:0 0 auto}
.pr-tc-gets{font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:rgba(245,244,235,.4);font-weight:700;margin-bottom:5px}
.pr-asset{font-size:13px;font-weight:600;padding:2px 0}
.pr-tc-swap{display:flex;align-items:center;justify-content:center;font-size:20px;color:rgba(245,244,235,.35);border-left:1px solid rgba(255,255,255,.08);border-right:1px solid rgba(255,255,255,.08)}
.pr-tc-take{border-top:1px solid rgba(255,255,255,.08);padding:11px 14px;font-size:12.5px;color:rgba(245,244,235,.8);line-height:1.4}
.pr-tc-take b{color:var(--jfl-light-purple);font-weight:700}
@media(max-width:520px){.pr-card{grid-template-columns:44px 1fr;gap:10px}.pr-stats{grid-column:2;text-align:left;margin-top:4px}.pr-tc-body{grid-template-columns:1fr}.pr-tc-swap{display:none}.pr-tc-side.r{text-align:left}.pr-tc-side.r .pr-tc-top{flex-direction:row}}

/* ---- Reveal: lottery board -> final board -------------------------------
   Default styles below are the FINISHED state, so a reader without JS gets
   the whole article. `.pr-stage.armed` (set synchronously during parse) is
   the pre-reveal state; `.revealed` returns to the finished one. */
.pr-board{display:flex;flex-direction:column}
.pr-card{will-change:transform}
.pr-num{position:relative;display:block;height:1em;overflow:hidden}
.pr-num .v{position:absolute;left:0;right:0;top:0;display:flex;align-items:center;justify-content:center}
.pr-num .prev{opacity:0;transform:translateY(-100%)}
.pr-num .final{opacity:1;transform:translateY(0)}
/* Collapsed with an explicit height rather than the 0fr/1fr grid trick: the
   fr track refuses to size to content at this nesting depth and stays 0. The
   reveal measures and drives these heights directly. */
.bl-wrap{overflow:hidden}
.pr-word{overflow:hidden}
.pr-roll{display:inline-block;overflow:hidden;vertical-align:bottom;height:1.05em}
.pr-roll-track{display:flex;flex-direction:column;transform:translateY(-50%)}
.pr-roll-track>span{height:1.05em;line-height:1.05em;white-space:nowrap}
.pr-reveal{display:none}

/* --- armed: the board as the lottery left it --- */
.pr-stage.armed .pr-num .prev{opacity:1;transform:translateY(0)}
.pr-stage.armed .pr-num .final{opacity:0;transform:translateY(100%)}
.pr-stage.armed .bl-wrap{height:0}
.pr-stage.armed .pr-word{height:0}
.pr-stage.armed .pr-roll-track{transform:translateY(0)}
.pr-stage.armed .pr-mv{opacity:0}
/* The season line keeps its box while armed and only fades in at settle, so
   the tiles never change height mid-flight. */
.pr-stage.armed .pr-meta{opacity:0}
.pr-stage.armed .pr-after{opacity:0;transform:translateY(14px)}
.pr-stage.armed .pr-reveal{display:inline-block;margin-top:12px;cursor:pointer;
  font:700 13px/1 inherit;letter-spacing:.12em;text-transform:uppercase;color:#140A26;
  background:var(--jfl-purple-bright);border:0;border-radius:8px;padding:11px 18px;
  box-shadow:0 6px 20px rgba(123,51,245,.35)}
.pr-stage.armed .pr-reveal:hover{filter:brightness(1.08)}
.pr-stage.armed.running .pr-reveal{opacity:0;pointer-events:none;transition:opacity .18s ease}

/* --- transitions, applied only once the reveal is under way --- */
.pr-stage.running .pr-num .v,
.pr-stage.revealed .pr-num .v{transition:transform .52s cubic-bezier(.22,1,.36,1) var(--roll,0ms),opacity .4s ease var(--roll,0ms)}
.pr-stage.running .pr-roll-track,
.pr-stage.revealed .pr-roll-track{transition:transform .62s cubic-bezier(.22,1,.36,1)}
.pr-stage.running .pr-after,
.pr-stage.revealed .pr-after{transition:opacity .5s ease,transform .5s cubic-bezier(.22,1,.36,1)}
.pr-stage.revealed .pr-after{opacity:1;transform:none}

/* Badges slide in from the direction the team travelled. */
.pr-stage.armed .pr-mv{transform:translateY(10px)}
.pr-stage.armed .pr-card[data-dir="dn"] .pr-mv{transform:translateY(-10px)}
.pr-stage.running .pr-mv,
.pr-stage.revealed .pr-mv{transition:opacity .34s ease var(--roll,0ms),transform .34s cubic-bezier(.22,1,.36,1) var(--roll,0ms)}
.pr-stage.revealed .pr-mv{opacity:1;transform:none}
.pr-stage.running .pr-meta,
.pr-stage.revealed .pr-meta{transition:opacity .34s ease var(--roll,0ms)}
.pr-stage.revealed .pr-meta{opacity:1}

/* Glow while a card is in flight: green climbing, red falling. */
.pr-card.moving[data-dir="up"]{box-shadow:0 0 0 1px rgba(87,242,107,.5),0 6px 26px rgba(87,242,107,.22)}
.pr-card.moving[data-dir="dn"]{box-shadow:0 0 0 1px rgba(242,104,92,.5),0 6px 26px rgba(242,104,92,.22)}
.pr-card.landed{animation:pr-thud .19s ease-out}
.pr-card{transform-origin:50% 100%}
@keyframes pr-thud{0%{scale:1 .94}60%{scale:1 1.02}100%{scale:1 1}}

@media(prefers-reduced-motion:reduce){
  .pr-stage.armed .pr-num .prev{opacity:0}
  .pr-stage.armed .pr-num .final{opacity:1;transform:none}
  .pr-stage.armed .bl-wrap,.pr-stage.armed .pr-word{height:auto}
  .pr-stage.armed .pr-roll-track{transform:translateY(-50%)}
  .pr-stage.armed .pr-mv{opacity:1;transform:none}
  .pr-stage.armed .pr-meta{opacity:1}
  .pr-stage.armed .pr-after{opacity:1;transform:none}
  .pr-stage.armed .pr-reveal{display:none}
  .pr-card,.pr-num .v,.bl-wrap,.pr-word,.pr-roll-track,.pr-mv,.pr-meta{transition:none!important}
  .bl-wrap,.pr-word{height:auto!important}
  .pr-card.landed{animation:none}
}