/* ═══════════════════════════════════════════════════════════════
   CALEBYULKIM.COM — click to travel (v58, 2026-10-18)
   The network is the site. Map mode: the crest with the who-I-am line and
   seven cards around it. Read mode: the map in a sidebar, the section as a
   real article. Previous eras: concepts/14-axon-page-v57/, 9-executive-night-v52/
   ═══════════════════════════════════════════════════════════════ */
:root{
  --ground:#0A0D12; --plate:#151B24; --recess:#0D1118;
  --ink:#E9EDF3; --body-ink:#C1CAD7; --muted:#8B95A5; --line:#242D39;
  --accent:#2B5BFF; --pressed:#5479FF; --ice:#BFD2FF; --silver:#E7EBF2;
  --display:"Space Grotesk",-apple-system,sans-serif; --body:"Instrument Sans",-apple-system,sans-serif;
  --monoF:"JetBrains Mono",ui-monospace,monospace; --serifI:"Newsreader",Georgia,serif;
  --ease:cubic-bezier(.2,.8,.2,1); --side:320px;
}
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:auto;}
body{margin:0; min-height:100vh; color:var(--ink); font-family:var(--body); font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased; letter-spacing:-.005em;
  background:radial-gradient(1000px 560px at 78% -10%, rgba(43,91,255,.09), transparent 62%), radial-gradient(760px 460px at 6% 6%, rgba(43,91,255,.04), transparent 60%), linear-gradient(180deg,#0C1017 0%, var(--ground) 46%, #080B0F 100%); background-attachment:fixed;}
body.mode-map{overflow:hidden; height:100vh;}
::selection{background:var(--accent); color:#F4F7FF;}
/* brushed grain — what stops flat dark reading as unfinished */
body::before{content:""; position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.028; mix-blend-mode:screen;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");}
*{scrollbar-width:thin; scrollbar-color:#2A3442 transparent;}
*::-webkit-scrollbar{width:8px; height:8px;} *::-webkit-scrollbar-thumb{background:#2A3442; border-radius:8px;} *::-webkit-scrollbar-track{background:transparent;}
.sec__body a:not(.ch){color:var(--ice); text-decoration:underline; text-decoration-color:rgba(43,91,255,.45); text-underline-offset:3px; text-decoration-thickness:1px; transition:text-decoration-color 150ms var(--ease);}
.sec__body a:not(.ch):hover{text-decoration-color:var(--ice);}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:2px;}
a{color:inherit;} h1,h2,h3{margin:0; font-family:var(--display); font-weight:500;}
.mono{font-family:var(--monoF); font-size:11px; font-weight:500; letter-spacing:.11em;}
.ch{clip-path:polygon(var(--ch) 0,calc(100% - var(--ch)) 0,100% var(--ch),100% calc(100% - var(--ch)),calc(100% - var(--ch)) 100%,var(--ch) 100%,0 calc(100% - var(--ch)),0 var(--ch));}
.skip{position:fixed; left:16px; top:-60px; z-index:50; --ch:6px; padding:10px 14px; background:var(--accent); color:#F4F7FF; font-family:var(--monoF); font-size:12px; letter-spacing:.1em; text-decoration:none; transition:top 150ms var(--ease);}
.skip:focus{top:12px;}
.sec__h:focus-visible{outline:none; text-decoration:underline; text-decoration-color:var(--accent); text-underline-offset:8px;}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}

#bg{position:fixed; inset:0; width:100%; height:100%; z-index:0; pointer-events:none;}
.vignette{position:fixed; inset:0; z-index:1; pointer-events:none; background:radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(5,7,10,.6) 100%);}

/* ── the stage: the map. Full screen in map mode, a sidebar in read mode ── */
.stage{position:fixed; inset:0; z-index:3; overflow:hidden; clip-path:inset(0 0 0 0); transition:clip-path 700ms var(--ease), background 700ms var(--ease);}
.mode-read .stage{clip-path:inset(0 calc(100% - var(--side)) 0 0); background:linear-gradient(180deg,rgba(8,11,16,.62),rgba(8,11,16,.4)); pointer-events:none;}
.mode-read .stage .node,.mode-read .stage .core__crest{pointer-events:auto;}
.stage::after{content:""; position:absolute; top:0; bottom:0; left:calc(var(--side) - 1px); width:1px; background:var(--line); opacity:0; transition:opacity 700ms var(--ease);} .mode-read .stage::after{opacity:1;}
#net{position:absolute; inset:0; width:100%; height:100%; pointer-events:none;}
.world{position:absolute; left:0; top:0; width:0; height:0; transform-origin:0 0; will-change:transform;}

.core{position:absolute; left:0; top:0; transform:translate(-50%,-50%); width:min(560px, 92vw); text-align:center; pointer-events:none;}
.core > *{pointer-events:auto;}
.core__crest{display:block; position:relative; width:84px; height:70px; margin:0 auto 10px; filter:drop-shadow(0 0 18px rgba(43,91,255,.35)); cursor:pointer; background:none; border:0; padding:0;}
.core__crest::before{content:""; position:absolute; left:50%; top:50%; width:124px; height:124px; margin:-62px 0 0 -62px; border-radius:50%; border:1px solid rgba(120,150,255,.14); box-shadow:inset 0 0 36px rgba(43,91,255,.08); pointer-events:none;}
.core__crest::after{content:""; position:absolute; left:50%; top:50%; width:164px; height:164px; margin:-82px 0 0 -82px; border-radius:50%; border:1px dashed rgba(120,150,255,.1); pointer-events:none;}
.core__crest svg{width:84px; height:70px;}
.core__text{transition:opacity 400ms var(--ease);}
.mode-read .core__text{opacity:0; pointer-events:none;}
.core__name{font-size:clamp(34px,5vw,58px); line-height:1; letter-spacing:-.045em; color:var(--silver); font-weight:400; text-shadow:0 1px 0 rgba(255,255,255,.06), 0 18px 40px rgba(0,0,0,.45);}
.core__lede{margin:14px 0 0; font-family:var(--display); font-size:clamp(18px,2vw,24px); letter-spacing:-.03em; line-height:1.25;}
.core__lede em{font-style:normal; color:var(--ice);}
.core__intro{margin:10px auto 0; max-width:40ch; color:var(--body-ink); font-size:16px;}
.core__meta{margin:14px 0 0; color:var(--muted); text-transform:uppercase; letter-spacing:.12em; font-size:10px;}
.core__meta b{color:var(--ink); font-weight:500;}
.core__id{margin:12px 0 0; font-family:var(--display); font-weight:400; font-size:20px; letter-spacing:-.025em; color:var(--silver); text-shadow:0 1px 0 rgba(255,255,255,.05), 0 12px 30px rgba(0,0,0,.5);}
.core__id span{color:var(--muted); font-size:15px;}
.core__tag{margin:8px 0 0; font-size:10.5px; letter-spacing:.14em; color:var(--muted);}
#coreTop .core__tag{font-size:10px; margin-top:5px;}
#coreTop .core__id{font-size:17px;} #coreTop .core__id span{display:block; font-size:13px; margin-top:2px;}
/* the prompt under the crest: a pill you can't miss, with a pulsing dot */
.core__hint{--ch:8px; display:inline-flex; align-items:center; gap:10px; margin:14px 0 0; padding:11px 18px; font-size:12px; letter-spacing:.12em; color:var(--ink); background:linear-gradient(180deg,rgba(43,91,255,.14),rgba(43,91,255,.04)), rgba(16,21,29,.92); box-shadow:inset 0 0 0 1px rgba(43,91,255,.5), inset 0 1px 0 rgba(255,255,255,.06);}
.core__hint i{position:relative; width:8px; height:8px; border-radius:50%; background:var(--accent); box-shadow:0 0 10px rgba(43,91,255,.8);}
.core__hint i::after{content:""; position:absolute; inset:-4px; border-radius:50%; border:1px solid rgba(90,130,255,.7); animation:ping 1.6s ease-out infinite;}
@keyframes ping{0%{transform:scale(.6); opacity:.9;} 100%{transform:scale(2.2); opacity:0;}}
.core__hint.ch{clip-path:polygon(var(--ch) 0,calc(100% - var(--ch)) 0,100% var(--ch),100% calc(100% - var(--ch)),calc(100% - var(--ch)) 100%,var(--ch) 100%,0 calc(100% - var(--ch)),0 var(--ch));}
@media(max-width:600px){.core__meta span:nth-child(2){display:block;}}
#coreTop{position:fixed; left:16px; right:16px; top:70px; z-index:3; text-align:center; pointer-events:none; transition:opacity 400ms var(--ease), transform 400ms var(--ease);}
#coreTop .core__name{font-size:30px;} #coreTop .core__lede{font-size:17px; margin-top:8px;} #coreTop .core__intro{font-size:14px; max-width:34ch; margin-top:6px;}
#coreTop .core__hint{margin-top:6px;}
.mode-read #coreTop{opacity:0; transform:translateY(-16px);}

/* ── the nodes: cards you can't miss ───────────────────────── */
.node{position:absolute; left:0; top:0; transform:translate(-50%,-50%) scale(var(--iz,1)); width:44px; height:44px; border:0; background:none; padding:0; cursor:pointer; border-radius:50%; opacity:0; transition:opacity 500ms var(--ease);}
.node.grown{opacity:1;} body.lowfps .node{transition:none;}
.node__card{--ch:9px; position:absolute; top:50%; transform:translateY(-50%); width:max-content; padding:10px 14px 10px 13px; text-align:left; display:flex; align-items:baseline; gap:10px; background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,0)), rgba(16,21,29,.82); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); box-shadow:inset 0 0 0 1px rgba(255,255,255,.11), inset 0 1px 0 rgba(255,255,255,.06); color:var(--ink); transition:box-shadow 180ms var(--ease), background 180ms var(--ease), opacity 300ms var(--ease), filter 180ms var(--ease);}
.node[data-side="r"] .node__card{left:30px;} .node[data-side="l"] .node__card{right:30px;}
.node[data-side="c"] .node__card{left:50%; top:auto; bottom:-14px; transform:translate(-50%,100%); text-align:center;}
.node[data-side="t"] .node__card{left:50%; top:-14px; bottom:auto; transform:translate(-50%,-100%); text-align:center;}
.node__card b{font-family:var(--monoF); font-size:10px; letter-spacing:.14em; color:rgba(191,210,255,.55); font-weight:400;}
.node__card strong{font-family:var(--display); font-weight:500; font-size:16px; letter-spacing:-.02em; line-height:1.15; white-space:nowrap;}
.node__go{font-style:normal; font-family:var(--monoF); font-size:12px; color:var(--ice); opacity:0; transform:translateX(-4px); transition:opacity 180ms var(--ease), transform 180ms var(--ease);}
.node:hover .node__go,.node:focus-visible .node__go{opacity:1; transform:none;}
.node__card em{display:block; font-style:normal; font-size:13.5px; line-height:1.4; color:#A3ADBD; margin-top:4px;}
.node__card small{display:block; font-family:var(--monoF); font-size:10.5px; letter-spacing:.12em; color:var(--ice); margin-top:8px;}
.node:hover .node__card{box-shadow:inset 0 0 0 1px rgba(43,91,255,.75), inset 0 1px 0 rgba(255,255,255,.08); background:linear-gradient(180deg,rgba(43,91,255,.12),rgba(43,91,255,.02)), rgba(16,21,29,.9); filter:drop-shadow(0 8px 22px rgba(43,91,255,.22));}
.node.on .node__card{box-shadow:inset 0 0 0 1px var(--accent);}
/* in the sidebar the cards fold to titles */
.mode-read .node__card{width:max-content; padding:7px 11px; white-space:nowrap; gap:8px; left:50%!important; right:auto!important; top:auto; bottom:-12px; transform:translate(-50%,100%);}
.mode-read .node__card b,.mode-read .node__card em,.mode-read .node__card small{display:none;}
.mode-read .node__card strong{font-size:12.5px;}
.mode-read .node:not(.on) .node__card{color:var(--body-ink);}
/* in the sidebar only the open node wears its title; the others show it on hover — the list below names them all */
.mode-read .node:not(.on):not(:hover) .node__card{opacity:0;}
#sidelist{position:fixed; left:24px; width:calc(var(--side) - 48px); bottom:20px; max-height:calc(100vh - 240px); overflow:auto; scrollbar-width:thin; z-index:4; display:none; flex-direction:column; gap:2px;}
.mode-read #sidelist{display:flex;}
#sidelist button{--ch:6px; display:flex; align-items:center; gap:12px; width:100%; text-align:left; background:none; border:0; padding:8px 12px; color:var(--body-ink); font:inherit; font-size:13.5px; letter-spacing:-.005em; line-height:1.4; cursor:pointer; box-shadow:inset 2px 0 0 transparent; transition:color 150ms var(--ease), background 150ms var(--ease), box-shadow 150ms var(--ease);}
#sidelist button b{font-family:var(--monoF); font-size:10px; letter-spacing:.14em; color:#6B7686; font-weight:400; width:18px;}
#sidelist button:hover{color:var(--ink); background:rgba(255,255,255,.04);} #sidelist button.on{color:var(--ink); background:linear-gradient(90deg,rgba(43,91,255,.16),rgba(43,91,255,.03)); box-shadow:inset 2px 0 0 var(--accent);} #sidelist button.on b{color:var(--ice);}
#sidelist .sidelist__cap{color:var(--muted); padding:0 12px 6px;}
@media(max-width:899px){#sidelist{display:none!important;}}
@media(max-width:899px){
  .node__card{width:max-content; padding:7px 11px; white-space:nowrap; left:50%!important; right:auto!important; top:auto; bottom:-34px; transform:translateX(-50%); gap:8px;}
  .node__card b,.node__card em,.node__card small{display:none;} .node__card strong{font-size:12.5px;}
}

/* ── the reader: a real page ──────────────────────────────── */
#cur{position:fixed; inset:0; width:100%; height:100%; z-index:60; pointer-events:none;}
html.cur-on, html.cur-on *{cursor:none !important;}
#rd{position:fixed; inset:0; width:100%; height:100%; z-index:2; pointer-events:none;}
#reader{position:relative; z-index:3; display:none; margin-left:var(--side); padding:120px 48px 80px;}
.mode-read #reader{display:block; animation:rise 500ms var(--ease);}
@keyframes rise{from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;}}
.reader__in{max-width:66ch; margin:0 auto; padding-left:14px;}
.sec{display:none;} .sec.on{display:block; animation:rise 450ms var(--ease);}
.sec header{position:relative; margin-bottom:28px;}
.sec header::before{content:attr(data-n); position:absolute; right:-8px; top:-34px; font-family:var(--display); font-weight:400; font-size:150px; line-height:1; letter-spacing:-.06em; color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.055); pointer-events:none; user-select:none;}
@media(max-width:899px){.sec header::before{font-size:110px; top:-22px; right:0;}}
.sec__cap{display:inline-flex; align-items:flex-start; gap:10px; color:var(--muted); margin-bottom:12px; line-height:1.6;}
.sec__cap::before{content:""; flex:none; margin-top:4px; width:9px; height:9px; border-radius:50%; border:1px solid var(--accent); background:rgba(43,91,255,.5); box-shadow:0 0 10px rgba(43,91,255,.65);}
.sec .sec__h{position:relative; font-size:clamp(34px,4.2vw,50px); letter-spacing:-.045em; font-weight:400; line-height:1.04; color:var(--silver); text-shadow:0 1px 0 rgba(255,255,255,.05), 0 16px 40px rgba(0,0,0,.5);}
.sec__rule{display:block; position:relative; width:56px; height:1px; margin-top:22px; background:linear-gradient(90deg,rgba(255,255,255,.34),rgba(120,150,255,.6));}
.sec__rule::after{content:""; position:absolute; right:-3px; top:-2px; width:5px; height:5px; border-radius:50%; background:var(--ice); box-shadow:0 0 8px rgba(43,91,255,.7);}
.sec__body p{margin:0 0 1.15em; color:#C7CFDB; font-size:17.5px; line-height:1.7;}
.sec__body em.key{font-style:normal; color:var(--ice);}
.pull{margin:1.5em 0; padding-left:20px; border-left:1px solid var(--accent); font-family:var(--serifI); font-style:italic; font-size:clamp(22px,2.4vw,27px); line-height:1.35; color:var(--ink); max-width:30ch;}
.xp{list-style:none; margin:0; padding:0;}
.xp li{padding:22px 0; border-bottom:1px solid var(--line);} .xp li:first-child{padding-top:0;} .xp li:last-child{border-bottom:0;}
.xp__top{display:flex; justify-content:space-between; gap:14px; align-items:baseline; flex-wrap:wrap;}
.xp h3{font-size:22px; letter-spacing:-.02em;} .xp .org{display:block; color:var(--muted); font-size:15px; margin-top:3px;}
.xp p{margin:12px 0 0;}
.pill{--ch:6px; padding:5px 9px; background:var(--recess); box-shadow:inset 0 0 0 1px rgba(191,210,255,.18); color:var(--ice); white-space:nowrap; font-size:10.5px;}
.plate{--ch:12px; padding:26px 28px; background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.006)), var(--plate); box-shadow:inset 0 0 0 1px rgba(255,255,255,.07), inset 0 1px 0 rgba(255,255,255,.06); margin-bottom:16px; filter:drop-shadow(0 18px 30px rgba(0,0,0,.42)); transition:box-shadow 200ms var(--ease);}
.plate__top{display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap;} .plate h3{font-size:24px; letter-spacing:-.03em;}
.plate p{margin:14px 0 0;} .plate__foot{display:flex; justify-content:space-between; margin-top:22px; padding-top:14px; border-top:1px solid var(--line); color:var(--muted);}
.plate__foot a{text-decoration:none; color:var(--ice);}
/* every plate is a cell: synapses in two corners, blue membrane on hover */
.plate,.plaque,.links a,.chip{position:relative;}
.plate::before,.plaque::before,.links a::before{content:""; position:absolute; left:9px; top:9px; width:4px; height:4px; border-radius:50%; background:rgba(190,205,230,.45); box-shadow:0 0 6px rgba(43,91,255,.5);}
.plate::after,.plaque::after,.links a::after{content:""; position:absolute; right:9px; bottom:9px; width:4px; height:4px; border-radius:50%; background:rgba(190,205,230,.3);}
.plate:hover,.plaque:hover{box-shadow:inset 0 0 0 1px rgba(43,91,255,.5);}
.links{list-style:none; margin:0; padding:0; display:grid; gap:12px;}
.links a{--ch:10px; display:flex; justify-content:space-between; align-items:center; padding:20px 22px; text-decoration:none; background:var(--plate); box-shadow:inset 0 0 0 1px rgba(255,255,255,.07); transition:background 180ms var(--ease);}
.links a:hover{background:#1A222D; box-shadow:inset 0 0 0 1px rgba(43,91,255,.55);} .links__p{font-family:var(--display); font-size:17px; letter-spacing:-.02em;} .links__h{color:var(--muted);}
.verse{margin:0 0 28px; max-width:24ch; font-family:var(--serifI); font-style:italic; font-size:clamp(28px,3.6vw,42px); line-height:1.22; color:var(--ink);} .verse footer{margin-top:16px; font-style:normal; color:var(--muted);}
.statement{margin:0 0 22px; font-family:var(--display); font-weight:400; font-size:clamp(22px,2.6vw,30px); line-height:1.4; letter-spacing:-.03em; max-width:26ch;}
.chip{--ch:9px; border:0; cursor:pointer; padding:16px 22px; background:var(--accent); color:#F4F7FF; transition:background 180ms var(--ease);}
.chip:hover{background:var(--pressed); box-shadow:0 0 22px rgba(43,91,255,.35);} .chip.ok{background:#1A2A55;}
.social{display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:22px;} .social a{text-decoration:none; color:var(--body-ink);} .social a:hover{color:var(--ice);}
.plaque{--ch:10px; display:grid; grid-template-columns:repeat(3,auto); width:max-content; max-width:100%; margin:26px 0 0; background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.01)), var(--plate); filter:drop-shadow(0 14px 28px rgba(0,0,0,.45));}
.plaque div{padding:12px 18px; display:flex; flex-direction:column; gap:3px; border-left:1px solid var(--line);} .plaque div:first-child{border-left:0;}
.plaque .l{font-family:var(--monoF); font-size:10px; letter-spacing:.12em; color:var(--muted); text-transform:uppercase;}
.plaque .v{font-family:var(--monoF); font-size:12px; letter-spacing:.06em; color:var(--ink); text-transform:uppercase;}
@media(max-width:560px){.sec__body p.journey{font-size:11.5px; letter-spacing:.12em;} .plaque{grid-template-columns:1fr; width:100%;} .plaque div{border-left:0; border-top:1px solid var(--line); flex-direction:row; justify-content:space-between;} .plaque div:first-child{border-top:0;}}
.me__lede{margin:18px 0 0; font-family:var(--display); font-size:clamp(22px,2.4vw,30px); letter-spacing:-.03em; line-height:1.25;} .me__lede em{font-style:normal; color:var(--ice);}
.actions{margin-top:26px; display:flex; flex-wrap:wrap; gap:12px;}
.cta{--ch:9px; display:inline-flex; align-items:center; height:46px; padding:0 22px; text-decoration:none; border:0; cursor:pointer; font-family:var(--monoF); font-size:12px; letter-spacing:.1em; font-weight:500; color:#F4F7FF; background:var(--accent); transition:background 180ms var(--ease);}
.cta:hover{background:var(--pressed);} .cta--ghost{color:var(--ink); background:var(--plate); box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);} .cta--ghost:hover{background:#1C2430;}
.sec__body p.journey{margin:22px 0 0; color:var(--muted); font-size:12px; letter-spacing:.14em; line-height:1.6;}
/* the portrait: a cell with a synapse in the corner, floated beside the Me copy */
.portrait{--ch:12px; float:right; width:160px; margin:0 0 18px 28px; position:relative; background:var(--plate); filter:drop-shadow(0 18px 30px rgba(0,0,0,.45));}
.portrait img{display:block; width:100%; height:auto; filter:saturate(.92); transition:filter 300ms var(--ease);} .portrait:hover img{filter:none;}
.portrait::before{content:""; position:absolute; inset:0; box-shadow:inset 0 0 0 1px rgba(255,255,255,.1); pointer-events:none;}
.portrait::after{content:""; position:absolute; right:9px; bottom:9px; width:5px; height:5px; border-radius:50%; background:var(--ice); box-shadow:0 0 8px rgba(43,91,255,.8);}
@media(max-width:560px){.portrait{float:none; width:140px; margin:0 0 20px;}}
.sec__body::after{content:""; display:block; clear:both;}
/* the Me card carries a small portrait */
.node__card--me{padding-top:12px;}
.node__face{display:block; width:40px; height:50px; object-fit:cover; margin-bottom:8px; clip-path:polygon(5px 0,calc(100% - 5px) 0,100% 5px,100% calc(100% - 5px),calc(100% - 5px) 100%,5px 100%,0 calc(100% - 5px),0 5px); box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);}
.node[data-side="t"] .node__face,.node[data-side="c"] .node__face{margin-inline:auto;}
.mode-read .node__face{display:none;}
/* the bench list in Experience */
strong.bench-h{display:inline; margin:0; color:var(--ink); font-weight:500;}
.reader__foot{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-top:56px; padding-top:22px; border-top:1px solid var(--line);}
.reader__foot button{--ch:7px; display:inline-flex; align-items:center; gap:10px; height:44px; background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,0)), var(--plate); border:0; padding:0 16px; color:var(--body-ink); cursor:pointer; box-shadow:inset 0 0 0 1px rgba(255,255,255,.12); transition:color 180ms var(--ease), box-shadow 180ms var(--ease);}
.reader__foot button:hover{color:var(--ink); box-shadow:inset 0 0 0 1px rgba(43,91,255,.7);}
.reader__foot button::before{content:""; width:7px; height:7px; border-radius:50%; border:1px solid rgba(200,215,235,.5); background:var(--recess);}
.reader__foot button:hover::before{border-color:var(--accent); background:rgba(43,91,255,.4);}
.reader__foot [data-next]{color:#F4F7FF; background:linear-gradient(180deg,#2F5FFF,#2448D8); box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 10px 24px rgba(43,91,255,.25);}
.reader__foot [data-next]::before{border-color:#F4F7FF; background:#F4F7FF; box-shadow:0 0 8px rgba(255,255,255,.6);}

/* phones: the sidebar becomes a chip row */
#chips{position:fixed; left:0; right:0; top:64px; z-index:5; display:none; gap:8px; overflow-x:auto; padding:10px 16px; background:rgba(10,13,18,.84); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border-bottom:1px solid var(--line); scrollbar-width:none;}
#chips{-webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 40px),transparent); mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 40px),transparent);}
#chips button{--ch:6px; flex:none; background:var(--plate); border:0; padding:8px 12px; color:var(--body-ink); cursor:pointer; box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);}
#chips button.on{color:#F4F7FF; background:linear-gradient(180deg,rgba(43,91,255,.5),rgba(43,91,255,.25)); box-shadow:inset 0 0 0 1px var(--accent);}
@media(max-width:899px){
  .mode-read .stage{display:none;}
  .mode-read #chips{display:flex;}
  #reader{margin-left:0; padding:128px 20px 56px;}
}

/* ── chrome ─────────────────────────────────────────────────── */
.nav{position:fixed; left:0; right:0; top:0; z-index:6; height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 clamp(16px,3vw,40px); pointer-events:none;}
.mode-read .nav{background:rgba(10,13,18,.72); -webkit-backdrop-filter:blur(16px) saturate(150%); backdrop-filter:blur(16px) saturate(150%); border-bottom:1px solid var(--line);}
.nav > *{pointer-events:auto;}
.mark{display:flex; align-items:center; gap:10px; text-decoration:none; background:none; border:0; padding:0; color:var(--ink); cursor:pointer;}
.mark svg{width:26px; height:22px; filter:drop-shadow(0 0 8px rgba(43,91,255,.35));} .mark span{font-family:var(--display); font-size:15px; font-weight:500; letter-spacing:-.02em;}
.nav__links{display:flex; gap:22px; align-items:center; position:relative;}
.nav__links::before{content:""; position:absolute; left:6px; right:112px; bottom:-9px; height:1px; background:linear-gradient(90deg,transparent,rgba(170,190,222,.3) 10%,rgba(170,190,222,.3) 90%,transparent);}
.mode-map .nav__links::before{right:6px;}
.nav__links button[data-go]{position:relative;}
.nav__links button[data-go]::after{content:""; position:absolute; left:50%; bottom:-12px; width:7px; height:7px; margin-left:-3.5px; border-radius:50%; background:var(--ground); border:1px solid rgba(200,215,235,.45); transition:border-color 300ms var(--ease), background 300ms var(--ease), box-shadow 300ms var(--ease);}
.nav__links button[data-go]:hover::after{border-color:rgba(43,91,255,.8);}
.nav__links button[data-go].on::after{border-color:var(--accent); background:rgba(43,91,255,.5); box-shadow:0 0 10px rgba(43,91,255,.6);}
@media(max-width:899px){.nav__links::before{display:none;}}
.nav__links button{background:none; border:0; padding:0; color:var(--muted); font:inherit; font-size:13px; letter-spacing:.01em; cursor:pointer; transition:color 120ms var(--ease);}
.nav__links button:hover,.nav__links button.on{color:var(--ink);}
.nav__map{--ch:6px; padding:8px 12px!important; background:var(--plate)!important; color:var(--ink)!important; box-shadow:inset 0 0 0 1px rgba(255,255,255,.12); display:none!important;}
.mode-read .nav__map{display:inline-block!important;}
@media(max-width:899px){.nav__links button:not(.nav__map){display:none;} .kbd{display:none;}}
@media(max-width:560px){.foot{font-size:10px;} .foot__mail{display:none;}}
.foot{position:fixed; left:clamp(16px,3vw,40px); bottom:16px; z-index:5; color:#7A8494; font-size:10.5px; letter-spacing:.12em; pointer-events:none;}
.foot a{pointer-events:auto; text-decoration:none; color:var(--body-ink);} .foot a:hover{color:var(--ice);}
.mode-read .foot{display:none;}

/* ── 404 ────────────────────────────────────────────────────── */
.oops{min-height:100vh; display:grid; place-items:center; text-align:center; padding:0 24px; position:relative; z-index:2;}
.oops svg{width:56px; height:48px;}
.oops h1{margin-top:22px; font-size:clamp(30px,4vw,44px); font-weight:400; letter-spacing:-.035em; color:var(--silver);}
.oops p{color:var(--body-ink); margin:14px auto 0; max-width:40ch;}
.oops .mono{color:var(--muted);}
.oops .cta{margin-top:28px;}

/* writing: each piece is a cell that opens its own page */
.pieces{list-style:none; margin:22px 0 0; padding:0; display:grid; gap:14px;}
.piece{--ch:12px; display:block; position:relative; padding:22px 26px; text-decoration:none; background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.008)), var(--plate); filter:drop-shadow(0 18px 30px rgba(0,0,0,.42)); transition:background 180ms var(--ease);}
.piece:hover{background:#1A222D; box-shadow:inset 0 0 0 1px rgba(43,91,255,.5);}
.piece::before{content:""; position:absolute; left:9px; top:9px; width:4px; height:4px; border-radius:50%; background:rgba(190,205,230,.45); box-shadow:0 0 6px rgba(43,91,255,.5);}
.piece__meta{display:block; color:var(--muted); margin-bottom:10px;}
.piece__title{display:block; font-family:var(--display); font-weight:400; font-size:23px; letter-spacing:-.03em; line-height:1.2; color:var(--silver);}
.piece__dek{display:block; margin-top:10px; color:var(--body-ink); font-size:15.5px; line-height:1.55;}
.piece__go{display:block; margin-top:14px; color:var(--ice);}
/* a piece's own page: the reader alone, full width, native scroll */
body.page{overflow:auto; height:auto;}
body.page #reader{display:block; margin-left:0; animation:none; padding-top:120px;}
body.page .sec.on{animation:none; opacity:1; transform:none;} /* a standalone page never waits on an entrance */
body.page .reader__in{max-width:66ch;}
.piece-page__dek{font-family:var(--display); font-size:clamp(18px,2vw,22px); letter-spacing:-.02em; line-height:1.4; color:var(--body-ink); margin:0 0 28px;}
.reader__foot a{--ch:7px; display:inline-flex; align-items:center; gap:10px; height:44px; background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,0)), var(--plate); padding:0 16px; color:var(--body-ink); text-decoration:none; box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);}
.reader__foot a:hover{color:var(--ink); box-shadow:inset 0 0 0 1px rgba(43,91,255,.7);}

/* group headings inside an article: display face + a synapse dot + a fading rule */
.sec__body h3.sec__sub{display:flex; align-items:center; gap:14px; margin:38px 0 16px; font-family:var(--display); font-weight:400; font-size:22px; letter-spacing:-.025em; line-height:1.2; color:var(--silver);}
.sec__body h3.sec__sub::before{content:""; flex:none; width:8px; height:8px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 3px rgba(43,91,255,.18), 0 0 14px rgba(43,91,255,.55);}
.sec__body h3.sec__sub::after{content:""; flex:1; height:1px; background:linear-gradient(90deg,rgba(43,91,255,.45),var(--line) 45%,transparent);}
.sec__body h3.sec__sub:first-child{margin-top:4px;}
@media(max-width:899px){.sec__body h3.sec__sub{font-size:19px; margin-top:30px;}}
/* turtleneck screenshots: three phones in a row inside the plate */
.shots{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:18px 0 4px;}
.shots--wide{grid-template-columns:1fr;}
.shots img{display:block; width:100%; height:auto; clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 10px,100% calc(100% - 10px),calc(100% - 10px) 100%,10px 100%,0 calc(100% - 10px),0 10px); box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);}
.shots figcaption{margin-top:6px; color:var(--muted); font-size:10px; letter-spacing:.08em; text-align:center;}
@media(max-width:560px){.shots{gap:6px; margin-inline:-12px;} .plate{padding:22px 20px;}}

/* ── reduced motion: honour it everywhere ──────────────────── */
@media (prefers-reduced-motion: reduce){
  .core__hint i::after{animation:none;}
  .mode-read #reader,.sec.on{animation:none;}
  *{transition-duration:0s!important;}
}

/* ── print: the open article alone ────────────────────────── */
@media print{
  body{background:#fff; color:#111;}
  body::before,#bg,.vignette,.stage,#rd,#cur,.nav,.foot,#chips,#sidelist,#coreTop,.reader__foot,.skip{display:none!important;}
  #reader{display:block!important; margin:0; padding:0;}
  .sec .sec__h,.sec__body p,.sec__body,.xp h3,.plate h3,.piece__title{color:#111; text-shadow:none;}
  .sec header::before{display:none;}
  .sec__body a:not(.ch){color:#111;}
  .plate,.plaque,.piece,.links a,.pill{background:none; filter:none; box-shadow:none; border:1px solid #ccc;}
}

/* v84: the plain-terms line, what he is open to, reply expectation */
.sec__body p.plain{color:var(--body-ink); font-size:16px; line-height:1.65; padding:14px 16px; background:var(--recess); box-shadow:inset 0 0 0 1px rgba(255,255,255,.06); border-radius:2px;}
.sec__body p.open{margin:14px 0 0; max-width:60ch; font-size:11px; letter-spacing:.12em; line-height:1.9; color:var(--muted);}
.sec__body p.reply{margin:22px 0 0; font-size:11px; letter-spacing:.1em; color:var(--muted);}