/* ==========================================================================
   Components — Site furniture rendered as composable CSS classes
   Header, footer, navigation, breadcrumb, hero, prose, press list,
   cross-reference anchors, image figures, cards, pills, buttons.

   All component styles reference design tokens. No hard-coded values.
   ========================================================================== */

/* ==========================================================================
   1. Site Header
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background-color: var(--colour-parchment);
  border-block-end: 1px solid var(--colour-border);
  backdrop-filter: saturate(180%) blur(8px);
  -webkit-backdrop-filter: saturate(180%) blur(8px);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding-block: var(--space-3);
  width: 100%;
  max-width: var(--width-page);
  margin-inline: auto;
  padding-inline: var(--pad-mobile);
}

@media (min-width: 768px) {
  .site-header__inner {
    padding-inline: var(--pad-tablet);
    padding-block: var(--space-4);
  }
}

@media (min-width: 1280px) {
  .site-header__inner {
    padding-inline: var(--pad-desktop);
  }
}

/* Brand mark — site name in display serif */
.site-brand {
  font-family: var(--font-display);
  font-size: var(--type-lg);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-tight);
  color: var(--colour-ink);
  text-decoration: none;
  white-space: nowrap;
  line-height: 1;
}

.site-brand:hover {
  color: var(--colour-ochre);
}

.site-brand__chinese {
  display: inline-block;
  font-size: 0.85em;
  margin-inline-start: 0.4em;
  color: var(--colour-text-muted);
  font-weight: var(--weight-light);
}

@media (min-width: 768px) {
  .site-brand {
    font-size: var(--type-xl);
  }
}

/* ==========================================================================
   2. Primary Navigation
   ========================================================================== */
.nav-primary {
  display: none;
}

.nav-primary__list {
  display: flex;
  gap: var(--space-5);
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav-primary__link {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--type-sm);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--colour-ink);
  text-decoration: none;
  padding-block: var(--space-2);
  border-block-end: 1px solid transparent;
  transition: border-color var(--motion-fast) var(--ease-out),
              color var(--motion-fast) var(--ease-out);
}

.nav-primary__link:hover,
.nav-primary__link[aria-current="page"] {
  color: var(--colour-ochre);
  border-block-end-color: var(--colour-ochre);
}

@media (min-width: 1024px) {
  .nav-primary {
    display: block;
  }
}

/* Mobile menu toggle */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: transparent;
  color: var(--colour-ink);
}

.nav-toggle__icon {
  width: 22px;
  height: 1px;
  background: currentColor;
  position: relative;
}

.nav-toggle__icon::before,
.nav-toggle__icon::after {
  content: "";
  position: absolute;
  left: 0;
  width: 22px;
  height: 1px;
  background: currentColor;
}

.nav-toggle__icon::before {
  top: -7px;
}

.nav-toggle__icon::after {
  top: 7px;
}

@media (min-width: 1024px) {
  .nav-toggle {
    display: none;
  }
}

/* Mobile drawer */
.nav-drawer {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  background-color: var(--colour-parchment);
  padding: var(--space-7) var(--pad-mobile);
  transform: translateX(100%);
  transition: transform var(--motion-base) var(--ease-editorial);
  overflow-y: auto;
}

.nav-drawer[data-open="true"] {
  transform: translateX(0);
}

.nav-drawer__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.nav-drawer__link {
  font-family: var(--font-display);
  font-size: var(--type-2xl);
  font-weight: var(--weight-display);
  color: var(--colour-ink);
  text-decoration: none;
  display: block;
  padding-block: var(--space-2);
  border-block-end: 1px solid var(--colour-border);
}

/* ==========================================================================
   3. Language Switcher
   ========================================================================== */
.lang-switcher {
  display: flex;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--type-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

.lang-switcher__link {
  color: var(--colour-text-muted);
  text-decoration: none;
  padding-block: var(--space-1);
  transition: color var(--motion-fast) var(--ease-out);
}

.lang-switcher__link:hover,
.lang-switcher__link[aria-current="true"] {
  color: var(--colour-ink);
}

.lang-switcher__separator {
  color: var(--colour-border-strong);
}

/* ==========================================================================
   4. Breadcrumb
   ========================================================================== */
.breadcrumb {
  font-family: var(--font-body);
  font-size: var(--type-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--colour-text-muted);
  padding-block: var(--space-4);
}

.breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  padding: 0;
  margin: 0;
}

.breadcrumb__link {
  color: var(--colour-text-muted);
  text-decoration: none;
  transition: color var(--motion-fast) var(--ease-out);
}

.breadcrumb__link:hover {
  color: var(--colour-ochre);
}

.breadcrumb__separator {
  color: var(--colour-border-strong);
}

.breadcrumb__current {
  color: var(--colour-ink);
}

/* ==========================================================================
   5. Hero Block — three variants
   ========================================================================== */

/* Base hero */
.hero {
  padding-block: var(--space-7) var(--space-8);
  text-align: center;
}

@media (min-width: 768px) {
  .hero {
    padding-block: var(--space-8) var(--space-9);
  }
}

.hero__eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: var(--type-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--colour-ochre);
  margin-block-end: var(--space-4);
}

.hero__title {
  font-family: var(--font-display);
  font-size: var(--type-4xl);
  font-weight: var(--weight-display);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--colour-ink);
  margin-block-end: var(--space-4);
  max-width: 18ch;
  margin-inline: auto;
}

@media (min-width: 768px) {
  .hero__title {
    font-size: var(--type-5xl);
  }
}

@media (min-width: 1024px) {
  .hero__title {
    font-size: var(--type-6xl);
  }
}

.hero__subheading {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--type-lg);
  font-weight: var(--weight-regular);
  line-height: var(--leading-snug);
  color: var(--colour-text-muted);
  max-width: var(--width-narrow);
  margin-inline: auto;
}

@media (min-width: 768px) {
  .hero__subheading {
    font-size: var(--type-xl);
  }
}

/* Hero variant — image-led (image background or large image below) */
.hero-image {
  padding-block: 0;
}

.hero-image__media {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  margin-block-end: var(--space-7);
}

@media (min-width: 1024px) {
  .hero-image__media {
    aspect-ratio: 21 / 9;
  }
}

.hero-image__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Hero variant — full-bleed (edge to edge) */
.hero-fullbleed {
  position: relative;
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: var(--space-9);
  overflow: hidden;
}

.hero-fullbleed__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-fullbleed__media img,
.hero-fullbleed__media-video,
.hero-fullbleed__media-poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero-fullbleed__media-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Default — show poster image, hide video. Mobile + reduced-motion safe. */
.hero-fullbleed__media-video {
  display: none;
}

/* Desktop with motion allowed — swap to autoplay loop video.
   Scoped to .hero-fullbleed--has-video so image-only heroes (About, etc.)
   keep their poster visible at all viewports. */
@media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
  .hero-fullbleed--has-video .hero-fullbleed__media-video {
    display: block;
  }
  .hero-fullbleed--has-video .hero-fullbleed__media-poster {
    display: none;
  }
}

.hero-fullbleed__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(20, 20, 15, 0.10) 0%,
    rgba(20, 20, 15, 0.30) 35%,
    rgba(20, 20, 15, 0.72) 100%
  );
  z-index: 1;
}

/* Cornerstone gradient — darkens the right side (where the headline sits)
   rather than the bottom. Five-stop smooth ramp avoids the visible band
   that a two-stop gradient produced (which read as a flat grey block).
   Maximum opacity 0.62 — enough contrast for white type, gentle enough
   to keep the photograph reading at full tonal range. */
@media (min-width: 768px) {
  .hero-fullbleed--cornerstone .hero-fullbleed__overlay {
    background: linear-gradient(
      90deg,
      rgba(20, 20, 15, 0) 0%,
      rgba(20, 20, 15, 0) 38%,
      rgba(20, 20, 15, 0.20) 62%,
      rgba(20, 20, 15, 0.48) 88%,
      rgba(20, 20, 15, 0.62) 100%
    );
  }
  /* When the cornerstone uses --corner layout, the radial gradient from --home
     style applies instead of the cornerstone horizontal one. Specificity
     override below. */
  .hero-fullbleed--cornerstone.hero-fullbleed--corner .hero-fullbleed__overlay {
    background:
      radial-gradient(
        ellipse 95% 80% at 22% 88%,
        rgba(20, 20, 15, 0.78) 0%,
        rgba(20, 20, 15, 0.55) 25%,
        rgba(20, 20, 15, 0.20) 55%,
        rgba(20, 20, 15, 0) 80%
      );
  }
}

.hero-fullbleed__content {
  position: relative;
  z-index: 2;
  text-align: center;
  color: var(--colour-parchment);
  padding-inline: var(--pad-mobile);
}

.hero-fullbleed__content .hero__title,
.hero-fullbleed__content .hero__eyebrow,
.hero-fullbleed__content .hero__subheading {
  color: var(--colour-parchment);
}

.hero-fullbleed__content .hero__eyebrow {
  color: var(--colour-ochre);
}

/* ==========================================================================
   Hero — fullbleed cinematic (Phase 1 visual direction, May 2026)
   Composition for the homepage hero and any cornerstone using the cinematic
   register. Slow-ease text reveal; scroll cue at foot; deepened gradient.
   ========================================================================== */
/* Home hero — magazine-cover composition (May 2026 visual direction)
   Photograph above, editorial text band below. Photograph is never
   overlaid — faces and composition read at full tonal range. Replaces
   the previous fullbleed cinematic-overlay treatment for the homepage,
   which compromised the subject by competing with text. Cornerstones
   (About, Serumpun) keep the cinematic overlay; the homepage steps to
   the magazine register because the source photograph is portraiture
   and editorial subject is the chef. */

/* Home hero — cinematic-overlay (Visual Direction Moodboard v0.1, May 2026).
   Carol Sachs Krug Tokyo three-chef composition at full bleed; editorial
   type at lower-left in a tight column. The photograph reads at full
   tonal range across most of the frame; a soft radial gradient darkens
   only the lower-left text region for legibility, leaving the editorial
   moment uncompromised. */
.hero-fullbleed--home {
  min-height: 88vh;
}

@media (min-width: 768px) {
  .hero-fullbleed--home {
    min-height: 92vh;
  }
}

/* Photograph — keep heads in frame on every viewport via object-position.
   The asset is the full 4:3 Carol Sachs source; cover-crop biases up so
   the upper third (where the faces are) is always visible. */
.hero-fullbleed--home .hero-fullbleed__media img {
  object-position: center 28%;
}

/* Overlay — radial soft mask anchored at lower-left, fading to transparent.
   Carries the type's contrast without touching the photograph elsewhere. */
.hero-fullbleed--home .hero-fullbleed__overlay {
  background:
    radial-gradient(
      ellipse 95% 80% at 22% 88%,
      rgba(20, 20, 15, 0.78) 0%,
      rgba(20, 20, 15, 0.55) 25%,
      rgba(20, 20, 15, 0.20) 55%,
      rgba(20, 20, 15, 0) 80%
    );
}

/* Content panel — pinned to lower-left, tight column. Never spans across
   centre or right; the photograph subjects are unobstructed. */
.hero-fullbleed--home .hero-fullbleed__content {
  align-self: end;
  width: 100%;
  padding-block-end: clamp(3rem, 7vh, 5rem);
}

.hero-fullbleed__panel {
  width: 100%;
  max-width: 540px;
  margin-inline-start: clamp(1.25rem, 5vw, 4rem);
  text-align: left;
}

.hero-fullbleed--home .hero-fullbleed__title {
  max-width: 16ch;
}

.hero-fullbleed--home .hero-fullbleed__sub {
  max-width: 28ch;
}

.hero-fullbleed--cornerstone {
  min-height: 70vh;
}

@media (min-width: 768px) {
  .hero-fullbleed--cornerstone {
    min-height: 78vh;
  }

  /* Split-frame composition for cornerstones: photograph subject lives on
     the left of the frame; headline lives in the negative space on the
     right. The image and the typography read as one composition rather
     than text overlaid on photograph. Berluti / Hermès convention. */
  .hero-fullbleed--cornerstone .hero-fullbleed__content {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    align-self: stretch;
    width: 100%;
    padding-block: 0;
    padding-inline-end: clamp(2rem, 6vw, 6rem);
  }

  .hero-fullbleed--cornerstone .hero-fullbleed__content > .container-content {
    margin-inline: 0;
    margin-inline-start: auto;
    max-width: 520px;
    padding-inline: 0;
  }

  /* Cornerstone with --corner layout: opt out of split-frame back to the
     corner-panel composition. Same lower-left text discipline as the home. */
  .hero-fullbleed--cornerstone.hero-fullbleed--corner .hero-fullbleed__content {
    display: block;
    align-self: end;
    padding-inline-end: 0;
    padding-block-end: clamp(3rem, 7vh, 5rem);
  }

  .hero-fullbleed--cornerstone.hero-fullbleed--corner .hero-fullbleed__content > .container-content,
  .hero-fullbleed--corner:not(.hero-fullbleed--cornerstone) .hero-fullbleed__content > .container-content {
    width: 100%;
    max-width: 540px;
    margin-inline: 0;
    margin-inline-start: clamp(1.25rem, 5vw, 4rem);
    padding-inline: 0;
    text-align: left;
  }

  .hero-fullbleed--corner:not(.hero-fullbleed--cornerstone) .hero-fullbleed__content {
    align-self: end;
    padding-block-end: clamp(3rem, 7vh, 5rem);
  }

  /* Split-left composition (mirror of cornerstone split-frame): photograph
     subject lives on the right of the frame; headline lives in the left
     negative space. Used when the photograph naturally sits with the
     subject right of centre. */
  .hero-fullbleed--cornerstone.hero-fullbleed--split-left .hero-fullbleed__content {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    align-self: stretch;
    width: 100%;
    padding-block: 0;
    padding-inline-start: clamp(2rem, 6vw, 6rem);
    padding-inline-end: 0;
  }

  .hero-fullbleed--cornerstone.hero-fullbleed--split-left .hero-fullbleed__content > .container-content {
    margin-inline: 0;
    margin-inline-end: auto;
    margin-inline-start: 0;
    max-width: 520px;
    padding-inline: 0;
  }

  /* Gradient mirror: darken the LEFT side (where the typography lives)
     instead of the right. Same five-stop ramp, axis flipped. */
  .hero-fullbleed--cornerstone.hero-fullbleed--split-left .hero-fullbleed__overlay {
    background: linear-gradient(
      270deg,
      rgba(20, 20, 15, 0) 0%,
      rgba(20, 20, 15, 0) 38%,
      rgba(20, 20, 15, 0.20) 62%,
      rgba(20, 20, 15, 0.48) 88%,
      rgba(20, 20, 15, 0.62) 100%
    );
  }
}

.hero-fullbleed__content {
  text-align: left;
  width: 100%;
  padding-block-end: clamp(3rem, 8vh, 6rem);
  align-self: end;
}

.hero-fullbleed__eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: var(--type-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: rgba(247, 241, 230, 0.86);
  margin-block-end: var(--space-4);
}

.hero-fullbleed__eyebrow span[lang="zh"] {
  letter-spacing: 0.08em;
}

.hero-fullbleed__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.4rem, 6vw, 5.4rem);
  line-height: 1.04;
  letter-spacing: -0.012em;
  color: var(--colour-parchment);
  margin: 0;
  max-width: 18ch;
}

.hero-fullbleed__title em {
  font-style: italic;
  font-weight: 400;
}

.hero-fullbleed__sub {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.05rem, 1.6vw, 1.4rem);
  line-height: 1.45;
  color: rgba(247, 241, 230, 0.92);
  margin-block-start: var(--space-4);
  max-width: 44ch;
}

.hero-fullbleed__scroll-cue {
  position: absolute;
  bottom: var(--space-5);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  pointer-events: none;
}

.hero-fullbleed__scroll-cue-line {
  display: block;
  width: 1px;
  height: 56px;
  background: linear-gradient(
    180deg,
    rgba(247, 241, 230, 0) 0%,
    rgba(247, 241, 230, 0.7) 50%,
    rgba(247, 241, 230, 0) 100%
  );
}

/* Slow-ease text reveal — eyebrow first, title 80ms after, sub 80ms after.
   Defeated by prefers-reduced-motion — content always renders, never hidden. */
@media (prefers-reduced-motion: no-preference) {
  .hero-fullbleed__eyebrow,
  .hero-fullbleed__title,
  .hero-fullbleed__sub {
    opacity: 0;
    transform: translateY(12px);
    animation: heroReveal 900ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }

  .hero-fullbleed__eyebrow { animation-delay: 200ms; }
  .hero-fullbleed__title   { animation-delay: 280ms; }
  .hero-fullbleed__sub     { animation-delay: 360ms; }

  .hero-fullbleed__scroll-cue-line {
    animation: heroScrollCue 2.4s ease-in-out 1.4s infinite;
  }
}

@keyframes heroReveal {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes heroScrollCue {
  0%, 100% { opacity: 0.4; transform: translateY(0); }
  50%      { opacity: 1;   transform: translateY(8px); }
}

/* ── The cornerstone moment — the breath (v2.0 §8). The five cornerstone
   landings only (About, Restaurant Legacy, Serumpun Sarawak, Collaborations,
   Media Centre, via .hero-fullbleed--cornerstone). The poster settles from
   0.94 opacity with the faintest scale over 1400ms on the Loewe ease; the
   typography resolves slowly behind it — eyebrow at 800ms, title at 1000ms,
   subheading at 1200ms — so the page is read as settling, not entering.
   Heroes that already carry their own motion (ken-burns, micro-motion) keep
   it and take only the typography settle, so the two never fight.
   prefers-reduced-motion zeroes it. Never named in copy as a signature. ── */
@media (prefers-reduced-motion: no-preference) {
  .cornerstone-landing .hero-fullbleed:not(.hero-fullbleed--ken-burns):not(.hero-fullbleed--micro-motion) .hero-fullbleed__media {
    animation: cornerstoneBreath 1400ms cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  .cornerstone-landing .hero-fullbleed__eyebrow {
    transform: translateY(4px);
    animation-delay: 800ms;
    animation-duration: 600ms;
  }
  .cornerstone-landing .hero-fullbleed__title {
    transform: translateY(6px);
    animation-delay: 1000ms;
    animation-duration: 700ms;
  }
  .cornerstone-landing .hero-fullbleed__sub {
    transform: translateY(4px);
    animation-delay: 1200ms;
    animation-duration: 700ms;
  }
}

@keyframes cornerstoneBreath {
  from { opacity: 0.94; transform: scale(1); }
  to   { opacity: 1;    transform: scale(1.008); }
}

/* ==========================================================================
   6. Prose — body editorial container
   ========================================================================== */
.prose {
  width: 100%;
  max-width: var(--width-prose);
  margin-inline: auto;
  font-family: var(--font-body);
  font-size: var(--type-base);
  line-height: var(--leading-prose);
  color: var(--colour-text);
}

.prose > * + * {
  margin-block-start: var(--space-4);
}

.prose h2,
.prose h3,
.prose h4 {
  margin-block-start: var(--space-7);
}

.prose h2 + p,
.prose h3 + p,
.prose h4 + p {
  margin-block-start: var(--space-3);
}

.prose hr {
  margin-block: var(--space-7);
}

.prose .reflection,
.prose blockquote.reflection {
  margin-block: var(--space-7);
}

.prose .pull-quote {
  margin-block: var(--space-6);
}

/* ==========================================================================
   7. Selected Press List
   ========================================================================== */
.press-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  border-block-start: 1px solid var(--colour-border);
}

.press-item {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-1);
  padding-block: var(--space-4);
  border-block-end: 1px solid var(--colour-border);
}

@media (min-width: 768px) {
  .press-item {
    grid-template-columns: 180px 1fr auto;
    gap: var(--space-5);
    align-items: baseline;
  }
}

.press-item__outlet {
  font-family: var(--font-body);
  font-size: var(--type-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--colour-ink);
}

.press-item__title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--type-md);
  font-weight: var(--weight-regular);
  line-height: var(--leading-snug);
  color: var(--colour-ink);
}

.press-item__title a {
  color: inherit;
  text-decoration: none;
  border-block-end: 1px solid transparent;
  transition: border-color var(--motion-fast) var(--ease-out);
}

.press-item__title a:hover {
  border-block-end-color: var(--colour-ochre);
  color: var(--colour-ochre);
}

.press-item__date {
  font-family: var(--font-body);
  font-size: var(--type-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  color: var(--colour-text-muted);
}

.press-item__lang {
  font-family: var(--font-body);
  font-size: var(--type-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--colour-text-muted);
}

/* Press archive header */
.press-list__heading {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-4);
  margin-block-end: var(--space-4);
}

.press-list__see-all {
  font-family: var(--font-body);
  font-size: var(--type-sm);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--colour-ochre);
  text-decoration: none;
  white-space: nowrap;
}

.press-list__see-all:hover {
  color: var(--colour-oxblood);
}

/* ==========================================================================
   8. Cross-Reference Anchor Block
   ========================================================================== */
.cross-ref {
  background-color: rgba(184, 137, 62, 0.04);
  border-inline-start: 2px solid var(--colour-ochre);
  padding: var(--space-5);
  margin-block: var(--space-7);
  max-width: var(--width-prose);
  margin-inline: auto;
}

.cross-ref__label {
  display: block;
  font-family: var(--font-body);
  font-size: var(--type-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--colour-ochre);
  margin-block-end: var(--space-2);
}

.cross-ref__title {
  font-family: var(--font-display);
  font-size: var(--type-lg);
  font-weight: var(--weight-regular);
  line-height: var(--leading-snug);
  color: var(--colour-ink);
  margin-block-end: var(--space-2);
}

.cross-ref__title a {
  color: inherit;
  text-decoration: none;
  transition: color var(--motion-fast) var(--ease-out);
}

.cross-ref__title a:hover {
  color: var(--colour-ochre);
}

.cross-ref__excerpt {
  font-family: var(--font-body);
  font-size: var(--type-sm);
  line-height: var(--leading-relaxed);
  color: var(--colour-text-muted);
}

/* ==========================================================================
   9. Image Figure — single, with caption, gallery
   ========================================================================== */
figure.image,
.figure {
  margin: 0;
  padding: 0;
}

.figure img {
  width: 100%;
  height: auto;
  display: block;
}

.figure figcaption,
.figure__caption {
  display: block;
  font-family: var(--font-body);
  font-size: var(--type-sm);
  line-height: var(--leading-normal);
  color: var(--colour-text-muted);
  margin-block-start: var(--space-2);
  padding-inline: var(--space-1);
  font-style: italic;
}

.figure__credit {
  display: block;
  font-family: var(--font-body);
  font-size: var(--type-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--colour-text-muted);
  margin-block-start: var(--space-1);
  font-style: normal;
}

/* Gallery — two/three-up image grids inside prose */
.gallery {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin-block: var(--space-6);
}

@media (min-width: 768px) {
  .gallery-2 {
    grid-template-columns: repeat(2, 1fr);
  }
  .gallery-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ==========================================================================
   CARD SYSTEM — consolidated (Stage 2 · Jun 2026)
   One base, three variants, one chrome.

   Replaces, in components.css:
     · §10  Card system (RX.V)              ~1036–1133
     · §25  Cornerstone card                ~2166–2238
     · the logo-row block                   ~2785–2819
     · §R3.K Card hover refinement          ~3892–3929
     · Push 119 stray .card__logo           ~5974–5991
     · the Push 137→157 cadence layer       ~6250–7013
        (KEEPING, untouched, the three non-card pushes interleaved there:
         Push 141 section spacing · Push 143 grid columns · Push 145 sub-heading)

   What changes for the eye: nothing but the internal rhythm. One gap owns the
   spacing — no 12px base gap stacked on 4px margins, no min-height reservations,
   no ::before placeholders, no abandoned alignment hacks. The faint 1px border,
   the parchment fill, the square corners, the 30px Cormorant title with its
   hover ink-rule, the cornerstone gradients, the logo footprints (including the
   two tuned marks) and every hover all hold exactly as committed.
   ========================================================================== */

/* Base ---------------------------------------------------------------------- */
.card {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);                                   /* 8px — single internal rhythm */
  padding: var(--space-4) var(--space-4) var(--space-5); /* 24 / 24 / 32 — preserved */
  background-color: var(--colour-parchment);
  border: 1px solid var(--colour-border);
  border-radius: 0;                                      /* v2.0 §5.1 — square */
  position: relative;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform var(--motion-slow) var(--ease-editorial); /* 400ms rise */
}

.card:focus-visible { outline: 2px solid var(--colour-oxblood); outline-offset: 2px; }
.card:active        { transform: scale(0.99); }
.grid .card         { height: 100%; }                    /* equal-height cards across a row */

/* Media — cornerstone gradient by default; an image takes precedence -------- */
.card__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(184, 137, 62, 0.08) 0%, rgba(92, 31, 26, 0.06) 100%);
}
.card__media--cornerstone-about          { background: linear-gradient(135deg, rgba(184, 137, 62, 0.12), rgba(184, 137, 62, 0.02)); }
.card__media--cornerstone-restaurant     { background: linear-gradient(135deg, rgba(92, 31, 26, 0.14), rgba(92, 31, 26, 0.03)); }
.card__media--cornerstone-serumpun       { background: linear-gradient(135deg, rgba(26, 75, 58, 0.12), rgba(184, 137, 62, 0.04)); }
.card__media--cornerstone-collaborations { background: linear-gradient(135deg, rgba(26, 26, 24, 0.08), rgba(184, 137, 62, 0.06)); }
.card__media--cornerstone-media          { background: linear-gradient(135deg, rgba(139, 133, 121, 0.16), rgba(26, 26, 24, 0.04)); }

.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--motion-slow) var(--ease-editorial);
}
.card:hover .card__media img { transform: scale(1.02); }

/* Marque — the cornerstone mark when there is no image ---------------------- */
.card__marque {
  width: 56px;
  height: 56px;
  color: var(--colour-ochre);
  opacity: 0.55;
  transition: opacity var(--motion-base) var(--ease-editorial),
              transform var(--motion-slow) var(--ease-editorial);
}
.card:hover .card__marque { opacity: 0.85; transform: scale(1.08); }

/* Eyebrow ------------------------------------------------------------------- */
.card__eyebrow {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--type-xs);                 /* 12px */
  font-weight: var(--weight-medium);         /* 500 */
  letter-spacing: var(--tracking-widest);    /* 0.16em */
  text-transform: uppercase;
  color: var(--colour-ochre);
}

/* Title — 30px Cormorant, animated ink-rule on hover ------------------------ */
.card__title {
  margin: 0;
  position: relative;
  padding-block-end: var(--space-1);
  font-family: var(--font-display);
  font-size: var(--type-2xl);                /* 30px */
  font-weight: var(--weight-display);        /* 500 */
  line-height: var(--leading-snug);          /* 1.25 */
  letter-spacing: -0.015em;
  color: var(--colour-ink);
  transition: color 200ms var(--ease-aman);
}
.card__title::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background-color: var(--colour-ink);
  transition: width var(--motion-slow) var(--ease-editorial);
}
.card:hover .card__title        { color: var(--colour-oxblood); }
.card:hover .card__title::after { width: 100%; }

/* Excerpt / meta ------------------------------------------------------------ */
.card__excerpt,
.card__meta {
  margin: 0;
  font-family: var(--font-body);
  line-height: var(--leading-relaxed);
  color: var(--colour-text-muted);
}
.card__excerpt { font-size: var(--type-base); }        /* 16px (Cornerstone register) */
.card__meta    { font-size: var(--type-sm); font-style: italic; letter-spacing: var(--tracking-wide); }

/* Logo-row — the mark stacked above the title (Loewe idiom) ----------------- */
.card__logo-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
  margin: 0;
}
.card__logo {
  display: block;
  width: 140px;
  height: 50px;
  max-width: 140px;
  max-height: 50px;
  object-fit: contain;
  object-position: left center;
  flex-shrink: 0;
}
/* Two marks read small at the standard footprint — held at their tuned size. */
.card__logo[src*="sarawak-tourism-board"]  { width: 284px; height: 101px; max-width: 284px; max-height: 101px; }
.card__logo[src*="borneo-cultural-museum"] { width: 271px; height: 97px;  max-width: 271px; max-height: 97px; }

/* Variants ------------------------------------------------------------------ */
.card--meta .card__excerpt { display: none; }           /* B — meta line replaces excerpt */
.card--text .card__media   { display: none; }           /* C — text-only, chrome + text */
.card--compact             { padding: var(--space-3); gap: var(--space-1); }
.card--compact .card__title { font-size: var(--type-base); font-style: italic; }

/* Motion preference --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .card,
  .card__media img,
  .card__title,
  .card__title::after,
  .card__marque {
    transition-duration: 0s;
  }
}

/* Mobile logo footprint ----------------------------------------------------- */
@media (max-width: 768px) {
  .card__logo                                  { width: 110px; height: 40px; max-width: 110px; max-height: 40px; }
  .card__logo[src*="sarawak-tourism-board"]    { width: 223px; height: 81px;  max-width: 223px; max-height: 81px; }
  .card__logo[src*="borneo-cultural-museum"]   { width: 215px; height: 78px;  max-width: 215px; max-height: 78px; }
}

/* ==========================================================================
   11. Tag / Category Pill — used for press archive filtering
   ========================================================================== */
.pill {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-body);
  font-size: var(--type-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--colour-text-muted);
  border: 1px solid var(--colour-border);
  padding: var(--space-1) var(--space-3);
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  transition: all var(--motion-fast) var(--ease-out);
}

.pill:hover {
  border-color: var(--colour-ochre);
  color: var(--colour-ochre);
}

.pill[aria-pressed="true"],
.pill[data-active="true"] {
  background-color: var(--colour-ink);
  color: var(--colour-parchment);
  border-color: var(--colour-ink);
}

.pill[data-tone="oxblood"] {
  border-color: var(--colour-oxblood);
  color: var(--colour-oxblood);
}

.pill[data-tone="oxblood"][aria-pressed="true"] {
  background-color: var(--colour-oxblood);
  color: var(--colour-parchment);
}

/* ==========================================================================
   12. Button — restrained, used sparingly
   ========================================================================== */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--type-sm);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  text-decoration: none;
  padding: var(--space-3) var(--space-5);
  border: 1px solid var(--colour-ink);
  background-color: var(--colour-ink);
  color: var(--colour-parchment);
  cursor: pointer;
  transition: all var(--motion-fast) var(--ease-out);
}

.button:hover {
  background-color: var(--colour-ochre);
  border-color: var(--colour-ochre);
  color: var(--colour-parchment);
}

.button-ghost {
  background-color: transparent;
  color: var(--colour-ink);
}

.button-ghost:hover {
  background-color: var(--colour-ink);
  color: var(--colour-parchment);
}

.button-link {
  background: transparent;
  border: 0;
  padding: 0;
  color: var(--colour-ink);
  border-block-end: 1px solid var(--colour-ochre);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  font-size: var(--type-sm);
  font-weight: var(--weight-medium);
  font-family: var(--font-body);
}

.button-link:hover {
  color: var(--colour-ochre);
}

/* ==========================================================================
   13. Honour Mark — small badge for French-state distinctions
   ========================================================================== */
.honour-mark {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--colour-oxblood);
  font-family: var(--font-body);
  font-size: var(--type-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--colour-oxblood);
}

.honour-mark__year {
  font-weight: var(--weight-semibold);
}

/* ==========================================================================
   14. Site Footer — single typographic register · calibrated rhythm
   ========================================================================== */
.site-footer {
  padding-block: var(--space-9) var(--space-6);
  margin-block-start: var(--space-9);
}

.site-footer__inner {
  width: 100%;
  max-width: var(--width-page);
  margin-inline: auto;
  padding-inline: var(--pad-mobile);
}

@media (min-width: 768px) {
  .site-footer__inner {
    padding-inline: var(--pad-tablet);
  }
}

@media (min-width: 1280px) {
  .site-footer__inner {
    padding-inline: var(--pad-desktop);
  }
}

.site-footer__top {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
  padding-block-end: var(--space-7);
  border-block-end: 1px solid rgba(250, 246, 240, 0.15);
}

@media (min-width: 768px) {
  .site-footer__top {
    /* 2.4fr brand block + three equal-width nav columns for measured rhythm */
    grid-template-columns: minmax(0, 2.4fr) repeat(3, minmax(0, 1fr));
    gap: var(--space-5) var(--space-6);
  }
}

.site-footer__brand {
  font-family: var(--font-display);
  font-size: var(--type-xl);
  font-weight: var(--weight-display);
  letter-spacing: var(--tracking-tight);
  color: var(--colour-parchment);
  line-height: var(--leading-tight);
}

.site-footer__brand .site-brand__chinese {
  display: block;
  font-size: var(--type-md);
  font-weight: var(--weight-regular);
  letter-spacing: 0.05em;
  color: rgba(250, 246, 240, 0.65);
  margin-block-start: var(--space-1);
}

.site-footer__tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--type-md);
  font-weight: var(--weight-regular);
  color: rgba(250, 246, 240, 0.72);
  margin-block-start: var(--space-3);
  max-width: 38ch;
  line-height: var(--leading-relaxed);
}

/* Footer column heading — single uppercase register, ochre marker */
.site-footer__heading {
  font-family: var(--font-body);
  font-size: var(--type-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--colour-ochre);
  margin-block-end: var(--space-4);
  padding-block-end: var(--space-2);
  border-block-end: 1px solid rgba(184, 137, 62, 0.25);
}

.site-footer__nav {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* All footer links carry one weight, one size, one rhythm */
.site-footer__link {
  color: rgba(250, 246, 240, 0.82);
  font-family: var(--font-body);
  font-size: var(--type-sm);
  font-weight: var(--weight-body);
  letter-spacing: 0;
  text-decoration: none;
  line-height: var(--leading-snug);
  transition: color var(--motion-fast) var(--ease-out);
}

.site-footer__link:hover,
.site-footer__link:focus-visible {
  color: var(--colour-ochre);
  outline: none;
}

/* Footer honour-marks — discreet register on dark ground, no border weight */
.site-footer .cluster.cluster-tight {
  margin-block-start: var(--space-5);
  gap: var(--space-3) var(--space-4);
}

.site-footer .honour-mark {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0;
  border: 0;
  font-family: var(--font-body);
  font-size: var(--type-xs);
  font-weight: var(--weight-body);
  letter-spacing: var(--tracking-wide);
  text-transform: none;
  color: rgba(250, 246, 240, 0.72);
}

.site-footer .honour-mark__year {
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  color: var(--colour-ochre);
}

/* Footer base strip — copyright + utility links, balanced row */
.site-footer__bottom {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding-top: 1.25rem;
  padding-bottom: 1.5rem;
  border-block-start: 1px solid var(--colour-rule, rgba(28,24,23,0.08));
  font-family: var(--font-body);
  font-size: 0.68rem;
  line-height: 1.2;
  font-weight: var(--weight-body);
  letter-spacing: var(--tracking-wide);
  color: var(--colour-text-muted);
}

.site-footer__bottom .site-footer__link {
  font-size: var(--type-xs);
  letter-spacing: var(--tracking-wide);
  color: var(--colour-text-muted);
}

@media (min-width: 768px) {
  .site-footer__bottom {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

/* ==========================================================================
   15. Section Heading — used for cornerstone sub-section titles
   ========================================================================== */
.section-heading {
  text-align: center;
  margin-block-end: var(--space-6);
}

.section-heading__eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: var(--type-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--colour-ochre);
  margin-block-end: var(--space-2);
}

.section-heading__title {
  font-family: var(--font-display);
  font-size: var(--type-3xl);
  font-weight: var(--weight-display);
  line-height: var(--leading-tight);
  color: var(--colour-ink);
  letter-spacing: -0.015em;
  margin-block-end: var(--space-3);
}

.section-heading__sub {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--type-md);
  color: var(--colour-text-muted);
  max-width: var(--width-narrow);
  margin-inline: auto;
  line-height: var(--leading-relaxed);
}

/* ==========================================================================
   17. Search — header trigger and dialog overlay
   ========================================================================== */

.search-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: transparent;
  border: 0;
  color: var(--colour-ink);
  cursor: pointer;
  border-radius: 50%;
  transition: color var(--motion-fast) var(--ease-out),
              background-color var(--motion-fast) var(--ease-out);
}

.search-toggle:hover {
  color: var(--colour-ochre);
  background-color: rgba(184, 137, 62, 0.08);
}

.search-toggle:focus-visible {
  outline: 2px solid var(--colour-ochre);
  outline-offset: 2px;
}

/* Dialog backdrop & container */
.search-dialog {
  width: 100%;
  max-width: 100%;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0;
  padding: 0;
  border: 0;
  background-color: var(--colour-parchment);
  color: var(--colour-text);
}

.search-dialog::backdrop {
  background-color: rgba(26, 26, 24, 0.6);
  backdrop-filter: saturate(180%) blur(8px);
  -webkit-backdrop-filter: saturate(180%) blur(8px);
}

.search-dialog__inner {
  max-width: var(--width-content);
  margin-inline: auto;
  padding-inline: var(--pad-mobile);
  padding-block: var(--space-5);
  height: 100%;
  display: flex;
  flex-direction: column;
}

@media (min-width: 768px) {
  .search-dialog__inner {
    padding-inline: var(--pad-tablet);
    padding-block: var(--space-7);
  }
}

@media (min-width: 1280px) {
  .search-dialog__inner {
    padding-inline: var(--pad-desktop);
  }
}

.search-dialog__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-block-end: var(--space-4);
  border-block-end: 1px solid var(--colour-border);
  margin-block-end: var(--space-4);
}

.search-dialog__form {
  margin-block-end: var(--space-4);
}

.search-dialog__form input[type="search"] {
  width: 100%;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--type-2xl);
  font-weight: var(--weight-regular);
  letter-spacing: -0.01em;
  color: var(--colour-ink);
  background-color: transparent;
  border: 0;
  border-block-end: 1px solid var(--colour-border-strong);
  padding-block: var(--space-3);
  outline: none;
  transition: border-color var(--motion-fast) var(--ease-out);
}

@media (min-width: 768px) {
  .search-dialog__form input[type="search"] {
    font-size: var(--type-3xl);
  }
}

.search-dialog__form input[type="search"]:focus {
  border-block-end-color: var(--colour-ochre);
}

.search-dialog__form input[type="search"]::placeholder {
  color: var(--colour-text-muted);
  font-style: italic;
}

.search-dialog__hint {
  padding-block: var(--space-3);
  color: var(--colour-text-muted);
}

.search-dialog__hint .caption em {
  color: var(--colour-ink);
  font-style: italic;
  margin-inline: 0.1em;
}

.search-dialog__results {
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow-y: auto;
  margin-block-start: var(--space-3);
  flex: 1;
}

.search-dialog__empty {
  text-align: center;
  padding-block: var(--space-7);
}

/* Search result card */
.search-result {
  display: block;
  padding-block: var(--space-4);
  border-block-end: 1px solid var(--colour-border);
  text-decoration: none;
  color: inherit;
  transition: padding-inline-start var(--motion-fast) var(--ease-out);
}

.search-result:hover,
.search-result:focus-visible {
  padding-inline-start: var(--space-3);
  border-inline-start: 2px solid var(--colour-ochre);
}

.search-result:focus-visible {
  outline: none;
}

.search-result__eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: var(--type-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--colour-ochre);
  margin-block-end: var(--space-2);
}

.search-result__title {
  font-family: var(--font-display);
  font-size: var(--type-xl);
  font-weight: var(--weight-regular);
  line-height: var(--leading-snug);
  color: var(--colour-ink);
  margin-block-end: var(--space-2);
}

.search-result:hover .search-result__title,
.search-result:focus-visible .search-result__title {
  color: var(--colour-ochre);
}

.search-result__excerpt {
  font-family: var(--font-body);
  font-size: var(--type-sm);
  line-height: var(--leading-relaxed);
  color: var(--colour-text-muted);
  margin: 0;
}

/* Pagefind injects <mark> elements around matched terms */
.search-result__excerpt mark {
  background-color: rgba(184, 137, 62, 0.15);
  color: var(--colour-ink);
  padding: 0.05em 0.15em;
  border-radius: 1px;
}

.search-result__error {
  font-family: var(--font-body);
  font-size: var(--type-sm);
  color: var(--colour-text-muted);
  text-align: center;
  padding-block: var(--space-7);
}

/* ==========================================================================
   18. Table of Contents — sticky in-page navigation for long sub-pages
   Hydrated client-side by /assets/js/toc.js when 3+ H2 headings are present.
   ========================================================================== */

.toc {
  /* Hidden by default; shown by JS when 3+ headings detected */
}

.toc[hidden] {
  display: none;
}

/* Mobile: collapsed dropdown above body content */
.toc {
  margin-block: var(--space-5) var(--space-7);
  margin-inline: auto;
  max-width: var(--width-prose);
  padding-inline: var(--pad-mobile);
}

.toc__inner {
  border-block: 1px solid var(--colour-border);
  padding-block: var(--space-3);
}

.toc__label {
  display: block;
  font-family: var(--font-body);
  font-size: var(--type-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--colour-ochre);
  margin-block-end: var(--space-3);
}

.toc__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.toc__item {
  margin: 0;
}

.toc__link {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--type-base);
  line-height: var(--leading-snug);
  color: var(--colour-text-muted);
  text-decoration: none;
  padding-block: var(--space-1);
  padding-inline-start: var(--space-3);
  border-inline-start: 1px solid var(--colour-border);
  transition: color var(--motion-fast) var(--ease-out),
              border-color var(--motion-fast) var(--ease-out);
}

.toc__link:hover {
  color: var(--colour-ink);
  border-inline-start-color: var(--colour-ochre);
}

.toc__link[aria-current="true"] {
  color: var(--colour-ink);
  border-inline-start: 2px solid var(--colour-ochre);
  padding-inline-start: calc(var(--space-3) - 1px);
}

/* Desktop: sticky sidebar to the right of prose, large screens only */
@media (min-width: 1280px) {
  .toc {
    position: fixed;
    top: 100px;
    right: var(--space-6);
    width: 220px;
    max-width: 220px;
    margin: 0;
    padding: 0;
    z-index: var(--z-elevated);
    pointer-events: none;
  }

  .toc__inner {
    pointer-events: auto;
    border: 0;
    padding: 0;
    max-height: calc(100vh - 160px);
    overflow-y: auto;
  }

  .toc__label {
    margin-block-end: var(--space-4);
  }

  .toc__list {
    gap: var(--space-2);
  }

  .toc__link {
    font-size: var(--type-sm);
    padding-block: var(--space-1);
  }
}

/* On very wide screens (1600px+), give the sidebar more breathing room */
@media (min-width: 1600px) {
  .toc {
    right: calc((100vw - var(--width-content)) / 2 - 280px);
  }
}

/* Heading scroll-margin so anchors don't hide behind the sticky header */
.prose h2,
.prose h3,
.prose h4 {
  scroll-margin-block-start: 100px;
}

/* ==========================================================================
   19. Meta Strip — date, author, reading time bar
   ========================================================================== */
.meta-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--font-body);
  font-size: var(--type-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--colour-text-muted);
  padding-block: var(--space-3);
  border-block: 1px solid var(--colour-border);
  margin-block: var(--space-5);
}

.meta-strip__separator {
  color: var(--colour-border-strong);
}

/* ==========================================================================
   20. Top Bar — provenance line above the masthead
   Holds the locale/language switcher and an editorial provenance phrase.
   ========================================================================== */
.top-bar {
  background-color: var(--colour-ink);
  color: rgba(250, 246, 240, 0.85);
  font-family: var(--font-body);
  font-size: var(--type-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

.top-bar__inner {
  width: 100%;
  max-width: var(--width-page);
  margin-inline: auto;
  padding-inline: var(--pad-mobile);
  padding-block: 0.6rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

@media (min-width: 768px) {
  .top-bar__inner {
    padding-inline: var(--pad-tablet);
  }
}

@media (min-width: 1280px) {
  .top-bar__inner {
    padding-inline: var(--pad-desktop);
  }
}

.top-bar__provenance {
  display: none;
  color: rgba(250, 246, 240, 0.7);
  font-size: 0.7rem;
  font-weight: var(--weight-medium);
}

@media (min-width: 768px) {
  .top-bar__provenance {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
  }
}

.top-bar__provenance .dot {
  width: 3px;
  height: 3px;
  background-color: var(--colour-ochre);
  display: inline-block;
  transform: rotate(45deg);
}

.top-bar .lang-switcher {
  font-size: 0.7rem;
}

.top-bar .lang-switcher__link {
  color: rgba(250, 246, 240, 0.7);
}

.top-bar .lang-switcher__link:hover,
.top-bar .lang-switcher__link[aria-current="true"] {
  color: var(--colour-parchment);
}

.top-bar .lang-switcher__separator {
  color: rgba(250, 246, 240, 0.3);
}

/* ==========================================================================
   21. Refined Masthead — header rebalanced for chic-and-lux register
   Three-column grid: brand (left) · nav (centre) · search (right)
   Tighter, more confident spacing. Subtle ochre underline on hover.
   ========================================================================== */

/* Override the original .site-header__inner for refined masthead composition */
.site-header__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-5);
}

.site-brand {
  font-size: var(--type-xl);
  letter-spacing: -0.015em;
  line-height: 1;
  display: inline-flex;
  align-items: baseline;
  gap: 0.4em;
}

.site-brand__chinese {
  font-size: 0.75em;
  font-weight: var(--weight-light);
  color: var(--colour-mute);
  margin-inline-start: 0;
}

@media (min-width: 768px) {
  .site-brand {
    font-size: 1.625rem;
  }
}

/* Nav becomes part of the masthead at desktop, right-aligned next to search */
.nav-primary__list {
  justify-content: center;
  gap: var(--space-6);
}

.nav-primary__link {
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  font-weight: var(--weight-medium);
  padding-block: var(--space-3);
}

.nav-primary__link::after {
  content: "";
  display: block;
  width: 0;
  height: 1px;
  background: var(--colour-ochre);
  margin-block-start: 4px;
  transition: width var(--motion-base) var(--ease-out);
}

.nav-primary__link:hover::after,
.nav-primary__link[aria-current="page"]::after {
  width: 100%;
}

.nav-primary__link:hover,
.nav-primary__link[aria-current="page"] {
  color: var(--colour-ink);
  border-block-end-color: transparent;
}

/* Subtle ochre micro-rule beneath the masthead */
.site-header {
  position: sticky;
  top: 0;
  background-color: rgba(250, 246, 240, 0.92);
  border-block-end: 1px solid rgba(184, 137, 62, 0.18);
}

.site-header::after {
  content: "";
  display: block;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(184, 137, 62, 0.4) 50%,
    transparent 100%
  );
  width: 60%;
  margin-inline: auto;
  margin-block-start: -1px;
}

/* ==========================================================================
   22. Hero Ornament — filigree above eyebrow, wordmark composition
   ========================================================================== */
.hero-ornament {
  display: block;
  margin-inline: auto;
  margin-block-end: var(--space-5);
  width: 56px;
  height: 18px;
  color: var(--colour-ochre);
  opacity: 0.85;
}

.hero-display {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: clamp(3rem, 9vw, 7.5rem);
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--colour-ink);
  text-wrap: balance;
}

.hero-display .site-brand__chinese {
  font-weight: var(--weight-light);
  letter-spacing: 0;
  margin-inline-start: 0.25em;
  color: var(--colour-mute);
}

.hero-tagline {
  font-family: var(--font-body);
  font-size: var(--type-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--colour-ochre);
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin-block-end: var(--space-4);
}

.hero-tagline__rule {
  display: inline-block;
  width: 32px;
  height: 1px;
  background-color: currentColor;
  opacity: 0.6;
}

/* ==========================================================================
   23. Honour Strip — refined honour-mark presentation, used on home + bio
        Equal-width grid · equal-height cells · precision register
   ========================================================================== */
.honour-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  align-items: stretch;
  gap: var(--space-4) var(--space-5);
  padding-block: var(--space-5);
  border-block: 1px solid rgba(92, 31, 26, 0.15);
  margin-block: var(--space-7);
}

@media (max-width: 720px) {
  .honour-strip {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }
}

.honour-strip .honour-mark {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-3);
  border: 0;
  text-transform: none;
  letter-spacing: 0;
  height: 100%;
  min-height: 160px;
}

.honour-strip .honour-mark__seal {
  display: block;
  width: 32px;
  height: 32px;
  color: var(--colour-oxblood);
  margin-block-end: var(--space-1);
  flex: 0 0 auto;
}

.honour-strip .honour-mark__title {
  font-family: var(--font-display);
  font-size: var(--type-base);
  font-style: italic;
  font-weight: var(--weight-regular);
  color: var(--colour-ink);
  letter-spacing: 0;
  text-transform: none;
  line-height: var(--leading-snug);
  max-width: 24ch;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.honour-strip .honour-mark__year {
  font-family: var(--font-body);
  font-size: var(--type-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--colour-mute);
  flex: 0 0 auto;
  margin-block-start: auto;
}

/* ==========================================================================
   24. Section Break — ornamental divider between editorial sections
   Centred filigree replaces the simple rotated square (.divider-mark).
   ========================================================================== */
.section-break {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  padding-block: var(--space-7);
  width: 100%;
  max-width: var(--width-content);
  margin-inline: auto;
  padding-inline: var(--pad-mobile);
}

.section-break__rule {
  flex: 1;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(139, 133, 121, 0.4) 50%,
    transparent 100%
  );
  max-width: 240px;
}

.section-break__mark {
  width: 24px;
  height: 24px;
  color: var(--colour-ochre);
  flex-shrink: 0;
}

.divider-mark {
  display: block;
  width: 6px;
  height: 6px;
  background-color: var(--colour-ochre);
  margin-inline: auto;
  margin-block: var(--space-7);
  transform: rotate(45deg);
}

/* ==========================================================================
   26. Footer Refinement — wordmark wash, ochre rule
   ========================================================================== */
.site-footer {
  position: relative;
}

.site-footer::before {
  content: "";
  display: block;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(184, 137, 62, 0.5) 50%,
    transparent 100%
  );
  width: 60%;
  margin-inline: auto;
  margin-block-end: var(--space-6);
}

.site-footer__brand {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4em;
  font-size: 1.625rem;
}

.site-footer .site-brand__chinese {
  color: rgba(250, 246, 240, 0.55);
}

.site-footer .honour-mark {
  border-color: rgba(184, 137, 62, 0.5);
  color: rgba(250, 246, 240, 0.85);
}

.site-footer .honour-mark__year {
  color: var(--colour-ochre);
}

/* ==========================================================================
   27. Hero — refined home composition (overrides defaults on .home)
   ========================================================================== */
.hero-block {
  position: relative;
  text-align: center;
  padding-block: var(--space-9) var(--space-8);
  overflow: hidden;
}

.hero-block::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      ellipse at 50% 0%,
      rgba(184, 137, 62, 0.08) 0%,
      transparent 60%
    ),
    radial-gradient(
      ellipse at 50% 100%,
      rgba(92, 31, 26, 0.04) 0%,
      transparent 60%
    );
  pointer-events: none;
  z-index: 0;
}

.hero-block > * {
  position: relative;
  z-index: 1;
}

@media (min-width: 1024px) {
  .hero-block {
    padding-block: 8rem 6rem;
  }
}

/* ==========================================================================
   28. Back-to-Top — small ochre marque, fixed bottom-right
        Appears after 800px scroll, smooth-scroll on click,
        respects prefers-reduced-motion.
   ========================================================================== */
.back-to-top {
  position: fixed;
  inset-block-end: 24px;
  inset-inline-end: 24px;
  z-index: var(--z-overlay, 80);

  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;

  width: 56px;
  height: 56px;
  padding: 0;

  background-color: var(--colour-parchment);
  color: var(--colour-oxblood);
  border: 1px solid rgba(92, 31, 26, 0.25);
  border-radius: 999px;
  box-shadow:
    0 1px 2px rgba(26, 26, 24, 0.06),
    0 8px 24px rgba(26, 26, 24, 0.10);

  cursor: pointer;
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  line-height: 1;

  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition:
    opacity var(--motion-base, 240ms) var(--ease-out),
    transform var(--motion-base, 240ms) var(--ease-out),
    visibility 0s linear var(--motion-base, 240ms),
    background-color var(--motion-fast) var(--ease-out),
    color var(--motion-fast) var(--ease-out),
    border-color var(--motion-fast) var(--ease-out);
}

.back-to-top[data-visible="true"] {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition:
    opacity var(--motion-base, 240ms) var(--ease-out),
    transform var(--motion-base, 240ms) var(--ease-out),
    visibility 0s linear 0s,
    background-color var(--motion-fast) var(--ease-out),
    color var(--motion-fast) var(--ease-out),
    border-color var(--motion-fast) var(--ease-out);
}

.back-to-top:hover,
.back-to-top:focus-visible {
  background-color: var(--colour-oxblood);
  color: var(--colour-parchment);
  border-color: var(--colour-oxblood);
  outline: none;
}

.back-to-top svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  margin-block-end: 1px;
}

.back-to-top__label {
  display: block;
  color: inherit;
}

@media (max-width: 480px) {
  .back-to-top {
    inset-block-end: 16px;
    inset-inline-end: 16px;
    width: 48px;
    height: 48px;
  }

  .back-to-top svg {
    width: 14px;
    height: 14px;
  }

  .back-to-top__label {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .back-to-top {
    transition: opacity var(--motion-fast) linear, visibility 0s linear;
    transform: none;
  }
  .back-to-top[data-visible="true"] {
    transform: none;
  }
}

/* Footer social icon — visible at rest, ochre on hover */
.site-footer__social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(250, 246, 240, 0.82);
  text-decoration: none;
  padding: var(--space-1);
  transition: color var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-out);
}

.site-footer__social:hover,
.site-footer__social:focus-visible {
  color: var(--colour-ochre);
  outline: none;
  transform: translateY(-1px);
}

.site-footer__social svg {
  display: block;
}

/* Footer — tighter vertical rhythm for the Connect column with icons + links */
.site-footer__nav {
  gap: var(--space-3);
}

/* Header right cluster — breathing room between lang switcher, search, toggle */
.site-header__inner > .cluster.cluster-tight {
  gap: var(--space-5);
  align-items: center;
}

.site-header__inner .lang-switcher {
  margin-inline-end: var(--space-2);
  padding-inline-end: var(--space-3);
  border-inline-end: 1px solid var(--colour-border-strong);
}

@media (max-width: 1024px) {
  .site-header__inner .lang-switcher {
    display: none;  /* hidden on narrower screens; surfaces in mobile drawer */
    border-inline-end: 0;
  }
}

/* ==========================================================================
   Cleanup pass v8 — May 2026
   Restore active-page underline highlight on nav (broken by inline-flex
   in v6/v7). Sticky header preserved. Tagline single-line. Footer rows tight.
   ========================================================================== */

/* Safety net — overflow-x: clip lets sticky descendants keep working */
html, body {
  overflow-x: clip;
  max-width: 100%;
}

/* HEADER ─────────────────────────────────────────────────────────────── */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
}

.site-header__inner {
  display: grid;
  grid-template-columns: max-content 1fr max-content;
  align-items: center;
  gap: var(--space-4);
  padding-block: var(--space-2);
  padding-inline: var(--pad-mobile);
  width: 100%;
  max-width: var(--width-page);
  margin-inline: auto;
  box-sizing: border-box;
  min-height: 56px;
}

@media (min-width: 768px) {
  .site-header__inner {
    padding-inline: var(--pad-tablet);
    padding-block: var(--space-2);
  }
}

@media (min-width: 1280px) {
  .site-header__inner {
    padding-inline: var(--pad-desktop);
  }
}

.site-brand,
.site-brand__chinese {
  white-space: nowrap;
  line-height: 1;
}

.site-brand {
  flex-shrink: 0;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
}

.nav-primary { min-width: 0; }

.nav-primary__list {
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-4);
  min-width: 0;
}

/* CRITICAL FIX — inline-block (NOT inline-flex) so ::after underline renders */
.nav-primary__link {
  font-size: 0.7rem;
  letter-spacing: 0.10em;
  white-space: nowrap;
  padding-block: var(--space-1);
  line-height: 1;
  display: inline-block;
  position: relative;
}

/* Restored: ochre under-rule grows from 0 to 100% on hover and stays at
   100% when the link is the current page. */
.nav-primary__link::after {
  content: "";
  display: block;
  width: 0;
  height: 1px;
  background: var(--colour-ochre);
  margin-block-start: 4px;
  transition: width var(--motion-base) var(--ease-out);
}

.nav-primary__link:hover::after,
.nav-primary__link[aria-current="page"]::after {
  width: 100%;
}

.nav-primary__link:hover,
.nav-primary__link[aria-current="page"] {
  color: var(--colour-ochre);
}

/* Right cluster — language + search visually grouped */
.site-header__inner > .cluster.cluster-tight {
  gap: var(--space-2);
  align-items: center;
  flex-shrink: 0;
}

.site-header__inner .lang-switcher {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 0.65rem;
  gap: 4px;
  align-items: center;
}

.site-header__inner .lang-switcher__link {
  padding-block: 0;
  line-height: 1;
  display: inline-block;
}

.site-header__inner .lang-switcher__separator {
  font-size: 0.55rem;
  opacity: 0.4;
  line-height: 1;
}

.site-header__inner .search-toggle { width: 32px; height: 32px; }
.site-header__inner .search-toggle svg { width: 16px; height: 16px; }

@media (max-width: 1199px) {
  .nav-primary { display: none; }
  .nav-toggle { display: inline-flex; }
  .site-header__inner .lang-switcher { display: none; }
}

@media (min-width: 1200px) {
  .nav-primary { display: block; }
  .nav-toggle { display: none; }
}

/* FOOTER ─────────────────────────────────────────────────────────────── */

.site-footer {
  padding-block: var(--space-4) var(--space-3);
  margin-block-start: var(--space-5);
}

.site-footer__top {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  padding-block-end: var(--space-3);
  align-items: start;
}

@media (min-width: 768px) {
  .site-footer__top {
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: var(--space-2) var(--space-4);
  }
}

@media (min-width: 1024px) {
  .site-footer__top {
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
  }
}

.site-footer__brand {
  font-size: var(--type-lg);
  line-height: 1;
}

.site-footer__brand .site-brand__chinese {
  display: inline-block;
  font-size: var(--type-sm);
  margin-block-start: 0;
  margin-inline-start: 0.4em;
  letter-spacing: 0.04em;
  line-height: 1;
}

.site-footer__tagline {
  font-size: var(--type-sm);
  margin-block-start: var(--space-1);
  line-height: 1.3;
  max-width: none;
  white-space: nowrap;
}

@media (max-width: 767px) {
  .site-footer__tagline {
    white-space: normal;
    max-width: 36ch;
  }
}

.site-footer__heading {
  font-size: 0.66rem;
  margin-block: 0 var(--space-2);
  line-height: 1;
}

.site-footer__nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.site-footer__nav li {
  line-height: 1;
  margin: 0;
  padding: 0;
}

.site-footer__link {
  font-size: var(--type-xs);
  line-height: 1.1;
}

/* Nav-list links only — block so each item gets its own row in the column.
   The bottom-strip links (Privacy · Terms) stay inline and share their span. */
.site-footer__nav .site-footer__link {
  display: block;
  padding-block: 4px;
}

.site-footer__bottom .site-footer__link {
  display: inline;
  padding-block: 0;
}

.site-footer .site-footer__heading + .cluster {
  margin-block: 0 var(--space-2);
  gap: var(--space-3);
}

.site-footer .site-footer__heading + .cluster + .site-footer__nav {
  margin-block-start: 0;
}

.site-footer .cluster.cluster-tight {
  margin-block-start: var(--space-2);
  gap: 4px var(--space-3);
}

.site-footer .honour-mark {
  font-size: 0.65rem;
  gap: var(--space-1);
  line-height: 1;
}

.site-footer .honour-mark__year {
  font-size: 0.65rem;
  line-height: 1;
}

.site-footer__social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(250, 246, 240, 0.82);
  text-decoration: none;
  padding: 0;
  transition: color var(--motion-fast) var(--ease-out),
              transform var(--motion-fast) var(--ease-out);
}

.site-footer__social:hover,
.site-footer__social:focus-visible {
  color: var(--colour-ochre);
  outline: none;
  transform: translateY(-1px);
}

.site-footer__social svg {
  display: block;
  width: 18px;
  height: 18px;
}

/* Hero brand-logo — sub-page hero displays the brand mark above the title.
   Sized to allow detail-rich marks (Sarawak State emblem, Hennessy herald)
   to read clearly while remaining proportionate to the page title. */
.hero__brand-logo {
  display: block;
  margin-inline: auto;
  margin-block-end: var(--space-3);
  height: 88px;
  width: auto;
  max-width: 320px;
  object-fit: contain;
  color: var(--colour-ink);
}

@media (min-width: 768px) {
  .hero__brand-logo {
    height: 112px;
    max-width: 400px;
  }
}

/* Heading with inline brand logo — H2 sections that introduce a partner
   maison or institution carry the partner's mark inline with the heading.
   Always side-by-side: logo sits to the LEFT of the H2 text on the same
   horizontal line. Never wraps above. */
.heading-with-logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: nowrap;
}

.heading-with-logo__mark {
  display: inline-block;
  height: 33px;
  width: auto;
  max-width: 116px;
  object-fit: contain;
  flex-shrink: 0;
}

@media (min-width: 768px) {
  .heading-with-logo__mark {
    height: 44px;
    max-width: 154px;
  }
}

.heading-with-logo__text {
  display: inline;
  flex: 1 1 auto;
  min-width: 0;
}

/* Badge modifier — circular or self-framed brand marks (e.g. SCV's hornbill
   badge) that should not carry the framing background/border/padding used
   for text wordmarks, and that need square display dimensions to read at
   the same visual weight as 2:1 horizontal lockups. */
.heading-with-logo__mark--badge {
  height: 42px;
  max-width: 42px;
  background: none;
  border: none;
  padding: 0;
  border-radius: 0;
}

@media (min-width: 768px) {
  .heading-with-logo__mark--badge {
    height: 56px;
    max-width: 56px;
  }
}

/* Chef portrait alongside biographical prose — used in the Serumpun In Motion
   cohort section. Portrait sits to the left at a fixed display square, prose
   flows to the right; on narrow viewports the portrait stacks above the prose.
   object-fit: cover with object-position: center top keeps faces in frame
   when source photos are landscape and the subject's head is in the upper
   third. */
.chef-portrait-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  margin-block: var(--space-4);
  flex-wrap: wrap;
}

.chef-portrait-row__photo {
  flex: 0 0 auto;
  width: 180px;
  height: 180px;
  border-radius: 4px;
  object-fit: cover;
  object-position: center top;
  background: rgba(26, 26, 24, 0.04);
  border: 1px solid rgba(26, 26, 24, 0.08);
}

.chef-portrait-row__prose {
  flex: 1 1 320px;
  min-width: 0;
}

.chef-portrait-row__prose > p {
  margin-block: 0 var(--space-3);
}

.chef-portrait-row__prose > p:last-child {
  margin-block-end: 0;
}

@media (min-width: 768px) {
  .chef-portrait-row {
    gap: var(--space-5);
    margin-block: var(--space-5);
    flex-wrap: nowrap;
  }
  .chef-portrait-row__photo {
    width: 200px;
    height: 200px;
  }
}

/* Contact page — action-first
   Primary CTA centred standalone block, then a 3-up grid of subject-line
   shortcut cards each opening the user's email client pre-filled. */
.contact-cta-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: var(--space-5) 0 var(--space-6);
  width: 100%;
}

.contact-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--colour-ink);
  background: var(--colour-cream-warm, #f5ede0);
  border: 1px solid rgba(26, 26, 24, 0.18);
  border-radius: 4px;
  padding: 16px 36px;
  text-decoration: none;
  letter-spacing: 0.01em;
  text-align: center;
  transition: background var(--motion-fast) var(--ease-out),
              border-color var(--motion-fast) var(--ease-out),
              color var(--motion-fast) var(--ease-out),
              transform var(--motion-fast) var(--ease-out);
}

.contact-cta:hover,
.contact-cta:focus-visible {
  background: var(--colour-ink);
  color: var(--colour-cream, #faf6f0);
  border-color: var(--colour-ink);
  transform: translateY(-1px);
  outline: none;
  text-decoration: none;
}

@media (min-width: 768px) {
  .contact-cta {
    font-size: 1.7rem;
    padding: 18px 44px;
  }
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin: var(--space-4) 0 var(--space-6);
}

@media (min-width: 768px) {
  .contact-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
  }
}

@media (min-width: 1024px) {
  .contact-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.contact-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px 24px;
  background: rgba(26, 26, 24, 0.025);
  border: 1px solid rgba(26, 26, 24, 0.10);
  border-radius: 0;
  text-decoration: none;
  color: var(--colour-ink);
  transition: background var(--motion-fast) var(--ease-out),
              border-color var(--motion-fast) var(--ease-out),
              color var(--motion-fast) var(--ease-out),
              transform var(--motion-fast) var(--ease-out);
}

.contact-card:hover,
.contact-card:focus-visible {
  background: var(--colour-ink);
  color: var(--colour-cream, #faf6f0);
  border-color: var(--colour-ink);
  transform: translateY(-2px);
  outline: none;
  text-decoration: none;
}

.contact-card:hover .contact-card__hint,
.contact-card:focus-visible .contact-card__hint {
  color: rgba(250, 246, 240, 0.78);
}

/* .contact-card__label / .contact-card__hint — earlier duplicate rules removed
   (Stage 3, Jun 2026). The canonical definitions live below in the RX.V contact
   block (display label, body hint); these dead rules only repeated, off-token. */

/* Video gallery — 6-card featured grid for the Media Centre Video page.
   Same parchment-card aesthetic as the contact-card grid; one card flagged
   as 'anchor' (e.g. Metta Studio channel link) carries a slightly stronger
   visual presence to invite the click. */
.video-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin: var(--space-4) 0 var(--space-6);
}

@media (min-width: 768px) {
  .video-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .video-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.video-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px;
  background: rgba(26, 26, 24, 0.025);
  border: 1px solid rgba(26, 26, 24, 0.10);
  border-radius: 0;
  text-decoration: none;
  color: var(--colour-ink);
  transition: background var(--motion-fast) var(--ease-out),
              border-color var(--motion-fast) var(--ease-out),
              color var(--motion-fast) var(--ease-out),
              transform var(--motion-fast) var(--ease-out);
}

.video-card:hover,
.video-card:focus-visible {
  background: var(--colour-ink);
  color: var(--colour-cream, #faf6f0);
  border-color: var(--colour-ink);
  transform: translateY(-2px);
  outline: none;
  text-decoration: none;
}

.video-card:hover .video-card__hint,
.video-card:focus-visible .video-card__hint,
.video-card:hover .video-card__category,
.video-card:focus-visible .video-card__category {
  color: rgba(250, 246, 240, 0.78);
}

.video-card--anchor {
  background: rgba(26, 26, 24, 0.05);
  border-color: rgba(26, 26, 24, 0.15);
}

.video-card__category {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--colour-ochre, #b48b48);
  transition: color var(--motion-fast) var(--ease-out);
}

.video-card__title {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0.005em;
}

.video-card__hint {
  font-family: var(--font-sans);
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--colour-ink-muted, rgba(26, 26, 24, 0.65));
  font-style: italic;
  flex: 1 1 auto;
  transition: color var(--motion-fast) var(--ease-out);
}

.video-card__cta {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 600;
  margin-top: 4px;
  letter-spacing: 0.01em;
}

.video-channel-cta {
  display: flex;
  justify-content: center;
  margin: var(--space-5) 0 var(--space-6);
}

/* Inline video figure — responsive HTML5 video player with caption.
   Used on the Media Centre Video page and on sub-pages where a
   single video belongs alongside the editorial prose. */
.video-figure {
  margin: var(--space-5) 0;
  max-width: 100%;
}

.video-figure video {
  display: block;
  width: 100%;
  height: auto;
  max-height: 70vh;
  background: #000;
  border-radius: 4px;
  box-shadow: 0 2px 12px rgba(26, 26, 24, 0.18);
}

.video-figure figcaption {
  margin-top: var(--space-2);
  font-family: var(--font-serif);
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--colour-ink-muted, rgba(26, 26, 24, 0.72));
  font-style: italic;
}

.video-figure figcaption strong {
  color: var(--colour-ink);
  font-style: normal;
  font-weight: 600;
}

/* Media section link -- the inviting "browse the full archive" link
   that sits beneath each Media Centre section (Watch / Read / Listen). */
.media-section-link {
  margin: var(--space-4) 0 var(--space-6);
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 600;
  text-align: right;
}

.media-section-link a {
  color: var(--colour-ochre, #b48b48);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--motion-fast) var(--ease-out);
}

.media-section-link a:hover,
.media-section-link a:focus-visible {
  border-bottom-color: var(--colour-ochre, #b48b48);
  outline: none;
}

/* Hidden override - ensures JS-driven [hidden] state actually hides the
   grid-display press items (and any future component using display: grid
   or display: flex). User-agent [hidden] uses display: none but the
   explicit .press-item { display: grid } overrides it. This rule restores
   the expected hide behaviour. */
.press-item[hidden],
.video-figure[hidden],
.contact-card[hidden],
.video-card[hidden] {
  display: none !important;
}

/* ==========================================================================
   Phase 4.2 — Maison-credit badge
   Lower-right corner of fullbleed heroes. Parchment-monochrome, low opacity.
   Renders only when hero.brandLogo is populated.
   ========================================================================== */

.hero-fullbleed__brand-credit {
  position: absolute;
  bottom: var(--space-6);
  right: var(--space-7);
  z-index: 3;
  margin: 0;
  pointer-events: none;
  opacity: 0.85;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}

.hero-fullbleed__brand-credit img {
  display: block;
  width: clamp(120px, 14vw, 168px);
  height: auto;
  filter: brightness(0) invert(1) drop-shadow(0 1px 4px rgba(0, 0, 0, 0.45));
}

.hero-fullbleed--sarawak-composite .hero-fullbleed__brand-credit img {
  width: clamp(180px, 22vw, 280px);
}

@media (max-width: 768px) {
  .hero-fullbleed__brand-credit {
    bottom: var(--space-4);
    right: var(--space-4);
  }
  .hero-fullbleed--sarawak-composite .hero-fullbleed__brand-credit img {
    width: clamp(140px, 32vw, 200px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-fullbleed__brand-credit {
    opacity: 0.85;
  }
}

/* ==========================================================================
   Phase 4.2 — Cycling-stills hero
   Five-to-seven photographs cross-fading at 4.5s dwell, 1.2s transition.
   Companion JS at src/assets/js/hero-cycling.js handles the rotation.
   ========================================================================== */

.hero-fullbleed--cycling .hero-cycling__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.hero-cycling__frame {
  position: absolute;
  inset: 0;
  display: block;
  opacity: 0;
  transition: opacity 1.4s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity;
}

.hero-cycling__frame.is-active {
  opacity: 1;
}

.hero-cycling__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  .hero-cycling__frame {
    transition: none;
  }
  .hero-cycling__frame:not(.is-active) {
    opacity: 0;
  }
}

/* ----------------------------------------------------------------------------
   Cycling-stills overlay - lightened ramp.
   The default fullbleed overlay (0.10 -> 0.30 -> 0.72) was designed so that
   white title type reads against any single hero photo. On cycling-stills
   heroes the photograph is the protagonist; the bottom-heavy 72% scrim
   reads as a visible dark band on facade and exterior frames where the
   ground plane is bright, and disappears on interior frames whose lower
   portion is already tonally deep. The lighter ramp below treats the
   photograph as the protagonist the cycling format intends.
   ---------------------------------------------------------------------------- */
.hero-fullbleed--cycling .hero-fullbleed__overlay {
  background: linear-gradient(
    180deg,
    rgba(20, 20, 15, 0.05) 0%,
    rgba(20, 20, 15, 0.15) 35%,
    rgba(20, 20, 15, 0.35) 100%
  );
}

/* ==========================================================================
   Phase 5.A — Loewe Addendum v0.2 §5.3 — Micro-motion register
   1.5px Ken-Burns zoom over 8s on opted-in hero pages.
   The eye reads this as breath rather than movement.
   ========================================================================== */
@keyframes hero-micro-motion {
  from { transform: scale(1); }
  to   { transform: scale(1.0094); }
}
.hero-fullbleed--micro-motion .hero-fullbleed__media,
.hero-fullbleed--micro-motion .hero-cycling__frame.is-active {
  animation: hero-micro-motion 8s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .hero-fullbleed--micro-motion .hero-fullbleed__media,
  .hero-fullbleed--micro-motion .hero-cycling__frame.is-active {
    animation: none;
  }
}

/* ==========================================================================
   R3.A Editorial Components -- v0.1 Moodboard
   Added Push A, May 2026
   These three components express the v0.1 editorial register that the
   gap analysis identified as the visible-moodboard delta.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Cinematic pull-quote
   v0.1 spec: "significant pulled lines set in italic display, large, with
   a champagne-coloured rule above. Below: tiny tracked-caps attribution.
   Reserved for the page's three or four most load-bearing sentences."
   -------------------------------------------------------------------------- */
.pull-quote--cinematic {
  display: block;
  max-width: var(--width-prose);
  margin-inline: auto;
  margin-block: var(--space-8);
  padding-block-start: var(--space-5);
  padding-inline: 0;
  border: 0;
  border-block-start: 1px solid var(--colour-champagne);
  text-align: left;
}

.pull-quote--cinematic p,
.pull-quote--cinematic > .pull-quote__text {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--weight-regular);
  font-size: clamp(1.5rem, 2.6vw, 2.4rem);
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--colour-ink);
  margin: 0;
  padding: 0;
}

.pull-quote--cinematic cite,
.pull-quote--cinematic > .pull-quote__attr {
  display: block;
  font-family: var(--font-body);
  font-style: normal;
  font-size: var(--type-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--colour-text-muted);
  margin-block-start: var(--space-4);
}

@media (min-width: 1024px) {
  .pull-quote--cinematic {
    margin-block: var(--space-9);
  }
}

/* --------------------------------------------------------------------------
   2. Editorial gallery row
   v0.1 spec: "Press archive moments, food photography sequences. Five-up at
   desktop. Each tile holds outlet name + headline + date in tracked caps;
   image fades in on scroll. Tatler Asia's published-work treatment."
   -------------------------------------------------------------------------- */
.editorial-gallery {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-block: var(--space-8);
  width: 100%;
}

@media (min-width: 640px) {
  .editorial-gallery { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .editorial-gallery { grid-template-columns: repeat(5, 1fr); gap: var(--space-3); }
}

.editorial-gallery__tile {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  text-decoration: none;
  color: inherit;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--motion-cinematic) var(--ease-editorial),
              transform var(--motion-cinematic) var(--ease-editorial);
}

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

.editorial-gallery__tile-media {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background-color: var(--colour-mute);
}

.editorial-gallery__tile-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--motion-slow) var(--ease-editorial);
}

.editorial-gallery__tile:hover .editorial-gallery__tile-media img {
  transform: scale(1.02);
}

.editorial-gallery__tile-outlet {
  font-family: var(--font-body);
  font-size: var(--type-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--colour-champagne);
}

.editorial-gallery__tile-title {
  font-family: var(--font-display);
  font-size: var(--type-base);
  font-weight: var(--weight-regular);
  font-style: italic;
  line-height: var(--leading-snug);
  color: var(--colour-ink);
}

.editorial-gallery__tile-date {
  font-family: var(--font-body);
  font-size: var(--type-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--colour-text-muted);
  margin-block-start: auto;
}

/* --------------------------------------------------------------------------
   3. Full-bleed editorial break
   v0.1 spec: "Every two to three scrolls, a single full-width photograph
   or video frame interrupts the prose. Quiet. No caption. Restores
   cinematic register. Tatler Asia uses this every long-form piece."
   -------------------------------------------------------------------------- */
.figure--bleed {
  display: block;
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  margin-block: var(--space-8) var(--space-8);
  padding: 0;
  overflow: hidden;
}

.figure--bleed img,
.figure--bleed video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  opacity: 0;
  transition: opacity 700ms var(--ease-editorial);
}

.figure--bleed.is-visible img,
.figure--bleed.is-visible video {
  opacity: 1;
}

@media (min-width: 1024px) {
  .figure--bleed { margin-block: var(--space-9); }
  .figure--bleed img,
  .figure--bleed video { aspect-ratio: 21 / 9; }
}

/* End of R3.A Editorial Components */

/* ==========================================================================
   R3.F Loewe Asymmetric Patterns -- v0.2 Moodboard
   Added Push F, May 2026
   The four asymmetric editorial patterns from the v0.2 Loewe addendum:
     1. Floated pull-quote (text wraps around)
     2. Image-bleed (asymmetric, breaks one edge of prose column)
     3. Off-baseline heading (H2 left-shifted from prose baseline)
     4. Irregular gallery grid (deliberately uneven, varied row heights)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Floated pull-quote
   Use as modifier on .pull-quote--cinematic to float the block to one edge,
   allowing body prose to wrap around it. Disables on mobile (no width to
   wrap around).
   -------------------------------------------------------------------------- */
.pull-quote--cinematic.pull-quote--float-right,
.pull-quote--cinematic.pull-quote--float-left {
  float: right;
  width: 48%;
  margin-block: var(--space-3) var(--space-5);
  margin-inline-start: var(--space-6);
  margin-inline-end: 0;
  padding-block-start: var(--space-4);
}

.pull-quote--cinematic.pull-quote--float-left {
  float: left;
  margin-inline-start: 0;
  margin-inline-end: var(--space-6);
}

.pull-quote--cinematic.pull-quote--float-right p,
.pull-quote--cinematic.pull-quote--float-left p {
  font-size: clamp(1.25rem, 1.8vw, 1.7rem);
  line-height: 1.3;
}

@media (max-width: 1023px) {
  .pull-quote--cinematic.pull-quote--float-right,
  .pull-quote--cinematic.pull-quote--float-left {
    float: none;
    width: 100%;
    margin-inline: auto;
    margin-block: var(--space-7);
  }
  .pull-quote--cinematic.pull-quote--float-right p,
  .pull-quote--cinematic.pull-quote--float-left p {
    font-size: clamp(1.5rem, 2.6vw, 2.4rem);
  }
}

/* --------------------------------------------------------------------------
   2. Image-bleed (asymmetric)
   Photograph extends BEYOND the prose column edge by 96-160 px on ONE side.
   Different from .figure--bleed (full viewport-width). This is asymmetric.
   -------------------------------------------------------------------------- */
.figure--bleed-left,
.figure--bleed-right {
  margin-block: var(--space-6);
  display: block;
}

.figure--bleed-left img,
.figure--bleed-right img,
.figure--bleed-left video,
.figure--bleed-right video {
  width: 100%;
  height: auto;
  display: block;
}

@media (min-width: 1024px) {
  .figure--bleed-left {
    margin-inline-start: calc(-1 * var(--space-7));
    margin-inline-end: var(--space-3);
    width: calc(100% + var(--space-7));
  }
  .figure--bleed-right {
    margin-inline-start: var(--space-3);
    margin-inline-end: calc(-1 * var(--space-7));
    width: calc(100% + var(--space-7));
  }
}

@media (min-width: 1280px) {
  .figure--bleed-left {
    margin-inline-start: calc(-1 * var(--space-8));
    width: calc(100% + var(--space-8));
  }
  .figure--bleed-right {
    margin-inline-end: calc(-1 * var(--space-8));
    width: calc(100% + var(--space-8));
  }
}

/* --------------------------------------------------------------------------
   3. Off-baseline heading
   Section H2 sits left-shifted from the prose baseline on desktop.
   Use either via .h2--off-baseline class on the H2 itself, or via
   .prose-asymmetric on the parent prose wrapper to apply to all H2s.
   -------------------------------------------------------------------------- */
.prose .h2--off-baseline,
.prose-asymmetric h2 {
  position: relative;
}

@media (min-width: 1024px) {
  .prose .h2--off-baseline,
  .prose-asymmetric h2 {
    margin-inline-start: calc(-1 * var(--space-5));
  }
}

@media (min-width: 1280px) {
  .prose .h2--off-baseline,
  .prose-asymmetric h2 {
    margin-inline-start: calc(-1 * var(--space-6));
  }
}

/* --------------------------------------------------------------------------
   4. Irregular gallery grid
   Deliberately uneven 4-6-tile gallery with varied row heights.
   Use as modifier on a wrapper containing 4-6 figure or img children.
   -------------------------------------------------------------------------- */
.gallery--irregular {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  margin-block: var(--space-7);
}

.gallery--irregular > * {
  position: relative;
  overflow: hidden;
  margin: 0;
}

.gallery--irregular > * img,
.gallery--irregular > * video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gallery--irregular > *:nth-child(1) { aspect-ratio: 4 / 5; }
.gallery--irregular > *:nth-child(2) {
  aspect-ratio: 1 / 1;
  margin-block-start: var(--space-7);
}
.gallery--irregular > *:nth-child(3) { aspect-ratio: 1 / 1; }
.gallery--irregular > *:nth-child(4) {
  aspect-ratio: 3 / 4;
  margin-block-start: var(--space-5);
}
.gallery--irregular > *:nth-child(5) { aspect-ratio: 4 / 5; }
.gallery--irregular > *:nth-child(6) {
  aspect-ratio: 1 / 1;
  margin-block-start: var(--space-7);
}

@media (min-width: 1024px) {
  .gallery--irregular {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
  }
  .gallery--irregular > *:nth-child(1) { aspect-ratio: 4 / 5; }
  .gallery--irregular > *:nth-child(2) {
    aspect-ratio: 3 / 4;
    margin-block-start: var(--space-8);
  }
  .gallery--irregular > *:nth-child(3) {
    aspect-ratio: 1 / 1;
    margin-block-start: var(--space-4);
  }
  .gallery--irregular > *:nth-child(4) { aspect-ratio: 4 / 5; }
  .gallery--irregular > *:nth-child(5) {
    aspect-ratio: 1 / 1;
    margin-block-start: var(--space-7);
  }
  .gallery--irregular > *:nth-child(6) {
    aspect-ratio: 3 / 4;
    margin-block-start: var(--space-3);
  }
}

/* End of R3.F Loewe Asymmetric Patterns */

/* ==========================================================================
   R3.G Terracotta Consumption -- v0.2 Material Accent
   Added Push G, May 2026
   The v0.2 Loewe addendum positions terracotta as the warm material accent.
   Three drop-cap variants and matching eyebrow variants distinguish page
   register: champagne for occasion-led pages (collaborations, press),
   terracotta-deep for ingredient-led pages (Conservation, Serumpun),
   burgundy for institutional pages (Recognition, About cornerstone).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Drop-cap variants
   The default .dropcap is champagne (declared in typography.css).
   These modifiers override per page register.
   -------------------------------------------------------------------------- */
.dropcap--terracotta::first-letter,
p.dropcap.dropcap--terracotta::first-letter,
.dropcap.dropcap--terracotta::first-letter {
  color: var(--colour-terracotta-deep);
}

.dropcap--burgundy::first-letter,
p.dropcap.dropcap--burgundy::first-letter,
.dropcap.dropcap--burgundy::first-letter {
  color: var(--colour-burgundy);
}

.dropcap--ink::first-letter,
p.dropcap.dropcap--ink::first-letter,
.dropcap.dropcap--ink::first-letter {
  color: var(--colour-ink);
}

/* --------------------------------------------------------------------------
   Eyebrow variants
   Default eyebrow renders in champagne (typography.css). These modifiers
   provide register-correct alternates.
   -------------------------------------------------------------------------- */
.eyebrow.eyebrow--terracotta,
.hero-fullbleed__eyebrow.eyebrow--terracotta,
.hero__eyebrow.eyebrow--terracotta,
.section-heading__eyebrow.eyebrow--terracotta {
  color: var(--colour-terracotta-deep);
}

.eyebrow.eyebrow--burgundy,
.hero-fullbleed__eyebrow.eyebrow--burgundy,
.hero__eyebrow.eyebrow--burgundy,
.section-heading__eyebrow.eyebrow--burgundy {
  color: var(--colour-burgundy);
}

/* --------------------------------------------------------------------------
   Pull-quote rule variants
   The cinematic pull-quote rule defaults to champagne. Variants for
   ingredient-led and institutional pages.
   -------------------------------------------------------------------------- */
.pull-quote--cinematic.pull-quote--terracotta {
  border-block-start-color: var(--colour-terracotta);
}

.pull-quote--cinematic.pull-quote--burgundy {
  border-block-start-color: var(--colour-burgundy);
}

/* --------------------------------------------------------------------------
   Editorial accent rule
   Standalone horizontal rule for use between sections, in three registers.
   -------------------------------------------------------------------------- */
.rule--champagne,
.rule--terracotta,
.rule--burgundy {
  display: block;
  width: 80px;
  height: 1px;
  margin-block: var(--space-7);
  border: 0;
}

.rule--champagne {
  background-color: var(--colour-champagne);
}

.rule--terracotta {
  background-color: var(--colour-terracotta);
}

.rule--burgundy {
  background-color: var(--colour-burgundy);
}

/* End of R3.G Terracotta Consumption */

/* ==========================================================================
   R3.H Text-Only Fullbleed Hero -- v0.2 register
   For pages that use hero-fullbleed register but have no photograph.
   Uses :has() selector to detect absence of __media and adjust accordingly.
   Renders shorter, on parchment background, with ink-colored typography.
   ========================================================================== */

.hero-fullbleed:not(:has(.hero-fullbleed__media)) {
  min-height: 50vh;
  padding-block: var(--space-9) var(--space-9);
  background-color: var(--colour-parchment);
}

.hero-fullbleed:not(:has(.hero-fullbleed__media)) .hero-fullbleed__overlay {
  display: none;
}

.hero-fullbleed:not(:has(.hero-fullbleed__media)) .hero-fullbleed__title,
.hero-fullbleed:not(:has(.hero-fullbleed__media)) .hero-fullbleed__sub,
.hero-fullbleed:not(:has(.hero-fullbleed__media)) .hero-fullbleed__content {
  color: var(--colour-ink);
}

.hero-fullbleed:not(:has(.hero-fullbleed__media)) .hero-fullbleed__eyebrow {
  color: var(--colour-champagne);
}

@media (min-width: 1024px) {
  .hero-fullbleed:not(:has(.hero-fullbleed__media)) {
    min-height: 55vh;
  }
}

/* End of R3.H Text-Only Fullbleed Hero */

/* ==========================================================================
   R3.J Meta-strip refinement -- vertical stack
   The horizontal flex-wrap was creating unpredictable line breaks
   (e.g. "Gaggenau Spokesperson" misaligned). Vertical stack gives a quiet
   editorial column of credentials, centred, each line at tracked-caps scale.
   ========================================================================== */

.meta-strip {
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  text-align: center;
}

.meta-strip__separator {
  display: none;
}

/* End of R3.J */

/* RX.B masthead-logo-v1 -- JW monogram sizing + alignment */
.site-brand { display: inline-flex; align-items: center; gap: var(--space-3, 0.75rem); text-decoration: none; }
.site-brand__logo {
  display: block;
  height: 36px;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
}
.site-brand__logo + .site-brand__chinese { line-height: 1; }
@media (max-width: 720px) {
  .site-brand__logo { height: 28px; }
}

/* RX.A homepage-rework-v1 reflection-italic safety-net */
.reflection > p { font-style: italic; }
.reflection p > em { font-style: italic; }

/* RX.E masthead-v2 + RX.F nav-overlay -- Aman shell Push 1 */

/* Masthead -- 4-element minimal top bar, sticky, generous space */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--colour-paper, #faf5ed);
  padding-block: var(--space-3, 0.75rem);
  border-bottom: 1px solid transparent;
  transition: border-color 200ms ease, background-color 200ms ease;
}
.site-header__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-4, 1rem);
  max-width: var(--container-large, 1440px);
  margin-inline: auto;
  padding-inline: var(--space-5, 1.25rem);
}
.site-header__menu-toggle {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  background: none;
  border: 0;
  padding: var(--space-2, 0.5rem);
  margin: 0;
  cursor: pointer;
  color: var(--colour-ink, #1c1817);
  font-family: var(--font-sans, "Inter", sans-serif);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.site-header__menu-icon { width: 22px; height: 18px; display: block; }
.site-brand {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.site-brand__logo {
  display: block;
  height: 32px;
  width: auto;
  flex-shrink: 0;
}
.site-header__utilities {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: var(--space-4, 1rem);
}
.site-header__search-toggle {
  background: none;
  border: 0;
  padding: var(--space-2, 0.5rem);
  margin: 0;
  cursor: pointer;
  color: var(--colour-ink, #1c1817);
}
.site-header__search-toggle svg { width: 20px; height: 20px; display: block; }
.site-header__lang {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  font-family: var(--font-sans, "Inter", sans-serif);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.site-header__lang-link {
  color: var(--colour-mute, #6b6360);
  text-decoration: none;
  transition: color 150ms ease;
}
.site-header__lang-link--active { color: var(--colour-ink, #1c1817); }
.site-header__lang-link:hover { color: var(--colour-ink, #1c1817); }
.site-header__lang-divider { color: var(--colour-mute, #6b6360); opacity: 0.5; }

@media (max-width: 720px) {
  .site-header__menu-label { display: none; }
  .site-brand__logo { height: 26px; }
  .site-header__lang { font-size: 10px; gap: var(--space-1, 0.25rem); }
}

/* Nav overlay -- fullscreen Aman-style menu */
.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: var(--colour-paper, #faf5ed);
  visibility: hidden;
  opacity: 0;
  transition: opacity 360ms ease, visibility 0s linear 360ms;
  overflow-y: auto;
}
.nav-overlay.is-open {
  visibility: visible;
  opacity: 1;
  transition: opacity 360ms ease, visibility 0s;
}
body.nav-overlay-open { overflow: hidden; }

.nav-overlay__inner {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding-inline: var(--space-5, 1.25rem);
  padding-block: var(--space-4, 1rem) var(--space-6, 2rem);
  max-width: var(--container-large, 1440px);
  margin-inline: auto;
}
.nav-overlay__top {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-4);
  padding-block-end: var(--space-7, 3rem);
}
.nav-overlay__close {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  background: none;
  border: 0;
  padding: var(--space-2, 0.5rem);
  margin: 0;
  cursor: pointer;
  color: var(--colour-ink);
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.nav-overlay__close svg { width: 18px; height: 18px; display: block; }
.nav-overlay__brand { justify-self: center; }
.nav-overlay__brand-logo { display: block; height: 32px; width: auto; }

.nav-overlay__nav {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.nav-overlay__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-5, 1.25rem);
  text-align: center;
}
.nav-overlay__link {
  display: inline-flex;
  flex-direction: column;
  gap: var(--space-2, 0.5rem);
  text-decoration: none;
  color: var(--colour-ink);
  transition: color 200ms ease;
  padding-block: var(--space-2, 0.5rem);
}
.nav-overlay__link:hover .nav-overlay__link-title { color: var(--colour-oxblood, #6b1a1a); }
.nav-overlay__link-eyebrow {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--colour-mute, #6b6360);
}
.nav-overlay__link-title {
  font-family: var(--font-display, "Cormorant Garamond", serif);
  font-style: italic;
  font-size: 44px;
  line-height: 1.1;
  font-weight: 400;
  transition: color 200ms ease;
}

.nav-overlay__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block-start: var(--space-6, 2rem);
}
.nav-overlay__lang {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.nav-overlay__lang-link { color: var(--colour-mute); text-decoration: none; }
.nav-overlay__lang-link--active { color: var(--colour-ink); }
.nav-overlay__lang-link:hover { color: var(--colour-ink); }
.nav-overlay__lang-divider { color: var(--colour-mute); opacity: 0.5; }
.nav-overlay__connect {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--colour-ink);
  text-decoration: none;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

@media (max-width: 720px) {
  .nav-overlay__close-label { display: none; }
  .nav-overlay__list { gap: var(--space-4, 1rem); }
  .nav-overlay__link-title { font-size: 32px; }
}

/* RX.G–RX.M Aman dining flow homepage + footer (Push 2, May 2026) */

/* ── RX.G  Block 1: Page title ─────────────────────────────────────── */
.home-title { text-align: center; padding-block: var(--space-8, 4rem) var(--space-6, 2rem); }
.home-title__eyebrow {
  display: inline-block;
  font-family: var(--font-sans, "Inter", sans-serif);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--colour-oxblood, #6b1a1a);
  margin-block-end: var(--space-4, 1rem);
}
.home-title__heading {
  font-family: var(--font-display, "Cormorant Garamond", serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(32px, 5vw, 56px);
  line-height: 1.15;
  color: var(--colour-ink, #1c1817);
  max-width: 22ch;
  margin: 0 auto;
}

/* ── RX.H  Block 2: Sub-nav tabs ───────────────────────────────────── */
.home-subnav {
  border-block: 1px solid var(--colour-rule, rgba(28,24,23,0.08));
  padding-block: var(--space-3, 0.75rem);
  text-align: center;
}
.home-subnav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-5, 1.5rem);
  justify-content: center;
}
.home-subnav__link {
  font-family: var(--font-sans, "Inter", sans-serif);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--colour-text-muted);
  text-decoration: none;
  padding-block: var(--space-2, 0.5rem);
  border-block-end: 1px solid transparent;
  transition: color 200ms ease, border-color 200ms ease;
}
.home-subnav__link:hover {
  color: var(--colour-ink, #1c1817);
  border-block-end-color: var(--colour-oxblood, #6b1a1a);
}

/* ── RX.I  Block 3: Hero gallery ───────────────────────────────────── */
.home-hero { position: relative; }
.home-hero__viewport {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--colour-ink, #1c1817);
}
.home-hero__frame {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity 1400ms ease;
  pointer-events: none;
}
.home-hero__frame.is-active {
  opacity: 1;
  pointer-events: auto;
}
.home-hero__picture, .home-hero__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.home-hero__caption {
  position: absolute;
  left: var(--space-5, 1.5rem);
  bottom: var(--space-5, 1.5rem);
  font-family: var(--font-sans, "Inter", sans-serif);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.92);
  text-shadow: 0 1px 16px rgba(0,0,0,0.45);
  padding: var(--space-2, 0.5rem) var(--space-3, 1rem);
  background: rgba(0,0,0,0.18);
  backdrop-filter: blur(2px);
}
.home-hero__nav {
  position: absolute;
  left: 50%;
  bottom: var(--space-4, 1rem);
  transform: translateX(-50%);
  display: inline-flex;
  gap: var(--space-2, 0.5rem);
}
.home-hero__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255,255,255,0.4);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: background-color 200ms ease;
}
.home-hero__dot.is-active { background: rgba(255,255,255,0.95); }
.home-hero__dot:hover     { background: rgba(255,255,255,0.7);  }

@media (max-width: 720px) {
  .home-hero__viewport { aspect-ratio: 4 / 5; }
  .home-hero__caption { font-size: 10px; left: var(--space-3); bottom: var(--space-3); }
}

/* ── RX.J  Block 4: Intro paragraph ────────────────────────────────── */
.home-intro { padding-block: var(--space-9, 5rem) var(--space-8, 4rem); }
.home-intro .container-prose {
  max-width: 640px;
  margin-inline: auto;
  text-align: center;
}
.home-intro__eyebrow {
  display: inline-block;
  font-family: var(--font-sans, "Inter", sans-serif);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--colour-oxblood, #6b1a1a);
  margin-block-end: var(--space-5, 1.5rem);
}
.home-intro__lead, .home-intro__tail {
  font-family: var(--font-display, "Cormorant Garamond", serif);
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.55;
  color: var(--colour-ink, #1c1817);
  margin-block: 0 var(--space-4, 1rem);
}
.home-intro__tail {
  font-style: italic;
  color: var(--colour-text-muted);
}
.home-intro__honours {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-6, 2rem) var(--space-7, 3rem);
  margin-block-start: var(--space-6, 2rem);
  padding-block-start: var(--space-5, 1.5rem);
  border-block-start: 1px solid var(--colour-rule, rgba(28,24,23,0.08));
}
.home-intro__honour { display: flex; flex-direction: column; gap: 4px; align-items: center; }
.home-intro__honour-year {
  font-family: var(--font-sans, "Inter", sans-serif);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--colour-oxblood, #6b1a1a);
}
.home-intro__honour-title {
  font-family: var(--font-display, "Cormorant Garamond", serif);
  font-style: italic;
  font-size: 18px;
  color: var(--colour-ink, #1c1817);
}

/* ── RX.K  Block 5: Diptych ────────────────────────────────────────── */
.home-diptych { padding-block: var(--space-7, 3rem); background: var(--colour-paper-deep, #f3eddf); }
.home-diptych__grid {
  max-width: 1280px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr minmax(280px, 1fr) 1fr;
  align-items: center;
  gap: var(--space-5, 1.5rem);
  padding-inline: var(--space-5, 1.5rem);
}
.home-diptych__figure { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; }
.home-diptych__image  { width: 100%; height: 100%; object-fit: cover; display: block; }
.home-diptych__text   { text-align: center; padding-inline: var(--space-3, 1rem); }
.home-diptych__eyebrow {
  display: inline-block;
  font-family: var(--font-sans, "Inter", sans-serif);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--colour-oxblood, #6b1a1a);
  margin-block-end: var(--space-4, 1rem);
}
.home-diptych__quote {
  font-family: var(--font-display, "Cormorant Garamond", serif);
  font-style: italic;
  font-size: clamp(20px, 2.4vw, 28px);
  line-height: 1.4;
  color: var(--colour-ink, #1c1817);
  margin: 0;
}
@media (max-width: 900px) {
  .home-diptych__grid { grid-template-columns: 1fr; gap: var(--space-5); }
  .home-diptych__figure { max-width: 480px; margin-inline: auto; }
}

/* ── RX.L  Block 6: Cuisine cards ──────────────────────────────────── */
.home-lineage { padding-block: var(--space-9, 5rem); }
.home-lineage__header { text-align: center; margin-block-end: var(--space-7, 3rem); }
.home-lineage__eyebrow {
  display: inline-block;
  font-family: var(--font-sans, "Inter", sans-serif);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--colour-oxblood, #6b1a1a);
  margin-block-end: var(--space-4, 1rem);
}
.home-lineage__heading {
  font-family: var(--font-display, "Cormorant Garamond", serif);
  font-style: italic;
  font-size: clamp(28px, 3.5vw, 40px);
  line-height: 1.2;
  color: var(--colour-ink, #1c1817);
  margin: 0;
}
.home-lineage__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5, 1.5rem) var(--space-4, 1rem);
}
.home-lineage__card { margin: 0; }
.home-lineage__card-link {
  display: flex; flex-direction: column;
  text-decoration: none; color: inherit;
}
.home-lineage__card-media {
  margin: 0 0 var(--space-3, 1rem);
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--colour-paper-deep, #f3eddf);
}
.home-lineage__card-image {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 600ms ease;
}
.home-lineage__card-link:hover .home-lineage__card-image { transform: scale(1.02); }
.home-lineage__card-subtitle {
  font-family: var(--font-sans, "Inter", sans-serif);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--colour-text-muted);
}
.home-lineage__card-title {
  font-family: var(--font-display, "Cormorant Garamond", serif);
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1.2;
  color: var(--colour-ink, #1c1817);
  margin: 6px 0;
  font-weight: 400;
}
.home-lineage__card-intro {
  font-family: var(--font-sans, "Inter", sans-serif);
  font-size: 14px;
  line-height: 1.55;
  color: var(--colour-text-muted);
  margin-block: 0 var(--space-3, 1rem);
}
.home-lineage__card-cta {
  font-family: var(--font-sans, "Inter", sans-serif);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--colour-ink, #1c1817);
  text-decoration: none;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
@media (max-width: 900px) {
  .home-lineage__grid { grid-template-columns: 1fr; }
}

/* ── RX.M  Block 7: Maison asymmetric carousel ─────────────────────── */
.home-maison { padding-block: var(--space-9, 5rem); background: var(--colour-paper-deep, #f3eddf); }
.home-maison__layout {
  max-width: 1440px; margin-inline: auto; padding-inline: var(--space-5, 1.5rem);
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--space-6, 2rem);
  align-items: start;
}
.home-maison__text { padding-inline-end: var(--space-5, 1.5rem); }
.home-maison__eyebrow {
  display: inline-block;
  font-family: var(--font-sans, "Inter", sans-serif);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--colour-oxblood, #6b1a1a);
  margin-block-end: var(--space-4, 1rem);
}
.home-maison__heading {
  font-family: var(--font-display, "Cormorant Garamond", serif);
  font-style: italic;
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.2;
  margin: 0 0 var(--space-4, 1rem);
}
.home-maison__intro {
  font-family: var(--font-sans, "Inter", sans-serif);
  font-size: 14px;
  line-height: 1.6;
  color: var(--colour-text-muted);
  margin-block: 0 var(--space-4, 1rem);
}
.home-maison__view-all {
  font-family: var(--font-sans, "Inter", sans-serif);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--colour-ink, #1c1817);
  text-decoration: none;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.home-maison__carousel-wrap { position: relative; }
.home-maison__carousel {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 280px;
  gap: var(--space-4, 1.5rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-block-end: var(--space-3, 1rem);
}
.home-maison__carousel::-webkit-scrollbar { display: none; }
.home-maison__card { scroll-snap-align: start; margin: 0; }
.home-maison__card-link { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.home-maison__card-media {
  margin: 0 0 var(--space-3, 1rem);
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--colour-paper, #faf5ed);
}
.home-maison__card-image { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 500ms ease; }
.home-maison__card-link:hover .home-maison__card-image { transform: scale(1.02); }
.home-maison__card-subtitle {
  font-family: var(--font-sans);
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--colour-text-muted);
}
.home-maison__card-title {
  font-family: var(--font-display);
  font-size: 22px; line-height: 1.2; font-weight: 400;
  color: var(--colour-ink); margin: 4px 0;
}
.home-maison__card-meta {
  font-family: var(--font-sans);
  font-size: 12px; color: var(--colour-text-muted);
}
.home-maison__nav {
  display: flex; gap: var(--space-2, 0.5rem);
  margin-block-start: var(--space-4, 1.25rem);
}
.home-maison__nav-btn {
  width: 40px; height: 40px;
  background: transparent;
  border: 1px solid var(--colour-rule, rgba(28,24,23,0.18));
  cursor: pointer;
  color: var(--colour-ink);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background-color 200ms ease, border-color 200ms ease;
}
.home-maison__nav-btn:hover { background: var(--colour-ink, #1c1817); color: var(--colour-paper, #faf5ed); border-color: var(--colour-ink); }
.home-maison__nav-btn svg { width: 18px; height: 18px; }
@media (max-width: 900px) {
  .home-maison__layout { grid-template-columns: 1fr; }
  .home-maison__text { padding-inline-end: 0; }
}

/* ── RX.N  Block 8: Feature block (Serumpun) ───────────────────────── */
.home-feature { padding-block: var(--space-9, 5rem); }
.home-feature__layout {
  max-width: 1440px; margin-inline: auto;
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: var(--space-6, 2rem);
  align-items: center;
  padding-inline: var(--space-5, 1.5rem);
}
.home-feature__media { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; }
.home-feature__image { width: 100%; height: 100%; object-fit: cover; display: block; }
.home-feature__text { padding-inline: var(--space-4, 1.5rem); }
.home-feature__eyebrow {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--colour-oxblood, #6b1a1a);
  margin-block-end: var(--space-4, 1rem);
}
.home-feature__title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(28px, 3.5vw, 44px);
  line-height: 1.15; font-weight: 400;
  color: var(--colour-ink, #1c1817); margin: 0 0 var(--space-4, 1rem);
}
.home-feature__body {
  font-family: var(--font-sans);
  font-size: 15px; line-height: 1.65;
  color: var(--colour-text-muted); margin-block: 0 var(--space-5, 1.5rem);
}
.home-feature__cta {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--colour-ink); text-decoration: none;
  text-decoration-thickness: 1px; text-underline-offset: 4px;
}
@media (max-width: 900px) {
  .home-feature__layout { grid-template-columns: 1fr; }
  .home-feature__text { padding-inline: 0; }
}

/* ── RX.O  Footer (three-band Aman pattern) ────────────────────────── */
.site-footer { background: var(--colour-paper, #faf5ed); color: var(--colour-ink, #1c1817); }
.site-footer__newsletter { padding-block: var(--space-7, 3rem); border-block-end: 1px solid var(--colour-rule, rgba(28,24,23,0.08)); }
.site-footer__newsletter-grid {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: var(--space-5, 1.5rem);
  align-items: center;
}
.site-footer__newsletter-eyebrow {
  font-family: var(--font-sans);
  font-size: 14px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--colour-ink, #1c1817);
  font-weight: 500;
}
.site-footer__newsletter-body p {
  font-family: var(--font-sans);
  font-size: 14px; line-height: 1.6;
  color: var(--colour-text-muted); margin: 0;
}
.site-footer__newsletter-cta { text-align: right; }
.site-footer__newsletter-button {
  display: inline-block;
  padding: 12px 28px;
  background: var(--colour-ink, #1c1817);
  color: var(--colour-paper, #faf5ed);
  font-family: var(--font-sans);
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  text-decoration: none;
  transition: background-color 200ms ease;
}
.site-footer__newsletter-button:hover { background: var(--colour-oxblood, #6b1a1a); }
@media (max-width: 800px) {
  .site-footer__newsletter-grid { grid-template-columns: 1fr; text-align: left; }
  .site-footer__newsletter-cta { text-align: left; }
}

.site-footer__quicklinks { padding-block: var(--space-7, 3rem); }
.site-footer__quicklinks-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--space-6, 2rem);
}
.site-footer__col-heading {
  font-family: var(--font-sans);
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--colour-text-muted);
  font-weight: 500;
  margin-block: 0 var(--space-4, 1rem);
}
.site-footer__col-list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: var(--space-2, 0.5rem);
}
.site-footer__col-link {
  font-family: var(--font-sans);
  font-size: 14px; line-height: 1.6;
  color: var(--colour-ink, #1c1817);
  text-decoration: none;
  transition: color 150ms ease;
}
.site-footer__col-link:hover { color: var(--colour-oxblood, #6b1a1a); }
.site-footer__contact-btn {
  display: inline-block;
  margin-block-start: var(--space-5, 1.5rem);
  padding: 10px 24px;
  background: transparent;
  color: var(--colour-ink, #1c1817);
  border: 1px solid var(--colour-ink, #1c1817);
  font-family: var(--font-sans);
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  text-decoration: none;
  transition: background-color 200ms ease, color 200ms ease;
}
.site-footer__contact-btn:hover { background: var(--colour-ink); color: var(--colour-parchment); }
@media (max-width: 800px) {
  .site-footer__quicklinks-grid { grid-template-columns: 1fr; gap: var(--space-5); }
}

.site-footer__bottom-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  gap: var(--space-4);
}
.site-footer__brand-logo { display: block; height: 32px; width: auto; }
.site-footer__social {
  display: inline-flex; gap: var(--space-3, 1rem);
  justify-content: flex-end;
}
.site-footer__social-link {
  color: var(--colour-mute, #6b6360);
  transition: color 200ms ease;
}
.site-footer__social-link:hover { color: var(--colour-oxblood, #6b1a1a); }
.site-footer__social-link svg { width: 22px; height: 22px; display: block; }
@media (max-width: 700px) {
  .site-footer__bottom-grid { grid-template-columns: 1fr; gap: var(--space-3); text-align: center; }
  .site-footer__brand { text-align: center; }
  .site-footer__brand-logo { margin-inline: auto; }
  .site-footer__social { justify-content: center; }
}

/* RX.P  Block 4.5: Beyond the Pass — surface About sub-pages (Push 3, May 2026) */

.home-beyond {
  padding-block: var(--space-9, 5rem);
  background: var(--colour-paper, #faf5ed);
}

.home-beyond__header {
  text-align: center;
  margin-block-end: var(--space-7, 3rem);
}

.home-beyond__eyebrow {
  display: inline-block;
  font-family: var(--font-sans, "Inter", sans-serif);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--colour-oxblood, #6b1a1a);
  margin-block-end: var(--space-4, 1rem);
}

.home-beyond__heading {
  font-family: var(--font-display, "Cormorant Garamond", serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(28px, 3.5vw, 40px);
  line-height: 1.2;
  color: var(--colour-ink, #1c1817);
  margin: 0;
}

.home-beyond__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5, 1.5rem) var(--space-4, 1.5rem);
}

.home-beyond__card {
  margin: 0;
  border-block-start: 1px solid var(--colour-rule, rgba(28,24,23,0.08));
  padding-block-start: var(--space-4, 1.25rem);
}

/* Featured card — Mentors — spans 3 columns at the top, given visual weight */
.home-beyond__card--featured {
  grid-column: 1 / -1;
  border-block-start: 0;
  border-block: 1px solid var(--colour-oxblood, #6b1a1a);
  padding-block: var(--space-5, 1.5rem);
  margin-block-end: var(--space-3, 1rem);
  background: transparent;
  text-align: center;
}

.home-beyond__card-link {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  gap: var(--space-2, 0.5rem);
  transition: color 200ms ease;
}

.home-beyond__card-link:hover .home-beyond__card-title {
  color: var(--colour-oxblood, #6b1a1a);
}

.home-beyond__card--featured .home-beyond__card-link {
  align-items: center;
}

.home-beyond__card-subtitle {
  font-family: var(--font-sans, "Inter", sans-serif);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--colour-oxblood, #6b1a1a);
}

.home-beyond__card--featured .home-beyond__card-subtitle {
  font-size: 11px;
  letter-spacing: 0.26em;
}

.home-beyond__card-title {
  font-family: var(--font-display, "Cormorant Garamond", serif);
  font-style: italic;
  font-weight: 400;
  font-size: 24px;
  line-height: 1.2;
  color: var(--colour-ink, #1c1817);
  margin: 0;
  transition: color 200ms ease;
}

.home-beyond__card--featured .home-beyond__card-title {
  font-size: clamp(32px, 3.5vw, 42px);
}

.home-beyond__card-intro {
  font-family: var(--font-sans, "Inter", sans-serif);
  font-size: 14px;
  line-height: 1.6;
  color: var(--colour-text-muted);
  margin: 0;
}

.home-beyond__card--featured .home-beyond__card-intro {
  font-family: var(--font-display, "Cormorant Garamond", serif);
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.55;
  color: var(--colour-ink, #1c1817);
  max-width: 56ch;
  margin-inline: auto;
  font-style: italic;
}

.home-beyond__card-cta {
  font-family: var(--font-sans, "Inter", sans-serif);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--colour-ink, #1c1817);
  text-decoration: none;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  margin-block-start: var(--space-2, 0.5rem);
}

@media (max-width: 900px) {
  .home-beyond__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .home-beyond__grid { grid-template-columns: 1fr; }
  .home-beyond__card--featured { padding-block: var(--space-4, 1.25rem); }
}

/* RX.Q Push 6 — Maison carousel grid→flex override + Houses→Maisons cosmetic (May 2026) */

/* The original RX.M Maison carousel used display: grid + scroll-snap which
   could behave inconsistently with scrollBy on some browsers. Switching to
   flex with explicit card width is the canonical scrollable-row pattern. */
.home-maison__carousel {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: var(--space-4, 1.5rem);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-block-end: var(--space-3, 1rem);
}
.home-maison__carousel::-webkit-scrollbar { display: none; }

.home-maison__card {
  flex: 0 0 280px;
  max-width: 280px;
  scroll-snap-align: start;
  margin: 0;
}

/* Ensure nav buttons are interactive — explicit z-index and pointer-events */
.home-maison__nav {
  position: relative;
  z-index: 2;
}
.home-maison__nav-btn {
  pointer-events: auto;
  user-select: none;
}
.home-maison__nav-btn:focus-visible {
  outline: 2px solid var(--colour-oxblood, #6b1a1a);
  outline-offset: 2px;
}

/* RX.R Push 9 — Homepage hero video-led variant (Direction A, May 2026) */

/* The video element fills the viewport behind the poster picture (poster
   serves as fallback while the video loads or if it fails to play). */
.home-hero__viewport--video {
  position: relative;
}
.home-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  z-index: 1;
}
.home-hero__video-poster {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
}
.home-hero__video-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.home-hero__viewport--video .home-hero__caption {
  z-index: 2;
}

/* Reduced-motion users get the poster image instead of the playing video */
@media (prefers-reduced-motion: reduce) {
  .home-hero__video { display: none; }
  .home-hero__video-poster { z-index: 1; }
}

/* ==========================================================================
   RX.V.b - Push 22b - Homepage card variants (May 2026)

   The base .card selectors that previously lived in this block have moved
   to section 10 (canonical card system per v2.0 section 5). The three
   homepage card variants retain bespoke chrome here until they are folded
   into the canonical mixin in a later push:

     .home-lineage__card    (homepage Restaurant Legacy)
     .home-maison__card     (homepage Maisons carousel)
     .home-beyond__card     (homepage Beyond-the-Pass)

   Specification per Design-Cadence and Visual Specification v2.0 sections 5 and 6:
     - Hover image scale 1.04
     - Hover title shift to burgundy
     - Focus-visible 2px burgundy outline at 2px offset
     - Active scale 0.99
     - prefers-reduced-motion zeroes scale transforms
   ========================================================================== */

/* Image hover scale 1.04 - homepage card variants */
.home-lineage__card-link:hover .home-lineage__card-image,
.home-maison__card-link:hover .home-maison__card-image {
  transform: scale(1.04);
}

.home-lineage__card-image,
.home-maison__card-image {
  transition: transform var(--motion-base) var(--ease-out);
}

/* Title hover shift to burgundy - homepage card variants */
.home-lineage__card-link:hover .home-lineage__card-title,
.home-maison__card-link:hover .home-maison__card-title,
.home-beyond__card-link:hover .home-beyond__card-title {
  color: var(--colour-burgundy);
}

.home-lineage__card-title,
.home-maison__card-title,
.home-beyond__card-title {
  transition: color var(--motion-base) var(--ease-out);
}

/* Focus-visible - 2px burgundy outline at 2px offset - homepage card variants */
.home-lineage__card-link:focus-visible,
.home-maison__card-link:focus-visible,
.home-beyond__card-link:focus-visible {
  outline: 2px solid var(--colour-burgundy);
  outline-offset: 2px;
}

/* Active scale 0.99 - homepage card variants */
.home-lineage__card-link:active,
.home-maison__card-link:active,
.home-beyond__card-link:active {
  transform: scale(0.99);
  transition: transform var(--motion-fast) var(--ease-out);
}

/* Reduced motion zeroes scale transforms */
@media (prefers-reduced-motion: reduce) {
  .home-lineage__card-link:hover .home-lineage__card-image,
  .home-maison__card-link:hover .home-maison__card-image {
    transform: none;
  }
  .home-lineage__card-link:active,
  .home-maison__card-link:active,
  .home-beyond__card-link:active {
    transform: none;
  }
}

/* ==========================================================================
   RX.V.2 — Push 22.2 — Contact lanes editorial strip-out (May 2026)

   Strips box chrome from /contact/ "Choose your lane" cards. Replaces with
   editorial register matching the rest of the site (Push 22 RX.V card
   unification continued).

   What changes:
     - No 1px border, no soft fill, no border-radius (was 4px), no inner
       padding-inline (Aman discipline; the box chrome reads SaaS).
     - Hairline rule above each row separates lanes editorially.
     - Label moves to Cormorant Garamond (var(--font-display)) at headline
       weight — was sans-serif bold competing with the rest of the site.
     - Hint loses the italic (italic is reserved for chapter sigils +
       pull-quote attributions per v2.0 §3.2).
     - Hover: title shifts to burgundy (unified with RX.V card system).
       The whole-card ink-fill reversal is removed.
     - Focus-visible: 2px burgundy outline at 2px offset (unified with RX.V).
     - Three-column grid at desktop preserved (9 items → 3 rows of 3).
       Two columns at small tablet; one column on mobile.
   ========================================================================== */

/* Override the grid spacing */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin-block: var(--space-5) var(--space-7);
}

@media (min-width: 720px) {
  .contact-grid {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--space-7);
  }
}

@media (min-width: 1024px) {
  .contact-grid {
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: var(--space-6);
  }
}

/* Override the boxed contact-card chrome */
.contact-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-block: var(--space-4);
  padding-inline: 0;
  background: transparent;
  border: 0;
  border-block-start: 1px solid var(--colour-border);
  border-radius: 0;
  text-decoration: none;
  color: inherit;
}

/* Override the existing whole-card hover reversal */
.contact-card:hover,
.contact-card:focus-visible {
  background: transparent;
  color: inherit;
  border-color: var(--colour-border);
  transform: none;
  text-decoration: none;
}

/* Title shifts to burgundy on hover/focus — unified with RX.V card system */
.contact-card:hover .contact-card__label,
.contact-card:focus-visible .contact-card__label {
  color: var(--colour-burgundy);
  text-decoration: none;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
}

/* Hint stays muted on hover/focus — override the existing cream reversal */
.contact-card:hover .contact-card__hint,
.contact-card:focus-visible .contact-card__hint {
  color: var(--colour-text-muted);
}

/* Focus-visible: 2px burgundy outline at 2px offset — unified with RX.V */
.contact-card:focus-visible {
  outline: 2px solid var(--colour-burgundy);
  outline-offset: 4px;
}

/* Label — Cormorant Garamond display, headline weight */
.contact-card__label {
  font-family: var(--font-display);
  font-size: clamp(22px, 2vw, 26px);
  font-weight: var(--weight-headline);
  line-height: var(--leading-snug);
  letter-spacing: 0;
  color: var(--colour-ink);
  transition: color var(--motion-base) var(--ease-out);
}

/* Hint — EB Garamond body, plain (not italic) */
.contact-card__hint {
  font-family: var(--font-body);
  font-size: var(--type-base);
  line-height: var(--leading-relaxed);
  color: var(--colour-text-muted);
  font-style: italic;
  transition: color var(--motion-base) var(--ease-out);
}

/* ==========================================================================
   RX.VI — Push 59 — Mobile-sticky in-page table of contents
   The desktop sidebar (≥1280px) is unchanged; the mobile path becomes a
   sticky bar pinned to the top of the viewport with a collapsible list.
   Default: collapsed (only the toggle button visible). Tap to expand.
   ========================================================================== */

/* Mobile-only — sticky TOC bar at the top of the viewport */
@media (max-width: 1279px) {

  .toc {
    position: sticky;
    top: 0;
    z-index: var(--z-elevated);
    margin-block: 0;
    padding-block: 0;
    background-color: var(--colour-parchment);
    border-block-end: 1px solid var(--colour-border);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
  }

  /* Toggle button — always visible on mobile, the persistent affordance */
  .toc__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: transparent;
    border: 0;
    padding: var(--space-3) var(--pad-mobile);
    font-family: var(--font-body);
    font-size: var(--type-xs);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--colour-ink);
    cursor: pointer;
    text-align: start;
  }

  .toc__toggle:hover,
  .toc__toggle:focus-visible {
    color: var(--colour-burgundy);
  }

  .toc__toggle-label {
    flex: 1;
    text-align: start;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-inline-end: var(--space-3);
  }

  .toc__toggle-icon {
    width: 12px;
    height: 8px;
    flex-shrink: 0;
    transition: transform var(--motion-fast) var(--ease-out);
  }

  .toc[data-open="true"] .toc__toggle-icon {
    transform: rotate(180deg);
  }

  /* Inner panel — collapsed by default on mobile */
  .toc .toc__inner {
    max-height: 0;
    overflow: hidden;
    border-block: 0;
    padding-block: 0;
    transition: max-height var(--motion-base) var(--ease-out);
  }

  .toc[data-open="true"] .toc__inner {
    max-height: 60vh;
    overflow-y: auto;
    border-block-start: 1px solid var(--colour-border);
    padding-block: var(--space-3);
    padding-inline: var(--pad-mobile);
  }

  /* The "In this chapter" label inside .toc__inner is redundant on mobile —
     the toggle button already carries that label. Hide the inner label. */
  .toc__inner > .toc__label {
    display: none;
  }

  /* Tighter list spacing on mobile inside the open panel */
  .toc[data-open="true"] .toc__list {
    gap: var(--space-2);
    padding-block-start: var(--space-1);
  }

  .toc[data-open="true"] .toc__link {
    font-size: var(--type-sm);
    line-height: var(--leading-snug);
  }
}

/* Desktop — toggle button is irrelevant; the TOC sidebar is always visible */
@media (min-width: 1280px) {
  .toc__toggle {
    display: none;
  }
}

/* ==========================================================================
   RX.VII — Push 60 — Collapsible Archive section
   Native <details>/<summary> for the long photo-and-film archive at the
   foot of cornerstone pages. Default closed; the archive expands when
   the visitor chooses to walk through it. No JS dependency.
   ========================================================================== */

.archive-details {
  margin-block: var(--space-5) var(--space-7);
}

.archive-details > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background-color: transparent;
  border: 1px solid var(--colour-border);
  font-family: var(--font-body);
  color: var(--colour-ink);
  transition:
    background-color var(--motion-fast) var(--ease-out),
    border-color var(--motion-fast) var(--ease-out),
    color var(--motion-fast) var(--ease-out);
}

.archive-details > summary::-webkit-details-marker { display: none; }
.archive-details > summary::marker { content: ""; }

.archive-details > summary:hover,
.archive-details > summary:focus-visible {
  background-color: var(--colour-parchment-deeper, rgba(0, 0, 0, 0.02));
  border-color: var(--colour-burgundy);
  color: var(--colour-burgundy);
  outline: none;
}

.archive-summary__label {
  font-size: var(--type-sm);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.archive-summary__hint {
  flex: 1;
  font-size: var(--type-xs);
  font-style: italic;
  color: var(--colour-text-muted);
  letter-spacing: 0;
  text-transform: none;
  padding-inline-start: var(--space-3);
}

.archive-summary__icon {
  width: 12px;
  height: 8px;
  flex-shrink: 0;
  transition: transform var(--motion-base) var(--ease-out);
}

.archive-details[open] > summary {
  border-color: var(--colour-burgundy);
  color: var(--colour-burgundy);
  margin-block-end: var(--space-4);
}

.archive-details[open] > summary .archive-summary__icon {
  transform: rotate(180deg);
}

/* Subheadings inside the archive — hand-styled so we are not depending on
   markdown processing inside the <details> block. */
.archive-section-heading {
  font-family: var(--font-display);
  font-size: var(--type-md);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-tight);
  margin-block: var(--space-5) var(--space-3);
  color: var(--colour-ink);
}

/* Mobile — tighten the summary layout so the hint stacks if room is short */
@media (max-width: 639px) {
  .archive-details > summary {
    flex-wrap: wrap;
    padding: var(--space-3) var(--space-4);
  }
  .archive-summary__hint {
    flex-basis: 100%;
    padding-inline-start: 0;
    padding-block-start: var(--space-1);
  }
  .archive-summary__icon {
    margin-inline-start: auto;
  }
}

/* ==========================================================================
   RX.VIII — Push 61 — Maison carousel: scroll controls in the left column
   The prev/next buttons relocate from beneath the carousel into the text
   column, underneath the view-all link. The visitor's eye is already
   settled there; the cards regain their full breadth on the right. Mobile
   (<=900px) hides the buttons — visitor uses native swipe gesture on the
   carousel.
   ========================================================================== */

.home-maison__text .home-maison__nav {
  margin-block-start: var(--space-5, 1.5rem);
  display: flex;
  gap: var(--space-2, 0.5rem);
}

@media (max-width: 900px) {
  .home-maison__nav { display: none; }
}

/* ==========================================================================
   RX.IX — Push 70 — Hero image cropping anchored to top
   When a hero cycling frame is a portrait or has its subject's face near
   the top of the source, default centre-cropping clips heads at wide
   aspect ratios. Anchor every hero image to its top edge so heads remain
   visible. The bottom-edge crop falls on legs / floor / blank space —
   editorial register prefers head-up framing.
   ========================================================================== */

.hero-fullbleed img,
.hero-fullbleed__cycling img,
.hero-fullbleed__media img,
.hero-fullbleed__viewport img,
.hero img,
[class*="hero"] [class*="cycling"] img,
[class*="hero-cycling"] img {
  object-position: center 25% !important;
}

/* ==========================================================================
   RX.X — Push 72 — Portrait hero frames: contain, not cover
   When the hero cycles through a portrait-oriented frame, object-fit:cover
   scales it up to fill the width, making it 4× taller than the hero strip
   and clipping faces no matter where object-position is anchored. The
   answer is to switch those specific frames to object-fit:contain so the
   whole image fits cleanly within the hero. Landscape frames keep cover
   for full-bleed treatment.

   Targeted by src attribute - portrait images by filename.
   ========================================================================== */

img[src*="hennessy-james-won.jpg"],
img[src*="hennessy-nurdin-james-2016.jpg"] {
  object-fit: contain !important;
  object-position: center center !important;
  background-color: var(--colour-ink, #1c1817);
}

/* ==========================================================================
   Shin'Labo cycling hero frames 01 and 02 — bottom-anchored crop.
   Frame 01 is the LaLaport facade with gold-lit signage and koi installation
   in the lower middle band. Frame 02 is the Cameron Highlands farm visit
   with the brigade and produce beds in the lower half. The sitewide
   center-25% anchor (Push 70) crops the lower portion at wide aspects;
   bottom-anchoring preserves entrance, signage, people, and produce.
   ========================================================================== */
img[src*="shinlabo-hero-01.jpg"],
img[src*="shinlabo-hero-02.jpg"] {
  object-position: center bottom !important;
}

/* ============================================================
   PUSH 84 - Appended 2026-05-06 10:14
============================================================ */
/* PUSH-84-FOOTER-AMAN-PARITY */
/* ============================================================
   Push 84 — Footer Aman + nav-parity rebuild
   ------------------------------------------------------------
   Adds:
     - Newsletter display heading (Cormorant Garamond)
     - 5-column quicklinks grid mirroring hamburger labels
     - Heading-as-link styling for cornerstone column heads
     - Honour marks beneath brand monogram
     - "Follow on:" label + social icons row
     - Legal/utility row (Contact · Privacy · Cookies · Legal)
     - Aman-style 30/40/30 bottom-strip proportions
     - Mobile collapses for both quicklinks and bottom strip

   Sentinel marker (do not remove — used for idempotency):
   /* PUSH-84-FOOTER-AMAN-PARITY */
   ============================================================ */

/* Newsletter — display heading replaces eyebrow ------------- */
.site-footer__newsletter-title {
  font-family: var(--font-display, "Cormorant Garamond"), Georgia, serif;
  font-size: clamp(1.75rem, 2.4vw + 1rem, 2.75rem);
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.15;
  margin: 0;
  color: var(--colour-ink);
}

/* Quicklinks — 5-column grid ------------------------------- */
.site-footer__quicklinks-grid--five {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-6, 2rem);
  align-items: start;
}

@media (max-width: 1024px) {
  .site-footer__quicklinks-grid--five {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-5, 1.5rem);
  }
}

@media (max-width: 600px) {
  .site-footer__quicklinks-grid--five {
    grid-template-columns: 1fr;
    gap: var(--space-4, 1.25rem);
  }
}

/* Column heading is itself the cornerstone link ------------ */
.site-footer__col-heading-link {
  color: var(--colour-text-muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 200ms cubic-bezier(0.4, 0, 0.2, 1),
              color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.site-footer__col-heading-link:hover {
  color: var(--colour-burgundy, #5a1f2b);
  border-bottom-color: var(--colour-burgundy, #5a1f2b);
}
.site-footer__col-heading-link:focus-visible {
  outline: 2px solid var(--colour-burgundy, #5a1f2b);
  outline-offset: 2px;
}

/* Honour marks beneath brand monogram ---------------------- */
.site-footer__honours {
  list-style: none;
  margin: var(--space-3, 0.75rem) 0 0;
  padding: 0;
  font-family: var(--font-utility, "Inter"), system-ui, sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--colour-ink);
  opacity: 0.78;
  line-height: 1.5;
}
.site-footer__honours li {
  margin: 0;
  padding: 0.18rem 0;
}
.site-footer__honour-year {
  display: inline-block;
  margin-left: 0.5rem;
  opacity: 0.7;
}

/* Social — "Follow on:" label + icon row ------------------- */
.site-footer__social {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 0.5rem);
  align-items: center;
  text-align: center;
}
.site-footer__social-label {
  margin: 0;
  font-family: var(--font-body, "EB Garamond"), Georgia, serif;
  font-size: 0.875rem;
  font-style: italic;
  color: var(--colour-ink);
  opacity: 0.78;
}
.site-footer__social-icons {
  display: flex;
  gap: var(--space-3, 0.75rem);
  align-items: center;
  justify-content: center;
}

/* Legal / utility row -------------------------------------- */
.site-footer__legal {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 0.5rem);
  align-items: flex-end;
  text-align: right;
}
.site-footer__copyright {
  margin: 0;
  font-size: 0.8125rem;
  opacity: 0.78;
}
.site-footer__legal-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0;
}
.site-footer__legal-nav li {
  margin: 0;
  display: inline-flex;
  align-items: center;
}
.site-footer__legal-nav li:not(:last-child)::after {
  content: "·";
  margin: 0 0.45rem;
  opacity: 0.5;
}
.site-footer__legal-link {
  color: var(--colour-text-muted);
  text-decoration: none;
  font-size: 0.75rem;
  opacity: 0.78;
  transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1),
              color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.site-footer__legal-link:hover {
  opacity: 1;
  color: var(--colour-burgundy, #5a1f2b);
}
.site-footer__legal-link:focus-visible {
  outline: 2px solid var(--colour-burgundy, #5a1f2b);
  outline-offset: 2px;
  opacity: 1;
}

/* Bottom-strip layout — Aman 30 / 40 / 30 proportions ------ */
.site-footer__bottom-grid {
  display: grid;
  grid-template-columns: 30% 40% 30%;
  align-items: center;
  gap: var(--space-4, 1.25rem);
}
@media (max-width: 768px) {
  .site-footer__bottom-grid {
    grid-template-columns: 1fr;
    text-align: center;
    gap: var(--space-5, 1.5rem);
  }
  .site-footer__legal {
    align-items: center;
    text-align: center;
  }
  .site-footer__legal-nav {
    justify-content: center;
  }
  .site-footer__brand {
    text-align: center;
  }
  .site-footer__honours {
    text-align: center;
  }
}

/* Reduced motion ------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .site-footer__col-heading-link,
  .site-footer__legal-link {
    transition: none;
  }
}

/* ============================================================
   PUSH 85 - Appended 2026-05-06 10:26
============================================================ */
/* PUSH-85-FOOTER-TIGHTEN */
/* ============================================================
   Push 85 — Footer humility + Aman-compact spacing
   ------------------------------------------------------------
   Tightens the footer toward Aman.com reference values:
     - Grid gaps reduced
     - List-item rhythm compressed
     - Band paddings tightened
     - Type sizes calibrated to utility-12px range
     - Heading-to-first-item gap modest

   Sentinel marker (do not remove — used for idempotency):
   /* PUSH-85-FOOTER-TIGHTEN */
   ============================================================ */

/* Quicklinks grid — tighter column gap */
.site-footer__quicklinks-grid--five {
  gap: 2rem;                              /* was implied 2rem; explicit */
  row-gap: 2.5rem;                        /* slight breathing on mobile collapse */
}
@media (max-width: 1024px) {
  .site-footer__quicklinks-grid--five {
    gap: 1.5rem;
    row-gap: 2rem;
  }
}
@media (max-width: 600px) {
  .site-footer__quicklinks-grid--five {
    gap: 1.25rem;
    row-gap: 1.75rem;
  }
}

/* Column heading — tighter to first list item */
.site-footer__quicklinks .site-footer__col-heading {
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  line-height: 1.3;
  margin: 0 0 1rem 0;                     /* ~16px to first li, Aman-style */
  font-weight: 500;
}

/* Column list — Aman-tight item rhythm */
.site-footer__quicklinks .site-footer__col-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.8125rem;                   /* 13px utility */
  line-height: 1.4;
}
.site-footer__quicklinks .site-footer__col-list li {
  margin: 0;
  padding: 0;
}
.site-footer__quicklinks .site-footer__col-list li + li {
  margin-top: 0.4rem;                     /* ~6.4px between rows — Aman-tight */
}
.site-footer__quicklinks .site-footer__col-link {
  display: inline-block;
  padding: 0;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  text-decoration: none;
  opacity: 0.86;
  transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1),
              color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.site-footer__quicklinks .site-footer__col-link:hover,
.site-footer__quicklinks .site-footer__col-link:focus-visible {
  opacity: 1;
  color: var(--colour-burgundy, #5a1f2b);
}

/* Band paddings — Aman 30/10 reference */
.site-footer__newsletter {
  padding-top: 1.875rem;                  /* 30px */
  padding-bottom: 0.625rem;               /* 10px */
}
.site-footer__quicklinks {
  padding-top: 1.875rem;                  /* 30px */
  padding-bottom: 1.5rem;                 /* 24px */
}

/* Newsletter title — slightly tighter */
.site-footer__newsletter-title {
  font-size: clamp(1.5rem, 2vw + 0.875rem, 2.25rem);
  margin: 0;
}

/* Bottom strip — tighter copyright row, no honours space reserved */
.site-footer__brand {
  margin: 0;
}
.site-footer__copyright {
  font-size: 0.75rem;                     /* 12px */
  line-height: 1.4;
}
.site-footer__social-label {
  font-size: 0.8125rem;                   /* 13px */
  margin: 0;
}
.site-footer__social-icons {
  gap: 0.625rem;                          /* 10px between icons */
}
.site-footer__social-link svg {
  width: 18px;
  height: 18px;
}

/* Mobile bottom strip — single column, less stack height */
@media (max-width: 768px) {
  .site-footer__bottom-grid {
    gap: 1rem;
  }
}

/* ============================================================
   PUSH 89 - Appended 2026-05-06 10:48
============================================================ */
/* PUSH-89-HERO-SOFT-OVERLAYS */
/* ============================================================
   Push 89 - Hero soft overlays (both options available)
   ------------------------------------------------------------
   Two opt-in modifier classes that apply a subtle blend overlay
   to a hero banner image. The overlay sits as a ::after pseudo
   layer over the image, blending into the source pixels and
   masking sub-resolution softness without compromising the
   editorial register.

   Application: add the modifier class to the hero element on
   the specific page that needs it. Either modifier may be used
   alone; they are not stackable.

   Sentinel marker (do not remove - used for idempotency):
   /* PUSH-89-HERO-SOFT-OVERLAYS */
   ============================================================ */

/* ----------------------------------------------------------------
   Option A - Parchment screen blend
   Reads as warm softening. Works well on plate / portrait /
   golden-hour subjects where the source already trends warm.
   ---------------------------------------------------------------- */
.hero-banner--soft-parchment .hero-banner__image,
.hero--soft-parchment .hero__image,
.hero-banner--soft-parchment .hero__image,
.hero--soft-parchment .hero-banner__image {
  position: relative;
}
.hero-banner--soft-parchment .hero-banner__image::after,
.hero--soft-parchment .hero__image::after,
.hero-banner--soft-parchment .hero__image::after,
.hero--soft-parchment .hero-banner__image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--colour-parchment, #F7F1E6);
  mix-blend-mode: screen;
  opacity: 0.18;
  pointer-events: none;
  z-index: 1;
}

/* ----------------------------------------------------------------
   Option B - Ink soft-light blend
   Reads moodier, cinematic. Works well on environmental / room /
   evening subjects where deeper shadows hide pixel noise.
   ---------------------------------------------------------------- */
.hero-banner--soft-ink .hero-banner__image,
.hero--soft-ink .hero__image,
.hero-banner--soft-ink .hero__image,
.hero--soft-ink .hero-banner__image {
  position: relative;
}
.hero-banner--soft-ink .hero-banner__image::after,
.hero--soft-ink .hero__image::after,
.hero-banner--soft-ink .hero__image::after,
.hero--soft-ink .hero-banner__image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--colour-ink, #14140F);
  mix-blend-mode: soft-light;
  opacity: 0.25;
  pointer-events: none;
  z-index: 1;
}

/* ----------------------------------------------------------------
   Layered subtle vignette - applies to either modifier.
   A faint darkening at the edges so the eye settles on centre.
   ---------------------------------------------------------------- */
.hero-banner--soft-parchment .hero-banner__image,
.hero-banner--soft-ink .hero-banner__image,
.hero--soft-parchment .hero__image,
.hero--soft-ink .hero__image {
  isolation: isolate;
}

/* Reduced motion - overlays are static, no motion impact, but
   honour reduced-transparency preference where applicable. */
@media (prefers-reduced-transparency: reduce) {
  .hero-banner--soft-parchment .hero-banner__image::after,
  .hero--soft-parchment .hero__image::after,
  .hero-banner--soft-ink .hero-banner__image::after,
  .hero--soft-ink .hero__image::after {
    opacity: 0;
  }
}

/* ============================================================
   PUSH 90 - Appended 2026-05-06 11:45
============================================================ */
/* PUSH-90-HERO-TAYLORS-SOFT-OVERLAY */
/* ============================================================
   Push 90 - Hero soft-overlay rules (live structure + Taylor's auto-apply)
   ------------------------------------------------------------
   Push 89 defined .hero-banner / .hero modifier classes that don't
   match the live structure (.hero-fullbleed). This push adds the
   real-structure rules and auto-applies the parchment overlay to
   the Taylor's class hero via image-source attribute selector.

   Two patterns:
     1. General modifier classes for opt-in on any page
     2. Image-source attribute selector for auto-apply

   No markup changes required. Pure CSS append.

   Sentinel marker (do not remove - used for idempotency):
   /* PUSH-90-HERO-TAYLORS-SOFT-OVERLAY */
   ============================================================ */

/* ----------------------------------------------------------------
   General modifier - parchment screen blend (warm softening)
   Add .hero-fullbleed--soft-parchment to any hero <section>
   ---------------------------------------------------------------- */
.hero-fullbleed--soft-parchment .hero-fullbleed__media {
  position: relative;
  isolation: isolate;
}
.hero-fullbleed--soft-parchment .hero-fullbleed__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--colour-parchment, #F7F1E6);
  mix-blend-mode: screen;
  opacity: 0.18;
  pointer-events: none;
  z-index: 1;
}

/* ----------------------------------------------------------------
   General modifier - ink soft-light blend (cinematic softening)
   Add .hero-fullbleed--soft-ink to any hero <section>
   ---------------------------------------------------------------- */
.hero-fullbleed--soft-ink .hero-fullbleed__media {
  position: relative;
  isolation: isolate;
}
.hero-fullbleed--soft-ink .hero-fullbleed__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--colour-ink, #14140F);
  mix-blend-mode: soft-light;
  opacity: 0.25;
  pointer-events: none;
  z-index: 1;
}

/* ----------------------------------------------------------------
   Auto-apply - Taylor's class hero
   Source: /assets/images/about/teaching/taylors-class-hero.jpg
   Register: parchment (warm classroom ambient, faculty subject)
   When the source image is replaced with a higher-resolution
   capture, simply rename the file and the overlay auto-removes.
   ---------------------------------------------------------------- */
.hero-fullbleed__media:has(img[src*="taylors-class-hero"]) {
  position: relative;
  isolation: isolate;
}
.hero-fullbleed__media:has(img[src*="taylors-class-hero"])::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--colour-parchment, #F7F1E6);
  mix-blend-mode: screen;
  opacity: 0.20;
  pointer-events: none;
  z-index: 1;
}

/* Reduced-transparency preference - drop overlays */
@media (prefers-reduced-transparency: reduce) {
  .hero-fullbleed--soft-parchment .hero-fullbleed__media::after,
  .hero-fullbleed--soft-ink .hero-fullbleed__media::after,
  .hero-fullbleed__media:has(img[src*="taylors-class-hero"])::after {
    opacity: 0;
  }
}

/* ============================================================
   PUSH 103 - Appended 2026-05-06 13:37
   Hide built-in pulsing scroll-cue line site-wide.
============================================================ */
/* PUSH-103-SCROLL-CUE-OFF */

.hero-fullbleed__scroll-cue-line {
  display: none;
}

/* ============================================================
   PUSH 105 - Appended 2026-05-06 14:00
============================================================ */
/* PUSH-105-IDEOLOGY-HERO-BOTTOM-ANCHOR */
/* Anchor the photograph's bottom edge to the hero box.
   On wide viewports, cover-crop trims the top (dark room) instead
   of the bottom (the chef's hands and the table). One rule, no overrides. */

.hero-fullbleed:has(img[src*="/about/ideology/hero"]) .hero-fullbleed__media img {
  object-position: center bottom;
}

/* ============================================================
   PUSH 106 - Appended 2026-05-06 14:05
============================================================ */
/* PUSH-106-IDEOLOGY-HERO-BOTTOM-ANCHOR-IMPORTANT */
/* Push 105's rule had no !important. The site's global hero rule at
   the top of components.css uses !important to enforce
   object-position: center 25% on every hero image. That overrode
   Push 105 entirely. This rule wins through equal !important plus
   higher specificity (the :has selector). */

.hero-fullbleed:has(img[src*="/about/ideology/hero"]) .hero-fullbleed__media img {
  object-position: center bottom !important;
}

/* ============================================================
   PUSH 107 - Appended 2026-05-06 14:08
============================================================ */
/* PUSH-107-IDEOLOGY-HERO-BALANCE */
/* Push 106's center bottom over-cropped from the top, removing the
   chef's face. Push 107 anchors at 60% from top: face stays in upper
   half of visible band, hands and foreground in lower half. */

.hero-fullbleed:has(img[src*="/about/ideology/hero"]) .hero-fullbleed__media img {
  object-position: center 60% !important;
}

/* ============================================================
   PUSH 108 - Appended 2026-05-06 14:13
============================================================ */
/* PUSH-108-IDEOLOGY-HERO-ASPECT */
/* Match the hero box to the image aspect (16:9) so the whole
   photograph displays with NO cropping. Face, hands, and table
   foreground all visible. The hero is taller than other sub-page
   heroes by design - that's the trade-off for showing the whole image. */

.hero-fullbleed:has(img[src*="/about/ideology/hero"]) {
  aspect-ratio: 16 / 9 !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
}

.hero-fullbleed:has(img[src*="/about/ideology/hero"]) .hero-fullbleed__media img {
  object-fit: cover !important;
  object-position: center center !important;
}

/* ==========================================================================
   Push 119 — Acknowledgement mark
   Partner-page hero credit. Sits at the top of contributor sub-pages
   above the page title in place of the SVG ornament.
   Centred, restrained, parchment-aware.
   ========================================================================== */

.acknowledgement-mark {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto var(--space-5);
  max-width: 320px;
}

.acknowledgement-mark img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 88px;
  object-fit: contain;
}

@media (min-width: 768px) {
  .acknowledgement-mark {
    max-width: 400px;
  }
  .acknowledgement-mark img {
    max-height: 112px;
  }
}

/* ==========================================================================
   Push 120 — Recognition page video figure
   The Axel Cruau investiture speech embedded inside the Mérite Agricole
   section. Restrained chrome — figure on parchment, max-width matching
   the prose container, soft shadow.
   ========================================================================== */

.recognition-video {
  margin: var(--space-6) 0;
  max-width: 100%;
}

.recognition-video video {
  display: block;
  width: 100%;
  height: auto;
  background: var(--colour-ink);
  box-shadow: 0 2px 24px rgba(20, 20, 15, 0.18);
}

.recognition-video figcaption {
  margin-top: var(--space-3);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--colour-text-muted);
  font-style: italic;
}

@media (min-width: 768px) {
  .recognition-video {
    margin: var(--space-7) 0;
  }
}

/* ==========================================================================
   Push 122 - Recognition page YouTube iframe wrapper
   16:9 aspect, fills the figure width, no border.
   ========================================================================== */

.recognition-video__embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--colour-ink);
}

.recognition-video__embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ==========================================================================
   Push 123 - In Motion mentee portraits + quote (recovery from Push 121)
   ========================================================================== */

.mentee-portrait {
  margin: var(--space-4) 0 var(--space-5);
  max-width: 360px;
}
.mentee-portrait img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--colour-ink);
}
.mentee-portrait figcaption {
  margin-top: var(--space-2);
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--colour-text-muted);
  font-style: italic;
}

.mentee-quote {
  margin: var(--space-5) 0;
  padding: var(--space-4) var(--space-5);
  border-left: 2px solid var(--colour-terracotta, #A85B3D);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--colour-ink);
}
.mentee-quote p { margin: 0 0 var(--space-2); }
.mentee-quote cite {
  display: block;
  margin-top: var(--space-3);
  font-family: var(--font-body);
  font-style: normal;
  font-size: 0.875rem;
  letter-spacing: 0.04em;
  color: var(--colour-text-muted);
}
.mentee-quote .mentee-quote__bm {
  display: block;
  margin-top: var(--space-3);
  font-size: 0.9375rem;
  opacity: 0.78;
}

@media (min-width: 768px) {
  .mentee-portrait { max-width: 420px; }
}

/* ==========================================================================
   Push 125 - Footer Contact button (alongside newsletter Sign up)
   Two-button CTA group with consistent spacing; ghost variant for the
   secondary path so the primary newsletter intent stays visually first.
   ========================================================================== */

.site-footer__newsletter-cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

.site-footer__newsletter-button--ghost {
  background: transparent;
  border: 1px solid currentColor;
}

.site-footer__newsletter-button--ghost:hover,
.site-footer__newsletter-button--ghost:focus-visible {
  background: var(--colour-ink);
  color: var(--colour-parchment);
}

@media (max-width: 480px) {
  .site-footer__newsletter-cta {
    flex-direction: column;
    align-items: stretch;
  }
  .site-footer__newsletter-button {
    text-align: center;
  }
}

/* ==========================================================================
   Push 133 - Loewe Ken-Burns motion (v2.0 §3.3)
   Slow 1.5% scale-up over 8 seconds, alternating direction. Applies to
   any fullbleed or cycling hero whose front-matter sets `kenBurns: true`.
   prefers-reduced-motion zeroes the animation.
   ========================================================================== */

@keyframes hero-ken-burns {
  from { transform: scale(1); }
  to   { transform: scale(1.015); }
}

.hero-fullbleed--ken-burns .hero-cycling__frame img,
.hero-fullbleed--ken-burns .hero-fullbleed__media-poster img,
.hero-fullbleed--ken-burns .hero-fullbleed__media img {
  animation: hero-ken-burns 8s ease-in-out infinite alternate;
  transform-origin: center center;
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .hero-fullbleed--ken-burns .hero-cycling__frame img,
  .hero-fullbleed--ken-burns .hero-fullbleed__media-poster img,
  .hero-fullbleed--ken-burns .hero-fullbleed__media img {
    animation: none;
    transform: scale(1);
  }
}

/* Push 135 - ghost-button visibility on the parchment newsletter band.
   Higher specificity than the base .site-footer__newsletter-button rule
   so this carries regardless of cascade order.
   ========================================================================== */

.site-footer__newsletter-button.site-footer__newsletter-button--ghost {
  background: transparent;
  color: var(--colour-ink, #14140F);
  border: 1px solid var(--colour-ink, #14140F);
}

.site-footer__newsletter-button.site-footer__newsletter-button--ghost:hover,
.site-footer__newsletter-button.site-footer__newsletter-button--ghost:focus-visible {
  background: var(--colour-ink, #14140F);
  color: var(--colour-parchment, #F7F1E6);
  border-color: var(--colour-ink, #14140F);
}

/* Push 136 - footer buttons equal size.
   Higher specificity via the .site-footer__newsletter-cta parent so this
   carries regardless of cascade order against the original button rule.
   Sign up (filled) and Contact (ghost) now occupy identical width and
   height; ghost border is included in the box via box-sizing: border-box
   so the outline does not add to dimensions.
   ========================================================================== */

.site-footer__newsletter-cta .site-footer__newsletter-button {
  box-sizing: border-box;
  min-width: 160px;
  padding: 12px 28px;
  line-height: 1;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
}

.site-footer__newsletter-cta .site-footer__newsletter-button.site-footer__newsletter-button--ghost {
  border-color: var(--colour-ink, #14140F);
}

@media (max-width: 480px) {
  .site-footer__newsletter-cta .site-footer__newsletter-button {
    min-width: 0;
    width: 100%;
  }
}

/* ==========================================================================
   Push 141 - Aman spacing calibration (first pass)
   Site spacing trended lavish vs Aman's compactness. This pass tightens
   the most-noticeable rules - section vertical padding, heading-to-body,
   paragraph rhythm, grid gap - toward Aman/Loewe restraint. CSS-only.

   Conservative scope: figures, captions, list-item rhythm, and hero
   spacing are left alone until the first pass is observed live, so any
   over-tighten can be unwound surgically rather than across many rules.

   Higher specificity (body-prefixed) so this carries against earlier
   declarations regardless of cascade order.
   ========================================================================== */

/* Section vertical padding - tighter cadence between content bands */
body .section,
body section.section,
body [class*="section--"]:not(.hero):not(.hero--fullbleed) {
  padding-top: clamp(2.5rem, 5vw, 4rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}

/* Heading-to-body - close the gap so headings anchor their text */
body h1,
body h2,
body h3,
body h4 {
  margin-top: 0;
  margin-bottom: clamp(0.75rem, 1.2vw, 1rem);
}

/* Paragraph rhythm - editorial pacing, not aerated */
body p {
  margin-top: 0;
  margin-bottom: clamp(0.75rem, 1.2vw, 1rem);
}

body p:last-child {
  margin-bottom: 0;
}

/* Grid gap - tighter card-to-card breathing */
body .grid {
  gap: clamp(1rem, 1.8vw, 1.5rem);
}

/* Mobile - relax slightly so single-column reads do not feel cramped */
@media (max-width: 768px) {
  body .section,
  body section.section,
  body [class*="section--"]:not(.hero):not(.hero--fullbleed) {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
  body p {
    margin-bottom: 0.875rem;
  }
}

/* ==========================================================================
   Push 145 - Section sub-heading (within a cluster section)
   For editorial sub-groupings inside a cluster section. Visual hierarchy:
   h2 cluster heading (bold, 2.5-3rem) > h3 sub-grouping heading
   (italic, 1.4-1.75rem, lighter weight) > h3 card title (within grid).
   Italic for the sub-heading hits the Loewe register (italic for
   chapter sigils per the v2.0 spec).
   ========================================================================== */

.section-subheading {
  margin-top: clamp(2rem, 4vw, 3rem);
  margin-bottom: clamp(1rem, 2vw, 1.5rem);
}

.section-subheading__title {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.4vw, 1.75rem);
  font-weight: 400;
  font-style: italic;
  line-height: 1.2;
  margin: 0 0 var(--space-2);
  color: var(--colour-ink);
}

.section-subheading__sub {
  font-family: var(--font-body);
  font-size: var(--type-base);
  line-height: var(--leading-relaxed);
  color: var(--colour-text-muted);
  margin: 0;
  max-width: 60ch;
}

/* When the sub-heading sits directly after the cluster heading, tighten
   the gap a touch so the first sub-group reads as a continuation rather
   than a separate beat. */
.section-heading + .section-subheading {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}

/* ==========================================================================
   Push 143 - Grid column discipline (auto-detect from card count)
   Brand-guide rule: even card counts fill complete rows, choose column
   count by card count not by auto-fit, prefer wider distribution over
   taller, no orphan rows on the last line.

   Implementation: :has() with :nth-child(N):last-child detects exactly
   N children and applies the matching column count. Works on every
   .grid on the site without template edits. Browser support: Chrome
   105+, Safari 15.4+, Firefox 121+ - within the v2.0 brief.

   Cards counts observed live (May 2026): 1, 2, 3, 6, 7, 8.
   - 8 cards (Serumpun partners) -> 4 cols desktop / 2 tablet / 1 mobile
   - 7 cards (Spirits) -> 3 cols desktop, lands 3+3+1 with orphan
   - 6 cards -> 3 cols desktop / 2 tablet / 1 mobile
   - 3 cards -> 3 cols desktop / collapses to 2 then 1
   - 2 cards -> 2 cols all viewports >= 640px
   - 1 card -> centred ~480px max-width

   Higher specificity than .grid-auto declarations so this carries.
   ========================================================================== */

/* DESKTOP - >= 1024px */
@media (min-width: 1024px) {
  body .grid:has(> *:nth-child(8):last-child) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  body .grid:has(> *:nth-child(7):last-child),
  body .grid:has(> *:nth-child(6):last-child),
  body .grid:has(> *:nth-child(3):last-child) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  body .grid:has(> *:nth-child(4):last-child) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  body .grid:has(> *:nth-child(2):last-child) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  body .grid:has(> *:nth-child(1):last-child) {
    grid-template-columns: minmax(0, 480px);
    justify-content: center;
  }
  body .grid:has(> *:nth-child(9):last-child),
  body .grid:has(> *:nth-child(12):last-child) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  body .grid:has(> *:nth-child(12):last-child) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* TABLET - 640px to 1023px */
@media (min-width: 640px) and (max-width: 1023px) {
  body .grid:has(> *:nth-child(2):last-child),
  body .grid:has(> *:nth-child(3):last-child),
  body .grid:has(> *:nth-child(4):last-child),
  body .grid:has(> *:nth-child(5):last-child),
  body .grid:has(> *:nth-child(6):last-child),
  body .grid:has(> *:nth-child(7):last-child),
  body .grid:has(> *:nth-child(8):last-child),
  body .grid:has(> *:nth-child(9):last-child),
  body .grid:has(> *:nth-child(12):last-child) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  body .grid:has(> *:nth-child(1):last-child) {
    grid-template-columns: minmax(0, 480px);
    justify-content: center;
  }
}

/* MOBILE - < 640px */
@media (max-width: 639px) {
  body .grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ============================================================================
   /* media-centre — Phase B redesign (appended in Push B1, 12 May 2026)        */
   /* Marker: /* B1-MARKER-media-centre-v1                                       */
   /* Aman compactness + Loewe craft. Drawer-collapsed filter chrome,           */
   /* progressive disclosure on the result list, editorial featured shelf.      */
/* ============================================================================ */

/* ── Section eyebrow ─────────────────────────────────────────────────────── */
.mc-section-eyebrow {
  margin: 0 0 var(--space-4) 0;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  font-size: var(--type-xs);
  color: var(--colour-text-muted);
}

/* ── 1. Featured shelf ───────────────────────────────────────────────────── */
.mc-featured { padding-block-start: var(--space-6); padding-block-end: var(--space-6); }

.featured-shelf {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}
@media (max-width: 900px) {
  .featured-shelf { grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
}
@media (max-width: 560px) {
  .featured-shelf { grid-template-columns: 1fr; gap: var(--space-4); }
}

.featured-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  border-top: 1px solid var(--colour-border-strong);
  background: transparent;
}

.featured-card__pull {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--type-lg);
  line-height: 1.35;
  color: var(--colour-ink);
}
.featured-card__pull em { font-style: italic; }

.featured-card__title {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--type-sm);
  line-height: 1.45;
  color: var(--colour-text-muted);
  font-weight: 400;
}
.featured-card__title a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.featured-card__title a:hover { border-bottom-color: var(--colour-ink); }

.featured-card__meta {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin-top: auto;
  font-family: var(--font-body);
  font-size: var(--type-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--colour-text-muted);
}
.featured-card__sep { color: var(--colour-border-strong); }

/* ── 2. Browse — search + drawers ────────────────────────────────────────── */
.mc-browse { padding-block-start: var(--space-7); }

.mc-browse__header {
  margin-bottom: var(--space-5);
}

.mc-search { margin-bottom: var(--space-5); }
.mc-search input[type="search"] {
  width: 100%;
  padding: var(--space-3) 0;
  font-family: var(--font-body);
  font-size: var(--type-base);
  color: var(--colour-ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--colour-border-strong);
  outline: none;
}
.mc-search input[type="search"]:focus { border-bottom-color: var(--colour-ink); }

/* Drawer */
.mc-filters {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--colour-border);
}
.mc-drawer {
  border-bottom: 1px solid var(--colour-border);
}
.mc-drawer__summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: var(--space-3) 0;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: var(--type-sm);
  color: var(--colour-ink);
  list-style: none;
}
.mc-drawer__summary::-webkit-details-marker { display: none; }
.mc-drawer__summary::after {
  content: "+";
  margin-left: var(--space-3);
  font-family: var(--font-body);
  color: var(--colour-text-muted);
}
.mc-drawer[open] > .mc-drawer__summary::after { content: "–"; }
.mc-drawer__label { letter-spacing: var(--tracking-wider); text-transform: uppercase; font-size: var(--type-xs); }
.mc-drawer__state {
  margin-left: auto;
  margin-right: var(--space-3);
  font-family: var(--font-body);
  font-size: var(--type-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--colour-text-muted);
}
.mc-drawer__body {
  padding: var(--space-3) 0 var(--space-4) 0;
}

/* Cluster for pills inside drawers — slightly tighter row gap than default */
.mc-drawer__body.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* Year select / sort select shared styling — Aman restraint (B1c) */
.mc-select {
  font-family: var(--font-body);
  font-size: var(--type-sm);
  padding: var(--space-2) 0;
  padding-right: var(--space-4);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--colour-border-strong);
  color: var(--colour-ink);
  cursor: pointer;
  appearance: auto;
  -webkit-appearance: menulist;
  -moz-appearance: menulist;
}
.mc-select:focus {
  outline: none;
  border-bottom-color: var(--colour-ink);
}
.mc-select:hover {
  border-bottom-color: var(--colour-ink);
}

/* ── 3. Filter chips ─────────────────────────────────────────────────────── */
.mc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding-block: var(--space-3);
}
.mc-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 4px 10px 4px 12px;
  font-family: var(--font-body);
  font-size: var(--type-xs);
  letter-spacing: var(--tracking-wider);
  background: var(--colour-ink);
  color: var(--colour-parchment, #F7F1E6);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}
.mc-chip:hover { opacity: 0.85; }

/* ── 4. Results bar ──────────────────────────────────────────────────────── */
.mc-results-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--colour-border);
}
.mc-count {
  font-family: var(--font-body);
  font-size: var(--type-sm);
  color: var(--colour-text-muted);
}
.mc-count [data-mc-count] {
  font-size: var(--type-base);
  color: var(--colour-ink);
  margin-right: var(--space-1);
}
.mc-sort {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

/* ── 5. Show-more ────────────────────────────────────────────────────────── */
.mc-show-more {
  display: flex;
  justify-content: center;
  padding-block: var(--space-5);
}

/* ── 6. Press kit summary ────────────────────────────────────────────────── */
.mc-press-kit { padding-block-start: var(--space-6); padding-block-end: var(--space-7); }
.press-kit-summary {
  max-width: 64ch;
}
.press-kit-summary h3 {
  margin: 0 0 var(--space-3) 0;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  font-size: var(--type-xs);
  color: var(--colour-text-muted);
}
.press-kit-summary p {
  font-family: var(--font-body);
  font-size: var(--type-base);
  line-height: 1.6;
  color: var(--colour-ink);
  margin: 0 0 var(--space-4) 0;
}
.press-kit-summary__cta { margin-top: var(--space-5); }

.link-arrow {
  font-family: var(--font-body);
  font-size: var(--type-sm);
  color: var(--colour-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--colour-ink);
  padding-bottom: 1px;
}
.link-arrow:hover { opacity: 0.7; }

/* ── 7. Pill pressed-state visual ────────────────────────────────────────── */
.pill.is-pressed {
  background: var(--colour-ink);
  color: var(--colour-parchment, #F7F1E6);
  border-color: var(--colour-ink);
}

/* ============================================================
   PUSH C.3g v4 - Appended 2026-05-13
   Media Centre Serumpun Osaka frame - mobile-only adjustments.
   At narrow viewports the subheading wraps to 4-5 lines, pushing
   the text block top into James's face area. Hide subheading on
   mobile and tighten bottom padding so eyebrow + title sit clear.
   Desktop (>=768px) untouched - subheading reads at full length.
   Photograph-scoped via :has(); no other page affected.
   ============================================================ */
@media (max-width: 767px) {
  .hero-fullbleed:has(img[src*="media-centre-serumpun-osaka"]) .hero-fullbleed__content {
    padding-block-end: 1rem;
  }
  .hero-fullbleed:has(img[src*="media-centre-serumpun-osaka"]) .hero-fullbleed__sub {
    display: none;
  }
}

/* ============================================================
   PUSH - Prose table styling - Appended 2026-05-13
   Adds editorial table styling site-wide. Aman/Loewe convention:
   minimal, restrained, serif body text, italic small-caps headers,
   hairline rules between rows, stronger rule under header, sane
   mobile padding. Affects any <table> inside .prose, article,
   or main wrappers - so every cornerstone, collaboration, FAQ,
   or Restaurant Legacy page table reads at the same standard.
   ============================================================ */
.prose table,
article table,
main table {
  width: 100%;
  margin-block: var(--space-6) 0;
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: var(--type-base);
  line-height: var(--leading-snug);
}
.prose th, .prose td,
article th, article td,
main th, main td {
  text-align: left;
  vertical-align: top;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--colour-rule, #d6cdb5);
}
.prose thead th,
article thead th,
main thead th {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: var(--type-sm);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--colour-text-muted, #6b6360);
  border-bottom: 1.5px solid var(--colour-ink);
  padding-block-end: var(--space-3);
}
.prose tbody tr:last-child td,
article tbody tr:last-child td,
main tbody tr:last-child td {
  border-bottom: none;
}
@media (max-width: 600px) {
  .prose table,
  article table,
  main table {
    font-size: var(--type-sm);
  }
  .prose th, .prose td,
  article th, article td,
  main th, main td {
    padding: var(--space-2) var(--space-3);
  }
}

/* ==========================================================================
   RX.W - Push 23 - Interaction layer (May 2026)

   Per Design-Cadence and Visual Specification v2.0 section 6: every
   interactive element responds to default, hover, focus, active states
   at one shared timing on the Aman ease. 200ms for colour/outline shifts,
   100ms for scale. prefers-reduced-motion zeroes durations.

   Scope of this push:
     - Body prose text links (scoped to prose containers)
     - Primary button (.button) - hover inversion (chef signoff 13 May 2026)
     - Skip-to-content (.skip-link)
     - Header utility focus-visible (.nav-toggle, .lang-switcher__link)

   Out of scope (Push 23b):
     - Carousel arrows
     - Footer social icons

   Pure-append overlay; section 12 button rules remain in place, this
   block overrides via source order until a later refactor folds the
   button system into the canonical section per v2.0 section 5.
   ========================================================================== */

/* Body prose text links - scoped to .container-prose / .prose / article */
.container-prose a:not(.button):not(.button-ghost):not(.button-link):not(.honour-mark),
.prose a:not(.button):not(.button-ghost):not(.button-link):not(.honour-mark),
article a:not(.button):not(.button-ghost):not(.button-link):not(.honour-mark) {
  color: var(--colour-ink);
  text-decoration: none;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color 200ms var(--ease-aman);
}

.container-prose a:not(.button):hover,
.prose a:not(.button):hover,
article a:not(.button):hover {
  color: var(--colour-oxblood);
}

.container-prose a:not(.button):focus-visible,
.prose a:not(.button):focus-visible,
article a:not(.button):focus-visible {
  outline: 2px solid var(--colour-oxblood);
  outline-offset: 2px;
}

.container-prose a:not(.button):visited,
.prose a:not(.button):visited,
article a:not(.button):visited {
  color: var(--colour-ink);
}

/* Primary button (.button) - hover inversion to parchment fill, ink text */
.button {
  transition: background-color 200ms var(--ease-aman),
              color 200ms var(--ease-aman),
              border-color 200ms var(--ease-aman),
              transform 100ms var(--ease-aman);
}

.button:hover {
  background-color: var(--colour-parchment);
  color: var(--colour-ink);
  border-color: var(--colour-ink);
}

.button:focus-visible {
  outline: 2px solid var(--colour-oxblood);
  outline-offset: 2px;
}

.button:active {
  transform: scale(0.99);
}

.button-ghost:hover {
  background-color: var(--colour-ink);
  color: var(--colour-parchment);
  border-color: var(--colour-ink);
}

.button-link:hover {
  color: var(--colour-oxblood);
  border-block-end-color: var(--colour-oxblood);
}

.button-link:focus-visible {
  outline: 2px solid var(--colour-oxblood);
  outline-offset: 2px;
}

/* Skip-to-content - hidden offscreen until focused */
.skip-link {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 9999;
  padding: var(--space-2) var(--space-3);
  background-color: var(--colour-parchment);
  color: var(--colour-ink);
  font-family: var(--font-body);
  font-size: var(--type-sm);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  text-decoration: none;
  border: 2px solid var(--colour-oxblood);
  transform: translateY(-150%);
  transition: transform 200ms var(--ease-aman);
}

.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
  outline: 2px solid var(--colour-oxblood);
  outline-offset: 2px;
}

/* Header utility - nav-toggle and lang-switcher focus-visible + hover */
.nav-toggle {
  transition: color 200ms var(--ease-aman);
}

.nav-toggle:hover {
  color: var(--colour-oxblood);
}

.nav-toggle:focus-visible {
  outline: 2px solid var(--colour-oxblood);
  outline-offset: 2px;
}

.lang-switcher__link {
  transition: color 200ms var(--ease-aman);
}

.lang-switcher__link:focus-visible {
  outline: 2px solid var(--colour-oxblood);
  outline-offset: 2px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .container-prose a,
  .prose a,
  article a,
  .button,
  .skip-link,
  .nav-toggle,
  .lang-switcher__link {
    transition-duration: 0s;
  }
  .button:active {
    transform: none;
  }
}

/* ==========================================================================
   RX.W.b - Push 23b - Interaction layer extension (May 2026)

   Closes the carousel and footer-social gap left open by Push 23. Per v2.0
   section 6: carousel arrows get scale 0.97 active; footer social icons
   get champagne hover, scale 0.97 active, and the missing 2px focus ring.

   Scope:
     .home-maison__nav-btn   - homepage Maisons carousel arrows
     .home-hero__dot         - homepage hero dot navigation
     .site-footer__social    - footer social icon set
   ========================================================================== */

/* Maisons carousel arrows - tighten timing and add active scale 0.97 */
.home-maison__nav-btn {
  transition: background-color 200ms var(--ease-aman),
              border-color 200ms var(--ease-aman),
              color 200ms var(--ease-aman),
              transform 100ms var(--ease-aman);
}

.home-maison__nav-btn:active {
  transform: scale(0.97);
}

/* Homepage hero dot navigation - focus-visible ring */
.home-hero__dot:focus-visible {
  outline: 2px solid var(--colour-oxblood);
  outline-offset: 3px;
}

/* Footer social icons - champagne hover (semantic), 2px focus ring, active scale */
.site-footer__social {
  transition: color 200ms var(--ease-aman),
              transform 100ms var(--ease-aman);
}

.site-footer__social:hover {
  color: var(--colour-champagne);
}

.site-footer__social:focus-visible {
  color: var(--colour-champagne);
  outline: 2px solid var(--colour-champagne);
  outline-offset: 2px;
  transform: none;
}

.site-footer__social:active {
  transform: scale(0.97);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .home-maison__nav-btn,
  .site-footer__social {
    transition-duration: 0s;
  }
  .home-maison__nav-btn:active,
  .site-footer__social:active {
    transform: none;
  }
}

/* ==========================================================================
   Label contrast — AA-compliant champagne for small-caps labels on parchment
   (Lighthouse accessibility, Jun 2026). Hero eyebrows are excluded: they sit
   on dark imagery where the lighter champagne reads correctly.
   ========================================================================== */
.card__eyebrow,
.section-heading__eyebrow,
.search-result__eyebrow,
.toc__label,
.press-list__see-all {
  color: var(--colour-ochre-text);
}