/* ===========================================================================
   Daraudi River Resort — one stylesheet, two pages (index.html, menu.html).

   PALETTE comes out of the client's own logo: black line art of two palms, a
   sun and river waves. --ink is that black with a green cast, --sun is the sun,
   --river is the water. Nothing invented.

   The logo itself is assets/logo-mark.png, lifted out of the printed menu and
   shipped as an alpha PNG so .mark can paint it any colour with mask-image.
   =========================================================================== */

@font-face{font-family:'Playfair Display';font-style:normal;font-weight:400 900;font-display:swap;
  src:url(fonts/playfair-display-normal.woff2) format('woff2-variations');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Playfair Display';font-style:italic;font-weight:400 900;font-display:swap;
  src:url(fonts/playfair-display-italic.woff2) format('woff2-variations');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:300 700;font-display:swap;
  src:url(fonts/source-sans-3-normal.woff2) format('woff2-variations');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --ink:#0e1a17;
  --ink-2:#172621;
  --river:#14524b;
  --sun:#e2a13a;
  --sun-d:#a96f14;
  --paper:#faf7f0;
  --sand:#efe7d7;
  --line:#ddd2bd;
  --text:#1b2723;
  --muted:#586760;
  --wrap:1140px;
  --pad:clamp(1.15rem,4vw,2.5rem);
  --r:14px;
  --serif:'Playfair Display',Georgia,'Times New Roman',serif;
  --sans:'Source Sans 3',system-ui,-apple-system,'Segoe UI',sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
body{margin:0;background:var(--paper);color:var(--text);font:400 17px/1.62 var(--sans);
  font-variant-numeric:tabular-nums lining-nums;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--river);text-underline-offset:3px}
h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.16;letter-spacing:-.012em;margin:0}
h1{font-size:clamp(2rem,5.6vw,3.4rem)}
h2{font-size:clamp(1.6rem,3.7vw,2.45rem)}
h3{font-size:clamp(1.12rem,2.1vw,1.35rem);line-height:1.28}
h1+.lede,h2+.lede{margin-top:.9rem}
:lang(ne) h1,:lang(ne) h2,:lang(ne) h3{line-height:1.36;letter-spacing:0}
:lang(ne) .eyebrow{letter-spacing:.09em}
p{margin:0 0 1.05em}
:focus-visible{outline:3px solid var(--sun);outline-offset:3px;border-radius:4px}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}
.narrow{max-width:880px}
.lede{font-size:clamp(1.05rem,1.8vw,1.22rem);color:var(--muted);max-width:60ch}
.eyebrow{font:600 .74rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;
  color:var(--sun-d);margin:0 0 .9rem}
section{padding-block:clamp(3rem,7vw,5.4rem)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;z-index:99;background:var(--sun);color:var(--ink);
  padding:.7rem 1.1rem;border-radius:8px;font-weight:600}

/* the mark: one alpha PNG, painted by CSS */
.mark{display:block;background-color:currentColor;
  -webkit-mask:url(logo-mark.png) center/contain no-repeat;
          mask:url(logo-mark.png) center/contain no-repeat}

/* ---------- header ----------
   Same behaviour as Sunrise: fixed and fully transparent over the hero, so the
   photograph runs edge to edge from the very top of the screen, and solid only
   once you have scrolled past it. On menu.html there is no full-bleed hero to
   sit over, so body.inner keeps it solid from the start. */
.hdr{position:fixed;top:0;left:0;right:0;z-index:60;background:transparent;
  border-bottom:1px solid transparent;
  transition:background .3s ease,border-color .3s ease,backdrop-filter .3s ease}
.hdr.stuck,body.inner .hdr{background:rgba(14,26,23,.94);
  -webkit-backdrop-filter:saturate(140%) blur(10px);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom-color:rgba(226,161,58,.22)}
.hdr .wrap{display:flex;align-items:center;gap:1rem;min-height:66px}
.lockup{display:flex;align-items:center;gap:.6rem;color:var(--sun);
  text-decoration:none;margin-right:auto;min-width:0}
.lockup .mark{width:34px;height:34px;flex:none}
/* nowrap: "Daraudi River Resort" broke over two lines at 390px and left the
   header a ragged two-storey block next to a one-line toggle. */
.lockup b{font:600 1.05rem/1 var(--serif);color:var(--paper);display:block;white-space:nowrap}
.lockup small{display:block;font-size:.7rem;color:var(--sun);letter-spacing:.09em;
  text-transform:uppercase;margin-top:3px;white-space:nowrap}
@media (max-width:420px){
  .lockup .mark{width:30px;height:30px}
  .lockup b{font-size:.94rem}
  .lockup small{display:none}
}
.nav{display:flex;gap:1.3rem;align-items:center}
.nav a{color:#e6ece9;text-decoration:none;font-size:.95rem;font-weight:500;white-space:nowrap;
  border-bottom:1px solid transparent;padding-bottom:2px}
.nav a:hover,.nav a[aria-current]{color:var(--sun);border-bottom-color:var(--sun)}
.hdr-act{display:flex;gap:.55rem;align-items:center}
.lang{display:flex;background:rgba(255,255,255,.1);border:1px solid rgba(226,161,58,.4);
  border-radius:999px;padding:2px;font-size:.82rem}
.lang button{border:0;background:none;color:#dfe6e1;padding:.28rem .62rem;border-radius:999px;
  cursor:pointer;font:inherit;font-weight:600}
.lang button[aria-pressed=true]{background:var(--sun);color:var(--ink)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.72rem 1.25rem;border-radius:999px;font:600 .97rem/1 var(--sans);
  text-decoration:none;border:1.5px solid transparent;cursor:pointer;white-space:nowrap}
.btn-sun{background:var(--sun);color:#231703}
.btn-sun:hover{background:#f0b04c}
.btn-line{border-color:rgba(226,161,58,.55);color:var(--sun);background:none}
.btn-line:hover{background:rgba(226,161,58,.12)}
.btn-ghost{border-color:var(--line);color:var(--text);background:none}
.btn-ghost:hover{background:var(--sand)}
.burger{display:none;background:rgba(14,26,23,.35);border:1px solid rgba(226,161,58,.45);
  border-radius:9px;width:40px;height:38px;color:var(--sun);cursor:pointer;padding:0;font-size:1.2rem}
@media (max-width:980px){
  .nav{position:fixed;inset:66px 0 auto;flex-direction:column;align-items:stretch;gap:0;
    background:rgba(14,26,23,.97);
    -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
    border-bottom:1px solid rgba(226,161,58,.25);padding:.4rem 0 1rem;
    display:none;max-height:calc(100dvh - 66px);overflow:auto}
  .nav.open{display:flex}
  .nav a{padding:.85rem var(--pad);border-top:1px solid rgba(255,255,255,.07);border-bottom:0}
  .nav a:hover{border-bottom:0}
  .burger{display:block}
  .hdr-act .btn{display:none}
}

/* ---------- hero ----------
   Full screen, the signboard, nothing on top of it.

   A full 100svh, because the header is fixed and transparent over it rather
   than sticky above it — the photograph starts at the very top of the screen.
   svh not vh so a phone's collapsing address bar does not crop it.

   object-position differs by breakpoint because the two crops differ: the
   board is dead centre in the portrait build, and at 41% in the landscape one
   (the wall has more brick below the sign than above it, and cropping the
   landscape version symmetrically would have forced an aspect wide enough to
   clip the board's ends on a 4:3 window). */
.hero{position:relative;display:block;margin:0;padding:0;background:var(--ink);
  height:100svh;min-height:480px;max-height:1100px;overflow:hidden}
.hero h1{margin:0;position:absolute;inset:0;font-size:0;line-height:0}
.hero picture,.hero img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 45%}
@media (max-width:900px){.hero img{object-position:50% 50%}}
/* Three jobs, one layer: a scrim so the transparent header stays legible over
   any part of the wall, a vignette that pulls the corners down and holds the
   eye on the board, and a floor at the bottom for the line that sits there. */
.hero::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:
  radial-gradient(125% 88% at 50% 40%, transparent 36%, rgba(14,26,23,.5) 100%),
  linear-gradient(180deg,rgba(14,26,23,.58) 0%,rgba(14,26,23,.06) 20%,
                  rgba(14,26,23,0) 42%,rgba(14,26,23,.72) 82%,rgba(14,26,23,.93) 100%)}

/* Centred on the board's axis and parked in the empty brick under it.
   top is a percentage, not a bottom offset, because the board is placed by the
   photograph's own proportions from the top — a bottom anchor drifts off it as
   the viewport gets taller. Board bottom lands at ~0.57 of the hero on
   landscape and ~0.55 on the portrait crop, so 63% clears both. */
.hero-say{position:absolute;left:0;right:0;top:72%;z-index:2;
  text-align:center;padding-inline:var(--pad)}
/* The breakpoint is 900px, not 700, because that is where <picture> swaps the
   landscape crop for the portrait one and the board moves up the frame.
   Tuning this against the 700px text breakpoint put the line on the cream
   rail on desktop and on the brick on a phone. */
@media (max-width:900px){.hero-say{top:60%}}
.hero-rule{display:block;width:54px;height:2px;margin:0 auto 1.15rem;
  background:linear-gradient(90deg,transparent,var(--sun) 22%,var(--sun) 78%,transparent)}
/* text-indent cancels the trailing letter-space, which otherwise pushes a
   centred tracked line half a space to the left. */
.hero-keys{margin:0;font:500 clamp(.76rem,1.45vw,1rem)/1.7 var(--sans);
  letter-spacing:.32em;text-indent:.32em;text-transform:uppercase;color:#f2eee5;
  text-shadow:0 2px 18px rgba(14,26,23,.75)}
/* Devanagari conjuncts come apart under heavy tracking, and it has no case. */
:lang(ne) .hero-keys{letter-spacing:.05em;text-indent:.05em;text-transform:none;
  font-size:clamp(.92rem,1.9vw,1.12rem)}
@media (max-width:700px){
  .hero-rule{width:44px;margin-bottom:.9rem}
  .hero-keys{letter-spacing:.24em;text-indent:.24em}
}

.hero-scroll{position:absolute;left:50%;bottom:24px;z-index:2;
  display:grid;place-items:center;width:46px;height:46px;border-radius:50%;
  border:1px solid rgba(226,161,58,.55);background:rgba(14,26,23,.42);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  color:var(--sun);text-decoration:none;transform:translateX(-50%)}
.hero-scroll:hover{background:rgba(14,26,23,.72)}
/* clear of the fixed Call / WhatsApp bar, which is the same 52px the body is
   padded by and would otherwise sit right on top of the cue */
@media (max-width:700px){.hero-scroll{bottom:84px}}
.hero-scroll svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
@media (prefers-reduced-motion:no-preference){
  .hero-scroll{animation:bob 2.6s ease-in-out infinite}
  @keyframes bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,7px)}}
}

/* ---------- facts strip ---------- */
.facts{background:var(--ink-2);color:#cfd8d3;border-top:1px solid rgba(226,161,58,.2)}
.facts .wrap{display:grid;gap:1px;grid-template-columns:repeat(4,1fr);
  background:rgba(255,255,255,.08);padding:0}
.facts div{background:var(--ink-2);padding:1.1rem var(--pad)}
.facts dt{font:600 .7rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;
  color:var(--sun);margin-bottom:.4rem}
.facts dd{margin:0;font-size:.97rem;line-height:1.35}
@media (max-width:860px){.facts .wrap{grid-template-columns:1fr 1fr}}
@media (max-width:430px){.facts .wrap{grid-template-columns:1fr}}

/* ---------- blocks ---------- */
.band{background:var(--sand)}
.on-dark{background:var(--ink);color:#dfe6e1}
.on-dark h2,.on-dark h3{color:var(--paper)}
.on-dark .lede{color:#a9b8b1}
.on-dark a{color:var(--sun)}
.on-dark a.btn-sun{color:#231703}
.head{max-width:62ch;margin-bottom:clamp(1.8rem,3.5vw,2.7rem)}
.two{display:grid;gap:clamp(1.8rem,4vw,3.2rem);align-items:start}
@media (min-width:900px){.two{grid-template-columns:1.05fr .95fr}#place .two{align-items:center}
  .two.flip>:first-child{order:2}}
figure{margin:0}
figure img{border-radius:var(--r)}
figcaption{margin-top:.6rem;font-size:.84rem;color:var(--muted)}
.on-dark figcaption{color:#8b9a93}

.ticks{list-style:none;margin:0;padding:0}
/* The place: what is on site. One white panel split into four by hairlines
   (the 1px grid gap shows the border colour through). No icons: Ariv, 9 Oct. */
.onsite{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin:1.9rem 0 0;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  box-shadow:0 10px 30px -22px rgba(14,26,23,.35)}
.onsite>div{background:#fff;padding:1.25rem 1.35rem 1.3rem}
.onsite dt{font:600 1.1rem/1.25 var(--serif);color:var(--text);margin:0 0 .35rem}
.onsite dt::before{content:'';display:block;width:28px;height:2px;background:var(--sun);margin-bottom:.85rem}
.onsite dd{margin:0;font-size:.95rem;line-height:1.5;color:var(--muted)}
@media (max-width:430px){.onsite{grid-template-columns:1fr}}
.hall-cta{margin-top:1.8rem}
#hall .head{margin-bottom:1.8rem}
.ticks li{padding-left:1.7rem;position:relative;margin-bottom:.62rem}
.ticks li::before{content:'';position:absolute;left:0;top:.52em;width:9px;height:9px;
  border-radius:50%;background:var(--sun)}
.ticks li:last-child{margin-bottom:0}

/* the paragraph that argues against us. One per section, no more. */
.plain{border-left:3px solid var(--sun);background:rgba(226,161,58,.09);
  padding:1.05rem 1.3rem;border-radius:0 var(--r) var(--r) 0;margin:1.6rem 0 0}
.plain p{margin:0;font-size:1rem}
.on-dark .plain{background:rgba(226,161,58,.11)}

/* what the hall gets booked for */
.tags{list-style:none;display:flex;flex-wrap:wrap;gap:.45rem;margin:1.4rem 0 0;padding:0}
.tags li{border:1px solid rgba(226,161,58,.42);color:var(--sun);border-radius:999px;
  padding:.36rem .82rem;font:600 .85rem/1 var(--sans)}

/* the night BBQ. It is the most attractive single thing here, so it gets its
   own block inside the hall section rather than a seventh bullet. */
.bbq{border:1px solid rgba(226,161,58,.4);border-radius:var(--r);
  background:rgba(226,161,58,.07);padding:1.25rem 1.35rem;margin-top:1.7rem}
.bbq img{border-radius:10px;margin-bottom:1rem;aspect-ratio:3/2;object-fit:cover;width:100%}
.bbq .eyebrow{color:var(--sun);margin-bottom:.5rem}
.bbq h3{margin-bottom:.5rem}
.bbq p{margin:0;font-size:.99rem}

/* ---------- rooms ---------- */
.rooms{display:grid;gap:1.3rem;grid-template-columns:repeat(auto-fit,minmax(285px,1fr))}
.room{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--paper)}
.room img{aspect-ratio:4/3;object-fit:cover;width:100%;border-radius:0}
.room-body{padding:1.3rem}
.room h3{margin-bottom:.3rem}
.room .rate{font:600 1rem/1 var(--sans);color:var(--river);margin:.1rem 0 .75rem}
.room p{font-size:.96rem;color:var(--muted);margin:0}

/* ---------- kitchen highlights ---------- */
.hilite{list-style:none;margin:0 0 1.5rem;padding:0;max-width:34rem}
/* Kitchen: text + photo on top, the menu card full width beneath. */
#kitchen .kitchen-top{align-items:center}
.btn-row{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.7rem}
.menucard{margin-top:clamp(2.2rem,4.5vw,3.4rem);background:#fff;border:1px solid var(--line);
  border-radius:var(--r);padding:clamp(1.3rem,3vw,2.1rem) clamp(1.2rem,3vw,2.4rem);
  box-shadow:0 18px 40px -30px rgba(14,26,23,.45)}
.menucard-head{display:flex;justify-content:space-between;align-items:baseline;gap:.5rem 1rem;
  flex-wrap:wrap;padding-bottom:1rem;margin-bottom:1.4rem;border-bottom:1px solid var(--line)}
.menucard-head .eyebrow{margin:0}
.menucard-note{margin:0;font-size:.9rem;color:var(--muted)}
.menucard-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem clamp(1.6rem,3.5vw,3rem)}
.menucard-cols h3{font-size:1.12rem;margin:0 0 .65rem}
.menucard .hilite{margin:0;max-width:none}
@media (max-width:860px){.menucard-cols{grid-template-columns:1fr}}
.hilite li{display:flex;align-items:baseline;gap:.45rem;padding:.28rem 0;font-size:1rem}
.hilite li b{font-weight:400;order:1}
.hilite li i{flex:1;order:2;border-bottom:1px dotted rgba(27,39,35,.28);
  transform:translateY(-4px);min-width:1rem}
.hilite li em{order:3;font-style:normal;font-weight:600;color:var(--river)}

/* ---------- gorkha cards ---------- */
.spots{display:grid;gap:1.15rem;grid-template-columns:repeat(auto-fit,minmax(258px,1fr))}
.spot{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  padding:1.35rem;display:flex;flex-direction:column}
.spot .dist{font:600 .74rem/1 var(--sans);letter-spacing:.05em;color:var(--sun-d);
  text-transform:uppercase;margin:0 0 .5rem}
.spot h3{margin-bottom:.4rem}
.spot p{font-size:.96rem;color:var(--muted);margin:0}
.spot img{border-radius:10px;margin-bottom:.9rem;aspect-ratio:3/2;object-fit:cover;width:100%}

/* ---------- map ---------- */
.mapcard{background:var(--ink);border-radius:var(--r);padding:clamp(1.2rem,3vw,1.8rem);color:#dfe6e1}
.mapcard svg{width:100%;height:auto;display:block;margin-bottom:1.1rem}
.mapcard .coords{font:600 .88rem/1.5 var(--sans);color:#93a49c;margin:0 0 1rem}
.steps{list-style:none;margin:0;padding:0;counter-reset:s}
.steps li{counter-increment:s;position:relative;padding-left:2.9rem;margin-bottom:1.35rem}
.steps li::before{content:counter(s);position:absolute;left:0;top:-2px;width:2rem;height:2rem;
  border-radius:50%;background:var(--sun);color:#231703;display:grid;place-items:center;
  font:700 .92rem/1 var(--sans)}
.steps b{display:block;font-family:var(--serif);font-size:1.08rem;font-weight:600;margin-bottom:.2rem}
.steps p{margin:0;color:var(--muted);font-size:.96rem}

/* ---------- form ---------- */
.form{display:grid;gap:.95rem;grid-template-columns:1fr 1fr}
.form .full{grid-column:1/-1}
.form label{display:block;font:600 .8rem/1 var(--sans);letter-spacing:.05em;
  text-transform:uppercase;color:var(--sun);margin-bottom:.42rem}
.form input,.form select,.form textarea{width:100%;padding:.72rem .85rem;border-radius:10px;
  border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:var(--paper);
  font:inherit;font-size:1rem}
.form textarea{min-height:92px;resize:vertical}
.form select{appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--sun) 50%),linear-gradient(135deg,var(--sun) 50%,transparent 50%);
  background-position:calc(100% - 18px) 52%,calc(100% - 12px) 52%;background-size:6px 6px;background-repeat:no-repeat}
.form option{background:var(--ink);color:var(--paper)}
.form ::placeholder{color:#7f8e87}
.quick{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.45rem}
.quick button{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
  color:#c9d2cd;border-radius:999px;padding:.3rem .72rem;font:600 .8rem/1 var(--sans);cursor:pointer}
.quick button:hover{border-color:var(--sun);color:var(--sun)}
@media (max-width:620px){.form{grid-template-columns:1fr}}
.form-note{font-size:.88rem;color:#93a29b;margin:1rem 0 0}

/* ---------- faq ---------- */
details{border-bottom:1px solid var(--line);padding:1.05rem 0}
details summary{cursor:pointer;font-family:var(--serif);font-size:1.1rem;font-weight:600;
  list-style:none;display:flex;justify-content:space-between;gap:1rem;align-items:start}
details summary::-webkit-details-marker{display:none}
details summary::after{content:'+';color:var(--sun-d);font:400 1.5rem/1 var(--sans);flex:none}
details[open] summary::after{content:'\2212'}
details p{margin:.8rem 0 0;color:var(--muted);max-width:68ch}

/* ---------- footer ---------- */
.ftr{background:var(--ink);color:#a9b8b1;padding-block:clamp(2.8rem,6vw,4.2rem) 2rem;font-size:.95rem}
.ftr a{color:#d6ded9;text-decoration:none}
.ftr a:hover{color:var(--sun);text-decoration:underline}
.ftr-grid{display:grid;gap:2.1rem;grid-template-columns:1.3fr 1fr 1fr}
@media (max-width:800px){.ftr-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.ftr-grid{grid-template-columns:1fr}}
.ftr h4{font:600 .74rem/1 var(--sans);letter-spacing:.15em;text-transform:uppercase;
  color:var(--sun);margin:0 0 .9rem}
.ftr ul{list-style:none;margin:0;padding:0}
.ftr li{margin-bottom:.5rem}
.ftr .lockup .mark{width:42px;height:42px}
.ftr-legal{margin-top:2.4rem;padding-top:1.3rem;border-top:1px solid rgba(255,255,255,.1);
  display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;font-size:.84rem;color:#7f8e87}
.callbar{position:fixed;left:0;right:0;bottom:0;z-index:55;display:none;gap:1px;
  background:rgba(226,161,58,.28)}
.callbar a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;padding:.55rem .3rem .6rem;background:var(--ink);color:var(--sun);
  text-decoration:none;font:600 .72rem/1 var(--sans);letter-spacing:.03em}
.callbar a.wa{background:var(--sun);color:#231703}
.callbar svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
@media (max-width:700px){.callbar{display:flex}body{padding-bottom:62px}}

/* ===========================================================================
   MENU PAGE
   =========================================================================== */
/* The header is fixed, so this page pays for it in padding — there is no
   full-bleed hero here for it to sit transparently over. */
.menu-hero{background:var(--ink);color:#dfe6e1;
  padding-block:calc(66px + clamp(1.8rem,5vw,2.8rem)) clamp(2.2rem,5vw,3.2rem)}
.menu-hero h1{color:var(--paper)}
.menu-hero .lede{color:#a9b8b1}

.menu-bar{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;
  position:sticky;top:66px;z-index:30;background:var(--paper);
  padding-block:1rem;margin-bottom:1.6rem;border-bottom:1px solid var(--line)}
.menu-bar input{flex:1 1 210px;min-width:0;padding:.66rem .95rem;border:1px solid var(--line);
  border-radius:999px;font:inherit;font-size:.96rem;background:var(--paper);color:var(--text)}
.chip{border:1px solid var(--line);background:var(--paper);color:var(--muted);
  border-radius:999px;padding:.44rem .9rem;font:600 .85rem/1 var(--sans);cursor:pointer}
.chip[aria-pressed=true]{background:var(--ink);color:var(--paper);border-color:var(--ink)}

.menu-cols{columns:2;column-gap:clamp(1.6rem,4vw,3.2rem)}
@media (max-width:760px){.menu-cols{columns:1}}
.mgroup{break-inside:avoid;margin:0 0 1.8rem}
.mgroup h2{font-family:var(--sans);font-size:.78rem;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--sun-d);padding-bottom:.5rem;
  border-bottom:1px solid var(--line);margin-bottom:.65rem;display:flex;
  justify-content:space-between;align-items:baseline;gap:.6rem}
.mgroup h2 span{font-weight:600;letter-spacing:0;text-transform:none;font-size:.9rem;color:var(--muted)}
.mgroup ul{list-style:none;margin:0;padding:0}
.mgroup li{display:flex;align-items:baseline;gap:.45rem;font-size:.97rem;padding:.14rem 0}
.mgroup li b{font-weight:400;order:1}
.mgroup li i{flex:1;order:2;border-bottom:1px dotted rgba(27,39,35,.28);
  transform:translateY(-4px);min-width:1rem}
.mgroup li em{order:3;font-style:normal;font-weight:600;color:var(--river);white-space:nowrap}
.mgroup li em s{color:var(--muted);font-weight:400;text-decoration:none;font-size:.85em}
.mgroup .hd{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);justify-content:flex-end;gap:.9rem;padding-bottom:.15rem}
.no-hits{display:none;padding:1.5rem 0;color:var(--muted)}
.menu-note{margin-top:1.4rem;font-size:.88rem;color:var(--muted);max-width:60ch}

/* ---------- draft mode ---------- */
.draft-chip{position:fixed;left:12px;bottom:12px;z-index:60;background:var(--ink);
  color:var(--sun);border:1px solid var(--sun);border-radius:999px;padding:.42rem .85rem;
  font:600 .78rem/1 var(--sans);cursor:pointer;opacity:.5}
.draft-chip:hover{opacity:1}
@media (max-width:700px){.draft-chip{bottom:62px}}
u.d{text-decoration:none}
body.draft u.d{text-decoration:underline 2px var(--sun);text-underline-offset:3px;
  background:rgba(226,161,58,.16)}
body.draft .draft-chip{opacity:1;background:var(--sun);color:var(--ink)}