/* Café template ("The cup from above"), shared by every page. One motif runs the system: the disc a cup makes seen
   from above. A giant disc in the brand's colour holds the drinks in the hero; every drink stands in its own disc of a
   light brand or accent tint, studio white multiplied away; buttons are pills, list markers dots. The brand's full
   colour returns for the order band and the footer.
   Every colour derives from the BRAND block in each page. site.js checks contrast and corrects --lit and --field. */
:root{
  --ground:var(--paper);
  --text:var(--ink);
  --day:color-mix(in oklab,var(--ground) 94%,var(--brand));
  --day-2:color-mix(in oklab,var(--day) 94%,var(--text));
  --day-3:color-mix(in oklab,var(--day) 88%,var(--text));
  /* the specimen tiles: four light fields in a fixed rotation (two of the brand, two of the accent) */
  --t1:color-mix(in oklab,var(--day) 86%,var(--brand));
  --t2:color-mix(in oklab,var(--day) 76%,var(--accent));
  --t3:color-mix(in oklab,var(--day) 76%,var(--brand));
  --t4:color-mix(in oklab,var(--day) 86%,var(--accent));
  --muted:color-mix(in oklab,var(--text) 74%,var(--day));
  --lit:var(--brand);
  --lit-ink:var(--brand-ink);
  --field:var(--brand);
  --field-ink:var(--brand-ink);
  --plate:transparent;
  --logo-url:url(/img/logo.png);
  --r:1.25rem;
  /* five type steps: small, body, lead, sub, head (the name sets its own display size) */
  --s1:1rem;--s2:1.125rem;--s3:clamp(1.25rem,1.1rem + .5vw,1.5rem);--s4:clamp(1.625rem,1.2rem + 1.6vw,2.5rem);--s5:clamp(2.25rem,1.4rem + 3.2vw,4rem);
  --m:max(clamp(1rem,4.5vw,4.5rem),env(safe-area-inset-left),env(safe-area-inset-right));
  --ok:#2f7d4a;--shut:#b4472f
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:var(--day);color-scheme:light}
@media(pointer:fine){html{overscroll-behavior:none}}
body{margin:0;background:var(--day);color:var(--text);font-family:var(--sans),"Alexandria",Tahoma,sans-serif;font-weight:400;font-size:var(--s2);line-height:1.65;-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) 20%,transparent)}
h1,h2,h3{font-family:var(--display),"Alexandria",sans-serif;font-weight:800;line-height:1.3;margin:0;text-wrap:balance;letter-spacing:0}
.preview-bar{background:var(--text);color:var(--day);font-size:.875rem;text-align:center;padding:.3rem var(--m);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(--day);padding:.5rem 1rem;z-index:20}
:focus-visible{outline:2.5px solid var(--lit);outline-offset:3px}
::selection{background:var(--lit);color:var(--lit-ink)}

/* Buttons: one shape (pill), one fill (the brand); press = scale .95 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:3.25rem;padding:0 1.9rem;border-radius:999px;background:var(--lit);color:var(--lit-ink);text-decoration:none;font-weight:600;font-size:var(--s2);white-space:nowrap;transition:transform .2s,background-color .2s}
.btn:hover{background:color-mix(in oklab,var(--lit) 86%,var(--text))}.btn:active{transform:scale(.95)}
/* 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}
:root[data-plate=on] .plate{padding:.45rem .7rem}
.plate img{height:var(--logo-h,3.5rem);width:auto;max-width:12rem;object-fit:contain;opacity:0;transition:opacity .3s}
:root[data-logo] .plate img{opacity:1}
:root[data-logo=badge] .plate{overflow:hidden;padding:0}:root[data-logo=badge]{--logo-h:4.25rem}
:root[data-logo=square]{--logo-h:4rem}:root[data-logo=tall]{--logo-h:4.75rem}:root[data-logo=wide]{--logo-h:3rem}

/* 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 9%,transparent);transition:background-color .2s,transform .2s}
.icons a:hover{background:color-mix(in srgb,currentColor 18%,transparent)}.icons a:active{transform:scale(.92)}
.icons svg{width:1.2rem;height:1.2rem;fill:currentColor}

/* Specimen: one item alone in its disc, its white studio background multiplied away */
.tile{position:relative;display:block;aspect-ratio:1;border-radius:50%;overflow:hidden;background:var(--t1)}
/* --z: site.js zooms past the white bands a studio shot was padded with, so the item sits large and whole */
.tile img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;transform:scale(var(--z,1));transition:transform .7s cubic-bezier(.2,.7,.2,1)}
/* a studio shot's pale grey is lifted to white (gently: the item keeps its colours), so the tile's own colour shows */
.tile:not(.full) img{filter:brightness(1.07) contrast(1.06)}
/* a photo shot on a full scene (not on white) fills its tile instead */
.tile.full img{object-fit:cover;mix-blend-mode:normal}
.f1{background:var(--t1)}.f2{background:var(--t2)}.f3{background:var(--t3)}.f4{background:var(--t4)}
/* no real photo: the shop's own logo, faint, on the tile (never a fake item) */
.tile.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:.16}

/* Delivery-app buttons. The order 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(--day);color:var(--text);text-decoration:none;font-weight:600;font-size:var(--s2);transition:transform .2s,background-color .2s}
.order-app:hover,.app:hover{background:#fff}.order-app:active,.app:active{transform:scale(.95)}
.order-app img,.app img{width:2.5rem!important;height:2.5rem!important;border-radius:.65rem;flex:none;object-fit:cover}

/* 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;translate:0 22px}to{opacity:1;translate:0 0}}
.rv.in{animation:rise .8s cubic-bezier(.2,.7,.2,1) both}
.rv.in.d1{animation-delay:.07s}.rv.in.d2{animation-delay:.14s}.rv.in.d3{animation-delay:.21s}
@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:800;font-size:1.375rem;line-height:1.15;max-width:13ch;text-wrap:balance;color:inherit;letter-spacing:0}
footer a:has(> .wm){display:none}
/* a logo too light for the counter (white marks): the hero turns to the dark bookend (site.js: data-mark=low) */
:root[data-mark=low] header.hero{background:var(--text);color:var(--day);--muted:color-mix(in oklab,var(--day) 72%,var(--text))}
:root[data-mark=low] header.hero .btn:not(.line){background:var(--day);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}
:root[data-mark=low] header.hero .now em{color:inherit}

/* Foundation 2026-10-28 (every new shop, no per-client styling) */
/* hours: today as one pill in the brand's tint, the week folded under it (native details; #hours rows unchanged) */
.today-line{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;max-width:34rem;margin:0 0 .6rem;padding:.9rem 1.4rem;border-radius:999px;background:var(--t3);font-size:var(--s3);font-weight:600}
.today-line[hidden]{display:none}.today-line b{font-weight:800;font-variant-numeric:tabular-nums}
.week-hours{max-width:34rem}
.week-hours summary{display:flex;align-items:center;gap:.75rem;min-height:2.75rem;padding-inline:1.4rem;cursor:pointer;color:var(--muted);font-weight:600;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)}
/* the close: a hairline, then the small print */
footer small{padding-top:1.25rem;border-top:1px solid color-mix(in srgb,currentColor 22%,transparent)}
/* phone frame: a calmer bar so the name, the action and the cup come first */
@media(max-width:860px){.hero .bar{padding-block:.6rem}.hero .plate img{max-height:3.5rem}}