/* Slamena Buda - WebCreator NG project stylesheet
   Source: design/index.html static mockup (converted 2026-07-20).
   Palette: espresso brown #3D1B0D + straw gold #EFD281 + cream paper.
   NOTE: no data-aos fade-left/fade-right anywhere (mobile horizontal overflow rule). */

:root{
  /* palette: slamena old-site espresso brown #3d1b0d + straw gold #efd281 + cream */
  --paper:#F6F1E5;
  --paper-2:#EFE7D5;
  --paper-3:#E7DCC4;
  --ink:#2C1D11;
  --ink-soft:#6E5B45;
  --brown:#3D1B0D;
  --brown-700:#54281A;
  --brown-900:#2A1409;
  --straw:#EFD281;          /* pale straw gold, pops on dark/brown */
  --straw-deep:#C7822F;     /* warm amber accent. DECORATION ONLY: rules, borders, fills */
  /* Text colours. #C7822F measures 2.16:1 to 2.80:1 on these creams, so it fails
     WCAG AA everywhere it was used for words, and it carries prices, dates and
     every section label. These pass: 4.90:1 worst case for body-size text,
     3.32:1 for the large hero italic (large text needs 3:1). */
  --straw-text:#7A4E1B;
  --straw-hero:#B87526;
  --line:#DCD0B8;
  --paper-line:rgba(44,29,17,.12);
  --r:3px;
  --maxw:1280px;
  --ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:"Hanken Grotesk",system-ui,sans-serif;font-size:17px;line-height:1.62;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
h1,h2,h3{font-family:"Playfair Display",Georgia,serif;font-weight:700;line-height:1.1;margin:0;letter-spacing:-.01em;color:var(--brown)}
p{margin:0}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--straw-text);display:inline-flex;align-items:center;gap:13px}
.eyebrow::before{content:"";width:34px;height:2px;background:var(--straw-deep)}
.lead{color:var(--ink-soft);max-width:60ch}
em{font-style:italic}

.grain{position:fixed;inset:0;z-index:90;pointer-events:none;opacity:.045;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

.arch{border-radius:48% 48% var(--r) var(--r) / 20% 20% 0 0;overflow:hidden}

.btn{display:inline-flex;align-items:center;gap:.55em;font-weight:600;font-size:13px;letter-spacing:.1em;text-transform:uppercase;
  padding:15px 28px;border-radius:var(--r);border:1px solid transparent;cursor:pointer;white-space:nowrap;
  transition:transform .25s var(--ease),background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease)}
.btn-primary{background:var(--brown);color:var(--paper)}
.btn-primary:hover{background:var(--brown-700);transform:translateY(-2px)}
.btn-primary:active{transform:translateY(0)}
.btn-ghost{background:transparent;color:var(--brown);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--straw-deep);color:var(--straw-text);transform:translateY(-2px)}
.btn-straw{background:var(--straw);color:var(--brown)}
.btn-straw:hover{background:#f4dd9a;transform:translateY(-2px)}
.btn-lg{padding:17px 32px;font-size:16px}
.link-underline{color:var(--brown);font-weight:600;border-bottom:2px solid var(--straw-deep);padding-bottom:3px}
.link-underline:hover{color:var(--straw-text)}

/* ---------- NAV ---------- */
header.nav{position:sticky;top:0;z-index:100;background:rgba(246,241,229,.86);backdrop-filter:blur(12px) saturate(120%);border-bottom:1px solid var(--paper-line)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:92px}
.brand{display:flex;flex-direction:column;line-height:1}
.brand-logo{height:72px;width:auto;display:block}
.brand .name{font-family:"Playfair Display",Georgia,serif;font-weight:700;font-size:24px;color:var(--brown)}
.brand .sub{font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--straw-text);margin-top:6px}
.nav-links{display:flex;align-items:center;gap:26px}
.nav-links a.navlink{font-size:12.5px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--ink);position:relative}
.nav-links a.navlink::after{content:"";position:absolute;left:0;bottom:-6px;width:0;height:2px;background:var(--straw-deep);transition:width .3s var(--ease)}
.nav-links a.navlink:hover::after{width:100%}
.nav-cta{display:flex;align-items:center;gap:16px}
.lang-switch{display:flex;align-items:center;gap:1px}
.lang-switch a{font-size:11.5px;font-weight:700;letter-spacing:.09em;color:var(--ink-soft);
  padding:6px 8px;border-radius:var(--r);line-height:1;transition:color .22s var(--ease),background .22s var(--ease)}
.lang-switch a:hover{color:var(--straw-text)}
.lang-switch a.is-on{color:var(--brown);background:rgba(61,27,13,.08)}
.m-reserve{display:none}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:8px;color:var(--brown)}

/* ---------- HERO (contained editorial) ---------- */
.hero{position:relative;min-height:calc(100dvh - 92px);display:flex;align-items:center;padding:40px 0 56px;overflow:hidden}
.hero>.wrap{width:100%}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(60% 70% at 88% 8%,rgba(239,210,129,.30),transparent 60%),
             radial-gradient(50% 60% at 0% 100%,rgba(61,27,13,.06),transparent 60%)}
.hero-grid{display:grid;grid-template-columns:1.04fr .96fr;gap:64px;align-items:center}
.hero h1{font-size:clamp(42px,5.6vw,74px);line-height:1.04;margin:22px 0 0;max-width:13ch}
.hero h1 em{color:var(--straw-hero);font-style:italic}
.hero .lead{margin-top:24px;font-size:19px;max-width:46ch}
.hero-actions{margin-top:34px;display:flex;gap:14px;flex-wrap:wrap}
.hero-foot{margin-top:34px;display:flex;align-items:center;gap:18px;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)}
.hero-foot .sep{width:5px;height:5px;border-radius:50%;background:var(--straw-deep)}
/* figure: current photo + archival inset + seal */
.hero-figure{position:relative;padding:0 26px 26px 0}
.hero-figure .main{aspect-ratio:4/4.5;width:100%;object-fit:cover;filter:saturate(1.04) contrast(1.02)}
.hero-inset{position:absolute;left:-22px;bottom:-6px;width:42%;max-width:210px;background:var(--paper);
  padding:9px 9px 30px;box-shadow:0 22px 44px rgba(44,29,17,.26);transform:rotate(-4deg);border:1px solid var(--line)}
.hero-inset img{width:100%;filter:sepia(.42) contrast(1.05)}
.hero-inset figcaption{position:absolute;left:0;right:0;bottom:9px;text-align:center;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
.hero-seal{position:absolute;top:-6px;right:-6px;width:112px;height:112px;border-radius:50%;
  background:var(--brown);border:2px solid var(--straw);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  box-shadow:0 16px 36px rgba(44,29,17,.3);transform:rotate(6deg)}
.hero-seal .y{font-family:"Playfair Display",Georgia,serif;font-weight:700;font-size:30px;color:var(--straw);line-height:1}
.hero-seal .t{font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;color:#E9D9B6;margin-top:5px}

/* section rhythm */
section{padding:50px 0;position:relative}
.section-head h2{font-size:clamp(33px,4vw,52px);margin-top:18px}
.story .section-head h2{font-size:clamp(26px,3vw,38px);max-width:16ch}
.rule-straw{width:54px;height:3px;background:var(--straw-deep);margin:0 0 4px;border-radius:2px}

/* ---------- STORY ---------- */
.story{background:var(--paper-2);position:relative;overflow:hidden}
.story .watermark{position:absolute;right:-3vw;top:4%;font-family:"Playfair Display",Georgia,serif;font-weight:700;
  font-size:37vw;line-height:.7;color:rgba(61,27,13,.05);z-index:0;pointer-events:none;user-select:none}
.story .wrap{position:relative;z-index:1}
.story-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:64px;margin-top:50px;align-items:start}
.story-media{position:sticky;top:100px}
.story-media .frame{background:var(--paper);padding:14px;box-shadow:0 30px 60px rgba(44,29,17,.20);border:1px solid var(--line);transform:rotate(-1.4deg)}
.story-media .frame img{width:100%;filter:sepia(.36) contrast(1.04)}
.story-media .cap{font-size:13px;color:var(--ink-soft);margin-top:16px;font-style:italic;text-align:center}
.timeline{display:flex;flex-direction:column}
.tl{display:grid;grid-template-columns:124px 1fr;gap:26px;padding:28px 0;border-top:1px solid var(--line)}
.tl:first-child{border-top:0;padding-top:0}
.tl .yr{font-family:"Playfair Display",Georgia,serif;font-size:40px;font-weight:600;color:var(--brown);line-height:1;position:relative}
.tl h3{font-size:20px;font-family:"Hanken Grotesk",sans-serif;font-weight:700;margin-bottom:8px;color:var(--ink)}
.tl p{color:var(--ink-soft);font-size:15.5px;max-width:54ch}

/* ---------- PULL QUOTE ---------- */
.quote{background:var(--paper-3);position:relative;overflow:hidden;text-align:center}
.quote::before{content:"\201C";position:absolute;left:50%;top:5%;transform:translateX(-50%);
  font-family:"Playfair Display",Georgia,serif;font-size:230px;line-height:1;color:rgba(194,142,46,.20)}
.quote .wrap{position:relative;z-index:1;max-width:980px}
.quote blockquote{margin:0;font-family:"Playfair Display",Georgia,serif;font-weight:600;font-style:italic;
  font-size:clamp(26px,3.4vw,42px);line-height:1.34;color:var(--brown);letter-spacing:-.01em}
.quote .attr{margin-top:30px;font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-soft)}
.quote .attr strong{color:var(--straw-text);font-weight:700}

/* ---------- RESTAURANT FEATURE (brown) ---------- */
.feature{background:var(--brown);color:var(--paper);position:relative;overflow:hidden}
.feature::before{content:"";position:absolute;inset:0;
  background:radial-gradient(120% 130% at 88% 6%,rgba(239,210,129,.20),transparent 46%),
             radial-gradient(80% 80% at 0% 100%,rgba(0,0,0,.30),transparent 55%)}
.feature-grid{position:relative;display:grid;grid-template-columns:1fr 1fr;min-height:560px;z-index:1}
.feature-media{overflow:hidden}
.feature-media img{width:100%;height:100%;object-fit:cover;min-height:360px;transition:transform 1.4s var(--ease)}
.feature:hover .feature-media img{transform:scale(1.04)}
.food-slider{position:relative;width:100%;height:100%;min-height:360px}
.food-slider img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;
  transition:opacity 1.1s var(--ease),transform 1.4s var(--ease)}
.food-slider img.is-on{opacity:1}
.food-dots{position:absolute;left:0;right:0;bottom:18px;z-index:2;display:flex;gap:8px;justify-content:center}
.food-dots button{width:8px;height:8px;border-radius:50%;border:0;padding:0;cursor:pointer;
  background:rgba(255,255,255,.45);transition:background .3s,transform .3s}
.food-dots button.on{background:var(--straw);transform:scale(1.25)}
.feature-body{padding:84px 64px;display:flex;flex-direction:column;justify-content:center;max-width:640px}
.feature-body .eyebrow{color:var(--straw)}
.feature-body .eyebrow::before{background:var(--straw)}
.feature-body h2{color:#FBF3DF;font-size:clamp(29px,3.6vw,44px);margin-top:16px}
.feature-body p{color:#E6DCC6;margin-top:22px;max-width:46ch}
.feature-body .actions{margin-top:32px}
.feature .link-underline{color:var(--straw);border-color:var(--straw)}
.feature .link-underline:hover{color:#fff}

/* ---------- MENU ---------- */
.menu-layout{display:grid;grid-template-columns:.82fr 1.18fr;gap:60px;align-items:center}
.menu-collage{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:100px}
.menu-collage img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:var(--r);box-shadow:0 14px 30px rgba(44,29,17,.16)}
.menu-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px 64px;margin-top:44px}
.menu-layout .menu-grid{grid-template-columns:1fr;gap:0;margin-top:38px}
.dish{display:grid;grid-template-columns:1fr auto;gap:20px;align-items:baseline;padding:22px 0;border-bottom:1px solid var(--line)}
.dish .d-name{font-family:"Playfair Display",Georgia,serif;font-size:22px;font-weight:600;color:var(--brown)}
.dish .d-name .g{color:var(--ink-soft);font-size:13.5px;font-family:"Hanken Grotesk",system-ui,sans-serif;font-weight:400;margin-left:8px;white-space:nowrap}
.dish .d-desc{color:var(--ink-soft);font-size:14.5px;margin-top:6px}
.dish .d-price{font-variant-numeric:tabular-nums;font-weight:700;color:var(--straw-text);white-space:nowrap;font-size:18px}
.menu-foot{margin-top:44px}

/* ---------- WEEKLY / DAILY MENU ---------- */
.weekly{background:var(--paper-2)}
.weekly-head{display:flex;align-items:baseline;gap:22px;flex-wrap:wrap}
/* Download of the printed weekly menu. margin-left:auto pushes it to the right
   edge of the head row; it drops onto its own line when the row wraps. */
.weekly-dl{margin-left:auto;display:inline-flex;align-items:center;gap:8px;
  font-size:13px;font-weight:600;letter-spacing:.03em;color:var(--brown);
  border:1px solid var(--line);border-radius:999px;padding:9px 16px;white-space:nowrap;
  transition:color .22s var(--ease),border-color .22s var(--ease),background .22s var(--ease)}
.weekly-dl:hover{color:var(--straw-text);border-color:var(--straw-deep);background:var(--paper-2)}
.weekly-dl svg{width:15px;height:15px;flex:none}
.weekly-head h2{font-size:clamp(33px,4vw,52px)}
.weekly-week{font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--straw-text);font-weight:700;
  border:1px solid var(--straw-deep);border-radius:999px;padding:7px 15px}
.weekly-specials{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:42px}
.wk-card{background:var(--paper);border:1px solid var(--line);border-left:3px solid var(--straw-deep);border-radius:var(--r);
  padding:24px 28px;display:flex;flex-direction:column;gap:7px}
.wk-card .wk-k{font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--straw-text);font-weight:700}
.wk-card .wk-v{font-family:"Playfair Display",Georgia,serif;font-size:22px;color:var(--brown);line-height:1.18}
.days{margin-top:36px;display:flex;flex-direction:column}
.day{display:grid;grid-template-columns:190px 1fr;gap:32px;padding:28px 0;border-top:1px solid var(--line)}
.day:first-child{border-top:0;padding-top:6px}
.day-name{margin:0;font-family:"Playfair Display",Georgia,serif;font-size:27px;font-weight:600;color:var(--brown);line-height:1.1}
.day-items{display:grid;grid-template-columns:1fr 1fr;gap:14px 40px}
.di{display:flex;flex-direction:column;gap:4px}
.di-k{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--straw-text);font-weight:700}
.di-v{font-size:16.5px;color:var(--ink);line-height:1.4}
.di-v .g{color:var(--ink-soft);font-size:13.5px;margin-left:7px;white-space:nowrap}
.weekly-note{margin-top:36px;font-size:13.5px;color:var(--ink-soft);font-style:italic}

/* Allergen numbers under each daily-menu dish. Legally meaningful, so always
   shown when present, but visually quiet like the weight. */
.di-a{display:block;margin-top:5px;font-size:12.5px;color:var(--ink-soft);letter-spacing:.02em}
.wk-card .wk-g{font-size:13px;color:var(--ink-soft);line-height:1.5}

/* Allergen legend: the per-dish numbers are meaningless without it. Collapsed by
   default so it does not dominate the section. */
.weekly-allergens{margin-top:34px;border-top:1px solid var(--line);padding-top:20px}
.weekly-allergens summary{cursor:pointer;font-size:12.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--straw-text);list-style:none;display:inline-flex;align-items:center;gap:8px}
.weekly-allergens summary::-webkit-details-marker{display:none}
.weekly-allergens summary::after{content:"+";font-size:16px;font-weight:400;line-height:1}
.weekly-allergens[open] summary::after{content:"\2212"}
.weekly-allergens summary:hover{color:var(--brown)}
.allergen-list{margin:18px 0 0;padding-left:0;list-style:none;counter-reset:al;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:7px 28px}
.allergen-list li{counter-increment:al;position:relative;padding-left:30px;
  font-size:13px;color:var(--ink-soft);line-height:1.45}
.allergen-list li::before{content:counter(al);position:absolute;left:0;top:1px;
  width:20px;height:20px;border-radius:50%;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--brown)}

/* ---------- ROOMS ---------- */
.rooms{background:var(--paper-2)}
.rooms-top{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:end}
.rooms-photo img{width:100%;aspect-ratio:16/10;object-fit:cover;box-shadow:0 24px 50px rgba(44,29,17,.18)}
.price-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:50px}
.pcard{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:0 28px 30px;display:flex;flex-direction:column;
  overflow:hidden;transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.pcard .cap-bar{height:5px;background:var(--straw-deep);margin:0 -28px 30px;opacity:.85}
.pcard:hover{transform:translateY(-6px);box-shadow:0 26px 50px rgba(44,29,17,.16)}
.pcard .beds{font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)}
.pcard .price{font-family:"Playfair Display",Georgia,serif;font-size:42px;font-weight:600;margin:16px 0 2px;color:var(--brown)}
.pcard .price small{font-family:"Hanken Grotesk",sans-serif;font-size:14px;font-weight:500;color:var(--ink-soft);letter-spacing:0}
.pcard .note{font-size:14px;color:var(--ink-soft);margin-top:4px}
.amenities{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.amenities span{font-size:13.5px;color:var(--ink-soft);background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:8px 16px}
.rooms-cta{margin-top:36px}

/* ---------- GALLERY ---------- */
.gal-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:210px;gap:14px;margin-top:48px}
.gal-grid figure{margin:0;overflow:hidden;border-radius:var(--r)}
.gal-grid img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.gal-grid figure:hover img{transform:scale(1.06)}
.g-a{grid-column:span 2;grid-row:span 2}
.gal-foot{margin-top:38px}

/* ---------- CONTACT ---------- */
.contact{background:var(--paper-2)}
.contact-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:60px;margin-top:50px;align-items:stretch}
.info-rows{display:flex;flex-direction:column}
.irow{padding:24px 0;border-top:1px solid var(--line)}
.irow:first-child{border-top:0;padding-top:0}
.irow .k{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--straw-text);font-weight:600}
.irow .v{font-size:18px;margin-top:8px;line-height:1.5}
.irow .v a:hover{color:var(--straw-text)}
.map{min-height:420px;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:0 20px 44px rgba(44,29,17,.14)}
#kontaktMap{width:100%;height:100%;min-height:420px}
.maplibregl-popup-content{font-family:"Hanken Grotesk",system-ui,sans-serif;font-size:14px;line-height:1.4;color:var(--ink);border-radius:var(--r);padding:11px 14px;box-shadow:0 10px 24px rgba(44,29,17,.18)}
.maplibregl-popup-content strong{font-family:"Playfair Display",Georgia,serif;color:var(--brown)}
.maplibregl-ctrl-attrib{font-size:10px}
.contact-cta{margin-top:32px}

/* ---------- FOOTER ---------- */
footer{background:var(--brown-900);color:#D6C9B4;padding:80px 0 36px;position:relative;overflow:hidden}
footer::before{content:"";position:absolute;inset:0;background:radial-gradient(70% 90% at 90% 0%,rgba(239,210,129,.12),transparent 50%)}
.foot-top{position:relative;display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:48px;z-index:1}
.foot-logo{height:84px;width:auto;display:block}
.foot-brand p{margin-top:20px;color:#A8967A;font-size:14.5px;max-width:34ch}
.foot-col h4{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:#A38C6A;font-weight:600;margin:0 0 18px}
.foot-col a,.foot-col p{display:block;color:#D6C9B4;font-size:15px;margin-bottom:11px}
.foot-col a:hover{color:var(--straw)}
.foot-bottom{position:relative;z-index:1;margin-top:56px;padding-top:24px;border-top:1px solid rgba(239,210,129,.16);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;color:#9A8668;font-size:13px}

/* ---------- CINEMAGRAPH (contained: a small moving vintage photo) ---------- */
.cinema{background:#E5D4B0;position:relative;overflow:hidden}   /* gradient bridges the story (paper-2) above into the quote (paper-3) below */
.cinema-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:64px;align-items:center}
.cinema-copy h2{font-size:clamp(28px,3.4vw,44px);margin-top:18px}
.cinema-copy .cinema-cap{margin-top:22px;font-size:14px;color:#655340;font-style:italic;max-width:40ch;line-height:1.5}
.cinema-frame{margin:0;background:var(--paper);padding:14px;border:1px solid var(--line);
  box-shadow:0 30px 60px rgba(44,29,17,.20);transform:rotate(1.4deg)}
.cinema-ratio{position:relative;aspect-ratio:3/2;overflow:hidden;background:#241307 center/cover no-repeat}
.cinema-ratio video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:sepia(.42) contrast(1.04) brightness(.97)}
.cinema-frame .tag{margin-top:12px;text-align:center;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-soft)}

/* unified warm film grade across photos so the snapshots read as one cohesive set */
.hero-figure .main,.feature-media img,.rooms-photo img,.gal-grid img,.menu-collage img{filter:saturate(.9) contrast(1.06) brightness(.99) sepia(.07)}
/* gentler, more refined AOS reveals (small travel, no jumpiness) */
[data-aos="fade-up"]{transform:translate3d(0,38px,0)}
[data-aos="fade-left"]{transform:translate3d(46px,0,0)}
[data-aos="fade-right"]{transform:translate3d(-46px,0,0)}
[data-aos="zoom-in"]{transform:scale(.965)}

/* ---------- responsive ---------- */
/* nav collapses to hamburger before the wide logo + 6 items can crowd the bar */
@media (max-width:1220px){
  .nav-links{position:fixed;inset:92px 0 auto 0;background:var(--paper);flex-direction:column;align-items:flex-start;
    gap:2px;padding:18px 22px 26px;border-bottom:1px solid var(--line);transform:translateY(-130%);
    visibility:hidden;
    transition:transform .4s var(--ease),visibility .4s var(--ease);box-shadow:0 22px 40px rgba(0,0,0,.1)}
  .nav-links.open{transform:translateY(0);visibility:visible}
  .nav-links a.navlink{padding:13px 0;font-size:18px}
  .nav-toggle{display:block}
  .nav-cta .btn{display:none}
  .m-reserve{display:block;margin-top:14px;width:100%}
  .m-reserve .btn{display:inline-flex;width:100%;justify-content:center}
}
@media (max-width:1000px){
  .hero-grid,.story-grid,.cinema-grid,.feature-grid,.menu-layout,.rooms-top,.contact-grid{grid-template-columns:1fr}
  .menu-visual{max-width:460px}
  .cinema-frame{transform:none;max-width:560px}
  .hero-figure{margin-top:18px;max-width:520px}
  .story-media{position:static}.story-media .frame{transform:none}
  .feature-body{padding:56px 32px}
  .foot-top{grid-template-columns:1fr 1fr}
  .foot-brand{grid-column:1/-1}
  /* stacked full-width blocks: reveal vertically so the sideways translate cannot overflow */
  [data-aos="fade-left"],[data-aos="fade-right"]{transform:translate3d(0,34px,0)}
  .nav-inner{height:76px}
  .nav-links{inset:76px 0 auto 0}
  .brand-logo{height:54px}
  .menu-collage{margin-top:0}
}
@media (max-width:760px){
  .weekly-dl{margin-left:0}
  .wrap{padding:0 20px}
  .brand .name{font-size:21px}
  .nav-inner{height:76px}
  .nav-links{inset:76px 0 auto 0}
  .brand-logo{height:56px}
  .tl{grid-template-columns:90px 1fr;gap:16px}
  .menu-grid{grid-template-columns:1fr;gap:0}
  .weekly-specials{grid-template-columns:1fr}
  .day{grid-template-columns:1fr;gap:10px}
  .day-items{grid-template-columns:1fr}
  .price-cards{grid-template-columns:1fr}
  .gal-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:160px}
  .foot-top{grid-template-columns:1fr 1fr;gap:24px 30px}
  section{padding:40px 0}
  .hero{padding-bottom:70px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  [data-aos]{opacity:1!important;transform:none!important;transition:none!important}
  .feature-media img,.gal-grid img,.pcard{transition:none!important}
  .cinema video{display:none}            /* show the poster still instead of the loop */
}

/* ---------- ACCESSIBILITY CORRECTIONS (2026-07-28 audit) ---------- */

/* Skip link: first focusable thing on the page, off-screen until focused. */
.skip{position:absolute;left:-9999px;top:0;z-index:300;background:var(--brown);color:var(--paper);
  padding:12px 20px;border-radius:0 0 var(--r) 0;font-size:14px;font-weight:600;letter-spacing:.04em}
.skip:focus{left:0}

/* The page titles on the menu, drinks and gallery pages are h1 now. They were
   h2, so those documents had no h1 at all. Rendering must not change. */
.section-head h1{font-family:"Playfair Display",Georgia,serif;font-weight:700;line-height:1.06;
  font-size:clamp(30px,3.6vw,46px);letter-spacing:-.015em;color:var(--brown);margin:0}

/* Links inside the contact block and the footer were distinguished by colour
   alone, which fails WCAG 1.4.1. */
.irow .v a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.foot-col a:not(.btn){text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}

/* Visible keyboard focus everywhere. There was no global focus style, so on
   several controls the only cue was the browser default the reset removed. */
a:focus-visible,button:focus-visible,summary:focus-visible,
input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:2px solid var(--straw-text);outline-offset:3px;border-radius:2px}

/* The allergen legend numbers are real text now rather than a CSS counter, so
   they survive the list-semantics stripping screen readers apply here. */
.allergen-list{counter-reset:none;list-style:none;padding:0}
.allergen-list li{display:flex;gap:10px;align-items:flex-start}
.allergen-list li::before{content:none}
.allergen-list .al-n{flex:none;min-width:22px;height:22px;border-radius:50%;background:var(--paper-3);
  color:var(--brown);font-size:11.5px;font-weight:700;display:inline-flex;align-items:center;justify-content:center}

/* Pause control for the auto-advancing food slider (WCAG 2.2.2). */
.food-pause{position:absolute;right:14px;bottom:14px;z-index:3;width:36px;height:36px;border-radius:50%;
  border:1px solid rgba(246,241,229,.45);background:rgba(42,20,9,.55);color:var(--paper);
  cursor:pointer;display:inline-flex;align-items:center;justify-content:center;line-height:1;font-size:13px}
.food-pause:hover{background:rgba(42,20,9,.75)}

/* Slider dots were 8px hit targets. */
.food-dots button{min-width:24px;min-height:24px;padding:8px;background:none;border:0;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center}
.food-dots button::after{content:"";width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.45);
  transition:background .3s,transform .3s}
.food-dots button.on::after{background:var(--straw);transform:scale(1.25)}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  [data-aos]{opacity:1!important;transform:none!important}
}

/* ---------- INTRINSIC IMAGE DIMENSIONS ---------- */
/* optimized_image() emits width/height on every <img>, which is what stops the
   layout shifting while an image loads. But a bare height attribute becomes the
   USED height unless CSS says otherwise, so an image the layout sizes by width
   suddenly inherits the source file's pixel height. That is what put the hero
   photo in a 309x911 box and pushed the inset over the buttons.

   Only images sized BY WIDTH are listed. .food-slider img, .gal-grid img,
   .gal-tile img, .brand-logo and .foot-logo all set their own height on purpose
   and must keep it. */
.hero-figure .main,
.hero-inset img,
.story-media .frame img,
.menu-collage img,
.rooms-photo img {
  height: auto;
}

/* ---------- MOBILE NAV: GROUP THE LANGUAGE SWITCHER WITH THE HAMBURGER ---------- */
/* At 375px the bar was exactly full (logo 168px + controls 167px = the 335px
   available), so space-between had no slack to give and the switcher ended up
   flush against the logo, reading as part of the wordmark. Tightening the
   switcher frees ~25px, which space-between then puts BETWEEN the logo and the
   switcher, and a smaller gap to the hamburger groups the two controls. */
@media (max-width: 1220px) {
  .nav-cta {
    gap: 10px;
  }

  .lang-switch {
    gap: 0;
  }

  .lang-switch a {
    font-size: 11px;
    padding: 4px 6px;
  }
}

/* Below ~400px the logo alone eats half the bar, so trim it a little further to
   keep a visible gap rather than three elements touching. */
@media (max-width: 400px) {
  .brand-logo {
    height: 46px;
  }

  .lang-switch a {
    padding: 4px 5px;
    letter-spacing: .06em;
  }
}