/* Fonts, served from this site (2026-09-24) instead of fonts.googleapis.com:
   the same families and weights, latin + latin-ext only, so the first paint
   no longer waits on two extra connections to Google. */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/_assets/fonts/cormorant-garamond-400i-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/_assets/fonts/cormorant-garamond-400i-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/_assets/fonts/cormorant-garamond-300-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/_assets/fonts/cormorant-garamond-300-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_assets/fonts/cormorant-garamond-300-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_assets/fonts/cormorant-garamond-300-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_assets/fonts/cormorant-garamond-300-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_assets/fonts/cormorant-garamond-300-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IM Fell English';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/_assets/fonts/im-fell-english-400i-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IM Fell English';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_assets/fonts/im-fell-english-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/_assets/fonts/poppins-300-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/_assets/fonts/poppins-300-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_assets/fonts/poppins-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_assets/fonts/poppins-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_assets/fonts/poppins-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_assets/fonts/poppins-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_assets/fonts/poppins-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_assets/fonts/poppins-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   Amami Italia — structural design system
   Built for the 31-URL architecture (Amami_Italia_Website_Architecture.pdf).
   One stylesheet for every new template. The old WordPress capture is
   untouched and keeps its own CSS.
   ========================================================================== */

:root{
  /* Brand palette, taken from the live site's own tokens and the
     colours it actually uses — not invented. Bronze #a87a41 / #cbd6e3,
     cream #fdf8f4, ink #0b0908, warm brown #433e37, blush #f7efe6. */
  /* Client-specified: #812b28 on 2026-08-31, changed to #462e24 on 2026-09-01
     because the red was not wanted. A dark brown now, not a maroon. Used with
     restraint so it reads as a considered accent rather than a theme: the
     primary action, the menu band, the story head and the After Dark panel.
     Type accents stay bronze. */
  --cocoa:#462e24;
  --cocoa-deep:#33211a;
  --cocoa-lit:#5d3f31;
  --warm:#462e24;        /* warm brown, the mid ground */
  --warm-deep:#2a2621;
  --bronze:#cbd6e3;
  --bronze-lit:#cbd6e3;
  --cream:#eee9da;
  --cream-warm:#eee9da;  /* brand blush */
  --ink:#161616;         /* near-black ground */
  --ink-soft:#1f1f1f;
  --stone:#462e24;
  --line:rgba(253,248,244,.16);

  /* Three faces, and only these three (client, 2026-08-31):
     Cormorant Garamond for titles, Poppins for body, and an accent face.
     The brand book's accent is Forward Serif (Mans Greback) — a vintage
     serif italic — but the only copy anyone has is the personal-use cut,
     which cannot go on a commercial site. Until a commercial/webfont licence
     is bought, the accent is IM Fell English (client's choice, 2026-09-23;
     SIL Open Font License, Google Fonts): the same rough, letterpress
     old-style italic as Forward Serif, where Cormorant italic read too clean.
     Roles, per the brand book: headlines Cormorant Garamond, subtitles and
     accent lines IM Fell English italic, body Poppins. */
  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --sans:'Poppins','Helvetica Neue',system-ui,sans-serif;
  --accent:'IM Fell English',Georgia,'Times New Roman',serif;

  --hdr:76px;            /* header height */
  --pad:clamp(22px,5vw,64px);
  --measure:66ch;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--ink);color:var(--cream);
  font-family:var(--sans);font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
  padding-bottom:env(safe-area-inset-bottom);
}
img,video{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;line-height:1.08;margin:0}
p{margin:0 0 1em}
:focus-visible{outline:2px solid var(--bronze-lit);outline-offset:3px}

/* ---------- shared bits ---------- */
.wrap{max-width:1240px;margin:0 auto;padding-inline:var(--pad)}
.eyebrow{font-family:var(--accent);font-size:.6875rem;letter-spacing:.24em;text-transform:uppercase;color:var(--bronze-lit);margin:0 0 1rem}
.display{font-family:var(--serif);font-size:clamp(2.4rem,6vw,5rem);letter-spacing:.01em}
.lede{font-size:clamp(1rem,1.6vw,1.15rem);color:rgba(253,248,244,.82);max-width:var(--measure)}
.btn{display:inline-block;padding:.85em 1.9em;border:1px solid var(--bronze-lit);color:var(--cream);
  background:transparent;cursor:pointer;
  text-decoration:none;font-size:.8125rem;letter-spacing:.16em;text-transform:uppercase;
  transition:background .25s,color .25s}
.btn:hover{background:var(--bronze-lit);color:var(--ink)}
.btn--solid{background:var(--cocoa);border-color:var(--cocoa)}
.btn--solid:hover{background:var(--bronze-lit);border-color:var(--bronze-lit)}
section{padding-block:clamp(30px,4.4vw,62px)}
.section-head{margin-bottom:clamp(16px,2.6vw,32px)}

/* The header and its navigation overlay live in _assets/amami-header.css,
   so the two restored static pages can carry the same header as the rest
   of the site without loading this whole stylesheet. */

/* ---------- hero ---------- */
.hero{position:relative;min-height:54vh;min-height:54svh;display:grid;place-items:center;
  text-align:center;padding:calc(var(--hdr) + 3vh) var(--pad) 4.5vh;overflow:hidden}
.hero__media{position:absolute;inset:0;z-index:-2}
.hero__media img,.hero__media video{width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(11,9,8,.55),rgba(11,9,8,.35) 45%,rgba(11,9,8,.85))}
.hero__actions{display:flex;gap:.9rem;justify-content:center;flex-wrap:wrap;margin-top:2rem}

/* ---------- media placeholder (spec: leave the space) ---------- */
.ph{position:relative;display:grid;place-items:center;text-align:center;gap:.4rem;
  width:100%;max-width:100%;
  background:repeating-linear-gradient(45deg,rgba(168,122,65,.09) 0 12px,transparent 12px 24px),var(--ink-soft);
  border:1px dashed rgba(202,157,117,.45);color:var(--bronze-lit);padding:1.4rem 1.25rem;min-height:150px}
.ph__label{font-size:.6875rem;letter-spacing:.22em;text-transform:uppercase}
.ph__what{font-family:var(--serif);font-size:1.25rem;color:var(--cream)}
.ph__spec{font-size:.75rem;color:rgba(253,248,244,.6);max-width:38ch}
.ph--wide{aspect-ratio:16/9}
.ph--tall{aspect-ratio:4/5}
.ph--square{aspect-ratio:1}
/* A hero placeholder sits BEHIND the hero copy, so its caption has to get out
   of the way: pinned to the bottom, small, and quiet. Centred it collided with
   the h1 on every hero page. */
.ph--hero{position:absolute;inset:0;min-height:0;border:0;
  border-bottom:1px dashed rgba(202,157,117,.35);
  align-content:end;justify-items:start;text-align:left;
  padding:0 var(--pad) 1.4rem;gap:.15rem;opacity:.72}
.ph--hero .ph__what{font-size:.9375rem}
.ph--hero .ph__spec{font-size:.6875rem;max-width:52ch}

/* ---------- generic layouts ---------- */
.grid{display:grid;gap:clamp(14px,2vw,26px)}
.grid--2{grid-template-columns:1fr}
.grid--3{grid-template-columns:1fr}
.grid--4{grid-template-columns:repeat(2,1fr)}
@media(min-width:760px){.grid--2{grid-template-columns:1fr 1fr}.grid--3{grid-template-columns:repeat(3,1fr)}
  .grid--4{grid-template-columns:repeat(4,1fr)}}
.split{display:grid;gap:clamp(20px,4vw,56px);align-items:center}
@media(min-width:860px){.split{grid-template-columns:1fr 1fr}.split--flip>*:first-child{order:2}}
.card{background:var(--ink-soft);border:1px solid var(--line);padding:clamp(20px,3vw,34px)}
.card h3{font-size:1.5rem;margin-bottom:.5rem}
.rule{height:1px;background:var(--line);border:0;margin:0}

/* full-width image band with a label over it (ANIML home pattern) */
.band{position:relative;min-height:30vh;display:grid;place-items:center;text-align:center;overflow:hidden}
.band__media{position:absolute;inset:0;z-index:-2}
.band__media img{width:100%;height:100%;object-fit:cover}
.band::after{content:"";position:absolute;inset:0;z-index:-1;background:rgba(11,9,8,.42)}
.band h2{font-size:clamp(2rem,5vw,3.6rem);letter-spacing:.06em;text-transform:uppercase}
.band .btn{margin-top:1.2rem}

/* menu listing */
.dish{display:grid;grid-template-columns:1fr auto;gap:.5rem 1.4rem;padding:1rem 0;border-bottom:1px solid var(--line)}
.dish__name{font-family:var(--serif);font-size:1.3rem}
.dish__it{color:var(--bronze-lit);font-style:italic}
.dish__desc{grid-column:1/-1;font-size:.9375rem;color:rgba(253,248,244,.72);margin:0}
.dish__price{font-variant-numeric:tabular-nums;color:var(--bronze-lit)}

/* forms */
.field{margin-bottom:1.1rem}
.field label{display:block;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--bronze-lit);margin-bottom:.45rem}
.field input,.field select,.field textarea{width:100%;padding:.8em .9em;background:var(--ink-soft);
  border:1px solid var(--line);color:var(--cream);font:inherit;font-size:1rem}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--bronze-lit);outline:none}

/* The footer now lives in _assets/amami-footer.css so the one restored
   static page can share it. */

/* breadcrumbs (spec 2.3) */
.crumbs{padding-top:calc(var(--hdr) + 18px);font-size:.8125rem;color:rgba(253,248,244,.6)}
.crumbs a{color:var(--bronze-lit);text-decoration:none}
.crumbs span{margin-inline:.5rem}

.page-top{padding-top:calc(var(--hdr) + clamp(22px,3.6vw,48px))}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  html{scroll-behavior:auto}
}

/* ---------- menu pages ---------- */
/* Every dish is HTML text, so it is selectable, translatable and indexable.
   No PDF, no flattened image of a menu. */
.menu-list{border-top:1px solid rgba(202,157,117,.22)}
.dish{display:grid;grid-template-columns:1fr auto;gap:.2rem 1.5rem;
  padding:1.15rem 0;border-bottom:1px solid rgba(202,157,117,.18)}
.dish__name{font-family:var(--serif);font-size:1.22rem;color:var(--cream)}
.dish__price{font-family:var(--sans);font-size:.95rem;letter-spacing:.06em;
  color:var(--bronze-lit);white-space:nowrap;align-self:start;padding-top:.3rem}
.dish__desc,.dish__add{grid-column:1/-1;margin:.15rem 0 0;font-size:.9rem;
  color:rgba(253,248,244,.66);max-width:58ch}
.dish__add{color:var(--bronze);font-size:.82rem;letter-spacing:.04em}
.dish__tag{margin-left:.5rem;font-size:.6rem;letter-spacing:.12em;
  color:var(--bronze);border:1px solid rgba(168,122,65,.5);border-radius:2px;
  padding:.1rem .34rem;text-decoration:none;vertical-align:.14em}
.menu-foot{margin:1.1rem 0 0;font-size:.85rem;color:var(--bronze-lit);letter-spacing:.03em}
.menu-notes{list-style:none;margin:0;padding:1.4rem 0 0;border-top:1px solid rgba(202,157,117,.18)}
.menu-notes li{font-size:.82rem;color:rgba(253,248,244,.55);margin:.3rem 0}
@media(max-width:600px){
  .dish{grid-template-columns:1fr auto;gap:.15rem .8rem}
  .dish__name{font-size:1.1rem}
}

/* The anchor row belongs to the list it jumps into, so close the gap between
   them instead of leaving a full section's padding on both sides. */
section:has([data-anchor-nav]){padding-bottom:clamp(18px,3vw,32px)}
section:has([data-anchor-nav]) + section{padding-top:clamp(22px,4vw,46px)}
.menu-list ~ *,
section[id] > .section-head:has(+ .menu-list){margin-bottom:clamp(14px,2vw,22px)}

/* ============================================================
   REFERENCE LAYOUTS
   The home page, menu hub and contact band follow the reference
   screenshots: full-bleed photography, one large word per panel, one
   action, and the brand ground showing as a frame between panels.
   Colours stay Amami's own — warm brown frame, bronze accents, cream type.
   ============================================================ */

/* --- panel stack (home) --- */
body.is-panels{background:var(--cocoa)}
.panel{position:relative;isolation:isolate;padding:0;
  min-height:min(58vh,560px);display:grid;place-items:center;
  margin:0 clamp(12px,1.7vw,26px) clamp(12px,1.7vw,26px);overflow:hidden}
/* The hero runs width to width and full height, as the reference has it —
   only the cards below it are inset. */
.panel--first{margin:0;min-height:min(84svh,800px);padding-top:var(--hdr)}
.panel__over{font-family:var(--serif);font-weight:300;color:#fff;
  text-transform:uppercase;letter-spacing:.06em;margin:0 0 .1em;
  font-size:clamp(1.2rem,4.6vw,2.6rem);line-height:1.05;
  text-shadow:0 1px 14px rgba(11,9,8,.75)}
.panel__media{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:-2;display:block}
.panel__media--gap{display:grid;place-items:center;background:var(--ink-soft)}
/* The word has to read over any photograph, including a bright one, so the
   scrim is a centred pool plus a base gradient rather than a flat wash. */
.panel::after{content:"";position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(58% 42% at 50% 50%,rgba(11,9,8,.62) 0%,rgba(11,9,8,.28) 62%,rgba(11,9,8,0) 100%),
    linear-gradient(180deg,rgba(11,9,8,.46) 0%,rgba(11,9,8,.18) 45%,rgba(11,9,8,.58) 100%)}
.panel__inner{text-align:center;padding:clamp(24px,5vw,64px);max-width:1100px}
.panel__word{font-family:var(--serif);font-weight:300;color:#fff;
  font-size:clamp(2.9rem,9.2vw,8rem);line-height:.94;letter-spacing:.005em;
  text-transform:uppercase;margin:0;
  text-shadow:0 1px 2px rgba(11,9,8,.55),0 4px 40px rgba(11,9,8,.7)}
.panel__sub{margin:1.1rem auto 0;max-width:44ch;color:rgba(255,255,255,.94);
  text-shadow:0 1px 14px rgba(11,9,8,.75);
  font-size:clamp(.95rem,1.5vw,1.12rem)}
.btn--ghost{margin-top:clamp(20px,3vw,34px);border:1px solid rgba(255,255,255,.85);
  background:transparent;color:#fff;letter-spacing:.18em;font-size:.72rem;
  padding:1.05em 2.4em;border-radius:0}
.btn--ghost:hover{background:#fff;color:var(--ink);border-color:#fff}
@media(max-width:700px){
  .panel{min-height:min(56vh,460px);margin:0 6px 6px}
  .panel--first{margin-top:6px}
}

/* --- menu hub: serif tab row --- */
.tabband{background:var(--warm);padding-block:clamp(28px,4vw,54px)}
.tabrow{display:flex;flex-wrap:wrap;gap:clamp(18px,4vw,56px);
  justify-content:center;align-items:baseline}
.tabrow__tab{font-family:var(--serif);text-transform:uppercase;text-decoration:none;
  color:var(--cream);font-size:clamp(1.15rem,3vw,2.35rem);letter-spacing:.03em;
  line-height:1;padding-bottom:.2em;border-bottom:1px solid transparent}
.tabrow__tab:hover{border-bottom-color:var(--bronze-lit);color:#fff}

/* --- photo grid --- */
.tilegrid{display:grid;grid-template-columns:repeat(5,1fr);gap:3px;padding:0}
.tilegrid .tile{display:block;position:relative;aspect-ratio:1;overflow:hidden}
.media--tile{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s ease}
.tilegrid .tile:hover .media--tile{transform:scale(1.05)}
/* Ten tiles fill two rows of five. At the narrower counts they would leave an
   orphan on the last row, so drop the tail rather than show a ragged grid. */
@media(max-width:900px){.tilegrid{grid-template-columns:repeat(3,1fr)}
  .tilegrid .tile:nth-child(n+10){display:none}}
@media(max-width:520px){.tilegrid{grid-template-columns:repeat(2,1fr)}
  .tilegrid .tile:nth-child(n+9){display:none}}

/* --- mosaic (rooms, events) --- */
.mosaic{display:grid;grid-template-columns:1fr 1fr;gap:0;padding:0;background:var(--ink)}
.mosaic__grid{display:grid;grid-template-columns:1fr 1fr;gap:0}
.mosaic__tile{position:relative;aspect-ratio:4/3;overflow:hidden}
.mosaic__text{padding:clamp(28px,4vw,64px);align-self:center}
.mosaic__name{font-family:var(--sans);font-weight:600;text-transform:uppercase;
  letter-spacing:.02em;font-size:clamp(1.05rem,2vw,1.5rem);color:#fff;margin:0 0 1rem}
.mosaic__text p{color:rgba(253,248,244,.8);max-width:52ch}
.mosaic__fact{margin-top:1rem;color:#fff;font-size:.95rem}
.mosaic__fact strong{font-weight:600;letter-spacing:.04em}
@media(max-width:900px){.mosaic,.mosaic__grid{grid-template-columns:1fr 1fr}
  .mosaic{grid-template-columns:1fr}}

/* --- contact band over a photograph --- */
.cband{position:relative;isolation:isolate;padding-block:clamp(32px,4.6vw,64px);
  overflow:hidden;text-align:center}
.cband__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.cband::after{content:"";position:absolute;inset:0;z-index:-1;background:rgba(11,9,8,.62)}
.cband__inner{position:relative;max-width:1240px;margin:0 auto;padding-inline:var(--pad)}
.cband__map{display:grid;place-content:center;gap:.5rem;width:min(360px,74vw);
  aspect-ratio:1;margin:0 auto;background:var(--cream);color:var(--ink);
  text-decoration:none;border:1px solid rgba(168,122,65,.5)}
.cband__mark{width:26px;height:34px;color:var(--bronze);margin:0 auto .2rem}
.cband__pin{font-family:var(--serif);font-size:1.75rem;line-height:1.1}
.cband__addr{font-size:.9rem;line-height:1.5;color:var(--warm)}
.cband__maplabel{font-family:var(--accent);margin-top:.5rem;font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--bronze);border-bottom:1px solid rgba(168,122,65,.5);padding-bottom:.25rem;
  justify-self:center}
.cband__map:hover .cband__maplabel{color:var(--warm);border-bottom-color:var(--warm)}
.cband__title{font-family:var(--sans);font-weight:300;text-transform:uppercase;
  letter-spacing:.06em;font-size:clamp(1.5rem,4vw,2.6rem);color:#fff;
  margin:clamp(26px,4vw,48px) 0 clamp(18px,3vw,30px)}
.cband__cols{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,3vw,40px);
  font-size:.86rem;letter-spacing:.06em;text-transform:uppercase;font-weight:500}
.cband__cols div:first-child{text-align:left}
.cband__cols div:last-child{text-align:right}
.cband__cols a{color:#fff;text-decoration:none}
.cband__cols a:hover{color:var(--bronze-lit)}
@media(max-width:760px){
  .cband__cols{grid-template-columns:1fr;gap:1rem;text-align:center}
  .cband__cols div:first-child,.cband__cols div:last-child{text-align:center}
}

/* --- nav overlay: two columns split by a rule, as in the reference --- */
.nav-overlay__menu a{font-family:var(--serif);font-size:clamp(1.7rem,4.6vw,3.1rem);
  line-height:1.28;letter-spacing:.01em}
.nav-overlay__menu a:hover,.nav-overlay__menu a[aria-current]{color:var(--bronze-lit)}
.nav-close{width:64px;height:64px;border-radius:50%;
  border:1px solid rgba(253,248,244,.4);background:transparent;color:var(--cream);
  font-size:1.5rem;line-height:1;cursor:pointer}
.nav-close:hover{border-color:var(--bronze-lit);color:var(--bronze-lit)}

/* --- page head on the brand ground (About pattern from the reference) --- */
/* A photograph under a brown scrim rather than a flat block — the page opened
   on an empty coloured band before. The scrim is heavy enough that the title
   holds over any part of the picture. */
.pagehead{position:relative;isolation:isolate;overflow:hidden;background:var(--cocoa-deep);
  text-align:center;
  padding-block:calc(var(--hdr) + clamp(28px,4.4vw,64px)) clamp(26px,3.6vw,54px)}
.pagehead__media{position:absolute;inset:0;z-index:-2}
.pagehead__media .media--hero{width:100%;height:100%;object-fit:cover}
.pagehead::after{content:"";position:absolute;inset:0;z-index:-1;background:
  radial-gradient(115% 95% at 50% 45%,rgba(70,46,36,.42) 0%,rgba(40,26,20,.8) 100%),
  linear-gradient(180deg,rgba(33,21,17,.6) 0%,rgba(51,33,26,.42) 45%,rgba(33,21,17,.78) 100%)}
.pagehead__title{font-family:var(--serif);font-weight:300;text-transform:uppercase;
  color:#fff;font-size:clamp(2.3rem,7.4vw,6rem);line-height:.96;letter-spacing:.01em;margin:0}
.pagehead__lede{margin:clamp(16px,2.4vw,28px) auto 0;max-width:56ch;
  color:rgba(255,255,255,.86);font-size:clamp(.95rem,1.5vw,1.1rem)}

/* --- story block: photo against a dark panel, copy centred --- */
.storyblock{display:grid;grid-template-columns:1fr 1fr;gap:0;padding:0;background:var(--ink)}
.storyblock--flip .storyblock__media{order:2}
.storyblock__media{position:relative;min-height:clamp(230px,29vw,400px);overflow:hidden}
.storyblock__media .media--tile{position:absolute;inset:0}
.storyblock__text{display:grid;align-content:center;justify-items:center;text-align:center;
  padding:clamp(30px,5vw,72px)}
.storyblock__h{font-family:var(--serif);font-weight:300;text-transform:uppercase;
  color:#fff;font-size:clamp(1.5rem,3.2vw,2.5rem);letter-spacing:.02em;margin:.2rem 0 1rem}
.storyblock__text p{color:rgba(253,248,244,.78);max-width:46ch;margin:0}
@media(max-width:820px){
  .storyblock{grid-template-columns:1fr}
  .storyblock--flip .storyblock__media{order:0}
}

/* gallery tiles are figures, not links */
.tilegrid figure.tile{margin:0;display:block;position:relative;aspect-ratio:1;overflow:hidden}

/* a real photograph in a hero must cover, like a panel background */
.hero__media .media--hero{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block}

/* Below the desktop breakpoint the header's Reserve button pushed the burger
   off the right edge, so there was no way into the navigation at all. The
   sticky bottom bar already carries Reserve on mobile, so the header keeps the
   burger and drops the duplicate button. */
@media(max-width:1023px){
  .hdr{gap:.5rem}
  .hdr__right .btn{display:none}
  .burger{display:grid;flex:0 0 44px}
}

/* --- menu hub: editorial band, photographic doors, quiet index --------------
   The reference puts one huge word on the brand ground, a statement beside a
   paragraph, then the menu names as a serif row. Amami keeps its own Italian
   page name in that slot and adds two full doors for the menus that are
   actually published, so the hub is a way in rather than a list of links. */
.menuband{position:relative;isolation:isolate;overflow:hidden;background:var(--cocoa);
  padding-top:calc(var(--hdr) + clamp(24px,3.8vw,52px));
  padding-bottom:clamp(26px,3.6vw,50px)}
/* The dining-room loop runs behind the band. The brand ground stays on top of
   it as a heavy tint so the page still reads as warm brown and the type keeps
   its contrast; the video is texture, not the subject. */
.menuband__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  z-index:-2;display:block}
.menuband::after{content:"";position:absolute;inset:0;z-index:-1;background:
  radial-gradient(120% 90% at 50% 40%,rgba(70,46,36,.72) 0%,rgba(51,33,26,.94) 100%),
  linear-gradient(180deg,rgba(33,21,17,.9) 0%,rgba(51,33,26,.86) 45%,rgba(33,21,17,.94) 100%)}
@media(prefers-reduced-motion:reduce){.menuband__video{display:none}}
.menuband__eyebrow{text-align:center;color:var(--bronze-lit);margin-bottom:.9rem}
.menuband__title{font-family:var(--serif);font-weight:300;text-transform:uppercase;
  text-align:center;color:#fff;margin:0;
  font-size:clamp(2.9rem,10vw,8rem);line-height:.92;letter-spacing:.015em}
/* The band carries the page name and the menu row only — the intro copy was
   removed at the client's request. */
.menuband__row{margin-top:clamp(16px,2.4vw,30px);padding-top:clamp(16px,2.4vw,28px);
  border-top:1px solid rgba(253,248,244,.18)}

.mdoors-sec{padding:clamp(12px,1.6vw,22px)}
.mdoors{display:grid;gap:clamp(12px,1.6vw,22px)}
@media(min-width:900px){.mdoors{grid-template-columns:1fr 1fr}}
.mdoor{position:relative;isolation:isolate;display:grid;align-content:end;
  min-height:clamp(300px,33vw,420px);overflow:hidden;text-decoration:none;
  padding:clamp(24px,3.2vw,46px);background:var(--ink-soft)}
.mdoor__media{position:absolute;inset:0;z-index:-2;display:block}
.mdoor__media .media--tile{width:100%;height:100%;object-fit:cover;
  transition:transform 1s ease}
.mdoor:hover .mdoor__media .media--tile{transform:scale(1.045)}
/* A bright photograph (the flamed cocktail) washed out the eyebrow, so the
   scrim carries more weight through the middle and the type carries a shadow. */
.mdoor::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(
  180deg,rgba(11,9,8,.16) 0%,rgba(11,9,8,.42) 40%,rgba(11,9,8,.78) 72%,rgba(11,9,8,.95) 100%)}
.mdoor>span:not(.mdoor__media){text-shadow:0 1px 16px rgba(11,9,8,.8)}
.mdoor__en{font-family:var(--accent);font-size:.6875rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--bronze-lit);margin-bottom:.55rem}
.mdoor__it{font-family:var(--serif);font-weight:300;text-transform:uppercase;
  font-size:clamp(1.9rem,3.5vw,2.8rem);line-height:1.02;color:#fff}
.mdoor__desc{margin-top:.9rem;font-size:.95rem;max-width:44ch;
  color:rgba(253,248,244,.86)}
.mdoor__fact{margin-top:1rem;font-size:.7rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--bronze-lit)}
.mdoor__go{margin-top:1.5rem;width:max-content;color:#fff;font-size:.7rem;
  letter-spacing:.2em;text-transform:uppercase;padding-bottom:.4rem;
  border-bottom:1px solid rgba(255,255,255,.55);transition:color .25s,border-color .25s}
.mdoor:hover .mdoor__go{color:var(--bronze-lit);border-bottom-color:var(--bronze-lit)}

.mindex{border-top:1px solid rgba(202,157,117,.22)}
.mindex__item{display:grid;gap:.35rem 2rem;align-items:baseline;
  padding:clamp(18px,2.4vw,28px) clamp(4px,1vw,14px);text-decoration:none;
  border-bottom:1px solid rgba(202,157,117,.18);transition:background .25s,padding-left .25s}
.mindex__item:hover{background:var(--ink-soft);padding-left:clamp(10px,1.6vw,22px)}
@media(min-width:760px){
  .mindex__item{grid-template-columns:minmax(180px,.9fr) minmax(0,1.5fr) auto}
}
.mindex__en{font-family:var(--accent);font-size:.65rem;letter-spacing:.22em;text-transform:uppercase;color:var(--bronze);
  grid-row:1;align-self:center}
.mindex__it{font-family:var(--serif);font-size:clamp(1.35rem,2.2vw,1.7rem);color:var(--cream)}
.mindex__desc{margin:0;font-size:.92rem;color:rgba(253,248,244,.7)}
.mindex__soon{font-size:.63rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--bronze-lit);white-space:nowrap}
@media(min-width:760px){
  .mindex__en{grid-column:1;grid-row:1;margin-bottom:-.2rem}
  .mindex__it{grid-column:1;grid-row:2}
  .mindex__desc{grid-column:2;grid-row:1/3;align-self:center}
  .mindex__soon{grid-column:3;grid-row:1/3;align-self:center;text-align:right}
}

/* --- After Dark ------------------------------------------------------------
   Built on the nightlife reference: an oversized wordmark laid over the
   photograph, a bronze panel where the type is the picture, and one dark card
   of small copy. Heavier Jost than the rest of the site, tight tracking, and
   the two words stacked so the mark reads as a mark rather than a heading. */
.adhero{position:relative;isolation:isolate;min-height:min(70vh,660px);
  display:grid;place-items:center;text-align:center;overflow:hidden;
  padding:calc(var(--hdr) + 3vh) var(--pad) 4.5vh}
.adhero__media{position:absolute;inset:0;z-index:-2}
.adhero__media .media--hero{width:100%;height:100%;object-fit:cover}
.adhero::after{content:"";position:absolute;inset:0;z-index:-1;background:
  radial-gradient(62% 46% at 50% 48%,rgba(11,9,8,.5) 0%,rgba(11,9,8,.2) 60%,rgba(11,9,8,0) 100%),
  linear-gradient(180deg,rgba(11,9,8,.55) 0%,rgba(11,9,8,.2) 45%,rgba(11,9,8,.8) 100%)}
/* Brand faces only — the wordmark is set in the same Cormorant Garamond the
   rest of the site displays in, not in a heavier grotesque brought in for it. */
.adhero__mark,.adend__word{font-family:var(--serif);font-weight:300;color:#fff;
  text-transform:uppercase;line-height:.92;letter-spacing:.012em;margin:0;
  font-size:clamp(2.9rem,12.5vw,9.5rem);text-shadow:0 2px 40px rgba(11,9,8,.6)}
.adhero__k{margin-bottom:1rem}
.adhero__mark span,.adend__word span{display:block}
.admark{font-family:var(--accent);margin:1.4rem 0 0;display:flex;flex-wrap:wrap;gap:.55rem .8rem;
  justify-content:center;align-items:center;color:rgba(253,248,244,.92);
  font-size:clamp(.66rem,1.5vw,.8rem);letter-spacing:.2em;text-transform:uppercase}
.admark b{font-weight:600;color:#fff}
.admark i{font-style:normal;color:var(--bronze-lit);font-size:.7em}
.adhero__act,.adend__act{display:flex;gap:.8rem;flex-wrap:wrap;justify-content:center;
  margin-top:2rem}
.adbtn--line{border-color:rgba(255,255,255,.75);background:transparent}

.adcollage{display:grid;gap:clamp(12px,1.6vw,20px);padding:clamp(12px,1.6vw,20px);
  background:var(--ink)}
@media(min-width:900px){.adcollage{grid-template-columns:1.05fr .95fr}}
.adpanel{position:relative;background:var(--cocoa);overflow:hidden;
  min-height:clamp(280px,32vw,400px);display:grid;align-content:center;
  padding:clamp(26px,4vw,56px)}
.adpanel__type{font-family:var(--serif);font-weight:400;text-transform:uppercase;
  color:#fff;margin:0;line-height:1;letter-spacing:.015em;
  font-size:clamp(2.1rem,5.6vw,4rem);opacity:.97}
/* The picture sits over the tail of the word, as in the reference, but out of
   the way of the first two lines — centred it made the headline unreadable. */
.adpanel{padding-bottom:clamp(120px,20vw,200px)}
.adpanel__inset{position:absolute;right:clamp(14px,3vw,40px);bottom:clamp(14px,3vw,40px);
  width:min(42%,230px);aspect-ratio:3/4;overflow:hidden;
  box-shadow:0 24px 60px rgba(11,9,8,.5)}
.adpanel__inset .media--tile{width:100%;height:100%;object-fit:cover}
.adpanel__type{position:relative;z-index:1;
  text-shadow:0 2px 24px rgba(51,33,26,.5)}

.adcard{position:relative;background:var(--ink-soft);display:grid;overflow:hidden}
@media(min-width:640px){.adcard{grid-template-rows:auto 1fr}}
.adcard__media{position:relative;aspect-ratio:16/9;overflow:hidden}
.adcard__media .media--tile{width:100%;height:100%;object-fit:cover}
.adcard__body{padding:clamp(22px,3vw,40px)}
.adcard__k{font-family:var(--sans);font-weight:600;text-transform:uppercase;
  letter-spacing:.06em;font-size:clamp(1rem,2vw,1.3rem);color:#fff;margin:0 0 1rem}
.adcard__body p{font-size:.9rem;color:rgba(253,248,244,.76);max-width:46ch}
.adcard__go{display:inline-block;margin-top:.4rem;font-size:.7rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--bronze-lit);text-decoration:none;
  border-bottom:1px solid rgba(202,157,117,.5);padding-bottom:.3rem}
.adcard__go:hover{color:#fff;border-bottom-color:#fff}

.adrooms{display:grid;gap:clamp(14px,2vw,26px);padding-inline:var(--pad);
  max-width:1240px;margin-inline:auto}
@media(min-width:760px){.adrooms{grid-template-columns:1fr 1fr}}
.adroom__media{position:relative;aspect-ratio:4/3;overflow:hidden;margin-bottom:1.1rem}
.adroom__media .media--tile{width:100%;height:100%;object-fit:cover;
  transition:transform .8s ease}
.adroom:hover .adroom__media .media--tile{transform:scale(1.04)}
.adroom__name{font-family:var(--sans);font-weight:600;text-transform:uppercase;
  letter-spacing:.06em;font-size:1.15rem;color:#fff;margin:0 0 .5rem}
.adroom__copy{margin:0 0 .5rem;font-size:.92rem;color:rgba(253,248,244,.74)}
.adroom__cap{font-family:var(--accent);margin:0;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--bronze-lit)}

.adend{position:relative;isolation:isolate;overflow:hidden;text-align:center;
  padding-block:clamp(34px,4.8vw,66px)}
.adend__media{position:absolute;inset:0;z-index:-2}
.adend__media .media--tile{width:100%;height:100%;object-fit:cover}
.adend::after{content:"";position:absolute;inset:0;z-index:-1;background:rgba(11,9,8,.72)}
.adend__in{max-width:1240px;margin:0 auto;padding-inline:var(--pad)}
.adend__word{font-size:clamp(2.6rem,11vw,7.5rem)}
.adend__copy{margin:1.4rem auto 0;max-width:44ch;color:rgba(253,248,244,.86)}

/* --- phones ----------------------------------------------------------------
   Nothing under 12px on a phone, and no tap target under ~40px. Most people
   reach this site from an ad on a handset, so the small type that reads as
   refined on a desktop just reads as unreadable there. */
@media(max-width:760px){
  .eyebrow{font-size:.75rem;letter-spacing:.2em}
  .ph{min-height:130px}
  .ph__label,.ph__spec,.ph--hero .ph__spec,.ph--hero .ph__what{font-size:.75rem}
  .cband__cols a{display:inline-block;padding:.35rem 0}
  .mdoor__fact,.mindex__soon,.mdoor__en,.mindex__en,.adroom__cap,
  .menuband__note,.cband__maplabel,.mdoor__go,.adcard__go{font-size:.75rem}
  .menu-notes li,.menu-foot,.dish__add{font-size:.8rem}
  .crumbs{font-size:.8rem}
  .crumbs a{display:inline-block;padding:.3rem 0}
  .btn{padding:.95em 1.7em}
  .btn--ghost{font-size:.8125rem;padding:1em 1.9em}
  .tabrow__tab{padding:.35em 0}
  .card h3{font-size:1.35rem}
  /* a 16px field stops iOS zooming the page on focus */
  .field input,.field select,.field textarea{font-size:16px}
}

@media(max-width:760px){
  .eyebrow{font-size:.75rem;letter-spacing:.2em}
  .ph{min-height:130px}
  .ph__label,.ph__spec,.ph--hero .ph__spec,.ph--hero .ph__what{font-size:.75rem}
  .cband__cols a{display:inline-block;padding:.35rem 0}
  .mdoor__fact,.mindex__soon,.mdoor__en,.mindex__en,.adroom__cap,
  .menuband__note,.cband__maplabel,.mdoor__go,.adcard__go{font-size:.75rem}
  .menu-notes li,.menu-foot,.dish__add{font-size:.8rem}
  .crumbs{font-size:.8rem}
  .crumbs a{display:inline-block;padding:.3rem 0}
  .btn{padding:.95em 1.7em}
  .btn--ghost{font-size:.8125rem;padding:1em 1.9em}
  .tabrow__tab{padding:.35em 0}
  .card h3{font-size:1.35rem}
  /* a 16px field stops iOS zooming the page on focus */
  .field input,.field select,.field textarea{font-size:16px}
}

/* --- events: the deck layout ------------------------------------------------
   Built to the reference: a title card, then one block per space where the
   photographs fill the frame and a black panel of copy sits in the top corner.
   The arrangement repeats unchanged for every room, which is what makes the
   set read as a set. */
.evhero{position:relative;isolation:isolate;overflow:hidden;
  min-height:min(58vh,540px);display:grid;place-items:center;text-align:center;
  padding:calc(var(--hdr) + 3vh) var(--pad) 4.5vh}
.evhero__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.evhero::after{content:"";position:absolute;inset:0;z-index:-1;background:
  radial-gradient(70% 55% at 50% 55%,rgba(11,9,8,.5) 0%,rgba(11,9,8,.2) 60%,rgba(11,9,8,0) 100%),
  linear-gradient(180deg,rgba(11,9,8,.6) 0%,rgba(11,9,8,.25) 42%,rgba(11,9,8,.88) 100%)}
.evhero__mark{width:clamp(160px,22vw,260px);height:auto;margin:0 auto}
.evhero__kicker{margin:clamp(18px,3vw,30px) 0 0;font-family:var(--sans);font-weight:300;
  color:#fff;text-transform:uppercase;letter-spacing:.1em;
  font-size:clamp(1.1rem,3.4vw,2.4rem);line-height:1.15}
.evhero__act{margin-top:clamp(22px,3.5vw,36px)}

/* The blocks butt against each other edge to edge, as in the deck — the base
   section padding would otherwise open a gap between them. */
.evroom{display:grid;grid-template-columns:1fr;background:var(--ink);padding:0}
.evroom figure{margin:0;position:relative;overflow:hidden;min-height:clamp(190px,24vw,280px)}
.evroom figure .media--tile{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.evroom__text{background:var(--ink);padding:clamp(26px,4vw,60px) clamp(24px,4vw,64px)}
.evroom__name{font-family:var(--sans);font-weight:600;text-transform:uppercase;
  color:#fff;margin:0 0 1rem;letter-spacing:.01em;
  font-size:clamp(1.15rem,2.2vw,1.7rem);line-height:1.2}
.evroom__copy{margin:0 0 1.3rem;color:rgba(253,248,244,.86);max-width:46ch;
  font-size:clamp(.95rem,1.35vw,1.1rem);line-height:1.55}
.evroom__cap{margin:0;font-size:clamp(.95rem,1.35vw,1.1rem);color:#fff}
.evroom__cap strong{font-weight:600;letter-spacing:.02em}
.evroom__cap span{color:rgba(253,248,244,.72)}
@media(min-width:900px){
  .evroom{grid-template-columns:34fr 66fr;grid-template-rows:auto 1fr}
  .evroom__a{grid-area:1/1}
  .evroom__b{grid-area:2/1}
  .evroom__text{grid-area:1/2;display:grid;align-content:center}
  .evroom__c{grid-area:2/2;min-height:clamp(260px,28vw,380px)}
}

/* --- home on a phone, per the reference -------------------------------------
   The panels are inset cards with the brand ground showing around them, the
   word centred over the photograph and the action directly beneath it. Then a
   booking card and the hours, which is how the reference closes the page. */
@media(max-width:760px){
  /* The cards shorten on a phone; the hero must not — this rule came after the
     .panel--first height and was capping it at 560px, so the hero filled two
     thirds of the screen instead of all of it. */
  .panel:not(.panel--first){min-height:min(50vh,400px);
    margin:0 clamp(14px,4.5vw,22px) clamp(14px,4.5vw,22px)}
  .panel--first{margin:0 0 clamp(14px,4.5vw,22px);min-height:min(78svh,620px)}
  .panel__word{font-size:clamp(2.6rem,12vw,4.2rem)}
  .panel__sub{font-size:1rem;max-width:30ch}
  .btn--ghost{margin-top:clamp(18px,4vw,26px);width:min(280px,78vw)}
}

.homebook{background:var(--cocoa);text-align:center}
/* the fixed header must not cover the heading when #book is jumped to */
.homebook{scroll-margin-top:var(--hdr)}
.homebook{padding-block:clamp(28px,4vw,54px) clamp(30px,4.2vw,58px)}
.homebook__h{font-family:var(--sans);font-weight:500;color:#fff;
  font-size:clamp(1.35rem,3.4vw,1.9rem);letter-spacing:.01em;
  margin:0 0 clamp(20px,3vw,30px)}
.homebook__card{display:flex;justify-content:center;min-height:270px}
.homebook__note{margin:clamp(18px,3vw,26px) 0 0;font-size:.86rem;
  color:rgba(253,248,244,.82)}
.homebook__note a{color:#fff}
.btn--line{background:transparent;border-color:rgba(253,248,244,.7)}

/* --- events: group booking, per the client's second reference ---------------
   The whole page sits on the brand ground: title, two actions, a paragraph,
   two photographs, the capacity row, then the practical block. */
.gb{background:var(--cocoa);text-align:center;
  padding:calc(var(--hdr) + clamp(26px,4.4vw,60px)) var(--pad) clamp(26px,3.6vw,52px)}
.gb__title{font-family:var(--serif);font-weight:300;color:#fff;margin:0;
  text-transform:uppercase;letter-spacing:.02em;line-height:1.06;
  font-size:clamp(2rem,6.4vw,4.6rem);max-width:22ch;margin-inline:auto}
.gb__sub{font-family:var(--serif);font-weight:300;color:#fff;
  font-size:clamp(1.5rem,4.2vw,3rem);line-height:1.15;
  margin:clamp(24px,4vw,44px) 0 0}
.gb__act{display:flex;gap:clamp(14px,4vw,60px);justify-content:center;flex-wrap:wrap;
  margin:clamp(26px,4vw,44px) 0 0}
.gb__act .btn{min-width:min(220px,74vw)}
.gb__copy{margin:clamp(22px,3vw,32px) auto 0;max-width:56ch;
  color:rgba(253,248,244,.9);font-size:clamp(.95rem,1.5vw,1.05rem);line-height:1.65}
.gb__copy a{color:#fff}

.gbshots{display:grid;gap:clamp(8px,1.4vw,18px);padding:0;background:var(--cocoa)}
@media(min-width:760px){.gbshots{grid-template-columns:1fr 1fr}}
.gbshots figure{margin:0;position:relative;overflow:hidden;
  min-height:clamp(240px,30vw,420px)}
.gbshots .media--tile{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

.gbcap{background:var(--cocoa);padding-block:clamp(40px,6vw,84px)}
.gbcap__rule{display:flex;align-items:center;gap:clamp(14px,3vw,30px);margin:0 0 clamp(28px,5vw,56px);
  font-family:var(--serif);text-transform:uppercase;letter-spacing:.24em;
  font-size:clamp(.8rem,1.4vw,1rem);color:rgba(253,248,244,.92)}
.gbcap__rule::before,.gbcap__rule::after{content:"";flex:1;height:1px;
  background:rgba(253,248,244,.35)}
.gbcap__row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,10px) 0}
@media(min-width:900px){.gbcap__row{grid-template-columns:repeat(4,1fr)}}
.gbcap__col{text-align:center;padding-inline:clamp(8px,2vw,24px)}
@media(min-width:900px){
  .gbcap__col + .gbcap__col{border-left:1px solid rgba(253,248,244,.28)}
}
.gbcap__name{font-family:var(--serif);font-weight:300;color:#fff;margin:0 0 .9rem;
  font-size:clamp(1.1rem,2vw,1.5rem)}
.gbcap__nums{display:flex;justify-content:center;gap:clamp(16px,3vw,34px)}
.gbcap__fig{display:grid;justify-items:center;gap:.35rem}
.gbcap__n{font-family:var(--sans);font-weight:300;color:#fff;line-height:1;
  font-size:clamp(1.7rem,3.4vw,2.4rem)}
.gbcap__i{width:22px;height:22px;color:rgba(253,248,244,.9)}
.gbcap__l{font-size:.7rem;letter-spacing:.12em;color:rgba(253,248,244,.72)}

.gbinfo{background:var(--cocoa);text-align:center;
  padding-block:clamp(30px,5vw,56px) clamp(44px,7vw,84px);
  border-top:1px solid rgba(253,248,244,.28)}
.gbinfo__h{font-family:var(--serif);font-weight:300;color:#fff;
  font-size:clamp(1.3rem,2.4vw,1.8rem);margin:0 0 .6rem}
.gbinfo__h + .gbinfo__p{margin-top:0}
.gbinfo__p{margin:0 auto;max-width:52ch;color:rgba(253,248,244,.86);
  font-size:clamp(.9rem,1.4vw,1rem);line-height:1.7}
.gbinfo__p a{color:#fff}

/* --- the enquiry form, over the dining-room loop ----------------------------
   The video is texture behind the form, so the scrim is heavy and the fields
   get a little more body than elsewhere — a form has to stay legible while
   something moves behind it. */
.gbform{position:relative;isolation:isolate;overflow:hidden;
  padding-block:clamp(48px,8vw,110px)}
.gbform__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  z-index:-2;display:block}
.gbform::after{content:"";position:absolute;inset:0;z-index:-1;background:
  linear-gradient(180deg,rgba(11,9,8,.9) 0%,rgba(40,26,20,.84) 45%,rgba(11,9,8,.92) 100%)}
.gbform__in{position:relative}
.gbform .field input,.gbform .field select,.gbform .field textarea{
  background:rgba(11,9,8,.72);border-color:rgba(253,248,244,.28);
  backdrop-filter:blur(2px)}
.gbform .field input:focus,.gbform .field textarea:focus{border-color:var(--bronze-lit)}
.gbform .field label{color:var(--bronze-lit)}
@media(prefers-reduced-motion:reduce){.gbform__bg{display:none}}


/* ==========================================================================
   Client copy pass, 2026-09-03 (structure reverted 2026-09-04). No new page
   sections — these only cover the slots the copy landed in: two actions under
   the hero word, headline sizes for the places where a sentence replaced a
   one-word title, the quote on the chef page, and copy inside the booking
   block, the menu band and the story page head.
   ========================================================================== */

.panel__act{display:flex;flex-wrap:wrap;gap:clamp(12px,2vw,20px);justify-content:center}
.panel__act .btn--ghost{margin-top:clamp(20px,3vw,34px)}

/* a sentence where the design expected one word */
.panel__word--line{font-size:clamp(2rem,6.2vw,5.2rem);line-height:1.02;
  max-width:16ch;margin-inline:auto}
.menuband__title--line{font-size:clamp(2rem,6vw,4.6rem);line-height:1.03;
  max-width:17ch;margin-inline:auto}
.pagehead__title--line{font-size:clamp(2rem,6.2vw,5rem);line-height:1.02;
  max-width:15ch;margin-inline:auto}

/* the chef's own line, pulled out of the copy column */
.pullq{margin:clamp(18px,2.6vw,28px) 0 0;padding:0 0 0 clamp(14px,2vw,22px);
  border-left:2px solid var(--bronze);max-width:44ch}
.pullq p{font-family:var(--serif);font-size:clamp(1.25rem,2.4vw,1.7rem);
  line-height:1.32;margin:0;color:inherit}
.pullq cite{display:block;margin-top:.6rem;font-style:normal;font-family:var(--accent);
  font-size:.6875rem;letter-spacing:.24em;text-transform:uppercase;color:var(--bronze-lit)}

/* copy in the menu band, above the row of menu names */
.menuband__lede{margin:clamp(16px,2.4vw,24px) auto 0;max-width:52ch;text-align:center;
  color:rgba(253,248,244,.86);font-size:clamp(.95rem,1.5vw,1.08rem)}
.menuband__lede + .menuband__lede{margin-top:.7rem}

/* copy in the booking block, above the widget */
.homebook__lede{margin:0 auto clamp(14px,2vw,20px);max-width:46ch;
  color:rgba(253,248,244,.86);font-size:clamp(.95rem,1.5vw,1.08rem)}
.homebook__lede + .homebook__lede{margin-bottom:clamp(20px,3vw,30px)}

/* copy in the story page head, under the lede */
.pagehead__copy{display:grid;gap:.9rem;margin:clamp(20px,3vw,34px) auto 0;
  max-width:58ch;color:rgba(255,255,255,.82);
  font-size:clamp(.95rem,1.5vw,1.05rem);line-height:1.68}
.pagehead__copy p{margin:0}
.pagehead__k{color:var(--bronze-lit);margin-bottom:.9rem}

@media(max-width:700px){
  .panel__act{flex-direction:column;align-items:center}
  .panel__act .btn--ghost{width:min(280px,78vw)}
  .panel__act .btn--ghost + .btn--ghost{margin-top:0}
  .pullq{padding-left:14px}
}


.split h2.display,.section-head h2.display{margin-bottom:.7rem}

/* ==========================================================================
   Phone reading pass, 2026-09-04. The copy is longer than the layout was
   built for, and on a 390px screen the centred paragraphs ran the full width
   at desktop size. Nothing moves — measures come in, type comes down, and the
   running copy stops being centred once it is more than a couple of lines.
   ========================================================================== */
@media(max-width:700px){
  /* headings sized for a phone rather than scaled down from a desktop clamp */
  .display{font-size:clamp(1.75rem,7.4vw,2.5rem);line-height:1.06}
  .panel__word--line{font-size:clamp(1.9rem,8.4vw,2.6rem);max-width:15ch}
  .pagehead__title--line{font-size:clamp(1.9rem,8.2vw,2.5rem);max-width:15ch}
  .menuband__title--line{font-size:clamp(1.9rem,8.2vw,2.5rem);max-width:15ch}
  .storyblock__h{font-size:clamp(1.3rem,5.6vw,1.8rem);margin:.15rem 0 .7rem}

  /* short measures so lines break evenly instead of leaving one word behind */
  .lede{font-size:1rem;line-height:1.6;max-width:34ch}
  .panel__sub{max-width:23ch;font-size:1rem;line-height:1.5}
  .pagehead__lede{font-size:1.02rem;max-width:26ch;line-height:1.5}
  .menuband__lede,.homebook__lede{max-width:28ch;font-size:.97rem}
  .storyblock__text p{max-width:34ch;font-size:.97rem;line-height:1.6}
  .adcard__body p,.adend__copy,.gb__copy{max-width:34ch;margin-inline:auto;font-size:.97rem}

  /* more than two lines of running copy reads badly centred */
  .pagehead__copy{text-align:left;max-width:34ch;gap:.72rem;
    font-size:.9375rem;line-height:1.62;margin-top:clamp(16px,4vw,26px)}

  /* the head sits over a photograph — give the type a darker floor to sit on */
  .pagehead{padding-block:calc(var(--hdr) + 42px) 44px}
  .pagehead::after{background:
    radial-gradient(130% 80% at 50% 40%,rgba(70,46,36,.5) 0%,rgba(30,19,15,.88) 100%),
    linear-gradient(180deg,rgba(25,16,13,.72) 0%,rgba(40,26,20,.5) 40%,rgba(25,16,13,.9) 100%)}

  /* a heading sat straight on top of its paragraph — h2 carries margin:0 */
  .split .display,.section-head .display{margin-bottom:.75rem}
  .split p{max-width:36ch;font-size:.97rem}
  .card p{font-size:.95rem}

  /* the hero sat a third of the way down its own box on a phone */
  .hero{min-height:42svh;padding-top:calc(var(--hdr) + 1vh);padding-bottom:3.5vh}
  /* the shoot note is a message to the team, and on a phone it climbed into
     the headline it sits behind */
  .ph--hero .ph__spec{display:none}

  /* breathing room between blocks that only had inline padding */
  .storyblock__text{padding:clamp(28px,7vw,44px) var(--pad)}
  .section-head{margin-bottom:clamp(20px,5vw,36px)}
  .card{padding:20px}
  .pullq{margin-top:1.1rem}
  .pullq p{font-size:1.12rem;line-height:1.38}
  .menu-notes{font-size:.85rem}
}

/* the one-word panels keep their scale; only a sentence gets pulled in */
@media(max-width:420px){
  .panel__sub{max-width:21ch}
  .pagehead__copy,.pagehead__lede{max-width:31ch}
}

/* the line a form writes its result into (apps-script/forms.gs) */
.form-status{grid-column:1/-1;margin:.7rem 0 0;font-size:.9rem;min-height:1.2em;
  color:var(--bronze-lit)}
.form-status[data-state="ok"]{color:var(--cream)}
.form-status[data-state="err"]{color:var(--bronze-lit)}
.ftr .form-status{margin:.5rem 0 0;font-size:.82rem;color:var(--bronze-lit)}