/* Yogelo home page (/). Phone first (390), then iPad (768+) and desktop (1100+). Tokens from tokens.css only.
   The idea: their own logo, read as a menu board. The pastel blur from their logo appears once, behind the logo. The
   flavours are their own tub photos, square, like looking into the cabinet. The three bands under them are the logo's
   three colours in the logo's order (YO pink, GEL blue, O! yellow), each one thing to order. Everything else is white,
   ink and one deeper berry for actions. */
html { scroll-behavior: smooth; scroll-padding-top: 72px; }
body { background: var(--bg); }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
.wrap { width: 100%; max-width: var(--wide); margin: 0 auto; padding-inline: var(--s-4); }
.skip { position: absolute; inset-inline-start: var(--s-2); top: -60px; z-index: 20; padding: var(--s-3) var(--s-4); background: var(--ink); color: #fff; border-radius: var(--r-sm); }
.skip:focus { top: var(--s-2); }

/* Top bar */
.bar { position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--bg) 96%, transparent); box-shadow: 0 1px 0 var(--line); }
.bar-in { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); min-height: 60px; }
.brand { min-width: 0; }
.brand { display: flex; align-items: center; gap: var(--s-2); text-decoration: none; min-height: 48px; }
.brand img { width: 40px; height: 40px; }
.brand-name { display: none; font-size: 28px; color: var(--ink); padding-top: 2px; }
.demo-badge { display: inline-block; padding: 1px 6px; border-radius: 4px; background: var(--surface-2); color: var(--ink-2); font: 700 12px/1.4 var(--font-body); letter-spacing: .02em; }
.bar-links { display: flex; align-items: center; gap: 2px; }
.bar-links a { flex: none; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0 var(--s-3); border-radius: var(--r-pill); font-weight: 700; font-size: var(--t-md); text-decoration: none; color: var(--ink); }
.bar-links a:hover { background: var(--surface); }
.bar-links .bar-order { margin-inline-start: var(--s-1); background: var(--brand); color: var(--brand-ink); padding: 0 var(--s-4); }
.bar-links .bar-order:hover { background: var(--brand-deep); }

/* Buttons (extends base.css .btn) */
.btn.big { white-space: nowrap; min-height: 56px; padding: 0 var(--s-6); font-size: var(--t-lg); }
.btn.outline { background: var(--bg); box-shadow: inset 0 0 0 2px var(--brand); color: var(--brand); }
.btn.outline:hover { background: var(--pink-soft); box-shadow: inset 0 0 0 2px var(--brand); }
.btn.quiet { background: var(--surface); color: var(--ink); }
.btn.quiet:hover { background: var(--surface-2); }

/* Hero: their logo on their own pastel blur, open or not, two ways to get it; then the cabinet photo. */
.hero { padding: var(--s-3) 0 var(--s-12); }
.hero-in { display: grid; gap: var(--s-5); }
.hero-blur {
  display: grid; place-items: center; padding: var(--s-8) var(--s-6); border-radius: var(--r-lg);
  /* the soft pink, blue and yellow blur of their logo artwork, white in the middle */
  background:
    radial-gradient(55% 65% at 6% 10%, color-mix(in srgb, var(--yo-pink) 78%, transparent), transparent 72%),
    radial-gradient(50% 70% at 100% 38%, color-mix(in srgb, var(--o-yellow) 82%, transparent), transparent 72%),
    radial-gradient(55% 60% at 4% 100%, color-mix(in srgb, var(--gel-blue) 80%, transparent), transparent 72%),
    radial-gradient(45% 50% at 88% 102%, color-mix(in srgb, var(--yo-pink) 55%, transparent), transparent 72%),
    #f8f6fa;
}
.hero h1 { margin: 0; line-height: 0; }
.hero-logo { width: min(232px, 64vw); height: auto; }
.hero-text { padding-inline: var(--s-1); }
.status { display: flex; align-items: center; gap: var(--s-2); margin: var(--s-1) 0 0; font-weight: 800; font-size: var(--t-lg); }
.status .dot { width: 11px; height: 11px; border-radius: 50%; background: var(--ink-3); flex: none; }
.status[data-state="open"] .dot { background: var(--ok); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ok) 18%, transparent); }
.status[data-state="closed"] .dot { background: var(--brand); }
.tagline { margin: var(--s-2) 0 0; font-size: var(--t-lg); line-height: 1.4; color: var(--ink-2); max-width: 34ch; text-wrap: pretty; }
.actions { display: grid; gap: var(--s-3); margin-top: var(--s-5); }
.hero-photo { margin: 0; border-radius: var(--r-lg); overflow: hidden; background: var(--surface); aspect-ratio: 5 / 4; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; }

/* In the cabinet: their own tub photos, square. */
.cabinet { padding-bottom: var(--s-12); }
.sec-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-1) var(--s-4); margin-bottom: var(--s-5); }
.sec-head h2, .visit h2, .about h2 { margin: 0; font-size: var(--t-4xl); color: var(--ink); }
.sec-sub { margin: 0; font-weight: 800; font-size: var(--t-lg); color: var(--brand); font-variant-numeric: tabular-nums; }
.tubs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5) var(--s-3); }
.tub { display: block; text-decoration: none; border-radius: var(--r-lg); }
.tub-ph { display: block; border-radius: var(--r-lg); overflow: hidden; background: var(--surface); aspect-ratio: 1; }
.tub-ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease); }
.tub-name { display: block; margin-top: var(--s-2); font-weight: 800; font-size: var(--t-lg); line-height: 1.2; text-wrap: balance; }
.tub-note { display: block; margin-top: 2px; font-size: var(--t-sm); font-weight: 600; color: var(--ink-3); }
.tub:hover .tub-name { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.tub:hover .tub-ph img { transform: scale(1.03); }
.tub.gone .tub-ph img { filter: grayscale(1); opacity: .55; }
.tub.gone .tub-note { color: var(--brand); }
.more-btn { width: 100%; margin-top: var(--s-6); }

/* The board: three full-width bands in the logo's colours, one thing each. */
.board-list { list-style: none; margin: 0; padding: 0; }
.board-list a {
  display: grid; grid-template-columns: 1fr auto; grid-template-areas: "name price" "line price"; align-items: center; column-gap: var(--s-4);
  width: 100%; max-width: var(--wide); margin: 0 auto; padding: var(--s-6) var(--s-4); text-decoration: none; color: var(--ink);
}
.b-pink { background: var(--yo-pink); }
.b-blue { background: var(--gel-blue); }
.b-yellow { background: var(--o-yellow); }
.board-list li { transition: background-color .15s; }
.b-pink:hover { background: color-mix(in srgb, var(--yo-pink) 88%, var(--ink)); }
.b-blue:hover { background: color-mix(in srgb, var(--gel-blue) 88%, var(--ink)); }
.b-yellow:hover { background: color-mix(in srgb, var(--o-yellow) 88%, var(--ink)); }
.b-name { grid-area: name; font: 400 var(--t-3xl)/1 var(--font-display); text-transform: uppercase; letter-spacing: .01em; }
.b-line { grid-area: line; margin-top: var(--s-1); font-weight: 600; font-size: var(--t-md); line-height: 1.35; }
.b-price { grid-area: price; font: 400 var(--t-3xl)/1 var(--font-display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.board-list a:focus-visible { outline-offset: -4px; border-radius: 0; }

/* Visit */
.visit { padding: var(--s-12) 0; }
.visit-grid { display: grid; gap: var(--s-10); margin-top: var(--s-6); }
.label { margin: 0 0 var(--s-2); font-weight: 800; font-size: var(--t-sm); color: var(--ink-3); }
.v-block .big { margin: 0 0 var(--s-4); font: 400 var(--t-3xl)/1.05 var(--font-display); text-transform: uppercase; letter-spacing: .01em; }
.v-hours table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.v-hours th, .v-hours td { padding: 10px var(--s-3); text-align: start; font-weight: 600; border-bottom: 1px solid var(--line); }
.v-hours th { padding-inline-start: var(--s-3); }
.v-hours td { text-align: end; }
.v-hours tr.today th, .v-hours tr.today td { background: var(--yellow-soft); font-weight: 800; border-bottom-color: transparent; }
.v-hours tr.today th { border-radius: var(--r-md) 0 0 var(--r-md); }
.v-hours tr.today td { border-radius: 0 var(--r-md) var(--r-md) 0; }
.v-hours tr.today th::after { content: " (today)"; font-weight: 600; color: var(--ink-2); }
.contact { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-1); }
.contact a { display: inline-flex; align-items: center; gap: var(--s-3); min-height: 48px; font-weight: 700; color: var(--brand); text-decoration: none; overflow-wrap: anywhere; }
.contact a:hover span { text-decoration: underline; text-underline-offset: 4px; }
.contact svg { flex: none; color: var(--ink); }

/* About */
.about { display: grid; gap: var(--s-6); padding-bottom: var(--s-16); }
.about-photo { margin: 0; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 3 / 2; background: var(--wall); }
.about-photo img { width: 100%; height: 100%; object-fit: cover; }
.about-text p { margin: var(--s-4) 0 0; font-size: var(--t-lg); line-height: 1.55; max-width: 58ch; }

/* Footer */
.foot { background: var(--surface); padding: var(--s-10) 0 calc(var(--s-10) + env(safe-area-inset-bottom)); }
.foot-in { display: grid; gap: var(--s-5); justify-items: start; }
.foot-logo { width: 120px; height: auto; }
.foot p { margin: 0; color: var(--ink-2); }
.foot-links { display: flex; flex-wrap: wrap; gap: 0 var(--s-5); margin-top: var(--s-2) !important; }
.foot-links a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; font-weight: 700; color: var(--ink); text-underline-offset: 4px; }
.foot-links a:hover { color: var(--brand); }

@media (min-width: 420px) {
  .brand-name { display: inline; }
}
@media (min-width: 600px) {
  .actions { grid-auto-flow: column; justify-content: start; }
  .tubs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .more-btn { width: auto; }
  .board-list a { padding: var(--s-8) var(--s-6); }
  .wrap { padding-inline: var(--s-6); }
  .b-name, .b-price { font-size: var(--t-4xl); }
}
@media (min-width: 768px) {
  .visit-grid { grid-template-columns: 1fr 1fr; }
  .v-contact { grid-column: 1; }
  .about { grid-template-columns: 1fr 1fr; align-items: center; gap: var(--s-10); }
  .foot-in { grid-template-columns: auto 1fr; align-items: center; gap: var(--s-8); }
}
@media (min-width: 900px) {
  .hero { padding-top: var(--s-6); }
  .hero-in { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--s-6); align-items: stretch; }
  .hero-card { display: flex; flex-direction: column; }
  .hero-blur { flex: 1; padding: var(--s-10); }
  .hero-logo { width: 260px; }
  .hero-text { padding: var(--s-6) var(--s-1) 0; }
  .hero-photo { aspect-ratio: auto; min-height: 560px; }
  .tubs { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-8) var(--s-5); }
  .sec-head h2, .visit h2, .about h2 { font-size: var(--t-5xl); }
  .board-list a { padding: var(--s-8) var(--s-6); }
  .visit-grid { grid-template-columns: 1fr 1.2fr 1fr; gap: var(--s-10); }
  .v-contact { grid-column: auto; }
}
@media (min-width: 1100px) {
  .hero-logo { width: 300px; }
  .b-name, .b-price { font-size: var(--t-5xl); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .tub-ph img { transition: none; }
  .tub:hover .tub-ph img { transform: none; }
}
@media (max-width: 359px) {
  .bar-links a { padding: 0 var(--s-2); }
  .bar-links .bar-order { padding: 0 var(--s-3); }
}
.status { align-items: flex-start; }
.status .dot { margin-top: .42em; }