/* ==========================================================================
   Editorial layer — the publisher's chrome.
   Same tokens, more air, stronger rules. All type stays at or above the
   brand floor (16px), and nothing in here moves without being asked.
   Loads after site.css so it wins the cascade at equal specificity.
   ========================================================================== */

/* ---------- One gutter, everywhere ----------
   Every page-width container counts its own padding, so the masthead, the
   header, each band and the footer share the same left and right edge at
   every width. Without this the hero column sits 24px inside the rest. */
.dm-shell, .dm-masthead-in, .dm-utility-in, .dm-header-in, .dm-quote-in,
.dm-band-in, .dm-footer-in, .dm-colophon-in, .dm-legal-in { box-sizing: border-box; }

/* ---------- Masthead: the imprint line above everything ---------- */
.dm-masthead { background: var(--ink); }
.dm-masthead-in {
  max-width: var(--page-width); margin: 0 auto;
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-4); flex-wrap: wrap;
  padding: var(--space-3) var(--space-5);
}
.dm-masthead p {
  margin: 0; font-family: var(--font-body); font-weight: 700;
  font-size: 1rem; line-height: 1.5rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--cream);
}
.dm-masthead .is-tag { color: var(--cover-cream); }

/* ---------- Utility bar, trimmed to one line ---------- */
.dm-utility { border-bottom: 1px solid var(--line); }
.dm-utility-in { padding: var(--space-2) var(--space-5); }

/* ---------- Header: a double rule, the editorial signature ---------- */
.dm-header { border-bottom: 0; box-shadow: 0 2px 0 var(--line), 0 5px 0 #e2d6bf4d; }
.dm-header-in { min-height: 68px; padding: var(--space-3) var(--space-5); gap: var(--space-4); }
.dm-brand { gap: var(--space-4); }
.dm-brand img.mark { width: 44px; height: 44px; }
/* Five sections plus the wordmark have to live on one line inside the same
   1120 the page uses everywhere. The tracking is the slack that gives. */
.dm-nav { gap: var(--space-4); }
.dm-nav a {
  font-size: 1rem; line-height: 1.5rem; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase;
  padding: var(--space-2) 2px; border-bottom: 2px solid transparent;
}
.dm-nav a:hover { border-bottom-color: var(--marigold-deep); }
.dm-nav a[aria-current="page"] { border-bottom-color: var(--porch-green-deep); }

/* ---------- Section openers: narrower measure, deeper air ---------- */
.dm-open { max-width: 30em; margin: 0 0 var(--space-8); }
.dm-open .display { letter-spacing: -0.015em; text-wrap: balance; }
.dm-open .dm-lede { max-width: 26em; }
.dm-eyebrow { display: flex; align-items: center; gap: var(--space-3); letter-spacing: 0.14em; }
.dm-eyebrow::before { content: ""; flex: none; width: 44px; height: 2px; background: var(--marigold); }
[data-theme="high-contrast"] .dm-eyebrow::before { background: var(--marigold-deep); }

/* ---------- Hero ---------- */
.dm-hero { gap: var(--space-8); padding-block: var(--space-9); align-items: start; }
.dm-hero h1 { letter-spacing: -0.025em; text-wrap: balance; }
.dm-hero .dm-lede { font-size: 1.5rem; line-height: 2.25rem; margin-bottom: var(--space-7); }
.dm-hero-actions { gap: var(--space-4); align-items: center; }
.dm-trust {
  display: grid; grid-template-columns: 1fr; gap: 0;
  margin-top: var(--space-8); border-top: 2px solid var(--line);
}
.dm-trust li {
  padding: var(--space-3) 0; border-bottom: 2px solid var(--line);
  font-size: 1.125rem; line-height: 1.75rem; color: var(--ink);
}
.dm-trust img { width: 24px; height: 24px; flex: none; }

/* The cover, presented like a book standing on a table */
.dm-cover { margin: 0; display: flex; flex-direction: column; gap: var(--space-4); align-items: center; }
.dm-cover img.dm-book { width: min(360px, 74vw); position: relative; }
.dm-cover-plate {
  margin: 0; text-align: center; font-family: var(--font-body); font-weight: 700;
  font-size: 1rem; line-height: 1.5rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-soft);
}
.dm-cover-plate span { display: block; margin-top: 4px; font-weight: 400; letter-spacing: 0.06em; }

/* ---------- First-page excerpt ---------- */
.dm-excerpt { gap: var(--space-8); }
.dm-excerpt .body-lg p { text-wrap: pretty; }
.dm-excerpt-art { padding: var(--space-7); border-width: 1px; box-shadow: var(--shadow-card); }

/* ---------- Promise columns ---------- */
.dm-cols { gap: 0; border-top: 2px solid var(--line-strong); }
.dm-col { padding: var(--space-5) var(--space-5) var(--space-5) 0; border-bottom: 2px solid var(--line); }
.dm-col + .dm-col { padding-left: var(--space-5); border-left: 2px solid var(--line); }
.dm-col h3 { font-size: 1.5rem; line-height: 2rem; }

/* ---------- Story index: ruled rows, not cards ---------- */
.dm-storylist { gap: 0 var(--space-8); align-items: stretch; }
.dm-story {
  border: 0; border-bottom: 2px solid var(--line); border-radius: 0;
  background: transparent; overflow: visible;
}
.dm-story > button { padding: var(--space-4) 0; gap: var(--space-5); align-items: baseline; }
.dm-story > button:hover { background: transparent; }
.dm-story .num { min-width: 76px; }
.dm-story .t { font-size: 1.5rem; line-height: 2rem; letter-spacing: -0.01em; }
.dm-story .peek { padding: var(--space-2) 0 var(--space-5); }
.dm-story .peek .art { background: transparent; border-radius: 0; padding: 0 var(--space-4) 0 0; }
@media (prefers-reduced-motion: no-preference) {
  .dm-story { transition: border-bottom-color 140ms ease; }
  .dm-story:hover { transform: none; box-shadow: none; border-bottom-color: var(--marigold-deep); }
}

/* ---------- Pull-quote band ---------- */
.dm-quote { background: var(--porch-green-deep); color: var(--cover-cream); }
.dm-quote-in {
  max-width: var(--page-width); margin: 0 auto;
  padding: var(--space-9) var(--space-5);
}
.dm-quote .dm-dots { display: inline-flex; margin-top: var(--space-6); }
.dm-quote blockquote {
  margin: 0; max-width: 22em;
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: 2.75rem; line-height: 3.5rem; letter-spacing: -0.015em;
  color: var(--cover-cream);
}
.dm-quote blockquote::before { content: "\201C"; }
.dm-quote blockquote::after { content: "\201D"; }
.dm-quote cite {
  display: block; margin-top: var(--space-5); font-style: normal;
  font-family: var(--font-body); font-weight: 700; font-size: 1rem; line-height: 1.5rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--sage-soft);
}
.dm-quote .dm-dots::before, .dm-quote .dm-dots::after { background: var(--cover-cream); }

/* ---------- By-the-numbers band ---------- */
.dm-numbers {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 2px solid var(--line-strong); border-bottom: 2px solid var(--line-strong);
}
.dm-number { padding: var(--space-6) 0 0; }
.dm-number + .dm-number { padding-left: var(--space-6); border-left: 2px solid var(--line); }
.dm-number .n {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: 3.5rem; line-height: 3.75rem; letter-spacing: -0.02em; color: var(--marigold-ink);
}
.dm-number .k {
  display: block; margin-top: var(--space-2); font-weight: 700; font-size: 1rem; line-height: 1.5rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink);
}
.dm-number .d { margin: var(--space-2) 0 0; font-size: 1.125rem; line-height: 1.75rem; color: var(--ink-soft); }
.dm-numbers-note {
  margin: var(--space-4) 0 0; font-size: 1rem; line-height: 1.5rem; color: var(--ink-soft); font-style: italic;
}

/* ---------- Press and booksellers ---------- */
.dm-press { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: start; }
.dm-presscard { border: 2px solid var(--line-strong); border-radius: var(--radius-md); background: var(--paper); overflow: hidden; }
.dm-presscard .row {
  display: flex; align-items: flex-start; gap: var(--space-4);
  padding: var(--space-4) var(--space-5); border-bottom: 2px solid var(--line);
}
.dm-presscard .row:last-child { border-bottom: 0; }
.dm-presscard .fmt {
  flex: none; font-weight: 700; font-size: 1rem; line-height: 1.5rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--marigold-deep); min-width: 88px; padding-top: 3px;
}
.dm-presscard .what { flex: 1; font-size: 1.125rem; line-height: 1.75rem; }
.dm-presscard .what a { font-weight: 700; }
.dm-presscard .what span { display: block; font-size: 1rem; line-height: 1.5rem; color: var(--ink-soft); }
.dm-honesty { list-style: none; margin: var(--space-5) 0 0; padding: 0; display: grid; gap: var(--space-2); }
.dm-honesty li {
  position: relative; padding-left: var(--space-5);
  font-size: 1.125rem; line-height: 1.75rem; color: var(--ink-soft);
}
.dm-honesty li::before {
  content: ""; position: absolute; left: 0; top: 12px; width: 12px; height: 2px; background: var(--berry);
}

/* ---------- Meet Dot: sticky portrait, scrolling page ---------- */
.dm-about { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: var(--space-8); align-items: start; }
.dm-about-figure { margin: 0; position: sticky; top: 108px; }
.dm-about-figure img {
  display: block; width: 100%; border-radius: var(--radius-md);
  border: 1px solid var(--line-strong); box-shadow: var(--shadow-card);
}
.dm-about-plate {
  margin: var(--space-3) 0 0; text-align: center; font-weight: 700; font-size: 1rem; line-height: 1.5rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft);
}
.dm-about-body h3 { margin: 0 0 var(--space-4); font-family: var(--font-display); font-size: 1.75rem; line-height: 2.25rem; }
.dm-about-body p { margin: 0 0 var(--space-4); font-size: 1.375rem; line-height: 2.1875rem; text-wrap: pretty; }
.dm-about-rule { height: 2px; background: var(--line); margin: var(--space-5) 0 var(--space-4); max-width: 220px; }

/* ---------- Deep-band newsletter ---------- */
.dm-band-deep { background: var(--porch-green-deep); color: var(--cover-cream); }
.dm-band-deep .dm-signup {
  background: transparent; box-shadow: none; padding: 0;
  max-width: 44em; margin: 0;
}
.dm-band-deep .dm-signup h3 { color: var(--cover-cream); }
.dm-band-deep .dm-lede, .dm-band-deep .body-lg { color: var(--sage-soft); }
.dm-band-deep .dm-field label { color: var(--cover-cream); }
.dm-band-deep .dm-help { color: var(--sage-soft); }
.dm-band-deep .dm-input { border-color: var(--cover-cream); }
.dm-band-deep .dm-eyebrow { color: var(--cover-cream); }
.dm-band-deep .dm-eyebrow::before { background: var(--cover-cream); }
.dm-band-deep a { color: var(--cover-cream); }
.dm-band-deep .dm-signup-ok { background: var(--paper); color: var(--ink); border-color: var(--cover-cream); }
.dm-band-deep .dm-signup-ok a { color: var(--link); }

/* ---------- Footer colophon ---------- */
.dm-colophon-in {
  max-width: var(--page-width); margin: 0 auto; padding: var(--space-6) var(--space-5) 0;
  display: flex; gap: var(--space-5); align-items: flex-start; flex-wrap: wrap;
  border-top: 2px solid var(--line);
}
.dm-colophon-in p {
  margin: 0; max-width: 46em; font-size: 1rem; line-height: 1.5rem; color: var(--ink-soft); font-style: italic;
}

/* ---------- One long token must not widen a page ----------
   hello@dotmerriweather.com is 26 characters and has no space or hyphen in
   it. On a 360px phone it is wider than the space left after the gutter and
   the component's own padding, so it does not overflow its box — it widens
   the box. A grid or flex track is at least as wide as the min-content of
   what it holds, and an unbroken word is min-content. The address therefore
   dragged the whole page sideways on reading-circles.html and links.html
   (document.scrollWidth 417 and 389 in a 360px viewport).

   The value has to be "anywhere", not the more familiar "break-word": both
   break a too-long word, but only "anywhere" also counts that break as a
   shrinking option when the browser computes min-content, which is what lets
   the track fit. At any width where the address does fit — which is nearly
   everywhere, including the footer and every desktop view — nothing changes;
   the word still stays whole. */
.dm-links, .dm-linkrow, .dm-btn, .dm-question, .dm-numbers, .dm-presscard {
  overflow-wrap: anywhere;
}

/* ---------- Anchors clear the sticky masthead ---------- */
[id] { scroll-margin-top: 104px; }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .dm-numbers { grid-template-columns: 1fr 1fr; }
  .dm-number { padding-top: var(--space-5); }
  .dm-number:nth-child(3) { padding-left: 0; border-left: 0; }
  .dm-about { grid-template-columns: 1fr; gap: var(--space-6); }
  .dm-about-figure { position: static; max-width: 420px; }
  .dm-press { grid-template-columns: 1fr; gap: var(--space-6); }
}
@media (max-width: 820px) {
  .dm-masthead-in { justify-content: flex-start; gap: var(--space-2) var(--space-4); }
  .dm-header-in { min-height: 0; }
  .dm-nav { gap: var(--space-5); }
  .dm-hero h1 { font-size: 3rem; line-height: 3.5rem; }
  .dm-quote blockquote { font-size: 1.75rem; line-height: 2.5rem; }
  .dm-number .n { font-size: 2.75rem; line-height: 3rem; }
  .dm-numbers { grid-template-columns: 1fr; }
  .dm-number + .dm-number { padding-left: 0; border-left: 0; border-top: 2px solid var(--line); }
  .dm-col, .dm-col + .dm-col { padding: var(--space-5) 0; border-left: 0; }
  .dm-story .t { font-size: 1.375rem; line-height: 1.875rem; }
  .dm-about-body p { font-size: 1.25rem; line-height: 2rem; }
}

/* The porch light’s halo is drawn wider than the column it sits in, on purpose:
   a lantern does not stop at an edge. Both halo layers -- the static
   .dm-hero-art::before and the blinking .dm-glow -- use inset: -8% -14%, which
   makes the overhang 14% of the figure’s own width. That is a percentage, so it
   grows with the figure, while the room to the right of the figure does not: it
   is the hero’s inline padding (24px once the hero stacks narrower than the
   1120px page measure) plus whatever the centring leaves over.

   Measured on the served pages, not inferred:
     at a 985px layout box the art ends at x=960.7 and its halo reaches x=1014.4
     at 1009 -> 984.7 / 1039.9, at 1185 -> 1128.3 / 1190.4
   so from 901px up to roughly 1240px the halo finishes past the viewport and
   the whole page grows a horizontal scrollbar. Under 901 the old fix was
   `overflow: hidden` on the figure, which cut the halo at the figure’s box --
   visible, if you look for it, and it silently did nothing in the 901-1240 band
   where the leak actually was.

   The clip now sits on `main`, the only full-bleed box in the page’s flow, so
   the halo is cut at the viewport edge rather than at the figure. Anything the
   new clip hides was already off-screen, which is what "stop reaching past the
   edge of the page" was always supposed to mean -- measured across 6 pages x 18
   widths, the only element it ever hides is the halo itself; no text, image or
   control is cut anywhere.

   The 900px rule is kept underneath it, not because it is needed to stop the
   scrollbar but because below that breakpoint the hero stacks and the figure is
   centred with room to spare, so clipping to the figure there is the tighter,
   already-agreed look. Above 900 it does nothing, and that is exactly the band
   where the leak was.

   `clip`, not `hidden`, for two reasons that matter here: `hidden` on one axis
   forces the other to `auto`, which would make `main` a scroll container and
   change how `position: sticky` behaves for the one-page PDF card further down;
   `clip` leaves overflow-y usable and creates no scrollport. Browsers without
   `overflow: clip` (Safari < 16) ignore the rule and keep the pre-fix behaviour
   -- a scrollbar they already had, not a new cut. */
main { overflow-x: clip; }
@media (max-width: 900px) {
  .dm-hero-art { overflow: hidden; }
}

/* ---------- Phones: the chrome tightens, the reading does not.
   The 24px gutter is the same on every band, so the left edge of the page
   never moves — that aligned edge is the whole editorial look. ---------- */
@media (max-width: 560px) {
  .dm-masthead-in { padding-block: var(--space-2); }
  .dm-masthead p { letter-spacing: 0.08em; }
  /* The series line is the hero’s own eyebrow one screen later; on a phone
     there is no room for saying it twice. */
  .dm-masthead .is-tag { display: none; }
  .dm-utility-in { padding-block: var(--space-2); }
  .dm-header-in { padding-block: var(--space-3); }
  .dm-nav { gap: var(--space-4); }
  .dm-nav a { letter-spacing: 0.04em; }
  .dm-hero { padding-block: var(--space-7); gap: var(--space-6); }
  .dm-hero h1 { font-size: 2.5rem; line-height: 3rem; }
  .dm-hero .dm-lede { font-size: 1.25rem; line-height: 1.875rem; }
  .dm-open { margin-bottom: var(--space-6); }
  .dm-quote-in { padding-block: var(--space-7); }
  .dm-colophon-in { padding-block: var(--space-5) 0; }
  .dm-presscard .row { flex-wrap: wrap; gap: var(--space-1); }
  .dm-presscard .what { flex-basis: 100%; }
  [id] { scroll-margin-top: 88px; }
}

/* ---------- The narrowest real thing: 305px of content.
   A dense sweep (6 pages x 18 widths x 2 scroll states) found the site's floor
   was not 320px, where the smallest phone in circulation lands, but 313px --
   measured as `documentElement.scrollWidth` at an iframe whose content width was
   305. Two unclippable flex rows set it, both in the chrome rather than the
   reading:

     .dm-controls  289px wide (144px size pill + 12px gap + 133px contrast pill),
                   starting at the 24px gutter -> its right edge sits at 313.
     .dm-author    228px of "DOT MERRIWEATHER" at 0.22em tracking, plus the 40px
                   lantern and a 12px gap -> right edge at 312.

   Neither row wraps, so below ~313px the page grows a horizontal scrollbar and
   the whole editorial illusion -- one aligned left edge -- goes with it. This
   matters more here than on a generic site: the readers this book is for use
   large print, and browser zoom shrinks the layout viewport the same way a small
   window does. Ctrl+zoom on a laptop at 200% is a 305px page.

   The controls simply get permission to wrap. Flex wrapping costs nothing when
   there is room, so that rule is unconditional rather than width-gated: the
   contrast pill drops below the size pill only when it has to.

   It also fixes a second thing, which is why it is not width-gated. The controls
   row is 289px wide and sits at the 24px gutter, so its right edge lands at 313
   -- past the container's own right padding whenever the page is narrower than
   337px. Measured against the same page with the rule switched back off: at a
   320px content width the row refused to shrink (289 stayed 289) and finished
   17px past the padding edge; at 305 it was 31px past; at 337 it landed exactly
   on it, which is the boundary the arithmetic predicts. So before this rule, on
   a 320px phone the pill did not scroll -- it sat 7px from the edge of the
   screen while everything else on the page keeps 24. One aligned edge is the
   whole look here, and 17px of it is visible.

   The price, measured rather than assumed: with the rule on, the same row now
   fits its container exactly (296 right edge at 320) and the utility bar goes
   from 129px tall to 185px between 305 and 336, because the two pills take two
   rows. From 337 up nothing moves at all -- the row is 289 wide, its right edge
   is on the padding, and the bar is the height it always was (105px by 390).
   That is chrome above the fold, not content, and it scrolls away: the header is
   position: static below 900px, so nothing stays pinned over the reading. The
   alternative was squeezing the pills back onto one row by shrinking the
   contrast button's padding and type, and on a site whose whole promise is
   print you can actually read, buying 56px of chrome with smaller text is the
   wrong trade.

   The name gets the same treatment the masthead already gives its series line at
   560px -- tighten the tracking rather than shrink the type, because the size of
   the letters is the one thing on this site that is not negotiable. 0.08em is
   that band's existing value, so the two lines still rhyme. ---------- */
.dm-controls { flex-wrap: wrap; }
@media (max-width: 360px) {
  .dm-author { letter-spacing: 0.08em; }
}
/* One more step, because the name is the last thing standing: at 305 the two
   wrapping rows above cleared the page, but at a 280px content width -- a
   Galaxy Flip cover screen -- the name alone still ran 2px past the gutter.
   The other three answers were measured first: hiding the lantern cleared it
   (and threw away the most recognisable mark on the site); stacking the mark
   over the name cleared it and made the sticky header 60px taller; tightening
   the tracking to 0.02em cleared it and changed nothing a reader would notice,
   because 0.02em at that size is what untracked caps already look like. So the
   ornament and the line both stay, and only the air between the letters gives.

   Where the floor ended up, measured afterwards over all six pages: clean from a
   280px content width up, every page returning the same scrollWidth of 280.
   Below 280 what leaks is no longer the chrome but the reading itself -- a
   heading and its lede at a 267px min-content -- so 280 is where this site stops
   being width-adaptive and would have to start restyling prose. That is the
   right place to stop. */
@media (max-width: 300px) {
  .dm-author { letter-spacing: 0.02em; }
}
@media print {
  .dm-masthead, .dm-quote, .dm-band-deep { background: #fff; color: #000; }
  .dm-quote blockquote, .dm-quote cite, .dm-band-deep .dm-signup h3 { color: #000; }
}