/* ============================================================
   Speicher Erfurt – shared design system
   ============================================================ */
:root{
  --bg-dark:#17110c;
  --bg-darker:#0e0a07;
  --bg-cream:#f3ece0;
  --bg-bright:#e7d9c3;
  --accent:#cf9c4f;
  --accent-2:#b6803a;
  --text-cream:#f5eee1;
  --text-dark:#211a12;
  --muted-dark:#a9987f;
  --muted-light:#6f6350;
  --line-dark:rgba(245,238,225,.14);
  --line-light:rgba(33,26,18,.14);
  --head:'Syne',system-ui,sans-serif;
  --mono:'Syne Mono','Syne',monospace;
  --maxw:1500px;
  --gutter:clamp(20px,5vw,72px);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:96px}
body{
  font-family:var(--head);
  background:var(--bg-dark);
  color:var(--text-cream);
  -webkit-font-smoothing:antialiased;
  line-height:1.55;
  overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

h1,h2,h3,h4{font-family:var(--head);font-weight:700;line-height:1.05;letter-spacing:-.01em;overflow-wrap:break-word;hyphens:manual}
h1{font-size:clamp(2.4rem,6.5vw,5.4rem);font-weight:800;text-transform:uppercase}
h2{font-size:clamp(1.9rem,4.4vw,3.6rem);font-weight:800;text-transform:uppercase}
h3{font-size:clamp(1.25rem,2.4vw,1.9rem)}
h4{font-size:clamp(1.05rem,1.6vw,1.3rem);text-transform:uppercase;letter-spacing:.04em}
p{font-size:clamp(1rem,1.15vw,1.12rem)}

/* ---------- utilities ---------- */
section{position:relative}
.inner{max-width:var(--maxw);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.narrow{max-width:900px}
.theme-dark{background:var(--bg-dark);color:var(--text-cream)}
.theme-darker{background:var(--bg-darker);color:var(--text-cream)}
.theme-cream{background:var(--bg-cream);color:var(--text-dark)}
.theme-bright{background:var(--bg-bright);color:var(--text-dark)}
.pad{padding-top:clamp(60px,9vw,140px);padding-bottom:clamp(60px,9vw,140px)}
.eyebrow{font-family:var(--mono);text-transform:uppercase;letter-spacing:.28em;font-size:.72rem;color:var(--accent);display:inline-block;margin-bottom:1.4rem}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--head);font-weight:600;text-transform:uppercase;letter-spacing:.08em;font-size:.8rem;padding:.95rem 1.8rem;border-radius:999px;transition:transform .25s ease,background .25s ease,color .25s ease,border-color .25s;cursor:pointer;border:1.5px solid transparent}
.btn-primary{background:var(--accent);color:#1a130a}
.btn-primary:hover{background:var(--text-cream);transform:translateY(-2px)}
.btn-ghost{border-color:currentColor;color:inherit}
.btn-ghost:hover{transform:translateY(-2px);background:currentColor}
.btn-ghost:hover span{mix-blend-mode:difference}

/* ---------- header ---------- */
header.site{position:fixed;top:0;left:0;right:0;z-index:100;transition:background .35s ease,backdrop-filter .35s ease,border-color .35s ease;border-bottom:1px solid transparent}
header.site.solid{background:rgba(14,10,7,.88);backdrop-filter:blur(14px);border-bottom-color:var(--line-dark)}
.nav{max-width:var(--maxw);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:clamp(14px,1.4vw,20px) var(--gutter)}
.brand img{height:clamp(44px,4.4vw,66px);width:auto;filter:brightness(0) invert(1)}
.menu{display:flex;align-items:center;gap:clamp(18px,2vw,34px);list-style:none}
.menu a{font-size:.82rem;text-transform:uppercase;letter-spacing:.12em;font-weight:600;color:var(--text-cream);opacity:.86;position:relative;padding:4px 0}
.menu a::after{content:"";position:absolute;left:0;bottom:-2px;height:1.5px;width:0;background:var(--accent);transition:width .3s ease}
.menu a:hover,.menu a[aria-current]{opacity:1}
.menu a:hover::after,.menu a[aria-current]::after{width:100%}
.nav-right{display:flex;align-items:center;gap:18px}
.ig{display:inline-grid;place-items:center;width:38px;height:38px;border:1px solid var(--line-dark);border-radius:50%;transition:background .3s,border-color .3s}
.ig svg{width:18px;height:18px;fill:var(--text-cream)}
.ig:hover{background:var(--accent);border-color:var(--accent)}
.ig:hover svg{fill:#1a130a}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px}
.burger span{width:26px;height:2px;background:var(--text-cream);transition:.3s}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.m-overlay{position:fixed;inset:0;z-index:99;background:var(--bg-darker);display:flex;flex-direction:column;justify-content:center;gap:6px;padding:0 var(--gutter);transform:translateY(-100%);transition:transform .5s cubic-bezier(.7,0,.2,1);visibility:hidden}
.m-overlay.open{transform:translateY(0);visibility:visible}
.m-overlay a{font-size:clamp(1.8rem,7vw,3rem);text-transform:uppercase;font-weight:800;letter-spacing:-.01em;padding:.25rem 0;border-bottom:1px solid var(--line-dark)}
.m-overlay a:last-child{border-bottom:0}
.m-social{margin-top:2.2rem;font-family:var(--mono);letter-spacing:.2em;text-transform:uppercase;font-size:.8rem;color:var(--accent)}

/* ---------- sub-page hero ---------- */
.subhero{padding-top:clamp(120px,16vw,220px);padding-bottom:clamp(48px,7vw,96px)}
.subhero .backlink{font-family:var(--mono);text-transform:uppercase;letter-spacing:.18em;font-size:.72rem;color:var(--accent);display:inline-flex;gap:.5rem;margin-bottom:1.6rem;transition:gap .25s}
.subhero .backlink:hover{gap:.9rem}
.subhero p.lead{font-size:clamp(1.1rem,1.6vw,1.4rem);max-width:60ch;margin-top:1.4rem;color:var(--muted-dark)}

/* ---------- prose ---------- */
.prose{max-width:66ch}
.prose.wide{max-width:80ch}
.prose h2{font-size:clamp(1.5rem,3vw,2.4rem);margin:2.6rem 0 1rem}
.prose h3{font-size:clamp(1.2rem,2vw,1.6rem);margin:2rem 0 .8rem}
.prose h2:first-child,.prose h3:first-child{margin-top:0}
.prose p{margin:0 0 1.15rem;line-height:1.7}
.prose p.first::first-letter{font-size:3.4em;float:left;line-height:.8;padding:.05em .12em 0 0;color:var(--accent);font-weight:800}
.prose a{color:var(--accent-2);border-bottom:1px solid currentColor}
.prose strong{font-weight:700}
.prose blockquote{border-left:3px solid var(--accent);padding:.4rem 0 .4rem 1.4rem;margin:1.8rem 0;font-style:italic;font-size:1.15rem}
.prose ul{margin:0 0 1.15rem 1.2rem;display:grid;gap:.5rem}

.note{border:1px dashed var(--accent);border-radius:12px;padding:1rem 1.2rem;margin:2rem 0;font-size:.92rem;color:var(--muted-light);background:rgba(207,156,79,.06)}
.note b{color:var(--accent-2)}

/* ---------- story article ---------- */
.story-hero{position:relative;padding-top:clamp(150px,20vw,260px);padding-bottom:clamp(40px,6vw,80px);overflow:hidden;color:var(--text-cream)}
.story-hero .cover{position:absolute;inset:0;z-index:-2}
.story-hero .cover img{width:100%;height:100%;object-fit:cover}
.story-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(14,10,7,.55) 0%,rgba(14,10,7,.72) 60%,rgba(14,10,7,.9) 100%)}
.story-hero .backlink{font-family:var(--mono);text-transform:uppercase;letter-spacing:.18em;font-size:.72rem;color:var(--accent);display:inline-flex;gap:.5rem;margin-bottom:1.6rem;transition:gap .25s}
.story-hero .backlink:hover{gap:.9rem}
.story-hero h1{max-width:18ch}
.story-hero .meta{font-family:var(--mono);text-transform:uppercase;letter-spacing:.18em;font-size:.72rem;color:var(--accent);margin-top:1.2rem}
.story-nav{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:clamp(40px,5vw,70px);border-top:1px solid var(--line-light);padding-top:2rem}
.story-nav a{font-weight:600;text-transform:uppercase;letter-spacing:.04em;font-size:.9rem;transition:color .25s}
.story-nav a:hover{color:var(--accent-2)}
.story-nav a.prev::before{content:"← "}
.story-nav a.next{margin-left:auto}
.story-nav a.next::after{content:" →"}

/* ---------- menu / price list ---------- */
.menu-cats{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(30px,4vw,64px)}
.menu-cat h3{margin-bottom:1rem;padding-bottom:.6rem;border-bottom:2px solid var(--accent);display:inline-block}
.menu-row{display:flex;align-items:baseline;gap:1rem;padding:.85rem 0;border-bottom:1px solid var(--line-light)}
.theme-dark .menu-row,.theme-darker .menu-row{border-bottom-color:var(--line-dark)}
.menu-row .n{font-size:clamp(1.02rem,1.4vw,1.2rem);font-weight:600}
.menu-row .n small{display:block;font-weight:400;font-size:.8rem;color:var(--muted-light);letter-spacing:0;text-transform:none;margin-top:.15rem}
.theme-dark .menu-row .n small,.theme-darker .menu-row .n small{color:var(--muted-dark)}
.menu-row .d{flex:1;border-bottom:1px dotted currentColor;opacity:.35;transform:translateY(-4px)}
.menu-row .p{font-family:var(--mono);color:var(--accent-2);white-space:nowrap}
.theme-dark .menu-row .p,.theme-darker .menu-row .p{color:var(--accent)}

/* ---------- story index cards ---------- */
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,2.6vw,40px)}
.pcard{display:block;transition:transform .3s}
.pcard:hover{transform:translateY(-5px)}
.pcard .thumb{aspect-ratio:2/3;border-radius:12px;overflow:hidden;background:#2a2018;box-shadow:0 24px 44px -26px rgba(50,32,10,.5)}
.pcard .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.pcard:hover .thumb img{transform:scale(1.06)}
.pcard .t{margin-top:1rem;font-size:1.2rem;font-weight:700;text-transform:uppercase}
.pcard .x{margin-top:.4rem;color:var(--muted-light);font-size:.95rem;line-height:1.5}
.pcard .m{margin-top:.5rem;font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-2)}

/* ---------- footer ---------- */
footer.site{background:var(--bg-darker);color:var(--text-cream)}
.foot{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:clamp(30px,4vw,60px);padding-top:clamp(56px,7vw,96px);padding-bottom:clamp(40px,5vw,64px)}
.foot h2{font-size:clamp(1.8rem,3vw,2.8rem);margin-bottom:1rem}
.foot .tag{font-family:var(--mono);letter-spacing:.14em;text-transform:uppercase;font-size:.74rem;color:var(--muted-dark);max-width:34ch;line-height:1.7}
.foot h4{color:var(--accent);margin-bottom:1rem;font-size:1rem}
.foot a.f-link{display:block;opacity:.82;padding:.28rem 0;transition:opacity .25s,padding-left .25s}
.foot a.f-link:hover{opacity:1;padding-left:6px}
.foot .hours-mini{list-style:none;font-size:.92rem}
.foot .hours-mini li{display:flex;justify-content:space-between;padding:.2rem 0;color:var(--muted-dark);max-width:240px}
.foot .hours-mini li b{color:var(--text-cream);font-weight:600}
.foot-bottom{border-top:1px solid var(--line-dark);padding:1.6rem var(--gutter);max-width:var(--maxw);margin:0 auto;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-dark)}
.foot-bottom a{color:var(--muted-dark);transition:color .25s}
.foot-bottom a:hover{color:var(--accent)}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s ease}
.reveal.in{opacity:1;transform:none}

/* ---------- overflow safety ---------- */
.foot>*,.menu-cats>*,.card-grid>*{min-width:0}
.prose{overflow-wrap:break-word}
.prose a{word-break:break-word}
.menu-row .n{min-width:0}
.story-hero h1,.subhero h1,.prose h2{overflow-wrap:break-word}
.subhero h1,.story-hero h1{font-size:clamp(1.45rem,6vw,3.4rem)}

/* ---------- responsive ---------- */
@media(max-width:1024px){
  .card-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:900px){
  .menu,.nav-right .ig{display:none}
  .burger{display:flex}
  .menu-cats{grid-template-columns:1fr;gap:0}
  .card-grid{grid-template-columns:repeat(2,1fr)}
  .foot{grid-template-columns:1fr 1fr}
  .foot .brand-col{grid-column:1/-1}
}
@media(max-width:640px){
  .card-grid{grid-template-columns:1fr}
  .foot{grid-template-columns:1fr}
  .subhero{padding-top:clamp(104px,26vw,180px)}
}
@media(max-width:560px){
  :root{--gutter:clamp(16px,5vw,72px)}
  h1{font-size:clamp(1.85rem,8.5vw,5.4rem)}
  h2{font-size:clamp(1.5rem,7vw,3.6rem)}
  .prose h2{font-size:clamp(1.15rem,5vw,2.4rem)}
  .story-nav{flex-direction:column;align-items:flex-start;gap:12px}
  .story-nav a.next{margin-left:0}
  .menu-cat h3{font-size:1.3rem}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
}