/* =============================================================================
   Wayland Foundry — site.css
   The whole site's styles. Nothing else is loaded: no scripts, no third-party
   requests, no cookies. Built from the Wayland Foundry design system v2
   (tokens.css + components/bundle.css, verbatim) plus the site layer below.

   Order:  1. tokens          5. Typenschild
           2. dark theme      6. buttons & links
           3. base & chamfer  7. site chrome (header, footer)
           4. textures        8. pages (home, legal, notice)
   ============================================================================= */

/* --- 1. Tokens (design system, verbatim) ---------------------------------- */
:root, [data-theme="light"]{--surface:#f6f5f1;--surface-raised:#ffffff;--surface-sunken:#ebeae5;--ink:#15181d;--ink-muted:#5a616b;--rule:#d3d5d8;--rule-strong:#7a828b;--steel:#1f4b8a;--on-steel:#ffffff;--glut:#ac4218;--on-glut:#ffffff;--temper-straw:#d9b45c;--temper-bronze:#a9662a;--temper-purple:#6f3d69;--temper-blue:#2d5da8;--temper-grey:#7b8896}
[data-theme="dark"]{--surface:#14171b;--surface-raised:#1c2026;--surface-sunken:#0e1013;--ink:#e8eaed;--ink-muted:#a0a8b2;--rule:#343a42;--rule-strong:#6a737e;--steel:#8ab8f2;--on-steel:#0e1013;--glut:#f28c5a;--on-glut:#0e1013;--temper-straw:#e6c67a;--temper-bronze:#c07a3a;--temper-purple:#9a5f92;--temper-blue:#5d8ee0;--temper-grey:#8d9aa8}
:root{--space-1:4px;--space-2:8px;--space-3:16px;--space-4:24px;--space-5:32px;--space-6:48px;--space-7:64px;--space-8:96px;--chamfer-1:6px;--chamfer-2:12px;--chamfer-3:24px;--radius-0:0px;--radius-rivet:50%;--hairline:1px;--stroke:2px;--measure:42rem;--page-width:64rem;--font-display:"Barlow Semi Condensed", "Alte DIN 1451 Mittelschrift", "DIN Alternate", "Arial Narrow", sans-serif;--font-sans:"Fira Sans", system-ui, -apple-system, "Segoe UI", sans-serif;--font-mono:"Fira Mono", ui-monospace, "SFMono-Regular", Menlo, monospace}

/* --- 2. Dark theme ---------------------------------------------------------
   Dark follows prefers-color-scheme with no toggle, so the dark values above
   are repeated here against :root. The [data-theme] hooks are kept so a theme
   can be forced later without changing the token block. ---------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface:#14171b; --surface-raised:#1c2026; --surface-sunken:#0e1013;
    --ink:#e8eaed; --ink-muted:#a0a8b2;
    --rule:#343a42; --rule-strong:#6a737e;
    --steel:#8ab8f2; --on-steel:#0e1013;
    --glut:#f28c5a; --on-glut:#0e1013;
    --temper-straw:#e6c67a; --temper-bronze:#c07a3a; --temper-purple:#9a5f92;
    --temper-blue:#5d8ee0; --temper-grey:#8d9aa8;
  }
}


/* --- 3-6. Components (design system bundle.css, verbatim) ----------------- */
/* Wayland Foundry — bundle.css v2. Loaded after tokens.css. No components require JS. */

/* ---------- Shape: the Fase (chamfer). Top-right + bottom-left by default. ---------- */
.wf-chamfer { --c: var(--chamfer-1); clip-path: polygon(0 0, calc(100% - var(--c)) 0, 100% var(--c), 100% 100%, var(--c) 100%, 0 calc(100% - var(--c))); }
.wf-chamfer-2 { --c: var(--chamfer-2); }
.wf-chamfer-3 { --c: var(--chamfer-3); }
.wf-chamfer-all { clip-path: polygon(var(--c) 0, calc(100% - var(--c)) 0, 100% var(--c), 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c)); }

/* ---------- Ornament: the temper band (Anlassfarben, 230 → 320 °C, left to right) ---------- */
.wf-temper { display:block; height: var(--stroke); width: 100%;
  background: linear-gradient(90deg,
    var(--temper-straw) 0 18%, var(--temper-bronze) 18% 36%, var(--temper-purple) 36% 52%,
    var(--temper-blue) 52% 82%, var(--temper-grey) 82% 100%); }
.wf-temper--soft { background: linear-gradient(90deg, var(--temper-straw), var(--temper-bronze), var(--temper-purple), var(--temper-blue), var(--temper-grey)); }
.wf-temper--hot { background: linear-gradient(90deg, var(--glut) 0 10%, var(--temper-straw) 10% 26%, var(--temper-bronze) 26% 42%, var(--temper-purple) 42% 56%, var(--temper-blue) 56% 84%, var(--temper-grey) 84% 100%); }

/* ---------- Field textures. Lay on surface-sunken (or surface-raised for grid). ---------- */
/* Junkers corrugation: vertical ribs at space-2 pitch, drawn from the tokens so it follows the theme. */
.tex-corrugated { background-color: var(--surface-sunken);
  background-image: repeating-linear-gradient(90deg,
    rgba(255,255,255,.55) 0 1px, rgba(255,255,255,.12) 1px 4px, rgba(0,0,0,.12) 5px 6.5px, rgba(0,0,0,.05) 6.5px 8px);
  background-size: var(--space-2) 100%; }
[data-theme="dark"] .tex-corrugated { background-image: repeating-linear-gradient(90deg,
    rgba(255,255,255,.14) 0 1px, rgba(255,255,255,.04) 1px 4px, rgba(0,0,0,.30) 5px 6.5px, rgba(0,0,0,.12) 6.5px 8px); }
/* Millimeterpapier: minor lines at space-2, majors at space-7, both in rule. */
.tex-grid { background-color: var(--surface);
  background-image:
    linear-gradient(var(--rule-strong) 1px, transparent 1px), linear-gradient(90deg, var(--rule-strong) 1px, transparent 1px),
    linear-gradient(var(--rule) 1px, transparent 1px), linear-gradient(90deg, var(--rule) 1px, transparent 1px);
  background-size: var(--space-7) var(--space-7), var(--space-7) var(--space-7), var(--space-2) var(--space-2), var(--space-2) var(--space-2);
  background-position: -1px -1px; }
/* Faint grid for grounds that carry a sheet of text: majors in rule, minors at half strength. */
.tex-grid--faint { background-image:
    linear-gradient(var(--rule) 1px, transparent 1px), linear-gradient(90deg, var(--rule) 1px, transparent 1px),
    linear-gradient(color-mix(in srgb, var(--rule) 45%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--rule) 45%, transparent) 1px, transparent 1px); }
/* Hammerschlag: overlapping dimples. */
.tex-hammer { background-color: var(--surface-sunken); background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 96 96%22 width=%2296%22 height=%2296%22%3E%3Ctitle%3EHammerschlag tile%3C/title%3E%3Cdefs%3E%3CradialGradient id=%22d%22 cx=%2250%25%22 cy=%2250%25%22 r=%2250%25%22%3E%3Cstop offset=%2255%25%22 stop-color=%22%23000000%22 stop-opacity=%220%22/%3E%3Cstop offset=%22100%25%22 stop-color=%22%23000000%22 stop-opacity=%22.16%22/%3E%3C/radialGradient%3E%3CradialGradient id=%22l%22 cx=%2250%25%22 cy=%2250%25%22 r=%2250%25%22%3E%3Cstop offset=%2255%25%22 stop-color=%22%23ffffff%22 stop-opacity=%220%22/%3E%3Cstop offset=%22100%25%22 stop-color=%22%23ffffff%22 stop-opacity=%22.45%22/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx=%2214.5%22 cy=%2212.5%22 r=%2215%22 fill=%22url%28%23l%29%22/%3E%3Ccircle cx=%2217.5%22 cy=%2215.5%22 r=%2215%22 fill=%22url%28%23d%29%22/%3E%3Ccircle cx=%2244.5%22 cy=%228.5%22 r=%2213%22 fill=%22url%28%23l%29%22/%3E%3Ccircle cx=%2247.5%22 cy=%2211.5%22 r=%2213%22 fill=%22url%28%23d%29%22/%3E%3Ccircle cx=%2276.5%22 cy=%2216.5%22 r=%2216%22 fill=%22url%28%23l%29%22/%3E%3Ccircle cx=%2279.5%22 cy=%2219.5%22 r=%2216%22 fill=%22url%28%23d%29%22/%3E%3Ccircle cx=%224.5%22 cy=%2242.5%22 r=%2213%22 fill=%22url%28%23l%29%22/%3E%3Ccircle cx=%227.5%22 cy=%2245.5%22 r=%2213%22 fill=%22url%28%23d%29%22/%3E%3Ccircle cx=%2232.5%22 cy=%2238.5%22 r=%2217%22 fill=%22url%28%23l%29%22/%3E%3Ccircle cx=%2235.5%22 cy=%2241.5%22 r=%2217%22 fill=%22url%28%23d%29%22/%3E%3Ccircle cx=%2264.5%22 cy=%2244.5%22 r=%2214%22 fill=%22url%28%23l%29%22/%3E%3Ccircle cx=%2267.5%22 cy=%2247.5%22 r=%2214%22 fill=%22url%28%23d%29%22/%3E%3Ccircle cx=%2292.5%22 cy=%2242.5%22 r=%2212%22 fill=%22url%28%23l%29%22/%3E%3Ccircle cx=%2295.5%22 cy=%2245.5%22 r=%2212%22 fill=%22url%28%23d%29%22/%3E%3Ccircle cx=%2218.5%22 cy=%2272.5%22 r=%2216%22 fill=%22url%28%23l%29%22/%3E%3Ccircle cx=%2221.5%22 cy=%2275.5%22 r=%2216%22 fill=%22url%28%23d%29%22/%3E%3Ccircle cx=%2250.5%22 cy=%2270.5%22 r=%2213%22 fill=%22url%28%23l%29%22/%3E%3Ccircle cx=%2253.5%22 cy=%2273.5%22 r=%2213%22 fill=%22url%28%23d%29%22/%3E%3Ccircle cx=%2280.5%22 cy=%2276.5%22 r=%2215%22 fill=%22url%28%23l%29%22/%3E%3Ccircle cx=%2283.5%22 cy=%2279.5%22 r=%2215%22 fill=%22url%28%23d%29%22/%3E%3Ccircle cx=%2246.5%22 cy=%2294.5%22 r=%2213%22 fill=%22url%28%23l%29%22/%3E%3Ccircle cx=%2249.5%22 cy=%2297.5%22 r=%2213%22 fill=%22url%28%23d%29%22/%3E%3Ccircle cx=%22-1.5%22 cy=%2294.5%22 r=%2212%22 fill=%22url%28%23l%29%22/%3E%3Ccircle cx=%221.5%22 cy=%2297.5%22 r=%2212%22 fill=%22url%28%23d%29%22/%3E%3Ccircle cx=%2294.5%22 cy=%2294.5%22 r=%2212%22 fill=%22url%28%23l%29%22/%3E%3Ccircle cx=%2297.5%22 cy=%2297.5%22 r=%2212%22 fill=%22url%28%23d%29%22/%3E%3Ccircle cx=%22-1.5%22 cy=%22-1.5%22 r=%2212%22 fill=%22url%28%23l%29%22/%3E%3Ccircle cx=%221.5%22 cy=%221.5%22 r=%2212%22 fill=%22url%28%23d%29%22/%3E%3Ccircle cx=%2294.5%22 cy=%22-1.5%22 r=%2212%22 fill=%22url%28%23l%29%22/%3E%3Ccircle cx=%2297.5%22 cy=%221.5%22 r=%2212%22 fill=%22url%28%23d%29%22/%3E%3Ccircle cx=%2246.5%22 cy=%22-1.5%22 r=%2213%22 fill=%22url%28%23l%29%22/%3E%3Ccircle cx=%2249.5%22 cy=%221.5%22 r=%2213%22 fill=%22url%28%23d%29%22/%3E%3C/svg%3E"); background-size: 96px 96px; }
/* Riffelblech: staggered tread-plate lozenges. */
.tex-riffel { background-color: var(--surface-sunken); background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 48 48%22 width=%2248%22 height=%2248%22%3E%3Ctitle%3ERiffelblech tile%3C/title%3E%3Cg transform=%22translate%2812 12%29 rotate%28-45%29%22%3E%3Crect x=%22-9%22 y=%22-3%22 width=%2218%22 height=%226%22 fill=%22%23000000%22 fill-opacity=%22.10%22/%3E%3Crect x=%22-9%22 y=%22-3%22 width=%2218%22 height=%221.2%22 fill=%22%23ffffff%22 fill-opacity=%22.55%22/%3E%3Crect x=%22-9%22 y=%221.8%22 width=%2218%22 height=%221.2%22 fill=%22%23000000%22 fill-opacity=%22.16%22/%3E%3C/g%3E%3Cg transform=%22translate%2836 36%29 rotate%28-45%29%22%3E%3Crect x=%22-9%22 y=%22-3%22 width=%2218%22 height=%226%22 fill=%22%23000000%22 fill-opacity=%22.10%22/%3E%3Crect x=%22-9%22 y=%22-3%22 width=%2218%22 height=%221.2%22 fill=%22%23ffffff%22 fill-opacity=%22.55%22/%3E%3Crect x=%22-9%22 y=%221.8%22 width=%2218%22 height=%221.2%22 fill=%22%23000000%22 fill-opacity=%22.16%22/%3E%3C/g%3E%3C/svg%3E"); background-size: 48px 48px; }
/* Damast: folded-steel layering. */
.tex-damast { background-color: var(--surface-sunken); background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 96 96%22 width=%2296%22 height=%2296%22%3E%3Ctitle%3EDamast tile%3C/title%3E%3Cpath d=%22M0 6 C 24 -1, 24 13, 48 6 S 72 13, 96 6%22 fill=%22none%22 stroke=%22%23ffffff%22 stroke-opacity=%22.5%22 stroke-width=%221.2%22 transform=%22translate%280 -1%29%22/%3E%3Cpath d=%22M0 6 C 24 -1, 24 13, 48 6 S 72 13, 96 6%22 fill=%22none%22 stroke=%22%23000000%22 stroke-opacity=%22.13%22 stroke-width=%221.2%22/%3E%3Cpath d=%22M0 18 C 24 14, 24 22, 48 18 S 72 22, 96 18%22 fill=%22none%22 stroke=%22%23ffffff%22 stroke-opacity=%22.5%22 stroke-width=%221.2%22 transform=%22translate%280 -1%29%22/%3E%3Cpath d=%22M0 18 C 24 14, 24 22, 48 18 S 72 22, 96 18%22 fill=%22none%22 stroke=%22%23000000%22 stroke-opacity=%22.13%22 stroke-width=%221.2%22/%3E%3Cpath d=%22M0 30 C 24 23, 24 37, 48 30 S 72 37, 96 30%22 fill=%22none%22 stroke=%22%23ffffff%22 stroke-opacity=%22.5%22 stroke-width=%221.2%22 transform=%22translate%280 -1%29%22/%3E%3Cpath d=%22M0 30 C 24 23, 24 37, 48 30 S 72 37, 96 30%22 fill=%22none%22 stroke=%22%23000000%22 stroke-opacity=%22.13%22 stroke-width=%221.2%22/%3E%3Cpath d=%22M0 42 C 24 38, 24 46, 48 42 S 72 46, 96 42%22 fill=%22none%22 stroke=%22%23ffffff%22 stroke-opacity=%22.5%22 stroke-width=%221.2%22 transform=%22translate%280 -1%29%22/%3E%3Cpath d=%22M0 42 C 24 38, 24 46, 48 42 S 72 46, 96 42%22 fill=%22none%22 stroke=%22%23000000%22 stroke-opacity=%22.13%22 stroke-width=%221.2%22/%3E%3Cpath d=%22M0 54 C 24 47, 24 61, 48 54 S 72 61, 96 54%22 fill=%22none%22 stroke=%22%23ffffff%22 stroke-opacity=%22.5%22 stroke-width=%221.2%22 transform=%22translate%280 -1%29%22/%3E%3Cpath d=%22M0 54 C 24 47, 24 61, 48 54 S 72 61, 96 54%22 fill=%22none%22 stroke=%22%23000000%22 stroke-opacity=%22.13%22 stroke-width=%221.2%22/%3E%3Cpath d=%22M0 66 C 24 62, 24 70, 48 66 S 72 70, 96 66%22 fill=%22none%22 stroke=%22%23ffffff%22 stroke-opacity=%22.5%22 stroke-width=%221.2%22 transform=%22translate%280 -1%29%22/%3E%3Cpath d=%22M0 66 C 24 62, 24 70, 48 66 S 72 70, 96 66%22 fill=%22none%22 stroke=%22%23000000%22 stroke-opacity=%22.13%22 stroke-width=%221.2%22/%3E%3Cpath d=%22M0 78 C 24 71, 24 85, 48 78 S 72 85, 96 78%22 fill=%22none%22 stroke=%22%23ffffff%22 stroke-opacity=%22.5%22 stroke-width=%221.2%22 transform=%22translate%280 -1%29%22/%3E%3Cpath d=%22M0 78 C 24 71, 24 85, 48 78 S 72 85, 96 78%22 fill=%22none%22 stroke=%22%23000000%22 stroke-opacity=%22.13%22 stroke-width=%221.2%22/%3E%3Cpath d=%22M0 90 C 24 86, 24 94, 48 90 S 72 94, 96 90%22 fill=%22none%22 stroke=%22%23ffffff%22 stroke-opacity=%22.5%22 stroke-width=%221.2%22 transform=%22translate%280 -1%29%22/%3E%3Cpath d=%22M0 90 C 24 86, 24 94, 48 90 S 72 94, 96 90%22 fill=%22none%22 stroke=%22%23000000%22 stroke-opacity=%22.13%22 stroke-width=%221.2%22/%3E%3C/svg%3E"); background-size: 96px 96px; }
/* In dark the tiles blend soft-light into surface-sunken so highlights read as sheen, not chalk. */
[data-theme="dark"] .tex-hammer, [data-theme="dark"] .tex-riffel, [data-theme="dark"] .tex-damast { background-blend-mode: soft-light; }

/* ---------- Typenschild: the riveted nameplate ---------- */
.wf-plate { position: relative; background-color: var(--surface-raised); border: var(--hairline) solid var(--rule-strong);
  padding: var(--space-4); color: var(--ink);
  /* four rivets, drawn as radial gradients space-1 + 3px in from each corner */
  background-image:
    radial-gradient(circle at 7px 7px, var(--rule-strong) 2.5px, transparent 3.2px),
    radial-gradient(circle at calc(100% - 7px) 7px, var(--rule-strong) 2.5px, transparent 3.2px),
    radial-gradient(circle at 7px calc(100% - 7px), var(--rule-strong) 2.5px, transparent 3.2px),
    radial-gradient(circle at calc(100% - 7px) calc(100% - 7px), var(--rule-strong) 2.5px, transparent 3.2px); }
.wf-plate--edge { border-left: var(--stroke) solid var(--glut); }
.wf-spec { font-family: var(--font-mono); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.wf-meta { font-family: var(--font-mono); font-size: 13px; line-height: 20px; color: var(--ink); }

/* ---------- Buttons ---------- */
.wf-btn { --c: var(--chamfer-1); display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-display); font-size: 15px; line-height: 20px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  padding: 10px var(--space-3); border: var(--stroke) solid transparent; text-decoration: none; cursor: pointer; background: transparent; color: var(--ink);
  clip-path: polygon(0 0, calc(100% - var(--c)) 0, 100% var(--c), 100% 100%, var(--c) 100%, 0 calc(100% - var(--c))); }
.wf-btn--primary { background: var(--steel); border-color: var(--steel); color: var(--on-steel); }
.wf-btn--primary:hover { filter: brightness(1.08); }
.wf-btn--primary:active { filter: brightness(.92); }
.wf-btn--secondary { border-color: var(--rule-strong); color: var(--ink); }
.wf-btn--secondary:hover { border-color: var(--ink); }
.wf-btn--secondary:active { background: var(--surface-sunken); }
.wf-btn--ghost { color: var(--steel); padding-left: var(--space-1); padding-right: var(--space-1); clip-path: none; }
.wf-btn--ghost:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: var(--stroke); }
.wf-btn--hot { background: var(--glut); border-color: var(--glut); color: var(--on-glut); }
.wf-btn--hot:hover { filter: brightness(1.06); }
.wf-btn--sm { font-size: 13px; line-height: 16px; padding: var(--space-2) 12px; }
.wf-btn--lg { font-size: 17px; line-height: 24px; padding: 14px var(--space-4); --c: var(--chamfer-2); }
.wf-btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.wf-btn:focus-visible { outline: var(--stroke) solid var(--steel); outline-offset: 2px; }
/* clip-path hides an outline, so a focused button also paints a ring inside: */
.wf-btn:focus-visible { box-shadow: inset 0 0 0 var(--stroke) var(--surface), inset 0 0 0 4px var(--steel); }
.wf-btn .wf-arrow { display:inline-block; width: 14px; height: 2px; background: currentColor; position: relative; }
.wf-btn .wf-arrow::after { content:""; position:absolute; right:0; top:-3px; width:6px; height:6px; border-top:2px solid currentColor; border-right:2px solid currentColor; transform: rotate(45deg); transform-origin: center; top: -2px; }

/* ---------- Links & focus ---------- */
.wf-link { color: var(--steel); text-decoration: underline; text-decoration-thickness: var(--hairline); text-underline-offset: 3px; }
.wf-link:hover { text-decoration-thickness: var(--stroke); }


/* --- Dark theme, continued: the texture overrides from the bundle, applied
       through prefers-color-scheme as well. ------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tex-corrugated {
    background-image: repeating-linear-gradient(90deg,
      rgba(255,255,255,.14) 0 1px, rgba(255,255,255,.04) 1px 4px,
      rgba(0,0,0,.30) 5px 6.5px, rgba(0,0,0,.12) 6.5px 8px); }
  :root:not([data-theme="light"]) .tex-hammer,
  :root:not([data-theme="light"]) .tex-riffel,
  :root:not([data-theme="light"]) .tex-damast { background-blend-mode: soft-light; }
}


/* --- 7. Site layer --------------------------------------------------------- */

/* Self-hosted fonts. Every file is served from this domain; nothing is requested
   from Google Fonts or any other third party.
     Alte DIN 1451 Mittelschrift — Peter Wiegel, SIL Open Font License 1.1
     Fira Sans, Fira Mono       — Mozilla / Telefónica, SIL Open Font License 1.1
   Licence texts ship alongside the files in assets/fonts/. The DIN faces are
   format conversions of the author's TTFs: no subsetting, no design change, so
   the OFL Reserved Font Name still applies correctly. */
@font-face {
  /* Wiegel's first cut, "exactly per the standard" — DIN 1451 Mittelschrift as
     drawn for Reichsbahn signs and the Autobahn. Claimed through 600 so the
     design system's weight-600 display styles render in it. The tokens specify
     600 because the previews stood in with Barlow Semi Condensed, which needs a
     semibold to hold; authentic DIN does not, and the standard weight is both
     more faithful and quieter. To use the heavier cut instead, move 600 to the
     rule below. */
  font-family: "Alte DIN 1451 Mittelschrift";
  src: url("fonts/din-1451-mittelschrift-400.woff2") format("woff2");
  font-weight: 100 600; font-style: normal; font-display: swap;
}
@font-face {
  /* The author's second cut, "as if embossed". Real outlines for 700+, so a
     bold is never browser-synthesised. */
  font-family: "Alte DIN 1451 Mittelschrift";
  src: url("fonts/din-1451-mittelschrift-700.woff2") format("woff2");
  font-weight: 700 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Fira Sans";
  src: url("fonts/fira-sans-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Fira Mono";
  src: url("fonts/fira-mono-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Fira Mono";
  src: url("fonts/fira-mono-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}

/* The design system's display stack leads with Barlow Semi Condensed, the
   previews' Google-hosted stand-in for DIN. Now that the real DIN is on the
   domain, the stack leads with it and falls back to condensed grotesques the
   OS already has if a woff2 ever fails to load. */
:root {
  --font-display: "Alte DIN 1451 Mittelschrift", "DIN Alternate", "DIN Condensed",
                  "Arial Narrow", "Helvetica Neue Condensed", "Liberation Sans Narrow", sans-serif;
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 28px;
  -webkit-font-smoothing: antialiased;
}
:where(a):focus-visible { outline: var(--stroke) solid var(--steel); outline-offset: 2px; }
.wf-display { font-family: var(--font-display); }

/* Page shells */
.wrap  { max-width: var(--page-width); margin: 0 auto; padding-inline: var(--space-3); }
.prose { max-width: var(--measure); }

/* --- Site header ---------------------------------------------------------- */
.site-header { border-bottom: var(--hairline) solid var(--rule); }
.site-header__in {
  max-width: var(--page-width); margin: 0 auto;
  padding: var(--space-4) var(--space-3);
  /* The lockup is the only thing in the bar now; the document links live in
     the footer on every page. */
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
}
.lockup {
  display: inline-flex; align-items: center; gap: var(--space-2);
  color: var(--ink); text-decoration: none;
  background: var(--surface); padding: 6px 10px 6px 6px;
}
.lockup__words {
  font-family: var(--font-display);
  font-size: 18px; line-height: 24px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
}
/* --- Site footer: a drawing's title block --------------------------------- */
.site-footer { border-top: var(--hairline) solid var(--rule-strong); margin-top: var(--space-8); }
.site-footer__in {
  max-width: var(--page-width); margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.site-footer__field { padding: var(--space-3); border-right: var(--hairline) solid var(--rule); }
.site-footer__field:last-child { border-right: 0; }
.site-footer .wf-meta, .site-footer .wf-meta a { color: var(--ink-muted); }
@media (max-width: 40rem) {
  /* "Fields flow in a grid that drops to one column on phones; keep the order." */
  .site-footer__in { grid-template-columns: 1fr; }
  .site-footer__field { border-right: 0; border-bottom: var(--hairline) solid var(--rule); }
  .site-footer__field:last-child { border-bottom: 0; }
}

/* --- 8. Pages ------------------------------------------------------------- */

/* Home */
.home { padding-top: var(--space-7); }  /* side gutter comes from .wrap */
.home__name {
  font-family: var(--font-display);
  font-size: 64px; line-height: 60px; font-weight: 600; letter-spacing: -.01em;
  margin: 0 0 var(--space-4);
}
.home__lede { margin: 0 0 var(--space-6); }
@media (max-width: 30rem) {
  /* Drop to the next style rather than inventing a size between them. */
  .home__name { font-size: 36px; line-height: 40px; letter-spacing: 0; }
}

/* Legal pages (/eula, /privacy) */
.legal { padding: var(--space-7) var(--space-3) var(--space-5); }
.legal__sheet {
  max-width: var(--measure); margin: 0 auto;
  background: var(--surface-raised);
  border: var(--hairline) solid var(--rule);
  padding: var(--space-5) var(--space-5) var(--space-6);
}
.legal__eyebrow { margin: 0; }
.legal__title {
  font-family: var(--font-display);
  font-size: 36px; line-height: 40px; font-weight: 600;
  margin: var(--space-1) 0 var(--space-2);
}
.legal__updated { margin: 0 0 var(--space-5); color: var(--ink-muted); }
.legal__band { margin: 0 0 var(--space-5); }
.legal__notice { margin: 0 0 var(--space-5); padding: var(--space-3); }
.legal__lede { margin: 0 0 var(--space-5); }
.legal__contact { margin-top: var(--space-6); padding-top: var(--space-3);
  border-top: var(--hairline) solid var(--rule); }
.legal__contact p { margin: 0; }
.legal__contact .wf-meta { margin-top: var(--space-1); }
.legal__notice p { font-size: 15px; line-height: 24px; margin: var(--space-1) 0 0; }
.legal section + section { margin-top: var(--space-5); }
.legal h2 {
  font-family: var(--font-display);
  font-size: 20px; line-height: 26px; font-weight: 600;
  margin: 0 0 var(--space-2); padding-bottom: var(--space-1);
  border-bottom: var(--hairline) solid var(--rule);
  display: flex; gap: var(--space-3);
}
.legal h2 .n {
  font-family: var(--font-mono); font-weight: 500; color: var(--ink-muted);
  font-size: 15px; line-height: 26px; letter-spacing: .04em;
}
/* Scoped to section body copy: the eyebrow, "Last updated" line and the notice
   carry their own margins and must not be flattened by a broader rule. */
.legal section p { margin: 0; }
.legal section p + p { margin-top: var(--space-3); }
@media (max-width: 30rem) {
  .legal { padding-inline: var(--space-3); }
  .legal__sheet { padding: var(--space-4) var(--space-3) var(--space-5); }
}

/* Notice pages (/connect, /disconnect) */
.notice { padding: var(--space-7) var(--space-3) 0; }
.notice__field {
  max-width: var(--page-width); margin: 0 auto;
  padding: var(--space-6) var(--space-4);
}
.notice__card {
  background: var(--surface-raised);
  border: var(--hairline) solid var(--rule-strong);
  padding: var(--space-4); max-width: 420px;
}
.notice__card--edge { border-left: var(--stroke) solid var(--glut); }
.notice__title {
  font-family: var(--font-display);
  font-size: 36px; line-height: 40px; font-weight: 600;
  margin: var(--space-1) 0 var(--space-3);
}
.notice__body { font-size: 15px; line-height: 24px; margin: 0; }
.notice__body + .wf-btn { margin-top: var(--space-4); }
.notice__eyebrow { margin: 0; }