/* ============================================================
   Old Town Caffe. Design tokens.
   Palette is derived, not chosen:
     --brand  #774724  measured off the logo's core strokes
     --accent #6B1351  measured off the orchid garnish that recurs
                       in the restaurant's own dish photography
   Both pass WCAG AA on --paper (6.89:1 and 10.17:1).
   ============================================================ */
:root{
  --paper:#F7F1E6;          /* warm cream base */
  --bone:#FDFAF5;           /* lifted cream, cards */
  --brand:#774724;          /* logo brown */
  --brand-deep:#4E2C13;     /* dark bands */
  --brand-mid:#5F3618;
  --ink:#33200F;            /* body text on cream */
  --ink-dim:#6B5240;
  --accent:#6B1351;         /* orchid */
  --on-dark:#F3E7D6;        /* text on brown */
  --on-dark-dim:#CBB49B;
  --line:rgba(119,71,36,.26);
  --line-soft:rgba(119,71,36,.14);

  --display:'Fraunces',Georgia,'Times New Roman',serif;
  --body:'Karla',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --mono:'DM Mono',ui-monospace,'SF Mono',Menlo,monospace;

  --max:1180px;
  --pad:32px;
  --arch:50% 50% 6px 6px / 34% 34% 6px 6px;   /* the logo's arch, as a frame */
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--body);font-size:17px;line-height:1.65;
  font-variant-ligatures:common-ligatures;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.06;margin:0;
  font-variation-settings:'SOFT' 30,'WONK' 1}
p{margin:0 0 1em}
.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--pad)}
.eyebrow{font-family:var(--mono);font-size:11.5px;letter-spacing:.19em;
  text-transform:uppercase;color:var(--brand);margin:0 0 14px}
.serif-i{font-style:italic;color:var(--accent)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2.5px solid var(--accent);outline-offset:3px;border-radius:2px}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.55em;font-family:var(--mono);
  font-size:12.5px;letter-spacing:.13em;text-transform:uppercase;text-decoration:none;
  padding:14px 24px;border-radius:999px;border:1.5px solid var(--brand);
  background:var(--brand);color:var(--paper);white-space:nowrap;flex-shrink:0;
  transition:background .18s ease,color .18s ease,transform .18s ease}
.btn:hover{background:var(--brand-deep);border-color:var(--brand-deep);transform:translateY(-1px)}
.btn--ghost{background:transparent;color:var(--brand)}
.btn--ghost:hover{background:var(--brand);color:var(--paper)}
.btn--onDark{background:var(--paper);border-color:var(--paper);color:var(--brand-deep)}
.btn--onDark:hover{background:var(--on-dark);border-color:var(--on-dark);color:var(--brand-deep)}
.btn--ghostDark{background:transparent;border-color:rgba(243,231,214,.5);color:var(--on-dark)}
.btn--ghostDark:hover{background:var(--paper);border-color:var(--paper);color:var(--brand-deep)}

/* ---------- credentials marquee ---------- */
.creds{background:var(--brand-deep);color:var(--on-dark-dim);overflow:hidden;
  font-family:var(--mono);font-size:11px;letter-spacing:.17em;text-transform:uppercase}
.creds ul{display:flex;gap:44px;list-style:none;margin:0;padding:9px 0;
  white-space:nowrap;animation:slide 46s linear infinite;will-change:transform}
.creds li::after{content:'·';margin-left:44px;opacity:.5}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:50;background:rgba(247,241,230,.93);
  backdrop-filter:blur(9px);border-bottom:1px solid var(--line-soft)}
.nav-in{max-width:var(--max);margin:0 auto;padding:13px var(--pad);
  display:flex;align-items:center;gap:26px}
.brand{flex-shrink:0;line-height:0}
.brand img{width:200px;height:auto}
.nav-links{display:flex;gap:26px;margin-left:auto;list-style:none;padding:0;margin-block:0}
.nav-links a{font-family:var(--mono);font-size:12px;letter-spacing:.11em;
  text-transform:uppercase;text-decoration:none;color:var(--ink);
  border-bottom:1px solid transparent;padding-bottom:2px}
.nav-links a:hover{border-bottom-color:var(--accent);color:var(--accent)}
.nav .btn{padding:11px 19px;font-size:11.5px}

/* ---------- hero: the portal ----------------------------------------------
   Type first, at editorial scale, then the arch as a full-width portal that
   bleeds off the fold. The logo's arch is the brand's one strong shape, so it
   is the hero, and the video plays inside it at full colour on cream. Text
   never sits on the footage, so contrast is ink-on-cream and needs no measuring.
   Motion is CSS only: a staggered entrance, a rotating stamp, and a scroll-driven
   drift on the video where the browser supports animation-timeline. Nothing
   here needs JavaScript and reduced-motion switches all of it off.
   -------------------------------------------------------------------------- */
.hero{background:var(--paper);padding:34px 0 0;position:relative;overflow:hidden}
.hero h1{margin:0;line-height:1;font-optical-sizing:auto}
.h1-a{display:block;font-size:clamp(18px,1.9vw,27px);color:var(--ink-dim);
  font-variation-settings:'SOFT' 20,'WONK' 0;margin:0 0 .35em .08em;letter-spacing:.005em}
.h1-b{display:block;font-size:clamp(52px,10.6vw,152px);line-height:.92;color:var(--brand);
  font-variation-settings:'SOFT' 70,'WONK' 1;letter-spacing:-.035em;margin-left:-.04em}
.hero-row{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;
  margin:26px 0 38px;padding-left:.12em}
.hero p.lede{font-size:17px;color:var(--ink-dim);max-width:36ch;margin:0}
.hero-cta{display:flex;gap:22px;align-items:center;flex-wrap:wrap;flex-shrink:0}
.textlink{font-size:15.5px;font-weight:500;color:var(--ink);text-decoration:none;
  border-bottom:1.5px solid var(--brand);padding-bottom:2px;white-space:nowrap}
.textlink:hover{color:var(--brand)}

/* the portal. Two concentric strokes, the logo's engraved double rule, with
   the video clipped to the inner one. A true semicircular top: on a 1.6:1 box
   the horizontal radius is 50% of width and the vertical is 80% of height,
   which are the same length in pixels. */
.arch-wrap{position:relative;padding:14px;border:1px solid var(--line);
  border-radius:50% 50% 14px 14px / 80% 80% 14px 14px}
.arch{position:relative;aspect-ratio:1.6;overflow:hidden;background:var(--brand-deep);
  border:1.5px solid var(--brand);border-radius:50% 50% 4px 4px / 80% 80% 4px 4px}
.hero-still,.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:saturate(1.04) contrast(1.02)}
.hero-video{z-index:1}

/* the stamp: hours and the suite number on a slowly turning ring, a cream
   sticker overlapping the arch's top-right shoulder. Inline SVG, textLength
   pins the ring text to the circumference so it always closes. */
.stamp{position:absolute;top:2%;right:3%;width:clamp(104px,11vw,156px);aspect-ratio:1;
  z-index:3;filter:drop-shadow(0 2px 6px rgba(51,32,15,.12))}
.stamp svg{width:100%;height:100%;overflow:visible}
.stamp .ring{transform-origin:100px 100px;animation:turn 26s linear infinite}
.stamp text{font-family:var(--mono);fill:var(--brand);letter-spacing:.18em;font-size:12.6px}
.stamp .arrow{font-family:var(--display);font-size:64px;fill:var(--brand);letter-spacing:0}
@keyframes turn{to{transform:rotate(360deg)}}

/* entrance. Transform and opacity only, so nothing shifts layout. The arch
   itself keeps opacity 1 because its poster is the LCP element and a fade
   would delay it; it only rises. */
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes lift{from{transform:translateY(26px)}to{transform:none}}
.h1-a{animation:rise .7s cubic-bezier(.2,.7,.2,1) .05s both}
.h1-b{animation:rise .85s cubic-bezier(.2,.7,.2,1) .14s both}
.hero-row{animation:rise .7s cubic-bezier(.2,.7,.2,1) .3s both}
.arch-wrap{animation:lift .9s cubic-bezier(.2,.7,.2,1) .2s both}
.stamp{animation:rise .7s cubic-bezier(.2,.7,.2,1) .55s both}

/* scroll-driven drift on the footage, progressive enhancement */
@supports (animation-timeline: view()){
  .hero-video{transform:scale(1.12);animation:drift linear both;
    animation-timeline:view();animation-range:entry 0% exit 100%}
  @keyframes drift{from{transform:translateY(-5%) scale(1.12)}to{transform:translateY(5%) scale(1.12)}}
}

/* ---------- hook marquee ---------- */
.hooks{background:var(--brand);color:var(--paper);overflow:hidden;position:relative;z-index:2;
  margin-top:-46px;border-block:1px solid var(--brand-deep)}
.hooks ul{display:flex;gap:38px;list-style:none;margin:0;padding:13px 0;white-space:nowrap;
  font-family:var(--display);font-size:20px;font-style:italic;
  animation:slide 38s linear infinite;will-change:transform}
.hooks li::after{content:'✦';margin-left:38px;font-style:normal;font-size:13px;opacity:.65;
  vertical-align:middle}

/* ---------- section furniture ---------- */
.band{padding:88px 0}
.band--bone{background:var(--bone);border-block:1px solid var(--line-soft)}
.sec-head{max-width:62ch;margin-bottom:46px}
.sec-head h2{font-size:clamp(30px,4.1vw,46px);letter-spacing:-.014em;margin-bottom:14px}
.sec-head p{color:var(--ink-dim);font-size:18px;margin:0}

/* ---------- the usuals ----------------------------------------------------
   Same typographic system as the hero: a small serif line, then the section's
   universal name at editorial scale. Desktop breaks the five-up grid with a
   stagger, giant numerals overlapping each arch, and a hover zoom. Under
   1180px the grid becomes a full-bleed scroll-snap rail, which is the right
   pattern on a phone and needs no JavaScript.
   -------------------------------------------------------------------------- */
.usuals-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;
  margin-bottom:54px}
.usuals-head .kicker{display:block;font-family:var(--display);font-size:clamp(17px,1.7vw,24px);
  color:var(--ink-dim);font-variation-settings:'SOFT' 20,'WONK' 0;margin:0 0 .3em .06em;
  letter-spacing:.005em}   /* the h2 tracks at -.03em; the small line must not inherit it */
.usuals-head h2{font-size:clamp(44px,6.4vw,96px);line-height:.94;letter-spacing:-.03em;
  color:var(--brand);font-variation-settings:'SOFT' 70,'WONK' 1;margin-left:-.03em}
.usuals-aside{max-width:34ch;flex-shrink:0;padding-bottom:.4em}
.usuals-aside p{font-size:15.5px;color:var(--ink-dim);line-height:1.55;margin:0 0 14px}
.usuals-cue{display:none;font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--brand);margin-top:10px}

.usuals{display:grid;grid-template-columns:repeat(5,1fr);gap:28px;padding-bottom:64px}
.usuals:focus-visible{outline-offset:12px}
.dish{display:flex;flex-direction:column}
.dish:nth-child(even){padding-top:64px}
.dish figure{margin:0 0 20px;position:relative}
.dish .frame{border-radius:var(--arch);overflow:hidden;background:var(--paper);
  border:1px solid var(--line);aspect-ratio:4/5}
.dish .frame img{width:100%;height:100%;object-fit:cover;
  transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.dish:hover .frame img{transform:scale(1.045)}
.dish .no{display:block;line-height:.86;margin:0 0 12px -.04em;
  font-family:var(--display);font-size:clamp(54px,5.2vw,76px);color:var(--brand);
  font-variation-settings:'SOFT' 70,'WONK' 1;letter-spacing:-.05em}
.dish h3{font-size:clamp(22px,1.9vw,27px);letter-spacing:-.015em;margin-bottom:8px}
.dish p{font-size:14.5px;color:var(--ink-dim);line-height:1.55;margin-bottom:10px}
.dish .why{font-family:var(--display);font-style:italic;font-size:15.5px;
  color:var(--accent);line-height:1.42;margin:auto 0 0}

/* ---------- the coffee bar: the board --------------------------------------
   Half the catalogue is something to drink, so the section shows the whole
   half. One enormous numeral, then every drink on the menu set as a wall of
   names in the display serif, with the latte art layered beside the number.
   The names are generated from the Famished catalogue (see Commands) and only
   their case is normalised. No prices, as everywhere on the site.
   -------------------------------------------------------------------------- */
.coffee{background:var(--brand-deep);color:var(--on-dark);padding:100px 0 88px;overflow:hidden}
.coffee-top{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:end;
  margin-bottom:56px}
.coffee .kicker{display:block;font-family:var(--display);font-size:clamp(17px,1.7vw,24px);
  color:var(--on-dark-dim);font-variation-settings:'SOFT' 20,'WONK' 0;letter-spacing:.005em;
  margin:0 0 .15em .12em}
.coffee h2{margin:0;line-height:1}
.big-no{display:block;font-size:clamp(132px,19vw,268px);line-height:.8;letter-spacing:-.06em;
  color:var(--on-dark);font-variation-settings:'SOFT' 80,'WONK' 1;margin-left:-.06em}
.big-line{display:block;font-size:clamp(26px,3vw,44px);line-height:1.05;letter-spacing:-.02em;
  color:var(--on-dark);font-variation-settings:'SOFT' 40,'WONK' 1;margin:.4em 0 0 .08em}
.coffee-aside{padding-bottom:.6em}
.coffee .lede{font-size:18px;color:var(--on-dark-dim);max-width:42ch;margin:0 0 20px;line-height:1.6}
.coffee .quote{font-family:var(--display);font-style:italic;font-size:21px;color:var(--on-dark);
  margin:0}
.coffee .quote span{font-family:var(--mono);font-style:normal;font-size:11px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--on-dark-dim);margin-left:14px;white-space:nowrap}

/* the second portal. Same construction as the hero's: an outer hairline and an
   inner stroke on a true semicircular top (1.5:1 box, so 50% horizontal and
   75% vertical radii are equal), a still underneath, and the video on top once
   a pour clip exists. The still is the LCP-safe fallback and the reduced-motion
   view. The cat latte sits on the shoulder as a ringed sticker, like the stamp. */
.portal-wrap{position:relative;width:min(100%,920px);margin:0 auto 44px;padding:14px;
  border:1px solid rgba(243,231,214,.3);border-radius:50% 50% 14px 14px / 75% 75% 14px 14px}
.portal{position:relative;aspect-ratio:1.5;overflow:hidden;background:var(--brand);
  border:1.5px solid rgba(243,231,214,.55);border-radius:50% 50% 4px 4px / 75% 75% 4px 4px}
.portal-still,.portal video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:saturate(1.04) contrast(1.02)}
.portal video{z-index:1}
.sticker{position:absolute;top:4%;right:-3%;width:clamp(96px,17%,168px);aspect-ratio:1;z-index:2;
  border-radius:50%;overflow:hidden;border:7px solid var(--brand-deep);
  box-shadow:0 0 0 1px rgba(243,231,214,.45),0 8px 24px rgba(0,0,0,.25)}
.sticker img{width:100%;height:100%;object-fit:cover}
@supports (animation-timeline: view()){
  .portal-still,.portal video{transform:scale(1.1);animation:drift linear both;
    animation-timeline:view();animation-range:entry 0% exit 100%}
}

.board-note{margin:0;padding-top:34px;border-top:1px solid rgba(243,231,214,.22);
  font-size:15.5px;color:var(--on-dark-dim);display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.textlink--dark{color:var(--on-dark);border-bottom-color:var(--on-dark-dim)}
.textlink--dark:hover{color:var(--on-dark);border-bottom-color:var(--on-dark)}

/* ---------- our story: two arches, layered -----------------------------------
   No photograph of the room exists yet, so the section is carried by two
   photographs at two scales drifting at two rates: the swan cappuccino large,
   the breakfast burrito small and ringed over its corner, like the coffee
   sticker. The layout stays when the owner's room photos land; only the
   images change. Counters on two stats. All scroll-driven CSS behind
   @supports, all off under reduced motion.
   -------------------------------------------------------------------------- */
.story{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.story-art{position:relative;width:min(100%,520px);aspect-ratio:4/5;justify-self:start}
.story-art .frame{overflow:hidden;background:var(--paper)}
.story-art .frame img{width:100%;height:100%;object-fit:cover;
  transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.story-art .frame:hover img{transform:scale(1.045)}
.art-main{position:absolute;inset:0;border-radius:var(--arch);border:1px solid var(--line)}
.art-inset{position:absolute;left:-6%;bottom:-7%;width:44%;aspect-ratio:4/5;
  border-radius:var(--arch);border:8px solid var(--bone);
  box-shadow:0 0 0 1px var(--line),0 10px 28px rgba(51,32,15,.16)}
.story .kicker{display:block;font-family:var(--display);font-size:clamp(17px,1.7vw,24px);
  color:var(--ink-dim);font-variation-settings:'SOFT' 20,'WONK' 0;letter-spacing:.005em;
  margin:0 0 .3em .06em}
.story h2{font-size:clamp(34px,4.2vw,58px);line-height:.98;letter-spacing:-.025em;
  color:var(--brand);font-variation-settings:'SOFT' 60,'WONK' 1;margin:0 0 24px -.03em}
.story .dropcap::first-letter{font-family:var(--display);float:left;font-size:58px;line-height:.86;
  padding:5px 11px 0 0;color:var(--brand)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:34px;
  border-top:1px solid var(--line)}
.stats div{padding:18px 14px 0 0}
.stats b{display:block;font-family:var(--display);font-size:29px;font-weight:400;line-height:1;
  color:var(--brand);font-variant-numeric:tabular-nums}
.stats div > span{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-dim);display:block;margin-top:7px}   /* direct child only: .n lives inside the <b> */
.stats .n{position:relative;display:inline-block;counter-reset:nn var(--n)}

@property --n{syntax:'<integer>';inherits:false;initial-value:0}
@keyframes parx{from{transform:translateY(30px)}to{transform:translateY(-30px)}}
@keyframes parx-inset{from{transform:translateY(74px)}to{transform:translateY(-74px)}}
@keyframes c555{from{--n:0}to{--n:555}}
@keyframes c7{from{--n:0}to{--n:7}}
@supports (animation-timeline: view()){
  .art-main{animation:parx linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
  .art-inset{animation:parx-inset linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
  .stats .n{color:transparent}
  .stats .n::before{content:counter(nn);position:absolute;inset:0;color:var(--brand)}
  .stats .n[data-to="555"]{animation:c555 linear both;animation-timeline:view();animation-range:entry 20% entry 85%}
  .stats .n[data-to="7"]{animation:c7 linear both;animation-timeline:view();animation-range:entry 20% entry 85%}
}

/* ---------- find us: the map --------------------------------------------------
   An engraved street map inside the arch, drawn from OpenStreetMap geometry
   (bbox, classes and provenance in CLAUDE.md). Colorado Boulevard is the
   subject and gets the outlined road; everything else is a hairline by class.
   The whole arch is a link to Google Maps directions. A pulsing pin marks
   Suite 204. Attribution is required by the ODbL and stays.
   -------------------------------------------------------------------------- */
.find-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:46px}
.find-head .kicker{display:block;font-family:var(--display);font-size:clamp(17px,1.7vw,24px);
  color:var(--ink-dim);font-variation-settings:'SOFT' 20,'WONK' 0;letter-spacing:.005em;margin:0 0 .3em .06em}
.find-head h2{font-size:clamp(34px,4.4vw,60px);line-height:.98;letter-spacing:-.025em;color:var(--brand);
  font-variation-settings:'SOFT' 60,'WONK' 1;margin-left:-.03em}
.find-head p{max-width:36ch;color:var(--ink-dim);font-size:16.5px;margin:0;padding-bottom:.4em}
.find{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center}
.map-wrap{position:relative;padding:12px;border:1px solid var(--line);
  border-radius:50% 50% 14px 14px / 42% 42% 14px 14px}
.map-arch{position:relative;aspect-ratio:820/745;overflow:hidden;background:var(--paper);
  border:1.5px solid var(--brand);border-radius:50% 50% 4px 4px / 42% 42% 4px 4px}
.map-link{position:absolute;inset:0;z-index:2;border-radius:inherit;
  /* the link has no visible text of its own, so its name cannot mismatch
     the SVG's street labels; axe flagged the previous wrapping <a> for that */
}
.map-link:focus-visible{outline-offset:6px}
.map{width:100%;height:100%;display:block;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.map-wrap:hover .map{transform:scale(1.025)}
.map .rd{fill:none;stroke:var(--brand);stroke-linecap:round;stroke-linejoin:round}
.map .residential{stroke-width:1;opacity:.55}
.map .tertiary{stroke-width:1.6;opacity:.75}
.map .secondary{stroke-width:2.4}
.map .primary{stroke-width:9}
.map .primary-core{stroke-width:6;stroke:var(--paper)}
.map .lbl{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  fill:var(--brand)}
.map .poi rect{fill:var(--brand)}
.map .pin .dot{fill:var(--accent);stroke:var(--paper);stroke-width:3}
.map .pin .pulse{fill:none;stroke:var(--accent);stroke-width:2;opacity:0;
  transform-box:fill-box;transform-origin:center;animation:pulse 2.6s ease-out infinite}
.map .pin .pulse-2{animation-delay:1.3s}
.map .tag rect{fill:var(--paper);stroke:var(--brand);stroke-width:1.2}
.map .tag text{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;fill:var(--brand)}
@keyframes pulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(4.2);opacity:0}}
@supports (animation-timeline: view()){
  .map{animation:drift-map linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
  @keyframes drift-map{from{transform:translateY(-3%) scale(1.07)}to{transform:translateY(3%) scale(1.07)}}
}
.find-info{display:flex;flex-direction:column;gap:26px}
.find-info h3{font-size:22px;letter-spacing:-.01em;margin-bottom:6px}
.addr{font-style:normal;font-family:var(--display);font-size:clamp(20px,1.8vw,24px);line-height:1.35;
  color:var(--ink);margin:0 0 10px}
.upstairs{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11.5px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--accent);border:1px solid var(--accent);
  border-radius:999px;padding:6px 13px}
.find-info p.note{font-size:15px;color:var(--ink-dim);margin:10px 0 0}
.hours-row{display:flex;justify-content:space-between;gap:18px;padding:12px 0;
  border-block:1px solid var(--line);font-size:16.5px}
.hours-row b{font-weight:500;font-family:var(--display);font-size:20px}
.find-cta{display:flex;gap:11px;flex-wrap:wrap}
.osm{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-dim);margin:0}
.osm a{color:inherit}

/* ---------- faq: the accordion, in the system ---------------------------------
   Native <details>, no JavaScript. Kicker plus the section name at scale,
   numbered questions in the display serif, two columns from 1181px.
   -------------------------------------------------------------------------- */
.faq-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:40px}
.faq-head .kicker{display:block;font-family:var(--display);font-size:clamp(17px,1.7vw,24px);
  color:var(--ink-dim);font-variation-settings:'SOFT' 20,'WONK' 0;letter-spacing:.005em;margin:0 0 .3em .06em}
.faq-head h2{font-size:clamp(40px,5.6vw,84px);line-height:.94;letter-spacing:-.03em;color:var(--brand);
  font-variation-settings:'SOFT' 70,'WONK' 1;margin-left:-.03em}
.faq-head p{max-width:34ch;color:var(--ink-dim);font-size:16.5px;margin:0;padding-bottom:.5em}
.faq-list{border-top:1px solid var(--line)}
@media (min-width:1181px){ .faq-list{display:grid;grid-template-columns:1fr 1fr;gap:0 56px;align-items:start} }
details{border-bottom:1px solid var(--line-soft)}
summary{cursor:pointer;padding:22px 40px 22px 0;position:relative;list-style:none;
  font-family:var(--display);font-size:clamp(19px,1.6vw,23px);line-height:1.25;letter-spacing:-.01em;
  font-variation-settings:'SOFT' 40,'WONK' 1;display:flex;gap:18px;align-items:baseline}
summary::-webkit-details-marker{display:none}
.qno{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--brand);flex-shrink:0;
  font-variation-settings:normal;transform:translateY(-.15em)}
summary::after{content:'+';position:absolute;right:6px;top:20px;font-family:var(--display);
  font-size:26px;line-height:1;color:var(--brand);transition:transform .25s ease}
details[open] summary::after{transform:rotate(45deg)}
details p{padding:0 44px 24px 34px;color:var(--ink-dim);margin:0;font-size:16.5px}

/* ---------- footer: voices, then the columns --------------------------------
   Real Google reviews, verbatim, one at a time. Seven <figure>s share one grid
   cell so the block is as tall as the longest quote and nothing shifts; a 49s
   CSS cycle fades each in for seven seconds. Reduced motion shows the first
   quote and stops. No names: the mirrors that carry these strip them, so the
   attribution is the source and the stars.
   -------------------------------------------------------------------------- */
.foot{background:var(--brand-deep);color:var(--on-dark);padding:88px 0 0}
.voices{padding-bottom:64px;border-bottom:1px solid rgba(243,231,214,.2)}
.voices .kicker{display:block;font-family:var(--display);font-size:clamp(17px,1.7vw,24px);
  color:var(--on-dark-dim);font-variation-settings:'SOFT' 20,'WONK' 0;letter-spacing:.005em;
  font-weight:400;margin:0 0 22px .06em;line-height:1.2}
.quotes{display:grid;min-height:1em}
.q{grid-area:1/1;margin:0;opacity:0;animation:qcycle 49s linear infinite;animation-delay:calc(var(--i) * 7s)}
.q blockquote{margin:0;font-family:var(--display);font-size:clamp(26px,3.4vw,50px);line-height:1.1;
  letter-spacing:-.02em;color:var(--on-dark);font-variation-settings:'SOFT' 50,'WONK' 1;max-width:24ch;
  text-wrap:pretty}
.q figcaption{margin-top:20px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--on-dark-dim)}
.stars{color:#D9A3C8;letter-spacing:.08em;margin-right:12px;font-size:13px}
@keyframes qcycle{0%{opacity:0;transform:translateY(10px)}2.2%{opacity:1;transform:none}
  12.4%{opacity:1;transform:none}14.28%{opacity:0;transform:translateY(-6px)}100%{opacity:0}}
.voices-foot{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;margin-top:40px}
.voices-foot p{margin:0;color:var(--on-dark-dim);font-size:16px}
.voices-foot b{font-family:var(--display);font-weight:400;font-size:26px;color:var(--on-dark);margin-right:6px}
.foot-mid{display:flex;justify-content:space-between;gap:34px;flex-wrap:wrap;padding:56px 0 48px}
.foot-mid img{width:200px;height:auto}
.foot-cols{display:flex;gap:64px;flex-wrap:wrap}
.foot-cols h3{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--on-dark-dim);margin:0 0 12px;font-weight:400}
.foot-cols ul{list-style:none;margin:0;padding:0;font-size:15px;line-height:1.9}
.foot-cols a{text-decoration:none;border-bottom:1px solid transparent}
.foot-cols a:hover{border-bottom-color:var(--on-dark)}
.foot-bar{border-top:1px solid rgba(243,231,214,.2);padding:22px 0 30px;
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
  font-size:13.5px;color:var(--on-dark-dim)}
.foot-bar a{text-decoration:none;border-bottom:1px solid rgba(243,231,214,.3)}
.powered .serif-i{font-family:var(--display);font-style:italic;color:#E5A9CE}
.machine{font-size:12.5px;color:var(--on-dark-dim)}

/* ---------- responsive ---------- */
@media (max-width:1180px){
  /* Full-bleed scroll-snap rail. Negative margins undo .wrap's padding so the
     rail runs to the viewport edge; the padding puts it back inside the rail
     so the first card still aligns with the headline. */
  .usuals{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;
    padding:0 var(--pad) 8px;margin:0 calc(-1 * var(--pad));
    scroll-padding-inline:var(--pad);   /* snap respects the padding, or the first card lands at x=0 */
    scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .usuals::-webkit-scrollbar{display:none}
  .dish{flex:0 0 min(78vw,352px);scroll-snap-align:start}
  .dish:nth-child(even){padding-top:0}
  .usuals-cue{display:block}
}
@media (max-width:1020px){
}
@media (max-width:900px){
  .hero-row{flex-direction:column;align-items:flex-start;gap:22px;margin:20px 0 30px}
  .faq-head{flex-direction:column;align-items:flex-start;gap:14px;margin-bottom:26px}
  .faq-head p{padding-bottom:0}
  .usuals-head{flex-direction:column;align-items:flex-start;gap:18px;margin-bottom:38px}
  .usuals-aside{padding-bottom:0}
  .arch{aspect-ratio:4/5;border-radius:50% 50% 4px 4px / 40% 40% 4px 4px}
  .arch-wrap{border-radius:50% 50% 14px 14px / 40% 40% 14px 14px}
  .stamp{top:3%;right:4%}
  .coffee-top,.story,.find{grid-template-columns:1fr;gap:38px}
  .find-head{flex-direction:column;align-items:flex-start;gap:14px;margin-bottom:30px}
  .find-head p{padding-bottom:0}
  .coffee-top{margin-bottom:40px}
  .coffee-aside{padding-bottom:0}
  .portal{aspect-ratio:4/5;border-radius:50% 50% 4px 4px / 40% 40% 4px 4px}
  .portal-wrap{border-radius:50% 50% 14px 14px / 40% 40% 14px 14px}
  .sticker{right:2%}
  .story-art{width:min(100%,420px);margin:0 auto 54px}
  .art-inset{left:0;bottom:-6%}
}
@media (max-width:820px){
  .nav-links{display:none}
  .brand img{width:168px}
}
@media (max-width:700px){
  :root{--pad:20px}
  .band,.coffee{padding:60px 0}
  .stats{grid-template-columns:1fr 1fr;gap:0 10px}
  .stats div:nth-child(3),.stats div:nth-child(4){padding-top:22px}
}
@media (max-width:460px){
  body{font-size:16px}
  .foot-cols{gap:32px}
}
@media (max-width:360px){
  /* At 320px the nav overflowed by 35px. The wordmark and the Order button are
     both flex-shrink:0, deliberately, so neither yields and the row is simply
     wider than the viewport. Shrinking both by hand here is the fix; letting
     either shrink instead squashes the logo rather than scaling it. */
  .nav-in{gap:12px}
  .brand img{width:130px}
  .nav .btn{padding:9px 13px;font-size:10.5px;letter-spacing:.08em}
}
@media (prefers-reduced-motion:reduce){
  /* The video goes, the still underneath stays, so the arch is never empty. */
  .hero-video{display:none}
  .h1-a,.h1-b,.hero-row,.arch-wrap,.stamp,.stamp .ring,.hero-video,.portal-still,.portal video,
  .art-main,.art-inset,.stats .n,.map,.map .pulse,.q{animation:none}
  .q{opacity:1}
  .q:not(:first-child){display:none}
  .stats .n{color:inherit}
  .stats .n::before{content:none}
  .creds ul,.hooks ul{animation:none}
  *{transition:none!important}
}

/* ---------- skip link and the motion control -------------------------------
   Both exist for WCAG. The skip link is the first tab stop. The pause control
   is a checkbox and a label, no JavaScript: body:has(#pause-motion:checked)
   stops every moving thing on the page, videos to their stills, marquees
   frozen, the stamp, the pulse and the review cycle halted. It does not
   persist between pages; the OS reduced-motion setting does, and is honoured
   separately.
   -------------------------------------------------------------------------- */
.skip{position:absolute;left:16px;top:-60px;z-index:100;background:var(--brand);color:var(--paper);
  font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  padding:12px 16px;border-radius:999px;text-decoration:none;transition:top .15s ease}
.skip:focus{top:14px}
.motion-toggle{position:fixed;left:14px;bottom:14px;z-index:60;cursor:pointer;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--brand);background:rgba(247,241,230,.94);border:1px solid var(--line);
  border-radius:999px;padding:8px 13px;backdrop-filter:blur(6px);user-select:none}
.motion-toggle .on{display:none}
#pause-motion:checked ~ .motion-toggle .off{display:none}
#pause-motion:checked ~ .motion-toggle .on{display:inline}
#pause-motion:focus-visible ~ .motion-toggle{outline:2.5px solid var(--accent);outline-offset:3px}
body:has(#pause-motion:checked) .hero-video,
body:has(#pause-motion:checked) .portal video{display:none}
body:has(#pause-motion:checked) .creds ul,
body:has(#pause-motion:checked) .hooks ul,
body:has(#pause-motion:checked) .stamp .ring,
body:has(#pause-motion:checked) .map .pulse{animation-play-state:paused}
body:has(#pause-motion:checked) .hero-still,
body:has(#pause-motion:checked) .portal-still,
body:has(#pause-motion:checked) .map,
body:has(#pause-motion:checked) .art-main,
body:has(#pause-motion:checked) .art-inset,
body:has(#pause-motion:checked) .arch-wrap,
body:has(#pause-motion:checked) .stats .n{animation:none}
body:has(#pause-motion:checked) .stats .n{color:inherit}
body:has(#pause-motion:checked) .stats .n::before{content:none}
body:has(#pause-motion:checked) .q{animation:none;opacity:1}
body:has(#pause-motion:checked) .q:not(:first-child){display:none}

/* ---------- legal pages ------------------------------------------------------
   accessibility.html, privacy.html, terms.html. One article, in the system.
   -------------------------------------------------------------------------- */
.legal{padding:72px 0 96px}
.legal-in{max-width:72ch}
.legal .kicker{display:block;font-family:var(--display);font-size:clamp(17px,1.7vw,24px);
  color:var(--ink-dim);font-variation-settings:'SOFT' 20,'WONK' 0;letter-spacing:.005em;margin:0 0 .35em .06em}
.legal h1{font-size:clamp(38px,5.4vw,76px);line-height:.96;letter-spacing:-.03em;color:var(--brand);
  font-variation-settings:'SOFT' 70,'WONK' 1;margin:0 0 22px -.03em;text-wrap:balance}
.legal .lede{font-size:19px;color:var(--ink-dim);margin:0 0 40px;max-width:56ch}
.legal h2{font-size:clamp(24px,2.3vw,32px);letter-spacing:-.015em;margin:44px 0 12px;color:var(--ink)}
.legal p,.legal li{font-size:17px;line-height:1.65;color:var(--ink)}
.legal ul{padding-left:1.2em;margin:0 0 1em}
.legal li{margin-bottom:.45em}
.legal a{color:var(--brand);text-decoration:none;border-bottom:1.5px solid var(--line);padding-bottom:1px}
.legal a:hover{border-bottom-color:var(--brand)}
.legal .reviewed{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-dim);margin:0 0 28px}
.legal .rule{border:0;border-top:1px solid var(--line);margin:48px 0 0}
.foot--compact{padding-top:0}
.foot-legal{display:flex;gap:18px;flex-wrap:wrap}
.foot-legal a{text-decoration:none;border-bottom:1px solid rgba(243,231,214,.3)}