/* Ketsyk — layout layer over the Modernist tokens. */
:root{ --wrap: 1180px; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; color-scheme:light }
html[data-theme=dark]{ color-scheme:dark }
[data-theme=dark]{
  --color-bg:#1b1918; --color-surface:#272423; --color-text:#f3f2f2;
  --color-divider:color-mix(in srgb,#f3f2f2 30%,transparent);
  --color-neutral-200:#2d2b2b; --color-neutral-300:#444141; --color-neutral-400:#9b9797;
  --color-neutral-500:#9b9797; --color-neutral-600:#a9a5a5; --color-neutral-700:#c4c0c0; --color-neutral-800:#d7d3d3; --color-neutral-900:#eae7e7;
  --color-accent-700:#ff9783; --color-accent-100:#4d170e; --color-accent-800:#ffc4b8;
  --shadow-sm:0 1px 2px rgba(0,0,0,.5); --shadow-md:0 3px 10px rgba(0,0,0,.5); --shadow-lg:0 12px 32px rgba(0,0,0,.6);
}
[data-theme=dark] .topbar, [data-theme=dark] .ftr, [data-theme=dark] .dock{ background:#121010; color:#f3f2f2 }
[data-theme=dark] .topbar a, [data-theme=dark] .ftr a, [data-theme=dark] .dock a{ color:#f3f2f2 }
[data-theme=dark] .ftr a:hover{ color:var(--color-accent-700) }
[data-theme=dark] .ftr__bottom{ border-top-color:#444141 }
[data-theme=dark] .dock a + a{ border-left-color:#444141 }
[data-theme=dark] .band--poster{ background:#c22c12; border-bottom-color:#8f1f0c }
[data-theme=dark] .band--poster .btn-primary{ background:#f3f2f2; color:#ae1800 }
[data-theme=dark] .band--poster .btn-primary:hover{ background:#ffe0d9 }
[data-theme=dark] .band--poster .lead, [data-theme=dark] .band--poster .eyebrow{ color:#fff }
[data-theme=dark] .btn-primary{ color:#fff }
[data-theme=dark] .gal figcaption{ background:#121010; color:#f3f2f2 }
[data-theme=dark] .snav__brand img, [data-theme=dark] .mnav img{ filter:brightness(0) invert(1) }
.lbtn{ min-width:52px; min-height:52px; padding:0 14px; display:inline-flex; align-items:center; justify-content:center; border:2px solid var(--color-text); font-family:var(--font-heading); font-weight:800; font-size:14px; letter-spacing:0.06em; text-decoration:none; color:var(--color-text) }
.lbtn:hover{ background:var(--color-text); color:var(--color-bg) }
.tbtn{ width:52px; min-width:52px; min-height:52px; padding:0; justify-content:center; border:2px solid var(--color-divider); background:none; cursor:pointer; color:inherit }
.tbtn:hover{ background:color-mix(in srgb, var(--color-text) 8%, transparent) }
.tbtn .i-sun{ display:none }
[data-theme=dark] .tbtn .i-sun{ display:block }
[data-theme=dark] .tbtn .i-moon{ display:none }
body{ font-size:17px; line-height:1.6; text-wrap:pretty }
h1{ font-size:clamp(38px,6.2vw,74px); letter-spacing:-0.03em }
h2{ font-size:clamp(28px,3.6vw,44px); letter-spacing:-0.02em }
h3{ font-size:clamp(20px,2vw,25px) }
img{ height:auto }
a{ color:var(--color-accent-700) }
a:hover{ color:var(--color-accent) }
.wrap{ max-width:var(--wrap); margin-inline:auto; padding-inline:clamp(16px,4vw,40px) }
.band{ padding-block:clamp(48px,7vw,96px); border-bottom:2px solid var(--color-divider) }
.band--tight{ padding-block:clamp(32px,4vw,56px) }
.band--panel{ background:var(--color-surface) }
.band--poster{ background:var(--color-accent); color:var(--color-bg); border-bottom-color:var(--color-accent-700) }
.band--poster a{ color:var(--color-bg) }
.eyebrow{ font-family:var(--font-heading); font-weight:800; font-size:13px; letter-spacing:0.12em; text-transform:uppercase; color:var(--color-accent-700); margin:0 0 var(--space-4) }
.band--poster .eyebrow{ color:var(--color-bg); opacity:.85 }
.lead{ font-size:clamp(18px,2vw,23px); line-height:1.45; max-width:46ch; color:var(--color-neutral-800) }
.band--poster .lead{ color:var(--color-bg) }
.muted{ color:var(--color-neutral-700) }
.max60{ max-width:62ch }

/* nav */
.topbar{ display:flex; flex-wrap:wrap; row-gap:2px; align-items:center; gap:12px; justify-content:space-between; background:var(--color-text); color:var(--color-bg); font-size:13.5px; padding:8px clamp(16px,4vw,40px) }
.topbar a{ color:var(--color-bg); text-decoration:none }
.topbar a:hover{ text-decoration:underline }
.topbar span{ white-space:nowrap }
.snav{ position:sticky; top:0; z-index:40; background:var(--color-bg); border-bottom:2px solid var(--color-divider) }
.snav__in{ max-width:var(--wrap); margin-inline:auto; display:flex; align-items:center; gap:clamp(12px,2vw,28px); padding:14px clamp(16px,4vw,40px) }
.snav__brand{ margin-right:auto; display:flex; align-items:center }
.snav__brand img{ height:34px; width:auto }
.snav__links{ display:flex; gap:clamp(12px,1.8vw,26px) }
.snav a{ color:inherit; text-decoration:none; font-size:15px; font-family:var(--font-heading); font-weight:600 }
.snav__links a:hover{ color:var(--color-accent) }
.snav__links a[aria-current=page]{ color:var(--color-accent); box-shadow:inset 0 -3px 0 var(--color-accent) }
.burger{ display:none; align-items:center; gap:8px; border:2px solid var(--color-divider); background:none; padding:8px 12px; font:inherit; font-weight:700; cursor:pointer }
.mnav[hidden]{ display:none }
.mnav{ position:fixed; inset:0; z-index:50; background:var(--color-bg); padding:24px; display:flex; flex-direction:column; gap:4px }
.mnav a{ font-family:var(--font-heading); font-weight:800; font-size:26px; text-decoration:none; color:var(--color-text); padding:12px 0; border-bottom:2px solid var(--color-divider) }
.mnav__close{ align-self:flex-end; border:2px solid var(--color-divider); background:none; font:inherit; font-weight:700; padding:10px 14px; cursor:pointer; margin-bottom:16px }

/* buttons */
.btn{ font-size:16px; padding:14px 20px; min-height:52px; justify-content:flex-start; gap:10px; border-radius:0; white-space:nowrap }
.btn-primary{ background:var(--color-accent); color:#fff }
.btn-secondary{ border:2px solid var(--color-text) }
.btn-secondary:hover{ background:var(--color-text); color:var(--color-bg) }
.band--poster .btn-primary{ background:var(--color-bg); color:var(--color-accent-700) }
.band--poster .btn-primary:hover{ background:var(--color-accent-100) }
.band--poster .btn-secondary{ border-color:var(--color-bg); color:var(--color-bg) }
.band--poster .btn-secondary:hover{ background:var(--color-bg); color:var(--color-accent-700) }
.btn-row{ display:flex; flex-wrap:wrap; gap:12px; margin-top:var(--space-6) }
.ic{ width:20px; height:20px; flex:none; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round }

/* hero */
.hero{ padding-block:clamp(40px,6vw,84px) }
.hero__grid{ display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:clamp(24px,4vw,56px); align-items:end }
.hero h1{ margin:0 0 20px }
.hero__facts{ list-style:none; margin:24px 0 0; padding:0; display:grid; gap:10px }
.hero__facts li{ display:flex; gap:10px; align-items:flex-start; font-size:16.5px }
.hero__facts .ic{ color:var(--color-accent); margin-top:2px }
.hero__side{ border-left:2px solid var(--color-divider); padding-left:clamp(16px,2vw,28px) }
.stat{ font-family:var(--font-heading); font-weight:800; line-height:1; font-size:clamp(40px,5vw,64px); letter-spacing:-0.03em }
.stat + p{ font-size:15px; margin:6px 0 22px; color:var(--color-neutral-700) }
.status{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px; margin-top:28px; border-top:2px solid var(--color-divider); padding-top:14px; font-size:15px }
.status b{ font-family:var(--font-heading) }
.dot{ width:9px; height:9px; background:var(--color-neutral-500); display:inline-block; margin-right:8px }
[data-open=true] .dot{ background:#2e7d32 }

/* stat rail */
.rail{ display:grid; grid-template-columns:repeat(4,1fr) }
.rail > div{ padding:clamp(20px,2.4vw,32px) clamp(16px,2vw,28px); border-left:2px solid var(--color-divider) }
.rail > div:first-child{ border-left:0 }
.rail .k{ font-family:var(--font-heading); font-weight:800; font-size:clamp(26px,3vw,38px); line-height:1; letter-spacing:-0.02em }
.rail p{ margin:8px 0 0; font-size:15px; color:var(--color-neutral-700) }

/* dish cards */
.pans{ display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:var(--color-divider); border:2px solid var(--color-divider) }
.pans > .pan:last-child:nth-child(3n+2){ grid-column:span 2 }
.pan{ background:var(--color-bg); text-decoration:none; color:inherit; display:flex; flex-direction:column }
.pan img{ width:100%; aspect-ratio:4/3; object-fit:cover }
.pan__t{ padding:16px 18px 20px }
.pan__lead{ display:block; font-size:12px; letter-spacing:0.1em; text-transform:uppercase; color:var(--color-accent-700); font-weight:600 }
.pan__title{ display:block; font-family:var(--font-heading); font-weight:800; font-size:22px; margin-top:6px }
.pan__body{ display:block; margin-top:8px; font-size:15px; color:var(--color-neutral-700) }
a.pan:hover .pan__title{ color:var(--color-accent) }

/* steps */
.steps{ counter-reset:s; display:grid; gap:0; border-top:2px solid var(--color-divider) }
.steps > li{ counter-increment:s; list-style:none; display:grid; grid-template-columns:88px minmax(0,1fr) minmax(0,1.1fr); gap:clamp(16px,3vw,40px); padding:clamp(20px,2.5vw,30px) 0; border-bottom:2px solid var(--color-divider) }
.steps > li::before{ content:counter(s,decimal-leading-zero); font-family:var(--font-heading); font-weight:800; font-size:34px; color:var(--color-accent) }
.steps h3{ margin:0 }
.steps p{ margin:0; color:var(--color-neutral-700) }

/* marks grid */
.marks{ display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:var(--color-divider); border:2px solid var(--color-divider) }
.marks > div{ background:var(--color-bg); padding:clamp(20px,2.4vw,30px) }
.marks h3{ font-size:21px; margin:0 0 8px }
.marks p{ margin:0; font-size:15.5px; color:var(--color-neutral-700) }
.band--panel .marks > div{ background:var(--color-surface) }

/* offers */
.offers{ display:grid; grid-template-columns:1fr 1fr; gap:2px; background:var(--color-divider); border:2px solid var(--color-divider) }
.offers > article{ background:var(--color-bg); padding:clamp(22px,2.6vw,34px) }
.offers .when{ font-family:var(--font-heading); font-weight:800; font-size:15px; letter-spacing:0.06em; text-transform:uppercase; color:var(--color-accent); margin:0 0 10px }
.offers ul{ margin:10px 0 0; padding-left:20px; font-size:15.5px; color:var(--color-neutral-700) }
.note{ font-size:14px; color:var(--color-neutral-600); margin-top:14px }

/* gallery */
.gal{ display:grid; grid-template-columns:repeat(4,1fr); gap:2px; background:var(--color-divider); border:2px solid var(--color-divider) }
.gal figure{ position:relative; background:var(--color-neutral-200); aspect-ratio:1/1; overflow:hidden }
.gal img{ width:100%; height:100%; object-fit:cover; position:relative; z-index:1 }
.gal figcaption{ position:absolute; z-index:2; left:0; bottom:0; background:var(--color-text); color:var(--color-bg); font-size:12px; letter-spacing:0.04em; padding:5px 9px; margin:0 }
.gal .tall{ grid-column:span 2; aspect-ratio:2/1 }

/* reviews */
.revs{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:12px }
.revs > figure{ background:var(--color-bg); border:2px solid var(--color-divider); padding:clamp(20px,2.4vw,30px); display:flex; flex-direction:column; gap:12px }
.stars{ display:flex; gap:3px; color:var(--color-accent) }
.stars .ic{ width:17px; height:17px; fill:currentColor; stroke:none }
.revs blockquote{ margin:0; font-size:16.5px; line-height:1.5 }
.revs figcaption{ font-size:14px; color:var(--color-neutral-600); margin:0; position:static }

/* NAP + map */
.two{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(24px,4vw,56px) }
.nap{ margin:0; border-top:2px solid var(--color-divider) }
.nap div{ display:grid; grid-template-columns:180px minmax(0,1fr); gap:16px; padding:14px 0; border-bottom:1px solid var(--color-divider) }
.nap dt{ font-family:var(--font-heading); font-weight:600; font-size:14px; letter-spacing:0.06em; text-transform:uppercase; color:var(--color-neutral-700) }
.nap dd{ margin:0 }
.map{ border:2px solid var(--color-divider); background:var(--color-surface); min-height:340px; display:grid; place-items:center; padding:24px; text-align:center }
.map iframe{ width:100%; height:100%; min-height:340px; border:0; display:block }

/* faq */
.faq{ border-top:2px solid var(--color-divider) }
.faq details{ border-bottom:2px solid var(--color-divider) }
.faq summary{ cursor:pointer; padding:18px 0; font-family:var(--font-heading); font-weight:600; font-size:18.5px; list-style:none; display:flex; justify-content:space-between; gap:16px }
.faq summary::-webkit-details-marker{ display:none }
.faq summary::after{ content:'+'; color:var(--color-accent); font-size:24px; line-height:1 }
.faq details[open] summary::after{ content:'–' }
.faq p{ margin:0 0 18px; max-width:70ch; color:var(--color-neutral-800) }

/* footer + dock */
.ftr{ background:var(--color-text); color:var(--color-bg); padding-block:clamp(40px,5vw,64px) }
.ftr a{ color:var(--color-bg); text-decoration:none }
.ftr a:hover{ text-decoration:underline; color:var(--color-accent-300) }
.ftr__grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:clamp(24px,4vw,48px) }
.ftr h4{ font-size:13px; letter-spacing:0.12em; text-transform:uppercase; margin:0 0 14px; color:var(--color-neutral-400) }
.ftr ul{ list-style:none; margin:0; padding:0; display:grid; gap:9px; font-size:15.5px }
.ftr img{ height:32px; width:auto; filter:brightness(0) invert(1) }
.ftr__note{ margin-top:16px; font-size:15px; color:var(--color-neutral-400); max-width:44ch }
.ftr__bottom{ margin-top:clamp(28px,3vw,44px); padding-top:20px; border-top:1px solid var(--color-neutral-800); display:flex; flex-wrap:wrap; gap:8px 24px; font-size:13.5px; color:var(--color-neutral-400) }
.dock{ position:fixed; left:0; right:0; bottom:0; z-index:45; display:none; background:var(--color-text); border-top:2px solid var(--color-accent) }
.dock a{ flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; padding:11px 4px; color:var(--color-bg); text-decoration:none; font-size:12px; font-weight:600 }
.dock a + a{ border-left:1px solid var(--color-neutral-800) }

@media (max-width:1000px){
  .hero__grid,.two{ grid-template-columns:1fr }
  .hero__side{ border-left:0; border-top:2px solid var(--color-divider); padding-left:0; padding-top:24px; display:grid; grid-template-columns:1fr 1fr; gap:16px }
  .pans,.marks{ grid-template-columns:1fr 1fr }
  .pans > .pan:last-child:nth-child(3n+2){ grid-column:auto }
  .pans > .pan:last-child:nth-child(odd){ grid-column:span 2 }
  .rail{ grid-template-columns:1fr 1fr }
  .rail > div:nth-child(3){ border-left:0 }
  .rail > div:nth-child(n+3){ border-top:2px solid var(--color-divider) }
  .ftr__grid{ grid-template-columns:1fr 1fr }
  .snav__links{ display:none }
  .burger{ display:inline-flex }
  .gal{ grid-template-columns:1fr 1fr }
}
@media (max-width:640px){
  body{ font-size:16px }
  .pans,.marks,.offers,.rail{ grid-template-columns:1fr }
  .pans > .pan:last-child{ grid-column:auto !important }
  .rail > div{ border-left:0; border-top:2px solid var(--color-divider) }
  .rail > div:first-child{ border-top:0 }
  .steps > li{ grid-template-columns:56px minmax(0,1fr); }
  .steps > li p{ grid-column:2 }
  .nap div{ grid-template-columns:1fr; gap:4px }
  .ftr__grid{ grid-template-columns:1fr }
  .btn{ width:100% }
  .snav__in .btn{ width:auto }
  .snav__in .btn-primary span{ display:none }
  .snav__in .btn-primary{ min-width:52px; padding-inline:14px }
  .snav__in{ gap:8px; padding-inline:12px }
  .snav__brand img{ height:28px }
  .burger span{ display:none }
  .topbar > span:first-child{ display:none }
  .topbar{ justify-content:center }
  .dock{ display:flex }
  body{ padding-bottom:64px }
  .gal .tall{ grid-column:span 2; aspect-ratio:2/1 }
}
@media (prefers-reduced-motion:no-preference){
  .rise{ opacity:0; transform:translateY(14px); transition:opacity .5s ease, transform .5s ease }
  .rise.in{ opacity:1; transform:none }
}