/* =========================================================================
   UMAMI · Japanese Fire-Grilled Burgers · stylesheet
   Palette: Café Vert #1B4D3E · Crème #F5EFE3 · Gold Ink #9A7B2D
            Ember #E25822 · Charcoal #2B2B2B
   ========================================================================= */

:root{
  --vert:#1B4D3E; --vert-d:#123528; --vert-l:#2C6650;
  --creme:#F5EFE3; --creme-2:#FBF8F1; --creme-3:#ECE3D2;
  --gold:#9A7B2D; --gold-l:#B89A4F;
  --ember:#E25822; --ember-d:#C8461A;
  --char:#2B2B2B; --char-soft:#4A4A45;
  --line:rgba(154,123,45,.30);
  --line-soft:rgba(43,43,43,.10);

  --shadow:0 18px 50px -22px rgba(18,53,40,.40);
  --shadow-sm:0 8px 24px -14px rgba(18,53,40,.35);

  --maxw:1180px;
  --gutter:clamp(20px,5vw,64px);
  --r:14px;

  --serif:"Spectral",Georgia,"Times New Roman",serif;
  --sans:"Hanken Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

/* ---------- reset / base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0; background:var(--creme); color:var(--char);
  font-family:var(--sans); font-size:clamp(16px,1.05vw,17.5px);
  line-height:1.65; font-weight:400; letter-spacing:.005em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
ul{margin:0;padding:0;list-style:none}
button{font:inherit;cursor:pointer}
:focus-visible{outline:2.5px solid var(--ember);outline-offset:3px;border-radius:4px}
::selection{background:var(--ember);color:var(--creme)}

/* ---------- type ---------- */
h1,h2,h3,h4{
  font-family:var(--serif); font-weight:600; color:var(--vert);
  line-height:1.06; letter-spacing:-.012em; margin:0;
  font-variation-settings:"opsz" 144,"SOFT" 40,"WONK" 0;
}
h1{font-size:clamp(2.7rem,7vw,5.4rem)}
h2{font-size:clamp(2rem,4.6vw,3.4rem)}
h3{font-size:clamp(1.3rem,2.4vw,1.75rem)}
.serif-it{font-family:var(--serif);font-style:italic;font-weight:500}
p{margin:0 0 1.1em}
strong{font-weight:600;color:var(--vert)}

.eyebrow{
  font-family:var(--sans); font-size:.74rem; font-weight:600;
  letter-spacing:.26em; text-transform:uppercase; color:var(--gold);
  display:inline-flex; align-items:center; gap:.7em; margin:0 0 1.1rem;
}
.eyebrow::before{content:"";width:26px;height:1.5px;background:var(--gold);opacity:.7}
.lede{font-size:clamp(1.08rem,1.7vw,1.32rem);line-height:1.6;color:var(--char-soft);max-width:60ch}
/* ---------- layout ---------- */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:clamp(72px,11vw,140px);position:relative}
.section--tight{padding-block:clamp(48px,7vw,84px)}
.section--vert{background:var(--vert);color:var(--creme)}
.section--vert h1,.section--vert h2,.section--vert h3{color:var(--creme)}
.section--vert .lede{color:rgba(245,239,227,.78)}
.section--vert .eyebrow{color:var(--gold-l)}
.section--vert .eyebrow::before{background:var(--gold-l)}
.section--creme2{background:var(--creme-2)}
.center{text-align:center}
.center .eyebrow{justify-content:center}
.center .lede{margin-inline:auto}

/* ---------- squiggle (signature motif) ---------- */
.squiggle{display:block;color:var(--ember)}
.squiggle path{
  fill:none;stroke:currentColor;stroke-width:4;stroke-linecap:round;
}
.js .squiggle path{stroke-dasharray:240;stroke-dashoffset:240}
.squiggle.draw path{animation:draw 1.1s cubic-bezier(.6,0,.2,1) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.divider{display:flex;justify-content:center;padding-block:clamp(8px,3vw,28px)}
.divider .squiggle{width:150px}

/* ---------- buttons ---------- */
.btn{
  --bg:var(--ember);--fg:var(--creme);
  display:inline-flex;align-items:center;gap:.55em;
  background:var(--bg);color:var(--fg);
  padding:.92em 1.6em;border-radius:999px;border:1.5px solid transparent;
  font-weight:600;font-size:.96rem;letter-spacing:.01em;
  transition:transform .25s cubic-bezier(.34,1.56,.64,1),box-shadow .25s,background .2s;
  box-shadow:0 10px 24px -12px rgba(226,88,34,.7);
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px);background:var(--ember-d)}
.btn:active{transform:translateY(0)}
.btn .arr{transition:transform .25s}
.btn:hover .arr{transform:translateX(3px)}
.btn--ghost{
  --bg:transparent;--fg:var(--vert);
  border-color:var(--line);box-shadow:none;
}
.btn--ghost:hover{background:var(--vert);color:var(--creme);border-color:var(--vert)}
.section--vert .btn--ghost,.cta-band .btn--ghost{--fg:var(--creme);border-color:rgba(245,239,227,.35)}
.section--vert .btn--ghost:hover,.cta-band .btn--ghost:hover{background:var(--creme);color:var(--vert)}
.btn--gold{--bg:var(--gold);box-shadow:0 10px 24px -14px rgba(154,123,45,.7)}
.btn--gold:hover{--bg:#86692364;background:var(--gold);filter:brightness(.94)}
.btn-row{display:flex;flex-wrap:wrap;gap:.85rem;align-items:center}

/* ---------- header / nav ---------- */
.site-header{
  position:sticky;top:0;z-index:60;
  background:rgba(245,239,227,.86);backdrop-filter:blur(12px) saturate(1.2);
  border-bottom:1px solid transparent;transition:border-color .3s,box-shadow .3s,background .3s;
}
.site-header.scrolled{border-color:var(--line);box-shadow:0 6px 24px -18px rgba(18,53,40,.5)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:1.2rem;height:72px}
.brand{display:flex;align-items:center;flex-shrink:0}
.brand img{height:42px;width:auto}
.nav-links{display:flex;align-items:center;gap:clamp(1rem,2.4vw,2.2rem)}
.nav-links a{
  font-weight:500;font-size:.95rem;color:var(--vert);position:relative;padding:.3em 0;
  letter-spacing:.01em;
}
.nav-links a::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;
  background:var(--ember);transform:scaleX(0);transform-origin:left;
  transition:transform .28s cubic-bezier(.6,0,.2,1);
}
.nav-links a:hover::after,.nav-links a[aria-current="page"]::after{transform:scaleX(1)}
.nav-links a[aria-current="page"]{color:var(--ember)}
.nav-cta{display:flex;align-items:center;gap:.6rem}
.nav-toggle{display:none;background:none;border:none;padding:8px;color:var(--vert)}
.nav-toggle svg{display:block}

@media (max-width:860px){
  .nav-cta .btn--ghost{display:none}
  .nav-toggle{display:inline-flex}
  .nav{position:static}
  .nav-links{
    position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;
    gap:0;background:var(--creme);
    border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line);
    padding:.25rem var(--gutter) .9rem;
    box-shadow:0 26px 44px -26px rgba(18,53,40,.55);
    transform:translateY(-10px) scaleY(.98);transform-origin:top;
    opacity:0;visibility:hidden;pointer-events:none;
    transition:transform .3s cubic-bezier(.5,0,.2,1),opacity .24s ease,visibility .24s;
  }
  .nav[data-open="true"] .nav-links{
    transform:translateY(0) scaleY(1);opacity:1;visibility:visible;pointer-events:auto;
  }
  .nav-links li{width:100%}
  .nav-links a{
    display:flex;align-items:center;justify-content:space-between;
    width:100%;padding:1rem .15rem;font-size:1.06rem;font-weight:500;color:var(--vert);
    border-bottom:1px solid var(--line-soft);
  }
  .nav-links li:last-child a{border-bottom:none}
  .nav-links a::after{
    content:"\2192";position:static;display:inline;height:auto;width:auto;background:none;
    color:var(--ember);opacity:0;transform:translateX(-6px);
    transition:opacity .2s ease,transform .2s ease;
  }
  .nav-links a[aria-current="page"]{color:var(--ember)}
  .nav-links a[aria-current="page"]::after,.nav-links a:active::after{opacity:1;transform:translateX(0)}
}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;background:var(--creme)}
.hero::before{ /* warm ember glow */
  content:"";position:absolute;width:min(70vw,720px);aspect-ratio:1;
  right:-12%;top:-18%;border-radius:50%;
  background:radial-gradient(circle,rgba(226,88,34,.14),transparent 62%);
  pointer-events:none;
}
.hero-grid{
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,4vw,4rem);
  align-items:center;padding-block:clamp(48px,8vw,96px);position:relative;z-index:1;
}
.hero-kicker{display:flex;align-items:center;gap:.8rem;margin-bottom:1.5rem}
.hero-kicker .squiggle{width:54px}
.hero-kicker span{
  font-size:.78rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);
}
.hero h1{margin-bottom:1.2rem}
.hero h1 .fire{color:var(--ember);font-style:italic}
.hero .lede{margin-bottom:2rem}
.hero-meta{
  display:flex;flex-wrap:wrap;gap:1.6rem;margin-top:2.4rem;padding-top:1.8rem;
  border-top:1px solid var(--line);
}
.hero-meta .stat{display:flex;flex-direction:column;gap:.15rem}
.hero-meta .num{font-family:var(--serif);font-size:1.6rem;font-weight:600;color:var(--vert);line-height:1}
.hero-meta .lbl{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.hero-art{position:relative}
.hero-art .frame{
  border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);
  border:1px solid var(--line);background:var(--creme-2);
}
.hero-art .tag{
  position:absolute;left:-14px;bottom:24px;background:var(--vert);color:var(--creme);
  font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;
  padding:.7em 1.1em;border-radius:8px;box-shadow:var(--shadow-sm);
}
.hero-art .tag b{color:var(--ember)}
@media (max-width:820px){
  .hero-grid{grid-template-columns:1fr;gap:2.2rem}
  .hero-art{order:-1;max-width:520px}
  .hero-meta{gap:1.2rem}
}

/* ---------- marquee (rotating campaign lines) ---------- */
.marquee{
  background:var(--vert-d);color:var(--creme);overflow:hidden;
  border-block:1px solid rgba(154,123,45,.25);
}
.marquee-track{
  display:flex;gap:3.2rem;align-items:center;width:max-content;
  padding-block:.95rem;animation:slide 34s linear infinite;
}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track span{
  font-family:var(--serif);font-style:italic;font-size:1.18rem;color:var(--creme);
  white-space:nowrap;display:inline-flex;align-items:center;gap:3.2rem;opacity:.92;
}
.marquee-track span::after{content:"◦";color:var(--ember);font-style:normal}
@keyframes slide{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marquee-track{animation:none;flex-wrap:wrap;justify-content:center}}

/* ---------- co-heroes (the two leads) ---------- */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.4rem,3vw,2.4rem)}
.lead{
  background:var(--creme-2);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;
  transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s;
}
.lead:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.lead .pic{aspect-ratio:4/3;overflow:hidden;background:var(--creme-3)}
.lead .pic img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.lead:hover .pic img{transform:scale(1.04)}
.lead .body{padding:clamp(1.4rem,2.5vw,2rem)}
.lead .body .eyebrow{margin-bottom:.7rem}
.lead .body p{margin-bottom:1.2rem;color:var(--char-soft)}
.lead .price{font-family:var(--serif);color:var(--ember);font-weight:600;font-size:1.15rem}
@media (max-width:740px){.duo{grid-template-columns:1fr}}

/* ---------- craft / process (a real sequence → numbered) ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,2.4vw,2rem);counter-reset:step}
.step{position:relative;padding-top:2.6rem}
.step::before{
  counter-increment:step;content:"0" counter(step);
  position:absolute;top:0;left:0;font-family:var(--serif);font-size:1.5rem;
  font-weight:600;color:var(--ember);
}
.step::after{content:"";position:absolute;top:.7rem;left:2.6rem;right:-1rem;height:1px;background:var(--line)}
.step:last-child::after{display:none}
.step h3{font-size:1.2rem;margin-bottom:.5rem}
.step p{font-size:.96rem;color:rgba(245,239,227,.74);margin:0}
.section--vert .step h3{color:var(--creme)}
@media (max-width:760px){.steps{grid-template-columns:1fr 1fr;gap:1.6rem}.step::after{display:none}}
@media (max-width:430px){.steps{grid-template-columns:1fr}}

/* ---------- signature grid (dish cards) ---------- */
.grid-dishes{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.1rem,2.4vw,1.8rem)}
.dish{
  background:var(--creme-2);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s;
}
.dish:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.dish .pic{aspect-ratio:4/3;background:var(--creme-3);overflow:hidden}
.dish .pic img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.dish:hover .pic img{transform:scale(1.05)}
.dish .body{padding:1.15rem 1.25rem 1.35rem}
.dish .top{display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.dish h3{font-size:1.18rem}
.dish .price{font-family:var(--serif);font-weight:600;color:var(--ember);font-size:1.05rem;white-space:nowrap}
.dish p{font-size:.92rem;color:var(--char-soft);margin:.5rem 0 0}
@media (max-width:820px){.grid-dishes{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.grid-dishes{grid-template-columns:1fr}}

/* ---------- dip wall (Big Bro / Lil Bro) ---------- */
.bros{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.2rem,3vw,2rem);max-width:840px;margin-inline:auto}
.bro{
  border-radius:var(--r);padding:clamp(1.5rem,3vw,2.2rem);border:1px solid var(--line);
  background:var(--creme-2);position:relative;overflow:hidden;
}
.bro.big{background:var(--vert);color:var(--creme);border-color:var(--vert)}
.bro.big h3{color:var(--creme)}
.bro .role{font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:.5rem;display:block}
.bro.big .role{color:var(--gold-l)}
.bro h3{font-size:1.5rem;margin-bottom:.5rem}
.bro p{margin:0;font-size:.98rem}
.bro.big p{color:rgba(245,239,227,.8)}
.bro.lil p{color:var(--char-soft)}
@media (max-width:560px){.bros{grid-template-columns:1fr}}

/* ---------- menu page ---------- */
.menu-hero{background:var(--vert);color:var(--creme);text-align:center}
.menu-nav{
  position:sticky;top:72px;z-index:40;background:rgba(245,239,227,.92);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line);
}
.menu-nav .wrap{display:flex;gap:.4rem;overflow-x:auto;padding-block:.7rem;scrollbar-width:none}
.menu-nav .wrap::-webkit-scrollbar{display:none}
.menu-nav a{
  flex-shrink:0;font-size:.85rem;font-weight:500;color:var(--vert);
  padding:.45em .95em;border-radius:999px;border:1px solid transparent;transition:.2s;letter-spacing:.01em;
}
.menu-nav a:hover{background:var(--creme-3);border-color:var(--line)}
.menu-cat{margin-bottom:clamp(2.4rem,5vw,3.6rem)}
.menu-cat-head{display:flex;align-items:center;gap:1rem;margin-bottom:1.6rem}
.menu-cat-head h2{font-size:clamp(1.6rem,3vw,2.2rem);white-space:nowrap}
.menu-cat-head .rule{flex:1;height:1px;background:var(--line)}
.menu-cat-head .note{font-size:.8rem;color:var(--gold);font-style:italic;font-family:var(--serif)}
.menu-list{display:grid;grid-template-columns:1fr 1fr;gap:.2rem 3rem}
@media (max-width:760px){.menu-list{grid-template-columns:1fr}}
.m-item{padding:1.05rem 0;border-bottom:1px solid var(--line-soft)}
.m-item-top{display:flex;align-items:baseline;gap:.6rem}
.m-name{font-family:var(--serif);font-size:1.18rem;font-weight:560;color:var(--vert);display:flex;align-items:center;gap:.55rem}
.m-dot{width:13px;height:13px;border:1.5px solid;border-radius:3px;flex-shrink:0;position:relative;display:inline-block}
.m-dot::after{content:"";position:absolute;inset:2.5px;border-radius:50%}
.m-dot.veg{border-color:#3a7d2c}.m-dot.veg::after{background:#3a7d2c}
.m-dot.non{border-color:#9c2a1f}.m-dot.non::after{background:#9c2a1f}
.m-lead{flex:1;border-bottom:1px dotted var(--line);transform:translateY(-4px);min-width:18px}
.m-price{font-family:var(--serif);font-weight:600;color:var(--ember);font-size:1.05rem;white-space:nowrap}
.m-sig{font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);background:rgba(154,123,45,.12);padding:.2em .55em;border-radius:5px;font-weight:600}
.m-desc{font-size:.92rem;color:var(--char-soft);margin:.35rem 0 0;max-width:54ch}
.m-meta{font-size:.78rem;color:var(--gold);margin-top:.25rem;font-style:italic;font-family:var(--serif)}
.legend{display:flex;gap:1.4rem;flex-wrap:wrap;font-size:.85rem;color:var(--char-soft);align-items:center}
.legend .item{display:flex;align-items:center;gap:.45rem}

/* ---------- gallery ---------- */
.masonry{columns:3 260px;column-gap:clamp(.9rem,2vw,1.4rem)}
.masonry figure{
  break-inside:avoid;margin:0 0 clamp(.9rem,2vw,1.4rem);border-radius:var(--r);overflow:hidden;
  border:1px solid var(--line);box-shadow:var(--shadow-sm);position:relative;background:var(--creme-2);
}
.masonry img{width:100%;transition:transform .6s ease}
.masonry figure:hover img{transform:scale(1.05)}
.masonry figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:1.4rem 1rem .9rem;
  background:linear-gradient(transparent,rgba(18,53,40,.82));
  color:var(--creme);font-family:var(--serif);font-style:italic;font-size:1rem;
  opacity:0;transform:translateY(8px);transition:.35s;
}
.masonry figure:hover figcaption{opacity:1;transform:translateY(0)}

/* ---------- visit / contact ---------- */
.visit-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,4vw,3.5rem);align-items:start}
@media (max-width:840px){.visit-grid{grid-template-columns:1fr}}
.info-block{margin-bottom:1.8rem}
.info-block h3{font-size:1.15rem;margin-bottom:.4rem}
.info-block p{margin:0;color:var(--char-soft)}
.info-block a{color:var(--ember);font-weight:500}
.hours-tbl{width:100%;border-collapse:collapse;margin-top:.4rem}
.hours-tbl td{padding:.45rem 0;border-bottom:1px solid var(--line-soft);font-size:.96rem}
.hours-tbl td:last-child{text-align:right;color:var(--vert);font-weight:500}
.order-cards{display:grid;gap:.8rem}
.order-card{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.1rem 1.3rem;border:1px solid var(--line);border-radius:var(--r);
  background:var(--creme-2);transition:.28s;
}
.order-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm);border-color:var(--gold)}
.order-card .l{display:flex;flex-direction:column}
.order-card .l b{font-family:var(--serif);font-size:1.12rem;color:var(--vert)}
.order-card .l small{color:var(--char-soft);font-size:.84rem}
.order-card .arr{color:var(--ember);font-size:1.3rem;transition:transform .25s}
.order-card:hover .arr{transform:translateX(4px)}
.map-frame{border-radius:var(--r);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-sm);aspect-ratio:16/10;background:var(--creme-3)}
.map-frame iframe{width:100%;height:100%;border:0;display:block;filter:saturate(.92)}

/* ---------- CTA band ---------- */
.cta-band{background:var(--vert);color:var(--creme);text-align:center}
.cta-band h2{color:var(--creme);margin-bottom:1rem;font-size:clamp(2rem,5vw,3.4rem)}
.cta-band .lede{color:rgba(245,239,227,.82);margin:0 auto 2rem}

/* ---------- footer ---------- */
.site-footer{background:var(--vert-d);color:rgba(245,239,227,.82);padding-block:clamp(48px,7vw,80px) 0}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2rem}
.foot-brand img{height:46px;margin-bottom:1rem}
.foot-brand p{font-family:var(--serif);font-style:italic;font-size:1.05rem;color:rgba(245,239,227,.9);max-width:34ch}
.site-footer h4{
  font-family:var(--sans);font-size:.76rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold-l);margin:0 0 1rem;font-weight:600;
}
.site-footer ul li{margin-bottom:.6rem}
.site-footer a{color:rgba(245,239,227,.82);transition:color .2s,padding .2s}
.site-footer a:hover{color:var(--ember)}
.foot-bottom{
  margin-top:clamp(2.4rem,5vw,4rem);padding-block:1.6rem;border-top:1px solid rgba(245,239,227,.12);
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.84rem;color:rgba(245,239,227,.6);
}
.foot-bottom .socials{display:flex;gap:1.1rem}
@media (max-width:760px){.foot-grid{grid-template-columns:1fr 1fr}.foot-brand{grid-column:1/-1}}
@media (max-width:460px){.foot-grid{grid-template-columns:1fr}}

/* ---------- reveal on scroll (only hidden when JS is on) ---------- */
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.js .reveal.in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.08s}
.reveal[data-d="2"]{transition-delay:.16s}
.reveal[data-d="3"]{transition-delay:.24s}
@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1;transform:none;transition:none}
  .js .squiggle path{stroke-dashoffset:0;animation:none}
  *{scroll-behavior:auto}
}

/* ---------- misc ---------- */
.skip{position:absolute;left:-9999px;top:0;background:var(--vert);color:var(--creme);padding:.7em 1.2em;border-radius:0 0 8px 0;z-index:200}
.skip:focus{left:0}
.pill{display:inline-block;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);border:1px solid var(--line);border-radius:999px;padding:.4em 1em;font-weight:600}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,4rem);align-items:center}
@media (max-width:820px){.two-col{grid-template-columns:1fr;gap:2rem}}
.quote{font-family:var(--serif);font-style:italic;font-size:clamp(1.5rem,3.4vw,2.4rem);line-height:1.3;color:var(--vert);max-width:24ch}
.section--vert .quote{color:var(--creme)}
.mt-0{margin-top:0}.mb-0{margin-bottom:0}



/* secret threshold to The Fire Room */
.ember-row{text-align:center;padding:.2rem var(--gutter) 1.8rem}
.ember-door{display:inline-block;color:var(--creme);opacity:.3;font-size:.72rem;letter-spacing:.04em;text-decoration:none;transition:opacity .35s ease,color .35s ease}
.ember-door::before{content:"\25B2";font-size:.62em;color:var(--ember);opacity:.7;margin-right:.45em;vertical-align:1px}
.ember-door:hover{opacity:.9;color:var(--ember)}


/* full-bleed burger banners */
.fullbleed-band{line-height:0;margin:0}
.fullbleed-band img{width:100%;height:auto;display:block}
.banner-cta{position:relative;min-height:clamp(300px,40vw,460px);display:flex;align-items:center;background:var(--vert) center/cover no-repeat;color:var(--creme);overflow:hidden}
.banner-cta::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(18,53,40,.85),rgba(18,53,40,.4) 52%,rgba(18,53,40,.05))}
.banner-cta .wrap{position:relative;z-index:2}
.banner-cta .eyebrow{color:var(--ember)}
.banner-cta h2{color:var(--creme);max-width:20ch}
.banner-cta .btn-row{margin-top:1.4rem}

/* ===== FAQ accordion (visit.html) ===== */
.faq-list{max-width:780px;margin-inline:auto;border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item summary{
  list-style:none;cursor:pointer;padding:1.15rem 2.4rem 1.15rem 0;position:relative;
  font-family:var(--serif);font-weight:600;font-size:clamp(1.05rem,1.6vw,1.22rem);
  color:var(--vert);line-height:1.35;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:"+";position:absolute;right:.2rem;top:50%;transform:translateY(-50%);
  font-family:var(--sans);font-weight:400;font-size:1.5rem;color:var(--gold);
  transition:transform .25s ease;line-height:1;
}
.faq-item[open] summary::after{content:"−"}
.faq-item summary:hover{color:var(--ember)}
.faq-a{padding:0 0 1.3rem;color:var(--char-soft);line-height:1.65;max-width:68ch}
.faq-a p{margin:0}
.faq-a a{color:var(--ember);font-weight:500}

/* ===== Legal / prose pages (privacy.html, terms.html) ===== */
.legal{max-width:760px;margin-inline:auto}
.legal .updated{font-size:.85rem;color:var(--gold);font-weight:600;letter-spacing:.04em;margin-bottom:2.2rem}
.legal h2{font-size:clamp(1.3rem,2vw,1.6rem);margin:2.4rem 0 .7rem}
.legal h2:first-of-type{margin-top:0}
.legal h3{font-size:1.1rem;margin:1.6rem 0 .5rem;color:var(--vert)}
.legal p{color:var(--char-soft);line-height:1.7;margin:0 0 1rem;max-width:70ch}
.legal ul{color:var(--char-soft);line-height:1.7;margin:0 0 1.2rem;padding-left:1.2rem}
.legal li{margin-bottom:.45rem}
.legal a{color:var(--ember);font-weight:500}
.legal strong{color:var(--vert)}

/* ===== Footer legal links ===== */
.foot-legal{display:flex;gap:1rem;flex-wrap:wrap}
.foot-legal a{opacity:.85}

/* ============================================================
   V10 additions
   ============================================================ */

/* ---------- diet marks (FSSAI standard veg / non-veg) ---------- */
.diet{display:inline-block;width:.86em;height:.86em;border:1.6px solid currentColor;border-radius:2px;position:relative;flex:none;vertical-align:-1px}
.diet::after{content:"";position:absolute;inset:0;margin:auto;width:.42em;height:.42em;border-radius:50%;background:currentColor}
.diet--veg{color:#1F7A34}
.diet--nonveg{color:#A32020}
.diet--nonveg::after{border-radius:0;width:0;height:0;background:none;
  border-left:.21em solid transparent;border-right:.21em solid transparent;border-bottom:.37em solid currentColor;top:.06em}
.diet-key{display:flex;gap:1.4rem;flex-wrap:wrap;font-family:var(--sans);font-size:.82rem;color:var(--char-soft);margin:.2rem 0 0}
.diet-key span{display:inline-flex;align-items:center;gap:.45em}

/* ---------- menu item rows ---------- */
.m-item{display:grid;grid-template-columns:auto 1fr;gap:.5rem .7rem;padding:1.15rem 0;border-bottom:1px solid var(--line-soft);scroll-margin-top:96px}
.m-item:last-child{border-bottom:0}
.m-head{display:flex;align-items:baseline;gap:.55rem;flex-wrap:wrap;grid-column:2}
.m-name{font-family:var(--serif);font-size:clamp(1.12rem,2.4vw,1.34rem);font-weight:600;color:var(--vert);margin:0;line-height:1.2}
.m-tag{font-family:var(--sans);font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;color:var(--gold);font-weight:600}
.m-desc{grid-column:2;margin:.3rem 0 0;font-size:.94rem;line-height:1.62;color:var(--char-soft);max-width:62ch}
.m-item .diet{grid-column:1;margin-top:.42em}
/* price populates from data-price at launch; empty renders nothing */
.m-price{grid-column:2;font-family:var(--sans);font-size:.9rem;font-weight:600;color:var(--vert);margin:.35rem 0 0}
.m-price:empty{display:none}

/* ---------- no-image state (items not yet photographed) ---------- */
.noshot{display:flex;align-items:center;justify-content:center;text-align:center;
  background:linear-gradient(160deg,rgba(27,77,62,.055),rgba(154,123,45,.075));
  border:1px solid var(--line);border-radius:var(--r);aspect-ratio:4/5;padding:1.4rem}
.noshot p{font-family:var(--sans);font-size:.78rem;letter-spacing:.05em;line-height:1.5;color:var(--char-soft);margin:0;max-width:22ch}
.noshot .diet{margin-bottom:.5rem}

/* ---------- gallery ---------- */
.gal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:clamp(1rem,2.2vw,1.7rem)}
.gal-fig{margin:0}
.gal-fig img{width:100%;height:auto;display:block;border-radius:var(--r);background:var(--line-soft)}
.gal-fig figcaption{font-family:var(--sans);font-size:.84rem;line-height:1.5;color:var(--char-soft);margin-top:.6rem}
.gal-sec{margin-top:clamp(2.6rem,5vw,4rem)}
.gal-sec h2{margin-bottom:.4rem}
.gal-sec .lede{margin-bottom:1.6rem}

/* ---------- journal ---------- */
.j-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:clamp(1.4rem,3vw,2.4rem)}
.j-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line-soft);border-radius:var(--r);overflow:hidden;transition:transform .3s ease,box-shadow .3s ease}
.j-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm)}
.j-card__body{padding:1.3rem 1.35rem 1.5rem;display:flex;flex-direction:column;gap:.55rem;flex:1}
.j-card h2,.j-card h3{font-family:var(--serif);font-size:1.16rem;line-height:1.28;margin:0;color:var(--vert)}
.j-card a{text-decoration:none;color:inherit}
.j-card a:hover h2,.j-card a:hover h3{color:var(--ember)}
.j-card p{font-size:.9rem;line-height:1.6;color:var(--char-soft);margin:0}
.j-meta{font-family:var(--sans);font-size:.73rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);font-weight:600}
.j-body{max-width:68ch}
.j-body h2{margin:2.3rem 0 .7rem}
.j-body p{margin:0 0 1.15rem;line-height:1.72}
.j-body ul{margin:0 0 1.3rem;padding-left:1.15rem;line-height:1.72}
.j-body li{margin-bottom:.5rem}
.j-answer{background:rgba(27,77,62,.05);border-left:3px solid var(--ember);border-radius:0 var(--r) var(--r) 0;padding:1.15rem 1.35rem;margin:0 0 1.9rem}
.j-answer p{margin:0;font-size:1rem;line-height:1.68;color:var(--vert-d)}
.j-answer strong{color:var(--vert)}
.j-next{margin-top:2.6rem;padding-top:1.4rem;border-top:1px solid var(--line);font-family:var(--sans);font-size:.92rem}

/* ---------- order page ---------- */
.order-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1rem;margin-top:1.8rem}
.order-card{display:flex;flex-direction:column;gap:.35rem;padding:1.35rem 1.4rem;border:1px solid var(--line);border-radius:var(--r);
  background:#fff;text-decoration:none;color:var(--vert);transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease}
.order-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm);border-color:var(--gold)}
.order-card b{font-family:var(--serif);font-size:1.1rem;font-weight:600}
.order-card span{font-family:var(--sans);font-size:.85rem;color:var(--char-soft)}
.order-card--soon{opacity:.62;pointer-events:none;background:transparent;border-style:dashed}
.order-card--soon b::after{content:"Soon";float:right;font-family:var(--sans);font-size:.66rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--gold);border:1px solid var(--line);border-radius:999px;padding:.18em .7em;font-weight:600}
.order-note{font-family:var(--sans);font-size:.9rem;color:var(--char-soft);margin-top:1.5rem;line-height:1.6}

/* ---------- breadcrumbs ---------- */
.crumbs{font-family:var(--sans);font-size:.78rem;color:var(--char-soft);margin:0 0 1rem;letter-spacing:.02em}
.crumbs a{color:var(--char-soft);text-decoration:none;border-bottom:1px solid var(--line)}
.crumbs a:hover{color:var(--ember)}
.crumbs span{margin:0 .45em;opacity:.5}

/* ---------- menu item media (thumb, or graceful no-image state) ---------- */
.m-item{grid-template-columns:auto minmax(0,1fr) minmax(0,116px)}
.m-media{grid-column:3;grid-row:1 / span 3;align-self:start;min-width:0}
.m-media picture{display:block}
.m-media img{width:100%;max-width:100%;height:auto;display:block;border-radius:10px}
.m-media .noshot{aspect-ratio:4/5;padding:.6rem;border-radius:10px}
.m-media .noshot p{font-size:.62rem;letter-spacing:.06em;line-height:1.45;text-transform:uppercase}
.m-media .noshot .diet{display:block;margin:0 auto .35rem}
@media (max-width:620px){
  .m-item{grid-template-columns:auto minmax(0,1fr) minmax(0,84px)}
  .m-media{grid-column:3}
  .m-media .noshot p{font-size:.55rem}
}

/* ---------- tap targets ---------- */
.nav-toggle{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}

/* ============================================================
   V10 LAYOUT PRIMITIVES
   V10's markup uses a different class vocabulary than the original sheet
   (.hero-inner not .hero-grid, .footer-grid not .foot-grid, .header-inner as
   the header row rather than .nav). Without these rules those elements fall
   back to display:block and the pages lose their columns.
   ============================================================ */

/* ---- rhythm: override the container tokens so every existing consumer
        of --maxw / --gutter follows automatically ---- */
:root{
  --maxw:1120px;
  --gutter:clamp(20px,5vw,48px);
}
.section{padding-block:clamp(56px,10vw,112px)}
@media (max-width:640px){
  .section{padding-block:clamp(40px,9vw,64px)}
}

/* one measure for running copy */
.lede,
.j-body,
.m-desc,
.order-note{max-width:64ch}
.lede,
.j-body p,
.j-body li,
.order-note{line-height:1.6}

/* ---- header row ---- */
.header-inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:1.2rem;min-height:72px;
}
.header-inner .nav{height:auto}

/* ---- hero ---- */
.hero-inner{
  display:grid;grid-template-columns:1.05fr .95fr;
  gap:clamp(2rem,5vw,4.5rem);align-items:center;
  padding-block:clamp(44px,8vw,92px);
}
.hero-copy{max-width:56ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:.85rem;align-items:center;margin-top:1.8rem}
@media (max-width:820px){
  .hero-inner{grid-template-columns:1fr;gap:2.2rem}
  .hero-art{order:-1;width:100%;max-width:520px;margin-inline:auto}
}

/* ---- signature dish cards ---- */
.sig-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:clamp(1rem,2.2vw,1.6rem);margin:2rem 0 2.4rem;
}
.sig-card{
  display:flex;flex-direction:column;overflow:hidden;
  border:1px solid var(--line-soft);border-radius:var(--r);
  background:var(--creme);text-decoration:none;color:inherit;
}
.sig-card img{width:100%;height:auto;display:block;aspect-ratio:4 / 5;object-fit:cover}
.sig-card__body{padding:1rem 1.1rem 1.3rem;display:flex;flex-direction:column;gap:.4rem}
.sig-card__body h3{
  font-family:var(--serif);font-size:1.05rem;font-weight:600;color:var(--vert);
  margin:0;display:flex;align-items:center;gap:.45em;line-height:1.25;
}
.sig-card__body p{font-size:.88rem;line-height:1.6;color:var(--char-soft);margin:0}

/* ---- menu ---- */
.menu-body{margin-top:2.2rem}
.m-sec{margin-top:clamp(2.4rem,5vw,3.6rem)}
.m-sec:first-child{margin-top:1.4rem}
.dips{
  font-family:var(--sans);font-size:.96rem;line-height:2;color:var(--vert);
  display:flex;flex-wrap:wrap;align-items:center;gap:.15rem .35rem;
}

/* ---- visit / contact / journal ---- */
.visit-address{font-style:normal;font-size:1.02rem;line-height:1.75;color:var(--vert)}
.faq{max-width:780px;border-top:1px solid var(--line)}
.j-hero{margin:1.6rem 0 2.2rem;max-width:560px}
.j-hero img{width:100%;height:auto;display:block;border-radius:var(--r)}

/* ---- footer ---- */
.footer-grid{
  display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:clamp(1.6rem,3vw,2.4rem);
}
@media (max-width:760px){
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-grid > :first-child{grid-column:1 / -1}
}
@media (max-width:460px){.footer-grid{grid-template-columns:1fr}}
.footer-grid h3{
  font-family:var(--sans);font-size:.76rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold-l);margin:0 0 1rem;font-weight:600;
}
.footer-grid img{height:46px;width:auto;margin-bottom:1rem}
.footer-line{
  font-family:var(--serif);font-style:italic;font-size:1.02rem;line-height:1.6;
  color:rgba(245,239,227,.9);margin:.8rem 0 0;max-width:34ch;
}
.footer-grid address{font-style:normal;font-size:.92rem;line-height:1.8}
.footer-links,
.footer-legal{list-style:none;margin:0;padding:0}
.footer-links li{margin-bottom:.6rem}
.footer-legal{display:flex;gap:1.1rem;margin-top:1.1rem}
.footer-legal li{margin:0}
.footer-base{
  margin-top:clamp(2.4rem,5vw,4rem);padding-block:1.6rem;
  border-top:1px solid rgba(245,239,227,.12);
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  font-size:.84rem;color:rgba(245,239,227,.6);
}
.footer-base p{margin:0}
.fssai{font-size:.8rem;color:rgba(245,239,227,.5);margin:0}
.fssai:empty{display:none}

/* .btn already carries the ember look; name the modifier so it is not a no-op */
.btn--ember{--bg:var(--ember);--fg:var(--creme)}

/* ============================================================
   JOB 2 - nav Call button
   .nav-links a{padding:.3em 0} out-specifies .btn{padding:.92em 1.6em}, so the
   button lost its horizontal padding and the 999px radius collapsed it into a
   clipped ember circle. Restore the pill and drop the nav underline.
   ============================================================ */
.nav-links a.btn{
  padding:.72em 1.4em;
  border-radius:999px;
  color:var(--creme);
  font-size:.9rem;
  line-height:1;
  white-space:nowrap;
  min-height:44px;            /* tap target */
  justify-content:center;
}
.nav-links a.btn::after{content:none}
.nav-links a.btn:hover{color:var(--creme)}

/* ============================================================
   JOB 3 - squiggle divider
   Was rendering as a full-width ember band at roughly 108px tall. Slim it and
   tighten the space around it so it reads as a divider, not a headline.
   ============================================================ */
.squiggle{
  display:block;
  height:clamp(22px,2.6vw,34px);
  width:auto;max-width:calc(100% - (var(--gutter) * 2));
  margin:clamp(6px,1.4vw,14px) auto;
  opacity:.55;
}

/* ============================================================
   JOB 4 - motion
   Everything below is inside prefers-reduced-motion: no-preference, except the
   focus ring, which is an accessibility affordance and must never be suppressed.
   ============================================================ */

/* focus ring: Gold Ink, never the browser default */
:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
  border-radius:2px;
}
.btn:focus-visible,
.nav-links a:focus-visible,
.sig-card:focus-visible,
.j-card a:focus-visible,
.order-card:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

@media (prefers-reduced-motion:no-preference){

  /* links and buttons: 150ms */
  a,
  .btn,
  .nav-links a,
  .footer-links a,
  .footer-legal a,
  .socials a{transition:color .15s ease,background-color .15s ease,border-color .15s ease,opacity .15s ease}
  .btn{transition:color .15s ease,background-color .15s ease,border-color .15s ease,transform .15s ease,box-shadow .15s ease}

  /* scroll-reveal: fade + 12px rise, staggered by child index */
  .js .rv{
    opacity:0;transform:translateY(12px);
    transition:opacity .6s ease,transform .6s ease;
    transition-delay:calc(var(--i,0) * 70ms);
  }
  .js .section.in .rv,
  .js .rv.in{opacity:1;transform:none}

  /* One gentle fade-up on first load. Driven by a keyframe rather than a
     JS-applied class: requestAnimationFrame is throttled in background tabs, so
     a class-based reveal can leave the hero stuck at opacity 0 until focus.
     An animation with fill-mode both cannot get stuck.
     Deliberately excludes .hero-art: the hero image is the LCP candidate and
     must never start at opacity 0. */
  /* No fill-mode on purpose. The element's natural state is visible, so if the
     animation never runs (throttled tab, animation disabled) the copy is still
     shown. fill-mode:both would leave it stranded at opacity 0. */
  .hero-copy{animation:umami-rise .55s ease}

  /* dish-card image hover */
  .sig-card img,
  .j-card img{transition:transform .4s ease}
  .sig-card:hover img,
  .j-card:hover img{transform:scale(1.03)}
  .sig-card,
  .j-card{transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}
  .sig-card:hover,
  .j-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm);border-color:var(--line)}
}

/* cards clip their own image regardless of motion preference */
.sig-card,
.j-card{overflow:hidden}

/* sticky header: transparent at rest, background and hairline after ~40px */
.site-header{
  background:transparent;
  backdrop-filter:none;
  border-bottom:1px solid transparent;
  transition:background-color .3s ease,border-color .3s ease,box-shadow .3s ease,backdrop-filter .3s ease;
}
.site-header.scrolled{
  background:rgba(245,239,227,.88);
  backdrop-filter:blur(12px) saturate(1.2);
  border-bottom-color:var(--line-soft);
  box-shadow:0 1px 0 0 rgba(43,43,43,.06),0 6px 24px -20px rgba(27,77,62,.5);
}
@keyframes umami-rise{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:none}
}

@media (prefers-reduced-motion:reduce){
  .site-header{transition:none}
  .js .rv{opacity:1;transform:none;transition:none}
  .hero-copy{animation:none}
}

/* ============================================================
   WCAG AA CONTRAST FIXES
   Two failures found by auditing computed colour against effective background
   across all 10 page templates at 375px.

   1. Gold Ink #9A7B2D on Creme #F5EFE3 = 3.50:1, needs 4.5:1.
      Affects the small uppercase metadata: .pill, .m-tag (19 on /menu/),
      .j-meta and its <time>, all 11.5 to 11.8px at weight 600.
      Fix: --gold-text, Gold Ink scaled to 82% along the same hue = #7E6525,
      which measures 4.86:1, an 8% margin over the 4.5 threshold so rounding
      differences between engines cannot flip it. Used for small text only. Gold Ink itself is
      unchanged for borders, focus rings, the 24px FAQ glyph and the footer
      headings on dark green, all of which already pass.

   2. Creme #F5EFE3 on Ember #E25822 = 3.24:1, needs 4.5:1.
      Affects every .btn--ember across six pages.
      No colour in the locked palette can carry normal-size AA text on Ember:
      Creme 3.24, Charcoal 3.81, white 3.72, Cafe Vert 2.60. Darkening Ember
      would mean a sixth brand colour. So the button text is promoted to WCAG
      large text instead, where the threshold is 3:1 and Creme on Ember passes
      at 3.24:1. The px floor in the clamp guarantees the 18.66px large-text
      boundary is met even if the user's root font size is below 16px.
   ============================================================ */
:root{
  --gold-text:#7E6525;   /* Gold Ink at 82%, 4.86:1 on Creme. Small text only. */
}

.pill,
.m-tag,
.j-meta,
.j-meta time,
.legal .updated,
.m-sig,
.m-meta,
.hero-meta .lbl,
.bro .role{color:var(--gold-text)}

/* promote button text to WCAG large text (>=18.66px and >=700) */
.btn{
  font-size:clamp(18.75px,1.18rem,26px);
  font-weight:700;
}
/* .nav-links a{font-weight:500} out-specifies .btn{font-weight:700}, so the
   nav Call button would not qualify as large text without this. */
.nav-links a.btn{font-size:clamp(18.75px,1.18rem,26px);font-weight:700}

/* Radar chips are Creme on Ember at chip size, the same 3.24:1 problem, and
   they are too small to promote to large text. Selected state uses Cafe Vert
   instead, which is 8.42:1 with Creme. Ember stays the colour of the plotted
   shape, which is where it carries meaning. */
.dr-btn[aria-checked="true"]{
  background:var(--vert);
  border-color:var(--vert);
  color:var(--creme);
}

/* 3. Ember #E25822 on Creme = 3.24:1. Only one text use: the current-page nav
      link, at 15.2px weight 500. The ember underline under it is a non-text
      indicator, which needs 3:1 and passes at 3.24, so it stays and keeps
      carrying the colour cue. The label itself moves to Cafe Vert (8.42:1) and
      gains weight, so the current page is marked by weight and underline
      rather than by a colour that cannot meet AA at that size. */
.nav-links a[aria-current="page"]{
  color:var(--vert);
  font-weight:700;
}