/* lazybru blog styles. Tokens mirror the :root block in /index.html — keep them in sync (see DESIGN.md). */
:root{
  --navy:#031b36; --navy-2:#0b2a4d; --ink:#020f21; --cream:#fdffee; --paper:#f1f3ea; --white:#ffffff;
  --red:#ff2c17; --red-ink:#c41a08; --pink:#ffaaf6; --aqua:#b6ffff;
  --navy-soft:rgba(3,27,54,.74); --cream-soft:rgba(253,255,238,.74);
  --sans:"Schibsted Grotesk",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --serif:"Source Serif 4","Iowan Old Style",Georgia,"Times New Roman",serif;
  --mono:"Fragment Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --wrap:1360px; --gutter:clamp(18px,3vw,40px);
  --ease:cubic-bezier(.16,1,.3,1);
  --grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scrollbar-color:var(--navy) var(--cream);background:var(--navy)}
html,body{overflow-x:clip}
body{margin:0;background:var(--cream);color:var(--navy);font:400 17px/1.55 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:var(--red);color:var(--navy)}
h1,h2,h3,p,ol,ul,figure{margin:0}
a{color:inherit;text-underline-offset:.22em;text-decoration-thickness:1px}
img,svg{display:block;max-width:100%}
h1,h2,h3{text-wrap:balance}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.skip{position:fixed;left:-999px;top:12px;z-index:200;background:var(--cream);color:var(--navy);padding:10px 16px;border-radius:999px;font-weight:600}
.skip:focus{left:12px}
:focus-visible{outline:2px solid var(--focus,var(--navy));outline-offset:3px;border-radius:6px}
.dark{--focus:var(--aqua);background:var(--navy);color:var(--cream);position:relative;isolation:isolate;overflow:hidden}
.grain::after{content:"";position:absolute;inset:0;background:var(--grain);opacity:.16;pointer-events:none;z-index:-1;animation:grain 9s steps(6) infinite}
@keyframes grain{to{background-position:180px 120px}}
.glow{position:absolute;width:62vw;height:62vw;right:-26vw;top:-34vw;border-radius:50%;filter:blur(70px);z-index:-2;pointer-events:none;background:radial-gradient(closest-side,rgba(255,44,23,.38),transparent)}
.display{font:800 clamp(44px,6.6vw,96px)/.98 var(--sans);letter-spacing:-.035em}
.display .l{display:block}
.red{color:var(--red)}
.lede{font-size:clamp(18px,1.45vw,21px);line-height:1.5;max-width:52ch}

/* header */
.top{position:absolute;inset:0 0 auto;z-index:20;padding-top:env(safe-area-inset-top,0px);color:var(--cream);--focus:var(--aqua)}
.top-in{display:flex;align-items:center;justify-content:space-between;gap:16px;height:96px}
.brand{font:800 30px/1 var(--sans);letter-spacing:-.045em;text-decoration:none}
.brand i,.foot-word i{font-style:normal}
.brand i{color:var(--red)}
.top-nav{display:flex;align-items:center;gap:8px 26px;font-size:15px;font-weight:600}
.top-nav a{text-decoration:none;color:var(--cream-soft)}
.top-nav a:hover,.top-nav a[aria-current]{color:var(--cream)}
.top-nav .top-cta{color:var(--navy);background:var(--cream);padding:11px 18px;border-radius:999px}
.top-nav .top-cta:hover{background:var(--white);color:var(--navy)}
@media (max-width:560px){.top-in{height:80px}.brand{font-size:26px}}

/* page hero */
.hero{padding:clamp(150px,16vw,220px) 0 clamp(80px,9vw,120px)}
.post-hero .hero-in,.post-body .wrap{max-width:calc(1000px + 2 * var(--gutter))}
.hero .lede{margin-top:24px;color:var(--cream)}
.hero .lede a{color:var(--cream);text-decoration-color:var(--red)}
.back{display:inline-flex;align-items:center;gap:8px;color:var(--cream-soft);font-weight:600;font-size:15px;text-decoration:none;margin-bottom:28px}
.back svg{width:16px;height:16px;transition:transform .4s var(--ease)}
.back:hover{color:var(--cream)}
.back:hover svg{transform:translateX(-4px)}
.post-title{font:800 clamp(38px,5.2vw,76px)/1.02 var(--sans);letter-spacing:-.035em;max-width:20ch}
.meta{margin-top:28px;font:13px/1 var(--mono);color:var(--cream-soft)}
.draft{display:inline-block;font:12px/1 var(--mono);padding:5px 8px;border-radius:4px;background:var(--pink);color:var(--navy)}

/* post list */
.posts{padding:clamp(56px,7vw,96px) 0 clamp(96px,11vw,150px)}
.post-list{list-style:none;padding:0;border-bottom:1px solid rgba(3,27,54,.16)}
.post-list li{border-top:1px solid rgba(3,27,54,.16)}
.post-row{display:grid;grid-template-columns:150px minmax(0,1fr) 44px;gap:clamp(18px,4vw,56px);align-items:start;padding:34px 0;text-decoration:none}
.post-row .when{font:13px/1.9 var(--mono);color:var(--red-ink)}
.post-row .t{display:block;font:800 clamp(26px,2.6vw,38px)/1.05 var(--sans);letter-spacing:-.03em;transition:color .2s}
.post-row .d{display:block;margin-top:12px;font:400 19px/1.45 var(--serif);color:var(--navy-soft);max-width:60ch}
.post-row .draft{margin-top:12px}
.post-row .go{width:44px;height:44px;border-radius:8px;background:rgba(3,27,54,.07);display:grid;place-items:center;transition:background .25s,color .25s}
.post-row .go svg{width:20px;height:20px;transition:transform .4s var(--ease)}
.post-row:hover .t{color:var(--red-ink)}
.post-row:hover .go{background:var(--red);color:var(--navy)}
.post-row:hover .go svg{transform:translateX(3px)}
.empty{font:400 22px/1.45 var(--serif);max-width:44ch}
.empty a{text-decoration-color:var(--red)}
@media (max-width:700px){.post-row{grid-template-columns:1fr 44px}.post-row .when{grid-column:1/-1}.post-row .what{grid-column:1}}

/* article body */
.post-body{padding:clamp(56px,7vw,96px) 0 clamp(96px,11vw,150px)}
.prose{max-width:68ch;font:400 20px/1.65 var(--serif);color:var(--navy)}
.prose>*+*{margin-top:1.1em}
.prose h2{margin-top:2.2em;font:800 clamp(28px,2.6vw,36px)/1.1 var(--sans);letter-spacing:-.03em}
.prose h3{margin-top:1.8em;font:700 clamp(22px,2vw,26px)/1.2 var(--sans);letter-spacing:-.02em}
.prose h2+*,.prose h3+*{margin-top:.6em}
.prose a{color:var(--red-ink);text-decoration-thickness:1.5px}
.prose a:hover{color:var(--navy)}
.prose strong{font-weight:600}
.prose ul,.prose ol{padding-left:1.3em}
.prose li+li{margin-top:.4em}
.prose li::marker{color:var(--red-ink)}
.prose blockquote{position:relative;margin:2em 0;padding-left:1.6em;font-style:italic;font-size:1.15em;line-height:1.45}
.prose blockquote::before{content:"\201C";position:absolute;left:-.05em;top:-.28em;font:800 2.6em/1 var(--sans);color:var(--red)}
.prose blockquote p+p{margin-top:.8em}
.prose code{font:.84em var(--mono);background:var(--paper);padding:.12em .36em;border-radius:4px}
.prose pre{background:var(--navy);color:var(--cream);padding:20px 22px;border-radius:12px;overflow-x:auto;font-size:15px;line-height:1.55}
.prose pre code{background:none;padding:0;font-size:inherit}
.prose img{border-radius:12px;margin-inline:auto}
.prose figcaption{margin-top:10px;font:13px/1.4 var(--mono);color:var(--navy-soft);text-align:center}
/* figures from _config/markdown-figures.js: inlined SVG diagrams sit on a paper card */
.prose .fig{margin-block:2.2em}
.prose .fig-art{width:100%;height:auto;padding:clamp(16px,4vw,36px);background:var(--paper);border-radius:16px;box-shadow:inset 0 0 0 1px rgba(3,27,54,.1)}
.prose .fig figcaption{margin-top:12px;text-align:left;max-width:60ch}
@media (max-width:560px){.prose .fig-art{width:calc(100% + 2 * var(--gutter));max-width:none;margin-inline:calc(-1 * var(--gutter));padding:16px 12px;border-radius:0}}
.prose hr{border:0;height:1px;background:rgba(3,27,54,.16);margin:3em 0}
.prose table{display:block;overflow-x:auto;border-collapse:collapse;font:16px/1.45 var(--sans)}
.prose th,.prose td{padding:10px 14px;border-bottom:1px solid rgba(3,27,54,.14);text-align:left}
.prose th{font-weight:700}

/* closing cta (mirrors the landing page) */
.cta{text-align:center;padding:clamp(120px,14vw,190px) var(--gutter)}
.cta p{margin:26px auto 0;font-size:clamp(18px,1.45vw,21px);line-height:1.5;max-width:46ch}
.cta .actions{margin-top:38px;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:14px 30px}
.pill{display:inline-flex;align-items:center;gap:12px;padding:18px 28px;border-radius:999px;background:var(--cream);color:var(--navy);text-decoration:none;font:600 17px/1 var(--sans);box-shadow:0 14px 30px -16px rgba(255,44,23,.6);transition:background .25s,box-shadow .25s,transform .4s var(--ease)}
.pill svg{width:18px;height:18px;transition:transform .4s var(--ease)}
.pill:hover{background:var(--white);transform:translateY(-2px);box-shadow:0 18px 34px -16px rgba(255,44,23,.75)}
.pill:hover svg{transform:translateX(4px)}
.quiet{color:var(--cream-soft);font-weight:500;text-decoration:none}
.quiet:hover{color:var(--cream)}

/* footer (mirrors the landing page) */
.foot{background:var(--cream);color:var(--navy);padding:clamp(80px,9vw,120px) 0 calc(28px + env(safe-area-inset-bottom,0px))}
.foot-word{font:800 clamp(78px,17vw,250px)/.82 var(--sans);letter-spacing:-.035em;color:var(--red);text-decoration:none;display:block;width:max-content;max-width:100%}
.foot-word i{color:var(--navy)}
.foot-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;margin-top:clamp(56px,7vw,96px)}
.foot-cta{font:700 22px/1.2 var(--sans);letter-spacing:-.015em}
.foot-mail{display:inline-block;margin-top:10px;font:italic 400 clamp(26px,2.6vw,36px)/1.2 var(--serif);color:var(--navy);text-decoration-color:var(--red);text-decoration-thickness:2px}
.foot-mail:hover{color:var(--red-ink)}
.foot-nav{display:grid;grid-template-columns:repeat(2,max-content);gap:12px 64px;align-content:start}
.foot-nav a{font-weight:600;text-decoration:none}
.foot-nav a:hover{text-decoration:underline}
.legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;margin-top:clamp(64px,8vw,110px);padding-top:22px;border-top:1px solid rgba(3,27,54,.14);font-size:14px;color:var(--navy-soft)}
.legal a{color:inherit}
@media (max-width:760px){.foot-grid{grid-template-columns:1fr}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}