/* Chronicles — dispatch masthead + Stage (q200)
   Spacing + type: fixed rem. No vw/vh clamps — tablets must not collapse gaps. */

.chr-dispatch {
  --chr-ink: #1c1917;
  --chr-ink-muted: #564c47;
  --chr-rule: #ba9b22;
  --chr-accent: #006631;
  --chr-paper: var(--drydock-stage-bg, #f5f2eb);
  min-height: 100%;
  padding: var(--chr-space-dispatch-pad-y, 1.25rem) var(--chr-space-dispatch-pad-x, 1.25rem) var(--chr-space-block, 1.5rem);
  background: var(--chr-paper);
  color: var(--chr-ink);
  font-family: var(--chr-font-story);
  font-weight: var(--chr-font-story-weight);
  line-height: 1.55;
}

/* ── Masthead — title · tagline · rule (+ phone meta) ── */
.chr-masthead {
  text-align: center;
  max-width: 36rem;
  margin: 0 auto var(--chr-space-block, 1.5rem);
}

.chr-masthead__title {
  display: inline-block;
  margin: 0 0 var(--chr-space-after-title, 0.35rem);
  font-family: var(--chr-font-mast, 'Fredoka', system-ui, sans-serif);
  font-size: 2rem;
  font-weight: var(--chr-font-mast-weight, 700);
  letter-spacing: 0.01em;
  line-height: 1.15;
  color: var(--chr-ink);
  text-decoration: none;
  cursor: pointer;
}

.chr-masthead__title:hover,
.chr-masthead__title:focus-visible {
  color: color-mix(in srgb, var(--chr-ink) 72%, var(--chr-accent, #006631));
  outline: none;
  text-decoration: underline;
  text-underline-offset: 0.12em;
}

.chr-masthead__tagline {
  margin: 0 0 var(--chr-space-after-tagline, 0.75rem);
  font-family: var(--chr-font-dispatch);
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.3;
  color: var(--chr-ink-muted);
}

.chr-masthead__rule {
  display: block;
  margin: 0 auto;
  border: 0;
  border-top: 1px solid var(--chr-rule);
  width: min(100%, 12rem);
  opacity: 0.9;
}

/* Phone-only: Dispatch No. · date · Stage article title · end rule */
.chr-masthead__phone-meta {
  display: none;
}

.chr-masthead__issue-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0.35rem;
  margin: 0 0 var(--chr-space-after-title, 0.35rem);
  color: var(--chr-ink-muted);
  font-family: var(--chr-font-dispatch);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.35;
}

.chr-masthead__issue-line .chr-rail__issue-num,
.chr-masthead__issue-line .chr-rail__issue-date {
  display: inline;
  margin: 0;
  font: inherit;
  color: inherit;
  letter-spacing: 0.01em;
}

.chr-masthead__issue-line .chr-rail__issue-sep {
  margin: 0;
  opacity: 0.65;
  font-weight: 400;
}

.chr-masthead__stage-title {
  margin: 0 0 var(--chr-space-after-maiden, 1rem);
  padding-bottom: 0.15rem; /* keep italic descenders clear of end rule */
  font-family: var(--chr-font-story);
  font-size: 1.25rem;
  font-weight: 500;
  font-style: italic;
  line-height: 1.4;
  color: var(--chr-ink);
}

.chr-masthead__rule--end {
  margin-top: 0;
  width: min(100%, 16rem);
}

/* Desktop + tablet landscape — larger masthead title */
body[data-dd-token='desktop'] .chr-masthead__title,
body[data-dd-token='tablet-landscape'] .chr-masthead__title {
  font-size: 3.25rem; /* 2rem + 1.25rem */
}

body[data-dd-token='desktop'] .chr-masthead__tagline,
body[data-dd-token='tablet-landscape'] .chr-masthead__tagline {
  font-size: 1.45rem; /* 1.7rem − 0.25rem */
}

/* ── Stage slot: title → square hero columns → fields footer ── */
html:not(.chr-dispatch-ready) .chr-dispatch__body {
  visibility: hidden;
}

.chr-dispatch__body {
  /* +10% again from 66rem / 99% */
  max-width: min(72.6rem, 100%);
  margin: 0 auto;
  font-size: 1.05rem;
  font-weight: var(--chr-font-story-weight);
}

.chr-stage {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
}

/* Stage title + subtitle — match Cd spacing (3rem top, 2rem under subtitle) */
.chr-stage__heads {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.65rem;
  margin: 3rem 0 2rem;
  width: 100%;
}

.chr-stage__title {
  margin: 0;
  font-family: var(--chr-font-story);
  font-size: 2.5rem;
  font-weight: 700;
  font-style: normal;
  line-height: 1.25;
  color: var(--chr-ink);
  text-align: center;
}

.chr-stage__subtitle {
  margin: 0;
  font-family: var(--chr-font-dispatch);
  font-size: 1.25rem;
  font-weight: 400;
  font-style: normal;
  line-height: 1.3;
  color: var(--chr-ink-muted, var(--chr-ink));
  text-align: center;
}

.chr-stage__subtitle:empty {
  display: none;
}

/* Equal squares + 4rem gutter */
.chr-stage__heroes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: start;
  width: 100%;
}

/* Desktop / tablet-landscape — same block, +10% width */
body[data-dd-token='desktop'] .chr-dispatch,
body[data-dd-token='tablet-landscape'] .chr-dispatch {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  min-height: 100%;
  padding:
    var(--chr-space-dispatch-pad-y, 1rem)
    clamp(0.75rem, 1.5vw, 1.25rem)
    0.85rem;
}

body[data-dd-token='desktop'] .chr-masthead,
body[data-dd-token='tablet-landscape'] .chr-masthead {
  flex: 0 0 auto;
  margin-bottom: 0;
}

body[data-dd-token='desktop'] .chr-dispatch__body,
body[data-dd-token='tablet-landscape'] .chr-dispatch__body {
  flex: 0 1 auto;
  width: 100%;
  max-width: min(72.6rem, 100%);
  margin: 0 auto;
}

body[data-dd-token='desktop'] .chr-stage__heads,
body[data-dd-token='tablet-landscape'] .chr-stage__heads {
  margin: 3rem 0 2rem;
}

body[data-dd-token='desktop'] .chr-stage__title,
body[data-dd-token='tablet-landscape'] .chr-stage__title {
  font-size: clamp(1.75rem, 2.2vw, 2.25rem);
  font-weight: 700;
  font-style: normal;
}

body[data-dd-token='desktop'] .chr-stage__subtitle,
body[data-dd-token='tablet-landscape'] .chr-stage__subtitle {
  font-size: clamp(1.05rem, 1.35vw, 1.25rem);
}

body[data-dd-token='desktop'] .chr-stage__heroes,
body[data-dd-token='tablet-landscape'] .chr-stage__heroes {
  flex: none;
  height: auto;
  gap: 4rem;
}

body[data-dd-token='desktop'] .chr-stage__fields,
body[data-dd-token='tablet-landscape'] .chr-stage__fields {
  flex: 0 0 auto;
  margin-top: 3rem; /* gap under hero columns (−1rem, match Cd) */
}

.chr-stage__hero {
  position: relative;
  margin: 0;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  background: color-mix(in srgb, var(--chr-rule) 12%, var(--chr-paper));
}

.chr-stage__hero-img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

.chr-stage__hero-img[hidden] {
  display: none;
}

.chr-stage__hero-ph {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border: 1px dashed color-mix(in srgb, var(--chr-rule) 55%, transparent);
  color: var(--chr-ink-muted);
  text-align: center;
  padding: 1rem;
}

.chr-stage__hero:has(.chr-stage__hero-img:not([hidden])) .chr-stage__hero-ph {
  display: none;
}

.chr-stage__hero-ph-label {
  font-family: var(--chr-font-dispatch);
  font-size: clamp(0.95rem, 2.5vw, 1.15rem);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.chr-stage__hero-ph-hint {
  font-family: var(--chr-font-story);
  font-size: 0.85rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.8;
}

.chr-stage__article {
  min-width: 0;
  min-height: 0;
  aspect-ratio: 1;
  box-sizing: border-box;
  padding: 1rem 1.1rem;
  overflow: auto;
  background: color-mix(in srgb, var(--chr-paper) 88%, var(--chr-rule));
  border: 1px solid color-mix(in srgb, var(--chr-rule) 18%, transparent);
  color: var(--chr-ink);
}

.chr-stage__lede {
  margin: 0 0 0.85rem;
  font-size: 1.08rem;
  font-weight: var(--chr-font-story-weight);
  color: var(--chr-ink-muted);
}

.chr-stage__article p {
  margin: 0 0 0.85rem;
}

.chr-stage__article p:last-child {
  margin-bottom: 0;
}

/* Dispatch package P.S. — shown under Category/Archives articles only.
   Never under Stage (q200): Outtakes / On Deck already live in q400 footer. */
#q200 .chr-stage__ps {
  display: none !important;
}

.chr-stage__ps {
  width: 100%;
  box-sizing: border-box;
  margin: 2.25rem 0 0;
  padding: 1.1rem 0 0;
  border-top: 1px solid color-mix(in srgb, var(--chr-rule) 28%, transparent);
}

.chr-stage__ps[hidden] {
  display: none;
}

.chr-stage__ps-title {
  margin: 0 0 0.85rem;
  font-family: var(--chr-font-title);
  font-size: clamp(0.78rem, 1.6vw, 0.92rem);
  font-weight: var(--chr-font-label-weight, 600);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--chr-ink-muted, var(--chr-ink));
  text-align: center;
}

.chr-stage__ps-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  align-items: start;
}

.chr-stage__ps-card {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: 0.65rem;
  align-items: start;
  min-width: 0;
}

.chr-stage__ps-card[hidden] {
  display: none;
}

.chr-stage__ps-fig {
  margin: 0;
  width: 4.5rem;
  height: 4.5rem;
  overflow: hidden;
  background: color-mix(in srgb, var(--chr-rule) 12%, var(--chr-paper));
  border: 1px solid color-mix(in srgb, var(--chr-rule) 18%, transparent);
}

/* Phone / tablet-portrait — Outtakes & On Deck each own full-width row */
.dd-viewport.dd-layout--phone-stack .chr-stage__ps-grid,
body[data-dd-token='phone'] .chr-stage__ps-grid,
body[data-dd-token='tablet-portrait'] .chr-stage__ps-grid,
html.dd-chr-phone-boot .chr-stage__ps-grid {
  grid-template-columns: 1fr;
}

.chr-stage__ps-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.chr-stage__ps-img[hidden] {
  display: none;
}

.chr-stage__ps-label {
  margin: 0 0 0.25rem;
  font-family: var(--chr-font-title);
  font-size: 0.72rem;
  font-weight: var(--chr-font-label-weight, 600);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--chr-ink-muted, var(--chr-ink));
}

.chr-stage__ps-text {
  margin: 0;
  font-family: var(--chr-font-story);
  font-size: 0.92rem;
  line-height: 1.35;
  color: var(--chr-ink);
}

@media (max-width: 52rem) {
  .chr-stage__ps-grid {
    grid-template-columns: 1fr;
  }
}

/* Fields bar — width matches hero columns; 3rem above (match Cd) */
.chr-stage__fields {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-start;
  gap: 0.65rem 1.35rem;
  width: 100%;
  box-sizing: border-box;
  margin: 3rem 0 0;
  padding: 0.7rem 1rem;
  background: var(--chr-rule, #ba9b22);
  color: #eef2f6;
}

.chr-stage__field {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem;
  margin: 0;
  min-width: 0;
  font-family: var(--chr-font-dispatch);
  font-size: 0.82rem;
  line-height: 1.25;
}

.chr-stage__field[hidden] {
  display: none !important;
}

/* Desktop + tablet landscape — footer fields +0.15rem */
body[data-dd-token='desktop'] .chr-stage__field,
body[data-dd-token='tablet-landscape'] .chr-stage__field {
  font-size: 0.97rem;
}

.chr-stage__field-label {
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.75;
}

.chr-stage__field-value {
  font-weight: 400;
  letter-spacing: 0.01em;
}

.chr-stage__field--keywords {
  flex: 1 1 12rem;
}

.chr-dispatch__launch {
  margin: 2.5rem 0 0;
  text-align: center;
  font-family: var(--chr-font-story);
  font-size: 15pt;
  font-weight: 500;
  line-height: 1.4;
  color: var(--chr-ink);
}

.chr-dispatch__lede {
  margin: 0 0 1.25rem;
  font-size: 1.12rem;
  font-weight: var(--chr-font-story-weight);
  color: var(--chr-ink-muted);
}

/* Narrow / phone: stack heroes as squares; keep fields under */
@media (max-width: 52rem) {
  .dd-viewport:not(.dd-layout--phone-stack) .chr-stage__heroes {
    grid-template-columns: 1fr;
  }
}

.dd-viewport.dd-layout--phone-stack .chr-stage__heroes,
body[data-dd-token='phone'] .chr-stage__heroes,
body[data-dd-token='tablet-portrait'] .chr-stage__heroes {
  grid-template-columns: 1fr;
}

.dd-viewport.dd-layout--phone-stack .chr-stage__hero,
.dd-viewport.dd-layout--phone-stack .chr-stage__article,
body[data-dd-token='phone'] .chr-stage__hero,
body[data-dd-token='phone'] .chr-stage__article,
body[data-dd-token='tablet-portrait'] .chr-stage__hero,
body[data-dd-token='tablet-portrait'] .chr-stage__article {
  aspect-ratio: 1;
}

.dd-viewport.dd-layout--phone-stack .chr-stage__heads,
body[data-dd-token='phone'] .chr-stage__heads,
body[data-dd-token='tablet-portrait'] .chr-stage__heads {
  margin: 0.75rem 0 1.25rem;
  gap: 0.45rem;
}

.dd-viewport.dd-layout--phone-stack .chr-stage__title,
.dd-viewport.dd-layout--phone-stack .chr-stage__subtitle,
body[data-dd-token='phone'] .chr-stage__title,
body[data-dd-token='phone'] .chr-stage__subtitle,
body[data-dd-token='tablet-portrait'] .chr-stage__title,
body[data-dd-token='tablet-portrait'] .chr-stage__subtitle {
  margin: 0;
  text-align: left;
}