/* ==========================================================================
   Shared editorial frame: both essays and the three case studies read as
   one publication. Loaded last on those pages, so it settles the header,
   the type scale and the reading column; each page keeps its own pictures,
   demos and chapter colours.
   ========================================================================== */

:root {
  --x-butter: #ffda70;
  --x-paper: #f7f6f1;
  --x-ink: #0b0b0c;
  --x-serif: "Newsreader", Georgia, "Times New Roman", serif;
  --x-display: "Montserrat", var(--font);
  --x-top: clamp(150px, 15vw, 210px);
}

/* ---------- header: butter band, meta, title, subtitle, lead picture ---------- */
.ed-open,
.bo-head { padding-top: var(--x-top); background: var(--x-butter); }

.ed-open-meta,
.bo-meta,
.csl-metarow { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 26px; font: 600 1rem var(--font); color: var(--x-ink); }
.ed-open-meta span, .ed-open-meta time,
.bo-meta span, .bo-meta time,
.csl-metarow span { opacity: 0.7; }
.csl-back { opacity: 0.85; text-underline-offset: 4px; }
.csl-back:hover { opacity: 1; text-decoration: underline; }

.ed-title,
.bo-title,
body.cs .csl-title {
  margin-top: clamp(28px, 4vw, 56px);
  font-family: var(--x-display);
  font-weight: 800;
  font-size: clamp(2.7rem, 7.6vw, 8rem);
  line-height: 0.92;
  letter-spacing: -0.06em;
  color: var(--x-ink);
  text-wrap: balance;
}

.ed-sub,
.bo-sub,
.csl-sub {
  max-width: 34ch;
  margin: clamp(24px, 3vw, 40px) 0 0;
  padding: 0;
  font-family: var(--x-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.35rem, 2vw, 1.85rem);
  line-height: 1.3;
  letter-spacing: -0.01em;
  font-variation-settings: "opsz" 48;
  color: var(--x-ink);
}

/* emotional design: title, subtitle, then the photograph across the full width */
.ed-open-grid { margin-top: 0; }
.ed-open .ed-sub { grid-column: 1 / -1; align-self: start; }
.ed-open .ed-hero-plate { grid-column: 1 / -1; aspect-ratio: 16 / 9; margin-top: clamp(48px, 6vw, 90px); border-radius: 28px; }
.ed-open .ed-hero-plate img { object-position: 50% 52%; }

/* too boring: the wall of interchangeable cards sits on the same butter band */
.bo-wall { margin-top: clamp(48px, 6vw, 90px); }

/* case studies: the band holds meta, title and subtitle; the hero overlaps its edge */
body.cs .csl-head {
  width: 1314px;
  max-width: calc(100% - 2 * var(--gutter, 24px));
  margin: 0 auto;
  padding: var(--x-top) 0 clamp(200px, 18vw, 260px);
  background: var(--x-butter);
  box-shadow: 0 0 0 100vmax var(--x-butter);
  clip-path: inset(0 -100vmax);
}
body.cs .csl-title { width: auto; max-width: none; padding: 0; background: none; box-shadow: none; clip-path: none; }
.js body.cs .csl-head .csl-metarow,
.js body.cs .csl-head .csl-sub { animation: in-fade 1s var(--ease) 0.45s both; }

/* ---------- section headings: one size everywhere ---------- */
.ed-h2,
.bo-h2,
body.cs .csl-text h2 {
  font-family: var(--x-display);
  font-weight: 800;
  font-size: clamp(1.8rem, 3.2vw, 3rem);
  line-height: 1.04;
  letter-spacing: -0.045em;
  text-wrap: balance;
}
body.cs .csl-text h2 { color: var(--x-ink); }
body.cs .csl-text h3 { font-family: var(--x-display); font-weight: 700; font-size: clamp(1.15rem, 1.5vw, 1.35rem); line-height: 1.25; letter-spacing: -0.025em; color: var(--x-ink); }

/* ---------- reading text: Newsreader, one size, one measure ---------- */
.ed-text p,
.bo-text p:not(.bo-turn):not(.bo-open):not(.bo-wonder):not(.bo-big):not(.bo-last),
body.cs .csl-text p {
  font-family: var(--x-serif);
  font-size: clamp(1.2rem, 1.4vw, 1.38rem);
  line-height: 1.6;
  letter-spacing: -0.003em;
  font-variation-settings: "opsz" 18;
}
body.cs .csl-text p { color: rgba(11, 11, 12, 0.85); }
body.cs .csl-text p strong { font-family: var(--x-display); font-size: 0.86em; font-weight: 700; letter-spacing: -0.02em; color: var(--x-ink); }
body.cs .csl-meta dt { font-family: var(--x-display); font-size: 0.95rem; }
body.cs .csl-meta dd { font-family: var(--x-serif); font-size: 1.2rem; line-height: 1.35; }

/* the essay's reading column starts a third of the way in, like the other essay */
.bo-num { display: none; }
.bo-grid > .bo-h2 { grid-column: 5 / 13; }
.bo-grid > .bo-text,
.bo-grid > .bo-signoff { grid-column: 5 / 12; }

/* ---------- captions and credits ---------- */
.ed-credit,
.bo-credit { font-family: var(--font); font-style: normal; font-size: 0.8rem; }

/* ---------- tablet & phone ---------- */
@media (max-width: 999px) {
  .ed-open .ed-sub { margin-top: 24px; }
  .bo-grid > .bo-h2,
  .bo-grid > .bo-text,
  .bo-grid > .bo-signoff { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  .ed-title,
  .bo-title,
  body.cs .csl-title { font-size: 12.6vw; line-height: 0.95; }
  .ed-title span, .bo-title span { display: inline; }
  .ed-open .ed-hero-plate { aspect-ratio: 4 / 5; border-radius: 22px; }
  body.cs .csl-head { padding: 130px 0 150px; }
}
@media (prefers-reduced-motion: reduce) {
  .js body.cs .csl-head .csl-metarow,
  .js body.cs .csl-head .csl-sub { animation: none; }
}