@font-face {
  font-family: "Libre Caslon Text";
  src: url("assets/LibreCaslonText-Variable.ttf") format("truetype");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "Libre Caslon Text";
  src: url("assets/LibreCaslonText-Italic-Variable.ttf") format("truetype");
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "Libre Caslon Display";
  src: url("assets/LibreCaslonDisplay-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
:root {
  color-scheme: light;
  --paper: #f6f3eb;
  --ink: #28251f;
  --muted: #625c51;
  --rule: #bcb5a8;
  --reading-font: "Libre Caslon Text", Georgia, "Times New Roman", serif;
  --display-font: "Libre Caslon Display", Georgia, "Times New Roman", serif;
}
* { box-sizing: border-box; }
html { background: var(--paper); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--reading-font);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.85;
  -webkit-font-smoothing: antialiased;
}
::selection { color: var(--paper); background: var(--ink); }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .24em; }
a:hover { text-decoration-color: var(--muted); }
a:focus-visible, main:focus-visible { outline: 2px solid var(--ink); outline-offset: 6px; }
.page-shell { width: min(1056px, calc(100% - 112px)); margin-inline: auto; }
.masthead { text-align: center; border-bottom: 1px solid var(--rule); padding: 66px 0 42px; }
.masthead-wordmark {
  display: block;
  margin: 0;
  font-family: var(--display-font);
  font-size: clamp(52px, 7vw, 96px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -.025em;
  text-decoration: none;
}
.masthead-logo { display: block; width: min(460px, 100%); height: auto; margin-inline: auto; }
.masthead-tagline {
  margin: 18px 0 0;
  font-family: var(--reading-font);
  font-size: 12px;
  line-height: 1.8;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.letter { max-width: 660px; margin: 56px auto 82px; }
.letter p { margin: 0 0 29px; }
.letter p:last-child { margin-bottom: 0; }
.letter em { font-style: italic; }
.letter .signoff { margin-top: 40px; font-size: 20px; line-height: 1.6; }
.letter .page-title { font-family: var(--display-font); font-size: 45px; font-weight: 400; letter-spacing: -.02em; line-height: 1.2; margin: 0 0 32px; }
.letter h2 { font-size: 19px; font-weight: 400; margin: 36px 0 16px; }
.letter .effective { color: var(--muted); font-size: 13px; }
#book { scroll-margin-top: 36px; }
.site-footer {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding: 23px 0 36px;
  border-top: 1px solid var(--rule);
  color: var(--muted);
  font-size: 13px;
  line-height: 1.8;
}
.site-footer p { margin: 0; }
.site-footer nav { display: flex; gap: 24px; }
.site-footer a { text-decoration: none; }
.site-footer a:hover, .site-footer a[aria-current="page"] { text-decoration: underline; }
.skip-link { position: absolute; left: 20px; top: -100px; padding: 8px 14px; background: var(--ink); color: var(--paper); z-index: 5; }
.skip-link:focus-visible { top: 16px; }
@media (max-width: 760px) {
  .page-shell { width: calc(100% - 48px); }
  .masthead { padding: 45px 0 31px; }
  .masthead-wordmark { font-size: clamp(43px, 9.2vw, 65px); letter-spacing: -.02em; }
  .masthead-tagline { font-size: 11px; letter-spacing: .09em; margin-top: 15px; }
  .letter { margin-top: 36px; margin-bottom: 55px; }
  .letter p { margin-bottom: 27px; }
  .letter .signoff { margin-top: 34px; font-size: 20px; }
  .letter .page-title { font-size: 36px; }
  .site-footer { align-items: center; flex-direction: column; gap: 13px; padding: 23px 0 30px; }
}
@media (max-width: 360px) {
  .page-shell { width: calc(100% - 40px); }
  body { font-size: 15px; }
  .masthead-wordmark { font-size: 40px; }
  .masthead-tagline { font-size: 10.5px; letter-spacing: .06em; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
.books { margin-top: 62px; border-top: 1px solid var(--rule); padding-top: 48px; }
.publication { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 42px; align-items: center; }
.publication + .publication { margin-top: 48px; border-top: 1px solid var(--rule); padding-top: 48px; }
.publication-art { margin: 0; }
.publication-art img { display: block; width: 100%; height: auto; }
.sudoku-art { padding: 0 16px; }
.notebook-covers { display: flex; align-items: center; isolation: isolate; padding-block: 14px; }
.notebook-covers img { width: 44%; flex: none; margin-left: -16%; }
.notebook-covers img:first-child { margin-left: 0; position: relative; z-index: 3; }
.notebook-covers img:nth-child(2) { position: relative; z-index: 2; }
.notebook-art figcaption { text-align: center; font-size: 12px; color: var(--muted); margin-top: 10px; }
.letter .publication-copy h2 { font-family: var(--display-font); font-size: 34px; line-height: 1.15; margin: 0 0 17px; font-weight: 400; }
.letter .publication-copy p { font-size: 15px; line-height: 1.8; margin: 0 0 20px; }
.publication-specs { font-size: 12px; line-height: 1.7; margin: 0; }
.publication-specs div { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px; margin-top: 7px; }
.publication-specs dt { color: var(--muted); }
.publication-specs dd { margin: 0; }
.letter .publication-note { margin: 36px 0 0; font-size: 12px; color: var(--muted); }
@media (max-width: 600px) {
  .publication { grid-template-columns: minmax(0, 1fr); gap: 27px; }
  .publication-art { width: min(240px, 100%); margin-inline: auto; }
  .sudoku-art { width: min(210px, 100%); padding: 0; }
  .letter .publication-copy h2 { font-size: 34px; }
  .letter .publication-copy p { font-size: 15px; }
  .publication-specs { font-size: 13px; }
  .books { padding-top: 35px; margin-top: 48px; }
}
@media print {
  .page-shell { width: 100%; }
  .masthead { padding-top: 0; }
  .letter { max-width: 38em; }
  .site-footer nav, .skip-link { display: none; }
}