/* The paper look, shared by the landing page (landing.css adds the moving desk) and, lighter, the sign-in page and the
   guest first look: paper, the colours and the headline font, no desk and no pen. Design: notes/brand and design/
   Brand concept - Whomwise first light 3. Fonts are self-hosted (SIL OFL 1.1, licences in static/fonts/); all Latin.
   Tokens live on body.paper so the product's own pages are untouched. The design's ballpoint blue is --pen here,
   because the product's --ink is its text colour. */
@font-face { font-family: "Newsreader"; src: url("fonts/newsreader-latin-opsz-normal.woff2") format("woff2"); font-weight: 400 600; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Atkinson Hyperlegible Mono"; src: url("fonts/atkinson-hyperlegible-mono-latin-wght-normal.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Nanum Pen Script"; src: url("fonts/nanum-pen-script-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

body.paper {
  --desk: #e8ebf0; --sheet: #fdfdfc; --graphite: #1f2228; --graphite-2: #565c68; --pen: #1f3fb8;
  --marigold: #f7ae1d; --on-marigold: #1a1c20; --hl: rgba(247, 174, 29, .62); --hl-blend: multiply; --hl-top: .42;
  --tape: rgba(247, 174, 29, .36); --rule: #c9d6ee; --margin: #e6a1a1; --shadow: rgba(28, 34, 52, .17);
  --light: rgba(255, 228, 180, .6); --blind: rgba(40, 48, 70, .035); --scrim: rgba(232, 235, 240, .82); --grain: none;
  --font-headline: "Newsreader", Georgia, serif;
  --font-hand: "Nanum Pen Script", "Bradley Hand", "Segoe Print", "Comic Sans MS", cursive;
  --font-mono: "Atkinson Hyperlegible Mono", ui-monospace, "SF Mono", Menlo, monospace;
  /* the product's tokens, pointed at the paper so its cards, buttons and fields take the look */
  --paper: var(--desk); --surface: var(--sheet); --surface-2: #eef0f4; --line: var(--rule); --line-strong: #7b8294;
  --ink: var(--graphite); --ink-2: var(--graphite-2); --accent: var(--marigold); --accent-ink: var(--on-marigold); --focus: var(--pen);
  --accent-soft: #fdeec9; --accent-text: #8a5700;
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) body.paper {
    --desk: #0f1115; --sheet: #1b1e25; --graphite: #eceef2; --graphite-2: #a4abb8; --pen: #a3b8ff;
    --marigold: #f9b940; --hl: rgba(249, 185, 64, .88); --hl-blend: normal; --hl-top: .76; --tape: rgba(249, 185, 64, .26);
    --rule: #2b3447; --margin: #5d3338; --shadow: rgba(0, 0, 0, .55);
    --light: rgba(170, 190, 255, .11); --blind: rgba(0, 0, 0, .16); --scrim: rgba(15, 17, 21, .8);
    --surface-2: #242834; --line-strong: #6b7488; --accent-soft: #3a2e10; --accent-text: #f9b940; color-scheme: dark;
  }
}
html[data-theme="dark"] body.paper {
  --desk: #0f1115; --sheet: #1b1e25; --graphite: #eceef2; --graphite-2: #a4abb8; --pen: #a3b8ff;
  --marigold: #f9b940; --hl: rgba(249, 185, 64, .88); --hl-blend: normal; --hl-top: .76; --tape: rgba(249, 185, 64, .26);
  --rule: #2b3447; --margin: #5d3338; --shadow: rgba(0, 0, 0, .55);
  --light: rgba(170, 190, 255, .11); --blind: rgba(0, 0, 0, .16); --scrim: rgba(15, 17, 21, .8);
  --surface-2: #242834; --line-strong: #6b7488; --accent-soft: #3a2e10; --accent-text: #f9b940; color-scheme: dark;
}
body.paper { background: var(--desk); color: var(--graphite); }
body.paper::before { display: none; }   /* the page's own paper replaces the grain */

/* the lighter treatment: sign-in and the first look */
body.paper .display, body.paper h1 { font-family: var(--font-headline); font-weight: 400; letter-spacing: -.03em; line-height: 1.04; }
body.paper .display { font-size: clamp(2.2rem, 1.4rem + 3.4vw, 3.6rem); }
body.paper .card, body.paper .story-note { background-color: var(--sheet); border: 0; border-radius: 2px; box-shadow: 0 1px 1px var(--shadow), 0 22px 44px -18px var(--shadow); }
body.paper .story-note { padding: var(--sp-4) var(--sp-5); border-top: 0; }
body.paper .btn { min-height: 44px; }
body.paper .btn.primary { background: var(--marigold); border-color: var(--marigold); color: var(--on-marigold); border-radius: 4px 2px 5px 3px; box-shadow: none; }
body.paper .btn.primary:hover { background: var(--accent-press); border-color: var(--accent-press); }
body.paper .btn.lg { border-radius: 4px 2px 5px 3px; }
body.paper .input { background: var(--sheet); color: var(--graphite); min-height: 44px; }
body.paper a { text-underline-offset: .18em; }
body.paper .mark-u-line path { stroke: var(--hl); }
body.paper .lead, body.paper .muted { color: var(--graphite-2); }
body.paper .fit { font-family: var(--font-mono); }