/* =====================================================
   Ellie Kathryn Crawford — concert dancer
   Dark editorial theme
   ===================================================== */

:root {
  --ink: #0a0908;
  --ink-lift: #14110f;
  --ink-deep: #050403;
  --paper: #f3ebe4;
  --paper-soft: #d8cec5;
  --mute: #8c857d;

  --rose: #ce9ea4;
  --rose-bright: #e6bcc0;
  --rose-deep: #966c74;
  --blush: #ecd8da;

  --rule: rgba(243, 235, 228, 0.12);
  --rule-strong: rgba(243, 235, 228, 0.22);

  --serif: "Fraunces", "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --gutter: clamp(1.25rem, 4vw, 3rem);
  --rhythm: clamp(3rem, 7vw, 6rem);
  --max: 1480px;

  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background:
    radial-gradient(ellipse 70% 50% at 85% 0%, rgba(206, 158, 164, 0.10), transparent 60%),
    radial-gradient(ellipse 60% 50% at 10% 100%, rgba(150, 108, 116, 0.09), transparent 65%),
    radial-gradient(ellipse 90% 70% at 50% 50%, rgba(230, 188, 192, 0.04), transparent 70%),
    var(--ink);
  /* Pin the base wash to the viewport so it doesn't slide past as the page
     scrolls — the only motion comes from the self-animating drift layers
     below. (Solid --ink underneath is unaffected.) */
  background-attachment: fixed;
  color: var(--paper);
  font-family: var(--sans);
  font-size: clamp(17px, 1.05vw + 14px, 19px);
  line-height: 1.6;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
@media (max-width: 760px) {
  body { font-size: 18px; }
}

/* Subtle living background — two slow-drifting rose blob layers over the ink
   base. Sits behind all content (fixed, z-index -1) so it shows through every
   page in the gaps between sections; the body's own gradients stay as a static
   base. The two layers drift in opposite directions for organic parallax. */
/* Living backdrop — two stacked layers of soft colour blobs drifting behind all
   content. Each layer holds a few warm rose radial gradients that fade to
   transparent (so they read as soft clouds, no blur filter needed) and slowly
   translate + scale on different timings, so they cross and overlap. Transform-
   only animation keeps it GPU-composited — movement without scroll jank. */
body::before,
body::after {
  content: "";
  position: fixed;
  inset: -25vmax;
  z-index: -1;
  pointer-events: none;
  will-change: transform;
}
body::before {
  background:
    radial-gradient(40vmax 40vmax at 22% 28%, rgba(206, 158, 164, 0.20), transparent 58%),
    radial-gradient(34vmax 34vmax at 78% 30%, rgba(150, 108, 116, 0.16), transparent 60%),
    radial-gradient(44vmax 44vmax at 60% 84%, rgba(230, 188, 192, 0.13), transparent 62%);
  animation: bg-drift-a 22s ease-in-out infinite alternate;
}
body::after {
  background:
    radial-gradient(32vmax 32vmax at 72% 66%, rgba(150, 108, 116, 0.16), transparent 58%),
    radial-gradient(38vmax 38vmax at 16% 76%, rgba(206, 158, 164, 0.13), transparent 60%),
    radial-gradient(28vmax 28vmax at 42% 14%, rgba(230, 188, 192, 0.12), transparent 60%);
  animation: bg-drift-b 28s ease-in-out infinite alternate;
}
/* Wider travel + scale so the blobs visibly wander the backdrop on their own. */
@keyframes bg-drift-a {
  0%   { transform: translate3d(-14%, -9%, 0)  scale(1.05); }
  50%  { transform: translate3d(13%, 11%, 0)   scale(1.2);  }
  100% { transform: translate3d(-9%, 14%, 0)   scale(1.08); }
}
@keyframes bg-drift-b {
  0%   { transform: translate3d(12%, 11%, 0)   scale(1.12); }
  50%  { transform: translate3d(-14%, -10%, 0) scale(1.24); }
  100% { transform: translate3d(11%, -12%, 0)  scale(1.1);  }
}
@media (prefers-reduced-motion: reduce) {
  body::before,
  body::after { animation: none; }
}

/* ---------- Cross-page transitions (native View Transitions API) ----------
   This is a multi-page site: every nav click is a full document load. The
   cross-document View Transitions API cross-fades the outgoing page into the
   incoming one with a soft upward drift — no JS, no router. Browsers without
   support (currently Firefox) simply navigate as normal: pure progressive
   enhancement. Declared in the shared stylesheet so both the old and new
   document opt in, which the cross-document transition requires. */
@view-transition { navigation: auto; }

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: .42s;
  animation-timing-function: var(--ease-out);
}
::view-transition-old(root) { animation-name: page-out; }
::view-transition-new(root) { animation-name: page-in; }
@keyframes page-out { to   { opacity: 0; transform: translateY(-6px); } }
@keyframes page-in  { from { opacity: 0; transform: translateY(10px); } }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: .01ms;
    transform: none;
  }
}

img { display: block; max-width: 100%; height: auto; }

/* The landing hero clip is a silent backdrop, not a player — hide every native
   control surface (the panel, the play button, and the big tap-to-play overlay
   iOS/Safari injects). Reels DO get native controls (see WATCH section). */
.hero-video::-webkit-media-controls,
.hero-video::-webkit-media-controls-enclosure,
.hero-video::-webkit-media-controls-panel,
.hero-video::-webkit-media-controls-play-button,
.hero-video::-webkit-media-controls-start-playback-button,
.hero-video::-webkit-media-controls-overlay-play-button {
  display: none !important;
  -webkit-appearance: none;
  appearance: none;
  opacity: 0 !important;
  pointer-events: none;
}
/* Belt-and-suspenders for the hero: a tap can't toggle playback or raise UI. */
.hero-video { pointer-events: none; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--rose); color: var(--ink); }

/* ----- Typography ----- */
h1, h2, h3, .display {
  font-family: var(--serif);
  font-weight: 400;
  font-variation-settings: "opsz" 144;
  letter-spacing: -0.025em;
  line-height: 0.95;
  margin: 0;
  color: var(--paper);
}
.display { font-size: clamp(3.5rem, 13vw, 11rem); }
h2 { font-size: clamp(2.2rem, 5vw, 4rem); line-height: 1.02; }
h3 { font-size: 1.25rem; }
p  { margin: 0 0 1em; }

.eyebrow {
  font-family: var(--sans);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: var(--rose);
  margin: 0;
  font-weight: 500;
}
@media (max-width: 760px) {
  .eyebrow { font-size: 0.82rem; letter-spacing: 0.24em; }
}

.lede {
  font-family: var(--serif);
  font-variation-settings: "opsz" 18;
  font-size: clamp(1.4rem, 2vw, 1.8rem);
  line-height: 1.4;
  letter-spacing: -0.01em;
  max-width: 30em;
  color: var(--paper);
}

.italic { font-style: italic; }
.rose   { color: var(--rose); }

/* =====================================================
   HEADER / NAV
   ===================================================== */

.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.4rem var(--gutter);
  /* translucent frosted bar from landing (matches kironatomtellian.com),
     goes solid on scroll */
  background: color-mix(in oklab, var(--ink) 32%, transparent);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  backdrop-filter: blur(12px) saturate(120%);
  transition: background .4s var(--ease), padding .4s var(--ease), border-color .4s var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled {
  background:
    linear-gradient(180deg, rgba(150, 108, 116, 0.06), rgba(10, 9, 8, 0.78)),
    rgba(10, 9, 8, 0.55);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border-bottom-color: rgba(206, 158, 164, 0.18);
  padding: 0.85rem var(--gutter);
}

.wordmark {
  font-family: var(--serif);
  font-size: 1.4rem;
  /* match the landing hero name — upright Fraunces, light, high optical size */
  font-variation-settings: "opsz" 96, "wght" 340;
  font-style: normal;
  color: var(--paper);
  letter-spacing: -0.025em;
  position: relative;
  text-shadow: 0 1px 12px rgba(10, 9, 8, 0.65), 0 0 24px rgba(10, 9, 8, 0.35);
  transition: text-shadow .4s var(--ease);
}
.site-header.is-scrolled .wordmark { text-shadow: none; }
.wordmark::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -3px;
  height: 1px;
  background: var(--rose);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .5s var(--ease);
}
.wordmark:hover::after { transform: scaleX(1); transform-origin: left; }
.wm-i { font-style: italic; }   /* italic "Kathryn" — used in the wordmark and footer */

.site-nav {
  display: flex;
  gap: clamp(1rem, 2.5vw, 2.25rem);
  font-size: 1.0625rem;
  color: var(--paper);
  font-weight: 400;
}
.site-header.is-scrolled .site-nav { text-shadow: none; }
.site-nav a {
  position: relative;
  padding: 0.4rem 0;
  transition: color .3s var(--ease);
}
.site-nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: var(--rose);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .45s var(--ease);
}
.site-nav a:hover { color: var(--rose); }
.site-nav a:hover::after,
.site-nav a[aria-current="page"]::after {
  transform: scaleX(1);
  transform-origin: left;
}
.site-nav a[aria-current="page"] { color: var(--rose); }

/* Instagram icon link in the nav */
.site-nav { align-items: center; flex-wrap: nowrap; }
/* never let link text wrap onto multiple lines (that read as "overlapping text") */
.site-nav a { white-space: nowrap; }
.wordmark { white-space: nowrap; flex-shrink: 0; }
.site-nav .nav-ig { padding: 0.2rem 0; line-height: 0; }
.site-nav .nav-ig svg { width: 1.2rem; height: 1.2rem; display: block; }
.site-nav .nav-ig::after { display: none; }      /* no underline sweep on the icon */
.site-nav .nav-ig:hover { color: var(--rose); }

@media (max-width: 760px) {
  .site-header { padding: 1rem var(--gutter); }
  .site-header.is-scrolled { padding: 0.7rem var(--gutter); }
  .wordmark { font-size: 1.35rem; }
}

/* ----- Hamburger button (mobile only) ----- */
.nav-toggle {
  display: none;
  background: transparent;
  border: 0;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  margin: -0.5rem -0.5rem -0.5rem 0;
  color: var(--paper);
  cursor: pointer;
  position: relative;
  z-index: 110;
  filter: drop-shadow(0 1px 6px rgba(10, 9, 8, 0.55));
}
.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  display: block;
  width: 1.5rem;
  height: 1.5px;
  background: currentColor;
  border-radius: 1px;
  transition: transform .35s var(--ease), top .35s var(--ease), opacity .25s var(--ease);
  position: relative;
}
.nav-toggle-bars { margin: 0 auto; }
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  content: "";
  position: absolute;
  left: 0;
}
.nav-toggle-bars::before { top: -7px; }
.nav-toggle-bars::after  { top:  7px; }
body.nav-open .nav-toggle-bars                { background: transparent; }
body.nav-open .nav-toggle-bars::before        { top: 0; transform: rotate(45deg); }
body.nav-open .nav-toggle-bars::after         { top: 0; transform: rotate(-45deg); }

/* ----- Fullscreen mobile nav overlay ----- */
.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;            /* always laid out; shown/hidden via visibility */
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse 80% 60% at 50% 50%, rgba(150, 108, 116, 0.18), transparent 65%),
    rgba(5, 4, 3, 0.94);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  /* circular reveal originating at the hamburger (top-right); closed = 0 radius */
  clip-path: circle(0% at calc(100% - 2.6rem) 2.6rem);
  transition:
    clip-path .55s var(--ease-out),
    opacity .4s var(--ease),
    visibility 0s linear .55s;
}
.nav-overlay nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.25rem, 4vh, 2.25rem);
  text-align: center;
}
.nav-overlay a {
  /* match the desktop nav bar: sans, regular weight, upright */
  font-family: var(--sans);
  font-style: normal;
  font-weight: 400;
  font-size: clamp(1.75rem, 7vw, 2.5rem);
  color: var(--paper);
  letter-spacing: -0.005em;
  position: relative;
  padding: 0.2em 0.4em;
  opacity: 0;
  transform: translateY(26px);
  filter: blur(10px);
  transition: color .3s var(--ease),
              opacity .55s var(--ease-out),
              transform .65s var(--ease-out),
              filter .55s var(--ease-out);
}
.nav-overlay a:hover,
.nav-overlay a[aria-current="page"] { color: var(--rose); }

/* Instagram button in the fullscreen overlay */
.nav-overlay .overlay-ig {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  margin-top: clamp(0.5rem, 2vh, 1.25rem);
  padding: 0.55em 1.2em;
  font-size: clamp(0.95rem, 3.5vw, 1.15rem);
  letter-spacing: 0.04em;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  transition: color .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease), opacity .5s var(--ease-out), transform .5s var(--ease-out);
}
.nav-overlay .overlay-ig svg { width: 1.25em; height: 1.25em; display: block; }
.nav-overlay .overlay-ig:hover {
  color: var(--rose);
  border-color: rgba(206, 158, 164, 0.45);
  background: rgba(206, 158, 164, 0.06);
}
.nav-overlay .overlay-sig {
  position: absolute;
  bottom: clamp(1.5rem, 5vh, 3rem);
  left: 0; right: 0;
  text-align: center;
  /* same treatment as the top-left nav wordmark — upright Fraunces, light, tight */
  font-family: var(--serif);
  font-variation-settings: "opsz" 96, "wght" 340;
  font-style: normal;
  font-size: 1.4rem;
  color: var(--paper);
  letter-spacing: -0.025em;
}
body.nav-open { overflow: hidden; }
body.nav-open .nav-overlay {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  clip-path: circle(150% at calc(100% - 2.6rem) 2.6rem);
  transition:
    clip-path .55s var(--ease-out),
    opacity .35s var(--ease),
    visibility 0s;
}
@media (prefers-reduced-motion: reduce) {
  .nav-overlay,
  body.nav-open .nav-overlay { clip-path: none; transition: opacity .25s var(--ease), visibility 0s linear .25s; }
  .nav-overlay a,
  .overlay-sig { filter: none; transform: none; transition: opacity .25s var(--ease); }
}
body.nav-open .nav-overlay a {
  opacity: 1;
  transform: none;
  filter: none;
}
/* links rise + sharpen in sequence after the circular wipe opens the panel */
body.nav-open .nav-overlay a:nth-child(1) { transition-delay: .10s; }
body.nav-open .nav-overlay a:nth-child(2) { transition-delay: .16s; }
body.nav-open .nav-overlay a:nth-child(3) { transition-delay: .22s; }
body.nav-open .nav-overlay a:nth-child(4) { transition-delay: .28s; }
body.nav-open .nav-overlay a:nth-child(5) { transition-delay: .34s; }
body.nav-open .nav-overlay a:nth-child(6) { transition-delay: .40s; }
body.nav-open .nav-overlay a:nth-child(7) { transition-delay: .46s; }

/* the signature settles in last, completing the entrance */
.overlay-sig {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
}
body.nav-open .overlay-sig {
  opacity: 1;
  transform: none;
  transition-delay: .5s;
}

/* Back/close button inside the expanded mobile menu (injected by site.js) */
.nav-back {
  /* simple X, top-right corner */
  position: absolute;
  top: clamp(1.1rem, 4vh, 2.2rem);
  right: var(--gutter);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  color: var(--paper);
  cursor: pointer;
  padding: 0.5rem;
  opacity: 0;
  transform: scale(0.9);
  transition: opacity .4s var(--ease-out), transform .4s var(--ease-out), color .3s var(--ease);
}
.nav-back svg { width: 1.7rem; height: 1.7rem; }
.nav-back:hover { color: var(--rose); }
body.nav-open .nav-back { opacity: 1; transform: none; transition-delay: .15s; }

/* Hamburger is mobile-only (≤768px), matching kironatomtellian.com. */
@media (max-width: 768px) {
  .nav-toggle { display: flex; align-items: center; justify-content: center; }
  .site-nav   { display: none; }
}

/* Home intro: the video plays solo for a beat, then the nav bar drifts down in. */
@media (prefers-reduced-motion: no-preference) {
  body.home .site-header { animation: hero-chrome-in 0.9s var(--ease-out) 2.6s both; }
}
@keyframes hero-chrome-in {
  from { opacity: 0; transform: translateY(-14px); }
  to   { opacity: 1; transform: none; }
}

/* =====================================================
   HERO — full-bleed cinematic
   ===================================================== */

.hero {
  position: relative;
  /* full screen on every device — the clip covers the whole viewport, header
     floats over the top, name overlays the foot */
  min-height: 100svh;
  overflow: hidden;
}

.hero-image {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;            /* clips the gentle parallax scale */
  background: var(--ink-deep);
}
.hero-image img,
.hero-image video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 35%;
  display: block;
  filter: brightness(1.05) contrast(1.05);
  transition: transform 1.6s var(--ease-out);
  will-change: transform;
}
@media (max-width: 760px) {
  .hero-image img,
  .hero-image video { object-position: 50% 30%; }
  /* trim the side padding + tighten tracking so the bigger name still fits
     "Crawford." on one line */
  .hero-mark { padding-left: 0.25rem; padding-right: 0.25rem; }
  .hero-name { font-size: clamp(6rem, 27vw, 10rem); letter-spacing: -0.06em; }
}

/* warm rose-tinted gradient at bottom for type legibility + subtle top scrim for nav */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  /* no top/bottom darkening of the clip — only a soft fade at the very foot so the
     superimposed name keeps a little legibility; reads as a vignette, not a bar */
  background:
    linear-gradient(to top,
      rgba(10, 9, 8, 0.4) 0%,
      rgba(10, 9, 8, 0) 26%);
  pointer-events: none;
  z-index: 1;
}
.hero::before {
  /* warm rose wash on the right side of the hero */
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 80% at 110% 50%, rgba(206, 158, 164, 0.18), transparent 60%);
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: screen;
}

.hero-mark {
  /* superimposed over the foot of the video */
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  width: 100%;
  padding: 0 var(--gutter) clamp(0.75rem, 2vh, 1.5rem);
}
.hero-name {
  display: flex;
  flex-direction: column;
  margin: 0;
  color: rgba(243, 235, 228, 0.5);
  font-family: var(--serif);
  font-variation-settings: "opsz" 144, "wght" 300;
  letter-spacing: -0.025em;
  /* one rule for every viewport so the name is the same font + scale on desktop
     and mobile; floor keeps it readable on phones without a separate override */
  font-size: clamp(3.75rem, 12vw, 10rem);
  line-height: 1.04;
  text-shadow: 0 0 80px rgba(10, 9, 8, 0.5);
}
.hero-name .dot { color: var(--rose); opacity: 1; }
.hero-name .ln {
  display: block;
  opacity: 0;
  transform: translateY(20px);
  animation: hero-ln-in 0.7s var(--ease-out) forwards;
}
/* Intro: the video plays alone for ~1.6s, then the name rises in line by line,
   and the nav bar follows a beat later (see body.home .site-header below). */
.hero-name .ln-1 { font-style: normal; font-variation-settings: "opsz" 144, "wght" 300; animation-delay: 1.6s; }
.hero-name .ln-2 { font-style: italic; font-variation-settings: "opsz" 144, "wght" 300; animation-delay: 1.78s; }
.hero-name .ln-3 { font-style: normal; font-variation-settings: "opsz" 144, "wght" 300; animation-delay: 1.96s; }
.hero-name .dot  { color: var(--rose); }

@keyframes hero-ln-in { to { opacity: 1; transform: none; } }

.hero-rule {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  margin: 0 0 1.4rem;
  opacity: 0;
  animation: hero-ln-in 0.7s var(--ease-out) 2.15s forwards;
}

/* No theatrics for visitors who ask for reduced motion — show name at once. */
@media (prefers-reduced-motion: reduce) {
  .hero-name .ln,
  .hero-rule { animation: none; opacity: 1; transform: none; }
}
.hero-rule::before {
  content: "";
  display: inline-block;
  width: 2.25rem;
  height: 1px;
  background: var(--rose);
}
.hero-rule span {
  font-family: var(--sans);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.34em;
  color: var(--rose);
  font-weight: 500;
}

/* Landscape, short viewport (phones/small tablets held sideways): the fixed nav
   bar and the giant hero name would otherwise eat the whole short screen. Trim
   the bar's height and switch the hero name to height-based scaling so the name
   shrinks with the viewport instead of ballooning off the wide-but-short frame.
   max-height guards desktops (which are landscape too) from being affected. */
@media (orientation: landscape) and (max-height: 600px) {
  .site-header { padding-top: 0.7rem; padding-bottom: 0.7rem; }
  .site-header.is-scrolled { padding-top: 0.45rem; padding-bottom: 0.45rem; }
  .wordmark { font-size: 1.2rem; }
  .site-nav { font-size: 0.95rem; }
  .hero-name { font-size: clamp(2.25rem, 11vh, 5.5rem); }
}

/* =====================================================
   SECTION SCAFFOLDING
   ===================================================== */

main { padding-top: 0; }

.section {
  position: relative;
  padding: var(--rhythm) var(--gutter);
  max-width: var(--max);
  margin: 0 auto;
}
/* The first section after the hero butts right up to where the video ends —
   no dark gap between the hero and the About content. */
.hero + section { padding-top: 0; }
/* …except the home About section, which gets generous space above its header so
   it doesn't crowd the (shorter) hero. */
.hero + #about { padding-top: clamp(3.5rem, 9vh, 7rem); }

.section--full { max-width: none; padding-left: 0; padding-right: 0; }
.section--deep {
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(150, 108, 116, 0.10), transparent 70%),
    radial-gradient(ellipse 70% 50% at 100% 100%, rgba(206, 158, 164, 0.06), transparent 60%),
    var(--ink-deep);
  max-width: none;
  padding-left: var(--gutter); padding-right: var(--gutter);
  position: relative;
}
.section--deep::before,
.section--deep::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 6rem;
  pointer-events: none;
}
.section--deep::before { top: 0;    background: linear-gradient(to bottom, var(--ink), transparent); }
.section--deep::after  { bottom: 0; background: linear-gradient(to top,    var(--ink), transparent); }

.section--blush {
  background:
    radial-gradient(ellipse 80% 70% at 50% 50%, rgba(150, 108, 116, 0.18), transparent 65%),
    linear-gradient(180deg, var(--ink) 0%, rgba(30, 14, 13, 0.6) 50%, var(--ink) 100%);
  max-width: none;
  padding-left: var(--gutter); padding-right: var(--gutter);
  position: relative;
}

/* Section head — no numbers, eyebrow left, optional h2, more right */

.section-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.5rem 2rem;
  align-items: baseline;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid rgba(206, 158, 164, 0.22);
  margin-bottom: clamp(1.75rem, 4vw, 3rem);
  position: relative;
}
.section-head::after {
  /* thin rose accent that draws in on reveal */
  content: "";
  position: absolute;
  left: 0; bottom: -1px;
  width: 4rem;
  height: 1px;
  background: var(--rose);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.9s var(--ease-out) 0.3s;
}
.section-head.in::after { transform: scaleX(1); }
.section-head .eyebrow { grid-column: 1; grid-row: 1; }
.section-head .more    { grid-column: 2; grid-row: 1; align-self: baseline; }
.section-head h2 {
  grid-column: 1 / -1;
  grid-row: 2;
  margin-top: 0.85rem;
  font-style: italic;
  font-variation-settings: "opsz" 144, "wght" 320;
}

/* Section-head 'more' link — typographically twinned with .eyebrow so the
   two ends of the header read as one system: rose label, quiet arrow-link. */
.more {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: var(--mute);
  position: relative;
  padding-bottom: 2px;
  transition: color .3s var(--ease), gap .35s var(--ease);
  white-space: nowrap;
}
@media (max-width: 760px) {
  .more { font-size: 0.78rem; letter-spacing: 0.24em; }
}
.more::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: var(--rose);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s var(--ease);
}
.more:hover { gap: 0.95rem; color: var(--rose); }
.more:hover::after { transform: scaleX(1); }

/* =====================================================
   ABOUT
   ===================================================== */

.about-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: start;
}
@media (min-width: 880px) {
  .about-grid {
    grid-template-columns: 5fr 7fr;
    gap: clamp(2rem, 5vw, 5rem);
  }
}
.about-portrait {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  margin: 0;
  background: var(--ink-lift);
}
.about-portrait img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 35%;
  transition: transform 1.6s var(--ease-out);
}
.about-portrait:hover img { transform: scale(1.04); }
/* Calmer reveal than the default: no upward slide and no bottom-up wipe — the
   frame fades in while the image settles back from a slight zoom. */
.about-portrait.reveal { transform: none; transition: opacity .9s var(--ease-out); }
.about-portrait.mask { clip-path: inset(0 0 0 0); }
.about-portrait.reveal img { transform: scale(1.09); transition: transform 1.3s var(--ease-out); }
.about-portrait.reveal.in img { transform: scale(1); }

.about-text { padding-top: clamp(1rem, 3vw, 3rem); }
.about-text .lede { margin-bottom: 2.5rem; }

/* =====================================================
   B&W IMAGE STRIP (manually navigable)
   ===================================================== */

.strip {
  --strip-h: clamp(20rem, 58vh, 36rem);
  position: relative;
  padding: 1rem 0;
}
.strip-track {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  /* No scroll-snap / smooth here: the auto-scroll drives scrollLeft frame by
     frame, and mandatory snap would fight (and stall) that motion. */
  padding: 0 var(--gutter);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.strip-track::-webkit-scrollbar { display: none; }
.strip-track figure {
  margin: 0;
  flex: 0 0 auto;
  height: var(--strip-h);
  overflow: hidden;
  background: var(--ink-lift);
}
.strip-track figure.is-zoomable { cursor: zoom-in; }
.strip-track figure.is-zoomable:focus-visible {
  outline: 2px solid var(--rose-bright);
  outline-offset: 3px;
}
.strip-track figure img {
  height: 100%; width: auto;
  object-fit: cover;
  transition: transform 1.4s var(--ease-out);
}
.strip-track figure:hover img { transform: scale(1.04); }

.strip-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  border: 1px solid rgba(206, 158, 164, 0.55);
  /* near-solid ink so the arrow stays crisp over busy photos
     (the old translucent glass read as "low res") */
  background:
    linear-gradient(135deg, rgba(20, 17, 15, 0.92), rgba(10, 9, 8, 0.92));
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5);
  color: var(--paper);
  width: 3.25rem; height: 3.25rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: background .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease), transform .35s var(--ease);
}
.strip-nav:hover {
  background: linear-gradient(135deg, var(--rose-bright), var(--rose-deep));
  border-color: var(--rose-bright);
  color: var(--ink);
  transform: translateY(-50%) scale(1.06);
}
.strip-nav svg { width: 1.4rem; height: 1.4rem; }
.strip-prev { left: clamp(0.5rem, 1.5vw, 1.25rem); }
.strip-next { right: clamp(0.5rem, 1.5vw, 1.25rem); }
@media (max-width: 640px) {
  /* widescreen photos overflow tiny screens at full height — shrink the strip
     so each whole photo is visible at a glance instead of cropping past the edge */
  .strip { --strip-h: clamp(11rem, 30vh, 15rem); }
  .strip-nav { display: none; } /* swipe on mobile */
}

/* ===== Lightbox (click a strip photo to expand) ===== */
body.lightbox-open { overflow: hidden; }
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(8, 7, 6, 0.92);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s var(--ease), visibility .4s var(--ease);
}
.lightbox[aria-hidden="false"] { opacity: 1; visibility: visible; }
.lightbox-stage {
  margin: 0;
  max-width: min(92vw, 1100px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  transform: scale(0.97);
  transition: transform .4s var(--ease-out);
}
.lightbox[aria-hidden="false"] .lightbox-stage { transform: scale(1); }
.lightbox-stage img {
  max-width: 100%;
  max-height: 82vh;
  width: auto; height: auto;
  object-fit: contain;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
}
.lightbox-stage figcaption {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: 0.95rem;
  color: var(--mute);
  text-align: center;
  max-width: 60ch;
}
.lightbox-close, .lightbox-nav {
  position: absolute;
  z-index: 2;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(206, 158, 164, 0.5);
  background: linear-gradient(135deg, rgba(20, 17, 15, 0.92), rgba(10, 9, 8, 0.92));
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5);
  color: var(--paper);
  cursor: pointer;
  padding: 0;
  transition: background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.lightbox-nav { width: 3.25rem; height: 3.25rem; top: 50%; transform: translateY(-50%); }
.lightbox-close { width: 2.75rem; height: 2.75rem; top: clamp(0.75rem, 2vw, 1.5rem); right: clamp(0.75rem, 2vw, 1.5rem); }
.lightbox-prev { left: clamp(0.5rem, 2vw, 1.5rem); }
.lightbox-next { right: clamp(0.5rem, 2vw, 1.5rem); }
.lightbox-close:hover, .lightbox-nav:hover {
  background: linear-gradient(135deg, var(--rose-bright), var(--rose-deep));
  border-color: var(--rose-bright);
  color: var(--ink);
}
.lightbox-nav:hover { transform: translateY(-50%) scale(1.06); }
.lightbox-close svg, .lightbox-nav svg { width: 1.4rem; height: 1.4rem; }
@media (max-width: 640px) {
  .lightbox-nav { width: 2.6rem; height: 2.6rem; }
  .lightbox-stage figcaption { font-size: 0.85rem; }
}
@media (prefers-reduced-motion: reduce) {
  .lightbox, .lightbox-stage { transition: none; }
}

/* =====================================================
   WORK
   ===================================================== */

.work-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rule);
}
/* Work PAGE: the page-head already draws a divider, so drop the list's own top
   border to avoid two lines stacked near the top. (Homepage keeps its border.) */
.page .work-list { border-top: 0; }
.work-list li {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: 0.4rem 1.5rem;
  padding: 1.85rem 1.25rem 1.85rem 0;
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
  position: relative;
  transition: padding-left .45s var(--ease), background .35s var(--ease);
}
/* no marker dash — the hover is just the slide */
.work-list li::before { content: none; }
.work-list li:hover {
  /* just the slide — no colour wash on hover */
  padding-left: 1.5rem;
}
.work-list li:hover::before { opacity: 1; width: 1rem; }
@media (min-width: 760px) {
  .work-list li {
    grid-template-columns: 5.5rem minmax(0, 1.3fr) minmax(0, 1.4fr);
    gap: 1.5rem;
  }
}
.work-year {
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--rose);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
  align-self: baseline;
}
.work-title {
  font-family: var(--serif);
  font-variation-settings: "opsz" 48, "wght" 360;
  font-size: clamp(1.25rem, 2.4vw, 1.8rem);
  font-style: italic;
  color: var(--paper);
  line-height: 1.15;
}
.work-meta {
  color: var(--mute);
  font-size: 0.92rem;
  line-height: 1.4;
}
@media (max-width: 760px) {
  .work-list li {
    grid-template-columns: 1fr;
    gap: 0.35rem;
    padding: 1.5rem 0;
  }
  .work-list li::before { display: none; }
  .work-list li:hover { padding-left: 0; }
  .work-year { font-size: 0.78rem; }
}

/* Expandable piece descriptions */
.work-list li.has-desc { cursor: pointer; outline: none; }
.work-list li.has-desc:focus-visible { padding-left: 1.5rem; }
.work-list li.has-desc:focus-visible::before { opacity: 1; width: 1rem; }
/* Hairline plus/minus pinned to the lower-right of the card. Closed: a thin rose
   "+"; open: the vertical stroke collapses to leave a single "–". Built from two
   1px pseudo-element rules rather than a glyph so the strokes stay crisp and the
   collapse can be eased independently. Quieter and less "web-widget" than an arrow. */
.work-toggle {
  display: block;
  width: 0.72rem;
  height: 0.72rem;
  position: absolute;
  right: 0.2rem;
  bottom: 1.45rem;
  opacity: 0.55;
  transition: opacity .3s var(--ease);
}
.work-toggle::before,
.work-toggle::after {
  content: "";
  position: absolute;
  background: var(--rose);
  transition: transform .45s var(--ease-out), opacity .35s var(--ease);
}
/* horizontal stroke — always present */
.work-toggle::before {
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  transform: translateY(-50%);
}
/* vertical stroke — collapses on open, turning the "+" into a "–" */
.work-toggle::after {
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  transform: translateX(-50%) scaleY(1);
}
.work-list li:hover .work-toggle,
.work-list li:focus-visible .work-toggle { opacity: 1; }
.work-list li.open .work-toggle::after { transform: translateX(-50%) scaleY(0); }
@media (max-width: 760px) {
  .work-toggle { bottom: 1.2rem; right: 0.05rem; }
}

.work-desc-public {
  grid-column: 1 / -1;
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .45s var(--ease), margin-top .45s var(--ease), opacity .4s var(--ease);
  opacity: 0;
  margin-top: 0;
}
.work-desc-public > p {
  overflow: hidden;
  margin: 0;
  max-width: 60ch;
  color: var(--paper-soft);
  font-size: 0.98rem;
  line-height: 1.6;
}
.work-list li.open .work-desc-public {
  grid-template-rows: 1fr;
  opacity: 1;
  margin-top: 1.1rem;
}
@media (min-width: 760px) {
  .work-desc-public { grid-column: 2 / -1; }
}
.work-hint {
  margin-top: 1.5rem;
  color: var(--mute);
  opacity: 0.7;
}

/* =====================================================
   WATCH (reels)
   ===================================================== */

.reel { margin: 0; display: block; }
.reel-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--ink-lift);
}
.reel-frame img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.6s var(--ease-out);
}
/* Reels keep their native controls (scrub bar + fullscreen) — only the still
   placeholder reels get the decorative .reel-play overlay below. */
.reel-frame video { cursor: pointer; }
.reel-frame:hover img {
  transform: scale(1.04);
}
.reel-play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: clamp(4rem, 7vw, 6rem);
  height: clamp(4rem, 7vw, 6rem);
  border: 1px solid rgba(243, 235, 228, 0.7);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  background:
    linear-gradient(135deg, rgba(206, 158, 164, 0.10), rgba(10, 9, 8, 0.20));
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(243, 235, 228, 0.10);
  transition: transform .5s var(--ease), background .4s var(--ease), border-color .4s var(--ease);
}
.reel-play::before {
  content: "";
  width: 0; height: 0;
  border-left: 0.9rem solid var(--paper);
  border-top: 0.6rem solid transparent;
  border-bottom: 0.6rem solid transparent;
  margin-left: 0.25rem;
  transition: border-left-color .4s var(--ease);
}
.reel-frame:hover .reel-play {
  transform: scale(1.1);
  background: var(--rose);
  border-color: var(--rose);
}
/* Custom reel controls — hidden while the clip just plays; revealed on hover
   (desktop) or a tap (mobile via .controls-visible). No video darkening; each
   control carries its own blur so it stays legible over the footage. */
.reel-controls {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: clamp(0.55rem, 1.4vw, 0.9rem);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
  pointer-events: none;
}
.reel-frame.has-controls:hover .reel-controls,
.reel-frame.controls-visible .reel-controls,
.reel-frame:fullscreen .reel-controls,
.reel-frame:-webkit-full-screen .reel-controls {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.rc-btn {
  flex: 0 0 auto;
  width: 2.3rem; height: 2.3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(243, 235, 228, 0.45);
  border-radius: 50%;
  color: var(--paper);
  background: rgba(10, 9, 8, 0.3);
  backdrop-filter: blur(10px) saturate(150%);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  cursor: pointer;
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.rc-btn:hover { background: var(--rose); color: var(--ink); border-color: var(--rose); }
.rc-btn svg { width: 52%; height: 52%; display: block; }
.rc-play svg { fill: currentColor; }
.rc-progress {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  height: 1.4rem;
  cursor: pointer;
  touch-action: none;
}
.rc-track {
  position: relative;
  width: 100%;
  height: 6px;
  border-radius: 999px;
  /* dark, blurred base + hairline edge so the bar stays legible over any footage
     without darkening the video itself */
  background: rgba(10, 9, 8, 0.5);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(243, 235, 228, 0.2);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.rc-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0%;
  border-radius: 999px;
  background: var(--rose-bright);
  box-shadow: 0 0 8px rgba(230, 188, 192, 0.55);
}
/* knob at the playhead for a clear, grabbable position */
.rc-fill::after {
  content: "";
  position: absolute;
  right: 0; top: 50%;
  width: 13px; height: 13px;
  transform: translate(50%, -50%);
  border-radius: 50%;
  background: var(--paper);
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.55);
}
.rc-progress:focus-visible { outline: none; }
.rc-progress:focus-visible .rc-track { box-shadow: 0 0 0 2px rgba(206, 158, 164, 0.7); }
.reel-frame:fullscreen { background: #000; }
.reel-frame:-webkit-full-screen { background: #000; }
.reel-frame:fullscreen video { object-fit: contain; }
.reel-frame:-webkit-full-screen video { object-fit: contain; }

.reel-ribbon {
  position: absolute;
  top: 1rem; left: 1rem;
  font-family: var(--sans);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--paper);
  border: 1px solid rgba(206, 158, 164, 0.4);
  padding: 0.45rem 0.8rem;
  backdrop-filter: blur(10px) saturate(160%);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  background:
    linear-gradient(135deg, rgba(206, 158, 164, 0.18), rgba(10, 9, 8, 0.35));
  box-shadow: inset 0 1px 0 rgba(243, 235, 228, 0.08);
}
.reel figcaption {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.reel-caption {
  font-family: var(--serif);
  font-variation-settings: "opsz" 48;
  font-size: 1.1rem;
  color: var(--mute);
}
.reel--lead { margin-bottom: 4rem; }
.reel-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
@media (min-width: 760px) { .reel-grid { grid-template-columns: repeat(2, 1fr); gap: 2.5rem; } }
@media (min-width: 1100px) { .reel-grid { grid-template-columns: repeat(3, 1fr); gap: 2rem; } }

/* =====================================================
   CONTACT (homepage preview)
   ===================================================== */

.contact-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1.5rem;
}
.contact-line a {
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(1.3rem, 3.4vw, 2.1rem);
  letter-spacing: -0.01em;
  color: var(--rose);
  position: relative;
  padding-bottom: 0.12em;
  transition: color .35s var(--ease);
}
.contact-line a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  transform-origin: right;
  transition: transform .55s var(--ease);
}
.contact-line a:hover { color: var(--rose-bright); }
.contact-line a:hover::after { transform: scaleX(0); transform-origin: left; }

.socials {
  display: flex;
  gap: 1.5rem;
  margin-top: 1.5rem;
  align-items: center;
}
.socials a {
  font-family: var(--sans);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--paper);
  border-bottom: 1px solid var(--rule-strong);
  padding-bottom: 3px;
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.socials a:hover { color: var(--rose); border-color: var(--rose); }

/* Contact page — pared back to a simple left-aligned stack (email + Instagram) */
.contact-simple {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.6rem;
}
.contact-email {
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(1.4rem, 4vw, 2.4rem);
  letter-spacing: -0.01em;
  color: var(--rose);
  transition: color .3s var(--ease);
}
.contact-email:hover { color: var(--rose-bright); }
.contact-email--sm { font-size: clamp(1.15rem, 2.6vw, 1.6rem); }
.contact-channel { display: flex; flex-direction: column; gap: 0.4rem; }
.contact-label {
  font-family: var(--sans);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--mute);
}
.contact-socials {
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem;
  margin-top: 0.4rem;
}
.contact-socials .icon-link {
  font-size: 1.05rem;
  color: var(--paper);
  transition: color .3s var(--ease);
}
.contact-socials .icon-link:hover { color: var(--rose); }

/* =====================================================
   FOOTER
   ===================================================== */

.site-footer {
  border-top: 1px solid var(--rule);
  padding: 2.5rem var(--gutter);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  font-size: 0.75rem;
  color: var(--mute);
  letter-spacing: 0.04em;
}
.site-footer .sig {
  /* same treatment as the top-left nav wordmark */
  font-family: var(--serif);
  font-variation-settings: "opsz" 96, "wght" 340;
  font-style: normal;
  letter-spacing: -0.025em;
  color: var(--paper);
  font-size: 1.4rem;
}
.site-footer .footer-ig {
  color: var(--rose);
  border-bottom: 1px solid var(--rose);
  padding-bottom: 1px;
}

/* =====================================================
   INNER PAGES
   ===================================================== */

main.page {
  padding-top: clamp(7rem, 13vh, 10rem);
  max-width: var(--max);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  padding-bottom: var(--rhythm);
}

.page-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: end;
  margin-bottom: clamp(3rem, 8vw, 6rem);
  /* extra room so italic descenders (the "y" in Gallery) clear the divider */
  padding-bottom: clamp(2.25rem, 4.5vw, 3.5rem);
  border-bottom: 1px solid var(--rule);
}
@media (min-width: 760px) {
  .page-head { grid-template-columns: 1fr auto; }
}
/* eyebrow + Download-CV button share one block so they line up with each other
   (left-aligned on mobile, right-aligned and flush under the title on desktop) */
.page-head-aside {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  align-items: flex-start;
}
@media (min-width: 760px) {
  .page-head-aside { align-items: flex-end; text-align: right; }
}
.page-title {
  font-family: var(--serif);
  font-variation-settings: "opsz" 144, "wght" 360;
  font-style: italic;
  font-size: clamp(4rem, 14vw, 10rem);
  line-height: 0.9;
  letter-spacing: -0.03em;
  margin: 0;
  color: var(--paper);
}
.page-title .dot { color: var(--rose); }

.page-section { margin-bottom: clamp(2.25rem, 5vw, 4rem); }
.page-section h2 {
  margin-bottom: 1.5rem;
  font-style: italic;
  font-variation-settings: "opsz" 96, "wght" 360;
  color: var(--paper);
}

.prose {
  max-width: 34em;
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--paper);
}
.prose p + p { margin-top: 1em; }

/* About page */
.about-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 6vw, 3.5rem);
}
@media (min-width: 880px) {
  .about-layout {
    grid-template-columns: 5fr 6fr;
    column-gap: clamp(2rem, 5vw, 5rem);
    row-gap: clamp(2.5rem, 5vw, 4.5rem);
    align-items: start;
  }
  /* photos in the left column, text in the right — alternating rows */
  .about-photo--1 { grid-column: 1; grid-row: 1; }
  .about-prose--1 { grid-column: 2; grid-row: 1; }
  .about-photo--2 { grid-column: 1; grid-row: 2; }
  .about-prose--2 { grid-column: 2; grid-row: 2; }
}
.about-photo {
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  background: var(--ink-lift);
  display: block;
}

.cv-list {
  list-style: none;
  padding: 0; margin: 0;
  border-top: 1px solid var(--rule);
}
.cv-list li {
  display: grid;
  grid-template-columns: 5rem 1fr;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
  position: relative;
  transition: padding-left .45s var(--ease);
}
/* same movement-only hover as the work cards — just the slide, no marker, no wash */
.cv-list li:hover { padding-left: 1.5rem; }
.cv-year {
  font-family: var(--mono);
  font-size: 0.85rem;
  color: var(--mute);
  font-variant-numeric: tabular-nums;
}
.cv-detail {
  font-family: var(--serif);
  font-style: italic;
  font-variation-settings: "opsz" 48;
  font-size: 1.15rem;
  color: var(--paper);
}

/* Gallery page — masonry (varied heights, tops align per column) */
.gallery-grid {
  /* one gap value drives both the horizontal AND vertical spacing (the JS masonry
     reads this same value), so the padding between photos is always identical and
     only the differing photo heights create the stagger */
  --gallery-gap: 1.25rem;
  column-count: 1;
  column-gap: var(--gallery-gap);
}
@media (min-width: 640px)  { .gallery-grid { column-count: 2; } }
@media (min-width: 1024px) { .gallery-grid { column-count: 3; } }
.gallery-grid figure {
  break-inside: avoid;
  margin: 0 0 var(--gallery-gap);
  overflow: hidden;
  background: var(--ink-lift);
  position: relative;
  display: block;
}
.gallery-grid figure img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 1.4s var(--ease-out);
}
.gallery-grid figure:hover img { transform: scale(1.04); }
/* Subtle, always-visible photographer credit beneath each photo */
.photo-credit {
  font-family: var(--sans);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mute);
  padding: 0.5rem 0.15rem 0.1rem;
  line-height: 1.3;
}
.gallery-grid figure.is-zoomable { cursor: zoom-in; }
.gallery-grid figure.is-zoomable:focus-visible { outline: 2px solid var(--rose); outline-offset: 3px; }
/* Row-major masonry (JS-positioned): figures become absolutely placed so the top
   row aligns and the rest staggers. JS sets each figure's left/top/width + the
   grid height. */
.gallery-grid.is-masonry { position: relative; }
.gallery-grid.is-masonry figure { margin: 0; }
/* On a narrow (vertical) phone the masonry is one column, so wide landscape
   photos read tiny. Crop just those (.is-wide, flagged in site.js) to a portrait
   window biased to the upper third — the face. Portrait photos are left intact. */
@media (max-width: 639px) {
  /* crop the IMG (not the whole figure) so a credit caption can sit below it
     without being clipped by the figure's overflow:hidden */
  .gallery-grid figure.is-wide img {
    aspect-ratio: 3 / 4;
    height: auto;
    width: 100%;
    object-fit: cover;
    object-position: center 28%;
  }
}

/* Contact page */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
}
@media (min-width: 760px) { .contact-grid { grid-template-columns: 1fr 1fr 1fr; } }
.contact-block h3 {
  font-family: var(--sans);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--rose);
  margin-bottom: 1rem;
  font-weight: 500;
}
.contact-block a {
  font-family: var(--serif);
  font-variation-settings: "opsz" 48;
  font-style: italic;
  font-size: 1.5rem;
  display: inline-block;
  position: relative;
  padding-bottom: 2px;
  color: var(--paper);
  transition: color .3s var(--ease);
}
.contact-block a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  transform-origin: right;
  transition: transform .5s var(--ease);
}
.contact-block a:hover { color: var(--rose); }
.contact-block a:hover::after { transform: scaleX(0); transform-origin: left; }
.contact-block p { color: var(--mute); }
.contact-block--socials { display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; }
.contact-block--socials a { font-size: 1.2rem; }

/* =====================================================
   SCROLL REVEAL
   ===================================================== */

.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.75s var(--ease-out), transform 0.75s var(--ease-out);
}
.reveal.in { opacity: 1; transform: none; }

.mask {
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1s var(--ease-out);
}
.mask.in { clip-path: inset(0 0 0 0); }

/* ----- Icons ----- */
.icon {
  width: 1.05em;
  height: 1.05em;
  display: inline-block;
  vertical-align: -0.18em;
  flex-shrink: 0;
}
.icon-link {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
}
.ext::after {
  content: " \2197"; /* ↗ */
  font-size: 0.78em;
  color: var(--rose);
  margin-left: 0.2em;
  display: inline-block;
  transform: translateY(-0.05em);
}

@media (prefers-reduced-motion: reduce) {
  .reveal, .mask { opacity: 1; transform: none; clip-path: none; transition: none; }
  html { scroll-behavior: auto; }
}