/* Tokens & Rails — shared design system · SWISS SIGNAL (v2, Jul 2026)
   Paper + ink + one loud signal color. Ruled grid, hard borders, invert-on-hover.
   Class contract preserved from v1 — pages depend on these names. */
:root {
  --bg: #f4f1ea;        /* paper */
  --bg2: #ede9df;       /* recessed paper */
  --panel: #fdfcf8;     /* raised card */
  --line: #111110;      /* rules are ink */
  --ink: #111110;
  --muted: #6f6c64;
  --green: #c2410c;     /* signal — keeps legacy var name, all accents map here */
  --cyan: #1d4ed8;      /* data blue (messages) */
  --pink: #b91c4b;      /* alert crimson */
  --purple: #4338ca;    /* indigo ink */
  --amber: #92400e;     /* dark amber */
  --paper: #fdfcf8;     /* receipt stock */
  --paper-ink: #1d1b16;
  --paper-line: #b9b2a2;
  --paper-muted: #6e6a5e;
  --paper-red: #a33d3d;
  --green-ink: #f4f1ea; /* text on signal */
  --signal-ink: #a8380a; /* orange AS TEXT on paper — WCAG-safe darkened signal (borders/fills keep --green) */
  --serif: "Archivo Expanded", "Archivo", sans-serif;
  --sans: "Archivo", -apple-system, sans-serif;
  --mono: "Spline Sans Mono", Consolas, monospace;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { background-color: var(--bg); color: var(--ink); font-family: var(--sans); overflow-x: hidden;
  background-image:
    repeating-linear-gradient(0deg, transparent 0 47px, rgba(17,17,16,.04) 47px 48px),
    repeating-linear-gradient(90deg, transparent 0 47px, rgba(17,17,16,.04) 47px 48px); }
::selection { background: var(--green); color: var(--bg); }

/* ---------- nav ---------- */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; justify-content: space-between; align-items: center;
  padding: 13px 20px;
  background: var(--bg);
  border-bottom: 2px solid var(--ink);
}
.brand { font-family: var(--serif); font-weight: 900; font-size: 14.5px; letter-spacing: -.01em; color: var(--ink); text-decoration: none; text-transform: uppercase; }
.brand b { color: var(--signal-ink); }
.brand span { color: var(--muted); font-family: var(--mono); font-weight: 400; font-size: 11px; text-transform: none; }
nav .links { display: flex; gap: 0; font-size: 13px; }
nav .links a { color: var(--ink); text-decoration: none; transition: background .15s, color .15s; text-transform: uppercase; letter-spacing: .06em; font-weight: 500; padding: 8px 16px; border-left: 2px solid var(--ink); }
nav .links a:hover, nav .links a.here { background: var(--ink); color: var(--bg); }
@media (max-width: 720px) {
  nav { flex-wrap: wrap; gap: 8px; }
  nav .links { width: 100%; overflow-x: auto; gap: 0; padding-bottom: 2px; -webkit-overflow-scrolling: touch; }
  nav .links a { white-space: nowrap; font-size: 12px; padding: 7px 12px; }
}

/* ---------- page hero ---------- */
.page-hero {
  min-height: 78vh; display: flex; flex-direction: column;
  justify-content: center; align-items: center; text-align: center;
  padding: 120px 6vw 60px; position: relative;
}
.page-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    repeating-linear-gradient(0deg, transparent 0 47px, rgba(17,17,16,.06) 47px 48px),
    repeating-linear-gradient(90deg, transparent 0 47px, rgba(17,17,16,.06) 47px 48px);
  mask-image: radial-gradient(900px 600px at 50% 40%, black, transparent);
  -webkit-mask-image: radial-gradient(900px 600px at 50% 40%, black, transparent);
}
.kicker { font-family: var(--mono); font-size: 12px; letter-spacing: 3px; color: var(--ink); margin-bottom: 24px; }
.kicker::before { content: "● "; color: var(--green); }
.hero-title {
  font-family: var(--serif); font-weight: 900; text-transform: uppercase;
  font-size: clamp(34px, 7.4vw, 84px); line-height: .97; letter-spacing: -.02em; max-width: 1000px;
}
.hero-title em { font-style: normal; color: var(--signal-ink); }
.hero-sub {
  font-family: var(--sans); font-weight: 400; font-size: clamp(16px, 2.2vw, 21px);
  color: var(--ink); margin-top: 26px; max-width: 640px; line-height: 1.55;
}
.hero-sub b { font-weight: 700; }
.scroll-cue { position: absolute; bottom: 30px; font-family: var(--mono); font-size: 11px; letter-spacing: 2px; color: var(--muted); animation: bob 2.2s ease-in-out infinite; }
@keyframes bob { 0%,100% { transform: translateY(0);} 50% { transform: translateY(7px);} }

/* ---------- sections ---------- */
section { position: relative; }
.sec-head { max-width: 880px; margin: 0 auto; padding: 100px 6vw 46px; }
.sec-num { font-family: var(--mono); font-size: 12px; letter-spacing: 3px; color: var(--cyan); margin-bottom: 14px; }
.sec-title { font-family: var(--serif); font-weight: 900; text-transform: uppercase; font-size: clamp(24px, 4.2vw, 42px); line-height: 1.02; letter-spacing: -.02em; }
.sec-title em { font-style: normal; color: var(--signal-ink); }
.sec-sub { color: var(--ink); font-size: 16px; line-height: 1.6; margin-top: 16px; max-width: 640px; }
.sec-sub b { font-weight: 700; }

/* ---------- metro vis + controls ---------- */
.vis-frame { background: var(--panel); border: 2px solid var(--ink); border-radius: 0; padding: 18px 14px 6px; }
.vis-frame svg { width: 100%; height: auto; display: block; }
.vis-wrap { max-width: 980px; margin: 0 auto; padding: 0 5vw; }
.exp-ctrl { display: flex; gap: 0; margin-top: 14px; border: 2px solid var(--ink); }
.btn {
  flex: 1; font-family: var(--mono); font-size: 13px; font-weight: 600;
  background: var(--bg); color: var(--ink); border: none; border-right: 2px solid var(--ink);
  border-radius: 0; padding: 13px 0; cursor: pointer; transition: background .15s, color .15s;
  text-transform: uppercase; letter-spacing: .06em;
}
.exp-ctrl .btn:last-child { border-right: none; }
.btn:hover { background: var(--ink); color: var(--bg); }
.btn.primary { background: var(--ink); color: var(--bg); }
.btn.primary:hover { background: var(--green); color: var(--green-ink); }
.btn:disabled { opacity: .3; cursor: default; background: var(--bg); color: var(--ink); }
.step-desc { font-size: 14.5px; color: var(--ink); line-height: 1.65; margin-top: 16px; border-left: 6px solid var(--green); padding-left: 14px; min-height: 70px; }
.step-desc b { font-weight: 700; }

/* ---------- concept cards ---------- */
.concepts { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 980px; margin: 0 auto; padding: 0 5vw 30px; }
@media (max-width: 800px) { .concepts { grid-template-columns: 1fr; } }
.concept { background: var(--panel); border: 2px solid var(--ink); border-radius: 0; padding: 24px 26px; }
.concept .c-ico { font-family: var(--mono); font-size: 11px; letter-spacing: 2px; color: var(--cyan); margin-bottom: 12px; }
.concept h3 { font-family: var(--serif); font-weight: 900; text-transform: uppercase; font-size: 16px; margin-bottom: 10px; letter-spacing: 0; }
.concept p { font-size: 14px; color: var(--ink); line-height: 1.65; }
.concept p b { font-weight: 700; }
.concept .analogy { font-family: var(--sans); font-style: italic; font-size: 15.5px; color: var(--muted); margin-bottom: 10px; }

/* ---------- accordion (players) ---------- */
.cast { max-width: 980px; margin: 0 auto; padding: 0 5vw 30px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
@media (max-width: 800px) { .cast { grid-template-columns: 1fr; } }
.player { background: var(--panel); border: 2px solid var(--ink); border-radius: 0; overflow: hidden; cursor: pointer; transition: box-shadow .15s; }
.player:hover { box-shadow: 6px 6px 0 var(--ink); }
.player.open { box-shadow: 6px 6px 0 var(--green); }
.player .p-head { display: flex; align-items: center; gap: 14px; padding: 18px 20px; }
.player .p-badge { width: 42px; height: 42px; border-radius: 0; border: 2px solid; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.player .p-badge svg { width: 21px; height: 21px; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.player .p-name { font-size: 15.5px; font-weight: 700; }
.player .p-tag { font-family: var(--mono); font-size: 11px; color: var(--muted); margin-top: 3px; }
.player .p-plus { margin-left: auto; font-family: var(--mono); color: var(--muted); font-size: 18px; transition: transform .25s; }
.player.open .p-plus { transform: rotate(45deg); color: var(--signal-ink); }
.player .p-body { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.player.open .p-body { max-height: 460px; }
.player .p-inner { padding: 0 20px 20px; font-size: 13.5px; color: var(--ink); line-height: 1.65; }
.player .p-inner .row { margin-bottom: 10px; }
.player .p-inner .lbl { font-family: var(--mono); font-size: 10.5px; letter-spacing: 1.5px; color: var(--cyan); display: block; margin-bottom: 3px; }
.player .p-inner b { font-weight: 700; }

/* ---------- bars ---------- */
.bars { max-width: 880px; margin: 0 auto; padding: 0 6vw 40px; }
.crow { margin-bottom: 28px; }
.crow .c-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 9px; }
.crow .c-name { font-family: var(--serif); font-weight: 900; text-transform: uppercase; font-size: 14px; }
.crow .c-name span { color: var(--muted); font-family: var(--mono); font-weight: 400; font-size: 11px; margin-left: 10px; text-transform: none; }
.crow .c-amt { font-family: var(--mono); font-size: 15px; font-weight: 600; }
.ctrack { height: 32px; background: var(--panel); border: 2px solid var(--ink); border-radius: 0; overflow: hidden; position: relative; }
.cbar { height: 100%; width: 0; border-radius: 0; transition: width 1.3s cubic-bezier(.2,.7,.2,1); }
.cbar.striped { background-image: repeating-linear-gradient(-45deg, rgba(0,0,0,.25) 0 9px, transparent 9px 18px) !important; }
.c-chips { display: flex; gap: 8px; margin-top: 9px; flex-wrap: wrap; }
.c-chip { font-family: var(--mono); font-size: 10.5px; letter-spacing: .6px; color: var(--ink); border: 1.5px solid var(--ink); border-radius: 0; padding: 3.5px 11px; }
.c-foot { font-size: 13px; color: var(--muted); margin-top: 26px; line-height: 1.65; font-family: var(--mono); }

/* ---------- receipt ---------- */
.receipt {
  background: var(--paper); color: var(--paper-ink);
  font-family: var(--mono); font-size: 13px;
  border: 2px solid var(--ink); border-radius: 0; padding: 26px 24px 30px;
  box-shadow: 10px 10px 0 var(--ink);
  clip-path: none;
}
.receipt .r-head { text-align: center; border-bottom: 2px dashed var(--paper-line); padding-bottom: 14px; margin-bottom: 14px; }
.receipt .r-title { font-size: 15px; font-weight: 700; letter-spacing: 2.5px; }
.receipt .r-rail { font-size: 11.5px; color: var(--paper-muted); margin-top: 5px; letter-spacing: 1px; }
.r-row { display: flex; justify-content: space-between; padding: 4.5px 0; }
.r-row.fee { color: var(--signal-ink); }
.r-row.hl { background: rgba(255,77,0,.08); margin: 0 -8px; padding: 4.5px 8px; border-radius: 0; }
.r-row .dots-fill { flex: 1; border-bottom: 1px dotted var(--paper-line); margin: 0 8px 4px; }
.r-total { border-top: 2px dashed var(--paper-line); margin-top: 12px; padding-top: 12px; display: flex; justify-content: space-between; font-size: 16px; font-weight: 700; }
.r-pct { text-align: right; font-size: 11px; color: var(--paper-muted); margin-top: 3px; }
.r-meta { margin-top: 14px; font-size: 11px; color: var(--paper-muted); line-height: 1.7; }
.r-barcode { margin-top: 16px; height: 34px; background: repeating-linear-gradient(90deg, #1d1b16 0 2px, transparent 2px 5px, #1d1b16 5px 6px, transparent 6px 11px, #1d1b16 11px 14px, transparent 14px 17px); opacity: .85; }
.split { display: grid; grid-template-columns: 11fr 8fr; gap: 26px; max-width: 980px; margin: 0 auto; padding: 0 5vw 40px; align-items: start; }
@media (max-width: 880px) { .split { grid-template-columns: 1fr; } }

/* ---------- takeaways + page nav ---------- */
.takeaways { max-width: 760px; margin: 0 auto; padding: 0 6vw 80px; }
.take { display: flex; gap: 16px; padding: 20px 0; border-bottom: 2px solid var(--ink); font-size: 16px; line-height: 1.62; color: var(--ink); }
.take b { font-weight: 700; }
.take .t-n { font-family: var(--serif); font-size: 28px; font-weight: 900; color: var(--signal-ink); line-height: 1; flex-shrink: 0; width: 44px; }
.page-nav { display: flex; justify-content: space-between; gap: 14px; max-width: 980px; margin: 0 auto; padding: 0 5vw 90px; flex-wrap: wrap; }
.pn { flex: 1; min-width: 240px; background: var(--panel); border: 2px solid var(--ink); border-radius: 0; padding: 20px 22px; text-decoration: none; transition: background .15s, color .15s; }
.pn:hover { background: var(--ink); }
.pn:hover .pn-title { color: var(--bg); }
.pn:hover .pn-dir { color: var(--signal-ink); }
.pn .pn-dir { font-family: var(--mono); font-size: 11px; letter-spacing: 2px; color: var(--muted); margin-bottom: 8px; }
.pn .pn-title { font-family: var(--serif); font-weight: 900; text-transform: uppercase; font-size: 16px; color: var(--ink); }
.pn.next { text-align: right; }
footer { padding: 26px 20px 40px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; border-top: 2px solid var(--ink); font-family: var(--mono); font-size: 11.5px; color: var(--muted); letter-spacing: .03em; }

/* ---------- field notes (collapsible pro layer, Jul 2026) ---------- */
.fnotes { max-width: 760px; margin: 0 auto; padding: 0 6vw 60px; }
.fnotes details { border: 2px solid var(--ink); background: var(--panel); margin-bottom: 12px; }
.fnotes summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 16px 20px; font-family: var(--mono); font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.fnotes summary::-webkit-details-marker { display: none; }
.fnotes summary::after { content: "+"; font-size: 18px; color: var(--signal-ink); flex-shrink: 0; }
.fnotes details[open] summary { background: var(--ink); color: var(--bg); }
.fnotes details[open] summary::after { content: "–"; }
.fnotes .fn-body { padding: 18px 20px 20px; font-size: 15.5px; line-height: 1.72; border-top: 2px solid var(--ink); }
.fnotes .fn-body b { font-weight: 700; }
.fnotes .fn-body .fn-data { font-family: var(--mono); font-size: 12.5px; background: var(--bg2); border: 1.5px solid var(--ink); padding: 10px 14px; margin: 10px 0; line-height: 1.9; }


/* ---------- terminal / ink-plate block (restored Jul 2026 after site.css truncation) ---------- */
.term { width: min(900px, calc(100% - 40px)); margin: 0 auto; background: var(--ink); color: #dcd8cb;
  font-family: var(--mono); font-size: 13.5px; line-height: 1.95; border: 2px solid var(--ink);
  box-shadow: 6px 6px 0 var(--green); padding: 24px 26px; overflow-x: auto; }
.term .dim { color: #8f8a7c; }
.term .bad { color: #ff6a6a; font-weight: 600; }
.term .ok  { color: var(--green); font-weight: 600; }

/* ---------- stat grid (restored Jul 2026 after site.css truncation) ---------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px;
  max-width: 980px; margin: 0 auto; padding: 0 5vw 30px; }
.stat { background: var(--panel); border: 2px solid var(--ink); border-radius: 0; padding: 22px 20px; }
.stat .s-num { font-family: var(--serif); font-weight: 900; font-size: clamp(26px, 3.4vw, 36px);
  color: var(--signal-ink); line-height: 1; letter-spacing: -.01em; }
.stat .s-lbl { font-size: 12.5px; color: var(--muted); margin-top: 10px; line-height: 1.55; }


/* ---------- rich site footer (injected by progress.js; static <footer> is the no-JS fallback) ---------- */
.site-footer { border-top: 2px solid var(--ink); background: var(--bg); margin-top: 40px; display: block; padding: 0; font-family: var(--sans); }
.site-footer .foot-grid { max-width: 1140px; margin: 0 auto; padding: 52px 5vw 30px; display: grid; grid-template-columns: 1.9fr 1fr 1fr 1fr 1fr; gap: 34px 26px; }
@media (max-width: 900px) { .site-footer .foot-grid { grid-template-columns: 1fr 1fr; } .site-footer .foot-brand { grid-column: 1 / -1; } }
@media (max-width: 540px) { .site-footer .foot-grid { grid-template-columns: 1fr; } }
.site-footer .foot-logo { font-family: var(--serif); font-weight: 900; text-transform: uppercase; font-size: 16px; color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; gap: 9px; }
.site-footer .foot-logo b { color: var(--signal-ink); }
.site-footer .foot-badge { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; background: var(--green); color: var(--green-ink); font-family: var(--mono); font-weight: 700; font-size: 15px; }
.site-footer .foot-mission { font-size: 13px; color: var(--muted); line-height: 1.6; margin: 14px 0 16px; max-width: 350px; }
.site-footer .foot-sub { max-width: 320px; }
.site-footer .foot-note { font-family: var(--mono); font-size: 11px; color: var(--muted); margin-top: 10px; letter-spacing: .04em; }
.site-footer .foot-col { display: flex; flex-direction: column; gap: 9px; align-items: flex-start; }
.site-footer .foot-h { font-family: var(--mono); font-size: 11px; letter-spacing: 2px; color: var(--muted); margin-bottom: 4px; text-transform: uppercase; }
.site-footer .foot-col a { font-size: 13px; color: var(--ink); text-decoration: none; }
.site-footer .foot-col a:hover { color: var(--signal-ink); }

/* ---------- Substack subscribe embed (hero CTA + footer) ---------- */
/* The iframe is cross-origin (Substack-styled inside), so this wrapper carries the
   Swiss-Signal frame around it: hard border + offset shadow, matching the receipt/
   ink-plate components, so it reads as ours rather than a foreign ad. */
.sub-embed { display: inline-block; max-width: 100%; border: 2px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); background: #fff; line-height: 0; }
.sub-embed iframe { display: block; max-width: 100%; border: none !important; }
.site-footer .foot-bar { border-top: 1px solid var(--line); max-width: 1140px; margin: 0 auto; padding: 16px 5vw 34px; display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; }
.site-footer .foot-copy { font-family: var(--mono); font-size: 11px; color: var(--muted); letter-spacing: .03em; line-height: 1.6; }
.site-footer .foot-social { display: flex; gap: 8px; }
.site-footer .foot-social a { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 2px solid var(--ink); color: var(--ink); transition: background .15s, color .15s; }
.site-footer .foot-social a:hover { background: var(--ink); color: var(--bg); }
.site-footer .foot-social svg { width: 16px; height: 16px; }


/* ---------- site search (injected by progress.js) ---------- */
.mfa-search { background: none; border: 2px solid var(--ink); color: var(--ink); cursor: pointer; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; margin-left: 10px; flex-shrink: 0; transition: background .15s, color .15s; }
.mfa-search:hover { background: var(--ink); color: var(--bg); }
.mfa-search svg { width: 15px; height: 15px; }
.mfa-modal { position: fixed; inset: 0; z-index: 90; background: rgba(17,17,16,.5); display: none; align-items: flex-start; justify-content: center; padding: 11vh 16px 16px; }
.mfa-modal.open { display: flex; }
.mfa-mbox { background: var(--bg); border: 2px solid var(--ink); box-shadow: 8px 8px 0 var(--ink); width: min(620px, 100%); max-height: 76vh; display: flex; flex-direction: column; }
.mfa-mbox input { border: none; border-bottom: 2px solid var(--ink); background: var(--panel); padding: 16px 18px; font-size: 16px; font-family: var(--sans); color: var(--ink); outline: none; }
.mfa-res { overflow-y: auto; }
.mfa-r { display: block; padding: 12px 18px; text-decoration: none; border-bottom: 1px solid var(--line); }
.mfa-r.sel, .mfa-r:hover { background: var(--bg2); }
.mfa-r .r-t { font-family: var(--serif); font-weight: 700; font-size: 15px; color: var(--ink); }
.mfa-r .r-y { font-family: var(--mono); font-size: 10px; letter-spacing: 1px; color: var(--signal-ink); margin-left: 8px; }
.mfa-r .r-b { font-size: 12.5px; color: var(--muted); margin-top: 3px; line-height: 1.4; }
.mfa-empty { padding: 22px 18px; color: var(--muted); font-size: 14px; }
.mfa-mhint { padding: 9px 18px; font-family: var(--mono); font-size: 10.5px; color: var(--muted); border-top: 1px solid var(--line); display: flex; justify-content: space-between; }

/* ---------- The Desk — essays (thought-leadership layer, prose-first) ---------- */
.essay { max-width: 720px; margin: 0 auto; padding: 0 6vw 20px; }
.essay-meta { font-family: var(--mono); font-size: 12px; letter-spacing: 1.5px; color: var(--muted); border-bottom: 1px solid var(--line); padding-bottom: 12px; margin-bottom: 26px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.essay-lede { font-family: var(--serif); font-size: 20px; line-height: 1.5; color: var(--ink); margin: 0 0 24px; }
.essay-body { font-size: 17px; line-height: 1.75; color: var(--ink); }
.essay-body > p { margin: 0 0 20px; }
.essay-body h2 { font-family: var(--serif); font-weight: 800; font-size: 23px; margin: 34px 0 12px; line-height: 1.22; }
.essay-body b { font-weight: 700; }
.essay-body a { color: var(--signal-ink); }
.essay-art { border: 2px solid var(--ink); background: var(--panel); padding: 18px 20px; margin: 26px 0; box-shadow: 6px 6px 0 var(--ink); font-family: var(--mono); font-size: 13px; line-height: 1.75; }
.essay-art .art-h { font-size: 11px; letter-spacing: 2px; color: var(--muted); margin-bottom: 10px; }
.essay-art .art-row { display: flex; justify-content: space-between; gap: 12px; }
.essay-art .art-row b { color: var(--signal-ink); }
.essay-teaches { max-width: 720px; margin: 12px auto 0; padding: 22px 6vw 40px; }
.essay-teaches .lbl { font-family: var(--mono); font-size: 11px; letter-spacing: 2px; color: var(--muted); margin-bottom: 12px; border-top: 2px solid var(--ink); padding-top: 20px; }
.essay-teaches a { display: inline-block; font-family: var(--mono); font-size: 12px; font-weight: 600; border: 2px solid var(--ink); padding: 8px 14px; margin: 0 8px 8px 0; color: var(--ink); text-decoration: none; transition: background .12s, color .12s; }
.essay-teaches a:hover { background: var(--ink); color: var(--bg); }
/* From-the-Desk list (news.html lane 2) */
.desk-lane { max-width: 800px; margin: 40px auto 0; padding: 0 6vw; }
.desk-lane-h { font-family: var(--mono); font-size: 12px; letter-spacing: 2px; color: var(--signal-ink); border-top: 2px solid var(--ink); padding-top: 22px; margin-bottom: 4px; }
.desk-lane-sub { font-size: 14px; color: var(--muted); margin-bottom: 18px; line-height: 1.6; }
.desk-essay { display: block; text-decoration: none; padding: 20px 0; border-bottom: 1px dashed var(--line); }
.desk-essay .de-meta { font-family: var(--mono); font-size: 11px; letter-spacing: 1px; color: var(--muted); margin-bottom: 7px; }
.desk-essay h3 { font-family: var(--serif); font-size: 22px; font-weight: 600; line-height: 1.2; color: var(--ink); margin-bottom: 6px; }
.desk-essay p { font-size: 14px; color: var(--muted); line-height: 1.6; }
.desk-essay:hover h3 { color: var(--signal-ink); }

/* ===== DEPTH LAYER (Jul 2026): plain-words boxes, term cards, mini-sims — see DEPTH-PLAN.md ===== */
.plain { max-width: 860px; margin: 26px auto; padding: 20px 24px 18px; background: var(--panel); border: 2px solid var(--ink); border-left: 10px solid var(--green); box-shadow: 6px 6px 0 var(--ink); }
.plain .p-lbl { font-family: var(--mono); font-size: 10.5px; letter-spacing: 2px; color: var(--signal-ink); margin-bottom: 8px; }
.plain p { font-size: 16.5px; line-height: 1.7; color: var(--ink); }
.plain p b { font-weight: 700; }
.plain p + p { margin-top: 10px; }

.tcards { max-width: 980px; margin: 0 auto; padding: 0 5vw 30px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 800px) { .tcards { grid-template-columns: 1fr; } }
.tcard { background: var(--panel); border: 2px solid var(--ink); padding: 20px 22px; }
.tcard .t-term { font-family: var(--serif); font-weight: 900; text-transform: uppercase; font-size: 15.5px; color: var(--signal-ink); }
.tcard .t-say { font-family: var(--mono); font-size: 11px; color: var(--muted); margin: 3px 0 10px; letter-spacing: .5px; }
.tcard .t-def { font-size: 14.5px; line-height: 1.65; }
.tcard .t-def b { font-weight: 700; }
.tcard .t-eg { margin-top: 11px; font-size: 13.5px; line-height: 1.6; color: var(--ink); background: var(--bg); border: 1.5px solid var(--line); padding: 10px 12px; }
.tcard .t-eg::before { content: "EXAMPLE · "; font-family: var(--mono); font-size: 10px; letter-spacing: 1.5px; color: var(--signal-ink); }
.tcard .t-why { margin-top: 10px; font-size: 12.5px; color: var(--muted); line-height: 1.55; }
.tcard .t-why b { color: var(--ink); font-weight: 700; }

.sim { max-width: 980px; margin: 0 auto 34px; padding: 0 5vw; }
.sim-frame { background: var(--panel); border: 2px solid var(--ink); box-shadow: 8px 8px 0 var(--ink); padding: 18px; }
.sim-grid { display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: 12px; }
@media (max-width: 800px) { .sim-grid { grid-template-columns: 1fr; } }
.sim-led { border: 2px solid var(--ink); background: var(--bg); }
.sim-led h4 { font-family: var(--mono); font-size: 11px; letter-spacing: 1.5px; padding: 8px 10px; border-bottom: 2px solid var(--ink); background: var(--ink); color: var(--green-ink); font-weight: 600; }
.sim-led.central h4 { background: var(--green); }
.sim-rows { padding: 9px 12px; font-family: var(--mono); font-size: 12.5px; line-height: 2; min-height: 116px; }
.sim-rows .neg { color: var(--pink); font-weight: 600; }
.sim-rows .pos { color: var(--signal-ink); font-weight: 600; }
.sim-rows .pend { color: var(--muted); font-style: italic; }
.sim-ctl { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.sim-note { font-family: var(--mono); font-size: 12px; color: var(--ink); margin-top: 13px; line-height: 1.65; border-left: 6px solid var(--green); padding-left: 12px; min-height: 40px; }
.sim-risk { font-family: var(--mono); font-size: 11.5px; margin-top: 9px; color: var(--muted); }
.sim-risk b { color: var(--pink); }

/* static diagrams: keep readable on phones by allowing horizontal scroll instead of shrinking */
.vis-frame.diag { overflow-x: auto; }
.vis-frame.diag svg { min-width: 620px; }

/* ===== WHEN IT BREAKS (Jul 2026): failure-mode cards + decision tree — see BACKLOG "how it fails" ===== */
.fails { max-width: 1000px; margin: 0 auto; padding: 0 5vw 26px; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
@media (max-width: 860px) { .fails { grid-template-columns: 1fr; } }
.failcard { background: var(--panel); border: 2px solid var(--ink); border-top: 8px solid var(--pink); padding: 18px 20px; box-shadow: 5px 5px 0 var(--ink); display: flex; flex-direction: column; }
.failcard .f-tag { font-family: var(--mono); font-size: 10px; letter-spacing: 1.6px; color: var(--pink); font-weight: 600; }
.failcard .f-head { font-family: var(--serif); font-weight: 900; text-transform: uppercase; font-size: 15px; line-height: 1.18; margin: 5px 0 6px; color: var(--ink); }
.failcard .f-line { font-size: 13.5px; line-height: 1.6; margin-top: 9px; }
.failcard .f-line b { font-weight: 700; }
.failcard .f-line .f-k { display: block; font-family: var(--mono); font-size: 9.5px; letter-spacing: 1.3px; color: var(--muted); margin-bottom: 2px; }
.failcard .f-fix { margin-top: auto; padding-top: 11px; }
.failcard .f-fix .f-k { color: var(--signal-ink); }
.dtree { max-width: 860px; margin: 0 auto 34px; padding: 0 5vw; }
.dtree-frame { border: 2px solid var(--ink); background: var(--panel); box-shadow: 8px 8px 0 var(--ink); }
.dtree-frame .d-cap { font-family: var(--mono); font-size: 11px; letter-spacing: 1.4px; padding: 11px 16px; background: var(--ink); color: var(--green-ink); font-weight: 600; }
.dnode { padding: 14px 16px; border-top: 2px solid var(--ink); }
.dnode .d-q { font-family: var(--mono); font-size: 12.5px; letter-spacing: .3px; font-weight: 600; line-height: 1.5; }
.dnode .d-q b { color: var(--signal-ink); }
.dnode .d-branch { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 11px; }
@media (max-width: 640px) { .dnode .d-branch { grid-template-columns: 1fr; } }
.dbr { border: 1.5px solid var(--ink); padding: 10px 12px; font-size: 13px; line-height: 1.55; background: var(--bg); }
.dbr .d-cond { font-family: var(--mono); font-size: 10px; letter-spacing: 1px; color: var(--signal-ink); display: block; margin-bottom: 4px; font-weight: 600; }
.dbr.stop { border-left: 6px solid var(--pink); }
.dbr.go { border-left: 6px solid var(--green); }

@media (max-width: 700px) { .plain { margin: 22px 4vw; padding: 16px 18px 14px; } .plain p { font-size: 15.5px; } }