/* The Big Dawgs League - "The Kennel"
   Design system. See DESIGN.md for the rules this file implements.

   Materials first: walnut panelling, aged brass hardware, pigskin leather,
   parchment under glass. Every page is an object mounted in that room, which
   is what stops thirteen pages reading as one repeated card-wrapping-a-table.

   Layer order below is deliberate and worth keeping:
     tokens -> materials -> primitives -> page objects -> motion -> responsive
   Materials are defined once and reused; if walnut ever needs to change it
   changes in exactly one place. */

/* ------------------------------------------------------------------ 1 TOKENS */

:root {
  /* materials - grounds, not accents */
  --walnut:        #3B2A1E;
  --walnut-deep:   #241811;
  --walnut-lit:    #4E3928;
  --navy:          #0B3C8C;
  --navy-deep:     #072A63;
  --pigskin:       #8B4A2B;
  --pigskin-deep:  #5C2E19;
  --turf:          #1E5B33;

  /* the single accent */
  --brass:         #C9A227;
  --brass-lit:     #F0D67A;
  --brass-ox:      #7A5F16;

  /* reading surfaces */
  --parchment:     #F4EFE3;
  --parchment-2:   #EDE5D4;
  --parchment-rule:#DCD2BE;
  --lace:          #EDE6D6;

  /* ink */
  --ink:           #141110;
  --ink-muted:     #6B5C4E;
  --bone:          #EFE7DA;
  --bone-muted:    #A79781;

  /* semantic */
  --gold:          #EDA100;
  --win:           #2F7A4B;
  --loss:          #A63D2F;

  /* positions - shared with the C# draft assistant */
  --pos-qb: #7B3FA0;
  --pos-rb: #1B7A43;
  --pos-wr: #1F5FA8;
  --pos-te: #C06214;

  /* collar tags, indexed by the deterministic dog_index already on each record */
  --tag-0: #C9A227; --tag-1: #1F5FA8; --tag-2: #1B7A43; --tag-3: #C06214;
  --tag-4: #7B3FA0; --tag-5: #2E8B8B; --tag-6: #A63D2F; --tag-7: #8B6B2B;
  --tag-8: #4A6B8A; --tag-9: #7A3F5C;

  /* type */
  --display: "Fraunces", "Iowan Old Style", serif;
  --data: "Barlow Condensed", "Oswald", sans-serif;
  --body: "Barlow", "Helvetica Neue", sans-serif;

  /* hardware: bevels, not soft corners */
  --bevel: 3px;
  --bevel-lg: 5px;

  --shadow-plate: 0 2px 4px rgba(20, 17, 16, .4), 0 8px 20px rgba(20, 17, 16, .3);
  --shadow-lift:  0 6px 12px rgba(20, 17, 16, .45), 0 18px 40px rgba(20, 17, 16, .38);
  --shadow-inset: inset 0 2px 6px rgba(20, 17, 16, .55);

  --ease: cubic-bezier(.22, .61, .36, 1);
  --gap-section: clamp(3rem, 8vw, 6rem);
  --maxw: 1240px;
}

/* Lights down. The room does not invert, it dims. */
@media (prefers-color-scheme: dark) {
  :root {
    --walnut:      #2C1F16;
    --walnut-deep: #190F0A;
    --walnut-lit:  #3B2A1E;
    --parchment:   #E8DFCC;
    --parchment-2: #DED3BC;
    --brass:       #B8942A;
    --brass-lit:   #DCC169;
    --bone:        #E3D9C9;
    --bone-muted:  #94836D;
  }
}

/* ------------------------------------------------------------- 2 MATERIALS */

/* Walnut: stacked grain at low opacity over a deep base, plus a vertical
   sheen. Layered rather than a flat brown fill - that flatness is the failure
   mode of every warm-wood interface. */
.m-walnut {
  background-color: var(--walnut);
  background-image:
    linear-gradient(96deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,0) 38%,
                           rgba(0,0,0,.16) 78%, rgba(0,0,0,.26) 100%),
    repeating-linear-gradient(91deg,
      rgba(0,0,0,.16) 0px, rgba(0,0,0,0) 2px, rgba(255,255,255,.035) 5px,
      rgba(0,0,0,0) 9px, rgba(0,0,0,.10) 13px, rgba(0,0,0,0) 17px),
    repeating-linear-gradient(89.4deg,
      rgba(0,0,0,.10) 0px, rgba(0,0,0,0) 31px, rgba(255,255,255,.025) 47px,
      rgba(0,0,0,0) 73px);
}

/* Brass: a three-stop specular ramp so the plate catches light along one edge.
   --sweep is animated on hover; it is a background-position proxy expressed as
   a gradient angle offset, so nothing but transform/opacity ever animates. */
.m-brass {
  background-image: linear-gradient(104deg,
    var(--brass-ox) 0%, var(--brass) 18%, var(--brass-lit) 34%,
    var(--brass) 52%, var(--brass-ox) 88%);
  background-size: 260% 100%;
  background-position: 40% 0;
  color: var(--walnut-deep);
}

.m-parchment {
  background-color: var(--parchment);
  background-image:
    radial-gradient(120% 90% at 12% 0%, rgba(255,255,255,.5), rgba(255,255,255,0) 60%),
    linear-gradient(180deg, rgba(139,74,43,.05), rgba(139,74,43,.11));
  color: var(--ink);
}

/* Leather: pigskin ground with a dashed lace border inset as stitching.
   Pure CSS - no image, so it stays sharp at any size and costs nothing. */
.m-leather {
  background-color: var(--pigskin);
  background-image:
    radial-gradient(circle at 22% 18%, rgba(255,255,255,.07) 0 1px, transparent 1px),
    radial-gradient(circle at 68% 62%, rgba(0,0,0,.12) 0 1.5px, transparent 1.5px),
    linear-gradient(160deg, rgba(255,255,255,.06), rgba(0,0,0,.24));
  background-size: 9px 9px, 13px 13px, 100% 100%;
  color: var(--lace);
  position: relative;
}
.m-leather::after {
  content: "";
  position: absolute;
  inset: 7px;
  border: 2px dashed rgba(237,230,214,.55);
  border-radius: var(--bevel);
  pointer-events: none;
}

/* Felt: the trophy-case shelf. */
.m-felt {
  background-color: var(--turf);
  background-image:
    repeating-linear-gradient(45deg, rgba(0,0,0,.07) 0 2px, rgba(255,255,255,.03) 2px 4px),
    linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.42));
}

/* ------------------------------------------------------------ 3 FOUNDATION */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--bone);
  background-color: var(--walnut-deep);
  background-image:
    linear-gradient(96deg, rgba(255,255,255,.045) 0%, rgba(0,0,0,.22) 100%),
    repeating-linear-gradient(91deg,
      rgba(0,0,0,.18) 0px, rgba(0,0,0,0) 3px, rgba(255,255,255,.03) 6px,
      rgba(0,0,0,0) 11px, rgba(0,0,0,.10) 15px, rgba(0,0,0,0) 20px);
  overflow-x: hidden;
}

/* Fine grain over everything, fixed so it never scrolls with content. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: .16;
  background-image:
    repeating-linear-gradient(0deg, rgba(0,0,0,.5) 0 1px, transparent 1px 3px);
  mix-blend-mode: overlay;
}

h1, h2, h3 { font-family: var(--display); font-weight: 600; letter-spacing: -.02em; margin: 0; }

a { color: var(--brass); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--brass-lit); }

:focus-visible {
  outline: 2px solid var(--brass-lit);
  outline-offset: 3px;
}

.num { font-variant-numeric: tabular-nums; font-family: var(--data); }

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 clamp(1rem, 3vw, 2rem) 5rem;
}

/* Section heading: a chalked yard line with an engraved label sitting on it. */
.section-title {
  font-family: var(--data);
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--brass);
  margin: var(--gap-section) 0 1.25rem;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 1rem;
}
.section-title::after {
  content: "";
  height: 1px;
  background-image: repeating-linear-gradient(90deg,
    rgba(237,230,214,.30) 0 14px, transparent 14px 24px);
}
.section-title .sub {
  font-size: .78rem;
  letter-spacing: .1em;
  color: var(--bone-muted);
}

/* --------------------------------------------------------------- 4 MASTHEAD */

/* Left-weighted. The mascot is mounted on the panelling at the right; no text
   ever overlaps him. */
.masthead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(150px, 22vw, 260px);
  align-items: end;
  gap: clamp(1rem, 4vw, 3rem);
  padding: clamp(2rem, 5vw, 3.5rem) clamp(1.25rem, 3vw, 2.5rem) 0;
  margin: 0 0 1.5rem;
  border-bottom: 3px solid var(--brass-ox);
  position: relative;
}
.masthead::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 3px;
  background: linear-gradient(90deg, transparent, rgba(201,162,39,.45) 20%,
              rgba(201,162,39,.45) 80%, transparent);
}

.wordmark {
  font-family: var(--display);
  font-size: clamp(2.1rem, 6.2vw, 4.1rem);
  font-weight: 700;
  line-height: .96;
  letter-spacing: -.03em;
  color: var(--bone);
  margin: 0 0 .5rem;
  text-wrap: balance;
}
.wordmark .est {
  display: block;
  font-family: var(--data);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: .7rem;
  letter-spacing: .3em;
}
.masthead-note {
  font-family: var(--data);
  font-size: 1rem;
  letter-spacing: .04em;
  color: var(--bone-muted);
  max-width: 46ch;
  margin: 0 0 1.5rem;
}
.masthead-note strong { color: var(--bone); font-weight: 600; }

.crest {
  justify-self: end;
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 10px 18px rgba(20,17,16,.55));
}

/* ------------------------------------------------------------------- 5 NAV */

/* A brass rail. Tabs are engraved labels; the active one is a lit plate. */
.rail {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 4px;
  margin: 0 0 var(--gap-section);
  border: 1px solid rgba(201,162,39,.28);
  border-radius: var(--bevel);
  background: linear-gradient(180deg, rgba(0,0,0,.34), rgba(0,0,0,.14));
  box-shadow: var(--shadow-inset);
}
.rail a {
  font-family: var(--data);
  font-size: .88rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .1em;
  text-decoration: none;
  color: var(--bone-muted);
  padding: 0 .85rem;
  min-height: 44px;              /* touch target */
  display: inline-flex;
  align-items: center;
  border-radius: 2px;
  transition: color .22s var(--ease), background-color .22s var(--ease);
}
.rail a:hover { color: var(--brass-lit); background: rgba(201,162,39,.10); }
.rail a.active {
  color: var(--walnut-deep);
  font-weight: 600;
  background-image: linear-gradient(104deg,
    var(--brass-ox) 0%, var(--brass) 22%, var(--brass-lit) 46%, var(--brass) 74%, var(--brass-ox) 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,.28) inset, 0 2px 5px rgba(0,0,0,.45);
}

/* ------------------------------------------------------------ 6 PRIMITIVES */

/* .plate - engraved brass on walnut, four screws. The manager identity object. */
.plate {
  position: relative;
  border-radius: var(--bevel);
  padding: 1rem 1.35rem;
  box-shadow: var(--shadow-plate);
  border-top: 1px solid rgba(255,255,255,.34);
  border-bottom: 1px solid rgba(0,0,0,.42);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease),
              background-position .5s var(--ease);
}
.plate:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.plate.m-brass:hover { background-position: 72% 0; }

/* screws */
.plate::before, .plate::after {
  content: "";
  position: absolute;
  top: 7px; bottom: 7px;
  width: 6px;
  background-image:
    radial-gradient(circle at 50% 6px, rgba(0,0,0,.45) 0 2.5px, transparent 2.5px),
    radial-gradient(circle at 50% calc(100% - 6px), rgba(0,0,0,.45) 0 2.5px, transparent 2.5px);
  background-repeat: no-repeat;
  pointer-events: none;
}
.plate::before { left: 7px; }
.plate::after  { right: 7px; }

/* Engraved text: dark cut with a 1px light offset below, so it reads as
   incised metal rather than printed ink. */
.engraved {
  color: var(--brass-ox);
  text-shadow: 0 1px 0 rgba(255,255,255,.42);
}
.engraved-light {
  color: var(--brass);
  text-shadow: 0 1px 2px rgba(0,0,0,.7);
}

/* .frame - a document under glass, walnut moulding with a bevel. */
.frame {
  border: 10px solid var(--walnut-lit);
  border-radius: var(--bevel-lg);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.6),
    inset 0 0 0 1px rgba(255,255,255,.10),
    var(--shadow-plate);
  background-image: linear-gradient(148deg, rgba(255,255,255,.07), rgba(0,0,0,.16));
  overflow: hidden;
}

/* .panel - a leather section. */
.panel {
  border-radius: var(--bevel-lg);
  padding: clamp(1.25rem, 3vw, 2rem);
  box-shadow: var(--shadow-plate);
}

/* .tag - collar tag, per-manager colour chip. */
.tag {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--tag, var(--brass));
  box-shadow: 0 0 0 1px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.4);
  flex: none;
}
.tag-lg { width: 14px; height: 14px; }

/* .ledger - ruled rows on parchment. Replaces card+table everywhere the
   content is genuinely tabular. Scrolls inside itself, never the page. */
.ledger-wrap {
  overflow-x: auto;
  border-radius: var(--bevel);
  -webkit-overflow-scrolling: touch;
}
table.ledger {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--body);
  background: transparent;
}
table.ledger thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  font-family: var(--data);
  font-size: .78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .12em;
  text-align: left;
  padding: .7rem .9rem;
  color: var(--walnut-deep);
  background-image: linear-gradient(180deg, var(--brass-lit), var(--brass) 60%, var(--brass-ox));
  border-bottom: 2px solid var(--brass-ox);
  white-space: nowrap;
}
table.ledger td {
  padding: .72rem .9rem;
  border-bottom: 1px solid var(--parchment-rule);
  vertical-align: top;
  color: var(--ink);
}
table.ledger tbody tr:nth-child(even) td { background: rgba(139,74,43,.045); }
table.ledger tbody tr:hover td { background: rgba(201,162,39,.15); }
table.ledger tbody tr:last-child td { border-bottom: none; }
table.ledger .term {
  font-family: var(--data);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--pigskin-deep);
  white-space: nowrap;
}
table.ledger .n { font-family: var(--data); font-variant-numeric: tabular-nums; font-size: 1.05rem; }
table.ledger ul { margin: 0; padding-left: 1.1rem; }
table.ledger li { margin: .3rem 0; }
table.ledger li::marker { color: var(--brass-ox); }

/* Paw-print bullets for prose lists outside the ledger. */
ul.paws { list-style: none; padding-left: 1.9rem; margin: .5rem 0; }
ul.paws li { position: relative; margin: .55rem 0; }
ul.paws li::before {
  content: "";
  position: absolute;
  left: -1.5rem; top: .55em;
  width: 11px; height: 9px;
  background-image:
    radial-gradient(ellipse 4px 5px at 50% 78%, currentColor 60%, transparent 62%),
    radial-gradient(ellipse 1.6px 2.2px at 14% 22%, currentColor 60%, transparent 62%),
    radial-gradient(ellipse 1.6px 2.2px at 40% 8%,  currentColor 60%, transparent 62%),
    radial-gradient(ellipse 1.6px 2.2px at 68% 12%, currentColor 60%, transparent 62%);
  color: var(--brass);
  opacity: .85;
}

/* Empty states: composed and honest. Never a zeroed table. */
.empty-state {
  display: grid;
  gap: .6rem;
  padding: clamp(1.6rem, 4vw, 2.6rem);
  border: 1px dashed rgba(201,162,39,.4);
  border-radius: var(--bevel-lg);
  background: rgba(0,0,0,.2);
  text-align: left;
}
.empty-state .es-title {
  font-family: var(--display);
  font-size: 1.3rem;
  color: var(--bone);
}
.empty-state .es-body { color: var(--bone-muted); max-width: 58ch; margin: 0; }
.empty-state .es-when {
  font-family: var(--data);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .82rem;
  color: var(--brass);
}

/* Pennant - season labels, felt. */
.pennant {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--data);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .84rem;
  color: var(--lace);
  padding: .3rem 1.6rem .3rem .8rem;
  background: var(--turf);
  background-image: repeating-linear-gradient(45deg, rgba(0,0,0,.08) 0 2px, rgba(255,255,255,.03) 2px 4px);
  clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 50%, 100% 100%, 0 100%);
  box-shadow: 0 2px 6px rgba(0,0,0,.4);
}

/* Laces - a divider that reads as a football seam. */
.laces {
  height: 14px;
  margin: 1.1rem 0;
  background-image:
    linear-gradient(90deg, transparent, var(--pigskin-deep) 12%, var(--pigskin-deep) 88%, transparent),
    repeating-linear-gradient(90deg, transparent 0 13px, var(--lace) 13px 15px, transparent 15px 28px);
  background-size: 100% 3px, 100% 14px;
  background-position: center, center;
  background-repeat: no-repeat;
  opacity: .55;
}

/* --------------------------------------------------- 7 PAGE: THE KENNEL ROLL */

/* Standings as door plates down a corridor. */
.roll { display: grid; gap: .6rem; }

.door {
  display: grid;
  grid-template-columns: 3.2rem minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(.6rem, 2vw, 1.4rem);
  text-decoration: none;
  padding: .85rem 1.1rem;
  border-radius: var(--bevel);
  background-image: linear-gradient(100deg, rgba(255,255,255,.06), rgba(0,0,0,.2));
  border: 1px solid rgba(201,162,39,.18);
  border-left: 4px solid var(--tag, var(--brass));
  box-shadow: var(--shadow-plate);
  transition: transform .28s var(--ease), box-shadow .28s var(--ease),
              border-color .28s var(--ease);
}
.door:hover {
  transform: translateX(4px);
  box-shadow: var(--shadow-lift);
  border-color: rgba(201,162,39,.5);
}
.door .seed {
  font-family: var(--display);
  font-size: 1.9rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--brass);
  text-align: center;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(0,0,0,.7);
}
.door .who {
  font-family: var(--display);
  font-size: clamp(1.1rem, 2.4vw, 1.45rem);
  font-weight: 600;
  color: var(--bone);
  display: flex;
  align-items: center;
  gap: .6rem;
  min-width: 0;
}
.door .who .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.door .line {
  font-family: var(--data);
  font-size: .85rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--bone-muted);
  font-variant-numeric: tabular-nums;
}
.door .figures {
  display: flex;
  gap: clamp(.7rem, 2vw, 1.6rem);
  align-items: center;
}
.figure { text-align: right; }
.figure .v {
  font-family: var(--data);
  font-size: 1.25rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--bone);
  line-height: 1.1;
}
.figure .k {
  font-family: var(--data);
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--bone-muted);
}

/* champion door: gold, and the one perpetual micro-loop on the site */
.door.is-champion {
  border-color: rgba(237,161,0,.6);
  background-image: linear-gradient(100deg, rgba(237,161,0,.16), rgba(0,0,0,.24));
}
.door.is-champion .seed { color: var(--gold); }

/* win% as an inlaid brass bar under the name */
.inlay {
  height: 4px;
  margin-top: .35rem;
  border-radius: 2px;
  background: rgba(0,0,0,.4);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.6);
  overflow: hidden;
}
.inlay > i {
  display: block;
  height: 100%;
  width: var(--pct, 0%);
  background-image: linear-gradient(90deg, var(--brass-ox), var(--brass) 40%, var(--brass-lit));
  transform-origin: left center;
}

/* -------------------------------------------------- 8 PAGE: THE TROPHY CASE */

.case {
  position: relative;
  border: 12px solid var(--walnut-lit);
  border-radius: var(--bevel-lg);
  padding: clamp(2rem, 6vw, 4rem) clamp(1.25rem, 4vw, 3rem) 0;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(240,214,122,.20), rgba(0,0,0,0) 62%),
    linear-gradient(180deg, #1a1410, #0d0a08);
  box-shadow:
    inset 0 0 60px rgba(0,0,0,.9),
    0 0 0 1px rgba(0,0,0,.7),
    var(--shadow-lift);
  overflow: hidden;
}
/* glass sheen */
.case::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(114deg,
    rgba(255,255,255,.10) 0%, rgba(255,255,255,.02) 22%,
    rgba(255,255,255,0) 45%, rgba(255,255,255,.05) 68%, rgba(255,255,255,0) 82%);
}
.case-shelf {
  margin: clamp(1.5rem, 4vw, 2.5rem) calc(-1 * clamp(1.25rem, 4vw, 3rem)) 0;
  height: 26px;
  border-top: 2px solid rgba(240,214,122,.25);
  box-shadow: 0 -14px 30px rgba(240,214,122,.10);
}

.trophy-stand {
  display: grid;
  justify-items: center;
  gap: .3rem;
}

/* The trophy: brass cup with a specular ramp, walnut base, engraved plate. */
.trophy { width: clamp(110px, 20vw, 170px); height: auto; display: block; }

.trophy-plate {
  margin-top: -2px;
  padding: .55rem 1.4rem;
  border-radius: 2px;
  text-align: center;
  font-family: var(--display);
  box-shadow: 0 3px 8px rgba(0,0,0,.6);
  border-top: 1px solid rgba(255,255,255,.4);
}
.trophy-plate .yr {
  display: block;
  font-family: var(--data);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .28em;
  text-transform: uppercase;
}
.trophy-plate .champ {
  display: block;
  font-size: clamp(1.15rem, 3vw, 1.6rem);
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.15;
}
.trophy-plate .team {
  display: block;
  font-family: var(--data);
  font-size: .8rem;
  letter-spacing: .08em;
  opacity: .78;
}

/* the vacant shelves - honest about a two-year-old league */
.vacancy {
  display: grid;
  justify-items: center;
  gap: .4rem;
  opacity: .5;
}
.vacancy .socket {
  width: clamp(64px, 12vw, 96px);
  height: clamp(64px, 12vw, 96px);
  border: 1px dashed rgba(240,214,122,.35);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, rgba(240,214,122,.07), transparent 70%);
}
.vacancy .lbl {
  font-family: var(--data);
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--bone-muted);
}

/* --------------------------------------------------- 9 PAGE: AWARD PLAQUES */

/* Asymmetric 12-column hang. Explicitly not three equal cards in a row. */
.plaques {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(.8rem, 2vw, 1.4rem);
  align-items: start;
}
.plaque {
  grid-column: span 4;
  position: relative;
  padding: 1.3rem 1.35rem 1.5rem;
  border-radius: var(--bevel);
  background-image: linear-gradient(155deg, rgba(255,255,255,.07), rgba(0,0,0,.28));
  border: 1px solid rgba(201,162,39,.2);
  border-top: 3px solid var(--acc, var(--brass));
  box-shadow: var(--shadow-plate);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.plaque:hover { transform: translateY(-3px) rotate(-.35deg); box-shadow: var(--shadow-lift); }
/* Widths are classes so the breakpoints below can actually override them. */
.plaque.span-4  { grid-column: span 4; }
.plaque.span-5  { grid-column: span 5; }
.plaque.span-6  { grid-column: span 6; }
.plaque.span-7  { grid-column: span 7; }
.plaque.span-8  { grid-column: span 8; }
.plaque.span-12 { grid-column: span 12; }
.plaque .mark { color: var(--acc, var(--brass)); display: block; margin-bottom: .6rem; }
.plaque .mark svg { display: block; width: 26px; height: 26px; }
.plaque .k {
  font-family: var(--data);
  font-size: .76rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .15em;
  color: var(--bone-muted);
}
.plaque .v {
  font-family: var(--display);
  font-size: clamp(2rem, 5.5vw, 3.4rem);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--bone);
  margin: .2rem 0 .5rem;
}
.plaque.is-lead .v { font-size: clamp(2.6rem, 8vw, 5rem); }
.plaque .ctx {
  font-family: var(--data);
  font-size: .95rem;
  letter-spacing: .03em;
  color: var(--bone-muted);
  line-height: 1.45;
}
.plaque .ctx b { color: var(--bone); font-weight: 600; }

/* --------------------------------------------------- 10 PAGE: THE DRAFT BOARD */

.board-frame {
  border: 12px solid var(--walnut-lit);
  border-radius: var(--bevel-lg);
  box-shadow: 0 0 0 1px rgba(0,0,0,.65), inset 0 0 0 1px rgba(255,255,255,.08), var(--shadow-lift);
  background: var(--navy-deep);
  overflow: hidden;
}
.board-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

table.board {
  border-collapse: collapse;
  width: 100%;
  min-width: 900px;
  background: var(--navy);
  background-image: linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.28));
}
table.board th {
  font-family: var(--data);
  font-size: .82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--lace);
  padding: .7rem .45rem;
  background: var(--navy-deep);
  border: 1px solid rgba(0,0,0,.5);
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 2;
}
table.board th.rd, table.board td.rd {
  width: 2.6rem;
  min-width: 2.6rem;
  text-align: center;
  font-family: var(--data);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--brass);
  background: var(--navy-deep);
  position: sticky;
  left: 0;
  z-index: 1;
  border: 1px solid rgba(0,0,0,.5);
}
table.board th.rd { z-index: 3; }
table.board td.cell {
  border: 1px solid rgba(0,0,0,.5);
  padding: .35rem .5rem;
  min-width: 8.5rem;
  background-image: linear-gradient(180deg, rgba(255,255,255,.09), rgba(0,0,0,.14));
  border-left: 3px solid var(--pc, rgba(255,255,255,.2));
  transition: transform .2s var(--ease), filter .2s var(--ease);
}
table.board td.cell:hover { transform: scale(1.03); filter: brightness(1.18); position: relative; z-index: 4; }
table.board td.cell .pk {
  display: flex;
  justify-content: space-between;
  font-family: var(--data);
  font-size: .68rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: .08em;
  color: rgba(237,230,214,.65);
}
table.board td.cell .pk .pos { color: var(--pc, var(--lace)); font-weight: 700; filter: brightness(1.5); }
table.board td.cell .who {
  font-family: var(--data);
  font-size: .96rem;
  font-weight: 500;
  line-height: 1.15;
  color: var(--lace);
}
table.board td.cell.vacant { background: rgba(0,0,0,.22); border-left-color: rgba(255,255,255,.08); }

.pos-legend { display: flex; gap: .45rem; flex-wrap: wrap; margin-bottom: .9rem; }
.pos-chip {
  font-family: var(--data);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .12em;
  padding: .18rem .6rem;
  border-radius: 2px;
  color: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.5);
}
.pc-qb { background: var(--pos-qb); } .pc-rb { background: var(--pos-rb); }
.pc-wr { background: var(--pos-wr); } .pc-te { background: var(--pos-te); }
.pc-other { background: #5c6670; }

/* ------------------------------------------------ 11 PAGE: BRACKET & LEDGERS */

.bout {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
  align-items: center;
  gap: .8rem;
  padding: .7rem 1rem;
  border-bottom: 1px solid rgba(201,162,39,.16);
  font-family: var(--data);
  font-size: 1.02rem;
}
.bout:last-child { border-bottom: none; }
.bout .side { color: var(--bone-muted); min-width: 0; }
.bout .side.r { text-align: right; }
.bout .side.won { color: var(--bone); font-weight: 600; }
.bout .side .sc {
  font-variant-numeric: tabular-nums;
  color: var(--brass);
  margin: 0 .5rem;
}
.bout .side.won .sc { color: var(--brass-lit); }
.bout .mid {
  font-size: .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--bone-muted);
  opacity: .6;
}
.bout.bye .mid { color: var(--brass); opacity: 1; }

.week-block {
  border: 1px solid rgba(201,162,39,.18);
  border-radius: var(--bevel);
  background: rgba(0,0,0,.18);
  margin-bottom: .5rem;
  overflow: hidden;
}
.week-block > summary {
  cursor: pointer;
  list-style: none;
  padding: .75rem 1.1rem;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: .7rem;
  font-family: var(--data);
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--brass);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.18));
}
.week-block > summary::-webkit-details-marker { display: none; }
.week-block > summary::before {
  content: "";
  width: 0; height: 0;
  border-left: 6px solid currentColor;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transition: transform .25s var(--ease);
}
.week-block[open] > summary::before { transform: rotate(90deg); }
.week-block > summary:hover { color: var(--brass-lit); }
.week-block .bouts { padding: .3rem .4rem .5rem; }

.podium {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .8rem;
  margin-bottom: 1.4rem;
}
.podium .step {
  padding: 1rem;
  border-radius: var(--bevel);
  text-align: center;
  border: 1px solid rgba(201,162,39,.22);
  background-image: linear-gradient(160deg, rgba(255,255,255,.06), rgba(0,0,0,.26));
}
.podium .step.p1 {
  border-color: rgba(237,161,0,.55);
  background-image: linear-gradient(160deg, rgba(237,161,0,.2), rgba(0,0,0,.26));
}
.podium .place {
  font-family: var(--data);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--brass);
}
.podium .step.p1 .place { color: var(--gold); }
.podium .nm { font-family: var(--display); font-size: 1.1rem; font-weight: 600; color: var(--bone); }
.podium .tm { font-family: var(--data); font-size: .8rem; color: var(--bone-muted); }

/* ----------------------------------------------------- 12 PAGE: TEAM STALLS */

.stalls {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: clamp(.8rem, 2vw, 1.3rem);
}
.stall {
  border-radius: var(--bevel);
  border: 1px solid rgba(201,162,39,.18);
  border-top: 4px solid var(--tag, var(--brass));
  background-image: linear-gradient(165deg, rgba(255,255,255,.06), rgba(0,0,0,.26));
  box-shadow: var(--shadow-plate);
  overflow: hidden;
}
.stall-head { padding: .9rem 1.1rem; border-bottom: 1px solid rgba(201,162,39,.16); }
.stall-head .tm {
  font-family: var(--display);
  font-size: 1.12rem;
  font-weight: 600;
  color: var(--bone);
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.stall-head .mg {
  font-family: var(--data);
  font-size: .84rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--bone-muted);
  display: flex;
  align-items: center;
  gap: .45rem;
  margin-top: .2rem;
}
.stall ul { list-style: none; margin: 0; padding: .4rem 0; }
.stall li {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  padding: .34rem 1.1rem;
  font-family: var(--data);
  font-size: .98rem;
  color: var(--bone);
}
.stall li:nth-child(even) { background: rgba(0,0,0,.14); }
.stall li .pro { margin-left: auto; font-size: .78rem; letter-spacing: .1em; color: var(--bone-muted); }
.slot {
  font-family: var(--data);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .1em;
  padding: .08rem .38rem;
  border-radius: 2px;
  color: #fff;
  flex: none;
  min-width: 2.2rem;
  text-align: center;
}

/* ---------------------------------------------------- 13 PAGE: MANAGER DOOR */

.door-hero {
  display: grid;
  grid-template-columns: clamp(150px, 26vw, 220px) minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2.2rem);
  align-items: center;
  padding: clamp(1.2rem, 3vw, 2rem);
  border-radius: var(--bevel-lg);
  background-image: linear-gradient(120deg, rgba(255,255,255,.07), rgba(0,0,0,.3));
  border: 1px solid rgba(201,162,39,.22);
  border-left: 5px solid var(--tag, var(--brass));
  box-shadow: var(--shadow-plate);
}

/* The portrait recess: deliberately empty, sized and ready for the hand-drawn
   manager cartoons. Dropping an <img> in needs no other change. */
.recess {
  aspect-ratio: 1 / 1;
  border-radius: var(--bevel);
  background:
    radial-gradient(circle at 50% 34%, rgba(0,0,0,.5), rgba(0,0,0,.78)),
    var(--walnut-deep);
  box-shadow: var(--shadow-inset), 0 1px 0 rgba(255,255,255,.14);
  display: grid;
  place-items: center;
  overflow: hidden;
  position: relative;
}
.recess img { width: 100%; height: 100%; object-fit: cover; }
.recess .initials {
  font-family: var(--display);
  font-size: clamp(2.2rem, 7vw, 3.6rem);
  font-weight: 700;
  letter-spacing: -.02em;
  color: rgba(201,162,39,.4);
  text-shadow: 0 2px 0 rgba(0,0,0,.6);
}
.recess .waiting {
  position: absolute;
  bottom: .5rem;
  font-family: var(--data);
  font-size: .6rem;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: rgba(167,151,129,.5);
}

.door-hero .nm {
  font-family: var(--display);
  font-size: clamp(1.8rem, 5vw, 3rem);
  font-weight: 700;
  line-height: 1;
  color: var(--bone);
  margin-bottom: .3rem;
}
.door-hero .rec {
  font-family: var(--data);
  font-size: clamp(1.05rem, 2.4vw, 1.3rem);
  letter-spacing: .1em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--brass);
}
.career {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(.8rem, 3vw, 2rem);
  margin-top: .9rem;
  padding-top: .8rem;
  border-top: 1px solid rgba(201,162,39,.2);
}
.career .figure { text-align: left; }

.title-ribbon {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: .7rem;
  padding: .3rem .9rem;
  border-radius: 2px;
  font-family: var(--data);
  font-size: .84rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: #2a1c00;
  background-image: linear-gradient(104deg, #a06d00, var(--gold) 35%, #ffd166 55%, var(--gold) 75%, #a06d00);
  box-shadow: 0 2px 6px rgba(0,0,0,.5);
}

/* facing tiles: best game / worst game */
.facing {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(.7rem, 2vw, 1.2rem);
}
.facing .tile {
  padding: 1.1rem 1.2rem;
  border-radius: var(--bevel);
  border: 1px solid rgba(201,162,39,.18);
  border-top: 3px solid var(--acc, var(--brass));
  background-image: linear-gradient(155deg, rgba(255,255,255,.06), rgba(0,0,0,.26));
}

/* game log sparkline */
.spark { display: block; width: 100%; height: 68px; margin: .4rem 0 1rem; overflow: visible; }

/* ------------------------------------------------------ 14 PAGE: THE PLANNER */

.planner { display: grid; gap: 0; position: relative; }
.planner::before {
  content: "";
  position: absolute;
  left: 6px; top: .6rem; bottom: .6rem;
  width: 2px;
  background-image: repeating-linear-gradient(180deg,
    rgba(237,230,214,.35) 0 8px, transparent 8px 16px);
}
.plan-row {
  display: grid;
  grid-template-columns: 1.5rem minmax(7.5rem, auto) minmax(0, 1fr);
  align-items: baseline;
  gap: clamp(.6rem, 2vw, 1.4rem);
  padding: .95rem 0;
  border-bottom: 1px solid rgba(201,162,39,.14);
}
.plan-row .dot {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--brass);
  box-shadow: 0 0 0 4px var(--walnut-deep), 0 0 0 5px rgba(201,162,39,.4);
  align-self: center;
}
.plan-row.is-key .dot { background: var(--gold); }
.plan-row .when {
  font-family: var(--data);
  font-size: .88rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-variant-numeric: tabular-nums;
  color: var(--brass);
}
.plan-row .what { font-family: var(--display); font-size: 1.2rem; font-weight: 600; color: var(--bone); }
.plan-row .note { font-family: var(--body); font-size: .92rem; color: var(--bone-muted); }

/* ---------------------------------------------- 15 PAGE: HOUSE RULES / GLASS */

.glass {
  padding: clamp(1.1rem, 3vw, 2rem);
  border-radius: 2px;
}
.glass h2 {
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  color: var(--pigskin-deep);
  margin-bottom: .2rem;
}
.glass .lede {
  font-size: .96rem;
  color: var(--ink-muted);
  max-width: 65ch;
  margin: 0 0 1.2rem;
}
.glass .rule-note {
  font-family: var(--data);
  font-size: .88rem;
  letter-spacing: .06em;
  color: var(--ink-muted);
  border-top: 1px solid var(--parchment-rule);
  margin-top: 1rem;
  padding-top: .8rem;
}
.consequences { columns: 2; column-gap: 2rem; }
.consequences li { break-inside: avoid; color: var(--ink); }

/* the commissioner's coin */
.coin-bay { display: grid; justify-items: center; gap: 1.1rem; padding: clamp(1.5rem, 4vw, 2.5rem); }
.coin-stage { perspective: 900px; height: 132px; display: grid; place-items: center; }
.coin {
  width: 118px; height: 118px;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 1.7s cubic-bezier(.3, .05, .2, 1);
}
.coin-face {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  backface-visibility: hidden;
  font-family: var(--data);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--walnut-deep);
  background-image: linear-gradient(140deg, var(--brass-ox), var(--brass) 30%, var(--brass-lit) 50%, var(--brass) 70%, var(--brass-ox));
  box-shadow: inset 0 0 0 5px rgba(122,95,22,.55), 0 8px 18px rgba(0,0,0,.55);
  text-shadow: 0 1px 0 rgba(255,255,255,.4);
}
.coin-face.back { transform: rotateY(180deg); }
.btn {
  font-family: var(--data);
  font-size: .95rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .14em;
  min-height: 44px;
  padding: 0 1.6rem;
  border: none;
  border-radius: var(--bevel);
  cursor: pointer;
  color: var(--walnut-deep);
  background-image: linear-gradient(104deg, var(--brass-ox), var(--brass) 30%, var(--brass-lit) 52%, var(--brass) 74%, var(--brass-ox));
  box-shadow: 0 1px 0 rgba(255,255,255,.3) inset, 0 3px 8px rgba(0,0,0,.5);
  transition: transform .12s var(--ease), filter .2s var(--ease);
}
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .55; cursor: default; }
.verdict {
  font-family: var(--data);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  min-height: 2rem;
}
.verdict.uphold { color: var(--win); }
.verdict.veto { color: var(--loss); }

/* --------------------------------------------------------------- 16 FOOTER */

.footer {
  margin-top: var(--gap-section);
  display: grid;
  justify-items: center;
  gap: .9rem;
}
.footer .tagline {
  font-family: var(--display);
  font-size: 1.05rem;
  font-style: italic;
  color: var(--bone-muted);
  margin: 0;
  text-align: center;
}
.footer .stamp {
  font-family: var(--data);
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .18em;
  padding: .5rem 1.4rem;
  border-radius: 2px;
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------- 17 MOTION */

/* Reveal on scroll. The no-js class is removed by app.js, so with JavaScript
   off nothing is ever left hidden. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
}
.js [data-reveal].shown {
  opacity: 1;
  transform: none;
  transition: opacity .55s var(--ease), transform .55s var(--ease);
  transition-delay: var(--d, 0ms);
}
/* frames settle in as if being hung */
.js .frame[data-reveal] { transform: translateY(14px) rotate(-.6deg); }
.js .frame[data-reveal].shown { transform: none; }

/* the case lights warm up on entry */
.js .case[data-reveal] { opacity: 0; }
.js .case[data-reveal].shown {
  opacity: 1;
  animation: lights-up 1.5s var(--ease) both;
}
@keyframes lights-up {
  from { filter: brightness(.35) saturate(.5); }
  to   { filter: none; }
}

/* the champion plate: the single perpetual micro-loop on the site */
.shimmer { position: relative; overflow: hidden; }
.shimmer::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: -60%;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.42), transparent);
  transform: translateX(0);
  animation: sweep 5.5s var(--ease) infinite;
  pointer-events: none;
}
@keyframes sweep {
  0%, 62% { transform: translateX(0); opacity: 0; }
  70%     { opacity: 1; }
  100%    { transform: translateX(360%); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .js [data-reveal] { opacity: 1 !important; transform: none !important; }
  .shimmer::after { display: none; }
}

/* ----------------------------------------------------------- 18 RESPONSIVE */

@media (max-width: 900px) {
  .plaque[class*="span-"] { grid-column: span 6; }
  .plaque.span-12 { grid-column: span 12; }
}

@media (max-width: 768px) {
  /* Every multi-column layout collapses. No exceptions. */
  .masthead { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .crest { justify-self: start; width: clamp(120px, 40vw, 180px); margin-top: -.5rem; }
  /* One column. No exceptions - that is the rule in DESIGN.md. */
  .plaque[class*="span-"] { grid-column: span 12; }
  .plaque.is-lead .v { font-size: clamp(2.4rem, 12vw, 3.4rem); }
  .facing { grid-template-columns: minmax(0, 1fr); }
  .door-hero { grid-template-columns: minmax(0, 1fr); }
  .recess { max-width: 190px; }
  .door { grid-template-columns: 2.4rem minmax(0, 1fr); row-gap: .5rem; }
  .door .figures { grid-column: 1 / -1; justify-content: space-between; }
  .podium { grid-template-columns: minmax(0, 1fr); }
  .consequences { columns: 1; }
  .plan-row { grid-template-columns: 1.5rem minmax(0, 1fr); }
  .plan-row .what, .plan-row .note { grid-column: 2; }
  .bout { grid-template-columns: minmax(0, 1fr); text-align: left; gap: .2rem; }
  .bout .side.r { text-align: left; }
  .bout .mid { order: 3; }
  .rail a { font-size: .8rem; padding: 0 .65rem; }
}

@media print {
  body::before, .rail, .crest { display: none; }
  body { background: #fff; color: #000; }
}

/* ---------------------------------------------------- 19 SUPPORTING DETAIL */

/* Sort bar - revealed by app.js, absent without JavaScript. */
.sortbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .4rem;
  margin-bottom: 1rem;
}
.sortbar-label {
  font-family: var(--data);
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--bone-muted);
  margin-right: .3rem;
}
.chip {
  font-family: var(--data);
  font-size: .78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  min-height: 44px;
  padding: 0 .95rem;
  border-radius: 2px;
  cursor: pointer;
  color: var(--bone-muted);
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(201,162,39,.22);
  transition: color .2s var(--ease), border-color .2s var(--ease), background-color .2s var(--ease);
}
.chip:hover { color: var(--brass-lit); border-color: rgba(201,162,39,.5); }
.chip.active {
  color: var(--walnut-deep);
  border-color: var(--brass-ox);
  background-image: linear-gradient(104deg, var(--brass-ox), var(--brass) 30%, var(--brass-lit) 52%, var(--brass) 74%, var(--brass-ox));
}

.crown {
  font-family: var(--data);
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: #2a1c00;
  padding: .12rem .5rem;
  border-radius: 2px;
  background-image: linear-gradient(104deg, #a06d00, var(--gold) 40%, #ffd166 55%, #a06d00);
  white-space: nowrap;
  flex: none;
}

.door.is-new { opacity: .82; }
.door.is-new .seed { color: var(--bone-muted); font-size: 1.4rem; }

.roll-note {
  font-family: var(--data);
  font-size: .95rem;
  letter-spacing: .03em;
  color: var(--bone-muted);
  margin-top: 1.4rem;
  max-width: 68ch;
}

/* trophy case interior */
.case-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(1.5rem, 6vw, 4rem);
  position: relative;
  z-index: 1;
}
.run-lede { font-size: 1rem; color: var(--lace); margin: 0; max-width: 62ch; }
.bout.on-leather { border-bottom-color: rgba(237,230,214,.18); }
.bout.on-leather .side { color: rgba(237,230,214,.62); }
.bout.on-leather .side.won { color: var(--lace); }
.bout.on-leather .sc { color: var(--brass-lit); }
.bout.on-leather .mid { color: rgba(237,230,214,.5); }

.bone-rule { display: block; width: 160px; height: 24px; margin: 1.2rem auto; color: var(--brass); }

.legend-hint {
  font-family: var(--data);
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--bone-muted);
  align-self: center;
  margin-left: .3rem;
}
.pos-chip[data-pos] { cursor: pointer; user-select: none; transition: opacity .2s var(--ease); }
.pos-chip.dim { opacity: .3; }

.stall-empty {
  font-family: var(--data);
  font-size: .86rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--bone-muted);
  padding: 1rem 1.1rem;
}

/* last-place punishment, on leather */
.punish-k {
  font-family: var(--data);
  font-size: .8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: rgba(237,230,214,.7);
  margin-bottom: .3rem;
}
.punish-v {
  font-family: var(--display);
  font-size: clamp(1.1rem, 2.6vw, 1.5rem);
  line-height: 1.4;
  color: var(--lace);
  margin: 0;
  max-width: 60ch;
}

/* roster composition, as slots rather than a two-column table */
.slot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
  gap: .6rem;
}
.slot-cell {
  text-align: center;
  padding: .8rem .4rem;
  border-radius: var(--bevel);
  background: rgba(139,74,43,.09);
  border: 1px solid var(--parchment-rule);
}
.slot-n {
  font-family: var(--display);
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1;
  color: var(--pigskin-deep);
}
.slot-p {
  font-family: var(--data);
  font-size: .78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--ink-muted);
  margin-top: .2rem;
}

table.ledger td.n.neg { color: var(--loss); font-weight: 600; }
table.ledger td.n.pos { color: var(--win); font-weight: 600; }
table.ledger td.n.zero { color: var(--ink-muted); }

/* buy-in and payouts */
.payouts {
  display: grid;
  grid-template-columns: minmax(160px, 260px) minmax(0, 1fr);
  gap: clamp(.8rem, 2vw, 1.6rem);
  align-items: stretch;
}
.pay-in { display: grid; place-content: center; text-align: center; padding: 1.4rem; }
.pay-in .pay-k {
  font-family: var(--data);
  font-size: .76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .2em;
}
.pay-in .pay-v { font-family: var(--display); font-size: clamp(2.4rem, 7vw, 3.4rem); font-weight: 700; line-height: 1; }
.pay-in .pay-n { font-family: var(--data); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; }
.pay-out {
  display: grid;
  align-content: center;
  gap: .3rem;
  padding: 1rem 1.2rem;
  border-radius: var(--bevel);
  border: 1px solid rgba(201,162,39,.2);
  background-image: linear-gradient(150deg, rgba(255,255,255,.06), rgba(0,0,0,.26));
}
.pay-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: .5rem 0;
  border-bottom: 1px solid rgba(201,162,39,.14);
}
.pay-row:last-child { border-bottom: none; }
.pay-place {
  font-family: var(--data);
  font-size: .92rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--bone-muted);
}
.pay-amt { font-family: var(--display); font-size: 1.5rem; font-weight: 700; color: var(--bone); }
.pay-row.is-first .pay-place { color: var(--gold); }
.pay-row.is-first .pay-amt { color: var(--gold); font-size: 2rem; }

/* manager profile detail */
.facing .tile .k {
  font-family: var(--data);
  font-size: .76rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .15em;
  color: var(--bone-muted);
}
.facing .tile .v {
  font-family: var(--display);
  font-size: clamp(2.2rem, 6vw, 3.2rem);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--bone);
  margin: .15rem 0 .45rem;
}
.facing .tile .ctx { font-family: var(--data); font-size: .95rem; color: var(--bone-muted); line-height: 1.45; }

.spark-key {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  font-family: var(--data);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: rgba(237,230,214,.7);
}
.spark-key i { display: inline-block; width: 10px; height: 10px; border-radius: 1px; margin-right: .3rem; }
.spark-key .k-win { background: var(--win); }
.spark-key .k-loss { background: var(--loss); }
.spark-key .k-avg { text-transform: none; letter-spacing: .03em; }

.mini-pennant {
  font-family: var(--data);
  font-size: .62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  padding: .05rem .35rem;
  border-radius: 2px;
  background: var(--turf);
  color: var(--lace);
}
table.ledger td.result-w { color: var(--win); font-weight: 700; }
table.ledger td.result-l { color: var(--loss); font-weight: 700; }

/* playoffs */
.round-label {
  font-family: var(--data);
  font-size: .8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--bone-muted);
  margin: 1.4rem 0 .5rem;
}
.bracket {
  border-radius: var(--bevel);
  border: 1px solid rgba(201,162,39,.2);
  background-image: linear-gradient(160deg, rgba(255,255,255,.05), rgba(0,0,0,.24));
  padding: .3rem .5rem;
}

.coin-note {
  font-family: var(--data);
  font-size: .82rem;
  letter-spacing: .06em;
  color: rgba(237,230,214,.62);
  margin: 0;
  text-align: center;
  max-width: 46ch;
}

@media (max-width: 768px) {
  .payouts { grid-template-columns: minmax(0, 1fr); }
  .case-row { gap: 2rem; }
}

/* ------------------------------------------------ 20 CORRECTIONS FROM REVIEW */

/* Stat columns on the roll were ragged because each figure sized to its own
   content. Fixed widths line PF/PA/PPG up down the whole corridor. */
.door .figure { min-width: 4.6rem; }

/* A long value must never spill into the neighbouring plaque. */
.plaque { min-width: 0; overflow: hidden; }
.plaque .v { overflow-wrap: anywhere; }

/* --- trophy case -------------------------------------------------------- */

/* The case was mostly empty air with the shelf floating below the trophy.
   The stand now sits on the felt, and the case is only as tall as it needs. */
.case {
  padding: clamp(1.5rem, 4vw, 2.5rem) clamp(1.25rem, 4vw, 3rem) 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: clamp(320px, 40vw, 420px);
}
.case-row { align-items: flex-end; margin-bottom: 0; }
.case-shelf {
  margin: 0 calc(-1 * clamp(1.25rem, 4vw, 3rem));
  height: 20px;
  border-top: 2px solid rgba(240,214,122,.4);
  box-shadow: 0 -20px 44px rgba(240,214,122,.14);
}
.trophy { width: clamp(130px, 22vw, 200px); }

/* The vacant shelf should read as an invitation, not a smudge. */
.vacancy { opacity: 1; padding-bottom: .35rem; }
.vacancy .socket {
  border-color: rgba(240,214,122,.45);
  background: radial-gradient(circle at 50% 45%, rgba(240,214,122,.12), transparent 72%);
}
.vacancy .lbl { color: rgba(240,214,122,.6); }

/* --- laces -------------------------------------------------------------- */

/* The seam was invisible against the cross-stitches, so the divider read as a
   row of loose ticks. Built now as a drawn seam with the stitches over it. */
.laces {
  height: 16px;
  margin: 1.2rem 0;
  position: relative;
}
.laces::before {
  content: "";
  position: absolute;
  left: 8%; right: 8%; top: 50%;
  height: 2px;
  transform: translateY(-50%);
  background: linear-gradient(90deg, transparent, var(--pigskin-deep) 8%,
              var(--pigskin-deep) 92%, transparent);
  opacity: .9;
}
.laces::after {
  content: "";
  position: absolute;
  left: 12%; right: 12%; top: 0; bottom: 0;
  background-image: repeating-linear-gradient(90deg,
    transparent 0 15px, var(--lace) 15px 18px, transparent 18px 33px);
  opacity: .85;
}

/* --- framing ------------------------------------------------------------ */

/* The moulding was too close in value to the panelling to read as a frame. */
.frame {
  border-color: #5A422E;
  border-width: 11px;
  box-shadow:
    0 0 0 1px rgba(0,0,0,.75),
    inset 0 0 0 2px rgba(20,17,16,.5),
    inset 0 0 0 3px rgba(240,214,122,.14),
    var(--shadow-lift);
}

/* --- draft board -------------------------------------------------------- */

/* The board is wider than the page and scrolls inside its frame. Without an
   affordance that just looks like a cropped table, so the right edge fades. */
.board-scroll {
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 94%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 0, #000 94%, transparent 100%);
}
.board-hint {
  font-family: var(--data);
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--bone-muted);
  margin-top: .5rem;
}

/* --- phone overflow ------------------------------------------------------ */

/* Sticky table headers plus the frame's border box pushed a few pixels past the
   viewport on the rules and commissioner pages. Horizontal page scroll on a
   phone is a hard failure, so the frame is allowed to shrink below its content
   and every ledger is confined to its own scroller. */
.frame, .glass, .panel { min-width: 0; max-width: 100%; }
.ledger-wrap { max-width: 100%; }
table.ledger { table-layout: auto; }

@media (max-width: 768px) {
  .frame { border-width: 7px; }
  .glass { padding: .9rem; }
  table.ledger td, table.ledger thead th { padding: .6rem .55rem; }
  table.ledger .term { white-space: normal; }
  /* Sticky headers stop being useful once a row is taller than the screen. */
  table.ledger thead th { position: static; }
  .case { min-height: 260px; }
}

/* Career figures on a manager's door carry more weight than the roll's. */
.career .figure .v { font-size: 1.45rem; }
.career .figure .k { font-size: .7rem; }

/* ------------------------------------------------ 21 SECOND-PASS CORRECTIONS */

/* Leather was rendering a good deal lighter than the pigskin token because the
   overlay gradient lifted it. Deepened so the panel reads as tanned hide rather
   than terracotta. */
.m-leather {
  background-color: var(--pigskin-deep);
  background-image:
    radial-gradient(circle at 22% 18%, rgba(255,255,255,.05) 0 1px, transparent 1px),
    radial-gradient(circle at 68% 62%, rgba(0,0,0,.16) 0 1.5px, transparent 1.5px),
    linear-gradient(158deg, rgba(139,74,43,.85), rgba(50,25,13,.95));
}
.m-leather::after { border-color: rgba(237,230,214,.42); }

/* The lace divider read as a dashed line: the seam was invisible against the
   hide and the stitches were too fine and too frequent to be legible as lacing.
   Fewer, heavier stitches over a clearly cut seam. */
.laces { height: 18px; }
.laces::before {
  left: 18%; right: 18%;
  height: 3px;
  background: linear-gradient(90deg, transparent, rgba(0,0,0,.55) 10%,
              rgba(0,0,0,.55) 90%, transparent);
  box-shadow: 0 1px 0 rgba(237,230,214,.14);
  opacity: 1;
}
.laces::after {
  left: 50%;
  right: auto;
  width: 232px;
  transform: translateX(-50%);
  background-image: repeating-linear-gradient(90deg,
    transparent 0 34px, var(--lace) 34px 38px, transparent 38px 40px);
  opacity: .95;
  border-radius: 1px;
}

/* --- trophy case, second pass ------------------------------------------- */

/* Less dead air above the cup, and the plate now sits down on the felt. */
.case { min-height: clamp(280px, 32vw, 360px); }
.trophy { width: clamp(150px, 24vw, 220px); }
.trophy-stand { gap: 0; }
.trophy-plate { margin-bottom: 0; }
.case-row { padding-bottom: 0; }

/* Give the vacancy the same footing as the trophy rather than floating it. */
.vacancy { justify-self: end; padding-bottom: .1rem; }

/* ---------------------------------------------- 22 PORTRAIT RECESS, SIZED */

/* The recess is now a 4:5 portrait frame, matching the 200x250 hand-drawn
   manager cartoons exactly, so a drawing drops in without being cropped.
   object-fit stays "contain" rather than "cover": a cartoon with transparent
   margins must not have its head cropped to fill the box. */
.recess { aspect-ratio: 4 / 5; }
.recess img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: auto;
}
.door-hero { grid-template-columns: clamp(130px, 20vw, 180px) minmax(0, 1fr); }
.door-hero .recess { align-self: center; }

@media (max-width: 768px) {
  .recess { max-width: 160px; }
}

/* -------------------------------------------- 23 THIRD-PASS CORRECTIONS */

/* The planner ran the event name and its note together on one line, so the
   note read as part of the title. Each gets its own line, and the date column
   is capped so a long timestamp cannot shove one row out of alignment. */
.plan-row { grid-template-columns: 1.5rem minmax(7.5rem, 12.5rem) minmax(0, 1fr); }
.plan-row .when { white-space: normal; line-height: 1.3; }
.plan-row .what { display: block; }
.plan-row .note { display: block; margin-top: .1rem; }

/* The season line needs enough height for a short week to still read as a bar
   rather than a smudge. */
.spark { height: 88px; }

/* ------------------------------------------------- 24 FINAL SPACING PASS */

/* The empty state sat flush against the stalls beneath it, so the two read as
   one block. */
.empty-state { margin-bottom: 1.4rem; }

/* Stalls sized to their content left a ragged bottom edge across the grid. */
.stall { display: flex; flex-direction: column; }
.stall ul, .stall-empty { flex: 1; }

/* ------------------------------------------------------- 25 THE MEDALLIONS */

/* The hand-drawn cartoons arrived in two styles - four are circular badges on
   white, six are full-bleed rectangles - so a rectangular frame would have put
   four managers in white boxes against the walnut. A circular medallion suits
   both, and the four that are already circles line up with it exactly.
   The importer squares every drawing; the circle is applied here so the source
   files stay rectangular and a future change of mind costs nothing.

   The rim is the same aged brass as the door plates, which is what ties a
   photographic cartoon into a room made of wood and metal. */

.recess {
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 34%, rgba(0,0,0,.42), rgba(0,0,0,.8)),
    var(--walnut-deep);
  box-shadow:
    0 0 0 3px var(--brass-ox),
    0 0 0 5px rgba(240,214,122,.28),
    0 6px 18px rgba(20,17,16,.6),
    inset 0 2px 8px rgba(0,0,0,.7);
}
.recess img {
  object-fit: cover;          /* squared by the importer, so nothing is lost */
  border-radius: 50%;
}
.recess .initials { color: rgba(201,162,39,.45); }
.recess .waiting { bottom: 14%; font-size: .58rem; }

.door-hero { grid-template-columns: clamp(120px, 19vw, 168px) minmax(0, 1fr); }

/* The small medallion, used down the standings corridor and on the stalls.
   Same hardware, one size down. */
.face {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
  background: var(--walnut-deep);
  box-shadow:
    0 0 0 2px var(--brass-ox),
    0 0 0 3px rgba(240,214,122,.22),
    0 2px 6px rgba(20,17,16,.55);
}

/* Austin Flake and Brennen E left the league and are not coming back, so they
   keep engraved initials rather than a placeholder that implies one is coming. */
.face-blank {
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-size: .95rem;
  font-weight: 700;
  color: rgba(201,162,39,.5);
  text-shadow: 0 1px 0 rgba(0,0,0,.6);
  box-shadow:
    0 0 0 2px rgba(122,95,22,.6),
    inset 0 2px 6px rgba(0,0,0,.6);
}

.door:hover .face { box-shadow: 0 0 0 2px var(--brass), 0 0 0 4px rgba(240,214,122,.3), 0 3px 9px rgba(20,17,16,.6); }
.face { transition: box-shadow .28s var(--ease); }

/* Stall heads now lead with the manager's face. */
.stall-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: .7rem;
}
.stall-id { min-width: 0; }

@media (max-width: 768px) {
  .face { width: 38px; height: 38px; }
  .recess { max-width: 150px; }
}

/* ---------------------------------------------------------- 26 THE WALL */

/* Photographs pinned to the panelling. Each print gets a cream border like a
   real photo print, a walnut edge, and a small angle so the wall reads as
   something assembled by hand rather than a CSS grid. The angle straightens on
   hover, which is the whole interaction. */

.wall-lede { margin-bottom: .5rem; }
.wall-lede code, .empty-state code {
  font-family: var(--data);
  font-size: .95em;
  letter-spacing: .02em;
  padding: .05em .35em;
  border-radius: 2px;
  background: rgba(0,0,0,.35);
  color: var(--brass-lit);
}

.wall-head {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin: var(--gap-section) 0 1.1rem;
  scroll-margin-top: 1rem;
}
.wall-count {
  font-family: var(--data);
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bone-muted);
}
.wall-head + .wall { margin-top: 0; }

.wall {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: clamp(1rem, 2.6vw, 1.9rem);
  align-items: start;
}

.print {
  display: block;
  position: relative;
  padding: 9px 9px 9px;
  border-radius: 2px;
  text-decoration: none;
  background: linear-gradient(160deg, #efe7d7, #d9cdb6);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.5),
    0 6px 14px rgba(20,17,16,.5),
    0 18px 36px rgba(20,17,16,.34);
  transform: rotate(var(--tilt, -1deg));
  transition: transform .32s var(--ease), box-shadow .32s var(--ease);
  will-change: transform;
}
/* Alternating tilt so the wall never looks like every print fell the same way. */
.print:nth-child(3n)   { --tilt:  1.2deg; }
.print:nth-child(3n+1) { --tilt: -1.1deg; }
.print:nth-child(4n)   { --tilt:  0.5deg; }
.print:hover,
.print:focus-visible {
  transform: rotate(0deg) translateY(-4px) scale(1.02);
  box-shadow:
    0 0 0 1px rgba(201,162,39,.5),
    0 10px 20px rgba(20,17,16,.55),
    0 26px 52px rgba(20,17,16,.42);
  z-index: 2;
}

.print img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--walnut-deep);
  border-radius: 1px;
}
/* Portrait shots keep their shape rather than being cropped to a landscape box. */
.print.is-portrait img { aspect-ratio: 3 / 4; }

.print-cap {
  display: block;
  font-family: var(--data);
  font-size: .82rem;
  line-height: 1.3;
  letter-spacing: .02em;
  color: var(--pigskin-deep);
  padding: .5rem .15rem .1rem;
  /* Two lines maximum, so one long caption cannot make its print taller than
     everything beside it. The full text is still in the lightbox. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --- lightbox ----------------------------------------------------------- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: .5rem;
  padding: clamp(.75rem, 3vw, 2.5rem);
  background: rgba(12, 8, 6, .93);
  backdrop-filter: blur(3px);
}
.lightbox[hidden] { display: none; }

.lb-stage {
  margin: 0;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: .9rem;
  min-height: 0;
}
.lb-stage img {
  max-width: 100%;
  max-height: 78vh;
  border-radius: 2px;
  background: var(--walnut-deep);
  box-shadow: 0 0 0 8px #e8dfcc, 0 0 0 9px rgba(0,0,0,.6), 0 24px 60px rgba(0,0,0,.7);
}
.lb-stage figcaption {
  font-family: var(--data);
  font-size: 1rem;
  letter-spacing: .03em;
  color: var(--bone);
  text-align: center;
  max-width: 60ch;
}

.lightbox button {
  border: none;
  cursor: pointer;
  font-family: var(--data);
  color: var(--brass);
  background: rgba(0,0,0,.45);
  border-radius: 50%;
  width: 44px;
  height: 44px;
  font-size: 1.7rem;
  line-height: 1;
  display: grid;
  place-items: center;
  transition: color .2s var(--ease), background-color .2s var(--ease);
}
.lightbox button:hover { color: var(--brass-lit); background: rgba(201,162,39,.2); }
.lb-close {
  position: absolute;
  top: clamp(.6rem, 2vw, 1.4rem);
  right: clamp(.6rem, 2vw, 1.4rem);
  font-size: 1.5rem !important;
}

@media (max-width: 768px) {
  .wall { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .8rem; }
  .print { padding: 6px; }
  .print-cap { font-size: .74rem; }
  .lightbox { grid-template-columns: 1fr; }
  .lb-prev, .lb-next {
    position: absolute;
    bottom: clamp(.8rem, 4vw, 2rem);
  }
  .lb-prev { left: 18%; }
  .lb-next { right: 18%; }
  .lb-stage img { max-height: 66vh; }
}

@media (prefers-reduced-motion: reduce) {
  .print { transform: none; }
  .print:hover, .print:focus-visible { transform: none; }
}

/* ------------------------------------------- 27 THE WALL, MASONRY CORRECTION */

/* A uniform grid left tall gaps wherever a portrait shot sat beside landscape
   ones - the row grew to the tallest print and everything shorter floated in
   space. CSS columns flow each print directly under the one above it, which is
   how a real photo wall fills in. Reading order becomes top-to-bottom per
   column rather than left-to-right, which is the right trade for a gallery. */
.wall {
  display: block;
  column-width: 250px;
  column-gap: clamp(1rem, 2.4vw, 1.7rem);
  column-fill: balance;
}
.print {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  margin: 0 0 clamp(1rem, 2.4vw, 1.7rem);
  width: 100%;
}
/* The tilt is what makes prints overlap their neighbours at the column edge,
   so it is dialled back now that they stack tightly. */
.print               { --tilt: -0.7deg; }
.print:nth-child(3n)   { --tilt:  0.8deg; }
.print:nth-child(3n+1) { --tilt: -0.6deg; }
.print:nth-child(4n)   { --tilt:  0.35deg; }

@media (max-width: 768px) {
  .wall { column-width: 150px; column-gap: .8rem; }
  .print { margin-bottom: .8rem; }
}

/* ------------------------------------------------------- 28 THE TWO AWARDS */

/* The case holds the Big Dawg and the Pluggo. They get identical treatment -
   same shelf, same plate, same roll of honour - because that even-handedness
   is the joke, and because the Pluggo is a real trophy this league hands over
   at a real ceremony. Nothing here treats one as a footnote to the other. */

.case-row {
  align-items: flex-end;
  gap: clamp(1.5rem, 7vw, 5rem);
}

.award {
  display: grid;
  justify-items: center;
  gap: 0;
  max-width: 300px;
}

/* The artwork is lit from the case above, so it sits on the shelf rather than
   floating: a soft elliptical shadow grounds it. */
.trophy-art {
  width: auto;
  max-width: 100%;
  height: clamp(190px, 26vw, 300px);
  object-fit: contain;
  object-position: bottom;
  display: block;
  filter: drop-shadow(0 14px 18px rgba(0,0,0,.75));
}

.award-plate {
  margin-top: .5rem;
  padding: .5rem 1.3rem;
  border-radius: 2px;
  text-align: center;
  box-shadow: 0 3px 9px rgba(0,0,0,.65);
  border-top: 1px solid rgba(255,255,255,.4);
  min-width: 190px;
}
.award-name {
  display: block;
  font-family: var(--display);
  font-size: clamp(1.05rem, 2.4vw, 1.4rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.01em;
}
.award-sub {
  display: block;
  font-family: var(--data);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  opacity: .8;
}

/* The roll of honour under each plate. One line per season, so an empty year
   reads as an opening rather than an omission. */
.award-roll {
  margin-top: .85rem;
  display: grid;
  gap: .3rem;
  width: 100%;
}
.award-win {
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: .1rem .55rem;
  font-family: var(--data);
  font-size: .95rem;
  color: var(--bone);
}
.award-win .yr {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--brass);
  letter-spacing: .08em;
}
.award-win a { color: var(--bone); text-decoration-color: rgba(201,162,39,.5); }
.award-win a:hover { color: var(--brass-lit); }
.award-win .tm {
  width: 100%;
  text-align: center;
  font-size: .78rem;
  letter-spacing: .04em;
  color: var(--bone-muted);
}
.award-win.is-open { color: var(--bone-muted); opacity: .6; }
.award-win.is-open .yr { color: var(--bone-muted); }

.award-notes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(.8rem, 2.5vw, 2rem);
  margin-top: 1.4rem;
}
.award-note {
  font-family: var(--data);
  font-size: .95rem;
  line-height: 1.5;
  letter-spacing: .02em;
  color: var(--bone-muted);
  margin: 0;
  padding-left: .9rem;
  border-left: 2px solid rgba(201,162,39,.35);
}
.award-note b { color: var(--brass); font-weight: 600; }

/* The case has to be taller now that each award carries a roll beneath it. */
.case { min-height: clamp(360px, 44vw, 520px); }

.punish-fine {
  font-family: var(--data);
  font-size: .9rem;
  letter-spacing: .03em;
  color: rgba(237,230,214,.72);
  margin: 0;
}
.punish-fine a { color: var(--lace); text-decoration-color: rgba(237,230,214,.5); }
.punish-fine a:hover { color: #fff; }
.punish-v b { color: #fff; }

@media (max-width: 768px) {
  .case-row { flex-direction: column; gap: 2.5rem; }
  .award { max-width: 100%; }
  .award-notes { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------ 29 THE COMMITTEE */

/* Three commissioners at the top of their own page. Deliberately not three
   equal cards in a row: the head of the committee gets a wider plate, because
   the hierarchy is real and the layout should say so without a footnote. */
.committee {
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr;
  gap: clamp(.7rem, 2vw, 1.3rem);
  margin-bottom: .5rem;
}
.commish {
  display: grid;
  justify-items: center;
  gap: .45rem;
  text-decoration: none;
  padding: 1.2rem 1rem;
  border-radius: var(--bevel);
  background-image: linear-gradient(160deg, rgba(255,255,255,.06), rgba(0,0,0,.28));
  border: 1px solid rgba(201,162,39,.2);
  border-top: 3px solid var(--tag, var(--brass));
  box-shadow: var(--shadow-plate);
  transition: transform .28s var(--ease), box-shadow .28s var(--ease),
              border-color .28s var(--ease);
}
.commish:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift);
  border-color: rgba(201,162,39,.5);
}
.commish.is-head {
  background-image: linear-gradient(160deg, rgba(237,161,0,.15), rgba(0,0,0,.28));
  border-color: rgba(237,161,0,.4);
}
.face-xl { width: 88px; height: 88px; font-size: 1.7rem; }
.commish.is-head .face-xl { width: 104px; height: 104px; }
.commish-name {
  font-family: var(--display);
  font-size: clamp(1.05rem, 2.2vw, 1.3rem);
  font-weight: 600;
  color: var(--bone);
  text-align: center;
  line-height: 1.15;
}
.commish-role {
  font-family: var(--data);
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .13em;
  color: var(--bone-muted);
  text-align: center;
  text-wrap: balance;
}
.commish.is-head .commish-role { color: var(--gold); }

@media (max-width: 768px) {
  .committee { grid-template-columns: minmax(0, 1fr); }
  .commish { grid-template-columns: auto minmax(0, 1fr); justify-items: start; gap: .3rem 1rem; }
  .commish .face-xl { grid-row: span 2; width: 62px; height: 62px; }
  .commish.is-head .face-xl { width: 62px; height: 62px; }
  .commish-name, .commish-role { text-align: left; align-self: end; }
  .commish-role { align-self: start; }
}

/* ------------------------------------------------------ 30 THE ONCE-OVER */

/* --- a real podium ------------------------------------------------------ */

/* Rank read by height, the way a podium is supposed to work. Order in the DOM
   is 2nd, 1st, 3rd so the winner stands in the middle without any positioning
   tricks, and the risers do the ranking. */
.podium {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: clamp(.5rem, 1.6vw, 1rem);
  margin-bottom: 2rem;
}
.podium .step,
.podium .step.p1 {
  display: grid;
  justify-items: center;
  gap: .35rem;
  padding: 0;
  /* The old treatment gave first place a filled card, which turned the winner's
     column into a box and undercut the whole point of a podium. Rank is carried
     by the riser height and the trophy now, so the panel goes. */
  background: none;
  background-image: none;
  border: none;
  text-align: center;
}
.podium-trophy {
  height: clamp(74px, 9vw, 118px);
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 8px 12px rgba(0,0,0,.7));
}
.step-who {
  display: grid;
  justify-items: center;
  gap: .35rem;
  text-decoration: none;
}
.step-who .face { width: 56px; height: 56px; font-size: 1.1rem; }
.podium .nm {
  font-family: var(--display);
  font-size: clamp(.95rem, 2vw, 1.2rem);
  font-weight: 600;
  color: var(--bone);
  line-height: 1.15;
}
.podium .tm {
  font-family: var(--data);
  font-size: .76rem;
  letter-spacing: .04em;
  color: var(--bone-muted);
  min-height: 1.1em;
  overflow-wrap: anywhere;
}
/* The riser is the block they stand on; its height is the ranking. */
.podium .riser {
  width: 100%;
  margin-top: .5rem;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: .15rem;
  padding: .5rem .4rem .4rem;
  border-radius: var(--bevel) var(--bevel) 0 0;
  background-image: linear-gradient(180deg, rgba(255,255,255,.09), rgba(0,0,0,.34));
  border: 1px solid rgba(201,162,39,.22);
  border-bottom: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16);
}
.podium .p1 .riser { min-height: 104px; border-color: rgba(237,161,0,.5);
  background-image: linear-gradient(180deg, rgba(237,161,0,.24), rgba(0,0,0,.34)); }
.podium .p2 .riser { min-height: 74px; }
.podium .p3 .riser { min-height: 54px; }
.podium .place {
  font-family: var(--data);
  font-size: .68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--brass);
}
.podium .p1 .place { color: var(--gold); }
.podium .rank {
  font-family: var(--display);
  font-size: clamp(1.4rem, 3.4vw, 2.1rem);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: rgba(239,231,218,.28);
}
.podium .p1 .rank { color: rgba(237,161,0,.55); }

/* --- results ledger: each week says something --------------------------- */

.week-block > summary { gap: .8rem; }
.wk-no { min-width: 5.2rem; }
.wk-top {
  margin-left: auto;
  display: inline-flex;
  align-items: baseline;
  gap: .5rem;
  text-transform: none;
  letter-spacing: .02em;
}
.wk-top-score {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--bone);
}
.wk-top-name {
  font-size: .88em;
  font-weight: 500;
  color: var(--bone-muted);
  letter-spacing: .06em;
}
.week-block[open] > summary .wk-top { opacity: .55; }

/* --- the suggestion box ------------------------------------------------- */

.box-bay {
  display: grid;
  grid-template-columns: clamp(170px, 23vw, 240px) minmax(0, 1fr);
  gap: clamp(1.4rem, 4vw, 3rem);
  align-items: start;
}
.suggestion-box { display: grid; justify-items: center; }
.box-lid {
  width: 100%;
  height: 34px;
  border-radius: var(--bevel) var(--bevel) 0 0;
  background-color: var(--walnut-lit);
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.14), rgba(0,0,0,.3)),
    repeating-linear-gradient(91deg, rgba(0,0,0,.16) 0 2px, transparent 2px 7px);
  border: 1px solid rgba(0,0,0,.6);
  border-bottom: none;
  display: grid;
  place-items: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22);
}
/* The slot: a dark inset with a brass lip, so it reads as a real opening. */
.box-slot {
  width: 58%;
  height: 9px;
  border-radius: 5px;
  background: #0b0806;
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,.95),
    0 1px 0 rgba(240,214,122,.35);
}
.box-body {
  width: 100%;
  /* Tall enough to read as a box rather than a lid on a strip. */
  min-height: clamp(160px, 20vw, 230px);
  align-content: end;
  padding: clamp(1.6rem, 4vw, 2.6rem) 1rem clamp(1.4rem, 3vw, 2rem);
  border-radius: 0 0 var(--bevel) var(--bevel);
  background-color: var(--walnut);
  background-image:
    linear-gradient(168deg, rgba(255,255,255,.07), rgba(0,0,0,.34)),
    repeating-linear-gradient(89deg, rgba(0,0,0,.14) 0 3px, transparent 3px 11px);
  border: 1px solid rgba(0,0,0,.6);
  box-shadow: var(--shadow-plate);
  display: grid;
  place-items: center;
}
.box-plate {
  padding: .35rem 1rem;
  border-radius: 2px;
  font-family: var(--data);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  border-top: 1px solid rgba(255,255,255,.4);
  box-shadow: 0 2px 5px rgba(0,0,0,.6);
}

.box-title { font-size: clamp(1.5rem, 3.4vw, 2.1rem); color: var(--bone); margin-bottom: .4rem; }
.box-lede { color: var(--bone-muted); max-width: 56ch; margin: 0 0 1rem; }
.box-list { color: var(--bone); margin-bottom: 1.1rem; }
.box-note {
  font-family: var(--data);
  font-size: .92rem;
  letter-spacing: .03em;
  color: var(--bone-muted);
  max-width: 56ch;
  margin: 0 0 1.1rem;
}
.btn.is-waiting { opacity: .5; cursor: default; }

/* --- a manager with no games yet ---------------------------------------- */

.rec.is-pending {
  color: var(--bone-muted);
  letter-spacing: .16em;
  font-size: 1rem;
}

/* --- trophy case: less air, bigger trophies ----------------------------- */

.trophy-art { height: clamp(210px, 30vw, 340px); }
.case { min-height: clamp(340px, 40vw, 480px); }

@media (max-width: 768px) {
  /* An earlier breakpoint collapses .podium to one column; a podium stacked
     vertically is no longer a podium, so it keeps its three steps on a phone
     and shrinks instead. */
  .podium { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .35rem; }
  .step-who .face { width: 44px; height: 44px; }
  .podium .p1 .riser { min-height: 78px; }
  .podium .p2 .riser { min-height: 56px; }
  .podium .p3 .riser { min-height: 42px; }
  .podium .tm { font-size: .68rem; }
  .box-bay { grid-template-columns: minmax(0, 1fr); }
  .suggestion-box { max-width: 220px; }
  .wk-top-name { display: none; }
}

/* ------------------------------------------------- 31 UTILITY LINK */

/* A tool, not content: quiet, single line, sits above the board without
   competing with it. */
.tool-link {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .3rem .9rem;
  margin: 0 0 1.2rem;
  padding: .7rem 1rem;
  border: 1px solid rgba(201,162,39,.22);
  border-left: 3px solid var(--brass);
  border-radius: var(--bevel);
  background: rgba(0,0,0,.2);
}
.tool-link a {
  font-family: var(--data);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--brass-lit);
  text-decoration: none;
  white-space: nowrap;
}
/* Drawn, not typed: none of the fonts in this stack carry U+2192, so a
   text arrow rendered as tofu. Borders always work. */
.tool-link a { display: inline-flex; align-items: center; gap: .5rem; }
.tool-link a::after {
  content: "";
  width: 0; height: 0;
  border-left: 6px solid currentColor;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transition: transform .2s var(--ease);
}
.tool-link a:hover::after { transform: translateX(3px); }
.tool-link a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.tool-link span {
  font-family: var(--data);
  font-size: .88rem;
  letter-spacing: .03em;
  color: var(--bone-muted);
}

/* ── Combined-page jump links ──────────────────────────────────────────
   Season and Draft & Rosters each carry two sections that used to be
   separate pages. The jump strip keeps the old one-click reach without
   putting the tabs back. */
.page-jump {
  display: flex; flex-wrap: wrap; gap: .5rem;
  margin: 0 0 1.4rem;
}
.page-jump a {
  font-family: var(--condensed);
  font-weight: 600; font-size: .8rem; letter-spacing: .12em;
  text-transform: uppercase; text-decoration: none;
  color: var(--bone-muted);
  padding: .42rem .95rem;
  border: 1px solid rgba(201,162,39,.28);
  border-radius: 999px;
  background-image: linear-gradient(165deg, rgba(255,255,255,.05), rgba(0,0,0,.2));
  transition: color .18s, border-color .18s, transform .18s;
}
.page-jump a:hover {
  color: var(--brass-lit); border-color: rgba(201,162,39,.6);
  transform: translateY(-1px);
}

/* ── Power rankings ───────────────────────────────────────────────────
   Deliberately the same numbers, order and language as the Tuesday
   Instagram card. Both read output/fp_odds.json. */
.power-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 1.1rem;
}
.power-sub { color: var(--bone-muted); margin: .3rem 0 0; max-width: 56ch; }
.power-stamp {
  font-family: var(--condensed); font-size: .78rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--brass);
  white-space: nowrap;
}
.power-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.power-row {
  display: grid;
  grid-template-columns: 2.6rem minmax(0,1fr) 4.6rem minmax(80px,1fr) 3.6rem 3.4rem;
  align-items: center; gap: .85rem;
  padding: .72rem .95rem;
  border-radius: var(--bevel);
  border: 1px solid rgba(201,162,39,.16);
  border-left: 4px solid var(--tag, var(--brass));
  background-image: linear-gradient(165deg, rgba(255,255,255,.06), rgba(0,0,0,.26));
  box-shadow: var(--shadow-plate);
}
.power-row.is-top { border-color: rgba(201,162,39,.42); }
.power-rank {
  font-family: var(--display); font-size: 1.5rem; font-weight: 700;
  color: var(--bone-muted); text-align: center;
}
.power-row.is-top .power-rank { color: var(--brass-lit); }
.power-name {
  display: block; font-family: var(--condensed); font-weight: 700;
  font-size: 1.16rem; letter-spacing: .01em; color: var(--bone);
}
.power-team {
  display: block; font-size: .74rem; color: var(--bone-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.power-record {
  font-family: var(--display); font-size: 1.22rem; font-weight: 700;
  color: var(--bone); text-align: center;
  font-variant-numeric: tabular-nums;
}
.power-bar {
  display: block; height: 9px; border-radius: 999px;
  background: rgba(20,17,16,.5); box-shadow: var(--shadow-inset);
  overflow: hidden;
}
.power-bar i {
  display: block; height: 100%; border-radius: 999px;
  background-image: linear-gradient(90deg, var(--tag, var(--brass)), var(--brass-lit));
}
.power-pct, .power-title {
  font-family: var(--display); font-weight: 700; text-align: right;
  font-variant-numeric: tabular-nums;
}
.power-pct { font-size: 1.14rem; color: var(--bone); }
.power-title { font-size: 1.14rem; color: var(--brass); }
.power-key {
  display: flex; flex-wrap: wrap; gap: 1.1rem;
  margin-top: 1rem; font-size: .8rem; color: var(--bone-muted);
}
.power-key b { color: var(--brass); font-weight: 600; }
.power-note {
  margin-top: .9rem; color: var(--bone-muted);
  max-width: 68ch; font-size: .92rem;
}
@media (max-width: 640px) {
  /* The bar is the first thing to go: the numbers either side carry it. */
  .power-row { grid-template-columns: 2rem minmax(0,1fr) 3.9rem 3.2rem 3rem; }
  .power-bar { display: none; }
}