@font-face {
  font-family: "Crimson Pro";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/crimson-pro-400.woff2") format("woff2");
}
@font-face {
  font-family: "Crimson Pro";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/crimson-pro-400-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Crimson Pro";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/crimson-pro-600.woff2") format("woff2");
}
@font-face {
  font-family: "Crimson Pro";
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/crimson-pro-600-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/inter-400.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/inter-500.woff2") format("woff2");
}

html { color-scheme: light dark; --font-size-base: 19px; }
[data-fontsize="small"]  { --font-size-base: 17px; }
[data-fontsize="medium"] { --font-size-base: 19px; }
[data-fontsize="large"]  { --font-size-base: 22px; }
@media (max-width: 720px) {
  html                   { --font-size-base: 17px; }
  [data-fontsize="small"]  { --font-size-base: 15px; }
  [data-fontsize="large"]  { --font-size-base: 20px; }
}
body {
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  line-height: 1.65;
  color: var(--color-ink);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
@media (max-width: 720px) {
  body { line-height: 1.6; }
}
.episode-body p { margin: 0 0 0.9em; }
.episode-body em { font-style: italic; }

/* Aeolus — full broadsheet treatment lives in aeolus.css */

/* Ithaca — catechistic Q&A. Same font, same size as the body; only ink
   color and spacing distinguish a question. Extra top margin pairs each
   question visually with the answer(s) that follow. The first Q doesn't
   get the leading margin. */
.episode-body .ithaca-question {
  color: var(--color-ink-soft);
  margin: 1.8em 0 0.5em;
}
.episode-body .ithaca-question:first-child {
  margin-top: 0;
}
.episode-body .ithaca-answer {
  margin: 0 0 0.4em;
}
.episode-body .ithaca-answer + .ithaca-answer {
  margin-top: 0.6em;
}

/* Penelope — Molly's unbroken interior monologue. The PG source preserves
   typesetting line breaks; we keep them as preformatted lines but allow
   wrapping for narrow viewports. The eight "sentences" lack punctuation in
   Joyce's original; we let the white space speak for itself. */
.episode-body .penelope-monologue {
  white-space: pre-wrap;
  font-style: normal;
  text-indent: 0;
  hyphens: auto;
}
.episode-header { margin-bottom: 2.5rem; }
.episode-part {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
  margin: 0 0 0.4rem;
}
.episode-title {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 2.4rem;
  line-height: 1.1;
  margin: 0;
  letter-spacing: 0.005em;
}
.landing h1 {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 3rem;
  margin: 0 0 0.4rem;
}
.landing .byline {
  font-family: var(--font-ui);
  color: var(--color-ink-soft);
  margin: 0 0 2rem;
}
.landing .note {
  font-family: var(--font-ui);
  font-size: 0.85rem;
  color: var(--color-ink-soft);
  border-top: 1px solid var(--color-rule);
  padding-top: 1rem;
  margin-top: 3rem;
}
.episode-index {
  display: grid;
  gap: 0.4rem;
  margin: 0 0 2rem;
}
.episode-index a {
  display: grid;
  grid-template-columns: 2.5rem 1fr auto;
  gap: 0.8rem;
  align-items: baseline;
  text-decoration: none;
  padding: 0.5rem 0.6rem;
  border-radius: 0.25rem;
}
.episode-index a:hover { background: var(--color-shade); }
.episode-index .ep-num {
  font-family: var(--font-ui);
  font-variant-numeric: tabular-nums;
  font-size: 0.85rem;
  color: var(--color-ink-soft);
  text-align: right;
}
.episode-index .ep-title {
  font-family: var(--font-body);
  font-style: italic;
}
.episode-index .ep-part {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
}

/* ── Part-opening versal ─────────────────────────────────────────────────
   The first letter of the first episode of each of the novel's three parts
   (Telemachus "S", Calypso "M", Eumaeus "P") is set as a large drop initial,
   echoing the near-full-page initials of the 1922 first edition. Injected by
   the episodeBody filter in .eleventy.js. Float makes the body text flow to
   the right of and beneath the letter, and (being out of flow) keeps the
   surrounding annotation underline off it. */
.episode-body .versal {
  float: left;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: clamp(9rem, 56vh, 28rem);
  line-height: 0.62;
  margin: 0.35rem 0.5rem 0 0;
  color: var(--color-ink);
  text-decoration: none;
  cursor: default;
}
/* The versal sits inside the opening annotation span; neutralise the anno
   hover affordances on the giant letter itself. */
.episode-body .anno .versal { background: none; }

@media (max-width: 640px) {
  .episode-body .versal {
    font-size: clamp(5rem, 30vh, 9rem);
    line-height: 0.7;
  }
}