/* Zenon | Metamoksha — shared styles (new site) */
:root{
  --bg:#0a0807; --text:#e9e4ef; --muted:#9a91a8; --dim:#7d7589;
  --line:rgba(233,228,239,.3); --hair:rgba(233,228,239,.14);
  --ember:rgba(230,160,80,.6); /* amber glow: used as light, never as text colour */
  --glow:0 0 6px rgba(255,205,140,.9),0 0 20px rgba(245,170,80,.8),0 0 44px rgba(228,140,55,.55); /* text glow: three layers (tight, medium, wide). Make the numbers bigger for a stronger glow. */
  --serif:"Bodoni Moda","Bodoni 72",Didot,Georgia,serif;
  --sans:"Jost",system-ui,sans-serif;
  --rail:300px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;background:var(--bg);position:relative;color:var(--text);font-family:var(--sans);font-weight:300;line-height:1.6}
/* Candle-glow ground: black, with one warm amber glow low on the left. It is fixed to the screen,
   so it never gets cut by sections. To remove it, delete this rule and the @keyframes below. */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 70% 50% at 4% 105%,rgba(214,150,80,.22),transparent 70%);
  animation:ember 9s ease-in-out infinite}
@keyframes ember{0%,100%{opacity:.82}50%{opacity:1}}
@media(prefers-reduced-motion:reduce){body::before{animation:none}}
img,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none;transition:color .3s,text-shadow .4s}
a:hover{text-shadow:var(--glow)}
/* lining numerals so the zero in Tel0genesis reads as a zero */
.serif,h1,h2,h3{font-family:var(--serif);font-feature-settings:"lnum" 1;font-variant-numeric:lining-nums}
.label{font-size:10px;letter-spacing:.3em;color:var(--dim);text-transform:uppercase}

.layout{display:flex;min-height:100vh;overflow-x:clip} /* clip: the hover glow may extend past the page edge without causing a sideways scroll */
.rail{position:sticky;top:0;align-self:flex-start;height:100vh;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#3a3646 transparent;
  flex:0 0 var(--rail);padding:44px 30px;display:flex;flex-direction:column;gap:44px;border-right:1px solid var(--hair)}
.brand{font-family:var(--sans);font-size:22px;letter-spacing:.3em;line-height:1.7;font-weight:300}
.role{font-family:var(--sans);font-style:normal;font-weight:300;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);margin:14px 0 0;line-height:1.9}
.rail nav{display:flex;flex-direction:column;gap:14px}
.rail .works a{display:flex;gap:14px;align-items:baseline}
.rail .works .n{font-size:10px;letter-spacing:.2em;color:var(--dim)}
.rail .works .t{font-family:var(--serif);font-size:22px;line-height:1.2;font-feature-settings:"lnum" 1;font-optical-sizing:auto}
.rail .works a.is-current{text-shadow:var(--glow)}
.rail .works a.is-current .n{color:var(--text)}
.rail .works a.is-current .t{font-style:italic}
.rail .info a{font-size:11px;letter-spacing:.24em;text-transform:uppercase}

.main{flex:1 1 0;min-width:0;padding:44px 44px 80px}
.topbar{display:none}

/* project header row */
.proj-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.proj-head h1{flex:2 1 300px;margin:0;font-style:italic;font-weight:400;font-size:30px}
.proj-head span{font-size:11px;letter-spacing:.22em;color:var(--muted);text-transform:uppercase}
.proj-head .place{flex:1 1 200px}.proj-head .year{flex:0 1 110px}.proj-head .type{flex:0 1 240px}

.hero{margin:16px 0 0;border-radius:2px;overflow:hidden;background:#16141b}
.hero img{width:100%;height:auto}

.intro{display:flex;flex-wrap:wrap;justify-content:space-between;gap:40px;padding:28px 0 56px}
.concept{flex:1 1 420px;max-width:640px}
.concept .lede{margin:0 0 18px;font-family:var(--serif);font-size:28px;line-height:1.3;font-feature-settings:"lnum" 1}
.concept p{margin:0;font-size:15px;line-height:1.75;color:#cfc8d8}
.meta{flex:0 1 300px;font-size:12px;letter-spacing:.14em;line-height:1.8;color:var(--muted);text-transform:uppercase}
.meta .label{display:block;margin:0 0 8px}
.meta div+div{margin-top:22px}

.credits{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:32px;padding:28px 0 56px;border-top:1px solid var(--line);font-size:14px;line-height:2;color:#cfc8d8}
.credits .label{display:block;margin-bottom:12px}
.credits a{color:inherit;text-decoration:underline;text-decoration-color:rgba(207,200,216,.35);text-underline-offset:4px;transition:text-decoration-color .3s,text-shadow .3s}
.credits a:hover{text-decoration-color:currentColor;text-shadow:var(--glow)}

/* gallery */
.gallery{display:flex;flex-direction:column;gap:16px}
.row{display:grid;gap:16px}
.row.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.row.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.shot{margin:0;border-radius:2px;background:#16141b;position:relative;isolation:isolate}
.shot a{display:block;cursor:zoom-in;position:relative;overflow:hidden;border-radius:2px}
/* candlelight on hover: warm amber spills into the top-right and bottom-left corners */
.shot a::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .9s ease;mix-blend-mode:screen;
  background:
    linear-gradient(to left,rgba(245,185,115,.95),transparent 45%) top/100% 1.5px no-repeat,
    linear-gradient(to bottom,rgba(245,185,115,.95),transparent 45%) right/1.5px 100% no-repeat,
    linear-gradient(to right,rgba(245,185,115,.95),transparent 45%) bottom/100% 1.5px no-repeat,
    linear-gradient(to top,rgba(245,185,115,.95),transparent 45%) left/1.5px 100% no-repeat,
    radial-gradient(ellipse 55% 60% at 100% 0%,rgba(230,160,80,.40),transparent 65%),
    radial-gradient(ellipse 55% 60% at 0% 100%,rgba(230,160,80,.40),transparent 65%)}
.shot:hover a::after{opacity:1}
/* ...and the same light bleeds OUT past the photo's corners, sitting behind the photo */
.shot::before{content:"";position:absolute;inset:-200px;z-index:-1;pointer-events:none;opacity:0;transition:opacity .9s ease;
  background:radial-gradient(circle 200px at calc(100% - 200px) 200px,rgba(230,160,80,.42),transparent 70%),radial-gradient(circle 200px at 200px calc(100% - 200px),rgba(230,160,80,.42),transparent 70%)}
.shot:hover::before{opacity:1}
.shot img{width:100%;height:auto;transition:transform .8s ease,filter .4s}
/* pairs: a fixed landscape box; the link fills it and the photo covers it, so there is never a gap */
.row.two .shot{position:relative;aspect-ratio:3/2}
.row.two .shot a{position:absolute;inset:0}
.row.two .shot img{width:100%;height:100%;object-fit:cover}
@media(hover:hover){.shot:hover img{transform:scale(1.025)}}
/* very tall (portrait) photos are capped so one image never fills several screens */
.gallery>.shot img{max-height:88vh;object-fit:cover}
/* story video + narrative cards: centred against each other, nothing cropped */
.row.tiles{gap:16px}
.row.tiles .shot{aspect-ratio:1/1}
.row.tiles .shot a{position:absolute;inset:0;cursor:pointer}
.row.tiles .shot img{width:100%;height:100%;object-fit:cover}
.row.media-row{align-items:center}
.shot.video{aspect-ratio:9/16;background:#000}
.shot.video video{width:100%;height:100%;object-fit:contain}
.sec-label{margin:56px 0 16px;font-family:var(--sans);font-weight:300}

.proj-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px;margin-top:72px;padding-top:28px;border-top:1px solid var(--line)}
.proj-foot .docs{font-size:11px;letter-spacing:.24em;color:var(--dim);text-transform:uppercase}
.proj-foot .docs a{margin-right:20px;color:var(--muted)}
.proj-foot .docs a:hover{text-shadow:var(--glow)}
.next{font-family:var(--serif);font-style:italic;font-size:48px;line-height:1.1}

/* lightbox */
dialog.lb{border:0;padding:0;background:transparent;max-width:100vw;max-height:100vh;width:100vw;height:100vh;color:var(--text)}
dialog.lb::backdrop{background:rgba(5,4,8,.94)}
.lb-inner{display:grid;place-items:center;width:100%;height:100%;padding:24px}
.lb img{max-width:100%;max-height:calc(100vh - 48px);width:auto;height:auto;object-fit:contain}
.lb button{position:fixed;background:none;border:0;color:var(--text);font:300 11px var(--sans);letter-spacing:.3em;text-transform:uppercase;padding:16px;cursor:pointer}
.lb button:hover,.lb button:focus-visible{text-shadow:var(--glow)}
.lb .x{top:8px;right:8px}.lb .p{left:8px;top:50%}.lb .nx{right:8px;top:50%}

/* mobile: rail becomes a drawer */
@media(max-width:899px){
  .topbar{display:flex;position:sticky;top:0;z-index:30;justify-content:space-between;align-items:center;padding:14px 20px;background:var(--bg);border-bottom:1px solid var(--hair)}
  .topbar .brand{font-size:12px;letter-spacing:.34em}
  .topbar button{background:none;border:1px solid var(--hair);color:var(--text);font:300 11px var(--sans);letter-spacing:.24em;padding:10px 14px;cursor:pointer}
  .rail{position:fixed;inset:0 auto 0 0;z-index:50;width:min(86vw,320px);background:var(--bg);transform:translateX(-100%);transition:transform .3s ease;flex:none}
  body.drawer-open .rail{transform:none}
  .scrim{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:40;opacity:0;visibility:hidden;transition:opacity .3s}
  body.drawer-open .scrim{opacity:1;visibility:visible}
  .main{padding:24px 20px 64px}
  .row.four{grid-template-columns:repeat(2,minmax(0,1fr))}
  .next{font-size:36px}
}
@media(max-width:600px){.row.two{grid-template-columns:1fr}}

/* EROTICA: acts + YouTube click-to-load */
.act{margin:72px 0 24px}
.act .label{display:block;margin-bottom:10px}
.act h2{margin:0 0 16px;font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(30px,3.4vw,44px);line-height:1.15}
.act p{max-width:640px;margin:0 0 14px;font-size:15px;line-height:1.75;color:#cfc8d8}
.act a,.concept a{color:inherit;text-decoration:underline;text-decoration-color:rgba(207,200,216,.35);text-underline-offset:4px}
.act a:hover,.concept a:hover{text-decoration-color:currentColor}
.yt{position:relative;aspect-ratio:16/9;margin:0 0 16px;background:#000;border-radius:2px;overflow:hidden;isolation:isolate}
.yt a,.yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.yt img{width:100%;height:100%;object-fit:cover;transition:transform .8s ease,filter .4s;filter:brightness(.8)}
.yt a:hover img{transform:scale(1.02);filter:brightness(1)}
.yt .play{position:absolute;left:50%;top:50%;width:76px;height:76px;margin:-38px 0 0 -38px;border:1px solid rgba(255,255,255,.7);border-radius:50%;background:rgba(10,8,7,.35);backdrop-filter:blur(4px);transition:box-shadow .5s}
.yt .play::after{content:"";position:absolute;left:31px;top:24px;border-left:20px solid #fff;border-top:14px solid transparent;border-bottom:14px solid transparent}
.yt a:hover .play{box-shadow:0 0 40px var(--ember)}
.act+.yt{margin-top:0}
.act-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px 24px;flex-wrap:wrap;margin-bottom:10px}
.act-head .label{margin:0}

/* ---------- HOME ---------- */
.hero-loop{aspect-ratio:16/9;background:#07060a;border-radius:2px;overflow:hidden}
.hero-loop video{width:100%;height:100%;object-fit:cover}
.tagline{display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between;align-items:flex-end;padding:56px 0 80px;border-bottom:1px solid var(--line)}
.tagline h1{margin:0;max-width:820px;font-style:italic;font-weight:400;font-size:clamp(40px,5.6vw,64px);line-height:1.08}
.tagline .sub{margin:26px 0 0;max-width:720px;font-size:12px;letter-spacing:.26em;line-height:1.8;color:var(--muted);text-transform:uppercase}
.tagline .down{white-space:nowrap}
.work-block{padding-top:32px}
.work{display:block}
.wk-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.wk-head .ttl{flex:2 1 300px;font-family:var(--serif);font-style:italic;font-size:30px;font-feature-settings:"lnum" 1;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:7px;text-decoration-thickness:1px;transition:text-decoration-color .4s}
.work:hover .ttl{text-decoration-color:rgba(233,228,239,.7)}
.wk-head .m1,.wk-head .m2,.wk-head .m3{font-size:11px;letter-spacing:.22em;color:var(--muted);text-transform:uppercase}
.wk-head .m1{flex:1 1 200px}.wk-head .m2{flex:0 1 110px}.wk-head .m3{flex:0 1 240px}
.frame{position:relative;isolation:isolate;margin-top:16px;aspect-ratio:16/9;border-radius:2px}
.frame .clip{position:absolute;inset:0;overflow:hidden;border-radius:2px;background:#16141b}
.frame .zoom{position:absolute;inset:0;transition:transform 1.4s cubic-bezier(.2,.6,.2,1)}
.frame .zoom img{width:100%;height:100%;object-fit:cover}
.frame .clip::after{content:"";position:absolute;inset:auto 0 0 0;height:30%;background:linear-gradient(to top,rgba(7,6,10,.55),transparent);pointer-events:none}
.frame::before{content:"";position:absolute;inset:-200px;z-index:-1;pointer-events:none;opacity:0;transition:opacity .9s ease;
  background:radial-gradient(circle 200px at calc(100% - 200px) 200px,rgba(230,160,80,.42),transparent 70%),radial-gradient(circle 200px at 200px calc(100% - 200px),rgba(230,160,80,.42),transparent 70%)}
.frame .lit{position:absolute;inset:0;opacity:0;transition:opacity .9s ease;mix-blend-mode:screen;pointer-events:none;
  background:linear-gradient(to left,rgba(245,185,115,.95),transparent 45%) top/100% 1.5px no-repeat,linear-gradient(to bottom,rgba(245,185,115,.95),transparent 45%) right/1.5px 100% no-repeat,linear-gradient(to right,rgba(245,185,115,.95),transparent 45%) bottom/100% 1.5px no-repeat,linear-gradient(to top,rgba(245,185,115,.95),transparent 45%) left/1.5px 100% no-repeat,radial-gradient(ellipse 55% 60% at 100% 0%,rgba(230,160,80,.40),transparent 65%),radial-gradient(ellipse 55% 60% at 0% 100%,rgba(230,160,80,.40),transparent 65%)}
.work:hover .frame::before,.work:hover .frame .lit,.work:focus-visible .frame::before,.work:focus-visible .frame .lit{opacity:1}
@media(hover:hover){.work:hover .frame .zoom{transform:scale(1.035)}}
.frame .cue{position:absolute;right:20px;bottom:18px;z-index:2;font-size:11px;letter-spacing:.28em;text-transform:uppercase;text-shadow:0 1px 12px rgba(0,0,0,.7);opacity:.85;transition:opacity .3s,transform .3s}
.work:hover .cue{opacity:1;transform:translateX(6px)}
/* HKCR: the square cover, whole, over a blurred copy of itself */
.hk-zoom{display:grid;place-items:center;background:#08070a}
.hk-zoom .hk-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(38px) brightness(.5) saturate(1.15);transform:scale(1.3)}
.hk-zoom img.hk-cover{position:absolute;left:50%;top:28px;transform:translateX(-50%);width:auto;max-width:none;height:calc(100% - 56px);aspect-ratio:1/1;object-fit:cover;box-shadow:0 24px 70px rgba(0,0,0,.55)}
.wk-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:24px;padding:22px 0 64px}
.wk-blurb{flex:1 1 420px;max-width:560px;margin:0;font-size:15px;line-height:1.7}
.wk-role{flex:0 1 300px;margin:0;font-size:12px;letter-spacing:.14em;line-height:1.8;color:var(--muted);text-transform:uppercase}
.wk-role a{text-decoration:underline;text-decoration-color:rgba(154,145,168,.4);text-underline-offset:5px}
/* sidebar lights up while a banner is hovered */
body:has(#erotica .work:hover) .rail a[href="#erotica"],body:has(#tel0genesis .work:hover) .rail a[href="#tel0genesis"],body:has(#chrysalis .work:hover) .rail a[href="#chrysalis"],body:has(#perverted-prayer .work:hover) .rail a[href="#perverted-prayer"],body:has(#hkcr .work:hover) .rail a[href="#hkcr"]{text-shadow:var(--glow)}
/* press */
.press{padding:32px 0 56px;border-top:1px solid var(--line)}
.press-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px}
.press-stage{margin-top:40px;display:grid;gap:64px}
.press-item{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:22px}
.press-stage.live{display:block;position:relative;height:340px}
.press-stage.live .press-item{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .9s ease}
.press-stage.live .press-item.is-on{opacity:1;pointer-events:auto}
.press-item .pr{font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--muted);transition:color .3s,text-shadow .4s}
.press-item .pr::after{content:"";position:absolute;inset:0}
.press-item .pr.plain::after{display:none}
.press-item:hover .pr{color:var(--text);text-shadow:var(--glow)}
.press-item .pn{font-family:var(--serif);font-size:clamp(34px,6vw,80px);letter-spacing:.04em;line-height:1}
.press-item .pt{font-family:var(--serif);font-style:italic;font-size:clamp(19px,2.2vw,26px);max-width:760px;line-height:1.3;color:#cfc8d8}
.press-dots{display:flex;justify-content:center;gap:4px}
.press-dots button{display:flex;align-items:center;width:40px;height:44px;padding:0;border:0;background:transparent;cursor:pointer}
.press-dots button span{display:block;width:100%;height:1px;background:#4a4655;transition:background .4s}
.press-dots button[aria-current="true"] span{background:var(--text)}
/* about + contact */
.about,.contact{display:flex;flex-wrap:wrap;gap:40px;padding:32px 0 72px;border-top:1px solid var(--line)}
.about>.label,.contact>.label{flex:0 1 200px}
.about-body{flex:1 1 460px;max-width:700px}
.about-body p{margin:0 0 18px;font-size:16px;line-height:1.85;color:#cfc8d8}
.about-body p.about-lede{margin:0 0 28px;font-family:var(--serif);font-size:clamp(22px,2.4vw,28px);line-height:1.4;color:var(--text)}
.about-body .featured{margin:36px 0 0;padding-top:20px;border-top:1px solid var(--hair);letter-spacing:.24em;color:var(--muted)}
.contact{padding-bottom:32px}
.contact-body{flex:1 1 460px}
.contact-lede{margin:0;font-family:var(--serif);font-style:italic;font-size:clamp(34px,4.6vw,56px);line-height:1.1}
.contact-sub{margin:14px 0 0;font-size:15px;color:var(--muted)}
.cta{display:inline-flex;align-items:center;gap:14px;margin-top:28px;padding:18px 30px;border:1px solid rgba(233,228,239,.55);font-size:12px;letter-spacing:.3em;text-transform:uppercase;transition:border-color .4s,box-shadow .6s,background .4s}
.cta span{transition:transform .3s}
.cta:hover,.cta:focus-visible{border-color:var(--text);background:rgba(233,228,239,.04);box-shadow:0 0 44px rgba(230,160,80,.4);text-shadow:none}
.cta:hover span{transform:translateX(6px)}
.contact-mail{margin:20px 0 0;font-family:var(--serif);font-style:italic;font-size:clamp(18px,2vw,24px);color:#cfc8d8}
.contact-mail a{text-decoration:underline;text-decoration-color:rgba(207,200,216,.3);text-underline-offset:6px}
@media(max-width:899px){
  .work-block,.press,.about,.contact{scroll-margin-top:60px}
  .tagline{padding:40px 0 56px}
  .wk-head .ttl{font-size:26px}
  .press-stage.live{height:420px}
  .frame .cue{right:14px;bottom:12px}
}
.contact-text{margin:20px 0 0;max-width:600px;font-size:16px;line-height:1.8;color:#cfc8d8}
.contact-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}
.contact-actions .cta{margin-top:0}
.cta.ghost{border-color:var(--hair);color:var(--muted)}
.cta.ghost:hover,.cta.ghost:focus-visible{color:var(--text)}
@media(max-width:600px){.cta{letter-spacing:.2em;padding:16px 22px}}
/* phones: the HKCR banner is just the square poster, full width */
@media(max-width:600px){
  .work.hk .frame{aspect-ratio:1/1}
  .hk-zoom .hk-bg{display:none}
  .hk-zoom img.hk-cover{left:0;top:0;transform:none;width:100%;height:100%;aspect-ratio:auto;box-shadow:none}
}