/** Shopify CDN: Minification failed

Line 565:5 Unexpected "{"
Line 568:5 Unexpected "{"

**/
/* VORA NOIRE — lounge styles. Moved from snippets/vn-lounge-styles.liquid 2026-07-28
   so ~30KB caches across visits instead of shipping inline on every page load.
   EDIT THIS FILE for lounge styling — the snippet is now just a <link>. */
/* Lovely May Script is self-hosted in theme.liquid — no @font-face needed here */

  .vn-lounge { max-width: 960px; margin: 0 auto; padding: 60px 24px 80px; font-family: 'Raleway', sans-serif; color: #FFFFFF; }

  .vn-c1-banner { position: relative; overflow: hidden; background: #080808; border: 1px solid #2A1A08; border-left: 3px solid var(--vn-copper); padding: 32px 40px; margin-bottom: 48px; display: grid; grid-template-columns: 140px 1fr; gap: 40px; align-items: center; }
  .vn-c1-banner::before { content: ''; position: absolute; top: -100%; left: -60%; width: 50%; height: 300%; background: linear-gradient(105deg, transparent 30%, rgba(184,115,51,0.06) 40%, rgba(212,160,90,0.14) 50%, rgba(184,115,51,0.06) 60%, transparent 70%); animation: vn-copper-sweep 5s ease-in-out 3; pointer-events: none; z-index: 0; }
  .vn-c1-banner > * { position: relative; z-index: 1; }
  .vn-c1-logo { width: 140px; opacity: 0.95; display: block; }
  .vn-c1-label { font-family: 'Raleway', sans-serif; font-weight: 700; letter-spacing: 5px; text-transform: uppercase; font-size: 11px; color: var(--vn-copper); margin-bottom: 8px; }
  .vn-c1-headline { font-family: 'Raleway', sans-serif; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; font-size: 15px; color: #FFFFFF; margin-bottom: 10px; }
  .vn-c1-body { font-family: 'Raleway', sans-serif; font-size: 14px; line-height: 1.8; color: #888888; letter-spacing: 0.3px; margin-bottom: 16px; }
  .vn-c1-links { display: flex; gap: 24px; flex-wrap: wrap; align-items: center; }
  .vn-c1-link { font-family: 'Raleway', sans-serif; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; font-size: 11px; color: var(--vn-copper); text-decoration: none; border-bottom: 1px solid rgba(184,115,51,0.4); padding-bottom: 2px; transition: border-color 0.2s ease; white-space: nowrap; }
  .vn-c1-link:hover { border-color: var(--vn-copper); }
  .vn-c1-dismiss { position: absolute; top: 12px; right: 16px; background: none; border: none; color: var(--vn-text-dim); font-size: 18px; cursor: pointer; line-height: 1; padding: 4px; transition: color 0.2s ease; z-index: 2; }
  .vn-c1-dismiss:hover { color: #888888; }
  @media (max-width: 640px) { .vn-c1-banner { grid-template-columns: 1fr; gap: 20px; padding: 24px; } .vn-c1-logo { width: 110px; } }

  .vn-lounge-header { text-align: center; margin-bottom: 56px; padding-bottom: 56px; border-bottom: 1px solid #222222; }
  .vn-lounge-eyebrow { font-weight: 700; letter-spacing: 5px; text-transform: uppercase; color: #777777; margin-bottom: 20px; }
  .vn-lounge-month { font-weight: 600; letter-spacing: 4px; text-transform: uppercase; color: #999999; margin-bottom: 16px; }
  .vn-lounge-mood-title { font-weight: 300; letter-spacing: 6px; text-transform: uppercase; color: #FFFFFF; margin-bottom: 24px; line-height: 1.2; font-size: clamp(28px, 4vw, 48px); }
  .vn-lounge-mood-intro { font-family: 'Raleway', sans-serif; font-weight: 400; font-size: 16px; line-height: 1.9; color: #AAAAAA; max-width: 580px; margin: 0 auto; letter-spacing: 0.3px; }

  .vn-quote-wrap { margin-bottom: 72px; display: flex; justify-content: center; }
  .vn-quote-card-outer { position: relative; width: 100%; max-width: 480px; overflow: hidden; border-radius: 2px; background: #000; box-shadow: 0 24px 60px rgba(0,0,0,0.75), 0 0 0 1px rgba(184,115,51,0.08), 0 40px 90px -20px rgba(184,115,51,0.18); }
  .vn-quote-card-outer::after { content: ''; position: absolute; top: -100%; left: -100%; width: 60%; height: 300%; background: linear-gradient(105deg, transparent 30%, rgba(184,115,51,0.04) 40%, rgba(212,160,90,0.10) 50%, rgba(184,115,51,0.04) 60%, transparent 70%); animation: vn-copper-sweep 12s ease-in-out 3; animation-delay: 1.5s; z-index: 3; pointer-events: none; }
  .vn-quote-img { width: 100%; display: block; position: relative; z-index: 1; }

  .vn-lounge-section { margin-bottom: 72px; padding-bottom: 72px; border-bottom: 1px solid #1A1A1A; }
  .vn-lounge-section:last-child { border-bottom: none; }
  .vn-section-label { font-weight: 700; letter-spacing: 5px; text-transform: uppercase; color: var(--vn-text-mute); margin-bottom: 12px; font-size: 12px; }
  .vn-section-title { font-weight: 600; letter-spacing: 3px; text-transform: uppercase; color: #FFFFFF; margin-bottom: 8px; font-size: clamp(18px, 2.5vw, 26px); }


  /* Side-by-side genre columns (Romance L / Thriller R), tiers 1->3 stacked */
  .vn-books-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: start; }
  .vn-genre-col { min-width: 0; }
  .vn-genre-col-head { font-family: 'Antonio', sans-serif; font-weight: 600; letter-spacing: 5px; text-transform: uppercase; font-size: 16px; color: #FFFFFF; margin: 0 0 22px; padding-bottom: 14px; border-bottom: 1px solid #222222; position: relative; }
  .vn-genre-col-head::after { content: ''; position: absolute; left: 0; bottom: -1px; width: 52px; height: 2px; }
  .vn-genre-col--romance  .vn-genre-col-head::after { background: var(--vn-copper); }
  .vn-genre-col--thriller .vn-genre-col-head::after { background: #5A6B7A; }

  .vn-book-card { background: #0a0a0a; display: grid; grid-template-columns: 100px 1fr; gap: 28px; align-items: start; padding: 28px 32px; margin-bottom: 2px; }
  .vn-book-card[data-tier="hinted"]   { border-left: 3px solid #4A6FA5; }
  .vn-book-card[data-tier="revealed"] { border-left: 3px solid #3A9BA3; }
  .vn-book-card[data-tier="unveiled"] { border-left: 3px solid #C04444; }
  .vn-book-cover-wrap { position: relative; width: 100px; aspect-ratio: 2/3; flex-shrink: 0; overflow: hidden; }
  .vn-book-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity 0.35s ease; }
  .vn-book-cover-primary   { opacity: 1; z-index: 1; }
  .vn-book-cover-secondary { opacity: 0; z-index: 2; }
  .vn-book-card:hover .vn-book-cover-primary   { opacity: 0; }
  .vn-book-card:hover .vn-book-cover-secondary { opacity: 1; }
  .vn-book-info { display: flex; flex-direction: column; gap: 6px; }
  .vn-book-tier { font-family: 'Lovely May Script', cursive; font-weight: 400; letter-spacing: 1px; text-transform: none; font-size: 28px; line-height: 1; margin: 0 0 4px; }
  .vn-book-card[data-tier="hinted"]   .vn-book-tier { color: #4A6FA5; }
  .vn-book-card[data-tier="revealed"] .vn-book-tier { color: #3A9BA3; }
  .vn-book-card[data-tier="unveiled"] .vn-book-tier { color: #C04444; }
  .vn-book-title { font-family: 'Antonio', sans-serif; font-weight: 300; letter-spacing: 3px; text-transform: uppercase; color: #FFFFFF; font-size: clamp(16px, 2vw, 22px); margin: 0; line-height: 1.1; }
  .vn-book-author { font-family: 'Raleway', sans-serif; font-weight: 400; color: var(--vn-text-mute); font-size: 13px; letter-spacing: 0.3px; margin: 0; }
  .vn-book-edition { font-family: 'Raleway', sans-serif; font-weight: 400; color: var(--vn-text-dim); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; margin: 0; }
  .vn-book-desc { font-family: 'Raleway', sans-serif; font-weight: 400; color: #888888; font-size: 14px; line-height: 1.8; letter-spacing: 0.3px; margin: 6px 0 0 0; }

  .vn-reveal-block { position: relative; overflow: hidden; background: #080808; border: 1px solid #1A1A1A; border-left: 3px solid var(--vn-copper); padding: 40px; display: flex; justify-content: space-between; align-items: center; gap: 32px; flex-wrap: wrap; }
  .vn-reveal-block--with-candle { flex-direction: column; align-items: stretch; gap: 24px; }
  .vn-reveal-candle { width: 140px; height: 140px; object-fit: cover; border-radius: 2px; display: block; margin: 0 auto; position: relative; z-index: 1; }
  .vn-reveal-row { display: flex; justify-content: space-between; align-items: center; gap: 32px; flex-wrap: wrap; width: 100%; position: relative; z-index: 1; }

  /* SWAP WINDOW BLOCK — always visible to members; date-window controls CTA state */
  .vn-swap-block { position: relative; overflow: hidden; background: #080808; border: 1px solid #1A1A1A; border-left: 3px solid var(--vn-copper); padding: 40px; display: flex; justify-content: space-between; align-items: center; gap: 32px; flex-wrap: wrap; }
  .vn-swap-block::before { content: ''; position: absolute; top: -100%; left: -60%; width: 50%; height: 300%; background: linear-gradient(105deg, transparent 30%, rgba(184,115,51,0.04) 40%, rgba(212,160,90,0.08) 50%, rgba(184,115,51,0.04) 60%, transparent 70%); animation: vn-copper-sweep 10s ease-in-out 3; pointer-events: none; }
  .vn-swap-label { font-family: 'Raleway', sans-serif; font-weight: 700; letter-spacing: 5px; text-transform: uppercase; font-size: 13px; color: var(--vn-copper); margin-bottom: 8px; }
  .vn-swap-title { font-family: 'Antonio', sans-serif; font-weight: 300; letter-spacing: 4px; text-transform: uppercase; color: #FFFFFF; font-size: clamp(18px, 2.5vw, 28px); margin-bottom: 10px; line-height: 1.1; }
  .vn-swap-body { font-family: 'Raleway', sans-serif; font-weight: 400; font-size: 15px; color: #999999; letter-spacing: 0.3px; margin: 0 0 12px; max-width: 480px; line-height: 1.7; }
  .vn-swap-window-info { font-family: 'Raleway', sans-serif; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; font-size: 12px; color: #777777; margin: 0; }
  .vn-swap-btn { font-family: 'Raleway', sans-serif; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; font-size: 13px; padding: 14px 28px; text-decoration: none; white-space: nowrap; flex-shrink: 0; transition: background 0.2s ease, color 0.2s ease; position: relative; z-index: 1; }
  .vn-swap-btn--open { color: var(--vn-cta-ink); background: var(--vn-cta-bg); }
  .vn-swap-btn--open:hover { background: var(--vn-cta-bg-hover); }
  .vn-swap-btn-closed { font-family: 'Raleway', sans-serif; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; font-size: 13px; color: var(--vn-text-dim); padding: 14px 28px; border: 1px solid #2A2A2A; white-space: nowrap; flex-shrink: 0; position: relative; z-index: 1; }
  .vn-swap-block[data-window-open="true"] .vn-swap-btn--open { display: inline-block; }
  .vn-swap-block[data-window-open="true"] .vn-swap-btn-closed { display: none; }
  .vn-swap-block[data-window-open="false"] .vn-swap-btn--open { display: none; }
  .vn-swap-block[data-window-open="false"] .vn-swap-btn-closed { display: inline-block; }
  .vn-reveal-block::before { content: ''; position: absolute; top: -100%; left: -60%; width: 50%; height: 300%; background: linear-gradient(105deg, transparent 30%, rgba(184,115,51,0.04) 40%, rgba(212,160,90,0.08) 50%, rgba(184,115,51,0.04) 60%, transparent 70%); animation: vn-copper-sweep 8s ease-in-out 3; pointer-events: none; }
  .vn-reveal-block > * { position: relative; z-index: 1; }
  .vn-reveal-label { font-family: 'Raleway', sans-serif; font-weight: 700; letter-spacing: 5px; text-transform: uppercase; font-size: 12px; color: var(--vn-copper); margin-bottom: 8px; }
  .vn-reveal-title { font-family: 'Antonio', sans-serif; font-weight: 300; letter-spacing: 4px; text-transform: uppercase; color: #FFFFFF; font-size: clamp(18px, 2.5vw, 28px); margin-bottom: 8px; line-height: 1.1; }
  .vn-reveal-date { font-family: 'Raleway', sans-serif; font-weight: 400; font-size: 14px; color: var(--vn-text-mute); letter-spacing: 0.3px; margin: 0; }
  .vn-reveal-btn { font-family: 'Raleway', sans-serif; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; font-size: 12px; color: var(--vn-cta-ink); background: var(--vn-cta-bg); padding: 14px 28px; text-decoration: none; white-space: nowrap; transition: background 0.2s ease; flex-shrink: 0; }
  .vn-reveal-btn:hover { background: var(--vn-cta-bg-hover); }
  .vn-reveal-btn.locked { opacity: 0.35; pointer-events: none; }

  .vn-archive-eyebrow { font-family: 'Raleway', sans-serif; font-weight: 700; letter-spacing: 5px; text-transform: uppercase; font-size: 12px; color: var(--vn-text-dim); margin-bottom: 8px; }
  .vn-archive-title { font-family: 'Antonio', sans-serif; font-weight: 300; letter-spacing: 4px; text-transform: uppercase; color: #FFFFFF; font-size: clamp(18px, 2.5vw, 28px); margin-bottom: 8px; line-height: 1.1; }
  .vn-archive-body { font-family: 'Raleway', sans-serif; font-weight: 400; font-size: 14px; color: var(--vn-text-dim); letter-spacing: 0.3px; margin: 0; max-width: 400px; line-height: 1.7; }
  .vn-archive-btn { font-family: 'Raleway', sans-serif; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; font-size: 12px; color: #AAAAAA; text-decoration: none; border: 1px solid #2A2A2A; padding: 14px 28px; white-space: nowrap; transition: border-color 0.2s ease, color 0.2s ease; flex-shrink: 0; }
  .vn-archive-btn:hover { border-color: var(--vn-text-dim); color: #FFFFFF; }

  .vn-soundscapes-eyebrow { font-family: 'Raleway', sans-serif; font-weight: 700; letter-spacing: 5px; text-transform: uppercase; font-size: 12px; color: #777777; margin-bottom: 8px; }
  .vn-soundscapes-title { font-family: 'Antonio', sans-serif; font-weight: 300; letter-spacing: 4px; text-transform: uppercase; color: #FFFFFF; font-size: clamp(18px, 2.5vw, 28px); margin-bottom: 8px; line-height: 1.1; }
  .vn-soundscapes-body { font-family: 'Raleway', sans-serif; font-weight: 400; font-size: 14px; color: #888888; letter-spacing: 0.3px; margin: 0; max-width: 400px; line-height: 1.7; }
  .vn-soundscapes-btn { font-family: 'Raleway', sans-serif; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; font-size: 12px; color: #FFFFFF; text-decoration: none; border: 1px solid #333333; padding: 14px 28px; white-space: nowrap; transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease; flex-shrink: 0; }
  .vn-soundscapes-btn:hover { border-color: #FFFFFF; background: #FFFFFF; color: var(--vn-ink-sink); }

  @keyframes vn-copper-sweep { 0% { transform: translateX(-200px); } 40% { transform: translateX(1200px); } 100% { transform: translateX(1200px); } }

  /* ===== THE CORNER — stylized luxe cards ===== */
  .vn-corner-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px; counter-reset: vncorner; }
  .vn-corner-card { counter-increment: vncorner; position: relative; display: flex; flex-direction: column; background: linear-gradient(158deg, #101010 0%, #080808 70%); border: 1px solid #1c1c1c; border-radius: 3px; padding: 30px 28px 26px; min-height: 232px; text-decoration: none; overflow: hidden; transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease; }
  .vn-corner-card::before { content: ''; position: absolute; top: 0; left: 0; height: 2px; width: 40px; background: var(--vn-copper); transition: width 0.4s ease; }
  .vn-corner-card:hover { transform: translateY(-5px); border-color: #3a2c1c; box-shadow: 0 20px 44px rgba(0,0,0,0.6); }
  .vn-corner-card:hover::before { width: 100%; }
  .vn-corner-num { font-family: 'Antonio', sans-serif; font-weight: 600; font-size: 13px; letter-spacing: 3px; color: #6b4a2c; margin-bottom: 22px; }
  .vn-corner-num::before { content: counter(vncorner, decimal-leading-zero); }
  .vn-corner-card-title { font-family: 'Antonio', sans-serif; font-weight: 500; letter-spacing: 4px; text-transform: uppercase; color: #F4EDE2; font-size: clamp(20px, 2.4vw, 25px); margin: 0 0 12px; line-height: 1.1; }
  .vn-corner-card-desc { font-family: 'Raleway', sans-serif; font-size: 14px; color: #9a9a9a; line-height: 1.8; letter-spacing: 0.3px; margin: 0 0 24px; }
  .vn-corner-cta { margin-top: auto; font-family: 'Raleway', sans-serif; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; font-size: 11px; color: var(--vn-copper); display: inline-flex; align-items: center; gap: 8px; }
  .vn-corner-cta .vn-arrow { transition: transform 0.3s ease; display: inline-block; }
  .vn-corner-card:hover .vn-corner-cta .vn-arrow { transform: translateX(5px); }
  .vn-corner-card--locked { border-style: dashed; border-color: #242424; }
  .vn-corner-card--locked .vn-corner-card-title { color: #8a8378; }
  .vn-corner-card--locked::before { background: #3a3a3a; }
  .vn-corner-card--locked:hover::before { background: var(--vn-copper); }
  .vn-corner-lock { position: absolute; top: 26px; right: 26px; font-size: 13px; color: var(--vn-text-dim); }

  /* The Exhale — featured card with volume downloads */
  .vn-exhale-card { position: relative; margin-top: 20px; background: linear-gradient(150deg, #14100b 0%, #0a0a0a 62%); border: 1px solid #2c2216; border-radius: 3px; padding: 42px 40px 38px; overflow: hidden; }
  .vn-exhale-card::after { content: ''; position: absolute; top: -60px; right: -60px; width: 220px; height: 220px; background: radial-gradient(circle, rgba(184,115,51,0.16), transparent 70%); pointer-events: none; }
  .vn-exhale-flag { display: inline-block; font-family: 'Raleway', sans-serif; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; font-size: 10px; color: var(--vn-copper); border: 1px solid rgba(184,115,51,0.4); border-radius: 40px; padding: 6px 14px; margin-bottom: 20px; }
  .vn-exhale-title { font-family: 'Antonio', sans-serif; font-weight: 500; letter-spacing: 4px; text-transform: uppercase; color: #F4EDE2; font-size: clamp(24px, 3vw, 32px); margin: 0 0 14px; }
  .vn-exhale-desc { font-family: 'Raleway', sans-serif; font-size: 15px; color: #a5a099; line-height: 1.85; letter-spacing: 0.3px; margin: 0 0 30px; max-width: 620px; }
  .vn-exhale-about { font-family: 'Raleway', sans-serif; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; font-size: 11px; color: var(--vn-copper); text-decoration: none; }
  .vn-exhale-vols { display: flex; flex-wrap: wrap; gap: 30px; position: relative; z-index: 1; }
  .vn-vol { width: 158px; }
  .vn-vol-img { width: 100%; display: block; border: 1px solid #2a2118; box-shadow: 0 12px 26px rgba(0,0,0,0.6); transition: transform 0.35s ease, box-shadow 0.35s ease; }
  .vn-vol a:hover .vn-vol-img { transform: translateY(-4px); box-shadow: 0 18px 34px rgba(0,0,0,0.7); }
  .vn-vol-label { font-family: 'Raleway', sans-serif; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; font-size: 10px; color: #999999; margin: 14px 0 10px; }
  .vn-vol-dl { display: inline-block; font-family: 'Raleway', sans-serif; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; font-size: 10px; color: #E9DFCF; background: transparent; border: 1px solid var(--vn-cta-bg); padding: 9px 18px; text-decoration: none; transition: background 0.25s ease, color 0.25s ease; }
  .vn-vol-dl:hover { background: var(--vn-cta-bg-hover); color: var(--vn-cta-ink); }

  @media (max-width: 820px) {
    .vn-books-grid { grid-template-columns: 1fr; gap: 8px; }
    .vn-genre-col + .vn-genre-col { margin-top: 40px; }
    .vn-corner-grid { grid-template-columns: 1fr 1fr; }
  }

  /* Phones keep the 2-up Corner grid, but the narrow columns can't hold the
    long single words (SOUNDSCAPES / SUGGESTIONS) at full display size, so
    they'd break mid-word. Tighten the gap + padding for width and step the
    title down so each word sits on one line; keep-all prevents any mid-word split. */
  @media (max-width: 540px) {
    .vn-corner-grid { gap: 12px; }
    .vn-corner-card { padding: 24px 16px 20px; min-height: 200px; }
    .vn-corner-card-title { font-size: 17px; letter-spacing: 1.5px; word-break: keep-all; overflow-wrap: normal; hyphens: none; }
    .vn-corner-card-desc { font-size: 13px; }
    .vn-corner-num { margin-bottom: 16px; }
  }

  @media (max-width: 640px) {
    .vn-lounge { padding: 40px 16px 60px; }
    .vn-book-card { grid-template-columns: 80px 1fr; gap: 16px; padding: 20px; }
    .vn-book-cover-wrap { width: 80px; }
    .vn-reveal-block, .vn-swap-block { padding: 28px 24px; flex-direction: column; align-items: flex-start; }
  }


  /* ============================================================
     LOUNGE ENTRANCE SEQUENCE
     UPDATE MONTHLY: background image URL
     ============================================================ */
  .vn-entrance {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: var(--vn-ink-sink);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    overflow: hidden;
    opacity: 1;
    transition: opacity 0.8s ease;
  }

  .vn-entrance.vn-entrance--fading {
    opacity: 0;
    pointer-events: none;
  }

  .vn-entrance-bg {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 2.5s ease;
  }

  .vn-entrance-bg.vn-entrance-bg--visible {
    opacity: 1;
  }

  .vn-entrance-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to bottom,
      rgba(0,0,0,0.82) 0%,
      rgba(0,0,0,0.78) 40%,
      rgba(0,0,0,0.94) 100%
    );
    z-index: 1;
  }

  .vn-entrance-content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 0 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
  }

  .vn-entrance-eyebrow {
    font-family: 'Raleway', sans-serif;
    font-weight: 700;
    letter-spacing: 6px;
    text-transform: uppercase;
    font-size: 20px;
    color: var(--vn-copper);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.8s ease, transform 0.8s ease;
    margin-bottom: 16px;
  }

  .vn-entrance-mood {
    font-family: 'Antonio', sans-serif; font-weight: 300;
    letter-spacing: 10px;
    text-transform: uppercase;
    color: #FFFFFF;
    font-size: clamp(52px, 9vw, 96px);
    line-height: 1.0;
    text-shadow: 0 2px 40px rgba(0,0,0,0.9);
    margin-bottom: 20px;
  }

  .vn-entrance-mood .vn-word {
    display: inline-block;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.7s ease, transform 0.7s ease;
  }

  .vn-entrance-welcome {
    font-family: 'Lovely May Script', cursive !important;
    font-weight: 400 !important;
    font-size: clamp(28px, 4vw, 42px) !important;
    letter-spacing: 2px !important;
    text-transform: none !important;
    color: rgba(255,255,255,0.85);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.8s ease, transform 0.8s ease;
    margin-bottom: 48px;
    font-style: normal !important;
  }

  .vn-entrance-btn {
    font-family: 'Raleway', sans-serif;
    font-weight: 700;
    letter-spacing: 6px;
    text-transform: uppercase;
    font-size: 12px;
    color: var(--vn-cta-ink);
    background: var(--vn-cta-bg);
    border: 1px solid rgba(255,255,255,0.3);
    padding: 20px 72px;
    cursor: pointer;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.8s ease, transform 0.8s ease, background 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 0 40px rgba(184,115,51,0.4), 0 4px 20px rgba(0,0,0,0.5);
  }

  .vn-entrance-btn:hover {
    background: var(--vn-cta-bg-hover);
    box-shadow: 0 0 60px rgba(184,115,51,0.7), 0 4px 20px rgba(0,0,0,0.5);
  }

  .vn-entrance-skip {
    position: absolute;
    top: 24px;
    right: 32px;
    z-index: 3;
    font-family: 'Raleway', sans-serif;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    font-size: 11.5px;
    color: rgba(255,255,255,0.65);
    background: none;
    border: none;
    cursor: pointer;
    transition: color 0.2s ease;
    padding: 8px;
  }

  .vn-entrance-skip:hover { color: rgba(255,255,255,0.7); }

  .vn-entrance--visible .vn-entrance-eyebrow,
  .vn-entrance--visible .vn-entrance-mood,
  .vn-entrance--visible .vn-entrance-welcome,
  .vn-entrance--visible .vn-entrance-btn {
    opacity: 1;
    transform: translateY(0);
  }

  /* Page content rises when entrance releases */
  .vn-page-content {
    transform: translateY(40px);
    opacity: 0;
    transition: transform 0.9s ease, opacity 0.9s ease;
  }

  .vn-page-content.vn-page-content--visible {
    transform: translateY(0);
    opacity: 1;
  }

  /* ============================================================
     FLOATING SOUNDSCAPE PLAYER — DESKTOP
     ============================================================ */
  .vn-sound-float {
    position: fixed;
    top: 50%;
    right: 32px;
    transform: translateY(-50%);
    z-index: 500;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0;
    /* The panel keeps its 300px width even when closed, so the container is
       300px wide while only the 60px toggle is visible. Without this, the empty
       strip to the left of the toggle sits on top of the page's own links
       ("Soundscapes", "The Archive") and eats the clicks. */
    pointer-events: none;
  }
  .vn-sound-float > * { pointer-events: auto; }

  .vn-sound-toggle {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, var(--vn-copper-light), var(--vn-copper) 72%);
    border: none;
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 28px rgba(0,0,0,0.55), 0 0 24px rgba(184,115,51,0.4);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    flex-shrink: 0;
    animation: vn-sound-breathe 2.6s ease-in-out infinite;
  }
  .vn-sound-toggle::after {
    content: ""; position: absolute; inset: 0; border-radius: 50%;
    border: 2px solid rgba(184,115,51,0.55); animation: vn-sound-ripple 2.2s ease-out infinite; pointer-events: none;
  }
  /* "Press play" used to sit at right:76px — i.e. 76px to the LEFT of the circle,
     reaching out of the float and across whatever content happened to be mid-screen.
     The float is position:fixed; top:50%, so that was everything eventually: on
     2026-10-08 it was rendering on top of the white "Choose your experience" button.
     Sitting it under the circle keeps the nudge inside the float's own footprint. */
  .vn-sound-toggle::before {
    content: "Press play"; position: absolute; right: 0; left: auto; top: calc(100% + 10px);
    transform: none;
    font-family: 'Raleway', sans-serif; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
    font-size: 10px; color: var(--vn-copper); white-space: nowrap; opacity: 0.9; pointer-events: none;
    text-shadow: 0 1px 3px rgba(0,0,0,0.9);
  }
  /* Once the panel is open the nudge has done its job. */
  .vn-sound-panel--open ~ .vn-sound-toggle::before { opacity: 0; }
  @keyframes vn-sound-ripple { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.85); opacity: 0; } }
  @keyframes vn-sound-breathe { 0%,100% { box-shadow: 0 8px 28px rgba(0,0,0,0.55), 0 0 20px rgba(184,115,51,0.3); } 50% { box-shadow: 0 8px 28px rgba(0,0,0,0.55), 0 0 34px rgba(184,115,51,0.6); } }

  .vn-sound-toggle:hover { transform: scale(1.08); box-shadow: 0 10px 34px rgba(0,0,0,0.6), 0 0 42px rgba(184,115,51,0.75); }
  .vn-sound-toggle:hover::after { animation-duration: 1.3s; }



  .vn-sound-icon {
    font-size: 24px;
    color: var(--vn-ink);
    position: relative; z-index: 1;
    line-height: 1;
    display: block;
  }

  .vn-sound-panel {
    background: #0A0A0A;
    border: 1px solid #222222;
    border-radius: 2px;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.4s ease, opacity 0.3s ease, margin 0.3s ease;
    margin-bottom: 0;
    width: 300px;
  }

  .vn-sound-panel.vn-sound-panel--open {
    max-height: 200px;
    opacity: 1;
    margin-bottom: 12px;
  }

  .vn-sound-panel-inner {
    padding: 0;
  }

  .vn-sound-panel-label {
    font-family: 'Raleway', sans-serif;
    font-weight: 700;
    letter-spacing: 4px;
    text-transform: uppercase;
    font-size: 11.5px;
    color: var(--vn-copper);
    padding: 12px 14px 6px;
    display: block;
  }

  .vn-sound-panel-explore {
    font-family: 'Raleway', sans-serif;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    font-size: 11.5px;
    color: var(--vn-text-dim);
    text-decoration: none;
    padding: 8px 14px 12px;
    display: block;
    transition: color 0.2s ease;
    border-top: 1px solid #1A1A1A;
  }

  .vn-sound-panel-explore:hover { color: var(--vn-copper); }

  /* MOBILE: inline soundscape block */
  .vn-sound-inline {
    display: none;
    background: #080808;
    border: 1px solid #1A1A1A;
    border-left: 3px solid var(--vn-copper);
    padding: 20px 24px;
    margin-bottom: 40px;
  }

  .vn-sound-inline-label {
    font-family: 'Raleway', sans-serif;
    font-weight: 700;
    letter-spacing: 4px;
    text-transform: uppercase;
    font-size: 11.5px;
    color: var(--vn-copper);
    margin-bottom: 10px;
    display: block;
  }

  .vn-sound-inline-explore {
    font-family: 'Raleway', sans-serif;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    font-size: 11.5px;
    color: var(--vn-text-dim);
    text-decoration: none;
    display: block;
    margin-top: 10px;
    transition: color 0.2s ease;
    border-top: 1px solid #1A1A1A;
    padding-top: 10px;
  }

  .vn-sound-inline-explore:hover { color: var(--vn-copper); }

  @media (max-width: 768px) {
    /* !important beats the inline display:flex the entrance script sets, so the float stays desktop-only and the inline player (below) handles mobile — no more collision with the Corner cards. */
    .vn-sound-float { display: none !important; }
    .vn-sound-inline { display: block; }
    .vn-entrance-mood { letter-spacing: 6px; }
    .vn-entrance-skip { top: 16px; right: 20px; }
  }


  /* Candle flame glow */
  @keyframes vn-candle-breathe {
    0%, 100% { opacity: 0.7; transform: translate(-50%, -50%) scale(1); }
    50%       { opacity: 1;   transform: translate(-50%, -50%) scale(1.08); }
  }
  /* Reveal pulse */
  @keyframes vn-reveal-pulse {
    0%, 100% { opacity: 0.3; width: 40px; }
    50%       { opacity: 1;   width: 60px; }
  }
  .vn-reveal-pulse {
    display: block; width: 40px; height: 1px;
    background: var(--vn-copper); margin-top: 14px;
    animation: vn-reveal-pulse 2.5s ease-in-out infinite;
  }

  /* ============================================================
     ROOM-FEEL UPGRADES
     - Vignette (soft darkened corners suggest enclosed space)
     - Zone reveal (each zone fades in as user scrolls into it)
     - Corner item hover (lift + soft copper glow)
     ============================================================ */

  /* Vignette overlay — a real sibling of .vn-page-content. It cannot be a
     ::before on the content: the entrance animation leaves a transform on
     .vn-page-content, which turns position:fixed into absolute-over-the-
     whole-document and drags the dark edge down onto the hero. */
  .vn-vignette {
    position: fixed;
    inset: 0;
    background: radial-gradient(ellipse at center, transparent 35%, rgba(0,0,0,0.45) 100%);
    pointer-events: none;
    z-index: 1;
  }

  /* Zone reveal — initial hidden state, fades in when scrolled into view */
  .vn-zone-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 1s ease, transform 1s ease;
    will-change: opacity, transform;
  }
  .vn-zone-reveal--visible {
    opacity: 1;
    transform: translateY(0);
  }


  /* ============================================================
     REDUCED MOTION: disable all infinite animations + entrance
     fade sequence for users who prefer reduced motion
     ============================================================ */
  @media (prefers-reduced-motion: reduce) {
    .vn-zone-reveal {
      opacity: 1 !important;
      transform: none !important;
      transition: none !important;
    }
     {
      transition: none !important;
    }
     {
      transform: none !important;
    }
    .vn-c1-banner::before,
    .vn-quote-card-outer::after,
    .vn-reveal-block::before {
      animation: none !important;
    }
    .vn-reveal-pulse {
      animation: none !important;
    }
    .vn-candle-breathe-glow {
      animation: none !important;
    }
    .vn-entrance,
    .vn-entrance-bg,
    .vn-entrance-eyebrow,
    .vn-entrance-mood,
    .vn-entrance-mood .vn-word,
    .vn-entrance-welcome,
    .vn-entrance-btn,
    .vn-page-content,
    .vn-book-cover {
      transition: none !important;
    }
    .vn-entrance--visible .vn-entrance-eyebrow,
    .vn-entrance--visible .vn-entrance-mood,
    .vn-entrance--visible .vn-entrance-mood .vn-word,
    .vn-entrance--visible .vn-entrance-welcome,
    .vn-entrance--visible .vn-entrance-btn {
      opacity: 1 !important;
      transform: none !important;
    }
  }

/* ============================================================
   INNER HERO (2026-07-28) — replaces the plain-text page header.
   The entrance overlay owns the big mood moment; this hero says
   something new instead of repeating it.
   ============================================================ */
.vn-lounge-hero { position: relative; height: 38vh; min-height: 280px; max-height: 420px; display: flex; align-items: center; justify-content: center; overflow: hidden; margin-bottom: 48px; }
.vn-lounge-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; z-index: 0; display: block; }
.vn-lounge-hero-overlay { position: absolute; inset: 0; z-index: 1;
  background: radial-gradient(125% 120% at 50% 42%, rgba(0,0,0,0) 32%, rgba(0,0,0,0.72) 100%),
              linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.35) 44%, rgba(0,0,0,0.82) 100%); }
.vn-lounge-hero-content { position: relative; z-index: 2; text-align: center; padding: 0 24px; }
.vn-lounge-hero-eyebrow { font-family: 'Raleway', sans-serif; font-weight: 700; letter-spacing: 5px; text-transform: uppercase; font-size: 12px; color: #CFC7B8; margin: 0 0 18px; }
.vn-lounge-hero-eyebrow em { font-family: 'Lovely May Script', cursive; font-style: normal; text-transform: none; letter-spacing: 1px; font-size: 24px; color: var(--vn-copper); vertical-align: middle; }
.vn-lounge-hero-title { font-family: 'Antonio', sans-serif; font-weight: 300; text-transform: uppercase; letter-spacing: 6px; color: #FFFFFF; font-size: clamp(34px, 5.2vw, 58px); line-height: 1.05; margin: 0; text-shadow: 0 2px 24px rgba(0,0,0,1); }
.vn-lounge-hero-title em { display: inline-block; font-family: 'Lovely May Script', cursive; font-style: normal; text-transform: none; letter-spacing: 0; color: var(--vn-copper); font-size: 1.05em; line-height: 0.9; text-shadow: 0 2px 22px rgba(0,0,0,0.9); }
.vn-lounge-hero-rule { display: block; width: 56px; height: 2px; background: var(--vn-copper); margin: 26px auto 0; box-shadow: 0 0 18px rgba(184,115,51,0.6); }
.vn-lounge-kicker { font-family: 'Raleway', sans-serif; font-weight: 600; letter-spacing: 4px; text-transform: uppercase; font-size: 12px; color: #999999; margin: 0 0 22px; }
.vn-lounge-kicker strong { color: #F4EDE2; font-weight: 600; }
@media (max-width: 640px) { .vn-lounge-hero { height: 34vh; min-height: 230px; margin-bottom: 36px; } }

/* ============================================================
   THE ROOMS — the Lounge's photo-led destination grid.
   Replaced "The Corner" (three typographic cards) 2026-10-08.
   A room is a destination; the photo is what says so.
   ============================================================ */
/* Three across since the Archive room was removed 2026-10-10. At two columns the
   third card sat alone with a 445px hole beside it. auto-fit means this still
   reads correctly if a fourth room is ever added back. */
.vn-rooms{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:22px; margin-top:34px;
}
@media (max-width:760px){ .vn-rooms{ grid-template-columns:1fr; gap:18px; } }

.vn-room{
  display:block; text-decoration:none; background:#111113;
  border:1px solid #1F1D1B; border-radius:2px; overflow:hidden;
  transition:border-color .25s ease, transform .25s ease;
}
.vn-room:hover{ border-color:rgba(184,115,51,.55); transform:translateY(-3px); }
.vn-room:focus-visible{ outline:var(--vn-focus-ring); outline-offset:3px; }

.vn-room-img{ display:block; aspect-ratio:16/10; overflow:hidden; background:#0A0A0A; }
.vn-room-img img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease; }
.vn-room:hover .vn-room-img img{ transform:scale(1.04); }
@media (prefers-reduced-motion:reduce){
  .vn-room, .vn-room-img img{ transition:none; }
  .vn-room:hover{ transform:none; }
  .vn-room:hover .vn-room-img img{ transform:none; }
}

.vn-room-body{ display:block; padding:22px 24px 24px; }
.vn-room-label{ display:block; font-family:'Raleway',sans-serif; font-weight:700; letter-spacing:3px; font-size:11px; color:var(--vn-copper); margin-bottom:10px; }
.vn-room-title{ display:block; font-family:'Antonio',sans-serif; font-weight:400; letter-spacing:2px; text-transform:uppercase; font-size:24px; line-height:1.1; color:var(--vn-text); margin-bottom:10px; }
.vn-room-desc{ display:block; font-family:'Raleway',sans-serif; font-weight:300; font-size:13.5px; line-height:1.7; color:#B8B2A6; margin-bottom:16px; }
.vn-room-cta{ display:inline-block; font-family:'Raleway',sans-serif; font-weight:700; letter-spacing:2.5px; text-transform:uppercase; font-size:11.5px; color:var(--vn-copper); }
.vn-room-cta--locked{ color:#B8B2A6; }
.vn-room:hover .vn-room-cta{ color:#D08A45; }
.vn-room .vn-arrow{ transition:transform .25s ease; display:inline-block; }
.vn-room:hover .vn-arrow{ transform:translateX(4px); }

/* Novel Suggestions: a form, not a room, so no photo. */
.vn-room-slim{
  display:block; text-decoration:none; margin-top:22px; padding:22px 24px;
  background:#111113; border:1px solid #1F1D1B; border-left:2px solid var(--vn-copper);
  border-radius:2px; transition:border-color .25s ease;
}
.vn-room-slim:hover{ border-color:rgba(184,115,51,.55); border-left-color:var(--vn-copper); }
.vn-room-slim:focus-visible{ outline:var(--vn-focus-ring); outline-offset:3px; }
.vn-room-slim-title{ display:block; font-family:'Antonio',sans-serif; letter-spacing:2px; text-transform:uppercase; font-size:19px; color:var(--vn-text); margin-bottom:8px; }
.vn-room-slim-desc{ display:block; font-family:'Raleway',sans-serif; font-weight:300; font-size:13.5px; line-height:1.7; color:#B8B2A6; margin-bottom:14px; }

/* ============================================================
   COLLECTION PANELS — replaced "The Selections / The Novels"
   (~1,598px, 12 images, one collection's six novels with blurbs).
   Compact and typographic on purpose: three dark product shots in a row
   would compete and put the height straight back. The printed quote card
   is the image, because it belongs to the collection.
   ============================================================ */
.vn-colls{ display:flex; flex-direction:column; gap:18px; margin-top:32px; }

.vn-coll{
  display:grid; grid-template-columns:132px minmax(0,1fr); gap:24px; align-items:center;
  background:#111113; border:1px solid #1F1D1B; border-radius:2px; padding:20px 24px;
  transition:border-color .25s ease;
}
.vn-coll:hover{ border-color:#2E2A26; }
@media (max-width:640px){
  .vn-coll{ grid-template-columns:1fr; gap:16px; }
  .vn-coll-quote-img, .vn-coll-quote-fallback{ max-width:190px; }
}

.vn-coll-quote-img{ width:100%; display:block; border-radius:2px; }
.vn-coll-quote-fallback{
  aspect-ratio:1350/1725; display:flex; align-items:center; justify-content:center;
  background:#0A0A0A; border:1px solid #23211E; border-radius:2px; padding:14px;
}
.vn-coll-quote-fallback p{
  font-family:'Lovely May Script',cursive; font-size:17px; line-height:1.35;
  color:var(--vn-copper); text-align:center; margin:0;
}

.vn-coll-badge{
  display:inline-block; font-family:'Raleway',sans-serif; font-weight:700;
  letter-spacing:2.5px; text-transform:uppercase; font-size:9.5px;
  padding:5px 10px; border-radius:2px; margin-bottom:10px;
}
/* All three clear 4.5:1 on #111113. */
.vn-coll-badge--open{ color:#8FD3A4; border:1px solid rgba(143,211,164,.4); }
.vn-coll-badge--low{  color:#E8B882; border:1px solid rgba(232,184,130,.45); }
.vn-coll-badge--gone{ color:#9A9A9A; border:1px solid #2E2A26; }

.vn-coll-name{
  font-family:'Antonio',sans-serif; font-weight:400; letter-spacing:2px;
  text-transform:uppercase; font-size:26px; line-height:1.1;
  color:var(--vn-text); margin:0 0 8px;
}
.vn-coll-thread{
  font-family:'Raleway',sans-serif; font-weight:300; font-size:13.5px;
  line-height:1.7; color:#B8B2A6; margin:0 0 14px; max-width:62ch;
}
.vn-coll-links{ display:flex; flex-wrap:wrap; gap:18px; align-items:center; }
.vn-coll-cta, .vn-coll-alt{
  font-family:'Raleway',sans-serif; font-weight:700; letter-spacing:2.5px;
  text-transform:uppercase; font-size:11px; text-decoration:none;
}
.vn-coll-cta{ color:var(--vn-copper); }
.vn-coll-cta:hover{ color:#D08A45; }
.vn-coll-alt{ color:#B8B2A6; }
.vn-coll-alt:hover{ color:var(--vn-text); }
.vn-coll-cta:focus-visible, .vn-coll-alt:focus-visible{ outline:var(--vn-focus-ring); outline-offset:3px; }
.vn-coll .vn-arrow{ display:inline-block; transition:transform .25s ease; }
.vn-coll-cta:hover .vn-arrow, .vn-coll-alt:hover .vn-arrow{ transform:translateX(3px); }
@media (prefers-reduced-motion:reduce){ .vn-coll, .vn-coll .vn-arrow{ transition:none; } }