/* East Coast Offense — site stylesheet.
   Design from Mark's mockup (D:\EastCoastOffense\East Coast Offense Coaching System.png):
   deep navy, red accent, blue for routes and icons, condensed display type, dark
   panels with thin rules. Dark only, by design. Diagram classes are the
   playbook's own, recoloured to this palette. */
:root {
  --bg: #0B1424; --bg-2: #0E1A2E; --surface: #121E33; --panel: #16243B; --board: #0F1B2E;
  --ink: #F2F5F9; --muted: #9AA7BA; --dim: #6B7A91; --rule: #223049; --rule-2: #2C3C58;
  --accent: #E11D2E; --accent-2: #FF4D5A; --sea: #4F8CFF; --ok: #3DD68C; --on-accent: #FFFFFF;
  --display: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
  --body: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: 90px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { background: var(--bg); color: var(--ink); font: 400 16px/1.6 var(--body); margin: 0; }
.wrap { max-width: 1180px; margin: 0 auto; padding-inline: clamp(16px, 4vw, 40px); }
a { color: var(--sea); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
p { margin: 0; }
img, svg { max-width: 100%; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.icon { width: 24px; height: 24px; }

/* ── Header + nav ── */
.top { position: sticky; top: 0; z-index: 20; background: rgba(11, 20, 36, .92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--rule); }
.top .wrap { display: flex; align-items: center; gap: 24px; min-height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); margin-right: auto; }
.brand .mark { flex: none; }
.wordmark { font: 800 17px/.92 var(--display); letter-spacing: .04em; text-transform: uppercase; }
.wordmark em { font-style: normal; color: var(--accent-2); }
.nav { display: flex; align-items: center; gap: 22px; }
.nav > ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; }
.nav > ul > li { position: relative; }
.nav > ul > li > a { display: block; padding: 10px 12px; font: 600 14px/1 var(--display); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; color: var(--muted); border-radius: 4px; }
.nav > ul > li > a:hover, .nav > ul > li > a[aria-current="page"] { color: var(--ink); }
.nav > ul > li > a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--accent); }
.has-menu > a::after { content: " ▾"; font-size: 11px; }
.menu { position: absolute; top: 100%; left: 0; min-width: 220px; list-style: none; margin: 0; padding: 8px; background: var(--surface); border: 1px solid var(--rule-2); border-radius: 6px; box-shadow: 0 16px 40px rgba(0, 0, 0, .45); display: none; }
.has-menu:hover .menu, .has-menu:focus-within .menu { display: block; }
.menu a { display: block; padding: 9px 12px; border-radius: 4px; color: var(--ink); text-decoration: none; font-size: 14.5px; }
.menu a:hover { background: var(--panel); }
.top-actions { display: flex; align-items: center; gap: 8px; }
.nav-toggle { display: none; background: transparent; color: var(--ink); border: 1px solid var(--rule-2); border-radius: 4px; font-size: 18px; padding: 6px 10px; cursor: pointer; }
@media (max-width: 900px) {
  .nav-toggle { display: inline-block; }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 10px; padding: 14px clamp(16px, 4vw, 40px) 20px; background: var(--bg-2); border-bottom: 1px solid var(--rule); }
  .nav.open { display: flex; }
  .nav > ul { flex-direction: column; }
  .menu { position: static; display: block; box-shadow: none; border: 0; background: transparent; padding: 0 0 0 12px; }
  .has-menu > a::after { content: ""; }
  .top-actions { justify-content: flex-start; flex-wrap: wrap; }
}

/* ── Buttons, chips ── */
.btn { display: inline-flex; align-items: center; gap: 8px; font: 700 14px/1 var(--body); padding: 12px 18px; border-radius: 4px; border: 1px solid var(--rule-2); background: var(--panel); color: var(--ink); text-decoration: none; cursor: pointer; white-space: nowrap; }
.btn:hover { border-color: var(--muted); }
.btn.ghost { background: transparent; }
.btn.accent { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn.accent:hover { background: var(--accent-2); border-color: var(--accent-2); }
.btn.sm { padding: 8px 12px; font-size: 13px; font-weight: 600; }
.btn.lg { padding: 15px 24px; font-size: 15px; }
.chip { display: inline-block; font: 500 11.5px/1 var(--mono); letter-spacing: .04em; padding: 5px 8px; border: 1px solid var(--rule-2); border-radius: 3px; color: var(--muted); white-space: nowrap; }
.chip.ok { color: var(--ok); border-color: var(--ok); }
.chip.run { color: var(--accent-2); border-color: var(--accent-2); }
.chip.pass { color: var(--sea); border-color: var(--sea); }
.chip.fill { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; font-size: 10.5px; }
.flag { font: 500 11.5px/1 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--on-accent); background: var(--accent); padding: 6px 8px; border-radius: 3px; }
.flash { margin: 18px auto 0; padding: 12px 16px; border-left: 3px solid var(--ok); background: var(--surface); font-size: 15px; }
.flash.err { border-left-color: var(--accent); }

/* ── Type ── */
.eyebrow { font: 600 12px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--accent-2); }
.eyebrow.quiet { color: var(--muted); }
h1 { font: 800 clamp(44px, 7.5vw, 86px)/.9 var(--display); letter-spacing: -.005em; text-transform: uppercase; margin: 12px 0 0; text-wrap: balance; }
h1 span, h2 span { color: var(--accent-2); }
h2 { font: 800 clamp(30px, 4.2vw, 44px)/.95 var(--display); text-transform: uppercase; letter-spacing: .005em; margin: 0 0 8px; text-wrap: balance; }
.h3, h3 { font: 700 22px/1.05 var(--display); text-transform: uppercase; letter-spacing: .03em; margin: 0; }
.h4, h4 { font: 600 12px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; }
.tagline { font: 600 clamp(22px, 3vw, 30px)/1.15 var(--display); letter-spacing: .01em; margin-top: 18px; }
.lead { margin-top: 16px; max-width: 58ch; font-size: 17.5px; color: var(--ink); }
.kicker { color: var(--muted); max-width: 66ch; margin-top: 14px; font-size: 16.5px; }
.ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
section.band { padding-block: clamp(36px, 5vw, 64px); }
section.band + section.band { border-top: 1px solid var(--rule); }
.band-head { display: grid; gap: 10px 40px; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: end; margin-bottom: 26px; }
.band-head .kicker { margin: 0; justify-self: start; }
.band-head .more { font: 600 14px/1 var(--body); color: var(--sea); text-decoration: none; justify-self: end; white-space: nowrap; }
.prose { max-width: 66ch; display: grid; gap: 14px; }
.cols { display: grid; gap: 22px 40px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); margin-top: 26px; }
.cols.two { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.cols > div { min-width: 0; display: grid; gap: 8px; align-content: start; }
.cols p, .small { font-size: 15px; }
.aside { margin-top: 28px; padding: 16px 18px; background: var(--surface); border-left: 3px solid var(--sea); max-width: 76ch; font-size: 15px; display: grid; gap: 8px; border-radius: 0 6px 6px 0; }
.aside strong { font-weight: 600; color: var(--ink); }
.note-card { margin-top: 28px; padding: 20px 22px; border: 1px solid var(--rule-2); border-radius: 8px; background: var(--surface); display: grid; gap: 10px; }
.url { display: block; font: 400 11.5px/1.4 var(--mono); color: var(--dim); overflow-wrap: anywhere; }

/* ── Page hero (section pages) ── */
.page-hero { padding-block: clamp(36px, 6vw, 70px) clamp(22px, 4vw, 40px); background: radial-gradient(ellipse at 20% 0%, rgba(79, 140, 255, .14), transparent 55%), radial-gradient(ellipse at 90% 20%, rgba(225, 29, 46, .12), transparent 50%); border-bottom: 1px solid var(--rule); }

/* ── Home hero ── */
.hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--rule); background: radial-gradient(ellipse at 15% 20%, rgba(79, 140, 255, .18), transparent 50%), radial-gradient(ellipse at 85% 80%, rgba(225, 29, 46, .16), transparent 55%), var(--bg-2); }
.hero .wrap { position: relative; display: grid; gap: 28px 48px; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; padding-block: clamp(44px, 8vw, 96px); min-height: 520px; }
.hero-art { position: absolute; inset: 0; pointer-events: none; opacity: .22; }
.hero-art svg { position: absolute; right: -6%; top: 50%; transform: translateY(-50%) rotate(-6deg); width: 62%; height: auto; min-width: 620px; }
.hero-art .f-bg { fill: transparent; } .hero-art .f-line, .hero-art .f-hash, .hero-art .f-los { stroke: #fff; } .hero-art .f-num, .hero-art .tag { display: none; }
.hero-art .o-node { fill: var(--bg-2); stroke: #fff; } .hero-art .o-text { fill: #fff; } .hero-art .d-node { stroke: #fff; }
.hero-art .p-block, .hero-art .p-fake, .hero-art .p-qb, .hero-art .p-motion, .hero-art .h-fake, .hero-art .h-qb { stroke: #fff; fill: none; }
.hero-art .h-fake, .hero-art .h-qb { fill: #fff; }
.hero-chalk { position: absolute; right: 6%; top: 10%; font: 500 14px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .55); transform: rotate(-6deg); }
.hero-copy { position: relative; }
.hero-photo { position: relative; aspect-ratio: 4/3; border-radius: 8px; overflow: hidden; display: none; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.stats { position: relative; z-index: 1; list-style: none; margin: 0; padding: 6px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; background: rgba(18, 30, 51, .85); border: 1px solid var(--rule-2); border-radius: 8px; backdrop-filter: blur(6px); justify-self: end; max-width: 360px; width: 100%; }
.stats li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 2px 12px; align-items: center; padding: 16px 14px; background: var(--bg-2); border-radius: 5px; }
.stats .icon { grid-row: 1 / span 2; color: var(--sea); }
.stats b { font: 800 32px/1 var(--display); font-variant-numeric: tabular-nums; }
.stats span { font: 600 11px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

/* ── Idea cards ── */
.ideas { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.idea-card { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 6px 18px; padding: 22px; background: var(--surface); border: 1px solid var(--rule); border-radius: 8px; }
.idea-card .ico { grid-row: 1 / span 2; width: 56px; height: 56px; display: grid; place-items: center; border-radius: 8px; background: var(--panel); color: var(--sea); }
.idea-card .ico .icon { width: 28px; height: 28px; }
.idea-card .h3 { font-size: 20px; }
.idea-card p { font-size: 14.5px; color: var(--muted); }

/* ── Evidence ── */
.ev { display: grid; margin-top: 26px; }
.ev > div { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 8px 36px; padding-block: 16px; border-top: 1px solid var(--rule); }
.ev > div:first-child { border-top: 2px solid var(--rule-2); }
.ev dt { font-weight: 600; }
.ev dd { margin: 0; font-size: 15px; }
.ev .src { display: block; margin-top: 6px; font-size: 13.5px; color: var(--muted); font-weight: 400; }
.ev .does::before { content: "The offense: "; font: 500 11.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--accent-2); }

/* ── Tables ── */
.scroll { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 14.5px; font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: 9px 10px 9px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
thead th { font: 500 11.5px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); border-bottom: 2px solid var(--rule-2); white-space: nowrap; }
tbody th { font-weight: 600; }
td.num, th.num { text-align: right; padding-right: 0; padding-left: 12px; font-family: var(--mono); white-space: nowrap; }
.unit { text-transform: none; letter-spacing: 0; opacity: .8; }
.zero { color: var(--rule-2); }

/* ── Roles ── */
.roles { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); margin: 26px 0 34px; }
.role { background: var(--surface); border: 1px solid var(--rule); border-radius: 8px; padding: 18px; display: grid; gap: 8px; align-content: start; }
.role header { display: flex; align-items: center; gap: 12px; }
.role-dot { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--sea); color: var(--sea); font: 700 15px/1 var(--body); flex: none; }
.role p { font-size: 14.5px; }
.role .test { color: var(--muted); font-size: 13.5px; }
.fitw { font-size: 13.5px; margin-top: 10px; }
.fitw .role-dot { width: 22px; height: 22px; font-size: 11px; border-width: 1.5px; margin-right: 8px; vertical-align: middle; }

/* ── Diagrams ── */
.board { overflow-x: auto; border-radius: 6px; border: 1px solid var(--rule); }
.board svg { display: block; width: 100%; min-width: 540px; height: auto; }
.board.thumb svg { min-width: 0; }
.f-bg { fill: var(--board); }
.f-line { stroke: var(--rule-2); stroke-width: 1; }
.f-hash { stroke: var(--dim); stroke-width: 1; opacity: .7; }
.f-los { stroke: var(--muted); stroke-width: 1.6; }
.f-num, .tag { paint-order: stroke; stroke: var(--board); stroke-width: 4px; stroke-linejoin: round; }
.f-num { fill: var(--dim); font: 400 10px var(--mono); }
.o-node { fill: var(--surface); stroke: var(--ink); stroke-width: 1.6; }
.o-text { fill: var(--ink); font: 600 11.5px var(--body); }
.d-node { fill: none; stroke: var(--muted); stroke-width: 1.4; }
.p { fill: none; stroke-linejoin: round; stroke-linecap: round; }
.p-block { stroke: var(--ink); stroke-width: 1.8; }
.p-fake { stroke: var(--ink); stroke-width: 1.6; stroke-dasharray: 5 4; }
.p-qb { stroke: var(--ink); stroke-width: 1.6; }
.p-route { stroke: var(--sea); stroke-width: 2.4; }
.p-ball { stroke: var(--accent-2); stroke-width: 3.4; }
.p-qbrun { stroke: var(--accent-2); stroke-width: 2.8; stroke-dasharray: 8 4; }
.p-motion { stroke: var(--ink); stroke-width: 1.8; stroke-dasharray: 1 5; }
.h-fake, .h-qb { fill: var(--ink); } .h-route { fill: var(--sea); } .h-ball, .h-qbrun { fill: var(--accent-2); }
.snap { fill: var(--board); stroke: var(--ink); stroke-width: 1.4; }
.tag { fill: var(--sea); font: 500 10.5px var(--mono); }
.legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13.5px; color: var(--muted); }
.legend li { display: flex; align-items: center; gap: 7px; }
.legend svg { width: 34px; height: 12px; flex: none; }
.bar-top { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; justify-content: space-between; margin: 24px 0 16px; }
.flipper { display: flex; align-items: center; gap: 10px; font: 500 12.5px var(--mono); color: var(--muted); }

/* ── Formations ── */
.form-row { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 14px 30px; align-items: center; padding-block: 18px; border-top: 1px solid var(--rule); }
.form-text { display: grid; gap: 8px; }
.form-text p { font-size: 15px; }
.form-text .how { color: var(--muted); font-size: 14px; }
.legal { display: flex; flex-wrap: wrap; gap: 6px; }

/* ── Blocking words, install steps ── */
.words { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); margin-top: 26px; }
.word { padding: 20px; background: var(--surface); border: 1px solid var(--rule); border-top: 3px solid var(--accent); border-radius: 8px; display: grid; gap: 8px; align-content: start; }
.word p { font-size: 15px; }
.steps { list-style: none; margin: 26px 0 0; padding: 0; display: grid; }
.steps li { display: grid; grid-template-columns: 5.5em minmax(0, 1fr); gap: 6px 22px; padding-block: 14px; border-top: 1px solid var(--rule); }
.steps b { font: 800 22px/1.1 var(--display); text-transform: uppercase; letter-spacing: .03em; color: var(--accent-2); }
.steps span { font-size: 15px; }
.sources { margin: 0; padding-left: 18px; display: grid; gap: 9px; font-size: 14.5px; }
.sources li { overflow-wrap: anywhere; }

/* ── Plays ── */
.group-title { display: flex; align-items: baseline; gap: 14px; margin: 34px 0 12px; }
.group-title span { font: 500 12.5px var(--mono); color: var(--muted); letter-spacing: .05em; text-transform: uppercase; }
.play-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); }
.play-grid.wide { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.play-card { display: grid; gap: 10px; align-content: start; padding: 12px; background: var(--surface); border: 1px solid var(--rule); border-radius: 8px; text-decoration: none; color: var(--ink); transition: border-color .15s, transform .15s; }
.play-card:hover { border-color: var(--sea); transform: translateY(-2px); }
.play-card .board { border-radius: 4px; }
.play-card .name { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.play-card .h3 { font-size: 20px; }
.play-card .idea { font-size: 13.5px; color: var(--muted); }
.play-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin-top: 10px; }
.play-head .type { font: 600 19px/1 var(--display); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.play-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.idea { font-size: 17px; font-weight: 500; max-width: 70ch; margin-top: 14px; }
.play-body { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 18px 36px; margin-top: 22px; align-items: start; }
.jobs { margin: 0; display: grid; gap: 10px; }
.jobs dt { font: 500 11.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.jobs dd { margin: 1px 0 0; font-size: 14.5px; }
.note { font-size: 14px; padding-left: 12px; border-left: 3px solid var(--accent); }
.pager { display: flex; justify-content: space-between; gap: 16px; margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--rule); font-size: 14.5px; }
.pager a { text-decoration: none; color: var(--ink); }
.pager small { display: block; font: 500 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }

/* ── Feature bands (home) ── */
.feature { display: grid; gap: 28px 48px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
.feature .photo { aspect-ratio: 4/3; border-radius: 8px; overflow: hidden; background: linear-gradient(135deg, var(--panel), var(--bg-2)); border: 1px solid var(--rule); display: grid; place-items: center; }
.feature .photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.feature .photo .board { border: 0; width: 100%; }
.checks { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; }
.checks li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; }
.checks .icon { flex: none; color: var(--accent-2); width: 20px; height: 20px; margin-top: 2px; }
.cta-band { position: relative; padding-block: clamp(40px, 6vw, 72px); background: radial-gradient(ellipse at 10% 50%, rgba(79, 140, 255, .14), transparent 50%), radial-gradient(ellipse at 90% 50%, rgba(225, 29, 46, .14), transparent 50%), var(--bg-2); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); text-align: center; }
.cta-band .kicker { margin: 10px auto 0; }
.tool-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); margin-top: 30px; text-align: left; }
.tool-card { display: grid; gap: 10px; padding: 22px; background: var(--surface); border: 1px solid var(--rule); border-radius: 8px; align-content: start; }
.tool-card .ico { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 8px; background: var(--accent); color: #fff; }
.tool-card .h3 { font-size: 20px; }
.tool-card p { font-size: 14.5px; color: var(--muted); }
.tool-card .btn { justify-self: start; margin-top: 4px; }

/* ── Tide Table ── */
.matrix { border-collapse: separate; border-spacing: 2px; font: 400 12.5px/1 var(--mono); }
.matrix th, .matrix td { border: 0; padding: 7px 3px; text-align: center; vertical-align: middle; }
.matrix tbody th { text-align: left; font: 600 13.5px/1.2 var(--body); padding-right: 10px; white-space: nowrap; }
.matrix td.num { text-align: center; min-width: 38px; border-radius: 2px; background: var(--surface); }
.matrix td.split { color: var(--muted); background: transparent; }
.matrix thead th { text-align: center; }
.matrix th.v { height: 84px; vertical-align: bottom; padding-bottom: 6px; }
.matrix th.v span { display: inline-block; writing-mode: vertical-rl; text-orientation: sideways; transform: rotate(180deg); white-space: nowrap; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; font-size: 11px; }
.matrix th.v.run span { color: var(--accent-2); } .matrix th.v.pass span { color: var(--sea); }
.matrix .groups th { padding: 0 0 5px; border-bottom: 2px solid var(--rule-2); font: 500 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.matrix .groups th:first-child { border-bottom: 0; }
.matrix .groups .run { border-bottom-color: var(--accent-2); color: var(--accent-2); }
.matrix .groups .pass { border-bottom-color: var(--sea); color: var(--sea); }
.sits { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 16px 24px; margin-top: 20px; }
.sit { border: 1px solid var(--rule); border-radius: 8px; padding: 16px 18px 10px; background: var(--surface); }
.sit header { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.sit .h3 { font-size: 22px; }
.sit .why { font-size: 13.5px; color: var(--muted); margin: 6px 0 8px; }
.menu-table { font-size: 13px; }
.menu-table th, .menu-table td { padding: 4px 8px 4px 0; vertical-align: middle; }
.menu-table td.bar { width: 34%; min-width: 80px; }
.menu-table tbody tr:last-child th, .menu-table tbody tr:last-child td { border-bottom: 0; }
.track { display: block; height: 7px; background: var(--board); border-radius: 2px; }
.fill { display: block; height: 7px; border-radius: 2px; max-width: 100%; }
.fill.run { background: var(--accent-2); } .fill.pass { background: var(--sea); }
.range { color: var(--muted); }
ol.house { margin: 0; padding-left: 20px; display: grid; gap: 8px; font-size: 15px; }
.rollsteps { padding-left: 20px; margin: 10px 0 0; display: grid; gap: 6px; font-size: 15px; max-width: 80ch; }
.mix { font-size: 13px; margin-top: 10px; }
.mix .gap { padding-left: 22px; }
.mix .groups th { text-align: center; border-bottom: 1px solid var(--rule); font-weight: 500; }
.mix .groups th:first-child { border-bottom: 0; }
.mix .sub { display: block; font: 400 11.5px/1.3 var(--body); color: var(--muted); }

/* ── FAQ ── */
.faq { padding-block: clamp(36px, 5vw, 64px); border-top: 1px solid var(--rule); }
.faq-grid { display: grid; gap: 0 28px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); margin-top: 18px; }
.faq details { border: 1px solid var(--rule); border-radius: 6px; background: var(--surface); margin-bottom: 10px; }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 14px 16px; font-weight: 600; font-size: 15.5px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 400 22px/1 var(--mono); color: var(--accent-2); flex: none; }
.faq details[open] summary::after { content: "−"; }
.faq .a { padding: 0 16px 16px; font-size: 15px; color: var(--muted); }
.faq .a a { color: var(--sea); }

/* ── Forms (accounts) ── */
.form-page { max-width: 480px; margin: 0 auto; padding-block: clamp(28px, 5vw, 60px); }
.form-page h1 { font-size: clamp(36px, 6vw, 56px); }
.form-page .lead { font-size: 16px; color: var(--muted); }
form.card { display: grid; gap: 16px; margin-top: 24px; padding: 24px; background: var(--surface); border: 1px solid var(--rule); border-radius: 8px; }
label { display: grid; gap: 6px; font: 500 11.5px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
input, select, textarea { font: 400 16px/1.3 var(--body); color: var(--ink); background: var(--bg); border: 1px solid var(--rule-2); border-radius: 4px; padding: 11px 12px; width: 100%; }
.err { padding: 10px 14px; border-left: 3px solid var(--accent); background: var(--panel); font-size: 14.5px; }
.ok { padding: 10px 14px; border-left: 3px solid var(--ok); background: var(--panel); font-size: 14.5px; }
.links { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 14px; }
.inline-form { display: inline; }

/* ── Footer ── */
footer.site { margin-top: 0; padding-block: 40px 28px; border-top: 1px solid var(--rule); color: var(--muted); font-size: 14px; background: var(--bg-2); }
footer.site .grid { display: grid; gap: 24px 40px; grid-template-columns: 1.4fr 1fr 1fr 1fr; }
footer.site ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
footer.site a { color: var(--muted); text-decoration: none; }
footer.site a:hover { color: var(--ink); }
footer.site .h4 { margin-bottom: 12px; color: var(--ink); }
footer.site .slogan { font: 700 22px/1.1 var(--display); text-transform: uppercase; letter-spacing: .03em; color: var(--ink); }
footer.site .slogan em { font-style: normal; color: var(--accent-2); display: block; }
footer.site .bottom { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--rule); font-size: 13px; color: var(--dim); }

@media (max-width: 900px) {
  .hero .wrap { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .hero-art { opacity: .1; }
  .hero-art svg { right: -30%; top: auto; bottom: -10%; transform: rotate(-6deg); width: 110%; }
  .hero-chalk { display: none; }
  .stats { justify-self: start; max-width: none; }
  .band-head { grid-template-columns: minmax(0, 1fr); }
  .band-head .more { justify-self: start; }
  .feature { grid-template-columns: minmax(0, 1fr); }
  footer.site .grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .form-row, .play-body, .ev > div { grid-template-columns: minmax(0, 1fr); }
  .play-meta { margin-left: 0; }
  .steps li { grid-template-columns: minmax(0, 1fr); }
  footer.site .grid { grid-template-columns: 1fr; }
}