/* =========================================================
   Eric Anderson — slide deck
   Light · premium · tactile · minimal · click/scroll to advance
   ========================================================= */

:root {
  --paper:        #f5f1e8;
  --paper-raised: #fbf8f1;
  --paper-sink:   #efe9dc;
  --ink:          #1c1a16;
  --ink-soft:     #4a463d;
  --ink-mute:     #8a8473;
  --line:         #ddd5c4;
  --line-strong:  #c7bda7;

  --accent:       #157a6e;
  --accent-deep:  #0f5b52;
  --accent-wash:  #e3ece7;

  --shadow-sm: 0 1px 2px rgba(40,34,20,.06), 0 2px 6px rgba(40,34,20,.05);
  --shadow-md: 0 2px 4px rgba(40,34,20,.06), 0 12px 28px rgba(40,34,20,.08);
  --shadow-lg: 0 4px 8px rgba(40,34,20,.07), 0 24px 56px rgba(40,34,20,.12);
  --letterpress: inset 0 1px 0 rgba(255,255,255,.7), inset 0 -1px 0 rgba(40,34,20,.05);

  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans:  "Spline Sans", system-ui, -apple-system, sans-serif;
  --mono:  "Spline Sans Mono", ui-monospace, "SF Mono", monospace;

  --rail-w: 210px;            /* reserved gutter for the left rail */
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);     /* long, premium deceleration */
  --ease-soft: cubic-bezier(.33,.9,.32,1);
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;            /* deck owns navigation — no page scroll */
}

body {
  background:
    var(--paper)
    url("assets/paper-texture.png") center / 520px repeat;
  color: var(--ink);
  font-family: var(--sans);
  font-size: clamp(16px, 1.05vw, 18px);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  position: relative;
  cursor: auto;                /* normal cursor; only real links get the hand */
}
body::before {
  content: "";
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(255,255,255,.65), transparent 60%),
    radial-gradient(90% 70% at 88% 112%, rgba(21,122,110,.05), transparent 60%);
}

.grain {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  opacity: .42; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/></svg>");
}

img { max-width: 100%; display: block; }
a { color: inherit; }
.no-advance { cursor: auto; }

/* =========================================================
   Brandmark + HUD
   ========================================================= */
.brandmark {
  position: fixed; top: 22px; left: 26px; z-index: 60;
  display: block; line-height: 0;
  transition: opacity .25s var(--ease);
  opacity: .9;
}
.brandmark:hover { opacity: 1; }
/* transparent ink mark — sits straight on the paper, no card */
.brandmark img { height: 38px; width: auto; mix-blend-mode: multiply; }

.hud {
  position: fixed; right: 26px; bottom: 22px; z-index: 60;
  display: flex; align-items: center; gap: 14px;
  font-family: var(--mono); font-size: .74rem; letter-spacing: .04em;
  color: var(--ink-mute);
}
.hud__count b { color: var(--ink); }
.hud__hint {
  position: relative; padding-left: 16px;
  color: var(--ink-mute);
}
.hud__hint::before {
  content: ""; position: absolute; left: 0; top: 50%; width: 8px; height: 8px;
  border-radius: 50%; background: var(--accent); transform: translateY(-50%);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse { 0%,100%{opacity:.35;transform:translateY(-50%) scale(.8)} 50%{opacity:1;transform:translateY(-50%) scale(1.15)} }
.hud.is-hidden .hud__hint { opacity: 0; transition: opacity .5s ease; }

/* =========================================================
   LEFT CHAPTER RAIL  (Renuva-style, light)
   ========================================================= */
.rail {
  position: fixed; left: 24px; top: 50%; transform: translateY(-50%);
  z-index: 60; display: flex; flex-direction: column; gap: 2px;
  padding: 14px 16px;
  background: rgba(251,248,241,.72);
  backdrop-filter: blur(8px) saturate(120%);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow-md);
}
.chap {
  position: relative; display: flex; align-items: center; gap: 12px;
  background: none; border: 0; padding: 6px 4px; cursor: pointer; text-align: left;
  font-family: var(--mono);
}
.chap__dot {
  width: 11px; height: 11px; border-radius: 50%; flex: none;
  background: transparent;
  border: 1.5px solid var(--line-strong);
  transition: background .3s, border-color .3s, transform .3s;
}
.chap__lab {
  font-size: .72rem; letter-spacing: .02em; white-space: nowrap;
  color: var(--ink-mute); transition: color .3s, opacity .3s; opacity: .9;
}
.chap:hover .chap__lab { color: var(--ink); }
.chap.is-done .chap__dot { background: var(--line-strong); border-color: var(--line-strong); }
.chap.is-cur .chap__dot {
  background: var(--accent); border-color: var(--accent); transform: scale(1.25);
  box-shadow: 0 0 0 3px var(--accent-wash);
}
.chap.is-cur .chap__lab { color: var(--ink); font-weight: 500; }

/* =========================================================
   DECK + SLIDES
   ========================================================= */
#deck { position: fixed; inset: 0; z-index: 5; }

.slide {
  position: absolute; inset: 0;
  display: grid; place-items: start start;          /* left-aligned; chapter nav now bottom-right */
  padding: clamp(54px, 12vh, 130px) clamp(40px, 6vw, 96px) clamp(40px, 6vh, 80px);
  opacity: 0; visibility: hidden;
  /* motion is JS-driven (WAAPI) per element; the slide itself just shows/hides */
}
.slide.is-active, .slide.is-leaving {
  opacity: 1; visibility: visible;
}
.slide.is-leaving { z-index: 1; }           /* outgoing stays above while it animates out */
.slide.is-active { z-index: 2; }

.slide__inner { width: 100%; max-width: 940px; }

/* ===========================================================
   STAGED ENTRANCE ENGINE
   Each element resolves out of soft focus and rises into place,
   one after another. Direction-aware (forward vs. back).
   =========================================================== */
@keyframes enter {
  0%   { opacity: 0; transform: translateY(30px); filter: blur(8px); }
  60%  { filter: blur(0); }
  100% { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes enterBack {
  0%   { opacity: 0; transform: translateY(-30px); filter: blur(8px); }
  60%  { filter: blur(0); }
  100% { opacity: 1; transform: none; filter: blur(0); }
}
/* headline: rises from behind a mask, defocuses into sharpness, letter-spacing settles */
@keyframes titleReveal {
  0%   { opacity: 0; transform: translateY(40px); filter: blur(12px);
         clip-path: inset(0 0 30% 0); letter-spacing: .04em; }
  55%  { filter: blur(0); }
  100% { opacity: 1; transform: none; filter: blur(0);
         clip-path: inset(0 0 -8% 0); letter-spacing: -.015em; }
}
/* portrait: a soft curtain rising from the base + gentle settle */
@keyframes portraitReveal {
  0%   { opacity: 0; transform: translateY(26px) scale(1.05); filter: blur(10px);
         clip-path: inset(100% 0 0 0); }
  100% { opacity: 1; transform: none; filter: blur(0);
         clip-path: inset(0 0 0 0); }
}

/* base: every direct child of a slide stages in */
.slide.is-active .slide__inner > * { animation: enter .95s var(--ease-out) both; }
[data-dir="back"] .slide.is-active .slide__inner > * { animation-name: enterBack; }

.slide.is-active .slide__inner > *:nth-child(1){ animation-delay:.16s }
.slide.is-active .slide__inner > *:nth-child(2){ animation-delay:.30s }
.slide.is-active .slide__inner > *:nth-child(3){ animation-delay:.44s }
.slide.is-active .slide__inner > *:nth-child(4){ animation-delay:.58s }
.slide.is-active .slide__inner > *:nth-child(5){ animation-delay:.70s }

/* headlines get the cinematic reveal (name + duration only; delay stays from stagger) */
.slide.is-active .slide__title,
.slide.is-active .cover__lede { animation-name: titleReveal; animation-duration: 1.25s; }

/* ABOUT — portrait curtain + its own text cascade (don't double-animate the text block) */
.slide.is-active .about__text { animation: none; }
.slide.is-active .about__media { animation-name: portraitReveal; animation-duration: 1.2s; }
.slide.is-active .about__text > * { animation: enter .9s var(--ease-out) both; }
[data-dir="back"] .slide.is-active .about__text > * { animation-name: enterBack; }
.slide.is-active .about__text > *:nth-child(1){ animation-delay:.40s }
.slide.is-active .about__text > *:nth-child(2){ animation-delay:.52s }
.slide.is-active .about__text > *:nth-child(3){ animation-delay:.64s }
.slide.is-active .about__text > *:nth-child(4){ animation-delay:.76s }

/* PROOF — let the four tiles cascade individually, not the grid as one block */
.slide.is-active .proof__grid { animation: none; }
.slide.is-active .proof__tile { animation: enter .9s var(--ease-out) both; }
[data-dir="back"] .slide.is-active .proof__tile { animation-name: enterBack; }
.slide.is-active .proof__tile:nth-child(1){ animation-delay:.54s }
.slide.is-active .proof__tile:nth-child(2){ animation-delay:.66s }
.slide.is-active .proof__tile:nth-child(3){ animation-delay:.78s }
.slide.is-active .proof__tile:nth-child(4){ animation-delay:.90s }

/* CONTACT — the email + LinkedIn arrive last, one then the other */
.slide.is-active .contact__links { animation: none; }
.slide.is-active .contact__links > * { animation: enter .85s var(--ease-out) both; }
.slide.is-active .contact__links > *:nth-child(1){ animation-delay:.62s }
.slide.is-active .contact__links > *:nth-child(2){ animation-delay:.76s }

/* ===========================================================
   CHROME — frame elements settle in once, on first load
   =========================================================== */
@keyframes chromeDown { from { opacity:0; transform: translateY(-10px); } to { opacity:1; transform:none; } }
@keyframes chromeUp   { from { opacity:0; transform: translateY(10px);  } to { opacity:1; transform:none; } }
@keyframes chromeFade { from { opacity:0; } to { opacity:1; } }

.brandmark { animation: chromeDown 1s var(--ease-out) both .15s; }
.rail      { animation: chromeUp 1s var(--ease-out) both .4s; }
.rail .chap { animation: chromeFade .7s var(--ease-soft) both; }
.rail .chap:nth-child(1){ animation-delay:.6s }
.rail .chap:nth-child(2){ animation-delay:.7s }
.rail .chap:nth-child(3){ animation-delay:.8s }
.rail .chap:nth-child(4){ animation-delay:.9s }
.rail .chap:nth-child(5){ animation-delay:1s }
.hud { animation: chromeUp 1s var(--ease-out) both .85s; }

/* shared type */
.eyebrow, .kicker {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-mute);
}
.kicker { display: inline-flex; align-items: center; gap: .55em; }
.kicker__dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-wash); font-style: normal;
}
.slide__title {
  font-family: var(--serif); font-weight: 400; font-optical-sizing: auto;
  font-size: clamp(2.1rem, 4.8vw, 3.6rem); line-height: 1.04; letter-spacing: -.015em;
  margin: .35em 0 0; color: var(--ink); text-wrap: balance;
}
.ink { color: var(--ink); }

/* =========================================================
   COVER
   ========================================================= */
.cover__lede {
  font-family: var(--serif); font-weight: 300; font-optical-sizing: auto;
  font-size: clamp(2.2rem, 5.4vw, 4.4rem); line-height: 1.06; letter-spacing: -.02em;
  margin: .45em 0 0; max-width: 19ch; text-wrap: balance;
}
.cover__lede em { font-style: italic; color: var(--accent-deep); }
.cover__sub {
  margin: 1.4em 0 0; max-width: 52ch;
  font-size: clamp(1.05rem, 1.6vw, 1.3rem); color: var(--ink-soft);
}
.cover__sub .ink { font-weight: 500; }
.cover__sub--2 { margin-top: 1em; font-size: clamp(.96rem, 1.3vw, 1.08rem); color: var(--ink-faint, var(--ink-soft)); opacity: .82; }

/* =========================================================
   PROOF
   ========================================================= */
/* proof slide: tighten everything so the media grid fits one screen */
#proof.slide { padding-top: clamp(26px, 4vh, 52px); padding-bottom: clamp(26px, 4vh, 52px); }
#proof .slide__title { font-size: clamp(1.5rem, 2.5vw, 2.1rem); margin-top: .3em; }
.proof__intro {
  margin: .55em 0 0; max-width: 64ch; color: var(--ink-soft); font-size: .9rem;
}
.proof__grid {
  margin: .95em 0 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(12px, 1.3vw, 16px);
  max-width: 840px;
}
.proof__tile {
  display: flex; flex-direction: column;
  text-decoration: none; color: inherit;
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: 16px; overflow: hidden;
  box-shadow: var(--shadow-sm), var(--letterpress);
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out), border-color .3s var(--ease-out);
}
.proof__tile:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg), var(--letterpress);
  border-color: var(--line-strong);
}
.proof__thumb {
  display: block; width: 100%; aspect-ratio: 11 / 4; overflow: hidden;
  background: var(--paper-sink); border-bottom: 1px solid var(--line);
}
.proof__thumb img {
  width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block;
  transition: transform .6s var(--ease-out);
}
.proof__tile:hover .proof__thumb img { transform: scale(1.045); }
.proof__tag {
  padding: clamp(12px,1.4vw,16px) clamp(16px,1.6vw,20px) 0;
  font-family: var(--mono); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent-deep);
}
.proof__name {
  padding: 0 clamp(16px,1.6vw,20px); margin: .3em 0 .22em;
  font-family: var(--serif); font-weight: 400; font-size: clamp(1.15rem, 1.6vw, 1.4rem);
  line-height: 1.08; letter-spacing: -.01em; color: var(--ink);
}
.proof__line { padding: 0 clamp(16px,1.6vw,20px); margin: 0; font-size: .82rem; line-height: 1.4; color: var(--ink-soft); flex: 1; }
.proof__open {
  padding: 0 clamp(16px,1.6vw,20px) clamp(12px,1.3vw,15px); margin-top: .6em;
  font-family: var(--mono); font-size: .72rem; letter-spacing: .03em; color: var(--accent-deep);
}
.proof__tile:hover .proof__open { color: var(--accent); }

/* ===========================================================
   IN-LINE PIECE PLAYER (modal)
   =========================================================== */
.modal {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(12px, 3vw, 38px);
  opacity: 0; visibility: hidden;
  transition: opacity .4s var(--ease-out), visibility 0s linear .4s;
}
.modal.is-open { opacity: 1; visibility: visible; transition: opacity .45s var(--ease-out); }
.modal__backdrop {
  position: absolute; inset: 0; cursor: pointer;
  background: rgba(28,26,22,.46);
  backdrop-filter: blur(7px) saturate(115%);
}
.modal__frame {
  position: relative; z-index: 1;
  width: min(1240px, 96vw); height: min(880px, 92vh);
  display: flex; flex-direction: column;
  background: var(--paper-raised);
  border: 1px solid var(--line-strong);
  border-radius: 18px; overflow: hidden;
  box-shadow: 0 40px 100px rgba(28,26,22,.42);
  transform: translateY(20px) scale(.98);
  transition: transform .55s var(--ease-out);
}
.modal.is-open .modal__frame { transform: none; }
.modal__bar {
  flex: none; display: flex; align-items: center; justify-content: space-between;
  padding: 9px 10px 9px 18px;
  background: var(--paper-raised); border-bottom: 1px solid var(--line);
}
.modal__title {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-mute);
}
.modal__close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%; cursor: pointer; line-height: 0; padding: 0;
  background: var(--paper-sink); border: 1px solid var(--line-strong); color: var(--ink);
  box-shadow: var(--shadow-sm);
  transition: background .25s ease, color .25s ease, transform .35s var(--ease-out), border-color .25s ease;
}
.modal__close:hover {
  background: var(--ink); color: var(--paper); border-color: var(--ink);
  transform: rotate(90deg);
}
.modal__close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.modal__stage { position: relative; flex: 1; background: var(--paper-sink); }
.modal__iframe { width: 100%; height: 100%; border: 0; display: block; background: var(--paper); }

.placeholder {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .4em; text-align: center;
  background:
    repeating-linear-gradient(135deg, transparent 0 18px, rgba(40,34,20,.025) 18px 19px),
    var(--paper-sink);
  border: 1px solid var(--line); border-radius: 14px; color: var(--ink-mute);
  box-shadow: var(--letterpress);
}
.placeholder__tag {
  font-family: var(--mono); font-size: .62rem; letter-spacing: .16em; text-transform: uppercase;
  padding: .3em .7em; border: 1px solid var(--line-strong); border-radius: 100px;
  background: var(--paper-raised); color: var(--ink-soft);
}
.placeholder__title { font-family: var(--serif); font-size: 1.35rem; color: var(--ink-soft); margin: .3em 0 0; }
.placeholder__note { font-family: var(--mono); font-size: .74rem; margin: 0; }
.placeholder--proof {
  width: 100%; max-width: 720px; aspect-ratio: 16 / 9; border-radius: 16px;
  margin-inline: auto; box-shadow: var(--shadow-lg), var(--letterpress);
}

/* =========================================================
   WORK
   ========================================================= */
.work__inner { max-width: 1040px; }
.work__inner {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 64px); align-items: center;
}
.work__frame { margin: 1em 0 0; font-size: 1.12rem; color: var(--ink); max-width: 42ch; }
.work__constraint { margin: 1em 0 0; font-size: .98rem; color: var(--ink-soft); max-width: 44ch; }
.work__constraint span { font-family: var(--mono); font-size: .74rem; text-transform: uppercase; letter-spacing: .1em; color: var(--accent-deep); }
.work__meta { margin: 1.6em 0 0; font-family: var(--mono); font-size: .74rem; letter-spacing: .04em; color: var(--ink-mute); }
.placeholder--media { aspect-ratio: 4 / 3; box-shadow: var(--shadow-lg), var(--letterpress); }

/* =========================================================
   POV
   ========================================================= */
.pov__title { max-width: 16ch; }
.pov__lead {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(1.4rem, 2.6vw, 2.1rem); line-height: 1.32; letter-spacing: -.01em;
  color: var(--ink); margin: .7em 0 0; max-width: 30ch;
}
.pov__kicker {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(1.15rem, 1.9vw, 1.5rem); color: var(--ink-soft); margin: 1.1em 0 0; max-width: 40ch;
}

/* =========================================================
   ABOUT
   ========================================================= */
.about__inner {
  display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr);
  gap: clamp(32px, 5vw, 72px); align-items: center; max-width: 980px;
}
.placeholder--portrait { aspect-ratio: 4 / 5; border-radius: 16px; box-shadow: var(--shadow-lg), var(--letterpress); }
/* white-bg cutout printed onto the paper — multiply drops the white */
.about__portrait {
  width: 100%; max-width: 340px; height: auto; display: block;
  mix-blend-mode: multiply;
  filter: saturate(.96) contrast(1.02);
}
.about__text p { margin: 1.1em 0 0; color: var(--ink-soft); max-width: 52ch; }
.about__text p:first-of-type { color: var(--ink); }

/* =========================================================
   CONTACT
   ========================================================= */
.contact__title { max-width: 18ch; }
.contact__qualify { max-width: 54ch; margin: 1.3em 0 0; color: var(--ink-soft); font-size: 1.08rem; }
.contact__links { margin-top: 2.2em; display: flex; flex-wrap: wrap; align-items: baseline; gap: clamp(16px, 4vw, 44px); }
.contact__email {
  font-family: var(--serif); font-size: clamp(1.6rem, 4vw, 2.7rem); text-decoration: none; letter-spacing: -.01em;
  background-image: linear-gradient(var(--accent), var(--accent));
  background-size: 0% 1.5px; background-position: 0 100%; background-repeat: no-repeat;
  transition: background-size .35s ease, color .2s ease; padding-bottom: .06em;
}
.contact__email:hover { background-size: 100% 1.5px; color: var(--accent-deep); }
.contact__li { font-family: var(--mono); font-size: .85rem; letter-spacing: .04em; text-decoration: none; color: var(--ink-soft); }
.contact__li:hover { color: var(--accent-deep); }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 820px) {
  .slide { padding: clamp(32px, 7vw, 56px); padding-bottom: 92px; place-items: start center; align-content: center; }
  .work__inner, .about__inner { grid-template-columns: 1fr; gap: 24px; }
  .work .work__media, .about__media { max-width: 360px; }
  .rail {
    left: 50%; top: auto; bottom: 16px; transform: translateX(-50%);
    flex-direction: row; gap: 0; padding: 9px 12px;
  }
  .chap { padding: 6px; }
  .chap__lab { display: none; }
  .brandmark { top: 16px; left: 18px; }
  .brandmark img { height: 30px; }
  .hud { right: 16px; bottom: 70px; }
  .hud__hint { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .slide, .slide.is-active { transition: opacity .25s linear; transform: none !important; filter: none !important; }
  .slide__inner > *, .about__text > *, .about__media, .proof__tile, .contact__links > *,
  .brandmark, .rail, .rail .chap, .hud, .slide__title, .cover__lede {
    animation: none !important; transform: none !important; filter: none !important; clip-path: none !important;
  }
  .hud__hint::before { animation: none; }
}

/* ===================================================================
   v3 additions — light-tuned atmosphere + proof motion previews
   =================================================================== */
.dust{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.55}
.cursor-light{position:fixed;left:0;top:0;width:598px;height:598px;margin:-299px;border-radius:50%;
  z-index:0;pointer-events:none;mix-blend-mode:soft-light;
  background:radial-gradient(circle, rgba(255,255,255,1), rgba(255,255,255,.4) 42%, transparent 70%);
  will-change:transform}
#deck.is-rippling{filter:url(#ripple)}

.cover__cue{margin-top:clamp(20px,4vh,40px);font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;color:var(--ink-mute)}
.about__quote{margin-top:.5rem}

/* proof — the centerpiece */
.proof__inner{max-width:1080px}
.proof__head{margin-bottom:clamp(16px,3vh,30px)}
.proof__intro{color:var(--ink-mute);font-family:var(--mono);font-size:.78rem;letter-spacing:.02em;margin-top:.55rem}
.proof__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(14px,1.6vw,22px)}
.proof__tile{position:relative;display:flex;flex-direction:column;overflow:hidden;padding:0;
  background:var(--paper-raised);border:1px solid var(--line);border-radius:18px;
  box-shadow:var(--shadow-md);text-decoration:none;color:inherit;cursor:pointer;
  transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out),border-color .3s}
.proof__tile.feature{grid-column:1 / -1}
.proof__media{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;background:var(--paper-sink)}
.proof__tile.feature .proof__media{aspect-ratio:16/7}
.proof__vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.proof__media::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 130%, rgba(28,26,22,.20), transparent 58%)}
.proof__play{position:absolute;left:14px;bottom:12px;z-index:2;width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;font-size:.6rem;color:#fff;background:rgba(28,26,22,.5);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);opacity:.85;transition:opacity .3s,transform .3s}
.proof__meta{padding:16px 18px 18px;position:relative;z-index:1}
.proof__tag{font-family:var(--mono);font-size:.64rem;letter-spacing:.13em;text-transform:uppercase;color:var(--accent)}
.proof__name{font-family:var(--serif);font-weight:400;font-size:clamp(1.3rem,2.4vw,2rem);margin:.25rem 0 .35rem;letter-spacing:-.01em}
.proof__line{color:var(--ink-soft);font-size:.92rem;line-height:1.5;max-width:48ch}
.proof__open{display:inline-block;margin-top:.7rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.02em;color:var(--accent-deep)}
.proof__tile::before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;transition:opacity .35s;
  background:radial-gradient(360px 360px at var(--mx,50%) var(--my,50%), rgba(255,255,255,.6), transparent 60%)}
.proof__tile:hover{transform:translateY(-4px);border-color:var(--line-strong);box-shadow:var(--shadow-lg)}
.proof__tile:hover::before{opacity:1}
.proof__tile:hover .proof__play{opacity:0;transform:scale(.8)}
.proof__tile:hover .proof__open{color:var(--accent)}

/* contact buttons */
.contact__links{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(18px,3vh,28px)}
.contact__btn{font-family:var(--mono);font-size:.84rem;letter-spacing:.01em;text-decoration:none;color:var(--ink);
  padding:.8rem 1.3rem;border:1px solid var(--line-strong);border-radius:999px;background:var(--paper-raised);
  box-shadow:var(--shadow-sm);transition:transform .3s var(--ease),border-color .3s,background .3s,color .3s}
.contact__btn:hover{transform:translateY(-2px);border-color:var(--accent)}
.contact__btn.primary{background:var(--accent);color:#fff7ef;border-color:var(--accent)}
.contact__btn.primary:hover{background:var(--accent-deep);color:#fff7ef}

@media (max-width:760px){
  .proof__grid{grid-template-columns:1fr}
  .proof__tile.feature{grid-column:auto}
}
@media (prefers-reduced-motion:reduce){
  .cursor-light,.dust{display:none!important}
  #deck.is-rippling{filter:none!important}
  .slide__obj{animation:none!important}
}

/* gentle Ken-Burns drift on proof thumbnails (motion preview, light/restrained) */
.proof__vid{transition:transform 6s var(--ease-out)}
.proof__tile:hover .proof__vid,
.proof__tile.in-view .proof__vid{transform:scale(1.09) translate(-1%,-.5%)}
@media (prefers-reduced-motion:reduce){ .proof__vid{transition:none!important;transform:none!important} }

/* ===================================================================
   v3.2 — tailor line-art motif + cover two-column + proof fits one screen
   =================================================================== */

/* cover: copy left, line-art motif right */
.cover--motif{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(24px,5vw,70px);align-items:center;width:100%;max-width:1180px;margin:0 auto}
.cover__copy{max-width:40ch}
.motif{color:var(--ink-soft);opacity:.92;justify-self:center;width:min(40vh,380px)}
.motif svg{width:100%;height:auto;overflow:visible}
.motif .m-faint{opacity:.4}
.motif .m-thread{stroke:var(--accent)}
/* draw-on: each stroke sketches itself when the cover is active */
.motif__draw > *{stroke-dasharray:760;stroke-dashoffset:760}
#cover.is-active .motif__draw > *{animation:motifDraw 2.6s var(--ease-out) forwards}
#cover.is-active .motif__draw > *:nth-child(2){animation-delay:.15s}
#cover.is-active .motif__draw > *:nth-child(3){animation-delay:.3s}
#cover.is-active .motif__draw > *:nth-child(n+4){animation-delay:.55s}
#cover.is-active .motif__draw > *:nth-child(n+8){animation-delay:.9s}
#cover.is-active .motif__draw .m-thread{animation-delay:1.15s}
@keyframes motifDraw{to{stroke-dashoffset:0}}

/* PROOF — fit all four on one screen (the deck owns navigation, no inner scroll) */
.slide.proof .slide__inner{height:100vh;display:flex;flex-direction:column;justify-content:center;
  padding-top:clamp(64px,10vh,96px);padding-bottom:clamp(36px,6vh,64px)}
.proof__inner{display:flex;flex-direction:column;width:100%;max-width:1120px;margin:0 auto;height:100%;min-height:0}
.proof__head{flex:0 0 auto}
.proof__intro{margin-top:.45rem}
.proof__grid{flex:1 1 auto;min-height:0;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:1fr;
  gap:clamp(12px,1.4vw,18px);margin-top:clamp(12px,2vh,22px)}
.proof__tile{display:flex;flex-direction:column;min-height:0}
.proof__media{flex:1 1 auto;min-height:0;aspect-ratio:auto}
.proof__meta{flex:0 0 auto;padding:11px 16px 13px}
.proof__name{font-size:clamp(1.05rem,1.7vw,1.45rem);margin:.12rem 0 .22rem}
.proof__line{font-size:.84rem;line-height:1.45;max-width:52ch;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.proof__open{margin-top:.45rem}

@media (max-width:820px){
  .cover--motif{grid-template-columns:1fr}
  .motif{display:none}
  .proof__grid{grid-template-columns:1fr;grid-template-rows:none;overflow-y:auto}
  .slide.proof .slide__inner{height:auto;min-height:100vh}
}
@media (prefers-reduced-motion:reduce){
  .motif__draw > *{stroke-dashoffset:0!important;animation:none!important}
}

/* ===================================================================
   v3.3 — About as a modal (opened from Contact)
   =================================================================== */
.about-card{position:relative;z-index:2;display:grid;grid-template-columns:minmax(170px,250px) 1fr;
  gap:clamp(20px,3vw,42px);align-items:start;width:min(820px,92vw);max-height:88vh;overflow:auto;
  background:var(--paper-raised);border:1px solid var(--line);border-radius:20px;
  box-shadow:var(--shadow-lg);padding:clamp(26px,3.4vw,44px);
  transform:translateY(16px) scale(.985);opacity:0;
  transition:transform .5s var(--ease-out),opacity .5s var(--ease-out)}
#about-modal.is-open .about-card{transform:none;opacity:1}
/* reactive portrait stage */
.about-card__media{position:relative;align-self:center}
.portrait{position:relative;width:100%;aspect-ratio:520/634;
  transform:translate(0,0) rotateX(0) rotateY(0);transform-style:preserve-3d;
  transition:transform .14s linear;will-change:transform}
.portrait__layer{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:bottom center;
  opacity:0;transition:opacity .26s var(--ease-out);filter:drop-shadow(0 16px 26px rgba(28,26,22,.28))}
.portrait__layer.is-on{opacity:1}
.portrait.is-shaking{animation:portraitShake .5s cubic-bezier(.36,.07,.19,.97)}
@keyframes portraitShake{10%,90%{transform:translateX(-3px)}20%,80%{transform:translateX(5px)}
  30%,50%,70%{transform:translateX(-8px)}40%,60%{transform:translateX(8px)}}
.portrait__retort{position:absolute;top:6%;left:50%;transform:translate(-50%,-8px) scale(.96);
  background:var(--ink);color:var(--paper);font-family:var(--mono);font-size:.72rem;line-height:1.3;
  padding:7px 11px;border-radius:11px;white-space:nowrap;pointer-events:none;
  opacity:0;transition:opacity .2s,transform .2s var(--ease-out);z-index:4}
.portrait__retort::after{content:"";position:absolute;left:50%;bottom:-5px;width:10px;height:10px;
  background:var(--ink);transform:translateX(-50%) rotate(45deg)}
.portrait__retort.is-on{opacity:1;transform:translate(-50%,0) scale(1)}

/* message chips */
.about-chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:1.1rem}
.chip{font-family:var(--mono);font-size:.76rem;letter-spacing:.01em;line-height:1;
  padding:9px 13px;border-radius:999px;border:1px solid var(--line-strong);background:var(--paper);
  color:var(--ink-soft);text-decoration:none;cursor:pointer;
  transition:border-color .2s,color .2s,background .2s,transform .15s}
.chip:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-1px)}
.chip--cheeky{border-style:dashed;color:var(--ink-mute)}
.chip--cheeky:hover{border-color:var(--accent-deep);color:var(--accent-deep);background:var(--accent-wash)}
.about-card__title{font-family:var(--serif);font-weight:400;font-size:clamp(1.5rem,3vw,2.1rem);
  letter-spacing:-.02em;line-height:1.05;margin:.5rem 0 .7rem}
.about-card__text p{color:var(--ink-soft);margin:0 0 .9rem;max-width:56ch}
.about-card__text em{font-style:italic;color:var(--ink)}
.about-card .modal__close{position:absolute;top:14px;right:14px;z-index:3}
@media (max-width:680px){
  .about-card{grid-template-columns:1fr}
  .about-card__media{max-width:200px}
}

/* ===== v3.4 — product-page step: cover CTA, named method, credibility ===== */
.cover__cta{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:clamp(20px,3vh,30px)}
.cover__link{font-family:var(--mono,"Spline Sans Mono",monospace);font-size:.82rem;letter-spacing:.02em;
  color:var(--ink-soft);text-decoration:none;border-bottom:1px solid transparent;transition:color .25s,border-color .25s}
.cover__link:hover{color:var(--accent);border-color:var(--accent)}

/* method slide */
.slide.method-slide .slide__inner{height:100vh;display:flex;flex-direction:column;justify-content:center;
  max-width:1080px;margin:0 auto;padding-top:clamp(64px,10vh,96px);padding-bottom:clamp(36px,6vh,64px)}
.method__lede{margin-top:.5rem;max-width:60ch;font-size:clamp(1.02rem,1.5vw,1.22rem);color:var(--ink-soft)}
.method__steps{list-style:none;margin:clamp(22px,4vh,40px) 0 0;padding:0;display:grid;
  grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,26px)}
.method__step{position:relative;background:var(--paper-raised);border:1px solid rgba(28,26,22,.08);
  border-radius:16px;padding:clamp(18px,2vw,26px);box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 10px 30px -22px rgba(28,26,22,.5)}
.method__n{font-family:var(--mono,"Spline Sans Mono",monospace);font-size:.8rem;letter-spacing:.06em;
  color:var(--accent);font-weight:500}
.method__name{font-family:var(--serif,"Fraunces",serif);font-weight:400;font-size:clamp(1.25rem,1.9vw,1.6rem);
  margin:.35rem 0 .5rem}
.method__d{font-size:.92rem;line-height:1.55;color:var(--ink-soft)}

/* credibility line on the work slide */
.proof__cred{margin-top:.5rem;font-family:var(--mono,"Spline Sans Mono",monospace);font-size:.76rem;
  letter-spacing:.03em;color:var(--ink-soft);opacity:.78}

@media (max-width:820px){
  .slide.method-slide .slide__inner{height:auto;min-height:100vh}
  .method__steps{grid-template-columns:1fr}
}

/* ===================================================================
   v3.6 — teal restore era: anime slice transition, 4-up work, about slide
   =================================================================== */

/* the leaving room is sliced in two and the halves spin toward the camera */
#deck{ perspective: 1500px; perspective-origin: 50% 42%; }
.slice-half{
  position:fixed; inset:0; z-index:42; pointer-events:none;
  opacity:1 !important; visibility:visible !important; filter:none !important;
  transform:none; transition:none !important; backface-visibility:hidden;
}
.slice-top{ clip-path: inset(0 0 50% 0); }
.slice-bot{ clip-path: inset(50% 0 0 0); }
.slice-top.go{ animation: sliceTop .66s cubic-bezier(.5,0,.35,1) forwards; }
.slice-bot.go{ animation: sliceBot .66s cubic-bezier(.5,0,.35,1) forwards; }
@keyframes sliceTop{
  0%   { transform: perspective(1500px) translate3d(0,0,0) rotateX(0) scale(1); opacity:1; }
  14%  { transform: perspective(1500px) translate3d(-2%,-12px,0) rotateX(0) scale(1); opacity:1; }
  100% { transform: perspective(1500px) translate3d(-7%,-46%,470px) rotateX(36deg) rotateZ(-4deg) scale(1.05); opacity:0; }
}
@keyframes sliceBot{
  0%   { transform: perspective(1500px) translate3d(0,0,0) rotateX(0) scale(1); opacity:1; }
  14%  { transform: perspective(1500px) translate3d(2%,12px,0) rotateX(0) scale(1); opacity:1; }
  100% { transform: perspective(1500px) translate3d(7%,46%,470px) rotateX(-36deg) rotateZ(4deg) scale(1.05); opacity:0; }
}
/* the katana gleam along the cut */
.slice-flash{
  position:fixed; left:0; right:0; top:50%; height:2px; z-index:43; pointer-events:none;
  transform:translateY(-50%) scaleX(0); transform-origin:50% 50%;
  background:linear-gradient(90deg, transparent, var(--accent) 30%, #fff 50%, var(--accent) 70%, transparent);
  opacity:0; box-shadow:0 0 16px var(--accent);
}
.slice-flash.go{ animation: sliceFlash .5s ease-out forwards; }
@keyframes sliceFlash{
  0%{ opacity:0; transform:translateY(-50%) scaleX(.2); }
  24%{ opacity:1; transform:translateY(-50%) scaleX(1); }
  60%{ opacity:.9; }
  100%{ opacity:0; transform:translateY(-50%) scaleX(1); }
}

/* WORK — 4-up row that fits under the top-third anchor */
.slide.proof .slide__inner{ height:auto; display:block; max-width:1180px; padding:0; }
.proof__grid{
  display:grid; grid-template-columns:repeat(4,1fr); grid-template-rows:auto;
  gap:clamp(12px,1.2vw,18px); margin-top:clamp(14px,2.4vh,26px);
}
.proof__tile{ display:flex; flex-direction:column; }
.proof__media{ aspect-ratio:4/3; flex:none; }
.proof__meta{ padding:10px 13px 13px; }
.proof__name{ font-size:clamp(1rem,1.3vw,1.22rem); margin:.1rem 0 .2rem; }
.proof__line{ font-size:.8rem; -webkit-line-clamp:2; }
@media (max-width:1100px){ .proof__grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){
  .proof__grid{ grid-template-columns:1fr; }
  .slide.proof .slide__inner{ max-width:520px; }
}

/* ABOUT slide — static portrait, sits in the upper third */
.slide.about .slide__inner{ max-width:1000px; }
.about__inner{ display:grid; grid-template-columns:minmax(0,260px) 1fr; gap:clamp(26px,4vw,56px); align-items:center; }
.about__media{ position:relative; }
.about__portrait{ width:100%; border-radius:16px; box-shadow:var(--shadow-md); background:var(--paper-sink); }
.about__text p{ color:var(--ink-soft); margin:0 0 .85rem; max-width:58ch; }
.about__text em{ font-style:italic; color:var(--ink); }
@media (max-width:760px){
  .about__inner{ grid-template-columns:1fr; gap:20px; }
  .about__media{ max-width:200px; }
}

/* ===================================================================
   v3.7 — method 4-step, scrollable work box, per-segment slice styles
   =================================================================== */

/* METHOD — "Curiosity attracts." + four numbered steps + close */
.slide.method-slide .slide__inner{ height:auto; display:block; max-width:1040px; padding:0; }
.method__steps{
  list-style:none; margin:clamp(20px,3.2vh,36px) 0 0; padding:0;
  display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,1.8vw,26px);
}
.method__step{
  display:flex; flex-direction:column; gap:.35rem;
  background:none; border:0; border-top:1px solid var(--line-strong); border-radius:0;
  box-shadow:none; padding:14px 0 0;
}
.method__n{ font-family:var(--serif); font-weight:400; font-size:clamp(1.7rem,2.6vw,2.4rem);
  color:var(--accent); line-height:1; }
.method__t{ font-size:clamp(.92rem,1.1vw,1.05rem); color:var(--ink); }
.method__close{ margin-top:clamp(20px,3.2vh,36px); max-width:62ch; color:var(--ink-soft);
  font-size:clamp(1rem,1.3vw,1.18rem); }
.method__close .ink{ font-weight:500; }
@media (max-width:760px){ .method__steps{ grid-template-columns:repeat(2,1fr); } }

/* WORK — a clearly boxed, scrollable area to explore the portfolio */
.slide.proof .slide__inner{ height:auto; display:block; max-width:980px; padding:0; }
.proof__scroll{
  margin-top:clamp(16px,2.4vh,26px);
  border:1px solid var(--line-strong); border-radius:18px;
  background:rgba(255,255,255,.42); box-shadow:var(--letterpress);
  padding:clamp(14px,1.6vw,20px);
  max-height:min(52vh,500px); overflow-y:auto; overscroll-behavior:contain;
}
.proof__grid{
  display:grid; grid-template-columns:repeat(2,1fr); grid-template-rows:auto;
  gap:clamp(12px,1.4vw,18px); margin:0;
}
.proof__tile{ display:flex; flex-direction:column; }
.proof__media{ aspect-ratio:16/10; flex:none; }
.proof__note{ margin:.7rem 4px 0; font-family:var(--mono); font-size:.72rem;
  font-style:italic; color:var(--ink-mute); }
.proof__scroll::-webkit-scrollbar{ width:11px; }
.proof__scroll::-webkit-scrollbar-track{ background:transparent; }
.proof__scroll::-webkit-scrollbar-thumb{
  background:var(--line-strong); border-radius:7px;
  border:3px solid transparent; background-clip:content-box;
}
@media (max-width:640px){ .proof__grid{ grid-template-columns:1fr; } }

/* slice gleam — generic line; orientation/positioning set inline by JS (WAAPI) */
.slice-flash{
  position:fixed; z-index:43; pointer-events:none; border-radius:2px;
  background:var(--accent); box-shadow:0 0 16px var(--accent), 0 0 5px #fff;
}

/* =====================================================================
   v3.8 — dark cover · persistent chrome · rotating objects · JS reveals
   · vertical-push pizazz · scrollable portfolio · click glitch
   ===================================================================== */
.modal__close svg{ display:block; }                 /* precise ✕ centering */
#deck{ perspective:1600px; perspective-origin:50% 42%; }

/* disable the old auto-fired entrance engine — JS drives reveals now */
.slide.is-active .slide__inner > *,
.slide.is-active .about__text > *,
.slide.is-active .proof__tile,
.slide.is-active .contact__links > *,
.slide.is-active .slide__title,
.slide.is-active .cover__lede { animation:none !important; }

/* reveal primitives (JS toggles .in) */
.rv{ opacity:0; transform:translateY(16px); filter:blur(6px);
  transition:opacity .6s var(--ease-out), transform .7s var(--ease-out), filter .6s var(--ease-out); }
.rv.in{ opacity:1; transform:none; filter:blur(0); }

/* (legacy rotating-object rules removed — art governed by v3.13/3.14 below) */
.slide__inner{ position:relative; z-index:1; }

/* ===== DARK COVER ===== */
.slide.cover-dark{ background:
  radial-gradient(120% 90% at 72% 8%, #1e2925, transparent 58%),
  radial-gradient(90% 80% at 18% 112%, rgba(21,122,110,.20), transparent 55%),
  #14140f; }
.cover-dark .eyebrow{ color:#9aa39b; }
.cover-dark .cover__lede{ color:#f3efe4; }
.cover-dark .cover__lede em{ color:#41c2af; }
.cover-dark .cover__sub{ color:#cdd2c9; }
.cover-dark .cover__sub .ink{ color:#fff; }
.cover-dark .try{ color:#e9ece5; }
.cover-dark .try:hover{ color:#41c2af; }

/* chrome flips light while the dark cover shows */
body.on-dark .brandmark img{ mix-blend-mode:normal; filter:brightness(0) invert(1); opacity:.9; }
body.on-dark .rail{ background:rgba(20,20,15,.5); border-color:rgba(255,255,255,.16); }
body.on-dark .chap__lab{ color:#b9bdb3; }
body.on-dark .chap.is-cur .chap__lab{ color:#fff; }
body.on-dark .chap__dot{ border-color:rgba(255,255,255,.32); }
body.on-dark .contactme, body.on-dark .nav__btn{ color:#e9ece5; text-shadow:none; }
body.on-dark .contactme:hover, body.on-dark .nav__btn:hover{ color:#41c2af; }

/* ===== persistent chrome ===== */
.hico{ display:inline-flex; }
.hico svg{ width:1.05em; height:1.05em; fill:none; stroke:currentColor; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round; overflow:visible; }
.contactme{ position:fixed; top:24px; right:28px; z-index:60; display:inline-flex; align-items:center; gap:.5em;
  font-family:var(--mono); font-size:.78rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-soft); text-decoration:none; padding:6px 4px; text-shadow:0 1px 0 rgba(255,255,255,.6);
  transition:color .25s, transform .25s var(--ease-out); }
.contactme:hover{ color:var(--accent); transform:translateY(-1px); }
.contactme .hico svg{ width:1.3em; height:1.3em; }
.nav{ position:fixed; right:28px; bottom:24px; z-index:60; display:flex; align-items:center; gap:20px; }
.nav__btn{ display:inline-flex; align-items:center; gap:.5em; background:none; border:0; cursor:pointer;
  font-family:var(--mono); font-size:.8rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-soft); padding:6px 4px; text-shadow:0 1px 0 rgba(255,255,255,.6);
  transition:color .25s, transform .25s var(--ease-out), opacity .4s ease; }
.nav__btn:hover{ color:var(--accent); transform:translateY(-1px); }
.nav__btn .hico svg{ width:1.3em; height:1.3em; }
.nav__btn[hidden]{ display:none; }
@keyframes navshake{ 0%,100%{transform:none} 15%{transform:translateX(-3px) rotate(-2deg)}
  30%{transform:translateX(4px) rotate(2deg)} 45%{transform:translateX(-4px)} 60%{transform:translateX(3px)} 80%{transform:translateX(-2px)} }

/* ===== click glitch (replaces ripple) ===== */
.slide.is-glitch .slide__inner{ animation:glitch .26s steps(2,end); }
@keyframes glitch{ 0%{transform:translate(0,0)} 20%{transform:translate(-2px,1px) skewX(.6deg)}
  40%{transform:translate(2px,-1px) skewX(-.6deg)} 60%{transform:translate(-1px,1px)} 80%{transform:translate(1px,-1px)} 100%{transform:translate(0,0)} }

/* ===== transition seam streak ===== */
.tstreak{ position:fixed; left:0; right:0; top:50%; height:2px; z-index:41; pointer-events:none;
  transform:translateY(-50%) scaleX(0); transform-origin:50%;
  background:linear-gradient(90deg,transparent,var(--accent),#fff,var(--accent),transparent); box-shadow:0 0 16px var(--accent); }
.tstreak.go{ animation:streak .5s ease-out forwards; }
@keyframes streak{ 0%{opacity:0;transform:translateY(-50%) scaleX(.2)} 30%{opacity:1;transform:translateY(-50%) scaleX(1)} 100%{opacity:0;transform:translateY(-50%) scaleX(1)} }

/* ===== COVER reveal effects ===== */
.cover__sub .rv-flash, .cover__sub .andsud, .cover__sub .popline{ display:block; }
.rv-flash.flash{ animation:flashIn .42s var(--ease-out); }
@keyframes flashIn{ 0%{opacity:0;transform:scale(1.06);filter:brightness(2.4)} 45%{opacity:1;filter:brightness(1.5)} 100%{opacity:1;transform:none;filter:none} }
.popline{ position:relative; }
.pop{ display:inline-block; opacity:0; transform:scale(.4); }
.pop.in{ animation:pop .5s cubic-bezier(.2,1.5,.4,1) forwards; }
.pop--big.in{ animation-duration:.72s; }
@keyframes pop{ 0%{opacity:0;transform:scale(.4)} 55%{opacity:1;transform:scale(1.35)} 100%{opacity:1;transform:scale(1)} }
.popline.gold .pop{ color:#e9b84a; text-shadow:0 1px 0 #fff3cf, 0 0 14px rgba(233,184,74,.55); }
.lensflare{ position:absolute; left:-14%; top:50%; width:48%; height:260%;
  transform:translate(-60%,-50%) rotate(14deg);
  background:radial-gradient(closest-side, rgba(255,242,205,.95), rgba(255,222,140,.35) 40%, transparent 72%);
  mix-blend-mode:screen; opacity:0; pointer-events:none; }
.lensflare.go{ animation:flare 1s ease-out forwards; }
@keyframes flare{ 0%{opacity:0;left:-14%} 22%{opacity:1} 100%{opacity:0;left:120%} }

/* ===== METHOD reveal effects ===== */
.clickword{ display:inline-block; color:var(--accent); opacity:0; transition:opacity .4s ease; }
.clickword.show{ opacity:1; }
.clickword.jit{ animation:tapeclick .42s steps(1,end); }
@keyframes tapeclick{ 0%{transform:translateX(3px)} 28%{transform:translateX(-2px)} 55%{transform:translateX(1px)} 80%{transform:translateX(-.5px)} 100%{transform:none} }
.sparkleword{ position:relative; }
.sparkleword .spk{ position:absolute; width:9px; height:9px; opacity:0;
  background:radial-gradient(closest-side,#f2c75a,transparent 70%); }
.sparkleword .spk:nth-child(1){ left:-7px; top:-7px } .sparkleword .spk:nth-child(2){ right:-5px; top:-9px } .sparkleword .spk:nth-child(3){ right:12px; bottom:-7px }
.sparkleword.go .spk{ animation:spk 1s ease-out forwards; }
.sparkleword.go .spk:nth-child(2){ animation-delay:.18s } .sparkleword.go .spk:nth-child(3){ animation-delay:.34s }
@keyframes spk{ 0%{opacity:0;transform:scale(0) rotate(0)} 40%{opacity:1;transform:scale(1.4) rotate(45deg)} 100%{opacity:0;transform:scale(.6) translateY(-9px) rotate(90deg)} }
.uline{ position:relative; white-space:nowrap; }
.uline__svg{ position:absolute; left:0; bottom:-.36em; width:100%; height:.55em; overflow:visible; }
.uline__svg path{ fill:none; stroke:var(--accent); stroke-width:4; stroke-linecap:round; stroke-dasharray:430; stroke-dashoffset:430; }
.uline.draw .uline__svg path{ animation:drawline .7s var(--ease-out) forwards; }
@keyframes drawline{ to{ stroke-dashoffset:0; } }
.method__cards{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(12px,1.4vw,20px);
  margin-top:clamp(20px,3.2vh,36px); max-width:920px; }
.method__card{ display:flex; flex-direction:column; gap:.55rem; padding:clamp(14px,1.4vw,20px);
  background:var(--paper-raised); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow-sm);
  opacity:0; transform:translateX(36px); filter:blur(6px);
  transition:opacity .55s var(--ease-out), transform .6s var(--ease-out), filter .55s var(--ease-out); }
.method__card.in{ opacity:1; transform:none; filter:blur(0); }
.micon{ display:inline-flex; opacity:0; transform:translateY(10px); filter:blur(5px);
  transition:opacity .5s var(--ease-out), transform .55s var(--ease-out), filter .5s var(--ease-out); }
.micon svg{ width:30px; height:30px; fill:none; stroke:var(--accent); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.method__card.icon-in .micon{ opacity:1; transform:none; filter:blur(0); }
.method__cn{ font-family:var(--serif); font-size:clamp(1.05rem,1.4vw,1.35rem); color:var(--ink); }
.method__lead{ max-width:60ch; color:var(--ink-soft); font-size:clamp(1rem,1.3vw,1.18rem); margin-top:.6rem; }
@media (max-width:760px){ .method__cards{ grid-template-columns:repeat(2,1fr); } }

/* ===== PORTFOLIO — whole slide scrolls so the container edges show ===== */
.slide.proof{ padding-top:clamp(52px,10vh,110px); overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; }
.slide.proof .slide__inner{ height:auto; display:block; max-width:980px; padding:0; }
.proof__box{ margin-top:clamp(16px,2.4vh,26px); border:1px solid var(--line-strong); border-radius:18px;
  background:rgba(255,255,255,.42); box-shadow:var(--letterpress); padding:clamp(16px,1.8vw,24px); }
.proof__grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(12px,1.4vw,18px); margin:0; }
.proof__tile{ display:flex; flex-direction:column; }
.proof__media{ aspect-ratio:16/10; flex:none; }
.proof__note{ margin:.8rem 4px 2px; font-family:var(--mono); font-size:.72rem; font-style:italic; color:var(--ink-mute); }
@media (max-width:640px){ .proof__grid{ grid-template-columns:1fr; } }

/* =====================================================================
   v3.9 — new structure: proof strip · approach slide · colour objects
   ===================================================================== */
/* (legacy object opacity removed — governed by v3.13/3.14) */

/* PROOF STRIP — quick credibility beat between cover and work */
.slide.strip{ place-items:center; padding-top:clamp(40px,8vh,120px); }
.strip__inner{ max-width:1040px; text-align:center; }
.strip__trust{ font-family:var(--serif); font-weight:400; line-height:1.3;
  font-size:clamp(1.25rem,2.1vw,1.7rem); color:var(--ink); max-width:24ch; margin:0 auto; }
.strip__stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(22px,3.4vw,54px);
  margin-top:clamp(28px,5vh,56px); }
.stat{ display:flex; flex-direction:column; gap:.35rem; }
.stat__n{ font-family:var(--serif); font-weight:400; line-height:1; color:var(--accent);
  font-size:clamp(1.45rem,2.6vw,2.3rem); }
.stat__l{ font-size:.85rem; line-height:1.45; color:var(--ink-soft); }
@media (max-width:700px){ .strip__stats{ grid-template-columns:1fr; gap:22px; text-align:center; } }

/* APPROACH — philosophy, not a process diagram */
.approach__lead{ max-width:60ch; color:var(--ink-soft); margin-top:.6rem;
  font-size:clamp(1.05rem,1.45vw,1.28rem); }
.approach__q-intro{ margin-top:clamp(18px,2.6vh,30px); color:var(--ink); font-weight:600;
  font-family:var(--mono); font-size:.82rem; letter-spacing:.04em; text-transform:uppercase; }
.approach__qs{ list-style:none; margin:.7rem 0 0; padding:0; display:flex; flex-direction:column;
  gap:.55rem; max-width:60ch; }
.approach__qs li{ display:flex; align-items:baseline; gap:.8rem; color:var(--ink);
  font-family:var(--serif); font-weight:400; font-size:clamp(1.2rem,1.9vw,1.6rem); line-height:1.2; }
.aq__n{ font-family:var(--mono); font-size:.72rem; letter-spacing:.04em; color:var(--accent); flex:none; }
.approach__close{ margin-top:clamp(22px,3.4vh,40px); max-width:54ch; color:var(--ink);
  font-family:var(--serif); font-style:italic; font-size:clamp(1.1rem,1.6vw,1.4rem); line-height:1.3; }

/* =====================================================================
   v3.13 — large art behind · logo in corner · grand transitions
   · edge-nav semicircles · circular nav · cover reveal + yellow highlight
   ===================================================================== */

/* logo back in the corner */
.brandmark{ left:24px; }

/* text column left, in front; art large + desaturated behind, filling the right */
.slide__inner{ max-width:440px; position:relative; z-index:1; }
/* cover headline may run wider (bulb sits far right); body copy keeps a tight measure */
.slide__inner.cover{ max-width:640px; }
.slide__inner.cover .cover__sub{ max-width:470px; }
.slide.proof .slide__inner{ max-width:1180px; }

.slide__art{ position:absolute; z-index:0; top:0; left:max(548px,34vw); right:auto; height:100vh; width:min(40vw,540px);
  display:flex; align-items:center; justify-content:center; pointer-events:none; opacity:0; }
/* two layers: desaturated base + full-colour copy that watercolour-spreads in on click */
.objwrap{ position:relative; width:100%; height:72vh; display:flex; align-items:center; justify-content:center;
  transform-origin:center center; animation:rock 22s ease-in-out infinite; }
.slide .slide__obj{ position:static; max-width:100%; max-height:100%; width:auto; height:auto;
  object-fit:contain; filter:grayscale(1); opacity:.58; }
.slide__obj-c{ position:absolute; top:0; left:0; width:100%; height:100%; object-fit:contain; object-position:center;
  -webkit-mask-image:radial-gradient(circle at 50% 54%, #000 26%, rgba(0,0,0,.4) 50%, transparent 72%);
  mask-image:radial-gradient(circle at 50% 54%, #000 26%, rgba(0,0,0,.4) 50%, transparent 72%);
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center;
  -webkit-mask-size:0% 0%; mask-size:0% 0%;
  transition:-webkit-mask-size 1.9s var(--ease-out), mask-size 1.9s var(--ease-out); }
.slide__art.lit .slide__obj-c{ -webkit-mask-size:320% 320%; mask-size:320% 320%; }
/* very slow, shallow rock: ~10° total (0° → +5° → 0° → −5° → 0°) */
@keyframes rock{ 0%,100%{ transform:rotate(0deg) } 25%{ transform:rotate(5deg) } 75%{ transform:rotate(-5deg) } }
#approach .objwrap{ animation-duration:26s; animation-delay:-6s }
#work .objwrap{ animation-duration:24s; animation-delay:-3s }
#contact .objwrap{ animation-duration:28s; animation-delay:-9s }
/* click dip: a tiny, quick blip — about as long as a real mouse click */
.slide__art.dip .objwrap{ animation:rock 22s ease-in-out infinite, dip .13s ease-out; }
@keyframes dip{ 0%{ scale:1 } 45%{ scale:.985 } 100%{ scale:1 } }
/* about: framed photo, full colour from load, no rock, no watercolour reveal */
.slide__art--photo .objwrap{ width:min(30vw,360px); height:auto; animation:none; }
.slide__art--photo .slide__obj{ filter:none; opacity:1; border-radius:16px; box-shadow:var(--shadow-md); }
.slide__art--photo .slide__obj-c{ display:none; }

/* yellow watercolour highlight on "interactive experiences" */
.hl{ position:relative; white-space:nowrap; }
.hl::before{ content:""; position:absolute; left:-.16em; right:-.16em; top:.06em; bottom:-.04em; z-index:-1;
  background:radial-gradient(120% 100% at 50% 50%, rgba(231,193,90,.78), rgba(231,193,90,.6) 68%, rgba(231,193,90,0));
  border-radius:47% 53% 56% 44%/ 62% 58% 42% 38%; transform:scaleX(0); transform-origin:left center;
  filter:blur(.5px); mix-blend-mode:multiply; transition:transform .75s var(--ease-out); }
.hl.draw::before{ transform:scaleX(1); }

/* (cover reveal is now part of the universal WAAPI slide transition) */

/* top-right dock: a pill (book menu + up/down) with a chapter dropdown */
.dock{ position:fixed; top:20px; right:24px; bottom:auto; z-index:60;
  display:flex; flex-direction:column; align-items:flex-end; gap:8px; }
.dock__pill{ display:flex; align-items:center; gap:6px; padding:6px 8px;
  background:rgba(251,248,241,.9); backdrop-filter:blur(8px) saturate(120%);
  border:1px solid var(--line); border-radius:999px; box-shadow:var(--shadow-md); }
.dock__menu, .dock .nav__btn{ width:36px; height:36px; border-radius:50%; border:1.5px solid var(--line-strong);
  background:none; display:grid; place-items:center; padding:0; cursor:pointer; color:var(--ink-soft);
  transition:background .2s, border-color .2s, color .2s; }
.dock__menu svg, .dock .nav__btn svg{ width:18px; height:18px; }
.dock__menu:hover, .dock .nav__btn:hover{ background:var(--accent); border-color:var(--accent); color:#fff; }
.dock.open .dock__menu{ background:var(--accent); border-color:var(--accent); color:#fff; }
.dock .nav__btn:disabled{ opacity:.4; pointer-events:none; cursor:default; }
.dock__panel{ display:none; flex-direction:column; gap:1px; min-width:174px; padding:12px 14px;
  background:rgba(251,248,241,.97); backdrop-filter:blur(10px) saturate(120%);
  border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow-lg); }
.dock.open .dock__panel{ display:flex; }
.dock.open .chap, .dock.open .dock__contact{ animation:chapIn .16s var(--ease-out) both; }
.dock.open .chap:nth-child(1){ animation-delay:0s }
.dock.open .chap:nth-child(2){ animation-delay:.018s }
.dock.open .chap:nth-child(3){ animation-delay:.036s }
.dock.open .chap:nth-child(4){ animation-delay:.054s }
.dock.open .chap:nth-child(5){ animation-delay:.072s }
.dock.open .dock__contact{ animation-delay:.09s }
@keyframes chapIn{ from{ opacity:0; transform:translateY(-5px) } to{ opacity:1; transform:none } }
.rail{ position:static; transform:none; left:auto; top:auto; background:none; border:0;
  backdrop-filter:none; box-shadow:none; padding:0; display:flex; flex-direction:column; gap:1px; }
.dock .chap{ flex-direction:row-reverse; justify-content:flex-start; gap:10px; padding:6px 2px; }
.dock .chap__lab{ margin-right:auto; }
.dock__contact{ margin-top:6px; padding-top:10px; border-top:1px solid var(--line);
  font-family:var(--mono); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--accent); text-decoration:none; text-align:right; transition:color .2s; }
.dock__contact:hover{ color:var(--accent-deep); }

/* edge nav: full-width watercolour arc (≤20px apex) with an arrow CUTOUT */
.edge{ position:fixed; left:0; right:0; width:100%; height:44px; z-index:55; border:0; padding:0; cursor:pointer;
  background:rgba(21,122,110,.4);
  -webkit-mask-image:var(--arr), linear-gradient(#000,#000); mask-image:var(--arr), linear-gradient(#000,#000);
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-size:30px 14px, auto; mask-size:30px 14px, auto;
  -webkit-mask-composite:xor; mask-composite:exclude;
  transition:transform .45s var(--ease-out), background .25s; }
.edge:hover{ background:rgba(21,122,110,.6); }
.edge svg{ display:none; }
.edge--top{ top:0; clip-path:ellipse(150% 20px at 50% 0%); transform:translateY(-104%);
  -webkit-mask-position:center 4px, center; mask-position:center 4px, center;
  --arr:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 14'><path d='M4 11 L15 4 L26 11' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>"); }
.edge--bottom{ bottom:0; clip-path:ellipse(150% 20px at 50% 100%); transform:translateY(104%);
  -webkit-mask-position:center calc(100% - 4px), center; mask-position:center calc(100% - 4px), center;
  --arr:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 14'><path d='M4 3 L15 10 L26 3' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>"); }
.edge--top.show, .edge--top.pulse{ transform:translateY(0); }
.edge--bottom.show, .edge--bottom.pulse{ transform:translateY(0); }
.edge[hidden]{ display:none; }

/* WORK — head positioned like the other slides; grids full width */
.slide.proof{ overflow-y:auto; }
.proof__head{ max-width:480px; }
.proof__intro{ max-width:480px; }
.proof__grid{ width:100%; max-width:none; display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(12px,1.3vw,20px); margin-top:clamp(14px,2vh,24px); }
#apps-grid{ grid-template-columns:repeat(4,1fr); max-width:none; }
.proof__tile--soon{ cursor:default; }
.proof__tile--soon .proof__media{ filter:grayscale(.3); }
.proof__open--soon{ color:var(--ink-mute) !important; }
.proof__subhead{ margin-top:clamp(22px,3.4vh,40px); }
.proof__tile{ display:flex; flex-direction:column; }
.proof__media{ aspect-ratio:4/3; flex:none; }
.proof__meta{ padding:11px 13px 14px; }
/* work object: small, tucked at the right edge below the dock */
.slide.proof .slide__art--corner{ position:absolute; left:auto; right:clamp(10px,1.4vw,28px);
  top:60%; bottom:auto; width:min(13vw,150px); place-items:center; }
.slide.proof .slide__art--corner .slide__obj{ width:100%; }
@media (max-width:900px){ .proof__grid, #apps-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .proof__grid, #apps-grid{ grid-template-columns:1fr; } }

/* ABOUT — text top-aligned with the top of the portrait */
.slide.about{ place-items:start start; }
.about__inner{ display:block; max-width:440px; }
.about__inner > p{ max-width:46ch; color:var(--ink-soft); margin:0 0 .85rem; }
.about__inner em{ font-style:italic; color:var(--ink); }
.slide.about .slide__art{ align-items:flex-start; padding-top:clamp(54px,12vh,130px); }

/* =====================================================================
   v3.18 — centered modal loader; reduced-motion safety for JS transitions
   ===================================================================== */
.modal__loader{ position:absolute; inset:0; display:grid; place-items:center; z-index:3;
  background:var(--paper-sink); transition:opacity .35s ease; }
.modal__loader.hide{ opacity:0; pointer-events:none; }
.modal__spinner{ display:block; width:44px; height:44px; border-radius:50%;
  border:3px solid var(--line-strong); border-top-color:var(--accent); animation:spin .8s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg) } }

@media (prefers-reduced-motion:reduce){
  .slide__art{ opacity:1 !important; }
}