/* The Bleacher Guide (ghbulldoghockey.com) v1.0. Own front end (SPEC 5): League Gothic + Onest, ice / boards ink /
   rink red; rink blue only inside rink drawings. References: Nike (condensed display, ink/ice contrast, one accent),
   Apple guided tours (one idea per step, numbered stepper), ESPN (score-bug strips, period tabs). */
@font-face { font-family: "League Gothic"; src: url("fonts/league-gothic.woff2") format("woff2"); font-weight: 400; font-stretch: 75% 100%; font-display: swap; }
@font-face { font-family: "Onest"; src: url("fonts/onest.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --ice: #f2f5f6; --ice2: #e5ebed; --white: #fff; --ink: #111518; --ink2: #262e34; --muted: #56626b; --rule: rgba(17, 21, 24, .14);
  --red: #c8262d; --red-d: #a01d22; --red-t: #fbeaea; --blue: #2c6bd6; --crease: #cfe3f5;
  --disp: "League Gothic", "Arial Narrow", "Roboto Condensed", Impact, sans-serif;
  --ui: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --wrap: 1200px; --pad: clamp(18px, 4vw, 32px);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ice); color: var(--ink); font: 400 17px/1.6 var(--ui); }
img, svg { max-width: 100%; }
a { color: var(--ink); text-decoration-color: var(--red); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--red-d); }
:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); }
.narrow { max-width: 780px; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--white); color: var(--ink); padding: 10px 16px; font-weight: 700; border: 2px solid var(--ink); }
.skip:focus { top: 12px; }
main:focus { outline: none; }
[hidden] { display: none !important; }

/* ---- type */
.display { font-family: var(--disp); font-weight: 400; text-transform: uppercase; letter-spacing: .01em; line-height: .92; font-size: clamp(40px, 5.4vw, 72px); margin: 0 0 .3em; }
.display.xl { font-size: clamp(60px, 8.6vw, 124px); line-height: .86; }
.display.sm { font-size: clamp(32px, 3.6vw, 46px); line-height: .96; }
.kicker { font: 700 12.5px/1.3 var(--ui); letter-spacing: .14em; text-transform: uppercase; color: var(--red); margin: 0 0 12px; }
.lede { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.5; color: var(--ink2); max-width: 40em; }
.h-sm { font: 800 15px/1.3 var(--ui); letter-spacing: .1em; text-transform: uppercase; margin: 2.2em 0 .6em; }
.fine { font-size: 14px; color: var(--muted); }
.prose p { max-width: 40em; }

/* ---- buttons */
.btn { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 12px 22px; border: 2px solid transparent; border-radius: 3px; font: 800 14px/1 var(--ui); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; cursor: pointer; }
.btn-red { background: var(--red); color: var(--white); }
.btn-red:hover { background: var(--red-d); color: var(--white); }
.btn-ink { background: var(--ink); color: var(--white); }
.btn-ink:hover { background: var(--ink2); color: var(--white); }
.btn-line { background: transparent; border-color: var(--ink); color: var(--ink); }
.btn-line:hover { background: var(--ink); color: var(--white); }
.btn-danger { background: transparent; border-color: var(--red); color: var(--red-d); }
.btn-danger:hover { background: var(--red); color: var(--white); }

/* ---- unofficial strip, scoreboard header, preview note */
.unoff { background: #07090a; color: #c3ccd1; font-size: 13px; line-height: 1.4; padding: 7px 0; }
.unoff strong { color: var(--white); letter-spacing: .04em; }
.board { background: var(--ink); color: var(--white); border-bottom: 4px solid var(--red); }
.board-row { display: flex; align-items: stretch; gap: 20px; min-height: 76px; }
.mark { display: flex; flex-direction: column; justify-content: center; text-decoration: none; color: var(--white); padding: 10px 0; flex: none; }
.mark-word { font: 400 36px/.9 var(--disp); text-transform: uppercase; letter-spacing: .02em; }
.mark-word i { font-style: normal; color: var(--red); margin-left: .12em; }
.mark-word.sm { font-size: 30px; margin: 0 0 8px; }
.mark-sub { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #9aa6ad; margin-top: 4px; }
.tabs { flex: 1; display: flex; min-width: 0; }
.tabs ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: stretch; gap: 2px; }
.tabs a { display: flex; flex-direction: column; justify-content: center; height: 100%; padding: 8px 14px; color: #dfe5e8; text-decoration: none; border-left: 1px solid rgba(255, 255, 255, .08); white-space: nowrap; position: relative; }
.tabs a small { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: #8c989f; }
.tabs a span { font: 400 23px/1 var(--disp); text-transform: uppercase; letter-spacing: .03em; }
.tabs a:hover { background: var(--ink2); color: var(--white); }
.tabs a[aria-current="page"] { background: #1c2328; color: var(--white); }
.tabs a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 4px; background: var(--white); }
.passchip { flex: none; display: grid; grid-template-columns: auto auto; align-content: center; column-gap: 10px; margin: 12px 0; padding: 6px 14px; border: 2px solid var(--red); border-radius: 3px; color: var(--white); text-decoration: none; }
.passchip:hover { background: var(--red); color: var(--white); }
.pc-k { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: #f1b5b7; align-self: end; }
.pc-v { font: 400 26px/1 var(--disp); grid-row: span 2; align-self: center; }
.pc-v small { font: 600 12px var(--ui); color: #c3ccd1; }
.pc-f { font-size: 11px; color: #c3ccd1; }
.preview { background: var(--white); border-bottom: 1px solid var(--rule); font-size: 14.5px; line-height: 1.45; padding: 10px 0; color: var(--ink2); background-image: repeating-linear-gradient(90deg, var(--red) 0 10px, transparent 10px 16px); background-size: 100% 2px; background-repeat: no-repeat; background-position: top; }
.preview b { color: var(--red-d); text-transform: uppercase; letter-spacing: .08em; font-size: 12.5px; margin-right: 4px; }

@media (max-width: 1080px) {
  .board-row { flex-wrap: wrap; gap: 0 16px; }
  .mark { order: 1; }
  .passchip { order: 2; margin-left: auto; }
  .tabs { order: 3; flex-basis: 100%; border-top: 1px solid rgba(255, 255, 255, .1); margin: 0 calc(-1 * var(--pad)); padding: 0 var(--pad); }
  .tabs a { padding: 8px 12px; }
  .tabs a span { font-size: 20px; }
}
/* GHB-T1 (v1.0.1): on a phone all six tabs show at once, three across in two rows: nothing hides off-screen */
@media (max-width: 620px) {
  .tabs ul { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; gap: 0; }
  .tabs li { display: flex; }
  .tabs a { flex: 1; padding: 7px 8px; white-space: normal; border-top: 1px solid rgba(255, 255, 255, .08); }
  .tabs li:nth-child(3n+1) a { border-left: 0; }
  .tabs a small { font-size: 9px; letter-spacing: .12em; }
  .tabs a span { font-size: 19px; }
  .tabs a[aria-current="page"]::after { bottom: 0; height: 3px; }
}
@media (max-width: 520px) {
  .mark-word { font-size: 30px; }
  .pc-f { display: none; }
  .pc-v { font-size: 22px; }
  .passchip { padding: 4px 10px; }
}

/* ---- rink drawing (Rink::svg) */
.rink { display: block; width: 100%; height: auto; font-family: var(--ui); }
.rink .ice { fill: var(--white); stroke: var(--ink); stroke-width: 1.3; }
.rink .ice.on { stroke: var(--red); stroke-width: 2.2; }
.rink .zone { fill: transparent; transition: fill .4s; }
.rink .zone.on { fill: rgba(44, 107, 214, .11); }
.rink .zone.half.on { fill: rgba(200, 38, 45, .08); }
.rink .goal { stroke: var(--red); stroke-width: .35; }
.rink .goal.on { stroke-width: 1.2; }
.rink .blueline { fill: var(--blue); }
.rink .blueline.on, .rink .redline.on { stroke: var(--ink); stroke-width: .7; }
.rink .redline { fill: var(--red); }
.rink .circ { fill: none; stroke: var(--red); stroke-width: .3; }
.rink .circ.on { fill: rgba(200, 38, 45, .08); stroke-width: .9; }
.rink .dot { fill: var(--red); }
.rink .dot.c { fill: var(--blue); }
.rink .dot.on { fill: var(--ink); stroke: var(--red); stroke-width: .8; }
.rink .crease { fill: var(--crease); stroke: var(--red); stroke-width: .3; }
.rink .crease.on { fill: #8fbbeb; stroke-width: .8; }
.rink .refc { fill: none; stroke: var(--red); stroke-width: .3; }
.rink .refc.on { stroke-width: 1.2; }
.rink .net { fill: #e9edef; stroke: var(--ink); stroke-width: .5; }
.rink .net.on { fill: var(--ink); }
.rink .bench, .rink .box { fill: var(--ice2); stroke: var(--ink); stroke-width: .3; }
.rink .bench.on, .rink .box.on { fill: #ffd9da; stroke: var(--red); stroke-width: .7; }
.rink .lab { font-size: 2.6px; font-weight: 700; letter-spacing: .3px; text-anchor: middle; fill: var(--muted); }
.rink .pl circle { stroke-width: .7; }
.rink .pl-h circle { fill: var(--red); stroke: var(--white); }
.rink .pl-v circle { fill: var(--white); stroke: var(--ink); stroke-width: 1; }
.rink .pl.gk circle { stroke-width: 1.4; }
.rink .pl text { font-size: 4.3px; font-weight: 800; text-anchor: middle; }
.rink .pl-h text { fill: var(--white); }
.rink .pl-v text { fill: var(--ink); }
.rink .puck circle { fill: #000; stroke: var(--white); stroke-width: .35; }
.rink .ar { stroke: var(--ink); stroke-width: .7; }
.rink .ar-pass { stroke-dasharray: 1.6 1.1; }
.rink .ar-shot { stroke: var(--red); stroke-width: 1.05; }
.rink .ah { fill: var(--ink); }
.rink .ah-shot { fill: var(--red); }
.rink .tag rect { fill: var(--ink); }
.rink .tag text { fill: var(--white); font-size: 3.6px; font-weight: 800; letter-spacing: .25px; text-anchor: middle; }
.rink .whistle rect { fill: var(--red); }
.rink .armup rect { fill: var(--blue); }
.rink .whistle text, .rink .armup text { fill: var(--white); font-size: 3.6px; font-weight: 800; letter-spacing: .2px; text-anchor: middle; }

/* ---- play (stepper) */
.play { margin: 0; }
.play-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.play-ice { background: var(--ice2); border-radius: 18px; padding: clamp(6px, 1.4vw, 14px); }
.play-cap { margin: 12px 0 0; font-size: 16.5px; line-height: 1.5; max-width: 46em; }
.play-n { font: 400 30px/1 var(--disp); color: var(--red); margin-right: 6px; vertical-align: -3px; }
.play-of { font-size: 18px; color: var(--muted); }
.js .play-steps { display: block; }
.js .play-step { display: none; }
.js .play-step.is-cur { display: block; }
.js .play-step.is-cur .ov { animation: ovin .45s ease .5s both; }
@keyframes ovin { from { opacity: 0; } to { opacity: 1; } }
.play .pl, .play .puck { transition: transform .75s cubic-bezier(.3, .7, .2, 1); }
@media (prefers-reduced-motion: reduce) { .play .pl, .play .puck { transition: none; } .js .play-step.is-cur .ov { animation: none; } }
.play-ctl { display: flex; align-items: center; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.pbtn { min-width: 48px; min-height: 44px; padding: 0 14px; border: 2px solid var(--ink); background: var(--white); color: var(--ink); border-radius: 3px; font: 800 14px var(--ui); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
.pbtn:hover:not(:disabled) { background: var(--ink); color: var(--white); }
.pbtn:disabled { opacity: .35; cursor: default; }
.pbtn-next { margin-left: auto; background: var(--ink); color: var(--white); }
.pdots { display: flex; gap: 6px; }
.pdot { width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--rule); background: transparent; font: 400 20px/1 var(--disp); color: var(--muted); cursor: pointer; }
.pdot[aria-current="step"] { background: var(--red); border-color: var(--red); color: var(--white); }
.legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 12px; font-size: 13px; color: var(--muted); }
.lg { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; font: 800 10px var(--ui); margin-right: -8px; }
.lg-h { background: var(--red); color: var(--white); }
.lg-v { background: var(--white); border: 2px solid var(--ink); }
.lg-p { width: 9px; height: 9px; background: #000; }
.lg-shot, .lg-pass { width: 22px; height: 0; border-radius: 0; border-top: 2px solid var(--red); }
.lg-pass { border-top: 2px dashed var(--ink); }

/* ---- home */
.hero { padding: clamp(36px, 6vw, 80px) 0 clamp(40px, 6vw, 72px); background: radial-gradient(1200px 500px at 80% 10%, #fff 0, rgba(255, 255, 255, 0) 70%), var(--ice); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.hero-copy .lede { margin: 0 0 26px; }
.cta { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-price { margin: 22px 0 0; font-size: 15px; color: var(--ink2); }
.hero-price span { font-weight: 800; }
.hero-price em { color: var(--red-d); font-style: normal; font-weight: 700; }
.hero-play { background: var(--white); border-radius: 22px; padding: clamp(14px, 2vw, 24px); box-shadow: 0 1px 0 var(--rule), 0 30px 60px -30px rgba(17, 21, 24, .35); }
.hero-play-k { font: 800 12px var(--ui); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; }
.hero-play .play-ice { background: var(--ice); }
@media (max-width: 980px) { .hero-grid { grid-template-columns: 1fr; } }

.decoder-band { background: var(--ink); color: var(--white); padding: 40px 0 34px; }
.band-h { font: 400 clamp(32px, 4vw, 48px)/1 var(--disp); text-transform: uppercase; margin: 0 0 20px; color: #c3ccd1; }
.band-h span { color: var(--white); border-bottom: 4px solid var(--red); }
.saw-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.saw-list a { display: block; height: 100%; padding: 14px 16px 14px 18px; border: 1px solid rgba(255, 255, 255, .16); border-left: 4px solid var(--red); color: var(--white); text-decoration: none; font-weight: 600; line-height: 1.35; }
.saw-list a:hover { background: var(--ink2); color: var(--white); }
.band-more { margin: 18px 0 0; }
.band-more a { color: var(--white); }
@media (max-width: 860px) { .saw-list { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .saw-list { grid-template-columns: 1fr; } }

.program, .iq, .ticket-sec, .indep, .page { padding: clamp(44px, 6vw, 84px) 0; }
.sec-head { max-width: 760px; margin-bottom: 30px; }
.sec-head p:not(.kicker) { color: var(--ink2); }
.periods { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.period { background: var(--white); border-top: 6px solid var(--ink); padding: 18px 18px 10px; }
.period:last-child { border-top-color: var(--red); }
.period-k { font: 400 60px/.85 var(--disp); color: var(--red); margin: 0; }
.period-t { font: 800 13px/1.3 var(--ui); letter-spacing: .12em; text-transform: uppercase; margin: 8px 0 12px; }
.period-l { list-style: none; margin: 0; padding: 0; }
.period-l a { display: grid; grid-template-columns: 34px 1fr auto; gap: 8px; align-items: baseline; padding: 11px 0; border-top: 1px solid var(--rule); text-decoration: none; }
.period-l a:hover .lt { color: var(--red-d); }
.ln { font: 400 26px/1 var(--disp); color: var(--muted); }
.lt { font-weight: 650; line-height: 1.3; }
.lt small { display: block; font-weight: 400; color: var(--muted); font-size: 14px; margin-top: 3px; }
.lf { font: 800 10.5px/1 var(--ui); letter-spacing: .12em; text-transform: uppercase; padding: 5px 7px; border-radius: 2px; white-space: nowrap; }
.lf.is-free { background: var(--ice2); color: var(--ink); }
.lf.is-pass { background: var(--ink); color: var(--white); }
.lf.is-done { background: var(--red); color: var(--white); }
.lf.is-miss { background: transparent; border: 1px solid var(--red); color: var(--red-d); }
.periods-page { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 980px) { .periods { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .periods, .periods-page { grid-template-columns: 1fr; } }

.iq { background: var(--white); }
.iq-grid { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.iq-score { background: var(--ink); color: var(--white); border-radius: 18px; padding: 26px 24px 22px; text-align: center; box-shadow: inset 0 0 0 6px #1c2328; }
.iq-num { display: block; font: 400 168px/.85 var(--disp); color: var(--red); }
.iq-lab { font: 800 13px var(--ui); letter-spacing: .2em; text-transform: uppercase; color: #c3ccd1; }
.q-mini, .qform { margin-top: 20px; max-width: 620px; }
fieldset { border: 0; margin: 0 0 16px; padding: 0; min-width: 0; }
legend { font-weight: 700; font-size: 18px; margin-bottom: 12px; padding: 0; }
legend.display { font-weight: 400; }
.opt { display: flex; align-items: center; gap: 12px; padding: 13px 16px; margin-bottom: 8px; border: 2px solid var(--rule); border-radius: 10px; background: var(--white); cursor: pointer; font-weight: 550; }
.opt:hover { border-color: var(--ink); }
.opt:has(input:checked) { border-color: var(--red); background: var(--red-t); }
.opt input { width: 20px; height: 20px; accent-color: var(--red); flex: none; }
@media (max-width: 760px) { .iq-grid { grid-template-columns: 1fr; } .iq-num { font-size: 120px; } }

.ticket { display: flex; background: var(--white); border-radius: 14px; overflow: hidden; box-shadow: 0 1px 0 var(--rule), 0 24px 50px -30px rgba(17, 21, 24, .4); }
.tk { flex: 1; padding: 26px 26px 22px; position: relative; }
.tk + .tk { border-left: 2px dashed var(--rule); }
.tk-k { font: 800 12px var(--ui); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 0 0 6px; }
.tk-p { font: 400 64px/.95 var(--disp); margin: 0 0 6px; }
.tk-p small { font: 600 15px var(--ui); color: var(--muted); }
.tk-alt { margin: 0 0 10px; color: var(--ink2); font-size: 15px; }
.tk ul { margin: 12px 0 0; padding-left: 18px; }
.tk li { margin-bottom: 5px; }
.tk-pass { background: var(--ink); color: var(--white); }
.tk-pass .tk-k, .tk-pass .tk-p small, .tk-pass .tk-alt { color: #c3ccd1; }
.tk-pass .tk-p { color: var(--white); }
.tk-pass::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--red); }
.tk-note { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .16); font-size: 14px; color: #f6c9cb; font-weight: 600; }
.tk-year .tk-p { color: var(--red-d); }
.ticket-more { margin-top: 18px; }
@media (max-width: 760px) { .ticket { flex-direction: column; } .tk + .tk { border-left: 0; border-top: 2px dashed var(--rule); } }

.indep { background: var(--ice2); }

/* ---- pages */
.page .display { max-width: 18em; }
.flash { background: var(--white); border-left: 4px solid var(--red); padding: 10px 14px; font-weight: 600; }
.err { background: var(--red-t); border-left: 4px solid var(--red); padding: 10px 14px; font-weight: 600; color: var(--red-d); }
.passmark { display: flex; gap: 14px; align-items: flex-start; background: var(--white); border: 1px solid var(--rule); border-left: 6px solid var(--ink); padding: 12px 16px; margin: 0 0 24px; font-size: 15px; }
.passmark p { margin: 0; }
.passmark em { font-style: normal; color: var(--red-d); font-weight: 700; }
.pm-tag { flex: none; font: 800 10.5px/1 var(--ui); letter-spacing: .14em; text-transform: uppercase; background: var(--ink); color: var(--white); padding: 6px 8px; margin-top: 2px; }
.locked { background: var(--ink); color: var(--white); padding: 28px; border-radius: 14px; margin: 24px 0; }
.locked .kicker { color: #f1b5b7; }
.preview-note { background: var(--white); border-left: 6px solid var(--red); padding: 14px 18px; }

.lesson-head { background: var(--white); border-bottom: 1px solid var(--rule); padding: clamp(28px, 4vw, 52px) 0 clamp(20px, 3vw, 36px); margin-bottom: 28px; }
.lesson-head-grid { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(16px, 3vw, 40px); align-items: end; }
.lesson-num { font: 400 clamp(110px, 16vw, 220px)/.78 var(--disp); color: transparent; -webkit-text-stroke: 2px var(--red); margin: 0; }
.lesson-head .lede { margin: 0; }
.lesson .play { margin-bottom: 36px; }
.lesson-body { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(24px, 4vw, 56px); }
.prose p { margin: 0 0 1.05em; }
.lesson-side > * + * { margin-top: 18px; }
.watch { background: var(--ink); color: var(--white); padding: 18px 20px; border-radius: 12px; }
.watch-k, .cites-k { font: 800 12px var(--ui); letter-spacing: .14em; text-transform: uppercase; margin: 0 0 6px; color: #f1b5b7; }
.watch p:last-child { margin: 0; }
.cites { border-top: 4px solid var(--ink); padding-top: 12px; }
.cites-k { color: var(--red); }
.cites ul { padding-left: 18px; margin: 0 0 8px; font-size: 15px; }
.lesson-nav { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: stretch; margin: 48px 0 12px; padding-top: 22px; border-top: 2px solid var(--ink); }
.lesson-nav a { text-decoration: none; font-weight: 700; }
.lesson-nav small { display: block; font: 800 11px var(--ui); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }
.ln-next { text-align: right; }
.ln-all { align-self: center; font-size: 14px; }
@media (max-width: 860px) { .lesson-body { grid-template-columns: 1fr; } .lesson-head-grid { grid-template-columns: 1fr; } .lesson-num { font-size: 96px; } }
@media (max-width: 560px) { .lesson-nav { grid-template-columns: 1fr 1fr; } .ln-all { display: none; } }

.map { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(20px, 3vw, 40px); align-items: start; }
.map-ice { position: sticky; top: 12px; background: var(--white); border-radius: 18px; padding: 12px; }
.map-list { list-style: none; margin: 0; padding: 0; counter-reset: part; }
.map-item { border-top: 1px solid var(--rule); padding: 10px 0; }
.map-item p { margin: 4px 0 0; font-size: 15px; color: var(--ink2); }
.map-pick { font: 400 26px/1.1 var(--disp); text-transform: uppercase; text-decoration: none; letter-spacing: .02em; }
.map-item.is-on .map-pick { color: var(--red); }
.map-item.is-on { border-top: 3px solid var(--red); }
.more { font-weight: 700; white-space: nowrap; }
.rule-ref { color: var(--muted); font-size: .92em; }
.answer .rule-ref { font-size: 14px; margin-top: -4px; }
.js .map-item:not(.is-on) p { display: none; }
@media (max-width: 860px) { .map { grid-template-columns: 1fr; } .map-ice { top: 0; z-index: 2; box-shadow: 0 8px 20px -12px rgba(0, 0, 0, .35); } }

.answer { background: var(--ink); color: var(--white); border-radius: 16px; padding: clamp(20px, 3vw, 34px); margin: 0 0 30px; }
.answer-k { font: 800 12px var(--ui); letter-spacing: .14em; text-transform: uppercase; color: #f1b5b7; margin: 0; }
.answer-big { font: 400 clamp(36px, 5vw, 64px)/.95 var(--disp); text-transform: uppercase; margin: 8px 0 12px; }
.answer .btn-ink { background: var(--white); color: var(--ink); }
.saw-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.saw { display: block; height: 100%; background: var(--white); padding: 16px 18px; border-left: 4px solid var(--ink); text-decoration: none; font-weight: 600; line-height: 1.35; }
.saw:hover, .saw.is-on { border-left-color: var(--red); color: var(--red-d); }

.scorebug { display: inline-flex; flex-wrap: wrap; background: var(--ink); color: #c3ccd1; border-radius: 6px; overflow: hidden; margin: 6px 0 22px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; }
.scorebug span { padding: 8px 16px; border-right: 1px solid rgba(255, 255, 255, .12); }
.scorebug b { font: 400 28px/1 var(--disp); color: var(--white); margin-right: 6px; vertical-align: -3px; }
.qlist { list-style: none; margin: 26px 0 0; padding: 0; columns: 2 420px; column-gap: 28px; }
.qlist li { break-inside: avoid; }
.qlist a { display: grid; grid-template-columns: 34px 1fr auto; gap: 8px; align-items: baseline; padding: 10px 0; border-top: 1px solid var(--rule); text-decoration: none; }
.qn { font: 400 24px/1 var(--disp); color: var(--muted); }
.qt { font-weight: 550; line-height: 1.35; }
.verdict { border-radius: 16px; padding: 22px 24px; margin: 8px 0 20px; background: var(--white); border-top: 8px solid var(--ink); }
.verdict.is-right { border-top-color: var(--red); }
.verdict-k { font: 400 44px/1 var(--disp); text-transform: uppercase; margin: 0 0 8px; color: var(--red); }
.verdict.is-wrong .verdict-k { color: var(--ink); }
.why { font-size: 18px; }
.qnav { display: flex; flex-wrap: wrap; gap: 10px; }
.qnav-sm { margin-top: 28px; display: flex; gap: 18px; font-size: 15px; }

.ticks { padding-left: 20px; }
.ticks li { margin-bottom: 6px; }
.booklist { list-style: none; padding: 0; margin: 0; columns: 2 260px; }
.booklist li { padding: 6px 0; break-inside: avoid; }
.booklist li.is-done a { font-weight: 700; }
.linkbox { display: flex; gap: 8px; flex-wrap: wrap; }
.linkfield, .stack-form input[type="text"] { flex: 1; min-width: 0; width: 100%; min-height: 48px; padding: 10px 12px; border: 2px solid var(--ink); border-radius: 3px; font: 500 15px var(--ui); background: var(--white); color: var(--ink); }
.stack-form { display: grid; gap: 10px; max-width: 560px; margin: 18px 0; }
.stack-form label { font-weight: 700; }
.check { display: flex; gap: 8px; align-items: center; font-weight: 500 !important; }
.row-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.row-actions form { margin: 0; }
.inline-form { margin: 20px 0; }

.faq { margin-top: 36px; max-width: 780px; }
.faq dt { font-weight: 800; margin-top: 16px; }
.faq dd { margin: 4px 0 0; color: var(--ink2); }

/* ---- Bleacher Card */
.cards { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 18px; }
.bcard { background: var(--white); border: 2px dashed var(--ink); border-radius: 10px; padding: 16px 18px; font-size: 13.5px; line-height: 1.35; }
.bc-h { font: 400 30px/1 var(--disp); text-transform: uppercase; margin: 0 0 10px; display: flex; justify-content: space-between; align-items: baseline; border-bottom: 3px solid var(--red); padding-bottom: 6px; }
.bc-h span { font: 700 10px var(--ui); letter-spacing: .12em; color: var(--muted); }
.bcard dl { display: grid; grid-template-columns: 108px 1fr; gap: 5px 10px; margin: 0; }
.bcard dt { font-weight: 800; }
.bcard dd { margin: 0; }
.bc-f { margin: 10px 0 0; font-size: 11px; color: var(--muted); }
@media (max-width: 760px) { .cards { grid-template-columns: 1fr; } .bcard dl { grid-template-columns: 96px 1fr; } }

/* ---- footer */
.foot { background: var(--ink); color: #c3ccd1; padding: 44px 0 30px; font-size: 14.5px; margin-top: 0; }
.foot a { color: var(--white); }
.foot-grid { display: grid; grid-template-columns: 1fr 1.4fr auto; gap: 24px 40px; }
.foot-a p, .foot-b p { margin: 0; }
.foot-links { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: auto auto; gap: 6px 22px; align-content: start; }
.foot-links li { white-space: nowrap; }
.powered { grid-column: 1 / -1; border-top: 1px solid rgba(255, 255, 255, .12); padding-top: 16px; margin: 6px 0 0; }
.ver { color: #7d8990; margin-left: 6px; }
@media (max-width: 860px) { .foot-grid { grid-template-columns: 1fr; } }
@media (max-width: 380px) { .foot-links { grid-template-columns: 1fr; } }

/* ---- print: the Bleacher Card only */
@media print {
  @page { size: letter; margin: .5in; }
  body { background: #fff; font-size: 10pt; }
  .unoff, .board, .preview, .foot, .noprint, .passmark, .skip { display: none !important; }
  .page { padding: 0; }
  .cards { grid-template-columns: 1fr; gap: .35in; }
  .bcard { break-inside: avoid; border: 1.5px dashed #000; width: 7.5in; font-size: 9.5pt; }
  .bc-h { font-size: 22pt; }
}