/* ============================================================
   Morrigan — tokens and page styles.
   Loaded together with design/bundle.css, which holds the mg-* components.
   Token values are mirrored from design/tokens.json — change both together
   and never introduce a colour, size or spacing value that is not a token.
   ============================================================ */

/* --- Self-hosted fonts, SIL OFL 1.1 (see assets/licenses/) --- */
@font-face{font-family:"Source Serif 4";font-weight:400;font-style:normal;font-display:swap;src:url("design/fonts/source-serif-4-400.woff2") format("woff2")}
@font-face{font-family:"Source Serif 4";font-weight:500;font-style:normal;font-display:swap;src:url("design/fonts/source-serif-4-500.woff2") format("woff2")}
@font-face{font-family:"Source Serif 4";font-weight:600;font-style:normal;font-display:swap;src:url("design/fonts/source-serif-4-600.woff2") format("woff2")}
@font-face{font-family:"Source Sans 3";font-weight:400;font-style:normal;font-display:swap;src:url("design/fonts/source-sans-3-400.woff2") format("woff2")}
@font-face{font-family:"Source Sans 3";font-weight:500;font-style:normal;font-display:swap;src:url("design/fonts/source-sans-3-500.woff2") format("woff2")}
@font-face{font-family:"Source Sans 3";font-weight:600;font-style:normal;font-display:swap;src:url("design/fonts/source-sans-3-600.woff2") format("woff2")}

/* --- Design tokens (variant B, Pine v2) --------------------- */
:root{--surface:#fafbf9;--surface-raised:#ffffff;--surface-sunken:#eef2ee;--ink:#17231d;--ink-secondary:#5f5f5f;--ink-muted:#5e6b65;--graphite:#5f5f5f;--line:#d5ddd7;--line-strong:#778780;--pine:#2b5c45;--pine-soft:#e3ede6;--on-pine:#ffffff;--link:var(--pine);--focus:var(--pine);--moss:#2f6a4a;--ochre:#85570f;--brick:#9a3a30;--shadow-none:none;--shadow-sheet:0 8px 24px rgba(30, 31, 33, 0.12);--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--space-7:48px;--space-8:64px;--space-9:96px;--space-10:128px;--radius-none:0;--radius-sm:2px;--radius-md:4px;--radius-full:999px;--stroke-hairline:1px;--stroke-control:1.5px;--stroke-mark:2px;--container:1120px;--measure:68ch;--gutter:16px;--breakpoint-md:768px;--breakpoint-lg:1024px;--font-serif:"Source Serif 4", "Iowan Old Style", Georgia, "Times New Roman", serif;--font-sans:"Source Sans 3", "Segoe UI", Helvetica, Arial, sans-serif;--logo-plate:transparent;color-scheme:light}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--surface:#141816;--surface-raised:#1b201d;--surface-sunken:#0f1311;--ink:#e9ede9;--ink-secondary:#b3b5b1;--ink-muted:#9aa39d;--graphite:#b3b5b1;--line:#2b332e;--line-strong:#6f7d75;--pine:#8fc4a8;--pine-soft:#1e3128;--on-pine:#0f1311;--link:var(--pine);--focus:var(--pine);--moss:#7fbf9a;--ochre:#d3a24a;--brick:#e08a80;--shadow-none:none;--shadow-sheet:0 8px 24px rgba(0, 0, 0, 0.5);--logo-plate:#ffffff;color-scheme:dark}}
:root[data-theme="dark"]{--surface:#141816;--surface-raised:#1b201d;--surface-sunken:#0f1311;--ink:#e9ede9;--ink-secondary:#b3b5b1;--ink-muted:#9aa39d;--graphite:#b3b5b1;--line:#2b332e;--line-strong:#6f7d75;--pine:#8fc4a8;--pine-soft:#1e3128;--on-pine:#0f1311;--link:var(--pine);--focus:var(--pine);--moss:#7fbf9a;--ochre:#d3a24a;--brick:#e08a80;--shadow-none:none;--shadow-sheet:0 8px 24px rgba(0, 0, 0, 0.5);--logo-plate:#ffffff;color-scheme:dark}

/* --- Base ---------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; font-family: var(--font-sans); font-size: 16px; line-height: 26px; }
img { max-width: 100%; height: auto; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
:target { scroll-margin-top: var(--space-8); }

/* Skip link — visible only when focused */
.skip {
  position: absolute; left: var(--space-3); top: calc(-1 * var(--space-9)); z-index: 20;
  background: var(--surface-raised); color: var(--ink);
  border: var(--stroke-hairline) solid var(--line-strong); border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-sans); font-size: 14px; line-height: 20px; text-decoration: none;
  transition: top 150ms;
}
.skip:focus { top: var(--space-3); }

/* --- Page styles --------------------------------------------- */
/* hero */
.hero{padding-block:var(--space-8) var(--space-8)}
@media (min-width:1024px){.hero{padding-block:var(--space-9)}}
.hero__grid{display:grid;gap:var(--space-6);align-items:center}
@media (min-width:1024px){.hero__grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--space-8)}}
.hero .mg-heading--display{font-size:34px;line-height:40px}
.hero .mg-heading--caps{font-size:28px;line-height:36px}
@media (min-width:768px){.hero .mg-heading--display{font-size:44px;line-height:50px}}
@media (min-width:768px){.hero .mg-heading--caps{font-size:38px;line-height:46px}}
.hero__cta{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-6);align-items:center}
.hero__art{display:none;justify-self:end}
@media (min-width:1024px){.hero__art{display:block}}
.hero__art svg{display:block;width:100%;max-width:420px;height:auto}
.hero__art .ring{fill:none;stroke:var(--motif);stroke-width:2.5;opacity:.9}
/* content */
.mg-heading{font-size:30px;line-height:36px}
@media (min-width:768px){.mg-heading{font-size:36px;line-height:42px}}
.mg-heading--display{font-size:34px;line-height:40px}
.block{margin-top:var(--space-6)}
.list{margin:var(--space-6) 0 0;padding:0;list-style:none;display:grid;gap:var(--space-3);max-width:var(--measure)}
.list li{padding-left:var(--space-5);position:relative;color:var(--ink-secondary);font-size:16px;line-height:26px}
.list li::before{content:"";position:absolute;left:0;top:11px;width:8px;height:1.5px;background:var(--line-strong)}
.list li strong{color:var(--ink);font-weight:600}
.two{display:grid;gap:var(--space-6)}
@media (min-width:1024px){.two{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--space-8)}}
.mg-table{min-width:760px}
.mandates{margin-top:var(--space-6)}
.contact__row{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center;margin-top:var(--space-5)}
.mg-btn:focus-visible,.mg-nav a:focus-visible,.mg-link:focus-visible,.mg-header__menu:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
:root{--motif:var(--pine)}

/* Logo plate. CLAUDE.md §5: the logo exists only in its original grey and
   has no inverted master, so on dark surfaces it sits on a white plate.
   The token is transparent in the light scheme, so one rule serves both. */
.mg-header__logo img, .mg-footer__mark {
  background: var(--logo-plate);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
}

/* Placeholder state: any contact control whose value is still a
   CLAUDE.md §7 placeholder renders inert and visibly marked, so an
   unfilled address can never look like a working link. */
.is-placeholder {
  background: var(--surface-sunken); color: var(--ink-muted);
  border-color: var(--line); cursor: not-allowed; text-decoration: none;
}
.contact__email {
  margin: var(--space-6) 0 0;
  font-family: var(--font-sans);
  font-size: 22px;
  line-height: 30px;
  letter-spacing: 0.01em;
}
@media (min-width: 768px) { .contact__email { font-size: 26px; line-height: 34px; } }

.mg-placeholder-note {
  margin-top: var(--space-3); color: var(--ochre);
  font-family: var(--font-sans); font-size: 14px; line-height: 20px;
}

/* --- Legal page ---------------------------------------------- */
.legal__block { margin-top: var(--space-7); }
.legal__block:first-of-type { margin-top: var(--space-6); }
.legal .mg-table { min-width: 0; }
.legal .mg-table th { width: 34%; }
@media (max-width: 480px) { .legal .mg-table th { width: 42%; } }

/* --- Desktop gutter (CLAUDE.md §2: 16 mobile / 32 desktop) ---- */
@media (min-width: 768px) { :root { --gutter: 32px; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: 0.01ms !important; }
}