@import url("https://fonts.googleapis.com/css2?family=Anton&family=Barlow+Condensed:ital,wght@0,500;0,600;0,700;1,700&family=Barlow:ital,wght@0,400;0,500;0,600;0,700;1,400&family=JetBrains+Mono:wght@400;500;700&display=swap");
/* THE COMMISH league site — single production stylesheet (tokens inlined) */
/* Webfonts. The source repo shipped no brand fonts (system stack only) — these are
   Google Fonts substitutions chosen for boxing-poster/locker-room energy. Flagged in readme.md. */


/* ---- tokens/colors.css ---- */
:root{
  /* ---- Base ink (inherited verbatim from commish/templates/base.html) ---- */
  --ink-900:#0d1117;      /* page void */
  --ink-800:#161b22;      /* panel */
  --ink-700:#21262d;      /* hairline / table rule */
  --ink-600:#2d353f;      /* raised hairline, disabled edge */
  --bone-100:#e6edf3;     /* primary text */
  --smoke-400:#8b949e;    /* dim text, table headers */

  /* ---- Signal (inherited verbatim) ---- */
  --go-500:#3fb950;       /* wins, good news, nav */
  --hot-500:#f85149;      /* shame numbers, losses */

  /* ---- Tabloid extensions ---- */
  --ink-950:#07090c;      /* poster ground, hard shadow, print black */
  --newsprint:#efe9dc;    /* inverted bone block, ticket stub */
  --newsprint-dim:#cfc7b6;
  --blood-700:#7a1216;    /* poster red band */
  --blood-900:#4a0b0e;
  --go-700:#1e6b2c;
  --hot-700:#8c2420;

  /* ---- Brass plaque ---- */
  --brass-300:#e7c876;
  --brass-500:#c8a44a;
  --brass-700:#8c6a22;
  --brass-900:#4a3610;
  --engrave:#33260a;      /* text engraved into brass */

  /* ---- Spotlight (the 69 treatment) ---- */
  --nice-400:#ffd23f;
  --nice-600:#e0a300;
  --nice-glow:rgba(255,210,63,.55);
  --nice-wash:rgba(255,210,63,.10);

  /* ---- Semantic aliases ---- */
  --surface-page:var(--ink-900);
  --surface-panel:var(--ink-800);
  --surface-sunk:var(--ink-950);
  --surface-invert:var(--newsprint);
  --surface-poster:var(--blood-700);
  --surface-plaque:linear-gradient(177deg,var(--brass-300) 0%,var(--brass-500) 38%,var(--brass-700) 100%);

  --text-body:var(--bone-100);
  --text-dim:var(--smoke-400);
  --text-loud:#fff;
  --text-invert:var(--ink-950);
  --text-engraved:var(--engrave);
  --text-good:var(--go-500);
  --text-shame:var(--hot-500);
  --text-nice:var(--nice-400);
  --text-link:var(--go-500);
  --text-link-hover:var(--nice-400);

  --border-hairline:var(--ink-700);
  --border-rule:var(--bone-100);
  --border-shame:var(--hot-700);
  --border-nice:var(--nice-600);
}


/* ---- tokens/typography.css ---- */
:root{
  /* ---- Families ---- */
  --font-poster:"Anton","Barlow Condensed",Impact,sans-serif; /* @kind font */
  --font-condensed:"Barlow Condensed",Impact,sans-serif; /* @kind font */
  --font-body:"Barlow",-apple-system,"Segoe UI",sans-serif; /* @kind font */
  --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,monospace; /* @kind font */

  /* ---- Size scale (mobile-first; poster sizes are fluid) ---- */
  --fs-poster-xl:clamp(42px,13vw,86px); /* @kind font */
  --fs-poster-lg:clamp(32px,9vw,58px); /* @kind font */
  --fs-poster-md:clamp(24px,6vw,38px); /* @kind font */
  --fs-headline:22px; /* @kind font */
  --fs-section:17px; /* @kind font */
  --fs-body:16px; /* @kind font */
  --fs-small:14px; /* @kind font */
  --fs-micro:11px; /* @kind font */
  --fs-stat-lg:26px; /* @kind font */
  --fs-stat:15px; /* @kind font */

  /* ---- Line heights ---- */
  --lh-poster:0.88; /* @kind font */
  --lh-tight:1.15; /* @kind font */
  --lh-body:1.55; /* @kind font */

  /* ---- Tracking ---- */
  --track-poster:-0.015em; /* @kind font */
  --track-label:0.14em; /* @kind font */
  --track-section:0.06em; /* @kind font */
  --track-body:0; /* @kind font */

  /* ---- Weights ---- */
  --w-body:400; /* @kind font */
  --w-medium:500; /* @kind font */
  --w-bold:700; /* @kind font */

  /* ---- Semantic type aliases ---- */
  --text-poster-xl:var(--w-bold) var(--fs-poster-xl)/var(--lh-poster) var(--font-poster); /* @kind font */
  --text-poster-lg:var(--w-bold) var(--fs-poster-lg)/var(--lh-poster) var(--font-poster); /* @kind font */
  --text-poster-md:var(--w-bold) var(--fs-poster-md)/var(--lh-poster) var(--font-poster); /* @kind font */
  --text-section-label:var(--w-bold) var(--fs-section)/1.2 var(--font-condensed); /* @kind font */
  --text-micro-label:var(--w-bold) var(--fs-micro)/1.2 var(--font-condensed); /* @kind font */
  --text-prose:var(--w-body) var(--fs-body)/var(--lh-body) var(--font-body); /* @kind font */
  --text-number:var(--w-medium) var(--fs-stat)/1.2 var(--font-mono); /* @kind font */
}


/* ---- tokens/space.css ---- */
:root{
  --s-1:4px;
  --s-2:8px;
  --s-3:12px;
  --s-4:16px;   /* base gutter — matches the source site's 1rem body padding */
  --s-5:24px;
  --s-6:32px;
  --s-7:48px;
  --s-8:64px;

  --gutter:var(--s-4);
  --container-max:900px; /* @kind spacing */
  --stack-gap:var(--s-5);     /* gap between panels */
  --row-pad:.45rem .6rem; /* @kind spacing */

  /* Corners: the poster has none. Only plaques and chips get a whisper. */
  --radius-0:0;
  --radius-1:2px;
  --radius-2:4px;

  --hit-min:44px; /* @kind spacing */
}


/* ---- tokens/effects.css ---- */
:root{
  /* Borders — flat, hard, no soft edges */
  --bw-hair:1px;
  --bw-rule:2px;
  --bw-slab:4px;
  --border-panel:var(--bw-hair) solid var(--ink-700); /* @kind other */
  --border-loud:var(--bw-rule) solid var(--bone-100); /* @kind other */

  /* Letterpress: hard offset, zero blur. The only "shadow" the brand uses on flat elements. */
  --shadow-press:3px 3px 0 var(--ink-950);
  --shadow-press-lg:6px 6px 0 var(--ink-950);
  --shadow-press-red:3px 3px 0 var(--blood-900);

  /* Plaque bevel — light from above, engraved text */
  --bevel-plaque:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -1px 0 rgba(0,0,0,.45),0 2px 0 var(--brass-900),4px 6px 0 rgba(0,0,0,.55);
  --engrave-text:0 1px 0 rgba(255,255,255,.35);

  /* Spotlight — the ONLY glow in the system, reserved for 69s */
  --glow-nice:0 0 14px var(--nice-glow);
  --glow-nice-panel:inset 0 0 60px rgba(255,210,63,.09); /* @kind shadow */
  --spotlight-cone:radial-gradient(120% 90% at 50% -10%,rgba(255,210,63,.16) 0%,rgba(255,210,63,.04) 42%,transparent 70%); /* @kind other */

  /* Textures */
  --stripe-caution:repeating-linear-gradient(135deg,var(--ink-950) 0 8px,var(--ink-800) 8px 16px); /* @kind other */
  --stripe-brass:repeating-linear-gradient(90deg,rgba(255,255,255,.10) 0 2px,transparent 2px 5px); /* @kind other */
  --grain:radial-gradient(rgba(255,255,255,.022) 1px,transparent 1px); /* @kind other */
  --grain-size:3px 3px; /* @kind other */

  --text-shadow-poster:3px 3px 0 var(--ink-950);
  --scrim-poster:linear-gradient(180deg,transparent 0%,rgba(7,9,12,.85) 70%,var(--ink-950) 100%); /* @kind other */
}


/* ---- tokens/motion.css ---- */
:root{
  /* Print doesn't animate. Motion is limited to state feedback and one spotlight flicker. */
  --dur-instant:80ms; /* @kind other */
  --dur-fast:120ms; /* @kind other */
  --dur-slow:400ms; /* @kind other */
  --ease-flat:linear; /* @kind other */
  --ease-out:cubic-bezier(.2,.7,.35,1); /* @kind other */
  --press-shift:2px; /* @kind other */
}
@media (prefers-reduced-motion:no-preference){
  @keyframes nice-flicker{0%,100%{opacity:1}47%{opacity:.72}49%{opacity:1}92%{opacity:.85}}
}


/* ---- tokens/base.css ---- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--surface-page);color:var(--text-body);font:var(--text-prose);text-rendering:optimizeLegibility}
a{color:var(--text-link);text-decoration:none}
a:hover{color:var(--text-link-hover);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px}
::selection{background:var(--nice-400);color:var(--ink-950)}
h1,h2,h3,h4{margin:0;font-family:var(--font-poster);font-weight:var(--w-bold);line-height:var(--lh-poster);letter-spacing:var(--track-poster);text-transform:uppercase}
table{border-collapse:collapse;width:100%}
strong{font-weight:var(--w-bold)}
code,.num{font-family:var(--font-mono)}


/* ---- site rules ---- */



/* ---- chrome ---- */
.site-header{background:var(--ink-950);border-bottom:var(--bw-slab) solid var(--blood-700)}
.site-header .inner{max-width:var(--container-max);margin:0 auto;padding:var(--s-5) var(--gutter) var(--s-4)}
.wm{text-transform:uppercase}
.wm .top{font:700 clamp(30px,8vw,44px)/0.9 var(--font-poster);letter-spacing:-0.01em;color:var(--bone-100);text-shadow:var(--text-shadow-poster)}
.wm .sub{font:700 clamp(11px,3vw,14px)/1.2 var(--font-condensed);font-style:italic;letter-spacing:.22em;color:var(--hot-500);margin-top:2px}
.site-nav{max-width:var(--container-max);margin:0 auto;padding:0 var(--gutter);display:flex;gap:var(--s-2);overflow-x:auto}
.site-nav a{display:inline-flex;align-items:center;min-height:var(--hit-min);padding:0 var(--s-3);font:700 15px/1 var(--font-condensed);letter-spacing:.12em;text-transform:uppercase;color:var(--smoke-400);white-space:nowrap}
.site-nav a:hover{color:var(--nice-400);text-decoration:none}
.site-nav a[aria-current="page"]{background:var(--bone-100);color:var(--ink-950)}
.ticker{background:var(--blood-700);border-top:1px solid rgba(255,255,255,.12);border-bottom:1px solid rgba(0,0,0,.5);overflow:hidden;white-space:nowrap;padding:6px 0}
.ticker .in{display:inline-flex;gap:var(--s-6);padding-left:var(--gutter);font:600 13px/1 var(--font-condensed);letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.92)}
.ticker .in span::after{content:"◆";margin-left:var(--s-6);color:rgba(255,255,255,.35)}
main{max-width:var(--container-max);margin:0 auto;padding:0 var(--gutter)}
.site-footer{max-width:var(--container-max);margin:var(--s-8) auto 0;padding:var(--s-5) var(--gutter) var(--s-6);border-top:var(--border-panel);color:var(--text-dim);font:400 12px/1.6 var(--font-body)}

/* ---- poster hero ---- */
.poster{padding:var(--s-6) 0 var(--s-5)}
.poster .kicker{font:700 14px/1 var(--font-condensed);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--hot-500);margin-bottom:var(--s-2)}
.poster h1{font-size:var(--fs-poster-xl);text-shadow:var(--text-shadow-poster);text-wrap:balance}
.poster .receipt{font:500 14px/1.4 var(--font-mono);color:var(--text-dim);margin-top:var(--s-3)}

/* ---- sections ---- */
.section-h{display:flex;align-items:baseline;gap:var(--s-3);border-bottom:var(--border-loud);padding:var(--s-6) 0 var(--s-2);margin-bottom:var(--s-3)}
.section-h h2{font-size:var(--fs-poster-md);letter-spacing:.01em}
.section-h .note{font:700 12px/1 var(--font-condensed);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--text-dim);white-space:nowrap}
.section-h.nice h2{color:var(--nice-400)}
.footnote{color:var(--text-dim);font-size:13px;margin:var(--s-2) 0 0}
.footnote .num{color:var(--text-shame)}

/* ---- panels ---- */
.panel{background:var(--surface-panel);border:var(--border-panel);padding:var(--s-4);overflow-x:auto;-webkit-overflow-scrolling:touch}
.panel.nice{background:var(--spotlight-cone),var(--surface-sunk);border:1px solid var(--nice-600);box-shadow:var(--glow-nice-panel)}

/* ---- scoreboard tables ---- */
table.stats{width:100%;border-collapse:collapse;font-size:15px}
table.stats th{text-align:left;padding:var(--s-2);border-bottom:var(--border-loud);font:700 11px/1.2 var(--font-condensed);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--text-dim);white-space:nowrap}
table.stats td{padding:var(--row-pad);border-bottom:1px solid var(--border-hairline);white-space:nowrap}
table.stats td.wrap{white-space:normal;min-width:140px}
table.stats tr:nth-child(even) td{background:rgba(255,255,255,.02)}
table.stats .num{text-align:right;font-family:var(--font-mono);font-size:14px}
table.stats th.num{font-family:var(--font-condensed)}
table.stats .owner{color:var(--text-dim);font-size:13px}
table.stats .good{color:var(--text-good)}
table.stats .shame{color:var(--text-shame)}
table.stats tr.rk-1 td:first-child{border-left:4px solid var(--brass-500)}
table.stats tr.rk-last td:first-child{border-left:4px solid var(--hot-500)}
table.stats tr td:first-child{border-left:4px solid transparent}
.nice-val{color:var(--text-nice);text-shadow:var(--glow-nice);font-weight:500}
.nice-tag{font:700 10px/1 var(--font-condensed);letter-spacing:.28em;text-transform:uppercase;color:var(--nice-600);margin-left:6px}

/* ---- recap feed ---- */
.recap{background:var(--surface-panel);border:var(--border-panel);padding:var(--s-4);display:flex;gap:var(--s-4);margin:var(--s-3) 0}
.recap .wk{flex-shrink:0;width:54px;text-align:center;border-right:var(--border-panel);padding-right:var(--s-3)}
.recap .wk i{display:block;font:700 10px/1 var(--font-condensed);font-style:normal;letter-spacing:.2em;color:var(--text-dim);text-transform:uppercase}
.recap .wk b{font:700 34px/1.1 var(--font-poster);color:var(--hot-500)}
.recap .body{min-width:0}
.recap .date{font:700 11px/1 var(--font-condensed);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--text-dim);margin-bottom:var(--s-2)}
.recap p{margin:0;font-size:15px;white-space:pre-wrap}

/* ---- brass plaques ---- */
.plaque-grid{display:grid;gap:var(--s-4);grid-template-columns:1fr;margin:var(--s-3) 0}
.plaque{background:var(--stripe-brass),var(--surface-plaque);box-shadow:var(--bevel-plaque);border-radius:var(--radius-1);padding:var(--s-4) var(--s-4) var(--s-3)}
.plaque .top{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-3);font:700 11px/1.2 var(--font-condensed);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--brass-900)}
.plaque h3{margin:var(--s-2) 0 2px;font-size:24px;line-height:.95;color:var(--text-engraved);text-shadow:var(--engrave-text)}
.plaque .team{font:700 13px/1.3 var(--font-condensed);letter-spacing:.08em;text-transform:uppercase;color:var(--brass-900)}
.plaque .receipt{margin-top:var(--s-3);border-top:1px solid rgba(74,54,16,.45);padding-top:var(--s-2);font:500 13px/1.5 var(--font-mono);color:var(--engrave)}
.stamp{display:inline-block;padding:3px 8px;border:2px solid var(--blood-900);background:var(--blood-700);color:#fff;font:700 11px/1.2 var(--font-condensed);letter-spacing:.14em;text-transform:uppercase;border-radius:var(--radius-1);transform:rotate(-1.2deg)}

/* ---- grudge matrix ---- */
table.grudge{width:100%;border-collapse:collapse}
table.grudge th{padding:var(--s-2);font:700 11px/1.2 var(--font-condensed);letter-spacing:.08em;text-transform:uppercase;color:var(--text-dim);border-bottom:var(--border-loud);text-align:center}
table.grudge th:first-child{text-align:left}
table.grudge td{padding:var(--s-2);border-bottom:1px solid var(--border-hairline);text-align:center}
table.grudge td.who{text-align:left;font:700 13px/1.2 var(--font-condensed);letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}
table.grudge td.self{background:var(--stripe-caution);color:var(--ink-600);font-family:var(--font-mono)}
table.grudge .rec{font:500 16px/1 var(--font-mono)}
table.grudge .rec.win{color:var(--text-good)}
table.grudge .rec.loss{color:var(--text-shame)}
table.grudge .avg{font:500 10px/1.6 var(--font-mono);color:var(--text-dim)}

/* ---- callouts ---- */
.callout-grid{display:grid;gap:var(--s-4);grid-template-columns:1fr;margin:var(--s-3) 0}
.callout{padding:var(--s-4);display:flex;flex-direction:column;gap:var(--s-2);border:2px solid var(--blood-900);background:var(--blood-700);box-shadow:var(--shadow-press-red)}
.callout .lab{font:700 11px/1 var(--font-condensed);letter-spacing:var(--track-label);text-transform:uppercase;color:rgba(255,255,255,.7)}
.callout .head{font:700 clamp(20px,4.5vw,30px)/0.95 var(--font-poster);text-transform:uppercase;color:#fff}
.callout .receipt{font:500 13px/1.4 var(--font-mono);color:rgba(255,255,255,.85)}
.callout.ink{background:var(--ink-950);border-color:var(--ink-700);box-shadow:var(--shadow-press)}
.callout.ink .lab{color:var(--text-dim)}
.callout.ink .head{color:var(--bone-100)}
.callout.ink .receipt{color:var(--smoke-400)}
.callout.nice{background:var(--spotlight-cone),var(--ink-950);border-color:var(--nice-600);box-shadow:var(--glow-nice)}
.callout.nice .lab{color:var(--nice-600)}
.callout.nice .head{color:var(--nice-400)}
.callout.nice .receipt{color:var(--smoke-400)}

@media (min-width:640px){
  .plaque-grid{grid-template-columns:1fr 1fr}
  .callout-grid{grid-template-columns:1fr 1fr}
}