/* point.css — the one Point (Move 1 · chassis C9; scores/move-1/point.md). Linked from every page's head by
   kit.HEAD_POINT (render-blocking, so the seat, the crossing and the clips are styled before first render: inline they
   would pass 1 KB on every page). Its owner is kit/seam/point.js; the seam (seam.js) adds no Point CSS of its own.

   · the crossing: a cross-document view transition with only the Point named (asg-point); the old page closes into
     where the Point was (--x, --y: asg.cross, set by the head's pagereveal listener) and the new one opens out of it,
     280 ms each, so a page is never untappable for long (gates.point(): no root animation over 300 ms). Reduced motion:
     navigation none, and the Point redraws in place.
   · colour by depth (--d, from body[data-depth] via ASGpoint.depth): gold #C9A84C held through .45, then OKLCH toward
     the site's --bindu #C0392B at 1; the white-hot core #FFFCF4 and the ember #DA3B12 are the rope's, never text.
   · the seat: 9 px at left 14, top 14; its 44 px hit area a pseudo-element offset right (x 14–58, centre 36: clear of
     the iOS back-swipe); it breathes on the 5.5 s rung (point.js phases it from the wall clock).
   · the motes: one container rotating once per 39.27 s, phased from the wall clock; no rAF. */
@view-transition{navigation:auto}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}
#asg-pt,#point{view-transition-name:asg-point}
::view-transition-group(*){animation-duration:.28s}
::view-transition-old(root){animation:asgClose .28s cubic-bezier(.4,0,1,1) both}
::view-transition-new(root){animation:asgOpen .28s cubic-bezier(0,0,.2,1) both}
@keyframes asgClose{from{clip-path:circle(150% at var(--x,18px) var(--y,18px))}to{clip-path:circle(0 at var(--x,18px) var(--y,18px))}}
@keyframes asgOpen{from{clip-path:circle(0 at var(--x1,18px) var(--y1,18px))}to{clip-path:circle(150% at var(--x1,18px) var(--y1,18px))}}

#asg-pt{--c:#C9A84C;cursor:pointer;-webkit-tap-highlight-color:transparent;border:0;padding:0;-webkit-appearance:none;appearance:none}
@supports (color:color-mix(in oklch,red,red)){
  #asg-pt,#point{--c:color-mix(in oklch,#C0392B calc(clamp(0,(var(--d,0) - .45)/.55,1)*100%),#C9A84C)}}
.asg-pt{position:fixed;left:14px;top:14px;z-index:2147483001;width:9px;height:9px;padding:0;margin:0;border:0;
  border-radius:50%;background:var(--c);box-shadow:0 0 10px var(--c);animation:asgBreath 5.5s ease-in-out infinite}
.asg-pt::after{content:"";position:absolute;left:0;top:-17.5px;width:44px;height:44px}
#asg-pt:not(.asg-pt)::after{content:"";position:absolute;left:50%;top:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%}
#asg-pt:focus-visible{outline:1px solid var(--c);outline-offset:6px}
/* the press: the Point swells 1 → 2.6 and gathers its glow across the 1,100 ms hold (the Point v9 gate), on / too */
#asg-pt,#point{scale:calc(1 + 1.6*var(--asg-hold,0))}
#asg-pt.asg-holding,#point.asg-holding{box-shadow:0 0 calc(10px + 50px*var(--asg-hold,0)) calc(22px*var(--asg-hold,0)) rgb(192 57 43/calc(.5*var(--asg-hold,0) + .2))}
/* under a page's own top bar the Point sits 12 px below it: from the first frame where seam.py knows the bar (data-top,
   so the crossing lands there and the new page opens out of it), then as the seam measures the lane (asg-under) */
body[data-top="46"] .asg-pt{top:calc(env(safe-area-inset-top,0px) + 58px)}
body[data-top="79"] .asg-pt{top:91px}
html:has(body[data-top="46"]){--y1:calc(env(safe-area-inset-top,0px) + 62.5px)}
html:has(body[data-top="79"]){--y1:95.5px}
body.asg-under .asg-pt{top:calc(var(--asg-top,0px) + 12px)}
/* whisper: only the Point, tiny and faint */
body[data-seam="whisper"] .asg-pt{width:6px;height:6px;box-shadow:none;animation-name:asgBreathW}
body[data-seam="whisper"] .asg-pt:hover{opacity:.9}
@keyframes asgBreath{0%,100%{opacity:1}50%{opacity:.72}}
@keyframes asgBreathW{0%,100%{opacity:.42}50%{opacity:.3}}
/* the motes: what you touched, orbiting the Point (newest 33), golden-angle spaced */
.asg-motes{position:absolute;left:50%;top:50%;width:0;height:0;pointer-events:none;animation:asgOrbit 39.27s linear infinite}
.asg-motes i{position:absolute;left:0;top:0;width:var(--s);height:var(--s);margin:calc(var(--s)/-2) 0 0 calc(var(--s)/-2);
  border-radius:50%;background:currentColor;opacity:.55;transform:rotate(var(--a)) translateX(var(--r))}
.asg-motes i.b{opacity:.85;box-shadow:0 0 4px 1px currentColor}
@keyframes asgOrbit{to{rotate:360deg}}
/* the Witness lens: the motes hold still where they are (C10.7) */
body[data-lens="witness"] .asg-motes{animation-play-state:paused}
/* the fallback glide (no view transition: Firefox, a reload, the back-swipe, the timeout): ≤ 400 ms from asg.cross */
#asg-pt.asg-glide{transition:translate .4s cubic-bezier(.2,.8,.2,1)}
/* the catch: it swells and settles back (character.js animates the seat's scale) with one ring */
.asg-ring1{position:fixed;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;border:1px solid var(--c,#C9A84C);
  pointer-events:none;z-index:2147483000;animation:asgRing1 1.4s ease-out forwards}
@keyframes asgRing1{from{opacity:.55;transform:scale(.5)}to{opacity:0;transform:scale(4)}}
@media (prefers-reduced-motion:reduce){
  .asg-pt,body[data-seam="whisper"] .asg-pt,.asg-motes,.asg-ring1{animation:none}
  #asg-pt.asg-glide{transition:none}}
@media print{#asg-pt,.asg-pt{display:none}}
/* the Descent's keyframes: its passage, the ember that carries the Point's crossing beneath, and the Surfacing
   (descent.css animates with them). They are here so they arrive with the first paint: in Chromium a stylesheet
   bringing @keyframes later, as descent.css did at idle, restyles the page (see descent.css) */
@keyframes asg-paper{0%,16.364%{translate:0 0}100%{translate:0 -104vh}}
@keyframes asg-dark{0%,16.364%{transform:translateY(104%)}100%{transform:translateY(0)}}
@keyframes asg-ember{0%{opacity:0;transform:translate(-50%,-50%) scale(.45)}23.636%{opacity:1;transform:translate(-50%,-50%) scale(1)}
 100%{opacity:1;transform:translate(-50%,-50%) scale(1.18)}}
@keyframes asg-ember-in{0%{opacity:1;transform:translate(-50%,-50%) scale(1.18)}46.667%{opacity:1;transform:translate(-50%,-50%) scale(1)}
 100%{opacity:0;transform:translate(-50%,-50%) scale(.7)}}
@keyframes asg-scrim{0%,14%{opacity:0}62%,100%{opacity:1}}
@keyframes asg-bloom{0%{opacity:0;transform:scale(.04)}14%{opacity:.95;transform:scale(.16)}62%{opacity:.5;transform:scale(1)}
 100%{opacity:0;transform:scale(1.35)}}
/* ground.css — the ground's lightness as position (Move 1 · lane 4; chassis C9, scores/move-1/descent.md).
   Paper above is where you read; dark below is where your reading is reflected. Every served page carries its depth
   on <body data-depth> (kit.depth_of: / and the edges 0 · gateways and /spine/<n>/ .2 · pages .4 · the corridor .45 ·
   an enclosure .5+n/18 · /beneath/ .8 · /point/ 1). This file turns that number into tokens a piece can read; it
   repaints no page's own ground (the grounds are asked: move-1 sheet, "can't be built as written").
     --asg-depth     the depth, as a number
     --asg-ground-l  the ladder's lightness at that depth (OKLCH L), paper .95 → the centre .05
     --asg-ground    the ladder's ground colour at that depth
     --asg-bleed     the foot's horizon bleed: .12 above the corridor, .20 from the corridor down
   Matched by the depth's first digits, so ".45" and "0.45" read alike, and every enclosure lands on its own rung.
   The foot: <a class="asg-down" href="/beneath/" data-nobloom> at the seam's foot on every present page and in /'s
   coda — one hairline over a 90 px horizon bleed (blur 6 px) in the colour of the room beneath (shell-ground.jsx:62-66),
   44 px tall to the touch, on its own layer (z 6: above the corridor's fixed chrome, the caption and the count at z 5,
   the tide's full-ground #hold, the two chairs' #swap and the practice's #touch at z 1, so a press or a tap on its
   centre reaches it). kit/descent.js draws the dimple, the veil and the passage on it. */
:root{--asg-depth:0;--asg-ground-l:.95;--asg-ground:#F4EEE3;--asg-under:#07060C;--asg-ember:#DA3B12;--asg-bleed:.12}
[data-depth^="0"],[data-depth="0"]{--asg-depth:0;--asg-ground-l:.95;--asg-ground:#F4EEE3}
[data-depth^=".1"],[data-depth^="0.1"]{--asg-depth:.1;--asg-ground-l:.85;--asg-ground:#DCD3C4}
[data-depth^=".2"],[data-depth^="0.2"]{--asg-depth:.2;--asg-ground-l:.74;--asg-ground:#B8AE9F}
[data-depth^=".3"],[data-depth^="0.3"]{--asg-depth:.3;--asg-ground-l:.63;--asg-ground:#958B7D}
[data-depth^=".4"],[data-depth^="0.4"]{--asg-depth:.4;--asg-ground-l:.52;--asg-ground:#736A5D}
[data-depth^=".45"],[data-depth^="0.45"]{--asg-depth:.45;--asg-ground-l:.47;--asg-ground:#645B50;--asg-bleed:.20}
[data-depth^=".5"],[data-depth^="0.5"]{--asg-depth:.5;--asg-ground-l:.41;--asg-ground:#544B42;--asg-bleed:.20}
[data-depth^=".6"],[data-depth^="0.6"]{--asg-depth:.6;--asg-ground-l:.31;--asg-ground:#3A332D;--asg-bleed:.20}
[data-depth^=".7"],[data-depth^="0.7"]{--asg-depth:.7;--asg-ground-l:.2;--asg-ground:#211C19;--asg-bleed:.20}
[data-depth^=".8"],[data-depth^="0.8"]{--asg-depth:.8;--asg-ground-l:.09;--asg-ground:#07060C;--asg-bleed:.20}
[data-depth^=".9"],[data-depth^="0.9"]{--asg-depth:.9;--asg-ground-l:.07;--asg-ground:#050409;--asg-bleed:.20}
[data-depth="1"],[data-depth^="1."]{--asg-depth:1;--asg-ground-l:.05;--asg-ground:#030204;--asg-bleed:.20}
/* a surface that wears the ladder (the room beneath, the rope's room): the under-dark radial of .m-night (living.css:163) */
.asg-ground{background:radial-gradient(120% 90% at 50% 40%,#100E1C,var(--asg-ground,#07060C));background-color:var(--asg-ground,#07060C)}
/* the foot: the hairline is the floor; the room's light bleeds up to it from beneath, in the 90 px above it (kept clear
   of the page's own words by the margin), and only the 44 px under the hairline answers a touch */
.asg-down{position:relative;display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:100%;
 min-height:44px;margin:90px 0 0;padding:0;color:inherit;text-decoration:none;
 font:400 10.5px/1 'DM Sans',system-ui,sans-serif;letter-spacing:.16em;text-transform:lowercase;
 -webkit-tap-highlight-color:transparent;isolation:isolate;z-index:6;
 scroll-snap-align:end}   /* on the corridor's mandatory-snap pages the foot is its own last stop, so a finger can reach it */
.asg-down::before{content:'';position:absolute;left:0;right:0;bottom:100%;height:90px;pointer-events:none;
 background:linear-gradient(to top,color-mix(in srgb,var(--asg-ember) calc(var(--asg-bleed)*100%),transparent) 0%,transparent 100%);
 filter:blur(6px)}
.asg-down::after{content:'';position:absolute;left:0;right:0;top:0;border-top:1px solid currentColor;opacity:.16;pointer-events:none}
.asg-down.asg-bound::after{display:none}
.asg-down span{opacity:.66}
.asg-down:hover span,.asg-down:focus-visible span{opacity:1}
.asg-down:focus-visible{outline:1px solid currentColor;outline-offset:4px}
@supports not (color:color-mix(in srgb,red 50%,blue)){
 .asg-down::before{background:linear-gradient(to top,rgba(218,59,18,.16) 0%,transparent 100%)}}
@media print{.asg-down{display:none}}