:root {
  --ink: #b8b1a7;
  --ink-soft: #c8c1b6;
  --paper: #28251f;
  --paper-soft: #3f3b35;
  --quiet: #46413a;
  --gold: #514021;
  --image-well: #665e55;
  --line: rgba(40, 37, 31, 0.18);
  --line-soft: rgba(40, 37, 31, 0.09);
  --gutter: clamp(1.25rem, 5vw, 5.5rem);
  --max: 1500px;
  --display: 'Cormorant Garamond', Georgia, serif;
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Inter', Helvetica, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--ink);
  color-scheme: light;
  scroll-behavior: smooth;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  min-height: 100vh;
  /* `clip` rather than `hidden`: both stop the atmosphere layers' soft bleed
     from opening a horizontal scrollbar, but `hidden` leaves the overflow
     scrollable, so the document still measured wider than the viewport (the
     series-index halos overran the 20px mobile gutter by 18px). `clip` has no
     scrollable region and creates no scroll container, so sticky descendants
     keep resolving against the viewport. */
  overflow-x: clip;
  background:
    radial-gradient(circle at 82% 12%, rgba(248, 241, 229, 0.38), transparent 34rem),
    var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  font-size: clamp(0.96rem, 1.15vw, 1.08rem);
  font-weight: 300;
  line-height: 1.7;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  background: var(--ink);
  opacity: 1;
  transition: opacity 700ms cubic-bezier(.2,.7,.2,1);
}

body.is-ready::before { opacity: 0; }
body.is-leaving::before { opacity: 1; transition-duration: 220ms; }

a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
img { display: block; max-width: 100%; }
em,
i { font-style: normal; }

::selection { background: var(--gold); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--paper);
  outline-offset: 4px;
  box-shadow: 0 0 0 6px var(--ink);
}

.skip-link {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 3000;
  padding: 0.7rem 0.9rem;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 0.72rem;
  transform: translateY(-160%);
}

.skip-link:focus { transform: translateY(0); }

.site-nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1000;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 5.5rem;
  padding: 0 var(--gutter);
  border-bottom: 1px solid transparent;
  transition: background 350ms ease, border-color 350ms ease, min-height 350ms ease;
}

.site-nav.is-scrolled {
  min-height: 4.5rem;
  border-color: var(--line);
  background: rgba(184, 177, 167, 0.9);
  backdrop-filter: blur(16px);
}

.brand {
  justify-self: start;
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 200;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  white-space: nowrap;
}

.nav-links {
  display: flex;
  gap: clamp(1.3rem, 3vw, 3rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-links a,
.micro-link {
  position: relative;
  font-family: var(--sans);
  font-size: 0.62rem;
  font-weight: 200;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--paper-soft);
}

.nav-links a::after,
.micro-link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -0.55rem;
  height: 1px;
  background: var(--gold);
  transition: right 280ms ease;
}

.nav-links a:hover::after,
.nav-links a[aria-current='page']::after,
.micro-link:hover::after { right: 0; }
.nav-links a[aria-current='page'] { color: var(--paper); }

.language-slot {
  justify-self: end;
  color: var(--quiet);
  font-family: var(--sans);
  font-size: 0.6rem;
  font-weight: 300;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.menu-button {
  display: none;
  width: 2.8rem;
  height: 2.8rem;
  padding: 0.7rem;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.menu-button span {
  display: block;
  width: 100%;
  height: 1px;
  margin: 0.36rem 0;
  background: var(--paper);
  transition: transform 250ms ease, opacity 250ms ease;
}

.page-shell { min-height: 100vh; }

.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: end;
  padding: clamp(8rem, 14vh, 11rem) var(--gutter) clamp(3rem, 8vh, 6rem);
  overflow: hidden;
}

.hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(18rem, 0.65fr);
  align-items: end;
  gap: clamp(2rem, 8vw, 9rem);
  width: min(100%, var(--max));
  margin: 0 auto;
}

.eyebrow,
.route-number,
.kicker {
  font-family: var(--sans);
  font-size: 0.61rem;
  font-weight: 200;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: var(--gold);
}

.hero-title,
.page-title,
.series-title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 300;
  letter-spacing: -0.018em;
  line-height: 0.9;
}

.hero-title { font-size: clamp(4.7rem, 11.5vw, 10.5rem); }
.page-title { max-width: 11ch; font-size: clamp(4rem, 8vw, 7.8rem); }
.series-title { font-size: clamp(3.8rem, 7vw, 7rem); }

.hero-note,
.page-lede {
  max-width: 31rem;
  margin: 0;
  color: var(--paper-soft);
  font-family: var(--sans);
  font-size: clamp(1rem, 1.35vw, 1.25rem);
  font-style: normal;
  font-weight: 300;
  line-height: 1.62;
}

.hero-meta {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  margin-top: 2.4rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  font-family: var(--sans);
  font-size: 0.62rem;
  font-weight: 200;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--quiet);
}

.orbit {
  position: absolute;
  top: 51%;
  right: clamp(-11rem, -8vw, -5rem);
  width: clamp(23rem, 45vw, 44rem);
  aspect-ratio: 1;
  border: 1px solid var(--line);
  border-radius: 50%;
  transform: translate3d(var(--mx, 0), var(--my, 0), 0);
  transition: transform 700ms cubic-bezier(.2,.7,.2,1);
}

.orbit::before,
.orbit::after {
  content: '';
  position: absolute;
  border: 1px solid var(--line-soft);
  border-radius: 50%;
}

.orbit::before { inset: 12%; }
.orbit::after { inset: 28%; background: radial-gradient(circle, rgba(128,106,71,0.1), transparent 67%); }

.rolling-line {
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 1rem 0;
  font-family: var(--sans);
  font-size: 0.62rem;
  font-weight: 200;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--quiet);
}

.rolling-track {
  width: max-content;
  animation: drift 26s linear infinite;
}

.section {
  width: min(100%, var(--max));
  margin: 0 auto;
  padding: clamp(5rem, 9vw, 9rem) var(--gutter);
}

.section-head {
  display: grid;
  grid-template-columns: 0.35fr 1fr;
  gap: 2rem;
  margin-bottom: clamp(3rem, 8vw, 7rem);
  align-items: start;
}

.section-title {
  margin: 0;
  max-width: 13ch;
  font-family: var(--serif);
  font-size: clamp(2.8rem, 5.5vw, 5.4rem);
  font-weight: 300;
  line-height: 0.95;
}

.gateways { border-top: 1px solid var(--line); }

.gateway {
  position: relative;
  display: grid;
  grid-template-columns: minmax(17rem, 0.68fr) 3rem minmax(18rem, 1fr) auto;
  gap: clamp(1.5rem, 4vw, 5rem);
  align-items: center;
  min-height: clamp(25rem, 44vw, 38rem);
  padding: clamp(2.8rem, 6vw, 6rem) 0;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}

.gateway::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(248,241,229,0.25));
  transform: translateX(-105%);
  transition: transform 600ms cubic-bezier(.2,.7,.2,1);
}

.gateway:hover::before,
.gateway:focus-visible::before { transform: translateX(0); }

.gateway-index {
  font-family: var(--sans);
  font-size: 0.6rem;
  font-weight: 200;
  letter-spacing: 0.28em;
  color: var(--quiet);
}

.gateway-media {
  position: relative;
  height: clamp(19rem, 34vw, 31rem);
  margin: 0;
  overflow: hidden;
  background: var(--image-well);
  clip-path: polygon(4% 0, 100% 5%, 94% 100%, 0 92%);
}

.gateway-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(81, 64, 33, 0.12), transparent 52%);
  pointer-events: none;
}

.gateway-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  filter: saturate(0.88) contrast(1.02);
  transition: transform 900ms cubic-bezier(.2,.7,.2,1), filter 500ms ease;
}

.gateway:hover .gateway-media img,
.gateway:focus-visible .gateway-media img {
  transform: scale(1.07);
  filter: saturate(1) contrast(1.02);
}

.gateway-copy { display: grid; gap: 1.2rem; }

.gateway-copy small {
  color: var(--quiet);
  font-family: var(--sans);
  font-size: 0.6rem;
  font-weight: 300;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.gateway-name {
  position: relative;
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(2.5rem, 4.8vw, 4.8rem);
  font-weight: 300;
  line-height: 1;
  transition: transform 450ms ease;
}

.gateway:hover .gateway-name { transform: translateX(1rem); }

.gateway-action {
  font-family: var(--sans);
  font-size: 0.6rem;
  font-weight: 200;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
}

.gateway--bestiaire .gateway-media { grid-column: 3; grid-row: 1; clip-path: polygon(7% 4%, 96% 0, 100% 93%, 0 100%); }
.gateway--bestiaire .gateway-index { grid-column: 2; grid-row: 1; }
.gateway--bestiaire .gateway-copy { grid-column: 1; grid-row: 1; }
.gateway--bestiaire .gateway-action { grid-column: 4; grid-row: 1; }

.section-link,
.portfolio-request {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  margin-top: 2.5rem;
  padding-bottom: 0.45rem;
  border-bottom: 1px solid var(--gold);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 0.62rem;
  font-weight: 300;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  transition: gap 260ms ease;
}

.section-link:hover,
.section-link:focus-visible,
.portfolio-request:hover,
.portfolio-request:focus-visible { gap: 1.3rem; }

.page-hero {
  position: relative;
  isolation: isolate;
  min-height: 74svh;
  display: grid;
  align-items: end;
  padding: clamp(9rem, 15vh, 12rem) var(--gutter) clamp(4rem, 8vw, 7rem);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}

.page-hero-inner {
  position: relative;
  z-index: 3;
  width: min(100%, var(--max));
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(18rem, 0.8fr);
  gap: clamp(3rem, 9vw, 10rem);
  align-items: end;
}

.page-hero--series {
  min-height: min(88svh, 58rem);
}

.page-hero--series::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(90deg, var(--ink) 0 18%, rgba(184, 177, 167, 0.84) 39%, transparent 72%);
}

.series-hero-art {
  position: absolute;
  inset: 5.5rem var(--gutter) 0 39%;
  z-index: 1;
  opacity: 0.52;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 83%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 83%, transparent 100%);
}

.series-hero-fragment {
  position: absolute;
  box-shadow: 0 2rem 5rem rgba(54, 47, 39, 0.22);
}

.series-hero-fragment--1 {
  inset: 5% 14% 8% 2%;
  clip-path: polygon(7% 0, 100% 6%, 93% 100%, 0 91%);
  transform: rotate(-2deg);
}

.series-hero-fragment--2 {
  top: 39%;
  right: 0;
  z-index: 2;
  width: 35%;
  height: 48%;
  clip-path: polygon(9% 0, 100% 8%, 91% 100%, 0 92%);
  transform: rotate(4deg);
}

.page-series--iconic .series-hero-fragment img {
  filter: saturate(0.86) contrast(1.04);
}

.page-series--bestiaire .series-hero-art {
  right: calc(var(--gutter) * 0.35);
  opacity: 0.48;
}

.page-series--bestiaire .series-hero-fragment--1 {
  inset: 9% 4% 3% 13%;
  transform: rotate(1.5deg);
}

.page-series--bestiaire .series-hero-fragment--2 {
  top: 7%;
  right: auto;
  left: 0;
  width: 30%;
  height: 42%;
  transform: rotate(-5deg);
}

.page-hero--series .page-lede {
  padding: 1.2rem 0 1.2rem 1.3rem;
  border-left: 1px solid var(--gold);
  background: linear-gradient(90deg, rgba(184, 177, 167, 0.88), transparent);
}

.bio-grid {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(9rem, 0.32fr) minmax(22rem, 0.72fr) minmax(14rem, 0.48fr);
  gap: clamp(2rem, 5vw, 5rem);
  min-height: clamp(64rem, 78vw, 77rem);
  overflow: visible;
}

.bio-copy {
  position: relative;
  z-index: 2;
  grid-column: 2;
  max-width: 43rem;
}

.bio-copy::before {
  content: '';
  position: absolute;
  inset: -4rem -5rem;
  z-index: -1;
  background: radial-gradient(ellipse at center, rgba(184, 177, 167, 0.88) 0 44%, rgba(184, 177, 167, 0.58) 66%, transparent 83%);
  filter: blur(0.8rem);
  pointer-events: none;
}

.bio-copy p { margin: 0 0 1.8rem; }
.bio-copy p:first-child::first-letter {
  float: left;
  margin: 0.06em 0.16em 0 0;
  color: var(--gold);
  font-size: 5.4em;
  line-height: 0.72;
}

.aside-rule {
  position: sticky;
  top: 8rem;
  z-index: 2;
  align-self: start;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  color: var(--quiet);
  font-family: var(--sans);
  font-size: 0.62rem;
  font-weight: 200;
  letter-spacing: 0.27em;
  text-transform: uppercase;
}

/* Give the biography a viewport-width reference that excludes the vertical
   scrollbar. Plain vw includes that scrollbar, leaving a small horizontal
   overrun on long pages. */
.page-about main {
  container-type: inline-size;
}

/* Full-bleed wash behind the biography. The pull-back to the viewport edge is
   done with `left`, not `translateX(-50%)`: this figure also carries .reveal,
   whose `.reveal.is-visible { transform: translateY(0) }` is more specific and
   would wipe a transform-based offset. */
.about-fragment {
  position: absolute;
  inset: clamp(1.5rem, 3vw, 3rem) auto;
  left: calc(50% - 50cqw);
  z-index: 0;
  width: 100cqw;
  margin: 0;
  overflow: hidden;
  background: transparent;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 8%, #000 90%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 8%, #000 90%, transparent 100%);
}

.about-fragment::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, var(--ink) 0, rgba(184, 177, 167, 0.96) 19%, rgba(184, 177, 167, 0.8) 52%, rgba(184, 177, 167, 0.18) 80%, rgba(184, 177, 167, 0.5) 100%),
    linear-gradient(180deg, var(--ink) 0, transparent 13%, transparent 84%, var(--ink) 100%);
  pointer-events: none;
}

.about-fragment img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 68% center;
  opacity: 0.9;
  filter: saturate(0.72) contrast(0.98);
  transform: scale(1.025);
}

.series-intro-grid {
  display: grid;
  grid-template-columns: 1fr 0.72fr;
  gap: clamp(3rem, 10vw, 10rem);
  align-items: start;
}

.series-rail {
  margin-top: clamp(4rem, 9vw, 9rem);
  padding-left: clamp(1rem, 8vw, 8rem);
  border-left: 1px solid var(--line);
}

.series-chapter {
  min-height: 55vh;
  display: grid;
  align-content: center;
  grid-template-columns: 0.35fr 1fr;
  gap: 3rem;
  padding: clamp(4rem, 8vw, 8rem) 0;
  border-bottom: 1px solid var(--line);
}

.series-chapter h2 {
  margin: 0;
  font-size: clamp(2.8rem, 7vw, 6.8rem);
  font-weight: 300;
  line-height: 0.92;
}

.contact-stage {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  display: grid;
  align-items: center;
  padding: 9rem var(--gutter) 4rem;
}

.contact-inner {
  position: relative;
  z-index: 2;
  width: min(100%, var(--max));
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 0.7fr;
  gap: clamp(4rem, 12vw, 13rem);
  align-items: end;
}

.contact-inner > div:last-child {
  padding: clamp(1.4rem, 3vw, 2.6rem);
  background: rgba(184, 177, 167, 0.86);
  backdrop-filter: blur(14px);
}

.contact-fragment {
  position: absolute;
  inset: 5.5rem 0 0 auto;
  z-index: 0;
  width: min(48vw, 52rem);
  margin: 0;
  overflow: hidden;
  background: var(--image-well);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 18%, #000 100%);
}

.contact-fragment::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(184, 177, 167, 0.28), rgba(184, 177, 167, 0.07) 52%, rgba(184, 177, 167, 0.48));
}

.contact-fragment img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 42% center;
  filter: saturate(0.82) contrast(1.03);
}

.portfolio-request { margin-top: 2rem; }

.contact-mail {
  display: inline-block;
  margin-top: 3rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--gold);
  font-size: clamp(1.35rem, 3vw, 2.8rem);
  font-weight: 300;
  transition: color 250ms ease, padding-left 250ms ease;
}

.contact-mail:hover { color: var(--gold); padding-left: 0.4rem; }

.contact-facts {
  margin: 0;
  padding: 1.5rem 0 0;
  border-top: 1px solid var(--line);
}

.contact-facts dt {
  margin-top: 1.3rem;
  font-family: var(--sans);
  font-size: 0.58rem;
  font-weight: 200;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--quiet);
}

.contact-facts dd { margin: 0.35rem 0 0; color: var(--paper-soft); }

.site-footer {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  padding: 2rem var(--gutter);
  border-top: 1px solid var(--line);
  color: var(--quiet);
  font-family: var(--sans);
  font-size: 0.58rem;
  font-weight: 200;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.footer-identity,
.footer-links {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2.5rem);
}

.footer-links a { transition: color 200ms ease; }
.footer-links a:hover { color: var(--paper); }
.site-footer .language-slot { display: none; }

.reveal {
  opacity: 0;
  transform: translateY(2rem);
  transition: opacity 800ms ease, transform 800ms cubic-bezier(.2,.7,.2,1);
}

.reveal.is-visible { opacity: 1; transform: translateY(0); }

@keyframes drift { to { transform: translateX(-50%); } }

@media (max-width: 900px) {
  .site-nav { grid-template-columns: 1fr auto; }
  .menu-button { display: block; justify-self: end; }
  .site-nav > .language-slot { display: none; }
  .nav-links {
    position: fixed;
    inset: 0;
    z-index: -1;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 2.2rem;
    background: rgba(184, 177, 167, 0.98);
    opacity: 0;
    /* visibility:hidden also takes the links out of the keyboard tab order while
       the menu is closed, so focus never lands on an invisible control
       (WCAG 2.4.7) — matching how .chapter-rail already handles this. The 0s
       delay holds the flip until the fade-out has finished. */
    visibility: hidden;
    pointer-events: none;
    transition: opacity 300ms ease, visibility 0s linear 300ms;
  }
  .nav-links a { font-size: 0.8rem; }
  /* No delay opening, so the panel is focusable the moment site.js moves focus
     to the first link. */
  .site-nav.menu-open .nav-links {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 300ms ease, visibility 0s;
  }
  .site-nav.menu-open .menu-button span:first-child { transform: translateY(4px) rotate(45deg); }
  .site-nav.menu-open .menu-button span:last-child { transform: translateY(-4px) rotate(-45deg); }
  .hero-grid,
  .page-hero-inner,
  .series-intro-grid,
  .contact-inner { grid-template-columns: 1fr; }
  .hero-note { max-width: 25rem; }
  .bio-grid {
    grid-template-columns: 1fr;
    min-height: auto;
    padding-top: clamp(5rem, 12vw, 7rem);
    padding-bottom: clamp(5rem, 12vw, 7rem);
  }
  .bio-copy { grid-column: 1; max-width: 42rem; }
  .bio-copy::before { inset: -3rem -2rem; }
  .aside-rule { position: static; }
  .about-fragment { inset: 1rem 0; }
  .about-fragment::after {
    background:
      linear-gradient(90deg, rgba(184, 177, 167, 0.97) 0, rgba(184, 177, 167, 0.9) 58%, rgba(184, 177, 167, 0.54) 100%),
      linear-gradient(180deg, var(--ink) 0, transparent 12%, transparent 86%, var(--ink) 100%);
  }
  .about-fragment img { object-position: 64% center; opacity: 0.72; }
  .section-head { grid-template-columns: 1fr; }
  .series-rail { padding-left: 1.5rem; }
}

@media (max-width: 640px) {
  .hero { padding-top: 9rem; }
  .hero-title { font-size: clamp(4.5rem, 24vw, 7rem); }
  .page-title { font-size: clamp(3.8rem, 20vw, 6.4rem); }
  .bio-copy::before { inset: -2rem -1rem; }
  .about-fragment img { object-position: 61% center; opacity: 0.62; }
  .hero-meta { flex-direction: column; }
  .gateway { grid-template-columns: auto 1fr; gap: 1rem; }
  .gateway-action { display: none; }
  .series-chapter { grid-template-columns: 1fr; gap: 1rem; min-height: auto; }
  .site-footer { flex-direction: column; }
  .footer-identity,
  .footer-links { flex-wrap: wrap; }
  .site-footer .language-slot { display: inline-block; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* Integrated multi-page experience */

.hero--home {
  min-height: 100svh;
  align-items: stretch;
  padding: 0 var(--gutter);
  background: var(--ink);
}

.hero--home .hero-grid {
  min-height: 100svh;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center;
  gap: 0;
  padding: clamp(7.5rem, 13vh, 10rem) 0 clamp(4rem, 8vh, 6rem);
}

.hero-copy {
  position: relative;
  z-index: 3;
  max-width: 46rem;
}

.hero--home .hero-title {
  max-width: 9ch;
  margin: 1.4rem 0 1.5rem;
  font-family: var(--serif);
  font-size: clamp(3.9rem, 7.4vw, 7.6rem);
  font-weight: 300;
  letter-spacing: -0.012em;
  line-height: 0.94;
}

.home-hero-media {
  position: absolute;
  inset: 0 0 0 52.5%;
  z-index: 0;
  margin: 0;
  overflow: hidden;
  background: #817970;
}

.home-hero-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(184, 177, 167, 0.42) 0, transparent 15%),
    linear-gradient(90deg, var(--ink) 0, rgba(184, 177, 167, 0.72) 15%, transparent 46%),
    linear-gradient(0deg, rgba(184, 177, 167, 0.64) 0, transparent 25%);
  pointer-events: none;
}

.home-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  opacity: 0.94;
  filter: saturate(0.96) contrast(0.98);
  animation: heroBreath 18s ease-in-out infinite alternate;
}

/* Mid widths give the media a tall, narrow window, so `object-fit: cover` crops
   hard horizontally and sliced the right-hand figure's face at the viewport
   edge. Widening the band and easing the focal point back keeps both heads
   whole, and the title still has the left third to itself. */
@media (min-width: 921px) and (max-width: 1200px) {
  .home-hero-media {
    inset: 0 0 0 42%;
  }

  /* The window shows ~52% of the image width while the two heads together span
     ~47%, so the focal point has to be placed deliberately: 65% is the only
     narrow band that keeps both faces whole, trimming headdress and shoulder
     rather than either head. */
  .home-hero-media img {
    object-position: 65% 18%;
  }

  .home-hero-media::after {
    background:
      linear-gradient(180deg, rgba(184, 177, 167, 0.42) 0, transparent 15%),
      linear-gradient(90deg, var(--ink) 0, rgba(184, 177, 167, 0.82) 11%, rgba(184, 177, 167, 0.22) 33%, transparent 52%),
      linear-gradient(0deg, rgba(184, 177, 167, 0.64) 0, transparent 25%);
  }
}

.hero-roleline {
  max-width: 34rem;
  margin: 0;
  color: var(--paper-soft);
  font-family: var(--serif);
  font-size: clamp(1.05rem, 1.7vw, 1.38rem);
  font-weight: 300;
  letter-spacing: 0.055em;
  line-height: 1.45;
}

.hero-places {
  margin: 1rem 0 0;
  color: var(--quiet);
  font-size: 0.64rem;
  font-weight: 200;
  letter-spacing: 0.34em;
  text-transform: uppercase;
}

.hero-entry {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  margin-top: clamp(2.2rem, 5vh, 3.5rem);
  padding-bottom: 0.55rem;
  border-bottom: 1px solid rgba(128, 106, 71, 0.55);
  color: var(--paper);
  font-size: 0.63rem;
  font-weight: 200;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  transition: gap 300ms ease, border-color 300ms ease;
}

.hero-entry:hover,
.hero-entry:focus-visible {
  gap: 1.45rem;
  border-color: var(--gold);
}

.hero-scroll {
  position: absolute;
  left: 0;
  bottom: clamp(1.8rem, 4vh, 3rem);
  display: flex;
  align-items: center;
  gap: 1rem;
  color: var(--quiet);
  font-size: 0.56rem;
  font-weight: 200;
  letter-spacing: 0.34em;
  text-transform: uppercase;
}

.hero-scroll__line {
  display: block;
  width: 3.3rem;
  height: 1px;
  background: linear-gradient(90deg, var(--gold), transparent);
}

.art-fragment {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: var(--ink-soft);
}

.art-fragment::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(40, 37, 31, 0.1);
}

.art-fragment img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.015);
  transition: transform 1.1s cubic-bezier(.2,.7,.2,1), filter 600ms ease;
}

.home-fragment {
  position: absolute;
  box-shadow: 0 2.2rem 5rem rgba(54, 47, 39, 0.2);
}

.home-fragment--iconic {
  inset: 2% 4% 23% 16%;
  clip-path: polygon(8% 0, 100% 5%, 91% 100%, 0 88%);
}

.home-fragment--bestiaire {
  right: -3%;
  bottom: 0;
  width: 46%;
  aspect-ratio: 0.72;
  transform: rotate(4deg);
  clip-path: polygon(8% 0, 100% 8%, 94% 100%, 0 91%);
}

.home-fragment--bestiaire img {
  object-position: 35% center;
}

@keyframes heroBreath {
  from { transform: scale(1.015) translate3d(0, 0, 0); }
  to { transform: scale(1.045) translate3d(-0.8%, -0.45%, 0); }
}

.practice-area { border-top: 1px solid var(--line); }

.practice-heading {
  display: grid;
  grid-template-columns: minmax(10rem, 0.34fr) minmax(14rem, 0.55fr) minmax(18rem, 0.7fr);
  gap: clamp(2rem, 7vw, 8rem);
  align-items: end;
  width: min(100%, var(--max));
  margin: 0 auto;
  padding: clamp(5rem, 9vw, 9rem) var(--gutter) 0;
}

.practice-heading h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(4rem, 8vw, 8rem);
  font-weight: 300;
  letter-spacing: -0.045em;
  line-height: 0.82;
}

.practice-heading > p:last-child {
  max-width: 31rem;
  margin: 0;
  color: var(--paper-soft);
}

.series-worlds {
  width: min(100%, var(--max));
  margin: 0 auto;
  padding: clamp(3rem, 7vw, 7rem) var(--gutter) clamp(8rem, 14vw, 14rem);
}

.series-world {
  position: relative;
  border-top: 1px solid var(--line);
}

.series-world:last-child { border-bottom: 1px solid var(--line); }

.series-world__link {
  position: relative;
  display: grid;
  grid-template-columns: minmax(15rem, 0.8fr) 4rem minmax(20rem, 1.1fr) auto;
  gap: clamp(1.5rem, 4vw, 5rem);
  align-items: center;
  min-height: clamp(30rem, 56vw, 49rem);
  padding: clamp(3rem, 7vw, 7rem) 0;
}

.series-world__media {
  height: clamp(23rem, 43vw, 40rem);
  overflow: hidden;
}

.series-world__media .art-fragment { height: 100%; }

/* These were clip-path quadrilaterals, which cut hard straight edges and gave
   each world a visible angular boundary. A feathered mask keeps the same subtle
   tilt in the composition while letting the artwork dissolve into the ground.
   The slight left/right asymmetry keeps the two worlds from mirroring. */
.series-world--iconic .series-world__media {
  -webkit-mask-image:
    linear-gradient(96deg, transparent 0, #000 11%, #000 90%, transparent 100%),
    linear-gradient(184deg, transparent 0, #000 9%, #000 91%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(96deg, transparent 0, #000 11%, #000 90%, transparent 100%),
    linear-gradient(184deg, transparent 0, #000 9%, #000 91%, transparent 100%);
  mask-composite: intersect;
}

.series-world--bestiaire-mythique .series-world__media {
  -webkit-mask-image:
    linear-gradient(84deg, transparent 0, #000 11%, #000 90%, transparent 100%),
    linear-gradient(176deg, transparent 0, #000 9%, #000 91%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(84deg, transparent 0, #000 11%, #000 90%, transparent 100%),
    linear-gradient(176deg, transparent 0, #000 9%, #000 91%, transparent 100%);
  mask-composite: intersect;
}

/* The container is a tall column while the crop is landscape, so `cover`
   defaulted to the middle of the frame — which on Kinnara is an arm and a wing,
   an anonymous fragment. Anchor each world on its figure's head instead. */
.series-world--iconic .art-fragment img {
  object-position: 50% 34%;
}

.series-world--bestiaire-mythique .art-fragment img {
  object-position: 21% 30%;
}

.series-world__number {
  align-self: start;
  padding-top: 0.4rem;
  color: var(--gold);
  font-family: var(--sans);
  font-size: 0.62rem;
  font-weight: 200;
  letter-spacing: 0.26em;
}

.series-world__copy h2 {
  margin: 0 0 1.8rem;
  font-family: var(--serif);
  font-size: clamp(3.7rem, 8vw, 8rem);
  font-weight: 300;
  line-height: 0.86;
  letter-spacing: -0.04em;
}

.series-world__copy > p:not(.kicker) {
  display: -webkit-box;
  max-width: 42rem;
  margin: 0;
  overflow: hidden;
  color: var(--paper-soft);
  font-size: clamp(1.05rem, 1.55vw, 1.35rem);
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

.series-world__groups {
  display: block;
  margin-top: 2rem;
  color: var(--quiet);
  font-family: var(--sans);
  font-size: 0.58rem;
  font-weight: 200;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.series-world__enter {
  align-self: end;
  color: var(--gold);
  font-family: var(--sans);
  font-size: 0.58rem;
  font-weight: 200;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  white-space: nowrap;
}

.series-world__link:hover .art-fragment img,
.series-world__link:focus-visible .art-fragment img { transform: scale(1.07); }

.series-world__link:hover .series-world__enter span,
.series-world__link:focus-visible .series-world__enter span { display: inline-block; transform: translate(0.25rem, -0.25rem); }

.series-content {
  width: min(100%, var(--max));
  margin: 0 auto;
}

.series-statement {
  display: grid;
  grid-template-columns: minmax(12rem, 0.38fr) minmax(0, 1fr);
  gap: clamp(3rem, 10vw, 11rem);
  padding: clamp(6rem, 12vw, 12rem) var(--gutter);
  border-bottom: 1px solid var(--line);
}

.series-statement__aside {
  position: sticky;
  top: 7rem;
  align-self: start;
}

.chapter-nav {
  display: grid;
  margin-top: 3rem;
  border-top: 1px solid var(--line);
}

.chapter-nav a {
  display: grid;
  grid-template-columns: 2.2rem 1fr;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--line);
  color: var(--paper-soft);
  font-family: var(--sans);
  font-size: 0.63rem;
  font-weight: 200;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.chapter-nav a span { color: var(--quiet); }
.chapter-nav a:hover { color: var(--gold); }

.series-statement__copy p {
  max-width: 48rem;
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.35rem, 2vw, 1.9rem);
  font-weight: 300;
  line-height: 1.5;
}

.series-chapter-block {
  padding: clamp(5rem, 9vw, 9rem) var(--gutter);
  border-bottom: 1px solid var(--line);
  scroll-margin-top: 5rem;
}

.chapter-heading {
  display: grid;
  grid-template-columns: 0.35fr 1fr auto;
  gap: 2rem;
  align-items: end;
  margin-bottom: clamp(4rem, 8vw, 7rem);
}

.chapter-heading h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(3.8rem, 8vw, 8rem);
  font-weight: 300;
  letter-spacing: -0.05em;
  line-height: 0.78;
}

.chapter-heading > span {
  color: var(--quiet);
  font-family: var(--sans);
  font-size: 0.58rem;
  font-weight: 200;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.work-sequence {
  display: grid;
  gap: clamp(6rem, 12vw, 11rem);
}

.work-sequence__item {
  position: relative;
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1.15fr) minmax(18rem, 0.72fr);
  gap: clamp(1.5rem, 5vw, 6rem);
  align-items: center;
  scroll-margin-top: 7rem;
}

.work-sequence__item:nth-child(even) {
  grid-template-columns: 3.5rem minmax(18rem, 0.72fr) minmax(0, 1.15fr);
}

.work-sequence__item:nth-child(even) .work-media { grid-column: 3; grid-row: 1; }
.work-sequence__item:nth-child(even) .work-copy { grid-column: 2; grid-row: 1; }

.work-sequence__index {
  align-self: start;
  padding-top: 1rem;
  color: var(--quiet);
  font-family: var(--sans);
  font-size: 0.6rem;
  font-weight: 200;
  letter-spacing: 0.22em;
}

.work-media {
  position: relative;
  min-height: clamp(24rem, 51vw, 47rem);
}

.work-media .art-fragment {
  position: absolute;
  inset: 0 8% 6% 0;
  clip-path: polygon(2% 3%, 100% 0, 96% 96%, 7% 100%);
}

.work-media--2 .art-fragment--1 { inset: 0 19% 13% 0; }
.work-media--2 .art-fragment--2 {
  inset: 42% 0 0 51%;
  z-index: 2;
  box-shadow: -1.5rem 1.5rem 4rem rgba(54, 47, 39, 0.2);
  clip-path: polygon(8% 0, 100% 6%, 94% 100%, 0 91%);
}

.work-copy { max-width: 38rem; }

.work-copy__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.8rem;
  margin: 0 0 1.5rem;
  color: var(--gold);
  font-family: var(--sans);
  font-size: 0.56rem;
  font-weight: 200;
  letter-spacing: 0.17em;
  line-height: 1.7;
  text-transform: uppercase;
}

.work-copy h3 {
  margin: 0 0 1.5rem;
  font-family: var(--serif);
  font-size: clamp(2.5rem, 4.6vw, 4.5rem);
  font-weight: 300;
  letter-spacing: -0.035em;
  line-height: 0.93;
}

.work-copy > p:last-child {
  margin: 0;
  color: var(--paper-soft);
  font-size: clamp(1.05rem, 1.45vw, 1.3rem);
}

.further-works {
  display: grid;
  grid-template-columns: minmax(10rem, 0.34fr) 1fr;
  gap: clamp(2rem, 7vw, 7rem);
  margin-top: clamp(5rem, 10vw, 10rem);
  padding-top: 2rem;
  border-top: 1px solid var(--line);
}

.further-works > p { margin: 0; }

.further-works ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.further-works li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.5rem;
  align-items: baseline;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--line-soft);
}

.further-works li span {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 2.7vw, 2.6rem);
  font-weight: 300;
}

.further-works li small {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.8rem;
  color: var(--quiet);
  font-family: var(--sans);
  font-size: 0.55rem;
  font-weight: 300;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.page-series--iconic {
  background:
    radial-gradient(circle at 82% 8%, rgba(136, 38, 31, 0.08), transparent 30rem),
    var(--ink);
}

.page-series--iconic .page-hero {
  background: linear-gradient(135deg, rgba(126, 34, 28, 0.07), transparent 58%);
}

.page-series--bestiaire {
  --gold: #314741;
  background:
    radial-gradient(circle at 79% 9%, rgba(73, 113, 103, 0.1), transparent 31rem),
    var(--ink);
}

.page-series--bestiaire .page-hero {
  background: linear-gradient(145deg, rgba(71, 108, 100, 0.08), transparent 60%);
}

.page-series--bestiaire .work-sequence {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(5rem, 10vw, 10rem) clamp(2rem, 7vw, 8rem);
}

.page-series--bestiaire .work-sequence__item,
.page-series--bestiaire .work-sequence__item:nth-child(even) {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.page-series--bestiaire .work-sequence__item:nth-child(even) {
  padding-top: clamp(5rem, 13vw, 13rem);
}

.page-series--bestiaire .work-sequence__index {
  position: absolute;
  top: 0;
  left: -2rem;
  z-index: 3;
  writing-mode: vertical-rl;
}

.page-series--bestiaire .work-media,
.page-series--bestiaire .work-sequence__item:nth-child(even) .work-media {
  grid-column: auto;
  grid-row: auto;
  width: 100%;
  min-height: clamp(28rem, 49vw, 43rem);
}

.page-series--bestiaire .work-media .art-fragment { inset: 0; }

.page-series--bestiaire .work-copy,
.page-series--bestiaire .work-sequence__item:nth-child(even) .work-copy {
  grid-column: auto;
  grid-row: auto;
  padding: 2rem 0 0 clamp(1rem, 4vw, 4rem);
}

.page-series--bestiaire .work-copy h3 {
  font-size: clamp(2.7rem, 5vw, 4.8rem);
}

/* Iconic image-presentation study */
.page-series--plate,
.page-series-study {
  --ink: #ada69f;
  --ink-soft: #bdb6ae;
  --line: rgba(40, 37, 31, 0.16);
  --line-soft: rgba(40, 37, 31, 0.075);
}

.page-series--plate .site-nav.is-scrolled,
.page-series-study .site-nav.is-scrolled {
  background: rgba(173, 166, 159, 0.9);
}

.page-series-study {
  background:
    radial-gradient(circle at 82% 4%, rgba(116, 37, 30, 0.08), transparent 32rem),
    var(--ink);
}

.plate-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(18rem, 0.58fr);
  gap: clamp(3rem, 10vw, 11rem);
  align-items: end;
  min-height: 72svh;
  padding: clamp(9rem, 17vh, 13rem) var(--gutter) clamp(5rem, 10vh, 8rem);
  border-bottom: 1px solid var(--line);
}

.plate-hero__title {
  margin: 1.5rem 0 0;
  font-family: var(--serif);
  font-size: clamp(5rem, 11vw, 11.5rem);
  font-weight: 300;
  letter-spacing: -0.055em;
  line-height: 0.76;
}

.plate-hero__aside {
  align-self: end;
  max-width: 31rem;
  padding-bottom: 0.4rem;
}

.plate-hero__aside p {
  margin: 0;
  color: var(--paper-soft);
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  line-height: 1.65;
}

.plate-hero__aside a,
.plate-study-end a {
  display: inline-flex;
  gap: 0.8rem;
  margin-top: 2.5rem;
  padding-bottom: 0.65rem;
  border-bottom: 1px solid var(--gold);
  font-family: var(--sans);
  font-size: 0.58rem;
  font-weight: 200;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.plate-study-intro {
  display: grid;
  grid-template-columns: 0.35fr 1fr;
  gap: clamp(2rem, 8vw, 9rem);
  padding: clamp(5rem, 10vw, 10rem) var(--gutter);
  border-bottom: 1px solid var(--line);
}

.plate-study-intro > p { margin: 0; }

.plate-study-intro > p:last-child {
  max-width: 48rem;
  font-family: var(--serif);
  font-size: clamp(2rem, 4.2vw, 4.4rem);
  font-weight: 300;
  letter-spacing: -0.025em;
  line-height: 1.03;
}

.plate-series-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(18rem, 0.55fr);
  gap: clamp(3rem, 10vw, 11rem);
  align-items: end;
  min-height: 82svh;
  padding: clamp(10rem, 19vh, 15rem) var(--gutter) clamp(5rem, 11vh, 9rem);
  border-bottom: 1px solid var(--line);
}

.plate-series-hero__title {
  margin: 1.5rem 0 0;
  font-family: var(--serif);
  font-size: clamp(7rem, 17vw, 17rem);
  font-weight: 300;
  letter-spacing: -0.065em;
  line-height: 0.68;
}

.plate-series-hero__aside {
  max-width: 32rem;
  padding-bottom: 0.35rem;
}

.plate-series-hero__aside p {
  margin: 0;
  color: var(--paper-soft);
  font-size: clamp(1.1rem, 1.7vw, 1.45rem);
  line-height: 1.6;
}

.plate-series-hero__aside span {
  display: block;
  margin-top: 2.5rem;
  color: var(--gold);
  font-family: var(--sans);
  font-size: 0.58rem;
  font-weight: 200;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.plate-series-intro {
  display: grid;
  grid-template-columns: minmax(14rem, 0.35fr) minmax(0, 1fr);
  gap: clamp(3rem, 10vw, 12rem);
  padding: clamp(6rem, 12vw, 12rem) var(--gutter);
  border-bottom: 1px solid var(--line);
}

.plate-series-intro__aside { align-self: start; }

.plate-series-intro__copy p {
  max-width: 55rem;
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.9rem, 3.8vw, 3.9rem);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.08;
}

.plate-chapter {
  scroll-margin-top: 4.5rem;
}

.plate-chapter__header {
  display: grid;
  grid-template-columns: minmax(8rem, 0.25fr) minmax(0, 1fr) auto;
  gap: clamp(2rem, 6vw, 7rem);
  align-items: end;
  padding: clamp(6rem, 12vw, 12rem) var(--gutter) clamp(4rem, 8vw, 8rem);
  border-bottom: 1px solid var(--line);
}

.plate-chapter__header h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(5rem, 13vw, 13rem);
  font-weight: 300;
  letter-spacing: -0.06em;
  line-height: 0.68;
}

.plate-chapter__header > span {
  color: var(--quiet);
  font-family: var(--sans);
  font-size: 0.58rem;
  font-weight: 200;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.plate-further {
  display: grid;
  grid-template-columns: minmax(10rem, 0.28fr) minmax(0, 1fr);
  gap: clamp(2rem, 8vw, 9rem);
  padding: clamp(5rem, 9vw, 9rem) var(--gutter);
  border-bottom: 1px solid var(--line);
}

.plate-further > p { margin: 0; }

.plate-further ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.plate-further li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2rem;
  align-items: baseline;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--line-soft);
}

.plate-further li span {
  font-family: var(--serif);
  font-size: clamp(1.8rem, 3vw, 3.2rem);
  font-weight: 300;
}

.plate-further li small {
  color: var(--quiet);
  font-family: var(--sans);
  font-size: 0.55rem;
  font-weight: 200;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.plate-work {
  padding: clamp(5.5rem, 11vw, 11rem) var(--gutter);
  border-bottom: 1px solid var(--line);
}

.plate-work__header {
  display: grid;
  grid-template-columns: minmax(8rem, 0.25fr) minmax(0, 1fr) auto;
  gap: clamp(1.5rem, 5vw, 5rem);
  align-items: end;
  margin-bottom: clamp(3rem, 6vw, 6rem);
}

.plate-work__index,
.plate-work__meta,
.plate-work__caption span {
  margin: 0;
  color: var(--quiet);
  font-family: var(--sans);
  font-size: 0.56rem;
  font-weight: 200;
  letter-spacing: 0.2em;
  line-height: 1.7;
  text-transform: uppercase;
}

.plate-work__header h2 {
  max-width: 14ch;
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(3.4rem, 7vw, 7.5rem);
  font-weight: 300;
  letter-spacing: -0.045em;
  line-height: 0.82;
}

.plate-work__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.35rem 0.75rem;
  color: var(--gold);
}

.plate-media {
  position: relative;
  isolation: isolate;
  display: grid;
  gap: clamp(1rem, 2vw, 2rem);
}

.plate-media--triple {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.plate-media--triple .plate-figure--1 { grid-column: 1 / -1; }

.plate-media--double {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  align-items: start;
}

.plate-media--double .plate-figure--2 { margin-top: clamp(3rem, 8vw, 8rem); }

.plate-media .plate-figure {
  position: relative;
  z-index: 1;
  margin: 0;
  overflow: visible;
  background: transparent;
  clip-path: none;
  box-shadow: none;
}

.plate-media .plate-figure::after { display: none; }

.plate-media .plate-figure--1::before {
  content: '';
  position: absolute;
  inset: -8% -5%;
  z-index: -1;
  background-image: var(--art-source);
  background-position: center;
  background-size: cover;
  opacity: 0.2;
  filter: blur(clamp(2.3rem, 4vw, 4.5rem)) saturate(0.86);
  transform: scale(1.025);
  pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 25%, rgba(0, 0, 0, 0.78) 52%, transparent 79%);
  mask-image: radial-gradient(ellipse at center, #000 25%, rgba(0, 0, 0, 0.78) 52%, transparent 79%);
}

.plate-media .plate-figure img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  max-width: none;
  object-fit: contain;
  transform: none;
  filter: none;
}

.plate-work__caption {
  display: grid;
  grid-template-columns: minmax(0, 0.35fr) minmax(20rem, 0.65fr);
  gap: clamp(2rem, 8vw, 9rem);
  align-items: start;
  margin-top: clamp(2.5rem, 5vw, 5rem);
}

.plate-work__caption p {
  grid-column: 2;
  max-width: 44rem;
  margin: 0;
  color: var(--paper-soft);
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
}

.plate-work__caption span {
  grid-column: 1;
  grid-row: 1;
  padding-top: 0.35rem;
}

.plate-study-end {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  align-items: center;
  padding: clamp(4rem, 8vw, 8rem) var(--gutter);
}

.plate-study-end p {
  margin: 0;
  color: var(--quiet);
  font-family: var(--sans);
  font-size: 0.58rem;
  font-weight: 200;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.plate-study-end a { margin-top: 0; }

.philosophy {
  display: grid;
  grid-template-columns: minmax(18rem, 0.72fr) 1fr;
  gap: clamp(3rem, 10vw, 12rem);
  border-top: 1px solid var(--line);
}

.philosophy__title h2 {
  position: sticky;
  top: 8rem;
  margin: 2rem 0 0;
  font-family: var(--serif);
  font-size: clamp(3.3rem, 6vw, 6rem);
  font-weight: 300;
  letter-spacing: -0.045em;
  line-height: 0.85;
}

.philosophy__copy {
  max-width: 43rem;
  padding-top: clamp(4rem, 7vw, 7rem);
}

.philosophy__copy p {
  margin: 0 0 3rem;
  color: var(--paper-soft);
  font-size: clamp(1.15rem, 2vw, 1.65rem);
}

.philosophy__copy em { color: var(--paper); }

.archive-state {
  display: grid;
  grid-template-columns: 0.35fr 1fr;
  gap: clamp(2rem, 7vw, 8rem);
  padding: clamp(4rem, 9vw, 9rem) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.archive-state > p:nth-child(2) {
  max-width: 38rem;
  margin: 0;
  font-size: clamp(1.8rem, 4vw, 3.8rem);
  line-height: 1.08;
}

.archive-state > span {
  grid-column: 2;
  color: var(--quiet);
  font-family: var(--sans);
  font-size: 0.58rem;
  font-weight: 200;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.exhibition-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.exhibition-list li {
  display: grid;
  grid-template-columns: 0.2fr 1fr auto;
  gap: 2rem;
  align-items: baseline;
  padding: 2.5rem 0;
  border-top: 1px solid var(--line);
}

.exhibition-list time,
.exhibition-list > li > span {
  color: var(--quiet);
  font-family: var(--sans);
  font-size: 0.6rem;
  font-weight: 200;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.exhibition-list h2 { margin: 0; font-size: clamp(2rem, 4vw, 4rem); font-weight: 300; }
.exhibition-list p { margin: 0.5rem 0 0; color: var(--paper-soft); }

.contact-pending {
  display: inline-block;
  max-width: 30rem;
  margin: 3rem 0 0;
  padding: 1rem 0;
  border-top: 1px solid var(--gold);
  border-bottom: 1px solid var(--line);
  color: var(--paper-soft);
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  font-style: normal;
}

.contact-facts > div {
  padding: 1rem 0;
  border-bottom: 1px solid var(--line-soft);
}

.content-loading,
.content-error {
  padding: 4rem var(--gutter);
  color: var(--quiet);
  font-family: var(--sans);
  font-size: 0.6rem;
  font-weight: 200;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

@media (max-width: 1050px) {
  .gateway { grid-template-columns: minmax(14rem, 0.7fr) 2rem minmax(15rem, 1fr); }
  .gateway-action { display: none; }
  .gateway--bestiaire .gateway-action { display: none; }
  .series-world__link {
    grid-template-columns: minmax(13rem, 0.75fr) 3rem 1fr;
  }

  .series-world__enter { display: none; }

  .work-sequence__item,
  .work-sequence__item:nth-child(even) {
    grid-template-columns: 2rem minmax(0, 1fr) minmax(16rem, 0.82fr);
    gap: 2rem;
  }
}

@media (max-width: 900px) {
  .plate-hero {
    grid-template-columns: 1fr;
    align-content: end;
    min-height: 78svh;
    gap: 3rem;
  }

  .plate-hero__aside { max-width: 35rem; }

  .plate-study-intro {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .plate-work__header {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .plate-work__index { grid-column: 1 / -1; }
  .plate-work__meta { align-self: end; }

  .plate-work__caption {
    grid-template-columns: minmax(8rem, 0.28fr) minmax(0, 1fr);
    gap: 2rem;
  }

  .plate-series-hero {
    grid-template-columns: 1fr;
    align-content: end;
    min-height: 80svh;
    gap: 3rem;
  }

  .plate-series-hero__aside { max-width: 35rem; }

  .plate-series-intro {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .plate-series-intro__aside { position: static; }

  .plate-chapter__header {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .plate-chapter__header .route-number { grid-column: 1 / -1; }

  .plate-further {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .hero--home { padding: 0 var(--gutter); }
  .hero--home .hero-grid {
    grid-template-columns: 1fr;
    align-items: end;
    padding-top: 8rem;
    padding-bottom: clamp(5rem, 11vh, 7rem);
  }
  .home-hero-media { inset: 0; }
  /* Both heads sit in the upper half, so anchor there and let the scrim below
     carry the type rather than fading the whole artwork. */
  .home-hero-media img { object-position: 56% 14%; opacity: 0.97; }
  /* Previously a 0.94 → 0.7 wash ran across the whole width, which bleached both
     figures to carry type that only occupies the lower half. The scrim is now
     bottom-weighted: the heads stay legible up top, the type sits on quiet
     ground below. */
  .home-hero-media::after {
    background:
      linear-gradient(180deg, rgba(184, 177, 167, 0.55) 0, transparent 12%),
      linear-gradient(0deg, var(--ink) 2%, rgba(184, 177, 167, 0.9) 30%, rgba(184, 177, 167, 0.44) 49%, transparent 67%),
      linear-gradient(90deg, rgba(184, 177, 167, 0.36) 0, rgba(184, 177, 167, 0.1) 38%, transparent 60%);
  }
  .hero-spacer { display: none; }
  .hero-copy { align-self: end; max-width: 38rem; }

  .series-world__link {
    grid-template-columns: 1fr 3rem;
    gap: 2rem;
  }

  .practice-heading { grid-template-columns: 1fr 1fr; }
  .practice-heading > p:last-child { grid-column: 2; }

  .gateway,
  .gateway--bestiaire {
    grid-template-columns: 2.5rem 1fr;
    gap: 1.4rem;
  }
  .gateway .gateway-media,
  .gateway--bestiaire .gateway-media { grid-column: 1 / -1; grid-row: 1; }
  .gateway .gateway-index,
  .gateway--bestiaire .gateway-index { grid-column: 1; grid-row: 2; }
  .gateway .gateway-copy,
  .gateway--bestiaire .gateway-copy { grid-column: 2; grid-row: 2; }

  .contact-fragment { width: 70vw; opacity: 0.52; }
  .contact-inner > div:last-child { max-width: 34rem; }

  .series-world__media { grid-column: 1 / -1; }
  .series-world__number { grid-column: 2; grid-row: 2; }
  .series-world__copy { grid-column: 1; grid-row: 2; }

  .series-statement,
  .philosophy { grid-template-columns: 1fr; }

  .series-statement__aside,
  .philosophy__title h2 { position: static; }

  .page-hero--series { min-height: 82svh; }
  .page-hero--series::after { background: linear-gradient(90deg, var(--ink) 0 8%, rgba(184, 177, 167, 0.72) 46%, transparent 100%); }
  .series-hero-art { inset: 5.5rem 1rem 1rem 28%; opacity: 0.38; }
  .page-hero--series .page-lede { max-width: 28rem; }

  .chapter-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .chapter-nav a { grid-template-columns: 1fr; }

  .work-sequence__item,
  .work-sequence__item:nth-child(even) {
    grid-template-columns: 2rem 1fr;
  }

  .work-sequence__item .work-media,
  .work-sequence__item:nth-child(even) .work-media {
    grid-column: 2;
    grid-row: 1;
  }

  .work-sequence__item .work-copy,
  .work-sequence__item:nth-child(even) .work-copy {
    grid-column: 2;
    grid-row: 2;
  }

  .work-sequence__index { grid-column: 1; grid-row: 1; }

  .page-series--bestiaire .work-sequence { gap: 4rem 2rem; }
}

@media (max-width: 680px) {
  .plate-hero {
    min-height: 72svh;
    padding-top: 8rem;
  }

  .plate-hero__title {
    font-size: clamp(4.5rem, 23vw, 7rem);
  }

  .plate-work { padding-inline: 0; }

  .plate-work__header,
  .plate-work__caption {
    grid-template-columns: 1fr;
    padding-inline: var(--gutter);
  }

  .plate-work__header h2 { font-size: clamp(3.6rem, 17vw, 5.8rem); }
  .plate-work__meta { justify-content: flex-start; }

  .plate-media--triple,
  .plate-media--double {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .plate-media--triple .plate-figure--1 { grid-column: 1; }
  .plate-media--double .plate-figure--2 { margin-top: 0; }

  .plate-media .plate-figure--1::before {
    inset: -4% -2%;
    opacity: 0.14;
    filter: blur(2rem) saturate(0.86);
  }

  .plate-work__caption p,
  .plate-work__caption span {
    grid-column: 1;
    grid-row: auto;
  }

  .plate-work__caption span { order: -1; }

  .plate-study-end {
    align-items: flex-start;
    flex-direction: column;
  }

  .plate-series-hero {
    min-height: 74svh;
    padding-top: 8rem;
  }

  .plate-series-hero__title {
    font-size: clamp(6rem, 31vw, 10rem);
  }

  .plate-series-intro__copy p {
    font-size: clamp(1.8rem, 8vw, 2.8rem);
  }

  .plate-chapter__header {
    grid-template-columns: 1fr;
  }

  .plate-chapter__header h2 {
    font-size: clamp(5rem, 25vw, 8rem);
  }

  .plate-further li {
    grid-template-columns: 1fr;
    gap: 0.35rem;
  }

  .hero--home .hero-title { font-size: clamp(3rem, 15vw, 5rem); }
  .home-hero-media img { object-position: 62% 16%; }
  .hero-scroll { display: none; }

  .series-world__link { min-height: auto; }
  .series-world__media { height: 25rem; }
  .series-world__copy h2 { font-size: clamp(3.5rem, 17vw, 6rem); }

  .gateway { min-height: auto; }
  .gateway-media { height: 21rem; }
  .gateway-copy small { letter-spacing: 0.16em; }

  .practice-heading { grid-template-columns: 1fr; }
  .practice-heading > p:last-child { grid-column: 1; }

  .chapter-heading { grid-template-columns: 1fr; }
  .chapter-heading .route-number { grid-column: 1; }
  .chapter-heading > span { justify-self: start; }
  .chapter-heading h2 { font-size: clamp(4rem, 20vw, 7rem); }

  .chapter-nav { grid-template-columns: 1fr; }
  .chapter-nav a { grid-template-columns: 2rem 1fr; }

  .work-sequence__item,
  .work-sequence__item:nth-child(even) { grid-template-columns: 1fr; }
  .work-sequence__item .work-media,
  .work-sequence__item:nth-child(even) .work-media,
  .work-sequence__item .work-copy,
  .work-sequence__item:nth-child(even) .work-copy,
  .work-sequence__index { grid-column: 1; }
  .work-sequence__index { grid-row: auto; }
  .work-sequence__item .work-media,
  .work-sequence__item:nth-child(even) .work-media { grid-row: auto; }
  .work-sequence__item .work-copy,
  .work-sequence__item:nth-child(even) .work-copy { grid-row: auto; }

  .work-media { min-height: 24rem; }

  .further-works { grid-template-columns: 1fr; }
  .further-works li { grid-template-columns: 1fr; gap: 0.35rem; }

  .page-series--bestiaire .work-sequence { grid-template-columns: 1fr; }
  .page-series--bestiaire .work-sequence__item:nth-child(even) { padding-top: 0; }
  .page-series--bestiaire .work-sequence__index { position: static; writing-mode: initial; }

  .archive-state { grid-template-columns: 1fr; }
  .archive-state > span { grid-column: 1; }

  .page-hero--series { min-height: 76svh; }
  .series-hero-art { inset: 6.5rem 0.5rem 1rem 34%; opacity: 0.3; }
  .series-hero-fragment--2 { display: none; }
  .page-hero--series .page-lede { padding-left: 1rem; }

  .page-contact .page-title {
    max-width: none;
    font-size: clamp(3.2rem, 14vw, 5rem);
  }

  .contact-fragment {
    inset: 5rem 0 auto 18%;
    width: 82%;
    height: 46vh;
    opacity: 0.42;
  }
  .contact-inner { padding-top: 36vh; }
  .contact-inner > div:last-child { padding: 1.25rem; }
}

/* Unified atmospheric artwork treatment
   Public artwork details dissolve into the page instead of reading as tilted,
   hard-edged image cards. */

.art-fragment::after {
  border: 0;
  box-shadow: none;
}

.page-series-index .series-world__media {
  overflow: visible;
  background: transparent;
  clip-path: none;
  transform: none;
}

.page-home .gateway {
  isolation: isolate;
  grid-template-columns: 3rem minmax(0, 1fr) auto;
  min-height: clamp(28rem, 49vw, 42rem);
  padding: clamp(4rem, 8vw, 7rem) clamp(1rem, 3vw, 3rem);
  overflow: hidden;
}

.page-home .gateway::before {
  display: none;
}

.page-home .gateway::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  /* A graduated quiet zone under the title and category line — not a card: it
     never reaches a flat plateau and has no edge of its own. */
  /* These crops are face-filling edge to edge, so there is no naturally quiet
     zone to drop type into: the quiet is built with graduated shading instead.
     It stays a gradient — no plateau, no edge of its own — so it reads as
     atmosphere rather than a card, and the centre of the artwork is untouched.
     The right-hand ramp does the same job for "Enter work". */
  background:
    linear-gradient(90deg, rgba(184, 177, 167, 0.95) 0, rgba(184, 177, 167, 0.82) 17%, rgba(184, 177, 167, 0.46) 34%, rgba(184, 177, 167, 0.08) 58%, rgba(184, 177, 167, 0.24) 82%, rgba(184, 177, 167, 0.6) 100%),
    linear-gradient(180deg, var(--ink) 0, transparent 11%, transparent 88%, var(--ink) 100%);
  pointer-events: none;
}

.page-home .gateway--bestiaire::after {
  background:
    linear-gradient(90deg, rgba(184, 177, 167, 0.95) 0, rgba(184, 177, 167, 0.84) 18%, rgba(184, 177, 167, 0.48) 35%, rgba(184, 177, 167, 0.07) 60%, rgba(184, 177, 167, 0.22) 83%, rgba(184, 177, 167, 0.58) 100%),
    linear-gradient(180deg, var(--ink) 0, transparent 11%, transparent 88%, var(--ink) 100%);
}

.page-home .gateway-media,
.page-home .gateway--bestiaire .gateway-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: transparent;
  clip-path: none;
  transform: none;
  isolation: isolate;
}

.page-home .gateway .gateway-media,
.page-home .gateway--bestiaire .gateway-media {
  grid-column: auto;
  grid-row: auto;
}

/* Declared here rather than inline on the figure: a url() held in a custom
   property resolves against the stylesheet that consumes it, so it has to be
   written relative to this file. Keep each path in step with the matching
   <img src> in index.html — they are the same artwork. */
.page-home .gateway--iconic .gateway-media {
  --gateway-art: url('../../media/cropped/iconic-history-agrippina-and-nero.webp');
}

.page-home .gateway--bestiaire .gateway-media {
  --gateway-art: url('../../media/cropped/bestiaire-hybrides-rd-04.webp');
}

.page-home .gateway-media::before {
  content: '';
  position: absolute;
  inset: -7%;
  z-index: 0;
  background-image: var(--gateway-art);
  background-position: center;
  background-size: cover;
  opacity: 0.28;
  filter: blur(clamp(2.4rem, 4vw, 4.5rem)) saturate(0.92);
  transform: scale(1.06);
  pointer-events: none;
}

.page-home .gateway-media::after {
  inset: 0;
  z-index: 2;
  background:
    radial-gradient(ellipse at center, transparent 54%, rgba(184, 177, 167, 0.15) 73%, var(--ink) 100%);
  pointer-events: none;
}

.page-home .gateway-media img {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.9;
  transform: scale(1.035);
  filter: saturate(0.92) contrast(1.025);
  /* The radial alone only softened the corners, so the left and right sides
     stayed as straight edges and the band read as a rectangular card laid on the
     page — most visibly on hover, where the image scales inside its clipped box.
     The added horizontal pass feathers those sides into the ground; the ::after
     wash already dissolves top and bottom. */
  -webkit-mask-image:
    radial-gradient(ellipse 98% 92% at center, #000 63%, rgba(0, 0, 0, 0.88) 81%, transparent 100%),
    linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    radial-gradient(ellipse 98% 92% at center, #000 63%, rgba(0, 0, 0, 0.88) 81%, transparent 100%),
    linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
  mask-composite: intersect;
  transition: transform 900ms cubic-bezier(.2,.7,.2,1), opacity 500ms ease, filter 500ms ease;
}

/* Focal points chosen so the faces sit clear of the title and category line,
   which occupy the left third of the band. */
.page-home .gateway--iconic .gateway-media img {
  object-position: 74% center;
}

.page-home .gateway--bestiaire .gateway-media img {
  object-position: 63% center;
  opacity: 0.93;
  transform: scale(1.05);
}

.page-home .gateway-index,
.page-home .gateway-copy,
.page-home .gateway-action,
.page-home .gateway--bestiaire .gateway-index,
.page-home .gateway--bestiaire .gateway-copy,
.page-home .gateway--bestiaire .gateway-action {
  position: relative;
  z-index: 3;
  grid-row: 1;
}

.page-home .gateway-index,
.page-home .gateway--bestiaire .gateway-index {
  grid-column: 1;
}

.page-home .gateway-copy,
.page-home .gateway--bestiaire .gateway-copy {
  grid-column: 2;
  max-width: 31rem;
}

.page-home .gateway-action,
.page-home .gateway--bestiaire .gateway-action {
  grid-column: 3;
}

/* "Enter work" sits at the right end of the band, over hair and headdress. A
   halo of the page ground carried in the glyphs' own shadow lifts it off that
   detail without a plate, a chip or a box behind it. */
.page-home .gateway-action {
  color: #453521;
  text-shadow:
    0 0 0.5rem rgba(184, 177, 167, 0.95),
    0 0 1.1rem rgba(184, 177, 167, 0.85),
    0 0 2.2rem rgba(184, 177, 167, 0.6);
}

.page-home .gateway:hover .gateway-media img,
.page-home .gateway:focus-visible .gateway-media img {
  opacity: 0.94;
  transform: scale(1.065);
  filter: saturate(1) contrast(1.035);
}

.page-home .gateway--bestiaire:hover .gateway-media img,
.page-home .gateway--bestiaire:focus-visible .gateway-media img {
  transform: scale(1.1);
}

/* Keyboard focus reads as an editorial marker rather than a control: a fine
   accent rule down the entrance's leading edge plus a lift in the artwork, on
   top of the title underline below. No outline, no box, no rectangle — but the
   full-height rule is unmistakable when tabbing. `.gateway::before` is unused on
   Home (display:none), so reusing it costs nothing and leaves hover alone. */
.page-home .gateway:focus-visible {
  outline: 0;
  box-shadow: none;
}

.page-home .gateway:focus-visible::before {
  content: '';
  display: block;
  position: absolute;
  inset: clamp(1.75rem, 4vw, 3.5rem) auto;
  left: 0;
  z-index: 4;
  width: 2px;
  background: linear-gradient(180deg, transparent 0, var(--gold) 16%, var(--gold) 84%, transparent 100%);
  transform: none;
  transition: none;
  pointer-events: none;
}

.page-home .gateway:focus-visible .gateway-media img {
  opacity: 0.99;
  filter: saturate(1.02) contrast(1.05);
}

.page-home .gateway:focus-visible .gateway-index {
  color: var(--gold);
}

.page-home .gateway:focus-visible .gateway-name {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

.page-series-index .series-world__media .art-fragment {
  isolation: isolate;
  overflow: visible;
  background: transparent;
}

.page-series-index .series-world__media .art-fragment::before {
  content: '';
  position: absolute;
  inset: -8%;
  z-index: 0;
  background-image: var(--art-source);
  background-position: center;
  background-size: cover;
  opacity: 0.2;
  filter: blur(clamp(2rem, 4vw, 4rem)) saturate(0.8);
  transform: scale(1.05);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 18%, rgba(0, 0, 0, 0.68) 54%, transparent 82%);
  mask-image: radial-gradient(ellipse at center, #000 18%, rgba(0, 0, 0, 0.68) 54%, transparent 82%);
  pointer-events: none;
}

.page-series-index .series-world__media .art-fragment::after {
  inset: -3%;
  z-index: 2;
  background:
    radial-gradient(ellipse at center, transparent 39%, rgba(184, 177, 167, 0.2) 65%, var(--ink) 93%),
    linear-gradient(180deg, var(--ink) 0, transparent 12%, transparent 86%, var(--ink) 100%);
  pointer-events: none;
}

.page-series-index .series-world__media .art-fragment img {
  position: relative;
  z-index: 1;
  transform: scale(1.055);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 43%, rgba(0, 0, 0, 0.82) 62%, transparent 88%);
  mask-image: radial-gradient(ellipse at center, #000 43%, rgba(0, 0, 0, 0.82) 62%, transparent 88%);
}

.page-series-index .series-world__link:hover .art-fragment img,
.page-series-index .series-world__link:focus-visible .art-fragment img {
  transform: scale(1.085);
}

.page-about .about-fragment img {
  object-position: 46% center;
  opacity: 0.9;
  filter: saturate(0.82) contrast(1.035);
  transform: scale(1.13, 1.045);
}

.page-about .about-fragment::after {
  background:
    linear-gradient(90deg, rgba(184, 177, 167, 0.95) 0, rgba(184, 177, 167, 0.86) 20%, rgba(184, 177, 167, 0.7) 52%, rgba(184, 177, 167, 0.12) 82%, rgba(184, 177, 167, 0.34) 100%),
    linear-gradient(180deg, var(--ink) 0, transparent 13%, transparent 84%, var(--ink) 100%);
}

.page-contact .contact-fragment {
  inset: 5.5rem 0 0;
  width: 100%;
  opacity: 0.82;
  background: transparent;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 10%, #000 88%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 10%, #000 88%, transparent 100%);
}

.page-contact .contact-fragment::after {
  background:
    linear-gradient(90deg, rgba(184, 177, 167, 0.7) 0, rgba(184, 177, 167, 0.3) 20%, rgba(184, 177, 167, 0.08) 46%, rgba(184, 177, 167, 0.5) 74%, rgba(184, 177, 167, 0.82) 100%),
    linear-gradient(180deg, var(--ink) 0, transparent 14%, transparent 80%, var(--ink) 100%);
}

/* Hold the figures in the left and centre, where the display type can sit
   alongside them, and keep the right third as quiet ground for the enquiries
   column at every width — rather than letting the crop drift so that a face
   lands under the text at middle desktop sizes. */
.page-contact .contact-fragment img {
  object-position: 44% 46%;
  transform: scale(1.045);
}

.page-contact .contact-inner > div:last-child {
  /* No lift of its own. Any wash bounded by this column reads as a panel, however
     soft — the readability comes from the stage's own two-sided feathering,
     which leaves genuinely quiet ground under this column. */
  background: none;
}

/* Contact stage, desktop. The artwork previously ran the full width, so the
   display type and the email crossed the lower figure's eye and mouth at
   1062–1440, and the enquiries column sat on collar and jewellery. The figures
   are now held in a controlled central band and the artwork is feathered away on
   both sides, so the left column and the right column each land on quiet
   beige-gray ground. The feather is atmospheric, not a frame: it never reaches a
   plateau and has no edge of its own. */
@media (min-width: 921px) {
  /* The display type ends around 44% of the stage and the enquiries column starts
     around 66% at both 1062 and 1440, so the artwork's solid core is held to that
     band and ramps away on both sides. */
  .page-contact .contact-fragment {
    -webkit-mask-image:
      linear-gradient(180deg, transparent 0, #000 10%, #000 88%, transparent 100%),
      linear-gradient(90deg, transparent 0, rgba(0, 0, 0, 0.04) 18%, rgba(0, 0, 0, 0.13) 30%, rgba(0, 0, 0, 0.3) 40%, rgba(0, 0, 0, 0.66) 48%, #000 55%, #000 64%, rgba(0, 0, 0, 0.7) 71%, rgba(0, 0, 0, 0.32) 80%, rgba(0, 0, 0, 0.09) 89%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
      linear-gradient(180deg, transparent 0, #000 10%, #000 88%, transparent 100%),
      linear-gradient(90deg, transparent 0, rgba(0, 0, 0, 0.04) 18%, rgba(0, 0, 0, 0.13) 30%, rgba(0, 0, 0, 0.3) 40%, rgba(0, 0, 0, 0.66) 48%, #000 55%, #000 64%, rgba(0, 0, 0, 0.7) 71%, rgba(0, 0, 0, 0.32) 80%, rgba(0, 0, 0, 0.09) 89%, transparent 100%);
    mask-composite: intersect;
  }

  /* Move the pair into that band — the crop drifting left is what put the lower
     figure's eye and mouth under the heading and the email. */
  .page-contact .contact-fragment img {
    object-position: 56% 40%;
  }

  .page-contact .contact-fragment::after {
    background:
      linear-gradient(90deg, rgba(184, 177, 167, 0.95) 0, rgba(184, 177, 167, 0.8) 16%, rgba(184, 177, 167, 0.42) 32%, rgba(184, 177, 167, 0.1) 46%, rgba(184, 177, 167, 0.1) 62%, rgba(184, 177, 167, 0.44) 74%, rgba(184, 177, 167, 0.84) 86%, rgba(184, 177, 167, 0.95) 100%),
      linear-gradient(180deg, var(--ink) 0, transparent 14%, transparent 80%, var(--ink) 100%);
  }
}

@media (max-width: 900px) {
  .page-about .about-fragment img {
    object-position: 52% center;
    opacity: 0.72;
    transform: scale(1.18, 1.06);
  }

  .page-series-index .series-world__media .art-fragment img {
    -webkit-mask-image: radial-gradient(ellipse at center, #000 38%, rgba(0, 0, 0, 0.78) 59%, transparent 88%);
    mask-image: radial-gradient(ellipse at center, #000 38%, rgba(0, 0, 0, 0.78) 59%, transparent 88%);
  }

  /* The halo's -8% horizontal bleed is wider than the 1.25rem mobile gutter, so
     it pushed 18px past the viewport and expanded the mobile layout viewport.
     Keep the vertical bloom; rein the sides in to fit the gutter. The layers are
     blurred and radially masked, so the horizontal reach is barely legible. */
  .page-series-index .series-world__media .art-fragment::before {
    inset: -8% -3%;
  }

  .page-series-index .series-world__media .art-fragment::after {
    inset: -3% -2%;
  }

  .page-home .gateway,
  .page-home .gateway--bestiaire {
    grid-template-columns: 2.5rem minmax(0, 1fr);
    align-content: end;
    min-height: 35rem;
    padding: 3rem 1.25rem;
  }

  .page-home .gateway-index,
  .page-home .gateway--bestiaire .gateway-index {
    grid-column: 1;
    grid-row: 1;
  }

  .page-home .gateway-copy,
  .page-home .gateway--bestiaire .gateway-copy {
    grid-column: 2;
    grid-row: 1;
  }

  .page-home .gateway-media img {
    opacity: 0.78;
    -webkit-mask-image: radial-gradient(ellipse 105% 92% at center, #000 48%, rgba(0, 0, 0, 0.78) 72%, transparent 100%);
    mask-image: radial-gradient(ellipse 105% 92% at center, #000 48%, rgba(0, 0, 0, 0.78) 72%, transparent 100%);
  }
}

@media (max-width: 680px) {
  .page-home .gateway,
  .page-home .gateway--bestiaire {
    min-height: 31rem;
    padding: 2.5rem 1rem;
  }

  .page-home .gateway::after,
  .page-home .gateway--bestiaire::after {
    background:
      linear-gradient(180deg, rgba(184, 177, 167, 0.18) 0, rgba(184, 177, 167, 0.05) 46%, rgba(184, 177, 167, 0.82) 100%),
      linear-gradient(90deg, rgba(184, 177, 167, 0.56), rgba(184, 177, 167, 0.12));
  }

  .page-home .gateway-media img,
  .page-home .gateway--bestiaire .gateway-media img {
    object-position: center;
    opacity: 0.76;
  }

  .page-contact .contact-fragment {
    inset: 5rem 0 0;
    width: 100%;
    height: 54vh;
    opacity: 0.5;
  }

  .page-contact .contact-fragment::after {
    background:
      linear-gradient(90deg, rgba(184, 177, 167, 0.9), rgba(184, 177, 167, 0.32)),
      linear-gradient(180deg, var(--ink) 0, transparent 15%, transparent 70%, var(--ink) 100%);
  }
}