/* ==========================================================================
   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 / #ca9d75,
     cream #fdf8f4, ink #0b0908, warm brown #433e37, blush #f7efe6. */
  /* Client-specified, 2026-08-31. Used with restraint so it reads as a
     considered accent rather than a theme: the primary action, the menu band
     and the After Dark panel. Type accents stay bronze. */
  --wine:#812b28;
  --wine-deep:#5e1f1d;
  --wine-lit:#9c3a35;
  --warm:#433e37;        /* warm brown, the mid ground */
  --warm-deep:#2a2621;
  --bronze:#a87a41;
  --bronze-lit:#ca9d75;
  --cream:#fdf8f4;
  --cream-warm:#f7efe6;  /* brand blush */
  --ink:#0b0908;         /* near-black ground */
  --ink-soft:#141110;
  --stone:#433e37;
  --line:rgba(253,248,244,.16);

  /* Three faces, and only these three (client, 2026-08-31):
     Cormorant Garamond for titles, Poppins for body, Forward Serif for accent.
     Forward Serif is not on Google Fonts and no file has been supplied yet, so
     --accent falls back to the body face and changes nothing until the font is
     dropped in here. */
  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --sans:'Poppins','Helvetica Neue',system-ui,sans-serif;
  --accent:'Forward Serif','Poppins','Helvetica Neue',system-ui,sans-serif;

  --hdr:76px;            /* header height */
  --pad:clamp(20px,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(--wine);border-color:var(--wine)}
.btn--solid:hover{background:var(--bronze-lit);border-color:var(--bronze-lit)}
section{padding-block:clamp(48px,8vw,110px)}
.section-head{margin-bottom:clamp(28px,5vw,56px)}

/* 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:78vh;min-height:78svh;display:grid;place-items:center;
  text-align:center;padding:calc(var(--hdr) + 6vh) var(--pad) 8vh;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:2rem 1.25rem;min-height:220px}
.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:3/4}
.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:44vh;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(36px,7vw,84px))}
.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(--warm)}
.panel{position:relative;isolation:isolate;padding:0;
  min-height:min(92vh,900px);display:grid;place-items:center;
  margin:0 clamp(12px,1.7vw,26px) clamp(12px,1.7vw,26px);overflow:hidden}
.panel--first{margin-top:clamp(12px,1.7vw,26px)}
.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(78vh,660px);margin:0 6px 6px}
  .panel--first{margin-top:6px}
}

/* --- menu hub: serif tab row --- */
.tabband{background:var(--warm);padding-block:clamp(44px,7vw,92px)}
.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(56px,8vw,110px);
  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 wine 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(--wine-deep);
  text-align:center;
  padding-block:calc(var(--hdr) + clamp(54px,8vw,120px)) clamp(48px,7vw,100px)}
.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(129,43,40,.42) 0%,rgba(46,14,13,.8) 100%),
  linear-gradient(180deg,rgba(38,11,10,.6) 0%,rgba(60,18,17,.42) 45%,rgba(38,11,10,.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(280px,42vw,560px);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(--wine);
  padding-top:calc(var(--hdr) + clamp(40px,7vw,92px));
  padding-bottom:clamp(40px,6vw,80px)}
/* 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(129,43,40,.72) 0%,rgba(60,18,17,.94) 100%),
  linear-gradient(180deg,rgba(38,11,10,.9) 0%,rgba(60,18,17,.86) 45%,rgba(38,11,10,.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(26px,4vw,52px);padding-top:clamp(24px,3.5vw,42px);
  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(400px,50vw,600px);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(94vh,880px);
  display:grid;place-items:center;text-align:center;overflow:hidden;
  padding:calc(var(--hdr) + 5vh) var(--pad) 8vh}
.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(--wine);overflow:hidden;
  min-height:clamp(340px,44vw,520px);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(60,18,17,.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(60px,9vw,120px)}
.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:180px}
  .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}
}