/* =========================================================
   Kamila Igambergenova — Architecture as Connection
   Design system: editorial · architectural · cinematic
   Palette: Bone + Ink + Terracotta (+ warm sand neutral)
   ========================================================= */

:root {
  --paper:      #f1ece1;  /* bone */
  --paper-2:    #e7dfce;  /* deeper bone */
  --ink:        #181512;  /* warm near-black */
  --ink-soft:   #4b443b;
  --ink-faint:  #8c8473;
  --clay:       #c1572f;  /* terracotta */
  --clay-deep:  #9c4324;
  --sand:       #d8cbb2;  /* warm secondary neutral */
  --line:       #cdc1aa;
  --blueprint:  #3a4a52;

  --maxw: 1280px;
  --gutter: clamp(20px, 5vw, 90px);

  --serif: "Fraunces", Georgia, serif;
  --sans:  "Space Grotesk", system-ui, sans-serif;
  --mono:  "Space Mono", ui-monospace, monospace;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

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

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  line-height: 1.5;
  overflow-x: clip;
  position: relative;
}

::selection { background: var(--clay); color: var(--paper); }

a { color: inherit; text-decoration: none; }

/* ---------- texture overlays ---------- */
.grain {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  opacity: 0.05; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* thread/knot canvas — confined to the hero only */
#thread-canvas {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  width: 100%; height: 100%;
}

/* keep content above grain */
.nav, section, footer { position: relative; z-index: 2; }

/* =========================================================
   NAV
   ========================================================= */
.nav {
  --nav-bg: #ebe4d4;
  --nav-fg: var(--ink);
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px var(--gutter);
  color: var(--nav-fg);
  background: var(--nav-bg);
  border-bottom: 1px solid rgba(24, 21, 18, 0.08);
  transition:
    padding 0.4s var(--ease),
    background 0.45s var(--ease),
    color 0.35s var(--ease),
    border-color 0.35s var(--ease);
}
body[data-nav="top"] .nav { --nav-bg: #ebe4d4; --nav-fg: var(--ink); }
body[data-nav="selected-work"] .nav { --nav-bg: #e4ddd0; --nav-fg: var(--ink); }
body[data-nav="record"] .nav { --nav-bg: #e7e0d2; --nav-fg: var(--ink); }
body[data-nav="frames"] .nav { --nav-bg: #e2e8e4; --nav-fg: var(--ink); }
body[data-nav="bring"] .nav { --nav-bg: #e9e2d4; --nav-fg: var(--ink); }
body[data-nav="background"] .nav { --nav-bg: #e6dfd1; --nav-fg: var(--ink); }
body[data-nav="contact"] .nav {
  --nav-bg: #221c18;
  --nav-fg: #f1ece1;
  border-bottom-color: rgba(241, 236, 225, 0.12);
}
.nav__brand { display: flex; align-items: baseline; gap: 12px; }
.nav__mono {
  font-family: var(--mono); font-weight: 700; font-size: 1.05rem;
  letter-spacing: 0.05em;
  border: 1.5px solid currentColor; padding: 2px 7px; border-radius: 2px;
}
.nav__name {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.16em;
  text-transform: uppercase;
}
.nav__links { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 40px); }
.nav__links a {
  font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.14em;
  text-transform: uppercase; position: relative; padding: 4px 0;
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 0;
  background: currentColor; transition: width 0.35s var(--ease);
}
.nav__links a:hover::after, .nav__links a.is-active::after { width: 100%; }
.nav__cv { opacity: 0.95; }
.nav__menu { display: none; background: none; border: 0; cursor: pointer; flex-direction: column; gap: 5px; }
.nav__menu span { display: block; width: 26px; height: 2px; background: currentColor; transition: 0.3s; }

/* persistent Full Portfolio control — top right under nav */
.page-portfolio {
  position: fixed;
  top: clamp(58px, 7.5vh, 76px);
  right: var(--gutter);
  z-index: 45;
  display: inline-flex;
  align-items: center;
  font-family: var(--mono);
  font-size: clamp(0.88rem, 1.35vw, 1.12rem);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--clay);
  text-decoration: none;
  padding: clamp(12px, 1.4vw, 16px) clamp(16px, 2vw, 22px);
  border: 1.5px solid var(--clay);
  background: rgba(241, 236, 225, 0.94);
  backdrop-filter: blur(8px);
  transition: color 0.3s var(--ease), background 0.3s var(--ease), border-color 0.3s var(--ease), opacity 0.35s var(--ease);
}
.page-portfolio:hover,
.page-portfolio:focus-visible {
  color: var(--paper);
  background: var(--clay);
  border-color: var(--clay);
  outline: none;
}
body.opener-lock .page-portfolio {
  opacity: 0;
  pointer-events: none;
}
/* Clear the Frames place-jump row (Japan / Texas / India) */
body[data-nav="frames"] .page-portfolio {
  top: clamp(118px, 15vh, 148px);
}
@media (max-width: 560px) {
  .page-portfolio {
    top: auto;
    bottom: 18px;
    right: 16px;
    left: auto;
    font-size: 0.82rem;
    letter-spacing: 0.1em;
    padding: 12px 14px;
  }
  body[data-nav="frames"] .page-portfolio {
    top: auto;
    bottom: 18px;
  }
}

/* scroll progress thread under nav */
.scroll-thread {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 49;
  background: transparent; pointer-events: none;
}
.scroll-thread span {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--clay), var(--clay-deep));
}

/* =========================================================
   HERO  (key-plan entry navigation)
   ========================================================= */
.hero {
  position: relative; overflow: hidden;
  min-height: 88svh;
  padding: 16vh var(--gutter) 5vh;
  display: flex; flex-direction: column; justify-content: center;
}
.hero__intro { position: relative; z-index: 2; }
.hero__eyebrow {
  font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-soft);
  border-top: 1px solid var(--line); padding-top: 16px;
  margin-bottom: clamp(20px, 3.5vh, 40px); display: inline-block;
}
.hero__title {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(1.85rem, 4.6vw, 3.6rem); line-height: 1.08;
  letter-spacing: -0.025em; font-variation-settings: "opsz" 144;
  max-width: 18ch;
}
.hero__title .line { display: block; }
.hero__title em { font-style: italic; font-weight: 400; }
.hero__title .accent { color: var(--clay); font-style: italic; }
.hero__rule { width: 56px; height: 2px; background: var(--clay); margin: clamp(18px,3vh,26px) 0; }
.hero__lede {
  max-width: 52ch;
  font-size: clamp(1rem, 1.4vw, 1.18rem);
  line-height: 1.65; color: var(--ink-soft); font-weight: 300;
}
.hero__seeking {
  margin-top: 16px; max-width: 48ch;
  font-family: var(--mono); font-size: 0.95rem; letter-spacing: 0.025em;
  color: var(--ink); line-height: 1.5;
}
.hero__ctas { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: clamp(22px, 3.5vh, 36px); }
.hero__enter {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--mono); font-size: 0.76rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--clay);
  border-bottom: 1px solid transparent; padding-bottom: 3px; transition: border-color 0.3s var(--ease);
}
.hero__enter:hover { border-color: var(--clay); }
.hero__enter--ghost { color: var(--ink-soft); }
.hero__enter--ghost:hover { color: var(--clay); border-color: var(--clay); }
.hero__enter .cross { font-size: 1rem; }
.hero__foot {
  position: relative; z-index: 2;
  margin-top: auto; padding-top: clamp(24px, 5vh, 60px);
  display: flex; justify-content: flex-start; align-items: flex-end;
  flex-wrap: wrap; gap: 16px;
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-faint);
}
.hero__scrollcue { color: var(--clay); animation: bob 2.4s var(--ease) infinite; }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(6px); } }

/* ---------- knot glyph (thread motif; used at meaningful transitions) ---------- */
.knot { fill: none; stroke: var(--clay); stroke-width: 2; stroke-linecap: round; }
.knot circle { fill: none; }
.knot--title {
  display: inline-block; width: 0.82em; height: auto;
  margin-left: 0.16em; vertical-align: -0.02em;
}
.knot--section { display: block; width: 56px; height: auto; margin: 0 auto clamp(18px, 3vh, 30px); }
.knot--resolved {
  display: block; width: 62px; height: auto; margin: 0 auto clamp(22px, 4vh, 40px);
  stroke: var(--sand);
}
.knot--resolved circle { fill: var(--clay); stroke: var(--clay); }
/* subtle "tie" draw-in for section knots */
.has-motion .knot--section circle, .has-motion .knot--section line { stroke-dasharray: 80; stroke-dashoffset: 80; }
.has-motion .knot--section.is-in circle, .has-motion .knot--section.is-in line { stroke-dashoffset: 0; transition: stroke-dashoffset 1s var(--ease); }

/* ---------- key-plan diagram (the entry navigation) ---------- */
.keyplan { position: relative; z-index: 2; }
.keyplan__svg { width: 100%; height: auto; display: block; overflow: visible; }
.keyplan .gline { stroke: var(--line); stroke-width: 0.8; opacity: calc(1 - var(--unravel, 0)); }
.keyplan .gdot { fill: var(--line); opacity: calc(1 - var(--unravel, 0)); }
.keyplan .connector { fill: none; stroke: var(--clay); stroke-linecap: round; stroke-linejoin: round; }
.keyplan .node-ring { fill: var(--paper); stroke: var(--ink); transition: stroke 0.3s var(--ease); }
.keyplan .knode--dim { opacity: calc(1 - var(--unravel, 0) * 0.85); }
.keyplan .knode--dim .node-ring { stroke: var(--ink-faint); }
.keyplan .knode--main .node-ring { stroke: var(--clay); }
.keyplan .node-label {
  font-family: var(--mono); font-weight: 700; font-size: 15px; letter-spacing: 0.03em;
  fill: var(--ink); opacity: calc(1 - var(--unravel, 0));
}
.keyplan .node-sub { font-family: var(--sans); font-size: 13px; fill: var(--ink-soft); opacity: calc(1 - var(--unravel, 0)); }
.keyplan .knode { cursor: pointer; }
.keyplan .knode:hover .node-ring, .keyplan .knode:focus-visible .node-ring { stroke: var(--clay); }
.keyplan .knode:focus { outline: none; }
.keyplan__caption {
  margin-top: 16px; font-family: var(--mono); font-size: 0.7rem;
  color: var(--ink-faint); max-width: 46ch; line-height: 1.6;
  opacity: calc(1 - var(--unravel, 0));
}
/* dock connectors draw in on entry (opener threads stay static, JS-driven) */
.has-motion .kp-dock .connector { stroke-dasharray: 1; stroke-dashoffset: 1; }
.has-motion .kp-dock.show .connector { stroke-dashoffset: 0; transition: stroke-dashoffset 1.4s var(--ease); }

/* shared button */
.btn {
  font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.1em;
  text-transform: uppercase; padding: 14px 24px; border: 1.5px solid var(--ink);
  transition: 0.3s var(--ease); display: inline-block;
}
.btn:hover { background: var(--ink); color: var(--paper); }
.btn--clay { background: var(--clay); color: var(--paper); border-color: var(--clay); }
.btn--clay:hover { background: var(--clay-deep); border-color: var(--clay-deep); color: var(--paper); }

/* =========================================================
   02 — MANIFESTO  (scroll-revealed statement)
   ========================================================= */
.manifesto {
  max-width: var(--maxw); margin: 0 auto;
  padding: clamp(80px, 16vh, 220px) var(--gutter);
}
.manifesto__label {
  font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-soft);
  display: flex; align-items: center; gap: 12px; margin-bottom: 36px;
}
.manifesto__label span {
  color: var(--clay); border: 1.5px solid var(--clay); width: 34px; height: 34px;
  border-radius: 50%; display: grid; place-items: center; font-size: 0.72rem;
}
.manifesto__text {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(1.8rem, 4.4vw, 4rem); line-height: 1.16; letter-spacing: -0.015em;
  max-width: 22ch;
}
.manifesto__text .word {
  color: var(--ink-faint); opacity: 0.34;
  transition: color 0.5s var(--ease), opacity 0.5s var(--ease);
}
.manifesto__text .word.lit { color: var(--ink); opacity: 1; }
.manifesto__text .word.accent.lit { color: var(--clay); }
/* no-JS / reduced-motion: show full statement */
.manifesto__text:not(.is-split) .word,
.no-motion .manifesto__text .word { color: var(--ink); opacity: 1; }

/* =========================================================
   03 — THE PATH  (pinned image swap + scrolling steps)
   ========================================================= */
.path { max-width: var(--maxw); margin: 0 auto; padding: clamp(40px,8vh,90px) var(--gutter) clamp(60px,11vh,150px); }
.path__intro { max-width: 64ch; margin-bottom: clamp(40px, 7vh, 90px); }
.path__kicker {
  font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-soft);
  display: flex; align-items: center; gap: 12px; margin-bottom: 24px;
}
.path__kicker span {
  color: var(--clay); border: 1.5px solid var(--clay); width: 34px; height: 34px;
  border-radius: 50%; display: grid; place-items: center; font-size: 0.72rem;
}
.path__title {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(2.2rem, 6vw, 5rem); line-height: 1.0; letter-spacing: -0.02em;
  max-width: 16ch;
}
.path__lede { margin-top: 22px; color: var(--ink-soft); font-weight: 300; font-size: clamp(1rem,1.4vw,1.22rem); line-height: 1.6; }

.path__layout { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 5vw, 80px); align-items: start; }
.path__media {
  position: sticky; top: 12vh; height: 76vh; border: 1px solid var(--line);
  overflow: hidden; background: linear-gradient(135deg, var(--paper-2), var(--sand));
}
.path__img { position: absolute; inset: 0; opacity: 0; transition: opacity 0.7s var(--ease); }
.path__img.is-active { opacity: 1; }
.path__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.path__img.is-empty img { display: none; }
.path__img::after {
  content: "Image forthcoming";
  position: absolute; inset: 0; display: none; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-faint); opacity: 0.7; padding: 16px; text-align: center;
}
.path__img.is-empty::after { display: flex; }
.path__imgtag {
  position: absolute; left: 0; bottom: 0; z-index: 2;
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--paper); background: linear-gradient(transparent, rgba(24,21,18,0.66));
  width: 100%; padding: 28px 16px 12px;
}
.path__steps { list-style: none; }
.path__step {
  padding: clamp(30px, 9vh, 90px) 0; border-top: 1px solid var(--line);
  opacity: 0.4; transition: opacity 0.5s var(--ease);
}
.path__steps li:first-child { border-top: 0; }
.path__step.is-active { opacity: 1; }
.path__year { font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--clay); }
.path__step h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.7rem, 3.6vw, 2.8rem); line-height: 1.04; margin: 8px 0 2px; letter-spacing: -0.01em; }
.path__role { font-family: var(--mono); font-size: 0.8rem; color: var(--ink-soft); margin-bottom: 14px; }
.path__step > p:not(.path__role) { color: var(--ink-soft); font-weight: 300; font-size: clamp(0.98rem,1.2vw,1.1rem); line-height: 1.65; max-width: 52ch; }
.path__step > p.path__skill { margin-top: 12px; font-family: var(--mono); font-size: 0.76rem; letter-spacing: 0.03em; line-height: 1.5; color: var(--clay); }

/* =========================================================
   04 — SELECTED WORK  (featured + supporting)
   ========================================================= */
.work-gallery {
  padding: clamp(60px,11vh,150px) 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: var(--paper-2);
}
.work-gallery__head {
  max-width: var(--maxw); margin: 0 auto clamp(36px,6vh,72px);
  padding: 0 var(--gutter); display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
}
.work-gallery__kicker {
  font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-soft);
  display: flex; align-items: center; gap: 12px; margin-bottom: 18px;
}
.work-gallery__kicker span {
  color: var(--clay); border: 1.5px solid var(--clay); width: 34px; height: 34px;
  border-radius: 50%; display: grid; place-items: center; font-size: 0.72rem;
}
.work-gallery__title {
  font-family: var(--serif); font-weight: 300; font-size: clamp(2rem,5vw,4rem);
  line-height: 1; letter-spacing: -0.02em;
}
.work-gallery__lede {
  margin-top: 12px; max-width: 48ch; color: var(--ink-soft); font-weight: 300;
  font-size: clamp(0.98rem, 1.2vw, 1.1rem); line-height: 1.55;
}
.work-gallery__all {
  font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--clay); white-space: nowrap;
}
.work-gallery__all:hover { text-decoration: underline; }

.work-feat {
  max-width: var(--maxw); margin: 0 auto clamp(56px, 10vh, 120px);
  padding: 0 var(--gutter);
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}
.work-feat__media,
.work-sup__media,
.work-card__media {
  position: relative; display: block; overflow: hidden; width: 100%;
  background: linear-gradient(135deg, var(--sand), #cdbfa0); border: 1px solid var(--line);
}
.work-feat__media { aspect-ratio: 5 / 4; min-height: clamp(220px, 36vw, 420px); }
.work-sup__media { aspect-ratio: 4 / 3; min-height: clamp(180px, 28vw, 320px); }
.work-card__media { aspect-ratio: 4 / 5; }
.work-feat__media img,
.work-sup__media img,
.work-card__media img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block; transition: transform 0.7s var(--ease);
}
.work-feat__media:hover img,
.work-sup__media:hover img,
.work-card__media:hover img { transform: scale(1.03); }
.work-feat__media.is-empty img,
.work-sup__media.is-empty img,
.work-card__media.is-empty img { display: none; }
.work-feat__media::after,
.work-sup__media::after,
.work-card__media::after {
  content: "Image forthcoming";
  position: absolute; inset: 0; display: none; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-faint); opacity: 0.7; padding: 14px; text-align: center;
  z-index: 1;
}
.work-feat__media.is-empty::after,
.work-sup__media.is-empty::after,
.work-card__media.is-empty::after { display: flex; }
.work-feat__index {
  position: absolute; top: 16px; left: 18px; z-index: 2;
  font-family: var(--serif); font-style: italic; font-size: 2.2rem; color: var(--paper);
  mix-blend-mode: difference;
}
.work-feat__type {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--clay); margin-bottom: 10px;
}
.work-feat__title {
  font-family: var(--serif); font-weight: 400; font-size: clamp(1.8rem, 3.2vw, 2.8rem);
  line-height: 1.05; margin-bottom: 22px;
}
.work-feat__link, .work-sup__link {
  display: inline-block; margin-top: 18px;
  font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--clay);
}
.work-feat__link:hover, .work-sup__link:hover { text-decoration: underline; }

.work-meta { display: flex; flex-direction: column; gap: 14px; }
.work-meta div { border-top: 1px solid var(--line); padding-top: 12px; }
.work-meta dt {
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-faint); margin-bottom: 4px;
}
.work-meta dd { color: var(--ink-soft); font-weight: 300; font-size: 0.95rem; line-height: 1.5; }
.work-meta--compact { gap: 10px; }
.work-meta--compact dd { font-size: 0.9rem; }

.work-xref {
  margin-top: 16px; font-family: var(--mono); font-size: 0.68rem;
  letter-spacing: 0.04em; color: var(--ink-faint); line-height: 1.5;
}
.work-xref a { color: var(--ink-soft); text-decoration: underline; text-underline-offset: 3px; }
.work-xref a:hover { color: var(--clay); }

.work-support {
  max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter);
  display: flex; flex-direction: column; gap: clamp(48px, 9vh, 100px);
}
.work-sup {
  display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(22px, 3.5vw, 48px);
  align-items: start;
}
.work-sup:nth-child(even) { direction: rtl; }
.work-sup:nth-child(even) > * { direction: ltr; }
.work-sup__type {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--clay); margin-bottom: 8px;
}
.work-sup__body h3 {
  font-family: var(--serif); font-weight: 400; font-size: clamp(1.4rem, 2.4vw, 2rem);
  line-height: 1.08; margin-bottom: 16px;
}

@media (max-width: 720px) {
  .work-feat, .work-sup, .work-sup:nth-child(even) { grid-template-columns: 1fr; direction: ltr; }
}

/* legacy horizontal gallery (work.html / fallback) */
.work-track {
  display: flex; gap: clamp(16px, 2vw, 32px);
  padding: 6px var(--gutter) 26px; overflow-x: auto; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; cursor: grab;
  scrollbar-width: thin; scrollbar-color: var(--clay) transparent;
}
.work-track.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.work-track::-webkit-scrollbar { height: 6px; }
.work-track::-webkit-scrollbar-thumb { background: var(--line); border-radius: 100px; }
.work-track:focus-visible { outline: 2px solid var(--clay); outline-offset: 4px; }
.work-card { flex: 0 0 clamp(280px, 42vw, 460px); scroll-snap-align: start; }
.work-card__index {
  position: absolute; top: 14px; left: 16px; z-index: 2;
  font-family: var(--serif); font-style: italic; font-size: 2rem; color: var(--paper);
  mix-blend-mode: difference;
}
.work-card__body { padding-top: 18px; }
.work-card__body h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.3rem,2.4vw,1.9rem); line-height: 1.05; }
.work-card__node { font-family: var(--mono); font-size: 0.74rem; color: var(--clay); margin: 8px 0 12px; }
.work-card__tags { list-style: none; display: flex; flex-wrap: wrap; gap: 7px; }
.work-card__tags li { font-family: var(--mono); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-soft); border: 1px solid var(--line); border-radius: 100px; padding: 5px 12px; }
.work-card--all {
  flex-basis: clamp(220px, 26vw, 320px); aspect-ratio: auto;
  display: flex; flex-direction: column; justify-content: center; gap: 18px;
  border: 1.5px solid var(--ink); padding: 32px; transition: 0.35s var(--ease); scroll-snap-align: start;
}
.work-card--all:hover { background: var(--ink); color: var(--paper); }
.work-card__allarrow { font-family: var(--serif); font-style: italic; font-size: 3rem; line-height: 1; color: var(--clay); }
.work-card__alltext { font-family: var(--mono); font-size: 0.84rem; letter-spacing: 0.06em; line-height: 1.5; text-transform: uppercase; }

.work-card__facts { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 14px; }
.work-card__facts div { display: grid; grid-template-columns: 72px 1fr; gap: 8px; }
.work-card__facts dt { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); }
.work-card__facts dd { font-size: 0.88rem; color: var(--ink-soft); font-weight: 300; }

/* =========================================================
   06 — BACKGROUND  (education + toolkit + strengths)
   ========================================================= */
.background { max-width: var(--maxw); margin: 0 auto; padding: clamp(70px,13vh,170px) var(--gutter); }
.bg__head { margin-bottom: clamp(40px,7vh,80px); }
.bg__kicker {
  font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-soft);
  display: flex; align-items: center; gap: 12px; margin-bottom: 22px;
}
.bg__kicker span {
  color: var(--clay); border: 1.5px solid var(--clay); width: 34px; height: 34px;
  border-radius: 50%; display: grid; place-items: center; font-size: 0.72rem;
}
.bg__title { font-family: var(--serif); font-weight: 300; font-size: clamp(2rem,5.5vw,4.4rem); line-height: 1; letter-spacing: -0.02em; }
.bg__intro { margin-top: 14px; max-width: 56ch; color: var(--ink-soft); font-weight: 300; font-size: clamp(1rem, 1.2vw, 1.12rem); line-height: 1.55; }
.bg__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px,3.5vw,60px); }
.bg__grid--two { grid-template-columns: 1fr 1fr; }
.bg__label { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--clay); padding-bottom: 16px; margin-bottom: 8px; border-bottom: 2px solid var(--ink); }
.bg__item { padding: 18px 0; border-bottom: 1px solid var(--line); }
.bg__year { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); }
.bg__item h4 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.1rem,1.8vw,1.45rem); line-height: 1.12; margin: 7px 0 4px; }
.bg__item p { color: var(--ink-soft); font-weight: 300; font-size: 0.95rem; }
.bg__honors { color: var(--clay) !important; font-size: 0.85rem !important; margin-top: 6px; }
.bg__skills { display: flex; flex-direction: column; gap: 18px; padding-top: 4px; }
.bg__skills p { color: var(--ink-soft); font-weight: 300; line-height: 1.6; font-size: 0.96rem; }
.bg__skills b { color: var(--ink); font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; }
.bg__strengths { margin-top: clamp(36px, 6vh, 64px); }
.bg__strength-list {
  list-style: none; display: flex; flex-wrap: wrap; gap: 10px 12px; padding-top: 8px;
}
.bg__strength-list li {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink-soft);
  border-bottom: 1px solid var(--line); padding: 8px 2px;
}

/* =========================================================
   CHAPTERS (shared) — legacy (work.html / contact.html)
   ========================================================= */
.chapter {
  max-width: var(--maxw); margin: 0 auto;
  padding: clamp(70px, 14vh, 180px) var(--gutter);
}
.chapter__index {
  font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-soft);
  display: flex; align-items: center; gap: 12px; margin-bottom: 30px;
}
.chapter__index span {
  color: var(--clay); border: 1.5px solid var(--clay);
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; font-size: 0.72rem;
}
.chapter__title {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(2.2rem, 6vw, 5rem); line-height: 1.02;
  letter-spacing: -0.02em; max-width: 18ch;
}
.chapter__sub {
  max-width: 56ch; margin-top: 22px; color: var(--ink-soft);
  font-size: clamp(1rem, 1.4vw, 1.22rem); font-weight: 300; line-height: 1.6;
}

/* ---------- PROLOGUE ---------- */
.prologue__big {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(1.9rem, 5.5vw, 4.4rem); line-height: 1.1;
  letter-spacing: -0.015em; max-width: 20ch; margin: 10px 0 60px;
}
.prologue__big em { font-style: italic; color: var(--clay); }
.prologue__cols {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: clamp(24px, 5vw, 80px); max-width: 980px;
}
.prologue__cols p {
  font-size: clamp(1rem, 1.3vw, 1.16rem); color: var(--ink-soft);
  font-weight: 300; line-height: 1.7;
}
.prologue__cols strong { color: var(--ink); font-weight: 600; }
.prologue__cols em { font-style: italic; color: var(--clay); }

/* ---------- ROUTE / JOURNEY ---------- */
.route { list-style: none; margin: 60px 0 50px; position: relative; }
.route::before {
  content: ""; position: absolute; left: 7px; top: 10px; bottom: 10px;
  width: 2px; background: linear-gradient(var(--clay), var(--line));
}
.route__node {
  position: relative; padding: 0 0 clamp(40px, 6vh, 70px) clamp(40px, 6vw, 80px);
}
.route__node::before {
  content: ""; position: absolute; left: 0; top: 6px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--paper); border: 3px solid var(--clay);
  transition: transform 0.4s var(--ease), background 0.4s var(--ease);
}
.route__node:hover::before { background: var(--clay); transform: scale(1.15); }
.route__year {
  font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--clay);
}
.route__node h3 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.6rem, 3.5vw, 2.6rem); line-height: 1.05;
  margin: 6px 0 2px; letter-spacing: -0.01em;
}
.route__role {
  font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.05em;
  color: var(--ink-soft); margin-bottom: 12px;
}
.route__node > p:last-child {
  max-width: 60ch; color: var(--ink-soft); font-weight: 300;
  font-size: clamp(0.98rem, 1.2vw, 1.1rem); line-height: 1.65;
}

.inline-link {
  display: inline-block; font-family: var(--mono);
  font-size: 0.84rem; letter-spacing: 0.08em; color: var(--ink);
  border-bottom: 2px solid var(--clay); padding-bottom: 4px;
  transition: gap 0.3s, color 0.3s;
}
.inline-link:hover { color: var(--clay); }

/* ---------- EDUCATION ---------- */
.edu {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: clamp(20px, 3vw, 40px); margin-top: 50px;
}
.edu__item {
  border-top: 2px solid var(--ink); padding-top: 22px;
}
.edu__year {
  font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--clay);
}
.edu__item h3 {
  font-family: var(--serif); font-weight: 400; line-height: 1.1;
  font-size: clamp(1.4rem, 2.4vw, 2rem); margin: 10px 0 6px;
}
.edu__school { color: var(--ink-soft); font-size: 0.96rem; margin-bottom: 14px; }
.edu__item > p:not(.edu__school) { color: var(--ink-soft); font-weight: 300; }
.edu__honors { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.edu__honors li {
  font-family: var(--mono); font-size: 0.82rem; color: var(--ink-soft);
  padding-left: 18px; position: relative;
}
.edu__honors li::before { content: "✦"; position: absolute; left: 0; color: var(--clay); }

/* ---------- EXPERIENCE ---------- */
.xp { margin-top: 50px; border-top: 1px solid var(--line); }
.xp__item {
  display: grid; grid-template-columns: minmax(220px, 0.85fr) 1.4fr;
  gap: clamp(16px, 4vw, 60px);
  padding: clamp(26px, 4vh, 44px) 0; border-bottom: 1px solid var(--line);
  transition: background 0.4s var(--ease), padding-left 0.4s var(--ease);
}
.xp__item:hover { background: var(--paper-2); padding-left: 14px; }
.xp__item header h3 {
  font-family: var(--serif); font-weight: 400; line-height: 1.08;
  font-size: clamp(1.25rem, 2.2vw, 1.9rem); margin-bottom: 10px;
}
.xp__where { display: block; color: var(--ink-soft); font-size: 0.92rem; margin-bottom: 4px; }
.xp__when {
  font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--clay);
}
.xp__item ul { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.xp__item li {
  position: relative; padding-left: 22px; color: var(--ink-soft);
  font-weight: 300; line-height: 1.55; font-size: clamp(0.96rem, 1.1vw, 1.06rem);
}
.xp__item li::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 9px; height: 2px; background: var(--clay);
}

/* beyond */
.beyond { margin-top: clamp(50px, 8vh, 90px); }
.beyond__title {
  font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink); margin-bottom: 26px;
}
.beyond__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 44px); }
.beyond__grid > div { border-top: 2px solid var(--clay); padding-top: 16px; }
.beyond__tag {
  display: block; font-family: var(--mono); font-size: 0.74rem;
  letter-spacing: 0.08em; color: var(--clay); margin-bottom: 10px;
}
.beyond__grid p { color: var(--ink-soft); font-weight: 300; font-size: 0.98rem; line-height: 1.6; }

/* ---------- SKILLS ---------- */
.skills__grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(18px, 2.5vw, 36px); margin-top: 50px;
}
.skills__col { border-top: 1px solid var(--line); padding-top: 18px; }
.skills__col h4 {
  font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--clay); margin-bottom: 12px; font-weight: 700;
}
.skills__col p { color: var(--ink-soft); font-weight: 300; line-height: 1.7; }
.skills__note {
  margin-top: 40px; max-width: 64ch; font-family: var(--serif);
  font-style: italic; font-size: clamp(1.1rem, 1.8vw, 1.5rem);
  line-height: 1.5; color: var(--ink); font-weight: 300;
}
.skills__note em { color: var(--clay); font-style: italic; }

/* =========================================================
   CTA
   ========================================================= */
.cta {
  text-align: center; padding: clamp(80px, 18vh, 220px) var(--gutter);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.cta__kicker {
  font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--clay); margin-bottom: 24px;
}
.cta__link {
  display: inline-flex; align-items: center; gap: clamp(16px, 4vw, 50px);
  font-family: var(--serif); font-weight: 300; font-style: italic;
  font-size: clamp(2.8rem, 11vw, 9rem); line-height: 0.95; letter-spacing: -0.02em;
  transition: color 0.4s var(--ease);
}
.cta__link:hover { color: var(--clay); }
.cta__arrow { transition: transform 0.45s var(--ease); font-style: normal; }
.cta__link:hover .cta__arrow { transform: translateX(24px); }
.cta__sub {
  margin-top: 30px; font-family: var(--mono); font-size: 0.84rem;
  letter-spacing: 0.08em; color: var(--ink-soft);
}

/* =========================================================
   FOOTER
   ========================================================= */
.footer {
  background: var(--ink); color: var(--paper);
  padding: clamp(60px, 12vh, 140px) var(--gutter) 40px;
}
.footer__kicker {
  font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: rgba(241,236,225,0.55);
  display: flex; align-items: center; gap: 12px; margin-bottom: 22px;
}
.footer__kicker span {
  color: var(--clay); border: 1.5px solid var(--clay); width: 34px; height: 34px;
  border-radius: 50%; display: grid; place-items: center; font-size: 0.72rem;
}
.footer__statement {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(2rem, 7vw, 6rem); line-height: 1; letter-spacing: -0.02em;
  max-width: 16ch;
}
.footer__cta {
  margin-top: 18px; max-width: 52ch; color: rgba(241,236,225,0.72);
  font-weight: 300; font-size: clamp(1rem, 1.3vw, 1.15rem); line-height: 1.6;
}
.footer__top { margin-bottom: clamp(50px, 9vh, 110px); }
.footer__grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px;
  border-top: 1px solid rgba(239,233,221,0.18); padding-top: 40px;
}
.footer__label {
  display: block; font-family: var(--mono); font-size: 0.72rem;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--clay); margin-bottom: 12px;
}
.footer__grid a {
  font-size: 1.02rem; line-height: 1.9; transition: color 0.3s;
  display: inline-block; min-height: 44px; padding: 4px 0;
}
.footer__grid a:hover { color: var(--clay); }
.footer__grid a:focus-visible { outline: 2px solid var(--clay); outline-offset: 4px; }
.footer__base {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  margin-top: clamp(50px, 8vh, 90px);
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-faint);
}
.footer .knot--resolved { stroke: var(--clay); }

/* =========================================================
   REVEAL ANIMATION
   ========================================================= */
.reveal { opacity: 0; transform: translateY(38px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* =========================================================
   WORK PAGE
   ========================================================= */
.work-hero {
  min-height: 70svh; padding: 22vh var(--gutter) 10vh;
  max-width: var(--maxw); margin: 0 auto;
}
/* six-stage motif (Node → Outcome) — used on the work page */
.stages {
  list-style: none; display: grid; grid-template-columns: repeat(6, 1fr);
  margin-top: clamp(28px, 5vh, 56px); border-top: 1px solid var(--line);
  counter-reset: stage;
}
.stages li {
  font-family: var(--mono); font-size: clamp(0.6rem, 1vw, 0.78rem);
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 14px 0 0; color: var(--ink-faint);
  border-top: 2px solid transparent; margin-top: -1px;
  position: relative; transition: color 0.4s var(--ease);
  counter-increment: stage;
}
.stages li::before {
  content: "0" counter(stage); display: block; color: var(--clay);
  font-size: 0.62rem; margin-bottom: 4px; opacity: 0.7;
}
.stages li:hover { color: var(--ink); border-top-color: var(--clay); }
@media (max-width: 880px) {
  .stages { grid-template-columns: repeat(3, 1fr); }
  .stages li { padding-bottom: 12px; }
}
.work-hero__kicker {
  font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--clay); margin-bottom: 22px;
}
.work-hero h1 {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(3rem, 11vw, 10rem); line-height: 0.92; letter-spacing: -0.02em;
}
.work-hero h1 em { font-style: italic; color: var(--clay); }
.work-hero p {
  max-width: 54ch; margin-top: 30px; color: var(--ink-soft);
  font-size: clamp(1.05rem, 1.5vw, 1.35rem); font-weight: 300; line-height: 1.6;
}

.project {
  max-width: var(--maxw); margin: 0 auto;
  padding: clamp(50px, 10vh, 120px) var(--gutter);
  border-top: 1px solid var(--line);
}
.project__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.project__num {
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: clamp(3rem, 9vw, 8rem); line-height: 0.8; color: var(--clay);
}
.project__tag {
  font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-soft); text-align: right;
}
.project__title {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(2rem, 5.5vw, 4.4rem); line-height: 1; letter-spacing: -0.02em;
  margin: 18px 0 6px;
}
.project__subtitle {
  font-family: var(--mono); font-size: 0.9rem; letter-spacing: 0.06em;
  color: var(--clay); margin-bottom: 34px;
}

/* node strip */
.project__node {
  display: grid; grid-template-columns: auto 1fr; gap: 18px;
  align-items: baseline; background: var(--paper-2);
  border-left: 3px solid var(--clay); padding: 20px 24px; margin-bottom: 40px;
}
.project__node b {
  font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--clay);
}
.project__node span { color: var(--ink); font-weight: 300; font-size: clamp(1rem,1.4vw,1.2rem); }

/* thesis / response grid */
.project__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px,3vw,48px); }
.project__grid > div { border-top: 2px solid var(--ink); padding-top: 16px; }
.project__grid h4 {
  font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--clay); margin-bottom: 12px;
}
.project__grid p { color: var(--ink-soft); font-weight: 300; line-height: 1.6; font-size: 0.98rem; }

/* stage flow */
.flow {
  list-style: none; display: flex; flex-wrap: wrap; gap: 10px;
  margin-top: 38px;
}
.flow li {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-soft);
  border: 1px solid var(--line); border-radius: 100px; padding: 7px 16px;
}
.flow li:nth-child(odd) { border-color: var(--clay); color: var(--clay); }

/* meta facts */
.project__facts {
  display: flex; flex-wrap: wrap; gap: 30px 50px; margin-top: 40px;
  border-top: 1px solid var(--line); padding-top: 26px;
}
.project__facts div span {
  display: block; font-family: var(--mono); font-size: 0.7rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 6px;
}
.project__facts div b { font-weight: 600; font-size: 1.05rem; }

/* PDF viewer */
.portfolio-doc {
  max-width: var(--maxw); margin: 0 auto;
  padding: clamp(60px, 12vh, 140px) var(--gutter);
}
.portfolio-doc__head {
  display: flex; justify-content: space-between; align-items: flex-end;
  flex-wrap: wrap; gap: 20px; margin-bottom: 34px;
}
.portfolio-doc h2 {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(1.8rem, 4vw, 3.2rem); line-height: 1; letter-spacing: -0.02em;
}
.portfolio-doc__actions { display: flex; gap: 14px; flex-wrap: wrap; }
.btn {
  font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.1em;
  text-transform: uppercase; padding: 13px 22px; border: 1.5px solid var(--ink);
  transition: 0.3s var(--ease); display: inline-block;
}
.btn:hover { background: var(--ink); color: var(--paper); }
.btn--clay { background: var(--clay); color: var(--paper); border-color: var(--clay); }
.btn--clay:hover { background: var(--clay-deep); border-color: var(--clay-deep); color: var(--paper); }
.pdf-frame {
  width: 100%; height: 86vh; border: 1px solid var(--line);
  background: var(--paper-2); box-shadow: 0 30px 80px rgba(22,19,15,0.18);
}
.portfolio-doc__note {
  margin-top: 18px; font-family: var(--mono); font-size: 0.78rem;
  color: var(--ink-soft); letter-spacing: 0.04em;
}

/* =========================================================
   CONTACT PAGE
   ========================================================= */
.contact {
  min-height: 100svh; display: flex; flex-direction: column; justify-content: center;
  max-width: var(--maxw); margin: 0 auto; padding: 22vh var(--gutter) 10vh;
}
.contact__kicker {
  font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--clay); margin-bottom: 24px;
}
.contact h1 {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(2.6rem, 9vw, 8rem); line-height: 0.95; letter-spacing: -0.02em;
  max-width: 14ch;
}
.contact h1 em { font-style: italic; color: var(--clay); }
.contact__lead {
  max-width: 50ch; margin-top: 30px; color: var(--ink-soft);
  font-size: clamp(1.05rem, 1.5vw, 1.3rem); font-weight: 300; line-height: 1.6;
}
.contact__links {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
  margin-top: clamp(50px, 8vh, 90px); background: var(--line);
  border: 1px solid var(--line);
}
.contact__links a {
  background: var(--paper); padding: clamp(24px, 4vw, 44px);
  display: flex; flex-direction: column; gap: 8px;
  transition: background 0.4s var(--ease), color 0.4s var(--ease);
}
.contact__links a:hover { background: var(--clay); color: var(--paper); }
.contact__links .c-label {
  font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--clay); transition: color 0.4s;
}
.contact__links a:hover .c-label { color: var(--paper); }
.contact__links .c-value {
  font-family: var(--serif); font-size: clamp(1.3rem, 3vw, 2.2rem);
  font-weight: 300; line-height: 1.1;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 880px) {
  .nav__name { display: none; }
  .nav__menu { display: flex; }
  .nav {
    color: var(--nav-fg);
    background: var(--nav-bg);
  }
  .nav__menu span { background: currentColor; }
  .nav__links {
    position: absolute; top: 100%; right: 0; left: 0;
    flex-direction: column; align-items: flex-start; gap: 0;
    background: var(--nav-bg); border-bottom: 1px solid var(--line);
    max-height: 0; overflow: hidden; transition: max-height 0.4s var(--ease);
  }
  .nav__links.open { max-height: 480px; }
  .nav__links a {
    width: 100%; padding: 16px var(--gutter); font-size: 0.86rem;
    border-top: 1px solid var(--line);
  }
  .nav__links a::after { display: none; }
  .project__grid, .footer__grid, .contact__links { grid-template-columns: 1fr; }
  .project__head { flex-direction: column; }
  .project__tag { text-align: left; }

  /* new sections */
  .path__layout { grid-template-columns: 1fr; gap: 0; }
  .path__media {
    position: relative; top: 0; height: clamp(280px, 56vh, 460px);
    margin-bottom: 10px;
  }
  .path__step { padding: clamp(26px, 5vh, 50px) 0; opacity: 1; }
  .bg__grid { grid-template-columns: 1fr; gap: clamp(34px, 6vh, 60px); }
  .work-card { flex-basis: 78vw; }
}

@media (max-width: 540px) {
  .pdf-frame { height: 70vh; }
  .work-card { flex-basis: 84vw; }
}

/* =========================================================
   FRAMES OF PRACTICE — editorial, image-led story
   Light identity. Sticky chapter rail + scrolling image stage.
   ========================================================= */
.frames { --fpad: clamp(20px, 5vw, 90px); background: var(--paper); color: var(--ink); }

.frames__intro {
  max-width: var(--maxw); margin: 0 auto;
  padding: clamp(70px, 13vh, 170px) var(--fpad) clamp(30px, 5vh, 64px);
}
.frames__kicker {
  font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-soft);
  display: flex; align-items: center; gap: 12px; margin-bottom: 24px;
}
.frames__kicker span {
  color: var(--clay); border: 1.5px solid var(--clay); width: 34px; height: 34px;
  border-radius: 50%; display: grid; place-items: center; font-size: 0.72rem;
}
.frames__title {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(2.6rem, 9vw, 7rem); line-height: 0.95; letter-spacing: -0.02em;
}
.frames__title em { font-style: italic; color: var(--clay); }
.frames__lede {
  max-width: 56ch; margin-top: 22px; color: var(--ink-soft);
  font-size: clamp(1.02rem, 1.5vw, 1.3rem); font-weight: 300; line-height: 1.6;
}
.frames__transition {
  max-width: 52ch; margin-top: 18px; color: var(--ink-soft);
  font-size: clamp(1rem, 1.35vw, 1.18rem); font-weight: 300; line-height: 1.6;
}

/* ---- stage: sticky chapter index + scenes ---- */
.frames__stage {
  max-width: var(--maxw); margin: 0 auto;
  padding: 0 var(--fpad) clamp(70px, 12vh, 150px);
  display: grid; grid-template-columns: minmax(180px, 220px) 1fr;
  gap: clamp(28px, 4vw, 56px); align-items: start;
}
.scenes { max-width: 1040px; margin: 0; min-width: 0; }

.frames-index {
  position: sticky; top: 100px;
  display: flex; flex-direction: column; gap: 4px;
  padding-top: 8px;
}
.frames-index__item {
  display: flex; align-items: baseline; gap: 10px;
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.06em;
  color: var(--ink-faint); padding: 10px 0; border-bottom: 1px solid transparent;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.frames-index__item span { color: var(--clay); font-weight: 700; }
.frames-index__item:hover { color: var(--ink-soft); }
.frames-index__item.is-active {
  color: var(--ink); border-bottom-color: var(--line);
}
.frames-index__item:focus-visible { outline: 2px solid var(--clay); outline-offset: 4px; }

.scene__blocks {
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px 28px;
  margin: 28px 0 36px;
}
.scene__block h4 {
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-faint); margin-bottom: 8px; font-weight: 400;
}
.scene__block p {
  color: var(--ink-soft); font-weight: 300; font-size: 0.95rem; line-height: 1.55;
}
.scene__block--means {
  grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: 18px; margin-top: 4px;
}
.scene__block--means p { color: var(--ink); font-size: 1.02rem; }
.scene__xref { margin-top: 12px; }

@media (max-width: 900px) {
  .frames__stage { grid-template-columns: 1fr; }
  .frames-index {
    position: static; flex-direction: row; flex-wrap: wrap; gap: 8px 18px;
    margin-bottom: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--line);
  }
  .frames-index__item { border-bottom: 0; padding: 6px 0; }
  .scene__blocks { grid-template-columns: 1fr; }
}

/* ---- sticky chapter rail (legacy) ---- */
.rail { position: sticky; top: 96px; align-self: start; }
.rail__nav { position: relative; display: flex; flex-direction: column; padding-left: 22px; }
.rail__line {
  position: absolute; left: 4px; top: 8px; bottom: 8px; width: 2px;
  background: var(--line); overflow: hidden;
}
.rail__line span {
  position: absolute; top: 0; left: 0; width: 100%; height: 0;
  background: var(--clay); transition: height 0.2s linear;
}
.rail__item {
  position: relative; display: flex; align-items: baseline; gap: 12px;
  padding: 12px 0; color: var(--ink-faint);
  transition: color 0.3s var(--ease), padding-left 0.3s var(--ease);
}
.rail__item::before {
  content: ""; position: absolute; left: -22px; top: 50%; transform: translateY(-50%);
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--paper); border: 2px solid var(--line); transition: 0.3s var(--ease);
}
.rail__no { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em; }
.rail__label {
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: clamp(1.2rem, 1.9vw, 1.7rem); line-height: 1;
}
.rail__item:hover { color: var(--ink-soft); }
.rail__item.is-active { color: var(--ink); padding-left: 6px; }
.rail__item.is-active::before { border-color: var(--clay); background: var(--clay); transform: translateY(-50%) scale(1.15); }

/* pinned readout (active chapter takeaway) */
.rail__readouts { position: relative; margin-top: clamp(26px, 4vh, 48px); padding-top: 26px; border-top: 1px solid var(--line); }
.readout {
  position: absolute; top: 26px; left: 0; right: 0;
  opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.readout.is-active { position: relative; opacity: 1; transform: none; pointer-events: auto; }
.readout__loc {
  font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--clay); margin-bottom: 12px;
}
.readout__lesson {
  font-family: var(--serif); font-weight: 300; font-style: italic;
  font-size: clamp(1.2rem, 1.7vw, 1.55rem); line-height: 1.25; color: var(--ink);
}
.readout__tags { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.readout__tags li {
  font-family: var(--mono); font-size: 0.66rem; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--ink-soft);
  border: 1px solid var(--line); border-radius: 100px; padding: 6px 13px;
}

/* ---- scenes ---- */
.scenes { min-width: 0; }
.scene {
  padding-block: clamp(40px, 9vh, 120px); scroll-margin-top: 90px;
  border-top: 1px solid var(--line);
}
.scenes > .scene:first-child { border-top: 0; padding-top: clamp(6px, 2vh, 24px); }
.scene__head { margin-bottom: clamp(22px, 3.5vh, 44px); }
.scene__eyebrow {
  font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--clay); margin-bottom: 14px;
}
.scene__h {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(1.6rem, 3.2vw, 2.9rem); line-height: 1.05;
  letter-spacing: -0.015em; max-width: 24ch; color: var(--ink);
}
.scene__note {
  max-width: 60ch; margin-top: clamp(20px, 3vh, 36px);
  color: var(--ink-soft); font-weight: 300;
  font-size: clamp(1rem, 1.2vw, 1.14rem); line-height: 1.65;
}
.scene__meta { list-style: none; display: flex; flex-wrap: wrap; gap: 14px 30px; margin-top: 26px; border-top: 1px solid var(--line); padding-top: 22px; }
.scene__meta span { display: block; font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 5px; }
.scene__meta b { font-weight: 600; font-size: 1.05rem; }

/* image frame (placeholder-aware) */
.frame-img {
  position: relative; overflow: hidden; display: block; width: 100%;
  background: linear-gradient(135deg, var(--paper-2), #ddd3c0);
  border: 1px solid var(--line);
}
.frame-img--hero { aspect-ratio: 16 / 10; }
.frame-img--still { aspect-ratio: 4 / 3; min-height: 130px; }
.frame-img::after {
  content: "Image forthcoming";
  position: absolute; inset: 0; z-index: 0;
  display: none; align-items: center; justify-content: center;
  padding: 12px; text-align: center;
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-faint); opacity: 0.7;
}
.frame-img.is-empty::after { display: flex; }
.frame-img__scale { position: absolute; inset: 0; z-index: 1; }
.frame-img--hero .frame-img__scale { inset: -6% 0; }
.frame-img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transform: translate3d(0, var(--py, 0px), 0); will-change: transform;
}
.frame-img.is-empty .frame-img__scale { display: none; }
.frame-img figcaption {
  position: absolute; left: 0; bottom: 0; z-index: 3; width: 100%;
  font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--paper);
  padding: 22px 13px 10px;
  background: linear-gradient(transparent, rgba(22,19,15,0.62));
  opacity: 0; transition: opacity 0.4s var(--ease);
}
.frame-img:hover figcaption { opacity: 1; }

/* stills — curated asymmetric rhythm (not a uniform grid) */
.stills {
  margin-top: clamp(20px, 3.5vh, 44px);
  display: grid; grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: clamp(90px, 11vw, 150px); gap: clamp(10px, 1.4vw, 20px);
  grid-auto-flow: dense;
}
.stills .frame-img--still { aspect-ratio: auto; height: 100%; grid-column: span 3; grid-row: span 1; }
.stills .frame-img--still.still--tall { grid-column: span 3; grid-row: span 2; }
.stills .frame-img--still.still--wide { grid-column: span 6; grid-row: span 1; }

/* ---- synthesis (editorial two-column grid) ---- */
.scene--synthesis .scene__h { max-width: 20ch; }
.synthesis {
  list-style: none; margin-top: clamp(16px, 3vh, 36px);
  display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(28px, 4vw, 64px);
}
.synthesis__item {
  display: grid; grid-template-columns: clamp(34px, 4vw, 56px) 1fr;
  column-gap: clamp(14px, 2vw, 26px);
  padding: clamp(20px, 3vh, 30px) 0; border-top: 1px solid var(--line);
  align-items: baseline; transition: padding-left 0.4s var(--ease), background 0.4s var(--ease);
}
.synthesis__item:hover { padding-left: 10px; background: var(--paper-2); }
.synthesis__no { font-family: var(--mono); color: var(--clay); font-size: clamp(0.8rem, 1.3vw, 1.05rem); }
.synthesis__item h4 { font-family: var(--serif); font-weight: 300; font-size: clamp(1.2rem, 2vw, 1.75rem); line-height: 1.12; margin-bottom: 6px; }
.synthesis__item p { color: var(--ink-soft); font-weight: 300; font-size: clamp(0.94rem, 1.05vw, 1.04rem); line-height: 1.5; }
.synthesis__source { font-family: var(--mono); font-size: 0.68rem !important; letter-spacing: 0.02em; color: var(--ink-faint) !important; margin-top: 8px; text-transform: none; }
.synthesis__cta {
  display: inline-flex; align-items: center; gap: 8px; margin-top: clamp(32px, 5vh, 56px);
  font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--clay); border-bottom: 1px solid var(--clay); padding-bottom: 4px;
  transition: gap 0.3s var(--ease), color 0.3s var(--ease);
}
.synthesis__cta:hover { gap: 14px; color: var(--clay-deep); }

/* ---- motion (gated by .has-motion; reduced-motion/no-JS stay visible) ---- */
.has-motion .frame-img { clip-path: inset(0 0 100% 0); }
.has-motion .scene.is-in .frame-img { clip-path: inset(0 0 0 0); transition: clip-path 1s var(--ease); }
.has-motion .frame-img__scale { transform: scale(1.05); }
.has-motion .scene.is-in .frame-img__scale { transform: scale(1); transition: transform 1.4s var(--ease); }
.has-motion .stills .frame-img:nth-child(2) { transition-delay: 0.07s; }
.has-motion .stills .frame-img:nth-child(3) { transition-delay: 0.14s; }
.has-motion .stills .frame-img:nth-child(4) { transition-delay: 0.21s; }
.has-motion .stills .frame-img:nth-child(5) { transition-delay: 0.28s; }

.has-motion .scene__head > *, .has-motion .scene__note, .has-motion .scene__meta {
  opacity: 0; transform: translateY(16px);
}
.has-motion .scene.is-in .scene__head > *,
.has-motion .scene.is-in .scene__note,
.has-motion .scene.is-in .scene__meta {
  opacity: 1; transform: none; transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.has-motion .scene.is-in .scene__h { transition-delay: 0.12s; }
.has-motion .scene.is-in .scene__note { transition-delay: 0.18s; }
.has-motion .scene.is-in .scene__meta { transition-delay: 0.24s; }

.has-motion .synthesis__item { opacity: 0; transform: translateY(16px); }
.has-motion .scene--synthesis.is-in .synthesis__item { opacity: 1; transform: none; transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.has-motion .scene--synthesis.is-in .synthesis__item:nth-child(2) { transition-delay: 0.07s; }
.has-motion .scene--synthesis.is-in .synthesis__item:nth-child(3) { transition-delay: 0.14s; }
.has-motion .scene--synthesis.is-in .synthesis__item:nth-child(4) { transition-delay: 0.21s; }
.has-motion .scene--synthesis.is-in .synthesis__item:nth-child(5) { transition-delay: 0.28s; }
.has-motion .scene--synthesis.is-in .synthesis__item:nth-child(6) { transition-delay: 0.35s; }

/* =========================================================
   STORYTELLING REFINEMENTS (structure pass)
   ========================================================= */
/* work-card mini fields: Role / Output / Skill */
.work-card__facts { margin: 0 0 14px; display: grid; gap: 7px; }
.work-card__facts > div {
  display: grid; grid-template-columns: 4.2rem 1fr; gap: 10px; align-items: baseline;
}
.work-card__facts dt {
  font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-faint);
}
.work-card__facts dd {
  font-size: 0.82rem; line-height: 1.35; color: var(--ink-soft); margin: 0;
}

/* transition sentence that hands off Path → Frames */
.frames__transition {
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: clamp(1.15rem, 2.1vw, 1.7rem); line-height: 1.4;
  color: var(--ink); max-width: 40ch; margin-top: 22px;
}
.frames__transition + .frames__lede { margin-top: 16px; }

/* India = feature chapter: subtle terracotta emphasis */
.scene--feature .scene__h { color: var(--clay-deep); }
.scene--feature .scene__note {
  border-left: 2px solid var(--clay); padding-left: clamp(16px, 2vw, 26px);
}
.scene--feature .scene__meta b { color: var(--clay-deep); }

/* background intro line */
.bg__intro {
  margin-top: 18px; max-width: 60ch; color: var(--ink-soft);
  font-weight: 300; font-size: clamp(1rem, 1.4vw, 1.2rem); line-height: 1.6;
}

/* contact opportunity CTA */
.footer__cta {
  margin-top: 24px; max-width: 46ch; color: var(--paper);
  font-weight: 300; font-size: clamp(1rem, 1.5vw, 1.28rem); line-height: 1.6;
  opacity: 0.86;
}

/* =========================================================
   FRAMES — hero-led chapter layout + horizontal drag strips
   ========================================================= */
.scene { border-top: 0; padding-block: clamp(28px, 5vh, 70px); }
.scenes > .scene:first-child { padding-top: clamp(4px, 2vh, 18px); }

/* full-bleed chapter hero (overrides 16/10 aspect) */
.scene__hero.frame-img--hero {
  aspect-ratio: auto; height: clamp(300px, 62vh, 640px);
  margin-bottom: clamp(24px, 4vh, 52px);
}
.scene__hero .scene__herolabel {
  position: absolute; left: 18px; bottom: 18px; z-index: 3;
  width: auto; max-width: calc(100% - 36px); margin: 0; padding: 8px 14px;
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--paper);
  background: rgba(24,19,15,0.5); backdrop-filter: blur(5px);
  opacity: 1;
}

/* horizontal image strip (drag to scroll) */
.strip-block { margin-top: clamp(26px, 4vh, 50px); }
.strip__label {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-faint); margin-bottom: 14px;
}
.strip {
  display: flex; gap: clamp(8px, 1vw, 14px);
  overflow-x: auto; padding-bottom: 12px;
  scrollbar-width: none; cursor: grab; scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.strip::-webkit-scrollbar { display: none; }
.strip.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.strip .frame-img {
  flex: 0 0 auto; aspect-ratio: auto;
  height: clamp(230px, 34vh, 360px); width: clamp(240px, 30vw, 340px);
  scroll-snap-align: start;
}
.strip .frame-img.strip--tall { width: clamp(180px, 22vw, 250px); }
.strip .frame-img.strip--wide { width: clamp(360px, 46vw, 540px); }
.strip .frame-img figcaption { opacity: 0; }
.strip .frame-img:hover figcaption { opacity: 1; }

/* quote callout that lives inside the strip */
.strip__callout {
  flex: 0 0 auto; width: clamp(220px, 26vw, 300px); height: clamp(230px, 34vh, 360px);
  display: flex; flex-direction: column; justify-content: flex-end;
  border-left: 2px solid var(--clay); padding: 0 0 16px 22px;
}
.strip__calloutlabel {
  font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-faint); margin-bottom: 12px;
}
.strip__quote {
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: clamp(1.05rem, 1.5vw, 1.32rem); line-height: 1.4; color: var(--ink);
}

/* "what I carry" — reuse Selected Works tag styling */
.scene__carry {
  margin-top: clamp(26px, 4vh, 48px); padding-top: clamp(20px, 3vh, 30px);
  border-top: 1px solid var(--line);
}
.carry__label {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--clay); margin-bottom: 16px;
}
.scene__facts { max-width: 540px; margin-bottom: 20px; gap: 10px; }
.scene__facts > div { grid-template-columns: 5rem 1fr; }
.scene__facts dt { font-size: 0.64rem; }
.scene__facts dd { font-size: 0.92rem; }
.scene__tags li { font-size: 0.7rem; padding: 7px 15px; }

/* thread connector between chapters */
.scene__connector { position: relative; height: clamp(44px, 7vh, 78px); }
.scene__connector::before {
  content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px;
  background: var(--line); transform: translateX(-50%) scaleY(1); transform-origin: top;
}

/* ---- advanced motion (gated by .has-motion) ---- */
.has-motion .scene__herolabel { opacity: 0; transform: translateY(14px); }
.has-motion .scene.is-in .scene__herolabel {
  opacity: 1; transform: none;
  transition: opacity 0.6s var(--ease) 0.32s, transform 0.6s var(--ease) 0.32s;
}
.has-motion .strip-block, .has-motion .scene__carry {
  opacity: 0; transform: translateY(20px);
}
.has-motion .scene.is-in .strip-block,
.has-motion .scene.is-in .scene__carry {
  opacity: 1; transform: none;
  transition: opacity 0.75s var(--ease) 0.26s, transform 0.75s var(--ease) 0.26s;
}
.has-motion .strip .frame-img:nth-child(2) { transition-delay: 0.06s; }
.has-motion .strip .frame-img:nth-child(3) { transition-delay: 0.12s; }
.has-motion .strip .frame-img:nth-child(4) { transition-delay: 0.18s; }
.has-motion .strip .frame-img:nth-child(5) { transition-delay: 0.24s; }
.has-motion .strip .frame-img:nth-child(6) { transition-delay: 0.30s; }
.has-motion .strip .frame-img:nth-child(7) { transition-delay: 0.36s; }
/* strip image hover push-in */
.has-motion .scene.is-in .strip .frame-img:hover .frame-img__scale {
  transform: scale(1.05); transition: transform 0.6s var(--ease);
}
/* connector draws in */
.has-motion .scene__connector::before { transform: translateX(-50%) scaleY(0); }
.has-motion .scene__connector.is-in::before {
  transform: translateX(-50%) scaleY(1); transition: transform 0.7s var(--ease);
}

/* ---- frames responsive ---- */
@media (max-width: 900px) {
  .frames__stage { grid-template-columns: 1fr; gap: clamp(12px, 2vh, 24px); }
  .frames-index {
    position: static !important; flex-direction: row; flex-wrap: wrap; gap: 8px 18px;
    margin-bottom: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--line);
  }
  .frames-index__item { border-bottom: 0; padding: 6px 0; }
  .scene__blocks { grid-template-columns: 1fr; }
  .rail { display: none; }

  .scene__hero.frame-img--hero { height: clamp(240px, 44vh, 420px); }
  .scene__connector { display: none; }
  .synthesis { grid-template-columns: 1fr; column-gap: 0; }
  .strip .frame-img { height: clamp(200px, 52vw, 300px); width: clamp(210px, 62vw, 300px); }
  .strip .frame-img.strip--tall { width: clamp(160px, 46vw, 220px); }
  .strip .frame-img.strip--wide { width: clamp(300px, 82vw, 440px); }
  .strip__callout { width: clamp(200px, 64vw, 280px); height: clamp(200px, 52vw, 300px); }
}

/* =========================================================
   FULL-PAGE OPENER (the key plan is the entry; threads are
   tangled at Practice, untangle, run to the chosen node, then
   that node lights up and floods the page before the section)
   ========================================================= */
.opener {
  position: fixed; inset: 0; z-index: 200; background: var(--paper);
  display: flex; align-items: center; justify-content: center;
  padding: clamp(10px, 2vh, 28px); overflow: hidden;
  transition: opacity 0.7s var(--ease);
}
.opener[hidden] { display: none; }
.opener.is-gone { opacity: 0; pointer-events: none; }
body.opener-lock { overflow: hidden; }

/* fine dotted grid fills the whole page, like an architectural sheet */
.opener::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(rgba(24, 21, 18, 0.13) 1.15px, transparent 1.15px);
  background-size: clamp(38px, 3.4vw, 46px) clamp(38px, 3.4vw, 46px);
  transition: opacity 0.6s var(--ease);
}
.opener.is-choosing::before { opacity: 0; }

.opener__plan { position: relative; z-index: 2; width: min(94vw, 92vh); max-width: 100%; height: min(94vw, 92vh); }
.opener__plan .keyplan__svg { width: 100%; height: 100%; overflow: visible; }
.opener__cue {
  position: fixed; left: 50%; bottom: clamp(18px, 3.5vh, 40px); transform: translateX(-50%);
  z-index: 3; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-faint); opacity: 0.9;
  animation: bob 2.6s var(--ease) infinite; pointer-events: none; text-align: center;
}

/* --- key-plan drawing --- */
.plan-ref circle { fill: none; stroke: var(--ink-faint); stroke-width: 1; }
.plan-ref text {
  fill: var(--ink-faint); font-family: var(--mono); font-size: 15px;
  text-anchor: middle; dominant-baseline: middle;
}
.plan-tick path { stroke: var(--ink-faint); stroke-width: 1; opacity: 0.55; }
.plan-wall { fill: none; stroke: var(--ink); stroke-width: 1.7; stroke-linejoin: miter; }
.plan-stair path { fill: none; stroke: var(--ink); stroke-width: 1; }
.plan-num { fill: var(--clay); font-family: var(--mono); font-weight: 700; font-size: 27px; }
.plan-label { fill: var(--ink); font-family: var(--sans); font-size: 18px; font-weight: 400; }

.node-ring { fill: var(--paper); stroke: var(--ink); stroke-width: 1.7; }
.node-dot { fill: var(--ink); }
.node-dot--focus { fill: var(--clay); }

.opener__loose { fill: none; stroke: var(--ink-faint); stroke-width: 1.5; stroke-dasharray: 2 8; stroke-linecap: round; opacity: 0.7; }
.loose-end { fill: var(--paper); stroke: var(--ink-faint); stroke-width: 1.5; }

.connector { fill: none; stroke: var(--clay); }
.knode { cursor: pointer; }
.knode .node-dot, .knode .node-ring, .knode .plan-num, .knode .plan-label {
  transition: fill 0.35s var(--ease), stroke 0.35s var(--ease);
}
.knode:hover:not(.room--focus) .node-dot { fill: var(--clay); }
.knode:hover .node-ring { stroke: var(--clay); }
.knode:focus-visible { outline: none; }
.knode:focus-visible .node-ring { stroke: var(--clay); stroke-width: 2.4; }

/* the expanding flood */
.opener__fill {
  position: fixed; width: 320vmax; height: 320vmax; border-radius: 50%;
  background: var(--clay); z-index: 4; pointer-events: none;
  transform: translate(-50%, -50%) scale(0);
}
.opener.is-filling .opener__fill {
  transform: translate(-50%, -50%) scale(1);
  transition: transform 0.75s cubic-bezier(0.66, 0, 0.34, 1);
}

/* PHASE A — grid, titleblock, loose thread and non-chosen rooms recede */
.opener.is-choosing .plan-ref,
.opener.is-choosing .opener__loose,
.opener.is-choosing .loose-end,
.opener.is-choosing .knode:not(.is-chosen),
.opener.is-choosing .connector:not(.is-chosen),
.opener.is-choosing .opener__cue { opacity: 0; transition: opacity 0.55s var(--ease); }

/* PHASE B — chosen thread only lights while/after it draws
   (no pre-animation flash; stroke-dashoffset driven inline by JS) */
.opener .connector.is-chosen {
  stroke: var(--clay);
  stroke-width: 2.6;
}
.opener.is-threading .connector.is-chosen,
.opener.is-lit .connector.is-chosen {
  stroke-width: 5;
  filter: drop-shadow(0 0 6px rgba(193, 87, 47, 0.55));
}

/* PHASE C — only then does the chosen room's node light up */
.opener .knode.is-chosen .node-dot, .opener .knode.is-chosen .node-ring {
  transition: fill 0.4s var(--ease), stroke 0.4s var(--ease), filter 0.4s var(--ease);
}
.opener.is-lit .knode.is-chosen .node-dot {
  fill: var(--clay); filter: drop-shadow(0 0 13px rgba(193, 87, 47, 0.8));
}
.opener.is-lit .knode.is-chosen .node-ring { stroke: var(--clay); }

/* =========================================================
   DOCKED KEY-PLAN (thread's corner marker / persistent nav)
   ========================================================= */
.kp-dock {
  position: fixed; left: 20px; bottom: 20px; z-index: 40; width: 150px;
  background: rgba(241,236,225,0.9); backdrop-filter: blur(9px);
  border: 1px solid var(--line); border-radius: 12px; padding: 11px 13px 9px;
  opacity: 0; transform: translateY(12px) scale(0.9); pointer-events: none;
  transition: opacity 0.5s var(--ease), transform 0.5s cubic-bezier(0.34,1.4,0.64,1);
  box-shadow: 0 16px 34px -22px rgba(24,21,18,0.4);
}
.kp-dock.show { opacity: 1; transform: none; pointer-events: auto; }
.kp-dock__svg { width: 100%; height: auto; display: block; overflow: visible; }
.kp-dock__tag {
  font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-faint); margin-top: 6px;
}
.kp-dock .connector { fill: none; stroke: var(--line); stroke-width: 1.2; }
.kp-node { cursor: pointer; }
.kp-node .kp-dot { fill: var(--paper); stroke: var(--ink-faint); stroke-width: 1.5; transition: fill 0.4s var(--ease), stroke 0.4s var(--ease), r 0.3s var(--ease); }
.kp-node .kp-tangle { fill: none; stroke: var(--ink-faint); stroke-width: 1.5; opacity: 0.85; transition: opacity 0.45s var(--ease); }
.kp-node .kp-name { font-family: var(--mono); font-size: 8px; fill: var(--ink-soft); transition: fill 0.3s; }
.kp-node:hover .kp-dot { stroke: var(--clay); }
.kp-node:hover .kp-name { fill: var(--ink); }
/* untangle states: tangled → active (highlight) → passed (resolved dot) */
.kp-node.is-active .kp-tangle { opacity: 0; }
.kp-node.is-active .kp-dot { fill: var(--clay); stroke: var(--clay); }
.kp-node.is-active .kp-name { fill: var(--clay-deep); font-weight: 700; }
.kp-node.is-passed .kp-tangle { opacity: 0; }
.kp-node.is-passed .kp-dot { fill: var(--ink); stroke: var(--ink); }
@media (max-width: 900px) { .kp-dock { display: none; } }

/* =========================================================
   INTER-SECTION THREAD SEAMS
   ========================================================= */
.seam { position: relative; z-index: 2; height: clamp(50px, 8vh, 104px); display: flex; justify-content: center; }
.seam__svg { width: 42px; height: 100%; display: block; overflow: visible; }
.seam__path { fill: none; stroke: var(--clay); stroke-width: 2; opacity: 0.4; stroke-linecap: round; }
.has-motion .seam__path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.has-motion .seam.is-in .seam__path { stroke-dashoffset: 0; transition: stroke-dashoffset 0.95s var(--ease); }
.no-motion .seam__path { stroke-dashoffset: 0; }

/* =========================================================
   RECORD (schedule table — factual ledger)
   ========================================================= */
.record { max-width: var(--maxw); margin: 0 auto; padding: clamp(30px,6vh,80px) var(--gutter) clamp(40px,8vh,96px); }
.record__head { max-width: 660px; margin-bottom: clamp(30px, 5vh, 52px); }
.record__kicker {
  font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-soft);
  display: flex; align-items: center; gap: 12px; margin-bottom: 22px;
}
.record__kicker span {
  color: var(--clay); border: 1.5px solid var(--clay); width: 34px; height: 34px;
  border-radius: 50%; display: grid; place-items: center; font-size: 0.72rem;
}
.record__title { font-family: var(--serif); font-weight: 300; font-size: clamp(2rem, 5vw, 3.8rem); line-height: 1.02; letter-spacing: -0.02em; }
.record__lede { margin-top: 14px; max-width: 60ch; color: var(--ink-soft); font-weight: 300; font-size: clamp(1rem, 1.3vw, 1.18rem); line-height: 1.6; }

.schedule { border: 1px solid var(--line); border-radius: 4px; overflow: hidden; background: var(--paper); min-width: 0; }
.sched-head, .sched-row {
  display: grid; grid-template-columns: minmax(110px, 150px) minmax(0, 1.5fr) minmax(0, 1.6fr) 72px; gap: clamp(14px, 2vw, 24px);
  padding: 16px clamp(16px, 2vw, 28px); align-items: center;
}
.sched-head {
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-faint); background: var(--paper-2);
}
.sched-row { border-top: 1px solid var(--line); transition: background 0.3s var(--ease); }
.sched-row:hover { background: var(--paper-2); }
.sched-row__dates { font-family: var(--mono); font-size: 0.74rem; color: var(--ink-faint); }
.sched-row__role b { font-family: var(--serif); font-weight: 500; font-size: 1.06rem; display: block; line-height: 1.2; }
.sched-row__role span { font-size: 0.84rem; color: var(--ink-soft); }
.sched-row__note { font-size: 0.88rem; color: var(--ink-soft); line-height: 1.5; }
.sched-xref {
  display: inline; color: var(--ink-faint); font-family: var(--mono); font-size: 0.72rem;
  text-decoration: underline; text-underline-offset: 2px;
}
.sched-xref:hover { color: var(--clay); }
.sched-row__type { justify-self: end; }

.rtag {
  font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 4px; border: 1px solid currentColor; white-space: nowrap;
  display: inline-block; font-weight: 700;
}
.rtag--a { color: var(--blueprint); background: rgba(58,74,82,0.10); }
.rtag--b { color: #6a4a86; background: rgba(106,74,134,0.12); }
.rtag--c { color: #4f6a3a; background: rgba(79,106,58,0.12); }

.legend { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 22px; font-family: var(--mono); font-size: 0.7rem; color: var(--ink-soft); }
.legend span { display: inline-flex; align-items: center; gap: 8px; }
.legend__sw { width: 12px; height: 12px; border-radius: 3px; border: 1px solid; }
.legend__sw--a { background: rgba(58,74,82,0.15); border-color: var(--blueprint); }
.legend__sw--b { background: rgba(106,74,134,0.15); border-color: #6a4a86; }
.legend__sw--c { background: rgba(79,106,58,0.15); border-color: #4f6a3a; }

.record__resume-wrap { margin-top: 20px; }
.record__resume {
  display: inline-block;
  font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--clay); border-bottom: 1px solid transparent; padding-bottom: 2px;
}
.record__resume:hover { border-color: var(--clay); }

@media (max-width: 820px) {
  .hero__grid { grid-template-columns: 1fr; gap: 34px; }
  .keyplan { order: 2; max-width: 460px; }
  .bg__grid, .bg__grid--two { grid-template-columns: 1fr; gap: clamp(34px, 6vh, 60px); }
}
@media (max-width: 900px) {
  .sched-head { display: none; }
  .sched-row {
    grid-template-columns: 1fr; gap: 8px; padding: 18px 18px;
  }
  .sched-row__type { justify-self: start; }
  .sched-row__dates { order: -1; }
  .schedule { overflow-x: hidden; }
  .legend { flex-direction: column; gap: 10px; }
}

/* footer becomes the resolved endpoint */
.footer { position: relative; }
.footer .knot--resolved { position: relative; z-index: 2; }

/* =========================================================
   WHAT I BRING TO PRACTICE
   ========================================================= */
.bring {
  max-width: var(--maxw); margin: 0 auto;
  padding: clamp(60px, 11vh, 140px) var(--gutter);
}
.bring__head { max-width: 640px; margin-bottom: clamp(36px, 6vh, 72px); }
.bring__kicker {
  font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-soft);
  display: flex; align-items: center; gap: 12px; margin-bottom: 22px;
}
.bring__kicker span {
  color: var(--clay); border: 1.5px solid var(--clay); width: 34px; height: 34px;
  border-radius: 50%; display: grid; place-items: center; font-size: 0.72rem;
}
.bring__title {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(2rem, 5vw, 3.8rem); line-height: 1.05; letter-spacing: -0.02em;
}
.bring__lede {
  margin-top: 14px; color: var(--ink-soft); font-weight: 300;
  font-size: clamp(1rem, 1.2vw, 1.12rem); line-height: 1.55; max-width: 48ch;
}
.bring__list {
  list-style: none; max-width: 860px;
  border-left: 1.5px solid var(--line); padding-left: clamp(20px, 3vw, 36px);
  display: flex; flex-direction: column; gap: clamp(28px, 4.5vh, 48px);
}
.bring__item h3 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.35rem, 2.4vw, 1.9rem); line-height: 1.15; margin-bottom: 8px;
}
.bring__item p {
  color: var(--ink-soft); font-weight: 300;
  font-size: clamp(0.98rem, 1.15vw, 1.08rem); line-height: 1.55; max-width: 52ch;
}
.has-motion .bring__item.reveal { transition-delay: 0s; }
.has-motion .bring__item.reveal:nth-child(2) { transition-delay: 0.06s; }
.has-motion .bring__item.reveal:nth-child(3) { transition-delay: 0.12s; }
.has-motion .bring__item.reveal:nth-child(4) { transition-delay: 0.18s; }
.has-motion .bring__item.reveal:nth-child(5) { transition-delay: 0.24s; }

/* =========================================================
   ANCHOR SCROLL OFFSET (fixed nav)
   ========================================================= */
#selected-work, #record, #frames-of-practice,
#background, #contact,
#frame-japan, #frame-texas, #frame-india,
#community-room, #the-cove, #village-in-the-city, #the-wave,
#p01, #p02, #p03, #p04 {
  scroll-margin-top: 88px;
}
.anchor-alias { display: block; height: 0; width: 0; overflow: hidden; }

/* =========================================================
   REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}