/* Elements Restaurant | concept site stylesheet
   Palette, type and rhythm per _build/DESIGN SYSTEM.md sections 1 and 2. */

/* ---------- Metric-matched fallbacks ----------
   Both web fonts load with display=swap, so every page renders once in the
   fallback and once in the real face. Georgia is 14% wider than Fraunces and
   Segoe UI is 8% narrower than Inter, so the swap re-flowed every block below
   the fold: measured CLS 0.0284 on the menus page at 390px, over the 0.02
   budget in section 6, and the single largest shift on every other page too.

   These faces carry no download. They point at a font already on the machine
   and restate its metrics as the web font's, so the pre-swap render occupies
   the same space as the post-swap one. Measured, not copied: the numbers come
   from canvas fontBoundingBox against the real faces, at 100px.
     size-adjust     = webfont advance / fallback advance
     ascent-override = webfont ascent / size-adjust   (likewise descent)
   Where the local font is absent the face has no usable source and the stack
   simply falls through to the next family, which is the old behavior. */
@font-face{
  font-family:"Fraunces Fallback";font-style:normal;font-weight:400;
  src:local("Georgia");
  size-adjust:88.1%;ascent-override:111.2%;descent-override:29.5%;line-gap-override:0%;
}
@font-face{
  font-family:"Fraunces Fallback";font-style:normal;font-weight:500 700;
  src:local("Georgia Bold"),local("Georgia-Bold"),local("Georgia");
  size-adjust:79.9%;ascent-override:122.7%;descent-override:32.5%;line-gap-override:0%;
}
@font-face{
  font-family:"Inter Fallback";font-style:normal;font-weight:400;
  src:local("Segoe UI"),local("SegoeUI"),local("Helvetica Neue"),local("Arial");
  size-adjust:108.7%;ascent-override:89.2%;descent-override:22.1%;line-gap-override:0%;
}
@font-face{
  font-family:"Inter Fallback";font-style:normal;font-weight:500 600;
  src:local("Segoe UI Semibold"),local("SegoeUI-Semibold"),local("Helvetica Neue Medium"),local("Arial Bold");
  size-adjust:107.8%;ascent-override:90.0%;descent-override:22.3%;line-gap-override:0%;
}

:root{
  --el-char:#17140F;
  --el-pine:#22301F;
  --el-ember:#B0512A;
  --el-ember-deep:#8E3F1F;
  --el-river:#46697A;
  --el-river-deep:#37525F;
  --el-brass:#A2814F;      /* hairlines and the element glyphs only, never text */
  --el-brass-ink:#7A5D33;  /* the same brass, taken dark enough to be TEXT on bone or oat */
  --el-brass-lite:#C6A570; /* and light enough to be text on pine or char */
  --el-oat:#EAE1D3;
  --el-bone:#FAF6F0;
  --el-stone:#6A6154;      /* one step down from #6E6558 so it clears 4.5:1 on oat too */

  --measure:68ch;
  --page:1280px;
  --wide:1600px;
  --gut:clamp(20px,4vw,64px);
  --s1:4px; --s2:8px; --s3:12px; --s4:20px; --s5:32px;
  --s6:52px; --s7:84px; --s8:136px;

  --rule:1px solid rgba(162,129,79,.42);
  --rule-soft:1px solid rgba(23,20,15,.10);
  --ease:180ms cubic-bezier(.2,.7,.3,1);
  --shadow:0 1px 2px rgba(23,20,15,.05),0 12px 30px -18px rgba(23,20,15,.35);

  --serif:"Fraunces","Fraunces Fallback",Georgia,"Times New Roman",serif;
  --sans:"Inter","Inter Fallback",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--el-bone);
  color:var(--el-char);
  font-family:var(--sans);
  font-size:1.0625rem;
  line-height:1.65;
  font-synthesis-weight:none;
}
img,picture,svg{max-width:100%;}
img{height:auto;display:block;}

/* ---------- Type ---------- */
h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:600;
  font-variation-settings:"SOFT" 20,"WONK" 1;
  margin:0;
  color:var(--el-char);
}
h1{font-size:clamp(2.1rem,4.4vw,3.4rem);line-height:1.05;letter-spacing:-.015em;}
h2{font-size:clamp(1.5rem,2.6vw,2.2rem);line-height:1.15;letter-spacing:-.01em;}
h3{font-size:1.18rem;line-height:1.3;}
h4{font-size:1.02rem;line-height:1.35;font-weight:600;}
p{margin:0 0 var(--s4);}
.display{
  font-family:var(--serif);
  font-weight:400;
  font-variation-settings:"SOFT" 20,"WONK" 1;
  font-size:clamp(2.6rem,6.2vw,5.2rem);
  line-height:.95;
  letter-spacing:-.02em;
  margin:0;
}
.micro{
  font-family:var(--sans);
  font-size:.75rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--el-brass-ink);
  margin:0 0 var(--s3);
}
.band.pine .micro,.site-foot .micro{color:var(--el-brass-lite);}
.small{font-size:.875rem;}
.lead{font-size:clamp(1.06rem,1.5vw,1.28rem);line-height:1.55;max-width:56ch;}
.muted{color:var(--el-stone);}
.prose{max-width:var(--measure);}
.prose p:last-child{margin-bottom:0;}

a{color:var(--el-river-deep);text-underline-offset:.18em;text-decoration-thickness:1px;}
a:hover{color:var(--el-ember-deep);}
:focus-visible{
  outline:3px solid var(--el-ember);
  outline-offset:3px;
  border-radius:2px;
}

/* ---------- Layout ---------- */
.wrap{max-width:var(--page);margin-inline:auto;padding-inline:var(--gut);}
.wrap-wide{max-width:var(--wide);margin-inline:auto;padding-inline:var(--gut);}
section.band{padding-block:clamp(64px,9vw,140px);}
section.band.tight{padding-block:clamp(44px,6vw,88px);}
.band.oat{background:var(--el-oat);}
.band.pine{background:var(--el-pine);color:var(--el-bone);}
.band.pine h2,.band.pine h3,.band.pine .display{color:var(--el-bone);}
.band.pine a:not(.btn){color:#DCC9A8;}
.band.pine .muted{color:#C6BCAA;}
.rule{border:0;border-top:var(--rule);margin:var(--s6) 0;}

/* ---------- Skip link ---------- */
.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--el-char);color:var(--el-bone);
  padding:12px 18px;font-weight:600;
}
.skip:focus{left:0;}

/* ---------- Concept banner ---------- */
.concept{
  background:var(--el-char);
  color:#EFE7DA;
  font-size:.8125rem;
  line-height:1.55;
  border-bottom:3px solid var(--el-ember);
}
.concept-in{
  max-width:var(--wide);margin-inline:auto;padding:12px var(--gut);
  display:flex;gap:var(--s4);align-items:flex-start;justify-content:space-between;
}
.concept strong{
  font-weight:600;letter-spacing:.1em;text-transform:uppercase;font-size:.75rem;
  color:#E7C79E;margin-right:.5ch;
}
.concept p{margin:0;max-width:96ch;}
.concept button{
  flex:none;background:transparent;border:1px solid rgba(239,231,218,.45);
  color:#EFE7DA;font:inherit;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;
  padding:6px 12px;cursor:pointer;transition:background var(--ease),border-color var(--ease);
}
.concept button:hover{background:rgba(239,231,218,.14);border-color:#EFE7DA;}

/* ---------- Header ---------- */
.site-head{
  position:sticky;top:0;z-index:90;
  background:rgba(250,246,240,.94);
  backdrop-filter:saturate(140%) blur(8px);
  border-bottom:var(--rule);
}
.head-in{
  max-width:var(--wide);margin-inline:auto;padding:14px var(--gut);
  display:flex;align-items:center;gap:var(--s4);
}
.wordmark{
  font-family:var(--serif);font-weight:600;
  font-variation-settings:"SOFT" 20,"WONK" 1;
  font-size:1.4rem;letter-spacing:.02em;line-height:1;
  color:var(--el-char);text-decoration:none;display:flex;align-items:center;gap:10px;
}
.wordmark:hover{color:var(--el-ember-deep);}
.wordmark .mk{color:var(--el-brass);flex:none;}
.wordmark small{
  display:block;font-family:var(--sans);font-size:.6rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--el-stone);font-weight:600;margin-top:3px;
}
.head-spacer{flex:1;}
.mainnav ul{display:flex;gap:var(--s5);list-style:none;margin:0;padding:0;}
.mainnav a{
  font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;
  color:var(--el-char);text-decoration:none;padding:6px 0;display:inline-block;
  border-bottom:2px solid transparent;transition:color var(--ease),border-color var(--ease);
}
.mainnav a:hover{color:var(--el-ember-deep);border-bottom-color:var(--el-brass);}
.mainnav a[aria-current="page"]{color:var(--el-ember-deep);border-bottom-color:var(--el-ember);}
.head-cta{display:flex;align-items:center;gap:var(--s4);}
.navtoggle{display:none;}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--sans);font-size:.82rem;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;text-decoration:none;cursor:pointer;
  padding:13px 22px;border:1px solid transparent;
  transition:background var(--ease),color var(--ease),border-color var(--ease),transform var(--ease);
}
.btn-fire{background:var(--el-ember);color:#FFF7EF;}
.btn-fire:hover{background:var(--el-ember-deep);color:#FFF7EF;}
.btn-line{background:transparent;color:var(--el-char);border-color:var(--el-brass);}
.btn-line:hover{background:var(--el-oat);color:var(--el-char);border-color:var(--el-char);}
.btn-ghost{background:transparent;color:var(--el-bone);border-color:rgba(250,246,240,.6);}
.btn-ghost:hover{background:rgba(250,246,240,.14);color:var(--el-bone);border-color:var(--el-bone);}
.link-plain{
  font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;
  color:var(--el-river-deep);text-decoration:none;border-bottom:1px solid rgba(70,105,122,.4);
  padding-bottom:2px;
}
.link-plain:hover{color:var(--el-ember-deep);border-bottom-color:var(--el-ember);}

/* ---------- Element glyphs ---------- */
.mk{color:var(--el-brass);}
.glyph{display:block;color:var(--el-brass);}
.marked > .glyph-in{
  display:inline-block;width:.74em;height:.74em;margin-right:.44em;
  color:var(--el-brass);vertical-align:baseline;
}
.divider{
  display:flex;align-items:center;gap:var(--s4);
  color:var(--el-brass);margin:var(--s6) 0 var(--s5);
}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:rgba(162,129,79,.28);}
.divider .glyph{flex:none;}

/* ---------- Hero ---------- */
.hero{position:relative;background:var(--el-char);isolation:isolate;}
.hero picture,.hero img{width:100%;height:clamp(440px,74vh,760px);object-fit:cover;}
.hero::after{
  content:"";position:absolute;inset:0;
  /* Four stops, not three. The old middle stop bottomed out at .30 exactly
     where the copy block starts, and the eyebrow measured 3.52:1 over the lit
     part of the hero photograph at 1440px, under the 4.5:1 the design system
     calls non-negotiable. The scrim now opens up EARLIER (.30 by 22% instead
     of 42%, so more of the picture reads at the top) and closes down through
     the band the copy actually occupies. Measured from rendered pixels, not
     from the declared background-color, because a photograph has neither. */
  background:linear-gradient(180deg,
    rgba(23,20,15,.62) 0%,
    rgba(23,20,15,.30) 22%,
    rgba(23,20,15,.46) 46%,
    rgba(23,20,15,.86) 100%);
  z-index:1;
}
.hero-copy{
  position:absolute;inset:0;z-index:2;display:flex;align-items:flex-end;
  max-width:var(--wide);margin-inline:auto;padding:0 var(--gut) clamp(40px,7vw,88px);
}
.hero-copy .inner{max-width:44ch;color:var(--el-bone);}
.hero-copy .display,.hero-copy h1{color:var(--el-bone);}
.hero-copy .micro{color:#F3E2C8;}   /* brass taken light enough to clear 4.5:1 over a photograph */
.hero-copy p{color:#EFE7DA;}
.hero-cta{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s5);}
h1.hero-title{font-size:clamp(2.6rem,6.2vw,5.2rem);line-height:.95;letter-spacing:-.02em;font-weight:400;}

/* ---------- Figures ---------- */
figure{margin:0;}
.figc{
  font-size:.8125rem;line-height:1.5;color:var(--el-stone);
  margin-top:var(--s3);padding-left:var(--s3);border-left:2px solid rgba(162,129,79,.5);
}
.band.pine .figc{color:#C6BCAA;}
.gen-tag{
  display:inline-block;font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;
  font-weight:600;color:var(--el-brass-ink);border:1px solid rgba(162,129,79,.55);
  padding:2px 7px;margin-right:8px;vertical-align:2px;
}
.frame{position:relative;overflow:hidden;background:var(--el-oat);}
.frame img{width:100%;}
.frame .gen-tag{
  position:absolute;left:12px;bottom:12px;margin:0;
  background:rgba(23,20,15,.72);color:#E7C79E;border-color:rgba(231,199,158,.5);
}

/* ---------- Grids ---------- */
.grid{display:grid;gap:var(--s5);}
.g4{grid-template-columns:repeat(4,1fr);}
.g3{grid-template-columns:repeat(3,1fr);}
.g2{grid-template-columns:repeat(2,1fr);}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:center;}
.split-wide{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);}
.split.start{align-items:start;}

.el-card{
  background:var(--el-bone);border:var(--rule-soft);border-top:2px solid var(--el-brass);
  padding:var(--s5);display:flex;flex-direction:column;gap:var(--s3);
}
.band.oat .el-card{background:var(--el-bone);}
.el-card h3{margin-bottom:0;}
.el-card p{margin:0;font-size:.95rem;line-height:1.6;color:var(--el-stone);}
.el-card .glyph{margin-bottom:var(--s2);}

/* ---------- Fact list ---------- */
.facts{list-style:none;margin:0;padding:0;border-top:var(--rule);}
.facts li{
  display:flex;justify-content:space-between;gap:var(--s4);
  padding:12px 0;border-bottom:var(--rule-soft);font-size:.95rem;
}
.facts .k{color:var(--el-stone);letter-spacing:.04em;}
.facts .v{font-weight:600;text-align:right;font-variant-numeric:tabular-nums;}
.band.pine .facts .k{color:#C6BCAA;}
.band.pine .facts li{border-bottom-color:rgba(250,246,240,.16);}
.band.pine .facts{border-top-color:rgba(162,129,79,.5);}

/* ---------- Stat row ---------- */
.stats{display:flex;flex-wrap:wrap;gap:var(--s6);margin:var(--s5) 0 0;padding:0;list-style:none;}
.stats li{min-width:8ch;}
.stats .n{
  font-family:var(--serif);font-weight:400;font-variation-settings:"SOFT" 20,"WONK" 1;
  font-size:clamp(2rem,3.4vw,2.9rem);line-height:1;display:block;
  font-variant-numeric:tabular-nums;color:var(--el-ember);
}
.stats .t{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--el-stone);display:block;margin-top:8px;}

/* ---------- Menus ---------- */
.menu-tools{
  position:sticky;top:var(--head-h,64px);z-index:60;
  background:rgba(250,246,240,.97);
  backdrop-filter:saturate(140%) blur(8px);
  border-bottom:var(--rule);
}
.mtabs{display:flex;gap:0;list-style:none;margin:0;padding:0;overflow-x:auto;scrollbar-width:thin;}
.mtabs li{flex:none;}
.mtab{
  background:transparent;border:0;border-bottom:3px solid transparent;
  font-family:var(--sans);font-size:.8rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--el-stone);
  padding:16px 18px;cursor:pointer;white-space:nowrap;
  transition:color var(--ease),border-color var(--ease);
}
.mtab:hover{color:var(--el-char);}
.mtab[aria-selected="true"]{color:var(--el-char);border-bottom-color:var(--el-ember);}
.mtab .ct{
  display:inline-block;margin-left:8px;font-size:.7rem;letter-spacing:.06em;
  color:var(--el-brass-ink);font-variant-numeric:tabular-nums;
}
.filterbar{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--s4);
  padding:12px 0;border-top:var(--rule-soft);
}
.field-inline{display:flex;align-items:center;gap:10px;}
.field-inline label{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--el-stone);}
.field-inline input[type=search]{
  font:inherit;font-size:.95rem;padding:9px 12px;min-width:min(46vw,280px);
  border:1px solid rgba(23,20,15,.22);background:#FFF;color:var(--el-char);
}
.switch{display:flex;align-items:center;gap:9px;font-size:.85rem;color:var(--el-char);cursor:pointer;}
.switch input{width:17px;height:17px;accent-color:var(--el-ember);cursor:pointer;}
.filter-count{font-size:.8rem;color:var(--el-stone);font-variant-numeric:tabular-nums;margin-left:auto;}
.btn-mini{
  background:transparent;border:1px solid rgba(162,129,79,.6);color:var(--el-char);
  font:inherit;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;
  padding:8px 12px;cursor:pointer;transition:background var(--ease);
}
.btn-mini:hover{background:var(--el-oat);}

.jump{overflow-x:auto;border-top:var(--rule-soft);padding:10px 0;scrollbar-width:thin;}
.jump ul{display:flex;gap:var(--s4);list-style:none;margin:0;padding:0;}
.jump li{flex:none;}
.jump a{
  font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;
  color:var(--el-stone);text-decoration:none;white-space:nowrap;
  border-bottom:1px solid transparent;padding-bottom:3px;
}
.jump a:hover,.jump a.on{color:var(--el-ember-deep);border-bottom-color:var(--el-ember);}

.menu-panel{padding-block:var(--s6) var(--s7);}
.menu-head{max-width:var(--measure);margin-bottom:var(--s6);}
.menu-head h2{margin-bottom:var(--s3);}
.msection{margin-bottom:0;scroll-margin-top:calc(var(--head-h,64px) + 116px);}
.msection:last-of-type{margin-bottom:var(--s6);}
.msection-note{
  font-size:.875rem;color:var(--el-stone);max-width:var(--measure);
  margin:var(--s2) 0 var(--s5);font-style:italic;
}
.mgroup-title{
  font-family:var(--serif);font-size:1.5rem;font-weight:600;
  font-variation-settings:"SOFT" 20,"WONK" 1;
  margin:0 0 var(--s4);
}
.items{list-style:none;margin:0;padding:0;}
.dish{
  display:grid;grid-template-columns:minmax(0,1fr) 9.5ch;
  gap:var(--s4);align-items:baseline;
  padding:14px 0;border-bottom:var(--rule-soft);
}
.dish:first-child{border-top:var(--rule);}
.dish[hidden]{display:none;}
.dish.bare{padding:9px 0;}          /* a spirits pour has no description to carry */
.dish.bare .nm{margin-bottom:0;}
.dish .nm{
  font-family:var(--sans);font-weight:600;font-size:1rem;letter-spacing:.01em;
  margin:0 0 4px;color:var(--el-char);
}
.dish .ds{margin:0;font-size:.9rem;line-height:1.55;color:var(--el-stone);}
.dish .add{
  margin:6px 0 0;font-size:.8rem;line-height:1.5;color:var(--el-river-deep);
}
.dish .pnote{margin:6px 0 0;font-size:.78rem;color:var(--el-brass-ink);letter-spacing:.02em;}
.dish .pr{
  text-align:right;font-variant-numeric:tabular-nums;font-weight:600;
  font-size:1rem;color:var(--el-char);white-space:nowrap;
}
.dish .pr.long{
  font-size:.8rem;font-weight:500;white-space:normal;color:var(--el-stone);line-height:1.45;
}
.empty-note{padding:var(--s5) 0;color:var(--el-stone);font-size:.95rem;}

.aside-box{
  border:var(--rule);border-left:3px solid var(--el-river);
  background:#FFF;padding:var(--s5);margin:var(--s5) 0 0;
}
.aside-box p{max-width:74ch;}
.aside-box h3{margin-bottom:var(--s3);}
.aside-box p{margin-bottom:var(--s3);font-size:.95rem;}
.aside-box p:last-child{margin-bottom:0;}
.disclaimer{
  font-size:.8125rem;line-height:1.6;color:var(--el-stone);
  border-top:var(--rule);padding-top:var(--s4);max-width:var(--measure);
}

/* ---------- Form ---------- */
.form-card{
  background:#FFF;border:var(--rule-soft);border-top:2px solid var(--el-ember);
  padding:clamp(24px,4vw,44px);box-shadow:var(--shadow);
}
.fgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4) var(--s5);}
.field{display:flex;flex-direction:column;gap:7px;}
.field.wide{grid-column:1 / -1;}
.field label{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--el-stone);}
.field .req{color:var(--el-ember);}
.field input,.field select,.field textarea{
  font:inherit;font-size:1rem;padding:12px 13px;
  border:1px solid rgba(23,20,15,.24);background:#FFF;color:var(--el-char);
  border-radius:0;width:100%;
}
.field textarea{min-height:110px;resize:vertical;}
.field .hint{font-size:.8rem;color:var(--el-stone);}
.field .err{font-size:.82rem;color:#8E3F1F;font-weight:600;min-height:0;}
.field .err:empty{display:none;}
.field.bad input,.field.bad select,.field.bad textarea{border-color:#8E3F1F;background:#FDF4F0;}
.form-note{
  font-size:.85rem;color:var(--el-stone);border-left:2px solid var(--el-brass);
  padding-left:var(--s3);margin:var(--s5) 0 0;
}
.form-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s4);margin-top:var(--s5);}
.live-note{
  font-size:.85rem;color:var(--el-river-deep);background:var(--el-oat);
  padding:10px 14px;border-left:3px solid var(--el-river);margin-top:var(--s4);
}
.live-note:empty{display:none;}
.success{
  border:var(--rule);border-left:3px solid var(--el-ember);
  background:#FFF;padding:clamp(24px,4vw,40px);
}
.success h3{margin-bottom:var(--s4);}
.echo{list-style:none;margin:0 0 var(--s5);padding:0;border-top:var(--rule-soft);}
.echo li{display:flex;justify-content:space-between;gap:var(--s4);padding:10px 0;border-bottom:var(--rule-soft);font-size:.95rem;}
.echo .k{color:var(--el-stone);}
.echo .v{font-weight:600;text-align:right;}

/* ---------- Footer ---------- */
.site-foot{background:var(--el-char);color:#D9D0C2;padding-block:var(--s7) var(--s5);}
.site-foot h2,.site-foot h3{color:var(--el-bone);}
.site-foot a{color:#E0CDAE;}
.site-foot .muted{color:#B7AE9E;}
.site-foot a:hover{color:#F3E3CB;}
.foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1.1fr;gap:var(--s6);}
.foot-grid h3{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;font-family:var(--sans);font-weight:600;color:var(--el-brass-lite);margin-bottom:var(--s3);}
.foot-grid ul{list-style:none;margin:0;padding:0;}
.foot-grid li{margin-bottom:9px;font-size:.92rem;}
.foot-grid p{font-size:.92rem;margin-bottom:var(--s3);}
.foot-bottom{
  margin-top:var(--s6);padding-top:var(--s4);
  border-top:1px solid rgba(217,208,194,.22);
  display:flex;flex-wrap:wrap;gap:var(--s4);justify-content:space-between;
  font-size:.78rem;color:#A79E90;
}
.foot-mark{display:flex;align-items:center;gap:10px;margin-bottom:var(--s4);}
.foot-mark .display{font-size:1.7rem;color:var(--el-bone);}

/* ---------- Reveal ---------- */
@media (prefers-reduced-motion:no-preference){
  .rv{opacity:0;transform:translateY(14px);transition:opacity 520ms cubic-bezier(.2,.7,.3,1),transform 520ms cubic-bezier(.2,.7,.3,1);}
  .rv.in{opacity:1;transform:none;}
}

/* ---------- Responsive ---------- */
@media (max-width:1080px){
  .g4{grid-template-columns:repeat(2,1fr);}
  .foot-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:900px){
  .g3{grid-template-columns:repeat(2,1fr);}
  .split,.split-wide{grid-template-columns:minmax(0,1fr);}
  .mainnav{
    display:none;position:absolute;left:0;right:0;top:100%;
    background:var(--el-bone);border-bottom:var(--rule);padding:var(--s4) var(--gut) var(--s5);
  }
  .mainnav.open{display:block;}
  .mainnav ul{flex-direction:column;gap:var(--s3);}
  .mainnav a{font-size:.95rem;letter-spacing:.06em;}
  .navtoggle{
    display:inline-flex;align-items:center;gap:8px;
    background:transparent;border:1px solid var(--el-brass);color:var(--el-char);
    font:inherit;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;
    padding:9px 12px;cursor:pointer;
  }
  .head-in{position:relative;gap:var(--s3);}
  .head-cta{gap:var(--s3);}
  .head-cta .btn{padding:11px 15px;font-size:.72rem;}
  .head-cta .link-plain{display:none;}
}
@media (max-width:560px){
  .navtoggle{padding:9px 10px;}
  .navtoggle .tlabel{
    position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
    clip-path:inset(50%);white-space:nowrap;border:0;
  }
  .wordmark{font-size:1.2rem;gap:8px;}
}
@media (max-width:720px){
  .g4,.g3,.g2{grid-template-columns:minmax(0,1fr);}
  .fgrid{grid-template-columns:minmax(0,1fr);}
  .concept-in{flex-direction:column;gap:var(--s3);}
  .site-head{position:static;}
  .menu-tools{top:0;}
  .mtab{padding:14px 14px;font-size:.74rem;}
  .dish{grid-template-columns:minmax(0,1fr) 8ch;gap:var(--s4);}
  .stats{gap:var(--s5);}
  .foot-grid{grid-template-columns:minmax(0,1fr);gap:var(--s5);}
  .hero picture,.hero img{height:clamp(400px,66vh,560px);}
}
@media (max-width:420px){
  .facts li{flex-direction:column;gap:2px;}
  .facts .v{text-align:left;}
}

@media print{
  .site-head,.concept,.menu-tools,.site-foot,.hero{display:none;}
  body{background:#FFF;}
}

/* Every generated image carries its own label, the hero included. Design system
   section 5: label them individually, never rely on the banner alone. Sits
   bottom-right so it never competes with the wordmark or the buttons. */
.hero{position:relative;}
.hero .gen-tag.hero-gen{
  position:absolute;right:14px;bottom:14px;left:auto;margin:0;z-index:3;
  background:rgba(23,20,15,.72);color:#E7C79E;border-color:rgba(231,199,158,.5);
}
@media (max-width:600px){ .hero .gen-tag.hero-gen{right:10px;bottom:10px;font-size:.625rem;} }

/* The patio band is a generated image, so it carries a visible label too. The
   wrapper is display:block so it does not change the band's layout. */
.frame-band{display:block;position:relative;overflow:hidden;}
.frame-band img{display:block;width:100%;}