/* ============================================================================
   REVEAL — a motion-and-type storefront skin.
   Loaded AFTER styles.css: the classic sheet supplies structure for every
   component the storefront JS builds, this sheet supplies the identity —
   fog paper, ink type, one ultramarine accent, hairline rules, no shadows,
   and headings that arrive rather than appear.
   ========================================================================== */
:root {
  color-scheme: light;
  --graphite: #515861;
  /* palette */
  --fog: #eceef1;
  --ink: #15171c;
  --ultra: #2f3be4;
  --graphite: #6b7078;
  --hairline: #d3d6dc;

  /* re-point the classic tokens at the reveal palette */
  --muted: var(--graphite);
  --line: var(--hairline);
  --line-strong: #c3c7cf;
  --paper: var(--fog);
  --panel: #ffffff;
  --wash: #e4e7ec;
  --accent: var(--ultra);
  --pop: var(--ultra);
  --ok: #0a7c42;

  /* squarer than classic: this design is drawn with rules, not pills */
  --radius: 6px;
  --radius-sm: 4px;
  --shadow: 0 30px 70px rgba(21, 23, 28, 0.14);
  --shadow-soft: none;

  --display: "Space Grotesk", system-ui, sans-serif;
  --body: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --cfx-accent: var(--ultra);
}

body {
  background: var(--fog);
  font-family: var(--body);
  letter-spacing: 0;
}
h1, h2, h3, .brand-word, .card-price, .detail-title, .drawer-head h2, .modal-head h2 {
  font-family: var(--display);
  letter-spacing: -0.02em;
}
::selection { background: var(--ultra); color: #fff; }
:focus-visible { outline: 2px solid var(--ultra); outline-offset: 3px; }

/* ---------- shared bits ---------- */
.kicker, .eyebrow {
  display: block;
  font-family: var(--body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #515861;
}

/* ---------- top bar ---------- */
.topbar {
  background: rgba(236, 238, 241, 0.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hairline);
}
.glassnav {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 14px clamp(16px, 6vw, 48px);
  background: none;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
}
.glassnav .brand { margin-right: auto; }
.brand-mark {
  border-radius: 4px;
  background: var(--ink);
  color: var(--fog);
  font-family: var(--display);
}
.brand-word { font-weight: 700; text-transform: none; }
.pill {
  border-radius: 999px;
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 9px 16px;
  transition: background 0.18s ease, color 0.18s ease;
}
.pill:hover { background: var(--ink); color: var(--fog); }
.pill.is-active, .pill[aria-current="page"] { background: var(--ink); color: var(--fog); }
.cart-badge {
  background: var(--ultra);
  color: #fff;
  border-radius: 999px;
  font-family: var(--body);
  font-size: 11px;
}
.pill-cart:hover .cart-badge { background: #fff; color: var(--ultra); }

/* ---------- hero ---------- */
.hero {
  max-width: 1400px;
  margin: 0 auto;
  padding: 9vh clamp(16px, 6vw, 48px) 7vh;
  border-bottom: 1px solid var(--hairline);
  text-align: left;
}
.hero .kicker { margin-bottom: 22px; }
.hero-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(42px, 8.5vw, 112px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  min-height: 1.05em;
}
.hero-sub {
  max-width: 46ch;
  margin-top: 26px;
  font-size: 15px;
  line-height: 1.65;
  color: #515861;
}
.hero-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 20px;
  margin-top: 30px;
}
.hero-chip {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.3ch;
  /* Reserve room for the longest city so a rotation never nudges the button
     sitting next to it — a click target must not move under the pointer. */
  min-width: min(26em, 100%);
  padding: 8px 14px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: #fff;
  font-size: 13px;
  color: #515861;
}
.hero-chip .cfx { color: var(--ink); font-weight: 600; }
.btn { border-radius: 999px; font-weight: 500; letter-spacing: 0.06em; }
.btn-primary { background: var(--ink); color: var(--fog); border: 1px solid var(--ink); }
.btn-primary:hover { background: #000; }
.btn-ghost { border: 1px solid var(--ink); background: transparent; color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--fog); }
.btn-hero { text-transform: uppercase; font-size: 12px; padding: 12px 22px; }

/* ---------- shop ---------- */
.shop-head {
  max-width: 1400px;
  margin: 0 auto;
  padding: 8vh clamp(16px, 6vw, 48px) 0;
  text-align: left;
}
.shop-head h2 {
  font-size: clamp(32px, 5.6vw, 68px);
  font-weight: 700;
  line-height: 1.05;
  margin-top: 12px;
  min-height: 1.05em;
}
.shop-head h2 em { font-style: normal; color: var(--ultra); }
.toolbar { border-bottom: 1px solid var(--hairline); }
.search input, .search { background: #fff; border-color: var(--hairline); border-radius: 999px; }
.count strong { font-family: var(--display); }

.card {
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: none;
  transition: border-color 0.18s ease, transform 0.18s var(--ease-out);
}
.card:hover { border-color: var(--ink); transform: translateY(-2px); }
.card-img { background: #fff; border-radius: var(--radius) var(--radius) 0 0; }
.card-name { font-weight: 500; }
.card-price { font-family: var(--display); font-weight: 700; }
.card-add {
  border-radius: 999px;
  background: var(--ink);
  color: var(--fog);
  border: 1px solid var(--ink);
}
.card-add:hover { background: var(--ultra); border-color: var(--ultra); }

/* ---------- story ----------
   .story / .story-stats / .stat are markup the classic sheet never styles (they
   arrived with this page), so the layout is defined here in full rather than
   inherited — otherwise the number and its label run together on one line. */
.story {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: clamp(24px, 5vw, 64px);
  align-items: start;
  max-width: 1400px;
  margin: 0 auto;
  padding: 8vh clamp(16px, 6vw, 48px);
  border-top: 1px solid var(--hairline);
  background: none;
}
.story-quote {
  font-family: var(--display);
  font-size: clamp(20px, 2.6vw, 32px);
  line-height: 1.35;
  max-width: 30ch;
}
.story-quote b { color: var(--ultra); font-weight: 700; }
.story-stats {
  display: grid;
  gap: 22px;
  padding-top: 6px;
}
.stat {
  display: grid;
  gap: 2px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--hairline);
}
.stat:last-child { border-bottom: 0; padding-bottom: 0; }
.stat b {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(28px, 4vw, 46px);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.stat span { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--graphite); }
@media (max-width: 860px) {
  .story { grid-template-columns: 1fr; }
}

/* ---------- overlays ---------- */
.drawer, .modal {
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
}
.drawer-head, .modal-head { border-bottom: 1px solid var(--hairline); }
.overlay-scrim { background: rgba(21, 23, 28, 0.42); }
.checkout-form input:not([type="radio"]):not([type="checkbox"]), .checkout-form textarea {
  border-radius: var(--radius-sm);
  border-color: var(--hairline);
}
.checkout-form input:not([type="radio"]):not([type="checkbox"]):focus, .checkout-form textarea:focus {
  border-color: var(--ultra);
  box-shadow: 0 0 0 3px rgba(47, 59, 228, 0.14);
}
.shipping-option { border-radius: var(--radius-sm); background: #fff; }
.shipping-option input { accent-color: var(--ultra); }
.summary { background: var(--wash); border-radius: var(--radius-sm); border-color: var(--hairline); }
.toast { border-radius: 999px; background: var(--ink); color: var(--fog); }

/* ---------- footer ---------- */
.footer { border-top: 1px solid var(--hairline); background: none; }
.footer-links a, .footer-links .link-btn { color: #555b64; }
.footer-links a:hover, .footer-links .link-btn:hover { color: var(--ink); }

/* ============================================================================
   Heading reveals (driven by reveal.js). The text is present and readable
   before, during and after — only the paint is animated.
   ========================================================================== */
.rv-char, .rv-word { display: inline-block; }
.rv-mask { display: inline-block; overflow: hidden; vertical-align: bottom; }
/* Keeps a split word whole: breaks happen between groups, never between letters. */
.rv-wordgroup { display: inline-block; white-space: nowrap; }

.rv-rise .rv-char { transform: translateY(115%); }
.rv-rise.rv-play .rv-char {
  animation: rvRise 0.8s var(--ease-out) forwards;
  animation-delay: calc(var(--i) * 45ms);
}
@keyframes rvRise { to { transform: translateY(0); } }

.rv-wipe { position: relative; display: inline-block; }
.rv-wipe .rv-wipe-text { display: inline-block; clip-path: inset(0 100% 0 0); }
.rv-wipe.rv-play .rv-wipe-text { animation: rvWipe 0.9s var(--ease-out) 0.1s forwards; }
.rv-wipe .rv-bar {
  position: absolute; top: 8%; bottom: 8%; left: 0; width: 5px;
  background: var(--ultra); transform: scaleY(0);
}
.rv-wipe.rv-play .rv-bar { animation: rvBar 1s var(--ease-out) forwards; }
@keyframes rvWipe { to { clip-path: inset(0 0 0 0); } }
@keyframes rvBar {
  0% { transform: scaleY(0); left: 0; }
  12% { transform: scaleY(1); left: 0; }
  88% { transform: scaleY(1); left: calc(100% - 5px); }
  100% { transform: scaleY(0); left: calc(100% - 5px); }
}

.rv-blur .rv-char { opacity: 0; filter: blur(12px); transform: scale(1.05); }
.rv-blur.rv-play .rv-char {
  animation: rvBlur 0.85s ease forwards;
  animation-delay: calc(var(--i) * 40ms);
}
@keyframes rvBlur { to { opacity: 1; filter: blur(0); transform: scale(1); } }

.rv-cascade .rv-word { opacity: 0; transform: translateY(0.5em) rotate(4deg); transform-origin: 0 100%; }
.rv-cascade.rv-play .rv-word {
  animation: rvTumble 0.7s var(--ease-out) forwards;
  animation-delay: calc(var(--i) * 110ms);
}
@keyframes rvTumble { to { opacity: 1; transform: translateY(0) rotate(0); } }

/* Nothing may stay invisible if the animation never runs (observer not fired,
   JS error, print). Once shown, or without motion, everything is plain type. */
.rv-shown .rv-char, .rv-shown .rv-word { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .rv-char, .rv-word, .rv-wipe-text {
    animation: none !important;
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    clip-path: none !important;
  }
  .rv-bar { display: none; }
}
@media print {
  .rv-char, .rv-word, .rv-wipe-text { opacity: 1 !important; transform: none !important; clip-path: none !important; }
}

@media (max-width: 760px) {
  .hero { padding: 7vh clamp(16px, 6vw, 48px) 6vh; }
  .hero-meta { gap: 12px; }
  .hero-meta .btn-hero { width: 100%; text-align: center; }
}

/* One flex item for the whole sentence: with the city span as a sibling, the
   chip's gap would print a space either side of the rotating name. */
.hero-chip-text { display: inline; }