/* =======================================================================
   Surabhi Jha — Portfolio
   Editorial / press-room art direction. Ink, newsprint, vermillion.
   ======================================================================= */

:root{
  --ink:        #0B0B0A;
  --ink-2:      #141412;
  --ink-3:      #23231F;
  --paper:      #F1EBE0;
  --paper-2:    #E4DACA;
  --paper-3:    #D6C9B4;
  --vermillion: #DC3F26;
  --ochre:      #C9902E;
  --blue:       #1B3F8F;

  --fg:  var(--paper);
  --bg:  var(--ink);
  --mut: rgba(241,235,224,.52);
  --rule: rgba(241,235,224,.16);
  --accent: var(--vermillion);

  --display: "Instrument Serif", "Times New Roman", serif;
  --sans: "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --pad: clamp(1.25rem, 4vw, 5rem);
  --maxw: 1560px;
  --ease: cubic-bezier(.22,1,.36,1);
  --ease2: cubic-bezier(.65,.05,.36,1);
}

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }
html{ -webkit-text-size-adjust:100%; scroll-behavior:auto }
body{
  font-family:var(--sans);
  font-weight:400;
  font-size:clamp(15px,.55vw + 13px,17px);
  line-height:1.55;
  background:var(--bg);
  color:var(--fg);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  transition:background-color .7s var(--ease), color .7s var(--ease);
}
img{ max-width:100%; display:block }
a{ color:inherit; text-decoration:none }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer }
ul,ol{ list-style:none }
::selection{ background:var(--vermillion); color:#fff }

:focus-visible{ outline:2px solid var(--vermillion); outline-offset:4px; border-radius:2px }

.skip-link{
  position:fixed; top:-100px; left:1rem; z-index:9999;
  background:var(--vermillion); color:#fff; padding:.7rem 1.1rem;
  font:500 12px/1 var(--mono); letter-spacing:.06em; text-transform:uppercase;
}
.skip-link:focus{ top:1rem }

/* ---------- theming ---------- */
body[data-mode="dark"]{ --fg:var(--paper); --bg:var(--ink); --mut:rgba(241,235,224,.52); --rule:rgba(241,235,224,.16) }
body[data-mode="ink"]{ --fg:var(--paper); --bg:var(--ink); --mut:rgba(241,235,224,.52); --rule:rgba(241,235,224,.16) }
body[data-mode="paper"]{ --fg:var(--ink); --bg:var(--paper); --mut:rgba(11,11,10,.58); --rule:rgba(11,11,10,.16) }
body[data-mode="vermillion"]{ --fg:#FFF3EE; --bg:var(--vermillion); --mut:rgba(255,243,238,.72); --rule:rgba(255,243,238,.3) }

/* ---------- grain ---------- */
.grain{
  position:fixed; inset:-150%; z-index:9000; pointer-events:none;
  opacity:.16; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 6s steps(6) infinite;
}
@keyframes grain{
  0%,100%{ transform:translate(0,0) }
  10%{ transform:translate(-4%,-3%) } 20%{ transform:translate(-8%,3%) }
  30%{ transform:translate(3%,-8%) }  40%{ transform:translate(-3%,10%) }
  50%{ transform:translate(-8%,4%) }  60%{ transform:translate(6%,0) }
  70%{ transform:translate(0,7%) }    80%{ transform:translate(2%,15%) }
  90%{ transform:translate(-6%,6%) }
}

/* ---------- cursor ---------- */
.cursor{
  position:fixed; top:0; left:0; z-index:9500; pointer-events:none;
  width:10px; height:10px; border-radius:50%;
  background:var(--vermillion);
  display:grid; place-items:center;
  transform:translate3d(-100px,-100px,0);
  transition:width .35s var(--ease), height .35s var(--ease), background-color .35s var(--ease);
  will-change:transform;
}
.cursor__label{
  font:500 10px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase;
  color:#fff; opacity:0; transform:scale(.7); transition:opacity .25s, transform .25s var(--ease);
  white-space:nowrap;
}
.cursor.is-active{ width:78px; height:78px; background:var(--vermillion) }
.cursor.is-active .cursor__label{ opacity:1; transform:scale(1) }
@media (hover:none),(max-width:900px){ .cursor{ display:none } }

/* ---------- scroll progress ---------- */
.scroll-progress{
  position:fixed; top:0; left:0; right:0; height:2px; z-index:9200;
  background:transparent; pointer-events:none;
}
.scroll-progress i{
  display:block; height:100%; width:0%;
  background:var(--vermillion); transform-origin:left;
}

/* ---------- loader ---------- */
.loader{
  position:fixed; inset:0; z-index:9800; background:var(--ink); color:var(--paper);
  display:grid; place-items:center; padding:var(--pad);
}
.loader.is-done{ pointer-events:none }
.loader__inner{ width:min(760px,100%) }
.loader__mark{
  height:clamp(52px,7vw,74px); margin-bottom:clamp(1.1rem,2.4vw,1.8rem);
  color:var(--vermillion); opacity:0;
}
.loader__mark .mark{ height:100% }
.loader__name{
  font-family:var(--display); font-size:clamp(2.4rem,8vw,6.2rem); line-height:.92;
  display:flex; flex-wrap:wrap;
}
.loader__name span{ display:block; transform:translateY(110%); opacity:0 }
.loader__name .sp{ width:.32em }
.loader__meta{
  display:flex; justify-content:space-between; align-items:baseline;
  margin-top:1.4rem; font:400 11px/1 var(--mono); letter-spacing:.16em; text-transform:uppercase;
  color:rgba(241,235,224,.5);
}
.loader__count{ font-size:13px; color:var(--vermillion) }
.loader__bar{ margin-top:.9rem; height:1px; background:rgba(241,235,224,.18) }
.loader__bar i{ display:block; height:100%; width:0%; background:var(--vermillion) }

/* ---------- nav ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:8000;
  display:flex; align-items:center; gap:2rem;
  padding:1.1rem var(--pad);
  color:var(--fg);
  transition:color .7s var(--ease), background-color .5s var(--ease), border-color .5s var(--ease);
  border-bottom:1px solid transparent;
}
/* Once past the hero the nav always sits on top of content, so give it a ground. */
.nav.is-stuck{
  background:color-mix(in srgb, var(--bg) 82%, transparent);
  border-bottom-color:var(--rule);
  backdrop-filter:blur(14px) saturate(1.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
}
/* ---------- monogram mark ----------
   Roman S + italic J from Instrument Serif, drawn as real outlines and
   interlocked so the J's descender sweeps down past the S's spine. */
.mark{ display:block; height:100%; width:auto; overflow:visible }
.mark path{ fill:currentColor }
.mark__j{ transform-box:fill-box; transform-origin:left center; transition:transform .55s var(--ease) }

.nav__logo{ display:flex; align-items:center; gap:.66rem; font-weight:500; letter-spacing:-.01em }
.nav__logo-mark{ position:relative; display:block; height:27px; flex:0 0 auto }
/* The editorial full stop — same one that ends "the medium." in the hero. */
.mark__dot{
  position:absolute; top:1px; right:-5px; width:5px; height:5px; border-radius:50%;
  background:var(--vermillion);
  transition:transform .55s var(--ease);
}
.nav__logo:hover .mark__j{ transform:translateX(2.6px) }
.nav__logo:hover .mark__dot{ transform:translate(3px,-1px) scale(1.25) }
.nav__logo-text{ font-size:15px }
.nav__links{ display:flex; gap:clamp(.85rem,1.7vw,1.6rem); margin-left:auto; font-size:14px }
.nav__links a{ position:relative; padding-bottom:2px }
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:currentColor; transform:scaleX(0); transform-origin:right;
  transition:transform .5s var(--ease);
}
.nav__links a:hover::after,.nav__links a.is-current::after{ transform:scaleX(1); transform-origin:left }
.nav__cta{
  display:flex; align-items:center; gap:.5rem;
  font:500 11px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase;
  border:1px solid color-mix(in srgb, currentColor 35%, transparent);
  border-radius:999px; padding:.6rem .85rem; white-space:nowrap;
  transition:background-color .4s var(--ease), color .4s var(--ease);
}
.nav__cta:hover{ background:var(--fg); color:var(--bg) }
.nav__cta .dot{ width:6px; height:6px; border-radius:50%; background:#3ED27A; animation:pulse 2s infinite }
@keyframes pulse{ 0%,100%{ opacity:1 } 50%{ opacity:.25 } }
.nav__burger{ display:none; width:34px; height:24px; position:relative; margin-left:auto }
.nav__burger i{ position:absolute; left:0; right:0; height:1.5px; background:currentColor; transition:.4s var(--ease) }
.nav__burger i:nth-child(1){ top:7px } .nav__burger i:nth-child(2){ top:15px }
body.menu-open .nav__burger i:nth-child(1){ top:11px; transform:rotate(45deg) }
body.menu-open .nav__burger i:nth-child(2){ top:11px; transform:rotate(-45deg) }

@media (max-width:900px){
  .nav__links,.nav__cta{ display:none }
  .nav__burger{ display:block }
}

/* ---------- mobile menu ---------- */
.menu{
  position:fixed; inset:0; z-index:7900; background:var(--ink); color:var(--paper);
  display:flex; flex-direction:column; justify-content:center; gap:2rem;
  padding:var(--pad);
  clip-path:inset(0 0 100% 0); transition:clip-path .8s var(--ease);
  pointer-events:none;
}
body.menu-open .menu{ clip-path:inset(0 0 0 0); pointer-events:auto }
.menu__list{ display:flex; flex-direction:column; gap:.2rem }
.menu__list a{
  font-family:var(--display); font-size:clamp(2.4rem,11vw,4.5rem); line-height:1.05;
  display:flex; align-items:baseline; gap:1rem;
  opacity:0; transform:translateY(30px); transition:.6s var(--ease);
}
body.menu-open .menu__list a{ opacity:1; transform:none }
body.menu-open .menu__list a:nth-child(1){ transition-delay:.12s }
body.menu-open .menu__list a:nth-child(2){ transition-delay:.18s }
body.menu-open .menu__list a:nth-child(3){ transition-delay:.24s }
body.menu-open .menu__list a:nth-child(4){ transition-delay:.30s }
body.menu-open .menu__list a:nth-child(5){ transition-delay:.36s }
body.menu-open .menu__list a:nth-child(6){ transition-delay:.42s }
.menu__list em{ font:400 11px/1 var(--mono); color:var(--vermillion); font-style:normal }
.menu__foot{
  display:flex; flex-direction:column; gap:.4rem; margin-top:auto;
  font:400 11px/1.7 var(--mono); letter-spacing:.1em; text-transform:uppercase;
  color:rgba(241,235,224,.5);
}

/* ---------- shared bits ---------- */
.tag{
  display:inline-block; font:500 11px/1 var(--mono);
  letter-spacing:.18em; text-transform:uppercase; color:var(--accent);
}
.section-head{ margin-bottom:clamp(2.5rem,6vw,5rem) }
.section-title{
  font-family:var(--display); font-weight:400;
  font-size:clamp(2.6rem,7.2vw,6.4rem); line-height:.96; letter-spacing:-.015em;
  margin-top:1.2rem;
}
.section-title em{ font-style:italic; color:var(--accent) }

.btn{
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.95rem 1.5rem; border-radius:999px;
  font:500 12px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase;
  transition:background-color .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
  white-space:nowrap;
}
.btn svg{ width:16px; height:16px; transition:transform .4s var(--ease) }
.btn:hover svg{ transform:translateX(4px) }
.btn--fill{ background:var(--vermillion); color:#fff }
.btn--fill:hover{ background:var(--fg); color:var(--bg) }
.btn--ghost{ border:1px solid var(--rule); color:inherit }
.btn--ghost:hover{ background:var(--fg); color:var(--bg); border-color:var(--fg) }

section{ position:relative }

/* ---------- HERO ---------- */
.hero{
  min-height:100svh; display:flex; flex-direction:column; justify-content:center;
  padding:7.5rem var(--pad) 2rem;
  background:var(--ink); color:var(--paper);
  overflow:hidden;
}
.hero__watermark{
  position:absolute; right:13%; bottom:-.44em; z-index:0;
  font-family:var(--display); font-size:min(40vw,54vh); line-height:.8;
  color:transparent; -webkit-text-stroke:1px rgba(241,235,224,.055);
  pointer-events:none; user-select:none;
}
@media (max-width:900px){ .hero__watermark{ right:-.08em } }
.hero__inner{ position:relative; z-index:1; width:100%; max-width:var(--maxw); margin-inline:auto }
.eyebrow{
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  font:500 11px/1 var(--mono); letter-spacing:.2em; text-transform:uppercase;
  color:rgba(241,235,224,.6); margin-bottom:clamp(1.4rem,3.4vw,2.2rem);
  padding-bottom:clamp(1.4rem,3.4vw,2.2rem); border-bottom:1px solid rgba(241,235,224,.12);
}
.eyebrow__label{ display:flex; align-items:center; gap:1rem }
.eyebrow__line{ width:clamp(28px,6vw,90px); height:1px; background:var(--vermillion) }
@media (max-width:700px){
  .eyebrow{ font-size:10px; letter-spacing:.14em }
  .eyebrow__line{ display:none }
}

/* Type on the left, portrait plate on the right, both bounded by the same rules. */
.hero__grid{
  display:grid; grid-template-columns:minmax(0,1fr) clamp(240px,25vw,400px);
  gap:clamp(1.5rem,4vw,4rem); align-items:stretch;
}
.hero__lead{ display:flex; flex-direction:column; min-width:0 }

.hero__portrait{ display:flex; flex-direction:column; min-width:0 }
.portrait-frame--hero{
  flex:1; aspect-ratio:auto; min-height:clamp(300px,42vh,540px);
  background:var(--ink-3); border-color:rgba(241,235,224,.14);
}
/* Greyscale + a warm ink duotone underneath: unifies photos shot in wildly
   different light and pulls them into the palette instead of fighting it. */
.portrait-frame--hero::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(190deg, rgba(220,63,38,.18), rgba(11,11,10,.34) 62%);
  mix-blend-mode:soft-light;
}
.portrait-frame--hero img{
  filter:grayscale(1) contrast(1.14) brightness(.92);
  object-position:72% 32%;
  /* The source is a wide travel shot; scaling in on her turns it into a portrait. */
  transform:scale(1.3); transform-origin:66% 47%;
  transition:transform 1.6s var(--ease), filter .8s var(--ease);
}
.hero__portrait:hover .portrait-frame--hero img{ transform:scale(1.36); filter:grayscale(.7) contrast(1.1) brightness(.97) }
.portrait-frame--hero .portrait-fallback{
  color:rgba(241,235,224,.22);
  background:
    repeating-linear-gradient(45deg, rgba(241,235,224,.045) 0 2px, transparent 2px 9px),
    var(--ink-3);
}
.portrait-frame--hero .portrait-fallback em{ color:rgba(220,63,38,.75) }
.hero__portrait figcaption{
  margin-top:.85rem; font:400 10px/1.6 var(--mono);
  letter-spacing:.14em; text-transform:uppercase; color:rgba(241,235,224,.38);
}

.hero__title{
  font-family:var(--display); font-weight:400;
  font-size:clamp(3rem, min(9.4vw, 15vh), 12rem); line-height:.9; letter-spacing:-.025em;
}
.hero__title .line{ display:block; overflow:hidden; padding-bottom:.06em }
.hero__title .w{ display:inline-block; will-change:transform }
.hero__title em{ font-style:italic; color:var(--vermillion) }

.hero__foot{
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap:1.5rem 2rem; margin-top:auto; padding-top:1.5rem;
  border-top:1px solid rgba(241,235,224,.14);
}
.hero__title{ margin-bottom:clamp(1.6rem,3.6vw,2.6rem) }
.hero__blurb{ max-width:44ch; color:rgba(241,235,224,.58); font-size:clamp(13.5px,.85vw,15.5px); line-height:1.6 }
.hero__actions{ display:flex; gap:.7rem; flex-wrap:wrap }

.hero__scroll{
  display:flex; align-items:center; gap:.7rem; margin-top:1.6rem;
  font:400 10px/1 var(--mono); letter-spacing:.2em; text-transform:uppercase;
  color:rgba(241,235,224,.35);
}
.hero__scroll i{ display:block; width:60px; height:1px; background:rgba(241,235,224,.3); position:relative; overflow:hidden }
.hero__scroll i::after{
  content:""; position:absolute; inset:0; background:var(--vermillion);
  transform:translateX(-100%); animation:slide 2.4s var(--ease) infinite;
}
@keyframes slide{ 0%{ transform:translateX(-100%) } 60%,100%{ transform:translateX(100%) } }
@media (max-width:900px){
  .hero__scroll{ display:none }
  /* Stack: type first, then the portrait as a shorter band so the fold stays tight. */
  .hero{ padding-bottom:3rem }
  .hero__grid{ grid-template-columns:1fr; gap:2rem }
  .hero__lead{ display:block }
  .hero__title{ margin-bottom:1.4rem }
  .portrait-frame--hero{ flex:0 0 auto; min-height:0; aspect-ratio:5/6; max-height:56vh }
  .portrait-frame--hero img{ object-position:62% 30%; transform:scale(1.22) }
  .hero__portrait figcaption{ margin-top:.6rem }
}

/* ---------- MARQUEE ---------- */
.marquee{
  background:var(--vermillion); color:#fff; overflow:hidden;
  padding:.85rem 0; border-block:1px solid rgba(0,0,0,.12);
}
.marquee__track{ display:flex; width:max-content; animation:marq 38s linear infinite }
.marquee__track span{
  display:flex; align-items:center;
  font:500 12px/1 var(--mono); letter-spacing:.22em; text-transform:uppercase;
  padding-right:0;
}
.marquee__track i{ display:inline-block; padding:0 1.6rem; font-size:6px; font-style:normal; opacity:.65 }
@keyframes marq{ to{ transform:translateX(-50%) } }

/* ---------- STORY ---------- */
.story{ background:var(--paper); color:var(--ink); padding:clamp(5rem,12vw,10rem) var(--pad) }
.story > *{ max-width:var(--maxw); margin-inline:auto }
.story__statement{
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.6rem,3.9vw,3.4rem); line-height:1.14; letter-spacing:-.012em;
  max-width:min(100%,17em);
  margin:0 auto 1.6rem 0;
}
.story__statement .wd{ transition:opacity .2s linear }
.story__kicker{
  margin:0 auto clamp(3rem,8vw,6rem) 0;
  font:500 11px/1.8 var(--mono); letter-spacing:.16em; text-transform:uppercase;
  color:var(--vermillion); max-width:44ch;
}
.story__statement .ln{ display:block; overflow:hidden }
.story__statement .ln > span{ display:inline-block; will-change:transform }

.story__grid{
  display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(2rem,6vw,6rem); align-items:start;
}
@media (max-width:900px){ .story__grid{ grid-template-columns:1fr } }

.portrait-frame{
  position:relative; aspect-ratio:4/5; overflow:hidden;
  background:var(--paper-2);
  border:1px solid rgba(11,11,10,.14);
}
.portrait-frame img{
  width:100%; height:100%; object-fit:cover; object-position:center 42%;
  filter:grayscale(1) contrast(1.12) brightness(1.02);
  transition:filter .8s var(--ease), transform 1.6s var(--ease);
}
.story__portrait:hover .portrait-frame img{ filter:grayscale(.7) contrast(1.08); transform:scale(1.03) }
.portrait-frame.is-empty img{ display:none }
.portrait-fallback{
  position:absolute; inset:0; display:none;
  flex-direction:column; justify-content:center; align-items:center; gap:.1em;
  font-family:var(--display); line-height:.9; color:rgba(11,11,10,.3);
  background:
    repeating-linear-gradient(45deg, rgba(11,11,10,.035) 0 2px, transparent 2px 9px),
    var(--paper-2);
}
.portrait-frame.is-empty .portrait-fallback{ display:flex }
.portrait-fallback span{ font-size:clamp(2rem,5vw,3.4rem) }
.portrait-fallback em{ font-style:italic; font-size:clamp(2.4rem,6vw,4.2rem); color:rgba(220,63,38,.6) }
.caption{
  margin-top:.9rem; font:400 10px/1.6 var(--mono);
  letter-spacing:.14em; text-transform:uppercase; color:rgba(11,11,10,.45);
}

.story__body p{ font-size:clamp(15px,1.05vw,18px); line-height:1.72; margin-bottom:1.4rem; max-width:60ch }
.story__body strong{ font-weight:500; box-shadow:inset 0 -.35em 0 rgba(220,63,38,.16) }
.story__facts{
  margin-top:2.6rem; border-top:1px solid rgba(11,11,10,.14);
  display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); column-gap:2rem;
}
.story__facts li{
  padding:1.1rem 1.2rem 1.1rem 0; border-bottom:1px solid rgba(11,11,10,.09);
  font-size:14px; line-height:1.5;
}
.story__facts b{
  display:block; font:500 10px/1 var(--mono); letter-spacing:.16em; text-transform:uppercase;
  color:var(--vermillion); margin-bottom:.45rem; font-weight:500;
}

/* ---------- STATS ---------- */
.stats{ background:var(--ink); color:var(--paper); padding:clamp(3.5rem,8vw,6rem) var(--pad) }
.stats ul{
  max-width:var(--maxw); margin-inline:auto;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:2rem 1rem;
}
.stats li{ border-top:1px solid var(--rule); padding-top:1.2rem }
.stats b{
  display:block; font-family:var(--display); font-weight:400;
  font-size:clamp(3.2rem,7vw,6rem); line-height:.95; letter-spacing:-.02em;
}
.stats span{
  display:block; margin-top:.5rem; max-width:20ch;
  font:400 11px/1.6 var(--mono); letter-spacing:.1em; text-transform:uppercase;
  color:rgba(241,235,224,.5);
}

/* ---------- CRAFT ---------- */
.craft{ background:var(--paper); color:var(--ink); padding:clamp(5rem,12vw,10rem) var(--pad) }
.craft > *{ max-width:var(--maxw); margin-inline:auto }
.craft__list{ position:relative; border-top:1px solid rgba(11,11,10,.16) }
.craft__row{
  position:relative; z-index:1;
  display:grid; grid-template-columns:auto 1fr auto; align-items:center;
  gap:0 clamp(1rem,3vw,2.5rem);
  padding:clamp(1.4rem,3.2vw,2.4rem) 0;
  border-bottom:1px solid rgba(11,11,10,.16);
  cursor:default; transition:padding-left .6s var(--ease), color .4s var(--ease);
}
.craft__row:hover{ padding-left:clamp(.5rem,2vw,2rem) }
.craft__num{ grid-column:1; grid-row:1; font:400 11px/1 var(--mono); color:var(--vermillion); letter-spacing:.1em }
.craft__row h3{
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.55rem,3.6vw,3rem); line-height:1.05; letter-spacing:-.01em;
  grid-column:2;
}
.craft__desc{
  grid-column:2; max-width:58ch; font-size:14.5px; line-height:1.6; color:rgba(11,11,10,.6);
  max-height:0; overflow:hidden; opacity:0;
  transition:max-height .6s var(--ease), opacity .4s var(--ease), margin-top .6s var(--ease);
}
.craft__row:hover .craft__desc,.craft__row.is-open .craft__desc{ max-height:200px; opacity:1; margin-top:.7rem }
.craft__plus{ grid-column:3; grid-row:1; position:relative; width:16px; height:16px; opacity:.4 }
.craft__plus::before,.craft__plus::after{
  content:""; position:absolute; background:currentColor; transition:transform .5s var(--ease);
}
.craft__plus::before{ left:0; right:0; top:50%; height:1px; margin-top:-.5px }
.craft__plus::after{ top:0; bottom:0; left:50%; width:1px; margin-left:-.5px }
.craft__row:hover .craft__plus::after{ transform:rotate(90deg) }

.craft__float{
  position:absolute; top:0; left:72%; z-index:2; width:240px; aspect-ratio:3/4;
  pointer-events:none; opacity:0; overflow:hidden;
  transform:translate(-50%,-50%) rotate(-4deg) scale(.9);
  transition:opacity .45s var(--ease), transform .45s var(--ease);
  box-shadow:0 30px 60px -20px rgba(11,11,10,.4);
}
.craft__float img{ width:100%; height:100%; object-fit:cover }
.craft__float.is-visible{ opacity:1; transform:translate(-50%,-50%) rotate(-4deg) scale(1) }
@media (max-width:900px){
  .craft__float{ display:none }
  .craft__desc{ max-height:200px; opacity:1; margin-top:.6rem }
  .craft__plus{ display:none }
}

/* ---------- WORK ---------- */
.work{ background:var(--ink); color:var(--paper); padding:clamp(5rem,12vw,9rem) 0 clamp(4rem,9vw,7rem) }
.work__head{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); margin-bottom:clamp(2.5rem,6vw,4.5rem) }
.work__note{ max-width:52ch; margin-top:1.6rem; color:rgba(241,235,224,.6); font-size:15px }
.work__note b{ font-weight:500; color:var(--paper) }
.work__hint{
  margin-top:1.6rem; font:400 10px/1 var(--mono); letter-spacing:.2em; text-transform:uppercase;
  color:rgba(241,235,224,.35);
}

.work__rail{
  overflow-x:auto; overflow-y:hidden;
  scrollbar-width:none; -ms-overflow-style:none;
  cursor:grab; scroll-snap-type:x proximity;
}
.work__rail::-webkit-scrollbar{ display:none }
.work__rail.is-dragging{ cursor:grabbing; scroll-snap-type:none }
.work__track{
  display:flex; gap:clamp(1rem,2.4vw,2.2rem);
  padding:0 var(--pad) 1.5rem; width:max-content;
}
.page-card{
  flex:0 0 auto; width:clamp(240px,26vw,360px); scroll-snap-align:center;
  cursor:pointer; user-select:none;
  display:flex; flex-direction:column;
}
.page-card__media{
  position:relative; overflow:hidden; background:var(--ink-3);
  aspect-ratio:751/950;
  border:1px solid rgba(241,235,224,.1);
}
.page-card__media img{
  width:100%; height:100%; object-fit:cover; object-position:top center;
  filter:saturate(.85) contrast(1.02);
  transition:transform 1s var(--ease), filter .6s var(--ease);
}
.page-card:hover .page-card__media img{ transform:scale(1.045); filter:saturate(1) contrast(1.05) }
.page-card__media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top,rgba(11,11,10,.55),transparent 45%);
  opacity:.9; transition:opacity .5s;
}
.page-card:hover .page-card__media::after{ opacity:.4 }
.page-card__meta{ padding-top:1.05rem; display:flex; flex-direction:column; flex:1 }
.page-card .kicker{
  display:block; font:500 10px/1 var(--mono); letter-spacing:.18em; text-transform:uppercase;
  color:var(--vermillion); margin-bottom:.55rem;
}
.page-card h3{
  font-family:var(--display); font-weight:400; font-size:clamp(1.05rem,1.5vw,1.5rem);
  line-height:1.15; letter-spacing:-.005em;
}
.page-card .date{
  display:block; margin-top:auto; padding-top:.6rem;
  font:400 10.5px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase;
  color:rgba(241,235,224,.42);
}
.page-card--end{ display:flex; align-items:center; cursor:default }
.end-card{
  border:1px solid var(--rule); padding:clamp(1.6rem,3vw,2.4rem);
  display:flex; flex-direction:column; gap:1rem; align-items:flex-start;
  width:100%;
}
.end-card h3{ font-family:var(--display); font-weight:400; font-size:clamp(1.7rem,2.6vw,2.5rem); line-height:1.02 }
.end-card p{ color:rgba(241,235,224,.55); font-size:14px; line-height:1.6 }

/* ---------- PULL QUOTE ---------- */
.pull{
  background:var(--vermillion); color:#FFF3EE;
  padding:clamp(5rem,13vw,10rem) var(--pad); text-align:center;
}
.pull blockquote{
  max-width:20ch; margin-inline:auto;
  font-family:var(--display); font-weight:400;
  font-size:clamp(2rem,6.2vw,5.4rem); line-height:1.06; letter-spacing:-.02em;
}
.pull .ln{ display:block; overflow:hidden }
.pull .ln > span{ display:inline-block }
.pull cite{
  display:block; margin-top:2rem; font-style:normal;
  font:400 11px/1 var(--mono); letter-spacing:.18em; text-transform:uppercase;
  color:rgba(255,243,238,.85);
}

/* ---------- BEYOND ---------- */
.beyond{ background:var(--paper); color:var(--ink); padding:clamp(5rem,12vw,10rem) var(--pad) }
.beyond > *{ max-width:var(--maxw); margin-inline:auto }
.beyond__grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:rgba(11,11,10,.16); border:1px solid rgba(11,11,10,.16);
}
@media (max-width:1000px){ .beyond__grid{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:640px){ .beyond__grid{ grid-template-columns:1fr } }
.bcard{
  background:var(--paper); padding:clamp(1.5rem,2.6vw,2.4rem);
  display:flex; flex-direction:column; gap:.85rem; min-height:290px;
  transition:background-color .5s var(--ease), color .5s var(--ease);
}
.bcard:hover{ background:var(--ink); color:var(--paper) }
.bcard--wide{ grid-column:span 2 }
@media (max-width:640px){ .bcard--wide{ grid-column:span 1 } }
.bcard__type{
  font:500 10px/1 var(--mono); letter-spacing:.18em; text-transform:uppercase; color:var(--vermillion);
}
.bcard h3{
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.35rem,2.2vw,2.1rem); line-height:1.08; letter-spacing:-.01em;
}
.bcard p{ font-size:14.5px; line-height:1.62; color:inherit; opacity:.66 }
.bcard__year{
  margin-top:auto; font:400 10.5px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase;
  opacity:.45;
}
.bcard .names{ display:flex; flex-direction:column; gap:.15rem; margin-block:.2rem }
.bcard .names li{
  font-family:var(--display); font-size:clamp(1.35rem,2.1vw,2rem); line-height:1.16;
  display:flex; align-items:baseline; gap:.6rem;
}
.bcard .names em{
  font:400 10px/1 var(--mono); font-style:normal; letter-spacing:.14em; text-transform:uppercase;
  opacity:.5;
}
.bcard--voice .wave{
  width:100%; height:56px; display:block; opacity:.85;
  /* Static fallback so the slot never reads as a broken/empty box. */
  background-image:repeating-linear-gradient(to right,
    currentColor 0 2px, transparent 2px 13px);
  background-size:100% 22%; background-position:0 50%; background-repeat:no-repeat;
}
.bcard--voice .wave.is-live{ background-image:none }
.bcard--cta{ background:var(--ink); color:var(--paper) }
.bcard--cta:hover{ background:var(--vermillion); color:#fff }
.bcard--cta .btn{ margin-top:auto }
.bcard--cta .btn--fill{ background:var(--vermillion); color:#fff }
.bcard--cta:hover .btn--fill{ background:#fff; color:var(--vermillion) }

/* ---------- PATH ---------- */
.path{ background:var(--ink); color:var(--paper); padding:clamp(5rem,12vw,10rem) var(--pad) }
.path > *{ max-width:var(--maxw); margin-inline:auto }
.timeline{ position:relative; border-top:1px solid var(--rule) }
.timeline li{
  display:grid; grid-template-columns:130px 1fr; gap:clamp(1rem,4vw,3rem);
  padding:clamp(1.5rem,3vw,2.4rem) 0; border-bottom:1px solid var(--rule);
  position:relative; transition:background-color .5s var(--ease);
}
.timeline li::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:0;
  background:rgba(220,63,38,.08); transition:width .6s var(--ease); z-index:0;
}
.timeline li:hover::before{ width:100% }
.timeline li > *{ position:relative; z-index:1 }
@media (max-width:700px){ .timeline li{ grid-template-columns:1fr; gap:.6rem } }
.timeline__year{
  font:500 11px/1.4 var(--mono); letter-spacing:.12em; text-transform:uppercase;
  color:var(--vermillion); padding-top:.45rem;
}
.timeline h3{
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.3rem,2.5vw,2.15rem); line-height:1.14; letter-spacing:-.01em;
}
.timeline h3 em{ font-style:italic; opacity:.5; font-size:.72em }
.timeline p{ margin-top:.55rem; max-width:62ch; font-size:14.5px; line-height:1.64; color:rgba(241,235,224,.55) }
.timeline .is-now .timeline__year{ color:#3ED27A }

/* ---------- TOOLKIT ---------- */
.toolkit{ background:var(--paper); color:var(--ink); padding:clamp(4rem,9vw,7rem) var(--pad) }
.toolkit__grid{
  max-width:var(--maxw); margin-inline:auto;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(255px,1fr)); gap:2.2rem 2.6rem;
}
.toolkit h4{
  font:500 10px/1 var(--mono); letter-spacing:.18em; text-transform:uppercase;
  color:var(--vermillion); margin-bottom:.7rem; font-weight:500;
  padding-bottom:.7rem; border-bottom:1px solid rgba(11,11,10,.16);
}
.toolkit p{ font-size:14.5px; line-height:1.7; color:rgba(11,11,10,.65) }

/* ---------- CONTACT ---------- */
.contact{ background:var(--ink); color:var(--paper); padding:clamp(5rem,13vw,10rem) var(--pad) 4rem }
.contact > *{ max-width:var(--maxw); margin-inline:auto }
.contact__big{
  font-family:var(--display); font-weight:400;
  font-size:clamp(2.8rem,11vw,11rem); line-height:.92; letter-spacing:-.025em;
  margin-top:1.5rem;
}
.contact__big .line{ display:block; overflow:hidden; padding-bottom:.05em }
.contact__big .w{ display:inline-block }
.contact__big em{ font-style:italic; color:var(--vermillion) }
.contact__mail{
  display:block; margin:clamp(2rem,5vw,3.5rem) auto 0 0;
  font-size:clamp(1rem,2.6vw,2.1rem); font-weight:300; letter-spacing:-.01em;
  padding-bottom:.6rem; border-bottom:1px solid var(--rule);
  position:relative; width:fit-content; max-width:100%; overflow-wrap:anywhere;
}
.contact__mail::after{
  content:""; position:absolute; left:0; bottom:-1px; height:1px; width:100%;
  background:var(--vermillion); transform:scaleX(0); transform-origin:right;
  transition:transform .6s var(--ease);
}
.contact__mail:hover::after{ transform:scaleX(1); transform-origin:left }
.contact__cols{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:2.2rem;
  margin-top:clamp(3rem,7vw,5rem); padding-top:2rem; border-top:1px solid var(--rule);
}
.contact__cols h4{
  font:500 10px/1 var(--mono); letter-spacing:.18em; text-transform:uppercase;
  color:var(--vermillion); margin-bottom:.9rem; font-weight:500;
}
.contact__cols a,.contact__cols p{
  display:block; font-size:14.5px; line-height:1.7; color:rgba(241,235,224,.62);
}
.contact__cols a{ transition:color .3s; width:fit-content }
.contact__cols a:hover{ color:var(--paper) }
.contact__note{
  margin-top:.9rem; padding-top:.9rem; border-top:1px solid var(--rule);
  font-size:13px !important; color:rgba(241,235,224,.42) !important;
}

.foot{
  background:var(--ink); color:rgba(241,235,224,.4);
  padding:1.6rem var(--pad) 2.2rem; border-top:1px solid var(--rule);
  display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between;
  font:400 10.5px/1.6 var(--mono); letter-spacing:.12em; text-transform:uppercase;
}
.foot a:hover{ color:var(--paper) }
.foot__id{ display:flex; align-items:center; gap:.6rem }
.foot__mark{ display:block; height:19px; color:var(--vermillion); flex:0 0 auto }

/* ---------- READER ---------- */
.reader{
  position:fixed; inset:0; z-index:9600; background:rgba(8,8,7,.97);
  display:flex; flex-direction:column;
  opacity:0; pointer-events:none; transition:opacity .45s var(--ease);
  backdrop-filter:blur(6px);
}
.reader.is-open{ opacity:1; pointer-events:auto }
.reader__bar{
  display:flex; align-items:center; gap:1.5rem; justify-content:space-between;
  padding:1rem var(--pad); border-bottom:1px solid rgba(241,235,224,.12); color:var(--paper);
}
.reader__info{ display:flex; flex-direction:column; gap:.3rem; min-width:0 }
.reader__kicker{ font:500 10px/1 var(--mono); letter-spacing:.18em; text-transform:uppercase; color:var(--vermillion) }
.reader__title{
  font-family:var(--display); font-size:clamp(1rem,1.8vw,1.5rem); line-height:1.15;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.reader__tools{ display:flex; align-items:center; gap:.5rem; flex:0 0 auto }
.reader__dl{
  font:500 10px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase;
  border:1px solid rgba(241,235,224,.25); border-radius:999px; padding:.6rem .9rem; color:var(--paper);
  transition:.3s;
}
.reader__dl:hover{ background:var(--paper); color:var(--ink) }
.reader__nav,.reader__close{
  width:38px; height:38px; border-radius:50%; border:1px solid rgba(241,235,224,.25);
  color:var(--paper); display:grid; place-items:center; font-size:16px; transition:.3s;
}
.reader__nav:hover,.reader__close:hover{ background:var(--paper); color:var(--ink) }
.reader__close{ font-size:22px; line-height:1 }
@media (max-width:640px){ .reader__dl{ display:none } }

.reader__stage{
  flex:1; overflow:auto; display:grid; place-items:center; padding:1.5rem var(--pad);
  scrollbar-width:thin;
}
.reader__stage img{
  max-width:min(100%,980px); height:auto; cursor:zoom-in;
  box-shadow:0 40px 100px -30px rgba(0,0,0,.9);
  transition:max-width .5s var(--ease);
}
.reader__stage.is-zoomed{ place-items:start center }
.reader__stage.is-zoomed img{ max-width:1800px; cursor:zoom-out }
.reader__hint{
  text-align:center; padding:.9rem; font:400 10px/1 var(--mono);
  letter-spacing:.16em; text-transform:uppercase; color:rgba(241,235,224,.35);
  border-top:1px solid rgba(241,235,224,.1);
}
body.reader-open{ overflow:hidden }

/* ---------- reveal defaults ---------- */
[data-reveal]{ opacity:0; transform:translateY(28px) }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important }
  .grain{ display:none }
  [data-reveal]{ opacity:1 !important; transform:none !important }
  .hero__title .w,.contact__big .w{ transform:none !important }
}