/* Subdued cyberpunk: deep violet-black, muted neon accents used sparingly (rose, violet, teal, a touch of gold), thin lines, small clipped corners. */
:root{--bg:#0b0912;--bg2:#13101d;--card:#15121f;--rose:#e05aa8;--violet:#9b7bd8;--teal:#5fc9d4;--gold:#d9c46a;--t:#e9e6f0;--m:#a7a1b8;--line:#2a2438;--line2:#3b3350;
 --cut:9px;--clip:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut));
 --fh:"Orbitron","Eurostile","Segoe UI",sans-serif;--fb:"Rajdhani","Segoe UI",system-ui,sans-serif;--fm:"Share Tech Mono",ui-monospace,monospace}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;color:var(--t);font:18px/1.65 var(--fb);font-weight:500;
 background:var(--bg)}
body.locked{overflow:hidden}
/* organic background: slow-morphing blurred blobs; each layer drifts at its own speed on scroll (parallax, app.js) */
.bg{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.bg::after{content:"";position:absolute;inset:0;opacity:.07;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='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.layer{position:absolute;inset:-20% 0 auto 0;height:260vh;will-change:transform}
.blob{position:absolute;display:block;filter:blur(70px);opacity:.55;mix-blend-mode:screen;will-change:border-radius,transform;animation:morph 26s ease-in-out infinite alternate}
.b1{width:52vmax;height:46vmax;left:-14vmax;top:4vh;background:radial-gradient(circle at 40% 40%,#8c2a64,#3a1340 70%);animation-duration:31s}
.b2{width:40vmax;height:44vmax;right:-12vmax;top:38vh;background:radial-gradient(circle at 60% 40%,#b8487f,#4a1748 70%);animation-duration:24s;animation-delay:-8s}
.b3{width:34vmax;height:30vmax;left:18vw;top:96vh;background:radial-gradient(circle,#5b3a9e,#24123f 70%);animation-duration:28s;animation-delay:-14s;opacity:.45}
.b4{width:30vmax;height:34vmax;right:6vw;top:150vh;background:radial-gradient(circle,#a3366f,#2c0f2e 70%);animation-duration:22s;animation-delay:-4s}
.b5{width:26vmax;height:24vmax;left:44vw;top:-6vh;background:radial-gradient(circle,#3f6f86,#13202e 70%);animation-duration:34s;animation-delay:-20s;opacity:.3}
@keyframes morph{0%{border-radius:42% 58% 63% 37%/45% 41% 59% 55%;transform:translate(0,0) rotate(0) scale(1)}
 33%{border-radius:63% 37% 41% 59%/58% 62% 38% 42%;transform:translate(4vmax,-3vmax) rotate(40deg) scale(1.08)}
 66%{border-radius:38% 62% 56% 44%/36% 49% 51% 64%;transform:translate(-3vmax,4vmax) rotate(85deg) scale(.94)}
 100%{border-radius:55% 45% 34% 66%/62% 37% 63% 38%;transform:translate(2vmax,2vmax) rotate(130deg) scale(1.05)}}
h1,h2,.logo,.btn,.eyebrow,nav a{font-family:var(--fh);text-transform:uppercase}
a{color:var(--teal);text-decoration-thickness:1px;text-underline-offset:3px}
.draft{background:var(--bg2);color:var(--gold);text-align:center;font:12px/1 var(--fm);letter-spacing:.14em;padding:7px;border-bottom:1px solid var(--line)}
header{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 20px;position:sticky;top:0;z-index:40;background:#0b0912e0;backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
header::after{content:"";position:absolute;left:0;bottom:-1px;width:120px;height:1px;background:var(--rose)}
.logo{color:var(--t);text-decoration:none;font-size:15px;font-weight:700;letter-spacing:.22em}
nav{display:flex;gap:20px;overflow-x:auto}nav a{color:var(--m);text-decoration:none;font-size:11px;font-weight:500;letter-spacing:.2em;white-space:nowrap;transition:color .2s}
nav a:hover,nav a:focus-visible{color:var(--t)}
section{max-width:1000px;margin:0 auto;padding:56px 20px;position:relative}
h2{font-size:18px;font-weight:600;letter-spacing:.2em;margin:0 0 22px;display:flex;align-items:center;gap:14px;color:var(--t)}
h2::before{content:"";width:6px;height:6px;background:var(--rose);transform:rotate(45deg)}
h2::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--line2),transparent)}
.hero{display:grid;gap:30px;padding-top:30px}
.hero-frame{position:relative;padding:1px;background:linear-gradient(135deg,#e05aa899,var(--line2) 45%,#5fc9d499);clip-path:var(--clip)}
.hero img{width:100%;height:auto;clip-path:var(--clip);display:block}
h1{font-size:clamp(40px,9vw,72px);font-weight:700;line-height:1;margin:10px 0 14px;letter-spacing:.06em;color:var(--t)}
h1 em{font:italic 500 1.12em/1 "Cormorant Garamond",Georgia,serif;text-transform:none;letter-spacing:.01em;color:var(--rose)}
.eyebrow{color:var(--teal);font:12px var(--fm);letter-spacing:.3em;margin:0}
.tag{color:#cfc6dc;font:italic 400 24px/1.4 "Cormorant Garamond",Georgia,serif;max-width:30ch}
.btn{display:inline-block;background:var(--rose);color:#0b0912;font-weight:600;font-size:12px;letter-spacing:.18em;padding:15px 26px;text-decoration:none;border:0;cursor:pointer;margin:4px 10px 4px 0;
 clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);transition:background .2s,color .2s}
.btn:hover,.btn:focus-visible{background:#ea7dbb}
.btn.alt{background:transparent;color:var(--t);box-shadow:inset 0 0 0 1px var(--line2)}
.btn.alt:hover,.btn.alt:focus-visible{box-shadow:inset 0 0 0 1px var(--teal);color:var(--teal);background:transparent}
.links{list-style:none;padding:0;display:grid;gap:12px}
.links a{display:flex;flex-direction:column;gap:2px;background:var(--card);padding:18px 22px;text-decoration:none;color:var(--t);clip-path:var(--clip);box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow .2s,background .2s}
.links a b{font-family:var(--fh);font-size:13px;font-weight:600;letter-spacing:.14em}
.links a:hover,.links a:focus-visible{box-shadow:inset 0 0 0 1px var(--line2),inset 2px 0 0 var(--rose);background:#1a1626}
.links span{color:var(--m);font:13px var(--fm);letter-spacing:.04em}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start}
.grid img,.grid video{height:auto;width:100%;aspect-ratio:16/10;object-fit:cover;background:var(--card);clip-path:var(--clip);display:block}
.embed{position:relative;display:block;width:100%;padding:0;border:0;background:var(--card);cursor:pointer;clip-path:var(--clip);color:inherit}
.embed img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;transition:opacity .2s,transform .4s}
.embed:hover img,.embed:focus-visible img{opacity:.85;transform:scale(1.02)}
.embed .play{position:absolute;left:50%;top:50%;width:46px;height:46px;transform:translate(-50%,-50%);background:#0b0912b3;box-shadow:inset 0 0 0 1px var(--rose);clip-path:polygon(25% 0,100% 0,100% 75%,75% 100%,0 100%,0 25%)}
.embed .play::after{content:"";position:absolute;left:52%;top:50%;transform:translate(-40%,-50%);border-left:12px solid var(--rose);border-top:8px solid transparent;border-bottom:8px solid transparent}
.embed .meta{position:absolute;right:8px;bottom:8px;font:12px var(--fm);letter-spacing:.08em;color:var(--t);background:#0b0912cc;padding:2px 7px}
.embed-frame{width:100%;aspect-ratio:16/10;border:0;display:block;background:#000;clip-path:var(--clip)}
.note{color:#b5a65e;font:12px var(--fm);letter-spacing:.05em}
.coming{font:500 16px var(--fh);letter-spacing:.35em;color:var(--m);margin:0}
.coming::before{content:"";display:inline-block;width:24px;height:1px;background:var(--violet);vertical-align:middle;margin-right:14px}
footer{text-align:center;color:var(--m);font:12px var(--fm);letter-spacing:.12em;padding:34px 20px 54px;border-top:1px solid var(--line)}
#gate{position:fixed;inset:0;background:#0b0912f2;display:grid;place-items:center;z-index:99;padding:20px}
#gate.off{display:none}
.gate-card{background:var(--card);padding:34px;max-width:440px;text-align:center;clip-path:var(--clip);box-shadow:inset 0 0 0 1px var(--line2)}
.gate-card h2{justify-content:center}.gate-card h2::after{display:none}
.ghost{color:var(--m);margin-left:10px;font:13px var(--fm)}
a:focus-visible,.btn:focus-visible{outline:1px solid var(--teal);outline-offset:3px}
/* crisp shapes over the blobs: flowing ribbons, turning rings, floating geometric outlines */
.layer.shapes{inset:-10% 0 auto 0}
.shapes svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ribbon path{fill:none;stroke:url(#gr);stroke-width:1.2;opacity:.45}
.ribbon.teal path{stroke:url(#gt)}
.ribbon .flow{stroke-width:2.2;opacity:.9;stroke-dasharray:140 1900;animation:flow 14s linear infinite}
.r2 .flow{animation-duration:18s;animation-delay:-6s}.r3 .flow{animation-duration:22s;animation-delay:-11s}
.ribbon{animation:sway 20s ease-in-out infinite alternate}.r2{animation-duration:26s}.r3{animation-duration:30s}
@keyframes flow{to{stroke-dashoffset:-2040}}
@keyframes sway{to{transform:translate(0,40px) scaleY(1.06)}}
.geo circle,.geo polygon,.geo path{fill:none;stroke:#9b7bd8;stroke-width:1.2;opacity:.5}
.geo .rose{stroke:#e05aa8}.geo .teal{stroke:#5fc9d4}.geo .violet{stroke:#b49ae6}
.geo .dash{stroke-dasharray:4 10;opacity:.6}.geo .dot{fill:#e05aa8;stroke:none;opacity:.7}
.spin,.float{transform-box:fill-box;transform-origin:center}
.spin{animation:spin 60s linear infinite}.s2{animation-duration:45s;animation-direction:reverse}.s3{animation-duration:70s}.s4{animation-duration:90s;animation-direction:reverse}
.float{animation:float 12s ease-in-out infinite alternate}.f2{animation-duration:16s;animation-delay:-5s}.f3{animation-duration:9s}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes float{to{transform:translate(18px,-26px) rotate(12deg)}}
@media(max-width:700px){.geo,.curves{opacity:.7}}
/* gallery: own section, full colour, two rows that auto-drift in opposite directions and can be dragged/swiped (app.js) */
#gallery{max-width:none;padding-left:0;padding-right:0}
#gallery h2{max-width:1000px;margin-left:auto;margin-right:auto;padding:0 20px}
.grow{position:relative;margin:0 0 18px}
.gscroll{overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;scrollbar-color:var(--rose) transparent;cursor:grab;padding:16px 0 12px;outline:none;
 -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.gscroll::-webkit-scrollbar{height:4px}.gscroll::-webkit-scrollbar-thumb{background:var(--rose);border-radius:2px}.gscroll::-webkit-scrollbar-track{background:#ffffff0d}
.gscroll.dragging{cursor:grabbing}.gscroll:focus-visible{box-shadow:inset 0 0 0 1px var(--teal)}
.gtrack{display:flex;gap:20px;width:max-content;padding:0 20px}
.gi{margin:0;flex:none;height:clamp(170px,30vw,280px);animation:bob var(--d,7s) ease-in-out var(--del,0s) infinite alternate}
.gi img{height:100%;width:auto;display:block;clip-path:var(--clip);user-select:none;-webkit-user-drag:none}
@keyframes bob{from{transform:translateY(-6px) rotate(var(--r,1.5deg))}to{transform:translateY(6px) rotate(calc(var(--r,1.5deg) * -1))}}
.gnav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:38px;height:38px;border:0;cursor:pointer;font:600 24px/1 var(--fh);color:var(--t);background:#0b0912b3;
 clip-path:polygon(25% 0,100% 0,100% 75%,75% 100%,0 100%,0 25%);box-shadow:inset 0 0 0 1px var(--rose);transition:background .2s}
.gnav:hover,.gnav:focus-visible{background:var(--rose);color:#0b0912}
.gnav.prev{left:8px}.gnav.next{right:8px}
.ghint{text-align:center;color:var(--m);font:12px var(--fm);letter-spacing:.2em;text-transform:uppercase;margin:6px 0 0}
.ghint span{color:var(--rose);display:inline-block;animation:nudge 1.6s ease-in-out infinite alternate}
.ghint span:last-child{animation-direction:alternate-reverse}
@keyframes nudge{to{transform:translateX(-5px)}}
/* readable content over the photos */
.drift-zone>section>p,.drift-zone>section>h2{position:relative}
.drift-zone #about,.drift-zone #links{position:relative;isolation:isolate;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);clip-path:var(--clip);margin:24px auto;max-width:760px;padding:34px 30px}
/* pink 1px edge that follows the cut corners: pink layer + slightly inset dark panel */
.drift-zone #about,.drift-zone #links{background:#0b0912d1}
.drift-zone #links{max-width:900px}
/* pink hairline ring that follows the cut corners (evenodd: outer shape minus inner shape), nothing painted behind the panel */
.drift-zone #about::before,.drift-zone #links::before{content:"";position:absolute;inset:0;background:#e05aa8;pointer-events:none;--b:.5px;
 clip-path:polygon(evenodd,var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut),var(--cut) 0,
 calc(var(--cut) + var(--b)) var(--b),calc(var(--b)) calc(var(--cut) + var(--b)),var(--b) calc(100% - var(--b)),calc(100% - var(--cut) - var(--b)) calc(100% - var(--b)),calc(100% - var(--b)) calc(100% - var(--cut) - var(--b)),calc(100% - var(--b)) var(--b),calc(var(--cut) + var(--b)) var(--b))}
.drift-zone .links a{background:#1a1626cc}
.drift-zone h2{text-shadow:0 2px 12px #0b0912}
/* contact page (link-in-bio): one column of big tappable links */
.lt{max-width:520px;margin:0 auto;padding:48px 20px 24px;text-align:center}
.lt-avatar{width:120px;height:120px;object-fit:cover;object-position:50% 15%;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);display:block;margin:0 auto 18px}
.lt-name{font-size:clamp(30px,8vw,40px);margin:0}
.lt-bio{color:var(--teal);font:12px var(--fm);letter-spacing:.3em;margin:10px 0 28px}
.lt-links{list-style:none;padding:0;margin:0;display:grid;gap:14px}
.lt-btn{position:relative;display:flex;flex-direction:column;gap:2px;padding:16px 20px;text-decoration:none;color:var(--t);background:#15121fd1;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);clip-path:var(--clip);box-shadow:inset 0 0 0 1px var(--line2);transition:background .2s,box-shadow .2s,transform .2s}
.lt-btn b{font:600 14px var(--fh);letter-spacing:.14em;text-transform:uppercase}
.lt-btn span{color:var(--m);font:13px var(--fm)}
.lt-btn:hover,.lt-btn:focus-visible{background:#1d1830e0;box-shadow:inset 0 0 0 1px var(--rose);transform:translateY(-2px)}
.lt-btn.main{background:var(--rose);color:#0b0912;box-shadow:none}.lt-btn.main span{color:#2b0f22}
.lt-btn.main:hover,.lt-btn.main:focus-visible{background:#ea7dbb}
.lt-btn.quiet{background:transparent;backdrop-filter:none}
.lt-page .note{margin-top:22px}
/* nav link that opens another page: filled pill + arrow, unlike the in-page anchors */
nav a.nav-page{background:var(--rose);color:#0b0912;padding:4px 10px;clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px);font-weight:600}
nav a.nav-page:hover,nav a.nav-page:focus-visible{background:#ea7dbb;color:#0b0912;text-shadow:none}
nav{align-items:center}
/* free-video signup panel (same panel + pink hairline ring as About) */
#freebies{position:relative;isolation:isolate;max-width:640px;margin:24px auto;padding:34px 30px;background:#0b0912d1;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);clip-path:var(--clip)}
#freebies::before{content:"";position:absolute;inset:0;background:#e05aa8;pointer-events:none;--b:.5px;
 clip-path:polygon(evenodd,var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut),var(--cut) 0,
 calc(var(--cut) + var(--b)) var(--b),calc(var(--b)) calc(var(--cut) + var(--b)),var(--b) calc(100% - var(--b)),calc(100% - var(--cut) - var(--b)) calc(100% - var(--b)),calc(100% - var(--b)) calc(100% - var(--cut) - var(--b)),calc(100% - var(--b)) var(--b),calc(var(--cut) + var(--b)) var(--b))}
#freebies>p{color:var(--m)}
.mc-form{min-height:120px;color:var(--m);font:13px var(--fm)}
/* unlisted free-video page */
.fv-player{display:block;width:100%;max-width:360px;height:auto;aspect-ratio:9/16;margin:0 auto 26px;background:#000;clip-path:var(--clip)}
@media(min-width:760px){.hero{grid-template-columns:1fr 1fr;align-items:center}.grid{grid-template-columns:repeat(3,1fr)}.links{grid-template-columns:1fr 1fr}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}.blob,.ribbon,.ribbon .flow,.spin,.float,.gi,.ghint span{animation:none}.layer{transform:none!important}}