/* =========================================================
   Syed Mahfuzul Mazid — portfolio
   ========================================================= */

/* ---------- TOKENS ---------- */
:root{
  --bg:      #0a0b0f;
  --fg:      #eceaf3;
  --accent:  #6ea8ff;
  --muted:   rgba(236,234,243,.74);
  --hair:    rgba(236,234,243,.13);
  --card:    rgba(236,234,243,.035);

  /* Set like a book: a high-contrast display serif over a face drawn for long-form
     reading, with a mono only for small labels. */
  --f-display:"Instrument Serif", "Times New Roman", serif;
  --f-body:   "Newsreader", Georgia, serif;
  --f-mono:   "Space Mono", ui-monospace, monospace;

  /* long, soft exits — motion should settle like paper, never snap */
  --ease:    cubic-bezier(.16,1,.3,1);
  --ease-io: cubic-bezier(.76,0,.24,1);
  --dur:     1.25s;
  --pad:     clamp(20px, 5vw, 90px);
  --maxw:    1280px;
}

body[data-theme="night"]{ --bg:#0a0b0f; --fg:#eceaf3; --accent:#6ea8ff; }
body[data-theme="ink"]  { --bg:#0d1017; --fg:#e6ecf5; --accent:#7fd0ff; }
body[data-theme="deep"] { --bg:#0c0a14; --fg:#ece7f6; --accent:#a68cff; }
body[data-theme="warm"] { --bg:#14100c; --fg:#f6efe4; --accent:#ffab5e; }

/* ---------- RESET ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  background:var(--bg); color:var(--fg);
  font-family:var(--f-body); font-weight:400; line-height:1.72;
  overflow-x:hidden; -webkit-font-smoothing:antialiased;
  transition:background-color 1.1s var(--ease), color 1.1s 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{ list-style:none; }
::selection{ background:var(--accent); color:var(--bg); }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:2px; }

.mono{ font-family:var(--f-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; }
.h2{ font-family:var(--f-display); font-weight:400; font-size:clamp(2rem,4.9vw,4.2rem);
     line-height:1.08; letter-spacing:-.012em; }
.body{ font-size:clamp(1.05rem,1.25vw,1.22rem); color:var(--muted); max-width:62ch; }
.body.center{ margin-inline:auto; text-align:center; }
.eyebrow{ display:inline-flex; align-items:center; gap:.7em; font-size:.78rem; letter-spacing:.24em;
  text-transform:uppercase; font-weight:500; color:var(--accent); }
.pulse{ width:7px; height:7px; border-radius:50%; background:#37d67a; position:relative; flex:none; }
.pulse::after{ content:""; position:absolute; inset:-4px; border-radius:50%;
  border:1px solid #37d67a; animation:pulse 2s infinite var(--ease); }
@keyframes pulse{ 0%{transform:scale(.6);opacity:1} 100%{transform:scale(1.5);opacity:0} }

/* =========================================================
   PRELOADER / CHROME
   ========================================================= */
.preloader{ position:fixed; inset:0; z-index:9999; background:#0a0b0f; color:#eceaf3;
  display:grid; place-items:center; clip-path:inset(0 0 0 0);
  transition:clip-path 1s var(--ease-io); }
.preloader.done{ clip-path:inset(0 0 100% 0); pointer-events:none; }
.preloader__inner{ width:min(360px,74vw); text-align:center; }
.preloader__name{ display:flex; justify-content:center; gap:.08em; font-family:var(--f-display);
  font-weight:400; font-size:clamp(2.2rem,7vw,3.6rem); letter-spacing:.08em; }
.preloader__name span{ display:inline-block; opacity:0; transform:translateY(85%);
  animation:preIn .75s var(--ease) forwards; }
.preloader__name span:nth-child(2){ animation-delay:.09s }
.preloader__name span:nth-child(3){ animation-delay:.18s }
@keyframes preIn{ to{opacity:1;transform:none} }
.preloader__bar{ height:1px; background:rgba(255,255,255,.16); margin:20px 0 9px; }
.preloader__bar i{ display:block; height:100%; width:0; background:var(--accent); }
.preloader__pct{ font-family:var(--f-mono); font-size:.72rem; letter-spacing:.28em; color:rgba(255,255,255,.55); }

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

.cursor,.cursor-dot{ position:fixed; top:0; left:0; z-index:9500; pointer-events:none;
  border-radius:50%; mix-blend-mode:difference; will-change:transform; }
.cursor{ width:32px; height:32px; border:1px solid #fff; margin:-16px 0 0 -16px;
  transition:width .3s var(--ease),height .3s var(--ease),margin .3s var(--ease); }
.cursor.grow{ width:66px; height:66px; margin:-33px 0 0 -33px; background:rgba(255,255,255,.1); }
.cursor-dot{ width:5px; height:5px; background:#fff; margin:-2.5px 0 0 -2.5px; }
@media (hover:none){ .cursor,.cursor-dot{ display:none } }

.progress{ position:fixed; top:0; left:0; right:0; height:2px; z-index:8000; }
.progress i{ display:block; height:100%; width:0; background:var(--accent);
  box-shadow:0 0 12px var(--accent); }

/* =========================================================
   CHAPTER INDICATOR (floating)
   ========================================================= */
.chapter-indicator{ position:fixed; left:var(--pad); bottom:clamp(24px,4vh,48px);
  z-index:6000; display:flex; align-items:center; gap:.8em;
  opacity:0; transform:translateY(12px);
  transition:opacity .8s var(--ease), transform .8s var(--ease); }
.chapter-indicator.visible{ opacity:1; transform:none; }
.chapter-indicator__no{ font-family:var(--f-mono); font-size:.72rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--accent); padding:.55em .9em;
  border:1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius:100px; background:color-mix(in srgb, var(--bg) 85%, transparent);
  backdrop-filter:blur(10px); white-space:nowrap; }
.chapter-indicator__title{ font-family:var(--f-display); font-size:.92rem; font-style:italic;
  color:var(--muted); letter-spacing:.02em; white-space:nowrap; }

/* =========================================================
   PAGE COUNTER
   ========================================================= */
.page-counter{ position:fixed; right:var(--pad); bottom:clamp(24px,4vh,48px);
  z-index:6000; font-family:var(--f-mono); font-size:.72rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--muted);
  opacity:0; transform:translateY(12px);
  transition:opacity .8s var(--ease), transform .8s var(--ease); }
.page-counter.visible{ opacity:1; transform:none; }
.page-counter__current{ color:var(--accent); font-weight:700; }
.page-counter__sep{ margin:0 .2em; opacity:.4; }
@media (max-width:760px){ .chapter-indicator{ display:none } }

/* =========================================================
   PARALLAX SHAPES
   ========================================================= */
.parallax-shapes{ position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden; }
.pshape{ position:absolute; border-radius:50%; will-change:transform;
  background:radial-gradient(circle, color-mix(in srgb, var(--accent) 18%, transparent), transparent 70%);
  filter:blur(60px); opacity:.35; }
.pshape--1{ width:clamp(200px,30vw,500px); aspect-ratio:1; top:15%; left:-5%; }
.pshape--2{ width:clamp(150px,22vw,360px); aspect-ratio:1; top:35%; right:-8%; }
.pshape--3{ width:clamp(120px,18vw,280px); aspect-ratio:1; top:55%; left:12%; }
.pshape--4{ width:clamp(180px,26vw,420px); aspect-ratio:1; top:72%; right:5%; }
.pshape--5{ width:clamp(100px,14vw,220px); aspect-ratio:1; top:88%; left:-3%; }
.pshape--6{ width:clamp(140px,20vw,320px); aspect-ratio:1; top:20%; right:15%; }

/* =========================================================
   NAV
   ========================================================= */
/* The blur lives on a pseudo-element, not on .topbar itself: backdrop-filter would
   make the header a containing block for its position:fixed children, which would
   trap the full-screen mobile menu inside the header's own 58px box. */
.topbar{ position:fixed; inset:0 0 auto 0; z-index:7000; padding:clamp(16px,2.4vw,30px) var(--pad);
  display:flex; justify-content:space-between; align-items:center; gap:2em;
  border-bottom:1px solid transparent; transition:border-color .4s; }
.topbar::before{ content:""; position:absolute; inset:0; z-index:-1;
  backdrop-filter:blur(14px); background:color-mix(in srgb, var(--bg) 72%, transparent); }
.topbar.stuck{ border-bottom-color:var(--hair); }
.brand{ font-family:var(--f-display); font-weight:400; letter-spacing:.12em; font-size:1rem; }
.brand sup{ font-size:.5em; opacity:.55; }
.navlinks{ display:flex; align-items:center; gap:clamp(14px,2vw,30px); font-size:.82rem; }
.navlinks a{ color:var(--muted); transition:color .3s; position:relative; }
.navlinks a::after{ content:""; position:absolute; left:0; right:100%; bottom:-4px; height:1px;
  background:var(--accent); transition:right .35s var(--ease); }
.navlinks a:hover{ color:var(--fg); }
.navlinks a:hover::after{ right:0; }
.navlinks__cta{ padding:.5em 1.2em; border:1px solid var(--hair); border-radius:100px; color:var(--fg) !important; }
.navlinks__cta::after{ display:none; }
.navlinks__cta:hover{ background:var(--accent); color:var(--bg) !important; border-color:var(--accent); }
.menu-toggle{ display:none; flex-direction:column; gap:5px; padding:6px; }
.menu-toggle i{ width:22px; height:1.5px; background:currentColor; display:block; transition:.35s var(--ease); }
.menu-toggle.open i:first-child{ transform:translateY(3.25px) rotate(45deg); }
.menu-toggle.open i:last-child{ transform:translateY(-3.25px) rotate(-45deg); }

.dots{ position:fixed; right:var(--pad); top:50%; translate:0 -50%; z-index:6000;
  display:flex; flex-direction:column; gap:13px; mix-blend-mode:difference; color:#fff; }
.dots button{ display:flex; align-items:center; gap:9px; justify-content:flex-end; opacity:.4;
  transition:opacity .4s var(--ease); }
.dots button i{ width:18px; height:1px; background:currentColor; display:block; transition:width .45s var(--ease); }
.dots button em{ font-style:normal; font-family:var(--f-mono); font-size:.7rem; letter-spacing:.16em;
  text-transform:uppercase; opacity:0; transform:translateX(6px); transition:.4s var(--ease); }
.dots button:hover{ opacity:1 } .dots button:hover em{ opacity:1; transform:none }
.dots button.is-active{ opacity:1 }
.dots button.is-active i{ width:38px; background:var(--accent); }
.dots button.is-active em{ opacity:1; transform:none }

@media (max-width:1100px){ .dots{ display:none } }
@media (max-width:760px){
  .menu-toggle{ display:flex }
  .navlinks{ position:fixed; inset:0; flex-direction:column; justify-content:center;
    background:var(--bg); font-size:1.4rem; gap:1.2em; translate:0 -100%;
    transition:translate .55s var(--ease-io); }
  .navlinks.open{ translate:0 0 }
}

/* =========================================================
   REVEALS
   ========================================================= */
/* Copy settles onto the page rather than sliding in: a short rise plus a
   blur-to-focus, on a long expo-out curve. No rotation — it read as mechanical. */
.js [data-reveal]{ opacity:0; transform:translateY(22px); filter:blur(6px);
  transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease),
             filter calc(var(--dur) * .8) var(--ease); }
.js [data-reveal].in{ opacity:1; transform:none; filter:blur(0); }

.line{ display:block; overflow:hidden; }
[data-char-split] .ch,[data-word-split] .wd{ display:inline-block; opacity:0;
  transform:translateY(88%);
  transition:transform calc(var(--dur) * 1.1) var(--ease),
             opacity calc(var(--dur) * .7) var(--ease); }
.in [data-char-split] .ch,[data-char-split].in .ch,
.in [data-word-split] .wd,[data-word-split].in .wd{ opacity:1; transform:none; }
[data-word-split] .wd-wrap{ display:inline-block; overflow:hidden; vertical-align:bottom;
  padding-bottom:.06em; margin-bottom:-.06em; }

/* =========================================================
   LAYOUT
   ========================================================= */
.section{ padding:clamp(70px,11vh,150px) var(--pad); }
.sec-head{ max-width:var(--maxw); margin:0 auto clamp(40px,6vw,80px); display:grid; gap:1.1em;
  position:relative; }
.sec-head__no{ color:var(--accent); }
.btn{ display:inline-flex; align-items:center; gap:.65em; padding:.95em 1.9em; border-radius:100px;
  border:1px solid var(--hair); font-size:.78rem; letter-spacing:.13em; text-transform:uppercase;
  font-weight:500; position:relative; overflow:hidden; transition:border-color .35s; }
.btn span,.btn i{ position:relative; z-index:1; font-style:normal; transition:color .35s; }
.btn::before{ content:""; position:absolute; inset:0; background:var(--accent); translate:0 101%;
  transition:translate .45s var(--ease); }
.btn:hover::before{ translate:0 0 } .btn:hover{ border-color:var(--accent) }
.btn:hover span,.btn:hover i{ color:var(--bg) }
.btn--solid{ background:var(--accent); color:var(--bg); border-color:var(--accent); }
.btn--solid::before{ background:var(--fg); }

/* =========================================================
   SECTION HEADER ENHANCEMENTS (epigraphs + ornaments)
   ========================================================= */
.sec-head__epigraph{ font-family:var(--f-body); font-size:clamp(.88rem,1.1vw,1.02rem);
  color:var(--muted); font-style:italic; letter-spacing:.01em; opacity:.75;
  max-width:52ch; }
.sec-head__epigraph em{ font-style:italic; }
.sec-head__rule{ display:flex; align-items:center; gap:.8em; margin:.3em 0 .5em; }
.sec-head__rule span{ flex:1; height:1px;
  background:linear-gradient(90deg, transparent, var(--hair), transparent); }
.sec-head__rule i{ font-style:normal; color:var(--accent); font-size:.7rem; opacity:.6; }

/* =========================================================
   INTERSTITIALS (chapter breaks)
   ========================================================= */
.interstitial{ position:relative; height:100svh; display:grid; place-items:center;
  overflow:hidden; isolation:isolate; }
.interstitial__bg{ position:absolute; inset:0; z-index:-3; }
.interstitial__img{ width:100%; height:100%; object-fit:cover;
  transform-origin:50% 50%; will-change:transform; }
.interstitial__overlay{ position:absolute; inset:0; z-index:-2;
  background:
    radial-gradient(ellipse 70% 60% at 50% 50%, rgba(10,11,15,.55) 0%, rgba(10,11,15,.92) 100%),
    linear-gradient(180deg, rgba(10,11,15,.6) 0%, rgba(10,11,15,.3) 40%, rgba(10,11,15,.8) 100%); }
.interstitial__fog{ position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    linear-gradient(180deg, var(--bg) 0%, transparent 12%),
    linear-gradient(0deg, var(--bg) 0%, transparent 12%); }
.interstitial__content{ position:relative; z-index:1; display:grid; justify-items:center;
  gap:clamp(14px,2.4vh,28px); max-width:min(720px,88vw); text-align:center;
  padding:var(--pad); }
.interstitial__chapter{ color:var(--accent); font-size:.8rem; letter-spacing:.28em; }

/* ornament line */
.interstitial__ornament{ display:flex; align-items:center; gap:.7em; width:min(220px,60vw); }
.interstitial__ornament span{ flex:1; height:1px;
  background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 40%, transparent), transparent); }
.interstitial__ornament i{ width:6px; height:6px; border-radius:50%;
  background:var(--accent); opacity:.5; }

/* typewriter quote */
.interstitial__quote{ font-family:var(--f-display); font-weight:400; font-style:italic;
  font-size:clamp(1.2rem,3.2vw,2.2rem); line-height:1.35; letter-spacing:-.01em;
  color:var(--fg); max-width:58ch; min-height:3.5em; }
.interstitial__quote .tw-char{ opacity:0; transition:opacity .06s; }
.interstitial__quote .tw-char.tw-on{ opacity:1; }
/* blinking cursor */
.interstitial__quote .tw-cursor{ display:inline-block; width:2px; height:1.1em;
  background:var(--accent); vertical-align:text-bottom; margin-left:2px;
  animation:twBlink 1s step-end infinite; }
@keyframes twBlink{ 0%,100%{opacity:1} 50%{opacity:0} }

.interstitial__attr{ color:var(--muted); font-size:.74rem; letter-spacing:.2em;
  opacity:.8; margin-top:-.5em; }

.interstitial__continue{ margin-top:clamp(20px,4vh,50px); opacity:.5;
  animation:fadeUpDown 3s ease-in-out infinite; }
.interstitial__continue .mono{ font-size:.68rem; letter-spacing:.25em; color:var(--muted); }
.interstitial__arrow{ width:16px; height:26px; border:1px solid var(--muted); border-radius:10px;
  margin:8px auto 0; position:relative; }
.interstitial__arrow span{ position:absolute; top:5px; left:50%; translate:-50% 0;
  width:2px; height:5px; border-radius:2px; background:var(--accent);
  animation:wheel 1.9s infinite var(--ease); }
@keyframes fadeUpDown{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(6px)} }

/* Ken Burns zoom — driven by JS, base state is 1.08 to avoid edges showing */
[data-ken-burns]{ transform:scale(1.08); }

/* =========================================================
   HERO
   ========================================================= */
.hero{ position:relative; min-height:100svh; display:grid; align-items:center;
  padding:clamp(110px,14vh,170px) var(--pad) clamp(70px,10vh,110px); overflow:hidden; }
#field{ position:absolute; inset:0; width:100%; height:100%; }
.hero__glow{ position:absolute; top:-10%; right:-5%; width:min(80vw,780px); aspect-ratio:1;
  border-radius:50%; filter:blur(60px); opacity:.4;
  background:radial-gradient(circle, color-mix(in srgb,var(--accent) 55%,transparent) 0%, transparent 68%); }
.hero__grid{ position:relative; width:100%; max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:1.25fr .75fr; gap:clamp(30px,5vw,80px); align-items:center; }
.hero__title{ font-family:var(--f-display); font-weight:400; letter-spacing:-.018em;
  font-size:clamp(2.9rem,8.6vw,7.2rem); line-height:.92; margin:.22em 0 .18em; }
.hero__title .accent{ color:var(--accent); font-style:italic; }
.hero__role{ font-size:clamp(.95rem,1.5vw,1.2rem); font-weight:500; letter-spacing:.01em; }
.hero__sub{ margin-top:1.1em; color:var(--muted); max-width:52ch; font-size:clamp(.95rem,1.15vw,1.08rem); }
.hero__actions{ display:flex; flex-wrap:wrap; gap:.9em; margin-top:2.2em; }
.hero__meta{ display:flex; flex-wrap:wrap; gap:clamp(20px,3vw,48px); margin-top:2.6em;
  padding-top:1.6em; border-top:1px solid var(--hair); }
.hero__meta b{ display:block; font-size:.95rem; font-weight:600; }
.hero__meta span{ font-family:var(--f-mono); font-size:.72rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--muted); }

.hero__portrait{ position:relative; display:grid; place-items:center; }
.portrait{ position:relative; width:min(100%,380px); aspect-ratio:1; display:grid; place-items:center; }
.portrait__ring{ position:absolute; inset:0; border-radius:50%; border:1px solid var(--hair);
  border-top-color:var(--accent); animation:spin 14s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg) } }
.portrait__img{ width:88%; aspect-ratio:1; border-radius:50%; overflow:hidden;
  background:linear-gradient(160deg, color-mix(in srgb,var(--accent) 26%,transparent), transparent 60%);
  box-shadow:0 30px 70px -20px rgba(0,0,0,.7); }
.portrait__img img{ width:100%; height:100%; object-fit:cover; object-position:50% 12%; }
.portrait__tag{ position:absolute; bottom:2%; left:0; padding:.7em 1.1em; border-radius:6px;
  border:1px solid var(--hair); background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:blur(8px); line-height:1.5; color:var(--muted); }
.portrait__tag b{ color:var(--accent); }
.hero__scroll{ position:absolute; bottom:3.5vh; left:50%; translate:-50% 0; width:22px; height:36px;
  border:1px solid var(--hair); border-radius:12px; }
.hero__scroll span{ position:absolute; top:7px; left:50%; translate:-50% 0; width:3px; height:6px;
  border-radius:2px; background:var(--accent); animation:wheel 1.9s infinite var(--ease); }
@keyframes wheel{ 0%{opacity:0;transform:translateY(0)} 30%{opacity:1} 100%{opacity:0;transform:translateY(13px)} }

@media (max-width:900px){
  .hero__grid{ grid-template-columns:1fr; }
  .hero__portrait{ order:-1; }
  .portrait{ width:min(74%,270px); }
  .portrait__tag{ left:auto; right:0; }
}

/* =========================================================
   STRIP
   ========================================================= */
.strip{ border-block:1px solid var(--hair); padding:1.5em 0; overflow:hidden;
  background:color-mix(in srgb,var(--fg) 2.5%,transparent); }
.strip__track{ display:flex; align-items:center; gap:1.6em; width:max-content;
  font-family:var(--f-mono); font-size:.85rem; letter-spacing:.1em; text-transform:uppercase;
  will-change:transform; }
.strip__track i{ color:var(--accent); font-style:normal; }
.strip__track span{ color:var(--muted); white-space:nowrap; }

/* =========================================================
   STATS
   ========================================================= */
.stats-band{ padding-block:clamp(50px,7vh,90px); }
.stats{ max-width:var(--maxw); margin:0 auto; display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:clamp(20px,3vw,50px); }
.stat b{ display:block; font-family:var(--f-display); font-weight:400; letter-spacing:-.015em;
  font-size:clamp(2.4rem,5.6vw,4.4rem); line-height:1; color:var(--accent); }
.stat span{ font-family:var(--f-mono); font-size:.74rem; letter-spacing:.15em;
  text-transform:uppercase; color:var(--muted); }

/* =========================================================
   CAREER LADDER (pinned)
   ========================================================= */
/* Height is driven by the step count: 4 rungs × one viewport each. The sticky stage
   occupies the first viewport, so the scrollable range is exactly (steps - 1)
   viewports — which puts a snap point precisely where each rung is in full focus. */
.ladder-scene{ position:relative; height:calc(4 * 100svh); }
.ladder-steps{ position:absolute; inset:0; pointer-events:none; }
.ladder-step{ height:100svh; scroll-snap-align:start; scroll-snap-stop:always; }
/* Proximity, never mandatory. `scroll-snap-stop:always` is what delivers one gesture
   = one designation; mandatory would additionally force the page to *rest* on a snap
   point, and since none exist past the final rung it pinned the reader there with no
   way to scroll on. Armed by JS only while the ladder holds the viewport. */
html.is-snapping{ scroll-snap-type:y proximity; }
.ladder-scene__stage{ position:sticky; top:0; height:100svh; display:grid; align-content:center;
  max-width:var(--maxw); margin:0 auto; overflow:hidden;
  grid-template-columns:1fr auto; gap:clamp(20px,4vw,60px); }
.ladder{ position:relative; padding-left:clamp(28px,5vw,60px); display:grid;
  gap:clamp(14px,2.4vh,30px); }
.ladder__rail{ position:absolute; left:0; top:0; bottom:0; width:2px; background:var(--hair); }
.ladder__rail i{ display:block; width:100%; height:0; background:var(--accent);
  box-shadow:0 0 14px var(--accent); }
/* opacity/transform/filter are driven per-frame from JS with damping, so no CSS
   transition here — the two would fight and produce the stutter. */
.rung{ position:relative; opacity:.2; will-change:opacity, transform, filter; }
.rung.on{ opacity:1; }
.rung::before{ content:""; position:absolute; left:calc(-1 * clamp(28px,5vw,60px) - 5px); top:.75em;
  width:12px; height:12px; border-radius:50%; background:var(--bg);
  border:2px solid var(--hair); transition:border-color .5s, background .5s; }
.rung.on::before{ border-color:var(--accent); background:var(--accent); }
.rung__yr{ color:var(--accent); }
.rung h3{ font-family:var(--f-display); font-weight:400; letter-spacing:-.02em;
  font-size:clamp(1.5rem,3.4vw,2.9rem); line-height:1.1; margin:.1em 0 .2em; }
.rung p{ color:var(--muted); max-width:56ch; font-size:clamp(.9rem,1.1vw,1.05rem); }
.rung em{ color:var(--fg); font-style:normal; font-weight:500; }
.ladder__aside{ display:grid; align-content:center; justify-items:end; gap:.5em; text-align:right; }
.ladder__aside .mono{ color:var(--muted); }
.ladder__count b{ font-family:var(--f-display); font-weight:400; letter-spacing:-.02em;
  font-size:clamp(3rem,10vw,9rem); line-height:1; color:var(--accent); opacity:.22; }
@media (max-width:860px){
  .ladder-scene__stage{ grid-template-columns:1fr; }
  .ladder__aside{ display:none; }
}

/* =========================================================
   PULL QUOTE (curtain)
   ========================================================= */
.pull{ position:relative; height:210vh; }
.pull__panel{ position:sticky; top:0; height:100svh; display:grid; place-content:center;
  justify-items:center; padding:var(--pad); text-align:center; overflow:hidden;
  clip-path:inset(50% 0 50% 0); color:#f7f4ee;
  background:
    radial-gradient(120% 90% at 50% 0%, color-mix(in srgb,var(--accent) 42%, transparent) 0%, transparent 60%),
    linear-gradient(168deg, #16181f 0%, #0b0c11 55%, #14161d 100%); }
/* soft vignette so the type sits on something, not on a flat slab of colour */
.pull__panel::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(75% 60% at 50% 50%, transparent 40%, rgba(0,0,0,.55) 100%); }
.pull__inner{ position:relative; z-index:1; display:grid; justify-items:center;
  gap:clamp(12px,1.8vh,22px); max-width:min(1000px, 92vw); }
.pull__eyebrow{ color:var(--accent); opacity:.9; }
.pull__eyebrow::before{ content:""; display:block; width:34px; height:1px; background:currentColor;
  margin:0 auto .9em; }
/* sized against viewport height as well as width, so it can't outgrow the panel on short screens */
.pull__text{ font-family:var(--f-display); font-weight:400; font-style:italic;
  font-size:clamp(1.5rem, min(4.4vw, 6.4vh), 3.6rem); line-height:1.2; letter-spacing:-.01em; }
.pull__text em{ display:block; font-style:italic; color:var(--accent);
  letter-spacing:-.01em; margin:.1em 0; }

/* reach map — arcs draw themselves as the panel opens */
.reach{ width:min(1000px,92vw); height:auto; color:var(--accent); margin-top:.4em; }
.reach__arcs path{ opacity:.85; }
.reach__nodes circle,.reach__home circle{ fill:var(--accent); }
.reach text{ font-family:var(--f-mono); font-size:13px; letter-spacing:.08em;
  text-transform:uppercase; fill:#f7f4ee; text-anchor:middle; }
.reach__sub{ font-size:11px; fill:rgba(247,244,238,.45); letter-spacing:.06em; }
.reach__nodes g{ opacity:0; }
.reach__home text{ fill:var(--accent); font-size:13px; }
.reach__pulse{ fill:var(--accent); opacity:.25; transform-origin:center;
  animation:reachPulse 2.6s ease-out infinite; }
@keyframes reachPulse{ 0%{transform:scale(.7);opacity:.5} 100%{transform:scale(2.6);opacity:0} }
@media (max-width:700px){
  .reach text{ font-size:19px; } .reach__sub{ font-size:16px; }
  .reach__home text{ font-size:19px; }
}

/* =========================================================
   PROJECTS
   ========================================================= */
.projects{ max-width:var(--maxw); margin:0 auto; border-top:1px solid var(--hair); }
.proj{ border-bottom:1px solid var(--hair); padding:clamp(24px,3.4vw,44px) 0; cursor:pointer;
  transition:padding-left .45s var(--ease); }
.proj:hover{ padding-left:clamp(8px,1.4vw,20px); }
.proj__head{ display:flex; justify-content:space-between; align-items:flex-start; gap:1.5em; }
.proj__tag{ color:var(--accent); }
.proj h3{ font-family:var(--f-display); font-weight:400; letter-spacing:-.025em;
  font-size:clamp(1.7rem,4.2vw,3.2rem); line-height:1.05; margin:.15em 0 .1em; }
.proj__role{ font-family:var(--f-mono); font-size:.74rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted); }
.proj__lead{ color:var(--muted); max-width:62ch; margin-top:1em;
  font-size:clamp(.95rem,1.15vw,1.08rem); }
.proj__toggle{ flex:none; width:40px; height:40px; border-radius:50%; border:1px solid var(--hair);
  position:relative; transition:background .4s, border-color .4s, transform .5s var(--ease); }
.proj__toggle::before,.proj__toggle::after{ content:""; position:absolute; inset:50% 30%;
  height:1px; background:currentColor; translate:0 -50%; transition:.45s var(--ease); }
.proj__toggle::after{ rotate:90deg; }
.proj:hover .proj__toggle{ border-color:var(--accent); }
.proj.open .proj__toggle{ background:var(--accent); border-color:var(--accent); color:var(--bg);
  transform:rotate(135deg); }
.proj.open .proj__toggle::after{ opacity:0; }
/* single grid child, so the 0fr → 1fr track animation covers all the content */
.proj__body{ display:grid; grid-template-rows:0fr; opacity:0;
  transition:grid-template-rows .6s var(--ease), opacity .45s var(--ease), margin .6s var(--ease); }
.proj__inner{ overflow:hidden; min-height:0; }
.proj.open .proj__body{ grid-template-rows:1fr; opacity:1; margin-top:1.6em; }
.proj__points{ display:grid; gap:.85em; max-width:78ch; }
.proj__points li{ position:relative; padding-left:1.5em; color:var(--muted);
  font-size:clamp(.92rem,1.1vw,1.03rem); }
.proj__points li::before{ content:""; position:absolute; left:0; top:.62em; width:7px; height:7px;
  border-radius:50%; background:var(--accent); opacity:.65; }
.proj__points b{ color:var(--fg); font-weight:500; }
.proj__stack{ display:flex; flex-wrap:wrap; gap:.5em; margin-top:1.5em; }
.proj__stack span{ font-family:var(--f-mono); font-size:.72rem; letter-spacing:.1em;
  text-transform:uppercase; padding:.5em .9em; border-radius:100px; border:1px solid var(--hair);
  color:var(--muted); }

/* =========================================================
   SKILLS
   ========================================================= */
.skills{ max-width:var(--maxw); margin:0 auto; display:grid;
  grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:clamp(14px,1.8vw,26px); }
.skillcard{ padding:clamp(22px,2.4vw,34px); border:1px solid var(--hair); border-radius:10px;
  background:var(--card); transition:border-color .4s, transform .5s var(--ease); }
.skillcard:hover{ border-color:var(--accent); transform:translateY(-5px); }
.skillcard--wide{ grid-column:span 2; }
.skillcard h4{ display:flex; align-items:center; gap:.8em; font-family:var(--f-display);
  font-weight:400; font-size:1.25rem; margin-bottom:1.1em; letter-spacing:-.01em; }
.skillcard h4 .mono{ color:var(--accent); font-size:.72rem; }
.chips{ display:flex; flex-wrap:wrap; gap:.5em; }
.chips span{ font-size:.86rem; padding:.45em 1em; border-radius:100px;
  background:color-mix(in srgb,var(--fg) 7%,transparent); color:var(--muted); }
.langs{ display:grid; gap:.9em; }
.langs li{ display:grid; grid-template-columns:5.5em 1fr; align-items:center; gap:.8em;
  font-size:.82rem; }
.langs i{ display:block; height:3px; border-radius:2px;
  background:color-mix(in srgb,var(--fg) 12%,transparent); }
.langs b{ display:block; height:100%; border-radius:2px; background:var(--accent); }
.langs em{ grid-column:2; font-style:normal; font-family:var(--f-mono); font-size:.7rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-top:-.4em; }
@media (max-width:700px){ .skillcard--wide{ grid-column:span 1 } }

/* =========================================================
   BOOKS
   ========================================================= */
.shelf{ max-width:var(--maxw); margin:0 auto; display:grid;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:clamp(16px,2.2vw,32px); }
/* each volume carries its own --spine colour, matching the series' own branding */
.book__cover{ aspect-ratio:2/3; border-radius:6px; padding:clamp(18px,1.8vw,26px);
  display:flex; flex-direction:column; justify-content:space-between; gap:1em;
  border:1px solid color-mix(in srgb, var(--spine) 30%, transparent);
  background:
    radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--spine) 26%, transparent), transparent 62%),
    linear-gradient(165deg,#1b1712,#0d0b09);
  transition:transform .55s var(--ease), box-shadow .55s var(--ease), border-color .4s;
  position:relative; overflow:hidden; }
.book__cover::after{ content:""; position:absolute; left:0; top:0; bottom:0; width:5px;
  background:var(--spine); opacity:.9; }
.book:hover .book__cover{ transform:translateY(-10px) rotate(-1.5deg);
  box-shadow:0 26px 50px -16px rgba(0,0,0,.75);
  border-color:color-mix(in srgb, var(--spine) 70%, transparent); }
.book__cover .mono{ color:var(--spine); }
.book__cover h4{ font-family:var(--f-display); font-weight:400; font-size:clamp(1.2rem,1.8vw,1.7rem);
  line-height:1.05; letter-spacing:-.025em; }
.book__sub{ font-size:.82rem; line-height:1.4; color:var(--muted); margin-top:.5em; }
.book__cover i{ font-style:normal; font-family:var(--f-mono); font-size:.7rem; letter-spacing:.13em;
  text-transform:uppercase; color:color-mix(in srgb, var(--spine) 80%, var(--fg)); }
.book p{ margin-top:.9em; font-size:.88rem; color:var(--muted); }
.books-cta{ max-width:var(--maxw); margin:clamp(34px,4vw,56px) auto 0;
  display:flex; flex-wrap:wrap; gap:.8em; }

/* =========================================================
   RECOMMENDATIONS
   ========================================================= */
.recs{ max-width:var(--maxw); margin:0 auto; columns:3; column-gap:clamp(16px,2vw,28px); }
.rec{ break-inside:avoid; margin-bottom:clamp(16px,2vw,28px); padding:clamp(22px,2.4vw,34px);
  border:1px solid var(--hair); border-radius:10px; background:var(--card);
  transition:border-color .4s, transform .5s var(--ease); }
.rec:hover{ border-color:var(--accent); transform:translateY(-4px); }
.rec blockquote{ font-size:.94rem; color:var(--muted); line-height:1.72; position:relative; }
.rec blockquote::before{ content:"\201C"; font-family:var(--f-display); font-weight:400; font-size:3rem;
  color:var(--accent); opacity:.3; line-height:0; display:block; margin-bottom:.35em; }
.rec figcaption{ display:flex; align-items:center; gap:.9em; margin-top:1.4em; padding-top:1.2em;
  border-top:1px solid var(--hair); }
.rec figcaption img{ width:44px; height:44px; border-radius:50%; object-fit:cover; flex:none;
  border:1px solid var(--hair); }
.rec figcaption b{ display:block; font-weight:600; font-size:.9rem; }
.rec figcaption span{ display:block; font-size:.82rem; color:var(--muted); line-height:1.4; }
.rec figcaption em{ display:block; font-style:normal; color:var(--accent); opacity:.85;
  font-size:.68rem; margin-top:.35em; }
@media (max-width:1000px){ .recs{ columns:2 } }
@media (max-width:680px){ .recs{ columns:1 } }

/* =========================================================
   CREDENTIALS
   ========================================================= */
.creds{ max-width:var(--maxw); margin:0 auto; display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:clamp(18px,2.4vw,36px); }
.cred{ padding-top:1.3em; border-top:2px solid var(--hair); transition:border-color .4s; }
.cred:hover{ border-top-color:var(--accent); }
.cred .mono{ color:var(--accent); }
.cred h4{ font-family:var(--f-display); font-weight:400; font-size:1.3rem; margin:.45em 0 .3em;
  letter-spacing:-.01em; }
.cred p{ color:var(--muted); font-size:.92rem; }

/* =========================================================
   CONTACT
   ========================================================= */
.contact{ position:relative; min-height:100svh; display:grid; align-content:center;
  padding-bottom:0; }
.contact__inner{ max-width:var(--maxw); margin:0 auto; text-align:center; display:grid;
  justify-items:center; gap:1.3em; }
.contact__title{ font-family:var(--f-display); font-weight:400; letter-spacing:-.018em;
  font-size:clamp(2.6rem,9vw,7.5rem); line-height:.93; }
.contact__title .accent{ color:var(--accent); font-style:italic; }
.contact__links{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:1px; background:var(--hair); border:1px solid var(--hair); border-radius:10px;
  overflow:hidden; margin-top:1.4em; width:min(100%,900px); }
.clink{ background:var(--bg); padding:1.5em 1.3em; display:grid; gap:.4em; text-align:left;
  transition:background .35s; }
.clink:hover{ background:color-mix(in srgb,var(--accent) 12%,var(--bg)); }
.clink .mono{ color:var(--accent); }
.clink b{ font-weight:500; font-size:.98rem; word-break:break-word; }
.contact__resumes{ margin-top:1.4em; display:grid; gap:1em; justify-items:center; }
.contact__resumes .mono{ color:var(--muted); }
.contact__resumes div{ display:flex; gap:.8em; flex-wrap:wrap; justify-content:center; }

.footer{ margin-top:clamp(60px,9vh,120px); border-top:1px solid var(--hair);
  padding:2em var(--pad); display:flex; flex-wrap:wrap; justify-content:space-between; gap:1em;
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); }

/* =========================================================
   MOTION SAFETY
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
  .js [data-reveal]{ opacity:1 !important; transform:none !important; }
  [data-char-split] .ch,[data-word-split] .wd{ opacity:1 !important; transform:none !important; }
  .ladder-scene,.pull{ height:auto !important; }
  .ladder-scene__stage,.pull__panel{ position:static !important; height:auto !important; }
  .pull__panel{ clip-path:none !important; padding-block:12vh; }
  .rung{ opacity:1 !important; transform:none !important; }
  .proj__body{ grid-template-rows:1fr; opacity:1; margin-top:1.6em; }
  .interstitial{ height:auto !important; min-height:60vh; }
  .interstitial__quote .tw-char{ opacity:1 !important; }
  .interstitial__img{ transform:none !important; }
  .pshape{ display:none !important; }
  .chapter-indicator,.page-counter{ display:none !important; }
}