/*
  Written Odysseys
  One stylesheet for the whole site. No inline styles anywhere, so the pages
  run under the load balancer's style-src 'self' policy.

  The palette comes from the emblem: a sunset from gold to vermilion, and a sea
  from teal to deep blue. On the page those colors stay small. Paper and ink
  carry the text; the sea blue marks links; the sunset marks labels and edges.
*/

/*
  EB Garamond, by Georg Duffner and Octavio Pardo, under the SIL Open Font
  License 1.1, which is fonts/OFL.txt. Both names are the designer field of
  ofl/ebgaramond/METADATA.pb in the google/fonts repository on GitHub. The two
  woff2 files are subsets of that folder's EBGaramond[wght].ttf and
  EBGaramond-Italic[wght].ttf.
*/

@font-face {
  font-family: "EB Garamond";
  src: url("/fonts/EBGaramond-var.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "EB Garamond";
  src: url("/fonts/EBGaramond-Italic-var.woff2") format("woff2");
  font-weight: 400 800;
  font-style: italic;
  font-display: swap;
}

:root {
  color-scheme: only light;

  /* paper and ink */
  --paper: #f7f1e6;
  --paper-deep: #efe6d6;
  --paper-edge: #e3d7c2;
  --rule: #d8ccb6;
  --ink: #2b241f;
  --ink-soft: #5c5047;

  /* from the emblem */
  --sun: #ffd71d;
  --amber: #f89823;
  --ember: #f15a29;
  --tide: #35b5c0;
  --deep: #1f67ca;
  --sunset: linear-gradient(90deg, var(--sun) 0%, var(--amber) 50%, var(--ember) 100%);

  /* the two that carry text, darkened from the emblem for contrast on paper */
  --sea: #1f5fb8;      /* 5.5:1 on paper */
  --sea-deep: #17457f;
  --rust: #a9431a;     /* 5.3:1 on paper */

  --serif: "EB Garamond", "Garamond", "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, serif;

  --wrap: 75rem;
  --gutter: clamp(1.25rem, 5.4vw, 5rem);
  --measure: 34em;
  --section: clamp(4.5rem, 3rem + 7vw, 9rem);

  --step--1: clamp(1rem, 0.96rem + 0.12vw, 1.0625rem);
  --step-0: clamp(1.1875rem, 1.12rem + 0.3vw, 1.3125rem);
  --step-1: clamp(1.375rem, 1.25rem + 0.5vw, 1.625rem);
  --step-2: clamp(1.625rem, 1.4rem + 1vw, 2.125rem);
  --step-3: clamp(2.125rem, 1.6rem + 2.2vw, 3.375rem);
  --step-4: clamp(2.625rem, 1.5rem + 4.6vw, 5.5rem);
}

/* ------------------------------------------------------------------ base */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 1.5rem;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: var(--step-0);
  line-height: 1.6;
  font-weight: 400;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  font-variant-numeric: oldstyle-nums proportional-nums;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* the gilt edge: the sunset, once, at the top of every page */
body::before {
  content: "";
  display: block;
  flex: none;
  height: 4px;
  background: var(--sunset);
}

main {
  flex: 1 0 auto;
}

img,
svg,
picture {
  display: block;
  max-width: 100%;
  height: auto;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-weight: 450;
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

p,
ul,
ol,
dl,
figure,
blockquote {
  margin: 0;
}

p {
  text-wrap: pretty;
}

em,
cite {
  font-style: italic;
}

strong {
  font-weight: 600;
}

a {
  color: var(--sea);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  text-decoration-color: color-mix(in srgb, var(--sea) 45%, transparent);
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

a:hover {
  color: var(--sea-deep);
  text-decoration-color: currentColor;
}

:focus-visible {
  outline: 2px solid var(--sea);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection {
  background: #fde7a6;
  color: var(--ink);
}

.skip-link {
  position: absolute;
  left: var(--gutter);
  top: 0.75rem;
  z-index: 10;
  padding: 0.6rem 1rem;
  background: var(--ink);
  color: var(--paper);
  font-variant-caps: all-small-caps;
  letter-spacing: 0.08em;
  text-decoration: none;
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
  color: var(--paper);
}

.wrap {
  width: 100%;
  max-width: calc(var(--wrap) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ------------------------------------------------------------- type kit */

.kicker {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
  color: var(--rust);
  font-size: var(--step--1);
  font-weight: 500;
  font-variant-caps: all-small-caps;
  letter-spacing: 0.12em;
  line-height: 1.3;
}

.kicker::before {
  content: "";
  flex: none;
  width: 2rem;
  height: 2px;
  background: var(--sunset);
}

.display {
  font-size: var(--step-4);
  line-height: 1.03;
  letter-spacing: -0.018em;
  font-weight: 420;
}

.display em {
  font-weight: 400;
}

.title {
  font-size: var(--step-3);
  line-height: 1.06;
  letter-spacing: -0.014em;
}

.subtitle {
  font-size: var(--step-2);
  line-height: 1.2;
  letter-spacing: -0.006em;
}

.lede {
  max-width: 30em;
  font-size: var(--step-1);
  line-height: 1.45;
  color: var(--ink-soft);
}

.dek {
  font-size: var(--step-1);
  font-style: italic;
  line-height: 1.35;
  color: var(--ink-soft);
  text-wrap: balance;
}

.prose {
  max-width: var(--measure);
}

.prose > * + * {
  margin-top: 1em;
}

.prose h2 {
  margin-top: 2.2em;
  font-size: var(--step-2);
}

.prose h3 {
  margin-top: 1.8em;
  font-size: var(--step-1);
  font-weight: 500;
}

.small-caps {
  font-variant-caps: all-small-caps;
  letter-spacing: 0.1em;
}

.muted {
  color: var(--ink-soft);
}

/* ---------------------------------------------------------------- header */

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1.25rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  color: var(--ink);
  text-decoration: none;
}

.brand:hover {
  color: var(--ink);
}

.brand img {
  width: 2.75rem;
  height: 2.75rem;
}

.brand-name {
  font-size: 1.25rem;
  font-weight: 500;
  font-variant-caps: all-small-caps;
  letter-spacing: 0.14em;
  line-height: 1.15;
}

.nav-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-list a {
  display: inline-block;
  padding-block: 0.4rem;
  color: var(--ink-soft);
  font-size: 1.125rem;
  font-weight: 500;
  font-variant-caps: all-small-caps;
  letter-spacing: 0.1em;
  text-decoration: none;
  border-bottom: 2px solid transparent;
}

.nav-list a:hover {
  color: var(--ink);
  border-bottom-color: var(--rule);
}

.nav-list a[aria-current="page"] {
  color: var(--ink);
  border-bottom-color: var(--ember);
}

/* The small-screen menu is a details element, so it needs no script. */
.menu {
  display: none;
  position: relative;
}

.menu summary {
  --menu-ink: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0.1rem;
  color: var(--ink);
  font-size: 1.125rem;
  font-weight: 500;
  font-variant-caps: all-small-caps;
  letter-spacing: 0.1em;
  list-style: none;
  cursor: pointer;
}

.menu summary::-webkit-details-marker {
  display: none;
}

/* inline-block gives the icon its size in any engine, including one that
   does not lay out a summary as a flex container */
.menu summary::after {
  content: "";
  display: inline-block;
  flex: none;
  width: 1.1rem;
  height: 0.7rem;
  background:
    linear-gradient(var(--menu-ink), var(--menu-ink)) 0 0 / 100% 2px no-repeat,
    linear-gradient(var(--menu-ink), var(--menu-ink)) 0 50% / 100% 2px no-repeat,
    linear-gradient(var(--menu-ink), var(--menu-ink)) 0 100% / 100% 2px no-repeat;
}

.menu[open] summary::after {
  width: 0.95rem;
  height: 0.95rem;
  background:
    linear-gradient(45deg, transparent calc(50% - 1px), var(--menu-ink) calc(50% - 1px), var(--menu-ink) calc(50% + 1px), transparent calc(50% + 1px)),
    linear-gradient(-45deg, transparent calc(50% - 1px), var(--menu-ink) calc(50% - 1px), var(--menu-ink) calc(50% + 1px), transparent calc(50% + 1px));
}

/* Forced colors drop background images, which would take the icon with
   them. The icon keeps its drawing and takes the system's text color. */
@media (forced-colors: active) {
  .menu summary::after {
    forced-color-adjust: none;
    --menu-ink: CanvasText;
  }

  /* Forced colors paint a plate behind each line of text, and with tight
     display leading one line's plate covers the descenders above it. */
  :is(h1, h2, h3, .display, .title, .subtitle) {
    line-height: 1.25;
  }
}

.menu-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 0.5rem);
  z-index: 5;
  width: max-content;
  max-width: calc(100vw - 2 * var(--gutter));
  padding: 0.75rem 1.25rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  box-shadow: 0 18px 40px -18px rgb(59 42 26 / 35%);
}

.menu-panel .nav-list {
  flex-direction: column;
  gap: 0;
}

.menu-panel .nav-list li + li {
  border-top: 1px solid var(--paper-edge);
}

.menu-panel .nav-list a {
  display: block;
  padding-block: 0.75rem;
  border-bottom: 0;
  line-height: 1.3;
}

.menu-panel .nav-list a[aria-current="page"] {
  color: var(--rust);
}

/* Below 66em the wordmark steps down a size. The header row then needs about
   700 px, so the four links stay in view above 51em (816 px), with about
   30 px to spare at that width. At 51em and below they move behind Menu. */
@media (max-width: 66em) {
  .brand img {
    width: 2.375rem;
    height: 2.375rem;
  }

  .brand-name {
    font-size: 1.125rem;
  }
}

@media (max-width: 51em) {
  .site-nav {
    display: none;
  }

  .menu {
    display: block;
  }
}

/* Below 24.25em the wordmark and the menu would touch. Both shrink a step,
   so the wordmark stays on one line; it wraps only when text is enlarged. */
@media (max-width: 24.25em) {
  .site-header .wrap {
    gap: 0.75rem;
  }

  .brand {
    gap: 0.5rem;
  }

  .brand img {
    width: 1.875rem;
    height: 1.875rem;
  }

  .brand-name {
    font-size: 0.9375rem;
    letter-spacing: 0.08em;
  }

  .menu summary {
    gap: 0.4rem;
    font-size: 0.9375rem;
  }
}

/* ------------------------------------------------------------- ornament */

.ornament {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.ornament::before,
.ornament::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rule);
}

.ornament img {
  width: 4.5rem;
  height: auto;
}

/* --------------------------------------------------------------- buttons */

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-top: 2.25rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  max-width: 100%;
  min-height: 3rem;
  padding: calc(0.7rem - 1px) calc(1.25rem - 1px) calc(0.75rem - 1px);
  background: var(--ink);
  color: var(--paper);
  border: 1px solid transparent; /* forced colors draw it, so the button keeps its shape */
  border-radius: 2px;
  font-size: 1.125rem;
  font-weight: 500;
  font-variant-caps: all-small-caps;
  letter-spacing: 0.1em;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color 0.15s ease;
}

.btn:hover {
  background: var(--sea-deep);
  color: var(--paper);
}

.btn .arrow {
  font-variant-caps: normal;
  letter-spacing: 0;
}

/* On the narrowest phones a button keeps its label on one line. */
@media (max-width: 24.25em) {
  .btn {
    padding-inline: calc(1rem - 1px);
    letter-spacing: 0.07em;
  }
}

/* Text and arrow flow as one line of type, so when a label wraps the arrow
   follows its last word. */
.link-arrow {
  display: inline-block;
  font-size: 1.125rem;
  font-weight: 500;
  font-variant-caps: all-small-caps;
  letter-spacing: 0.1em;
  text-decoration: none;
  text-wrap: balance;
  border-bottom: 1px solid color-mix(in srgb, var(--sea) 40%, transparent);
  padding-bottom: 0.1rem;
}

.link-arrow .arrow {
  margin-left: 0.45rem;
}

.link-arrow:hover {
  border-bottom-color: currentColor;
}

/* From 30em up, buttons and arrow links are set a step larger, so their small
   capitals stand as tall as the lowercase of the text around them. At 320 to
   360 wide they step down, so each label stays on one line. */
@media (min-width: 30em) {
  .btn,
  .link-arrow {
    font-size: 1.25rem;
  }
}

@media (max-width: 22.5em) {
  .btn,
  .link-arrow {
    font-size: 1rem;
    letter-spacing: 0.05em;
  }
}

.arrow {
  display: inline-block;
  transition: transform 0.15s ease;
}

a:hover .arrow {
  transform: translateX(3px);
}

a:hover .arrow--out {
  transform: translate(2px, -2px);
}

/* ------------------------------------------------------------------ hero */

.hero {
  padding-block: clamp(3rem, 1.5rem + 6vw, 7.5rem) clamp(4rem, 2rem + 6vw, 8rem);
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  align-items: center;
  gap: clamp(2.5rem, 5vw, 4.5rem);
}

/* The hero title is sized against its own column, so "The Car-Buying
   Revolution" (10.45 em of italic) sits on one line whenever it can. */
.hero-text {
  container-type: inline-size;
}

.hero-title {
  font-size: clamp(2.625rem, 1.2rem + 4vw, 4.5rem);
  font-size: clamp(2.625rem, 9.2cqi, 4.75rem);
}

.h-line {
  display: inline-block;
}

.nowrap {
  white-space: nowrap;
}

.hero .lede {
  margin-top: 2rem;
}

.hero-mark {
  justify-self: end;
  width: 100%;
  max-width: 26rem;
}

.hero-mark img {
  width: 100%;
}

@media (max-width: 52.5em) {
  .hero-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero-mark {
    order: -1;
    justify-self: start;
    max-width: 8rem;
  }
}

/* -------------------------------------------------------------- features */

.catalogue {
  padding-block: clamp(3.5rem, 2rem + 4vw, 6rem) 0;
}

.catalogue-head {
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}

.feature {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: start;
}

.feature-text {
  padding-top: clamp(0rem, 2vw, 1.5rem);
}

.feature + .feature {
  margin-top: var(--section);
}

.feature-art {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 100%;
  padding: clamp(2rem, 5vw, 4.5rem) clamp(1.5rem, 4vw, 4rem);
  background: var(--paper-deep);
}

.feature-art {
  grid-column: 1 / span 6;
}

.feature-text {
  grid-column: 8 / span 5;
}

.feature--flip .feature-art {
  grid-column: 7 / span 6;
  grid-row: 1;
}

.feature--flip .feature-text {
  grid-column: 1 / span 5;
  grid-row: 1;
}

.feature-text .title {
  margin-bottom: 0.9rem;
}

.feature-text .dek {
  margin-bottom: 1.5rem;
}

.feature-text p + p {
  margin-top: 1em;
}

.byline {
  margin-bottom: 1.5rem;
  font-size: var(--step-0);
}

.byline .small-caps {
  color: var(--ink-soft);
  margin-right: 0.25rem;
}

.spec {
  margin-top: 1.75rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--rule);
  color: var(--ink-soft);
  font-size: var(--step--1);
  line-height: 1.5;
}

.spec .small-caps {
  color: var(--ink);
}

@media (max-width: 60em) {
  .feature-art,
  .feature--flip .feature-art {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .feature-text,
  .feature--flip .feature-text {
    grid-column: 1 / -1;
    grid-row: 2;
    margin-top: 2.25rem;
    max-width: var(--measure);
  }
}

@media (min-width: 60.01em) {
  .feature-art {
    aspect-ratio: 1 / 1;
    min-height: 0;
  }

  .feature-art .cover {
    width: min(100%, 17.5rem, 21vw);
  }
}

/* the Life Books drawings sit on the panel with no frame of their own */
.art-jackets {
  width: min(100%, 32rem);
}

.art-spread {
  width: min(100%, 44rem);
}

/* a book cover, presented as an object: a hinge highlight and a soft shadow */
.cover {
  position: relative;
  width: min(100%, 19rem);
  max-width: 62vw;
  box-shadow:
    0 1px 1px rgb(43 36 31 / 12%),
    0 6px 12px -2px rgb(59 42 26 / 18%),
    0 16px 28px -10px rgb(59 42 26 / 34%);
}

.cover img {
  width: 100%;
}

.cover::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgb(255 255 255 / 0%) 0%,
    rgb(255 255 255 / 22%) 1.2%,
    rgb(0 0 0 / 18%) 2.6%,
    rgb(255 255 255 / 8%) 3.6%,
    rgb(255 255 255 / 0%) 6%
  );
}

.cover--large {
  width: min(100%, 25rem);
}

/* ------------------------------------------------------------- the press */

.press {
  margin-top: var(--section);
  padding-block: var(--section);
  background: var(--paper-deep);
}

.press-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(2rem, 6vw, 7rem);
  align-items: start;
}

.press-grid .title {
  max-width: 9em;
}

.press-grid .prose {
  padding-top: 0.4rem;
}

@media (max-width: 52.5em) {
  .press-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* -------------------------------------------------------------- contact */

.contact-band {
  padding-block: var(--section);
  text-align: center;
}

.contact-band .title {
  margin-inline: auto;
}

.contact-band p {
  max-width: 30em;
  margin-inline: auto;
}

.mail {
  display: inline-block;
  margin-top: 1.75rem;
  font-size: var(--step-2);
  font-style: italic;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.contact-band .note {
  margin-top: 1.25rem;
  color: var(--ink-soft);
}

/* --------------------------------------------------------------- footer */

.site-footer {
  padding-block: clamp(3.5rem, 6vw, 5.5rem) 2.5rem;
  background: var(--paper-deep);
  border-top: 1px solid var(--paper-edge);
  font-size: var(--step--1);
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) repeat(2, minmax(0, 3fr));
  gap: 2.5rem clamp(2rem, 5vw, 5rem);
}

.footer-brand img {
  width: 3.5rem;
  height: 3.5rem;
  margin-bottom: 1.1rem;
}

.footer-brand p {
  max-width: 22em;
  color: var(--ink-soft);
  line-height: 1.5;
}

.footer-brand .footer-name {
  margin-bottom: 0.35rem;
  color: var(--ink);
  font-size: 1.1875rem;
  font-weight: 500;
  font-variant-caps: all-small-caps;
  letter-spacing: 0.14em;
}

.footer-col h2 {
  margin-bottom: 0.9rem;
  color: var(--rust);
  font-size: var(--step--1);
  font-weight: 500;
  font-variant-caps: all-small-caps;
  letter-spacing: 0.12em;
  line-height: 1.3;
}

.footer-col ul {
  padding: 0;
  list-style: none;
}

.footer-col li + li {
  margin-top: 0.45rem;
}

.footer-col a {
  color: var(--ink);
  text-decoration-color: color-mix(in srgb, var(--ink) 35%, transparent);
}

.footer-col a:hover {
  color: var(--sea-deep);
  text-decoration-color: currentColor;
}

.footer-col .muted {
  font-size: 0.95em;
}

.footer-base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  color: var(--ink-soft);
}

@media (max-width: 52.5em) {
  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 26em) {
  .footer-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ------------------------------------------------------------ page head */

.page-head {
  padding-block: clamp(2.5rem, 1rem + 5vw, 6rem) clamp(2.5rem, 1rem + 4vw, 4.5rem);
}

.page-head .display {
  max-width: 12em;
}

.page-head .lede {
  margin-top: 1.75rem;
}

/* --------------------------------------------------------- the book page */

.book-hero {
  padding-block: clamp(2.5rem, 1rem + 5vw, 6rem) var(--section);
}

.book-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2.5rem, 7vw, 7.5rem);
  align-items: center;
}

.book-hero .cover-stage {
  display: grid;
  place-items: center;
  padding: clamp(2rem, 5vw, 4.5rem) clamp(1.5rem, 4vw, 3.5rem);
  background: var(--paper-deep);
}

.book-hero .display {
  max-width: 9em;
}

.book-hero .dek {
  margin-top: 1rem;
  max-width: 22em;
}

.book-hero .byline {
  margin-top: 1.5rem;
  margin-bottom: 0;
}

.book-hero .lede {
  margin-top: 1.75rem;
}

@media (max-width: 52.5em) {
  .book-hero-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.band {
  padding-block: var(--section);
}

.band--deep {
  background: var(--paper-deep);
}

.band:not(.band--deep) + .band:not(.band--deep) {
  padding-top: 0;
}

.page-head + .band:not(.band--deep) {
  padding-top: clamp(1rem, 3vw, 2.5rem);
}

.two-col {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: 2rem clamp(2rem, 6vw, 7rem);
  align-items: start;
}

.two-col > :first-child .title {
  max-width: 8em;
}

@media (min-width: 52.51em) {
  .two-col > :first-child {
    position: sticky;
    top: 2rem;
  }
}

@media (max-width: 52.5em) {
  .two-col {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* a book's contents, set the way a contents page is set */
.contents {
  padding: 0;
  list-style: none;
}

.contents > li + li {
  margin-top: 2.25rem;
}

.part-name {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15rem 1rem;
  margin-bottom: 0.6rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid var(--rule);
  font-size: var(--step-1);
  font-weight: 500;
}

.part-name .small-caps {
  flex: none;
  color: var(--rust);
  font-size: var(--step--1);
}

.chapters {
  padding: 0;
  list-style: none;
}

/* A chapter title that wraps keeps its lines close, so it reads as one entry.
   The tighter leading moves into the padding, so the list keeps its pace. */
.chapters li {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  padding-block: 0.45rem;
  line-height: 1.35;
}

.chapters .num {
  color: var(--ink-soft);
  font-variant-numeric: lining-nums tabular-nums;
  font-size: 0.9em;
  padding-top: 0.1em;
}

.chapters li > span:last-child {
  text-wrap: pretty;
}

/* bibliographic details */
.biblio {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.biblio div {
  display: grid;
  grid-template-columns: minmax(12.5rem, 2fr) minmax(0, 5fr);
  align-items: baseline;
  gap: 1rem;
  padding-block: 0.85rem;
  border-bottom: 1px solid var(--rule);
}

.biblio div:first-child {
  border-top: 1px solid var(--rule);
}

.biblio dt {
  color: var(--ink-soft);
  font-variant-caps: all-small-caps;
  letter-spacing: 0.1em;
  font-weight: 500;
  line-height: 1.3;
}

.biblio dd {
  margin: 0;
}

.isbn {
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: 0.02em;
}

@media (min-width: 75em) {
  .biblio div {
    grid-template-columns: minmax(15.5rem, 2fr) minmax(0, 5fr);
  }
}

@media (max-width: 30em) {
  .biblio div {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.15rem;
  }
}

/* a passage from the book */
.passage {
  max-width: 30em;
  margin-inline: auto;
  text-align: center;
}

.passage blockquote p {
  hanging-punctuation: first last;
  font-size: var(--step-2);
  font-style: italic;
  line-height: 1.35;
  letter-spacing: -0.004em;
  text-wrap: balance;
}

.passage figcaption {
  margin-top: 1.5rem;
  color: var(--ink-soft);
  font-size: var(--step--1);
  font-variant-caps: all-small-caps;
  letter-spacing: 0.12em;
}

.passage .ornament {
  margin-bottom: 2.5rem;
}

/* a list of what a book shows, marked with a short stroke of the sunset */
.checks {
  padding: 0;
  list-style: none;
}

.checks li {
  position: relative;
  padding-left: 1.6rem;
}

.checks li + li {
  margin-top: 0.6em;
}

.checks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.78em;
  width: 0.85rem;
  height: 2px;
  background: var(--sunset);
}

.checks--contents li {
  padding-block: 0.3rem;
}

.checks--contents li + li {
  margin-top: 0;
}

.checks--contents li::before {
  top: 1.08em;
}

/* closing call to action */
.cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 2rem 4rem;
  padding: clamp(1.25rem, 5vw, 3.75rem);
  background: var(--paper);
  border: 1px solid var(--rule);
}

.cta .subtitle {
  max-width: 18em;
}

.cta p {
  margin-top: 0.75rem;
  color: var(--ink-soft);
  max-width: 32em;
}

.cta .actions {
  margin-top: 0;
}

@media (max-width: 52.5em) {
  .cta {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 22.5em) {
  .cta {
    padding: 1rem;
  }
}

/* --------------------------------------------------- the Life Books page */

.lb-hero-art {
  display: grid;
  place-items: center;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding: clamp(2rem, 6vw, 5rem) clamp(1rem, 4vw, 4rem);
  background: var(--paper-deep);
}

.parts {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  padding: 0;
  list-style: none;
}

.parts li {
  padding-top: 1.25rem;
  border-top: 2px solid var(--ink);
}

.parts h3 {
  margin-bottom: 0.75rem;
  font-size: var(--step-2);
}

.parts .num {
  display: block;
  margin-bottom: 1.1rem;
  color: var(--rust);
  font-size: var(--step--1);
  font-weight: 500;
  font-variant-caps: all-small-caps;
  letter-spacing: 0.12em;
}

.parts p,
.principles p {
  max-width: var(--measure);
}

/* Three columns from 75em, where each is about 325 px wide; below that the
   parts stack, so no column runs near 30 characters a line. Each part is a
   subgrid of three rows: the labels share one row, the headings the next, so
   the paragraphs start level. */
@media (min-width: 75.01em) {
  .parts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 0;
  }

  .parts li {
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
  }
}

.principles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 5vw, 5rem);
}

.principles h3 {
  margin-bottom: 0.75rem;
  font-size: var(--step-2);
}

@media (max-width: 52.5em) {
  .principles {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ------------------------------------------------------- the about page */

.dropcap::first-letter {
  float: left;
  margin: 0.08em 0.1em 0 -0.02em;
  color: var(--rust);
  font-size: 3.6em;
  line-height: 0.8;
  font-weight: 450;
}

.emblem-figure {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: 2rem clamp(2rem, 6vw, 7rem);
  align-items: center;
}

.emblem-figure img {
  width: min(100%, 20rem);
  justify-self: center;
}

.emblem-text {
  margin-top: 1.5rem;
}

@media (max-width: 52.5em) {
  .emblem-figure {
    grid-template-columns: minmax(0, 1fr);
  }

  .emblem-figure img {
    width: min(70%, 14rem);
    justify-self: start;
  }
}

/* ----------------------------------------------------- the contact page */

.contact-card .lede {
  margin-top: 1.5rem;
}

.mail-wrap {
  margin-top: 2rem;
}

.contact-card .mail {
  margin-top: 0;
  font-size: clamp(1.75rem, 1rem + 3.4vw, 3.375rem);
  overflow-wrap: normal;
}

/* One row for each kind of question, across the page. From 48em the rows
   share two columns: labels as wide as the longest, the book's full title on
   one line whenever the page has room, and the text beside them. */
.topics {
  margin-top: 2.5rem;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--rule);
}

.topics li {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 0.25rem;
  padding-block: 1rem;
  border-bottom: 1px solid var(--rule);
}

.topics li > span:last-child {
  max-width: var(--measure);
}

.topics .small-caps {
  padding-top: 0.15em;
  color: var(--rust);
  font-weight: 500;
  line-height: 1.4;
}

@media (min-width: 48.01em) {
  .topics {
    display: grid;
    grid-template-columns: minmax(12rem, max-content) minmax(0, 1fr);
    column-gap: clamp(1.5rem, 4vw, 4rem);
  }

  .topics li {
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
  }
}

/* -------------------------------------------------------- the 404 page */

.lost {
  padding-block: clamp(3rem, 2rem + 6vw, 8rem);
}

.lost .lede {
  margin-top: 1.75rem;
}

.lost-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  margin-top: 2.5rem;
  padding: 1.25rem 0 0;
  list-style: none;
  border-top: 1px solid var(--rule);
  font-size: var(--step-1);
}

.site-footer--slim {
  padding-block: 1.75rem;
}

.site-footer--slim .footer-base {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* -------------------------------------------------------------- motion */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }

  a:hover .arrow,
  a:hover .arrow--out {
    transform: none;
  }
}

/* -------------------------------------------------------- forced colors */

/* The sunset strokes are gradients, which forced colors remove. Each keeps
   its place and takes the system's text color. This block comes last, so it
   wins over the rules that draw the strokes. */
@media (forced-colors: active) {
  .kicker::before,
  .checks li::before {
    forced-color-adjust: none;
    background: CanvasText;
  }
}

/* --------------------------------------------------------------- print */

@media print {
  body::before,
  .site-header nav,
  .menu,
  .skip-link {
    display: none;
  }

  body {
    background: #fff;
  }

  .feature-art,
  .press,
  .site-footer,
  .band--deep {
    background: none;
  }
}