:root {
        --color-navy: #0c1b2e;
        --color-navy-2: #102540;
        --color-navy-3: #081421;
        --color-gold: #d4af37;
        --color-gold-light: #e8c84a;
        --color-bg: #fafaf8;
        --color-bg-warm: #f2ede6;
        --color-text: #0c1b2e;
        --color-text-light: #ede8e0;
        --color-muted: #4e5c6c;
      --color-gold-ink: #7f6921;    /* gold-toned TEXT on light bg — 4.57:1 on warm */
      --color-gold-ink-lg: #a1852a; /* large display accents on light — 3.05:1 on warm */
        --color-rule: rgba(12, 27, 46, 0.1);
        --color-rule-gold: rgba(212, 175, 55, 0.25);
      }

      html,
      body {
        margin: 0;
        padding: 0;
        background: var(--color-navy);
      }
      body {
        font-family: "DM Sans", system-ui, sans-serif;
        color: var(--color-text);
        overflow-x: hidden;
      }
      .font-display {
        font-family: "Cormorant Garamond", Georgia, serif;
      }

      /* Lenis */
      html.lenis,
      html.lenis body {
        height: auto;
      }
      .lenis.lenis-smooth {
        scroll-behavior: auto !important;
      }
      .lenis.lenis-stopped {
        overflow: hidden;
      }

      ::selection {
        background: var(--color-gold);
        color: var(--color-navy);
      }

      /* ── Type scale ── */
    .t-hero      { font-size: clamp(3.5rem, 8vw, 6.5rem);   line-height: 0.92; letter-spacing: -0.022em; }
    .t-display   { font-size: clamp(2.6rem, 5.2vw, 4.5rem); line-height: 1.04; letter-spacing: -0.014em; }
    .t-display-sm{ font-size: clamp(2rem, 3.4vw, 3.25rem);  line-height: 1.12; letter-spacing: -0.01em; }
    .t-cta       { font-size: clamp(3.2rem, 7vw, 6rem);     line-height: 0.94; letter-spacing: -0.022em; }

    .eyebrow {
      font-family: "DM Sans", sans-serif;
      letter-spacing: 0.22em; text-transform: uppercase;
      font-size: 0.78rem; font-weight: 500;
    }
      .rule-gold {
        height: 1px;
        background: var(--color-rule-gold);
      }

      /* ── Line mask reveal ── */
      .line-mask {
        display: block;
        overflow: hidden;
      }
      .line-mask > * {
        display: block;
        will-change: transform;
      }

      /* The #bw-hero rules (.hero-photo, .hero-rule) went with the hero, R3
         2026-10-01. The page opens on the reader. */

      .ghost {
        position: absolute;
        pointer-events: none;
        user-select: none;
        font-family: "Cormorant Garamond", serif;
        font-weight: 500;
        line-height: 0.8;
        white-space: nowrap;
      }

      /* ── Buttons ── */
      .btn-gold {
      border-radius: 2px;
        background: var(--color-gold);
        color: var(--color-navy);
        transition:
          background 0.3s ease,
          transform 0.3s ease,
          box-shadow 0.3s ease;
        box-shadow: 0 8px 24px -10px rgba(212, 175, 55, 0.6);
      }
      .btn-gold:hover {
        background: var(--color-gold-light);
        transform: translateY(-3px);
        box-shadow: 0 16px 34px -12px rgba(212, 175, 55, 0.7);
      }
      .btn-outline {
      border-radius: 2px;
        border: 1px solid var(--color-rule-gold);
        color: var(--color-text-light);
        transition:
          border-color 0.3s ease,
          color 0.3s ease,
          transform 0.3s ease;
      }
      .btn-outline:hover {
        border-color: var(--color-gold);
        color: var(--color-gold);
        transform: translateY(-3px);
      }
      .btn-outline-ink {
        border: 1px solid var(--color-rule);
        color: var(--color-text);
      }
      .btn-outline-ink:hover {
        border-color: var(--color-gold);
        color: var(--color-gold);
        transform: translateY(-3px);
      }

      .rate-block.dark {
        background: linear-gradient(160deg, #102540, #081421);
        border-color: rgba(212, 175, 55, 0.25);
      }

      /* ── Reader, Past Issues, advertise band (R3, 2026-10-01) ──
         Reader resized 2026-10-01 so the magazine is the page: Cristie wants
         visitors reading immediately. The reader carries the fixed header's
         clearance itself: a 72px nav row, plus the 45px utility bar from
         1024px up (see style.css).

         Desktop (>=1024px): the frame takes the viewport height that is left
         after the header, the meta + title block and a little breathing room.
         It is clamped so it never collapses on a short laptop or balloons on
         a tall monitor.
         The width is that height x 1.7. Simplebooklet's arrows live inside its
         cross-origin iframe, pinned to the iframe's left and right edges, so
         we can't move them. What we can control is the frame's proportions.
         Two US Letter pages make a 1.544 spread, and 1.7 leaves just enough
         gutter for the arrows, so they sit beside the pages. A wider frame
         strands them at the screen edges.
         The 712px ceiling is in px because the limit it tracks is
         Simplebooklet's, not our type scale. It exists because Simplebooklet stops
         growing its pages at about 620px tall, whatever the frame size.
         Measured 2026-10-01: in an 893px frame at 1920x1080 the pages stayed
         at ~617px, and the extra frame only added dead space and pushed the
         arrows ~270px off the spread. At 712px the pages plus Simplebooklet's
         control bar fill the frame.

         Below 1024px the reader goes edge to edge at 75svh, and Simplebooklet
         drops to single pages. */
      #read { scroll-margin-top: 72px; }
      .bw-reader {
        --bw-frame-h: 75svh;
        padding: calc(72px + 1rem) 0 clamp(2rem, 5vh, 3rem);
      }
      .bw-reader__inner {
        width: min(100%, 120rem);
        margin-inline: auto;
        padding-inline: 1.5rem;
      }
      @media (min-width: 768px) {
        .bw-reader__inner { padding-inline: 2.5rem; }
      }
      @media (min-width: 1024px) {
        #read { scroll-margin-top: 117px; }
        .bw-reader {
          /* header 117 + top pad .75rem + head block 3.25rem + gap .5rem
             + bottom breathing .75rem */
          --bw-frame-h: clamp(448px, calc(100svh - 117px - 5.25rem), 712px);
          padding-top: calc(117px + 0.75rem);
        }
      }
      .bw-reader__head {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.2rem;
        margin-bottom: 0.5rem;
        text-align: center;
      }
      .bw-reader__meta {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.4rem 1rem;
        color: rgba(237, 232, 224, 0.7);
        font-size: 0.72rem;
        font-weight: 500;
        letter-spacing: 0.16em;
        text-transform: uppercase;
      }
      .bw-reader__meta > * + *::before {
        content: "\00B7";
        margin-right: 1rem;
        color: var(--color-gold);
      }
      /* One line from 768px up. The cover already carries the theme line, so
         this is a label, not a headline. Below 768 the full title cannot fit
         one line at a legible size, so it is allowed to wrap there. */
      .bw-reader__title {
        max-width: 100%;
        font-size: clamp(1.15rem, 1.6vw, 1.6rem);
        line-height: 1.2;
        letter-spacing: 0;
        text-wrap: balance;
      }
      @media (min-width: 768px) {
        .bw-reader__title {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
      .bw-reader__title:focus { outline: none; }

      /* Overrides the generic aspect-ratio frame in style.css. */
      .bw-reader .flip-frame {
        aspect-ratio: auto;
        height: var(--bw-frame-h);
        min-height: 22rem;
        /* Edge to edge on small screens: cancel the inner padding. */
        width: calc(100% + 3rem);
        max-width: none;
        margin-inline: -1.5rem;
      }
      @media (min-width: 768px) {
        .bw-reader .flip-frame {
          width: calc(100% + 5rem);
          margin-inline: -2.5rem;
        }
      }
      @media (min-width: 1024px) {
        .bw-reader .flip-frame {
          width: min(100%, calc(var(--bw-frame-h) * 1.7));
          margin-inline: auto;
        }
      }

      .bw-past__grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: clamp(1rem, 2.5vw, 2rem);
        list-style: none;
        margin: 0;
        padding: 0;
      }
      @media (min-width: 768px) { .bw-past__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
      @media (min-width: 1180px) { .bw-past__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
      .bw-issue-card {
        display: flex;
        flex-direction: column;
        height: 100%;
        color: var(--color-text-light);
        text-decoration: none;
      }
      .bw-issue-card__cover {
        position: relative;
        display: block;
        aspect-ratio: 1100 / 1424;
        overflow: hidden;
        border: 1px solid rgba(212, 175, 55, 0.28);
        border-radius: 2px;
        background: linear-gradient(155deg, #102540 0%, #0c1b2e 55%, #081421 100%);
        box-shadow: 0 24px 50px -30px rgba(0, 0, 0, 0.9);
        transition: transform 0.35s ease, border-color 0.35s ease;
      }
      .bw-issue-card__cover img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .bw-issue-card__placeholder {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        gap: 0.5rem;
        padding: clamp(1rem, 2.4vw, 1.75rem);
        background:
          radial-gradient(ellipse 80% 55% at 75% 12%, rgba(212, 175, 55, 0.18), transparent 60%),
          linear-gradient(155deg, #102540 0%, #0c1b2e 55%, #081421 100%);
      }
      .bw-issue-card__placeholder::before {
        content: "";
        position: absolute;
        top: clamp(1rem, 2.4vw, 1.75rem);
        left: clamp(1rem, 2.4vw, 1.75rem);
        width: 40px;
        height: 2px;
        background: var(--color-gold);
      }
      .bw-issue-card__ph-mark {
        color: rgba(237, 232, 224, 0.7);
        font-size: 0.66rem;
        font-weight: 500;
        letter-spacing: 0.18em;
        text-transform: uppercase;
      }
      .bw-issue-card__ph-num {
        color: var(--color-gold);
        font-family: "Cormorant Garamond", serif;
        font-size: clamp(2rem, 4vw, 3.25rem);
        font-weight: 400;
        line-height: 0.95;
      }
      .bw-issue-card__ph-theme {
        color: var(--color-text-light);
        font-family: "Cormorant Garamond", serif;
        font-size: clamp(1.05rem, 1.6vw, 1.35rem);
        font-style: italic;
        line-height: 1.2;
      }
      .bw-issue-card__body {
        display: flex;
        flex-direction: column;
        gap: 0.35rem;
        padding-top: 1rem;
      }
      .bw-issue-card__title {
        font-family: "Cormorant Garamond", serif;
        font-size: 1.3rem;
        line-height: 1.2;
      }
      .bw-issue-card__date { color: rgba(237, 232, 224, 0.62); font-size: 0.85rem; }
      .bw-issue-card__action {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        color: var(--color-gold);
        font-size: 0.85rem;
        font-weight: 500;
      }
      @media (pointer: fine) {
        .bw-issue-card:hover .bw-issue-card__cover { transform: translateY(-4px); border-color: var(--color-gold); }
        .bw-issue-card:hover .bw-issue-card__title { color: var(--color-gold); }
      }

      .bw-adband { border-block: 1px solid var(--color-rule); }
      .bw-adband__inner {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 1.25rem 2rem;
        padding-block: clamp(1.75rem, 4vh, 2.5rem);
      }
      .bw-adband__copy {
        display: flex;
        flex-direction: column;
        gap: 0.3rem;
      }
      .bw-adband__copy .font-display {
        font-size: clamp(1.6rem, 2.6vw, 2.25rem);
        line-height: 1.1;
      }
      @media (max-width: 639px) {
        .bw-adband .btn-gold { width: 100%; }
      }

      /* ── Newsletter / input ── */
      .nl-input {
        background: var(--color-navy-2);
        border: 1px solid var(--color-rule-gold);
        color: var(--color-text-light);
        transition:
          border-color 0.3s ease,
          box-shadow 0.3s ease;
      }
      .nl-input::placeholder {
        color: rgba(237, 232, 224, 0.4);
      }
      .nl-input:focus {
        outline: none;
        border-color: var(--color-gold);
        box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.18);
      }

      /* ── Nav (section-aware) ── */
      #site-header {
        transition:
          background 0.45s ease,
          backdrop-filter 0.45s ease,
          box-shadow 0.45s ease,
          border-color 0.45s ease;
      }
      #site-header .logo-text,
      #site-header .nav-link {
        transition: color 0.45s ease;
      }
      #site-header .logo-accent {
        color: var(--color-gold);
        font-style: italic;
      }
      #site-header.nav-dark {
        background: transparent;
        box-shadow: none;
      }
      #site-header.nav-dark .logo-text {
        color: #ffffff;
      }
      #site-header.nav-dark .nav-link {
        color: rgba(237, 232, 224, 0.85);
      }
      #site-header.nav-light {
        background: rgba(250, 250, 248, 0.96);
        backdrop-filter: blur(12px);
        box-shadow:
          0 1px 0 rgba(12, 27, 46, 0.08),
          0 4px 20px rgba(12, 27, 46, 0.06);
      }
      #site-header.nav-light .logo-text {
        color: #0c1b2e;
      }
      #site-header.nav-light .nav-link {
        color: rgba(12, 27, 46, 0.75);
      }
      .nav-link {
        position: relative;
      }
      .nav-link::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -6px;
        height: 1px;
        width: 0;
        background: var(--color-gold);
        transition: width 0.35s ease;
      }
      .nav-link:hover::after {
        width: 100%;
      }
      .nav-link.is-current::after {
        width: 100%;
      }
      #site-header .nav-link:hover {
        color: var(--color-gold);
      }

      #hero .line-mask {
        padding-top: 0.08em;
        padding-bottom: 0.18em;
      }

      .reveal,
      .reveal-stagger > * {
        will-change: transform, opacity;
      }

      @media (prefers-reduced-motion: reduce) {
        * {
          animation: none !important;
          scroll-behavior: auto !important;
          transition: none !important;
        }
        .line-mask > * {
          transform: none !important;
        }
        .ad-mock {
          opacity: 1 !important;
          transform: none !important;
        }
      }
    
    /* dark mode, scrolled - navy backdrop so page content never collides with nav links */
    #site-header.nav-dark.nav-scrolled {
      background: rgba(12,27,46,0.90);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      box-shadow: 0 1px 0 rgba(212,175,55,0.14), 0 8px 24px rgba(8,20,33,0.35);
    }
/* ══ WCAG AA contrast guard (Phase 3.6) ══════════════════════════════
       Gold is a DARK-background colour: 8.24:1 on navy, but only 2.01:1 on
       --color-bg and 1.81:1 on --color-bg-warm. Any gold TEXT sitting on a
       light section therefore fails AA. These rules swap it for the ink
       golds inside light sections only; gold on navy is untouched.
       Attribute selector catches opacity variants (text-gold/70 etc).      */
    .bg-bg      [class*="text-gold"],
    .bg-bg-warm [class*="text-gold"],
    .bg-white   [class*="text-gold"] { color: var(--color-gold-ink); }

    /* Large display accents clear AA at 3:1, so they keep more chroma. */
    .bg-bg      .t-hero [class*="text-gold"], .bg-bg-warm .t-hero [class*="text-gold"],
    .bg-bg   .t-mission [class*="text-gold"], .bg-bg-warm .t-mission [class*="text-gold"],
    .bg-bg   .t-display [class*="text-gold"], .bg-bg-warm .t-display [class*="text-gold"],
    .bg-bg .t-display-sm [class*="text-gold"], .bg-bg-warm .t-display-sm [class*="text-gold"],
    .bg-bg       .t-cta [class*="text-gold"], .bg-bg-warm .t-cta [class*="text-gold"] { color: var(--color-gold-ink-lg); }

    /* ══ WCAG AA contrast guard (Phase 3.6) ══════════════════════════════
       Gold is a DARK-background colour: 8.24:1 on navy, but only 2.01:1 on
       --color-bg and 1.81:1 on --color-bg-warm, so gold TEXT on any light
       section fails AA. Rather than chase every call site, we redefine the
       gold custom properties *inside* light sections — every var(--color-gold)
       consumer below them inherits the AA-safe tone automatically.
       #a1852a = 3.05:1 on warm (clears the 3:1 bar for large text + UI).     */
    .bg-bg, .bg-bg-warm, .bg-white {
      --color-gold: #7f6921;
      --color-gold-light: #6d5a1c;
    }

    /* Dark cards nested inside a light section keep the real gold. */
    .bg-navy, .bg-navy-2, .bg-navy-3, .rcard.is-dark, [data-theme="dark"] {
      --color-gold: #d4af37;
      --color-gold-light: #e8c84a;
    }

    /* Small gold text on light needs the full 4.5:1, not just 3:1. */
    .bg-bg      [class*="text-gold"],
    .bg-bg-warm [class*="text-gold"],
    .bg-white   [class*="text-gold"],
    .bg-bg .eyebrow, .bg-bg-warm .eyebrow { color: var(--color-gold-ink); }

    /* …but large display accents keep the richer tone. */
    .bg-bg .t-hero [class*="text-gold"], .bg-bg-warm .t-hero [class*="text-gold"],
    .bg-bg .t-mission [class*="text-gold"], .bg-bg-warm .t-mission [class*="text-gold"],
    .bg-bg .t-display [class*="text-gold"], .bg-bg-warm .t-display [class*="text-gold"],
    .bg-bg .t-display-sm [class*="text-gold"], .bg-bg-warm .t-display-sm [class*="text-gold"],
    .bg-bg .t-cta [class*="text-gold"], .bg-bg-warm .t-cta [class*="text-gold"] { color: var(--color-gold-ink-lg); }
/* Large custom-class accents (all >=2.6rem) clear 3:1 with the richer tone. */
    .bg-bg .mission-word.key-word, .bg-bg-warm .mission-word.key-word,
    .bg-bg .tm-quote,   .bg-bg-warm .tm-quote { color: var(--color-gold-ink-lg); }
/* ══ Keyboard accessibility (Phase 3.6) ══════════════════════════════
       Four of the six page bundles previously defined no focus styles at
       all, so keyboard users had no visible indication of position. The
       ring is gold on dark and ink on light so it stays visible on every
       section background this theme alternates between.                  */
    a:focus-visible,
    button:focus-visible,
    [tabindex]:focus-visible,
    input:focus-visible,
    select:focus-visible,
    textarea:focus-visible {
      outline: 2px solid var(--color-gold);
      outline-offset: 3px;
      border-radius: 1px;
    }
    .bg-bg a:focus-visible, .bg-bg-warm a:focus-visible, .bg-white a:focus-visible,
    .bg-bg button:focus-visible, .bg-bg-warm button:focus-visible {
      outline-color: var(--color-text);
    }

    /* Never remove the ring for keyboard users, even if a component resets it. */
    :focus-visible { outline-style: solid; }

    /* Skip link — first tab stop, visually hidden until focused. */
    .skip-link {
      position: absolute; left: 1rem; top: -3rem; z-index: 300;
      background: var(--color-gold); color: var(--color-navy);
      padding: 0.7rem 1.15rem; font-weight: 500; font-size: 0.9rem;
      border-radius: 2px; transition: top .18s ease;
    }
    .skip-link:focus { top: 1rem; }

    /* Touch targets — WCAG 2.5.5. Inline .eyebrow links rendered at 11px
       gave a 14px-tall hit area; pad them to a thumb-friendly 44px without
       changing how they look. */
    a.eyebrow, .eyebrow a {
      display: inline-flex; align-items: center;
      min-height: 44px;
    }
/* Footer + mobile-menu link hit areas (WCAG 2.5.5). These render at
       ~18px tall; padding brings them to 44px without shifting the layout
       they sit in, since they are stacked in flex columns already. */
    footer nav a, footer ul a, #mobile-menu a {
      display: inline-flex; align-items: center; min-height: 44px;
    }

/* ══ 2026-10-11 redesign: everything below the reader ══════════════════════
   Past Issues shelf → advertise band → About → Audience → Rate card →
   Closing. One left-aligned grid (.site-frame) for every section, no
   watermark stars, body text never under 16px. Colours are written out
   rather than taken from --color-gold, because that token is darkened on
   light surfaces elsewhere in this file. */

.bw-past em, .bw-about em, .bw-audience em, .bw-rates em, .bw-close em { font-style: italic; }
.bw-past em, .bw-audience em, .bw-close em { color: #d4af37; }
.bw-about em, .bw-rates em { color: #a1852a; }

.bw-label {
  margin: 0 0 1.1rem;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
}
[data-theme="dark"] .bw-label { color: #d4af37; }
[data-theme="light"] .bw-label { color: #7f6921; }

/* Bright gold button on light surfaces (navy ink, AA). */
.btn-gold.bw-btn-bright {
  --color-gold: #d4af37;
  --btn-gold-ink: #081421;
}

.bw-btn-line {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: .85rem 1.25rem;
  border: 1px solid #0c1b2e;
  border-radius: 2px;
  color: #0c1b2e;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .11em;
  line-height: 1.1;
  text-decoration: none;
  text-transform: uppercase;
  transition: background-color .25s ease, color .25s ease;
}

/* Heading left, supporting line right, sharing one baseline. */
.bw-split-head {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  align-items: end;
  justify-content: space-between;
  gap: clamp(1.5rem, 5vw, 6rem);
  margin-bottom: clamp(2.25rem, 4.5vw, 4rem);
}
.bw-split-head h2,
.bw-past__head h2,
.bw-close h2 {
  margin: 0;
  font-weight: 300;
  line-height: 1.02;
  letter-spacing: -.01em;
}
.bw-split-head h2 { max-width: 15ch; font-size: clamp(2.6rem, 5vw, 4.75rem); }
.bw-split-head__lead {
  margin: 0 0 .4rem;
  padding-top: 1.1rem;
  border-top: 1px solid #d4af37;
  font-size: 1.0625rem;
  line-height: 1.7;
}
[data-theme="light"] .bw-split-head__lead { color: #4e5c6c; }
[data-theme="dark"] .bw-split-head__lead { color: rgba(237,232,224,.82); }

/* ── Past Issues shelf ── */
.bw-past {
  background: #0c1b2e;
  color: #ede8e0;
  padding-block: clamp(3rem, 6vw, 5rem);
  border-top: 1px solid rgba(212,175,55,.3);
}
.bw-past__head { display: flex; align-items: baseline; gap: 1.5rem; margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.bw-past__head .bw-label { margin: 0; }
.bw-past__head h2 { font-size: clamp(2.25rem, 4vw, 3.5rem); }
.bw-shelf {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(1.5rem, 4vw, 4rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.bw-shelf__item {
  display: grid;
  grid-template-columns: clamp(7rem, 12vw, 11rem) minmax(0, 1fr);
  align-items: center;
  gap: clamp(1.25rem, 2.5vw, 2.25rem);
  height: 100%;
  padding-block: 1.5rem;
  border-block: 1px solid rgba(212,175,55,.45);
  margin-top: -1px;
  color: inherit;
  text-decoration: none;
}
.bw-shelf__cover {
  display: block;
  aspect-ratio: 1100 / 1424;
  overflow: hidden;
  background: #102540;
  box-shadow: 0 18px 36px -22px rgba(0,0,0,.9);
}
.bw-shelf__cover img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.bw-shelf__cover--blank {
  display: grid;
  place-items: center;
  border: 1px solid rgba(212,175,55,.4);
  color: #d4af37;
  font-family: var(--font-display, "Cormorant Garamond", Georgia, serif);
  font-size: 3rem;
}
.bw-shelf__body { display: grid; gap: .7rem; }
.bw-shelf__num { color: rgba(237,232,224,.75); font-size: .75rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; }
.bw-shelf__title { font-family: var(--font-display, "Cormorant Garamond", Georgia, serif); font-size: clamp(1.6rem, 2.5vw, 2.25rem); font-weight: 400; line-height: 1.1; }
.bw-shelf__action {
  justify-self: start;
  padding-bottom: .2rem;
  border-bottom: 1px solid #d4af37;
  color: #d4af37;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .08em;
}

/* ── Advertise band ── */
.bw-adband .btn-gold { padding: .9rem 1.9rem; }

/* ── About ── */
.bw-about { background: #fafaf8; color: #0c1b2e; padding-block: clamp(4rem, 8vw, 7.5rem); }
.bw-about__body {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  align-items: stretch;
  gap: clamp(2rem, 5vw, 5rem);
}
.bw-about__body--solo { grid-template-columns: 1fr; }
.bw-fan {
  position: relative;
  min-height: clamp(22rem, 38vw, 34rem);
  background: #f2ede6;
  border-top: 1px solid #d4af37;
  overflow: hidden;
}
.bw-fan picture {
  position: absolute;
  width: 44%;
  box-shadow: 0 22px 40px -24px rgba(8,20,33,.55);
}
.bw-fan img { display: block; width: 100%; height: auto; }
.bw-fan picture:nth-child(1) { left: 28%; top: 9%; z-index: 3; transform: rotate(-2deg); }
.bw-fan picture:nth-child(2) { left: 50%; top: 22%; z-index: 2; transform: rotate(4deg); }
.bw-fan picture:nth-child(3) { left: 6%; top: 24%; z-index: 1; transform: rotate(-7deg); }
.bw-fan--1 picture:nth-child(1) { left: 28%; top: 8%; transform: rotate(-2deg); }
.bw-fan--2 picture:nth-child(1) { left: 14%; }
.bw-fan--2 picture:nth-child(2) { left: 44%; }

.bw-points { margin: 0; border-top: 1px solid #0c1b2e; }
.bw-points > div {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: baseline;
  gap: 1rem 2rem;
  padding-block: clamp(1.25rem, 2.2vw, 1.9rem);
  border-bottom: 1px solid rgba(12,27,46,.22);
}
.bw-points dt { font-size: clamp(1.5rem, 2.1vw, 1.9rem); font-weight: 400; line-height: 1.1; }
.bw-points dd { margin: 0; color: #4e5c6c; font-size: 1rem; line-height: 1.65; }

/* ── Audience ── */
.bw-audience { background: #0c1b2e; color: #ede8e0; padding-block: clamp(4rem, 8vw, 7rem); }
.bw-panels {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid rgba(212,175,55,.55);
}
.bw-panels li {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2.5rem;
  min-height: clamp(11rem, 16vw, 15rem);
  padding: clamp(1.25rem, 2vw, 1.9rem);
}
.bw-panels li + li { border-left: 1px solid rgba(212,175,55,.55); }
.bw-panels__initial { align-self: flex-end; color: #d4af37; font-size: clamp(4rem, 6.5vw, 6.5rem); font-style: italic; font-weight: 300; line-height: .8; }
.bw-panels__name { max-width: 12ch; font-size: clamp(1.5rem, 2.1vw, 2rem); font-weight: 400; line-height: 1.1; }

/* ── Rate card ── */
.bw-rates { background: #fafaf8; color: #0c1b2e; padding-block: clamp(4rem, 8vw, 7.5rem); }
.bw-rates h3 { margin: 0; font-size: clamp(1.6rem, 2.3vw, 2.1rem); font-weight: 400; line-height: 1.1; }

.bw-units { padding: clamp(1.5rem, 3vw, 2.5rem); background: #f2ede6; border: 1px solid #0c1b2e; }
.bw-units h3 span { margin-left: .75rem; font-family: var(--font-sans, "DM Sans", system-ui, sans-serif); font-size: .9375rem; color: #4e5c6c; }
.bw-units ul { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin: clamp(1.5rem, 3vw, 2.25rem) 0 0; padding: 0; list-style: none; }
.bw-units li { display: grid; justify-items: center; align-content: start; gap: .5rem; padding-inline: .75rem; text-align: center; }
.bw-units li + li { border-left: 1px solid rgba(12,27,46,.22); }
.bw-units__page {
  position: relative;
  display: block;
  width: clamp(3.5rem, 5.4vw, 4.75rem);
  aspect-ratio: 7.5 / 10;
  margin-bottom: .9rem;
  background: #fafaf8;
  border: 1px solid #0c1b2e;
}
.bw-units__page > span { position: absolute; background: #0c1b2e; }
.bw-units__name { font-size: 1rem; font-weight: 700; line-height: 1.3; }
.bw-units__size { color: #4e5c6c; font-size: .9375rem; line-height: 1.45; }
.bw-units__size > span { display: none; }
.bw-units__price { margin-top: .35rem; font-size: 1.625rem; font-weight: 700; font-variant-numeric: lining-nums; line-height: 1; }

.bw-rate-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2.25rem, 4vw, 3.5rem) clamp(1.5rem, 4vw, 4rem); margin-top: clamp(2.5rem, 5vw, 4rem); }
.bw-rate-table { padding-top: 1.4rem; border-top: 2px solid #0c1b2e; }
.bw-rate-table__note { margin: .5rem 0 0; color: #4e5c6c; font-size: 1rem; line-height: 1.6; }
.bw-rate-table dl { margin: 1.1rem 0 0; }
.bw-rate-table dl > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: .95rem;
  border-top: 1px solid rgba(12,27,46,.22);
  font-size: 1rem;
  line-height: 1.5;
}
.bw-rate-table dl > div:last-child { border-bottom: 1px solid rgba(12,27,46,.22); }
.bw-rate-table dt span { display: block; color: #4e5c6c; font-size: .9375rem; }
.bw-rate-table dd { margin: 0; font-size: 1.125rem; font-weight: 700; font-variant-numeric: lining-nums; white-space: nowrap; }

.bw-discounts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 1.1rem 0 0; padding: 0; list-style: none; border-block: 1px solid rgba(12,27,46,.22); }
.bw-discounts li { display: grid; gap: .6rem; padding: 1.4rem .75rem; text-align: center; }
.bw-discounts li + li { border-left: 1px solid rgba(12,27,46,.22); }
.bw-discounts span { font-size: .9375rem; font-weight: 600; }
.bw-discounts strong { font-size: 1.5rem; font-weight: 700; line-height: 1; }

.bw-specs {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
  gap: 1.5rem clamp(1.5rem, 4vw, 4rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: 1.4rem;
  border-top: 2px solid #0c1b2e;
}
.bw-specs dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem 2rem; margin: 0; }
.bw-specs dt { margin-bottom: .3rem; color: #4e5c6c; font-size: .75rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
.bw-specs dd { margin: 0; font-size: 1rem; line-height: 1.5; }

.bw-rates__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: clamp(2.25rem, 4vw, 3.25rem); }

/* ── Closing ── */
.bw-close { background: #081421; color: #ede8e0; padding-block: clamp(4rem, 8vw, 7rem); }
.bw-close__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.bw-close__grid > div + div { padding-left: clamp(2rem, 5vw, 5rem); border-left: 1px solid rgba(212,175,55,.45); }
.bw-close__grid > div:first-child { padding-right: clamp(2rem, 5vw, 5rem); }
.bw-close h2 { font-size: clamp(2.5rem, 4.4vw, 4.25rem); }
.bw-close__lead { max-width: 34rem; margin: 1.4rem 0 0; color: rgba(237,232,224,.82); font-size: 1.0625rem; line-height: 1.7; }
.bw-close__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }

@media (pointer: fine) {
  .bw-shelf__item:hover .bw-shelf__cover img { transform: scale(1.04); }
  .bw-btn-line:hover { background: #0c1b2e; color: #ede8e0; }
}

@media (max-width: 1023px) {
  .bw-split-head { grid-template-columns: 1fr; align-items: start; gap: 1.5rem; }
  .bw-split-head__lead { max-width: 36rem; }
  .bw-about__body { grid-template-columns: 1fr; }
  .bw-fan { min-height: clamp(20rem, 62vw, 30rem); }
  .bw-panels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bw-panels li:nth-child(3) { border-left: 0; }
  .bw-panels li:nth-child(n+3) { border-top: 1px solid rgba(212,175,55,.55); }
  .bw-specs { grid-template-columns: 1fr; }
}

/* Below 900px the six tiles become printed rate-card rows. */
@media (max-width: 899px) {
  .bw-units ul { grid-template-columns: 1fr; }
  .bw-units li {
    grid-template-columns: 2.75rem minmax(0, 1fr) auto;
    grid-template-areas: "page name price" "page size price";
    justify-items: start;
    align-items: center;
    gap: .1rem 1rem;
    padding: .95rem 0;
    text-align: left;
    border-top: 1px solid rgba(12,27,46,.22);
  }
  .bw-units li + li { border-left: 0; }
  .bw-units__page { grid-area: page; width: 2.75rem; margin: 0; }
  .bw-units__name { grid-area: name; }
  .bw-units__size { grid-area: size; }
  .bw-units__price { grid-area: price; margin: 0; font-size: 1.375rem; }
}

@media (max-width: 767px) {
  .bw-shelf { grid-template-columns: 1fr; }
  .bw-past__head { flex-direction: column; gap: .6rem; }
  .bw-points > div { grid-template-columns: 1fr; gap: .4rem; }
  .bw-rate-grid { grid-template-columns: 1fr; }
  .bw-discounts li { padding-inline: .25rem; }
  .bw-discounts strong { font-size: 1.25rem; white-space: nowrap; }
  .bw-specs dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bw-close__grid { grid-template-columns: 1fr; }
  .bw-close__grid > div:first-child { padding: 0 0 2.5rem; }
  .bw-close__grid > div + div { padding: 2.5rem 0 0; border-left: 0; border-top: 1px solid rgba(212,175,55,.45); }
  .bw-rates__actions > a, .bw-close__actions > a { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .bw-shelf__cover img, .bw-btn-line { transition: none; }
}