.reading-page {
  width: min(100% - 5rem, 1040px);
  margin: 0 auto;
  padding: 1.5rem 0 2rem;
  --reading-muted: color-mix(in srgb, var(--text-color) 58%, transparent);
  --reading-rule: color-mix(in srgb, var(--text-color) 24%, transparent);
}

.reading-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  min-height: 3rem;
  font-size: .8rem;
}

.reading-header .writing-logo { width: 200px; }
.reading-film { margin: 2.5rem 0 1.8rem; }
.reading-film-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .6rem 2rem;
  align-items: end;
}

.reading-eyebrow {
  grid-column: 1 / -1;
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .15em;
  color: var(--reading-muted);
  margin: 0 0 .6rem;
}

.reading-film h1 {
  font-size: 3.5rem;
  font-weight: 800;
  line-height: .98;
  letter-spacing: -.055em;
  margin: 0;
}

.reading-director {
  grid-column: 1;
  color: var(--reading-muted);
  font-size: .85rem;
  line-height: 1.7;
  margin: 0;
}

.reading-film-count {
  grid-column: 2;
  grid-row: 2 / 4;
  font-size: .72rem;
  margin: 0;
}

.reading-entry {
  display: grid;
  grid-template-columns: 95px minmax(0, 1fr);
  gap: 1.5rem;
  border-top: 1px solid var(--reading-rule);
  padding: 1.65rem 0 2rem;
}

.reading-entry:first-child { border-color: var(--text-color); }
.reading-entry-flow { display: flow-root; min-width: 0; }
.reading-byline { font-size: .78rem; padding-top: .2rem; margin-bottom: 1.4rem; }
.reading-byline span { color: var(--reading-muted); font-size: .65rem; }
.reading-byline p { margin: .35rem 0 0; }
.reading-poster { float: left; display: block; width: 210px; height: auto; margin: 0 1.5rem 1rem 0; }
.reading-body { font-size: 1.06rem; line-height: 1.85; color: var(--text-color); }
.reading-body h2 { font-size: 1.8rem; margin-bottom: 1.25rem; }
/* Paragraph margins supply blank-line spacing without doubling the renderer's BRs. */
.reading-body > br { display: none; }
.reading-body > :last-child { margin-bottom: 0; }
.reading-open { display: block; clear: both; width: fit-content; margin-top: 1.25rem; font-size: .72rem; text-decoration: underline; text-underline-offset: .25em; }

.reading-footer {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  border-top: 1px solid var(--reading-rule);
  padding-top: 1rem;
  font-size: .65rem;
  color: var(--reading-muted);
}

.reading-page--single { max-width: 900px; }
.reading-page--single .reading-film { margin-top: 3.5rem; }
.reading-page--single .reading-film h1 { font-size: 4.5rem; }
.reading-page--single .reading-entry { display: block; padding-top: 1.8rem; }
.reading-page--single .reading-byline { display: flex; align-items: baseline; gap: .6rem; }
.reading-page--single .reading-byline p { margin: 0; }
.reading-page--single .reading-body { font-size: 1.12rem; }
.reading-page--single .reading-poster { width: 190px; }
.reading-page a:focus-visible { outline: 2px solid var(--text-color); outline-offset: 5px; }

@media (max-width: 800px) {
  .reading-page { width: calc(100% - 2rem); }
  .reading-header .writing-logo { width: 140px; }
  .reading-film h1, .reading-page--single .reading-film h1 { font-size: 3rem; }
  .reading-film-heading { display: block; }
  .reading-director, .reading-film-count { margin-top: 1rem; }
  .reading-entry { display: block; }
  .reading-byline { display: flex; gap: .6rem; align-items: baseline; }
  .reading-byline p { margin: 0; }
  .reading-poster, .reading-page--single .reading-poster { width: 110px; }
  .reading-body, .reading-page--single .reading-body { font-size: 1rem; }
  .reading-body h2 { font-size: 1.5rem; }
  .reading-footer span { display: none; }
}

@media (max-width: 480px) {
  .reading-poster, .reading-page--single .reading-poster { float: right; width: 90px; margin: 0 0 1rem 1rem; }
}