*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    :root {
      --charcoal: #181818;
      --charcoal-light: #222222;
      --magenta: #d930f5;
      --magenta-text: #e356ff;
      --white: #ffffff;
      --gray: #9a9a9a;
    }
    html, body {
      background: var(--charcoal);
      color: var(--white);
      font-family: 'DM Sans', sans-serif;
    }

    /* ── Lightweight header (shared across FAQ / genre / blog pages) ── */
    .content-header {
      display: flex; align-items: center; justify-content: space-between;
      padding: 24px; max-width: 960px; margin: 0 auto;
    }
    .content-header .nav-logo img { height: 48px; width: auto; display: block; }
    .content-header nav { display: flex; align-items: center; gap: 28px; }
    .content-header nav a {
      color: var(--white); text-decoration: none;
      font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase;
      border-bottom: 1px solid transparent;
    }
    .content-header nav a:hover { color: var(--magenta-text); }
    .content-header .nav-book {
      background: var(--white); color: var(--charcoal);
      padding: 10px 22px; font-weight: 600;
      transition: background 0.25s, color 0.25s;
    }
    .content-header .nav-book:hover { background: var(--magenta); color: var(--white); }

    .breadcrumb {
      max-width: 720px; margin: 0 auto; padding: 0 24px;
      font-size: 0.75rem; letter-spacing: 0.04em; color: var(--gray);
    }
    .breadcrumb a { color: var(--gray); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.15); }
    .breadcrumb a:hover { color: var(--magenta-text); }

    body { padding-bottom: 80px; }
    main {
      max-width: 720px;
      margin: 0 auto;
      padding: 32px 24px 0;
    }
    h1 {
      font-family: 'Anton', sans-serif;
      font-size: clamp(2rem, 6vw, 3.2rem);
      text-transform: uppercase;
      letter-spacing: 0.04em;
      margin-bottom: 8px;
      line-height: 1.05;
    }
    .updated, .dek {
      color: var(--gray);
      font-size: 0.95rem;
      line-height: 1.6;
      margin-bottom: 40px;
      max-width: 56ch;
    }
    h2 {
      font-family: 'DM Sans', sans-serif;
      font-size: 1.1rem;
      letter-spacing: 0.02em;
      color: var(--magenta-text);
      margin-top: 40px;
      margin-bottom: 12px;
    }
    p, li {
      color: rgba(255,255,255,0.75);
      font-size: 0.95rem;
      line-height: 1.7;
      font-weight: 300;
    }
    ul, ol { padding-left: 22px; margin-top: 8px; margin-bottom: 16px; }
    li { margin-bottom: 8px; }
    a { color: var(--white); border-bottom: 1px solid rgba(255,255,255,0.25); text-decoration: none; }
    a:hover { color: var(--magenta-text); border-color: var(--magenta-text); }

    /* ── FAQ accordion ── */
    .faq-item {
      border-bottom: 1px solid rgba(255,255,255,0.12);
      padding: 20px 0;
    }
    .faq-item summary {
      font-family: 'DM Sans', sans-serif;
      font-weight: 600;
      font-size: 1rem;
      cursor: pointer;
      list-style: none;
      display: flex; align-items: center; justify-content: space-between;
      gap: 16px;
    }
    .faq-item summary::-webkit-details-marker { display: none; }
    .faq-item summary::after {
      content: '+';
      font-size: 1.4rem; color: var(--magenta-text); flex-shrink: 0;
      transition: transform 0.2s;
    }
    .faq-item[open] summary::after { transform: rotate(45deg); }
    .faq-item p { margin-top: 14px; }

    /* ── Genre / blog card grid (cross-links) ── */
    .link-grid {
      display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 16px; margin: 24px 0 40px;
    }
    .link-card {
      display: block; border: 1px solid rgba(255,255,255,0.12);
      border-bottom: 1px solid rgba(255,255,255,0.12);
      padding: 18px 20px; transition: border-color 0.2s, background 0.2s;
    }
    .link-card:hover { border-color: var(--magenta); background: var(--charcoal-light); }
    .link-card .link-title { font-weight: 600; font-size: 0.95rem; display: block; margin-bottom: 4px; color: var(--white); }
    .link-card .link-sub { color: var(--gray); font-size: 0.8rem; }

    .cta-block {
      margin-top: 56px; padding: 32px 28px;
      background: var(--charcoal-light);
      text-align: center;
    }
    .cta-block h2 { margin-top: 0; }
    .cta-block p { max-width: 44ch; margin: 0 auto 20px; }

    .btn {
      display: inline-block;
      padding: 14px 32px;
      background: var(--white);
      color: var(--charcoal);
      font-weight: 600;
      font-size: 0.75rem;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      border: none;
      text-decoration: none;
      transition: background 0.25s, color 0.25s, transform 0.2s;
    }
    .btn:hover { background: var(--magenta); color: var(--white); transform: translateY(-2px); }

    .back {
      display: inline-block;
      margin-top: 40px;
      color: var(--gray);
      font-size: 0.8rem;
      border-bottom: 1px solid rgba(255,255,255,0.2);
    }
    .back:hover { color: var(--magenta-text); border-color: var(--magenta-text); }

    footer.content-footer {
      max-width: 720px; margin: 56px auto 0; padding: 24px;
      text-align: center; color: var(--gray); font-size: 0.75rem;
    }
    footer.content-footer a { color: var(--gray); }

    @media (max-width: 600px) {
      .content-header { flex-direction: column; gap: 16px; }
      .content-header nav { gap: 16px; flex-wrap: wrap; justify-content: center; }
    }