/* ══════════════════════════════════════════════════
   LAID BY BEEBAH — stylesheet
   Palette: obsidian / plum / violet→magenta / gold
   ══════════════════════════════════════════════════ */

:root{
  --ink:        #08060B;
  --ink-2:      #0F0A17;
  --plum:       #1A0E24;
  --plum-soft:  #241435;

  --violet:     #7B2FF7;
  --magenta:    #E0409F;
  --lilac:      #C79BFF;
  --gold:       #D9A441;
  --gold-soft:  #F0D9A8;

  --cream:      #F7F2EC;
  --mute:       #A69BB4;
  --mute-2:     #6F6480;
  --hair:       rgba(255,255,255,.10);

  --grad:       linear-gradient(120deg, var(--violet), var(--magenta) 55%, var(--gold));
  --grad-soft:  linear-gradient(120deg, rgba(123,47,247,.22), rgba(224,64,159,.18));

  --serif: "Fraunces", "Playfair Display", Georgia, "Times New Roman", serif;
  --sans:  "Outfit", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --ease:  cubic-bezier(.19,1,.22,1);
  --ease-2:cubic-bezier(.65,0,.35,1);

  --pad: clamp(1.25rem, 5vw, 5rem);
  --maxw: 1360px;
}

/* ────────── LIGHT THEME VARIABLES ────────── */
:root[data-theme="light"]{
  --ink:        #FBF7F2;
  --ink-2:      #F2EAE2;
  --plum:       #F0E6F4;
  --plum-soft:  #E6D8EF;

  --violet:     #7B2FF7;
  --magenta:    #C81E8A;
  --lilac:      #6F35C8;
  --gold:       #B07C22;
  --gold-soft:  #8A6320;

  --cream:      #1C1524;
  --mute:       #5A5066;
  --mute-2:     #8C8196;
  --hair:       rgba(28,21,36,.12);

  --grad:       linear-gradient(120deg, var(--violet), var(--magenta) 55%, var(--gold));
  --grad-soft:  linear-gradient(120deg, rgba(123,47,247,.10), rgba(200,30,138,.09));
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
html.lb-open, html.menu-open{ overflow:hidden; }

body{
  background:var(--ink);
  color:var(--cream);
  font-family:var(--sans);
  font-weight:300;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
::selection{ background:var(--magenta); color:#fff; }

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }

/* ────────── shared type ────────── */
.eyebrow{
  font-size:.7rem; letter-spacing:.34em; text-transform:uppercase;
  font-weight:500; color:var(--mute);
  display:flex; align-items:center; gap:.9rem;
}
.eyebrow::after{
  content:""; flex:1; height:1px; max-width:120px;
  background:linear-gradient(90deg,var(--hair),transparent);
}

.h2{
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(2.4rem, 6.5vw, 5rem);
  line-height:1.02;
  letter-spacing:-.025em;
  margin:.6rem 0 0;
}
.h2 em{
  font-style:italic;
  background:var(--grad);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}

.lead{ font-size:clamp(1.05rem,1.6vw,1.3rem); color:#DED6E6; margin-top:1.6rem; }
.body{ color:var(--mute); margin-top:1.1rem; max-width:60ch; }
.body strong{ color:var(--gold-soft); font-weight:400; }

.sec-head{ margin-bottom:clamp(2.5rem,6vw,5rem); }
.sec-head__note{ color:var(--mute); margin-top:1rem; }

/* ══════════ PRELOADER ══════════ */
.preloader{
  position:fixed; inset:0; z-index:9999;
  display:grid; place-items:center;
  background:var(--ink);
}
.preloader__inner{ text-align:center; transition:opacity .5s ease, transform .6s var(--ease); }
.preloader__mark{ position:relative; width:120px; height:120px; margin:0 auto 1.6rem; display:grid; place-items:center; }
.preloader__b{
  font-family:var(--serif); font-size:3.2rem; font-style:italic;
  background:var(--grad); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.preloader__ring{ position:absolute; inset:0; transform:rotate(-90deg); }
.preloader__ring circle{ fill:none; stroke-width:1.5; }
.preloader__ring-track{ stroke:rgba(255,255,255,.08); }
.preloader__ring-fill{
  stroke:var(--lilac);
  stroke-dasharray:339; stroke-dashoffset:339;
  transition:stroke-dashoffset .25s linear;
}
.preloader__word{
  font-family:var(--serif); font-size:1.1rem; letter-spacing:.3em;
  text-transform:uppercase; color:var(--cream); opacity:.85;
}
.preloader__count{ margin-top:.7rem; font-size:.75rem; letter-spacing:.25em; color:var(--mute-2); }
.preloader__count i{ font-style:normal; }
.preloader__curtain{
  position:absolute; inset:0; background:var(--ink);
  transform:translateY(100%);
}
.preloader.done .preloader__inner{ opacity:0; transform:translateY(-18px); }
.preloader.done{ transition:transform 1s var(--ease) .25s; transform:translateY(-100%); }

/* ══════════ AMBIENT ══════════ */
.noise{
  position:fixed; inset:0; z-index:120; pointer-events:none; opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
.orbs{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.orb{ position:absolute; border-radius:50%; filter:blur(90px); opacity:.30; }
.orb--1{ width:44vw; height:44vw; background:var(--violet);  top:-12%; left:-10%;  animation:drift 26s var(--ease-2) infinite alternate; }
.orb--2{ width:38vw; height:38vw; background:var(--magenta); top:38%;  right:-12%; animation:drift 32s var(--ease-2) infinite alternate-reverse; }
.orb--3{ width:30vw; height:30vw; background:var(--gold); opacity:.13; bottom:-8%; left:26%; animation:drift 38s var(--ease-2) infinite alternate; }
@keyframes drift{ to{ transform:translate3d(6vw,-5vh,0) scale(1.18); } }

.scrollbar{ position:fixed; top:0; left:0; right:0; height:2px; z-index:200; background:rgba(255,255,255,.05); }
.scrollbar span{ display:block; height:100%; width:0; background:var(--grad); }

/* custom cursor (desktop only, enabled by JS) */
.cursor{ display:none; }
body.has-cursor .cursor{
  display:grid; place-items:center;
  position:fixed; top:0; left:0; z-index:9998; pointer-events:none;
  width:34px; height:34px; margin:-17px 0 0 -17px; border-radius:50%;
  border:1px solid rgba(255,255,255,.35);
  transition:width .3s var(--ease), height .3s var(--ease), margin .3s var(--ease),
             background-color .3s var(--ease), border-color .3s var(--ease);
}
.cursor__dot{ width:4px; height:4px; border-radius:50%; background:var(--cream); transition:opacity .2s; }
.cursor__label{
  position:absolute; font-size:.58rem; letter-spacing:.18em; text-transform:uppercase;
  color:#0a0710; opacity:0; font-weight:500;
}
body.has-cursor .cursor.is-active{
  width:82px; height:82px; margin:-41px 0 0 -41px;
  background:var(--lilac); border-color:transparent;
}
.cursor.is-active .cursor__dot{ opacity:0; }
.cursor.is-active .cursor__label{ opacity:1; }

/* ══════════ NAV ══════════ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:150;
  display:flex; align-items:center; justify-content:space-between;
  gap:2rem; padding:1.3rem var(--pad);
  transition:transform .55s var(--ease), background-color .4s ease, backdrop-filter .4s ease, padding .4s ease;
}
.nav.is-stuck{
  background:rgba(8,6,11,.72);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom:1px solid var(--hair);
  padding-block:.85rem;
}
.nav.is-hidden{ transform:translateY(-110%); }

.nav__brand{ display:flex; align-items:center; gap:.7rem; }
.nav__brand-mark{
  width:34px; height:34px; display:grid; place-items:center; border-radius:10px;
  background:var(--grad); color:#fff; font-family:var(--serif); font-style:italic; font-size:1.15rem;
  box-shadow:0 6px 22px -8px var(--magenta);
}
.nav__brand-text{ font-family:var(--serif); font-size:1.02rem; letter-spacing:.02em; }
.nav__brand-text em{ font-style:italic; color:var(--lilac); }

.nav__links{ display:flex; align-items:center; gap:2.1rem; }
.nav__links a{
  font-size:.82rem; letter-spacing:.1em; text-transform:uppercase; color:var(--mute);
  position:relative; white-space:nowrap; transition:color .3s;
}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:-6px; width:0; height:1px;
  background:var(--grad); transition:width .4s var(--ease);
}
.nav__links a:hover{ color:var(--cream); }
.nav__links a:hover::after{ width:100%; }

.nav__cta{
  padding:.6rem 1.3rem; border-radius:999px; border:1px solid rgba(199,155,255,.4);
  color:var(--cream) !important; background:rgba(199,155,255,.07);
  transition:background-color .35s, border-color .35s, transform .35s var(--ease);
}
.nav__cta::after{ display:none; }
.nav__cta:hover{ background:var(--grad); border-color:transparent; }

.nav__burger{ display:none; width:34px; height:34px; position:relative; }
.nav__burger span{
  position:absolute; left:6px; right:6px; height:1.5px; background:var(--cream);
  transition:transform .4s var(--ease), opacity .3s;
}
.nav__burger span:nth-child(1){ top:13px; }
.nav__burger span:nth-child(2){ top:20px; }
.nav.menu-open .nav__burger span:nth-child(1){ transform:translateY(3.5px) rotate(45deg); }
.nav.menu-open .nav__burger span:nth-child(2){ transform:translateY(-3.5px) rotate(-45deg); }

/* ────────── THEME TOGGLE ────────── */
.nav__theme{
  position:relative; width:38px; height:38px; flex:0 0 auto;
  display:grid; place-items:center; border-radius:50%;
  border:1px solid var(--hair); color:var(--cream);
  background:transparent;
  transition:border-color .35s, transform .35s var(--ease), color .35s;
}
.nav__theme:hover{ border-color:var(--lilac); transform:rotate(14deg); }
.nav__theme svg{
  position:absolute; width:18px; height:18px;
  fill:none; stroke:currentColor; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round;
  transition:opacity .35s ease, transform .45s var(--ease);
}
.nav__theme .icon-moon{ opacity:1; transform:rotate(0) scale(1); }
.nav__theme .icon-sun{ opacity:0; transform:rotate(-90deg) scale(.4); }
:root[data-theme="light"] .nav__theme .icon-moon{ opacity:0; transform:rotate(90deg) scale(.4); }
:root[data-theme="light"] .nav__theme .icon-sun{ opacity:1; transform:rotate(0) scale(1); }

/* ══════════ HERO ══════════ */
.hero{
  position:relative; z-index:1;
  min-height:100svh; display:flex; align-items:flex-end;
  padding:0 var(--pad) clamp(3rem,7vh,6rem);
  overflow:hidden;
}
.hero__bg{ position:absolute; inset:-12% 0; z-index:-2; will-change:transform; }
.hero__bg img{ width:100%; height:100%; object-fit:cover; object-position:52% 28%; filter:saturate(1.08) brightness(1.16) contrast(.96); }
.hero__veil{
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(to top, var(--ink) 0%, rgba(0,0,0,0) 44%),
    radial-gradient(130% 80% at 72% 12%, rgba(255,255,255,.22), transparent 62%);
}

.hero__content{ position:relative; width:100%; max-width:var(--maxw); margin-inline:auto; }

.hero__eyebrow{
  display:flex; align-items:center; gap:1rem;
  font-size:.68rem; letter-spacing:.32em; text-transform:uppercase; color:var(--lilac);
  margin-bottom:1.8rem;
  text-shadow:0 1px 14px rgba(0,0,0,.30);
}
.hero__eyebrow-line{ width:52px; height:1px; background:var(--lilac); opacity:.6; }

.hero__title{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(2.9rem, 10.5vw, 9.5rem);
  line-height:.92; letter-spacing:-.04em;
  text-shadow:0 3px 34px rgba(0,0,0,.28);
}
.line{ display:block; overflow:hidden; padding-bottom:.09em; margin-bottom:-.09em; }
.line__in{ display:inline-block; }
.line--italic{
  padding-right:.16em; margin-right:-.02em;
  font-style:italic;
  background:var(--grad); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.line--outline{
  color:transparent;
  -webkit-text-stroke:1px rgba(247,242,236,.55);
}

.hero__sub{ margin-top:1.9rem; max-width:46ch; color:#D6CDE0; font-size:clamp(1rem,1.5vw,1.18rem); text-shadow:0 1px 18px rgba(0,0,0,.30); }

.hero__actions{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:2.4rem; }

.btn{
  display:inline-flex; align-items:center; gap:.7rem;
  padding:1rem 1.9rem; border-radius:999px;
  font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; font-weight:500;
  position:relative; overflow:hidden; will-change:transform;
  transition:transform .4s var(--ease), color .35s;
}
.btn svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; transition:transform .4s var(--ease); }
.btn:hover svg{ transform:translateX(5px); }
.btn--solid{ background:var(--grad); color:#fff; box-shadow:0 18px 44px -18px var(--magenta); }
.btn--solid::before{
  content:""; position:absolute; inset:0; background:var(--cream);
  transform:translateY(101%); transition:transform .5s var(--ease); z-index:-1;
}
.btn--solid:hover{ color:var(--ink); }
.btn--solid:hover::before{ transform:translateY(0); }
.btn--solid span,.btn--solid svg{ position:relative; z-index:1; }
.btn--ghost{ border:1px solid var(--hair); color:var(--cream); }
.btn--ghost:hover{ border-color:var(--lilac); background:rgba(199,155,255,.08); }

.hero__strip{
  display:flex; flex-wrap:wrap; gap:clamp(1.6rem,5vw,4rem);
  margin-top:3.4rem; padding-top:1.9rem; border-top:1px solid var(--hair);
}
.hero__strip div{ display:flex; flex-direction:column; gap:.25rem; }
.hero__strip b{ font-family:var(--serif); font-size:2rem; font-weight:400; line-height:1; color:var(--gold-soft); }
.hero__strip b i{ font-style:normal; font-size:1.1rem; }
.hero__strip span{ font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--mute-2); }

.hero__scroll{
  position:absolute; right:var(--pad); bottom:clamp(3rem,7vh,6rem);
  display:flex; flex-direction:column; align-items:center; gap:.8rem;
}
.hero__scroll-line{ width:1px; height:64px; background:linear-gradient(var(--lilac),transparent); position:relative; overflow:hidden; }
.hero__scroll-line::after{ content:""; position:absolute; top:-64px; left:0; width:1px; height:64px; background:var(--cream); animation:trickle 2.2s var(--ease-2) infinite; }
@keyframes trickle{ to{ top:64px; } }
.hero__scroll-text{ font-size:.6rem; letter-spacing:.28em; text-transform:uppercase; color:var(--mute-2); writing-mode:vertical-rl; }

/* ══════════ MARQUEE ══════════ */
.marquee{
  position:relative; z-index:1;
  border-block:1px solid var(--hair);
  background:var(--ink-2);
  padding:1.5rem 0; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.marquee__track{ display:flex; align-items:center; gap:2.6rem; width:max-content; animation:slide 34s linear infinite; }
.marquee span{ font-family:var(--serif); font-size:clamp(1.3rem,2.6vw,2.1rem); font-style:italic; color:rgba(247,242,236,.72); white-space:nowrap; }
.marquee b{ color:var(--magenta); font-size:.9rem; }
@keyframes slide{ to{ transform:translateX(-50%); } }

/* ══════════ SECTION SHELL ══════════ */
.about,.ethos,.craft,.creds,.contact{ position:relative; z-index:1; padding-block:clamp(5rem,12vw,10rem); }

/* ══════════ ABOUT ══════════ */
.about__grid{ display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(2.5rem,7vw,6rem); align-items:center; }

.about__media{ position:relative; }
.about__frame{
  position:relative; border-radius:6px; overflow:hidden;
  aspect-ratio:4/5; transform-style:preserve-3d;
  box-shadow:0 50px 90px -50px #000;
}
.about__frame img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease); }
.about__frame:hover img{ transform:scale(1.05); }
.about__frame-glow{ position:absolute; inset:0; background:var(--grad-soft); mix-blend-mode:overlay; pointer-events:none; }

.about__badge{
  position:absolute; right:-14px; bottom:-22px;
  background:var(--plum); border:1px solid var(--hair); border-radius:4px;
  padding:1rem 1.4rem; text-align:right;
  box-shadow:0 24px 50px -24px #000;
}
.about__badge span{ display:block; font-size:.62rem; letter-spacing:.22em; text-transform:uppercase; color:var(--mute-2); }
.about__badge b{ font-family:var(--serif); font-style:italic; font-weight:400; font-size:1.1rem; color:var(--gold-soft); }

.about__facts{ list-style:none; margin-top:2.6rem; display:grid; gap:0; border-top:1px solid var(--hair); }
.about__facts li{
  display:grid; grid-template-columns:130px 1fr; gap:1.4rem; align-items:baseline;
  padding:1rem 0; border-bottom:1px solid var(--hair);
}
.about__facts b{ font-size:.66rem; letter-spacing:.22em; text-transform:uppercase; color:var(--mute-2); font-weight:500; }
.about__facts span{ color:#DED6E6; font-size:.95rem; }

/* ══════════ ETHOS ══════════ */
.ethos__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.2rem,3vw,2.2rem); margin-top:2.6rem; }
.ethos__card{
  position:relative; padding:clamp(2rem,4vw,3.2rem);
  border:1px solid var(--hair); border-radius:6px;
  background:linear-gradient(160deg, rgba(36,20,53,.75), rgba(15,10,23,.65));
  overflow:hidden; transform-style:preserve-3d;
}
.ethos__card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:var(--grad); transform:scaleX(0); transform-origin:left;
  transition:transform .8s var(--ease);
}
.ethos__card:hover::before{ transform:scaleX(1); }
.ethos__num{
  display:inline-block; font-family:var(--serif); font-style:italic; font-size:1.6rem;
  color:var(--lilac); margin-bottom:1.4rem;
}
.ethos__card--alt .ethos__num{ color:var(--gold); }
.ethos__card p{ color:var(--mute); }
.ethos__tail{ margin-top:1.2rem; color:var(--cream) !important; font-family:var(--serif); font-style:italic; font-size:1.05rem; }

/* ══════════ CRAFT ══════════ */
.craft__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,2.2vw,1.8rem); }
.card{
  position:relative; padding:clamp(1.8rem,3vw,2.6rem);
  border:1px solid var(--hair); border-radius:6px;
  background:rgba(15,10,23,.55); overflow:hidden;
  transform-style:preserve-3d;
  transition:border-color .45s, background-color .45s, transform .5s var(--ease);
}
.card::after{
  content:""; position:absolute; inset:0; opacity:0;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%), rgba(199,155,255,.13), transparent 62%);
  transition:opacity .45s; pointer-events:none;
}
.card:hover{ border-color:rgba(199,155,255,.34); background:rgba(36,20,53,.5); }
.card:hover::after{ opacity:1; }
.card__idx{
  font-family:var(--serif); font-size:.8rem; letter-spacing:.2em; color:var(--mute-2);
  display:block; margin-bottom:1.6rem;
}
.card h3{ font-family:var(--serif); font-weight:400; font-size:1.5rem; letter-spacing:-.01em; }
.card p{ color:var(--mute); font-size:.94rem; margin-top:.8rem; }

/* ══════════ WORK (horizontal) ══════════ */
.work{ position:relative; z-index:1; height:520vh; }
.work__sticky{
  position:sticky; top:0; height:100svh;
  display:flex; flex-direction:column; justify-content:center; gap:2.2rem;
  overflow:hidden; padding-block:clamp(4rem,9vh,7rem) 3rem;
}
.work__head{ padding-inline:var(--pad); max-width:var(--maxw); margin-inline:auto; width:100%; }
.work__hint{ margin-top:1rem; font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--mute-2); display:flex; align-items:center; gap:.6rem; }
.work__hint-arrow{ color:var(--lilac); animation:nudge 1.8s var(--ease-2) infinite; }
@keyframes nudge{ 50%{ transform:translateX(7px); } }

.work__rail{
  display:flex; align-items:center; gap:clamp(1rem,2.4vw,2rem);
  padding-inline:var(--pad); width:max-content;
  will-change:transform;
}
.shot{
  position:relative; flex:0 0 auto;
  width:clamp(230px, 27vw, 380px); height:clamp(330px, 52vh, 500px);
  border-radius:5px; overflow:hidden; cursor:pointer;
  background:var(--plum);
}
.shot--tall{ height:clamp(390px, 64vh, 610px); }
.shot img{
  width:100%; height:100%; object-fit:cover;
  filter:saturate(.82) brightness(.9);
  transition:transform 1.1s var(--ease), filter .6s ease;
}
.shot:hover img{ transform:scale(1.07); filter:saturate(1) brightness(1); }
.shot::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top, rgba(8,6,11,.92), rgba(8,6,11,.05) 52%);
}
.shot figcaption{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:1.4rem; display:flex; flex-direction:column; gap:.25rem;
  transform:translateY(10px); opacity:.88; transition:transform .55s var(--ease), opacity .45s;
}
.shot:hover figcaption{ transform:translateY(0); opacity:1; }
.shot figcaption b{ font-family:var(--serif); font-weight:400; font-size:1.22rem; }
.shot figcaption span{ font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; color:var(--lilac); }

.work__progress{ margin-inline:var(--pad); height:1px; background:var(--hair); max-width:var(--maxw); }
.work__progress span{ display:block; height:100%; width:0; background:var(--grad); }

/* ══════════ REELS ══════════ */
.reels{ position:relative; z-index:1; padding-block:clamp(4rem,10vw,8rem); }
.reels__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,2.4vw,2rem); }

.reel{ transform-style:preserve-3d; }
.reel__frame{
  position:relative; border-radius:6px; overflow:hidden;
  aspect-ratio:9/16; background:var(--plum);
  border:1px solid var(--hair);
  box-shadow:0 40px 80px -50px #000;
  transition:border-color .45s;
}
.reel:hover .reel__frame{ border-color:rgba(199,155,255,.36); }
.reel__video{
  width:100%; height:100%; object-fit:cover; display:block;
  filter:saturate(.9) brightness(.94);
  transition:filter .6s ease;
}
.reel__frame.is-playing .reel__video{ filter:none; }

.reel__play{
  position:absolute; inset:0; z-index:2;
  display:grid; place-items:center;
  background:linear-gradient(to top, rgba(8,6,11,.62), rgba(8,6,11,.12) 60%);
  transition:opacity .4s ease, background-color .4s ease;
}
.reel__play svg{
  width:26px; height:26px; fill:var(--ink); stroke:none;
  translate:2px 0;
}
.reel__play::before{
  content:""; position:absolute;
  width:62px; height:62px; border-radius:50%;
  background:var(--grad);
  box-shadow:0 14px 40px -10px rgba(224,64,159,.6);
  transition:transform .5s var(--ease);
}
.reel__play svg{ position:relative; z-index:1; }
.reel:hover .reel__play::before{ transform:scale(1.09); }
.reel__frame.is-playing .reel__play{ opacity:0; pointer-events:none; }

.reel__sound{
  position:absolute; z-index:3; left:.8rem; bottom:.8rem;
  font-size:.58rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--cream); background:rgba(8,6,11,.62);
  border:1px solid var(--hair); border-radius:100px;
  padding:.4rem .8rem; backdrop-filter:blur(8px);
  opacity:0; transition:opacity .4s ease;
}
.reel__frame.is-playing .reel__sound{ opacity:1; }
.reel__frame.is-unmuted .reel__sound{ opacity:0; }

.reel figcaption{ padding:1.1rem .2rem 0; display:flex; flex-direction:column; gap:.3rem; }
.reel figcaption b{ font-family:var(--serif); font-weight:400; font-size:1.15rem; }
.reel figcaption span{ font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color:var(--lilac); }

.reels__more{ margin-top:clamp(2.4rem,5vw,3.6rem); text-align:center; }
.reels__more-note{ color:var(--mute); font-size:.95rem; }
.reels__more-links{
  margin-top:1.4rem; display:flex; flex-wrap:wrap; gap:.9rem;
  align-items:center; justify-content:center;
}

/* ══════════ CREDENTIALS ══════════ */
.creds__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,2.4vw,2rem); }
.cred{
  border:1px solid var(--hair); border-radius:6px; overflow:hidden;
  background:var(--ink-2); cursor:pointer; transform-style:preserve-3d;
  transition:border-color .45s, transform .5s var(--ease);
}
.cred:hover{ border-color:rgba(217,164,65,.42); }
.cred img{ width:100%; aspect-ratio:16/10; object-fit:cover; object-position:center; filter:saturate(.9); transition:transform .9s var(--ease); }
.cred:hover img{ transform:scale(1.04); }
.cred figcaption{ padding:1.3rem 1.4rem 1.5rem; display:flex; flex-direction:column; gap:.35rem; }
.cred figcaption b{ font-family:var(--serif); font-weight:400; font-size:1.12rem; }
.cred figcaption span{ font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; color:var(--mute-2); }

.cred__doc{
  margin-top:.7rem; align-self:flex-start;
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.64rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--gold-soft); border-bottom:1px solid rgba(217,164,65,.32);
  padding-bottom:.25rem;
  transition:color .35s, border-color .35s, gap .35s var(--ease);
}
.cred__doc svg{ width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.cred__doc:hover{ color:var(--cream); border-color:var(--gold); gap:.8rem; }

/* ══════════ CONTACT ══════════ */
.contact{ overflow:hidden; }
.contact__glow{
  position:absolute; left:50%; top:8%; translate:-50% 0;
  width:70vw; height:70vw; max-width:900px; max-height:900px;
  background:radial-gradient(circle, rgba(123,47,247,.20), transparent 62%);
  pointer-events:none;
}
.contact .wrap{ position:relative; z-index:1; }
.contact__title{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(2.6rem,9vw,7.5rem); line-height:.95; letter-spacing:-.035em;
  margin-top:.8rem;
}
.contact__note{ margin-top:2rem; max-width:56ch; color:var(--mute); font-size:clamp(1rem,1.5vw,1.15rem); }

.contact__rows{ margin-top:clamp(2.6rem,6vw,4.5rem); border-top:1px solid var(--hair); }
.crow{
  display:grid; grid-template-columns:170px 1fr 40px; gap:1.5rem; align-items:center;
  padding:1.5rem .4rem; border-bottom:1px solid var(--hair);
  position:relative; transition:padding-left .5s var(--ease);
}
.crow::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:var(--grad-soft); transform:scaleX(0); transform-origin:left;
  transition:transform .6s var(--ease);
}
a.crow:hover{ padding-left:1.5rem; }
a.crow:hover::before{ transform:scaleX(1); }
.crow__k{ font-size:.66rem; letter-spacing:.24em; text-transform:uppercase; color:var(--mute-2); }
.crow__v{ font-family:var(--serif); font-size:clamp(1.05rem,2.4vw,1.65rem); font-weight:400; }
.crow__go{ text-align:right; color:var(--lilac); transition:transform .5s var(--ease); }
a.crow:hover .crow__go{ transform:translateX(7px); }
.crow--static{ opacity:.72; }
.crow--static .crow__go{ color:var(--gold); }

/* ══════════ FOOTER ══════════ */
.foot{ position:relative; z-index:1; border-top:1px solid var(--hair); padding-block:clamp(3rem,6vw,5rem); background:var(--ink-2); }
.foot__in{ display:flex; flex-direction:column; align-items:center; gap:.8rem; text-align:center; }
.foot__mark{ font-family:var(--serif); font-size:clamp(1.6rem,4vw,2.4rem); letter-spacing:.02em; }
.foot__mark em{ font-style:italic; background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
.foot__tag{ font-family:var(--serif); font-style:italic; color:var(--mute); }
.foot__meta{ font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--mute-2); margin-top:.8rem; }

/* ══════════ LIGHTBOX ══════════ */
.lightbox{
  position:fixed; inset:0; z-index:9990;
  display:grid; place-items:center; padding:clamp(1rem,5vw,4rem);
  background:rgba(6,4,9,.94); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  opacity:0; transition:opacity .4s ease;
}
.lightbox[hidden]{ display:none; }
.lightbox.is-open{ opacity:1; }
.lightbox__fig{ max-width:min(1100px,92vw); text-align:center; }
.lightbox__fig img{
  max-height:78svh; width:auto; margin-inline:auto; border-radius:4px;
  box-shadow:0 40px 100px -40px #000;
  transform:scale(.96); opacity:0; transition:transform .5s var(--ease), opacity .4s ease;
}
.lightbox.is-open .lightbox__fig img{ transform:scale(1); opacity:1; }
.lightbox__fig figcaption{ margin-top:1.2rem; font-family:var(--serif); font-style:italic; color:var(--mute); }
.lightbox__close{ position:absolute; top:1.4rem; right:1.6rem; font-size:1.3rem; color:var(--mute); transition:color .3s, transform .3s; }
.lightbox__close:hover{ color:var(--cream); transform:rotate(90deg); }
.lightbox__nav{
  position:absolute; top:50%; translate:0 -50%;
  width:52px; height:52px; border-radius:50%; border:1px solid var(--hair);
  font-size:1.7rem; line-height:0; color:var(--cream);
  transition:background-color .3s, border-color .3s;
}
.lightbox__nav:hover{ background:rgba(199,155,255,.14); border-color:var(--lilac); }
.lightbox__nav--prev{ left:clamp(.6rem,3vw,2.4rem); }
.lightbox__nav--next{ right:clamp(.6rem,3vw,2.4rem); }

/* ══════════ REVEAL ══════════ */
.reveal{ opacity:0; transform:translateY(30px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }

.line__in{ transform:translateY(105%); transition:transform 1.05s var(--ease); }
.line__in.is-in{ transform:translateY(0); }

/* ══════════ RESPONSIVE ══════════ */
@media (max-width:1080px){
  .craft__grid{ grid-template-columns:repeat(2,1fr); }
  .creds__grid{ grid-template-columns:1fr 1fr; }
  .about__grid{ grid-template-columns:1fr; }
  .about__media{ max-width:440px; }
  .ethos__grid{ grid-template-columns:1fr; }
}

@media (max-width:900px){
  .reels__grid{ grid-template-columns:1fr 1fr; }
  .reels__grid .reel:last-child{ grid-column:1/-1; max-width:min(360px,80vw); margin-inline:auto; }
}

@media (max-width:760px){
  .nav__burger{ display:block; }
  .nav__links{
    position:fixed; inset:0; z-index:-1;
    flex-direction:column; justify-content:center; gap:2.2rem;
    background:rgba(8,6,11,.97); backdrop-filter:blur(20px);
    opacity:0; pointer-events:none; transition:opacity .45s var(--ease);
  }
  .nav.menu-open .nav__links{ opacity:1; pointer-events:auto; }
  .nav__links a{ font-size:1.5rem; font-family:var(--serif); text-transform:none; letter-spacing:0; color:var(--cream); }
  .nav__cta{ font-size:.9rem !important; padding:.8rem 2rem; }

  .hero{ align-items:center; padding-block:7rem 5rem; }
  .hero__scroll{ display:none; }
  .hero__strip{ gap:1.6rem 2.2rem; }
  .hero__strip b{ font-size:1.6rem; }

  .craft__grid,.creds__grid{ grid-template-columns:1fr; }

  /* horizontal gallery → native swipe */
  .work{ height:auto; }
  .work__sticky{ position:static; height:auto; padding-block:clamp(4rem,10vw,6rem); }
  .work__rail{
    transform:none !important;
    overflow-x:auto; width:100%;
    scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
    padding-bottom:1rem;
  }
  .work__rail::-webkit-scrollbar{ height:2px; }
  .work__rail::-webkit-scrollbar-thumb{ background:var(--lilac); }
  .shot{ scroll-snap-align:center; width:74vw; height:60svh; }
  .shot--tall{ height:60svh; }
  .work__progress{ display:none; }

  .reels__grid{ grid-template-columns:1fr; max-width:400px; margin-inline:auto; }
  .reels__grid .reel:last-child{ grid-column:auto; max-width:none; }
  .reels__more-links{ flex-direction:column; align-items:stretch; }
  .reels__more-links .btn{ justify-content:center; }
  .reel__sound{ opacity:1; }

  .crow{ grid-template-columns:1fr 30px; gap:.3rem 1rem; }
  .crow__k{ grid-column:1/-1; }
  .about__facts li{ grid-template-columns:1fr; gap:.3rem; }
  .about__badge{ right:0; }
}

@media (hover:none){
  .cursor{ display:none !important; }
}

/* ══════════ REDUCED MOTION ══════════ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
  .reveal{ opacity:1; transform:none; }
  .line__in{ transform:none; }
  .work{ height:auto; }
  .work__sticky{ position:static; height:auto; }
  .work__rail{ transform:none !important; overflow-x:auto; width:100%; }
}

/* ══════════ LIGHT THEME — COMPONENT OVERRIDES ══════════ */
:root[data-theme="light"] .noise{ opacity:.03; }
:root[data-theme="light"] .scrollbar{ background:rgba(0,0,0,.06); }
:root[data-theme="light"] .cursor{ border-color:rgba(0,0,0,.22); }

/* hero stays bright; dark text gets a white halo + white outline so it reads
   over BOTH bright and dark regions of the photo (light theme) */
:root[data-theme="light"] .hero__veil{
  background:
    linear-gradient(to top, rgba(20,15,30,.58) 0%, rgba(255,255,255,0) 50%),
    linear-gradient(to bottom, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 60%),
    radial-gradient(130% 85% at 70% 18%, rgba(255,255,255,.40), transparent 62%);
}
:root[data-theme="light"] .hero__title{
  color:var(--cream);
  -webkit-text-stroke:2px rgba(255,255,255,.92);
  text-shadow:0 1px 3px rgba(255,255,255,.95), 0 0 18px rgba(255,255,255,.7);
}
:root[data-theme="light"] .hero__eyebrow{
  -webkit-text-stroke:1.5px rgba(255,255,255,.92);
  text-shadow:0 1px 3px rgba(255,255,255,.95), 0 0 12px rgba(255,255,255,.8);
}
:root[data-theme="light"] .hero__sub{
  color:var(--cream);
  -webkit-text-stroke:1.5px rgba(255,255,255,.9);
  text-shadow:0 1px 3px rgba(255,255,255,.95), 0 0 14px rgba(255,255,255,.75);
}
:root[data-theme="light"] .line--outline{
  color:transparent;
  -webkit-text-stroke:1.5px rgba(28,21,36,.6);
  text-shadow:0 0 16px rgba(255,255,255,.95);
}

/* page chrome */
:root[data-theme="light"] .marquee{ background:var(--ink-2); }
:root[data-theme="light"] .marquee span{ color:var(--cream); }
:root[data-theme="light"] .lead{ color:var(--cream); }
:root[data-theme="light"] .about__facts span{ color:var(--cream); }

:root[data-theme="light"] .ethos__card{
  background:linear-gradient(160deg, rgba(240,230,244,.92), rgba(242,234,226,.88));
  border-color:var(--hair);
}
:root[data-theme="light"] .card{ background:var(--ink-2); border-color:var(--hair); }
:root[data-theme="light"] .card:hover{ background:var(--plum-soft); border-color:rgba(111,53,200,.34); }
:root[data-theme="light"] .cred{ background:var(--ink-2); border-color:var(--hair); }
:root[data-theme="light"] .cred:hover{ border-color:rgba(176,124,34,.5); }
:root[data-theme="light"] .about__badge{ background:var(--plum); border-color:var(--hair); }
:root[data-theme="light"] .foot{ background:var(--ink-2); }

/* stuck nav bar (light) */
:root[data-theme="light"] .nav.is-stuck{
  background:rgba(251,247,242,.82);
  border-bottom:1px solid var(--hair);
}

/* photo-anchored overlays keep light text in both themes */
:root[data-theme="light"] .shot figcaption b,
:root[data-theme="light"] .reel__sound,
:root[data-theme="light"] .lightbox__fig figcaption,
:root[data-theme="light"] .lightbox__close,
:root[data-theme="light"] .lightbox__nav{ color:#E6DEEF; }
:root[data-theme="light"] .lightbox__close:hover,
:root[data-theme="light"] .lightbox__nav:hover{ color:#fff; }