/* tiers.css — PRESENTATION dial. [data-tier] overrides presentation tokens only.
   Content is identical across every tier; band 1 merely loads thumb-weight images.
   Tier-gated CONTENT (day narratives, hidden-gems, personalised hero) is rendered by
   app.js only when those optional fields are present — it is not styled away here. */

/* Band 1 — Essential: system type, flat, thumb-only imagery, no motion. */
[data-tier="essential"] {
  --radius: 8px;
  --radius-sm: 6px;
  --shadow: none;
  --font-display: system-ui, -apple-system, sans-serif;
  --font-body: system-ui, -apple-system, sans-serif;
  --hero: 150px;
  --gallery: thumb;      /* app.js requests _thumb variants — payload-weight choice */
  --motion: 0ms;
}
[data-tier="essential"] .stop { box-shadow: none; }

/* Band 2 — Standard: soft cards, one hero + swipe, subtle motion. (baseline) */
[data-tier="standard"] {
  --radius: 16px;
  --shadow: 0 1px 3px rgba(0,0,0,.08), 0 6px 20px rgba(0,0,0,.04);
  --font-display: "Segoe UI", system-ui, sans-serif;
  --hero: 200px;
  --gallery: swipe;
  --motion: 180ms;
}

/* Band 3 — Plus: serif headers, layered shadow, large gallery, parallax feel. */
[data-tier="plus"] {
  --radius: 18px;
  --shadow: 0 2px 6px rgba(0,0,0,.10), 0 12px 32px rgba(0,0,0,.08);
  --font-display: Georgia, "Times New Roman", serif;
  --hero: 240px;
  --gallery: large;
  --motion: 240ms;
}
[data-tier="plus"] .topbar { backdrop-filter: saturate(1.1); }

/* Band 4 — Signature: display serif, elevated, duotone/muted-luxe imagery. */
[data-tier="signature"] {
  --radius: 20px;
  --shadow: 0 4px 10px rgba(0,0,0,.12), 0 20px 50px rgba(0,0,0,.12);
  --font-display: "Playfair Display", Georgia, serif;
  --hero: 300px;
  --gallery: large;
  --motion: 320ms;
}
[data-tier="signature"] .gallery img { filter: saturate(0.92) contrast(1.02); }
[data-tier="signature"] .stop { border-color: color-mix(in srgb, var(--brand) 18%, var(--line)); }

/* Band 5 — Couture: fine type pairing, tactile/foil, full-screen cinematic, buttery. */
[data-tier="couture"] {
  --radius: 22px;
  --radius-sm: 14px;
  --shadow: 0 6px 14px rgba(0,0,0,.16), 0 30px 70px rgba(0,0,0,.18);
  --font-display: "Cormorant Garamond", "Playfair Display", Georgia, serif;
  --font-body: "Inter", system-ui, sans-serif;
  --hero: 360px;
  --gallery: cinematic;
  --motion: 460ms;
}
[data-tier="couture"] .topbar {
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
}
[data-tier="couture"] .stop {
  background: linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--brand) 4%, var(--surface)));
}
[data-tier="couture"] .gallery img { height: calc(var(--hero) + 20px); }

/* Tier-gated content blocks — present only when the data carries them. */
.narrative { margin: 8px 0; color: var(--text); }               /* plus+ */
.hidden-gem {                                                     /* signature+ */
  margin: 10px 0; padding: 12px; border-radius: var(--radius-sm);
  background: var(--brand-surface); border: 1px dashed var(--brand);
}
.hidden-gem .tag { font-size: 0.72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--brand); font-weight: 700; }