/* Restaurant template ("The lit table"), shared by every page.
   One dark dining 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) 74%,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,5rem),env(safe-area-inset-left),env(safe-area-inset-right));
  --gap:clamp(7rem,13vw,12rem);
  --ease:cubic-bezier(.2,.7,.2,1);
  --ok:#74b37a;--shut:#d08474
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:var(--night);color-scheme:dark}
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.8;-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)}
/* Arabic display: no tracking (it breaks the joins), leading tall enough for dots and marks */
h1,h2,h3{font-family:var(--display),"Readex Pro",sans-serif;font-weight:500;line-height:1.25;margin:0;text-wrap:balance;letter-spacing:0}
.preview-bar{background:var(--lit);color:var(--lit-ink);font-size:.875rem;text-align:center;padding:.3rem var(--m);font-weight:500;line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.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 2rem;border-radius:999px;background:var(--lit);color:var(--lit-ink);text-decoration:none;font-weight:500;font-size:1.0625rem;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)}
/* the second action: a clear outline on whatever it stands on, never a grey (disabled-looking) fill */
.btn.line{background:transparent;color:inherit;border:2px solid currentColor}
.btn.line:hover{background:color-mix(in srgb,currentColor 10%,transparent)}.btn.line:active{background:color-mix(in srgb,currentColor 18%,transparent)}
.btn:focus-visible{outline:2px solid currentColor;outline-offset:3px}

/* 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;min-height:2.75rem}
: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) 30%,var(--night-2));position:relative;display:block}
.ph::after{content:"";position:absolute;inset:28%;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: a part below the fold rises in once, just before it arrives. Nothing is ever held hidden: without
   script, before the observer fires, or in a full-page capture every part is already in place. */
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.rv.in{animation:rise .85s var(--ease) both}
.rv.in.d1{animation-delay:.08s}.rv.in.d2{animation-delay:.16s}.rv.in.d3{animation-delay:.24s}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Owner 2026-10-28: the logo is the clean transparent asset from scripts/logo_clean.py and stands on the page itself, sized
   like Levain's header logo: no plate, disc or tile around it. .wm is the shop's name as a wordmark, which site.js puts
   in place of the logo where it is too poor to show (data-wordmark) or would not read on its surface; the footer
   already sets the name large, so a footer logo that turns into a wordmark simply leaves. */
:root[data-plate=none] .plate{background:none;padding:0;border-radius:0}
:root[data-plate=none] .plate img{max-width:12rem}
:root[data-plate=none][data-logo=square]{--logo-h:4.75rem}:root[data-plate=none][data-logo=tall]{--logo-h:5.5rem}
:root[data-plate=none][data-logo=wide]{--logo-h:3.5rem}:root[data-plate=none][data-logo=badge]{--logo-h:4.75rem}
.wm{display:block;font-family:var(--display),sans-serif;font-weight:500;font-size:1.375rem;line-height:1.3;max-width:13ch;text-wrap:balance;color:inherit;letter-spacing:0}
footer a:has(> .wm){display:none}
/* a logo too dark for the room: the typographic hero becomes the lit table it stands on (site.js: data-mark=low) */
:root[data-mark=low] .hero:not(.on-photo){background:var(--text);color:var(--night);--muted:color-mix(in oklab,var(--night) 70%,var(--text))}
:root[data-mark=low] .hero:not(.on-photo) .btn:not(.line){background:var(--night);color:var(--text)}
/* on the home page the hero's own name is the wordmark: the bar doesn't repeat it */
header:has(#name) .plate:has(> .wm){display:none}

/* Foundation 2026-10-28 (every new shop, no per-client styling) */
/* hours: today in one lit line, the week folded under it (native details; #hours rows unchanged for site.js) */
.today-line{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;max-width:36rem;margin:0 0 .75rem;padding:1rem 1.25rem;background:var(--night-2);font-size:1.25rem}
.today-line[hidden]{display:none}.today-line b{color:var(--lit);font-weight:500;font-variant-numeric:tabular-nums}
.week-hours{max-width:36rem}
.week-hours summary{display:flex;align-items:center;gap:.75rem;min-height:2.75rem;cursor:pointer;color:var(--muted);list-style:none;width:fit-content}
.week-hours summary::-webkit-details-marker{display:none}
.week-hours summary::after{content:"";width:.5em;height:.5em;border:solid currentColor;border-width:0 0 2px 2px;rotate:-45deg;translate:0 -.15em;transition:rotate .2s}
.week-hours[open] summary::after{rotate:135deg;translate:0 .1em}
.week-hours summary:hover{color:var(--text)}
.week-hours table{margin-top:.5rem}
/* the close: a hairline, then the small print */
footer small{padding-top:1.25rem;border-top:1px solid color-mix(in srgb,currentColor 16%,transparent)}
/* phone frame: a calmer bar so the name and the action come first */
@media(max-width:860px){.hero .bar{padding-block:.75rem}.hero .plate img{max-height:3.75rem}}