/* Scent-tastic: the look, from the Hero kit in BRIEF.md.
   The shop carries it: the black fascia with SCENT TASTIC in warm-white lit caps, a white stone and pale timber counter,
   the gold tea board, and the blue neon squirrel (a thin accent only). One font, Jost, like the fascia lettering. */
:root{
  --bg:#FFFFFF;--surface:#FFFFFF;--ink:#151514;--muted:#5E5A54;--line:#E7E1D8;
  --warm:#FFF6E3;--timber:#EADCC6;--gold:#F2D58C;--neon:#8FD0F2;
  --accent:#151514;--on-accent:#FFF6E3;
  --display:Jost,system-ui,sans-serif;--body:Jost,system-ui,sans-serif;--display-weight:500;
  --radius:0px;--radius-btn:0px;--max:1120px;--head-h:64px;
  --o-accent:#151514;--o-on-accent:#FFF6E3;--o-ink:#151514;--o-muted:#5E5A54;--o-bg:#FFFFFF;--o-line:#E7E1D8;--o-font:Jost,system-ui,sans-serif;
}
body{font-size:17px}
h1,h2,h3{letter-spacing:0}

/* The fascia: the header is the black sign over the shop, the name in widely tracked caps */
.site-head{background:var(--ink);color:var(--warm)}
.site-head.scrolled{box-shadow:none}
.site-head .wrap{height:var(--head-h)}
.brand{font-weight:500;font-size:16px;letter-spacing:.32em;text-transform:uppercase;line-height:1}
.brand small{display:block;font-size:9.5px;letter-spacing:.3em;opacity:.8;margin-top:6px;font-weight:400}
.site-head nav{gap:28px}
.site-head nav a:not(.btn){font-size:13px;letter-spacing:.16em;text-transform:uppercase}
.site-head .btn{background:var(--warm);color:var(--ink);min-height:40px;padding:8px 14px;font-size:13px}
.sm-only{display:none}
@media (max-width:720px){.sm-only{display:inline}}

/* Buttons: flat square blocks in tracked caps */
.btn{font-weight:600;font-size:14px;letter-spacing:.14em;text-transform:uppercase;padding:14px 24px}
.btn-warm{background:var(--warm);color:var(--ink)}
.alt{font-weight:500;font-size:15px;text-underline-offset:4px}

/* Section names in the fascia's tracked caps: the one type move */
.cap{font-size:13px;font-weight:500;letter-spacing:.34em;text-transform:uppercase;line-height:1.4}
.lede{font-size:clamp(24px,5.6vw,38px);line-height:1.18;font-weight:400;margin-top:14px;max-width:20em}
section{padding-block:56px}
@media (min-width:900px){section{padding-block:80px}}

/* 1. First screen (Leo, 18 Oct 2026: "combine mobile b with desktop a").
   Phones: a big headline on white, the sandwich and shake filling the screen, one full-width ink Order block.
   Desktop: the lit shopfront full bleed, the words and a warm Order block bottom left. */
.hero{padding:0;background:var(--bg);display:flex;flex-direction:column;min-height:calc(100svh - var(--head-h))}
.hero-text{padding:26px 20px 20px}
.hero .cap{margin-bottom:10px}
.hero h1{font-size:clamp(36px,10vw,72px);line-height:1.02;font-weight:500;letter-spacing:-.01em}
.hero picture{position:relative;display:block;flex:1;min-height:300px;overflow:hidden}
.hero picture img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 60%}
.act{display:flex;flex-direction:column;align-items:center;gap:10px;padding:14px 20px 16px;margin:0;max-width:none}
.act .btn{display:block;width:100%;text-align:center;padding:19px}
@media (min-width:900px){
  .hero{display:grid;grid-template-rows:1fr auto auto;position:relative;height:calc(100svh - var(--head-h));min-height:600px;max-height:860px;max-width:1920px;margin:0 auto;background:var(--ink);color:var(--warm)}
  .hero picture{grid-area:1/1/4/2;min-height:0}
  .hero picture img{object-position:40% 30%}
  .hero::after{content:"";grid-area:1/1/4/2;align-self:end;height:50%;background:linear-gradient(rgba(21,21,20,0),rgba(21,21,20,.74));pointer-events:none;z-index:1}
  .hero-text,.act{grid-column:1;z-index:2;padding-left:max(40px,calc((100% - var(--max))/2 + 40px))}
  .hero-text{grid-row:2;padding-top:0;padding-bottom:22px;max-width:760px}
  .hero h1{font-size:60px}
  .act{grid-row:3;flex-direction:row;align-items:center;gap:22px;padding-top:0;padding-bottom:52px}
  .act .btn{display:inline-block;width:auto;padding:16px 26px;background:var(--warm);color:var(--ink)}
  .hero .alt{color:var(--warm)}
}
.desk-only{display:none}
@media (min-width:900px){.desk-only{display:block}.phone-only{display:none}}

/* 2. Bubble tea: the gold board */
.tea{background:var(--gold)}
.board{margin:24px -20px 0}
.board img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:67% 50%}
.tea-list{list-style:none;margin:20px 0 0;padding:0;border-top:1px solid rgba(21,21,20,.18)}
.tea-list a{display:grid;grid-template-columns:1fr auto;gap:2px 16px;padding:11px 0;border-bottom:1px solid rgba(21,21,20,.18);text-decoration:none}
.tea-list b{font-weight:500;font-size:20px}
.tea-list span{display:none}
.tea-list em{grid-column:2;grid-row:1/3;align-self:center;font-style:normal;font-weight:500;font-size:16px;white-space:nowrap}
.more{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:28px;max-width:none}
@media (min-width:900px){
  .tea .wrap{display:grid;grid-template-columns:4fr 4fr 4fr;grid-template-areas:"top board list" "more board list";grid-template-rows:auto 1fr;gap:0 48px;align-items:start}
  .tea-top{grid-area:top}.tea-list{grid-area:list;margin:0}.more{grid-area:more;align-self:start;margin-top:32px}
  .board{grid-area:board;grid-row:1/3;margin:0}.board img{aspect-ratio:4/5;object-position:67% 50%}
  .tea-list span{display:block;grid-column:1;font-size:14px;color:var(--ink);opacity:.75}
}

/* 3. Coffee and sandwiches: the counter, on white */
.counter{background:var(--bg)}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:24px}
.pair figure{margin:0}
.pair img{width:100%;aspect-ratio:4/5;object-fit:cover}
.pair figcaption{margin-top:12px;font-size:15px;color:var(--muted);max-width:28em}
.pair figcaption b{display:block;color:var(--ink);font-weight:500;font-size:19px;margin-bottom:4px}
.counter .more{margin-top:24px}
@media (min-width:900px){
  .counter .wrap{display:grid;grid-template-columns:4fr 8fr;grid-template-rows:auto 1fr;column-gap:48px}
  .counter-top{grid-column:1;grid-row:1}.counter .more{grid-column:1;grid-row:2;align-self:start}
  .pair{grid-column:2;grid-row:1/3;margin-top:0;gap:32px;grid-template-columns:repeat(2,minmax(0,360px));justify-content:end}
  .pair img{max-height:450px}
}

/* 4. The shop: the pale timber of their counter */
.shop{background:var(--timber)}
.shop .wrap{display:grid;gap:28px}
.shop-ph{margin:0 -20px}
.shop-ph img{width:100%;aspect-ratio:4/3;object-fit:cover}
.shop-text p{font-size:19px;margin-top:14px}
blockquote{margin:24px 0 0;padding:0 0 0 18px;border-left:2px solid var(--neon);font-size:21px;line-height:1.4}
blockquote cite{display:block;font-style:normal;font-size:14px;color:var(--muted);margin-top:8px}
@media (min-width:900px){.shop .wrap{grid-template-columns:7fr 5fr;gap:56px;align-items:center}.shop-ph{margin:0}}

/* 5. Find us, on white, with the map beside */
.visit{background:var(--bg)}
.visit .wrap{display:grid;gap:28px}
.find-head{display:flex;align-items:center;gap:18px}
.squirrel{width:96px;height:96px;object-fit:cover;background:var(--ink)}
@media (min-width:900px){.squirrel{width:120px;height:120px}}
.visit address{font-size:22px;line-height:1.35;margin-top:14px}
.visit .open-now{margin-top:14px}
.links{display:flex;gap:12px 22px;flex-wrap:wrap;align-items:center;margin-top:18px;font-weight:500}
.btn-line{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 16px;border:1px solid var(--ink);text-decoration:none;font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
@media (max-width:899px){.btn-line{flex:1 1 40%}}
.group{margin-top:18px}
.map{position:relative;aspect-ratio:4/3;background:var(--timber)}
@media (max-width:899px){[data-map]{display:none}}
@media (min-width:900px){.map{aspect-ratio:1/1}}
.map iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.map-fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:24px;font-size:15px}
@media (min-width:900px){.visit .wrap{grid-template-columns:1fr 1fr;gap:64px;align-items:center}.map{max-width:480px;justify-self:end;width:100%}}

/* Footer: the fascia again */
.site-foot{background:var(--ink);color:var(--timber)}
.site-foot .wrap{display:grid;gap:14px}
.foot-name b{display:block;color:var(--warm);font-weight:500;letter-spacing:.32em;text-transform:uppercase}
.foot-name span{font-size:13px;letter-spacing:.12em}
.foot-links{display:flex;gap:20px;flex-wrap:wrap}
.foot-links a{text-decoration:none;color:var(--warm)}
.foot-small{font-size:13px;max-width:none}
.site-foot a{color:var(--warm)}

/* Group orders page */
.cat-head{padding:0;display:grid;background:var(--timber)}
.cat-photo img{width:100%;aspect-ratio:4/3;object-fit:cover}
.cat-photo small{display:block;font-size:12px;color:var(--muted);padding:6px 20px 0}
.cat-t{padding:28px 20px 40px}
.cat-t h1{font-size:clamp(34px,8vw,56px);font-weight:500;line-height:1.05}
.cat-t p{margin-top:14px;font-size:18px}
.row2{display:grid;gap:var(--s4)}
fieldset{border:0;padding:0;margin:0;display:grid;gap:8px}
legend{font-weight:600;font-size:15px;margin-bottom:6px}
legend small{font-weight:400;color:var(--muted)}
.chk{display:flex!important;align-items:center;gap:10px;font-weight:400!important;min-height:44px}
.chk input{width:20px;height:20px;accent-color:var(--ink)}
@media (min-width:900px){
  .cat-head{grid-template-columns:7fr 5fr;align-items:center;max-width:1920px;margin:0 auto}
  .cat-photo small{padding-left:0}
  .cat-t{padding:48px}
  .row2{grid-template-columns:1fr 1fr}
  .cat-form .form{margin-inline:auto}
}
input,select,textarea,button{font-family:inherit}
@media (max-width:899px){.cat-form .form .btn{justify-self:stretch;text-align:center}}
/* No phone bar on this site, so no room kept for one under the footer */
body{padding-bottom:0}