/* Heirstory's pages for search (ticket 190), built by scripts/seo-pages.mjs: the app's colours from web/src/index.css, then scripts/seo-pages.css. */
:root {
  --bg: #f8f6f0;
  --bg-glass: rgba(248, 246, 240, 0.88);
  --surface: #ffffff;
  --card-border: #e2ded4;
  --ink: #1f1d19;
  --ink-head: #141311;
  --muted: #6b675c;
  --faint: #a8a294;
  --rule: #dfdbcf;
  --rule-strong: #bbb6a6;
  --accent: #23583f;
  --accent-soft: rgba(35, 88, 63, 0.08);
  --accent-tint: #e4eee7;
  --accent-ink: #1f4a36;
  --warn: #8f3a2e;
  --fill: #f0ede4;
  --ink-quote: #3e3b32;
  --card-shadow: 0 4px 20px -2px rgba(33, 31, 27, 0.05), 0 1px 3px rgba(33, 31, 27, 0.03);
  --card-shadow-hover: 0 8px 30px -4px rgba(33, 31, 27, 0.09), 0 2px 6px rgba(33, 31, 27, 0.04);
  --line-green: #246347;
  --line-red: #a24131;
  --line-blue: #286386;
  --line-purple: #5d497c;
  --line-amber: #b87333;
  --line-teal: #1f6f6a;
  --line-rose: #9a3d63;
  --line-slate: #4f5d6b;
  --display: 'Old Standard TT', Georgia, serif;
  --serif: 'Spectral', Georgia, 'Times New Roman', serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --sans: var(--serif);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #131613;
    --bg-glass: rgba(19, 22, 19, 0.88);
    --surface: #191e19;
    --card-border: #2c332c;
    --ink: #eae6db;
    --ink-head: #f5f2e8;
    --muted: #a7a396;
    --faint: #6d685f;
    --rule: #2a312a;
    --rule-strong: #404b40;
    --accent: #78c59b;
    --accent-soft: rgba(120, 197, 155, 0.12);
    --accent-tint: #1f2e25;
    --accent-ink: #cfe8da;
    --warn: #e09485;
    --fill: #1c211c;
    --ink-quote: #d0ccc0;
    --card-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.2);
    --card-shadow-hover: 0 8px 30px -4px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.3);
    --line-green: #60b689;
    --line-red: #e28778;
    --line-blue: #75b7dc;
    --line-purple: #ad9cd0;
    --line-amber: #e09858;
    --line-teal: #5cc0b8;
    --line-rose: #e08bb0;
    --line-slate: #9fb0c2;
    color-scheme: dark;
  }
}

@font-face {
  font-family: 'Old Standard TT';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/old-standard-tt-latin-400-normal.woff2) format('woff2');
}

@font-face {
  font-family: 'Old Standard TT';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/old-standard-tt-latin-400-italic.woff2) format('woff2');
}

@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(fonts/spectral-latin-300-normal.woff2) format('woff2');
}

@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/spectral-latin-400-normal.woff2) format('woff2');
}

@font-face {
  font-family: 'Spectral';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/spectral-latin-400-italic.woff2) format('woff2');
}

@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/spectral-latin-600-normal.woff2) format('woff2');
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/ibm-plex-mono-latin-500-normal.woff2) format('woff2');
}

/*
 * The pages for search (ticket 190): the guides, the comparisons and the
 * questions page, as calm to read as the front page. scripts/seo-pages.mjs puts
 * the app's colours and fonts ahead of this, so every colour here is one of
 * the app's own tokens, light and dark alike. No style is written in a page
 * itself: the site's CSP allows only its own stylesheets.
 */

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 18px/1.65 var(--serif);
}

a {
  color: var(--accent);
  text-underline-offset: 2px;
}

a:focus-visible,
.table-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

h1,
h2,
h3 {
  font-family: var(--display);
  font-weight: 400;
  line-height: 1.2;
  color: var(--ink-head);
  overflow-wrap: break-word;
}

strong {
  font-weight: 600;
  color: var(--ink-head);
}

/* For a keyboard: straight to the words, past the bar. */
.skip {
  position: absolute;
  left: 16px;
  top: -100px;
  padding: 8px 14px;
  background: var(--surface);
  border: 1px solid var(--card-border);
  border-radius: 8px;
}

.skip:focus {
  top: 12px;
}

/* Heirstory's wordmark, drawn as the app draws it (web/src/Wordmark.tsx): the heir upright, the story in italic, over a band for four lines. */
.wordmark {
  display: inline-flex;
  flex-direction: column;
  gap: 0.16em;
  font-family: var(--display);
  font-weight: 400;
  line-height: 1;
  color: var(--ink-head);
}

.wordmark em {
  font-style: italic;
  color: var(--accent);
}

.wordmark.banded::after {
  content: '';
  display: block;
  height: max(2px, 0.08em);
  border-radius: 2px;
  background: linear-gradient(
    90deg,
    var(--line-green) 0 23.5%,
    transparent 23.5% 25.5%,
    var(--line-red) 25.5% 49%,
    transparent 49% 51%,
    var(--line-blue) 51% 74.5%,
    transparent 74.5% 76.5%,
    var(--line-purple) 76.5%
  );
}

/* The bar, as the front page's: the name on the left, the places on the right. */
.bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 10px 24px;
  max-width: 1120px;
  margin: 0 auto;
  padding: 18px 16px;
}

.bar .brand {
  font-size: 30px;
  text-decoration: none;
}

.places {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
  font-size: 16px;
}

.places a[aria-current='page'] {
  text-decoration-thickness: 2px;
  color: var(--ink-head);
}

.places .start-link {
  padding: 6px 14px;
  border-radius: 8px;
  background: var(--accent);
  color: var(--bg);
  font-weight: 600;
  text-decoration: none;
}

/* The words: one readable column. */
.page {
  max-width: calc(68ch + 32px);
  margin: 0 auto;
  padding: 12px 16px 64px;
  overflow-wrap: break-word;
}

.page h1 {
  margin: 0.3em 0 0.5em;
  font-size: clamp(32px, 6vw, 46px);
}

.page h2 {
  margin: 2em 0 0.5em;
  font-size: clamp(25px, 3.6vw, 30px);
}

.page h3 {
  margin: 1.6em 0 0.4em;
  font-size: 21px;
}

.page p,
.page ul,
.page ol {
  margin: 0 0 1em;
}

.page ul,
.page ol {
  padding-inline-start: 1.4em;
}

.page li {
  margin: 0 0 0.45em;
  padding-inline-start: 0.2em;
}

.page li::marker {
  color: var(--muted);
}

.page code {
  font: 500 0.85em var(--mono);
  padding: 1px 5px;
  background: var(--fill);
  border-radius: 4px;
}

/* The first paragraph answers the question, so it is set a little larger and lighter. */
.page .lede {
  font-size: 21px;
  font-weight: 300;
  line-height: 1.55;
  color: var(--ink-quote);
}

/* Above the heading, the hub it belongs to; under a comparison's, when its facts were checked. Both as the library's quiet lines. */
.crumb,
.checked {
  font: 500 11.5px/1.4 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.page .crumb {
  margin: 12px 0 0;
}

.crumb a {
  color: var(--muted);
  text-decoration: none;
}

.crumb a:hover {
  color: var(--accent);
}

.page .checked {
  margin: -0.4em 0 1.6em;
}

/* A table sits in a card, and scrolls sideways inside it when it is wider than a phone; the page itself never does. */
.table-card {
  margin: 1.4em 0 1.6em;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  background: var(--surface);
  border: 1px solid var(--card-border);
  border-radius: 10px;
  box-shadow: var(--card-shadow);
}

.table-card table {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
  line-height: 1.45;
}

.table-card th,
.table-card td {
  min-width: 9em;
  padding: 11px 14px;
  text-align: start;
  vertical-align: top;
  border-bottom: 1px solid var(--rule);
}

.table-card thead th {
  font: 400 18px/1.25 var(--display);
  color: var(--ink-head);
  border-bottom-color: var(--rule-strong);
}

.table-card tbody th {
  font-weight: 600;
  color: var(--ink-head);
}

.table-card tbody tr:last-child > * {
  border-bottom: 0;
}

/* The row's name stays in view while the rest scrolls past it. */
.table-card tr > :first-child {
  position: sticky;
  left: 0;
  background: var(--surface);
}

.table-card .al-c {
  text-align: center;
}

.table-card .al-r {
  text-align: end;
}

/* The questions: each one a heading, its answer under it, a rule between. */
.questions .qa {
  padding: 4px 0 2px;
  border-top: 1px solid var(--rule);
}

.questions .qa:last-child {
  border-bottom: 1px solid var(--rule);
}

.questions h3 {
  margin: 0.9em 0 0.35em;
}

/* The way to start: the site's own primary button. */
.page .start {
  margin: 2.2em 0 0;
}

.button {
  display: inline-block;
  padding: 12px 24px;
  border-radius: 8px;
  background: var(--accent);
  color: var(--bg);
  font-weight: 600;
  text-decoration: none;
}

.button:hover {
  filter: brightness(1.08);
}

/* A hub's pages and a page's closing links, as cards like the library's. */
.hub,
.more {
  margin: 2.4em 0 0;
}

.more {
  padding-top: 0.4em;
  border-top: 1px solid var(--rule);
}

.page .cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page .cards li {
  margin: 0;
  padding: 0;
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--card-border);
  border-inline-start: 5px solid var(--accent);
  border-radius: 10px;
  box-shadow: var(--card-shadow);
}

.page .cards li:hover {
  box-shadow: var(--card-shadow-hover);
}

.cards a {
  display: grid;
  gap: 6px;
  height: 100%;
  padding: 18px 20px;
  color: var(--ink);
  text-decoration: none;
}

.cards strong {
  font: 400 21px/1.2 var(--display);
  color: var(--ink-head);
}

.cards a:hover strong {
  color: var(--accent);
}

.cards span {
  font-size: 15px;
  line-height: 1.5;
  color: var(--muted);
}

/* The foot, as the front page's. */
.foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  max-width: 1120px;
  margin: 0 auto;
  padding: 26px 16px 40px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
  border-top: 1px solid var(--rule);
}

/* A phone: the places under the name, and the words a touch smaller. */
@media (max-width: 560px) {
  body {
    font-size: 17px;
  }

  .bar {
    padding: 14px 16px 10px;
  }

  .bar .brand {
    font-size: 26px;
  }

  .places {
    gap: 8px 14px;
    font-size: 15px;
  }

  .places .start-link {
    padding: 4px 10px;
  }

  .page .lede {
    font-size: 19px;
  }

  .table-card th,
  .table-card td {
    min-width: 8em;
    padding: 10px 12px;
  }
}