/* Components. The masthead, the hero, the cards, the grid. */

/* ── Masthead ──────────────────────────────────────────
   Ink, always. The chrome belongs to the magazine; reading
   themes belong to the article body. */
.masthead {
  position: sticky; top: 0; z-index: 40;
  background: var(--ink);
  border-bottom: 1px solid var(--on-ink-hair);
}
.masthead__inner {
  max-width: var(--max); margin-inline: auto;
  padding: 1rem var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
}
.masthead__logo img { height: 1.5rem; width: auto; }
@media (min-width: 48em) { .masthead__logo img { height: 1.75rem; } }

.nav { display: none; }
@media (min-width: 48em) { .nav { display: block; } }
.nav__list {
  display: flex; gap: 1.5rem; margin: 0; padding: 0; list-style: none;
  font-size: var(--t-label); font-weight: 500;
  letter-spacing: var(--ls-nav); text-transform: uppercase;
}
.nav__list a { color: rgba(255,255,255,.7); }
.nav__list a:hover { color: var(--red); }

.nav__toggle {
  display: grid; place-items: center;
  width: 2.75rem; height: 2.75rem; margin-right: -.5rem;
  background: none; border: 0; cursor: pointer;
}
@media (min-width: 48em) { .nav__toggle { display: none; } }
.nav__bars, .nav__bars::before, .nav__bars::after {
  content: ""; display: block; width: 1.25rem; height: 2px; background: #fff;
}
.nav__bars::before { transform: translateY(-6px); }
.nav__bars::after  { transform: translateY(4px); }
.nav__toggle[aria-expanded="true"] .nav__bars { background: transparent; }
.nav__toggle[aria-expanded="true"] .nav__bars::before { transform: rotate(45deg); background: var(--red); }
.nav__toggle[aria-expanded="true"] .nav__bars::after  { transform: rotate(-45deg) translateY(-1px); background: var(--red); }

/* Full screen, not a dropdown. On a phone the sections deserve the whole
   screen and the size the display face gives them — a cramped list of
   eleven-pixel capitals reads like a settings menu. */
.nav__panel {
  position: fixed; inset: 3.5rem 0 0; z-index: 30;
  background: var(--ink);
  display: flex; flex-direction: column;
  padding: .5rem var(--gutter) 2.5rem;
  overflow-y: auto;
}
.nav__panel[hidden] { display: none; }
@media (min-width: 48em) { .nav__panel { display: none !important; } }
.nav__panel-list { list-style: none; margin: 0; padding: 0; }
.nav__panel-list a {
  display: block; padding: 1.15rem 0;
  border-bottom: 1px solid var(--on-ink-hair);
  font-family: var(--display); font-size: 1.9rem; color: #fff;
}
.nav__panel .btn { margin-top: auto; align-self: flex-start; }

/* ── Hero ──────────────────────────────────────────────
   Header, nav and hero form one unbroken dark field. */
.hero { position: relative; min-height: 78vh; display: flex; background: var(--ink); }
.hero__img { position: absolute; inset: 0; }
.hero__img img { width: 100%; height: 100%; object-fit: cover; }
.hero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom,
    rgba(0,0,0,.62) 0%, rgba(0,0,0,.10) 30%,
    rgba(0,0,0,.20) 52%, rgba(0,0,0,.78) 82%, rgba(0,0,0,.96) 100%);
}
.hero__inner {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; justify-content: space-between;
  width: 100%; max-width: var(--max); margin-inline: auto;
  padding: 2.5rem var(--gutter) 3.5rem;
}
.hero__masthead { width: min(78vw, 34rem); height: auto; }
.hero__words { max-width: 52rem; }
.hero__issue {
  display: inline-block; background: var(--red); color: #fff;
  padding: .6rem 1.1rem; margin-bottom: 1.4rem;
  font-size: var(--t-label); font-weight: 600; letter-spacing: .3em;
}
.hero__title { font-size: var(--t-cover); line-height: var(--lh-tight); color: #fff; }
.hero__standfirst {
  margin-top: 1rem; max-width: 42ch;
  font-family: var(--display); font-style: italic;
  font-size: var(--t-lede); color: rgba(255,255,255,.8);
}
.hero__label {
  margin-top: 1.75rem; display: flex; align-items: center; gap: 1rem;
  font-size: var(--t-label); font-weight: 600;
  letter-spacing: var(--ls-label); text-transform: uppercase; color: #fff;
}
.hero__rule { display: block; width: 3.4rem; height: 3px; background: var(--red); }
.hero__more {
  display: inline-block; margin-top: 1.5rem;
  font-size: var(--t-label); font-weight: 600;
  letter-spacing: var(--ls-nav); text-transform: uppercase; color: #fff;
  border-bottom: 1px solid var(--red); padding-bottom: .3rem;
}

/* ── The statement line ────────────────────────────────*/
.statement__line {
  max-width: 46rem; margin-inline: auto; text-align: center;
  font-family: var(--display); font-size: var(--t-feature);
  line-height: 1.25; color: var(--on-ink-head);
}

/* ── Grid ──────────────────────────────────────────────*/
.layout { display: grid; gap: var(--gap); }
.layout--grid-3 { grid-template-columns: 1fr; }
.layout--grid-4 { grid-template-columns: 1fr 1fr; }
.layout--row    { grid-template-columns: 1fr; }
.layout--feature{ grid-template-columns: 1fr; }
@media (min-width: 40em) { .layout--grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62em) {
  .layout--grid-3 { grid-template-columns: repeat(3, 1fr); }
  .layout--grid-4 { grid-template-columns: repeat(4, 1fr); }
  .layout--row    { grid-template-columns: repeat(2, 1fr); }
}

.band__body--rail { display: grid; gap: var(--gap); }
@media (min-width: 62em) {
  .band__body--rail { grid-template-columns: 1fr 300px; align-items: start; }
}

/* ── Card ──────────────────────────────────────────────
   Images sit directly on the ground. No borders, no shadows,
   no rounded corners — Standards 5.3. */
.card__img { display: block; margin-bottom: .9rem; overflow: hidden; }
.card__img img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform .6s ease; }
.card:hover .card__img img { transform: scale(1.02); }
.card__title { font-size: var(--t-card); }
.card--feature .card__title { font-size: var(--t-feature); }
.card__blurb { margin-top: .5rem; font-size: var(--t-small); }
.card.on-ink   .card__title a { color: var(--on-ink-head); }
.card.on-ink   .card__blurb   { color: var(--on-ink-body); }
.card.on-paper .card__title a { color: var(--on-paper-head); }
.card.on-paper .card__blurb   { color: var(--on-paper-body); }
.card__title a:hover { color: var(--red); }

/* ── Advertising ───────────────────────────────────────*/
.ad__label {
  font-size: var(--t-label); letter-spacing: var(--ls-label);
  text-transform: uppercase; color: var(--on-ink-faint); margin-bottom: .6rem;
}
.ad__unit { border: 1px solid var(--on-ink-hair); }   /* a hairline, never gold */

/* ── The article ───────────────────────────────────────
   Ink to open, paper to read. The dark entrance makes it feel
   like a magazine; the white makes it comfortable for the
   twelve minutes that follow. The image is the bridge. */
.story { background: var(--ink); }
.story__head {
  max-width: 46rem; margin-inline: auto;
  padding: var(--pad-ink-m) var(--gutter) 0;
}
@media (min-width: 48em) { .story__head { padding-top: var(--pad-ink); } }
.story__kicker {
  font-size: var(--t-label); font-weight: 600;
  letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--red);
}
.story__title { margin-top: .6rem; font-size: var(--t-section); }
.story__standfirst {
  margin-top: 1rem; font-family: var(--display); font-style: italic;
  font-size: var(--t-lede); color: var(--on-ink-body);
}
.story__byline { margin-top: 1.5rem; font-size: var(--t-small); color: var(--on-ink-faint); }
/* Full-bleed, and the last thing on the dark. */
.story__figure { margin: 3rem 0 0; background: var(--ink); }
.story__figure img { width: 100%; }
.story__figure figcaption {
  max-width: var(--measure-read); margin: .7rem auto 0;
  padding-inline: var(--gutter);
  font-size: .8rem; color: var(--on-ink-faint);
}
.story__figure .credit { display: block; margin-top: .2rem; }

/* Paper begins. */
.story__read { background: var(--paper); color: var(--on-paper-body); }
.story__body {
  max-width: var(--measure-read); margin-inline: auto;
  padding: var(--pad-paper-m) var(--gutter);
  font-size: var(--t-read); line-height: var(--lh-read);
}
.story__body > * + * { margin-top: 1.3em; }   /* generous paragraph spacing */
@media (min-width: 48em) { .story__body { padding-block: var(--pad-paper); } }
.story__body > * + * { margin-top: 1.15em; }
.story__body h2 { font-size: var(--t-headline); margin-top: 2em; color: var(--on-paper-head); }
.story__body a { color: var(--red); text-decoration: underline; text-underline-offset: 3px; }
.story__body blockquote {
  margin: 2em 0; padding-left: 1.2rem;
  border-left: 2px solid var(--red);
  font-family: var(--display); font-size: var(--t-headline);
  font-style: italic; color: var(--on-paper-head);
}
.story__body a { color: var(--red-ink); }   /* deeper red — full chroma is thin on paper */
.story__body img { margin-block: 2em; }

/* ── Motion ────────────────────────────────────────────
   One effect, applied uniformly. Images fade up as they arrive. */
.reveal { opacity: 0; transform: translateY(12px); }
.reveal.is-in { opacity: 1; transform: none; transition: opacity .6s ease, transform .6s ease; }
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.is-in { opacity: 1; transform: none; transition: none; }
  .card:hover .card__img img { transform: none; }
}

/* ── The subscribe strip ───────────────────────────────
   A band, not a section. It sits between two sections and
   should read as a rule with words on it — so it takes a
   fraction of the standard padding, and its two halves sit
   on one line wherever there is room. */
.strip { padding-block: 2.25rem; border-block: 1px solid var(--on-ink-hair); }
.strip__inner {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 1rem 2rem;
}
.strip__line { font-family: var(--display); font-size: var(--t-headline); color: var(--on-ink-head); }
.strip .btn { margin-top: 0; }

/* ── The newsletter band ───────────────────────────────*/
.newsletter { max-width: 44rem; }
.newsletter__eyebrow {
  font-size: var(--t-label); font-weight: 600;
  letter-spacing: var(--ls-label); text-transform: uppercase; color: #fff;
}
.newsletter__title { margin-top: .5rem; font-size: var(--t-feature); color: #fff; }
.newsletter__consent { margin-top: 1.25rem; font-size: .78rem; color: rgba(255,255,255,.75); }

.signup { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.5rem; }
.signup input {
  flex: 1 1 12rem; min-width: 0;
  padding: .85rem 1rem; font: inherit; font-size: var(--t-small);
  color: #fff; background: transparent;
  border: 1px solid rgba(255,255,255,.45);
}
.signup input::placeholder { color: rgba(255,255,255,.65); }
.signup input:focus { outline: 2px solid #fff; outline-offset: 2px; }
.signup button {
  padding: .85rem 1.5rem; font: inherit;
  font-size: var(--t-label); font-weight: 600;
  letter-spacing: var(--ls-nav); text-transform: uppercase;
  color: var(--red); background: #fff; border: 0; cursor: pointer;
}
.signup__msg { margin-top: .75rem; font-size: var(--t-small); color: #fff; }

/* ── The editor's view of an empty section ─────────────
   Visible only to a logged-in editor, and gone the moment
   the section has content. Deliberately plain: it is
   scaffolding, and should never be mistaken for design. */
.band--empty { opacity: .55; }
.ghost__box {
  display: block; aspect-ratio: 3 / 2;
  border: 1px dashed var(--on-ink-hair);
}
.band--paper .ghost__box { border-color: var(--on-paper-hair); }
.band__empty-note {
  margin-top: 1.25rem; font-size: .78rem; color: var(--on-ink-faint);
}
.band--paper .band__empty-note { color: var(--on-paper-faint); }
.band__empty-note code {
  font-family: ui-monospace, Menlo, monospace; font-size: .95em;
}

/* ── Section headers ───────────────────────────────────
   A heavy rule above, a light one below, the name in small
   caps. This one detail does most of the work of making a
   page read as a publication rather than a stack of boxes. */
.band__head {
  border-top: 2px solid currentColor;
  padding-top: .9rem;
  margin-bottom: var(--gap);
}
.band--ink   .band__head { border-top-color: rgba(255,255,255,.55); }
.band--paper .band__head { border-top-color: var(--on-paper-head); }
.band__title { font-size: var(--t-section); }

/* ── Rows that read as one unit ────────────────────────
   Hairlines between cards, never around them. Four items
   with rules between are a designed row; four items floating
   are four items. */
@media (min-width: 40em) {
  .layout--grid-3 > * + *,
  .layout--grid-4 > * + * { border-left: 1px solid var(--on-ink-hair); padding-left: var(--gap); }
  .band--paper .layout--grid-3 > * + *,
  .band--paper .layout--grid-4 > * + * { border-left-color: var(--on-paper-hair); }
  .layout--grid-3, .layout--grid-4 { gap: 0; }
  .layout--grid-3 > *, .layout--grid-4 > * { padding-right: var(--gap); }
  .layout--grid-3 > *:last-child, .layout--grid-4 > *:last-child { padding-right: 0; }
}

/* ── The split feature ─────────────────────────────────*/
.split { display: grid; grid-template-columns: 1fr; background: var(--ink); }
@media (min-width: 52em) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--flip .split__img { order: 2; }
}
.split__img { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.split__img img { width: 100%; height: 100%; object-fit: cover; }
.split__badge {
  position: absolute; left: 1.25rem; bottom: 1.25rem;
  display: grid; place-items: center;
  width: 3rem; height: 3rem;
  background: var(--red); color: #fff; font-size: 1rem;
}
.split__panel {
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(2.5rem, 6vw, 5rem) clamp(1.5rem, 5vw, 4.5rem);
}
.split__kicker {
  font-size: var(--t-label); font-weight: 600;
  letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--red);
  margin-bottom: .9rem;
}
.split__title {
  font-family: var(--display); font-size: var(--t-feature);
  color: var(--on-ink-head); line-height: 1.08;
}
.split__sf { margin-top: .9rem; max-width: 38ch; font-size: var(--t-small); color: var(--on-ink-body); }
.split .btn { align-self: flex-start; }

/* ── The reel ──────────────────────────────────────────
   Letterboxed in black, edge to edge. The bars are the
   point: they say film rather than website, and they are
   what an advertiser pays for on a page like this. */
.reel { background: #000; padding-block: clamp(2.5rem, 6vw, 5rem); }
.reel__stage {
  max-width: 1600px; margin-inline: auto;
  aspect-ratio: 16 / 9; background: #000; overflow: hidden;
}
.reel__video { width: 100%; height: 100%; object-fit: cover; display: block; }

.reel__words {
  max-width: var(--max); margin: clamp(1.75rem, 4vw, 2.75rem) auto 0;
  padding-inline: var(--gutter);
}
.reel__kicker {
  font-size: var(--t-label); font-weight: 600;
  letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--red);
}
.reel__name {
  font-family: var(--display); font-size: var(--t-feature);
  color: #fff; margin-top: .55rem; line-height: 1.06;
}
.reel__line { margin-top: .6rem; max-width: 46ch; font-size: var(--t-small); color: var(--on-ink-body); }
.reel__exits { display: flex; flex-wrap: wrap; gap: .75rem; }
.reel__exits .btn { margin-top: 1.5rem; }

/* A reader who has asked their system for less motion gets a still. */
@media (prefers-reduced-motion: reduce) {
  .reel__video { animation: none; }
}

/* ── The slim invitation ───────────────────────────────
   Thin on purpose. A full-screen ask is an interruption;
   a band between two sections is an invitation, and the
   reader is back in the magazine a second later. */
.promo { border-block: 1px solid var(--on-ink-hair); }
.promo--red { background: var(--red); border-color: var(--red); }
.promo__inner {
  max-width: var(--max); margin-inline: auto;
  padding: clamp(1.4rem, 3vw, 2rem) var(--gutter);
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 1rem 2.5rem;
}
.promo__kicker {
  font-size: var(--t-label); font-weight: 600;
  letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--red); margin-bottom: .35rem;
}
.promo--red .promo__kicker { color: rgba(255,255,255,.85); }
.promo__line {
  font-family: var(--display); font-size: clamp(1.2rem, 2.4vw, 1.75rem);
  line-height: 1.2; color: var(--on-ink-head); max-width: 34ch;
}
.promo--red .promo__line { color: #fff; }
.promo__btn {
  flex: none;
  padding: .8rem 1.4rem;
  font-size: var(--t-label); font-weight: 600;
  letter-spacing: var(--ls-nav); text-transform: uppercase;
  background: var(--red); color: #fff;
}
.promo--red .promo__btn { background: #fff; color: var(--red); }
.promo__btn:hover { opacity: .9; }

/* ── The inline signup ─────────────────────────────────
   Centred, one field, and the button flush against it —
   two joined shapes read as one control, so a reader who
   has typed an address does not have to find where to
   click next. */
.signband { padding-block: clamp(3.5rem, 8vw, 6rem); text-align: center; }
.signband--ink { background: var(--ink); }
.signband--red { background: var(--red); }
.signband--paper { background: var(--paper); }
.signband__inner { max-width: 52rem; margin-inline: auto; padding-inline: var(--gutter); }

.signband__eyebrow {
  font-size: var(--t-label); font-weight: 600;
  letter-spacing: var(--ls-label); text-transform: uppercase;
}
.signband--ink .signband__eyebrow { color: var(--red); }
.signband--red .signband__eyebrow { color: rgba(255,255,255,.85); }
.signband--paper .signband__eyebrow { color: var(--red-ink); }

.signband__head {
  font-family: var(--display); font-size: clamp(1.7rem, 4.4vw, 2.9rem);
  line-height: 1.1; margin-top: .6rem;
}
.signband--ink .signband__head, .signband--red .signband__head { color: #fff; }
.signband--paper .signband__head { color: var(--on-paper-head); }

.signband__line { margin-top: .9rem; font-size: var(--t-small); }
.signband--ink .signband__line { color: var(--on-ink-body); }
.signband--red .signband__line { color: rgba(255,255,255,.85); }
.signband--paper .signband__line { color: var(--on-paper-body); }

.signband__form {
  display: flex; max-width: 34rem; margin: 1.9rem auto 0;
}
.signband__form input {
  flex: 1 1 auto; min-width: 0;
  padding: 1rem 1.1rem; font: inherit; font-size: var(--t-small);
  background: #fff; color: var(--on-paper-head);
  border: 1px solid #fff;    /* no radius anywhere — Standards 5.3 */
}
.signband__form input::placeholder { color: #8A8378; }
.signband__form button {
  flex: none; padding: 1rem 1.7rem; font: inherit;
  font-size: var(--t-label); font-weight: 600;
  letter-spacing: var(--ls-nav); text-transform: uppercase;
  border: 0; cursor: pointer;
}
.signband--ink .signband__form button { background: var(--red); color: #fff; }
.signband--red .signband__form button { background: var(--ink); color: #fff; }
.signband--paper .signband__form button { background: var(--ink); color: #fff; }
.signband__form button:hover { opacity: .92; }

.signband__done { margin-top: 1.9rem; font-family: var(--display); font-size: 1.4rem; color: #fff; }
.signband--paper .signband__done { color: var(--on-paper-head); }
.signband__done--err { font-size: var(--t-small); font-family: var(--text); }

.signband__consent { margin-top: 1.1rem; font-size: .72rem; }
.signband--ink .signband__consent { color: var(--on-ink-faint); }
.signband--red .signband__consent { color: rgba(255,255,255,.8); }
.signband--paper .signband__consent { color: var(--on-paper-faint); }
.signband__consent a { text-decoration: underline; text-underline-offset: 2px; }

/* ── The feature split ─────────────────────────────────
   Words one side, picture bleeding off the other. The text
   column is centred within itself — unusual on the web, and
   most of why it reads as a page rather than a website. */
.fsplit { display: grid; grid-template-columns: 1fr; background: var(--ink); }
@media (min-width: 56em) {
  .fsplit { grid-template-columns: minmax(0, 45fr) minmax(0, 55fr); align-items: center; }
  .fsplit--flip .fsplit__img { order: -1; }
}
.fsplit__words {
  text-align: center;
  padding: clamp(3rem, 7vw, 6rem) clamp(1.5rem, 5vw, 4rem);
  max-width: 34rem; margin-inline: auto;
}
.fsplit__kicker {
  font-size: var(--t-label); font-weight: 600;
  letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--red);
}
.fsplit__title {
  font-family: var(--display); font-size: clamp(1.7rem, 3.4vw, 2.55rem);
  line-height: 1.1; color: var(--on-ink-head); margin-top: .8rem;
}
.fsplit__sf {
  margin-top: 1rem; font-size: var(--t-small); line-height: 1.6;
  color: var(--on-ink-body);
}
.fsplit__by {
  margin-top: 1.3rem; font-size: .62rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--on-ink-faint);
  line-height: 1.9;
}

/* The one rounded shape on the site — a control, never content. */
.pill {
  display: inline-flex; align-items: center; gap: .55rem;
  margin-top: 1.7rem; padding: .75rem 1.5rem;
  border: 1px solid rgba(255,255,255,.55); border-radius: 999px;
  font-size: var(--t-label); font-weight: 600;
  letter-spacing: var(--ls-nav); text-transform: uppercase; color: #fff;
  transition: background .2s ease, border-color .2s ease;
}
.pill:hover { background: var(--red); border-color: var(--red); }
.pill__glyph { font-size: .9em; line-height: 1; }

.fsplit__img { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.fsplit__img img { width: 100%; height: 100%; object-fit: cover; }
.fsplit__badge {
  position: absolute; left: 1rem; bottom: 1rem;
  display: grid; place-items: center;
  width: 2.4rem; height: 2.4rem; border-radius: 999px;
  background: rgba(255,255,255,.92); color: var(--ink); font-size: .85rem;
}

/* Read · Listen · Watch — shown together only where they exist. */
.forms { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.5rem; }
.forms .pill { margin-top: 0; }
.hero .forms { justify-content: flex-start; }

/* The interview inside the story. Sits in the white reading area, edge to
   edge of the reading column, so it reads as part of the piece rather than
   as something bolted beside it. */
.story__embed {
  max-width: var(--measure-read); margin: 0 auto;
  padding: clamp(2.5rem, 5vw, 4rem) var(--gutter) 0;
}
.story__embed iframe,
.story__embed video { width: 100%; aspect-ratio: 16 / 9; height: auto; display: block; }
.story__embed figcaption {
  margin-top: .7rem; font-size: .8rem; color: var(--on-paper-faint);
}
.story__embed-fallback a { color: var(--red-ink); text-decoration: underline; }

/* ── Footer ────────────────────────────────────────────*/
.foot { background: var(--ink); border-top: 1px solid var(--on-ink-hair); padding-block: 4rem 3rem; }
.foot__inner { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }

.foot__top { display: grid; gap: 2.5rem; }
@media (min-width: 52em) {
  .foot__top { grid-template-columns: minmax(0,2fr) minmax(0,1fr) minmax(0,1fr); gap: 3rem; }
}
.foot__mark { width: 8.5rem; height: auto; }
.foot__about { margin-top: 1.2rem; max-width: 46ch; font-size: var(--t-small); color: var(--on-ink-body); }

.social { display: flex; gap: 1.4rem; list-style: none; margin: 1.6rem 0 0; padding: 0; }
.social a { display: block; color: rgba(255,255,255,.8); }
.social a:hover { color: var(--red); }

.foot__coltitle {
  font-size: var(--t-label); font-weight: 600;
  letter-spacing: var(--ls-label); text-transform: uppercase; color: #fff;
  margin-bottom: 1rem;
}
.foot__links { list-style: none; margin: 0; padding: 0; }
.foot__links li + li { margin-top: .55rem; }
.foot__links a { font-size: var(--t-small); color: rgba(255,255,255,.75); }
.foot__links a:hover { color: var(--red); }

.foot__rule { height: 1px; background: rgba(255,255,255,.5); margin: 2.75rem 0 1.5rem; }

.foot__bottom {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 1rem 2rem;
}
.foot__legal-links { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; list-style: none; margin: 0; padding: 0; }
.foot__legal-links a { font-size: .74rem; color: rgba(255,255,255,.7); }
.foot__legal-links a:hover { color: var(--red); }
.foot__tagline {
  font-size: var(--t-label); letter-spacing: .4em;
  text-transform: uppercase; color: #fff;
}
.foot__legal { margin-top: 1.4rem; font-size: .72rem; color: var(--on-ink-faint); }

/* ── Advertising ───────────────────────────────────────
   Every placement reserves its true size before the creative
   arrives, so the page never jumps — and an advertiser sees
   exactly the space they bought. */
.ad__label {
  font-size: var(--t-label); letter-spacing: var(--ls-label);
  text-transform: uppercase; color: var(--on-ink-faint);
  margin-bottom: .55rem; text-align: center;
}
.band--paper .ad__label { color: var(--on-paper-faint); }
.ad__unit {
  width: 100%; max-width: var(--ad-w);
  aspect-ratio: var(--ad-w) / var(--ad-h);
  margin-inline: auto; overflow: hidden;
}
.ad__unit img, .ad__unit iframe { width: 100%; height: 100%; object-fit: cover; display: block; }
.ad--sticky { position: sticky; top: 5rem; }
.adband { padding-block: clamp(2rem, 4vw, 3.5rem); background: var(--ink); }
.ad__slide[hidden] { display: none; }

/* ── An unsold space, offered rather than apologised for ─
   No box, no colour, no shout. A hairline, three lines of
   type at three weights, and a link. It should read like the
   media kit sounds — which is the only register in which
   "this is for sale" does not sound like "nobody bought it". */
.ad__available {
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  gap: .45rem; text-align: center;
  width: 100%; max-width: var(--ad-w);
  aspect-ratio: var(--ad-w) / var(--ad-h);
  margin-inline: auto; padding: 1.25rem;
  border: 1px solid var(--on-ink-hair);
  transition: border-color .25s ease;
}
.ad__available:hover { border-color: var(--red); }
.band--paper .ad__available { border-color: var(--on-paper-hair); }

.ad__available-line {
  font-family: var(--display); font-size: clamp(1rem, 1.6vw, 1.35rem);
  line-height: 1.15; color: var(--on-ink-head);
}
.band--paper .ad__available-line { color: var(--on-paper-head); }

.ad__available-size {
  font-size: .62rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--on-ink-faint);
}
.band--paper .ad__available-size { color: var(--on-paper-faint); }

.ad__available-cta {
  margin-top: .35rem;
  font-size: var(--t-label); font-weight: 600;
  letter-spacing: var(--ls-nav); text-transform: uppercase; color: var(--red);
}

.foot__publisher {
  margin-top: .9rem; font-size: .78rem;
  letter-spacing: .02em; color: var(--on-ink-faint);
}

/* ─────────────────────────────────────────────────────────────
 * Horizontal rails.
 *
 * The theme had no sideways movement at all — every band was a grid, which is
 * how a homepage of eighteen sections becomes a page nobody reaches the end
 * of. A rail lets five stories cost the vertical space of one.
 *
 * Native scrolling, not a carousel library: the momentum, the rubber-band and
 * the way a flick decelerates come from the operating system, and nothing
 * scripted matches them on a phone.
 *
 * A card is never the full width. The remainder is the next card showing at
 * the edge, which is the only honest way to say the row moves.
 * ───────────────────────────────────────────────────────────── */
.rail {
  display: flex;
  gap: var(--gap, 1rem);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-inline: var(--pad-side, 1.25rem);
  scroll-padding-inline-start: var(--pad-side, 1.25rem);
  scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }
.rail > * { flex: 0 0 var(--card, 80%); scroll-snap-align: start; }
/* Room past the last card so it can snap to the left edge like the others. */
.rail::after {
  content: "";
  flex: 0 0 max(0px, calc(100% - var(--card, 80%) - var(--pad-side, 1.25rem)));
}

/* Card widths, tuned per band. Never 100%, or the rail reads as one image. */
.rail--lead    { --card: 58%; }
.rail--video   { --card: 78%; }
.rail--gallery { --card: 62%; }
.rail--archive { --card: 38%; }

/*
 * On a wide screen a rail becomes a row that happens to overflow. The
 * editorial hierarchy is unchanged; only the composition adapts.
 */
@media (min-width: 60em) {
  .rail { --pad-side: 0; gap: var(--gap); overflow-x: visible; scroll-snap-type: none; }
  .rail::after { display: none; }
  .rail--lead    > * { flex-basis: calc((100% - var(--gap) * 2) / 3); }
  .rail--video   > * { flex-basis: calc((100% - var(--gap) * 2) / 3); }
  .rail--gallery > * { flex-basis: calc((100% - var(--gap) * 5) / 6); }
  .rail--archive > * { flex-basis: calc((100% - var(--gap) * 7) / 8); }
}

/*
 * Image left, text right — a fast-scanning list, not a carousel.
 * It arrives after several image-led bands, and the change of pace is the
 * reason a reader is still reading by then.
 */
.compact { display: flex; gap: 1rem; align-items: flex-start; }
.compact + .compact { border-top: 1px solid var(--on-ink-hair); padding-top: 1rem; margin-top: 1rem; }
.band--paper .compact + .compact { border-top-color: var(--on-paper-hair); }
.compact__img { flex: 0 0 5.5rem; aspect-ratio: 1; overflow: hidden; }
.compact__img img { width: 100%; height: 100%; object-fit: cover; }

/* An artwork trimmed to fit a grid is an artwork misrepresented. */
.card--gallery .card__img { aspect-ratio: 4 / 5; background: rgba(255,255,255,.04); }
.card--gallery .card__img img { object-fit: contain; }

/* A film: its own poster, a play mark, and the credit under the title. */
.film { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #000; }
.film img { width: 100%; height: 100%; object-fit: cover; }
.film__play {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(0,0,0,.2);
}
.film__play span {
  width: 3.25rem; height: 3.25rem; border-radius: 50%;
  background: rgba(0,0,0,.55); display: grid; place-items: center;
}
.film__meta { font-size: .72rem; letter-spacing: .04em; color: var(--on-ink-body); margin-top: .5rem; }

/* Open calls are read, not looked at. */
.call + .call { border-top: 1px solid var(--on-ink-hair); padding-top: 1rem; margin-top: 1rem; }

/* ── The bands the new sequence added ─────────────────────── */

/* A story lifted out and set large, above the rest. */
.band__lead { margin-bottom: calc(var(--gap) * 1.5); }
.stack > * + * { margin-top: var(--gap); }

.card__kicker {
  font-size: .68rem; letter-spacing: .2em; text-transform: uppercase;
  font-weight: 600; color: var(--red); margin-bottom: .4rem;
}
.card__credit { font-size: .74rem; color: var(--on-ink-faint); margin-top: .35rem; }
.band--paper .card__credit { color: var(--on-paper-faint); }

/* One story taking most of a screen — the pause after a rail. */
.card--major .card__major-link { position: relative; display: block; }
.card__img--major { display: block; position: relative; aspect-ratio: 3 / 4; overflow: hidden; }
@media (min-width: 48em) { .card__img--major { aspect-ratio: 21 / 9; } }
.card__img--major img { width: 100%; height: 100%; object-fit: cover; }
.card__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.92), rgba(0,0,0,.25) 45%, transparent);
}
.card__over {
  position: absolute; inset-inline: 0; bottom: 0; display: block;
  padding: clamp(1rem, 4vw, 2rem);
}
.card__over .card__title--major { display: block; color: #fff; }
.card__over .card__blurb { color: rgba(255,255,255,.78); max-width: 34rem; }

/* The invitation. Interrupts the page rather than resembling another card. */
.band--tip .band__kicker {
  font-size: .68rem; letter-spacing: .22em; text-transform: uppercase;
  font-weight: 600; color: var(--red);
}
.band--tip { border-block: 1px solid var(--on-ink-hair); }
.tip { display: flex; flex-direction: column; gap: .65rem; max-width: 30rem; margin-top: 1.5rem; }
.tip textarea, .tip input[type="text"], .tip input[type="email"] {
  background: transparent; border: 1px solid var(--on-ink-hair);
  color: var(--on-ink-head); padding: .8rem .9rem; font: inherit; font-size: .95rem;
}
.tip textarea:focus, .tip input:focus { outline: none; border-color: var(--red); }
.tip button {
  align-self: flex-start; background: var(--red); color: #fff; border: 0;
  padding: .8rem 1.4rem; font-size: .68rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; cursor: pointer;
}
.tip__trap { position: absolute; left: -9999px; }
.tip__thanks { margin-top: 1.25rem; color: var(--on-ink-body); max-width: 34rem; }

/* Listen: square artwork beside the words. Warmer and closer than Watch. */
.episode { border: 1px solid var(--on-ink-hair); }
.episode__link { display: flex; gap: 1rem; padding: 1rem; }
.episode__art { flex: 0 0 7rem; aspect-ratio: 1; overflow: hidden; }
.episode__art img { width: 100%; height: 100%; object-fit: cover; }
.episode__body { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.episode__play {
  margin-top: .6rem; font-size: .68rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--on-ink-head);
}

.film__video { width: 100%; height: 100%; display: block; background: #000; }
.film__fallback { padding: 1rem; color: rgba(255,255,255,.8); font-size: .88rem; text-align: center; }
.film__play { border: 0; background: none; cursor: pointer; width: 100%; }

/* ── The launch page ───────────────────────────────────
   The front door until the first issue. One screen, then
   the newest stories on paper. The ✕ is the brand, so it is
   the only decoration the page gets. */
.launch {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: 100vh; min-height: 100svh;
  display: flex; background: var(--ink);
}
.launch__mark {
  position: absolute; z-index: -1; pointer-events: none;
  right: -12vw; top: 50%;
  width: clamp(24rem, 56vw, 62rem); height: auto;
  transform: translateY(-50%) rotate(8deg);
  opacity: .18;
}
.launch__inner {
  display: flex; flex-direction: column; justify-content: space-between;
  gap: clamp(2.5rem, 7vh, 5rem);
  width: 100%; max-width: var(--max); margin-inline: auto;
  padding: 2.25rem var(--gutter) 2.75rem;
}
.launch__masthead { display: block; width: min(64vw, 22rem); }
.launch__masthead img { width: 100%; height: auto; }
.launch__words { max-width: 46rem; }
.launch__eyebrow {
  display: inline-block; background: var(--red); color: var(--on-ink-head);
  padding: .6rem 1.1rem; margin-bottom: 1.6rem;
  font-size: var(--t-label); font-weight: 600; letter-spacing: .3em; text-transform: uppercase;
}
.launch__title {
  font-size: clamp(3.6rem, 10vw, 7.5rem); line-height: var(--lh-tight);
  color: var(--on-ink-head);
}
.launch__line {
  margin-top: 1.4rem; max-width: 40rem;
  font-size: var(--t-lede); line-height: var(--lh-body); color: var(--on-ink-body);
}
.launch__ask { max-width: 34rem; }
.launch__ask-head {
  font-family: var(--display); font-size: var(--t-headline);
  color: var(--on-ink-head); margin-bottom: 1.1rem;
}
.launch__form { margin: 0; }
.launch__form button { background: var(--red); color: var(--on-ink-head); }
.launch__done { font-family: var(--display); font-size: 1.4rem; color: var(--on-ink-head); }
.launch__done--err { margin-top: .8rem; font-family: var(--text); font-size: var(--t-small); color: var(--on-ink-body); }
.launch__consent { margin-top: 1rem; max-width: 40rem; font-size: .78rem; color: var(--on-ink-faint); }
.launch__consent a { color: var(--on-ink-body); border-bottom: 1px solid var(--on-ink-hair); }
.launch__tag {
  font-size: var(--t-label); font-weight: 600;
  letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--red);
}
@media (max-width: 45em) {
  .launch__mark { right: -34vw; top: 34%; width: 30rem; opacity: .14; }
  .launch__title { font-size: clamp(3rem, 15vw, 4.6rem); }
}