/* ============================================
   yera labs :: stylesheet (light)
   ------------------------------------------------
   Refactored around a design-token system.
   - All widths, spacing, type sizes, and timings
     live in :root as custom properties.
   - Layout uses real grid columns + clamp()
     instead of negative-margin escapes.
   - Mobile is handled by collapsing the token
     values, so component rules stay identical.
   ============================================ */

:root {
  /* ---- palette ---- */
  --bg: #fafaf7;
  --fg: #1a1a17;
  --accent: #d4751f;
  --dim: #8a8a82;
  --hi: #000000;
  --rule: #d8d6cf;
  --soft: #f0eee6;
  --string: #e8c547;
  --func: #00ffff;
  --decorator: #da70d6;
  --code-keyword: #ffad66;
  --ink: #1a1a17; /* terminal / code-block background */

  /* translucent panel fill, reused everywhere */
  --panel: rgba(250, 250, 247, 0.75);

  /* ---- width scale ----
     One source of truth for every column width.
     Components reference these, never raw ch values. */
  --w-prose: 50ch; /* body on pages WITHOUT a sidebar
                          (home, blog, about, posts)  */
  --w-wide: 65ch; /* hero / full-bleed logo row;
                          docs row matches this width  */
  --w-sidebar: 15ch; /* docs sidebar (fixed share)   */
  --w-gutter: 2rem; /* gap between sidebar + body  */

  /* Docs row spans the full logo width. The content
     column is whatever remains after the sidebar and
     gutter, so "sidebar + content = logo" by design.
     Adjust --w-sidebar and the body re-flows to fit. */
  --w-docs: var(--w-wide);

  /* ---- type scale ----
     Replaces the scattered 15/14/13/12/11px values
     with a named ramp. base is the body size. */
  --text-xs: 0.733rem; /* ~11px */
  --text-sm: 0.8rem; /* ~12px */
  --text-md: 0.867rem; /* ~13px */
  --text-base: 1rem; /* 15px  (see html font-size) */
  --text-nav: 0.933rem; /* ~14px */
  --text-lg: 1.2rem; /* ~18px */
  --text-xl: 1.467rem; /* ~22px */

  /* ---- spacing scale ---- */
  --space-1: 0.3rem;
  --space-2: 0.5rem;
  --space-3: 0.8rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;

  --indent-head: 2.1rem;
  --indent-body: 2.1rem;

  /* ---- page padding (shrinks on mobile) ---- */
  --pad-inline: 2rem;
  --pad-block: 2rem;

  /* ---- borders / accents ---- */
  --border-accent: 1px solid var(--accent);
  --border-left-accent: 4px solid var(--accent);
  --border-dashed: 1px dashed var(--rule);

  /* ---- motion ---- */
  --t-fast: 0.15s ease-in;
  --blink: 1.1s step-end infinite;

  /* base type unit */
  font-size: 15px;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--bg);
  background-image:
    linear-gradient(rgba(250, 250, 247, 0.9), rgba(250, 250, 247, 0.9)),
    url("chevrons.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: top center;
  background-attachment: fixed;
  color: var(--fg);
  font-family:
    "JetBrains Mono", "IBM Plex Mono", "Menlo", "Consolas", monospace;
  font-size: var(--text-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  transition: opacity var(--t-fast);
  /* contain runaway children so a stray wide element
     can never stretch the page the way it did on Tahoe */
  overflow-x: hidden;
}

body.loaded {
  opacity: 1;
}

main {
  max-width: var(--w-prose);
  margin: 0 auto;
  padding: var(--pad-block) var(--pad-inline) calc(var(--pad-block) * 2);
}

/* ============ TYPOGRAPHY ============ */

h1 {
  color: var(--accent);
  font-weight: 600;
  font-size: var(--text-lg);
  margin: var(--space-7) 0 var(--space-4);
  padding-bottom: var(--space-1);
  border-bottom: var(--border-dashed);
}

h2 {
  color: var(--dim);
  font-weight: normal;
  font-size: var(--text-base);
  margin: var(--space-7) 0 var(--space-4);
  padding-bottom: var(--space-1);
  border-bottom: var(--border-dashed);
}

h3 {
  color: var(--dim);
  font-weight: normal;
  font-size: var(--text-md);
  margin: var(--space-5) 0 var(--space-2);
  padding-bottom: var(--space-1);
  border-bottom: var(--border-dashed);
}

p {
  margin: var(--space-3) 0;
}

a {
  color: var(--accent);
  text-decoration: none;
  transition: none;
}

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

p a {
  font-weight: 600;
}

p a:hover {
  background: transparent;
  color: var(--hi);
}

hr {
  border: none;
  border-top: 1px dashed var(--accent);
  margin: var(--space-7) 0 var(--space-5);
}

.dim {
  color: var(--dim);
}

/* ============ HERO ============ */

.hero-wide {
  max-width: var(--w-wide);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-6) var(--space-4) 0;
  width: 100%;
}

.hero-wide a {
  max-width: 100%;
  overflow-x: auto;
  display: flex;
  justify-content: center;
}

.hero-wide a:hover {
  background: transparent;
}

.hero-wide a:hover .frame {
  background: var(--fg);
  -webkit-background-clip: text;
}

.primary-nav {
  display: flex;
  justify-content: center;
  gap: var(--space-6);
  margin-top: 0;
  font-size: var(--text-nav);
  font-weight: 600;
}

.primary-nav a {
  color: var(--accent);
}

.primary-nav a:hover {
  background: transparent;
  color: var(--hi);
}

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

.frame {
  font-size: clamp(0.5px, 1.8vw, 14px);
  line-height: 1;
  margin: 0 0 var(--space-2);
  overflow: hidden;
  max-width: 100%;
  display: inline-block;
  background: linear-gradient(135deg, #f4a261 0%, #e76f51 50%, #d4751f 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.frame pre {
  white-space: pre;
  overflow: visible;
  margin: 0;
}

.frame-img {
  max-width: min(650px, 90%);
  max-height: 120px;
  height: auto;
  display: block;
  margin: 0 auto var(--space-2);
}

.tagline {
  color: var(--hi);
  font-size: var(--text-nav);
  margin: 2.5rem 0 var(--space-4);
  padding-left: var(--indent-body);
  position: relative;
}

.tagline .prompt {
  color: var(--accent);
  font-weight: 900;
  position: absolute;
  left: 0;
}

.first-tagline {
  margin-top: 0;
}

.prompt {
  color: var(--accent);
  font-weight: 900;
  font-size: 1.05em;
}

.pitch {
  color: var(--fg);
  max-width: 70ch;
  padding-left: var(--indent-body);
  font-size: var(--text-sm);
}

.terminal {
  color: var(--bg);
  background: var(--ink);
  padding: var(--space-3) var(--space-4);
  border-left: 2px solid var(--accent);
}

.terminal::before {
  content: "$ ";
  color: var(--accent);
  user-select: none;
}

.terminal-block {
  position: relative;
  margin: 0.75rem 0;
}

.terminal-block .terminal {
  margin: 0;
}

.copy-btn {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  background: transparent;
  border: none;
  color: var(--dim);
  font-family: inherit;
  font-size: var(--text-sm);
  padding: var(--space-1) var(--space-1) 0.1rem;
  cursor: pointer;
  opacity: 0.75;
  transition: opacity 0.15s;
}

.copy-btn svg {
  width: 14px;
  height: 14px;
}

.terminal-block:hover .copy-btn {
  opacity: 1;
}

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

.copy-btn.copied {
  opacity: 1;
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
  border-radius: 3px;
}

.cta {
  margin-top: var(--space-5);
}

.btn {
  display: inline-block;
  margin-right: var(--space-4);
  padding: 0.2rem 0;
}

.code-block {
  position: relative;
  margin: var(--space-4) 0 var(--space-4) var(--indent-body);
  max-width: 100%;
  background: var(--soft);
  border-left: var(--border-left-accent);
}

p code,
li code {
  background: var(--soft);
  color: var(--fg);
  padding: 0.15em 0.4em;
  font-family: inherit;
  font-size: 0.9em;
}

strong {
  color: var(--fg);
}

.code-block pre[class*="language-"] {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.code-block pre {
  margin: 0;
  padding: var(--space-4) 1.2rem;
  font-size: var(--text-sm);
  line-height: 1.5;
  background: transparent;
  overflow-x: auto;
}

.code-block code {
  font-family: inherit;
  background: transparent;
}

.code-label {
  position: absolute;
  top: var(--space-2);
  right: 2.8rem;
  font-size: var(--text-xs);
  color: var(--dim);
  text-transform: lowercase;
  pointer-events: none;
}

/* Custom Prism theme — match Yera palette */
.code-block code[class*="language-"],
.code-block pre[class*="language-"] {
  color: var(--bg);
  text-shadow: none;
}

.code-block .token.comment,
.code-block .token.prolog,
.code-block .token.doctype,
.code-block .token.cdata {
  color: var(--dim);
  font-style: italic;
}

.code-block .token.string,
.code-block .token.attr-value {
  color: var(--string);
}

.code-block .token.triple-quoted-string {
  color: var(--string);
}

.code-block .token.keyword,
.code-block .token.builtin {
  color: var(--accent);
  font-weight: 600;
}

.code-block .token.function,
.code-block .token.method,
.code-block .token.property,
.code-block .token.property-access {
  color: var(--func);
}

.code-block .token.number,
.code-block .token.boolean {
  color: var(--bg);
}

.code-block .token.operator,
.code-block .token.punctuation {
  color: var(--dim);
}

.code-block .token.decorator,
.code-block .token.annotation {
  color: var(--decorator);
}

.terminal-cmd code::before {
  content: "$ ";
  color: var(--code-keyword);
  user-select: none;
}

.language-bash .token.function {
  color: var(--bg);
}

/* FOOTNOTE/REFERENCES */

.footnote {
  color: var(--dim);
  font-size: var(--text-xs);
  margin: var(--space-1) 0 0 !important;
  padding-left: 2ch;
  text-indent: -2ch;
}

.accent {
  color: var(--accent);
  font-weight: 900;
}

.references {
  margin-top: var(--space-7);
  padding-top: var(--space-2);
  border-top: var(--border-dashed);
  margin-bottom: 0;
}

/* MAILING LIST */
.signup {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin: var(--space-2) 0;
}

.email-input {
  background: var(--soft);
  border: 1px solid var(--rule);
  border-left: var(--border-left-accent);
  color: var(--fg);
  font-family: inherit;
  font-size: var(--text-md);
  padding: 0.4rem 0.6rem;
  outline: none;
  width: 32ch;
  max-width: 100%;
}

.signup-btn {
  background: var(--panel);
  border: var(--border-accent);
  color: var(--accent);
  font-family: inherit;
  font-size: var(--text-md);
  padding: 0.4rem var(--space-3);
  cursor: pointer;
}

.signup-btn:hover {
  background: var(--accent);
  color: var(--bg);
}

.signup-msg {
  font-size: var(--text-sm);
  color: var(--dim);
}

/* ============ LISTS ============ */
/* bare lists inside main (non-post pages) */

main ul {
  list-style: none;
  padding-left: 2ch;
  font-size: var(--text-sm);
  margin: var(--space-2) 0;
}

main ul li {
  position: relative;
  padding-left: 2ch;
  margin: 0.25rem 0;
}

main ul li::before {
  content: "›";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 900;
  font-size: 1.2em;
}

main ol {
  padding-left: 3ch;
  list-style: none;
  counter-reset: ol-counter;
  font-size: var(--text-sm);
  margin: var(--space-2) 0;
}

main ol li {
  counter-increment: ol-counter;
  position: relative;
  padding-left: 1ch;
  margin: 0.25rem 0;
}

main ol li::before {
  content: counter(ol-counter) ".";
  position: absolute;
  left: -3ch;
  color: var(--accent);
}

.link-row {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  margin: var(--space-2) 0 var(--space-5);
}

.link-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) 0.9rem;
  color: var(--fg);
  border: var(--border-accent);
  background: var(--panel);
  font-family: inherit;
  font-size: var(--text-md);
}

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

/* EMPHASIS BOX */
.emphasis-box {
  border: var(--border-accent);
  border-left: var(--border-left-accent);
  background: var(--panel);
  padding: var(--space-4) 1.2rem;
  margin: var(--space-5) 0;
  font-size: var(--text-md);
  color: var(--fg);
}

.emphasis-box p {
  margin: 0.4rem 0;
}

.emphasis-box p:first-child {
  color: var(--accent);
  font-weight: 600;
}

/* DOCS NAVIGATION */
.docs-nav {
  margin: var(--space-5) 0;
}

.docs-col-headers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
  padding-left: 9ch;
  margin-bottom: 0.4rem;
  font-size: var(--text-xs);
}

.docs-quadrants {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
}

.docs-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
  flex: 1;
}

.doc-card {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.9rem var(--space-4);
  border: var(--border-accent);
  border-left: var(--border-left-accent);
  background: var(--panel);
  color: var(--fg);
  text-decoration: none;
}

.doc-card:hover {
  border-color: var(--hi);
  border-left-width: 4px;
  background: var(--panel);
  color: var(--fg);
}

.doc-card-title {
  color: var(--accent);
  font-weight: 600;
  font-size: var(--text-md);
}

.doc-card-desc {
  color: var(--dim);
  font-size: var(--text-xs);
}

/* ============ DOCS LAYOUT ============ */
/* Real two-column grid: sidebar | content.
   No negative margins — the sidebar lives in its own
   track and cannot escape the container. The whole
   grid is centred, so it reads identically to the old
   layout on desktop but can't break on WebKit changes. */

body.docs main {
  max-width: var(--w-docs);
  width: 100%;
  overflow: visible;
}

.docs-layout {
  display: grid;
  grid-template-columns: var(--w-sidebar) minmax(0, 1fr);
  gap: var(--w-gutter);
  justify-content: stretch;
  align-items: start;
}

.doc-sidebar {
  width: auto; /* was 22ch fixed            */
  margin-left: 0; /* was -26ch escape hatch     */
  position: sticky;
  top: var(--space-6);
  text-align: left;
  font-size: var(--text-xs);
}

.doc-sidebar ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.doc-sidebar li {
  padding-left: 0;
  margin: 0;
}

.doc-sidebar li::before {
  content: none;
}

.doc-sidebar > ul > li {
  margin-bottom: var(--space-4);
}

.doc-sidebar ul ul {
  padding-left: 1ch;
  border-left: var(--border-dashed);
  margin: var(--space-1) 0 var(--space-1) 0.5ch;
}

.sidebar-group {
  display: block;
  color: var(--dim);
  font-size: var(--text-xs);
  margin-bottom: var(--space-1);
}

.sidebar-group-container {
  margin-left: 0;
  padding-left: 0;
}

.doc-prevnext {
  display: flex;
  justify-content: space-between;
  margin-top: var(--space-7);
  padding-top: var(--space-4);
  border-top: var(--border-dashed);
  font-size: var(--text-sm);
}

.doc-prevnext a {
  color: var(--accent);
  font-weight: 600;
  font-size: var(--text-sm);
}

.doc-prevnext a:hover {
  background: transparent;
  color: var(--hi);
}

.doc-sidebar a {
  color: var(--dim);
  display: block;
  padding: 0.1rem 0;
  font-size: var(--text-xs);
}

.doc-sidebar a:hover {
  color: var(--fg);
  background: transparent;
}

.doc-sidebar a.sidebar-active {
  color: var(--accent);
  font-weight: 600;
}

.sidebar-section {
  display: block;
  color: var(--accent);
  font-weight: 600;
  font-size: var(--text-xs);
  margin-bottom: 0.75rem;
  padding-bottom: 0.4rem;
  border-bottom: var(--border-dashed);
}

.sidebar-section:hover {
  background: transparent;
  color: var(--hi);
}

.doc-sidebar summary {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.doc-sidebar summary::before {
  content: "›";
  display: inline-block;
  margin-right: 0.5ch;
  transition: transform 0.1s;
  color: var(--accent);
}

.doc-sidebar details {
  margin: 0;
}

.doc-sidebar details > ul {
  margin-top: var(--space-1);
}

.doc-sidebar details[open] > summary::before {
  transform: rotate(90deg);
}

.doc-back {
  font-size: var(--text-sm);
  margin-top: 0.75rem;
}

/* REFERENCE DOCS */
.ref-title {
  font-size: var(--text-xl);
  border-bottom: none;
  margin-bottom: var(--space-2);
}

.ref-title-name {
  display: inline-block;
  background: var(--bg);
  color: var(--accent);
  border: var(--border-accent);
  padding: 0.2em 0.6em;
  font-size: var(--text-lg);
  font-weight: 600;
}

.ref-methods-index {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: var(--space-2);
}

.ref-method-index-item {
  font-size: var(--text-md);
  color: var(--fg);
}

.ref-method-link {
  color: var(--accent);
  font-weight: 600;
}

.ref-method-summary {
  font-size: var(--text-md);
  color: var(--fg);
}

.ref-methods-divider {
  border: none;
  border-top: 1px dashed var(--accent);
  margin: var(--space-7) 0;
}

.ref-method {
  margin-bottom: var(--space-7);
}

.ref-output {
  margin-top: 0.25rem;
  margin-bottom: var(--space-4);
  padding: var(--space-2) var(--space-4);
  background: var(--soft);
  border-left: 2px solid var(--rule);
  font-size: var(--text-sm);
  color: var(--dim);
}

.ref-signature {
  margin: var(--space-2) 0 var(--space-5);
}

.ref-signature pre {
  background: var(--ink);
  border-left: var(--border-left-accent);
  padding: 0.75rem var(--space-4);
  font-size: var(--text-sm);
  color: var(--bg);
  margin: 0;
}

.ref-signature pre code {
  background: transparent;
  color: var(--bg);
}

.ref-output code {
  background: transparent;
  color: var(--dim);
}

.post-content .ref-section > h2 {
  color: var(--accent);
  font-weight: 600;
  font-size: var(--text-base);
  margin: var(--space-6) 0 0.75rem;
  padding-bottom: var(--space-1);
  border-bottom: var(--border-dashed);
}

.ref-param {
  display: flex;
  flex-direction: column;
}

.ref-params {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  margin-top: 0.75rem;
}

.ref-param-sig {
  font-size: var(--text-md);
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.ref-name {
  color: var(--fg);
}

.ref-type {
  color: var(--fg);
  font-weight: normal;
}

.ref-default {
  color: var(--fg);
  font-weight: normal;
}

.ref-param-desc {
  border-left: 2px solid var(--rule);
  padding-left: 0.75rem;
  color: var(--fg);
  font-size: var(--text-md);
}

.ref-param-desc p {
  margin: 0;
  font-size: var(--text-md);
}

.ref-return {
  margin: var(--space-2) 0;
}

.ref-return-sig {
  font-size: var(--text-md);
  font-weight: 600;
  margin-bottom: 0.25rem;
  color: var(--fg);
}

.ref-return-desc {
  border-left: 2px solid var(--rule);
  padding-left: var(--space-4);
}

.ref-return-desc p {
  font-size: var(--text-md);
  color: var(--fg);
  margin: 0;
}

.ref-desc p {
  font-size: var(--text-md);
  color: var(--fg);
}

.ref-param-name {
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--fg);
  margin-bottom: 0.1rem;
}

.ref-param-type {
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--fg);
  margin-bottom: 0.25rem;
}

.ref-param-type::before {
  content: "";
}

.ref-return-type {
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--fg);
  margin-bottom: 0.25rem;
}

.ref-bases {
  font-size: var(--text-sm);
  margin: 0.25rem 0 var(--space-4);
}

.ref-bases a > code {
  background: var(--bg);
  color: var(--accent);
  border: var(--border-accent);
  padding: 0.15em 0.45em;
  font-size: var(--text-sm);
  font-weight: 600;
}

.ref-bases a:hover > code {
  background: var(--accent);
  color: var(--bg);
}

/* MERMAID DIAGRAMS */
.mermaid-diagram {
  display: block;
  margin: var(--space-6) auto;
  text-align: center;
}

.mermaid-diagram svg {
  max-width: 100%;
  height: auto;
}

.mermaid-diagram svg text {
  font-family: inherit;
}

.mermaid-diagram svg .edgePath path,
.mermaid-diagram svg .flowchart-link {
  stroke-width: 1;
}

.mermaid-diagram svg .node rect,
.mermaid-diagram svg .node polygon,
.mermaid-diagram svg .node circle {
  stroke-width: 1;
  rx: 0;
  ry: 0;
}

.mermaid-diagram svg .edgeLabel,
.mermaid-diagram svg .nodeLabel {
  font-size: var(--text-sm);
}

/* BREADCRUMBS */
.breadcrumbs {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-md);
  font-weight: 600;
}

.breadcrumb-current {
  font-weight: 600;
  color: var(--dim);
}

.breadcrumb-icon {
  display: inline-flex;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
}

.breadcrumb-icon svg {
  width: 100%;
  height: 100%;
}

.breadcrumb-sep {
  font-weight: 700;
  font-size: 1.2em;
  color: var(--fg);
  line-height: 1;
}

/* INLINE CODE LINKS */
p a code,
li a code,
.post-content a code,
.ref-desc a code,
.ref-param-desc a code {
  background: var(--bg);
  color: var(--accent);
  border: var(--border-accent);
  padding: 0.15em 0.45em;
}

p a:hover code,
li a:hover code,
.post-content a:hover code,
.ref-desc a:hover code,
.ref-param-desc a:hover code {
  background: var(--accent);
  color: var(--bg);
}

/* SEARCH TRIGGER */
.search-trigger {
  background: transparent;
  border: none;
  color: var(--accent);
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  font-family: inherit;
}

.search-trigger svg {
  width: 1.2em;
  height: 1.2em;
}

.search-trigger:hover {
  color: var(--hi);
}

.search-result-header {
  display: flex;
  align-items: baseline;
  gap: 0.6em;
  margin-bottom: 0.2rem;
}

.search-result-section {
  background: var(--soft);
  color: var(--fg);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.1em 0.5em;
  flex-shrink: 0;
}

/* SEARCH MODAL */
.search-modal {
  border: var(--border-accent);
  border-left: var(--border-left-accent);
  background: var(--bg);
  padding: var(--space-5);
  min-width: 50ch;
  max-width: 80ch;
  width: min(80ch, 90vw);
  font-family: inherit;
  position: relative;
}

.search-modal::backdrop {
  background: rgba(26, 26, 23, 0.4);
}

.search-close {
  position: absolute;
  top: 0.1rem;
  right: 0.1rem;
  background: transparent;
  border: none;
  color: var(--dim);
  font-family: inherit;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 0.25rem var(--space-2);
}

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

.search-box {
  position: relative;
}

.search-box input {
  width: 100%;
  background: var(--soft);
  border: 1px solid var(--rule);
  border-left: var(--border-left-accent);
  color: var(--fg);
  font-family: inherit;
  font-size: var(--text-md);
  padding: var(--space-2) 0.7rem;
  outline: none;
}

.search-box input:focus {
  border-color: var(--accent);
}

.search-results {
  margin-top: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-height: 60vh;
  overflow-y: auto;
}

.search-result {
  display: block;
  padding: 0.6rem var(--space-3);
  border: 1px solid var(--rule);
  border-left: 2px solid var(--accent);
  background: var(--bg);
  color: var(--fg);
  text-decoration: none;
}

.search-result:hover {
  border-color: var(--accent);
  background: var(--soft);
}

.search-result-title {
  color: var(--accent);
  font-weight: 600;
  font-size: var(--text-md);
}

.search-result-excerpt {
  color: var(--dim);
  font-size: var(--text-sm);
  line-height: 1.4;
}

.search-result-excerpt mark {
  background: var(--accent);
  color: var(--bg);
  padding: 0 0.2em;
}

.search-no-results {
  color: var(--dim);
  font-size: var(--text-sm);
  padding: var(--space-2) 0.7rem;
}

/* ============ BARRIERS LIST ============ */
/* Two-column term/description grid.
   Previously yanked left with margin-left: -8.75ch so
   the terms hung in main's left padding. Now it sits in
   normal flow with an aligned label column. */
.barrier-list {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 1ch;
  row-gap: var(--space-4);
  margin: var(--space-4) 0;
  padding-left: var(--indent-body);
  align-items: start;
}

.barrier-term {
  grid-column: 1;
  color: var(--accent);
  font-weight: 600;
  font-size: var(--text-sm);
  white-space: nowrap;
}

.barrier-list p {
  grid-column: 2;
  margin: 0;
  font-size: var(--text-sm);
}

/* BOOKING WIDGET */
.booking-widget {
  margin: var(--space-4) 0 var(--space-5);
  text-align: center;
}

.booking-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: var(--border-accent);
  background: var(--panel);
  color: var(--accent);
  font-family: inherit;
  font-size: var(--text-md);
  font-weight: 600;
  text-decoration: none;
}

.booking-btn:hover {
  background: var(--accent);
  color: var(--bg);
}

.booking-note {
  font-size: var(--text-xs);
  margin: var(--space-2) 0 0;
}

/* ============ CODE BLOCKS ============ */

pre {
  font-family: inherit;
  white-space: pre;
  overflow-x: auto;
}

.code {
  background: var(--soft);
  border-left: 2px solid var(--rule);
  padding: var(--space-4) 1.2rem;
  margin: var(--space-4) 0;
  font-size: var(--text-nav);
  line-height: 1.5;
}

.code .prompt {
  color: var(--accent);
}

.code .comment {
  color: var(--dim);
}

.code .kw {
  color: var(--accent);
}

.code .str {
  color: var(--hi);
}

.status-block {
  color: var(--fg);
  background: var(--soft);
  padding: var(--space-4) 1.2rem;
  margin: var(--space-4) 0;
  font-size: var(--text-nav);
}

.meta {
  color: var(--dim);
  font-size: var(--text-nav);
  margin-top: var(--space-4);
}

/* ============ FOOTER ============ */

footer {
  margin-top: var(--space-4);
  font-size: var(--text-nav);
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}

.footer-grid p {
  margin: var(--space-1) 0;
}

/* ============ BLINKING CURSOR ============ */

.cursor {
  position: fixed;
  bottom: var(--space-4);
  right: var(--space-5);
  color: var(--accent);
  font-family: inherit;
  font-size: var(--text-md);
  pointer-events: none;
}

.cursor::after {
  content: "█";
  animation: blink var(--blink);
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

/* ============ BLOG ============ */

.post-item {
  display: flex;
  align-items: stretch;
  gap: var(--space-4);
  margin: var(--space-5) 0;
  border: 1px solid var(--rule);
  padding: var(--space-4) 1.2rem;
  color: var(--fg);
  text-decoration: none;
  background: var(--panel);
}

.post-item:hover {
  border-color: var(--accent);
  background: var(--panel);
}

.post-item:hover .post-item-text p {
  color: var(--fg);
}

.post-item:hover .post-item-title {
  color: var(--accent);
}

.post-item:hover .dim {
  color: var(--dim);
}

.post-item-text {
  flex: 1;
}

.post-item-text p {
  margin: 0.2rem 0;
}

.post-item-text p:nth-child(2) {
  font-style: italic;
}

.post-item-icon {
  width: 80px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
}

.post-item-icon svg {
  width: 100%;
  height: auto;
  stroke: var(--accent);
}

.post-header {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin: 0 0 var(--space-6);
}

.post-header-text {
  flex: 1;
}

.post-header-text .tagline {
  font-size: var(--text-nav);
  padding-left: 3ch;
  text-indent: -3ch;
}

.post-header-text p {
  margin: 0.4rem 0;
  font-size: var(--text-sm);
}

.post-header-text p:last-child {
  margin-top: 0.75rem;
}

.post-header-text p.dim {
  padding-left: 3.5ch;
}

.post-header-text p.dim:last-child {
  font-style: italic;
}

.post-header .post-item-icon {
  width: 100px;
  flex-shrink: 0;
}

/* DIALOGUE */
.dialogue {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.2rem 0.5ch;
  align-items: start;
}

.speaker {
  padding-top: 0;
}

/* POST CONTENT */

.post-content pre {
  background: var(--ink);
  border-left: var(--border-left-accent);
  padding: var(--space-4) 1.2rem;
  font-size: var(--text-sm);
  line-height: 1.5;
  overflow-x: auto;
  margin: var(--space-4) 0;
}

.post-content pre code {
  background: transparent;
  color: var(--bg);
  font-family: inherit;
  font-size: inherit;
}

.post-content h2 {
  color: var(--accent);
  font-weight: 600;
  font-size: var(--text-md);
  margin: var(--space-6) 0 var(--space-2);
  padding-bottom: var(--space-1);
  border-bottom: var(--border-dashed);
}

.post-content blockquote {
  border-left: var(--border-left-accent);
  margin: var(--space-4) 0;
  padding: var(--space-2) var(--space-4);
  color: var(--dim);
  font-style: italic;
}

.post-content ul {
  list-style: none;
  padding-left: 4ch;
  font-size: var(--text-md);
}

.post-content ul li {
  position: relative;
  padding-left: 2ch;
}

.post-content ul li::before {
  content: "›";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 900;
}

.post-content ol {
  padding-left: 4ch;
  list-style: none;
  counter-reset: ol-counter;
  font-size: var(--text-md);
}

.post-content ol li {
  counter-increment: ol-counter;
  position: relative;
  padding-left: 1ch;
}

.post-content ol li::before {
  content: counter(ol-counter) ".";
  position: absolute;
  left: -3ch;
  color: var(--accent);
}

.post-content li {
  margin: var(--space-1) 0;
}

.post-content p {
  font-size: var(--text-md);
}

.post-content .footnote {
  border-top: none;
  margin-top: var(--space-7);
  padding-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--dim);
}

.post-content .footnote ol {
  padding-left: 0;
  list-style: none;
}

.post-content .footnote li {
  counter-increment: footnote-counter;
  padding-left: 3ch;
  position: relative;
  margin: var(--space-2) 0;
}

.post-content .footnote li::before {
  content: counter(footnote-counter) ".";
  color: var(--accent);
  position: absolute;
  left: 0;
}

.post-content .footnote hr {
  display: none;
}

.post-item-title {
  color: var(--accent);
  font-weight: 600;
  font-size: var(--text-nav);
}

.post-item-text p:not(.post-item-title) {
  font-size: var(--text-xs);
}

/* DRAFT SIGN */
body.draft::before {
  content: "DRAFT";
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(6rem, 15vw, 14rem);
  font-weight: 900;
  color: rgba(255, 0, 0, 0);
  rotate: -35deg;
  pointer-events: none;
  z-index: 9999;
  letter-spacing: 0.1em;
}

/* ============================================
   RESPONSIVE
   --------------------------------------------
   Instead of overriding individual components, we
   shrink the *tokens* at each breakpoint. Component
   rules reference the tokens, so they all adapt
   together. This is the "relate things to each other"
   payoff: one place to retune the whole system.
   ============================================ */

/* ---- tablet / small laptop: docs grid collapses ---- */
@media (max-width: 900px) {
  :root {
    --pad-inline: 1.5rem;
  }

  /* Stack the docs sidebar above the content instead of
     beside it. The sticky positioning is dropped so it
     scrolls normally. */
  body.docs main {
    max-width: var(--w-prose);
  }

  .docs-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
  }

  .doc-sidebar {
    position: static;
    top: auto;
    width: 100%;
    border-bottom: var(--border-dashed);
    padding-bottom: var(--space-4);
  }
}

/* ---- phone ---- */
@media (max-width: 640px) {
  :root {
    /* nudge the whole type ramp down one notch */
    --text-base: 0.8rem; /* 12px body */
    --text-nav: 1rem; /* 15px nav — stays tappable */
    --text-lg: 1.2rem;
    --text-xl: 1.467rem;
    --pad-inline: 1.2rem;
    --pad-block: 0.25rem;
  }

  main {
    max-width: 100%;
  }

  .tagline {
    font-size: var(--text-base);
    margin: 1.2rem 0 var(--space-2);
    padding-left: 3ch;
    text-indent: -3ch;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .btn {
    display: block;
    margin-bottom: var(--space-2);
  }

  .primary-nav {
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-4);
    margin-top: 0;
    font-size: var(--text-nav);
  }

  .hero-wide {
    padding: var(--space-4) var(--space-2) 0;
  }

  .frame {
    padding: 0 var(--space-2);
  }

  .frame-img {
    max-width: 100%;
    padding: 0 var(--space-2);
    margin-bottom: var(--space-4);
  }

  .first-tagline {
    margin-top: var(--space-2);
    margin-bottom: var(--space-6);
  }

  .pitch {
    max-width: 100%;
    padding-left: 2ch;
  }

  .dialogue {
    margin: var(--space-4) var(--space-1);
  }

  .signup {
    flex-direction: column;
    align-items: stretch;
    padding: 0 var(--space-4);
  }

  .email-input {
    width: 100%;
  }

  .link-row {
    flex-wrap: wrap;
    padding: 0 var(--space-4);
  }

  .code-block {
    margin: 0.75rem 0; /* drop the 4ch indent on phones */
    max-width: 100%;
    font-size: var(--text-xs);
  }

  .code-block pre {
    font-size: var(--text-xs);
  }

  /* barrier list: stack term above description so the
     11ch label column doesn't crush the text */
  .barrier-list {
    grid-template-columns: 1fr;
    gap: 0 0;
  }

  .barrier-term {
    text-align: left;
    margin-top: var(--space-2);
  }

  .post-header {
    max-width: 100%;
  }

  .post-header .post-item-icon {
    width: 60px;
  }

  .post-item .post-item-icon {
    width: 60px;
  }

  .search-modal {
    min-width: 0;
    width: 92vw;
    padding: var(--space-4);
  }
}