/* Home v4: v3's page, re-lit. The tokens are v3's, redefined, so every reused section follows. */
body.v4{--bg:#0e0e0c;--surface:#161613;--paper:#1c1c19;--ink:#eae8e2;--muted:#a19e95;--accent:#f2c230;--on-accent:#0e0e0c;--red:#e0412f;--blue:#8fb3ff;
 --field:#eae8e2;--field-ink:#0e0e0c;--field-muted:#55534d;background:var(--bg);color:var(--ink)}
.v4 :focus-visible{outline-color:var(--blue)}
.v4::after{content:"";position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.06;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") repeat}
.v4 .bar{background:var(--bg)}.v4 .act{background:var(--ink);color:var(--bg)}.v4 .act:hover{background:var(--accent);color:var(--on-accent)}
.v4 .bar nav{position:relative}.v4 .nav-m{position:absolute;left:0;bottom:-6px;height:2px;width:0;background:var(--accent);opacity:0}
.v4 .btn{background:var(--accent);color:var(--on-accent)}.v4 .btn:hover{background:var(--ink);color:var(--bg)}
.v4 mark{background:var(--accent);color:var(--on-accent);padding:0 .15em}
.v4 .foot{background:var(--bg);color:var(--muted)}
/* the fragments keep their panels, one tone up from the ground */
.v4 .ui{border-color:rgba(234,232,226,.12)}.v4 .ui-bar,.v4 .ui-log{border-color:rgba(234,232,226,.1)}.v4 .g li,.v4 .ui-set li{border-color:rgba(234,232,226,.08)}
.v4 .ui-btn:hover{background:var(--ink);color:var(--bg)}.v4 .g-new .gk span{background:var(--red);color:#fff}.v4 .ui-set i{background:#4a4943}
.v4 .d.a{background:var(--accent)}
.v4 .sc img{filter:grayscale(1) contrast(1.05)}
.v4 .ledger,.v4 .about,.v4 .v4a{background:var(--surface)}
.v4a{padding:140px var(--edge) 140px}
.v4a-h{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:24px 64px;align-items:end}.v4a h2{font-size:var(--s-head)}.v4a-h p{max-width:52ch}.v4a-l{margin-top:16px}
.v4s{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-flow:dense;gap:80px 48px;margin:72px 0 0;padding:0;list-style:none}
@media (min-width:1001px){.v4s .w{grid-column:span 2}.v4s .w p{max-width:62ch}}
.v4s h3{margin:0;font-family:var(--disp);font-weight:300;font-size:var(--s-lead);line-height:1.15;letter-spacing:-.01em;color:var(--accent)}
.v4s p{margin:14px 0 0;max-width:40ch}.v4s .own{margin-top:12px;font-size:var(--s-small);color:var(--muted)}
@media (max-width:1000px){.v4a{padding-top:120px;padding-bottom:120px}.v4a-h{grid-template-columns:1fr}.v4s{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.v4s{grid-template-columns:1fr}}
/* rings drawn by hand round a figure */
.ring{position:absolute;pointer-events:none;fill:none;stroke:var(--red);stroke-width:2;stroke-linecap:round;overflow:visible}.r-hero{stroke-width:4.6}
.v4 .stats dt{position:relative}.r-stat{right:-14px;top:50%;width:84px;height:46px;transform:translateY(-52%)}
/* hero: the dark room */
.v4h{position:relative;min-height:clamp(640px,calc(100svh - 58px),940px);overflow:hidden;padding:clamp(40px,7vh,88px) 0 56px}
.v4h-name{position:absolute;top:3%;right:var(--edge);margin:0;font-family:var(--disp);font-weight:600;white-space:nowrap;text-align:right;
 font-size:min(9vw,10rem);line-height:.92;letter-spacing:-.035em;color:rgba(14,14,12,.985);-webkit-text-stroke:2.5px rgba(234,232,226,.3);paint-order:stroke fill}
.v4h-name span{display:block}
.v4h-pic{position:absolute;z-index:1;right:var(--edge);bottom:0;height:84%;aspect-ratio:1440/1030;touch-action:pan-y}
.v4h-base,.v4h-lit{position:absolute;inset:0}
.v4h-img{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.v4h-base .v4h-img{filter:brightness(.3) saturate(.5)}
.v4h-lit{pointer-events:none}
.torch-on .v4h-lit{-webkit-mask-image:radial-gradient(circle var(--r,250px) at var(--x,66%) var(--y,34%),#000 0,#000 34%,rgba(0,0,0,.5) 64%,transparent 100%);
 mask-image:radial-gradient(circle var(--r,250px) at var(--x,66%) var(--y,34%),#000 0,#000 34%,rgba(0,0,0,.5) 64%,transparent 100%)}
.v4h-leads{position:absolute;inset:0;width:100%;height:100%;fill:var(--accent);stroke:var(--accent);stroke-width:1.4;vector-effect:non-scaling-stroke}
.v4h-leads path{vector-effect:non-scaling-stroke}.v4h-leads circle{stroke:none}
.v4h-notes{position:absolute;inset:0;margin:0;padding:0;list-style:none}
.v4h-notes li{position:absolute;pointer-events:auto;font-size:var(--s-small);line-height:1.3;color:var(--ink);max-width:21ch}
.v4h-notes b{font-weight:500;color:var(--accent)}
.v4h-notes .n1{left:76%;top:32%}.v4h-notes .n2{left:76%;top:43%}.v4h-notes .n3{left:76%;top:54%}.v4h-notes .n4{left:76%;top:65%}.v4h-notes .n5{left:76%;top:77%}
.v4h-notes b{position:relative;display:inline-block}.r-hero{left:-9%;top:-34%;width:118%;height:170%}
.v4h-c{position:relative;margin-left:var(--edge);width:min(600px,100% - 2 * var(--m));z-index:3}
@media (min-width:1680px){.v4h-c{width:720px}}
.v4h h1{font-size:var(--s-disp)}
.v4h h1 .ln{display:block;overflow:hidden;padding-bottom:.06em}.v4h h1 .ln>span{display:block;white-space:nowrap}
.v4-sub{margin-top:24px;max-width:min(46ch,560px);font-size:max(18px,var(--s-body))}
.v4-figs{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.3fr);gap:20px;margin:36px 0 0;max-width:600px}
.v4-figs dt{font-family:var(--disp);font-weight:300;font-size:var(--s-head);line-height:1;color:var(--accent);font-variant-numeric:tabular-nums}
.v4-figs dd{margin:8px 0 0;font-size:var(--s-small);line-height:1.35}.v4-figs .pf{color:var(--muted)}
.v4-cta{display:flex;align-items:center;gap:28px;margin-top:32px}.v4-cta a{font-size:max(19px,var(--s-body))}
.v4h-ml{display:none}
.v4h-hints{position:absolute;right:var(--edge);bottom:20px;z-index:3;text-align:right}
.v4h-hint{color:var(--muted);font-size:var(--s-small);display:none}
.torch-ready .v4h-hint.fine{display:block}
@media (pointer:coarse){.torch-ready .v4h-hint.fine{display:none}.torch-ready .v4h-hint.coarse{display:block}}
/* contact: the ivory field, the hand and the strings */
.v4c{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);grid-template-rows:auto auto;gap:24px 48px;padding:140px var(--edge) 120px;
 background:var(--field);color:var(--field-ink)}
.v4c :focus-visible{outline-color:#1b4fd8}
.v4c-t{grid-column:1;grid-row:1}
.v4c h2{font-size:var(--s-head);line-height:1.1;max-width:14ch}
.v4c-l{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:28px}.v4c-l a{overflow-wrap:anywhere}
.v4c-st{grid-column:2;grid-row:1/3;position:relative;aspect-ratio:1000/600}
.v4c-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.str{fill:none;stroke:#111;stroke-width:1.2;stroke-linecap:round;vector-effect:non-scaling-stroke}
.hand .sleeve{fill:#111;stroke:#111;stroke-width:2.4;stroke-linejoin:round}.hand .cuff{fill:none;stroke:var(--field);stroke-width:2;stroke-linecap:round}
.hand .skin{fill:#fbfaf7;stroke:#111;stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round}
.hand .ln{fill:none;stroke:#111;stroke-width:1.8;stroke-linecap:round}.hand .thin{stroke-width:1.2}
.v4c-bw{position:absolute;left:56%;top:35.6%;transform:translate(-8%,-50%);perspective:700px}
.v4c-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;
 padding:1.05em 2.3em;border-radius:999px;background:#0b0b0a;color:#f3f1ec;text-decoration:none;font-weight:500;font-size:var(--s-lead);letter-spacing:.005em;
 overflow:hidden;isolation:isolate;transform-style:preserve-3d;will-change:transform;white-space:nowrap}
.v4c-btn .t{position:relative;z-index:2}
.v4c-btn .gl{position:absolute;left:10%;right:10%;top:6%;height:30%;border-radius:999px;background:rgba(255,255,255,.09);filter:blur(5px);z-index:1}
.v4c-btn .sw{position:absolute;top:-20%;bottom:-20%;left:0;width:28%;background:rgba(255,255,255,.2);transform:translateX(-160%) skewX(-18deg);z-index:1}
.v4c-lk{grid-column:1;grid-row:2;align-self:end;width:180px}.lk{aspect-ratio:1;overflow:hidden;background:var(--red)}.lk .hero-char{aspect-ratio:1;width:100%;height:100%}
.v4c .like-n{margin-top:10px;color:var(--field-muted);font-size:var(--s-small);padding:0}
/* the dialog the button opens */
.v4d{border:0;padding:0;margin:auto;width:min(560px,calc(100vw - 2 * var(--m)));max-height:calc(100svh - 48px);background:#0b0b0a;color:#f3f1ec;border-radius:28px;overflow:hidden}
.v4d::backdrop{background:rgba(14,14,12,.6)}
.v4d-in{position:relative;padding:44px 44px 36px}
.v4d h2{font-size:var(--s-head);margin-bottom:24px}
.v4d-mail{font-size:var(--s-lead);line-height:1.25;overflow-wrap:anywhere;user-select:all}
.v4d-act{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin-top:32px}
.v4d-copy{font:inherit;font-weight:500;background:var(--accent);color:#0b0b0a;border:0;padding:.7em 1.25em;cursor:pointer;min-width:9em}.v4d-copy:hover{background:#f3f1ec}
.v4d-open{color:#f3f1ec;font-weight:500}.v4d-open:hover{color:var(--accent)}
.v4d-st{min-height:1.4em;margin-top:16px;color:#a19e95;font-size:var(--s-small)}
.v4d :focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.v4d-x{position:absolute;top:20px;right:20px;font:inherit;font-size:var(--s-small);font-weight:500;color:#0b0b0a;background:#f3f1ec;border:0;border-radius:999px;padding:.55em 1.1em;cursor:pointer}
.v4d-x:hover{background:var(--accent)}
html.v4-lock{overflow:hidden}
@media (max-width:1000px){
 .v4h{min-height:0;overflow:visible;padding:16px 0 56px}
 .v4h-name{position:relative;top:auto;left:auto;right:auto;margin:0 var(--m);text-align:left;font-size:calc((100vw - 2 * var(--m)) / 6.05)}.v4h-name span{display:inline}
 .v4h-pic{position:relative;right:auto;bottom:auto;height:auto;width:100%;margin-top:-4vw}
 .v4h-c{margin:32px var(--m) 0;width:auto}
 .v4h-hints{display:none}
 .v4h-notes,.v4h-leads,.r-hero{display:none}
 .v4h-ml{display:grid;grid-template-columns:1fr 1fr;gap:12px 20px;margin:20px var(--m) 0;padding:0;list-style:none;font-size:var(--s-small);line-height:1.35}
 .v4h-ml li{padding-left:14px;position:relative}.v4h-ml .em{font-weight:bolder}.v4h-ml li::before{content:"";position:absolute;left:0;top:.45em;width:6px;height:6px;background:var(--accent)}
 .v4c{grid-template-columns:1fr;padding-top:120px}.v4c-st{grid-column:1;grid-row:2}.v4c-lk{grid-row:3;width:150px}
}
@media (max-width:600px){
 .v4-cta{flex-wrap:wrap;gap:16px}.v4-cta .btn{width:100%;text-align:center}
 .v4c-btn{font-size:var(--s-body);padding:.95em 1.7em}.v4c-bw{left:46%}
 .v4d-in{padding:64px 24px 28px}
}