/* ==========================================================================
   jordiamat.com — PRINTED AT NIGHT
   A book printed on black paper. Warm ivory prose face, Geist Mono runs the
   apparatus (nav, labels, folios), one ochre accent spent sparingly.
   Single art direction — no light mode, no theme toggle (2026-08-28).
   Rules are hairlines here. The original light design made hierarchy purely from
   rule-thickness (5px page bar, 2.5px offer, 2px section) because it had no accent
   colour to spend. Reversed out onto black those same weights bloom into glowing
   stripes, so the heavy rules are gone and the ochre carries the emphasis instead.
   ========================================================================== */

@font-face{font-family:'Geist';src:url('/fonts/Geist-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Geist';src:url('/fonts/Geist-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:'Geist';src:url('/fonts/Geist-SemiBold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:'Geist Mono';src:url('/fonts/GeistMono-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Geist Mono';src:url('/fonts/GeistMono-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;}

:root{
  /* ---- stock & ink: a book printed on black paper. ---- */
  --paper:#0D0C0B;
  --ink:#E6DCC9;          /* headlines, rules, plate        ~15 : 1   */
  --ink-2:#C9C0B0;        /* running prose                 ~11.6 : 1  */
  --ink-3:#948B7C;        /* mono wayfinding                ~5.6 : 1  */
  --rule:#22201D;         /* hairline division                        */
  --rule-2:#33302B;       /* secondary drawing line                   */
  --accent:#C4884E;       /* ochre — spent four times on the page     */

  --serif:'Iowan Old Style',Charter,'Palatino Linotype',Palatino,'Sitka Text',Georgia,'Times New Roman',ui-serif,serif;
  --sans:'Geist',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
  --mono:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  /* ---- scale: very large, very tight ---- */
  --display:clamp(40px,8.4vw,112px);
  --h2:clamp(29px,5vw,60px);
  --h3:clamp(18px,1.55vw,22px);
  --body:17px;
  --measure:33em;

  /* ---- the grid itself ---- */
  --page:1320px;
  --gut:clamp(20px,4.4vw,72px);
  --rail:clamp(106px,13vw,178px);
  --rail-gap:clamp(18px,3.2vw,54px);
  --indent:calc(var(--rail) + var(--rail-gap));
  /* asymmetric band: content hangs close under its rule, breathes below */
  --band-top:clamp(44px,5.4vw,86px);
  --band-bot:clamp(84px,11vw,168px);

  --ease:cubic-bezier(.2,.72,.16,1);

  color-scheme:dark;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:var(--paper);}
body{
  counter-reset:band;
  background:var(--paper);
  color:var(--ink-2);
  font-family:var(--serif);
  font-size:var(--body);
  line-height:1.68;
  letter-spacing:0;
  font-feature-settings:"kern" 1;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  transition:background-color .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);
}
img{max-width:100%;display:block;}
ul{list-style:none;}
figure{margin:0;}
a{color:inherit;}
::selection{background:var(--accent);color:#100D09;}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}

.wrap{max-width:var(--page);margin:0 auto;padding:0 var(--gut);}

/* --------------------------------------------------------------------------
   1 · TYPE
   -------------------------------------------------------------------------- */
h1{
  font-size:var(--display);font-weight:400;
  letter-spacing:-.016em;line-height:1.04;color:var(--ink);
  max-width:14ch;text-wrap:balance;overflow-wrap:break-word;
}
h2{
  font-size:var(--h2);font-weight:500;
  letter-spacing:-.012em;line-height:1.11;color:var(--ink);
  max-width:20ch;text-wrap:balance;overflow-wrap:break-word;
}
h3{
  font-size:var(--h3);font-weight:500;
  letter-spacing:-.006em;line-height:1.3;color:var(--ink);
  text-wrap:balance;
}
p{max-width:var(--measure);text-wrap:pretty;}
.lede{
  font-size:clamp(18px,1.5vw,21px);line-height:1.62;
  letter-spacing:0;color:var(--ink-2);max-width:28em;
}
.body-lg{font-size:17.5px;line-height:1.6;color:var(--ink-2);}
strong,b{font-weight:600;color:var(--ink);}

/* mono is the wayfinding system: it labels, numbers and captions. */
.label{
  font-family:var(--mono);font-size:10px;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);
  line-height:1.6;font-variant-numeric:tabular-nums;
}
.num{
  display:block;font-family:var(--mono);font-weight:400;
  font-size:clamp(26px,3vw,42px);letter-spacing:-.02em;line-height:1;
  color:var(--ink);font-variant-numeric:tabular-nums;
  margin-bottom:clamp(14px,1.6vw,20px);
}

.lnk{
  text-decoration:none;color:var(--ink);font-weight:500;
  border-bottom:1px solid var(--rule-2);padding-bottom:2px;
  transition:border-color .25s var(--ease),border-width .25s var(--ease);
}
.lnk:hover{border-bottom:2px solid var(--ink);padding-bottom:1px;}

/* --------------------------------------------------------------------------
   2 · BAND STRUCTURE — the rule is drawn, not printed
   -------------------------------------------------------------------------- */
.band{
  position:relative;
  counter-increment:band;
  padding:var(--band-top) 0 var(--band-bot);
}
.band::before,
.close-band::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:var(--rule-2);transform:scaleX(0);transform-origin:0 50%;
  transition:transform 1.05s var(--ease);
}
.close-band::before{height:1px;background:var(--ink);}
.rv.in::before{transform:scaleX(1);}

.band-head{
  display:grid;
  grid-template-columns:var(--rail) minmax(0,1fr);
  column-gap:var(--rail-gap);
  row-gap:clamp(18px,2vw,26px);
  align-items:start;
  margin-bottom:clamp(40px,5.2vw,88px);
}
.band-head > *{grid-column:2;}
.band-head > .label{grid-column:1;grid-row:1;padding-top:clamp(3px,.4vw,9px);}

/* the folio: number / rule / section name, hanging in the margin */
.band-head .label::before,
.about .bio .label::before{
  content:counter(band,decimal-leading-zero);
  display:block;color:var(--ink);font-size:12px;letter-spacing:.12em;
  padding-bottom:9px;margin-bottom:10px;border-bottom:1px solid var(--ink);
}
.about .bio .label::before{max-width:150px;}

/* trailing commentary aligns to the headline column, not to the rule */
.band > .body-lg,
.band > .illus{margin-left:var(--indent);}

/* --------------------------------------------------------------------------
   3 · MASTHEAD
   -------------------------------------------------------------------------- */
.masthead{
  display:flex;justify-content:space-between;align-items:flex-end;
  gap:20px clamp(24px,4vw,60px);flex-wrap:wrap;
  padding:clamp(24px,3vw,38px) 0 14px;
  border-bottom:1.5px solid var(--ink);
}
.mark{text-decoration:none;display:block;}
.mark .n{
  font-size:14px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;line-height:1;color:var(--ink);
}
.mark .r{
  font-family:var(--mono);font-size:9.5px;font-weight:500;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ink-3);margin-top:8px;line-height:1;
}
.masthead nav{display:flex;align-items:baseline;flex-wrap:wrap;gap:10px clamp(16px,2.4vw,34px);}
.masthead nav a{
  font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;text-decoration:none;color:var(--ink-3);
  transition:color .25s var(--ease);
}
.masthead nav a:hover{color:var(--ink);}
.masthead nav a.now{
  color:var(--paper);background:var(--ink);
  padding:6px 10px 5px;transition:opacity .25s var(--ease);
}
.masthead nav a.now:hover{color:var(--paper);opacity:.78;}
.lang-switch{
  font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-3);background:none;
  border:1px solid var(--rule-2);border-radius:0;padding:6px 10px 5px;
  transition:color .25s var(--ease),border-color .25s var(--ease);
}
.lang-switch:hover{color:var(--accent);border-color:var(--accent);}

/* --------------------------------------------------------------------------
   4 · HERO — the headline owns the page; the plate sits at its foot
   -------------------------------------------------------------------------- */
.hero{
  display:grid;
  grid-template-columns:minmax(0,1fr) clamp(190px,22vw,316px);
  gap:clamp(30px,5vw,76px);
  padding:clamp(52px,8.6vw,128px) 0 clamp(64px,8vw,120px);
  align-items:start;
}
.hero .label{display:block;}
.hero h1{margin-top:clamp(20px,2.4vw,34px);}
.hero .lede{margin-top:clamp(26px,3vw,40px);}
.hero .close{
  margin-top:clamp(28px,3.4vw,44px);padding-top:18px;
  border-top:1.5px solid var(--ink);
  font-size:clamp(18px,1.6vw,21px);line-height:1.42;
  letter-spacing:-.022em;color:var(--ink);max-width:none;
}
.hero .close b{font-weight:600;}

/* the plate hangs at the foot of the hero column, not at its head */
.hero .portrait{align-self:end;}
.portrait img,
.atmos{width:100%;height:auto;aspect-ratio:608/760;object-fit:cover;
  filter:grayscale(1) contrast(1.07) brightness(1.01);}
.portrait figcaption{
  margin-top:12px;padding-top:10px;border-top:1.5px solid var(--ink);
  font-family:var(--mono);font-size:9.5px;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-3);line-height:1.7;
}

.cta-row{display:flex;flex-wrap:wrap;align-items:stretch;gap:14px;margin-top:clamp(30px,3.4vw,44px);}
.btn{
  display:inline-flex;align-items:center;gap:14px;text-decoration:none;
  background:var(--ink);color:var(--paper);border:1.5px solid var(--ink);
  padding:16px 24px;
  font-family:var(--mono);font-size:10.5px;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;
  transition:background .28s var(--ease),color .28s var(--ease);
}
.btn:hover{background:var(--accent);border-color:var(--accent);color:#100D09;}
.btn .arw{font-size:12px;letter-spacing:0;transition:transform .28s var(--ease);}
.btn:hover .arw{transform:translateX(5px);}
.btn-ghost{background:var(--paper);color:var(--ink);}
.btn-ghost:hover{background:var(--ink);color:var(--paper);}

.audience{
  margin-top:clamp(28px,3vw,40px);padding-top:14px;
  border-top:1px solid var(--ink);
  font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-3);line-height:2;max-width:none;
}

/* --------------------------------------------------------------------------
   5 · NINE QUESTIONS — a 3 × 3 matrix
   -------------------------------------------------------------------------- */
.questions{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;
  border-bottom:2px solid var(--ink);
}
.questions li{
  border-top:1px solid var(--ink);
  padding:18px clamp(16px,2.2vw,34px) clamp(22px,2.6vw,34px) 0;
  font-size:clamp(16px,1.5vw,19px);line-height:1.28;
  letter-spacing:-.024em;color:var(--ink);
}
.questions li:nth-child(-n+3){border-top-width:2px;}
.questions li:not(:nth-child(3n+1)){
  border-left:1px solid var(--rule);
  padding-left:clamp(16px,2.2vw,34px);
}

/* --------------------------------------------------------------------------
   6 · FOUR PLACES — a continuous table of cells
   -------------------------------------------------------------------------- */
.quad{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;
  border-top:2px solid var(--ink);
}
.quad > div{padding:20px clamp(14px,2vw,30px) 0 0;}
.quad > div + div{border-left:1px solid var(--rule);padding-left:clamp(14px,2vw,30px);}
.quad h3{margin-bottom:12px;}
.quad p{font-size:15px;line-height:1.52;color:var(--ink-2);max-width:none;}

/* --------------------------------------------------------------------------
   7 · THE DIAGRAM — a technical drawing, plotted
   -------------------------------------------------------------------------- */
.diagram{
  position:relative;overflow:hidden;
  border-top:1.5px solid var(--ink);
  border-bottom:1px solid var(--rule);
  padding:clamp(38px,5vw,68px) 0 clamp(28px,3.4vw,50px);
}
.diagram::before{
  content:"FIG. 1";position:absolute;top:14px;right:0;
  font-family:var(--mono);font-size:9.5px;font-weight:500;letter-spacing:.22em;
  color:var(--ink-3);
}
/* the viewBox carries ~30% dead space on the right; scale past it and clip,
   so the drawing fills its frame and the labels stay legible when narrow */
.diagram svg{width:126%;max-width:126%;height:auto;display:block;}
.diagram .edge{
  fill:none;stroke:var(--rule-2);stroke-width:1;
  stroke-linecap:butt;stroke-linejoin:miter;
  stroke-dasharray:1;stroke-dashoffset:1;
}
.diagram .edge.hot{stroke:var(--accent);stroke-width:2;}
.diagram.on .edges > *{animation:plot .78s linear forwards;}
.diagram.on .edges > *:nth-child(1){animation-delay:0s;}
.diagram.on .edges > *:nth-child(2){animation-delay:.055s;}
.diagram.on .edges > *:nth-child(3){animation-delay:.11s;}
.diagram.on .edges > *:nth-child(4){animation-delay:.165s;}
.diagram.on .edges > *:nth-child(5){animation-delay:.22s;}
.diagram.on .edges > *:nth-child(6){animation-delay:.275s;}
.diagram.on .edges > *:nth-child(7){animation-delay:.33s;}
.diagram.on .edges > *:nth-child(8){animation-delay:.46s;}   /* the bus      */
.diagram.on .edges > *:nth-child(9){animation-delay:.86s;}   /* into context */
.diagram.on .edges > *:nth-child(10){animation-delay:1.12s;} /* the drop     */
.diagram.on .edges > *:nth-child(11){animation-delay:1.52s;} /* arrowhead    */
@keyframes plot{to{stroke-dashoffset:0;}}
/* nodes are drafting circles until the line reaches them */
.diagram .dot{fill:var(--paper);stroke:var(--rule-2);stroke-width:1;r:3px;}
.diagram.on .dot{fill:var(--ink);stroke:var(--ink);transition:fill .5s var(--ease) .55s,stroke .5s var(--ease) .55s;}
.diagram text{
  font-family:var(--mono);font-size:10px;font-weight:400;letter-spacing:.16em;
  text-transform:uppercase;fill:var(--ink-3);
}
.diagram text.hub{font-size:12px;font-weight:500;letter-spacing:.16em;fill:var(--ink);}
.diagram text.out{font-size:11px;font-weight:500;letter-spacing:.16em;fill:var(--accent);}

/* the same drawing, stacked, for phones */
.diagram-m{display:none;position:relative;border-top:1.5px solid var(--ink);padding-top:34px;}
.diagram-m::before{
  content:"FIG. 1";position:absolute;top:12px;right:0;
  font-family:var(--mono);font-size:9.5px;font-weight:500;letter-spacing:.22em;color:var(--ink-3);
}
.diagram-m ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;}
.diagram-m li{
  border-top:1px solid var(--rule);padding:11px 10px 11px 0;
  font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3);
}
.diagram-m li:nth-child(2n){border-left:1px solid var(--rule);padding-left:14px;}
.diagram-m .hub,
.diagram-m .out{
  font-family:var(--mono);font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  border-top:2px solid var(--ink);padding:15px 0;color:var(--ink);
}
.diagram-m .hub{font-size:12px;}
.diagram-m .out{font-size:11px;color:var(--accent);}

/* --------------------------------------------------------------------------
   8 · GENERIC vs CONTEXT — argued by weight, never by colour
   -------------------------------------------------------------------------- */
.contrast{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;align-items:start;}
.contrast > div{border-top:2px solid var(--ink);padding:20px clamp(18px,3vw,52px) 0 0;}
.contrast > div + div{border-left:1px solid var(--rule);padding-left:clamp(18px,3vw,52px);}
.contrast .label{display:block;margin-bottom:20px;}
.contrast > div:first-child p{color:var(--ink-3);}
/* annotation, not label — these are sentences, so they are not set in caps */
.prompt{
  font-family:var(--mono);font-size:11.5px;font-weight:400;letter-spacing:.03em;
  color:var(--ink-3);margin-bottom:12px;line-height:1.65;max-width:34em;
}
.qline{
  font-size:clamp(20px,2vw,26px);font-weight:500;letter-spacing:-.032em;
  line-height:1.2;color:var(--ink);margin-bottom:18px;
}
.contrast ul{margin:0 0 22px;border-top:1px solid var(--rule);}
.contrast li{
  font-family:var(--mono);font-size:10px;font-weight:400;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-2);
  padding:8px 0;border-bottom:1px solid var(--rule);
}
/* the system speaks in machine voice */
.answers p{
  font-family:var(--mono);font-size:13.5px;line-height:1.55;color:var(--ink);
  border-left:2px solid var(--ink);padding:6px 0 6px 16px;max-width:none;
}
.answers p + p{margin-top:10px;}

.illus{
  margin-top:clamp(30px,3.4vw,46px);padding-top:12px;
  border-top:1px solid var(--rule);
  font-family:var(--mono);font-size:9.5px;font-weight:400;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3);line-height:1.9;max-width:none;
}

/* --------------------------------------------------------------------------
   9 · SYMPTOMS — two set columns, ruled between
   -------------------------------------------------------------------------- */
.symptoms{
  columns:2;column-gap:clamp(28px,4.4vw,72px);
  column-rule:1px solid var(--rule);
  border-top:2px solid var(--ink);padding-top:4px;
}
.symptoms li{
  break-inside:avoid;font-size:16.5px;line-height:1.4;color:var(--ink-2);
  padding:13px 0;border-bottom:1px solid var(--rule);
}

/* --------------------------------------------------------------------------
   10 · HOW I WORK — a header strip, then four ruled bars
   -------------------------------------------------------------------------- */
.flow{
  border-top:1.5px solid var(--ink);border-bottom:1px solid var(--rule);
  padding:14px 0;margin-bottom:clamp(34px,4vw,60px);max-width:none;
  font-family:var(--mono);font-size:clamp(11px,1.1vw,13px);font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;color:var(--ink);
}
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,2.4vw,40px);}
.steps > div{border-top:2px solid var(--ink);padding-top:18px;}
.steps h3{margin-bottom:12px;}
.steps p{font-size:15px;line-height:1.52;color:var(--ink-2);max-width:none;}
.steps p + p{margin-top:10px;}

/* --------------------------------------------------------------------------
   11 · THE OFFER — one boxed table, the price set as a figure
   -------------------------------------------------------------------------- */
.offer{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:0;
  border-top:2.5px solid var(--ink);border-bottom:2px solid var(--ink);
}
.offer-head{padding:clamp(24px,3vw,40px) clamp(26px,4vw,64px) clamp(34px,4vw,58px) 0;}
.offer-head h3{
  font-size:clamp(26px,3.4vw,44px);font-weight:500;
  letter-spacing:-.038em;line-height:1.02;margin-bottom:18px;
}
.price{
  font-family:var(--mono);font-weight:400;
  font-size:clamp(22px,2.6vw,34px);letter-spacing:-.02em;line-height:1;
  color:var(--ink);font-variant-numeric:tabular-nums;
  padding-bottom:22px;margin-bottom:22px;border-bottom:1px solid var(--ink);
}
.offer-head > p{font-size:16px;line-height:1.55;color:var(--ink-2);}
.go{margin-top:clamp(26px,3vw,38px);}
.go a{
  font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;text-decoration:none;color:var(--ink);
  border-bottom:1px solid var(--rule-2);padding-bottom:5px;
  transition:border-color .25s var(--ease),border-width .25s var(--ease);
}
.go a:hover{border-bottom:2px solid var(--ink);padding-bottom:4px;}

.offer-body{
  border-left:1px solid var(--rule);
  padding:clamp(24px,3vw,40px) 0 clamp(34px,4vw,58px) clamp(26px,4vw,64px);
}
.sub{
  font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:14px;
}
.offer-body ul{border-top:1px solid var(--ink);}
.offer-body li{
  font-size:15.5px;line-height:1.4;color:var(--ink);
  padding:12px 0;border-bottom:1px solid var(--rule);
}
.offer-body .out{margin-top:26px;padding-top:18px;border-top:1.5px solid var(--ink);}
.offer-body .out p{font-size:16px;line-height:1.5;color:var(--ink);max-width:none;}
.aside{margin-top:18px;font-size:13.5px;line-height:1.55;color:var(--ink-3);max-width:none;}

.retainer{
  display:grid;grid-template-columns:var(--rail) minmax(0,1fr);
  column-gap:var(--rail-gap);align-items:start;
  margin-top:clamp(48px,6vw,84px);padding-top:24px;
  border-top:1px solid var(--ink);
}
.retainer .label{padding-top:4px;}
.retainer p{max-width:44em;}

/* --------------------------------------------------------------------------
   12 · EXAMPLES — a ruled table with one running vertical
   -------------------------------------------------------------------------- */
.examples{border-top:2px solid var(--ink);}
.ex{
  display:grid;grid-template-columns:var(--rail) minmax(0,1fr);gap:0;
  border-bottom:1px solid var(--rule);
}
.ex .label{padding:24px clamp(16px,3vw,48px) 26px 0;}
.ex > div{
  border-left:1px solid var(--rule);
  padding:22px 0 26px clamp(16px,3vw,48px);
}
.ex h3{margin-bottom:9px;}
.ex p{font-size:15.5px;line-height:1.52;color:var(--ink-2);max-width:46em;}
.ex:last-child{border-bottom:2px solid var(--ink);}

/* --------------------------------------------------------------------------
   13 · WHO — a 3 × 2 matrix
   -------------------------------------------------------------------------- */
.who{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;
  border-bottom:1px solid var(--ink);
}
.who > div{border-top:1px solid var(--ink);padding:18px clamp(16px,2.2vw,34px) clamp(26px,3vw,40px) 0;}
.who > div:not(:nth-child(3n+1)){border-left:1px solid var(--rule);padding-left:clamp(16px,2.2vw,34px);}
.who h3{font-size:17px;margin-bottom:10px;}
.who p{font-size:14.5px;line-height:1.55;color:var(--ink-2);max-width:none;}

/* --------------------------------------------------------------------------
   14 · ABOUT
   -------------------------------------------------------------------------- */
.about{
  display:grid;grid-template-columns:clamp(212px,25vw,330px) minmax(0,1fr);
  gap:clamp(30px,5vw,84px);align-items:start;
}
.about h2{margin-bottom:clamp(24px,2.6vw,34px);}
.about .bio p{font-size:16.5px;line-height:1.62;color:var(--ink-2);}
.about .bio p + p{margin-top:15px;}
.stats{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;
  margin-top:clamp(36px,4vw,54px);
}
.stats > div{border-top:1.5px solid var(--ink);padding:18px clamp(14px,2vw,30px) 0 0;}
.stats > div + div{border-left:1px solid var(--rule);padding-left:clamp(14px,2vw,30px);}
.stats b{
  display:block;font-size:clamp(30px,3.6vw,50px);font-weight:400;
  letter-spacing:-.04em;line-height:.98;color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.stats b.path{
  font-family:var(--mono);font-size:clamp(11.5px,1.05vw,13.5px);font-weight:500;
  letter-spacing:.01em;line-height:1.42;
}
.stats span{
  display:block;margin-top:12px;
  font-family:var(--mono);font-size:9.5px;font-weight:400;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3);line-height:1.7;
}

/* --------------------------------------------------------------------------
   15 · HOW I DECIDE
   -------------------------------------------------------------------------- */
.nots{max-width:36em;border-bottom:1.5px solid var(--ink);}
.nots li{
  border-top:1.5px solid var(--ink);padding:18px 0;
  font-size:clamp(18px,1.85vw,25px);line-height:1.3;
  letter-spacing:-.03em;color:var(--ink);
}
.rules{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;
  margin-top:clamp(38px,4.4vw,64px);
  border-bottom:1px solid var(--ink);
}
.rules span{
  border-top:1px solid var(--ink);
  padding:14px clamp(20px,3vw,52px) 16px 0;
  font-size:16px;line-height:1.42;color:var(--ink-2);
}
.rules span:nth-child(2n){border-left:1px solid var(--rule);padding-left:clamp(20px,3vw,52px);}

/* --------------------------------------------------------------------------
   16 · WHAT HAPPENS NEXT
   -------------------------------------------------------------------------- */
.next{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;}
.next > div{border-top:2px solid var(--ink);padding:20px clamp(18px,2.6vw,44px) 0 0;}
.next > div + div{border-left:1px solid var(--rule);padding-left:clamp(18px,2.6vw,44px);}
.next h3{margin-bottom:12px;}
.next p{font-size:15px;line-height:1.52;color:var(--ink-2);max-width:none;}
.next ul{margin-top:14px;border-top:1px solid var(--rule);}
.next li{
  font-family:var(--mono);font-size:10px;font-weight:400;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-2);
  padding:8px 0;border-bottom:1px solid var(--rule);
}

/* --------------------------------------------------------------------------
   17 · CLOSE
   -------------------------------------------------------------------------- */
.close-band{position:relative;padding:var(--band-top) 0 clamp(76px,9vw,128px);}
.close-band h2{
  font-size:var(--display);font-weight:400;
  letter-spacing:-.045em;line-height:.95;max-width:15ch;
}
.close-band h2 em{font-style:normal;color:var(--ink-3);}
@supports (-webkit-text-stroke:1px #000){
  .close-band h2 em{
    color:transparent;
    -webkit-text-stroke-width:clamp(1px,.14vw,2px);
    -webkit-text-stroke-color:var(--ink);
  }
}
.close-band .lede{margin-top:clamp(28px,3.2vw,42px);}
.contact{
  display:flex;flex-wrap:wrap;align-items:center;gap:16px clamp(20px,3vw,40px);
  margin-top:clamp(34px,4vw,52px);
}
.mail{
  font-family:var(--mono);font-size:13px;letter-spacing:.02em;
  text-decoration:none;color:var(--ink);
  border-bottom:1px solid var(--rule-2);padding-bottom:3px;
  transition:border-color .25s var(--ease),border-width .25s var(--ease);
}
.mail:hover{border-bottom:2px solid var(--ink);padding-bottom:2px;}

/* --------------------------------------------------------------------------
   18 · COLOPHON
   -------------------------------------------------------------------------- */
footer{border-top:2px solid var(--ink);padding:clamp(34px,4vw,54px) 0 clamp(48px,6vw,80px);}
.colophon{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,auto);
  gap:30px clamp(24px,4vw,64px);align-items:start;
}
.colophon .mark .n{font-size:13px;}
.tag{margin-top:20px;font-size:15px;color:var(--ink-2);max-width:28em;}
.colophon nav{display:flex;flex-wrap:wrap;gap:10px clamp(14px,2vw,28px);align-items:baseline;}
.colophon nav a{
  font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;text-decoration:none;color:var(--ink-3);
  transition:color .25s var(--ease);
}
.colophon nav a:hover{color:var(--ink);}
.colophon .legal{
  margin-top:26px;padding-top:14px;border-top:1px solid var(--rule);
  font-family:var(--mono);font-size:9.5px;font-weight:400;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3);line-height:2;max-width:none;
}

/* --------------------------------------------------------------------------
   19 · REVEAL — the grid draws itself, the content settles after
   -------------------------------------------------------------------------- */
.rv{
  opacity:0;transform:translateY(8px);
  transition:opacity .8s var(--ease) .1s,transform .8s var(--ease) .1s;
}
.rv.in{opacity:1;transform:none;}
/* if scripting never arrives, nothing may stay hidden */
@media (scripting:none){
  .rv{opacity:1;transform:none;}
  .band::before,.close-band::before{transform:scaleX(1);}
  .diagram .edge{stroke-dasharray:none;stroke-dashoffset:0;}
  .diagram .dot{fill:var(--ink);stroke:var(--ink);}
}

/* --------------------------------------------------------------------------
   20 · RESPONSIVE — 320 → 1600, no horizontal overflow
   -------------------------------------------------------------------------- */
@media (max-width:1080px){
  .quad{grid-template-columns:repeat(2,minmax(0,1fr));}
  .quad > div{border-top:1px solid var(--rule);padding:20px clamp(14px,2.4vw,26px) 26px 0;}
  .quad > div:nth-child(-n+2){border-top:0;padding-top:20px;}
  .quad > div + div{border-left:0;padding-left:0;}
  .quad > div:nth-child(2n){border-left:1px solid var(--rule);padding-left:clamp(14px,2.4vw,26px);}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(26px,3.6vw,40px);}
}

@media (max-width:940px){
  :root{--indent:0px;}
  .band-head,
  .retainer,
  .ex{grid-template-columns:minmax(0,1fr);}
  .band-head > *{grid-column:1;}
  .band-head > .label{grid-row:auto;padding-top:0;}
  .band-head .label::before{max-width:190px;}
  .retainer .label{padding-top:0;margin-bottom:16px;}
  .ex .label{padding:22px 0 12px;}
  .ex > div{border-left:0;padding:0 0 24px;}
  .questions{grid-template-columns:repeat(2,minmax(0,1fr));}
  .questions li:nth-child(-n+3){border-top-width:1px;}
  .questions li:nth-child(-n+2){border-top-width:2px;}
  .questions li:not(:nth-child(3n+1)){border-left:0;padding-left:0;}
  .questions li:not(:nth-child(2n+1)){border-left:1px solid var(--rule);padding-left:clamp(16px,2.6vw,28px);}
  .who{grid-template-columns:repeat(2,minmax(0,1fr));}
  .who > div:not(:nth-child(3n+1)){border-left:0;padding-left:0;}
  .who > div:not(:nth-child(2n+1)){border-left:1px solid var(--rule);padding-left:clamp(16px,2.6vw,28px);}
  .next{grid-template-columns:minmax(0,1fr);}
  .next > div{padding:22px 0 30px;}
  .next > div + div{border-left:0;padding-left:0;}
  .about{grid-template-columns:minmax(0,1fr);gap:clamp(28px,4vw,44px);}
  .about .portrait{max-width:246px;}
}

@media (max-width:900px){
  .hero{grid-template-columns:minmax(0,1fr);gap:clamp(30px,5vw,48px);}
  .hero .portrait{order:-1;max-width:184px;align-self:start;}
  .offer{grid-template-columns:minmax(0,1fr);}
  .offer-head{padding:24px 0 30px;}
  .offer-body{border-left:0;border-top:1px solid var(--ink);padding:24px 0 34px;}
}

@media (max-width:800px){
  .diagram{display:none;}
  .diagram-m{display:block;}
  .contrast{grid-template-columns:minmax(0,1fr);}
  .contrast > div{padding:20px 0 0;}
  .contrast > div + div{border-left:0;padding-left:0;margin-top:40px;}
}

@media (max-width:700px){
  :root{--band-top:clamp(38px,7vw,52px);--band-bot:clamp(66px,13vw,96px);}
  .symptoms{columns:1;column-rule:none;}
  .steps{grid-template-columns:minmax(0,1fr);gap:0;}
  .steps > div{border-top:1px solid var(--rule);padding:22px 0 28px;}
  .steps > div:first-child{border-top:2px solid var(--ink);}
  .rules{grid-template-columns:minmax(0,1fr);}
  .rules span{padding-right:0;}
  .rules span:nth-child(2n){border-left:0;padding-left:0;}
  .stats{grid-template-columns:minmax(0,1fr);}
  .stats > div{padding:18px 0 22px;}
  .stats > div + div{border-left:0;padding-left:0;}
  .colophon{grid-template-columns:minmax(0,1fr);}
}

@media (max-width:560px){
  :root{--display:clamp(38px,11vw,52px);--h2:clamp(27px,7.4vw,36px);}
  .quad{grid-template-columns:minmax(0,1fr);}
  .quad > div{border-top:1px solid var(--rule);padding:22px 0 26px;}
  .quad > div:nth-child(-n+2){border-top:1px solid var(--rule);}
  .quad > div:first-child{border-top:0;}
  .quad > div:nth-child(2n){border-left:0;padding-left:0;}
  .questions{grid-template-columns:minmax(0,1fr);}
  .questions li{padding:15px 0;border-top-width:1px !important;}
  .questions li:first-child{border-top-width:2px !important;}
  .questions li:not(:nth-child(2n+1)){border-left:0;padding-left:0;}
  .who{grid-template-columns:minmax(0,1fr);}
  .who > div{padding:18px 0 26px;}
  .who > div:not(:nth-child(2n+1)){border-left:0;padding-left:0;}
  .diagram-m ul{grid-template-columns:minmax(0,1fr);}
  .diagram-m li:nth-child(2n){border-left:0;padding-left:0;}
  .cta-row .btn{flex:1 1 100%;justify-content:space-between;}
  .contact{gap:14px;}
  .contact .btn{flex:1 1 100%;justify-content:space-between;}
}

@media (max-width:380px){
  :root{--gut:18px;}
  .masthead nav{gap:8px 14px;}
}

/* --------------------------------------------------------------------------
   21 · REDUCED MOTION — everything at rest, nothing hidden
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:1ms !important;
    animation-delay:0s !important;
    animation-iteration-count:1 !important;
    transition-duration:1ms !important;
    transition-delay:0s !important;
  }
  .rv{opacity:1 !important;transform:none !important;}
  .band::before,
  .close-band::before{transform:scaleX(1) !important;}
  .diagram .edges > *{animation:none !important;}
  .diagram .edge{stroke-dasharray:none !important;stroke-dashoffset:0 !important;}
  .diagram .dot{fill:var(--ink) !important;stroke:var(--ink) !important;}
  .btn:hover .arw{transform:none;}
}

/* ==========================================================================
   HERO — portrait follows the text rather than sitting beside it.
   Every practitioner site measured puts the face after the argument, never
   level with the headline; the hero opens on a sentence.
   ========================================================================== */
.hero{
  display:block;
  padding:clamp(52px,8.6vw,128px) 0 clamp(64px,8vw,120px);
}
.hero > div:first-child{max-width:none;}
.hero .portrait{
  margin-top:clamp(44px,5.4vw,80px);
  padding-top:clamp(20px,2.4vw,32px);
  border-top:2px solid var(--ink);
  display:grid;
  grid-template-columns:clamp(190px,24vw,300px) minmax(0,1fr);
  gap:clamp(20px,3.4vw,54px);
  align-items:start;
}
.hero .portrait figure{margin:0;}
.hero .portrait figcaption{
  margin-top:12px;padding-top:10px;border-top:1px solid var(--rule);
}
@media(max-width:700px){
  .hero .portrait{grid-template-columns:minmax(0,1fr);}
  .hero .portrait figure{max-width:240px;}
}

/* ==========================================================================
   THE LADDER — five rungs as a ruled table. Number and name hang in the
   left rail, the substance sits in the main column, one hairline per rung.
   ========================================================================== */
.rungs{border-top:2.5px solid var(--ink);}
.rung{
  display:grid;
  grid-template-columns:var(--rail) minmax(0,1fr);
  gap:0 var(--rail-gap);
  padding:clamp(26px,3vw,40px) 0 clamp(30px,3.4vw,48px);
  border-bottom:1px solid var(--rule);
}
.rung:last-child{border-bottom:1.5px solid var(--ink);}
.rung-head .num{
  display:block;font-family:var(--mono);font-size:10px;font-weight:500;
  letter-spacing:.2em;color:var(--ink-3);margin-bottom:12px;
}
.rung-head h3{
  font-size:clamp(17px,1.5vw,21px);font-weight:600;letter-spacing:-.022em;
  line-height:1.14;color:var(--ink);margin-bottom:10px;
}
.rung-head .price{
  font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.13em;
  text-transform:uppercase;color:var(--accent);
  border-top:1px solid var(--rule-2);padding-top:8px;display:inline-block;
}
.rung-body > p{font-size:16px;line-height:1.58;color:var(--ink-2);max-width:50em;}
.rung-body > p + p{margin-top:11px;}
.rung-body .sub{
  font-family:var(--mono);font-size:9.5px;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-3);margin:22px 0 0;
  padding-bottom:7px;border-bottom:1px solid var(--ink);
}
.rung-body ul{list-style:none;margin:0;}
.rung-body ul li{
  font-size:15px;line-height:1.5;color:var(--ink-2);
  padding:9px 0;border-bottom:1px solid var(--rule);
}
.rung-body ul li:last-child{border-bottom:0;}
.rung-body .quotes li{color:var(--ink);font-family:var(--mono);font-size:13px;letter-spacing:-.01em;}
.rung-body .flows li{display:grid;grid-template-columns:minmax(0,16ch) minmax(0,1fr);gap:4px clamp(14px,2vw,30px);}
.rung-body .flows b{font-weight:600;color:var(--ink);font-size:15px;}
.rung-body .flows span{font-family:var(--mono);font-size:11.5px;letter-spacing:.02em;color:var(--ink-3);line-height:1.7;}
.rung-body .aside{margin-top:14px;font-size:14px;line-height:1.55;color:var(--ink-3);max-width:52em;}
.rung-body .go{margin-top:22px;}
.rung-body .go a{
  display:inline-block;font-family:var(--mono);font-size:10px;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;text-decoration:none;color:var(--ink);
  border:1.5px solid var(--ink);padding:9px 14px;
  transition:background .2s var(--ease),color .2s var(--ease);
}
.rung-body .go a:hover{background:var(--ink);color:var(--paper);}
@media(max-width:820px){
  .rung{grid-template-columns:minmax(0,1fr);gap:16px;}
  .rung-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 16px;}
  .rung-head .num{margin-bottom:0;}
  .rung-head h3{margin-bottom:0;}
  .rung-body .flows li{grid-template-columns:minmax(0,1fr);}
}

/* tag lists — set as a rule-divided run, not pills */
.taglist{list-style:none;display:flex;flex-wrap:wrap;gap:0;margin:12px 0 14px;}
.taglist li{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-2);padding:7px 12px 7px 0;margin-right:12px;
  border-bottom:1px solid var(--rule);line-height:1.4;
}

/* the numbered walkthrough — a plate caption sequence */
.walkthrough{margin-top:clamp(34px,4vw,58px);max-width:46em;}
.walkthrough .sub{
  font-family:var(--mono);font-size:9.5px;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-3);padding-bottom:7px;
  border-bottom:1.5px solid var(--ink);
}
.walkthrough ol{list-style:none;counter-reset:w;}
.walkthrough li{
  counter-increment:w;position:relative;padding:11px 0 11px 40px;
  border-bottom:1px solid var(--rule);font-size:16px;line-height:1.5;color:var(--ink-2);
}
.walkthrough li::before{
  content:counter(w,decimal-leading-zero);position:absolute;left:0;top:13px;
  font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.14em;color:var(--ink-3);
}
.walkthrough li:last-child{border-bottom:1.5px solid var(--ink);}

.who h3:only-child{font-size:16px;margin-bottom:0;}
.rules span:nth-child(3){grid-column:1/-1;border-left:0;padding-left:0;}

/* --------------------------------------------------------------------------
   LANGUAGE OFFER — shown only when the visitor's browser language is the one
   we have and they're on the other page. An offer, never a redirect: the URL
   they asked for is the URL they get.
   -------------------------------------------------------------------------- */
.langbar{
  display:flex;align-items:baseline;gap:8px clamp(14px,2vw,24px);flex-wrap:wrap;
  max-width:var(--page);margin:0 auto;padding:11px var(--gut) 10px;
  border-bottom:1px solid var(--rule-2);
  font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3);
}
.langbar[hidden]{display:none;}
.langbar a{color:var(--accent);text-decoration:none;border-bottom:1px solid transparent;padding-bottom:2px;}
.langbar a:hover{border-bottom-color:var(--accent);}
.langbar button{
  margin-left:auto;background:none;border:0;padding:2px 4px;cursor:pointer;
  font:inherit;letter-spacing:.16em;color:var(--ink-3);
}
.langbar button:hover{color:var(--ink);}

/* --------------------------------------------------------------------------
   FIGURES — drawn in HTML, not pasted in as pictures. Same variables, same
   type, crisp at any zoom, a few KB. All three are illustrative; the internal
   tool is deliberately drawn so it can never be mistaken for a screenshot.
   -------------------------------------------------------------------------- */

/* ---- the business map: seven stages on a rule, measurement running under ---- */
.map{margin:0 0 clamp(40px,5vw,72px);position:relative;}
.map-row{
  display:grid;grid-template-columns:repeat(7,minmax(0,1fr));
  border-top:1.5px solid var(--ink);list-style:none;margin:0;padding:0;
}
.map-row li{
  position:relative;padding:clamp(20px,2.2vw,28px) clamp(8px,1.4vw,16px) clamp(14px,1.6vw,20px) 0;
  font-size:15px;line-height:1.3;color:var(--ink);
}
.map-row li::before{
  content:"";position:absolute;top:-4px;left:0;width:7px;height:7px;
  border:1px solid var(--ink);background:var(--paper);
}
/* ticks drawn on the same 7-column grid as the row above — never a gradient,
   which lands on half-pixels and runs one short at the right edge */
.map-rail{
  display:grid;grid-template-columns:repeat(7,minmax(0,1fr));
  height:clamp(20px,2.4vw,30px);border-bottom:1px solid var(--accent);
}
.map-rail i{border-left:1px solid var(--accent);opacity:.45;}
.map-note{
  margin-top:12px;
  font-family:var(--mono);font-size:9.5px;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--accent);
}
@media(max-width:860px){
  .map-row{grid-template-columns:repeat(2,minmax(0,1fr));border-top:0;}
  .map-row li{border-top:1px solid var(--rule-2);}
  /* the ticks only mean something under a single row of stages. wrapped to two
     columns they collapse to 5px stubs in a 2x4 block, so drop them and let the
     rail read as what it is: one rule running under everything above it. */
  .map-rail{display:block;height:auto;margin-top:18px;}
  .map-rail i{display:none;}
}

/* ---- isolated vs connected ---- */
.split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:clamp(22px,2.4vw,34px);border-top:2px solid var(--ink);}
.split > div{padding:22px clamp(14px,2vw,28px) 20px 0;}
.split > div + div{border-left:1px solid var(--rule-2);padding-left:clamp(14px,2vw,28px);}
.split .sub{margin-bottom:14px;}
.split ul{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0 0 12px;padding:0;}
.split li{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-2);border:1px solid var(--rule-2);padding:5px 8px 4px;
}
.split .lone{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);border:1px dashed var(--rule-2);padding:5px 8px 4px;display:inline-block;
  margin-bottom:12px;
}
.split p{font-size:14.5px;line-height:1.5;color:var(--ink-3);max-width:none;}
.split .hub{color:var(--accent);border-color:var(--accent);}
@media(max-width:640px){
  .split{grid-template-columns:minmax(0,1fr);}
  .split > div + div{
    border-left:0;border-top:1.5px solid var(--ink);
    margin-top:clamp(22px,5vw,34px);padding:22px 0 20px;
  }
}

/* ---- an internal tool, drawn. dashed frame + a FIG mark so a crop of this
       can never pass as a screenshot of something real. ---- */
.ui-fig{margin-top:clamp(30px,3.2vw,44px);position:relative;}
.ui{border:1px dashed var(--rule-2);border-top:1.5px solid var(--ink);}
.ui-fig::before{
  content:"FIG. 3 · DRAWN, NOT A SCREENSHOT";
  position:absolute;top:-17px;right:0;
  font-family:var(--mono);font-size:9px;font-weight:500;letter-spacing:.2em;color:var(--ink-3);
}
.ui-bar{
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  padding:11px clamp(14px,2vw,20px);border-bottom:1px solid var(--rule-2);
  font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);
}
.ui-bar b{color:var(--ink-2);font-weight:500;}
.ui-bar .when{margin-left:auto;}
.ui-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));}
.ui-stats > div{padding:16px clamp(12px,1.6vw,18px) 14px;border-right:1px solid var(--rule-2);}
.ui-stats > div:last-child{border-right:0;}
.ui-stats b{
  display:block;font-family:var(--mono);font-weight:400;font-variant-numeric:tabular-nums;
  font-size:clamp(20px,2.4vw,30px);line-height:1;letter-spacing:-.02em;color:var(--ink);
}
.ui-stats .hot b{color:var(--accent);}
.ui-stats span{
  display:block;margin-top:9px;min-height:2.7em;
  font-family:var(--mono);font-size:9px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);line-height:1.5;
}
/* the plot sits on a real baseline and the peak fills the box */
.ui-plot{
  display:flex;align-items:flex-end;gap:clamp(1px,.35%,4px);height:120px;
  padding:20px clamp(12px,1.6vw,18px) 0;
  border-top:1px solid var(--rule-2);border-bottom:1px solid var(--rule-2);
}
.ui-plot i{
  flex:1;height:calc(var(--v) * 1%);
  background:var(--ink-3);opacity:.5;border-radius:2px 2px 0 0;
}
.ui-queue{width:100%;border-collapse:collapse;}
.ui-queue td{
  padding:11px clamp(12px,1.6vw,18px);border-bottom:1px solid var(--rule-2);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;color:var(--ink-2);
}
.ui-queue tr:last-child td{border-bottom:0;}
.ui-queue td:first-child{color:var(--ink);}
.ui-queue td:last-child{text-align:right;color:var(--ink-3);text-transform:uppercase;letter-spacing:.14em;font-size:9px;}
.ui-queue .flag td:last-child{color:var(--accent);}
/* the disclaimer belongs to the figure — no rule, no gap, sentence case */
.ui-fig > .illus{
  margin-top:11px;border-top:0;padding-top:0;
  font-size:12.5px;letter-spacing:.01em;text-transform:none;
  color:var(--ink-2);line-height:1.55;
}
@media(max-width:640px){
  .ui-stats{grid-template-columns:repeat(2,minmax(0,1fr));}
  .ui-stats > div:nth-child(2){border-right:0;}
  .ui-stats > div:nth-child(-n+2){border-bottom:1px solid var(--rule-2);}
  .ui-queue td:first-child{display:none;}
}
@media(max-width:420px){
  .ui-bar{font-size:9px;letter-spacing:.12em;}
  .ui-bar .when{margin-left:0;flex-basis:100%;}
}

/* ---- the pattern: the same inputs, with nothing joining them up. the
       deliberate counterpart to FIG. 1, which draws them connected. ---- */
.scatter{
  display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:0 clamp(6px,.9vw,13px);
  margin-top:clamp(30px,3.4vw,46px);padding-top:clamp(26px,3vw,40px);
  border-top:1.5px solid var(--ink);
}
.scatter span{
  display:block;text-align:center;padding:9px 4px 8px;
  border:1px dashed var(--rule-2);
  font-family:var(--mono);font-size:8.5px;font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);line-height:1.4;
}
.scatter span:nth-child(1){transform:translateY(16px);}
.scatter span:nth-child(2){transform:translateY(-7px);}
.scatter span:nth-child(3){transform:translateY(24px);}
.scatter span:nth-child(4){transform:translateY(4px);}
.scatter span:nth-child(5){transform:translateY(-12px);}
.scatter span:nth-child(6){transform:translateY(19px);}
.scatter span:nth-child(7){transform:translateY(-2px);}
.scatter + .illus{margin-top:clamp(38px,4vw,56px);}
@media(max-width:760px){
  .scatter{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;}
  .scatter span{transform:none !important;}
}

/* ---- how we think: three questions on one path, not three boxes ---- */
.path{
  list-style:none;margin:0;padding:0;
  display:grid;gap:0;max-width:34em;
}
.path li{
  position:relative;padding:0 0 clamp(20px,2.2vw,30px) 30px;
  font-size:clamp(18px,1.75vw,23px);line-height:1.34;
  letter-spacing:-.01em;color:var(--ink);
}
.path li:last-child{padding-bottom:0;}
/* the run of the path */
.path li::before{
  content:"";position:absolute;left:5px;top:14px;bottom:0;width:1px;background:var(--rule-2);
}
.path li:last-child::before{display:none;}
/* the stop on it */
.path li::after{
  content:"";position:absolute;left:0;top:8px;width:11px;height:11px;
  border:1px solid var(--accent);border-radius:50%;background:var(--paper);
}
.path .step{
  display:block;margin-bottom:7px;
  font-family:var(--mono);font-size:9.5px;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-3);
}
@media(max-width:520px){
  .path li{padding-left:24px;}
}

/* --------------------------------------------------------------------------
   LEGAL PAGES — privacy / terms. One column at book measure, hanging numerals,
   each clause opening on its own rule. These had no styles at all until now.
   -------------------------------------------------------------------------- */
.legal{
  padding:clamp(40px,5.4vw,78px) 0 clamp(66px,8vw,110px) var(--rail);
  max-width:calc(var(--rail) + 46em);
}
.legal > .label{display:block;margin-bottom:16px;}
.legal h1{max-width:none;margin-bottom:14px;}
.legal .meta{
  font-family:var(--mono);font-size:9.5px;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:clamp(24px,2.8vw,38px);
  max-width:none;   /* 34em of 9.5px mono is 323px — it would wrap mid-line */
}
.legal .lede{max-width:34em;margin-bottom:clamp(32px,3.8vw,52px);}
.legal h2{
  font-size:clamp(19px,1.6vw,23px);font-weight:500;
  letter-spacing:-.006em;line-height:1.3;max-width:26em;
  margin:clamp(32px,3.4vw,50px) 0 14px;padding-top:16px;
  border-top:1px solid var(--rule-2);
}
.legal h2 span{
  display:block;margin-bottom:9px;
  font-family:var(--mono);font-size:9.5px;font-weight:500;letter-spacing:.2em;color:var(--ink-3);
}
.legal p{max-width:34em;margin-bottom:13px;}
.legal ul{margin:0 0 13px;max-width:34em;}
.legal li{
  position:relative;padding:9px 0 9px 20px;border-bottom:1px solid var(--rule);
  font-size:16px;line-height:1.5;color:var(--ink-2);
}
.legal li::before{content:"";position:absolute;left:0;top:1.15em;width:11px;height:1px;background:var(--rule-2);}
.legal li:last-child{border-bottom:0;}
/* the "English governs" note on the translated pages */
.legal .governs{
  margin-top:clamp(28px,3.2vw,42px);padding:15px 17px;max-width:38em;
  border:1px dashed var(--rule-2);
  font-size:14.5px;line-height:1.55;color:var(--ink-3);
}
.legal .tail{
  margin-top:clamp(38px,4.4vw,60px);padding-top:17px;border-top:1.5px solid var(--ink);
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);max-width:none;
}
@media(max-width:860px){ .legal{padding-left:0;max-width:none;} }

/* --------------------------------------------------------------------------
   PRINT — the night edition doesn't print. Invert to paper so a PDF or a
   proposal printout stays legible and doesn't drink a cartridge of toner.
   -------------------------------------------------------------------------- */
@media print{
  :root{
    --paper:#FFFFFF;
    --ink:#000000;
    --ink-2:#2E2E2E;
    --ink-3:#5A5A5A;
    --rule:#D7D7D5;
    --rule-2:#ADADAB;
    --accent:#7A4E1E;
    color-scheme:light;
  }
  html,body{background:#FFFFFF;}
  .masthead nav,.lang-switch,.cta-row,.contact{display:none;}
  .band,.close-band{page-break-inside:avoid;}
  .rv,.rv.in{opacity:1 !important;transform:none !important;}
  .diagram .edge{stroke-dashoffset:0 !important;}
  .diagram .dot{fill:var(--ink) !important;stroke:var(--ink) !important;}
  /* backgrounds are dropped by default when printing — these ARE the data */
  .ui-plot i,.map-rail i{-webkit-print-color-adjust:exact;print-color-adjust:exact;opacity:1 !important;}
  .ui-plot i{background:var(--ink-3) !important;}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9px;color:var(--ink-3);}
}

.ui-fig{margin:22px 0 0;}