/* The home page (site-lab, picked 2026-10-23): one phone and a sun dial that moves the phone and the page through the
   day. home.js sets every color token on :root along the dial. Directions explored: design/site-lab/. */
@font-face { font-family: "Fira Sans"; font-weight: 300; font-display: swap; src: url("/fonts/fira-sans-300-latin.woff2") format("woff2"); }
@font-face { font-family: "Fira Sans"; font-weight: 400; font-display: swap; src: url("/fonts/fira-sans-400-latin.woff2") format("woff2"); }
@font-face { font-family: "Fira Sans"; font-weight: 500; font-display: swap; src: url("/fonts/fira-sans-500-latin.woff2") format("woff2"); }
@font-face { font-family: "Fira Sans"; font-weight: 600; font-display: swap; src: url("/fonts/fira-sans-600-latin.woff2") format("woff2"); }
@font-face { font-family: "Fira Sans"; font-weight: 700; font-display: swap; src: url("/fonts/fira-sans-700-latin.woff2") format("woff2"); }

:root {
  --page: #f6f0e4; --ink: #24222d; --sub: #615c68; --hair: #ddd3c1; --accent: #17607a; --accent-hover: #0f4658;
  /* Day values; home.js moves every token along the dial. */
  --surface: #fbf7ee; --hair-strong: #c9bfae; --road: #fdfaf3; --casing: #2b2a35; --night: 0;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; position: relative; overflow-x: hidden;
  background: var(--page); color: var(--ink);
  font: 500 17px/1.55 "Fira Sans", system-ui, -apple-system, sans-serif;
  -webkit-tap-highlight-color: transparent;
}
a { color: var(--accent); }
a:hover { color: var(--accent-hover); }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

.wrap {
  max-width: 1200px; margin: 0 auto;
  padding-left: max(20px, env(safe-area-inset-left, 0px));
  padding-right: max(20px, env(safe-area-inset-right, 0px));
}
.top, main, footer { position: relative; z-index: 1; }

.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 24px; padding-bottom: 24px; }
.mark { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 18px; letter-spacing: -0.01em; color: var(--ink); text-decoration: none; }
.mark:hover { color: var(--ink); }
.mark img { width: 32px; height: 32px; border-radius: 7.5px; box-shadow: 0 0 0 1px rgba(36, 34, 45, 0.08); }
.top nav { display: flex; gap: 28px; font-size: 15px; }
.top nav a { color: var(--sub); text-decoration: none; }
.top nav a:hover { color: var(--accent); }

.lede { margin: 0; font-size: 20px; font-weight: 300; line-height: 1.5; color: var(--sub); text-wrap: balance; }
/* A phone around a real screen of the game (the 1320 × 2868 capture frames). */
.phone {
  flex: 0 0 auto; width: min(340px, 86vw); margin: 0 auto; padding: 11px; border-radius: 54px; background: #0c0e13;
  box-shadow: 0 0 0 1px rgba(36, 34, 45, 0.14), 0 40px 80px -32px rgba(36, 34, 45, 0.5);
}
.phone img { display: block; width: 100%; height: auto; border-radius: 43px; }

/* ─── A · Time of day (/): one phone, one slider, the page follows the light ─────────────────── */

.hero-dial { padding-top: 24px; padding-bottom: 96px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 48px 56px; }
.hero-dial .copy { flex: 1 1 420px; min-width: 0; max-width: 620px; display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.hero-dial h1 { margin: 0; font-size: clamp(40px, 4.8vw, 68px); line-height: 1.02; letter-spacing: -0.035em; font-weight: 600; text-wrap: balance; }

.store-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 8px; }
.store-badge {
  display: inline-flex; align-items: center; gap: 12px; height: 56px; padding: 0 22px 0 16px; border-radius: 10px;
  box-shadow: inset 0 0 0 1.5px var(--hair-strong); color: var(--ink);
}
.store-badge svg { flex: none; color: var(--sub); }
.store-badge span { display: flex; flex-direction: column; line-height: 1.15; }
.store-badge small { font-size: 12px; color: var(--sub); }
.store-badge strong { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
/* One black button at every time of day: Apple's badge without its outline (Mahdi's call), and a white QR directly on the fill, whose
   quiet zone is that fill. The large QR opens on hover, keyboard focus or click (home.js). */
.store-unit { position: relative; flex: none; display: flex; height: 56px; border-radius: 9.5px; background: #000; }
.store-link { display: block; flex: none; border-radius: 9.5px; }
.store-link img { display: block; height: 56px; width: auto; }
.store-link:focus-visible { border-radius: 9.5px; }
.qr-code {
  flex: none; display: block; width: 54px; height: 56px; padding: 4px 4px 4px 2px; border: 0; border-radius: 0 9.5px 9.5px 0;
  background: none; cursor: pointer;
}
.qr-code img { display: block; width: 48px; height: 48px; transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1); }
.qr-code:active img { transform: scale(0.95); }
.qr-code:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.qr-pop {
  --dx: 0px; --ox: 50%;
  position: absolute; z-index: 10; left: 0; top: calc(100% + 10px); width: min(278px, calc(100vw - 24px)); padding: 16px; border-radius: 16px;
  background: #000; color: #fff; text-align: center;
  box-shadow: 0 0 0 1px rgba(36, 34, 45, 0.1), 0 14px 28px -14px rgba(0, 0, 0, 0.5);
  opacity: 0; visibility: hidden; transform: translateX(var(--dx)) scale(0.96); transform-origin: var(--ox) top;
  transition: opacity 150ms cubic-bezier(0.23, 1, 0.32, 1), transform 150ms cubic-bezier(0.23, 1, 0.32, 1), visibility 0s linear 150ms;
}
.qr-pop[data-side="top"] { top: auto; bottom: calc(100% + 10px); transform-origin: var(--ox) bottom; }
.qr-pop.open { opacity: 1; visibility: visible; transform: translateX(var(--dx)) scale(1); transition: opacity 200ms cubic-bezier(0.23, 1, 0.32, 1), transform 200ms cubic-bezier(0.23, 1, 0.32, 1); }
/* Covers the gap to the unit, so the pointer can cross it without closing the panel. The panel starts at the unit's left edge and is wider, so this holds from any point on it. */
.qr-pop::before { content: ""; position: absolute; z-index: -1; inset: -12px 0; }
.qr-pop img { display: block; width: 100%; height: auto; }
.qr-pop p { margin: 8px 0 0; font-size: 14px; font-weight: 300; line-height: 1.35; }
/* You can't scan your own phone's screen. */
@media (max-width: 767px) and (pointer: coarse) { .qr-code, .qr-pop { display: none; } }

.dial { flex: 0 1 340px; min-width: 0; margin: 0 auto; display: flex; justify-content: center; }
.dial .phone { width: min(292px, 76vw); padding: 10px; border-radius: 50px; }
.screen { position: relative; aspect-ratio: 1320 / 2868; border-radius: 40px; overflow: hidden; background: #1b1f27; }
.screen img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 0; opacity: 0; }
.screen img:first-child { opacity: 1; }

/* The time of day: the sun arcs down and sets behind a horizon line, then the moon rises. Drag anywhere on it. */
.sundial { position: relative; width: 100%; margin-top: 20px; cursor: ew-resize; touch-action: pan-y; user-select: none; -webkit-user-select: none; border-radius: 16px; }
.sundial:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 6px; }
.sundial svg { display: block; width: 100%; height: auto; overflow: visible; }
.sundial .trail { fill: none; stroke: var(--sub); stroke-opacity: 0.5; stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 0 7; }
.sundial .horizon { stroke: var(--hair); stroke-width: 1; vector-effect: non-scaling-stroke; }
.sundial .stars circle { fill: var(--ink); opacity: calc(var(--night) * 0.7); }
/* The dial sits above the headline, as wide as the headline's longest line (home.js sizes it). */
.dial-above .sundial { margin: 0 0 -20px; }

/* Until someone touches it, the sun breathes: the hint that it can be dragged. */
.sundial #sun-glow { opacity: 0.28; transform-box: fill-box; transform-origin: center; animation: breathe 2.6s ease-in-out 2.4s infinite; }
.sundial.touched #sun-glow { animation: none; }
@keyframes breathe { 0%, 100% { opacity: 0.28; transform: scale(1); } 50% { opacity: 0.5; transform: scale(1.35); } }

/* The load-in: the hero rises in order, the horizon draws itself, the sun's path fades in. */
.hero-dial h1, .hero-dial .lede, .hero-dial .sundial, .hero-dial .dial { animation: rise 700ms cubic-bezier(0.2, 0, 0, 1) backwards; }
.hero-dial .lede { animation-delay: 80ms; }
.hero-dial .sundial { animation-delay: 240ms; }
.hero-dial .dial { animation-delay: 120ms; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
.sundial .horizon { transform-box: fill-box; transform-origin: left center; animation: draw-line 900ms cubic-bezier(0.2, 0, 0, 1) 400ms backwards; }
@keyframes draw-line { from { transform: scaleX(0); } }
.sundial .trail { animation: fade-in 900ms ease-out 800ms backwards; }
@keyframes fade-in { from { opacity: 0; } }
.sundial #moon { fill: #f3ede2; stroke: rgba(36, 34, 45, 0.25); stroke-width: 1; }
.sundial input { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; opacity: 0; overflow: hidden; clip-path: inset(50%); }

/* The three features as cards, each with its own picture. */
.features { padding-bottom: 104px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.feature { min-width: 0; background: var(--surface); border-radius: 24px; padding: 24px; display: flex; flex-direction: column; gap: 22px; }
.feature .visual { height: 232px; }
.feature h2 { margin: 0 0 6px; font-size: 20px; font-weight: 500; letter-spacing: -0.005em; }
.feature p { margin: 0; font-size: 16px; line-height: 1.5; color: var(--sub); }
@media (max-width: 900px) { .features { grid-template-columns: minmax(0, 1fr); } }

/* Each feature's picture is the same fan of three portrait cards, so the three carry the same weight. */
.fan { position: relative; width: 100%; height: 100%; }
.fan > * {
  position: absolute; left: 50%; top: 50%; width: 128px; height: 180px; margin: -90px 0 0 -64px; border-radius: 14px; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(36, 34, 45, 0.1), 0 14px 28px -14px rgba(0, 0, 0, 0.5);
  transition: transform 320ms cubic-bezier(0.2, 0, 0, 1);
}
.fan > :nth-child(1) { transform: translateX(-66px) translateY(8px) rotate(-8deg); }
.fan > :nth-child(2) { z-index: 1; transform: translateY(-6px); }
.fan > :nth-child(3) { transform: translateX(66px) translateY(8px) rotate(8deg); }
.feature:hover .fan > :nth-child(1) { transform: translateX(-80px) translateY(10px) rotate(-11deg); }
.feature:hover .fan > :nth-child(3) { transform: translateX(80px) translateY(10px) rotate(11deg); }
.fan img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.fan .chip {
  position: absolute; left: 8px; bottom: 8px; padding: 3px 8px; border-radius: 999px; background: rgba(255, 251, 243, 0.94);
  font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #24222d;
}
.day-card {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 14px 10px; text-align: center;
  background: color-mix(in srgb, var(--ink) 78%, var(--page)); color: var(--page);
}
.day-card.today { background: var(--ink); }
.day-card small { font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.75; }
.day-card b { font-size: 46px; font-weight: 600; line-height: 1; letter-spacing: -0.03em; }
.day-card .city { margin-top: 8px; font-size: 15px; font-weight: 500; line-height: 1.2; }
.day-card .twist { font-size: 11px; opacity: 0.7; }
.day-card .now {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%); padding: 2px 8px; border-radius: 999px;
  background: var(--page); color: var(--ink); font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
}
.day-card.today small { margin-top: 18px; }

/* The footer: the game's loop drawn as one street, a car going from home to the shop and back. */
.foot { padding-top: 8px; }
.street { position: relative; height: 72px; margin-bottom: 48px; }
.street .band { position: absolute; left: 56px; right: 108px; top: 26px; height: 20px; background: var(--road); border-top: 3px solid var(--casing); border-bottom: 3px solid var(--casing); box-sizing: content-box; margin-top: -3px; }
.street .home { position: absolute; left: 20px; top: 18px; width: 36px; height: 36px; border-radius: 8px; background: #d4553a; box-shadow: inset 0 0 0 3px var(--casing); display: flex; align-items: center; justify-content: center; }
.street .home::after { content: ""; width: 12px; height: 12px; border-radius: 50%; background: #fdfaf3; }
.street .shop { position: absolute; right: 20px; top: 8px; width: 88px; height: 56px; border-radius: 10px; background: #f2c9bd; box-shadow: inset 0 0 0 3px var(--casing); display: grid; grid-template-columns: repeat(3, 10px); gap: 8px 12px; align-content: center; justify-content: center; }
.street .shop i { width: 10px; height: 10px; border-radius: 50%; background: #d4553a; }
.street .car { position: absolute; top: 29px; left: 60px; width: 24px; height: 14px; border-radius: 4px; background: #d4553a; box-shadow: inset 0 0 0 2px var(--casing); animation: drive 14s ease-in-out infinite; }
.street .car::after { content: ""; position: absolute; left: 100%; top: 1px; width: 26px; height: 12px; background: linear-gradient(90deg, rgba(255, 210, 122, 0.85), rgba(255, 210, 122, 0)); clip-path: polygon(0 35%, 100% 0, 100% 100%, 0 65%); opacity: var(--night); }
@keyframes drive {
  0%, 6% { left: 60px; transform: scaleX(1); }
  44% { left: calc(100% - 136px); transform: scaleX(1); }
  50% { left: calc(100% - 136px); transform: scaleX(-1); }
  94%, 100% { left: 60px; transform: scaleX(-1); }
}
.foot-grid { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 32px 64px; padding-bottom: 48px; font-weight: 300; }
.foot-brand { flex: 0 1 420px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.foot-brand .name { display: flex; align-items: center; gap: 12px; font-size: 22px; font-weight: 400; letter-spacing: -0.01em; }
.foot-brand .name img { width: 44px; height: 44px; border-radius: 10px; }
.foot-brand p { margin: 0; color: var(--sub); font-size: 16px; }
.foot-col { flex: 0 0 auto; min-width: 140px; display: flex; flex-direction: column; gap: 10px; font-size: 16px; }
.foot-col h3 { margin: 0 0 4px; font-size: 12px; font-weight: 400; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sub); }
.foot-col a { color: var(--ink); text-decoration: none; }
.foot-col a:hover { color: var(--accent); }
.foot-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-top: 20px; padding-bottom: 40px; border-top: 1px solid var(--hair); font-size: 14px; font-weight: 300; color: var(--sub); }
.foot-base a { color: var(--sub); }
.foot-base a:hover { color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .sundial #sun-glow, .hero-dial h1, .hero-dial .lede, .hero-dial .sundial, .hero-dial .dial,
  .sundial .horizon, .sundial .trail { animation: none; }
  .street .car { animation: none; }
  .fan > * { transition: none; }
  .qr-code img { transition: none; }
  .qr-code:active img { transform: none; }
  .qr-pop { transform: translateX(var(--dx)); transition: opacity 150ms ease-out, visibility 0s linear 150ms; }
  .qr-pop.open { transition: opacity 200ms ease-out; }
}