:root{color-scheme:dark}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#000;color:#fff}body{font-family:Georgia,"Times New Roman",serif;-webkit-font-smoothing:antialiased}button,a{color:inherit;font:inherit}button{border:0;background:none;cursor:pointer}a{text-decoration:none}button:focus-visible,a:focus-visible{outline:1px solid white;outline-offset:5px}[hidden]{display:none!important}.scene{width:100%;min-height:100svh;position:relative;overflow:hidden;background:#000}.route{min-height:100svh}.middle{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;width:min(80vw,420px);z-index:2;pointer-events:none}.middle h1{font-size:clamp(24px,3.4vw,43px);font-weight:400;letter-spacing:.06em;margin:10px 0 0;text-transform:lowercase}.middle p{font-size:clamp(12px,1.3vw,16px);font-style:italic;color:#c7c7c7;margin:12px 0 0}.mark{font-size:18px;white-space:nowrap}.stars{position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(circle at 8% 18%,#fff 0 .65px,transparent 1px),radial-gradient(circle at 22% 72%,#fff 0 .8px,transparent 1px),radial-gradient(circle at 67% 23%,#fff 0 .65px,transparent 1px),radial-gradient(circle at 85% 64%,#fff 0 .7px,transparent 1px),radial-gradient(circle at 40% 88%,#fff 0 .6px,transparent 1px),radial-gradient(circle at 88% 37%,#fff 0 .7px,transparent 1px);opacity:.48}.trails{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 40% 21% at 50% 50%,transparent 97%,rgba(255,255,255,.05) 98%,transparent 99%);transform:rotate(-31deg)}.ring{position:absolute;left:50%;top:50%;border-radius:50%;pointer-events:none;transform-origin:center}.ring-one{width:min(65vw,520px);height:min(65vw,520px);margin-left:calc(min(65vw,520px)/-2);margin-top:calc(min(65vw,520px)/-2);animation:spin 35s linear infinite}.ring-two{width:min(87vw,720px);height:min(87vw,720px);margin-left:calc(min(87vw,720px)/-2);margin-top:calc(min(87vw,720px)/-2);animation:reverseSpin 52s linear infinite}.ring-three{width:min(110vw,950px);height:min(110vw,950px);margin-left:calc(min(110vw,950px)/-2);margin-top:calc(min(110vw,950px)/-2);animation:spin 68s linear infinite}.charm{position:absolute;top:0;left:50%;transform:translateX(-50%);pointer-events:auto;display:flex;flex-direction:column;align-items:center;gap:6px;white-space:nowrap;opacity:.78;transition:opacity .3s;animation:counterSpin 35s linear infinite}.ring-two .charm{animation:counterReverse 52s linear infinite}.ring-three .charm{animation:counterSpin 68s linear infinite}.charm:hover,.charm:focus-visible{opacity:1}.glyph,.mystery span,.secret span{font:clamp(17px,1.5vw,24px)/1.5 Georgia,serif;color:white;text-shadow:0 0 7px #ffffff44;white-space:nowrap}.label,.mystery small,.secret small{font:12px Georgia,serif;letter-spacing:.08em;color:#e3e3e3;text-transform:lowercase}.mystery{position:absolute;left:12%;top:78%;z-index:4;touch-action:none;user-select:none}.mystery button,.secret{display:flex;flex-direction:column;align-items:center;gap:4px;opacity:.75}.mystery button:hover,.secret:hover{opacity:1}.secret{position:absolute;left:12%;top:78%;z-index:3;transform:translate(-50%,-50%)}.page{display:grid;place-items:center;padding:60px 20px}.page-body{width:min(90vw,540px);text-align:center}.page h2{font-size:clamp(28px,4vw,48px);font-weight:400;margin:15px 0 28px}.page p{font-size:clamp(15px,1.6vw,19px);line-height:1.8;color:#ddd}.page a{display:inline-block;margin:20px 10px 0;border-bottom:1px solid #666;padding-bottom:3px}.page article{padding:16px 0;border-top:1px solid #333}.page h3{font-weight:400;margin:5px 0}.page article p{margin:5px 0}@keyframes spin{to{transform:rotate(360deg)}}@keyframes reverseSpin{from{transform:rotate(360deg)}to{transform:rotate(0)}}@keyframes counterSpin{to{transform:translateX(-50%) rotate(-360deg)}}@keyframes counterReverse{from{transform:translateX(-50%) rotate(-360deg)}to{transform:translateX(-50%) rotate(0)}}@media(max-width:700px){.ring-one{width:58vw;height:58vw;margin-left:-29vw;margin-top:-29vw}.ring-two{width:82vw;height:82vw;margin-left:-41vw;margin-top:-41vw}.ring-three{width:110vw;height:110vw;margin-left:-55vw;margin-top:-55vw}.mystery{left:9%;top:84%}.secret{left:9%;top:84%}}@media(prefers-reduced-motion:reduce){.ring,.charm{animation:none!important}}
/* About: a spare editorial layout, distinct from the galaxy. */
.about-page{background:#000;color:#fff;padding:clamp(28px,5vw,72px) 28px 52px}
.about-wrap{max-width:1060px;margin:0 auto}
.about-head{display:grid;grid-template-columns:1fr auto 1fr;align-items:start;margin-bottom:46px}
.about-back{justify-self:start;font-size:22px;line-height:1;padding:7px 0;color:#ddd}
.about-heading{text-align:center}
.about-heading .mark{font-size:17px}
.about-heading h2{font-size:clamp(29px,3vw,40px);font-weight:400;letter-spacing:.025em;margin:8px 0 0}
.about-intro{max-width:970px;margin:0 auto 76px}
.about-intro p{font-size:clamp(17px,1.65vw,21px);line-height:1.62;letter-spacing:.005em;margin:0 0 21px;text-align:left;color:#f0f0f0}
.about-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:58px 90px;max-width:970px;margin:0 auto}
.about-column h3{font-weight:400;font-size:clamp(20px,2vw,26px);margin:0 0 20px;text-align:center}
.about-column ul{list-style:none;padding:0;margin:0}
.about-column li{font-size:clamp(15px,1.4vw,18px);line-height:1.65;color:#cecece}
.about-column a{display:inline-flex;gap:9px;align-items:baseline;border-bottom:1px solid #555;transition:border-color .2s,color .2s}
.about-column a:hover{color:#fff;border-bottom-color:#fff}
.about-column a span{font-size:.75em;opacity:.75}
.about-footer{text-align:center;margin:95px 0 0;font-size:15px;color:#aaa}
.about-footer a:hover{color:#fff}
@media(max-width:640px){
.about-page{padding:30px 23px 45px}
.about-head{margin-bottom:44px}
.about-intro{margin-bottom:56px}
.about-intro p{font-size:17px;line-height:1.65}
.about-columns{grid-template-columns:1fr;gap:42px}
.about-column h3{text-align:left;margin-bottom:13px}
.about-footer{margin-top:70px}
}

/* Compact, CV-like About page */
.about-cv{background:#000;padding:30px clamp(20px,5vw,60px) 46px;display:block}
.about-cv[hidden]{display:none!important}
.cv-wrap{width:min(100%,890px);margin:0 auto}
.cv-header{display:grid;grid-template-columns:1fr auto 1fr;align-items:start;margin:0 0 28px}
.cv-back{justify-self:start;font-size:20px;line-height:1.5;color:#ddd}
.cv-title{text-align:center}.cv-title .mark{display:block;font-size:15px}
.cv-title h2{font-size:27px;font-weight:400;line-height:1.2;margin:5px 0 0;letter-spacing:.02em}
.cv-intro{max-width:850px;margin:0 auto 47px}
.cv-intro p{margin:0 0 14px;text-align:left;font-size:16px;line-height:1.62;color:#eee}
.about-cv a:not(.cv-back){text-decoration:underline;text-decoration-color:#6b6b6b;text-underline-offset:3px}
.about-cv a:hover{text-decoration-color:white}
.cv-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 58px}
.cv-group h3{font-size:21px;font-weight:400;margin:0 0 14px;text-align:center;letter-spacing:.01em}
.cv-group ul{list-style:none;margin:0;padding:0}
.cv-group li{font-size:14px;color:#d0d0d0;line-height:1.65;margin:0 0 5px}
.cv-footer{text-align:center;margin:57px 0 0;font-size:14px}
@media(max-width:600px){.about-cv{padding:22px 20px 36px}.cv-header{margin-bottom:27px}.cv-intro p{font-size:15px}.cv-grid{grid-template-columns:1fr;gap:30px}.cv-group h3{text-align:left;margin-bottom:10px}.cv-footer{margin-top:40px}}

/* Personal performance photograph beneath the About CV */
.cv-photo{width:min(100%,820px);aspect-ratio:3/1;margin:58px auto 0;padding:0;overflow:hidden;text-align:center}
.cv-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 55%}
@media(max-width:600px){.cv-photo{margin-top:42px}}

/* Keep the three orbiting charms gathered close to the centered name. */
.ring-one{width:min(48vw,390px);height:min(48vw,390px);margin-left:calc(min(48vw,390px)/-2);margin-top:calc(min(48vw,390px)/-2)}
.ring-two{width:min(62vw,510px);height:min(62vw,510px);margin-left:calc(min(62vw,510px)/-2);margin-top:calc(min(62vw,510px)/-2)}
.ring-three{width:min(76vw,640px);height:min(76vw,640px);margin-left:calc(min(76vw,640px)/-2);margin-top:calc(min(76vw,640px)/-2)}
.mystery{left:26%;top:76%}.secret{left:26%;top:76%}
@media(max-width:700px){
.ring-one{width:67vw;height:67vw;margin-left:-33.5vw;margin-top:-33.5vw}
.ring-two{width:90vw;height:90vw;margin-left:-45vw;margin-top:-45vw}
.ring-three{width:116vw;height:116vw;margin-left:-58vw;margin-top:-58vw}
.mystery{left:14%;top:81%}.secret{left:14%;top:81%}
}

/* Contact: tighter viewport-aware orbit and a lower starting phase. */
.ring-three{
  width:min(72vw,62svh,480px);
  height:min(72vw,62svh,480px);
  margin-left:calc(min(72vw,62svh,480px)/-2);
  margin-top:calc(min(72vw,62svh,480px)/-2);
  animation:contactOrbit 68s linear infinite;
}
.ring-three .charm{animation:contactUpright 68s linear infinite}
@keyframes contactOrbit{
  from{transform:rotate(125deg)}
  to{transform:rotate(485deg)}
}
@keyframes contactUpright{
  from{transform:translateX(-50%) rotate(-125deg)}
  to{transform:translateX(-50%) rotate(-485deg)}
}
@media(max-width:700px){
  .ring-three{
    width:min(88vw,62svh,450px);
    height:min(88vw,62svh,450px);
    margin-left:calc(min(88vw,62svh,450px)/-2);
    margin-top:calc(min(88vw,62svh,450px)/-2)
  }
}
@media(prefers-reduced-motion:reduce){
  .ring-three{transform:rotate(125deg)}
  .ring-three .charm{transform:translateX(-50%) rotate(-125deg)}
}

/* A quiet statement of practice beneath the poetic tagline. */
.middle .identity{font-size:clamp(11px,1.05vw,14px);font-style:normal;letter-spacing:.05em;color:#f0f0f0;margin-top:17px}
.middle .worlds{font-size:clamp(10px,.95vw,12px);font-style:italic;letter-spacing:.02em;color:#999;margin-top:6px}

/* The early mystery/secret prototype has been retired. */
.mystery,.secret{display:none!important}

/* p5.js owns the motion. HTML remains responsible for text and navigation. */
.scene .galaxy-canvas{position:absolute!important;inset:0;display:block;z-index:0;pointer-events:none}
.scene.p5-ready .stars,.scene.p5-ready .trails{display:none}
.scene.p5-ready .ring,
.scene.p5-ready .ring-one,
.scene.p5-ready .ring-two,
.scene.p5-ready .ring-three{
  position:static;width:0;height:0;margin:0;padding:0;
  transform:none;animation:none;border:0
}
.scene.p5-ready .charm,
.scene.p5-ready .ring-two .charm,
.scene.p5-ready .ring-three .charm{
  position:absolute;z-index:3;left:50%;top:50%;
  transform:translate(-50%,-50%);
  animation:none;pointer-events:auto;
  transition:opacity .25s ease;
}
.scene.p5-ready .charm .glyph{font-size:clamp(17px,1.5vw,24px)}
@media(max-width:700px){
 .scene.p5-ready .charm .glyph{font-size:17px}
 .scene.p5-ready .middle{width:min(85vw,420px)}
}

/* Selected work: square, image-led gallery */
.work-gallery{display:block;background:#000;color:#f5f5f5;padding:32px clamp(22px,5vw,68px) 75px}
.work-wrap{max-width:1160px;margin:auto}
.work-head{display:grid;grid-template-columns:1fr auto 1fr;align-items:start;text-align:center;margin:4px 0 58px}
.work-head .mark{display:block;font-size:17px}
.work-head h2{font-size:clamp(29px,3vw,42px);font-weight:400;letter-spacing:.035em;margin:8px 0}
.work-head p{font-size:15px;line-height:1.6;color:#b8b8b8;margin:12px 0 0}
.work-back{justify-self:start;font-size:22px;line-height:1.5}
.project-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px 22px}
.project-card{display:block;min-width:0}
.project-square{position:relative;aspect-ratio:1/1;background:#080808;overflow:hidden;border:1px solid #242424}
.project-square img{width:100%;height:100%;display:block;object-fit:cover;transition:transform .45s ease,opacity .45s ease;opacity:.9}
.project-overlay{position:absolute;inset:0;background:rgba(0,0,0,.5);color:white;display:grid;place-items:center;font-size:13px;letter-spacing:.05em;opacity:0;transition:opacity .25s ease}
.project-card:hover img,.project-card:focus-visible img{transform:scale(1.045);opacity:1}
.project-card:hover .project-overlay,.project-card:focus-visible .project-overlay{opacity:1}
.project-meta{padding:13px 1px 0;display:flex;flex-direction:column;gap:6px}
.project-meta h3{font-size:17px;line-height:1.4;margin:0;font-weight:400}
.project-meta span{font-size:12px;line-height:1.4;color:#aaa}
.work-note{font-size:12px;color:#777;margin:50px 0 0;text-align:center;line-height:1.5}
.work-home{display:block;text-align:center;margin:40px auto 0;font-size:15px;text-decoration:underline;text-underline-offset:5px}
.project-detail{background:#000;padding:35px 24px 100px}
.detail-wrap{max-width:900px;margin:0 auto}
.detail-back{display:inline-block;margin:0 0 30px;font-size:15px;color:#ccc;text-decoration:underline;text-underline-offset:4px}
.detail-cover{width:min(100%,490px);margin:0 auto 38px}
.detail-cover img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover}
.detail-copy{text-align:center;max-width:650px;margin:auto}
.detail-kind{color:#aaa;font-size:13px;letter-spacing:.06em}
.detail-copy h2{font-size:clamp(26px,3.3vw,43px);font-weight:400;line-height:1.2;margin:15px 0 18px}
.detail-copy p{font-size:17px;line-height:1.7;color:#d6d6d6}
.detail-copy .detail-note{font-size:12px;color:#888;margin-top:32px}
@media(max-width:780px){.project-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 16px}.work-head{margin-bottom:38px}}
@media(max-width:480px){.work-gallery{padding:25px 17px 55px}.project-grid{gap:24px 12px}.project-meta h3{font-size:14px}.project-meta span{font-size:11px}.work-head p{max-width:250px;margin:10px auto 0}.project-square{border-color:#242424}}
@media(prefers-reduced-motion:reduce){.project-square img,.project-overlay{transition:none}}

/* Two-project edition: balanced two-column square gallery. */
.project-grid{grid-template-columns:repeat(2,minmax(0,1fr));max-width:860px;margin:0 auto}
@media(max-width:480px){.project-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* In Countless Shadows: editorial project essay; one quiet ornamental mark. */
.shadows-detail .detail-wrap{max-width:900px}
.shadows-essay{max-width:760px;margin:0 auto}
.shadows-heading{text-align:center;margin:18px auto 37px}
.shadows-heading .shadows-glyph{font:20px Georgia,serif;color:#eee;display:block;margin:0 0 15px}
.shadows-heading h2{font-size:clamp(31px,4.5vw,52px);font-weight:400;letter-spacing:.015em;line-height:1.2;margin:0 0 17px}
.shadows-heading .shadows-deck{font-size:clamp(16px,1.8vw,20px);line-height:1.5;font-style:italic;color:#cfcfcf;max-width:620px;margin:0 auto}
.shadows-detail .detail-cover{width:min(100%,460px);margin:0 auto 43px}
.shadows-prose{max-width:660px;margin:0 auto;text-align:left}
.shadows-prose p{font-size:clamp(16px,1.55vw,18px);line-height:1.82;color:#ddd;margin:0 0 23px}
.shadows-prose .shadows-question{font-size:clamp(20px,2.1vw,26px);color:#fff;line-height:1.4;margin:0 0 27px}
.shadows-facts{max-width:660px;margin:35px auto 0;padding:23px 0 0;border-top:1px solid #303030}
.shadows-facts div{display:grid;grid-template-columns:90px minmax(0,1fr);gap:16px;margin-bottom:12px}
.shadows-facts dt{font-size:14px;color:#999}
.shadows-facts dd{font-size:14px;color:#f0f0f0;margin:0;overflow-wrap:anywhere}
.shadows-facts a{text-decoration:underline;text-underline-offset:4px;text-decoration-color:#666}
.shadows-facts a:hover{text-decoration-color:#fff}
@media(max-width:600px){.shadows-heading{margin-top:8px}.shadows-prose p{line-height:1.75}.shadows-facts div{grid-template-columns:75px minmax(0,1fr)}}

/* Scroll to discover: the quiet galaxy opens onto a full-width work gallery. */
.scroll-discover{position:absolute;z-index:4;bottom:clamp(20px,4svh,45px);left:50%;transform:translateX(-50%);display:flex;align-items:center;flex-direction:column;gap:9px;padding:9px 17px;color:#bcbcbc;font:12px Georgia,serif;letter-spacing:.09em;opacity:.8;transition:opacity .2s}
.scroll-discover span:last-child{font-size:23px;font-weight:400;line-height:1}
.scroll-discover:hover,.scroll-discover:focus-visible{opacity:1;color:white}
.home-gallery{background:#000;color:#f5f5f5;padding:clamp(58px,9vw,115px) clamp(20px,6vw,78px) 85px;min-height:90svh;border-top:1px solid #121212}
.home-gallery-wrap{max-width:1100px;margin:0 auto}
.home-gallery-head{text-align:center;margin:0 auto 55px}
.home-gallery-head .mark{display:block;font-size:17px;margin-bottom:15px}
.home-gallery-head h2{font-size:clamp(30px,3.7vw,47px);font-weight:400;letter-spacing:.03em;margin:0 0 13px}
.home-gallery-head p{font:italic 16px/1.5 Georgia,serif;color:#bbb;margin:0}
.home-project-grid{max-width:990px;gap:clamp(18px,4vw,48px)}
.home-project-grid .project-meta{padding-top:18px;gap:7px}
.home-project-grid .project-meta h3{font-size:clamp(18px,2vw,24px)}
.home-project-grid .project-meta span{font-size:13px}
.home-project-grid .project-meta p{font-size:14px;line-height:1.6;color:#bcbcbc;margin:3px 0 0}
.gallery-top-link{display:block;width:fit-content;margin:72px auto 0;font-size:13px;color:#aaa;text-decoration:underline;text-decoration-color:#555;text-underline-offset:5px}
.gallery-top-link:hover{color:#fff}
@media(max-width:600px){
 .home-gallery{padding:56px 21px 66px}
 .home-project-grid{grid-template-columns:1fr;max-width:430px;gap:44px}
 .home-gallery-head{margin-bottom:36px}
 .home-gallery-head p{font-size:14px}
 .scroll-discover{bottom:17px;font-size:11px}
 .home-project-grid .project-meta h3{font-size:20px}
}

/* Fourth p5.js orbit: no CSS spin or fixed orbit shape once the sketch loads. */
.scene.p5-ready .ring-four{position:static;width:0;height:0;margin:0;padding:0;transform:none;animation:none}
.scene.p5-ready .ring-four .charm{position:absolute;z-index:3;left:22%;top:68%;transform:translate(-50%,-50%);animation:none;pointer-events:auto;transition:opacity .25s ease}
.ring-four{position:absolute;left:50%;top:50%;width:min(68vw,480px);height:min(68vw,480px);margin-left:calc(min(68vw,480px)/-2);margin-top:calc(min(68vw,480px)/-2);pointer-events:none;animation:reverseSpin 61s linear infinite}
.ring-four .charm{animation:counterReverse 61s linear infinite}
@media(prefers-reduced-motion:reduce){.ring-four,.ring-four .charm{animation:none!important}}
/* Writings is an index of essays, not a second gallery of invented covers. */
.writings-section{max-width:990px;margin:clamp(85px,12vw,150px) auto 0;padding:clamp(72px,8vw,110px) 0 0;border-top:1px solid #292929;scroll-margin-top:22px}
.writings-heading{text-align:center;margin-bottom:40px}
.writings-heading .mark{display:block;font-size:18px;margin-bottom:12px}
.writings-heading h2{font-size:clamp(30px,3.7vw,47px);font-weight:400;letter-spacing:.03em;margin:0 0 12px}
.writings-heading p{font:italic 16px/1.5 Georgia,serif;color:#bbb;margin:0}
.writings-list{max-width:730px;margin:0 auto}
.writing-soon{border-top:1px solid #333;border-bottom:1px solid #333;min-height:185px;display:flex;flex-direction:column;gap:12px;align-items:center;justify-content:center;color:#bcbcbc}
.writing-soon-mark{font-size:24px;color:#ddd}
.writing-soon p{font:italic 16px Georgia,serif;letter-spacing:.02em;margin:0}
.writing-entry{display:block;padding:28px 4px 32px;border-top:1px solid #333}
.writing-entry:last-child{border-bottom:1px solid #333}
.writing-entry time{font-size:12px;color:#999;letter-spacing:.04em}
.writing-entry h3{font-size:clamp(21px,2.2vw,29px);font-weight:400;margin:9px 0}
.writing-entry p{font-size:15px;line-height:1.65;color:#bdbdbd;margin:0}
.writing-entry:hover h3,.writing-entry:focus-visible h3{text-decoration:underline;text-underline-offset:5px}
@media(max-width:600px){.writings-section{margin-top:85px;padding-top:63px}.writings-heading{margin-bottom:28px}.writings-heading p{font-size:14px}.writing-soon{min-height:150px}}
/* Optional standalone essay layout shares the site's dark editorial typography. */
.essay-page{background:#000;color:#ededed;min-height:100svh;padding:32px 22px 110px}
.essay-wrap{max-width:740px;margin:0 auto}
.essay-back{font-size:14px;color:#aaa;text-decoration:underline;text-underline-offset:5px}
.essay-header{text-align:center;margin:80px auto 60px}
.essay-header time{color:#aaa;font-size:13px}
.essay-header h1{font-weight:400;font-size:clamp(32px,5vw,54px);margin:16px 0}
.essay-header .essay-deck{font-size:18px;color:#bbb;font-style:italic;line-height:1.5}
.essay-body{font-size:clamp(17px,1.7vw,19px);line-height:1.85}
.essay-body p{margin:0 0 26px}.essay-body h2{font-size:28px;font-weight:400;margin:54px 0 20px}
.essay-body a{text-decoration:underline;text-underline-offset:4px}
.essay-body img{display:block;width:100%;height:auto;margin:36px 0}

/* Dedicated scene-sized coordinate space for the fourth orbit (p5 independent). */
.scene .ring-four.writings-orbit-ready,
.scene.p5-ready .ring-four.writings-orbit-ready{
  position:absolute;inset:0;left:0;top:0;width:100%;height:100%;
  margin:0;transform:none;animation:none;pointer-events:none;
}
.scene .ring-four.writings-orbit-ready .charm,
.scene.p5-ready .ring-four.writings-orbit-ready .charm{
  position:absolute;left:25%;top:70%;z-index:3;
  transform:translate(-50%,-50%);animation:none;pointer-events:auto;
}
/* Before JS starts, the fourth charm should still be visible off-center. */
.scene .ring-four:not(.writings-orbit-ready){transform:rotate(55deg)}

/* Small project-specific glyphs lead the third line of each selected-work card. */
.home-project-grid .project-meta .project-blurb{display:flex;align-items:baseline;gap:10px}
.home-project-grid .project-blurb-glyph{flex:none;font:17px/1 Georgia,serif;color:#ddd;white-space:nowrap}

/* All orbiting buttons share a full-scene coordinate system controlled by p5.
   These override legacy nested spinning rings, including the fourth glyph. */
.scene.orbit-managed .ring,
.scene.orbit-managed .ring-one,
.scene.orbit-managed .ring-two,
.scene.orbit-managed .ring-three,
.scene.orbit-managed .ring-four{
  position:absolute!important;inset:0!important;left:0!important;top:0!important;
  width:100%!important;height:100%!important;margin:0!important;padding:0!important;
  transform:none!important;animation:none!important;pointer-events:none!important;
}
.scene.orbit-managed .ring .charm,
.scene.orbit-managed .ring-two .charm,
.scene.orbit-managed .ring-three .charm,
.scene.orbit-managed .ring-four .charm{
  position:absolute!important;z-index:3!important;display:flex!important;
  transform:translate(-50%,-50%)!important;animation:none!important;
  pointer-events:auto!important;
}

/* Compact biography, a thin band of social links, and the performance photograph. */
.home-about{max-width:990px;margin:clamp(85px,12vw,145px) auto 0;padding:clamp(65px,8vw,102px) 0 0;border-top:1px solid #292929;scroll-margin-top:24px}
.home-about-inner{max-width:820px;margin:auto}
.home-about-copy{text-align:center}
.home-about .mark{display:block;margin-bottom:12px;font-size:17px}
.home-about h2{font-size:clamp(30px,3.7vw,47px);font-weight:400;letter-spacing:.03em;margin:0 0 25px}
.home-about-intro{max-width:670px;margin:0 auto 24px;font-size:clamp(16px,1.6vw,19px);line-height:1.65;color:#ddd}
.home-about-readmore{color:#fff;text-decoration:underline;text-decoration-color:#666;text-underline-offset:5px;white-space:nowrap}
.home-about-readmore:hover{text-decoration-color:#fff}
.home-about-facts{list-style:none;max-width:670px;padding:0;margin:0 auto 30px;display:grid;gap:9px}
.home-about-facts li{font-size:14px;line-height:1.55;color:#bcbcbc}
.home-about-facts li::before{content:"✧";font-size:12px;color:#bbb;margin-right:9px}
.home-about-socials{border-top:1px solid #333;border-bottom:1px solid #333;display:flex;justify-content:center;flex-wrap:wrap;gap:0;margin:0 auto 34px;max-width:780px}
.home-about-socials a{padding:14px clamp(11px,1.7vw,22px);font-size:13px;color:#ccc;white-space:nowrap;transition:color .2s}
.home-about-socials a:hover,.home-about-socials a:focus-visible{color:#fff;text-decoration:underline;text-underline-offset:5px}
.home-about-photo{width:100%;max-width:1100px;aspect-ratio:3/1;margin:0 auto;overflow:hidden}
.home-about-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 55%}
@media(max-width:600px){.home-about{margin-top:85px;padding-top:65px}.home-about h2{margin-bottom:18px}.home-about-facts li{font-size:13px}.home-about-socials{margin-bottom:25px}.home-about-socials a{padding:12px 11px;font-size:12px}}

/* Force the full About CV photograph to match the panoramic homepage image. */
.about-cv .cv-photo{
  display:block;
  width:100%;
  max-width:890px;
  height:auto;
  aspect-ratio:3 / 1;
  overflow:hidden;
  margin:58px auto 0;
}
.about-cv .cv-photo > img{
  display:block;
  width:100%;
  height:100%;
  max-width:none;
  aspect-ratio:auto;
  object-fit:cover;
  object-position:center 55%;
}
@media(max-width:600px){.about-cv .cv-photo{margin-top:42px}}

/* Projection-light interaction palette: color belongs to actions, never the idle interface. */
:root{--signal-pink:#f5a1dc;--signal-blue:#83b9ff;--signal-violet:#ba9bfd}
.scene .charm{isolation:isolate;transition:opacity .2s ease,filter .25s ease}
.scene .charm::before{
  content:"";position:absolute;z-index:-1;inset:-11px -24px;
  border-radius:50%;pointer-events:none;opacity:0;
  background:radial-gradient(ellipse at 35% 48%,rgba(245,161,220,.20),transparent 62%),
             radial-gradient(ellipse at 75% 45%,rgba(94,157,255,.18),transparent 65%);
  filter:blur(11px);transition:opacity .26s ease;
}
.scene .charm .glyph,.scene .charm .label{transition:color .22s ease,text-shadow .22s ease}
.scene .charm:hover::before,.scene .charm:focus-visible::before{opacity:1}
.scene .charm:hover .glyph,.scene .charm:focus-visible .glyph{
  color:var(--signal-pink);
  text-shadow:0 0 9px rgba(245,161,220,.6),0 0 21px rgba(131,185,255,.35);
}
.scene .charm:hover .label,.scene .charm:focus-visible .label{color:var(--signal-blue)}
.scene .charm:active::before{opacity:1}
.scene .charm:active .glyph{color:#fff;text-shadow:0 0 13px var(--signal-blue),0 0 25px var(--signal-pink)}
.scene .charm:active .label{color:#fff}
.scene .charm:focus-visible{outline-color:var(--signal-blue);outline-offset:9px}
/* Subtle color response throughout the accessible, text-led pages. */
.home-about-socials a,.cv-group a,.home-about-readmore,
.detail-back,.work-home,.gallery-top-link,.cv-back,.cv-footer a,
.essay-back,.page a,.writing-entry,.writing-entry h3{
  transition:color .2s ease,text-decoration-color .2s ease,text-shadow .2s ease,border-color .2s ease;
}
.home-about-socials a:hover,.home-about-socials a:focus-visible,
.cv-group a:hover,.cv-group a:focus-visible,
.home-about-readmore:hover,.home-about-readmore:focus-visible,
.gallery-top-link:hover,.gallery-top-link:focus-visible,
.cv-back:hover,.cv-back:focus-visible,.cv-footer a:hover,
.detail-back:hover,.detail-back:focus-visible,
.work-home:hover,.work-home:focus-visible,
.page a:hover,.page a:focus-visible,.essay-back:hover,.essay-back:focus-visible{
  color:var(--signal-pink);text-decoration-color:var(--signal-blue);
  text-shadow:0 0 12px rgba(245,161,220,.22);
}
.home-about-socials a:active,.cv-group a:active,.home-about-readmore:active,
.gallery-top-link:active,.cv-back:active,.detail-back:active,.page a:active{
  color:var(--signal-blue);text-shadow:0 0 14px rgba(131,185,255,.50);
}
.project-card:hover .project-meta h3,.project-card:focus-visible .project-meta h3,
.writing-entry:hover h3,.writing-entry:focus-visible h3{color:var(--signal-pink)}
.project-card .project-meta h3{transition:color .25s ease}
.project-card:hover .project-square,.project-card:focus-visible .project-square{
  border-color:rgba(245,161,220,.5);
  box-shadow:0 0 0 1px rgba(131,185,255,.18),0 0 28px rgba(245,161,220,.10);
}
.project-card:active .project-square{border-color:var(--signal-blue);box-shadow:0 0 26px rgba(131,185,255,.22)}
.project-square{transition:border-color .25s ease,box-shadow .25s ease}
.scroll-discover:hover,.scroll-discover:focus-visible{color:var(--signal-pink);text-shadow:0 0 12px rgba(245,161,220,.4)}
.scroll-discover:active{color:var(--signal-blue)}
@media(prefers-reduced-motion:reduce){
  .scene .charm,.scene .charm::before,.scene .charm .glyph,.scene .charm .label,
  .project-square,.project-card .project-meta h3{transition:none!important}
}

/* More legible projection-light signals. The previous glow was too faint at glyph scale. */
.scene.orbit-managed .ring .charm:hover,
.scene.orbit-managed .ring .charm:focus-visible{
  opacity:1!important;
  filter:drop-shadow(0 0 7px rgba(255,87,210,.68)) drop-shadow(0 0 17px rgba(64,155,255,.45));
}
.scene.orbit-managed .ring .charm:hover .glyph,
.scene.orbit-managed .ring .charm:focus-visible .glyph{
  color:#ff6bd0!important;
  text-shadow:0 0 7px #ff61d0,0 0 19px rgba(255,70,197,.75),0 0 28px rgba(64,140,255,.7)!important;
}
.scene.orbit-managed .ring .charm:hover .label,
.scene.orbit-managed .ring .charm:focus-visible .label{
  color:#60b7ff!important;
  text-shadow:0 0 8px rgba(60,151,255,.9),0 0 17px rgba(235,80,211,.5)!important;
}
.scene.orbit-managed .ring .charm:active .glyph{
  color:#70c7ff!important;
  text-shadow:0 0 12px #4abfff,0 0 26px #ff65d0!important;
}
.home-about-socials a:hover,.home-about-socials a:focus-visible,
.cv-group a:hover,.cv-group a:focus-visible,
.about-cv a:hover,.about-cv a:focus-visible,
.home-about-readmore:hover,.home-about-readmore:focus-visible{
  color:#ff83d9!important;
  text-decoration-color:#71baff!important;
  text-shadow:0 0 11px rgba(255,94,200,.55);
}
.home-about-socials a:active,.about-cv a:active{color:#6abfff!important}
.project-card:hover .project-square,.project-card:focus-visible .project-square{
  border-color:#ff6bd0;
  box-shadow:0 0 0 1px rgba(255,107,208,.7),0 0 34px rgba(110,157,255,.24);
}
.project-card:hover .project-meta h3,.project-card:focus-visible .project-meta h3{
  color:#ff83d9;
  text-shadow:0 0 10px rgba(255,107,208,.3);
}

/* Interaction grammar: white at rest, pink on hover/focus, blue on press/click.
   Keep each state a single hue; no blended pink-blue glows. */
:root{--hover-light:#ff78d4;--click-light:#65bdff}
.scene .charm:hover,.scene .charm:focus-visible{
  opacity:1!important;
  filter:drop-shadow(0 0 9px rgba(255,120,212,.52))!important;
}
.scene .charm:hover .glyph,.scene .charm:hover .label,
.scene .charm:focus-visible .glyph,.scene .charm:focus-visible .label{
  color:var(--hover-light)!important;
  text-shadow:0 0 10px rgba(255,120,212,.72)!important;
}
.scene .charm:hover::before,.scene .charm:focus-visible::before{
  opacity:1;
  background:radial-gradient(ellipse,rgba(255,120,212,.22),transparent 70%)!important;
}
.scene .charm:active,.scene .charm.is-pressed{
  opacity:1!important;
  filter:drop-shadow(0 0 11px rgba(101,189,255,.8))!important;
}
.scene .charm:active .glyph,.scene .charm:active .label,
.scene .charm.is-pressed .glyph,.scene .charm.is-pressed .label{
  color:var(--click-light)!important;
  text-shadow:0 0 12px rgba(101,189,255,.92)!important;
}
.scene .charm:active::before,.scene .charm.is-pressed::before{
  opacity:1!important;
  background:radial-gradient(ellipse,rgba(101,189,255,.29),transparent 70%)!important;
}
.home-about-socials a:hover,.home-about-socials a:focus-visible,
.cv-group a:hover,.cv-group a:focus-visible,
.about-cv a:hover,.about-cv a:focus-visible,
.home-about-readmore:hover,.home-about-readmore:focus-visible,
.gallery-top-link:hover,.gallery-top-link:focus-visible,
.detail-back:hover,.detail-back:focus-visible,
.scroll-discover:hover,.scroll-discover:focus-visible,
.page a:hover,.page a:focus-visible{
  color:var(--hover-light)!important;
  text-shadow:0 0 9px rgba(255,120,212,.45)!important;
  text-decoration-color:var(--hover-light)!important;
}
.home-about-socials a:active,.cv-group a:active,.about-cv a:active,
.home-about-readmore:active,.gallery-top-link:active,.detail-back:active,
.scroll-discover:active,.page a:active{
  color:var(--click-light)!important;
  text-shadow:0 0 11px rgba(101,189,255,.7)!important;
  text-decoration-color:var(--click-light)!important;
}
.project-card:hover .project-square,.project-card:focus-visible .project-square{
  border-color:var(--hover-light)!important;
  box-shadow:0 0 24px rgba(255,120,212,.2)!important;
}
.project-card:active .project-square{
  border-color:var(--click-light)!important;
  box-shadow:0 0 26px rgba(101,189,255,.42)!important;
}
.project-card:hover .project-meta h3,.project-card:focus-visible .project-meta h3{color:var(--hover-light)!important}
.project-card:active .project-meta h3{color:var(--click-light)!important}

/* Small four-point celestial cursor, color-coded to the site's interactions.
   Keep native editing cursors and use normal pointers on touch devices. */
@media (hover:hover) and (pointer:fine){
  html, body, body *{cursor:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2226%22%20height%3D%2226%22%20viewBox%3D%220%200%2026%2026%22%3E%3Cpath%20d%3D%22M13%202.5%2015.15%2010.85%2023.5%2013%2015.15%2015.15%2013%2023.5%2010.85%2015.15%202.5%2013%2010.85%2010.85Z%22%20fill%3D%22%23080808%22%20fill-opacity%3D%22.92%22%20stroke%3D%22%23f5f1f7%22%20stroke-width%3D%221.35%22%20stroke-linejoin%3D%22round%22%2F%3E%3Ccircle%20cx%3D%2213%22%20cy%3D%2213%22%20r%3D%221.5%22%20fill%3D%22%23f5f1f7%22%2F%3E%3C%2Fsvg%3E") 13 13, auto}
  a, button, [role="button"], summary, .project-card,
  a *, button *, [role="button"] *{cursor:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2226%22%20height%3D%2226%22%20viewBox%3D%220%200%2026%2026%22%3E%3Cpath%20d%3D%22M13%202.5%2015.15%2010.85%2023.5%2013%2015.15%2015.15%2013%2023.5%2010.85%2015.15%202.5%2013%2010.85%2010.85Z%22%20fill%3D%22%23080808%22%20fill-opacity%3D%22.92%22%20stroke%3D%22%23ff78d4%22%20stroke-width%3D%221.35%22%20stroke-linejoin%3D%22round%22%2F%3E%3Ccircle%20cx%3D%2213%22%20cy%3D%2213%22%20r%3D%221.5%22%20fill%3D%22%23ff78d4%22%2F%3E%3C%2Fsvg%3E") 13 13, auto!important}
  a:active, button:active, [role="button"]:active,
  a:active *, button:active *, [role="button"]:active *,
  button.is-pressed, button.is-pressed *{cursor:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2226%22%20height%3D%2226%22%20viewBox%3D%220%200%2026%2026%22%3E%3Cpath%20d%3D%22M13%202.5%2015.15%2010.85%2023.5%2013%2015.15%2015.15%2013%2023.5%2010.85%2015.15%202.5%2013%2010.85%2010.85Z%22%20fill%3D%22%23080808%22%20fill-opacity%3D%22.92%22%20stroke%3D%22%2365bdff%22%20stroke-width%3D%221.35%22%20stroke-linejoin%3D%22round%22%2F%3E%3Ccircle%20cx%3D%2213%22%20cy%3D%2213%22%20r%3D%221.5%22%20fill%3D%22%2365bdff%22%2F%3E%3C%2Fsvg%3E") 13 13, auto!important}
  input, textarea, [contenteditable="true"], input *, textarea *{cursor:text!important}
}