/* Website base (kit-spec-1): layout and shape components on the house tokens only. */
.top{border-bottom:1px solid var(--line)}
.nav,.nav ul{display:flex;flex-wrap:wrap;column-gap:var(--s-5)}
.nav ul,.items,.hours{margin:0;padding:0;list-style:none}
.brand{display:flex;align-items:center;min-height:52px;margin:0 auto 0 0;font:700 var(--t-lg)/1.1 var(--serif);letter-spacing:-.02em;color:var(--ink);text-decoration:none}
.nav ul a{display:flex;align-items:center;min-height:52px;border-bottom:2px solid transparent;color:var(--ink-2);font:600 var(--t-sm)/1 var(--sans);text-decoration:none}
.nav ul a:hover,.nav ul a[aria-current=page]{color:var(--ink)}
.nav ul a[aria-current=page]{border-color:var(--accent)}
[tabindex="-1"]:focus{outline:none}
.kicker,.caps{margin:0}
.caps{font:650 var(--t-xs)/1.2 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.more,address a,.links a{display:inline-flex;align-items:center;min-height:44px}
.more{font-weight:600}
/* page structure (section contract v1): defaults only, inside the layer, so the shared skeletons (layouts.css, unlayered) can rearrange them */
@layer kit-default{
.head{padding-block:var(--s-8) var(--s-7)}
.hero-in{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:var(--s-7);align-items:center}
.sec{display:grid;gap:var(--s-5) var(--s-7);padding-block:var(--s-7);border-top:1px solid var(--line)}
[data-main]>.wrap{width:100%}
@media (max-width:760px){.hero-in{grid-template-columns:minmax(0,1fr)}.hero-in .kv-art{min-height:180px}}
}
.head-main{display:grid;gap:var(--s-3);justify-items:start;min-width:0}
.head-main>:empty{display:none}
.hero h1{max-width:16ch;font-size:var(--t-hero);letter-spacing:-.025em}
.lead{max-width:58ch;margin:0;font:400 var(--t-lg)/1.45 var(--serif);color:var(--ink-2)}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2) var(--s-5);margin-top:var(--s-3)}
.actions .btn,.form .btn-primary{min-height:48px;padding-inline:var(--s-5);font-size:var(--t-md)}
.visit{display:grid;gap:var(--s-3);align-content:start;min-width:0;padding-top:var(--s-5);border-top:1px solid var(--line)}
.hours div{display:flex;justify-content:space-between;gap:var(--s-4);padding-block:var(--s-2);border-bottom:1px solid var(--line)}
.hours dd{margin:0;text-align:right}
address{display:grid;justify-items:start;font-style:normal;overflow-wrap:anywhere}
.sec>*,.contact>*{min-width:0}
.sec-h,.sec-c{display:grid;gap:var(--s-2);align-content:start}
.sec-c{gap:var(--s-4)}
.sec-c p{margin:0}
.sec-c>.more{justify-self:start}
@media (min-width:900px){
.contact .visit{padding:0 0 0 var(--s-5);border-top:0;border-left:1px solid var(--line)}
.contact{grid-template-columns:minmax(0,34rem) minmax(0,300px);justify-content:space-between}}
@media (min-width:960px){.sec:not(.bare){grid-template-columns:minmax(0,16rem) minmax(0,1fr)}}
.items li{display:grid;gap:var(--s-1);padding-block:var(--s-4)}
.items li:first-child{padding-top:0}
.items li+li{border-top:1px solid var(--line)}
.row{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-4)}
.items h3{min-width:0;font-size:var(--t-lg)}
.price{flex:none;font:700 var(--t-lg)/1.1 var(--serif)}
.txt,.note,.hint,.hours dt,.status p,.quotes figcaption,.facts dd{color:var(--ink-2)}
.note,.hint,.quotes figcaption,.facts dd{font-size:var(--t-sm)}
.quotes,.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:var(--s-5);margin:0}
.quotes figure{display:grid;gap:var(--s-3);align-content:start;margin:0;padding-top:var(--s-4);border-top:2px solid var(--ink)}
.quotes blockquote{margin:0;font:400 var(--t-lg)/1.45 var(--serif)}
.facts{grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr))}
.facts dt{font:700 var(--t-2xl)/1.1 var(--serif)}
.facts dd{margin:var(--s-1) 0 0}
.contact{display:grid;gap:var(--s-7)}
.form{display:grid;gap:var(--s-4)}
.field{display:grid;gap:6px}
.field p{margin:0}
.error{display:flex;align-items:center;gap:6px}
.error::before{content:"!";display:grid;place-items:center;flex:none;width:16px;height:16px;border:1.5px solid;border-radius:50%;font:700 11px/1 var(--sans)}
textarea{resize:vertical}
.form .btn{justify-self:start}
.status:not(:empty),.empty{display:grid;gap:var(--s-3);justify-items:start;padding-block:var(--s-5);border-block:1px solid var(--line)}
.empty .t{font:700 var(--t-lg)/1.2 var(--serif)}
.foot{border-top:2px solid var(--ink);font-size:var(--t-sm);color:var(--ink-2)}
.foot-in{display:grid;gap:var(--s-1);padding-block:var(--s-6) var(--s-7)}
.foot p{margin:0}
.foot .brand{min-height:0}
.links{display:flex;flex-wrap:wrap;column-gap:var(--s-5)}

html[data-l-fs=block] .head-main :is(.more,.visit .caps,.visit dt,.visit dd,.visit a){color:var(--on-accent)}
@media (max-width:760px){html[data-l-nav=split] [data-sec=nav] .nav{grid-template-columns:minmax(0,1fr);row-gap:0}html[data-l-nav=split] [data-sec=nav] .nav>:is(:first-child,:last-child){grid-column:1;grid-row:auto;justify-self:start}html[data-l-fs=minimal] [data-sec=nav] .nav>ul:last-child:not(:first-child){position:static;justify-content:center}html[data-l-fs=sidebar] [data-sec=nav] .nav ul{display:flex}}
/* variety off (no seed): the opening-hours aside keeps today's place, a right-hand column beside the hero text */
@media (min-width:900px){
html:not([data-kv-art]) .has-aside [data-hero-text]{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,300px);column-gap:var(--s-6);align-items:end}
html:not([data-kv-art]) .has-aside [data-hero-text] > :not(aside){grid-column:1}
html:not([data-kv-art]) .has-aside [data-hero-text] > aside{grid-column:2;grid-row:1 / span 4;align-self:start;padding:0 0 0 var(--s-5);border-top:0;border-left:1px solid var(--line)}
}

@media (min-width:960px){
html[data-l-fs=catalogue] #head [data-hero-text]{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--s-6);row-gap:var(--s-4);align-items:start}
html[data-l-fs=catalogue] #head [data-hero-text] > :is(.kicker,h1){grid-column:1 / -1;grid-row:auto;max-width:none}
html[data-l-fs=catalogue] #head [data-hero-text] > .lead{grid-column:1;grid-row:3;font-size:var(--t-md)}
html[data-l-fs=catalogue] #head [data-hero-text] > .actions{grid-column:2;grid-row:3;margin-top:0;align-self:start}
html[data-l-fs=catalogue] #head [data-hero-text] > aside{grid-column:3;grid-row:3;padding:0 0 0 var(--s-5);border-top:0;border-left:1px solid var(--line)}
html[data-l-fs=story] [data-main]{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:var(--s-6);align-items:start;padding-inline:max(0px,(100% - var(--page)) / 2)}
html[data-l-fs=story] [data-main] > section{grid-column:1 / -1}
html[data-l-fs=story] [data-main] > #head{grid-column:1;grid-row:1;padding-right:0}
html[data-l-fs=story] [data-main] > [data-sec=story]{grid-column:2;grid-row:1;align-self:start;grid-template-columns:minmax(0,1fr);margin:var(--s-7) var(--gutter) 0 0;padding:var(--s-6);border:0;border-radius:var(--r-card);background:var(--sunk-0,var(--sunk))}
html[data-l-fs=mosaic] #head{padding-block:var(--s-7) var(--s-6)}
html[data-l-fs=mosaic] #head .hero-in{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-6)}
html[data-l-fs=mosaic] #head .kv-art[data-hero-media]{position:relative;inset:auto;z-index:auto;order:1;height:170px;min-height:0;opacity:1;border-radius:var(--r-card)}
html[data-l-fs=mosaic] #head [data-hero-text]{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,300px);column-gap:var(--s-7);max-width:none;padding:0;border-radius:0;background:none}
html[data-l-fs=mosaic] #head [data-hero-text] > :not(aside){grid-column:1}
html[data-l-fs=mosaic] #head [data-hero-text] > aside{grid-column:2;grid-row:1 / span 4;align-self:start;padding:0 0 0 var(--s-5);border-top:0;border-left:1px solid var(--line)}
}

.hero-photo{position:absolute;inset:0;z-index:1;margin:0;overflow:hidden;background:transparent}
.hero-photo img{display:block;width:100%;height:100%;object-fit:cover}
.hero-credit{position:absolute;inset:auto 0 0 auto;z-index:2;margin:0;padding:2px 8px;font-size:.7rem;line-height:1.5;color:#fff;background:rgba(0,0,0,.62);border-top-left-radius:8px}
.hero-credit:empty{display:none}.hero-credit a{color:inherit;display:inline-flex;align-items:center;min-height:44px}
.hero-cta{margin:var(--s-4,16px) 0 0}
html[data-l-fs] [data-sec=hero] [data-hero-media] > .hero-photo:not([hidden]){display:block}
html .head:not(.hero)[data-sec=hero] [data-hero-media] > .hero-photo{display:none} /* the photo shows on the page marked hero (home) only, as today */

.sec-photo{margin:0;border-radius:var(--r-card,16px);overflow:hidden;background:var(--sunk);position:relative;min-width:0}
.sec-photo img{display:block;width:100%;height:clamp(180px,32vh,40vh);object-fit:cover}
.sec-credit{position:absolute;inset:auto 0 0 auto;margin:0;padding:0 8px;font-size:.7rem;color:#fff;background:rgba(0,0,0,.62);border-top-left-radius:8px}.sec-credit a{color:inherit;display:inline-flex;align-items:center;min-height:44px}
.sec-body{display:grid;gap:var(--s-5,20px)}
@media (min-width:860px){.has-photo .sec-body{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);align-items:start}}
@media (max-width:859px){.sec-photo img{height:clamp(150px,24vh,30vh)}}
html[data-l-fs=block] [data-sec=hero] [data-hero-text] .kicker{color:var(--on-accent,#fff);background:transparent;box-shadow:inset 0 0 0 1px currentColor}
/* overlay / minimal: the heading over the content, the price list in two columns */
@media (min-width:960px){html:is([data-l-fs=overlay],[data-l-fs=minimal]) [data-main] > .sec:not(.bare){grid-template-columns:minmax(0,1fr)}html:is([data-l-fs=overlay],[data-l-fs=minimal]) [data-main] > [data-sec=list] [data-list]{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--s-7)}}
.local-note{margin:var(--s-2) 0 0;font-size:var(--t-sm);color:var(--ink-2)}


/* tap-targets: comfortable phone taps -- the sizes win on phones, the page's own layout stays */
@media (max-width: 600px) {
  a[href]:not(p a, li p a, blockquote a, figcaption a, td a, dd a, label a), button, [role=button], [onclick], summary, select, input:not([type=hidden], [type=checkbox], [type=radio], [type=range]) { min-height: 44px !important; min-width: 44px !important; }
  :where(a[href]:not(p a, li p a, blockquote a, figcaption a, td a, dd a, label a)) { display: inline-flex; align-items: center; justify-content: center; }
  input, select, textarea { font-size: max(16px, 1em) !important; }
}