/* ==========================================================================
   s-martens.com — "The Workshop and the Maze"
   Design tokens per the June 2026 brief §7. Change a value in :root and every
   page follows.
   ========================================================================== */

:root {
  /* Color tokens */
  --paper:        #F2EBDC;   /* page ground, light sections */
  --ink:          #221D17;   /* text on paper */
  --maze-black:   #0B0908;   /* hero + contact bands, footer */
  --parchment:    #E8E0CD;   /* text on dark */
  --gold-dark:    #F5D97A;   /* gold on dark grounds */
  --gold-paper:   #B8932E;   /* gold on paper grounds: rules, chip fills, large type */
  --terracotta:   #DD6F55;   /* links on dark, chip fills */
  --stone:        #8A8378;   /* rules, borders, large muted type */

  /* Text-use tokens: the same hues, dark enough to read at body size on paper */
  --gold-text:       #7A5E16;
  --stone-text:      #6B655B;
  --terracotta-text: #A84A32;

  /* Type system */
  --font-display: "Libre Baskerville", Georgia, "Times New Roman", serif;
  --font-body:    "Source Sans 3", system-ui, -apple-system, sans-serif;
  --font-longread:"Karla", var(--font-body);

  --fs-h1:   clamp(40px, 5vw, 48px);
  --fs-h2:   clamp(30px, 3.5vw, 34px);
  --fs-h3:   clamp(20px, 2.2vw, 23px);
  --fs-body: 17.5px;
  --fs-eyebrow: 13px;

  --container: 1140px;
}

/* ---- Reset-ish ---- */
* { margin: 0; padding: 0; box-sizing: border-box; }
img { max-width: 100%; display: block; }

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
}

/* ---- Type ---- */
h1, h2, .display { font-family: var(--font-display); font-weight: 400; line-height: 1.18; }
h1 { font-size: var(--fs-h1); letter-spacing: -0.01em; text-wrap: balance; }
h2 { font-size: var(--fs-h2); margin-bottom: 0.6em; text-wrap: balance; }
h3 { font-family: var(--font-body); font-weight: 600; font-size: var(--fs-h3); margin-bottom: 0.35em; }

p + p { margin-top: 1em; }

a { color: var(--terracotta-text); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
.band-dark a { color: var(--terracotta); }

a:focus-visible, .btn:focus-visible { outline: 2px solid var(--gold-paper); outline-offset: 3px; }
.band-dark a:focus-visible, .site-header a:focus-visible, .site-footer a:focus-visible { outline-color: var(--gold-dark); }

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-text);
  display: block;
  margin-bottom: 1.1em;
}
.band-dark .eyebrow { color: var(--gold-dark); }

.epigraph {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.25em;
  color: var(--stone-text);
  margin-bottom: 1.4em;
}
.band-dark .epigraph { color: #B5AC9C; }

/* ---- Bands ---- */
.band { padding: 88px 24px; }
.band-paper { background: var(--paper); color: var(--ink); }
.band-dark  { background: var(--maze-black); color: var(--parchment); }
.band-dark h1, .band-dark h2 { color: var(--parchment); }

/* faint gel-print wash on alternate light sections (brief: 6–8% opacity) */
.band-wash {
  background-color: var(--paper);
  background-image: linear-gradient(rgba(242,235,220,0.96), rgba(242,235,220,0.96)), url("../assets/descent-wash.jpg");
  background-size: cover;
  background-position: center 30%;
}

.container { max-width: var(--container); margin: 0 auto; }
.container-narrow { max-width: 40em; margin: 0 auto; }

/* ---- Header ---- */
.site-header {
  background: var(--maze-black);
  color: var(--parchment);
  padding: 0 24px;
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid rgba(245,217,122,0.18);
}
.site-header .container {
  display: flex;
  align-items: center;
  gap: 28px;
  height: 64px;
}
.wordmark {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.22em;
  color: var(--parchment) !important;
  margin-right: auto;
  white-space: nowrap;
  text-decoration: none;
}
.wordmark:hover { text-decoration: none; color: var(--gold-dark) !important; }
.site-nav { display: flex; align-items: center; gap: 26px; }
.site-nav a {
  color: var(--parchment);
  font-size: 15px;
  font-weight: 400;
  text-decoration: none;
}
.site-nav a.active { color: var(--gold-dark); }
.site-nav a:hover { color: var(--gold-dark); text-decoration: none; }

/* ---- Buttons ----
   .btn-gold = the metallic 3-stop gradient pill borrowed from Orpheus exits. */
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  padding: 13px 28px;
  border-radius: 999px;
  text-decoration: none !important;
  line-height: 1.2;
  border: 1.5px solid transparent;
}
.btn-gold {
  background: linear-gradient(180deg, #F8E29B 0%, #E3BC55 55%, #C49A33 100%);
  color: #2A2208 !important;
  box-shadow: 0 1px 0 rgba(255,244,200,0.6) inset, 0 2px 6px rgba(0,0,0,0.25);
}
.btn-gold:hover { filter: brightness(1.06); }
.btn-outline {
  border-color: var(--stone);
  color: var(--ink) !important;
}
.band-dark .btn-outline { border-color: var(--parchment); color: var(--parchment) !important; }
.btn-outline:hover { border-color: var(--terracotta); color: var(--terracotta-text) !important; }
.band-dark .btn-outline:hover { color: var(--terracotta) !important; }
.btn-row { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 1.8em; }
.btn-sm { font-size: 14px; padding: 9px 20px; }

/* ---- Laurel divider (brief: heraldic device, not a banner) ---- */
.laurel {
  display: block;
  width: 128px;
  height: 32px;
  margin: 0 auto;
  background: url("../assets/border_laurel.png") center / contain no-repeat;
  opacity: 0.55;
}
.band-paper .laurel, .band-wash .laurel { filter: invert(0.75) sepia(0.4); opacity: 0.5; }

/* ---- Hero ---- */
.hero { padding: 0 24px; overflow: hidden; }
.hero .container {
  display: grid;
  grid-template-columns: minmax(280px, 420px) 1fr;
  gap: 56px;
  align-items: center;
  min-height: 560px;
}
.hero-art {
  align-self: stretch;
  background: url("../assets/emergence-hero.jpg") center / cover no-repeat;
  /* bleed in from the left, fade into the maze on the right */
  -webkit-mask-image: linear-gradient(90deg, black 55%, transparent 100%);
  mask-image: linear-gradient(90deg, black 55%, transparent 100%);
  min-height: 420px;
}
.hero-copy { padding: 72px 0; }
.hero-copy h1 { color: var(--parchment); margin-bottom: 0.5em; }
.hero-copy p { font-size: 19px; max-width: 34em; }

/* ---- Proof strip ---- */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}
.stat-card { border-top: 2px solid var(--gold-paper); padding-top: 18px; }
.stat-card .stat-lead {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.3vw, 27px);
  line-height: 1.25;
  display: block;
  margin-bottom: 0.45em;
  color: var(--ink);
  text-wrap: balance;
}
.stat-card p { font-size: 15.5px; color: #4A443B; }
.stat-card a.stat-lead { color: inherit; text-decoration: none; border-bottom: 1px solid var(--gold-paper); }
.stat-card a.stat-lead:hover { border-bottom-color: var(--terracotta-text); }

/* ---- One room (homepage): a phone capture of Orpheus, shown at 2x ---- */
.room-link { display: block; justify-self: center; max-width: 340px; width: 100%; }
.room-shot { display: block; width: 100%; height: auto; border-radius: 18px; border: 1px solid rgba(0,0,0,0.35); box-shadow: 0 16px 40px rgba(0,0,0,0.28); }
@media (max-width: 900px) { .room-link { max-width: 300px; margin: 0 auto; } }

/* ---- Card rows (offer cards, principles) ---- */
.card-grid { display: grid; gap: 28px; }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-2 { grid-template-columns: repeat(2, 1fr); }
.card {
  background: rgba(255,255,255,0.42);
  border: 1px solid rgba(138,131,120,0.35);
  border-radius: 10px;
  padding: 30px 28px;
}
.band-dark .card {
  background: rgba(242,235,220,0.05);
  border-color: rgba(232,224,205,0.18);
}

/* ---- Split sections (text + media) ---- */
.split {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 56px;
  align-items: center;
}
.split.media-left { grid-template-columns: 0.85fr 1.15fr; }

/* ---- Project ledger (Daedalus page) ---- */
.ledger-row {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 36px;
  padding: 36px 0;
  border-bottom: 1px solid rgba(138,131,120,0.35);
  align-items: start;
}
.ledger-row:last-child { border-bottom: none; }
.ledger-row p { max-width: 38em; }
.ledger-art {
  width: 150px; height: 150px;
  display: flex; align-items: center; justify-content: center;
}
.ledger-art img { width: 96px; opacity: 0.85; }
.ledger-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 0.4em; }
.ledger-head h3 { font-family: var(--font-display); font-size: 24px; margin: 0; }

.chip {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 3px 12px;
  border-radius: 999px;
  white-space: nowrap;
}
.chip-shipped, .chip-live { background: var(--gold-paper); color: var(--ink); }
.chip-working { background: var(--terracotta); color: var(--ink); }
.chip-next    { border: 1.5px solid var(--stone-text); color: var(--stone-text); }
.chip-date { font-size: 12px; letter-spacing: 0.1em; color: var(--stone-text); font-weight: 600; }

/* ---- Structural diagram ("how the pieces fit") ---- */
.dia-fig { margin: 0; overflow-x: auto; }
.dia-fig svg { display: block; width: 100%; min-width: 760px; height: auto; }
.dia-fig figcaption { font-size: 15px; color: var(--stone-text); margin-top: 14px; max-width: 48em; }
/* Phone fallback: the SVG's labels render at ~8px inside a 375px viewport, so below 560px the
   same content is shown as a column of cards and the SVG is hidden (the aria-label stays on the
   figure for screen readers; the stack is aria-hidden to avoid reading it twice). */
.dia-stack { display: none; }
.dia-stack-you { font-size: 15.5px; color: var(--stone-text); margin: 0 0 12px; }
.dia-card { border: 1.2px solid var(--ink); background: var(--parchment); border-radius: 6px; padding: 10px 12px; margin: 0 0 8px; }
.dia-card p { font-size: 14.5px; line-height: 1.45; margin: 6px 0 0; max-width: none; }
.dia-card-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.dia-card-name { font-family: var(--font-display); font-size: 19px; }
.dia-card-role { font-family: var(--font-body); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; color: var(--stone-text); }
.dia-card-head .chip { margin-left: auto; }
.dia-card-base { border-width: 1.6px; margin-top: 14px; }
.dia-card-next { border-style: dashed; border-color: var(--stone-text); }
.band-dark .dia-card { color: var(--ink); }
.dia { color: var(--ink); }
.band-dark .dia { color: var(--parchment); }
.dia .box    { fill: var(--parchment); stroke: var(--ink); stroke-width: 1.2; }
.dia .plinth { fill: var(--parchment); stroke: var(--ink); stroke-width: 1.6; }
.dia .ln     { stroke: var(--ink); stroke-width: 1.2; fill: none; }
.dia .ln-acc { stroke: var(--terracotta-text); stroke-width: 1.6; fill: none; }
.dia .lyre   { fill: none; stroke: var(--stone-text); stroke-width: 1.2; stroke-dasharray: 6 5; }
.dia .t-title { font-family: var(--font-display); font-size: 20px; fill: currentColor; }
.dia .t-role  { font-family: var(--font-body); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; fill: var(--stone-text); }
.dia .t-desc  { font-family: var(--font-body); font-size: 13px; fill: currentColor; }
.dia .t-arrow { font-family: var(--font-body); font-size: 12px; fill: var(--stone-text); }
.dia .t-arrow.acc { fill: var(--terracotta-text); font-weight: 600; }
.dia .t-you   { font-family: var(--font-display); font-style: italic; font-size: 15px; fill: currentColor; }
.dia .t-src   { font-family: var(--font-body); font-size: 12px; fill: var(--stone-text); }
.dia .chip-fill { fill: var(--gold-paper); }
.dia .chip-outline { fill: none; stroke: var(--stone-text); stroke-width: 1; }
.dia .t-chip { font-family: var(--font-body); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; fill: var(--ink); }
.dia .t-chip-next { fill: var(--stone-text); }
.dia .room { fill: #D9CFB6; stroke: var(--ink); stroke-width: 0.6; }
.dia .room-on { fill: var(--gold-paper); }
.dia .node { fill: var(--ink); }
.dia .you  { fill: none; stroke: var(--ink); stroke-width: 1.4; }
.band-dark .dia .box, .band-dark .dia .plinth { fill: #1A1512; stroke: var(--parchment); }
.band-dark .dia .ln, .band-dark .dia .you { stroke: var(--parchment); }
.band-dark .dia .ln-acc { stroke: #F0846A; }
.band-dark .dia .lyre { stroke: #B5AC9C; }
.band-dark .dia .t-role, .band-dark .dia .t-arrow, .band-dark .dia .t-src, .band-dark .dia .t-chip-next { fill: #B5AC9C; }
.band-dark .dia .t-arrow.acc { fill: #F0846A; }
.band-dark .dia .chip-fill { fill: var(--gold-dark); }
.band-dark .dia .chip-outline { stroke: #B5AC9C; }
.band-dark .dia .t-chip { fill: var(--maze-black); }
.band-dark .dia .room { fill: #3A322A; stroke: var(--parchment); }
.band-dark .dia .room-on { fill: var(--gold-dark); }
.band-dark .dia .node { fill: var(--parchment); }

/* ---- Track record cards: a dated ledger, year column left ---- */
.tr-card {
  display: grid;
  grid-template-columns: 140px 1fr 280px;
  gap: 32px;
  padding: 32px 0;
  border-bottom: 1px solid rgba(138,131,120,0.35);
  align-items: start;
}
.tr-card:last-of-type { border-bottom: none; }
.tr-card p { max-width: 38em; }
/* Card figure. True colour, not duotoned: in these six the colour *is* the
   information, so the ink/gold treatment used on the portraits would destroy
   the thing the picture is evidence for. A hairline rule ties them together
   instead. Assets are 560px wide, i.e. 2x the 280px slot. */
.tr-shot {
  width: 100%;
  height: auto;
  border: 1px solid rgba(138,131,120,0.35);
  border-radius: 2px;
}
.tr-year {
  font-family: var(--font-display);
  font-size: 40px;
  line-height: 1;
  color: var(--gold-text);
  padding-top: 4px;
}
.tr-year small {
  display: block;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stone-text);
  margin-top: 0.6em;
  line-height: 1.4;
}
.outcome { font-weight: 600; display: block; margin-top: 0.7em; }

/* ---- Contact band ---- */
.contact-band { text-align: center; }
.contact-band h2 { font-size: clamp(30px, 4vw, 40px); }
.contact-band p { max-width: 36em; margin: 0.8em auto 0; }
.contact-links {
  margin-top: 2em;
  display: flex; gap: 22px; justify-content: center; align-items: center; flex-wrap: wrap;
}
.contact-links .minor { color: var(--parchment); font-size: 15.5px; text-decoration: none; }
.contact-links .minor:hover { color: var(--gold-dark); text-decoration: underline; }

/* ---- About page long-read ---- */
.longread { font-family: var(--font-longread); font-size: 18px; }
.longread p + p { margin-top: 1.25em; }

/* ---- Notes (writeups) ---- */
.note-hero .note-meta {
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #B5AC9C;
  margin-top: 1.4em;
}
.note {
  font-family: var(--font-longread);
  font-size: 18px;
  line-height: 1.7;
  max-width: 40em;
  margin: 0 auto;
}
.note p + p { margin-top: 1.2em; }
.note h2 {
  font-family: var(--font-display);
  font-size: 26px;
  margin: 1.8em 0 0.6em;
  line-height: 1.2;
}
.note h3 { font-size: 20px; margin: 1.4em 0 0.4em; }
.note ul, .note ol { padding-left: 1.4em; margin: 0.6em 0 1em; }
.note li { margin: 0.4em 0; }
.note li p { display: inline; }
.note strong { font-weight: 700; }
.note hr { border: 0; border-top: 1px solid rgba(138,131,120,0.35); margin: 2.2em 0; }
.note blockquote {
  border-left: 3px solid var(--gold-paper);
  padding-left: 1em;
  color: var(--stone-text);
  font-style: italic;
  margin: 1.2em 0;
}
.note code {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.88em;
  background: rgba(138,131,120,0.14);
  padding: 0.1em 0.35em;
  border-radius: 3px;
}
.note .table-wrap { overflow-x: auto; margin: 1.4em 0; }
.note table {
  border-collapse: collapse;
  width: 100%;
  font-family: var(--font-body);
  font-size: 15.5px;
  font-variant-numeric: tabular-nums;
}
.note th, .note td {
  padding: 0.55em 0.75em;
  border-bottom: 1px solid rgba(138,131,120,0.35);
  text-align: left;
  vertical-align: top;
}
.note th {
  border-top: 2px solid var(--gold-paper);
  border-bottom: 1px solid var(--ink);
  font-weight: 600;
}
/* The markdown already right-aligns the numeric columns (a `---:` rule emits an
   inline text-align), so key off that instead of off column position. Keying off
   position applied `nowrap` to the example column too, and a table of full
   sentences then could not fit its own measure: the scores scrolled off the right
   edge, which is the one thing that table exists to show. */
.note td[style*="right"], .note th[style*="right"] { white-space: nowrap; }
.note th:first-child, .note td:first-child { min-width: 7.5em; }
.note-summary {
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.6;
  border-top: 2px solid var(--gold-paper);
  border-bottom: 1px solid rgba(138,131,120,0.35);
  padding: 1.6em 0 1.8em;
  margin: 0 0 3.4em;
}
.note-summary p { padding-left: 1.1em; position: relative; }
.note-summary p::before {
  content: "·"; position: absolute; left: 0; top: -0.1em;
  color: var(--gold-paper); font-weight: 700; font-size: 1.4em; line-height: 1;
}
.note-summary p + p { margin-top: 1em; }
.note-foot {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--stone-text);
  border-top: 1px solid rgba(138,131,120,0.35);
  margin-top: 3em;
  padding-top: 1.2em;
}
.notes-list .ledger-row { grid-template-columns: 1fr; gap: 0; }

/* ---- Fit / not-a-fit ---- */
.fit-list { list-style: none; }
.fit-list li { padding-left: 1.6em; position: relative; margin-bottom: 0.5em; }
.fit-list li::before { content: "·"; font-weight: 700; font-size: 1.4em; line-height: 1; position: absolute; left: 0.2em; top: 0.05em; color: var(--gold-paper); }
.fit-list.anti li::before { color: var(--terracotta); }

/* ---- Footer ---- */
.site-footer {
  background: var(--maze-black);
  color: #B5AC9C;
  text-align: center;
  padding: 36px 24px;
  font-size: 14.5px;
  border-top: 1px solid rgba(245,217,122,0.12);
}
.site-footer img { width: 26px; margin: 0 auto 12px; opacity: 0.6; }
.site-footer .colophon { display: block; margin-top: 8px; font-size: 12.5px; letter-spacing: 0.04em; opacity: 0.7; }

/* ---- Utilities ---- */
.center { text-align: center; }
.mt-2 { margin-top: 2em; }
.muted { color: var(--stone-text); }
.band-dark .muted { color: #B5AC9C; }
.lede { font-size: 19px; }

/* ---- Responsive ---- */
@media (max-width: 900px) {
  .band { padding: 64px 20px; }
  .hero .container { grid-template-columns: 1fr; min-height: 0; }
  .hero-art { min-height: 300px; order: -1;
    -webkit-mask-image: linear-gradient(180deg, black 55%, transparent 100%);
    mask-image: linear-gradient(180deg, black 55%, transparent 100%); }
  .hero-copy { padding: 8px 0 56px; }
  .stat-grid, .cols-3, .cols-2 { grid-template-columns: 1fr 1fr; }
  .split, .split.media-left { grid-template-columns: 1fr; gap: 32px; }
  .tr-card { grid-template-columns: 1fr; gap: 12px; }
  /* Stacked: cap the figure so a 560px asset never renders below ~1.5x. */
  .tr-shot { max-width: 380px; }
  .tr-year { font-size: 28px; }
  .tr-year small { display: inline; margin-left: 0.8em; }
  .ledger-row { grid-template-columns: 64px 1fr; gap: 20px; }
  .ledger-art { width: 64px; height: 64px; }
  .ledger-art img { width: 56px; height: auto; }  /* the img carries height="96"; without this it squeezes */
  .site-nav { gap: 16px; flex-wrap: wrap; }
}
@media (max-width: 560px) {
  .stat-grid, .cols-3, .cols-2 { grid-template-columns: 1fr; }
  .site-header .container { height: auto; padding: 10px 0; flex-wrap: wrap; row-gap: 6px; }
  .site-nav { gap: 12px; }
  .site-nav a { font-size: 13.5px; }
  .site-nav .btn { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ---- Treated portraits (split tone: muted colour over an ink duotone; the ink/gold
   tritone shipped until 2026-08-27, when it turned out gold midtones on skin read as
   jaundice) ---- */
/* Photographs: the About portrait and the making-of bench shot. Both are phone
   shots; the portrait is toned, the bench shot deliberately is not. Colour is
   what makes the carved relief legible there, so the house tritone would cost
   the picture the thing it is evidence for. */
.portrait,
.bench-shot {
  width: 100%;
  height: auto;
  border-radius: 4px;
  box-shadow: 0 2px 14px rgba(34, 29, 23, 0.18);
}


/* ---- Homepage: compact diagram teaser + latest note ---- */
.dia-mini { margin: 2.4em 0 0; }
.dia-mini svg { min-width: 620px; }
.dia-mini figcaption { text-align: center; margin-top: 10px; max-width: none; }
.latest-note {
  margin-top: 2.2em;
  padding-top: 1.2em;
  border-top: 1px solid rgba(138,131,120,0.35);
  font-size: 16px;
  color: var(--stone-text);
}
.latest-note a { color: var(--terracotta-text); }
.latest-note strong { color: var(--ink); font-weight: 600; }
.note-sub { font-size: 14.5px; color: var(--stone-text); margin-top: -0.6em; }

/* ---- Notes index: the columnar rhythm the ledger and track record use ---- */
.note-card {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 32px;
  padding: 34px 0;
  border-bottom: 1px solid rgba(138,131,120,0.35);
  align-items: start;
}
.note-card:last-of-type { border-bottom: none; }
.note-date {
  font-family: var(--font-display);
  font-size: 40px;
  line-height: 1;
  color: var(--gold-text);
  padding-top: 2px;
}
.note-date small {
  display: block;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stone-text);
  margin-top: 0.6em;
  line-height: 1.4;
}
.note-card h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 26px;
  margin-bottom: 0.3em;
}
.note-card h3 a { color: var(--ink); text-decoration: none; }
.note-card h3 a:hover { color: var(--terracotta-text); text-decoration: underline; }
.note-card .note-dek {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 17.5px;
  color: var(--stone-text);
  margin-bottom: 1.1em;
  max-width: 36em;
}
.note-card ul { list-style: none; margin: 0 0 1.2em; padding: 0; max-width: 36em; }
.note-card li { padding-left: 1.1em; position: relative; margin-bottom: 0.55em; font-size: 16.5px; }
.note-card li::before {
  content: "\00b7"; position: absolute; left: 0; top: -0.1em;
  color: var(--gold-paper); font-weight: 700; font-size: 1.4em; line-height: 1;
}

@media (max-width: 900px) {
  .note-card { grid-template-columns: 1fr; gap: 12px; padding: 26px 0; }
  .note-date { font-size: 28px; }
  .note-date small { display: inline; margin-left: 0.8em; }
}
@media (max-width: 560px) {
  .dia-mini svg { min-width: 560px; }
  .dia-fig svg, .dia-fig figcaption { display: none; }
  .dia-stack { display: block; }
  .note-card h3 { font-size: 23px; }
}


/* ---- Notes index: what is built but unwritten (no dates, no promises) ---- */
/* ---- Notes: the reading order (index) and the next-in-series line (each note) ---- */
.notes-order {
  margin-bottom: 2.8em;
  padding-bottom: 1.8em;
  border-bottom: 1px solid rgba(138,131,120,0.35);
}
.notes-order > p { color: var(--stone-text); max-width: 38em; margin-bottom: 1em; }
.notes-order ol { margin: 0 0 0 1.5em; padding: 0; max-width: 38em; }
.notes-order li { margin-bottom: 0.45em; color: var(--stone-text); }
.notes-order li strong { color: var(--ink); font-weight: 600; }
.note-next {
  font-family: var(--font-body);
  font-size: 16px;
  margin-top: 2.6em;
}

.notes-next {
  margin-top: 3.4em;
  padding-top: 1.6em;
  border-top: 1px solid rgba(138,131,120,0.35);
}
.notes-next-head {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stone-text);
  margin-bottom: 0.9em;
}
.notes-next > p { color: var(--stone-text); max-width: 38em; margin-bottom: 1.2em; }
.notes-next ul { list-style: none; margin: 0; padding: 0; max-width: 38em; }
.notes-next li {
  padding-left: 1.1em; position: relative; margin-bottom: 0.7em;
  color: var(--stone-text);
}
.notes-next li strong { color: var(--ink); font-weight: 600; }
.notes-next li::before {
  content: "·"; position: absolute; left: 0; top: -0.1em;
  color: var(--stone); font-weight: 700; font-size: 1.4em; line-height: 1;
}


/* ---- Notes: the plain-language line under each section heading ---- */
.note h2 + p em:only-child,
.note .section-tldr {
  display: block;
  font-family: var(--font-body);
  font-style: normal;
  font-size: 16px;
  line-height: 1.55;
  color: var(--stone-text);
  border-left: 2px solid var(--gold-paper);
  padding-left: 1em;
  margin: 0.2em 0 1.4em;
  max-width: 34em;
}


/* ---- Note figures: charts and diagrams inside a writeup ---- */
.fig {
  margin: 2.2em 0 2.4em;
  padding-top: 1.4em;
  border-top: 2px solid var(--gold-paper);
}
.fig svg { display: block; width: 100%; height: auto; }
.fig .fig-scroll { overflow-x: auto; }
.fig .fig-scroll svg { min-width: 620px; }
.fig figcaption {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--stone-text);
  margin-top: 0.9em;
  max-width: 38em;
}
.fig figcaption strong { color: var(--ink); font-weight: 600; }

.chart .track   { fill: #D9CFB6; }
.chart .bar     { fill: var(--gold-text); }
.chart .lbl     { font-family: var(--font-body); font-size: 14px; fill: var(--ink); }
.chart .val     { font-family: var(--font-body); font-size: 14px; font-weight: 600; fill: var(--ink);
                  font-variant-numeric: tabular-nums; }
.chart .val-nil { fill: var(--stone-text); }
.chart .anno    { font-family: var(--font-body); font-size: 13px; fill: var(--stone-text); }
.chart .anno-em { font-family: var(--font-body); font-size: 13px; font-weight: 600; fill: var(--ink); }
.chart .axis    { stroke: var(--stone); stroke-width: 1; }
.chart .grid    { stroke: rgba(138,131,120,0.30); stroke-width: 1; stroke-dasharray: 3 4; }
.chart .rule    { stroke: var(--stone-text); stroke-width: 1; stroke-dasharray: 4 4; }
.chart .line    { fill: none; stroke: var(--gold-text); stroke-width: 2.5;
                  stroke-linejoin: round; stroke-linecap: round; }
.chart .dot     { fill: var(--gold-text); stroke: var(--paper); stroke-width: 2; }
.chart .band    { fill: rgba(138,131,120,0.13); }
.chart .tick    { font-family: var(--font-body); font-size: 12px; fill: var(--stone-text);
                  font-variant-numeric: tabular-nums; }

.band-dark .chart .track { fill: #3A322A; }
.band-dark .chart .bar,
.band-dark .chart .line  { fill: var(--gold-dark); }
.band-dark .chart .line  { fill: none; stroke: var(--gold-dark); }
.band-dark .chart .dot   { fill: var(--gold-dark); stroke: var(--maze-black); }
.band-dark .chart .lbl,
.band-dark .chart .val,
.band-dark .chart .anno-em { fill: var(--parchment); }
.band-dark .chart .anno,
.band-dark .chart .tick,
.band-dark .chart .val-nil { fill: #B5AC9C; }
.band-dark .fig figcaption { color: #B5AC9C; }
.band-dark .fig figcaption strong { color: var(--parchment); }

/* ---- Ledger on phones (added 2026-08-27, from an iPhone screenshot): the 64px icon gutter ran
   the full height of each row and squeezed the copy into ~290px, and the date chip wrapped on
   some rows and not others. Below 560px the wrapper div dissolves (display: contents) so the
   grid can put the icon beside the heading and the paragraphs full width beneath it; the date
   chip always takes its own line so every row reads the same. ---- */
@media (max-width: 560px) {
  .ledger-row { grid-template-columns: 56px 1fr; column-gap: 16px; row-gap: 8px; padding: 28px 0; }
  .ledger-row > div { display: contents; }
  .ledger-art { grid-column: 1; width: 56px; height: 56px; align-self: center; }
  .ledger-art img { width: 50px; height: auto; }
  .ledger-head { grid-column: 2; align-self: center; margin-bottom: 0; row-gap: 4px; }
  .ledger-head .chip-date { flex-basis: 100%; }
  .ledger-row > div > p { grid-column: 1 / -1; margin: 0; }
  .ledger-row > div > p + p { margin-top: 0.2em; }
}