/* blocksworth.net: one stylesheet for every page. Local JavaScript only in the guides and click-to-load video listings.
   Colours come from the channel logo 3b (channel/logo/3b/): petrol, cream, gold. The pixel images are drawn by
   ../brand_assets.py at 1 px per cell and only ever scaled by whole multiples (image-rendering: pixelated). */

@font-face { font-family: "Fraunces"; src: url("/assets/fonts/fraunces.woff2") format("woff2"); font-weight: 300 900; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/assets/fonts/inter-latin.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url("/assets/fonts/ibm-plex-mono-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  color-scheme: light dark;
  /* brand (the logo's own three colours) */
  --petrol: #225660; --cream: #EEE4CE; --gold: #E8B82E;
  /* light */
  --page: #EAF0EF; --surface: #FFFFFF; --ink: #12313A; --sub: #3F5B61; --rule: #CAD7D6; --rule-strong: #738E91;
  --link: #1C5561; --leader: #CFA021; --on-gold: #12313A; --gold-hover: #F1C849;
  --band: var(--petrol); --on-band: var(--cream); --on-band-sub: #CFDCDA; --band-rule: rgba(238, 228, 206, .26);
  --shadow: 0 1px 2px rgba(18, 49, 58, .08), 0 18px 40px -28px rgba(18, 49, 58, .45);
  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: "Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --radius: 9px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --page: #0D2429; --surface: #12333A; --ink: #EEE4CE; --sub: #B3C3C0; --rule: #26484F; --rule-strong: #638990;
    --link: #E8B82E; --leader: #E8B82E;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 18px 40px -28px rgba(0, 0, 0, .8);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--page); color: var(--ink);
  font: 400 17px/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
main { flex: 1; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 600; line-height: 1.12; letter-spacing: -.015em; text-wrap: balance; }
p { margin: 0; }
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 3px; }
.band :focus-visible { outline-color: var(--gold); }
.wrap { width: min(1120px, 100% - 40px); margin-inline: auto; }
.narrow { width: min(720px, 100% - 40px); margin-inline: auto; }
.mono { font-family: var(--mono); font-weight: 500; font-size: 12px; line-height: 1.4; letter-spacing: .08em; text-transform: uppercase; }
.pixel { image-rendering: pixelated; }
.skip { position: absolute; left: 12px; top: -80px; z-index: 10; padding: 10px 14px; border-radius: var(--radius);
  background: var(--gold); color: var(--on-gold); font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }

/* ---------------------------------------------------------------- band: header (+ hero on the home page) */
.band { background: var(--band); color: var(--on-band); }
.band a { color: var(--on-band); }
.bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 16px; min-height: 64px; }
.brand { display: inline-flex; align-items: center; gap: 8px; font-family: var(--display); font-size: 19px; font-weight: 600;
  letter-spacing: -.01em; text-decoration: none; }
.brand img { width: 54px; height: 56px; } /* logo.png (27 x 28 cells) x2 */
.top-nav { display: flex; gap: 14px; font-size: 15px; font-weight: 500; }
.top-nav a { padding: 8px 0; color: var(--on-band-sub); text-decoration: none; white-space: nowrap; }
@media (max-width: 380px) { /* 360 px phones keep one header line; below that the nav wraps */
  .brand { gap: 6px; font-size: 18px; }
  .top-nav { gap: 12px; font-size: 14px; }
}
.top-nav a:hover, .top-nav a[aria-current="page"] { color: var(--on-band); text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; }

.hero { padding: 28px 0 56px; }
.hero-grid { display: grid; gap: 28px; align-items: center; }
.hero-mark { width: 108px; height: 112px; } /* x4 */
.eyebrow { color: var(--on-band-sub); }
.hero h1 { margin: 10px 0 18px; font-size: clamp(2.5rem, 1.55rem + 4.2vw, 4.6rem); line-height: 1.02; letter-spacing: -.025em; }
.lead { max-width: 34em; color: var(--on-band-sub); font-size: 18px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

.page-head { padding: 18px 0 40px; }
.page-head h1 { font-size: clamp(2.1rem, 1.5rem + 2.6vw, 3.25rem); }
.page-head p { margin-top: 10px; max-width: 40em; color: var(--on-band-sub); }
.page-head .mono { margin-top: 14px; }

/* ---------------------------------------------------------------- buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 20px;
  border: 1px solid transparent; border-radius: var(--radius); font: 600 15px/1 var(--sans); text-decoration: none;
  white-space: nowrap; transition: background-color .15s, border-color .15s; }
.btn-gold { background: var(--gold); color: var(--on-gold); }
.band .btn-gold { color: var(--on-gold); }
.btn-gold:hover { background: var(--gold-hover); }
.btn-ghost { border-color: var(--band-rule); }
.btn-ghost:hover { border-color: var(--on-band); }
.btn-line { border-color: var(--rule-strong); background: var(--surface); color: var(--ink); }
.btn-line:hover { border-color: var(--ink); }
.btn small { font: 500 12px/1 var(--mono); color: var(--sub); }

/* ---------------------------------------------------------------- sections */
.section { padding: 56px 0 0; }
.section:last-child { padding-bottom: 72px; }
.section-head { margin-bottom: 22px; }
.section-head h2 { font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.4rem); }
.section-head p { margin-top: 6px; color: var(--sub); }

.card { border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }

/* The bill of fare: every series as a course, name and kind joined by a row of square gold "pixels". */
.menu { margin-top: -28px; padding: 30px 22px 10px; }
.menu-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 20px;
  padding-bottom: 16px; border-bottom: 3px double var(--rule-strong); }
.menu-head h2 { font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.4rem); }
.menu-head .mono { color: var(--sub); }
.courses { margin: 0; padding: 0; list-style: none; }
.courses li { padding: 18px 0 20px; }
.courses li + li { border-top: 1px solid var(--rule); }
.course { display: flex; align-items: baseline; gap: 12px; }
.course h3 { font-size: 22px; letter-spacing: -.01em; }
.course h3 a { color: var(--ink); text-decoration-color: var(--leader); }
.leader { flex: 1; min-width: 24px; height: 4px; align-self: center; margin-top: .45em;
  background: linear-gradient(90deg, var(--leader) 4px, transparent 0) 0 0 / 10px 4px repeat-x; }
.kind { color: var(--sub); white-space: nowrap; }
.courses p { max-width: 46em; margin-top: 6px; color: var(--sub); }

.platforms { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.platforms a { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 72px; padding: 14px 20px;
  color: var(--ink); text-decoration: none; transition: border-color .15s; }
.platforms a:hover { border-color: var(--ink); }
.platforms b { display: block; font-family: var(--display); font-size: 20px; font-weight: 600; }
.platforms .mono { color: var(--sub); text-transform: none; letter-spacing: .02em; font-size: 13px; }
.arrow { color: var(--leader); font-size: 20px; }
/* Mr. Moss Builds: a sister channel, deliberately quieter than the four Blocksworth cards */
.platform-aside { margin: 14px 0 0; }
.platform-aside a { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 16px;
  padding: 12px 20px; border: 1px dashed var(--rule-strong); border-radius: var(--radius); color: var(--sub);
  font-size: 15px; text-decoration: none; transition: border-color .15s, color .15s; }
.platform-aside a:hover { border-color: var(--ink); color: var(--ink); }
.platform-aside .mono { text-transform: none; letter-spacing: .02em; font-size: 13px; }

.note { display: grid; gap: 6px; padding: 18px 22px; border-left: 4px solid var(--gold); }
.note h2 { font-size: 20px; }
.note p { color: var(--sub); }

/* ---------------------------------------------------------------- guides index */
.guide-grid { display: grid; gap: 20px; margin: 0; padding: 0; list-style: none; }
.guide { position: relative; display: flex; flex-direction: column; overflow: hidden; container-type: inline-size; }
.guide-media { position: relative; border-bottom: 1px solid var(--rule); background: #F4F3F0; } /* the guide viewer's canvas colour */
.guide-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.guide-body { display: flex; flex: 1; flex-direction: column; padding: 18px 20px 20px; }
.guide-tags { color: var(--sub); font-size: 11px; }
.guide h3 { margin: 6px 0 8px; font-size: 23px; }
.guide h3 a { color: var(--ink); text-decoration: none; }
.guide h3 a::after { content: ""; position: absolute; inset: 0; }
.guide h3 a:focus-visible { outline: none; }
.guide h3 a:focus-visible::after { outline: 2px solid var(--ink); outline-offset: -3px; border-radius: var(--radius); }
.guide:hover h3 a { text-decoration: underline; text-decoration-color: var(--leader); }
.guide-summary { margin-bottom: 18px; color: var(--sub); font-size: 15.5px; }
.spec { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: auto 0 0; border: 1px solid var(--rule); border-radius: 6px; }
.spec > div { min-width: 0; padding: 8px 12px; }
.spec > div + div { border-left: 1px solid var(--rule); }
.spec dt { color: var(--sub); font-size: 10.5px; }
.spec dd { margin: 2px 0 0; font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.spec small { display: block; color: var(--sub); font-size: 12px; font-weight: 500; line-height: 1.3; }
.guide-actions { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.guide-actions .btn-gold { flex: 1 1 100%; }
.guide-actions .btn-line { flex: 1 1 0; padding: 0 14px; }
@container (min-width: 420px) {
  .spec small { display: inline; margin-left: 4px; }
  .guide-actions .btn-gold { flex: 1 1 auto; }
  .guide-actions .btn-line { flex: 0 0 auto; }
}
.facts-line { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 16px; color: var(--on-band-sub); }
/* a pixel square in front of every fact (no separator that could dangle at a line start when the row wraps) */
.facts-line span::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 9px;
  vertical-align: 0.12em; background: var(--gold); }

/* ---------------------------------------------------------------- legal documents */
.doc { padding: 44px 0 72px; }
.doc .lang-switch { display: flex; gap: 18px; margin-bottom: 28px; }
.doc h2 { margin: 40px 0 10px; font-size: 26px; }
.doc h2:first-child { margin-top: 0; }
.doc h3 { margin: 26px 0 6px; font-family: var(--sans); font-size: 17px; font-weight: 650; letter-spacing: 0; }
.doc p, .doc ul, .doc address { margin: 0 0 12px; }
.doc ul { padding-left: 1.2em; }
.doc li + li { margin-top: 4px; }
.doc address { font-style: normal; }
.doc code { padding: 1px 5px; border: 1px solid var(--rule); border-radius: 4px; background: var(--surface);
  font: 500 .86em/1.4 var(--mono); overflow-wrap: anywhere; }
.doc .lang-part + .lang-part { margin-top: 56px; padding-top: 40px; border-top: 3px double var(--rule-strong); }
.doc .small { color: var(--sub); font-size: 15px; }
.facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 20px; margin: 0 0 12px; }
.facts dt { color: var(--sub); }
.facts dd { margin: 0; }

/* ---------------------------------------------------------------- small centred pages: callback, 404 */
.solo { display: grid; place-items: center; padding: 56px 0 72px; }
.solo .card { width: min(520px, 100%); padding: 32px 28px; text-align: center; }
.solo img { width: 96px; height: 96px; margin: 0 auto 18px; border-radius: 9px; } /* avatar.png (32 cells) x3 */
.solo h1 { font-size: clamp(1.8rem, 1.5rem + 1.4vw, 2.4rem); }
.solo p { margin-top: 10px; color: var(--sub); }
.solo .mono { margin-top: 18px; }
.solo .links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 24px; }

/* ---------------------------------------------------------------- footer */
.site-footer { padding: 32px 0 40px; border-top: 1px solid var(--rule); color: var(--sub); font-size: 14px; }
.site-footer .wrap { display: grid; gap: 10px; }
.legal-nav { display: flex; flex-wrap: wrap; gap: 4px 0; font-size: 15px; font-weight: 500; }
.legal-nav a + a::before { content: "·"; display: inline-block; padding: 0 12px; color: var(--sub); text-decoration: none; }
.disclaimer { max-width: 60em; }

@media (min-width: 640px) {
  .brand { gap: 12px; font-size: 21px; }
  .top-nav { gap: 22px; }
  .platforms { grid-template-columns: 1fr 1fr; }
  .menu { padding: 34px 34px 14px; }
}
@media (min-width: 760px) {
  .guide-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
}
@media (min-width: 900px) {
  .hero { padding: 40px 0 88px; }
  .hero-grid { grid-template-columns: auto minmax(0, 1fr); gap: 48px; }
  .hero-mark { width: 216px; height: 224px; } /* x8 */
  .menu { margin-top: -48px; }
}
@media (min-width: 1100px) {
  .guide-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }
@media print {
  .band { background: none; color: #000; }
  .band a, .top-nav a { color: #000; }
  .skip, .top-nav, .hero-actions { display: none; }
}