/* ==========================================================================
   Eaton Place — Franschhoek
   Built by TruePoint.

   The identity comes straight out of Roy's logo: geometric art-deco line work,
   black display type, one green, cream stock. Because the site ground IS cream,
   the logo needs no panel behind it here — unlike the Wi-Fi portal, where it
   sits on a photograph.
   ========================================================================== */

:root{
  --ink:      #14140f;
  --ink-soft: #55564c;
  --cream:    #f4efe3;
  --cream-lo: #ebe4d3;
  --green:    #597d46;   /* sampled from the logo artwork */
  --green-dk: #3f5c31;
  --gold:     #b08d50;   /* the warm accent the palette was missing */
  --gold-lo:  #e8dcc3;
  --venue:    #597d46;   /* overridden per venue */
  --paper:    #fbf8f1;
  --line:     rgba(20,20,15,.14);
  --display:  "Josefin Sans", "Century Gothic", "Futura", sans-serif;
  --body:     "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --wide:     1180px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--cream); color:var(--ink);
  font-family:var(--body); font-size:16.5px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{display:block; max-width:100%}
a{color:inherit}

.wrap{max-width:var(--wide); margin:0 auto; padding:0 24px}

/* ---- preview ribbon: prototype only, delete for the live build ---- */
.preview{
  background:var(--ink); color:var(--cream); text-align:center;
  font-size:11.5px; letter-spacing:.16em; text-transform:uppercase;
  padding:8px 16px;
}

/* ---- deco rule: the motif from the logo, reduced to a divider ---- */
.deco{display:flex; align-items:center; gap:12px; justify-content:center; margin:0 0 34px}
.deco::before, .deco::after{content:""; height:1px; width:min(90px,14vw); background:var(--green)}
.deco span{
  width:7px; height:7px; background:var(--green);
  transform:rotate(45deg);
}

/* ---- header ---- */
.top{
  position:sticky; top:0; z-index:50;
  background:rgba(244,239,227,.94);
  backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid var(--line);
}
.top__in{
  max-width:var(--wide); margin:0 auto; padding:12px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.top__logo{height:60px; width:auto}
.nav{display:flex; gap:26px; align-items:center}
.nav a{
  font-family:var(--display); font-size:13.5px; letter-spacing:.14em;
  text-transform:uppercase; text-decoration:none; color:var(--ink);
  padding:6px 0; border-bottom:1.5px solid transparent;
}
.nav a:hover{border-bottom-color:var(--green)}
.nav__cta{
  font-family:var(--display); font-size:13px; letter-spacing:.14em;
  text-transform:uppercase; text-decoration:none;
  background:var(--green); color:#fff; padding:10px 18px; border-radius:2px;
}
.nav__cta:hover{background:var(--green-dk)}
.burger{display:none; background:none; border:0; font-size:22px; cursor:pointer; color:var(--ink)}
@media (max-width:860px){
  .nav{display:none}
  .nav.is-open{
    display:flex; flex-direction:column; align-items:flex-start; gap:14px;
    position:absolute; left:0; right:0; top:100%;
    background:var(--cream); padding:20px 24px 26px;
    border-bottom:1px solid var(--line);
  }
  .burger{display:block}
}

/* ---- hero ---- */
.hero{position:relative; min-height:min(78vh,660px); display:grid; place-items:center;
      overflow:hidden; background:var(--ink)}
.hero__img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.hero::after{content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(12,14,10,.52), rgba(12,14,10,.72));}
.hero__in{position:relative; z-index:2; text-align:center; color:var(--cream); padding:80px 24px}
.hero__logo{width:min(78vw,420px); margin:0 auto 26px; filter:drop-shadow(0 4px 22px rgba(0,0,0,.5))}
.hero__kicker{
  font-family:var(--display); font-size:12px; letter-spacing:.3em;
  text-transform:uppercase; color:#dcd2b8; margin:0 0 14px;
}
.hero h1{
  font-family:var(--display); font-weight:300;
  font-size:clamp(30px,6vw,58px); line-height:1.06; letter-spacing:.02em;
  margin:0 0 18px;
}
.hero p{max-width:46ch; margin:0 auto 30px; color:rgba(244,239,227,.9); font-size:17px}
.btns{display:flex; gap:14px; justify-content:center; flex-wrap:wrap}
.btn{
  font-family:var(--display); font-size:13.5px; letter-spacing:.16em;
  text-transform:uppercase; text-decoration:none; padding:14px 26px;
  background:var(--green); color:#fff; border-radius:2px;
}
.btn:hover{background:var(--green-dk)}
.btn--ghost{background:transparent; color:var(--cream); border:1.5px solid rgba(244,239,227,.6)}
.btn--ghost:hover{background:rgba(244,239,227,.12)}

/* ---- sections ---- */
section{padding:84px 0}
.sec__head{text-align:center; margin:0 auto 44px; max-width:60ch}
.sec__kicker{
  font-family:var(--display); font-size:11.5px; letter-spacing:.28em;
  text-transform:uppercase; color:var(--green); margin:0 0 10px;
}
.sec__head h2{
  font-family:var(--display); font-weight:300;
  font-size:clamp(26px,3.6vw,40px); line-height:1.12; margin:0 0 12px;
}
.sec__head p{color:var(--ink-soft); margin:0}

/* ---- the houses ---- */
.houses{display:grid; gap:26px; grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.house{
  background:var(--paper); border:1px solid var(--line);
  display:flex; flex-direction:column; text-decoration:none;
  transition:transform .16s, box-shadow .16s;
}
.house:hover{transform:translateY(-3px); box-shadow:0 14px 40px rgba(20,20,15,.13)}
.house__logo{aspect-ratio:1/1; object-fit:cover; width:100%; background:var(--cream-lo)}
.house__body{padding:20px 22px 24px; flex:1; display:flex; flex-direction:column}
.house__name{font-family:var(--display); font-size:21px; font-weight:400; margin:0 0 4px}
.house__type{font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--green); margin:0 0 12px}
.house__blurb{font-size:14.5px; color:var(--ink-soft); margin:0 0 16px; flex:1}
.house__more{
  font-family:var(--display); font-size:12.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink); display:inline-flex; gap:8px; align-items:center;
}
.house--soon{opacity:.72}
.house__soon{
  font-family:var(--display); font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--green);
}

/* ---- alternating feature band ---- */
.band{background:var(--paper); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.split{display:grid; gap:48px; grid-template-columns:1fr 1fr; align-items:center}
@media (max-width:820px){ .split{grid-template-columns:1fr; gap:30px} }
.split h2{font-family:var(--display); font-weight:300; font-size:clamp(24px,3vw,36px); margin:0 0 16px}
.slot{
  aspect-ratio:4/3; background:var(--cream-lo); border:1px dashed rgba(20,20,15,.22);
  display:grid; place-items:center; text-align:center; padding:20px;
  font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft);
}

/* ---- menu ---- */
.menu__section{margin:0 0 44px}
.menu__section h3{
  font-family:var(--display); font-weight:400; font-size:20px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--green); margin:0 0 6px;
}
.menu__rule{height:1px; background:var(--line); margin:0 0 20px}
.dish{display:flex; gap:16px; align-items:baseline; padding:11px 0; border-bottom:1px dotted var(--line)}
.dish__name{font-weight:600; font-size:16px}
.dish__desc{display:block; font-weight:400; font-size:14.5px; color:var(--ink-soft); margin-top:3px}
.dish__price{margin-left:auto; font-family:var(--display); font-size:16px; white-space:nowrap}

/* ---- hours ---- */
.hours{list-style:none; margin:0; padding:0}
.hours li{display:flex; justify-content:space-between; gap:20px; padding:9px 0; border-bottom:1px solid var(--line); font-size:15px}
.hours li.is-today{font-weight:600}
.hours li.is-today .h__day::after{content:" · today"; color:var(--green); font-weight:400; font-size:12.5px; letter-spacing:.1em; text-transform:uppercase}

/* ---- booking placeholder ---- */
.book{
  background:var(--paper); border:1px solid var(--line); padding:30px 28px; text-align:center;
}
.book h3{font-family:var(--display); font-weight:400; font-size:22px; margin:0 0 10px}
.book p{color:var(--ink-soft); margin:0 0 20px; font-size:15px}
.book__note{
  margin-top:18px; font-size:12.5px; color:var(--ink-soft);
  border-top:1px solid var(--line); padding-top:14px;
}

/* ---- footer ---- */
.foot{background:var(--ink); color:rgba(244,239,227,.78); padding:60px 0 34px; font-size:14.5px}
.foot a{color:rgba(244,239,227,.9)}
.foot__grid{display:grid; gap:34px; grid-template-columns:1.4fr 1fr 1fr}
@media (max-width:760px){ .foot__grid{grid-template-columns:1fr} }
.foot h4{
  font-family:var(--display); font-size:12px; letter-spacing:.22em; text-transform:uppercase;
  color:#dcd2b8; margin:0 0 14px; font-weight:400;
}
.foot ul{list-style:none; margin:0; padding:0}
.foot li{margin:0 0 8px}
.foot__logo{width:230px; margin:0 0 16px; opacity:.95}
.foot__base{
  margin-top:40px; padding-top:20px; border-top:1px solid rgba(244,239,227,.16);
  display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap;
  font-size:12.5px; color:rgba(244,239,227,.55);
}


/* ==========================================================================
   v2 — REBUILD
   The old build leaned on one 560px stock photograph stretched across a
   2500px hero. That is what read as cheap. This version carries the design
   on type, colour and space, and reserves honest, designed slots where real
   photographs will go.
   ========================================================================== */

/* ---- designed photo slot ------------------------------------------------ */
.shot{
  position:relative; margin:0; width:100%; border-radius:3px; overflow:hidden;
  background:
    linear-gradient(135deg, var(--gold-lo) 0%, var(--cream-lo) 55%, #ded2b8 100%);
  border:1px solid rgba(20,20,15,.10);
  display:grid; place-items:end start;
}
.shot::before{   /* faint courtyard-ish geometry so it is not a blank box */
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(transparent 61%, rgba(20,20,15,.05) 61.5%),
    radial-gradient(ellipse at 50% 92%, rgba(176,141,80,.22), transparent 62%);
}
.shot{ place-items:center }
.shot figcaption{
  position:relative; z-index:2; text-align:center; padding:20px;
  font-family:var(--display); font-size:12px; letter-spacing:.2em;
  text-transform:uppercase; color:rgba(20,20,15,.46);
}
.shot figcaption::before{
  content:""; display:block; width:34px; height:1px;
  background:var(--gold); margin:0 auto 14px;
}
.shot figcaption span{
  display:block; margin-top:6px; font-family:var(--body);
  font-size:11.5px; letter-spacing:.06em; text-transform:none;
  color:rgba(20,20,15,.34);
}
/* Capped, or the slot becomes a wall of nothing on a narrow screen. */
.shot--tall{ aspect-ratio:4/5; max-height:440px }
.shot--wide{ aspect-ratio:3/2; max-height:360px }
@media (max-width:900px){
  .shot--tall{ aspect-ratio:16/9; max-height:260px }
  .shot--wide{ aspect-ratio:16/9; max-height:240px }
}

/* ---- lede (replaces the dark photo hero) -------------------------------- */
.lede{ padding:76px 0 84px; background:
       linear-gradient(180deg,var(--paper) 0%, var(--cream) 100%) }
.lede__in{ display:grid; grid-template-columns:1.05fr .95fr; gap:58px; align-items:center }
@media (max-width:900px){ .lede__in{ grid-template-columns:1fr; gap:36px } }
.lede__kicker{
  font-family:var(--display); font-size:11.5px; letter-spacing:.3em;
  text-transform:uppercase; color:var(--gold); margin:0 0 18px;
}
.lede__h{
  font-family:var(--display); font-weight:300;
  font-size:clamp(38px,5.6vw,68px); line-height:1.02; letter-spacing:.005em;
  margin:0 0 20px;
}
.lede__p{ font-size:17.5px; color:var(--ink-soft); max-width:46ch; margin:0 0 26px }
.lede .deco{ justify-content:flex-start; margin:0 0 30px }
.lede .deco::before{ width:34px }
.lede .deco::after{ width:min(130px,22vw) }
.btns--left{ justify-content:flex-start }
.btn--line{
  background:transparent; color:var(--ink); border:1.5px solid rgba(20,20,15,.28);
}
.btn--line:hover{ background:rgba(20,20,15,.06) }

/* ---- house cards: each carries its own venue colour --------------------- */
.house{ border-top:3px solid var(--venue) }
.house__type{ color:var(--venue) }
.house__soon{ color:var(--venue) }




/* ==========================================================================
   VENUE SITES
   Each house gets a complete site. --venue is set on <body> from the logo.
   ========================================================================== */

.muted{ color:var(--ink-soft) }

/* "we still need this from you" — deliberately quiet, never alarming */
.await{
  margin:18px 0 0; padding:14px 16px; font-size:14px; line-height:1.6;
  color:var(--ink-soft); background:rgba(176,141,80,.10);
  border-left:2px solid var(--gold); border-radius:0 2px 2px 0;
}
.await--mid{ max-width:62ch; margin:28px auto 0; text-align:center;
             border-left:0; border-top:2px solid var(--gold); border-radius:0 }

/* ---- venue header ---- */
.vtop{
  position:sticky; top:0; z-index:50; background:rgba(244,239,227,.95);
  backdrop-filter:saturate(140%) blur(8px); border-bottom:1px solid var(--line);
}
.vtop__in{ display:flex; align-items:center; justify-content:space-between;
           gap:20px; padding-top:14px; padding-bottom:14px }
.vtop__name{
  font-family:var(--display); font-size:21px; letter-spacing:.06em;
  text-decoration:none; color:var(--venue);
}
.vtop .nav__cta{ background:var(--venue) }
.vtop .nav a:hover{ border-bottom-color:var(--venue) }

/* ---- venue hero ---- */
@media (max-width:900px){ .vhero__in{ grid-template-columns:1fr; gap:34px } }
.vh__logo{
  width:min(200px,46vw); height:auto; margin:0 0 26px; border-radius:2px;
  box-shadow:0 14px 38px rgba(20,20,15,.16);
}
.vh__wordmark{
  font-family:var(--display); font-weight:300; color:var(--venue);
  font-size:clamp(32px,5vw,50px); margin:0 0 22px; padding-bottom:16px;
  border-bottom:2px solid var(--venue); display:inline-block;
}
.vhero__kicker{
  font-family:var(--display); font-size:11.5px; letter-spacing:.28em;
  text-transform:uppercase; color:var(--venue); margin:0 0 10px;
}
.vhero__h{ font-family:var(--display); font-weight:300;
           font-size:clamp(34px,5vw,56px); line-height:1.04; margin:0 0 16px }
.vhero__p{ font-size:17.5px; color:var(--ink-soft); max-width:44ch; margin:0 0 18px }
.vhero__soon{
  display:inline-block; font-size:11.5px; letter-spacing:.2em;
  text-transform:uppercase; color:#fff; background:var(--venue);
  padding:7px 14px; border-radius:2px; margin:0;
}

/* ---- menu scaffold ---- */
.mgrid{ display:grid; gap:24px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)) }
.mcard{ background:var(--paper); border:1px solid var(--line); padding:26px 24px 30px }
.mcard h3{
  font-family:var(--display); font-weight:400; font-size:19px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--venue); margin:0 0 8px;
}
.mcard__rule{ height:1px; background:var(--line); margin:0 0 18px }
.mcard__wait{
  margin:0; font-size:13px; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(20,20,15,.34);
}

/* ---- gallery ---- */
.ggrid{ display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)) }
.ggrid .shot{ aspect-ratio:1/1; max-height:none }

/* ---- hours + contact ---- */
.vhours, .vcontact{ list-style:none; margin:0; padding:0 }
.vhours li, .vcontact li{
  display:flex; justify-content:space-between; gap:20px; padding:11px 0;
  border-bottom:1px solid var(--line); font-size:15px;
}
.vhours em, .vcontact em{
  font-style:normal; color:rgba(20,20,15,.36); font-size:13px;
  letter-spacing:.1em; text-transform:uppercase;
}
.vcontact em{ text-transform:none; letter-spacing:0; font-size:14.5px;
              color:var(--ink-soft); text-align:right }

/* ---- booking ---- */
.bookbox{ max-width:760px; margin:0 auto; text-align:center }
.bookbox h2{ font-family:var(--display); font-weight:300;
             font-size:clamp(26px,3.4vw,38px); margin:0 0 14px }
.bookbox p{ color:var(--ink-soft); margin:0 auto 26px; max-width:56ch }
.bookslot{
  border:1px dashed rgba(20,20,15,.22); border-radius:3px; padding:44px 24px;
  background:var(--paper); display:grid; gap:6px; place-items:center;
}
.bookslot span{
  font-family:var(--display); font-size:13px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--venue);
}
.bookslot em{ font-style:normal; font-size:13px; color:rgba(20,20,15,.40) }

/* venue pages: the divider takes the house colour, not Eaton's green */
#menu .deco::before, #menu .deco::after, #menu .deco span{ background:var(--venue) }

/* ==========================================================================
   DECO — interwar continental
   Eaton Place is a Belgravia address and Roy's mark is art deco line work.
   The register is a 1930s grand hotel: symmetry, brass rules, small caps,
   a high-contrast serif. Not a modern café.
   ========================================================================== */
:root{
  --serif:  "Cormorant Garamond", "Didot", Georgia, serif;
  --brass:  #c2a265;
  --brass-dk:#9a7c43;
  --deep:   #16271f;   /* the ground the brass sits on */
  --deep-lo:#1d3328;
}

/* ---- the plate: dark, framed, symmetrical ---- */
.plate{ background:var(--deep); padding:30px 18px 34px }
.plate__in{ position:relative; text-align:center; color:var(--cream) }

.plate__corner{ position:absolute; width:26px; height:26px; pointer-events:none }
.plate__corner::before, .plate__corner::after{
  content:""; position:absolute; background:var(--brass);
}
.plate__corner::before{ width:100%; height:1.5px }
.plate__corner::after{ width:1.5px; height:100% }
.plate__corner--tl{ top:-30px; left:12px }
.plate__corner--tr{ top:-30px; right:12px }
.plate__corner--tr::after{ right:0 }
.plate__corner--bl{ bottom:-34px; left:12px }
.plate__corner--bl::before{ bottom:0 }
.plate__corner--br{ bottom:-34px; right:12px }
.plate__corner--br::before{ bottom:0 }
.plate__corner--br::after{ right:0 }

.plate__est{
  font-family:var(--display); font-size:11px; letter-spacing:.42em;
  text-transform:uppercase; color:var(--brass); margin:0 0 26px;
}
.plate__h{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(42px,7vw,86px); line-height:1.02; letter-spacing:.012em;
  margin:0 0 26px; color:var(--cream);
}
.plate__h em{ font-style:italic; color:var(--brass) }
.plate__p{
  max-width:50ch; margin:0 auto 34px; font-size:16.5px; line-height:1.8;
  color:rgba(244,239,227,.78);
}

/* deco rule with a lozenge, in brass */
.rule{ display:flex; align-items:center; justify-content:center; gap:14px; margin:0 0 28px }
.rule::before, .rule::after{
  content:""; height:1px; width:min(120px,20vw);
  background:linear-gradient(90deg,transparent,var(--brass),transparent);
}
.rule span{
  width:8px; height:8px; background:var(--brass); transform:rotate(45deg);
  box-shadow:0 0 0 3px rgba(194,162,101,.18);
}

.btn--brass{
  background:transparent; color:var(--brass); border:1px solid var(--brass);
  letter-spacing:.22em;
}
.btn--brass:hover{ background:var(--brass); color:var(--deep) }
.btn--quiet{
  background:transparent; color:rgba(244,239,227,.8);
  border:1px solid rgba(244,239,227,.3); letter-spacing:.22em;
}
.btn--quiet:hover{ border-color:var(--cream); color:var(--cream) }

/* ---- the strip beneath the plate ---- */
.strip{ padding:0 0 10px; background:var(--deep) }
.shot--band{ aspect-ratio:21/9; max-height:420px; border-radius:0;
             border:1px solid rgba(194,162,101,.30) }
@media (max-width:760px){ .shot--band{ aspect-ratio:16/10; max-height:300px } }

/* ---- section headings in the same register ---- */
.sec__head h2{ font-family:var(--serif); font-weight:300;
               font-size:clamp(30px,4.4vw,48px); letter-spacing:.01em }
.sec__kicker{ letter-spacing:.34em; color:var(--brass-dk) }
.deco::before, .deco::after{ background:var(--brass) }
.deco span{ background:var(--brass) }

/* ---- houses as a directory: numbered I–V ---- */
.house{ border-top:3px solid var(--venue); background:var(--paper) }
.house__body{ position:relative }
.house__num{
  position:absolute; top:-14px; right:20px;
  font-family:var(--serif); font-size:30px; font-style:italic;
  color:var(--brass); opacity:.85; line-height:1;
}
.house__name{ font-family:var(--serif); font-size:26px; font-weight:400; letter-spacing:.01em }
.house__type{ letter-spacing:.2em; font-size:11.5px }
.house__soon{ letter-spacing:.2em }

/* ---- the split sections pick up the serif too ---- */
.split h2{ font-family:var(--serif); font-weight:300;
           font-size:clamp(26px,3.4vw,40px) }
.lede__h, .vhero__h, .bookbox h2{ font-family:var(--serif); font-weight:300 }

/* ---- deco fixes ---- */
.plate__corner{ position:absolute; width:22px; height:22px }
.plate__corner--tl{ top:16px; left:16px; right:auto; bottom:auto }
.plate__corner--tr{ top:16px; right:16px; left:auto; bottom:auto }
.plate__corner--bl{ bottom:16px; left:16px; top:auto; right:auto }
.plate__corner--br{ bottom:16px; right:16px; top:auto; left:auto }
.plate__corner--tr::after{ right:0; left:auto }
.plate__corner--bl::before{ bottom:0; top:auto }
.plate__corner--br::before{ bottom:0; top:auto }
.plate__corner--br::after{ right:0; left:auto }

/* front-door header: dark, so it reads as part of the plate */
.top{ background:var(--deep); border-bottom:1px solid rgba(194,162,101,.28) }
.top .nav a{ color:var(--cream) }
.top .nav a:hover{ border-bottom-color:var(--brass) }
.top .nav__cta{ background:transparent; color:var(--brass);
                border:1px solid var(--brass) }
.top .nav__cta:hover{ background:var(--brass); color:var(--deep) }
.top .burger{ color:var(--cream) }
@media (max-width:860px){ .nav.is-open{ background:var(--deep) } }

/* the courtyard plate sits in the dark, so it must belong to it */
.strip{ padding:0 18px 34px }
.shot--band{
  background:linear-gradient(135deg,#223a2d 0%, #1b3025 55%, #16271f 100%);
  border:1px solid rgba(194,162,101,.34);
}
.shot--band::before{
  background:radial-gradient(ellipse at 50% 88%, rgba(194,162,101,.16), transparent 64%);
}
.shot--band figcaption{ color:rgba(244,239,227,.68) }
.shot--band figcaption::before{ background:var(--brass) }
.shot--band figcaption span{ color:rgba(244,239,227,.42) }

/* the numeral belongs on the logo plate, as a brass directory mark */
.house{ position:relative }
.house__num{
  position:absolute; top:12px; left:14px; right:auto;
  width:34px; height:34px; display:grid; place-items:center;
  font-family:var(--serif); font-style:italic; font-size:17px; line-height:1;
  color:var(--brass); background:rgba(22,39,31,.72);
  border:1px solid rgba(194,162,101,.55); border-radius:1px;
  opacity:1; z-index:3; padding-right:1px;
}

/* ==========================================================================
   RICH GROUNDS
   A heavily blurred, duotoned photograph behind the type. Blur destroys
   detail, so a small source upscales without penalty — which is how we get
   depth out of the one image we have. Grain on top stops the gradients
   banding and gives the surface something to catch the light on.
   ========================================================================== */
:root{
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
  /* deco fan, brass, very faint */
  --fan:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cg fill='none' stroke='%23c2a265' stroke-width='1' opacity='.16'%3E%3Cpath d='M0 60 A60 60 0 0 1 60 0'/%3E%3Cpath d='M0 60 A40 40 0 0 1 40 20'/%3E%3Cpath d='M0 60 A20 20 0 0 1 20 40'/%3E%3C/g%3E%3C/svg%3E");
}
.plate__in{ z-index:2 }
.plate__h{ text-shadow:0 2px 26px rgba(0,0,0,.45) }

/* ---- venue hero on its own field ---- */

/* ---- the menu band as a tinted field ---- */
.band--field{
  background-size:cover; background-position:center; position:relative;
}
.band--field::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    var(--fan) 0 0/60px 60px,
    linear-gradient(180deg, rgba(251,248,241,.93), rgba(244,239,227,.95));
}
.band--field > *{ position:relative; z-index:2 }
.band--field .mcard{ background:rgba(255,255,255,.78); backdrop-filter:blur(2px) }

/* a whisper of the deco fan under the houses, so cream is never bare */
#houses{ position:relative }
#houses::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:var(--fan) 0 0/60px 60px; opacity:.5;
}
#houses > *{ position:relative; z-index:2 }

/* ---- the courtyard engraving -------------------------------------------
   Line art on white. Inverted and screened, the paper drops out and the
   lines come through cream on the deep green — so one file serves both
   grounds and nothing has to be cut out by hand. */
.engraving{ margin:0; padding:6px 0 22px; text-align:center }
/* Black ink on cream, multiplied: the paper drops out and the line work
   survives. Inverting it onto the dark plate turned the dense hatching into
   solid mass, which read as a block rather than an engraving. */
.engraving img{
  width:100%; height:auto; display:block;
  mix-blend-mode:multiply; opacity:.92;
  filter:sepia(.22) saturate(.85) brightness(1.02);
}
.engraving figcaption{
  margin-top:12px; font-family:var(--display); font-size:11px;
  letter-spacing:.34em; text-transform:uppercase; color:var(--brass-dk);
}

/* ---- fix: the numeral was positioning against .house__body, landing on the
   venue name. It belongs on the logo plate, in the card's own corner. ---- */
.house__body{ position:static }
.house{ position:relative; overflow:hidden }
.house__num{
  position:absolute; top:0; left:0; right:auto; bottom:auto;
  width:42px; height:42px; display:grid; place-items:center;
  font-family:var(--serif); font-style:italic; font-size:16px; line-height:1;
  color:var(--cream); background:rgba(12,20,16,.42);
  border:0; border-right:1px solid rgba(244,239,227,.30);
  border-bottom:1px solid rgba(244,239,227,.30);
  backdrop-filter:blur(3px) saturate(120%); z-index:4; letter-spacing:.04em;
}

/* ==========================================================================
   A RICHER GROUND
   Flat cream reads cheap. A blurred, warm field sits under the section with
   a vignette and the deco fan over it, so the page has depth and glow
   instead of a dead fill.
   ========================================================================== */
#houses{
  position:relative; isolation:isolate;
  background:
    linear-gradient(180deg, rgba(244,239,227,.0), rgba(244,239,227,.0));
}
#houses::after{
  content:""; position:absolute; inset:0; z-index:-2; pointer-events:none;
  background-image:url("img/bg-eaton.jpg");
  background-size:cover; background-position:center;
  opacity:.30; filter:saturate(.72) brightness(1.5);
}
#houses::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    var(--fan) 0 0/68px 68px,
    radial-gradient(ellipse at 50% 10%, rgba(255,252,245,.55), transparent 58%),
    radial-gradient(ellipse at 50% 100%, rgba(120,96,52,.20), transparent 62%),
    linear-gradient(180deg, rgba(246,241,230,.80), rgba(238,230,212,.86));
  opacity:1;
}
#houses .house{
  box-shadow:0 18px 46px rgba(30,24,12,.10), 0 2px 6px rgba(30,24,12,.06);
}
#houses .house:hover{
  box-shadow:0 28px 70px rgba(30,24,12,.18), 0 3px 8px rgba(30,24,12,.08);
}

/* ---- venue pages get the same warm ground, in their own colour ---- */
body[data-house]{ position:relative; background:var(--cream) }
body[data-house]::before{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background-image:var(--field);
  background-size:cover; background-position:center;
  opacity:.26; filter:saturate(.70) brightness(1.55);
}
body[data-house]::after{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    var(--fan) 0 0/68px 68px,
    radial-gradient(ellipse at 50% 0%, rgba(255,252,245,.52), transparent 56%),
    radial-gradient(ellipse at 50% 100%, rgba(120,96,52,.18), transparent 60%),
    linear-gradient(180deg, rgba(246,241,230,.80), rgba(238,230,212,.86));
}
body[data-house] .band:not(.band--field){ background:rgba(251,248,241,.72) }
body[data-house] .mcard{ box-shadow:0 14px 36px rgba(30,24,12,.08) }
body[data-house] .shot{ box-shadow:0 14px 36px rgba(30,24,12,.08) }

/* ---- correction: one warm ground on every page -------------------------
   Duotoning the body field to each venue turned Habibi's page lavender-grey
   and Rum and Cigar's pewter. Cold, not rich. The warm Eaton field carries
   every page; the house colour lives in the hero and the accents, where it
   belongs. */
body[data-house]::before{
  background-image:url("img/bg-eaton.jpg");
  opacity:.28; filter:saturate(.62) brightness(1.62);
}
body[data-house]::after{
  background:
    var(--fan) 0 0/68px 68px,
    radial-gradient(ellipse at 50% 0%, rgba(255,251,242,.50), transparent 56%),
    radial-gradient(ellipse at 50% 100%, rgba(122,96,48,.22), transparent 60%),
    linear-gradient(180deg, rgba(247,242,231,.80), rgba(238,229,210,.88));
}

/* ---- the venue hero becomes the house's own plate ---- */
.vh__logo{ box-shadow:0 22px 56px rgba(0,0,0,.45) }
.vh__wordmark{ color:var(--cream); border-bottom-color:rgba(244,239,227,.45) }
.vhero__kicker{ color:var(--brass) }
.vhero__h{ color:var(--cream); text-shadow:0 2px 24px rgba(0,0,0,.42) }
.vhero__p{ color:rgba(244,239,227,.82) }
.vhero__soon{
  background:transparent; color:var(--brass);
  border:1px solid var(--brass); letter-spacing:.2em;
}
/* the venue header sits on the plate, like the front door's */
.vtop{ background:var(--deep); border-bottom:1px solid rgba(194,162,101,.28) }
.vtop__name{ color:var(--cream) }
.vtop .nav a{ color:var(--cream) }
.vtop .nav__cta{ background:transparent; color:var(--brass); border:1px solid var(--brass) }
.vtop .nav__cta:hover{ background:var(--brass); color:var(--deep) }
.vtop .burger{ color:var(--cream) }


/* ==========================================================================
   THE FRONT DOOR GOES DARK
   Foliage under the whole page, fixed, with a deep scrim over it. The cream
   cards and the mounted engraving then read as objects lit against it,
   which is where the luxury comes from — contrast, not more decoration.
   ========================================================================== */
body:has(.plate){ background:var(--deep); color:var(--cream) }
body:has(.plate)::before{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:url("img/eaton-bg.jpg") center/cover no-repeat fixed;
}
body:has(.plate)::after{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    var(--grain) 0 0/160px 160px,
    radial-gradient(ellipse at 50% 0%, rgba(22,39,31,.52), rgba(10,18,14,.88) 70%),
    linear-gradient(180deg, rgba(10,18,14,.72), rgba(8,14,11,.90));
}
body:has(.plate) section{ background:transparent; position:relative }
body:has(.plate) .band{
  background:rgba(10,18,14,.34);
  border-top:1px solid rgba(194,162,101,.18);
  border-bottom:1px solid rgba(194,162,101,.18);
}

/* typography flips to cream on the dark ground */
body:has(.plate) .sec__head h2,
body:has(.plate) .split h2{ color:var(--cream) }
body:has(.plate) .sec__head p,
body:has(.plate) .split p{ color:rgba(244,239,227,.74) }
body:has(.plate) .sec__kicker{ color:var(--brass) }
body:has(.plate) .btn--line{ color:var(--cream); border-color:rgba(244,239,227,.35) }
body:has(.plate) .btn--line:hover{ background:rgba(244,239,227,.10) }
body:has(.plate) .btn{ background:transparent; color:var(--brass); border:1px solid var(--brass) }
body:has(.plate) .btn:hover{ background:var(--brass); color:var(--deep) }

/* the houses section: the page ground does the work now */
body:has(.plate) #houses::before,
body:has(.plate) #houses::after{ display:none }
body:has(.plate) #houses .house{
  box-shadow:0 26px 60px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.30);
}

/* the engraving gets mounted like a framed print, so it stays ink on paper */
body:has(.plate) .engraving{
  background:linear-gradient(180deg,#f7f2e6,#efe7d4);
  padding:26px 26px 18px; border:1px solid rgba(194,162,101,.45);
  box-shadow:0 30px 70px rgba(0,0,0,.45);
}
body:has(.plate) .engraving figcaption{ color:var(--brass-dk) }

/* the courtyard slot on the dark ground */
body:has(.plate) .shot--wide, body:has(.plate) .shot--tall{
  background:linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.02) 60%, rgba(0,0,0,.16));
  border:1px solid rgba(194,162,101,.30);
}
body:has(.plate) .shot figcaption{ color:rgba(244,239,227,.70) }
body:has(.plate) .shot figcaption span{ color:rgba(244,239,227,.42) }

/* the ground was buried under its own scrim — let the fronds read */
body:has(.plate)::after{
  background:
    var(--grain) 0 0/160px 160px,
    radial-gradient(ellipse at 50% 12%, rgba(16,30,23,.18), rgba(8,16,12,.62) 72%),
    linear-gradient(180deg, rgba(8,16,12,.34), rgba(6,12,9,.58));
}
body:has(.plate)::before{ filter:saturate(1.05) contrast(1.04) }
/* the plate sits ON the foliage, so it needs its own weight to read */
body:has(.plate) .plate{ background:rgba(8,16,12,.42) }

/* ---- less gold on the plate ----
   The headline, the kicker, the frame, the corners, the rule and both
   buttons were all brass. Keep it as an accent: the lozenge and a hairline.
   Everything else returns to cream. */
.plate__h em{ color:rgba(244,239,227,.88); font-style:italic }
.plate__est{ color:rgba(244,239,227,.56); letter-spacing:.38em }
.plate__corner::before, .plate__corner::after{ background:rgba(194,162,101,.55) }
.rule::before, .rule::after{
  background:linear-gradient(90deg,transparent,rgba(244,239,227,.38),transparent);
}
.rule span{ background:var(--brass); box-shadow:none; width:6px; height:6px }
body:has(.plate) .plate__in .btn{
  color:rgba(244,239,227,.88); border-color:rgba(244,239,227,.34); background:transparent;
}
body:has(.plate) .plate__in .btn:hover{
  background:rgba(244,239,227,.10); color:var(--cream); border-color:rgba(244,239,227,.6);
}

/* the booking box kept its cream panel while the type went cream */
body:has(.plate) .book{
  background:rgba(10,18,14,.46); border:1px solid rgba(194,162,101,.30);
  backdrop-filter:blur(3px);
}
body:has(.plate) .book h3{ color:var(--cream); font-family:var(--serif); font-weight:400 }
body:has(.plate) .book p{ color:rgba(244,239,227,.76) }
body:has(.plate) .foot{ background:rgba(6,12,9,.72); backdrop-filter:blur(3px) }

/* let the foliage read through the plate instead of hiding it behind
   a second field */
body:has(.plate) .plate{ background:transparent; padding:34px 18px 38px }

/* the cards are cream panels on a dark page — their text must stay ink,
   or the page-wide cream colour makes the venue names invisible */
body:has(.plate) .house{ color:var(--ink) }
body:has(.plate) .house .house__name{ color:var(--ink) }
body:has(.plate) .house .house__blurb{ color:var(--ink-soft) }
body:has(.plate) .house .house__type,
body:has(.plate) .house .house__soon{ color:var(--venue) }
body:has(.plate) .house .house__more{ color:var(--ink) }
/* the mounted engraving is a cream plate too */
body:has(.plate) .engraving, body:has(.plate) .engraving *{ color:var(--ink) }
body:has(.plate) .engraving figcaption{ color:var(--brass-dk) }

/* a house with no logo yet gets a monogram, not its name repeated */
.house__logo--mono{
  display:grid; place-items:center; aspect-ratio:1/1;
  background:
    var(--fan) 0 0/44px 44px,
    linear-gradient(145deg, color-mix(in srgb, var(--venue) 22%, #f3ecdc),
                            color-mix(in srgb, var(--venue) 40%, #e3d7bd));
}
.house__logo--mono span{
  font-family:var(--serif); font-size:52px; letter-spacing:.06em;
  color:var(--venue); opacity:.9;
  border:1px solid color-mix(in srgb, var(--venue) 45%, transparent);
  width:104px; height:104px; display:grid; place-items:center;
}

/* let the leaves be the point: scrim only where type needs it */
body:has(.plate)::before{ filter:saturate(1.12) contrast(1.08) brightness(1.06) }
body:has(.plate)::after{
  background:
    var(--grain) 0 0/160px 160px,
    radial-gradient(ellipse at 50% 8%, rgba(10,20,15,.10), rgba(6,14,10,.34) 76%),
    linear-gradient(180deg, rgba(6,14,10,.14), rgba(5,11,8,.32));
}
body:has(.plate) .band{ background:rgba(6,14,10,.26) }

/* ---- the foliage, as supplied ----
   No grain, no filter, no wash. The photograph carries the page; the only
   darkening left is a soft pool behind the plate so the lettering holds. */
body:has(.plate)::before{ filter:none }
body:has(.plate)::after{
  background:
    radial-gradient(ellipse at 50% 26%, rgba(6,14,10,.30), transparent 62%),
    linear-gradient(180deg, rgba(6,14,10,.10), rgba(5,11,8,.20));
}
body:has(.plate) .band{ background:rgba(6,14,10,.22) }   /* grain off the plate too */

/* the courtyard slot becomes glass, so the leaves read through it */
body:has(.plate) .shot--band, body:has(.plate) .shot--wide, body:has(.plate) .shot--tall{
  background:rgba(6,14,10,.26);
  border:1px solid rgba(244,239,227,.22);
  backdrop-filter:blur(2px) saturate(105%);
}
body:has(.plate) .shot::before{ display:none }
.plate__corner::before, .plate__corner::after{ background:rgba(244,239,227,.42) }
.rule span{ background:rgba(244,239,227,.68) }


.vhero__in{ position:relative; z-index:2 }


/* ==========================================================================
   VENUE HERO — one image, one scrim. Nothing else.
   ========================================================================== */
.vhero{
  position:relative;
  padding:84px 0 92px;
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center;
}
.vhero::before{
  content:"";
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg, rgba(12,14,16,.74), rgba(12,14,16,.34) 55%, rgba(12,14,16,.10));
}
@media (max-width:900px){
  .vhero::before{ background:linear-gradient(180deg, rgba(12,14,16,.46), rgba(12,14,16,.66)) }
}
.vhero__in{ position:relative; z-index:2 }

body[data-house="habibi"]           .vhero{ background-image:url("img/habibi-bg.jpg") }
body[data-house="brasserie-rodier"] .vhero{ background-image:url("img/bg-brasserie-rodier.jpg") }
body[data-house="amore-mio"]        .vhero{ background-image:url("img/bg-amore-mio.jpg") }
body[data-house="rum-and-cigar"]    .vhero{ background-image:url("img/bg-rum-and-cigar.jpg") }
body[data-house="quiche-more"]     .vhero{ background-image:url("img/bg-quiche-more.jpg") }

/* a slot sitting on a photograph must be glass, not a cream slab */
.vhero .shot{
  background:rgba(12,14,16,.26);
  border:1px solid rgba(244,239,227,.26);
  backdrop-filter:blur(3px) saturate(108%);
}
.vhero .shot::before{ display:none }
.vhero .shot figcaption{ color:rgba(244,239,227,.80) }
.vhero .shot figcaption::before{ background:rgba(244,239,227,.55) }
.vhero .shot figcaption span{ color:rgba(244,239,227,.52) }



/* ==========================================================================
   VENUE PAGE GROUND
   A venue with data-ground gets its own photograph fixed behind the whole
   page; content scrolls over it and every panel turns to glass. Adding a
   new one is a single rule at the bottom of this block.
   ========================================================================== */
body[data-ground]{ background:#0e0c0a; color:var(--cream) }
body[data-ground]::before{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background-position:center; background-size:cover;
  background-repeat:no-repeat; background-attachment:fixed;
  opacity:1; filter:none;
}
body[data-ground]::after{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(180deg, rgba(14,12,10,.46), rgba(10,9,8,.62));
}
body[data-ground] .vhero{ background-image:none; padding:84px 0 92px }
body[data-ground] .vhero::before{ background:none }
body[data-ground] section{ background:transparent }
body[data-ground] .band{ background:rgba(10,9,8,.32) }

body[data-ground] .mcard,
body[data-ground] .book,
body[data-ground] .bookslot,
body[data-ground] .shot{
  background:rgba(12,10,9,.42);
  border:1px solid rgba(244,239,227,.20);
  backdrop-filter:blur(3px);
}
body[data-ground] .shot::before{ display:none }
body[data-ground] .sec__head h2,
body[data-ground] .split h2,
body[data-ground] .bookbox h2,
body[data-ground] .mcard h3,
body[data-ground] .vhero__h{ color:var(--cream) }
body[data-ground] .sec__head p,
body[data-ground] .split p,
body[data-ground] .bookbox p,
body[data-ground] .vhero__p,
body[data-ground] .muted{ color:rgba(244,239,227,.78) }
body[data-ground] .vhours li,
body[data-ground] .vcontact li{ border-bottom-color:rgba(244,239,227,.18) }
body[data-ground] .vhours em,
body[data-ground] .vcontact em{ color:rgba(244,239,227,.56) }
body[data-ground] .await{ background:rgba(194,162,101,.14); color:rgba(244,239,227,.80) }
body[data-ground] .mcard__wait{ color:rgba(244,239,227,.46) }
body[data-ground] .foot{ background:rgba(8,7,6,.78) }
body[data-ground] .shot figcaption{ color:rgba(244,239,227,.78) }
body[data-ground] .shot figcaption span{ color:rgba(244,239,227,.50) }
body[data-ground] .shot figcaption::before{ background:rgba(244,239,227,.55) }

/* --- the photographs themselves --- */
body[data-house="habibi"]::before          { background-image:url("img/habibi-bg.jpg") }
body[data-house="brasserie-rodier"]::before{ background-image:url("img/brasserie-rodier-bg.jpg") }
body[data-house="amore-mio"]::before{ background-image:url("img/amore-mio-bg.jpg") }
body[data-house="rum-and-cigar"]::before{ background-image:url("img/rum-and-cigar-bg.jpg") }
body[data-house="quiche-more"]::before{ background-image:url("img/quiche-more-bg.jpg") }

/* ---- the vineyard is a bright photograph, unlike the foliage it replaced.
   Cream type needs real weight behind it, heaviest at the top where the sky
   is brightest, easing off over the vines so the colour still carries. ---- */
body:has(.plate)::after{
  background:
    linear-gradient(180deg, rgba(10,20,14,.78) 0%, rgba(10,20,14,.66) 28%,
                            rgba(12,20,14,.70) 62%, rgba(10,16,12,.80) 100%);
}
body:has(.plate)::before{ filter:saturate(1.04) }

/* gold comes back on the trim only — the lettering stays cream */
.plate__corner::before, .plate__corner::after{ background:var(--brass) }
.plate__est{ color:var(--brass) }
.rule::before, .rule::after{
  background:linear-gradient(90deg,transparent,var(--brass),transparent);
}
.rule span{ background:var(--brass); width:7px; height:7px }
body:has(.plate) .plate__in .btn{
  color:var(--brass); border-color:rgba(194,162,101,.70); background:transparent;
}
body:has(.plate) .plate__in .btn:hover{
  background:var(--brass); color:#11271c; border-color:var(--brass);
}


/* ==========================================================================
   THE PLAQUE — one rule, no :has(), fully opaque
   Written last and without a :has() dependency, because an older
   semi-transparent rule underneath was letting the vineyard bleed through
   as an olive wash whenever this one did not win.
   ========================================================================== */
.plate__frame{
  position:relative;
  padding:74px 0 78px;
  /* #597d46 is the logo green, sampled from eaton-mark.png — 22,698 px of
     it. The field holds that exact value through the middle and only
     deepens slightly at the foot so the paragraph keeps its contrast. */
  background-color:var(--green);
  background-image:
    radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.07), transparent 62%),
    linear-gradient(180deg, #5d8249 0%, #597d46 42%, #4a6a3a 100%);
  border:1px solid rgba(194,162,101,.60);
  box-shadow:0 30px 80px rgba(0,0,0,.45);
}
.plate__frame::before{
  content:""; position:absolute; inset:7px; pointer-events:none;
  border:1px solid rgba(194,162,101,.32);
}

/* a sub-line under a list heading, for venues whose sections need explaining */
.mcard__sub{
  margin:0 0 14px; font-size:13.5px; line-height:1.55;
  color:rgba(20,20,15,.52);
}
body[data-ground] .mcard__sub{ color:rgba(244,239,227,.62) }

/* ==========================================================================
   THE PLAQUE — logo green, cream trim
   Gold measured 1.95:1 against #597d46, which is illegible. The logo's own
   cream is 4.12:1 on the field and 5.36:1 at the foot, and it is the second
   colour in the mark, so the plaque now uses only what the logo uses.
   ========================================================================== */
.plate__frame{ border:1px solid rgba(244,239,227,.58) }
.plate__frame::before{ border-color:rgba(244,239,227,.26) }
.plate__corner::before, .plate__corner::after{ background:var(--cream) }
.plate__est{ color:rgba(244,239,227,.82) }
.plate__h, .plate__h em{ color:var(--cream) }
.plate__p{ color:rgba(244,239,227,.88) }
.rule::before, .rule::after{
  background:linear-gradient(90deg,transparent,rgba(244,239,227,.72),transparent);
}
.rule span{ background:var(--cream); width:7px; height:7px; box-shadow:none }
body:has(.plate) .plate__in .btn,
.plate__in .btn{
  background:transparent; color:var(--cream);
  border:1px solid rgba(244,239,227,.62); letter-spacing:.22em;
}
body:has(.plate) .plate__in .btn:hover,
.plate__in .btn:hover{ background:var(--cream); color:var(--green); border-color:var(--cream) }


/* Gerald's own valley photograph: 4:3, with the mountains low in the frame,
   so the crop is anchored below centre to keep them rather than sky. */
body:has(.plate)::before{ background-position:center 62% }

/* ── Hours / Contact band on the venue pages ──────────────────────────
   body[data-house] .band:not(.band--field) (the pale-cream rule) outranks
   body[data-ground] .band, so these panels were rendering cream-on-cream.
   Same specificity, later in the file, so this wins: darken the panel and
   leave the type alone, which is what it was drawn for.                */
body[data-ground] .band:not(.band--field){ background:rgba(10,9,8,.66) }

/* The kicker colour is inlined as var(--venue) by the builder, so only
   !important reaches it. A venue colour that works on cream (Rum's near
   black, for one) disappears on a dark panel — lift it toward the cream
   so it still reads as the house's colour. */
body[data-ground] .sec__kicker{
  color:color-mix(in srgb, var(--venue) 38%, #f4efe3) !important;
}

/* Front door: the same band sits over the valley photograph, whose sky is
   bright enough to swallow cream type. */
body:has(.plate) .band{ background:rgba(6,14,10,.46) }

/* .split centres its columns, which left CONTACT floating half a panel
   below HOURS and reading as a mistake. These two are a pair of lists:
   align them at the top so the kickers sit on one line. */
#hours .split{ align-items:start }

/* ═══ The five houses, as a list ═══════════════════════════════════════
   Five items in a three-across grid always orphans the second row. A list
   takes five as naturally as it takes four or six, and gives each house a
   full line of its own — which reads as a register of the courtyard rather
   than a shelf of products. Scoped to #houses so the two neighbours below
   stay as a pair of cards, which is what a pair wants to be. */

#houses .houses{ display:block }

body:has(.plate) #houses .house{
  display:grid;
  grid-template-columns:34px 92px minmax(0,1fr) auto;
  align-items:center;
  column-gap:30px;
  padding:24px 18px 24px 4px;
  background:none;
  border:0;
  border-bottom:1px solid rgba(244,239,227,.15);
  border-radius:0;
  box-shadow:none;
  overflow:visible;
  transform:none;
  transition:background .25s ease, padding-left .25s ease;
}
body:has(.plate) #houses .house:first-child{
  border-top:1px solid rgba(244,239,227,.15);
}
body:has(.plate) #houses .house:hover{
  transform:none;
  box-shadow:none;
  background:rgba(244,239,227,.055);
  padding-left:14px;
}

/* The numeral was absolutely positioned for the card. In a row it is simply
   the first column. */
body:has(.plate) #houses .house__num{
  position:static; inset:auto;
  width:auto; height:auto; padding:0; background:none; border:0;
  font-family:var(--serif); font-size:15px; font-weight:400;
  letter-spacing:.06em; text-align:right;
  color:rgba(244,239,227,.42);
}

body:has(.plate) #houses .house__logo{
  width:92px; height:92px; aspect-ratio:1/1; object-fit:cover;
  border-radius:2px; box-shadow:0 6px 20px rgba(0,0,0,.35);
}
body:has(.plate) #houses .house__logo--mono{
  display:grid; place-items:center; background:rgba(244,239,227,.08);
  border:1px solid rgba(244,239,227,.22);
}
body:has(.plate) #houses .house__logo--mono span{
  color:rgba(244,239,227,.62);
}

body:has(.plate) #houses .house__body{
  position:static; padding:0; display:block;
}
body:has(.plate) #houses .house__name{
  color:var(--cream); font-size:27px; margin:0 0 3px;
}
body:has(.plate) #houses .house__type{
  color:color-mix(in srgb, var(--venue) 38%, #f4efe3);
  margin:0 0 8px;
}
body:has(.plate) #houses .house__blurb{
  color:rgba(244,239,227,.70); max-width:52ch; margin:0;
}

/* Status sits in its own column, right-aligned, so the eye can run straight
   down it and see at a glance which houses are open. */
body:has(.plate) #houses .house__soon,
body:has(.plate) #houses .house__more{
  color:rgba(244,239,227,.58);
  font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  white-space:nowrap; margin:0; align-self:center;
}
body:has(.plate) #houses .house:hover .house__soon,
body:has(.plate) #houses .house:hover .house__more{ color:var(--cream) }

@media (max-width:760px){
  body:has(.plate) #houses .house{
    grid-template-columns:62px minmax(0,1fr);
    column-gap:18px; row-gap:10px;
    padding:20px 4px;
  }
  body:has(.plate) #houses .house__num{ display:none }
  body:has(.plate) #houses .house__logo{ width:62px; height:62px }
  body:has(.plate) #houses .house__name{ font-size:22px }
  body:has(.plate) #houses .house__soon,
  body:has(.plate) #houses .house__more{ grid-column:2; text-align:left }
}

/* Tighten: the full wrap width left a hole between the blurb and the status,
   and the numerals were nearly invisible against the sky. */
#houses .houses{ max-width:980px; margin-inline:auto }
body:has(.plate) #houses .house__num{ color:rgba(244,239,227,.55) }

/* ═══ The neighbours, turned down ═════════════════════════════════════
   These two are not Roy's. Rendered as solid cream cards they were the
   brightest thing on the page and pulled the eye away from the five that
   matter. Same list language as the houses, at a lower volume: no card,
   no fill, quieter type, and a heading that reads as a footnote. */

#neighbours{ padding-top:10px }
#neighbours .sec__head h2{ font-size:clamp(21px,2.2vw,27px) }
#neighbours .houses{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  max-width:760px; margin-inline:auto; gap:0;
}
@media (max-width:620px){
  #neighbours .houses{ grid-template-columns:1fr }
}

body:has(.plate) #neighbours .house{
  display:block;
  background:none; border:0; border-radius:0; box-shadow:none;
  padding:16px 22px; transform:none;
  border-top:1px solid rgba(244,239,227,.14);
  transition:background .25s ease;
}
body:has(.plate) #neighbours .house:hover{
  transform:none; box-shadow:none; background:rgba(244,239,227,.05);
}
body:has(.plate) #neighbours .house__body{ padding:0 }
body:has(.plate) #neighbours .house__name{
  color:rgba(244,239,227,.86); font-size:19px; margin:0 0 2px;
}
body:has(.plate) #neighbours .house__type{
  color:rgba(244,239,227,.46); margin:0 0 7px;
  font-size:10.5px; letter-spacing:.18em;
}
body:has(.plate) #neighbours .house__more{
  color:rgba(244,239,227,.46);
  font-size:10.5px; letter-spacing:.18em; text-transform:uppercase;
}
body:has(.plate) #neighbours .house:hover .house__more{
  color:rgba(244,239,227,.82);
}

/* ═══ A real menu ══════════════════════════════════════════════════════
   Two columns of courses on a wide screen, one on a phone. Each dish is a
   name, a leader of dots, and a price — the oldest and still the clearest
   way to set a menu, because the eye can run down either edge. */

.mlist{
  columns:2; column-gap:64px; max-width:1000px; margin:0 auto;
}
@media (max-width:820px){ .mlist{ columns:1 } }

.mcourse{
  break-inside:avoid-column;
  display:inline-block; width:100%;
  margin:0 0 42px;
}
.mcourse h3{
  font-family:var(--serif); font-weight:300;
  font-size:23px; letter-spacing:.01em; margin:0 0 10px;
}
.mcourse .mcard__rule{ margin:0 0 14px }
.mcourse__sub{
  font-size:13.5px; line-height:1.6; margin:0 0 16px; max-width:46ch;
}

.mdishes{ list-style:none; margin:0; padding:0 }
.mdish{ margin:0 0 15px }
.mdish__top{
  display:flex; align-items:baseline; gap:8px; margin:0;
  font-size:15.5px;
}
.mdish__n{ font-weight:400 }
.mdish__dots{
  flex:1; height:1px; align-self:flex-end; margin-bottom:5px;
  border-bottom:1px dotted currentColor; opacity:.3;
}
.mdish__p{ white-space:nowrap; font-variant-numeric:tabular-nums; font-size:14.5px }
.mdish__d{
  margin:3px 0 0; font-size:13px; line-height:1.55; max-width:44ch;
}

/* On the dark venue pages */
body[data-ground] .mcourse h3{ color:var(--cream) }
body[data-ground] .mcourse__sub{ color:rgba(244,239,227,.62) }
body[data-ground] .mdish__n{ color:rgba(244,239,227,.93) }
body[data-ground] .mdish__p{
  color:color-mix(in srgb, var(--venue) 34%, #f4efe3);
}
body[data-ground] .mdish__d{ color:rgba(244,239,227,.58) }

/* inline-block sat the course on a text baseline, leaving a line's worth of
   air under every section. break-inside works on block boxes in every browser
   we care about. */
.mcourse{ display:block; vertical-align:top }

/* ═══ Backgrounds on a phone ═══════════════════════════════════════════
   background-attachment:fixed is the bug. iOS Safari does not honour it:
   instead of sizing the image to the screen it sizes it to the whole
   document, so `cover` crops against a box several times taller than the
   phone and the picture arrives hugely magnified. The portrait images were
   chosen precisely because a phone is portrait, and none of that was
   reaching the phone.

   The layer is already position:fixed; inset:0 — a viewport-sized box — so
   `scroll` (the default) makes `cover` resolve against the screen itself,
   which is what we wanted all along. On a 9:19.5 phone the tall crop now
   survives; on a wide desktop it still fills. */
body:has(.plate)::before,
body[data-house]::before,
body[data-ground]::before{
  background-attachment:scroll;
  background-position:center center;
}

/* Tall screens: bias the valley crop upward so the ridge and the cloud stay
   in frame rather than scrolling off the top of a portrait crop. */
@media (max-aspect-ratio:3/4){
  body:has(.plate)::before{ background-position:center 38% }
}

/* The neighbours' own marks, set as cream chips at a common height. Their
   name is in the artwork, so the text name would only repeat it. */
.nb__mark{
  display:block; height:26px; width:auto; max-width:100%;
  border-radius:2px; margin:0 0 9px;
  opacity:.88; transition:opacity .25s ease;
}
.house:hover .nb__mark{ opacity:1 }

/* .house__body is a flex column, so the chip was being stretched to the
   column width and squashed out of its own proportions. */
.nb__mark{ align-self:flex-start; height:30px; margin:0 0 11px }