:root {
      --color-bg: #090807;
      --color-bg-elevated: #0F0E0C;
      --color-bg-card: #100E0B;
      --color-text: #FDFCFA;
      --color-text-muted: #C2B9AB;
      --color-text-faint: #8A8174;
      --color-accent: #B8976A;
      --color-accent-warm: #D4A95A;
      --color-accent-bright: #E8C383;
      --color-accent-dim: rgba(184, 151, 106, 0.10);
      --color-border: #1C1A16;
      --color-border-bright: #2A2620;
      --color-link: #CC3333;
      --color-link-hover: #E04444;
      --font-heading: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
      --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      --font-prose: 'Cormorant Garamond', Georgia, serif;
      --transition-base: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
    html { font-size: 16px; scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }

    body {
      font-family: var(--font-body);
      background-color: var(--color-bg);
      color: var(--color-text);
      line-height: 1.6;
      overflow-x: hidden;
    }
    a:visited { color: inherit; }

    ::selection { background-color: var(--color-accent); color: var(--color-bg); }

    .container { width: 100%; max-width: 760px; margin: 0 auto; padding: 0 2rem; }
    .container-wide { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 2rem; }

    /* Header */
    .site-header {
      padding: 2rem 0;
      border-bottom: 1px solid var(--color-border);
      position: sticky; top: 0; z-index: 100;
      background-color: rgba(9,8,7,0.92);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
    }
    .header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
    .logo-mark { display: flex; align-items: center; gap: 0.875rem; text-decoration: none; color: var(--color-text); }
    .logo-sigil { width: 28px; height: 28px; opacity: 0.85; }
    .logo-text {
      font-family: var(--font-heading); font-size: 1rem; font-weight: 500;
      letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text);
    }
    .header-nav { display: flex; gap: 2rem; align-items: center; }
    .header-nav a {
      font-size: 0.8125rem; font-weight: 400; letter-spacing: 0.08em;
      text-transform: uppercase; color: var(--color-text-muted);
      text-decoration: none; transition: color var(--transition-base);
    }
    .header-nav a:hover, .header-nav a.active { color: var(--color-accent); }

    /* Footer */
    .site-footer { padding: 2.5rem 0; border-top: 1px solid var(--color-border); margin-top: 4rem; }
    .footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
    .footer-company {
      font-family: var(--font-heading); font-size: 0.8125rem; font-weight: 500;
      letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text);
    }
    .footer-right { display: flex; align-items: center; gap: 2rem; }

    .footer-social { display: flex; align-items: center; gap: 1rem; }
    .footer-social a { color: var(--color-text-faint); transition: color var(--transition-base); }
    .footer-social a:hover { color: var(--color-accent); }
    .footer-social a:visited { color: var(--color-text-faint); }
    .footer-email a { font-size: 0.8125rem; color: var(--color-text-muted); text-decoration: none; transition: color var(--transition-base); }
    .footer-email a:hover { color: var(--color-accent); }
    .footer-legal { font-size: 0.75rem; color: var(--color-text-faint); }

    @media (max-width: 768px) {
      .footer-inner { flex-direction: column; gap: 1rem; text-align: center; }
      .footer-right { flex-direction: column; gap: 0.5rem; }
      .header-nav { gap: 1rem; }
      .header-nav a { font-size: 0.75rem; }
    }
    @media (max-width: 480px) {
      .container, .container-wide { padding: 0 1.25rem; }
      .header-nav { display: none; }
    }

    /* Accessibility: focus-visible */
    :focus-visible {
      outline: 2px solid var(--color-accent);
      outline-offset: 3px;
    }
    .skip-link {
      position: absolute; top: -100%; left: 1rem;
      background: var(--color-accent); color: var(--color-bg);
      padding: 0.5rem 1rem; border-radius: 0 0 4px 4px;
      font-size: 0.875rem; font-weight: 600; z-index: 999;
      text-decoration: none;
    }
    .skip-link:focus { top: 0; }

    /* Article hero */
    .article-hero {
      padding: 6rem 0 3.5rem;
      text-align: center;
      position: relative;
    }
    .article-hero::before {
      content: '';
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      width: 600px; height: 600px;
      background: radial-gradient(circle, var(--color-accent-dim) 0%, transparent 65%);
      pointer-events: none;
      opacity: 0.5;
      z-index: -1;
    }
    .article-eyebrow {
      font-family: var(--font-body);
      font-size: 0.6875rem; font-weight: 500;
      letter-spacing: 0.35em; text-transform: uppercase;
      color: var(--color-accent);
      margin-bottom: 1.75rem;
    }
    .article-title {
      font-family: var(--font-heading);
      font-size: clamp(2.25rem, 5vw, 3.5rem);
      font-weight: 500; line-height: 1.15; letter-spacing: -0.01em;
      color: var(--color-text);
      max-width: 780px; margin: 0 auto 1.5rem;
      font-style: normal;
    }
    .article-title em { font-style: normal; }
    .article-meta {
      font-size: 0.8125rem;
      color: var(--color-text-muted);
      letter-spacing: 0.08em;
      margin-bottom: 2.5rem;
      text-transform: uppercase;
      font-weight: 500;
    }
    .article-meta .dot { display: inline-block; width: 4px; height: 4px; background: var(--color-accent); transform: rotate(45deg); margin: 0 0.75rem; vertical-align: middle; opacity: 0.7; }
    .article-divider {
      display: flex; align-items: center; justify-content: center;
      gap: 1rem; margin: 0 auto 2rem;
    }
    .article-divider-line { width: 48px; height: 1px; background: linear-gradient(90deg, transparent, var(--color-accent)); }
    .article-divider-line:last-child { background: linear-gradient(90deg, var(--color-accent), transparent); }
    .article-divider-dot { width: 4px; height: 4px; background-color: var(--color-accent); transform: rotate(45deg); }
    .article-description {
      font-size: 1.1875rem; font-weight: 400; line-height: 1.65;
      color: #E8E0D2;
      max-width: 640px; margin: 0 auto;
      font-family: var(--font-body);
      font-style: normal;
    }

    /* Article body — long-form prose typography
       Switched body from Cormorant (calligraphic thin strokes) to Inter for
       on-screen readability on dark backgrounds. Cormorant retained for
       drop-cap, headings, and pull-quotes for visual identity. */
    .article-body {
      padding: 1rem 0 4rem;
      font-family: var(--font-body);
      font-size: 1.1875rem;
      line-height: 1.78;
      color: #FDFCFA;
      font-weight: 400;
      letter-spacing: 0.005em;
    }
    .article-body > p:first-of-type::first-letter {
      font-family: var(--font-heading);
      font-size: 5.75rem;
      float: left;
      line-height: 0.92;
      padding: 0.4rem 0.75rem 0 0;
      color: var(--color-accent-bright);
      font-weight: 600;
    }
    .article-body p { margin-bottom: 1.6em; color: #F5F0E8; }
    .article-body h2 {
      font-family: var(--font-heading);
      font-size: 2rem; font-weight: 500;
      color: var(--color-text);
      margin: 3rem 0 1rem;
      letter-spacing: -0.005em;
      position: relative;
      padding-bottom: 0.6rem;
    }
    .article-body h2::after {
      content: '';
      position: absolute;
      bottom: 0; left: 0;
      width: 64px; height: 1px;
      background: linear-gradient(90deg, var(--color-accent), transparent);
    }
    .article-body h3 {
      font-family: var(--font-heading);
      font-size: 1.5rem; font-weight: 500;
      color: var(--color-accent);
      margin: 2.25rem 0 0.875rem;
      font-style: normal;
    }
    .article-body em { color: var(--color-accent); font-style: italic; font-weight: 500; }
    .article-body strong { color: #FFFAF0; font-weight: 600; }
    .article-body a, .article-body a:visited {
      color: var(--color-link);
      text-decoration: none;
      border-bottom: 1px solid rgba(204,51,51,0.3);
      transition: color var(--transition-base), border-color var(--transition-base);
    }
    .article-body a:hover {
      color: var(--color-link-hover);
      border-bottom-color: var(--color-link-hover);
    }
    .article-body blockquote {
      border-left: 3px solid var(--color-accent);
      padding: 1rem 1.5rem 1rem 1.75rem;
      margin: 2.25rem 0;
      font-family: var(--font-body);
      font-style: normal;
      color: #FDFCFA;
      font-size: 1.25rem;
      line-height: 1.65;
      background: rgba(184, 151, 106, 0.08);
      border-radius: 0 3px 3px 0;
    }
    .article-body blockquote p { color: #EAE3D6; margin-bottom: 0.75em; }
    .article-body blockquote em { color: var(--color-accent-bright); }
    .article-body ul, .article-body ol {
      margin: 1.25em 0 1.5em 1.5em;
      padding: 0;
    }
    .article-body li { margin-bottom: 0.5em; }
    .article-body li::marker { color: var(--color-accent); }
    .article-body code {
      font-family: 'SF Mono', Monaco, monospace;
      background: var(--color-bg-card);
      padding: 0.15em 0.4em;
      border-radius: 2px;
      font-size: 0.9em;
      color: var(--color-text-muted);
    }
    .article-body hr {
      border: 0;
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--color-border-bright), transparent);
      margin: 3rem 0;
    }

    /* Article footer — back/next */
    .article-footer {
      padding: 2.5rem 0;
      border-top: 1px solid var(--color-border);
      display: flex; justify-content: space-between; gap: 2rem; align-items: center;
      flex-wrap: wrap;
    }
    .article-footer a {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      font-family: var(--font-body);
      font-size: 0.875rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--color-text-muted);
      text-decoration: none;
      transition: color var(--transition-base);
    }
    .article-footer a:hover { color: var(--color-accent); }
    .article-footer a span.label {
      display: block;
      font-size: 0.6875rem;
      letter-spacing: 0.2em;
      color: var(--color-text-faint);
      margin-bottom: 0.25rem;
    }
    .article-footer a strong {
      font-family: var(--font-heading);
      font-size: 1.125rem;
      font-weight: 500;
      letter-spacing: 0;
      text-transform: none;
      color: var(--color-text);
      font-style: normal;
    }

    @media (max-width: 768px) {
      .article-hero { padding: 4rem 0 2.5rem; }
      .article-body { font-size: 1.15rem; line-height: 1.7; }
      .article-body h2 { font-size: 1.75rem; }
      .article-body > p:first-of-type::first-letter { font-size: 4rem; padding: 0.3rem 0.5rem 0 0; }
    }

    /* Book feature card */
    .book-feature {
      max-width: 760px;
      margin: 0 auto 0;
      padding: 0 2rem;
    }
    .book-feature-card {
      display: flex;
      align-items: center;
      gap: 2rem;
      background: linear-gradient(135deg, rgba(55,47,35,0.98), rgba(40,34,25,0.98));
      border: 1px solid rgba(184,151,106,0.45);
      border-radius: 6px;
      padding: 1.5rem 2rem;
      position: relative;
      overflow: hidden;
      transition: border-color 0.3s ease;
    }
    .book-feature-card:hover {
      border-color: rgba(184,151,106,0.7);
    }
    .book-feature-card a, .book-feature-card a:visited { color: inherit; text-decoration: none; }
    .book-feature-card::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
      opacity: 0.6;
    }
    .book-feature-cover {
      flex-shrink: 0;
      width: 110px;
      border-radius: 3px;
      box-shadow: 0 4px 20px rgba(0,0,0,0.5), 0 0 30px rgba(184,151,106,0.08);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    .book-feature-card:hover .book-feature-cover {
      transform: scale(1.03);
      box-shadow: 0 6px 28px rgba(0,0,0,0.6), 0 0 40px rgba(184,151,106,0.12);
    }
    .book-feature-info {
      flex: 1;
      min-width: 0;
    }
    .book-feature-vol {
      font-family: var(--font-body);
      font-size: 0.6875rem;
      font-weight: 500;
      letter-spacing: 0.3em;
      text-transform: uppercase;
      color: var(--color-accent);
      margin-bottom: 0.5rem;
    }
    .book-feature-title {
      font-family: var(--font-heading);
      font-size: 1.25rem;
      font-weight: 500;
      color: var(--color-text);
      line-height: 1.3;
      margin-bottom: 0.25rem;
      font-style: normal;
    }
    .book-feature-subtitle {
      font-family: var(--font-heading);
      font-size: 0.9375rem;
      color: var(--color-text-muted);
      font-style: normal;
      margin-bottom: 1rem;
    }
    .book-feature-cta {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      font-family: var(--font-body);
      font-size: 0.75rem;
      font-weight: 500;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: var(--color-accent);
      text-decoration: none;
      border: 1px solid rgba(184,151,106,0.25);
      padding: 0.5rem 1.25rem;
      border-radius: 3px;
      transition: all 0.3s ease;
    }
    .book-feature-cta:hover {
      background: rgba(184,151,106,0.1);
      border-color: var(--color-accent);
      color: var(--color-accent-bright);
    }
    .book-feature-cta svg {
      width: 14px;
      height: 14px;
      transition: transform 0.3s ease;
    }
    .book-feature-cta:hover svg {
      transform: translateX(3px);
    }

    /* Decorative ornament between hero and content */
    .ornament-band {
      text-align: center;
      padding: 1.5rem 0 2.5rem;
      position: relative;
    }
    .ornament-band svg {
      opacity: 0.55;
    }

    @media (max-width: 768px) {
      .book-feature-card {
        flex-direction: column;
        text-align: center;
        padding: 1.5rem;
        gap: 1.25rem;
      }
      .book-feature-cover { width: 90px; }
      .book-feature-cta { width: 100%; justify-content: center; }

      .book-cta-card { flex-direction: column; text-align: center; padding: 1.5rem; gap: 1.25rem; }
      .book-cta-link { width: 100%; justify-content: center; }
      .book-cta-cover { width: 100px; }
    }


    /* Book feature CTA */
    .book-cta-section {
      margin: 2.5em 0;
      padding: 0;
    }
    .book-cta-cover-link { flex-shrink: 0; }
    .book-cta-cover {
      width: 130px;
      height: auto;
      border-radius: 4px;
      box-shadow: 0 4px 16px rgba(0,0,0,0.5);
      transition: transform 0.3s ease;
    }
    .book-cta-cover:hover { transform: scale(1.05); }
    .book-cta-card {
      display: flex;
      align-items: center;
      gap: 2rem;
      background: linear-gradient(135deg, rgba(55,47,35,0.98), rgba(40,34,25,0.98));
      border: 1px solid rgba(184,151,106,0.45);
      border-radius: 6px;
      padding: 2rem;
    }
    .book-cta-card:hover { border-color: rgba(184,151,106,0.7); }
    .book-cta-card a:visited { color: inherit; text-decoration: none; }
    .book-cta-card::before {
      display: none;
    }
    .book-cta-info { flex: 1; min-width: 0; }
    .book-cta-vol {
      font-size: 0.7em;
      text-transform: uppercase;
      letter-spacing: 0.15em;
      color: #c9a96e;
      margin-bottom: 0.5em;
    }
    .book-cta-title {
      font-family: 'Cormorant Garamond', Georgia, serif;
      font-size: 1.35em;
      font-weight: 500;
      color: #f0e6d3;
      margin-bottom: 0.25em;
    }
    .book-cta-subtitle {
      font-size: 0.85em;
      color: #b8a88a;
      font-style: italic;
      margin-bottom: 1em;
    }
    .book-cta-link {
      display: inline-flex;
      align-items: center;
      gap: 0.5em;
      font-size: 0.85em;
      font-weight: 500;
      color: #c9a96e;
      text-decoration: none;
      border-bottom: 1px solid rgba(184,151,106,0.3);
      padding-bottom: 2px;
      transition: all 0.3s ease;
    }
    .book-cta-link:hover {
      color: #e0c080;
      border-bottom-color: #e0c080;
    }
    .book-cta-link svg { width: 14px; height: 14px; transition: transform 0.3s ease; }
    .book-cta-link:hover svg { transform: translateX(3px); }