@import url('../fonts/fonts.css');

/* ==========================================================================
   FAT BOYS FOOD CO. - Dorcol, Belgrade
   Design system. Every colour here is sampled from the restaurant's own
   material (Instagram wordmark, neon sign photo, DORCOL poster, product
   shots). Nothing is invented.

   The page alternates two worlds, the way their Instagram does:
     NIGHT  - concrete + ice-blue neon   (hero, story, location)
     PAPER  - cream print poster         (menu, gallery)
   ========================================================================== */

:root{
  /* --- brand core (sampled) ------------------------------------------ */
  --ink:        #141414;   /* their wordmark black                        */
  --ink-soft:   #2A2A2A;
  --paper:      #F4EFE7;   /* their torn-poster stock                     */
  --paper-2:    #EAE2D6;
  --concrete:   #C9CDD0;   /* the wall the tagline is painted on          */
  --night:      #10161D;   /* their product-shot backdrop                 */
  --night-2:    #182129;
  --navy:       #1E2C3F;   /* their poster navy                           */
  --neon:       #9FD3FF;   /* the sign                                    */
  --neon-core:  #EAF6FF;
  --rust:       #C6813F;   /* their "DORCOL" orange                       */
  --rust-deep:  #8A5418;   /* accessible rust for text on paper           */
  --rust-hover: #D08D48;   /* lighter rust, hover only (never behind text)*/
  --ink-deep:   #0A0E13;   /* below --night: the footer floor             */
  --hero-glow:  #1D2937;   /* the cold spill off the neon                 */

  /* --- semantic ------------------------------------------------------ */
  --bg:            var(--paper);
  --fg:            var(--ink);
  --muted-paper:   #6E665A;  /* 4.94:1 on --paper   */
  --muted-paper-2: #57503F;  /* 6.23:1 on --paper-2 - the darker panel is NOT
                                covered by --muted-paper, only 4.41:1 there */
  --muted-night:   #8C97A8;  /* 6.16:1 on --night   */
  --rule-paper:    #D8CEBE;
  --rule-night:    #2C3A49;

  /* --- type ---------------------------------------------------------- */
  --display: 'Archivo Black', 'Arial Black', system-ui, sans-serif;
  --body:    'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --script:  'Sacramento', cursive;

  /* fluid scale - 320px .. 1440px */
  /* Every display size is capped by a vw ceiling as well as a rem clamp.
     Without the min(), a user running a 200% base font size doubles the rem
     *minimum* while the viewport stays put, and the headline overflows a
     320px screen (measured: 497px of scrollWidth). WCAG 1.4.4. */
  --fs-mega:  min(clamp(2.7rem, 1.2rem + 5.4vw, 5.5rem), 13vw);
  --fs-h1:    min(clamp(2.6rem, 1.4rem + 5.6vw, 6rem),   13vw);
  --fs-h2:    min(clamp(2rem,   1.3rem + 3.2vw, 3.9rem), 11vw);
  --fs-h3:    min(clamp(1.4rem, 1.1rem + 1.2vw, 2rem),   7vw);
  --fs-lead:  min(clamp(1.05rem, 0.98rem + 0.4vw, 1.3rem), 5.2vw);
  --fs-body:  1.0625rem;
  --fs-sm:    0.9375rem;
  --fs-xs:    0.8125rem;

  /* --- space --------------------------------------------------------- */
  --s-1: 8px;  --s-2: 16px; --s-3: 24px; --s-4: 32px;
  --s-5: 48px; --s-6: 64px; --s-7: 96px; --s-8: 128px;

  --wrap: 1180px;
  --gut:  clamp(20px, 5vw, 56px);

  /* --- motion -------------------------------------------------------- */
  --t-fast: 140ms;
  --t-mid:  260ms;
  --ease:   cubic-bezier(.2,.7,.3,1);
}

/* ==========================================================================
   Reset / base
   ========================================================================== */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth;
  /* Clears the 68px sticky header so #menu etc. don't land underneath it. */
  scroll-padding-top:84px; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--body);
  font-size:var(--fs-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  /* No body-level overflow clip: .ticker clips its own track, and clipping
     here would cut off anything positioned that needs to escape later. */
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
button{ font:inherit; color:inherit; }

/* line-height 1.05, not the .92 this started at. Archivo Black caps plus a
   Serbian caron (Š Ć Č Ž) are taller than the Latin cap height; below ~0.95
   the caron of line 2 physically cuts into line 1, and this shipped on the
   H1 in the default language. Never tune display leading against English. */
h1,h2,h3{ margin:0; font-family:var(--display); font-weight:400;
  line-height:1.05; letter-spacing:-.02em; text-transform:uppercase;
  overflow-wrap:break-word; }
p{ margin:0; }

::selection{ background:var(--rust); color:var(--ink); }

/* Surfaces the browser would otherwise style for us. */
html{ caret-color:var(--rust); scrollbar-color:var(--rust-deep) var(--paper-2); }
.night{ scrollbar-color:var(--rust) var(--night-2); }
::-webkit-scrollbar{ width:12px; height:12px; }
::-webkit-scrollbar-track{ background:var(--paper-2); }
::-webkit-scrollbar-thumb{ background:var(--rust-deep); border:3px solid var(--paper-2); }
::-webkit-scrollbar-thumb:hover{ background:var(--ink); }

/* Keyboard focus - visible on every surface, never removed. */
:focus-visible{
  /* rust-deep, not rust: #C6813F on cream is 2.77:1, under the 3:1 that
     WCAG 1.4.11 requires of a focus indicator. rust-deep is 5.46:1. */
  outline:3px solid var(--rust-deep);
  outline-offset:3px;
  border-radius:2px;
}
.night :focus-visible, .hdr :focus-visible, .ft :focus-visible{ outline-color:var(--neon); }

/* fixed, not absolute: the header is sticky and a keyboard user can reach
   this link after scrolling, at which point an absolutely-positioned skip
   link would sit far above the viewport and never be seen. */
/* ==========================================================================
   Icons
   -------------------------------------------------------------------------
   Phosphor (regular), self-hosted as an inline <symbol> sprite at the top of
   <body>. Not hand-drawn: hand-rolled icon paths never share an optical grid
   and the stroke weights drift. External <use href="file.svg#id"> would fight
   the CSP, hence the inline sprite.
   ========================================================================== */
.icon-sprite{ position:absolute; width:0; height:0; overflow:hidden; }
.ico{
  width:22px; height:22px; flex:0 0 auto;
  fill:currentColor; display:block;
}
.ico-sm{ width:16px; height:16px; }

.skip{
  position:fixed; left:var(--s-2); top:-100px; z-index:200;
  background:var(--ink); color:var(--paper);
  padding:12px 20px; font-weight:700; text-decoration:none;
  /* transform, not top: never transition a layout property. */
  transition:transform var(--t-fast) var(--ease);
}
.skip:focus{ transform:translateY(calc(100px + var(--s-2))); }

.wrap{ width:min(100% - var(--gut)*2, var(--wrap)); margin-inline:auto; }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ==========================================================================
   Signature textures
   -------------------------------------------------------------------------
   1. Diamond monogram tile - a redraw of the repeating FAT BOYS diamond
      they print on wrappers and use as an Instagram backdrop.
   2. Grain - keeps the flat cream from looking like a CSS default.
   ========================================================================== */
.diamond-bed{ position:relative; isolation:isolate; }
.diamond-bed::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background-image:url("../img/diamond.svg");
  background-size:104px 104px;
  opacity:.022;
  pointer-events:none;
}
.night .diamond-bed::before, .night.diamond-bed::before{ opacity:.038; filter:invert(1); }

.grain::after{
  content:''; position:absolute; inset:0; z-index:1;
  pointer-events:none; opacity:.5;
  background-image:url("../img/grain.svg");
  mix-blend-mode:multiply;
}
.night.grain::after{ mix-blend-mode:overlay; opacity:.55; }

/* Torn paper edge - their posters all sit on a ripped sheet. Drawn as an
   overlay strip in the paper colour that laps over the dark section above,
   which is more robust than a CSS mask. */
.tear{
  position:absolute; top:-29px; left:0; right:0; height:30px; z-index:3;
  background:url("../img/tear.svg") repeat-x top left;
  background-size:1200px 30px;
  pointer-events:none;
}
/* Mirrored: lives at the TOP of a dark section so it paints over that
   section's own background - cream teeth ripping down into the night.
   (A downward tear hung off the paper section above gets covered by the
   dark section, which paints later.) */
.tear-down{
  top:0; bottom:auto; transform:scaleY(-1);
}

/* ==========================================================================
   Sections
   ========================================================================== */
.night{
  background:
    radial-gradient(120% 80% at 50% -10%, var(--hero-glow) 0%, transparent 60%),
    linear-gradient(180deg, var(--night-2) 0%, var(--night) 100%);
  color:var(--paper);
  position:relative;
}
.paper{ background:var(--paper); color:var(--ink); position:relative; }

.section{ padding-block:clamp(56px, 9vw, 120px); }


.section-title{ font-size:var(--fs-h2); margin-bottom:var(--s-3); }
.section-lead{
  font-size:var(--fs-lead); max-width:56ch; line-height:1.55;
}
.paper .section-lead{ color:var(--muted-paper); }
.night .section-lead{ color:var(--muted-night); }

/* ==========================================================================
   Header
   ========================================================================== */
.hdr{
  position:sticky; top:0; z-index:100;
  background:rgba(16,22,29,.82);
  backdrop-filter:saturate(140%) blur(12px);
  -webkit-backdrop-filter:saturate(140%) blur(12px);
  border-bottom:1px solid var(--rule-night);
  color:var(--paper);
}
.hdr-in{
  display:flex; align-items:center; gap:var(--s-3);
  min-height:68px; flex-wrap:wrap; padding-block:6px;
}
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; flex:0 0 auto;
  min-height:44px; }
.brand svg{ display:block; height:38px; width:auto; }

.nav{ display:flex; gap:var(--s-3); margin-left:auto; align-items:center; }
.nav a{
  text-decoration:none; font-weight:700; font-size:var(--fs-sm);
  letter-spacing:.11em; text-transform:uppercase;
  padding:12px 2px; min-height:44px; display:inline-flex; align-items:center;
  position:relative; color:var(--paper);
}
.nav a::after{
  content:''; position:absolute; left:0; right:100%; bottom:7px; height:2px;
  background:var(--rust); transition:right var(--t-mid) var(--ease);
}
.nav a:hover::after, .nav a:focus-visible::after{ right:0; }

/* Language toggle - a real 2-state control, not a link. */
.lang{
  display:flex; border:2px solid var(--rule-night); overflow:hidden; flex:0 0 auto;
}
.lang button{
  background:transparent; border:0; cursor:pointer;
  padding:7px 11px; font-weight:700; font-size:var(--fs-xs);
  letter-spacing:.1em; color:var(--muted-night);
  transition:background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
  min-height:44px;
}
.lang button:hover{ color:var(--paper); }
.lang button[aria-pressed="true"]{ background:var(--rust); color:var(--ink); }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:48px; padding:13px 26px;
  font-family:var(--display); font-size:var(--fs-sm);
  letter-spacing:.04em; text-transform:uppercase; text-decoration:none;
  border:0; cursor:pointer;
  /* Not nowrap: at a 200% base font size a label like "PORUČI DOSTAVU" is
     wider than a 320px screen and would push the whole page sideways. */
  white-space:normal; text-align:center; max-width:100%;
  /* Ink on rust is 5.80:1; white on rust is only 3.18:1 and fails AA for
     this size. Black-on-orange also reads more like street signage. */
  background:var(--rust); color:var(--ink);
  /* Offset + blur, not a zero-blur block shadow: this world is torn print and
     neon, not neobrutalism, and the hard-offset slab was the most templated
     thing on the page. */
  box-shadow:0 3px 0 var(--rust-deep), 0 8px 18px rgba(0,0,0,.34);
  transition:transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease),
             background var(--t-fast) var(--ease);
}
.btn:hover{ transform:translateY(-2px);
  box-shadow:0 5px 0 var(--rust-deep), 0 12px 24px rgba(0,0,0,.42); background:var(--rust-hover); }
/* .nav a sets a colour at equal-or-higher specificity, so the header CTA
   needs this or it inherits --paper on rust (2.77:1). */
.nav a.btn, .hdr .btn{ color:var(--ink); }
.btn:active{ transform:translateY(1px); box-shadow:0 1px 0 var(--rust-deep), 0 3px 8px rgba(0,0,0,.3); }
.btn-ghost{
  background:transparent; color:var(--paper);
  box-shadow:inset 0 0 0 2px var(--paper);
}
.btn-ghost:hover{ background:var(--paper); color:var(--ink); box-shadow:inset 0 0 0 2px var(--paper); }
/* The ghost button draws itself in --paper, which is invisible on a paper
   section. Same trap as .pill-cold: a component styled for one surface used
   on the other. Ink on paper is 16.1:1. */
.paper .btn-ghost{ color:var(--ink); box-shadow:inset 0 0 0 2px var(--ink); }
.paper .btn-ghost:hover{ background:var(--ink); color:var(--paper); box-shadow:inset 0 0 0 2px var(--ink); }
/* Locations is a header button, not a nav link: on a phone the nav collapses
   into the drawer, so "where are you" was two taps away behind a hamburger.
   It replaces the old "Gde smo" nav item rather than sitting beside it, so
   there is still exactly one control per intent. */
.btn-outline{
  background:transparent; color:var(--paper);
  box-shadow:inset 0 0 0 2px var(--rule-night);
}
.btn-outline:hover{
  background:transparent; color:var(--neon);
  box-shadow:inset 0 0 0 2px var(--neon);
  transform:translateY(-2px);
}
.hdr-loc{ gap:7px; }

.hdr .btn{ padding:11px 20px; min-height:42px;
  box-shadow:0 2px 0 var(--rust-deep), 0 6px 14px rgba(0,0,0,.45); }
/* Colour AND shadow both need the .hdr-scoped override: `.nav a.btn, .hdr .btn`
   sets ink for the solid CTA at (0,2,0), which out-specifies `.btn-outline`
   at (0,1,0). Fixing only the shadow left ink text on the dark header (1.05:1).
   Third time this specificity trap has bitten in this stylesheet. */
/* Hero variant: --rule-night is too faint to read as a button edge against the
   hero gradient, so the outline steps up to --muted-night. Colour is set
   explicitly rather than left to inherit, for the specificity reason below. */
.hero-cta .btn-outline{ color:var(--paper); box-shadow:inset 0 0 0 2px var(--muted-night); }
.hero-cta .btn-outline:hover{ color:var(--neon); background:transparent;
  box-shadow:inset 0 0 0 2px var(--neon); }
.hero-loc{ gap:8px; }

.hdr .btn-outline{ color:var(--paper); box-shadow:inset 0 0 0 2px var(--rule-night); }
.hdr .btn-outline:hover{ color:var(--neon); box-shadow:inset 0 0 0 2px var(--neon); }

.nav-toggle{ display:none; }

/* ==========================================================================
   Hero - their wall: concrete, neon sign, tagline in heavy grotesque
   ========================================================================== */
.hero{
  position:relative; overflow:hidden;
  padding-block:clamp(48px,7vw,86px) clamp(56px,8vw,104px);
}
.hero::before{           /* cold light spilling off the neon */
  content:''; position:absolute; inset:-20% 30% 40% -20%;
  background:radial-gradient(closest-side, rgba(159,211,255,.22), transparent 70%);
  pointer-events:none;
}
.hero-in{ position:relative; z-index:2; display:grid; gap:var(--s-5);
  grid-template-columns:1fr; align-items:center; }

/* The neon script. Drawn in CSS so it stays crisp at any size - the photo
   of their sign is only 640px wide and runs off the frame. */
.neon{
  font-family:var(--script); font-size:min(clamp(3.2rem,8vw,6rem), 15vw);
  line-height:1.15; color:var(--neon-core);
  text-shadow:
    0 0 4px  #fff,
    0 0 11px var(--neon),
    0 0 24px var(--neon),
    0 0 48px rgba(93,175,255,.75),
    0 0 92px rgba(93,175,255,.45);
  margin-bottom:.14em; display:block;
  transform:rotate(-2deg);
}
@keyframes flick{
  0%,17%,19%,53%,55%,100%{ opacity:1; }
  18%,54%{ opacity:.62; }
}
.neon{ animation:flick 7s infinite steps(1,end); }

.hero h1{
  font-size:var(--fs-mega);
  color:var(--paper);
  line-height:1.04;
  letter-spacing:-.025em;
  text-wrap:balance;
  margin-bottom:var(--s-3);
  max-width:15ch;
}
.hero h1 em{ font-style:normal; color:var(--rust); }

.hero-sub{
  font-family:var(--body); font-weight:600;
  font-size:min(clamp(.95rem,.85rem + .7vw,1.35rem), 4.6vw);
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--neon); overflow-wrap:break-word;
  margin-bottom:var(--s-4);
}

.hero-cta{ display:flex; flex-wrap:wrap; gap:var(--s-2); margin-bottom:var(--s-4); }

.hero-meta{ display:flex; flex-wrap:wrap; gap:var(--s-2) var(--s-4);
  font-size:var(--fs-sm); color:var(--muted-night); align-items:center; }
.hero-meta strong{ color:var(--paper); }
.stars{ color:var(--rust); letter-spacing:.08em; }

/* Hero photograph, pinned in a taped polaroid. */
.hero-shot{ position:relative; justify-self:center; max-width:420px; width:100%; }
.hero-shot img{
  width:100%; aspect-ratio:300/427; object-fit:cover;
  border:10px solid var(--paper);
  box-shadow:0 26px 60px rgba(0,0,0,.6);
  transform:rotate(2.2deg);
}
.tape{
  /* z-index: the photo carries a rotate(), which creates a stacking context
     that would otherwise paint over these and leave stray grey wedges. */
  position:absolute; z-index:2; width:120px; height:34px;
  background:rgba(244,239,231,.34);
  border-left:1px dashed rgba(255,255,255,.35);
  border-right:1px dashed rgba(255,255,255,.35);
  backdrop-filter:blur(1px);
}
.tape-a{ top:-14px; left:12%; transform:rotate(-7deg); }
.tape-b{ bottom:-12px; right:10%; transform:rotate(5deg); }

/* Circular stamp, echoing their FAT BOYS / HOLY SMOKES seal. */
.stamp{
  position:absolute; right:-18px; bottom:-26px; width:118px; height:118px;
  display:grid; place-items:center; text-align:center;
  border-radius:50%; background:var(--rust); color:var(--ink);
  font-family:var(--display); font-size:.78rem; line-height:1.05;
  letter-spacing:.02em; text-transform:uppercase;
  box-shadow:0 10px 30px rgba(0,0,0,.5);
  transform:rotate(-12deg);
  padding:10px;
}

@media (min-width:900px){
  .hero-in{ grid-template-columns:1.35fr .9fr; gap:var(--s-6); }
}


/* ==========================================================================
   Trust band
   -------------------------------------------------------------------------
   The rating and address used to sit inside the hero, under the CTAs. That is
   a trust micro-strip, and it belongs in its own band directly below the hero
   so the hero carries one message: the dare, and the two buttons.
   ========================================================================== */
.trust{ border-top:1px solid var(--rule-night); padding-block:var(--s-3); }
.trust-in{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:var(--s-2) var(--s-4);
}
.trust-rating{ display:flex; align-items:center; gap:9px; font-size:var(--fs-sm);
  color:var(--muted-night); }
.trust-rating .stars{ display:flex; gap:2px; color:var(--rust); }
.trust-rating strong{ color:var(--paper); font-size:1.05rem;
  font-variant-numeric:tabular-nums; }
.trust-where{ font-size:var(--fs-sm); color:var(--muted-night); }

/* ==========================================================================
   Ticker
   ========================================================================== */
.ticker{
  background:var(--ink); color:var(--paper);
  border-block:3px solid var(--rust);
  overflow:hidden; padding-block:13px;
  position:relative;
}
/* :hover is not a pause control on a touch device (WCAG 2.2.2). */
.ticker-pause{
  position:absolute; right:8px; top:50%; translate:0 -50%;
  z-index:2; width:36px; height:36px;
  display:grid; place-items:center; cursor:pointer;
  background:var(--ink); color:var(--paper);
  border:2px solid var(--rule-night);
}
.ticker-pause .ico{ width:16px; height:16px; }
.ticker-pause .ico-play{ display:none; }
.ticker[data-paused="true"] .ticker-pause .ico-play{ display:block; }
.ticker[data-paused="true"] .ticker-pause .ico-pause{ display:none; }
.ticker[data-paused="true"] .ticker-track{ animation-play-state:paused; }
.ticker-track{ display:flex; width:max-content; animation:slide 38s linear infinite; }
.ticker-group{ display:flex; flex:0 0 auto; }
.ticker span{
  font-family:var(--display); font-size:clamp(.95rem,2.1vw,1.35rem);
  letter-spacing:.05em; text-transform:uppercase;
  padding-inline:var(--s-3); white-space:nowrap;
  display:inline-flex; align-items:center; gap:var(--s-3);
}
.ticker span::after{ content:''; width:9px; height:9px; background:var(--rust);
  transform:rotate(45deg); flex:0 0 auto; }
@keyframes slide{ to{ transform:translateX(-50%); } }
.ticker:hover .ticker-track{ animation-play-state:paused; }

/* ==========================================================================
   Menu
   ========================================================================== */
.menu-head{ display:flex; flex-wrap:wrap; align-items:flex-end;
  justify-content:space-between; gap:var(--s-3); margin-bottom:var(--s-4); }

/* ==========================================================================
   Menu picks - three photographed items above the tabs
   -------------------------------------------------------------------------
   The menu was the longest section on the page and held no food at all; all
   eight photographs sat ~2,000px below it in a gallery that dead-ended. These
   three carry the appetite and answer "which one should I order?".
   Three, not six: only three photographs are large enough to hold this size
   without upscaling. Do not add a fourth from the 190px set.
   ========================================================================== */
.picks-wrap{ margin-bottom:var(--s-5); }

/* The picks scroller bleeds to the viewport edge with a negative inline margin.
   Its own `overflow-x:auto` clips what you see, but the element still added
   ~180px to the document's scroll width, so the whole page could be panned
   sideways - at 100% and again at 200% text.
   The clip has to sit on the SECTION, not on .picks-wrap: the wrapper is only
   as wide as .wrap, so clipping there also cuts off the bleed it exists to
   create. `clip` rather than `hidden` so overflow-y stays visible and the torn
   edge, which overlaps the section boundary vertically, still shows. */
#menu, #story{ overflow-x:clip; }
.picks-title{
  font-family:var(--display); font-size:var(--fs-h3); text-transform:uppercase;
  letter-spacing:-.01em; margin-bottom:var(--s-3);
}
.picks{
  list-style:none; margin:0; padding:0;
  display:grid; gap:var(--s-3);
  grid-template-columns:1fr;
}
@media (min-width:640px){ .picks{ grid-template-columns:repeat(3,minmax(0,1fr)); } }

/* On a phone three stacked cards cost ~1,500px before the visitor reaches the
   list, so they become a snap-scroller instead: still photo-led, a fifth of
   the vertical budget. The peeking third card is the affordance. */
@media (max-width:639px){
  .picks{
    display:flex; gap:var(--s-2);
    overflow-x:auto; scroll-snap-type:x mandatory;
    margin-inline:calc(var(--gut) * -1); padding-inline:var(--gut);
    scrollbar-width:none; -webkit-overflow-scrolling:touch;
  }
  .picks::-webkit-scrollbar{ display:none; }
  .pick{ flex:0 0 76%; scroll-snap-align:start; }
  .pick img{ aspect-ratio:16/10; }
}


.pick{
  display:flex; min-width:0;
  background:var(--paper-2);
  border:1px solid var(--rule-paper);
  overflow:hidden;
  transition:transform var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease);
}
.pick:hover{ transform:translateY(-3px); box-shadow:0 14px 30px rgba(20,16,10,.16); }
/* The whole card is the target, so the link fills it. Focus is drawn inset
   because the card clips its own overflow - an outset ring would be cut off. */
.pick-link{
  display:flex; flex-direction:column; width:100%; min-width:0;
  text-decoration:none; color:inherit;
}
.pick-link:focus-visible{ outline:3px solid var(--rust-deep); outline-offset:-3px; }
.pick img{
  width:100%; aspect-ratio:4/3; object-fit:cover; display:block;
  background:var(--night-2);
}
.pick-body{ padding:var(--s-3); display:flex; flex-direction:column; gap:6px; flex:1; }
.pick-name, .pick-desc, .pick-price{ display:block; }
.pick-name{
  font-family:var(--display); font-size:1.05rem; text-transform:uppercase;
  line-height:1.2; overflow-wrap:break-word;
}
.pick-desc{ font-size:var(--fs-sm); color:var(--muted-paper-2); line-height:1.45; flex:1; }
.pick-price{
  font-family:var(--display); font-size:1.15rem; color:var(--rust-deep);
  font-variant-numeric:tabular-nums; margin-top:2px;
}

/* ── inline thumbnails: food beside the price, at a size 190px sources hold ── */
/* Reserved on the whole list, not per row: indenting only the rows that
   happen to have a photo left the list with a ragged left edge. */
.items.with-thumbs .item{ grid-template-columns:64px minmax(0,1fr) auto; column-gap:var(--s-2); }
.items.with-thumbs .item > .item-name{ grid-column:2; }
.items.with-thumbs .item > .item-price{ grid-column:3; }
.items.with-thumbs .item > .item-desc{ grid-column:2 / -1; }
.item-thumb{
  grid-row:span 2; width:64px; height:64px; object-fit:cover;
  align-self:start; background:var(--night-2);
}


/* ── one row per burger, with its 100g twin as a size choice ────────────── */
.sizes{ display:inline-flex; flex-direction:column; gap:2px; align-items:flex-end; }
.size{
  font-family:var(--body); font-weight:600; font-size:var(--fs-xs);
  color:var(--muted-paper); white-space:nowrap; letter-spacing:.01em;
}
.size b{
  font-family:var(--body); font-weight:700; color:var(--ink);
  margin-right:5px; font-size:.6875rem; letter-spacing:.06em;
}
.size:first-child{ font-size:1.0625rem; color:var(--rust-deep); font-weight:700; }
.size:first-child b{ font-size:.6875rem; color:var(--muted-paper); }

/* Must sit AFTER the base .items.with-thumbs rule above: both selectors have
   the same specificity, so source order decides. Placed earlier, this block
   silently lost and the row kept its three-column desktop grid on a phone. */
@media (max-width:560px){
  .items.with-thumbs .item{ grid-template-columns:56px minmax(0,1fr); }
  .items.with-thumbs .item > .item-name,
  .items.with-thumbs .item > .item-price,
  .items.with-thumbs .item > .item-desc{ grid-column:2; }
  .items.with-thumbs .item > .item-price{ justify-self:start; }
  .items.with-thumbs .item-thumb{ width:56px; height:56px; grid-row:span 3; }
  .sizes{ flex-direction:row; gap:var(--s-3); align-items:baseline; flex-wrap:wrap; }
}

.tabs{
  display:flex; flex-wrap:wrap; gap:10px;
  margin-bottom:var(--s-5);
  border-bottom:2px solid var(--rule-paper); padding-bottom:var(--s-3);
}
.tab{
  background:transparent; border:2px solid var(--ink); cursor:pointer;
  padding:10px 17px; min-height:44px;
  font-family:var(--display); font-size:var(--fs-xs);
  letter-spacing:.07em; text-transform:uppercase;
  transition:background var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
             transform var(--t-fast) var(--ease);
}
.tab:hover{ transform:translateY(-2px); background:var(--paper-2); }
.tab[aria-selected="true"]{ background:var(--ink); color:var(--paper); }

.items{ list-style:none; margin:0; padding:0;
  display:grid; gap:var(--s-1); }
@media (min-width:820px){ .items{ grid-template-columns:1fr 1fr; gap:var(--s-1) var(--s-6); } }

.item{
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px var(--s-2);
  align-items:baseline;
  padding:15px 0; border-bottom:1px dashed var(--rule-paper);
}
.item-name{
  font-family:var(--display); font-size:1.0625rem; letter-spacing:0;
  text-transform:uppercase; line-height:1.3;
  display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  min-width:0; overflow-wrap:break-word;
}
.item-price{
  font-family:var(--display); font-size:1.0625rem;
  color:var(--rust-deep); white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.item-desc{
  grid-column:1 / -1; font-size:var(--fs-sm); color:var(--muted-paper);
  line-height:1.45; max-width:52ch; min-width:0; overflow-wrap:break-word;
}
.pill{
  font-family:var(--body); font-weight:700; font-size:.72rem;
  letter-spacing:.11em; text-transform:uppercase;
  background:var(--rust); color:var(--ink); padding:3px 8px;
  rotate:-2deg; white-space:nowrap;
}
/* --ink is right on rust (5.80:1) but unreadable on navy (1.3:1), which made
   the VEGE and 18+ tags solid blobs. Paper on navy is 12.34:1. */
.pill-cold{ background:var(--navy); color:var(--paper); }

.panel-cta{
  min-width:0;
  margin-top:var(--s-4); padding-top:var(--s-3);
  border-top:2px solid var(--rule-paper);
  display:flex; flex-wrap:wrap; gap:var(--s-2); align-items:center;
}
.panel-cta p{ font-size:var(--fs-sm); color:var(--muted-paper); }

.menu-note{
  margin-top:var(--s-5); padding:var(--s-3);
  border:1px solid var(--rule-paper);
  background:var(--paper-2);
  /* --muted-paper is certified against --paper, not the darker --paper-2
     panel (only 4.41:1 there). This one is 6.23:1. */
  font-size:var(--fs-sm); color:var(--muted-paper-2); max-width:62ch;
}
.menu-note strong{ color:var(--ink); }

/* ==========================================================================
   Story
   -------------------------------------------------------------------------
   A vertical stack, not a text|image split. Hero, story and closing were all
   the same two-column split, which is what made the page read as templated
   even after the menu was rebuilt. This section now runs: headline + body,
   then a full-bleed image band carrying the pull-quote, then the stats row.
   ========================================================================== */
.story-head{ margin-bottom:var(--s-5); }
.story-head .section-title{ margin-bottom:var(--s-3); }
.story-body{ max-width:62ch; }
.story-p{ color:var(--muted-night); font-size:var(--fs-lead); line-height:1.6; }
.story-p + .story-p{ margin-top:var(--s-2); }

/* Full-bleed: escapes .wrap deliberately, which is why the section clips. */
.story-band{
  position:relative; margin:0 0 var(--s-5);
  min-height:clamp(280px, 42vw, 460px);
  display:grid; align-items:center;
  isolation:isolate; overflow:hidden;
}
.story-band img{
  position:absolute; inset:0; z-index:-2;
  width:100%; height:100%; object-fit:cover;
  filter:saturate(.85);
}
.story-band::after{
  content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(90deg, rgba(16,22,29,.94) 0%, rgba(16,22,29,.78) 45%, rgba(16,22,29,.42) 100%);
}
/* The max-width belongs on the text, not on the element doing the centring,
   or the quote floats to the middle of the band instead of lining up with the
   headline above it. */
.story-pull{
  width:min(100% - var(--gut)*2, var(--wrap)); margin-inline:auto;
  font-family:var(--display); font-size:var(--fs-h3);
  line-height:1.18; color:var(--neon); text-transform:none;
}
.story-pull p{ max-width:24ch; }
@media (max-width:700px){
  .story-pull p{ max-width:none; }
  .story-band::after{
    background:linear-gradient(180deg, rgba(16,22,29,.72) 0%, rgba(16,22,29,.93) 70%);
  }
}

.stats{ display:grid; grid-template-columns:repeat(auto-fit, minmax(9rem, 1fr));
  gap:var(--s-2); }
.stat{ border:2px solid var(--rule-night); padding:var(--s-2); text-align:center; }
.stat b{ display:block; font-family:var(--display); font-size:1.75rem; color:var(--rust); }
.stat > span{ font-size:var(--fs-xs); letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted-night); }

/* ==========================================================================
   Gallery
   ========================================================================== */
.gal{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s-2); }
@media (min-width:700px){ .gal{ grid-template-columns:repeat(4,1fr); } }
.gal figure{ margin:0; position:relative; overflow:hidden; background:var(--ink); }
.gal img{ width:100%; aspect-ratio:1; object-fit:cover;
  transition:transform var(--t-mid) var(--ease), filter var(--t-mid) var(--ease);
  filter:saturate(1.02); }
.gal figure:hover img{ transform:scale(1.06); filter:saturate(1.15); }
.gal .wide{ grid-column:span 2; }
.gal figcaption{
  position:absolute; left:0; bottom:0; right:0;
  padding:22px 12px 9px;
  background:linear-gradient(transparent, rgba(0,0,0,.82));
  color:#fff; font-family:var(--display); font-size:var(--fs-xs);
  letter-spacing:.06em; text-transform:uppercase;
}

/* ==========================================================================
   Closing beat
   -------------------------------------------------------------------------
   The page opened on a dare and used to end on a footer link list, with its
   best sentence set as 13px grey fine print beside the copyright. Peak-end
   says the close is half of what gets remembered, so it collects the dare
   instead. Occupies the old #gallery anchor, which keeps the deep link alive.
   ========================================================================== */
/* Centred, not split. The closing is a manifesto moment: the message is the
   design, which is the one case where a centred composition is right. */
.closing-in{ display:flex; flex-direction:column; align-items:center; text-align:center; }
.closing-shot{ margin:var(--s-5) 0 0; }
.closing-shot img{
  width:100%; max-width:420px; aspect-ratio:3/4; object-fit:cover;
  border:10px solid #fff; transform:rotate(-1.8deg);
  box-shadow:0 22px 48px rgba(20,16,10,.28);
}
.closing-title{ font-size:var(--fs-h2); color:var(--ink); margin-bottom:var(--s-3); }
.closing-line{
  font-size:var(--fs-lead); color:var(--rust-deep); line-height:1.45;
  max-width:38ch; margin-bottom:var(--s-4); font-weight:600;
}
.closing-cta{ display:flex; flex-wrap:wrap; justify-content:center; gap:var(--s-2); }
.closing-meta{ margin-top:var(--s-4); font-size:var(--fs-sm); color:var(--muted-paper); overflow-wrap:break-word; }

/* ==========================================================================
   Location
   ========================================================================== */
.loc-grid{ display:grid; gap:var(--s-6); }
@media (min-width:860px){ .loc-grid{ grid-template-columns:1fr 1fr; gap:var(--s-6); } }

/* One card per restaurant. Each carries its own map, address, hours and order
   button so a visitor never has to work out which kitchen they are ordering
   from - the previous single-address layout hid the second location in a
   footer link and let people order from the wrong one. */
.loc{ display:flex; flex-direction:column; align-items:flex-start; min-width:0; }
.loc-name{
  font-size:var(--fs-h3); color:var(--paper);
  margin-bottom:var(--s-3);
  padding-bottom:10px; border-bottom:2px solid var(--rust);
  align-self:stretch;
}
.loc .map-wrap{ align-self:stretch; margin-bottom:var(--s-3); }
.loc .loc-list{ align-self:stretch; }
.loc-note{
  margin-top:var(--s-3); font-size:var(--fs-sm); color:var(--muted-night);
  max-width:46ch;
}
.loc-fine{ margin-top:6px; font-size:var(--fs-xs); color:var(--muted-night); }
.loc .btn{ margin-top:var(--s-4); }

.loc-list{ list-style:none; margin:0; padding:0; display:grid; gap:var(--s-3); }
.loc-list li{ display:grid; grid-template-columns:26px minmax(0,1fr); gap:var(--s-2);
  align-items:start; }
.loc-v{ overflow-wrap:break-word; }
.loc-list .ico{ margin-top:2px; color:var(--rust); }
.loc-list dt, .loc-k{
  font-family:var(--display); font-size:var(--fs-xs); letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted-night); margin-bottom:2px;
}
.loc-v{ font-size:var(--fs-lead); }
/* inline-block, NOT inline-flex: a flex container turns its text nodes into
   flex items and drops the whitespace between them, which silently deleted
   the space in "11000 Beograd". Padding gives the same tap height. */
.loc-v a{ color:var(--neon); text-underline-offset:4px;
  display:inline-block; padding-block:6px; }

.hours{ list-style:none; margin:0; padding:0; }
.hours li{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:4px var(--s-2);
  padding:11px 0; border-bottom:1px dashed var(--rule-night); font-size:var(--fs-sm); }
/* Neither row is styled as "today". Rendering the open row in brand orange
   read as a live green light on a day the shop is shut. Both rows are now
   neutral; emphasis belongs to a real open/closed state, not a static class. */
.hours .closed{ color:var(--muted-night); }
.hours .now{ color:var(--paper); font-weight:700; font-variant-numeric:tabular-nums; }

.map-wrap{ display:flex; flex-direction:column; }
.map-card{
  display:block; position:relative; overflow:hidden;
  border:3px solid var(--rule-night); text-decoration:none;
  background:var(--night-2); aspect-ratio:16/9;
}
/* ODbL requires visible credit for the OpenStreetMap tiles. It sits outside
   the anchors because a link cannot nest inside another link - one credit
   now covers both maps. */
.map-credit{
  margin-top:var(--s-4); font-size:var(--fs-xs); color:var(--muted-night);
}
.map-credit a{ color:var(--muted-night); text-underline-offset:3px; }
.map-credit a:hover{ color:var(--neon); }
.map-card img{ width:100%; height:100%; object-fit:cover; opacity:.92;
  transition:opacity var(--t-mid) var(--ease), transform var(--t-mid) var(--ease); }
.map-card:hover img{ opacity:1; transform:scale(1.03); }
.map-cta{
  position:absolute; inset:auto 0 0 0; padding:var(--s-3);
  background:linear-gradient(transparent, rgba(16,22,29,.93));
  color:var(--paper); font-family:var(--display); letter-spacing:.04em;
  text-transform:uppercase; display:flex; align-items:center; gap:10px;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.ft{ background:var(--ink-deep); color:var(--muted-night); padding-block:var(--s-6) var(--s-4); }
.ft-in{ display:grid; gap:var(--s-4); }
@media (min-width:760px){ .ft-in{ grid-template-columns:1.2fr 1fr 1fr; } }
.ft h3{ font-size:var(--fs-xs); letter-spacing:.18em; color:var(--paper);
  margin-bottom:var(--s-2); }
.ft a{ color:var(--muted-night); text-decoration:none; }
.ft a:hover{ color:var(--neon); text-decoration:underline; text-underline-offset:4px; }
.ft ul{ list-style:none; margin:0; padding:0; display:grid; gap:4px; font-size:var(--fs-sm); }
.ft ul a{ display:inline-flex; align-items:center; min-height:26px; }
.ft-brand svg{ height:52px; width:auto; margin-bottom:var(--s-2); }
.social{ display:flex; gap:10px; margin-top:var(--s-2); }
.social a{
  width:44px; height:44px; display:grid; place-items:center;
  border:2px solid var(--rule-night);
  transition:background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.social a:hover{ background:var(--rust); border-color:var(--rust); color:#fff; }
.social .ico{ width:20px; height:20px; }
/* Registered-entity block. Deliberately quiet: this is compliance information,
   not marketing, so it sits below the sitemap and above the copyright at the
   smallest size on the page that still clears AA (--muted-night is 6.16:1 on
   --ink-deep, comfortably above the 4.5 floor even at 13px). */
.ft-legal{
  margin-top:var(--s-5); padding-top:var(--s-3);
  border-top:1px solid var(--rule-night);
  display:grid; gap:4px; max-width:78ch;
}
.ft-legal-name{
  font-size:var(--fs-xs); letter-spacing:.04em;
  color:var(--paper); text-wrap:pretty;
}
.ft-legal-ids{ font-size:var(--fs-xs); color:var(--muted-night); text-wrap:pretty; }

.ft-btm{
  margin-top:var(--s-3); padding-top:var(--s-3);
  display:flex; flex-wrap:wrap; gap:var(--s-2); justify-content:space-between;
  font-size:var(--fs-xs);
}

/* Small layout utilities (kept as classes so the CSP needs no
   style-src 'unsafe-inline'). */
.gap-lg{ margin-bottom:var(--s-5); }
.gap-top{ margin-top:var(--s-4); }
.ft-tag{ font-size:var(--fs-sm); max-width:34ch; }
.paper #gallery, .section#gallery{ position:relative; }

/* ==========================================================================
   Bilingual - both languages ship in the DOM; CSS hides the inactive one.
   ========================================================================== */
[data-lang="sr"] .en, [data-lang="en"] .sr{ display:none; }

/* ==========================================================================
   Scroll reveal
   ========================================================================== */
/* Gated on .js (set by lang-init.js in <head>). Without it the reveal never
   arms, so if the scripts fail to load the content is simply visible rather
   than stuck at opacity:0. */
.js .reveal{ opacity:0; transform:translateY(22px);
  transition:opacity 620ms var(--ease), transform 620ms var(--ease); }
.js .reveal.in{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  /* Targeted, not a blanket kill. The usual `*{animation-duration:.001ms
     !important}` also destroys hover colour changes, the focus-ring fade, the
     button press response and the language-toggle state change - feedback
     that carries meaning and poses no vestibular risk. What actually needs to
     stop is continuous and travelling motion, so only that is disabled here.
     Colour and opacity transitions are deliberately left running. */

  /* continuous motion */
  .ticker-track{ animation:none; }
  .neon{ animation:none; }

  /* travelling motion: show the end state immediately */
  .js .reveal{ opacity:1; transform:none; transition:none; }

  /* displacement on interaction - keep the colour/shadow change, drop the move */
  .btn:hover, .btn:active{ transform:none; }
  .tab:hover{ transform:none; }
  .nav a::after{ transition:none; }

  /* scale-on-hover in the gallery and the map card */
  .gal figure:hover img, .map-card:hover img{ transform:none; }

  /* the drawer still fades, it just doesn't slide */
  .nav{ transform:none; }
  .nav[data-open="true"]{ transform:none; }

  html{ scroll-behavior:auto; }
}

/* ==========================================================================
   Mobile nav
   ========================================================================== */
@media (max-width:899px){
  .nav-toggle{
    display:grid; place-items:center;
    width:42px; height:42px; background:transparent;
    border:2px solid var(--rule-night); cursor:pointer;
    order:5;
  }
  /* The order CTA is this surface's job; it stays in the header at every
     width. The language switch moves into the drawer instead - language is a
     once-per-session decision, ordering is the goal. */
  .hdr-in{ gap:10px; }
  .hdr .btn{ padding-inline:13px; }
  .brand svg{ height:32px; }
  .hdr-loc{ order:2; margin-left:auto; padding-inline:10px; }
  .hdr-loc .hdr-loc-label{ position:absolute; width:1px; height:1px; overflow:hidden;
    clip:rect(0 0 0 0); white-space:nowrap; }
  .hdr-order{ order:3; }

  /* Language lives in the header on mobile too: it was behind the hamburger,
     which hides a switch a bilingual city needs on first sight. Compact, but
     each button still clears the 24px WCAG 2.5.8 target. */
  .hdr .lang{ display:flex; order:4; }
  .hdr .lang button{ padding:7px 8px; min-height:40px; font-size:.6875rem; }
  .nav-toggle .ico{ width:24px; height:24px; }
  .nav-toggle .ico-close{ display:none; }
  .nav-toggle[aria-expanded="true"] .ico-open{ display:none; }
  .nav-toggle[aria-expanded="true"] .ico-close{ display:block; }
  .nav{
    position:fixed; inset:68px 0 auto 0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--night); border-bottom:3px solid var(--rust);
    padding:var(--s-2) var(--gut) var(--s-4);
    margin-left:0;
    transform:translateY(-12px); opacity:0; pointer-events:none;
    /* visibility, not just opacity: pointer-events blocks the mouse but the
       links stay in the tab order and the a11y tree without this, so a
       keyboard user gets five invisible tab stops while the nav is closed. */
    visibility:hidden;
    transition:opacity var(--t-mid) var(--ease), transform var(--t-mid) var(--ease),
               visibility 0s linear var(--t-mid);
    max-height:calc(100vh - 68px); overflow-y:auto;
  }
  .nav[data-open="true"]{
    transform:none; opacity:1; pointer-events:auto;
    visibility:visible; transition-delay:0s;
  }
  .nav a{ padding:15px 0; border-bottom:1px solid var(--rule-night); font-size:1.05rem; }
  .nav a::after{ display:none; }
  .nav .btn{ margin-top:var(--s-3); }

  /* Scrim: without it the drawer floats over the hero and two orange order
     buttons stack in one viewport with no way to dismiss by tapping away. */
  .scrim{
    position:fixed; inset:68px 0 0 0; z-index:90;
    background:rgba(8,11,15,.62);
    opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity var(--t-mid) var(--ease), visibility 0s linear var(--t-mid);
  }
  body[data-nav="open"] .scrim{
    opacity:1; visibility:visible; pointer-events:auto; transition-delay:0s;
  }
  body[data-nav="open"]{ overflow:hidden; }
}
@media (min-width:900px){
  .scrim{ display:none; }
  /* The CTA sits after the nav on desktop; without explicit order it would
     follow the brand in DOM order and land beside the wordmark. */
  .brand{ order:1; }
  .nav{ order:2; }
  .hdr-loc{ order:3; }
  .hdr-order{ order:4; margin-left:var(--s-1); }
  .hdr .lang{ order:5; }
}
@media (min-width:900px){
  .nav .btn{ margin-left:var(--s-1); }
}

/* Small phones: keep the mega type from overflowing. */
@media (max-width:400px){
  /* vw-capped like the --fs-* scale: a bare rem here re-opens the 200%-font
     overflow that the token ceilings were added to close. */
  .hero h1{ font-size:min(2.5rem, 12vw); }
  .stats{ grid-template-columns:1fr; }
}