/* Dismas Tarot — Frieda Harris geometric, brutalist confidence */

:root {
  --bone: #ece2cc;
  --bone-warm: #e3d7bb;
  --ink: #14110c;
  --ink-dim: #443a2b;
  --ink-soft: #847a68;
  --hair: #14110c;
  --hair-soft: #b6a78a;

  --wands: #b13325;
  --cups: #1f3a78;
  --swords: #a07d10;
  --disks: #4f6a2a;
  --major: #4a2a5a;
  --accent: #b13325;

  --accent-tint: var(--accent-tint);
  --accent-tint-soft: var(--accent-tint-soft);
  --hover-tint: var(--hover-tint);
  --grid-tint: rgba(20, 17, 12, 0.025);

  --display: "Cinzel", "Trajan Pro", "Optima", Georgia, serif;
  --serif: "Cormorant Garamond", "Iowan Old Style", "Hoefler Text", Georgia, serif;
  --mono: "Space Mono", "JetBrains Mono", "SF Mono", Menlo, monospace;
}

:root[data-theme="dark"] {
  --bone: #14110b;
  --bone-warm: #1d1a13;
  --ink: #ece2cc;
  --ink-dim: #b6a78a;
  --ink-soft: #7a705e;
  --hair: #ece2cc;
  --hair-soft: #463d2f;

  --wands: #d6533f;
  --cups: #5a82d6;
  --swords: #d6a52c;
  --disks: #8aae5a;
  --major: #9466b4;
  --accent: #d6533f;

  --accent-tint: rgba(214, 83, 63, 0.16);
  --accent-tint-soft: rgba(214, 83, 63, 0.07);
  --hover-tint: rgba(236, 226, 204, 0.05);
  --grid-tint: rgba(236, 226, 204, 0.025);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bone);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.5;
  height: 100%;
  font-feature-settings: "kern", "liga", "onum";
}

body {
  min-height: 100vh;
  background:
    repeating-linear-gradient(0deg, transparent 0 79px, var(--grid-tint) 79px 80px),
    repeating-linear-gradient(90deg, transparent 0 79px, var(--grid-tint) 79px 80px),
    var(--bone);
}

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

/* ---- Topbar ---- */

.topbar {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  grid-template-areas: "title sub toggle search";
  align-items: baseline;
  gap: 1.4rem;
  padding: 1.4rem 2rem 1.1rem;
  border-bottom: 2px solid var(--hair);
  background: var(--bone);
  position: relative;
}

.topbar::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -7px;
  height: 1px;
  background: var(--hair);
}

.topbar h1 {
  grid-area: title;
  margin: 0;
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.15rem;
  color: var(--ink);
  display: flex;
  align-items: baseline;
  gap: 0.45em;
  flex-wrap: wrap;
  line-height: 1.15;
}

.topbar h1 .dismas-mark {
  display: block;
  height: 1.7em;
  width: auto;
  margin: -0.1em 0.25em -0.1em 0;
  align-self: center;
  flex-shrink: 0;
}

.topbar h1 .hcaps {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.topbar h1 .hital {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.08em;
  color: var(--ink-dim);
  letter-spacing: 0.005em;
  text-transform: none;
}

.topbar .subtitle {
  grid-area: sub;
  margin: 0;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.topbar .subtitle em {
  font-style: italic;
  font-family: var(--serif);
  font-size: 1.05rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-dim);
  margin-left: 0.5em;
}

#search {
  grid-area: search;
  background: transparent;
  color: var(--ink);
  border: none;
  border-bottom: 1.5px solid var(--hair);
  border-radius: 0;
  padding: 0.4rem 0.2rem;
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  width: 220px;
  outline: none;
}
#search::placeholder { color: var(--ink-soft); text-transform: lowercase; letter-spacing: 0.1em; }
#search:focus { border-bottom-color: var(--accent); border-bottom-width: 2px; }

.theme-toggle {
  grid-area: toggle;
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--hair);
  padding: 0.4rem 0.85rem;
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 700;
  cursor: pointer;
  border-radius: 0;
  transition: background 0.12s, color 0.12s;
}

.theme-toggle:hover {
  background: var(--ink);
  color: var(--bone);
}

.theme-toggle::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  background: var(--ink);
  margin-right: 0.55em;
  vertical-align: 0.04em;
}

:root[data-theme="dark"] .theme-toggle::before {
  background: transparent;
  border: 1.5px solid var(--ink);
  width: 7px;
  height: 7px;
}

@media (max-width: 820px) {
  .topbar { grid-template-areas: "title title toggle search" "sub sub sub sub"; }
}

/* ---- Layout ---- */

.layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  height: calc(100vh - 70px);
}

/* ---- Sidebar ---- */

.sidebar {
  border-right: 2px solid var(--hair);
  overflow-y: auto;
  padding: 1.4rem 0 6rem;
}

.section-head {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 700;
  padding: 1.6rem 1.6rem 0.6rem;
  border-top: 1px solid var(--hair);
  margin-top: 0.6rem;
}

.section-head:first-child {
  border-top: none;
  margin-top: 0;
  padding-top: 0.4rem;
}

/* Each suit group gets a thick colored left bar */
.suit-group {
  padding: 0.5rem 0 0.7rem;
  border-left: 4px solid var(--ink-soft);
  margin: 0.2rem 0 0.2rem 1.2rem;
  padding-left: 0;
}

.suit-group[data-suit="Wands"]  { border-left-color: var(--wands); }
.suit-group[data-suit="Cups"]   { border-left-color: var(--cups); }
.suit-group[data-suit="Swords"] { border-left-color: var(--swords); }
.suit-group[data-suit="Disks"]  { border-left-color: var(--disks); }

.suit-head {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 1.15rem;
  letter-spacing: 0.02em;
  color: var(--ink);
  padding: 0.3rem 1rem 0.3rem 0.7rem;
}

.suit-group[data-suit="Wands"]  .suit-head { color: var(--wands); }
.suit-group[data-suit="Cups"]   .suit-head { color: var(--cups); }
.suit-group[data-suit="Swords"] .suit-head { color: var(--swords); }
.suit-group[data-suit="Disks"]  .suit-head { color: var(--disks); }

.card-link {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.32rem 1.2rem 0.32rem 0.7rem;
  cursor: pointer;
  color: var(--ink-dim);
  text-decoration: none;
  font-family: var(--serif);
  font-size: 1.05rem;
  position: relative;
  transition: color 0.1s, background 0.1s;
}

/* Major Arcana cards (no parent suit-group) need their own margin */
.sidebar > .card-link {
  margin-left: 1.2rem;
  border-left: 4px solid transparent;
  padding-left: 0.7rem;
}

.card-link:hover { color: var(--ink); background: var(--accent-tint-soft); }

.card-link.active {
  color: var(--ink);
  font-style: italic;
  background: var(--accent-tint);
}

.sidebar > .card-link.active { border-left-color: var(--accent); }

.suit-group .card-link.active {
  box-shadow: inset 3px 0 0 var(--accent);
}

.card-link .roman {
  display: inline-block;
  width: 2.6em;
  font-family: var(--display);
  font-weight: 500;
  font-feature-settings: "lnum";
  font-size: 0.82em;
  color: var(--ink-soft);
  letter-spacing: 0.02em;
}

.card-link.active .roman { color: var(--accent); font-weight: 700; }

.card-link .keyword {
  color: var(--ink-soft);
  font-style: italic;
  font-size: 0.88em;
  margin-left: 0.3em;
}

.empty-search {
  padding: 1rem 1.6rem;
  color: var(--ink-soft);
  font-style: italic;
}

/* ---- Reading area ---- */

.reading {
  overflow-y: auto;
  padding: 4rem max(2rem, 6vw) 8rem;
}

.reading-inner {
  max-width: 720px;
  margin: 0 auto;
}

/* Card title — Cinzel inscriptional caps */
.reading h2 {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(2.6rem, 5.6vw, 4.4rem);
  line-height: 1.05;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  margin: 0 0 0.4rem;
  color: var(--ink);
}

.reading h2 .keyword-tag {
  display: inline-block;
  margin-left: 0.6rem;
  padding: 0.18em 0.7em 0.12em;
  font-family: var(--mono);
  font-size: 0.26em;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bone);
  background: var(--accent);
  vertical-align: middle;
  font-weight: 700;
}

.reading .meta {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 700;
  margin: 1rem 0 2.4rem;
  padding-bottom: 0.7rem;
  border-bottom: 2px solid var(--hair);
  position: relative;
}

.reading .meta::after {
  content: "";
  position: absolute;
  left: 0; bottom: -7px;
  width: 80px;
  height: 2px;
  background: var(--accent);
}

/* ---- Divinatory: bold framed quote, prominent ---- */

.divinatory {
  position: relative;
  padding: 1.7rem 2rem 1.4rem;
  margin: 1.2rem 0 3rem;
  background: var(--accent-tint-soft);
  border: 2px solid var(--accent);
}

/* Corner ticks: small black squares at each corner */
.divinatory::before,
.divinatory::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  background: var(--accent);
}
.divinatory::before { top: -5px; left: -5px; }
.divinatory::after  { top: -5px; right: -5px; }

/* Bottom corners via background-image trick on the box itself */
.divinatory {
  background-image:
    linear-gradient(var(--accent), var(--accent)),
    linear-gradient(var(--accent), var(--accent));
  background-position: -5px calc(100% + 5px), calc(100% + 5px) calc(100% + 5px);
  background-size: 10px 10px, 10px 10px;
  background-repeat: no-repeat;
}

.divinatory-label {
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
  margin: 0 0 1rem;
}

.divinatory p {
  margin: 0 0 0.7rem;
  font-size: 1.12rem;
  line-height: 1.5;
  text-align: left;
  color: var(--ink);
}

.divinatory p:last-child { margin-bottom: 0; }

.divinatory-source {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 1rem;
  font-weight: 700;
}

/* ---- Tabs (joined to passage) ---- */

.tabs {
  display: flex;
  gap: 0;
  margin: 0;
  border-bottom: 2px solid var(--hair);
}

.tab {
  background: transparent;
  border: 2px solid transparent;
  border-bottom: none;
  color: var(--ink-soft);
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  padding: 0.7rem 1.6rem 0.65rem;
  cursor: pointer;
  margin-bottom: -2px;
  border-radius: 0;
  transition: color 0.12s, border-color 0.12s, background 0.12s;
  font-weight: 700;
}

.tab:hover:not(.active):not(.disabled) {
  color: var(--ink);
  background: var(--hover-tint);
}

.tab.active {
  color: var(--ink);
  background: var(--bone);
  border-color: var(--hair);
}

.tab.disabled {
  color: var(--ink-soft);
  opacity: 0.45;
  cursor: not-allowed;
}

/* ---- Passage block ---- */

.passage {
  margin: 0;
  padding: 2rem 2.2rem 0.8rem;
  border: 2px solid var(--hair);
  border-top: none;
  background: transparent;
}

.passage-label {
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 700;
  margin: 0 0 1.6rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--hair-soft);
}

.passage-label em {
  font-style: italic;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-dim);
  margin-left: 0.4em;
}

.passage-body p {
  margin: 0 0 1.05rem;
  text-align: justify;
  hyphens: auto;
  font-size: 1.05rem;
  line-height: 1.55;
}

.passage-body p.missing {
  color: var(--ink-soft);
  font-style: italic;
  text-align: left;
}

/* Drop cap — Cinzel inscriptional initial */
.intro + .passage-body > p:first-of-type::first-letter,
.passage-label + .passage-body > p:first-of-type::first-letter {
  font-family: var(--display);
  font-size: 3.4em;
  float: left;
  line-height: 0.9;
  padding: 0.08em 0.14em 0 0;
  color: var(--accent);
  font-weight: 700;
  text-transform: uppercase;
}

/* Reset ::first-letter when an explicit drop-cap span is used */
.intro + .passage-body > p.has-drop-cap:first-of-type::first-letter,
.passage-label + .passage-body > p.has-drop-cap:first-of-type::first-letter {
  font-family: inherit;
  font-size: inherit;
  float: none;
  line-height: inherit;
  padding: 0;
  color: inherit;
  font-weight: inherit;
  text-transform: none;
}

.drop-cap {
  font-family: var(--display);
  font-size: 3.4em;
  float: left;
  line-height: 0.9;
  padding: 0.08em 0.14em 0 0;
  color: var(--accent);
  font-weight: 700;
}

/* ---- Duquette correspondences block ---- */

.correspondences {
  margin: 0 0 1.6rem;
  padding: 1rem 1.4rem;
  border-left: 3px solid var(--accent);
  background: var(--accent-tint-soft);
}

.correspondences p {
  margin: 0 0 0.45rem;
  text-align: left;
  hyphens: none;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--ink-dim);
}

.correspondences p:last-child { margin-bottom: 0; }

/* Drop cap after correspondences block */
.correspondences + .passage-body > p:first-of-type::first-letter {
  font-family: var(--display);
  font-size: 3.4em;
  float: left;
  line-height: 0.9;
  padding: 0.08em 0.14em 0 0;
  color: var(--accent);
  font-weight: 700;
  text-transform: uppercase;
}

/* Prevent drop cap on quotes after correspondences */
.correspondences + .passage-body > .letter-quote:first-child p::first-letter {
  font-family: inherit;
  font-size: inherit;
  float: none;
  line-height: inherit;
  padding: 0;
  color: inherit;
  font-weight: inherit;
  text-transform: none;
}

/* ---- Letter quotes in Duquette commentary ---- */

.letter-quote {
  margin: 1.4rem 0;
  padding: 1rem 1.4rem;
  border-left: 3px solid var(--ink-soft);
  background: var(--hover-tint);
  font-style: italic;
}

.letter-quote p {
  margin: 0 0 0.5rem;
  text-align: left;
  hyphens: none;
}

.letter-quote cite {
  display: block;
  font-size: 0.85em;
  color: var(--ink-soft);
  font-style: normal;
}

/* Prevent drop cap on quotes */
.intro + .passage-body > .letter-quote:first-child p::first-letter,
.passage-label + .passage-body > .letter-quote:first-child p::first-letter {
  font-family: inherit;
  font-size: inherit;
  float: none;
  line-height: inherit;
  padding: 0;
  color: inherit;
  font-weight: inherit;
  text-transform: none;
}

/* ---- Intro (rank intros within a passage) ---- */

.intro {
  border-left: 3px solid var(--accent);
  padding: 0.4rem 0 0.4rem 1.2rem;
  margin: 0 0 1.6rem;
  font-size: 0.98rem;
  color: var(--ink-dim);
}

.intro p {
  margin: 0 0 0.7rem;
  text-align: left;
  font-style: italic;
}

.intro p:last-child { margin-bottom: 0; }

.intro-label {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 0.5rem;
  font-style: normal;
}

/* ---- Frontispiece (home / no card selected) ---- */

.frontispiece {
  max-width: 520px;
  margin: 3rem auto 0;
  text-align: center;
  color: var(--ink);
  padding: 0 1rem;
}

.frontispiece-img {
  display: block;
  margin: 0 auto 1.6rem;
  height: clamp(220px, 38vh, 360px);
  width: auto;
}

.frontispiece-rule {
  height: 1px;
  background: var(--hair);
  margin: 0.8rem auto;
  width: 70%;
  position: relative;
}

.frontispiece-rule::before,
.frontispiece-rule::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 6px;
  height: 6px;
  background: var(--accent);
  transform: translateY(-50%) rotate(45deg);
}

.frontispiece-rule::before { left: -3px; }
.frontispiece-rule::after { right: -3px; }

.frontispiece-title {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.6rem, 4.2vw, 2.4rem);
  line-height: 1.2;
  margin: 1.2rem 0 0.6rem;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15em;
}

.frontispiece-title .hcaps {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.frontispiece-title .hital {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 0.7em;
  color: var(--ink-dim);
  letter-spacing: 0;
  text-transform: none;
}

.frontispiece-tagline {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0.4rem 0;
}

.frontispiece-prompt {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1rem;
  color: var(--ink-dim);
  margin: 1rem 0 0;
}

/* ---- Back-to-cards button (mobile only, in reading mode) ---- */

.back-to-cards {
  display: none;
  align-items: center;
  gap: 0.4em;
  background: transparent;
  border: 1.5px solid var(--hair);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 0.45rem 0.85rem;
  cursor: pointer;
  margin: 0 0 1.4rem;
}

.back-to-cards:hover { background: var(--ink); color: var(--bone); }
.back-to-cards .back-arrow { font-family: var(--serif); font-size: 1.2em; line-height: 0; }

/* ---- Responsive ---- */

@media (max-width: 820px) {
  /* Master-detail mode switching */
  body[data-mode="reading"] .sidebar { display: none; }
  body[data-mode="reading"] .back-to-cards { display: inline-flex; }

  /* Browse mode shows BOTH the frontispiece (in .reading) and the card list (sidebar) */
  body[data-mode="browse"] .reading {
    padding: 1.4rem 1rem 1.6rem;
    border-bottom: 2px solid var(--hair);
  }

  body[data-mode="browse"] .sidebar {
    max-height: none;
    height: auto;
    border-bottom: none;
    overflow-y: visible;
    padding-top: 0.8rem;
    padding-bottom: 3rem;
  }

  /* Mobile-tuned frontispiece */
  .frontispiece { margin-top: 0.5rem; }
  .frontispiece-img { height: clamp(140px, 26vh, 220px); margin-bottom: 1rem; }
  .frontispiece-title { gap: 0.1em; }
  .frontispiece-rule { width: 80%; margin: 0.6rem auto; }
  .frontispiece-tagline { font-size: 0.6rem; letter-spacing: 0.18em; }
  .frontispiece-prompt { font-size: 0.92rem; margin-top: 0.7rem; }

  /* Topbar: title + toggle on row 1, subtitle row 2, search row 3 */
  .topbar {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "title toggle"
      "sub sub"
      "search search";
    gap: 0.55rem 0.7rem;
    padding: 0.9rem 1rem 0.85rem;
  }
  .topbar::after { display: none; }
  .topbar h1 { font-size: 1.2rem; gap: 0.55rem; letter-spacing: 0.06em; }
  .topbar h1::before { width: 11px; height: 11px; }
  .topbar .subtitle { font-size: 0.6rem; letter-spacing: 0.18em; line-height: 1.3; }
  .topbar .subtitle em { font-size: 0.95rem; margin-left: 0.4em; }
  #search { width: 100%; padding: 0.45rem 0.2rem; font-size: 0.8rem; }
  .theme-toggle { padding: 0.35rem 0.7rem; font-size: 0.58rem; letter-spacing: 0.18em; }
  .theme-toggle::before { width: 7px; height: 7px; margin-right: 0.45em; }

  /* Layout: stack */
  .layout { grid-template-columns: 1fr; height: auto; }
  .sidebar {
    border-right: none;
    border-bottom: 2px solid var(--hair);
    max-height: 42vh;
    padding: 0.8rem 0 2rem;
  }
  .section-head { padding: 1rem 1rem 0.4rem; font-size: 0.58rem; }
  .suit-group { margin: 0.2rem 0 0.2rem 0.9rem; padding: 0.35rem 0 0.5rem; }
  .suit-head { font-size: 1.05rem; padding: 0.25rem 0.6rem 0.25rem 0.6rem; }
  .sidebar > .card-link { margin-left: 0.9rem; padding-left: 0.6rem; }
  .card-link { font-size: 0.98rem; padding: 0.28rem 1rem 0.28rem 0.6rem; }
  .card-link .roman { width: 2.4em; font-size: 0.78em; }

  /* Reading area: tighter padding, smaller type */
  .reading { padding: 1.8rem 1.1rem 4rem; }
  .reading-inner { max-width: 100%; }
  .reading h2 {
    font-size: clamp(1.8rem, 8vw, 2.4rem);
    letter-spacing: 0.005em;
    line-height: 1.08;
  }
  .reading h2 .keyword-tag {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0.2em 0.55em 0.14em;
    font-size: 0.32em;
  }
  .reading .meta { font-size: 0.62rem; letter-spacing: 0.2em; margin: 0.7rem 0 1.6rem; }

  /* Divinatory: smaller padding, smaller corner squares */
  .divinatory { padding: 1.1rem 1.1rem 0.95rem; margin: 0.8rem 0 2rem; border-width: 1.5px; }
  .divinatory::before, .divinatory::after { width: 8px; height: 8px; top: -4px; }
  .divinatory::before { left: -4px; }
  .divinatory::after { right: -4px; }
  .divinatory {
    background-position: -4px calc(100% + 4px), calc(100% + 4px) calc(100% + 4px);
    background-size: 8px 8px, 8px 8px;
  }
  .divinatory-label { font-size: 0.6rem; letter-spacing: 0.22em; margin-bottom: 0.7rem; }
  .divinatory p { font-size: 1rem; line-height: 1.5; margin-bottom: 0.55rem; }

  /* Tabs */
  .tabs { padding-left: 0; }
  .tab {
    padding: 0.55rem 0.9rem 0.5rem;
    font-size: 0.6rem;
    letter-spacing: 0.18em;
    flex: 1 1 auto;
    text-align: center;
  }

  /* Passage */
  .passage { padding: 1.2rem 1.1rem 0.4rem; border-width: 1.5px; }
  .passage-label { font-size: 0.6rem; letter-spacing: 0.18em; margin-bottom: 1.1rem; padding-bottom: 0.5rem; }
  .passage-label em { font-size: 0.9rem; }
  .passage-body p { font-size: 1rem; line-height: 1.55; margin-bottom: 0.85rem; }
  .passage-body > p:first-of-type::first-letter {
    font-size: 2.6em;
    padding: 0.08em 0.1em 0 0;
  }
  .drop-cap {
    font-size: 2.6em;
    padding: 0.08em 0.1em 0 0;
  }

  /* Intro */
  .intro { padding: 0.35rem 0 0.35rem 0.85rem; margin-bottom: 1.2rem; font-size: 0.94rem; }
  .intro-label { font-size: 0.58rem; letter-spacing: 0.22em; margin-bottom: 0.35rem; }

  /* Correspondences */
  .correspondences { padding: 0.8rem 1rem; margin-bottom: 1.2rem; }
  .correspondences p { font-size: 0.88rem; }
  .correspondences + .passage-body > p:first-of-type::first-letter {
    font-size: 2.6em;
    padding: 0.08em 0.1em 0 0;
  }

  /* Letter quotes */
  .letter-quote { padding: 0.8rem 1rem; margin: 1rem 0; }
}

@media (max-width: 380px) {
  .topbar h1 { font-size: 1.05rem; }
  .reading h2 { font-size: 1.7rem; }
  .reading { padding: 1.4rem 0.9rem 3rem; }
  .divinatory, .passage { padding-left: 0.9rem; padding-right: 0.9rem; }
  .tab { padding: 0.5rem 0.6rem 0.45rem; font-size: 0.56rem; letter-spacing: 0.14em; }
  .passage-body > p:first-of-type::first-letter { font-size: 2.2em; }
  .drop-cap { font-size: 2.2em; }
  .correspondences + .passage-body > p:first-of-type::first-letter { font-size: 2.2em; }
}