/* The front door. Tokens from tokens.css, which is generated from src/theme.ts. */
*,*::before,*::after { box-sizing:border-box; }

/* ---------- the ground, and the sheet on it ----------
 *
 * **A site value, not an app token**, and there is precedent one directory up:
 * the handbook defines its own `--d-*` for the drawings because the app's
 * palette is tuned for a phone held at arm's length rather than for a page.
 * `--bg` is a whole screen in the app; on a 720px column in the middle of a
 * browser window it is a lot of flat tan.
 *
 * **Dark flips which way the separation goes, and that is not a compromise.**
 * The handbook's own note says the same thing about its drawings. On paper the
 * ground goes *down* from the sheet — `#E2D7C9` under `--bg`, sitting between
 * it and `--bgSelected` without being either, since the selected tint means
 * *this one is chosen* and a ground borrowing it would put a selection colour
 * behind every page.
 *
 * In the dark palette there is nowhere down to go: `--bg` is `#1A1613` and even
 * pure black only reaches 1.17 against it. So the **sheet goes up** instead —
 * `--bgRaised` on a `--bg` ground — which is `theme.ts`'s own model read
 * straight, and gives real separation rather than a darker shade of nothing.
 */
:root { --ground: #E2D7C9; --sheet: var(--bg); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --ground: var(--bg); --sheet: var(--bgRaised); }
}

body { margin:0; background:var(--ground); color:var(--text);
       font:18px/29px var(--read); -webkit-text-size-adjust:100%; }
.wrap {
  max-width:680px; margin:0 auto; padding:0 var(--space-md) 72px;
  background:var(--sheet); border-left:1px solid var(--line); border-right:1px solid var(--line);
  min-height:80vh;
}
@media (max-width:740px) {
  .wrap { border-left:0; border-right:0; max-width:none; }
}

.bar { display:flex; align-items:center; gap:var(--space-md);
       padding:14px var(--space-md); border-bottom:1px solid var(--line); }
.bar .brand { font:700 20px/26px var(--read); color:var(--text); text-decoration:none; }
.bar nav { margin-left:auto; display:flex; gap:var(--space-md); }
.bar nav a { font:13px/20px var(--meta); color:var(--textSoft); text-decoration:none; }
.bar nav a:hover { color:var(--text); }

.hero { padding:64px 0 8px; }
/* **Two generated files rather than one masked one.** `make-icon.py`'s
   `splash()` already emits the mark on transparency in each appearance's moss
   -- #49704E and #86B48C -- so the right file is the right colour with nothing
   to tint. A CSS mask worked in principle and rendered nothing here, which is
   the wrong trade for a logo: an image that fails is a missing logo, and a
   mask that fails is a blank div. */
.acorn { display:block; width:54px; height:54px; margin:0 0 22px; }
.acorn .dark { display:none; }
@media (prefers-color-scheme:dark) {
  .acorn .light { display:none; }
  .acorn .dark  { display:block; }
}
h1 { font:600 46px/52px var(--read); letter-spacing:-.015em; margin:0 0 12px; text-wrap:balance; }
.tag { font:20px/31px var(--read); color:var(--textSoft); margin:0 0 var(--space-lg); max-width:32ch; }
mark { background:var(--accent); color:var(--accentText); padding:1px 3px; }

h2 { font:600 27px/34px var(--read); margin:56px 0 12px; letter-spacing:-.01em; text-wrap:balance; }
h3 { font:11px/18px var(--meta); letter-spacing:.16em; text-transform:uppercase;
     color:var(--textSoft); font-weight:400; margin:34px 0 8px; }
p { margin:0 0 18px; }
.lede { font-size:20px; line-height:31px; color:var(--textSoft); }
a { color:var(--link); }

.acts { display:flex; gap:var(--space-sm); flex-wrap:wrap; margin:0 0 var(--space-lg); }
.btn { display:inline-block; font:13px/18px var(--meta); text-decoration:none;
       border:1px solid var(--lineStrong); border-radius:var(--radius-sm);
       padding:12px 16px; color:var(--text); }
.btn:hover { background:var(--bgSelected); }
.btn.fill { background:var(--primary); border-color:var(--primary); color:var(--primaryText); }

.halves { display:grid; grid-template-columns:1fr 1fr; gap:1px;
          background:var(--line); border:1px solid var(--line); margin:var(--space-lg) 0; }
.half { background:var(--bg); padding:var(--space-md); }
.half .k { font:11px/18px var(--meta); letter-spacing:.14em; text-transform:uppercase;
           color:var(--primary); margin:0 0 6px; }
.half h4 { font:600 21px/27px var(--read); margin:0 0 6px; }
.half p { font-size:15px; line-height:23px; color:var(--textSoft); margin:0 0 12px; }
.half a { font:12px/18px var(--meta); }
@media (max-width:620px) { .halves { grid-template-columns:1fr; } h1 { font-size:36px; line-height:42px; } }

ul { margin:0 0 18px; padding-left:20px; }
li { margin:0 0 10px; }

.claims { border-top:1px solid var(--line); margin-top:var(--space-lg); }
.claim { border-bottom:1px solid var(--line); padding:var(--space-md) 0; }
.claim .t { font:600 17px/24px var(--read); margin:0 0 4px; }
.claim p { font-size:15px; line-height:23px; color:var(--textSoft); margin:0; }

footer { border-top:1px solid var(--line); margin-top:var(--space-xl);
         padding-top:var(--space-lg); font:12px/21px var(--meta); color:var(--textSoft); }
footer a { color:var(--textSoft); }
a:focus-visible,.btn:focus-visible { outline:2px solid var(--link); outline-offset:2px; }