/* MedicoSense Innovations: one page in chapters over one fixed stage (port of v5-page/spheres-v5.css, the approved look).
   No JavaScript: a still light (the canvas's CSS background) and still pearls beside the words; worlds open as popovers.
   html.js (runtime) hands the pearls to the stage clock; html.gl hands their drawing to the WebGL canvas.
   Logical properties throughout, so a right-to-left language drops in later.
   Type is in rem (px/16), so a larger default font in the browser scales it; never a px font-size, and none on html. */
:root {
  --ink: #102a30; --text: #193237; --muted: #526468; --paper: #f4f1e9; --surface: #fffdfa;
  --teal: #2d7774; --copper: #a9603a; --sand: #d8c9ad; --rule: #d8dcd5;
  --serif: Palatino, "Palatino Linotype", Georgia, serif;
  --sans: "Avenir Next", Avenir, "Segoe UI", sans-serif;
  --gutter: max(24px, calc((100vw - 1240px) / 2));
  --col: 540px; /* the words column of every chapter; the stage keeps the pearls beside it */
  --k: 1;
}
* { box-sizing: border-box; }
html { background: var(--paper); color: var(--text); overflow-x: clip; scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; position: relative; font: 1rem/1.5 var(--sans); background: var(--paper); }
:focus-visible { outline: 2px solid var(--copper); outline-offset: 3px; border-radius: 2px; }
a { color: inherit; }

/* The stage: fixed behind the whole page. The still light is the light canvas's own background (the fallback and the
   no-JavaScript look); the WebGL path (html.gl) draws light and pearls on .pearls instead. */
.light { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; pointer-events: none;
  background: radial-gradient(60% 50% at 82% 26%, rgb(255 253 250 / .9), transparent 70%),
    radial-gradient(42% 60% at 92% 70%, color-mix(in srgb, var(--teal) 16%, transparent), transparent 70%),
    radial-gradient(55% 45% at 70% 88%, color-mix(in srgb, var(--sand) 55%, transparent), transparent 75%),
    radial-gradient(40% 40% at 60% 12%, color-mix(in srgb, var(--sand) 35%, transparent), transparent 75%), var(--paper); }
[dir="rtl"] .light { transform: scaleX(-1); }
.pearls { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; pointer-events: none; }
.pearls[hidden], .gl .light { display: none; }

/* Header: fixed; after the opening (html.past) it recedes into the corner (the name fades, the mark shrinks) */
.top { position: fixed; inset: 0 0 auto; z-index: 5; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 28px var(--gutter) 0; pointer-events: none; }
.top::before { content: ""; position: absolute; inset: 0 0 -36px; z-index: -1; background: linear-gradient(var(--paper) 58%, rgb(244 241 233 / 0)); opacity: 0; transition: opacity .3s ease-out; }
.top > * { pointer-events: auto; }
.past .top::before { opacity: 1; }
.mark { display: inline-flex; align-items: center; gap: 14px; min-height: 44px; text-decoration: none; color: var(--ink); }
.mark svg { width: 52px; height: 52px; overflow: visible; transition: scale .3s ease-out; transform-origin: 0 50%; }
[dir="rtl"] .mark svg { transform-origin: 100% 50%; }
.mark span { font: .9375rem/1.3 var(--sans); letter-spacing: .02em; color: var(--muted); transition: opacity .3s ease-out, visibility .3s; }
.past .mark svg { scale: .7; }
.past .mark span { opacity: 0; visibility: hidden; }
.sun-core { fill: none; stroke: var(--ink); stroke-width: 1.4; }
.sun-ray { stroke: var(--ink); stroke-width: 1.4; stroke-linecap: round; stroke-dasharray: 8; animation: ray 1.4s cubic-bezier(.2,.7,.2,1) both; }
.sun-ray:nth-of-type(2n) { animation-delay: .12s; }
.sun-ray:nth-of-type(3n) { animation-delay: .24s; }
.sun-trail { fill: none; stroke: var(--teal); stroke-width: 1.4; stroke-linecap: round; stroke-dasharray: 60; animation: trail 1.8s .3s cubic-bezier(.2,.7,.2,1) both; }
@keyframes ray { from { stroke-dashoffset: 8; } }
@keyframes trail { from { stroke-dashoffset: 60; } }

.corner { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 4px; margin-inline-start: auto; font: .9375rem/1 var(--sans); color: var(--muted); }
.corner a, .corner button, .corner summary { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0 10px; color: var(--muted); text-decoration: none; font: inherit; background: none; border: 0; cursor: pointer; white-space: nowrap; }
.corner a:hover, .corner button:hover, .corner summary:hover { color: var(--ink); }
.langs { display: flex; align-items: center; }
.langs a { min-width: 44px; padding: 0 6px; }
.langs a[aria-current] { color: var(--ink); text-decoration: underline; text-decoration-color: var(--teal); text-underline-offset: 5px; }
.langs .sep { color: var(--rule); }
/* The unlabelled ring: a ring with a dot while moving, hollow when still (its name is only its accessible name) */
[data-ring][aria-pressed="true"] { color: var(--ink); }
.calm-dot { transition: opacity .2s ease-out; }
[data-ring][aria-pressed="true"] .calm-dot { opacity: 0; }
.menu { position: relative; }
.menu summary { list-style: none; }
.menu summary::-webkit-details-marker { display: none; }
.menu .cur { display: none; }
.menu ul { position: absolute; inset-inline-end: 0; top: 48px; z-index: 6; min-width: 200px; margin: 0; padding: 8px 0; list-style: none; background: var(--surface); border: 1px solid var(--rule); }
.menu li a { justify-content: flex-start; width: 100%; padding: 0 18px; color: var(--text); }
.menu li a[aria-current] { color: var(--ink); text-decoration: underline; text-decoration-color: var(--teal); text-underline-offset: 5px; }

/* Chapter rail (desktop and tablet): fine ticks on the inline-end edge; names appear only on hover or focus */
.rail { position: fixed; inset-inline-end: 14px; top: 50%; translate: 0 -50%; z-index: 5; }
.rail ol { margin: 0; padding: 0; list-style: none; }
.rail a { position: relative; display: flex; align-items: center; justify-content: flex-end; width: 44px; height: 44px; text-decoration: none; color: var(--ink); }
.rail a::after { content: ""; width: 14px; height: 1px; background: var(--muted); transition: width .2s ease-out, background-color .2s; }
.rail a[aria-current]::after { width: 28px; height: 1.5px; background: var(--ink); }
.rail span { position: absolute; inset-inline-end: 52px; padding: 6px 10px; white-space: nowrap; font: .875rem/1.2 var(--sans); background: radial-gradient(closest-side, var(--paper) 70%, rgb(244 241 233 / 0)); opacity: 0; transition: opacity .18s ease-out; pointer-events: none; }
.rail a:hover span, .rail a:focus-visible span { opacity: 1; }

/* Chapters: one column of words beside the stage; generous space; no cards or boxes */
main { position: relative; z-index: 2; pointer-events: none; } /* clicks fall through to the pearls; .copy turns them back on */
.chapter { position: relative; min-height: 100vh; padding: 20vh var(--gutter) 12vh; }
.chapter .copy { position: relative; isolation: isolate; max-width: var(--col); pointer-events: auto; }
/* A feathered paper glow behind each words block softens the light (never a visible edge: both axes fade out) */
.chapter .copy::before { content: ""; position: absolute; inset: -56px -88px; z-index: -1; pointer-events: none; background: rgb(244 241 233 / .84);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 88px, #000 calc(100% - 88px), transparent), linear-gradient(transparent, #000 56px, #000 calc(100% - 56px), transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 88px, #000 calc(100% - 88px), transparent), linear-gradient(transparent, #000 56px, #000 calc(100% - 56px), transparent);
  mask-composite: intersect; }
.bay { display: none; }
#opening { padding-top: 0; padding-bottom: 8vh; display: flex; flex-direction: column; }
#opening .words { padding-top: 168px; }
#opening .act { margin-top: 36px; }
h1 { margin: 0 0 22px; font: 400 2.875rem/1.15 var(--serif); color: var(--ink); }
.chapter h2 { margin: 0 0 22px; font: 400 2.25rem/1.15 var(--serif); color: var(--ink); }
.chapter p { margin: 0 0 12px; }
.lead { font: 1.375rem/1.45 var(--serif); color: var(--text); }
.quiet { font: .875rem/1.5 var(--sans); color: var(--muted); }
.steps { display: flex; flex-wrap: wrap; gap: 10px 34px; margin: 22px 0; padding: 0; list-style: none; counter-reset: s; font: 1.125rem/1.4 var(--serif); color: var(--ink); }
.steps li { counter-increment: s; display: flex; align-items: baseline; gap: 10px; }
.steps li::before { content: counter(s); font: .875rem/1 var(--sans); color: var(--teal); }
.lines, .pubs { margin: 0; padding: 0; list-style: none; }
.lines li { margin: 0 0 22px; }
.lines h3 { margin: 0 0 2px; font: 400 1.375rem/1.3 var(--serif); color: var(--ink); }
.lines p { font: 1rem/1.55 var(--sans); color: var(--text); }
.sub { margin: 52px 0 18px; font: 400 .875rem/1.4 var(--sans); letter-spacing: .08em; color: var(--muted); }
.pubs li { margin: 0 0 20px; }
.pubs .tag { margin: 0 0 2px; font: .8125rem/1.4 var(--sans); color: var(--muted); }
.pubs .title { margin: 0 0 2px; font: 1.0625rem/1.45 var(--serif); color: var(--text); text-align: start; }
.pubs .links { display: flex; gap: 6px; margin: 0; }
.pubs .links a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; padding-inline-end: 8px; font-size: .875rem; color: var(--ink); text-underline-offset: 4px; text-decoration-color: var(--teal); }

.cta, .mailto-fallback { position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 2px; font: 1.5625rem/1.2 var(--serif); color: var(--ink); text-decoration: none; background: none; border: 0; cursor: pointer; }
.mailto-fallback { text-decoration: underline; text-decoration-color: var(--teal); text-underline-offset: 6px; }
.cta .arrow { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
[dir="rtl"] .cta .arrow { transform: scaleX(-1); }
.cta .scribble { position: absolute; inset-inline-start: -4px; bottom: 2px; width: calc(100% - 20px); height: 12px; overflow: visible; }
[dir="rtl"] .cta .scribble { transform: scaleX(-1); }
.cta .scribble path { fill: none; stroke: var(--teal); stroke-opacity: .55; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 260; animation: draw 1s 1.1s cubic-bezier(.4,.1,.2,1) both; }
@keyframes draw { from { stroke-dashoffset: 260; } }
.who { display: block; min-height: 44px; text-decoration: none; } /* the founder lines link to About (spec 5.2) */
.founder { margin: 18px 0 0; font: .875rem/1.5 var(--sans); color: var(--muted); }
.chapter .creds { margin: -6px 0 0; font: .75rem/1.5 var(--sans); letter-spacing: .12em; color: var(--muted); } /* a quiet signature under the founder line */

/* The briefing composer: quiet hairline fields; it builds a mailto draft and stores and sends nothing.
   Without JavaScript its fields give way to the plain mailto link; with it, the link hides. */
.composer .row { display: flex; flex-direction: column; margin: 0 0 14px; }
.composer label { font: .8125rem/1.4 var(--sans); letter-spacing: .04em; color: var(--muted); }
.composer input, .composer select, .composer textarea { width: 100%; min-height: 44px; padding: 8px 0 6px; border: 0; border-bottom: 1px solid var(--muted); border-radius: 0; background: transparent; color: var(--ink); font: 1.125rem/1.4 var(--serif); }
.composer textarea { resize: vertical; min-height: 76px; }
.composer select { cursor: pointer; }
.composer .cta, .composer .mailto-fallback { margin-top: 14px; }
.composer .addr { margin: 4px 0 0; font: .875rem/1.5 var(--sans); overflow-wrap: anywhere; } /* a long address wraps at a large text size */
.composer .addr a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); text-underline-offset: 3px; text-decoration-color: var(--teal); }
.composer .note { margin-top: 10px; font: .875rem/1.5 var(--sans); color: var(--muted); }
/* The briefing cloud (family of the worlds' clouds): no box or edge. The middle lightens to Surface with the faintest teal;
   composer.js breathes and drifts it on the stage clock (transform) and blooms it in (opacity, scale). It is under the words
   and never moves them. */
.briefing-cloud { position: absolute; inset: -19% -16%; z-index: -1; pointer-events: none; will-change: transform, opacity;
  background: radial-gradient(closest-side, var(--surface) 60%, color-mix(in srgb, var(--teal) 4%, var(--surface)) 80%, color-mix(in srgb, var(--teal) 9%, var(--surface)) 100%);
  -webkit-mask: url(/assets/masks/briefing-cloud.svg) 0 0 / 100% 100% no-repeat; mask: url(/assets/masks/briefing-cloud.svg) 0 0 / 100% 100% no-repeat; }
html:not(.js) #briefing-form > :is(.row, #c-send), .js .mailto-fallback { display: none; }

footer { position: relative; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 28px; padding: 18px var(--gutter) 26px; font: .8125rem/1.5 var(--sans); color: var(--muted); }
footer::before { content: ""; position: absolute; inset: -40px 0 0; z-index: -1; background: linear-gradient(rgb(244 241 233 / 0), var(--paper) 40px); }
footer .legal a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; padding-inline: 6px; color: var(--ink); text-underline-offset: 3px; text-decoration-color: var(--teal); }

/* The field: fixed over the stage. Without JavaScript the pearls stand still in a box beside the words column (on
   tablets and phones, over the opening bay), each at a fraction of that box and clamped inside it.
   With JavaScript the field covers the viewport and the stage places every button from the pose it draws. */
.field { position: fixed; inset: 0; z-index: 1; pointer-events: none; }
html:not(.js) .field { inset-block: 100px 120px; inset-inline: calc(var(--gutter) + var(--col) + 96px) calc(var(--gutter) + 56px); }
.sphere {
  --size: max(44px, calc(var(--d, 76px) * var(--k)));
  position: absolute; width: var(--size); height: var(--size); padding: 0; border-radius: 50%; cursor: pointer; z-index: 3;
  border: 1px solid var(--rule); color: var(--ink); font: 500 .8125rem/1.2 var(--sans); letter-spacing: .03em;
  background: radial-gradient(circle at 32% 28%, var(--surface) 0%, color-mix(in srgb, var(--tint, var(--sand)) 14%, var(--surface)) 45%, color-mix(in srgb, var(--tint, var(--sand)) var(--rim, 60%), var(--surface)) 100%);
  box-shadow: 0 22px 26px -20px rgb(16 42 48 / .32);
  transform-origin: 50% 50%; pointer-events: auto;
}
html:not(.js) .sphere { inset-inline-start: clamp(0px, var(--x, .5) * 100% - var(--size) / 2, 100% - var(--size)); top: clamp(0px, var(--y, .5) * 100% - var(--size) / 2, 100% - var(--size)); }
.js .sphere { opacity: 0; inset: 0 auto auto 0; } /* the stage places and fades them in */
.sphere:focus-visible { outline-offset: 3px; border-radius: 50%; }
.sphere .nm { pointer-events: none; transition: opacity .3s ease-out; }
.sphere[data-kind="research"], .sphere[data-kind="concept"] { z-index: 2; }
.sphere[data-kind="research"] { box-shadow: 0 14px 16px -12px rgb(16 42 48 / .18); }
/* Names under the pearl (research, and any receded pearl) appear on hover or focus only */
.sphere[data-kind="research"] .nm, .sphere.small .nm { position: absolute; top: calc(100% + 6px); inset-inline-start: 50%; translate: -50% 0; scale: var(--inv, 1); transform-origin: 50% 0; white-space: nowrap; font-size: .78125rem; color: var(--ink); opacity: 0; transition: opacity .18s ease-out; }
[dir="rtl"] .sphere[data-kind="research"] .nm, [dir="rtl"] .sphere.small .nm { translate: 50% 0; }
.sphere[data-kind="research"]:is(:hover, :focus-visible) .nm, .sphere.small:is(:hover, :focus-visible) .nm { opacity: 1; }
.sphere.small .play { opacity: 0; }
.sphere:has(.play) { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.sphere .play { width: 16px; height: 16px; fill: none; stroke: var(--ink); stroke-width: 1.3; stroke-linejoin: round; pointer-events: none; transition: opacity .3s ease-out; }
/* Each pearl: diameter, rim and still spot (fractions of the box). The tint is its world's, from content (data-tint). */
[data-sphere="helsitrack"] { --d: 176px; --rim: 38%; --x: .48; --y: .36; }
[data-sphere="radsentry"] { --d: 156px; --rim: 26%; --x: .88; --y: .62; }
[data-sphere="heal-track"] { --d: 140px; --rim: 38%; --x: .42; --y: .74; }
[data-sphere="heart-trail"] { --d: 120px; --rim: 62%; --x: .9; --y: .27; }
[data-sphere="margin"] { --d: 76px; --rim: 70%; --x: .14; --y: .54; }
[data-sphere="pathonexus"] { --d: 60px; --rim: 70%; --x: .7; --y: .13; }
[data-sphere="clinnexus"] { --d: 68px; --rim: 70%; --x: .08; --y: .84; }
/* Tints (spec 5.3): one map for a pearl and its world; an unknown hex keeps the sand default */
[data-tint="#2d7774"] { --tint: var(--teal); }
[data-tint="#a9603a"] { --tint: var(--copper); }
[data-tint="#d8c9ad"] { --tint: var(--sand); }
[data-tint="#102a30"] { --tint: var(--ink); }
[data-tint="#c8a485"] { --tint: color-mix(in srgb, var(--copper) 35%, var(--sand)); } /* sand-copper */
/* GL path: the shader draws the pearls; the buttons keep only their names, focus ring and hit area */
.gl .sphere { background: transparent; border-color: transparent; box-shadow: none; }
/* While a world is open the other pearls keep drifting, dimmed and nameless, so no stray name reads into the cloud */
:root:has(.slip:popover-open) .sphere :is(.nm, .play) { opacity: 0; }

/* Cloud worlds: each pearl blooms into a soft cloud of its tint beside the words. No card: the popover box is
   transparent and holds the words; .cloud is a feathered layer 1/0.6 its size, so the words sit in the cloud's light
   middle and every edge dissolves into the page. The stage drives the bloom (.bloom); otherwise a 200 ms fade. */
.slip { position: fixed; inset-block: 0; inset-inline: auto calc(var(--gutter) + 56px); width: fit-content; height: fit-content; max-height: none; margin: auto 0;
  overflow: visible; padding: 0; background: none; border: 0; color: var(--text); text-align: center;
  opacity: 0; transition: opacity .2s ease-out, overlay .2s allow-discrete, display .2s allow-discrete; }
.slip:popover-open { opacity: 1; }
@starting-style { .slip:popover-open { opacity: 0; } }
.slip.bloom { transition: none; }
::backdrop { background: transparent; }
.in { position: relative; width: 408px; padding: 4px 0 0; }
.slip[data-size="large"] .in { width: 384px; }
.slip[data-size="small"] .in { width: 244px; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; } /* a link wider than the box overflows evenly, inside its cloud */
.slip:has(video) .in { width: 400px; }
.cloud { position: absolute; inset: -40%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, var(--surface) 48%, color-mix(in srgb, var(--tint, var(--sand)) 9%, var(--surface)) 64%, color-mix(in srgb, var(--tint, var(--sand)) 24%, var(--surface)) 82%, color-mix(in srgb, var(--tint, var(--sand)) 34%, var(--surface)) 100%);
  -webkit-mask: url(/assets/masks/cloud-mask.svg) 0 0 / 100% 100% no-repeat; mask: url(/assets/masks/cloud-mask.svg) 0 0 / 100% 100% no-repeat; }
.slip:has(video) .cloud { inset-block: -30%; } /* the film world is tall: a flatter feather keeps the cloud on the screen */
.slip .label { margin: 0 0 4px; font: .8125rem/1.4 var(--sans); letter-spacing: .08em; color: var(--muted); }
.slip h2 { margin: 0 0 16px; font: 400 3.25rem/1.08 var(--serif); letter-spacing: -.005em; color: var(--ink); overflow-wrap: anywhere; } /* a long name at a large text size wraps inside its cloud (R17) */
.slip h2:focus { outline: none; } /* a heading, not a control: focus lands here so the world is read from the top */
.slip .line { max-width: 16em; margin: 0 auto 18px; font: 1.375rem/1.45 var(--serif); color: var(--text); text-wrap: pretty; }
.slip .status { display: flex; align-items: center; justify-content: center; gap: 9px; margin: 0 0 10px; font: 1rem/1.4 var(--sans); color: var(--muted); }
.slip .status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--tint, var(--sand)); }
.slip .extra { margin: -4px 0 12px; font: .9375rem/1.4 var(--sans); color: var(--muted); }
.slip .cta { font-size: 1.3125rem; white-space: nowrap; } /* the name never wraps away from its arrow and underline */
.slip .cta .scribble path { animation-delay: .45s; }
.slip[data-size="small"] h2 { margin-bottom: 12px; font-size: 2.375rem; }
.slip[data-size="small"] .line { max-width: none; margin-bottom: 8px; font-size: 1.125rem; }
.slip:has(video) h2 { margin-bottom: 12px; font-size: 3rem; }
.slip .x { position: absolute; top: -10px; inset-inline-end: -14px; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ink); font: 1.5rem/1 var(--sans); cursor: pointer; }
/* The film: its own feathered cloud, quiet controls under it */
.slip video { display: block; width: 540px; height: auto; aspect-ratio: 16 / 9; margin: 0 -70px 2px; background: transparent; cursor: pointer;
  -webkit-mask: url(/assets/masks/film-mask.svg) 0 0 / 100% 100% no-repeat; mask: url(/assets/masks/film-mask.svg) 0 0 / 100% 100% no-repeat; }
html:not(.js) .ctl { display: none; } /* without JavaScript the video's own controls play the film (M4) */
.ctl { display: flex; align-items: center; gap: 10px; width: 300px; margin: 0 auto 6px; }
.pp { flex: none; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ink); cursor: pointer; }
.pp svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; }
.pp .bars, .pp.on .tri { display: none; }
.pp.on .bars { display: inline; }
[dir="rtl"] .pp .tri { transform: scaleX(-1); transform-origin: center; }
.bar { flex: 1; height: 9px; display: flex; align-items: center; } /* a hairline inside a taller box */
.bar i { display: block; width: 100%; height: 1px; background: linear-gradient(var(--ink), var(--ink)) no-repeat 0 0 / calc(var(--p, 0) * 100%) 100%, color-mix(in srgb, var(--ink) 22%, transparent); }
[dir="rtl"] .bar i { background-position: 100% 0, 0 0; }
.slip .caption { max-width: 30em; margin: 0 auto 2px; font: .9375rem/1.5 var(--sans); color: var(--muted); }

/* Legal pages and the 404 page */
.legal-page { max-width: 680px; margin: 0 auto; padding: 48px 24px 80px; }
.legal-page h1 { font-size: 2.375rem; }
.legal-page h2 { margin: 32px 0 8px; font: 400 1.5rem/1.25 var(--serif); color: var(--ink); }
.legal-page .draft { color: var(--muted); font-style: italic; } /* Muted, not Copper: Copper on Paper is 4.2:1 */
.legal-page > p > a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; color: var(--ink); text-decoration-color: var(--teal); text-underline-offset: 4px; }

/* Calm (the ring) and reduced motion: nothing moves by itself; every transition becomes a 200 ms fade */
:root[data-calm] *, :root[data-calm] *::before, :root[data-calm] *::after { animation: none !important; transition: opacity .2s ease-out !important; }
:root[data-calm] .slip { transition: opacity .2s ease-out, overlay .2s allow-discrete, display .2s allow-discrete !important; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: opacity .2s ease-out !important; }
  .slip { transition: opacity .2s ease-out, overlay .2s allow-discrete, display .2s allow-discrete !important; }
}

/* Tablet and phone: one column; each chapter opens with an empty bay where its pearls gather (pearls never sit on
   words). */
@media (max-width: 1000px) {
  :root { --k: .75; --col: 640px; }
  .bay { display: block; height: 300px; margin: 0 calc(-1 * var(--gutter)); }
  #opening .bay { height: 380px; }
  #opening .words { padding-top: 132px; }
  #opening .act { margin-top: 0; }
  .chapter { min-height: 0; padding-top: 10vh; padding-bottom: 6vh; }
  #opening { padding-top: 0; }
  .slip { inset-inline: 0; margin: auto; } /* centred: the column is too wide to stand beside */
  /* Without JavaScript (R6) the still pearls stand in the opening bay in v5's bay formation (F.bay[0]): anchor
     positioning lays the field over that bay whatever the headline's height. The other bays stay closed: no pearls
     gather there. A browser without anchor positioning keeps the field in flow above the headline. */
  html:not(.js) .bay { display: none; }
  @supports (anchor-name: --a) {
    html:not(.js) #opening .bay { display: block; anchor-name: --opening-bay; }
    html:not(.js) .field { position: absolute; position-anchor: --opening-bay; inset-block: anchor(start) anchor(end); inset-inline: anchor(start) anchor(end); margin: 24px var(--gutter); }
  }
  @supports not (anchor-name: --a) {
    html:not(.js) .field { position: relative; inset: auto; height: 280px; margin: 96px var(--gutter) 0; }
    html:not(.js) #opening .words { padding-top: 24px; }
  }
  [data-sphere="helsitrack"] { --x: .3; --y: .3; }
  [data-sphere="radsentry"] { --x: .7; --y: .5; } /* v5 .74 .44 and .76 .13: nudged so the two still pearls do not touch */
  [data-sphere="heal-track"] { --x: .36; --y: .76; }
  [data-sphere="heart-trail"] { --x: .8; --y: .13; }
  [data-sphere="margin"] { --x: .08; --y: .58; }
  [data-sphere="pathonexus"] { --x: .9; --y: .86; }
  [data-sphere="clinnexus"] { --x: .66; --y: .84; }
}
@media (max-width: 700px) {
  :root { --gutter: 16px; --k: .58; }
  .top { padding-top: 16px; }
  .mark { gap: 10px; }
  .mark svg { width: 38px; height: 38px; }
  .mark span { font-size: .8125rem; }
  .corner { font-size: .875rem; gap: 0; }
  .corner a, .corner button, .corner summary { padding: 0 5px; }
  .langs a { padding: 0 2px; }
  .rail { display: none; }
  .past .mark span { display: none; } /* frees the room the current chapter's name needs */
  .past .menu .cur { display: inline; } /* on phones the menu names the current chapter once the name has receded */
  .menu .cur::before { content: " · "; white-space: pre; }
  .bay { height: 230px; }
  #opening .bay { height: 360px; }
  #opening .words { padding-top: max(96px, 6rem); } /* clears the header, which grows with the text size and may wrap */
  @supports not (anchor-name: --a) { html:not(.js) .field { height: 240px; margin-top: 68px; } }
  h1 { font-size: 1.875rem; margin-bottom: 10px; }
  .chapter h2 { font-size: 1.875rem; }
  .chapter .copy::before { inset: -32px -16px; }
  .briefing-cloud { inset: -64px calc(10px - var(--gutter)); } /* the bay above holds the pearls: the cloud spans the screen instead of rising into it; 10 px in from its edges, so its breath and drift never widen the page */
  .lead { font-size: 1.25rem; }
  .steps { flex-direction: column; }
  .sphere { font-size: .71875rem; letter-spacing: .02em; }
  .cta, .mailto-fallback { font-size: 1.375rem; }
  .founder { margin-top: 8px; font-size: .8125rem; }
  .chapter .creds { font-size: .6875rem; }
  footer { gap: 2px 16px; padding: 14px var(--gutter) 20px; font-size: .75rem; }
}
/* Phones and short screens: a world fills the screen and scrolls inside itself */
@media (max-width: 700px), (max-height: 600px) {
  .slip { inset: 0; width: 100%; height: 100%; margin: 0; padding: 120px 0; overflow: hidden auto; overscroll-behavior: contain; display: flex; }
  .slip:not(:popover-open) { display: none; }
  .slip::backdrop { background: rgb(244 241 233 / .35); }
  .slip .in, .slip[data-size] .in, .slip:has(video) .in { width: min(340px, calc(100% - 48px)); margin: auto; }
  .slip[data-size="small"] .in { width: min(260px, calc(100% - 64px)); }
  .slip h2 { font-size: 2.625rem; }
  .slip[data-size="small"] h2 { font-size: 2.125rem; }
  .slip:has(video) h2 { font-size: 2.375rem; }
  .slip .line { font-size: 1.25rem; }
  .slip[data-size="small"] .line { font-size: 1.125rem; }
  .slip .cta { font-size: 1.125rem; white-space: normal; } /* a long name wraps on a narrow screen; the arrow stays beside it */
  .slip video { width: 100vw; margin-inline: calc(50% - 50vw); }
  .ctl { width: 100%; }
  .slip .x { position: sticky; top: 12px; z-index: 1; display: block; margin: -14px -14px -30px auto; } /* stays on screen as the world scrolls; takes no room */
}
/* A world taller or wider than the screen at a large text size (R17): the phone layout, scrolling inside itself.
   worlds.js measures each world as it opens and sets .fill. */
.slip.fill { inset: 0; width: 100%; height: 100%; margin: 0; padding: 120px 0; overflow: hidden auto; overscroll-behavior: contain; display: flex; }
.slip.fill:not(:popover-open) { display: none; }
.slip.fill .in { width: min(calc(100% - 48px), 24rem); margin: auto; } /* its measure grows with the text */
.slip.fill .cta { white-space: normal; }
.slip.fill .x { position: sticky; top: 12px; z-index: 1; display: block; margin: -14px -14px -30px auto; }