/* Phrazl brand tokens (generated) */
:root {
  --bg: #f5f8fa;
  --surface: #eaf2f7;
  --raise: #d6e8f2;
  --fg: #0d1f2b;
  --fg-soft: #274459;
  --muted: #5a7d94;
  --line: #b8d2e0;
  --accent: #1a7fa8;
  --accent-ink: #ffffff;
  --accent-1: #d6eef6;
  --accent-2: #8ecde6;
  --accent-3: #48a8cc;
  --accent-4: #1a7fa8;
  --accent-5: #0e4f6b;
}

[data-theme="dark"] {
  --bg: #0d1a22;
  --surface: #132333;
  --raise: #1c3347;
  --fg: #e8f2f7;
  --fg-soft: #b8d2e0;
  --muted: #5a7d94;
  --line: #1f3d54;
  --accent: #48a8cc;
  --accent-ink: #0d1f2b;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0d1a22;
    --surface: #132333;
    --raise: #1c3347;
    --fg: #e8f2f7;
    --fg-soft: #b8d2e0;
    --muted: #5a7d94;
    --line: #1f3d54;
    --accent: #48a8cc;
    --accent-ink: #0d1f2b;
  }
}

:root {
  --font-body: "Literata", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Fraunces", "Literata", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --space: 1rem;
  --measure: 68ch;
  --radius: 12px;
  --h1-size: clamp(2.5rem, 5.5vw, 4rem);
  --h1-lh: 1.05;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font-body); }
img, svg, video { max-width: 100%; height: auto; }

/* footer site map: its own container, an even column grid, headings on one baseline */
.footer-map { width: min(100% - 2rem, 72rem); margin-inline: auto; display: grid; align-items: start; gap: calc(var(--space) * 1.5); grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
.footer-map > * { min-width: 0; }
.footer-map ul { list-style: none; margin: 0.5rem 0 0; padding: 0; display: grid; gap: 0.35rem; }
.footer-map .more { margin-top: 0.3rem; }
.footer-map .more a { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.02em; }

/* the site map page: an index of the site, in columns */
.sitemap { padding-block: calc(var(--space) * 2) calc(var(--space) * 3); }
.sitemap .related { margin: 0; padding-block: calc(var(--space) * 1.5); }
.sitemap .related h2 { font-size: 1.25rem; margin-bottom: 0.75rem; }
.sitemap .post-list { gap: 0.4rem 1.5rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.sitemap .post-list li { gap: 0.1rem; padding-bottom: 0; border-bottom: 0; }
.sitemap .post-list a { font-family: var(--font-body); font-size: 1rem; font-weight: 500; }

/* the header's menu panels */
.navmenu { left: -0.75rem; min-width: 17rem; max-width: calc(100vw - 2rem); display: grid; gap: 0.15rem; padding: 0.5rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 1px 2px rgb(0 0 0 / 0.05), 0 12px 32px -16px rgb(0 0 0 / 0.3); }
.navmenu a { padding: 0.45rem 0.6rem; border-radius: 6px; }
.navmenu a:hover { background: var(--raise); }
/* the last entry of a shortened menu: the way to the rest, on the site map */
.navmenu a.more { font-family: var(--font-mono); font-size: 0.78rem; color: var(--muted); margin-top: 0.3rem; padding-top: 0.55rem; border-top: 1px solid var(--line); }
/* Inside the open phone drawer a menu flows in place of floating. */
@media (max-width: 720px) {
  .nav-toggle[open] + .nav .navmenu { box-shadow: none; border: none; background: transparent; padding: 0 0 0 0.85rem; }
}

/* the phone menu trigger: a control a visitor can see is tappable */
.nav-toggle > summary { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2.5rem; padding: 0.4rem 0.75rem; cursor: pointer; list-style: none; border: 1px solid var(--line); border-radius: var(--radius); font-family: var(--font-display); font-size: 0.95rem; line-height: 1; }
.nav-toggle > summary:hover, .nav-toggle[open] > summary { border-color: currentColor; }

/* icons (Phase D2 increment H) */
.icon { display: inline-block; width: 1.5rem; height: 1.5rem; flex: none; vertical-align: middle; }
.glyph .icon { display: block; width: 1.25rem; height: 1.25rem; }
.block h2 .icon { width: 0.8em; height: 0.8em; margin-right: 0.4em; vertical-align: -0.08em; color: var(--accent); }

/* engine: a .block is one block inside a page, never a band of the page */
.block { padding-block: 0; }
.block + .block { border-top: 0; }
.block:first-child { margin-top: 0; }

/* engine: what a product capture is, said beside it */
.shot-note { font-size: 0.85rem; line-height: 1.45; margin: var(--space) 0 0; }

/* engine: the product's state, said in the hero over the plan's own pitch */
.hero .state-note { font-size: 0.95rem; line-height: 1.5; margin: var(--space) 0; max-width: 46ch; }

/* engine: what the plan's feature cards are, said over a band with no head */
.spotlights > .wrap > .scope-note { font-size: 0.85rem; line-height: 1.45; margin: 0 0 calc(var(--space) * -2); }

/* Phrazl: the venture's own theme (contract rev 3) */
/* ============================================================
   PHRAZL — "The pocket phrasebook"
   A guidebook you would actually pack: Fraunces headlines over
   Literata book text, dotted contents-page leaders, phonetic
   /slash/ eyebrows, and screenshots cut as stacked flashcards.
   ============================================================ */

/* ---------- palette extensions (both schemes) ---------- */
:root {
  /* warm paper, a shade creamier than the sibling journal's stock */
  --bg: #faf4ea;
  --surface: #f2ecdf;
  --raise: #fffcf5;
  --line: color-mix(in srgb, var(--fg) 15%, #faf4ea);
  --link: color-mix(in srgb, var(--accent) 70%, var(--fg) 30%);
  --soft: color-mix(in srgb, var(--muted) 55%, var(--fg) 45%);
  --head-ink: color-mix(in srgb, var(--accent) 55%, var(--fg) 45%);
  --dotted: color-mix(in srgb, var(--accent) 50%, transparent);
  --tint: color-mix(in srgb, var(--accent) 8%, var(--bg));
  /* Phrazl's second voice: a boarding-pass ember for the phonetic
     marginalia — eyebrows, step digits, underlines, the card's offset */
  --accent-warm: #a8491a;
  --shadow-warm: color-mix(in srgb, #a8491a 30%, var(--bg));
  --stack: var(--line);
  --panel-shadow: 0 14px 36px color-mix(in srgb, var(--fg) 14%, transparent);
  --card-shadow: 6px 6px 0 var(--shadow-warm);
  --space: 1rem;
  --measure: 51rem;
  --radius: 10px;
}
[data-theme="dark"] {
  --bg: #0d1a22;
  --surface: #132333;
  --raise: #182c3f;
  --line: color-mix(in srgb, #e8f2f7 16%, #0d1a22);
  --link: var(--accent);
  --soft: color-mix(in srgb, var(--muted) 42%, var(--fg) 58%);
  --head-ink: color-mix(in srgb, var(--accent) 42%, var(--fg) 58%);
  --dotted: color-mix(in srgb, var(--accent) 55%, transparent);
  --tint: color-mix(in srgb, var(--accent) 10%, var(--bg));
  --accent-warm: #f0995c;
  --shadow-warm: color-mix(in srgb, #f0995c 26%, var(--bg));
  --stack: var(--line);
  --panel-shadow: 0 16px 40px color-mix(in srgb, #000 55%, transparent);
  --card-shadow: 6px 6px 0 var(--shadow-warm);
}

/* ---------- base ---------- */
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--fg);
  line-height: 1.65;
  font-size: 1rem;
  -webkit-font-smoothing: antialiased;
  margin: 0;
}
h1, h2, h3, h4 {
  font-family: var(--font-display);
  /* heavier than the sibling journal's Fraunces, so the voice is Phrazl's
     at a glance */
  font-weight: 700;
  color: var(--head-ink);
  letter-spacing: -0.018em;
  line-height: 1.18;
  margin: 0 0 0.6em;
}
h1, h2 { font-weight: 800; }
p { margin: 0 0 1em; }
a { color: var(--link); text-decoration-color: var(--accent-warm); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 2px;
  border-radius: 2px;
}
::selection { background: color-mix(in srgb, var(--accent) 28%, transparent); }
img { max-width: 100%; height: auto; }

.wrap { max-width: 64rem; margin-inline: auto; padding-inline: clamp(1.1rem, 4vw, 2rem); }
.narrow { max-width: var(--measure); margin-inline: auto; padding-inline: clamp(1.1rem, 4vw, 2rem); }

/* one spine: every container shares the wrap's own left gutter — the hero,
   the card grids, the page heads, the prose and the footer — while the
   reading matter inside stays at measure */
main section > .narrow,
article.page > .narrow,
main > article > .narrow { max-width: 64rem; }
main section > .narrow > p,
main section > .narrow > details,
main section > .narrow > ul.post-list,
main section > .narrow > .capture,
main section > .narrow > section.block,
main section > .narrow > div.block,
main section > .narrow > aside.block,
main section > .narrow > p.pager,
main section > .narrow > p.actions,
article.page > .narrow > p,
article.page > .narrow > figure.cover,
article.page > .narrow > .page-hero,
article.page > .narrow > .prose,
article.page > .narrow > .faq,
article.page > .narrow > .sources,
article.page > .narrow > .related,
article.page > .narrow > .table-wrap,
article.page > .narrow > section.block,
article.page > .narrow > div.block,
article.page > .narrow > aside.block,
main > article > .narrow > p,
main > article > .narrow > figure.cover,
main > article > .narrow > .prose,
main > article > .narrow > .faq,
main > article > .narrow > .sources,
main > article > .narrow > section.block {
  max-width: var(--measure);
}
section.sitemap > .narrow > section.block { max-width: none; }

.muted { color: var(--soft); }
.mono { font-family: var(--font-mono); }

/* ---------- the signature: phonetic eyebrows ---------- */
.eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: lowercase;
  color: var(--accent-warm);
  margin: 0 0 1rem;
}
.eyebrow::before { content: "/ "; opacity: 0.75; }
.eyebrow::after { content: " /"; opacity: 0.75; }

/* ---------- buttons ---------- */
.button, button.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1;
  padding: 0.95rem 1.4rem;
  border-radius: 8px;
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.button.primary {
  background: var(--accent);
  color: var(--accent-ink);
}
.button.primary:hover { background: color-mix(in srgb, var(--accent) 82%, var(--fg) 18%); }
/* dark scheme: the primary action keeps the paper scheme's weight —
   the fill deepens to the brand's deep accent so the white mono label holds AA */
[data-theme="dark"] .button.primary,
[data-theme="dark"] header.site-header a.cta {
  background: var(--accent-5);
  color: #ffffff;
}
[data-theme="dark"] .button.primary:hover,
[data-theme="dark"] header.site-header a.cta:hover {
  background: color-mix(in srgb, var(--accent-5) 80%, var(--accent) 20%);
}
.button.secondary {
  border-color: color-mix(in srgb, var(--fg) 32%, transparent);
  color: var(--fg);
  background: transparent;
}
.button.secondary:hover {
  border-color: var(--fg);
  background: color-mix(in srgb, var(--fg) 5%, transparent);
}
.actions { display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: center; }

/* ============================================================
   HEADER — quiet bar, one hairline, wordmark in Fraunces
   ============================================================ */
header.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
header.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(0.9rem, 2vw, 2rem);
  min-height: 72px;
  padding-block: 0;
}
@media (min-width: 721px) {
  header.site-header nav.nav {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: clamp(0.6rem, 1.4vw, 1.6rem);
    margin: 0;
    padding: 0;
    list-style: none;
  }
}
header.site-header a.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none;
  color: var(--fg);
  margin-right: auto;
}
header.site-header svg.mark { width: 26px; height: 26px; }
header.site-header .logotype {
  font-family: var(--font-display);
  font-size: 1.45rem;
  line-height: 1;
  color: var(--fg);
}
.logotype .accent { color: var(--accent); }

header.site-header nav.nav a,
header.site-header nav.nav a.navlabel {
  color: var(--fg);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
}
header.site-header nav.nav > a:not(.cta):hover,
header.site-header nav.nav .navgroup summary:hover a.navlabel {
  color: var(--link);
}
header.site-header nav.nav > a:not(.cta) {
  padding: 0.4rem 0.1rem;
  border-bottom: 2px solid transparent;
}
header.site-header nav.nav > a:not(.cta):hover {
  border-bottom-color: var(--accent);
}
header.site-header .navgroup summary { cursor: pointer; border-radius: 6px; }
header.site-header .navgroup[open] summary a.navlabel { color: var(--link); }

header.site-header a.cta {
  position: static;
  flex: 0 0 auto;
  margin-left: 0.75rem;
  white-space: nowrap;
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  line-height: 1;
  padding: 0.8rem 1.15rem;
  border-radius: 8px;
  text-decoration: none;
  text-align: center;
  transition: background-color 0.15s ease;
}
header.site-header a.cta:hover { background: color-mix(in srgb, var(--accent) 82%, var(--fg) 18%); }

/* dropdown panels */
header.site-header .navmenu {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.5rem;
  box-shadow: var(--panel-shadow);
  margin-top: 0.5rem;
}
header.site-header .navmenu a {
  display: block;
  padding: 0.52rem 0.8rem;
  border-radius: 6px;
  font-size: 0.92rem;
  font-weight: 400;
  white-space: nowrap;
  color: var(--fg);
  text-decoration: none;
}
header.site-header .navmenu a:hover {
  background: var(--tint);
  color: var(--link);
}
header.site-header .navmenu a.more {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  color: var(--link);
  border-top: 1px dotted var(--dotted);
  border-radius: 0 0 6px 6px;
  margin-top: 0.4rem;
  padding-top: 0.65rem;
}

/* phone trigger */
header.site-header details.nav-toggle summary {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--fg);
  cursor: pointer;
}
header.site-header details.nav-toggle summary a.navlabel {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg);
  text-decoration: none;
}

/* phone bar: keep the CTA beside the Menu trigger, not a full band */
@media (max-width: 540px) {
  header.site-header > div.wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    min-height: 56px;
    padding-block: 0.5rem;
  }
  header.site-header > div.wrap > a.brand { margin-right: auto; }
  header.site-header .logotype { font-size: 1.2rem; }
  header.site-header svg.mark { width: 20px; height: 20px; }
  /* while the drawer is shut, lift the CTA into the bar row beside Menu */
  header.site-header div.wrap > details.nav-toggle:not([open]) + nav.nav { display: contents; }
  header.site-header div.wrap > details.nav-toggle:not([open]) + nav.nav > a.cta {
    width: auto;
    flex: 0 0 auto;
    margin: 0;
    font-size: 0.64rem;
    letter-spacing: 0.07em;
    padding: 0.62rem 0.8rem;
  }
}

/* phone drawer entries */
@media (max-width: 720px) {
  header.site-header nav.nav > a:not(.cta) {
    padding: 0.7rem 0.2rem;
    border-bottom: 1px dotted var(--dotted);
    font-size: 1rem;
  }
  header.site-header nav.nav .navgroup summary {
    padding-block: 0.7rem;
    border-bottom: 1px dotted var(--dotted);
  }
  header.site-header nav.nav .navmenu {
    box-shadow: none;
    border: none;
    background: transparent;
    margin: 0;
    padding: 0.2rem 0 0.4rem 0.9rem;
  }
  header.site-header nav.nav .navmenu a { white-space: normal; }
}

/* ============================================================
   RHYTHM
   ============================================================ */
main > section { padding-block: clamp(3.25rem, 7vw, 5.5rem); }

.section-head { margin-bottom: clamp(1.8rem, 4vw, 2.75rem); }
.section-head h2 {
  font-size: clamp(1.95rem, 3.4vw, 2.7rem);
  max-width: 24ch;
  margin-bottom: 0.35em;
}
.section-head p.muted {
  font-size: 1.08rem;
  max-width: 56ch;
  margin: 0;
}

.wash { background: var(--surface); }

/* ============================================================
   HERO — editorial: oversized headline, flashcard screenshot
   on a tinted band below
   ============================================================ */
.hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  padding-block: clamp(3rem, 6vw, 5rem);
}
.hero svg.motif {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.35;
  pointer-events: none;
  z-index: 0;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.9), transparent 60%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0.9), transparent 60%);
}
.hero .wrap {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(2.25rem, 5vw, 3.5rem);
}
@media (min-width: 981px) {
  .hero.with-media .wrap {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 4rem;
    align-items: center;
  }
}
.hero .eyebrow { margin-bottom: 1.4rem; }
.hero h1 {
  font-size: clamp(2.9rem, 5.6vw, 4.6rem);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.02em;
  max-width: 18ch;
  margin: 0 0 0.5em;
}
.hero .lead {
  font-size: clamp(1.1rem, 1.6vw, 1.28rem);
  line-height: 1.65;
  color: var(--fg-soft);
  max-width: 46ch;
  margin-bottom: 1.8rem;
}
.hero-media {
  display: flex;
  justify-content: center;
}
.hero-media figure.frame {
  width: min(580px, 100%);
  margin: 0;
}
@media (max-width: 980px) {
  .hero-media figure.frame { width: min(640px, 100%); }
}
/* the capture's own scroll edge slices "Work the 13 due phrases first"
   behind the app's button bar; the engine crops the mock with object-fit
   from --frame-ratio, so restate the ratio on the img itself (beating the
   figure's inherited 390/844) and the shot ends in the gap above that line */
.hero-media figure.frame.phone > img {
  --frame-ratio: 390 / 695;
}

/* ---------- frames: stacked flashcards ---------- */
figure.frame {
  margin: 0;
  background: var(--raise);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--card-shadow);
}
figure.frame img { display: block; width: 100%; height: auto; }
figure.frame .bar {
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 10px 14px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
figure.frame .bar i {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--muted) 55%, transparent);
}
figure.frame.phone { box-shadow: var(--card-shadow); }

/* ============================================================
   HOME SECTIONS
   ============================================================ */

/* problem: the essay opener */
.problem .narrow > p {
  font-size: clamp(1.12rem, 1.6vw, 1.26rem);
  line-height: 1.75;
  max-width: 58ch;
  margin: 0;
}

/* grids & cards */
.grid { display: grid; gap: 1.1rem; }
.grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.card {
  background: var(--raise);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.75rem 1.75rem 1.5rem;
  box-shadow: var(--card-shadow);
}
.card h3 {
  font-size: 1.22rem;
  margin: 1rem 0 0.45rem;
}
.card p { color: var(--fg-soft); font-size: 0.97rem; line-height: 1.65; margin-bottom: 0; }
.card p.eyebrow { color: var(--accent-warm); font-size: 0.72rem; margin: 0.9rem 0 0; }
.card .eyebrow + h3 { margin-top: 0.35rem; }

.glyph {
  display: block;
  width: auto;
  height: auto;
  padding: 0 0 0.85rem;
  border-bottom: 1px dotted var(--dotted);
  color: var(--link);
}
.glyph .icon { display: block; width: 20px; height: 20px; }

/* how it works: contents-page steps */
ol.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: step;
  border-bottom: 1px dotted var(--dotted);
}
ol.steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 3.4rem 1fr;
  gap: 1.25rem;
  padding: 1.5rem 0;
  border-top: 1px dotted var(--dotted);
}
ol.steps li::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1;
  color: var(--accent-warm);
  padding-top: 0.2rem;
}
ol.steps h3 { font-size: 1.25rem; margin: 0 0 0.4rem; }
ol.steps p { color: var(--fg-soft); margin: 0; max-width: 56ch; }

/* spotlights */
.spotlights.wash { border-block: 1px solid var(--line); }
.spotlight {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: center;
}
.spotlight.flip figure.frame { order: -1; }
.spotlight h2 { font-size: clamp(1.5rem, 2.4vw, 1.9rem); }
.spotlight p.muted { max-width: 48ch; }

/* gallery */
.gallery .shots {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.25rem);
  align-items: start;
}

/* faq */
.faq details { border-top: 1px dotted var(--dotted); }
.faq details:last-of-type { border-bottom: 1px dotted var(--dotted); }
.faq summary {
  list-style: none;
  cursor: pointer;
  position: relative;
  padding: 1.05rem 2.2rem 1.05rem 0;
  font-weight: 600;
  font-size: 1.04rem;
  color: var(--fg);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-family: var(--font-mono);
  font-size: 1.15rem;
  color: var(--accent-warm);
  position: absolute;
  right: 0.2rem;
  top: 50%;
  translate: 0 -50%;
}
.faq details[open] summary::after { content: "\2212"; }
.faq summary:hover { color: var(--link); }
.faq details p {
  color: var(--fg-soft);
  padding: 0 0 1.25rem;
  margin: 0;
  max-width: 60ch;
}

/* latest posts strip */
.latest .narrow > p { margin-top: 1.5rem; }
.latest .narrow > p a { font-family: var(--font-mono); font-size: 0.85rem; letter-spacing: 0.04em; }

/* post lists: table of contents */
ul.post-list { list-style: none; margin: 0; padding: 0; }
ul.post-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: 1rem;
  padding: 1.15rem 0;
  border-bottom: 1px dotted var(--dotted);
}
ul.post-list li:first-child { border-top: 1px dotted var(--dotted); }
ul.post-list li > a {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.14rem;
  line-height: 1.35;
  color: var(--fg);
  text-decoration: none;
}
ul.post-list li > a:hover {
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
}
/* the engine underlines these titles in the accent; draw that rule in
   Phrazl's warm second accent instead */
main ul.post-list > li > a:any-link { text-decoration-color: var(--accent-warm); }
ul.post-list .meta {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  color: var(--link);
  white-space: nowrap;
}
ul.post-list p {
  grid-column: 1 / -1;
  margin: 0.3rem 0 0;
  color: var(--fg-soft);
  font-size: 0.94rem;
  max-width: 62ch;
}
p.pager {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 2rem;
  font-family: var(--font-mono);
  font-size: 0.84rem;
}

/* ---------- waitlist card: the flashcard ---------- */
.cta.wash {
  background: var(--surface);
  border-top: 1px solid var(--line);
}
.capture {
  background: var(--raise);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: clamp(1.8rem, 5vw, 3rem);
  box-shadow: var(--card-shadow);
}
.capture h2 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); }
.capture p.muted { max-width: 56ch; }
.capture form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
}
.capture input[type="email"] {
  flex: 1 1 260px;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--fg);
  background: var(--bg);
  border: 1px solid color-mix(in srgb, var(--fg) 28%, transparent);
  border-radius: 8px;
  padding: 0.85rem 1rem;
}
.capture input[type="email"]::placeholder { color: var(--soft); opacity: 1; }
.capture input[type="email"]:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 1px;
  border-color: var(--accent);
}
.capture p.note { font-size: 0.82rem; color: var(--soft); margin: 1rem 0 0; }
.capture .thanks { font-weight: 600; color: var(--fg); margin: 1.25rem 0 0; }

/* ============================================================
   SPEC PAGE HEADS, SITE MAP, 404
   ============================================================ */
section.page-head {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  padding-block: clamp(2.75rem, 6vw, 4.25rem) clamp(2rem, 4vw, 3rem);
}
section.page-head h1 {
  font-size: clamp(2.2rem, 4.4vw, 3.3rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.026em;
  max-width: 22ch;
  margin-bottom: 0.4em;
}
section.page-head p.lead {
  font-size: clamp(1.08rem, 1.5vw, 1.22rem);
  color: var(--fg-soft);
  max-width: 56ch;
  margin: 0;
}
p.crumbs {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.05em;
  color: var(--soft);
  margin: 0 0 1.5rem;
}
p.crumbs a { color: var(--link); text-decoration: none; }
p.crumbs a:hover { text-decoration: underline; }

/* the first section after a page head keeps a tight, even rhythm */
section.page-head + section {
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
}
body[data-kind="not_found"] main > section { padding-block: 3rem; }
body[data-kind="not_found"] main section.block,
body[data-kind="not_found"] main .block.related {
  border-top: none;
  margin-top: 0;
  padding-top: 0;
}

/* features overview: the page head carries the title; the grid's head
   becomes a small running caption instead of a second home-sized headline */
body[data-kind="features"] section.features { padding-top: clamp(2.5rem, 5vw, 3.5rem); }
body[data-kind="features"] section.features .section-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.35rem 0.9rem;
  margin-bottom: 1.4rem;
  padding-bottom: 0.8rem;
  border-bottom: 1px dotted var(--dotted);
}
body[data-kind="features"] section.features .section-head .eyebrow { margin: 0; }
body[data-kind="features"] section.features .section-head h2 {
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 400;
  font-size: 0.98rem;
  letter-spacing: 0;
  color: var(--soft);
  max-width: none;
  margin: 0;
}

body[data-kind="not_found"] section.page-head .eyebrow { font-size: 1rem; }
body[data-kind="not_found"] section.page-head h1 { font-size: clamp(2.4rem, 5vw, 3.8rem); }
body[data-kind="not_found"] .related h2 { font-size: 1.4rem; }
body[data-kind="not_found"] p.actions { margin-top: 2rem; }

section.sitemap .block h2 { font-size: 1.45rem; }

/* ============================================================
   CONTENT PAGES (article.page) & ARTICLES
   ============================================================ */
article.page, main > article {
  display: block;
  padding-block: clamp(2.75rem, 6vw, 4.25rem) clamp(3rem, 6vw, 4.5rem);
}
article.page h1, main > article h1 {
  font-size: clamp(2.1rem, 4.2vw, 3rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.026em;
  max-width: 24ch;
}
article p.lead {
  font-size: clamp(1.1rem, 1.5vw, 1.24rem);
  line-height: 1.65;
  color: var(--fg-soft);
  max-width: 58ch;
  margin-bottom: 2rem;
}
p.byline {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  color: var(--soft);
  margin: -0.5rem 0 1.75rem;
}
figure.cover {
  margin: 2rem 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}
figure.cover img { display: block; width: 100%; height: auto; }
.page-hero { margin: 0 0 2rem; }

/* blocks: dictionary section dividers */
section.block {
  margin-top: clamp(2.25rem, 5vw, 3.25rem);
  padding-top: clamp(1.6rem, 3vw, 2.25rem);
  border-top: 1px dotted var(--dotted);
}
section.block > h2, .block > h2 {
  font-size: clamp(1.45rem, 2.4vw, 1.75rem);
  margin-bottom: 1rem;
}
.block h2 .icon { color: var(--link); }

/* prose */
.prose { font-size: 1.04rem; line-height: 1.78; }
.prose p { margin: 0 0 1.15em; max-width: 62ch; }
.prose h2 { font-size: 1.5rem; margin: 1.9em 0 0.6em; }
.prose h3 { font-size: 1.22rem; margin: 1.7em 0 0.5em; }
.prose ul, .prose ol { padding-left: 1.35rem; margin: 0 0 1.2em; }
.prose li { margin: 0.4em 0; }
.prose blockquote {
  margin: 1.6em 0;
  padding: 0.3rem 0 0.3rem 1.3rem;
  border-left: 3px solid var(--accent);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--soft);
}
.prose blockquote p { margin-bottom: 0.5em; }
code {
  font-family: var(--font-mono);
  font-size: 0.88em;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0.1em 0.35em;
}
pre {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 1.1rem 1.25rem;
  overflow-x: auto;
  font-size: 0.9rem;
  line-height: 1.6;
}
pre code { background: none; border: none; padding: 0; }

/* tables */
.table-wrap {
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow-x: auto;
  background: var(--bg);
}
table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
th {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: left;
  color: var(--soft);
  background: var(--surface);
  padding: 0.8rem 1rem;
  border-bottom: 1px solid var(--line);
}
td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
tr:last-child td { border-bottom: none; }
.prose table { border: 1px solid var(--line); border-radius: 10px; }

/* benefits */
.benefits {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem;
}
.benefits:has(> :last-child:nth-child(odd)) > :last-child { grid-column: 1 / -1; }

/* plan cards: break out of the reading column */
.plan-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.2rem;
  align-items: stretch;
  width: min(60rem, calc(100vw - 2.5rem));
  position: relative;
  left: 50%;
  translate: -50% 0;
  margin-block: 1.75rem 0.5rem;
}
.card.plan {
  display: flex;
  flex-direction: column;
  padding: 1.9rem 1.7rem 1.6rem;
  background: var(--raise);
}
.card.plan h3 { font-size: 1.3rem; margin: 0 0 0.2rem; }
.card.plan p.price {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 600;
  color: var(--fg);
  letter-spacing: -0.015em;
  margin: 0.15rem 0 0.4rem;
}
.card.plan p.meta {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.05em;
  color: var(--soft);
}
.card.plan > p { font-size: 0.95rem; }
ul.includes {
  list-style: none;
  margin: 1.1rem 0 0;
  padding: 0;
  border-top: 1px dotted var(--dotted);
}
ul.includes li {
  position: relative;
  padding: 0.55rem 0 0.55rem 1.4rem;
  border-bottom: 1px dotted var(--dotted);
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--soft);
}
ul.includes li::before {
  content: "+";
  position: absolute;
  left: 0;
  top: 0.5rem;
  font-family: var(--font-mono);
  color: var(--accent-warm);
}
.plan-cards .card.plan:nth-child(2) {
  border-color: color-mix(in srgb, var(--accent) 65%, var(--line));
}

/* callout */
aside.callout, aside.block.callout {
  background: var(--tint);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
  border-left: 4px solid var(--accent);
  border-radius: 10px;
  padding: 1.3rem 1.6rem 1.1rem;
}
aside.callout .prose p { margin-bottom: 0.4em; }

/* sources */
.sources { font-size: 0.92rem; }
.sources a { overflow-wrap: anywhere; }
.sources li { margin: 0.45em 0; }

/* ============================================================
   FOOTER — the index at the back of the book
   ============================================================ */
footer.site-footer {
  margin-top: clamp(3rem, 8vw, 5rem);
  border-top: 1px solid var(--line);
  background: var(--surface);
}
body[data-kind="home"] footer.site-footer,
.cta.wash + * { margin-top: 0; }
main:has(> .cta.wash:last-child) + footer.site-footer { margin-top: 0; }

.footer-map {
  /* the index sits on the page's own container and gutter */
  width: min(100%, 64rem);
  padding: clamp(2.25rem, 5vw, 3.25rem) clamp(1.1rem, 4vw, 2rem) 2rem;
  gap: 2rem 1.75rem;
}
.footer-map .eyebrow {
  color: var(--soft);
  font-size: 0.72rem;
  margin-bottom: 0.9rem;
}
.footer-map ul { list-style: none; margin: 0; padding: 0; }
.footer-map li { margin: 0.5rem 0; }
.footer-map a {
  color: var(--soft);
  text-decoration: none;
  font-size: 0.92rem;
  line-height: 1.45;
}
.footer-map a:hover { color: var(--link); text-decoration: underline; }
.footer-map li.more a {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  color: var(--link);
}

footer.site-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2rem;
  padding-block: 1.5rem 2.25rem;
  position: relative;
  font-size: 0.9rem;
  color: var(--soft);
}
/* the bar's dotted rule sits on the columns' own gutter, not the box edge */
footer.site-footer .wrap::before {
  content: "";
  position: absolute;
  top: 0;
  left: clamp(1.1rem, 4vw, 2rem);
  right: clamp(1.1rem, 4vw, 2rem);
  border-top: 1px dotted var(--dotted);
}
footer.site-footer .wrap strong {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--fg);
}
footer.site-footer .wrap nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  margin-left: auto;
}
footer.site-footer .wrap nav a {
  color: var(--soft);
  text-decoration: none;
}
footer.site-footer .wrap nav a:hover { color: var(--link); text-decoration: underline; }
footer.site-footer a.stamp {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--soft);
  text-decoration: none;
  font-size: 0.85rem;
}
footer.site-footer a.stamp:hover { color: var(--fg); }

/* ============================================================
   MOTION (subtle, opt-in)
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  .card, figure.frame, .button, header.site-header a.cta {
    transition: background-color 0.15s ease, border-color 0.15s ease,
                color 0.15s ease, box-shadow 0.2s ease, translate 0.2s ease;
  }
  .button.primary:hover,
  header.site-header a.cta:hover { translate: 0 -1px; }
  .grid .card:hover {
    border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1020px) {
  .grid.cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plan-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.9rem; }
}
@media (max-width: 880px) {
  .spotlight { grid-template-columns: 1fr; }
  .spotlight.flip figure.frame { order: 0; }
  .plan-cards {
    grid-template-columns: 1fr;
    width: 100%;
    left: 0;
    translate: 0 0;
  }
  .benefits { grid-template-columns: 1fr; }
  .benefits:has(> :last-child:nth-child(odd)) > :last-child { grid-column: auto; }
  .gallery .shots { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .grid.cols-3, .grid.cols-2 { grid-template-columns: 1fr; }
  .hero h1 { font-size: clamp(2.25rem, 9.5vw, 2.8rem); }
  ol.steps li { grid-template-columns: 2.6rem 1fr; gap: 0.9rem; }
  ol.steps li::before { font-size: 1.4rem; }
  ul.post-list li { grid-template-columns: 1fr; row-gap: 0.2rem; }
  ul.post-list .meta { order: -1; }
  footer.site-footer .wrap { flex-direction: column; align-items: flex-start; gap: 0.9rem; }
  footer.site-footer .wrap nav { margin-left: 0; }
  .capture form { flex-direction: column; }
  .capture .button { width: 100%; }
}

.capture .hp { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }
.hidden, [hidden] { display: none !important; }
.nav-toggle summary { cursor: pointer; list-style: none; }
.nav-toggle summary::-webkit-details-marker { display: none; }
@media (min-width: 721px) {
  .nav-toggle { display: none !important; }
}
@media (max-width: 720px) {
  .site-header .wrap { flex-wrap: wrap; }
  .nav-toggle { display: block !important; }
  .nav { display: flex !important; flex-wrap: wrap; align-items: center; }
  .nav-toggle:not([open]) + .nav > a:not(.cta),
  .nav-toggle:not([open]) + .nav > details { display: none !important; }
  .nav-toggle[open] + .nav { flex-basis: 100% !important; width: 100%; flex-direction: column; align-items: stretch; }
}

/* a phone app's screenshot: a phone, never a browser window */
figure.frame.phone { display: block !important; box-sizing: border-box !important; width: min(18.5rem, calc(80vh * var(--frame-ratio, 390 / 844))) !important; max-width: 100% !important; min-width: 0 !important; flex: 0 1 auto !important; height: auto !important; min-height: 0 !important; max-height: none !important; aspect-ratio: auto !important; align-self: start !important; margin-inline: auto !important; padding: 0.5rem !important; border-radius: min(2.5rem, 13%) / min(2.5rem, calc(13% * var(--frame-ratio, 390 / 844))) !important; overflow: hidden !important; }
figure.frame.phone::before, figure.frame.phone::after { content: none !important; display: none !important; }
figure.frame.phone > img { display: block !important; box-sizing: border-box !important; width: 100% !important; max-width: 100% !important; height: auto !important; max-height: none !important; aspect-ratio: var(--frame-ratio, 390 / 844) !important; object-fit: cover !important; object-position: top center !important; margin: 0 !important; border-radius: min(2rem, 11%) / min(2rem, calc(11% * var(--frame-ratio, 390 / 844))) !important; }
.shots:has(> figure.frame.phone):not(:has(> figure.frame:not(.phone))) { grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr)) !important; }
@supports (width: 1svh) { figure.frame.phone { width: min(18.5rem, calc(80svh * var(--frame-ratio, 390 / 844))) !important; } }

/* the header's menu labels */
.navgroup > summary { cursor: pointer; list-style: none; }
.navgroup > summary::-webkit-details-marker { display: none; }
.navgroup > summary > .chevron { display: inline-block; width: 0.62em; height: 0.62em; margin-left: 0.3em; vertical-align: -0.04em; opacity: 0.7; transition: transform 120ms ease-out; }
.navgroup[open] > summary > .chevron { transform: rotate(180deg); }
/* the phone menu trigger's mark: the bars while it is shut, the cross while it is open */
.nav-toggle > summary > .burger { display: inline-block; flex: none; width: 1.1em; height: 1.1em; vertical-align: -0.18em; }
.nav-toggle:not([open]) > summary > .burger > .cross { display: none; }
.nav-toggle[open] > summary > .burger > .bars { display: none; }

/* engine: a header menu opens as an overlay anchored under its own trigger, so the bar keeps its single row */
.navgroup { position: relative; }
.navmenu { position: absolute; top: calc(100% + 0.4rem); z-index: 20; }
header.site-header .wrap, header.site-header .nav, header.site-header .navgroup { overflow: visible; }
/* the phone drawer is not a bar: inside it an open menu flows in place */
@media (max-width: 720px) {
  .nav-toggle[open] + .nav .navmenu { position: static !important; min-width: 0; }
}

/* engine: an open header menu is never taller than the window it opens in */
.navmenu { max-height: calc(100vh - 8rem); }
.navmenu { max-height: min(32rem, calc(100svh - 8rem)); overflow-y: auto; overscroll-behavior: contain; }
@media (max-width: 720px) {
  .nav-toggle[open] + .nav .navmenu { max-height: none !important; overflow: visible !important; }
}

/* engine: the header's bar holds one row at desktop width, whatever a theme sets on it */
@media (min-width: 721px) {
  header.site-header .wrap { display: flex; flex-direction: row; flex-wrap: nowrap; }
  header.site-header nav.nav { display: flex; flex-direction: row; flex-wrap: nowrap; }
  header.site-header .wrap > .brand, header.site-header .wrap > nav.nav { flex-shrink: 1; }
  header.site-header .nav { min-width: 0; column-gap: clamp(0.5rem, 1.1vw, 1.25rem); }
  header.site-header .nav > a, header.site-header .nav > details > summary { white-space: nowrap; }
  :is(header.site-header nav.nav > a:not(.cta), header.site-header nav.nav > details > summary) { padding-inline: clamp(0.3rem, 0.8vw, 0.9rem); }
  :is(header.site-header nav.nav > a:not(.cta), header.site-header nav.nav > details, header.site-header nav.nav > details > summary, header.site-header nav.nav > details > summary > .navlabel) { margin-inline: 0; }
  header.site-header nav.nav > details > summary > .navlabel { padding-inline: 0; }
  header.site-header .nav > a.cta { flex: none; }
}

/* engine: the action's compact twin shows only on a narrow phone, and only with the menu shut */
@media (min-width: 541px) {
  header.site-header a.cta.cta-short { display: none; }
}
/* engine: on a narrow phone the header is one row, the brand with the menu trigger and a compact action beside it */
@media (max-width: 540px) {
  header.site-header .wrap { column-gap: 0.5rem; }
  header.site-header .nav-toggle > summary { gap: 0; min-width: 2.5rem; justify-content: center; padding-inline: 0.5rem; }
  header.site-header .nav-toggle > summary > .navlabel { display: none; }
  header.site-header .nav-toggle:not([open]) + .nav > a.cta:not(.cta-short) { display: none; }
  header.site-header .nav-toggle[open] + .nav > a.cta.cta-short { display: none; }
  header.site-header .nav-toggle:not([open]) + .nav > a.cta { padding-inline: clamp(0.5rem, 3vw, 1rem); }
}

/* engine: the phone menu's trigger is the last box of the header's own row, so the cross is drawn where the bars were tapped */
@media (max-width: 720px) {
  header.site-header .wrap { display: flex; flex-flow: row wrap; align-items: center; }
  header.site-header .nav-toggle { order: 2; }
  header.site-header .nav-toggle:not([open]) + .nav { order: 1; margin-left: auto; }
  header.site-header .nav-toggle[open] { margin-left: auto; }
  header.site-header .nav-toggle[open] + .nav { order: 3; }
}

/* engine: while the phone menu is shut every box of the header is as wide as what it holds, so none of them can take the row from the other two */
@media (max-width: 720px) {
  header.site-header .wrap > .brand { flex: 0 1 auto; width: auto; min-width: 0; }
  header.site-header .nav-toggle:not([open]) { flex: 0 0 auto; width: auto; }
  header.site-header .nav-toggle:not([open]) + .nav { flex: 0 1 auto; width: auto; min-width: 0; }
  header.site-header .nav-toggle:not([open]) + .nav > a.cta { width: auto; }
}

/* engine: while the phone menu is shut the box around the action draws nothing of its own, so what a theme wrote for the open drawer is never a fragment in the header */
@media (max-width: 720px) {
  header.site-header .nav-toggle:not([open]) + .nav { border: 0; background: none; box-shadow: none; padding: 0; margin-block: 0; }
}

/* engine: every row of the open phone drawer starts its words at the page's own gutter, the action with them, and the action's own mark holds the far end of its full width box */
@media (max-width: 720px) {
  .nav-toggle[open] + .nav { padding-inline: 0; }
  header.site-header .nav-toggle[open] + .nav > a,
  header.site-header .nav-toggle[open] + .nav > details > summary,
  header.site-header .nav-toggle[open] + .nav > details > summary > .navlabel { padding-inline: 0; margin-inline: 0; text-align: left; text-indent: 0; justify-content: flex-start; justify-items: start; }
  header.site-header .nav-toggle[open] + .nav > a.cta { text-align: left; text-indent: 0; justify-content: flex-start; justify-items: start; }
  header.site-header .nav-toggle[open] + .nav > a.cta:not(.cta-short) { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; }
  header.site-header .nav-toggle[open] + .nav > a.cta:not(.cta-short)::after { content: ""; flex: none; width: 1.1em; height: 1.1em; margin-inline-start: auto; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000'%20stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 8h10M8.75 4.25 12.5 8l-3.75 3.75'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000'%20stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 8h10M8.75 4.25 12.5 8l-3.75 3.75'/%3E%3C/svg%3E") center / contain no-repeat; }
}

/* engine: the open phone drawer's action is a row of the drawer, on the rows' own edges and clear of the last of them */
@media (max-width: 720px) {
  header.site-header .nav-toggle[open] + .nav > a.cta { align-self: stretch; width: auto; max-width: none; margin-inline: 0; margin-block-start: 1.25rem; }
}

/* engine: every row of the open phone drawer is a single-line row, tall enough for a thumb, with what it holds in the middle of that height */
@media (max-width: 720px) {
  header.site-header .nav-toggle[open] + .nav > a:not(.cta-short),
  header.site-header .nav-toggle[open] + .nav > details > summary { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; min-height: 2.75rem; }
}

/* engine: nothing a page says can push it wider than the window */
html { overflow-wrap: break-word; }
.button, .nav .cta { max-width: 100%; overflow-wrap: anywhere; }
.post-list a { overflow-wrap: anywhere; }
.table-wrap { max-width: 100%; overflow-x: auto; }
.prose th, .prose td { overflow-wrap: anywhere; }

/* engine: under 600px a table is a card per row, not columns a phone cannot hold */
@media (max-width: 600px) {
  .table-wrap table, .table-wrap tbody, .table-wrap tr { display: block !important; width: auto !important; }
  .table-wrap thead { display: none !important; }
  .table-wrap tr { padding: 0.6rem 0; border-bottom: 1px solid var(--line); }
  .table-wrap tr:last-child { border-bottom: 0; }
  .table-wrap td {
    display: flex !important;
    width: auto !important;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 0.5rem;
    padding: 0.15rem 0;
    border-bottom: 0;
    line-height: 1.45;
    overflow-wrap: anywhere;
  }
  .table-wrap td.rowname, .table-wrap td:not([data-label]) { font-weight: 600; }
  .table-wrap td.rowname { font-family: var(--font-display); font-size: 1.1rem; line-height: 1.2; padding-bottom: 0.3rem; }
  .table-wrap td[data-label]::before {
    content: attr(data-label);
    max-width: 100%;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    line-height: 1.5;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
  }
}

/* engine: under 600px every group of the footer's map is a row of its own, opens on its own heading, and the shut ones read as one block */
@media (max-width: 600px) {
  footer.site-footer .footer-map { display: grid !important; grid-template-columns: 1fr !important; row-gap: 0 !important; }
  footer.site-footer .footer-map > * { margin-block: 0 !important; padding-block: 0 !important; }
  footer.site-footer .footer-map .eyebrow[aria-expanded="false"] { margin-block: 0 !important; }
  footer.site-footer .footer-map ul[hidden] { display: none !important; }
  .footer-map ul { margin: 0.2rem 0 0.9rem; gap: 0.2rem; }
  .footer-map li { line-height: 1.4; }
  .footer-map .eyebrow { margin-bottom: 0; }
  .footer-map .eyebrow[aria-expanded] { display: flex; align-items: center; min-height: 40px; border-top: 1px solid var(--line); cursor: pointer; }
  .footer-map > :first-child .eyebrow[aria-expanded] { border-top: 0; }
  .footer-map .eyebrow[aria-expanded]::after { content: ""; flex: none; margin-left: auto; width: 0.4em; height: 0.4em; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-0.12em) rotate(45deg); transition: transform 120ms ease-out; }
  .footer-map .eyebrow[aria-expanded="true"]::after { transform: translateY(0.06em) rotate(225deg); }
}

/* engine: a row of one of the engine's own reading lists wears the site's own link treatment, and the line itself is not a theme's to take away */
main .post-list > li > a:any-link { text-decoration-line: underline !important; text-decoration-thickness: from-font; text-underline-offset: 0.15em; text-decoration-color: var(--accent); }

/* engine: the door inside the engine's line over the plan's cards wears the site's own link treatment, whatever a theme sets on it */
main .scope-note a:any-link { text-decoration-line: underline; text-decoration-thickness: from-font; text-underline-offset: 0.15em; text-decoration-color: var(--accent); }

/* engine: a row of one of the engine's own reading lists is one measure, and its title, date and summary share it */
.post-list li { max-width: var(--measure); display: grid; grid-template-columns: minmax(0, 1fr); }
.post-list li > a, .post-list li > .meta, .post-list li > p { grid-column: 1; }
.post-list li > a, .post-list li > p { max-width: none; width: auto; justify-self: stretch; }

/* engine: a row of one of the engine's own reading lists reads in one order at every width: its title, then its date, then its summary */
.post-list li > a, .post-list li > .meta, .post-list li > p { order: 0; }
.post-list li:has(> .meta) > a { grid-row: 1; }
.post-list li:has(> .meta) > .meta { grid-row: 2; }
.post-list li:has(> .meta) > p { grid-row: 3; }
.post-list li:not(:has(> .meta)) > a { grid-row: 1; }
.post-list li:not(:has(> .meta)) > p { grid-row: 2; }

/* engine: a row of one of the engine's own reading lists prints its own words in full: they wrap, and no box cuts them */
.post-list li { overflow: visible; height: auto; max-height: none; }
.post-list li > a, .post-list li > p { white-space: normal; overflow: visible; text-overflow: clip; height: auto; max-height: none; -webkit-line-clamp: none; line-clamp: none; }

/* engine: the column under a page head continues it, so it is not a second band of the page */
.page-head:has(+ .page-body) { padding-bottom: calc(var(--space) * 1.5); }
/* engine: and it ends where its words do, so a short page never ends in a band of nothing */
.page-body { padding-top: var(--space); padding-bottom: calc(var(--space) * 1.5); border-top: 0; min-height: 0; height: auto; margin-block: 0; }
.page-body > .narrow { padding-block: 0; margin-block: 0; }
.page-body > .narrow > :last-child,
.page-body > .narrow > :last-child > :last-child,
.page-body > .narrow > :last-child > :last-child > :last-child,
.page-body > .narrow > :last-child > :last-child > :last-child > :last-child { margin-bottom: 0; }
/* engine: and the air between the head's last words and that column's first words is the engine's own rhythm, whatever makes it, padding as well as margin */
.page-head:has(+ .page-body) > .narrow { margin-bottom: 0; padding-bottom: 0; }
.page-head:has(+ .page-body) > .narrow > :last-child,
.page-head:has(+ .page-body) > .narrow > :last-child > :last-child,
.page-head:has(+ .page-body) > .narrow > :last-child > :last-child > :last-child,
.page-head:has(+ .page-body) > .narrow > :last-child > :last-child > :last-child > :last-child { margin-bottom: 0; padding-bottom: 0; }
/* engine: and that padding is measured from the standfirst's LAST LINE: its own box carries the trailing half of its line box, which a generously led standfirst would otherwise add to the air */
.page-head:has(+ .page-body) > .narrow > :last-child { margin-bottom: min(0px, 0.6em - 0.5lh); }
/* engine: and the head is as tall as what it holds, so no floor of its own can open that air under its standfirst */
.page-head:has(+ .page-body),
.page-head:has(+ .page-body) > .narrow,
.page-head:has(+ .page-body) > .narrow > :last-child,
.page-head:has(+ .page-body) > .narrow > :last-child > :last-child,
.page-head:has(+ .page-body) > .narrow > :last-child > :last-child > :last-child,
.page-head:has(+ .page-body) > .narrow > :last-child > :last-child > :last-child > :last-child { min-height: 0; height: auto; aspect-ratio: auto; }
.page-body > .narrow > :first-child,
.page-body > .narrow > :first-child > :first-child,
.page-body > .narrow > :first-child > :first-child > :first-child,
.page-body > .narrow > :first-child > :first-child > :first-child > :first-child { margin-top: 0; }
/* engine: and that air is made INSIDE those two boxes, so the join between them is flush: neither a margin between the head and the column nor a gap the page lays its bands out by can open it from outside both */
.page-head:has(+ .page-body) { margin-bottom: 0; }
.page-head + .page-body { margin-top: 0; }
main:has(> .page-head + .page-body) { row-gap: 0; }
/* engine: and on an index, which is that column led by the engine's own reading list, the air is one of the list's own gaps over a rem, so it reads as the rhythm of the list whatever the theme spaces its rows by */
.page-head:has(+ .page-body > .narrow > ul.post-list:first-child) { padding-bottom: 1rem; }
.page-head + .page-body:has(> .narrow > ul.post-list:first-child) { padding-top: 0; }
.page-head + .page-body > .narrow > ul.post-list:first-child { padding-top: 0; grid-template-rows: 0; }
.page-head + .page-body > .narrow > ul.post-list:first-child::before { content: ""; display: block; height: 0; min-height: 0; margin: 0; padding: 0; border: 0; grid-column: 1 / -1; }
/* engine: and no rule is drawn across the top of that column, on any box above its first words, because what is over it is the page's own head, which it continues */
.page-body > .narrow,
.page-body > .narrow > :first-child,
.page-body > .narrow > :first-child > :first-child,
.page-body > .narrow > :first-child > :first-child > :first-child,
.page-body > .narrow > :first-child > :first-child > :first-child > :first-child { border-top: 0; }
/* engine: and where that column opens with a block of the engine's own, the air over its heading is a rem over one of the theme's own spaces, never a band of the page */
.page-head:has(+ .page-body > .narrow > .block:first-child) { padding-bottom: 1rem; }
.page-body > .narrow > .block:first-child,
.page-body > .narrow > .block:first-child > :first-child { padding-top: 0; }
/* engine: and on a page that is only this column, the space under it is the engine's too */
main:has(> .page-body:last-child) { padding-bottom: 0; margin-bottom: 0; }
main:has(> .page-body:last-child) + footer { margin-top: 0; }

/* engine: the waitlist card's field is a line of text tall, whatever axis a theme stacks its form on */
.capture form input[type=email] { max-height: 4.5em; }

/* engine: under 600px a product capture is the picture itself, whole: its box is sized from it and nothing crops it */
@media (max-width: 600px) {
  .hero-media { max-width: 100% !important; min-width: 0 !important; }
  figure.frame:not(.phone) { max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; max-height: none !important; }
  figure.frame:not(.phone) > img { max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; max-height: none !important; object-fit: contain !important; }
}

/* engine: under 600px the hero is one column and a product capture fills the box it was given, so the one picture of the product is never a tile in a panel */
@media (max-width: 600px) {
  .hero.with-media .wrap { grid-template-columns: minmax(0, 1fr) !important; grid-template-areas: none !important; grid-auto-flow: row !important; flex-direction: column !important; flex-wrap: nowrap !important; align-items: stretch !important; }
  .hero.with-media .wrap > * { grid-column: 1 / -1 !important; grid-row: auto !important; flex: 0 1 auto !important; }
  .hero.with-media .hero-media:not(:has(> figure.frame.phone)) { height: auto !important; min-height: 0 !important; max-height: none !important; aspect-ratio: auto !important; min-width: min(100%, 20rem) !important; }
  figure.frame:not(.phone) { margin-inline: 0 !important; min-width: min(100%, 20rem) !important; }
}

/* engine: what a product capture is, said on the picture itself */
figure.frame { position: relative !important; }
figure.frame > .shot-mark { display: block !important; position: absolute !important; z-index: 2 !important; inset-block-start: 0.5rem !important; inset-inline-start: 0.5rem !important; inset-block-end: auto !important; inset-inline-end: auto !important; margin: 0 !important; padding: 0.15rem 0.5rem !important; max-width: calc(100% - 1.5rem) !important; overflow: hidden !important; font-family: var(--font-mono), ui-monospace, SFMono-Regular, Menlo, monospace !important; font-size: 0.6875rem !important; line-height: 1.6 !important; font-weight: 500 !important; font-style: normal !important; letter-spacing: 0.05em !important; text-transform: uppercase !important; text-align: start !important; white-space: nowrap !important; text-overflow: ellipsis !important; color: #ffffff !important; background: rgb(15 16 20 / 0.92) !important; border: 0 !important; border-radius: 0.3125rem !important; box-shadow: 0 0 0 1px rgb(255 255 255 / 0.35) !important; opacity: 1 !important; visibility: visible !important; }