/* Sora and Manrope, self-hosted (SIL Open Font License). */
@font-face { font-family: "Sora"; font-style: normal; font-weight: 100 800; font-display: swap; src: url("../fonts/sora-latin-wght-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Sora"; font-style: normal; font-weight: 100 800; font-display: swap; src: url("../fonts/sora-latin-ext-wght-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("../fonts/manrope-latin-wght-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("../fonts/manrope-latin-ext-wght-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

/* Layout: one editorial scroll on a 12-column grid. Left-aligned, asymmetric,
   alternating Deep Charcoal photo chapters with Bone breathing room.
   The "I am" line from the hero returns as the label of every chapter. */
:root {
  color-scheme: light;
  /* Deep Coastal palette */
  --charcoal: #171817;
  --warm-black: #232321;
  --bone: #F2EEE7;
  --stone: #A79D90;
  --sand: #C8B498;
  --bronze: #B9895A;
  --bronze-deep: #8F6238; /* bronze darkened for text on Bone */
  --bone-dim: rgba(242, 238, 231, 0.68);
  --bone-line: rgba(242, 238, 231, 0.16);
  --ink-dim: rgba(35, 35, 33, 0.72);
  --ink-line: rgba(35, 35, 33, 0.16);

  /* Type */
  --display: "Sora", "Manrope", "Inter", "Helvetica Neue", Arial, sans-serif;
  --body: "Manrope", "Inter", "Helvetica Neue", Arial, sans-serif;
  --fs-iam: clamp(4.75rem, 13.2vw, 13rem);
  --fs-h1: clamp(2.75rem, 6vw, 5.5rem);
  --fs-title: clamp(2.25rem, 4.6vw, 4.25rem);
  --fs-h2: clamp(1.75rem, 3.1vw, 2.875rem);
  --fs-intro: clamp(1.1875rem, 1.55vw, 1.5rem);
  --fs-body: clamp(1.0625rem, 1.1vw, 1.1875rem);
  --fs-label: 0.875rem;

  /* Space */
  --gutter: clamp(1.25rem, 4.6vw, 4.5rem);
  --max: 90rem;
  --section: clamp(5rem, 11vw, 10.5rem);
  --ease: cubic-bezier(0.2, 0.7, 0.1, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--charcoal);
  color: var(--bone);
  font-family: var(--body);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  overflow-x: clip;
}
img, video, svg { display: block; max-width: 100%; }
img, video { height: auto; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--bronze); outline-offset: 4px; }
::selection { background: var(--bronze); color: var(--charcoal); }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
a.vh:focus { z-index: 100; top: 0.75rem; left: 0.75rem; width: auto; height: auto; clip-path: none; padding: 0.75rem 1rem; background: var(--bone); color: var(--charcoal); font-weight: 600; text-decoration: none; }

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1rem, 2vw, 2rem); }

/* Surfaces */
.dark { background: var(--charcoal); color: var(--bone); }
.dark--warm { background: var(--warm-black); }
.light { background: var(--bone); color: var(--warm-black); }
[id] { scroll-margin-top: 4.5rem; }

/* Type roles */
.label {
  font-family: var(--body); font-weight: 600; font-size: var(--fs-label);
  letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.2;
}
.dark .label { color: var(--sand); }
.light .label { color: var(--bronze-deep); }
.h1 { font-family: var(--display); font-weight: 500; font-size: var(--fs-h1); line-height: 1; letter-spacing: -0.025em; text-wrap: balance; }
.title { font-family: var(--display); font-weight: 500; font-size: var(--fs-title); line-height: 1.02; letter-spacing: -0.02em; text-wrap: balance; }
.h2 { font-family: var(--display); font-weight: 500; font-size: var(--fs-h2); line-height: 1.12; letter-spacing: -0.015em; text-wrap: balance; }
.intro { font-size: var(--fs-intro); line-height: 1.45; text-wrap: pretty; }
.copy { max-width: 34em; text-wrap: pretty; }
.dark .copy, .dark .intro--dim { color: var(--bone-dim); }
.light .copy { color: var(--ink-dim); }
.stack { display: flex; flex-direction: column; gap: var(--stack, 1.5rem); align-items: flex-start; }

/* The chapter opener: small "I am", large role. */
.chapter { display: flex; flex-direction: column; gap: 0.9rem; }
.chapter__iam { display: flex; align-items: center; gap: 0.9rem; font-size: 0.9375rem; }
.chapter__iam::after { content: ""; width: 3.5rem; height: 1px; background: currentColor; opacity: 0.6; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 0.85rem;
  font-family: var(--body); font-weight: 600; font-size: 0.8125rem; letter-spacing: 0.11em; text-transform: uppercase; line-height: 1.2;
  text-decoration: none; padding: 1.05rem 1.5rem; border-radius: 2px; border: 1px solid transparent;
  transition: background-color 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s var(--ease);
  cursor: pointer;
}
.btn svg { width: 1.05rem; height: 1.05rem; flex: none; transition: transform 0.35s var(--ease); }
.btn:hover svg { transform: translateX(4px); }
.btn--down:hover svg { transform: translateY(4px); }
.btn--bone { background: var(--bone); color: var(--charcoal); }
.btn--bone:hover { background: var(--bronze); color: var(--charcoal); }
.btn--ghost { border-color: var(--bone-line); color: var(--bone); }
.btn--ghost:hover { background: var(--bone); color: var(--charcoal); border-color: var(--bone); }
.btn--ink { border-color: var(--warm-black); color: var(--warm-black); }
.btn--ink:hover { background: var(--charcoal); color: var(--bone); }
.textlink {
  display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none;
  font-weight: 600; font-size: 0.8125rem; letter-spacing: 0.11em; text-transform: uppercase;
  padding-block: 0.45rem; border-bottom: 1px solid currentColor;
  transition: color 0.3s var(--ease), gap 0.3s var(--ease);
}
.textlink svg { width: 0.95rem; height: 0.95rem; }
.textlink:hover { gap: 0.95rem; }
.dark .textlink:hover { color: var(--bronze); }
.light .textlink:hover { color: var(--bronze-deep); }

/* ───────── Navigation ───────── */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  padding-top: env(safe-area-inset-top, 0px);
  color: var(--bone);
  transition: background-color 0.4s var(--ease), color 0.4s var(--ease), transform 0.5s var(--ease);
}
.nav__bar { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; height: 4.5rem; }
.nav.is-scrolled { background: rgba(23, 24, 23, 0.82); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.nav[data-tone="light"] { color: var(--warm-black); }
.nav[data-tone="light"].is-scrolled { background: rgba(242, 238, 231, 0.86); }
.nav__logo { display: block; width: clamp(11.25rem, 18vw, 15.5rem); }
.nav__logo svg { width: 100%; height: auto; }
.nav__links { display: flex; gap: clamp(1.25rem, 2.6vw, 2.5rem); }
.nav__links a {
  position: relative; text-decoration: none; font-weight: 500; font-size: 0.8125rem; letter-spacing: 0.11em; text-transform: uppercase;
  padding-block: 0.5rem;
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0.15rem; height: 1px; background: var(--bronze);
  transform: scaleX(0); transform-origin: left; transition: transform 0.4s var(--ease);
}
.nav__links a:hover::after, .nav__links a[aria-current="true"]::after { transform: scaleX(1); }
.nav__toggle {
  display: none; width: 2.75rem; height: 2.75rem; margin-right: -0.6rem; padding: 0; border: 0; background: none; color: inherit; cursor: pointer;
  position: relative;
}
.nav__toggle span { position: absolute; left: 0.6rem; right: 0.6rem; height: 1.5px; background: currentColor; transition: transform 0.4s var(--ease), top 0.4s var(--ease); }
.nav__toggle span:nth-child(1) { top: 1.1rem; }
.nav__toggle span:nth-child(2) { top: 1.6rem; }
.nav.is-open .nav__toggle span:nth-child(1) { top: 1.35rem; transform: rotate(45deg); }
.nav.is-open .nav__toggle span:nth-child(2) { top: 1.35rem; transform: rotate(-45deg); }

.drawer {
  position: fixed; inset: 0; z-index: 40; background: var(--charcoal); color: var(--bone);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: calc(6.5rem + env(safe-area-inset-top, 0px)) var(--gutter) calc(2rem + env(safe-area-inset-bottom, 0px));
  opacity: 0; visibility: hidden; transition: opacity 0.4s var(--ease), visibility 0s 0.4s;
}
.drawer.is-open { opacity: 1; visibility: visible; transition: opacity 0.4s var(--ease); }
.drawer__links { display: flex; flex-direction: column; }
.drawer__links a {
  font-family: var(--display); font-weight: 400; font-size: clamp(2.25rem, 10.5vw, 3.25rem); line-height: 1.1; letter-spacing: -0.02em;
  text-decoration: none; padding-block: 0.7rem; border-bottom: 1px solid var(--bone-line);
}
.drawer__foot { display: flex; gap: 1.5rem; flex-wrap: wrap; color: var(--bone-dim); }
.drawer__foot a { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.11em; text-transform: uppercase; text-decoration: none; }

/* ───────── Hero ───────── */
.hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; isolation: isolate; }
.hero__media { position: absolute; inset: 0 0 0 16%; z-index: -2; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 10%); mask-image: linear-gradient(90deg, transparent 0%, #000 10%); }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 52% 18%; }
.hero__shade {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(23,24,23,0.9) 0%, rgba(23,24,23,0.66) 22%, rgba(23,24,23,0.16) 44%, rgba(23,24,23,0) 60%),
    linear-gradient(0deg, rgba(23,24,23,0.94) 0%, rgba(23,24,23,0.45) 26%, rgba(23,24,23,0) 50%),
    linear-gradient(180deg, rgba(23,24,23,0.6) 0%, rgba(23,24,23,0) 20%);
}
.hero__content { padding-top: 7.5rem; padding-bottom: clamp(1.75rem, 4vw, 3rem); display: flex; flex-direction: column; align-items: flex-start; }
.hero__label { color: var(--sand); margin-bottom: clamp(1rem, 2vw, 1.75rem); font-size: clamp(0.8125rem, 1.1vw, 1rem); }
.hero__iam {
  font-family: var(--display); font-weight: 300; font-size: var(--fs-iam); line-height: 0.84; letter-spacing: -0.035em; text-transform: uppercase;
  margin-left: -0.045em; display: flex; gap: 0.2em; overflow: hidden; padding-block: 0.04em;
}
.hero__iam span { display: block; }
.hero__statement { max-width: 22.5em; margin-top: clamp(1.25rem, 2.4vw, 2rem); font-size: var(--fs-intro); line-height: 1.45; color: var(--bone); text-wrap: pretty; }
.hero__cta { margin-top: clamp(1.5rem, 2.6vw, 2.25rem); }
.hero__foot { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-block: 1.1rem calc(1.4rem + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--bone-line); color: var(--bone-dim); }
.hero__foot .label { color: inherit; font-weight: 500; font-size: 0.75rem; }
.hero__place { font-variant-numeric: tabular-nums; }
.hero__scroll { display: inline-flex; align-items: center; gap: 0.75rem; }
.hero__scroll i { display: block; width: 3rem; height: 1px; background: currentColor; transform-origin: left; animation: scrollcue 2.8s var(--ease) infinite; }
@keyframes scrollcue { 0% { transform: scaleX(0); } 55% { transform: scaleX(1); } 100% { transform: scaleX(1); opacity: 0; } }

/* Hero load sequence: the one orchestrated moment. */
.js .hero__media img { transform: scale(1.09); transition: transform 2.8s cubic-bezier(0.16, 0.6, 0.2, 1); }
.js .hero__iam span { transform: translateY(108%); transition: transform 1.25s var(--ease); }
.js .hero__iam span:nth-child(2) { transition-delay: 0.12s; }
.js .hero__label, .js .hero__statement, .js .hero__cta, .js .hero__foot { opacity: 0; transform: translateY(14px); transition: opacity 1s var(--ease) 0.55s, transform 1s var(--ease) 0.55s; }
.js .hero__statement { transition-delay: 0.7s; }
.js .hero__cta { transition-delay: 0.85s; }
.js .hero__foot { transform: none; transition-delay: 1.1s; }
.js .is-loaded .hero__media img, .js .is-loaded .hero__iam span { transform: none; }
.js .is-loaded .hero__label, .js .is-loaded .hero__statement, .js .is-loaded .hero__cta, .js .is-loaded .hero__foot { opacity: 1; transform: none; }

/* ───────── About ───────── */
.about { padding-block: var(--section); }
.about__text { grid-column: 1 / span 6; --stack: clamp(1.5rem, 2.6vw, 2.25rem); }
.about__lede { font-family: var(--display); font-weight: 400; font-size: clamp(1.875rem, 3.9vw, 3.5rem); line-height: 1.1; letter-spacing: -0.02em; text-wrap: balance; }
.about__cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.5rem, 2.4vw, 2.25rem); width: 100%; max-width: 33rem; margin-top: 0.5rem; }
.about__cols > * { min-width: 0; }
.about__note { color: var(--ink-dim); font-size: 0.9375rem; border-top: 1px solid var(--ink-line); padding-top: 0.9rem; }
.about__portrait { grid-column: 8 / span 5; align-self: start; }
.about__portrait .frame { aspect-ratio: 5 / 6; }

.roles { margin-top: clamp(3.5rem, 7vw, 6.5rem); border-top: 1px solid var(--ink-line); }
.roles a {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr) auto; align-items: baseline; column-gap: clamp(1rem, 2vw, 2rem);
  padding-block: clamp(1.1rem, 2.2vw, 1.9rem); border-bottom: 1px solid var(--ink-line); text-decoration: none; position: relative;
  transition: padding-left 0.5s var(--ease), color 0.4s var(--ease);
}
.roles a::before { content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%; background: var(--bronze-deep); transform: scaleX(0); transform-origin: left; transition: transform 0.6s var(--ease); }
.roles a:hover { padding-left: clamp(0.5rem, 1.4vw, 1.25rem); }
.roles a:hover::before { transform: scaleX(1); }
.roles__name { font-family: var(--display); font-weight: 500; font-size: clamp(1.75rem, 3.6vw, 3.25rem); line-height: 1.05; letter-spacing: -0.02em; }
.roles__what { color: var(--ink-dim); min-width: 0; }
.roles svg { width: 1.4rem; height: 1.4rem; align-self: center; transition: transform 0.5s var(--ease); }
.roles a:hover svg { transform: translate(3px, 3px); color: var(--bronze-deep); }

/* ───────── Image frames ───────── */
.frame { position: relative; overflow: hidden; background: var(--warm-black); }
.light .frame { background: var(--sand); }
.frame > img, .frame > video { width: 100%; height: 100%; object-fit: cover; }
.js .reveal:not(.is-in) { background: transparent; }
.js .reveal > img, .js .reveal > video { clip-path: inset(0 0 100% 0); transform: scale(1.12); transition: clip-path 1.3s var(--ease), transform 1.9s var(--ease); }
.js .reveal.is-in > img, .js .reveal.is-in > video { clip-path: inset(0 0 0 0); transform: none; }
.caption { margin-top: 0.75rem; font-size: 0.8125rem; line-height: 1.4; letter-spacing: 0.02em; }
.dark .caption { color: var(--stone); }
.light .caption { color: var(--ink-dim); }

/* ───────── Projects ───────── */
.projects__head { padding-block: var(--section) clamp(2.5rem, 5vw, 4.5rem); }
.projects__head .chapter { grid-column: 1 / span 7; }
.projects__head .intro { grid-column: 8 / span 5; align-self: end; }

.bleed { position: relative; height: clamp(26rem, 86svh, 58rem); overflow: hidden; isolation: isolate; }
.bleed__img { position: absolute; inset: -9% 0; z-index: -2; }
.bleed__img img { width: 100%; height: 100%; object-fit: cover; }
.bleed__shade { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.bleed__inner { height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: clamp(1.75rem, 4vw, 3.5rem); }

.edkp .bleed__shade { background: linear-gradient(0deg, rgba(23,24,23,0.94) 0%, rgba(23,24,23,0.5) 34%, rgba(23,24,23,0) 62%), linear-gradient(180deg, rgba(23,24,23,1) 0%, rgba(23,24,23,0) 16%); }
.edkp__title { max-width: 9.5em; }
.meta { display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; margin-bottom: 1.1rem; font-size: 0.8125rem; }
.meta li { position: relative; }
.meta li:not(:last-child)::after { content: ""; position: absolute; right: -0.95rem; top: 50%; width: 3px; height: 3px; margin-top: -1px; border-radius: 50%; background: currentColor; opacity: 0.7; }
.edkp__body { padding-block: clamp(2.5rem, 5vw, 4.5rem) var(--section); }
.edkp__text { grid-column: 1 / span 5; --stack: 1.4rem; }
.edkp__text .intro { color: var(--bone); }
.edkp__aside { grid-column: 9 / span 4; margin-top: clamp(-13rem, -15vw, -5rem); position: relative; z-index: 2; }
.edkp__aside .frame { aspect-ratio: 4 / 5; }

.ecstatica { padding-block: var(--section); }
.ecstatica__media { grid-column: 1 / span 8; }
.ecstatica__media .frame { aspect-ratio: 16 / 9; }
/* The Ecstatica photo is the poster for the film: click and it plays in place. */
.film { display: block; color: var(--bone); text-decoration: none; background: var(--charcoal); }
.light .film.frame { background: var(--charcoal); }
.film > img { object-position: 50% 42%; }
.film__shade { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(23,24,23,0.86) 0%, rgba(23,24,23,0.3) 34%, rgba(23,24,23,0) 60%); transition: opacity 0.5s var(--ease); }
.film__cta { position: absolute; left: clamp(1rem, 2.4vw, 2rem); right: clamp(1rem, 2.4vw, 2rem); bottom: clamp(1rem, 2.4vw, 2rem); display: flex; align-items: center; gap: clamp(0.9rem, 1.6vw, 1.4rem); }
.film__play { flex: none; display: grid; place-items: center; width: clamp(3.5rem, 5.4vw, 5rem); height: clamp(3.5rem, 5.4vw, 5rem); border-radius: 50%; background: var(--bone); color: var(--charcoal); transition: background-color 0.35s var(--ease), transform 0.5s var(--ease); }
.film__play svg { width: 28%; height: 28%; margin-left: 6%; }
.film__text { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
.film .label { color: var(--sand); }
.film__title { font-family: var(--display); font-weight: 400; font-size: clamp(1.125rem, 1.9vw, 1.625rem); line-height: 1.2; letter-spacing: -0.01em; }
.film:hover .film__play, .film:focus-visible .film__play { background: var(--bronze); transform: scale(1.07); }
.js .film.reveal.is-in > img { transition: clip-path 1.3s var(--ease), transform 1.6s var(--ease); }
.film:hover > img { transform: scale(1.03); }
.film--playing { background: #000; }
.film--playing iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ecstatica__body { align-items: stretch; }
.ecstatica__media { position: relative; }
.ecstatica__media .caption { position: absolute; top: 100%; left: 0; }
.ecstatica__text { grid-column: 9 / span 4; display: flex; flex-direction: column; justify-content: space-between; gap: 2rem; --stack: 1.4rem; }
.ecstatica__text .title { font-size: clamp(2.25rem, 4vw, 3.75rem); }

/* ───────── Music ───────── */
.music .bleed__shade { background: linear-gradient(90deg, rgba(23,24,23,0.7) 0%, rgba(23,24,23,0.35) 28%, rgba(23,24,23,0) 52%), linear-gradient(0deg, rgba(23,24,23,1) 0%, rgba(23,24,23,0.62) 22%, rgba(23,24,23,0) 50%); }
.music .bleed__img img { object-position: 72% 40%; }

.music__body { padding-block: clamp(2.5rem, 5vw, 4.5rem) var(--section); row-gap: clamp(3rem, 6vw, 5rem); }
.music__text { grid-column: 1 / span 5; --stack: 1.4rem; }
.music__text .intro { color: var(--bone); }
.listen { grid-column: 7 / span 6; min-width: 0; }
.listen__head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--bone-line); }
.track { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: clamp(0.9rem, 1.6vw, 1.4rem); padding-block: clamp(0.95rem, 1.6vw, 1.3rem); border-bottom: 1px solid var(--bone-line); text-decoration: none; transition: padding-left 0.45s var(--ease); }
.track:hover, .track.is-playing { padding-left: 0.6rem; }
.track__play { width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 1px solid var(--bone-line); display: grid; place-items: center; transition: background-color 0.35s var(--ease), border-color 0.35s var(--ease), color 0.35s var(--ease); }
.track__play svg { width: 0.8rem; height: 0.8rem; margin-left: 2px; }
.track:hover .track__play, .track.is-playing .track__play { background: var(--bronze); border-color: var(--bronze); color: var(--charcoal); }
.track__name { display: block; font-family: var(--display); font-weight: 400; font-size: clamp(1.0625rem, 1.5vw, 1.375rem); line-height: 1.25; letter-spacing: -0.01em; }
.track__meta { display: block; margin-top: 0.2rem; font-size: 0.875rem; color: var(--stone); }
.track__out { color: var(--stone); transition: color 0.3s var(--ease), transform 0.4s var(--ease); }
.track__out svg { width: 1.1rem; height: 1.1rem; }
.track:hover .track__out { color: var(--bone); transform: translate(2px, -2px); }
.listen__player { margin-top: 1.25rem; }
.listen__player iframe { display: block; width: 100%; height: 166px; border: 0; }
.listen__foot { margin-top: 1.5rem; }

.stages { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1rem, 2vw, 2rem); row-gap: clamp(1.75rem, 3vw, 2.5rem); padding-top: clamp(3rem, 6vw, 5rem); border-top: 1px solid var(--bone-line); }
.stages__text { grid-column: 1 / span 5; --stack: 1.1rem; }
.stages__copy { grid-column: 8 / span 5; align-self: end; }
.stages__row { grid-column: 1 / -1; display: flex; gap: clamp(0.75rem, 1.6vw, 1.5rem); align-items: flex-start; }
.stages__row figure { min-width: 0; flex: var(--r) 1 0; }
.stages__row .frame { aspect-ratio: var(--r); }

/* ───────── Teaching ───────── */
.teaching { padding-block: var(--section); }
.teaching__head { margin-bottom: clamp(2.5rem, 4.6vw, 4rem); --stack: clamp(1.25rem, 2.2vw, 1.9rem); }
.teaching__head .intro { max-width: 27em; }
/* The photo and the list share one row height: the list's first rule meets the photo's top edge, the button its bottom edge. */
.teaching__body { align-items: stretch; }
.teaching__media { grid-column: 1 / span 7; position: relative; }
.teaching__media::before { content: ""; display: block; padding-top: 83.333%; }
.teaching__media .frame { position: absolute; inset: 0; }
.teaching__media img { object-position: 80% 50%; }
.teaching__text { grid-column: 8 / span 5; display: flex; flex-direction: column; justify-content: space-between; gap: clamp(1.25rem, 2vw, 1.75rem); }
.teaching__foot { --stack: clamp(1.1rem, 1.8vw, 1.5rem); }
.subjects { flex: 1 1 auto; display: flex; flex-direction: column; width: 100%; border-top: 1px solid var(--ink-line); }
.subjects li { flex: 1 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; row-gap: 0.3rem; padding-block: clamp(0.9rem, 1.4vw, 1.2rem); border-bottom: 1px solid var(--ink-line); }
.subjects h3 { font-family: var(--display); font-weight: 500; font-size: clamp(1.1875rem, 1.7vw, 1.5rem); line-height: 1.2; letter-spacing: -0.01em; }
.subjects p { color: var(--ink-dim); }
.teaching__note { color: var(--ink-dim); max-width: 32em; }

/* ───────── Story ───────── */
.story { padding-block: var(--section); }
.story__path { grid-column: 1 / -1; margin-top: clamp(1.5rem, 3vw, 2.5rem); font-family: var(--display); font-weight: 300; font-size: clamp(2.125rem, 6.3vw, 6rem); line-height: 1.06; letter-spacing: -0.03em; display: flex; flex-wrap: wrap; gap: 0 0.32em; }
.story__path span { transition: color 0.6s var(--ease); }
.js .story__path span { color: rgba(167, 157, 144, 0.34); }
.js .story__path span.is-lit { color: var(--bone); }
.story__path span:last-child { font-weight: 500; }
.js .story__path span:last-child.is-lit { color: var(--sand); }
.story__body { margin-top: clamp(3rem, 7vw, 6rem); }
.story__body { align-items: stretch; }
.story__text { grid-column: 1 / span 5; display: flex; flex-direction: column; justify-content: space-between; gap: clamp(2rem, 4vw, 3rem); --stack: 1.4rem; }
.story__aside { border-top: 1px solid var(--bone-line); padding-top: clamp(1.1rem, 1.8vw, 1.5rem); }
/* The photo runs off the right edge of the page. */
.story__media { grid-column: 7 / -1; margin-right: calc(-1 * (max(0px, (100vw - var(--max)) / 2) + var(--gutter))); position: relative; }
.story__media .frame { aspect-ratio: 5 / 4; }
.story__media .caption { position: absolute; top: 100%; left: 0; }
.story__text .intro { color: var(--bone); }

/* ───────── Moments ───────── */
.moments { padding-block: var(--section) clamp(4rem, 8vw, 7rem); overflow: hidden; }
.moments__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem; flex-wrap: wrap; margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.moments__head .h1 { max-width: 12em; }
.rail { display: flex; gap: clamp(0.75rem, 1.6vw, 1.5rem); overflow-x: auto; padding-inline: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))); padding-block: 1.75rem; margin-block: -1.75rem 0; scrollbar-width: none; cursor: grab; -webkit-overflow-scrolling: touch; }
.rail::-webkit-scrollbar { display: none; }
.rail.is-dragging { cursor: grabbing; scroll-behavior: auto; }
.rail figure { flex: none; }
.rail figure:nth-child(even) { margin-top: clamp(1.5rem, 4vw, 3.5rem); }
.rail .frame { display: block; height: clamp(11rem, min(44svh, 54vw), 31rem); aspect-ratio: var(--r, 3 / 2); }
.rail img { -webkit-user-drag: none; user-select: none; transition: transform 1.2s var(--ease); }
/* Each photo is a button: it grows under the pointer while its neighbours step back, and opens large on click. */
.shot { display: block; padding: 0; border: 0; background: none; color: inherit; cursor: zoom-in; transition: transform 0.6s var(--ease), opacity 0.6s var(--ease); }
.rail.is-dragging .shot { cursor: grabbing; }
@media (hover: hover) {
  .rail:hover .shot { transform: scale(0.95); opacity: 0.7; }
  .rail .shot:hover { transform: scale(1.05); opacity: 1; }
  .rail .shot:hover img { transform: scale(1.06); }
}
.rail:has(.shot:focus-visible) .shot { transform: scale(0.95); opacity: 0.7; }
.rail .shot:focus-visible { transform: scale(1.05); opacity: 1; outline-offset: 6px; }

.moments__controls { display: flex; align-items: center; justify-content: space-between; gap: clamp(1.5rem, 4vw, 3rem); margin-top: clamp(1.25rem, 2.4vw, 2rem); }
.moments__progress { position: relative; flex: 1 1 auto; max-width: 28rem; height: 1px; background: var(--ink-line); }
.moments__progress i { position: absolute; top: -1px; left: 0; height: 3px; width: 30%; background: var(--warm-black); transition: left 0.2s linear; }
.moments__arrows { display: flex; gap: 0.5rem; flex: none; }
.arrow { display: grid; place-items: center; width: 3.25rem; height: 3.25rem; padding: 0; border: 1px solid var(--warm-black); border-radius: 2px; background: none; color: var(--warm-black); cursor: pointer; transition: background-color 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s var(--ease), opacity 0.35s var(--ease); }
.arrow svg { width: 1.15rem; height: 1.15rem; }
.arrow--prev svg { transform: rotate(180deg); }
.arrow:hover:not(:disabled) { background: var(--charcoal); color: var(--bone); }
.arrow:disabled { opacity: 0.28; cursor: default; }

.moments__foot { display: flex; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap; margin-top: 1.25rem; font-size: 0.8125rem; color: var(--ink-dim); }

/* ───────── Connect + footer ───────── */
.connect { position: relative; isolation: isolate; overflow: hidden; }
.connect__bg { position: absolute; inset: -6% 0; z-index: -2; }
.connect__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 28%; }
.connect__shade { position: absolute; inset: 0; z-index: -1; background:
  linear-gradient(90deg, rgba(23,24,23,0.9) 0%, rgba(23,24,23,0.62) 26%, rgba(23,24,23,0.12) 52%, rgba(23,24,23,0) 70%),
  linear-gradient(180deg, rgba(23,24,23,1) 0%, rgba(23,24,23,0) 24%),
  linear-gradient(0deg, rgba(23,24,23,1) 0%, rgba(23,24,23,0) 34%); }
.connect__inner { padding-block: clamp(6rem, 15vw, 14rem) clamp(5rem, 11vw, 10rem); --stack: clamp(1.5rem, 2.6vw, 2.25rem); }
.connect__title { font-family: var(--display); font-weight: 300; font-size: clamp(2.875rem, 6.4vw, 6.25rem); line-height: 0.96; max-width: 6.2em; letter-spacing: -0.035em; margin-left: -0.04em; text-wrap: balance; }
.connect__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.5rem; }
.connect .intro { max-width: 21em; }

.footer { padding-block: clamp(2.5rem, 5vw, 4rem) calc(2rem + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--bone-line); }
.footer__top { align-items: end; row-gap: 2.5rem; }
.footer__mark { grid-column: 1 / span 5; color: var(--bone); }
.footer__mark svg { width: 100%; max-width: 30rem; height: auto; }
.footer__tag { margin-top: 1.25rem; color: var(--stone); font-size: 0.8125rem; }
.footer__links { grid-column: 8 / span 5; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.25rem clamp(1rem, 2vw, 2rem); }
.footer__links a { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; padding-block: 0.8rem; border-bottom: 1px solid var(--bone-line); text-decoration: none; font-weight: 500; font-size: 0.9375rem; transition: color 0.3s var(--ease); }
.footer__links a:hover { color: var(--bronze); }
.footer__links svg { width: 0.95rem; height: 0.95rem; flex: none; color: var(--stone); }
.footer__base { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem 2rem; margin-top: clamp(2.5rem, 5vw, 4rem); font-size: 0.8125rem; color: var(--stone); }
.footer__base a { text-decoration: none; }
.footer__base a:hover { color: var(--bone); }

/* ───────── Photo viewer ───────── */
.lightbox { position: fixed; inset: 0; z-index: 90; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(0.5rem, 2vw, 1.5rem); padding: calc(1.25rem + env(safe-area-inset-top, 0px)) var(--gutter) calc(1.25rem + env(safe-area-inset-bottom, 0px)); background: rgba(23, 24, 23, 0.97); color: var(--bone); opacity: 0; transition: opacity 0.35s var(--ease); }
.lightbox.is-open { opacity: 1; }
.lightbox__stage { display: flex; flex-direction: column; align-items: center; gap: 1rem; min-width: 0; }
.lightbox__stage img { max-width: 100%; max-height: calc(100svh - 8rem); width: auto; height: auto; object-fit: contain; transform: scale(0.97); transition: transform 0.5s var(--ease), opacity 0.3s var(--ease); }
.lightbox.is-open .lightbox__stage img { transform: none; }
.lightbox__stage img.is-swapping { opacity: 0; }
.lightbox .label { color: var(--stone); font-variant-numeric: tabular-nums; }
.lightbox .arrow { border-color: var(--bone-line); color: var(--bone); }
.lightbox .arrow:hover:not(:disabled) { background: var(--bone); color: var(--charcoal); border-color: var(--bone); }
.lightbox__close { position: absolute; top: calc(1.25rem + env(safe-area-inset-top, 0px)); right: var(--gutter); z-index: 1; }

/* ───────── Responsive ───────── */
@media (max-width: 1024px) {
  .about__text { grid-column: 1 / span 7; }
  .about__portrait { grid-column: 8 / span 5; }
  .about__cols { grid-template-columns: 1fr; }
  .edkp__text { grid-column: 1 / span 7; }
  .edkp__aside { grid-column: 9 / span 4; }
  .ecstatica__media { grid-column: 1 / span 7; }
  .ecstatica__text { grid-column: 8 / span 5; }
  .music__text { grid-column: 1 / span 6; }
  .teaching__body { display: flex; flex-direction: column; gap: clamp(2rem, 4vw, 3rem); }
  .teaching__media::before { padding-top: 62%; }
  .teaching__media img { object-position: 50% 35%; }
  .listen { grid-column: 1 / -1; }
  .story__text { grid-column: 1 / span 6; }
  .story__media { grid-column: 8 / -1; align-self: start; }
  .footer__mark { grid-column: 1 / span 6; }
  .footer__links { grid-column: 1 / -1; }
}
@media (min-width: 1025px) and (max-width: 1279px) {
  .teaching__media::before { padding-top: 100%; }
  .teaching__media img { object-position: 88% 50%; }
}
@media (min-width: 721px) and (max-width: 1024px) {
  .subjects li { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); column-gap: 2rem; align-items: baseline; }
}
@media (max-width: 1220px) {
  .ecstatica__body { display: flex; flex-direction: column; gap: clamp(2rem, 4vw, 3rem); }
  .ecstatica__media .caption { position: static; }
  .ecstatica__text { max-width: 38rem; }
}
@media (max-width: 560px) {
  .film__play { width: 3rem; height: 3rem; }
  .film .label { font-size: 0.6875rem; }
  .film__title { font-size: 1rem; }
  .film__text { gap: 0.2rem; }
}
@media (max-width: 860px) {
  .nav__links { display: none; }
  .nav__toggle { display: block; }
  .nav.is-open { background: transparent; color: var(--bone); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (max-width: 720px) {
  :root { --section: clamp(4.5rem, 18vw, 6.5rem); }
  .grid { display: flex; flex-direction: column; gap: clamp(2rem, 8vw, 3rem); }
  .grid > * { min-width: 0; width: 100%; }


  .about__cols { grid-template-columns: 1fr; }
  .about__portrait .frame { aspect-ratio: 4 / 5; }
  .roles a { grid-template-columns: minmax(0, 1fr) auto; row-gap: 0.3rem; }
  .roles__what { grid-column: 1; grid-row: 2; font-size: 0.9375rem; }
  .roles svg { grid-row: 1 / span 2; grid-column: 2; }

  .bleed { height: clamp(26rem, 78svh, 40rem); }
  .edkp__aside { margin-top: 0; width: 78%; align-self: flex-end; }
  .ecstatica__media .caption { position: static; }
  .music .bleed__shade { background: linear-gradient(0deg, rgba(23,24,23,1) 0%, rgba(23,24,23,0.72) 24%, rgba(23,24,23,0) 56%), linear-gradient(180deg, rgba(23,24,23,0.5) 0%, rgba(23,24,23,0) 20%); }
  .music .bleed__img img { object-position: 64% 40%; }

  .stages { display: flex; flex-direction: column; }
  .stages__row { flex-wrap: wrap; }
  .stages__row figure:nth-child(2) { order: -1; flex: 1 0 100%; }

  .teaching__head { margin-bottom: clamp(2rem, 8vw, 3rem); }
  .teaching__media::before { padding-top: 83.333%; }
  .teaching__media img { object-position: 80% 50%; }
  .story__media { margin-right: 0; }
  .story__media .caption { position: static; }
  .footer__links { grid-template-columns: 1fr; }
  .lightbox { grid-template-columns: 1fr 1fr; grid-template-rows: minmax(0, 1fr) auto; row-gap: 1.25rem; }
  .lightbox__stage { grid-column: 1 / -1; grid-row: 1; justify-content: center; height: 100%; }
  .lightbox__stage img { max-height: calc(100svh - 13rem); }
  .lightbox__prev { grid-row: 2; justify-self: end; }
  .lightbox__next { grid-row: 2; justify-self: start; }
  .arrow { width: 3rem; height: 3rem; }
  .connect__actions .btn { flex: 1 1 100%; justify-content: space-between; }
}

/* Phones and portrait screens: the photo sits on top with its full arm span, the words follow. */
@media (max-width: 720px), (orientation: portrait) {
  .hero { --hero-top: calc(4.5rem + env(safe-area-inset-top, 0px)); --hero-img: min(91vw, 44svh); --fs-iam: clamp(5rem, min(34vw, 15svh), 11rem); justify-content: flex-start; }
  .hero__media { inset: var(--hero-top) 0 auto 0; height: var(--hero-img); -webkit-mask-image: none; mask-image: none; }
  .hero__media img { object-position: 50% 30%; }
  .hero__shade { background: linear-gradient(180deg, rgba(23,24,23,0) calc(var(--hero-top) + var(--hero-img) * 0.56), rgba(23,24,23,0.82) calc(var(--hero-top) + var(--hero-img) * 0.88), rgba(23,24,23,1) calc(var(--hero-top) + var(--hero-img))); }
  .hero__content { padding-top: calc(var(--hero-top) + var(--hero-img) * 0.82); padding-bottom: 1.5rem; }
  .hero__statement { font-size: clamp(1.1875rem, 5.2vw, 1.5rem); }
  .hero > .wrap:last-child { margin-top: auto; }
  .hero__scroll { display: none; }

  .connect__bg { inset: -4vw 0 auto 0; height: 104vw; }
  .connect__bg img { object-position: 50% 20%; }
  .connect__shade { background: linear-gradient(180deg, rgba(23,24,23,1) 0%, rgba(23,24,23,0) 14vw), linear-gradient(180deg, rgba(23,24,23,0) 46vw, rgba(23,24,23,0.85) 84vw, rgba(23,24,23,1) 100vw); }
  .connect__inner { padding-top: 78vw; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; transition-delay: 0s !important; }
  .js .reveal > img, .js .reveal > video, .js .hero__media img, .js .hero__iam span { clip-path: none; transform: none; }
  .js .hero__label, .js .hero__statement, .js .hero__cta, .js .hero__foot { opacity: 1; transform: none; }
  .js .story__path span { color: var(--bone); }
  .js .story__path span:last-child { color: var(--sand); }
}
[hidden] { display: none !important; }