.journal, .story { min-width: 0; margin: 0 auto 4rem; }
.journal h1, .story h1 {
  margin: 0;
  font-size: clamp(2.15rem, 1.45rem + 2.45vw, 3.65rem);
  line-height: 1.07;
  letter-spacing: -.045em;
  text-wrap: balance;
}
.journal h2, .story h2 { line-height: 1.2; letter-spacing: -.025em; text-wrap: balance; }
.journal-head, .journal-dictionary { display: grid; gap: .6rem 2rem; align-items: center; }
.journal-head { padding-block: .8rem 1.6rem; border-bottom: 2px solid var(--ink); }
.journal-head > p, .journal-dictionary p { max-width: var(--reading-measure, 62ch); margin: 0; font-size: var(--lead); color: var(--secondary); }
.journal p:not(.page-updated) { text-align: start; }
.journal-stories { display: grid; gap: 2rem; padding: 2rem 0; }
.journal-entry { min-width: 0; }
.reading-photo { display: block; width: 100%; height: auto; border-radius: var(--panel-radius); background: var(--blue-soft); }
.journal-copy { padding-block: 1rem .25rem; }
.journal-subject { margin: 0 0 .5rem; color: var(--blue); font-weight: 650; font-size: .84rem; }
.journal-entry h2 { margin: 0; font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem); }
.journal-entry h2 a { color: var(--ink); text-decoration-thickness: .06em; text-decoration-color: var(--blue-mid); }
.journal-entry h2 a:hover { color: var(--blue); text-decoration-color: currentColor; }
.journal-copy > p:last-child { max-width: 55ch; margin-block: .65rem 0; color: var(--secondary); }
.journal-dictionary { padding-block: 1.5rem; border-block: 1px solid var(--rule); }
.journal-dictionary h2 { margin: 0; }

.story { display: grid; grid-template-columns: minmax(0,1fr); gap: clamp(1.5rem, 3vw, 3rem); align-items: center; }
.story > header { padding-block-start: .5rem; }
.story > header p:not(.page-updated):not(.story-byline) {
  max-width: var(--reading-measure, 62ch);
  font-size: var(--lead);
  line-height: 1.65;
  color: var(--secondary);
  text-align: start;
}
.story-byline { margin-bottom: 0; color: var(--quiet); font-size: .9rem; }
.story-byline + .page-updated { margin-top: .25rem; }
.story-feature { min-width: 0; margin: 0; }
.story-layout {
  grid-column: 1/-1;
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.75rem);
  width: 100%;
  margin-inline: auto;
  align-items: start;
  justify-content: center;
  grid-template-columns: minmax(0, var(--reading-measure, 62ch));
  font-size: clamp(1rem, .95rem + .3vw, 1.105rem);
}
.story-outline { min-width: 0; border-block: 1px solid var(--rule); padding-block: .65rem; }
.story-outline p { margin: 0 0 .35rem; font-size: .92rem; color: var(--ink); font-weight: 700; }
.story-outline ul { display: grid; gap: .15rem 1rem; margin: 0; padding: 0; list-style: none; }
.story-outline li { margin: 0; }
.story-outline li a { display: block; padding: .28rem 0; font-size: .94rem; line-height: 1.45; text-decoration-color: var(--blue-mid); }
.story-outline a:hover { text-decoration-color: currentColor; }
.story-body { min-width: 0; container-type: inline-size; }
.story-body > section { min-width: 0; border-top: 1px solid var(--rule); padding-top: clamp(1.15rem, 2.5vw, 1.75rem); }
.story-body > section + section { margin-block-start: clamp(1.85rem, 4vw, 3rem); }
.story-body h2 { margin: 0 0 .75em; font-size: clamp(1.36rem, 1.15rem + .85vw, 1.8rem); }
.story-body h3 { margin-bottom: .45rem; line-height: 1.35; }
.story-body :is(p,li) { color: var(--secondary); line-height: 1.68; text-align: start; }
.story-body p { margin: 0 0 1em; }
.story-body section > :last-child { margin-bottom: 0; }
.story-body strong { color: var(--ink); }
.story-body :is(section, h2)[id] { scroll-margin-block-start: 1.25rem; }
/* Use the actual paragraph width. Short nested timeline notes, links, and
   labels retain a natural edge even when the viewport itself is wide. */
@container (min-width: 32rem) {
  .story-body section > p { text-align: justify; }
}

.story table { width: 100%; border-collapse: collapse; margin: 1.25rem 0; font-size: .95rem; font-variant-numeric: tabular-nums; }
.story th, .story td { padding: .7rem; text-align: start; border-bottom: 1px solid var(--rule); overflow-wrap: anywhere; }
.story thead th { background: var(--blue-soft); color: var(--blue); }
.story td, .story tbody th { background: var(--surface); }
.story-car .story-table :is(th,td):not(:first-child) { text-align: end; }
.story-quotes { margin: 1.15rem 0; border-top: 2px solid var(--blue-mid); }
.story-quotes > div { padding: .75rem 0; border-bottom: 1px solid var(--rule); }
.story-quotes dt { color: var(--blue); font-size: .89rem; font-weight: 700; }
.story-quotes dd { margin: .2rem 0 0; }
.story .renewal-checklist { padding: clamp(1rem, 3vw, 1.6rem); background: var(--blue-soft); border-radius: var(--panel-radius); border-top: 0; }
.renewal-checklist ul { margin: 0; padding-inline-start: 1.35em; }
.renewal-checklist li + li { margin-block-start: .65em; }

@media (min-width: 34rem) and (max-width: 61.99rem) {
  .story-outline ul { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (min-width: 760px) {
  .journal-head, .journal-dictionary { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
  .journal-stories { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 2.25rem 2.5rem; }
  .journal-entry:first-child { grid-column: 1/-1; display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; gap: 2.5rem; padding-bottom: 2rem; border-bottom: 1px solid var(--rule); }
  .journal-entry:first-child h2 { font-size: clamp(1.75rem,2.7vw,2.7rem); }
  .story { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (min-width: 62rem) {
  .story-layout { grid-template-columns: minmax(11rem, 14rem) minmax(0, var(--reading-measure, 62ch)); gap: clamp(2rem, 4.5vw, 4.5rem); }
  .story-outline { padding: .95rem 0 0; border-top: 2px solid var(--blue-mid); border-bottom: 0; }
  .story-outline li + li { border-top: 1px solid var(--rule); }
  .story-outline li a { padding-block: .62rem; }
}
@media screen and (min-width: 62rem) and (min-height: 40rem) {
  .story-outline { position: sticky; top: 1.5rem; }
}
@media (max-width: 480px) {
  .story th, .story td { padding: .48rem .3rem; }
  .story table { font-size: .85rem; }
}
@media print {
  .story, .story-layout, .journal-head, .journal-stories, .journal-dictionary, .journal-entry:first-child { display: block; }
  .story-outline, .story-feature, .journal-photo { display: none; }
  .story-body { container-type: normal; }
  .story-body > section { margin-top: 1.2rem; }
  .story-body section > p { text-align: start; }
}