/* Restaurant template (base: clients/century, "Night service"), shared by every page.
   One dark room from top to bottom; the lit things in it are the shop's own plates, its logo and the one action.
   Every colour derives from the BRAND block in each page. The ground is the darker of --paper/--ink tinted with
   --brand, the text the lighter one; site.js swaps them when a block arrives the other way round. */
:root{
  --ground:var(--ink);
  --text:var(--paper);
  --night:color-mix(in oklab,var(--ground) 86%,var(--brand));
  --night-2:color-mix(in oklab,var(--night) 93%,var(--text));
  --night-3:color-mix(in oklab,var(--night) 85%,var(--text));
  --muted:color-mix(in oklab,var(--text) 72%,var(--night));
  --lit:var(--accent);
  --lit-ink:var(--ground);
  --plate:transparent;
  --disc:var(--brand);
  --logo-url:url(/img/logo.png);
  --m:max(clamp(1.25rem,5vw,4.5rem),env(safe-area-inset-left),env(safe-area-inset-right));
  --ok:#74b37a;--shut:#d08474
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:var(--night);color-scheme:dark}
@media(pointer:fine){html{overscroll-behavior:none}}
body{margin:0;background:var(--night);color:var(--text);font-family:var(--sans),"Readex Pro",Tahoma,sans-serif;font-weight:300;font-size:1.125rem;line-height:1.7;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
a,button{touch-action:manipulation;-webkit-tap-highlight-color:color-mix(in srgb,var(--lit) 25%,transparent)}
h1,h2,h3{font-family:var(--display),"Readex Pro",sans-serif;font-weight:500;line-height:1.2;margin:0;text-wrap:balance;letter-spacing:-.01em}
.preview-bar{background:var(--lit);color:var(--lit-ink);font-size:1rem;text-align:center;padding:.45rem 1rem;font-weight:400;line-height:1.5}
.skip{position:absolute;top:1rem;inset-inline-start:1rem;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip:focus{width:auto;height:auto;clip-path:none;background:var(--text);color:var(--night);padding:.5rem 1rem;z-index:20}
:focus-visible{outline:2px solid var(--lit);outline-offset:3px}
::selection{background:var(--lit);color:var(--lit-ink)}

/* Buttons: one shape (pill), one fill; the only solid light thing on a screen */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:3.25rem;padding:0 1.75rem;border-radius:999px;background:var(--lit);color:var(--lit-ink);text-decoration:none;font-weight:500;font-size:1rem;white-space:nowrap;transition:transform .2s,background-color .2s}
.btn:hover{background:color-mix(in oklab,var(--lit) 85%,var(--text))}.btn:active{transform:scale(.97)}
.btn.line{background:color-mix(in srgb,currentColor 8%,transparent);color:inherit;border:1.5px solid color-mix(in srgb,currentColor 50%,transparent)}
.btn.line:hover{background:color-mix(in srgb,currentColor 16%,transparent)}

/* The logo plate: the real logo, trimmed by site.js, on its own background colour when it has one */
.plate{display:inline-grid;place-items:center;background:var(--plate);border-radius:.9rem;text-decoration:none;line-height:0}
:root[data-plate=on] .plate{padding:.5rem .75rem}
.plate img{height:var(--logo-h,3.5rem);width:auto;max-width:11rem;object-fit:contain;opacity:0;transition:opacity .3s}
:root[data-logo] .plate img{opacity:1}
:root[data-logo=badge] .plate{overflow:hidden}:root[data-logo=badge]{--logo-h:4.5rem}
:root[data-logo=square]{--logo-h:4.25rem}:root[data-logo=tall]{--logo-h:5rem}:root[data-logo=wide]{--logo-h:3.25rem}

/* Social / contact icons */
.icons{display:flex;gap:.5rem;align-items:center}
.icons a{width:2.75rem;height:2.75rem;display:grid;place-items:center;border-radius:50%;color:inherit;background:color-mix(in srgb,currentColor 10%,transparent);transition:background-color .2s,transform .2s}
.icons a:hover{background:color-mix(in srgb,currentColor 22%,transparent);transform:translateY(-2px)}
.icons svg{width:1.2rem;height:1.2rem;fill:currentColor}

/* Delivery-app buttons. The ORDER_BUTTONS marker in index.html becomes <a class="order-app" href…><img src="/img/apps/<app>.png" alt="<name>"></a>;
   site.js adds the app's name beside its official icon. */
.apps{display:flex;flex-wrap:wrap;gap:.75rem}
.order-app,.app{display:inline-flex;align-items:center;gap:.75rem;min-height:3.5rem;padding:.45rem .55rem .45rem 1.4rem;border-radius:999px;background:var(--text);color:var(--night);text-decoration:none;font-weight:500;font-size:1.125rem;transition:transform .2s,background-color .2s}
.order-app:hover,.app:hover{transform:translateY(-2px);background:color-mix(in oklab,var(--text) 86%,var(--night))}
.order-app img,.app img{width:2.5rem!important;height:2.5rem!important;border-radius:.65rem;flex:none;object-fit:cover}

/* Dish photo placeholder: the shop's own logo, faint, on a brand tone (never a fake dish) */
.ph{background:color-mix(in oklab,var(--brand) 35%,var(--night-2));position:relative;display:block}
.ph::after{content:"";position:absolute;inset:26%;background:var(--text);-webkit-mask:var(--logo-mark,var(--logo-url)) center/contain no-repeat;mask:var(--logo-mark,var(--logo-url)) center/contain no-repeat;opacity:.28}

/* Entrances: only below-the-fold parts wait (site.js marks them), each reveals once; without script all is visible */
.rv.wait{opacity:0;transform:translateY(24px)}
.rv{transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.rv.d1{transition-delay:.08s}.rv.d2{transition-delay:.16s}.rv.d3{transition-delay:.24s}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}