/*
Theme Name: Hans Bronkhorst — Schrijversblog
Theme URI: https://hansbronkhorst.com
Author: Hans Bronkhorst
Author URI: https://hansbronkhorst.com
Description: Het schrijversblog bij de trilogie De Laatste Zwaarddanser. Donker, goud-geaccentueerd magazinethema — masthead met sterrenkaart, uitgelicht bericht, berichtenlijst met zijbalk (categorieën + nieuwsbrief), en een rustige leesweergave voor losse berichten. Beheer berichten en categorieën gewoon via WordPress; de vormgeving blijft behouden.
Version: 1.1.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-blog
Tags: blog, two-columns, right-sidebar, custom-menu, featured-images, sticky-post, 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-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;
}
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; }

.bg-site { min-height:100vh; overflow-x:clip; display:flex; flex-direction:column; }
.bg-site > main { flex:1; }
.wrap { max-width:var(--content-max); margin:0 auto; padding-left:var(--gutter); padding-right:var(--gutter); }

/* ---------- header bar ---------- */
.bg-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); }
.bg-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); flex-wrap:wrap; }
.bg-logo { display:inline-flex; align-items:center; gap:var(--space-3); text-decoration:none; }
.bg-logo__star { width:22px; height:22px; color:var(--gold-500); filter:drop-shadow(var(--glow-gold-soft)); display:inline-flex; }
.bg-logo__star svg { width:100%; height:100%; }
.bg-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; }
.bg-nav { display:flex; align-items:center; gap:var(--space-6); flex-wrap:wrap; }
.bg-nav ul { list-style:none; margin:0; padding:0; display:flex; align-items:center; gap:var(--space-6); flex-wrap:wrap; }
.bg-nav li { margin:0; }
.bg-nav__link, .bg-nav a:not(.bg-back) { 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; }
.bg-nav__link:hover, .bg-nav a:not(.bg-back):hover { color:var(--gold-300); }
.bg-nav__link.is-active, .bg-nav .current-menu-item > a, .bg-nav .current_page_item > a, .bg-nav .current-menu-parent > a { color:var(--gold-400); border-color:var(--gold-600); }
.bg-back { display:inline-flex; align-items:center; gap:0.5em; font-family:var(--font-sans); font-size:var(--fs-small); font-weight:600; letter-spacing:var(--tracking-label); color:var(--gold-300); text-decoration:none; }
.bg-back svg { width:1.05em; height:1.05em; }
.bg-back:hover { color:var(--gold-200,var(--gold-300)); }

/* ---------- star rule ---------- */
.bg-rule { display:flex; align-items:center; gap:var(--space-4); width:100%; }
.bg-rule__line { flex:1; height:1px; background:linear-gradient(90deg, transparent, var(--gold-700)); }
.bg-rule__line--r { background:linear-gradient(270deg, transparent, var(--gold-700)); }
.bg-rule__star { width:18px; height:18px; color:var(--gold-500); display:inline-flex; flex:none; }
.bg-rule__star svg { width:100%; height:100%; }

/* ---------- shared meta + read-more ---------- */
.bg-meta { display:flex; align-items:center; gap:var(--space-3); font-family:var(--font-sans); font-size:var(--fs-eyebrow); letter-spacing:var(--tracking-eyebrow); text-transform:uppercase; flex-wrap:wrap; }
.bg-meta a { text-decoration:none; }
.bg-meta__cat, .bg-meta__cat a { color:var(--gold-400); }
.bg-meta__cat a:hover { color:var(--gold-300); }
.bg-meta__dot { width:3px; height:3px; border-radius:50%; background:var(--silver-400); flex:none; }
.bg-meta__date,.bg-meta__read { color:var(--silver-400); }
.bg-readmore { display:inline-flex; align-items:center; gap:0.5em; font-family:var(--font-sans); font-size:var(--fs-small); font-weight:600; letter-spacing:var(--tracking-label); text-transform:uppercase; color:var(--gold-300); text-decoration:none; margin-top:var(--space-1); }
.bg-readmore svg { width:1.05em; height:1.05em; transition:transform var(--dur-base); }
.bg-readmore:hover svg { transform:translateX(3px); }

/* placeholder image slot (no featured image) */
.bg-slotfill { position:relative; background-color:var(--surface-card); background-image:repeating-linear-gradient(135deg, color-mix(in srgb, var(--steel-700) 38%, transparent) 0 10px, transparent 10px 20px); border:1px solid var(--border-subtle); display:flex; align-items:center; justify-content:center; }
.bg-slot { font-family:ui-monospace,'SFMono-Regular',monospace; font-size:var(--fs-xs); letter-spacing:0.04em; color:var(--silver-400); text-transform:uppercase; }

/* ---------- footer ---------- */
.bg-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%; }
.bg-footer__cols { display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:var(--space-7); align-items:start; }
.bg-footer__brand { display:flex; flex-direction:column; align-items:flex-start; gap:var(--space-4); }
.bg-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); }
.bg-footer__tagline em { color:var(--gold-400); font-style:italic; }
.bg-footer__home { display:inline-flex; align-items:center; gap:0.55em; font-family:var(--font-sans); font-size:var(--fs-small); font-weight:600; letter-spacing:var(--tracking-label); color:var(--gold-300); text-decoration:none; padding:0.5rem 0.95rem; border:1px solid var(--border-strong); border-radius:var(--radius-pill); transition:border-color var(--dur-base), box-shadow var(--dur-base), color var(--dur-base); }
.bg-footer__home svg { width:1.05em; height:1.05em; }
.bg-footer__home:hover { border-color:var(--gold-500); box-shadow:var(--glow-gold-soft); color:var(--gold-200,var(--gold-300)); }
.bg-footer__col { display:flex; flex-direction:column; gap:var(--space-3); }
.bg-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); }
.bg-footer__link { font-family:var(--font-sans); font-size:var(--fs-small); color:var(--text-body); text-decoration:none; transition:color var(--dur-base); }
.bg-footer__link:hover { color:var(--gold-300); }
.bg-footer__social { display:flex; gap:var(--space-3); flex-wrap:wrap; }
.bg-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); transition:color var(--dur-base), border-color var(--dur-base), box-shadow var(--dur-base); }
.bg-social svg { width:1.15rem; height:1.15rem; }
.bg-social:hover { color:var(--gold-300); border-color:var(--gold-600); box-shadow:var(--glow-gold-soft); }
.bg-footer__base { display:flex; justify-content:space-between; align-items:center; gap:var(--space-4); 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; flex-wrap:wrap; }
.bg-footer__base a { color:var(--text-faint); text-decoration:none; transition:color var(--dur-base); }
.bg-footer__base a:hover { color:var(--gold-300); }

/* ============================================================
   MASTHEAD (homepage)
   ============================================================ */
.mg-mast { padding:var(--space-9) var(--gutter) var(--space-7); display:flex; flex-direction:column; align-items:flex-start; gap:var(--space-6); }
.mg-mast__top { display:flex; align-items:center; justify-content:space-between; gap:clamp(1.5rem,4vw,3rem); width:100%; flex-wrap:wrap; }
.mg-mast__head { display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:var(--space-4); flex:1 1 20rem; min-width:0; }
.mg-mast__art { flex:0 0 auto; display:flex; align-items:center; justify-content:flex-end; }
.mg-mast__art img { height:auto; width:auto; max-height:10.5rem; max-width:min(30vw,260px); display:block; mix-blend-mode:screen; }
.mg-mast__eyebrow { display:inline-flex; align-items:center; gap:var(--space-3); font-family:var(--font-sans); font-size:var(--fs-small); font-weight:600; letter-spacing:0.18em; text-transform:uppercase; color:var(--silver-300); }
.mg-mast__eyebrow svg { width:20px; height:20px; color:var(--gold-500); }
.mg-mast__title { font-family:var(--font-display); font-weight:700; text-transform:uppercase; letter-spacing:var(--tracking-display); color:var(--gold-400); font-size:clamp(2rem,3.8vw,3.4rem); line-height:1.05; margin:0; }
.mg-mast__tagline { font-family:var(--font-serif); font-size:1.5rem; line-height:var(--leading-snug); color:var(--text-body); margin:0; max-width:42rem; text-wrap:pretty; }
.mg-mast__tagline em { color:var(--gold-300); font-style:italic; }
.mg-mast .bg-rule { max-width:30rem; margin-top:var(--space-3); }
.mg-mast .bg-rule__star { width:30px; height:30px; }
.mg-mast .bg-rule__line { height:2px; }
.mg-purpose { width:100%; margin-top:var(--space-2); padding:var(--space-6) var(--space-7); border:1px solid var(--border-subtle); border-radius:var(--radius-md); background:var(--surface-raised); display:flex; flex-direction:column; align-items:flex-start; gap:var(--space-3); }
.mg-purpose__title { font-family:var(--font-display); font-weight:600; text-transform:uppercase; letter-spacing:var(--tracking-display); color:var(--gold-400); font-size:var(--fs-h4); line-height:1.1; margin:0; }
.mg-purpose__body { font-family:var(--font-serif); font-size:var(--fs-body); line-height:var(--leading-relaxed); color:var(--text-strong); margin:0; max-width:46rem; text-wrap:pretty; }
.mg-purpose__body em { color:var(--gold-300); font-style:italic; }

.mg-body { padding-bottom:var(--space-10); }

/* wide featured */
.mg-featured { display:grid; grid-template-columns:260px 1fr; gap:var(--space-7); align-items:center; padding:var(--space-7); border:1px solid var(--border-subtle); border-radius:var(--radius-md); background:var(--surface-raised); margin-bottom:var(--space-8); }
.mg-featured__cover { width:100%; height:auto; border-radius:var(--radius-sm); box-shadow:var(--shadow-book); }
.mg-featured__cover.bg-slotfill { aspect-ratio:3/4; }
.mg-featured__body { display:flex; flex-direction:column; align-items:flex-start; gap:var(--space-3); }
.mg-flag { font-family:var(--font-sans); font-size:var(--fs-xs); font-weight:700; letter-spacing:var(--tracking-eyebrow); text-transform:uppercase; color:var(--ink-950); background:var(--gold-500); padding:0.3em 0.7em; border-radius:var(--radius-sm); }
.mg-featured__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-h2); line-height:1.08; margin:0; }
.mg-featured__title a { text-decoration:none; transition:color var(--dur-base); }
.mg-featured__title a:hover { color:var(--gold-300); }
.mg-featured__excerpt { font-family:var(--font-serif); font-size:var(--fs-body); line-height:var(--leading-relaxed); color:var(--text-body); margin:0; max-width:40rem; text-wrap:pretty; }

/* main + sidebar */
.mg-split { display:grid; grid-template-columns:1fr 19rem; gap:var(--space-8); align-items:start; }
.mg-list { display:flex; flex-direction:column; }
.mg-post { display:grid; grid-template-columns:220px 1fr; gap:var(--space-6); align-items:center; padding:var(--space-6) 0; border-bottom:1px solid var(--border-ink); }
.mg-post:first-child { padding-top:0; }
.mg-post__thumb { aspect-ratio:16/11; border-radius:var(--radius-sm); overflow:hidden; transition:box-shadow var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.mg-post__thumb a { display:block; width:100%; height:100%; }
.mg-post__thumb img { width:100%; height:100%; object-fit:cover; }
.mg-post:hover .mg-post__thumb { transform:translateY(-3px); box-shadow:var(--glow-gold-soft); }
.mg-post__body { display:flex; flex-direction:column; align-items:flex-start; gap:var(--space-2); }
.mg-post__title { font-family:var(--font-display); font-weight:600; text-transform:uppercase; letter-spacing:var(--tracking-display); color:var(--gold-400); font-size:var(--fs-h4); line-height:1.14; margin:0; }
.mg-post__title a { text-decoration:none; transition:color var(--dur-base); }
.mg-post__title a:hover { color:var(--gold-300); }
.mg-post__excerpt { font-family:var(--font-serif); font-size:var(--fs-small); line-height:var(--leading-normal); color:var(--text-muted); margin:0; max-width:32rem; }

/* sidebar */
.mg-side { display:flex; flex-direction:column; gap:var(--space-7); position:sticky; top:92px; }
.mg-widget { display:flex; flex-direction:column; gap:var(--space-4); }
.mg-widget__h { font-family:var(--font-sans); font-size:var(--fs-eyebrow); font-weight:600; letter-spacing:var(--tracking-eyebrow); text-transform:uppercase; color:var(--gold-500); display:flex; align-items:center; gap:var(--space-3); }
.mg-widget__h::after { content:""; flex:1; height:1px; background:var(--border-subtle); }
.mg-cats { display:flex; flex-direction:column; gap:0; list-style:none; margin:0; padding:0; }
.mg-cats li { margin:0; }
.mg-cat, .mg-cats li > a { display:flex; align-items:baseline; justify-content:space-between; gap:var(--space-3); padding:var(--space-2) 0; border-bottom:1px solid var(--border-ink); font-family:var(--font-serif); font-size:var(--fs-body); color:var(--text-body); text-decoration:none; transition:color var(--dur-base); }
.mg-cat:hover, .mg-cats li > a:hover { color:var(--gold-300); }
.mg-cat__n, .mg-cats li .count { font-family:var(--font-sans); font-size:var(--fs-xs); letter-spacing:var(--tracking-label); color:var(--silver-400); }
.mg-news { padding:var(--space-6); border:1px solid var(--border-strong); border-radius:var(--radius-md); background:var(--surface-card); display:flex; flex-direction:column; gap:var(--space-4); }
.mg-news__t { font-family:var(--font-display); font-weight:700; text-transform:uppercase; letter-spacing:var(--tracking-display); color:var(--gold-400); font-size:var(--fs-h4); margin:0; }
.mg-news__p { font-family:var(--font-serif); font-size:var(--fs-small); line-height:var(--leading-normal); color:var(--text-muted); margin:0; }
.mg-news__p em { color:var(--gold-400); font-style:italic; }
.mg-news__form { display:flex; flex-direction:column; gap:var(--space-3); }
.mg-input { font-family:var(--font-sans); font-size:var(--fs-small); color:var(--text-strong); background:var(--surface-inset); border:1px solid var(--border-ink); border-radius:var(--radius-sm); padding:0.7rem 0.85rem; transition:border-color var(--dur-base), box-shadow var(--dur-base); width:100%; }
.mg-input::placeholder { color:var(--text-faint); }
.mg-input:focus { outline:none; border-color:var(--gold-500); box-shadow:var(--glow-gold-soft); }
.mg-btn { font-family:var(--font-sans); font-size:var(--fs-small); font-weight:700; letter-spacing:var(--tracking-label); text-transform:uppercase; color:var(--ink-950); background:var(--gold-500); border:none; border-radius:var(--radius-sm); padding:0.7rem 1rem; cursor:pointer; transition:background var(--dur-base), box-shadow var(--dur-base); }
.mg-btn:hover { background:var(--gold-400); box-shadow:var(--glow-gold-soft); }

/* ---------- widget areas (standaard WP-widgets) ---------- */
/* Sidebar widgets inherit the .mg-widget shell (gap, heading rule). */
.mg-widget.widget > h2, .mg-widget.widget > h3, .mg-widget .widget-title { font-family:var(--font-sans); font-size:var(--fs-eyebrow); font-weight:600; letter-spacing:var(--tracking-eyebrow); text-transform:uppercase; color:var(--gold-500); display:flex; align-items:center; gap:var(--space-3); margin:0; }
.mg-widget.widget > h2::after, .mg-widget.widget > h3::after, .mg-widget .widget-title::after { content:""; flex:1; height:1px; background:var(--border-subtle); }
.mg-widget ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0; }
.mg-widget li { margin:0; }
.mg-widget li a { display:flex; align-items:baseline; justify-content:space-between; gap:var(--space-3); padding:var(--space-2) 0; border-bottom:1px solid var(--border-ink); font-family:var(--font-serif); font-size:var(--fs-body); color:var(--text-body); text-decoration:none; transition:color var(--dur-base); }
.mg-widget li a:hover { color:var(--gold-300); }
.mg-widget li .count, .mg-widget li .post-date { font-family:var(--font-sans); font-size:var(--fs-xs); letter-spacing:var(--tracking-label); color:var(--silver-400); }
.mg-widget li ul { padding-left:var(--space-4); }
.mg-widget p { font-family:var(--font-serif); font-size:var(--fs-small); line-height:var(--leading-normal); color:var(--text-muted); margin:0; }
.mg-widget select, .mg-widget input[type="text"], .mg-widget input[type="search"], .mg-widget input[type="email"] { font-family:var(--font-sans); font-size:var(--fs-small); color:var(--text-strong); background:var(--surface-inset); border:1px solid var(--border-ink); border-radius:var(--radius-sm); padding:0.6rem 0.75rem; width:100%; }
.mg-widget select:focus, .mg-widget input:focus { outline:none; border-color:var(--gold-500); box-shadow:var(--glow-gold-soft); }
.mg-widget .tagcloud { display:flex; flex-wrap:wrap; gap:var(--space-2); }
.mg-widget .tagcloud a { font-family:var(--font-sans); font-size:var(--fs-xs)!important; letter-spacing:var(--tracking-label); text-transform:uppercase; color:var(--text-body); border:1px solid var(--border-ink); border-radius:var(--radius-sm); padding:0.35em 0.7em; text-decoration:none; transition:border-color var(--dur-base), color var(--dur-base); }
.mg-widget .tagcloud a:hover { color:var(--gold-300); border-color:var(--gold-600); }
.mg-widget .search-form { display:flex; flex-direction:column; gap:var(--space-3); }
/* Footer widgets reuse the footer column look. */
.bg-footer__col.widget ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--space-3); }
.bg-footer__col.widget li { margin:0; }
.bg-footer__col.widget li a, .bg-footer__col.widget a:not(.bg-social) { font-family:var(--font-sans); font-size:var(--fs-small); color:var(--text-body); text-decoration:none; transition:color var(--dur-base); }
.bg-footer__col.widget li a:hover, .bg-footer__col.widget a:not(.bg-social):hover { color:var(--gold-300); }
.bg-footer__col.widget p { font-family:var(--font-serif); font-size:var(--fs-small); color:var(--text-muted); margin:0; line-height:var(--leading-normal); }
.bg-footer__col.widget .count { color:var(--silver-400); font-size:var(--fs-xs); }

/* archive header */
.mg-archhead { padding:var(--space-8) var(--gutter) var(--space-6); display:flex; flex-direction:column; align-items:flex-start; gap:var(--space-3); }
.mg-archhead__eyebrow { font-family:var(--font-sans); font-size:var(--fs-eyebrow); font-weight:600; letter-spacing:var(--tracking-eyebrow); text-transform:uppercase; color:var(--silver-400); }
.mg-archhead__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-h1); line-height:1.06; margin:0; }
.mg-archhead__desc { font-family:var(--font-serif); font-size:var(--fs-lead); color:var(--text-muted); margin:0; max-width:40rem; }
.mg-archhead .bg-rule { max-width:26rem; margin-top:var(--space-2); }

/* pagination */
.mg-pagination { margin-top:var(--space-8); }
.mg-pagination .nav-links { display:flex; flex-wrap:wrap; gap:var(--space-3); align-items:center; }
.mg-pagination .page-numbers { font-family:var(--font-sans); font-size:var(--fs-small); font-weight:600; letter-spacing:var(--tracking-label); color:var(--text-body); text-decoration:none; min-width:2.4rem; height:2.4rem; padding:0 0.7rem; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--border-ink); border-radius:var(--radius-sm); transition:border-color var(--dur-base), color var(--dur-base); }
.mg-pagination .page-numbers:hover { color:var(--gold-300); border-color:var(--gold-600); }
.mg-pagination .page-numbers.current { color:var(--ink-950); background:var(--gold-500); border-color:var(--gold-500); }
.mg-pagination .page-numbers.dots { border-color:transparent; }

/* ============================================================
   SINGLE POST (reading view)
   ============================================================ */
.mr { padding:var(--space-8) 0 var(--space-9); }
.mr-grid { max-width:60rem; margin:0 auto; padding-left:var(--gutter); padding-right:var(--gutter); display:grid; grid-template-columns:12rem 1fr; gap:var(--space-8); align-items:start; }
.mr-rail { position:sticky; top:96px; display:flex; flex-direction:column; gap:var(--space-5); }
.mr-back { font-family:var(--font-sans); font-size:var(--fs-small); font-weight:600; letter-spacing:var(--tracking-label); text-transform:uppercase; color:var(--silver-400); text-decoration:none; display:inline-flex; align-items:center; gap:0.5em; transition:color var(--dur-base); }
.mr-back svg { width:1.05em; height:1.05em; }
.mr-back:hover { color:var(--gold-300); }
.mr-rail__item { display:flex; flex-direction:column; gap:4px; }
.mr-rail__k { font-family:var(--font-sans); font-size:var(--fs-xs); font-weight:600; letter-spacing:var(--tracking-eyebrow); text-transform:uppercase; color:var(--silver-400); }
.mr-rail__v { font-family:var(--font-serif); font-size:var(--fs-body); color:var(--text-body); }
.mr-rail__v a { text-decoration:none; }
.mr-rail__v.is-gold, .mr-rail__v.is-gold a { color:var(--gold-400); }
.mr-rail__v.is-gold a:hover { color:var(--gold-300); }
.mr-rail__share { display:flex; gap:var(--space-3); margin-top:var(--space-2); }
.mr-rail hr { border:none; border-top:1px solid var(--border-ink); margin:var(--space-1) 0; }

.mr-main { min-width:0; }
.mr-hero { width:100%; border-radius:var(--radius-md); margin:0 0 var(--space-6); box-shadow:var(--shadow-md); }
.mr-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-h2); line-height:1.08; margin:0 0 var(--space-4); text-wrap:balance; }
.mr-lead { font-family:var(--font-serif); font-size:var(--fs-lead); font-style:italic; line-height:var(--leading-snug); color:var(--text-muted); margin:0 0 var(--space-7); padding-bottom:var(--space-6); border-bottom:1px solid var(--border-subtle); max-width:var(--reading-max); }

/* prose = the_content output */
.mr-prose { max-width:var(--reading-max); }
.mr-prose > *:first-child { margin-top:0; }
.mr-prose p { font-family:var(--font-serif); font-size:var(--fs-body); line-height:var(--leading-relaxed); color:var(--text-body); margin:0 0 var(--space-5); text-wrap:pretty; }
.mr-prose em,.mr-prose i { color:var(--gold-300); font-style:italic; }
.mr-prose strong { color:var(--text-strong); }
.mr-prose a { color:var(--gold-300); text-decoration:underline; text-underline-offset:2px; text-decoration-color:var(--gold-700); transition:text-decoration-color var(--dur-base); }
.mr-prose a:hover { text-decoration-color:var(--gold-400); }
.mr-prose h2 { font-family:var(--font-display); font-weight:700; text-transform:uppercase; letter-spacing:var(--tracking-display); color:var(--gold-400); font-size:var(--fs-h4); line-height:1.16; margin:var(--space-7) 0 var(--space-4); }
.mr-prose h3 { font-family:var(--font-display); font-weight:600; letter-spacing:var(--tracking-display); color:var(--gold-400); font-size:1.15rem; margin:var(--space-6) 0 var(--space-3); }
.mr-prose ul,.mr-prose ol { margin:0 0 var(--space-5); padding-left:1.2em; }
.mr-prose li { font-family:var(--font-serif); font-size:var(--fs-body); line-height:var(--leading-relaxed); color:var(--text-body); margin-bottom:var(--space-2); }
.mr-prose li::marker { color:var(--gold-500); }
.mr-prose img { border-radius:var(--radius-md); margin:var(--space-6) 0; box-shadow:var(--shadow-md); }
.mr-prose figure { margin:var(--space-6) 0; }
.mr-prose figcaption,.mr-prose .wp-caption-text { font-family:var(--font-sans); font-size:var(--fs-xs); letter-spacing:var(--tracking-label); text-transform:uppercase; color:var(--silver-400); text-align:center; margin-top:var(--space-2); }
.mr-prose blockquote { margin:var(--space-7) 0; padding:var(--space-2) 0 var(--space-2) var(--space-6); border-left:2px solid var(--gold-600); }
.mr-prose blockquote p { font-family:var(--font-serif); font-style:italic; font-size:var(--fs-lead); line-height:1.4; color:var(--gold-300); }
.mr-prose blockquote cite { font-family:var(--font-sans); font-style:normal; font-size:var(--fs-xs); letter-spacing:var(--tracking-label); text-transform:uppercase; color:var(--silver-400); }
.mr-prose hr { border:none; border-top:1px solid var(--border-ink); margin:var(--space-7) 0; }
.mr-prose code,.mr-prose pre { font-family:ui-monospace,'SFMono-Regular',monospace; font-size:0.9em; background:var(--surface-inset); border:1px solid var(--border-ink); border-radius:var(--radius-sm); }
.mr-prose code { padding:0.1em 0.4em; }
.mr-prose pre { padding:var(--space-4); overflow-x:auto; margin:0 0 var(--space-5); }
.mr-prose pre code { border:none; padding:0; background:none; }
.mr-tags { max-width:var(--reading-max); margin-top:var(--space-6); display:flex; flex-wrap:wrap; gap:var(--space-2); }
.mr-tag { font-family:var(--font-sans); font-size:var(--fs-xs); letter-spacing:var(--tracking-label); text-transform:uppercase; color:var(--silver-300); text-decoration:none; border:1px solid var(--border-ink); border-radius:var(--radius-pill); padding:0.3rem 0.8rem; transition:border-color var(--dur-base), color var(--dur-base); }
.mr-tag:hover { color:var(--gold-300); border-color:var(--gold-600); }

.mr-pn { max-width:var(--reading-max); margin-top:var(--space-8); padding-top:var(--space-6); border-top:1px solid var(--border-ink); display:flex; justify-content:space-between; gap:var(--space-5); }
.mr-pn a { font-family:var(--font-sans); font-size:var(--fs-small); font-weight:600; letter-spacing:var(--tracking-label); color:var(--gold-300); text-decoration:none; display:inline-flex; align-items:center; gap:0.5em; max-width:48%; }
.mr-pn a.is-next { margin-left:auto; text-align:right; }
.mr-pn svg { width:1.05em; height:1.05em; flex:none; }
.mr-pn a:hover { color:var(--gold-200,var(--gold-300)); }

/* ============================================================
   PAGE + OVER MIJ
   ============================================================ */
.oh-mast { padding:var(--space-9) var(--gutter) var(--space-6); display:flex; flex-direction:column; align-items:flex-start; gap:var(--space-4); }
.oh-mast__eyebrow { display:inline-flex; align-items:center; gap:var(--space-3); font-family:var(--font-sans); font-size:var(--fs-small); font-weight:600; letter-spacing:0.18em; text-transform:uppercase; color:var(--silver-300); }
.oh-mast__eyebrow svg { width:20px; height:20px; color:var(--gold-500); flex:none; }
.oh-mast__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-h1); line-height:1.1; margin:0; }
.oh-mast .bg-rule { max-width:26rem; margin-top:var(--space-2); }
.oh-about { display:grid; grid-template-columns:0.8fr 1.2fr; gap:var(--space-8); align-items:start; padding-bottom:var(--space-10); }
.oh-aside { display:flex; flex-direction:column; gap:var(--space-5); position:sticky; top:92px; }
.oh-portrait { aspect-ratio:3/4; border:1px solid var(--border-strong); border-radius:var(--radius-md); overflow:hidden; box-shadow:var(--shadow-book); }
.oh-portrait img { width:100%; height:100%; object-fit:cover; display:block; }
.oh-facts { display:flex; flex-direction:column; gap:var(--space-3); }
.oh-facts > div { display:flex; flex-direction:column; gap:2px; padding-bottom:var(--space-3); border-bottom:1px solid var(--border-ink); }
.oh-facts__k { font-family:var(--font-sans); font-size:var(--fs-eyebrow); letter-spacing:var(--tracking-eyebrow); text-transform:uppercase; color:var(--silver-400); }
.oh-facts__v { font-family:var(--font-serif); font-size:var(--fs-body); color:var(--text-strong); }
.oh-prose { display:flex; flex-direction:column; align-items:flex-start; gap:var(--space-4); max-width:var(--reading-max); }
.oh-prose > *:first-child { margin-top:0; }
.oh-prose p { font-family:var(--font-serif); font-size:var(--fs-body); line-height:var(--leading-relaxed); color:var(--text-body); margin:0; text-wrap:pretty; }
.oh-prose p:first-of-type { font-size:var(--fs-lead); line-height:var(--leading-snug); color:var(--text-strong); }
.oh-prose em { color:var(--gold-300); font-style:italic; }
.oh-prose a { color:var(--gold-300); text-decoration:underline; text-underline-offset:2px; }
.oh-prose h2 { 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:var(--space-2) 0 0; }
.oh-prose ul,.oh-prose ol { margin:0; padding-left:1.2em; }
.oh-prose li { font-family:var(--font-serif); font-size:var(--fs-body); line-height:var(--leading-relaxed); color:var(--text-body); }
.oh-prose li::marker { color:var(--gold-500); }

/* generic page (no template) */
.pg { padding:var(--space-8) 0 var(--space-9); }
.pg-grid { max-width:60rem; margin:0 auto; padding-left:var(--gutter); padding-right:var(--gutter); }
.pg-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-h1); line-height:1.06; margin:0 0 var(--space-6); }

/* search form */
.bg-searchform { display:flex; gap:var(--space-3); }
.bg-searchform .mg-input { flex:1; }

/* 404 */
.mg-404 { padding:var(--space-9) var(--gutter); text-align:center; max-width:40rem; margin:0 auto; display:flex; flex-direction:column; align-items:center; gap:var(--space-4); }
.mg-404__code { font-family:var(--font-display); font-weight:800; color:var(--gold-500); font-size:clamp(4rem,12vw,8rem); line-height:1; }

/* ============================================================
   COMMENTS (minimal)
   ============================================================ */
.mr-comments { max-width:var(--reading-max); margin-top:var(--space-8); padding-top:var(--space-6); border-top:1px solid var(--border-ink); }
.mr-comments__h { font-family:var(--font-display); font-weight:600; text-transform:uppercase; letter-spacing:var(--tracking-display); color:var(--gold-400); font-size:var(--fs-h4); margin:0 0 var(--space-5); }
.mr-comments .comment-list { list-style:none; margin:0 0 var(--space-7); padding:0; display:flex; flex-direction:column; gap:var(--space-5); }
.mr-comments .comment-list ul.children { list-style:none; margin:var(--space-4) 0 0; padding-left:var(--space-5); border-left:1px solid var(--border-ink); display:flex; flex-direction:column; gap:var(--space-4); }
.mr-comments .comment-body { font-family:var(--font-serif); color:var(--text-body); }
.mr-comments .comment-author { font-family:var(--font-sans); font-size:var(--fs-small); font-weight:700; color:var(--text-strong); }
.mr-comments .comment-author .says { display:none; }
.mr-comments .comment-meta { font-family:var(--font-sans); font-size:var(--fs-xs); letter-spacing:var(--tracking-label); text-transform:uppercase; color:var(--silver-400); margin-bottom:var(--space-2); }
.mr-comments .comment-meta a { color:var(--silver-400); text-decoration:none; }
.mr-comments .reply a { font-family:var(--font-sans); font-size:var(--fs-xs); font-weight:600; letter-spacing:var(--tracking-label); text-transform:uppercase; color:var(--gold-300); text-decoration:none; }
.mr-comments p { line-height:var(--leading-relaxed); }
.comment-respond { display:flex; flex-direction:column; gap:var(--space-3); }
.comment-respond .comment-reply-title { font-family:var(--font-display); text-transform:uppercase; letter-spacing:var(--tracking-display); color:var(--gold-400); font-size:var(--fs-h4); margin:0 0 var(--space-2); }
.comment-respond label { font-family:var(--font-sans); font-size:var(--fs-xs); letter-spacing:var(--tracking-label); text-transform:uppercase; color:var(--silver-400); display:block; margin-bottom:var(--space-1); }
.comment-respond input[type=text],.comment-respond input[type=email],.comment-respond input[type=url],.comment-respond textarea { font-family:var(--font-sans); font-size:var(--fs-small); color:var(--text-strong); background:var(--surface-inset); border:1px solid var(--border-ink); border-radius:var(--radius-sm); padding:0.7rem 0.85rem; width:100%; }
.comment-respond input:focus,.comment-respond textarea:focus { outline:none; border-color:var(--gold-500); box-shadow:var(--glow-gold-soft); }
.comment-respond .submit { font-family:var(--font-sans); font-size:var(--fs-small); font-weight:700; letter-spacing:var(--tracking-label); text-transform:uppercase; color:var(--ink-950); background:var(--gold-500); border:none; border-radius:var(--radius-sm); padding:0.7rem 1.2rem; cursor:pointer; align-self:flex-start; }
.comment-respond .submit:hover { background:var(--gold-400); }

/* ============================================================
   WP utility / alignment classes
   ============================================================ */
.aligncenter { display:block; margin-left:auto; margin-right:auto; }
.alignright { float:right; margin:0 0 var(--space-4) var(--space-5); }
.alignleft { float:left; margin:0 var(--space-5) var(--space-4) 0; }
.alignwide { max-width:52rem; }
.alignfull { max-width:none; }
.wp-caption { max-width:100%; }
.sticky, .bypostauthor { } /* hooks for plugins */
.post-password-form input[type=password] { font-family:var(--font-sans); padding:0.6rem; background:var(--surface-inset); border:1px solid var(--border-ink); color:var(--text-strong); border-radius:var(--radius-sm); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:980px) {
  .mg-split { grid-template-columns:1fr; }
  .mg-side { position:static; }
}
@media (max-width:860px) {
  .mg-mast__top { flex-direction:column; align-items:flex-start; gap:var(--space-4); }
  .mg-mast__head { flex-basis:auto; }
  .mg-mast__title { white-space:normal; }
  .mg-mast__art { align-self:center; }
  .mg-mast__art img { max-height:none; width:100%; max-width:15rem; height:auto; }
  .bg-footer__cols { grid-template-columns:1fr 1fr; }
  .bg-footer__brand { grid-column:1 / -1; }
  .oh-about { grid-template-columns:1fr; gap:var(--space-6); }
  .oh-aside { position:static; flex-direction:row; align-items:flex-start; flex-wrap:wrap; gap:var(--space-5); }
  .oh-portrait { width:16rem; max-width:100%; }
  .oh-facts { flex:1; min-width:14rem; }
}
@media (max-width:760px) {
  .mr-grid { grid-template-columns:1fr; gap:var(--space-6); }
  .mr-rail { position:static; flex-direction:row; flex-wrap:wrap; align-items:center; gap:var(--space-5); }
  .mr-rail hr { display:none; }
}
@media (max-width:680px) {
  .mg-featured { grid-template-columns:1fr; }
  .mg-post { grid-template-columns:1fr; }
  .mg-post__thumb { max-width:100%; }
  .bg-footer__cols { grid-template-columns:1fr; }
  .bg-footer__base { flex-direction:column; gap:var(--space-2); text-align:center; }
}
@media (max-width:520px) {
  .oh-aside { flex-direction:column; }
  .oh-portrait { width:100%; max-width:20rem; }
  .mr-pn { flex-direction:column; }
  .mr-pn a { max-width:100%; }
  .mr-pn a.is-next { text-align:left; margin-left:0; }
}