/* Missional by Design content pages in the editorial system (24 Oct 2026).
   Loaded after editorial.css by BaseLayout only (body.site-page): about, writing, the canvas pages, the workshop guide
   and the legal pages. Home, principles and the deep dives do not load this file.
   The page bodies keep their own markup; these rules give them the editorial type, colour tokens and rhythm,
   and map the older variable names onto the editorial tokens so every page follows the light and dark themes. */

/* ===================================================================== token bridge */
.site-page{
  --color-black:var(--ink); --color-white:var(--paper-hi); --color-ink:var(--ink); --color-muted:var(--muted);
  --color-cream:var(--paper-lo); --color-border:var(--rule);
  --font-display:var(--sans); --font-body:var(--sans); --mbd-editorial:var(--serif);
  --mbd-paper:var(--paper); --mbd-card:var(--paper-hi); --mbd-ink:var(--ink); --mbd-muted:var(--muted); --mbd-rule:var(--rule); --mbd-accent:var(--link);
  --transition:.3s ease;
  --spacing-xs:.5rem; --spacing-sm:1rem; --spacing-md:1.5rem; --spacing-lg:2rem; --spacing-xl:3rem; --spacing-2xl:4rem; --spacing-3xl:6rem;
  /* a cool tint for highlighted blocks and selected steps; error text */
  --tint:var(--metal-1); --error:#9b251c;
}
:root[data-theme="dark"] .site-page{--error:#ffab9f}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .site-page{--error:#ffab9f}}

/* masthead: pages without a counterpart in the other language */
.site-page .nav .lang-note{color:var(--muted);white-space:nowrap}
.site-page .nav .lang-note small{font-size:12px}

/* ===================================================================== prose */
.site-page main :where(h1,h2,h3,h4,h5,h6){font-weight:400;color:inherit;margin-bottom:var(--s-3)}
.site-page main :where(h1){font:400 clamp(48px,7.4vw,118px)/.94 var(--serif);letter-spacing:-.022em}
.site-page main :where(h2){font:400 clamp(32px,3.6vw,54px)/1.06 var(--serif);letter-spacing:-.014em}
.site-page main :where(h3){font:400 var(--t-h3)/1.1 var(--serif);letter-spacing:-.01em}
.site-page main :where(h4){font:500 clamp(18px,1.35vw,20px)/1.35 var(--sans);letter-spacing:-.005em;margin-bottom:12px}
.site-page main :where(h5){font:500 var(--t-micro)/1.3 var(--sans);letter-spacing:.05em;color:var(--faint)}
.site-page main :where(p){margin-bottom:1.25em;max-width:70ch}
.site-page main :where(strong,b){font-weight:600}
.site-page main :where(ul:not([class]),ol:not([class])){padding-left:1.25em}
.site-page main :where(ul:not([class])){list-style:disc}
.site-page main :where(ol:not([class])){list-style:decimal}
.site-page main :where(li)::marker{color:var(--metal-4)}
.site-page main :where(hr){border:0;border-top:1px solid var(--rule-strong)}
.site-page main :where(code){background:color-mix(in srgb,var(--ink) 8%,transparent);border-radius:3px}
.site-page main p.lead{font-size:clamp(19px,1.45vw,22px);line-height:1.6;font-weight:400;letter-spacing:-.003em}

/* ===================================================================== page head (like the deep-dive article head) */
.site-page .hero{display:block;max-width:var(--max);margin-inline:auto;padding:clamp(40px,6vw,96px) var(--gutter) var(--s-5);min-height:0!important;background:none;color:var(--ink)}
.site-page .hero-label,.site-page .pg-kicker,.site-page .principle-number{display:block;font:500 var(--t-micro)/1.3 var(--sans);letter-spacing:.05em;text-transform:none;color:var(--faint);font-stretch:105%;opacity:1}
.site-page .hero-label{margin-bottom:clamp(24px,3.4vw,48px)}
.site-page .pg-kicker{margin-bottom:1rem}
.site-page .hero h1{max-width:17ch;margin-bottom:0}
.site-page .hero-subtitle{margin-top:28px;max-width:44rem;font:italic 400 clamp(22px,2vw,30px)/1.3 var(--serif);color:var(--muted);opacity:1}

/* ===================================================================== sections and measure */
.site-page :is(.container,.container-narrow){width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.site-page .container-narrow>*{max-width:46rem}
.site-page .section{padding-block:var(--s-6);border-top:1px solid var(--rule)}
.site-page :is(.section-cream,.section-dark,.section-ink){background:var(--paper-lo);color:var(--ink)}
.site-page .grid{display:grid;gap:var(--col-gap)}
.site-page .grid-2{grid-template-columns:repeat(auto-fit,minmax(min(350px,100%),1fr))}
.site-page .grid-3{grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr))}

/* cards become hairline-topped columns, as on home */
.site-page .pg-card{display:block;padding:24px 0 8px;border-top:1px solid var(--rule-strong);background:none;color:var(--ink);text-decoration:none}
.site-page a.pg-card:hover{border-top-color:var(--ink)}
.site-page .pg-card p{color:var(--muted)}
.site-page .pg-note{margin-top:3rem;font-size:var(--t-small);color:var(--faint)}

/* actions: words and a hairline, nothing boxed (the .go link of the editorial system) */
.site-page .button{display:inline-flex;align-items:baseline;gap:.55em;padding:6px 0;margin-right:12px;border:0;border-radius:0;
  background:linear-gradient(90deg,var(--ink),var(--ink)) 0 100%/100% 1px no-repeat;color:var(--ink);
  font:500 var(--t-small)/1.4 var(--sans);letter-spacing:.01em;text-transform:none;text-decoration:none;opacity:1}
.site-page .button::after{content:"→";transition:transform .5s var(--ease)}
.site-page .button[download]::after{content:"↓"}
.site-page .button:hover{opacity:1;background-image:linear-gradient(90deg,var(--ink) 0 40%,var(--metal-3) 50%,var(--ink) 60% 100%)}
.site-page .button:hover::after{transform:translateX(4px)}
.site-page .button[download]:hover::after{transform:translateY(2px)}

/* ===================================================================== print: the page, not the frame */
@media print{
  :root:root,:root[data-theme]{--paper:#fff;--paper-hi:#fff;--paper-lo:#f4f6f8;--ink:#000;--muted:#333;--faint:#444;--link:#000;--rule:#bbb;--rule-strong:#888;--metal-1:#eef2f5;color-scheme:light}
  .site-page .mast,.site-page .foot,.site-page .skip{display:none!important}
  .site-page{background:#fff}
}