/*
Theme Name: Sofie Meijer Portfolio
Theme URI: https://sofiemeijer.nl/
Author: Sofie Meijer
Description: Strak, stijlvol scrollytelling-portfolio voor Sofie Meijer (Mediavormgeven, SintLucas Eindhoven). Home: Showcase Premium (uitgelicht, scrollytelling), een stage-oproep, Showcase Basic (rustig overzicht) en Over mij met bullets uit de Bullets-taxonomie. Beeld + teksten komen uit de Post Image Manager-plugin. Paginatemplate "Portfolio overzicht (masonry)" met tagfilter; de projectpagina toont het artikel en daaronder alle beelden op hun eigen maat.
Version: 2.1.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: sofie-meijer
*/

/* ============ Fonts ============ */
@font-face {
  font-family: 'Sofie Icons';
  src: url('assets/fonts/Sofie-Icons.ttf') format('truetype');
  font-weight: normal; font-style: normal; font-display: swap;
}

/* ============ Tokens ============ */
:root {
  --pink-50:#F7EBF0; --pink-100:#ECD5DE; --pink-300:#D79FB3; --pink-500:#C25E82; --pink-600:#A94A6C; --pink-700:#7F3450;
  --turq-50:#E5F0EE; --turq-100:#C9E0DB; --turq-300:#82B6AF; --turq-500:#2E8B83; --turq-600:#236F68; --turq-700:#184E49;
  --ink-900:#17161A; --ink-800:#26242B; --ink-700:#3A3740;
  --warm-0:#FFFFFF; --warm-50:#F7F4F0; --warm-100:#EDE8E1; --warm-200:#DED7CC; --warm-300:#C7BEB1; --warm-500:#9B9187; --warm-700:#6B635B;
  --font-display:'Archivo',system-ui,-apple-system,sans-serif;
  --font-text:'Hanken Grotesk',system-ui,-apple-system,sans-serif;
  --radius-md:12px; --radius-lg:20px; --radius-xl:28px; --radius-pill:999px;
  --shadow-sm:0 2px 8px rgba(23,22,26,.07); --shadow-md:0 12px 28px rgba(23,22,26,.10); --shadow-lg:0 24px 60px rgba(23,22,26,.14);
  --ease-out:cubic-bezier(.22,1,.36,1); --dur:220ms;
  --nav-h:64px; /* hoogte van de sticky nav — verhoog/verlaag als de projecttop wegvalt */
}

/* ============ Base ============ */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;background:var(--warm-50);color:var(--ink-800);font-family:var(--font-text);-webkit-font-smoothing:antialiased;line-height:1.55;}
a{color:var(--pink-600);text-decoration:none;}
a:hover{color:var(--pink-700);}
img{max-width:100%;display:block;}
h1,h2,h3{font-family:var(--font-display);letter-spacing:-0.025em;color:var(--ink-900);margin:0;}

/* ============ Header / nav ============ */
.sm-nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  padding:16px clamp(20px,5vw,64px);background:rgba(247,244,240,.82);backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:1px solid var(--warm-200);}
.sm-brand{font-family:var(--font-display);font-weight:700;font-size:22px;letter-spacing:-0.03em;color:var(--ink-900);}
.sm-brand .dot{color:var(--pink-500);}
.sm-menu{display:flex;align-items:center;gap:26px;list-style:none;margin:0;padding:0;}
.sm-menu a{font-family:var(--font-text);font-weight:600;font-size:15px;color:var(--ink-900);white-space:nowrap;}
.sm-menu a:hover{color:var(--pink-600);}
/* Contactknop: ook als .sm-menu a een kleur zet, en ook in een echt WP-menu
   (menu-item met CSS-klasse "contact" of #sm-contact in de URL — zie functions.php). */
.sm-contact-btn,
.sm-menu a.sm-contact-btn{display:inline-flex;align-items:center;padding:10px 20px;border-radius:var(--radius-pill);
  background:var(--ink-900);color:var(--warm-50);font-weight:700;font-size:14px;border:2px solid var(--ink-900);}
.sm-contact-btn:hover,
.sm-menu a.sm-contact-btn:hover,
.sm-menu a.sm-contact-btn:focus-visible{background:var(--ink-800);border-color:var(--ink-800);color:#fff;}
.sm-menu li.sm-menu-contact{display:flex;align-items:center;}

/* ============ Buttons ============ */
.sm-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--font-text);font-weight:700;
  line-height:1;border-radius:var(--radius-pill);cursor:pointer;padding:16px 32px;font-size:1.0625rem;border:2px solid var(--ink-900);
  transition:transform 140ms var(--ease-out),filter var(--dur) var(--ease-out);}
.sm-btn:active{transform:scale(.96);}
.sm-btn--ink{background:var(--ink-900);color:var(--warm-50);}
.sm-btn--ink:hover{color:#fff;filter:brightness(1.12);}
.sm-btn--outline{background:transparent;color:var(--ink-900);}
.sm-btn--pink{background:var(--pink-500);border-color:var(--pink-500);color:#fff;}
.sm-btn--pink:hover{color:#fff;filter:brightness(1.06);}
.sm-btn--onink{color:var(--warm-50);border-color:rgba(255,255,255,.45);}
.sm-btn--onink:hover{color:#fff;border-color:#fff;}

/* ============ Glyph icon field ============ */
.sm-iconfield{position:absolute;inset:-35%;pointer-events:none;opacity:.65;transform:rotate(-18deg);
  display:flex;flex-direction:column;gap:68px;z-index:0;}
.sm-iconfield-row{display:flex;gap:110px;}
.sm-glyph{font-family:'Sofie Icons';font-size:60px;line-height:1;letter-spacing:-0.14em;}
.sm-float{position:absolute;font-family:'Sofie Icons';line-height:1;pointer-events:none;will-change:transform;z-index:1;}

/* ============ Hero (scrollytelling) ============ */
.sm-hero{position:relative;height:380vh;background:var(--warm-50);}
.sm-hero-sticky{position:sticky;top:0;height:100vh;overflow:hidden;}
.sm-hero-dots{position:absolute;inset:-40px;pointer-events:none;background-image:radial-gradient(var(--warm-300) 1.2px,transparent 1.2px);background-size:28px 28px;opacity:.45;}
.sm-hero-outline{position:absolute;left:50%;top:50%;white-space:nowrap;font-family:var(--font-display);font-weight:700;
  font-size:26vw;line-height:1;letter-spacing:-0.04em;color:transparent;-webkit-text-stroke:1.5px var(--warm-300);
  transform:translate(-50%,-50%);opacity:.55;pointer-events:none;}
.sm-hero-col{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 24px;z-index:5;pointer-events:none;}
.sm-tags{display:flex;gap:8px;justify-content:center;margin-bottom:24px;flex-wrap:wrap;}
.sm-tag{display:inline-flex;padding:5px 14px;border-radius:var(--radius-pill);background:var(--warm-100);border:1px solid var(--warm-200);font-weight:600;font-size:12.5px;color:var(--ink-800);}
.sm-hero-title{font-family:var(--font-display);font-weight:700;white-space:nowrap;font-size:clamp(2.6rem,11vw,9rem);line-height:1;letter-spacing:-0.03em;color:var(--ink-900);transform-origin:center;will-change:transform;}
.sm-hero-title .dot{color:var(--pink-500);}
.sm-hero-tagline{margin:24px auto 0;max-width:460px;font-size:clamp(1rem,2vw,1.2rem);color:var(--warm-700);}
.sm-hero-buttons{margin-top:36px;display:flex;gap:12px;flex-wrap:wrap;justify-content:center;pointer-events:auto;will-change:transform;}
.sm-hero-lines{position:absolute;left:clamp(24px,6vw,90px);top:50%;transform:translateY(-50%);max-width:640px;z-index:4;pointer-events:none;opacity:0;}
.sm-line{font-family:var(--font-display);font-weight:700;font-size:clamp(2.2rem,4.2vw,3.9rem);line-height:1.05;letter-spacing:-0.03em;color:var(--ink-900);}
.sm-line:not(:first-child){position:absolute;top:0;left:0;}
.sm-line--cue{color:var(--pink-500);}
.sm-hero-photo{position:absolute;left:64%;bottom:0;width:min(52vh,480px);transform:translateX(-50%) translateY(72%) scale(.9);transform-origin:bottom center;opacity:0;will-change:transform;filter:drop-shadow(0 30px 55px rgba(23,22,26,.20));z-index:3;pointer-events:none;}
.sm-scrollcue{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--warm-700);z-index:6;pointer-events:none;}
@keyframes smBob{0%,100%{transform:translateY(0);}50%{transform:translateY(5px);}}
.sm-scrollcue span{animation:smBob 1.6s var(--ease-out) infinite;font-size:16px;}

/* ============ Project storyscroll ============ */
.sm-project{position:relative;}
.sm-project-sticky{position:sticky;top:var(--nav-h);height:calc(100vh - var(--nav-h));display:flex;flex-direction:row;overflow:hidden;background:var(--warm-50);border-top:1px solid var(--warm-200);}
.sm-rail{flex:0 0 clamp(300px,30vw,420px);height:100%;padding:clamp(78px,10vh,120px) clamp(24px,2.5vw,44px) 44px;display:flex;flex-direction:column;border-right:1px solid var(--warm-200);background:var(--warm-0);position:relative;z-index:2;}
.sm-rail-head{display:flex;align-items:center;gap:14px;margin-bottom:16px;}
.sm-rail-num{font-family:var(--font-display);font-weight:700;font-size:clamp(2rem,3vw,3rem);letter-spacing:-0.03em;line-height:1;}
.sm-rail-rule{flex:none;width:36px;height:2px;background:var(--warm-300);}
.sm-rail-flag{font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase;}
.sm-rail h3{font-size:clamp(1.9rem,3.2vw,3rem);line-height:1.03;}
.sm-rail-blurb{margin:14px 0 0;font-size:1.05rem;color:var(--warm-700);}
.sm-rail-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px;}
.sm-rail-tags .sm-tag{background:var(--warm-100);}
.sm-rail-cta{margin-top:22px;align-self:flex-start;display:inline-flex;align-items:center;gap:10px;padding:11px 22px;border-radius:var(--radius-pill);border:2px solid var(--ink-900);background:var(--ink-900);color:var(--warm-50);font-weight:700;font-size:14px;}
.sm-rail-cta:hover{color:#fff;filter:brightness(1.12);}
.sm-rail-prog{margin-top:22px;height:4px;background:var(--warm-200);border-radius:3px;overflow:hidden;}
.sm-rail-prog i{display:block;height:100%;width:0;border-radius:3px;}
.sm-rail-progtxt{margin-top:8px;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--warm-500);}
.sm-track-vp{position:relative;flex:1;min-height:0;height:100%;overflow:hidden;}
.sm-track{position:absolute;top:0;left:0;height:100%;display:flex;align-items:center;gap:clamp(28px,4vw,60px);padding:0 clamp(40px,6vw,90px);will-change:transform;}
.sm-block{flex:0 0 auto;height:100%;display:flex;flex-direction:column;justify-content:center;}
.sm-block-img{height:80%;width:auto;max-width:78vw;border-radius:var(--radius-lg);box-shadow:var(--shadow-md);display:block;object-fit:cover;background:var(--warm-100);}
.sm-block-photo{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md);background:var(--warm-100);background-size:cover;background-position:center;}
.sm-block-kicker{font-weight:700;font-size:13px;letter-spacing:.14em;text-transform:uppercase;}
.sm-block-text{width:min(72vw,520px);}
.sm-block-text.sm-post-content{max-height:82%;overflow-y:auto;padding-right:8px;}
.sm-post-content h1,.sm-post-content h2,.sm-post-content h3{margin:0 0 12px;font-size:clamp(1.5rem,2.6vw,2.2rem);line-height:1.1;color:var(--ink-900);}
.sm-post-content p{margin:0 0 14px;font-size:1.05rem;line-height:1.65;color:var(--warm-700);}
.sm-post-content p:last-child{margin-bottom:0;}
.sm-post-content ul,.sm-post-content ol{margin:0 0 14px;padding-left:1.2em;color:var(--warm-700);font-size:1.05rem;line-height:1.65;}
.sm-post-content a{color:var(--pink-600);text-decoration:underline;}
.sm-post-content blockquote{margin:0 0 14px;padding-left:16px;border-left:3px solid var(--pink-500);font-family:var(--font-display);font-weight:600;font-size:1.3rem;line-height:1.2;color:var(--ink-900);}
.sm-post-content img{border-radius:var(--radius-md);margin:10px 0;}
.sm-block-quote{margin:0;font-family:var(--font-display);font-weight:700;font-size:clamp(1.7rem,2.6vw,2.6rem);line-height:1.12;letter-spacing:-0.02em;color:var(--ink-900);}

/* ============ Sections (about / contact / archive) ============ */
.sm-section{max-width:1240px;margin:0 auto;padding:clamp(48px,7vw,96px) clamp(20px,5vw,64px);}
.sm-eyebrow{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:.8125rem;letter-spacing:.14em;text-transform:uppercase;color:var(--turq-600);}
.sm-eyebrow::before{content:"";width:28px;height:3px;background:var(--turq-500);border-radius:2px;}
.sm-h2{font-size:clamp(1.9rem,3.5vw,2.75rem);line-height:1.12;margin-top:14px;text-wrap:balance;}
.sm-lead{margin-top:16px;max-width:640px;font-size:1.15rem;color:var(--warm-700);}
.sm-about{background:var(--warm-0);border-top:1px solid var(--warm-200);border-bottom:1px solid var(--warm-200);position:relative;overflow:hidden;}
.sm-about-grid{display:grid;grid-template-columns:minmax(220px,340px) 1fr;gap:clamp(28px,5vw,64px);align-items:center;position:relative;z-index:1;}
.sm-about-photo{position:relative;aspect-ratio:3/4;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md);background:var(--warm-100);background-size:cover;background-position:center;}
/* Bullets (taxonomie sm_bullet) met spreekwolkje */
.sm-facts{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px;}
.sm-fact-wrap{position:relative;display:inline-flex;}
.sm-fact{appearance:none;-webkit-appearance:none;display:inline-flex;align-items:center;gap:9px;min-height:44px;
  padding:10px 17px;border-radius:var(--radius-pill);background:var(--warm-50);border:1px solid var(--warm-200);
  font-family:var(--font-text);font-weight:600;font-size:14px;line-height:1.2;color:var(--ink-800);text-align:left;}
.sm-fact::before{content:"";flex:none;width:5px;height:5px;border-radius:50%;background:var(--turq-500);}
.sm-fact--tip{cursor:help;-webkit-tap-highlight-color:transparent;
  transition:border-color var(--dur) var(--ease-out),background var(--dur) var(--ease-out);}
.sm-fact--tip:hover,.sm-fact--tip.is-open{border-color:var(--pink-500);background:var(--warm-0);}
.sm-fact--tip:focus-visible{outline:3px solid var(--turq-500);outline-offset:2px;border-color:var(--pink-500);}
.sm-tip{position:absolute;left:50%;bottom:calc(100% + 12px);z-index:30;width:max-content;max-width:min(300px,78vw);
  transform:translateX(calc(-50% + var(--tip-shift,0px))) translateY(6px);
  padding:12px 15px;border-radius:var(--radius-md);background:var(--pink-500);color:#fff;
  font-family:var(--font-text);font-weight:500;font-size:13.5px;line-height:1.45;text-align:left;white-space:normal;
  box-shadow:var(--shadow-md);opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity 160ms var(--ease-out),transform 160ms var(--ease-out),visibility 160ms;}
.sm-tip::after{content:"";position:absolute;top:100%;left:calc(50% - var(--tip-shift,0px));transform:translateX(-50%);
  width:0;height:0;border:7px solid transparent;border-top-color:var(--pink-500);}
.sm-fact--tip:hover .sm-tip,
.sm-fact--tip:focus-visible .sm-tip,
.sm-fact--tip.is-open .sm-tip{opacity:1;visibility:visible;transform:translateX(calc(-50% + var(--tip-shift,0px))) translateY(0);}
/* Wolkje onder de bullet als er bovenaan geen ruimte is (JS zet .sm-tip--below). */
.sm-fact-wrap .sm-tip--below{bottom:auto;top:calc(100% + 12px);}
.sm-fact-wrap .sm-tip--below::after{top:auto;bottom:100%;border-top-color:transparent;border-bottom-color:var(--pink-500);}

/* archive grid */
.sm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:24px;margin-top:40px;}
.sm-card{display:block;border-radius:var(--radius-lg);overflow:hidden;background:var(--warm-0);border:1px solid var(--warm-200);box-shadow:var(--shadow-sm);color:inherit;transition:transform var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out);}
.sm-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);color:inherit;}
.sm-card-img{aspect-ratio:3/4;background:var(--warm-100);background-size:cover;background-position:center;}
.sm-card-body{padding:20px;}
.sm-card-body h3{font-size:1.4rem;line-height:1.05;}
.sm-card-body p{margin:8px 0 0;font-size:.9375rem;color:var(--warm-700);}

/* contact */
.sm-contact{background:var(--ink-900);color:var(--warm-50);text-align:center;position:relative;overflow:hidden;}
.sm-contact .sm-iconfield{color:var(--pink-500);opacity:.3;}
.sm-contact .sm-inner{position:relative;z-index:1;max-width:1000px;margin:0 auto;padding:clamp(56px,8vw,120px) clamp(20px,5vw,64px);}
.sm-contact .sm-eyebrow{color:var(--turq-300);}
.sm-contact .sm-eyebrow::before{background:var(--turq-300);}
.sm-contact h2{color:#fff;font-size:clamp(2.4rem,6vw,4.5rem);line-height:.98;letter-spacing:-0.035em;text-wrap:balance;}
.sm-contact h2 .accent{color:var(--pink-500);}
.sm-contact-lead{margin:20px auto 0;max-width:520px;color:var(--warm-300);font-size:1.15rem;}
.sm-contact-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:34px;}

/* footer */
.sm-footer{background:var(--ink-900);border-top:1px solid rgba(255,255,255,.08);color:var(--warm-500);}
.sm-footer .sm-inner{max-width:1240px;margin:0 auto;padding:28px clamp(20px,5vw,64px);display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;}
.sm-footer .sm-brand{color:var(--warm-50);font-size:18px;}

/* single post story rail-back */
.sm-back{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:14px;color:var(--ink-900);margin-bottom:18px;}

/* ============ Mobile ============ */
@media (max-width:760px){
  .sm-menu{gap:14px;}
  .sm-menu a{font-size:14px;}
  .sm-nav{padding:12px 18px;}
  .sm-brand{font-size:18px;}
  .sm-hero{height:340vh;}
  .sm-hero-lines{left:22px;right:22px;top:18%;transform:none;max-width:none;}
  .sm-hero-photo{left:54%;width:76%;}
  .sm-project-sticky{flex-direction:column;}
  .sm-rail{flex:0 0 auto;height:auto;padding:74px 20px 14px;border-right:none;border-bottom:1px solid var(--warm-200);}
  .sm-rail-blurb,.sm-rail-prog,.sm-rail-progtxt{display:none;}
  .sm-rail h3{font-size:1.5rem;}
  .sm-rail-num{font-size:1.7rem;}
  .sm-glyph{font-size:46px;}
  .sm-about-grid{grid-template-columns:1fr;}
}

:root{--nav-h:48px;} /* nav is lager op mobiel */
@media (min-width:761px){:root{--nav-h:64px;}}

/* ============ Premium figures (per-image tekstpositie) ============ */
.sm-fig{flex:0 0 auto;height:100%;display:flex;align-items:center;justify-content:center;}
.sm-fig--left,.sm-fig--right{gap:clamp(20px,3vw,40px);}
.sm-fig--top,.sm-fig--bottom{flex-direction:column;gap:20px;}
.sm-fig-photo{flex:0 0 auto;display:flex;align-items:center;justify-content:center;}
.sm-fig-photo img{display:block;height:auto;border-radius:var(--radius-lg);box-shadow:var(--shadow-md);background:var(--warm-100);max-width:min(52vw,560px);}
.sm-fig--none .sm-fig-photo img{max-height:78vh;}
.sm-fig--left .sm-fig-photo img,.sm-fig--right .sm-fig-photo img{max-height:72vh;max-width:min(40vw,460px);}
.sm-fig--top .sm-fig-photo img,.sm-fig--bottom .sm-fig-photo img{max-height:56vh;max-width:min(46vw,520px);}
.sm-fig-cap{flex:0 0 auto;width:clamp(240px,22vw,340px);}
.sm-fig--top .sm-fig-cap,.sm-fig--bottom .sm-fig-cap{width:min(46vw,520px);}
.sm-fig-kicker{display:block;font-weight:700;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:10px;}
.sm-fig-title{margin:0;font-family:var(--font-display);font-weight:700;font-size:clamp(1.4rem,2vw,2rem);letter-spacing:-0.02em;line-height:1.08;color:var(--ink-900);}
.sm-fig-body{margin-top:14px;}
.sm-fig-body p{margin:0 0 12px;font-size:1.05rem;line-height:1.6;color:var(--warm-700);}
.sm-fig-body p:last-child{margin-bottom:0;}
.sm-fig-cap--quote{width:clamp(280px,30vw,460px);}
.sm-quote{margin:0;font-family:var(--font-display);font-weight:700;font-size:clamp(1.7rem,2.5vw,2.6rem);line-height:1.12;letter-spacing:-0.02em;color:var(--ink-900);text-wrap:balance;}
.sm-quote-by{margin:16px 0 0;font-weight:600;font-size:14.5px;color:var(--warm-700);}
/* Shoutout (sm_render_shoutout): 'card' in de premium-track, 'block' onder een item. */
.sm-shoutout-h{margin:0;font-family:var(--font-display);font-weight:700;letter-spacing:-0.02em;line-height:1.14;color:var(--ink-900);text-wrap:balance;}
.sm-shoutout--card{flex:0 0 auto;width:clamp(280px,26vw,380px);height:100%;display:flex;flex-direction:column;justify-content:center;gap:18px;}
.sm-shoutout--card .sm-shoutout-h{font-size:clamp(1.4rem,2.2vw,2.1rem);}
.sm-shoutout--card .sm-btn{align-self:flex-start;padding:13px 24px;font-size:14.5px;}
.sm-shoutout--block{margin:clamp(22px,3vw,34px) auto 0;max-width:1000px;display:flex;flex-wrap:wrap;align-items:center;
  gap:14px 28px;padding:22px clamp(20px,3vw,28px);border-radius:var(--radius-lg);background:var(--warm-50);border:1px solid var(--warm-200);}
.sm-shoutout--block .sm-fig-kicker{flex:0 0 100%;margin-bottom:0;}
.sm-shoutout--block .sm-shoutout-h{flex:1 1 300px;font-size:clamp(1.1rem,1.7vw,1.4rem);}
.sm-shoutout--block .sm-btn{padding:13px 24px;font-size:14.5px;white-space:nowrap;}

/* rail prev/next */
.sm-rail-actions{display:flex;align-items:center;gap:10px;margin-top:22px;flex-wrap:wrap;}
.sm-rail-actions .sm-rail-cta{margin-top:0;}
.sm-rail-nav{display:flex;gap:8px;}
.sm-step{width:42px;height:42px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;border:2px solid var(--warm-300);background:var(--warm-0);color:var(--ink-900);font-size:18px;line-height:1;transition:border-color var(--dur) var(--ease-out),transform 140ms var(--ease-out);}
.sm-step:hover{border-color:var(--ink-900);color:var(--ink-900);transform:translateY(-2px);}
.sm-step--off{opacity:.4;cursor:default;color:var(--warm-300);}

/* ============ Showcase Basic (rustig) ============ */
.sm-basic{background:var(--warm-0);border-top:1px solid var(--warm-200);}
.sm-basic-head{margin-bottom:clamp(40px,6vw,72px);}
.sm-basic-list{display:flex;flex-direction:column;gap:clamp(72px,10vw,140px);}
/* Eén rustige, linksuitgelijnde kolom: nummer + kopje → titel → samenvatting. */
.sm-basic-meta{display:flex;flex-direction:column;align-items:flex-start;text-align:left;margin-bottom:24px;}
.sm-basic-metahead{display:flex;align-items:center;gap:14px;margin-bottom:12px;}
.sm-basic-num{font-family:var(--font-display);font-weight:700;font-size:1.3rem;letter-spacing:-0.03em;line-height:1;}
.sm-basic-flag{font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase;}
.sm-basic-title{font-size:clamp(1.6rem,3.4vw,2.8rem);line-height:1.04;letter-spacing:-0.03em;margin:0;}
.sm-basic-blurb{margin:14px 0 0;max-width:560px;font-size:1.05rem;line-height:1.55;color:var(--warm-700);}
.sm-basic-photo{display:block;max-width:1000px;margin:0 auto;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md);transition:transform var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out);}
.sm-basic-photo:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);}
.sm-basic-photo img{width:100%;aspect-ratio:16/8;object-fit:cover;background:var(--warm-100);}
/* Link naar het volledige portfolio (masonry-pagina) */
.sm-portfolio-cta{text-align:center;padding:clamp(40px,6vw,72px) clamp(20px,5vw,64px);}
.sm-portfolio-cta--wide{margin-top:clamp(56px,7vw,90px);padding:clamp(32px,4vw,48px) 0 0;border-top:1px solid var(--warm-200);}
.sm-portfolio-cta p{margin:0 auto 20px;max-width:520px;font-size:1.05rem;color:var(--warm-700);}

/* ============ Single ============ */
.sm-single{background:var(--warm-0);}

/* ============ Solo-item-view: artikel ============ */
.sm-article{max-width:1040px;margin:0 auto;padding:clamp(40px,6vw,72px) clamp(20px,5vw,40px) clamp(56px,7vw,90px);}
.sm-article-head{max-width:760px;margin-bottom:clamp(32px,4.5vw,52px);}
.sm-article-head .sm-back{margin-bottom:6px;}
.sm-article-title{font-size:clamp(2.2rem,5vw,3.4rem);line-height:1;letter-spacing:-0.03em;text-wrap:pretty;}
.sm-article-lead{margin:20px 0 0;font-size:1.18rem;line-height:1.6;color:var(--warm-700);}

/* Blokken uit de editor (koppen, lijsten, citaten, media) binnen .sm-article */
.sm-article-content{max-width:760px;font-size:1.06rem;line-height:1.7;color:var(--warm-700);}
.sm-article-content > *{margin:0 0 1.1em;}
.sm-article-content > *:last-child{margin-bottom:0;}
.sm-article-content h2{font-size:clamp(1.5rem,2.6vw,2.05rem);line-height:1.1;margin:1.7em 0 .5em;}
.sm-article-content h3{font-size:clamp(1.25rem,2vw,1.6rem);line-height:1.15;margin:1.5em 0 .45em;}
.sm-article-content h4,.sm-article-content h5{font-family:var(--font-display);font-weight:700;font-size:1.08rem;color:var(--ink-900);margin:1.4em 0 .4em;}
.sm-article-content strong{color:var(--ink-900);}
.sm-article-content a{color:var(--pink-600);text-decoration:underline;text-underline-offset:2px;}
.sm-article-content a:hover{color:var(--pink-700);}
.sm-article-content ol{padding-left:1.3em;}
.sm-article-content ul{list-style:none;padding-left:0;}
.sm-article-content li{margin-bottom:.45em;}
.sm-article-content ul li{position:relative;padding-left:1.4em;}
.sm-article-content ul li::before{content:"";position:absolute;left:.2em;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--turq-500);}
.sm-article-content blockquote{margin:1.6em 0;padding-left:22px;border-left:3px solid var(--pink-500);
  font-family:var(--font-display);font-weight:600;font-size:clamp(1.2rem,2vw,1.5rem);line-height:1.28;color:var(--ink-900);}
.sm-article-content blockquote p{margin:0 0 .35em;color:inherit;}
.sm-article-content blockquote cite,.sm-article-content blockquote .wp-block-quote__citation{display:block;font-family:var(--font-text);font-weight:600;font-style:normal;font-size:.85rem;color:var(--warm-700);}
.sm-article-content figure,.sm-article-content .wp-block-image{margin:1.8em 0;}
.sm-article-content img{width:100%;height:auto;border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);}
.sm-article-content figcaption{margin-top:10px;font-size:.875rem;color:var(--warm-500);}
.sm-article-content hr,.sm-article-content .wp-block-separator{border:0;border-top:1px solid var(--warm-200);margin:2.2em 0;}
.sm-article-content .alignwide,.sm-article-content .alignfull{width:100%;max-width:none;}
.sm-article-content .wp-block-embed,.sm-article-content .wp-block-video{margin:1.8em 0;}
.sm-article-content table{width:100%;border-collapse:collapse;font-size:.95rem;}
.sm-article-content th,.sm-article-content td{padding:10px 12px;border-bottom:1px solid var(--warm-200);text-align:left;}

/* ============ Solo-item-view: beelden, elk in zijn eigen kader ============
   Geen aspect-ratio en nooit object-fit:cover: een staande afbeelding blijft staand,
   een liggende blijft liggend. Alleen de hoogte is begrensd (max-height + contain). */
.sm-article-body{margin-top:clamp(40px,5vw,64px);}
.sm-afig{margin:0 0 clamp(40px,6vw,76px);display:grid;gap:clamp(16px,2.2vw,28px);}
.sm-afig:last-child{margin-bottom:0;}
.sm-afig-photo{min-width:0;}
.sm-afig-photo img{width:100%;height:auto;max-height:80vh;object-fit:contain;object-position:center top;
  border-radius:var(--radius-lg);box-shadow:var(--shadow-md);background:var(--warm-100);}
.sm-afig-cap{margin:0;min-width:0;}
.sm-afig-title{margin:0;font-family:var(--font-display);font-weight:700;font-size:clamp(1.3rem,2.4vw,1.9rem);letter-spacing:-0.02em;line-height:1.1;color:var(--ink-900);}
.sm-afig--none,.sm-afig--top,.sm-afig--bottom{grid-template-columns:1fr;}
.sm-afig--top .sm-afig-cap,.sm-afig--bottom .sm-afig-cap{max-width:760px;}
/* 50/50, bovenaan uitgelijnd. Beeld staat altijd eerst in de DOM. */
.sm-afig--left,.sm-afig--right{grid-template-columns:1fr 1fr;align-items:start;gap:clamp(20px,3vw,40px);}
.sm-afig--left .sm-afig-photo{grid-area:1 / 2;}
.sm-afig--left .sm-afig-cap{grid-area:1 / 1;}
.sm-afig--right .sm-afig-photo{grid-area:1 / 1;}
.sm-afig--right .sm-afig-cap{grid-area:1 / 2;}
.sm-afig--left .sm-afig-photo img,.sm-afig--right .sm-afig-photo img{max-height:70vh;}
.sm-afig-cap--quote{max-width:760px;}
.sm-afig--top .sm-afig-cap--quote,.sm-afig--bottom .sm-afig-cap--quote{margin-inline:auto;text-align:center;}
@media (max-width:860px){
  .sm-afig--left,.sm-afig--right{grid-template-columns:1fr;}
  .sm-afig--left .sm-afig-photo,.sm-afig--right .sm-afig-photo{grid-area:1 / 1;}
  .sm-afig--left .sm-afig-cap,.sm-afig--right .sm-afig-cap{grid-area:2 / 1;}
  .sm-afig-photo img,.sm-afig--left .sm-afig-photo img,.sm-afig--right .sm-afig-photo img{max-height:72vh;}
}

.sm-article-foot{margin-top:clamp(40px,5vw,64px);padding-top:clamp(28px,3.5vw,40px);border-top:1px solid var(--warm-200);text-align:center;}
.sm-article-foot-h{margin:0 0 18px;font-family:var(--font-display);font-weight:700;font-size:clamp(1.3rem,2.2vw,1.8rem);letter-spacing:-0.02em;color:var(--ink-900);}
.sm-article-foot-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;}

/* ============ Portfolio overzicht (masonry + tagfilter) ============ */
.sm-portfolio{background:var(--warm-0);}
.sm-portfolio-head{max-width:760px;}
.sm-portfolio-intro p{margin:0 0 12px;}
.sm-portfolio-intro p:last-child{margin-bottom:0;}
.sm-filter{margin:clamp(26px,4vw,44px) 0 0;}
.sm-filter-set{margin:0;padding:0;border:0;}
.sm-filter-legend{padding:0;font-weight:700;font-size:.8125rem;letter-spacing:.14em;text-transform:uppercase;color:var(--warm-700);}
.sm-filter-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px;}
.sm-chip{position:relative;display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:9px 17px;
  border-radius:var(--radius-pill);background:var(--warm-50);border:1px solid var(--warm-200);
  font-weight:600;font-size:14px;color:var(--ink-800);cursor:pointer;-webkit-user-select:none;user-select:none;
  transition:background var(--dur) var(--ease-out),border-color var(--dur) var(--ease-out),color var(--dur) var(--ease-out);}
.sm-chip:hover{border-color:var(--ink-900);}
.sm-chip.is-active{background:var(--ink-900);border-color:var(--ink-900);color:var(--warm-50);}
.sm-chip.is-active .sm-chip-n{color:var(--warm-300);}
.sm-chip.is-focus{outline:3px solid var(--turq-500);outline-offset:2px;}
.sm-chip-box{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
.sm-chip-n{font-size:12.5px;font-variant-numeric:tabular-nums;color:var(--warm-700);}
.sm-filter-reset{margin-top:14px;background:none;border:0;padding:0;font-family:var(--font-text);font-weight:700;
  font-size:14px;color:var(--pink-600);text-decoration:underline;cursor:pointer;}
.sm-filter-reset:hover{color:var(--pink-700);}
.sm-filter-status{margin:14px 0 0;font-size:14px;font-weight:600;color:var(--warm-700);}
.sm-masonry{margin-top:clamp(26px,4vw,42px);display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));
  gap:clamp(18px,2.4vw,32px);align-items:start;}
.sm-masonry.is-masonry{grid-auto-rows:4px;align-items:stretch;}
.sm-mas-item{min-width:0;transition:opacity 170ms var(--ease-out),transform 170ms var(--ease-out);}
.sm-mas-item.is-out{opacity:0;transform:scale(.985);}
.sm-mas-item.is-hidden{display:none;}
.sm-mas-inner{display:block;color:inherit;background:var(--warm-0);border:1px solid var(--warm-200);
  border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);
  transition:transform var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out);}
.sm-mas-inner:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);color:inherit;}
.sm-mas-photo{background:var(--warm-100);}
/* Beeldverhouding blijft intact: alleen width:100% + height:auto. */
.sm-mas-img{width:100%;height:auto;display:block;}
.sm-mas-body{padding:18px 20px 20px;}
.sm-mas-title{margin:0;font-family:var(--font-display);font-weight:700;font-size:1.25rem;line-height:1.1;letter-spacing:-0.02em;color:var(--ink-900);}
.sm-mas-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px;}
.sm-mas-tags .sm-tag{font-size:11.5px;padding:4px 11px;}
.sm-masonry-empty{margin-top:clamp(26px,4vw,42px);padding:clamp(32px,5vw,56px) clamp(20px,4vw,40px);
  border:1px dashed var(--warm-300);border-radius:var(--radius-lg);text-align:center;color:var(--warm-700);}
.sm-masonry-empty-h{margin:0 0 6px;font-family:var(--font-display);font-weight:700;font-size:1.4rem;letter-spacing:-0.02em;color:var(--ink-900);}
.sm-masonry-empty p{margin:0 0 18px;}
.sm-masonry-empty .sm-btn{padding:13px 24px;font-size:14.5px;}

/* ============ Footer (making-of) ============ */
.sm-footer-inner{max-width:1240px;margin:0 auto;padding:clamp(48px,6vw,80px) clamp(20px,5vw,64px);}
.sm-footer-story{max-width:720px;}
.sm-footer-story .sm-brand{color:var(--warm-50);font-size:22px;display:inline-block;}
.sm-footer-label{display:block;margin:14px 0 0;font-weight:700;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--turq-300);}
.sm-footer-story p{margin:14px 0 0;font-size:1.02rem;line-height:1.65;color:var(--warm-300);}
.sm-footer-bar{margin-top:clamp(32px,4vw,52px);padding-top:24px;border-top:1px solid rgba(255,255,255,.08);display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;font-size:13px;}

/* ============ Mobile (nieuwe secties) ============ */
@media (max-width:760px){
  .sm-fig--left,.sm-fig--right{flex-direction:column;gap:14px;}
  .sm-fig-cap,.sm-fig--top .sm-fig-cap,.sm-fig--bottom .sm-fig-cap{width:min(74vw,360px);}
  .sm-fig--none .sm-fig-photo img{max-height:58vh;}
  .sm-fig--left .sm-fig-photo img,.sm-fig--right .sm-fig-photo img,.sm-fig--top .sm-fig-photo img,.sm-fig--bottom .sm-fig-photo img{max-height:42vh;max-width:74vw;}
  .sm-basic-photo img{aspect-ratio:4/3;}
  .sm-rail-actions{margin-top:14px;}
  .sm-shoutout--card{width:74vw;}
  .sm-shoutout--block{gap:12px 18px;padding:18px 18px;}
  .sm-shoutout--block .sm-btn{width:100%;}
  .sm-masonry{gap:16px;}
  .sm-mas-body{padding:15px 16px 17px;}
  .sm-mas-title{font-size:1.12rem;}
  .sm-article-foot-actions .sm-btn{width:100%;}
  .sm-tip{max-width:min(260px,80vw);}
}