/* Café template ("The specimen catalogue", house base: Starbucks' warm canvas and dark brand bookends), shared by
   every page. A light counter: the shop's cups and pastries, each photographed on white, stand on flat tiles in the
   brand's own tints, like specimens; the brand's full colour is kept 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.15;margin:0;text-wrap:balance}
.preview-bar{background:var(--text);color:var(--day);font-size:1rem;text-align:center;padding:.45rem 1rem;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(--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)}
.btn.line{background:color-mix(in srgb,currentColor 7%,transparent);color:inherit;border:2px solid color-mix(in srgb,currentColor 55%,transparent)}
.btn.line:hover{background:color-mix(in srgb,currentColor 14%,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:.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 on a flat tile, its white studio background multiplied away */
.tile{position:relative;display:block;aspect-ratio:1;border-radius:var(--r);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: 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:.07s}.rv.d2{transition-delay:.14s}.rv.d3{transition-delay:.21s}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}