/* =========================================================
   SK KUTUBUDDIN — portfolio
   Dark theme  : black + red (the reference video)
   Light theme : parchment / linen / bronze palette
   ========================================================= */
@font-face {
  font-family: 'Anton';
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/anton-latin-400-normal.woff2) format('woff2')
}

@font-face {
  font-family: 'Outfit';
  font-weight: 100 900;
  font-display: swap;
  src: url(assets/fonts/outfit-latin-wght-normal.woff2) format('woff2')
}

@font-face {
  font-family: 'Instrument Serif';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url(assets/fonts/instrument-serif-latin-400-normal.woff2) format('woff2')
}

@font-face {
  font-family: 'Instrument Serif';
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  src: url(assets/fonts/instrument-serif-latin-400-italic.woff2) format('woff2')
}

:root {
  --disp: 'Anton', 'Bebas Neue', Impact, 'Arial Narrow', sans-serif;
  --sans: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --gut: clamp(18px, 4.4vw, 72px);
  --nav: 76px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --r: 18px;
}

/* ---------- DARK (default) ---------- */
:root,
[data-theme="dark"] {
  --bg: #0a0a0c;
  --bg2: #101013;
  --surface: #151519;
  --surface2: #1c1c21;
  --line: rgba(255, 255, 255, .09);
  --line2: rgba(255, 255, 255, .16);
  --tx: #f5f2ed;
  --mu: #a7a39d;
  --dim: #76726d;
  --accent: #e5222b;
  --accent-t: #ff4a52;
  --on-accent: #fff;
  --btn-bg: #f5f2ed;
  --btn-tx: #0a0a0c;
  --disc: #141418;
  --disc-ring: rgba(229, 34, 43, .35);
  --glow: rgba(229, 34, 43, .20);
  --chip: rgba(255, 255, 255, .05);
  --ph1: #1e1e24;
  --ph2: #121216;
  --nav-bg: rgba(10, 10, 12, .82);
  --sh-sm: 0 1px 2px rgba(0, 0, 0, .5);
  --sh-md: 0 2px 4px rgba(0, 0, 0, .35), 0 14px 30px -12px rgba(0, 0, 0, .7);
  --sh-lg: 0 4px 8px rgba(0, 0, 0, .4), 0 36px 70px -28px rgba(0, 0, 0, .9);
  --hi: inset 0 1px 0 rgba(255, 255, 255, .05);
  --photo-sh: rgba(0, 0, 0, .55);
  color-scheme: dark;
}

/* ---------- LIGHT ---------- */
[data-theme="light"] {
  --bg: #f0efeb;
  /* parchment   */
  --bg2: #eddcd2;
  /* powder petal */
  --surface: #fff1e6;
  /* linen        */
  --surface2: #f7e6da;
  --line: rgba(165, 165, 141, .45);
  /* dry sage */
  --line2: rgba(165, 165, 141, .8);
  --tx: #2b241f;
  --mu: #6a6058;
  --dim: #857b70;
  --accent: #cb997e;
  /* light bronze */
  --accent-t: #9b6446;
  --on-accent: #2b241f;
  --btn-bg: #2b241f;
  --btn-tx: #f0efeb;
  --disc: #ddbea9;
  /* desert sand  */
  --disc-ring: rgba(155, 100, 70, .35);
  --glow: rgba(203, 153, 126, .28);
  --chip: rgba(183, 183, 164, .28);
  /* ash grey */
  --ph1: #ddbea9;
  --ph2: #eddcd2;
  --nav-bg: rgba(240, 239, 235, .86);
  --sh-sm: 0 1px 2px rgba(74, 52, 40, .10), 0 1px 1px rgba(74, 52, 40, .05);
  --sh-md: 0 2px 4px rgba(74, 52, 40, .06), 0 14px 28px -12px rgba(74, 52, 40, .22);
  --sh-lg: 0 4px 8px rgba(74, 52, 40, .06), 0 34px 60px -26px rgba(74, 52, 40, .38);
  --hi: inset 0 1px 0 rgba(255, 255, 255, .6);
  --photo-sh: rgba(74, 52, 40, .35);
  color-scheme: light;
}

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

html {
  -webkit-text-size-adjust: 100%;
  overflow-x: clip
}

html.locked,
body.locked {
  overflow: hidden
}

body {
  background: var(--bg);
  color: var(--tx);
  font-family: var(--sans);
  font-weight: 300;
  line-height: 1.6;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  transition: background .5s, color .5s
}

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(--on-accent)
}

::-webkit-scrollbar {
  width: 8px
}

::-webkit-scrollbar-track {
  background: var(--bg)
}

::-webkit-scrollbar-thumb {
  background: var(--line2);
  border-radius: 8px
}

:focus-visible {
  outline: 2px solid var(--accent-t);
  outline-offset: 3px;
  border-radius: 6px
}

.ic {
  width: 1em;
  height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none
}

.ic.fill {
  fill: currentColor;
  stroke: none
}

.eyebrow,
.kicker {
  font: 600 .7rem var(--sans);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--accent-t)
}

.kicker {
  display: block;
  margin-bottom: .6rem
}

.kicker.center {
  text-align: center
}

/* buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  padding: .85em 1.5em;
  border-radius: 999px;
  font-weight: 500;
  font-size: .92rem;
  letter-spacing: .01em;
  white-space: nowrap;
  transition: transform .35s var(--ease), box-shadow .35s, background .3s, color .3s, border-color .3s
}

.btn .ic {
  font-size: 1.1em
}

.btn-solid {
  background: var(--btn-bg);
  color: var(--btn-tx);
  box-shadow: var(--sh-md)
}

.btn-solid:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-lg)
}

.btn-line {
  border: 1px solid var(--line2);
  color: var(--tx);
  background: transparent
}

.btn-line:hover {
  border-color: var(--tx);
  transform: translateY(-3px);
  box-shadow: var(--sh-md)
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem
}

.btn-row.center {
  justify-content: center
}

/* overlay / intro */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: opacity .9s var(--ease), visibility .9s
}

.overlay:not(.on) {
  opacity: 0;
  visibility: hidden;
  pointer-events: none
}

#intro-inner {
  position: relative;
  text-align: center;
  padding: 0 16px
}

.intro-pre {
  font: 500 clamp(.6rem, 1.5vw, .76rem) var(--sans);
  letter-spacing: .5em;
  text-transform: uppercase;
  color: var(--accent-t);
  margin-bottom: 1.6rem;
  opacity: 0;
  transform: translateY(12px)
}

.s1 .intro-pre {
  animation: fadeUp 1.1s var(--ease) forwards
}

.intro-title {
  font-family: var(--disp);
  text-transform: uppercase;
  line-height: .9
}

.ln {
  display: block;
  white-space: nowrap
}

.ln1 {
  font-size: clamp(1.5rem, 4.6vw, 3rem);
  letter-spacing: .5em;
  margin: 0 0 .25em .5em;
  color: var(--accent-t)
}

.ln2 {
  font-size: clamp(3rem, 13.5vw, 10rem);
  letter-spacing: .02em;
  color: var(--tx)
}

.ln span {
  display: inline-block;
  opacity: 0;
  transform: translateY(60%) scale(1.15);
  filter: blur(14px)
}

.s2 .ln span {
  animation: letterIn 1s var(--ease) forwards;
  animation-delay: calc(var(--i)*65ms)
}

.intro-line {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  transform: scaleX(0);
  opacity: 0
}

.s2 .intro-line {
  animation: line 2s cubic-bezier(.2, .7, .2, 1) forwards
}

.s3 #intro-inner {
  animation: zoomThru 1s cubic-bezier(.7, 0, .9, .4) forwards
}

.skip {
  position: absolute;
  right: var(--gut);
  bottom: 28px;
  font: 500 .72rem var(--sans);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--mu);
  display: inline-flex;
  align-items: center;
  gap: .6em;
  padding: .7em 1.1em;
  border: 1px solid var(--line2);
  border-radius: 999px;
  transition: .3s
}

.skip:hover {
  color: var(--tx);
  border-color: var(--tx)
}

@keyframes fadeUp {
  to {
    opacity: 1;
    transform: none
  }
}

@keyframes letterIn {
  60% {
    filter: blur(2px)
  }

  to {
    opacity: 1;
    transform: none;
    filter: blur(0)
  }
}

@keyframes line {
  0% {
    transform: scaleX(0);
    opacity: 0
  }

  20% {
    opacity: 1
  }

  60% {
    transform: scaleX(1);
    opacity: 1
  }

  100% {
    transform: scaleX(1);
    opacity: 0
  }
}

@keyframes zoomThru {
  to {
    transform: scale(8);
    filter: blur(14px);
    opacity: 0
  }
}

/* ---------- NAV ---------- */
#nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 800;
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 16px var(--gut);
  transition: background .4s, padding .4s, box-shadow .4s, transform .9s var(--ease);
  transform: translateY(-110%)
}

body.ready #nav {
  transform: none
}

#nav.scrolled {
  background: var(--nav-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: 11px var(--gut);
  box-shadow: 0 1px 0 var(--line), var(--sh-sm)
}

.logo {
  font-family: var(--disp);
  font-size: 1.9rem;
  line-height: 1;
  letter-spacing: .05em;
  color: var(--tx)
}

.logo::after {
  content: '';
  display: inline-block;
  width: .28em;
  height: .28em;
  margin-left: .08em;
  background: var(--accent);
  border-radius: 50%
}

.links {
  display: flex;
  gap: 1.9rem;
  margin: 0 auto
}

.links a {
  font-size: .88rem;
  font-weight: 400;
  color: var(--mu);
  position: relative;
  padding: .3rem 0;
  transition: color .3s
}

.links a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1.5px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s var(--ease)
}

.links a:hover,
.links a.on {
  color: var(--tx)
}

.links a:hover::after,
.links a.on::after {
  transform: scaleX(1)
}

.nav-r {
  display: flex;
  align-items: center;
  gap: .7rem
}

.icon-btn {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line2);
  font-size: 1.05rem;
  color: var(--tx);
  transition: .3s;
  box-shadow: var(--sh-sm)
}

.icon-btn:hover {
  background: var(--tx);
  color: var(--bg);
  transform: rotate(18deg)
}

.icon-btn .ic {
  grid-area: 1/1
}

[data-theme="dark"] .i-moon,
[data-theme="light"] .i-sun {
  display: none
}

:root:not([data-theme]) .i-moon {
  display: none
}

.nav-cv {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-size: .84rem;
  font-weight: 500;
  padding: .62em 1.15em;
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-tx);
  box-shadow: var(--sh-md);
  transition: .35s var(--ease)
}

.nav-cv:hover {
  transform: translateY(-2px);
  box-shadow: var(--sh-lg)
}

.burger {
  display: none;
  width: 40px;
  height: 40px;
  position: relative
}

.burger span {
  position: absolute;
  left: 9px;
  right: 9px;
  height: 2px;
  background: var(--tx);
  border-radius: 2px;
  transition: .35s var(--ease)
}

.burger span:nth-child(1) {
  top: 15px
}

.burger span:nth-child(2) {
  top: 23px
}

.burger.open span:nth-child(1) {
  top: 19px;
  transform: rotate(45deg)
}

.burger.open span:nth-child(2) {
  top: 19px;
  transform: rotate(-45deg)
}

#progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--accent);
  transform-origin: left;
  transform: scaleX(0);
  z-index: 900
}

/* =========================================================
   SCENE  (gate + scroll-driven chapters)
   ========================================================= */
.scene {
  position: relative;
  height: 580vh
}

.stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: var(--bg);
  transition: background .5s
}

.stage-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 65% 50% at 50% 108%, var(--glow), transparent 72%)
}

.disc {
  position: absolute;
  left: 50%;
  bottom: -24vh;
  width: min(88vh, 92vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--disc);
  border: 1px solid var(--disc-ring);
  box-shadow: var(--sh-lg), var(--hi);
  will-change: transform;
  transform: translateX(-50%);
  transition: background .5s
}

.giant {
  position: absolute;
  left: 0;
  right: 0;
  top: 12vh;
  text-align: center;
  font-family: var(--disp);
  font-weight: 400;
  text-transform: uppercase;
  line-height: .84;
  color: var(--tx);
  z-index: 2;
  pointer-events: none;
  will-change: transform, opacity
}

.g-sk {
  display: block;
  font-size: clamp(1.3rem, 3.2vw, 2.8rem);
  letter-spacing: .6em;
  margin-right: -.6em;
  color: var(--accent-t);
  margin-bottom: .15em
}

.g-name {
  display: block;
  font-size: clamp(4rem, 18.5vw, 21rem);
  letter-spacing: .01em;
  white-space: nowrap
}

.g-name span {
  display: inline-block;
  opacity: 0;
  transform: translateY(45%)
}

body.gate-in .g-name span {
  animation: letterUp 1.1s var(--ease) forwards;
  animation-delay: calc(var(--i)*55ms + .15s)
}

@keyframes letterUp {
  to {
    opacity: 1;
    transform: none
  }
}

.portrait {
  position: absolute;
  left: 50%;
  bottom: 0;
  height: min(80vh, 900px);
  height: min(80svh, 900px);
  aspect-ratio: 980/1300;
  z-index: 3;
  transform-origin: 50% 100%;
  will-change: transform;
  transform: translateX(-50%)
}

.portrait-in {
  width: 100%;
  height: 100%;
  opacity: 0;
  transform: translateY(8%)
}

body.gate-in .portrait-in {
  animation: rise 1.4s var(--ease) .1s forwards
}

@keyframes rise {
  to {
    opacity: 1;
    transform: none
  }
}

.portrait img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom;
  filter: drop-shadow(0 24px 26px var(--photo-sh));
  -webkit-mask-image: linear-gradient(to bottom, #000 88%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 88%, transparent 100%)
}

/* gate */
.gate {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none
}

.gate>* {
  pointer-events: auto
}

.gate-l,
.gate-r {
  position: absolute;
  bottom: 6vh;
  opacity: 0;
  transform: translateY(20px)
}

.gate-l {
  left: var(--gut)
}

.gate-r {
  right: var(--gut);
  text-align: right
}

body.gate-in .gate-l,
body.gate-in .gate-r {
  animation: fadeUp 1s var(--ease) 1.1s forwards
}

.gate-txt {
  margin-top: .5rem;
  color: var(--mu);
  font-size: .95rem;
  line-height: 1.55
}

.cue {
  position: absolute;
  left: 50%;
  bottom: 4.5vh;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .7rem;
  opacity: 0
}

body.gate-in .cue {
  animation: fadeUpC 1s var(--ease) 1.3s forwards
}

@keyframes fadeUpC {
  from {
    opacity: 0;
    transform: translate(-50%, 20px)
  }

  to {
    opacity: 1;
    transform: translate(-50%, 0)
  }
}

.cue span {
  font: 600 .68rem var(--sans);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--tx);
  padding: .55em 1.1em;
  border-radius: 999px;
  background: var(--nav-bg);
  border: 1px solid var(--line2);
  box-shadow: var(--sh-md);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px)
}

.cue i {
  width: 1.5px;
  height: 44px;
  background: linear-gradient(var(--accent-t), transparent);
  transform-origin: top;
  animation: cueLine 1.8s ease-in-out infinite
}

@keyframes cueLine {
  0% {
    transform: scaleY(0)
  }

  50% {
    transform: scaleY(1)
  }

  100% {
    transform: scaleY(1);
    opacity: 0
  }
}

/* chapters */
.chapter {
  position: absolute;
  top: 50%;
  z-index: 5;
  width: min(470px, 42vw);
  opacity: 0;
  visibility: hidden;
  will-change: transform, opacity;
  transform: translateY(calc(-50% + var(--oy, 0px)))
}

.chapter.l {
  left: var(--gut)
}

.chapter.r {
  right: calc(var(--gut) + 18px)
}

.chapter.c {
  left: 50%;
  top: 13vh;
  width: min(740px, 88vw);
  text-align: center;
  transform: translate(-50%, var(--oy, 0px))
}

.chapter .eyebrow {
  display: block;
  margin-bottom: 1rem
}

.quote {
  font: 400 clamp(2rem, 3.6vw, 3.3rem)/1.06 var(--serif);
  letter-spacing: -.01em;
  margin-bottom: 1.1rem
}

.chapter.c .quote {
  font-size: clamp(2.2rem, 4.4vw, 4rem)
}

.c-h {
  font: 400 clamp(1.8rem, 2.8vw, 2.5rem)/1.05 var(--disp);
  text-transform: uppercase;
  letter-spacing: .01em;
  margin-bottom: .7rem
}

.body {
  color: var(--mu);
  font-size: clamp(.94rem, 1.15vw, 1.04rem);
  line-height: 1.7
}

.bar-row {
  display: flex;
  justify-content: space-between;
  margin: 1.3rem 0 .5rem;
  font-size: .8rem;
  color: var(--mu)
}

.bar {
  height: 4px;
  background: var(--line2);
  border-radius: 4px;
  overflow: hidden
}

.bar i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--accent);
  border-radius: 4px;
  transition: width 1.4s var(--ease)
}

.chapter.show .bar i {
  width: var(--w)
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin-top: 1.2rem
}

.tags span,
.chip {
  display: inline-block;
  padding: .38em .9em;
  border-radius: 999px;
  font-size: .8rem;
  color: var(--mu);
  background: var(--chip);
  border: 1px solid var(--line)
}

.nums {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem 1.6rem;
  margin-bottom: 1.5rem
}

.nums b {
  display: block;
  font: 400 clamp(2.4rem, 4vw, 3.6rem)/1 var(--disp);
  color: var(--tx)
}

.nums span {
  font-size: .78rem;
  color: var(--mu);
  letter-spacing: .04em
}

.chapter.c .btn-row {
  justify-content: center;
  margin-top: 1.4rem
}

.hint {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: 1.8rem;
  font-size: .8rem;
  color: var(--dim);
  letter-spacing: .06em
}

.hint .ic {
  animation: nudge 1.6s ease-in-out infinite
}

@keyframes nudge {
  50% {
    transform: translateY(5px)
  }
}

.sdots {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 7;
  display: flex;
  flex-direction: column;
  gap: 10px;
  opacity: 0;
  transition: opacity .5s
}

.sdots.on {
  opacity: 1
}

.sdots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--line2);
  transition: .4s var(--ease)
}

.sdots i.on {
  background: var(--accent-t);
  transform: scale(1.7)
}

/* marquee */
.marquee {
  overflow: hidden;
  padding: 1.05rem 0;
  border-block: 1px solid var(--line);
  background: var(--bg2);
  position: relative;
  z-index: 2
}

.m-track {
  display: flex;
  width: max-content;
  animation: mq 40s linear infinite
}

.m-track span {
  display: inline-flex;
  align-items: center;
  font: 500 .8rem var(--sans);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--mu);
  white-space: nowrap;
  padding-right: 2.4rem
}

.m-track span::after {
  content: '';
  width: 5px;
  height: 5px;
  margin-left: 2.4rem;
  background: var(--accent);
  border-radius: 50%
}

@keyframes mq {
  to {
    transform: translateX(-50%)
  }
}

/* sections */
.sec {
  padding: clamp(70px, 9vw, 140px) var(--gut) 0;
  position: relative
}

.sec-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: clamp(28px, 4vw, 56px)
}

.h-disp {
  font: 400 clamp(2.4rem, 6vw, 5rem)/1 var(--disp);
  text-transform: uppercase;
  letter-spacing: .01em
}

.h-disp em {
  font-style: normal;
  color: var(--accent-t)
}

.sec-note {
  color: var(--dim);
  font-size: .85rem;
  text-align: right;
  line-height: 1.5
}

/* reveal */
.rv {
  opacity: 0
}

.rv.in {
  opacity: 1;
  animation: rvIn 1s var(--ease) backwards;
  animation-delay: var(--d, 0s)
}

@keyframes rvIn {
  from {
    opacity: 0;
    transform: translateY(46px)
  }
}

.stagger>* {
  opacity: 0
}

.stagger.in>* {
  opacity: 1;
  animation: cardIn .9s var(--ease) backwards;
  animation-delay: calc(var(--i, 0)*90ms)
}

@keyframes cardIn {
  from {
    opacity: 0;
    transform: translateY(50px)
  }
}

/* =========================================================
   PROJECTS — vertical stacking cards
   ========================================================= */
.stack {
  position: relative;
  padding-bottom: 6vh
}

.pcard {
  --sc: 1;
  position: sticky;
  top: calc(var(--nav) + var(--i)*18px);
  margin-bottom: 9vh;
  border-radius: 26px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--sh-lg), var(--hi);
  transform: scale(var(--sc));
  transform-origin: 50% 0;
  will-change: transform;
  overflow: hidden;
  min-height: min(80vh, 760px)
}

.pcard:last-child {
  margin-bottom: 0
}

.pcard-in {
  display: grid;
  grid-template-columns: .85fr 1.25fr;
  gap: clamp(20px, 3.4vw, 56px);
  padding: clamp(22px, 3vw, 44px);
  height: 100%;
  align-items: center;
  min-height: inherit
}

.p-dim {
  position: absolute;
  inset: 0;
  background: var(--bg);
  opacity: var(--dm, 0);
  pointer-events: none
}

.p-top {
  display: flex;
  align-items: center;
  gap: .9rem;
  margin-bottom: 1rem
}

.p-num {
  font: 400 1.1rem var(--disp);
  color: var(--accent-t);
  letter-spacing: .08em
}

.p-type {
  font: 500 .7rem var(--sans);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--mu);
  padding-left: .9rem;
  border-left: 1px solid var(--line2)
}

.p-info h3 {
  font: 400 clamp(2.4rem, 4.8vw, 4.3rem)/.98 var(--disp);
  text-transform: uppercase;
  letter-spacing: .005em;
  margin-bottom: .8rem
}

.p-tag {
  font: 400 clamp(1.3rem, 1.9vw, 1.75rem)/1.2 var(--serif);
  color: var(--tx);
  margin-bottom: .9rem
}

.p-desc {
  color: var(--mu);
  font-size: 1.06rem;
  margin-bottom: 1rem;
  max-width: 52ch
}

.p-pts {
  margin-bottom: 1.2rem
}

.p-pts li {
  position: relative;
  padding-left: 1.2rem;
  font-size: 1rem;
  color: var(--mu);
  margin-bottom: .35rem
}

.p-pts li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .7em;
  width: 7px;
  height: 1.5px;
  background: var(--accent)
}

.p-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-bottom: 1.4rem
}

.p-btns {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem
}

.p-media {
  position: relative;
  align-self: center;
  aspect-ratio: 16/10.6;
  width: 100%
}

.shot {
  position: absolute;
  overflow: hidden;
  border-radius: 14px;
  background: linear-gradient(140deg, var(--ph1), var(--ph2));
  border: 1px solid var(--line);
  box-shadow: var(--sh-lg)
}

.shot.main {
  inset: 0 0 13% 0
}

.shot.sub {
  width: 44%;
  aspect-ratio: 16/10;
  left: -6%;
  bottom: 0;
  border-radius: 12px;
  border: 4px solid var(--surface);
  box-shadow: var(--sh-lg)
}

.shot img {
  position: absolute;
  inset: -6% 0;
  width: 100%;
  height: 112%;
  max-width: none;
  object-fit: cover;
  object-position: left top;
  transform: translateY(var(--py, 0px))
}

.shot.sub img {
  inset: 0;
  height: 100%;
  transform: none
}

.shot::before {
  content: attr(data-t);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 1rem;
  font: 400 clamp(1.6rem, 3.6vw, 3.2rem)/1 var(--disp);
  text-transform: uppercase;
  color: var(--tx);
  opacity: .14
}

.shot::after {
  content: 'Image coming soon';
  position: absolute;
  left: 0;
  right: 0;
  bottom: .9rem;
  text-align: center;
  font: 500 .66rem var(--sans);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--mu)
}

.shot.sub::before {
  font-size: 1rem
}

.shot.sub::after {
  display: none
}

.shot.has-img::before,
.shot.has-img::after {
  display: none
}

/* moments */
.moment {
  flex: none;
  width: min(470px, 80vw);
  min-height: min(460px, 56vh);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 2.2rem 2.1rem;
  border-radius: 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--sh-md), var(--hi);
  transition: transform .5s var(--ease), box-shadow .5s, border-color .3s
}

.moment:hover {
  transform: translateY(-8px);
  box-shadow: var(--sh-lg), var(--hi);
  border-color: var(--line2)
}

.moment small {
  font: 400 clamp(3.6rem, 6vw, 5.4rem)/1 var(--disp);
  color: var(--accent-t);
  opacity: .9
}

.moment h3 {
  font: 400 clamp(2rem, 3vw, 2.7rem)/1.02 var(--disp);
  text-transform: uppercase;
  letter-spacing: .01em;
  margin: 1.2rem 0 .8rem
}

.moment p {
  font-size: clamp(1rem, 1.2vw, 1.12rem);
  color: var(--mu);
  line-height: 1.6
}

/* horizontal pinned sections */
.hsec {
  position: relative
}

.h-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding-top: calc(var(--nav) + clamp(10px, 3vh, 44px))
}

.hsec .sec-head {
  padding: 0 var(--gut);
  margin-bottom: clamp(14px, 3vh, 34px)
}

.h-hint {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-size: .85rem;
  color: var(--dim);
  letter-spacing: .04em
}

.h-hint .ic {
  animation: slide 1.6s ease-in-out infinite
}

@keyframes slide {
  50% {
    transform: translateX(6px)
  }
}

.h-view {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center
}

.h-track {
  position: relative;
  display: flex;
  gap: clamp(16px, 2vw, 30px);
  padding: 0 var(--gut);
  will-change: transform
}

.h-prog {
  height: 3px;
  margin: clamp(12px, 2.5vh, 26px) var(--gut) clamp(18px, 4vh, 40px);
  background: var(--line);
  border-radius: 3px;
  overflow: hidden
}

.h-prog i {
  display: block;
  height: 100%;
  background: var(--accent);
  transform-origin: left;
  transform: scaleX(0)
}

/* skills */
.skills {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: clamp(18px, 4vw, 64px);
  align-items: start
}

.sk-tabs {
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: sticky;
  top: 110px
}

.tab {
  text-align: left;
  padding: 1rem 1.1rem;
  border-radius: 14px;
  font: 400 1.15rem var(--sans);
  color: var(--mu);
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: .35s var(--ease)
}

.tab::after {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0;
  transform: scale(0);
  transition: .35s var(--ease)
}

.tab:hover {
  color: var(--tx);
  background: var(--chip)
}

.tab.on {
  color: var(--tx);
  background: var(--surface);
  box-shadow: var(--sh-md), var(--hi);
  border: 1px solid var(--line)
}

.tab.on::after {
  opacity: 1;
  transform: scale(1)
}

.sk-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 16px
}

.sk {
  padding: 1.6rem 1.6rem;
  border-radius: 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--sh-sm), var(--hi);
  transition: .4s var(--ease)
}

.sk b {
  display: block;
  font: 500 1.25rem var(--sans);
  color: var(--tx);
  margin-bottom: .25rem
}

.sk small {
  font-size: .9rem;
  color: var(--mu)
}

.sk:hover {
  transform: translateY(-5px);
  box-shadow: var(--sh-md), var(--hi);
  border-color: var(--accent)
}

/* journey */
.s-panel {
  flex: none;
  width: min(1080px, 88vw);
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: clamp(18px, 3vw, 48px);
  align-items: center;
  padding: clamp(22px, 3vw, 44px);
  border-radius: 28px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--sh-lg), var(--hi)
}

.s-n {
  font: 400 clamp(4.4rem, 8vw, 7.4rem)/.85 var(--disp);
  color: transparent;
  -webkit-text-stroke: 1.5px var(--line2);
  display: block;
  margin-bottom: .7rem
}

.s-head h3 {
  font: 400 clamp(1.8rem, 2.8vw, 2.5rem)/1.05 var(--disp);
  text-transform: uppercase;
  letter-spacing: .01em
}

.s-y {
  display: block;
  font: 600 .74rem var(--sans);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent-t);
  margin: .5rem 0 .9rem
}

.s-head p {
  color: var(--mu);
  font-size: 1.02rem;
  max-width: 34ch
}

.s-eps {
  display: flex;
  flex-direction: column;
  gap: 12px
}

.ep {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.2rem;
  padding: 1.3rem 1.5rem;
  border-radius: 18px;
  background: var(--bg);
  border: 1px solid var(--line);
  box-shadow: var(--sh-sm), var(--hi);
  transition: transform .5s var(--ease), box-shadow .5s
}

.ep:hover {
  transform: translateX(8px);
  box-shadow: var(--sh-md), var(--hi)
}

.ep-n {
  font: 400 2.6rem/1 var(--disp);
  color: var(--accent-t);
  min-width: 2.2ch
}

.ep h4 {
  font: 400 1.55rem/1.1 var(--disp);
  text-transform: uppercase;
  letter-spacing: .01em;
  margin-bottom: .35rem
}

.ep p {
  color: var(--mu);
  font-size: 1rem;
  line-height: 1.55
}

@media (max-height:820px) {
  .ep {
    padding: .9rem 1.2rem
  }

  .ep p {
    font-size: .92rem
  }

  .ep h4 {
    font-size: 1.35rem
  }

  .s-n {
    font-size: 4.6rem
  }

  .s-head p {
    font-size: .92rem
  }
}

/* contact */
.contact {
  position: relative;
  padding: clamp(90px, 12vw, 170px) var(--gut) 60px;
  margin-top: clamp(70px, 9vw, 140px);
  background: var(--bg2);
  border-top: 1px solid var(--line);
  overflow: hidden
}

.contact::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  width: min(1100px, 120vw);
  aspect-ratio: 2/1;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at 50% 0%, var(--glow), transparent 70%);
  pointer-events: none
}

.tbc-wrap {
  position: relative;
  max-width: 1080px;
  margin: 0 auto;
  text-align: center
}

.tbc {
  --p: 0;
  font: 400 clamp(2.8rem, 10.6vw, 9rem)/.92 var(--disp);
  text-transform: uppercase;
  letter-spacing: .01em;
  margin: .4rem 0 .9rem;
  transform: scale(calc(1.3 - var(--p)*.3));
  opacity: calc(.08 + var(--p)*1.1);
  will-change: transform, opacity
}

.dots i {
  font-style: normal;
  animation: dot 1.4s infinite
}

.dots i:nth-child(2) {
  animation-delay: .2s
}

.dots i:nth-child(3) {
  animation-delay: .4s
}

@keyframes dot {

  0%,
  60%,
  100% {
    opacity: 1
  }

  30% {
    opacity: .1
  }
}

.tbc-sub {
  font: 500 clamp(.7rem, 1.5vw, .85rem) var(--sans);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--mu);
  margin-bottom: 2rem
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: clamp(18px, 3vw, 40px);
  text-align: left;
  margin-top: clamp(44px, 6vw, 80px)
}

.c-info {
  display: grid;
  gap: .8rem;
  align-content: start
}

.ci {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.1rem;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--sh-sm), var(--hi);
  transition: .4s var(--ease);
  font-size: .95rem;
  font-weight: 400;
  word-break: break-word
}

.ci small {
  display: block;
  font: 500 .64rem var(--sans);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--dim)
}

.ci-i {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--chip);
  color: var(--accent-t);
  flex: none
}

a.ci:hover {
  transform: translateX(8px);
  box-shadow: var(--sh-md), var(--hi);
  border-color: var(--line2)
}

.cform {
  display: grid;
  gap: 1rem;
  padding: clamp(1.2rem, 2.4vw, 1.8rem);
  border-radius: 22px;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--sh-lg), var(--hi)
}

.f2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem
}

.cform label span {
  display: block;
  font: 600 .64rem var(--sans);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: .4rem
}

.cform input,
.cform textarea {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: .85rem 1rem;
  color: var(--tx);
  font: 300 .95rem var(--sans);
  outline: none;
  resize: vertical;
  transition: .3s
}

.cform input:focus,
.cform textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--glow)
}

.cform input::placeholder,
.cform textarea::placeholder {
  color: var(--dim)
}

.cform .btn {
  width: 100%
}

.end-btns {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .6rem 1.8rem;
  margin-top: clamp(40px, 6vw, 70px)
}

.link-btn {
  font: 400 .84rem var(--sans);
  color: var(--mu);
  transition: .3s;
  padding: .4rem;
  border-bottom: 1px solid transparent
}

.link-btn:hover {
  color: var(--tx);
  border-color: var(--accent)
}

footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 1.5rem var(--gut);
  border-top: 1px solid var(--line);
  background: var(--bg)
}

footer p {
  font-size: .8rem;
  color: var(--dim)
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1000px) {
  .pcard-in {
    grid-template-columns: 1fr;
    align-content: start
  }

  .pcard {
    min-height: 0
  }

  .p-media {
    order: -1;
    aspect-ratio: 16/9
  }

  .shot.main {
    inset: 0
  }

  .shot.sub {
    display: none
  }

  .p-desc,
  .p-pts {
    display: none
  }

  .p-info h3 {
    font-size: clamp(2rem, 8vw, 3rem)
  }

  .skills,
  .contact-grid {
    grid-template-columns: 1fr
  }

  .s-panel {
    grid-template-columns: 1fr;
    gap: 12px;
    align-content: center
  }

  .s-n {
    display: inline-block;
    font-size: 3.2rem;
    margin: 0 .8rem 0 0
  }

  .s-head h3 {
    display: inline
  }

  .s-y {
    margin: .4rem 0
  }

  .s-head p {
    font-size: .88rem
  }

  .ep {
    padding: .8rem 1rem;
    gap: .8rem
  }

  .ep-n {
    font-size: 1.8rem
  }

  .ep h4 {
    font-size: 1.15rem
  }

  .ep p {
    font-size: .84rem;
    line-height: 1.4
  }

  .sk-tabs {
    position: static;
    flex-direction: row;
    overflow-x: auto;
    scrollbar-width: none;
    gap: 6px
  }

  .tab {
    white-space: nowrap;
    border: 1px solid var(--line)
  }

  .tab::after {
    display: none
  }
}

@media (max-width:900px) {
  .links {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 84px var(--gut) 24px;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--sh-lg);
    transform: translateY(-110%);
    transition: transform .6s var(--ease);
    z-index: -1
  }

  .links a {
    font-size: 1.1rem;
    padding: .9rem 0;
    border-bottom: 1px solid var(--line)
  }

  .links a::after {
    display: none
  }

  body.menu .links {
    transform: none
  }

  .burger {
    display: block
  }

  #nav {
    gap: 1rem
  }

  .nav-r {
    margin-left: auto
  }

  .nav-cv span {
    display: none
  }

  .nav-cv {
    padding: .7em .8em
  }

  :root {
    --nav: 68px
  }

  .scene {
    height: 600vh
  }

  .disc {
    bottom: -12vh;
    width: 112vw
  }

  .giant {
    top: 11svh
  }

  .g-name {
    font-size: clamp(3.4rem, 19vw, 9rem)
  }

  .portrait {
    height: 66svh
  }

  .gate-l,
  .gate-r {
    display: none
  }

  .cue {
    bottom: 3svh
  }

  .chapter,
  .chapter.c {
    left: var(--gut);
    right: var(--gut);
    width: auto;
    top: calc(var(--nav) + 10px);
    text-align: left;
    transform: translateY(var(--oy, 0px))
  }

  .chapter.r {
    right: var(--gut)
  }

  .chapter.c {
    text-align: left
  }

  .chapter.c .btn-row {
    justify-content: flex-start
  }

  .quote,
  .chapter.c .quote {
    font-size: clamp(1.7rem, 7vw, 2.4rem);
    margin-bottom: .7rem
  }

  .chapter .eyebrow {
    margin-bottom: .6rem
  }

  .body {
    font-size: .9rem;
    line-height: 1.55
  }

  .c-h {
    font-size: 1.5rem;
    margin-bottom: .4rem
  }

  .bar-row {
    margin: .8rem 0 .4rem
  }

  .tags {
    margin-top: .8rem
  }

  .tags span {
    font-size: .72rem;
    padding: .3em .7em
  }

  .nums {
    gap: .7rem 1rem;
    margin-bottom: .8rem
  }

  .nums b {
    font-size: 2.3rem
  }

  .hint {
    margin-top: 1rem
  }

  .sdots {
    right: 8px
  }

  .stage-bg {
    background: radial-gradient(ellipse 90% 40% at 50% 105%, var(--glow), transparent 72%)
  }
}

@media (max-width:560px) {
  .f2 {
    grid-template-columns: 1fr
  }

  .btn-row .btn {
    padding: .8em 1.2em;
    font-size: .86rem
  }

  .pcard {
    top: calc(var(--nav) + var(--i)*10px);
    border-radius: 20px
  }

  .pcard-in {
    padding: 16px
  }

  .sec-note {
    display: none
  }

  .btn-row.center .btn {
    flex: 1 1 44%
  }
}

@media (prefers-reduced-motion:reduce) {

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important
  }

  .rv,
  .stagger>*,
  .g-name span,
  .portrait-in,
  .gate-l,
  .gate-r {
    opacity: 1 !important;
    transform: none
  }

  .cue {
    transform: translateX(-50%) !important
  }
}