:root{--bg:#0b0b0c;--fg:#e6e2d8;--dim:#8a8880;--line:#26262a;--warm:#a58de8;--wash:rgba(165,141,232,.12);--glow:rgba(165,141,232,.7);--tone:#c9bdf0;--m1:#f3eee2;--m2:#bdb8cf;--m3:#7f7a9c;--serif:'IM Fell English',Georgia,serif;--type:'Special Elite',ui-monospace,monospace;--ease:cubic-bezier(.2,.7,.2,1)}
[data-theme=light]{--bg:#e6e2d8;--fg:#111;--dim:#67655f;--line:#bab6aa;--warm:#6a4fb5;--wash:rgba(106,79,181,.1);--glow:rgba(106,79,181,.45);--tone:#4f3b96;--m1:#4a4468;--m2:#2c2842;--m3:#16131f}
*{box-sizing:border-box;margin:0}
body{background:var(--bg);color:var(--fg);font:400 1.18rem/1.65 var(--serif);min-height:100vh}
a{color:inherit}:focus-visible{outline:1px dashed var(--warm);outline-offset:4px}
.smoke{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.bd{position:absolute;width:65%;max-height:85%;object-fit:cover;-webkit-mask-image:radial-gradient(closest-side,#000 30%,transparent 100%);mask-image:radial-gradient(closest-side,#000 30%,transparent 100%);filter:blur(1px);mix-blend-mode:screen;opacity:.5}
.smoke:not(.inv) .bd{filter:invert(1) blur(1px)}
[data-theme=light] .bd{mix-blend-mode:multiply;filter:invert(1) blur(1px);opacity:.35}
[data-theme=light] .smoke:not(.inv) .bd{filter:blur(1px)}
.b0{left:-5%;top:5%}.b1{right:-8%;top:25%}.b2{left:25%;bottom:-10%}
#side{position:fixed;left:0;top:0;width:240px;height:100vh;z-index:5;padding:2.4rem 1.8rem;display:flex;flex-direction:column;gap:2rem;background:var(--bg);border-right:1px solid var(--line);transition:transform .7s var(--ease)}
main{margin-left:240px;padding:3rem clamp(1.2rem,5vw,4.5rem) 6rem;transition:margin .7s var(--ease)}
main>*{max-width:1100px}main>.landing{max-width:none;width:100%}
body.collapsed #side{transform:translateX(-101%)}body.collapsed main{margin-left:0}body.collapsed main>#in{margin-inline:auto}
.mark{display:inline-block;font:italic 400 2.3rem/1.1 var(--serif);text-decoration:none}
.mark i,h1 i{display:inline-block;font-style:inherit;padding:0 .1em;margin:0 -.1em;animation:tone 7s ease-in-out infinite}
.mark{animation:breathe 6s ease-in-out infinite}
@keyframes tone{50%{color:var(--tone)}}
@keyframes breathe{50%{text-shadow:0 0 .22em var(--glow)}}
.tag,.foot,nav a,figcaption,dt,.links a,.enter,summary{font-family:var(--type)}
.tag{font-size:.68rem;color:var(--dim);margin-top:.6rem;display:block}
#side nav{display:flex;flex-direction:column;gap:.75rem;font-size:.85rem}
#side nav a{display:flex;gap:.6rem;align-items:center;text-decoration:none;color:var(--dim);transition:transform .25s,color .25s;animation:fade .6s var(--ease) backwards;animation-delay:calc(var(--i)*.06s)}
#side nav a:hover{color:var(--fg);transform:translateX(5px)}#side nav a[aria-current]{color:var(--fg)}
#side nav svg{width:.7rem;color:var(--warm);opacity:0}#side nav a:hover svg,#side nav a[aria-current] svg{opacity:1}
@keyframes fade{from{opacity:0;transform:translateX(-12px)}}
.foot{margin-top:auto;font-size:.72rem;line-height:2;color:var(--dim)}.foot button{all:unset;cursor:pointer;text-decoration:underline}
.star{fill:currentColor}
#menu{all:unset;position:fixed;top:1.3rem;left:195px;z-index:6;cursor:pointer;width:1.5rem;height:1.5rem;color:var(--warm);transition:left .7s var(--ease),transform .7s}
#menu svg{width:100%}body.collapsed #menu{left:1.3rem;transform:rotate(45deg)}#menu:hover{transform:rotate(90deg) scale(1.2)}
h1,h2{font-weight:400;font-style:italic;line-height:1}
h1{font-size:clamp(2.6rem,6vw,4.4rem);margin-bottom:1rem}
h2{font-size:2rem;margin:4rem 0 1.4rem}
.lead{color:var(--dim);max-width:46ch;margin-bottom:2.5rem}
hr{border:0;height:1px;background:var(--line);margin:4rem 0 0}
.hero{min-height:80vh;display:flex;flex-direction:column;justify-content:center}
.hero h1{font-size:clamp(4.8rem,18vw,13rem);letter-spacing:-.04em;white-space:nowrap;margin-inline:auto;line-height:1.2;animation:ghost 2.4s ease-out backwards,breathe 6s ease-in-out 2.4s infinite}
@keyframes ghost{from{filter:blur(12px);opacity:0}}
.landing{min-height:calc(100vh - 3rem);align-items:center;text-align:center;justify-content:center}
.landing .lead{margin:.5rem auto 2rem;font:.85rem var(--type)}
.bigflower{display:flex;justify-content:center}.bigflower .flower{width:9.5rem;margin-bottom:1rem}
.links{display:flex;gap:2rem;margin-top:1.4rem;flex-wrap:wrap}
.links a,.enter{font-size:.85rem;text-decoration:none;padding-bottom:.3rem;border-bottom:1px dashed var(--warm);transition:letter-spacing .3s}.links a:hover{letter-spacing:.08em}
.enter{display:inline-block;padding:.8rem 2.2rem;border:1px dashed var(--warm);transition:background .3s,letter-spacing .3s}.enter:hover{background:var(--wash);letter-spacing:.18em}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1.8rem}
figure.t{transition:opacity 1s,transform 1s}figure.t.rv{opacity:0;transform:translateY(16px)}
figure.t img,.ph{width:100%;aspect-ratio:4/5;object-fit:cover;display:block;filter:grayscale(1) contrast(1.1);transition:transform .8s}
figure.t:hover img,figure.t:hover .ph{transform:scale(1.02)}
.ph{background:radial-gradient(circle at 50% 35%,rgba(150,150,145,.4),transparent 55%),var(--line);display:grid;place-items:center;color:var(--dim);overflow:hidden}.ph svg{width:1.4rem;animation:tw 4s ease-in-out infinite}
@keyframes tw{50%{opacity:.3;transform:scale(.7) rotate(20deg)}}
figure.taken img,figure.taken .ph{opacity:.35}
figcaption{display:flex;justify-content:space-between;padding:.6rem 0;font-size:.74rem}figcaption span:last-child{color:var(--dim)}figcaption a{text-decoration:underline dashed var(--warm);text-underline-offset:3px}
.copy p{max-width:56ch;margin-bottom:1.2rem}
dl{display:grid;grid-template-columns:9rem 1fr;gap:.9rem 1rem;margin-top:1.5rem;max-width:60ch}dt{font-size:.78rem;color:var(--dim);padding-top:.3rem}
ol{max-width:56ch;padding-left:1.4rem}ol li{margin-bottom:.8rem;padding-left:.4rem}
details{max-width:60ch;border-bottom:1px solid var(--line);padding:.9rem 0}summary{cursor:pointer;font-size:.88rem;list-style:none}summary::before{content:"+ ";color:var(--warm)}details[open] summary::before{content:"- "}details p{margin-top:.7rem;color:var(--dim)}
.flower{width:3.4rem;display:block;margin-bottom:.6rem;overflow:visible}
.flower .mb{transform-box:view-box;transform-origin:50% 50%;animation:sway 10s ease-in-out infinite alternate}
@keyframes sway{from{transform:rotate(-2.5deg)}to{transform:rotate(2.5deg)}}
@media(max-width:760px){main{margin-left:0}#side{position:static;width:auto;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between;padding:1.2rem;transform:none!important}#side nav{flex-direction:row;flex-wrap:wrap;width:100%;order:3}#side nav svg,.foot,.tag,#menu{display:none}.hero h1{white-space:normal}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}figure.t.rv{opacity:1;transform:none}}

figure.sheet img,figure.sheet .ph{aspect-ratio:5/7}

.bd{height:115vh;width:auto;max-width:none;max-height:none;right:-5%;top:-6%;opacity:.38;animation:bdin 3s ease-out backwards;-webkit-mask-image:radial-gradient(ellipse closest-side,#000 40%,transparent 100%);mask-image:radial-gradient(ellipse closest-side,#000 40%,transparent 100%)}
body.is-home .bd{right:auto;left:50%;top:50%;translate:-50% -50%;height:125vh;opacity:.55}
[data-theme=light] body.is-home .bd{opacity:.45}
@keyframes bdin{from{opacity:0}}

/* v8 */
.flower{width:3rem}.bigflower .flower{width:6.5rem;margin-bottom:1.2rem}
.flower .mb{transform-origin:50% 88%;animation-duration:9s}
.bd{opacity:.5;-webkit-mask-image:radial-gradient(ellipse closest-side,#000 55%,transparent 100%);mask-image:radial-gradient(ellipse closest-side,#000 55%,transparent 100%)}
.bd.l{right:auto;left:-6%}
[data-theme=light] .bd{opacity:.5}
body.is-home .bd{left:auto;right:-7%;top:50%;translate:0 -50%;height:112vh;opacity:.7}
body.is-home .bd.l{right:auto;left:-7%}
[data-theme=light] body.is-home .bd{opacity:.55}
@media(max-width:760px){body.is-home .bd.l{display:none}.bd{opacity:.4}}

/* llowwiii aftercare: readable expandable instructions */
.aftercare{max-width:72ch}.aftercare-content{padding:.6rem 0 1.5rem;line-height:1.65}.aftercare-content p{margin:.7rem 0;color:var(--fg)}.aftercare-content h3{font:normal 1.03rem var(--type);margin:2rem 0 .65rem;color:var(--fg)}.aftercare-content h4{font:normal .9rem var(--type);margin:1.4rem 0 .4rem;color:var(--tone)}.aftercare-content ul{padding-left:1.5rem;margin:.7rem 0 1.2rem}.aftercare-content li{padding-left:.2rem;margin:.35rem 0}.aftercare-content a{color:var(--fg)}

/* Experiments / multidisciplinary portfolio */
.experiments-page .exp-section{max-width:680px;padding-top:.2rem;margin-top:2.5rem;border-top:1px solid var(--line)}
.experiments-page .exp-section h2{margin:2rem 0 1rem}
.experiments-page .exp-section>p{max-width:55ch;margin-bottom:1rem}
.exp-eyebrow{font:.8rem/1.6 var(--type);color:var(--tone)}
.exp-muted{color:var(--dim);font-style:italic}
.exp-links{display:flex;flex-wrap:wrap;gap:1rem;margin-top:1.5rem}
.exp-links a{font:.82rem var(--type);text-decoration:none;border-bottom:1px dashed var(--warm);padding-bottom:.3rem}

/* Experiments: in-page music and visual preview */
.exp-player{margin:1.4rem 0 1rem;max-width:600px;background:var(--line);border:1px solid var(--line);border-radius:8px;overflow:hidden;min-height:352px}
.exp-player iframe{display:block;max-width:100%}
.exp-motion-preview{display:block;max-width:480px;margin:1.4rem 0 1rem;text-decoration:none;border:1px solid var(--line);background:var(--bg);overflow:hidden}
.exp-motion-image{display:block;position:relative;aspect-ratio:16/10;overflow:hidden;background:#111}
.exp-motion-image img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(1);transition:transform .6s var(--ease),opacity .6s;opacity:.85}
.exp-motion-preview:hover img{transform:scale(1.045);opacity:1}
.exp-play{position:absolute;right:1.2rem;bottom:1rem;font:1.5rem var(--type);color:#fff;text-shadow:0 0 12px #000}
.exp-motion-caption{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem;padding:1rem;font:.76rem/1.5 var(--type)}
.exp-motion-caption span{color:var(--dim)}
.exp-coming{max-width:600px;border:1px dashed var(--line);padding:2.4rem 1.5rem;margin-top:1.3rem;text-align:center;background:var(--wash)}
.exp-coming>span{font:italic 2.3rem var(--serif)}
.exp-coming p{font:.8rem/1.6 var(--type);color:var(--dim);margin-top:.6rem}
@media(max-width:600px){.exp-player iframe{height:352px}.exp-motion-caption{flex-direction:column}}

/* Featured motion embeds */
.exp-video-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:1.4rem;margin:1.5rem 0 1rem}.exp-video{min-width:0}.exp-video iframe{display:block;width:100%;height:570px;border:1px solid var(--line);border-radius:8px;background:var(--bg)}.exp-video>a{display:inline-block;margin-top:.55rem;font:.8rem var(--type);text-decoration:underline;text-decoration-color:var(--warm)}@media(max-width:760px){.exp-video iframe{height:600px}}

/* Homepage chrome flower: metallic SVG with a slow 3D tumble */
.chrome-flower-scene{width:150px;height:164px;perspective:650px;display:grid;place-items:center;margin-bottom:.3rem;filter:drop-shadow(0 4px 16px rgba(180,180,220,.2))}
.chrome-flower-orbit{width:100%;height:100%;transform-style:preserve-3d;animation:chrome-tumble 14s ease-in-out infinite}
.chrome-flower{width:100%;height:100%;overflow:visible;filter:drop-shadow(2px 4px 3px rgba(0,0,0,.4))}
@keyframes chrome-tumble{0%{transform:rotateY(-24deg) rotateX(10deg) rotateZ(-7deg)}25%{transform:rotateY(45deg) rotateX(-14deg) rotateZ(2deg)}50%{transform:rotateY(155deg) rotateX(8deg) rotateZ(8deg)}75%{transform:rotateY(275deg) rotateX(-12deg) rotateZ(-2deg)}100%{transform:rotateY(336deg) rotateX(10deg) rotateZ(-7deg)}}
@media(prefers-reduced-motion:reduce){.chrome-flower-orbit{animation:none;transform:rotateY(-18deg) rotateX(10deg)}}

/* TikTok rate-limit-safe visual links: no third-party video frames loaded */
.exp-edit-card{display:block;min-width:0;color:inherit;text-decoration:none;border:1px solid var(--line);background:var(--bg);overflow:hidden}
.exp-edit-art{display:block;position:relative;aspect-ratio:4/5;overflow:hidden;background:#111}
.exp-edit-art img{width:100%;height:100%;object-fit:cover;filter:grayscale(1);opacity:.85;transition:transform .5s var(--ease),opacity .5s}
.exp-edit-art-2 img{transform:scale(1.5) rotate(90deg)}
.exp-edit-art-3 img{transform:scale(1.4) rotate(-90deg)}
.exp-edit-card:hover .exp-edit-art img{opacity:1;filter:grayscale(.6)}
.exp-edit-play{position:absolute;right:1rem;bottom:1rem;font:1.8rem var(--serif);color:white;text-shadow:0 1px 8px #000}
.exp-edit-meta{display:flex;justify-content:space-between;gap:.5rem;padding:.85rem;font:.75rem/1.4 var(--type)}
.exp-edit-meta span{color:var(--dim)}

/* Lightweight sculpted chrome lotus. One SVG, gentle transform only. */
.lotus-scene{width:168px;height:168px;flex-shrink:0;margin:0 auto 1rem;position:relative}
.lotus-small{width:65px;height:65px;margin:0 0 .6rem}
.lotus-svg{display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 5px 5px rgba(0,0,0,.26))}
.lotus-figure{transform-origin:50% 60%;animation:lotus-float 11s ease-in-out infinite;will-change:transform}
@keyframes lotus-float{0%,100%{transform:rotate(-5deg) scale(.98)}50%{transform:rotate(5deg) scale(1.025)}}
@media(prefers-reduced-motion:reduce){.lotus-figure{animation:none;will-change:auto}}

/* Airy ghost-flower mark: no chrome, blur filters, or 3D layers. */
.ghostflower-scene{width:164px;height:164px;flex-shrink:0;margin:0 auto 1rem;position:relative;color:var(--fg)}
.ghostflower-small{width:62px;height:62px;margin:0 0 .6rem}
.ghostflower-svg{width:100%;height:100%;display:block;overflow:visible}
.ghostflower-bloom{transform-origin:50% 65%;animation:ghostflower-drift 13s ease-in-out infinite}
@keyframes ghostflower-drift{0%,100%{transform:translateY(1px) rotate(-2deg)}50%{transform:translateY(-4px) rotate(2deg)}}
@media(prefers-reduced-motion:reduce){.ghostflower-bloom{animation:none}}

/* Smoky botanical bloom — one small transparent image, gentle motion only. */
.smokebloom{display:block;flex-shrink:0;position:relative;pointer-events:none;opacity:.87}
.smokebloom img{display:block;width:100%;height:100%;object-fit:contain;filter:none}
.smokebloom-large{width:min(370px,78vw);height:160px;margin:0 auto 1.2rem;animation:bloom-breathe 12s ease-in-out infinite alternate}
.smokebloom-small{width:94px;height:48px;margin:0 0 .65rem;opacity:.75}
@keyframes bloom-breathe{from{transform:translateY(2px) scale(.985);opacity:.75}to{transform:translateY(-3px) scale(1.015);opacity:.94}}
@media(prefers-reduced-motion:reduce){.smokebloom-large{animation:none}}

/* Flash sheets: soften bright paper against the dark site, preserving ink clarity. */
#flash figure.t.sheet img, #feat figure.t.sheet img{opacity:.76;transition:opacity .35s ease,transform .8s ease}
#flash figure.t.sheet:hover img, #feat figure.t.sheet:hover img{opacity:.94}
#flash figure.t.sheet.taken img, #feat figure.t.sheet.taken img{opacity:.35}
@media (hover:none){#flash figure.t.sheet img, #feat figure.t.sheet img{opacity:.82}}

/* Smoke bloom: keep the white wisps on dark mode, turn them into charcoal ink in light mode. */
[data-theme="light"] .smokebloom img {
  filter: invert(1) brightness(.68) contrast(1.35);
}
[data-theme="light"] .smokebloom { opacity: 1; }
[data-theme="light"] .smokebloom-small { opacity: .92; }

/* Mobile theme switch: desktop remains unchanged. */
#mobile-theme{display:none}
@media(max-width:760px){
  #mobile-theme{display:inline-flex;align-items:center;justify-content:center;align-self:center;flex-shrink:0;margin-left:auto;padding:.5rem .7rem;border:1px solid var(--line);border-radius:2px;background:transparent;color:var(--fg);font:.7rem var(--type);cursor:pointer;min-height:38px}
  #mobile-theme:focus-visible{outline:2px solid var(--warm);outline-offset:3px}
}

/* Persistent, collapsible page navigation for mobile. */
#mobile-nav-toggle{display:none}
@media(max-width:760px){
  #side,body.collapsed #side{position:sticky;top:0;z-index:50;width:100%;height:auto;min-height:64px;display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0;padding:.7rem 1rem;background:var(--bg);border-right:0;border-bottom:1px solid var(--line);transform:none!important;transition:none}
  #side .mark{font-size:1.85rem}
  .mobile-actions{display:flex;align-items:center;gap:.5rem;margin-left:auto}
  #mobile-theme{margin-left:0;min-height:38px}
  #mobile-nav-toggle{display:inline-flex;align-items:center;gap:.5rem;justify-content:center;min-height:38px;padding:.5rem .7rem;border:1px solid var(--line);border-radius:2px;background:transparent;color:var(--fg);font:.7rem var(--type);cursor:pointer}
  #mobile-nav-toggle span{font-size:1.1rem;line-height:.8;color:var(--warm)}
  #mobile-nav-toggle:focus-visible{outline:2px solid var(--warm);outline-offset:3px}
  #side nav,#side.mobile-nav-open nav{flex-direction:column;flex-wrap:nowrap;width:100%;order:3;gap:0}
  #side nav{display:none}
  #side.mobile-nav-open nav{display:flex;max-height:calc(100dvh - 72px);overflow-y:auto;margin-top:.75rem;padding:.35rem 0;border-top:1px solid var(--line)}
  #side nav a{padding:.65rem .3rem;font-size:.9rem;border-bottom:1px solid var(--line)}
  #side nav a[aria-current]{color:var(--fg)}
  #side nav svg{display:block;opacity:.5;width:.65rem}
  #side nav a[aria-current] svg{opacity:1}
  main,body.collapsed main{margin-left:0}
}