/* ============================================================================
   DolFin site chrome. One stylesheet for every page that is not the landing.

   These pages each carried their own ~400-line inline stylesheet and each
   pulled Bricolage Grotesque and Inter from fonts.googleapis.com. That is a
   third-party request on the page that promises privacy, and German courts have
   ruled embedded Google Fonts a GDPR violation, which is the exact position
   PRODUCT.md states and the landing page already honours. This file replaces
   all of it with the self-hosted Inter the landing uses.

   Markup on those pages is untouched. This restyles the class names they
   already use, so no legal text, no Impressum section and no blog publishing
   contract moves.
   ========================================================================== */

@font-face{font-family:Inter;src:url("/assets/fonts/Inter-latin-var.woff2") format("woff2-variations");
  font-weight:100 900;font-display:swap;font-style:normal}

:root{
  --page:#FCFBF8; --ink:#071A31; --ink-2:#4A5766; --ink-3:#7C8794;
  --line:#E6E3DC; --card:#FFFFFF; --panel:#F4F2EC; --accent:#3E7BFA;
  --wrap:1280px; --read:760px;
  --r-sm:8px; --r-md:12px; --r-lg:20px; --r-xl:28px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--page);color:var(--ink);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{margin:0 0 .5em;font-weight:500;letter-spacing:-.02em;line-height:1.2}
h1{font-size:clamp(30px,4.4vw,46px);letter-spacing:-1px}
h2{font-size:clamp(22px,2.6vw,28px)}
h3{font-size:19px}
p,ul,ol{margin:0 0 1.1em}
/* same wrapping rules as the landing: balance evens a heading's lines,
   pretty stops body copy stranding a word on its last line. */
h1,h2,h3,h4{text-wrap:balance}
p,li,figcaption,dd{text-wrap:pretty}
/* the ring is the darkest ink, not the accent: it reads the same on the page
   ground, on a card and on a tinted panel, and it matches the landing. */
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

.skip-link{position:absolute;left:-9999px;top:0;z-index:99;background:var(--ink);
  color:#fff;padding:12px 20px;font-size:14px;text-decoration:none}
.skip-link:focus{left:0;top:0}

/* ---- header --------------------------------------------------------------- */
.site-nav{position:sticky;top:0;z-index:50;background:rgba(252,251,248,.88);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line)}
/* the per-page script toggles this on scroll; without a rule it did nothing */
.site-nav.is-scrolled{box-shadow:0 1px 0 var(--line),0 8px 28px rgba(7,26,49,.05)}
/* header chrome is identical to the landing's, so the nav does not twitch
   when you move between a blog post and the front page. */
.nav-inner{max-width:var(--wrap);margin:0 auto;padding:14px 24px;
  display:flex;align-items:center;gap:28px}
.nav-brand{display:inline-flex;align-items:center;gap:9px;font-size:22px;font-weight:500;
  letter-spacing:-.03em;text-decoration:none;flex:none}
.nav-brand img{width:32px;height:32px}
.nav-links{display:flex;align-items:center;gap:4px;flex:1}
.nav-links a{padding:9px 14px;border-radius:var(--r-sm);font-size:15px;font-weight:500;
  text-decoration:none;transition:background .16s ease}
.nav-links a:hover{background:var(--panel)}
.nav-cta{display:flex;align-items:center;gap:10px;margin-left:auto}
.nav-store{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 18px;
  background:var(--ink);color:#fff;border-radius:var(--r-sm);font-size:15px;font-weight:500;
  text-decoration:none;transition:background .16s ease}
.nav-store:hover{background:#0F2C4C}
.nav-store svg{width:17px;height:17px;flex:none}
.nav-toggle{display:none;width:42px;height:42px;border:1px solid var(--line);background:var(--card);
  border-radius:var(--r-sm);cursor:pointer;padding:0;flex-direction:column;
  align-items:center;justify-content:center;gap:4px}
.nav-toggle span{display:block;width:16px;height:1.6px;background:var(--ink);border-radius:2px;
  transition:transform .2s ease,opacity .2s ease}

/* ---- page shell ----------------------------------------------------------- */
.page{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 24px}
main.page,article.page{padding-top:56px;padding-bottom:72px}

/* The blog pages wrap in .article / .blog-wrap rather than .page, and neither
   was ever a container, so the column sat flush against x=0 while its children
   capped at the reading width. Give them the same shell, then centre the
   reading column inside it instead of letting it hang on the left. */
main.article,main.blog-wrap,main.card,body>main:not([class]){
  width:100%;max-width:var(--wrap);margin:0 auto;padding:48px 24px 72px}
main.article>*,main.blog-wrap>*,body>main:not([class])>*{
  max-width:var(--read);margin-left:auto;margin-right:auto}
main.blog-wrap>.post-grid{max-width:1040px}
.blog-hero{margin-bottom:8px}
.blog-hero h1{margin-bottom:.3em}
.blog-hero p{color:var(--ink-2);font-size:19px}

/* small utility pages */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:26px 28px;margin:0 0 20px}
.card :last-child{margin-bottom:0}
.notice{background:var(--card);border:1px solid var(--line);border-left:3px solid #C9700F;
  border-radius:0 var(--r-md) var(--r-md) 0;padding:20px 24px;margin:0 0 24px}
.notice :last-child{margin-bottom:0}
main.page>h1:first-child,.legal-title{margin-bottom:.35em}
.meta{color:var(--ink-3);font-size:14px}

/* ---- long-form reading ---------------------------------------------------- */
.policy-section,.prose,.article>*,.faq{max-width:var(--read)}
.policy-section{margin:0 0 40px}
.policy-section h2{padding-top:28px;border-top:1px solid var(--line);margin-bottom:.6em}
.policy-section h3{margin-top:1.6em}
.policy-section p,.policy-section li{color:var(--ink-2)}
.policy-section ul,.policy-section ol{padding-left:1.25em}
.policy-section li{margin-bottom:.5em}
.policy-section a{color:var(--ink);text-decoration:underline;
  text-decoration-color:var(--accent);text-underline-offset:3px}
.answer-lead{color:var(--ink);font-weight:500}
.warning-box,.info-box{border:1px solid var(--line);border-left:3px solid var(--accent);
  background:var(--card);border-radius:0 var(--r-md) var(--r-md) 0;
  padding:20px 24px;margin:0 0 28px}
.warning-box{border-left-color:#C9700F}
.warning-box p:last-child,.info-box p:last-child{margin-bottom:0}
table{width:100%;border-collapse:collapse;margin:0 0 28px;font-size:15px}
th,td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-weight:500;color:var(--ink);background:var(--panel)}
td{color:var(--ink-2)}
code{background:var(--panel);padding:2px 6px;border-radius:5px;font-size:.9em}

/* ---- faq accordions and blocks -------------------------------------------- */
.faq-item{border-bottom:1px solid var(--line);padding:18px 0}
.faq-item:first-of-type{border-top:1px solid var(--line)}
.faq-item h3,.faq-item summary{font-size:17px;font-weight:500;margin-bottom:.4em;cursor:pointer}
.faq-item p:last-child{margin-bottom:0}

/* ---- blog index ----------------------------------------------------------- */
.post-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin:40px 0 0}
.post-card{display:flex;flex-direction:column;gap:10px;padding:26px;text-decoration:none;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  transition:transform .22s cubic-bezier(.2,.7,.2,1),box-shadow .22s ease,border-color .22s ease}
.post-card:hover{transform:translateY(-3px);border-color:#DCD7CB;
  box-shadow:0 10px 26px rgba(7,26,49,.07)}
.post-card h2{font-size:20px;margin:0}
.post-card p{color:var(--ink-2);font-size:15px;margin:0}
.pill{align-self:flex-start;background:var(--panel);color:var(--ink-3);border-radius:20px;
  padding:4px 11px;font-size:12px;font-weight:500;letter-spacing:.01em}
.more{margin-top:auto;color:var(--ink);font-weight:500;font-size:15px}
.read{color:var(--ink-3);font-size:13px}

/* ---- blog post ------------------------------------------------------------ */
.breadcrumb{font-size:14px;color:var(--ink-3);margin:0 0 24px}
.breadcrumb a{color:var(--ink-3);text-decoration:none}
.breadcrumb a:hover{color:var(--ink)}
.post-hero{max-width:var(--read);margin:0 0 40px}
.post-eyebrow{color:var(--ink-3);font-size:13px;font-weight:500;margin-bottom:14px}
.post-lead{font-size:20px;line-height:1.5;color:var(--ink-2)}
.post-meta{display:flex;align-items:center;gap:12px;color:var(--ink-3);font-size:14px;
  padding-top:18px;border-top:1px solid var(--line)}
/* An SVG with no intrinsic size stretches to its container once the old inline
   rules are gone, so every chrome image gets an explicit box. */
.post-meta img{width:38px;height:38px;border-radius:50%;flex:none}
.post-meta .who{color:var(--ink);font-weight:500}
img.mascot{width:84px;height:84px;margin-bottom:18px}
.hero-islands{display:none}   /* decorative art from the old design */
.prose h2{padding-top:26px;margin-top:36px;border-top:1px solid var(--line)}
.prose li{margin-bottom:.5em}
.prose a{color:var(--ink);text-decoration:underline;
  text-decoration-color:var(--accent);text-underline-offset:3px}
.prose blockquote{margin:0 0 24px;padding:18px 24px;background:var(--card);
  border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:0 var(--r-md) var(--r-md) 0;color:var(--ink)}
.author{display:flex;align-items:center;gap:14px;max-width:var(--read);
  margin:48px 0 0;padding:22px 24px;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r-lg)}
.author img{width:46px;height:46px;border-radius:50%;flex:none}
.author .name{font-weight:500}
.author .bio,.bio{color:var(--ink-2);font-size:15px;margin:0}
.related{max-width:var(--read);margin:48px 0 0}
.related ul{list-style:none;padding:0;margin:0}
.related li{border-bottom:1px solid var(--line)}
.related a{display:block;padding:15px 0;text-decoration:none;font-weight:500}
.related a:hover{color:var(--accent)}
.cta-band{max-width:var(--read);margin:56px 0 0;padding:40px;text-align:center;
  border-radius:var(--r-xl);background:linear-gradient(135deg,#D3E2F8,#E7E1F3 55%,#F3E6DC)}
.cta-band h2{margin-bottom:.4em}
.cta-band p{color:var(--ink-2)}
.button{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  height:52px;padding:0 24px;background:var(--ink);color:#fff;border-radius:var(--r-sm);
  font-size:16px;font-weight:500;text-decoration:none;transition:background .16s ease}
.button:hover{background:#0F2C4C}

/* ---- small content patterns kept from the old pages ----------------------- */
.bucket,.cause,.steps{max-width:var(--read)}
.bucket{padding:20px 24px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-lg);margin:0 0 16px}
.num{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;
  background:var(--panel);color:var(--ink);font-size:14px;font-weight:500;flex:none}
.dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--accent)}
.who,.when{color:var(--ink-3);font-size:14px}

/* ---- footer --------------------------------------------------------------- */
/* bottom greater than top, the same rule the landing's sections follow. */
footer.page{border-top:1px solid var(--line);padding-top:48px;padding-bottom:64px;margin-top:72px}
.brand-row{display:inline-flex;align-items:center;gap:9px;font-size:22px;font-weight:500;
  letter-spacing:-.03em;text-decoration:none;margin-bottom:22px}
.brand-row img{width:32px;height:32px}
.footer-links{display:flex;flex-wrap:wrap;gap:10px 26px;margin-bottom:24px}
.footer-links a{font-size:15px;color:var(--ink-2);text-decoration:none}
.footer-links a:hover{color:var(--ink);text-decoration:underline;
  text-decoration-color:var(--accent);text-underline-offset:3px}
footer.page p{color:var(--ink-3);font-size:14px;max-width:70ch}

/* ---- responsive ----------------------------------------------------------- */
@media (max-width:860px){
  .nav-toggle{display:flex}
  .nav-links{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;
    align-items:stretch;gap:0;background:var(--page);border-bottom:1px solid var(--line);padding:8px 16px 16px}
  .site-nav.nav-open .nav-links{display:flex}
  .nav-links a{padding:13px 10px}
  .post-grid{grid-template-columns:1fr}
}
@media (max-width:560px){
  body{font-size:16px}
  .page{padding:0 20px}
  .nav-inner{padding:10px 20px;gap:12px}
  .nav-store{height:44px;padding:0 14px;font-size:14px}  /* 44px touch target */
  .cta-band{padding:28px 20px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .post-card{transition:none}
}