/* Proposed website/shared/discovery.css (round 2). Vocabulary lifted from the
 * homepage: realm-hall rooms (washed art + side scrim), the locked arch
 * (crown = width/2, 14-16px feet), sm/lg door pairs, Cormorant whisper lines,
 * the closing scene's glowing door outline over cosmos, candle-gold pill. */
.discovery { position:relative; background:var(--bg); color:var(--text); margin:0; font:16px/1.7 var(--sans); --ra:var(--candle); }
.discovery[data-realm='cozy'] { --ra:var(--realm-cozy); }
.discovery[data-realm='fantasy'] { --ra:var(--realm-fantasy); }
.discovery[data-realm='dreamscape'] { --ra:var(--realm-dreamscape); }
.discovery[data-realm='cyberpunk'] { --ra:var(--realm-cyberpunk); }
.discovery[data-realm='mythos'] { --ra:#ecd9a8; }
.discovery a { color:inherit; text-underline-offset:.25em; }
.discovery a:focus-visible,.discovery video:focus-visible { outline:2px solid var(--candle); outline-offset:5px; border-radius:4px; }
.discovery .skip { position:absolute; left:12px; top:-100px; background:var(--surface); padding:10px 14px; z-index:30; }
.discovery .skip:focus { top:10px; }
.discovery h1,.discovery h2,.discovery h3 { font-family:var(--serif); font-weight:400; margin:0; text-wrap:balance; }
.discovery p { margin:0; text-wrap:pretty; }

/* ── Nav: sits over the painted hero, a gold hairline beneath ─────────── */
.d-nav { position:absolute; inset:0 0 auto; z-index:20; }
.d-nav-inner { max-width:1320px; margin:0 auto; padding:22px 40px; display:flex; align-items:center; gap:36px; }
.d-nav::after { content:''; position:absolute; left:40px; right:40px; bottom:0; height:1px; background:linear-gradient(to right, transparent, rgba(255,215,169,.28) 20%, rgba(255,215,169,.28) 80%, transparent); }
.discovery .wordmark { font:italic 400 26px/1 var(--serif); letter-spacing:.01em; text-decoration:none; color:var(--text); }
.d-links { display:flex; gap:28px; flex:1; justify-content:center; }
.d-links a { font-size:11px; font-weight:700; letter-spacing:2.2px; text-transform:uppercase; text-decoration:none; color:var(--text-secondary); padding:8px 0; border-bottom:1px solid transparent; transition:color 220ms ease, border-color 220ms ease; }
.d-links a:hover { color:var(--text); }
.d-links a[aria-current='page'] { color:var(--candle); border-color:rgba(255,215,169,.5); }

/* ── Buttons ──────────────────────────────────────────────────────────── */
.discovery .pill { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:48px; padding:12px 26px; border-radius:999px; background:var(--candle); color:var(--bg); font:600 15px/1.2 var(--sans); text-decoration:none; transition:background 300ms ease; }
.discovery .pill:hover { background:#ffe6c7; color:var(--bg); }
.discovery .pill--sm { min-height:40px; padding:9px 18px; font-size:13px; }
.discovery .quiet { font-size:14px; color:var(--text-secondary); text-decoration:none; border-bottom:1px solid rgba(148,163,184,.35); padding-bottom:2px; }
.discovery .quiet:hover { color:var(--text); border-color:var(--text-secondary); }

/* ── Shared type ──────────────────────────────────────────────────────── */
.d-eyebrow { display:flex; align-items:center; gap:12px; font-size:11px; font-weight:700; letter-spacing:3px; text-transform:uppercase; color:var(--ra); }
.d-eyebrow::before { content:''; width:11px; height:17px; border:1px solid currentColor; border-bottom:0; border-radius:6px 6px 0 0; flex:none; }
.d-whisper { font-family:var(--whisper); font-size:23px; line-height:1.5; color:var(--accent-bright); }
.d-crumbs { display:flex; flex-wrap:wrap; gap:8px; font-size:12px; letter-spacing:.4px; color:var(--text-muted); margin-bottom:26px; }
.d-crumbs a { color:var(--text-secondary); text-decoration:none; }
.d-crumbs a:hover { color:var(--text); }

/* ── The arch door (homepage .rh-door, at 2:3 so paintings are not cut) ─ */
.door { display:block; text-decoration:none; color:inherit; --w:220px; width:var(--w); }
.door-frame { position:relative; width:var(--w); aspect-ratio:2/3; border-radius:calc(var(--w)/2) calc(var(--w)/2) 14px 14px; overflow:hidden; border:1px solid rgba(255,255,255,.14); box-shadow:0 24px 60px -16px rgba(0,0,0,.9); transition:transform 300ms ease, border-color 300ms ease; }
.door-frame img { width:100%; height:100%; object-fit:cover; display:block; }
.door:hover .door-frame { transform:translateY(-8px); border-color:color-mix(in srgb, var(--da) 55%, transparent); }
.door--lg { --w:268px; }
.door--lg .door-frame { border-color:color-mix(in srgb, var(--da) 50%, transparent); box-shadow:0 24px 60px -16px rgba(0,0,0,.9), 0 0 60px -18px color-mix(in srgb, var(--da) 40%, transparent); }
.door-cap { text-align:center; margin-top:16px; }
.door-realm { font-size:10px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--text-muted); }
.door-name { font:400 19px/1.25 var(--serif); color:var(--da); margin-top:6px; }
.door-blurb { font-family:var(--whisper); font-style:italic; font-size:17px; line-height:1.4; color:var(--text-secondary); margin-top:6px; }
.door[data-realm='cozy'] { --da:var(--realm-cozy); }
.door[data-realm='fantasy'] { --da:var(--realm-fantasy); }
.door[data-realm='dreamscape'] { --da:var(--realm-dreamscape); }
.door[data-realm='cyberpunk'] { --da:var(--realm-cyberpunk); }
.door[data-realm='mythos'] { --da:#ecd9a8; }
/* Four-room collections: a smaller pair so the row still fits beside the copy. */
.c-doors[data-count='4'] { gap:22px; }
.c-doors[data-count='4'] .door { --w:176px; }
.c-doors[data-count='4'] .door--lg { --w:214px; }
.c-doors[data-count='4'] .door:not(.door--lg) { margin-top:57px; }

/* ── Collection hero: a realm-hall room ───────────────────────────────── */
.c-hero { position:relative; overflow:hidden; padding:150px 40px 72px; }
.d-bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.62; }
.d-scrim { position:absolute; inset:0; background:linear-gradient(to right, rgba(2,6,23,.9) 0%, rgba(2,6,23,.5) 40%, rgba(2,6,23,.22) 100%), linear-gradient(to bottom, rgba(2,6,23,.7) 0%, rgba(2,6,23,0) 26%, rgba(2,6,23,0) 70%, #020617 100%); }
.c-row { position:relative; max-width:1240px; margin:0 auto; display:grid; grid-template-columns:minmax(0,400px) minmax(0,1fr); gap:56px; align-items:end; }
.c-copy { padding-bottom:110px; }
.c-copy h1 { font-size:46px; line-height:1.1; margin-top:18px; }
.c-copy .d-whisper { margin-top:18px; }
.c-actions { display:flex; flex-wrap:wrap; align-items:center; gap:14px 24px; margin-top:32px; }
.c-doors { display:flex; justify-content:flex-end; align-items:flex-start; gap:30px; }
.c-doors .door:not(.door--lg) { margin-top:72px; }
.r-related .c-doors .door { margin-top:0; }

/* ── Reading band: heading left, prose right, under a gilt rule ───────── */
.d-rule { display:flex; align-items:center; justify-content:center; gap:16px; max-width:1240px; margin:0 auto; }
.d-rule::before,.d-rule::after { content:''; height:1px; flex:1; background:linear-gradient(to right, transparent, rgba(255,215,169,.35)); }
.d-rule::after { transform:scaleX(-1); }
.d-rule span { width:13px; height:20px; border:1px solid rgba(255,215,169,.6); border-bottom:0; border-radius:7px 7px 0 0; }
.c-reading { padding:48px 40px 64px; }
.c-reading-row { max-width:1040px; margin:56px auto 0; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.35fr); gap:64px; }
.c-reading h2 { font-size:34px; line-height:1.2; }
.c-reading p { color:var(--text-secondary); font-size:17px; line-height:1.8; }

/* ── Invitation (homepage CLOSING: cosmos, glowing door outline) ──────── */
.invite { position:relative; overflow:hidden; text-align:center; padding:96px 24px 104px; }
.invite .d-bg { opacity:.35; filter:saturate(.5) brightness(.75); }
.invite .d-bg--art { opacity:.22; filter:blur(36px) saturate(.8); transform:scale(1.15); }
.invite-scrim { position:absolute; inset:0; background:linear-gradient(rgba(2,6,23,.4),rgba(2,6,23,.4)), linear-gradient(to bottom, #020617 0%, rgba(2,6,23,0) 30%, rgba(2,6,23,.55) 75%, #020617 100%); }
.invite-inner { position:relative; max-width:600px; margin:0 auto; display:flex; flex-direction:column; align-items:center; }
.invite-door { width:64px; height:112px; border:1.5px solid color-mix(in srgb, var(--ra) 65%, transparent); border-bottom:0; border-radius:32px 32px 0 0; position:relative; box-shadow:0 0 40px -10px color-mix(in srgb, var(--ra) 45%, transparent); }
.invite-door::after { content:''; position:absolute; left:50%; bottom:-1px; width:120px; height:1px; transform:translateX(-50%); background:linear-gradient(to right, transparent, color-mix(in srgb, var(--ra) 65%, transparent), transparent); }
.invite h2 { font-size:38px; line-height:1.2; margin-top:40px; }
.invite p { color:var(--text-secondary); margin-top:16px; font-size:16px; }
.invite .pill { margin-top:32px; }
.invite .invite-platforms { white-space:nowrap; font-size:13px; color:var(--text-muted); margin-top:16px; }
.invite-platforms a { color:var(--text-secondary); }

/* ── Other collections: three small arches, horizontal plates ─────────── */
.more { max-width:1040px; margin:0 auto; padding:24px 40px 96px; }
.more h2 { font-size:24px; text-align:center; }
.more-row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; margin-top:32px; }
.more-row a { display:flex; align-items:center; gap:22px; padding:14px 22px 14px 14px; text-decoration:none; border:1px solid rgba(255,215,169,.16); border-radius:999px 16px 16px 999px; transition:border-color 300ms ease, background 300ms ease; }
.more-row a:hover { border-color:rgba(255,215,169,.45); background:rgba(15,23,42,.6); }
.more-row img { width:56px; height:84px; object-fit:cover; border-radius:28px 28px 8px 8px; flex:none; }
.more-row strong { display:block; font:400 20px/1.25 var(--serif); color:var(--text); }
.more-row span { display:block; font-size:13px; color:var(--text-secondary); margin-top:4px; }

/* ── Room hero: the painting in its arch, blurred art as atmosphere ───── */
.r-hero { position:relative; overflow:hidden; padding:128px 40px 88px; }
.r-hero .d-bg--art { opacity:.3; filter:blur(48px) saturate(.9); transform:scale(1.2); }
.r-hero .d-scrim { background:linear-gradient(to bottom, rgba(2,6,23,.6) 0%, rgba(2,6,23,.2) 30%, rgba(2,6,23,.35) 70%, #020617 100%); }
.r-row { position:relative; max-width:1180px; margin:0 auto; display:grid; grid-template-columns:minmax(0,440px) minmax(0,1fr); gap:80px; align-items:center; }
.r-figure { margin:0; }
.r-frame { position:relative; width:100%; aspect-ratio:2/3; border-radius:220px 220px 16px 16px; overflow:hidden; border:1px solid color-mix(in srgb, var(--ra) 45%, transparent); box-shadow:0 30px 70px -20px rgba(0,0,0,.9), 0 0 70px -24px color-mix(in srgb, var(--ra) 45%, transparent); background:#000; }
.r-frame img { width:100%; height:100%; object-fit:cover; display:block; }
.r-frame video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:transparent; }
.r-frame.is-enhanced video { opacity:0; pointer-events:none; transition:opacity 900ms ease-in-out; }
.r-frame.is-playing video { opacity:1; pointer-events:auto; }
.r-play { position:absolute; left:50%; bottom:22px; transform:translateX(-50%); display:inline-flex; align-items:center; gap:10px; min-height:44px; padding:10px 20px; border-radius:999px; border:1px solid rgba(226,232,240,.45); background:rgba(2,6,23,.62); backdrop-filter:blur(6px); color:var(--text); font:600 13px/1 var(--sans); letter-spacing:.3px; cursor:pointer; transition:border-color 220ms ease, opacity 300ms ease; }
.r-play:hover { border-color:var(--ra); }
.r-play span { font-size:9px; color:var(--ra); }
.r-frame.is-playing .r-play { opacity:0; pointer-events:none; }
.r-figcap { font-size:12px; color:var(--text-muted); text-align:center; margin-top:14px; letter-spacing:.3px; }
.r-copy h1 { font-size:58px; line-height:1.05; color:var(--ra); margin-top:18px; }
.r-copy .d-whisper { margin-top:20px; max-width:30ch; font-size:24px; }
.r-enter { display:flex; flex-direction:column; align-items:flex-start; gap:12px; margin-top:36px; }
.r-access { font-size:13px; color:var(--text-secondary); }
.r-access b { font-weight:600; color:var(--text); }

/* ── Story: a single page of the travel book ──────────────────────────── */
.r-story { padding:32px 24px 56px; text-align:center; }
.r-story h2 { font-size:15px; font-family:var(--sans); font-weight:700; letter-spacing:3px; text-transform:uppercase; color:var(--ra); margin-top:28px; }
.r-story p { font-family:var(--whisper); font-size:25px; line-height:1.6; color:var(--accent-bright); max-width:34ch; margin:22px auto 0; }

.r-related { max-width:1100px; margin:0 auto; padding:24px 40px 110px; text-align:center; }
.r-related h2 { font-size:30px; }
.r-related .c-doors { justify-content:center; margin-top:44px; }

/* ── Footer (homepage .site-foot, plus the discovery links) ───────────── */
.d-foot { border-top:1px solid rgba(255,255,255,.1); padding:44px 24px 48px; text-align:center; color:var(--text-muted); font-size:13px; }
.d-foot .wordmark { font-size:20px; color:var(--text-secondary); }
.d-foot nav { display:flex; flex-wrap:wrap; justify-content:center; gap:10px 24px; margin:18px 0; }
.d-foot nav a { color:var(--text-secondary); text-decoration:none; }
.d-foot nav a:hover { color:var(--text); }
.enter-bar { display:none; }

/* ── Tablet ───────────────────────────────────────────────────────────── */
@media (max-width:1080px) {
  .c-row { grid-template-columns:1fr; gap:48px; }
  .c-copy { padding-bottom:0; max-width:560px; }
  .c-doors { justify-content:center; }
  .r-row { grid-template-columns:minmax(0,360px) minmax(0,1fr); gap:48px; }
  .r-frame { border-radius:180px 180px 16px 16px; }
}

/* ── Phone ────────────────────────────────────────────────────────────── */
@media (max-width:700px) {
  .d-nav-inner { padding:16px 20px 0; flex-wrap:wrap; gap:0; justify-content:space-between; }
  .d-nav::after { left:20px; right:20px; }
  .d-links { order:3; flex-basis:100%; justify-content:flex-start; gap:22px; overflow-x:auto; padding:8px 0 4px; margin-top:6px; scrollbar-width:none; }
  .d-links a { white-space:nowrap; }
  .discovery .wordmark { font-size:23px; }
  .c-hero { padding:128px 0 56px; }
  .c-copy { padding:0 22px; }
  .c-copy h1 { font-size:34px; }
  .c-copy .d-whisper,.r-copy .d-whisper { font-size:20px; }
  .c-actions .pill { flex:1 1 100%; }
  .c-actions .quiet { margin:0 auto; }
  .c-doors { justify-content:flex-start; align-items:flex-start; gap:18px; overflow-x:auto; scroll-snap-type:x mandatory; padding:8px 22px 6px; scroll-padding:0 22px; scrollbar-width:none; }
  .c-doors .door:not(.door--lg) { margin-top:0; }
  .c-doors .door,.c-doors .door--lg { --w:62vw; flex:none; scroll-snap-align:start; }
  .c-hero .d-scrim { background:linear-gradient(to bottom, rgba(2,6,23,.85) 0%, rgba(2,6,23,.55) 40%, rgba(2,6,23,.75) 72%, #020617 100%); }
  .c-reading { padding:64px 22px 72px; }
  .c-reading-row { grid-template-columns:1fr; gap:18px; margin-top:40px; }
  .c-reading h2 { font-size:27px; }
  .c-reading p { font-size:16px; }
  .invite { padding:80px 22px 88px; }
  .invite h2 { font-size:29px; margin-top:32px; }
  .invite .pill { align-self:stretch; }
  .more { padding:8px 22px 72px; }
  .more-row { grid-template-columns:1fr; gap:12px; }
  .r-hero { padding:120px 22px 56px; }
  .r-row { grid-template-columns:1fr; gap:28px; }
  .r-copy { display:contents; }
  .r-head { order:-1; }
  .r-copy h1 { font-size:40px; }
  .r-frame { border-radius:50vw 50vw 14px 14px; }
  .r-enter { align-items:stretch; margin-top:28px; }
  .r-enter .pill { width:100%; }
  .r-story { padding:24px 22px 72px; }
  .r-story p { font-size:21px; }
  .r-related { padding:8px 0 80px; }
  .r-related h2 { font-size:26px; padding:0 22px; }
  .r-related .c-doors { justify-content:flex-start; margin-top:32px; }
  .r-related .c-doors .door { --w:52vw; }
  .enter-bar { display:flex; position:sticky; bottom:0; z-index:15; padding:12px 16px calc(12px + env(safe-area-inset-bottom)); background:linear-gradient(to bottom, rgba(2,6,23,0), rgba(2,6,23,.92) 35%); }
  .enter-bar .pill { width:100%; }
  /* Touch targets: nav, breadcrumb, footer and store links reach 44px. */
  .d-nav .wordmark, .d-links a, .d-crumbs a, .d-foot nav a, .invite-platforms a { display:inline-flex; align-items:center; min-height:44px; }
  .d-links a { padding:0; }
  .d-foot nav { gap:0 24px; }
}
@media (prefers-reduced-motion:reduce) { .door-frame { transition:none; } .door:hover .door-frame { transform:none; } }