@font-face {
  font-family: 'Red Hat Mono';
  src: url('fonts/RedHatMono-VariableFont_wght.ttf') format('truetype');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

@font-face{
  font-family:'DM Sans';
  src:url('fonts/DMSans-VariableFont_opsz,wght.ttf') format('truetype');
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
:root{
  --bg:#111c11;
  --red:#ed4c0c;--red-rgb:237,76,12;--red2:rgba(237,76,12,.10);--red3:rgba(237,76,12,.20);
  --offwhite:#f0ece4;--muted:rgba(240,236,228,.58);--muted-grey:#a8a49e;--blue:#8fa8b8;--green:#39ff6a;
  --mono:'Red Hat Mono',monospace;
  --ui:'Red Hat Mono',monospace;
  --title-font:'DM Sans',sans-serif;
  --banner-h:44px;--tab-h:40px;--works-sub-h:34px;
  --text-banner:0.875rem; /* 14px — all banner text */
  --works-accent:rgba(var(--red-rgb),0.35);
  --works-accent-strong:var(--red);
  --circle-size:clamp(200px,54vh,500px);
  --dot-cell:clamp(28px,8.5vmin,74px);
  /* Typography scale — 8 steps for site-wide coherence (min 14px) */
  --text-xs:0.875rem;    /* 14px — labels, captions, coords */
  --text-sm:0.875rem;    /* 14px — small UI, tabs, meta */
  --text-base:0.875rem;  /* 14px — body, wordmark, inputs */
  --text-md:0.875rem;    /* 14px — buttons */
  --text-lg:clamp(1rem,1.8vw,1.5rem);           /* card/section titles */
  --text-xl:clamp(1.4rem,3vw,2.125rem);         /* panel titles (24–34px) */
  --text-hero:clamp(2rem,4vw,3.5rem);           /* nav menu main titles */
  --text-display:clamp(10rem,20vw,17.5rem);      /* giant numeral (160–280px) */
}
html,body{width:100%;height:100%;background:var(--bg);overflow:hidden;cursor:none;}

#fade-cover{position:fixed;inset:0;background:#000;z-index:1000;pointer-events:none;animation:coverout 1.5s ease .2s forwards;}
#fade-cover.nav-out{animation:fadetoblack .35s ease forwards;}
@keyframes coverout{from{opacity:1;}to{opacity:0;}}
@keyframes fadetoblack{from{opacity:0;}to{opacity:1;}}

/* bg canvas */
#bg-canvas{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;}

/* vignette — smooth single radial, darkest at edges */
#vignette{
  position:fixed;inset:0;pointer-events:none;z-index:1;
  background: radial-gradient(ellipse 85% 85% at 50% 50%,
    transparent 0%,
    rgba(2,6,2,.25) 55%,
    rgba(2,6,2,.55) 75%,
    rgba(2,6,2,.82) 100%
  );
}

/* grain overlay — smooths banding, adds texture */
#vignette::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");
  background-size: 300px 300px;
  opacity: 0.45;
  pointer-events: none;
}

/* dot + lagging ring cursor */
#cursor{position:fixed;pointer-events:none;z-index:9999;width:7px;height:7px;background:var(--offwhite);border-radius:50%;margin-left:-3.5px;margin-top:-3.5px;transition:width .15s,height .15s,margin .15s,background-color 900ms ease;}
#cursor-gap{position:fixed;pointer-events:none;z-index:9998;width:28px;height:28px;border:1px solid rgba(var(--red-rgb),.5);border-radius:50%;margin-left:-14px;margin-top:-14px;transition:width .3s,height .3s,margin .3s,border-color 900ms ease;}
#cursor.h{width:12px;height:12px;margin-left:-6px;margin-top:-6px;}
#cursor-gap.h{width:44px;height:44px;margin-left:-22px;margin-top:-22px;border-color:var(--red);}
body.state-menu #cursor,body.state-section #cursor{background:#a8a49e;}
body.state-menu #cursor-gap,body.state-section #cursor-gap{border-color:rgba(0,0,0,.35);}

/* star canvas */
#stars{position:fixed;inset:0;pointer-events:none;z-index:2;opacity:.88;filter:brightness(1.15);transition:opacity 300ms ease,filter 300ms ease;}
#stars canvas{position:absolute;inset:0;width:100%;height:100%;}
body.state-home:hover #stars,
body.unlock-hovered #stars{opacity:1;filter:brightness(1.4);}

.grid-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2;overflow:visible;}
#tick-v{display:none;} /* vertical tick replaced by central divider */
.coord{position:absolute;font-family:var(--mono);font-size:var(--text-xs);letter-spacing:.12em;color:var(--blue);opacity:.28;z-index:5;}

/* horizontal axis line animation tuned for unlock hover */
#h-line{
  transition:stroke .38s cubic-bezier(.25,0,.6,1),
             stroke-width .38s cubic-bezier(.25,0,.6,1);
}
/* center vertical line — slow frequency pulse, audio signal reference */
#vline{
  animation:vline-signal 7s ease-in-out infinite;
}
@keyframes vline-signal{
  0%,100%{ stroke:rgba(var(--red-rgb),.06); }
  35%{ stroke:rgba(var(--red-rgb),.18); }
  50%{ stroke:rgba(var(--red-rgb),.08); }
  70%{ stroke:rgba(var(--red-rgb),.22); }
}
.tl{top:12px;left:16px;}.tr{top:12px;right:16px;}.bl{bottom:12px;left:16px;}.br{bottom:12px;right:16px;}
.blink-g{display:inline-block;width:8px;height:13px;background:var(--green);vertical-align:middle;margin-left:3px;animation:bl .75s step-end infinite;}
@keyframes bl{0%,100%{opacity:1;}50%{opacity:0;}}
@keyframes blink{50%{opacity:0;}}

/* yellow underline removed */
.b-l{font-family:var(--title-font);font-size:var(--text-banner);letter-spacing:.1em;color:var(--offwhite);position:relative;z-index:2;transition:font-size .55s cubic-bezier(.77,0,.18,1),letter-spacing .55s cubic-bezier(.77,0,.18,1);}
.b-m{font-family:var(--title-font);font-size:var(--text-banner);letter-spacing:.1em;color:var(--muted);text-align:center;position:relative;z-index:2;}
.b-r{font-family:var(--title-font);font-size:var(--text-banner);letter-spacing:.1em;color:var(--offwhite);text-align:right;position:relative;z-index:2;grid-column:3;opacity:.58;}
.blink-g{display:inline-block;width:8px;height:13px;background:var(--green);vertical-align:middle;margin-left:3px;animation:bl .75s step-end infinite;transition:opacity .3s ease,width .3s ease;}

.banner{
  position:fixed;top:0;left:0;right:0;
  flex-shrink:0;z-index:100;
  display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;
  padding:14px 24px 12px;
  background:#000;
  overflow:hidden;
}

/* banner visibility across navigation states */
@keyframes banner-intro{from{opacity:0;}to{opacity:1;}}
/* one-shot entrance animation — site-intro class is removed by JS after 1500ms */
body.site-intro #site-banner{
  animation:banner-intro 1.5s ease-in both;
}
/* banner is always visible once the page has loaded */
body.state-home #site-banner{
  opacity:1;
  pointer-events:auto;
}
body.state-menu #site-banner,
body.state-section #site-banner{
  opacity:1;
  pointer-events:auto;
}

/* banner left: wordmark + back arrow overlap in same position */
.b-l{position:relative;}

.banner-wordmark{
  display:inline-block;
  font-family:var(--title-font);font-size:var(--text-banner);letter-spacing:.28em;color:var(--offwhite);
  transition:opacity 500ms ease, filter 500ms ease;
  filter:blur(0);
}
.banner-back{
  position:absolute;
  left:0;top:0;bottom:0;
  display:flex;align-items:center;
  font-family:var(--title-font);font-size:var(--text-lg);letter-spacing:.48em;
  color:var(--red);
  opacity:0;
  filter:blur(4px);
  transition:opacity 500ms ease, filter 500ms ease, color 150ms ease;
  cursor:none;
  white-space:nowrap;
  padding:.4em .8em;
  margin:-.4em -.8em;
}
.banner-back:hover{
  color:#39ff6a;
  font-weight:700;
  opacity:1 !important;
  filter:none !important;
}
body.state-menu .banner-wordmark,
body.state-section .banner-wordmark{
  opacity:0;
  filter:blur(4px);
}
body.state-menu .banner-back,
body.state-section .banner-back{
  opacity:1;
  filter:blur(0);
}
/* reverse transition: back arrow clicked, wordmark blurs back in before closeNav fires */
body.banner-closing .banner-wordmark{
  opacity:1 !important;
  filter:blur(0) !important;
}
body.banner-closing .banner-back{
  opacity:0 !important;
  filter:blur(4px) !important;
}

#hover-overlay{
  position:fixed;inset:0;background:#000;
  opacity:0;pointer-events:none;
  transition:opacity 800ms ease;
  z-index:9;
}
body.unlock-hovered #hover-overlay{opacity:.35;}
#home{position:fixed;left:0;right:0;top:44px;bottom:0;display:flex;flex-direction:column;z-index:10;}
#home.out{pointer-events:none;}
#home.out .half-left{border-right-color:transparent;}
/* circles and button linger last — blur and dissolve into the orange */
#home.out #two-wrap, #home.out #freq-wrap, #home.out #enter-wrap{
  opacity:0;
  filter:blur(28px);
  scale:1.06;
  transition:opacity .5s ease .38s, filter .5s ease .38s, scale .5s ease .38s;
}
/* button burns orange as its last state — merges cleanly into the expanding fill */
#home.out #enter-btn{
  background:var(--red);
  border-color:var(--red);
  color:#000;
  box-shadow:0 0 28px rgba(var(--red-rgb),.5);
  transition:background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
}
/* everything else — grid lines, coords — fades quickly */
#home.out #main .half > .coord,
#home.out .grid-svg{
  opacity:0;
  transition:opacity .2s ease;
}
#main{position:relative;z-index:10;flex:1;display:flex;min-height:0;}
.half{flex:1;display:flex;align-items:center;justify-content:center;position:relative;}
.half-left{border-right:1px solid var(--red3);transition:border-color .25s ease;}

#two-wrap{position:relative;display:flex;align-items:center;justify-content:center;}
#void-circle{
  width:var(--circle-size);height:var(--circle-size);
  border:1.5px solid var(--red);border-radius:50%;
  /* deep dark interior — darker than bg, radial gradient so edges are slightly less black */
  background:radial-gradient(circle at center,
    #000 0%,
    #030804 45%,
    #080f09 75%,
    #0d1509 100%);
  position:relative;z-index:1;flex-shrink:0;overflow:hidden;
}
/* slow gravitational pulse — the darkness breathes inward */
#void-circle::before{
  content:'';position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at center,
    rgba(0,0,0,.85) 0%,
    rgba(0,0,0,.4)  40%,
    transparent     70%);
  animation:gravpulse 5s ease-in-out infinite;
  pointer-events:none;
  transition:border-color .45s cubic-bezier(.25,0,.6,1),
             box-shadow .55s cubic-bezier(.25,0,.6,1);
}
@keyframes gravpulse{
  0%,100%{ transform:scale(1);   opacity:.9; }
  50%     { transform:scale(.6); opacity:.4; }
}
#orbit-ring{position:absolute;width:var(--circle-size);height:var(--circle-size);border-radius:50%;pointer-events:none;z-index:3;animation:spin 18s linear infinite;}
@keyframes spin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}
.o-dot{position:absolute;width:var(--dot-cell);height:var(--dot-cell);background:var(--red);border-radius:50%;left:50%;outline:1px solid rgba(255,220,60,.45);outline-offset:3px;box-sizing:border-box;}
.o-dot:nth-child(1){top:0;transform:translateX(-50%) translateY(-50%);}
.o-dot:nth-child(2){bottom:0;top:auto;transform:translateX(-50%) translateY(50%);}

/* wrapper so crosshairs sit outside the clipped circle */
#freq-wrap{position:relative;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
#circ-cross{
  position:absolute;
  width:var(--circle-size);
  height:var(--circle-size);
  overflow:visible;
  pointer-events:none;z-index:6;
  transition:transform .55s cubic-bezier(.4,0,.1,1), filter .55s cubic-bezier(.4,0,.1,1);
}
#circ-cross line{stroke:var(--red);stroke-width:.3;opacity:.85;stroke-linecap:butt;}

#freq-circle{
  width:var(--circle-size);height:var(--circle-size);
  background:var(--red);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden;flex-shrink:0;
  outline:1px solid rgba(255,220,60,.45);
  outline-offset:4px;
  transition:outline-color .4s cubic-bezier(.25,0,.6,1),
             outline-width .4s cubic-bezier(.25,0,.6,1),
             outline-offset .55s cubic-bezier(.25,0,.6,1),
             filter .55s cubic-bezier(.25,0,.6,1);
}
#freq-circle::after{content:none;}
#dot-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative;z-index:5;}
.dc{width:var(--dot-cell);height:var(--dot-cell);background:#000;border-radius:50%;flex-shrink:0;opacity:0;filter:blur(4px);transform:scale(1);transition:opacity .7s ease,filter .7s ease,transform .7s ease;}
.dc.vis{opacity:1;filter:blur(0);transform:scale(1);}
.dc.dissolve{opacity:0;filter:blur(7px);transform:scale(1.18);}

#enter-wrap{flex-shrink:0;display:flex;justify-content:center;align-items:center;padding:8px 0 32px;z-index:20;}
#enter-btn{
  font-family:var(--mono);font-size:var(--text-md);letter-spacing:.48em;text-transform:lowercase;
  color:var(--offwhite);background:#000;
  border:1px solid rgba(var(--red-rgb),.25);
  width:200px;height:48px;
  display:flex;align-items:center;justify-content:center;
  cursor:none;outline:none;
  position:relative;overflow:hidden;
  transition:background .25s ease, border-color .25s ease, letter-spacing .3s ease, color .25s ease, box-shadow .25s ease;
}
/* unlock hover state — also triggered when the central strip is hot (vline-tease) */
#enter-btn:hover,
body.vline-tease:not(.nav-open) #enter-btn{
  background:var(--red);
  border-color:var(--red);
  color:#000;
  letter-spacing:.58em;
  box-shadow:0 0 22px rgba(var(--red-rgb),.35);
}
/* charge animation removed — hover highlight is enough */

/* clean two-flash: on → off → on → off */
@keyframes flash-btn{
  0%   {background:var(--red); color:#000; border-color:var(--red); box-shadow:0 0 28px rgba(var(--red-rgb),.65);}
  28%  {background:#000; color:var(--offwhite); border-color:rgba(var(--red-rgb),.25); box-shadow:none;}
  52%  {background:var(--red); color:#000; border-color:var(--red); box-shadow:0 0 28px rgba(var(--red-rgb),.65);}
  100% {background:#000; color:var(--offwhite); border-color:rgba(var(--red-rgb),.25); box-shadow:none;}
}
#enter-btn.pulse{animation:flash-btn .38s ease forwards;}

/* ── NAV ── */
#nav{
  position:fixed;left:0;right:0;top:44px;bottom:0;
  display:flex;flex-direction:column;
  pointer-events:none;z-index:8;
}
#nav.show{ pointer-events:all; }

/* strip clip: when minimized, only top 36px of content wrap is visible */
.nav-strip-clip{
  position:absolute;
  top:0;left:0;right:0;
  height:100%;
  overflow:visible;
  transition:height .5s cubic-bezier(.4,0,.2,1);
}
body.state-section .nav-strip-clip{
  height:36px;
  overflow:hidden;
  border-bottom:1px solid rgba(0,0,0,.2);
}

/* one unit: orange + menu content move up together */
.nav-content-wrap{
  position:absolute;
  top:0;left:0;right:0;
  height:calc(100vh - 44px);
  transition:transform .5s cubic-bezier(.4,0,.2,1);
}

body.state-section .nav-content-wrap{
  transform:translateY(calc(-50% + 18px));
}

/* two orange panels — expand from centre */
#nav-left-fill, #nav-right-fill{
  position:absolute;
  top:0;bottom:0;
  background:var(--red);
  width:0;
  transition:width 0s;
  z-index:1;
}
#nav-left-fill::after, #nav-right-fill::after{
  content:'';
  position:absolute;inset:0;
  background:rgba(0,0,0,.14);
  pointer-events:none;
}
#nav-left-fill{ right:50%; }
#nav-right-fill{ left:50%; }
#nav-left-fill.expand{ width:calc(50% + 1px); transition:width .52s cubic-bezier(.77,0,.18,1); }
#nav-right-fill.expand{ left:calc(50% - 1px); width:calc(50% + 1px); transition:width .52s cubic-bezier(.77,0,.18,1); }
#nav-left-fill.retract, #nav-right-fill.retract{
  width:0;
  transition:width .4s cubic-bezier(.4,0,1,1);
}
#nav-right-fill.retract{ left:50%; }

/* ── NAV MENU ── */
#nav-menu{
  position:absolute;inset:0;z-index:60;
  display:flex;flex-direction:column;justify-content:space-between;
  padding:clamp(24px,4vh,48px) clamp(32px,6vw,80px);
  color:#000;overflow:hidden;
  opacity:0;pointer-events:none;transition:opacity .25s ease;
}
#nav.ready #nav-menu{ opacity:1;pointer-events:all; }
#nav.menu-exit #nav-menu{ opacity:0;pointer-events:none; transition:opacity .1s ease; }

/* ── HORIZONTAL MENU ── */
#nav-menu{
  position:absolute;inset:0;z-index:60;
  display:flex;align-items:center;justify-content:center;
  padding:0 clamp(48px,7vw,100px);
  color:#000;overflow:hidden;
  opacity:0;pointer-events:none;transition:opacity .25s ease;
}
/* titles slightly above vertical center for better balance */
#nav-menu #nm-track{
  transform:translateY(-6vh);
}

/* vignette overlays — one per column, cross-fade on hover */
.nm-vignette{
  position:absolute;inset:0;
  pointer-events:none;z-index:0;
  opacity:0;
  transition:opacity .5s ease;
}
.nm-vignette[data-for="works"]  { background:radial-gradient(ellipse 55% 110% at 20% 52%, transparent 22%, rgba(0,0,0,.36) 100%); }
.nm-vignette[data-for="process"]{ background:radial-gradient(ellipse 55% 110% at 50% 52%, transparent 22%, rgba(0,0,0,.36) 100%); }
.nm-vignette[data-for="about"]  { background:radial-gradient(ellipse 55% 110% at 80% 52%, transparent 22%, rgba(0,0,0,.36) 100%); }
.nm-vignette.active{ opacity:1; }

#nm-track{
  display:flex;
  width:100%;
  position:relative;z-index:1; /* sits above vignette overlays */
}

.nm-item{
  flex:1;
  display:flex;flex-direction:column;
  padding:0 clamp(16px,2.8vw,44px);
  cursor:none;
  opacity:0;transform:translateY(6px);
  transition:opacity .4s ease, transform .4s ease;
  text-decoration:none;
  color:inherit;
}
a.nm-item:hover,
a.nm-item:visited{ color:inherit; text-decoration:none; }
.nm-item:first-child{ padding-left:0; }
.nm-item:last-child{ padding-right:0; }

/* stagger entrance */
#nav.ready .nm-item:nth-child(1){ opacity:1;transform:none;transition-delay:.07s; }
#nav.ready .nm-item:nth-child(2){ opacity:1;transform:none;transition-delay:.16s; }
#nav.ready .nm-item:nth-child(3){ opacity:1;transform:none;transition-delay:.25s; }

/* index + title zone */
.nm-head{
  display:flex;flex-direction:column;justify-content:flex-end;
  height:clamp(88px,13vh,148px);
  padding-bottom:.55em;
}

.nm-idx{
  font-family:var(--mono);
  font-size:var(--text-sm);font-weight:400;letter-spacing:.22em;
  color:rgba(0,0,0,.4);
  display:block;margin-bottom:auto;
  transition:color .35s ease;
}

.nm-label{
  font-family:var(--title-font);
  font-size:var(--text-hero);
  font-weight:400; letter-spacing:-.02em;
  color:#000; line-height:1;
  display:block;
  transform: translateY(0);
  filter: blur(0px);
  transition: transform .5s cubic-bezier(.16,1,.3,1), filter .5s cubic-bezier(.16,1,.3,1), color .3s ease;
}

@keyframes nm-lift {
  0%   { transform: translateY(0);    }
  100% { transform: translateY(-2px); }
}

/* separator line — draws left to right on hover */
.nm-line{
  height:1px;
  background:rgba(0,0,0,.45);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .55s cubic-bezier(.16,1,.3,1);
  margin-top:.1em;
}

.nm-sub{
  font-family:var(--mono);
  font-size:1rem;
  font-weight:400; letter-spacing:.09em;
  color:rgba(0,0,0,.7);
  display:block; padding-top:1.1em;
  opacity:0; transform:translateY(5px);
  transition: opacity .38s ease .1s, transform .38s ease .1s;
}

/* hover: dim siblings, lift selected */
#nm-track:hover .nm-item{ opacity:.28; }
#nm-track:hover .nm-item:hover{ opacity:1; }
#nm-track:hover .nm-item:hover .nm-label{
  animation: nm-lift .7s cubic-bezier(.25,1,.35,1) forwards;
  color:#000;
}
#nm-track:hover .nm-item:hover .nm-idx{ color:rgba(0,0,0,.85); }
#nm-track:hover .nm-item:hover .nm-line{ transform:scaleX(1); }
#nm-track:hover .nm-item:hover .nm-sub{ opacity:1; transform:translateY(0); }

/* ── SHARED PANEL ── */
.ns{
  position:absolute;inset:0;z-index:65;
  display:flex;flex-direction:column;
  padding:clamp(24px,4vh,48px) clamp(32px,6vw,80px);
  opacity:0;pointer-events:none;
  transform:translateX(16px);
  transition:opacity .3s ease,transform .3s ease;
  overflow-y:auto;
  scrollbar-width:thin;scrollbar-color:rgba(var(--red-rgb),.2) transparent;
}
.ns.active{ opacity:1;pointer-events:all;transform:translateX(0); }
/* section panels sit below the strip when menu is minimized */
body.state-section .ns{
  top:36px;
  transition:opacity .3s ease, transform .3s ease, top .5s cubic-bezier(.4,0,.2,1);
}
body.state-section .ns.active{
  top:36px;
}
.ns-head{
  display:flex;justify-content:space-between;align-items:center;
  padding-bottom:1rem;border-bottom:1px solid rgba(240,236,228,.07);
  margin-bottom:2.5rem;flex-shrink:0;
}
.ns-back{
  font-family:var(--mono);font-size:var(--text-sm);letter-spacing:.16em;
  color:rgba(240,236,228,.35);background:none;border:none;cursor:none;
  transition:color .2s;display:flex;align-items:center;gap:.4rem;
}
.ns-back:hover{ color:var(--red); }
.ns-wm{ font-family:var(--mono);font-size:var(--text-sm);letter-spacing:.12em;color:rgba(240,236,228,.2); }
#nav.section-open #nav-menu{ opacity:0;pointer-events:none; }
body.state-section #nav-menu{ opacity:1;pointer-events:all; }

/* ── WORKS ── */
.ns-wtabs{ display:flex;gap:1.5rem;margin-bottom:2rem;flex-shrink:0; }
.ns-wtab{
  font-family:var(--mono);font-size:var(--text-sm);letter-spacing:.18em;
  color:rgba(240,236,228,.3);background:none;border:none;
  border-bottom:1px solid transparent;padding-bottom:.3rem;cursor:none;
  transition:color .2s,border-color .2s;
}
.ns-wtab.active,.ns-wtab:hover{ color:var(--offwhite);border-bottom-color:var(--red); }
.ns-wgrid{ display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1px;background:rgba(240,236,228,.06); }
.wcard{
  background:var(--bg);padding:1.4rem;display:flex;flex-direction:column;
  justify-content:flex-end;min-height:160px;position:relative;overflow:hidden;
  cursor:none;transition:background .25s;
}
.wcard:hover{ background:rgba(240,236,228,.03); }
.wcard.hidden{ display:none; }
.wcard-num{ font-family:var(--mono);font-size:var(--text-xs);letter-spacing:.16em;color:var(--green);margin-bottom:.4rem; }
.wcard-title{ font-family:var(--title-font);font-size:var(--text-base);font-weight:400;letter-spacing:-.01em;color:var(--offwhite);margin-bottom:.25rem; }
.wcard-meta{ font-family:var(--mono);font-size:var(--text-xs);letter-spacing:.1em;color:rgba(240,236,228,.3);margin-bottom:.3rem; }
.wcard-ctx{ font-family:var(--mono);font-size:var(--text-xs);letter-spacing:.06em;color:rgba(240,236,228,.35);line-height:1.6; }

/* ── WORKS CAROUSEL ── */
.works{
  position:relative;
  flex:1;
  min-height:0;
  overflow:hidden;
}
.works-viewport{
  position:absolute;
  inset:0;
  overflow:hidden;
  touch-action:pan-y;
}
.works-track{
  height:100%;
  display:flex;
  transform:translate3d(0,0,0);
  transition:transform .5s ease-in-out;
  will-change:transform;
}
.works-slide{
  flex:0 0 100%;
  height:100%;
  display:grid;
  grid-template-columns:1fr 1fr;
}
.works-media{
  position:relative;
  background:var(--bg);
  overflow:hidden;
}
.works-media::after{
  content:'';
  position:absolute;
  inset:0;
  border:1px solid rgba(var(--red-rgb),.0);
  animation:worksPulse 1.4s ease-in-out infinite;
  opacity:0;
  pointer-events:none;
}
.works-media.loading::after{
  opacity:1;
}
@keyframes worksPulse{
  0%,100%{ border-color:rgba(var(--red-rgb),.08); }
  50%{ border-color:rgba(var(--red-rgb),.28); }
}
.works-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.works-panel{
  padding:clamp(28px,5vw,72px);
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:1.2rem;
}
.works-title{
  font-family:var(--mono);
  color:var(--offwhite);
  font-size:var(--text-xl);
  letter-spacing:.02em;
}
.works-desc{
  font-family:var(--mono);
  color:rgba(240,236,228,.58);
  font-size:var(--text-base);
  letter-spacing:.04em;
  line-height:1.8;
  max-width:44ch;
}
.works-spotify{
  margin-top:.4rem;
}
.works-spotify iframe{
  width:100%;
  max-width:420px;
  border:0;
}
.works-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:10;
  border:0;
  background:none;
  color:var(--red);
  font-family:var(--mono);
  font-size:var(--text-lg);
  letter-spacing:.08em;
  padding:14px 16px;
  cursor:none;
  opacity:.9;
  transition:opacity .2s, color .2s;
}
.works-arrow:hover{
  opacity:1;
  color:var(--offwhite);
}
.works-prev{ left:10px; }
.works-next{ right:10px; }
.works-counter{
  position:absolute;
  right:18px;
  bottom:16px;
  z-index:10;
  font-family:var(--mono);
  font-size:var(--text-sm);
  letter-spacing:.16em;
  color:var(--blue);
  opacity:.8;
  pointer-events:none;
}

/* ── SERVICES ── */
.svc-grid{ display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(240,236,228,.06);flex:1; }
.svc-card{
  background:var(--bg);padding:2.4rem 2rem;position:relative;overflow:hidden;
  cursor:none;transition:background .25s;display:flex;flex-direction:column;
}
.svc-card:hover{ background:rgba(240,236,228,.03); }
.svc-card:hover .svc-num{ color:var(--red); }
.svc-num{ font-family:var(--mono);font-size:var(--text-xs);letter-spacing:.2em;color:rgba(240,236,228,.25);margin-bottom:1.2rem;transition:color .25s; }
.svc-title{ font-family:var(--title-font);font-size:var(--text-lg);font-weight:400;letter-spacing:-.02em;color:var(--offwhite);line-height:1.15;margin-bottom:.8rem; }
.svc-desc{ font-family:var(--mono);font-size:var(--text-sm);letter-spacing:.06em;color:rgba(240,236,228,.35);line-height:1.9; }
.svc-email{ font-family:var(--mono);font-size:var(--text-sm);letter-spacing:.1em;color:var(--red);text-decoration:none;margin-top:.6rem;transition:opacity .2s; }
.svc-email:hover{ opacity:.7; }
.svc-deco{
  position:absolute;bottom:-2rem;right:-2rem;
  width:6rem;height:6rem;border-radius:50%;
  border:1px solid rgba(240,236,228,.06);
  transition:border-color .25s;
}
.svc-deco::after{ content:'';position:absolute;inset:12px;border-radius:50%;border:1px solid rgba(240,236,228,.06);transition:border-color .25s; }
.svc-card:hover .svc-deco{ border-color:rgba(240,236,228,.1); }
.svc-card:hover .svc-deco::after{ border-color:rgba(240,236,228,.1); }

/* ── PRACTICE ── */
.practice-inner{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:flex-start;
}
.practice-list{
  display:flex;
  flex-direction:column;
  gap:1.2rem;
  margin-left:clamp(24px,6vw,96px);
}
.practice-item{
  font-family:var(--mono);
  font-size:var(--text-lg);
  letter-spacing:.06em;
  line-height:1.55;
  color:var(--offwhite);
}

/* ── ABOUT ── */
.about-inner{ max-width:500px;margin:auto 0;padding-top:1rem; }
.about-tag{ font-family:var(--mono);font-size:var(--text-xs);letter-spacing:.22em;color:var(--green);margin-bottom:2rem; }
.about-text{ font-family:var(--mono);font-size:var(--text-base);font-weight:300;letter-spacing:.04em;line-height:2;color:var(--offwhite);margin-bottom:2.4rem; }
.about-rule{ width:2.2rem;height:1px;background:rgba(240,236,228,.15);margin-bottom:1.6rem; }
.about-links{ display:flex;flex-wrap:wrap;gap:1.4rem; }
.alink{
  font-family:var(--mono);font-size:var(--text-sm);letter-spacing:.14em;
  color:rgba(240,236,228,.4);text-decoration:none;cursor:none;
  position:relative;transition:color .25s;
}
.alink::after{ content:'';position:absolute;bottom:-2px;left:0;width:0;height:1px;background:var(--red);transition:width .25s; }
.alink:hover{ color:var(--offwhite); }
.alink:hover::after{ width:100%; }

.sub-banner{
  position:fixed;
  top:44px;
  left:0;
  right:0;
  height:36px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 24px;
  background:transparent;
  border-bottom:1px solid rgba(0,0,0,.2);
  z-index:90;
  opacity:0;
  pointer-events:none;
  transform:translateY(-36px);
  transition:transform .4s cubic-bezier(.16,1,.3,1) .1s, opacity .35s ease .1s;
}
/* nav becomes the sub-banner (same titles); hide duplicate strip */
body.state-section #sub-banner{
  display:none;
}
.sub-nav-items{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(32px,5vw,56px);
}
.sub-nav-item{
  font-family:var(--title-font);
  font-size:var(--text-base);
  letter-spacing:.2em;
  text-transform:lowercase;
  color:rgba(0,0,0,.6);
  background:none;
  border:none;
  cursor:none;
  padding:.5rem 1rem;
  min-width:4em;
  transition:color .2s ease;
}
.sub-nav-item.active{
  color:var(--green);
}
.sub-nav-item:not(.active):hover{
  color:#000;
}

/* vertical divider + interaction strip */
#center-strip{
  position:fixed;
  left:50%;
  top:44px;
  bottom:0;
  width:120px; /* wide hover/click area */
  transform:translateX(-50%);
  z-index:15;
  pointer-events:auto;
  display:flex;
  align-items:stretch;
  justify-content:center;
}
body.nav-open #center-strip{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .35s ease;
}
body.nav-open svg#persist-line #vline{
  animation:none !important;
  stroke:transparent !important;
  stroke-width:0 !important;
}
#persist-line{
  width:1px;
  height:100%;
  pointer-events:auto;
}
svg#persist-line #vline{
  /* base appearance; interactive tease handled in JS + body.vline-tease */
  transition:stroke .38s cubic-bezier(.25,0,.6,1),
             stroke-width .38s cubic-bezier(.25,0,.6,1),
             filter .5s cubic-bezier(.25,0,.6,1);
}

.about-contact{
  display:flex;
  flex-direction:column;
  gap:1.2rem;
  margin-top:.4rem;
}
.about-email{
  font-family:var(--mono);
  font-size:var(--text-sm);
  letter-spacing:.16em;
  color:var(--red);
  text-decoration:none;
  cursor:none;
  width:fit-content;
  transition:opacity .2s;
}
.about-email:hover{ opacity:.7; }

.contact-form{
  display:flex;
  flex-direction:column;
  gap:.9rem;
}
.cf-input{
  font-family:var(--mono);
  font-size:var(--text-sm);
  letter-spacing:.12em;
  color:var(--offwhite);
  background:#000;
  border:1px solid rgba(var(--red-rgb),.25);
  padding:14px 14px;
  outline:none;
  cursor:none;
  resize:none;
}
.cf-input::placeholder{
  color:rgba(240,236,228,.35);
}
.cf-textarea{
  min-height:140px;
  line-height:1.7;
}

.cf-send{
  font-family:var(--mono);
  font-size:var(--text-md);
  letter-spacing:.48em;
  text-transform:lowercase;
  color:var(--offwhite);
  background:#000;
  border:1px solid rgba(var(--red-rgb),.25);
  width:200px;
  height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:none;
  outline:none;
  position:relative;
  overflow:hidden;
  transition:background .25s ease, border-color .25s ease, letter-spacing .3s ease, color .25s ease, box-shadow .25s ease;
}
.cf-send:hover{
  background:var(--red);
  border-color:var(--red);
  color:#000;
  letter-spacing:.58em;
  box-shadow:0 0 22px rgba(var(--red-rgb),.35);
}
.cf-send.pulse{animation:flash-btn .38s ease forwards;}

/* ── WORKS PAGE (works.html) ── */
body.page-works #fade-cover{opacity:1;animation:coverout .5s ease 0s forwards;}
body.page-works{color:var(--offwhite);background:#000;}
body.page-works #bg-canvas{display:none !important;}
body.page-works #stars { display: none !important; }
/* Show stars behind process panel */
body.page-works.tab-process #stars {
  display: block !important;
  opacity: .55;
  filter: brightness(.85);
  transition: opacity .8s ease;
}
@media (min-width: 769px) {
  body.page-works #stage{
    position:fixed;
    top:calc(var(--banner-h) + var(--works-sub-h));
    left:0;right:0;bottom:0;
    z-index:100;
    opacity:1;
    visibility:visible;
    pointer-events:auto;
  }
}
@media (min-width: 769px) {
  /* panels and works-right must fill the stage height */
  body.page-works .panel { height: 100%; }
  body.page-works .works-right { height: 100%; }
  body.page-works .panel.active{opacity:1;pointer-events:all;visibility:visible;}
}
/* works page: main banner (clean) */
#banner{
  position:fixed;top:0;left:0;right:0;
  height:var(--banner-h);background:#000;z-index:200;
  overflow:hidden;
  border-bottom:1px solid rgba(255,255,255,.06);
}
@media (min-width: 769px) {
  body.page-works #banner{
    display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;
    padding:14px 24px 12px;
  }
}
a.banner-wordmark{
  text-decoration:none;color:inherit;cursor:none;
  transition:color .25s ease;
}
body.page-works #banner .banner-wordmark:hover{
  color:var(--red);
}
a.banner-wordmark:hover{color:var(--offwhite);}
/* works: sub-banner with orange accent */
.works-sub-banner{
  position:fixed;
  top:var(--banner-h);
  left:0;right:0;
  height:var(--works-sub-h);
  z-index:199;
  background:#000;
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  border:1px solid var(--red);
  font-family:var(--mono);
  font-size:var(--text-banner);
  letter-spacing:.18em;
  text-transform:lowercase;
}
.works-sub-banner .tab{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  padding-left:clamp(16px,4vw,28px);
  color:rgba(240,236,228,.5);
  cursor:none;
  user-select:none;
  border-right:1px solid var(--red);
  background: linear-gradient(to bottom, #1a1a1a 0%, #0d0d0d 100%);
  transition:background .2s ease,color .2s ease;
}
.works-sub-banner .tab:last-child{border-right:none;}
.works-sub-banner .tab:hover{color:var(--offwhite);}
.works-sub-banner .tab.active{
  background:#000000;
  color:var(--offwhite);
  outline: 1px solid var(--red);
  outline-offset: -1px;
}
.panel{
  opacity:0;pointer-events:none;
  transition:opacity .2s ease;
}
.panel.active{opacity:1;pointer-events:all;}
@media (min-width: 769px) {
  .panel{ position:absolute;inset:0; }
}
@media (min-width: 769px) {
  #panel-works{display:grid;grid-template-columns:1fr 1fr 1fr;}
}
.works-left{
  grid-column:1;
  position:relative;
  padding:clamp(36px,5vw,64px) clamp(32px,4vw,52px);
  display:flex;flex-direction:column;justify-content:flex-start;
  min-height:0;
}
.works-left::after{
  content:'';
  position:absolute;
  right:0;top:0;
  width:1px;
  height:100%;
  background:var(--red);
  transform-origin:top;
  transform:scaleY(0);
  transition:transform .4s cubic-bezier(.25,0,.2,1);
}
#panel-works.active .works-left::after{
  transform:scaleY(1);
}
.work-index{font-family:var(--ui);font-size:var(--text-xs);letter-spacing:.2em;color:var(--red);margin-bottom:20px;line-height:1;}
.work-title-main{
  font-family:var(--title-font);font-size:var(--text-xl);
  font-weight:400;letter-spacing:-.02em;color:var(--offwhite);
  text-transform:lowercase;line-height:1.1;margin-bottom:24px;
  min-height:3em;
}
.work-meta{display:flex;flex-direction:column;gap:9px;margin-bottom:24px;}
.work-meta-row{display:flex;gap:12px;align-items:baseline;line-height:1.4;}
.meta-label{font-family:var(--ui);font-size:var(--text-xs);letter-spacing:.2em;color:var(--red);width:48px;flex-shrink:0;}
.meta-value{font-family:var(--ui);font-size:var(--text-base);letter-spacing:.06em;color:rgba(240,236,228,.58);}
.work-desc{font-family:var(--ui);font-size:var(--text-base);letter-spacing:.04em;color:rgba(240,236,228,.58);line-height:1.85;min-height:4.2em;}
.works-left{transition:opacity .2s ease,filter .2s ease;}
.works-left.fading-out{opacity:0;filter:blur(6px);}
.works-left.fading-in{opacity:1;filter:blur(0);transition:opacity .3s ease,filter .3s ease;}
.works-right{grid-column:2 / -1;position:relative;overflow:hidden;background:linear-gradient(to bottom,#0a0a0a 0%,#1e1e1e 100%);}
.slide-img{
  position:absolute;inset:0;
  opacity:0;transition:opacity .4s ease;
  display:block;
}
.slide-img.visible{opacity:1;}
.slide-img svg{width:100%;height:100%;}
@media (min-width: 769px) {
  #panel-process{
    position:relative;
    display:grid;
    grid-template-columns:repeat(3,1fr);
  }
}
#panel-process::before,
#panel-process::after{
  content:'';
  position:absolute;
  top:0;
  bottom:0;
  width:1px;
  background:var(--red);
  pointer-events:none;
}
#panel-process::before{left:33.3333%;}
#panel-process::after{left:66.6667%;}
.proc-col{
  min-width:0;
  padding:clamp(36px,5vw,64px) clamp(24px,3vw,40px);
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  z-index:1;
}
.proc-label{
  font-family:var(--ui);
  font-size:var(--text-xs);
  letter-spacing:.2em;
  color:var(--red);
  margin-bottom:14px;
}
.proc-title{
  font-family:var(--title-font);
  font-size:var(--text-xl);
  font-weight:400;
  letter-spacing:-.02em;
  color:var(--offwhite);
  text-transform:lowercase;
  line-height:1;
  margin-bottom:20px;
  min-height:0;
}
.proc-body{
  font-family:var(--ui);
  font-size:var(--text-base);
  letter-spacing:.04em;
  color:rgba(240,236,228,.58);
  line-height:1.85;
  overflow-wrap:break-word;
}
@media (min-width: 769px) {
  #panel-about{display:grid;grid-template-columns:minmax(380px,1.15fr) 1fr;}
}
.about-left{padding:clamp(36px,5vw,64px) clamp(32px,4vw,52px);display:flex;flex-direction:column;justify-content:center;border-right:1px solid var(--works-accent);}
.about-section-label{font-family:var(--title-font);font-size:var(--text-xs);letter-spacing:.22em;color:var(--red);margin-bottom:24px;padding-left:2px;border-left:2px solid var(--red);}
.about-bio{font-family:var(--ui);font-size:var(--text-base);letter-spacing:.04em;color:rgba(240,236,228,.58);line-height:1.95;}
.about-bio p+p{margin-top:16px;}
.about-bio em{color:var(--offwhite);font-style:normal;}
.about-right{padding:clamp(36px,5vw,64px) clamp(32px,4vw,52px);display:flex;flex-direction:column;justify-content:center;gap:44px;}
.about-block-label{font-family:var(--ui);font-size:var(--text-xs);letter-spacing:.24em;color:var(--red);margin-bottom:14px;padding-left:2px;border-left:2px solid var(--red);}
.about-links{display:flex;flex-direction:column;}
.about-link{font-family:var(--mono);font-size:var(--text-base);letter-spacing:-.01em;color:var(--offwhite);text-decoration:none;text-transform:lowercase;padding:10px 0;border-bottom:1px solid var(--works-accent);display:flex;align-items:center;justify-content:space-between;transition:color .2s ease,padding-left .3s cubic-bezier(.16,1,.3,1),border-color .2s ease;cursor:none;}
.about-link:hover{color:var(--red);padding-left:8px;border-bottom-color:var(--red);}
.about-link-arrow{font-family:var(--ui);font-size:var(--text-base);color:var(--muted-grey);transition:color .2s ease,transform .3s ease;}
.about-link:hover .about-link-arrow{color:var(--red);transform:translateX(4px);}
.contact-form{display:flex;flex-direction:column;gap:14px;}
.form-field{display:flex;flex-direction:column;gap:5px;}
.form-label{font-family:var(--ui);font-size:var(--text-xs);letter-spacing:.22em;color:var(--muted-grey);}
.form-input,.form-textarea{background:transparent;border:none;border-bottom:1px solid var(--works-accent);color:var(--offwhite);font-family:var(--ui);font-size:var(--text-base);letter-spacing:.04em;padding:8px 0;outline:none;width:100%;cursor:none;transition:border-color .25s ease;caret-color:var(--red);}
.form-input::placeholder,.form-textarea::placeholder{color:var(--muted-grey);}
.form-input:focus,.form-textarea:focus{border-bottom:2px solid var(--red);}
.form-textarea{resize:none;height:64px;}
.form-submit{align-self:flex-start;margin-top:6px;background:transparent;border:2px solid var(--red);color:var(--offwhite);font-family:var(--ui);font-size:var(--text-sm);letter-spacing:.22em;padding:10px 24px;text-transform:lowercase;cursor:none;transition:background .2s ease,border-color .2s ease,color .2s ease;}
.form-submit:hover{background:var(--red);border-color:var(--red);color:#000;}
#pagination{position:fixed;bottom:24px;left:0;right:0;display:flex;align-items:center;justify-content:center;gap:22px;z-index:150;opacity:0;pointer-events:none;transition:opacity .3s ease;padding:12px 0;margin:0 24px;max-width:calc(100vw - 48px);}
#pagination.visible{opacity:1;pointer-events:all;}
.pag-btn{font-family:var(--ui);font-size:var(--text-md);color:var(--muted-grey);cursor:none;padding:6px 12px;border:1px solid transparent;transition:color .2s ease,border-color .2s ease;user-select:none;}
.pag-btn:hover{color:var(--red);border-color:var(--works-accent);}
.pag-btn.disabled{opacity:.2;pointer-events:none;}
#pag-counter{font-family:var(--ui);font-size:var(--text-sm);letter-spacing:.18em;color:var(--muted-grey);min-width:44px;text-align:center;}



/* ═══════════════════════════════════════════════════════════
   WORKS PAGE — DEFINITIVE OVERRIDE
   ═══════════════════════════════════════════════════════════ */

:root { --surface: #161616; --surface-hover: #222222; }

/* Kill original process pseudo dividers */
#panel-process::before,
#panel-process::after { content: none !important; display: none !important; }

/* ══════════════════ SUBBANNER ══════════════════ */
.works-sub-banner { border: none !important; border-top: 1px solid rgba(255,255,255,0.08) !important; overflow: visible !important; }
.works-sub-banner .tab {
  font-family: var(--mono) !important;
  font-size: var(--text-sm) !important;
  letter-spacing: .2em !important;
  color: rgba(240,236,228,.58) !important;
  background: #000000 !important;
  border-right: none !important;
  position: relative !important;
  justify-content: center !important;
  padding-left: 0 !important;
  transition: color .35s ease !important;
}
.works-sub-banner .tab:last-child { border-right: none !important; }
.works-sub-banner .tab:hover { color: var(--red) !important; }
.works-sub-banner .tab.active {
  background: #000000 !important;
  color: var(--offwhite) !important;
  outline: none;
  position: relative;
}
.works-sub-banner .tab.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 30%; right: 30%;
  height: 1px;
  background: linear-gradient(to right, transparent 0%, var(--red) 50%, transparent 100%);
  animation: underline-fade-in .45s ease forwards;
}

@keyframes underline-fade-in {
  from { opacity: 0; transform: scaleX(0.4); }
  to   { opacity: 1; transform: scaleX(1); }
}

/* tab-blink removed — tab transition handles it */

/* ══════════════════ PANEL TRANSITIONS ══════════════════ */
.panel { transition: opacity .45s ease !important; }
/* Panels fade only — no translate to avoid twitchy jump */
#panel-process { transform: none !important; transition: opacity .45s cubic-bezier(.4,0,.2,1) !important; }

/* ══════════════════ STAGE LINES ══════════════════ */
.stage-line { display: none !important; }

/* ══════════════════ BANNER ══════════════════ */
@media (min-width: 769px) {
  body.page-works a#banner {
    display: grid !important; grid-template-columns: 1fr 1fr 1fr !important;
    align-items: center !important; padding: 14px 24px 12px !important;
    text-decoration: none !important; cursor: pointer !important;
    background: #000 !important; transition: background .3s ease !important;
  }
}
body.page-works a#banner { cursor: pointer !important; width: 100% !important; }
body.page-works a#banner:hover { background: var(--red) !important; }
body.page-works a#banner .b-m { cursor: pointer !important; }
body.page-works a#banner:hover .blink-g { background: #000000 !important; }
body.page-works a#banner .banner-wordmark,
body.page-works a#banner .b-l,
body.page-works a#banner .b-r { transition: color .3s ease; }
body.page-works a#banner:hover .banner-wordmark,
body.page-works a#banner:hover .b-l,
body.page-works a#banner:hover .b-r { color: #000000; opacity: .65; }
/* blink-g stays green regardless */
body.page-works a#banner .blink-g { color: transparent; }

/* ══════════════════ UNIFIED TITLES ══════════════════ */
.panel-section-label, .work-title-main, .proc-title {
  font-family: var(--title-font); font-size: clamp(1.6rem, 3.2vw, 2.3rem);
  font-weight: 400; letter-spacing: -.02em; color: var(--offwhite);
  text-transform: lowercase; line-height: 1; padding-left: 16px;
  position: relative; margin-bottom: 0;
}
.panel-section-label::before, .work-title-main::before, .proc-title::before {
  content: ''; position: absolute; left: 0; top: 0.08em;
  height: 0.82em; width: 2px; background: var(--red); border-radius: 1px;
}
.panel-section-label { margin-bottom: 24px; }

/* ══════════════════ WORKS TAB ══════════════════ */
@media (min-width: 769px) {
  #panel-works { display: grid; grid-template-columns: 1fr 1fr 1fr; }
}
.works-left {
  grid-column: 1;
  padding: clamp(36px,5vw,64px) clamp(32px,4vw,52px);
  display: flex; flex-direction: column;
  align-items: flex-start; justify-content: flex-start;
  min-height: 0; background-color: #000000;
  position: relative; overflow: hidden;
}
/* Left column: matches about-right fill */
.works-left::after,
#panel-works.active .works-left::after {
  content: '' !important; position: absolute !important;
  inset: 0 !important;
  background: #000000 !important;
  pointer-events: none !important; z-index: 1 !important;
  transform: none !important; transform-origin: unset !important; transition: none !important;
}
.works-left::before { display: none; }
.works-left > * { position: relative; z-index: 3; }
.works-right { grid-column: 2 / -1; position: relative; overflow: hidden; background: linear-gradient(to bottom,#111111 0%,#222222 100%); }
.work-title-main { margin-bottom: 20px; flex-shrink: 0; }
.work-dynamic { display: flex; flex-direction: column; align-items: flex-start; flex-shrink: 0; }
.work-desc-wrap { margin-top: 0; flex-shrink: 0; }

/* Directional swipe: text + artwork move together */
.work-dynamic,
.work-desc-wrap { transition: opacity .32s ease, transform .38s cubic-bezier(.4,0,.2,1); }

.work-dynamic.slide-exit-left,
.work-dynamic.slide-exit-right,
.work-desc-wrap.slide-exit-left,
.work-desc-wrap.slide-exit-right  { opacity: 0; transform: translateY(8px); }
.work-dynamic.slide-enter-right,
.work-dynamic.slide-enter-left,
.work-desc-wrap.slide-enter-right,
.work-desc-wrap.slide-enter-left  { opacity: 0; transform: translateY(-8px); transition: none; }
.work-desc { font-family: var(--mono); font-size: 1rem; letter-spacing: .03em; color: rgba(240,236,228,.58); line-height: 1.85; text-align: justify; }
/* Spacer: pushes meta + pag to bottom */
.works-spacer { flex: 1; min-height: 24px; }
/* Meta: sits directly above pagination */
.work-meta { display: flex; flex-direction: column; gap: 9px; margin: 0; flex-shrink: 0; }
.work-meta-row { display: flex; gap: 28px; align-items: baseline; line-height: 1.4; }
.meta-label { font-family: var(--mono); font-size: 0.7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--red); width: 68px; flex-shrink: 0; }
.meta-value { font-family: var(--mono); font-size: 0.875rem; letter-spacing: .05em; color: rgba(240,236,228,.58); }
/* Counter: bottom centre of works-right (artwork column) */
.works-counter-wrap {
  position: absolute;
  bottom: 28px; left: 0; right: 0;
  display: flex; justify-content: center;
  z-index: 10; pointer-events: none;
}
.works-counter-wrap #pag-counter {
  font-family: var(--mono); font-size: 0.875rem;
  letter-spacing: .2em; color: rgba(240,236,228,.58);
  text-align: center;
}
.pag-slash { color: var(--red); }

/* Arrows: absolutely positioned on inner edges of works-right */
.works-arrow-prev,
.works-arrow-next {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  font-family: var(--mono); font-size: 1.5rem;
  color: var(--red);
  background: none; border: none;
  padding: 16px 20px;
  z-index: 10;
  transition: color .2s ease, opacity .2s ease;
  user-select: none;
  line-height: 1;
  cursor: pointer;
}
.works-arrow-prev { left: 0; }
.works-arrow-next { right: 0; }
.works-arrow-prev:hover,
.works-arrow-next:hover { color: var(--offwhite); }
.works-arrow-prev.disabled,
.works-arrow-next.disabled { opacity: .2; pointer-events: none; }
/* Artwork: directional swipe */
.slide-img {
  position: absolute; inset: 0;
  opacity: 0; transform: translateX(0);
  transition: opacity .32s ease, transform .38s cubic-bezier(.4,0,.2,1);
  display: block;
}
.slide-img.visible       { opacity: 1;  transform: translateX(0); }
.slide-img.slide-exit-left  { opacity: 0;  transform: translateX(-60px); }
.slide-img.slide-exit-right { opacity: 0;  transform: translateX(60px); }
.slide-img.slide-enter-right { opacity: 0; transform: translateX(60px);  transition: none; }
.slide-img.slide-enter-left  { opacity: 0; transform: translateX(-60px); transition: none; }

/* ══════════════════ PROCESS TAB — clean, no hover ══════════════════ */
/* ══ PROCESS: flat 3×5 grid — shared row baselines guaranteed ══ */
@media (min-width: 769px) {
  #panel-process {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: calc(28vh - 10px) auto auto 1fr;
    background: transparent;
    padding-left: 0; padding-right: 0;
  }
}

/* Gradient overlay: real div, no pseudo cascade ambiguity */
.proc-gradient {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, transparent 0%, #141414 100%);
  pointer-events: none; z-index: 2;
  opacity: 0; transition: opacity 2.5s ease;
  grid-column: 1 / -1; grid-row: 1 / -1;
}
#panel-process.gradient-in .proc-gradient { opacity: 0.5; }

/* Column padding — horizontal only, all rows */
.proc-label,
.proc-title,
.proc-body {
  padding-left: clamp(24px,3vw,40px);
  padding-right: clamp(24px,3vw,40px);
  position: relative; z-index: 3;
  align-self: end; /* bottom of their row = shared baseline */
}

/* Labels — row 2, sit at bottom of spacer row */
.proc-label {
  grid-row: 2;
  font-family: var(--mono) !important;
  font-size: 0.875rem !important;
  letter-spacing: .2em !important;
  color: var(--red) !important;
  line-height: 1 !important;
  padding-bottom: 14px;
  margin: 0 !important;
  opacity: 0; transition: opacity .9s ease;
}

/* Titles — row 3 */
.proc-title {
  grid-row: 3;
  font-family: var(--title-font) !important;
  font-size: clamp(1.6rem, 3.2vw, 2.3rem) !important;
  font-weight: 400 !important;
  letter-spacing: -.02em !important;
  line-height: 1 !important;
  text-transform: lowercase !important;
  color: var(--offwhite) !important;
  min-height: 0 !important;
  padding-left: calc(clamp(24px,3vw,40px) + 16px) !important;
  padding-bottom: 20px;
  margin: 0 !important;
  opacity: 0; transition: opacity 1s ease;
  align-self: start;
}
.proc-title::before { opacity: 1; left: clamp(24px,3vw,40px); }

/* Body — row 4 */
.proc-body {
  grid-row: 4;
  font-family: var(--mono) !important;
  font-size: 1rem !important;
  letter-spacing: .03em !important;
  color: rgba(240,236,228,.58) !important;
  line-height: 1.85 !important;
  overflow-wrap: break-word;
  margin: 0 !important;
  padding-top: 0;
  opacity: 0; transition: opacity 1.1s ease;
  align-self: start;
}

/* Reveal animations — triggered by JS on #panel-process */
#panel-process.title-in .proc-label { opacity: 1; }
#panel-process.title-in .proc-title { opacity: 1; transition-delay: .12s; }
#panel-process.body-in  .proc-body  { opacity: 1; }

/* ══════════════════ ABOUT TAB ══════════════════ */
@media (min-width: 769px) {
  #panel-about { display: grid; grid-template-columns: 2fr 1fr; }
}
.about-left {
  padding: clamp(36px,5vw,64px) clamp(32px,4vw,52px) !important;
  display: flex; flex-direction: column; justify-content: flex-start; gap: 40px;
  border-right: none !important;
  background: #000000 !important;
}
.about-bio-section, .about-links-section { display: flex; flex-direction: column; }
.about-bio { font-family: var(--mono); font-size: 1rem; letter-spacing: .03em; color: rgba(240,236,228,.58); line-height: 1.95; }
.about-bio p+p { margin-top: 16px; }
.about-bio em { color: var(--offwhite); font-style: normal; }
.about-right {
  padding: clamp(36px,5vw,64px) clamp(32px,4vw,52px) !important;
  display: flex; flex-direction: column;
  justify-content: center !important;
  background-color: var(--surface); position: relative; overflow: hidden;
}
.about-right::after {
  content: ''; position: absolute; inset: 0;
  background: #000000;
  pointer-events: none; z-index: 1;
}
.about-right::before { display: none; }
.about-right > * { position: relative; z-index: 3; }
.about-right .panel-section-label { margin-bottom: 24px; flex-shrink: 0; }
.about-links { display: flex; flex-direction: column; }
.about-link { font-family: var(--mono); font-size: 0.9rem; letter-spacing: .03em; color: var(--offwhite); text-decoration: none; text-transform: lowercase; padding: 10px 0; border-bottom: 1px solid var(--works-accent); display: flex; align-items: center; justify-content: space-between; transition: color .2s ease, padding-left .3s cubic-bezier(.16,1,.3,1), border-color .2s ease; cursor: none; }
.about-link:hover { color: var(--red); padding-left: 8px; border-bottom-color: var(--red); }
.about-link-arrow { color: var(--muted-grey); transition: color .2s ease, transform .3s ease; }
.about-link:hover .about-link-arrow { color: var(--red); transform: translateX(4px); }
.contact-form { display: flex; flex-direction: column; gap: 28px; }
.form-field { display: flex; flex-direction: column; gap: 10px; flex-shrink: 0; }
.form-field--message { flex: unset; display: flex; flex-direction: column; }
.form-field--message .form-textarea { flex: unset; min-height: unset; height: 120px !important; }
.form-submit { align-self: flex-start; margin-top: 16px; padding-top: unset; background: transparent; border: 2px solid var(--red); color: var(--offwhite); font-family: var(--mono); font-size: 0.875rem; letter-spacing: .22em; padding: 10px 24px; text-transform: lowercase; cursor: pointer; transition: background .2s ease, border-color .2s ease, color .2s ease; flex-shrink: 0; }
.form-label { font-family: var(--mono); font-size: 0.7rem; letter-spacing: .28em; text-transform: uppercase; color: var(--muted-grey); }
.form-input, .form-textarea { background: transparent; border: none; border-bottom: 1px solid var(--works-accent); color: var(--offwhite); font-family: var(--mono); font-size: 0.875rem; letter-spacing: .04em; padding: 8px 0; outline: none; width: 100%; cursor: none; transition: border-color .25s ease; caret-color: var(--red); }
.form-input::placeholder, .form-textarea::placeholder { color: var(--muted-grey); }
.form-input:focus, .form-textarea:focus { border-bottom: 2px solid var(--red); }
.form-textarea { resize: none; }
.form-submit { align-self: flex-start; margin-top: 16px; background: transparent; border: 2px solid var(--red); color: var(--offwhite); font-family: var(--mono); font-size: 0.875rem; letter-spacing: .22em; padding: 10px 24px; text-transform: lowercase; cursor: none; transition: background .2s ease, border-color .2s ease, color .2s ease; }
.form-submit:hover { background: var(--red); border-color: var(--red); color: #000; }

#pagination { display: none !important; }


/* ── Cursor: default everywhere, pointer on all interactive elements ── */
* { cursor: default !important; }

/* All clickable / interactive elements */
a,
button,
[role="button"],
select,
label,
.tab,
.pag-btn,
.works-arrow-prev,
.works-arrow-next,
.nm-item,
.nm-item *,
.about-link,
.form-submit,
#enter-btn,
#center-strip,
#banner-back,
.banner-back,
a.banner,
a#banner,
a.banner-wordmark,
body.page-works a#banner { cursor: pointer !important; }

/* Text inputs */
input, textarea { cursor: text !important; }

/* Hide custom cursor elements */
#cursor, #cursor-gap { display: none !important; }


/* ── Process background geometry ── */
.proc-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  grid-column: 1 / -1;
  grid-row: 1 / -1;
}
.proc-bg svg { position: absolute; inset: 0; width: 100%; height: 100%; }


/* ── Panel column dividers: works (33%) and about (66%) ── */
.panel-divider {
  display: none;
}
#panel-works .panel-divider  { left: calc(100% / 3); }
#panel-about .panel-divider  { left: calc(200% / 3); }


/* ── Slide inner image cycling ── */
.slide-inner-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  object-position: center;
  opacity: 0;
  transition: opacity .9s ease;
}
.slide-inner-img.active { opacity: 1; }


/* ── Works grid: centred, fixed max size so cells stay small ── */
.work-grid {
  position: absolute; inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0 44px 0; /* bottom offset for counter */
  box-sizing: border-box;
}

.work-grid-inner {
  width: 65.5% !important;  /* 63% + 4% */
  height: auto !important;
  gap: 36px !important;
}

.work-grid-inner {
  display: grid;
  /* columns + rows set dynamically by JS — do NOT hardcode here */
  gap: 6px;
  width: 100%;
  height: 100%;
}

.work-grid-cell {
  width: 100%; height: 100%;
  min-width: 0; min-height: 0;
  overflow: hidden;
  background: #0a0a0a;
  cursor: pointer;
  transition: filter .4s ease;
}
.work-grid-cell img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  filter: grayscale(0) brightness(1);
  transition: filter .35s ease;
}
/* JS adds .grid-hovered to the inner when any cell is hovered */
.work-grid-inner.grid-hovered .work-grid-cell img {
  filter: grayscale(1) brightness(.7);
}
.work-grid-inner.grid-hovered .work-grid-cell.cell-active img {
  filter: grayscale(0) brightness(1);
}

/* ── Lightbox ── */
#lightbox {
  position: fixed; inset: 0;
  z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity .35s ease;
}
#lightbox.open {
  opacity: 1; pointer-events: all;
}
#lightbox-bg {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.88);
  backdrop-filter: blur(6px);
}
#lightbox-img {
  position: relative; z-index: 1;
  max-width: 88vw; max-height: 88vh;
  object-fit: contain;
  box-shadow: 0 0 80px rgba(0,0,0,.6);
  transform: scale(.96);
  transition: transform .4s cubic-bezier(.16,1,.3,1);
}
#lightbox.open #lightbox-img {
  transform: scale(1);
}
#lightbox-close {
  position: absolute; top: 28px; right: 36px;
  z-index: 2;
  background: none; border: none;
  color: rgba(240,236,228,.5);
  font-size: 2rem; line-height: 1;
  cursor: pointer;
  transition: color .2s ease;
}
#lightbox-close:hover { color: var(--red); }



/* ── Work index background number — removed (watermark approach abandoned) ── */
.work-index-bg { display: none; }

/* ── Works index label — process-page style ─────────────────────────────── */
.work-idx-label {
  font-family: var(--mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.2em;
  color: var(--red);
  margin-bottom: 12px;
  line-height: 1;
  transition: opacity 0.3s ease;
}

/* ── All works page titles — flat 48px, no clamp ───────────────────────── */
body.page-works .work-title-main,
body.page-works .panel-section-label,
body.page-works .proc-title {
  font-size: 40px !important;
}

/* ── Works: no divider — content contrast creates separation ────────────── */
body.page-works .works-left {
  border-right: none !important;
}

/* ── About: opposite — gradient right (left), black left (right) ────────── */
body.page-works .about-left {
  background: #000000 !important;
  border-right: none !important;
}
body.page-works .about-right::after {
  background: linear-gradient(to bottom, #0a0a0a 0%, #1e1e1e 100%) !important;
}



/* ── Works right column: top-to-bottom gradient ─────────────────────────── */
body.page-works .works-right {
  background: linear-gradient(to bottom, #0a0a0a 0%, #1e1e1e 100%) !important;
  transition: filter 0.5s ease;
}

/* ── Pagination arrows: click kick animations ───────────────────────────── */
.works-arrow-prev,
.works-arrow-next {
  transition: color .2s ease, opacity .2s ease;
}

@keyframes arrow-kick-left {
  0%   { transform: translateY(-50%) translateX(0px);  opacity: 1; }
  40%  { transform: translateY(-50%) translateX(-4px); opacity: 0.5; }
  100% { transform: translateY(-50%) translateX(0px);  opacity: 1; }
}

@keyframes arrow-kick-right {
  0%   { transform: translateY(-50%) translateX(0px);  opacity: 1; }
  40%  { transform: translateY(-50%) translateX(4px);  opacity: 0.5; }
  100% { transform: translateY(-50%) translateX(0px);  opacity: 1; }
}

.works-arrow-prev.arrow-clicked {
  animation: arrow-kick-left 0.4s ease-out forwards;
}

.works-arrow-next.arrow-clicked {
  animation: arrow-kick-right 0.4s ease-out forwards;
}

/* Disabled arrows stay dim */
.works-arrow-prev.disabled,
.works-arrow-next.disabled {
  opacity: 0.15;
}



/* ── Works page: initial arrival animation ──────────────────────────────── */

/* Banners start hidden */
/* ── Works intro: transitions ONLY active during intro sequence ─────────── */
body.page-works.works-intro #banner,
body.page-works.works-intro .works-sub-banner,
body.page-works.works-intro .works-right,
body.page-works.works-intro #work-idx-label,
body.page-works.works-intro #work-title,
body.page-works.works-intro .work-desc-wrap,
body.page-works.works-intro .work-meta {
  transition: opacity .45s ease, transform .45s ease, filter .6s ease !important;
}



/* ── About intro: transitions ONLY active during intro sequence ─────────── */
#panel-about.about-intro .panel-section-label,
#panel-about.about-intro .about-bio,
#panel-about.about-intro .about-links,
#panel-about.about-intro .contact-form {
  transition: opacity .5s ease, transform .5s ease, filter .5s ease !important;
}

#panel-about.about-intro .panel-section-label {
  opacity: 0;
  filter: blur(6px);
  transform: translateY(6px);
}

#panel-about.about-intro .about-bio,
#panel-about.about-intro .about-links,
#panel-about.about-intro .contact-form {
  opacity: 0;
  transform: translateY(10px);
}

/* ── Spotify cells: no aspect-ratio, compact height ─────────────────────── */
.work-grid-cell--spotify {
  aspect-ratio: unset !important;
  height: 152px !important;
  min-height: 152px !important;
  background: transparent !important;
  opacity: 1 !important;
  transform: none !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE — HOME SCREEN (index.html)
   max-width: 768px — portrait phones and small tablets
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* ── GLOBAL MOBILE RESETS ─────────────────────────────────────────────── */

  html, body {
    cursor: auto !important;
    overflow: hidden;
  }
  #cursor, #cursor-gap { display: none !important; }

  body.site-intro #site-banner {
    animation: none !important;
    opacity: 1 !important;
  }

  /* ── BANNER — wordmark only, no tagline ───────────────────────────────── */

  .banner {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 0 16px !important;
    height: var(--banner-h);
  }

  /* hide the tagline on mobile */
  .banner .b-r {
    display: none !important;
  }

  /* hide centre slot */
  .banner .b-m {
    display: none !important;
  }

  .banner-wordmark {
    font-size: 1rem !important;
    letter-spacing: .22em !important;
  }

  .blink-g {
    width: 6px !important;
    height: 11px !important;
  }

  /* ── VIGNETTE — heavier on mobile ────────────────────────────────────── */

  #vignette {
    background: radial-gradient(ellipse 80% 80% at 50% 50%,
      transparent 0%,
      rgba(2,6,2,.35) 45%,
      rgba(2,6,2,.72) 72%,
      rgba(2,6,2,.95) 100%
    );
  }

  /* ── STARS ────────────────────────────────────────────────────────────── */

  #stars {
    opacity: .55 !important;
    filter: brightness(1.1) !important;
  }

  /* ── HOME CONTAINER ───────────────────────────────────────────────────── */

  #home {
    top: var(--banner-h);
    overflow: hidden;
    /* 3-row grid: top circle | button | bottom circle */
    display: grid !important;
    grid-template-rows: 1fr auto 1fr;
    grid-template-columns: 1fr;
  }

  /* remove from grid flow entirely */
  #home .grid-svg { display: none !important; }
  #center-strip   { display: none !important; }
  #hover-overlay  { display: none !important; }

  /* dissolve #main — its children become direct grid items of #home */
  #main {
    display: contents !important;
  }

  /* void circle — top row */
  .half-left {
    grid-row: 1 !important;
    grid-column: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-right: none !important;
  }

  /* freq circle — bottom row */
  .half:not(.half-left) {
    grid-row: 3 !important;
    grid-column: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* button — middle row */
  #enter-wrap {
    grid-row: 2 !important;
    grid-column: 1 !important;
    position: static !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    padding: 24px 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 20;
  }

  /* ── CIRCLES ─────────────────────────────────────────────────────────── */

  :root {
    --circle-size: clamp(170px, 46vw, 280px);
    --dot-cell:    clamp(24px, 7vw, 54px);
  }

  #void-circle  { border-width: 1px !important; }

  #orbit-ring {
    width:  var(--circle-size) !important;
    height: var(--circle-size) !important;
  }

  .o-dot {
    width:  var(--dot-cell) !important;
    height: var(--dot-cell) !important;
    outline-offset: 2px !important;
  }

  #circ-cross {
    width:  var(--circle-size) !important;
    height: var(--circle-size) !important;
  }

  /* ── ENTER BUTTON ────────────────────────────────────────────────────── */

  #enter-btn {
    cursor: pointer !important;
    width:  clamp(160px, 55vw, 240px) !important;
    height: 52px !important;
    font-size: 0.85rem !important;
    letter-spacing: .38em !important;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  /* suppress desktop hover tease — no hover on touch */
  body.vline-tease:not(.nav-open) #enter-btn {
    background:   #000 !important;
    border-color: rgba(237,76,12,.25) !important;
    color:        var(--offwhite) !important;
    letter-spacing: .38em !important;
    box-shadow:   none !important;
  }

  #enter-btn:active {
    background:   var(--red) !important;
    border-color: var(--red) !important;
    color: #000 !important;
  }

  /* ── NAV — single orange fill sweeps up from bottom ─────────────────── */

  #nav {
    top: var(--banner-h);
  }

  /* Collapse both fills into one: right fill covers the full screen,
     sweeping upward from the bottom. Left fill is hidden entirely. */

  #nav-left-fill {
    display: none !important;
  }

  #nav-right-fill {
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 0 !important;
    transition: none !important;
  }

  #nav-right-fill.expand {
    height: 100% !important;
    transition: height .52s cubic-bezier(.77,0,.18,1) !important;
  }

  #nav-right-fill.retract {
    height: 0 !important;
    left: 0 !important;
    transition: height .4s cubic-bezier(.4,0,1,1) !important;
  }

  /* ── NAV MENU items — vertical list ──────────────────────────────────── */

  #nm-track {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: clamp(6px, 2.5vh, 20px);
    width: 100%;
    padding: 0 clamp(24px, 8vw, 48px) !important;
    transform: translateY(0) !important;
  }

  .nm-item {
    flex: 0 0 auto;
    width: 100%;
    padding: clamp(10px, 2vh, 16px) 0 !important;
    min-height: 48px;
    cursor: pointer !important;
    border-bottom: none;
  }

  .nm-head {
    height: auto !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
    padding-bottom: 0 !important;
  }

  .nm-idx {
    margin-bottom: 0 !important;
    font-size: 0.7rem !important;
    opacity: .55;
  }

  .nm-label {
    font-size: clamp(2.8rem, 13vw, 4.2rem) !important;
    letter-spacing: -.02em !important;
    text-align: left !important;
  }

  .nm-sub {
    font-size: 0.95rem !important;
    font-weight: 500 !important;
    letter-spacing: .08em !important;
    padding-top: .4em !important;
    opacity: .75 !important;
    transform: none !important;
    transition: none !important;
    text-align: right !important;
    width: 100% !important;
    display: block !important;
  }

  #nav.ready .nm-item .nm-sub {
    opacity: .65 !important;
    transform: none !important;
  }

  #nm-track:hover .nm-item { opacity: 1 !important; }

  .nm-line {
    transform: scaleX(1) !important;
    margin-top: .5em !important;
    background: rgba(0,0,0,.3) !important;
  }

  .nm-vignette { display: none !important; }

  #nav-menu {
    padding: clamp(16px, 4vw, 32px) !important;
    justify-content: center !important;
    align-items: flex-start !important;
  }

  /* ── BACK ARROW ───────────────────────────────────────────────────────── */

  .banner-back {
    cursor: pointer !important;
    font-size: 1rem !important;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    padding: .6em 1em !important;
    margin: -.6em -1em !important;
  }

  /* ── HOME EXIT ANIMATION — simple fade only ───────────────────────────── */

  #home.out #two-wrap,
  #home.out #freq-wrap,
  #home.out #enter-wrap {
    transition: opacity .35s ease !important;
    filter: none !important;
    scale: 1 !important;
  }

} /* end @media (max-width: 768px) */

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE — WORKS PAGE (works.html)
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  body.page-works { overflow: hidden !important; }

  /* ── BANNER ── */
  body.page-works #banner {
    display: flex !important;
    align-items: center !important;
    padding: 0 16px !important;
    cursor: pointer !important;
  }
  body.page-works #banner:hover { background: #000 !important; }
  body.page-works #banner .b-r,
  body.page-works #banner .b-m { display: none !important; }
  body.page-works #banner .b-l { font-size: 1rem !important; letter-spacing: .22em !important; }

  /* ── TABS ── */
  .works-sub-banner {
    height: 52px !important;
    background: #000 !important;
    border: none !important;
    border-top: none !important;
    border-bottom: 1px solid rgba(237,76,12,.2) !important;
  }
  .works-sub-banner .tab {
    font-size: 0.95rem !important;
    letter-spacing: .18em !important;
    padding-left: 0 !important;
    justify-content: center !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    background: #000 !important;
    color: rgba(240,236,228,.4) !important;
    border-right: none !important;
  }
  .works-sub-banner .tab.active {
    background: #000 !important;
    color: #f0ece4 !important;
  }
  .works-sub-banner .tab.active::after {
    left: 25% !important;
    right: 25% !important;
  }

  /* ── STAGE — fixed box below both bars ── */
  body.page-works #stage {
    position: fixed !important;
    top: 96px !important; /* 44px banner + 52px tabs */
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    overflow: hidden !important;
  }

  /* ── PANELS — fill stage, scroll vertically ── */
  body.page-works .panel {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 72px !important;
  }
  body.page-works .panel.active {
    opacity: 1 !important;
    display: block !important;
    pointer-events: all !important;
    visibility: visible !important;
  }

  /* ── HIDE DESKTOP STRUCTURE ── */
  body.page-works .works-left,
  body.page-works .works-right,
  body.page-works .panel-divider,
  body.page-works .stage-line,
  body.page-works #pag-prev,
  body.page-works #pag-next,
  body.page-works .works-counter-wrap { display: none !important; }

  /* ── WORKS CONTENT (built by JS) ── */
  #mobile-works-content {
    display: block;
    padding: 28px 20px 0;
    color: #f0ece4;
  }

  .m-idx {
    font-family: var(--mono);
    font-size: 0.7rem;
    letter-spacing: .22em;
    color: var(--red);
    margin-bottom: 10px;
  }

  .m-title {
    font-family: var(--title-font);
    font-size: clamp(1.9rem, 8vw, 2.4rem) !important;
    font-weight: 400;
    letter-spacing: -.02em;
    color: #f0ece4;
    text-transform: lowercase;
    line-height: 1.05;
    margin-bottom: 16px;
    padding-left: 14px;
    position: relative;
  }
  .m-title::before {
    content: '';
    position: absolute;
    left: 0; top: 0.1em;
    height: 0.82em; width: 2px;
    background: var(--red);
    border-radius: 1px;
  }

  .m-desc {
    font-family: var(--mono);
    font-size: 0.875rem;
    letter-spacing: .03em;
    color: rgba(240,236,228,.55);
    line-height: 1.85;
    margin-bottom: 24px;
  }

  .m-meta {
    display: flex;
    flex-direction: column;
    padding: 0 0 28px;
    margin-bottom: 28px;
  }
  .m-meta-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 14px 0;
    border-bottom: 1px solid rgba(237,76,12,.12);
    text-align: center;
  }
  .m-meta-item:first-child { border-top: 1px solid rgba(237,76,12,.12); }
  .m-meta-label { font-family: var(--mono); font-size: 0.6rem; letter-spacing: .22em; color: var(--red); text-transform: uppercase; }
  .m-meta-value { font-family: var(--mono); font-size: 0.875rem; letter-spacing: .04em; color: rgba(240,236,228,.7); }

  .m-images { display: flex; flex-direction: column; gap: 24px; margin: 0 -20px; }
  .m-images img { width: 100%; height: auto; display: block; }
  .m-video-cell { position: relative; width: 100%; cursor: pointer; }
  .m-video-cell img { width: 100%; height: auto; display: block; }
  .m-play-icon { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
  .m-play-icon svg { width: 48px; height: 48px; color: #f0ece4; opacity: .8; filter: drop-shadow(0 2px 8px rgba(0,0,0,.7)); }
  .m-spotify-cell { width: 100%; height: 152px; }
  .m-spotify-cell iframe { width: 100%; height: 152px; border: none; display: block; }

  /* ── BOTTOM NAV BAR ── */
  #mobile-works-nav {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: 56px;
    background: #000;
    border-top: 1px solid rgba(237,76,12,.2);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 32px;
    z-index: 300;
  }
  #mobile-works-nav .m-nav-btn {
    font-family: var(--mono);
    font-size: 1.4rem;
    color: var(--red);
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px 20px;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: opacity .15s ease;
  }
  #mobile-works-nav .m-nav-btn:active { opacity: .5; }
  #mobile-works-nav .m-nav-btn.disabled { opacity: .2; pointer-events: none; }
  #mobile-works-nav .m-nav-counter { font-family: var(--mono); font-size: 0.8rem; letter-spacing: .18em; color: rgba(240,236,228,.5); }

  /* ── PROCESS ── */
  body.page-works #panel-process {
    display: flex !important;
    flex-direction: column !important;
    padding: 36px 20px 72px !important;
  }
  body.page-works #panel-process .proc-bg,
  body.page-works #panel-process .proc-gradient { display: none !important; }
  body.page-works #panel-process .proc-label { grid-column: auto !important; grid-row: auto !important; font-size: 0.7rem !important; margin-top: 44px !important; margin-bottom: 8px !important; }
  body.page-works #panel-process .proc-label:first-child { margin-top: 0 !important; }
  body.page-works #panel-process .proc-title { grid-column: auto !important; grid-row: auto !important; font-size: clamp(1.9rem, 8vw, 2.4rem) !important; margin-bottom: 16px !important; min-height: 0 !important; }
  body.page-works #panel-process .proc-body { grid-column: auto !important; grid-row: auto !important; font-size: 0.875rem !important; line-height: 1.85 !important; padding-bottom: 44px !important; border-bottom: 1px solid rgba(237,76,12,.1) !important; }
  body.page-works #panel-process .proc-body:last-child { border-bottom: none !important; padding-bottom: 0 !important; }

  /* ── ABOUT ── */
  body.page-works #panel-about { display: block !important; }
  body.page-works .about-left { display: block !important; padding: 36px 20px 0 !important; border-right: none !important; background: #000 !important; width: 100% !important; }
  body.page-works .about-right { display: block !important; padding: 36px 20px 48px !important; width: 100% !important; }
  body.page-works .about-right::after { display: none !important; }
  body.page-works .about-left .panel-section-label,
  body.page-works .about-right .panel-section-label { font-size: clamp(1.9rem, 8vw, 2.4rem) !important; margin-bottom: 20px !important; }
  .about-bio { font-size: 0.875rem !important; line-height: 1.95 !important; margin-bottom: 36px !important; }
  .about-link { cursor: pointer !important; padding: 14px 0 !important; font-size: 0.9rem !important; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
  .form-input, .form-textarea { cursor: auto !important; font-size: 1rem !important; padding: 12px 0 !important; }
  .form-submit { cursor: pointer !important; width: 100% !important; height: 52px !important; font-size: 0.875rem !important; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }

} /* end works mobile */