/*
  The Rimbalo pages' one stylesheet. Palette and faces from docs/BRAND.md §8: warm paper and ink, one Oxblood accent
  (a separate dark-mode token, as light Oxblood fails AA on Ink), Newsreader for what we say, IBM Plex Sans for the
  interface, IBM Plex Mono for what the reader can check. Fonts are served from fonts/, never a font CDN: the pages make
  no request off this site.
*/
@font-face { font-family: "Newsreader"; src: url("fonts/newsreader_regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("fonts/newsreader_semibold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("fonts/plex_sans_regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("fonts/plex_sans_semibold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("fonts/plex_mono_regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  --paper: #F7F4ED;
  --paper-shade: #EFEAE0;
  --ink: #14120E;
  --slate: #5C574B;
  --accent: #7A1F1F;
  --rule: #DED7C7;
  --serif: "Newsreader", Georgia, serif;
  --sans: "IBM Plex Sans", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #14120E;
    --paper-shade: #221F19;
    --ink: #F7F4ED;
    --slate: #A8A296;
    --accent: #CE6550;
    --rule: #3A362E;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 17px/1.6 var(--sans);
}
.page { max-width: 44rem; margin: 0 auto; padding: 0 16px 64px; }

header.site {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px;
  padding: 20px 0; border-bottom: 1px solid var(--rule);
}
.wordmark { font: 600 1.5rem/1 var(--serif); color: var(--ink); text-decoration: none; }
nav.site { display: flex; flex-wrap: wrap; gap: 4px 20px; font-size: 0.95rem; }
nav.site a { color: var(--slate); text-decoration: none; }
nav.site a:hover, nav.site a[aria-current="page"] { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

a { color: var(--accent); text-underline-offset: 2px; }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.2; }
h1 { font-size: clamp(2rem, 6vw, 2.75rem); margin: 48px 0 16px; }
h2 { font-size: 1.6rem; margin: 48px 0 12px; }
h3 { font-size: 1.2rem; margin: 28px 0 8px; }
p, li { max-width: 40rem; }
.lede { font: 400 1.3rem/1.5 var(--serif); }
.for { font: 500 1.05rem/1.4 var(--sans); color: var(--slate); margin-top: -8px; }
.meta { color: var(--slate); font-size: 0.95rem; }
.quiet { color: var(--slate); }

/* What we merely assert: the serif. */
.said { font: 400 1.15rem/1.55 var(--serif); }

/* What the reader can check: mono, always with its tap path. Never decorative. */
.check { font: 400 1rem/1.5 var(--mono); margin: 28px 0 0; }
.path { font: 400 0.9rem/1.5 var(--mono); color: var(--slate); margin: 4px 0 0; }
.check + .path + .said, .path + .said { margin-top: 8px; }
.small .check, .small .path, .small .said { font-size: 0.8rem; }
.small { margin-top: 40px; }
.small h3 { font: 400 0.85rem/1.4 var(--serif); color: var(--slate); margin: 0; }
.small .check { margin-top: 8px; }

.lines { list-style: none; padding: 0; margin: 24px 0; }
.lines li { font: 400 1.25rem/1.45 var(--serif); padding: 12px 0 12px 20px; border-left: 3px solid var(--accent); margin: 0 0 12px; }

table { border-collapse: collapse; width: 100%; margin: 16px 0; font-size: 0.95rem; }
th, td { text-align: left; vertical-align: top; padding: 10px 8px; border-bottom: 1px solid var(--rule); }
th { font-weight: 600; }
td.yes::before { content: "✓"; color: var(--accent); }
.scroll { overflow-x: auto; }

.stores { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0; }
.stores a {
  display: inline-block; padding: 12px 20px; border: 1px solid var(--ink); border-radius: 6px;
  color: var(--ink); text-decoration: none; font-weight: 600;
}
.stores a:hover { background: var(--paper-shade); }

pre, code { font-family: var(--mono); font-size: 0.9rem; }
pre { background: var(--paper-shade); padding: 12px 16px; border-radius: 6px; overflow-x: auto; }


footer.site { margin-top: 64px; padding-top: 20px; border-top: 1px solid var(--rule); color: var(--slate); font-size: 0.9rem; }
footer.site a { color: var(--slate); }