/* The site in the app's redesign (entirehistoryofusapp, design/redesign/BRIEF.md):
   light only, the brief's lead "paper" mode, like every capture and the share
   image (Leo, 2026-10-09). The app's night palette is in its palette.dart if
   a dark mode is ever wanted here. Values are the app's own
   (lib/styles/palette.dart). /assets/* is cached immutable, so a change to
   this file means a new filename. */

/* CH Text: Cooper Hewitt (Smithsonian, OFL) as the app modifies and renames it;
   Instrument Serif (OFL). Subset to Latin + Latin Extended; licences beside. */
@font-face { font-family: 'CH Text'; src: url('/assets/fonts/CHText-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'CH Text'; src: url('/assets/fonts/CHText-400-Italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'CH Text'; src: url('/assets/fonts/CHText-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Instrument Serif'; src: url('/assets/fonts/InstrumentSerif-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Instrument Serif'; src: url('/assets/fonts/InstrumentSerif-400-Italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }

:root {
  color-scheme: light;
  --paper: #F3EEE4;          /* every screen's ground */
  --raised: #FAF7F1;         /* floating things, inputs on hover */
  --sunk: #E9E2D5;           /* alternate lanes, wells, input fields */
  --rule: #D8CFBF;           /* hairlines */
  --rule-strong: #23211D;    /* the rule under a section heading */
  --ink: #23211D;
  --ink2: #5F594F;
  --terracotta: #B4613F;     /* link underline */
  --terracotta-text: #9A4B2D;
  --ochre: #C49A3C;          /* selection; never text */
  --ochre-text: #7A5A12;     /* years and dates */
  --on-ochre: #23211D;
  --sage-text: #4F6354;
  --halo: #FAF7F1;           /* a record dot: halo, ink ring, pastel fill */
  --ring: #23211D;
  --display: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
  --text: 'CH Text', 'Helvetica Neue', Arial, sans-serif;
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--text); font-size: 17px; line-height: 27px;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
a { color: var(--ink); text-decoration-color: var(--terracotta); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--terracotta-text); }
:focus-visible { outline: 2px solid var(--ochre); outline-offset: 3px; }
.wrap { max-width: 1040px; margin: 0 auto; padding: 0 24px; }
@media (max-width: 480px) { .wrap { padding: 0 16px; } }

/* Kickers and section labels: the app's h4, spaced capitals. */
.kicker {
  font: 600 12.5px/16px var(--text); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink2); margin: 0 0 14px;
}
.kicker.year, .year { color: var(--ochre-text); }
.num { font-variant-numeric: tabular-nums; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--ochre); color: var(--on-ochre); border: 0; border-radius: 99px;
  padding: 0 24px; height: 48px; font: 600 15px/1 var(--text); text-decoration: none;
  cursor: pointer; white-space: nowrap; transition: filter 0.15s ease;
}
.btn:hover { color: var(--on-ochre); filter: brightness(1.06); }
.btn-ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--rule); }
.btn-ghost:hover { color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); filter: none; }

/* A record as the app draws one: pale halo, ink ring, the line's pastel. */
.dot {
  display: inline-block; width: 11px; height: 11px; border-radius: 50%; flex: none;
  background: var(--c, #A9A296);
  box-shadow: 0 0 0 1.25px var(--ring), 0 0 0 2.75px var(--halo);
}

/* Nav and footer, shared by every page. */
.site-nav { border-bottom: 1px solid var(--rule); }
.site-nav .wrap { display: flex; justify-content: space-between; align-items: center; height: 72px; gap: 16px; }
.wordmark { display: flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; }
.wordmark:hover { color: var(--ink); }
.wordmark img { width: 34px; height: 34px; border-radius: 50%; }
.wordmark span { font: 400 24px/1 var(--display); letter-spacing: 0.005em; }
.site-nav .btn { height: 40px; padding: 0 18px; font-size: 14px; }
.site-foot { border-top: 1px solid var(--rule); margin-top: 96px; }
.site-foot .wrap { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding-block: 28px; font-size: 14px; color: var(--ink2); }
.site-foot nav { display: flex; gap: 20px; flex-wrap: wrap; }
.site-foot a { color: var(--ink2); }
@media (max-width: 480px) { .wordmark span { font-size: 20px; } }