/* ---------------------------------------------------------------
   Self-hosted fonts (no third-party requests; resolves the privacy
   note re: Google Fonts). Latin + Latin-Extended subsets so the CV's
   accented names (Zachęta, Humlebæk, Farès…) render in-face.
   --------------------------------------------------------------- */
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("assets/fonts/cormorant-garamond-latin-300-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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("assets/fonts/cormorant-garamond-latin-ext-300-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: "Cormorant Garamond";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/cormorant-garamond-latin-400-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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/cormorant-garamond-latin-ext-400-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: "Cormorant Garamond";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/cormorant-garamond-latin-500-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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/cormorant-garamond-latin-ext-500-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: "Cormorant Garamond";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/cormorant-garamond-latin-400-italic.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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/cormorant-garamond-latin-ext-400-italic.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: "Inter";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("assets/fonts/inter-latin-300-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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("assets/fonts/inter-latin-ext-300-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: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/inter-latin-400-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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/inter-latin-ext-400-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: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/inter-latin-500-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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/inter-latin-ext-500-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;
}

/* ---------------------------------------------------------------
   Prototype stylesheet — palette & typography only.
   Layout, spacing and structure mirror styles.css exactly.
   Goal: let the artist's photos lead. UI recedes.
   --------------------------------------------------------------- */

:root {
  /* Cooler, more neutral paper — kills the wedding-stationer cream story */
  --paper: #f6f3ed;        /* paper, warmth reduced ~40% */
  --ink: #161614;          /* a hair cooler near-black */
  --muted: #5f574f;        /* secondary UI text: quiet, but no longer faint */
  --secondary: #675f57;    /* supporting editorial text with firmer contrast */
  --accent: #4b3328;       /* one archival accent: deep umber/oxide */
  --accent-text: #161614;  /* default hover = ink; accent is reserved for active states */
  --line: #e6dfd2;         /* nearly-invisible dividers (decorative only) */
  --control-border: #8f8676;/* form-field borders: meets WCAG 1.4.11 (>=3:1 on paper) */
  --soft: #ebe6dc;         /* cool putty for image placeholders */
  --measure: 68ch;

  /* Type system — display face shifts to Cormorant Garamond
     (more refined / lighter than Bodoni Moda for an art portfolio).
     UI face stays Inter but leans on lighter weights. */
  --font-display: "Cormorant Garamond", "Bodoni Moda", Didot, "Bodoni 72", serif;
  --font-ui: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-serif-essay: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --type-site: 12.75px;
  --type-label: 13px;
  --type-small: 13px;
  --type-micro: 12.5px;
  --type-caption-title: clamp(24px, 1.75vw, 32px);
  --type-artwork-title: clamp(24px, 1.9vw, 32px);
  --type-project-title: clamp(44px, 4vw, 56px);
  --type-panel-title: clamp(38px, 3.2vw, 46px);
  --type-statement: clamp(24px, 1.75vw, 28px);
  --type-record-heading: clamp(19px, 1.35vw, 24px);
  --tracking-small: .035em;
  --tracking-label: .045em;

  color-scheme: light;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* Stop iOS from inflating type in landscape / on orientation change */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 400;            /* readable default; 300 reserved for muted asides */
  line-height: 1.6;
  letter-spacing: .005em;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Remove the grey/blue flash when tapping links and buttons on touch */
  -webkit-tap-highlight-color: transparent;
}

body.is-lightbox-open {
  overflow: hidden;
}

body.is-video-expanded {
  overflow: hidden;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
  background: var(--soft);
}

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

button {
  color: inherit;
  font: inherit;
}

.sr-only,
.skip-link {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link:focus {
  z-index: 100;
  top: 12px;
  left: 12px;
  width: auto;
  height: auto;
  padding: 8px 10px;
  clip: auto;
  background: var(--ink);
  color: var(--paper);
}

.site-header {
  position: fixed;
  z-index: 20;
  top: 0;
  left: 0;
  right: 0;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 24px;
  min-height: 66px;
  padding: 18px clamp(18px, 4vw, 54px);
  /* Header almost dissolves into the page so it never competes with work */
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  border-bottom: 1px solid transparent;
  backdrop-filter: blur(18px);
  transition: border-color 200ms ease, background 200ms ease;
}

.site-header.is-scrolled {
  border-bottom-color: var(--line);
  background: color-mix(in srgb, var(--paper) 96%, white);
}

.brand {
  width: max-content;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 400;            /* lighter — Cormorant has more presence than Bodoni at 500 */
  letter-spacing: .01em;
  text-transform: none;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 28px);
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: var(--type-site);
  font-weight: 500;
  letter-spacing: var(--tracking-small);
  text-transform: none;
}

.site-nav a {
  border-bottom: 1px solid transparent;
  transition: color 200ms ease;
}

.site-nav a:hover,
.site-nav a:focus-visible {
  color: var(--ink);
}

.site-nav a[aria-current="page"],
.footer-nav a[aria-current="page"] {
  color: var(--accent);
  border-bottom-color: color-mix(in srgb, var(--accent) 42%, transparent);
}

.nav-toggle {
  display: none;
  border: 0;
  background: transparent;
  width: 44px;
  height: 38px;
  padding: 8px 0;
  justify-self: end;
}

.nav-toggle span:not(.sr-only) {
  display: block;
  width: 22px;
  height: 1px;
  margin: 6px 0;
  background: var(--ink);
}

main {
  min-height: 100vh;
}

.work-page {
  min-height: 100vh;
  padding: 132px clamp(18px, 4vw, 54px) clamp(88px, 10vw, 140px);
}

#work {
  /* Golden-ratio offset: 66px header × φ (1.618) ≈ 107px from the top of
     the window to the first artwork, so the image opens the page and sits
     fully inside the first view. */
  padding-top: 107px;
}

.work-intro {
  display: grid;
  grid-template-columns: minmax(120px, .24fr) minmax(0, 560px);
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
  max-width: 1740px;
  margin: 0 auto clamp(52px, 6vw, 86px);
  padding: 18px 0 clamp(24px, 3vw, 38px);
  border-top: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
  border-bottom: 1px solid var(--line);
}

.work-intro p {
  margin: 0 0 28px;
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: var(--type-label);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  line-height: 1.42;
}

.work-intro-copy {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 1.4vw, 22px);
}

.work-intro h2 {
  max-width: 24ch;
  margin: 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(26px, 2.35vw, 36px);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.12;
}

/* Plain-language identifier paired with the thematic line, so a newcomer
   immediately knows who the artist is (audit cat. 14). */
.work-intro p.work-intro-ident {
  max-width: 52ch;
  margin: 0;
  color: var(--secondary);
  font-family: var(--font-ui);
  font-size: var(--type-small);
  font-weight: 400;
  letter-spacing: var(--tracking-small);
  line-height: 1.55;
  text-transform: none;
}

.portfolio-title {
  margin: 0 0 clamp(42px, 5vw, 72px);
  font-family: var(--font-display);
  font-size: var(--type-project-title);
  font-weight: 400;            /* Cormorant at 400 reads quieter than Bodoni 500 */
  line-height: 1;
  letter-spacing: .005em;
  text-align: center;
  color: var(--ink);
}

.static-redirect {
  max-width: 48ch;
  margin: clamp(-18px, -1.5vw, -10px) auto 0;
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: var(--type-small);
  font-weight: 400;
  line-height: 1.55;
  text-align: center;
}

.static-redirect a {
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  transition: border-color 180ms ease;
}

.static-redirect a:hover,
.static-redirect a:focus-visible {
  border-bottom-color: var(--ink);
}

.privacy-shell {
  max-width: 64ch;
  margin: 0 auto;
  color: var(--secondary);
  font-family: var(--font-ui);
  font-size: var(--type-small);
  line-height: 1.7;
  text-align: left;
}

.privacy-shell p {
  margin: 0 0 1.2em;
}

.privacy-updated {
  color: var(--muted);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
}

.privacy-shell h2 {
  margin: 2em 0 .55em;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--type-record-heading);
  font-weight: 400;
  letter-spacing: .005em;
}

.privacy-shell a {
  color: var(--ink);
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 42%, transparent);
  transition: border-color 180ms ease;
}

.privacy-shell a:hover,
.privacy-shell a:focus-visible {
  border-bottom-color: var(--ink);
}

.work-quote-break {
  grid-column: 1 / -1;
  width: min(880px, 100%);
  margin: clamp(10px, 2vw, 28px) auto;
  padding: clamp(64px, 7vw, 96px) clamp(18px, 4vw, 48px);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  text-align: center;
}

.work-quote-break blockquote {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.4vw, 3rem);
  font-style: italic;
  font-weight: 400;
  letter-spacing: .002em;
  line-height: 1.25;
  text-wrap: balance;
}

.work-quote-break cite {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 10px;
  margin-top: clamp(28px, 3.4vw, 44px);
  font-style: normal;
}

.work-quote-break .critic-pub {
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .14em;
  line-height: 1;
  text-transform: uppercase;
}

.work-quote-break .critic-sep {
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: .78rem;
  line-height: 1;
}

.work-quote-break .critic-byline {
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: .78rem;
  font-weight: 400;
  letter-spacing: .1em;
  line-height: 1;
  text-transform: uppercase;
}

@media (max-width: 900px) {
  .work-quote-break {
    margin: 8px auto;
    padding: clamp(48px, 9vw, 72px) 18px;
  }

  .work-quote-break blockquote {
    font-size: clamp(1.5rem, 5.6vw, 2.2rem);
  }
}

.project-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* Vertical rhythm pulled to ~1.15:1 against the column gap so rows read as
     one field instead of drifting apart (was up to 2:1 vertical:horizontal). */
  gap: clamp(60px, 6.5vw, 104px) clamp(40px, 5vw, 80px);
  max-width: 1740px;
  margin: 0 auto;
}

/* Curatorial rhythm: every 5th card spans full-width as a wide accent,
   and the final card is promoted too so no orphan sits in the tail. */
.project-card.project-card--wide {
  grid-column: 1 / -1;
  grid-template-rows: minmax(560px, 45vw) auto;
}

.project-card.project-card--wide .project-card-title {
  font-size: var(--type-project-title);
}

/* Opening image: full-bleed under the header exactly like the other wide
   cards, but its height stops at the window so the bottom edge is visible
   in the first view (window minus 107px top offset minus a 41px breath —
   both steps of the 66px header × φ scale). */
@media (min-width: 901px) {
  .project-card.project-card--featured.project-card--wide {
    grid-template-rows: max(420px, calc(100svh - 148px)) auto;
  }
}
.project-card.project-card--unfolding {
  grid-template-rows: minmax(560px, 45vw) auto;
}

.project-card.project-card--upekkha {
  grid-column: 1 / -1;
  grid-template-rows: minmax(500px, 40vw) auto;
}

.project-card.project-card--eschaton {
  grid-column: 1 / -1;
  grid-template-rows: minmax(500px, 40vw) auto;
}

.project-card.project-card--cosmos2012 {
  grid-column: auto;
  grid-template-rows: auto auto;
}

.project-card.project-card--alchemy {
  grid-column: auto;
  grid-template-rows: auto auto;
}

.project-card.project-card--ashoura {
  grid-column: auto;
  grid-template-rows: auto auto;
}

.project-card.project-card--metanoia {
  grid-column: auto;
  grid-template-rows: auto auto;
}

.project-card.project-card--upekkha .project-card-title,
.project-card.project-card--eschaton .project-card-title {
  font-size: var(--type-project-title);
}

.project-card.project-card--cosmos2012 .project-card-title {
  font-size: var(--type-caption-title);
}

.travel-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(46px, 5vw, 76px) clamp(34px, 4.5vw, 66px);
  max-width: 1740px;
  margin: 0 auto;
}

.travel-index {
  width: min(920px, 100%);
  margin: clamp(-22px, -1.6vw, -12px) auto clamp(46px, 5vw, 72px);
  padding: 14px 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px clamp(22px, 3vw, 38px);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.travel-index a {
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: var(--type-label);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  line-height: 1.42;
  text-transform: none;
  transition: color 180ms ease;
}

.travel-index a:hover,
.travel-index a:focus-visible {
  color: var(--ink);
}

.project-card,
.travel-card {
  display: grid;
  /* Tighter caption row — title sits closer to the image */
  grid-template-rows: auto auto;
  align-self: start;
  overflow: hidden;
  background: transparent;     /* no white card frame — image floats on paper */
  border-radius: 2px;
  color: var(--ink);
  contain: layout paint;
}

.travel-card {
  grid-template-rows: auto auto;
}

/* <picture> wraps responsive AVIF/WebP sources. display:contents removes its
   box so the inner <img> keeps inheriting layout from the original parent
   (flex item sizing, 100% height, aspect-ratio all behave as before). */
picture {
  display: contents;
}

.project-card-image,
.travel-card-image {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: var(--soft);
}

.project-card-image {
  background: var(--paper);
}

.project-card:not(.project-card--wide) .project-card-image {
  aspect-ratio: 4 / 3;
}

.project-card.project-card--cosmos2012 .project-card-image {
  aspect-ratio: 4 / 3;
}

.project-card.project-card--upekkha .project-card-image,
.project-card.project-card--eschaton .project-card-image {
  aspect-ratio: auto;
  height: 100%;
}

.project-card-image img,
.travel-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.project-card-image img {
  object-fit: cover;
  background: var(--paper);
}

.project-card-placeholder {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  color: var(--muted);
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--soft) 58%, var(--paper));
  font-family: var(--font-ui);
  font-size: var(--type-label);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: none;
}

.project-card-placeholder:empty::before {
  content: "";
  width: 26%;
  max-width: 92px;
  height: 1px;
  background: color-mix(in srgb, var(--ink) 18%, transparent);
}

.travel-card-image {
  /* Travel work is mostly landscape — frame tiles wide (3:2) rather than
     cropping to a near-square. Driven by aspect-ratio so rows stay auto. */
  aspect-ratio: 3 / 2;
}

.travel-card-caption {
  display: grid;
  justify-items: center;
  padding-top: 14px;
}

/* Caption block under each image: title, then small muted year */
.project-card-caption {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 14px 12px 4px;       /* lifts the title close to the photo */
}

.project-card-title,
.travel-card-title {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--type-caption-title);
  font-weight: 400;
  font-style: normal;
  letter-spacing: .005em;
  line-height: 1.14;
  text-align: center;
}

.project-card-meta {
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: var(--type-label);
  font-weight: 400;
  letter-spacing: var(--tracking-small);
  line-height: 1.2;
  text-transform: none;
}

.video-grid {
  max-width: min(1320px, 90vw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(58px, 6vw, 92px) clamp(34px, 4vw, 68px);
  align-items: start;
}

.video-card {
  margin: 0;
  display: grid;
  gap: 16px;
}

.video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--ink);
}

.video-frame video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--ink);
}

.video-frame video::-webkit-media-controls-fullscreen-button {
  display: none;
}

.video-frame.is-expanded {
  position: fixed;
  z-index: 90;
  inset: 0;
  aspect-ratio: auto;
  display: grid;
  place-items: center;
  border-radius: 0;
  background: #000;
}

.video-frame.is-expanded video {
  width: 100vw;
  height: 100vh;
  object-fit: contain;
}

.video-expand-button {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--paper);
  cursor: pointer;
  opacity: .82;
  filter: drop-shadow(0 1px 5px rgb(0 0 0 / .65));
  transition: opacity 180ms ease, transform 180ms ease;
}

.video-frame.is-expanded .video-expand-button {
  top: 18px;
  right: 18px;
  width: 46px;
  height: 46px;
  opacity: .92;
}

.video-expand-button:hover,
.video-expand-button:focus-visible {
  opacity: 1;
  transform: scale(1.06);
}

.video-expand-button .expand-mark {
  width: 20px;
  height: 20px;
}

.video-caption {
  display: grid;
  justify-items: center;
}

.video-title {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--type-artwork-title);
  font-style: normal;
  font-weight: 400;
  line-height: 1.05;
}

@media (max-width: 900px) {
  .video-grid {
    max-width: min(680px, 100%);
    grid-template-columns: 1fr;
    gap: 54px;
  }

  .video-card,
  .video-card:nth-child(n) {
    grid-column: auto;
    margin-top: 0;
  }

  .video-caption {
    justify-items: center;
  }
}

.contact-page {
  min-height: 64vh;
}

.contact-shell {
  max-width: min(720px, calc(100vw - 96px));
  margin: 0 auto;
  text-align: left;
}

.contact-heading {
  margin: 0 0 clamp(14px, 2vw, 20px);
  font-family: var(--font-display);
  font-size: var(--type-project-title);
  font-weight: 400;
  line-height: 1;
  letter-spacing: .005em;
  color: var(--ink);
}

.contact-email-lead {
  margin: 0 0 clamp(30px, 4.5vw, 46px);
}

.contact-page .contact-email {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 1.0625rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.4;
  color: var(--accent);
}

.contact-page .contact-email:hover,
.contact-page .contact-email:focus-visible {
  color: var(--ink);
}

.contact-kicker {
  margin: 0 0 clamp(26px, 4vw, 40px);
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: var(--type-small);
  font-weight: 500;
  letter-spacing: var(--tracking-small);
  line-height: 1.48;
}

.contact-note {
  max-width: 42ch;
  margin: clamp(24px, 4vw, 34px) 0 0;
  color: var(--secondary);
  font-family: var(--font-ui);
  font-size: var(--type-small);
  font-weight: 400;
  letter-spacing: var(--tracking-small);
  line-height: 1.6;
}

.contact-email {
  display: inline-block;
  max-width: 100%;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(28px, 2.8vw, 38px);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.08;
  overflow-wrap: anywhere;
  transition: color 180ms ease;
}

.contact-email:hover,
.contact-email:focus-visible {
  color: var(--accent-text);
}

.contact-social {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  margin-top: clamp(34px, 5vw, 52px);
  padding-top: 18px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: var(--type-label);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.contact-social a {
  color: inherit;
  text-decoration: none;
  transition: color 180ms ease;
}

.contact-social a:hover,
.contact-social a:focus-visible {
  color: var(--ink);
}

/* Icon links (Instagram / Facebook) */
.contact-social a[aria-label] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: -6px 0;
  color: var(--ink);
}

.contact-social a[aria-label]:first-child {
  margin-left: -10px;
}

.contact-social a[aria-label]:hover,
.contact-social a[aria-label]:focus-visible {
  color: var(--accent);
}

.contact-social svg {
  display: block;
}

/* Divider sits above the icons, so the email text stays above the line */
.contact-direct .contact-social {
  margin-top: 16px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  gap: 4px;
}

/* Typed inquiry shortcuts */
.contact-inquiries {
  list-style: none;
  margin: clamp(26px, 4vw, 36px) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  font-family: var(--font-ui);
  font-size: var(--type-label);
  letter-spacing: var(--tracking-small);
}

.contact-inquiries a {
  color: var(--secondary);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  padding-bottom: 2px;
  transition: color 180ms ease, border-color 180ms ease;
}

.contact-inquiries a:hover,
.contact-inquiries a:focus-visible {
  color: var(--ink);
  border-color: var(--ink);
}

/* Contact form */
.contact-form {
  margin-top: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2.6vw, 24px);
  font-family: var(--font-ui);
}

.contact-form-intro {
  margin: 0;
  color: var(--muted);
  font-size: var(--type-small);
  letter-spacing: var(--tracking-small);
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.contact-form label {
  display: flex;
  flex-direction: column;
  gap: 7px;
  color: var(--muted);
  font-size: var(--type-micro);
  letter-spacing: var(--tracking-small);
  text-transform: uppercase;
}

/* Keep each caption on a single line so paired inputs align */
.contact-form .field-label {
  display: block;
  white-space: nowrap;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
  font-family: var(--font-ui);
  font-size: 15px;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--control-border);
  border-radius: 2px;
  padding: 11px 12px;
  text-transform: none;
  letter-spacing: 0;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

.contact-form input:focus-visible,
.contact-form select:focus-visible,
.contact-form textarea:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  border-color: var(--ink);
}

/* Fallback for browsers without :focus-visible — keep a clear indicator */
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  border-color: var(--ink);
  box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--ink);
}

.contact-form input:focus:not(:focus-visible),
.contact-form select:focus:not(:focus-visible),
.contact-form textarea:focus:not(:focus-visible) {
  box-shadow: none;
}

.contact-form textarea {
  resize: vertical;
  min-height: 120px;
}

.form-honeypot {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.form-actions {
  display: block;
  margin-top: clamp(4px, 1vw, 10px);
}

.contact-form-submit {
  width: 100%;
  font-family: var(--font-ui);
  font-size: var(--type-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--accent);
  background: transparent;
  border: 1px solid var(--accent);
  border-radius: 2px;
  padding: 16px 26px;
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease;
}

.contact-form-submit:hover,
.contact-form-submit:focus-visible {
  color: var(--paper);
  background: var(--accent);
  border-color: var(--accent);
}

/* White input fields + Share block for the redesigned contact page */
.contact-page .contact-form input,
.contact-page .contact-form select,
.contact-page .contact-form textarea {
  background: #fdfcfa;
  border-color: #d8d0c2;
  padding: 13px 14px;
}

.contact-page .contact-form textarea {
  min-height: 190px;
}

.contact-share {
  margin-top: clamp(44px, 6vw, 68px);
  padding-top: clamp(26px, 4vw, 36px);
  border-top: 1px solid var(--line);
}

.contact-share-title {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: .005em;
  color: var(--ink);
}

.contact-share-note {
  margin: 0 0 clamp(18px, 3vw, 24px);
  color: var(--secondary);
  font-family: var(--font-ui);
  font-size: var(--type-small);
  letter-spacing: var(--tracking-small);
}

.contact-share .contact-social {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
  align-items: center;
  gap: 12px;
}

.contact-social-divide {
  display: inline-block;
  width: 1px;
  height: 22px;
  margin: 0 8px;
  background: var(--line);
}

.form-status {
  margin: 0;
  min-height: 1.2em;
  color: var(--secondary);
  font-size: var(--type-small);
  letter-spacing: var(--tracking-small);
}

@media (max-width: 600px) {
  .form-grid { grid-template-columns: 1fr; }
}

/* Simple contact form layout */
.contact-intro {
  max-width: 54ch;
  margin: 0 0 clamp(14px, 2vw, 20px);
  color: var(--secondary);
  font-family: var(--font-ui);
  font-size: var(--type-small);
  line-height: 1.6;
  letter-spacing: var(--tracking-small);
}

.contact-form { max-width: 100%; }

.opt {
  text-transform: none;
  letter-spacing: 0;
  color: var(--muted);
  font-weight: 400;
}

.form-consent {
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
  text-transform: none;
  color: var(--secondary);
  font-size: var(--type-small);
  letter-spacing: var(--tracking-small);
}

.form-consent input {
  width: auto;
  flex: 0 0 auto;
  margin-top: 3px;
}

.form-consent a { color: var(--ink); }

.contact-direct {
  margin-top: clamp(34px, 5vw, 52px);
  font-family: var(--font-ui);
  font-size: var(--type-small);
  color: var(--muted);
}

.contact-direct p { margin: 0 0 14px; }

.contact-direct .contact-email {
  font-family: var(--font-ui);
  font-size: 1rem;
  color: var(--ink);
}

/* Per-project inquiry CTA */
.project-inquire {
  margin: clamp(22px, 3vw, 30px) 0 0;
  font-family: var(--font-ui);
  font-size: var(--type-label);
  letter-spacing: var(--tracking-small);
}

.project-inquire a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 2px;
  transition: color 180ms ease, border-color 180ms ease;
}

.project-inquire a:hover,
.project-inquire a:focus-visible {
  color: var(--accent);
  border-color: var(--accent);
}

/* Footer rights line */
.footer-meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 48ch;
}

.footer-rights {
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: var(--type-micro);
  letter-spacing: var(--tracking-small);
  line-height: 1.5;
}

.footer-rights a { color: inherit; }

.footer-rights a:hover,
.footer-rights a:focus-visible { color: var(--ink); }

.site-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  min-height: 170px;
  padding: 34px clamp(18px, 4vw, 54px);
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: var(--type-label);
  letter-spacing: var(--tracking-label);
  line-height: 1.45;
  text-transform: none;
}

.site-footer p {
  margin: 0;
}

.footer-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(18px, 2.8vw, 42px);
  flex-wrap: wrap;
}

.footer-nav a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.footer-nav a:hover,
.footer-nav a:focus-visible {
  color: var(--ink);
}

.hero {
  min-height: 100vh;
  padding: 96px clamp(18px, 4vw, 54px) 42px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 320px);
  gap: clamp(22px, 5vw, 70px);
  align-items: end;
}

.hero-image {
  margin: 0;
  height: calc(100vh - 138px);
  min-height: 520px;
  display: grid;
  align-items: center;
  justify-items: center;
}

.hero-image img {
  width: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.hero-copy {
  align-self: end;
  max-width: 310px;
  padding-bottom: 1vh;
  min-width: 0;
}

.eyebrow {
  margin: 0 0 12px;
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: var(--type-label);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: none;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: 0;
}

h1 {
  font-size: var(--type-project-title);
}

h2 {
  font-size: var(--type-project-title);
}

h3 {
  font-size: var(--type-artwork-title);
}

.intro {
  margin: 20px 0 26px;
  color: var(--muted);
  font-weight: 300;
  overflow-wrap: break-word;
}

.text-link {
  display: inline-flex;
  width: max-content;
  border-bottom: 1px solid currentColor;
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--type-label);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: none;
}

.section {
  padding: clamp(72px, 11vw, 150px) clamp(18px, 4vw, 54px);
  border-top: 1px solid var(--line);
}

.project-section {
  padding-top: clamp(60px, 7vw, 110px);
  padding-bottom: clamp(120px, 14vw, 220px);
  border-top: 0;
}

.section-heading {
  display: grid;
  grid-template-columns: minmax(170px, 22vw) minmax(0, 1fr);
  gap: 28px;
  align-items: baseline;
  margin-bottom: clamp(34px, 6vw, 76px);
}

.project-section .section-heading {
  display: none;
  margin-bottom: 0;
}

/* Gallery navigation in the middle of the fixed header:
   previous project — current project — next project. The current title
   stays exactly centred on the page via the 1fr / auto / 1fr columns. */
.header-project-nav {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: baseline;
  gap: clamp(14px, 1.6vw, 28px);
  width: min(30vw, 430px);
}

/* The [hidden] attribute must beat the display:grid above, so the cluster
   only exists while a project gallery is open. */
.header-project-nav[hidden] {
  display: none;
}

.header-project-title {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 400;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}

/* Hide when the header centre is too narrow to sit between brand and nav */
@media (max-width: 1159px) {
  .header-project-nav {
    display: none;
  }
}

.project-neighbor {
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: var(--type-label);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  line-height: 1.42;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 180ms ease;
}

.project-neighbor:hover,
.project-neighbor:focus-visible {
  color: var(--ink);
}

.project-neighbor-prev {
  justify-self: end;
}

.project-neighbor-next {
  justify-self: start;
}

.project-intro {
  max-width: var(--measure);
  margin: 0 auto clamp(48px, 8vw, 96px);
}

.work-display + .project-intro {
  margin-top: clamp(38px, 7vw, 86px);
}

.project-intro p {
  margin: 0 0 1.1em;
  color: var(--muted);
  font-weight: 300;
  overflow-wrap: break-word;
}

.project-intro.has-essay {
  display: block;
  max-width: none;
  margin: clamp(72px, 9vw, 126px) 0 0;
}

.project-resource-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(52px, 8vw, 124px);
  max-width: min(1180px, calc(100vw - 96px));
  margin: 0 auto clamp(42px, 5vw, 76px);
}

.project-resource-grid--downloads-only {
  grid-template-columns: minmax(0, 1fr);
  max-width: min(720px, calc(100vw - 96px));
}

.project-resource-column {
  border-top: 1px solid var(--line);
}

.project-detail-row,
.project-download-row {
  display: grid;
  grid-template-columns: minmax(104px, .34fr) minmax(0, 1fr);
  gap: clamp(24px, 3.2vw, 54px);
  padding: 20px 0 21px;
  border-bottom: 1px solid var(--line);
}

.project-detail-row span,
.download-type {
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: var(--type-label);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  line-height: 1.35;
  text-transform: none;
}

.project-detail-row strong,
.download-label {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--type-record-heading);
  font-weight: 400;
  line-height: 1.45;
}

.project-download-row {
  grid-template-columns: minmax(0, 1fr) auto;
}

.download-label {
  justify-self: start;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 28%, transparent);
  transition: border-color 200ms ease, color 200ms ease;
}

.download-type {
  align-self: center;
  font-size: var(--type-label);
}

.project-download-row:hover .download-label,
.project-download-row:focus-visible .download-label {
  border-color: var(--accent-text);
  color: var(--accent-text);
}

.object-record {
  display: grid;
  grid-template-columns: minmax(170px, 250px) minmax(0, 1fr);
  gap: clamp(44px, 7vw, 118px);
  max-width: min(1180px, calc(100vw - 96px));
  margin: clamp(46px, 5vw, 78px) auto clamp(68px, 7vw, 112px);
  padding-top: clamp(28px, 3.5vw, 48px);
  border-top: 1px solid var(--line);
}

.object-record:empty {
  display: none;
}

.object-record-aside p,
.object-record-inquire,
.object-record-link,
.object-record-copy,
.object-record-row span,
.object-record-section h3 {
  margin: 0;
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: var(--type-label);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  line-height: 1.42;
  text-transform: none;
}

.object-record-inquire,
.object-record-link,
.object-record-copy {
  display: block;
  width: max-content;
  margin-top: 18px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 24%, transparent);
  background: transparent;
  color: color-mix(in srgb, var(--secondary) 86%, var(--paper));
  cursor: pointer;
}

/* Inquiry is the one action a collector is looking for — give it ink weight
   and the archival accent underline so it reads as primary, quietly. */
.object-record-inquire {
  margin-top: 0;
  color: var(--ink);
  font-weight: 500;
  border-bottom-color: color-mix(in srgb, var(--accent) 52%, transparent);
}

.object-record-inquire:hover,
.object-record-inquire:focus-visible,
.object-record-link:hover,
.object-record-link:focus-visible,
.object-record-copy:hover,
.object-record-copy:focus-visible {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

/* "In preparation" cards: inert, quieted, but holding their slot in the grid. */
.project-card--pending,
.travel-card--pending {
  cursor: default;
}

.project-card--pending .project-card-title,
.travel-card--pending .travel-card-title {
  color: var(--muted);
}

.object-record-body {
  min-width: 0;
}

.object-record-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  max-width: 620px;
  border-top: 1px solid var(--line);
}

.object-record-row {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  align-items: baseline;
  gap: clamp(20px, 2.4vw, 36px);
  padding: 15px 0 16px;
  border-bottom: 1px solid var(--line);
}

.object-record-row strong {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--type-record-heading);
  font-weight: 400;
  line-height: 1.32;
}

.object-record-context {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 56px);
  margin-top: clamp(34px, 4vw, 54px);
}

.object-record-section ul {
  display: grid;
  gap: 16px;
  margin: 15px 0 0;
  padding: 0;
  list-style: none;
}

.object-record-section li {
  display: grid;
  gap: 4px;
  padding-top: 14px;
  border-top: 1px solid color-mix(in srgb, var(--line) 76%, transparent);
}

.object-record-section strong {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--type-record-heading);
  font-weight: 500;
  line-height: 1.18;
}

.object-record-section span,
.object-record-section em,
.object-record-section p {
  margin: 0;
  color: var(--secondary);
  font-family: var(--font-ui);
  font-size: var(--type-small);
  font-style: normal;
  font-weight: 400;
  line-height: 1.55;
}

.object-record-section em {
  color: color-mix(in srgb, var(--secondary) 78%, var(--paper));
}

.project-dossier {
  display: grid;
  grid-template-columns: minmax(170px, 250px) minmax(0, 1fr);
  gap: clamp(44px, 7vw, 118px);
  max-width: min(1180px, calc(100vw - 96px));
  margin: 0 auto clamp(76px, 8vw, 126px);
  padding-top: clamp(32px, 4vw, 54px);
  border-top: 1px solid var(--line);
}

.project-dossier-aside p,
.project-dossier-body h3 {
  margin: 0;
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: var(--type-label);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  line-height: 1.42;
  text-transform: none;
}

.project-dossier-aside span {
  display: block;
  max-width: 22ch;
  margin-top: 18px;
  color: color-mix(in srgb, var(--secondary) 84%, var(--paper));
  font-family: var(--font-ui);
  font-size: var(--type-small);
  font-weight: 400;
  line-height: 1.55;
}

.project-dossier-body {
  display: grid;
  gap: clamp(34px, 4.5vw, 58px);
}

.project-dossier-statement {
  max-width: 62ch;
}

.project-dossier-statement h3,
.project-dossier-list h3 {
  margin-bottom: 14px;
}

.project-dossier-statement p {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-serif-essay);
  font-size: var(--type-statement);
  font-weight: 400;
  line-height: 1.42;
}

.project-dossier-sections {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(34px, 4vw, 64px) clamp(42px, 6vw, 96px);
}

.project-dossier-list {
  min-width: 0;
}

.project-dossier-list ul {
  display: grid;
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.project-dossier-list li {
  display: grid;
  gap: 4px;
  padding-top: 15px;
  border-top: 1px solid color-mix(in srgb, var(--line) 76%, transparent);
}

.project-dossier-list strong {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--type-record-heading);
  font-weight: 500;
  line-height: 1.18;
}

.project-dossier-list span,
.project-dossier-list em,
.project-dossier-list p {
  margin: 0;
  color: var(--secondary);
  font-family: var(--font-ui);
  font-size: var(--type-small);
  font-style: normal;
  font-weight: 400;
  line-height: 1.55;
}

.project-dossier-list em {
  color: color-mix(in srgb, var(--secondary) 78%, var(--paper));
  font-size: var(--type-label);
}

.essay-cover,
.essay-page {
  max-width: min(1180px, calc(100vw - 96px));
  margin: 0 auto;
}

.essay-cover {
  min-height: clamp(520px, 72vh, 760px);
  padding: clamp(18px, 3vw, 40px) 0 clamp(48px, 7vw, 88px);
}

.essay-cover h3 {
  margin: clamp(34px, 6vw, 86px) 0 0;
  font-family: var(--font-display);
  font-size: var(--type-project-title);
  font-weight: 400;            /* lighter weight reads more elegant at display size */
  line-height: 1;
  letter-spacing: .005em;
}

.essay-cover p,
.essay-page h4,
.essay-aside p {
  color: var(--muted);
  font-family: var(--font-ui);
  font-weight: 500;
  text-transform: none;
}

.essay-cover p {
  max-width: min(74vw, 900px);
  margin: clamp(18px, 2vw, 30px) 0 0;
  color: var(--accent-text);
  font-size: var(--type-small);
  letter-spacing: var(--tracking-label);
  text-align: right;
}

.essay-cover blockquote {
  max-width: 430px;
  margin: clamp(150px, 16vw, 220px) 0 0 clamp(48px, 6vw, 98px);
  padding-left: 28px;
  border-left: 1px solid color-mix(in srgb, var(--ink) 60%, white);
  color: color-mix(in srgb, var(--ink) 92%, white);
  font-family: var(--font-display);
  font-size: var(--type-statement);
  font-style: italic;
  font-weight: 400;
  line-height: 1.22;
}

.essay-page {
  /* Height follows content. A fixed min-height forced short sections to ~840px+,
     leaving large voids before the next section label. Even spacing now comes
     from padding alone, so long and short sections share one rhythm. */
  padding: clamp(48px, 6vw, 80px) 0 clamp(56px, 7vw, 96px);
}

.essay-page h4 {
  margin: 0 0 38px 42px;
  font-size: var(--type-label);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
}

.essay-layout {
  display: grid;
  grid-template-columns: minmax(230px, 310px) minmax(0, 1fr);
  gap: clamp(48px, 6vw, 86px);
  align-items: start;
}

.essay-aside {
  padding-left: 62px;
  color: var(--muted);
}

.essay-aside blockquote {
  margin: 0 0 clamp(72px, 9vw, 116px);
  color: var(--accent-text);
  font-family: var(--font-display);
  font-size: var(--type-statement);
  font-style: italic;
  font-weight: 400;
  line-height: 1.38;
}

/* Sections without a pull-quote shouldn't reserve the quote's bottom margin. */
.essay-aside blockquote:empty {
  display: none;
}

.essay-aside p {
  margin: 0;
  font-size: var(--type-label);
  letter-spacing: var(--tracking-label);
}

.essay-body {
  padding-left: clamp(42px, 5vw, 72px);
  border-left: 1px solid color-mix(in srgb, var(--ink) 16%, white);
  color: var(--ink);
  font-family: var(--font-serif-essay);
  font-size: var(--type-statement);
  font-weight: 400;
  line-height: 1.4;
}

.essay-body p {
  margin: 0 0 1.3em;
  color: inherit;
}

.essay-body .essay-closing {
  margin-top: 2.2em;
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: var(--type-label);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  line-height: 1.3;
  text-transform: none;
}

.information-page {
  padding-right: 0;
  padding-left: 0;
}

.dossier-loading,
.dossier-shell {
  color: var(--ink);
}

.dossier-loading {
  display: grid;
  min-height: 56vh;
  place-items: center;
  gap: 14px;
  padding: 0 24px;
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: var(--type-small);
  letter-spacing: var(--tracking-label);
  text-align: center;
  text-transform: none;
}

.dossier-skeleton-eyebrow {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--type-panel-title);
  font-weight: 400;
  letter-spacing: .005em;
  line-height: 1;
}

.dossier-skeleton-line {
  max-width: 52ch;
  margin: 0;
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: var(--type-small);
  font-weight: 400;
  letter-spacing: .04em;
  line-height: 1.55;
  text-transform: none;
}

.dossier-skeleton-note {
  margin: 22px 0 0;
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: var(--type-micro);
  font-weight: 500;
  letter-spacing: .07em;
  line-height: 1.15;
  text-transform: uppercase;
  opacity: .65;
}

.dossier-hero,
.dossier-curator-downloads,
.dossier-jump-nav--information,
.dossier-section {
  max-width: min(1180px, calc(100vw - 96px));
  margin: 0 auto;
}

.dossier-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
  gap: clamp(44px, 6vw, 86px);
  align-items: start;
  min-height: auto;
  padding: clamp(42px, 7vw, 88px) 0 clamp(56px, 7vw, 92px);
  border-bottom: 1px solid var(--line);
}

.dossier-curator-downloads {
  display: grid;
  grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
  gap: clamp(44px, 6vw, 86px);
  align-items: start;
  padding: clamp(42px, 5vw, 68px) 0 clamp(38px, 5vw, 62px);
  border-bottom: 1px solid var(--line);
}

.dossier-jump-nav--information {
  padding: clamp(34px, 5vw, 58px) 0 clamp(42px, 5vw, 66px);
  border-bottom: 1px solid var(--line);
}

/* Information page: section links become a sticky left rail on desktop so
   curators can pivot between bio / CV / exhibitions / press without scrolling
   back to the top. Collapses to a quiet wrapped list on small screens. */
.dossier-layout {
  max-width: min(1320px, calc(100vw - 72px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(176px, 220px) minmax(0, 1fr);
  gap: clamp(40px, 5vw, 76px);
  align-items: start;
}

.dossier-rail {
  position: sticky;
  top: 96px;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: calc(100vh - 132px);
  overflow-y: auto;
  padding: 4px 6px 4px 0;
}

.dossier-rail-label {
  margin: 0 0 16px;
  color: var(--secondary);
  font-family: var(--font-ui);
  font-size: var(--type-micro);
  font-weight: 600;
  letter-spacing: .14em;
  line-height: 1;
  text-transform: uppercase;
}

.dossier-rail a {
  display: block;
  padding: 9px 0 9px 15px;
  border-left: 2px solid color-mix(in srgb, var(--ink) 12%, transparent);
  color: color-mix(in srgb, var(--ink) 62%, var(--paper));
  font-family: var(--font-ui);
  font-size: var(--type-small);
  font-weight: 500;
  letter-spacing: var(--tracking-small);
  line-height: 1.35;
  text-transform: none;
  transition: color 160ms ease, border-color 160ms ease, padding-left 160ms ease;
}

.dossier-rail a:hover,
.dossier-rail a:focus-visible {
  color: var(--ink);
  border-left-color: color-mix(in srgb, var(--ink) 45%, transparent);
  padding-left: 19px;
}

.dossier-rail a.is-active {
  color: var(--ink);
  border-left-color: var(--accent-text);
}

.dossier-content {
  min-width: 0;
}

/* No-JS / crawler fallback: real, linkable content when the SPA can't boot. */
.noscript-fallback {
  max-width: min(760px, calc(100vw - 48px));
  margin: 0 auto;
  padding: clamp(96px, 12vw, 140px) 0 clamp(56px, 8vw, 96px);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--type-small);
  line-height: 1.6;
}

.noscript-fallback h1 {
  margin: 0 0 18px;
  font-family: var(--font-display);
  font-size: clamp(34px, 6vw, 52px);
  font-weight: 400;
  letter-spacing: .01em;
  line-height: 1.05;
}

.noscript-fallback h2 {
  margin: 40px 0 12px;
  font-family: var(--font-ui);
  font-size: var(--type-micro);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--secondary);
}

.noscript-fallback p {
  margin: 0 0 14px;
  max-width: 60ch;
}

.noscript-fallback ul {
  margin: 0;
  padding-left: 18px;
}

.noscript-fallback li {
  margin: 0 0 8px;
}

.noscript-fallback a {
  color: var(--accent-text);
}

@media (max-width: 900px) {
  .dossier-layout {
    grid-template-columns: 1fr;
    gap: 0;
    max-width: calc(100vw - 36px);
  }

  .dossier-rail {
    position: static;
    max-height: none;
    overflow: visible;
    flex-flow: row wrap;
    gap: 6px 22px;
    padding: 0 0 26px;
    margin-bottom: 30px;
    border-bottom: 1px solid var(--line);
  }

  .dossier-rail-label {
    flex: 1 0 100%;
    margin-bottom: 8px;
  }

  .dossier-rail a {
    padding: 4px 0;
    border-left: 0;
    border-bottom: 1px solid transparent;
  }

  .dossier-rail a:hover,
  .dossier-rail a:focus-visible {
    padding-left: 0;
    border-left: 0;
    border-bottom-color: color-mix(in srgb, var(--ink) 45%, transparent);
  }

  .dossier-rail a.is-active {
    border-left: 0;
    border-bottom-color: var(--accent-text);
  }
}

.dossier-jump-nav a,
.dossier-aside p,
.dossier-year,
.dossier-download,
.dossier-download-panel p,
.dossier-download-panel em {
  font-family: var(--font-ui);
  font-weight: 500;
  letter-spacing: var(--tracking-small);
  text-transform: none;
}

.dossier-jump-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px clamp(28px, 4vw, 56px);
  counter-reset: dossier-section -1;
}

.dossier-jump-nav a {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: end;
  min-height: 74px;
  padding: 18px 0 15px;
  border-top: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  color: color-mix(in srgb, var(--ink) 72%, var(--paper));
  cursor: pointer;
  font-size: var(--type-small);
  line-height: 1.5;
  overflow-wrap: anywhere;
  transition: border-color 180ms ease, color 180ms ease, padding-left 180ms ease;
}

.dossier-jump-nav a::before {
  counter-increment: dossier-section;
  content: counter(dossier-section, decimal-leading-zero);
  color: var(--secondary);
  font-size: var(--type-micro);
  letter-spacing: var(--tracking-small);
  line-height: 1.45;
}

.dossier-jump-nav a::after {
  content: "View";
  justify-self: end;
  color: var(--secondary);
  font-size: var(--type-micro);
  letter-spacing: var(--tracking-small);
  line-height: 1.45;
  opacity: .78;
}

.dossier-download-panel {
  border-top: 1px solid color-mix(in srgb, var(--ink) 22%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
  padding: 24px 0 26px;
}

.dossier-download-panel p {
  margin: 0;
  color: var(--muted);
  font-size: var(--type-label);
  line-height: 1.35;
}

.dossier-download-panel h2 {
  max-width: 8ch;
  margin: 22px 0 18px;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--type-panel-title);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1;
}

.dossier-download-panel span {
  display: block;
  margin: 0;
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: var(--type-small);
  font-weight: 400;
  letter-spacing: .01em;
  line-height: 1.65;
}

.dossier-download-panel em {
  display: block;
  margin-top: 22px;
  color: var(--secondary);
  font-size: var(--type-micro);
  font-style: normal;
  line-height: 1.4;
}

.dossier-download {
  display: inline-block;
  margin-top: 18px;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 34%, transparent);
  color: var(--accent-text);
  font-size: var(--type-small);
}

.dossier-resource-panel {
  display: grid;
  grid-template-columns: minmax(210px, 300px) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 76px);
  max-width: min(1180px, calc(100vw - 96px));
  margin: 0 auto;
  padding: clamp(30px, 4vw, 44px) 0 clamp(34px, 5vw, 58px);
  border-bottom: 1px solid var(--line);
}

.dossier-resource-panel--curator {
  max-width: none;
  margin: 0;
  padding: 0;
  border-bottom: 0;
  grid-template-columns: minmax(170px, 230px) minmax(0, 1fr);
  gap: clamp(26px, 4vw, 42px);
}

.dossier-resource-panel--curator .dossier-resource-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dossier-resource-heading {
  border-top: 1px solid color-mix(in srgb, var(--accent) 42%, transparent);
  padding-top: 18px;
}

.dossier-resource-heading p,
.dossier-resource-label,
.dossier-resource-card em,
.dossier-resource-action {
  margin: 0;
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: var(--type-label);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  line-height: 1.42;
  text-transform: none;
}

.dossier-resource-heading span {
  display: block;
  max-width: 28ch;
  margin-top: 16px;
  color: var(--secondary);
  font-family: var(--font-ui);
  font-size: var(--type-small);
  line-height: 1.58;
}

.dossier-resource-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid color-mix(in srgb, var(--accent) 42%, transparent);
  border-left: 1px solid var(--line);
}

.dossier-resource-card {
  min-height: 250px;
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 18px 18px 20px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--soft) 26%, var(--paper));
  transition: background 180ms ease, border-color 180ms ease, color 180ms ease;
}

.dossier-resource-card:hover,
.dossier-resource-card:focus-visible {
  background: color-mix(in srgb, var(--soft) 48%, var(--paper));
  border-bottom-color: color-mix(in srgb, var(--accent) 46%, transparent);
}

.dossier-resource-card strong {
  max-width: 12ch;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--type-record-heading);
  font-weight: 400;
  line-height: 1.12;
}

.dossier-resource-description {
  color: var(--secondary);
  font-family: var(--font-ui);
  font-size: var(--type-small);
  font-weight: 400;
  line-height: 1.55;
}

.dossier-resource-card em {
  align-self: end;
  color: color-mix(in srgb, var(--secondary) 78%, var(--paper));
  font-style: normal;
}

.dossier-resource-action {
  width: max-content;
  color: var(--accent);
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 42%, transparent);
}

.dossier-jump-nav a:hover,
.dossier-jump-nav a:focus-visible,
.dossier-download:hover,
.dossier-download:focus-visible {
  color: var(--ink);
}

.dossier-jump-nav a:hover,
.dossier-jump-nav a:focus-visible {
  padding-left: 8px;
  border-top-color: color-mix(in srgb, var(--ink) 42%, transparent);
  border-bottom-color: color-mix(in srgb, var(--ink) 28%, transparent);
}

.dossier-jump-nav a:hover::before,
.dossier-jump-nav a:focus-visible::before,
.dossier-jump-nav a:hover::after,
.dossier-jump-nav a:focus-visible::after {
  color: var(--ink);
}

.dossier-section {
  display: grid;
  grid-template-columns: minmax(230px, 320px) minmax(0, 1fr);
  gap: 76px;
  padding: clamp(56px, 7vw, 104px) 0;
  border-bottom: 1px solid var(--line);
  scroll-margin-top: 112px;
}

/* Prose sections size to content — a former min-height: 94vh stretched short
   sections and opened the same large voids seen on the essay pages. */

.dossier-aside {
  color: var(--muted);
}

.dossier-aside p {
  margin: 0 0 76px;
  font-size: var(--type-small);
  line-height: 1.48;
}

.dossier-aside blockquote {
  margin: 0;
  color: var(--accent-text);
  font-family: var(--font-display);
  font-size: var(--type-statement);
  font-style: italic;
  font-weight: 400;
  line-height: 1.3;
}

.dossier-body {
  padding-left: 64px;
  border-left: 1px solid color-mix(in srgb, var(--ink) 15%, white);
  max-width: min(64ch, 820px);
}

.dossier-section--prose .dossier-body {
  color: var(--ink);
  font-family: var(--font-serif-essay);
  font-size: var(--type-statement);
  font-weight: 400;
  line-height: 1.44;
  max-width: min(58ch, 820px);
}

.dossier-body p {
  margin: 0 0 1.15em;
}

.dossier-overview {
  padding-top: 92px;
}

.dossier-overview .dossier-aside p {
  margin-bottom: clamp(34px, 4vw, 52px);
  color: var(--ink);
  font-size: var(--type-small);
}

.dossier-overview .dossier-aside blockquote {
  max-width: 360px;
  color: var(--secondary);
  font-size: var(--type-statement);
  line-height: 1.32;
}

.dossier-fact-list {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
  max-width: 64ch;
}

.dossier-fact {
  display: grid;
  grid-template-columns: minmax(140px, .35fr) minmax(0, 1fr);
  gap: 34px;
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
}

.dossier-fact span,
.dossier-highlight-block h3,
.dossier-editorial h3,
.dossier-editorial h4,
.dossier-archive-label {
  margin: 0;
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: var(--type-small);
  font-weight: 500;
  letter-spacing: var(--tracking-small);
  line-height: 1.45;
  text-transform: none;
}

.dossier-fact strong {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--type-statement);
  font-weight: 400;
  line-height: 1.24;
}

.dossier-highlight-block,
.dossier-editorial {
  margin: 46px 0 54px;
  padding: 30px 0 0;
  border-top: 1px solid var(--line);
  max-width: 64ch;
}

.dossier-highlight-block h3,
.dossier-editorial h3 {
  color: var(--accent-text);
  margin-bottom: 22px;
}

.dossier-highlight-block ul,
.dossier-editorial ul {
  display: grid;
  gap: 13px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.dossier-highlight-block li,
.dossier-editorial li {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--type-record-heading);
  line-height: 1.34;
}

.dossier-editorial {
  margin-top: 0;
}

.dossier-editorial-group {
  display: grid;
  grid-template-columns: minmax(150px, .32fr) minmax(0, 1fr);
  gap: 34px;
  padding: 20px 0;
  border-top: 1px solid color-mix(in srgb, var(--line) 68%, transparent);
}

.dossier-editorial-group:first-of-type {
  border-top: 0;
}

.dossier-editorial h4 {
  color: var(--secondary);
}

.dossier-archive-label {
  margin: 0 0 18px;
  color: var(--accent-text);
}

.dossier-timeline {
  display: grid;
  max-width: 64ch;
}

.dossier-year-group {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 34px;
  padding: 24px 0;
  border-top: 1px solid var(--line);
}

.dossier-year-group:first-child {
  padding-top: 0;
  border-top: 0;
}

.dossier-year {
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: var(--type-label);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-small);
  line-height: 1.35;
}

.dossier-entries {
  color: var(--secondary);
  font-family: var(--font-ui);
  font-size: var(--type-small);
  font-weight: 400;
  line-height: 1.5;
}

.dossier-entries p {
  margin-bottom: .38em;
}

.dossier-entry--title {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--type-record-heading);
  font-weight: 500;
  line-height: 1.22;
  margin-bottom: .28em;
}

.dossier-entry--context {
  color: color-mix(in srgb, var(--secondary) 82%, var(--paper));
  font-family: var(--font-ui);
  font-size: var(--type-small);
  font-style: italic;
  font-weight: 400;
  line-height: 1.42;
}

.dossier-entry--detail {
  color: color-mix(in srgb, var(--secondary) 78%, var(--paper));
  font-family: var(--font-ui);
  font-size: var(--type-small);
  font-weight: 400;
  line-height: 1.46;
}

.dossier-entry--regular {
  color: color-mix(in srgb, var(--secondary) 88%, var(--paper));
  font-family: var(--font-ui);
  font-size: var(--type-small);
  font-weight: 400;
  line-height: 1.5;
}

.work-display {
  background: var(--paper);    /* matches page — no white block under the work */
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.carousel-room {
  position: relative;
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) 92px;
  grid-template-rows: minmax(600px, 82vh) auto;
  align-items: center;
  min-height: 0;
  background: var(--paper);
}

.carousel-stage {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  display: grid;
  gap: 16px;
  justify-items: center;
  align-self: center;
}

.stage-media {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(18px, 2.2vw, 34px);
  width: 100%;
  min-width: 0;
}

.stage-media img {
  display: block;
  width: auto;
  min-width: 1px;
  min-height: 1px;
  max-width: min(calc(100% - 96px), 1500px);
  max-height: min(80vh, 940px);
  object-fit: contain;
  background: var(--paper);
  cursor: zoom-in;
  transform-origin: center center;
  transition: transform 260ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .stage-media img:hover {
    transform: scale(1.035);
  }
}

.stage-media img[data-load-error="true"] {
  width: min(100%, 760px);
  height: 320px;
  border: 1px solid var(--line);
  background: var(--soft);
}

.work-topbar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: clamp(6px, 0.7vw, 10px);
}

.work-caption {
  display: flex;
  align-items: baseline;
  gap: clamp(12px, 1.4vw, 20px);
  min-width: 0;
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: var(--type-label);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  line-height: 1.35;
  text-transform: none;
  text-align: right;
}

.work-caption [data-stage-caption] {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink);
}

.work-caption [data-stage-count] {
  flex: 0 0 auto;
  color: var(--muted);
}

.expand-button {
  display: none;
  flex: 0 0 auto;
  align-items: center;
  gap: 9px;
  margin-bottom: 2px;
  padding: 0;
  border: 0;
  background: transparent;
  color: color-mix(in srgb, var(--ink) 50%, white);
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: var(--type-label);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: none;
  transition: color 200ms ease;
}

.expand-button:hover,
.expand-button:focus-visible {
  color: var(--ink);
}

.expand-mark {
  position: relative;
  width: 18px;
  height: 18px;
  display: inline-block;
}

.expand-mark span {
  position: absolute;
  width: 7px;
  height: 7px;
  border-color: currentColor;
}

.expand-mark span:nth-child(1) {
  top: 0;
  left: 0;
  border-top: 1px solid;
  border-left: 1px solid;
}

.expand-mark span:nth-child(2) {
  top: 0;
  right: 0;
  border-top: 1px solid;
  border-right: 1px solid;
}

.expand-mark span:nth-child(3) {
  right: 0;
  bottom: 0;
  border-right: 1px solid;
  border-bottom: 1px solid;
}

.expand-mark span:nth-child(4) {
  bottom: 0;
  left: 0;
  border-bottom: 1px solid;
  border-left: 1px solid;
}

.carousel-arrow {
  grid-row: 1;
  width: 44px;
  height: 88px;
  border: 0;
  background: transparent;
  color: var(--accent-text);
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 400;
  line-height: 1;
  opacity: .92;
  transition: color 200ms ease, opacity 200ms ease, transform 200ms ease;
}

.carousel-arrow:hover,
.carousel-arrow:focus-visible {
  color: var(--ink);
  opacity: 1;
  transform: translateX(0);
}

.carousel-prev {
  grid-column: 1;
  justify-self: center;
}

.carousel-next {
  grid-column: 3;
  justify-self: center;
}

.thumb-index {
  grid-column: 1 / -1;
  grid-row: 2;
  display: flex;
  gap: 16px;
  align-items: center;
  overflow-x: auto;
  min-height: 128px;
  padding: 18px clamp(18px, 4vw, 54px) 24px;
  border-top: 1px solid var(--line);
  scroll-padding-inline: clamp(18px, 4vw, 54px);
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}

.thumb-drawer-toggle {
  display: none;
}

.thumb-drawer-count {
  color: var(--secondary);
}

.lightbox {
  position: fixed;
  z-index: 60;
  inset: 0;
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) 76px;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 18px;
  padding: 22px clamp(18px, 4vw, 54px) 28px;
  background: var(--paper);
}

.lightbox[hidden] {
  display: none;
}

.lightbox-close {
  grid-column: 1 / -1;
  justify-self: end;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: var(--type-label);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: none;
}

.lightbox-close:hover,
.lightbox-close:focus-visible {
  color: var(--ink);
}

.lightbox figure {
  grid-column: 2;
  grid-row: 2;
  min-height: 0;
  margin: 0;
  display: grid;
  gap: 14px;
  justify-items: center;
  align-items: center;
}

.lightbox img {
  width: auto;
  max-width: min(100%, 1560px);
  max-height: 86vh;
  object-fit: contain;
  background: var(--paper);
}

.lightbox figcaption {
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: var(--type-label);
  letter-spacing: var(--tracking-label);
  text-transform: none;
}

.lightbox-arrow {
  grid-row: 2;
  align-self: center;
  justify-self: center;
  width: 44px;
  height: 86px;
  border: 0;
  background: transparent;
  color: var(--accent-text);
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 44px;
  line-height: 1;
}

.lightbox-arrow:hover,
.lightbox-arrow:focus-visible {
  color: var(--ink);
}

.lightbox-prev {
  grid-column: 1;
}

.lightbox-next {
  grid-column: 3;
}

.thumb-button {
  flex: 0 0 auto;
  width: 132px;
  height: 88px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--ink) 16%, white);
  background: var(--soft);
  cursor: pointer;
  opacity: .64;
  scroll-snap-align: center;
  transition: opacity 200ms ease, border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}

.thumb-button:hover,
.thumb-button:focus-visible {
  opacity: .92;
  border-color: color-mix(in srgb, var(--ink) 36%, transparent);
}

.thumb-button.is-active {
  opacity: 1;
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

.thumb-button img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 900px) {
  .site-header {
    min-height: 58px;
    /* Keep brand/menu clear of notch cut-outs in landscape */
    padding-left: max(18px, env(safe-area-inset-left));
    padding-right: max(18px, env(safe-area-inset-right));
  }

  .nav-toggle {
    display: grid;
    place-items: center;
    position: fixed;
    top: 10px;
    right: max(18px, env(safe-area-inset-right));
    width: 44px;
    height: 44px;
  }

  .site-nav {
    position: fixed;
    inset: 58px 0 auto 0;
    display: grid;
    gap: 0;
    padding: 8px max(18px, env(safe-area-inset-right)) 18px max(18px, env(safe-area-inset-left));
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-8px);
    transition: opacity 180ms ease, transform 180ms ease;
  }

  .site-nav.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  .site-nav a {
    display: flex;
    align-items: center;
    min-height: 46px;
    padding: 6px 0;
    font-size: var(--type-site);
  }

  .hero {
    min-height: auto;
    grid-template-columns: 1fr;
    padding-top: 82px;
  }

  .work-page {
    padding-top: 104px;
  }

  #work {
    padding-top: 112px;
  }

  .work-intro {
    grid-template-columns: 1fr;
    gap: 18px;
    margin-bottom: 58px;
    padding-bottom: 30px;
  }

  .work-intro h2 {
    max-width: 24ch;
    font-size: clamp(24px, 5.7vw, 31px);
  }

  .project-section {
    padding-top: 58px;
  }

  .project-grid {
    grid-template-columns: 1fr 1fr;
    gap: 60px 24px;
  }

  .travel-grid {
    grid-template-columns: 1fr 1fr;
    gap: 36px 24px;
  }

  .project-card,
  .travel-card {
    grid-template-rows: auto auto;
  }

  .project-card.project-card--wide {
    grid-template-rows: auto auto;
  }

  .project-card.project-card--unfolding {
    grid-template-rows: auto auto;
  }

  .project-card.project-card--upekkha {
    grid-template-rows: auto auto;
  }

  .project-card.project-card--eschaton {
    grid-template-rows: auto auto;
  }

  .project-card.project-card--alchemy {
    grid-template-rows: auto auto;
  }

  .project-card.project-card--ashoura {
    grid-template-rows: auto auto;
  }

  .project-card.project-card--metanoia {
    grid-template-rows: auto auto;
  }

  .travel-card {
    grid-template-rows: auto auto;
  }

  .project-card-caption {
    padding: 12px 10px 4px;
    gap: 5px;
  }

  .project-card-title,
  .project-card.project-card--wide .project-card-title {
    font-size: var(--type-caption-title);
  }

  .project-card-meta {
    font-size: var(--type-micro);
    letter-spacing: var(--tracking-small);
  }

  .site-footer {
    display: grid;
    justify-items: start;
    align-content: center;
    gap: 22px;
    min-height: 210px;
    font-size: var(--type-micro);
    letter-spacing: var(--tracking-small);
  }

  .footer-nav {
    justify-content: flex-start;
    gap: 14px 24px;
  }

  .hero-image {
    height: auto;
    min-height: 0;
  }

  .hero-copy {
    max-width: var(--measure);
  }

  .section-heading,
  .project-intro {
    grid-template-columns: 1fr;
    margin-left: 0;
  }

  .project-intro.has-essay {
    margin-top: 58px;
  }

  .project-resource-grid {
    grid-template-columns: 1fr;
    gap: 34px;
    max-width: calc(100vw - 36px);
    margin-bottom: 44px;
  }

  .project-detail-row,
  .project-download-row {
    grid-template-columns: minmax(86px, .34fr) minmax(0, 1fr);
    gap: 24px;
    padding: 20px 0 22px;
  }

  .project-detail-row strong,
  .download-label {
    font-size: var(--type-record-heading);
  }

  .object-record {
    grid-template-columns: 1fr;
    gap: 26px;
    max-width: calc(100vw - 36px);
    margin-top: 42px;
    margin-bottom: 62px;
  }

  .object-record-link,
  .object-record-copy {
    display: inline-block;
    margin-top: 12px;
    margin-right: 22px;
  }

  .object-record-grid,
  .object-record-context {
    grid-template-columns: 1fr;
  }

  .object-record-row {
    grid-template-columns: minmax(86px, .34fr) minmax(0, 1fr);
    gap: 24px;
    padding: 18px 0 20px;
  }

  .object-record-row strong,
  .object-record-section strong {
    font-size: var(--type-record-heading);
  }

  .project-dossier {
    grid-template-columns: 1fr;
    gap: 26px;
    max-width: calc(100vw - 36px);
    margin-bottom: 62px;
  }

  .project-dossier-aside span {
    max-width: none;
    margin-top: 10px;
  }

  .project-dossier-statement p {
    font-size: var(--type-statement);
    line-height: 1.45;
  }

  .project-dossier-sections {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .project-dossier-list strong {
    font-size: var(--type-record-heading);
  }

  .essay-cover,
  .essay-page {
    max-width: calc(100vw - 36px);
  }

  .essay-cover {
    min-height: 430px;
    padding: 18px 0 68px;
  }

  .essay-cover h3 {
    margin-top: 42px;
    font-size: var(--type-project-title);
  }

  .essay-cover blockquote {
    margin-top: 96px;
    margin-left: 18px;
    font-size: var(--type-statement);
  }

  .essay-layout {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .essay-page h4,
  .essay-aside {
    padding-left: 0;
    margin-left: 0;
  }

  .essay-page {
    min-height: auto;
    padding: 48px 0 86px;
  }

  .essay-page h4 {
    margin-top: 54px;
  }

  .essay-aside blockquote {
    margin-bottom: 36px;
    font-size: var(--type-statement);
  }

  .essay-body {
    padding-left: 22px;
    font-size: var(--type-statement);
    line-height: 1.48;
  }

  .dossier-hero,
  .dossier-curator-downloads,
  .dossier-jump-nav--information,
  .dossier-resource-panel,
  .dossier-section {
    max-width: calc(100vw - 36px);
  }

  .dossier-hero,
  .dossier-curator-downloads {
    grid-template-columns: 1fr;
    gap: 34px;
    padding: 16px 0 48px;
  }

  .dossier-jump-nav--information {
    padding: 34px 0 46px;
  }

  .dossier-jump-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 24px;
  }

  .dossier-jump-nav a {
    grid-template-columns: 32px minmax(0, 1fr) auto;
    gap: 12px;
    min-height: 66px;
    padding-top: 15px;
    padding-bottom: 13px;
  }

  .dossier-download-panel {
    max-width: 520px;
  }

  .dossier-resource-panel {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .dossier-resource-panel--curator {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .dossier-resource-heading span {
    max-width: 42ch;
  }

  .dossier-resource-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dossier-resource-card {
    min-height: 220px;
  }

  .dossier-download-panel h2 {
    max-width: 12ch;
    font-size: var(--type-panel-title);
  }

  .dossier-section {
    grid-template-columns: 1fr;
    gap: 34px;
    padding: 64px 0;
    scroll-margin-top: 76px;
  }

  .dossier-overview {
    padding-top: 64px;
  }

  .dossier-section--prose {
    min-height: auto;
  }

  .dossier-aside p {
    margin-bottom: 32px;
  }

  .dossier-aside blockquote {
    max-width: 560px;
    font-size: var(--type-statement);
  }

  .dossier-body {
    padding-left: 22px;
  }

  .dossier-section--prose .dossier-body {
    font-size: var(--type-statement);
    line-height: 1.5;
  }

  .dossier-fact,
  .dossier-editorial-group {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .dossier-fact strong {
    font-size: var(--type-statement);
  }

  .dossier-highlight-block li,
  .dossier-editorial li {
    font-size: var(--type-record-heading);
  }

  .dossier-year-group {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 22px 0;
  }

  .dossier-entries {
    font-size: var(--type-small);
    line-height: 1.4;
  }

  .contact-shell {
    max-width: calc(100vw - 36px);
  }

  .contact-note {
    margin-top: 22px;
  }

  .contact-email {
    font-size: clamp(24px, 6.8vw, 32px);
  }

  .contact-social {
    gap: 18px;
  }

  .carousel-room {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    min-height: 0;
    padding-top: 24px;
  }

  .carousel-stage {
    grid-column: 1;
    padding: 0 18px;
  }

  /* On phones the back-link, title and counter no longer share a cramped
     line — the caption drops to its own row, left-aligned, free to wrap. */
  .work-topbar {
    flex-wrap: wrap;
    gap: 4px 18px;
  }

  .work-caption {
    width: 100%;
    justify-content: flex-start;
    text-align: left;
    gap: 12px;
  }

  .work-caption [data-stage-caption] {
    overflow: visible;
    white-space: normal;
  }

  .stage-media {
    display: grid;
    gap: 14px;
    justify-items: center;
  }

  .stage-media img {
    max-width: 100%;
    max-height: 72vh;
  }

  .expand-button {
    justify-self: end;
    margin-right: 18px;
  }

  .carousel-arrow {
    position: absolute;
    z-index: 2;
    top: 34%;
    width: 46px;
    height: 64px;
    background: transparent;
    font-size: 36px;
  }

  .carousel-prev {
    left: 18px;
  }

  .carousel-next {
    right: 18px;
  }

  .thumb-index {
    grid-column: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    overflow-x: visible;
    min-height: 0;
    margin-top: 22px;
    padding: 16px 18px 20px;
    scroll-snap-type: none;
  }

  .thumb-button {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    scroll-snap-align: none;
  }

  .thumb-index.has-thumb-drawer .thumb-button.is-mobile-extra {
    display: none;
  }

  .thumb-index.has-thumb-drawer.is-expanded .thumb-button.is-mobile-extra {
    display: block;
  }

  .thumb-drawer-toggle {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-height: 48px;
    padding: 14px 0 2px;
    border: 0;
    border-top: 1px solid var(--line);
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    font-family: var(--font-ui);
    font-size: var(--type-label);
    font-weight: 500;
    letter-spacing: var(--tracking-small);
    line-height: 1.35;
    text-align: left;
  }

  .thumb-drawer-toggle:hover,
  .thumb-drawer-toggle:focus-visible {
    color: var(--ink);
  }

  .lightbox {
    grid-template-columns: 46px minmax(0, 1fr) 46px;
    padding: 16px 12px 22px;
  }

  .lightbox-arrow {
    width: 44px;
    height: 64px;
    font-size: 36px;
  }

  /* "Close" is text-only; pad it to a comfortable >=44px touch target. */
  .lightbox-close {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 10px 12px;
    margin-right: -6px;
  }

  .lightbox img {
    max-height: 78vh;
  }

}

@media (max-width: 560px) {
  body {
    font-size: 14px;
  }

  .project-grid,
  .travel-grid {
    grid-template-columns: 1fr;
    gap: 46px;
  }

  .work-intro h2 {
    max-width: none;
    font-size: clamp(22px, 6.1vw, 27px);
    line-height: 1.1;
  }

  .project-card,
  .travel-card {
    grid-template-rows: auto auto;
  }

  /* Single column: featured cards collapse to regular treatment */
  .project-card.project-card--wide {
    grid-template-rows: auto auto;
  }

  .project-card.project-card--unfolding {
    grid-template-rows: auto auto;
  }

  .project-card.project-card--upekkha {
    grid-template-rows: auto auto;
  }

  .project-card.project-card--eschaton,
  .project-card.project-card--alchemy,
  .project-card.project-card--ashoura,
  .project-card.project-card--metanoia {
    grid-template-rows: auto auto;
  }

  .travel-card {
    grid-template-rows: auto auto;
  }

  .dossier-jump-nav {
    grid-template-columns: 1fr;
  }

  .dossier-resource-grid {
    grid-template-columns: 1fr;
  }

  .dossier-resource-panel--curator .dossier-resource-grid {
    grid-template-columns: 1fr;
  }

  .dossier-resource-card {
    min-height: 0;
  }

  .dossier-jump-nav a {
    min-height: 58px;
  }

  .dossier-download-panel h2 {
    font-size: var(--type-panel-title);
  }

  .dossier-section--prose .dossier-body {
    font-size: var(--type-statement);
  }

  .object-record-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .thumb-button {
    width: 100%;
    height: auto;
  }

  .site-footer {
    padding-top: 30px;
    padding-bottom: max(30px, env(safe-area-inset-bottom));
    font-size: var(--type-micro);
  }

  .footer-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px 24px;
  }

  .footer-nav a,
  .contact-social a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
  }
}