/* Generated by build_site_pages.py. Tokens mirror index.html. */
:root { --ivory:#faf6f0; --ink:#2b2724; --terra:#c4673b; --terra-soft:#e8d5c8;
        --sage:#8a9a82; --muted:#6b6259; }
* { margin:0; box-sizing:border-box; }
body { font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",Georgia,serif;
       background:var(--ivory); color:var(--ink); line-height:1.55; }
main { max-width:860px; margin:0 auto; padding:40px 24px 24px; }
.brand { display:flex; align-items:center; gap:11px; margin-bottom:34px;
         text-decoration:none; color:inherit; }
.arch { width:26px; height:32px; border:4px solid var(--terra); border-bottom:none;
        border-radius:26px 26px 0 0; flex:none; }
.brand-name { font-size:20px; font-weight:700; letter-spacing:-0.01em; }
h1 { font-size:clamp(30px,5.4vw,46px); line-height:1.07; letter-spacing:-0.025em;
     font-weight:700; }
h2 { font-size:clamp(19px,2.8vw,23px); letter-spacing:-0.015em; margin:44px 0 12px; }
.lede { font-size:clamp(17px,2.3vw,19px); color:var(--muted); margin-top:16px; max-width:640px; }
p + p { margin-top:14px; }
figure { margin:0; }
/* Global, not scoped to figure: hub cards use bare <picture> and the width/
   height attributes would otherwise render them at natural 1200px and overflow. */
img { max-width:100%; height:auto; display:block; }
figure img, .hub img { width:100%; border-radius:16px;
             box-shadow:0 12px 40px rgba(43,39,36,.12); background:#efe9e1; }
figcaption { font-size:13px; font-weight:600; color:var(--muted); margin-top:9px;
             letter-spacing:.02em; }
.pair { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:32px; }
.stack { display:grid; gap:20px; margin-top:32px; max-width:560px; }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
        gap:14px; margin-top:32px; }
.grid.grid-2 { grid-template-columns:1fr 1fr; }
@media (max-width:560px){ .grid.grid-2{ grid-template-columns:1fr; } }
.notes { margin-top:12px; padding-left:20px; color:var(--muted); }
.notes li { margin-top:7px; }
.disclose { margin-top:36px; padding:15px 17px; background:rgba(138,154,130,.11);
            border-left:3px solid var(--sage); border-radius:0 10px 10px 0;
            font-size:14px; color:var(--muted); }
.cta-wrap { margin:40px 0 8px; }
.cta { display:inline-flex; align-items:center; gap:10px; background:var(--ink);
       color:var(--ivory); padding:15px 28px; border-radius:14px; font-size:16px;
       font-weight:600; text-decoration:none; transition:transform .15s ease; }
.cta:hover { transform:translateY(-2px); }
.free { font-size:14px; color:#9a8f84; margin-top:8px; }
.related { margin-top:14px; padding-left:20px; }
.related li { margin-top:7px; }
.related a, .hub a { color:var(--terra); }
.hub { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
       gap:20px; margin-top:32px; }
.hub a { text-decoration:none; color:inherit; display:block; }
/* Uniform crop so a portrait source does not make the row ragged. */
.hub img { aspect-ratio:4/3; object-fit:cover; border-radius:14px; }
.hub a span { display:block; margin-top:10px; font-weight:600; font-size:16px; }
footer { padding:30px 24px 44px; text-align:center; font-size:13px; color:#9a8f84; }
footer a { color:var(--muted); text-decoration:none; margin:0 9px; }
footer a:hover { color:var(--terra); }
@media (max-width:560px){ .pair{ grid-template-columns:1fr; } }