/* ===== Self-hosted fonts (latin subsets, woff2) ===== */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/assets/fonts/cormorant-garamond-latin-300-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/cormorant-garamond-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/cormorant-garamond-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url('/assets/fonts/cormorant-garamond-latin-300-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/cormorant-garamond-latin-400-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/eb-garamond-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/eb-garamond-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'EB Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/eb-garamond-latin-400-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'EB Garamond';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/eb-garamond-latin-500-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/assets/fonts/ibm-plex-mono-latin-300-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2');
}

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

  :root {
    --ink: #1C1C1C;
    --ink-soft: rgba(28, 28, 28, 0.74);
    --ink-quiet: rgba(28, 28, 28, 0.72);
    --ink-line: rgba(28, 28, 28, 0.12);
    --ink-faint: rgba(28, 28, 28, 0.06);
    --cream: #F5F0E6;
    --paper: #FAF7F1;
    --bone: #E8DDD0;
    --sand: #D4C5A9;
    --teal: #2C4A47;
    --teal-deep: #1f3633;
    --clay: #B0876A;
    --clay-text: #8A5A34;
    --rule-cream: rgba(245, 240, 230, 0.18);
    --rule-cream-strong: rgba(245, 240, 230, 0.32);
    --error: #8C2F24;
    /* Type scale (adopt opportunistically — do not invent new one-off sizes) */
    --fs-meta: 10.5px;
    --ls-meta: 0.24em;
    --fs-body: 17px;
    --fs-lede: 21px;
    --fs-display-3: clamp(26px, 3.2vw, 34px);
    --fs-display-2: clamp(32px, 4.4vw, 46px);
    --fs-display-1: clamp(40px, 6vw, 64px);
  }

  html {
    scroll-behavior: smooth;
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
  }

  body {
    background: var(--cream);
    color: var(--ink);
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 19px;
    line-height: 1.66;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    font-feature-settings: "liga" 1, "kern" 1;
    animation: pageEnter 1.4s cubic-bezier(.2,.6,.2,1) both;
  }

  @keyframes pageEnter {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  ::selection { background: var(--teal); color: var(--cream); }

  img { max-width: 100%; height: auto; display: block; }
  a { color: inherit; text-decoration: none; }
  figure { margin: 0; }
  cite { font-style: inherit; }
  time { font: inherit; }

  :focus-visible {
    outline: 1px solid var(--ink);
    outline-offset: 4px;
  }

  /* Skip to content link — visible only on keyboard focus */
  .skip-link {
    position: fixed;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    background: var(--ink);
    color: var(--cream);
    padding: 14px 28px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    border-radius: 999px;
    transition: top 0.4s ease;
  }
  .skip-link:focus, .skip-link:focus-visible {
    top: 16px;
    outline: none;
  }

  /* ----------------------------- Scroll progress */
  .scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 1.5px;
    background: var(--clay);
    transform: scaleX(0);
    transform-origin: left center;
    z-index: 100;
    pointer-events: none;
    will-change: transform;
  }

  /* ----------------------------- Paper grain overlay (very subtle) */
  body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    opacity: 0.035;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    mix-blend-mode: multiply;
  }

  /* ----------------------------- Custom cursor — a single quiet dot (fine pointer only).
     No mix-blend-mode (that recomposites the page and flickers); a soft halo keeps the
     dot legible on both light and dark sections. The hover-ring was removed for consistency. */
  @media (pointer: fine) {
    .cursor-dot {
      position: fixed;
      top: 0;
      left: 0;
      pointer-events: none;
      z-index: 999;
      width: 7px;
      height: 7px;
      margin: -3.5px 0 0 -3.5px;
      background: var(--ink);
      border-radius: 50%;
      box-shadow: 0 0 0 1.5px rgba(245, 240, 230, 0.85);
      opacity: 0;
      transition: opacity 0.3s ease,
                  width 0.32s cubic-bezier(.2,.7,.2,1), height 0.32s cubic-bezier(.2,.7,.2,1),
                  margin 0.32s cubic-bezier(.2,.7,.2,1), background-color 0.32s ease, box-shadow 0.32s ease;
      will-change: transform;
    }
    /* Over clickable imagery, the dot opens into a quiet "View" disc */
    .cursor-dot.cursor-view {
      width: 68px; height: 68px; margin: -34px 0 0 -34px;
      background: rgba(20, 20, 20, 0.4);
      box-shadow: 0 0 0 1px rgba(245, 240, 230, 0.85);
    }
    .cursor-dot.cursor-view::after {
      content: 'View';
      position: absolute; inset: 0;
      display: flex; align-items: center; justify-content: center;
      font-family: 'IBM Plex Mono', monospace; font-size: 8.5px;
      letter-spacing: 0.22em; text-transform: uppercase; color: var(--cream);
    }
    body.cursor-ready { cursor: none; }
    body.cursor-ready a, body.cursor-ready button, body.cursor-ready summary,
    body.cursor-ready .annum-dd__btn, body.cursor-ready .annum-dd__opt,
    body.cursor-ready .plate-essay, body.cursor-ready .entry, body.cursor-ready .alumni-note,
    body.cursor-ready .single-plate, body.cursor-ready .cinematic { cursor: none; }
    body.cursor-ready input, body.cursor-ready textarea { cursor: text; }
  }
  @media (hover: none), (pointer: coarse) {
    .cursor-dot { display: none; }
  }

  /* ----------------------------- Chapter folio (sticky) */
  .chapter-folio {
    position: fixed;
    bottom: 32px;
    left: 32px;
    z-index: 49;
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(245, 240, 230, 0.88);
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    padding: 9px 16px 10px;
    border: 1px solid var(--ink-line);
    border-radius: 999px;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.5s ease, transform 0.5s ease;
    pointer-events: none;
  }
  .chapter-folio.visible {
    opacity: 1;
    transform: translateY(0);
  }
  .chapter-folio .num {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--clay-text);
  }
  .chapter-folio .name {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 400;
    font-size: 14px;
    letter-spacing: 0.012em;
    color: var(--ink);
  }

  /* ----------------------------- Cepaka Now (bottom-right) */
  .bali-now {
    position: fixed;
    bottom: 32px;
    right: 32px;
    z-index: 49;
    background: rgba(245, 240, 230, 0.88);
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    padding: 11px 20px 11px 22px;
    border: 1px solid var(--ink-line);
    border-radius: 999px;
    text-align: right;
    display: flex;
    align-items: center;
    gap: 12px;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.5s ease, transform 0.5s ease;
    pointer-events: none;
    max-width: calc(100vw - 72px);
  }
  .bali-now.visible {
    opacity: 1;
    transform: translateY(0);
  }
  .bali-now .meta-tag {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 9.5px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--clay-text);
    white-space: nowrap;
  }
  .bali-now .text {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 14px;
    line-height: 1.2;
    color: var(--ink);
    letter-spacing: 0.005em;
    white-space: nowrap;
  }
  .bali-now .text .sub {
    color: var(--ink-quiet);
    font-style: italic;
    margin-left: 8px;
  }

  /* ----------------------------- Lightbox (click-to-enlarge plates) */
  .lightbox {
    position: fixed;
    inset: 0;
    background: rgba(28, 28, 28, 0.96);
    backdrop-filter: blur(14px) saturate(120%);
    -webkit-backdrop-filter: blur(14px) saturate(120%);
    z-index: 200;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 56px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s cubic-bezier(.2,.6,.2,1);
  }
  .lightbox.open {
    opacity: 1;
    pointer-events: auto;
  }
  .lightbox-img {
    width: 100%;
    height: 78vh;
    background: var(--bone) center/contain no-repeat;
    transform: scale(0.94);
    opacity: 0;
    transition: transform 0.7s cubic-bezier(.2,.6,.2,1), opacity 0.5s ease 0.1s;
  }
  .lightbox.open .lightbox-img {
    transform: scale(1);
    opacity: 1;
  }
  .lightbox-caption {
    margin-top: 32px;
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 300;
    font-size: 19px;
    line-height: 1.35;
    color: rgba(245, 240, 230, 0.92);
    text-align: center;
    max-width: 720px;
    letter-spacing: 0.005em;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.5s ease 0.25s, transform 0.5s ease 0.25s;
  }
  .lightbox.open .lightbox-caption {
    opacity: 1;
    transform: translateY(0);
  }
  .lightbox-caption .num {
    display: block;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: rgba(245, 240, 230, 0.5);
    font-style: normal;
    margin-bottom: 12px;
  }
  .lightbox-close {
    position: absolute;
    top: 28px;
    right: 28px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(245, 240, 230, 0.4);
    border-radius: 50%;
    color: rgba(245, 240, 230, 0.85);
    cursor: pointer;
    transition: border-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
    background: transparent;
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    font-size: 22px;
    line-height: 1;
  }
  .lightbox-close:hover {
    border-color: var(--cream);
    color: var(--cream);
    transform: scale(1.06);
  }
  .lightbox-hint {
    position: absolute;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 9.5px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: rgba(245, 240, 230, 0.4);
  }

  /* Make plates feel clickable with a subtle hover hint */
  .plate-essay, .single-plate, .place .image, .entry .img,
  .cinematic, .single-plate-wrap .single-plate {
    position: relative;
  }

  /* ----------------------------- Hero wordmark letter reveal */
  .hero-mark .ch {
    display: inline-block;
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 1.0s cubic-bezier(.2,.6,.2,1), transform 1.0s cubic-bezier(.2,.6,.2,1);
    will-change: transform, opacity;
  }
  .hero-mark .ch.sp { width: 0.32em; }
  .hero.loaded .ch { opacity: 1; transform: translateY(0); }
  .hero.loaded .ch:nth-child(1) { transition-delay: 0.45s; }
  .hero.loaded .ch:nth-child(2) { transition-delay: 0.55s; }
  .hero.loaded .ch:nth-child(3) { transition-delay: 0.65s; }
  .hero.loaded .ch:nth-child(4) { transition-delay: 0.75s; }
  .hero.loaded .ch:nth-child(5) { transition-delay: 0.85s; }
  .hero.loaded .ch:nth-child(6) { transition-delay: 0.95s; }
  .hero.loaded .ch:nth-child(7) { transition-delay: 1.05s; }
  .hero.loaded .ch:nth-child(8) { transition-delay: 1.15s; }
  .hero.loaded .ch:nth-child(9) { transition-delay: 1.25s; }

  /* ----------------------------- Layout primitives */
  .container {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 64px;
  }
  .container.narrow { max-width: 740px; }
  .container.medium { max-width: 980px; }
  .container.wide { max-width: 1480px; }

  section {
    padding: 140px 0;
    position: relative;
  }
  section.tight { padding: 110px 0; }

  /* ----------------------------- Type system */
  .display { font-family: 'Cormorant Garamond', 'Garamond', serif; }

  .meta {
    font-family: 'IBM Plex Mono', 'Courier New', monospace;
    font-size: 10.5px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--ink-soft);
    font-weight: 400;
  }
  .meta.cream { color: rgba(245, 240, 230, 0.62); }
  .meta.faint { color: var(--ink-quiet); }

  h1.display, h2.display, h3.display, h4.display {
    font-weight: 300;
    letter-spacing: 0.005em;
  }

  h2.display {
    font-size: clamp(36px, 5vw, 64px);
    line-height: 1.08;
    margin-bottom: 48px;
    max-width: 880px;
    letter-spacing: 0.002em;
  }
  h2.display.large {
    font-size: clamp(48px, 6.4vw, 88px);
    line-height: 1.04;
    max-width: 1020px;
  }

  h3.display {
    font-size: clamp(28px, 3.4vw, 40px);
    line-height: 1.18;
    margin-bottom: 24px;
    font-weight: 400;
  }

  .lead {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    font-size: clamp(22px, 2.2vw, 28px);
    line-height: 1.42;
    letter-spacing: 0.005em;
    color: var(--ink);
    max-width: 660px;
    margin-bottom: 36px;
  }
  .lead.cream { color: rgba(245, 240, 230, 0.92); }

  p {
    margin-bottom: 22px;
    max-width: 660px;
  }
  p.full { max-width: 100%; }
  p em { font-style: italic; }

  /* ----------------------------- Section header */
  .section-head {
    margin-bottom: 48px;
    padding-top: 24px;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 18px;
    position: relative;
  }
  .section-head::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: var(--ink-line);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 1.6s cubic-bezier(.2,.6,.2,1);
  }
  .section-head.in::before,
  .section-head.reveal.in::before { transform: scaleX(1); }
  .section-head.cream::before { background: var(--rule-cream-strong); }
  .section-head.cream .meta { color: rgba(245, 240, 230, 0.72); }
  .section-head.cream .meta.faint { color: rgba(245, 240, 230, 0.5); }

  /* ----------------------------- Italic interlude (section break) */
  .interlude {
    background: var(--cream);
    padding: 80px 64px;
    border-top: 1px solid var(--ink-line);
    border-bottom: 1px solid var(--ink-line);
    text-align: left;
  }
  .interlude .container-i {
    max-width: 1240px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }
  .interlude .ord {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--clay-text);
  }
  .interlude .line {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 300;
    font-size: clamp(28px, 4vw, 56px);
    line-height: 1.18;
    color: var(--ink);
    max-width: 1100px;
    letter-spacing: 0.002em;
    padding-left: 0;
  }
  .interlude.right .container-i { align-items: flex-end; }
  .interlude.right .line { text-align: right; }
  .interlude.center .container-i { align-items: center; }
  .interlude.center .line { text-align: center; }

  /* ----------------------------- Navigation */
  .nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 50;
    padding: 28px 64px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: transparent;
    transition: background 0.5s ease, backdrop-filter 0.5s ease, padding 0.4s ease, border-color 0.4s ease;
    border-bottom: 1px solid transparent;
  }
  .nav.scrolled {
    background: rgba(245, 240, 230, 0.94);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    border-bottom-color: var(--ink-line);
    padding: 16px 64px;
  }
  .nav .mark {
    position: relative; z-index: 3; /* above the full-screen mobile menu panel */
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    font-size: 13px;
    letter-spacing: 0.55em;
    padding-left: 0.55em;
    text-transform: uppercase;
    color: var(--cream);
    transition: color 0.4s ease;
    white-space: nowrap;
  }
  .nav.scrolled .mark { color: var(--ink); }
  .nav .links { display: flex; gap: 38px; align-items: center; }
  .nav .links a {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10.5px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(245, 240, 230, 0.78);
    position: relative;
    padding: 4px 0;
    transition: color 0.4s ease, opacity 0.3s ease;
  }
  .nav .links a::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -2px;
    height: 0.5px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s ease;
  }
  .nav .links a:hover::after { transform: scaleX(1); }
  .nav.scrolled .links a { color: var(--ink-soft); }

  /* Make the final nav link (Enquire) read as a quiet CTA */
  .nav .links a:last-child {
    border: 1px solid currentColor;
    padding: 8px 18px;
    transition: background 0.4s ease, color 0.4s ease, border-color 0.4s ease;
  }
  .nav .links a:last-child::after { display: none; }
  .nav .links a:last-child:hover {
    background: var(--cream);
    color: var(--ink);
    border-color: var(--cream);
  }
  .nav.scrolled .links a:last-child {
    background: var(--ink);
    color: var(--cream);
    border-color: var(--ink);
  }
  .nav.scrolled .links a:last-child:hover {
    background: var(--teal);
    color: var(--cream);
    border-color: var(--teal);
  }

  /* ----------------------------- Hero */
  .hero {
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    background: var(--teal);
    color: var(--cream);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 128px 64px 56px;
  }
  .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url('/assets/img/og/hero-inner-pages.jpg');
    background-size: cover;
    background-position: center;
    background-color: var(--teal);
    opacity: 0.92;
    z-index: 0;
    transform: scale(1.06);
    transition: transform 16s ease-out;
  }
  .hero.loaded::before { transform: scale(1); }

  .hero-video-wrap {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
    background: var(--teal);
  }
  .hero-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
    opacity: 0;
    transition: opacity 1.6s ease-out 0.2s;
  }
  .hero-video.ready { opacity: 1; }
  .hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse at center 50%, rgba(28, 28, 28, 0.18) 0%, transparent 65%),
      linear-gradient(180deg,
        rgba(28, 28, 28, 0.48) 0%,
        rgba(28, 28, 28, 0.30) 50%,
        rgba(28, 28, 28, 0.58) 100%);
    z-index: 2;
    pointer-events: none;
  }
  .hero > * { position: relative; z-index: 3; }

  .hero-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 16px;
  }

  .hero-mark {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding-bottom: 3vh;
  }
  .hero-mark h1 {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    font-size: clamp(20px, 6.6vw, 78px);
    line-height: 1;
    letter-spacing: 0.55em;
    padding-left: 0.55em;
    font-feature-settings: "liga" 1, "calt" 1, "kern" 1;
    white-space: nowrap;
  }
  /* Hero ornament — frangipani fleuron flanked by hairlines */
  .hero-mark .rule {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    width: 180px;
    height: auto;
    background: none;
    margin: 44px auto 32px;
    color: var(--cream);
    opacity: 0.7;
  }
  .hero-mark .rule::before,
  .hero-mark .rule::after {
    content: "";
    flex: 1;
    height: 0.5px;
    background: currentColor;
    opacity: 0.7;
  }
  .hero-mark .rule svg {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
  }

  /* Shared ornament — used in pull quote, footer, end of content */
  .ornament {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    color: var(--clay-text);
  }
  .ornament::before,
  .ornament::after {
    content: "";
    flex: 1;
    height: 0.5px;
    background: currentColor;
    opacity: 0.6;
  }
  .ornament svg {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
  }
  .ornament-end {
    text-align: center;
    color: var(--clay-text);
  }
  .ornament-end svg {
    width: 22px;
    height: 22px;
  }
  .hero-mark .tagline {
    font-family: 'Cormorant Garamond', serif;
    font-size: 13px;
    letter-spacing: 0.62em;
    text-transform: uppercase;
    padding-left: 0.62em;
    font-weight: 400;
  }

  .hero-foot {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 32px;
    flex-wrap: wrap;
  }
  .hero-foot .meta { color: rgba(245, 240, 230, 0.62); }

  /* ----------------------------- Prologue (marquee replaced by .procession) */
  .prologue { background: var(--cream); }
  .prologue .opener {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    font-size: clamp(30px, 3.4vw, 44px);
    line-height: 1.28;
    letter-spacing: 0.002em;
    margin: 36px 0 56px;
    color: var(--ink);
    max-width: 100%;
  }
  .prologue p {
    font-family: 'EB Garamond', serif;
    font-size: 19px;
    line-height: 1.66;
    color: var(--ink);
    max-width: 100%;
    margin: 0 0 26px;
  }
  .prologue p:last-of-type { margin-bottom: 0; }
  .dropcap::first-letter {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    font-size: 5.4em;
    float: left;
    line-height: 0.78;
    margin: 0.06em 0.1em -0.05em 0;
    color: var(--ink);
  }

  .signature {
    margin-top: 64px;
    padding-top: 32px;
    border-top: 1px solid var(--ink-line);
  }
  .signature .who {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 400;
    font-size: 44px;
    line-height: 1;
    color: var(--ink);
    display: block;
    margin-bottom: 14px;
    letter-spacing: -0.005em;
    font-feature-settings: "liga" 1, "dlig" 1;
  }
  .signature .what {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10.5px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--ink-soft);
  }

  /* ----------------------------- Single photograph */
  .single-plate-wrap {
    background: var(--cream);
    padding-bottom: 24px;
  }
  .single-plate {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: var(--bone) center/cover no-repeat;
    overflow: hidden;
  }
  .single-plate-meta {
    padding: 14px 64px 0;
    display: flex;
    justify-content: space-between;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--ink-quiet);
  }

  /* ----------------------------- Offering — a three-stay comparison (tablist)
     with The Atelier as a single card beneath. The movement card format is
     reused for the Atelier; the three stays are now the sy- selector above. */
  .movements-list {
    margin-top: 64px;
    border-top: 1px solid var(--ink-line);
  }
  .movement {
    display: grid;
    grid-template-columns: 0.18fr 0.45fr 1fr;
    gap: 64px;
    padding: 72px 0;
    border-bottom: 1px solid var(--ink-line);
    align-items: start;
  }
  .movement .roman {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    font-style: italic;
    font-size: 14px;
    letter-spacing: 0.32em;
    color: var(--clay-text);
    text-transform: uppercase;
    padding-top: 10px;
  }
  .movement-name h3 {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    font-size: clamp(40px, 4.8vw, 60px);
    line-height: 1;
    letter-spacing: 0.005em;
    color: var(--ink);
    margin: 0;
  }
  .movement-name h3 em {
    display: block;
    font-style: italic;
    font-weight: 300;
    font-size: 0.5em;
    line-height: 1;
    color: var(--ink-soft);
    margin-top: 14px;
    letter-spacing: 0.04em;
  }
  .movement-name .duration {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10.5px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--ink-quiet);
    margin-top: 28px;
  }
  .movement-copy p {
    font-family: 'EB Garamond', serif;
    font-size: 19px;
    line-height: 1.66;
    color: var(--ink);
    max-width: 100%;
    margin: 0 0 18px;
  }
  .movement-copy p:last-of-type { margin-bottom: 0; }
  .movement-copy .by {
    margin-top: 36px;
    padding-top: 24px;
    border-top: 1px solid var(--ink-line);
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 17px;
    color: var(--ink-soft);
    letter-spacing: 0.005em;
  }

  /* ----------------------------- By the Numbers */
  .numbers {
    background: var(--teal);
    color: var(--cream);
    overflow: hidden;
    padding: 112px 0;
  }
  .numbers .meta { color: rgba(245, 240, 230, 0.7); }
  .numbers h2.display { color: var(--cream); margin-bottom: 20px; max-width: 720px; }
  .numbers-lead {
    font-family: 'EB Garamond', serif;
    font-size: 18px; line-height: 1.6;
    color: rgba(245, 240, 230, 0.82);
    max-width: 620px;
    margin: 0 0 52px;
  }
  .numbers-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border-top: 1px solid var(--rule-cream-strong);
  }
  .numbers-cell {
    padding: 40px 32px;
    border-right: 1px solid var(--rule-cream);
    border-bottom: 1px solid var(--rule-cream);
    position: relative;
  }
  .numbers-cell:nth-child(3n) { border-right: none; padding-right: 0; }
  .numbers-cell:nth-child(3n+1) { padding-left: 0; }
  .numbers-cell:nth-child(n+4) { padding-top: 40px; }
  .numbers-cell:nth-last-child(-n+3) { border-bottom: none; padding-bottom: 0; }
  .numbers-cell .ord {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: rgba(245, 240, 230, 0.45);
    margin-bottom: 16px;
  }
  .numbers-cell .figure {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    font-size: clamp(23px, 2.2vw, 30px);
    line-height: 1.16;
    letter-spacing: -0.005em;
    color: var(--cream);
    margin-bottom: 16px;
    font-feature-settings: "lnum" 1;
    font-variant-numeric: lining-nums tabular-nums;
    hyphens: none;
    min-height: 2.32em;
    display: flex;
    align-items: flex-end;
  }
  .numbers-cell .descriptor {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 300;
    font-size: 17px;
    line-height: 1.4;
    color: rgba(245, 240, 230, 0.82);
    max-width: 260px;
  }
  .numbers-coda {
    margin-top: 64px;
    padding-top: 36px;
    border-top: 1px solid var(--rule-cream);
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 300;
    font-size: clamp(22px, 2.2vw, 28px);
    line-height: 1.42;
    color: rgba(245, 240, 230, 0.92);
    max-width: 720px;
  }

  /* ----------------------------- Pull quote */
  .pull {
    background: var(--ink);
    color: var(--cream);
    padding: 96px 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 44vh;
    border-top: none;
  }
  .pull-inner {
    max-width: 1100px;
    position: relative;
  }
  .pull-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    width: 140px;
    height: auto;
    background: none;
    margin: 0 auto 40px;
    color: rgba(245, 240, 230, 0.55);
  }
  .pull-mark.bottom { margin: 40px auto 0; }
  .pull-mark::before,
  .pull-mark::after {
    content: "";
    flex: 1;
    height: 0.5px;
    background: currentColor;
    opacity: 0.7;
  }
  .pull-mark svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
  }
  .pull blockquote {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    font-style: italic;
    font-size: clamp(34px, 4.8vw, 64px);
    line-height: 1.22;
    letter-spacing: -0.003em;
    color: rgba(245, 240, 230, 0.96);
    border: none;
    padding: 0;
    margin: 0;
    max-width: 100%;
  }
  .pull-attr {
    margin-top: 56px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10.5px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: rgba(245, 240, 230, 0.42);
  }

  /* ----------------------------- Place */
  .place { background: var(--cream); }
  .place .twocol {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 96px;
    align-items: center;
  }
  .place .text p { font-size: 19px; }
  .place .image {
    aspect-ratio: 4 / 5;
    background: var(--bone) center/cover no-repeat;
  }
  .place .image-meta {
    margin-top: 14px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--ink-quiet);
    display: flex;
    justify-content: space-between;
  }

  /* ----------------------------- Bali map — the atlas plate */
  .bali-map {
    margin-top: 72px;
    padding-top: 48px;
    border-top: 1px solid var(--ink-line);
    text-align: center;
    color: var(--ink-soft);
  }
  .map-plate {
    position: relative;
    border: 1px solid var(--ink-line);
    padding: clamp(26px, 3.5vw, 46px) clamp(24px, 3.5vw, 46px) 0;
    text-align: left;
    background: rgba(250, 247, 241, 0.55);
  }
  .mp-tick { position: absolute; width: 12px; height: 12px; }
  .mp-tick.tl { top: -1px; left: -1px; border-top: 1px solid rgba(28,28,28,.55); border-left: 1px solid rgba(28,28,28,.55); }
  .mp-tick.tr { top: -1px; right: -1px; border-top: 1px solid rgba(28,28,28,.55); border-right: 1px solid rgba(28,28,28,.55); }
  .mp-tick.bl { bottom: -1px; left: -1px; border-bottom: 1px solid rgba(28,28,28,.55); border-left: 1px solid rgba(28,28,28,.55); }
  .mp-tick.br { bottom: -1px; right: -1px; border-bottom: 1px solid rgba(28,28,28,.55); border-right: 1px solid rgba(28,28,28,.55); }
  .map-plate-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(250px, 1fr);
    gap: clamp(28px, 4vw, 56px);
    align-items: center;
  }
  .bali-map picture,
  .bali-map img { width: 100%; height: auto; max-width: 700px; display: block; margin: 0 auto; }
  .map-figure { position: relative; max-width: 700px; margin: 0 auto; }
  .map-hotspots { position: absolute; inset: 0; }
  .map-hot {
    position: absolute;
    left: var(--x); top: var(--y);
    width: 30px; height: 30px;
    margin: -15px 0 0 -15px;
    display: block;
    border-radius: 50%;
    -webkit-tap-highlight-color: transparent;
  }
  @media (max-width: 700px) {
    .map-hot { width: 44px; height: 44px; margin: -22px 0 0 -22px; }
  }
  .map-dot {
    position: absolute; inset: 50% auto auto 50%;
    width: 16px; height: 16px;
    margin: -8px 0 0 -8px;
    border-radius: 50%;
    border: 1px solid rgba(138, 90, 52, 0.35);
    background: transparent;
    opacity: 0.5;
    transition: opacity 0.5s ease, transform 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease;
    pointer-events: none;
  }
  .map-hot:hover .map-dot,
  .map-hot:focus-visible .map-dot,
  .map-hot.is-active .map-dot {
    opacity: 1;
    transform: scale(1.12);
    border-color: var(--clay-text);
    box-shadow: 0 0 0 5px rgba(176, 135, 106, 0.14);
  }
  .map-hot:focus { outline: none; }
  .map-hot:focus-visible { outline: none; }
  /* Region notes stay in the DOM as the data source for the legend panel */
  .map-note { display: none; }
  /* ---- The legend column ---- */
  .map-legend {
    align-self: center;
    display: flex; flex-direction: column;
    border-left: 1px solid var(--ink-line);
    padding: clamp(8px, 1.5vw, 18px) 0 clamp(8px, 1.5vw, 18px) clamp(24px, 3vw, 44px);
  }
  .ml-kicker {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase;
    color: var(--clay-text);
  }
  .ml-index { margin-top: 16px; display: flex; flex-direction: column; }
  .ml-item {
    display: flex; justify-content: space-between; align-items: baseline;
    padding: 9px 2px 9px 0;
    border-bottom: 1px solid var(--ink-faint);
    font-family: 'Cormorant Garamond', serif;
    font-weight: 400; font-size: 19px; line-height: 1.2;
    color: var(--ink); text-decoration: none;
    transition: color 0.4s ease;
  }
  .ml-item::after {
    content: "\2192";
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px; color: var(--clay-text);
    opacity: 0; transform: translateX(-4px);
    transition: opacity 0.4s ease, transform 0.4s ease;
  }
  .ml-item:hover, .ml-item:focus-visible, .ml-item.is-active { color: var(--clay-text); }
  .ml-item:hover::after, .ml-item:focus-visible::after, .ml-item.is-active::after { opacity: 1; transform: none; }
  .ml-item:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
  /* ---- The legend strip — a full-width table row beneath the map.
     Fixed minimum height so the plate never shifts as notes fill it. ---- */
  .map-note-panel {
    margin-top: clamp(22px, 3vw, 36px);
    padding: 20px 0 22px;
    border-top: 1px solid var(--ink-line);
    text-align: left;
    min-height: 132px;
    display: grid;
    grid-template-columns: minmax(150px, 0.9fr) repeat(4, 1fr);
    gap: 4px clamp(18px, 2.5vw, 34px);
    align-items: start;
    transition: opacity 0.28s ease;
  }
  .mnp-default {
    grid-column: 1 / -1;
    align-self: center;
    font-family: 'Cormorant Garamond', serif;
    font-style: italic; font-size: 16.5px; line-height: 1.5;
    color: var(--ink-quiet); margin: 0;
  }
  .map-note-panel .mn-h {
    grid-column: 1; grid-row: 1;
    font-family: 'Cormorant Garamond', serif; font-size: 24px; line-height: 1.1;
    color: var(--ink);
  }
  .map-note-panel .mn-row {
    grid-row: 1 / span 2;
    font-family: 'EB Garamond', serif; font-size: 14px; line-height: 1.5;
    color: var(--ink-soft); display: block;
  }
  .map-note-panel .mn-row b {
    display: block;
    font-family: 'IBM Plex Mono', monospace; font-weight: 400;
    font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--clay-text); margin-bottom: 3px;
  }
  .map-note-panel .mn-more {
    grid-column: 1; grid-row: 2;
    align-self: end; justify-self: start;
    font-family: 'IBM Plex Mono', monospace; font-size: 10px;
    letter-spacing: 0.16em; text-transform: uppercase; color: var(--clay-text);
  }
  /* Region photograph — a slim plate crowning the note, when one exists */
  .map-note-panel .mnp-photo {
    grid-column: 1 / -1; grid-row: 1;
    margin-bottom: 18px; overflow: hidden;
    background: var(--bone);
  }
  .map-note-panel .mnp-photo img {
    width: 100%; height: clamp(128px, 19vh, 176px);
    object-fit: cover; display: block;
  }
  .map-note-panel.has-photo .mn-h   { grid-row: 2; }
  .map-note-panel.has-photo .mn-row { grid-row: 2 / span 2; }
  .map-note-panel.has-photo .mn-more{ grid-row: 3; }
  /* ---- Plate footer + caption ---- */
  .map-plate-foot {
    display: flex; justify-content: space-between; gap: 16px;
    margin-top: clamp(24px, 3vw, 40px);
    padding: 12px 0 14px;
    border-top: 1px solid var(--ink-line);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--ink-quiet);
  }
  .bali-map .map-caption {
    margin: 26px auto 0;
    max-width: 560px;
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 400;
    font-size: 17px;
    line-height: 1.4;
    color: var(--ink);
  }
  @media (max-width: 520px) {
    .map-plate-foot { flex-direction: column; gap: 5px; }
    .map-plate-foot span { white-space: nowrap; letter-spacing: 0.18em; }
  }
  @media (max-width: 880px) {
    .map-plate { padding-bottom: 0; }
    .map-plate-grid { grid-template-columns: 1fr; gap: 30px; }
    .map-legend { border-left: 0; border-top: 1px solid var(--ink-line); padding: 26px 0 0; }
    .ml-index { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; }
    .map-note-panel { min-height: 0; display: block; }
    .map-note-panel .mn-h { margin-bottom: 8px; }
    .map-note-panel .mn-row { margin-bottom: 7px; }
    .map-note-panel .mn-row b { display: inline; margin-right: 8px; }
    .map-note-panel .mn-more { display: inline-block; margin-top: 8px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .map-dot, .ml-item, .ml-item::after, .map-note-panel { transition: none; }
  }

  /* ----------------------------- Commitment note (fee filter) */
  .commitment-note {
    margin-top: 72px;
    padding: 48px 44px 44px;
    background: var(--paper);
    border-left: 2px solid var(--clay);
    max-width: 820px;
    position: relative;
  }
  .commitment-note .commitment-meta {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10.5px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--clay-text);
    margin-bottom: 22px;
    display: block;
  }
  .commitment-note p {
    font-family: 'EB Garamond', serif;
    font-size: 18px;
    line-height: 1.7;
    color: var(--ink);
    margin: 0;
    max-width: 100%;
  }

  /* ----------------------------- Why we built this (founders) */
  .founders { background: var(--cream); }
  .founders .container { max-width: 880px; }
  .founders h2.display { max-width: 100%; }
  .founders p {
    font-family: 'EB Garamond', serif;
    font-size: 19px;
    line-height: 1.66;
    color: var(--ink);
    max-width: 100%;
    margin: 0 0 26px;
  }
  .founders p:last-of-type { margin-bottom: 0; }
  .founders-signoff {
    margin-top: 48px;
    padding-top: 28px;
    border-top: 1px solid var(--ink-line);
  }
  .founders-signoff .who {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 400;
    font-size: 28px;
    line-height: 1.2;
    color: var(--ink);
    display: block;
    margin-bottom: 6px;
  }
  .founders-signoff .what {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10.5px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--ink-soft);
  }

  /* ----------------------------- Beneath the year (depth) */
  .depth { background: var(--paper); }
  .depth .container { max-width: 880px; }
  .depth h2.display { max-width: 100%; margin-bottom: 44px; }
  .depth p {
    font-family: 'EB Garamond', serif;
    font-size: 19px;
    line-height: 1.66;
    color: var(--ink);
    max-width: 100%;
    margin: 0 0 26px;
  }
  .depth p:last-of-type { margin-bottom: 0; }
  .depth .dropcap::first-letter {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    font-size: 5.4em;
    float: left;
    line-height: 0.78;
    margin: 0.06em 0.1em -0.05em 0;
    color: var(--ink);
  }
  .depth-pull {
    margin-top: 40px;
    padding: 32px 0 0;
    border-top: 1px solid var(--ink-line);
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 300;
    font-size: clamp(22px, 2.4vw, 30px);
    line-height: 1.36;
    color: var(--ink);
    max-width: 100%;
    text-align: center;
    position: relative;
  }
  .depth-pull::before {
    content: "";
    display: block;
    width: 24px;
    height: 24px;
    margin: 0 auto 28px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-12 -12 24 24'><g stroke='%23B0876A' stroke-width='0.55' fill='none'><ellipse cx='0' cy='-5.5' rx='2.2' ry='4'/><ellipse cx='0' cy='-5.5' rx='2.2' ry='4' transform='rotate(72)'/><ellipse cx='0' cy='-5.5' rx='2.2' ry='4' transform='rotate(144)'/><ellipse cx='0' cy='-5.5' rx='2.2' ry='4' transform='rotate(216)'/><ellipse cx='0' cy='-5.5' rx='2.2' ry='4' transform='rotate(288)'/><circle r='1' fill='%23B0876A' stroke='none'/></g></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
  }

  /* ----------------------------- Cinematic plate */
  .cinematic {
    width: 100%;
    height: 78vh;
    min-height: 480px;
    background: var(--bone);
    position: relative;
    overflow: hidden;
  }
  .cinematic .img-bg {
    position: absolute;
    inset: -3%;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: var(--bone);
    animation: ken-burns 28s ease-in-out infinite alternate;
    will-change: transform;
  }
  @keyframes ken-burns {
    from { transform: scale(1) translate(0%, 0%); }
    to   { transform: scale(1.08) translate(-1.4%, -0.8%); }
  }
  .cinematic::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(28,28,28,0.05) 0%, rgba(28,28,28,0.18) 100%);
    z-index: 1;
  }
  .cinematic-meta {
    background: var(--cream);
    padding: 14px 64px 0;
    display: flex;
    justify-content: space-between;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--ink-quiet);
  }

  /* ----------------------------- Photo Essay */
  .essay {
    background: var(--paper);
    padding: 140px 0;
  }
  .essay-grid {
    margin-top: 64px;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 24px;
  }
  .plate-essay {
    position: relative;
    overflow: hidden;
  }
  .plate-essay .img {
    width: 100%;
    background: var(--bone) center/cover no-repeat;
    transition: transform 1.2s cubic-bezier(.2,.6,.2,1);
  }
  .plate-essay:hover .img { transform: scale(1.012); }
  .plate-essay .cap {
    margin-top: 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .plate-essay .cap .num {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--ink-quiet);
  }
  .plate-essay .cap .text {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 300;
    font-size: 18px;
    line-height: 1.4;
    color: var(--ink-soft);
    max-width: 100%;
  }

  /* Editorial grid placements */
  .essay-1 { grid-column: 1 / span 5; }
  .essay-1 .img { aspect-ratio: 4 / 5; }
  .essay-2 { grid-column: 7 / span 6; align-self: end; }
  .essay-2 .img { aspect-ratio: 4 / 3; }
  .essay-3 { grid-column: 1 / span 12; margin-top: 48px; }
  .essay-3 .img { aspect-ratio: 21 / 9; }
  .essay-4 { grid-column: 1 / span 4; margin-top: 48px; }
  .essay-4 .img { aspect-ratio: 1 / 1; }
  .essay-5 { grid-column: 6 / span 4; margin-top: 48px; }
  .essay-5 .img { aspect-ratio: 3 / 4; }
  .essay-6 { grid-column: 1 / span 12; margin-top: 48px; }
  .essay-6 .img { aspect-ratio: 21 / 9; }

  .essay-credit {
    margin-top: 80px;
    padding-top: 32px;
    border-top: 1px solid var(--ink-line);
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 300;
    font-size: 16px;
    color: var(--ink-soft);
    text-align: center;
    max-width: 100%;
  }

  /* ----------------------------- Journal (carousel) */
  .journal { background: var(--cream); }
  .journal-carousel-wrap {
    margin-top: 56px;
    position: relative;
  }
  .journal-grid {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    gap: 56px;
    padding-bottom: 28px;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--ink-line) transparent;
  }
  .journal-grid::-webkit-scrollbar { height: 4px; }
  .journal-grid::-webkit-scrollbar-track { background: transparent; }
  .journal-grid::-webkit-scrollbar-thumb { background: var(--ink-line); border-radius: 999px; }
  .entry {
    flex: 0 0 calc((100% - 112px) / 3);
    scroll-snap-align: start;
    cursor: pointer;
    color: inherit;
    text-decoration: none;
    display: block;
  }
  .entry .img {
    aspect-ratio: 4 / 5;
    background: var(--bone) center/cover no-repeat;
    margin-bottom: 28px;
    overflow: hidden;
    transition: opacity 0.5s ease, transform 1.2s cubic-bezier(.2,.6,.2,1);
    will-change: transform;
  }
  .entry:hover .img {
    opacity: 0.94;
    transform: scale(1.012);
  }
  .entry .stamp {
    display: flex;
    justify-content: space-between;
    margin-bottom: 16px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10.5px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--ink-quiet);
  }
  .entry h3 {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 400;
    font-size: 28px;
    line-height: 1.22;
    margin-bottom: 14px;
    color: var(--ink);
    letter-spacing: 0.002em;
    transition: color 0.35s ease;
  }
  .entry:hover h3 { color: var(--teal); }
  .entry p {
    font-family: 'EB Garamond', serif;
    font-size: 17px;
    color: var(--ink-soft);
    line-height: 1.6;
    margin: 0;
    max-width: 100%;
  }
  .journal-nav {
    position: absolute;
    top: 22%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(245, 240, 230, 0.96);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--ink-line);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    font-size: 20px;
    color: var(--ink);
    cursor: pointer;
    z-index: 5;
    transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease, opacity 0.3s ease;
    padding: 0;
    line-height: 1;
  }
  .journal-nav:hover {
    background: var(--ink);
    color: var(--cream);
    transform: translateY(-50%) scale(1.04);
  }
  .journal-nav[disabled] {
    opacity: 0.25;
    cursor: default;
    pointer-events: none;
  }
  .journal-nav.prev { left: -22px; }
  .journal-nav.next { right: -22px; }

  /* ----------------------------- Alumni notes */
  .alumni { background: var(--paper); }
  .alumni-grid {
    margin-top: 56px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
  }
  .alumni-note blockquote {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    font-style: italic;
    font-size: clamp(24px, 2.4vw, 32px);
    line-height: 1.42;
    color: var(--ink);
    border: none;
    padding: 0;
    margin: 0 0 36px;
    max-width: 100%;
    letter-spacing: 0.003em;
  }
  .alumni-note .who {
    padding-top: 22px;
    border-top: 1px solid var(--ink-line);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10.5px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--ink-soft);
  }

  /* ----------------------------- Enquire */
  .enquire {
    background: var(--paper);
    border-top: 1px solid var(--ink-line);
    border-bottom: 1px solid var(--ink-line);
  }
  .enquire .intro { max-width: 760px; }
  .enquire .intro h2 { margin-bottom: 28px; }
  .enquire-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px 64px;
    margin-top: 56px;
    padding: 56px 56px 48px;
    background: var(--cream);
    border: 1px solid var(--ink-line);
    border-radius: 4px;
    position: relative;
  }
  .enquire-form .full { grid-column: 1 / -1; }
  .field { display: flex; flex-direction: column; gap: 12px; position: relative; }
  /* A .field carries display:flex, which would otherwise override the [hidden]
     attribute and leave inactive fields visible (and in the a11y tree). Force
     hidden form sections fully out: no space, no tab stop, no announcement. */
  .enquire-form [hidden] { display: none !important; }
  .field label {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--ink-soft);
  }
  .field input,
  .field select,
  .field textarea {
    font-family: 'EB Garamond', serif;
    font-size: 21px;
    color: var(--ink);
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--ink-line);
    padding: 14px 0 18px;
    outline: none;
    transition: border-color 0.4s ease;
    min-height: 52px;
  }
  .field::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: var(--ink);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.5s cubic-bezier(.2,.6,.2,1);
    pointer-events: none;
  }
  .field:focus-within::after { transform: scaleX(1); }
  .field textarea { resize: vertical; min-height: 140px; line-height: 1.55; }
  .field input::placeholder,
  .field textarea::placeholder { color: var(--ink-quiet); font-style: italic; }

  /* ── On-brand custom dropdown: enhances native <select> + the country combobox ── */
  .field .annum-dd { position: relative; }
  .field select.annum-dd-native { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
  .annum-dd__btn {
    width: 100%; text-align: left; background: transparent; cursor: pointer;
    font-family: 'EB Garamond', serif; font-size: 21px; color: var(--ink);
    border: none; border-bottom: 1px solid var(--ink-line);
    padding: 14px 26px 18px 0; min-height: 52px;
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
  }
  .annum-dd__btn.is-placeholder { color: var(--ink-quiet); font-style: italic; }
  .annum-dd__chev {
    flex: none; width: 9px; height: 9px; margin-bottom: 4px;
    border-right: 1.5px solid var(--ink-soft); border-bottom: 1.5px solid var(--ink-soft);
    transform: rotate(45deg); transition: transform .25s ease;
  }
  .annum-dd__btn[aria-expanded="true"] { border-bottom-color: var(--teal); }
  .annum-dd__btn[aria-expanded="true"] .annum-dd__chev { transform: rotate(-135deg); margin-bottom: -2px; }
  .annum-dd__panel {
    position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 60;
    background: var(--paper); border: 1px solid var(--ink-line); border-radius: 6px;
    box-shadow: 0 18px 46px rgba(28, 28, 28, 0.13);
    padding: 6px; max-height: 286px; overflow-y: auto; overscroll-behavior: contain;
  }
  .annum-dd__panel[hidden] { display: none; }
  .annum-dd__opt {
    font-family: 'EB Garamond', serif; font-size: 17px; line-height: 1.35; color: var(--ink);
    padding: 11px 15px; border-radius: 4px; cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
  }
  .annum-dd__opt.is-active { background: var(--bone); }
  .annum-dd__opt[aria-selected="true"] { color: var(--teal); }
  .annum-dd__empty { padding: 12px 15px; font-family: 'EB Garamond', serif; font-style: italic; color: var(--ink-quiet); }
  @media (max-width: 640px) {
    .annum-dd__btn { font-size: 19px; padding: 12px 26px 14px 0; }
    .annum-dd__opt { font-size: 16px; padding: 12px 14px; }
  }

  .submit-row {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    gap: 32px;
    margin-top: 16px;
    padding-top: 44px;
    border-top: 1px solid var(--ink-line);
  }
  .submit-row .note {
    font-family: 'EB Garamond', serif;
    font-style: italic;
    font-size: 16px;
    line-height: 1.5;
    color: var(--ink-soft);
    max-width: 100%;
    margin: 0;
    text-align: center;
  }
  button.send {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 400;
    font-size: 14px;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    background: var(--ink);
    color: var(--cream);
    border: 1px solid var(--ink);
    padding: 22px 32px;
    padding-left: calc(32px + 0.42em);
    cursor: pointer;
    width: 100%;
    transition: background 0.4s ease, color 0.4s ease, letter-spacing 0.4s ease, transform 0.3s ease;
  }
  button.send:hover {
    background: var(--teal);
    border-color: var(--teal);
    color: var(--cream);
    letter-spacing: 0.5em;
    padding-left: calc(32px + 0.5em);
  }
  button.send:active { transform: translateY(1px); }
  button.send[disabled] { cursor: wait; opacity: 0.7; }
  button.send .send-sending { display: none; }
  button.send.sending .send-label { display: none; }
  button.send.sending .send-sending { display: inline; }

  .honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
  }

  .field label .optional {
    text-transform: none;
    letter-spacing: 0.01em;
    font-style: italic;
    color: var(--ink-quiet);
    margin-left: 4px;
  }

  .field label .optional.req {
    font-style: normal;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.6rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-quiet);
  }
  .field-error {
    margin-top: 7px;
    font-family: 'EB Garamond', serif;
    font-size: 0.86rem;
    line-height: 1.4;
    color: var(--error);
  }
  .field input[aria-invalid="true"],
  .field select[aria-invalid="true"] {
    border-color: var(--error);
  }
  .form-consent {
    grid-column: 1 / -1;
    margin-top: 14px;
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--ink-soft);
  }
  .form-consent a { border-bottom: 1px solid var(--ink-line); }
  .form-consent a:hover { color: var(--ink); }

  .form-alt {
    grid-column: 1 / -1;
    margin-top: 20px;
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 15px;
    color: var(--ink-soft);
    text-align: center;
  }
  .form-alt a { border-bottom: 1px solid var(--ink-line); }
  .form-alt a:hover { color: var(--ink); }

  .form-error {
    grid-column: 1 / -1;
    margin-top: 24px;
    padding: 16px 20px;
    background: var(--bone);
    border-left: 2px solid var(--clay);
    font-family: 'EB Garamond', serif;
    font-style: italic;
    font-size: 15px;
    color: var(--ink);
  }
  .form-error a { border-bottom: 1px solid currentColor; }

  /* ----------------------------- Enquiry confirmation (after submit) */
  .enquire-thanks {
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
    padding: 56px 24px 48px;
  }
  .enquire-thanks .thanks-mark {
    display: block; width: 30px; height: 30px; margin: 0 auto 26px;
    background: center/contain no-repeat url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-12 -12 24 24'><g stroke='%23B0876A' stroke-width='0.55' fill='none'><ellipse cx='0' cy='-5.5' rx='2.2' ry='4'/><ellipse cx='0' cy='-5.5' rx='2.2' ry='4' transform='rotate(72)'/><ellipse cx='0' cy='-5.5' rx='2.2' ry='4' transform='rotate(144)'/><ellipse cx='0' cy='-5.5' rx='2.2' ry='4' transform='rotate(216)'/><ellipse cx='0' cy='-5.5' rx='2.2' ry='4' transform='rotate(288)'/><circle r='1' fill='%23B0876A' stroke='none'/></g></svg>");
  }
  .enquire-thanks h3.display {
    font-style: italic; font-weight: 300;
    font-size: clamp(28px, 3.4vw, 40px); line-height: 1.18; color: var(--ink);
  }
  .enquire-thanks .lead { margin-top: 16px; color: var(--ink-soft); }
  .enquire-thanks .thanks-alt {
    margin-top: 26px;
    font-family: 'IBM Plex Mono', monospace; font-size: 11px;
    letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-quiet);
  }
  .enquire-thanks .thanks-alt a { border-bottom: 1px solid var(--ink-line); }

  /* ----------------------------- What happens next */
  .what-next {
    margin-top: 72px;
    padding-top: 48px;
    border-top: 1px solid var(--ink-line);
  }
  .hero-availability {
    margin-top: 22px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--clay-text);
  }
  .adviser-route {
    margin-top: 56px;
    padding-top: 32px;
    border-top: 1px solid var(--ink-line);
    max-width: 640px;
  }
  .adviser-route-h {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin: 0 0 10px;
  }
  .adviser-route p {
    font-family: 'EB Garamond', serif;
    font-size: 16px;
    line-height: 1.6;
    color: var(--ink-soft);
    margin: 0;
  }

  /* ---- "Ask us one question" — a quiet bridge, softer than the CTA */
  .ask-one { padding: 0 0 96px; }
  .ask-one-inner {
    max-width: 560px;
    margin: 0 auto;
    padding: 40px 0 0;
    border-top: 1px solid var(--ink-line);
    text-align: center;
  }
  .ask-one-eyebrow {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10.5px; letter-spacing: 0.24em; text-transform: uppercase;
    color: var(--clay-text); margin: 0 0 12px;
  }
  .ask-one-h {
    font-family: 'Cormorant Garamond', serif; font-weight: 300;
    font-size: clamp(23px, 3vw, 30px); line-height: 1.2; letter-spacing: 0.01em;
    color: var(--ink); margin: 0 0 12px;
  }
  .ask-one-sub {
    font-family: 'EB Garamond', serif; font-size: 15px; line-height: 1.55;
    color: var(--ink-soft); max-width: 42em; margin: 0 auto 24px;
  }
  .ask-one-privacy {
    font-family: 'EB Garamond', serif; font-size: 12.5px; line-height: 1.5;
    color: var(--ink-quiet); margin: 14px auto 0; max-width: 440px;
  }
  .ask-one-privacy a { color: var(--clay-text); border-bottom: 1px solid var(--ink-line); }
  .ask-one-privacy a:hover { border-color: var(--clay-text); }
  .ask-one-form { display: flex; flex-direction: column; gap: 12px; max-width: 440px; margin: 0 auto; }
  .ask-one-form input[type=email],
  .ask-one-form textarea {
    width: 100%;
    font-family: 'EB Garamond', serif; font-size: 16px; color: var(--ink);
    background: transparent;
    border: 1px solid var(--ink-line);
    padding: 12px 14px; border-radius: 0;
    transition: border-color 0.3s ease;
  }
  .ask-one-form textarea { resize: vertical; min-height: 76px; line-height: 1.45; }
  .ask-one-form input[type=email]:focus,
  .ask-one-form textarea:focus { outline: none; border-color: var(--clay-text); }
  .ask-one-send {
    align-self: center;
    font-family: 'IBM Plex Mono', monospace; font-size: 11px;
    letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink);
    background: transparent; border: 1px solid var(--ink); border-radius: 0;
    padding: 12px 30px; cursor: pointer;
    transition: background-color 0.35s ease, color 0.35s ease;
  }
  .ask-one-send:hover, .ask-one-send:focus-visible { background: var(--ink); color: var(--cream); }
  .ask-one-send .s-sending { display: none; }
  .ask-one-form.is-sending .ask-one-send .s-label { display: none; }
  .ask-one-form.is-sending .ask-one-send .s-sending { display: inline; }
  .ask-one-thanks {
    font-family: 'Cormorant Garamond', serif; font-style: italic;
    font-size: 20px; line-height: 1.4; color: var(--ink); margin: 8px auto 0; max-width: 40em;
  }
  .ask-one-error {
    font-family: 'EB Garamond', serif; font-size: 15px; color: var(--clay-text); margin: 8px auto 0;
  }
  @media (max-width: 520px) {
    .ask-one { padding-bottom: 72px; }
    .ask-one-inner { padding-top: 32px; }
  }

  /* ---- Journey arc — a restrained scroll-linked sequence ---------- */
  .journey-arc {
    list-style: none;
    margin: 40px 0 0;
    padding: 0 0 0 40px;
    position: relative;
  }
  .journey-arc::before,
  .journey-arc::after {
    content: '';
    position: absolute;
    left: 12px; top: 10px; bottom: 10px;
    width: 1px;
  }
  .journey-arc::before { background: var(--ink-line); }
  .journey-arc::after {
    background: var(--clay-text);
    transform: scaleY(var(--draw, 1));
    transform-origin: top center;
    transition: transform 0.2s linear;
  }
  .jstage {
    position: relative;
    padding: 0 0 34px;
  }
  .jstage:last-child { padding-bottom: 0; }
  /* dot sits on the rail — rail is 12px from the UL edge; stages are
     indented by the UL's 40px padding, so in stage coordinates the rail
     sits at -28px. (Regression fix, July 2026 design pass.) */
  .jstage::before {
    content: '';
    position: absolute;
    left: -28px; top: 8px;
    width: 9px; height: 9px; margin-left: -4px;
    border-radius: 50%;
    background: var(--bone);
    border: 1px solid var(--ink-line);
    transition: background-color 0.5s ease, border-color 0.5s ease, transform 0.5s ease;
    z-index: 1;
  }
  .jstage.is-active::before {
    background: var(--clay-text);
    border-color: var(--clay-text);
    transform: scale(1.2);
  }
  .jnum {
    display: block;
    font-family: 'Cormorant Garamond', serif;
    font-size: 14px; letter-spacing: 0.12em;
    color: var(--ink-quiet);
    margin-bottom: 2px;
    transition: color 0.5s ease;
  }
  .jstage.is-active .jnum { color: var(--clay-text); }
  .jname {
    display: block;
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    font-size: clamp(20px, 2.4vw, 26px);
    line-height: 1.15;
    color: var(--ink);
  }
  .jline {
    display: block;
    margin-top: 4px;
    font-family: 'EB Garamond', serif;
    font-size: 16px; line-height: 1.5;
    color: var(--ink-soft);
    max-width: 34em;
  }
  @media (prefers-reduced-motion: reduce) {
    .journey-arc::after { transform: none; transition: none; }
    .jstage::before, .jnum { transition: none; }
  }
  @media (max-width: 520px) {
    .journey-arc { padding-left: 34px; }
    .journey-arc::before, .journey-arc::after { left: 10px; }
    .jstage::before { left: -24px; }
  }

  /* ---- Homepage "A season or a year?" — a quiet editorial reveal --- */
  .season-year { background: var(--bone); }
  .sy-choices {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 0; margin-top: 40px;
    border-top: 1px solid var(--ink-line);
  }
  .sy-choice {
    display: block; text-align: left;
    padding: 30px 32px 30px 0;
    background: transparent; border: 0; border-bottom: 1px solid transparent;
    cursor: pointer; color: var(--ink);
    transition: border-color 0.4s ease, opacity 0.4s ease;
    opacity: 0.62;
  }
  .sy-choice + .sy-choice { padding-left: 32px; border-left: 1px solid var(--ink-line); }
  .sy-choice:hover { opacity: 0.85; }
  .sy-choice[aria-selected="true"] { opacity: 1; border-bottom-color: var(--clay-text); }
  .sy-num {
    display: block;
    font-family: 'Cormorant Garamond', serif; font-weight: 300;
    font-size: clamp(26px, 3.4vw, 38px); line-height: 1.05; letter-spacing: 0.01em;
    color: var(--ink);
  }
  .sy-cap {
    display: block; margin-top: 8px;
    font-family: 'EB Garamond', serif; font-size: 15.5px; line-height: 1.5;
    color: var(--ink-soft); max-width: 26em;
  }
  .sy-panels { margin-top: 4px; }
  .sy-panel {
    padding: 30px 0 4px;
    animation: syReveal 0.5s ease both;
  }
  .sy-panel[hidden] { display: none; }
  @keyframes syReveal { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
  .sy-facts {
    display: grid; grid-template-columns: 1fr 1fr; gap: 20px 40px;
    margin: 0 0 22px; max-width: 620px;
  }
  .sy-facts > div { display: flex; flex-direction: column; gap: 3px; }
  .sy-facts dt {
    font-family: 'IBM Plex Mono', monospace; font-size: 10px;
    letter-spacing: 0.2em; text-transform: uppercase; color: var(--clay-text);
  }
  .sy-facts dd {
    margin: 0; font-family: 'EB Garamond', serif; font-size: 16px; line-height: 1.45; color: var(--ink);
  }
  .sy-panel .cta-link { display: inline-block; margin-top: 2px; }
  /* The Atelier — a single card below the three-stay comparison. */
  .offering-atelier { margin-top: clamp(52px, 6.5vw, 84px); }
  .offering-atelier .movement { padding-bottom: 0; border-bottom: 0; }
  @media (prefers-reduced-motion: reduce) {
    .sy-choice { transition: none; }
    .sy-panel { animation: none; }
  }
  @media (max-width: 640px) {
    .sy-choices { grid-template-columns: 1fr; }
    .sy-choice { padding: 24px 0; }
    .sy-choice + .sy-choice { padding-left: 0; border-left: 0; border-top: 1px solid var(--ink-line); }
    .sy-facts { grid-template-columns: 1fr; gap: 16px; }
  }

  /* ---- Micro-interactions (restrained, consistent) --------------- */
  /* Link rules draw on keyboard focus as well as hover */
  .cta-link:focus-visible::after { transform: scaleX(1); }
  .cta-link:focus-visible { outline: none; }
  .nav .links a:focus-visible::after { transform: scaleX(1); }
  /* The footer seal settles by a degree or two on hover
     (the hero seal is intentionally locked by its intro animation) */
  .foot-seal img {
    transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
    transform-origin: center center;
  }
  .foot-seal:hover img { transform: rotate(1.5deg); }
  /* Enquiry conditional questions fade gently as they change */
  @keyframes fieldReveal { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
  .enquire-form .atelier-only:not([hidden]),
  .enquire-form .stay-only:not([hidden]) { animation: fieldReveal 0.4s ease both; }
  /* The stamp resolves beside a successful submission */
  @keyframes stampResolve { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: none; } }
  #enquire-thanks:not([hidden]) .thanks-mark { animation: stampResolve 0.9s ease 0.05s both; }
  @media (prefers-reduced-motion: reduce) {
    .foot-seal img { transition: none; }
    .foot-seal:hover img { transform: none; }
    .enquire-form .atelier-only:not([hidden]),
    .enquire-form .stay-only:not([hidden]),
    #enquire-thanks:not([hidden]) .thanks-mark { animation: none; }
  }
  .what-next-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 48px;
    flex-wrap: wrap;
    gap: 12px;
  }
  .what-next-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 56px;
    counter-reset: step;
  }
  .next-step {
    position: relative;
    padding-top: 24px;
  }
  .next-step::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-12 -12 24 24'><g stroke='%23B0876A' stroke-width='0.55' fill='none'><ellipse cx='0' cy='-5.5' rx='2.2' ry='4'/><ellipse cx='0' cy='-5.5' rx='2.2' ry='4' transform='rotate(72)'/><ellipse cx='0' cy='-5.5' rx='2.2' ry='4' transform='rotate(144)'/><ellipse cx='0' cy='-5.5' rx='2.2' ry='4' transform='rotate(216)'/><ellipse cx='0' cy='-5.5' rx='2.2' ry='4' transform='rotate(288)'/><circle r='1' fill='%23B0876A' stroke='none'/></g></svg>");
    background-repeat: no-repeat;
    background-position: left center;
    background-size: contain;
  }
  .next-step .next-ord {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    font-style: italic;
    font-size: 36px;
    line-height: 1;
    color: var(--clay-text);
    margin-bottom: 26px;
    letter-spacing: 0;
  }
  .next-step h4 {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 400;
    font-size: 26px;
    line-height: 1.22;
    margin-bottom: 16px;
    color: var(--ink);
    letter-spacing: 0.002em;
  }
  .next-step p {
    font-family: 'EB Garamond', serif;
    font-size: 17px;
    line-height: 1.62;
    color: var(--ink-soft);
    margin: 0;
    max-width: 100%;
  }

  /* ----------------------------- Footer */
  footer {
    background: var(--cream);
    color: var(--ink);
    padding: 80px 64px 36px;
    border-top: 1px solid var(--ink-line);
  }
  .endpaper {
    text-align: center;
    padding: 0 32px 64px;
    border-bottom: 1px solid var(--ink-line);
    margin-bottom: 48px;
  }
  .endpaper .label {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--ink-quiet);
    margin-bottom: 28px;
  }
  .endpaper .line {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 300;
    font-size: clamp(24px, 2.6vw, 34px);
    line-height: 1.32;
    color: var(--ink);
    max-width: 600px;
    margin: 0 auto;
  }
  .foot-mark-row {
    text-align: center;
    padding-bottom: 56px;
  }
  .foot-mark {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    font-size: clamp(20px, 4vw, 42px);
    letter-spacing: 0.55em;
    padding-left: 0.55em;
    text-transform: uppercase;
    line-height: 1;
    color: var(--ink);
    margin-bottom: 22px;
  }
  .foot-mark-row::after {
    content: "";
    display: block;
    width: 24px;
    height: 24px;
    margin: 22px auto 22px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-12 -12 24 24'><g stroke='%23B0876A' stroke-width='0.55' fill='none'><ellipse cx='0' cy='-5.5' rx='2.2' ry='4'/><ellipse cx='0' cy='-5.5' rx='2.2' ry='4' transform='rotate(72)'/><ellipse cx='0' cy='-5.5' rx='2.2' ry='4' transform='rotate(144)'/><ellipse cx='0' cy='-5.5' rx='2.2' ry='4' transform='rotate(216)'/><ellipse cx='0' cy='-5.5' rx='2.2' ry='4' transform='rotate(288)'/><circle r='1' fill='%23B0876A' stroke='none'/></g></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
  }
  .foot-tag {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 13px;
    letter-spacing: 0.5em;
    text-transform: uppercase;
    color: var(--ink-soft);
    padding-left: 0.5em;
  }
  .foot-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 56px;
    padding: 56px 0;
    border-top: 1px solid var(--ink-line);
    border-bottom: 1px solid var(--ink-line);
    text-align: center;
  }
  .foot-col .foot-h {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10.5px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--ink-quiet);
    margin-bottom: 18px;
    font-weight: 400;
  }
  .foot-col a, .foot-col p {
    display: block;
    font-family: 'EB Garamond', serif;
    font-size: 17px;
    color: var(--ink);
    margin-bottom: 10px;
    max-width: 100%;
    transition: color 0.3s ease;
  }
  .foot-col a:hover { color: var(--clay-text); }

  .colophon {
    margin-top: 36px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--ink-quiet);
  }

  /* Letter end frangipani */
  .letter-end {
    text-align: center;
    margin-top: 56px;
    color: var(--clay-text);
  }
  .letter-end svg {
    width: 22px;
    height: 22px;
  }

  /* ----------------------------- Reveal-on-scroll */
  .reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.85s cubic-bezier(.2,.6,.2,1), transform 0.85s cubic-bezier(.2,.6,.2,1);
  }
  .reveal.in { opacity: 1; transform: none; }
  .reveal.delay-1 { transition-delay: 0.1s; }
  .reveal.delay-2 { transition-delay: 0.22s; }
  .reveal.delay-3 { transition-delay: 0.34s; }

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

  /* ----------------------------- Print stylesheet */
  @media print {
    @page { margin: 18mm 16mm; }
    *, *::before, *::after {
      animation: none !important;
      transition: none !important;
      box-shadow: none !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
    }
    body {
      background: #fff !important;
      color: #000 !important;
      font-size: 10pt;
      line-height: 1.55;
    }
    body::before { display: none !important; }
    .nav, .scroll-progress, .chapter-folio, .bali-now, .cursor-dot,
    .interlude, button.send, .submit-row, .lightbox, .what-next, .form-alt {
      display: none !important;
    }
    .commitment-note { background: #f5f5f5 !important; border-left-color: #888 !important; padding: 12pt 14pt !important; }
    .depth-pull { text-align: left !important; }
    .depth-pull::before { display: none !important; }
    .reveal { opacity: 1 !important; transform: none !important; }
    .hero {
      min-height: auto;
      background: #fff !important;
      color: #000 !important;
      page-break-after: always;
      padding: 0 0 24pt;
    }
    .hero::before, .hero::after { display: none !important; }
    .hero-mark h1 { color: #000 !important; font-size: 64pt; }
    .hero-mark .rule { background: #000 !important; }
    .hero-mark .tagline, .hero-foot .meta, .hero-top .meta { color: #555 !important; }
    section { padding: 24pt 0; page-break-inside: avoid; }
    .pull { background: #fff !important; color: #000 !important; min-height: auto; padding: 24pt 0; page-break-inside: avoid; }
    .pull blockquote { color: #000 !important; font-size: 22pt; }
    .pull-mark { background: #888 !important; }
    .numbers { background: #fff !important; color: #000 !important; }
    .numbers h2.display, .numbers .meta, .numbers .meta.faint, .numbers-cell .figure,
    .numbers-cell .descriptor, .numbers-coda { color: #000 !important; }
    .numbers-cell .ord { color: #555 !important; }
    .single-plate, .cinematic, .plate-essay .img, .place .image, .entry .img {
      filter: grayscale(100%) contrast(0.9);
    }
    h1, h2, h3, h4, h5 { page-break-after: avoid; }
    p, blockquote { page-break-inside: avoid; orphans: 3; widows: 3; }
    a { color: inherit !important; text-decoration: none !important; }
    .colophon, .endpaper { color: #555 !important; }
    .foot-mark, .foot-tag { color: #000 !important; }
    .container, .container.narrow, .container.medium, .container.wide {
      max-width: 100% !important;
      padding: 0 !important;
    }
  }

  /* ----------------------------- Responsive */
  @media (max-width: 1024px) {
    .container { padding: 0 40px; }
    section { padding: 110px 0; }
    .nav { padding: 22px 32px; }
    .nav.scrolled { padding: 14px 32px; }
    .hero { padding: 110px 32px 36px; }
    .interlude { padding: 56px 32px; }
    .movement { grid-template-columns: 1fr; gap: 28px; padding: 56px 0; }
    .movement .roman { padding-top: 0; }
    .movement-name h3 { font-size: 44px; }
    .numbers-grid { grid-template-columns: repeat(2, 1fr); }
    .numbers-cell { padding: 44px 24px 44px 0 !important; border-right: 1px solid var(--rule-cream) !important; border-bottom: 1px solid var(--rule-cream) !important; }
    .numbers-cell:nth-child(2n) { border-right: none !important; padding-right: 0 !important; }
    .numbers-cell:nth-child(2n+1) { padding-left: 0 !important; }
    .numbers-cell:not(:nth-child(2n+1)) { padding-left: 24px !important; }
    .numbers-cell:nth-last-child(-n+2) { border-bottom: none !important; padding-bottom: 0 !important; padding-top: 44px !important; }
    .numbers-cell .figure { font-size: clamp(25px, 3.5vw, 32px); min-height: 2.32em; }
    .place .twocol { grid-template-columns: 1fr; gap: 56px; }
    .bali-map { margin-top: 56px; padding-top: 36px; }
    .essay { padding: 110px 0; }
    .essay-grid { grid-template-columns: repeat(6, 1fr); gap: 18px; }
    .essay-1 { grid-column: 1 / span 6; }
    .essay-2 { grid-column: 1 / span 6; margin-top: 36px; }
    .essay-3 { grid-column: 1 / span 6; margin-top: 36px; }
    .essay-4 { grid-column: 1 / span 6; margin-top: 36px; }
    .essay-5 { grid-column: 1 / span 6; margin-top: 36px; }
    .essay-6 { grid-column: 1 / span 6; margin-top: 36px; }
    .entry { flex: 0 0 calc((100% - 56px) / 2); }
    .journal-nav { width: 40px; height: 40px; }
    .journal-nav.prev { left: -8px; }
    .journal-nav.next { right: -8px; }
    .alumni-grid { grid-template-columns: 1fr; gap: 56px; }
    .pull { padding: 110px 32px; min-height: 56vh; }
    .commitment-note { padding: 44px 36px 40px; margin-top: 72px; }
    .what-next-steps { gap: 48px; }
    .single-plate-meta, .cinematic-meta { padding: 14px 40px 0; }
    .cinematic { height: 60vh; }
    .in-residence { padding: 88px 0; }
    .foot-grid { grid-template-columns: 1fr; gap: 36px; }
    footer { padding: 56px 32px 28px; }
  }
  @media (max-width: 640px) {
    body { font-size: 17px; }
    .container { padding: 0 24px; }
    section { padding: 80px 0; }
    .nav { padding: 18px 24px; }
    .nav.scrolled { padding: 12px 24px; }
    .nav .mark { font-size: 11px; letter-spacing: 0.4em; padding-left: 0.4em; }
    .nav-menu { display: block; }
    .hero { padding: 96px 24px 36px; min-height: 100vh; min-height: 100svh; }
    .hero-mark { margin-top: 0; }
    .hero-mark h1 { font-size: clamp(18px, 7.2vw, 30px); letter-spacing: 0.45em; padding-left: 0.45em; }
    .hero-mark .tagline { letter-spacing: 0.4em; padding-left: 0.4em; font-size: 11px; }
    .hero-mark .rule { width: 64px; margin: 32px auto 22px; }
    .hero-top, .hero-foot { gap: 12px; }
    .hero-top .meta, .hero-foot .meta { font-size: 9.5px; letter-spacing: 0.22em; }
    .interlude { padding: 48px 24px; }
    .interlude .line { font-size: 24px; }
    .prologue .opener { font-size: 26px; }
    .prologue p { font-size: 17px; }
    .dropcap::first-letter { font-size: 4em; }
    .signature .who { font-size: 36px; }
    .single-plate { aspect-ratio: 4 / 3; }
    .movement { padding: 44px 0; }
    .movement .roman { font-size: 12px; }
    .movement-name h3 { font-size: 36px; }
    .movement-copy p { font-size: 17px; }
    .movement-copy .by { font-size: 16px; }
    .numbers-grid { grid-template-columns: 1fr; }
    .numbers { padding: 96px 0; }
    .numbers-cell { padding: 36px 0 !important; border-right: none !important; border-bottom: 1px solid var(--rule-cream) !important; padding-left: 0 !important; }
    .numbers-cell:not(:nth-child(2n+1)) { padding-left: 0 !important; padding-right: 0 !important; }
    .numbers-cell:last-child { border-bottom: none !important; }
    .numbers-cell .figure { font-size: clamp(26px, 6vw, 34px); min-height: 0; margin-bottom: 12px; }
    .numbers-coda { margin-top: 56px; padding-top: 28px; font-size: 20px; }
    .pull { padding: 80px 24px; min-height: auto; }
    .pull blockquote { font-size: 26px; line-height: 1.28; }
    .commitment-note { padding: 32px 24px 28px; margin-top: 56px; }
    .commitment-note p { font-size: 16px; }
    .next-step .next-ord { font-size: 30px; margin-bottom: 18px; }
    .next-step h4 { font-size: 22px; }
    .depth .dropcap::first-letter { font-size: 4em; }
    .depth-pull { font-size: 19px; margin-top: 36px; padding-top: 28px; }
    .depth-pull::before { margin-bottom: 22px; }
    .pull-mark { margin: 0 auto 36px; }
    .pull-mark.bottom { margin: 36px auto 0; }
    .place .text p { font-size: 17px; }
    .essay-grid { grid-template-columns: 1fr; gap: 16px; }
    .essay-1, .essay-2, .essay-3, .essay-4, .essay-5, .essay-6 { grid-column: 1; margin-top: 36px; }
    .essay-1 { margin-top: 0; }
    .plate-essay .img { aspect-ratio: 4 / 5 !important; }
    .essay-3 .img, .essay-6 .img { aspect-ratio: 16 / 10 !important; }
    .plate-essay .cap .text { font-size: 16px; }
    .entry h3 { font-size: 24px; }
    .entry { flex: 0 0 calc(100% - 32px); }
    .journal-grid { gap: 32px; }
    .journal-nav { display: none; }
    .alumni-note blockquote { font-size: 21px; }
    .in-residence { padding: 88px 0; }
    .in-residence .line { font-size: 22px; }
    .enquire-form { grid-template-columns: 1fr; gap: 36px; padding: 36px 28px 32px; }
    .field input, .field select, .field textarea { font-size: 19px; padding: 12px 0 14px; }
    .submit-row { gap: 22px; padding-top: 32px; }
    button.send {
      width: 100%;
      padding: 20px 24px;
      padding-left: calc(24px + 0.42em);
      font-size: 12px;
    }
    button.send:hover {
      padding-left: calc(24px + 0.5em);
    }
    .foot-mark { font-size: 28px; letter-spacing: 0.4em; padding-left: 0.4em; }
    .foot-tag { font-size: 10px; letter-spacing: 0.4em; padding-left: 0.4em; }
    .endpaper { padding-bottom: 56px; }
    .endpaper .line { font-size: 22px; }
    .colophon { justify-content: flex-start; flex-direction: column; gap: 8px; }
    .single-plate-meta, .cinematic-meta { padding: 14px 24px 0; flex-direction: column; gap: 4px; align-items: flex-start; }
    .chapter-folio, .bali-now { display: none; }
    .essay-credit { font-size: 14px; margin-top: 56px; }
    .what-next { margin-top: 64px; padding-top: 40px; }
    .what-next-steps { grid-template-columns: 1fr; gap: 36px; }
    .lightbox { padding: 24px; }
    .lightbox-img { height: 60vh; }
    .lightbox-caption { font-size: 15px; margin-top: 20px; }
    .lightbox-close { top: 16px; right: 16px; width: 36px; height: 36px; font-size: 18px; }
    /* Disable hover-driven motion on touch devices */
    .plate-essay:hover .img { transform: none; }
    .entry:hover .img { opacity: 1; }
  }
  @media (max-width: 380px) {
    body { font-size: 16px; }
    .container { padding: 0 20px; }
    .nav { padding: 16px 20px; }
    .hero { padding: 88px 20px 28px; }
    .hero-mark h1 { font-size: clamp(16px, 6.4vw, 22px); letter-spacing: 0.4em; padding-left: 0.4em; }
    .hero-mark .tagline { font-size: 10px; letter-spacing: 0.32em; padding-left: 0.32em; }
    .hero-mark .rule { width: 48px; }
    .prologue .opener { font-size: 22px; }
    .dropcap::first-letter { font-size: 3.6em; }
    .movement-name h3 { font-size: 30px; }
    .pull blockquote { font-size: 24px; }
    .numbers-cell .figure { font-size: clamp(24px, 6.5vw, 32px); min-height: 0; }
    .alumni-note blockquote { font-size: 19px; }
    .in-residence .line { font-size: 19px; }
    .interlude .line { font-size: 21px; }
  }
  @media (max-width: 1024px) and (min-width: 641px) {
    .chapter-folio {
      bottom: 24px;
      left: 24px;
      padding: 9px 14px;
      gap: 10px;
    }
    .chapter-folio .name { font-size: 13px; }
    .bali-now {
      bottom: 24px;
      right: 24px;
      padding: 10px 16px;
      gap: 10px;
    }
    .bali-now .text { font-size: 13px; }
  }

  /* ============================================================
     Interior pages — product tiers & Place (Stage 3)
     Reuses the existing tokens and type system; adds only the
     layout patterns these pages need.
     ============================================================ */
  .page-hero { padding: 184px 0 96px; background: var(--cream); }
  .page-hero .eyebrow { display: block; margin-bottom: 30px; }
  .page-hero h1.display {
    font-size: clamp(40px, 6vw, 84px);
    font-weight: 300;
    line-height: 1.04;
    letter-spacing: 0.002em;
    max-width: 15ch;
    margin-bottom: 36px;
  }
  .page-hero .lead { margin-bottom: 0; max-width: 660px; }

  .page-section { background: var(--cream); }
  .page-prose p { font-size: 19px; }
  .page-prose .dropcap::first-letter {
    float: left;
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    font-size: 5.2em;
    line-height: 0.78;
    padding: 0.04em 0.12em 0 0;
    color: var(--ink);
  }

  /* Weighted single image */
  .page-figure { margin: 72px 0 0; }
  .page-figure .image {
    width: 100%;
    aspect-ratio: 16 / 9;
    background-size: cover;
    background-position: center;
    background-color: var(--bone);
  }
  .page-figure.portrait .image { aspect-ratio: 4 / 5; }
  .page-figure .image-meta { margin-top: 14px; }

  /* Feature row: prose + image, alternating */
  .feature { display: grid; grid-template-columns: 1fr 1fr; gap: 96px; align-items: center; }
  .feature + .feature { margin-top: 128px; }
  .feature.flip .feature-text { order: 2; }
  .feature .image {
    width: 100%;
    aspect-ratio: 4 / 5;
    background-size: cover;
    background-position: center;
    background-color: var(--bone);
  }

  /* "What is held" — inclusions list */
  .held { border-top: 1px solid var(--ink-line); margin-top: 8px; }
  .held .row {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 48px;
    padding: 30px 0;
    border-bottom: 1px solid var(--ink-line);
    align-items: baseline;
  }
  .held .row .k {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10.5px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--clay-text);
  }
  .held .row .v { margin: 0; max-width: 640px; color: var(--ink-soft); }

  /* Teal band — reuses the dark register of the numbers section */
  .band-teal { background: var(--teal); color: var(--cream); }
  .band-teal .section-head::before { background: var(--rule-cream-strong); }
  .band-teal .meta { color: rgba(245, 240, 230, 0.72); }
  .band-teal .meta.faint { color: rgba(245, 240, 230, 0.5); }
  .band-teal h2.display, .band-teal h3.display { color: var(--cream); }
  .band-teal .lead { color: rgba(245, 240, 230, 0.92); }
  .band-teal p { color: rgba(245, 240, 230, 0.82); }
  .band-teal .held { border-top-color: var(--rule-cream); }
  .band-teal .held .row { border-bottom-color: var(--rule-cream); }
  .band-teal .held .row .v { color: rgba(245, 240, 230, 0.82); }

  /* Quiet call to action */
  .page-cta { background: var(--cream); text-align: center; }
  .page-cta h2.display { margin: 0 auto 20px; max-width: 18ch; }
  .page-cta p { margin: 0 auto 36px; max-width: 540px; color: var(--ink-soft); }
  .cta-link {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--ink);
    border-bottom: 1px solid var(--ink-line);
    padding-bottom: 6px;
    transition: border-color 0.4s ease;
  }
  .cta-link:hover { border-bottom-color: var(--ink); }

  /* Sibling-page links at the foot of a tier page */
  .also { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin-top: 44px; }
  .also a {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--ink-quiet);
    border: 1px solid var(--ink-line);
    border-radius: 999px;
    padding: 9px 18px;
    transition: color 0.4s ease, border-color 0.4s ease;
  }
  .also a:hover { color: var(--ink); border-color: var(--ink); }

  @media (max-width: 820px) {
    .page-hero { padding: 132px 0 72px; }
    .feature, .feature.flip .feature-text { grid-template-columns: 1fr; gap: 40px; order: 0; }
    .feature + .feature { margin-top: 80px; }
    /* Stacked full-width portraits are too tall on a phone — go landscape */
    .feature .image { aspect-ratio: 3 / 2; }
    .held .row { grid-template-columns: 1fr; gap: 8px; }
  }

  /* Placeholder plate — an intentional toned panel until the shoot is in.
     Set the label with data-plate. Swap for a real background-image later. */
  .image.ph {
    background: linear-gradient(135deg, var(--bone) 0%, var(--paper) 60%, var(--sand) 140%);
    position: relative;
  }
  .image.ph::after {
    content: attr(data-plate);
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 12%;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--ink-quiet);
  }
  .band-teal .image.ph {
    background: linear-gradient(135deg, var(--teal-deep) 0%, var(--teal) 70%);
  }
  .band-teal .image.ph::after { color: rgba(245, 240, 230, 0.5); }

  /* Home movement → tier-page link */
  .movement-more { display: inline-block; margin-top: 22px; }

  /* ============================================================
     Journal — article pages & index (Stage 4)
     Component styles only; base reset/body/grain come from above.
     ============================================================ */
  .article-hero {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: var(--bone) center / cover no-repeat;
    max-height: 76vh;
  }
  .article-content { padding: 72px 64px 84px; background: var(--cream); position: relative; z-index: 2; }
  .container-narrow { max-width: 740px; margin: 0 auto; }

  .article-meta {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10.5px; letter-spacing: 0.28em; text-transform: uppercase;
    color: var(--clay-text); margin-bottom: 30px;
    display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
  }
  .article-meta time, .article-meta .issue { color: var(--clay-text); }
  .article-meta .dot { color: var(--ink-quiet); }

  h1.article-title {
    font-family: 'Cormorant Garamond', serif; font-weight: 300;
    font-size: clamp(34px, 4.6vw, 54px); line-height: 1.08; letter-spacing: 0.002em;
    margin-bottom: 34px; color: var(--ink);
  }
  .article-lead {
    font-family: 'Cormorant Garamond', serif; font-weight: 300;
    font-size: clamp(20px, 2.2vw, 26px); line-height: 1.42; letter-spacing: 0.005em;
    margin-bottom: 46px; color: var(--ink-soft);
    padding-bottom: 34px; border-bottom: 1px solid var(--ink-line);
  }

  .article-body p { font-family: 'EB Garamond', serif; font-size: 19px; line-height: 1.7; color: var(--ink); margin-bottom: 26px; max-width: 100%; }
  .article-body p strong { font-family: 'Cormorant Garamond', serif; font-weight: 500; font-size: 22px; color: var(--ink); }
  .article-body p em { font-style: italic; }
  .article-body a { border-bottom: 1px solid var(--ink-line); transition: border-color 0.3s ease; }
  .article-body a:hover { border-bottom-color: var(--ink); }
  .article-body h2 {
    font-family: 'Cormorant Garamond', serif; font-weight: 400;
    font-size: clamp(24px, 2.8vw, 32px); line-height: 1.24; letter-spacing: 0.002em;
    margin: 54px 0 22px; color: var(--ink);
  }
  .article-body h3 {
    font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 400;
    font-size: 22px; line-height: 1.3; margin: 40px 0 16px; color: var(--ink);
  }

  /* Pull quote — works for .pull and Markdown blockquotes.
     NB: reset the full-screen `.pull` styles (dark bg, 60vh, flex) that would
     otherwise leak in and render the quote as a black box with hidden text. */
  .article-body .pull, .article-body blockquote {
    display: block; background: none; min-height: 0;
    font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 300;
    font-size: clamp(22px, 2.2vw, 26px); line-height: 1.42; color: var(--ink-soft);
    border-top: 1px solid var(--ink-line); border-bottom: 1px solid var(--ink-line);
    padding: 32px 0; margin: 48px 0; text-align: center; position: relative;
  }
  .article-body blockquote p { font: inherit; color: inherit; margin: 0; max-width: 100%; }
  .article-body .pull::before, .article-body blockquote::before {
    content: ""; display: block; width: 22px; height: 22px; margin: 0 auto 24px;
    background: center/contain no-repeat url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-12 -12 24 24'><g stroke='%23B0876A' stroke-width='0.55' fill='none'><ellipse cx='0' cy='-5.5' rx='2.2' ry='4'/><ellipse cx='0' cy='-5.5' rx='2.2' ry='4' transform='rotate(72)'/><ellipse cx='0' cy='-5.5' rx='2.2' ry='4' transform='rotate(144)'/><ellipse cx='0' cy='-5.5' rx='2.2' ry='4' transform='rotate(216)'/><ellipse cx='0' cy='-5.5' rx='2.2' ry='4' transform='rotate(288)'/><circle r='1' fill='%23B0876A' stroke='none'/></g></svg>");
  }

  /* Marginalia sidenotes */
  .sidenote {
    float: right; clear: right; width: 220px;
    margin: 0.35em -252px 1.6em 24px; padding-left: 18px;
    border-left: 1px solid var(--clay);
    font-family: 'EB Garamond', serif; font-style: italic; font-size: 14.5px;
    line-height: 1.55; color: var(--ink-soft); letter-spacing: 0.002em;
  }
  .sidenote strong {
    display: block; margin-bottom: 4px;
    font-family: 'IBM Plex Mono', monospace; font-style: normal; font-weight: 400;
    font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--clay-text);
  }
  .sidenote cite { font-style: italic; font-family: 'Cormorant Garamond', serif; font-size: 15px; color: var(--ink); }
  @media (max-width: 1180px) {
    .sidenote { display: block; float: none; clear: none; width: auto; margin: 26px 0; padding: 4px 0 4px 18px; font-size: 15px; }
  }

  .article-end {
    margin-top: 54px; text-align: center;
    font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 20px; color: var(--ink-quiet);
  }
  .article-end::before {
    content: ""; display: block; width: 22px; height: 22px; margin: 0 auto 18px;
    background: center/contain no-repeat url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-12 -12 24 24'><g stroke='%23B0876A' stroke-width='0.55' fill='none'><ellipse cx='0' cy='-5.5' rx='2.2' ry='4'/><ellipse cx='0' cy='-5.5' rx='2.2' ry='4' transform='rotate(72)'/><ellipse cx='0' cy='-5.5' rx='2.2' ry='4' transform='rotate(144)'/><ellipse cx='0' cy='-5.5' rx='2.2' ry='4' transform='rotate(216)'/><ellipse cx='0' cy='-5.5' rx='2.2' ry='4' transform='rotate(288)'/><circle r='1' fill='%23B0876A' stroke='none'/></g></svg>");
  }

  /* Opening drop cap for journal articles */
  .article-body .dropcap::first-letter {
    font-size: 4.05em; line-height: 0.7;
    margin: 0.04em 0.11em -0.04em 0; color: var(--ink);
  }

  /* Related + journal index cards */
  .related { padding: 76px 64px; background: var(--paper); border-top: 1px solid var(--ink-line); border-bottom: 1px solid var(--ink-line); }
  .related-inner { max-width: 1240px; margin: 0 auto; }
  .related-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 46px; flex-wrap: wrap; gap: 12px; }
  .related-all { margin-top: 40px; max-width: 100%; }
  .related-grid, .journal-index { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; }
  .journal-theme { margin-top: 84px; }
  .journal-theme:first-of-type { margin-top: 60px; }
  .related-entry { cursor: pointer; color: inherit; display: block; }
  .related-entry .img { aspect-ratio: 4 / 5; background: var(--bone) center / cover no-repeat; margin-bottom: 22px; overflow: hidden; transition: opacity 0.5s ease, transform 1.2s cubic-bezier(.2,.6,.2,1); }
  .related-entry:hover .img { opacity: 0.94; transform: scale(1.012); }
  .related-entry .stamp { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 14px; font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-quiet); }
  .related-entry .entry-title { font-family: 'Cormorant Garamond', serif; font-weight: 400; font-size: 22px; line-height: 1.24; color: var(--ink); letter-spacing: 0.002em; transition: color 0.35s ease; }
  .related-entry:hover .entry-title { color: var(--teal); }
  .journal-index .related-entry .entry-sum { font-family: 'EB Garamond', serif; font-size: 16px; line-height: 1.5; color: var(--ink-soft); margin-top: 12px; max-width: 100%; }

  /* Journal article CTA — the dark signature band */
  .article-cta { padding: 96px 64px; background: var(--ink); color: var(--cream); text-align: center; }
  .article-cta .meta { font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: 0.32em; text-transform: uppercase; color: rgba(245,240,230,0.5); margin-bottom: 28px; }
  .article-cta::before {
    content: ""; display: block; width: 24px; height: 24px; margin: 0 auto 36px;
    background: center/contain no-repeat url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-12 -12 24 24'><g stroke='%23F5F0E6' stroke-width='0.55' fill='none' opacity='0.55'><ellipse cx='0' cy='-5.5' rx='2.2' ry='4'/><ellipse cx='0' cy='-5.5' rx='2.2' ry='4' transform='rotate(72)'/><ellipse cx='0' cy='-5.5' rx='2.2' ry='4' transform='rotate(144)'/><ellipse cx='0' cy='-5.5' rx='2.2' ry='4' transform='rotate(216)'/><ellipse cx='0' cy='-5.5' rx='2.2' ry='4' transform='rotate(288)'/><circle r='1' fill='%23F5F0E6' stroke='none'/></g></svg>");
  }
  .article-cta h3 { font-family: 'Cormorant Garamond', serif; font-weight: 300; font-style: italic; font-size: clamp(28px, 3.2vw, 42px); line-height: 1.22; max-width: 800px; margin: 0 auto 40px; letter-spacing: 0.002em; }
  .article-cta a.cta { display: inline-block; font-family: 'Cormorant Garamond', serif; font-weight: 400; font-size: 13px; letter-spacing: 0.42em; text-transform: uppercase; padding: 18px 36px 18px calc(36px + 0.42em); border: 1px solid var(--cream); color: var(--cream); transition: background 0.4s ease, color 0.4s ease, letter-spacing 0.4s ease; }
  .article-cta a.cta:hover { background: var(--cream); color: var(--ink); letter-spacing: 0.5em; padding-left: calc(36px + 0.5em); }

  @media (max-width: 1024px) {
    .article-content { padding: 60px 40px 70px; }
    .related { padding: 60px 40px; }
    .related-grid, .journal-index { grid-template-columns: repeat(2, 1fr); gap: 32px; }
    .article-cta { padding: 80px 40px; }
  }
  @media (max-width: 640px) {
    .article-content { padding: 44px 24px 56px; }
    .article-body p { font-size: 18px; }
    .related { padding: 48px 24px; }
    .related-grid, .journal-index { grid-template-columns: 1fr; gap: 32px; }
    .journal-theme { margin-top: 54px; }
    .journal-theme:first-of-type { margin-top: 40px; }
    .article-cta { padding: 64px 24px; }
  }

  /* ============================================================
     Placeholder plates (Stage 5) — every image slot shows a refined
     toned panel with a faint frangipani ornament until commissioned
     photography is dropped in. To use a real image, set an inline
     background-image on the element (inline wins over these rules):
       style="background-image:url('/assets/img/KEY.jpg')"
     ============================================================ */
  .plate-essay .img,
  .journal-grid .entry .img,
  .related-entry .img,
  .image.ph,
  .plate {
    background-image:
      radial-gradient(120% 90% at 28% 22%, rgba(245,240,230,0.7) 0%, rgba(245,240,230,0) 55%),
      linear-gradient(135deg, var(--bone) 0%, var(--paper) 52%, var(--sand) 128%);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    position: relative;
  }
  /* Full-bleed plates keep their own positioning (absolute .img-bg fills the
     band; .single-plate uses aspect-ratio) and always carry an inline photo,
     so they must NOT receive the gradient placeholder above: it was overriding
     .cinematic .img-bg's position:absolute and collapsing the image to zero
     height. A neutral fill shows only if a photo is genuinely missing. */
  .single-plate,
  .cinematic .img-bg,
  .article-hero {
    background-color: var(--bone);
  }
  /* Faint frangipani ornament, centred */
  .single-plate::before,
  .cinematic .img-bg::before,
  .plate-essay .img::before,
  .article-hero::before,
  .image.ph::before,
  .plate::before {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    width: 40px; height: 40px;
    transform: translate(-50%, -50%);
    opacity: 0.5;
    background: center/contain no-repeat url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-12 -12 24 24'><g stroke='%23B0876A' stroke-width='0.5' fill='none'><ellipse cx='0' cy='-5.5' rx='2.2' ry='4'/><ellipse cx='0' cy='-5.5' rx='2.2' ry='4' transform='rotate(72)'/><ellipse cx='0' cy='-5.5' rx='2.2' ry='4' transform='rotate(144)'/><ellipse cx='0' cy='-5.5' rx='2.2' ry='4' transform='rotate(216)'/><ellipse cx='0' cy='-5.5' rx='2.2' ry='4' transform='rotate(288)'/><circle r='1' fill='%23B0876A' stroke='none'/></g></svg>");
    pointer-events: none;
  }
  /* Small label, only when data-plate is set (product/Place figures) */
  .image.ph[data-plate]::after, .plate[data-plate]::after {
    content: attr(data-plate);
    position: absolute; left: 0; right: 0; bottom: 14%;
    text-align: center; padding: 0 14%;
    font-family: 'IBM Plex Mono', monospace; font-size: 9.5px;
    letter-spacing: 0.26em; text-transform: uppercase; color: var(--ink-quiet);
  }
  /* Once a real image is set inline, hide the ornament/label */
  [style*="/assets/img/"]::before,
  [style*="/assets/img/"]::after { display: none; }

  /* ============================================================
     About / The Founders (Stage 5)
     ============================================================ */
  .about-portrait { margin: 0; }
  .about-portrait .image { width: 100%; aspect-ratio: 5 / 4; }
  .founders-two { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; margin-top: 8px; }
  .founder .role { font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--clay-text); margin-bottom: 12px; }
  .founder h2 { font-family: 'Cormorant Garamond', serif; font-weight: 400; font-size: 26px; margin-bottom: 16px; color: var(--ink); }
  .founder p { color: var(--ink-soft); }
  @media (max-width: 820px) { .founders-two { grid-template-columns: 1fr; gap: 44px; } }

  /* ============================================================
     Mobile navigation — accessible no-JS disclosure (Stage 6)
     Hidden on desktop; replaces the inline links below 640px.
     ============================================================ */
  .nav-menu { display: none; position: relative; }
  .nav-menu > summary {
    list-style: none;
    cursor: pointer;
    color: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 4px;
    margin: -8px -4px;
    position: relative; z-index: 3; /* keep the Menu/Close control above the full-screen panel */
  }
  .nav-menu > summary .menu-label {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase;
    color: rgba(245, 240, 230, 0.82); transition: color 0.25s ease;
  }
  .nav-menu > summary .menu-label-open { display: none; }
  .nav-menu > summary:hover .menu-label { color: var(--cream); }
  .nav-menu > summary::-webkit-details-marker { display: none; }
  .nav-menu[open] > summary .menu-label { display: none; }
  .nav-menu[open] > summary .menu-label-open { display: inline; color: var(--cream); }
  /* Full-screen editorial menu (mobile) */
  .nav-menu-panel {
    position: fixed; inset: 0; z-index: 1;
    display: flex; flex-direction: column; justify-content: safe center;
    gap: 0; min-width: 0;
    padding: clamp(100px,14vh,140px) clamp(30px,9vw,68px) clamp(56px,10vh,88px);
    background: var(--teal);
    border: 0; border-radius: 0; box-shadow: none;
    opacity: 0; visibility: hidden; pointer-events: none;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    transition: opacity .5s ease, visibility .5s ease;
    counter-reset: navindex;
  }
  .nav-menu[open] .nav-menu-panel { opacity: 1; visibility: visible; pointer-events: auto; }
  .nav-menu-panel a {
    --d: 0s;
    position: relative;
    display: flex; align-items: baseline; justify-content: space-between;
    font-family: 'Cormorant Garamond', serif; font-weight: 300;
    font-size: clamp(26px, 7.1vw, 33px); line-height: 1;
    color: rgba(245,240,230,0.90); letter-spacing: 0.006em;
    padding: clamp(15px,2.5vh,21px) 0;
    border-bottom: 1px solid rgba(245,240,230,0.14);
    opacity: 0; transform: translateY(12px);
    transition: color .3s ease, padding-left .4s cubic-bezier(.2,.7,.2,1),
                opacity .5s ease var(--d), transform .55s cubic-bezier(.2,.7,.2,1) var(--d);
  }
  .nav-menu-panel a:first-of-type { border-top: 1px solid rgba(245,240,230,0.14); }
  .nav-menu-panel a::after {
    counter-increment: navindex; content: counter(navindex, upper-roman);
    font-family: 'IBM Plex Mono', monospace; font-weight: 400;
    font-size: 10px; letter-spacing: 0.24em; color: rgba(245,240,230,0.38);
    align-self: center; padding-left: 20px; flex: 0 0 auto; transition: color .3s ease;
  }
  .nav-menu-panel a > * { min-width: 0; }
  .nav-menu-panel a:hover, .nav-menu-panel a:active,
  .nav-menu-panel a[aria-current="page"] { color: var(--cream); padding-left: 10px; }
  .nav-menu-panel a:hover::after, .nav-menu-panel a:active::after,
  .nav-menu-panel a[aria-current="page"]::after { color: rgba(245,240,230,0.72); }
  /* faint seal at the foot of the menu */
  .nav-menu-panel::after {
    content: ""; align-self: center; margin-top: clamp(30px,5vh,52px);
    width: 44px; height: 96px; flex: 0 0 auto;
    background: url('/assets/img/the-annum-stamp-new-cream.png') center / contain no-repeat;
    opacity: 0.4; pointer-events: none;
  }
  /* staggered reveal of links when the menu opens */
  .nav-menu[open] .nav-menu-panel a { opacity: 1; transform: none; }
  .nav-menu[open] .nav-menu-panel a:nth-of-type(1){--d:.08s}
  .nav-menu[open] .nav-menu-panel a:nth-of-type(2){--d:.13s}
  .nav-menu[open] .nav-menu-panel a:nth-of-type(3){--d:.18s}
  .nav-menu[open] .nav-menu-panel a:nth-of-type(4){--d:.23s}
  .nav-menu[open] .nav-menu-panel a:nth-of-type(5){--d:.28s}
  .nav-menu[open] .nav-menu-panel a:nth-of-type(6){--d:.33s}
  .nav-menu[open] .nav-menu-panel a:nth-of-type(7){--d:.38s}
  .nav-menu[open] .nav-menu-panel a:nth-of-type(8){--d:.43s}
  /* When the menu is open (class set by JS; :has fallback for no-JS):
     drop the nav's backdrop-filter so it stops being a containing block for the
     fixed full-screen panel, merge the bar into the teal sheet, and lock scroll. */
  html.menu-open .nav, .nav:has(.nav-menu[open]) {
    background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
    border-bottom-color: transparent !important;
    transition: none !important; /* remove the blur instantly so the nav stops being a containing block for the fixed panel */
  }
  html.menu-open .nav .mark, .nav:has(.nav-menu[open]) .mark,
  html.menu-open .menu-label, .nav:has(.nav-menu[open]) .menu-label,
  html.menu-open .menu-label-open, .nav:has(.nav-menu[open]) .menu-label-open { color: var(--cream) !important; }
  html.menu-open, html.menu-open body { overflow: hidden; }
  @media (prefers-reduced-motion: reduce) {
    .nav-menu-panel, .nav-menu-panel a { transition: opacity .25s ease, visibility .25s ease; }
    .nav-menu-panel a { transform: none; }
  }

  /* ============================================================
     Accessibility utilities (Stage 6)
     ============================================================ */
  .sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0);
    white-space: nowrap; border: 0;
  }
  /* Lone h1 fallback (e.g. the thank-you page) */
  h1.display { font-size: clamp(34px, 4.6vw, 54px); }
  .page-hero h1.display { font-size: clamp(40px, 6vw, 84px); }

  /* Card titles are link labels (not document headings); keep block display */
  .related-entry .entry-title { display: block; }

  /* Reusable inline pull-quote for content pages (not the big .pull section) */
  .quote {
    font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 300;
    font-size: clamp(22px, 2.4vw, 28px); line-height: 1.42; color: var(--ink-soft);
    border-top: 1px solid var(--ink-line); border-bottom: 1px solid var(--ink-line);
    padding: 36px 0; margin: 52px 0; text-align: center; max-width: 100%; position: relative;
  }
  .band-teal .quote { color: rgba(245,240,230,0.92); border-color: var(--rule-cream); }
  .quote::before {
    content: ""; display: block; width: 22px; height: 22px; margin: 0 auto 22px;
    background: center/contain no-repeat url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-12 -12 24 24'><g stroke='%23B0876A' stroke-width='0.5' fill='none'><ellipse cx='0' cy='-5.5' rx='2.2' ry='4'/><ellipse cx='0' cy='-5.5' rx='2.2' ry='4' transform='rotate(72)'/><ellipse cx='0' cy='-5.5' rx='2.2' ry='4' transform='rotate(144)'/><ellipse cx='0' cy='-5.5' rx='2.2' ry='4' transform='rotate(216)'/><ellipse cx='0' cy='-5.5' rx='2.2' ry='4' transform='rotate(288)'/><circle r='1' fill='%23B0876A' stroke='none'/></g></svg>");
  }

  /* With eight nav items, switch to the disclosure menu earlier so the bar
     never crowds at mid widths. */
  @media (max-width: 960px) {
    .nav .links { display: none; }
    .nav-menu { display: block; }
  }

  /* When a real image is set inline on a plate, hide the placeholder ornament
     and label (otherwise the frangipani mark would sit over the photo). */
  [style*="background-image"].single-plate::before,
  [style*="background-image"].img-bg::before,
  [style*="background-image"] .img::before,
  [style*="background-image"].image::before,
  [style*="background-image"].image.ph::before,
  [style*="background-image"].image.ph::after,
  [style*="background-image"].article-hero::before,
  .plate-essay [style*="background-image"]::before {
    display: none !important;
  }

  /* ============================================================
     DESIGN REFINEMENT PASS
     Imagery & mood · typography · motion · distinctive layout
     Subtle, reversible, within the quiet register.
     ============================================================ */

  /* --- Imagery & mood: a quiet, unified editorial grade -------------------
     Barely-there desaturation + a soft printed vignette so the varied
     photographs cohere into one set and feel mounted, not pasted. Carries
     to the commissioned photography too. */
  .single-plate,
  .place .image,
  .page-figure .image,
  .article-hero,
  .plate-essay .img,
  .entry .img,
  .related-entry .img,
  .cinematic .img-bg {
    filter: saturate(0.94) contrast(1.02);
  }
  .single-plate,
  .place .image,
  .page-figure .image,
  .article-hero {
    box-shadow:
      inset 0 0 110px rgba(28, 28, 28, 0.07),
      inset 0 -70px 80px -60px rgba(28, 28, 28, 0.20);
  }

  /* The large stills stay static (background-size: cover comes from their base
     rules). Motion lives in the cinematic bands (Ken Burns) and the essay /
     journal cards, which animate a child element clipped by its parent. */

  /* --- Typography: give the opening statement real presence -------------- */
  .prologue .opener {
    font-size: clamp(26px, 3.1vw, 38px);
    line-height: 1.28;
    letter-spacing: 0.004em;
    color: var(--ink);
    margin-bottom: 44px;
  }
  /* Captions: a touch more air and a hairline to read as plate marks */
  .single-plate-meta,
  .cinematic-meta,
  .page-figure .image-meta,
  .place .image-meta {
    padding-top: 16px;
    border-top: 1px solid var(--ink-line);
  }

  /* --- Interaction: an animated underline on quiet text links ------------- */
  .cta-link {
    position: relative;
    border-bottom: none;
    padding-bottom: 4px;
    background-image: linear-gradient(var(--ink-line), var(--ink-line));
    background-size: 100% 1px;
    background-position: 0 100%;
    background-repeat: no-repeat;
  }
  .cta-link::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 100%; height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.5s cubic-bezier(.2,.6,.2,1);
  }
  .cta-link:hover::after { transform: scaleX(1); }
  .band-teal .cta-link {
    background-image: linear-gradient(var(--rule-cream), var(--rule-cream));
  }

  /* --- Held lists: a hair more room, and a quiet hover ------------------- */
  .held .row { transition: background 0.4s ease; }
  .held .row:hover { background: rgba(28, 28, 28, 0.015); }
  .band-teal .held .row:hover { background: rgba(245, 240, 230, 0.04); }

  /* ============================================================
     Ethos — the six values, given a distinctive editorial layout
     ============================================================ */
  .values { margin-top: 8px; display: grid; grid-template-columns: 1fr 1fr; gap: 64px 72px; }
  .values-group { display: flex; flex-direction: column; }
  .values-head {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase;
    color: var(--clay-text); padding-bottom: 18px; margin-bottom: 28px;
    border-bottom: 1px solid var(--ink-line);
    /* two-line budget so both group rules sit on the same line */
    min-height: 2.9em; display: flex; align-items: flex-end;
  }
  .value + .value { margin-top: 30px; }
  .value h3 {
    font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 400;
    font-size: clamp(26px, 3vw, 34px); line-height: 1.1; color: var(--ink);
    margin-bottom: 10px; letter-spacing: 0.004em;
  }
  .value p { font-size: 17px; line-height: 1.55; color: var(--ink-soft); max-width: 100%; margin: 0; }
  @media (max-width: 820px) {
    .values { grid-template-columns: 1fr; gap: 44px; }
  }

  /* ============================================================
     CONTENT-PAGE VISUALS — feature rows & regions gallery
     (full-bleed bands reuse the .cinematic component)
     ============================================================ */

  /* Feature row image: same editorial grade, vignette and slow zoom as the
     other stills, so feature images sit in the one set. */
  .feature .image {
    filter: saturate(0.94) contrast(1.02);
    box-shadow:
      inset 0 0 110px rgba(28, 28, 28, 0.07),
      inset 0 -70px 80px -60px rgba(28, 28, 28, 0.20);
    background-size: cover;
  }
  .feature .feature-text .meta { display: block; margin-bottom: 22px; }
  .feature .feature-text h2,
  .feature .feature-text h3 { margin-bottom: 22px; }
  .feature .feature-text p { color: var(--ink-soft); }
  .band-teal .feature .feature-text p { color: rgba(245, 240, 230, 0.82); }
  .feature .figure-caption {
    margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--ink-line);
    display: flex; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap;
    font-family: 'IBM Plex Mono', monospace; font-size: 10px;
    letter-spacing: 0.26em; text-transform: uppercase; color: var(--ink-quiet);
  }

  /* Regions gallery (Place) — an image per region */
  .region-grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 48px 32px; margin-top: 8px;
  }
  .region-card .img {
    width: 100%; aspect-ratio: 4 / 3;
    background: var(--bone) center / cover no-repeat;
    margin-bottom: 18px; overflow: hidden;
    filter: saturate(0.94) contrast(1.02);
    box-shadow: inset 0 -50px 60px -50px rgba(28, 28, 28, 0.28);
    background-size: cover;
  }
  .region-card .name {
    font-family: 'Cormorant Garamond', serif; font-weight: 400;
    font-size: 23px; line-height: 1.1; color: var(--ink); margin-bottom: 8px;
  }
  .region-card .stamp {
    font-family: 'IBM Plex Mono', monospace; font-size: 9.5px;
    letter-spacing: 0.24em; text-transform: uppercase; color: var(--clay-text);
    margin-bottom: 12px;
  }
  .region-card .line { font-size: 15px; line-height: 1.5; color: var(--ink-soft); max-width: 100%; margin: 0; }
  .band-teal .region-card .name { color: var(--cream); }
  .band-teal .region-card .line { color: rgba(245, 240, 230, 0.78); }

  @media (max-width: 820px) {
    .region-grid { grid-template-columns: 1fr 1fr; gap: 36px 24px; }
  }
  @media (max-width: 560px) {
    .region-grid { grid-template-columns: 1fr; gap: 36px; }
  }

  /* ============================================================
     Travel gallery — "Beyond Bali" four-up strip (The Year)
     ============================================================ */
  .travel-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 10px;
  }
  .travel-grid figure { margin: 0; }
  .travel-grid .image {
    width: 100%;
    aspect-ratio: 4 / 5;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: saturate(0.94) contrast(1.02);
    box-shadow: inset 0 0 90px rgba(28, 28, 28, 0.06);
  }
  .travel-grid figcaption {
    margin-top: 14px;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink-quiet);
  }
  @media (max-width: 860px) {
    .travel-grid { grid-template-columns: 1fr 1fr; gap: 24px 18px; }
  }
  @media (max-width: 460px) {
    .travel-grid { grid-template-columns: 1fr; gap: 28px; }
    .travel-grid .image { aspect-ratio: 3 / 2; }
  }


  /* ============================================================
     Indonesia gallery — "The wider archipelago" (Place)
     ============================================================ */
  .indo-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 12px;
  }
  .indo-grid figure { margin: 0; }
  .indo-grid .image {
    width: 100%;
    aspect-ratio: 1 / 1;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: saturate(0.94) contrast(1.02);
    box-shadow: inset 0 0 80px rgba(28, 28, 28, 0.06);
  }
  .indo-grid figcaption {
    margin-top: 12px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 9.5px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink-quiet);
  }
  @media (max-width: 820px) {
    .indo-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
  }
  @media (max-width: 460px) {
    .indo-grid { grid-template-columns: 1fr; gap: 22px; }
    .indo-grid .image { aspect-ratio: 3 / 2; }
  }

  /* ============================================================
     DESIGN REFINEMENT PASS — Aman-informed (2026-06)
     The site is already close to the Aman register; these are
     deliberately light moves: more air between sections, a
     unified slow life on the still imagery, and quieter chrome.
     Desktop-scoped where a mobile rule already exists.
     ============================================================ */

  /* — More generous vertical rhythm (desktop) ——————————————— */
  @media (min-width: 821px) {
    section { padding: 152px 0; }
    section.tight { padding: 120px 0; }
    .feature + .feature { margin-top: 156px; }
    .page-figure { margin-top: 96px; }
    .region-grid { gap: 60px 36px; }
    .indo-grid { gap: 24px; }
    .travel-grid { gap: 24px; }
    .page-hero { padding: 200px 0 104px; }
  }

  /* — Section heads sit with a touch more calm ——————————————— */
  .section-head { margin-bottom: 56px; padding-top: 28px; }
  .page-cta h2.display { margin-bottom: 24px; }
  .page-cta p { margin-bottom: 40px; }

  /* — A unified, slow hover-zoom on the editorial stills, echoing
       the journal cards so every image feels quietly alive ————— */
  .feature .image,
  .page-figure .image,
  .indo-grid .image,
  .travel-grid .image {
    overflow: hidden;
    transition: transform 1.3s cubic-bezier(.2,.6,.2,1), filter 0.6s ease;
    will-change: transform;
  }
  .feature figure:hover .image,
  .page-figure:hover .image,
  .region-card:hover .img,
  .indo-grid figure:hover .image,
  .travel-grid figure:hover .image {
    transform: scale(1.018);
  }

  /* — Quieter chrome: a hairline scroll progress ——————————————— */
  .scroll-progress { height: 1px; opacity: 0.7; }

  /* — CTA links: a hair more tracking, a touch more deliberate —— */
  .cta-link { letter-spacing: 0.3em; }

  @media (prefers-reduced-motion: reduce) {
    .feature figure:hover .image,
    .page-figure:hover .image,
    .region-card:hover .img,
    .indo-grid figure:hover .image,
    .travel-grid figure:hover .image { transform: none; }
  }

  /* ============================================================
     HOME — soften the two dark blocks into the cream family (2026-06)
     'By the numbers' → warm Bone; the pull quote → Sand.
     Ink text and hairline rules throughout, so the page reads as
     one continuous warm palette rather than cream→teal→ink→cream.
     ============================================================ */

  /* — By the numbers: warm Bone panel ——————————————————————— */
  .numbers { background: var(--bone); color: var(--ink); }
  .numbers .section-head.cream::before { background: var(--ink-line); }
  .numbers .section-head.cream .meta { color: var(--ink-soft); }
  .numbers .section-head.cream .meta.faint { color: var(--ink-quiet); }
  .numbers .meta { color: var(--ink-soft); }
  .numbers h2.display { color: var(--ink); }
  .numbers-grid { border-top-color: var(--ink-line); }
  .numbers-cell { border-right-color: var(--ink-line); border-bottom-color: var(--ink-line); }
  .numbers-cell .ord { color: var(--ink-quiet); }
  .numbers-cell .figure { color: var(--ink); }
  .numbers-cell .descriptor { color: var(--ink-soft); }
  .numbers-lead { color: var(--ink-soft); }
  .numbers-coda { border-top-color: var(--ink-line); color: var(--ink-soft); }

  /* — Pull quote: a slightly deeper Sand, for quiet emphasis ———— */
  .pull { background: var(--sand); color: var(--ink); }
  .pull-mark { color: var(--clay-text); }
  .pull blockquote { color: var(--ink); }
  .pull-attr { color: var(--ink-quiet); }

  /* — The Bali map: a warm Bone band, full-bleed edge to edge ——— */
  .place .bali-map {
    position: relative;
    width: 100vw;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    margin-top: 96px;
    background: var(--bone);
    border-top: none;
    padding: clamp(40px, 5vw, 72px) clamp(20px, 5vw, 56px);
  }

  /* — All closing CTAs → Sand, so every page ends the same warm
       way (cream content → sand close → bone footer) ———————————— */
  .page-cta { background: var(--sand); }

  /* ============================================================
     SITE-WIDE — soften the remaining dark bands into the cream
     family (2026-06). The teal info bands across every subpage
     become warm Bone; the journal article closing band becomes
     Sand — matching the home treatment, so the whole site reads
     as one continuous warm palette with gentle tonal shifts.
     ============================================================ */

  /* — Teal info bands (What is held · On Indonesia · regions) → Bone */
  .band-teal { background: var(--bone); color: var(--ink); }
  .band-teal .section-head::before { background: var(--ink-line); }
  .band-teal .meta { color: var(--ink-soft); }
  .band-teal .meta.faint { color: var(--ink-quiet); }
  .band-teal h2.display, .band-teal h3.display { color: var(--ink); }
  .band-teal .lead { color: var(--ink); }
  .band-teal p { color: var(--ink-soft); }
  .band-teal .held { border-top-color: var(--ink-line); }
  .band-teal .held .row { border-bottom-color: var(--ink-line); }
  .band-teal .held .row .v { color: var(--ink-soft); }
  .band-teal .held .row:hover { background: rgba(28, 28, 28, 0.015); }
  .band-teal .quote { color: var(--ink); border-color: var(--ink-line); }
  .band-teal .cta-link { background-image: linear-gradient(var(--ink-line), var(--ink-line)); }
  .band-teal .feature .feature-text p { color: var(--ink-soft); }
  .band-teal .region-card .name { color: var(--ink); }
  .band-teal .region-card .line { color: var(--ink-soft); }
  .band-teal .image.ph::after { color: var(--ink-quiet); }

  /* — Journal article closing band → Sand, for quiet emphasis ——— */
  .article-cta { background: var(--sand); color: var(--ink); }
  .article-cta .meta { color: var(--ink-quiet); }
  .article-cta h3 { color: var(--ink); }
  .article-cta::before {
    background: center/contain no-repeat url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-12 -12 24 24'><g stroke='%231C1C1C' stroke-width='0.55' fill='none' opacity='0.5'><ellipse cx='0' cy='-5.5' rx='2.2' ry='4'/><ellipse cx='0' cy='-5.5' rx='2.2' ry='4' transform='rotate(72)'/><ellipse cx='0' cy='-5.5' rx='2.2' ry='4' transform='rotate(144)'/><ellipse cx='0' cy='-5.5' rx='2.2' ry='4' transform='rotate(216)'/><ellipse cx='0' cy='-5.5' rx='2.2' ry='4' transform='rotate(288)'/><circle r='1' fill='%231C1C1C' stroke='none'/></g></svg>");
  }
  .article-cta a.cta { border-color: var(--ink); color: var(--ink); }
  .article-cta a.cta:hover { background: var(--ink); color: var(--cream); }

  /* ============================================================
     FOOTER — full pass (2026-06)
     Grounded in a warm Bone base so the page settles onto a
     distinct foot rather than fading into cream; rhythm tightened;
     column labels tied into the site's clay label system; a
     cleaner two-up colophon.
     ============================================================ */
  footer {
    background: var(--bone);
    border-top: 1px solid var(--ink-line);
    padding: 76px 64px 40px;
  }

  /* Endpaper — the quiet sign-off; a touch more contained */
  .endpaper { padding-bottom: 52px; margin-bottom: 44px; }
  .endpaper .label { color: var(--sand); }

  /* Wordmark block — close the gap to the columns slightly */
  .foot-mark-row { padding-bottom: 48px; }

  /* Column labels in clay, to match the rest of the site's
     mono labels; rules and links sit cleanly on Bone */
  .foot-grid { border-top-color: var(--ink-line); border-bottom-color: var(--ink-line); gap: 64px; }
  .foot-col .foot-h { color: var(--clay-text); }
  .foot-col a:hover { color: var(--clay-text); }

  .colophon { color: var(--ink-quiet); }

  @media (max-width: 600px) {
    footer { padding: 56px 32px 28px; }
  }

  /* ============================================================
     CONSISTENCY PASS — one warm system across the whole site (2026-06)
     Three tones only, plus image plates:
       · Cream  — primary background (heroes, prose, default sections)
       · Bone   — secondary surfaces & ground (info bands, the map,
                  the enquiry panel, in-article 'related', the footer)
       · Sand   — emphasis & every closing CTA, plus the home pull quote
     Text is the same ink scale on every tone: ink (headings/body),
     ink-soft (secondary), ink-quiet (small meta), clay (mono labels).
     ============================================================ */

  /* Fold the stray near-white 'paper' surfaces into Bone */
  .enquire { background: var(--bone); }
  .related { background: var(--bone); }

  /* Pill links — a touch stronger, so they read on cream and sand alike */
  .also a { color: var(--ink-soft); border-color: rgba(28, 28, 28, 0.22); }
  .also a:hover { color: var(--ink); border-color: var(--ink); }

  /* ============================================================
     FOOTER — The Correspondence (quiet email sign-up) (2026-06)
     ============================================================ */
  .foot-correspondence {
    text-align: center;
    max-width: 520px;
    margin: 0 auto;
    padding: 4px 0 56px;
  }
  .corr-head {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10.5px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--clay-text);
    margin-bottom: 18px;
  }
  .corr-line {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 300;
    font-size: 18px;
    line-height: 1.45;
    color: var(--ink-soft);
    max-width: 460px;
    margin: 0 auto 30px;
  }
  .corr-form {
    display: flex;
    gap: 12px;
    max-width: 440px;
    margin: 0 auto;
    align-items: stretch;
  }
  .corr-form input[type="email"] {
    flex: 1;
    font-family: 'EB Garamond', serif;
    font-size: 17px;
    color: var(--ink);
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(28, 28, 28, 0.42);
    padding: 10px 2px;
    outline: none;
    transition: border-color 0.4s ease;
    min-height: 46px;
  }
  .corr-form input[type="email"]::placeholder { color: var(--ink-quiet); }
  .corr-form input[type="email"]:focus { border-bottom-color: var(--ink); }
  .corr-send {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10.5px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--cream);
    background: var(--ink);
    border: 1px solid var(--ink);
    padding: 0 24px;
    min-height: 46px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.4s ease, color 0.4s ease, border-color 0.4s ease;
  }
  .corr-send:hover { background: var(--teal); border-color: var(--teal); }
  .corr-send-sending { display: none; }
  .corr-form.sending .corr-send-label { display: none; }
  .corr-form.sending .corr-send-sending { display: inline; }
  .corr-thanks, .corr-error {
    margin: 18px auto 0;
    max-width: 440px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    line-height: 1.6;
  }
  .corr-thanks { color: var(--teal); }
  .corr-error { color: var(--clay-text); }
  @media (max-width: 520px) {
    .corr-form { flex-direction: column; gap: 14px; }
    .corr-send { padding: 14px 24px; }
  }

  /* ============================================================
     COOKIE NOTICE — discreet consent banner (2026-06)
     ============================================================ */
  .cookie-notice {
    position: fixed;
    left: 50%;
    bottom: 22px;
    transform: translateX(-50%) translateY(10px);
    z-index: 60;
    width: calc(100% - 48px);
    max-width: 430px;
    background: var(--cream);
    border: 1px solid var(--ink-faint);
    border-radius: 3px;
    box-shadow: 0 10px 30px -20px rgba(28, 28, 28, 0.28);
    padding: 13px 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    opacity: 0;
    transition: opacity 0.5s ease, transform 0.5s ease;
  }
  .cookie-notice.show { opacity: 1; transform: translateX(-50%) translateY(0); }
  .cookie-text {
    margin: 0;
    flex: 1;
    min-width: 190px;
    max-width: 100%;
    font-family: 'EB Garamond', serif;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--ink-quiet);
  }
  .cookie-text a { color: var(--ink-soft); border-bottom: 1px solid var(--ink-line); }
  .cookie-text a:hover { border-bottom-color: var(--ink); }
  .cookie-actions { display: flex; gap: 8px; flex-shrink: 0; }
  .cookie-btn {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 9px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 7px 13px;
    cursor: pointer;
    background: transparent;
    border: 1px solid var(--ink-line);
    transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
  }
  .cookie-btn.decline { color: var(--ink-soft); }
  .cookie-btn.decline:hover { color: var(--ink); border-color: var(--ink-soft); }
  .cookie-btn.accept { background: var(--ink); color: var(--cream); border-color: var(--ink); }
  .cookie-btn.accept:hover { background: var(--teal); border-color: var(--teal); }
  @media (max-width: 480px) {
    .cookie-notice { flex-direction: column; align-items: stretch; text-align: left; bottom: 12px; }
    .cookie-actions { justify-content: flex-end; }
  }

  /* Footer colophon — quiet legal links */
  .colophon a { color: var(--ink-quiet); border-bottom: 1px solid transparent; transition: color 0.3s ease, border-color 0.3s ease; cursor: pointer; }
  .colophon a:hover { color: var(--ink); border-bottom-color: var(--ink-line); }

  /* ============================================================
     JOURNAL — featured lead article (2026-06)
     A large, horizontal feature above the three-column grid.
     ============================================================ */
  .journal-feature {
    display: grid;
    grid-template-columns: 1.12fr 1fr;
    gap: clamp(32px, 5vw, 72px);
    align-items: center;
    margin-bottom: clamp(52px, 6vw, 88px);
    padding-bottom: clamp(52px, 6vw, 88px);
    border-bottom: 1px solid var(--ink-line);
    color: inherit;
  }
  .journal-feature .img {
    width: 100%;
    aspect-ratio: 4 / 3;
    background: var(--bone) center / cover no-repeat;
    overflow: hidden;
    filter: saturate(0.94) contrast(1.02);
    box-shadow: inset 0 -60px 70px -60px rgba(28, 28, 28, 0.25);
    transition: transform 1.3s cubic-bezier(.2,.6,.2,1);
    will-change: transform;
  }
  .journal-feature:hover .img { transform: scale(1.02); }
  .journal-feature .feature-eyebrow { display: block; margin-bottom: 20px; color: var(--clay-text); }
  .journal-feature .stamp {
    display: flex; gap: 14px; margin-bottom: 16px;
    font-family: 'IBM Plex Mono', monospace; font-size: 10px;
    letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-quiet);
  }
  .journal-feature .entry-title {
    display: block;
    font-family: 'Cormorant Garamond', serif; font-weight: 300;
    font-size: clamp(30px, 3.6vw, 46px); line-height: 1.08;
    letter-spacing: 0.004em; color: var(--ink);
    margin-bottom: 18px; transition: color 0.35s ease;
  }
  .journal-feature:hover .entry-title { color: var(--teal); }
  .journal-feature .entry-sum {
    font-family: 'EB Garamond', serif; font-size: 17px; line-height: 1.6;
    color: var(--ink-soft); max-width: 54ch; margin: 0 0 26px;
  }
  .journal-feature .feature-more {
    font-family: 'IBM Plex Mono', monospace; font-size: 11px;
    letter-spacing: 0.3em; text-transform: uppercase; color: var(--ink);
    border-bottom: 1px solid var(--ink-line); padding-bottom: 6px;
    transition: border-color 0.4s ease;
  }
  .journal-feature:hover .feature-more { border-bottom-color: var(--ink); }
  @media (max-width: 760px) {
    .journal-feature { grid-template-columns: 1fr; gap: 26px; }
    .journal-feature .img { aspect-ratio: 16 / 10; }
  }
  @media (prefers-reduced-motion: reduce) {
    .journal-feature:hover .img { transform: none; }
  }

  /* ============================================================
     NAV — interior pages (cream hero) read in ink from the top (2026-06)
     Home and journal articles keep the cream-on-image treatment;
     every other page has a light hero, so the nav must be ink even
     before scroll. The .scrolled state still overrides on scroll.
     ============================================================ */
  .nav-solid .mark { color: var(--ink); }
  .nav-solid .links a { color: var(--ink-soft); }
  .nav-solid .links a:last-child { color: var(--ink); border-color: var(--ink); }
  .nav-solid .links a:last-child:hover { background: var(--ink); color: var(--cream); border-color: var(--ink); }
  .nav-solid .menu-label { color: var(--ink-soft); }
  .nav-solid .nav-menu > summary:hover .menu-label { color: var(--ink); }

  /* ============================================================
     HOUSE GRADE — a light warm matte on all photographic imagery (2026-06)
     A gentle, unified edit echoing the Instagram "Cream Matte" look,
     kept deliberately light so large web images stay rich. Applied to
     every photo surface so web + social share a family resemblance.
     (Listed selectors override the older per-component filters.)
     ============================================================ */
  .hero::before,
  .single-plate,
  .cinematic .img-bg,
  .feature .image,
  .page-figure .image,
  .place .image,
  .region-card .img,
  .indo-grid .image,
  .travel-grid .image,
  .article-hero,
  .journal-feature .img,
  .related-entry .img,
  .entry .img,
  .plate-essay .img {
    filter: saturate(0.90) contrast(0.97) brightness(1.03) sepia(0.06);
  }

  /* ============================================================
     QA pass fixes (2026-06)
     ============================================================ */
  /* Placeholder ornament panel inside the (now Bone) info bands —
     was a leftover dark-teal gradient that would clash if a plate
     ever fell back to placeholder. Bring it into the warm system. */
  .band-teal .image.ph { background: var(--bone); }

  /* Declutter the fixed corner pills on tablet, and avoid them
     crowding the cookie notice on mid widths. */
  @media (max-width: 1024px) {
    .chapter-folio, .bali-now { display: none; }
  }

/* ===== Design pass — June 2026 ===== */
h1.display, h2.display, h3.display, .article-title, .display.large { text-wrap: balance; }
/* Avoid single-word last lines in body copy — most visible in narrow mobile columns */
p, .lead, .fs-v, .specimen-note, li { text-wrap: pretty; }
[id] { scroll-margin-top: 110px; }
@media (max-width: 700px) {
  .bali-map img { max-width: none; }
}

/* ============================================================
   HELD LISTS — expandable category rows (2026-06)
   Each row opens in place to reveal the full service.
   Register is the light "bone" band used on Year/Reset/Atelier.
   The layout grid sits on an inner span (.row-head-grid), never on
   the <button> itself — robust across every browser, mobile included.
   ============================================================ */
.held .row { display: block; padding: 0; border-bottom: 1px solid var(--ink-line); transition: none; }
.held .row:hover,
.band-teal .held .row:hover { background: transparent; }

.held .row-head {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.4s ease;
}
.held .row-head:hover,
.band-teal .held .row-head:hover { background: rgba(28, 28, 28, 0.018); }
.held .row-head:focus-visible { outline: 1px solid var(--ink); outline-offset: -3px; }

.held .row-head-grid {
  display: grid;
  grid-template-columns: 220px 1fr 26px;
  gap: 48px;
  align-items: baseline;
  padding: 30px 0;
}
.held .row-head .v { display: block; }

.held .row-toggle {
  position: relative;
  width: 13px;
  height: 13px;
  align-self: center;
  justify-self: end;
  opacity: 0.55;
  transition: opacity 0.3s ease;
}
.held .row-head:hover .row-toggle { opacity: 0.9; }
.held .row-toggle::before,
.held .row-toggle::after { content: ""; position: absolute; background: var(--ink); }
.held .row-toggle::before { top: 50%; left: 0; right: 0; height: 1px; transform: translateY(-50%); }
.held .row-toggle::after { left: 50%; top: 0; bottom: 0; width: 1px; transform: translateX(-50%); transition: transform 0.4s ease, opacity 0.4s ease; }
.held .row.is-open .row-toggle::after { transform: translateX(-50%) scaleY(0); opacity: 0; }

.held .row-detail { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.5s ease; }
.held .row-detail > .row-detail-inner { overflow: hidden; min-height: 0; }
.held .row.is-open .row-detail { grid-template-rows: 1fr; }
.held .rd { padding: 0 26px 38px 268px; }
.held .rd > p { margin: 0 0 18px; max-width: 600px; color: var(--ink-soft); line-height: 1.66; }
.held .rd > p:last-child { margin-bottom: 0; }
.held .rd .rd-lede { font-style: italic; color: var(--ink-quiet); margin-bottom: 22px; }
.held .rd .rd-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--clay-text);
  margin: 26px 0 10px;
  max-width: none;
}

@media (max-width: 820px) {
  .held .row-head-grid {
    grid-template-columns: 1fr 20px;
    column-gap: 16px;
    row-gap: 9px;
    align-items: center;
    padding: 23px 0;
  }
  .held .row-head .k { grid-column: 1; grid-row: 1; }
  .held .row-toggle { grid-column: 2; grid-row: 1; opacity: 0.62; }
  .held .row-head .v { grid-column: 1 / -1; grid-row: 2; }
  .held .rd { padding: 4px 0 24px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .held .row-detail, .held .row-toggle, .held .row-toggle::after { transition: none; }
}


/* ============================================================
   BEYOND BALI — feature carousel (The Year + The Reset, 2026-06)
   Horizontal, swipeable, scroll-snapped; arrows on desktop.
   ============================================================ */
.travel-carousel { position: relative; margin-top: 16px; }
.travel-track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 6px;
  scrollbar-width: none;
}
.travel-track::-webkit-scrollbar { display: none; }
.travel-track figure {
  margin: 0;
  flex: 0 0 clamp(240px, 27vw, 340px);
  scroll-snap-align: start;
}
.travel-track .image {
  width: 100%;
  aspect-ratio: 4 / 5;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: saturate(0.94) contrast(1.02);
  box-shadow: inset 0 0 90px rgba(28, 28, 28, 0.06);
  transition: opacity 0.5s ease, transform 1.2s cubic-bezier(.2,.6,.2,1);
}
.travel-track figure:hover .image { opacity: 0.94; transform: scale(1.012); }
.travel-track figcaption {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 12px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-quiet);
}
.travel-nav {
  position: absolute;
  top: 50%;
  transform: translateY(calc(-50% - 16px));
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(245, 240, 230, 0.96);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid var(--ink-line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: 20px;
  color: var(--ink);
  cursor: pointer;
  z-index: 5;
  padding: 0;
  line-height: 1;
  transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease, opacity 0.3s ease;
}
.travel-nav:hover { background: var(--ink); color: var(--cream); transform: translateY(calc(-50% - 16px)) scale(1.04); }
.travel-nav:focus-visible { outline: 1px solid var(--ink); outline-offset: 2px; }
.travel-nav[disabled] { opacity: 0.22; cursor: default; pointer-events: none; }
.travel-nav.prev { left: -22px; }
.travel-nav.next { right: -22px; }
@media (max-width: 860px) {
  .travel-track { gap: 16px; scroll-snap-type: x mandatory; }
  .travel-track figure { flex-basis: 72vw; }
  .travel-nav { display: none; }
}
@media (max-width: 460px) {
  .travel-track figure { flex-basis: 82vw; }
}
@media (prefers-reduced-motion: reduce) {
  .travel-track { scroll-behavior: auto; }
  .travel-track .image { transition: none; }
}


/* ============================================================
   AMBIENT LAYER — page transition + wiping link underline (2026-06, v2)
   A true two-way cream wipe via an html::before cover, set BEFORE paint
   by a tiny <head> script (gated by sessionStorage + reduced-motion), so
   there is no flash on arrival and no hero double-animation. A safety
   timeout in that head script guarantees the cover always clears.
   Tuned to the site's easing language.
   ============================================================ */
html::before {
  content: "";
  position: fixed;
  inset: 0;
  background: var(--cream);
  z-index: 8000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.26s cubic-bezier(.2,.6,.2,1);
}
html.nav-cover::before { opacity: 1; }
.annum-transition {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s cubic-bezier(.2,.6,.2,1);
}
.annum-transition.show { opacity: 1; }
.annum-transition .at-mark { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.annum-transition .at-a {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: 52px;
  line-height: 1;
  letter-spacing: 0.3em;
  padding-left: 0.3em;
  color: var(--ink);
  opacity: 0;
  transform: translateY(10px) scale(0.94);
  transition: opacity 0.28s ease 0.1s, transform 0.4s cubic-bezier(.2,.6,.2,1) 0.1s;
}
.annum-transition.show .at-a { opacity: 1; transform: translateY(0) scale(1); }
.annum-transition .at-rule {
  width: 40px;
  height: 1px;
  background: var(--clay);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.44s cubic-bezier(.2,.6,.2,1) 0.18s;
}
.annum-transition.show .at-rule { transform: scaleX(1); }

/* Wiping underline on cta-links — echoes the nav links' existing scaleX underline */
.cta-link { position: relative; }
.cta-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 1px;
  width: 100%;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.5s ease;
}
.cta-link:hover { border-bottom-color: var(--ink-line); }
.cta-link:hover::after { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  html::before { display: none; }
  .annum-transition { display: none; }
  .cta-link::after { transition: none; }
}

/* ============================================================
   TEAL CHROME — header on scroll + footer as the back cover (2026-06)
   Introduces the brand's signature green (the document-cover teal)
   into the site frame. The body stays cream; teal bookends the page
   — a glass bar on scroll up top, the "back cover" at the foot.
   One consolidated block, appended last so it owns the cascade.
   ============================================================ */

/* ---- NAV: teal glass bar on scroll, cream text (all pages) ---- */
.nav.scrolled {
  background: rgba(44, 74, 71, 0.95);
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  border-bottom-color: var(--rule-cream);
}
.nav.scrolled .mark { color: var(--cream); }
.nav.scrolled .links a { color: rgba(245, 240, 230, 0.80); }
.nav.scrolled .links a:hover { color: var(--cream); }
.nav.scrolled .links a:last-child {
  background: transparent;
  color: var(--cream);
  border-color: var(--cream);
}
.nav.scrolled .links a:last-child:hover {
  background: var(--cream);
  color: var(--teal);
  border-color: var(--cream);
}
.nav.scrolled .menu-label { color: rgba(245, 240, 230, 0.82); }
.nav.scrolled .nav-menu[open] > summary .menu-label-open { color: var(--cream); }

/* ---- FOOTER: the teal back cover ---- */
footer {
  background: var(--teal);
  color: var(--cream);
  border-top: none;
}
.endpaper { border-bottom-color: var(--rule-cream); }
.endpaper .label { color: var(--sand); }
.endpaper .line { color: var(--cream); }
.foot-mark { color: var(--cream); }
.foot-tag { color: rgba(245, 240, 230, 0.72); }
.foot-grid {
  border-top-color: var(--rule-cream);
  border-bottom-color: var(--rule-cream);
}
/* Maker's seal as the central divider between Read and Where — no flanking rules; matches the column-divider height (cream stamp on teal) */
.foot-seal { display: flex; align-items: center; justify-content: center; padding: 0 30px; }
.foot-seal img { height: 100%; width: auto; max-height: 210px; opacity: 0.82; }
.foot-col .foot-h { color: var(--sand); }
.foot-col a, .foot-col p { color: rgba(245, 240, 230, 0.80); }
.foot-col a:hover { color: var(--cream); }
.colophon { color: rgba(245, 240, 230, 0.55); }
.letter-end { color: var(--clay-text); }

/* Correspondence sign-up on teal */
.corr-head { color: var(--sand); }
.corr-line { color: rgba(245, 240, 230, 0.76); }
.corr-form input[type="email"] {
  color: var(--cream);
  border-bottom-color: var(--rule-cream-strong);
}
.corr-form input[type="email"]::placeholder { color: rgba(245, 240, 230, 0.5); }
.corr-form input[type="email"]:focus { border-bottom-color: var(--cream); }
.corr-send {
  color: var(--teal);
  background: var(--cream);
  border-color: var(--cream);
}
.corr-send:hover {
  background: transparent;
  color: var(--cream);
  border-color: var(--cream);
}
.corr-thanks { color: var(--cream); }
.corr-error { color: #E7BBA4; }
.colophon a { color: rgba(245, 240, 230, 0.7); text-decoration: none; border-bottom: 1px solid var(--rule-cream); transition: color 0.3s ease, border-color 0.3s ease; }
.colophon a:hover { color: var(--cream); border-bottom-color: var(--rule-cream-strong); }

/* Enquire hero — heading dialled down a touch (long sentence runs large
   at the shared page-hero size); scoped to this page only. (2026-06) */
.enquire-hero h1.display { font-size: clamp(36px, 5.2vw, 72px); }

/* ============================================================
   FOOTER DIRECTORY — four balanced columns with hairline dividers
   (2026-06). Splits the long single list into Stay / Read / Where /
   Write, divided by cream rules that echo the document covers, and
   carries the Advisors link in Write. Appended last to own the cascade.
   ============================================================ */
.foot-grid { grid-template-columns: 1fr 1fr auto 1fr 1fr; gap: 0; align-items: stretch; }
.foot-col { padding: 0 32px; border-right: 1px solid var(--rule-cream); }
.foot-col:last-child { border-right: none; }
/* No rules flanking the central stamp: the Read column (left of the stamp) loses its divider; the stamp itself carries none */
.foot-col:nth-child(2) { border-right: none; }

@media (max-width: 860px) {
  .foot-grid { grid-template-columns: repeat(2, 1fr); gap: 32px 0; align-items: start; }
  .foot-col { padding: 0 20px; border-right: none; }
  /* seal becomes a full-width centred divider between the Read and Where rows */
  .foot-seal { grid-column: 1 / -1; border-right: none; padding: 14px 0; }
  .foot-seal img { height: 76px; }
}
@media (max-width: 520px) {
  /* Keep the compact two-up grid on phones (Stay | Read · seal divider · Where | Write)
     rather than one long single column. Desktop footer is unchanged. */
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 30px 18px; padding: 44px 0; }
  .foot-col, .foot-col:nth-child(odd) { padding: 0 6px; border-right: none; }
  .foot-seal { grid-column: 1 / -1; border-right: none; padding: 6px 0; }
  .foot-seal img { height: 58px; }
  .foot-col .foot-h { margin-bottom: 12px; }
  .foot-col a, .foot-col p { font-size: 15px; margin-bottom: 8px; line-height: 1.45; }
}

/* Utility: light italic display (thank-you, etc.) — replaces inline styles */
.display-italic { font-style: italic; font-weight: 300; }

/* Accordion headings: wrap the row button in an <h3> for screen-reader navigation,
   reset so it carries no visual weight (the button styling is unchanged). */
.held .rh-head { margin: 0; padding: 0; font: inherit; font-weight: inherit; line-height: inherit; display: block; }

/* Bali map: hide the dense region labels on small screens (they collide); the
   region cards below the map carry the names. The island shape + dots remain. */


/* Movements coda — Bespoke as the quiet upper tier, and the first-cohort note */

/* Enquiry helper line + held-row Journal links */
.field-help { font-family: 'EB Garamond', serif; font-size: 14px; line-height: 1.5; color: var(--ink-quiet); margin: 8px 0 0; }
.held .rd-more { margin: 14px 0 0; }
.held .rd-more a { font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--clay-text); text-decoration: none; border-bottom: 1px solid var(--ink-line); }
.held .rd-more a:hover { color: var(--ink); }

/* Larger tap targets on mobile/tablet — footer links (≥ ~40px) */
@media (max-width: 860px) {
  .foot-col a { padding: 6px 0; }
}

/* ============================================================
   THE RESET — rich product sections (2026-06)
   Three movements, seven threads, six rituals, four journeys,
   a week-in-the-middle. Built on the existing system; responsive.
   ============================================================ */
.reset-arc { display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px; margin-top: 48px; }
.arc-no { font-family: 'Cormorant Garamond', serif; font-weight: 300; font-size: 40px; color: var(--clay-text); line-height: 1; }
.arc-label { font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-quiet); margin: 16px 0 6px; }
.arc-step h3 { font-family: 'Cormorant Garamond', serif; font-weight: 400; font-size: 25px; color: var(--teal); margin: 0 0 10px; }
.arc-step p { font-size: 16px; line-height: 1.62; color: var(--ink-soft); margin: 0; }

.reset-threads { display: grid; grid-template-columns: repeat(2, 1fr); gap: 36px 56px; margin-top: 48px; }
.thread-k { font-family: 'Cormorant Garamond', serif; font-weight: 400; font-size: 23px; color: var(--teal); margin-bottom: 8px; }
.thread p { font-size: 16px; line-height: 1.6; color: var(--ink-soft); margin: 0; }
.thread-growth { margin: 44px 0 0; max-width: 700px; font-size: 17px; line-height: 1.62; color: var(--ink-soft); border-top: 1px solid var(--ink-line); padding-top: 28px; }
.thread-growth strong { color: var(--teal); font-weight: 400; }

.reset-rituals { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 48px; }
.ritual { background: var(--teal); padding: 38px 36px; }
.ritual-no { font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--sand); }
.ritual h3 { font-family: 'Cormorant Garamond', serif; font-weight: 300; font-size: 28px; color: var(--cream); margin: 12px 0 12px; }
.ritual p { font-family: 'EB Garamond', serif; font-size: 15.5px; line-height: 1.62; color: rgba(245, 240, 230, 0.82); margin: 0; }

.reset-journeys { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; margin-top: 48px; }
.journey { border: 1px solid var(--ink-line); padding: 34px 32px; background: var(--paper); display: flex; flex-direction: column; }
.journey-no { font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--clay-text); }
.journey h3 { font-family: 'Cormorant Garamond', serif; font-weight: 400; font-size: 28px; color: var(--teal); margin: 8px 0 12px; }
.journey p { font-size: 15.5px; line-height: 1.6; color: var(--ink-soft); margin: 0 0 18px; }
.journey-thread { margin-top: auto; font-family: 'IBM Plex Mono', monospace; font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-quiet); border-top: 1px solid var(--ink-line); padding-top: 14px; }
.journey-thread em { font-style: italic; font-family: 'Cormorant Garamond', serif; font-size: 15px; text-transform: none; letter-spacing: 0; color: var(--clay-text); }

.reset-week { margin-top: 44px; border-top: 1px solid var(--ink-line); }
.reset-week .day { display: grid; grid-template-columns: 140px 1fr; gap: 28px; padding: 22px 0; border-bottom: 1px solid var(--ink-line); }
.day-name { font-family: 'Cormorant Garamond', serif; font-weight: 400; font-size: 22px; color: var(--teal); }
.reset-week .day p { font-size: 16px; line-height: 1.6; color: var(--ink-soft); margin: 0; }

@media (max-width: 820px) {
  .reset-arc { grid-template-columns: 1fr; gap: 34px; }
  .reset-threads { grid-template-columns: 1fr; gap: 28px; }
  .reset-rituals { grid-template-columns: 1fr; }
  .reset-journeys { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .reset-week .day { grid-template-columns: 1fr; gap: 4px; }
}

/* The Year — four-movement arc + three-ritual showcase (reuse the Reset components) */
.reset-arc.four { grid-template-columns: repeat(4, 1fr); gap: 30px; }
.reset-rituals.three { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) {
  .reset-arc.four { grid-template-columns: repeat(2, 1fr); gap: 32px 30px; }
  .reset-rituals.three { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .reset-arc.four { grid-template-columns: 1fr; }
}

/* ─────────────────────────────────────────────────────────────
   DESIGN PASS (Year + Reset) — engagement without bulk
   ───────────────────────────────────────────────────────────── */

/* Hero specimen — a quiet metadata triad echoing the brochure covers */
.specimen {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 46px;
  border-top: 1px solid var(--ink-line);
}
.specimen .sp {
  padding: 22px 30px 4px;
  border-left: 1px solid var(--ink-line);
}
.specimen .sp:first-child { border-left: 0; padding-left: 0; }
.specimen .sp-v {
  font-family: 'Cormorant Garamond', 'Garamond', serif;
  font-weight: 300;
  font-size: 1.35rem;
  line-height: 1.25;
  color: var(--ink);
  margin-top: 9px;
  hyphens: none;
}
@media (max-width: 640px) {
  .specimen { grid-template-columns: 1fr; margin-top: 36px; }
  .specimen .sp { border-left: 0; border-top: 1px solid var(--ink-line); padding: 16px 0 14px; }
  .specimen .sp:first-child { border-top: 0; }
}
.specimen-note {
  margin-top: 18px;
  max-width: 52ch;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

/* Factsheet — a warm editorial ledger of what the stay holds (not a pricing card) */
.factsheet { margin-top: 44px; }
.fs-head {
  font-family: 'Cormorant Garamond', 'Garamond', serif;
  font-style: italic;
  font-weight: 300;
  font-size: 1.4rem;
  line-height: 1.3;
  color: var(--ink);
  margin-bottom: 16px;
}
.factsheet .fs-row {
  display: grid;
  grid-template-columns: minmax(142px, 190px) 1fr;
  gap: 6px 44px;
  padding: 20px 0;
  border-top: 1px solid var(--ink-line);
  align-items: start;
}
.factsheet .fs-row:last-child { border-bottom: 1px solid var(--ink-line); }
.factsheet .fs-k {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-quiet);
  line-height: 1.5;
  padding-top: 5px;
}
.factsheet .fs-v {
  font-family: 'EB Garamond', 'Garamond', serif;
  font-size: 1.08rem;
  line-height: 1.62;
  color: var(--ink);
  max-width: 54ch;
}
.factsheet .fs-row.fs-rich .fs-v { font-size: 1.14rem; }
.factsheet .fs-row.fs-rich .fs-lead { display: block; color: var(--ink-soft); font-style: italic; margin-bottom: 4px; }
@media (max-width: 640px) {
  .factsheet { margin-top: 32px; }
  .fs-head { font-size: 1.28rem; margin-bottom: 12px; }
  .factsheet .fs-row { grid-template-columns: 1fr; gap: 7px; padding: 17px 0; }
  .factsheet .fs-k { padding-top: 0; }
}
.cta-note {
  margin-top: 18px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
}

/* Journal — callout box + checklist (used by practical/legal notes) */
.article-callout {
  background: var(--bone);
  border-left: 2px solid var(--teal);
  padding: 22px 26px;
  margin: 34px 0;
  border-radius: 4px;
}
.article-callout .ac-label {
  display: block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 11px;
}
.article-callout p { margin: 0 0 11px; font-size: 1rem; line-height: 1.62; }
.article-callout p:last-child { margin-bottom: 0; }
.article-checklist { list-style: none; margin: 24px 0; padding: 0; }
.article-checklist li { position: relative; padding-left: 30px; margin-bottom: 15px; line-height: 1.58; }
.article-checklist li::before {
  content: "\25C7"; position: absolute; left: 2px; top: 0.05em;
  color: var(--teal); font-size: 0.92em;
}
@media (max-width: 640px) { .article-callout { padding: 18px 20px; } }
.band-teal .cta-note, .page-cta.band-teal .cta-note { color: var(--rule-cream-strong); }

/* Statement — a full-bleed teal pull-quote, in the register of the brochure covers */
.statement {
  background: var(--sand);
  color: var(--ink);
  text-align: center;
  padding: clamp(82px, 12vw, 152px) 0;
}
.statement .st-mark {
  display: block;
  width: 26px;
  height: 1px;
  background: rgba(28, 28, 28, 0.30);
  margin: 0 auto 38px;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 1.4s cubic-bezier(.2,.6,.2,1);
}
.statement.in .st-mark { transform: scaleX(1); }
.statement p {
  font-family: 'Cormorant Garamond', 'Garamond', serif;
  font-weight: 300;
  font-size: clamp(1.9rem, 3.7vw, 3rem);
  line-height: 1.2;
  letter-spacing: 0.005em;
  color: var(--ink);
  max-width: 940px;
  margin: 0 auto;
}
.statement .st-cite {
  display: block;
  margin-top: 32px;
  font-family: 'IBM Plex Mono', 'Courier New', monospace;
  font-size: 10.5px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-quiet);
}

/* Subtle life on the cards — a quiet lift on hover */
.journey, .region-card {
  transition: transform .5s cubic-bezier(.2,.6,.2,1), border-color .5s ease;
}
.journey:hover {
  transform: translateY(-3px);
  border-color: rgba(28, 28, 28, 0.22);
}
.region-card:hover { transform: translateY(-3px); }
@media (hover: none) {
  .journey:hover, .region-card:hover { transform: none; }
}

/* In-page nav (the Year) — a discreet jump bar */
.page-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 26px;
  max-width: 1240px;
  margin: 0 auto;
  padding: 18px 40px;
  border-top: 1px solid var(--ink-line);
  border-bottom: 1px solid var(--ink-line);
}
.page-nav a {
  font-family: 'IBM Plex Mono', 'Courier New', monospace;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-decoration: none;
  padding: 7px 0;
  transition: color .3s ease;
}
.page-nav a:hover { color: var(--teal); }
@media (max-width: 640px) {
  .page-nav { padding: 14px 24px; gap: 6px 18px; }
  .page-nav a { font-size: 10px; letter-spacing: 0.14em; }
}

/* Procession band styles live inline in index.html (always fresh, cache-proof). */


/* =============================================================
   Homepage sections — moved from inline <style> blocks in index.html
   (deep pass, July 2026). Cache-busting via the versioned URL makes
   the inline split unnecessary.
   ============================================================= */
.cover { position: relative; min-height: 100vh; min-height: 100svh; background: #1a1a1a; color: var(--cream);
    display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; overflow:hidden; padding: 84px 24px 52px; }
  /* Dedicated hero media layer (NOT ::before, so the hero-seen "no replay"
     and cinematic-parallax rules never freeze its breathing). */
  .cover-media { position:absolute; inset:0; z-index:0;
    background: url('/assets/img/og/hero-home.jpg') center/cover no-repeat;
    filter: saturate(1.1) brightness(1.08) contrast(1.02);
    transform: scale(1.05); will-change: transform; }
  @media (prefers-reduced-motion: no-preference) {
    .cover-media { animation: heroBreath 38s ease-in-out infinite alternate; }
  }
  @keyframes heroBreath {
    from { transform: scale(1.05) translate3d(0, 0, 0); }
    to   { transform: scale(1.14) translate3d(-1.6%, -1.2%, 0); }
  }
  .cover::before { content:""; position:absolute; inset:0; z-index:0; background:none; }
  /* Filmic grain — a whisper of texture over the image */
  .cover-grain { position:absolute; inset:0; z-index:2; pointer-events:none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 150px 150px; opacity:0.05; mix-blend-mode: overlay; }
  /* Lighter, directional overlay — keeps the terraces luminous, holds the
     wordmark legible, and grounds the seal at the foot. */
  .cover::after { content:""; position:absolute; inset:0; z-index:1;
    background:
      /* Content lens — a soft, feathered dark bloom concentrated behind the
         wordmark, copy and seal, fading to nothing so the terraces stay bright
         at the edges. This is what lifts the cream type off a bright image. */
      radial-gradient(70% 108% at 50% 54%, rgba(12,14,10,.56) 0%, rgba(12,14,10,.45) 24%, rgba(12,14,10,.28) 44%, rgba(12,14,10,.10) 67%, rgba(12,14,10,0) 85%),
      /* Grounding for the nav (top) and the scroll cue (foot). */
      linear-gradient(180deg, rgba(12,14,10,.38) 0%, rgba(12,14,10,.08) 15%, rgba(12,14,10,0) 38%, rgba(12,14,10,0) 74%, rgba(12,14,10,.32) 100%); }
  .cover-frame { position:absolute; inset:clamp(16px,2.4vw,30px); pointer-events:none; z-index:3; }
  .cover-frame::before { content:""; position:absolute; inset:0; border:1px solid var(--rule-cream-strong); opacity:0; animation: hkFrame 1s ease-out .15s forwards; }
  .cover-frame i { position:absolute; width:13px; height:13px; opacity:0; animation: hkTick .6s ease-out .05s forwards; }
  .cover-frame i.tl{ top:-1px; left:-1px; border-top:1px solid var(--cream); border-left:1px solid var(--cream) }
  .cover-frame i.tr{ top:-1px; right:-1px; border-top:1px solid var(--cream); border-right:1px solid var(--cream) }
  .cover-frame i.bl{ bottom:-1px; left:-1px; border-bottom:1px solid var(--cream); border-left:1px solid var(--cream) }
  .cover-frame i.br{ bottom:-1px; right:-1px; border-bottom:1px solid var(--cream); border-right:1px solid var(--cream) }
  .cover-inner { position:relative; z-index:4; display:flex; flex-direction:column; align-items:center; text-shadow: 0 1px 2px rgba(0,0,0,.42), 0 2px 32px rgba(0,0,0,.55); }
  .cover .eyebrow { font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.34em; text-transform:uppercase; color:rgba(245,240,230,.82); opacity:0; animation: hkFade .9s ease-out .35s forwards; }
  .cover-mark { font-family:'Cormorant Garamond',serif; font-weight:300; font-size:clamp(44px,8.2vw,104px); line-height:1; letter-spacing:.045em; margin:24px 0 0; white-space:nowrap; }
  .cover-mark .ch { display:inline-block; opacity:0; transform:translateY(.28em); animation: hkCh .7s cubic-bezier(.2,.7,.2,1) forwards; }
  .cover-mark .sp { width:.32em; }
  .cover-mark .ch:nth-child(1){animation-delay:.5s}.cover-mark .ch:nth-child(2){animation-delay:.56s}.cover-mark .ch:nth-child(3){animation-delay:.62s}.cover-mark .ch:nth-child(4){animation-delay:.68s}.cover-mark .ch:nth-child(5){animation-delay:.74s}.cover-mark .ch:nth-child(6){animation-delay:.8s}.cover-mark .ch:nth-child(7){animation-delay:.86s}.cover-mark .ch:nth-child(8){animation-delay:.92s}.cover-mark .ch:nth-child(9){animation-delay:.98s}
  .cover-tag { font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:300; font-size:clamp(20px,2.3vw,27px); color:rgba(245,240,230,.97); letter-spacing:.01em; margin:14px 0 0; opacity:0; animation: hkFade .9s ease-out 1.15s forwards; }
  .cover-sub { font-family:'EB Garamond',serif; font-weight:400; font-size:clamp(14px,1.5vw,16.5px); line-height:1.5; color:rgba(245,240,230,.96); letter-spacing:.014em; max-width:30em; margin:11px 0 0; opacity:0; animation: hkFade .9s ease-out 1.35s forwards;
    /* Crisper local legibility: the sub-line falls across the brightest part of
       the terraces, where the content-lens has faded. A tight shadow gives it
       edge definition without dimming the image. */
    text-shadow: 0 1px 2px rgba(0,0,0,.62), 0 1px 14px rgba(0,0,0,.5); }
  .cover .feature-seal { height:clamp(180px,27vh,285px); width:auto; margin-top:clamp(28px,4.5vh,44px); filter: drop-shadow(0 0 1px rgba(0,0,0,.45)) drop-shadow(0 1px 4px rgba(0,0,0,.62)) drop-shadow(0 2px 24px rgba(0,0,0,.5)); opacity:0; transform:scale(.96); animation: hkSeal .9s cubic-bezier(.2,.7,.2,1) 1.7s forwards; }
  .cover-foot { position:relative; z-index:4; margin-top:34px; display:flex; align-items:center; gap:24px; opacity:0; animation: hkFade .9s ease-out 1.7s forwards; }
  .cover-foot .meta { font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:.28em; text-transform:uppercase; color:rgba(245,240,230,.75); }
  .scroll-cue { position:absolute; left:50%; margin-left:-.5px; bottom:clamp(24px,4vw,38px); width:1px; height:30px; background:linear-gradient(var(--cream), transparent); z-index:4; opacity:0; animation: hkCueFade .9s ease-out 2s forwards, hkCueBob 2.4s ease-in-out 2.7s infinite; }
  /* keep the nav inside the cover frame (clears the hairline border + corner ticks) */
  .nav-overcover:not(.scrolled){ padding: clamp(34px, 4.2vw, 48px) clamp(30px, 5vw, 64px); }
  @keyframes hkKen { to { transform: scale(1); } }
  @keyframes hkFrame { from { opacity:0 } to { opacity:1 } }
  @keyframes hkTick { from { opacity:0 } to { opacity:1 } }
  @keyframes hkFade { from { opacity:0; transform:translateY(10px) } to { opacity:1; transform:none } }
  @keyframes hkCh { to { opacity:1; transform:none } }
  @keyframes hkSeal { to { opacity:1; transform:scale(1) } }
  @keyframes hkCueFade { to { opacity:1 } }
  @keyframes hkCueBob { 0%,100% { transform:translateY(0) } 50% { transform:translateY(6px) } }
  @media (prefers-reduced-motion: reduce) {
    .cover::before { animation:none !important; transform:scale(1) !important; }
    .cover-frame::before,.cover-frame i,.cover .eyebrow,.cover-mark .ch,.cover-tag,.cover-sub,.cover .feature-seal,.cover-foot,.scroll-cue { animation:none !important; opacity:1 !important; transform:none !important; }
  }
  /* Repeat visits in the same session: show the completed cover instantly, no replay */
  .hero-seen .cover::before { animation:none !important; transform:scale(1) !important; }
  .hero-seen .cover-frame::before,.hero-seen .cover-frame i,.hero-seen .cover .eyebrow,.hero-seen .cover-mark .ch,.hero-seen .cover-tag,.hero-seen .cover-sub,.hero-seen .cover .feature-seal,.hero-seen .cover-foot,.hero-seen .scroll-cue { animation:none !important; opacity:1 !important; transform:none !important; }

.procession { position: relative; width: 100%; height: 124px; padding: 0; margin: 0; overflow: hidden; background: #F5F0E6; line-height: 0; }
  .procession-track { display: flex; flex-wrap: nowrap; width: max-content; height: 100%; animation: procScroll 66s linear infinite; will-change: transform; }
  .procession-copy { flex: 0 0 auto; height: 100%; aspect-ratio: 2944 / 512; background: url('/assets/video/the-annum-procession-scroll-desktop.webp') center center / contain no-repeat; }
  @keyframes procScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
  @media (max-width: 700px) {
    .procession { height: 90px; }
    .procession-copy { aspect-ratio: 1080 / 360; background-image: url('/assets/video/the-annum-procession-scroll-mobile.webp'); }
    .procession-track { animation-duration: 39s; }
  }
  @media (prefers-reduced-motion: reduce) { .procession-track { animation: none; } }



/* =============================================================
   Weighted journey arc — the movements carry their full brochure
   copy (July 2026). Extends .journey-arc; JS behaviour unchanged.
   ============================================================= */
.arc-intro {
  max-width: 34em;
  margin: 30px 0 6px;
  font-family: 'EB Garamond', serif;
  font-size: 17.5px;
  line-height: 1.65;
  color: var(--ink-soft);
}
.journey-arc.arc-full { margin-top: 52px; }
.arc-full .jstage { padding: 0 0 56px; }
.arc-full .jstage:last-child { padding-bottom: 6px; }
.arc-full .jname {
  font-size: clamp(23px, 2.7vw, 31px);
  margin-top: 2px;
}
.arc-full .jmeta {
  display: block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--clay-text);
  margin: 8px 0 12px;
}
.arc-full .jline {
  max-width: 36em;
  font-size: 16.5px;
  line-height: 1.66;
}
.arc-full .jline em {
  font-style: italic;
  color: var(--ink);
}
.arc-close {
  max-width: 34em;
  margin: 10px 0 0;
  font-family: 'EB Garamond', serif;
  font-style: italic;
  font-size: 16.5px;
  line-height: 1.62;
  color: var(--ink-quiet);
}
@media (max-width: 520px) {
  .arc-full .jstage { padding-bottom: 44px; }
}

/* ============================================================
   Shape your year — quiet guided path (homepage)
   ============================================================ */
.shape-tool {
  margin: clamp(30px, 4vw, 48px) 0 0;
  border: 0; padding: 0;
  display: grid; gap: clamp(28px, 4vw, 44px);
}
.shape-q { border: 0; padding: 0; margin: 0; }
.shape-q legend {
  padding: 0; width: 100%;
  display: flex; align-items: baseline; gap: 14px;
  border-bottom: 1px solid var(--ink-line); padding-bottom: 12px; margin-bottom: 20px;
  font-family: 'Cormorant Garamond', serif; font-weight: 300;
  font-size: clamp(21px, 2.5vw, 27px); line-height: 1.1; color: var(--ink);
}
.shape-q .sq-n {
  font-family: 'IBM Plex Mono', monospace; font-size: 11px;
  letter-spacing: 0.2em; color: var(--clay-text); flex: none;
}
.sq-opts { display: grid; gap: 12px; }
.sq-opts.sq-2 { grid-template-columns: repeat(2, 1fr); }
.sq-opts.sq-4 { grid-template-columns: repeat(4, 1fr); }
.sq-opt { position: relative; cursor: pointer; }
.sq-opt input {
  position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;
}
.sq-face {
  display: flex; flex-direction: column; gap: 3px; justify-content: center;
  min-height: 74px; padding: 16px 18px;
  border: 1px solid var(--ink-line); border-radius: 2px;
  background: var(--paper);
  transition: border-color 0.35s ease, background-color 0.35s ease, transform 0.35s ease;
}
.sq-face b {
  font-family: 'Cormorant Garamond', serif; font-weight: 400;
  font-size: 18px; line-height: 1.15; color: var(--ink);
}
.sq-face em {
  font-family: 'IBM Plex Mono', monospace; font-style: normal;
  font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-quiet);
}
.sq-opt:hover .sq-face { border-color: var(--sand); }
.sq-opt input:checked + .sq-face {
  border-color: var(--teal); background: rgba(44, 74, 71, 0.06);
}
.sq-opt input:checked + .sq-face b { color: var(--teal-deep); }
.sq-opt input:focus-visible + .sq-face { outline: 1px solid var(--ink); outline-offset: 3px; }

.shape-result {
  margin-top: clamp(30px, 4vw, 46px);
  border-top: 1px solid var(--ink-line); padding-top: clamp(26px, 3vw, 36px);
}
.shape-result-inner {
  opacity: 0; transform: translateY(10px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(.2,.6,.2,1);
}
.shape-result.is-shown .shape-result-inner { opacity: 1; transform: none; }
.shape-said {
  font-family: 'Cormorant Garamond', serif; font-weight: 300; font-style: italic;
  font-size: clamp(21px, 2.7vw, 29px); line-height: 1.36; color: var(--ink);
  margin: 14px 0 0; max-width: 26em;
}
.shape-said strong {
  font-style: normal; font-weight: 400; color: var(--teal-deep);
}
.shape-result .cta-link { margin-top: 22px; display: inline-block; }

@media (max-width: 680px) {
  .sq-opts.sq-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 400px) {
  .sq-opts.sq-2, .sq-opts.sq-4 { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .shape-result-inner { transition: none; }
  .sq-face { transition: none; }
}

/* ============================================================
   Thank-you seal — a wax seal that presses in once, on arrival
   ============================================================ */
.ty-seal { margin: 0 0 30px; }
.ty-seal img {
  height: clamp(92px, 13vh, 132px); width: auto; display: block;
  transform-origin: center 42%;
}
@media (prefers-reduced-motion: no-preference) {
  .ty-seal img { animation: tySealPress 1s cubic-bezier(.2, .7, .2, 1) 0.35s both; }
  @keyframes tySealPress {
    0%   { opacity: 0; transform: scale(1.34); filter: blur(1.4px); }
    55%  { opacity: 1; transform: scale(0.982); filter: none; }
    100% { opacity: 1; transform: scale(1); }
  }
}

/* ============================================================
   Film plate — a single full-bleed cinematic breath
   ============================================================ */
.film-plate {
  position: relative;
  min-height: 84vh; min-height: 84svh;
  display: flex; align-items: flex-end;
  overflow: hidden;
  background: #1a1a1a;
}
.film-plate-bg {
  position: absolute; inset: 0; z-index: 0;
  background: url('/assets/img/photos/place-a-sea-temple-at-sunset-in-bali-2400.webp') center/cover no-repeat;
  transform: scale(1.03);
}
.film-plate::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(20,20,20,0.64) 0%, rgba(20,20,20,0.12) 44%, rgba(20,20,20,0) 72%);
}
.film-plate-inner {
  position: relative; z-index: 2;
  padding: clamp(38px, 7vw, 92px) clamp(24px, 6vw, 84px);
  max-width: 920px;
}
.film-plate .meta { color: rgba(245,240,230,0.72); display: block; margin-bottom: 16px; }
.film-plate-line {
  font-family: 'Cormorant Garamond', serif; font-weight: 300; font-style: italic;
  font-size: clamp(26px, 4vw, 50px); line-height: 1.18; color: var(--cream);
  margin: 0; max-width: 17em; text-shadow: 0 1px 30px rgba(0,0,0,0.42);
}
@media (prefers-reduced-motion: no-preference) {
  .film-plate-bg { animation: ken-burns 34s ease-in-out infinite alternate; will-change: transform; }
}


/* =============================================================
   Flow restructure (July 2026) — additive only; no changes to
   existing motion or component styling.
   ============================================================= */
.offering-lede {
  max-width: 34em;
  margin: 26px 0 40px;
  font-family: 'EB Garamond', serif;
  font-size: 17.5px;
  line-height: 1.65;
  color: var(--ink-soft);
}
.cover-foot a { text-decoration: none; transition: color .4s ease; }
.cover-foot a:hover, .cover-foot a:focus-visible { color: var(--cream); }
.cover-foot a:focus-visible { outline: 1px solid var(--rule-cream-strong); outline-offset: 4px; }
.film-plate-line { text-shadow: 0 1px 30px rgba(0,0,0,.5), 0 1px 8px rgba(0,0,0,.25); }
.film-plate .meta { text-shadow: 0 1px 12px rgba(0,0,0,.4); }

/* Short viewports (landscape phones, small laptop windows). The hero centres a
   tall stack — wordmark, tagline, seal, then the cover-foot skimmer links and
   the scroll cue. On short heights that stack overflows and the foot collides
   with the cue. Tighten the vertical rhythm, shrink the seal, and retire the
   cue (the foot already signals there's more below). */
@media (max-height: 660px) {
  .cover { padding-top: 56px; padding-bottom: 32px; }
  .cover .feature-seal { height: clamp(92px, 21vh, 150px); margin-top: clamp(14px, 2.5vh, 26px); }
  .cover-foot { margin-top: 18px; }
  .scroll-cue { display: none; }
}


/* Atelier occasions: an odd final card takes the full row (July 2026) */
.reset-journeys .journey:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (max-width: 820px) {
  .reset-journeys .journey:last-child:nth-child(odd) { grid-column: auto; }
}