/* regrowth.studio · the home, in its own genre: the Orthographic Plate.
   A drafting table in parallel projection: hairline ink on cream stock, one Re-yellow datum (the axis, whose flower is the door at V,
   and the one plane that rises up it, keyed in ink), the Audit in red, mono plate labels. No vanishing point, no glow, no gradient; it borrows nothing from the pond or the board (design/DESIGN-SYSTEM.md).
   The stage geometry lives in three custom properties (--ax, --line, --top) that plate.js reads, so CSS and JS draw the same ⊥.
   The ⊥ is a plumb line: in I it swings between the poles, hung from its cap; the plane rising up it stills it, and it hangs
   true at 90°. The chrome is shared (chrome.css: the one header with the ♪, the lotus button, the sheets); the plate clears the
   header (var(--head-h), plate.js barFoot) and keeps the lotus button's corner free (var(--fab-reserve)). */
@font-face{font-family:"Melodrama";src:url("assets/fonts/Melodrama-Variable.woff2") format("woff2");font-weight:300 700;font-display:swap}
:root{
  --paper:#F4EFE2; --sheet:#FBF8F0; --ink:#1F1C16; --re:#F2CB38; --audit:#B8321F; --muted:#625B4E; --rule:#D3CAB6; --grid:#8E8674; --debt:#1F1C16;
  --display:"Melodrama",Georgia,serif; --voice:Georgia,"Times New Roman",serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans",sans-serif; --mono:ui-monospace,"SF Mono",Consolas,monospace;
}
@media (prefers-color-scheme:dark){:root{--paper:#171511; --sheet:#1F1C17; --ink:#EDE6D6; --audit:#E0634B; --muted:#A99F90; --rule:#3A342B; --grid:#7C7466; --debt:#EDE6D6}}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scrollbar-gutter:stable} /* stable: a sheet opened over the plate (chrome.css, html.sheet-open) stops the scroll without moving the page */
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
h1,h2,h3,p,figure,ol,ul{margin:0}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration-color:var(--re);text-decoration-thickness:2px;text-underline-offset:4px} /* one link style (the final loop, item 23) */
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.mono{font:500 11px/1.4 var(--mono);letter-spacing:.16em;text-transform:uppercase}

/* ---------- the plate: one pinned stage, five steps (elevation · axonometric · plan · the studio · the pond) ---------- */
.plate-sec{position:relative;overflow-anchor:none;display:grid;grid-template-columns:minmax(0,1fr)} /* the plate's own moves never anchor the scroll: V's switch turns the view in place (plate.js keeps the scroll) */
/* one grid cell holds the three: the steps of I to IV, the stage, and V's step, in that order in the page (index.html), so the
   keyboard and a screen reader meet the story, then the page lotuses the stage carries at V, then V's doors. The stage spans both
   rows and is pinned at the top while they scroll over it; the steps stand over it (z-index on a grid item needs no position, so a
   step still measures from the section: plate.js's T1 to T4) */
.stage{grid-column:1;grid-row:1/3;align-self:start;z-index:0;position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;--ax:.5;--line:.66;--top:.4;--gut:16px}
@media (min-width:900px){.stage{--ax:.56;--line:.76;--top:.19;--gut:60px}}
/* the descriptor (what each stop adds: plate.js cross-fades it), under the shared header on the right, on every screen, its right
   edge under the ♪'s. When the drawing fills the sheet (V) it knocks the drawing out, fading in. It gives way while the ♪ says
   something under itself (chrome.js sets html.said), so the two never stand on each other. On a phone the cards pass under the
   header and this line as they scroll (plate.js clips each at their foot) */
.stage-top{position:absolute;z-index:5;right:max(10px,env(safe-area-inset-right));top:calc(var(--head-h,52px) + 8px);display:flex;align-items:center;box-shadow:0 0 0 7px transparent;transition:background-color .4s,box-shadow .4s}
@media (min-width:900px){.stage-top{right:max(26px,env(safe-area-inset-right));top:calc(var(--head-h,56px) + 10px)}}
/* a phone: the descriptor stands in from the sheet's edge, and keeps the paper it already knocks the drawing out with at V (the
   plate's own title block), so the rod, the plane's mesh and the field never run through its letters, and a two-line one reads */
@media (max-width:899px){.stage-top{right:max(16px,env(safe-area-inset-right));background:var(--paper);box-shadow:0 0 0 6px var(--paper)}}
.sheet-no{color:var(--ink);margin:0;text-transform:none;letter-spacing:.06em;text-align:right;transition:opacity .3s .4s,visibility 0s} /* as written, never in capitals (his word, 3 Oct); back only once what the ♪ said has gone: 0.4 s */
html.said .sheet-no{opacity:0;transition:opacity .3s,visibility 0s}
@media (min-width:900px) and (max-width:1099px){.sheet-no{font-size:10.5px;letter-spacing:.04em}}
@media (max-width:899px){.sheet-no{max-width:calc(100vw - 36px);font-size:9.5px;letter-spacing:.03em;text-wrap:balance}} /* whole, on two lines where one won't hold it (plate.js measures the tallest), inside its paper */
.plate{position:absolute;left:0;top:0;width:480px;height:480px;transform-origin:50% 50%;opacity:0}
.js .plate{opacity:1}
.plate svg,.rise svg{width:100%;height:100%;display:block;overflow:visible}
/* the risen plane (II to III, the earlier motion restored 3 Oct): the plate's own size and genre, parallel to it, the one plane that
   climbs the ⊥, turning a quarter against the plate as it goes. A flat sibling of the plate, never a 3D child: plate.js gives it the
   plate's camera plus its own lift and turn, and the page paints it over the stem (the axis below it) and under the axis's upper
   part and cap (z-index 4). Transparent film, so in plan the mesh and the gliders below show through it. Its yellow is ReGrowth's:
   a keyline inside its ink edge, corner ticks keyed in ink (the axis's own make), registration dots that land on the plate's marks,
   and the hub where the axis's cap joins it */
.rise{position:absolute;z-index:3;left:0;top:0;width:480px;height:480px;transform-origin:50% 50%;pointer-events:none;visibility:hidden}
.rise .rim{fill:none;stroke:var(--ink);stroke-width:.55}
.rise .key{fill:none;stroke:var(--re);stroke-width:.7}
.rise .ticks{fill:var(--re);stroke:#1F1C16;stroke-width:.2;stroke-linejoin:miter}
.rise .dots{fill:var(--re);stroke:#1F1C16;stroke-width:.25}
@media (prefers-color-scheme:dark){.rise .dots{stroke:var(--ink)}} /* by night the target keeps its ring, or it reads as a sparkle */
.rise .hub{fill:var(--re);stroke:#1F1C16;stroke-width:.4;opacity:0}
.rise .arrow{fill:none;stroke:var(--ink);stroke-width:.4;stroke-linecap:round;stroke-linejoin:round}
.plate .regs{fill:none;stroke:var(--ink);stroke-width:.25;opacity:0}
/* the axis below the risen plane while it climbs (the axis keeps the part above it, and the cap) */
.stem{position:absolute;z-index:3;left:0;top:0;width:32px;pointer-events:none;visibility:hidden;transform-origin:16px 8px}
.stem i{position:absolute;left:13px;bottom:0;width:6px;top:14px;background:var(--re);box-shadow:0 0 0 .8px #1F1C16}
/* II to III, the three nested squares (his word, 3 Oct): ecological ⊃ social ⊃ economic, each a flat sibling with the plane's camera
   and its own lift (plate.js), in the plane's make (an ink edge, a yellow keyline inside it), no fill; as each pivots from its corner
   into its room it shrinks, so plate.js keeps its strokes the same width on screen (--sw) */
.nest{position:absolute;z-index:3;left:0;top:0;width:480px;height:480px;transform-origin:50% 50%;overflow:visible;pointer-events:none;visibility:hidden}
.nest rect{fill:none}
.nest .n-rim{stroke:var(--ink);stroke-width:calc(.55px * var(--sw,1))}
.nest .n-key{stroke:var(--re);stroke-width:calc(.7px * var(--sw,1))}
@media (min-width:900px){.nest .n-rim{stroke-width:calc(.35px * var(--sw,1))}.nest .n-key{stroke-width:calc(.5px * var(--sw,1))}}
.plate .grid{fill:none;stroke:var(--grid);stroke-width:.3}
.plate .edge{fill:none;stroke:var(--ink);stroke-width:.55}
.plate .cell{fill:var(--ink)}
.plate .debt{fill:var(--debt);opacity:.14;transition:opacity 1.6s}
.plate .debt.gone{opacity:0}
.plate .debt.struck{opacity:.85;transition:none} /* the cell a strike of the pendulum drops: in ink a moment, then the trail's tone (plate.js) */
.plate .scan{stroke:var(--audit);stroke-width:.7;opacity:0;transition:opacity .3s}
.plate .ring{fill:none;stroke:var(--audit);stroke-width:.7;opacity:0;transition:opacity .3s}
.audit-on .plate .scan,.audit-on .plate .ring{opacity:1}
.plate .rows rect{fill:transparent;pointer-events:none}
.audit-on .plate .rows rect{pointer-events:all;cursor:crosshair}
.plate .foot{fill:var(--re);stroke:#1F1C16;stroke-width:.4}
.rise .words,.rise .room,.rise .fine,.rise .tape,.rise .cord,.rise .plumb,.rise .slot,.rise .lead,.rise .twin,.rise .kosa-t,.rise .knock.k{opacity:0}
.rise .room{fill:none;stroke:var(--ink);stroke-width:.9}
.rise .fine{fill:none;stroke:var(--grid);stroke-width:.26}
.rise .rk{font:400 7.5px var(--display);fill:var(--ink);text-anchor:middle}
.rise .kb{font:400 6px var(--display);fill:var(--ink);text-anchor:middle}
.rise .kv{font:italic 4.4px var(--voice);fill:var(--ink);text-anchor:middle;dominant-baseline:middle}
.rise .rk,.rise .kb,.rise .kv{paint-order:stroke;stroke:var(--paper);stroke-width:.9px;stroke-linejoin:round}
/* IV: each room's name cross-fades into its lab's (plate.js): the same ink and face, a size that fits the room with two units to
   spare (a name that would not is set to fit, textLength); hidden until then. The edge words the same: yathā into technopoly, tathā
   into memetics, their arrows gone */
.rise .lab-t{font-size:5px;opacity:0}
.rise .kv-t{opacity:0}
/* IV, the tape at work (plate.js): the actions it writes over Brahmāṇḍa, mono tags in ink on a paper halo in two lanes above the
   tape's upper edge, fainter the further the tape has carried them; and what blooms, small line-art lotuses (the site's side mark,
   paper and ink) rising on their stalks out of Piṇḍa into Brahmāṇḍa, every other one named in mono on paper. A hairline on screen
   at any size (on a phone the plan is smaller: the strokes and the words a little larger in its units) */
.rise .acts{opacity:0}
.rise .op,.rise .bn{font:500 2.6px var(--mono);letter-spacing:.1em;fill:var(--ink);paint-order:stroke;stroke:var(--paper);stroke-width:.9px;stroke-linejoin:round}
.rise .op{stroke-width:1.7px} /* the action's halo is paper enough to close the gaps between its letters: a tag beside the cells it wrote, never under them */
.rise .bl path{fill:var(--paper);stroke:var(--ink);stroke-width:.85;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.rise .bl line{fill:none;stroke:var(--ink);stroke-width:.85;vector-effect:non-scaling-stroke}
.rise .bn,.rise .op{dominant-baseline:central} /* plate.js floors both at a readable size on screen */
.rise .bs{fill:var(--muted)} /* a named lotus's mark, coming soon, on the line under its name */
@media (max-width:899px){.rise .op,.rise .bn{font-size:3.2px;letter-spacing:.04em}.rise .bl path,.rise .bl line{stroke-width:1.8}}
/* plate IV: the automaton becomes the tape. The plane takes the plate's own cells over and its rows unroll off both
   edges into the Kośa's strips (the plate-tape branch's landing, brought in). Its mesh is the plate's as it starts and slides half
   a cell as it unrolls, so the head column centres on the cord; Brahmāṇḍa's cells not yet written keep a dashed mesh (not yet); its
   cells in ink (what the window reads and what was just written in full ink, at the slots); the long edges of its two tracks in
   ink; the head two ruled slots (the one cell the cord writes, the three the window reads). The cord is the axis's own make (yellow
   keyed in ink), and its bob the plumb bob of I, turned over as the cord unrolls so it points up from the cord's foot: the arrow,
   from Piṇḍa to Brahmāṇḍa (plate.js). In V the tape is the whole plane and its mesh goes to water */
.rise .tmesh,.rise .tfresh,.rise .tamesh{fill:none;stroke:var(--grid);stroke-width:.26}
.rise .tnot{fill:none;stroke:var(--grid);stroke-width:.26;stroke-dasharray:.55 .75}
.rise .tedge{fill:none;stroke:var(--ink);stroke-width:.4}
.rise .tcells,.rise .twin,.rise .tacells{fill:var(--ink);opacity:.55}
.rise .tamesh,.rise .tacells{opacity:0} /* V: what the rule writes ahead of the head once the window opens: the not-yet, written */
.rise .tread,.rise .thead{fill:var(--ink)}
.rise .slot{fill:none;stroke:var(--ink);stroke-width:.45}
/* the window reads three cells, left · centre · right: a leader from each side room's floor to its own cell (the middle room's is the
   cord), each ending in an open dot on the cell it reads */
.rise .lead path{fill:none;stroke:var(--ink);stroke-width:.3}
/* V from above: where the window's three rooms stood, three pools of open water (two rings each, the mesh's own hairline) */
.rise .pools{opacity:0}
.rise .pools circle{fill:none;stroke:var(--grid);stroke-width:.22}
@media (min-width:900px){.rise .pools circle{stroke-width:.16}}
.rise .lead circle{fill:var(--paper);stroke:var(--ink);stroke-width:.3}
.rise .cord-k{fill:none;stroke:#1F1C16;stroke-width:1.1}
.rise .cord-y{fill:none;stroke:var(--re);stroke-width:.75}
.rise .plumb path{fill:var(--re);stroke:#1F1C16;stroke-width:1.3;stroke-linejoin:round}
.rise .plumb .cl{fill:none;stroke-width:.7;stroke-dasharray:7 2 2 2}
.rise .plumb circle{fill:#1F1C16}
.rise .knock{fill:var(--paper)}
.rise .kosa-t text{text-anchor:end} /* the strips' names end left of the cord and of the window's lower slot (index.html) */
.rise .kb2{font-size:4.2px} /* what each strip holds, a line a part under its name (plate.js) */
.plate .cells,.plate .debts{transition:opacity .4s}
.plan .plate .cells{opacity:.35}
/* V: every living cell a lotus. One layer in screen space over the plate and the plane: a stalk from each live cell, and the shared
   lotus mark (from above, the rosette) in hairline ink on paper, painted far to near (so a nearer flower hides a farther one, as a
   drawing removes hidden lines); plate.js fades each in as its cell is born and out as it dies. Each lotus carries its own copy of
   the mark, placed by one transform and kept a hairline at any size; what does not show is not drawn */
.pond{position:absolute;z-index:3;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none;visibility:hidden}
.pond .stalk,.pond .stalks{fill:none;stroke:var(--ink);stroke-width:1}
.pond .fl,.pond .ro{fill:var(--paper);stroke:var(--ink);stroke-width:1;stroke-linejoin:round}
.pond .fl path,.pond .ro path,.pond .ro circle{vector-effect:non-scaling-stroke}
.pond.no-side .fl,.pond.no-top .ro,.pond.no-stalk .stalk{display:none}
/* V in the field (bloom: field): the farther the row, the lighter the line, in the plate's own tones, never a blur, filter or
   gradient: the near rows (Piṇḍa's three by the window and Brahmāṇḍa's first three) in ink line art on paper, as above; Brahmāṇḍa's
   next three in the mesh's grey; its farthest three the soft shadow, a silhouette in the rule's tone with no line (plate.js marks
   each lotus's group .far or .shade). Yours, on the Regrow stem, is the axis's own yellow keyed in ink (.axis .flower) */
.pond g.far .fl,.pond g.far .stalk{stroke:var(--grid)}
.pond g.shade .fl{fill:var(--rule);stroke:none}
.pond g.shade .stalk{stroke:var(--rule)}
/* III: the drawing's title block, just under the plan (Indic first, then English, in one ink), as a drafting sheet sets it: a
   hairline above, the two names on one line between thin rules, nothing to press (no box, no hover, the default cursor); IV's the
   same. The stem's name (V), set up the stem reading upward (plate.js turns it about its first letter's corner) */
.title-block{position:absolute;z-index:3;left:0;top:0;margin:0;display:flex;align-items:baseline;gap:0;padding:5px 2px 2px;border-top:1px solid var(--ink);background:var(--paper);color:var(--ink);opacity:0;white-space:nowrap;pointer-events:none;cursor:default;user-select:none;font-size:10px;letter-spacing:.08em}
.title-block span+span::before{content:"";display:inline-block;width:1px;height:.9em;margin:0 10px;vertical-align:-.1em;background:var(--muted)}
@media (min-width:900px){.title-block{font-size:11px;letter-spacing:.16em;padding:6px 2px 2px}.title-block span+span::before{margin:0 14px}}
.regrow{position:absolute;z-index:3;left:0;top:0;margin:0;color:var(--ink);opacity:0;white-space:nowrap;pointer-events:none;font-weight:700;line-height:1;transform-origin:0 0}
@media (min-width:900px){.plate .grid{stroke-width:.18}.plate .edge{stroke-width:.35}.rise .fine,.rise .tmesh,.rise .tnot,.rise .tfresh,.rise .tamesh{stroke-width:.17}.rise .tedge{stroke-width:.3}.rise .rim{stroke-width:.35}.rise .key{stroke-width:.5}}
/* V: the same flower from above, the rosette, for every living cell once the plane is seen from above again (plate.js
   cross-fades it with the side view as the camera comes back up); and yours at the ⊥, top down, in the axis's own make: the door */
.yours{position:absolute;z-index:4;left:0;top:0;width:40px;height:40px;margin:-20px 0 0 -20px;opacity:0;visibility:hidden;pointer-events:none;transform-origin:50% 50%}
.yours svg{display:block;width:100%;height:100%;overflow:visible}
.yours path,.yours circle{fill:var(--re);stroke:#1F1C16;stroke-width:1.1;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.yours.on{pointer-events:auto;cursor:pointer}
/* by the door, as the view lands over the pond (plate.js, .stage.ringed), a yellow ring comes round your lotus, keyed in ink (the
   axis's own make): the garden opens on it ringed, so the one mark that carries across arrives as it will be found */
.yours .halo{opacity:0;transition:opacity .25s ease}
.yours .halo circle{fill:none;vector-effect:non-scaling-stroke}
.yours .halo .hk{stroke:#1F1C16;stroke-width:4.6}
.yours .halo .hy{stroke:var(--re);stroke-width:2.6}
.stage.ringed .yours .halo{opacity:1}
/* V: the drawing fills the sheet, so the descriptor knocks it out, as the plan's words do (fading in, never on one frame) */
.stage.full .stage-top{background:var(--paper);box-shadow:0 0 0 7px var(--paper)}

.hair{position:absolute;left:var(--gut);right:var(--gut);top:calc(var(--line) * 100%);border-top:1.5px solid var(--ink);transform-origin:50% 0}
.pole{position:absolute;top:calc(var(--line) * 100% + 12px);color:var(--muted);white-space:nowrap;pointer-events:none;cursor:default;user-select:none} /* a label of the drawing, never a control: muted, nothing to press; its arrow is a direction */
.pole.l{left:var(--gut)}.pole.r{right:var(--gut)}
/* a phone: each pole's label on paper, knocked out of the drawing as the gliders' labels are, so the plane's mesh never runs
   through its letters at a turn (on a plate that reads as a misprint); its words stand where they stood */
@media (max-width:899px){.pole{padding:1px 4px;background:var(--paper)}.pole.l{left:calc(var(--gut) - 4px)}.pole.r{right:calc(var(--gut) - 4px)}}
/* II: the gliders' labels, one pair at a time, over the two mirrored gliders as they cross (plate.js places them, a step at a time
   as the gliders step); they go as the pair meets at the ⊥, and the next pair comes in with the next crossing. Labels of the
   drawing, in ink knocked out of it on paper, never controls */
.glabel{position:absolute;z-index:2;left:0;top:0;margin:0;padding:1px 4px;background:var(--paper);color:var(--ink);white-space:nowrap;pointer-events:none;cursor:default;user-select:none;opacity:0;visibility:hidden}
.glabel span{display:block;transition:opacity .4s ease}
.glabel.met span{opacity:0}
@media (max-width:899px){.glabel{font-size:9.5px;letter-spacing:.1em}}

.axis{position:absolute;z-index:4;left:calc(var(--ax) * 100% - 16px);top:calc(var(--top) * 100% - 16px);height:calc((var(--line) - var(--top)) * 100% + 16px);width:32px;padding:0;border:0;background:none;pointer-events:none;--h:200px;transform-origin:16px 8px} /* the plumb line hangs from its cap's centre; a drawing, never a tab stop */
.stage.at-pond .axis{pointer-events:auto;cursor:pointer} /* only at V, where its flower is the door (plate.js) */
.axis .bar{position:absolute;left:13px;bottom:0;width:6px;top:14px;background:var(--re);box-shadow:0 0 0 .8px #1F1C16;transform-origin:50% 100%}
.axis .cap{position:absolute;left:8px;top:0;width:16px;height:16px;background:var(--re);box-shadow:0 0 0 .8px #1F1C16}
/* the plumb bob (the Plumb sketch): a yellow teardrop to a point, keyed in ink, its eye on the line and its centre line drawn, the
   instrument that finds true vertical. Its point is the ⊥'s foot: it swings over the poles and settles pointing straight down at the
   line. plate.js shrinks it toward its point as the axis foreshortens, and retires it in IV, where the ⊥ is the stem */
.bob{position:absolute;left:2px;bottom:-1px;width:28px;height:47px;overflow:visible;transform-origin:50% 100%}
.bob path{fill:var(--re);stroke:#1F1C16;stroke-width:1.3;stroke-linejoin:round}
.bob .cl{fill:none;stroke-width:.7;stroke-dasharray:7 2 2 2}
.bob circle{fill:#1F1C16}
@media (max-width:899px){.bob{left:7px;width:18px;height:30px}}
/* the phantom lines (the drafting convention for a moving part's other positions): where each of the last swings reached, a hairline
   and a hollow bob, fading over two swings; as the rise damps the swing they close into a fan on the ⊥. plate.js places them */
.phantoms{position:absolute;z-index:2;left:0;top:0;width:100%;height:100%;pointer-events:none}
.phantom{position:absolute;left:0;top:0;width:32px;opacity:0;transform-origin:16px 8px}
.phantom svg.rod{position:absolute;left:15.5px;top:8px;width:1px;height:calc(100% - 52px);overflow:visible} /* a replaced element: its height is set, not stretched */
.phantom .rod line{stroke:var(--ink);stroke-width:1;stroke-dasharray:14 3 3 3}
.phantom .bob path{fill:none;stroke:var(--ink);stroke-width:1}
.phantom .bob .cl,.phantom .bob circle{display:none}
@media (max-width:899px){.phantom svg.rod{height:calc(100% - 36px)}}
@media (prefers-reduced-motion:reduce){.phantoms{display:none}}
/* the jagged pendulum's strike: at each swing's widest the bob drops a cell, a small ink square falling from its bulb onto the plate
   under its point and flattening there as the plate is seen (plate.js; never under reduced motion, where nothing swings) */
.drop{position:absolute;left:0;top:0;width:7px;height:7px;background:var(--ink);opacity:0;pointer-events:none}
@media (max-width:899px){.drop{width:5px;height:5px}}
.axis .tick{position:absolute;left:10px;bottom:0;width:12px;height:3px;background:var(--ink);opacity:0}
.axis .tick.go{animation:climb 1.5s cubic-bezier(.3,.6,.2,1) forwards}
@keyframes climb{0%{opacity:1;transform:translateY(0)}85%{opacity:1}100%{opacity:0;transform:translateY(calc(-1 * var(--h)))}}
/* IV: the ⊥ is the stem, and its cap opens into the lotus you can enter (the shared lotus mark, in the axis's own make) */
.axis .flower{position:absolute;left:-4px;top:-10px;width:40px;height:29px;overflow:visible;opacity:0;transform-origin:50% 88%;pointer-events:none}
.axis .flower path{fill:var(--re);stroke:#1F1C16;stroke-width:1.5;stroke-linejoin:round}
.stage.at-pond .axis:hover .flower{transform:scale(1.08)}
@media (prefers-reduced-motion:no-preference){.axis .bar{animation:rise 1s .15s cubic-bezier(.2,.7,.1,1) backwards}.hair{animation:draw .8s cubic-bezier(.2,.7,.1,1) backwards}}
@keyframes rise{from{transform:scaleY(0)}}
@keyframes draw{from{transform:scaleX(0)}}

.steps{grid-column:1;grid-row:1;z-index:1;min-width:0;pointer-events:none}
.steps-v{grid-row:2}
html.blooming{overflow:hidden} /* the bloom: the page stands still while the view turns (plate.js locks wheel, touch and keys too) */
.step{position:relative;min-height:100vh;min-height:100svh}
.step a,.step button,.card{pointer-events:auto}

/* step I · elevation: the ⊥ is the first frame, and the hero stands over it: the rail; AGI is here. and AI is the Audit., the same
   size; under them a line turning slowly between his two (both stacked in one cell, so nothing moves when it turns); no call to
   action. Under the line, on screen, the dichotomy line, turning the same way. On a phone the hero comes first and the ⊥ stands
   under it (plate.js sets --top and --line from the turning line's foot, so the swing never crosses a word); on a wide screen it
   stands left of the ⊥, every line of it clear of the swing */
.s1{height:100vh;height:100svh;min-height:560px;padding:calc(var(--head-h,52px) + 32px) 16px 0;text-align:center;--ax:.5;--line:.66;--top:.4}
.rail{color:var(--ink);margin-bottom:10px}
.hero-h em{font-style:normal;background:linear-gradient(transparent 94%,var(--audit) 94%)}
.lede-what{margin-top:10px;color:var(--muted)}
.hero-h{font:400 clamp(38px,11vw,54px)/1.03 var(--display);letter-spacing:-.01em}
.hero-h .l1{display:block}
/* each sentence on one line, at every width (his word, 3 Oct: "Audit" had been falling to a third line). The hero's own column is
   what constrains it (the page's padding on a phone, .hero-copy's width on a wide screen), so the h1 is its own measure: the line
   never breaks, and its size is whichever is smaller, the size the design asks for (1em: every clamp and media query above and
   below stands) or the size at which the longer sentence fills the column. 18.6cqi is that fit: the longer one is 5.28 em wide in
   Melodrama, so 100/5.28 = 18.95% of the column, less a little for rounding */
@supports (font-size:1cqi){
  .hero-h{container-type:inline-size}
  .hero-h .l1{white-space:nowrap;font-size:min(1em,18.6cqi);letter-spacing:-.01em}
}
.rot{display:grid}
.rot>span{grid-area:1/1;align-self:center;text-wrap:balance;opacity:0;transition:opacity .3s ease-in}
.rot>span.on{opacity:1;transition:opacity .9s ease-out .3s}
.rot>li{grid-area:1/1;align-self:start;opacity:0;transition:opacity .3s ease-in}
.rot>li.on{opacity:1;transition:opacity .9s ease-out .3s}
.lede{max-width:34rem;margin:14px auto 0;font-size:14.5px;line-height:1.5}
.cap{position:absolute;left:0;right:0;top:calc((var(--top) + var(--line)) * 50% - 24px);font:italic 16px/1.3 var(--voice);margin:0} /* beside the ⊥, at its middle */
.cap .a{position:absolute;right:calc((1 - var(--ax)) * 100% + 30px);white-space:nowrap} /* 30 px: room for the plumb line's swing */
.cap .b{position:absolute;left:calc(var(--ax) * 100% + 30px);top:28px;white-space:nowrap}
@media (max-width:359px){.cap .a{right:calc((1 - var(--ax)) * 100% + 22px)}.cap .b{left:calc(var(--ax) * 100% + 22px)}} /* the smallest phones: a narrower swing, a narrower gap */
/* the plain sentence (what the drawing says, for everyone): under the line and its poles, centred on the ⊥, the voice; it goes as
   plate I does (plate.js) */
.cap-plain{position:absolute;left:16px;right:16px;top:calc(var(--line) * 100% + 40px);max-width:46ch;margin:0 auto;color:var(--ink);color:color-mix(in srgb,var(--ink) 80%,transparent);font:italic 13px/1.4 var(--voice);text-align:center}
.cue{position:absolute;left:16px;right:16px;bottom:24px;color:var(--ink)}
/* a phone: the cue on its own paper, no wider than its words, and standing at the sheet's left margin as it does on a wide screen —
   off the ⊥'s own column, so neither does the bob strike through "Scroll" at a turn nor the cue's paper cut the bob in half */
@media (max-width:899px){.cue{left:max(16px,env(safe-area-inset-left));right:auto;width:max-content;max-width:calc(100vw - 32px);padding:2px 7px;background:var(--paper);text-align:left}}
@media (max-height:700px) and (max-width:899px){.s1{padding-top:calc(var(--head-h,52px) + 26px)}.hero-h{font-size:36px}.lede{font-size:13.5px;line-height:1.4;margin-top:9px}}
/* the smallest phones at their shortest (320 × 568): the hero needs the room of the cue, and the cue rests only 38 px under the
   pole row there, so the step carries its paper straight through "← Accelerate" as it scrolls. As before the phone pass, there is
   no cue at that size: the journey is a scroll, and the plate keeps its own labels whole */
@media (max-height:600px) and (max-width:359px){.cue{display:none}}
@media (max-width:359px){.rail{font-size:10px;letter-spacing:.06em}}
@media (min-width:900px){
  .s1{padding:0;text-align:left;--ax:.56;--line:.76;--top:.19}
  /* left of the ⊥, never under the header, and narrow enough that the swing (12°, from the ⊥'s cap) passes clear of every line */
  .hero-copy{position:absolute;left:60px;top:max(calc(var(--head-h,56px) + 26px),calc(var(--top) * 100% - 58px));width:min(560px,calc(var(--ax) * 100% - 170px))}
  .rail{margin-bottom:20px}
  .hero-h{font-size:clamp(56px,7.4vw,108px);line-height:1.02}
  .lede{margin:22px 0 0;max-width:32rem;font-size:16.5px}
  .cap{left:60px;right:auto;top:calc(var(--line) * 100% - 46px);font-size:23px}
  .cap .a,.cap .b{position:static}.cap .b{margin-left:.25em}
  .cap-plain{left:calc(var(--ax) * 100%);right:auto;width:46ch;max-width:calc(100vw - 120px);transform:translateX(-50%);top:calc(var(--line) * 100% + 42px)}
  .cue{left:60px;right:auto;bottom:26px}
}
/* a phone on its side (short and wide, under 900 px): no room for the hero over the swing, so the hero stands left and the ⊥ swings
   right of it, as on a wide screen, the hero a size smaller; the line and its right pole keep clear of the lotus button's corner,
   and the plain sentence waits just under the fold (plate.js) */
@media (max-width:899.98px) and (max-height:500px) and (orientation:landscape){
  .stage,.s1{--ax:.76;--top:.25;--line:.88}
  .s1{min-height:0;padding:calc(var(--head-h,52px) + 10px) 16px 0 max(16px,env(safe-area-inset-left));text-align:left}
  .hero-copy{max-width:calc(var(--ax) * 100vw - 160px)}
  .rail{margin-bottom:6px}
  .hero-h{font-size:28px}
  .lede{max-width:none;margin:7px 0 0;font-size:12.5px;line-height:1.42}
  .cap{font-size:14px}
  .cue{display:none}
  .hair,.pole.r{right:calc(var(--gut) + var(--fab-reserve,80px) - 16px)}
}
/* a short wide screen (a laptop at 700 px): the hero a size smaller, so its turning line stands clear of the line's words */
@media (min-width:900px) and (max-height:760px){.rail{margin-bottom:14px}.hero-h{font-size:clamp(48px,6.2vw,84px)}.lede{margin-top:16px}}

/* steps II to V: a card beside (desktop) or under (phone) the plate */
.s2,.s3,.s4,.s5{display:flex;align-items:flex-start;padding:52vh 10px 40px;padding-top:52svh}
@media (max-width:899px){.s2,.s3,.s4{padding-bottom:70vh;padding-bottom:70svh}.s3{padding-top:58vh;padding-top:58svh}.s5{padding-top:150vh;padding-top:150svh}} /* the phone: a clear stretch after each card, where the plane rises, the tape unrolls and the pond blooms in view; the automaton's card rests lower, under the plan's title block; and the pond's card comes up only after the pond, whole, has held the screen for half of one */
/* a phone: every card's lines keep clear of the lotus button's corner (chrome.css, --fab-reserve), wherever a stop leaves them, so
   no line of a card runs under the button at rest */
@media (max-width:639.98px){.s2 .card,.s3 .card,.s4 .card{padding-right:calc(var(--fab-reserve,80px) - 14px)}}
/* the smallest phones at their shortest (320 × 568): II's card is the tallest of them — the definition, the plain line and the
   Audit's memetic row — and in a column that narrow it ran past the screen's foot at its own stop, Goodhart's Law with it. There it
   rests a little higher and sets its words at the reading floor, 14 px, so the whole card stands where it is meant to be read */
@media (max-height:700px) and (max-width:359.98px){.s2{padding-top:40vh;padding-top:40svh}} /* (the card's own size there is set with the cards, below) */
/* IV's card (#studio): the studio's, beside the tape (tape: studio, the default); the wordless path draws the same tape with none */
[data-tape="wordless"] .s4 .card{display:none}
@media (max-width:899px){html:not([data-tape="wordless"]) .s4{padding-top:58vh;padding-top:58svh}} /* it rests where III's did, under the tape's title block */
/* on the release journey's wide screen it stands at the top of its step, beside the running tape, and passes before the move to V
   (plate.js makes the step long enough for the hold and the move) */
@media (min-width:900px){html:not([data-tape="wordless"]) .s4.held{align-items:flex-start}}
/* plate V is drawn in one of two views (the pond axis, the garden's own: html[data-pond], which plate.js settles from ?pond= or the
   composition, and turns on the page from the first box's switch): the elevation, in section (the default), or the plan, from
   above, each with its own words for a screen reader. In section with the tape in the plate the bloom axis's default, the field,
   has its own (.p-field); everything else, .p-other, is the other endings'. The switch, V's one view control, shows only where the
   page opened off the release journey (plate.js marks #offers .fork at load) */
[data-pond="section"] .p-top,html:not([data-pond="section"]) .p-section{display:none}
html:not([data-pond="section"]) .p-field,html:not([data-bloom="field"]) .p-field{display:none}
html[data-pond="section"][data-bloom="field"] .p-other{display:none}
#offers:not(.fork) .layers{display:none}
/* on the release journey (plate.js marks V's step .held at load) V's ending comes up under the field once it is whole and rests
   under the water line and its poles, V's stop: plate.js sets the step's top so it rests there as the step reaches the screen's top
   (T4), and its foot so the plate lets go there (what is taller than the room under the line scrolls on with the drawing, never
   over it); off the journey the doors stand beside the drawing in one column, as the cards before them */
@media (min-width:900px){.s5.held{align-items:flex-start;padding:94vh 60px 28px;padding-top:94svh}}
@media (max-width:899px){.s5.held{padding-top:94vh;padding-top:94svh}}
/* and IV's step is longer there (.s4.held), so the move from the tape to the field takes 1.4 times the scroll it did, the hold
   before it unchanged, and the doors come up within it (plate.js reads the height: R3a, R3b) */
@media (min-width:900px){.s4.held{min-height:120vh;min-height:120svh}}
@media (max-width:899px){.s4.held{padding-bottom:98vh;padding-bottom:98svh}html:not([data-tape="wordless"]) .s4.held{padding-bottom:0}} /* with the studio's card, plate.js sets the step's length: the card's passing, the move and the doors' rise */
/* V's ending (.v-end): the four doors, then the quiet line to Engage under them */
.v-end{width:100%;min-width:0}
@media (min-width:900px){.s5:not(.held) .v-end{max-width:min(460px,34vw)}}
@media (max-width:899px){.s5{padding-bottom:calc(28px + env(safe-area-inset-bottom))}}
/* the four doors, Ways in: the card's look at a smaller size (sheet, an ink rule, the eyebrow in mono, the name in the display face),
   one verb each and a line on who it is for. Their parts line up across a row (a subgrid of six rows: the names level, the lines,
   the doors level at their foot, the first box's note on what it keeps under its door). The first door is Re yellow (what you can
   enter): the preview, the waitlist under it. Four in a row from 1100 px, two by two from 640 px, one column on a phone, where a
   door and the last line of each keep clear of the lotus button's corner */
.offers{display:grid;grid-template-columns:minmax(0,1fr);column-gap:12px;width:100%}
@media (min-width:640px){.offers{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.s5.held .offers{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:14px}}
@media (min-width:900px){.s5:not(.held) .offers{grid-template-columns:minmax(0,1fr)}.s5:not(.held) .offer{margin-bottom:0}.s5:not(.held) .offer+.offer{border-top:0}} /* beside the drawing, one card of four parts */
.offers-h{grid-column:1/-1;margin:0 0 8px;color:var(--ink);font-size:10.5px;letter-spacing:.12em} /* (in ink: a heading, where the poles above it are the drawing's muted labels) */
.offer{display:flex;flex-direction:column;align-items:flex-start;margin-bottom:12px;background:var(--sheet);border:1px solid var(--ink);padding:16px 18px;pointer-events:auto}
@supports (grid-template-rows:subgrid){.offer{display:grid;grid-row:span 6;grid-template-rows:subgrid;align-items:start}}
.offer .mono{color:var(--muted);font-size:10.5px;letter-spacing:.12em}
.offer>p.mono:first-child{margin:0 0 8px} /* the eyebrow */
.offer h3{font:400 25px/1.06 var(--display);letter-spacing:-.005em}
.offer p{margin-top:10px;font-size:14.5px;line-height:1.5}
.offer .fine{font-size:13px}
.offer .door{display:flex;flex-direction:column;align-items:flex-start;gap:12px;align-self:stretch;margin-top:auto;padding-top:14px}
@supports (grid-template-rows:subgrid){.offer .door{align-self:end}}
.offer .cta{width:100%;font-size:15px;padding:11px 16px;text-align:center}
@media (min-width:640px){.offer{padding:14px 16px}.offer h3{font-size:24px}.offer p{font-size:14px;line-height:1.45}.offer .door{gap:10px;padding-top:12px}} /* side by side: a little tighter, so on a wide screen the four rest whole under the field */
/* two by two on the journey's wide screen, the first box is wide enough for the preview and the waitlist side by side, and the
   other doors stand level with them, at the button's middle */
@media (min-width:900px) and (max-width:1099px){.s5.held .offer:first-of-type .door{flex-direction:row;flex-wrap:wrap;align-items:center;column-gap:20px}.s5.held .offer:first-of-type .cta{width:auto;padding:11px 24px}}
@supports (grid-template-rows:subgrid){@media (min-width:900px) and (max-width:1099px){.s5.held .offer .door{margin-bottom:auto}}} /* (with its auto top: the middle of the row) */
/* a short laptop two by two (900 to 1099 px wide, 760 px tall or less, as 1000 × 700): the doors a size tighter, so all four stand
   whole at V's stop under the water line */
@media (min-width:900px) and (max-width:1099px) and (max-height:760px){
  .s5.held .offer{padding:10px 14px 11px}.s5.held .offer h3{font-size:20px}.s5.held .offer p{margin-top:4px;font-size:12.5px;line-height:1.35}
  .s5.held .offer>p.mono:first-child{margin-bottom:4px}.s5.held .offer .door{padding-top:8px}.s5.held .offer .fine{font-size:12px}
  .s5.held .offer .cta{padding:8px 20px;min-height:44px}.s5.held .offers-h{margin-bottom:6px}.s5.held .offer{margin-bottom:10px}
}
.offer p.layers{margin-top:16px;font-size:10.5px}
@media (max-width:639.98px){.offer,.work-line{padding-right:calc(var(--fab-reserve,80px) - 14px)}}
/* a phone: the last link in a door that had no reach of its own — the Fellow's "or sponsor one" — a fingertip's reach tall, as the
   doors' own ".more" already is; the reach is taken beside the words, so nothing on the sheet moves (the phone pass at the foot of
   this sheet gives the call, the Work with us line and a door's label links theirs the same way) */
@media (max-width:639.98px){
  .offer .door a:not(.cta){position:relative;display:inline-block}
  .offer .door a:not(.cta)::after{content:"";position:absolute;left:-6px;right:-6px;top:50%;height:max(44px,100% + 12px);transform:translateY(-50%)}
}
/* the Fellow's door and its sponsor link on one line, wrapping when the box is narrow */
.offer .door.pair{flex-direction:row;flex-wrap:wrap;align-items:baseline;column-gap:.45em;row-gap:6px}
.offer .door .or{color:var(--muted)}
.offer .door .or a{color:var(--ink)}
/* one quiet line under the four doors (his word, 3 Oct): Work with us, the four verbs, leading to Engage; on paper, in ink, the
   doors' own link style, never a box of its own */
.work-line{margin:2px 0 0;font-size:15px;line-height:1.5;pointer-events:auto}
.work-line a{display:inline-block;padding:10px 0;background:var(--paper);box-shadow:0 0 0 6px var(--paper);color:var(--ink);text-decoration-color:var(--re);text-decoration-thickness:2px}
.offer .door .more{position:relative}
.offer .door .more::after{content:"";position:absolute;left:-6px;right:-6px;top:50%;height:max(44px,100% + 12px);transform:translateY(-50%)} /* a fingertip's reach */
/* the FAQ, on the home only, above the footer: plain questions, each opening its answer; the plate's mono for its heading, the
   display face for the questions */
.faq{position:relative;z-index:1;box-sizing:border-box;max-width:820px;margin:0;padding:44px 20px 52px;background:var(--paper)}
@media (min-width:900px){.faq{max-width:880px;padding-left:60px;padding-right:60px}} /* level with the doors above it */
@media (max-width:639.98px){.faq{padding:24px calc(var(--fab-reserve,80px) - 14px) 40px 20px}} /* (the whole of the button's corner: the phone pass at the foot of this sheet) */
.faq-h{margin:0 0 14px;color:var(--ink);font:500 10.5px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase}
.faq details{border-top:1px solid var(--ink)}
.faq details:last-of-type{border-bottom:1px solid var(--ink)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:52px;padding:12px 0;cursor:pointer;list-style:none;
  font:400 22px/1.2 var(--display);letter-spacing:-.005em;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;font:300 24px/1 var(--sans);color:var(--muted)}
.faq details[open] summary::after{content:"−"}
.faq summary:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.faq details p{margin:0;padding:0 0 16px;max-width:64ch;font-size:15.5px;line-height:1.55;color:var(--ink)}
@media (max-width:639.98px){.faq summary{min-height:48px;font-size:20px}}
/* V, the field: the studio's pages as five yellow lotuses on its far rows, behind the near ink lotuses (under the pond's layer, and
   over their flowers), each named over its flower in ink on paper. plate.js places them (and sizes their flowers, --fw, --fh, and
   their stalks to the water line, --stalk, from the flower's foot, --sb; by the door it carries them with the view, the stalk
   shortening with the tilt, --sy) and shows them once the field is whole (.on; until then hidden and inert, and without JavaScript
   never). The flower is the lotus mark filled Re yellow (what you can enter) on a far row: smaller than the field's, keyed in a
   hairline of ink, its stalk in the far rows' grey; a fingertip's reach at least (44 px), flower and name; hovered or focused, the
   flower lifts and its name is underlined in yellow. On a phone a long name stands in two short lines (.ln2) */
.pagelotus{position:absolute;inset:0;z-index:2;pointer-events:none;visibility:hidden;opacity:0;transition:opacity .45s ease,visibility 0s linear .45s}
.js .pagelotus:not(.on) .pl{pointer-events:none}
.pagelotus.on{visibility:visible;opacity:1;transition:opacity .45s ease,visibility 0s} /* reachable only once they show: before that they are out of the keyboard's way (plate.js sets tabindex to match) */
.stage.blooming .pagelotus,.stage.blooming .pl{pointer-events:none} /* by the door they go with the view, and take no tap (plate.js makes them inert too) */
.pl{position:absolute;left:0;top:0;display:flex;flex-direction:column-reverse;align-items:center;justify-content:flex-start;gap:6px;color:var(--ink);text-decoration:none;pointer-events:auto;-webkit-tap-highlight-color:transparent}
.pl::after{content:"";position:absolute;left:calc(50% - .5px);top:calc(100% - var(--sb,0px));width:1px;height:var(--stalk,0px);background:var(--grid);transform:scaleY(var(--sy,1));transform-origin:50% 0;pointer-events:none}
.pl-name{display:block;padding:1px 4px;background:var(--paper);color:var(--ink);font-size:10.5px;letter-spacing:.1em;line-height:1.3;white-space:nowrap;text-decoration:underline 2px transparent;text-underline-offset:3px;transition:text-decoration-color .15s}
.pl-mark{display:block;flex:none;width:var(--fw,40px);height:var(--fh,28px);overflow:visible;transform-origin:50% 88%;transition:transform .15s}
.pl-mark path{fill:var(--re);stroke:#1F1C16;stroke-width:.9;stroke-linejoin:round;vector-effect:non-scaling-stroke}
@media (prefers-color-scheme:dark){.pl-mark path{stroke:var(--ink)}} /* by night the hairline is the night's ink, or the outline vanishes on the dark sheet */
.pl:hover .pl-mark,.pl:focus-visible .pl-mark{transform:scale(1.08)}
.pl:hover .pl-name,.pl:focus-visible .pl-name{text-decoration-color:var(--re)}
.pl:focus-visible{outline-offset:2px}
.pl{transition:opacity .3s,visibility 0s}
.pl.under{opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s linear .3s} /* V's card has come up over its foot (plate.js) */
@media (max-width:899px){.pl-name{font-size:10px;letter-spacing:.06em;text-align:center}.pl-name .ln2{display:block}}
@media (max-width:359px){.pl[data-page-lotus="2"],.pl[data-page-lotus="5"]{display:none}} /* the smallest phones: three page lotuses (the lotus button holds them all) */
/* V, the field: the call over your lotus, on the stem, as the page lotuses carry their names: the card's door in a word, underlined
   in Re yellow (what you can enter), in ink on paper. plate.js places it 6 px over the flower and shows it once the field is whole
   (.on), where it has room under the top bar; a tap is the same door as the card's (the bloom) */
.bloom-call{position:absolute;z-index:4;left:0;top:0;padding:2px 6px;background:var(--paper);color:var(--ink);font-size:11px;letter-spacing:.12em;line-height:1.3;white-space:nowrap;text-decoration:underline 2px var(--re);text-underline-offset:4px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .45s ease,visibility 0s linear .45s}
.bloom-call.on{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .45s ease}
@media (max-width:899px){.bloom-call{font-size:10px;letter-spacing:.08em}} /* (its fingertip's reach: the phone pass at the foot of this sheet) */
@media (prefers-reduced-motion:reduce){.pagelotus,.pagelotus.on,.pl,.pl.under,.pl-mark,.pl-name,.stage-top,.bloom-call,.bloom-call.on,.yours .halo,.sheet-no,.sheet-no.first,.rot>span,.rot>span.on,.rot>li,.rot>li.on{transition:none}}
/* a card's switch (a view, as a map's layers): its name on a line of its own, so its views read together, the current one marked
   (aria-current); each a fingertip's reach tall however small its words (44 px, centred on the word), the rows far enough apart
   (20 px) that two reaches never overlap, the name kept close over them */
.layers{display:flex;flex-wrap:wrap;gap:20px 14px;margin-top:16px;color:var(--muted)}
.layers>span{flex-basis:100%;margin-bottom:-8px}
.layers a{position:relative;color:var(--ink);text-decoration:none;border-bottom:1px dashed var(--muted)}
.layers a::after{content:"";position:absolute;left:-6px;right:-6px;top:50%;height:max(44px,100% + 12px);transform:translateY(-50%)}
.layers a[aria-current]{border-bottom:3px solid var(--re)}
.layers a[aria-current]::before{content:"● ";content:"● " / ""}
.layers a:not([aria-current])::before{content:"○ ";content:"○ " / ""}
.card{background:var(--sheet);border:1px solid var(--ink);padding:20px 20px 18px;max-width:460px;width:100%}
.card .mono{color:var(--muted);margin-bottom:10px}
.card h2{font:400 clamp(28px,7.4vw,40px)/1.06 var(--display);letter-spacing:-.01em}
.card p{margin-top:12px;font-size:15px}
.card .fine{font-size:13.5px;color:var(--muted)}
/* IV's card: the three labs, a line each, in the window's order (Kṣetra · Karm · Kula) */
.labs-brief{list-style:none;margin:10px 0 0;padding:0}
.labs-brief li{margin-top:4px;font-size:14.5px;line-height:1.45}
.labs-brief b{font-weight:600;margin-right:.25em}
@media (min-width:900px){.labs-brief li{font-size:15px}}
.note{font:italic 18px/1.35 var(--voice);color:var(--audit);min-height:1.35em}
.note b{font:500 10.5px var(--mono);letter-spacing:.12em;font-style:normal;margin-right:8px}
/* II, the Audit's rows: seven Codex memetics, stacked in one cell (.rot: one shows, the one the red line reads: plate.js), the red line's voice, each
   name in mono on its own line over its plain line */
.memes{list-style:none;margin:16px 0 0;padding:0;font-size:16px}
.memes b{display:block;margin:0 0 4px}
@media (min-width:900px){.memes{font-size:17px}}
.links{display:flex;flex-wrap:wrap;gap:10px 18px;margin-top:16px;align-items:center}
@media (min-width:900px){.s2,.s3,.s4,.s5{align-items:center;padding:84px 0 28px 60px}.card{padding:28px 30px 24px;max-width:min(460px,34vw)}.card p{font-size:16px}}
/* a short wide screen (a laptop at 700 to 780 px): the cards a size smaller, after the rule above so it holds, so IV's card stands
   whole at its stop, its Labs link in view */
@media (min-width:900px) and (max-height:780px){.s2,.s3,.s4,.s5{padding-top:76px}.card{padding:20px 24px 18px}.card h2{font-size:30px}.card p{font-size:15px;margin-top:10px}.labs-brief li{font-size:14px}}
/* the smallest phones at their shortest (320 × 568): II's card is the tallest of them — the definition, the plain line and the
   Audit's memetic row — and in a column that narrow it ran past the screen's foot at its own stop, Goodhart's Law with it. There
   every card sets its words at the reading floor, 14 px, and rests a little higher (.s2, above), so the whole of it stands on screen */
@media (max-height:700px) and (max-width:359.98px){
  .card{padding-top:14px;padding-bottom:14px}
  .card h2{font-size:26px}
  .card p{margin-top:9px;font-size:14px;line-height:1.5}
  .memes{margin-top:12px;font-size:14.5px}
  .memes b{margin-bottom:3px}
}
/* a phone, after every rule above so it holds: the two pieces of reading text the phone pass below does not reach — a card's fine
   print and the plain sentence under the drawing — at the reading floor, 14 px. The plate's own mono (the poles, the title blocks,
   the lotus names, the tape's tags) is the drafting convention and keeps its size */
@media (max-width:639.98px){.card .fine,.cap-plain{font-size:14px}}

/* ---------- under the plate: the doors ---------- */
.cta{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:10px 20px;border:1px solid #1F1C16;background:var(--re);color:#1F1C16;font:600 15px/1.2 var(--sans);text-decoration:none;cursor:pointer;box-shadow:3px 3px 0 var(--ink);transition:transform .12s,box-shadow .12s}
.cta:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink)}
.cta.ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}
.more{font-weight:600;text-decoration-color:var(--re);text-decoration-thickness:2px}

.fine{font-size:13.5px;color:var(--muted)}

.linkish{background:none;border:0;padding:6px 0;font:600 14px var(--sans);color:inherit;text-decoration:underline;cursor:pointer}

/* under reduced motion every change is its end state: V included (its cells and the Debt trail, the mud, change with no fade; plate.js
   snaps the scroll to the five views, turns V's view by a cut, and opens and closes each lotus at once) */
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.cta,.plate .debt,.plate .scan,.plate .ring,.plate .cells,.plate .debts{transition:none}.cta:hover{transform:none}}
/* placeholders (Space/compose.mjs): what is not ready yet shows as a dashed note in the preview; a release refuses them */
.todo-board .wrap{display:grid;gap:14px;padding-top:40px}
[data-todo]{border:1.5px dashed var(--muted);padding:14px 16px;color:var(--muted)}
[data-todo]::before{content:"TODO · " attr(data-todo);font:500 12px/1.5 var(--mono);letter-spacing:.04em}
/* moving between the studio's pages crossfades (chrome.css opts every page in, and names the header's marks); the plate names only
   the marks its door carries across. Where cross-document view transitions are unsupported, nothing changes */
/* in V the stem's lotus is the door: where the pond names its own the same, one becomes the other (in the elevation only once it is
   drawn whole, plate.js's .drawn, so nothing half drawn carries across; and never a mark V's card has come up over on a phone,
   plate.js's .covered, so nothing flies in from under the card) */
html:not([data-pond="section"]) .stage.at-pond:not(.away):not(.top) .axis .flower:not(.covered),.stage.at-pond.drawn:not(.away) .axis .flower:not(.covered){view-transition-name:door}
.stage.at-pond.top:not(.away) .yours:not(.covered){view-transition-name:door} /* seen from above (tape: plate), your lotus at the ⊥ is */
/* by the door from the field (the bloom: plate.js turns the view to the plan, .blooming), your lotus at the ⊥ is the one mark that
   carries across, into the Pond from above: no water line, no stem */
.stage.blooming:not(.away) .yours{view-transition-name:door}
/* in the elevation the water line and the stem carry across too: the plate I hairline becomes the garden's water line, the ⊥'s bar
   your stem (the garden names its own the same, and each page draws its own in its own style) */
.stage.at-pond.drawn:not(.away) .hair:not(.covered){view-transition-name:waterline}
.stage.at-pond.drawn:not(.away) .axis .bar:not(.covered){view-transition-name:stem}
/* what carries across moves at the tape's own pace (its slide, 0.72 s), not the browser's quarter second; the page itself still crossfades */
::view-transition-group(door),::view-transition-group(waterline),::view-transition-group(stem),::view-transition-old(door),::view-transition-new(door),::view-transition-old(waterline),::view-transition-new(waterline),::view-transition-old(stem),::view-transition-new(stem){animation-duration:.72s;animation-timing-function:cubic-bezier(.5,0,.2,1)}
/* from the garden (by day light in every scheme: it keeps its sun) into a dark Plate, the light goes down at the garden's pace for a
   change of light (1.2 s, easing in and out), as it comes up the other way (lotus.css); forest.js names the crossing "from-garden" */
@media (prefers-color-scheme:dark){
  html:active-view-transition-type(from-garden)::view-transition-old(root),html:active-view-transition-type(from-garden)::view-transition-new(root){animation-duration:1.2s;animation-timing-function:ease-in-out}
}

/* ---------- the phone pass (4 Oct, his word: the site is not mobile optimised) ----------
   Phone widths only, so nothing here is read at 900 px or above: the lotus button's corner kept clear where its reserve fell
   short, a fingertip's reach on the smallest marks outside the drawing, and the two headings that stood at 10.5 px */
@media (max-width:639.98px){
  /* the FAQ's reserve was 14 px short of the button's own corner, so at 414 and 430 the disc sat on the first + and its rule */
  .faq{padding-right:var(--fab-reserve,80px)}
  /* a reach of 44 px on the call over your lotus, the Work with us line and a door's label links, drawn the way .more and a
     card's switches already draw theirs: a transparent pad centred on the words, so nothing on the plate moves or grows.
     The call is already absolute (so already its pad's containing block): never set it relative, which blockifies nothing —
     an inline <a> drops the transform plate.js places it with, and the call falls to the stage's corner under the header */
  .work-line a,.offer .mono a{position:relative}
  .bloom-call::after,.work-line a::after,.offer .mono a::after{content:"";position:absolute;left:-6px;right:-6px;top:50%;height:max(44px,100% + 12px);transform:translateY(-50%)}
  /* the words outside the drawing that stood under 12 px (the plate's own mono labels keep the drafting convention) */
  .offers-h,.faq-h{font-size:12px}
  .offer .fine{font-size:14px}
  /* a door's own eyebrow (Coming soon · free) reads; the view switch under it (.layers) is a control of the drawing and keeps its size */
  .offer p.mono:not(.layers){font-size:12px}
}