/* The wide opening plate gives way to a single, quiet reading column. */
.read-hero {
  display: grid; align-items: center; gap: clamp(2rem, 4vw, 4rem);
  padding-block: clamp(2rem, 5vw, 5rem) clamp(2rem, 4vw, 4rem);
  border-bottom: 1px solid var(--rule);
}
.read-hero-copy { min-width: 0; max-width: 60rem; }
.read-hero.read-with-art { grid-template-columns: minmax(0, .93fr) minmax(0, 1.07fr); }
.read-brow, .read-meta, .read-index h2, .rail-nav h2, .rail-archive-tag, .rail-search label,
.rail-search [role="status"], .read-related li > span {
  font-family: var(--sans); font-size: .85rem; line-height: 1.5;
}
.read-brow {
  margin: 0 0 1.25rem; font-weight: 650; letter-spacing: .09em;
  text-transform: uppercase; color: var(--blue);
}
.read-brow > span { margin: 0 .5em; color: var(--muted); }
.read-brow a, .read-index a, .read-related li a, .rail-nav a { color: inherit; text-decoration: none; }
.read-brow a:hover, .read-index a:hover, .read-related li a:hover, .rail-nav a:hover {
  color: var(--blue); text-decoration: underline; text-underline-offset: .18em;
}
.read-hero h1, .rail-head h1 {
  font: 500 clamp(3.1rem, 5.3vw, 5.8rem)/.98 var(--display);
  color: var(--ink); letter-spacing: -.045em; text-wrap: balance;
  margin: 0; overflow-wrap: break-word;
}
.read-lead, .rail-deck {
  max-width: 45rem; font: 400 clamp(1.2rem, 1.8vw, 1.55rem)/1.42 var(--serif);
  color: var(--ink); margin: 1.25em 0 0;
}
.read-lead a, .read-prose a, .rail-archive a {
  color: var(--blue); text-decoration: underline; text-decoration-thickness: .07em;
  text-underline-offset: .15em;
}
.read-meta { display: flex; flex-wrap: wrap; gap: .35rem 1.1rem; color: var(--muted); margin-top: 1.5rem; }
.read-meta:empty { display: none; }
.read-plate { margin: 0; align-self: center; }
.read-plate figcaption { margin-top: .45rem; font: .75rem/1.4 var(--sans); color: var(--muted); }
.read-plate img { display: block; width: 100%; height: auto; max-height: 32rem; object-fit: contain; }
.read-layout { padding-block: clamp(2rem, 5vw, 5rem); min-width: 0; }
.read-layout.has-index {
  display: grid; grid-template-columns: minmax(10rem, 15rem) minmax(0, 45rem);
  column-gap: clamp(2rem, 6vw, 7rem); align-items: start;
}
.read-layout:not(.has-index) > .read-prose { margin-inline: auto; }
.read-index { border-top: 2px solid var(--ink); padding-top: 1rem; }
.read-index h2, .rail-nav h2 {
  margin: 0 0 .7rem; text-transform: uppercase; letter-spacing: .1em; color: var(--blue);
  font-weight: 650;
}
.read-index ol { counter-reset: read-stops; padding: 0; margin: 0; list-style: none; }
.read-index li {
  border-bottom: 1px solid var(--rule);
  counter-increment: read-stops; font: 400 1.04rem/1.3 var(--serif);
}
.read-index a { display: flex; gap: .8rem; padding-block: .75rem; align-items: baseline; }
.read-index a::before {
  content: counter(read-stops, decimal-leading-zero); color: var(--muted);
  font: 400 .78rem/1 var(--mono);
}
.read-prose {
  max-width: 44rem; min-width: 0; font: 400 clamp(1.1rem, 1.4vw, 1.24rem)/1.64 var(--serif);
  color: var(--ink); overflow-wrap: break-word;
}
.read-prose p { margin: 0 0 1em; }
.read-prose p:empty, .read-prose div:empty { display: none; }
.read-prose :is(h2,h3) {
  font-family: var(--display); font-weight: 500; letter-spacing: -.028em;
  line-height: 1.12; text-wrap: balance; scroll-margin-top: 1rem;
}
.read-prose h2 { font-size: clamp(2rem, 3.2vw, 3.2rem); margin: 1.5em 0 .5em; }
.read-prose h3 { font-size: clamp(1.6rem, 2.6vw, 2.45rem); margin: 1.3em 0 .5em; }
.read-prose > :first-child, .read-prose div > h2:first-child { margin-top: 0; }
.read-prose img {
  display: block; max-width: 100%; height: auto; margin-block: 1.05em;
}
.read-prose figure { margin: 1em 0; }
.city-map { display: block; width: 100%; height: min(70vh, 650px); min-height: 360px; border: 1px solid var(--rule); background: #eae6df; }
.archive-index li { padding-block: .55em; border-bottom: 1px solid var(--rule); }
.read-prose blockquote {
  margin: 1.4em 0; border-left: 3px solid var(--brass); padding-left: 1em;
  font-style: italic;
}
.read-prose :is(ol,ul) { padding-left: 1.4em; }
.read-prose table { display: block; max-width: 100%; overflow-x: auto; font: 400 .92em/1.45 var(--sans); }
.read-prose td, .read-prose th { padding: .4em; border-bottom: 1px solid var(--rule); }
.read-related { border-top: 2px solid var(--ink); padding-block: 1.6rem 3rem; }
.read-related h2, .rail-main > h2 { font: 500 clamp(2rem, 3vw, 3rem)/1.1 var(--display); margin: 0 0 .65em; }
.read-related ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1.8rem; }
.read-related li { padding-top: .7rem; border-top: 1px solid var(--rule); }
.read-related li > span { display: block; color: var(--blue); margin-bottom: .35rem; }
.read-related li a { display: block; font: 500 clamp(1.35rem, 2.3vw, 2rem)/1.13 var(--display); }

/* The archive finder and line index stay readable without JavaScript. */
.rail-head {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(15rem, .36fr);
  align-items: end; column-gap: 3rem; padding-block: clamp(2rem, 4vw, 4rem);
  border-bottom: 2px solid var(--ink);
}
.rail-archive { padding: .3rem 0 .2rem 1.2rem; border-left: 3px solid var(--brass); font: 400 1rem/1.5 var(--sans); }
.rail-archive-tag { color: var(--blue); text-transform: uppercase; letter-spacing: .07em; font-weight: 700; }
.rail-archive p { margin: .45rem 0 .6rem; }
.rail-archive a { font-weight: 600; }
.rail-layout { display: grid; grid-template-columns: minmax(10rem, 15rem) minmax(0, 50rem); gap: clamp(2rem, 6vw, 6rem); padding-block: 2.2rem 4rem; }
.rail-nav { align-self: start; min-width: 0; }
.rail-nav a { display: flex; gap: .65rem; align-items: center; padding: .5rem 0; width: fit-content; font: 500 1rem/1.35 var(--sans); }
.rail-badge {
  flex-shrink: 0; display: inline-grid; place-items: center; width: 1.65em; height: 1.65em;
  color: #fff; background: var(--blue); border-radius: 50%; font: 600 .9rem/1 var(--sans);
}
.rail-badge-1 { background: #a52e35; } .rail-badge-2 { background: #27578a; }
.rail-badge-3 { background: #326c4b; } .rail-badge-4 { background: #925215; }
.rail-badge-5 { background: #684982; }
.rail-main { min-width: 0; }
.rail-search { color: var(--ink); font-family: var(--sans); max-width: 35rem; }
.rail-search label { display: block; font-weight: 600; margin-bottom: .4rem; }
.rail-search > div { position: relative; }
.rail-search input {
  box-sizing: border-box; width: 100%; padding: .8rem 1rem .8rem 2.8rem;
  color: var(--ink); background: var(--paper); border: 1px solid var(--ink); border-radius: 0;
  font: 400 1rem/1.4 var(--sans);
}
.rail-search svg { pointer-events: none; position: absolute; top: 50%; transform: translateY(-50%); left: .85rem; width: 1.2rem; fill: none; stroke: var(--ink); stroke-width: 1.6; }
.rail-search [role="status"] { margin: .55rem 0 1rem; color: var(--muted); }
.rail-line { scroll-margin-top: 1rem; margin-top: 1.85rem; }
.rail-page [hidden] { display: none !important; }
.rail-line h3 { display: flex; align-items: center; gap: .65rem; margin: 0; padding: .75rem 0; border-top: 2px solid var(--ink); font: 500 1.65rem/1.15 var(--display); }
.rail-line table { table-layout: fixed; width: 100%; border-collapse: collapse; font: 400 1rem/1.42 var(--sans); }
.rail-line th, .rail-line td { text-align: start; vertical-align: top; border-bottom: 1px solid var(--rule); padding: .6em .45em; overflow-wrap: anywhere; }
.rail-line th:first-child { width: 54%; padding-left: 0; }
.rail-line thead th { color: var(--muted); font-size: .87rem; font-weight: 500; }
.rail-line tbody th { font-weight: 500; }
.rail-line td { font-variant-numeric: tabular-nums; }
.rail-note { font-style: italic; }
.rail-original { margin-top: 2.2rem; padding: .9rem 0; border-top: 1px solid var(--rule); }
.rail-original summary { cursor: pointer; padding-block: .25rem; font: 550 1rem/1.5 var(--sans); color: var(--blue); }
.rail-original .read-prose { margin-top: 1.1rem; }
:is(.read-feature, .read-related, .rail-page) :focus-visible {
  outline: 2px solid var(--blue); outline-offset: .2rem;
}

@media (max-width: 54em) {
  .read-hero.read-with-art { grid-template-columns: minmax(0,1fr); }
  .read-plate { width: 100%; }
  .read-layout.has-index, .rail-layout { grid-template-columns: minmax(0,1fr); }
  .read-index { margin-bottom: 2rem; }
  .read-index ol { columns: 2; column-gap: 1.8rem; }
  .read-index li { break-inside: avoid; }
  .rail-nav { display: flex; flex-wrap: wrap; gap: .1rem 1rem; }
  .rail-nav h2 { width: 100%; margin-bottom: .1rem; }
  .rail-head { grid-template-columns: minmax(0,1fr); gap: 1.75rem; }
  .rail-archive { max-width: 38rem; }
}
@media (max-width: 36em) {
  .read-hero h1, .rail-head h1 { font-size: clamp(2.45rem, 10.5vw, 3.6rem); }
  .read-index ol { columns: auto; }
  .read-related ul { grid-template-columns: minmax(0,1fr); gap: .85rem; }
  .rail-line table { font-size: .94rem; }
  .rail-line th:first-child { width: 46%; }
}