/* ============================================================
   THE BEST MATCH — DESIGN SYSTEM
   ============================================================
   One place where the values live. Every rule below spends these
   and invents nothing of its own.

   The scales were derived from the built pages rather than imposed
   on them: each existing size was measured, clustered, and snapped
   to its nearest step, so adopting the system moved nothing that
   had a reason to stay.

   TYPE      eight steps. Fluid where a heading has to survive a
             phone and a monitor; fixed in the text range, because
             body copy that resizes with the window is unreadable
             at both ends.
   SPACE     seven steps, all fluid, all sharing one ratio.
   COLOUR    roles rather than names. A rule says what a value is
             for, so a future value can replace it.
   MOTION    one duration and one curve. A second duration exists
             only for the drawer, which travels further.
   ============================================================ */

:root{
  /* ── type ─────────────────────────────────────────────────
     micro    labels, mono, legal
     caption  metadata, figure captions, table detail
     body     running text
     lead     the first paragraph of a section
     title-s  a card or a row heading
     title    a section heading
     display  a page heading
     hero     the one heading on the home                      */
  --t-micro:   0.62rem;
  --t-caption: 0.86rem;
  --t-body:    0.96rem;
  --t-lead:    1.08rem;
  --t-title-s: 1.32rem;
  --t-title:   clamp(1.5rem, 2.6vw, 2.05rem);
  --t-display: clamp(1.9rem, 3.6vw, 3.1rem);
  --t-hero:    clamp(2.2rem, 5.2vw, 4.3rem);

  /* ── line height and tracking, paired to the steps ──────── */
  --lh-tight:  1.1;
  --lh-snug:   1.35;
  --lh-body:   1.6;
  --tr-display: -0.03em;
  --tr-title:  -0.026em;
  --tr-body:   -0.006em;
  --tr-label:   0.13em;

  /* ── space ────────────────────────────────────────────────
     one ratio, seven steps, fluid between a phone and 1440    */
  --s1: clamp(0.5rem,  0.6vw, 0.65rem);
  --s2: clamp(1.0rem,  1.4vw, 1.35rem);
  --s3: clamp(1.5rem,  2.2vw, 2.0rem);
  --s4: clamp(1.9rem,  3.2vw, 2.7rem);
  --s5: clamp(2.4rem,  4.4vw, 3.5rem);
  --s6: clamp(3.1rem,  5.6vw, 4.7rem);
  --s7: clamp(3.6rem,  7.4vw, 6.2rem);

  /* ── colour, by role ──────────────────────────────────────
     surface   what the page and its panels sit on
     ink       text, in three weights of presence
     rule      hairlines, in two strengths
     accent    the one colour, and what goes on top of it      */
  --surface-page:    #e8eaec;
  --surface:         #ffffff;
  --surface-sunken:  #f4f6f7;
  --surface-inverse: #0e1114;

  --ink:             #0e1114;   /* 18.9:1 on surface */
  --ink-muted:       #5a6167;   /*  6.3:1 */
  --ink-subtle:      #6f767c;   /*  4.6:1, the readable floor */
  --ink-inverse:     #ffffff;

  --rule:            #e0e4e7;
  --rule-strong:     #b3bac0;

  --accent:          #13405f;   /* 10.9:1 on surface */
  --accent-ink:      #ffffff;
  --accent-wash:     #eef1f3;   /* the hover ground */

  /* ── motion ───────────────────────────────────────────────
     one curve for everything. Nothing on this site needs to
     bounce, and a second easing is a second opinion.          */
  --ease:      cubic-bezier(.2,.7,.2,1);
  --dur:       .22s;
  --dur-far:   .4s;   /* the drawer, which travels the width of a panel */

  /* ── layout levers, owned by the skin ─────────────────── */
  --measure:  35rem;
  --gutter:   clamp(1.4rem, 6vw, 6.4rem);
  --rhythm:   clamp(4rem, 9vh, 7rem);
  --hero-top: clamp(4.4rem, 11vh, 8rem);
  --solo-pad: clamp(4.4rem, 11vh, 8rem);
  --rail:     4.6rem;

  /* ── aliases, so nothing written before the system breaks ── */
  --ground:  var(--surface-page);
  --sheet:   var(--surface);
  --sheet-2: var(--surface-sunken);
  --soft:    var(--ink-muted);
  --faint:   var(--ink-subtle);
  --line:    var(--rule);
  --line-2:  var(--rule-strong);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:var(--ground)}
body{
  background:var(--ground);color:var(--ink);
  font-family:"Inter",-apple-system,system-ui,sans-serif;font-size:17px;line-height:1.62;
  letter-spacing:-.006em;-webkit-font-smoothing:antialiased;
  padding:1.1rem 1.1rem 1.1rem var(--rail);
}
a{color:inherit;text-decoration:none}
img{max-width:100%}
.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;background:#fff;padding:.6rem 1rem;z-index:99}

/* ---------- type ---------- */
.lab{
  font-family:"JetBrains Mono",ui-monospace,monospace;font-size:var(--t-micro);font-weight:500;
  letter-spacing:.13em;text-transform:uppercase;color:var(--ink);display:inline-block;
}
.lab.acc{color:var(--accent)}
.lab.dim{color:var(--soft)}
.lab.faint{color:var(--faint)}
h1,h2,h3{font-weight:500;letter-spacing:-.028em;line-height:1.1}
.soft{color:var(--soft)}
.body{max-width:var(--measure)}
.body p + p{margin-top:1rem}
.body strong{font-weight:600}

/* ---------- left rail ---------- */
.rail{
  position:fixed;left:0;top:0;bottom:0;width:var(--rail);z-index:40;
  display:flex;flex-direction:column;align-items:center;gap:1.5rem;padding:1.5rem 0;
}
.rail .mark{color:var(--ink);width:25px;height:25px}
.rail .mark svg{width:100%;height:100%;display:block}
.rail .mark:hover{color:var(--accent)}
.railbtn{background:none;border:0;cursor:pointer;padding:.4rem;display:flex;flex-direction:column;gap:4px;width:25px}
.railbtn span{display:block;height:1.4px;background:var(--ink);transition:transform var(--dur) var(--ease),opacity .3s}
.railbtn:hover span{background:var(--accent)}
body.open .railbtn span:nth-child(1){transform:translateY(5.4px) rotate(45deg)}
body.open .railbtn span:nth-child(2){opacity:0}
body.open .railbtn span:nth-child(3){transform:translateY(-5.4px) rotate(-45deg)}
/* ruler ticks: a drawing-sheet detail in the empty margin */
.rail::after{
  content:"";position:absolute;left:calc(var(--rail) / 2 - 2px);top:9rem;bottom:9rem;width:5px;
  background:repeating-linear-gradient(to bottom,var(--line-2) 0 1px,transparent 1px 11px);
}

/* ---------- drawer ---------- */
.drawer{
  position:fixed;left:var(--rail);top:1.1rem;bottom:1.1rem;width:min(23rem,calc(100vw - 6rem));
  background:var(--ink);color:#fff;z-index:35;
  transform:translateX(calc(-100% - 5rem));transition:transform var(--dur-far) var(--ease);
  display:flex;align-items:center;
}
body.open .drawer{transform:none}
.drawer-in{padding:2.4rem 2.6rem;width:100%}
.drawer .lab{color:rgba(255,255,255,.45);margin-bottom:1.8rem}
.drawer a{display:block;font-size:var(--t-title-s);font-weight:500;letter-spacing:-.024em;line-height:1.6;color:#fff;opacity:.86}
.drawer a[aria-current]{opacity:1;color:#8ec2e6}
.drawer a:hover{opacity:1;color:#8ec2e6}
.drawer a.acc{
  margin-top:1.5rem;padding-top:1.3rem;border-top:1px solid rgba(255,255,255,.16);
  font-family:"JetBrains Mono",monospace;font-size:var(--t-micro);font-weight:500;letter-spacing:.12em;text-transform:uppercase;
}

/* ---------- sheet ---------- */
.sheet{background:var(--sheet);border:1px solid var(--line-2);padding:0 var(--gutter)}
.top{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;padding:1.35rem 0;border-bottom:1px solid var(--line-2)}
.brand{font-weight:600;font-size:var(--t-body);letter-spacing:-.026em;display:inline-flex;align-items:center;gap:.7rem;line-height:1}
.brand .mk{width:18px;height:18px;flex:none}
.brand .mk svg{width:100%;height:100%;display:block}
.topnav{display:flex;gap:1.5rem;align-items:flex-end;flex-wrap:wrap;line-height:1}
.topnav a.lab{font-size:var(--t-micro)}
.topnav a.lab{color:var(--soft)}
.topnav a.lab:hover,.topnav a.lab[aria-current]{color:var(--accent)}
/* no filled fields: the call to action is a ruled link */
.btn{
  display:inline-flex;align-items:center;color:var(--accent);background:none;
  padding:0 0 .45rem;font-family:"JetBrains Mono",monospace;font-size:var(--t-caption);font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;border-bottom:1.5px solid var(--accent);
}
.btn:hover{color:var(--ink);border-color:var(--ink)}

section{padding:var(--rhythm) 0}

/* ---------- hero ---------- */
.hero{padding:var(--hero-top) 0 0}
.hero-top{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:var(--s6);align-items:end}
.hero h1{font-size:var(--t-hero);max-width:22ch}
.hero .stand{color:var(--soft);max-width:28rem;padding-bottom:.35rem}
.facts{margin-top:var(--s6);border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2);display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.fact{padding:1.2rem 1.5rem 1.2rem 0;border-right:1px solid var(--line)}
.fact:last-child{border-right:0}
.fact .k{color:var(--soft);display:block;margin-bottom:.4rem}
.fact .v{font-size:var(--t-body);font-weight:500;line-height:1.35;letter-spacing:-.016em}

/* ---------- seam rule: the shipbuilder's joint ---------- */
.seam{position:relative;height:1px;background:var(--line-2)}
.seam span{position:absolute;left:0;top:-2px;width:4.6rem;height:1px;background:var(--accent)}
.seam span::after{content:"";position:absolute;left:0;top:4px;width:100%;height:1px;background:var(--accent);opacity:.4}

/* ---------- section head ---------- */
.sec-head{display:flex;align-items:center;gap:1.1rem;margin-bottom:2.2rem}
.sec-head .lab{color:var(--accent);white-space:nowrap}
.sec-head .r{flex:1;height:1px;background:var(--line)}
.sec-head.heavy .r{height:2px;background:var(--ink)}
.cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s6);align-items:start}
h2{font-size:var(--t-title);max-width:22ch}

/* ---------- photography: black and white, never framed in colour ---------- */
.photo{margin:0;position:relative}
.photo img{width:100%;display:block;filter:grayscale(1) contrast(1.05)}
.photo.wide img{height:clamp(19rem,56vh,35rem);object-fit:cover;object-position:58% 20%}
.photo.tall img{aspect-ratio:3/4;object-fit:cover;object-position:50% 18%}
.photo figcaption{margin-top:.85rem;display:flex;justify-content:space-between;gap:1.3rem;flex-wrap:wrap}
.withimg{display:grid;grid-template-columns:minmax(0,25rem) minmax(0,1fr);gap:var(--s6);align-items:start}
/* crop marks, available to any skin that wants an inset frame */
.cropmarks::before{
  content:"";position:absolute;inset:-11px;pointer-events:none;
  background:
    linear-gradient(var(--line-2),var(--line-2)) left    top/14px 1px no-repeat,
    linear-gradient(var(--line-2),var(--line-2)) left    top/1px 14px no-repeat,
    linear-gradient(var(--line-2),var(--line-2)) right   top/14px 1px no-repeat,
    linear-gradient(var(--line-2),var(--line-2)) right   top/1px 14px no-repeat,
    linear-gradient(var(--line-2),var(--line-2)) left bottom/14px 1px no-repeat,
    linear-gradient(var(--line-2),var(--line-2)) left bottom/1px 14px no-repeat,
    linear-gradient(var(--line-2),var(--line-2)) right bottom/14px 1px no-repeat,
    linear-gradient(var(--line-2),var(--line-2)) right bottom/1px 14px no-repeat;
}

/* ---------- the single statement ---------- */
.statement{position:relative;overflow:hidden;padding:var(--solo-pad) 0}
.statement .bigmark{
  position:absolute;right:-9rem;top:50%;transform:translateY(-50%);
  width:30rem;height:30rem;color:var(--line);pointer-events:none;
}
.statement .bigmark svg{width:100%;height:100%;display:block}
.statement .lab{color:var(--accent)}
.statement h2{margin-top:var(--s3);max-width:25ch;position:relative;font-size:var(--t-display);letter-spacing:-.032em;line-height:1.12}
.statement .after{margin-top:var(--s4);max-width:32rem;color:var(--soft);position:relative;font-size:var(--t-lead)}

/* ---------- divergence glyph rows ---------- */
.divs{margin-top:2.4rem;border-top:1px solid var(--line-2)}
.divs .row{display:grid;grid-template-columns:4.6rem minmax(0,1fr);gap:1.4rem;align-items:center;padding:1.05rem 0;border-bottom:1px solid var(--line)}
.divs svg{width:52px;height:18px;color:var(--accent)}
.divs p{color:var(--soft);font-size:var(--t-body)}

/* ---------- tables and ruled lists ---------- */
table{width:100%;border-collapse:collapse;margin-top:.4rem}
th,td{text-align:left;vertical-align:top;padding:1.15rem 1.3rem 1.15rem 0;border-bottom:1px solid var(--line)}
thead th{border-bottom:1px solid var(--line-2);padding-bottom:.65rem;color:var(--soft)}
td.n{font-family:"Inter",sans-serif;font-size:var(--t-title);font-weight:300;letter-spacing:-.03em;color:var(--line-2);width:4.2rem;padding-top:.95rem;font-variant-numeric:tabular-nums}
tr:hover td.n{color:var(--accent)}
td.name{width:clamp(8.5rem,15vw,14rem);font-weight:500;letter-spacing:-.02em}
td.name a{border-bottom:1px solid transparent}
td.name a:hover{color:var(--accent);border-color:var(--accent)}
td.name span{display:block;font-family:"JetBrains Mono",monospace;font-size:var(--t-micro);font-weight:400;letter-spacing:.12em;text-transform:uppercase;color:var(--soft);margin-top:.35rem}
td.desc{color:var(--soft);font-size:var(--t-body)}
td.stat{width:8.5rem}
td.stat span{font-family:"JetBrains Mono",monospace;font-size:var(--t-micro);letter-spacing:.1em;text-transform:uppercase;color:var(--soft);border:1px solid var(--line-2);border-radius:2px;padding:.24rem .48rem;white-space:nowrap}
td.len{width:6.5rem;font-family:"JetBrains Mono",monospace;font-size:var(--t-micro);letter-spacing:.1em;color:var(--soft);text-align:right}

/* ---------- links, icons ---------- */
.more{display:inline-flex;margin-top:2rem;font-family:"JetBrains Mono",monospace;font-size:var(--t-micro);font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);border-bottom:1px solid var(--accent);padding-bottom:.4rem}
.more:hover{color:var(--ink);border-color:var(--ink)}
.iconrow{margin-top:1.7rem;display:flex;gap:1.6rem;flex-wrap:wrap}
.iconrow a{display:inline-flex;align-items:center;gap:.55rem;font-size:var(--t-caption);font-weight:500}
.iconrow .ic{width:1.6rem;height:1.6rem;border-radius:2px;border:1px solid var(--line-2);display:inline-flex;align-items:center;justify-content:center;color:var(--accent)}
.iconrow .ic svg{width:14px;height:14px}
.iconrow a:hover .ic{color:var(--accent);border-color:var(--accent)}
.sib{display:flex;align-items:center;gap:.85rem;margin-bottom:1.4rem}
.sib .mk{width:22px;height:22px;color:var(--ink);flex:none}
.sib .mk svg{width:100%;height:100%;display:block}

/* ---------- article ---------- */
.article{padding:var(--s7) 0 var(--s3);max-width:62rem}
.article .kicker{margin-bottom:1.5rem}
.article h1{font-size:var(--s5);max-width:22ch}
.article .dek{margin-top:1.7rem;font-size:var(--t-lead);color:var(--soft);max-width:36rem}
.chapter{display:grid;grid-template-columns:9.5rem minmax(0,1fr);gap:0 2.8rem;padding:var(--s6) 0;border-top:1px solid var(--line-2)}
.chapter .side{padding-top:.35rem;display:flex;flex-direction:column;gap:.45rem;align-items:flex-start}
.chapter .side .n{font-family:"Inter",sans-serif;font-size:var(--t-title-s);font-weight:300;letter-spacing:-.03em;color:var(--faint);font-variant-numeric:tabular-nums}
.prose{max-width:var(--measure);margin-top:1.4rem}
.prose p{margin-bottom:1.15rem;color:var(--soft)}
.prose p:last-child{margin-bottom:0}
.prose p.lede{color:var(--ink);font-size:var(--t-lead);line-height:1.55}
.prose h3{font-family:"JetBrains Mono",monospace;font-size:var(--t-micro);font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--accent);margin:2rem 0 .7rem}
.prose ol,.prose ul{margin:0 0 1.15rem 1.2rem;color:var(--soft)}
.prose li{margin-bottom:.5rem}
blockquote{margin:var(--s5) 0;max-width:34rem;position:relative;padding-left:2.6rem}
blockquote .cg{position:absolute;left:0;top:.5rem;width:19px;height:19px;color:var(--accent)}
blockquote p{font-family:"Newsreader",Georgia,serif;font-weight:300;font-style:italic;font-size:var(--t-title-s);line-height:1.32;letter-spacing:-.006em;color:var(--ink);margin:0}
blockquote cite{display:block;margin-top:.95rem;font-style:normal}
.tool{border-top:1px solid var(--line-2);padding:1.5rem 0 0;margin-top:1.7rem;max-width:var(--measure)}
.tool .lab{color:var(--accent);margin-bottom:.6rem}
.tool p{color:var(--soft);font-size:var(--t-body)}
.asks{list-style:none;max-width:var(--measure);margin-top:1.3rem}
.asks li{padding:1.2rem 0;border-top:1px solid var(--line)}
.asks .lab{display:block;margin-bottom:.42rem}
.asks p{color:var(--soft);font-size:var(--t-body)}
.foot-note{margin-top:2.4rem;padding-top:1.2rem;border-top:1px solid var(--line);max-width:var(--measure)}
.foot-note p{font-size:var(--t-caption);color:var(--faint);line-height:1.55}

/* ---------- steps (the conversation flow) ---------- */
.steps{list-style:none;counter-reset:s;margin-top:1.4rem;max-width:44rem}
.steps li{counter-increment:s;display:grid;grid-template-columns:3.2rem minmax(0,1fr);gap:1.4rem;padding:1.35rem 0;border-top:1px solid var(--line)}
.steps li::before{
  content:counter(s,decimal-leading-zero);
  font-family:"Inter",sans-serif;font-size:var(--t-title-s);font-weight:300;letter-spacing:-.03em;
  color:var(--faint);font-variant-numeric:tabular-nums;
}
.steps .lab{display:block;margin-bottom:.4rem}
.steps p{color:var(--soft);font-size:var(--t-body)}
.open{border:1px dashed var(--line-2);padding:1.1rem 1.2rem;margin-top:1.4rem;max-width:var(--measure)}
.open p{color:var(--soft);font-size:var(--t-caption)}
.open .lab{color:var(--accent);display:block;margin-bottom:.45rem}

/* ---------- form ---------- */
form{max-width:34rem;margin-top:1.6rem}
.field{padding:1.15rem 0;border-top:1px solid var(--line)}
.field label{display:block;margin-bottom:.55rem}
.field input,.field textarea,.field select{
  width:100%;border:0;border-bottom:1px solid var(--line-2);background:none;
  font-family:inherit;font-size:var(--t-body);color:var(--ink);padding:.4rem 0;letter-spacing:-.006em;
}
.field input:focus,.field textarea:focus,.field select:focus{outline:0;border-color:var(--accent)}
.field textarea{resize:vertical;min-height:5rem}
.submit{margin-top:1.6rem}
.submit button{
  background:none;border:0;border-bottom:1px solid var(--accent);color:var(--accent);cursor:pointer;
  font-family:"JetBrains Mono",monospace;font-size:var(--t-micro);font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;padding:0 0 .4rem;
}
.submit button:hover{color:var(--ink);border-color:var(--ink)}

/* ---------- end + footer ---------- */
.end{border-top:1px solid var(--line-2);padding:var(--s7) 0 2rem}
.end h2{max-width:26ch;margin-bottom:1.7rem}
.end .pod{margin-top:2.4rem;color:var(--soft);max-width:34rem}
.end .pod a{border-bottom:1px solid var(--line-2)}
.end .pod a:hover{border-color:var(--accent);color:var(--accent)}
footer{padding:1.6rem 0 3rem;color:var(--soft);display:flex;justify-content:space-between;gap:1.4rem;flex-wrap:wrap;border-top:1px solid var(--line)}

/* ---------- responsive ---------- */
@media(max-width:900px){
  :root{--rail:3.5rem;--gutter:1.4rem}
  body{font-size:16px;padding:.6rem .6rem .6rem var(--rail)}
  .rail{padding:1rem 0;gap:1rem}
  .rail::after{display:none}
  .drawer{top:.6rem;bottom:.6rem}
  .top{flex-wrap:wrap;gap:.8rem}
  .hero-top{grid-template-columns:minmax(0,1fr);gap:1.4rem;align-items:start}
  .facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fact{border-right:0;border-bottom:1px solid var(--line)}
  .cols,.withimg{grid-template-columns:minmax(0,1fr);gap:1.6rem}
  .photo.tall img{aspect-ratio:3/2}
  .statement .bigmark{width:20rem;height:20rem;right:-8rem}
  .chapter{grid-template-columns:minmax(0,1fr);gap:.9rem}
  .chapter .side{flex-direction:row;gap:1rem;align-items:center}
  table,thead,tbody,tr,td,th{display:block;width:auto}
  thead{display:none}
  tr{border-bottom:1px solid var(--line);padding:1rem 0}
  td{border:0;padding:.12rem 0}
  td.n,td.name,td.stat,td.len{width:auto;text-align:left}
  td.stat{margin-top:.5rem}
  .steps li{grid-template-columns:2.4rem minmax(0,1fr);gap:1rem}
}

/* ============================================================
   Podcast: the elements that make the page sound like audio
   ============================================================ */

/* a real waveform, drawn from the copy's own rhythm, edge to edge */
.waveband{margin:var(--s3) 0 0;overflow:hidden}
.waveband .wave{display:block;width:100%;height:var(--s6);color:var(--line-2)}

/* platform marks: monoline silhouettes on one baseline, the way a masthead
   prints its distributors. No chip, no pill, no container. */
.platrow{
  margin-top:var(--s3);padding-top:1.15rem;border-top:1px solid var(--line);
  display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;
}
.platrow .plead{margin-right:.4rem}
.plat{display:inline-flex;align-items:center;gap:.6rem;color:var(--ink);transition:color var(--dur) var(--ease)}
.plat .pg{width:1.28rem;height:1.28rem;flex:none;display:block}
.plat .pg svg{width:100%;height:100%;display:block}
.plat .pl{color:var(--soft);transition:color var(--dur) var(--ease)}
.plat:hover,.plat:hover .pl{color:var(--accent)}

.eptable .play svg{width:13px;height:13px;display:block}
.eptable tr:hover .play{border-color:var(--accent);color:var(--accent)}
.eptable .mwave{height:1.15rem;width:100%;max-width:6.4rem;min-width:2.4rem;vertical-align:middle;color:var(--line-2)}
.eptable tr:hover .mwave{color:var(--accent)}
@media(max-width:900px){
  .eptable td.wavecell{width:auto;padding-top:.6rem}
  .platrow{gap:.5rem}
  .plat{padding:.36rem .8rem .36rem .4rem}
  .plat .pl{font-size:var(--t-caption)}
}

/* ============================================================
   The four parts: a typographic ladder rather than four columns.
   The number sets the measure, the name carries the weight,
   the basis sits under it as a kicker, the description follows.
   ============================================================ */
table.parts{margin-top:.4rem;border-collapse:separate;border-spacing:0 .35rem}
/* each part is its own block, drawn with the lightest rule the palette has
   and no fill at all: the frame gives the clarity, the weight stays with
   the type. The block only comes forward under the cursor. */
table.parts td{
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:none;
  padding:var(--s2) 1.4rem var(--s2) 0;
  transition:background var(--dur) var(--ease),border-color .22s;
}
table.parts td.n{border-left:1px solid var(--line);padding-left:var(--s2)}
table.parts td:last-child{border-right:1px solid var(--line)}
table.parts tr:hover td{background:var(--sheet-2);border-color:var(--line-2)}

table.parts td.n{
  width:clamp(4rem,7vw,5.8rem);
  font-size:var(--t-title);font-weight:300;letter-spacing:-.035em;
  color:var(--line-2);padding-top:var(--s2);line-height:1;
}
table.parts tr:hover td.n{color:var(--accent)}

table.parts td.name{
  width:clamp(9.5rem,18vw,14rem);
  font-size:var(--t-title-s);font-weight:500;letter-spacing:-.026em;line-height:1.18;
}
table.parts td.name span{
  display:block;margin-top:.45rem;
  font-family:"JetBrains Mono",monospace;font-size:var(--t-micro);font-weight:400;
  letter-spacing:.13em;text-transform:uppercase;color:var(--faint);
}
table.parts td.name a{border-bottom:1px solid transparent}
table.parts tr:hover td.name a{color:var(--accent);border-color:var(--accent)}

/* these are the parts of the programme, not annotations on a table:
   they keep the ink and a size close to the body */
table.parts td.desc{
  color:var(--ink);font-size:var(--t-body);line-height:1.55;
  letter-spacing:-.008em;max-width:32rem;
  padding-top:var(--s2);
}
@media(max-width:900px){
  table.parts td{padding:.1rem 0}
  table.parts tr{padding:1.2rem 0}
  table.parts td.n,table.parts td.name,table.parts td.desc{width:auto;max-width:none;padding-top:0}
  table.parts td.n{font-size:var(--t-title);margin-bottom:.3rem}
  table.parts td.desc{margin-top:.5rem}
}

/* the transcript link, under the running time */
.epact .ag{width:.9rem;height:.9rem;flex:none;display:block}
.epact .ag svg{width:100%;height:100%;display:block}
.epact .lab{color:inherit;font-size:var(--t-micro);letter-spacing:.12em}
.eptable tr:hover .epact{color:var(--soft)}
.epact:hover{color:var(--accent)}
.eptable td.len{white-space:nowrap}
@media(max-width:900px){.epact{justify-content:flex-start;margin-top:.5rem}}

/* the witness: a founder's own words, set in the quote face the elders use */
.witness blockquote{margin:0;max-width:44rem}
.witness blockquote p{font-size:var(--t-title);line-height:1.28}
.chapter blockquote{margin:1.6rem 0}
.chapter blockquote + blockquote{margin-top:2rem}

/* ── a quote set in the margin, so it stops sitting flat in the column ── */
.marginal-in{display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr);
  gap:var(--s5);align-items:start}
@media(max-width:900px){.marginal-in{grid-template-columns:minmax(0,1fr);gap:1.4rem}}
.marginal aside blockquote{margin:0;padding-left:0;border-top:2px solid var(--ink);padding-top:1.1rem;max-width:none}
.marginal aside blockquote p{font-size:var(--t-lead);line-height:1.34}
.marginal aside blockquote cite{margin-top:.8rem}
.marginal .prose{margin-top:0}
@media(max-width:900px){.marginal{grid-template-columns:minmax(0,1fr);gap:1.6rem}}

/* ── the sources as a reference list ── */
.refs{list-style:none;margin:.9rem 0 0}
.refs li{display:grid;grid-template-columns:2.2rem minmax(0,1fr);gap:.6rem;
  padding:.5rem 0;border-top:1px solid var(--line);
  font-family:"JetBrains Mono",monospace;font-size:var(--t-micro);letter-spacing:.06em;
  line-height:1.7;color:var(--faint);text-transform:uppercase}
.refs .rn{color:var(--accent)}
.refs em{font-style:normal;color:var(--soft)}

/* ── a link inside running text has to look like one ── */
.pod a.inline,a.inline{border-bottom:1px solid var(--line-2)}
a.inline:hover{color:var(--accent);border-color:var(--accent)}

/* the drawn portrait carries the archive page, so it gets the room */
.wide-portrait{grid-template-columns:minmax(0,26rem) minmax(0,1fr)}
.photo.drawn{background:var(--sheet)}
.photo.drawn img{aspect-ratio:4/5;object-fit:contain;filter:none}
@media(max-width:900px){.wide-portrait{grid-template-columns:minmax(0,1fr)}}


/* ============================================================
   The episode row. Four zones, each stacking internally:
   figure · guest with the portrait under the name · what it is about ·
   the controls. The waveform is the only element carrying no
   information, so it is the one that gives when the row narrows.
   ============================================================ */
.eptable{table-layout:auto;margin-top:.4rem}
.eptable td{border-bottom:1px solid var(--line);padding:1.35rem 1.2rem 1.35rem 0;vertical-align:top}

.eptable td.name{width:clamp(9rem,15vw,13.5rem);padding-left:0;font-weight:500;letter-spacing:-.02em;padding-top:1.35rem}
.eptable td.name a{display:block;border-bottom:0}
.eptable td.name span{display:block;font-family:"JetBrains Mono",monospace;font-size:var(--t-micro);
  font-weight:400;letter-spacing:.12em;text-transform:uppercase;color:var(--soft);margin-top:.3rem}
.eptable tr:hover td.name a{color:var(--accent)}
.eptable .pf{display:block;width:5.6rem;aspect-ratio:4/5;margin-top:.85rem;background:var(--sheet);overflow:hidden}
.eptable .pf img{width:100%;height:100%;object-fit:contain;display:block;transition:opacity var(--dur) var(--ease)}
.eptable tr:hover .pf img{opacity:.7}

.eptable td.desc{color:var(--soft);font-size:var(--t-caption);line-height:1.58;min-width:17rem;max-width:26rem;padding-top:1.7rem}

.eptable td.ctrl{width:9.4rem;text-align:left;padding-top:1.55rem;padding-right:0;white-space:nowrap}
.eptable .cue{display:flex;align-items:center;gap:.55rem}
.eptable .play{display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:1.85rem;height:1.85rem;border-radius:50%;border:1px solid var(--line-2);color:var(--ink)}
.eptable .play svg{display:block}
.eptable tr:hover .play{border-color:var(--accent);color:var(--accent)}
.eptable .mwave{height:1.25rem;width:100%;max-width:5.2rem;min-width:2rem;color:var(--line-2)}
.eptable tr:hover .mwave{color:var(--accent)}
.eptable .len{display:block;margin-top:.5rem;margin-left:.22rem;font-family:"JetBrains Mono",monospace;
  font-size:var(--t-micro);letter-spacing:.1em;color:var(--soft)}
/* the transcript mark sits directly under the play circle, on its axis */
.eptable .ctrl{position:relative}
.eptable .epact{display:flex;align-items:center;gap:.4rem;
  margin-top:.5rem;color:var(--faint);transition:color var(--dur) var(--ease)}
.eptable .cue,.eptable .len,.eptable .epact{padding-right:0}
.eptable .epact .ag{margin-left:.22rem}
.eptable .epact .ag{width:.86rem;height:.86rem;flex:none;display:block}
.eptable .epact .ag svg{width:100%;height:100%;display:block}
.eptable .epact .lab{font-size:var(--t-micro);letter-spacing:.11em;color:inherit}
.eptable tr:hover .epact{color:var(--soft)}
.eptable .epact:hover{color:var(--accent)}

/* stack well before the description can collapse */
@media(max-width:1120px){
  .eptable,.eptable tbody,.eptable tr,.eptable td{display:block;width:auto}
  .eptable tr{display:grid;grid-template-columns:3.2rem minmax(0,1fr) 7rem;
    gap:.2rem 1rem;padding:1.3rem 0;border-bottom:1px solid var(--line)}
  .eptable td{border:0;padding:0;min-width:0}
  .eptable td.n{grid-column:1;grid-row:1;padding:0;font-size:var(--t-title-s)}
  .eptable td.name{grid-column:2;grid-row:1;width:auto;padding:0}
  .eptable .pf{display:none}
  .eptable td.ctrl{grid-column:3;grid-row:1;width:auto;padding:0}
  .eptable td.desc{grid-column:2 / -1;grid-row:2;margin-top:.5rem;padding:0}
}

/* the guest form: labels hanging in the margin, fields on hairlines,
   no boxes and no block button */
.guestform{margin-top:.2rem}
.guestform .gf{display:grid;grid-template-columns:minmax(0,9.5rem) minmax(0,1fr);
  gap:0 1.2rem;align-items:baseline;margin-bottom:1.6rem}
.guestform .gf label{padding:.85rem 0 .55rem;border-top:1px solid var(--line)}
.guestform .gf input{
  border:0;border-top:1px solid var(--line);background:none;width:100%;
  font-family:inherit;font-size:var(--t-body);color:var(--ink);letter-spacing:-.006em;
  padding:.7rem 0 .55rem;
}
.guestform .gf input:focus{outline:0;border-top-color:var(--accent)}
.guestform .gf input:focus + label,.guestform .gf label:has(+ input:focus){color:var(--accent)}
@media(max-width:900px){
  .guestform .gf{grid-template-columns:minmax(0,1fr);gap:0}
  .guestform .gf label{border-top:1px solid var(--line);padding-bottom:0}
  .guestform .gf input{border-top:0;padding-top:.2rem}
}

/* ── 466 479  the witness reads as one of several ── */
.morequotes{margin-top:var(--s5);display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));
  gap:var(--s3);border-top:1px solid var(--line);padding-top:1.9rem}
.morequotes .mq{margin:0;padding-left:0;max-width:none}
.morequotes .mq p{font-size:var(--t-body);line-height:1.5;font-style:italic;
  font-family:"Newsreader",Georgia,serif;font-weight:300;color:var(--ink)}
.morequotes .mq cite{margin-top:.8rem}
.morequotes .mq.placeholder p{color:var(--faint)}

/* ── 464 467 477  the whole page steps down a size, subtler ── */
table.parts td.name{font-size:var(--t-lead)}
table.parts td.desc{font-size:var(--t-caption)}
table.parts td.n{font-size:var(--t-title)}
.hero .stand{font-size:var(--t-body)}
.body,.body p{font-size:var(--t-body)}
.cols p,.cols .body p{font-size:var(--t-body)}
.witness blockquote p{font-size:var(--t-title-s)}
.fact .v{font-size:var(--t-caption)}

/* ── 468  the hover state was too close to the resting state ── */
table.parts tr:hover td{background:#eef1f3;border-color:var(--line-2)}

/* ── 483  the podcast page ends on the podcast ── */
.podline{max-width:34rem;color:var(--soft)}

/* ============================================================
   472  The site footer: where the practice, the podcast, the letter
   and the legal pages live. Four columns on the sheet, stacking
   to one on a phone.
   ============================================================ */
.sitefoot{
  display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.4fr);
  gap:var(--s5);
  padding:var(--s6) 0 var(--s5);
  border-top:1px solid var(--line-2);
}
.sf-brand .brand{margin-bottom:1rem}
.sf-brand p{font-size:var(--t-caption);max-width:20rem}
.sf-nav{display:flex;flex-direction:column;align-items:flex-start;gap:.55rem}
.sf-nav .lab{margin-bottom:.5rem}
.sf-nav a{font-size:var(--t-caption);color:var(--soft);border-bottom:1px solid transparent}
.sf-nav a:hover{color:var(--accent);border-color:var(--accent)}
.sf-letter .lab{display:block;margin-bottom:.5rem}
.sf-letter p{font-size:var(--t-caption);max-width:22rem;margin-bottom:1rem}
.sf-field{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.8rem;align-items:end;max-width:22rem}
.sf-field label{position:absolute;left:-9999px}  /* kept for screen readers */
.sf-field input{
  border:0;border-bottom:1px solid var(--line-2);background:none;
  font-family:inherit;font-size:var(--t-body);color:var(--ink);padding:.5rem 0;width:100%;
}
.sf-field input::placeholder{color:var(--faint)}
.sf-field input:focus{outline:0;border-color:var(--accent)}
.sf-field button{
  background:none;border:0;border-bottom:1px solid var(--accent);color:var(--accent);cursor:pointer;
  font-family:"JetBrains Mono",monospace;font-size:var(--t-micro);font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;padding:0 0 .5rem;white-space:nowrap;
}
.sf-field button:hover{color:var(--ink);border-color:var(--ink)}
.sf-legal{display:flex;gap:1.4rem;flex-wrap:wrap;align-items:baseline}
.sf-legal a:hover{color:var(--accent)}
@media(max-width:900px){
  .sitefoot{grid-template-columns:minmax(0,1fr);gap:2rem}
  .sf-legal{gap:.9rem}
}

/* ── 494  the datasheet is orientation, so it sits after the argument ── */
.facts.standalone{margin:0 0 var(--s2)}

/* ── 489  one testimonial at a time, and a mark that says there are more ── */
.qtrack{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:0;
  margin-top:var(--s3);padding-bottom:var(--s2);scrollbar-width:none}
.qtrack::-webkit-scrollbar{display:none}
.qtrack .mq{flex:0 0 100%;width:100%;max-width:none;margin:0;padding-left:0;scroll-snap-align:start}
.qtrack .mq p{font-family:"Newsreader",Georgia,serif;font-style:italic;font-weight:300;
  font-size:clamp(1.28rem,2.6vw,1.78rem);line-height:1.28;color:var(--ink);max-width:44rem}
.qtrack .mq cite{display:block;margin-top:var(--s2)}
.qnav{display:flex;align-items:center;gap:var(--s2);margin-top:var(--s2)}
.qbtn{background:none;border:1px solid var(--rule-strong);border-radius:50%;cursor:pointer;
  width:2.1rem;height:2.1rem;display:inline-flex;align-items:center;justify-content:center;
  color:var(--ink);transition:border-color var(--dur) var(--ease),color var(--dur) var(--ease)}
.qbtn:hover{border-color:var(--accent);color:var(--accent)}
.qdots{display:inline-flex;gap:.5rem;align-items:center}
.qdots i{width:.42rem;height:.42rem;border-radius:50%;background:var(--rule-strong);
  transition:background var(--dur) var(--ease)}
.qdots i.on{background:var(--accent)}

/* ── 491  the statement was set at display, one step too loud here ── */
.statement h2{font-size:var(--t-title)}

/* ── 490  the footer is metadata, so it is set as metadata ── */
.sitefoot .sf-brand p{font-size:var(--t-caption);color:var(--ink-subtle);max-width:19rem}
.sf-nav a{font-family:"JetBrains Mono",monospace;font-size:var(--t-micro);letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-subtle)}
.sf-letter p{font-size:var(--t-caption);color:var(--ink-subtle)}
.sf-brand .brand{font-size:var(--t-caption)}

/* ============================================================
   The triad. The congruence sign, with its three lines named.
   Aligned it reads congruent; one line pushed out of line is the
   divergence the R.E.A.D. finds. This is the notation the brand
   teaches, and every smaller use of the sign is this diagram.
   ============================================================ */
.triad{margin:var(--s4) 0 0;max-width:34rem;display:block}
.tr-row{display:grid;grid-template-columns:minmax(0,7.5rem) minmax(0,1fr);
  gap:var(--s2);align-items:center;padding:.42rem 0}
.tr-lab{color:var(--ink-subtle);white-space:nowrap}
.tr-line{display:block;height:2px;position:relative;overflow:hidden}
.tr-line i{display:block;height:2px;width:74%;background:var(--accent);
  transition:margin-left var(--dur) var(--ease)}
.triad .tr-note{display:block;margin-top:var(--s2);padding-top:.7rem;
  border-top:1px solid var(--rule)}

/* on the ink ground the notation inverts */
.statement .triad .tr-lab{color:rgba(255,255,255,.5)}
.statement .triad .tr-line i{background:#8ec2e6}
.statement .triad .tr-note{color:rgba(255,255,255,.5);border-top-color:rgba(255,255,255,.18)}

@media(max-width:900px){
  .tr-row{grid-template-columns:minmax(0,1fr);gap:.25rem;padding:.3rem 0}
  .tr-lab{font-size:var(--t-micro)}
}

/* ============================================================
   The essay. One column, no side labels, no rules inside the text:
   a horizontal line in running prose says the text has ended, and
   on this page it has not.
   ============================================================ */
.essay{max-width:var(--measure);padding:var(--s3) 0 var(--s6)}
.essay p{margin-bottom:var(--s2);color:var(--ink-muted)}
.essay p.lede{color:var(--ink);font-size:var(--t-lead);line-height:1.5}
.essay blockquote.plain{
  margin:var(--s4) 0;padding:0;border:0;max-width:none;
}
.essay blockquote.plain p{
  font-family:"Newsreader",Georgia,serif;font-style:italic;font-weight:300;
  font-size:clamp(1.24rem,2.4vw,1.6rem);line-height:1.3;color:var(--ink);margin-bottom:.42rem;
}
.essay .refs-block{margin-top:var(--s6)}
.essay .refs-block .lab{display:block;margin-bottom:.6rem}

/* 526  the archive intro sits at a third of the sheet */
.narrow{max-width:26rem}
.narrow p + p{margin-top:var(--s2)}

/* the essay keeps its measure; the drawn portrait sits in the margin beside it,
   placed low enough that the opening paragraph is never pushed under the fold */
.essay-wrap{display:grid;grid-template-columns:minmax(0,var(--measure)) minmax(0,1fr);
  gap:var(--s5);align-items:start}
.essay-fig{grid-column:2;grid-row:1;margin:0;position:sticky;top:var(--s5);
  max-width:16rem;justify-self:start;align-self:start;padding-top:var(--s6)}
.essay-fig img{width:100%;display:block;aspect-ratio:4/5;object-fit:contain}
.essay-fig figcaption{margin-top:.85rem;display:flex;flex-direction:column;gap:.3rem}
@media(max-width:1000px){
  .essay-wrap{grid-template-columns:minmax(0,1fr);gap:var(--s3)}
  .essay-fig{grid-column:1;grid-row:2;position:static;padding-top:0;max-width:12rem}
}

/* ── the instruments: three, side by side, each bounded by a rule above ── */
.instr{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));
  gap:var(--s4);border-top:1px solid var(--rule-strong);padding-top:var(--s3)}
.ins .lab{display:block;margin-bottom:.7rem}
.ins h3{font-size:var(--t-title-s);letter-spacing:var(--tr-title);line-height:1.2;margin-bottom:.8rem;max-width:20ch}
.ins p{font-size:var(--t-caption);line-height:1.55;color:var(--ink-muted)}
.ins .use{display:block;margin-top:.9rem;padding-top:.7rem;border-top:1px solid var(--rule)}

/* Episode row: listen links, for a conversation that is published on a platform
   without a written piece on the site yet. */
.eptable .eplisten{display:flex;gap:.5rem;margin-top:.55rem;margin-left:.22rem}
.eptable .epgo{display:block;width:.95rem;height:.95rem;color:var(--line-2);border-bottom:0}
.eptable .epgo svg{width:100%;height:100%;display:block}
.eptable tr:hover .epgo{color:var(--soft)}
.eptable .epgo:hover{color:var(--accent)}