/* White pages, rose marks and open rules: a reading notebook. */
:root {
  color-scheme: light;
  --notebook-ink: #272329;
  --notebook-muted: #62585c;
  --notebook-rose: #a32d50;
  --notebook-deep-rose: #81223e;
  --notebook-mark: #f7bcca;
  --notebook-blush: #fff1f4;
  --notebook-rule: #dbc7ce;
  --notebook-paper: #fff;
  font-family: "Trebuchet MS", "Candara", "Calibri", "Segoe UI", sans-serif;
  font-size: 18px;
  line-height: 1.65;
  background: var(--notebook-paper);
  color: var(--notebook-ink);
}
* { box-sizing: border-box; }
html { scroll-padding-top: 1.4rem; }
body { margin: 0; }
button, textarea, input { font: inherit; }
button, a, summary { -webkit-tap-highlight-color: #f7bcca; }
button, summary { cursor: pointer; }
button { border-radius: 0; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--notebook-rose); text-underline-offset: .22em; text-decoration-thickness: .08em; }
a:hover { color: var(--notebook-deep-rose); text-decoration-thickness: .14em; }
a:focus-visible, button:focus-visible, summary:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--notebook-deep-rose);
  outline-offset: 4px;
}
p { margin: 0 0 1rem; }
ul { padding-left: 1.4rem; }
h1, h2, h3 { line-height: 1.17; font-weight: 700; text-wrap: balance; }
h1 { font-size: clamp(2rem, 6.5vw, 3.5rem); letter-spacing: -.035em; margin: .45rem 0 1.25rem; }
h2 { font-size: 1.5rem; letter-spacing: -.02em; margin: 0 0 1rem; }
h3 { font-size: 1.15rem; margin: 0 0 .7rem; }
li { margin-bottom: .55rem; }
li::marker { color: var(--notebook-rose); }
::selection { background: var(--notebook-mark); color: var(--notebook-ink); }
.notebook__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.notebook__skip {
  position: absolute;
  z-index: 20;
  top: -6rem;
  left: 1rem;
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: .5rem 1rem;
  background: #fff;
}
.notebook__skip:focus { top: 1rem; }
.notebook__masthead, .notebook__main, .notebook__footer {
  width: min(100% - 2rem, 1180px);
  margin-inline: auto;
}
.notebook__masthead {
  padding-top: 1rem;
  padding-bottom: .5rem;
  border-bottom: 2px solid var(--notebook-ink);
}
.notebook__identity { display: flex; flex-direction: column; align-items: flex-start; gap: .05rem; }
.notebook__wordmark {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  color: var(--notebook-ink);
  font-size: 1.2rem;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--notebook-mark);
  text-decoration-thickness: .2em;
  text-underline-offset: .05em;
}
.notebook__purpose { color: var(--notebook-muted); font-size: .9rem; }
.topic-tabs { display: flex; flex-wrap: wrap; column-gap: .2rem; margin: .65rem -.3rem 0; }
.topic-tabs__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 46px;
  padding: .4rem .4rem;
  color: var(--notebook-ink);
  text-decoration: none;
  font-size: .93rem;
  border-bottom: 3px solid transparent;
}
.topic-tabs__link:hover, .topic-tabs__link[aria-current] { border-color: var(--notebook-rose); color: var(--notebook-rose); }
.notebook__main { padding-top: 1.2rem; }
.notebook__opening { max-width: 54rem; padding-top: 1rem; }
.notebook__section-name { margin: 0; color: var(--notebook-rose); font-weight: 700; font-size: 1rem; }
.notebook__lead { max-width: 64ch; font-size: 1.15rem; line-height: 1.55; }
.notebook__hero { display: grid; gap: 1.3rem; }
.notebook__mark {
  background-image: linear-gradient(178deg, transparent 0%, transparent 67%, var(--notebook-mark) 68%, var(--notebook-mark) 87%, transparent 88%);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  padding: 0 .05em;
}
.notebook__quick-links { display: flex; align-items: flex-start; flex-wrap: wrap; gap: .7rem 1.5rem; margin: 1.5rem 0 3rem; }
.notebook__button {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: .65rem 1rem;
  color: #fff;
  background: var(--notebook-rose);
  text-decoration: none;
  font-weight: 700;
}
.notebook__button:hover { background: var(--notebook-deep-rose); color: #fff; }
.notebook__text-link { display: inline-flex; align-items: center; min-height: 48px; padding-block: .45rem; }
.daylight-plate { margin: 0; position: relative; padding-top: .6rem; border-top: .5rem solid var(--notebook-mark); }
.daylight-plate img { aspect-ratio: 3 / 2; object-fit: cover; background: var(--notebook-blush); color: var(--notebook-muted); font-size: 1rem; }
.daylight-plate figcaption { padding: .6rem 0; color: var(--notebook-muted); font-size: .92rem; }
.daylight-plate--interlude { margin: 2.5rem 0; }
.notebook__crumbs { margin: -.25rem 0 .9rem; font-size: .9rem; }
.notebook__crumbs ol { list-style: none; padding: 0; margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 0 .35rem; }
.notebook__crumbs li { display: inline-flex; align-items: center; gap: .35rem; margin: 0; min-width: 0; }
.notebook__crumbs li + li::before { content: "/"; color: var(--notebook-muted); }
.notebook__crumbs a { display: inline-flex; align-items: center; min-height: 44px; padding: .2rem .1rem; }
.notebook__crumbs span { padding-block: .25rem; }
.notebook__reading { min-width: 0; max-width: 69ch; }
.notebook__layout { display: grid; gap: 2.5rem; margin-top: 2.5rem; }
.reading-note { padding-bottom: 1.8rem; margin-bottom: 1.6rem; border-bottom: 1px solid var(--notebook-rule); }
.reading-note h2 { display: inline; background-image: linear-gradient(178deg, transparent 85%, var(--notebook-mark) 86%, var(--notebook-mark) 96%, transparent 97%); }
.reading-note h2 + p { margin-top: 1rem; }
.comparison-notes > h2 { margin-bottom: 1.8rem; color: var(--notebook-rose); }
.comparison-notes .reading-note h3 { font-size: 1.3rem; margin-bottom: 1rem; }
.reading-note p { max-width: 69ch; }
.reading-note__term { margin-top: 1rem; color: var(--notebook-muted); font-size: 1rem; }
.reading-note__points { margin: 1.1rem 0 0; padding-left: 1.25rem; }
.reading-note__points li { padding-left: .15rem; margin-bottom: .65rem; }
.reading-note__points li:last-child { margin-bottom: 0; }
.topic-index { align-self: start; min-width: 0; padding-top: 1.15rem; border-top: 4px solid var(--notebook-rose); }
.topic-index__caption { margin-bottom: .7rem; color: var(--notebook-muted); }
.topic-index__list { list-style: none; padding: 0; margin: 0; }
.topic-index__list li { margin: 0; }
.topic-index__list a { display: flex; align-items: center; min-height: 48px; padding: .5rem .1rem; font-size: 1rem; border-bottom: 1px solid var(--notebook-rule); }
.topic-index__list a[aria-current] { color: var(--notebook-ink); font-weight: 700; text-decoration: none; }
.topic-index__more { margin-top: 1rem; }
.topic-index__more summary { min-height: 48px; padding: .6rem .1rem; font-size: 1rem; }
.source-pocket { padding: 1.3rem 1rem 1rem; margin-top: 2rem; background: var(--notebook-blush); border-top: 4px solid var(--notebook-rose); }
.source-pocket h2 { font-size: 1.3rem; }
.source-pocket__date { font-size: .92rem; color: var(--notebook-muted); }
.source-pocket ul { list-style: none; padding: 0; margin: 0; }
.source-pocket li { margin: 0; }
.source-pocket a { display: flex; align-items: center; min-height: 48px; padding-block: .55rem; font-size: 1rem; }
.page-turn { padding: 1.5rem 0; margin-top: 1rem; }
.page-turn p { margin-bottom: .2rem; color: var(--notebook-muted); }
.page-turn__link { display: inline-flex; align-items: center; min-height: 48px; padding-block: .55rem; font-weight: 700; }
.route-spread { margin: 1rem 0 3rem; padding: 1.5rem 0; border-top: 4px solid var(--notebook-rose); border-bottom: 2px solid var(--notebook-ink); }
.route-spread__heading { max-width: 45rem; }
.route-spread__list { margin: 1.5rem 0 0; }
.route-spread__row { display: grid; gap: .3rem; padding: 1rem 0; border-top: 1px solid var(--notebook-rule); }
.route-spread__row dt { color: var(--notebook-rose); font-size: 1.25rem; font-weight: 700; }
.route-spread__row dd { margin: 0; }
.route-spread__link { display: flex; align-items: center; min-height: 48px; padding-block: .5rem; }
.notebook-map { padding: 1.5rem 0; margin: 2rem 0; border-top: 3px solid var(--notebook-ink); }
.notebook-map__groups { display: grid; gap: 2rem; margin-top: 1.8rem; }
.notebook-map__group h3 { padding-left: .6rem; border-left: 5px solid var(--notebook-mark); }
.notebook-map__group ul { list-style: none; padding: 0; margin: 0; }
.notebook-map__group li { margin: 0; }
.notebook-map__group a { display: flex; align-items: center; min-height: 48px; padding-block: .6rem; border-bottom: 1px solid var(--notebook-rule); }
.notebook__home-reading > .reading-note { max-width: 69ch; }
.notebook__home-reading > .source-pocket { max-width: 69ch; }
.notebook__footer { padding: 2rem 0 2.5rem; margin-top: 3rem; border-top: 2px solid var(--notebook-ink); font-size: 1rem; }
.notebook__footer p { max-width: 69ch; }
.notebook__footer-links { display: flex; flex-wrap: wrap; column-gap: 1.6rem; }
.notebook__footer-links a { display: inline-flex; align-items: center; min-height: 48px; padding-block: .6rem; font-size: 1rem; }
.cost-sheet { margin: 1rem 0 2.5rem; border-top: 4px solid var(--notebook-rose); padding-top: 1.3rem; }
.cost-sheet__table { border-collapse: collapse; width: 100%; margin: 1.5rem 0; table-layout: fixed; }
.cost-sheet__table caption { text-align: left; color: var(--notebook-muted); padding-bottom: .8rem; font-size: 1rem; }
.cost-sheet__table thead { display: none; }
.cost-sheet__table tbody { display: block; }
.cost-sheet__table tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .6rem; padding: 1rem 0; border-top: 1px solid var(--notebook-rule); }
.cost-sheet__table th { grid-column: 1 / -1; padding: 0; text-align: left; font-size: 1rem; }
.cost-sheet__table td { display: block; min-width: 0; padding: 0; vertical-align: top; }
.cost-sheet__table label { display: block; margin-bottom: .3rem; font-size: .92rem; }
.cost-sheet__prompt { display: block; font-weight: 400; font-size: 1rem; }
.cost-sheet textarea { display: block; width: 100%; min-width: 0; min-height: 104px; padding: .5rem; background: #fff; color: var(--notebook-ink); border: 1px solid #8c747c; border-radius: 0; resize: vertical; font-size: 1rem; line-height: 1.5; }
.cost-sheet__actions { display: flex; flex-wrap: wrap; gap: .65rem; }
.cost-sheet button { min-height: 48px; padding: .65rem .8rem; border: 2px solid var(--notebook-rose); background: var(--notebook-rose); color: #fff; text-align: left; font-weight: 700; font-size: 1rem; line-height: 1.35; }
.cost-sheet button:hover { background: var(--notebook-deep-rose); border-color: var(--notebook-deep-rose); }
.cost-sheet .cost-sheet__reset { background: #fff; color: var(--notebook-rose); }
.cost-sheet .cost-sheet__reset:hover { background: var(--notebook-blush); }
.cost-sheet__nojs { margin-top: 1rem; }
.cost-sheet__result { margin-top: 1.5rem; border-left: .35rem solid var(--notebook-mark); padding: .25rem 0 .25rem 1rem; }
.cost-sheet__result ul { padding-left: 1.15rem; }
.cost-sheet__print-copy { display: none; }
[hidden] { display: none !important; }
@media (min-width: 700px) {
  .notebook__masthead, .notebook__main, .notebook__footer { width: min(100% - 4rem, 1180px); }
  .notebook__identity { flex-direction: row; align-items: baseline; gap: 1.5rem; }
  .topic-tabs { column-gap: 1rem; }
  .topic-tabs__link { padding-inline: .7rem; font-size: 1rem; }
  .notebook__main { padding-top: 1.8rem; }
  .notebook__hero { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 2.5rem; align-items: center; padding-top: 1rem; }
  .notebook__hero .notebook__opening { padding: 0; }
  .notebook--home h1 { font-size: clamp(2.5rem, 4.3vw, 3.6rem); }
  .notebook__hero .notebook__lead { font-size: 1.12rem; }
  .notebook__layout { grid-template-columns: minmax(0, 1fr) minmax(12rem, .35fr); gap: 2.5rem; }
  .notebook__opening { padding-top: 1.2rem; }
  .topic-index { position: sticky; top: 1.5rem; }
  .notebook-map__groups { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 3rem; }
  .route-spread { display: grid; grid-template-columns: .8fr 1.2fr; gap: 2rem; }
  .route-spread__list { margin-top: 0; }
  .route-spread__row { grid-template-columns: 9rem minmax(0,1fr); gap: 1rem; }
  .route-spread__row:first-child { border-top: 0; padding-top: 0; }
  .source-pocket { padding-inline: 1.4rem; }
}
@media (min-width: 1000px) {
  .notebook__masthead { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 1.3rem; padding-bottom: 1.2rem; }
  .notebook__identity { flex-direction: column; gap: 0; }
  .topic-tabs { margin: 0; }
  .notebook__hero { gap: 4rem; padding-top: 1.4rem; }
  .notebook__layout { grid-template-columns: minmax(0, 69ch) minmax(13rem, 1fr); gap: 4rem; }
  .notebook-map__groups { grid-template-columns: 1.4fr 1fr 1fr; }
  .cost-sheet__table thead { display: table-header-group; }
  .cost-sheet__table tbody { display: table-row-group; }
  .cost-sheet__table tr { display: table-row; }
  .cost-sheet__table th, .cost-sheet__table td { display: table-cell; width: 33.333%; padding: .7rem .45rem; vertical-align: top; }
  .cost-sheet__table th:first-child { padding-left: 0; }
  .cost-sheet__table label { font-size: .9rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}
@media print {
  :root { font-size: 12pt; color: #111; }
  .notebook__masthead, .notebook__footer, .notebook__crumbs, .topic-index, .notebook__skip, .cost-sheet__actions, .cost-sheet__nojs, .page-turn { display: none !important; }
  .notebook__main { width: 100%; margin: 0; }
  .notebook__layout { display: block; margin-top: 1rem; }
  .notebook__opening h1 { font-size: 25pt; }
  .notebook__reading { max-width: none; }
  .reading-note, .source-pocket { break-inside: avoid; }
  .source-pocket { background: #fff; border: 1pt solid #555; }
  .cost-sheet__table tr { break-inside: avoid; }
  .cost-sheet__table th, .cost-sheet__table td { vertical-align: top; }
  .cost-sheet__print-copy { display: block; min-height: 3rem; white-space: pre-wrap; overflow-wrap: anywhere; }
  .cost-sheet__table td:has(.cost-sheet__print-copy) textarea { display: none; }
  .cost-sheet textarea { border-color: #666; }
  a { color: #111; }
}