:root {
  --bg: #0b0a09;
  --fg: #efe9dd;
  --dim: #b9b2a5;
  --line: rgba(239, 233, 221, 0.18);
  --accent: #e0b867;
  --pad: clamp(20px, 4vw, 64px);
  --bar-t: 0px;
  --bar-b: 44px;
  --sans: "Inter Tight", system-ui, sans-serif;
  --serif: "Cormorant Garamond", Georgia, serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--bg); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

body { background: var(--bg); color: var(--fg); font-family: var(--sans); font-size: 16px; line-height: 1.4; -webkit-font-smoothing: antialiased; overflow-x: clip; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
::selection { background: var(--accent); color: #000; }

.mono { font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--dim); }
.big { font-size: clamp(40px, 7vw, 120px); font-weight: 600; letter-spacing: -0.045em; line-height: 0.98; }
.serif { font-family: var(--serif); font-style: italic; font-weight: 500; letter-spacing: -0.02em; color: var(--accent); }

main { position: relative; z-index: 1; }
section { position: relative; }
.w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.1em; }
.wi { display: inline-block; }

/* layers: forge shader (fallback) < photo/video scenes < sparks < page < grain < bars */
#gl { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }

/* film look */
.grain {
  position: fixed; inset: -20%; z-index: 40; pointer-events: none; opacity: 0.05;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: grain 0.9s steps(6) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); } 20% { transform: translate(-6%, 4%); } 40% { transform: translate(5%, -7%); }
  60% { transform: translate(-4%, -3%); } 80% { transform: translate(7%, 5%); } 100% { transform: translate(0, 0); }
}
.bar { position: fixed; left: 0; right: 0; z-index: 50; background: #000; display: flex; align-items: center; justify-content: space-between; padding: 0 var(--pad); }
.bar-bottom { bottom: 0; height: var(--bar-b); gap: 24px; }
.bar-chapter { color: var(--fg); min-width: 16ch; }
.bar-temp { min-width: 9ch; text-align: right; color: var(--dim); font-variant-numeric: tabular-nums; }

.progress { flex: 1; height: 1px; background: var(--line); position: relative; }
.progress::after { content: ""; position: absolute; inset: 0; background: var(--accent); transform: scaleX(var(--p, 0)); transform-origin: 0 50%; }

/* loader / cursor */
.loader { position: fixed; inset: 0; z-index: 100; overflow: hidden; }
.loader-left, .loader-right { position: absolute; top: 0; bottom: 0; width: 50.3%; background: var(--bg); will-change: transform; }
.loader-left { left: 0; } .loader-right { right: 0; }
.loader-seam { position: absolute; left: 50%; top: 0; bottom: 0; width: 3px; margin-left: -1.5px; opacity: 0; background: linear-gradient(transparent, #ffb15a 30%, #fff3d1 50%, #ffb15a 70%, transparent); box-shadow: 0 0 40px 10px rgba(255, 140, 40, 0.7); }
.loader-core { position: absolute; inset: 0; display: grid; grid-template-rows: 1fr auto 1fr; justify-items: center; padding: var(--pad); }
.loader-label { align-self: start; justify-self: start; font-family: var(--mono); font-size: 12px; text-transform: uppercase; color: var(--dim); }
.loader-bar { align-self: center; width: min(560px, 72vw); height: 10px; background: #15120f; border-radius: 6px; }
.loader-bar i { display: block; height: 100%; width: 0; border-radius: 6px; transform-origin: 0 50%; }
.loader-count { align-self: end; justify-self: end; font-size: clamp(80px, 18vw, 280px); font-weight: 600; letter-spacing: -0.06em; line-height: 0.8; font-variant-numeric: tabular-nums; color: var(--accent); }
.cursor { position: fixed; top: 0; left: 0; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--accent); z-index: 90; pointer-events: none; opacity: 0; display: grid; place-items: center; transition: width 0.3s, height 0.3s, margin 0.3s, opacity 0.3s; }
.cursor span { font: 500 12px var(--sans); color: #000; opacity: 0; transition: opacity 0.2s; }
.cursor.on { opacity: 1; }
.cursor.big { width: 84px; height: 84px; margin: -42px 0 0 -42px; }
.cursor.big span { opacity: 1; }
@media (hover: none) { .cursor { display: none; } }

/* real photo / video scenes */
#scenes { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: #000; scale: 1.04; }
#scenes[hidden] { display: none; }
.scene-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* shade for readable captions: darker on the left where the text sits, vignette at the edges */
#scenes::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.35) 45%, rgba(0,0,0,0) 80%), radial-gradient(ellipse at 60% 50%, rgba(0,0,0,0), rgba(0,0,0,.5)); }
#fx { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; }
.flash { position: fixed; inset: 0; z-index: 45; pointer-events: none; opacity: 0; background: radial-gradient(circle at 50% 55%, rgba(255, 240, 215, 0.95), rgba(255, 150, 60, 0.6) 42%, rgba(255, 90, 20, 0) 78%); }

/* hero */
.hero { height: 100vh; height: 100svh; overflow: hidden; }
.hero-stage { position: absolute; inset: 0; display: grid; place-items: center; }
.hero-name { position: relative; z-index: 2; font-size: 15.2vw; font-weight: 700; letter-spacing: -0.055em; line-height: 0.84; text-align: center; white-space: nowrap; }
.hero-line { display: block; overflow: hidden; padding: 0.02em 0; }
.ch { display: inline-block; will-change: transform; transition: color 0.18s, text-shadow 0.18s; }
.hero-role { position: absolute; z-index: 1; left: 0; right: 0; top: 50%; transform: translateY(-50%); text-align: center; font-size: 7.4vw; font-weight: 500; letter-spacing: -0.04em; line-height: 0.95; color: var(--accent); text-transform: uppercase; }
.rw { display: block; overflow: hidden; padding: 0.04em 0; }
.rwi { display: block; }
.hero-meta { position: absolute; z-index: 3; left: var(--pad); right: var(--pad); bottom: calc(var(--bar-b) + 24px); display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.hero-scroll { display: flex; align-items: center; gap: 10px; color: var(--fg); }
.hero-scroll i { display: block; width: 1px; height: 34px; background: linear-gradient(var(--accent), transparent); transform-origin: 50% 0; animation: drip 1.8s ease-in-out infinite; }
@keyframes drip { 0% { transform: scaleY(0); opacity: 0; } 40% { opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }
.hero-meta > p:first-child { font-size: clamp(15px, 1.5vw, 22px); font-weight: 500; letter-spacing: -0.02em; }

/* chapters: a pinned scene, captions appear one by one over the video */
.chapter { height: 100vh; height: 100svh; overflow: hidden; }
.ch-wrap { position: absolute; left: var(--pad); right: var(--pad); top: calc(var(--bar-t) + 9vh); bottom: calc(var(--bar-b) + 5vh); display: flex; flex-direction: column; justify-content: space-between; max-width: 760px; }
.ch-wrap-wide { max-width: 1100px; justify-content: center; gap: 32px; }
.ch-head { display: flex; align-items: flex-start; gap: 24px; }
.ch-num { font-size: clamp(70px, 10vw, 160px); line-height: 0.8; }
.ch-title { font-size: clamp(32px, 4.6vw, 76px); font-weight: 600; letter-spacing: -0.045em; line-height: 0.98; margin-top: 10px; }
.ch-lead { color: var(--fg); max-width: 56ch; font-size: clamp(15px, 1.3vw, 19px); text-shadow: 0 1px 12px rgba(0,0,0,.6); }
.ch-items { display: grid; gap: clamp(10px, 1.8vh, 20px); }
.ch-item { display: grid; grid-template-columns: 170px 1fr; gap: 24px; align-items: baseline; padding-top: clamp(8px, 1.4vh, 14px); border-top: 1px solid var(--line); }
.ch-item h3 { font-size: clamp(16px, 1.5vw, 22px); font-weight: 600; letter-spacing: -0.02em; color: var(--accent); }
.ch-item p { font-size: clamp(14px, 1.2vw, 18px); color: var(--fg); text-shadow: 0 1px 12px rgba(0,0,0,.7); }
.site { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "n a" "d a"; gap: 2px 16px; width: 100%; align-items: center; transition: transform 0.4s cubic-bezier(.2,.7,.2,1), color 0.3s; }
.site b { grid-area: n; font-size: clamp(18px, 2.2vw, 34px); font-weight: 600; letter-spacing: -0.03em; }
.site span { grid-area: d; color: var(--dim); font-size: 14px; }
.site i { grid-area: a; font-style: normal; font-size: 24px; }
.ch-sites .ch-item { display: block; }
@media (hover: hover) { .site:hover { color: var(--accent); transform: translateX(10px); } }

/* about */
.about-text { font-size: clamp(24px, 3.6vw, 58px); font-weight: 500; letter-spacing: -0.035em; line-height: 1.1; max-width: 24ch; text-shadow: 0 2px 24px rgba(0,0,0,.6); }
.ch-kicker { color: var(--accent); }

/* process */
.process { height: 100vh; height: 100svh; overflow: hidden; }
.process-label { position: absolute; top: calc(var(--bar-t) + 24px); left: var(--pad); }
.process-words { position: absolute; inset: 0; }
.pw { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; font-size: 20vw; font-weight: 700; letter-spacing: -0.06em; line-height: 1; text-shadow: 0 4px 40px rgba(0,0,0,.5); }
.pw span { display: block; padding-bottom: 0.1em; }

/* contact */
.contact { min-height: 100vh; padding: calc(var(--bar-t) + 10vh) var(--pad) calc(var(--bar-b) + 24px); display: flex; flex-direction: column; gap: 28px; }
.contact-title { max-width: 14ch; text-shadow: 0 2px 30px rgba(0,0,0,.6); }
.contact-cta { align-self: flex-start; margin-top: 3vh; font-size: clamp(40px, 8vw, 140px); font-weight: 600; letter-spacing: -0.05em; line-height: 1; color: var(--accent); display: inline-block; will-change: transform; }
.contact-links { display: flex; flex-wrap: wrap; gap: 12px 32px; margin-top: auto; padding-top: 8vh; }
.contact-links a { color: var(--fg); border-bottom: 1px solid var(--line); padding-bottom: 2px; transition: border-color 0.3s, color 0.3s; }
.contact-links a:hover { color: var(--accent); border-color: var(--accent); }
.foot { display: flex; justify-content: space-between; padding-top: 20px; border-top: 1px solid var(--line); }

@media (max-width: 800px) {
  :root { --bar-b: 38px; }
  .bar-bottom { gap: 12px; }
  .bar-bottom .mono { font-size: 11px; }
  .bar-chapter { min-width: 0; max-width: 34vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .bar-temp { min-width: 0; }
  .hero-meta .mono:not(.hero-scroll) { display: none; }
  .hero-role { font-size: 9vw; }
  .ch-item { grid-template-columns: 1fr; gap: 4px; }
  .ch-head { gap: 12px; }
  .ch-wrap { max-width: none; }
  .pw { font-size: 21vw; }
  #scenes::after { background: linear-gradient(rgba(0,0,0,.35), rgba(0,0,0,.6)); }
}

@media (prefers-reduced-motion: reduce) {
  .grain { animation: none; }
  .chapter { height: auto; min-height: 100vh; }
  .ch-wrap { position: static; padding: calc(var(--bar-t) + 6vh) 0 8vh; }
  .site { transition: none; }
}