/* Hallmark · macrostructure: Marquee Hero (home) / Long Document (pillar) · genre: editorial
 * theme: custom "Gloed" · paper oklch(21% 0.012 60) dark · accent oklch(75% 0.135 62) warm-amber
 * display: Fraunces (roman+italic serif) · body: Inter · mono: IBM Plex Mono
 * pre-emit critique: P5 H4 E5 S4 R5 V4
 * hifitubes.nl — hifi-versterker koopgids · MOCKUP (design-voorstel, niet productie)
 */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,560;9..144,600&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --color-paper:oklch(21% 0.012 60);
  --color-paper-2:oklch(26% 0.014 58);
  --color-paper-3:oklch(32% 0.016 56);
  --color-ink:oklch(93% 0.014 85);
  --color-ink-soft:oklch(78% 0.012 80);
  --color-accent:oklch(75% 0.135 62);
  --color-accent-2:oklch(58% 0.165 38);
  --color-line:oklch(38% 0.014 56);
  --color-focus:oklch(80% 0.13 62);

  --font-display:'Fraunces',Georgia,serif;
  --font-body:'Inter',system-ui,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,monospace;

  --text-display:clamp(2.6rem,6vw,4.6rem);
  --text-display-s:clamp(2rem,4.5vw,3.2rem);
  --text-2xl:clamp(1.5rem,2.6vw,2.1rem);
  --text-xl:1.35rem;
  --text-lg:1.125rem;
  --text-base:1rem;
  --text-sm:.875rem;
  --text-xs:.78rem;

  --space-2xs:.375rem; --space-xs:.625rem; --space-sm:1rem; --space-md:1.5rem;
  --space-lg:2.5rem; --space-xl:4rem; --space-2xl:6rem;
  --gutter:clamp(1rem,4vw,2.5rem);
  --maxw:1140px; --readw:68ch;

  --ease-out:cubic-bezier(.22,.61,.36,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  --dur:.32s;
  --radius:14px; --radius-sm:8px;
  --rule:1px solid var(--color-line);
}

*,*::before,*::after{box-sizing:border-box}
html,body{overflow-x:clip;margin:0}
html{scroll-behavior:smooth}
body{
  background:var(--color-paper);color:var(--color-ink);
  font-family:var(--font-body);font-size:var(--text-base);line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:var(--font-display);font-optical-sizing:auto;line-height:1.08;
  font-weight:560;letter-spacing:-.01em;overflow-wrap:anywhere;min-width:0;margin:0}
p{margin:0 0 1em}
a{color:var(--color-accent);text-decoration:none}
a:hover{color:var(--color-accent-2)}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--color-focus);outline-offset:3px;border-radius:3px}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.read{max-width:var(--readw)}
.eyebrow{font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.14em;
  text-transform:uppercase;color:var(--color-accent);margin:0 0 var(--space-xs)}
.muted{color:var(--color-ink-soft)}
.lead{font-size:var(--text-lg);color:var(--color-ink-soft)}

/* glow signature */
.glow{position:relative;isolation:isolate}
.glow::before{content:"";position:absolute;inset:auto auto 60% -10%;width:340px;height:340px;
  background:radial-gradient(circle,oklch(75% 0.135 62/.22),transparent 68%);
  z-index:-1;pointer-events:none}

/* ---- nav (N6 sidebar-less top bar, glowing dots logo) ---- */
.nav{position:sticky;top:0;z-index:50;background:oklch(21% 0.012 60/.86);
  backdrop-filter:blur(10px);border-bottom:var(--rule)}
.nav .wrap{display:flex;align-items:center;gap:var(--space-md);min-height:66px}
.brand{font-family:var(--font-display);font-weight:600;font-size:1.35rem;color:var(--color-ink);
  letter-spacing:-.02em;display:flex;align-items:center;gap:.1em}
.brand .dot{color:var(--color-accent);text-shadow:0 0 10px var(--color-accent)}
.nav menu{display:flex;gap:var(--space-md);list-style:none;margin:0;padding:0;
  margin-left:auto;align-items:center;flex-wrap:wrap}
.nav a:not(.btn){color:var(--color-ink-soft);font-size:var(--text-sm);font-weight:500}
.nav a:not(.btn):hover{color:var(--color-ink)}

.btn{display:inline-flex;align-items:center;gap:.5em;background:var(--color-accent);
  color:oklch(21% 0.012 60);font-weight:600;font-size:var(--text-sm);
  padding:.6em 1.1em;border-radius:var(--radius-sm);border:0;cursor:pointer;
  transition:transform var(--dur) var(--ease-out),background var(--dur)}
.btn:hover{background:var(--color-focus);color:oklch(21% 0.012 60);transform:translateY(-1px)}
.btn.ghost{background:transparent;color:var(--color-ink);border:1px solid var(--color-line)}
.btn.ghost:hover{border-color:var(--color-accent);background:var(--color-paper-2)}

/* ---- hero ---- */
.hero{position:relative;min-height:min(86vh,640px);display:grid;align-items:end;
  border-bottom:var(--rule);overflow:clip}
.hero img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,oklch(15% 0.01 60/.92) 0%,oklch(15% 0.01 60/.62) 48%,transparent 86%)}
.hero .wrap{padding-block:var(--space-2xl) var(--space-xl)}
.hero h1{font-size:var(--text-display);max-width:14ch;font-weight:600}
.hero .lead{max-width:46ch;margin-top:var(--space-sm)}
.hero .cta-row{display:flex;gap:var(--space-sm);flex-wrap:wrap;margin-top:var(--space-lg)}

/* ---- sections ---- */
section{padding-block:var(--space-2xl)}
.section-head{max-width:50ch;margin-bottom:var(--space-lg)}
.section-head h2{font-size:var(--text-2xl)}

/* type grid */
.grid{display:grid;gap:var(--space-md)}
.grid.cols-3{grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr))}
.grid.cols-2{grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))}
.grid.cols-4{grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr))}

.card{background:var(--color-paper-2);border:var(--rule);border-radius:var(--radius);
  padding:var(--space-md);transition:transform var(--dur) var(--ease-out),border-color var(--dur)}
.card:hover{transform:translateY(-3px);border-color:var(--color-accent)}
.card .ico{width:38px;height:38px;color:var(--color-accent);margin-bottom:var(--space-sm)}
.card h3{font-size:var(--text-xl);margin-bottom:var(--space-2xs)}
.card p{font-size:var(--text-sm);color:var(--color-ink-soft);margin:0}
.card .vol{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-accent);
  display:block;margin-top:var(--space-sm)}

/* brand strip */
.brands{display:flex;gap:var(--space-md);flex-wrap:wrap;align-items:center}
.brands span{font-family:var(--font-display);font-style:italic;font-size:1.4rem;
  color:var(--color-ink-soft);padding:.3em .7em;border:var(--rule);border-radius:var(--radius-sm)}

/* recommend card */
.rec{background:var(--color-paper-2);border:var(--rule);border-top:3px solid var(--color-accent);
  border-radius:var(--radius);padding:var(--space-md)}
.rec .tag{font-family:var(--font-mono);font-size:var(--text-xs);text-transform:uppercase;
  letter-spacing:.1em;color:var(--color-accent)}
.rec h3{font-size:var(--text-xl);margin:.2em 0 .4em}
.rec ul{list-style:none;padding:0;margin:.6em 0 0;font-size:var(--text-sm)}
.rec li{padding-left:1.4em;position:relative;margin-bottom:.3em;color:var(--color-ink-soft)}
.rec li.plus::before{content:"+";position:absolute;left:0;color:var(--color-accent);font-weight:700}
.rec li.min::before{content:"–";position:absolute;left:0;color:var(--color-accent-2);font-weight:700}
.rec .price{font-family:var(--font-mono);color:var(--color-ink);margin-top:var(--space-sm)}

/* table */
.cmp{width:100%;border-collapse:collapse;font-size:var(--text-sm);overflow:hidden;
  border:var(--rule);border-radius:var(--radius)}
.cmp th,.cmp td{padding:.7em .9em;text-align:left;border-bottom:var(--rule)}
.cmp thead th{font-family:var(--font-mono);font-size:var(--text-xs);text-transform:uppercase;
  letter-spacing:.08em;color:var(--color-ink-soft);background:var(--color-paper-2)}
.cmp tbody tr:nth-child(even){background:oklch(26% 0.014 58/.5)}
.cmp td.num{font-family:var(--font-mono);color:var(--color-ink)}
.cmp tr.best td{background:oklch(75% 0.135 62/.1)}
.table-scroll{overflow-x:auto}

/* FAQ */
details{border-bottom:var(--rule);padding:var(--space-sm) 0}
details summary{font-family:var(--font-display);font-size:var(--text-lg);cursor:pointer;
  list-style:none;display:flex;justify-content:space-between;gap:1em}
details summary::after{content:"+";color:var(--color-accent)}
details[open] summary::after{content:"–"}
details p{margin-top:var(--space-sm);color:var(--color-ink-soft)}

/* expert / byline */
.expert{display:flex;gap:var(--space-md);align-items:center;background:var(--color-paper-2);
  border:var(--rule);border-radius:var(--radius);padding:var(--space-md)}
.expert img{width:84px;height:84px;border-radius:50%;object-fit:cover;
  border:2px solid var(--color-accent);flex-shrink:0}
.byline{display:flex;gap:.7em;align-items:center;color:var(--color-ink-soft);font-size:var(--text-sm)}
.byline img{width:42px;height:42px;border-radius:50%;object-fit:cover}

/* tool */
.tool{background:var(--color-paper-2);border:var(--rule);border-radius:var(--radius);
  padding:var(--space-lg);position:relative}
.tool .progress{height:6px;background:var(--color-paper-3);border-radius:99px;overflow:hidden;margin-bottom:var(--space-md)}
.tool .progress i{display:block;height:100%;width:33%;background:var(--color-accent)}
.opt{display:block;width:100%;text-align:left;background:var(--color-paper);border:var(--rule);
  border-radius:var(--radius-sm);padding:.9em 1em;margin-bottom:.6em;color:var(--color-ink);
  cursor:pointer;font-size:var(--text-base);transition:border-color var(--dur),background var(--dur)}
.opt:hover{border-color:var(--color-accent);background:var(--color-paper-3)}

/* forms */
.field{margin-bottom:var(--space-sm)}
.field label{display:block;font-size:var(--text-sm);margin-bottom:.3em;color:var(--color-ink-soft)}
.field input,.field textarea{width:100%;background:var(--color-paper);border:var(--rule);
  border-radius:var(--radius-sm);padding:.7em .9em;color:var(--color-ink);font:inherit}
.field input:focus,.field textarea:focus{border-color:var(--color-accent);outline:none}

/* article */
.article{max-width:var(--readw);margin-inline:auto}
.article h2{font-size:var(--text-2xl);margin:var(--space-lg) 0 var(--space-sm)}
.article h3{font-size:var(--text-xl);margin:var(--space-md) 0 var(--space-2xs)}
.pullquote{font-family:var(--font-display);font-style:italic;font-size:var(--text-2xl);
  border-left:3px solid var(--color-accent);padding-left:var(--space-md);margin:var(--space-lg) 0;
  color:var(--color-ink)}

/* light reading variant (legal) */
.paper-light{--color-paper:oklch(96% 0.008 80);--color-paper-2:oklch(99% 0.004 80);
  --color-ink:oklch(28% 0.02 60);--color-ink-soft:oklch(45% 0.02 60);--color-line:oklch(86% 0.01 70)}

/* footer */
footer{background:var(--color-paper-2);border-top:var(--rule);padding-block:var(--space-xl) var(--space-lg);margin-top:var(--space-2xl)}
.fcols{display:grid;gap:var(--space-lg);grid-template-columns:1.4fr repeat(2,1fr)}
footer h4{font-family:var(--font-mono);font-size:var(--text-xs);text-transform:uppercase;
  letter-spacing:.1em;color:var(--color-ink-soft);margin:0 0 var(--space-sm)}
footer ul{list-style:none;padding:0;margin:0}
footer li{margin-bottom:.4em}
footer a{color:var(--color-ink-soft);font-size:var(--text-sm)}
footer a:hover{color:var(--color-accent)}
.foot-note{border-top:var(--rule);margin-top:var(--space-lg);padding-top:var(--space-md);
  font-size:var(--text-xs);color:var(--color-ink-soft)}

/* breadcrumb */
.crumb{font-size:var(--text-xs);font-family:var(--font-mono);color:var(--color-ink-soft);
  padding-block:var(--space-md) 0}
.crumb a{color:var(--color-ink-soft)}

.related{display:grid;gap:var(--space-sm);grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr))}
.related a{display:block;background:var(--color-paper-2);border:var(--rule);border-radius:var(--radius-sm);
  padding:var(--space-sm);color:var(--color-ink);font-size:var(--text-sm)}
.related a:hover{border-color:var(--color-accent)}

@media(max-width:720px){
  .nav menu{gap:var(--space-sm)}
  .nav menu li.hide-m{display:none}
  .fcols{grid-template-columns:1fr}
  .hero::after{background:linear-gradient(0deg,oklch(15% 0.01 60/.95) 8%,oklch(15% 0.01 60/.55) 70%)}
  section{padding-block:var(--space-xl)}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ===== WP block-integratie (blog index / archive / single) ===== */
.alignfull{width:100%}
main.wp-block-group{display:block}
.hero .hero-content{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.eyebrow{color:var(--color-accent)}
.postgrid{display:grid;gap:var(--space-md);grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));list-style:none;padding:0}
.postcard{background:var(--color-paper-2);border:var(--rule);border-radius:var(--radius);
  overflow:hidden;transition:transform var(--dur) var(--ease-out),border-color var(--dur)}
.postcard:hover{transform:translateY(-3px);border-color:var(--color-accent)}
.postcard .pc-body{padding:var(--space-md)}
.postcard h3{font-size:var(--text-xl);margin:0 0 .4em}
.postcard h3 a{color:var(--color-ink)}
.postcard h3 a:hover{color:var(--color-accent)}
.postcard .wp-block-post-excerpt{color:var(--color-ink-soft);font-size:var(--text-sm);margin:0}
.wp-block-post-excerpt__more-link{color:var(--color-accent);font-weight:600}
.wp-block-query-pagination{margin-top:var(--space-lg);gap:.5em;display:flex;justify-content:center}
.wp-block-query-pagination a,.wp-block-query-pagination .current{color:var(--color-ink-soft);
  padding:.4em .8em;border:var(--rule);border-radius:var(--radius-sm)}
.wp-block-query-pagination .current{background:var(--color-accent);color:var(--color-paper);border-color:var(--color-accent)}
/* single post content width */
.single-post .article,.page .article{margin-inline:auto}

/* ===== mobiel menu (checkbox-hack, geen <details>) ===== */
.mnav-toggle{display:none}
.menu-btn{display:none;cursor:pointer;font-size:1.5rem;color:var(--color-ink);
  margin-left:auto;padding:.2em .4em;line-height:1}
.mnav-panel{display:none;flex-direction:column;gap:.2em;width:100%;padding:var(--space-sm) 0}
.mnav-panel a{color:var(--color-ink);padding:.6em var(--gutter);font-size:var(--text-base);border-bottom:var(--rule)}
@media(max-width:820px){
  .nav menu{display:none}
  .menu-btn{display:block}
  .mnav-toggle:checked ~ .mnav-panel{display:flex}
  .nav .wrap{flex-wrap:wrap}
}