.journal-feature {
        max-width: 1100px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        margin-top: var(--space-16) !important;
        margin-bottom: var(--space-16) !important;
        padding: var(--space-16) var(--space-6) !important;
      }
      .journal-feature .jf-card {
        display: grid;
        grid-template-columns: 220px minmax(0, 520px);
        justify-content: center;
        gap: var(--space-10);
        align-items: center;
        padding: var(--space-8);
        text-decoration: none;
        color: inherit;
        border-radius: 18px;
        background:
          radial-gradient(ellipse at top, rgba(184, 146, 79, 0.12), transparent 60%),
          linear-gradient(180deg, rgba(20, 16, 30, 0.55), rgba(5, 3, 10, 0.7));
        border: 1px solid rgba(184, 146, 79, 0.22);
        box-shadow: 0 30px 60px -30px rgba(0,0,0,0.6);
        transition: transform .4s ease, border-color .4s ease;
      }
      .journal-feature .jf-card:hover {
        transform: translateY(-4px);
        border-color: rgba(184, 146, 79, 0.45);
      }
      .journal-feature .jf-cover {
        aspect-ratio: 4 / 5;
        border-radius: 12px;
        overflow: hidden;
        border: 1px solid rgba(184, 146, 79, 0.25);
      }
      .journal-feature .jf-cover img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
      }
      .journal-feature .jf-date {
        font-family: var(--font-mark);
        font-size: var(--text-xs);
        letter-spacing: 0.22em;
        text-transform: uppercase;
        color: var(--gold-2);
        margin-bottom: var(--space-4);
      }
      .journal-feature .jf-title {
        font-family: var(--font-display);
        font-weight: 400;
        font-size: var(--text-2xl);
        line-height: 1.15;
        margin: 0 0 var(--space-4);
        color: #f0e3c8;
      }
      .journal-feature .jf-excerpt {
        font-family: var(--font-display);
        font-style: italic;
        font-size: var(--text-md);
        line-height: 1.55;
        color: #c8b894;
        margin: 0 0 var(--space-6);
      }
      .journal-feature .jf-cta {
        font-family: var(--font-ui);
        font-size: var(--text-xs);
        letter-spacing: 0.22em;
        text-transform: uppercase;
        color: var(--gold-2);
      }
      .journal-feature .jf-cta span { font-size: var(--text-md); vertical-align: -2px; }
      @media (max-width: 760px) {
        .journal-feature .jf-card { grid-template-columns: 1fr; }
      }.audiobooks-grid .book-cover.bc {
        position: relative !important;
        aspect-ratio: 2 / 3 !important;
        border-radius: 6px !important;
        padding: 0 !important;
        display: block !important;
        overflow: hidden !important;
        border: none !important;
        box-shadow:
          0 1px 0 rgba(255,255,255,0.06) inset,
          0 40px 80px -30px rgba(0,0,0,0.7) !important;
      }
      .audiobooks-grid .book-cover.bc::before,
      .audiobooks-grid .book-cover.bc::after { content: none !important; }
      .audiobooks-grid .book-cover.bc--navy     { background: radial-gradient(ellipse at center, #1d3a8f 0%, #0d2058 70%, #061236 100%) !important; }
      .audiobooks-grid .book-cover.bc--crimson  { background: radial-gradient(ellipse at center, #6b1620 0%, #410912 70%, #240609 100%) !important; }
      .audiobooks-grid .book-cover.bc--forest   { background: radial-gradient(ellipse at center, #1a4a30 0%, #0d2e1c 70%, #07180e 100%) !important; }
      .audiobooks-grid .book-cover.bc--midnight { background: radial-gradient(ellipse at center, #1a1845 0%, #0c0a28 70%, #050414 100%) !important; }

      .bc-frame {
        position: absolute;
        inset: 14px;
        border: 1px solid rgba(232, 200, 140, 0.45);
        border-radius: 2px;
        padding: 28px 22px 22px;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        color: #f0e3c8;
      }
      .bc-corner {
        position: absolute;
        width: 28px;
        height: 28px;
        color: rgba(232, 200, 140, 0.85);
      }
      .bc-corner--tl { top: -1px; left: -1px; }
      .bc-corner--tr { top: -1px; right: -1px; transform: scaleX(-1); }
      .bc-corner--bl { bottom: -1px; left: -1px; transform: scaleY(-1); }
      .bc-corner--br { bottom: -1px; right: -1px; transform: scale(-1, -1); }

      .bc-badge {
        font-family: var(--font-ui);
        font-size: 9px;
        letter-spacing: 0.28em;
        text-transform: uppercase;
        color: #e8c88c;
        padding: 6px 14px;
        border: 1px solid rgba(232, 200, 140, 0.4);
        border-radius: 2px;
        margin-bottom: var(--space-5);
      }
      .bc-title {
        font-family: var(--font-display);
        font-weight: 400;
        font-size: clamp(20px, 2.4vw, 30px);
        line-height: 1.1;
        margin: 0;
        color: #f5e8cc;
        letter-spacing: -0.005em;
      }
      .bc-divider {
        font-family: var(--font-mark);
        letter-spacing: 0.35em;
        color: #e8c88c;
        font-size: 12px;
        opacity: 0.75;
        margin: var(--space-6) 0;
      }
      .bc-foot {
        margin-top: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
      }
      .bc-by {
        font-family: var(--font-ui);
        font-size: 10px;
        letter-spacing: 0.3em;
        text-transform: uppercase;
        color: #d4bd8c;
        opacity: 0.75;
      }
      .bc-author {
        font-family: var(--font-display);
        font-style: italic;
        font-size: var(--text-md);
        color: #f0e3c8;
        margin-bottom: 8px;
      }
      .bc-imprint {
        font-family: var(--font-display);
        font-style: italic;
        font-size: 11px;
        color: #c8b894;
      }
      .bc-year {
        font-family: var(--font-mark);
        font-size: 10px;
        letter-spacing: 0.4em;
        color: #d4bd8c;
        margin-top: 4px;
      }.inside-grid--mystic {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: var(--space-6);
        background: transparent;
        border: none;
      }
      @media (max-width: 1024px) { .inside-grid--mystic { grid-template-columns: repeat(2, 1fr); } }
      @media (max-width: 560px)  { .inside-grid--mystic { grid-template-columns: 1fr; } }

      .inside-card--mystic {
        text-decoration: none;
        color: inherit;
        position: relative;
        padding: var(--space-10) var(--space-7) var(--space-7);
        border-radius: 16px;
        background:
          radial-gradient(ellipse at top, rgba(184, 146, 79, 0.12), transparent 60%),
          linear-gradient(180deg, rgba(20, 16, 30, 0.55), rgba(5, 3, 10, 0.7));
        border: 1px solid rgba(184, 146, 79, 0.22);
        box-shadow:
          0 1px 0 rgba(255,255,255,0.04) inset,
          0 30px 60px -30px rgba(0,0,0,0.6);
        text-align: center;
        overflow: hidden;
        transition: transform .4s ease, border-color .4s ease;
      }
      .inside-card--mystic:hover {
        transform: translateY(-6px) rotate(-0.3deg);
        border-color: rgba(184, 146, 79, 0.45);
        background:
          radial-gradient(ellipse at top, rgba(184, 146, 79, 0.18), transparent 60%),
          linear-gradient(180deg, rgba(20, 16, 30, 0.55), rgba(5, 3, 10, 0.7));
      }
      .inside-card--mystic::before {
        content: "";
        position: absolute;
        inset: 10px;
        border: 1px solid rgba(184, 146, 79, 0.16);
        border-radius: 10px;
        pointer-events: none;
      }
      .ic-corner {
        position: absolute;
        color: var(--gold-2);
        opacity: 0.55;
        font-size: 10px;
        line-height: 1;
        z-index: 2;
      }
      .ic-corner--tl { top: 16px; left: 20px; }
      .ic-corner--tr { top: 16px; right: 20px; }
      .ic-corner--bl { bottom: 16px; left: 20px; }
      .ic-corner--br { bottom: 16px; right: 20px; }
      .ic-roman {
        position: relative;
        z-index: 1;
        font-family: var(--font-mark);
        letter-spacing: 0.25em;
        font-size: var(--text-xs);
        color: var(--gold-2);
        opacity: 0.7;
        margin-bottom: var(--space-5);
      }
      .inside-card--mystic .ic-ring {
        position: relative;
        z-index: 1;
        width: 78px;
        height: 78px;
        margin: 0 auto var(--space-5);
        border-radius: 50%;
        border: 1px solid rgba(184, 146, 79, 0.5);
        color: var(--gold-2);
        background: transparent;
      }
      .inside-card--mystic .ic-ring::before {
        content: "";
        position: absolute;
        inset: -6px;
        border: 1px dashed rgba(184, 146, 79, 0.35);
        border-radius: 50%;
      }
      .inside-card--mystic h4 {
        position: relative;
        z-index: 1;
        color: #f0e3c8;
        font-family: var(--font-display);
        font-weight: 400;
        font-size: var(--text-2xl);
        margin: 0 0 var(--space-4);
      }
      .inside-card--mystic p {
        position: relative;
        z-index: 1;
        color: #c8b894;
        font-family: var(--font-display);
        font-size: var(--text-sm);
        line-height: 1.65;
        margin: 0 0 var(--space-5);
      }
      .ic-divider {
        font-family: var(--font-mark);
        letter-spacing: 0.4em;
        color: var(--gold-2);
        font-size: var(--text-xs);
        opacity: 0.6;
        margin-bottom: var(--space-3);
        position: relative;
        z-index: 1;
      }
      .inside-card--mystic .count {
        position: relative;
        z-index: 1;
        font-family: var(--font-mark);
        font-style: normal;
        color: var(--gold-2);
        font-size: var(--text-xs);
        letter-spacing: 0.22em;
        text-transform: uppercase;
        padding-top: 0;
        border-top: none;
        opacity: 0.85;
      }/* page-level adjustments: the mockup used a fake "browser frame" inside
         a centered stage. In production we render the same shell edge-to-edge
         and let the body match the page background. */
      body { background: var(--bg); }
      .browser { border-radius: 0; box-shadow: none; }