/* DÖNERADO design system: tokens, type, header, navigation overlay, buttons, page transition, footer.
   Shared by the home page and the menu page. */
:root{
  --espresso:#2B160E;--ink:#120c09;--ink-2:#1b110c;--brown:#5A2F1C;--copper:#B86A32;--copper-dark:#8E4E21;--amber:#E09A3E;
  --cream:#F4E5C8;--cream-2:#efdcb6;--sand:#D7B98E;--ember:#c2401c;--cactus:#52623B;
  --muted:rgba(244,229,200,.66);--line:rgba(244,229,200,.14);--line-dark:rgba(43,22,14,.16);
  --display:'Rye',Georgia,serif;          /* slogans, western headlines */
  --wood:'Anton','Impact',sans-serif;     /* giant wood-type words that are part of the scene */
  --slab:'Bitter',Georgia,serif;          /* product names, prices */
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --r:14px;--gutter:clamp(16px,4vw,56px);--hdr:72px;
  --ease:cubic-bezier(.2,.7,.1,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{background:var(--ink);color:var(--cream);font:400 16px/1.6 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:clip}
/* the tilted marquee is wider than the screen; clip, not hidden, so the sticky scenes keep working */
main{overflow-x:clip}
img,video,svg,canvas{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:6px}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:12px;top:-60px;z-index:300;background:var(--cream);color:var(--ink);padding:10px 16px;border-radius:10px;font-weight:600;text-decoration:none}
.skip:focus{top:12px}

/* film grain over everything, very light */
body::after{content:"";position:fixed;inset:-50%;z-index:250;pointer-events:none;opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}

.eyebrow{display:inline-block;font:600 12px/1.2 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--amber)}
.eyebrow.dark{color:var(--copper-dark)}
.h-wood{font-family:var(--wood);font-weight:400;text-transform:uppercase;letter-spacing:.005em;line-height:.86}
.h-west{font-family:var(--display);font-weight:400;line-height:1.02}

/* ---------- buttons ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:46px;padding:0 22px;border-radius:999px;
  font:600 15px/1 var(--sans);text-decoration:none;white-space:nowrap;background:var(--copper);color:var(--cream);
  transition:background .25s,color .25s,box-shadow .25s;will-change:transform}
.btn:hover{background:var(--amber);color:var(--ink);box-shadow:0 10px 30px rgba(224,154,62,.35)}
.btn.ghost{background:transparent;color:var(--cream);box-shadow:inset 0 0 0 1.5px rgba(244,229,200,.45)}
.btn.ghost:hover{background:var(--cream);color:var(--ink)}
.btn.dark{background:var(--ink);color:var(--cream)}
.btn.dark:hover{background:var(--brown)}
.btn.ghost-dark{background:transparent;color:var(--brown);box-shadow:inset 0 0 0 1.5px rgba(90,47,28,.5)}
.btn.ghost-dark:hover{background:var(--brown);color:var(--cream)}
.btn svg{width:18px;height:18px;fill:currentColor}
.btn .lbl{display:inline-block;pointer-events:none}
.link{font-weight:600;color:var(--sand);text-decoration:none;border-bottom:1px solid rgba(215,185,142,.4);padding-bottom:2px}
.link:hover{color:var(--amber);border-color:var(--amber)}

/* ---------- header ---------- */
.hdr{position:fixed;inset:0 0 auto;z-index:120;height:var(--hdr);display:flex;align-items:center;gap:16px;padding:0 var(--gutter);
  transition:background .4s,backdrop-filter .4s,transform .45s var(--ease)}
.hdr.solid{background:rgba(18,12,9,.78);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line)}
.hdr-brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex:none}
.hdr-brand .lockup{height:40px;width:auto} /* approved lockup, never below 160 px wide */
.hdr-brand .mark{display:none;width:36px;height:36px}
.hdr-status{display:flex;align-items:center;gap:8px;margin:0 auto;font:500 13px/1.2 var(--sans);color:var(--muted);white-space:nowrap}
.hdr-status .dot{width:8px;height:8px;border-radius:50%;background:#7d6a58;box-shadow:0 0 0 0 rgba(120,200,120,.5)}
.hdr-status.is-open .dot{background:#79c26b;animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(121,194,107,.55)}70%{box-shadow:0 0 0 9px rgba(121,194,107,0)}100%{box-shadow:0 0 0 0 rgba(121,194,107,0)}}
.hdr-actions{display:flex;align-items:center;gap:10px;flex:none}
.hdr-menu{display:inline-flex;align-items:center;gap:10px;height:46px;padding:0 16px 0 14px;border-radius:999px;box-shadow:inset 0 0 0 1.5px rgba(244,229,200,.35);font:600 14px/1 var(--sans)}
.hdr-menu:hover{box-shadow:inset 0 0 0 1.5px var(--amber);color:var(--amber)}
.burger{position:relative;width:18px;height:10px}
.burger::before,.burger::after{content:"";position:absolute;left:0;right:0;height:2px;border-radius:2px;background:currentColor;transition:transform .35s var(--ease),top .35s var(--ease)}
.burger::before{top:0}.burger::after{top:8px}
.nav-open .burger::before{top:4px;transform:rotate(45deg)}.nav-open .burger::after{top:4px;transform:rotate(-45deg)}

/* ---------- full-screen navigation ---------- */
.navpanel{position:fixed;inset:0;z-index:110;display:grid;grid-template-columns:1.2fr 1fr;align-items:end;gap:40px;
  padding:calc(var(--hdr) + 30px) var(--gutter) 40px;color:var(--cream);
  background:radial-gradient(ellipse at 80% 20%,rgba(184,106,50,.35),transparent 60%),var(--espresso);
  clip-path:inset(0 0 100% 0);visibility:hidden;transition:clip-path .7s cubic-bezier(.7,0,.2,1),visibility 0s linear .7s}
.nav-open .navpanel{clip-path:inset(0 0 0 0);visibility:visible;transition:clip-path .75s cubic-bezier(.7,0,.2,1),visibility 0s}
.navlinks{list-style:none;counter-reset:n}
.navlinks a{display:flex;align-items:baseline;gap:18px;text-decoration:none;font:400 clamp(40px,7.4vw,104px)/1.02 var(--wood);text-transform:uppercase;
  color:var(--cream);transform:translateY(40px);opacity:0;transition:transform .7s var(--ease),opacity .6s,color .25s}
.navlinks a .n{font:600 13px/1 var(--sans);letter-spacing:.2em;color:var(--amber);transform:translateY(-1.6em)}
.navlinks a:hover{color:var(--amber)}
.nav-open .navlinks a{transform:none;opacity:1}
.navlinks li:nth-child(1) a{transition-delay:.18s}.navlinks li:nth-child(2) a{transition-delay:.23s}.navlinks li:nth-child(3) a{transition-delay:.28s}
.navlinks li:nth-child(4) a{transition-delay:.33s}.navlinks li:nth-child(5) a{transition-delay:.38s}.navlinks li:nth-child(6) a{transition-delay:.43s}.navlinks li:nth-child(7) a{transition-delay:.48s}
.navpanel-info{display:grid;gap:22px;padding-bottom:14px;opacity:0;transform:translateY(20px);transition:opacity .6s .45s,transform .7s .45s var(--ease)}
.nav-open .navpanel-info{opacity:1;transform:none}
.navpanel-info h3{font:600 12px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--amber);margin-bottom:8px}
.navpanel-info p,.navpanel-info li{color:var(--muted);font-size:15px}
.navpanel-info ul{list-style:none}
.navpanel-info .row{display:flex;flex-wrap:wrap;gap:10px}

/* ---------- page transition: dip to espresso, logo, fade up on the next page ---------- */
.pt{position:fixed;inset:0;z-index:400;pointer-events:none;display:grid;place-items:center;background:var(--ink);opacity:0;visibility:hidden}
.pt img{width:min(46vw,240px);height:auto;opacity:0;transform:translateY(8px)}
.pt.cover{opacity:1;visibility:visible;transition:opacity .45s ease}
.pt.cover img{opacity:1;transform:none;transition:opacity .45s ease .2s,transform .6s var(--ease) .2s}
.pt.leave{visibility:visible;animation:ptLeave .7s ease .15s both}
.pt.leave img{animation:ptLogo .5s ease both}
@keyframes ptLeave{from{opacity:1}to{opacity:0}}
@keyframes ptLogo{from{opacity:1}to{opacity:0}}

/* ---------- mobile action bar ---------- */
.mbar{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:100;display:none;gap:10px;
  padding:8px;border-radius:999px;background:rgba(18,12,9,.86);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 10px 30px rgba(0,0,0,.45),inset 0 0 0 1px var(--line)}
.mbar .btn{flex:1;min-height:44px}
.mbar .ic{flex:none;width:44px;padding:0}

/* ---------- footer ---------- */
.ftr{position:relative;background:var(--ink);padding:80px var(--gutter) calc(30px + env(safe-area-inset-bottom));overflow:hidden}
.ftr-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:34px;padding-bottom:50px;border-bottom:1px solid var(--line)}
.ftr h4{font:600 12px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--amber);margin-bottom:14px}
.ftr-grid a,.ftr-grid [data-cookie-settings]>*{display:block;color:var(--muted);text-decoration:none;font-size:15px;padding:4px 0}
.ftr-grid a:hover{color:var(--cream)}
.ftr-grid a.btn{display:inline-flex;color:var(--cream);padding:0 22px}
.ftr-brand p{color:var(--muted);max-width:36ch;font-size:15px;margin-bottom:16px}
.ftr-op{margin-top:14px;font-size:13px;color:rgba(244,229,200,.5)}
.ftr-op b{color:rgba(244,229,200,.85);font-weight:600}
.ftr-giant{display:grid;place-items:center;padding:70px 0 40px}
.ftr-giant img{width:min(520px,72vw);height:auto}
.ftr-bot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;color:rgba(244,229,200,.45);font-size:13px}

@media (max-width:899px){
  :root{--hdr:64px}
  .hdr-status{display:none}
  .hdr-brand .lockup{display:none}
  .hdr-brand .mark{display:block}
  .hdr-actions .btn{display:none}
  .navpanel{grid-template-columns:1fr;align-content:end;align-items:start;gap:30px;overflow-y:auto}
  .mbar{display:flex}
  .ftr{padding-bottom:calc(100px + env(safe-area-inset-bottom))}
  .ftr-grid{grid-template-columns:1fr 1fr}
  .ftr-brand{grid-column:1/-1}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0s!important;scroll-behavior:auto!important}
}

/* Touch screens: a frosted bar over moving content re-blurs the page on every frame and makes
   scrolling stutter on phones. Solid, slightly see-through bars instead. */
@media (pointer:coarse),(max-width:899px){
  .hdr.solid,.mbar{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(18,12,9,.94)}
}