/* SA design system (brand.md, 2 nov 2026), Werkslide-variant, voor het artikel the-rules-nobody-wrote-down. */
:root {
  --sa-paper: #f5f5f5;
  --sa-card: #ffffff;
  --sa-line: rgba(58, 58, 58, 0.14);
  --sa-head: #3a3a3a;
  --sa-body: #707070;
  --sa-blue: #1069e5;
  --sa-blue-dark: #438bfa;
  --sa-magenta: #ad45aa;
  --sa-yellow: #f5d23e;
  --sa-charcoal: #262626;
  --sa-grey-dark: #8c8c8c;
}
html, body { overflow-x: hidden; }
body { background: var(--sa-paper); color: var(--sa-head); max-width: 100vw; font-family: 'Prompt', sans-serif; }
.accent-line { background: var(--sa-blue); }
.nav { background: rgba(38, 38, 38, 0.97); border-bottom: none; }
.nav-logo, .nav-logo-text { color: #ffffff; }
.nav-toggle { color: #ffffff; }
.nav-logo-divider, .nav-logo-brand { color: var(--sa-blue-dark); }
.nav-links a { color: var(--sa-grey-dark); }
.nav-links a:hover, .nav-links a.active { color: var(--sa-blue-dark); }
@media (max-width: 768px) {
  .nav-links { background: rgba(38, 38, 38, 0.98); border-bottom: none; }
}
.section-label { color: var(--sa-blue-dark); }
.btn-primary { background: var(--sa-blue); color: #ffffff; border-radius: 0; }
.btn-primary:hover { background: #0b55bd; color: #ffffff; }
a { color: var(--sa-blue); }

/* Header */
.label-bar { display: inline-block; background: var(--sa-blue); color: var(--sa-paper); font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.2rem 0.6rem; margin-bottom: 1rem; }
.blog-post-header h1 { font-family: 'Oswald', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 0.01em; line-height: 1.22; color: var(--sa-head); }
.mark { background: var(--sa-blue); color: var(--sa-paper); padding: 0 0.12em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.blog-post-meta { color: var(--sa-body); }
.blog-post-meta a { color: inherit; text-decoration: underline; }
.blog-back { color: var(--sa-blue); }

/* Body */
.blog-post-body h2 { font-family: 'Oswald', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 0.01em; line-height: 1.22; color: var(--sa-head); }
.blog-post-body p, .blog-post-body li { color: var(--sa-body); line-height: 1.6; }
.blog-post-body strong { color: var(--sa-head); }
.blog-post-body a { color: var(--sa-blue); text-decoration: underline; text-underline-offset: 2px; }
.blog-toc { background: var(--sa-card); border: 1px solid var(--sa-line); border-radius: 0; }
.blog-toc-label { color: var(--sa-blue); font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: 0.08em; }
.blog-toc-list a { color: var(--sa-body); }
.blog-toc-list a:hover { color: var(--sa-blue); }
.blog-takeaway { background: var(--sa-card); border-left: 6px solid var(--sa-blue); border-radius: 0; }
.blog-takeaway-label { color: var(--sa-blue); font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: 0.08em; }
.blog-takeaway p { color: var(--sa-head); }

/* Rules list */
.rules { list-style: none; padding: 0; display: grid; gap: 0.75rem; }
.rules li { background: var(--sa-card); border: 1px solid var(--sa-line); padding: 1rem 1.25rem; }
.rules li strong { display: block; font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: 0.02em; font-size: 1.05rem; margin-bottom: 0.2rem; }

/* Figures */
.plate { margin: 2rem 0; background: var(--sa-card); border: 1px solid var(--sa-line); padding: 0.5rem 0; }
@media (min-width: 900px) {
  .plate { width: min(1120px, calc(100vw - 64px)); position: relative; left: 50%; transform: translateX(-50%); }
}
.plate-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.plate svg { display: block; width: 100%; min-width: 760px; height: auto; }
.plate figcaption { font-size: 0.85rem; color: var(--sa-body); padding: 0.5rem 1rem 0.25rem; border-top: 1px solid var(--sa-line); }
.plate-hint { display: none; font-size: 0.8rem; color: var(--sa-body); padding: 0 1rem; }
@media (max-width: 760px) { .plate-hint { display: block; } }

/* CTA block: Statement-variant */
.cta-block { background: var(--sa-charcoal); }
.cta-block h2 { color: #ffffff; font-family: 'Oswald', sans-serif; text-transform: uppercase; }
.cta-block p { color: var(--sa-grey-dark); }

/* Footer */
.footer { background: var(--sa-charcoal); }
.footer p, .footer p a { color: var(--sa-grey-dark); }
.footer-links a { color: var(--sa-grey-dark); }
.footer-links a:hover { color: var(--sa-blue-dark); }
.footer-gradient { background: var(--sa-blue); }

/* ---------- Design pass, 2 nov 2026 ---------- */

/* Hero: Statement-variant, network pattern at the edge */
.hero { position: relative; overflow: hidden; background: var(--sa-charcoal); padding: 4.5rem 1.5rem 3.5rem; }
.hero::before { content: ""; position: absolute; top: -10%; right: -12%; width: 70%; height: 130%; background: url("../assets/network-pattern.svg") no-repeat center / contain; opacity: 0.08; pointer-events: none; }
.hero-inner { position: relative; max-width: 760px; margin: 0 auto; }
.hero .blog-back { color: var(--sa-blue-dark); display: inline-block; margin-bottom: 1.5rem; }
.hero h1 { font-family: 'Oswald', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 0.01em; line-height: 1.22; color: #ffffff; font-size: clamp(2.4rem, 7vw, 4.2rem); margin: 0.4rem 0 1.2rem; }
.hero h1 .mark { background: var(--sa-blue-dark); color: var(--sa-charcoal); }
.hero .lede { color: #b4b4b4; font-size: 1.2rem; line-height: 1.55; max-width: 620px; margin: 0 0 1.5rem; font-weight: 300; }
.hero .blog-post-meta { color: var(--sa-grey-dark); }
.label-fill-2 { display: inline-block; background: #ed9de8; color: var(--sa-head); font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.2rem 0.6rem; margin-left: 0.4rem; }


/* Section eyebrow */
.eyebrow { display: block; font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sa-blue); margin: 3rem 0 -0.6rem; }

/* Icon cards */
.cards { display: grid; gap: 0.9rem; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); margin: 1.5rem 0; padding: 0; list-style: none; }
.cards--4 { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.card { background: var(--sa-card); border: 1px solid var(--sa-line); padding: 1.25rem 1.25rem 1.1rem; }
.card svg { width: 32px; height: 32px; color: var(--sa-blue); display: block; margin-bottom: 0.8rem; }
.card b { display: block; font-family: 'Oswald', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; color: var(--sa-head); font-size: 1.02rem; line-height: 1.25; margin-bottom: 0.3rem; }
.card span { color: var(--sa-body); font-size: 0.95rem; line-height: 1.5; display: block; }
.cards--rules { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

/* Statement block */
.statement { background: var(--sa-charcoal); padding: 2.5rem 2rem; margin: 2.5rem 0; position: relative; overflow: hidden; }
@media (min-width: 900px) {
  .statement { width: min(1120px, calc(100vw - 64px)); left: 50%; transform: translateX(-50%); padding: 3.5rem 4rem; }
}
.statement .label-geel { display: inline-block; background: var(--sa-blue-dark); color: var(--sa-charcoal); font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.2rem 0.6rem; }
.statement p.big { font-family: 'Oswald', sans-serif; font-weight: 700; text-transform: uppercase; line-height: 1.22; letter-spacing: 0.01em; color: #ffffff; font-size: clamp(1.9rem, 5vw, 3.2rem); margin: 1rem 0 0.8rem; }
.statement p.big .mark--geel { background: var(--sa-blue-dark); color: var(--sa-charcoal); padding: 0 0.12em; }
.statement p.small { color: #b4b4b4; font-size: 1.05rem; margin: 0; max-width: 560px; }

/* Annotation on the brain diagram */
.plate-canvas { position: relative; min-width: 760px; }
.plate-canvas svg { min-width: 0; }
.annot { position: absolute; top: 1%; left: 66%; font-family: 'Caveat', cursive; font-weight: 600; font-size: clamp(1.1rem, 2.2vw, 1.7rem); color: var(--sa-magenta); transform: rotate(-3deg); white-space: nowrap; pointer-events: none; }

/* Author box */
.author { display: grid; grid-template-columns: 1fr 180px; gap: 1.5rem; align-items: center; background: var(--sa-card); border: 1px solid var(--sa-line); padding: 1.5rem; margin: 1.5rem 0; }
.author img { width: 180px; height: 220px; object-fit: cover; object-position: center 20%; display: block; }
.author p { margin: 0 0 0.75rem; }
.author p:last-child { margin-bottom: 0; }
.author .author-name { font-family: 'Oswald', sans-serif; font-weight: 700; text-transform: uppercase; color: var(--sa-head); letter-spacing: 0.02em; font-size: 1.1rem; }
@media (max-width: 560px) {
  .author { grid-template-columns: 1fr; }
  .author img { width: 100%; height: 240px; order: -1; }
}

/* Fixes after first look */
.hero { min-height: 0; display: block; }
.blog-post-body ul.cards { padding-left: 0; margin-left: 0; }
.blog-post-body ul.cards li { margin: 0; }
.cards--4 { grid-template-columns: repeat(2, 1fr); }
.cards--rules { grid-template-columns: repeat(2, 1fr); }
.cards--rules li:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (max-width: 600px) {
  .cards--4, .cards--rules { grid-template-columns: 1fr; }
}
.blog-post-body .eyebrow + h2 { margin-top: 0.6rem; }
.annot { top: 7%; left: 64%; }
.hero { padding: 8rem 1.5rem 3.5rem; }
@media (max-width: 768px) { .hero { padding: 6.5rem 1.25rem 2.5rem; } }

/* FAQ questions */
.blog-post-body h3 { font-family: 'Oswald', sans-serif; font-weight: 600; color: var(--sa-head); font-size: 1.25rem; line-height: 1.3; letter-spacing: 0.01em; margin: 2rem 0 0.5rem; }