/* kierancdunn.com
   Restructured 2026-09-23. One file, no build step, no framework.

   Four scales govern everything below. Nothing outside this block invents a
   font size, a measure, a space value or a radius. If a component needs a
   value that is not here, the scale is wrong, not the component.

   Order: tokens, base, layout, type, boxes, controls, chrome, components,
   parked article components, calendar, utilities, media queries. */

/* ============================================================
   1. TOKENS
   ============================================================ */

:root{
  /* ---- color ----
     Contrast measured against --paper and --paper-2:
       --ink       17.25 : 15.68   AAA
       --ink-2      9.33 :  8.48   AAA
       --ink-3      5.68 :  5.17   AA with margin on both grounds
       --accent     9.20 :  8.37   AAA
       --accent-2   5.84 :  5.31   AA
     --ink-3 was #6b757f, which measured 4.50 on --paper and 4.09 on
     --paper-2, so every eyebrow, label and source line on a tinted band
     failed AA. Same hue (210deg) and saturation, three steps darker. */
  --ink:#14171a;
  --ink-2:#3d454d;
  --ink-3:#5c656e;
  --paper:#fbfaf8;
  --paper-2:#f2efe9;
  --line:#e0dcd4;
  --accent:#1f4d3d;
  --accent-2:#2f6d57;
  /* Secondary text on an --ink band. None of the eight tokens above is
     legible on --ink, so the dark bands were carrying four undeclared hex
     values (#c3cad1, #aeb8c1, #8e9aa5, #7fb3a0). This declares one of them
     and retires the other three. 10.87:1 on --ink. */
  --ink-inv-2:#c3cad1;

  /* ---- type scale ----
     Nine steps. The four small steps are fixed, because a caption that
     grows with the viewport stops being a caption. The five display steps
     are fluid. Rendered sizes, 375px to 1200px:
       label      12        uppercase, tracked
       meta       13        sources, captions, footnotes, form notes
       small      15        secondary body inside cards and lists
       base       17        body
       lead       18 -> 20  ledes and pull quotes
       title      20 -> 22  h3 and card titles
       section    24 -> 32  h2
       page       32 -> 48  h1
       figure     44 -> 60  the one large number on a page */
  --t-label:0.75rem;
  --t-meta:0.8125rem;
  --t-small:0.9375rem;
  --t-base:1.0625rem;
  --t-lead:clamp(1.125rem, 1.08rem + 0.2vw, 1.25rem);
  --t-title:clamp(1.25rem, 1.15rem + 0.5vw, 1.375rem);
  --t-section:clamp(1.5rem, 1.28rem + 0.9vw, 2rem);
  --t-page:clamp(2rem, 1.5rem + 2.1vw, 3rem);
  --t-figure:clamp(2.75rem, 2.1rem + 2.7vw, 3.75rem);

  /* ---- measure ----
     Three, because there are three kinds of line length on this site.
       text   prose read paragraph after paragraph
       lead   a paragraph that is scanned, not read. Short on purpose.
       tight  display headings, so they break into even lines */
  --m-text:66ch;
  --m-lead:52ch;
  --m-tight:22ch;

  /* ---- space, 4px base ----
     Linear where small adjustments matter, doubling above 16. */
  --s-1:4px;
  --s-2:8px;
  --s-3:12px;
  --s-4:16px;
  --s-5:24px;
  --s-6:32px;
  --s-7:48px;
  --s-8:64px;
  /* Section rhythm. One value, fluid, 40px to 64px. */
  --s-section:clamp(2.5rem, 2rem + 2vw, 4rem);

  /* ---- shape ---- */
  --r-sm:6px;   /* controls: buttons, inputs, chips */
  --r:10px;     /* containers: cards and notes */

  /* ---- shell ---- */
  --max:1080px;
  --step:clamp(1rem, 0.6rem + 1.6vw, 1.5rem);
  --font:ui-sans-serif,-apple-system,"Segoe UI",Inter,Helvetica,Arial,sans-serif;
}

/* ============================================================
   2. BASE
   ============================================================ */

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:400 var(--t-base)/1.62 var(--font);
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%;height:auto;display:block}
p{margin:0 0 1em}

/* ============================================================
   3. LAYOUT
   ============================================================ */

.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--step)}

section{padding:var(--s-section) 0;border-top:1px solid var(--line)}
section:first-of-type{border-top:0}

/* Two density modifiers, which is what the old "fold recovery" block was
   reaching for. It overrode four components with one-off paddings that
   fought the section rule above them. These are rules instead.
   .band-tight  sections that belong to the section before them
   .band-open   a section that needs air around a single idea */
section.band-tight{padding:var(--s-5) 0}
section.band-open{padding:calc(var(--s-section) * 1.35) 0}
/* A run of tight sections reads as one block, so only the first takes a rule. */
section.band-tight + section.band-tight{border-top:0;padding-top:0}

/* ============================================================
   4. TYPE
   ============================================================ */

h1,h2,h3,h4{line-height:1.2;letter-spacing:-0.02em;margin:0 0 .5em;font-weight:640}
h1{font-size:var(--t-page);max-width:var(--m-tight)}
h2{font-size:var(--t-section);max-width:var(--m-tight)}
h3{font-size:var(--t-title);letter-spacing:-.015em}
h4{font-size:var(--t-base)}

/* A lede is scanned. Short measure, secondary ink, one size up from body. */
.lede{font-size:var(--t-lead);line-height:1.55;color:var(--ink-2);max-width:var(--m-lead)}

/* Prose that is genuinely read. The only place --m-text applies. */
.prose{max-width:var(--m-text)}
.prose p{color:var(--ink-2)}

/* The uppercase micro label. One rule, seven former copies.
   Was 10.88px to 11.84px in --ink-3 at 4.50:1. Now 12px at 5.68:1. */
.label,.eyebrow,.case-tag,.fmt-meta,.rung-sub,.trend-lab,.invite-tag,.cx dt,.pb b,.step-panel h4,.datatable th,.sources h2,.cal-grid th,.flow b,.q-n,.tz-n,.tier-num,.step-num,.rung .rung-n{
  font-size:var(--t-label);letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-3);font-weight:640;line-height:1.4;margin:0;
}
.eyebrow{margin-bottom:var(--s-5)}
/* Enumerators: 01, 02, 03. Labels, not links, so they are not green.
   Tabular figures so the column does not jitter. */
.enum,.q-n,.tz-n,.tier-num,.step-num,.rung .rung-n{
  font-size:var(--t-label);font-weight:680;letter-spacing:.08em;
  font-variant-numeric:tabular-nums;color:var(--ink-3);text-transform:none;
}

/* Footnotes, captions, source lines, form notes. */
.meta{font-size:var(--t-meta);line-height:1.5;color:var(--ink-3)}

/* Secondary body: card copy, list items, anything inside a box. */
.small{font-size:var(--t-small);line-height:1.55;color:var(--ink-2)}

/* The one large number on a page. Set in --ink: size is the emphasis, and
   --accent is reserved for things you can click. */
.figure,.trend-num{
  font-size:var(--t-figure);font-weight:680;line-height:.92;
  letter-spacing:-.045em;color:var(--ink);font-variant-numeric:tabular-nums;
}
.figure small,.trend-num small{font-size:.42em;font-weight:660;letter-spacing:-.02em;margin-left:.04em}

/* An outcome line: the sentence a card exists to deliver. */
.out{color:var(--ink);font-weight:500}

/* ============================================================
   5. BOX VOCABULARY
   Two boxes and one non-box. Everything that used to be
   .case / .fit-card / .enq-card / .trend-card / .stub-note /
   .invite / .download-cta / .arc-fig / .slot-btn now resolves here.
   ============================================================ */

/* CARD. A discrete unit the reader may act on. --paper ground, so it lifts
   off a --paper-2 band and sits flat on a --paper one, where the border
   carries the edge. The old cards used #fff, which is 1.01:1 against
   --paper and therefore invisible. */
.card,.case-ex,.enq-card,.trend-card{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  padding:var(--s-5);display:flex;flex-direction:column;
}
.card > :last-child,.case-ex > :last-child,.enq-card > :last-child{margin-bottom:0}
.card h3,.case-ex h3{margin:0 0 var(--s-2)}

/* NOTE. An aside to notice, not to act on. --paper-2 ground. No accent
   stripe: the ground is the signal. */
.note,.stub-note,.download-cta,.invite,.arc-fig{
  background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r);
  padding:var(--s-5);font-size:var(--t-small);line-height:1.6;color:var(--ink-2);
}
.note > :last-child,.stub-note > :last-child,.download-cta > :last-child,
.invite > :last-child{margin-bottom:0}
.note b,.stub-note b,.download-cta b,.invite b{color:var(--ink)}

/* ROWS. Not a box. An enumerable sequence separated by hairlines.
   Replaces .doors, .hub, .ladder, .tz, .qs, .art-list and .stepper. */
.rows,.doors,.ladder,.tz,.qs{display:grid;gap:0;margin-top:var(--s-5);border-top:1px solid var(--line)}
.rows > *,.doors > a,.ladder > .rung,.tz > .tz-row,.qs > .q{
  padding:var(--s-5) 0;border-bottom:1px solid var(--line);
}
.rows a,.doors a{text-decoration:none;color:inherit}

/* A section marker rule above a block. Neutral, because it marks, not links.
   Was 2px and 3px solid --accent in four places. */
.rule-top{border-top:2px solid var(--ink);padding-top:var(--s-4)}

/* ============================================================
   6. CONTROLS
   --accent means: you can act on this. Nothing else uses it.
   ============================================================ */

a{color:var(--accent);text-underline-offset:3px}
a:hover{color:var(--accent-2)}

.btn{
  display:inline-block;background:var(--accent);color:var(--paper);
  text-decoration:none;padding:var(--s-3) var(--s-5);border-radius:var(--r-sm);
  font-weight:600;font-size:var(--t-small);border:1px solid var(--accent);
  line-height:1.4;
}
.btn:hover{background:var(--accent-2);border-color:var(--accent-2);color:var(--paper)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn.ghost:hover{background:var(--paper-2);color:var(--ink);border-color:var(--accent-2)}

/* The quiet action inside a card. */
.btn.quiet,.case-cta{
  display:inline-block;background:transparent;color:var(--accent);
  border:1px solid var(--line);border-radius:var(--r-sm);text-decoration:none;
  padding:var(--s-2) var(--s-4);font-size:var(--t-meta);font-weight:600;line-height:1.4;
  min-height:44px;align-items:center;
}
.btn.quiet:hover,.case-cta:hover{background:var(--paper-2);border-color:var(--accent-2);color:var(--accent-2)}
.btn.quiet::after,.case-cta::after{content:" \2192"}
/* In a card, the action sits at the bottom edge whatever the copy length. */
.case-ex .btn.quiet,.case-ex .case-cta{align-self:flex-start;margin-top:auto}

/* A chip: a fast lateral exit. */
.chip{
  display:inline-block;font-size:var(--t-small);text-decoration:none;
  color:var(--ink-2);font-weight:600;background:var(--paper);
  border:1px solid var(--line);border-radius:99px;padding:var(--s-2) var(--s-4);
}
.chip:hover{border-color:var(--accent);color:var(--accent)}

/* One focus ring for every interactive thing on the site. */
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,summary:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;
}

/* ---- forms ---- */
.form{max-width:34rem;margin-top:var(--s-5)}
.field{margin-bottom:var(--s-4)}
.field label{display:block;font-size:var(--t-small);font-weight:600;margin-bottom:var(--s-1)}
.field input,.field select,.field textarea,.one-line input{
  width:100%;font:inherit;font-size:var(--t-base);padding:var(--s-3);
  border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--paper);color:var(--ink);
}
.field textarea{min-height:8rem;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus,.one-line input:focus{
  border-color:var(--accent);
}
.form-note{font-size:var(--t-meta);color:var(--ink-3);margin-top:var(--s-4)}
.one-line{display:flex;flex-wrap:wrap;gap:var(--s-2);max-width:40rem;margin-top:var(--s-4)}
.one-line input{flex:1 1 18rem;min-width:0}
.one-line button{flex:0 0 auto}
.one-line .form-note{flex:1 1 100%}
.direct{display:grid;gap:var(--s-2);margin-top:var(--s-4);list-style:none;padding:0}
.direct a{font-weight:600}

/* ============================================================
   7. CHROME: header and footer
   Behaviour below 720px is the verified disclosure pattern and is
   unchanged. Only type and spacing come from the scales.
   ============================================================ */

.site-head{
  position:sticky;top:0;z-index:50;
  background:rgba(251,250,248,.92);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;height:58px;gap:var(--s-4)}
.brand{font-weight:660;letter-spacing:-.02em;text-decoration:none;color:var(--ink);font-size:var(--t-base);white-space:nowrap}
.nav{display:flex;gap:1.1rem;align-items:center;overflow-x:auto;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav a{font-size:var(--t-small);text-decoration:none;color:var(--ink-2);white-space:nowrap}
.nav a:hover,.nav a[aria-current="page"]{color:var(--ink)}
.nav .btn-sm{
  background:var(--accent);color:var(--paper);padding:var(--s-2) var(--s-3);
  border-radius:var(--r-sm);font-weight:600;text-decoration:none;
  font-size:var(--t-small);white-space:nowrap;
  display:inline-flex;align-items:center;min-height:44px;
}
.nav .btn-sm:hover{background:var(--accent-2);color:var(--paper)}

/* .site-head is already position:sticky, which establishes the containing
   block an absolutely positioned panel needs. Deliberately NOT adding
   position:relative: it would win the cascade over the sticky declaration
   and break the sticky header at every width. */
.nav-toggle{
  display:inline-flex;align-items:center;gap:var(--s-2);
  background:transparent;border:1px solid var(--line);border-radius:var(--r-sm);
  padding:.38rem .7rem;font:inherit;font-size:var(--t-small);color:var(--ink-2);
  min-height:44px;cursor:pointer;
}
.nav-toggle-bars{
  display:inline-block;width:14px;height:10px;flex:none;position:relative;
  border-top:2px solid var(--ink-2);
}
.nav-toggle-bars::before,.nav-toggle-bars::after{
  content:"";position:absolute;left:0;right:0;height:2px;background:var(--ink-2);
}
.nav-toggle-bars::before{top:4px}
.nav-toggle-bars::after{top:8px}
.js-nav .nav-menu{display:none}

.site-foot{
  background:var(--paper-2);border-top:1px solid var(--line);
  padding:var(--s-6) 0;font-size:var(--t-small);color:var(--ink-3);
}
.site-foot .wrap{display:flex;flex-wrap:wrap;gap:var(--s-3) var(--s-5);justify-content:space-between}
.site-foot a{color:var(--ink-2);text-decoration:none}
.site-foot a:hover{color:var(--accent)}
.foot-links{display:flex;flex-wrap:wrap;gap:var(--s-3) var(--s-5)}

/* ============================================================
   8. BANDS
   ============================================================ */

.proof{background:var(--paper-2)}
.leave{background:var(--paper-2)}
.trend{background:var(--paper-2)}

/* A dark band. --paper for primary text, --ink-inv-2 for secondary. */
.cta{background:var(--ink);color:var(--paper);border-top:0}
.cta h2{color:var(--paper)}
.cta p{color:var(--ink-inv-2)}
.cta a{color:var(--paper)}
.cta .btn{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.cta .btn:hover{background:var(--paper-2);color:var(--ink);border-color:var(--paper-2)}
.cta .btn.ghost{background:transparent;color:var(--paper);border-color:rgba(251,250,248,.3)}
.cta .btn.ghost:hover{background:rgba(251,250,248,.1);color:var(--paper);border-color:var(--paper)}
.cta .label,.cta .eyebrow{color:var(--ink-inv-2)}
.scarcity{
  color:var(--ink-inv-2);font-size:var(--t-small);
  border-left:2px solid rgba(251,250,248,.22);
  padding-left:var(--s-3);margin-bottom:var(--s-5);max-width:var(--m-lead);
}

/* ============================================================
   9. COMPONENTS
   ============================================================ */

/* ---- hero ----
   A hero and the section under it are one unit, so the hero closes tight,
   the next section opens tight, and no rule is drawn between them. These
   two declarations replace eleven inline style attributes that were doing
   this by hand, page by page, with six different numbers. */
.hero{padding:var(--s-section) 0 var(--s-5)}
/* The rule between the hero and the content stays. It separates the page's
   argument from its evidence, and it is in the proof the Principal signed
   off. Only the padding tightens. */
.hero + section{padding-top:var(--s-5)}
.hero-id{padding:var(--s-6) 0 var(--s-5)}
.hero-cred{
  font-size:var(--t-lead);color:var(--ink-2);max-width:var(--m-lead);
  border-left:3px solid var(--line);padding-left:var(--s-4);
  margin:var(--s-5) 0 var(--s-3);
}
.hero-meta{font-size:var(--t-meta);color:var(--ink-3);margin:0}
.act-row,.two-btn{display:flex;flex-wrap:wrap;gap:var(--s-3)}
.act-note{font-size:var(--t-small);color:var(--ink-2);max-width:var(--m-lead);margin:var(--s-4) 0 0}
#hero-motion{
  margin-top:var(--s-6);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;background:var(--paper-2);aspect-ratio:16/9;
}
#hero-motion svg{width:100%;height:100%}

/* ---- grid of cards ---- */
.grid,.cases,.enq,.tiers,.paths,.isnt{
  display:grid;gap:var(--s-5);margin-top:var(--s-5);grid-template-columns:1fr;
}
@media(min-width:760px){
  .grid-2,.cases,.paths,.enq-2{grid-template-columns:repeat(2,1fr);gap:var(--s-6)}
}
@media(min-width:820px){
  .grid-3,.enq,.tiers{grid-template-columns:repeat(3,1fr)}
  .enq-2{grid-template-columns:repeat(2,1fr)}
}
@media(min-width:900px){}

/* ---- use case card (/partnerships) ---- */
.case-ex .case-tag{margin:0 0 var(--s-2)}
.case-ex h3{margin:0 0 var(--s-4)}
.cx{margin:0 0 var(--s-5)}
.cx dt{margin-top:var(--s-4)}
.cx dt:first-of-type{margin-top:0}
.cx dd{margin:var(--s-1) 0 0}
.case-src{
  font-size:var(--t-meta);line-height:1.5;color:var(--ink-3);
  margin:var(--s-5) 0 0;padding-top:var(--s-3);border-top:1px solid var(--line);
}
.case-src a{color:var(--accent)}
.case-ex .btn{align-self:flex-start;margin-top:auto}

/* ---- two doors / hub / ladder / questions: all Rows ---- */
.doors .d-t{font-size:var(--t-title);font-weight:640;letter-spacing:-.02em;display:block}
.doors .d-d{color:var(--ink-2);font-size:var(--t-small);display:block;margin-top:var(--s-1);max-width:var(--m-lead)}
.doors .d-go{color:var(--ink-3);font-size:var(--t-title)}
.doors a{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-4)}
.doors a:hover .d-t,.doors a:hover .d-go{color:var(--accent)}
@media(min-width:840px){.doors{grid-template-columns:repeat(2,1fr);gap:0 var(--s-6)}}

.rung{display:grid;grid-template-columns:2.6rem 1fr;gap:var(--s-4)}
.rung h3{margin:0 0 var(--s-1)}
.rung p{margin:0;color:var(--ink-2);font-size:var(--t-small);max-width:var(--m-lead)}

.tz-row{display:grid;grid-template-columns:2.6rem 1fr;gap:var(--s-1) var(--s-3);align-items:baseline}
.tz-t{font-weight:640;font-size:var(--t-title);letter-spacing:-.01em}
.tz-d{grid-column:2;color:var(--ink-2);font-size:var(--t-small);max-width:var(--m-lead)}
@media(min-width:760px){
  .tz-row{grid-template-columns:2.6rem 13rem 1fr}
  .tz-d{grid-column:3;margin:0}
}

.q h3{margin:var(--s-2) 0 var(--s-2);max-width:var(--m-lead);line-height:1.35}
.q p{color:var(--ink-2);font-size:var(--t-small);max-width:var(--m-lead);margin:0 0 .5em}
.q p:last-child{margin-bottom:0}
.q .why{font-size:var(--t-meta);color:var(--ink-3);max-width:var(--m-lead)}
.q .why b{color:var(--ink-2);font-weight:640}

/* ---- stepper (how I work) ---- */
.stepper{margin-top:var(--s-5);border-top:1px solid var(--line)}
.step{border-bottom:1px solid var(--line)}
.step-btn{
  width:100%;display:grid;grid-template-columns:2.9rem 1fr 1.4rem;align-items:baseline;
  gap:var(--s-3);background:none;border:0;padding:var(--s-4) 0;text-align:left;
  cursor:pointer;font:inherit;color:inherit;
}
.step-btn:hover .step-title{color:var(--accent)}
.step-title{font-weight:640;font-size:var(--t-base);display:block}
.step-outcome{display:block;color:var(--ink-3);font-size:var(--t-small);margin-top:var(--s-1);font-weight:400}
.step-chev{justify-self:end;color:var(--ink-3);transition:transform .18s ease;font-size:var(--t-base);line-height:1}
.step-btn[aria-expanded="true"] .step-chev{transform:rotate(45deg)}
.step-panel{display:none;padding:0 0 var(--s-5) 3.6rem}
.step-panel[data-open]{display:block}
.step-panel h4{margin:0 0 var(--s-2);font-size:var(--t-label);letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3)}
.step-panel ul{margin:0;padding-left:1.1rem}
.step-panel li{margin-bottom:var(--s-1);color:var(--ink-2);font-size:var(--t-small)}
@media(min-width:860px){
  .stepper{display:grid;grid-template-columns:repeat(6,1fr);border-top:0;gap:0}
  .step{border-bottom:0;border-top:3px solid var(--line);padding-right:var(--s-3)}
  .step[data-active]{border-top-color:var(--ink)}
  .step-btn{display:block;padding:var(--s-3) 0}
  .step-chev{display:none}
  .step-panels{grid-column:1/-1;border-top:1px solid var(--line);margin-top:var(--s-1)}
  .step-panel{padding:var(--s-5) 0 0;max-width:var(--m-text)}
}

/* ---- tiers / formats / paths: top-ruled blocks ---- */
.tier h3{margin:var(--s-1) 0 var(--s-2)}
.tier p{color:var(--ink-2);font-size:var(--t-small)}
.tier ul{margin:var(--s-2) 0 0;padding-left:1.05rem;color:var(--ink-2);font-size:var(--t-small)}
.tier li{margin-bottom:var(--s-1)}
@media(min-width:700px){}
.routes li{border-left:2px solid var(--line);padding-left:var(--s-3)}
.routes b{display:block;font-size:var(--t-small)}
.routes span{color:var(--ink-3);font-size:var(--t-meta)}

.fmt h3{margin:0 0 var(--s-1)}
.fmt p{color:var(--ink-2);font-size:var(--t-small);margin:0}
.fmt-meta{margin:0 0 var(--s-2)}

.path > h3{margin:0 0 var(--s-1)}
.path .path-who{color:var(--ink-3);font-size:var(--t-small);margin:0 0 var(--s-5);max-width:var(--m-lead)}
.path-item{padding:var(--s-4) 0;border-top:1px solid var(--line)}
.path-item:first-of-type{border-top:0;padding-top:0}
.path-item h4{margin:0 0 var(--s-1)}
.path-item p{margin:0 0 var(--s-2);color:var(--ink-2);font-size:var(--t-small)}
.path-item ul{margin:var(--s-1) 0 0;padding-left:1.05rem;color:var(--ink-2);font-size:var(--t-small)}
.path-item li{margin-bottom:var(--s-1)}
.path-item .bring{
  display:block;margin-top:var(--s-2);font-size:var(--t-meta);color:var(--ink-3);
  border-left:2px solid var(--line);padding-left:var(--s-3);
}

/* ---- trend card (home) ---- */
.trend .eyebrow{margin-bottom:var(--s-4)}
.trend-card{
  display:grid;grid-template-columns:1fr;gap:var(--s-4);
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  padding:var(--s-5);
}
.trend-fig{display:flex;flex-direction:column;gap:var(--s-2)}
.trend-stat{font-size:var(--t-base);line-height:1.5;max-width:var(--m-lead);margin:0 0 var(--s-3);font-weight:500;color:var(--ink)}
.trend-read{font-size:var(--t-small);color:var(--ink-2);max-width:var(--m-lead);margin:0 0 var(--s-3);border-left:2px solid var(--line);padding-left:var(--s-3)}
.trend-read b{color:var(--ink);font-weight:640}
.trend-src{font-size:var(--t-meta);color:var(--ink-3);margin:0}
.trend-src a{font-weight:600}
@media(min-width:680px){
  .trend-card{grid-template-columns:minmax(0,9.5rem) 1fr;gap:0 var(--s-6);align-items:start;padding:var(--s-6)}
  .trend-fig{border-right:1px solid var(--line);padding-right:var(--s-5);align-self:stretch;justify-content:flex-start}
}

/* ---- is / is not ---- */
.isnt{display:grid;gap:var(--s-6)}
.is-col h2{font-size:var(--t-title);margin:0 0 var(--s-3);padding-bottom:var(--s-2);border-bottom:2px solid var(--ink);max-width:none}
.is-col ul{margin:0;padding-left:1.1rem;color:var(--ink-2)}
.is-col li{margin-bottom:var(--s-2);font-size:var(--t-small)}
.is-not h2{border-bottom-color:var(--line)}
.is-not li{color:var(--ink-3)}
@media(min-width:820px){.isnt{grid-template-columns:1fr 1fr;gap:var(--s-8)}}

/* ---- stats ---- */
.creds{margin-top:var(--s-6);padding-top:var(--s-5);border-top:1px solid var(--line);color:var(--ink-2);font-size:var(--t-small)}
.creds li{margin-bottom:var(--s-1)}

/* ---- bio, misc text ---- */
.bio p{max-width:var(--m-text);color:var(--ink-2)}
.bio p:first-of-type{color:var(--ink);font-size:var(--t-lead)}
.pull{border-left:3px solid var(--line);padding-left:var(--s-4);margin:var(--s-6) 0;font-size:var(--t-lead);color:var(--ink);max-width:var(--m-lead)}
.nogate{font-size:var(--t-meta);color:var(--ink-3);margin-top:var(--s-4)}
.slot-note{color:var(--ink-2);font-size:var(--t-small);margin-top:var(--s-5);max-width:var(--m-lead)}
.alt-contact{margin-top:var(--s-7);padding-top:var(--s-5);border-top:1px solid var(--line);max-width:var(--m-lead)}
.alt-contact p{color:var(--ink-2);font-size:var(--t-small)}
.sub{color:var(--ink-2);max-width:var(--m-lead);font-size:var(--t-small)}
.sec-links{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-5);margin:var(--s-2) 0 0;padding:0;list-style:none}
.sec-links a{font-size:var(--t-small);font-weight:600;display:inline-block;padding:var(--s-1) 0}
.sec-links span{color:var(--ink-3);font-size:var(--t-small)}
.routes{display:grid;gap:var(--s-3);margin:var(--s-4) 0 0;padding:0;list-style:none}
@media(min-width:700px){.routes{grid-template-columns:repeat(4,1fr)}}

/* ---- media / images ---- */
.arc-cap,.diagram-cap{font-size:var(--t-meta);color:var(--ink-3);margin:var(--s-2) 0 0;text-align:center}
.arc-fig object,.arc-fig img{width:100%;height:auto;display:block}
.arc-fig{margin:var(--s-5) 0 var(--s-2);padding:var(--s-4) var(--s-2);overflow:hidden}
.diagram-fig{max-width:460px;margin:var(--s-5) auto;text-align:center}
.diagram-fig img{width:100%;height:auto;display:block;margin:0 auto}
.mugshot{
  width:104px;height:104px;border-radius:50%;overflow:hidden;flex:none;
  background:var(--paper-2);border:1px solid var(--line);display:grid;place-items:center;
  font:700 22px/1 var(--font);color:var(--ink-3);letter-spacing:.04em;
}
.mugshot img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.04)}
.mug-row{display:flex;gap:var(--s-5);align-items:center;margin-top:var(--s-5);flex-wrap:wrap}
.mug-row .mug-txt{flex:1;min-width:15rem}
.mug-row .mug-txt b{display:block;font-size:var(--t-base)}
.mug-row .mug-txt span{color:var(--ink-3);font-size:var(--t-small)}
.enq-media{display:flex;align-items:center;gap:var(--s-3);margin-bottom:var(--s-2)}
.enq-media b{margin-bottom:0}
.enq-photo{width:84px;height:84px;border-radius:50%;object-fit:cover;flex:none;border:1px solid var(--line);filter:grayscale(1) contrast(1.04)}

/* ---- enquiry cards ---- */
.enq-card b{display:block;font-size:var(--t-title);margin-bottom:var(--s-2);font-weight:640;letter-spacing:-.015em}
.enq-card p{margin:0 0 var(--s-4);color:var(--ink-2);font-size:var(--t-small)}

/* ---- doc download link ---- */
.doclink{
  display:inline-flex;align-items:center;gap:var(--s-2);margin-top:var(--s-3);
  font-size:var(--t-small);font-weight:640;text-decoration:none;
  border:1px solid var(--line);border-radius:var(--r-sm);padding:var(--s-2) var(--s-3);
  background:var(--paper);
}
.doclink:hover{border-color:var(--accent)}
.doclink small{font-weight:400;color:var(--ink-3);font-size:var(--t-meta)}

/* ---- equation headline ---- */
.equation{font-size:var(--t-page);line-height:1.16;letter-spacing:-.025em;max-width:var(--m-tight);margin:0 0 var(--s-3)}
.equation span{color:var(--ink-3);font-weight:400;padding:0 .12em}

/* ---- folded sequence ---- */
.fold{margin-top:var(--s-4);border-top:1px solid var(--line);padding-top:var(--s-3)}
.fold summary{
  cursor:pointer;list-style:none;font-size:var(--t-label);letter-spacing:.11em;
  text-transform:uppercase;font-weight:700;color:var(--ink-2);
  display:flex;align-items:center;gap:var(--s-2);
}
.fold summary:hover{color:var(--accent)}
.fold summary::-webkit-details-marker{display:none}
.fold summary::before{
  content:"+";font-size:var(--t-base);line-height:1;font-weight:600;
  width:1.05rem;height:1.05rem;border:1px solid var(--line);border-radius:3px;
  display:flex;align-items:center;justify-content:center;flex:none;
}
.fold[open] summary::before{content:"\2013"}
.flow{list-style:none;margin:var(--s-4) 0 var(--s-1);padding:0 0 var(--s-1);display:flex;gap:0;overflow-x:auto;-webkit-overflow-scrolling:touch}
.flow li{
  flex:1 0 12.5rem;position:relative;padding:0 var(--s-4) 0 0;margin-right:var(--s-4);
  font-size:var(--t-small);line-height:1.45;color:var(--ink-2);border-right:1px solid var(--line);
}
.flow li:last-child{border-right:0;margin-right:0;padding-right:0}
.flow li::after{content:"\2192";position:absolute;right:-.42rem;top:.05rem;color:var(--ink-3);background:var(--paper);font-size:var(--t-meta);line-height:1}
.flow li:last-child::after{content:none}
.flow b{display:block;color:var(--ink);font-size:var(--t-label);letter-spacing:.11em;text-transform:uppercase;margin-bottom:var(--s-1)}

/* ---- room: who / problem / benefit ---- */
.room h3{margin:0 0 var(--s-3);padding-bottom:var(--s-2);border-bottom:2px solid var(--ink)}
.pb{margin:0 0 var(--s-4);color:var(--ink-2);font-size:var(--t-small);line-height:1.55}
.pb:last-child{margin-bottom:0}
.pb b{display:block;font-size:var(--t-label);letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3);font-weight:640;margin:0 0 var(--s-1);line-height:1.4}

/* ---- invite panel ---- */
.invite{margin-top:var(--s-7)}
.invite h2{font-size:var(--t-title);margin:var(--s-1) 0 var(--s-3);max-width:none}
.invite p{color:var(--ink-2);max-width:var(--m-lead);font-size:var(--t-small)}
.invite-tag{color:var(--ink-3)}
.invite .btn{margin-top:var(--s-2)}

/* ============================================================
   10. PARKED: article components.
   Not used by any live page. Used by _review_2026-09-21/articles-held/,
   which is written and waiting on a publish decision. Deleting these
   would break those pages silently when they are restored.
   ============================================================ */

.art-list{list-style:none;padding:0;margin:var(--s-5) 0 0}
.art-item{border-top:1px solid var(--line);padding:var(--s-5) 0}
.art-item:last-child{border-bottom:1px solid var(--line)}
.art-item h3{margin:0 0 var(--s-1)}
.art-item h3 a{text-decoration:none;color:var(--ink)}
.art-item h3 a:hover{color:var(--accent)}
.art-item p{color:var(--ink-2);font-size:var(--t-small);margin:0 0 var(--s-2);max-width:var(--m-text)}
.art-meta,.archive-note{font-size:var(--t-meta);color:var(--ink-3)}
.archive-note{font-style:italic}

.article-body{max-width:var(--m-text);font-size:var(--t-base);line-height:1.7}
.article-body > p:first-of-type{font-size:var(--t-lead);color:var(--ink)}
.article-body h2{font-size:var(--t-section);margin:var(--s-7) 0 var(--s-3);max-width:var(--m-tight)}
.article-body h3{font-size:var(--t-title);margin:var(--s-6) 0 var(--s-2)}
.article-body p{color:var(--ink-2)}
.article-body ul{padding-left:1.15rem;color:var(--ink-2)}
.article-body li{margin-bottom:var(--s-1)}
.article-body strong{color:var(--ink);font-weight:640}
.article-body a{text-decoration:none;border-bottom:1px solid var(--line)}
.article-body a:hover{border-bottom-color:var(--accent)}

.byline{display:flex;align-items:center;gap:var(--s-3);margin:var(--s-5) 0 0;padding-top:var(--s-4);border-top:1px solid var(--line)}
.byline .avatar{
  width:34px;height:34px;border-radius:50%;flex:none;overflow:hidden;
  background:var(--paper-2);border:1px solid var(--line);display:grid;place-items:center;
  font:640 12px/1 var(--font);letter-spacing:.02em;color:var(--ink-3);
}
.byline .avatar img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05)}
.byline .who{font-size:var(--t-meta);line-height:1.35}
.byline .who b{display:block;font-weight:640;color:var(--ink);font-size:var(--t-small)}
.byline .who span{color:var(--ink-3)}

.pullquote{
  margin:var(--s-7) 0;padding:0 0 0 var(--s-4);border-left:3px solid var(--line);
  font-size:var(--t-title);line-height:1.45;font-weight:600;letter-spacing:-.015em;
  color:var(--ink);max-width:34ch; /* the one measure outside the three tokens: a floated pullquote needs its own, and only on mobile, since desktop sets width:16rem */
}
@media(min-width:900px){.pullquote{float:right;width:16rem;margin:var(--s-1) -6.5rem var(--s-5) var(--s-6)}}

.datatable{width:100%;border-collapse:collapse;margin:var(--s-5) 0;font-size:var(--t-small)}
.datatable th,.datatable td{padding:var(--s-2) var(--s-3);border-bottom:1px solid var(--line);text-align:left}
.datatable th{font-size:var(--t-label);letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3);font-weight:640}
.datatable td:not(:first-child){font-variant-numeric:tabular-nums;text-align:right}
.table-scroll{overflow-x:auto}

.sources{margin-top:var(--s-8);padding-top:var(--s-5);border-top:1px solid var(--line)}
.sources h2{font-size:var(--t-label);letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3);margin:0 0 var(--s-3);max-width:none}
.sources ol{margin:0;padding-left:1.2rem;font-size:var(--t-meta);color:var(--ink-3)}
.sources li{margin-bottom:var(--s-2)}
.sources a{color:var(--ink-2);text-decoration:none;border-bottom:1px solid var(--line)}
.sources a:hover{color:var(--accent)}

.download-cta{margin-top:var(--s-7)}
.download-cta b{display:block;margin-bottom:var(--s-1);color:var(--ink)}
.download-cta p{margin:0 0 var(--s-3)}

/* ============================================================
   11. CALENDAR (/chat). Rendered by app.js. Presentation only:
   the scheduling math is untouched.
   ============================================================ */

.booking{margin-top:var(--s-1)}
.cal-wrap{display:grid;gap:var(--s-5);margin-top:var(--s-2)}
.cal-pane{min-width:0}
.cal-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s-2);margin-bottom:var(--s-1)}
.cal-title{font-weight:640;font-size:var(--t-base);color:var(--ink)}
.cal-nav{
  background:transparent;border:1px solid var(--line);border-radius:var(--r-sm);
  min-width:44px;min-height:44px;font-size:var(--t-title);line-height:1;
  color:var(--ink-2);cursor:pointer;font-family:inherit;
}
.cal-nav:hover{border-color:var(--accent);color:var(--accent)}
.cal-nav:disabled{color:var(--line);border-color:var(--line);cursor:default}
.cal-grid{width:100%;border-collapse:collapse;table-layout:fixed;margin-top:var(--s-3)}
.cal-grid th{padding:var(--s-1) 0;font-size:var(--t-label);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);font-weight:640}
.cal-grid th abbr{text-decoration:none}
.cal-grid td{padding:2px;text-align:center;vertical-align:middle}
.cal-day{
  width:100%;box-sizing:border-box;min-width:38px;min-height:44px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  background:transparent;border:1px solid var(--line);border-radius:var(--r-sm);
  font:inherit;font-size:var(--t-small);font-weight:600;color:var(--ink);cursor:pointer;padding:var(--s-1) 0;
}
.cal-day:hover{border-color:var(--accent);background:var(--paper-2)}
.cal-day .cal-dot{width:5px;height:5px;border-radius:50%;background:var(--accent)}
.cal-day.is-selected,.cal-day.is-selected:hover{background:var(--accent);border-color:var(--accent);color:var(--paper)}
.cal-day.is-selected .cal-dot{background:var(--paper)}
.cal-day.is-today,.cal-nolot.is-today{box-shadow:inset 0 0 0 1px var(--line)}
.cal-nolot{
  display:flex;box-sizing:border-box;width:100%;min-width:38px;min-height:44px;
  align-items:center;justify-content:center;color:var(--ink-3);font-size:var(--t-small);border-radius:var(--r-sm);
}
.cal-times{border-top:1px solid var(--line);padding-top:var(--s-5);min-width:0}
.cal-times-heading{font-size:var(--t-title);margin:0 0 var(--s-3);color:var(--ink);font-weight:640;letter-spacing:-.015em}
.cal-times-list{display:flex;flex-direction:column;gap:var(--s-2)}
.cal-time-link{
  display:flex;flex-direction:column;gap:2px;justify-content:center;text-decoration:none;
  width:100%;box-sizing:border-box;min-height:40px;
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--paper);
  padding:var(--s-3) var(--s-4);color:var(--ink);
}
.cal-time-link:hover{border-color:var(--accent);background:var(--paper-2);color:var(--ink)}
.slot-time{font-weight:600;font-size:var(--t-base)}
.slot-local{font-size:var(--t-meta);color:var(--ink-3)}
.cal-times-foot{margin-top:var(--s-4)}
@media(min-width:768px){
  .cal-wrap{grid-template-columns:1fr 1fr;gap:var(--s-7);align-items:start}
  .cal-times{border-top:0;border-left:1px solid var(--line);padding-top:0;padding-left:var(--s-7)}
}

/* ============================================================
   12. UTILITIES
   ============================================================ */

.visually-hidden{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}
.mt-0{margin-top:0}
.mt-3{margin-top:var(--s-3)}
.mt-4{margin-top:var(--s-4)}
.mt-5{margin-top:var(--s-5)}
.mt-6{margin-top:var(--s-6)}
.mb-1{margin-bottom:var(--s-1)}
.mb-3{margin-bottom:var(--s-3)}
/* A heading that is structurally h2 but visually a minor heading. Replaces
   six inline font-size overrides that shrank an h1 or h2 by hand. */
.h-minor{font-size:var(--t-title);max-width:none}
/* A bare arrow link, no underline. Replaces two inline style attributes. */
.link-plain{font-weight:640;text-decoration:none}
/* A ruled break inside a section. Replaces one inline three-property style. */
.divider-top{margin-top:var(--s-7);padding-top:var(--s-5);border-top:1px solid var(--line)}
/* A list whose markers sit close to the text rather than at the 40px default. */
.list-tight{padding-left:1.15rem}
.measure-text{max-width:var(--m-text)}
.measure-lead{max-width:var(--m-lead)}
.measure-tight{max-width:var(--m-tight)}
.ink-2{color:var(--ink-2)}

/* ============================================================
   13. MEDIA QUERIES: nav disclosure, reduced motion, print
   ============================================================ */

@media(max-width:719.98px){
  .nav{overflow-x:visible;flex-wrap:wrap;justify-content:flex-end}
  .site-head .wrap{height:auto;min-height:58px;padding-top:var(--s-1);padding-bottom:var(--s-1)}
  .js-nav .nav-menu.open{
    display:flex;flex-direction:column;
    position:absolute;left:0;right:0;top:100%;
    background:var(--paper);border-bottom:1px solid var(--line);
    padding:var(--s-2) 0;margin:0;gap:0;
  }
  .js-nav .nav-menu.open a{
    display:block;padding:var(--s-3) var(--step);min-height:44px;
    box-sizing:border-box;font-size:var(--t-small);line-height:44px;
  }
}

@media(min-width:720px){
  .nav{flex-wrap:nowrap}
  .nav-toggle{display:none!important}
  .nav-menu{display:flex!important;position:static;gap:1.1rem;align-items:center;background:none;border:0;padding:0}
}

/* Narrow-width header fit. At 320 to 399px the brand, toggle and CTA
   together exceed the bar and the nav wraps to a second row. Measured at
   320px: CTA right edge 304, no horizontal scroll. */
@media(max-width:399.98px){
  .site-head .wrap{gap:var(--s-2)}
  .brand{font-size:var(--t-small)}
  .nav{gap:var(--s-2)}
  .nav-toggle{padding:.38rem .55rem;font-size:var(--t-meta);gap:var(--s-1)}
  .nav .btn-sm{padding:var(--s-2);font-size:var(--t-meta)}
}

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

@media print{
  .site-head,.site-foot,.cta{display:none}
  body{background:#fff;font-size:12pt}
  section{padding:var(--s-4) 0;border-top:0}
}