/* 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; }
  /* Phone footer (Ty: "everything in random places"): one column with one rhythm. Logo, then address and
     email as one block, Instagram and Order online as two equal buttons, then the year and Owner login on the
     left with Akibon clearly on the right. */
  footer { padding-block: 40px 76px; }
  .foot { display: grid; gap: 20px; padding-bottom: 0; }
  .foot__logo { font-size: 26px; }
  .foot__where { gap: 6px; margin: 0; }
  .foot__where a { font-size: 15px; color: var(--ash); }
  .foot__links { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .foot__links a { display: flex; align-items: center; justify-content: center; min-height: 46px; border: 1px solid var(--line); border-radius: 999px; font-weight: 600; color: var(--cream); }
  .foot__links a[href*="order.online"] { background: var(--yellow); border-color: var(--yellow); color: var(--void); }
  .colophon { margin-top: 28px; padding-top: 18px; flex-direction: column; gap: 10px; }
  /* The edge fade on swipeable rows: a soft hint, not a smear over the white review cards. */
  .reels, .grp__rail, #reviewList { --fade-w: 16px; }
  .colophon__end { display: flex; justify-content: space-between; gap: 12px; }
  .colophon__dot { display: none; }
  /* Room for the round "back to top" button, which otherwise sits on "Akibon Studio". */
  footer { padding-bottom: 76px; }
}

/* Touchscreens (Ty, 2026-10-04): natural momentum, like any app, and no CSS snapping: it carried swipes on
   to a further card ("random boost"). main.js eases the rail to the nearest card edge once it rests. */
@media (pointer: coarse) {
  .reels, .grp__rail { scroll-snap-type: none; }
}


/* The footer address opens this card straight away: copy it, open the mail app or Gmail. */
.mailpop {
  position: fixed; left: 50%; bottom: 20px; z-index: 300;
  width: min(460px, calc(100% - 32px)); padding: 18px 20px 16px;
  border: 1px solid var(--line); border-radius: 16px; background: var(--void-2); color: var(--ash);
  box-shadow: 0 24px 60px rgba(0,0,0,.6);
  opacity: 0; transform: translate(-50%, 14px); transition: opacity .25s ease, transform .25s ease;
}
.mailpop.is-on { opacity: 1; transform: translate(-50%, 0); }
.mailpop p { margin: 0 0 4px; font-size: .9rem; color: var(--ash-quiet); }
.mailpop strong { display: block; margin: 0 0 14px; color: var(--cream); font-size: 1.05rem; overflow-wrap: anywhere; }
.mailpop__row { display: flex; gap: 10px; flex-wrap: wrap; }
.mailpop__row > * { flex: 1 1 110px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; font: 700 15px var(--body); text-decoration: none; cursor: pointer; }
.mailpop__copy { border: 0; background: var(--yellow); color: var(--void); }
.mailpop__row a { border: 1px solid var(--line); color: var(--cream); }
.mailpop__x { position: absolute; top: 6px; right: 10px; border: 0; background: none; color: var(--ash-dim); font-size: 22px; line-height: 1; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .mailpop { transition: none; } }