/* witheveryreason.org: one stylesheet for every page. Built into public/assets/site.css by build_site.py.
   The books' own faces (EB Garamond for reading and headings, Geist for labels), served from this site, nothing
   loaded from anywhere else. The colours are the covers' (build/covers.py, build/palette.py "Cobalt & Tangerine"):
   warm paper above, a tangerine band, cobalt below, as on a reader's book. Contrast on the page colour: ink 15.4:1,
   muted 6.8:1, cobalt 5.9:1, white on cobalt 6.2:1. Tangerine is never text. */

@font-face { font-family: "EB Garamond"; src: url("/fonts/ebgaramond-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("/fonts/ebgaramond-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("/fonts/ebgaramond-medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("/fonts/ebgaramond-semibold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist"; src: url("/fonts/geist-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist"; src: url("/fonts/geist-medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist"; src: url("/fonts/geist-semibold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

:root {
  color-scheme: light;
  --paper: #fbf9f4;          /* palette.py SCREEN: the screen edition's page */
  --paper-cover: #f4efee;    /* covers.py PAPER */
  --ink: #24201e;
  --muted: #5d5754;
  --rule: #ddd6d2;
  --cobalt: #2457d6;
  --cobalt-line: #1c4ecd;    /* the squared paper printed in the cobalt: half covers.py FIELD_LINE (#1545c3), which reads heavy on a screen */
  --deep: #11338a;
  --tangerine: #ff8a3d;
  --serif: "EB Garamond", Garamond, "Iowan Old Style", "Times New Roman", serif;
  --sans: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --measure: 31rem;
  --gutter: 16px;
}

html { font-size: 112.5%; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (min-width: 48em) { html { font-size: 125%; } :root { --gutter: 32px; } }

*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--serif); font-size: 1rem; line-height: 1.5;
  font-kerning: normal; font-variant-ligatures: common-ligatures; font-variant-numeric: lining-nums proportional-nums;
  display: flex; flex-direction: column; min-height: 100vh;
  overflow-wrap: break-word;
}
main { flex: 1 0 auto; }
img, svg { max-width: 100%; }

a { color: var(--cobalt); text-decoration-thickness: 1px; text-underline-offset: 0.16em; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible { outline: 3px solid var(--tangerine); outline-offset: 2px; border-radius: 2px; }

.skip { position: absolute; left: -999px; top: 0; background: var(--ink); color: #fff; padding: 0.5rem 1rem; font-family: var(--sans); font-size: 0.8rem; z-index: 2; }
.skip:focus { left: var(--gutter); top: 0.5rem; }

.wrap { width: 100%; max-width: 48rem; margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- the head of every page ---------- */
.site-head { padding: 1.1rem 0 0.9rem; }
.site-head .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem 1.5rem; }
.brand { display: inline-flex; align-items: center; gap: 0.55rem; color: var(--ink); text-decoration: none;
  font-family: var(--serif); font-weight: 500; font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; }
.brand svg { width: 1.6rem; height: auto; flex: none; }
.site-head nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.2rem 1.3rem; }
.site-head nav a { font-family: var(--sans); font-size: 0.78rem; font-weight: 500; color: var(--ink); text-decoration: none;
  padding: 0.35rem 0; display: inline-block; border-bottom: 2px solid transparent; }
.site-head nav a:hover { border-bottom-color: var(--rule); }
.site-head nav a[aria-current="page"] { border-bottom-color: var(--tangerine); }

/* ---------- type ---------- */
h1, h2, h3 { font-family: var(--serif); font-weight: 500; line-height: 1.15; margin: 0; text-wrap: balance; }
h1 { font-size: 2.3rem; letter-spacing: -0.005em; margin: 0 0 0.6rem; }
@media (min-width: 48em) { h1 { font-size: 3rem; } }
h1 .t2, h1 .t3 { display: block; font-style: italic; font-weight: 400; }
h1 .t2 { font-size: 0.62em; margin-top: 0.3rem; }
h1 .t3 { font-size: 0.45em; margin-top: 0.15rem; }
h2 { font-size: 1.5rem; margin: 2.6rem 0 0.7rem; }
h3 { font-size: 1.15rem; margin: 1.7rem 0 0.4rem; }
p, ul, ol, dl { margin: 0 0 1rem; }
.prose > p, .prose > ul, .prose > ol, .prose > h2, .prose > h3, .measure { max-width: var(--measure); }
p { hyphens: auto; -webkit-hyphens: auto; }
b, strong { font-weight: 600; }

.kicker, .label {
  font-family: var(--sans); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted); line-height: 1.5;
}
.kicker { margin: 0 0 0.6rem; }
.kicker a { color: inherit; text-decoration: none; }
.kicker a:hover { color: var(--cobalt); }
.lede { font-size: 1.2rem; line-height: 1.45; font-style: italic; max-width: 28rem; margin-bottom: 1.6rem; }
.newthought { font-variant-caps: all-small-caps; letter-spacing: 0.05em; font-feature-settings: "c2sc", "smcp"; }
.note { color: var(--muted); }
.plain { font-family: var(--sans); font-size: 0.8rem; line-height: 1.5; }

.page-top { padding-top: 1.6rem; }
@media (min-width: 48em) { .page-top { padding-top: 2.6rem; } }

/* The band: the series' rubber band, drawn once across a page under its title, as the band crosses a cover. */
.band { height: 6px; background: var(--tangerine); border: 0; margin: 1.6rem 0 2rem; width: 100%; }

/* ---------- home: the shelf ---------- */
.shelf { display: flex; align-items: flex-end; gap: clamp(3px, 1.2vw, 12px); margin: 0.6rem 0 2.4rem; }
.shelf svg { flex: 1 1 0; min-width: 0; height: auto; display: block; box-shadow: 0 1px 0 rgba(36, 32, 30, 0.08), 0 4px 10px -6px rgba(36, 32, 30, 0.35); }
.shelf .gap { flex: 0 0 clamp(4px, 2vw, 22px); }

/* ---------- home: who is teaching (two paths) ---------- */
.paths { display: grid; grid-template-columns: 1fr; gap: 0 2.5rem; margin-top: 0.5rem; }
@media (min-width: 48em) { .paths { grid-template-columns: 1fr 1fr; } }
.paths h3 { margin-top: 1.2rem; }
.paths p { max-width: var(--measure); }
.paths .plain-table { margin-top: 0.8rem; }
.paths .callout { margin: 1.2rem 0; }

.titles { display: grid; grid-template-columns: 1fr; gap: 0 2.5rem; margin-top: 0.5rem; }
@media (min-width: 48em) { .titles { grid-template-columns: 1fr 1fr; } }
.titles h3 { margin-top: 1.2rem; }
.titles ul { list-style: none; padding: 0; margin: 0; }
.title-item { display: grid; grid-template-columns: 2.6rem 1fr; gap: 0.9rem; align-items: start; padding: 0.8rem 0; border-top: 1px solid var(--rule); }
.title-item:last-child { border-bottom: 1px solid var(--rule); }
.title-item svg { width: 100%; height: auto; display: block; box-shadow: 0 2px 6px -3px rgba(36, 32, 30, 0.4); }
.title-item .name { font-size: 1.08rem; line-height: 1.25; margin: 0 0 0.2rem; font-weight: 500; }
.title-item .name a { color: var(--ink); text-decoration: none; }
.title-item .name a:hover { color: var(--cobalt); text-decoration: underline; }
.title-item .cover-title { font-style: italic; margin: 0 0 0.15rem; font-size: 0.95rem; color: var(--muted); }
.title-item .label { margin: 0; text-wrap: pretty; }
.nw { white-space: nowrap; }

.offer { list-style: none; padding: 0; margin: 0 0 1.5rem; max-width: var(--measure); }
.offer li { padding: 0.75rem 0; border-top: 1px solid var(--rule); }
.offer li:last-child { border-bottom: 1px solid var(--rule); }
.offer .what { display: block; font-weight: 500; font-size: 1.08rem; }
.offer .why { display: block; color: var(--muted); }

.callout { max-width: var(--measure); border-left: 3px solid var(--tangerine); padding: 0.1rem 0 0.1rem 1rem; margin: 1.8rem 0; }
.callout p { margin: 0.2rem 0; }

/* ---------- a book's page ---------- */
.book-head { display: grid; grid-template-columns: 6.2rem 1fr; gap: 1.1rem; align-items: start; }
@media (min-width: 48em) { .book-head { grid-template-columns: 11rem 1fr; gap: 2.2rem; } }
.book-head svg { width: 100%; height: auto; display: block; box-shadow: 0 2px 0 rgba(36, 32, 30, 0.06), 0 10px 22px -12px rgba(36, 32, 30, 0.55); }
.book-head h1 { font-size: 1.85rem; }
@media (min-width: 48em) { .book-head h1 { font-size: 2.6rem; } }
.book-head .label { margin-top: 0.4rem; }
.question { font-style: italic; font-size: 1.2rem; line-height: 1.4; margin: 0 0 1.2rem; max-width: var(--measure); }
.question .label { display: block; font-style: normal; margin-bottom: 0.2rem; }

.facts { max-width: var(--measure); margin: 1.4rem 0 1.6rem; display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--rule); }
.facts > div { display: grid; grid-template-columns: 1fr; gap: 0.1rem; padding: 0.6rem 0; border-bottom: 1px solid var(--rule); }
@media (min-width: 40em) { .facts > div { grid-template-columns: 9.5rem 1fr; gap: 1rem; } }
.facts dt { font-family: var(--sans); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); padding-top: 0.3rem; }
.facts dd { margin: 0; }

table.plain-table { border-collapse: collapse; width: 100%; max-width: var(--measure); margin: 0.6rem 0 1.4rem; }
.plain-table th, .plain-table td { text-align: left; vertical-align: top; padding: 0.55rem 0.8rem 0.55rem 0; border-bottom: 1px solid var(--rule); }
.plain-table thead th { font-family: var(--sans); font-size: 0.66rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--ink); }
.plain-table tbody th { font-weight: 500; }

.more { max-width: var(--measure); display: flex; flex-wrap: wrap; gap: 0.6rem 1.6rem; margin: 2rem 0 0; padding: 0; list-style: none; font-family: var(--sans); font-size: 0.8rem; font-weight: 500; }

/* ---------- the materials list ---------- */
ul.checklist { list-style: none; padding: 0; }
ul.checklist li { position: relative; padding-left: 1.7rem; margin: 0 0 0.55rem; }
ul.checklist li::before { content: ""; position: absolute; left: 0.1rem; top: 0.32em; width: 0.8em; height: 0.8em; border: 1.5px solid var(--ink); border-radius: 2px; background: #fff; }
.prose h3 { font-size: 1.15rem; }
.prose ul:not(.checklist) { padding-left: 1.2rem; }
.prose ul:not(.checklist) li { margin-bottom: 0.35rem; }

/* ---------- corrections ---------- */
.corr { max-width: var(--measure); margin: 0; padding: 0; list-style: none; }
.corr > li { padding: 0.65rem 0; border-top: 1px solid var(--rule); display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: baseline; }
.corr > li:last-child { border-bottom: 1px solid var(--rule); }
.corr .none { color: var(--muted); font-family: var(--sans); font-size: 0.75rem; }

/* ---------- fonts page ---------- */
pre.license { white-space: pre-wrap; font-family: var(--sans); font-size: 0.72rem; line-height: 1.5; max-width: var(--measure); background: #fff; border: 1px solid var(--rule); padding: 1rem; }

/* ---------- the foot: the band, and the cobalt below it ---------- */
.site-foot {
  margin-top: 4rem; color: #fff; background-color: var(--cobalt); border-top: 8px solid var(--tangerine);
  /* the squared paper printed in the cobalt, quarter-inch squares, as on the covers */
  background-image: linear-gradient(var(--cobalt-line) 1px, transparent 1px), linear-gradient(90deg, var(--cobalt-line) 1px, transparent 1px);
  background-size: 24px 24px; background-position: -1px -1px;
  font-family: var(--sans); font-size: 0.74rem; line-height: 1.6;
}
.site-foot .wrap { padding-top: 2rem; padding-bottom: 2.4rem; display: grid; grid-template-columns: 1fr; gap: 1.2rem 2.5rem; }
@media (min-width: 48em) { .site-foot .wrap { grid-template-columns: 1.2fr 1fr; } }
.site-foot p { margin: 0 0 0.6rem; max-width: 30rem; }
.site-foot a { color: #fff; }
.site-foot .series { font-family: var(--serif); font-size: 1rem; line-height: 1.4; }
.site-foot .series i { font-style: italic; }
.site-foot strong { font-weight: 600; }

/* ---------- print: a page of the list, without the site around it ---------- */
@media print {
  .site-head nav, .skip, .site-foot { display: none; }
  body { background: #fff; font-size: 11pt; }
  a { color: inherit; text-decoration: none; }
  .band { height: 3pt; }
  ul.checklist li { break-inside: avoid; }
}

/* ---------- for schools ---------- */
mark.tbc { background: #fff1c2; color: var(--ink); font-family: var(--sans); font-size: 0.85em; padding: 0.05rem 0.3rem; border-radius: 2px; }
ol.units { max-width: var(--measure); padding-left: 1.4rem; }
ol.units li { margin: 0.2rem 0; }

svg.mini text { font-family: var(--serif); }
svg.mini .mc-n { font-size: 15px; }
svg.mini.big .mc-n { font-size: 13px; }
svg.mini .mc-l { font-family: var(--sans); font-size: 2.1px; font-weight: 500; letter-spacing: 0.3px; }
svg.mini .mc-v { font-size: 17px; font-style: italic; }
svg.mini .mc-s { font-size: 13px; }
svg.mini .mc-t { font-size: 7px; font-weight: 500; }
svg.mini .mc-p { font-size: 5px; font-style: italic; }
svg.mini .mc-k { font-family: var(--sans); font-size: 2.1px; font-weight: 500; letter-spacing: 0.35px; }
svg.mini .mc-p2 { font-size: 3.4px; font-style: italic; }