/* The Morning Dispatch: newsprint look.
   Every size inside a page is in cqw (1cqw = 1% of page width), so a page looks
   identical at any screen size and the layout fitting is the same everywhere. */
:root {
  --paper: #efe6cf;
  --paper-edge: #e4d8b9;
  --ink: #1d1a16;
  --ink-soft: #5c5244;
  --rule: #2a2620;
  --desk: #3b3631;
}
* { box-sizing: border-box; }
/* The desk around the paper (top bar, buttons, reading glass) is styled in desk.css. */

/* Off-screen press where pages are laid out and fitted before binding. */
#press { position: absolute; left: -20000px; top: 0; width: 600px; }
#press .page { width: var(--pw, 600px); height: calc(var(--pw, 600px) * 1.4); margin-bottom: 20px; }
#press.fitting .body { padding-bottom: 2.4cqw; }
/* No page-turn library (offline): show pages stacked. */
#press.stacked { position: static; left: auto; width: min(600px, 100%); }
#press.stacked .page { width: 100%; height: auto; aspect-ratio: 600 / 840; }

/* ---------- The page ---------- */
.page {
  position: relative; container-type: size; overflow: hidden; color: var(--ink);
  background-color: var(--paper);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .3 0 0 0 0 .2 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  font-family: "Libre Caslon Text", Georgia, serif;
}
.sheet { position: absolute; inset: 0; padding: 2.4cqw 2.8cqw 2cqw; display: flex; flex-direction: column; }

/* Front page head */
.skybox { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2cqw; margin-bottom: 0.9cqw; }
.skybox div { border: 0.17cqw solid var(--ink); padding: 0.5cqw 0.8cqw; font-family: "Old Standard TT", serif;
  font-size: 1.45cqw; line-height: 1.2; display: flex; justify-content: space-between; gap: 0.8cqw; align-items: center; }
.skybox b { font-weight: 700; }
.skybox span { white-space: nowrap; font-style: italic; }
.top { display: grid; grid-template-columns: 13cqw minmax(0, 1fr) 13cqw; align-items: center; gap: 1.2cqw; }
.ear { border: 0.17cqw solid var(--ink); padding: 0.6cqw 0.8cqw; font-size: 1.35cqw; text-align: center;
  line-height: 1.25; font-family: "Old Standard TT", serif; }
.ear b { display: block; font-size: 1.45cqw; letter-spacing: 0.15cqw; margin-bottom: 0.2cqw; }
.mast { font-family: "UnifrakturMaguntia", serif; font-size: 6.9cqw; text-align: center; line-height: 1;
  white-space: nowrap; letter-spacing: -0.05cqw; }
.dateline { display: flex; justify-content: space-between; border-top: 0.17cqw solid var(--ink);
  border-bottom: 0.6cqw double var(--ink); margin-top: 0.9cqw; padding: 0.35cqw 0 0.45cqw;
  font-family: "Old Standard TT", serif; font-size: 1.4cqw; letter-spacing: 0.15cqw; text-transform: uppercase; }

/* Inside page head */
.folio { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 0.6cqw double var(--ink);
  padding-bottom: 0.4cqw; font-family: "Old Standard TT", serif; font-size: 1.45cqw; letter-spacing: 0.15cqw;
  text-transform: uppercase; }
.folio .sec { font-family: "UnifrakturMaguntia", serif; font-size: 4.6cqw; text-transform: none; letter-spacing: 0; line-height: 1.05; }
.folio span:first-child, .folio span:last-child { flex: 1; white-space: nowrap; }
.folio .sec.long { font-size: 3.7cqw; }
.box.index .row { flex-wrap: nowrap; align-items: flex-end; }
.box.index .row span:first-child { flex: 1 1 auto; min-width: 0; }
.folio span:last-child { text-align: right; }

.banner { font-family: "Old Standard TT", serif; font-weight: 700; font-style: italic; text-transform: uppercase;
  text-align: center; line-height: 1.02; letter-spacing: -0.05cqw; margin: 0.9cqw 0 0.6cqw; font-size: 4.3cqw;
  border-bottom: 0.17cqw solid var(--ink); padding-bottom: 0.8cqw; text-wrap: balance; }

/* The column grid */
.grid { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-rows: minmax(0, 1.12fr) minmax(0, 1fr); margin-top: 0.6cqw; }
.grid.with-jumps { grid-template-rows: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.95fr); }
.cell { position: relative; min-height: 0; display: flex; flex-direction: column; padding: 0 1cqw 0.4cqw;
  border-left: 0.17cqw solid var(--rule); }
.cell.edge-l { border-left: none; padding-left: 0; }
.cell.edge-r { padding-right: 0; }
.cell.row-top { border-top: 0.17cqw solid var(--rule); padding-top: 0.8cqw; }
.cell.row-first { padding-top: 0.2cqw; }

.story { flex: 1; min-height: 0; display: flex; flex-direction: column; cursor: zoom-in; }
.story h2 { font-family: "Old Standard TT", serif; font-weight: 700; text-transform: uppercase; text-align: center;
  margin: 0 0 0.4cqw; line-height: 1.04; font-size: 2.15cqw; text-wrap: balance; }
.story.big h2 { font-size: 2.7cqw; }
.deck { font-family: "Old Standard TT", serif; text-align: center; font-size: 1.5cqw; line-height: 1.2; margin: 0;
  padding: 0.35cqw 0.4cqw; text-wrap: balance; }
.deck + .deck { border-top: 0.17cqw solid var(--ink); font-style: italic; }
.decks { margin-bottom: 0.4cqw; }
.decks::after { content: ""; display: block; width: 32%; margin: 0.4cqw auto 0; border-top: 0.17cqw solid var(--ink); }
.pull { margin: 0.4cqw 0 0.7cqw; padding: 0.7cqw 0.6cqw; border-top: 0.5cqw double var(--ink); border-bottom: 0.5cqw double var(--ink);
  font-family: "Old Standard TT", serif; font-style: italic; font-size: 1.95cqw; line-height: 1.2; text-align: center; }
.body { flex: 1; min-height: 0; overflow: hidden; column-fill: auto; column-gap: 1.6cqw;
  column-rule: 0.17cqw solid var(--rule); font-size: 1.58cqw; line-height: 1.33; text-align: justify; hyphens: auto; }
.body p { margin: 0 0 0.35cqw; text-indent: 1.3cqw; orphans: 2; widows: 2; }
.body p:first-child { text-indent: 0; }
.body { overflow-wrap: break-word; }
.body .dl { font-weight: 700; font-variant: small-caps; font-size: 0.92em; }
.body .byline { text-indent: 0; text-align: center; font-variant: small-caps; font-size: 1.45cqw; margin-bottom: 0.6cqw; }
.jumpline { flex: none; white-space: nowrap; font-size: 1.35cqw; font-style: italic; text-align: right; padding-top: 0.25cqw; }
.end { flex: none; text-align: center; font-size: 1.3cqw; letter-spacing: 0.4cqw; color: var(--ink-soft); padding-top: 0.2cqw; }

.jumphead { font-family: "Old Standard TT", serif; font-weight: 700; text-transform: uppercase; text-align: center;
  font-size: 1.75cqw; line-height: 1.1; margin: 0 0 0.2cqw; }
.jumpfrom { text-align: center; font-style: italic; font-size: 1.35cqw; margin: 0 0 0.5cqw; }

/* Boxes: index, scoreboard, markets, weather... */
.box { flex: none; border: 0.17cqw solid var(--ink); padding: 0.6cqw 0.7cqw; margin-bottom: 0.9cqw;
  font-family: "Old Standard TT", serif; font-size: 1.42cqw; line-height: 1.3; }
.box h3 { margin: 0 0 0.4cqw; padding-bottom: 0.3cqw; border-bottom: 0.17cqw solid var(--ink); text-align: center;
  font-size: 1.5cqw; letter-spacing: 0.25cqw; text-transform: uppercase; font-weight: 700; }
.box { font-size: 1.32cqw; line-height: 1.25; }
.box .row { display: flex; flex-wrap: wrap; justify-content: space-between; column-gap: 0.8cqw; padding: 0.15cqw 0;
  border-bottom: 0.1cqw dotted var(--ink-soft); overflow-wrap: anywhere; }
.box .row:last-child { border-bottom: none; }
.box .row span:last-child { text-align: right; margin-left: auto; }
.box p { margin: 0; }

/* Editor's Page */
.ed-col h2 { font-size: 3.2cqw; }
.ed-col .body { font-size: 1.7cqw; line-height: 1.38; }
.body p.split { text-align-last: justify; }
.body .byline + p { text-indent: 0; }
.ed-col .body .byline + p::first-letter { float: left; font-family: "Old Standard TT", serif; font-weight: 700;
  font-size: 5.6cqw; line-height: 0.85; padding: 0.3cqw 0.6cqw 0 0; }
.ed-sub { font-family: "Old Standard TT", serif; font-weight: 700; text-align: center; text-transform: uppercase;
  font-size: 1.9cqw; letter-spacing: 0.2cqw; margin: 0 0 0.6cqw; padding-bottom: 0.4cqw; border-bottom: 0.17cqw solid var(--ink); }
.history p { margin: 0 0 0.7cqw; font-size: 1.58cqw; line-height: 1.33; }
.history b { font-family: "Old Standard TT", serif; }
.quote { font-family: "Old Standard TT", serif; font-style: italic; font-size: 2.5cqw; line-height: 1.25; text-align: center; margin: 0.6cqw 0; }
.quote-who { text-align: center; font-variant: small-caps; font-size: 1.5cqw; margin-bottom: 1.2cqw; }
.staffbox { border-top: 0.6cqw double var(--ink); padding-top: 0.8cqw; text-align: center; font-size: 1.4cqw; line-height: 1.4; }
.staffbox .mast-s { font-family: "UnifrakturMaguntia", serif; font-size: 3cqw; line-height: 1.1; }

.foot { flex: none; display: flex; justify-content: space-between; border-top: 0.17cqw solid var(--ink); margin-top: 0.5cqw;
  padding-top: 0.35cqw; font-size: 1.2cqw; font-family: "Old Standard TT", serif; letter-spacing: 0.1cqw; color: var(--ink-soft); }


/* Photographs: black and white on newsprint, with a halftone dot screen like 1980s press photos. */
.photo { flex: none; margin: 0.3cqw 0 0.7cqw; }
.photo .ph { position: relative; overflow: hidden; background: var(--paper); border: 0.17cqw solid var(--ink); aspect-ratio: 4 / 3; }
.photo.headshot { width: 72%; margin-left: auto; margin-right: auto; }
.photo.headshot .ph { aspect-ratio: 4 / 5; }
.photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%;
  filter: grayscale(1) contrast(1.28) brightness(1.04); mix-blend-mode: multiply; }
.photo .ph::after { content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: multiply;
  background-image: radial-gradient(circle, rgba(29, 26, 22, 0.32) 0.13cqw, transparent 0.17cqw); background-size: 0.42cqw 0.42cqw; }
.photo figcaption { margin-top: 0.3cqw; font-size: 1.32cqw; line-height: 1.25; font-style: italic; text-align: left; }
.photo .credit { display: block; margin-top: 0.15cqw; font-style: normal; font-size: 1cqw; letter-spacing: 0.06cqw;
  text-transform: uppercase; color: var(--ink-soft); text-align: right; }
.photo.headshot figcaption { text-align: center; }
.photo.headshot .credit { text-align: center; }
/* A headshot is one column wide, even when its story spans two. */
.photo.headshot.in-wide { width: 40%; }

/* Tagline under the masthead, set between two short rules. */
.mast-block { text-align: center; min-width: 0; }
.tagline { display: inline-flex; align-items: center; gap: 1.2cqw; margin-top: 0.5cqw; font-family: "Old Standard TT", serif;
  font-style: italic; font-size: 1.7cqw; letter-spacing: 0.12cqw; }
.tagline::before, .tagline::after { content: ""; width: 6cqw; border-top: 0.17cqw solid var(--ink); }

/* Reader rating at the end of the back page */
.rate { flex: none; display: flex; align-items: center; justify-content: center; gap: 1.4cqw; margin-top: 0.8cqw;
  padding: 0.7cqw 1cqw; border-top: 0.45cqw double var(--ink); border-bottom: 0.17cqw solid var(--ink); font-family: "Old Standard TT", serif; }
.rate-q { font-weight: 700; font-size: 1.55cqw; text-transform: uppercase; letter-spacing: 0.12cqw; }
.stars { display: inline-flex; gap: 0.3cqw; }
.star { background: none; border: 0; padding: 0 0.15cqw; cursor: pointer; font-size: 2.6cqw; line-height: 1; color: transparent;
  -webkit-text-stroke: 0.12cqw var(--ink); font-family: Georgia, serif; }
.star.on, .stars:hover .star { color: var(--ink); -webkit-text-stroke: 0; }
.stars:hover .star:hover ~ .star { color: transparent; -webkit-text-stroke: 0.12cqw var(--ink); }
.star:focus-visible { outline: 0.15cqw solid var(--ink); outline-offset: 0.2cqw; }
.rate-msg { font-style: italic; font-size: 1.35cqw; min-width: 26cqw; }
.rate.done .rate-msg { font-style: normal; font-weight: 700; letter-spacing: 0.08cqw; border: 0.17cqw solid var(--ink); padding: 0.2cqw 0.8cqw; transform: rotate(-2deg); }