#badge{min-width:1.6em;padding:2px 7px;border-radius:var(--r-pill);background:var(--accent);color:var(--on-accent);text-align:center;font-size:var(--t-xs)}
.btn{padding-inline:var(--s-5)}
.filters{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--s-4);max-width:900px;margin-inline:auto}
.f{display:grid;flex:1 1 200px;min-width:0}
input:not([type=checkbox],[type=radio],[type=range]),select,textarea{border-radius:var(--r-pill);padding-inline:18px;background:var(--bg)}
.count,.note,.empty p,.blurb,.opt{margin:0;font-size:var(--t-sm);color:var(--ink-2)}
.count{margin:var(--s-5) auto;text-align:center}
.products,.lines{list-style:none;margin:0;padding:0}
.products{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr))}
@media (min-width:360px) and (max-width:599px){.products{grid-template-columns:repeat(2,minmax(0,1fr))}.products .pic{aspect-ratio:1}.products .prod h3{font-size:1.1rem}.products .field{grid-template-columns:1fr}.products .blurb{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:var(--t-sm)}}
.prod{display:grid;align-content:start;gap:var(--s-3);min-width:0}
.pic{position:relative;display:grid;place-items:center;aspect-ratio:4/5;border-radius:var(--r-card);background:var(--sunk);color:var(--ink-2);overflow:hidden}
.pic img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.prod:hover .pic img{transform:scale(1.03)}
.tag{position:absolute;top:12px;left:12px;margin:0;padding:4px 10px;border-radius:var(--r-pill);background:var(--sunk-0);font:600 .68rem/1.2 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.prod h3{font:500 1.6rem/1.12 var(--serif);margin-top:var(--s-2)}
.row{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-2)}
.price{font:600 1.05rem/1.2 var(--sans)}
.st{margin:0;font:600 var(--t-xs)/1.2 var(--sans)}.good{color:var(--good)}.warn{color:color-mix(in srgb,var(--warn) 80%,var(--ink))}.bad{color:var(--bad)}
.prod .btn{margin-top:var(--s-2)}
.prod .btn-secondary{border-color:var(--accent);color:var(--accent)}
.prod .btn-secondary:hover:not(:disabled){background:var(--accent);color:var(--on-accent)}
.field{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:var(--s-3)}
.empty{display:grid;gap:var(--s-2);justify-items:start;padding-block:var(--s-4)}
.empty .empty-h,.sum .tot{font:500 1.5rem/1.3 var(--serif);color:var(--ink)}
.cart{position:fixed;z-index:40;top:0;right:0;bottom:0;width:min(420px,100vw);display:flex;flex-direction:column;gap:var(--s-3);padding:var(--s-5);background:var(--surface);box-shadow:var(--shadow-pop);transform:translateX(104%);visibility:hidden;transition:transform var(--dur-3) var(--ease),visibility 0s linear var(--dur-3);overflow:auto}
.cart.open{transform:none;visibility:visible;transition:transform var(--dur-3) var(--ease)}
.cart:focus{outline:none}
.carthead{display:flex;justify-content:space-between;align-items:center}
.cart h2{font-size:2rem}
.scrim{position:fixed;z-index:30;inset:0;background:var(--scrim)}
.lines li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s-1) var(--s-3);padding-block:var(--s-3);border-bottom:1px solid var(--line)}
.ln{font-weight:600;overflow-wrap:anywhere}
.step{display:inline-flex;justify-self:start;align-items:center;border:1px solid var(--edge);border-radius:var(--r-pill)}
.step button{width:44px;min-height:44px;border:0;background:none;color:var(--ink);font:600 var(--t-lg)/1 var(--sans);cursor:pointer}
.step button:disabled{opacity:.45}
.step output{min-width:2ch;text-align:center}
.sum{display:grid;grid-template-columns:1fr auto;gap:var(--s-1) 0;margin:0}
.sum dt{color:var(--ink-2)}.sum dd{margin:0;padding-left:var(--s-3);text-align:right}
.sum .tot{padding-top:var(--s-2);border-top:1px solid var(--line)}
.co,.fields{display:grid;gap:var(--s-3)}
dialog[open]{width:min(520px,calc(100vw - 32px));max-height:calc(100vh - 32px);overflow:auto}
.acts{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--s-3);padding-top:var(--s-3);border-top:1px solid var(--line)}
.toasts{z-index:60}
.toast{margin:0;font-size:var(--t-sm)}
.hero .arch img{box-shadow:0 30px 60px -24px #0005}
html[data-l-fs=story] .arch img{max-height:56vh}
h2{text-wrap:balance}
.occs .occ b{font-size:min(1.7rem,5.6vw);hyphens:auto}
html[lang]:root :is(h1,h2) em{font-style:italic}
.hero:not(.has-ks){background:var(--sunk-0)}
.hero .badge{rotate:-4deg;font:italic 1.3rem/1.1 var(--serif)}
html:is([data-l-type],[data-l-head=caps])[lang] :is(h1,h2,h3){font-family:var(--serif);font-weight:500;text-transform:none;letter-spacing:-.01em}
html:is([data-l-fs=story],[data-l-fs=catalogue],[data-l-fs=minimal])[lang] .hero .herotext h1{font-size:clamp(2rem,1rem + 3.6vw,4rem);line-height:1.04;max-width:20ch;text-wrap:balance}
html:is([data-l-fs=story],[data-l-fs=catalogue],[data-l-fs=type]) .herotext{margin-bottom:var(--s-6)}
@media (min-width:900px){html[data-l-fs=story] .herotext{grid-template-columns:1fr auto;align-items:end}html[data-l-fs=story] .heroacts{grid-area:1/2/3}}