/* ============================================================
   SIDDHARTH SHUKLA :: canonical portfolio homepage (V3, cinematic editorial)
   Responsive across phone, tablet and desktop. Native scroll
   (no smooth-scroll lib), IntersectionObserver reveals, CSS
   scroll-snap galleries.
   ============================================================ */
:root{
  --black:#070707;
  --ink:#0b0b0d;
  --white:#F6F4F0;
  --orange:#FF5A1F;
  --orange-soft:#FF7A45;
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);
  --pad:clamp(20px,6.4vw,32px);
  --font:'Poppins',system-ui,-apple-system,sans-serif;

  --dim:rgba(246,244,240,.66);
  --faint:rgba(246,244,240,.36);
  --hair:rgba(246,244,240,.12);

  /* Frosted glass, used sparingly (small controls only, for performance) */
  --glass-bg:rgba(255,255,255,.07);
  --glass-bd:rgba(255,255,255,.15);
  --glass-blur:blur(12px);
  --glass-radius:20px;
  --glass-shadow:0 10px 30px -18px rgba(0,0,0,.6);

  /* safe-area shorthands */
  --sat:env(safe-area-inset-top);
  --sab:env(safe-area-inset-bottom);
  --sal:env(safe-area-inset-left);
  --sar:env(safe-area-inset-right);
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--black)}
body{
  background:var(--black);color:var(--white);
  font-family:var(--font);font-weight:400;line-height:1.5;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;min-height:100svh;min-height:100dvh;
}
body.is-locked{overflow:hidden}
img,video{display:block;max-width:100%}
picture{display:contents}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
button{font-family:inherit;background:none;border:none;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
em{font-style:italic}
h1,h2,h3{font-weight:800;letter-spacing:-.04em;line-height:1.02}
:focus-visible{outline:2px solid var(--orange-soft);outline-offset:3px;border-radius:4px}
::selection{background:var(--orange);color:#0a0a0a}
.skip-link{position:absolute;left:-9999px;top:0;z-index:100000;background:var(--orange);
  color:#0a0a0a;padding:10px 16px;font-weight:600;border-radius:0 0 6px 0}
.skip-link:focus{left:0}
/* visually hidden but present for screen readers/SEO heading structure */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* anchor targets clear the fixed header when jumped to. Uses --sat rather
   than a flat px value, a notched phone's header is taller (safe-area
   inset + its own content), a flat number would leave the section
   heading tucked partly behind the header on exactly those devices. */
#work,#stack,#about{scroll-margin-top:calc(var(--sat) + 84px)}

.chip{display:inline-block;padding:.5em .9em;border-radius:20px;font-size:.58rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--white);
  background:var(--glass-bg);border:1px solid var(--glass-bd)}

/* ---------- frosted glass (small controls only) ---------- */
.glass{
  position:relative;background:var(--glass-bg);
  backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-bd);border-radius:var(--glass-radius);
  box-shadow:var(--glass-shadow);
}

/* ---------- grain ---------- */
.grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.07;mix-blend-mode:overlay;
  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='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E")}

/* ============ SIGNATURE BOOT (drawn signature → header) ============ */
.sigboot{position:fixed;inset:0;z-index:100000;display:none;pointer-events:none}
.sigboot__bg{position:absolute;inset:0;background:var(--black);opacity:1;will-change:opacity;transition:opacity .58s var(--ease)}
.sigboot__stage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:0 var(--pad)}
.sigboot__sig{--sig-w:min(74vw,360px);position:relative;display:block;width:var(--sig-w);transform-origin:top left;will-change:transform;backface-visibility:hidden}
.sigboot__sig img{display:block;width:100%;height:auto;user-select:none;-webkit-user-select:none;-webkit-user-drag:none;clip-path:inset(0 100% 0 0)}
.sigboot__nib{position:absolute;top:-8%;left:0;width:2px;height:116%;opacity:0;pointer-events:none;
  background:linear-gradient(180deg,transparent,var(--orange) 20%,#fff 50%,var(--orange) 80%,transparent);
  box-shadow:0 0 14px 3px rgba(255,90,31,.55),0 0 4px 1px rgba(255,255,255,.6)}
.sigboot.is-draw .sigboot__sig img{animation:sigDraw 1200ms cubic-bezier(.55,.06,.22,1) forwards}
.sigboot.is-draw .sigboot__nib{animation:sigNib 1200ms cubic-bezier(.55,.06,.22,1) forwards}
@keyframes sigDraw{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0% 0 0)}}
@keyframes sigNib{0%{opacity:0;transform:translateX(0)}10%{opacity:1}86%{opacity:.9}100%{opacity:0;transform:translateX(var(--sig-w))}}
@media (prefers-reduced-motion:reduce){
  .sigboot__sig img{clip-path:none!important;animation:none!important}
  .sigboot__nib{display:none}
}

/* ============ HEADER ============ */
.fnav{position:fixed;top:0;left:0;right:0;z-index:1400;
  display:flex;align-items:center;justify-content:space-between;gap:.6rem;pointer-events:none;
  padding:calc(var(--sat) + 10px) var(--pad) 10px}
.fnav::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:rgba(9,9,11,.55);
  -webkit-mask-image:linear-gradient(180deg,#000 40%,transparent);
  mask-image:linear-gradient(180deg,#000 40%,transparent);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  opacity:var(--nav,0);transition:opacity .5s var(--ease)}
.fnav > *{pointer-events:auto;position:relative}
.fnav__brand{display:inline-flex;align-items:center;height:44px;transition:transform .4s var(--ease)}
.fnav__brand:active{transform:scale(.97)}
/* signature wordmark, ~5% larger than the previous 32-42px scale */
.fnav__logo{height:clamp(34px,9.5vw,44px);width:auto;display:block;pointer-events:none;
  filter:drop-shadow(0 1px 12px rgba(0,0,0,.55))}
.fnav__right{display:inline-flex;align-items:center;gap:.55rem}

/* MENU button */
.fnav__menu{display:inline-flex;align-items:center;gap:.55em;height:44px;padding:0 .95em 0 1.05em;border-radius:22px;
  font-size:.72rem;font-weight:600;letter-spacing:.04em;color:var(--white);transition:transform .4s var(--ease)}
.fnav__menu:active{transform:scale(.95)}
.fnav__menu-txt{line-height:1}
.fnav__burger{display:inline-flex;flex-direction:column;gap:4px;width:16px}
.fnav__burger i{display:block;height:1.6px;width:100%;background:var(--white);border-radius:2px;
  transition:transform .4s var(--ease),opacity .3s var(--ease)}
body.menu-open .fnav__burger i:nth-child(1){transform:translateY(2.8px) rotate(45deg)}
body.menu-open .fnav__burger i:nth-child(2){transform:translateY(-2.8px) rotate(-45deg)}

/* ============ SOUND TOGGLE (upper right) ============ */
.snd{width:44px;height:44px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  color:var(--white);flex:none;transition:transform .4s var(--ease),opacity .45s var(--ease)}
.snd:active{transform:scale(.92)}
.snd svg{width:19px;height:19px;overflow:visible}
.snd__wave{transform-origin:4px center;transition:opacity .35s var(--ease),transform .35s var(--ease)}
.snd__wave.w2{transition-delay:.05s}
.snd__slash{stroke-dasharray:26;transition:stroke-dashoffset .4s var(--ease)}
.snd:not(.is-on) .snd__wave{opacity:.22;transform:scaleX(.35)}
.snd:not(.is-on) .snd__slash{stroke-dashoffset:0}
.snd.is-on .snd__wave{opacity:1;transform:scaleX(1)}
.snd.is-on .snd__slash{stroke-dashoffset:26}
.snd__ring{position:absolute;inset:0;border-radius:50%;pointer-events:none}
.snd.is-on .snd__ring{animation:sndpulse 2.6s var(--ease) infinite}
@keyframes sndpulse{0%{box-shadow:0 0 0 0 rgba(255,90,31,.4)}70%{box-shadow:0 0 0 9px rgba(255,90,31,0)}100%{box-shadow:0 0 0 0 rgba(255,90,31,0)}}

/* ============ MENU OVERLAY ============ */
.menu{position:fixed;inset:0;z-index:1350;display:flex;flex-direction:column;justify-content:center;
  padding:calc(var(--sat) + 88px) var(--pad) calc(var(--sab) + 32px);
  background:rgba(7,7,7,.86);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .4s var(--ease),transform .5s var(--ease),visibility .4s}
.menu.is-open{opacity:1;visibility:visible;transform:none}
/* nav + foot travel as one centred group (no competing auto-margins
   pulling each half to its own edge), so the whole composition balances
   inside the overlay instead of pinning to the bottom with a dead gap
   above it */
.menu__nav{display:flex;flex-direction:column;gap:.5rem}
.menu__nav a{display:flex;align-items:baseline;gap:.75rem;padding:.3em 0;
  font-size:clamp(1.3rem,7vw,1.9rem);font-weight:800;letter-spacing:-.035em;line-height:1.12;
  color:var(--white);opacity:0;transform:translateY(14px)}
.menu.is-open .menu__nav a{opacity:1;transform:none;transition:opacity .5s var(--ease),transform .6s var(--ease)}
.menu.is-open .menu__nav a:nth-child(1){transition-delay:.06s}
.menu.is-open .menu__nav a:nth-child(2){transition-delay:.11s}
.menu.is-open .menu__nav a:nth-child(3){transition-delay:.16s}
.menu.is-open .menu__nav a:nth-child(4){transition-delay:.21s}
.menu__nav a span{font-size:.6rem;font-weight:600;letter-spacing:.1em;color:var(--orange);
  font-variant-numeric:tabular-nums;transform:translateY(-.2em)}
.menu__nav a:active{color:var(--orange-soft)}
.menu__foot{margin-top:clamp(1.8rem,7vh,2.6rem)}
.menu__cta{display:inline-flex;align-items:center;gap:.5em;padding:.9em 1.5em;border-radius:22px;
  background:var(--orange);color:#0a0a0a;font-weight:700;font-size:.88rem}
.menu__cta i{font-style:normal}
.menu__contact{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;margin-top:1.5rem}
.menu__contact a{font-size:.82rem;font-weight:500;color:var(--dim);
  border-bottom:1px solid transparent;transition:color .3s,border-color .3s}
.menu__contact a:active{color:var(--white);border-color:var(--hair)}

/* ============ HERO (full viewport cinematic film) ============ */
.hero{position:relative;height:100svh;height:100dvh;min-height:560px;overflow:hidden;z-index:2;
  background:var(--black)}
.hero__bg{position:absolute;inset:0;z-index:0}
.hero__bg video,.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:center 32%}
.hero__scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(7,7,7,.42) 0%,rgba(7,7,7,0) 22%,rgba(7,7,7,0) 46%,rgba(7,7,7,.55) 78%,rgba(7,7,7,.94) 100%),
    radial-gradient(120% 90% at 50% 20%,transparent 45%,rgba(7,7,7,.28) 100%)}
.hero__foot{position:absolute;left:var(--pad);right:var(--pad);z-index:2;
  bottom:calc(var(--sab) + 78px)}
.hero__eyebrow{display:inline-flex;align-items:center;gap:.55em;font-size:.6rem;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:rgba(246,244,240,.82);margin-bottom:.75rem}
.hero__eyebrow i{width:6px;height:6px;border-radius:50%;background:var(--orange);flex:none;
  box-shadow:0 0 9px 1px rgba(255,90,31,.7);animation:availpulse 2.6s var(--ease) infinite}
.hero__title{font-size:clamp(1.7rem,7.6vw,2.5rem);font-weight:700;letter-spacing:-.03em;line-height:1.12;
  max-width:15ch;text-shadow:0 2px 30px rgba(0,0,0,.5)}
.hero__title em{color:var(--orange);font-weight:500;font-style:italic}
.hero__scroll{position:absolute;left:50%;transform:translateX(-50%);z-index:2;
  bottom:calc(var(--sab) + 22px);display:flex;flex-direction:column;align-items:center;gap:.55em;
  font-size:.54rem;letter-spacing:.26em;text-transform:uppercase;color:rgba(246,244,240,.6)}
.hero__scroll i{display:block;width:1px;height:30px;background:rgba(246,244,240,.28);position:relative;overflow:hidden}
.hero__scroll i::after{content:"";position:absolute;top:0;left:0;width:100%;height:42%;background:var(--orange);
  animation:scrolldrop 2.2s var(--ease) infinite}
@keyframes scrolldrop{0%{transform:translateY(-100%)}60%,100%{transform:translateY(240%)}}
@keyframes availpulse{0%{box-shadow:0 0 0 0 rgba(255,90,31,.5)}70%{box-shadow:0 0 0 7px rgba(255,90,31,0)}100%{box-shadow:0 0 0 0 rgba(255,90,31,0)}}

/* ============ ONE-LINE INTRO ============ */
.intro{position:relative;z-index:2;padding:clamp(56px,12vh,96px) var(--pad) clamp(40px,8vh,64px)}
.intro__line{font-size:clamp(1.5rem,6.6vw,2.3rem);font-weight:700;letter-spacing:-.035em;line-height:1.16;
  max-width:20ch;text-wrap:balance}
.intro__line em{color:var(--orange);font-weight:500;font-style:italic}

/* ============ CATEGORY WALL (vertical stack) ============ */
.wall{position:relative;z-index:2;padding-bottom:clamp(20px,4vh,36px)}
.wall__head{display:flex;align-items:center;justify-content:space-between;
  padding:0 var(--pad);margin-bottom:1.1rem}
.wall__eyebrow{font-size:.6rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--orange)}

/* The six categories read top to bottom in the normal document flow: one
   complete section, then the next. No horizontal scroller, no scroll-snap,
   no swipe affordance. Each card keeps its own template untouched, the only
   thing that changed is how the cards are laid out relative to each other. */
.wall__track{display:flex;flex-direction:column;gap:clamp(56px,10vh,88px);padding:0 var(--pad)}

.cat{position:relative;width:100%;max-width:460px;margin-inline:auto}
.cat__meta{display:flex;align-items:center;gap:.7rem;margin-bottom:.7rem}
.cat__no{font-size:.72rem;font-weight:700;letter-spacing:.12em;color:var(--orange);font-variant-numeric:tabular-nums}
.cat__label{font-size:.56rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}

/* the poster cluster: four frames, tight gaps, staggered like a campaign wall.
   video sits top-left and (where a second film exists) bottom-right. */
.cat__cluster{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cat__col{display:flex;flex-direction:column;gap:8px}
.cat__col--b{transform:translateY(26px)}
.frame{position:relative;overflow:hidden;border-radius:12px;background:rgba(128,128,128,.09);
  box-shadow:0 24px 44px -30px rgba(0,0,0,.8);
  opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .9s var(--ease)}
.cat.in .frame{opacity:1;transform:none}
.cat.in .frame:nth-child(2){transition-delay:.08s}
.frame img,.frame video{width:100%;height:100%;object-fit:cover;display:block}
.frame--43{aspect-ratio:3/4}
.frame--45{aspect-ratio:4/5}
.frame--11{aspect-ratio:1/1}
.frame__play{position:absolute;left:9px;bottom:9px;z-index:2;display:inline-flex;align-items:center;gap:.4em;
  padding:.36em .62em;border-radius:11px;font-size:.5rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--white);background:rgba(10,10,12,.34);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.2)}
.frame__play b{width:0;height:0;border-left:6px solid var(--white);border-top:4px solid transparent;border-bottom:4px solid transparent}

/* the title sits below the cluster with normal breathing room, never
   cropping or overlapping the imagery above it */
.cat__title{position:relative;z-index:1;margin-top:.9rem;margin-bottom:.15rem;
  font-size:clamp(1.9rem,9.5vw,2.7rem);font-weight:800;letter-spacing:-.05em;line-height:.96}
.cat__title em{color:var(--orange);font-weight:500;font-style:italic}
.cat__foot{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:.6rem}
.cat__line{font-size:.86rem;line-height:1.5;color:var(--dim);max-width:30ch;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* circular arrow CTA, replaces the old text pill: subtle but unmistakably tappable */
.cat__enter{flex:none;width:46px;height:46px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;color:var(--white);
  border:1px solid var(--glass-bd);background:var(--glass-bg);
  transition:transform .4s var(--ease),background .4s var(--ease),border-color .4s var(--ease)}
.cat__enter svg{width:18px;height:18px;transition:transform .4s var(--ease)}
.cat__enter:active{transform:scale(.92);background:var(--orange);border-color:var(--orange);color:#0a0a0a}
.cat__enter:active svg{transform:translate(2px,-2px)}

/* ============ CREATIVE STACK (compact marquee) ============ */
.stack{position:relative;z-index:2;padding:clamp(48px,9vh,80px) 0 clamp(24px,4vh,40px);overflow:hidden;isolation:isolate}
/* Radius + center kept well clear of the top and bottom edge (this section
   is short, so a glow sized/positioned close to either edge decays too late
   and gets clipped by overflow:hidden into a hard-edged rectangle — the two
   seams above/below Creative Stack). */
.stack::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(46% 26% at 82% 42%,rgba(255,90,31,.06),transparent 52%)}
.stack > *{position:relative;z-index:1}
.stack__head{margin-bottom:1.6rem;padding:0 var(--pad)}
.stack__head .chip{margin-bottom:1rem}
.stack__head h2{font-size:clamp(1.7rem,8vw,2.4rem)}
.stack__head h2 em{color:var(--orange);font-weight:500}
.stack__marquee{position:relative;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.stack__row{display:flex;width:max-content;gap:0;animation:marquee 26s linear infinite}
.stack__marquee:hover .stack__row{animation-play-state:paused}
.stack.is-hidden .stack__row{animation-play-state:paused}
.stack__tool{flex:none;display:flex;align-items:center;justify-content:center;padding:0 clamp(22px,7.4vw,42px)}
.stack__tool img{height:58px;width:auto;max-width:none;object-fit:contain;filter:brightness(0) invert(1);opacity:.82}
.stack__tool[data-logo="elevenlabs"] img{transform:scale(.8)}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ============ PROFILE TEASER ============ */
.pfteaser{position:relative;z-index:2;padding:clamp(40px,7vh,64px) var(--pad) clamp(64px,12vh,110px);overflow:hidden;isolation:isolate}
/* Center dropped to ~46% and radius kept short so the warm glow decays to
   fully transparent before it reaches the section's top edge (the Creative
   Stack boundary) or bottom edge. Previously it sat at 14% with an expanded
   negative inset, so its hot-centre landed a few px ABOVE the box top and
   overflow:hidden clipped it at near-full intensity — a warm band with a
   hard top edge right below the engine logos. inset:0 keeps the percentage
   sizing relative to the box so the decay is predictable. */
.pfteaser::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(52% 30% at 80% 46%,rgba(255,90,31,.09),transparent 55%)}
.pfteaser > *{position:relative;z-index:1}
.pfteaser__portrait{width:56%;max-width:260px;aspect-ratio:3/4;border-radius:16px;overflow:hidden;
  margin-bottom:2rem;box-shadow:0 46px 74px -40px rgba(0,0,0,.8)}
.pfteaser__portrait img{width:100%;height:100%;object-fit:cover}
.pfteaser__eyebrow{display:inline-block;font-size:.6rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  color:var(--orange);margin-bottom:1rem}
.pfteaser h2{font-size:clamp(1.7rem,8vw,2.5rem);line-height:1.08}
.pfteaser h2 em{color:var(--orange);font-weight:500}
.pfteaser p{margin-top:1.2rem;color:var(--dim);font-size:1rem;line-height:1.65;max-width:42ch}
.pfteaser__cta{display:inline-flex;align-items:center;gap:.6em;margin-top:2rem;
  padding:1em 1.7em;border-radius:24px;background:var(--white);color:#0a0a0a;
  font-weight:700;font-size:.92rem;transition:transform .4s var(--ease)}
.pfteaser__cta svg{transition:transform .4s var(--ease)}
.pfteaser__cta:active{transform:scale(.97)}
.pfteaser__cta:active svg{transform:translateX(3px)}

/* ============ FOOTER ============ */
.foot{position:relative;z-index:2;background:var(--orange);color:#0a0a0a;overflow:hidden;
  padding:clamp(72px,14vh,120px) var(--pad) calc(var(--sab) + 34px)}
.foot::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(70% 50% at 50% 0%,rgba(255,255,255,.14),transparent 60%)}
.foot > *{position:relative;z-index:1}
.foot__eyebrow{font-size:.6rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(10,10,10,.62);margin-bottom:1.2rem}
.foot h2{font-size:clamp(2.3rem,12vw,3.7rem);line-height:.96;color:#0a0a0a;letter-spacing:-.045em}
.foot h2 em{font-weight:500;font-style:italic}
.foot__cta{margin-top:2rem;display:flex;flex-wrap:wrap;gap:.7rem}
.btn-solid{display:inline-flex;align-items:center;gap:.6em;padding:.9em 1.5em;border-radius:22px;
  background:rgba(16,12,9,.92);color:var(--white);font-weight:600;font-size:.84rem;
  transition:transform .4s var(--ease)}
.btn-solid:active{transform:scale(.96)}
.btn-ghost{display:inline-flex;align-items:center;gap:.5em;padding:.9em 1.4em;border-radius:22px;
  border:1px solid rgba(10,10,10,.28);color:#0a0a0a;font-weight:600;font-size:.84rem;
  transition:transform .4s var(--ease)}
.btn-ghost:active{transform:scale(.96)}
.foot__grid{margin-top:clamp(40px,8vh,72px);border-top:1px solid rgba(10,10,10,.2);padding-top:1.8rem;
  display:flex;flex-direction:column;gap:1.5rem}
.foot__col{display:flex;flex-direction:column;gap:.5em;min-width:0}
.foot__label{font-size:.56rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:rgba(10,10,10,.6);margin-bottom:.3em}
.foot__col a{font-weight:600;font-size:clamp(.86rem,3.8vw,.98rem);color:#0a0a0a;max-width:100%}
.foot__col a i{font-style:normal;font-size:.82em;opacity:.62}
.foot__col a:active{opacity:.62}
.foot__base{margin-top:2.4rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  font-size:.66rem;letter-spacing:.03em;color:rgba(10,10,10,.62)}
.foot__base a{font-weight:600;display:inline-flex;align-items:center;gap:.3em}
.foot__base a i{font-style:normal}

/* ============ SHARED COMPONENTS (profile.html, universe.html, universes.html) ============
   These pages also load mobile.css. Their .ubar top-bar layout lives in their own
   CSS; the circular glass icon buttons are shared here, so keep them even though
   the homepage itself no longer uses them. */
.ubar__back.glass,.ubar__profile.glass,.ubar__close.glass,.ubar__home.glass{
  border-radius:50%;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.15);
  box-shadow:0 6px 20px -12px rgba(0,0,0,.5);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
/* ============ REVEAL primitive ============ */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .9s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto !important}
  .reveal,.frame,.cat.in .frame{opacity:1;transform:none;transition:none}
  .hero__scroll i::after,.snd.is-on .snd__ring,.hero__eyebrow i,.stack__row{animation:none}
  .stack__row{transform:none}
  .cat__col--b{transform:none}
}

/* ============ LARGER PHONES / SMALL TABLETS ============ */
@media (min-width:560px){
  .stack__tool img{height:66px}
  .intro__line{font-size:clamp(2rem,5vw,2.6rem)}
  .pfteaser__portrait{max-width:300px}
}

/* ============ MOBILE FINE-TUNING (phones only · ≤559px) ============
   Scoped to phones so tablet/desktop keep their original type + spacing.
   Goal: the hero flows straight into the editorial sections as one
   continuous composition, with the excess vertical dead space removed.
   The section backgrounds are already a single continuous black (each
   section is transparent over the black body), so no borders/seams are
   introduced or removed here — only the oversized gaps that made the
   sections read as separate stacked panels are tightened. */
@media (max-width:559px){
  /* Hero eyebrow badge hidden on mobile — the headline now leads directly */
  .hero__eyebrow{display:none}

  /* Hero headline ~10% larger (same Poppins font, 700 weight, orange em) */
  .hero__title{font-size:clamp(1.87rem,8.36vw,2.75rem)}

  /* Lift the hero composition upward a touch, tightening the base dead space */
  .hero__foot{bottom:calc(var(--sab) + 96px)}

  /* Pull "Creative worlds" up toward the hero — collapse the empty band */
  .intro{padding:clamp(34px,7vh,56px) var(--pad) clamp(28px,5vh,40px)}

  /* Tighten inter-section gaps so Work → Process → Creative Stack read as one flow */
  .stack{padding-top:clamp(32px,5.5vh,50px)}
  .pfteaser{padding-top:clamp(28px,5vh,48px)}
}