/* ——— Dispatch (newspaper article page) ——— */
.issue {
  padding:
    calc(0.85rem * var(--issue-inset))
    calc(clamp(0.85rem, 2.5vw, 1.75rem) * var(--issue-inset))
    calc(1.25rem * var(--issue-inset));
}

.issue-sheet {
  position: relative;
  isolation: isolate;
  min-height: calc(100svh - var(--header-h) - (2.1rem * var(--issue-inset)));
  padding: clamp(2rem, 4.2vw, 3.35rem) clamp(1.6rem, 5.5vw, 4.25rem) clamp(2.5rem, 4.5vw, 4rem);
  background-color: var(--paper);
  background-image: var(--paper-tooth);
  background-size: var(--paper-grain) auto;
  background-repeat: repeat;
  background-blend-mode: soft-light;
  color: var(--ink);
  box-shadow:
    0 calc(18px * var(--issue-inset)) calc(48px * var(--issue-inset)) rgba(46, 22, 8, calc(0.2 * var(--issue-inset))),
    0 calc(4px * var(--issue-inset)) calc(18px * var(--issue-inset)) rgba(46, 22, 8, calc(0.1 * var(--issue-inset)));
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  transform: translateZ(0);
}

.issue-sheet:has([data-years]) {
  overflow-x: visible;
  overflow-y: visible;
  transform: none;
}

.issue:has([data-years]) {
  overflow-x: clip;
}

/* Nothing may widen the page past the sheet, or the bare body shows at the edges */
html:has(body.is-issue-page),
body.is-issue-page {
  overflow-x: clip;
}

/* Touch: the sheet sits full bleed and the olive margin around it is three
   strips (added by main.js) that shrink and fade on the compositor as the page
   is read. Clipping or padding the sheet instead re-paints the whole article on
   every scroll frame. The gutter moves inside the sheet. */
html.is-touch .issue {
  --issue-gutter: clamp(0.85rem, 2.5vw, 1.75rem);
  position: relative;
  padding: 0;
}

html.is-touch .issue-sheet {
  min-height: calc(100svh - var(--header-h));
  padding-inline: calc(clamp(1.6rem, 5.5vw, 4.25rem) + var(--issue-gutter));
  box-shadow: none;
}

.issue-margin {
  display: none;
}

html.is-touch .issue-margin {
  display: block;
  position: absolute;
  inset: 0;
  /* Under the header, so the top strip can tuck beneath it (see below) */
  z-index: 1;
  pointer-events: none;
  will-change: opacity;
}

html.is-touch .issue-margin span {
  position: absolute;
  background: var(--olive);
  will-change: transform;
}

/* Starts 1px up under the header: the header edge falls on a fractional pixel
   and the strip is its own layer, so without the overlap the two can round
   apart and the paper shows as a hairline between them. */
html.is-touch .issue-margin-top {
  top: -1px;
  left: 0;
  right: 0;
  height: calc(0.85rem + 1px);
  transform-origin: 50% 0;
}

html.is-touch .issue-margin-left,
html.is-touch .issue-margin-right {
  top: 0;
  bottom: 0;
  width: var(--issue-gutter);
}

html.is-touch .issue-margin-left {
  left: 0;
  transform-origin: 0 50%;
}

html.is-touch .issue-margin-right {
  right: 0;
  transform-origin: 100% 50%;
}

html.is-touch .wanting-sheet {
  min-height: calc(100svh - var(--header-h));
}

.issue-sheet::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: rgba(255, 236, 210, 0.18);
}

.issue-sheet::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background-image: var(--paper-tooth);
  background-size: var(--paper-grain) auto;
  mix-blend-mode: multiply;
  opacity: 0.58;
}

.issue-kicker,
.issue-head,
.house-nav,
.grounds-body,
.annals,
.annals-chronicle,
.issue-copy,
.notice-copy,
.issue-sheet .grounds-invite,
.issue-sheet .colophon {
  position: relative;
  z-index: 1;
}

.issue-kicker {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.35rem 1.5rem;
  margin: 0 0 0.75rem;
}

.issue-head {
  margin: 0 0 2.5rem;
}

.issue-title {
  font-family: var(--font-news);
  font-weight: 700;
  font-size: clamp(2.6rem, 6.4vw, 5.4rem);
  letter-spacing: 0.01em;
  line-height: 0.9;
  margin: 0 0 0.75rem;
  color: var(--ink);
  text-transform: uppercase;
}

.issue-script {
  font-family: var(--font-script-soft);
  font-size: clamp(1.28rem, 2vw, 1.7rem);
  color: var(--ink-soft);
  margin: 0 0 0.7rem;
  letter-spacing: 0.02em;
}

.issue-byline {
  font-family: var(--font-fell);
  font-style: italic;
  font-size: 1.12rem;
  color: var(--ink-soft);
  margin: 0;
}


.issue-title,
.issue-script,
.issue-byline,
.issue-kicker,
.issue .eyebrow,
.issue-copy p,
.issue-copy h2,
.issue-copy .drop,
.issue-cut figcaption,
.issue-sheet .colophon-copy,
.issue-sheet .colophon-credit {
  mix-blend-mode: multiply;
}

.issue-sheet .colophon a {
  border-bottom: none;
  background-image: none;
  padding-bottom: 0;
}

.notice-copy {
  max-width: 44rem;
  margin: 0 auto;
}

.notice-copy p,
.notice-copy li {
  font-family: var(--font-body);
  font-style: normal;
  font-size: 1.18rem;
  line-height: 1.62;
  color: var(--ink-soft);
  text-align: justify;
  hyphens: auto;
}

.notice-copy p {
  margin: 0 0 0.9rem;
}

.notice-copy p:first-of-type {
  text-indent: 0;
}

.notice-copy .drop {
  font-size: 3.15rem;
  line-height: 0.72;
  padding: 0.1rem 0.38rem 0 0;
}

.notice-copy h2 {
  font-family: var(--font-news);
  font-weight: 700;
  font-style: normal;
  font-size: 1.16rem;
  letter-spacing: 0.04em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--ink);
  margin: 1.6rem 0 0.7rem;
}

.notice-copy ul {
  margin: 0 0 0.9rem;
  padding: 0 0 0 1.15rem;
}

.notice-copy li {
  margin: 0 0 0.4rem;
  text-align: left;
}

.notice-copy a {
  color: inherit;
}

.notice-copy a:hover {
  color: var(--ink);
}

.notice-copy,
.notice-copy p,
.notice-copy li,
.notice-copy h2,
.notice-copy .drop {
  mix-blend-mode: multiply;
}