/* Shared datasheet base for every page: fonts, colour tokens, sheet frame, header, button and toast.
   Page-specific rules stay inline in each page and load after this file, so they win on equal specificity. */

/* Barlow (SIL OFL), self-hosted so no visitor data goes to Google. Browsers only fetch the weights a page uses. */
@font-face{font-family:Barlow;font-weight:400;font-display:swap;src:url(fonts/barlow-400.woff2) format("woff2")}
@font-face{font-family:Barlow;font-weight:500;font-display:swap;src:url(fonts/barlow-500.woff2) format("woff2")}
@font-face{font-family:Barlow;font-weight:600;font-display:swap;src:url(fonts/barlow-600.woff2) format("woff2")}
@font-face{font-family:"Barlow Semi Condensed";font-weight:500;font-display:swap;src:url(fonts/barlow-semi-condensed-500.woff2) format("woff2")}
@font-face{font-family:"Barlow Semi Condensed";font-weight:600;font-display:swap;src:url(fonts/barlow-semi-condensed-600.woff2) format("woff2")}

/* Datasheet tokens: black ink on white paper, one signal blue (RAL 5017) reserved for deadlines. */
:root{--desk:#d9dcde;--paper:#fff;--ink:#000;--muted:#4b545b;--grid:#b3b9be;--signal:#005387;--hatch:#dce8f1;--field:#f4f5f6}
@media (prefers-color-scheme:dark){:root{--desk:#1b1e20;--paper:#25292c;--ink:#eceeef;--muted:#a9b1b7;--grid:#4f575d;--signal:#7db7e8;--hatch:#2b3d4c;--field:#1f2326}}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--desk);color:var(--ink);font:400 17px/1.55 Barlow,"Helvetica Neue",Arial,sans-serif;font-variant-numeric:tabular-nums}
a{color:inherit;text-underline-offset:.18em}
:focus-visible{outline:2px solid var(--signal);outline-offset:2px}

/* The sheet of paper on the desk, with the datasheet header row */
.sheet{max-width:980px;margin:32px auto;padding:0 48px 48px;background:var(--paper);border:1px solid var(--grid)}
.head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;padding:22px 0 12px;border-bottom:3px solid var(--ink)}
.mark{font:600 24px/1 "Barlow Semi Condensed",sans-serif;letter-spacing:.01em;text-decoration:none}
.doc{font:500 15px/1.3 "Barlow Semi Condensed",sans-serif;text-align:right}
.doc span{display:block;color:var(--muted)}
h1{font:600 clamp(30px,4.4vw,42px)/1.12 "Barlow Semi Condensed",sans-serif}

.cta{display:inline-block;padding:14px 24px;background:var(--ink);color:var(--paper);border:2px solid var(--ink);border-radius:2px;font:600 18px/1 "Barlow Semi Condensed",sans-serif;cursor:pointer;text-decoration:none}
.cta:hover{background:var(--signal);border-color:var(--signal)}
.cta:disabled{opacity:.45;cursor:default}

/* Confirmation after a form is sent: the note slides in at the bottom. */
.toast{position:fixed;left:50%;bottom:24px;z-index:10;width:max-content;max-width:calc(100% - 32px);padding:14px 20px 14px 18px;background:var(--paper);color:var(--ink);border:2px solid var(--ink);border-left:8px solid var(--signal);font:500 17px/1.4 "Barlow Semi Condensed",sans-serif;transform:translate(-50%,0);transition:opacity .25s,transform .25s}
.toast[hidden]{display:block;visibility:hidden;opacity:0;transform:translate(-50%,12px)}
@media (prefers-reduced-motion:reduce){.toast,.toast[hidden]{transition:none;transform:translate(-50%,0)}}

@media (max-width:760px){
  .sheet{margin:0;padding:0 16px 32px;border:0}
  .doc span{display:none}
}