/* ============================================================================
   No Hype AI — the 232-page site ("The Verdict" system).

   Spec of record:  you-tube-channels/channels/channel_06_ai_academy/00_strategy/
                    brand_kit.md  ·  brand_review_2026-08.md §3.6 "Website"

   THE PALETTE IS NOT IN THIS FILE. assets/css/tokens.css holds the approved
   tokens, the dark/light/reading ground semantics, the verdict block and the hero
   lockup; holding.css links the same file. It loads FIRST (layouts/base.njk) and
   nothing here may redefine one of its tokens — that is the whole point of the
   split. What is left below is site layout: chrome, sidebar, cards, lesson
   furniture, search.

   Phase 2 replaced the retired indigo/slate pixel identity. Every colour below
   resolves through a tokens.css semantic, so a surface cannot reintroduce a
   prohibited hue (no blue/indigo/violet/navy, no gradients, no glows, no pixel
   textures, one accent colour per surface).
   ========================================================================= */

:root {
  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* Borders. The system is hard-edged: 0 radius everywhere, matching the mark
     (square caps, miter joins) and the verdict block. Kept as tokens rather than
     deleted so the ~40 call sites did not all have to be touched. */
  --radius-sm: 0;
  --radius-md: 0;
  --radius-lg: 0;
  --radius-xl: 0;

  /* Sidebar */
  --sidebar-width: 280px;
}

/* Reset & Base */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  font-family: var(--font-body);
  color: var(--text-primary);
  background-color: var(--bg-primary);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--lime); color: var(--ink); }

/* Typography.
   Headings are Archivo at normal width, sentence case — the condensed axis stays
   on marketing surfaces (§3.2). h5/h6 stay in Inter because the same section says
   "never Archivo below 18px" and they resolve smaller than that. */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  font-stretch: 100%;
  font-variation-settings: 'wdth' 100, 'wght' 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--text-primary);
}

h5, h6 {
  font-family: var(--font-body);
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-primary);
}

h1 { font-size: 2.25rem; margin-bottom: var(--space-6); }
h2 { font-size: 1.75rem; margin-top: var(--space-10); margin-bottom: var(--space-4); }
h3 { font-size: 1.375rem; margin-top: var(--space-8); margin-bottom: var(--space-3); }
h4 { font-size: 1.125rem; margin-top: var(--space-6); margin-bottom: var(--space-2); }
h5 { font-size: 1rem; margin-top: var(--space-6); margin-bottom: var(--space-2); }
h6 { font-size: 0.9375rem; margin-top: var(--space-6); margin-bottom: var(--space-2); }

p {
  margin-bottom: var(--space-4);
  color: var(--text-secondary);
}

/* Links carry the ground's accent-as-text: --lime on ink (15.5:1), --ink on
   paper. Never lime on paper — 1.2:1, and a prohibition. The underline is what
   marks a link on the paper ground, where the colour alone is near-body-black. */
a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 2px;
  transition: color 0.2s;
}

a:hover { color: var(--accent-hover); }

code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background: var(--bg-secondary);
  color: var(--text-primary);
  padding: 0.125rem 0.375rem;
  border-radius: var(--radius-sm);
  /* Inline code carries unbreakable strings — URLs, `llama3.1:8b`, flags. At
     390px one of them pushed the document 2px wider than the viewport and gave
     every lesson page a horizontal scrollbar. `break-word` only breaks a token
     that would otherwise overflow, so ordinary code spans are untouched. */
  overflow-wrap: break-word;
}

/* Code is set on ink on BOTH grounds — an ink block inside a paper page is the
   editorial convention and keeps one code treatment across the site. The old
   rule used --color-slate-900 (#0f172a), a navy, which is a hard prohibition. */
pre {
  background: var(--code-bg);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  overflow-x: auto;
  margin: var(--space-6) 0;
  border: 1px solid var(--border-color);
}

pre code {
  background: none;
  padding: 0;
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--code-text);
  /* a block listing scrolls; it must never re-wrap a command mid-flag */
  overflow-wrap: normal;
}

/* Layout */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border-color);
  padding: var(--space-4) var(--space-6);
}

.header-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

/* The mark + wordmark lockup. Everything about its type comes from .kicker in
   tokens.css, shared with the hero — only the things a link in a header needs
   are set here. */
.site-logo {
  margin: 0;
  text-decoration: none;
  flex: none;
}

.site-logo:hover { color: var(--accent-hover); }

.header-nav {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.header-nav a {
  color: var(--text-secondary);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
}

.header-nav a:hover {
  color: var(--accent);
  text-decoration: underline;
}

.theme-toggle,
.search-toggle {
  background: none;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: var(--space-2);
  cursor: pointer;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
}

.theme-toggle:hover,
.search-toggle:hover {
  color: var(--accent);
  border-color: var(--accent);
}

/* Lesson and long-form pages are --paper regardless of theme (§3.6 hard
   exception), so the toggle cannot do anything there. A control that visibly
   does nothing is worse than an absent one. ⚠️ Owner decision — see the report. */
.reading .theme-toggle { display: none; }

/* Home page ----------------------------------------------------------------
   The hero is the holding page's, lifted verbatim via components/home-hero.njk
   and styled by tokens.css Part 5. `.home` exists only to give the verdict
   rule's `left: -100vw` something to be clipped by: `overflow-x` on <body> would
   turn it into a scroll container and unstick the sticky header, so the clip
   happens on a full-width wrapper instead. */
.home { overflow-x: hidden; }

.subjects-grid {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0;
  display: grid;
  /* min() so the floor cannot itself overflow a narrower container — a bare
     minmax(20rem, 1fr) forces a 320px track and scrolls a 320px phone sideways. */
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
  gap: var(--space-6);
}

/* On a course index the grid is a top-level <section> with nothing above it to
   set the spacing; on the home page it sits inside a .section that already has.
   Without this the first card's top border ran straight into the panel above it. */
section.subjects-grid { margin-top: var(--space-10); }

/* Course cards — a large mono course numeral and a 4px rule (§6.3: the 15 pixel
   subject icons are retired, not redrawn; the numeral makes the cards read as
   the numbered curriculum they actually are). The per-course accent colours went
   with them: every one was an indigo/violet/sky/teal, all prohibited. The data
   fields survive in courses.json / subjects.json, unrendered. */
.subject-card {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  text-decoration: none;
  display: block;
  transition: border-color 0.2s, background-color 0.2s;
}

.subject-card:hover {
  border-color: var(--accent);
  background: var(--bg-secondary);
}

.card-no {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 2.5rem;
  line-height: 1;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}

/* The literal 4px the spec draws — the same rule the verdict block sits on, at
   the same weight. Short by design: it measures the numeral, not the card. */
.card-rule {
  height: 4px;
  width: 3.5rem;
  background: var(--rule);
  margin: var(--space-3) 0 var(--space-4);
}

.subject-card .card-title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  font-stretch: 100%;
  font-variation-settings: 'wdth' 100, 'wght' 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--text-primary);
  margin-bottom: var(--space-1);
}

.subject-card .card-subtitle {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-3);
}

.subject-card .card-description {
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: var(--space-4);
}

.subject-card .card-meta {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* The status line — added 2026-09-01.
   `AVAILABLE NOW` used to be plain muted mono, visually identical to
   `COMING SOON` and to the lesson count beside it, so the one fact a visitor is
   looking for was the same colour as the furniture. It is now the inline
   verdict block (tokens.css Part 4, `.verdict--tag`), which is the system's
   status device.

   `COMING SOON` deliberately stays unhighlighted — the CONTRAST between the two
   states is the whole point, and a highlighted "coming soon" would be the site
   advertising what it cannot yet deliver. One rule serves both grids: the
   top-level course list (layouts/home.njk) and the Vibe Coding subject cards
   (courses/01-vibe-coding/index.njk).

   Only `--status` is a flex row. The bare `.card-meta` on the nine flat course
   indexes carries `45 min · intermediate` and must keep its inline behaviour. */
.subject-card .card-meta--status {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* The count that used to sit after a `&bull;`. The badge is the separator now —
   a bullet between a filled block and a run of text reads as a stray mark. */
.card-meta--status .card-meta-note { color: var(--text-muted); }

/* Not-yet-live courses. Dimming is done with the muted token rather than
   `opacity`, which would also fade the card's rule and border into a
   half-strength accent — an off-palette colour by arithmetic. */
.subject-card--pending .card-no,
.subject-card--pending .card-title { color: var(--text-muted); }
.subject-card--pending .card-rule { background: var(--text-muted); }
.subject-card--pending { cursor: default; }

/* Course index head — the card device at page scale, so a course page opens on
   the same numeral + rule the card that led to it carried. */
.course-head {
  padding: var(--space-8) 0 var(--space-4);
}

.course-head .card-no { font-size: clamp(2.5rem, 9vw, 4rem); }
.course-head .card-rule { width: 5rem; }
.course-head h1 { margin-bottom: var(--space-3); }

.subtitle {
  font-size: clamp(1.0625rem, 1rem + 0.5vw, 1.25rem);
  line-height: 1.55;
  color: var(--text-secondary);
  max-width: 52ch;
  margin-bottom: var(--space-4);
}

.course-meta {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0;
}

/* A flat panel, never a raised one — brand_kit prohibits blooms outright and
   --bg-secondary is the approved alternative. */
.pathway {
  background: var(--bg-secondary);
  border-left: 4px solid var(--rule);
  padding: var(--space-6);
  font-size: 0.9375rem;
  line-height: 1.7;
  max-width: 62ch;
}

.pathway p:last-child { margin-bottom: 0; }
.pathway strong { color: var(--text-primary); }

/* Sidebar Layout */
.page-with-sidebar {
  display: flex;
  min-height: calc(100vh - 65px);
}

.sidebar {
  width: var(--sidebar-width);
  border-right: 1px solid var(--border-color);
  padding: var(--space-6);
  position: sticky;
  top: 65px;
  height: calc(100vh - 65px);
  overflow-y: auto;
  background: var(--bg-secondary);
  flex-shrink: 0;
}

.sidebar-title {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-bottom: var(--space-4);
}

.sidebar-nav {
  list-style: none;
}

.sidebar-nav li {
  margin-bottom: var(--space-1);
}

.sidebar-nav a {
  display: block;
  padding: var(--space-2) var(--space-3);
  font-size: 0.875rem;
  color: var(--text-secondary);
  text-decoration: none;
  transition: all 0.15s;
  border-left: 2px solid transparent;
}

.sidebar-nav a:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

/* The current lesson is marked by the system's own device — a rule — rather than
   by a tinted panel. On paper that rule is ink, on ink it is lime; either way it
   is the one accent on the surface. */
.sidebar-nav a.active {
  color: var(--text-primary);
  border-left: 4px solid var(--rule);
  font-weight: 600;
}

.sidebar-section {
  margin-bottom: var(--space-6);
}

.sidebar-section-title {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-1);
}

/* Main content */
.main-content {
  flex: 1;
  max-width: 800px;
  padding: var(--space-10) var(--space-10);
  min-width: 0;
}

/* Breadcrumbs */
.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-8);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.breadcrumbs a {
  color: var(--text-muted);
  text-decoration: none;
}

.breadcrumbs a:hover {
  color: var(--text-primary);
  text-decoration: underline;
}

.breadcrumbs .separator {
  color: var(--text-muted);
}

/* Lesson Header */
.lesson-header {
  margin-bottom: var(--space-10);
  padding-bottom: var(--space-8);
  border-bottom: 1px solid var(--border-color);
}

.lesson-header h1 {
  margin-bottom: var(--space-3);
}

.lesson-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.lesson-meta span {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

/* Step Cards */
.step {
  margin-bottom: var(--space-10);
  padding: var(--space-6);
  background: var(--bg-secondary);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
}

.step-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

/* A square, not a circle — 0 radius is the system. Deliberately NEUTRAL, not
   accented: a step number is a counter, and a lime one put a second accent on a
   lesson page next to the crimson WARNING callouts, which breaks the
   one-accent-per-surface rule. The neutral verdict fill inverts with the ground
   (ink on paper, paper on ink) and reads as the same family of device. */
.step-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: var(--v-neutral-fill);
  color: var(--v-neutral-text);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 700;
  flex-shrink: 0;
}

.step-title {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  font-stretch: 100%;
  font-variation-settings: 'wdth' 100, 'wght' 700;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

.step-content {
  padding-left: calc(28px + var(--space-3));
}

/* Callouts — the verdict block, reused (brand_review §3.6 "Website"). The block
   and its rule are siblings, so --v-fill (from the .lane-* class the shortcode
   adds) and --v-size are set HERE, on their shared parent; on the block itself
   the rule would fall back to its 40px default and render 4.33px.

   `display: flex` overrides .verdict's inline-flex so the block is block-level:
   as an inline box it would sit in a line box and open a baseline gap between
   itself and the rule that is supposed to be flush under it. */
.callout {
  --v-size: 0.75rem;
  padding: var(--space-5) 0 0;
  margin: var(--space-6) 0;
}

.callout > .verdict {
  display: flex;
  width: max-content;
}

.callout > .verdict-rule {
  margin-bottom: var(--space-4);
}

.callout-header {
  font-family: var(--font-display);
  font-weight: 700;
  font-stretch: 100%;
  font-variation-settings: 'wdth' 100, 'wght' 700;
  letter-spacing: -0.02em;
  font-size: 1rem;
  line-height: 1.25;
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}

.callout-body {
  font-size: 0.9375rem;
  color: var(--text-secondary);
}

/* OS Toggle */
.os-toggle {
  display: flex;
  background: var(--bg-tertiary);
  padding: 2px;
  margin: var(--space-4) 0;
  width: fit-content;
  border: 1px solid var(--border-color);
}

.os-toggle button {
  padding: var(--space-2) var(--space-4);
  border: none;
  background: none;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s;
}

.os-toggle button.active {
  background: var(--bg-primary);
  color: var(--text-primary);
  box-shadow: none;
}

.os-content {
  display: none;
}

.os-content.visible {
  display: block;
}

/* Progress bar */
.progress-bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-8);
}

/* Squares, and no glow on the current one — brand_kit prohibits blooms outright,
   and the old rule painted an indigo rgba() halo. */
.progress-dot {
  width: 10px;
  height: 10px;
  background: var(--border-color);
  transition: background-color 0.2s;
}

.progress-dot.completed { background: var(--text-muted); }
.progress-dot.current { background: var(--accent-fill); }

/* Learning Outcomes Box */
.outcomes-box {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-left: 4px solid var(--rule);
  padding: var(--space-6);
  margin-bottom: var(--space-8);
}

.outcomes-box h3 {
  font-size: 1rem;
  margin-top: 0;
  margin-bottom: var(--space-3);
  color: var(--text-primary);
}

.outcomes-box ul {
  list-style: none;
  padding: 0;
}

.outcomes-box li {
  padding: var(--space-2) 0;
  padding-left: var(--space-6);
  position: relative;
  font-size: 0.875rem;
  color: var(--text-secondary);
}

/* The tick is the mark's own gesture. Ink on paper / paper on ink — the check is
   never lime on a paper ground (brand_kit "The Mark"). */
.outcomes-box li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--text-primary);
  font-weight: 700;
}

/* Q&A Section */
.qa-section {
  margin-top: var(--space-8);
}

.qa-item {
  border-bottom: 1px solid var(--border-color);
  padding: var(--space-4) 0;
}

.qa-question {
  font-weight: 600;
  font-size: 0.925rem;
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}

.qa-answer {
  font-size: 0.875rem;
  color: var(--text-secondary);
}

/* Key Takeaways */
.takeaways {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-top: 4px solid var(--rule);
  padding: var(--space-6);
  margin-top: var(--space-10);
}

.takeaways h2 {
  font-size: 1.125rem;
  margin-top: 0;
  margin-bottom: var(--space-4);
}

/* Lists */
ul, ol {
  padding-left: var(--space-6);
  margin-bottom: var(--space-4);
}

li {
  margin-bottom: var(--space-2);
  color: var(--text-secondary);
}

/* Tables */

/* The scroll container .eleventy.js wraps every markdown table in.
   A table's min-content width is set by its longest unbreakable cell, and
   `width: 100%` cannot argue with that — so without this the table pushes the
   PAGE sideways instead of scrolling itself. Measured 2026-08-22: 128 of 235
   pages, by up to 202px, identically in Chromium, WebKit and Firefox.

   The margin moves here from `table`, so the scroll box and the space around it
   are the same box. `overflow-y` computes to `auto` alongside `overflow-x` per
   spec; nothing here overflows vertically, so that is inert.

   main.js adds tabindex + role only to the ones that actually overflow: a
   scrollable region has to be reachable by keyboard (WCAG 2.1.1), but ~107 of
   these tables fit and would otherwise become dead tab stops. */
.table-scroll {
  overflow-x: auto;
  max-width: 100%;
  margin: var(--space-6) 0;
  /* Momentum scrolling on iOS, and a scrollbar that matches the ground. */
  -webkit-overflow-scrolling: touch;
}

.table-scroll:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
  font-size: 0.875rem;
}

/* A bare table (one not wrapped — none today, but nothing enforces that)
   keeps the spacing it used to have. */
:not(.table-scroll):not(.policy-table) > table {
  margin: var(--space-6) 0;
}

th, td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  border-bottom: 1px solid var(--border-color);
}

th {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text-primary);
  background: var(--bg-secondary);
}

td {
  color: var(--text-secondary);
}

/* Responsive */
@media (max-width: 768px) {
  /* The lockup is wider than the old pixel logo was — mono, uppercase, +0.12em
     tracking — and at 390px the header ran 18px past the viewport and gave every
     page a horizontal scrollbar. Measured 2026-08-10. */
  .site-header { padding: var(--space-3) var(--space-4); }
  .header-nav { gap: var(--space-3); }

  .sidebar {
    display: none;
  }

  .sidebar.open {
    display: block;
    position: fixed;
    top: 65px;
    left: 0;
    bottom: 0;
    z-index: 50;
    width: 280px;
    border-right: 1px solid var(--border-color);
  }

  .main-content {
    padding: var(--space-6) var(--space-4);
  }

  .hamburger {
    display: flex;
  }
}

@media (max-width: 480px) {
  /* "Subjects" points at "/", which the wordmark lockup beside it already does.
     Below 480px the two stop fitting together, and the duplicate is the one to
     lose — the hamburger still reaches the lesson list. */
  .header-nav > a { display: none; }
}

@media (min-width: 769px) {
  .hamburger {
    display: none;
  }
}

.hamburger {
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-2);
  color: var(--text-secondary);
}

.hamburger:hover { color: var(--accent); }

/* Search */
.search-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 200;
  align-items: flex-start;
  justify-content: center;
  padding-top: 15vh;
}

.search-modal.open {
  display: flex;
}

/* A flat ink scrim. `backdrop-filter: blur()` went with the retired identity —
   the system has no soft edges anywhere. */
.search-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(11, 13, 16, 0.82);
}

.search-modal-content {
  position: relative;
  z-index: 1;
  width: 90%;
  max-width: 600px;
  background: var(--bg-primary);
  padding: var(--space-6);
  border: 1px solid var(--border-color);
}

/* Pagefind ships its own tokens; point them at ours so the search UI cannot
   reintroduce the retired palette. Custom properties inherit, and `all: unset` in
   Pagefind's reset does not touch them, so declaring these on the modal is enough. */
.search-modal-content {
  --pagefind-ui-primary: var(--text-primary);
  --pagefind-ui-text: var(--text-primary);
  --pagefind-ui-background: var(--bg-primary);
  --pagefind-ui-border: var(--border-color);
  --pagefind-ui-tag: var(--bg-secondary);
  --pagefind-ui-border-width: 1px;
  --pagefind-ui-border-radius: 0;
  --pagefind-ui-font: var(--font-body);
}

/* Two things its tokens do NOT reach, both of which leaked a prohibited colour.
   Pagefind's reset is
     .pagefind-ui--reset *:where(…) { all: unset; display: revert; outline: revert }
   at specificity (0,1,0) and it loads after main.css — so a plain `:focus-visible`
   rule loses to it and every search field drew Chrome's BLUE focus ring. And
     .pagefind-ui--reset mark { all: revert }
   handed every search hit the user agent's YELLOW highlight. Both selectors below
   are deliberately specific enough to win. */
.search-modal-content .pagefind-ui :focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Lime fill, ink text — the one form the accent may take on either ground. */
.search-modal-content .pagefind-ui mark {
  background: var(--accent-fill);
  color: var(--accent-fill-text);
  font-weight: 700;
}

/* Skip to content (accessibility) */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  padding: var(--space-2) var(--space-4);
  background: var(--accent-fill);
  color: var(--accent-fill-text);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  z-index: 300;
  text-decoration: none;
}

.skip-link:focus {
  top: var(--space-2);
  color: var(--accent-fill-text);
}

/* Focus styles (accessibility) */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}


/* ===========================================================================
   PRINT — site chrome only
   ---------------------------------------------------------------------------
   The shared print rules (ground, code, tables, callouts, page breaks) live in
   tokens.css, because the holding build serves /privacy/ without main.css.
   What is left here is the furniture that only exists on the 235-page site.

   The footer is NOT hidden wholesale: tokens.css keeps the personal-capacity
   disclosure and the trading line, because a printed lesson is precisely where
   an OBA reader would otherwise lose them. Only its navigation goes.
   =========================================================================== */
@media print {
  .site-header,
  .sidebar,
  .search-modal,
  .skip-link,
  .theme-toggle,
  .search-toggle,
  .hamburger,
  .header-nav,
  .breadcrumbs,
  .lesson-nav,
  .os-toggle,
  .consent,
  .site-footer nav,
  .site-footer .footer-links {
    display: none !important;
  }

  /* The layout is a sidebar grid on screen; on paper there is one column. */
  .layout,
  .lesson-layout,
  .content-wrapper {
    display: block !important;
    grid-template-columns: none !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Both OS variants print. On screen only one is visible, and a printed
     handout that silently dropped the Windows half would be wrong for half the
     readers — each is labelled by its own heading in the content. */
  .os-content {
    display: block !important;
  }

  .site-footer {
    border-top: 1px solid #999 !important;
    margin-top: 2em;
    padding-top: 1em;
    font-size: 0.8em;
  }

  main,
  #main-content {
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
  }

  /* The ONE fill that survives onto paper, deliberately. It is a 28px
     wayfinding marker — about 7mm printed, negligible toner — and a printed
     lesson without its step numbering is materially harder to follow. Pinned
     to explicit values rather than left to inherit, because it reads
     --v-neutral-fill/--v-neutral-text and would otherwise print differently
     depending on which theme the reader happened to have saved. */
  .step-number {
    background: #000 !important;
    color: #fff !important;
    border: none !important;
  }
}

/* Local-only marker beside the Notes/Packs nav links while those sections are
   empty. components/header.njk shows those links under `admin.local` so the
   sections can be reviewed with `npm start`; in a production build the links
   are absent until content exists, so this never ships to the live site. */
.nav-local-hint {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.68em;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  opacity: 0.75;
}

/* Standfirst on a long-form page (notes and packs). layouts/longform.njk prints
   the front-matter `description` here, so the page opens with the same sentence
   that is in its <meta description> and its listing blurb — one source, three
   places. Sized between h1 and body, muted, and capped in measure so it reads as
   a summary rather than as the first paragraph. */
.lede {
  font-size: 1.12rem;
  line-height: 1.55;
  color: var(--text-secondary, var(--text-muted));
  max-width: 62ch;
  margin: 0 0 var(--space-5, 1.75rem);
}

/* ===========================================================================
   LONG-FORM: notes & packs (layouts/longform.njk + their indexes)
   Added 2026-10-06. These pages used to borrow the /privacy/ document style —
   an <h1> over a wall of prose — which read as "ugly and text-heavy". They now
   open on the companion post's own cover (postCovers.js) and the index is a
   grid of those covers, so the section matches the rest of the site.

   These render on the --paper ground (reading mode, §3.6), so cards are paper
   with a hairline border and the dark covers sit inside them as framed blocks.
   No shadows or glows — brand_kit prohibits blooms; depth is border + ground.
   =========================================================================== */

/* --- Article hero: cover beside kicker + title + lede --------------------- */
.lf-hero {
  display: grid;
  grid-template-columns: minmax(180px, 220px) 1fr;
  gap: var(--space-8);
  align-items: start;
  margin-bottom: var(--space-9, 3rem);
  padding-bottom: var(--space-8);
  border-bottom: 1px solid var(--border-color);
}

/* Index headers and cover-less pages carry no image, so the text column spans. */
.lf-hero--index,
.longform:not(.longform--has-cover) .lf-hero {
  grid-template-columns: 1fr;
}

.lf-hero-cover {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg, 10px);
  overflow: hidden;
  background: var(--ink);
}

.lf-hero-cover img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: top center;
}

.lf-hero-text { min-width: 0; }

/* The mono kicker with a leading lime bar — the same device as the cover slides
   ("CONTEXT · 01 —") and the card-rule under a course numeral. */
.lf-kicker {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 var(--space-3);
}

.lf-kicker-rule {
  display: inline-block;
  width: 2rem;
  height: 4px;
  background: var(--rule);
  flex: none;
}

.lf-hero-text h1 {
  margin: 0 0 var(--space-4);
}

.lf-hero .lede {
  margin-bottom: var(--space-3);
}

.lf-meta {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin: 0;
}

/* --- Article body: a comfortable reading measure -------------------------- */
.lf-body {
  max-width: 68ch;
}

.lf-body > :first-child { margin-top: 0; }

/* --- Index: a grid of companion cards ------------------------------------- */
.companion-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-6);
}

.companion-card { margin: 0; }

.companion-card-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--bg-primary);
  transition: border-color 0.2s, background-color 0.2s;
}

.companion-card-link:hover {
  border-color: var(--accent);
  background: var(--bg-secondary);
}

.companion-card-cover {
  display: block;
  border-bottom: 1px solid var(--border-color);
  background: var(--ink);
}

.companion-card-cover img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: top center;
}

.companion-card-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
}

.companion-card-title {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  font-variation-settings: 'wdth' 100, 'wght' 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--text-primary);
}

.companion-card-blurb {
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--text-secondary);
}

.companion-card-date {
  margin-top: auto;
  padding-top: var(--space-2);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* --- Narrow screens: hero stacks, cover leads ----------------------------- */
@media (max-width: 640px) {
  .lf-hero {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
  .lf-hero-cover {
    max-width: 200px;
  }
}