/* Atlas of Doors story site v2: the SHARED base every option builds on.
   Tokens, the two materials (carved stone + Obsidian Glass), the gold-ringed capsule the owner picked,
   official store badges, the type scale, the accessibility floors. Options override layout and rhythm in
   their own style.css; they never redefine these tokens.
   Contrast rule (owner, 2026-10-23): every text pair reads at a glance at 390 px; body text >= 7:1 on the
   darkest and the lightest surface it can sit on. */

:root {
  /* surfaces (warm near-black; never a cool tone on this site) */
  --bg: #0d0a08;
  --bg-2: #15100c;
  --bg-3: #1d1611;
  --stone-1: #2b2219;
  --stone-2: #1b1510;
  /* text */
  --ink: #f3ecdc;
  --ink-2: #d9cfb8;      /* secondary, still >= 7:1 on --bg and on glass */
  --ink-3: #b8ad94;      /* footnotes, meta (>= 4.5:1 on every surface) */
  /* gold */
  --gold: #c9a227;
  --gold-2: #e2c573;     /* glyphs, eyebrows, links */
  --gold-ink: #f3e6c2;   /* engraved heading gold */
  --gold-hi: #f8e3a0;
  --rim: rgba(201, 162, 39, 0.55);
  --rim-soft: rgba(201, 162, 39, 0.22);
  --rim-hot: rgba(240, 205, 120, 0.95);
  /* Obsidian Glass (obsidian-glass-guideline.md), darkened a step because it floats over bright art */
  --glass: rgba(14, 10, 7, 0.62);
  --glass-2: rgba(26, 20, 14, 0.58);
  --blur: blur(18px) saturate(135%);
  --glass-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), inset 0 0 0 1px rgba(201, 162, 39, 0.16), 0 18px 48px rgba(0, 0, 0, 0.55);
  /* shape */
  --r: 18px;
  --r-lg: 26px;
  /* type */
  --display: "Marcellus", "Cinzel", Georgia, serif;
  --text: "Source Sans 3", "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* scale (390 -> 1440) */
  --h1: clamp(44px, 2.2rem + 3.6vw, 88px);
  --h2: clamp(32px, 1.6rem + 1.9vw, 56px);
  --h3: clamp(20px, 1.1rem + 0.4vw, 24px);
  --lead: clamp(17px, 1rem + 0.3vw, 20px);
  --body: clamp(16px, 0.95rem + 0.15vw, 17px);
  /* spacing ladder: 4 8 12 16 24 32 48 64 96 128 */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;
  --wrap: 1200px;
  --read: 720px;
  --bar-h: 64px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--bar-h) + 16px); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 var(--body)/1.6 var(--text); overflow-x: hidden; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
img, video, svg { max-width: 100%; display: block; }
a { color: inherit; }
p, h1, h2, h3, h4, ul, ol, figure { margin: 0; }
ul, ol { list-style: none; padding: 0; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, .display { font-family: var(--display); font-weight: 400; color: var(--gold-ink); letter-spacing: 0.005em; }
h1 { font-size: var(--h1); line-height: 0.98; text-wrap: balance; }
h2 { font-size: var(--h2); line-height: 1.05; text-wrap: balance; }
h3 { font-size: var(--h3); line-height: 1.2; }
.lead { font-size: var(--lead); line-height: 1.5; color: var(--ink); max-width: 34em; }
.kicker { font: 600 12px/1 var(--text); letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-2); }
.meta { color: var(--ink-3); font-size: 14px; }
.wrap { width: min(var(--wrap), 100% - 40px); margin-inline: auto; }
.read { width: min(var(--read), 100% - 40px); margin-inline: auto; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: #000; color: #fff; padding: 8px 12px; border-radius: 8px; }
.skip:focus { left: 8px; }
:focus-visible { outline: 2px solid var(--rim-hot); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── materials ──────────────────────────────────────────────────────────────────────────── */
.glass {
  background: var(--glass);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border: 1px solid var(--rim);
  box-shadow: var(--glass-shadow);
  border-radius: var(--r);
}
.glass-2 { background: var(--glass-2); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border: 1px solid var(--rim-soft); border-radius: var(--r); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07); }
.stone {
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255, 230, 170, 0.07), transparent 60%),
    linear-gradient(180deg, var(--stone-1), var(--stone-2));
  border: 1px solid rgba(201, 162, 39, 0.4);
  border-radius: var(--r);
  box-shadow: inset 0 1px 0 rgba(255, 240, 200, 0.10), inset 0 -2px 0 rgba(0, 0, 0, 0.45), 0 10px 30px rgba(0, 0, 0, 0.45);
}
.rule { height: 1px; background: linear-gradient(90deg, transparent, var(--rim), transparent); border: 0; }

/* ── the capsule (the gold-ringed play pill the owner picked) ───────────────────────────── */
.pill {
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 48px; padding: 6px 24px 6px 6px;
  border-radius: 999px; font: 600 16px/1.2 var(--text); letter-spacing: 0.01em;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.pill:hover { transform: translateY(-1px); }
.pill:active { transform: translateY(1px); }
.pill .ring {
  flex: none; width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  border: 2px solid var(--gold-2);
  box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.2), inset 0 0 10px rgba(226, 197, 115, 0.25);
  background: radial-gradient(circle at 50% 35%, rgba(255, 230, 160, 0.25), rgba(20, 14, 9, 0.6));
}
.pill .ring svg { width: 18px; height: 18px; fill: var(--gold-hi); color: var(--gold-hi); }
.pill-glass { background: rgba(14, 10, 7, 0.62); border: 1px solid rgba(201, 162, 39, 0.75); color: #fff6df; box-shadow: var(--glass-shadow); }
.pill-glass:hover { border-color: var(--rim-hot); }
.pill-gold {
  color: #1d1307;
  background: linear-gradient(180deg, #f8e3a0 0%, #e7c260 45%, #c99a2e 100%);
  border: 1px solid #fff0bf;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -2px 0 rgba(120, 80, 10, 0.45), 0 0 0 1px rgba(90, 60, 10, 0.6), 0 8px 26px rgba(232, 180, 70, 0.32);
}
.pill-gold .ring { border-color: #5b3d0c; background: radial-gradient(circle at 50% 35%, #3a2709, #1d1307); box-shadow: none; }
.pill-gold:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -2px 0 rgba(120, 80, 10, 0.45), 0 0 0 1px rgba(90, 60, 10, 0.6), 0 12px 36px rgba(232, 180, 70, 0.5); }
.pill-lg { min-height: 60px; font-size: 18px; padding-right: 30px; }
.pill-lg .ring { width: 46px; height: 46px; }
.pill-sm { min-height: 42px; font-size: 15px; padding: 4px 18px 4px 4px; gap: 10px; }
.pill-sm .ring { width: 32px; height: 32px; }
.pill-sm .ring svg { width: 15px; height: 15px; }
/* glyphs: the TRIANGLE is only ever the trailer; Play uses the KEY; "read more" uses the chevron */
.ico-play { }
.link { color: var(--gold-2); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--rim); }
.link:hover { color: var(--gold-hi); text-decoration-color: var(--gold-hi); }

/* ── official store badges (as supplied; >= 40 px tall; clear space = a quarter of the height) ── */
.badges { display: flex; align-items: center; gap: 14px; }
.badge { display: block; height: 44px; padding: 0; border-radius: 8px; transition: transform 0.15s, filter 0.2s; }
.badge img { height: 44px; width: auto; }
.badge:hover { transform: translateY(-1px); filter: brightness(1.08); }
.badge-apple img { height: 44px; }
.badge-play img { height: 44px; }

/* ── top bar: transparent on the hero, glass once the page scrolls ───────────────────────── */
.topbar { position: fixed; inset: 0 0 auto 0; z-index: 50; transition: background 0.3s ease, border-color 0.3s ease, backdrop-filter 0.3s ease; border-bottom: 1px solid transparent; }
.topbar .bar { width: min(var(--wrap), 100% - 32px); margin-inline: auto; height: var(--bar-h); display: flex; align-items: center; gap: 20px; }
.topbar.is-scrolled, .topbar.is-solid { background: rgba(12, 9, 7, 0.72); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border-bottom-color: var(--rim-soft); }
.brand { flex: none; display: block; text-decoration: none; }
.brand img { height: 46px; width: auto; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.9)) drop-shadow(0 0 1px rgba(0, 0, 0, 0.9)); }
.nav { flex: 1; display: flex; justify-content: center; gap: 2px; }
.nav a { text-decoration: none; font: 15px/1 var(--display); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); padding: 12px 12px; border-radius: 999px; transition: background 0.2s, color 0.2s; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8); }
.nav a:hover, .nav a.on { background: rgba(201, 162, 39, 0.18); color: var(--gold-ink); }
.nav-cta { flex: none; }
.menu-btn { display: none; }
.drawer { display: none; }

/* ── phone menu: a full-height glass sheet with a scrim, Play pinned at the bottom ──────── */
@media (max-width: 960px) {
  .nav { display: none; }
  .topbar .bar { justify-content: space-between; gap: 10px; }
  .menu-btn {
    display: grid; align-content: center; gap: 5px; width: 48px; height: 48px; border-radius: 50%;
    background: rgba(14, 10, 7, 0.62); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
    border: 1px solid rgba(201, 162, 39, 0.75); padding: 0 14px;
  }
  .menu-btn span { display: block; height: 2px; background: var(--gold-ink); border-radius: 1px; transition: transform 0.2s, opacity 0.2s; }
  .menu-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .menu-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .scrim { position: fixed; inset: 0; z-index: 40; background: rgba(6, 4, 12, 0.5); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
  .scrim[hidden] { display: none; }
  .drawer:not([hidden]) { display: grid; grid-template-rows: 1fr auto; position: fixed; z-index: 45; inset: 0 0 0 auto; width: min(360px, 88vw); padding: calc(var(--bar-h) + 20px) 20px 28px; border-radius: 0; border-left: 1px solid var(--rim); }
  .drawer nav { display: grid; align-content: start; }
  .drawer nav a { text-decoration: none; font: 20px/1 var(--display); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); padding: 16px 8px; border-bottom: 1px solid var(--rim-soft); }
  .drawer nav a:last-child { border-bottom: 0; }
  .drawer .pill { width: 100%; justify-content: center; }
  body.menu-open { overflow: hidden; }
}
@media (max-width: 600px) {
  :root { --bar-h: 60px; }
  .brand img { height: 40px; }
  .badge, .badge img { height: 40px; }
  .pill-lg { min-height: 56px; font-size: 17px; }
}

/* ── hero image set (shared recipe; options place the text) ─────────────────────────────── */
.hero-art { position: absolute; inset: 0; z-index: -2; overflow: hidden; background: var(--bg); }
.hero-art img { width: 100%; height: 100%; object-fit: cover; }

/* ── motion ─────────────────────────────────────────────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.in { opacity: 1; transform: none; }
@keyframes ember { 0% { transform: translateY(0) scale(1); opacity: 0; } 15% { opacity: 0.9; } 100% { transform: translateY(-160px) scale(0.4); opacity: 0; } }
@keyframes glow { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }

/* ── accessibility floors ───────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
  video[autoplay] { display: none; }
  .motion-poster { display: block !important; }
}
@media (prefers-reduced-transparency: reduce) {
  .glass, .glass-2, .pill-glass, .drawer, .menu-btn, .topbar.is-scrolled, .topbar.is-solid { background: #17110c !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
}