/* ---------------------------------------------------------------------------
     Kommuna — self-hosted, carries the --label role (section markers, small-caps
     links, table row keys, footer keys). Two real files rather than one: .smark b
     and .figcap b ask for 700, and with only the regular the browser would
     synthesise a smeared fake bold on every section marker.
     woff2 since 2026-09-29 (63KB for both, down from 226KB as .ttf). The .ttf
     originals stay in the project folder as the source, but aren't deployed.
     --------------------------------------------------------------------------- */
  @font-face{
    font-family:'Kommuna';
    src:url('Kommuna-Normal.woff2') format('woff2');
    font-weight:400;font-style:normal;font-display:swap;
  }
  @font-face{
    font-family:'Kommuna';
    src:url('Kommuna-NormalBold.woff2') format('woff2');
    font-weight:700;font-style:normal;font-display:swap;
  }

  /* Fraunces, Newsreader, Courier Prime and Caveat, served from the site (2026-10-06) instead of
     Google Fonts, so a visit contacts no one but Cloudflare. Latin subset, the same files and
     weight ranges Google served; Fraunces, Newsreader and Caveat are variable fonts. */
  @font-face{font-family:'Fraunces';src:url('Fraunces.woff2') format('woff2');font-style:normal;font-weight:400 600;font-display:swap;
    unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
  @font-face{font-family:'Fraunces';src:url('Fraunces-Italic.woff2') format('woff2');font-style:italic;font-weight:420 500;font-display:swap;
    unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
  @font-face{font-family:'Newsreader';src:url('Newsreader.woff2') format('woff2');font-style:normal;font-weight:400 500;font-display:swap;
    unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
  @font-face{font-family:'Newsreader';src:url('Newsreader-Italic.woff2') format('woff2');font-style:italic;font-weight:400;font-display:swap;
    unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
  @font-face{font-family:'Courier Prime';src:url('CourierPrime-Regular.woff2') format('woff2');font-style:normal;font-weight:400;font-display:swap;
    unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
  @font-face{font-family:'Courier Prime';src:url('CourierPrime-Bold.woff2') format('woff2');font-style:normal;font-weight:700;font-display:swap;
    unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
  @font-face{font-family:'Caveat';src:url('Caveat.woff2') format('woff2');font-style:normal;font-weight:500 700;font-display:swap;
    unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

  /* design tokens: colors, fonts, and the hero photo, shared via CSS custom properties */
  :root{
    --paper:#F2EEE4;--paper-dim:#CFC8B7;--ink:#211E18;--ink-70:#4b4638;--muted:#726a58;
    --hair:#CFC6B2;--hair-soft:#DED6C5;
    --dusk:#14302E;--accent:#E85E2A;--accent-deep:#B04418;--glow:#F0C6A4;--sage:#96AAA5;
    --hand:'Caveat',cursive;--disp:'Fraunces',Georgia,serif;--body:'Newsreader',Georgia,serif;--label:'Kommuna','Courier Prime',monospace;
    /* hero (§ masthead) — the brick-wall portrait, 800px square */
    --photo-hero:url("hero.webp");
    /* §06 portrait — the dusk/on-film shot, 1500x1005 */
    --photo-bio:url("bio.webp");

    /* TYPE SCALE — ten sizes, each with one job. Every font-size in this file should be
       one of these; anything that isn't is either the wordmark, the drop cap, or text
       drawn inside an SVG figure (sized in the figure's own coordinates).
       Roles: display (H1) · title (H2) · subhead (H3) · emphasis (the line that lands) ·
       body (all running prose, also FAQ questions and buttons) · small (tables, cards,
       footer) · label (mono caps) · link (secondary actions) · note (handwriting) ·
       hook (the hero's one big handwritten line). */
    --t-display:clamp(2.6rem, 5.4vw, 4.2rem);
    --t-title:clamp(1.9rem, 3.4vw, 2.55rem);
    --t-hook:2.2rem;
    --t-note:1.5rem;
    --t-emph:1.45rem;
    --t-subhead:1.34rem;
    --t-body:1.12rem;
    --t-small:.98rem;
    --t-link:.72rem;
    --t-label:.64rem;
  }

  /* global reset + base page styles (background, body font, the faint dot-grid texture) */
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{background:var(--paper);color:var(--ink);font-family:var(--body);font-size:var(--t-body);line-height:1.62;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
  body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;background-image:radial-gradient(rgba(33,30,24,.028) 1px,transparent 1px);background-size:3px 3px;opacity:.5}

  /* layout helpers: page-width wrapper, narrow reading column, full-bleed sections */
  .wrap{max-width:1120px;margin:0 auto;padding:0 44px;position:relative;z-index:1}
  .reading{max-width:660px;margin:0 auto;position:relative}
  a{color:inherit}
  .fullbleed{width:100vw;position:relative;left:50%;margin-left:-50vw}

  /* "smark" = the small section-marker line (bar + label) used at the top of most sections, e.g. "§ 01 — The difference" */
  .smark{display:flex;align-items:center;gap:14px;margin-bottom:18px}
  .smark .bar{width:42px;height:1px;background:var(--accent);flex:none}
  .smark span{font-family:var(--label);font-size:var(--t-label);letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
  .smark span b{color:var(--accent-deep);font-weight:700;margin-right:2px}

  /* figure captions, e.g. "Fig. 01 — Mikhail Saburov, founder..." under the hero photo and curve chart */
  .figcap{font-family:var(--label);font-size:var(--t-label);letter-spacing:.18em;text-transform:uppercase;color:var(--muted);padding-top:10px;border-top:1px solid var(--hair);margin-top:14px}
  .figcap b{color:var(--accent-deep);font-weight:700}

  /* primary CTA: filled pill (hero + the closing call booking button). The corner radius is deliberately a
     touch irregular so the button reads hand-drawn — like the photo frame — rather than a stock UI component.
     Text is ink rather than paper: ink-on-accent clears 4.5:1 contrast, paper-on-accent only reaches ~3:1. */
  .btn{display:inline-block;font-family:var(--disp);font-size:var(--t-body);font-weight:500;line-height:1;white-space:nowrap;text-decoration:none;color:var(--ink);background:var(--accent);padding:14px 30px;border-radius:24px 26px 22px 27px / 27px 22px 26px 24px;transition:background .25s ease,color .25s ease}
  .btn:hover{background:var(--ink);color:var(--paper)}

  /* site header: logo/wordmark, "Vol. I · No. 01" tag, nav links, mobile menu toggle */
  header{border-top:2px solid var(--ink);padding:18px 0 22px;border-bottom:1px solid var(--hair);position:relative;z-index:5}
  /* baseline, not top: the nav sits on the same line as the wordmark's letters, so it
     reads as part of the masthead rather than hanging off the top edge */
  .bar{display:flex;justify-content:space-between;align-items:baseline}
  /* the logo mark sits to the left of the wordmark, out of the text flow, so the
     wordmark's baseline (which the nav lines up with) is untouched */
  .mark{position:relative;padding-left:36px}
  .mark .logo{position:absolute;left:0;top:50%;transform:translateY(-50%);height:44px;width:auto;color:#1D1B19}
  .mark .name{font-family:var(--disp);font-weight:560;font-size:1.42rem;letter-spacing:.01em;line-height:1}
  .mark .name .tm{font-size:.62em;vertical-align:super;font-weight:400}
  /* optical alignment: the D of "Dramaturgy Studio" has almost no side bearing, while the
     round G of the wordmark starts ~0.6px in and reads further in still, so the
     subline sat visibly closer to the logo. 1px brings the two lines into line. */
  .mark .sub,.footbrand .footsub{margin-left:1px}
  .mark .sub{font-family:var(--label);font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);margin-top:7px}
  .right{display:flex;flex-direction:column;align-items:flex-end;gap:12px}
  .vol{font-family:var(--label);font-size:var(--t-label);letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
  nav{display:flex;gap:28px;align-items:center;font-family:var(--body);font-size:var(--t-small)}
  nav a{text-decoration:none}
  nav a.link{position:relative}
  nav a.link::after{content:"";position:absolute;left:0;bottom:-3px;height:1px;width:0;background:var(--accent);transition:width .3s ease}
  nav a.link:hover::after{width:100%}
  /* colour and appearance set explicitly: a <button> left to the browser comes out in
     iOS Safari's system blue */
  .navtoggle{display:none;-webkit-appearance:none;appearance:none;background:none;border:none;border-radius:0;color:var(--ink);font-family:var(--label);font-size:var(--t-label);letter-spacing:.18em;text-transform:uppercase;cursor:pointer;-webkit-tap-highlight-color:transparent}

  /* hero section: headline, deck copy, CTAs, and the two-column grid it sits in */
  .hero{padding:58px 0 46px;position:relative}
  .filing{font-family:var(--label);font-size:var(--t-label);letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:46px}
  .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center}
  .hook{font-family:var(--hand);font-size:var(--t-hook);line-height:1.02;color:var(--ink);margin-bottom:18px;transform:rotate(-1deg)}
  .hook .good{display:inline-block;margin-left:10px;transform:rotate(1.5deg);color:var(--accent-deep)}
  h1{font-family:var(--disp);font-weight:470;font-size:var(--t-display);line-height:.98;letter-spacing:-.015em}
  h1 em{font-style:italic;font-weight:420}
  .deck{font-family:var(--body);font-size:var(--t-body);color:var(--ink-70);max-width:44ch;margin:24px 0 0;padding-top:20px;border-top:1px solid var(--hair)}
  .deck em{font-style:italic;color:var(--ink)}
  .cta{display:flex;gap:30px;align-items:baseline;margin-top:30px;flex-wrap:wrap}
  /* small mono link used site-wide (hero, §04, the detail-page footers). Deliberately NOT
     scoped to .cta — it was, which left every .see outside the hero as a default browser link. */
  .see{font-family:var(--label);font-size:var(--t-link);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;border-bottom:1px solid var(--accent);padding-bottom:2px;color:var(--accent-deep)}
  .see:hover{opacity:.65}
  a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
  /* text for screen readers only (e.g. "opens in a new tab" on the booking links) */
  .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  /* "Skip to content": the first thing a keyboard user reaches; out of sight until focused */
  .skip{position:absolute;left:16px;top:-60px;z-index:100;padding:10px 16px;background:var(--ink);color:var(--paper);font-family:var(--body);font-size:var(--t-small);text-decoration:none;border-radius:4px}
  .skip:focus{top:12px}
  /* Small orange labels on the dark green sections, a shade lighter than the brand orange so
     they pass WCAG AA contrast (4.64:1 against dusk; the brand orange is 4.06:1). Labels only:
     buttons, the graph and the line keep --accent. (Accessibility pass, Mike, 2026-10-08.) */
  body > footer .footk,.band .ig-term,.band .gr-term{color:#EB7042}
  /* (the § numbers and Fig. labels on dusk set the same colour in their own rules) */

  /* hero photo frame: the founder's portrait, hand-drawn SVG border, and the "wait —" handwritten overlay note */
  .frame{position:relative;width:100%;max-width:430px;margin:0 auto}
  .frame .stage{position:relative}
  /* .art is the photo itself — background-position controls the crop/focal point */
  .frame .art{position:absolute;inset:6.5% 6% 6% 7%;background-image:var(--photo-hero);background-size:124%;background-position:52% 34%;filter:saturate(1.06) brightness(1.01)}
  /* the identification under the portrait, handwritten, in place of a formal caption */
  .frame-note{position:relative;margin:14px 0 0 9%;padding-left:38px;font-family:var(--hand);font-size:var(--t-note);line-height:1.1;color:var(--ink);transform:rotate(-2deg)}
  .frame-note svg{position:absolute;left:2px;top:-24px;width:30px;height:34px;fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
  .frameborder{display:block;width:100%;height:auto;position:relative;z-index:1}

  /* arc container + traveling throughline: the animated curve/dot that travels down the left margin
     as you scroll through §01–§04, drawn by script.js into the #arcline SVG */
  .arc{position:relative}
  /* z-index 3 rather than 0 so the playhead paints OVER §04's Idea dot when it arrives,
     the way it covers every bead on its own line. .ways sits at 2, and the dusk band also
     sits at 3 but comes later in the DOM inside .arc, so the line still runs behind the
     band exactly as before. The line lives in the left margin, so being above the text
     sections changes nothing else. */
  #arcline{position:absolute;top:0;left:0;width:100%;height:100%;z-index:3;pointer-events:none;overflow:visible}
  #arcFaint,#arcFaint2{fill:none;stroke:var(--accent);stroke-width:2;opacity:.24;stroke-linecap:round}
  #arcBright,#arcBright2{fill:none;stroke:var(--accent);stroke-width:2.4;stroke-linecap:round}
  .arcdot{fill:var(--paper);stroke:var(--accent);stroke-width:2.4}
  #playhead,#playhead2{fill:var(--accent)}
  #playglow,#playglow2{fill:var(--accent);opacity:.18}

  /* the line's second run: §04's Outline dot, down the right margin, into §07's circle.
     Same drawing as the first run; script.js hides it where the right margin is too narrow. */
  .arc2{position:relative}
  .anchor-r{display:block;height:0}
  #arcline2{position:absolute;top:0;left:0;width:100%;height:100%;z-index:3;pointer-events:none;overflow:visible}

  /* movements: the numbered "§" body-copy sections (e.g. §01 "Not coverage. Development.") */
  .movement{padding:76px 0;position:relative;z-index:2}
  .movement h2{font-family:var(--disp);font-weight:470;font-size:var(--t-title);line-height:1.06;letter-spacing:-.01em;margin-bottom:24px}
  .movement h2 em{font-style:italic}
  .movement p.txt{font-size:var(--t-body);color:var(--ink-70);margin-bottom:16px}
  /* standfirst: the one-line statement that opens a movement, before the body copy proper */
  /* the rhetorical turn that closes a movement — a short setup line and the line that lands it */
  .turn{margin-top:32px;padding-top:22px;border-top:1px solid var(--hair);position:relative}
  /* a closing line with no rule above it: the essay opening, which has no heading to
     separate it from. Positioned so a note can sit beside the line itself. */
  .closer{position:relative;margin-top:26px}
  /* a handwritten reply tacked onto the end of a line, rather than out in the margin:
     for a note that answers the sentence it follows ("…when it finally fails. or doesn't.") */
  .hand-reply{display:inline-block;margin-left:10px;font-family:var(--hand);font-style:normal;font-weight:500;font-size:var(--t-note);line-height:1;color:var(--ink);transform:rotate(-3deg) translateY(-2px);white-space:nowrap}
  .turn p{font-family:var(--body);font-size:var(--t-body);line-height:1.62;color:var(--ink-70)}
  /* a plain body paragraph inside a turn — the bio's close runs pivot line → explanation → payoff,
     and the explanation would be far too heavy set in the display face like the lines around it */
  .turn p.txt{font-family:var(--body);font-size:var(--t-body);line-height:1.62;color:var(--ink-70);margin:14px 0 0}
  p.hit{font-family:var(--disp);font-style:italic;font-size:var(--t-emph);line-height:1.32;color:var(--accent-deep);margin-top:8px;font-weight:420}
  /* large decorative first letter on the opening paragraph of a movement */
  .dropcap::first-letter{font-family:var(--disp);font-weight:560;font-size:3.5em;line-height:.72;float:left;padding:6px 12px 0 0;color:var(--accent-deep)}
  /* handwritten margin notes that sit beside the reading column (e.g. "no scores. no notes. — a build.") */
  .marg{position:absolute;font-family:var(--hand);color:var(--ink);font-size:var(--t-note);line-height:1.18;width:170px;transform:rotate(-2.5deg);transform-origin:left top}
  .marg.left{right:calc(50% + 427px);text-align:right}
  /* up to 250px wide where the margin allows, so a longer line (Method § 02's "you
     don't have to lie to me.") can stay on one line; on a narrower laptop the note
     shrinks to the space there is and its lines wrap. Wide screens only: below 1240px
     the notes sit in the text column, and there this width works out to zero, which
     stacked every note one word per line. */
  @media (min-width:1241px){
    .marg.left{width:min(250px, calc(50vw - 443px))}
  }
  .marg .accent{color:var(--accent-deep)}
  /* NOT .right — that's the masthead's flex column, and matching it turned every line of
     this note into a separate right-aligned flex item.
     The right margin is free (the throughline owns the left), and wide enough for a
     four-line note. 48px + 240px still clears the viewport at 1241px, just above where
     margin notes drop into the flow. */
  .marg.at-right{left:calc(100% + 48px);text-align:left;width:240px;white-space:nowrap}

  /* pull quote: the large centered italic quote between §01 and §02 */
  .pull{padding:20px 0 24px;position:relative;z-index:2}
  .pull .reading{max-width:760px;text-align:center}
  .pull .rule{height:1px;background:var(--accent);opacity:.5;margin:0 auto;max-width:120px}
  .pull blockquote{font-family:var(--disp);font-weight:420;font-style:italic;font-size:var(--t-emph);line-height:1.32;letter-spacing:-.01em;padding:34px 0}

  /* dusk band: the full-bleed dark green §02 section containing the emotional-intensity curve chart */
  .band{background:var(--dusk);color:var(--paper-dim);padding:80px 0;position:relative;z-index:3}
  .band .smark{justify-content:center}
  .band .smark .bar{background:var(--accent)}
  .band .smark span{color:var(--sage)}
  .band .smark span b{color:#EB7042}  /* label orange on dusk: see the note by .skip */
  /* the three-line statement under the band headline, above the chart */
  .bandlede{font-family:var(--body);font-size:var(--t-body);line-height:1.62;color:var(--paper-dim);text-wrap:balance}  /* even lines, no two-word tail */
  #curve .band-head{margin-bottom:30px}
  /* §02 figure — "the information gap". Two lines over the running time of a story:
     the audience's knowledge (solid paper) against the character's (glow, dashed, because
     what they hold is the part we can't see). Everything here defaults to the FINISHED
     state; script.js adds .is-armed before the first paint to hide it and then removes it
     to play the build. A script that never runs therefore leaves a complete figure rather
     than an empty frame. */
  .ig{max-width:940px;margin:0 auto}
  svg.igfig{width:100%;height:auto;display:block;overflow:visible}
  .axis{font-family:var(--label);font-size:13px;letter-spacing:.14em;text-transform:uppercase;fill:var(--sage)}
  .baseline{stroke:#2E4845;stroke-width:1.4}

  .ig-line{fill:none;stroke-linecap:round;stroke-width:2.4}
  .ig-line.aud{stroke:var(--paper)}
  .ig-line.chr{stroke:var(--glow);stroke-dasharray:7 7;opacity:.85}
  .ig-end{font-family:var(--hand);font-size:25px;fill:var(--paper)}
  .ig-end.chr{fill:var(--glow)}
  .ig-wedge{fill:var(--paper);opacity:.05}

  /* the node marks the gap, not a point on either line */
  .ig-gap{stroke:var(--accent);stroke-width:1.4;opacity:.5;transition:opacity .3s,stroke-width .3s}
  .ig-node{cursor:pointer}
  .ig-node circle.dot{fill:var(--dusk);stroke:var(--accent);stroke-width:2.6;transition:r .3s cubic-bezier(.34,1.56,.64,1),fill .3s}
  .ig-node circle.hit{fill:transparent;stroke:none}
  .ig-node text{font-family:var(--hand);font-size:25px;fill:var(--paper);text-anchor:middle;transition:fill .3s}
  .ig-node:hover circle.dot,.ig-node.on circle.dot{r:9.5;fill:var(--accent)}
  .ig-node:hover text,.ig-node.on text{fill:var(--accent)}
  .ig-node:hover .ig-gap,.ig-node.on .ig-gap{opacity:1;stroke-width:2.2}
  .ig-node:focus{outline:none}
  .ig-node:focus-visible circle.dot{r:9.5;fill:var(--accent)}
  .ig-node:focus-visible text{fill:var(--accent)}

  /* the build, played by removing .is-armed. The sweep reveals both lines at the same
     rate across the time axis, which is the honest reading of a figure about the
     relationship between them — drawing each by path length would run them at
     different speeds. */
  .igsweep-rect{width:1260px}
  .ig-axes{opacity:1}
  #curve.is-armed .igsweep-rect{width:0}
  #curve.is-armed .ig-axes{opacity:0}
  #curve.is-armed .ig-wedge{opacity:0}
  #curve.is-armed .ig-node{opacity:0;transform:scale(.55)}
  .ig-node{opacity:1;transform:scale(1);transform-box:fill-box;transform-origin:center;
    transition:opacity .4s ease .95s,transform .5s cubic-bezier(.34,1.56,.64,1) .95s}
  .ig-nodes .ig-node:nth-child(2){transition-delay:1.04s}
  .ig-nodes .ig-node:nth-child(3){transition-delay:1.13s}
  .igsweep-rect{transition:width 1.4s cubic-bezier(.22,1,.36,1)}
  .ig-axes{transition:opacity .2s ease}
  .ig-wedge{transition:opacity .4s ease .85s}

  /* the reveal under the figure. Height is held so the page never jumps between states. */
  /* held height = the tallest answer (123px) plus a little. The copy is capped at 58ch, so
     that figure is the same at every desktop width; 168px was reserving empty space. */
  .ig-reveal{max-width:940px;margin:16px auto 0;border-top:1px solid #2E4845;padding-top:20px;min-height:132px}

  /* Discoverability. Each dot breathes slowly until someone uses one, and a single
     handwritten hint points at the first. Both stop for good on first use (script.js adds
     .touched). The ring is scaled rather than given a growing r, which Safari won't
     animate; non-scaling-stroke keeps it a hairline as it grows. */
  .ig-node .pulse{fill:none;stroke:var(--accent);stroke-width:1.6;vector-effect:non-scaling-stroke;transform-box:fill-box;transform-origin:center;opacity:0;animation:igPulse 3.6s ease-out 1.8s infinite}
  .ig-nodes .ig-node:nth-child(2) .pulse{animation-delay:3s}
  .ig-nodes .ig-node:nth-child(3) .pulse{animation-delay:4.2s}
  @keyframes igPulse{0%{transform:scale(1);opacity:.65}55%{transform:scale(2.9);opacity:0}100%{transform:scale(2.9);opacity:0}}
  #curve.touched .pulse,.ig-node.on .pulse{animation:none;opacity:0}
  .ig-hint text{font-family:var(--hand);font-size:25px;fill:var(--glow)}
  .ig-hint path{fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .ig-hint{transition:opacity .6s ease 1.6s}
  #curve.is-armed .ig-hint{opacity:0}
  #curve.touched .ig-hint{opacity:0;transition-delay:0s}

  /* §02 runs tighter than the other bands so the heading, graph and answer panel fit
     one laptop screen together */
  #curve{padding:64px 0 60px}
  .ig-state{display:none;grid-template-columns:230px 1fr;gap:44px;align-items:start}
  .ig-state.on{display:grid}
  .ig-term{font-family:var(--label);font-size:var(--t-label);letter-spacing:.18em;text-transform:uppercase;color:var(--accent);line-height:1.9}
  .ig-term span{display:block;color:var(--sage);letter-spacing:.14em}
  .ig-copy p{font-family:var(--body);font-size:var(--t-body);line-height:1.6;color:var(--paper-dim);max-width:58ch;margin:0}
  .ig-copy .ig-felt{font-family:var(--disp);font-style:italic;font-size:var(--t-emph);color:var(--glow);margin-top:14px;line-height:1.32}

  /* the key that stands in for the line-end names on a phone */
  .ig-legend{display:none}
  @media (max-width:760px){
    .ig-end,.ig-node text,.ig-hint text{font-size:34px}
    .axis{font-size:17px}
    .ig-state{grid-template-columns:1fr;gap:16px}
    .ig-reveal{min-height:210px}
  }
  /* after the 760px block on purpose: same selectors, and the phone sizes must win */
  @media (max-width:620px){
    .ig-end{display:none}
    .ig-node text,.ig-hint text{font-size:36px}
    .axis{font-size:28px}
    .ig-legend{display:flex;flex-direction:column;gap:4px;margin:14px 0 0;font-family:var(--hand);font-size:var(--t-note);line-height:1.15}
    .ig-legend span{display:flex;align-items:center;gap:10px}
    .ig-legend span::before{content:"";width:26px;border-top:2px solid var(--paper)}
    .ig-legend .aud{color:var(--paper)}
    .ig-legend .chr{color:var(--glow)}
    .ig-legend .chr::before{border-top:2px dashed var(--glow)}
  }

  .band .figcap{color:var(--sage);border-top-color:#2E4845;max-width:940px;margin:16px auto 0}
  .band .figcap b{color:#EB7042}  /* label orange on dusk: see the note by .skip */


  /* ===========================================================================
     SERVICES (§04) — three ways to work, set as a comparison table.
     The two packaged engagements answer the same five questions in matched rows, so they
     can be read across rather than compared card-against-card. Bespoke work is the third
     way: same left-gutter grammar, but its answer spans both columns instead of choosing
     one, which is the argument for it. The practical terms hold for all three, so that
     block drops the gutter entirely and takes the full measure.
     Sits OUTSIDE .arc — the scroll throughline ends at §03 — so it can use the full width.
     =========================================================================== */
  .ways{--gutter:172px;--wash:rgba(232,94,42,.07);padding:74px 0 86px;position:relative}  /* no z-index: see .bespoke */
  /* section marker on the left, the link through to the method page on the right */
  .whead{display:flex;justify-content:space-between;align-items:flex-end;gap:20px 40px;flex-wrap:wrap;margin-bottom:44px}
  /* §04's H2 sits under its section mark, inside the header row, so "Read the method"
     stays aligned with the mark on the right */
  .whead h2{font-family:var(--disp);font-weight:470;font-size:var(--t-title);line-height:1.06;letter-spacing:-.01em;margin:0}
  /* the handwritten aside at the right end of a header row. Full-width sections have no
     margin to hold a note (the right one belongs to the line), so it sits here instead. */
  .aside-note{font-family:var(--hand);font-size:var(--t-note);line-height:1.15;color:var(--ink);max-width:330px;transform:rotate(-2.5deg);transform-origin:right bottom;margin-bottom:6px}
  .aside-note .accent{color:var(--accent-deep)}
  /* only a mark that sits alone in the row (FAQ, journal-style) loses its margin; a mark
     stacked above a headline keeps the standard 18px, like every other section */
  .whead > .smark{margin-bottom:0}
  .whead.near{justify-content:flex-start}

  /* the table. Negative margin pulls the cell padding back out so the type still aligns
     to the page grid while the wash can bleed past it. */
  /* three ways of working, three columns: the two programmes and custom engagement */
  .ctable{display:grid;grid-template-columns:var(--gutter) 1fr 1fr 1fr;column-gap:6px;margin:0 -20px}
  .c-cell.fee[data-col="2"]{font-style:italic}
  .ctable > *{padding:19px 20px}
  .c-void{padding:0}
  /* the package name, with its detail link alongside — kept up here so it doesn't compete
     with the booking pill at the foot of the column */
  .c-head{padding:19px 20px;border-bottom:2px solid var(--ink);transition:background .3s,border-color .3s;display:flex;justify-content:space-between;align-items:baseline;gap:14px;flex-wrap:wrap}
  .c-head.on{border-bottom-color:var(--accent-deep);background:var(--wash)}
  .c-name{font-family:var(--disp);font-weight:500;font-size:var(--t-subhead);line-height:1.08}
  .c-label{font-family:var(--label);font-size:var(--t-label);letter-spacing:.18em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--hair-soft)}
  .c-cell{font-size:var(--t-small);color:var(--ink-70);border-bottom:1px solid var(--hair-soft);transition:background .3s,color .3s}
  .c-cell.on{background:var(--wash);color:var(--ink)}
  /* what's being compared — where you start, what you leave with — is carried by a few
     bold words, not by a bigger size */
  .c-cell b{font-weight:500;color:var(--ink)}
  .c-cell.fee{font-family:var(--disp);font-weight:500;font-size:var(--t-subhead);color:var(--ink)}
  /* below the breakpoint the two columns interleave into one, so each answer has to name
     its own programme — the column header is gone by then */
  .c-cell::before{content:attr(data-prog);display:none;font-family:var(--label);font-size:var(--t-label);letter-spacing:.18em;text-transform:uppercase;color:var(--accent-deep);margin-bottom:7px}
  .c-act{border-bottom:0;padding:26px 20px;transition:background .3s}
  .c-act.on{background:var(--wash)}
  /* the detail link lives in the header on desktop and in the action cell below the
     breakpoint, where the header is hidden — only ever one of the two is rendered */
  /* the decision point: booking and details side by side, the button leading */
  .c-act{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
  .c-act .see{display:inline-block}
  /* the site pill, scaled down — full size is too heavy repeated across two table columns */
  .c-act .btn{padding:12px 24px}

  /* where the running line crosses § 04, from the left margin to the right (script.js). An empty
     band above the heading so the crossing passes over no type; .waystart is the point where
     the first run ends and the second begins. */
  .waysline{position:relative;height:74px}  /* the old strip's height, so the heading sits where it did */
  .waystart{position:absolute;left:calc(var(--gutter) + 90px);top:-60px;width:0;height:0}  /* in from the margin line for a wide, round turn; up in the empty space above § 04 so the turn down to its stop can be as round */
  /* Between the table's narrowest desktop layout and the width where the margin opens up on its
     own, § 04 to § 07 run almost edge to edge, which left the line nowhere to go down the right.
     Bringing those sections in a little on both sides gives it its margin back. */
  @media (min-width:941px) and (max-width:1199px){ .arc2 .wrap{padding:0 76px} }

  /* bespoke work — the third way. No fee and no pill: an offer, not a package. */
  /* set apart from the two packages: a generous gap plus a rule across the same measure as
     the table, so it reads as a different kind of offer rather than a third table row */
  /* custom engagement: a full-bleed dusk band straight after the plans, so it reads as a
     separate offer rather than a third column. .on is the §04 hover (it lights the whole
     idea -> outline curve, since a custom engagement can span all of it). */
  /* RULE: dusk grounds sit in front of the running line, which passes behind them and
     reappears below — as it does under §02. Here that needs a z-index above the line's 3,
     which is only possible because .ways above no longer makes its own stacking layer. */
  /* ...and the same for §04's .wrap, which (like every .wrap) sets z-index:1 and would
     otherwise trap the band below the line all the same */
  #services > .wrap{z-index:auto}
  /* the dusk ground under the table: the practical things (custom engagement is the
     table's third column now). The .bespoke-* rules below are unused since then. */
  .bespoke{background:var(--dusk);margin-top:56px;padding:46px 0 54px;z-index:4}
  .bespoke-in{display:flex;justify-content:space-between;align-items:flex-end;gap:36px 56px;flex-wrap:wrap}
  .bespoke-copy{max-width:62ch}
  .bespoke-copy h3{font-family:var(--disp);font-weight:500;font-size:var(--t-subhead);line-height:1.2;color:var(--paper);margin-bottom:12px}
  .bespoke-copy p{font-size:var(--t-body);color:var(--paper-dim)}
  .bespoke-copy .note{font-family:var(--disp);font-weight:420;font-style:italic;font-size:var(--t-emph);line-height:1.32;color:var(--glow);margin-top:14px}
  .bespoke-act{flex-shrink:0;display:flex;flex-direction:column;align-items:flex-start;gap:18px}
  .bespoke-act .see{color:var(--glow);border-bottom-color:var(--accent)}
  /* .btn's hover is ink, which disappears on dusk */
  .bespoke .btn:hover{background:var(--paper);color:var(--ink)}

  /* the conditions, holding for all three ways. They sit on the dusk ground under the
     custom engagement, so the palette below is the band's (overrides follow). */
  .practical{margin-top:78px;border-top:2px solid var(--ink);padding-top:24px}
  .practical-head{display:flex;align-items:baseline;gap:16px;margin-bottom:28px;flex-wrap:wrap}
  .practical-head h3{font-family:var(--disp);font-weight:500;font-size:var(--t-subhead)}
  .practical-head span{font-family:var(--label);font-size:var(--t-label);letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
  .practical-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:44px}
  .practical-grid p{font-size:var(--t-small);color:var(--ink-70);max-width:36ch}
  .practical-note{margin-top:34px;padding-top:22px;border-top:1px solid var(--hair-soft);font-family:var(--disp);font-style:italic;font-size:var(--t-emph);color:var(--accent-deep);line-height:1.32}
  .bespoke .practical{margin-top:0;border-top:0;padding-top:0}
  .bespoke .practical-head h3{color:var(--paper)}
  .bespoke .practical-head span{color:var(--sage)}
  .bespoke .practical-grid p{color:var(--paper-dim)}
  .bespoke .practical-note{border-top-color:#2E4845;color:var(--glow)}

  /* --- service DETAIL pages (foundation.html / structure.html) ------------------------- */
  .svcarc{font-family:var(--label);font-size:var(--t-label);letter-spacing:.18em;text-transform:uppercase;color:var(--accent-deep);margin-top:10px}
  .svck{font-family:var(--label);font-size:var(--t-label);letter-spacing:.18em;text-transform:uppercase;color:var(--muted);padding-bottom:8px;margin-bottom:14px;border-bottom:1px solid var(--hair-soft)}

  /* ---- detail pages: the session timeline ------------------------------------------
     The strip is the shape at a glance: one dot per session at its week, the gaps
     written in above the line in hand. Positions are fractions of the programme's
     length (--span weeks), so the gaps are drawn to scale. */
  .tl-strip{position:relative;height:104px;margin:30px 0 40px}
  .tl-line{position:absolute;left:0;right:0;top:48px;height:2px;background:var(--hair)}
  .tl-gap{position:absolute;top:6px;left:calc((var(--a) + var(--b)) / 2 / var(--span) * 100%);transform:translateX(-50%) rotate(-2deg);font-family:var(--hand);font-weight:500;font-size:var(--t-note);line-height:1;color:var(--accent-deep);white-space:nowrap}
  /* labels hang off the left of their dot, like flags, rather than centring under it:
     stops a week apart (Analysis and Grid) get the room between them. The -7px puts the
     dot's centre on the week. The last stop hangs right, so it ends at the line's end. */
  .tl-stop{position:absolute;top:42px;left:calc(var(--w) / var(--span) * 100%);transform:translateX(-7px);display:flex;flex-direction:column;align-items:flex-start;text-align:left;white-space:nowrap}
  .tl-stop.first{transform:none}
  .tl-stop.last{transform:translateX(-100%);align-items:flex-end;text-align:right}
  .tl-stop i{display:block;width:14px;height:14px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 5px var(--paper)}
  .tl-stop b,.tl-stop span{font-family:var(--label);font-size:var(--t-label);letter-spacing:.18em;text-transform:uppercase;font-weight:400}
  .tl-stop b{color:var(--muted);margin-top:14px}
  /* names a touch tighter than the label role's .18em: a week is only 82px on The
     Structure's strip, and Analysis has to clear Grid */
  .tl-stop span{color:var(--ink);margin-top:3px;letter-spacing:.1em}

  /* the same sessions in full: week on the left, the session on the right. Each one ends
     with the writer's own stretch before the next session, and how long it gets. */
  .sess{display:grid;grid-template-columns:112px 1fr;gap:0 28px}
  .sess{padding:26px 0 28px;border-top:1px solid var(--hair)}
  .sess-when{font-family:var(--label);font-size:var(--t-label);letter-spacing:.18em;text-transform:uppercase;color:var(--muted);padding-top:6px}
  .sess-n{display:block;font-family:var(--disp);font-weight:470;font-size:var(--t-subhead);letter-spacing:0;color:var(--accent-deep);line-height:1;margin-bottom:8px}
  .sess h3{font-family:var(--disp);font-weight:470;font-size:var(--t-subhead);line-height:1.2;margin-bottom:6px}
  .sess-k{font-family:var(--label);font-size:var(--t-label);letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin:16px 0 6px}
  .sess-room{list-style:none;margin:0;padding:0}
  .sess-room li{position:relative;padding-left:18px;font-size:var(--t-body);line-height:1.5;color:var(--ink-70);margin-bottom:5px}
  .sess-room li::before{content:"–";position:absolute;left:0;color:var(--accent)}
  .sess-body p{font-size:var(--t-body);line-height:1.6;color:var(--ink-70)}
  /* the worked example: quieter than the session copy, marked off by a rule down its side */
  .sess-body p.sess-eg{margin-top:16px;padding-left:16px;border-left:2px solid var(--accent);font-size:var(--t-small);line-height:1.55}
  .sess-eg > span{display:block;font-family:var(--label);font-size:var(--t-label);letter-spacing:.18em;text-transform:uppercase;color:var(--accent-deep);margin-bottom:4px}
  .sess-eg > span em{font-style:italic}
  .sess-eg .see{display:inline-block;margin-left:6px}
  /* "On your own": set off from the session by a dashed rule, because it is the writer's
     time rather than the room's; the length is handwritten, as on the strip */
  .sess-k.own{margin-top:22px;padding-top:16px;border-top:1px dashed var(--hair)}
  .sess-dur{font-family:var(--hand);font-weight:500;font-size:var(--t-note);letter-spacing:0;text-transform:none;color:var(--accent-deep);margin-left:12px;display:inline-block;transform:rotate(-2deg)}
  .sessions{border-bottom:1px solid var(--hair)}

  /* booking card. .booktrack wraps § 01 to § 04; the card's box runs from § 01's label
     (top = the section's padding) to the end of § 04, in the right margin, and the card
     sticks inside it, parking just above the closing call to book. Its .reading wrapper is un-positioned here so the track is
     the box it hangs off. z-index lifts it over the sections, which would otherwise sit
     on top of the button and take its clicks. */
  .booktrack{position:relative}
  .reading.bookrow{position:static}
  .bookside{position:absolute;top:52px;bottom:0;left:calc(50% + 330px + 64px);width:200px;z-index:3}
  .bookside-in{position:sticky;top:110px;border-top:1px solid var(--ink);padding-top:16px}
  .bookside-k{font-family:var(--label);font-size:var(--t-label);letter-spacing:.18em;text-transform:uppercase;color:var(--accent-deep)}
  .bookside-in p{font-size:var(--t-small);line-height:1.45;color:var(--ink-70);margin:10px 0 0}
  .bookside-price{font-family:var(--disp);font-weight:500;font-size:var(--t-subhead);color:var(--ink);margin:10px 0 18px}
  /* Klarna, under the Foundation and Structure prices (table and booking card). A line of small
     body type with Klarna's wordmark in ink. The wordmark is set in type as a stand-in until the
     official black logo from Klarna's brand kit replaces it. Phones drop to plain words (below). */
  .klarna{display:block;font-family:var(--body);font-size:var(--t-small);font-weight:400;font-style:normal;line-height:1.35;color:var(--ink-70);margin-top:6px}
  .kl-mark{font-family:-apple-system,"Helvetica Neue",Arial,sans-serif;font-weight:800;font-size:.95em;letter-spacing:-.02em;color:var(--ink)}

  /* § 01 on the detail pages: what you walk in with, one row each */
  .startlist{list-style:none;margin:6px 0 0;padding:0;border-bottom:1px solid var(--hair)}
  .startlist li{font-size:var(--t-body);line-height:1.5;color:var(--ink-70);padding:13px 0;border-top:1px solid var(--hair)}
  .startlist b{font-weight:500;color:var(--ink)}

  /* the end of the detail pages: § 04 and the links across to the other pages on one
     dusk ground, in the band palette. The call to book follows on paper. */
  .duskend{background:var(--dusk);position:relative;z-index:2}
  .duskend .smark span{color:var(--sage)}
  .duskend .smark span b{color:#EB7042}  /* label orange on dusk: see the note by .skip */
  .duskend h2{color:var(--paper)}
  .duskend .movement p.txt{color:var(--paper-dim)}
  .duskend .turn{border-top-color:#2E4845}
  .duskend .turn p{color:var(--paper-dim)}
  .duskend p.hit{color:var(--glow)}
  .duskend .nextway{padding:0 0 56px}
  .duskend .nextway .see{color:var(--glow)}

  /* how it runs: three short columns */
  .howrun{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:8px}
  .howrun p{font-size:var(--t-small);line-height:1.55;color:var(--ink-70)}
  .nextway{padding:6px 0 0;position:relative;z-index:2}
  .nextway .reading{display:flex;gap:22px 34px;flex-wrap:wrap;justify-content:space-between}

  /* §06 bio: portrait beside the text. The hero runs text-left / photo-right, so this one is
     mirrored — photo left — and the two portrait moments rhyme instead of reading as a repeat.
     Sits outside .arc, so it can go wider than the 660px reading column without hitting the throughline. */
  /* no max-width of its own: §05 tracks .wrap so its left edge lines up with §04, §06
     and §08. It used to sit at 920px, which read as an unexplained indent. */
  .bioinner{margin:0 auto}
  .biogrid{display:grid;grid-template-columns:300px 1fr;gap:54px;align-items:start;margin-top:30px}
  .bioframe{position:relative;width:100%}
  .bioframe .stage{position:relative}
  /* this shot is landscape (1.49) in a ~0.88 portrait frame, so cover fills the height and crops
     the sides — only the horizontal focal point does any real work here. */
  .bioframe .art{position:absolute;inset:6.5% 6% 6% 7%;background-image:var(--photo-bio);background-size:cover;background-position:54% 28%;filter:saturate(1.08) brightness(1.01)}
  .biotext > :first-child{margin-top:0}
  #about .biogrid{margin-top:0}

  /* closing CTA (§07): centred, capped by the terminal dot that used to end the page */
  .start{padding:64px 0 60px;position:relative;z-index:2}
  .start .reading{max-width:640px;text-align:center}
  .start .smark{justify-content:center}
  .term{width:14px;height:14px;border:2.4px solid var(--accent);border-radius:50%;background:var(--paper);margin:0 auto 30px}
  .start h2{font-family:var(--disp);font-weight:470;font-size:var(--t-title);line-height:1.06;letter-spacing:-.01em;margin-bottom:22px;text-wrap:balance}
  /* balance keeps these short centred paragraphs from dropping a single orphaned word onto the last line */
  .start p{font-size:var(--t-body);color:var(--ink-70);margin:0 auto 14px;max-width:52ch;text-wrap:balance}
  .start .btn{margin-top:28px}

  /* ===========================================================================
     METHOD PAGE (method.html) — the long-form essay. Everything above is shared;
     this block is only what the essay layout adds on top of it.
     =========================================================================== */

  /* wordmark doubles as the home link on sub-pages (it is a plain div on the landing page) */
  .mark{text-decoration:none;color:inherit;display:block}
  /* the nav item for the page you are on keeps its underline drawn */
  nav a.link.current::after{width:100%}

  /* essay sections sit closer together than landing-page sections — there are nine of them,
     and the landing page's 76px rhythm turns a continuous read into a lot of empty scrolling */
  .essay .movement{padding:52px 0}

  /* title block above the opening section */
  .essayhead{padding:52px 0 0;position:relative;z-index:2}
  .essayhead h1{font-family:var(--disp);font-weight:470;font-size:var(--t-display);line-height:.98;letter-spacing:-.015em}
  .essayhead .rule{height:1px;background:var(--hair);margin-top:32px}

  /* LEGAL PAGES (terms.html, privacy.html): the essay title block, then plain reading text. */
  .legal{padding:34px 0 96px}
  .legal .eff{font-family:var(--label);font-size:var(--t-label);letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin:0 0 26px}
  .legal h2{font-family:var(--disp);font-weight:500;font-size:var(--t-subhead);line-height:1.2;color:var(--ink);margin:46px 0 12px}
  .legal p,.legal li{font-size:var(--t-body);line-height:1.6;color:var(--ink-70)}
  .legal p{margin:0 0 14px}
  .legal ul{margin:0 0 14px;padding-left:1.2em}
  .legal li{margin:0 0 8px}
  .legal b{font-weight:500;color:var(--ink)}
  .legal a{color:var(--accent-deep);text-underline-offset:3px}
  .legal-table{overflow-x:auto;margin:6px 0 18px}
  .legal table{width:100%;border-collapse:collapse;font-size:var(--t-small);line-height:1.45}
  .legal th{text-align:left;font-family:var(--label);font-size:var(--t-label);font-weight:400;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);padding:0 14px 9px 0;border-bottom:1px solid var(--ink)}
  .legal td{padding:11px 14px 11px 0;border-bottom:1px solid var(--hair-soft);color:var(--ink-70);vertical-align:top}
  .legal td:first-child{color:var(--ink);white-space:nowrap}
  @media (max-width:620px){
    /* phones: each row becomes a small block, the service or item as its heading */
    .legal thead{display:none}
    .legal table,.legal tbody,.legal tr,.legal td{display:block}
    .legal tr{padding:12px 0;border-bottom:1px solid var(--hair-soft)}
    .legal tr:first-child{border-top:1px solid var(--ink)}
    .legal td{padding:0;border:0}
    .legal td:first-child{white-space:normal;font-weight:500;margin-bottom:3px}
    .legal td + td + td{margin-top:4px;color:var(--muted)}
  }

  /* the questions the method keeps returning to — "Why this story?", "Did you mean for them to feel
     that?" — set as display italic so they read as a refrain rather than as body copy */
  .bigq{font-family:var(--disp);font-style:italic;font-weight:420;font-size:var(--t-emph);line-height:1.32;letter-spacing:-.01em;color:var(--accent-deep);margin:26px 0 22px;text-wrap:balance}
  .band .bigq{color:var(--glow);text-align:center;max-width:22ch;margin:34px auto 0}

  /* body copy inside the dusk band, between the centred head and the closing question */
  .bandbody{max-width:600px;margin:32px auto 0}
  .bandbody p{font-size:var(--t-body);color:var(--paper-dim);margin-bottom:14px}

  /* the grid figure (Fig. 03) breaks out wider than the reading column — this page has no scroll
     throughline, so unlike the landing page there is nothing in the left margin to collide with */
  .figwide{max-width:1040px;margin:36px auto 34px;padding:0 22px}
  /* §06: the figure now follows the section's closing line, so it needs a clear break
     from the copy above it rather than reading as one more paragraph */
  #grid .figwide{margin:64px auto 0}
  /* the table keeps its shape on small screens by scrolling inside itself rather than being
     crushed into unreadable columns — the point of the figure is that it IS a table */
  /* Eight columns in three groups — the action, the characters, the emotional effect —
     with the sequence number leading. It scrolls sideways below its min-width rather
     than reflowing: collapsing the columns would destroy the one thing the figure is
     for, which is showing that every sequence answers the same set of questions.
     It lives on the dusk band, so the palette here is the band's. */
  /* This band keeps the method page's left-aligned section furniture rather than the
     landing page's centred band heading. Both of these undo .band rules written for
     §02 on the landing page, where the whole heading block is centred. */
  #grid .smark,#curve .smark{justify-content:flex-start}
  #grid .bigq{text-align:left;max-width:none;margin:26px 0 22px}

  /* one handwritten hint under the live row, its arrow curling up into a cell: the same
     device as §02's "hover the dots", and it behaves the same way (fades out while the
     grid is in use, back 600ms after). The bottom padding is the room it lives in. */
  .gridfig{position:relative;padding:0 0 66px}
  .ghint{position:absolute;bottom:10px;left:22%;padding-left:52px;font-family:var(--hand);font-size:var(--t-note);line-height:1.14;color:var(--glow);white-space:nowrap;transform:rotate(-1.4deg);transform-origin:left top;transition:opacity .6s ease}
  .ghint svg{position:absolute;left:0;bottom:12px;width:50px;height:58px;fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
  .gridfig.touched .ghint{opacity:0}

  .gridscroll{overflow-x:auto}
  .gridtable{border-top:2px solid var(--sage);min-width:940px}
  .gridrow{display:grid;grid-template-columns:1.2fr 1.5fr 1.2fr 1.05fr 1.05fr 1.1fr 1.15fr;gap:18px;padding:13px 0;border-bottom:1px solid #2E4845;align-items:baseline}
  .gridrow.group{border-bottom:2px solid var(--sage);padding:9px 0 7px}
  .gridrow.group div{font-family:var(--label);font-size:var(--t-label);letter-spacing:.18em;text-transform:uppercase;color:var(--sage)}
  .g-act{grid-column:1 / span 3}
  .g-chr{grid-column:4 / span 2}
  .g-emo{grid-column:6 / span 2}
  /* rules down the two group boundaries, pulled half into the gap so they sit between
     the columns rather than crowding the cell they belong to */
  .gridrow > *:nth-child(4),.gridrow > *:nth-child(6),
  .gridrow.group .g-chr,.gridrow.group .g-emo{border-left:1px solid #2E4845;padding-left:18px;margin-left:-9px}
  /* NOT .head: generic names collide inside the bands — a .band .head rule once capped
     this row at 680px and centred it, throwing every column out of line. */
  .gridrow.colhead div{font-family:var(--label);font-size:var(--t-label);letter-spacing:.18em;text-transform:uppercase;color:var(--sage)}
  .gridrow .cell{font-size:var(--t-small);line-height:1.46;color:var(--paper-dim)}
  /* the one live row: each cell is a target that fills itself in below */
  .gridrow.live{border-bottom:0;padding:20px 0 16px}
  .gridrow.live .cell{cursor:pointer;transition:color .25s ease}
  .gridrow.live .cell:hover,.gridrow.live .cell.on{color:var(--glow)}
  /* every cell that isn't showing brightens a little, one after another, left to right,
     then rests: the grid's version of §02's pulsing dots. The peak stops short of the
     full glow of the selected cell, so a pulse never reads as a selection. Off while the
     grid is in use. */
  .gridrow.live .cell:not(.on){animation:gridPulse 5.2s ease-in-out 1.8s infinite}
  .gridrow.live .cell:nth-child(3){animation-delay:2.15s}
  .gridrow.live .cell:nth-child(4){animation-delay:2.5s}
  .gridrow.live .cell:nth-child(5){animation-delay:2.85s}
  .gridrow.live .cell:nth-child(6){animation-delay:3.2s}
  .gridrow.live .cell:nth-child(7){animation-delay:3.55s}
  @keyframes gridPulse{0%{color:var(--paper-dim)}12%{color:color-mix(in srgb,var(--glow) 60%,var(--paper-dim))}30%{color:var(--paper-dim)}100%{color:var(--paper-dim)}}
  .gridfig.touched .gridrow.live .cell{animation:none}
  .gridrow.live .cell:focus{outline:none}
  .gridrow.live .cell:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

  /* the fill-in under the grid. Height held so nothing below moves between cells. */
  /* 128px holds the tallest state ("What happens", 115px) with a little headroom. The copy
     measure is capped at 62ch, so the tallest state is the same height anywhere from
     800px up and one value covers the whole desktop range. */
  /* no rule above it: the table already carries three, and a fourth plus the caption's
     made the figure read as a stack of strips. Space does the separating instead. */
  .gridreveal{margin-top:14px;padding-top:0;min-height:128px}
  .gr-state{display:none;grid-template-columns:220px 1fr;gap:40px;align-items:start}
  .gr-state.on{display:grid}
  .gr-term{font-family:var(--label);font-size:var(--t-label);letter-spacing:.18em;text-transform:uppercase;color:var(--accent);line-height:1.9}
  .gr-term span{display:block;color:var(--sage);letter-spacing:.14em}
  .gr-copy p{font-family:var(--body);font-size:var(--t-body);line-height:1.6;color:var(--paper-dim);max-width:62ch;margin:0}

  /* the caption belongs to the figure, so it tracks the figure's width rather than the
     .band .figcap default, which is sized for the landing page's §02 chart */
  .figwide .figcap{max-width:none;margin:16px 0 0}
  /* the caption is the figure's title here, above the table, so you know what you are
     looking at before touching it */
  #grid .gridtitle{border-top:0;padding-top:0;margin:0 0 16px}

  /* §06 on the method page puts reading-column copy on the dusk ground */
  /* one colour for the whole heading: the italic em used to take --glow, which split
     "The grid." into two. It inherits --paper now and the italic carries the emphasis. */
  /* §06 on the method page is a band, not a .movement, so .movement h2 never reached this
     heading and it fell back to the browser's default H2 size. It takes the title role
     explicitly. */
  .band .reading h2{font-family:var(--disp);font-weight:470;font-size:var(--t-title);line-height:1.06;letter-spacing:-.01em;margin-bottom:24px;color:var(--paper)}
  .band .reading h2 em{font-style:italic}
  /* the margin matters: .movement p.txt spaces paragraphs, but this is a band, so
     without it §06's paragraphs ran together into one block */
  .band .reading p.txt{color:var(--paper-dim);margin-bottom:16px}
  .band .reading .turn{border-top-color:#2E4845}
  .band .reading .turn p{color:var(--paper-dim)}
  .band .reading .turn p.hit{color:var(--glow)}

  @media (max-width:980px){
    /* below this the table scrolls sideways, so an arrow into a cell may point at one
       that's off-screen: the hint goes back to being a plain line under the table */
    .gridfig{padding:0}
    .ghint{position:static;padding:0;margin:14px 0 18px;transform:none}
    .ghint svg{display:none}
  }
  .gr-short{display:none}
  @media (max-width:760px){
    .gr-state{grid-template-columns:1fr;gap:14px}
    /* held height released on touch: there is no hovering pointer to protect here, and
       reserving ~300px of empty space for the tallest state isn't worth it */
    .gridreveal{min-height:0}
  }

  /* ===========================================================================
     REVIEWS (§06) — three quotes across, on the same hairline-topped grid idiom as
     §04's practical notes so the page keeps one vocabulary for "row of short items".
     .rev-flag marks unreplaced placeholder copy; it is meant to be conspicuous and
     deleted, never styled to blend in.
     =========================================================================== */
  .reviews{padding:70px 0 76px;position:relative;z-index:2}
  .rev-flag{font-family:var(--label);font-size:var(--t-label);letter-spacing:.18em;text-transform:uppercase;color:var(--accent-deep);border:1px dashed var(--accent);padding:9px 14px;margin-bottom:34px;display:inline-block}
  .revgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:44px}
  .rev{display:flex;flex-direction:column;border-top:2px solid var(--ink);padding-top:20px}
  /* the quotes are set in the body serif, in ink (Mike, 2026-10-07): orange italic stays reserved
     for a section's closing line. One orange mark opens each quote, hanging in the margin, and
     one closes it; line-height:0 keeps the big closing mark from opening up its line. */
  .rev-quote{font-family:var(--body);font-style:normal;font-weight:400;font-size:var(--t-body);line-height:1.55;color:var(--ink);position:relative;margin-bottom:22px}
  .rev-quote::before{content:"\201C";position:absolute;left:-.55em;top:-.12em;font-family:var(--disp);font-size:2.2em;line-height:1;color:var(--accent)}
  .rev-quote::after{content:"\201D";position:relative;top:.42em;margin-left:.06em;font-family:var(--disp);font-size:2.2em;line-height:0;color:var(--accent)}
  .rev-by{font-family:var(--label);font-size:var(--t-label);letter-spacing:.18em;text-transform:uppercase;color:var(--muted);background:none;margin-top:auto;padding-top:14px;border-top:1px solid var(--hair-soft)}

  /* ===========================================================================
     JOURNAL (§08) — hand-maintained Substack post cards. No runtime fetch, so it
     works on any static host; adding a post means copying one .post block.
     =========================================================================== */
  .journal{padding:66px 0 78px;position:relative;z-index:2;background:var(--dusk)}
  /* §08 on the dusk ground: the band palette, as on §02 and the custom engagement */
  .journal .smark span{color:var(--sage)}
  .journal .smark span b{color:#EB7042}  /* label orange on dusk: see the note by .skip */
  .journal .whead h2{color:var(--paper)}
  .journal .see{color:var(--glow)}
  /* each card framed in the paper colour, faint at rest and brighter on hover, with the titles a
     step smaller (1.18rem) so long ones don't crowd the cards (Mike chose option A1, 2026-10-08) */
  .journal .postgrid{gap:22px}
  .journal .post{border:1px solid rgba(242,238,228,.28);border-radius:6px;padding:22px 24px;transition:border-color .2s}
  .journal .post:hover{border-color:rgba(242,238,228,.7)}
  .journal .post-title{font-size:1.18rem;line-height:1.22}
  .journal .post-ex{margin-top:10px}
  .journal .post-date{color:var(--sage)}
  .journal .post-title a{color:var(--paper)}
  .journal .post-title a:hover{color:var(--glow)}
  .journal .post-ex{color:var(--paper-dim)}
  .postgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:48px 44px}
  .post{display:flex;flex-direction:column;border-top:1px solid var(--ink);padding-top:18px}
  .post-date{font-family:var(--label);font-size:var(--t-label);letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
  .post-title{font-family:var(--disp);font-weight:500;font-size:var(--t-subhead);line-height:1.18;margin-top:10px}
  .post-title a{text-decoration:none;transition:color .2s ease}
  .post-title a:hover{color:var(--accent-deep)}
  .post-ex{font-size:var(--t-small);color:var(--ink-70);margin-top:12px}
  /* auto margin keeps the read links aligned across cards of unequal length */
  .post .see{margin-top:auto;padding-top:20px;align-self:flex-start}

  /* ===========================================================================
     CLOSING CTA — the last word before the footer. Deliberately leaner than §07:
     no section marker, no terminal dot, just the action and the reassurance.
     =========================================================================== */

  /* ===========================================================================
     FAQ — sits below the booking CTA on index.html, foundation.html, structure.html.
     Built on native <details>/<summary>: no JS, keyboard-operable and screen-reader
     friendly for free. Collapsed by default because fourteen open answers would
     dwarf the page above them.
     =========================================================================== */
  .faq{padding:66px 0 88px;position:relative;z-index:2;border-top:1px solid var(--hair)}
  /* likewise tracks .wrap, so the FAQ's rules and questions start on the same line as
     the sections above it. The answer copy keeps its own measure below — aligning the
     margins shouldn't stretch running prose to 120 characters. */
  .faqinner{margin:0 auto}
  .faqgroup{margin-top:46px}
  .faqgh{font-family:var(--disp);font-weight:500;font-size:var(--t-subhead);color:var(--ink);padding-bottom:12px;border-bottom:2px solid var(--ink)}

  .faqitem{border-bottom:1px solid var(--hair-soft)}
  .faqitem summary{list-style:none;cursor:pointer;font-family:var(--disp);font-weight:500;font-size:var(--t-body);line-height:1.36;color:var(--ink);padding:19px 42px 19px 0;position:relative;transition:color .2s ease}
  /* strip the default disclosure triangle in every engine, then supply our own marker */
  .faqitem summary::-webkit-details-marker{display:none}
  .faqitem summary::marker{content:""}
  .faqitem summary:hover{color:var(--accent-deep)}
  .faqitem summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
  .faqitem summary::after{content:"+";position:absolute;right:4px;top:19px;font-family:var(--label);font-size:1.05rem;line-height:1.36;color:var(--accent)}
  .faqitem[open] summary{color:var(--accent-deep)}
  .faqitem[open] summary::after{content:"–"}
  .faqa{padding:0 42px 24px 0}
  /* One colour for the whole answer. The opening line used to be set in full ink as a
     lede, with the rest at --ink-70; inside an open answer that read as two different
     fonts rather than as emphasis. */
  .faqa p{font-size:var(--t-body);color:var(--ink);margin-bottom:12px;max-width:72ch}
  .faqa p:last-child{margin-bottom:0}

  /* ===========================================================================
     SITE FOOTER — brand, page links, elsewhere, and the legal base line.
     Shared verbatim across all four pages.
     =========================================================================== */
  body > footer{background:var(--dusk);color:var(--sage);padding:54px 0 40px}
  .footgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:44px}
  .footbrand{position:relative;padding-left:36px}
  .footbrand .logo{position:absolute;left:0;top:-2px;height:44px;width:auto;color:var(--paper)}
  .footbrand .name{font-family:var(--disp);font-weight:560;font-size:1.28rem;color:var(--paper);line-height:1}
  .footbrand .name .tm{font-size:.62em;vertical-align:super;font-weight:400}
  .footsub{font-family:var(--label);font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;color:var(--sage);margin-top:8px}
  .footline{font-family:var(--label);font-size:var(--t-label);letter-spacing:.18em;text-transform:uppercase;color:var(--sage);margin-top:20px}
  .footnav{display:flex;flex-direction:column;align-items:flex-start;gap:9px}
  .footk{font-family:var(--label);font-size:var(--t-label);letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin-bottom:4px}
  .footnav a{font-family:var(--body);font-size:var(--t-small);color:var(--paper-dim);text-decoration:none;transition:color .2s ease}
  .footnav a:hover{color:var(--paper)}
  /* the footer's one CTA. .btn supplies the pill; these win back what .footnav a would
     otherwise take (it is the more specific selector), and swap the hover — .btn's
     ink-on-hover is all but invisible against the dusk ground down here. */
  .footnav a.footbtn{font-family:var(--disp);font-size:var(--t-body);color:var(--ink);padding:11px 22px;margin-top:2px}
  .footnav a.footbtn:hover{background:var(--paper);color:var(--ink)}
  .footrule{height:1px;background:#2E4845;margin:44px 0 22px}
  .footbase{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 14px;font-family:var(--label);font-size:var(--t-label);letter-spacing:.18em;text-transform:uppercase;color:var(--sage)}
  .footbase .dot{color:var(--accent)}
  /* the legal pair pushes to the far end on wide screens and wraps under on narrow */
  .footlegal{margin-left:auto;display:flex;gap:10px;align-items:baseline}
  .footlegal a{color:var(--sage);text-decoration:none;border-bottom:1px solid transparent;transition:color .2s ease,border-color .2s ease}
  .footlegal a:hover{color:var(--paper);border-bottom-color:var(--accent)}

  /* Pushed clear of the throughline, the margin notes need more room than the page has
     below ~1240px, so they drop into the flow well before they could clip. */
  /* ---------------------------------------------------------------------------
     LAPTOP BAND. On a 13"/14" screen the fixed vertical padding eats a far larger
     share of the viewport than it does on a desktop monitor, and the page reads as
     over-spaced. This trims the vertical rhythm by roughly a quarter — nothing
     horizontal, no type sizes, so the layout is identical, just less air. The
     height clause catches a short window on a big monitor, which has the same
     problem for the same reason.
     --------------------------------------------------------------------------- */
  @media (max-width:1560px), (max-height:1040px){
    .hero{padding:44px 0 34px}
    .filing{margin-bottom:32px}
    .hero-grid{gap:46px}
    .movement{padding:56px 0}
    .band{padding:60px 0}
    #curve{padding:44px 0 40px}
    .bandbody{margin-top:24px}
    .ways{padding:56px 0 64px}
    .whead{margin-bottom:34px}
    .biogrid{margin-top:24px}
    .turn{margin-top:24px;padding-top:18px}
    .reviews{padding:54px 0 58px}
    .rev-quote::before{left:-.45em}
    .start{padding:50px 0 46px}
    .journal{padding:50px 0 58px}
    .journal .postgrid{gap:16px}
    .faq{padding:50px 0 64px}
    .faqgroup{margin-top:34px}
    body > footer{padding:42px 0 32px}
    /* the essay pages run tighter to begin with, so they get a lighter trim */
    .essay .movement{padding:40px 0}
    .bookside{top:40px}
    .essayhead{padding:40px 0 0}
    .figwide{margin:28px auto 26px}
    #grid .figwide{margin:52px auto 0}
    /* .gridfig is deliberately NOT trimmed: its padding is the space the handwritten
       notes and their arrows live in, not page rhythm. Taking it to 62px put the
       "three axes across" arrow 9px through the group row. */
  }

  @media (max-width:1240px){
    .bookside{position:static;width:auto;margin:0}
    .bookside-in{position:static;display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 22px}
    .bookside-in p,.bookside-price{margin:0}
    .bookside-in p br{display:none}
    .bookside-in .btn{margin-left:auto}
    .marg{position:static;width:auto;text-align:left!important;margin:16px 0 0;font-size:var(--t-note);white-space:normal}
  }

  /* tablet breakpoint: stack hero into one column, margin notes become inline, hide the
     scroll throughline. The hero stays text-first: with the photo on top, the booking
     button landed a full screen down on a phone (phase 5). */
  @media (max-width:940px){
    .hero-grid{grid-template-columns:1fr;gap:44px}
    .marg{position:static;width:auto;text-align:left!important;margin:16px 0 0;font-size:var(--t-note);white-space:normal}
    #arcline,#arcline2{display:none}
    .revgrid,.postgrid{grid-template-columns:1fr;gap:36px}
    .footgrid{grid-template-columns:1fr 1fr;gap:34px}
    /* .reading sits directly in its section rather than inside .wrap, so it needs its own gutter
       once the viewport gets near its 660px cap — without this, body copy touches the screen edge. */
    .reading{padding:0 22px}
    /* …except where the column already sits inside a .wrap (§02's heading), which has
       its own gutter: the two stacked to 44px and put the text out of line with the
       graph under it */
    .wrap .reading{padding:0}
    /* the comparison table regroups into one card per programme (phase 5): read row by
       row on a phone it alternated Foundation, Structure, Foundation… for 2,800px. Each
       column's pieces are pulled together with order, the row labels go, and each answer
       carries its own row name (data-row) instead of the programme name. */
    .ctable{grid-template-columns:1fr;margin:0}
    .ctable > *{padding:14px 0}
    .waysline{display:none}  /* no running line at this width, so no band to keep clear */
    .c-void,.c-label{display:none}
    .ctable [data-col="0"]{order:1}
    .ctable [data-col="1"]{order:2}
    .ctable [data-col="2"]{order:3}
    .c-head{padding:0 0 12px}
    .c-head[data-col="1"],.c-head[data-col="2"]{margin-top:30px}
    .c-cell::before{content:attr(data-row);display:block}
    /* numbered once they stack, so the three ways read as a list of three */
    .c-head .c-name::before{font-family:var(--disp);font-weight:470;color:var(--accent-deep);margin-right:12px}
    .c-head[data-col="0"] .c-name::before{content:"01"}
    .c-head[data-col="1"] .c-name::before{content:"02"}
    .c-head[data-col="2"] .c-name::before{content:"03"}
    .c-act{padding:24px 0}
    .practical{margin-top:56px}
    .practical-grid{grid-template-columns:1fr;gap:20px}
    .practical-note{margin-top:26px}
    /* portrait moves above the bio text and stops growing with the column */
    .biogrid{grid-template-columns:1fr;gap:34px}
    .bioframe{max-width:270px}
  }
  /* mobile breakpoint: collapse nav into the hamburger menu, tighten spacing, stack grids into single columns */
  @media (max-width:620px){
    .wrap{padding:0 22px}
    nav{display:none}
    nav.open{display:flex;flex-direction:column;align-items:flex-start;gap:15px;position:absolute;top:100%;left:0;right:0;background:var(--paper);padding:20px;border-bottom:1px solid var(--hair);z-index:9}
    .navtoggle{display:block}.right{gap:8px}
    /* phase 5: the first screen has to reach the booking button. The issue line and the
       filing line both repeat the wordmark and each wrapped to two lines, and the
       wordmark itself wrapped; together they cost ~120px above the hook. */
    .vol{display:none}
    .mark .name{font-size:1.22rem;white-space:nowrap}
    .mark{padding-left:30px}
    .mark .logo{height:38px}
    header{padding:14px 0 16px}
    .filing{display:none}
    .navtoggle{padding:6px 0}
    .footgrid{grid-template-columns:1fr;gap:28px}
    .footlegal{margin-left:0;width:100%}
    .practical-grid{gap:18px}
    /* no drop caps on a phone: at this measure the cap takes three lines out of a
       column that is already narrow, and the first word becomes hard to read */
    .dropcap::first-letter{float:none;font:inherit;padding:0;color:inherit;line-height:inherit}
    /* the detail pages' booking card gives way to the pinned bar, which is on screen from
       the top of those pages on a phone */
    .bookside{display:none}
    /* the detail pages' § 01–§ 04 as an accordion (script.js): label and heading only,
       with the FAQ's +/– glyph, until tapped */
    .essay .movement[data-acc]{padding:24px 0 26px;border-top:1px solid var(--hair)}
    .booktrack > [data-acc]:first-child{border-top:0}
    [data-acc] h2{position:relative;padding-right:34px;margin-bottom:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
    [data-acc] h2::after{content:"+";position:absolute;right:2px;top:.12em;font-family:var(--label);font-size:1.05rem;font-style:normal;color:var(--accent)}
    [data-acc].open h2::after{content:"–"}
    [data-acc] .acc-t:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
    [data-acc]:not(.open) .acc-body{display:none}
    [data-acc].open .acc-body{margin-top:24px}
    /* in the accordion, § 04 is one of four headings and takes the same paper ground as
       the other three, and the dusk goes to the call to book instead (Mike's phone
       call; on desktop it's the other way round) */
    .duskend{background:none}
    .duskend .nextway{padding:0 0 30px}
    .duskend .nextway .see{color:var(--accent-deep)}
    .duskend + .start{background:var(--dusk)}
    .duskend + .start h2{color:var(--paper)}
    .duskend + .start p{color:var(--paper-dim)}
    .duskend + .start .smark span{color:var(--sage)}
    .duskend + .start .term{background:var(--dusk)}
    .duskend + .start .btn:hover{background:var(--paper);color:var(--ink)}
    .duskend [data-acc]{border-top:1px solid var(--hair)}
    .duskend [data-acc] .smark span{color:var(--muted)}
    .duskend [data-acc] .smark span b{color:var(--accent-deep)}
    .duskend [data-acc] h2{color:var(--ink)}
    .duskend [data-acc] p.txt{color:var(--ink-70)}
    .duskend [data-acc] .turn{border-top-color:var(--hair)}
    .duskend [data-acc] .turn p{color:var(--ink-70)}
    .duskend [data-acc] p.hit{color:var(--accent-deep)}
    /* too narrow for the dots at weeks 0, 1 and 2 to carry labels; the list below has
       everything the strip does. Phase 5 decides what the phone gets instead. */
    .tl-strip{display:none}
    .sess{grid-template-columns:1fr}
    .sess-when{padding-top:0;margin-bottom:10px}
    .sess-n{display:inline;margin:0 10px 0 0}
    .howrun{grid-template-columns:1fr;gap:18px}
    .bookside-in .btn{margin-left:0}
  }
  /* the pinned booking bar (phones only; see script.js). Hidden with visibility as well
     as the slide, so it can't be tabbed to while it's off screen. */
  .mbar{display:none}
  @media (max-width:620px){
    .mbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:20;align-items:center;justify-content:space-between;gap:12px;padding:10px 22px calc(10px + env(safe-area-inset-bottom,0px));background:var(--paper);border-top:1px solid var(--hair);box-shadow:0 -6px 18px rgba(33,30,24,.06);transform:translateY(110%);visibility:hidden;transition:transform .3s ease,visibility 0s linear .3s}
    .mbar.on{transform:none;visibility:visible;transition:transform .3s ease}
    .mbar-k{font-family:var(--label);font-size:var(--t-label);letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
    .mbar .btn{padding:11px 22px}
    /* service pages: the booking card in two quiet lines, one typeface: the package,
       then its fee and length a step lighter. (A first version stacked an orange label,
       a large price and a grey caps line; three styles in one small bar read as busy.) */
    .mbar-info{display:flex;flex-direction:column;gap:2px;min-width:0}
    .mbar-name{font-family:var(--disp);font-weight:500;font-size:var(--t-body);line-height:1.2;color:var(--ink);white-space:nowrap}
    .mbar-fee{font-family:var(--body);font-size:var(--t-small);line-height:1.2;color:var(--ink-70);white-space:nowrap}
    .mbar-pkg .btn{padding:11px 16px;flex-shrink:0}
  }
  @media (max-width:620px) and (prefers-reduced-motion:reduce){ .mbar,.mbar.on{transition:none} }
  /* the narrowest phones (320px, or a larger phone zoomed in): tighten the bar so the button
     stays on screen */
  @media (max-width:340px){
    .mbar{padding-left:16px;padding-right:16px;gap:10px}
    .mbar-name{font-size:var(--t-small)}
    .mbar-pkg .btn{padding:10px 13px}
  }

  /* the Method grid on a phone: a vertical list, not a table to swipe sideways and tap.
     The table and its hint go; every answer block shows at once, each with the short
     entry from its cell (copied in by script.js) between its label and its full text. */
  @media (max-width:620px){
    .gridfig{display:none}
    .gridreveal{min-height:0;margin-top:6px}
    .gr-state,.gr-state.on{display:block;padding:18px 0 20px;border-top:1px solid #2E4845}
    .gr-state:last-child{border-bottom:1px solid #2E4845}
    .gr-term{line-height:1.7}
    .gr-short{display:block;font-family:var(--disp);font-weight:470;font-size:var(--t-subhead);line-height:1.25;color:var(--paper);margin:6px 0 10px}
    .gridrow.live .cell{animation:none}
  }

  /* hints that name the gesture: "hover" where there is a pointer, "tap" on a touch
     screen, where hovering isn't a thing (phase 5) */
  .on-touch{display:none}
  @media (hover:none){
    .on-hover{display:none}
    .on-touch{display:inline}
  }

  /* respect OS-level "reduce motion" setting: skip the curve draw-in animation and instant scroll */
  @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
    .igsweep-rect,.ig-axes,.ig-wedge,.ig-node,.ig-gap,.ig-node circle.dot,.ig-node text,.ig-hint{transition:none}
    .ig-node .pulse{animation:none;opacity:0}
    .gridrow.live .cell{animation:none}
    .c-cell,.c-head,.c-act{transition:none}}

/* COOKIE BANNER (vanilla-cookieconsent, see consent.js). Its own stylesheet loads first;
   these variables restyle it in the site's paper, ink and type. Accept and Reject are the
   same quiet ink-outline pill on purpose: the law wants them equally easy to press. */
#cc-main{
  --cc-font-family:var(--body);
  --cc-modal-border-radius:4px;
  --cc-btn-border-radius:999px;
  --cc-modal-transition-duration:.25s;
  --cc-bg:var(--paper);
  --cc-primary-color:var(--ink);
  --cc-secondary-color:var(--ink-70);
  --cc-btn-primary-bg:transparent;
  --cc-btn-primary-color:var(--ink);
  --cc-btn-primary-border-color:var(--ink);
  --cc-btn-primary-hover-bg:var(--ink);
  --cc-btn-primary-hover-color:var(--paper);
  --cc-btn-primary-hover-border-color:var(--ink);
  --cc-btn-secondary-bg:transparent;
  --cc-btn-secondary-color:var(--ink);
  --cc-btn-secondary-border-color:var(--ink);
  --cc-btn-secondary-hover-bg:var(--ink);
  --cc-btn-secondary-hover-color:var(--paper);
  --cc-btn-secondary-hover-border-color:var(--ink);
  --cc-separator-border-color:var(--hair);
  --cc-toggle-on-bg:var(--accent);
  --cc-toggle-off-bg:var(--muted);
  --cc-toggle-on-knob-bg:var(--paper);
  --cc-toggle-off-knob-bg:var(--paper);
  --cc-toggle-readonly-bg:var(--hair);
  --cc-toggle-readonly-knob-bg:var(--paper);
  --cc-cookie-category-block-bg:transparent;
  --cc-cookie-category-block-border:var(--hair);
  --cc-cookie-category-block-hover-bg:rgba(232,94,42,.07);
  --cc-cookie-category-block-hover-border:var(--hair);
  --cc-overlay-bg:rgba(33,30,24,.45);
  --cc-link-color:var(--accent-deep);
  --cc-footer-bg:var(--paper);
  --cc-footer-color:var(--ink-70);
  --cc-footer-border-color:var(--hair);
}
#cc-main .cm,#cc-main .pm{border:1px solid var(--ink);box-shadow:0 10px 30px rgba(33,30,24,.14)}
#cc-main .cm__title,#cc-main .pm__title{font-family:var(--disp);font-weight:500;font-size:var(--t-subhead);letter-spacing:0}
#cc-main .pm__section-title{font-family:var(--disp);font-weight:500}
#cc-main .cm__desc,#cc-main .pm__section-desc{font-size:var(--t-small);line-height:1.5;color:var(--ink-70)}
#cc-main .cm__btn,#cc-main .pm__btn{font-family:var(--disp);font-weight:500;font-size:var(--t-small);border-width:1px}