/* ==========================================================================
   Rhapsodic Reflections

   The idea: a cloth-bound book from a teacher's shelf. An oxblood cover with
   gilt lettering, then ivory pages set in Garamond with room to breathe.

   Written for older eyes first: large type, strong contrast, generous
   spacing, big buttons, nothing that moves. Sizes are in rem/em throughout,
   so the page grows cleanly when a reader enlarges the text.
   ========================================================================== */

/* ---- Typefaces (kept in this repository; SIL Open Font Licence) ---------- */

@font-face {
  font-family: "EB Garamond";
  src: url("../fonts/eb-garamond-roman-latin.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+0160-0161, U+0178, U+017D-017E, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+20B9, U+2116, U+2122, U+2190-2193, U+2212, U+2215, U+25C6-25C7, U+2619, U+2766-2767, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "EB Garamond";
  src: url("../fonts/eb-garamond-roman-latin-ext.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-0130, U+0132-0151, U+0154-015F, U+0162-0177, U+0179-017C, U+017F-024F, U+0300-036F, U+1E00-1EFF;
}
@font-face {
  font-family: "EB Garamond";
  src: url("../fonts/eb-garamond-italic-latin.woff2") format("woff2");
  font-weight: 400 800;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+0160-0161, U+0178, U+017D-017E, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+20B9, U+2116, U+2122, U+2190-2193, U+2212, U+2215, U+25C6-25C7, U+2619, U+2766-2767, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "EB Garamond";
  src: url("../fonts/eb-garamond-italic-latin-ext.woff2") format("woff2");
  font-weight: 400 800;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0100-0130, U+0132-0151, U+0154-015F, U+0162-0177, U+0179-017C, U+017F-024F, U+0300-036F, U+1E00-1EFF;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond-roman-latin.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+0160-0161, U+0178, U+017D-017E, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+20B9, U+2116, U+2122, U+2190-2193, U+2212, U+2215, U+25C6-25C7, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond-roman-latin-ext.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-0130, U+0132-0151, U+0154-015F, U+0162-0177, U+0179-017C, U+017F-024F, U+0300-036F, U+1E00-1EFF;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond-italic-latin.woff2") format("woff2");
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+0160-0161, U+0178, U+017D-017E, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+20B9, U+2116, U+2122, U+2190-2193, U+2212, U+2215, U+25C6-25C7, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond-italic-latin-ext.woff2") format("woff2");
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0100-0130, U+0132-0151, U+0154-015F, U+0162-0177, U+0179-017C, U+017F-024F, U+0300-036F, U+1E00-1EFF;
}

/* ---- Palette and measures ------------------------------------------------ */

:root {
  --paper: #fbf6ec;        /* ivory page */
  --paper-deep: #f3ebda;   /* a shade darker, for panels */
  --mount: #fffdf8;        /* the card a photograph sits on */
  --ink: #2b1f18;          /* warm near-black */
  --ink-soft: #5c4b3f;     /* dates and captions */
  --rule: #dccdb1;         /* hairlines */
  --oxblood: #5a1424;      /* the cover */
  --oxblood-deep: #40101b;
  --wine: #7a1d31;         /* links */
  --gold: #a98339;         /* ornaments on paper */
  --gilt: #e2c686;         /* lettering on the cover */

  --text: "EB Garamond", "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;
  --display: "Cormorant Garamond", "EB Garamond", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;

  --measure: 26em;         /* about 68 characters: a comfortable line */
  --gutter: 1.25rem;
}

/* ---- Foundations --------------------------------------------------------- */

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

html {
  font-size: 100%; /* the reader's own browser setting; never overridden in px */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background-color: #fbf6ec;
  background-color: var(--paper);
  color: #2b1f18;
  color: var(--ink);
  font-family: Georgia, serif;
  font-family: var(--text);
  font-weight: 450;
  font-size: 1.375rem;
  font-size: clamp(1.375rem, 1.27rem + 0.45vw, 1.5rem);
  line-height: 1.6;
  font-variant-numeric: oldstyle-nums proportional-nums;
  font-kerning: normal;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}

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

a {
  color: var(--wine);
  text-decoration: underline;
  text-decoration-thickness: 0.06em;
  text-underline-offset: 0.18em;
}
a:hover {
  color: var(--oxblood);
  text-decoration-thickness: 0.12em;
}

/* A clear ring for anyone moving through the page with a keyboard. */
:focus {
  outline: 3px solid var(--wine);
  outline-offset: 3px;
}
:focus:not(:focus-visible) {
  outline: none;
}
:focus-visible {
  outline: 3px solid var(--wine);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Words for screen readers only. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.skip {
  position: absolute;
  left: -999em;
  top: 0.5rem;
  z-index: 10;
  padding: 0.6em 1em;
  background: var(--paper);
  color: var(--oxblood);
  font-weight: 600;
}
.skip:focus {
  left: 0.5rem;
}

/* ---- The cover ----------------------------------------------------------- */

.cover {
  padding: 0.6rem;
  background-color: #5a1424;
  background-color: var(--oxblood);
  /* Lamplight falling on the cloth from above. */
  background-image:
    radial-gradient(ellipse 75% 130% at 50% -25%, rgba(255, 214, 150, 0.2), rgba(255, 214, 150, 0) 65%),
    linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.2) 100%);
  color: #e2c686;
  color: var(--gilt);
  text-align: center;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Two fine gilt rules, like the tooling on a leather binding. */
.cover__frame {
  position: relative;
  padding: 1.05rem 1rem 1.15rem;
  border: 1px solid rgba(226, 198, 134, 0.62);
}
.cover__frame::before {
  content: "";
  position: absolute;
  top: 4px;
  right: 4px;
  bottom: 4px;
  left: 4px;
  border: 1px solid rgba(226, 198, 134, 0.3);
  pointer-events: none;
}

/* A small gilt stud at each corner of the frame. */
.cover__frame::after {
  content: "";
  position: absolute;
  top: -5px;
  right: -5px;
  bottom: -5px;
  left: -5px;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 0l5 5-5 5-5-5z' fill='%23e2c686'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 0l5 5-5 5-5-5z' fill='%23e2c686'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 0l5 5-5 5-5-5z' fill='%23e2c686'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 0l5 5-5 5-5-5z' fill='%23e2c686'/%3E%3C/svg%3E");
  background-position: left top, right top, left bottom, right bottom;
  background-repeat: no-repeat;
  background-size: 9px 9px;
  pointer-events: none;
}

.wordmark {
  margin: 0;
  font-family: var(--display);
  font-weight: 500;
  line-height: 1;
}
.wordmark a {
  position: relative;
  display: inline-block;
  padding: 0.15rem 0.75rem;
  color: inherit;
  text-decoration: none;
}
.wordmark a:focus-visible {
  outline-color: var(--gilt);
}
.wordmark__script {
  display: block;
  font-style: italic;
  font-size: 2.35rem;
  font-size: min(clamp(2.35rem, 1.9rem + 2.2vw, 3.1rem), 17vw);
  letter-spacing: 0.005em;
}
.wordmark__caps {
  display: block;
  margin-top: 0.5em;
  padding-left: 0.42em; /* balances the space after the last letter */
  font-size: 0.74rem;
  font-size: min(clamp(0.74rem, 0.62rem + 0.55vw, 0.95rem), 4.6vw);
  font-weight: 600;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  font-variant-numeric: lining-nums;
}

/* Gilt lettering catches the light: paler at the top, deeper at the foot. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .wordmark__script,
  .wordmark__caps {
    background-image: linear-gradient(180deg, #f4e4b8 0%, #e2c686 52%, #c7a25b 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .wordmark__script {
    /* room for the italic's overhang, which would otherwise be clipped */
    padding: 0.06em 0.18em 0.2em;
    margin: -0.06em -0.18em -0.2em;
  }
}

/* The home page wears the full cover. */
.cover--grand .cover__frame {
  padding: 2.1rem 1rem 2.2rem;
}
.cover--grand .wordmark__script {
  font-size: 3.6rem;
  font-size: min(clamp(3.6rem, 2.2rem + 7vw, 6.25rem), 20vw);
}
.cover--grand .wordmark__caps {
  margin-top: 0.55em;
  font-size: 1rem;
  font-size: min(clamp(1rem, 0.66rem + 1.55vw, 1.6rem), 5.4vw);
}
.crown {
  width: 3.5rem;
  height: auto;
  margin: 0 auto 0.9rem;
  color: var(--gilt);
}
.cover__tagline {
  max-width: 24em;
  margin: 1.35rem auto 0;
  font-style: italic;
  font-size: 1.15rem;
  font-size: clamp(1.15rem, 1.05rem + 0.45vw, 1.35rem);
  line-height: 1.4;
  color: #ecd9ab;
}
.cover__tagline::before {
  content: "";
  display: block;
  width: 3.5rem;
  height: 1px;
  margin: 0 auto 1.25rem;
  background: rgba(226, 198, 134, 0.7);
}
/* Gilt lettering catches the light: paler at the top, deeper at the foot. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .wordmark__script,
  .wordmark__caps {
    background-image: linear-gradient(180deg, #f4e4b8 0%, #e2c686 52%, #c7a25b 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .wordmark__script {
    /* room for the italic's overhang, which would otherwise be clipped */
    padding: 0.06em 0.18em 0.2em;
    margin: -0.06em -0.18em -0.2em;
  }
}

/* The home page wears the full cover. */
.cover--grand .cover__frame {
  padding: 2.1rem 1rem 2.2rem;
}
.cover--grand .wordmark__script {
  font-size: 3.6rem;
  font-size: min(clamp(3.6rem, 2.2rem + 7vw, 6.25rem), 20vw);
}
.cover--grand .wordmark__caps {
  margin-top: 0.55em;
  font-size: 1rem;
  font-size: min(clamp(1rem, 0.66rem + 1.55vw, 1.6rem), 5.4vw);
}
.crown {
  width: 3.5rem;
  height: auto;
  margin: 0 auto 0.9rem;
  color: var(--gilt);
}
.cover__tagline {
  max-width: 24em;
  margin: 1.35rem auto 0;
  font-style: italic;
  font-size: 1.15rem;
  font-size: clamp(1.15rem, 1.05rem + 0.45vw, 1.35rem);
  line-height: 1.4;
  color: #ecd9ab;
}
.cover__tagline::before {
  content: "";
  display: block;
  width: 3.5rem;
  height: 1px;
  margin: 0 auto 1.25rem;
  background: rgba(226, 198, 134, 0.7);
}
.cover__byline {
  margin: 0.5rem 0 0;
  font-variant-caps: all-small-caps;
  letter-spacing: 0.16em;
  font-size: 1.1rem;
  font-weight: 500;
}
/* With no tagline, her name sits beneath the short gilt rule instead. */
.wordmark + .cover__byline {
  margin-top: 1.35rem;
}
.wordmark + .cover__byline::before {
  content: "";
  display: block;
  width: 3.5rem;
  height: 1px;
  margin: 0 auto 1rem;
  background: rgba(226, 198, 134, 0.7);
}

/* ---- Navigation strip ---------------------------------------------------- */

.strip {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  background-color: #40101b;
  background-color: var(--oxblood-deep);
  border-top: 1px solid rgba(226, 198, 134, 0.3);
  border-bottom: 1px solid rgba(226, 198, 134, 0.55);
  box-shadow: 0 2px 10px rgba(64, 16, 27, 0.18);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.strip__nav {
  display: flex;
  justify-content: center;
}
.strip__nav a {
  display: block;
  padding: 0.62rem 1.25rem 0.7rem;
  color: var(--gilt);
  font-size: 1.2rem;
  font-weight: 500;
  font-variant-caps: all-small-caps;
  letter-spacing: 0.18em;
  line-height: 1.3;
  text-decoration: none;
}
.strip__nav a:hover {
  color: #fbeecb;
  background-color: rgba(255, 255, 255, 0.06);
}
.strip__nav a[aria-current="page"] {
  box-shadow: inset 0 -3px 0 var(--gilt);
}
.strip a:focus-visible,
.strip button:focus-visible {
  outline-color: var(--gilt);
  outline-offset: -4px;
}
.strip__size {
  display: flex;
  padding: 0.25rem 0.5rem 0.25rem 0.4rem;
}
.strip__size[hidden] {
  display: none;
}
.strip__label {
  display: none;
  align-self: center;
  margin-right: 0.35rem;
  color: var(--gilt);
  font-size: 1.05rem;
  font-variant-caps: all-small-caps;
  letter-spacing: 0.14em;
  white-space: nowrap;
}
@media (min-width: 50em) {
  .strip__size {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    padding: 0 0.5rem 0 0;
  }
  .strip__label {
    display: block;
  }
}
.strip__size button {
  min-width: 2.6rem;
  min-height: 2.5rem;
  margin-left: 0.3rem;
  padding: 0 0.4rem;
  border: 1px solid rgba(226, 198, 134, 0.5);
  border-radius: 2px;
  background: none;
  color: var(--gilt);
  font: inherit;
  font-size: 1rem;
  font-weight: 500;
  font-variant-numeric: lining-nums;
  line-height: 1;
  cursor: pointer;
}
.strip__size button + button {
  font-size: 1.2rem;
}
.strip__size button:hover {
  background-color: rgba(255, 255, 255, 0.08);
  color: #fbeecb;
}
.strip__size button:disabled {
  opacity: 0.4;
  cursor: default;
}

/* ---- The page ------------------------------------------------------------ */

.page {
  padding: 2.6rem var(--gutter) 1rem;
}
.is-home .page {
  padding-top: 2.4rem;
}

/* Small-capital labels: dates, section names. */
.eyebrow {
  margin: 0 0 0.85rem;
  color: var(--ink-soft);
  font-size: 1em;
  font-weight: 500;
  font-variant-caps: all-small-caps;
  letter-spacing: 0.14em;
  line-height: 1.3;
  text-align: center;
}
.eyebrow--ruled {
  display: flex;
  align-items: center;
  max-width: 31em;
  margin: 0 auto 1.6rem;
  color: var(--wine);
  letter-spacing: 0.2em;
}
.eyebrow--ruled::before,
.eyebrow--ruled::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rule);
}
.eyebrow--ruled span {
  padding: 0 1em;
}
@media (min-width: 34em) {
  .eyebrow--ruled span {
    white-space: nowrap;
  }
}

/* Printers' flowers, from the typeface itself. */
.fleuron,
.finis {
  margin: 0;
  color: var(--gold);
  font-family: "EB Garamond", serif;
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  text-align: center;
}
.fleuron {
  font-size: 1.35em;
}

/* ---- Home: welcome, the latest essay, the earlier ones ------------------- */

.welcome {
  max-width: 27em;
  margin: 0 auto 2.8rem;
  text-align: center;
}
.welcome p:first-child {
  margin: 0 0 1.1rem;
  font-style: italic;
  font-size: 1.06em;
  line-height: 1.55;
  text-wrap: balance;
}

.feature {
  position: relative;
  max-width: 29em;
  margin: 0 auto 3.4rem;
  text-align: center;
}
.feature__picture {
  margin: 0 0 1.5rem;
  padding: 0.5rem;
  background: var(--mount);
  border: 1px solid var(--rule);
  box-shadow: 0 1px 2px rgba(70, 40, 20, 0.08), 0 10px 28px rgba(70, 40, 20, 0.1);
}
.feature__picture img {
  width: 100%;
  height: 15em;
  object-fit: cover;
}
.feature__title {
  margin: 0 0 0.45rem;
  font-family: var(--display);
  font-size: 2.1rem;
  font-size: clamp(2.1rem, 1.5rem + 2.6vw, 3rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.005em;
  text-wrap: balance;
}
.feature__title a,
.entry__title a {
  color: var(--ink);
  text-decoration: none;
}
/* The whole card is the link, so there is a generous target to press. */
.feature__title a::after,
.entry__title a::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.feature:hover .feature__title a,
.entry:hover .entry__title a {
  color: var(--wine);
}
.feature__date {
  margin: 0 0 1rem;
  color: var(--ink-soft);
  font-variant-caps: all-small-caps;
  letter-spacing: 0.14em;
  font-weight: 500;
}
.feature__excerpt {
  margin: 0 0 1.1rem;
  text-align: left;
}
.feature__more {
  margin: 0;
  color: var(--wine);
  font-variant-caps: all-small-caps;
  letter-spacing: 0.14em;
  font-weight: 600;
}
.feature__more span {
  display: inline-block;
  transition: transform 0.2s ease;
}
.feature:hover .feature__more span {
  transform: translateX(0.25em);
}

.earlier {
  margin-bottom: 1rem;
}
.entries {
  max-width: 31em;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
/* One essay in the list: its picture, its date and title, its opening lines. */
.entry {
  position: relative;
  display: grid;
  grid-template-columns: 9.4em 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "thumb head"
    "thumb text";
  grid-column-gap: 1.5em;
  column-gap: 1.5em;
  padding: 1.6rem 0;
  border-top: 1px solid var(--rule);
}
.entry:first-child {
  border-top: 0;
  padding-top: 0.2rem;
}
.entry__thumb {
  grid-area: thumb;
  width: 9.4em;
  height: 7.2em;
  padding: 0.3rem;
  background: var(--mount);
  border: 1px solid var(--rule);
  box-shadow: 0 1px 2px rgba(70, 40, 20, 0.08), 0 6px 18px rgba(70, 40, 20, 0.09);
}
.entry__thumb picture {
  display: block;
  width: 100%;
  height: 100%;
}
.entry__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%; /* favour the upper part, where faces usually are */
  background: var(--paper-deep);
}
/* An essay with no picture gets a small cloth-bound cover bearing its
   initial. The cloth comes in five colours, so the list reads like a shelf. */
.initial {
  --cloth: #5a1424;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding-bottom: 0.08em;
  background-color: #5a1424;
  background-color: var(--cloth);
  background-image: radial-gradient(ellipse 90% 90% at 50% 0%, rgba(255, 224, 170, 0.24), rgba(255, 224, 170, 0) 70%);
  box-shadow: inset 0 0 0 3px #5a1424, inset 0 0 0 4px rgba(226, 198, 134, 0.6);
  box-shadow: inset 0 0 0 3px var(--cloth), inset 0 0 0 4px rgba(226, 198, 134, 0.6);
  color: var(--gilt);
  font-family: var(--display);
  font-size: 3.5em;
  font-style: italic;
  font-weight: 500;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.initial--2 {
  --cloth: #1f3b30; /* bottle green */
}
.initial--3 {
  --cloth: #1e2d4a; /* midnight blue */
}
.initial--4 {
  --cloth: #4a2a16; /* tobacco brown */
}
.initial--5 {
  --cloth: #3b1d42; /* aubergine */
}
.entry__head {
  grid-area: head;
}
.entry__date {
  margin: 0 0 0.1rem;
  color: var(--ink-soft);
  font-variant-caps: all-small-caps;
  letter-spacing: 0.12em;
  font-weight: 500;
  font-size: 0.96em;
  line-height: 1.35;
}
.entry__title {
  margin: 0 0 0.35rem;
  font-family: var(--display);
  font-size: 1.6em;
  font-weight: 600;
  line-height: 1.1;
  text-wrap: balance;
}
.entry__excerpt {
  grid-area: text;
  margin: 0;
  font-size: 0.94em;
  line-height: 1.5;
}

.shelf {
  max-width: 31em;
  margin: 0 auto 3rem;
}
.shelf__year {
  margin: 1.8rem 0 0.4rem;
  color: var(--wine);
  font-family: var(--display);
  font-size: 1.5em;
  font-weight: 600;
  font-variant-numeric: oldstyle-nums;
  letter-spacing: 0.04em;
  line-height: 1.2;
}
.shelf__year:first-of-type {
  margin-top: 0;
}
.shelf__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.shelf__item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0.55rem 0;
  border-top: 1px solid var(--rule);
}
.shelf__item a {
  color: var(--ink);
  text-decoration: none;
  font-size: 1.04em;
}
.shelf__item a:hover {
  color: var(--wine);
  text-decoration: underline;
}
.shelf__item time {
  flex: none;
  margin-left: 1.2em;
  color: var(--ink-soft);
  font-variant-caps: all-small-caps;
  letter-spacing: 0.1em;
  white-space: nowrap;
}

.empty {
  max-width: var(--measure);
  margin: 0 auto 4rem;
  font-style: italic;
  text-align: center;
}

/* ---- An essay ------------------------------------------------------------ */

.essay__head {
  max-width: 31em;
  margin: 0 auto 2.2rem;
  text-align: center;
}
.essay__title {
  margin: 0 0 1.1rem;
  font-family: var(--display);
  font-size: 2.5rem;
  font-size: clamp(2.5rem, 1.75rem + 3.3vw, 3.75rem);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.essay__draft {
  display: inline-block;
  margin: 0 0 1.2rem;
  padding: 0.2em 0.9em;
  border: 1px solid var(--wine);
  color: var(--wine);
  font-variant-caps: all-small-caps;
  letter-spacing: 0.12em;
  font-weight: 600;
}

.prose {
  max-width: var(--measure);
  margin: 0 auto;
  hanging-punctuation: first;
  font-variant-ligatures: common-ligatures;
}
.prose--centered {
  text-align: center;
}
.prose > :first-child {
  margin-top: 0;
}
.prose > :last-child {
  margin-bottom: 0;
}
.prose p {
  margin: 0 0 0.85em;
  text-wrap: pretty;
}

/* The opening: a drop capital, and the first line in small capitals. */
.prose > p.opening::first-line {
  font-variant-caps: small-caps;
  letter-spacing: 0.05em;
}
.prose > p.opening em {
  font-variant-caps: normal;
  letter-spacing: 0;
}
.prose > p.opening::first-letter {
  float: left;
  margin: 0.06em 0.07em 0 0;
  color: var(--oxblood);
  font-family: var(--display);
  font-size: 3.5em;
  font-weight: 600;
  font-style: normal;
  line-height: 0.82;
  letter-spacing: 0;
}
/* Where the browser can set a true initial letter, let it do the arithmetic. */
@supports (initial-letter: 2) or (-webkit-initial-letter: 2) {
  .prose > p.opening::first-letter {
    float: none;
    margin: 0 0.09em 0 0;
    font-size: inherit;
    line-height: inherit;
    -webkit-initial-letter: 2;
    initial-letter: 2;
  }
}
@media (min-width: 40em) {
  @supports (initial-letter: 3) or (-webkit-initial-letter: 3) {
    .prose > p.opening::first-letter {
      -webkit-initial-letter: 3;
      initial-letter: 3;
    }
  }
}

.prose h2 {
  margin: 1.9em 0 0.5em;
  font-family: var(--display);
  font-size: 1.62em;
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.005em;
  text-wrap: balance;
}
.prose h3,
.prose h4,
.prose h5,
.prose h6 {
  margin: 1.8em 0 0.4em;
  font-size: 1.12em;
  font-style: italic;
  font-weight: 500;
  line-height: 1.3;
}
.prose h2 + *,
.prose h3 + * {
  margin-top: 0;
}

.prose strong {
  font-weight: 700;
}
code {
  padding: 0.1em 0.35em;
  border-radius: 3px;
  background: var(--paper-deep);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 0.72em;
  font-style: normal;
  font-variant-numeric: lining-nums;
  overflow-wrap: anywhere;
}
.prose pre {
  margin: 1.5em 0;
  padding: 1em;
  background: var(--paper-deep);
  line-height: 1.5;
  overflow-x: auto;
}
.prose pre code {
  padding: 0;
  background: none;
}

/* Verse, addresses, signatures: each line the writer made is kept, and a
   long line that has to wrap is tucked in, as in a printed book of poems. */
.prose p.lines {
  margin: 1.15em 0;
}
.prose .line {
  display: block;
  padding-left: 1.5em;
  text-indent: -1.5em;
}
.prose p.lines br {
  display: none;
}

.prose blockquote {
  margin: 1.5em 0;
  padding: 0.1em 0 0.1em 1.15em;
  border-left: 2px solid var(--gold);
  font-style: italic;
}
.prose blockquote em {
  font-style: normal;
}
.prose blockquote > :last-child {
  margin-bottom: 0;
}

.prose ul,
.prose ol {
  margin: 0 0 1em;
  padding-left: 1.35em;
}
.prose li {
  margin: 0.3em 0;
  padding-left: 0.2em;
}
.prose li::marker {
  color: var(--gold);
  font-weight: 600;
}

/* A break in the essay ( --- ) becomes three small lozenges. */
.prose hr {
  height: auto;
  margin: 2em 0;
  border: 0;
  color: var(--gold);
  font-family: "EB Garamond", serif;
  font-size: 0.6em;
  line-height: 1;
  text-align: center;
  overflow: visible;
}
.prose hr::before {
  content: "\25C6\2003\25C6\2003\25C6";
}

/* The author's name at the foot of an essay, like the signature on a letter. */
.signature {
  max-width: calc(var(--measure) / 1.5); /* the text column, measured at this larger size */
  margin: 2.2rem auto 0;
  color: var(--oxblood);
  font-family: var(--display);
  font-size: 1.5em;
  font-style: italic;
  font-weight: 500;
  line-height: 1.2;
  text-align: left;
}
.signature__by {
  color: var(--ink-soft);
}
.signature + .finis {
  margin-top: 1.6rem;
}

.finis {
  margin-top: 2.4rem;
  font-size: 1.6em;
}

/* ---- Photographs --------------------------------------------------------- */

/* Each picture sits on a pale mount, like a print in a family album. */
.photo {
  width: -webkit-fit-content;
  width: fit-content;
  max-width: 100%;
  margin: 1.9em auto;
  padding: 0.5rem;
  background: var(--mount);
  border: 1px solid var(--rule);
  box-shadow: 0 1px 2px rgba(70, 40, 20, 0.08), 0 10px 28px rgba(70, 40, 20, 0.1);
}
.photo img {
  width: auto;
  max-height: 44rem;
  max-height: min(44rem, 88vh);
  margin: 0 auto;
  background: var(--paper-deep);
}
.photo figcaption {
  /* takes the picture's width rather than stretching the mount */
  width: 0;
  min-width: 100%;
  padding: 0.65rem 0.4rem 0.2rem;
  color: var(--ink-soft);
  font-size: 0.86em;
  font-style: italic;
  line-height: 1.4;
  text-align: center;
  text-wrap: balance;
}
.photo figcaption em {
  font-style: normal;
}
.photo--cover {
  max-width: 34em;
  margin: 0 auto 2.4rem;
}
.prose p img {
  display: inline-block;
  vertical-align: middle;
}
.photo-note {
  display: block;
  padding: 0.8em 1em;
  border: 1px dashed var(--gold);
  color: var(--ink-soft);
  font-size: 0.9em;
  font-style: italic;
  text-align: center;
}

.portrait {
  width: 15em;
  max-width: 62%;
  margin: 0 auto 2.2rem;
}
/* An arched frame with a gilt edge. */
.portrait__arch {
  padding: 0.4rem;
  border: 1px solid var(--gold);
  border-radius: 999px 999px 4px 4px;
  background: var(--mount);
  box-shadow: 0 1px 2px rgba(70, 40, 20, 0.08), 0 12px 30px rgba(70, 40, 20, 0.12);
}
.portrait__arch img {
  width: 100%;
  height: 19em;
  object-fit: cover;
  border-radius: 999px 999px 2px 2px;
  background: var(--paper-deep);
}
.portrait figcaption {
  margin-top: 0.8rem;
  color: var(--ink-soft);
  font-size: 0.86em;
  font-style: italic;
  line-height: 1.4;
  text-align: center;
}

.prose iframe,
.prose video {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 1.9em 0;
  border: 0;
}
.prose iframe {
  height: 21em;
}

.table-scroll {
  margin: 1.6em 0;
  overflow-x: auto;
}
.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92em;
  font-variant-numeric: lining-nums tabular-nums;
}
.prose th,
.prose td {
  padding: 0.5em 0.7em;
  border-bottom: 1px solid var(--rule);
  text-align: left;
  vertical-align: top;
}
.prose th {
  border-bottom: 2px solid var(--gold);
  font-weight: 600;
}

/* ---- Onward: earlier and later essays ------------------------------------ */

.onward {
  max-width: 31em;
  margin: 3.2rem auto 0;
  padding-top: 1.8rem;
  border-top: 1px solid var(--rule);
}
.onward__pair {
  display: flex;
  justify-content: space-between;
}
.onward__link {
  display: block;
  flex: 1 1 0;
  max-width: 47%;
  padding: 0.3rem 0;
  color: var(--ink);
  text-decoration: none;
}
.onward__link--newer {
  margin-left: auto;
  text-align: right;
}
.onward__label {
  display: block;
  margin-bottom: 0.2rem;
  color: var(--wine);
  font-variant-caps: all-small-caps;
  letter-spacing: 0.12em;
  font-weight: 600;
  font-size: 0.96em;
}
.onward__title {
  display: block;
  text-wrap: balance;
  font-family: var(--display);
  font-size: 1.3em;
  font-weight: 600;
  line-height: 1.15;
}
.onward__link:hover .onward__title {
  color: var(--wine);
  text-decoration: underline;
  text-decoration-thickness: 0.05em;
  text-underline-offset: 0.16em;
}
.onward__all {
  margin: 1.8rem 0 0;
  text-align: center;
  font-variant-caps: all-small-caps;
  letter-spacing: 0.16em;
  font-weight: 600;
}
.onward__pair:empty + .onward__all,
.onward > .onward__all:first-child {
  margin-top: 0;
}
.onward__all a {
  display: inline-block;
  max-width: 100%;
  padding: 0.55em 1.5em 0.6em;
  border: 1px solid var(--wine);
  border-radius: 2px;
  text-decoration: none;
}
.onward__all a:hover {
  background: var(--oxblood);
  border-color: var(--oxblood);
  color: var(--paper);
}

/* ---- Colophon ------------------------------------------------------------ */

.colophon {
  margin-top: 3.4rem;
  padding: 2.4rem var(--gutter) 2.8rem;
  border-top: 1px solid var(--rule);
  background: var(--paper-deep);
  text-align: center;
}
.colophon p {
  margin: 0;
}
.colophon__ornament {
  color: var(--gold);
  font-family: "EB Garamond", serif;
  font-size: 1.35em;
  line-height: 1;
}
.colophon__title {
  margin-top: 0.9rem !important;
  font-family: var(--display);
  font-size: 1.5em;
  font-style: italic;
  font-weight: 500;
  line-height: 1.2;
}
.colophon__legal {
  margin-top: 0.2rem !important;
  color: var(--ink-soft);
  font-size: 0.86em;
}
.colophon__links {
  margin-top: 1rem !important;
  font-variant-caps: all-small-caps;
  letter-spacing: 0.13em;
  font-weight: 500;
}
.colophon__links a {
  display: inline-block;
  margin: 0 0.55em;
  padding: 0.35em 0.2em;
}
.colophon__top {
  margin-top: 0.2rem !important;
  font-variant-caps: all-small-caps;
  letter-spacing: 0.13em;
  font-weight: 500;
}
.colophon__top a {
  display: inline-block;
  padding: 0.35em 0.2em;
}

/* ---- Narrow screens ------------------------------------------------------ */

@media (max-width: 34em) {
  .cover {
    padding: 0.45rem;
  }
  .strip__nav a {
    padding-left: 0.9rem;
    padding-right: 0.9rem;
  }
  .page {
    padding-top: 2rem;
  }
  .eyebrow--ruled {
    letter-spacing: 0.14em;
  }
  .eyebrow--ruled span {
    padding: 0 0.7em;
  }
  /* A small square picture beside the title, the opening lines beneath. If
     the reader has enlarged the text so far that the title no longer fits
     beside the picture, it drops underneath instead of running off the edge. */
  .entry {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    grid-column-gap: 0;
    column-gap: 0;
  }
  .entry__thumb {
    flex: none;
    width: 5em;
    height: 5em;
    margin: 0 0.9em 0.4rem 0;
    padding: 0.2rem;
  }
  .initial {
    font-size: 2.5em;
  }
  .entry__head {
    flex: 1 1 6.2em;
    min-width: 0;
    margin-bottom: 0.4rem;
  }
  .entry__date {
    font-size: 0.9em;
    letter-spacing: 0.08em;
  }
  .entry__title {
    margin-bottom: 0;
    font-size: 1.32em;
  }
  .entry__excerpt {
    flex: 1 1 100%;
    margin-top: 0.4rem;
  }
  .feature__picture img {
    height: 11.5em;
  }
  .onward__pair {
    display: block;
  }
  .onward__link {
    max-width: none;
    padding: 0.6rem 0;
  }
  .onward__link--newer {
    text-align: left;
  }
  .photo {
    padding: 0.35rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}

/* ---- On paper ------------------------------------------------------------ */

@media print {
  @page {
    margin: 2cm;
  }
  html {
    font-size: 11pt !important;
  }
  body {
    background: #fff;
    color: #000;
    font-size: 1rem;
    font-weight: 400;
  }
  .skip,
  .strip,
  .onward,
  .colophon__links,
  .colophon__top,
  .feature__more,
  .cover__frame::after {
    display: none !important;
  }
  .cover {
    padding: 0 0 0.6cm;
    background: none;
    color: #000;
    border-bottom: 1px solid #999;
  }
  .cover__frame,
  .cover__frame::before {
    border: 0;
    padding: 0;
  }
  .wordmark__script,
  .wordmark__caps {
    background: none;
    -webkit-text-fill-color: currentColor;
    color: #000;
  }
  .cover__tagline,
  .crown {
    display: none;
  }
  .page {
    padding: 0.8cm 0 0;
  }
  .colophon {
    margin-top: 1cm;
    padding: 0.4cm 0 0;
    background: none;
  }
  a {
    color: inherit;
    text-decoration: none;
  }
  .photo,
  .feature__picture,
  .portrait__arch {
    box-shadow: none;
    break-inside: avoid;
  }
  .prose p {
    orphans: 3;
    widows: 3;
  }
  h1,
  h2,
  h3 {
    break-after: avoid;
  }
}