/* BLURR — single-image templates (1080×1350)
   Brand tokens 1:1 uit carousel-studio/templates-v2/_shared/tokens.css
   Fonts: Bricolage Grotesque (display) · Geist (body) · Geist Mono (labels) */

:root{
  --ink:#0a0a0a;          /* off-black, nooit pure #000 */
  --ink-2:#141210;        /* iets warmer charcoal voor panelen */
  --paper:#ffffff;
  --accent:#ecf86e;       /* BLURR lime — alleen als fill of op donker */
  --t-strong:#ffffff;
  --t-body:#e8e8e8;
  --t-dim:#aaaaaa;
  --t-faint:#999999;
  --line:rgba(255,255,255,0.16);
}

*{box-sizing:border-box;margin:0;padding:0}

/* ============ POST CANVAS ============ */
.post{
  width:1080px;height:1350px;position:relative;overflow:hidden;
  font-family:'Geist',system-ui,sans-serif;color:var(--t-strong);
  background:var(--ink);
}
.post .photo{position:absolute;inset:0;background-size:cover;background-position:center}
.post .photo.warm{filter:saturate(.82) contrast(1.06) brightness(.9)}
.post .photo.deep{filter:saturate(.7) contrast(1.1) brightness(.7)}
.grad-bottom{position:absolute;inset:0;background:linear-gradient(180deg,transparent 0%,rgba(10,10,10,.25) 42%,rgba(10,10,10,.92) 100%)}
.grad-full{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,10,.45) 0%,rgba(10,10,10,.62) 48%,rgba(10,10,10,.94) 100%)}
.veil{position:absolute;inset:0;background:rgba(10,10,10,.74)}
.content{position:absolute;inset:72px;display:flex;flex-direction:column;z-index:2}

/* shared bits */
.wm-logo{display:block;width:auto;height:32px}   /* echte BLURR wordmark (SVG) — height per template overschreven */
.lbl{font-family:'Geist Mono',monospace;font-size:22px;letter-spacing:.14em;text-transform:uppercase;color:var(--t-dim)}
.lbl.acc{color:var(--accent)}
.meta{font-family:'Geist Mono',monospace;font-size:20px;letter-spacing:.12em;text-transform:uppercase;color:var(--t-faint)}
.brand-wm{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;letter-spacing:-.02em}
.h{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;line-height:.96;letter-spacing:-.03em}
.body{font-family:'Geist',sans-serif;font-size:28px;line-height:1.42;color:var(--t-body)}

/* ============ S1 — STATEMENT ============ */
.s1 .content{justify-content:flex-end}
.s1 .eyebrow{font-family:'Geist Mono',monospace;font-size:22px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:26px}
.s1 .h{font-size:108px;margin-bottom:30px}
.s1 .sub{font-family:'Geist',sans-serif;font-size:30px;line-height:1.4;color:var(--t-body);max-width:760px;margin-bottom:40px}
.s1 .foot{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding-top:24px}
.s1 .foot .b{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:30px}

/* ============ S2 — QUOTE ============ */
.s2 .content{justify-content:space-between}
.s2 .top{display:flex;justify-content:space-between;align-items:center}
.s2 .qmark{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:200px;line-height:.6;color:var(--accent);height:90px}
.s2 .quote{font-family:'Bricolage Grotesque',sans-serif;font-weight:500;font-size:66px;line-height:1.12;letter-spacing:-.02em;color:#fff;max-width:880px}
.s2 .who{display:flex;align-items:center;gap:20px}
.s2 .who .ln{width:64px;height:2px;background:var(--accent)}
.s2 .who .nm{font-family:'Geist Mono',monospace;font-size:22px;letter-spacing:.12em;text-transform:uppercase;color:var(--t-dim)}

/* ============ S3 — BIG STAT ============ */
.s3 .content{justify-content:space-between}
.s3 .top{display:flex;justify-content:space-between;align-items:center}
.s3 .num{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:380px;line-height:.82;letter-spacing:-.05em;color:var(--accent)}
.s3 .capn{font-family:'Geist Mono',monospace;font-size:30px;letter-spacing:.08em;text-transform:uppercase;color:#fff;margin-top:14px}
.s3 .ctx{font-family:'Geist',sans-serif;font-size:30px;line-height:1.4;color:var(--t-body);max-width:720px;margin-top:30px}

/* ============ S4 — SPLIT EDITORIAL ============ */
.s4{display:flex;flex-direction:column}
.s4 .photo-wrap{position:relative;height:62%;width:100%;overflow:hidden}
.s4 .photo-wrap .photo{position:absolute;inset:0}
.s4 .panel{height:38%;background:var(--ink);padding:64px 72px;display:flex;flex-direction:column;justify-content:center}
.s4 .panel .eyebrow{font-family:'Geist Mono',monospace;font-size:22px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:22px}
.s4 .panel .h{font-size:74px;margin-bottom:22px}
.s4 .panel .sub{font-family:'Geist',sans-serif;font-size:28px;line-height:1.4;color:var(--t-body);max-width:820px}
.s4 .panel .foot{margin-top:auto;display:flex;justify-content:space-between;align-items:center;padding-top:26px}
.s4 .panel .foot .b{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:26px}

/* ============ S5 — LIME BLOCK OVERLAY ============ */
.s5 .tab{position:absolute;top:72px;left:72px;z-index:3;font-family:'Geist Mono',monospace;font-size:22px;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:rgba(10,10,10,.55);padding:12px 20px;backdrop-filter:blur(4px)}
.s5 .block{position:absolute;left:0;bottom:0;z-index:3;background:var(--accent);color:var(--ink);padding:64px 72px 60px;max-width:840px}
.s5 .block .h{font-size:72px;color:var(--ink);margin-bottom:24px}
.s5 .block .row{display:flex;justify-content:space-between;align-items:center}
.s5 .block .row .s{font-family:'Geist',sans-serif;font-size:26px;font-weight:600;color:var(--ink)}
.s5 .block .row .arw{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:64px;line-height:1;color:var(--ink)}

/* ============ S6 — MAGAZINE COVER ============ */
.s6 .masthead{position:absolute;top:64px;left:72px;right:72px;z-index:3;display:flex;justify-content:space-between;align-items:flex-start}
.s6 .masthead .wm{font-size:58px;color:#fff;letter-spacing:-.03em}
.s6 .masthead .iss{font-family:'Geist Mono',monospace;font-size:20px;letter-spacing:.12em;text-transform:uppercase;color:#fff;text-align:right;line-height:1.5}
.s6 .cover{position:absolute;left:72px;bottom:72px;right:72px;z-index:3}
.s6 .cover .lead{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:92px;line-height:.95;letter-spacing:-.03em;color:#fff;margin-bottom:34px}
.s6 .cover .line{display:flex;align-items:baseline;gap:18px;padding:16px 0;border-top:1px solid var(--line)}
.s6 .cover .line .tk{color:var(--accent);font-family:'Bricolage Grotesque';font-weight:800;font-size:26px}
.s6 .cover .line .tx{font-family:'Geist',sans-serif;font-size:30px;color:var(--t-body)}

/* ============ S7 — FRAMED PRINT ============ */
.s7{background:var(--ink-2)}
.s7 .top{position:absolute;top:64px;left:72px;right:72px;display:flex;justify-content:space-between;z-index:2}
.s7 .print{position:absolute;top:150px;left:72px;right:72px;height:720px;overflow:hidden}
.s7 .print .photo{position:absolute;inset:0}
.s7 .below{position:absolute;left:72px;right:72px;bottom:80px}
.s7 .below .capx{font-family:'Geist Mono',monospace;font-size:22px;letter-spacing:.1em;text-transform:uppercase;color:var(--t-faint);margin-bottom:24px}
.s7 .below .h{font-size:64px;color:#fff;line-height:1.0}

/* ============ S8 — DUOTONE BAND ============ */
.s8{display:flex;flex-direction:column}
.s8 .photo-wrap{position:relative;height:54%;width:100%;overflow:hidden}
.s8 .photo-wrap .photo{position:absolute;inset:0}
.s8 .hairline{height:5px;background:var(--accent)}
.s8 .panel{flex:1;background:var(--ink);padding:60px 72px;display:flex;flex-direction:column;justify-content:center}
.s8 .panel .eyebrow{font-family:'Geist Mono',monospace;font-size:22px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:24px}
.s8 .panel .h{font-size:72px;margin-bottom:34px}
.s8 .panel .stats{display:flex;gap:18px;flex-wrap:wrap}
.s8 .panel .stats span{font-family:'Geist Mono',monospace;font-size:24px;letter-spacing:.04em;color:#fff}
.s8 .panel .stats span b{color:var(--accent);font-weight:500}

/* ============ S9 — CTA / ACTION ============ */
.s9 .content{justify-content:flex-end}
.s9 .eyebrow{font-family:'Geist Mono',monospace;font-size:22px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:26px}
.s9 .h{font-size:104px;margin-bottom:44px}
.s9 .h em{font-style:italic;color:var(--accent);font-weight:800}
.s9 .actions{display:flex;flex-direction:column;gap:20px;margin-bottom:44px}
.s9 .actions .a{display:flex;align-items:center;gap:22px;font-family:'Geist',sans-serif;font-size:30px;color:#fff}
.s9 .actions .a .ic{width:46px;height:46px;display:flex;align-items:center;justify-content:center;border:1.5px solid var(--accent);border-radius:50%;color:var(--accent);font-family:'Geist Mono';font-size:24px;flex:none}
.s9 .foot{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding-top:24px}
.s9 .foot .b{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:30px}
.s9 .foot .u{font-family:'Geist Mono',monospace;font-size:20px;letter-spacing:.1em;color:var(--t-dim)}