/*
Theme Name: Hans Bronkhorst — Auteurssite
Theme URI: https://hansbronkhorst.com
Author: Hans Bronkhorst
Author URI: https://hansbronkhorst.com
Description: De officiële auteurssite bij de trilogie De Laatste Zwaarddanser. Donker, goud-geaccentueerd thema — filmische hero, de trilogie in drie delen met een ingebouwde leesfragment-weergave, een auteurspagina en een nieuwsbriefblok. De homepage, trilogie- en auteurspagina staan vast in het thema; winkellinks, social-links, nieuwsbrief en contact pas je zonder code aan via de Aanpassen-instellingen.
Version: 1.5.0
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hb-site
Tags: one-page, custom-menu, featured-images, full-width-template, translation-ready
*/

/* ============================================================
   FONTS — self-hosted (paths relative to this stylesheet)
   ============================================================ */
@font-face{font-family:'Cinzel';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/cinzel-400.woff2') format('woff2');}
@font-face{font-family:'Cinzel';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/cinzel-500.woff2') format('woff2');}
@font-face{font-family:'Cinzel';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/cinzel-600.woff2') format('woff2');}
@font-face{font-family:'Cinzel';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/cinzel-700.woff2') format('woff2');}
@font-face{font-family:'Cinzel';font-style:normal;font-weight:800;font-display:swap;src:url('assets/fonts/cinzel-800.woff2') format('woff2');}
@font-face{font-family:'EB Garamond';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/ebgaramond-400.woff2') format('woff2');}
@font-face{font-family:'EB Garamond';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/ebgaramond-500.woff2') format('woff2');}
@font-face{font-family:'EB Garamond';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/ebgaramond-600.woff2') format('woff2');}
@font-face{font-family:'EB Garamond';font-style:italic;font-weight:400;font-display:swap;src:url('assets/fonts/ebgaramond-400-italic.woff2') format('woff2');}
@font-face{font-family:'Mulish';font-style:normal;font-weight:300;font-display:swap;src:url('assets/fonts/mulish-300.woff2') format('woff2');}
@font-face{font-family:'Mulish';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/mulish-400.woff2') format('woff2');}
@font-face{font-family:'Mulish';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/mulish-600.woff2') format('woff2');}
@font-face{font-family:'Mulish';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/mulish-700.woff2') format('woff2');}
@font-face{font-family:'Mulish';font-style:normal;font-weight:800;font-display:swap;src:url('assets/fonts/mulish-800.woff2') format('woff2');}

/* ============================================================
   TOKENS — colors, type, spacing (from the design system)
   ============================================================ */
:root {
  --ink-950:#04070a; --ink-900:#070d11; --ink-850:#0a141a; --ink-800:#0f1a21;
  --ink-700:#16252e; --ink-600:#1f3540; --ink-500:#2c4654; --ink-400:#3e5d6c;
  --steel-700:#062839; --steel-600:#0c3a51; --steel-500:#15536e; --steel-400:#2f7290; --steel-300:#5c98b3;
  --gold-300:#f2dca0; --gold-400:#e3c172; --gold-500:#c9962f; --gold-600:#a8781f; --gold-700:#7c5816; --gold-800:#553c10;
  --ember-400:#f4954a; --ember-500:#e3701f; --ember-600:#c2531a; --ember-700:#8f3a14;
  --bronze-500:#7d6140; --bronze-600:#5b4225; --bronze-400:#9c7b53;
  --parchment-50:#faf5ea; --parchment-100:#f2e8d4; --parchment-200:#e5d4b4; --parchment-300:#cdb88f; --parchment-400:#a8946d;
  --silver-200:#d4dade; --silver-300:#aab6bd; --silver-400:#7d8d96;
  --success-500:#5a8a4c; --danger-500:#b4452e;

  --surface-page:var(--ink-950); --surface-raised:var(--ink-850); --surface-card:var(--ink-800);
  --surface-inset:var(--ink-900); --surface-overlay:color-mix(in srgb, var(--ink-950) 78%, transparent);
  --surface-parchment:var(--parchment-50);
  --text-strong:var(--parchment-50); --text-body:var(--parchment-200); --text-muted:var(--silver-400);
  --text-faint:color-mix(in srgb, var(--silver-400) 60%, transparent); --text-gold:var(--gold-400); --text-inverse:var(--ink-950);
  --brand-gold:var(--gold-500); --brand-ember:var(--ember-500); --brand-steel:var(--steel-500);
  --border-subtle:color-mix(in srgb, var(--gold-500) 16%, transparent);
  --border-strong:color-mix(in srgb, var(--gold-500) 38%, transparent);
  --border-ink:var(--ink-600); --rule-gold:var(--gold-600);
  --focus-ring:color-mix(in srgb, var(--gold-400) 70%, transparent);
  --link:var(--gold-400); --link-hover:var(--gold-300);
  --glow-gold:color-mix(in srgb, var(--gold-500) 45%, transparent);

  --font-display:'Cinzel','Trajan Pro',Georgia,serif;
  --font-serif:'EB Garamond','Iowan Old Style',Georgia,serif;
  --font-sans:'Mulish',system-ui,-apple-system,sans-serif;
  --weight-regular:400; --weight-medium:500; --weight-semibold:600; --weight-bold:700; --weight-black:800;
  --fs-hero:clamp(3rem,7vw,6.5rem); --fs-h1:clamp(2.4rem,5vw,4rem); --fs-h2:clamp(1.9rem,4vw,2.8rem);
  --fs-h3:1.625rem; --fs-h4:1.25rem; --fs-lead:1.3125rem; --fs-body:1.125rem; --fs-small:0.9375rem; --fs-xs:0.8125rem; --fs-eyebrow:0.78rem;
  --leading-tight:1.04; --leading-snug:1.18; --leading-normal:1.5; --leading-relaxed:1.72;
  --tracking-display:0.04em; --tracking-eyebrow:0.34em; --tracking-label:0.12em; --tracking-body:0;

  --space-1:0.25rem; --space-2:0.5rem; --space-3:0.75rem; --space-4:1rem; --space-5:1.5rem;
  --space-6:2rem; --space-7:3rem; --space-8:4rem; --space-9:6rem; --space-10:8rem;
  --content-max:72rem; --reading-max:40rem; --gutter:clamp(1.25rem,5vw,4rem);
  --radius-sm:2px; --radius-md:4px; --radius-lg:8px; --radius-pill:999px;
  --shadow-sm:0 1px 2px rgba(0,0,0,0.5); --shadow-md:0 6px 18px -6px rgba(0,0,0,0.7);
  --shadow-lg:0 24px 60px -16px rgba(0,0,0,0.78);
  --shadow-book:0 30px 70px -20px rgba(0,0,0,0.85),0 8px 24px -10px rgba(0,0,0,0.6);
  --glow-gold-soft:0 0 28px -2px color-mix(in srgb, var(--gold-500) 40%, transparent);
  --inset-rule:inset 0 0 0 1px var(--border-subtle);
  --ease-standard:cubic-bezier(0.2,0.7,0.2,1); --ease-out:cubic-bezier(0.16,1,0.3,1);
  --dur-fast:160ms; --dur-base:280ms; --dur-slow:520ms;
}

/* ============================================================
   BASE
   ============================================================ */
*,*::before,*::after { box-sizing:border-box; }
html,body { margin:0; }
body {
  background:var(--surface-page); color:var(--text-body);
  font-family:var(--font-serif); -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
a { color:inherit; }
img { display:block; max-width:100%; height:auto; }
::selection { background:color-mix(in srgb, var(--gold-500) 30%, transparent); color:var(--parchment-50); }
:focus-visible { outline:2px solid var(--focus-ring); outline-offset:2px; }
.screen-reader-text { position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link { position:absolute; left:-9999px; }
.skip-link:focus { left:var(--gutter); top:var(--space-3); z-index:200; background:var(--gold-500); color:var(--ink-950); padding:0.6rem 1rem; border-radius:var(--radius-sm); font-family:var(--font-sans); font-weight:700; }

.hb-app { background:var(--surface-page); color:var(--text-body); font-family:var(--font-serif); min-height:100vh; display:flex; flex-direction:column; }
.hb-app > main { flex:1; }

/* ---------- component primitives (mirror components/*) ---------- */
.hbds-btn { display:inline-flex; align-items:center; justify-content:center; gap:0.6em; font-family:var(--font-sans); font-weight:700; letter-spacing:var(--tracking-label); text-transform:uppercase; line-height:1; border:1px solid transparent; border-radius:var(--radius-md); cursor:pointer; text-decoration:none; transition:background var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard), transform var(--dur-fast) var(--ease-standard); }
.hbds-btn--sm { padding:0.5rem 1rem; font-size:var(--fs-xs); }
.hbds-btn--md { padding:0.75rem 1.6rem; font-size:var(--fs-small); }
.hbds-btn--lg { padding:1rem 2.4rem; font-size:var(--fs-body); }
.hbds-btn:focus-visible { outline:2px solid var(--focus-ring); outline-offset:3px; }
.hbds-btn__i { display:inline-flex; width:1.1em; height:1.1em; }
.hbds-btn__i svg { width:100%; height:100%; }
.hbds-btn--primary { background:var(--gold-500); color:var(--text-inverse); border-color:var(--gold-400); }
.hbds-btn--primary:not([aria-disabled="true"]):hover { background:var(--gold-400); box-shadow:var(--glow-gold-soft); }
.hbds-btn--primary:not([aria-disabled="true"]):active { transform:scale(0.98); background:var(--gold-600); }
.hbds-btn--secondary { background:transparent; color:var(--gold-300); border-color:var(--border-strong); }
.hbds-btn--secondary:not([aria-disabled="true"]):hover { border-color:var(--gold-400); box-shadow:var(--glow-gold-soft); background:color-mix(in srgb, var(--gold-500) 8%, transparent); }
.hbds-btn--secondary:not([aria-disabled="true"]):active { transform:scale(0.98); }
.hbds-btn--ghost { background:transparent; color:var(--text-body); border-color:transparent; padding-left:0.4rem; padding-right:0.4rem; }
.hbds-btn--ghost:not([aria-disabled="true"]):hover { color:var(--gold-300); }

.hbds-input { width:100%; box-sizing:border-box; font-family:var(--font-serif); font-size:var(--fs-body); color:var(--text-strong); background:var(--surface-inset); border:1px solid var(--border-ink); border-bottom:1px solid var(--border-strong); border-radius:var(--radius-md); padding:0.7rem 0.9rem; transition:border-color var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard); }
.hbds-input::placeholder { color:var(--text-faint); }
.hbds-input:hover { border-color:var(--ink-500); }
.hbds-input:focus { outline:none; border-color:var(--gold-500); box-shadow:0 1px 0 0 var(--gold-500), var(--glow-gold-soft); }

/* ---------- tag / label / star rule ---------- */
.hbds-tag { display:inline-flex; align-items:center; gap:0.4em; font-family:var(--font-sans); font-size:var(--fs-eyebrow); font-weight:600; letter-spacing:var(--tracking-label); text-transform:uppercase; line-height:1; padding:0.4em 0.85em; border-radius:var(--radius-pill); white-space:nowrap; }
.hbds-tag--gold { background:color-mix(in srgb, var(--gold-500) 16%, transparent); border:1px solid var(--border-strong); color:var(--gold-300); }
.hbds-tag--outline { background:transparent; border:1px solid var(--border-ink); color:var(--text-body); }
.hbds-tag--ember { background:color-mix(in srgb, var(--ember-500) 18%, transparent); border:1px solid color-mix(in srgb, var(--ember-500) 45%, transparent); color:var(--ember-400); }
.hbds-tag--steel { background:color-mix(in srgb, var(--steel-400) 18%, transparent); border:1px solid color-mix(in srgb, var(--steel-400) 45%, transparent); color:var(--steel-300); }

.hbds-label { display:inline-flex; align-items:center; gap:0.7em; white-space:nowrap; font-family:var(--font-sans); font-size:var(--fs-eyebrow); font-weight:600; letter-spacing:var(--tracking-eyebrow); text-transform:uppercase; color:var(--silver-300); }
.hbds-label--gold { color:var(--gold-400); }
.hbds-label--center { justify-content:center; }
.hbds-label__star { width:0.9em; height:0.9em; color:var(--gold-500); display:inline-flex; filter:drop-shadow(var(--glow-gold-soft)); }
.hbds-label__star svg { width:100%; height:100%; }

.hbds-star { display:inline-flex; color:var(--gold-500); filter:drop-shadow(var(--glow-gold-soft)); }
.hbds-star svg { width:100%; height:100%; }

.hbds-rule { display:flex; align-items:center; gap:var(--space-4); width:100%; margin:0 auto; }
.hbds-rule__line { flex:1; height:1px; background:linear-gradient(90deg, transparent, var(--gold-700)); }
.hbds-rule__line--r { background:linear-gradient(270deg, transparent, var(--gold-700)); }
.hbds-rule__star { width:22px; height:22px; color:var(--gold-500); display:inline-flex; flex:none; filter:drop-shadow(var(--glow-gold-soft)); }
.hbds-rule__star svg { width:100%; height:100%; }

/* ---------- book card ---------- */
.hbds-book { text-decoration:none; display:flex; flex-direction:column; gap:var(--space-4); cursor:pointer; }
.hbds-book__frame { position:relative; aspect-ratio:5 / 8; border-radius:var(--radius-sm); overflow:hidden; box-shadow:var(--shadow-book); transition:transform var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out); }
.hbds-book:hover .hbds-book__frame { transform:translateY(-6px); box-shadow:var(--shadow-book), var(--glow-gold-soft); }
.hbds-book__img { display:block; width:100%; height:100%; object-fit:cover; object-position:center; }
.hbds-book__status { display:flex; justify-content:center; }
.hbds-book__meta { display:flex; flex-direction:column; gap:0.35rem; }
.hbds-book__vol { font-family:var(--font-sans); font-size:var(--fs-eyebrow); font-weight:600; letter-spacing:var(--tracking-eyebrow); text-transform:uppercase; color:var(--silver-300); }
.hbds-book__title { font-family:var(--font-display); font-weight:700; text-transform:uppercase; letter-spacing:var(--tracking-display); color:var(--gold-400); font-size:var(--fs-h3); line-height:1.05; }
.hbds-book:hover .hbds-book__title { color:var(--gold-300); }
.hbds-book__blurb { font-family:var(--font-serif); font-size:var(--fs-small); color:var(--text-body); line-height:var(--leading-normal); }

/* ---------- shared headings ---------- */
.hb-h1 { font-family:var(--font-display); font-weight:700; text-transform:uppercase; letter-spacing:var(--tracking-display); color:var(--gold-400); font-size:var(--fs-h1); line-height:var(--leading-tight); margin:0; text-align:center; }
.hb-h2 { font-family:var(--font-display); font-weight:700; text-transform:uppercase; letter-spacing:var(--tracking-display); color:var(--text-strong); font-size:var(--fs-h2); line-height:1.08; margin:0; }
.hb-h3 { font-family:var(--font-display); font-weight:600; text-transform:uppercase; letter-spacing:var(--tracking-display); color:var(--gold-400); font-size:var(--fs-h3); margin:0; }
.hb-lead { font-family:var(--font-serif); font-size:var(--fs-lead); line-height:var(--leading-snug); color:var(--text-strong); margin:0 0 var(--space-4); }
.hb-prose { font-family:var(--font-serif); font-size:var(--fs-body); line-height:var(--leading-relaxed); color:var(--text-body); margin:0 0 var(--space-4); }
.hb-prose em, .hb-lead em { color:var(--gold-300); font-style:italic; }
.hb-section__intro { font-family:var(--font-serif); font-size:var(--fs-lead); line-height:var(--leading-normal); color:var(--text-muted); max-width:38rem; margin:var(--space-4) auto 0; text-align:center; }

/* ---------- header ---------- */
.hb-header { position:sticky; top:0; z-index:50; background:color-mix(in srgb, var(--ink-950) 82%, transparent); backdrop-filter:blur(14px); border-bottom:1px solid var(--border-subtle); }
.hb-header__inner { max-width:var(--content-max); margin:0 auto; padding:var(--space-4) var(--gutter); display:flex; align-items:center; justify-content:space-between; gap:var(--space-5); }
.hb-logo { display:flex; flex-direction:column; align-items:center; gap:4px; text-decoration:none; }
.hb-logo__star { width:22px; height:22px; color:var(--gold-500); display:inline-flex; filter:drop-shadow(var(--glow-gold-soft)); }
.hb-logo__star svg { width:100%; height:100%; }
.hb-logo__word { font-family:var(--font-display); font-weight:700; text-transform:uppercase; letter-spacing:0.05em; color:var(--gold-400); font-size:1.05rem; line-height:1; white-space:nowrap; }
.hb-nav { display:flex; align-items:center; gap:var(--space-6); }
.hb-nav ul { list-style:none; margin:0; padding:0; display:flex; align-items:center; gap:var(--space-6); }
.hb-nav li { margin:0; position:relative; }
.hb-nav__link, .hb-nav a { font-family:var(--font-sans); font-size:var(--fs-small); font-weight:500; letter-spacing:var(--tracking-label); color:var(--text-body); text-decoration:none; padding-bottom:2px; border-bottom:1px solid transparent; transition:color var(--dur-base), border-color var(--dur-base); white-space:nowrap; }
.hb-nav__link:hover, .hb-nav a:hover { color:var(--gold-300); }
.hb-nav__link.is-active, .hb-nav .current-menu-item > a, .hb-nav .current_page_item > a, .hb-nav .current-menu-parent > a { color:var(--gold-400); border-color:var(--gold-600); }
.hb-header__cta { display:flex; align-items:center; gap:var(--space-4); }

/* mobile nav toggle */
.hb-navtoggle { display:none; width:42px; height:42px; align-items:center; justify-content:center; background:transparent; border:1px solid var(--border-ink); border-radius:var(--radius-md); color:var(--gold-300); cursor:pointer; }
.hb-navtoggle svg { width:22px; height:22px; }

/* ---------- hero ---------- */
.hb-hero { position:relative; min-height:90vh; display:flex; align-items:center; justify-content:center; overflow:hidden; padding:var(--space-10) var(--gutter); }
.hb-hero__bg { position:absolute; inset:0; background-size:cover; background-position:center 30%; transform:scale(1.04); }
.hb-hero__scrim { position:absolute; inset:0; background:
    radial-gradient(120% 80% at 50% 38%, transparent 0%, color-mix(in srgb, var(--ink-950) 55%, transparent) 60%, var(--ink-950) 100%),
    linear-gradient(to bottom, color-mix(in srgb, var(--ink-950) 60%, transparent), transparent 30%, transparent 60%, var(--ink-950)); }
.hb-hero__content { position:relative; z-index:2; max-width:52rem; display:flex; flex-direction:column; align-items:center; gap:var(--space-5); text-align:center; }
.hb-hero__title { font-family:var(--font-display); font-weight:700; text-transform:uppercase; letter-spacing:var(--tracking-display); color:var(--gold-400); font-size:clamp(1.85rem, 3.8vw, 2.8rem); line-height:1.0; margin:0; white-space:nowrap; text-shadow:0 2px 18px rgba(0,0,0,0.55), 0 0 44px color-mix(in srgb, var(--gold-500) 18%, transparent); }
.hb-hero__lead { font-family:var(--font-serif); font-size:var(--fs-lead); line-height:var(--leading-normal); color:var(--text-body); max-width:36rem; margin:0; }
.hb-hero__lead--strong { font-size:clamp(1.3rem, 2.1vw, 1.65rem); color:var(--parchment-50); font-weight:500; line-height:var(--leading-snug); }
.hb-hero__synopsis { font-family:var(--font-serif); font-size:var(--fs-body); line-height:var(--leading-relaxed); color:var(--text-body); max-width:38rem; margin:0; text-wrap:pretty; }
.hb-hero__cta { display:flex; gap:var(--space-4); flex-wrap:wrap; justify-content:center; margin-top:var(--space-3); }

/* ---------- generic section ---------- */
.hb-section { max-width:var(--content-max); margin:0 auto; padding:var(--space-10) var(--gutter); }
.hb-section__head { display:flex; flex-direction:column; align-items:center; gap:var(--space-3); margin-bottom:var(--space-8); text-align:center; }

/* ---------- books grid ---------- */
.hb-books { display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--space-7); align-items:start; }

/* ---------- reviews ---------- */
.hb-reviews__grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--space-6); align-items:stretch; }
.hb-review { margin:0; display:flex; flex-direction:column; gap:var(--space-4); padding:var(--space-6); background:var(--surface-card); border:1px solid var(--border-subtle); border-radius:var(--radius-md); box-shadow:var(--shadow-md); }
.hb-review .hbds-star { width:22px; height:22px; }
.hb-review__q { font-family:var(--font-serif); font-style:italic; font-size:var(--fs-lead); line-height:var(--leading-snug); color:var(--parchment-100); margin:0; text-wrap:pretty; }

/* ---------- author teaser ---------- */
.hb-author { display:grid; grid-template-columns:240px 1fr; gap:var(--space-8); align-items:center; }
.hb-author__portrait { display:flex; justify-content:center; }
.hb-author .hb-portrait-slot { aspect-ratio:4 / 5; height:auto; width:100%; max-width:240px; }
.hb-author .hb-portrait-slot img { object-position:center top; }
.hb-author__body { display:flex; flex-direction:column; gap:var(--space-4); align-items:flex-start; }
.hb-portrait-slot { aspect-ratio:4 / 5; border:1px solid var(--border-strong); border-radius:var(--radius-md); overflow:hidden; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--space-3); color:var(--gold-600);
    background:radial-gradient(120% 90% at 50% 30%, color-mix(in srgb, var(--steel-700) 50%, var(--surface-card)), var(--surface-inset)); box-shadow:var(--inset-rule); }
.hb-portrait-slot img { width:100%; height:100%; object-fit:cover; border-radius:inherit; display:block; }
.hb-portrait-slot--tall { aspect-ratio:3 / 4; }

/* ---------- newsletter ---------- */
.hb-newsletter { padding:var(--space-9) var(--gutter); }
.hb-newsletter__inner { max-width:40rem; margin:0 auto; display:flex; flex-direction:column; align-items:center; gap:var(--space-3); text-align:center; }
.hb-newsletter__form { display:flex; gap:var(--space-3); width:100%; max-width:30rem; margin-top:var(--space-4); align-items:stretch; }
.hb-newsletter__form .hbds-btn { white-space:nowrap; }
.hb-newsletter__field { display:flex; flex-direction:column; gap:0.5rem; width:100%; }
.hb-newsletter__thanks { display:inline-flex; align-items:center; gap:0.5em; font-family:var(--font-sans); color:var(--gold-300); margin-top:var(--space-4); letter-spacing:var(--tracking-label); }
.hb-newsletter__thanks .hbds-star { width:20px; height:20px; }
.hb-laposta-embed { width:100%; max-width:30rem; margin-top:var(--space-4); }

/* ---------- page (Trilogy/About) ---------- */
.hb-page { max-width:var(--content-max); margin:0 auto; padding:var(--space-9) var(--gutter) var(--space-10); }
.hb-page__head { display:flex; flex-direction:column; align-items:center; gap:var(--space-3); margin-bottom:var(--space-9); text-align:center; }

/* ---------- book detail ---------- */
.hb-detail { display:grid; grid-template-columns:0.8fr 1.2fr; gap:var(--space-8); align-items:center; }
.hb-detail.is-reversed { grid-template-columns:1.2fr 0.8fr; }
.hb-detail.is-reversed .hb-detail__cover { order:2; }
.hb-detail__cover img { width:100%; height:auto; border-radius:var(--radius-sm); box-shadow:var(--shadow-book); }
.hb-detail__body { display:flex; flex-direction:column; gap:var(--space-3); align-items:flex-start; }
.hb-detail__tags { display:flex; align-items:center; gap:var(--space-4); }
.hb-detail__title { font-family:var(--font-display); font-weight:800; text-transform:uppercase; letter-spacing:var(--tracking-display); color:var(--gold-400); font-size:clamp(2.4rem, 5vw, 3.6rem); line-height:1; margin:0; }
.hb-detail__meta { display:grid; grid-template-columns:repeat(2, auto); gap:var(--space-2) var(--space-7); margin:var(--space-3) 0 var(--space-4); }
.hb-detail__meta dt { font-family:var(--font-sans); font-size:var(--fs-eyebrow); letter-spacing:var(--tracking-eyebrow); text-transform:uppercase; color:var(--silver-400); margin-bottom:2px; }
.hb-detail__meta dd { font-family:var(--font-serif); font-size:var(--fs-body); color:var(--text-strong); margin:0; }
.hb-detail__cta { display:flex; gap:var(--space-4); flex-wrap:wrap; }

/* ---------- about ---------- */
.hb-about { display:grid; grid-template-columns:0.7fr 1.3fr; gap:var(--space-8); align-items:start; max-width:64rem; margin:0 auto; }
.hb-about__aside { display:flex; flex-direction:column; gap:var(--space-5); position:sticky; top:6rem; }
.hb-about__facts { display:flex; flex-direction:column; gap:var(--space-3); }
.hb-about__facts > div { display:flex; flex-direction:column; gap:2px; padding-bottom:var(--space-3); border-bottom:1px solid var(--border-ink); }
.hb-about__k { font-family:var(--font-sans); font-size:var(--fs-eyebrow); letter-spacing:var(--tracking-eyebrow); text-transform:uppercase; color:var(--silver-400); }
.hb-about__v { font-family:var(--font-serif); font-size:var(--fs-body); color:var(--text-strong); }
.hb-about__prose { display:flex; flex-direction:column; align-items:flex-start; }
.hb-about__prose > :first-child, .hb-about__prose .hb-content > :first-child { margin-top:0; }
.hb-content p { margin:0 0 var(--space-4); }
.hb-about__cta { display:flex; gap:var(--space-4); flex-wrap:wrap; margin-top:var(--space-2); }

/* ---------- generic page content (page.php / WP editor) ---------- */
.hb-content { max-width:var(--reading-max); margin:0 auto; }
.hb-content h1, .hb-content h2 { font-family:var(--font-display); text-transform:uppercase; letter-spacing:var(--tracking-display); color:var(--gold-400); line-height:1.1; }
.hb-content h3, .hb-content h4 { font-family:var(--font-display); color:var(--text-strong); }
.hb-content p, .hb-content li { font-family:var(--font-serif); font-size:var(--fs-body); line-height:var(--leading-relaxed); color:var(--text-body); }
.hb-content a { color:var(--gold-300); text-decoration:underline; text-underline-offset:3px; }
.hb-content blockquote { border-left:2px solid var(--gold-500); margin:var(--space-5) 0; padding:var(--space-2) var(--space-5); font-style:italic; color:var(--parchment-100); }
.hb-content img { border-radius:var(--radius-sm); }

/* ---------- reader (Lees fragment) ---------- */
.hb-reader { position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; padding:var(--space-5);
    background:color-mix(in srgb, var(--ink-950) 86%, transparent); backdrop-filter:blur(6px); }
.hb-reader[hidden] { display:none; }
.hb-reader__panel { position:relative; width:min(46rem, 100%); max-height:min(86vh, 52rem); display:flex; flex-direction:column;
    background:linear-gradient(180deg, color-mix(in srgb, var(--steel-700) 22%, var(--surface-card)), var(--surface-card));
    border:1px solid var(--border-strong); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); }
@media (prefers-reduced-motion: no-preference) { .hb-reader:not([hidden]) .hb-reader__panel { animation:hb-reader-rise 0.3s cubic-bezier(0.2,0.7,0.2,1) both; } }
@keyframes hb-reader-rise { from { transform:translateY(16px); } to { transform:none; } }
.hb-reader__close { position:absolute; top:var(--space-3); right:var(--space-3); z-index:2; width:2.5rem; height:2.5rem; display:inline-flex; align-items:center; justify-content:center;
    background:color-mix(in srgb, var(--ink-950) 50%, transparent); color:var(--silver-300); border:1px solid var(--border-subtle); border-radius:var(--radius-pill); cursor:pointer; transition:color 0.15s, border-color 0.15s; }
.hb-reader__close svg { width:1.2em; height:1.2em; }
.hb-reader__close:hover { color:var(--gold-300); border-color:var(--gold-500); }
.hb-reader__scroll { overflow-y:auto; padding:var(--space-8) clamp(var(--space-5), 5vw, var(--space-9)); }
.hb-reader__head { text-align:center; margin-bottom:var(--space-6); }
.hb-reader__vol { display:block; font-family:var(--font-sans); font-size:var(--fs-eyebrow); letter-spacing:var(--tracking-eyebrow); text-transform:uppercase; color:var(--silver-400); margin-top:var(--space-3); }
.hb-reader__title { font-family:var(--font-display); font-weight:700; text-transform:uppercase; letter-spacing:var(--tracking-display); color:var(--gold-300); font-size:var(--fs-h2); margin:var(--space-1) 0 0; }
.hb-reader__body { max-width:34rem; margin:0 auto; }
.hb-reader__body p { font-family:var(--font-serif); font-size:var(--fs-lead); line-height:var(--leading-relaxed); color:var(--parchment-100); margin:0 0 var(--space-4); text-wrap:pretty; }
.hb-reader__lead::first-letter { float:left; font-family:var(--font-display); font-weight:700; font-size:3.4em; line-height:0.82; padding:0.06em 0.12em 0 0; color:var(--gold-400); }
.hb-reader__chapter { text-align:center; margin:var(--space-7) 0 var(--space-5); display:flex; flex-direction:column; gap:var(--space-2); }
.hb-reader__chapter:first-child { margin-top:0; }
.hb-reader__chapternum { font-family:var(--font-sans); font-size:var(--fs-eyebrow); letter-spacing:var(--tracking-eyebrow); text-transform:uppercase; color:var(--silver-400); }
.hb-reader__chaptertitle { font-family:var(--font-display); font-weight:700; text-transform:uppercase; letter-spacing:var(--tracking-display); color:var(--parchment-100); font-size:var(--fs-h3); }
.hb-reader__epigraph { margin:0 auto var(--space-6); padding:var(--space-5) var(--space-6); max-width:32rem; border-left:2px solid var(--gold-500);
    background:color-mix(in srgb, var(--steel-700) 18%, transparent); border-radius:var(--radius-sm); }
.hb-reader__epigraph p { font-size:var(--fs-body); font-style:italic; color:var(--silver-200); margin:0 0 var(--space-3); line-height:var(--leading-relaxed); }
.hb-reader__epigraph cite { display:block; font-family:var(--font-sans); font-style:normal; font-size:var(--fs-eyebrow); letter-spacing:var(--tracking-label); text-transform:uppercase; color:var(--silver-400); }
.hb-reader__break { display:flex; align-items:center; justify-content:center; margin:var(--space-5) 0; color:var(--gold-500); }
.hb-reader__break .hbds-star { width:14px; height:14px; opacity:0.7; }
.hb-reader__end { text-align:center; margin:var(--space-6) auto 0; font-family:var(--font-sans); font-size:var(--fs-eyebrow); letter-spacing:var(--tracking-label); text-transform:uppercase; color:var(--silver-400); display:flex; align-items:center; justify-content:center; gap:0.5em; }
.hb-reader__end .hbds-star { width:16px; height:16px; color:var(--gold-500); }
.hb-reader__end em { font-style:normal; color:var(--silver-300); }

/* ---------- footer ---------- */
.hb-footer { border-top:1px solid var(--border-subtle); padding:var(--space-8) var(--gutter) var(--space-6); max-width:var(--content-max); margin:0 auto; width:100%; }
.hb-footer__cols { display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:var(--space-7); align-items:start; }
.hb-footer__brand { display:flex; flex-direction:column; align-items:flex-start; gap:var(--space-4); }
.hb-footer__brand .hb-logo { align-items:flex-start; }
.hb-footer__tagline { font-family:var(--font-serif); font-size:var(--fs-small); color:var(--text-muted); max-width:22rem; margin:0; line-height:var(--leading-normal); }
.hb-footer__tagline em { color:var(--gold-400); }
.hb-footer__col { display:flex; flex-direction:column; gap:var(--space-3); }
.hb-footer__h { font-family:var(--font-sans); font-size:var(--fs-eyebrow); letter-spacing:var(--tracking-eyebrow); text-transform:uppercase; color:var(--gold-500); margin-bottom:var(--space-1); }
.hb-footer__link { font-family:var(--font-sans); font-size:var(--fs-small); color:var(--text-body); text-decoration:none; transition:color var(--dur-base); }
.hb-footer__link:hover { color:var(--gold-300); }
.hb-footer__social { display:flex; gap:var(--space-3); }
.hb-social { display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border:1px solid var(--border-ink); border-radius:var(--radius-md); color:var(--text-body); font-size:1.1rem; transition:color var(--dur-base), border-color var(--dur-base), box-shadow var(--dur-base); }
.hb-social svg { width:1.1em; height:1.1em; }
.hb-social:hover { color:var(--gold-300); border-color:var(--gold-600); box-shadow:var(--glow-gold-soft); }
.hb-footer__base { display:flex; justify-content:space-between; margin-top:var(--space-7); padding-top:var(--space-5); border-top:1px solid var(--border-ink); font-family:var(--font-sans); font-size:var(--fs-xs); letter-spacing:var(--tracking-label); color:var(--text-faint); text-transform:uppercase; }
.hb-footer__base a { text-decoration:none; }

/* ---------- 404 ---------- */
.hb-404 { max-width:40rem; margin:0 auto; padding:var(--space-10) var(--gutter); text-align:center; display:flex; flex-direction:column; align-items:center; gap:var(--space-5); }

/* ---------- responsive ---------- */
@media (max-width: 860px) {
  .hb-nav { position:fixed; inset:0 0 auto 0; top:0; flex-direction:column; align-items:stretch; gap:0; padding:5rem var(--gutter) var(--space-6); background:color-mix(in srgb, var(--ink-950) 97%, transparent); backdrop-filter:blur(18px); border-bottom:1px solid var(--border-strong); transform:translateY(-100%); transition:transform var(--dur-base) var(--ease-standard); z-index:40; }
  .hb-nav.is-open { transform:translateY(0); }
  .hb-nav ul { flex-direction:column; align-items:stretch; gap:0; width:100%; }
  .hb-nav li { border-bottom:1px solid var(--border-ink); }
  .hb-nav__link, .hb-nav a { display:block; padding:var(--space-4) 0; font-size:var(--fs-body); }
  .hb-navtoggle { display:inline-flex; position:relative; z-index:60; }
  .hb-books { grid-template-columns:1fr; max-width:24rem; margin:0 auto; }
  .hb-reviews__grid { grid-template-columns:1fr; max-width:28rem; margin:0 auto; }
  .hb-author, .hb-detail, .hb-detail.is-reversed, .hb-about { grid-template-columns:1fr; }
  .hb-author .hb-portrait-slot { aspect-ratio:4 / 5; height:auto; max-width:18rem; }
  .hb-detail.is-reversed .hb-detail__cover { order:0; }
  .hb-detail__cover { max-width:18rem; }
  .hb-about__aside { position:static; }
  .hb-footer__cols { grid-template-columns:1fr 1fr; }
}
@media (max-width: 520px) {
  .hb-newsletter__form { flex-direction:column; }
  .hb-footer__cols { grid-template-columns:1fr; }
}