@layer reset, tokens, base, components, pages, responsive, motion;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body, h1, h2, h3, p, figure, ol, dl, dd { margin: 0; }
  button, input, select, textarea { font: inherit; }
  img { display: block; max-width: 100%; }
  button, a { -webkit-tap-highlight-color: transparent; }
}

@layer tokens {
  :root {
    --bone: #f1eadb;
    --bone-deep: #ddd0bb;
    --paper: #f7f1e7;
    --ink: #231c19;
    --ink-soft: #524640;
    --red: #9f3126;
    --red-dark: #65221c;
    --saffron: #d9952e;
    --ash: #8b8177;
    --serif: "Iowan Old Style", "Baskerville", "Times New Roman", serif;
    --sans: "Aptos", "Segoe UI", Arial, sans-serif;
    --hand: "Segoe Print", "Bradley Hand", cursive;
    --gutter: clamp(1.2rem, 4.2vw, 5.5rem);
    --content: 1500px;
    --ease-out: cubic-bezier(.2, .8, .2, 1);
    --rule: rgba(35, 28, 25, .16);
  }
}

@layer base {
  html { background: var(--ink); }
  body {
    min-width: 320px;
    overflow-x: hidden;
    background:
      radial-gradient(circle at 22% 9%, rgba(217, 149, 46, .08), transparent 22rem),
      var(--bone);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.5;
    text-rendering: optimizeLegibility;
  }
  body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 90;
    pointer-events: none;
    opacity: .18;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.23'/%3E%3C/svg%3E");
    mix-blend-mode: multiply;
  }
  a { color: inherit; text-decoration: none; }
  button { color: inherit; }
  ::selection { background: var(--red); color: var(--paper); }
  :focus-visible { outline: 2px solid var(--saffron); outline-offset: 4px; }
  h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: .94; letter-spacing: -.045em; }
  h2 { font-size: clamp(3.3rem, 7vw, 7.6rem); }
  p { text-wrap: pretty; }
  .section-shell { width: min(100%, var(--content)); margin-inline: auto; padding-inline: var(--gutter); }
  .eyebrow {
    font-family: var(--sans);
    font-size: .71rem;
    font-weight: 650;
    line-height: 1;
    letter-spacing: .18em;
    text-transform: uppercase;
  }
  .hand-note { color: var(--red); font-family: var(--hand); font-size: clamp(.78rem, 1.2vw, 1rem); transform: rotate(-1.4deg); }
  .page-top { padding-top: 6.5rem; }
  .skip-link {
    position: fixed;
    top: 1rem;
    left: 1rem;
    z-index: 200;
    padding: .8rem 1rem;
    transform: translateY(-180%);
    background: var(--paper);
    border: 1px solid var(--ink);
  }
  .skip-link:focus { transform: translateY(0); }
}

@layer components {
  .ember-canvas { position: fixed; inset: 0; z-index: 1; pointer-events: none; }
  .site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 80;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    min-height: 74px;
    padding: .75rem var(--gutter);
    color: var(--paper);
    background: linear-gradient(to bottom, rgba(24, 18, 16, .87), rgba(24, 18, 16, .28), transparent);
    transition: background .3s ease;
  }
  .brand { display: inline-flex; align-items: center; gap: .65rem; width: max-content; font-family: var(--serif); font-size: 1.08rem; letter-spacing: -.02em; }
  .mark { width: 31px; height: 31px; overflow: visible; }
  .mark path { fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
  .site-nav { display: flex; align-items: center; gap: clamp(1.2rem, 3vw, 3.2rem); font-size: .72rem; font-weight: 650; letter-spacing: .11em; text-transform: uppercase; }
  .site-nav a { position: relative; min-height: 44px; display: inline-flex; align-items: center; opacity: .72; }
  .site-nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 8px; height: 1px; background: var(--saffron); transition: right .3s var(--ease-out); }
  .site-nav a:hover, .site-nav a:focus-visible, .site-nav a[aria-current="page"] { opacity: 1; }
  .site-nav a:hover::after, .site-nav a[aria-current="page"]::after { right: 0; }
  .header-actions { justify-self: end; display: flex; align-items: center; gap: .7rem; }
  .motion-toggle, .nav-toggle {
    min-height: 44px;
    padding: 0 .8rem;
    color: inherit;
    border: 0;
    background: transparent;
    cursor: pointer;
    font-size: .66rem;
    letter-spacing: .09em;
    text-transform: uppercase;
  }
  .motion-toggle { display: inline-flex; align-items: center; gap: .45rem; opacity: .72; }
  .motion-toggle span { color: var(--saffron); font-size: 1rem; }
  .nav-toggle { display: none; }
  .ink-rule { grid-column: 1 / -1; width: 100%; height: 6rem; overflow: visible; }
  .ink-rule path { fill: none; stroke: var(--red); stroke-width: 1.2; stroke-linecap: round; opacity: .7; }
  .text-link {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 2.5rem;
    min-height: 44px;
    padding: .4rem 0;
    border-bottom: 1px solid currentColor;
    background: transparent;
    cursor: pointer;
    font-size: .78rem;
    font-weight: 650;
    letter-spacing: .11em;
    text-transform: uppercase;
  }
  .text-link span { transition: transform .25s var(--ease-out); }
  .text-link:hover span { transform: translateX(.3rem); }
  .button-light, .button-dark, .submit-button {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 2.5rem;
    min-height: 52px;
    padding: .8rem 1rem;
    border: 1px solid currentColor;
    font-size: .73rem;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    transition: background .25s, color .25s, transform .25s;
  }
  .button-light:hover { background: var(--paper); color: var(--ink); transform: translateY(-2px); }
  .button-dark { background: var(--ink); color: var(--paper); border-color: var(--ink); }
  .button-dark:hover, .submit-button:hover { background: var(--red); border-color: var(--red); transform: translateY(-2px); }
  .site-footer {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    padding: clamp(4rem, 9vw, 8rem) var(--gutter) 2rem;
    background: var(--ink);
    color: var(--paper);
  }
  .footer-line { display: flex; align-items: center; gap: 1rem; font-family: var(--serif); font-size: clamp(1.9rem, 3.2vw, 3.5rem); }
  .footer-line .mark { color: var(--saffron); width: 50px; height: 50px; }
  .footer-details { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; padding-top: .8rem; font-size: .8rem; line-height: 1.7; }
  .footer-details a { text-decoration: underline; text-decoration-color: var(--red); text-underline-offset: 4px; }
  .fine-print { grid-column: 1 / -1; padding-top: 2rem; border-top: 1px solid rgba(255,255,255,.15); color: rgba(255,255,255,.5); font-size: .68rem; letter-spacing: .05em; }
}

@layer pages {
  /* The Evening */
  .home-hero { --progress: 0; position: relative; height: 310vh; background: var(--ink); color: var(--paper); }
  .hero-sticky { position: sticky; top: 0; height: 100vh; min-height: 620px; overflow: hidden; isolation: isolate; }
  .hero-paper-lines { position: absolute; inset: 0; opacity: calc(.22 - var(--progress) * .2); background-image: repeating-linear-gradient(transparent 0 54px, rgba(241, 234, 219, .13) 55px 56px); }
  .hero-paper-lines::after { content: ""; position: absolute; top: 0; bottom: 0; left: 10%; width: 1px; background: rgba(159, 49, 38, .45); }
  .hero-ingredient {
    position: absolute;
    z-index: 5;
    top: 48%;
    left: 50%;
    width: max-content;
    transform: translate(-50%, -50%) rotate(-1.5deg) translateY(calc(var(--progress) * -80px));
    opacity: clamp(0, calc(1 - var(--progress) * 5), 1);
    font-family: var(--hand);
    font-size: clamp(1rem, 2.2vw, 2rem);
    color: var(--saffron);
  }
  .hero-image-wrap {
    position: absolute;
    z-index: 1;
    inset: 8vh 5vw 7vh 33vw;
    overflow: hidden;
    clip-path: inset(calc((1 - var(--progress)) * 36%) calc((1 - var(--progress)) * 48%) round calc((1 - var(--progress)) * 120px));
    opacity: clamp(0, calc((var(--progress) - .1) * 4), .82);
    transform: scale(calc(1.08 - var(--progress) * .08));
  }
  .hero-image-wrap::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(35,28,25,.72), transparent 48%), linear-gradient(0deg, rgba(35,28,25,.42), transparent 40%); }
  .hero-image-wrap img { width: 100%; height: 100%; object-fit: cover; }
  .photo-note { position: absolute; z-index: 2; right: 1.3rem; bottom: 1rem; font-family: var(--hand); font-size: .68rem; }
  .hero-path { position: absolute; z-index: 3; inset: 0; width: 100%; height: 100%; pointer-events: none; }
  .hero-path path { fill: none; stroke: var(--saffron); stroke-width: 1.4; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--progress)); opacity: .72; }
  .hero-path circle { fill: var(--saffron); opacity: clamp(0, calc((var(--progress) - .34) * 4), 1); }
  .hero-title-wrap { position: absolute; z-index: 4; top: 50%; left: var(--gutter); transform: translateY(-48%); }
  .hero-title-wrap .eyebrow { margin-bottom: 1.1rem; opacity: clamp(0, calc((var(--progress) - .22) * 4), 1); transform: translateY(calc((1 - var(--progress)) * 22px)); }
  .hero-title-wrap h1 { font-size: clamp(5rem, 14.5vw, 14.5rem); line-height: .7; letter-spacing: -.075em; transform: scale(calc(.88 + var(--progress) * .12)); transform-origin: left center; }
  .hero-title-wrap h1 span { display: block; opacity: clamp(0, calc((var(--progress) - .12) * 3), 1); }
  .hero-title-wrap h1 span:last-child { margin-left: .34em; font-style: italic; color: var(--saffron); opacity: clamp(0, calc((var(--progress) - .32) * 3.2), 1); }
  .hero-positioning { margin-top: 2rem; margin-left: 1rem; font-family: var(--serif); font-size: clamp(1.15rem, 2vw, 1.8rem); font-style: italic; opacity: clamp(0, calc((var(--progress) - .55) * 4), 1); }
  .hero-chapters { position: absolute; z-index: 4; right: var(--gutter); top: 50%; display: flex; flex-direction: column; gap: .85rem; transform: translateY(-50%); font-size: .58rem; letter-spacing: .16em; text-transform: uppercase; }
  .hero-chapters span { display: flex; align-items: center; gap: .5rem; opacity: .35; }
  .hero-chapters span::before { content: ""; width: 12px; height: 1px; background: currentColor; }
  .hero-chapters span:nth-child(1) { opacity: clamp(.35, calc(1 - var(--progress) * 3), 1); }
  .hero-chapters span:nth-child(2) { opacity: clamp(.35, calc((var(--progress) - .12) * 4), 1); }
  .hero-chapters span:nth-child(3) { opacity: clamp(.35, calc((var(--progress) - .42) * 4), 1); }
  .hero-chapters span:nth-child(4) { opacity: clamp(.35, calc((var(--progress) - .7) * 5), 1); }
  .hero-reserve { position: absolute; z-index: 6; right: var(--gutter); bottom: 3rem; display: flex; justify-content: space-between; min-width: 190px; padding-bottom: .6rem; border-bottom: 1px solid var(--saffron); font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; opacity: clamp(0, calc((var(--progress) - .7) * 5), 1); }
  .scroll-note { position: absolute; z-index: 5; left: var(--gutter); bottom: 2.8rem; display: flex; align-items: center; gap: .6rem; font-size: .58rem; letter-spacing: .16em; text-transform: uppercase; opacity: calc(.65 - var(--progress)); }
  .scroll-note span { width: 28px; height: 1px; background: var(--saffron); }

  .philosophy { position: relative; z-index: 3; display: grid; grid-template-columns: 1fr 3fr 2fr; gap: 4vw; padding-top: clamp(7rem, 14vw, 14rem); padding-bottom: clamp(5rem, 10vw, 10rem); background: var(--bone); }
  .margin-note { padding-top: 4rem; color: var(--red); font-family: var(--hand); font-size: .72rem; line-height: 1.8; transform: rotate(-2deg); }
  .philosophy-copy .eyebrow { margin-bottom: 1.5rem; }
  .philosophy-copy h2 { font-size: clamp(3.3rem, 6.7vw, 7.2rem); }
  .philosophy-body { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 1.2rem; padding-bottom: .7rem; color: var(--ink-soft); font-family: var(--serif); font-size: clamp(1.2rem, 1.55vw, 1.55rem); line-height: 1.35; }
  .philosophy-body .text-link { margin-top: 1.4rem; color: var(--ink); font-family: var(--sans); font-size: .68rem; }
  .philosophy .ink-rule { margin-top: 3rem; }

  .ingredient-atlas { position: relative; z-index: 3; padding-top: 6rem; background: var(--red-dark); color: var(--paper); }
  .atlas-heading { display: flex; justify-content: space-between; align-items: flex-start; padding-bottom: 4rem; }
  .atlas-heading .eyebrow { padding-top: 1rem; color: var(--saffron); }
  .atlas-stage { position: relative; min-height: 760px; padding: 0 var(--gutter) 7rem; overflow: hidden; }
  .atlas-image { position: absolute; top: 0; left: 10vw; width: min(53vw, 780px); height: 590px; overflow: hidden; clip-path: polygon(5% 0, 100% 4%, 94% 96%, 0 100%); }
  .atlas-image::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 100px rgba(35,28,25,.42); pointer-events: none; }
  .atlas-image img { width: 100%; height: 100%; object-fit: cover; animation: image-settle .7s var(--ease-out) both; }
  .image-index { position: absolute; z-index: 2; bottom: 1.2rem; left: 1.5rem; font-size: .65rem; letter-spacing: .14em; }
  .atlas-route { position: absolute; z-index: 2; right: 5vw; top: 4rem; width: min(48vw, 680px); height: 440px; pointer-events: none; }
  .atlas-route svg { width: 100%; height: 100%; overflow: visible; }
  .atlas-route path { fill: none; stroke: var(--ingredient-color); stroke-width: 1.7; stroke-dasharray: 6 5; }
  .atlas-route circle { fill: var(--ingredient-color); }
  .route-label { position: absolute; padding: .2rem .5rem; background: var(--red-dark); font-family: var(--hand); font-size: .7rem; color: var(--ingredient-color); }
  .route-label-a { left: 0; top: 1.5rem; }.route-label-b { left: 39%; top: 49%; }.route-label-c { right: 0; top: 57%; }
  .atlas-controls { position: absolute; z-index: 4; right: var(--gutter); bottom: 7rem; width: min(42vw, 580px); }
  .atlas-controls button { display: grid; grid-template-columns: 3rem 1fr auto; align-items: center; width: 100%; min-height: 70px; padding: .5rem 0; border: 0; border-top: 1px solid rgba(255,255,255,.23); background: transparent; color: inherit; cursor: pointer; text-align: left; }
  .control-number { color: var(--saffron); font-size: .64rem; }
  .control-name { font-family: var(--serif); font-size: 1.6rem; opacity: .6; transition: opacity .2s, transform .25s; }
  .control-source { font-family: var(--hand); font-size: .65rem; opacity: .55; }
  .atlas-controls button:hover .control-name, .atlas-controls button.is-active .control-name { opacity: 1; transform: translateX(.5rem); }
  .atlas-controls button.is-active { color: var(--ingredient-color); }
  .atlas-dish { min-height: 2.5rem; margin-top: 1.4rem; color: var(--bone-deep); font-family: var(--serif); font-style: italic; font-size: 1rem; }

  .timeline { position: relative; z-index: 3; display: grid; grid-template-columns: 1fr 1.3fr; gap: clamp(3rem, 10vw, 11rem); padding-top: clamp(7rem, 13vw, 13rem); padding-bottom: clamp(7rem, 13vw, 13rem); background: var(--bone); }
  .timeline-intro { position: sticky; top: 9rem; align-self: start; }
  .timeline-intro .eyebrow { margin-bottom: 1.5rem; color: var(--red); }
  .timeline-intro p:last-child { width: min(100%, 25rem); margin-top: 2rem; color: var(--ink-soft); font-family: var(--serif); font-size: 1.25rem; }
  .timeline-list { position: relative; list-style: none; padding: 0; }
  .timeline-list::before { content: ""; position: absolute; top: 1.4rem; bottom: 1.4rem; left: 4.2rem; width: 1px; background: var(--red); opacity: .4; }
  .timeline-list li { position: relative; display: grid; grid-template-columns: 5rem 1fr 2rem; gap: 1.5rem; min-height: 190px; padding-bottom: 3rem; }
  .timeline-list time { color: var(--red); font-family: var(--hand); font-size: .82rem; }
  .timeline-list h3 { margin-bottom: .8rem; font-size: clamp(2rem, 3vw, 3rem); }
  .timeline-list p { max-width: 29rem; color: var(--ink-soft); font-family: var(--serif); font-size: 1.03rem; }
  .timeline-dot { position: absolute; top: .5rem; left: calc(4.2rem - 6px); display: grid; place-items: center; width: 13px; height: 13px; overflow: hidden; border: 2px solid var(--bone); border-radius: 50%; background: var(--red); color: transparent; }

  .closing-table { position: relative; z-index: 3; min-height: min(82vh, 850px); background: var(--ink); color: var(--paper); overflow: hidden; }
  .closing-table::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(24,18,16,.78), rgba(24,18,16,.15) 65%), linear-gradient(0deg, rgba(24,18,16,.5), transparent); }
  .closing-table img { width: 100%; height: min(82vh, 850px); min-height: 650px; object-fit: cover; }
  .closing-copy { position: absolute; z-index: 2; left: var(--gutter); top: 50%; transform: translateY(-50%); }
  .closing-copy .eyebrow { margin-bottom: 1.5rem; color: var(--saffron); }
  .closing-copy h2 { margin-bottom: 2.5rem; }

  /* Menu & Journal */
  .menu-page { position: relative; z-index: 2; background: var(--paper); }
  .menu-masthead { position: relative; display: grid; grid-template-columns: 1fr 2.2fr 1fr; gap: 3vw; min-height: 76vh; align-items: center; padding-top: 8rem; padding-bottom: 5rem; }
  .menu-masthead::before { content: ""; position: absolute; inset: 0 var(--gutter); pointer-events: none; background-image: repeating-linear-gradient(transparent 0 58px, rgba(35,28,25,.08) 59px 60px); }
  .menu-masthead > * { position: relative; }
  .menu-masthead h1 { font-size: clamp(5rem, 12.2vw, 12rem); line-height: .72; }
  .menu-masthead h1 em { color: var(--red); font-weight: 400; }
  .menu-masthead .eyebrow { margin-bottom: 1.6rem; }
  .masthead-copy { align-self: end; padding-bottom: 4rem; color: var(--ink-soft); font-family: var(--serif); font-size: 1.2rem; }
  .menu-masthead .ink-rule { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 2rem; width: calc(100% - var(--gutter) * 2); }
  .menu-ledger { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(280px, .75fr); gap: clamp(3rem, 8vw, 8rem); padding-top: 7rem; padding-bottom: 10rem; background: var(--paper); }
  .menu-toolbar { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem; padding-bottom: 2rem; border-bottom: 2px solid var(--ink); }
  .menu-toolbar h2 { font-size: clamp(2.7rem, 5vw, 5rem); }
  .filters { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .3rem; }
  .filters button { min-height: 44px; padding: .45rem .8rem; border: 0; border-radius: 50%; background: transparent; cursor: pointer; font-size: .64rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
  .filters button[aria-pressed="true"] { background: var(--red); color: var(--paper); }
  .menu-row { display: grid; grid-template-columns: 7rem minmax(0, 1fr) 3rem; gap: 1.2rem; align-items: center; min-height: 105px; padding: 1.1rem 0; border-bottom: 1px solid var(--rule); cursor: default; }
  .menu-course { color: var(--red); font-size: .62rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
  .menu-row h3 { font-size: clamp(1.65rem, 2.5vw, 2.45rem); line-height: 1; transition: transform .25s var(--ease-out), color .2s; }
  .menu-row p { margin-top: .35rem; color: var(--ink-soft); font-family: var(--serif); font-size: .95rem; font-style: italic; }
  .menu-price { justify-self: end; font-family: var(--hand); font-size: .8rem; }
  .menu-row:hover h3, .menu-row:focus-within h3 { color: var(--red); transform: translateX(.35rem); }
  .menu-note { max-width: 38rem; margin-top: 2rem; color: var(--ink-soft); font-size: .73rem; line-height: 1.7; }
  .menu-preview { position: sticky; top: 8.5rem; align-self: start; }
  .preview-frame { height: min(65vh, 650px); overflow: hidden; clip-path: polygon(3% 0, 100% 2%, 96% 100%, 0 95%); background: var(--ink); }
  .preview-frame img { width: 100%; height: 100%; object-fit: cover; animation: image-settle .55s var(--ease-out) both; }
  .menu-preview figcaption { display: flex; justify-content: space-between; gap: 1rem; padding-top: .8rem; color: var(--red); font-family: var(--hand); font-size: .72rem; }
  .menu-preview figcaption span { color: var(--ink-soft); font-family: var(--sans); font-size: .58rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }

  .journal { display: grid; grid-template-columns: .8fr 1.4fr; gap: clamp(4rem, 10vw, 11rem); padding-top: 10rem; padding-bottom: 11rem; background: var(--bone); }
  .journal-heading .eyebrow { margin-bottom: 1.3rem; color: var(--red); }
  .journal-heading h2 { font-size: clamp(3.5rem, 6.5vw, 6.5rem); }
  .journal-list { border-top: 1px solid var(--ink); }
  .journal-entry { border-bottom: 1px solid var(--ink); }
  .journal-entry > button { display: grid; grid-template-columns: 4.5rem 1fr 2rem; align-items: center; gap: 1rem; width: 100%; min-height: 100px; padding: 1rem 0; border: 0; background: transparent; cursor: pointer; text-align: left; }
  .journal-entry > button span { color: var(--red); font-family: var(--hand); font-size: .73rem; }
  .journal-entry > button span:last-child { justify-self: end; font-family: var(--serif); font-size: 1.5rem; }
  .journal-entry > button strong { font-family: var(--serif); font-size: clamp(1.3rem, 2.5vw, 2.1rem); font-weight: 400; }
  .journal-panel { display: grid; grid-template-columns: .65fr 1fr; gap: 2rem; padding: .5rem 0 2.5rem 5.5rem; }
  .journal-panel img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
  .journal-panel p { align-self: end; color: var(--ink-soft); font-family: var(--serif); font-size: 1.08rem; line-height: 1.48; }
  .menu-ending { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: 5rem var(--gutter); background: var(--saffron); }
  .menu-ending p { font-family: var(--serif); font-size: clamp(2rem, 4.2vw, 4.2rem); line-height: 1.05; }

  /* Reservations */
  .reservations-page { position: relative; z-index: 2; background: var(--bone); }
  .reserve-hero { position: relative; height: min(88vh, 900px); min-height: 660px; overflow: hidden; background: var(--ink); color: var(--paper); }
  .reserve-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(24,18,16,.82), rgba(24,18,16,.08) 68%), linear-gradient(0deg, rgba(24,18,16,.45), transparent 55%); }
  .reserve-hero img { width: 100%; height: 100%; object-fit: cover; animation: reserve-pan 15s ease-in-out infinite alternate; }
  .reserve-hero-copy { position: absolute; z-index: 2; left: var(--gutter); top: 50%; transform: translateY(-47%); }
  .reserve-hero-copy .eyebrow { margin-bottom: 1.5rem; color: var(--saffron); }
  .reserve-hero-copy h1 { font-size: clamp(4.8rem, 10.5vw, 10.5rem); line-height: .78; }
  .reserve-hero-copy h1 em { color: var(--saffron); font-weight: 400; }
  .reserve-hero-copy > p:last-child { margin-top: 2rem; font-family: var(--serif); font-size: 1.2rem; font-style: italic; }
  .room-caption { position: absolute; z-index: 2; right: var(--gutter); bottom: 2rem; font-family: var(--hand); font-size: .7rem; }

  .booking { position: relative; display: grid; grid-template-columns: minmax(260px, .7fr) minmax(400px, 1.3fr); gap: clamp(4rem, 9vw, 10rem); padding-top: 10rem; padding-bottom: 10rem; }
  .booking-intro { align-self: start; }
  .booking-intro .hand-note { display: block; margin-bottom: 2rem; }
  .booking-intro h2 { font-size: clamp(3.4rem, 6.2vw, 6.5rem); }
  .booking-intro > p { margin-top: 2rem; color: var(--ink-soft); font-family: var(--serif); font-size: 1.08rem; }
  .legend { display: flex; flex-wrap: wrap; gap: 1.2rem; margin-top: 2.5rem; font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; }
  .legend span { display: flex; align-items: center; gap: .45rem; }
  .legend i { width: 10px; height: 10px; border: 1px solid var(--red); border-radius: 50%; }
  .dot-selected { background: var(--red); }
  .table-plan { position: relative; min-height: 520px; border: 1px solid rgba(35,28,25,.38); background-image: linear-gradient(rgba(35,28,25,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(35,28,25,.05) 1px, transparent 1px); background-size: 28px 28px; }
  .room-edge { position: absolute; color: var(--red); font-family: var(--hand); font-size: .64rem; }
  .room-window { left: 1rem; top: 1rem; writing-mode: vertical-rl; transform: rotate(180deg); }
  .room-pass { right: 1.2rem; top: 1rem; }
  .room-door { position: absolute; right: 1rem; bottom: 1rem; font-family: var(--hand); font-size: .7rem; color: var(--red); }
  .table-node { --table-size: 70px; position: absolute; left: var(--x); top: var(--y); display: grid; place-items: center; width: var(--table-size); height: var(--table-size); transform: translate(-50%, -50%); border: 1px solid var(--ink); border-radius: 50%; background: var(--bone); cursor: pointer; transition: transform .25s var(--ease-out), color .2s, background .2s, box-shadow .2s; }
  .table-node::before, .table-node::after { content: ""; position: absolute; width: 18px; height: 7px; border: 1px solid var(--ink); border-radius: 50%; }
  .table-node::before { top: -12px; }.table-node::after { bottom: -12px; }
  .table-node span { font-family: var(--serif); font-size: 1.1rem; }
  .table-node small { position: absolute; right: -3px; top: -5px; display: grid; place-items: center; width: 21px; height: 21px; border-radius: 50%; background: var(--ink); color: var(--bone); font-size: .57rem; }
  .table-node:hover { transform: translate(-50%, -50%) scale(1.08); box-shadow: 0 12px 24px rgba(35,28,25,.12); }
  .table-node.is-selected { background: var(--red); color: var(--paper); box-shadow: 0 0 0 6px rgba(159,49,38,.15); }
  .table-node.is-selected::before, .table-node.is-selected::after { border-color: var(--red); background: var(--red); }
  .table-square { border-radius: 8px; }
  .table-wide { width: 94px; border-radius: 9px; }
  .booking-form-wrap { grid-column: 1 / -1; width: min(100%, 980px); margin: 2rem auto 0; padding: clamp(2rem, 5vw, 4.5rem); background: var(--ink); color: var(--paper); transition: box-shadow .3s; }
  .booking-form-wrap:focus-within { box-shadow: 0 24px 80px rgba(35,28,25,.25); }
  .form-heading { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: 3rem; padding-bottom: 1rem; border-bottom: 1px solid rgba(255,255,255,.2); font-size: .65rem; letter-spacing: .11em; text-transform: uppercase; }
  .form-heading span:last-child { color: rgba(255,255,255,.52); }
  .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem 2.5rem; }
  .form-grid label { display: flex; flex-direction: column; gap: .55rem; }
  .form-grid label > span { color: var(--saffron); font-size: .62rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
  .form-grid input, .form-grid select, .form-grid textarea { width: 100%; min-height: 50px; padding: .55rem 0; border: 0; border-bottom: 1px solid rgba(255,255,255,.33); border-radius: 0; outline: 0; background: transparent; color: var(--paper); font-family: var(--serif); font-size: 1.15rem; }
  .form-grid textarea { resize: vertical; }
  .form-grid select { color-scheme: dark; }
  .form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus { border-color: var(--saffron); }
  .form-grid input::placeholder, .form-grid textarea::placeholder { color: rgba(255,255,255,.38); }
  .form-wide { grid-column: 1 / -1; }
  .submit-button { margin-top: 2.5rem; border-color: var(--saffron); background: var(--saffron); color: var(--ink); cursor: pointer; }
  .form-note { max-width: 42rem; margin-top: 1.2rem; color: rgba(255,255,255,.5); font-size: .68rem; }
  .booking-success { min-height: 520px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
  .booking-success .mark { width: 70px; height: 70px; margin-bottom: 2rem; color: var(--saffron); animation: mark-write .9s var(--ease-out) both; }
  .booking-success .eyebrow { color: var(--saffron); }
  .booking-success h2 { margin: 1rem 0 1.5rem; font-size: clamp(3.3rem, 7vw, 6.5rem); }
  .booking-success > p:not(.eyebrow) { max-width: 40rem; color: rgba(255,255,255,.68); font-family: var(--serif); font-size: 1.08rem; }
  .booking-success .text-link { margin-top: 2rem; color: var(--paper); }
  .visit-notes { display: grid; grid-template-columns: 1fr 1.4fr; gap: 9vw; padding-top: 2rem; padding-bottom: 11rem; }
  .visit-notes .eyebrow { margin-bottom: 1.4rem; color: var(--red); }
  .visit-notes h2 { font-size: clamp(3.2rem, 5.8vw, 6rem); }
  .visit-notes dl { border-top: 1px solid var(--ink); }
  .visit-notes dl div { display: grid; grid-template-columns: 8rem 1fr; gap: 2rem; padding: 1.5rem 0; border-bottom: 1px solid var(--rule); }
  .visit-notes dt { color: var(--red); font-size: .65rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
  .visit-notes dd { color: var(--ink-soft); font-family: var(--serif); font-size: 1.03rem; }

  .not-found { min-height: 75vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-inline: var(--gutter); text-align: center; background: var(--bone); }
  .not-found h1 { margin: 1rem 0 2.5rem; font-size: clamp(4rem, 10vw, 9rem); }
}

@layer responsive {
  @media (max-width: 1000px) {
    .site-header { grid-template-columns: 1fr auto; }
    .site-nav {
      position: fixed;
      inset: 0;
      z-index: -1;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      gap: 0;
      padding: 7rem var(--gutter) 4rem;
      background: var(--ink);
      visibility: hidden;
      opacity: 0;
      transform: translateY(-1rem);
      transition: opacity .25s, transform .35s var(--ease-out), visibility .35s;
    }
    .site-nav.is-open { visibility: visible; opacity: 1; transform: translateY(0); }
    .site-nav a { width: 100%; min-height: 82px; border-bottom: 1px solid rgba(255,255,255,.14); font-family: var(--serif); font-size: clamp(2.2rem, 7vw, 4rem); font-weight: 400; letter-spacing: -.03em; text-transform: none; }
    .nav-toggle { display: block; }
    body.nav-open { overflow: hidden; }
    .philosophy { grid-template-columns: .5fr 2fr; }
    .philosophy-body { grid-column: 2; max-width: 36rem; }
    .philosophy .ink-rule { grid-column: 1 / -1; }
    .atlas-heading { display: block; }
    .atlas-heading .eyebrow { margin-bottom: 1rem; }
    .atlas-stage { min-height: 850px; }
    .atlas-image { left: var(--gutter); width: calc(100% - var(--gutter) * 2); height: 520px; }
    .atlas-route { right: -5vw; top: 15rem; width: 70vw; }
    .atlas-controls { left: var(--gutter); right: var(--gutter); bottom: 5rem; width: auto; padding: 1rem; background: rgba(75,21,17,.86); backdrop-filter: blur(8px); }
    .menu-masthead { grid-template-columns: .5fr 2fr; }
    .masthead-copy { grid-column: 2; max-width: 35rem; }
    .menu-ledger { grid-template-columns: 1fr; }
    .menu-preview { display: none; }
    .journal { grid-template-columns: 1fr; }
    .booking { grid-template-columns: 1fr; }
    .booking-intro { max-width: 680px; }
  }

  @media (max-width: 720px) {
    :root { --gutter: 1.15rem; }
    body::before { opacity: .1; }
    .site-header { min-height: 64px; }
    .brand span { font-size: .96rem; }
    .motion-toggle { width: 44px; overflow: hidden; padding: 0; white-space: nowrap; color: transparent; }
    .motion-toggle span { color: var(--saffron); margin-inline: auto; }
    .footer-line { align-items: flex-start; }
    .site-footer { grid-template-columns: 1fr; gap: 2.5rem; }
    .footer-details { grid-template-columns: 1fr 1fr; }
    .fine-print { grid-column: 1; }

    .home-hero { height: 230vh; }
    .hero-sticky { min-height: 560px; }
    .hero-image-wrap { inset: 18vh 1rem 14vh 18vw; clip-path: inset(calc((1 - var(--progress)) * 32%) calc((1 - var(--progress)) * 43%) round calc((1 - var(--progress)) * 80px)); }
    .hero-title-wrap { top: 47%; }
    .hero-title-wrap h1 { font-size: clamp(4.8rem, 25vw, 8rem); line-height: .72; }
    .hero-title-wrap h1 span:last-child { margin-left: .1em; }
    .hero-positioning { margin-top: 1.5rem; margin-left: 0; }
    .hero-chapters { display: none; }
    .hero-reserve { right: var(--gutter); bottom: 2rem; min-width: 170px; }
    .scroll-note { bottom: 2rem; }
    .hero-path { transform: scale(1.4); transform-origin: center; }

    .philosophy { grid-template-columns: 1fr; gap: 2rem; padding-top: 7rem; }
    .margin-note { padding-top: 0; }
    .philosophy-body { grid-column: 1; }
    .philosophy .ink-rule { grid-column: 1; }
    .ingredient-atlas { padding-top: 5rem; }
    .atlas-heading h2 { font-size: 3.8rem; }
    .atlas-stage { min-height: 770px; }
    .atlas-image { height: 420px; }
    .atlas-route { top: 10rem; width: 96vw; opacity: .55; }
    .atlas-controls { bottom: 3rem; padding: .75rem; }
    .atlas-controls button { min-height: 60px; grid-template-columns: 2.5rem 1fr; }
    .control-source { display: none; }
    .control-name { font-size: 1.35rem; }
    .atlas-dish { font-size: .88rem; }
    .timeline { grid-template-columns: 1fr; gap: 4rem; padding-top: 7rem; }
    .timeline-intro { position: static; }
    .timeline-list::before { left: 3.2rem; }
    .timeline-list li { grid-template-columns: 3.7rem 1fr; gap: 1.2rem; min-height: 175px; }
    .timeline-dot { left: calc(3.2rem - 6px); }
    .closing-table, .closing-table img { min-height: 630px; }

    .page-top { padding-top: 4rem; }
    .menu-masthead { display: block; min-height: 72vh; padding-top: 7rem; }
    .menu-masthead > .hand-note { margin-bottom: 4rem; }
    .menu-masthead h1 { font-size: clamp(4.8rem, 23vw, 7.8rem); }
    .masthead-copy { margin-top: 3rem; padding: 0; max-width: 28rem; }
    .menu-masthead .ink-rule { bottom: 0; }
    .menu-ledger { padding-top: 5rem; padding-bottom: 7rem; }
    .menu-toolbar { display: block; }
    .filters { justify-content: flex-start; margin-top: 1.5rem; }
    .menu-row { grid-template-columns: 1fr 2rem; gap: .5rem; min-height: 118px; }
    .menu-course { grid-column: 1 / -1; }
    .menu-row p { max-width: 90%; }
    .journal { gap: 3rem; padding-top: 7rem; padding-bottom: 7rem; }
    .journal-panel { grid-template-columns: 1fr; padding: .5rem 0 2rem; }
    .journal-entry > button { grid-template-columns: 3.3rem 1fr 1.5rem; min-height: 88px; }
    .menu-ending { display: block; padding-block: 4rem; }
    .menu-ending .button-dark { margin-top: 2rem; }

    .reserve-hero { min-height: 670px; }
    .reserve-hero::after { background: linear-gradient(0deg, rgba(24,18,16,.84), rgba(24,18,16,.12) 76%); }
    .reserve-hero img { object-position: 62% center; }
    .reserve-hero-copy { top: auto; bottom: 5.5rem; transform: none; }
    .reserve-hero-copy h1 { font-size: clamp(4.5rem, 20vw, 7rem); }
    .booking { gap: 3.5rem; padding-top: 7rem; }
    .table-plan { min-height: 470px; }
    .table-node { --table-size: 58px; }
    .table-wide { width: 76px; }
    .booking-form-wrap { padding: 1.5rem; }
    .form-heading { display: block; }
    .form-heading span { display: block; margin-bottom: .4rem; }
    .form-grid { grid-template-columns: 1fr; gap: 1.4rem; }
    .form-wide { grid-column: 1; }
    .submit-button { width: 100%; }
    .visit-notes { grid-template-columns: 1fr; gap: 3.5rem; }
    .visit-notes dl div { grid-template-columns: 1fr; gap: .6rem; }
  }
}

@layer motion {
  @keyframes image-settle { from { opacity: .35; transform: scale(1.045); } to { opacity: 1; transform: scale(1); } }
  @keyframes reserve-pan { from { transform: scale(1.03) translate3d(-.5%, 0, 0); } to { transform: scale(1.08) translate3d(1%, -.5%, 0); } }
  @keyframes mark-write { from { opacity: 0; transform: rotate(-12deg) scale(.7); } to { opacity: 1; transform: rotate(0) scale(1); } }
  [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .75s var(--ease-out), transform .75s var(--ease-out); }
  [data-reveal].is-visible { opacity: 1; transform: translateY(0); }
  html[data-motion="off"] { scroll-behavior: auto; }
  html[data-motion="off"] *,
  html[data-motion="off"] *::before,
  html[data-motion="off"] *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .001ms !important; }
  html[data-motion="off"] .ember-canvas { display: none; }
  html[data-motion="off"] [data-reveal] { opacity: 1; transform: none; }
  html[data-motion="off"] .home-hero { height: 100vh; min-height: 700px; }
  html[data-motion="off"] .hero-image-wrap { clip-path: inset(0); opacity: .72; transform: none; }
  html[data-motion="off"] .hero-title-wrap h1 span,
  html[data-motion="off"] .hero-title-wrap .eyebrow,
  html[data-motion="off"] .hero-positioning,
  html[data-motion="off"] .hero-reserve { opacity: 1; transform: none; }
  html[data-motion="off"] .hero-ingredient,
  html[data-motion="off"] .hero-path,
  html[data-motion="off"] .scroll-note { display: none; }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; }
  }
}