@font-face { font-family:'Shantell Sans'; src:url('/fonts/ShantellSans-LowInformality.woff2') format('woff2'); font-weight:600 800; font-style:normal; font-display:swap; }
@font-face { font-family:'DM Sans'; src:url('/fonts/DMSans-VF.ttf') format('truetype'); font-weight:100 1000; font-style:normal; font-display:swap; }
:root { --paper:#fff; --ink:#262626; --muted:#666; --rule:#d5d5d5; --thread:#000; font-family:'DM Sans',Arial,Helvetica,sans-serif; color:var(--ink); background:var(--paper); font-synthesis:none; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:var(--paper); }
.site-header,.site-footer { position:relative; }
a { color:inherit; text-decoration:none; } a:hover { color:var(--thread); }
a:focus-visible,[tabindex]:focus-visible { outline:2px solid var(--thread); outline-offset:5px; }
p,h1,h2,h3 { margin:0; } svg { display:block; width:100%; height:100%; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
/* Selected constellation has deterministic foreground ownership. Depth
   remains natural in overview; no project or index destination is removed. */
.enhanced [data-focus-layer="receded"] .stop-art { z-index:2!important; filter:blur(3px)!important; opacity:.5!important; }
.enhanced [data-focus-layer="receded"] .stop-label,.enhanced [data-focus-layer="receded"] .stop-description,.enhanced [data-focus-layer="receded"] .satellite-title,.enhanced [data-focus-layer="receded"] .satellite-note,.enhanced [data-focus-layer="receded"] .annotations { opacity:0!important; pointer-events:none; transition:none!important; }
.enhanced [data-focus-layer="receded"] .satellite { z-index:2!important; filter:blur(2px); }
.enhanced [data-focus-layer="receded"] .moon-tethers { opacity:0!important; }
.enhanced [data-focus-layer="receded"] .beacon,.enhanced [data-focus-layer="receded"] .stop-label,.enhanced [data-focus-layer="receded"] .stop-description,.enhanced [data-focus-layer="receded"] .moon-tethers { z-index:2!important; }
.enhanced [data-focus-layer="focused"] .stop-art { z-index:24!important; filter:none!important; opacity:1!important; }
.enhanced [data-focus-layer="focused"] .satellite { z-index:26!important; }
.enhanced [data-focus-layer="focused"] .moon-tethers { z-index:22; }
.skip-link { position:fixed; z-index:100; top:8px; left:20px; padding:14px; background:var(--paper); transform:translateY(-180%); } .skip-link:focus { transform:none; }
.site-header { min-height:82px; margin-inline:24px; border-bottom:1px solid var(--rule); display:flex; align-items:center; justify-content:space-between; gap:20px; }
.wordmark { font-family:'Shantell Sans','DM Sans',sans-serif; font-size:20px; font-weight:500; letter-spacing:-.042em; }.private-note { font-size:12px; color:var(--muted); letter-spacing:.04em; }.header-link { font-size:12px; }
.project-index { display:flex; flex-wrap:wrap; align-items:center; gap:8px 20px; padding:12px 0 max(12px, env(safe-area-inset-bottom)); font-size:12px; color:var(--ink); position:relative; z-index:40; }
.project-index a { min-height:44px; min-width:44px; display:flex; align-items:center; } .project-index a[aria-current] { color:var(--thread); text-decoration:underline; text-underline-offset:5px; }
.scene-help { padding:4px 24px 10px; font-size:12px; color:var(--muted); }.scene-help span { margin-left:16px; }
.artifact-frame { width:196px; aspect-ratio:3 / 4; position:relative; border:1px solid #d0d0d0; border-radius:2px; background:#f3f3f3; color:var(--thread); box-shadow:8px 18px 25px -15px #44444455; }
.artifact-frame svg { padding:6px; }.map-grid { opacity:.14; stroke-width:.8; }
.stop-label { display:flex; justify-content:center; align-items:center; min-height:44px; }.stop-title { font-family:'Shantell Sans','DM Sans',sans-serif; font-weight:500; font-size:54px; line-height:.93; letter-spacing:-.042em; }
.stop-description { font-size:12px; color:var(--muted); text-align:center; line-height:1.5; }
.project-link:focus-visible { outline:none; }.project-link:focus-visible .artifact-frame { outline:2px solid var(--thread); outline-offset:7px; }.project-link:focus-visible .stop-title { text-decoration:underline; text-underline-offset:5px; }
.is-focused .stop-title { color:var(--thread); --label-scale:1; }
/* No script: every narrative is visible in ordinary document flow. */
.project-stop { padding:36px 24px; text-align:center; }.stop-art { width:196px; margin:0 auto 26px; }.stop-description { margin-top:12px; }
.annotations { max-width:800px; margin:30px auto; text-align:left; }
.annotations summary { cursor:pointer; padding:12px 0; font-size:12px; }
.annotations a { display:block; padding:10px 0; text-decoration:underline; font-size:12px; }
.annotation { padding:12px 0; }
.annotation h3 { font-size:11px; font-weight:500; letter-spacing:.05em; color:var(--thread); margin-bottom:10px; }.annotation p { font-size:12px; line-height:1.65; }
.rail-indicator { display:none; }
/* Each projected element has its own depth. Articles introduce no stacking
   context, so mist can sit between art while live labels stay on top. */
.enhanced .timeline { position:relative; overflow:clip; isolation:isolate; cursor:grab; }
.enhanced body { display:flex; flex-direction:column; }
.enhanced #work { display:flex; flex-direction:column; min-height:0; }
.enhanced .rail-stops { position:relative; height:var(--scene-height, calc(100svh - 174px)); }
.enhanced .project-stop { display:contents; padding:0; }
.enhanced .project-link { display:block; width:1px; height:1px; padding:0; }
.enhanced .stop-art { position:absolute; left:0; top:0; margin:0; transform-origin:center; touch-action:none; }
.enhanced .stop-art::after { content:''; position:absolute; inset:-2px; background:var(--paper); opacity:var(--haze,0); pointer-events:none; }
.enhanced .stop-label,.enhanced .stop-description { position:absolute; transform:translateX(-50%); margin:0; z-index:30; width:max-content; max-width:300px; }
.enhanced .stop-label { min-height:44px; touch-action:none; }
.enhanced .stop-description { pointer-events:none; }
.moon-tethers { position:absolute; inset:0; z-index:6; pointer-events:none; opacity:0; }
.moon-tether { position:absolute; left:0; top:0; width:1px; height:1px; background:#666; transform-origin:0 0; pointer-events:none; will-change:transform; }

.atmosphere-plane { position:absolute; inset:0; pointer-events:none; mask-image:url('/textures/volume-edge.webp'); mask-size:100% 100%; }
.mist-bank { position:absolute; inset:0 -6%; transform-origin:center; }
.mist-form { position:absolute; inset:-12%; background:url('/textures/volume.webp') center / 100% 100% no-repeat; transform-origin:center; will-change:transform,opacity; }
.atmosphere-plane:nth-last-child(3) .mist-form { background-image:url('/textures/volume-rear.webp'); }
.atmosphere-plane:nth-last-child(2) .mist-form { background-image:url('/textures/volume-middle.webp'); }
.mist-form:nth-child(2) { background-position:65% 35%; background-size:125% 115%; }
.enhanced .stop-title { font-size:calc(54px * var(--label-scale, 1)); }
.gesture-surface { position:absolute; inset:0; z-index:0; touch-action:none; }
.is-dragging,.is-dragging a { cursor:grabbing; }.enhanced .timeline { user-select:none; }
.enhanced .annotations { display:none; }
.enhanced .is-focused .annotations { display:block; position:absolute; left:24px; bottom:0; width:max-content; max-width:calc(100% - 48px); max-height:70%; overflow:auto; margin:0; z-index:35; user-select:text; cursor:auto; }
.enhanced .annotations[open] { width:360px; padding:0 16px; background:var(--paper); border:1px solid var(--rule); }

.site-footer { margin-left:max(24px, env(safe-area-inset-left)); margin-right:max(24px, env(safe-area-inset-right)); border-top:1px solid var(--rule); font-size:11px; color:var(--muted); }
.footer-notes { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 0 max(24px, env(safe-area-inset-bottom)); }
.footer-notes nav { display:flex; align-items:center; gap:6px; }.footer-notes a { padding:6px 8px; }

@media(max-width:900px) {
 .site-header { min-height:76px; gap:10px; }.wordmark { font-size:17px; }.private-note { font-size:11px; }.private-note span,.header-link { display:none; }
 .project-index { gap:4px 12px; font-size:11px; }.scene-help { font-size:11px; line-height:1.5; }.scene-help span { display:block; margin:0; }

 .annotation p { font-size:12px; }
 .stop-title { font-size:43px; }.enhanced .stop-title { font-size:calc(43px * var(--label-scale, 1)); }.enhanced .stop-description { max-width:270px; }
 .footer-notes { flex-direction:column; align-items:start; gap:12px; line-height:1.5; }
}
.zoom-controls { display:none; }
.enhanced .zoom-controls { display:flex; align-items:center; gap:6px; margin-left:auto; }
.zoom-controls button { font:inherit; font-size:20px; width:44px; height:44px; border:1px solid var(--rule); background:transparent; color:var(--ink); cursor:pointer; }
.zoom-controls output { width:125px; text-align:center; font-size:11px; color:var(--muted); }
button:focus-visible { outline:2px solid var(--thread); outline-offset:3px; }
.beacon { display:none; }
.enhanced .beacon { display:block; position:absolute; width:44px; height:44px; transform:translate(-50%,-50%); z-index:var(--beacon-depth,7); touch-action:none; }
.beacon::after { content:none; }
.project-link:focus-visible .beacon { outline:2px solid var(--thread); outline-offset:3px; z-index:31; }
.satellite { display:inline-flex; flex-direction:column; align-items:center; width:140px; margin:24px; text-align:center; }
.satellite-image { display:block; width:108px; height:120px; background:#e9e9e9; color:var(--thread); border:1px solid #d0d0d0; }
.satellite-image[data-kind="distribution"] { border-radius:50%; width:120px; }
.satellite-image[data-kind="creation"] { width:140px; height:100px; }
.satellite-image[data-kind="meal"] { border-radius:50% 50% 3px 3px; }
.satellite-image svg { padding:6px; }
.satellite-title { font-size:15px; font-weight:530; margin-top:10px; }
.satellite-note { font-size:11px; color:var(--muted); line-height:1.5; margin-top:6px; }
.satellite.is-active .satellite-image,.satellite:target .satellite-image { outline:2px solid var(--thread); outline-offset:5px; }
.enhanced .satellite { position:absolute; left:0; top:0; z-index:20; margin:0; width:140px; transform:translate(-50%,-50%) scale(var(--moon-scale,1)); touch-action:none; }
@media(max-width:900px) {
 .enhanced .satellite-title { font-size:20px; }
 .enhanced .satellite-note { font-size:16px; }
}
.enhanced .stop-label,.enhanced .stop-description { transition:opacity 240ms ease; }
.enhanced [data-band="far"] .stop-label,.enhanced [data-band="far"] .stop-description,
.enhanced .project-stop:not([data-band="near"]) .satellite { opacity:0; pointer-events:none; }
.enhanced [data-band="near"] .beacon { opacity:0; pointer-events:none; }
.enhanced .orbit-peripheral .stop-label,.enhanced .orbit-peripheral .stop-description { opacity:0; pointer-events:none; }
.enhanced .is-focused:not([data-band="near"]) .annotations { display:none; }
@media(max-width:900px) {
 .enhanced .zoom-controls { margin-left:0; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }
.project-stop[data-prominence="featured"] .artifact-frame { border:2px solid var(--thread); }
.project-stop[data-prominence="featured"] .stop-title { font-weight:500; }
.project-stop[data-prominence="small"] .artifact-frame { transform:scale(.8); }
.project-stop[data-prominence="small"] .stop-title { font-size:calc(22px * var(--label-scale,1)); }
.satellite[data-prominence="featured"] .satellite-image { border:2px solid var(--thread); }
.satellite[data-prominence="featured"] .satellite-title { font-weight:600; }
.satellite[data-prominence="standard"] .satellite-image { transform:scale(.95); }
.empty-view { position:relative; margin:24px; max-width:900px; line-height:1.65; font-size:12px; }
/* Local mesh portraits inherit only their art slot's translation/depth. */
.rock-ready { position:relative; background:transparent!important; border-color:transparent!important; box-shadow:none; }
.rock-ready > svg { visibility:hidden; }
.rock-canvas { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; pointer-events:none; }

/* Strong, steady handwritten headings: INFM 0 and BNCE 0. */
.wordmark,.stop-title,.satellite-title,.project-stop[data-prominence="featured"] .stop-title,.satellite[data-prominence="featured"] .satellite-title{font-family:'Shantell Sans','DM Sans',sans-serif;font-weight:700;font-variation-settings:'INFM' 0,'BNCE' 0,'wght' 700;letter-spacing:-.025em}
.stop-title{line-height:1.05}
.wordmark{text-transform:uppercase;letter-spacing:.015em}