/* ==========================================================================
   LUMIÈRE — main stylesheet
   Organised with @layer so specificity stays predictable top to bottom.
   ========================================================================== */

@layer reset, base, layout, components, sections, utilities;

/* ==========================================================================
   Fonts — self-hosted latin subsets, woff2 only.
   ========================================================================== */
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond-300.woff2") format("woff2");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond-300-italic.woff2") format("woff2");
  font-weight: 300; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-300.woff2") format("woff2");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}

/* ==========================================================================
   RESET
   ========================================================================== */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }

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

  body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol, fieldset, legend {
    margin: 0;
    padding: 0;
  }

  ul[role="list"], ol[role="list"] { list-style: none; }

  img, svg, video {
    display: block;
    max-width: 100%;
  }

  /* <picture> must not become a layout box, or it breaks the parent's
     direct-child selectors and swallows object-fit on the <img>. */
  picture { display: contents; }

  input, button, textarea, select {
    font: inherit;
    color: inherit;
    letter-spacing: inherit;
  }

  button { background: none; border: 0; cursor: pointer; }

  fieldset { border: 0; }

  :where(a) { color: inherit; text-decoration: none; }

  /* Visible, on-brand focus for keyboard users only. */
  :focus-visible {
    outline: var(--hairline) solid var(--c-blue);
    outline-offset: 4px;
  }
  .on-dark :focus-visible,
  .footer :focus-visible,
  .hero :focus-visible { outline-color: var(--c-gold); }
}

/* ==========================================================================
   BASE
   ========================================================================== */
@layer base {
  html {
    scroll-behavior: smooth;
    /* nav is fixed — keep anchored sections clear of it */
    scroll-padding-top: clamp(4.5rem, 9vh, 7rem);
  }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
  }

  body {
    background-color: var(--bg);
    /* Limestone paper, washed back toward ivory so it reads as grain. */
    background-image:
      linear-gradient(rgb(248 246 242 / 0.62), rgb(248 246 242 / 0.62)),
      url("../textures/limestone.webp");
    background-size: auto, 520px;
    background-attachment: scroll;
    color: var(--fg);
    font-family: var(--f-body);
    font-size: var(--t-body);
    font-weight: 300;
    line-height: var(--lh-body);
    letter-spacing: var(--ls-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
  }

  /* Lock scrolling behind the veil and the mobile menu. */
  body[data-locked] { overflow: hidden; }

  h1, h2, h3, h4 {
    font-family: var(--f-display);
    font-weight: 300;
    line-height: var(--lh-display);
    letter-spacing: var(--ls-display);
    text-wrap: balance;
  }

  p { text-wrap: pretty; }

  ::selection {
    background: var(--c-blue);
    color: var(--c-ivory);
  }
}

/* ==========================================================================
   LAYOUT
   ========================================================================== */
@layer layout {
  .shell {
    width: 100%;
    padding-inline: var(--gutter);
    margin-inline: auto;
    max-width: 1680px;
  }

  .section {
    padding-block: var(--section-y);
    position: relative;
  }

  .section--sand {
    position: relative;
    overflow: hidden;
    background-color: var(--c-sand);
    /* Palm grasscloth, held well back of the type. */
    background-image:
      linear-gradient(rgb(233 223 207 / 0.55), rgb(233 223 207 / 0.55)),
      url("../textures/grasscloth.webp");
    background-size: auto, 600px;
  }
  .section--tight { padding-block: clamp(4rem, 9vh, 8rem); }

  /* Interior pages have no hero to sit under the fixed bar, so the first
     section opens clear of it. */
  .page > .section:first-child { padding-block-start: calc(var(--section-y) + 4rem); }

  /* 12-column editorial grid. Collapses to a single column on small screens. */
  .grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: clamp(1.5rem, 3vw, 3.5rem);
  }

  @media (max-width: 900px) {
    .grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  }
  @media (max-width: 620px) {
    .grid { grid-template-columns: minmax(0, 1fr); }
    .grid > * { grid-column: 1 / -1 !important; }
  }

  .stack > * + * { margin-top: var(--flow, var(--s-5)); }
}

/* ==========================================================================
   COMPONENTS
   ========================================================================== */
@layer components {

  /* --- Eyebrow / small caps label --------------------------------------- */
  .eyebrow {
    font-family: var(--f-body);
    font-size: var(--t-micro);
    font-weight: 400;
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color: var(--fg-muted);
    line-height: 1;
    display: flex;
    align-items: center;
    gap: var(--s-4);
  }
  .eyebrow::before {
    content: "";
    inline-size: clamp(1.5rem, 3vw, 3rem);
    block-size: var(--hairline);
    background: currentColor;
    opacity: 0.5;
    flex: none;
  }
  .eyebrow--bare::before { display: none; }
  .on-dark .eyebrow { color: var(--c-ivory-70); }

  /* --- Wordmark ----------------------------------------------------------
     The logotype is shipped as an alpha mask and painted with currentColor,
     so one asset serves navy on ivory, ivory on photography and gold on navy.
     Always paired with real text for assistive tech. */
  .wordmark {
    display: block;
    inline-size: var(--mark-w, 10rem);
    aspect-ratio: 900 / 211;
    background-color: currentColor;
    -webkit-mask: url("../motifs/wordmark.png") center / contain no-repeat;
    mask: url("../motifs/wordmark.png") center / contain no-repeat;
  }

  /* --- Motifs -------------------------------------------------------------
     Hand-drawn Mediterranean elements, also masks. Set --motif and a size.
     Decorative by default: every use is aria-hidden. */
  /* Use the `mask` shorthand, not the longhands: mixing prefixed and
     unprefixed mask longhands desyncs the mask layers in Chrome and the
     element renders fully masked out. */
  .motif {
    display: block;
    flex: none;
    background-color: currentColor;
    -webkit-mask: var(--motif) center / contain no-repeat;
    mask: var(--motif) center / contain no-repeat;
    opacity: var(--motif-o, 1);
    pointer-events: none;
  }


  /* Motif assets. The url() must be declared here, not in an inline
     style: a relative url inside a custom property resolves against the
     stylesheet that consumes it, so inline declarations 404. */
  .m-ammonite { --motif: url("../motifs/ammonite.png"); aspect-ratio: 342 / 355; }
  .m-amphora { --motif: url("../motifs/amphora.png"); aspect-ratio: 94 / 154; }
  .m-arch { --motif: url("../motifs/arch.png"); aspect-ratio: 78 / 181; }
  .m-archer { --motif: url("../motifs/archer.png"); aspect-ratio: 192 / 291; }
  .m-braid { --motif: url("../motifs/braid.png"); aspect-ratio: 14 / 108; }
  .m-braid-h { --motif: url("../motifs/braid-h.png"); aspect-ratio: 108 / 14; }
  .m-bust { --motif: url("../motifs/bust.png"); aspect-ratio: 116 / 118; }
  .m-column { --motif: url("../motifs/column.png"); aspect-ratio: 130 / 186; }
  .m-conch { --motif: url("../motifs/conch.png"); aspect-ratio: 96 / 41; }
  .m-creature { --motif: url("../motifs/creature.png"); aspect-ratio: 195 / 282; }
  .m-fern { --motif: url("../motifs/fern.png"); aspect-ratio: 42 / 93; }
  .m-fig { --motif: url("../motifs/fig.png"); aspect-ratio: 47 / 47; }
  .m-frond-panel { --motif: url("../motifs/frond-panel.png"); aspect-ratio: 113 / 61; }
  .m-frond-band { --motif: url("../motifs/frond-band.png"); aspect-ratio: 226 / 122; }
  .m-meander { --motif: url("../motifs/meander.png"); aspect-ratio: 20 / 113; }
  .m-meander-h { --motif: url("../motifs/meander-h.png"); aspect-ratio: 113 / 20; }
  .m-octopus-jar { --motif: url("../motifs/octopus-jar.png"); aspect-ratio: 90 / 78; }
  .m-olive-branch { --motif: url("../motifs/olive-branch.png"); aspect-ratio: 96 / 96; }
  .m-olive-sprig { --motif: url("../motifs/olive-sprig.png"); aspect-ratio: 57 / 42; }
  .m-palm { --motif: url("../motifs/palm.png"); aspect-ratio: 128 / 244; }
  .m-peach { --motif: url("../motifs/peach.png"); aspect-ratio: 29 / 48; }
  .m-pomegranate { --motif: url("../motifs/pomegranate.png"); aspect-ratio: 100 / 100; }
  .m-rosette-sm { --motif: url("../motifs/rosette-sm.png"); aspect-ratio: 37 / 32; }
  .m-sparkle { --motif: url("../motifs/sparkle.png"); aspect-ratio: 34 / 36; }
  .m-sprig { --motif: url("../motifs/sprig.png"); aspect-ratio: 59 / 83; }
  .m-star { --motif: url("../motifs/star.png"); aspect-ratio: 36 / 37; }
  .m-starfish { --motif: url("../motifs/starfish.png"); aspect-ratio: 59 / 54; }
  .m-sun { --motif: url("../motifs/sun.png"); aspect-ratio: 130 / 132; }
  .m-tile-corner { --motif: url("../motifs/tile-corner.png"); aspect-ratio: 52 / 50; }
  .m-tile-corner2 { --motif: url("../motifs/tile-corner2.png"); aspect-ratio: 54 / 51; }
  .m-tile-rosette { --motif: url("../motifs/tile-rosette.png"); aspect-ratio: 460 / 452; }
  .m-waves { --motif: url("../motifs/waves.png"); aspect-ratio: 153 / 18; }

  /* Tiling rule made from a border motif. */
  .frieze {
    inline-size: 100%;
    aspect-ratio: auto;
    block-size: var(--frieze-h, 1.1rem);
    -webkit-mask: var(--motif) left center / auto 100% repeat-x;
    mask: var(--motif) left center / auto 100% repeat-x;
    opacity: var(--motif-o, 0.45);
  }

  /* Azulejo band — a printed tile border running the full edge of a section,
     the way a painted tile column runs down a menu card. Sits behind content
     and is dropped on small screens where there is no margin to spare. */
  .tile-band {
    position: absolute;
    inset-block: 0;
    inline-size: clamp(2.25rem, 4.5vw, 4.25rem);
    background-color: var(--c-blue);
    -webkit-mask: var(--motif) top left / 100% auto repeat-y;
    mask: var(--motif) top left / 100% auto repeat-y;
    opacity: var(--motif-o, 0.55);
    pointer-events: none;
    z-index: 0;
  }
  .tile-band--start { inset-inline-start: 0; }
  .tile-band--end   { inset-inline-end: 0; }

  @media (max-width: 900px) {
    .tile-band { inline-size: 1.5rem; opacity: 0.28; }
  }
  @media (max-width: 620px) {
    .tile-band { display: none; }
  }

  /* Large, quiet background marks. Kept behind content and very faint. */
  .watermark {
    position: absolute;
    z-index: 0;
    opacity: var(--motif-o, 0.06);
  }
  .watermark + * { position: relative; z-index: 1; }

  /* Centred ornament above a heading. */
  .ornament {
    inline-size: var(--orn-w, 2rem);
    aspect-ratio: 1;
    margin-inline: auto;
  }

  /* --- Rules ------------------------------------------------------------- */
  .rule {
    border: 0;
    block-size: var(--hairline);
    background: var(--rule);
    inline-size: 100%;
  }
  .on-dark .rule { background: var(--c-ivory-16); }

  /* --- Links ------------------------------------------------------------- */
  .link {
    position: relative;
    display: inline-block;
    padding-block-end: 0.35em;
    font-size: var(--t-small);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
  }
  .link::after {
    content: "";
    position: absolute;
    inset-block-end: 0;
    inset-inline-start: 0;
    inline-size: 100%;
    block-size: var(--hairline);
    background: currentColor;
    transform: scaleX(1);
    transform-origin: right;
    transition: transform var(--d-base) var(--e-out);
  }
  .link:hover::after,
  .link:focus-visible::after {
    transform: scaleX(0);
    transform-origin: right;
  }

  /* --- Button ------------------------------------------------------------ */
  .btn {
    --btn-fg: var(--c-ivory);
    --btn-bg: var(--c-ink);
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-3);
    padding: 1.15em 2.6em;
    font-size: var(--t-small);
    font-weight: 400;
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    color: var(--btn-fg);
    background: var(--btn-bg);
    border-radius: var(--radius);
    overflow: hidden;
    isolation: isolate;
    transition: color var(--d-fast) var(--e-out);
  }
  /* A quiet wipe rather than a colour flash. */
  .btn::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--c-blue);
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform var(--d-base) var(--e-out);
  }
  .btn:hover::before,
  .btn:focus-visible::before { transform: scaleY(1); }

  .btn--ghost {
    --btn-fg: var(--c-ink);
    --btn-bg: transparent;
    box-shadow: inset 0 0 0 var(--hairline) var(--c-ink-40);
  }
  .btn--ghost:hover, .btn--ghost:focus-visible { color: var(--c-ivory); }

  .btn--gold {
    --btn-fg: var(--c-ink);
    --btn-bg: var(--c-gold);
  }
  .btn--gold:hover, .btn--gold:focus-visible { color: var(--c-ivory); }

  /* --- Figure: LQIP ground, veil reveal, optional parallax --------------- */
  .figure {
    position: relative;
    overflow: hidden;
    background-color: var(--fig-color, var(--c-stone));
    background-image: var(--fig-lqip);
    background-size: cover;
    background-position: center;
    border-radius: var(--radius);
    margin: 0;
  }
  .figure img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }
  /* The over-scale settles as the image reveals — JS only, so a no-JS page
     shows its photography immediately rather than never. */
  .js .figure img {
    transform: scale(1.08);
    opacity: 0;
    transition:
      transform var(--d-veil) var(--e-soft),
      opacity var(--d-slow) var(--e-out);
    will-change: transform, opacity;
  }
  .figure.is-in img,
  .figure img.is-eager {
    transform: scale(1);
    opacity: 1;
  }

  /* Parallax: JS writes --py, CSS does the moving. */
  .figure--parallax img {
    block-size: 118%;
    position: absolute;
    inset-block-start: -9%;
    inset-inline: 0;
    translate: 0 var(--py, 0px);
  }

  .figure figcaption {
    margin-block-start: var(--s-4);
    font-size: var(--t-small);
    color: var(--fg-muted);
    letter-spacing: var(--ls-body);
  }

  /* --- Scroll reveal ------------------------------------------------------ */
  .js .reveal {
    opacity: 0;
    translate: 0 clamp(1rem, 2.5vh, 2.25rem);
    transition:
      opacity var(--d-slow) var(--e-out),
      translate var(--d-slow) var(--e-out);
    transition-delay: var(--delay, 0ms);
  }
  .reveal.is-in { opacity: 1; translate: 0 0; }

  /* Word-level headline reveal (built by JS; degrades to plain text). */
  .split { display: inline; }
  .split .word {
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
    padding-block-end: 0.12em;
    margin-block-end: -0.12em;
  }
  .js .split .word > span {
    display: inline-block;
    translate: 0 100%;
    transition: translate var(--d-slow) var(--e-soft);
    transition-delay: calc(var(--i, 0) * 38ms + var(--delay, 0ms));
  }
  .split.is-in .word > span { translate: 0 0; }

  @media (prefers-reduced-motion: reduce) {
    .reveal, .figure img, .split .word > span {
      opacity: 1 !important;
      translate: none !important;
      transform: none !important;
    }
  }

  /* --- Veil (first paint) ------------------------------------------------
     Nothing but JS can dismiss it, so it does not exist without JS. */
  .veil { display: none; }

  .js .veil {
    position: fixed;
    inset: 0;
    z-index: var(--z-veil);
    display: grid;
    place-items: center;
    background: var(--c-ink);
    color: var(--c-ivory);
    transition: opacity var(--d-slow) var(--e-out), visibility var(--d-slow);
  }
  .veil[hidden] { display: grid; }               /* keep layout during fade */
  .veil.is-done {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
  .veil__mark {
    --mark-w: min(58vw, 22rem);
    margin-inline: auto;
    opacity: 0;
    animation: veil-in 1.4s var(--e-out) 0.15s forwards;
  }
  .veil__bar {
    inline-size: min(34vw, 190px);
    block-size: var(--hairline);
    margin-block-start: var(--s-6);
    background: var(--c-ivory-16);
    overflow: hidden;
  }
  .veil__bar::after {
    content: "";
    display: block;
    block-size: 100%;
    background: var(--c-gold);
    transform-origin: left;
    animation: veil-bar 1.5s var(--e-inout) 0.2s forwards;
    scale: 0 1;
  }
  @keyframes veil-in  { to { opacity: 1; } }
  @keyframes veil-bar { to { scale: 1 1; } }

  @media (prefers-reduced-motion: reduce) {
    .veil__mark { opacity: 1; animation: none; }
    .veil__bar::after { scale: 1 1; animation: none; }
  }

  /* --- Navigation ---------------------------------------------------------
     The bar carries only a reserve link and the burger. Every
     destination lives in the drawer. */
  .nav {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    z-index: var(--z-nav);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-5);
    padding: clamp(1.1rem, 2.4vh, 2rem) var(--gutter);
    color: var(--c-ivory);
    transition:
      background-color var(--d-base) var(--e-out),
      color var(--d-base) var(--e-out),
      padding var(--d-base) var(--e-out),
      box-shadow var(--d-base) var(--e-out),
      translate var(--d-base) var(--e-out);
  }
  .nav.is-stuck {
    background: rgb(248 246 242 / 0.86);
    -webkit-backdrop-filter: saturate(1.4) blur(14px);
    backdrop-filter: saturate(1.4) blur(14px);
    color: var(--c-ink);
    padding-block: clamp(0.7rem, 1.5vh, 1.1rem);
    box-shadow: 0 1px 0 var(--c-ink-08);
  }
  .nav.is-hidden { translate: 0 -102%; }

  /* Interior pages open on paper rather than on the hero photograph, so the
     bar has nothing dark to sit against — it carries ink from the first frame
     and only picks up the blurred backing once .is-stuck lands. */
  .nav--solid { color: var(--c-ink); }

  .nav__crest {
    display: block;
    inline-size: clamp(8.5rem, 13vw, 12rem);
    aspect-ratio: 1200 / 264;
    background-color: currentColor;
    -webkit-mask: url("../motifs/crest.png") center / contain no-repeat;
    mask: url("../motifs/crest.png") center / contain no-repeat;
  }

  .nav__right {
    display: flex;
    align-items: center;
    gap: clamp(1.25rem, 3vw, 2.5rem);
  }
  @media (max-width: 560px) { .nav__cta { display: none; } }

  /* --- Burger ------------------------------------------------------------- */
  .burger {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    color: inherit;
    padding: 0.4rem 0;
  }
  .burger__lines {
    display: grid;
    gap: 5px;
    inline-size: 1.75rem;
  }
  .burger__lines i {
    display: block;
    block-size: var(--hairline);
    background: currentColor;
    transition: translate var(--d-fast) var(--e-out),
                rotate var(--d-fast) var(--e-out),
                opacity var(--d-fast) var(--e-out),
                inline-size var(--d-base) var(--e-out);
  }
  /* the three rules step in from the right, like a ruled page */
  .burger__lines i:nth-child(1) { inline-size: 100%; }
  .burger__lines i:nth-child(2) { inline-size: 70%; justify-self: end; }
  .burger__lines i:nth-child(3) { inline-size: 100%; }
  .burger:hover .burger__lines i:nth-child(2) { inline-size: 100%; }

  .burger__label {
    font-size: var(--t-micro);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
  }

  /* burger becomes the close mark while the drawer is open */
  body[data-menu] .burger__lines i:nth-child(1) { translate: 0 6px; rotate: 45deg; }
  body[data-menu] .burger__lines i:nth-child(2) { opacity: 0; }
  body[data-menu] .burger__lines i:nth-child(3) { translate: 0 -6px; rotate: -45deg; }

  /* .nav is its own stacking context, so the burger can never out-rank the
     drawer from inside it — the whole bar has to be lifted instead. */
  body[data-menu] .nav {
    z-index: calc(var(--z-menu) + 1);
    color: var(--c-ivory);
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
    translate: 0 0;
  }

  /* --- The drawer ---------------------------------------------------------
     A navy panel that drops the full width of the window, patterned with the
     motif set and carrying both the list and three ways in. */
  .drawer {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    z-index: var(--z-menu);
    background: var(--c-ink);
    color: var(--c-ivory);
    overflow: hidden auto;
    max-block-size: 100svh;
    clip-path: inset(0 0 100% 0);
    visibility: hidden;
    transition: clip-path var(--d-slow) var(--e-inout), visibility var(--d-slow);
  }
  body[data-menu] .drawer { clip-path: inset(0 0 0 0); visibility: visible; }

  /* tiled motif ground, held right back */
  .drawer__pattern {
    position: absolute;
    inset: 0;
    background-color: var(--c-ivory);
    -webkit-mask: url("../motifs/frond-band.png") left top / 300px auto repeat;
    mask: url("../motifs/frond-band.png") left top / 300px auto repeat;
    opacity: 0.05;
    pointer-events: none;
  }

  .drawer__inner {
    position: relative;
    display: grid;
    gap: clamp(2rem, 5vh, 4rem);
    padding-block: clamp(5.5rem, 12vh, 9rem) clamp(2rem, 5vh, 3.5rem);
    min-block-size: min(100svh, 46rem);
    align-content: space-between;
  }
  .drawer__head { display: flex; justify-content: center; }
  .drawer__mark { --mark-w: clamp(8rem, 14vw, 12rem); color: var(--c-gold); }

  .drawer__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: clamp(2rem, 6vw, 5rem);
    align-items: center;
  }
  @media (max-width: 860px) {
    .drawer__body { grid-template-columns: minmax(0, 1fr); }
    .drawer__cards { display: none; }
  }

  .drawer__nav { display: grid; gap: clamp(0.15rem, 1.2vh, 0.7rem); }
  .drawer__nav a {
    display: flex;
    align-items: baseline;
    gap: clamp(1rem, 2.5vw, 2rem);
    font-family: var(--f-display);
    font-size: clamp(1.9rem, 4.6vw, 3.5rem);
    font-weight: 300;
    line-height: 1.18;
    letter-spacing: var(--ls-display);
    opacity: 0;
    translate: 0 0.5em;
    transition: opacity var(--d-base) var(--e-out),
                translate var(--d-base) var(--e-out),
                color var(--d-fast) var(--e-out);
    transition-delay: calc(var(--i) * 55ms + 160ms);
  }
  body[data-menu] .drawer__nav a { opacity: 1; translate: 0 0; }
  .drawer__nav a:hover,
  .drawer__nav a[aria-current] { color: var(--c-gold); }
  .drawer__nav em {
    font-family: var(--f-body);
    font-size: var(--t-micro);
    font-style: normal;
    letter-spacing: var(--ls-wide);
    color: var(--c-gold);
    opacity: 0.7;
    flex: none;
  }

  .drawer__cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(0.75rem, 1.6vw, 1.5rem);
  }
  .drawer__card {
    display: grid;
    gap: var(--s-4);
    opacity: 0;
    translate: 0 1rem;
    transition: opacity var(--d-base) var(--e-out), translate var(--d-base) var(--e-out);
    transition-delay: calc(var(--i) * 55ms + 160ms);
  }
  body[data-menu] .drawer__card { opacity: 1; translate: 0 0; }
  .drawer__card-media {
    display: block;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border-radius: var(--radius);
    background-color: var(--fig-color, var(--c-ink));
  }
  .drawer__card-media img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    opacity: 0.72;
    transition: opacity var(--d-base) var(--e-out), scale var(--d-veil) var(--e-soft);
  }
  .drawer__card:hover .drawer__card-media img { opacity: 1; scale: 1.04; }
  .drawer__card-label {
    font-size: var(--t-micro);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color: var(--c-ivory-70);
  }

  .drawer__foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--s-4) var(--s-7);
    padding-block-start: var(--s-5);
    border-block-start: var(--hairline) solid var(--c-ivory-16);
    font-size: var(--t-small);
    color: var(--c-ivory-45);
    opacity: 0;
    transition: opacity var(--d-base) var(--e-out) 420ms;
  }
  body[data-menu] .drawer__foot { opacity: 1; }

  @media (prefers-reduced-motion: reduce) {
    .drawer, .drawer__nav a, .drawer__card, .drawer__foot { transition: none; }
  }


  /* --- Marquee ----------------------------------------------------------- */
  .marquee {
    display: flex;
    overflow: hidden;
    user-select: none;
    gap: var(--s-7);
    mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  }
  .marquee__row {
    display: flex;
    flex: none;
    align-items: center;
    gap: var(--s-7);
    min-inline-size: 100%;
    animation: marquee 46s linear infinite;
  }
  .marquee:hover .marquee__row { animation-play-state: paused; }
  .marquee span {
    font-family: var(--f-display);
    font-size: clamp(1.5rem, 3.2vw, 2.75rem);
    font-weight: 300;
    font-style: italic;
    color: var(--c-ink-40);
    white-space: nowrap;
  }
  /* Motifs stand in for the separators between words. */
  .marquee .motif {
    inline-size: clamp(1.3rem, 2.6vw, 2.2rem);
    aspect-ratio: 1;
    color: var(--c-blue);
    opacity: 0.8;
    align-self: center;
  }
  .marquee .motif--wide { inline-size: clamp(2.5rem, 5vw, 4rem); aspect-ratio: 153 / 18; }
  @keyframes marquee { to { translate: -100% 0; } }
  @media (prefers-reduced-motion: reduce) {
    .marquee__row { animation: none; }
    .marquee { mask-image: none; flex-wrap: wrap; }
  }

  /* --- Form -------------------------------------------------------------- */
  .field { position: relative; }

  .field label {
    display: block;
    font-size: var(--t-micro);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    /* Small, tracked and uppercase — needs the extra weight to clear AA. */
    color: var(--c-ink-70);
    margin-block-end: var(--s-3);
  }

  .field input,
  .field select,
  .field textarea {
    inline-size: 100%;
    padding: 0.9em 0 0.85em;
    font-size: var(--t-lead);
    font-family: var(--f-display);
    font-weight: 300;
    letter-spacing: 0;
    color: var(--fg);
    background: transparent;
    border: 0;
    border-block-end: var(--hairline) solid var(--c-ink-40);
    border-radius: 0;
    transition: border-color var(--d-fast) var(--e-out);
    appearance: none;
  }
  .field textarea { resize: vertical; min-block-size: 4.5rem; line-height: 1.5; }

  .field input:focus,
  .field select:focus,
  .field textarea:focus {
    outline: none;
    border-block-end-color: var(--c-blue);
  }
  .field input:focus-visible,
  .field select:focus-visible,
  .field textarea:focus-visible { outline: none; }

  /* Chevron for the native select. Painted on the control itself rather than
     the wrapper, so it tracks the input box and not the error slot below it. */
  .field select {
    padding-inline-end: 1.6rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%230C1B33' stroke-opacity='.45' stroke-width='1'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.15rem center;
    background-size: 0.6rem auto;
  }

  .field__error {
    display: block;
    margin-block-start: var(--s-2);
    font-size: var(--t-small);
    color: var(--c-blue);
    min-block-size: 1.25em;
  }
  .field input[aria-invalid="true"],
  .field select[aria-invalid="true"] { border-block-end-color: var(--c-blue); }

  /* --- Cards that barely exist ------------------------------------------ */
  .plain-card {
    background: transparent;
    border: 0;
    border-block-start: var(--hairline) solid var(--rule);
    padding-block-start: var(--s-5);
  }
}

/* ==========================================================================
   SECTIONS
   ========================================================================== */
@layer sections {

  /* --- Hero -------------------------------------------------------------- */
  .hero {
    position: relative;
    min-block-size: 100svh;
    display: grid;
    grid-template-rows: 1fr auto;
    align-items: end;
    padding: 0 var(--gutter) clamp(2rem, 5vh, 4rem);
    color: var(--c-ivory);
    overflow: hidden;
    isolation: isolate;
  }

  .hero__media {
    position: absolute;
    inset: 0;
    z-index: -2;
    border-radius: 0;
  }
  .hero__media img { block-size: 112%; inset-block-start: -6%; }

  /* Scrim keeps the wordmark legible without dulling the photograph.
     Two layers: a soft pool behind the type block, over a vertical wash
     that anchors the nav at the top and the meta row at the foot. The
     architecture in this frame is near-white, so the pool does the work. */
  .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
      radial-gradient(68% 46% at 50% 44%,
        rgb(12 27 51 / 0.52) 0%,
        rgb(12 27 51 / 0.30) 52%,
        rgb(12 27 51 / 0) 100%),
      linear-gradient(180deg,
        rgb(12 27 51 / 0.62) 0%,
        rgb(12 27 51 / 0.30) 12%,
        rgb(12 27 51 / 0.12) 32%,
        rgb(12 27 51 / 0.10) 52%,
        rgb(12 27 51 / 0.32) 80%,
        rgb(12 27 51 / 0.60) 100%);
  }

  /* Small type sits over a busy, high-key photograph; a diffuse shadow keeps
     it legible wherever the crop lands without dulling the image. */
  .hero .eyebrow,
  .hero__foot { text-shadow: 0 1px 14px rgb(12 27 51 / 0.55); }

  /* Centred in the upper row rather than pushed to its foot, which lands the
     crest a touch above true viewport centre — the optical centre. */
  .hero__inner {
    grid-row: 1;
    align-self: center;
    display: grid;
    justify-items: center;
    text-align: center;
    gap: clamp(1rem, 2.5vh, 2rem);
  }

  /* The crest carries the hero; sized against the viewport so the palm and
     the leopards stay legible. */
  .hero__mark {
    margin: 0;
    line-height: 1;
  }
  .hero__crest {
    inline-size: min(74vw, 44rem);
    margin-inline: auto;
  }
  /* The logotype draws itself in, left to right, as the veil lifts. */
  .js .hero__mark .wordmark,
  .js .hero__mark .hero__crest {
    clip-path: inset(0 100% 0 0);
    transition: clip-path 1.7s var(--e-soft) 0.2s;
  }
  .hero__mark.is-in .wordmark,
  .hero__mark.is-in .hero__crest { clip-path: inset(0 0 0 0); }
  @media (prefers-reduced-motion: reduce) {
    .hero__mark .wordmark,
    .hero__mark .hero__crest { clip-path: none; transition: none; }
  }

  .hero__foot {
    grid-row: 2;
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: var(--s-5);
    font-size: var(--t-small);
    color: var(--c-ivory-70);
  }
  .hero__foot p { max-inline-size: 22ch; }

  .scroll-cue {
    display: grid;
    justify-items: center;
    gap: var(--s-3);
    font-size: var(--t-micro);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
  }
  .scroll-cue::after {
    content: "";
    inline-size: var(--hairline);
    block-size: clamp(2.5rem, 7vh, 4.5rem);
    background: linear-gradient(var(--c-ivory-45), transparent);
    animation: cue 2.8s var(--e-inout) infinite;
    transform-origin: top;
  }
  @keyframes cue {
    0%, 100% { scale: 1 0.35; opacity: 0.4; }
    50%      { scale: 1 1;    opacity: 1; }
  }
  @media (prefers-reduced-motion: reduce) {
    .scroll-cue::after { animation: none; scale: 1 1; }
  }

  @media (max-width: 720px) {
    .hero__foot { flex-direction: column; align-items: center; text-align: center; }
    .hero__foot p { max-inline-size: none; }
  }

  /* --- Statement --------------------------------------------------------- */
  .statement__text {
    grid-column: 3 / 11;
    font-family: var(--f-display);
    font-size: var(--t-display);
    font-weight: 300;
    line-height: 1.14;
    letter-spacing: var(--ls-display);
    text-align: center;
  }
  .statement__text em {
    font-style: italic;
    color: var(--c-blue);
  }
  @media (max-width: 900px) { .statement__text { grid-column: 1 / -1; } }

  /* --- About ------------------------------------------------------------- */
  .about__media { grid-column: 1 / 6; }
  .about__body  { grid-column: 7 / 12; align-self: center; position: relative; }
  @media (max-width: 900px) {
    .about__media { grid-column: 1 / 7; }
    .about__body  { grid-column: 1 / 7; }
  }

  .about__body h2 {
    font-size: var(--t-h2);
    margin-block: var(--s-5) var(--s-6);
  }
  .about__body p {
    max-inline-size: var(--measure);
    color: var(--c-ink-70);
  }
  .about__body p + p { margin-block-start: var(--s-5); }

  .facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
    gap: var(--s-5) var(--s-6);
    margin-block-start: var(--s-8);
  }
  .facts div { border-block-start: var(--hairline) solid var(--rule); padding-block-start: var(--s-4); }
  .facts dt {
    font-size: var(--t-micro);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color: var(--fg-muted);
  }
  .facts dd {
    font-family: var(--f-display);
    font-size: var(--t-h4);
    margin-block-start: var(--s-2);
  }

  /* --- Full-bleed quote -------------------------------------------------- */
  .band {
    position: relative;
    min-block-size: clamp(24rem, 62vh, 40rem);
    display: grid;
    align-items: center;
    overflow: hidden;
    isolation: isolate;
  }
  .band__media { position: absolute; inset: 0; z-index: -2; border-radius: 0; }
  /* The photograph is high-key and the quote sits in ink, so the scrim
     lifts the left edge toward ivory rather than darkening it. */
  .band--scrim::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg,
      rgb(248 246 242 / 0.88) 0%,
      rgb(248 246 242 / 0.70) 30%,
      rgb(248 246 242 / 0.20) 58%,
      rgb(248 246 242 / 0) 78%);
  }
  .band__quote {
    grid-column: 1 / -1;
    max-inline-size: 24ch;
    font-family: var(--f-display);
    font-size: clamp(1.75rem, 4vw, 3.5rem);
    font-weight: 300;
    font-style: italic;
    line-height: 1.2;
    color: var(--c-ink);
  }
  .band__quote cite {
    display: block;
    margin-block-start: var(--s-5);
    font-family: var(--f-body);
    font-size: var(--t-micro);
    font-style: normal;
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color: var(--c-ink-70);
  }

  /* --- Menu -------------------------------------------------------------- */
  .menu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
    gap: clamp(2.5rem, 4vw, 4.5rem) clamp(1.5rem, 3vw, 3rem);
    margin-block-start: clamp(3rem, 7vh, 5.5rem);
  }

  .dish__media { aspect-ratio: 4 / 5; }
  .dish__head {
    display: flex;
    align-items: baseline;
    gap: var(--s-4);
    margin-block-start: var(--s-5);
  }
  .dish__no {
    font-family: var(--f-body);
    font-size: var(--t-micro);
    letter-spacing: var(--ls-wide);
    color: var(--c-gold);
    flex: none;
  }
  .dish h3 { font-size: var(--t-h3); line-height: 1.16; }
  .dish__desc {
    margin-block-start: var(--s-3);
    color: var(--c-ink-55);
    max-inline-size: 34ch;
  }
  .dish__note {
    margin-block-start: var(--s-4);
    font-size: var(--t-micro);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color: var(--c-ink-40);
  }
  /* The photograph lifts a little; the card itself stays invisible. */
  .dish__media img { transition: transform var(--d-veil) var(--e-soft), opacity var(--d-slow) var(--e-out); }
  .dish:hover .dish__media.is-in img { transform: scale(1.045); }

  /* --- The menu book ------------------------------------------------------
     Two cartes, turned a page at a time. Without JS every page simply stacks
     and the whole menu reads as one long document. */
  .book {
    margin-block-start: clamp(3rem, 7vh, 5.5rem);
    max-inline-size: 62rem;
    margin-inline: auto;
  }

  .book__tabs {
    display: flex;
    justify-content: center;
    gap: clamp(1.5rem, 4vw, 3.5rem);
    margin-block-end: clamp(1.5rem, 3vh, 2.5rem);
  }
  .book__tab {
    position: relative;
    font-family: var(--f-display);
    font-size: var(--t-h4);
    font-weight: 300;
    color: var(--c-ink-40);
    padding-block-end: 0.5em;
    transition: color var(--d-base) var(--e-out);
  }
  .book__tab::after {
    content: "";
    position: absolute;
    inset-block-end: 0;
    inset-inline-start: 0;
    inline-size: 100%;
    block-size: var(--hairline);
    background: currentColor;
    scale: 0 1;
    transition: scale var(--d-base) var(--e-out);
  }
  .book__tab.is-on { color: var(--c-ink); }
  .book__tab.is-on::after,
  .book__tab:hover::after { scale: 1 1; }

  /* The stage holds the perspective the page turn rotates within. */
  .book__stage {
    position: relative;
    perspective: 2200px;
  }

  /* The tile column belongs to the stage, not to each page: six repeating
     masks inside a 3D perspective is more than the compositor will bear. */
  .book__band {
    z-index: 4;
    opacity: 0.4;
  }

  .book__page {
    position: relative;
    background-color: var(--c-ivory);
    background-image:
      linear-gradient(rgb(250 248 245 / 0.72), rgb(250 248 245 / 0.72)),
      url("../textures/limestone.webp");
    background-size: auto, 420px;
    box-shadow: 0 18px 44px -28px rgb(12 27 51 / 0.28);
    border-radius: var(--radius-lg);
    overflow: hidden;
    /* the printed frame that sits just inside the paper edge */
    outline: var(--hairline) solid var(--c-ink-12);
    outline-offset: -0.75rem;
  }
  .book__page + .book__page { margin-block-start: var(--s-6); }

  /* Pages of the active carte stack in one grid cell, so the stage takes the
     height of the tallest without any JS measurement. */
  .js .book__stage { display: grid; }
  .js .book__stage > .book__page {
    grid-area: 1 / 1;
    margin: 0;
    transform-origin: left center;
    backface-visibility: hidden;
    transition: transform var(--d-slow) var(--e-inout), opacity var(--d-base) var(--e-out);
  }
  .js .book__page[data-state="current"] {
    transform: rotateY(0deg);
    opacity: 1;
    z-index: 3;
  }
  .js .book__page[data-state="next"] {
    transform: rotateY(0deg);
    opacity: 0;
    z-index: 1;
    pointer-events: none;
  }
  /* Turned pages swing away on their spine. */
  .js .book__page[data-state="turned"] {
    transform: rotateY(-118deg);
    opacity: 0;
    z-index: 2;
    pointer-events: none;
  }
  .js .book__page[data-state="hidden"] { display: none; }

  /* --- The printed card ---------------------------------------------------
     A dense ornament band across the head, a navy plate carrying the mark,
     then two columns of dishes — after the engraved menu cards it is copied
     from. */
  .menu-card__crest {
    position: relative;
    margin-block-end: clamp(3.5rem, 7vw, 5.5rem);
  }
  .menu-card__band {
    display: block;
    block-size: clamp(5.5rem, 11vw, 9rem);
    background-color: var(--c-blue);
    /* mirrored 2x2 tile — repeats without a visible seam */
    -webkit-mask: url("../motifs/frond-band.png") left top / auto 100% repeat-x;
    mask: url("../motifs/frond-band.png") left top / auto 100% repeat-x;
    opacity: 0.85;
  }
  .menu-card__plate {
    position: absolute;
    inset-block-end: 0;
    inset-inline: 50%;
    translate: -50% 42%;
    inline-size: min(58%, 22rem);
    display: grid;
    justify-items: center;
    gap: var(--s-3);
    padding: clamp(1.1rem, 2.5vw, 1.75rem) clamp(1.5rem, 4vw, 3rem);
    background: var(--c-ink);
    color: var(--c-ivory);
    border-radius: var(--radius);
  }
  .menu-card__plate .wordmark { --mark-w: min(100%, 13rem); }
  .menu-card__sub {
    font-family: var(--f-display);
    font-style: italic;
    font-size: var(--t-body);
    color: var(--c-gold);
    letter-spacing: var(--ls-body);
  }

  /* A very faint rosette behind the columns, as on a printed card. */
  /* faint rosette behind the columns */
  .menu-card__wm {
    position: absolute;
    inset-block-start: 46%;
    inset-inline-start: 50%;
    translate: -50% -50%;
    inline-size: min(48%, 22rem);
    aspect-ratio: 460 / 452;
    color: var(--c-blue);
    opacity: 0.075;
    z-index: 0;
  }

  .menu-card__body {
    position: relative;
    z-index: 1;
    padding: 0 clamp(1.75rem, 5vw, 4.5rem) clamp(2.5rem, 5vw, 4rem);
  }
  .menu-card__folio {
    margin-block-start: clamp(1.5rem, 3vh, 2.5rem);
    text-align: center;
    font-family: var(--f-display);
    font-size: var(--t-body);
    letter-spacing: var(--ls-wide);
    color: var(--c-ink-40);
  }

  .book__cols {
    columns: 2;
    column-gap: clamp(2rem, 5vw, 4rem);
  }
  @media (max-width: 760px) { .book__cols { columns: 1; } }

  .menu-group {
    break-inside: avoid;
    margin-block-end: clamp(2rem, 4vh, 3rem);
  }
  .menu-group__title {
    font-family: var(--f-display);
    font-size: var(--t-h3);
    font-weight: 400;
    color: var(--c-ink);
    padding-block-end: var(--s-3);
    margin-block-end: var(--s-5);
    border-block-end: var(--hairline) solid var(--c-ink-40);
  }

  .dish-list { display: grid; gap: clamp(1.1rem, 2.2vh, 1.6rem); }

  .dish-row__head {
    display: flex;
    align-items: baseline;
    gap: var(--s-4);
  }
  .dish-row__name {
    font-family: var(--f-body);
    font-size: var(--t-small);
    font-weight: 500;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--c-ink);
    line-height: 1.35;
  }
  .dish-row__name em {
    font-family: var(--f-display);
    font-size: 1.15em;
    font-style: italic;
    letter-spacing: 0;
    text-transform: none;
    color: var(--c-ink-55);
  }
  .dish-row__price {
    margin-inline-start: auto;
    flex: none;
    font-family: var(--f-body);
    font-size: var(--t-small);
    font-weight: 400;
    color: var(--c-ink-70);
    /* Cormorant defaults to old-style figures; prices need lining ones. */
    font-variant-numeric: lining-nums tabular-nums;
  }
  .dish-row__desc {
    margin-block-start: var(--s-2);
    font-family: var(--f-display);
    font-style: italic;
    font-size: var(--t-body);
    line-height: 1.5;
    color: var(--c-ink-55);
    max-inline-size: 40ch;
  }

  .book__nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(1.5rem, 4vw, 3rem);
    margin-block-start: clamp(1.5rem, 3vh, 2.5rem);
  }
  .book__arrow {
    inline-size: 2.75rem;
    block-size: 2.75rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: var(--c-ink);
    box-shadow: inset 0 0 0 var(--hairline) var(--c-ink-12);
    transition: background-color var(--d-fast) var(--e-out),
                color var(--d-fast) var(--e-out),
                box-shadow var(--d-fast) var(--e-out);
  }
  .book__arrow:hover:not(:disabled) {
    background: var(--c-ink);
    color: var(--c-ivory);
    box-shadow: none;
  }
  .book__arrow:disabled { opacity: 0.25; cursor: default; }
  .book__count {
    font-size: var(--t-micro);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color: var(--c-ink-55);
    min-inline-size: 9ch;
    text-align: center;
  }
  /* Page turning is the whole point, so the nav is meaningless without JS. */
  .book__nav, .book__tabs { display: none; }
  .js .book__nav { display: flex; }
  .js .book__tabs { display: flex; }

  @media (prefers-reduced-motion: reduce) {
    .js .book__page[data-state="turned"] { transform: none; }
  }

  /* --- People — one at a time, after a printed portrait plate ------------- */
  .visionary-stack {
    position: relative;
    margin-block-start: clamp(3rem, 7vh, 5.5rem);
    padding-inline-end: clamp(0rem, 4vw, 3.5rem);
  }

  .visionary__stage { position: relative; display: grid; }

  .visionary {
    grid-area: 1 / 1;
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr);
    gap: clamp(2rem, 6vw, 6rem);
    align-items: center;
    transition: opacity var(--d-base) var(--e-out), translate var(--d-slow) var(--e-out);
  }
  .js .visionary[data-state="hidden"] { opacity: 0; translate: 0 1.25rem; pointer-events: none; }
  .js .visionary[data-state="current"] { opacity: 1; translate: 0 0; }
  @media (max-width: 900px) { .visionary { grid-template-columns: minmax(0, 1fr); } }

  /* the portrait plate — a print on a signed mount */
  .plate {
    background: var(--c-ivory);
    padding: clamp(0.75rem, 1.6vw, 1.25rem);
    padding-block-end: clamp(3rem, 5vw, 4.25rem);
    box-shadow: 0 24px 60px -34px rgb(12 27 51 / 0.45);
    position: relative;
    margin: 0;
  }
  .plate__media {
    aspect-ratio: 4 / 5;
    border-radius: 0;
    position: relative;
    isolation: isolate;
  }
  /* Desaturated, then tinted toward the house navy — three portraits shot by
     three different photographers end up reading as one commission. */
  .plate__media img { filter: grayscale(1) contrast(1.08) brightness(0.97); }
  .plate__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--c-blue);
    mix-blend-mode: color;
    opacity: 0.22;
    pointer-events: none;
  }

  .plate__foot {
    position: absolute;
    inset-inline: clamp(1.25rem, 2.6vw, 2rem);
    inset-block-end: clamp(0.6rem, 1.4vw, 1.1rem);
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--s-5);
  }
  .plate__sign {
    font-family: "Mrs Saint Delafield", var(--f-display), cursive;
    font-size: clamp(1.5rem, 2.8vw, 2.25rem);
    line-height: 1;
    color: var(--c-ink);
  }
  .plate__mark { --mark-w: clamp(4rem, 7vw, 5.5rem); color: var(--c-ink-40); }

  .visionary__body { position: relative; }

  /* the ghosted ordinal behind the name */
  .visionary__no {
    position: absolute;
    inset-block-start: -0.42em;
    inset-inline-start: -0.1em;
    font-family: var(--f-display);
    font-size: clamp(5rem, 11vw, 9rem);
    line-height: 1;
    color: var(--c-ink);
    opacity: 0.07;
    pointer-events: none;
    z-index: -1;
    font-variant-numeric: lining-nums;
  }
  .visionary__kicker { color: var(--c-gold); }

  .visionary__name {
    font-size: clamp(2.25rem, 5vw, 4rem);
    font-weight: 300;
    line-height: 1.02;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    margin-block-start: var(--s-5);
  }
  /* the script line rides up over the last line of the name */
  .visionary__tag {
    font-family: "Mrs Saint Delafield", var(--f-display), cursive;
    font-size: clamp(1.6rem, 3.2vw, 2.5rem);
    line-height: 1;
    color: var(--c-blue);
    margin-block-start: -0.3em;
    margin-inline-start: clamp(1.5rem, 5vw, 4.5rem);
  }
  .visionary__bio {
    margin-block-start: var(--s-6);
    color: var(--c-ink-70);
    max-inline-size: 46ch;
  }
  .visionary__nav {
    display: flex;
    gap: var(--s-4);
    margin-block-start: clamp(1.75rem, 3.5vh, 2.75rem);
  }
  .visionary__nav .book__arrow { border-radius: var(--radius); }
  .visionary__rule { margin-block-start: clamp(1.75rem, 3.5vh, 2.75rem); }
  .visionary__note {
    margin-block-start: var(--s-5);
    font-size: var(--t-small);
    color: var(--c-ink-55);
    max-inline-size: 46ch;
  }

  /* numbered pagination down the trailing edge */
  .visionary__pager {
    position: absolute;
    inset-inline-end: 0;
    inset-block-start: 50%;
    translate: 0 -50%;
    display: grid;
    gap: var(--s-4);
    justify-items: end;
  }
  .visionary__dot {
    font-family: var(--f-display);
    font-size: var(--t-body);
    color: var(--c-ink-40);
    font-variant-numeric: lining-nums;
    transition: color var(--d-fast) var(--e-out);
  }
  .visionary__dot.is-on { color: var(--c-ink); font-style: italic; }
  .visionary__dot:hover { color: var(--c-blue); }

  @media (max-width: 900px) {
    .visionary__pager {
      position: static;
      translate: none;
      grid-auto-flow: column;
      justify-content: center;
      margin-block-start: var(--s-7);
    }
    .visionary-stack { padding-inline-end: 0; }
  }

  /* Without JS all three stack and every one reads. */
  .visionary__nav, .visionary__pager { display: none; }
  .js .visionary__nav { display: flex; }
  .js .visionary__pager { display: grid; }

  .wm-people {
    inline-size: clamp(9rem, 16vw, 15rem);
    aspect-ratio: 116 / 118;
    inset-block-start: calc(var(--section-y) * 0.3);
    inset-inline-end: var(--gutter);
    color: var(--c-blue);
    --motif-o: 0.15;
  }

  /* --- Wine -------------------------------------------------------------- */
  .wine__head { grid-column: 1 / 7; }
  .wine__aside { grid-column: 9 / 13; align-self: end; color: var(--c-ink-70); }
  @media (max-width: 900px) {
    .wine__head, .wine__aside { grid-column: 1 / -1; }
  }

  .rail {
    margin-block-start: clamp(2.5rem, 6vh, 4.5rem);
    display: flex;
    gap: clamp(1.5rem, 3vw, 3rem);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    /* bleed to the viewport edge, then pad back to the gutter */
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    /* Snap targets align to the scrollport edge, which would otherwise sit
       inside the padding and make the browser scroll the gutter away. */
    scroll-padding-inline: var(--gutter);
    padding-block-end: var(--s-6);
    cursor: grab;
    overscroll-behavior-x: contain;
  }
  .rail::-webkit-scrollbar { display: none; }
  .rail.is-dragging { cursor: grabbing; scroll-snap-type: none; }
  .rail.is-dragging * { pointer-events: none; }

  .rail > * {
    flex: 0 0 clamp(15rem, 25vw, 21rem);
    scroll-snap-align: start;
  }
  .rail__ambient { flex-basis: clamp(13rem, 20vw, 17rem); aspect-ratio: 3 / 4; }

  .wine {
    display: grid;
    align-content: start;
    gap: var(--s-3);
    padding-block-start: var(--s-5);
    border-block-start: var(--hairline) solid var(--c-ink-12);
    min-block-size: clamp(13rem, 22vw, 17rem);
  }
  .wine__vintage {
    font-family: var(--f-body);
    font-size: var(--t-micro);
    letter-spacing: var(--ls-eyebrow);
    color: var(--c-gold);
  }
  .wine h3 { font-size: var(--t-h4); line-height: 1.22; }
  .wine__region {
    font-size: var(--t-small);
    color: var(--c-ink-55);
    font-style: italic;
    font-family: var(--f-display);
    font-size: var(--t-body);
  }
  .wine__meta {
    margin-block-start: auto;
    display: flex;
    justify-content: space-between;
    gap: var(--s-4);
    font-size: var(--t-micro);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    color: var(--c-ink-40);
    padding-block-start: var(--s-5);
  }

  .rail-hint {
    margin-block-start: var(--s-5);
    font-size: var(--t-micro);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color: var(--c-ink-40);
  }

  /* --- Gallery ----------------------------------------------------------- */
  .gallery {
    /* the heading block is short — it does not need a full section rhythm */
    margin-block-start: clamp(1.5rem, 3vh, 2.5rem);
    columns: 3;
    column-gap: clamp(1rem, 2.2vw, 2.5rem);
  }
  @media (max-width: 980px) { .gallery { columns: 2; } }
  @media (max-width: 560px) { .gallery { columns: 1; } }

  .gallery > figure {
    break-inside: avoid;
    margin-block-end: clamp(1rem, 2.2vw, 2.5rem);
  }


  /* The gallery heading is a single line; give the section a tighter rhythm
     than the rest so the masonry starts close under it. */
  #gallery { padding-block: clamp(4rem, 9vh, 8rem); }
  #gallery .grid { gap: clamp(1rem, 2vw, 2rem); }

  /* --- Reservations ------------------------------------------------------ */
  .reserve__head { grid-column: 1 / 6; }
  .reserve__form { grid-column: 7 / 13; }
  @media (max-width: 900px) {
    .reserve__head, .reserve__form { grid-column: 1 / -1; }
    .reserve__form { margin-block-start: var(--s-7); }
  }

  .form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-6) var(--s-6);
  }
  .form-grid > .field--full { grid-column: 1 / -1; }
  @media (max-width: 520px) {
    .form-grid { grid-template-columns: minmax(0, 1fr); }
  }

  .form-foot {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-5);
    margin-block-start: var(--s-4);
  }
  .form-foot p { font-size: var(--t-small); color: var(--fg-muted); max-inline-size: 30ch; }

  .form-status {
    grid-column: 1 / -1;
    font-size: var(--t-small);
  }
  .form-status:not(:empty) {
    padding: var(--s-4) var(--s-5);
    border-inline-start: 2px solid var(--c-olive);
    background: rgb(91 107 71 / 0.07);
  }


  /* --- Opening hours, one block per part of the house --------------------- */
  .hours {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
    gap: clamp(1.5rem, 3vw, 3rem);
    margin-block-start: clamp(3rem, 7vh, 5rem);
    padding-block-start: clamp(1.75rem, 3.5vh, 2.75rem);
    border-block-start: var(--hairline) solid var(--rule);
  }
  .hours > div { display: grid; align-content: start; gap: var(--s-3); }
  .hours .motif { color: var(--c-blue); opacity: 0.75; margin-block-end: var(--s-3); }
  .hours h3 {
    font-family: var(--f-body);
    font-size: var(--t-micro);
    font-weight: 500;
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color: var(--c-ink);
  }
  .hours p { font-size: var(--t-small); color: var(--c-ink-55); }
  .hours__time {
    font-family: var(--f-display);
    font-size: var(--t-h4) !important;
    color: var(--c-ink) !important;
    font-variant-numeric: lining-nums;
  }

  /* attribution under the house motto */
  .statement__by {
    margin-block-start: var(--s-6);
    text-align: center;
    font-size: var(--t-micro);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color: var(--c-gold);
  }
  @media (max-width: 900px) { .statement__by { grid-column: 1 / -1 !important; } }

  /* --- The day: an hour-by-hour list ------------------------------------- */
  .day {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
    gap: clamp(2rem, 4vw, 3.5rem);
    margin-block-start: clamp(3rem, 7vh, 5rem);
    counter-reset: none;
  }
  .day__step {
    display: grid;
    align-content: start;
    gap: var(--s-3);
    padding-block-start: var(--s-5);
    border-block-start: var(--hairline) solid var(--rule);
  }
  .day__hour {
    font-family: var(--f-display);
    font-size: var(--t-h3);
    color: var(--c-blue);
    font-variant-numeric: lining-nums;
    line-height: 1;
  }
  .day__step h3 {
    font-size: var(--t-h4);
    margin-block-start: var(--s-2);
  }
  .day__step p {
    margin-block-start: var(--s-2);
    font-size: var(--t-small);
    line-height: 1.6;
    color: var(--c-ink-55);
  }

  /* watermarks for the new sections */
  .wm-welcome {
    inline-size: clamp(8rem, 14vw, 13rem);
    aspect-ratio: 128 / 244;
    inset-block-start: calc(var(--section-y) * 0.3);
    inset-inline-end: calc(var(--gutter) * 0.3);
    color: var(--c-olive);
    --motif-o: 0.13;
  }
  .wm-cuisine {
    inline-size: clamp(8rem, 14vw, 13rem);
    aspect-ratio: 100 / 100;
    inset-block-start: calc(var(--section-y) * 0.4);
    inset-inline-end: var(--gutter);
    color: var(--c-blue);
    --motif-o: 0.15;
  }
  .wm-exp {
    inline-size: clamp(9rem, 15vw, 14rem);
    aspect-ratio: 1;
    inset-block-start: calc(var(--section-y) * 0.35);
    inset-inline-end: calc(var(--gutter) * 0.6);
    color: var(--c-blue);
    --motif-o: 0.12;
  }

  /* --- Ornament placement -------------------------------------------------
     Motifs are accents, not decoration: one per section, small or very faint,
     and always behind or beside the content rather than competing with it. */

  /* Sits above a centred heading. */
  .orn-lead {
    display: grid;
    justify-items: center;
    gap: var(--s-6);
    margin-block-end: var(--s-7);
    color: var(--c-blue);
  }
  .orn-lead .motif { opacity: 0.65; }

  /* Small mark set beside a section eyebrow. */
  .head-motif {
    inline-size: clamp(2.25rem, 3.8vw, 3.25rem);
    color: var(--c-blue);
    opacity: 0.85;
    margin-block-end: var(--s-5);
  }
  .head-motif--tall { inline-size: clamp(1.9rem, 3vw, 2.5rem); }

  /* Oversized, near-invisible marks that give each section a quiet identity. */
  .wm-menu {
    inline-size: clamp(14rem, 26vw, 26rem);
    aspect-ratio: 1;
    inset-block-start: calc(var(--section-y) * 0.28);
    inset-inline-end: var(--gutter);
    color: var(--c-blue);
    --motif-o: 0.17;
  }
  .wm-gallery {
    inline-size: clamp(12rem, 22vw, 22rem);
    aspect-ratio: 342 / 355;
    inset-block-start: calc(var(--section-y) * 0.3);
    inset-inline-end: var(--gutter);
    color: var(--c-blue);
    --motif-o: 0.19;
  }
  .wm-reserve {
    inline-size: clamp(10rem, 18vw, 17rem);
    aspect-ratio: 1;
    inset-block-start: calc(var(--section-y) * 0.35);
    inset-inline-end: calc(var(--gutter) * 1.4);
    color: var(--c-blue);
    --motif-o: 0.16;
  }
  .wm-about {
    inline-size: clamp(9rem, 15vw, 14rem);
    aspect-ratio: 1;
    inset-block-start: -4.5rem;
    inset-inline-end: 0;
    color: var(--c-olive);
    --motif-o: 0.2;
  }
  @media (max-width: 620px) {
    /* Watermarks read as clutter once the layout is a single column. */
    .watermark { display: none; }
  }

  /* Secondary watermarks — each section gets one more quiet mark so the
     motif set is actually used rather than warehoused. */
  .wm-about-2 {
    inline-size: clamp(7rem, 12vw, 11rem);
    aspect-ratio: 100 / 100;
    inset-block-end: -2rem;
    inset-inline-start: -2.5rem;
    color: var(--c-blue);
    --motif-o: 0.19;
  }
  .wm-gallery-2 {
    inline-size: clamp(8rem, 15vw, 14rem);
    aspect-ratio: 128 / 244;
    inset-block-end: calc(var(--section-y) * 0.2);
    inset-inline-start: calc(var(--gutter) * 0.2);
    color: var(--c-olive);
    --motif-o: 0.18;
  }
  .wm-people-2 {
    inline-size: clamp(7rem, 12vw, 11rem);
    aspect-ratio: 130 / 186;
    inset-block-start: calc(var(--section-y) * 0.25);
    inset-inline-start: calc(var(--gutter) * 0.1);
    color: var(--c-blue);
    --motif-o: 0.2;
  }
  .wm-menu-2 {
    inline-size: clamp(6rem, 10vw, 9rem);
    aspect-ratio: 100 / 174;
    inset-block-start: calc(var(--section-y) * 0.9);
    inset-inline-start: calc(var(--gutter) * 0.15);
    color: var(--c-blue);
    --motif-o: 0.18;
  }
  .wm-reserve-2 {
    inline-size: clamp(5rem, 8vw, 7rem);
    aspect-ratio: 42 / 93;
    inset-block-end: calc(var(--section-y) * 0.2);
    inset-inline-start: calc(var(--gutter) * 0.2);
    color: var(--c-olive);
    --motif-o: 0.2;
  }
  .wm-footer {
    inline-size: clamp(9rem, 16vw, 15rem);
    aspect-ratio: 195 / 296;
    inset-block-start: 2rem;
    inset-inline-end: var(--gutter);
    color: var(--c-gold);
    --motif-o: 0.13;
  }
  .wm-band {
    inline-size: clamp(5rem, 9vw, 8rem);
    aspect-ratio: 90 / 78;
    inset-block-end: 2rem;
    inset-inline-end: var(--gutter);
    color: var(--c-blue);
    --motif-o: 0.2;
  }

  /* Small inline accents. */
  .accent {
    inline-size: var(--acc, 1.5rem);
    color: var(--c-blue);
    opacity: 0.5;
  }
  .orn-lead .accent { --acc: 1.1rem; opacity: 0.45; }

  /* Corner tiles on the printed menu card. */
  .menu-card__corner {
    position: absolute;
    inline-size: clamp(1.75rem, 3vw, 2.6rem);
    aspect-ratio: 1;
    color: var(--c-blue);
    opacity: 0.5;
    z-index: 1;
  }
  .menu-card__corner--bl { inset-block-end: 1.5rem; inset-inline-start: 1.5rem; }
  .menu-card__corner--br { inset-block-end: 1.5rem; inset-inline-end: 1.5rem; }

  /* Full-width rules built from the border motifs. The source strokes are
     fine, so these need real height or they dissolve into the ground. */
  .rule-motif {
    color: var(--c-blue);
    --motif-o: 0.62;
    --frieze-h: 1.15rem;
  }
  .rule-motif--waves { --frieze-h: 1.1rem; --motif-o: 0.55; }

  /* --- Footer ------------------------------------------------------------ */
  .footer {
    /* watermarks inside are absolutely positioned and need this to anchor to */
    position: relative;
    overflow: hidden;
    background: var(--c-ink-deep);
    color: var(--c-ivory-70);
    padding-block: clamp(4rem, 10vh, 8rem) clamp(2rem, 5vh, 3rem);
  }
  .footer a:hover { color: var(--c-gold); }

  .footer__mark {
    --mark-w: min(72vw, 20rem);
    color: var(--c-gold);
    line-height: 1;
  }

  .footer__top { grid-column: 1 / 5; }
  .footer__nav { grid-column: 6 / 8; }
  .footer__visit { grid-column: 8 / 10; }
  .footer__news { grid-column: 10 / 13; }
  @media (max-width: 900px) {
    .footer__top   { grid-column: 1 / -1; }
    .footer__nav   { grid-column: 1 / 3; }
    .footer__visit { grid-column: 3 / 7; }
    .footer__news  { grid-column: 1 / -1; }
  }

  .footer h2 {
    font-family: var(--f-body);
    font-size: var(--t-micro);
    font-weight: 400;
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color: var(--c-ivory-45);
    margin-block-end: var(--s-5);
  }
  .footer ul { list-style: none; display: grid; gap: var(--s-3); }
  .footer address { font-style: normal; }

  .subscribe {
    display: flex;
    align-items: center;
    gap: var(--s-4);
    border-block-end: var(--hairline) solid var(--c-ivory-16);
    padding-block-end: var(--s-3);
  }
  .subscribe input {
    flex: 1 1 auto;
    min-inline-size: 0;
    background: transparent;
    border: 0;
    padding-block: var(--s-3);
    color: var(--c-ivory);
    font-family: var(--f-display);
    font-size: var(--t-lead);
  }
  .subscribe input::placeholder { color: var(--c-ivory-45); }
  .subscribe input:focus { outline: none; }
  .subscribe button {
    flex: none;
    font-size: var(--t-micro);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color: var(--c-gold);
    padding: var(--s-2);
  }

  .footer__base {
    margin-block-start: clamp(3rem, 8vh, 6rem);
    padding-block-start: var(--s-5);
    border-block-start: var(--hairline) solid var(--c-ivory-16);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--s-4) var(--s-6);
    font-size: var(--t-small);
    color: var(--c-ivory-45);
  }
  .footer__base ul { display: flex; flex-wrap: wrap; gap: var(--s-5); }
}

/* ==========================================================================
   UTILITIES
   ========================================================================== */
@layer utilities {
  .visually-hidden:not(:focus):not(:active) {
    position: absolute !important;
    inline-size: 1px; block-size: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .skip-link {
    position: absolute;
    inset-block-start: var(--s-4);
    inset-inline-start: var(--s-4);
    z-index: calc(var(--z-veil) + 1);
    padding: var(--s-3) var(--s-5);
    background: var(--c-ink);
    color: var(--c-ivory);
    font-size: var(--t-small);
    border-radius: var(--radius);
    translate: 0 -300%;
    transition: translate var(--d-fast) var(--e-out);
  }
  .skip-link:focus { translate: 0 0; }

  .lead   { font-size: var(--t-lead); line-height: 1.62; color: var(--c-ink-70); }
  .muted  { color: var(--fg-muted); }
  .gold   { color: var(--c-gold); }
  .serif  { font-family: var(--f-display); }
  .italic { font-style: italic; }
  .center { text-align: center; }

  .mt-5 { margin-block-start: var(--s-5); }
  .mt-6 { margin-block-start: var(--s-6); }
  .mt-7 { margin-block-start: var(--s-7); }
  .mt-8 { margin-block-start: var(--s-8); }

  .flow-sm { --flow: var(--s-4); }
  .flow-lg { --flow: var(--s-7); }
}