/* ============================================================
   Amanj Shkur — Portfolio
   Two-tone editorial. Solid color, sharp corners (radius 0).
   ============================================================ */

:root {
  --paper: #EDEAE3;
  --ink:   #102A24;
  --accent: var(--ink);          /* OFF by default = strict two-tone */
  --accent-on: var(--paper);     /* text color on accent */

  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "SF Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, "JetBrains Mono", monospace;

  --t-mega: clamp(58px, 9.2vw, 168px);
  --t-h1:   clamp(40px, 5.6vw, 96px);
  --t-h2:   clamp(28px, 3.2vw, 54px);
  --t-h3:   clamp(22px, 2.1vw, 34px);
  --t-body: clamp(16px, 1.25vw, 22px);
  --t-mono: clamp(11px, 0.86vw, 15px);

  --pad: clamp(28px, 4.5vw, 88px);
  /* Horizontal space the side rail occupies, incl. its always-on active label
     and hover labels — content reserves this on the right so nothing slides
     under the rail. Used only on rail-visible (non-mobile) viewports. */
  --rail-w: clamp(100px, 9vw, 144px);

  --ease: cubic-bezier(0.7, 0, 0.2, 1);
  --motion: 1;  /* tweak can set to 0 */

  --topbar-h: clamp(48px, 5vh, 64px);
  --nav-h: clamp(44px, 4vw, 58px);

  /* Real visible height. 100vh on mobile = chrome-hidden (too tall) and
     clips content under the URL/tab bars; dvh tracks the actual viewport. */
  --app-h: 100vh;
  --safe-b: env(safe-area-inset-bottom, 0px);

  /* chrome colors — set per active slide by JS so controls stay
     ink/green on cream panels and cream/white on green panels */
  --c-tl: var(--paper); --c-tr: var(--paper);
  --c-bl: var(--paper); --c-bl-bg: var(--ink);
  --c-r:  var(--ink);   --c-r-bg:  var(--paper);
}

@supports (height: 100dvh) { :root { --app-h: 100dvh; } }

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

html, body {
  height: 100%;
  overflow: hidden;
  background: var(--ink);
  color: var(--ink);
  font-family: var(--font-display);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; }
::selection { background: var(--ink); color: var(--paper); }

/* ---------------- Deck / track ---------------- */
.deck {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--app-h);
  overflow: hidden;
}
.track {
  display: flex;
  height: 100%;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.track::-webkit-scrollbar { display: none; }
.slide {
  position: relative;
  flex: 0 0 100vw;
  width: 100vw;
  height: 100%;
  overflow: hidden;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

/* two-pane split */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 100%;
}
.split.s-40 { grid-template-columns: 0.82fr 1.18fr; }
.split.s-60 { grid-template-columns: 1.1fr 0.9fr; }

.pane {
  position: relative;
  height: 100%;
  padding: var(--pad);
  padding-bottom: clamp(104px, 12vh, 140px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.pane--paper { background: var(--paper); color: var(--ink); }
.pane--ink   { background: var(--ink);   color: var(--paper); }
.bg-paper { background: var(--paper); color: var(--ink); }
.bg-ink   { background: var(--ink);   color: var(--paper); }

.full {
  height: 100%;
  padding: var(--pad);
  padding-bottom: clamp(104px, 12vh, 140px);
  display: flex;
  flex-direction: column;
}

/* ---------------- Type helpers ---------------- */
.kicker {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
}
.kicker::before {
  content: "";
  width: clamp(22px, 2.4vw, 44px);
  height: 1px;
  background: currentColor;
  opacity: 0.55;
}
.mono { font-family: var(--font-mono); font-weight: 500; }
.display-mega {
  font-size: var(--t-mega);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}
.h1 { font-size: var(--t-h1); font-weight: 800; line-height: 0.94; letter-spacing: -0.025em; text-transform: uppercase; }
.h2 { font-size: var(--t-h2); font-weight: 700; line-height: 1.0; letter-spacing: -0.02em; }
.h3 { font-size: var(--t-h3); font-weight: 700; line-height: 1.1; letter-spacing: -0.01em; }
.body {
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: -0.005em;
  max-width: 30ch;
  text-wrap: pretty;
}
.dim { opacity: 0.58; }
.spacer {flex: 0.5 1 0%; }

/* ---------------- Chrome: top bar ---------------- */
.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--pad);
  z-index: 40;
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-tl);
  pointer-events: none;
  transition: color 0.5s var(--ease);
}
.topbar span { white-space: nowrap; }
.topbar > span:first-child { color: var(--c-tl); }
.topbar > span:last-child { color: var(--c-tr); padding-right: clamp(40px, 5vw, 80px); }
.topbar .dot {
  width: 7px; height: 7px; background: currentColor;
  display: inline-block; margin-right: 0.6em;
  animation: pulse 2.4s var(--ease) infinite;
}
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.25; } }

/* ---------------- Chrome: side index rail ---------------- */
.rail {
  position: fixed;
  top: 0; right: 0;
  height: 100%;
  z-index: 35;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(9px, 1.5vh, 16px);
  padding-right: clamp(16px, 1.8vw, 30px);
  pointer-events: none;
}
.rail-item {
  pointer-events: auto;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--c-r);
  transition: opacity 0.4s var(--ease), color 0.5s var(--ease);
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 0.7em;
  opacity: 0.45;
  transition: opacity 0.4s var(--ease);
  background: none; border: 0;
  white-space: nowrap;
}
.rail-item .bar {
  width: 14px; height: 2px; background: currentColor; flex: none;
  transition: width 0.4s var(--ease);
}
.rail-item .label-txt {
  max-width: 0; overflow: hidden; opacity: 0;
  transition: max-width 0.4s var(--ease), opacity 0.4s var(--ease);
}
.rail-item:hover { opacity: 0.9; }
.rail-item:hover .label-txt { max-width: 120px; opacity: 1; }
.rail-item.active { opacity: 1; }
.rail-item.active .bar { width: 30px; }
.rail-item.active .label-txt { max-width: 120px; opacity: 1; }
.rail-num { text-align: right; }

/* Reserve right-edge room for the rail so content never overlaps it. Scoped to
   the exact viewports where the rail shows (the inverse of the mobile query
   below, where `.rail { display: none }`); only the right-most block in each
   slide touches the rail. */
@media (min-width: 761px) and (min-aspect-ratio: 9/13) {
  .full,
  .split > .pane:last-child,
  .grid-cell--r {
    padding-right: calc(var(--pad) + var(--rail-w));
  }
}

/* ---------------- Chrome: prev/next ---------------- */
.nav-btns {
  position: fixed;
  left: var(--pad);
  bottom: clamp(20px, 3.5vh, 40px);
  z-index: 40;
  display: flex;
  gap: 10px;
}
.nav-btn {
  width: var(--nav-h);
  height: var(--nav-h);
  border: 1.5px solid var(--c-bl);
  background: transparent;
  color: var(--c-bl);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.5s var(--ease);
}
.nav-btn svg { width: 38%; height: 38%; }
.nav-btn:hover:not(:disabled) { background: var(--c-bl); color: var(--c-bl-bg); }
.nav-btn:disabled { opacity: 0.3; cursor: default; }

/* progress count bottom-right */
.counter {
  position: fixed;
  right: clamp(72px, 8vw, 130px);
  bottom: clamp(20px, 3.5vh, 40px);
  z-index: 40;
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: 0.12em;
  color: var(--c-r);
  transition: color 0.5s var(--ease);
}
.counter b { font-weight: 700; }

/* ---------------- Reveal animations ---------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(calc(34px * var(--motion)));
  transition:
    opacity 0.7s var(--ease),
    transform 0.9s var(--ease);
  transition-delay: 0s;
}
.slide.is-active [data-reveal] {
  opacity: 1;
  transform: none;
  transition-delay: calc((var(--i, 0) * 90ms) + 120ms);
}
[data-reveal="line"] {
  transform: translateY(0) scaleX(0);
  transform-origin: left;
  opacity: 1;
}
.slide.is-active [data-reveal="line"] { transform: scaleX(1); }

/* clip-reveal for big headings */
[data-reveal="clip"] {
  opacity: 1;
  transform: none;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1s var(--ease);
  transition-delay: calc((var(--i, 0) * 90ms) + 120ms);
}
.slide.is-active [data-reveal="clip"] { clip-path: inset(0 0 0 0); }

/* Prevent slide 3 from visibly dropping when navigating away.
   Explicitly preserving padding-left so row hovers remain smooth. */
.slide:nth-child(3):not(.is-active) [data-reveal] {
  transition:
    opacity 0.4s var(--ease),
    transform 0s ease 0.4s,
    padding-left 0.4s var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  .track { scroll-behavior: auto; }
  [data-reveal] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
}

/* ---------------- Components ---------------- */

/* stat / fact rows */
.facts { display: flex; flex-direction: column; }
.fact {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 2rem;
  padding: clamp(14px, 2vh, 26px) 0;
  border-top: 1px solid currentColor;
}
.fact:last-child { border-bottom: 1px solid currentColor; }
.fact .num { font-size: clamp(34px, 4.4vw, 76px); font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.fact .lbl { font-family: var(--font-mono); font-size: var(--t-mono); letter-spacing: 0.16em; text-transform: uppercase; text-align: right; opacity: 0.7; }

/* editorial project index */
.work-list { display: flex; flex-direction: column; }
.work-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(16px, 2.5vw, 48px);
  padding: clamp(11px, 1.8vh, 24px) 0;
  border-top: 1px solid currentColor;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition: 
    padding-left 0.4s var(--ease), 
    opacity 0.4s var(--ease),
    transform 0.9s var(--ease);
}
.work-row:last-child { border-bottom: 1px solid currentColor; }
.work-row:hover { padding-left: clamp(8px, 1.6vw, 28px); }
.work-list:hover .work-row:not(:hover) { opacity: 0.45; }
.work-row .idx { font-family: var(--font-mono); font-size: var(--t-mono); letter-spacing: 0.1em; opacity: 0.7; }
.work-row .name { font-size: clamp(22px, 2.7vw, 46px); font-weight: 800; letter-spacing: -0.025em; text-transform: uppercase; line-height: 1; }
.work-row .meta { font-family: var(--font-mono); font-size: var(--t-mono); letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.7; text-align: right; white-space: nowrap; }

/* ---------------- Four-up live-work grid ----------------
   Full-bleed slide split into four equal, clickable quadrants.
   Left column cream, right column green so the right edge stays a
   single color and the side rail/counter read cleanly over it. */
.grid4 {
  display: grid;
  /* minmax(0,1fr) so a long unbreakable project name can't inflate its track
     past its equal share — quadrants stay exactly 50/50 and overflow clips. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  height: 100%;
  width: 100%;
}
.grid-cell {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  padding: var(--pad);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: padding-left 0.4s var(--ease);
}
.grid-cell--paper { background: var(--paper); color: var(--ink); }
.grid-cell--ink   { background: var(--ink);   color: var(--paper); }
/* top row clears the fixed top bar; hairline divides it from the row below */
.grid-cell:nth-child(1), .grid-cell:nth-child(2) {
  padding-top: calc(var(--topbar-h) + clamp(10px, 1.6vh, 22px));
  border-bottom: 1px solid color-mix(in srgb, currentColor 16%, transparent);
}
/* bottom row clears the nav buttons / counter */
.grid-cell:nth-child(3), .grid-cell:nth-child(4) {
  padding-bottom: clamp(96px, 11vh, 128px);
}
.grid-cell:hover { padding-left: calc(var(--pad) + clamp(6px, 1vw, 16px)); }

/* Only the (transparent) text content animates on reveal — never the big
   solid-color cell — so entering/leaving the slide stays smooth. */
.gc-inner {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}
.gc-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.gc-arrow {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  opacity: 0.55;
  transition: transform 0.4s var(--ease), opacity 0.4s var(--ease);
}
.grid-cell:hover .gc-arrow { transform: translate(4px, -4px); opacity: 1; }
.gc-name {
  font-size: clamp(28px, 3.4vw, 60px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 0.95;
  text-transform: uppercase;
  margin-bottom: clamp(10px, 1.4vh, 18px);
}
.gc-desc {
  font-size: clamp(14px, 1.05vw, 18px);
  line-height: 1.5;
  opacity: 0.82;
  max-width: 42ch;
  margin-bottom: clamp(14px, 2vh, 22px);
  text-wrap: pretty;
}
.gc-role { opacity: 0.6; }

/* tags */
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tag {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.5em 0.9em;
  border: 1px solid currentColor;
  white-space: nowrap;
}

/* timeline */
.timeline { display: flex; flex-direction: column; }
.tl-row {
  display: grid;
  grid-template-columns: clamp(90px, 9vw, 150px) 1fr;
  gap: clamp(16px, 2.5vw, 44px);
  padding: clamp(14px, 2.2vh, 30px) 0;
  border-top: 1px solid currentColor;
  align-items: start;
}
.tl-row:last-child { border-bottom: 1px solid currentColor; }
.tl-year { font-family: var(--font-mono); font-size: var(--t-mono); letter-spacing: 0.08em; opacity: 0.7; padding-top: 0.4em; }
.tl-role { font-size: clamp(20px, 2.1vw, 34px); font-weight: 700; letter-spacing: -0.015em; line-height: 1.05; }
.tl-co { font-family: var(--font-mono); font-size: var(--t-mono); letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.65; margin-top: 0.5em; }
.tl-desc { font-size: clamp(15px, 1.1vw, 19px); line-height: 1.5; opacity: 0.85; margin-top: 0.7em; max-width: 52ch; }

/* skills columns */
.skill-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 3vw, 56px);
  flex: 1;
  align-content: start;
}
.skill-col h4 {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.6;
  padding-bottom: 0.9em;
  margin-bottom: 0.9em;
  border-bottom: 1px solid currentColor;
}
.skill-col ul { list-style: none; }
.skill-col li {
  font-size: clamp(18px, 1.6vw, 27px);
  font-weight: 600;
  letter-spacing: -0.01em;
  padding: 0.42em 0;
}

/* image slot framing */
image-slot {
  width: 100%;
  height: 100%;
}
.img-wrap { position: relative; flex: 1; min-height: 0; }
.img-tag {
  position: absolute;
  top: var(--topbar-h); left: 0;
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.7em 1em;
  background: var(--ink);
  color: var(--paper);
  z-index: 2;
}

/* contact */
.contact-links { display: flex; flex-direction: column; }
.c-link {
  display: grid;
  grid-template-columns: clamp(96px, 11vw, 150px) 1fr auto;
  align-items: baseline;
  gap: clamp(12px, 2vw, 32px);
  padding: clamp(16px, 2.6vh, 32px) 0;
  border-top: 1px solid currentColor;
  text-decoration: none;
  color: inherit;
  transition: padding-left 0.4s var(--ease);
}
.c-link:last-child { border-bottom: 1px solid currentColor; }
.c-link:hover { padding-left: clamp(8px, 1.5vw, 24px); }
.c-link .k { font-family: var(--font-mono); font-size: var(--t-mono); letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.6; }
.c-link .v { font-size: clamp(21px, 2.4vw, 40px); font-weight: 700; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.c-link .arr { font-family: var(--font-mono); opacity: 0.6; align-self: center; }

/* pane background tokens (used by visit links for hover inversion) */
.pane--paper, .bg-paper { --pane-bg: var(--paper); }
.pane--ink, .bg-ink { --pane-bg: var(--ink); }

/* visit / external link button */
.visit-link {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  align-self: flex-start;
  margin-top: clamp(16px, 2.4vh, 28px);
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.9em 1.3em;
  border: 1px solid currentColor;
  text-decoration: none;
  color: inherit;
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}
/* .visit-link:hover { background: currentColor; color: var(--pane-bg, var(--ink)); } */

/* ---------------- Poster panes (type instead of images) ---------------- */
.poster {
  justify-content: space-between;
}
.poster-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}
.monogram {
  font-size: clamp(90px, 15vw, 300px);
  font-weight: 900;
  line-height: 0.82;
  letter-spacing: -0.04em;
  margin: auto 0;
}
.poster-num {
  font-size: clamp(96px, 15vw, 260px);
  font-weight: 900;
  line-height: 0.82;
  letter-spacing: -0.04em;
  margin-top: auto;
}
.poster-line {
  font-size: clamp(26px, 3vw, 50px);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  max-width: 16ch;
  margin-top: 0.3em;
  margin-bottom: auto;
}
.poster-meta {
  display: flex;
  flex-direction: column;
  border-top: 1px solid currentColor;
}
.pm-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding: clamp(9px, 1.3vh, 16px) 0;
  border-bottom: 1px solid currentColor;
}
.pm-row .k {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.55;
}
.pm-row .v {
  font-size: clamp(15px, 1.3vw, 21px);
  font-weight: 600;
  letter-spacing: -0.01em;
  text-align: right;
  white-space: nowrap;
}

/* vertical label */
.vlabel {
  position: absolute;
  writing-mode: vertical-rl;
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  opacity: 0.55;
}

/* hint */
.hint {
  position: fixed;
  left: 50%;
  bottom: clamp(16px, 2.6vh, 30px);
  transform: translateX(-50%);
  z-index: 40;
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-bl);
  opacity: 0.7;
  transition: opacity 0.5s var(--ease);
  pointer-events: none;
}
.hint.gone { opacity: 0; }

/* ---------------- Splash / Preloader ---------------- */
.splash {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--app-h);
  z-index: 200;
  background: var(--ink);
  color: var(--paper);
  display: flex;
  flex-direction: column;
  padding: var(--pad);
  padding-bottom: clamp(20px, 3vh, 36px);
  will-change: transform;
  transform: translateY(0);
  transition: transform 1s var(--ease);
}
.splash.lift { transform: translateY(-101%); }

.splash-grid {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.splash-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.splash .kicker { color: var(--paper); }
.splash .s-dot {
  width: 7px; height: 7px; background: currentColor;
  display: inline-block; margin-right: 0.7em;
  animation: pulse 2.4s var(--ease) infinite;
}

.splash-center {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  min-height: 0;
}
.splash-mono {
  font-family: var(--font-display);
  font-size: clamp(90px, 22vw, 360px);
  font-weight: 900;
  line-height: 0.85;
  letter-spacing: -0.05em;
  clip-path: inset(-10% 100% -10% -10%);
  animation: splashClip 1.1s var(--ease) 0.15s forwards;
}
@keyframes splashClip {
  to { clip-path: inset(-10% -10% -10% -10%); }
}
.splash-name {
  text-align: right;
  font-family: var(--font-display);
  font-size: clamp(34px, 5.4vw, 92px);
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}
.splash-name .sn-line {
  display: block;
  overflow: hidden;
}
.splash-name .sn-line > span {
  display: block;
  transform: translateY(110%);
  animation: splashRise 0.95s var(--ease) forwards;
}
.splash-name .sn-line:nth-child(1) > span { animation-delay: 0.34s; }
.splash-name .sn-line:nth-child(2) > span { animation-delay: 0.46s; }
@keyframes splashRise {
  to { transform: translateY(0); }
}

.splash-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
}
.splash-pct {
  display: inline-flex;
  align-items: baseline;
  gap: 0.18em;
  font-family: var(--font-mono);
  letter-spacing: -0.01em;
}
.splash-pct b {
  font-size: clamp(40px, 5.4vw, 84px);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.splash-pct .pct-sym {
  font-size: var(--t-mono);
  letter-spacing: 0.1em;
  opacity: 0.6;
}

.splash-bar {
  height: 2px;
  width: 100%;
  background: rgba(241, 238, 230, 0.16);
  margin-top: clamp(16px, 2.4vh, 28px);
  overflow: hidden;
}
.splash-fill {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--paper);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.22s var(--ease);
}

/* hold slide-01 reveals until the splash lifts, then let them animate in */
body.preload .slide.is-active [data-reveal] {
  opacity: 0 !important;
  transform: translateY(34px) !important;
  transition: none !important;
}
body.preload .slide.is-active [data-reveal="clip"] {
  opacity: 1 !important;
  transform: none !important;
  clip-path: inset(0 100% 0 0) !important;
  transition: none !important;
}
body.preload .slide.is-active [data-reveal="line"] {
  opacity: 1 !important;
  transform: translateY(0) scaleX(0) !important;
}

@media (prefers-reduced-motion: reduce) {
  .splash { transition: opacity 0.4s ease; }
  .splash.lift { transform: none; opacity: 0; }
  .splash-mono, .splash-name .sn-line > span { animation: none; }
  .splash-mono { clip-path: inset(-10% -10% -10% -10%); }
  .splash-name .sn-line > span { transform: none; }
}

/* responsive: stack split on small/portrait */
@media (max-width: 760px), (max-aspect-ratio: 9/13) {
  /* Smaller type + tighter rhythm so each slide fits 100dvh — no scrolling. */
  :root {
    --pad: clamp(16px, 4.6vw, 28px);
    --t-mega: clamp(38px, 12vw, 82px);
    --t-h1:   clamp(30px, 8.5vw, 54px);
    --t-h2:   clamp(21px, 5.4vw, 33px);
    --t-h3:   clamp(16px, 4vw, 21px);
    --t-body: clamp(13px, 3.4vw, 16px);
    --t-mono: clamp(10px, 2.5vw, 12px);
  }

  /* fixed full-height slides; the taller pane takes what it needs (no clip as
     long as the reduced content fits, which the rules below ensure) */
  .split, .split.s-40, .split.s-60 {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(min-content, 1fr) minmax(min-content, 1fr);
  }
  .rail { display: none; }
  .body { max-width: none; }
  /* the role label collides with the name on a narrow bar — keep just the name */
  .topbar > span:last-child { display: none; }

  /* clear the fixed top bar; arrows are gone, so the bottom only needs to clear
     the small counter + home indicator (reclaims height vs. old nav clearance) */
  .full { padding-top: calc(var(--topbar-h) + clamp(12px, 4vw, 24px)); }
  .split > .pane:first-child { padding-top: calc(var(--topbar-h) + clamp(12px, 4vw, 24px)); }
  .split > .pane:last-child  { padding-top: clamp(14px, 4vw, 22px); }
  .full,
  .split > .pane:last-child { padding-bottom: calc(clamp(34px, 11.5vw, 50px) + var(--safe-b)); }
  .split > .pane:first-child { padding-bottom: clamp(12px, 3.5vw, 18px); }

  /* paragraphs: shrink + cap lines so text panes stay short */
  .split .body {
    font-size: var(--t-body); line-height: 1.42;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden;
  }
  .slide[data-screen-label="01 Hero"] .body {
    font-size: var(--t-body) !important; -webkit-line-clamp: 5; margin-top: clamp(10px, 3vw, 16px);
  }

  /* long mono kicker lines: tighter tracking so they don't overflow width */
  .kicker { letter-spacing: 0.18em; }
  .kicker::before { width: clamp(14px, 3vw, 22px); }

  /* navigate by swipe/scroll — no arrow buttons */
  .nav-btns { display: none; }
  .counter  { right: var(--pad); bottom: calc(clamp(14px, 3vh, 24px) + var(--safe-b)); }

  /* poster panes */
  .monogram   { font-size: clamp(68px, 21vw, 150px); }
  .poster-num { font-size: clamp(54px, 15vw, 118px); }
  .poster-line { font-size: clamp(17px, 4.4vw, 28px); margin-top: 0.1em; }
  .pm-row { padding: clamp(5px, 0.9vh, 10px) 0; }

  /* about facts */
  .fact { padding: clamp(6px, 1.1vh, 13px) 0; }
  .fact .num { font-size: clamp(28px, 8.5vw, 48px); }

  /* project tags */
  .tags { gap: 6px; }
  .tag { padding: 0.36em 0.66em; }

  /* selected-work list */
  .work-row { padding: clamp(7px, 1.3vh, 15px) 0; }
  .work-row .name { font-size: clamp(18px, 5vw, 30px); }

  /* four-up grid: stays 2x2, tighter padding, clamped descriptions */
  .grid-cell { padding: clamp(14px, 4vw, 22px); }
  .grid-cell:nth-child(1), .grid-cell:nth-child(2) {
    padding-top: calc(var(--topbar-h) + clamp(8px, 3vw, 16px));
  }
  .grid-cell:nth-child(3), .grid-cell:nth-child(4) {
    padding-bottom: calc(clamp(30px, 7vw, 44px) + var(--safe-b));
  }
  .gc-name { font-size: clamp(18px, 5vw, 30px); margin-bottom: clamp(5px, 1.5vw, 10px); }
  .gc-desc {
    font-size: clamp(11px, 2.9vw, 13px); line-height: 1.38; max-width: none;
    margin-bottom: clamp(7px, 2vw, 12px);
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
  }

  /* experience timeline — smaller text, capped descriptions */
  .tl-row { padding: clamp(7px, 1.3vh, 15px) 0; gap: clamp(10px, 3vw, 20px); grid-template-columns: clamp(60px, 19vw, 90px) 1fr; }
  .tl-role { font-size: clamp(15px, 4.2vw, 20px); line-height: 1.1; }
  .tl-co { margin-top: 0.3em; }
  .tl-desc {
    font-size: clamp(12px, 3.2vw, 14px); line-height: 1.4; margin-top: 0.35em; max-width: none;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  }

  /* skills grid */
  .skill-grid { grid-template-columns: repeat(2, 1fr); gap: clamp(10px, 3vh, 18px) clamp(16px, 5vw, 28px); }
  .skill-col h4 { padding-bottom: 0.45em; margin-bottom: 0.45em; }
  .skill-col li { font-size: clamp(14px, 3.7vw, 18px); padding: 0.24em 0; }

  /* contact rows: stack label over value, arrow pinned right */
  .c-link {
    grid-template-columns: 1fr auto;
    grid-template-areas: "k k" "v a";
    align-items: end;
    row-gap: 5px;
    column-gap: 16px;
    padding: clamp(9px, 2.4vw, 15px) 0;
  }
  .c-link .k { grid-area: k; }
  .c-link .v { grid-area: v; font-size: clamp(16px, 5.2vw, 26px); }
  .c-link .arr { grid-area: a; align-self: end; font-size: 15px; }

  /* tighten the contact slide's vertical rhythm on mobile */
  .slide[data-screen-label="10 Contact"] .full > .spacer:first-of-type { flex: 0 0 clamp(12px, 3.5vh, 28px); }
  .slide[data-screen-label="10 Contact"] .full > .spacer ~ .spacer { flex: 0 0 clamp(16px, 4.5vh, 34px); }
  .slide[data-screen-label="10 Contact"] [style*="margin-top:2rem"] { margin-top: clamp(12px, 3.5vw, 18px) !important; }
  .slide[data-screen-label="10 Contact"] .display-mega { font-size: clamp(32px, 9.5vw, 54px) !important; }

  /* splash stacks vertically on portrait */
  .splash-center { flex-direction: column; align-items: flex-start; justify-content: center; gap: clamp(18px, 4vh, 32px); }
  .splash-name { text-align: left; font-size: clamp(40px, 13vw, 76px); }
  .splash-mono { font-size: clamp(100px, 35vw, 240px); }
}