/* ============================================================
   Kindling: theme. Charcoal and warm smoke, one ember orange.
   Prata for the menu voice, Jost for everything practical.
   The page is lit like the dining room: dark, with the fire as
   the only bright thing in it.
   ============================================================ */
@layer theme {
:root{
  color-scheme:dark;
  --canvas:#15110F; --surface:#1F1916; --ink:#F1E7DC; --muted:#B9AA9B; --line:#3A302A; --line-strong:#5C4D43;
  --primary:#F1E7DC; --primary-hover:#FFF4E8; --on-primary:#15110F;
  --accent:#FF7A33; --accent-hover:#FF9152; --on-accent:#15110F; --accent-text:#FF8F52;
  --focus:#FF9152; --focus-ring:rgb(255 145 82/.25); --error:#FF8A80; --ph-bg:#2A221E;
  --header-bg:#15110F; --footer-bg:#0E0B0A; --on-footer:#D8CBBE; --note-bg:#2A221E;
  --field-bg:#1A1513; --field-line:#4A3E36;
  --hot:#FFD08A; --cool:#6E7B76; --smoke:#2A221E;
  --font-display:'Prata',Georgia,serif; --font-body:'Jost',system-ui,sans-serif;
  --radius:3px; --radius-sm:3px; --radius-lg:4px; --radius-btn:3px;
  --header-h:4.5rem;
  --select-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F1E7DC' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
body[data-texture="smoke"]{background-image:radial-gradient(60rem 40rem at 85% -10%,color-mix(in srgb,var(--accent) 7%,transparent),transparent 70%)}
h1,h2,h3{font-weight:400;letter-spacing:-.01em}
h2{font-size:clamp(2.2rem,5vw,3.8rem);line-height:1.02}
h3{font-size:1.4rem}
.sec-head{display:grid;gap:.6rem;margin-bottom:clamp(2rem,4vw,3rem)}
.sec-head p{color:var(--muted);font-size:1.1rem}
.btn{font-weight:500;letter-spacing:.06em;text-transform:uppercase;font-size:.92rem}
.btn--ghost{color:var(--ink)}
@media (hover:hover){ .btn--ghost:hover{background:var(--ink);color:var(--canvas)} }

/* ---------- header ---------- */
.site-header{border-bottom:1px solid var(--line)}
.site-header.is-stuck{box-shadow:0 1px 0 var(--line),0 10px 30px rgb(0 0 0/.4)}
.brand{font-size:1.6rem;font-weight:400}
.brand-mark{background:none;color:var(--accent);width:auto}
.brand-mark .ico{width:1.5rem;height:1.5rem}
.nav-mobile-cta a{color:var(--accent-text)}
@media (min-width:900px){ .site-nav a{font-weight:400;letter-spacing:.08em;text-transform:uppercase;font-size:.85rem} .nav-mobile-cta{display:none} }

/* ---------- hero: the oven, embers lifting off it ---------- */
.hero{position:relative;display:grid;align-items:end;min-height:min(92svh,58rem);overflow:clip;isolation:isolate}
.hero-bg{position:absolute;inset:0;z-index:-2}
.hero-bg .ph{height:100%;aspect-ratio:auto;border-radius:0}
.hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgb(21 17 15/.35),rgb(21 17 15/.2) 35%,rgb(21 17 15/.92) 88%,var(--canvas))}
.hero-inner{display:grid;gap:1.5rem;justify-items:start;padding-block:8rem clamp(3rem,7vw,5.5rem)}
.hero h1{font-size:clamp(3rem,7.4vw,6.6rem);line-height:.98;max-width:13ch}
.hero h1 em{font-style:normal;color:var(--accent-text)}
.split .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em}
.split .w > span{display:inline-block}
@media (prefers-reduced-motion:no-preference){
  .js .split .w > span{animation:word-rise 1s var(--ease-out) both;animation-delay:calc(var(--i) * 85ms + 120ms)}
}
@keyframes word-rise{from{transform:translateY(110%)}}
.hero-lede{max-width:32rem;font-size:1.2rem;color:var(--ink);opacity:.9}
.hero-actions{display:flex;flex-wrap:wrap;gap:.75rem}
.embers{position:absolute;inset:0;z-index:-1;pointer-events:none}
.embers i{position:absolute;bottom:-10px;left:var(--x);width:var(--s);height:var(--s);border-radius:50%;
  background:radial-gradient(circle,var(--hot),var(--accent) 60%,transparent 70%);box-shadow:0 0 8px var(--accent);transform:scale(0)}
@media (prefers-reduced-motion:no-preference){ .embers i{animation:ember var(--t) linear infinite;animation-delay:var(--d)} }
@keyframes ember{0%{transform:translate(0,0) scale(1)}50%{transform:translate(18px,-40vh) scale(.8)}100%{transform:translate(-12px,-85vh) scale(0)}}

/* ---------- the menu and its heat dial ---------- */
.menu-head{display:grid;gap:.6rem;margin-bottom:clamp(2rem,4vw,3rem);max-width:40rem}
.menu-head p{color:var(--muted);font-size:1.1rem}
.menu-grid{display:grid;gap:2.5rem;align-items:start}
.dial{display:grid;gap:1rem;padding:1.5rem;border:1px solid var(--line-strong);background:var(--surface);--a:-90deg}
.dial-q{font-family:var(--font-display);font-size:1.4rem}
.gauge{width:100%;max-width:18rem;justify-self:center}
.arc{fill:none;stroke:url(#heat);stroke-width:16;stroke-linecap:round}
.tick{stroke:var(--canvas);stroke-width:3;stroke-dasharray:0 96 30}
.needle{transform-box:view-box;transform-origin:150px 150px;transform:rotate(var(--a));transition:transform .8s cubic-bezier(.34,1.56,.64,1)}
.needle path{stroke:var(--ink);stroke-width:5;stroke-linecap:round}
.needle circle{fill:var(--accent)}
.dial[data-on="all"] .needle{transform:rotate(-90deg)}
@media (prefers-reduced-motion:reduce){ .needle{transition:none} }
.zone-btns{display:grid;gap:.4rem}
.zone-btn{display:grid;gap:.1rem;text-align:left;padding:.75rem .9rem;border:1px solid var(--line);border-radius:var(--radius);
  transition:border-color var(--dur-fast) linear,background-color var(--dur-fast) linear,transform var(--dur-fast) var(--ease-out)}
.zone-btn strong{font-weight:500;font-size:1.02rem}
.zone-btn span{font-size:.88rem;color:var(--muted)}
@media (hover:hover){ .zone-btn:hover{border-color:var(--line-strong);background:var(--canvas)} }
.zone-btn:active,.zone-all:active{transform:scale(.98)}
.zone-btn[aria-pressed="true"]{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,var(--surface))}
.zone-btn[aria-pressed="true"] strong{color:var(--accent-text)}
.zone-all{justify-self:start;min-height:44px;padding:.5rem .9rem;font-size:.9rem;letter-spacing:.06em;text-transform:uppercase;border-bottom:1px solid var(--line-strong)}
.zone-all[aria-pressed="true"]{color:var(--accent-text);border-color:var(--accent)}
.courses{display:grid;gap:2.5rem}
.course h2,.course h3{font-size:1rem;font-family:var(--font-body);font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-text);
  padding-bottom:.7rem;margin-bottom:.4rem;border-bottom:1px solid var(--line)}
.course li{position:relative;display:grid;gap:.2rem;padding:1rem 0 1rem 0;border-bottom:1px solid var(--line);transition:opacity var(--dur-mid) linear,padding-left var(--dur-mid) var(--ease-out)}
.course li::before{content:"";position:absolute;left:0;top:1rem;bottom:1rem;width:3px;background:var(--accent);transform:scaleY(0);transition:transform var(--dur-mid) var(--ease-out)}
.course li.is-hot{padding-left:1rem}
.course li.is-hot::before{transform:none;box-shadow:0 0 14px var(--accent)}
.course li.is-cold{opacity:.3}
.dish-top{display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.dish{font-family:var(--font-display);font-size:1.3rem;line-height:1.2}
.price{font-size:1.1rem;color:var(--accent-text)}
.course li p{color:var(--muted)}
.zone-tag{display:inline-flex;align-items:center;gap:.35rem;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.zone-tag .ico{width:.95rem;height:.95rem;color:var(--accent-text)}
.m-key{margin-top:2rem;font-size:.92rem;color:var(--muted)}
@media (min-width:700px){ .courses{grid-template-columns:1fr 1fr;gap:2.5rem 3rem} }
@media (min-width:1000px){ .menu-grid{grid-template-columns:20rem 1fr;gap:4rem} .dial{position:sticky;top:calc(var(--header-h) + 1.5rem)} }

/* ---------- the kitchen: cards over the pinned coals ---------- */
.kitchen{position:relative}
.k-pin{position:sticky;top:0;height:100svh}
.k-pin .ph{height:100%;aspect-ratio:auto;border-radius:0}
.k-pin::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgb(21 17 15/.75),rgb(21 17 15/.25))}
.k-cards{position:relative;z-index:1;display:grid;gap:30svh;margin-top:-100svh;padding-block:30svh 20svh}
.k-card{width:min(100%,28rem);padding:clamp(1.5rem,3vw,2.25rem);background:rgb(21 17 15/.82);border:1px solid var(--line-strong);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.k-card p{font-size:1.15rem;line-height:1.55}
.k-card--lead h2,.k-card--lead h1{font-size:clamp(2.4rem,5vw,3.8rem);margin-bottom:1rem}
.k-card--photo{padding:.6rem;width:min(80%,20rem);transform:rotate(-2deg)}
.k-card:nth-child(even){justify-self:end}
.k-card--photo:nth-child(4){transform:rotate(2.5deg)}
@media (min-width:900px){ .k-cards{gap:24svh} .k-card:nth-child(3){margin-left:12%} }

/* ---------- private dining ---------- */
.private-grid{display:grid;gap:2.5rem;align-items:center}
.private-copy{display:grid;gap:1.25rem;justify-items:start}
.private-copy > p{font-size:1.15rem;color:var(--muted);max-width:32rem}
.private-list{display:grid;gap:.8rem}
.private-list li{display:flex;gap:.75rem;align-items:center;font-size:1.05rem}
.private-list .ico{color:var(--accent-text)}
.private-photo .ph{border-radius:999px 999px var(--radius-lg) var(--radius-lg)}
@media (min-width:900px){ .private-grid{grid-template-columns:.9fr 1.1fr;gap:5rem} }

/* ---------- reviews ---------- */
.reviews{border-top:1px solid var(--line)}
.rv-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1.25rem}
.rv-card{display:grid;gap:1.25rem;align-content:space-between;padding:1.75rem;background:var(--surface);border:1px solid var(--line)}
.rv-card blockquote p{font-family:var(--font-display);font-size:1.2rem;line-height:1.45}
.rv-card figcaption{display:grid;font-size:.9rem;color:var(--muted)}
.rv-card figcaption strong{color:var(--ink);letter-spacing:.06em;text-transform:uppercase;font-weight:500}
.rv-controls button{border-color:var(--line-strong);color:var(--ink)}

/* ---------- the one ember band ---------- */
.quote-band{background:var(--accent);color:var(--on-accent);padding-block:clamp(3.5rem,8vw,6rem)}
.quote-band blockquote p{font-family:var(--font-display);font-size:clamp(1.8rem,4.2vw,3.3rem);line-height:1.15;max-width:52rem}
.quote-band figcaption{margin-top:1.5rem;display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:center}
.quote-band .sample-tag{color:var(--on-accent)}

/* ---------- FAQ ---------- */
.faq-grid{display:grid;gap:2rem}
.faq summary{font-weight:500;font-size:1.1rem}
.faq summary .ico{color:var(--accent-text)}
@media (min-width:900px){ .faq-grid{grid-template-columns:.7fr 1.3fr;gap:4rem} .faq-grid h2{position:sticky;top:calc(var(--header-h) + 2rem);align-self:start} }

/* ---------- booking ---------- */
.book{background:var(--surface);border-top:1px solid var(--line)}
.book-grid{display:grid;gap:2.5rem}
.book-copy > p{margin-top:1rem;color:var(--muted);font-size:1.1rem;max-width:30rem}
.info{display:grid;gap:1.5rem;margin-top:2rem}
.info h2,.info h3{font-family:var(--font-body);font-size:.85rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-text);margin-bottom:.4rem}
.info dl{display:grid;gap:.3rem}
.info dt{display:inline;font-weight:500}
.info dd{display:inline;margin:0 0 0 .4rem;color:var(--muted)}
.info a{color:var(--ink)}
.form{display:grid;gap:1.25rem;padding:clamp(1.25rem,3vw,2rem);background:var(--canvas);border:1px solid var(--line-strong)}
.form-row{display:grid;gap:1.25rem}
.choices-set{border:0;padding:0;display:grid;gap:.6rem}
.choice span{border-radius:var(--radius)}
.choice input:checked + span{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.hint{margin-top:-.75rem;font-size:.9rem;color:var(--muted)}
.stepper{display:grid;grid-template-columns:52px 1fr 52px;gap:.4rem}
.stepper .input{text-align:center;font-size:1.15rem;-moz-appearance:textfield}
.stepper .input::-webkit-inner-spin-button{-webkit-appearance:none}
.step-btn{display:grid;place-items:center;min-height:52px;border:1.5px solid var(--field-line);border-radius:var(--radius);font-size:1.4rem;
  transition:background-color var(--dur-fast) linear,transform var(--dur-fast) var(--ease-out)}
@media (hover:hover){ .step-btn:not(:disabled):hover{background:var(--surface)} }
.step-btn:active{transform:scale(.94)}
.step-btn:disabled{opacity:.35;cursor:not-allowed}
@media (prefers-reduced-motion:no-preference){ .stepper .input.bump{animation:bump .3s var(--ease-out)} }
@keyframes bump{50%{transform:scale(1.08)}}
input[type="date"]{color-scheme:dark}
@media (min-width:600px){ .form-row{grid-template-columns:1fr 1fr} }
@media (min-width:900px){ .book-grid{grid-template-columns:.85fr 1.15fr;gap:4rem;align-items:start} }

/* ---------- map ---------- */
.section--map{padding-bottom:var(--space-section);background:var(--surface)}
.map-block{border:1px solid var(--line-strong);background:radial-gradient(40rem 20rem at 70% 120%,color-mix(in srgb,var(--accent) 18%,transparent),transparent),var(--canvas)}
.map-title{display:grid;gap:.25rem;max-width:26rem}
.map-title strong{font-family:var(--font-display);font-weight:400;font-size:1.6rem}
.map-actions{display:flex;flex-wrap:wrap;gap:.6rem}

/* ---------- call to action ---------- */
.cta-band{padding-block:clamp(4rem,9vw,7rem);text-align:center;border-top:1px solid var(--line);
  background:radial-gradient(50rem 22rem at 50% 120%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 70%)}
.cta-inner{display:grid;gap:1rem;justify-items:center}
.cta-band h2{font-size:clamp(2.6rem,6vw,4.8rem)}
.cta-inner p{font-size:1.15rem;color:var(--muted)}
.cta-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem;margin-top:.75rem}

/* ---------- footer ---------- */
.foot-grid{display:grid;gap:2rem}
.foot-mark{display:flex;align-items:center;gap:.6rem;font-family:var(--font-display);font-size:1.6rem;margin-bottom:.5rem}
.foot-mark .ico{color:var(--accent)}
.site-footer h2{font-family:var(--font-body);font-size:.8rem;font-weight:500;text-transform:uppercase;letter-spacing:.16em;opacity:.7;margin-bottom:.8rem;color:var(--on-footer)}
.site-footer ul{display:grid;gap:.6rem}
.site-footer strong{font-weight:500;color:var(--accent-text);margin-right:.3rem}
@media (min-width:800px){ .foot-grid{grid-template-columns:1.4fr 1fr 1.2fr} }
}