@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&family=DM+Sans:wght@400;500;600&family=Libre+Caslon+Display&display=swap');
:root{--paper:#f7f5ee;--ink:#312b22;--muted:#827d70;--brown:#7e4f1f;--line:#ddd8ca}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:14px 'DM Sans',Arial,sans-serif}a{color:inherit;text-decoration:none}button{font:inherit}header{height:93px;margin:0 5%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{font-size:23px;letter-spacing:-1px;font-weight:600}.brand i{display:inline-block;width:14px;height:20px;background:var(--brown);border-radius:80% 30% 70% 30%;transform:rotate(25deg);margin-right:10px}nav{display:flex;gap:28px;font-size:12px}nav a:hover,nav a.active{color:var(--brown);text-decoration:underline;text-underline-offset:6px}.edition{font-size:10px;letter-spacing:2px;color:var(--muted)}.hero{text-align:center;padding:37px 20px 0}.eyebrow{font-size:10px;letter-spacing:2.6px;text-transform:uppercase;color:var(--muted)}h1{font:64px/.98 'Libre Caslon Display',Georgia,serif;font-weight:400;margin:16px 0 14px;letter-spacing:-1.7px}.intro{color:var(--muted);font-size:13px;line-height:1.8}.stage{position:relative;width:min(100%,1000px);height:430px;margin:0 auto;isolation:isolate}.stage:before{content:'';position:absolute;width:400px;height:400px;border:1px solid #dfd9ca;border-radius:50%;left:50%;top:4px;transform:translateX(-50%);z-index:-1}.stage:after{content:'';position:absolute;width:280px;height:27px;border-radius:50%;background:#6b4d2c1c;filter:blur(12px);left:50%;bottom:7px;transform:translateX(-50%);z-index:-1}canvas{width:100%;height:100%;display:block;touch-action:none;cursor:grab}canvas:active{cursor:grabbing}.fallback{position:absolute;width:310px;height:310px;object-fit:contain;left:50%;top:45px;transform:translateX(-50%);mix-blend-mode:multiply}.pin{position:absolute;top:0;left:0;border:1px solid #d9ceb9;background:#fcfbf6eb;box-shadow:0 4px 18px #39281412;padding:10px 14px;border-radius:24px;color:#49331d;font-size:11px;white-space:nowrap;transform:translate(-50%,-50%);transition:opacity .15s,background .15s;cursor:pointer}.pin span{font-size:9px;color:#a39479;margin-right:8px}.pin:hover,.pin:focus-visible{background:#7e4f1f;color:#fff}.pin:hover span{color:#dac9ab}.controls{display:flex;justify-content:center;gap:18px;align-items:center;font-size:10px;color:var(--muted);letter-spacing:.5px}.controls button{border:0;background:none;color:var(--brown);cursor:pointer;padding:7px}.controls .sep{width:1px;height:12px;background:var(--line)}.paths{max-width:1050px;margin:26px auto 0;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}.path{padding:20px 24px 22px;position:relative}.path+.path{border-left:1px solid var(--line)}.path small{font-size:9px;color:var(--muted);letter-spacing:1px}.path h2{font:25px 'Libre Caslon Display',Georgia,serif;margin:8px 0}.path p{font-size:11px;color:var(--muted);line-height:1.5;margin:0}.path b{position:absolute;right:23px;top:42px;font-size:18px;font-weight:400}.path:hover{background:#eee9dd}.footer{margin:30px 5% 0;border-top:1px solid var(--line);padding:20px 0;display:flex;justify-content:space-between;font-size:10px;color:var(--muted)}a:focus-visible,button:focus-visible,canvas:focus-visible{outline:2px solid #7e4f1f;outline-offset:5px}.sub{max-width:1000px;margin:65px auto;padding:0 30px}.back{font-size:12px;color:var(--muted)}.sub h1{margin:32px 0 22px;font-size:80px}.lead{max-width:560px;font-size:17px;line-height:1.7;color:#716a5b}.entries{margin:55px 0}.entry{display:grid;grid-template-columns:140px 1fr;border-top:1px solid var(--line);padding:28px 0;gap:25px}.entry small{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);padding-top:7px}.entry h2{font:32px 'Libre Caslon Display',Georgia,serif;margin:0 0 12px}.entry p{max-width:600px;color:#716a5b;line-height:1.8;font-size:14px}.tags{display:flex;gap:8px;flex-wrap:wrap}.tags span{border:1px solid var(--line);border-radius:20px;padding:6px 10px;font-size:10px;color:#796b54}@media(max-width:650px){header{height:75px}nav{gap:13px;font-size:10px}.edition{display:none}h1{font-size:49px}.hero{padding-top:30px}.stage{height:380px}.stage:before{width:320px;height:320px;top:26px}.pin{font-size:9px;padding:9px}.paths{margin:25px 20px 0;display:block}.path{padding:18px 5px}.path+.path{border-left:0;border-top:1px solid var(--line)}.path b{right:5px}.sub{margin-top:35px}.sub h1{font-size:56px}.entry{grid-template-columns:1fr;gap:8px}.footer{font-size:9px}.intro{max-width:290px;margin:0 auto}}

/* Quiet surface markers; titles are revealed only on intent. */
.pin{width:38px;height:38px;padding:0;border:0;background:transparent;box-shadow:none;border-radius:50%;display:grid;place-items:center;z-index:2}
.pin:hover,.pin:focus-visible{background:transparent;color:var(--ink)}
.pin .marker{margin:0;width:11px;height:11px;border:1px solid #f4ecd5;background:#dee5b377;border-radius:50%;box-shadow:0 0 0 5px #e1e7b316,0 1px 5px #26321544;transition:transform .2s,background .2s}
.pin .pin-label{position:absolute;left:50%;top:calc(100% + 5px);transform:translate(-50%,-3px);margin:0;color:#34401e;background:#fcfbf3f5;border:1px solid #ccd0b7;border-radius:18px;padding:9px 13px;font-size:11px;box-shadow:0 5px 15px #28301512;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .18s,transform .18s,visibility .18s}
.pin.is-active,.pin:hover,.pin:focus-visible{z-index:5}
.pin.is-active .marker,.pin:hover .marker,.pin:focus-visible .marker{transform:scale(1.3);background:#ecf3c4}
.pin.is-active .pin-label,.pin:hover .pin-label,.pin:focus-visible .pin-label{opacity:1;visibility:visible;transform:translate(-50%,0);pointer-events:auto}
.controls{flex-wrap:wrap;gap:12px}.intro{max-width:430px;margin-left:auto;margin-right:auto}
@media(max-width:650px){.pin .pin-label{font-size:10px;padding:8px 10px}.controls{font-size:8px}.intro{max-width:300px}}
@media(prefers-reduced-motion:reduce){.pin .marker,.pin .pin-label{transition:none}}

/* Surface-attached leaders place each callout clear of the sphere. */
.pin .pin-label{left:calc(50% + var(--label-x,0px));top:calc(50% + var(--label-y,60px));transform:translate(-50%,-50%);background:#fbfbf1;color:#493722;border-color:#d1d4ba;max-width:210px;text-align:center;box-shadow:0 3px 15px #46351d0b}
.pin.is-active .pin-label,.pin:hover .pin-label,.pin:focus-visible .pin-label{transform:translate(-50%,-50%)}
.pin .connector{position:absolute;margin:0;left:50%;top:50%;height:1px;width:var(--line-length,0px);background:#806b49;transform-origin:0 50%;transform:rotate(var(--line-angle,0rad));opacity:0;pointer-events:none;transition:opacity .18s}
.pin.is-active .connector,.pin:hover .connector,.pin:focus-visible .connector{opacity:.75}
.pin .marker{background:#f3f1d8;border:1px solid #624a2e;box-shadow:0 0 0 4px #eff0d73d,0 1px 4px #30251930;width:9px;height:9px}
.pin.is-active .marker,.pin:hover .marker,.pin:focus-visible .marker{background:#d6e2b1}
@media(max-width:650px){.stage{height:470px}.stage:before{width:280px;height:310px;top:80px}.stage:after{bottom:78px}.pin .pin-label{max-width:200px}}

#enter{position:fixed;z-index:102;bottom:42px;left:50%;transform:translateX(-50%);border:1px solid #e8ecd570;border-radius:30px;background:#3c281ed9;color:#e8ecd5;padding:13px 24px;letter-spacing:1px;font-size:12px;cursor:pointer;backdrop-filter:blur(8px)}#enter span{margin-left:20px}#enter[hidden]{display:none}
body.intro-mode{overflow:hidden;background:#eeeede}
.intro-mode #sphere{position:fixed;z-index:100;cursor:pointer;max-width:none;max-height:none}
.intro-mode header,.intro-mode .hero,.intro-mode .controls,.intro-mode .paths,.intro-mode .footer{opacity:0;visibility:hidden}
.intro-mode .pin,.intro-mode .fallback{visibility:hidden}
.intro-mode .stage:before,.intro-mode .stage:after{opacity:0}
.intro-mode.unfolding{background:var(--paper)}
header,.hero,.controls,.paths,.footer{transition:opacity .7s}
.unfolding header,.unfolding .hero,.unfolding .controls,.unfolding .paths,.unfolding .footer{opacity:1;visibility:visible}
@media(prefers-reduced-motion:reduce){header,.hero,.controls,.paths,.footer{transition:none}}

/* Visible node diameter increased by 150%: 18px to 45px. */
.pin .marker{width:45px;height:45px}.pin{width:60px;height:60px}

/* Dark forest-green nodes with a pale sage highlight and soft halo. */
.pin .marker{background:radial-gradient(circle at 30% 25%,#96ba82 0%,#497650 24%,#234d36 58%,#163a28 100%);border:1px solid #afc79c;box-shadow:inset 0 1px 2px #e1efd66b,0 0 0 4px #b8d49b30,0 0 13px 3px #9cbe7960,0 2px 5px #17312066;transition:transform .2s,box-shadow .2s}
.pin.is-active .marker,.pin:hover .marker,.pin:focus-visible .marker{background:radial-gradient(circle at 30% 25%,#c0d9a7 0%,#5a8b5e 25%,#2b5940 58%,#1b422e 100%);box-shadow:inset 0 1px 3px #edf7dc88,0 0 0 5px #b8d49b40,0 0 20px 5px #a6c78588,0 2px 5px #17312066}

/* The WebGL surface supplies the visible domes; anchors retain accessible interaction. */
.surface-nodes .pin .marker{opacity:0;pointer-events:none}

/* A readable calligraphic welcome over the roots, removed with the opening. */
#opening-story{display:none;position:fixed;inset:0;z-index:101;pointer-events:none;align-items:center;justify-content:center;padding:30px 24px 110px;background:radial-gradient(ellipse at center,#f4f3e8f5 0%,#f4f3e8e8 34%,#f4f3e8a8 64%,#f4f3e840 100%);opacity:1;transition:opacity .9s ease,visibility .9s}
.intro-mode #opening-story{display:flex}
.story-copy{max-width:850px;text-align:center;color:#234d36;font:clamp(30px,4.2vw,57px)/1.28 'Caveat','Segoe Script','Brush Script MT',cursive;text-wrap:pretty;text-shadow:0 1px 7px #fffdf1}
.story-copy p{margin:0 0 .6em}.story-copy p:last-child{margin-bottom:0;color:#234d36}
.intro-mode.unfolding #opening-story{opacity:0;visibility:hidden}
body:not(.intro-mode) #enter{display:none}
@media(max-width:600px){#opening-story{padding:24px 23px 110px}.story-copy{font-size:clamp(29px,8vw,40px);line-height:1.25}}
@media(max-height:500px){#opening-story{padding:12px 32px 75px}.story-copy{max-width:900px;font-size:clamp(23px,4.5vh,32px);line-height:1.15}.story-copy p{margin-bottom:.35em}#enter{bottom:18px}}
@media(prefers-reduced-motion:reduce){#opening-story{transition:none}}

/* Stronger calligraphy and consistently dark labels in every interaction state. */
.story-copy{font-weight:510;-webkit-text-stroke:.2975px currentColor}
.pin .pin-label,.pin:hover .pin-label,.pin:focus-visible .pin-label,.pin.is-active .pin-label{color:#14291d;background:#fffef7;font-weight:600;border-color:#a6b09e}

/* Minimal homepage: heading, instruction and interactive sphere. */
body:has(#sphere) main{min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:24px 0}
body:has(#sphere) .hero{padding:12px 24px 6px}
body:has(#sphere) h1{font-size:clamp(38px,5vw,64px);margin:12px 0 18px}
body:has(#sphere) .stage{height:clamp(430px,60vh,620px)}
body:has(#sphere) .stage:before{top:50%;transform:translate(-50%,-50%)}
@media(max-width:650px){body:has(#sphere) main{padding:24px 0}body:has(#sphere) .stage{height:470px}body:has(#sphere) h1{max-width:340px;margin:12px auto 18px}}

/* Fallback artwork is only shown after an actual rendering failure. */
#fallback[hidden]{display:none!important}