/* KAAL landing page demos - shared design system
   ------------------------------------------------------------------
   Brand tokens: verified against live kaal.store (Abril Fatface + Abel,
   near-black #0a0708, champagne gold #d4b58e). Fonts self-hosted - never
   Google Fonts, which stalls on file:// and silently falls back to Georgia.

   Layout language:
     Reading pages (advertorial, limited edition)  -> Apple
       edge-to-edge tiles, surface change IS the divider, one tile per
       viewport, exactly one shadow (on product photography only),
       negative tracking at display sizes, body at 17px, >=64px air
       above a headline, no gradients.
     Flow pages (quiz, bundle builder)             -> Airbnb
       soft shapes (8px buttons / 14px cards / pill chips), progress
       always visible, one decision per screen, sticky footer carrying
       price + CTA, 48px minimum touch targets, single accent used
       sparingly.
   ------------------------------------------------------------------ */

@font-face {
  font-family: "Abril Fatface";
  src: url("fonts/abril-fatface.woff2") format("woff2");
  font-weight: 400;
  font-style: normal; /* Abril has no italic - never synthesise one */
  font-display: swap;
}
@font-face {
  font-family: "Abel";
  src: url("fonts/abel.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Surface - Apple's alternating-tile idea, expressed dark */
  --ink: #0a0708;
  --tile-1: #0a0708;
  --tile-2: #131011;
  --tile-3: #1b1718;
  --paper: #f6f3ef;

  /* Accent - single interactive colour, the whole system */
  --gold: #d4b58e;
  --gold-dim: #a98f6d;

  /* Text */
  --on-dark: #ffffff;
  --on-dark-muted: #a9a2a0;
  --on-paper: #17120f;
  --on-paper-muted: #6d635c;

  --hairline: rgba(212, 181, 142, 0.18);
  --hairline-paper: rgba(23, 18, 15, 0.12);

  /* Apple: 8px base, section rhythm at 80px */
  --s-xxs: 4px;  --s-xs: 8px;   --s-sm: 12px;  --s-md: 17px;
  --s-lg: 24px;  --s-xl: 32px;  --s-xxl: 48px; --s-section: 80px;

  /* Airbnb: soft shapes */
  --r-sm: 8px; --r-md: 14px; --r-lg: 18px; --r-pill: 999px;

  /* Apple: exactly one shadow, and it belongs to photography */
  --product-shadow: rgba(0, 0, 0, 0.42) 3px 5px 30px 0;
  /* Airbnb: one elevation tier, for lifted cards only */
  --card-lift: rgba(0,0,0,0.02) 0 0 0 1px, rgba(0,0,0,0.18) 0 2px 6px, rgba(0,0,0,0.24) 0 4px 8px;
}

* { box-sizing: border-box; }

/* The UA stylesheet gives [hidden] display:none at the lowest specificity, so any
   author rule setting display (flex/grid/block) silently defeats it - which left the
   quiz's sticky bar on screen at the results step. Restore the guarantee. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--on-dark);
  font-family: "Abel", system-ui, sans-serif;
  font-size: 17px;      /* Apple: 17px, not 16px - a reading pace, not a scanning pace */
  line-height: 1.47;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .display {
  font-family: "Abril Fatface", Georgia, serif;
  font-weight: 400;
  letter-spacing: -0.01em;   /* Apple tight */
  margin: 0;
  line-height: 1.08;
}

a { color: inherit; }

/* ---------- Apple: full-bleed tiles ---------- */
.tile { padding: var(--s-section) var(--s-lg); }
.tile--1 { background: var(--tile-1); }
.tile--2 { background: var(--tile-2); }
.tile--3 { background: var(--tile-3); }
.tile--paper { background: var(--paper); color: var(--on-paper); }
.tile--paper .muted { color: var(--on-paper-muted); }

.measure { max-width: 680px; margin: 0 auto; }   /* ~62ch at 17px */
.wide { max-width: 1180px; margin: 0 auto; }

.kicker {
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--s-lg);
}
.muted { color: var(--on-dark-muted); }

/* Apple: >=64px of air above a headline, 48-64 below */
.tile h2 { font-size: clamp(30px, 5vw, 44px); margin-bottom: var(--s-lg); }
.tile p { margin: 0 0 var(--s-lg); }

/* Apple's single shadow - photography only, never on cards or buttons */
.product-shot { box-shadow: var(--product-shadow); display: block; width: 100%; }

/* ---------- Wordmark ---------- */
.mark {
  font-family: "Abril Fatface", Georgia, serif;
  font-size: 21px;
  letter-spacing: 0.02em;
}

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s-md) var(--s-lg);
  border-bottom: 1px solid var(--hairline);
  position: relative; z-index: 5;
}

/* ---------- Airbnb: buttons ---------- */
.btn {
  font-family: "Abel", sans-serif;
  font-size: 16px;
  text-decoration: none;            /* buttons are also used as <a> */
  min-height: 48px;                 /* Airbnb: 48px floor, above WCAG AAA */
  padding: 0 var(--s-lg);
  border-radius: var(--r-sm);
  border: 0;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-xs);
  letter-spacing: 0.06em; text-transform: uppercase;
  transition: background 140ms ease, color 140ms ease, opacity 140ms ease;
}
.btn--primary { background: var(--gold); color: #17120f; }
.btn--primary:hover { background: #e2c8a6; }
.btn--primary:disabled { background: rgba(212,181,142,0.28); color: rgba(23,18,15,0.5); cursor: not-allowed; }
.btn--ghost { background: transparent; color: var(--on-dark); border: 1px solid var(--hairline); }
.btn--ghost:hover { border-color: var(--gold); }
.btn--text { background: none; border: 0; color: var(--on-dark-muted); text-transform: none; letter-spacing: 0; padding: 0; min-height: 44px; }
.btn--text:hover { color: var(--gold); }

/* ---------- Airbnb: progress ---------- */
.progress { display: flex; gap: 6px; padding: 0 var(--s-lg) var(--s-md); }
.progress i { flex: 1; height: 3px; border-radius: 2px; background: rgba(255,255,255,0.12); }
.progress i.on { background: var(--gold); }

.step-count { font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--on-dark-muted); }

/* ---------- Airbnb: selectable cards ---------- */
.choice-grid { display: grid; gap: var(--s-sm); grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.choice {
  background: var(--tile-2);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  padding: var(--s-lg);
  min-height: 96px;
  cursor: pointer;
  text-align: left;
  color: inherit;
  font-family: inherit; font-size: 17px;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 4px;
  transition: border-color 140ms ease, background 140ms ease;
}
.choice:hover { border-color: var(--gold-dim); }
.choice[aria-pressed="true"] { border-color: var(--gold); background: rgba(212,181,142,0.10); }
.choice small { color: var(--on-dark-muted); font-size: 14px; }

.chips { display: flex; flex-wrap: wrap; gap: var(--s-xs); }
.chip {
  border-radius: var(--r-pill);
  border: 1px solid var(--hairline);
  background: transparent; color: inherit;
  min-height: 48px; padding: 0 var(--s-lg);
  font-family: inherit; font-size: 16px; cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease;
}
.chip:hover { border-color: var(--gold-dim); }
.chip[aria-pressed="true"] { border-color: var(--gold); background: var(--gold); color: #17120f; }
.chip:disabled { opacity: 0.32; cursor: not-allowed; }

/* ---------- Airbnb: sticky footer carrying price + CTA ---------- */
.sticky-bar {
  position: sticky; bottom: 0;
  background: rgba(10,7,8,0.94);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--hairline);
  padding: var(--s-sm) var(--s-lg);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-md);
  z-index: 20;
}

/* ---------- Product cards ---------- */
.product-card { border-radius: var(--r-md); overflow: hidden; background: var(--tile-2); display: block; text-decoration: none; color: inherit; }
.product-card img { width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block; }
.product-card .body { padding: var(--s-sm) var(--s-md) var(--s-md); }
.price { font-size: 17px; }
.price s { color: var(--on-dark-muted); }

.grid-3 { display: grid; gap: var(--s-md); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* Stock truth - a real count, never a manufactured one */
.stock-note { font-size: 13px; color: var(--gold); letter-spacing: 0.04em; }
.stock-note--low { color: #e0a17f; }

/* Apple: staged reveal on scroll.
   Visible by default - the hidden state is applied by JS via .js-reveal, so a
   scripting or observer failure degrades to a fully readable page rather than a
   blank one. See initReveal() in kaal.js. */
.reveal { opacity: 1; }
.reveal.js-reveal { opacity: 0; transform: translateY(18px); transition: opacity 700ms ease, transform 700ms ease; }
.reveal.js-reveal.in { opacity: 1; transform: none; }

/* Service copy - quiet lines, never discount-led, never emoji */
.service-lines { border-top: 1px solid var(--hairline); padding-top: var(--s-md); font-size: 14px; color: var(--on-dark-muted); }
.service-lines div { padding: 3px 0; }
.tile--paper .service-lines { border-color: var(--hairline-paper); color: var(--on-paper-muted); }

@media (max-width: 743px) {
  :root { --s-section: 56px; }
  .tile { padding: var(--s-section) var(--s-md); }
}

/* Demo-only chrome, stripped in production */
.demo-note {
  background: #171314; border-top: 1px solid var(--hairline);
  padding: var(--s-lg); font-size: 13px; color: var(--on-dark-muted);
}
.demo-note b { color: var(--gold); font-weight: 400; }