/* Shared shell for the CONTENT pages: the blog index, each article, and privacy.
   Values are lifted from the design (Blog.dc.html, Blog Post.dc.html, Site Footer.dc.html),
   which writes them inline; they are classes here so the three pages cannot drift.

   index.html is deliberately NOT part of this. It stays self-contained so the forecast
   still renders when nothing else on the host does, and it owns its own token block.
   These three are ordinary documents with no live data in them, so the trade goes the
   other way: one stylesheet, and one place to change the footer's look. */

:root{
  --bg:#f6f4fb; --ink:#23213a; --muted:#6d6a85; --muted-2:#4a4763; --body:#35324d;
  --rule:#dcd8ea; --tone:oklch(0.78 0.12 45);
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:'Nunito',system-ui,-apple-system,Segoe UI,sans-serif;
  -webkit-text-size-adjust:100%;
}
a{color:inherit;text-decoration:underline;text-underline-offset:3px}
a:hover{opacity:.7}
a:focus-visible{outline:3px solid var(--tone);outline-offset:3px;border-radius:4px}

/* ------------------------------------------------------------------ shell */
.wrap{max-width:1160px;margin:0 auto;padding:28px clamp(20px,4vw,48px) 72px}

.top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.dot{width:28px;height:28px;border-radius:50%;background:var(--tone);flex:none}
.brand-name{font-weight:800;font-size:20px}
.top-link{font-size:15px;font-weight:700}

/* -------------------------------------------------------- the blog index */
.blog-head h1{
  font-weight:800;font-size:clamp(32px,4.5vw,48px);line-height:1.1;
  letter-spacing:-0.01em;margin:clamp(40px,7vw,80px) 0 12px;
}
.lead{font-size:18px;line-height:1.55;color:var(--muted);font-weight:600;
      margin:0;max-width:640px;text-wrap:pretty}

.posts{margin-top:36px;border-top:1px solid var(--rule)}
.post-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;
          gap:8px 40px;padding:28px 0;border-bottom:1px solid var(--rule);text-decoration:none}
/* The design draws the last rule as "none" from data. A last-child rule says the same
   thing without every row having to carry its position. */
.post-row:last-child{border-bottom:none}
.post-text{flex:1 1 420px;max-width:760px}
.post-row h2{font-size:24px;line-height:1.3;font-weight:800;margin:0;text-wrap:balance}
.post-excerpt{font-size:16px;line-height:1.6;color:var(--muted-2);margin:8px 0 0;text-wrap:pretty}
.post-meta{display:flex;gap:10px;font-size:15px;font-weight:600;color:var(--muted);white-space:nowrap}

/* ------------------------------------------------------ an article, privacy */
article{margin:clamp(40px,7vw,80px) 0 0}
.back{font-size:15px;font-weight:700;color:var(--muted);text-decoration:none}
article h1{
  font-weight:800;font-size:clamp(32px,5vw,48px);line-height:1.12;
  letter-spacing:-0.01em;margin:20px 0 16px;text-wrap:balance;
}
/* Privacy has no article above it to come back from, so its heading carries the space. */
article.solo h1{margin:0 0 16px}
.meta{display:flex;flex-wrap:wrap;gap:6px 10px;font-size:15px;font-weight:600;color:var(--muted)}
.rule{border-top:1px solid var(--rule);margin:28px 0 8px}

.prose{font-size:18px;line-height:1.7;color:var(--body);text-wrap:pretty}
.prose p{margin:12px 0 0}
/* class+class outranks class+element, so the standfirst keeps its own spacing */
.prose .intro{margin:24px 0 0;font-size:20px;line-height:1.6;font-weight:600;color:var(--ink)}
.prose h2{font-size:24px;line-height:1.3;font-weight:800;color:var(--ink);margin:40px 0 0}
.prose ul{margin:12px 0 0;padding-left:22px}
.prose li{margin:6px 0 0}
.prose .cta{margin:20px 0 0}
.prose .cta a{font-weight:800;color:var(--ink)}

/* ----------------------------------------------------------------- footer */
.site-foot{margin-top:80px}
.site-foot-in{border-top:1px solid var(--rule);padding:24px 4px 0;
              display:flex;flex-wrap:wrap;justify-content:space-between;
              align-items:flex-start;gap:16px 40px}
.site-foot p{flex:1 1 300px;max-width:560px;font-size:14px;line-height:1.6;
             color:var(--muted);margin:0;text-wrap:pretty}
.site-foot nav{display:flex;flex-wrap:wrap;gap:6px 20px;font-size:14px;font-weight:700}
/* The caveat is the one part of the footer set in the darker ink. */
.site-foot strong{color:var(--ink);font-weight:800}