/* morning cafe: oat paper, roasted brown, sage; film first, then a printed-menu card and a horizontal photo rail */
:root{--oat:#efe6d8;--roast:#3b2416;--ink:#21140c;--sage:#7c8b6a;--mu:#7a6553;--crema:#c98a52;
--disp:'Playfair Display',Georgia,serif;--body:'Manrope',system-ui,sans-serif;color-scheme:light}
*{box-sizing:border-box}html{background:var(--ink)}
body{margin:0;background:var(--ink);color:var(--ink);font:400 17px/1.6 var(--body)}
a{color:inherit}
.loader{background:var(--ink);color:var(--oat)}.lw{font:700 36px var(--disp);font-style:italic}
.steam{position:absolute;inset:0;background:radial-gradient(60% 50% at 50% 50%,transparent 40%,rgba(27,18,12,.55)),linear-gradient(180deg,rgba(27,18,12,.5),transparent 30%)}
.nav{position:fixed;z-index:30;top:44px;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:16px max(16px,4vw);color:var(--oat)}
.logo{display:flex;align-items:center;gap:10px;font:700 26px var(--disp);font-style:italic;text-decoration:none}
.bean{width:16px;height:22px;border-radius:50%;background:var(--crema);position:relative;transform:rotate(25deg)}
.bean::after{content:"";position:absolute;left:7px;top:3px;bottom:3px;width:2px;border-radius:2px;background:var(--roast)}
.nav-links{display:flex;gap:28px}.nav-links a{text-decoration:none;font-weight:600}
.nav-toggle{display:none;background:none;border:0;width:42px;height:42px;padding:10px;cursor:pointer}.nav-toggle span{display:block;height:2px;background:var(--oat);margin:6px 0}
@media(max-width:760px){.nav-toggle{display:block}.nav-links{display:none;position:absolute;top:100%;left:16px;right:16px;flex-direction:column;background:var(--roast);padding:22px;border-radius:18px}.nav-links.open{display:flex}}
.ov{color:var(--oat)}
.o-hero{display:flex;flex-direction:column;justify-content:center;padding:0 max(16px,6vw)}
h1{font:700 clamp(54px,9vw,138px)/.9 var(--disp);letter-spacing:-.03em;margin:0 0 22px;text-shadow:0 6px 40px rgba(0,0,0,.45)}
h1 em{font-weight:400;color:#f1c79c}
.o-hero p{max-width:34ch;font-size:19px;margin:0;opacity:.9}
.o-side{display:flex;flex-direction:column;justify-content:flex-end;padding:0 max(16px,6vw) 12vh}
.o-side.r{align-items:flex-end;text-align:right}
.tag{font:700 12px var(--body);letter-spacing:.3em;text-transform:uppercase;color:#f1c79c;margin:0 0 10px}
.o-side h2{font:400 clamp(30px,4vw,58px)/1.08 var(--disp);font-style:italic;margin:0;max-width:16ch;text-shadow:0 4px 30px rgba(0,0,0,.55)}
main{position:relative;z-index:10}
.track{height:520vh}
.paper{background:var(--oat);border-radius:30px 30px 0 0}
.karta{max-width:980px;margin:0 auto;padding:clamp(70px,10vw,130px) max(16px,4vw)}
.title{font:700 clamp(80px,16vw,220px)/.85 var(--disp);font-style:italic;letter-spacing:-.04em;margin:0 0 56px;color:var(--roast);text-align:center}
.cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:56px}
h3{font:700 28px var(--disp);margin:0 0 18px;color:var(--roast)}
.row{display:flex;align-items:baseline;gap:10px;margin:0 0 12px;font-size:18px}
.row::after{content:"";order:1;flex:1;border-bottom:1px dotted var(--mu)}
.row b{order:2;font:700 20px var(--disp);color:var(--crema);font-variant-numeric:tabular-nums}
.note{text-align:center;color:var(--mu);margin-top:36px}
@media(max-width:700px){.cols{grid-template-columns:1fr;gap:36px}}
.strip{height:320vh;position:relative}
.sticky{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;flex-direction:column;justify-content:center;gap:40px;background:var(--roast);color:var(--oat)}
.strip-t{font:400 clamp(34px,5vw,72px)/1.02 var(--disp);font-style:italic;margin:0;padding:0 max(16px,5vw)}
.rail{display:flex;gap:24px;padding:0 max(16px,5vw);will-change:transform;width:max-content}
.rail figure{margin:0;height:min(52vh,460px);flex:none;border-radius:18px;overflow:hidden}
.rail img{height:100%;width:auto;display:block}
.godz{max-width:1100px;margin:0 auto;padding:clamp(64px,9vw,110px) max(16px,4vw);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px}
dl{display:grid;grid-template-columns:auto 1fr;gap:8px 20px;margin:0}dt{color:var(--mu)}dd{margin:0;font-weight:700}
.godz p{margin:0 0 8px}.muted{color:var(--mu)}
.btn{display:inline-block;margin-top:10px;background:var(--roast);color:var(--oat);text-decoration:none;font-weight:700;padding:14px 26px;border-radius:99px;transition:transform .2s}
.btn:hover,.btn:focus-visible{transform:translateY(-3px)}
@media(max-width:820px){.godz{grid-template-columns:1fr}}
.foot{padding:24px 16px 40px;text-align:center;color:var(--mu)}
a:focus-visible{outline:2px solid var(--crema);outline-offset:3px}