:root {
  color-scheme: light;
  --ground: #fffafb;
  --ink: #392633;
  --wine: #9d3b64;
  --link: #85284e;
  --petal: #f2dbe4;
  --quiet: #604653;
  --line: #b68b9e;
  --white: #ffffff;
  --display: "DIN Condensed", "Arial Narrow", "Avenir Next Condensed", sans-serif;
  --book: Georgia, "Times New Roman", serif;
  --gutter: max(32px, calc((100vw - 1240px) / 2));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 2rem; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--book);
  font-size: 19px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6, p, figure { margin: 0; }
h1, h2, h3, h4, h5, h6, legend {
  font-family: var(--display);
  font-weight: 700;
  font-stretch: condensed;
  line-height: 1.08;
  color: inherit;
}
h1 { font-size: clamp(3.5rem, 6.7vw, 6.25rem); text-wrap: balance; }
h2 { font-size: clamp(2.25rem, 3.5vw, 3.25rem); }
h3 { font-size: 2rem; }
p { text-wrap: pretty; }
p + p { margin-top: 1rem; }
a { color: var(--link); text-decoration-thickness: 1.5px; text-underline-offset: .2em; }
a:hover { text-decoration-thickness: 3px; }
a:focus-visible, button:focus-visible, select:focus-visible, textarea:focus-visible, input:focus-visible {
  outline: 3px solid var(--link);
  outline-offset: 5px;
}
.journal__hero a:focus-visible,
.field-note__section--inset a:focus-visible,
.reading-shelf a:focus-visible { outline-color: var(--white); }
a, button, select, input, textarea { -webkit-tap-highlight-color: #9d3b6433; }
button, select, textarea, input { font: inherit; font-size: 18px; line-height: 1.5; border-radius: 0; }
button, select, input { min-height: 52px; }
button {
  cursor: pointer;
  border: 2px solid var(--wine);
  padding: .75rem 1.15rem;
  background: var(--wine);
  color: var(--white);
  font-weight: 700;
}
button:hover { background: var(--link); border-color: var(--link); }
button[hidden], [hidden] { display: none !important; }
label { display: block; margin-bottom: .65rem; font-weight: 700; }
select, textarea, input {
  display: block;
  width: 100%;
  max-width: 100%;
  border: 2px solid var(--quiet);
  background: var(--white);
  color: var(--ink);
  padding: .8rem 1rem;
}
select { padding-right: 2rem; }
textarea { resize: vertical; min-height: 340px; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
legend { font-size: 2rem; padding: 0 0 1.5rem; }
small { font-size: 17px; }
img { display: block; width: 100%; max-width: 100%; height: auto; font-size: 17px; color: var(--quiet); }
svg { display: block; }
::selection { background: var(--petal); color: var(--ink); }

.skip-link {
  position: fixed;
  top: 1rem;
  left: 1rem;
  z-index: 20;
  padding: .7rem 1rem;
  min-height: 48px;
  background: var(--white);
  color: var(--link);
  transform: translateY(-200%);
}
.skip-link:focus { transform: translateY(0); }
.journal { width: 100%; }
.journal__masthead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  padding: 20px var(--gutter);
  border-bottom: 2px solid var(--white);
  color: var(--white);
  background: var(--wine);
  font-size: 18px;
}
.journal__identity { display: flex; align-items: center; gap: 1rem; }
.journal__mark {
  width: 22px;
  height: 42px;
  border-left: 7px solid currentColor;
  border-right: 2px solid currentColor;
  flex: 0 0 22px;
}
.journal__edition { font-size: 17px; }
.journal__eyebrow { display: block; font-size: 18px; margin-bottom: 1.4rem; }
.journal__hero {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 4.5rem;
  padding: 52px var(--gutter) 60px;
  align-items: start;
  background: var(--wine);
  color: var(--white);
}
.journal__intro { min-width: 0; }
.journal__lead { font-size: 21px; margin-top: 1.5rem; max-width: 49ch; }
.journal__review { font-size: 17px; color: var(--quiet); margin-top: 1.4rem; }
.journal__hero .journal__review { color: var(--white); }
.journal__hero a { color: var(--white); }
.journal__hero-link {
  display: inline-flex;
  align-items: center;
  gap: 1.4rem;
  min-height: 52px;
  margin-top: 1.5rem;
  text-decoration: underline;
  padding: .5rem 0;
}
.journal__hero-link svg { width: 24px; height: 24px; flex: 0 0 24px; }
.journal__first-answer { border-top: 3px solid currentColor; padding-top: 1.35rem; margin-top: 2rem; }
.journal__first-answer h2 { font-size: 2.2rem; margin-bottom: .8rem; }
.journal__first-answer p { font-size: 18px; }
.journal__hero > .still-life { margin-top: 0; }
.journal__hero > .still-life::before {
  content: "1";
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(15rem, 23vw, 21rem);
  line-height: .9;
  padding-top: .1em;
  margin-bottom: 1.4rem;
  color: var(--petal);
}
.journal__orientation {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: 5rem;
  padding: 64px var(--gutter);
  border-bottom: 3px solid var(--wine);
}
.journal__orientation:last-child { background: var(--petal); border-bottom: 0; }
.journal__orientation > div { max-width: 65ch; }
.journal__orientation h2 { max-width: 15ch; color: var(--link); }
.journal__orientation-copy > p:first-child::first-letter,
.field-note__opening::first-letter {
  float: left;
  font-family: var(--display);
  font-size: 4.7rem;
  line-height: .9;
  padding: .1em .1em 0 0;
  color: var(--link);
}
main > .field-note__section { margin-top: 0; padding: 64px var(--gutter) 24px; }
.journal__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; margin: 2rem 0 3rem; }
.journal__card {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  min-width: 0;
  padding: 1rem 0 1.5rem;
  border-top: 3px solid var(--wine);
  text-decoration: none;
  color: var(--ink);
}
.journal__card::before {
  content: "1";
  display: block;
  font-family: var(--display);
  font-size: 6rem;
  font-weight: 700;
  line-height: 1;
  color: var(--wine);
}
.journal__card:nth-child(2)::before { content: "2"; }
.journal__card:nth-child(3)::before { content: "3"; }
.journal__card:nth-child(4)::before { content: "4"; }
.journal__card:nth-child(5)::before { content: "5"; }
.journal__card:nth-child(6)::before { content: "6"; }
.journal__card:hover .journal__card-title { text-decoration-thickness: 3px; }
.journal__card-title {
  display: block;
  font-family: var(--display);
  color: var(--link);
  font-size: 2.4rem;
  line-height: 1.1;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: .14em;
}
.journal__card-copy { display: block; font-size: 18px; line-height: 1.6; }
.journal__card-end { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: auto; color: var(--link); font-size: 17px; }
.journal__card-end svg { width: 24px; height: 24px; flex: 0 0 24px; }

.still-life { margin-top: 2rem; }
.still-life img { object-fit: cover; aspect-ratio: 4 / 3; object-position: center; }
.journal__hero .still-life img { aspect-ratio: 5 / 3; }
.still-life__caption { font-size: 17px; color: var(--quiet); padding: 1rem 0; border-bottom: 2px solid var(--line); }
.journal__hero .still-life__caption { color: var(--white); border-bottom-color: var(--petal); }
.still-life--wide { max-width: 520px; margin: 2.5rem 0 .5rem; }
.still-life--wide img { aspect-ratio: 2 / 1; }

.field-note { display: grid; grid-template-columns: 190px minmax(0, 790px) minmax(0, 1fr); column-gap: 3rem; padding: 0 var(--gutter); }
.field-note__margin { padding-top: 58px; }
.field-note__margin::before {
  content: "1";
  display: block;
  font-family: var(--display);
  font-size: 10rem;
  font-weight: 700;
  line-height: 1;
  color: var(--wine);
  border-top: 3px solid var(--wine);
}
.field-note__category { font-size: 18px; color: var(--link); }
.field-note__home { display: flex; min-height: 48px; align-items: center; margin-top: 1rem; font-size: 17px; }
.field-note__article { grid-column: 2; min-width: 0; padding: 54px 0 72px; }
.field-note__article h1 { font-size: clamp(3.5rem, 5.5vw, 5.25rem); color: var(--link); }
.field-note__opening { margin: 1.8rem 0 0; font-size: 21px; line-height: 1.65; }
.field-note__section { margin-top: 3.3rem; }
.field-note__section h2 { margin-bottom: 1.1rem; }
.field-note__section h3 { margin-top: 2rem; margin-bottom: .8rem; }
.field-note__section p { max-width: 68ch; }
.field-note__section--inset { padding: 2rem; background: var(--wine); color: var(--white); }
.field-note__section--inset a { color: var(--white); }
.field-note__link { display: flex; width: fit-content; max-width: 100%; gap: 1.4rem; align-items: center; min-height: 48px; padding: .5rem 0; margin-top: 1.2rem; }
.field-note__link svg { width: 24px; height: 24px; flex: 0 0 24px; }
.field-note__next { margin-top: 3rem; border-top: 3px solid var(--wine); padding-top: 1.2rem; }
.field-note__next a { display: flex; min-height: 58px; align-items: center; justify-content: space-between; gap: 2rem; }
.field-note__next svg { width: 24px; height: 24px; flex: 0 0 24px; }
.field-note__next-label { font-size: 17px; color: var(--quiet); }
.field-note__next-title { font-size: 21px; }

.compound-map { display: flex; flex-direction: column; gap: 1rem; padding: 1.5rem 0; margin-top: 2rem; border-block: 3px solid var(--wine); }
.compound-map__inputs { display: flex; gap: 1rem; align-items: center; }
.compound-map__part { flex: 1; text-align: center; font-size: 18px; padding: 1rem .5rem; background: var(--petal); }
.compound-map__join { font-size: 26px; color: var(--link); }
.compound-map__connector { color: var(--link); margin: 0 auto; width: 24px; height: 30px; }
.compound-map__result { text-align: center; background: var(--wine); padding: 1.2rem; font-size: 24px; color: var(--white); }
.trial-window { padding: 1.6rem; background: var(--petal); margin-top: 1.4rem; }
.trial-window__track + .trial-window__row { margin-top: 1.5rem; }
.trial-window__row { font-size: 18px; }
.trial-window__track { height: 16px; margin-top: .8rem; background: var(--white); }
.trial-window__bar { display: block; height: 100%; background: var(--wine); }
.trial-window__bar--combination { width: 81.6%; }
.trial-window__bar--comparison { width: 12%; background: var(--quiet); }
.trial-window__caption { color: var(--quiet); font-size: 17px; margin-top: 1.4rem; }

.worksheet { background: var(--petal); padding: 2rem; margin-top: 2rem; border-top: 4px solid var(--wine); }
.worksheet__field + .worksheet__field { margin-top: 1.4rem; }
.worksheet__hint { color: var(--quiet); font-size: 17px; margin-top: .7rem; }
.worksheet__result { margin-top: 2rem; padding-top: 1.7rem; border-top: 2px solid var(--wine); }
.worksheet__result h3 { margin: 0 0 1rem; }
.worksheet__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1.2rem; }
.worksheet__secondary { background: var(--white); color: var(--link); }
.worksheet__secondary:hover { background: var(--ground); color: var(--link); }
.worksheet__message { min-height: 2.6rem; font-size: 17px; margin-top: .9rem; }
.worksheet__print-sheet { white-space: pre-wrap; font-size: 18px; line-height: 1.6; }
.source-trail { margin-top: 2rem; }
.source-trail__entry { padding: 1.7rem 0; border-top: 2px solid var(--line); }
.source-trail__entry h2 { font-size: 2.2rem; margin-bottom: .8rem; }
.source-trail__link { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem 0; min-height: 48px; font-size: 18px; line-height: 1.5; }
.source-trail__link svg { width: 24px; height: 24px; flex: 0 0 24px; }
.source-trail__entry p { margin-top: .7rem; color: var(--quiet); }

.reading-shelf { background: var(--wine); color: var(--white); padding: 3.5rem var(--gutter); }
.reading-shelf__heading { display: flex; justify-content: space-between; align-items: baseline; gap: 1.5rem; margin-bottom: 1.8rem; }
.reading-shelf__hint { font-size: 17px; }
.reading-shelf__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 2rem; }
.reading-shelf__link { display: flex; align-items: center; min-height: 56px; font-size: 17px; padding: .75rem 0; border-top: 2px solid var(--petal); color: var(--white); line-height: 1.5; }
.reading-shelf__link[aria-current="page"] { font-weight: 700; text-decoration-thickness: 3px; }
.colophon { padding: 2rem var(--gutter) 2.5rem; display: flex; justify-content: space-between; gap: 3rem; align-items: start; }
.colophon__sentence { color: var(--quiet); font-size: 17px; max-width: 65ch; }
.colophon__link { flex: 0 0 auto; display: flex; align-items: center; min-height: 48px; font-size: 17px; margin-top: -.5rem; }
.missing-page { padding: 4rem var(--gutter); background: var(--petal); }
.missing-page h1 { max-width: 16ch; color: var(--link); }
.missing-page p { margin-top: 1.5rem; max-width: 55ch; }
.missing-page .journal__eyebrow { margin-top: 0; }
.missing-page::before { content: "?"; float: right; font: 700 15rem/1 var(--display); color: var(--wine); }

@media (max-width: 1050px) {
  .journal__hero { gap: 2.5rem; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
  .journal__orientation { gap: 2.5rem; }
  .journal__cards { gap: 1.5rem; }
  .field-note { grid-template-columns: 140px minmax(0, 1fr); column-gap: 2.5rem; }
  .reading-shelf__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  :root { --gutter: 20px; }
  body { font-size: 18px; }
  h1 { font-size: clamp(3rem, 13.2vw, 4.5rem); }
  h2 { font-size: 2.4rem; }
  .journal__masthead { padding-block: 18px; }
  .journal__identity { font-size: 17px; gap: .8rem; }
  .journal__edition { display: none; }
  .journal__hero { grid-template-columns: minmax(0, 1fr); gap: 2rem; padding-block: 32px 40px; }
  .journal__lead { font-size: 20px; }
  .journal__eyebrow { margin-bottom: 1.2rem; }
  .journal__hero > .still-life { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 0 1rem; width: 100%; }
  .journal__hero > .still-life::before { grid-row: 1 / 3; font-size: 9rem; margin: 0; padding: 0; line-height: 1; }
  .journal__hero .still-life img { aspect-ratio: 5 / 3; }
  .journal__hero .still-life__caption { grid-column: 2; padding: .7rem 0; }
  .journal__orientation { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; padding-block: 2.5rem; }
  .journal__orientation h2 { max-width: 22ch; }
  main > .field-note__section { padding-block: 2.5rem 1rem; }
  .journal__cards { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; margin-bottom: 1.5rem; }
  .journal__card { position: relative; min-height: 225px; padding-left: 76px; }
  .journal__card::before { position: absolute; left: 0; top: 1rem; font-size: 5.5rem; }
  .journal__card-title { font-size: 2.15rem; }
  .field-note { display: block; }
  .field-note__margin { padding-top: 22px; display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: center; gap: .25rem 1rem; }
  .field-note__margin::before { grid-row: 1 / 3; font-size: 4rem; }
  .field-note__home { grid-column: 2; margin: 0; }
  .field-note__article { padding: 28px 0 48px; }
  .field-note__article h1 { font-size: clamp(3rem, 12vw, 4rem); overflow-wrap: anywhere; }
  .field-note__opening { font-size: 20px; }
  .field-note__section { margin-top: 2.7rem; }
  .field-note__section--inset, .worksheet { padding: 1.25rem; }
  .field-note__next a { gap: 1.3rem; }
  .compound-map { padding-block: 1.15rem; }
  .compound-map__inputs { flex-direction: column; gap: .6rem; }
  .compound-map__part { width: 100%; }
  .reading-shelf { padding-block: 2.5rem; }
  .reading-shelf__heading { display: block; }
  .reading-shelf__hint { margin-top: .75rem; }
  .reading-shelf__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.25rem; }
  .colophon { display: block; padding-bottom: 2rem; }
  .colophon__link { margin-top: 1rem; width: fit-content; }
  .missing-page { padding-block: 3rem; }
  .missing-page::before { float: none; display: block; font-size: 6rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
@media print {
  :root { --ground: #fff; --ink: #222; --quiet: #333; --wine: #722445; --link: #722445; --petal: #fff; --gutter: 0px; }
  body { background: #fff; font-size: 17px; }
  .skip-link, .field-note__margin, .reading-shelf, .field-note__next, .colophon__link, .worksheet__actions, .worksheet__message, .still-life, .missing-page::before { display: none !important; }
  .journal__masthead, .journal__hero, .missing-page { background: #fff; color: #222; }
  .journal__masthead { padding: 0 0 1rem; border-color: #555; }
  .journal__hero { display: block; padding: 1rem 0; }
  .journal__hero a, .journal__hero .journal__review { color: #222; }
  .field-note { display: block; }
  .field-note__article { max-width: 75ch; padding: 1.5rem 0; }
  h1, .field-note__article h1 { font-size: 36px; }
  h2 { font-size: 25px; }
  .worksheet, .field-note__section--inset, .trial-window, .compound-map { background: #fff; color: #222; border-color: #555; break-inside: avoid; }
  .field-note__section--inset a { color: #222; }
  select, textarea, input { background: #fff; color: #222; border-color: #555; }
  .worksheet textarea { display: none; }
  .worksheet__print-sheet[hidden] { display: block !important; }
  .worksheet__field { break-inside: avoid; }
  .colophon { display: block; }
}