/* Layout and component geometry come from the supplied reference.css. */
:root {
  --void: #0C1012;
  --void-2: #151B1E;
  --void-3: #20282D;
  --yellow: #02B0F5;
  --coral: #02A2E2;
  --wall: #027EB0;
  --pink: #8EDCFA;
  --cream: #F4F6F7;
  --ash: #D1D9DE;
  --ash-quiet: #B9C5CC;
  --ash-dim: #9BAAB3;
  --line: #303C44;
  --boujee: var(--display);
}
body, body * { letter-spacing: 0 !important; }
/* The template styles .btn and friends with display, which beats the hidden attribute: hidden always wins here. */
[hidden] { display: none !important; }
.brand-accent { color: var(--yellow); }
.wordmark { font-size: 112px; line-height: .9; }
.wordmark > span { display: block; color: var(--pink); }
.room__lede { font-size: 21px; }
.room__lede em { display: block; }
.sec-title { font-size: 40px; }
.hero-floor { margin-top: 72px; }
.floor { background-color: var(--yellow); }
.counter .tile {
  margin-block: 0; padding: 0; text-align: inherit;
  /* Keep the reference shadow; add contact depth on the cooler near-black. */
  box-shadow:
    0 16px 32px -4px rgba(0,0,0,.95),
    0 24px 50px -22px rgba(0,0,0,.95);
}
.tile img { object-fit: cover; }
.wall__head .sec-title { margin: 0; }
.wall__head .eyebrow { margin: 10px 0 0; }
.wall__more:disabled { opacity: 0; pointer-events: none; }
.reels .tile { display: block; width: 100%; padding: 0; text-align: inherit; }
.reels .tile:focus-visible, .counter .tile:focus-visible { outline: 2px solid var(--yellow); outline-offset: -3px; }
.reels .said { gap: 0; padding: 24px 14px 12px; background: linear-gradient(to top, rgba(12,16,18,.85), transparent); }
.said__source { font: 10px/1.3 var(--mono); color: var(--ash); text-decoration: underline; text-underline-offset: 3px; }
.tile.talking .said__source { pointer-events: auto; }
.said__source:hover, .said__source:focus-visible { color: var(--yellow); }
.wall__more { background: rgba(12,16,18,.86); }
.btn--y:hover, .direct__btn:hover { background: #68D1FA; }
.grp__name { color: var(--yellow); font-family: var(--body); font-weight: 800; text-transform: uppercase; }
.grp__rail { scroll-behavior: auto; }
.fl { opacity: 1; transform: none; }
.fl__shot img { object-fit: cover; }
.fl__more { background: linear-gradient(to top, rgba(12,16,18,.98), rgba(12,16,18,.8) 80%, transparent); }
.fl__more p { color: var(--cream); }
.fl__line { align-items: start; min-height: 48px; }
.fl__name { min-width: 0; overflow-wrap: anywhere; }
.grp__rail.is-short { justify-content: flex-start; }
.menu-note { margin-top: 24px; }
/* Review cards are the template's again; only the empty star of a 4-star review is new. */
.grc__off { color: #DADCE0; }
.totop.is-on:hover { box-shadow: 0 10px 26px rgba(2,176,245,.25); }
.place__shot img { object-fit: cover; }
.place__shot--lead img { object-position: 50% 15%; }
.place__shot:nth-child(2) img { object-position: 50% 38%; }
.place__shot:nth-child(3) img { object-position: 50% 55%; }
.map { position: relative; }
.map iframe { pointer-events: none; }
.map--live iframe { pointer-events: auto; }
.map__tools { top: auto; bottom: 40px; left: 50%; transform: translateX(-50%); white-space: nowrap; }
.visit-actions { margin-top: 18px; }
.foot__logo { font: 800 28px var(--display); text-decoration: none; color: var(--cream); }
.rise { opacity: 1; transform: none; }
@media (min-width: 940px) and (max-width: 1180px) { .wordmark { font-size: 88px; } }
@media (max-width: 939px) { .wordmark { font-size: 104px; } .hero-floor { margin-top: 52px; } }
@media (max-width: 720px) {
  .wordmark { font-size: 80px; }
  .room__lede { font-size: 19px; }
  .sec-title { font-size: 32px; }
  .top__in { gap: 10px; }
  .top__now { margin-left: auto; }
  .top__detail { display: none; }
  .cartlink { min-height: 36px; padding-inline: 12px; }
  .cartlink__label { display: inline; font-size: 12px; }
  .cartlink__box { display: none; }
  .top__brand { font-size: 15px; }
}
@media (max-width: 380px) {
  .wordmark { font-size: 72px; }
  .top__in { padding-inline: 12px; gap: 8px; }
  .top__state { font-size: 11px; }
  .sec-title { font-size: 29px; }
}

/* Story: the cafe's own words from kafedaki.ca beside their own spread photo (their Order Online header).
   Same columns as the order block, so the section costs no extra height. Team portraits wait for a real shoot:
   the Instagram crops were selfies and social graphics. */
.story { display: grid; gap: 26px; align-items: center; }
@media (min-width: 900px) { .story { grid-template-columns: 1fr minmax(380px, 520px); gap: clamp(32px, 3.4vw, 56px); } }
.story .sec-lede { margin-bottom: 18px; }
.story__since { margin: 0; font-size: .91rem; color: var(--ash-quiet); }
.story__shot { margin: 0; border-radius: 10px; overflow: hidden; }
.story__shot img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }

/* Offline map: a drawn corner of Oakwood and Conway in the page's own colours. Only shown without internet. */
.map__offline { position: absolute; inset: 0; z-index: 2; background: var(--void-2); }
.map__offline svg { display: block; width: 100%; height: 100%; }
.map--offline iframe, .map--offline .map__cover, .map--offline .map__tools { visibility: hidden; }
.mo-ground { fill: var(--void-2); }
.mo-road { stroke: var(--void-3); stroke-width: 16; fill: none; stroke-linecap: round; }
.mo-road--main { stroke-width: 22; }
.mo-label { font: 500 9px var(--mono, monospace); letter-spacing: .14em; fill: var(--ash-dim); }
.mo-pin { fill: var(--yellow); }
.mo-dot { fill: var(--void); }
.mo-name { font: 800 15px var(--display, sans-serif); fill: var(--cream); }
.mo-sub { font: 400 11px var(--body, sans-serif); fill: var(--ash-quiet); }

/* Phones (2026-10-04, Ty): the hero clips move into the wall, the reviews swipe across the full width
   without arrows, and the footer note stacks into three short lines. */
.reel--phone { display: none; }
.colophon a { color: inherit; }
@media (max-width: 620px) {
  .room .counter { display: none; }
  .reel--phone { display: block; }
  .gr__deck { grid-template-columns: minmax(0, 1fr); column-gap: 0; }
  .gr__arrow { display: none; }
  #reviewList { grid-column: 1; }
  .colophon { flex-direction: column; gap: 8px; }
}

/* Touchscreens (Ty, 2026-10-04): a hard swipe flew past several videos or products. Each swipe now stops at
   the next card, however hard it is. */
@media (pointer: coarse) {
  .reels, .grp__rail { scroll-snap-type: x mandatory; }
  .reel, .fl { scroll-snap-stop: always; }
}