@font-face {
  font-family:"Work Sans";
  src:url('/WorkSans-Variable.ttf') format('truetype');
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
}
/* Public pages reuse the workspace's semantic color and typography roles.
   The existing self-hosted font is served by Main's exact public routes. */
:root {
  color-scheme:light;
  --color-background:#f8f7f6;
  --color-surface:#ffffff;
  --color-surface-soft:#f1f0ee;
  --color-text:#171717;
  --color-muted:#55514e;
  --color-border:#c9c5c1;
  --color-accent:#ff0033;
  --color-primary:#171717;
  --color-on-primary:#ffffff;
  --font-family-ui:"Work Sans",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
* { box-sizing:border-box; }
html { margin:0; min-height:100%; background:var(--color-background); color:var(--color-text); font-size:100%; }
body { margin:0; font-family:var(--font-family-ui); font-size:1rem; font-weight:450; line-height:1.65; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration-thickness:1px; text-underline-offset:3px; }
a:hover { text-decoration-thickness:2px; }
a:focus-visible { outline:2px solid var(--color-text); outline-offset:5px; }
.page { width:min(100% - 48px,900px); margin-inline:auto; }
.site-header { padding-block:44px 36px; }
.brand { display:inline-flex; align-items:center; width:252px; max-width:calc(100vw - 48px); text-decoration:none; }
.brand picture { display:block; width:100%; }
.brand img, img.brand { display:block; width:100%; height:auto; }
img.brand { width:252px; }
main { padding-block:12px 48px; }
h1,h2 { font-weight:750; line-height:1.2; text-wrap:balance; }
h1 { margin:0 0 20px; font-size:clamp(2rem,4vw,2.75rem); letter-spacing:-.035em; }
h2 { margin:0 0 14px; font-size:1.375rem; letter-spacing:-.02em; }
p { margin:0 0 18px; }
strong { font-weight:650; }
.lead { font-size:1.1875rem; line-height:1.65; }
.eyebrow { margin-bottom:12px; color:var(--color-muted); font-size:.875rem; font-weight:650; }
.document-meta { margin-top:-8px; color:var(--color-muted); font-size:.875rem; }
section { margin-top:36px; }
ul { margin:0 0 18px; padding-left:24px; }
li { margin-bottom:12px; padding-left:3px; }
code { overflow-wrap:anywhere; font-size:.9375em; }
.draft-note { margin-top:32px; padding:20px 24px; border-left:4px solid var(--color-accent); background:var(--color-surface-soft); font-size:.9375rem; }
.draft-note strong { display:block; margin-bottom:8px; }
.draft-note p:last-child { margin-bottom:0; }
.button { display:inline-flex; align-items:center; justify-content:space-between; gap:28px; min-height:48px; margin-top:8px; padding:12px 20px; border:1px solid var(--color-primary); background:var(--color-primary); color:var(--color-on-primary); font-size:.9375rem; font-weight:650; text-decoration:none; }
.button:hover { text-decoration:underline; }
.button span { color:var(--color-accent); font-size:1.25rem; }
.site-footer { padding-block:24px 36px; border-top:1px solid var(--color-border); color:var(--color-muted); font-size:.875rem; }
.site-footer nav { display:flex; flex-wrap:wrap; gap:12px 24px; margin-bottom:12px; }
.site-footer p { margin:0; }
.skip-link { position:absolute; left:24px; top:0; padding:10px 16px; transform:translateY(-120%); background:var(--color-primary); color:var(--color-on-primary); z-index:1; }
.skip-link:focus { transform:translateY(10px); }
.landing { max-width:800px; }
.landing main { padding-block:32px 56px; }
@media (prefers-color-scheme:dark) {
  :root {
    color-scheme:dark;
    --color-background:#171717;
    --color-surface:#202020;
    --color-surface-soft:#242424;
    --color-text:#f8f7f6;
    --color-muted:#c5c1bd;
    --color-border:#4d4b49;
    --color-primary:#f8f7f6;
    --color-on-primary:#171717;
  }
}
@media (forced-colors:active) {
  img.brand, .brand picture { background:#fff; forced-color-adjust:none; }
  .draft-note { border:1px solid CanvasText; }
  .button { border:1px solid ButtonText; }
}

/* The public splash stays light regardless of the visitor's theme. */
html.logo-splash { color-scheme:light; --color-background:#f8f7f6; --color-text:#171717; }
.logo-splash body { min-height:100vh; min-height:100dvh; display:grid; place-items:center; }

@media (forced-colors:active) and (prefers-color-scheme:dark) {
  .brand picture { background:#171717; }
}