/* elegant.work — draft. One file. The system is in STYLE.md: one type scale, one spacing scale, one grid,
   one ground per theme, one palette seen in two lights. Every size and gap below the token block refers to a token.
   Graphics are generated by tools/graphics.mjs; portraits by tools/portraits.mjs. */
@font-face { font-family: "Montserrat"; src: url("montserrat-latin-var.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

@property --tl { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --pt { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --gp { syntax: "<number>"; inherits: true; initial-value: 1; }

/* ==== tokens ==== */
:root {
  /* type: six sizes. Only display and title are fluid. One line-height per size. */
  --fs-display: clamp(36px, 4.2vw, 54px); --lh-display: 1.1;
  --fs-title:   clamp(26px, 2.5vw, 34px); --lh-title: 1.22;
  --fs-lead:    21px;                     --lh-lead: 1.55;
  --fs-body:    17px;                     --lh-body: 1.7;
  --fs-small:   15px;                     --lh-small: 1.5;
  --fs-label:   13px;                     --lh-label: 1.4;
  --w-light: 300; --w-regular: 400; --w-medium: 500;
  --track-label: .14em;
  /* drawing text: the same body, small and label sizes, fixed in drawing units (print scales the whole drawing) */
  --dfs-body: 17px; --dfs-small: 15px; --dfs-label: 13px;
  /* measure */
  --measure: 680px;        /* running text */
  --measure-lead: 720px;   /* leads */
  /* space: one unit, six steps */
  --sp-1: 8px; --sp-2: 16px; --sp-3: 24px; --sp-4: 40px; --sp-5: 64px; --sp-6: 112px;
  /* grid: one wrap, one split, one gutter */
  --w: 1120px; --side: 24px; --wrapw: min(var(--w), 100% - 2 * var(--side));
  --col-gap: 64px;
  --head: 80px;            /* header height, openers start below it */
  /* through-line geometry: --gx = line x from the wrap's left edge; --gut = text indent on every section */
  --gx: -64px; --gut: 0px;
  /* even columns: the label slot (a label line and its space, kept where a column has no label), and the nudge that
     starts text beside a title on the title's capitals (a title's leading differs from the text's; measured, ±1 px) */
  --label-slot: calc(var(--fs-label) * var(--lh-label) + var(--sp-2));
  --beside-title: calc(var(--fs-title) * .268 - 8.64px);
}

/* one palette in two lights: same hues for blue and gold, neutrals of one temperature, mirrored lightness */
:root, [data-ew-mode="light"] {
  color-scheme: light;
  --bg: #FAFAFA;
  --tx: #141414; --tx-2: #3D3D3D; --tx-3: #6B6B6B;
  --rule: #E2E2E2; --rule-2: #CFCFCF; --dg: #8A8A8A; --ctl: #858585;
  --blue: #336AA3; --gold: #86663C;
  --line: var(--blue); --blue-tx: var(--blue); --gold-tx: var(--gold); --gold-pt: var(--gold);
  --track: #E4E4E4;
  --bar: rgba(51,106,163,.32);
  --btn-bg: #336AA3; --btn-tx: #FFFFFF;
  --fl: rgba(20,20,20,.14); --fk: rgba(20,20,20,.42); --fh: rgba(20,20,20,.34); --fp: rgba(20,20,20,.66);
  --photo: none;
}
[data-ew-mode="dark"] {
  color-scheme: dark;
  --bg: #111111;
  --tx: #F4F4F4; --tx-2: #CFCFCF; --tx-3: #9A9A9A;
  --rule: #262626; --rule-2: #333333; --dg: #777777; --ctl: #777777;
  --blue: #77A5D5; --gold: #B8915F;
  --line: var(--blue); --blue-tx: var(--blue); --gold-tx: var(--gold); --gold-pt: var(--gold);
  --track: #2A2A2A;
  --bar: rgba(119,165,213,.45);
  --btn-bg: #77A5D5; --btn-tx: #0E1620;
  --fl: rgba(244,244,244,.17); --fk: rgba(244,244,244,.44); --fh: rgba(244,244,244,.36); --fp: rgba(244,244,244,.72);
  --photo: brightness(.95);
}
@media (prefers-color-scheme: dark) {
  html:not([data-ew-mode]) {
    color-scheme: dark;
    --bg: #111111; --tx: #F4F4F4; --tx-2: #CFCFCF; --tx-3: #9A9A9A;
    --rule: #262626; --rule-2: #333333; --dg: #777777; --ctl: #777777;
    --blue: #77A5D5; --gold: #B8915F; --line: var(--blue); --blue-tx: var(--blue); --gold-tx: var(--gold); --gold-pt: var(--gold);
    --track: #2A2A2A; --bar: rgba(119,165,213,.45); --btn-bg: #77A5D5; --btn-tx: #0E1620;
    --fl: rgba(244,244,244,.17); --fk: rgba(244,244,244,.44); --fh: rgba(244,244,244,.36); --fp: rgba(244,244,244,.72);
    --photo: brightness(.95);
  }
}
@media (max-width: 1279px) { :root { --gx: 12px; --gut: 64px; } }
@media (max-width: 959px)  { :root { --sp-6: 88px; --col-gap: 40px; } }
@media (max-width: 899px)  { :root { --head: 72px; } }
@media (max-width: 720px)  { :root { --fs-lead: 19px; --sp-5: 48px; --sp-6: 72px; --side: 18px; --gx: 4px; --gut: 24px; } }

/* the six type roles; everything else uses one of these */
.t-display, h1 { font-size: var(--fs-display); line-height: var(--lh-display); font-weight: var(--w-light); letter-spacing: -.03em; }
.t-title, h2, .problems li { font-size: var(--fs-title); line-height: var(--lh-title); font-weight: var(--w-light); letter-spacing: -.02em; }
.t-lead, .lede, h3 { font-size: var(--fs-lead); line-height: var(--lh-lead); }
.t-body, body { font-size: var(--fs-body); line-height: var(--lh-body); }
.t-small { font-size: var(--fs-small); line-height: var(--lh-small); }
.t-label, .kicker, .tag, .nl-h, .plabel, .ew-basis, .diag-opt, .shape .t, .ew-read-section h2 { font-size: var(--fs-label); line-height: var(--lh-label); font-weight: var(--w-medium); letter-spacing: var(--track-label); text-transform: uppercase; }
/* ==== end of tokens ==== */

/* ---------- base ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--tx-2); font-family: "Montserrat", system-ui, sans-serif; font-weight: var(--w-regular); -webkit-font-smoothing: antialiased; overflow-x: clip; }
a { color: inherit; }
img, svg { max-width: 100%; }
.wrap { width: var(--wrapw); margin: 0 auto; padding-left: var(--gut); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.s1, .s2 { --here: var(--bg); }        /* one ground per theme; the sections are transparent over the page field */

/* ---------- the page field (v1, 1 Oct): one living field behind every page ----------
   One tile (assets/field/page.svg, tools/pagefield.mjs) repeated down <main> as a mask and coloured by the field token,
   so both themes use one file. Text sits in calm regions: every block of the page lies on the ground with a soft
   clearing around it (--clear), so the field thins out before the words and nothing has an edge. Figures that carry a
   field of their own get the same clearing; the people stand on the page field itself. The hero stays on the bare ground. */
:root { --clear: 64px; }   /* blur = spread = --clear: the field returns from 0 at the block's edge to full over 2 × --clear (128 px), a Gaussian falloff with round corners, no edge */
main { position: relative; isolation: isolate; }
main::before { content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none; background: var(--fl);
  --fade: linear-gradient(#0000, #000 260px, #000 calc(100% - 200px), #0000);   /* in under the header, out before the footer */
  -webkit-mask: url(assets/field/page.svg) 50% 0 / 1440px 2400px repeat-y, var(--fade); -webkit-mask-composite: source-in;
  mask: url(assets/field/page.svg) 50% 0 / 1440px 2400px repeat-y, var(--fade); mask-composite: intersect; }
[data-ew-mode="dark"] main::before { opacity: .75; }      /* light lines on a dark ground read stronger: the same field, a little quieter */
@media (prefers-color-scheme: dark) { html:not([data-ew-mode]) main::before { opacity: .75; } }
.hero { background: linear-gradient(var(--bg) calc(100% - 200px), transparent); }   /* the field comes in softly below the breath */
/* the clearing is a layer under the block (z-index -1), so no block's clearing ever covers a neighbour's words */
.wrap > * { position: relative; }
.arows .pa-tx { position: relative; }
.wrap > :not(.pf-open, .arows, .fig:has(> .gfx-people), .tl-end .tl-h)::after, .arows .pa-tx::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--bg); box-shadow: 0 0 var(--clear) var(--clear) var(--bg); }
.tl-end .wrap { background: var(--bg); box-shadow: 0 0 var(--clear) var(--clear) var(--bg); }   /* its heading's ::after is the line's end */
.gfx-people .st-field, .arows .st-field { display: none; }      /* their field is the page's */
/* v3 field studies beside text that has nothing next to it (Notes index, Roots): absolutely placed in the empty column,
   on their own clearing; below 1180 the text takes the width and they are not shown */
.study { display: none; }
@media (min-width: 1180px) {
  .study { display: block; position: absolute; pointer-events: none; }
  .study svg { display: block; width: 100%; height: auto; }
  .study::after { content: ""; position: absolute; inset: 8%; z-index: -1; background: var(--bg); box-shadow: 0 0 var(--clear) var(--clear) var(--bg); border-radius: 50%; }
  .study-notes { right: 0; width: 380px; }
  .study-roots { left: calc(100% + var(--col-gap)); width: 400px; margin-top: calc(-1 * var(--sp-4)); }
}
@media (max-width: 1279px) { .study-roots { display: none; } }   /* the column beside Roots' text is narrower than the study until 1280 */
h1, h2, h3 { color: var(--tx); margin: 0; text-wrap: balance; }
h1 { max-width: 16em; margin-bottom: var(--sp-3); }
h2 { max-width: 22em; margin-bottom: var(--sp-3); }
h3 { font-weight: var(--w-regular); margin-bottom: var(--sp-1); }
h1 em, h2 em { font-style: normal; color: var(--gold); }
p { margin: 0 0 var(--sp-2); }
p:last-child { margin-bottom: 0; }
.lede { max-width: var(--measure-lead); margin-bottom: var(--sp-3); }
.lede:last-child { margin-bottom: 0; }
.prose { max-width: var(--measure); }
.kicker { color: var(--blue); margin: 0 0 var(--sp-2); }
.kicker a { text-decoration: none; }
.more { display: inline-flex; align-items: center; min-height: 44px; margin-top: var(--sp-3); font-size: var(--fs-small); line-height: var(--lh-small); color: var(--blue); text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.lede a, .prose a { color: var(--blue); text-underline-offset: 4px; }
.pull { position: relative; max-width: var(--measure); margin: var(--sp-5) 0; padding-top: var(--sp-3); font-size: var(--fs-lead); line-height: var(--lh-lead); font-weight: var(--w-regular); color: var(--tx); }
.pull::before { content: ""; position: absolute; left: 0; top: 0; width: var(--sp-4); border-top: 1px solid var(--line); }   /* a short stretch of the through-line */
.pull:last-child { margin-bottom: 0; }
.pull + .more { margin-top: 0; }

/* buttons */
.btn { display: inline-flex; align-items: center; min-height: 48px; padding: 0 var(--sp-3); font: inherit; font-size: var(--fs-small); line-height: var(--lh-small); font-weight: var(--w-medium); letter-spacing: .02em; text-decoration: none; border-radius: 3px; border: 0; cursor: pointer; background: none; color: var(--tx); }
.btn.primary { background: var(--btn-bg); color: var(--btn-tx); }
.btn.ghost { border: 1px solid var(--ctl); color: var(--tx); }
.actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-4); }
.btn:focus-visible, a:focus-visible, button:focus-visible { outline: 2px solid var(--line); outline-offset: 3px; }
[tabindex="-1"]:focus { outline: none; }

/* ---------- sections: one opening pattern (label, title, lead), one rhythm ---------- */
.band { padding: var(--sp-6) 0; }
.opener { padding: calc(var(--head) + var(--sp-6)) 0 var(--sp-5); }
.two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--col-gap); align-items: start; }
.fig { margin-top: var(--sp-5); }
.after-list { margin-top: var(--sp-3); }

/* ---------- header: three words, each with its depth beneath it ---------- */
.nav { position: absolute; top: 0; left: 0; right: 0; z-index: 20; }
.nav .wrap { display: grid; grid-template-columns: auto 1fr auto auto; grid-template-areas: "brand links cta mode"; align-items: center; column-gap: var(--sp-4); padding-top: var(--sp-2); padding-bottom: var(--sp-2); padding-left: 0; }
.brand { grid-area: brand; font-size: var(--fs-body); line-height: var(--lh-body); letter-spacing: .01em; text-decoration: none; white-space: nowrap; color: var(--tx); min-height: 44px; display: inline-flex; align-items: center; }
.brand b { font-weight: var(--w-medium); color: var(--blue); }
.nav-links { grid-area: links; justify-self: end; }
.nav-list { display: flex; gap: var(--sp-4); margin: 0; padding: 0; list-style: none; }
.nav-item { position: relative; display: flex; align-items: center; gap: var(--sp-1); }
.nav-top { font-size: var(--fs-small); line-height: var(--lh-small); text-decoration: none; color: var(--tx-2); white-space: nowrap; min-height: 44px; display: inline-flex; align-items: center; }
.nav-top:hover, .nav-item.is-here .nav-top { color: var(--tx); }
.nav-item.is-here .nav-top { text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 7px; text-decoration-thickness: 1px; }
.nav-here { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--tx-3); white-space: nowrap; }
/* the children: a small quiet list directly beneath the word, on hover or keyboard focus; a hairline, nothing else */
.nav-sub { position: absolute; top: 100%; left: 0; margin: 0; padding: var(--sp-1) 0 0; list-style: none; min-width: 100%; border-top: 1px solid var(--rule-2); display: none; }
.nav-sub a { display: flex; align-items: center; min-height: 36px; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--tx-2); text-decoration: none; white-space: nowrap; }
.nav-sub a:hover, .nav-sub a[aria-current] { color: var(--tx); }
.nav-sub a[aria-current] { text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 6px; text-decoration-thickness: 1px; }
.nav-item:hover .nav-sub, .nav-item:focus-within .nav-sub, .nav-item.sub-open .nav-sub { display: block; }
.nav-item.sub-off .nav-sub { display: none; }
.nav-item:hover .nav-here, .nav-item:focus-within .nav-here, .nav-item.sub-open .nav-here { visibility: hidden; }
.nav-cta { grid-area: cta; min-height: 40px; }
.menu-t { grid-area: menu; display: none; }
.menu-cta { display: none; }
.mode-t { grid-area: mode; display: none; width: 44px; height: 44px; padding: 0; margin-right: -10px; border: 0; background: transparent; color: var(--tx); cursor: pointer; align-items: center; justify-content: center; border-radius: 50%; }
html[data-ew-mode] .mode-t { display: inline-flex; }
.mode-t svg { width: 22px; height: 22px; display: block; transition: transform .5s cubic-bezier(.4,0,.2,1); }
.mode-t circle { fill: none; stroke: currentColor; stroke-width: 1.5; }
.mode-t path { fill: currentColor; }
.mode-t[aria-pressed="true"] svg { transform: rotate(180deg); }
.mode-t:hover { color: var(--blue); }
@media (max-width: 1079px) { .nav .wrap { column-gap: var(--sp-3); } .nav-list { gap: var(--sp-3); } }
@media (max-width: 899px) {
  /* the menu: one calm full-height list with the whole structure */
  .nav .wrap { grid-template-columns: 1fr auto auto; grid-template-areas: "brand menu mode"; column-gap: var(--sp-2); }
  html[data-ew-mode] .menu-t { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--sp-2); font: inherit; font-size: var(--fs-small); color: var(--tx); background: none; border: 1px solid var(--ctl); border-radius: 3px; cursor: pointer; }
  html[data-ew-mode] .nav-cta, html[data-ew-mode] .nav-links { display: none; }
  html[data-ew-mode] .nav.open { position: fixed; inset: 0; background: var(--bg); overflow-y: auto; }
  html[data-ew-mode] .nav.open .wrap { grid-template-areas: "brand menu mode" "links links links"; align-content: start; }
  html[data-ew-mode] .nav.open .nav-links { display: block; justify-self: stretch; padding: var(--sp-5) 0; }
  html[data-ew-mode] .nav.open .nav-list { flex-direction: column; gap: var(--sp-3); }
  html[data-ew-mode] .nav.open .nav-item { display: block; }
  html[data-ew-mode] .nav.open .nav-top { font-size: var(--fs-title); line-height: var(--lh-title); font-weight: var(--w-light); color: var(--tx); min-height: 48px; }
  html[data-ew-mode] .nav.open .nav-here { display: none; }
  html[data-ew-mode] .nav.open .nav-sub { display: block; position: static; border: 0; padding: 0; }
  html[data-ew-mode] .nav.open .nav-sub a { min-height: 40px; }
  html[data-ew-mode] .nav.open .menu-cta { display: inline-flex; margin-top: var(--sp-5); }
  /* without JavaScript: the three words wrap under the brand, the children stay one tap away on their parent pages */
  html:not([data-ew-mode]) .nav .wrap { grid-template-areas: "brand cta mode" "links links links"; }
  html:not([data-ew-mode]) .nav-links { justify-self: start; }
}
body.menu-open { overflow: hidden; }

/* ---------- hand-on: the through-line offers the deeper page ---------- */
.handon { padding-top: 0; }
.handon-row { display: grid; gap: var(--col-gap); border-top: 1px solid var(--rule-2); padding-top: var(--sp-4); }
.handon-row.n2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.handon-link { display: block; text-decoration: none; color: var(--tx); max-width: var(--measure); }
.handon-link .kicker { display: block; }
.handon-t { display: block; font-size: var(--fs-title); line-height: var(--lh-title); font-weight: var(--w-light); letter-spacing: -.02em; color: var(--tx); text-decoration: underline; text-decoration-color: var(--line); text-decoration-thickness: 1px; text-underline-offset: 8px; }
.handon-s { display: block; margin-top: var(--sp-2); color: var(--tx-2); }
.handon-link:hover .handon-t { color: var(--blue); }
@media (max-width: 959px) { .handon-row.n2 { grid-template-columns: 1fr; gap: var(--sp-4); } }

footer { padding: var(--sp-4) 0; border-top: 1px solid var(--rule); color: var(--tx-3); background: var(--bg); font-size: var(--fs-small); line-height: var(--lh-small); }
footer .wrap { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); }
footer a { text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
footer a:hover, footer a[aria-current] { color: var(--tx); }
.foot-links { display: flex; gap: var(--sp-3); flex-wrap: wrap; }

/* ---------- legal pages: plain text in the reading column, no through-line ---------- */
.legal { max-width: var(--measure); }
.legal h1 { overflow-wrap: break-word; hyphens: auto; }
.legal-prose { margin-top: var(--sp-5); overflow-wrap: break-word; hyphens: auto; }
.legal-prose h2 { font-size: var(--fs-lead); line-height: var(--lh-lead); font-weight: var(--w-regular); letter-spacing: 0; margin: var(--sp-5) 0 var(--sp-2); }
.legal-prose ul { padding-left: var(--sp-3); margin: 0 0 var(--sp-2); }
.legal-prose a { color: var(--blue); text-underline-offset: 4px; }
mark.tofill { background: transparent; color: var(--gold); font-weight: var(--w-medium); border: 1px dashed var(--gold); padding: 1px 6px; border-radius: 2px; }

/* ---------- the through-line ---------- */
.tl { position: relative; }
.tl-seg { position: absolute; top: 0; bottom: 0; width: 2px; left: calc((100% - var(--wrapw)) / 2 + var(--gx) - 1px);
  background: linear-gradient(var(--line), var(--line)) top left / 100% calc(var(--tl) * 100%) no-repeat, var(--track); }
.tl-h { position: relative; }
.tl-h::before { content: ""; position: absolute; left: calc(var(--gx) - var(--gut) - 6px); top: calc(.6em - 6px); width: 12px; height: 12px; border: 2px solid var(--line);
  background: var(--line); background: color-mix(in srgb, var(--line) calc(var(--pt) * 100%), var(--here)); }
.tl-end .tl-h::after { content: ""; position: absolute; left: calc(var(--gx) - var(--gut) - 1px); top: calc(-1 * var(--sp-6)); width: 2px; height: calc(var(--sp-6) + .6em - 8px);
  background: linear-gradient(var(--line), var(--line)) top left / 100% calc(var(--tl) * 100%) no-repeat, var(--track); }
.tl-end .tl-h::before { width: 16px; height: 16px; left: calc(var(--gx) - var(--gut) - 8px); top: calc(.6em - 8px); border: 0; background: var(--gold); border-radius: 50%; }
.enter { position: relative; border-top: 2px solid var(--line); }
.enter::before { content: ""; position: absolute; top: -2px; height: 2px; left: calc(var(--gx) - var(--gut)); width: calc(var(--gut) - var(--gx));
  background: linear-gradient(90deg, var(--line), var(--line)) left / calc(var(--pt) * 100%) 100% no-repeat, var(--track); }
.gbox .entry { position: absolute; top: var(--ey); height: 2px; margin-top: -1px; left: calc(var(--gx) - var(--gut)); width: calc(var(--gut) - var(--gx));
  background: linear-gradient(90deg, var(--line), var(--line)) left / calc(var(--pt) * 100%) 100% no-repeat, var(--track); }
.tl-knot { position: absolute; left: calc(var(--gx) - var(--gut) - 75px); top: calc(.6em - 95px); width: 150px; height: 190px; pointer-events: none; z-index: 1; }
.tl-knot svg { width: 100%; height: 100%; overflow: visible; display: block; }
.tl-knot .f-knot { vector-effect: non-scaling-stroke; }
.kn-cover { fill: var(--here); }
.kn-line { fill: none; stroke: var(--line); stroke-width: 2; stroke-linecap: round; }
.tl-h.knotted::before, .tl-h.gathered::before { display: none; }
.tl-gather { position: absolute; left: calc(var(--gx) - var(--gut) - 65px); top: calc(.6em - 65px); width: 130px; height: 130px; pointer-events: none; }
.tl-gather svg { width: 100%; height: 100%; overflow: visible; display: block; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    html[data-ew-mode] .tl { animation: tl-draw linear both; animation-timeline: view(); animation-range: cover 30vh cover calc(100% - 70vh); }
    html[data-ew-mode] .tl-end { animation-range: cover 30vh cover calc(30vh + var(--sp-6) + 20px); }
    html[data-ew-mode] .tl:not(.tl-end) .tl-h,
    html[data-ew-mode] .enter { animation: tl-point linear both; animation-timeline: view(); animation-range: cover calc(30vh + 8px) cover calc(30vh + 40px); }
    html[data-ew-mode] .gbox { animation: tl-point linear both, g-draw linear both; animation-timeline: view(); animation-range: entry 40% cover 30%, entry 60% cover 55%; }
  }
}
@keyframes tl-draw { from { --tl: 0; } to { --tl: 1; } }
@keyframes tl-point { from { --pt: 0; } to { --pt: 1; } }
@keyframes g-draw { from { --gp: 0; } to { --gp: 1; } }

/* ---------- the living field and the traced line ---------- */
.themed { background: var(--bg); color: var(--tx-2); }
.gfx { margin: 0; position: relative; }
.gbox { position: relative; width: 100%; }
.gsvg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.gsvg .f-field, .gsvg .f-knot, .gsvg .f-pulse, .gsvg .f-rings circle, .gsvg .f-hair, .gsvg .f-held { vector-effect: non-scaling-stroke; }
.f-field { fill: none; stroke: var(--fl); stroke-width: .8; stroke-linecap: round; }
.f-strong { stroke: var(--fh); }
.f-knot { fill: none; stroke: var(--fk); stroke-width: .7; }
.f-pulse { fill: none; stroke: var(--fp); stroke-width: 1; }
.f-walk { stroke-width: 1.5; opacity: .85; }
.f-held { fill: none; stroke: var(--fh); stroke-width: .8; vector-effect: non-scaling-stroke; }
.f-line { fill: none; stroke: var(--line); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.f-line[pathLength] { stroke-dasharray: 1 1; stroke-dashoffset: calc(1 - var(--gp)); }
.f-head { stroke-dasharray: none; opacity: clamp(0, (var(--gp) - .92) * 12.5, 1); }
.f-stop { fill: var(--here, var(--bg)); stroke: var(--line); stroke-width: 2; }
.f-end { fill: var(--here, var(--bg)); stroke: var(--dg); stroke-width: 1; }
.f-gold { fill: var(--gold); }
.f-hair { fill: none; stroke: var(--dg); stroke-width: 1; }
.f-surf { fill: none; stroke: var(--dg); stroke-width: 1; vector-effect: non-scaling-stroke; }
.f-rings circle { fill: none; stroke: var(--gold); stroke-width: 1; opacity: calc(.75 - var(--i) * .2); }
.glist { margin: 0; padding: 0; list-style: none; }
.gl { position: absolute; width: var(--lw); margin: 0; list-style: none; }
.gl h3, .gl .gt { display: block; font-size: var(--fs-body); line-height: var(--lh-small); font-weight: var(--w-medium); margin: 0 0 4px; color: var(--tx); }
.gl p { font-size: var(--fs-small); line-height: var(--lh-small); margin: 0; color: var(--tx-2); }
.gl .gb { color: var(--blue); }
.gfx-problems .gl .gt { font-weight: var(--w-regular); }   /* sentences, not titles: they sit under a heading */
.gl .gg { color: var(--gold); }
.gl-right { transform: translate(calc(18px + var(--dx)), calc(-24% + var(--dy))); }
.gl-left { transform: translate(calc(-100% - 18px + var(--dx)), calc(-24% + var(--dy))); text-align: right; }
.gl-below { transform: translate(calc(-50% + var(--dx)), calc(18px + var(--dy))); text-align: center; }
.gl-above { transform: translate(calc(-50% + var(--dx)), calc(-100% - 18px + var(--dy))); text-align: center; }
.gfx-tall { display: none; }
.gfx-tall .gl { width: min(var(--lw), 44vw); }
.gfx-pain .gfx-tall, .gfx-scale .gfx-tall { max-width: 420px; }   /* their labels are fixed-size: scaled up further, the pulses and loops reach them */

/* ---------- home: hero, one breath ---------- */
.hero { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: calc(var(--head) + var(--sp-4)) var(--side) var(--sp-6); position: relative; }
.field { width: min(760px, 100%); }
.cluster { display: flex; flex-direction: column; gap: var(--sp-3); align-items: center; }
.stanza { text-align: center; }
.line { position: relative; display: flex; justify-content: center; align-items: center; }
.line + .line { margin-top: 2px; }
.bar { position: absolute; top: 50%; left: 50%; height: 3px; border-radius: 99px; background: var(--bar); transform: translate(-50%,-50%); opacity: 0; transition: opacity 4000ms cubic-bezier(.45,.05,.55,.95); max-width: 88vw; }
.text { margin: 0; text-wrap: balance; font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--tx); transition: opacity 1400ms cubic-bezier(.4,0,.2,1), transform 1400ms cubic-bezier(.4,0,.2,1); position: relative; }
.text .k { font-weight: var(--w-medium); }
.text .s { color: var(--blue); font-weight: var(--w-medium); }
.text .v { color: var(--gold); font-weight: var(--w-medium); }
.text.soft { color: var(--tx-2); }
.pause { width: 96px; height: 1px; margin: var(--sp-4) auto; background: var(--line); transition: opacity 1400ms ease; }
.after { margin-top: var(--sp-5); display: flex; gap: var(--sp-2); justify-content: center; flex-wrap: wrap; transition: opacity 1800ms ease; }
.skip { position: absolute; bottom: var(--sp-2); left: 50%; transform: translateX(-50%); min-height: 44px; padding: 0 var(--sp-2); font: inherit; font-size: var(--fs-label); letter-spacing: var(--track-label); color: var(--tx-3); background: none; border: 0; cursor: pointer; display: none; }
.ew-anim .field.inhale .bar { opacity: 1; }
.ew-anim .stanza.revealed .bar { opacity: 0; transition: opacity 1400ms cubic-bezier(.4,0,.2,1); }
.ew-anim .text { opacity: 0; transform: translateY(4px); }
.ew-anim .stanza.revealed .text { opacity: 1; transform: none; }
.ew-anim .pause, .ew-anim .after { opacity: 0; }
.ew-anim .field.show-pause .pause, .ew-anim .after.on { opacity: 1; }
.ew-anim .skip { display: block; }
.ew-anim .skip.gone { display: none; }
/* breath v4: one breath at the start, the first stanza's lines (the through-line's weight and colour) swell once, 1.4 s */
.hero[data-breath="v4"] .bar { height: 1px; background: var(--line); opacity: 0; transition: none; }
.ew-anim .hero[data-breath="v4"] .stanza.swell .bar { animation: ew-swell 1400ms cubic-bezier(.45,.05,.55,.95) both; }
.ew-anim .hero[data-breath="v4"] .text { transition-duration: 700ms; }
@keyframes ew-swell { 0% { opacity: 0; transform: translate(-50%, -50%) scaleX(.55); } 55% { opacity: .7; transform: translate(-50%, -50%) scaleX(1); } 100% { opacity: 0; transform: translate(-50%, -50%) scaleX(1); } }
/* breath v5: v1's bars (weight, colour) on a short clock: in over 0.6 s, one pulse together (0.8 s), each stanza's bars until its words */
.hero[data-breath="v5"] .bar { transition: opacity 600ms cubic-bezier(.45,.05,.55,.95); }
.ew-anim .hero[data-breath="v5"] .field.inhale .bar { opacity: .65; }
.ew-anim .hero[data-breath="v5"] .field.pulse .bar { animation: ew-pulse 800ms cubic-bezier(.45,.05,.55,.95); }
.ew-anim .hero[data-breath="v5"] .field .stanza.revealed .bar { opacity: 0; transition: opacity 1400ms cubic-bezier(.4,0,.2,1); }
@keyframes ew-pulse { 0%, 100% { opacity: .65; } 50% { opacity: 1; } }
/* /compare-hero: the breath twice, live, side by side (stacked below 960) */
.cmp { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5) var(--col-gap); margin-top: var(--sp-5); }
.cmp-f { margin: 0; }
.cmp-f iframe { display: block; width: 100%; height: min(78vh, 760px); border: 0; border-top: 1px solid var(--rule-2); background: var(--bg); }
.cmp-f figcaption { margin-top: var(--sp-2); font-size: var(--fs-small); line-height: var(--lh-small); color: var(--tx-2); }
.cmp-n { font-weight: var(--w-medium); color: var(--tx); margin-right: var(--sp-1); }
@media (max-width: 959px) { .cmp { grid-template-columns: 1fr; gap: var(--sp-5); } .cmp-f iframe { height: min(80vh, 720px); } }
/* breath v2 and v3 (HERO_BREATH in pages.mjs): no bars, the first stanza in 700 ms, "show all" in the small size from the start */
.hero:is([data-breath="v2"], [data-breath="v3"]) .bar { display: none; }
.ew-anim .hero:is([data-breath="v2"], [data-breath="v3"]) .cluster:first-child .stanza:first-child .text { transition-duration: 700ms; }
.hero:is([data-breath="v2"], [data-breath="v3"], [data-breath="v4"]) .skip { display: block; position: fixed; z-index: 5; font-size: var(--fs-small); letter-spacing: normal; color: var(--tx-2); text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.hero:is([data-breath="v2"], [data-breath="v3"], [data-breath="v4"]) .skip.gone { display: none; }

/* home: who it is for */
.who { list-style: none; margin: var(--sp-3) 0 0; padding: 0; }
.who li { padding: var(--sp-2) 0; border-top: 1px solid var(--rule-2); color: var(--tx); }
.who li:last-child { border-bottom: 1px solid var(--rule-2); }

/* home: a price list */
.prices { list-style: none; margin: var(--sp-5) 0 0; padding: 0; }
.prices li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--col-gap); row-gap: var(--sp-1); padding: var(--sp-3) 0; border-bottom: 1px solid var(--rule-2); }
.prices h3 { margin: 0; grid-row: span 2; }
.prices p { margin: 0; }
.prices .price { color: var(--tx); font-weight: var(--w-medium); }
.prices .price.value { color: var(--gold); }
.prices .price.quiet { color: var(--tx-2); font-weight: var(--w-regular); }
.aside-link { display: block; margin-top: var(--sp-1); font-size: var(--fs-small); line-height: var(--lh-small); }
.aside-link a { color: var(--blue); text-underline-offset: 5px; display: inline-flex; min-height: 44px; align-items: center; }

/* people on a stage */
.stage { position: relative; overflow-x: clip; }
.stage .gsvg.st-field { z-index: 0; }
.stage .gsvg.st-line { z-index: 2; }
.sp { position: absolute; }
.sp-back { z-index: 1; }
.sp-front { z-index: 3; }
.sp img { display: block; width: 100%; height: auto; filter: var(--photo); }
.sp a { display: block; }
.stage .entry { z-index: 2; }
.gfx-people { margin-top: var(--sp-4); }
.gfx-people .gbox { overflow-x: clip; }
.pn-s { position: absolute; transform: translateX(-50%); z-index: 4; white-space: nowrap; text-align: center; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--tx-2); text-decoration: none; padding: 4px 6px 10px; }
.pn-s:hover, .pn-s:focus-visible { color: var(--tx); text-decoration: underline; text-underline-offset: 4px; }

/* ---------- the pattern ---------- */
.cols3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--col-gap); margin-top: var(--sp-5); padding-top: var(--sp-4); }
.seven { margin: var(--sp-5) 0 0; border-bottom: 1px solid var(--rule-2); }
.seven div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--col-gap); padding: var(--sp-3) 0; border-top: 1px solid var(--rule-2); align-items: baseline; }
.seven div:first-child { border-top: 0; }
.seven dt { color: var(--tx); font-weight: var(--w-medium); }
.seven dd { margin: 0; }
.proc { list-style: none; margin: var(--sp-5) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 var(--sp-4); position: relative; }
.proc > li:last-child::after { content: ""; position: absolute; right: 2px; top: -6px; width: 10px; height: 10px; border-top: 2px solid var(--line); border-right: 2px solid var(--line); transform: rotate(45deg); }
.proc li { position: relative; padding-top: var(--sp-4); }
.proc li::before { content: ""; position: absolute; left: 0; top: -6px; width: 10px; height: 10px; border-radius: 50%; background: var(--line); }
.aside { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--col-gap); margin-top: var(--sp-6); padding-top: var(--sp-4); border-top: 1px solid var(--rule-2); }
.aside h3 { font-size: var(--fs-title); line-height: var(--lh-title); font-weight: var(--w-light); letter-spacing: -.02em; }
.calm-strip { margin: var(--sp-5) 0 var(--sp-2); height: 96px; }
.calm-strip svg { display: block; width: 100%; height: 100%; overflow: visible; }
.roots-echo { margin: var(--sp-5) auto 0; max-width: 360px; aspect-ratio: 360 / 150; }
.roots-echo svg { display: block; width: 100%; height: 100%; }

/* ---------- work with us ---------- */
.problems { list-style: none; margin: var(--sp-4) 0 0; padding: 0; }
.problems li { padding: var(--sp-3) 0; border-bottom: 1px solid var(--rule-2); color: var(--tx); }
.loops { list-style: none; margin: var(--sp-5) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); position: relative; }
.loops > li { position: relative; }
.loopg { position: relative; }
.loopg svg { display: block; width: 100%; height: auto; overflow: visible; }
.gs-desk { aspect-ratio: 280 / 300; }
.loopg .gs-phone { display: none; }
.loopg svg path, .loopg svg circle { vector-effect: non-scaling-stroke; }
.loopg .entry { position: absolute; left: calc(var(--gx) - var(--gut)); width: calc(var(--gut) - var(--gx)); top: 84%; height: 2px; margin-top: -1px; background: var(--line); }
.loops .tx { padding: var(--sp-3) var(--sp-3) 0 0; }
.loops p { margin: 0; }
.loops .price { margin-top: var(--sp-2); color: var(--tx); font-weight: var(--w-medium); }
.loops .price.value { color: var(--gold); }
.loops .exit { margin-top: var(--sp-1); font-size: var(--fs-small); line-height: var(--lh-small); color: var(--tx-3); }
.loops .exit.last { color: var(--gold); }
.shape { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-4) var(--sp-4); }
.shape > div { border-top: 1px solid var(--rule-2); padding-top: var(--sp-2); }
.shape .t { color: var(--blue); margin-bottom: var(--sp-2); }
/* the doorways: seven thresholds on the through-line */
.doors-fig { margin-top: var(--sp-5); }
.gfx-doors { position: relative; }
.doors { list-style: none; margin: 0; padding: 0; position: relative; }
.door { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--col-gap); padding: var(--sp-3) 0; border-top: 1px solid var(--dg); }
.door:last-child { border-bottom: 1px solid var(--rule-2); }
.door-field { position: absolute; top: 0; height: 100%; left: calc(var(--gx) - var(--gut) - 80px); width: 160px; overflow: visible; pointer-events: none; }
.door h3 { margin: 0; }
.door p { margin: 0; }
.doors-end { margin: var(--sp-3) 0 0; color: var(--tx); max-width: var(--measure); }
.doors-after { margin-top: var(--sp-4); }

/* ---------- about ---------- */
.byline { color: var(--tx-3); margin-top: var(--sp-3); }
.byline b { color: var(--tx); font-weight: var(--w-medium); }
.letter { max-width: var(--measure); }
.letter p { color: var(--tx); }
.letter .joke { border-left: 2px solid var(--gold); padding: 4px 0 4px var(--sp-3); margin: 0 0 var(--sp-4); }
.letter .joke p { color: var(--tx-2); }
.letter .sig { margin-top: var(--sp-4); color: var(--tx-3); }
.letter .sig b { display: block; font-weight: var(--w-medium); color: var(--tx); }
.fit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--col-gap); margin-top: var(--sp-5); }
.fit > div { border-top: 1px solid var(--rule-2); padding-top: var(--sp-3); }
.what-fig { margin-top: var(--sp-4); }
.what .prose p { color: var(--tx); }
.where-fig { margin: var(--sp-5) 0 0; }
.arows { margin-top: var(--sp-5); }
.ar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--col-gap); align-items: center; margin-bottom: var(--sp-6); }
.ar:last-child { margin-bottom: 0; }
.ar-trio { grid-template-columns: 1fr; }
.ar .st-phone { display: none; }
.ar .st-desk { grid-column: 1; grid-row: 1; }
.ar .txs { grid-column: 2; grid-row: 1; display: grid; row-gap: var(--sp-4); }
.ar-trio .txs { grid-column: 1; grid-row: 2; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--sp-4); margin-top: var(--sp-3); }
.pa-tx { max-width: 440px; scroll-margin-top: 90px; }
.ar-trio .pa-tx { scroll-margin-top: 480px; }
.pn { color: var(--tx); margin: 0; font-weight: var(--w-medium); }
.plabel { color: var(--tx-3); margin: var(--sp-1) 0 0; }
.pspec { color: var(--tx); margin: var(--sp-2) 0 0; }
.prole { margin: var(--sp-1) 0 0; }
.pk { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--blue); text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }

/* ---------- roots ---------- */
.roots { max-width: var(--measure); }
.roots h2 { margin: var(--sp-5) 0 var(--sp-3); }
.roots .epi { font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--tx); margin: 0 0 var(--sp-1); }
.roots .by { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--tx-3); margin-bottom: var(--sp-1); }
.roots .gfx { margin: var(--sp-5) 0; }
.roots .actions { margin-top: var(--sp-3); }

/* ---------- how it scales: every section opens the same way (label slot, title), text aligned to the title ---------- */
.scale-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--col-gap); align-items: start; }
.scale-row h2, .scale-col h2 { margin: 0 0 var(--sp-3); }
.scale-row .prose { padding-top: var(--label-slot); }
.scale-cols { display: grid; gap: var(--col-gap); }
.scale-cols.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); }
.scale-cols.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.scale-col[id] { scroll-margin-top: 40px; }
.tag { display: block; min-height: calc(var(--fs-label) * var(--lh-label)); color: var(--gold); margin: 0 0 var(--sp-2); }
.scale-bet { max-width: var(--measure-lead); }

/* ---------- notes ---------- */
.notes-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--col-gap); margin-top: var(--sp-5); }
.nl-h { color: var(--tx-3); margin: 0 0 var(--sp-1); }
.nl { list-style: none; margin: 0; padding: 0; }
.nl li { border-top: 1px solid var(--rule-2); }
.nl li:last-child { border-bottom: 1px solid var(--rule-2); }
.nl a { display: block; padding: var(--sp-2) 0; color: var(--tx); text-decoration: none; }
.nl a:hover, .nl a:focus-visible { color: var(--blue); }
.nl-d { display: block; margin: -8px 0 var(--sp-2); font-size: var(--fs-small); line-height: var(--lh-small); color: var(--tx-3); }
.note-col { max-width: var(--measure); }
.note-col.wide { max-width: none; }
.note-field { height: 70px; margin: 0 0 var(--sp-4); max-width: var(--measure); }
.note-field svg { display: block; width: 100%; height: 100%; }
.note p { color: var(--tx); }
.note-date { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--tx-3); margin: calc(-1 * var(--sp-2)) 0 var(--sp-3); }
.excerpt { border-left: 2px solid var(--line); padding: 2px 0 2px var(--sp-3); margin: var(--sp-3) 0 0; }
.note-back { margin-top: var(--sp-5); font-size: var(--fs-small); line-height: var(--lh-small); }
.note-back a { color: var(--blue); text-underline-offset: 5px; }
.pilot h2 { margin: 0; }
.lost-field { height: 70px; max-width: var(--measure); margin-bottom: var(--sp-4); }
.lost-field svg { display: block; width: 100%; height: 100%; }

/* ---------- the diagnostic ---------- */
.diag-view > *:not(.diag-qs):not(.read):not(.read-actions):not(.read-feedback) { max-width: var(--measure-lead); }
/* content that arrives late gets its room up front: the diagnostic and the private read fill the first screen, so whatever
   replaces the first lines (a notice, the read) never moves anything a reader can already see (tools/cls.mjs) */
.diag-page .diag, #read-page { min-height: calc(100svh - var(--head) - var(--sp-6) + 2 * var(--clear)); }   /* + the clearing of what follows, which would otherwise reach into the first screen */
.diag-intro p:not(.lede):not(.kicker):not(.diag-note):not(.diag-consent) { color: var(--tx); }
.diag-human { border-left: 2px solid var(--gold); padding: 2px 0 2px var(--sp-3); margin-top: var(--sp-3); color: var(--tx); }
.diag-consent, .diag-note, .diag-help, .diag-err, .diag-clock, .diag-prog li, .diag-sent dt, .read-brand, .ew-cta-note, .ew-disprove, .ew-cannot-tell__question, .ew-walk__intro, .ew-report-banner--thin, .diag-soft {
  font-size: var(--fs-small); line-height: var(--lh-small); }
.diag-consent { color: var(--tx-2); margin-top: var(--sp-3); }
.diag-consent a, .diag-err a, .diag-done a, .diag-notice a:not(.btn) { color: var(--blue); text-underline-offset: 4px; }
.diag-note { color: var(--tx-3); margin-top: var(--sp-2); }
.diag-msg { border-left: 2px solid var(--gold); padding: var(--sp-1) 0 var(--sp-1) var(--sp-2); color: var(--tx); margin: 0 0 var(--sp-3); }
.diag-err { color: var(--gold); font-weight: var(--w-medium); margin: var(--sp-1) 0 0; }
.diag-label, .diag-qt { display: block; font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--tx); margin: 0 0 var(--sp-1); }
.diag-opt { margin-left: var(--sp-2); color: var(--tx-3); vertical-align: 2px; }
.diag-help { color: var(--tx-2); margin: 0 0 var(--sp-2); }
.diag textarea, .diag input[type=text], .diag input[type=email], .diag select {
  width: 100%; font: inherit; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--tx); background: var(--bg);
  border: 1px solid var(--ctl); border-radius: 3px; padding: 12px 14px; min-height: 48px; }
.diag textarea { resize: vertical; }
.diag textarea:focus, .diag input:focus, .diag select:focus { outline: 2px solid var(--line); outline-offset: 1px; border-color: var(--line); }
.diag [aria-invalid="true"] { border-color: var(--gold); }
.diag-row { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.diag-row input { flex: 1 1 260px; }
.diag-q { border: 0; padding: 0; margin: 0 0 var(--sp-4); min-width: 0; }
.diag-q legend { padding: 0; }
.diag-radios { display: grid; gap: var(--sp-1); }
.diag-radios.row { grid-template-columns: repeat(3, auto); justify-content: start; gap: var(--sp-1) var(--sp-3); }
.diag-radio { display: flex; gap: 12px; align-items: center; min-height: 44px; color: var(--tx); cursor: pointer; }
.diag-radio input { width: 20px; height: 20px; accent-color: var(--line); margin: 0; flex: none; }
.diag-qs { display: grid; grid-template-columns: 200px minmax(0, var(--measure)); gap: var(--sp-5); align-items: start; }
.diag-prog ol { list-style: none; margin: var(--sp-1) 0 0; padding: 0 0 0 22px; position: relative; }
.diag-prog ol::before { content: ""; position: absolute; left: 4px; top: 8px; bottom: 8px; width: 1px; background: var(--rule-2); }
.diag-prog li { position: relative; color: var(--tx-3); padding: 6px 0; }
.diag-prog li::before { content: ""; position: absolute; left: -22px; top: 12px; width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--dg); background: var(--here); }
.diag-prog li.done { color: var(--tx-2); }
.diag-prog li.done::before { background: var(--line); border-color: var(--line); }
.diag-prog li.now { color: var(--tx); font-weight: var(--w-medium); }
.diag-prog li.now::before { border: 2px solid var(--line); width: 11px; height: 11px; left: -23px; top: 11px; }
.diag-where { margin-bottom: var(--sp-3); }
.diag-details { margin-bottom: var(--sp-4); }
.diag-soft { color: var(--tx); border-left: 2px solid var(--line); padding: 6px 0 6px var(--sp-2); }
.diag-nav { display: flex; justify-content: space-between; gap: var(--sp-2); margin-top: var(--sp-2); }
.diag-nav .btn[disabled] { opacity: .5; }
.diag-settle { height: 120px; margin: 0 0 var(--sp-4); max-width: var(--measure); }
.diag-settle svg { display: block; width: 100%; height: 100%; }
.settle-a { animation: settle-out 180s ease-out both; }   /* about the usual wait (page-copy: two to four minutes) */
.settle-b { animation: settle-in 180s ease-in both; }
@keyframes settle-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes settle-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .settle-a { display: none; } .settle-b { animation: none; opacity: 1; } }
.diag-clock { color: var(--tx-2); margin-top: var(--sp-3); }
.diag-clock time { font-variant-numeric: tabular-nums; color: var(--tx); font-weight: var(--w-medium); margin-left: var(--sp-1); }
.diag-slow { color: var(--tx); }
.diag-sent { margin-top: var(--sp-4); border-top: 1px solid var(--rule-2); padding-top: var(--sp-2); }
.diag-sent summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; color: var(--blue); }
.diag-sent dl { margin: var(--sp-1) 0 0; }
.diag-sent dt { color: var(--tx-3); font-weight: var(--w-medium); margin-top: var(--sp-2); }
.diag-sent dd { margin: 4px 0 0; color: var(--tx); white-space: pre-wrap; }

/* ---------- the read: a document ---------- */
.read { max-width: var(--measure-lead); color: var(--tx); }
.read-head { display: grid; grid-template-columns: 1fr auto; align-items: end; row-gap: var(--sp-2); margin-bottom: var(--sp-3); }
.read-field { grid-column: 1 / -1; height: 56px; }
.read-field svg { display: block; width: 100%; height: 100%; }
.read-head .kicker { margin: 0; }
.read-brand { margin: 0; color: var(--tx-3); }
.ew-read-headline { font-size: var(--fs-title); line-height: var(--lh-title); font-weight: var(--w-light); letter-spacing: -.02em; color: var(--tx); margin: 0 0 var(--sp-4); text-wrap: pretty; }
.ew-report-banner--thin { border-left: 2px dashed var(--gold); padding: 6px 0 6px var(--sp-2); margin: calc(-1 * var(--sp-2)) 0 var(--sp-4); color: var(--tx); }
.ew-read-section { border-top: 1px solid var(--rule-2); padding-top: var(--sp-3); margin-top: var(--sp-4); }
.ew-read-section h2 { color: var(--blue); margin: 0 0 var(--sp-2); max-width: none; }
.ew-read-section h3 { font-size: var(--fs-body); line-height: var(--lh-body); font-weight: var(--w-medium); margin: 0 0 var(--sp-1); }
.ew-read-section p, .ew-read-section li { color: var(--tx); }
.ew-read-section strong { font-weight: var(--w-medium); }
.ew-quotes { list-style: none; margin: var(--sp-2) 0 0; padding: 0; }
.ew-quotes li { border-left: 2px solid var(--rule-2); padding: 2px 0 2px var(--sp-2); margin: 0 0 12px; }
.ew-read-section .ew-quotes li { color: var(--tx-2); }
.ew-quotes q { quotes: "“" "”"; }
.ew-read-section .ew-walk__intro { color: var(--tx-2); }
.ew-walk-steps { list-style: none; margin: var(--sp-3) 0 0; padding: 0; }
.ew-walk-step { position: relative; padding: 0 0 var(--sp-3) 44px; }
.ew-walk-step::before { content: ""; position: absolute; left: 7px; top: 10px; bottom: -10px; width: 0; border-left: 2px solid var(--tx); }
.ew-walk-step::after { content: ""; position: absolute; left: 0; top: 4px; width: 16px; height: 16px; box-sizing: border-box; border-radius: 50%; border: 8px solid var(--tx); }
.ew-walk-step:has(.ew-basis--inferred)::before { border-left-color: var(--line); }
.ew-walk-step:has(.ew-basis--inferred)::after { background: var(--here, var(--bg)); border: 2px solid var(--line); }
.ew-walk-step:has(.ew-basis--guess)::before { border-left: 2px dashed var(--dg); }
.ew-walk-step:has(.ew-basis--guess)::after { background: var(--here, var(--bg)); border: 2px dashed var(--dg); }
.ew-read-section li.ew-walk-step:has(.ew-basis--guess) { color: var(--tx-2); }
.ew-basis { display: block; margin: 0 0 4px; }
.ew-basis--observed { color: var(--tx); }
.ew-basis--inferred { color: var(--blue); }
.ew-basis--guess { color: var(--tx-3); }
.ew-read-section .ew-stops-at { position: relative; padding-left: 44px; margin-top: 0; }
.ew-stops-at::before { content: ""; position: absolute; left: 0; top: 7px; width: 16px; height: 16px; box-sizing: border-box; border-radius: 50%; border: 8px solid var(--gold); }
.ew-lens-item { margin: 0 0 var(--sp-4); }
.ew-read-section .ew-disprove { color: var(--tx-2); }
.ew-disprove strong { color: var(--tx); }
.ew-read-section .ew-first-look__what, .ew-read-section .ew-first-step__problem { font-size: var(--fs-lead); line-height: var(--lh-lead); }
.ew-read-section .ew-first-look__check { color: var(--tx-2); }
.ew-cannot-tell { list-style: none; margin: 0; padding: 0; }
.ew-cannot-tell li { padding: var(--sp-2) 0; border-bottom: 1px solid var(--rule); }
.ew-cannot-tell li:first-child { padding-top: 0; }
.ew-cannot-tell__question { display: block; margin-top: 6px; color: var(--tx-2); }
.ew-cannot-tell__question strong { color: var(--tx); }
.ew-involved, .ew-conversation-questions { padding-left: var(--sp-3); }
.ew-invitation .ew-cta, .read-short .ew-cta { display: inline-flex; align-items: center; min-height: 48px; padding: 0 var(--sp-3); font-size: var(--fs-small); line-height: var(--lh-small); font-weight: var(--w-medium); text-decoration: none; border-radius: 3px; background: var(--btn-bg); color: var(--btn-tx); margin: var(--sp-1) var(--sp-2) var(--sp-1) 0; }
.ew-cta-note { color: var(--tx-2); }
.ew-read-section .ew-invitation__label { font-weight: var(--w-medium); margin-bottom: 4px; }
.read-short h2 { font-size: var(--fs-title); line-height: var(--lh-title); }
.read-short p { color: var(--tx); }
.read-actions { margin-top: var(--sp-5); max-width: var(--measure-lead); }
.read-feedback { max-width: var(--measure-lead); margin-top: var(--sp-5); border-top: 1px solid var(--rule-2); padding-top: var(--sp-3); }
.read-feedback fieldset { border: 0; padding: 0; margin: 0 0 var(--sp-2); }
.read-feedback legend { font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--tx); padding: 0; margin-bottom: var(--sp-1); }
.read-thanks { margin-top: var(--sp-5); color: var(--tx); }


/* ---------- the read, v4: a composed document with drawings (read-v4.js) ---------- */
.rd { max-width: 880px; color: var(--tx); }
.rd > p, .rd-sec > p, .rd-sec > ul:not(.rd-2col), .rd-sec > ol:not(.rd-piles), .rd-sec > dl, .rd-sec > details, .rd-sec > div:not(.rd-fig):not(.rd-fallback):not(.rd-2col) { max-width: var(--measure-lead); }
.rd-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--sp-3); }
.rd-head .kicker { margin: 0; }
.rd-date { margin: 0; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--tx-3); }
.rd-one { max-width: 20em; margin-bottom: var(--sp-3); }
.rd-lead { color: var(--tx-2); }
.rd-thin { border-left: 2px dashed var(--gold); padding-left: var(--sp-2); color: var(--tx); margin-top: var(--sp-3); }
.rd-sec { margin-top: var(--sp-4); }        /* a document: the lower steps of the scale */
.rd-sec > .kicker { margin-bottom: var(--sp-2); }
.rd-answer { margin-bottom: var(--sp-3); max-width: 26em; }
.rd-fig { margin: 0 0 var(--sp-3); }
.rd-fig .rd-svg { display: block; width: 100%; height: auto; overflow: visible; }
.rd-tall { display: none; }
.rd-fig--arc .rd-wide { max-width: 520px; }
/* the map breaks out of the text measure to the full content width, as the through-line graphics do */
.rd-fig--map:not(.rd-fig--arc) .rd-wide { width: min(var(--w) - var(--gut), 100vw - 2 * var(--side) - var(--gut)); }
.rd-svg text { font-family: inherit; }
.rd-svg .d-name { font-size: var(--dfs-body); font-weight: var(--w-medium); fill: var(--tx); }
.rd-svg .d-body { font-size: var(--dfs-body); fill: var(--tx); }
.rd-svg .d-small { font-size: var(--dfs-small); fill: var(--tx-2); }
.rd-svg .d-cap { font-size: var(--dfs-label); font-weight: var(--w-medium); letter-spacing: var(--track-label); fill: var(--tx-3); }
.rd-svg .t1 { fill: var(--tx); } .rd-svg .t2 { fill: var(--tx-2); } .rd-svg .t3 { fill: var(--tx-3); } .rd-svg .tb { fill: var(--blue); } .rd-svg .tg { fill: var(--gold); }
.d-e { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.d-told { stroke: var(--tx); } .d-inferred { stroke: var(--line); } .d-guess { stroke: var(--dg); stroke-dasharray: 5 6; }
.d-head { stroke-dasharray: none; }
.d-return { stroke: var(--tx-3); stroke-width: 1.25; }
.d-return.d-head { stroke-width: 1.5; }
.d-bypass { stroke-width: 1.25; opacity: .45; }
.d-stall { stroke-dasharray: none; }
.d-dot-told { fill: var(--tx); }
.d-dot-inferred { fill: var(--bg); stroke: var(--line); stroke-width: 2; }
.d-dot-guess { fill: var(--bg); stroke: var(--dg); stroke-width: 2; stroke-dasharray: 3 3; }
.d-gold { fill: var(--gold); }
.d-blind { fill: var(--bg); stroke: var(--dg); stroke-width: 1; }
.d-hair { fill: none; stroke: var(--dg); stroke-width: 1; }
.d-base { fill: none; stroke: var(--dg); stroke-width: 1.5; }
.d-look { fill: none; stroke: var(--line); stroke-width: 1.5; }
.rd-list { margin: 0 0 var(--sp-1); font-size: var(--fs-small); line-height: var(--lh-small); color: var(--tx-2); }
.rd-list summary { cursor: pointer; color: var(--blue); min-height: 44px; display: flex; align-items: center; }
.rd-alt { margin: var(--sp-1) 0 var(--sp-2); padding-left: var(--sp-3); }
.rd-fallback .rd-alt { font-size: var(--fs-body); line-height: var(--lh-body); }
.rd-bw { font-size: var(--fs-label); letter-spacing: var(--track-label); text-transform: uppercase; font-weight: var(--w-medium); color: var(--tx-3); }
.rd-bw--told { color: var(--tx); } .rd-bw--inferred { color: var(--blue); } .rd-bw--gold { color: var(--gold); }
.rd-cap { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--tx-2); }
.rd-stops { position: relative; padding-left: 28px; }
.rd-stops::before { content: ""; position: absolute; left: 0; top: .45em; width: 14px; height: 14px; box-sizing: border-box; border-radius: 50%; border: 7px solid var(--gold); }
.rd-stops-label, .rd-dl { font-weight: var(--w-medium); color: var(--tx); }
.rd-text { max-width: var(--measure); }
.rd-piles { list-style: none; margin: 0 0 var(--sp-4); padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--sp-4); }
.rd-piles li { border-top: 1px solid var(--rule-2); padding-top: var(--sp-2); }
.rd-g { width: 20px; height: 20px; display: block; margin-bottom: var(--sp-1); overflow: visible; }
.rd-pile-name { font-weight: var(--w-medium); margin: 0 0 var(--sp-1); }
.rd-pile-means { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--tx-2); margin: 0; }
.rd-how { margin-top: var(--sp-3); }
.rd-lens { margin: 0; border-top: 1px solid var(--rule); padding-top: var(--sp-2); }
.rd-2col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3) var(--sp-4); list-style: none; margin: 0; padding: 0; }
.rd-step p { margin: 0 0 var(--sp-2); max-width: var(--measure); }
.rd-lens h3 { font-size: var(--fs-body); line-height: var(--lh-body); font-weight: var(--w-medium); margin-bottom: var(--sp-1); }
.rd-disprove { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--tx-2); }
/* cost: calm above the line, turbulent below it; the items sit in the field, not in boxes */
.rd-cost { position: relative; margin: 0; padding: var(--sp-3) 0; }
.rd-cost-field { position: absolute; inset: 0; }
.rd-cost-field svg { width: 100%; height: 100%; display: block; }
.rd-cost-seen, .rd-cost-hidden { position: relative; }
.rd-cost ul { list-style: none; margin: var(--sp-1) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); }
.rd-cost li span, .rd-cost .t-label { background: var(--bg); box-shadow: 0 0 0 6px var(--bg); }
.rd-cost .t-label { display: inline-block; color: var(--tx-3); margin: 0; }
.rd-cost-hidden li span { color: var(--tx); }
.rd-cost-seen li span { color: var(--tx-2); }
.rd-cost-line { position: relative; height: 0; border-top: 1px solid var(--dg); margin: var(--sp-3) 0; }
.rd-unknowns { list-style: none; margin: 0; padding: 0; }
.rd-unknowns li { position: relative; padding: var(--sp-2) 0 var(--sp-2) 32px; border-top: 1px solid var(--rule); }
.rd-unknowns li { padding-bottom: 0; }
.rd-unknowns .rd-g { position: absolute; left: 0; top: calc(var(--sp-2) + 2px); }
.rd-unknowns p { margin: 0; }
.rd-why { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--tx-2); margin-top: 4px !important; }
.rd-grid { margin: 0; }
.rd-grid div { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--sp-3); padding: var(--sp-2) 0; border-top: 1px solid var(--rule); }
.rd-grid dt { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--tx-3); padding-top: 2px; }
.rd-grid dd { margin: 0; }
.rd-qlabel { margin-bottom: var(--sp-1); }
.rd-questions { padding-left: var(--sp-3); }
.rd-cta { position: relative; margin-top: var(--sp-4); display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); }
.rd-cta-note { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--tx-2); }
.rd-end { position: absolute; left: calc(var(--gx) - var(--gut) - 8px); top: 16px; width: 16px; height: 16px; border-radius: 50%; background: var(--gold); }
@media (max-width: 959px) {
  .rd-wide { display: none; }
  .rd-tall { display: block; max-width: 460px; }
  .rd-grid div { grid-template-columns: 1fr; gap: 4px; }
}
@media (max-width: 720px) { .rd-2col { grid-template-columns: 1fr; } }

/* print: its own small mapped set */
@media print {
  @page { size: A4; margin: 16mm 18mm 18mm; }
  :root, [data-ew-mode] {
    --bg: #fff; --here: #fff; --tx: #111; --tx-2: #3a3a3a; --tx-3: #5a5a5a; --rule: #ddd; --rule-2: #bbb; --dg: #777;
    --blue: #2f5f93; --gold: #7a5a2e; --line: #2f5f93; --fl: rgba(0,0,0,.18); --btn-bg: #fff; --btn-tx: #111;
    --fs-title: 21pt; --fs-lead: 13pt; --fs-body: 10.5pt; --fs-small: 9.5pt; --fs-label: 8pt;
    --lh-body: 1.5; --lh-lead: 1.4; --lh-small: 1.45;
    --sp-2: 8pt; --sp-3: 12pt; --sp-4: 18pt; }
  body { background: #fff; }
  .nav, footer, .tl-seg, .read-actions, .read-feedback, .read-thanks, .sr { display: none; }
  .diag-page { padding: 0; }
  .wrap { width: auto; padding: 0; }
  .read { max-width: none; }
  .ew-read-section { break-inside: auto; }
  .ew-read-section h2, .ew-invitation__label, .ew-first-step__involved, .ew-basis, .ew-walk__intro, .ew-lens-item h3 { break-after: avoid; }
  .ew-stops-at { break-before: avoid; break-inside: avoid; }
  .ew-read-section h2 + p, .ew-first-look__what { break-before: avoid; }
  p { orphans: 3; widows: 3; }
  .ew-conversation-questions, .ew-quotes li, .ew-walk-step, .ew-lens-item, .ew-cannot-tell li { break-inside: avoid; }
  /* the line segment must not overflow its step, or Chrome refuses to break between steps */
  .ew-walk-step { padding-bottom: 0; margin-bottom: 14pt; }
  .ew-walk-step::before { bottom: -14pt; }
  .ew-walk-step:last-child::before { bottom: 0; }
  .ew-invitation .ew-cta { display: block; background: none; color: #111; border: 0; min-height: 0; padding: 0; margin: 6pt 0 2pt; font-size: var(--fs-body); }
  .ew-invitation .ew-cta::after { content: attr(href); display: block; font-weight: var(--w-regular); font-size: var(--fs-small); color: #2f5f93; }
  .read-field .f-field { stroke: rgba(0,0,0,.2); }
  .rd { max-width: none; }
  .rd-wide { display: block !important; } .rd-tall { display: none !important; }
  .rd-fig--map:not(.rd-fig--arc) .rd-wide { width: auto; max-width: none; }
  .rd-sec { margin-top: 22pt; }
  .rd-fig, .rd-cost, .rd-piles, .rd-lens, .rd-unknowns li, .rd-grid div, .rd-step p { break-inside: avoid; }
  .rd-sec > .kicker, .rd-answer { break-after: avoid; }
  .rd-list { display: none; }
  .rd-end { display: none; }
  .rd-cost li span, .rd-cost .t-label { background: none; box-shadow: none; }
  .rd .ew-cta { background: none; color: #111; padding: 0; min-height: 0; display: block; }
  .rd .ew-cta::after { content: attr(href); display: block; font-weight: 400; font-size: var(--fs-small); color: #2f5f93; }
  .rd-sec:has(.rd-fig), .rd-sec--cost, .rd-answer { break-inside: avoid; }
  .rd-cost-field, .handon { display: none; }
}

/* ---------- landing pages (outside the menu): one thing, one proof, two ways in ---------- */
.lp-open h1 { max-width: 18em; }
.lp-band { padding: var(--sp-5) 0; }
.lp-gets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4) var(--col-gap); }
.lp-get { font-size: var(--fs-lead); line-height: var(--lh-lead); margin-bottom: var(--sp-1); }
.lp-gets p { margin: 0; max-width: var(--measure); }
.lp-claim { max-width: var(--measure-lead); }
.lp-proof { margin: var(--sp-4) 0 var(--sp-3); max-width: 880px; }
.lp-proof svg { display: block; width: 100%; height: auto; overflow: visible; }
.lp-tall { display: none; }
.pf-before { fill: var(--bg); stroke: var(--tx-3); stroke-width: 1.5; }
.pf-range { fill: none; stroke: var(--tx-3); stroke-width: 8; stroke-linecap: round; opacity: .35; }
.pf-gain { fill: none; stroke: var(--line); stroke-width: 2; }
.pf-floor { fill: none; stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 4; }
.lp-wk { fill: none; stroke: var(--tx-3); stroke-width: 2; stroke-linejoin: round; }
.lp-wk--mixed { stroke-dasharray: 4 5; opacity: .6; }
.lp-mixed { opacity: .6; }
.lp-switch { fill: none; stroke: var(--gold); stroke-width: 1; }
.lp-clean { fill: var(--bg); stroke: var(--gold); stroke-width: 2; }
.lp-grid { opacity: .5; }
.lp-fh { margin-top: var(--sp-5); }
.lp-fl { max-width: var(--measure-lead); }
.lp-receipt { max-width: 880px; }
.lp-shots { list-style: none; margin: 0 0 var(--sp-2); padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); align-items: start; }
.lp-shots a { display: block; border: 1px solid var(--rule); border-radius: 3px; overflow: hidden; cursor: zoom-in; }
.lp-shots img { display: block; width: 100%; height: auto; }
.lp-cap { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--tx-2); max-width: var(--measure-lead); margin: 0 0 var(--sp-1); }
.zoom { border: 0; padding: 0; background: var(--bg); max-width: min(1000px, 94vw); border-radius: 3px; cursor: zoom-out; }
.zoom::backdrop { background: rgba(0, 0, 0, .72); }
.zoom img { display: block; width: 100%; height: auto; }
@media (max-width: 959px) { .lp-wide { display: none; } .lp-tall { display: block; max-width: 460px; } .lp-gets { grid-template-columns: minmax(0, 1fr); } }

/* ---------- responsive ---------- */
@media (max-width: 1279px) {
  .door-field { display: none; }
  .door { border-top-color: var(--rule-2); }
  .door::before { content: ""; position: absolute; left: calc(var(--gx) - var(--gut) - 7px); top: -8px; width: 14px; height: 16px; background: var(--here); border-top: 1px solid var(--dg); border-bottom: 1px solid var(--dg); }
}
/* ---------- even columns (STYLE.md): side by side, label slots, headings and bodies each start on one line ----------
   .even rows share their tracks (subgrid): label, heading, body (.r2: heading, body). Text beside a title starts on the
   title's capitals. Checked by tools/align.mjs inside check.mjs. Below 960 every group stacks and none of this applies. */
@media (min-width: 960px) {
  .even { grid-auto-rows: auto; row-gap: 0; --even-rows: 3; }
  .even.r2 { --even-rows: 2; }
  .even > * { display: grid; grid-row: span var(--even-rows); grid-template-rows: subgrid; row-gap: 0; align-content: start; }
  .lp-gets.even > :nth-child(n+3) { margin-top: var(--sp-4); }
  .two > .shape { margin-top: calc(-1px - var(--sp-2)); }          /* the cards' rule sits above, their labels on the kicker's line */
  .scale-row .prose, .pilot > .prose, .what > .prose { margin-top: var(--beside-title); }
  .aside > p { padding-top: var(--label-slot); margin-top: var(--beside-title); }
  .who-block { margin-top: calc(var(--beside-title) - 1px); }     /* a lead-size heading beside a title */
}

@media (max-width: 1179px) {
  .gfx-scales .gfx-wide { display: none; }
  .gfx-scales .gfx-tall { display: block; max-width: 360px; }
}
@media (max-width: 1099px) {
  .gfx-upstream .gfx-wide { display: none; }
  .gfx-upstream .gfx-tall { display: block; max-width: 460px; margin-bottom: var(--sp-6); }
  .gfx-places .gfx-wide { display: none; }
  .gfx-places .gfx-tall { display: block; max-width: 300px; }
  .loops { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--sp-4); }
}
@media (max-width: 959px) {
  .two, .aside, .fit, .notes-cols, .scale-row, .scale-cols.n3, .scale-cols.n2, .seven div, .prices li, .door, .shape { grid-template-columns: 1fr; }
  .two, .aside, .fit, .notes-cols, .scale-cols.n3, .scale-cols.n2 { gap: var(--sp-4); }
  .scale-row { gap: 0; }
  .scale-row .prose { padding-top: 0; }
  .seven div, .prices li { gap: var(--sp-1); }
  .door { row-gap: 6px; }
  .prices h3 { grid-row: auto; }
  .cols3 { grid-template-columns: 1fr; gap: var(--sp-4); }
  .proc { grid-template-columns: 1fr; gap: 0; }
  .proc > li:last-child::after { display: none; }
  .proc li { padding: var(--sp-3) 0 var(--sp-3) 30px; border-bottom: 1px solid var(--rule-2); }
  .proc li::before { top: 36px; width: 8px; height: 8px; }
  .aside { margin-top: var(--sp-5); }
  .gfx-wide { display: none; }
  .gfx-tall { display: block; max-width: 460px; margin-bottom: var(--sp-5); }
  [data-ew-mode="light"] .loops { --fh: rgba(20,20,20,.48); }
  .fig { margin-top: var(--sp-4); }
  .loops { grid-template-columns: 1fr; row-gap: 0; margin-top: var(--sp-4); margin-left: calc(var(--gx) - var(--gut) - 1px); }
  .loops > li { padding-left: 26px; border-left: 2px solid var(--line); padding-bottom: var(--sp-4); }
  .loops > li:last-child { border-left-color: transparent; padding-bottom: 0; }
  .loopg .gs-desk { display: none; }
  .loopg .gs-phone { display: block; margin-left: -27px; width: calc(100% + 27px); max-width: 360px; }
  .loopg .entry { display: none; }
  .loops .tx { padding: var(--sp-2) 0 0; }
  .ar, .ar-trio { grid-template-columns: 1fr; margin-bottom: var(--sp-5); }
  .ar .st-desk { display: none; }
  .ar .st-phone { display: block; grid-column: 1; grid-row: 1; max-width: 460px; }
  .ar .txs, .ar-trio .txs { grid-column: 1; grid-row: 2; grid-template-columns: 1fr; margin-top: var(--sp-2); row-gap: var(--sp-4); }
  .ar-trio .txs { row-gap: 0; }
  .ar-trio .pa-tx { padding: var(--sp-2) 0; border-top: 1px solid var(--rule-2); scroll-margin-top: 90px; }
  .ar-trio .pa-tx:last-child { border-bottom: 1px solid var(--rule-2); }
  .diag-qs { grid-template-columns: 1fr; gap: var(--sp-3); }
  .diag-prog ol { display: flex; gap: 6px; padding: 0; margin: 0; }
  .diag-prog ol::before { display: none; }
  .diag-prog li { padding: 0; width: 22px; height: 12px; }
  .diag-prog li span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .diag-prog li::before { left: 0; top: 0; }
  .diag-prog li.now::before { left: -1px; top: -1px; }
  .diag-radios.row { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .tl-h::before { width: 10px; height: 10px; left: calc(var(--gx) - var(--gut) - 5px); top: calc(.6em - 5px); }
  .tl-knot { width: 84px; height: 106px; left: calc(var(--gx) - var(--gut) - 42px); top: calc(.6em - 53px); }
  .tl-h.knotted { padding-left: 22px; }
  .gfx-tall { max-width: none; }
  .gfx-roots .gl { transform: none; }
  .gfx-roots .gl:nth-child(1) { left: 71% !important; top: 1% !important; width: 29%; }
  .gfx-roots .gl:nth-child(2) { left: 0 !important; top: 36% !important; width: 26%; text-align: left; }
  .tl-gather { width: 64px; height: 64px; left: calc(var(--gx) - var(--gut) - 32px); top: calc(.6em - 32px); }
  .calm-strip { height: 64px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .bar { display: none; }
  .text, .after, .pause { transition: none; }
}