/* FRD Journal
   Every measurement below is the Figma number multiplied by --u.
   --u is "one Figma pixel" at the current window size, so spacing, cards and
   gaps all grow and shrink together, keeping the proportions of the design. */

:root {
  --frame: 1440;
  --u: calc(100vw / var(--frame));
  --t: max(0.85px, var(--u)); /* same as --u, but text stops shrinking at 85% */
  --min-reading: 15px; /* long reading text never goes smaller than this */

  --serif: "Times New Roman", Times, serif;
  --sans: "DM Sans", "Helvetica Neue", Arial, sans-serif;
  --black: #000;
  --white: #fff;
  --placeholder: #d9d9d9;

  /* Logo: where it starts (big) and how it moves to the small position */
  --logo-left: 29;
  --logo-top: 26;
  --logo-width: 1381;
  --logo-end-scale: 0.1593; /* small logo 220 wide: 220 / 1381 */
  --logo-move-x: 581; /* centred: (1440 - 220) / 2 - 29 */
  --logo-move-y: 15; /* keeps it level with the menu */
  --bar-start: 300;
  --bar-end: 140;
  --range: 418; /* scroll distance for the shrink (used where --range-anchor is not set) */
  --range-anchor: 200; /* the logo finishes shrinking when the issue heading reaches this height */

  --p: 0; /* animation progress: 0 = big logo, 1 = small logo */

  /* Grid: 5 cards, each 220 wide with a 75 gap, on a 1400 wide row */
  --columns: 5;
  --card: 15.7143%;
  --gap: 5.3571%;
  --row-gap: 88;

  /* Type sizes */
  --fs-label: 12;
  --fs-body: 18;
  --fs-card: 20;
  --fs-nav: 16;
  --fs-issue: 20;
  --fs-theme: 32;
  --fs-title: 48;
  --fs-author: 20;
  --fs-quote: 28;
  --fs-article: 16;
  --fs-note: 12;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { overflow-x: clip; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--white);
  color: var(--black);
  font-family: var(--serif);
  font-size: calc(var(--fs-body) * var(--t));
  line-height: 1.2;
  font-variation-settings: "opsz" 14; /* DM Sans optical size used in Figma */
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, ul, dl, dd { margin: 0; padding: 0; font-weight: 400; }
ul { list-style: none; }
img { display: block; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 0.15em; }
a:focus-visible { outline: 2px solid var(--black); outline-offset: 2px; }

.label {
  font-family: var(--sans);
  font-size: max(11px, calc(var(--fs-label) * var(--t)));
  font-weight: 600;
  line-height: 1.3333;
  text-transform: uppercase;
}

/* ---------- Header ---------- */

.header-bar {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 10;
  height: calc(var(--bar-start) * var(--u));
  /* Shrinks by scaling rather than changing its height, so phones can animate it smoothly. */
  transform-origin: top;
  transform: scaleY(calc((var(--bar-start) + (var(--bar-end) - var(--bar-start)) * var(--p)) / var(--bar-start)));
  will-change: transform;
  background: var(--white);
  pointer-events: none;
}

.site-logo {
  position: absolute;
  z-index: 12;
  top: calc(var(--logo-top) * var(--u));
  left: calc(var(--logo-left) * var(--u));
  width: calc(var(--logo-width) * var(--u));
  transform-origin: top left;
  transform:
    translate(calc(var(--logo-move-x) * var(--p) * var(--u)), calc(var(--logo-move-y) * var(--p) * var(--u)))
    scale(calc(1 + (var(--logo-end-scale) - 1) * var(--p)));
  will-change: transform;
}

.site-logo img { width: 100%; height: auto; }

.site-nav {
  position: fixed;
  z-index: 13;
  inset: 0 0 auto 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: calc(49 * var(--u)) calc(20 * var(--u)) 0;
  font-family: var(--sans);
  font-size: max(14px, calc(var(--fs-nav) * var(--t)));
  line-height: 1.25;
  opacity: var(--p);
  visibility: hidden;
  pointer-events: none;
}

.site-nav a { pointer-events: auto; }
.site-nav li + li { margin-top: calc(2 * var(--u)); }

.site-nav__actions { display: flex; gap: calc(28 * var(--u)); }
.site-nav .site-nav__actions li + li { margin-top: 0; }

/* Menu button: phones only (see the phone section). */
.site-nav__menu-button { display: none; }

/* Signed in: the reader's initial in a circle, in place of "Sign In". */
.site-nav__account { position: relative; }
.account-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.2em;
  height: 2.2em;
  margin: -0.45em 0; /* sits on the menu line without pushing it down */
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--black);
  color: var(--white);
  font: 500 0.8em/1 var(--sans);
  letter-spacing: 0;
  cursor: pointer;
  pointer-events: auto;
}
.account-button:hover { background: #333; }
.account-button:focus-visible { outline: 2px solid var(--black); outline-offset: 2px; }

.account-menu {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  min-width: 220px;
  padding: 16px 18px;
  border: 1px solid var(--black);
  background: var(--white);
  text-align: left;
  pointer-events: auto;
}
.account-menu[hidden] { display: none; }
.account-menu__email { color: #6b6b6b; font-size: 0.85em; overflow-wrap: anywhere; }
.account-menu a,
.account-menu button { padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.account-menu a:hover,
.account-menu button:hover { text-decoration: underline; text-underline-offset: 0.15em; }

.is-scrolled .site-nav { visibility: visible; }

/* Fixed in place once the scroll script is running */
.js .header-bar,
.js .site-logo { position: fixed; }

/* Article pages keep the small logo from the start */
.compact {
  --p: 1;
}

.compact .header-bar,
.compact .site-logo { position: fixed; }
.compact .site-nav { visibility: visible; }

/* ---------- Homepage ---------- */

.intro {
  width: calc(649 * var(--u));
  margin: 0 auto;
  /* 96 below the intro text, the same gap as the Figma (it grew when the text got smaller) */
  padding: calc(319 * var(--u)) 0 calc(96 * var(--u));
  box-sizing: content-box;
  text-align: center;
}

.intro p + p { margin-top: 1.2em; }
.intro p {
  font-weight: 500;
  font-size: calc(var(--fs-body) * var(--t));
  line-height: 1.2;
}


.issue-heading {
  scroll-margin-top: calc(200 * var(--u));
  margin-bottom: calc(88 * var(--u)); /* heading is 24 shorter, so cards stay where they were */
  font-family: var(--sans);
  font-weight: 500;
  text-align: center;
}

.issue-heading p,
.issue-heading h1 { line-height: calc(44 * var(--t)); }
.issue-heading p { font-size: calc(var(--fs-issue) * var(--t)); }
.issue-heading h1 { font-size: calc(var(--fs-theme) * var(--t)); font-weight: 500; }

/* ---------- Article cards ---------- */

.card-grid {
  display: grid;
  grid-template-columns: repeat(var(--columns), var(--card));
  justify-content: space-between;
  row-gap: calc(var(--row-gap) * var(--u));
  column-gap: var(--gap);
  padding: 0 calc(20 * var(--u));
}

.card { display: block; text-align: center; }
a.card:hover { text-decoration: none; }
a.card:hover .card__title { text-decoration: underline; text-underline-offset: 0.15em; }

.card__image {
  aspect-ratio: 220 / 264;
  background: var(--placeholder);
}

.card__image img { width: 100%; height: 100%; object-fit: cover; }

.card__author { margin-top: calc(15 * var(--u)); }

.card__title {
  margin-top: calc(9 * var(--u));
  font-size: calc(var(--fs-card) * var(--t));
  line-height: 1.1;
  /* Even line lengths, so a title never ends with one lonely word. */
  text-wrap: balance;
}

/* Words that must stay on one line together: hyphenated words ("Low-Tech")
   and short phrases ("Play It"), so titles only break between whole phrases. */
.nowrap { white-space: nowrap; }

/* ---------- Colophon ---------- */

.rule {
  width: calc(1245 * var(--u));
  height: 1px;
  margin: calc(196 * var(--u)) auto 0;
  border: 0;
  background: var(--black);
}

.colophon {
  scroll-margin-top: calc(160 * var(--u));
  display: grid;
  grid-template-columns: calc(357 * var(--u)) calc(508 * var(--u));
  padding: calc(79 * var(--u)) 0 0 calc(374 * var(--u));
}

.credit + .credit { margin-top: calc(34 * var(--u)); }
.credit dd { margin-top: calc(5 * var(--u)); line-height: calc(22 * var(--t)); }
.colophon__contributors dd { line-height: 1.2; }

/* ---------- Footer ---------- */

.site-footer {
  display: grid;
  grid-template-columns: calc(709 * var(--u)) calc(353 * var(--u)) 1fr;
  margin-top: calc(233 * var(--u));
  padding: 0 calc(20 * var(--u)) calc(20 * var(--u));
}

.footer-brand__logo { width: calc(338 * var(--u)); margin-left: var(--u); }
.footer-brand__logo img { width: 100%; height: auto; }

.footer-brand__by {
  display: flex;
  align-items: flex-start;
  margin: calc(10 * var(--u)) 0 0 calc(103 * var(--u));
  font-family: Arial, sans-serif;
  font-size: calc(15 * var(--t));
  line-height: 1;
}

.footer-brand__by > span:first-child { width: calc(16 * var(--u)); margin-top: calc(-2 * var(--u)); }

.frd-lockup {
  position: relative;
  display: block;
  width: calc(220 * var(--u));
  height: calc(59 * var(--u));
  margin-top: calc(4 * var(--u));
}

.frd-lockup img { position: absolute; }
.frd-lockup__mark { top: 0; left: 0; width: 39.74%; height: 100%; }
.frd-lockup__word { top: 27.56%; left: 45.58%; width: 54.42%; height: 44.89%; }

.footer-group + .footer-group { margin-top: calc(21 * var(--u)); }
.footer-group ul { margin-top: calc(5 * var(--u)); }
.footer-group li { line-height: calc(22 * var(--t)); }

.copyright {
  grid-column: 1 / -1;
  margin-top: calc(33 * var(--u));
}

/* ---------- Article page ---------- */

.article-head {
  padding-top: calc(134 * var(--u)); /* "Issue no.1 : …" lines up with the issue page heading, just below the header bar */
  text-align: center;
}

.article-head__issue {
  font-family: var(--sans);
  font-size: calc(var(--fs-issue) * var(--t));
  font-weight: 500;
  line-height: calc(56 * var(--t));
}

.article-head h1 {
  width: max(calc(640 * var(--u)), 13.4em); /* room for the title at its minimum size */
  margin: calc(16 * var(--u)) auto 0;
  font-size: calc(var(--fs-title) * var(--t));
  line-height: 1;
}

.article-head__author {
  margin-top: calc(36 * var(--u));
  font-family: var(--sans);
  font-size: calc(var(--fs-author) * var(--t));
  font-weight: 600;
  line-height: calc(16 * var(--t));
  text-transform: uppercase;
}

.article-head__quote {
  width: calc(530 * var(--u));
  margin: calc(80 * var(--u)) auto 0;
  font-family: var(--serif);
  font-size: calc(var(--fs-quote) * var(--t));
  line-height: calc(44 / 32);
  text-align: center;
  text-transform: uppercase;
}

.article-body {
  position: relative;
  /* About 65–70 characters a line, like Emergence Magazine's essay column. The width is set in
     letters (em), so it follows the text size. Reading text stops growing at 19 (reached on screens
     about 1700 wide), so on big screens the column stays a calm, book-like width instead of growing. */
  --reading-max: 19px;
  width: 34em;
  margin: calc(104 * var(--u)) auto 0;
  font-family: var(--sans);
  font-size: clamp(var(--min-reading), calc(var(--fs-article) * var(--t)), var(--reading-max));
  line-height: 1.5;
}

/* One line of space between paragraphs (long articles read better than with the Figma's 62) */
.article-body > p + p,
.article-body > .side-note + p { margin-top: 1.5em; } /* a side note between two paragraphs keeps the gap */

/* Numbered chapter headings ("1. Why do we need…") */
/* Left aligned and only a little larger than the body text, so it doesn't compete with the opening quote */
.article-chapter {
  margin: calc(96 * var(--u)) 0 calc(24 * var(--u));
  font-family: var(--serif);
  font-size: min(calc(24 * var(--t)), 28px); /* stops growing with the reading text */
  line-height: 1.3;
}

.article-body > .article-chapter:first-child { margin-top: 0; }
.article-chapter__no { margin-right: 0.35em; }

/* Lead-in line before a quote */
.article-intro { font-size: calc(18 * var(--t)); }

/* Large serif quote inside the text */
.article-pullquote {
  margin: calc(32 * var(--u)) 0 calc(56 * var(--u));
  font-family: var(--serif);
  font-size: calc(var(--fs-quote) * var(--t));
  line-height: 1.25;
}

.article-body > .article-pullquote + p,
.article-body > p + .article-pullquote { margin-top: calc(48 * var(--u)); }

/* Block quote: part of the reading (e.g. a question that finishes the sentence before it), so it stays
   in the text column: serif, a little larger, indented with a thin line. Pull quotes (repeats) go wide instead. */
.article-blockquote {
  margin: calc(24 * var(--u)) 0 calc(32 * var(--u));
  padding-left: calc(24 * var(--u));
  border-left: 1px solid var(--black);
  font-family: var(--serif);
  font-size: min(calc(22 * var(--t)), 26px);
  line-height: 1.3;
}
.article-blockquote p { margin: 0; }

/* Desktop: the pull quote breaks out of the text column, wide and centred, like Emergence Magazine.
   About 8 grid columns wide, with generous space above and below; it stops growing on very big screens. */
@media (min-width: 1000px) {
  .article-body > .article-pullquote,
  .article-body > p + .article-pullquote {
    --quote-width: min(calc(928 * var(--u)), 1280px);
    width: var(--quote-width);
    margin: calc(120 * var(--u)) calc(50% - var(--quote-width) / 2);
    font-size: min(calc(var(--fs-quote) * var(--t)), 42px);
    line-height: 1.2;
    text-align: center;
    text-wrap: balance;
  }
  .article-body > .article-pullquote + p { margin-top: calc(120 * var(--u)); }
}

/* Images inside the article: centred, never wider than the text column.
   Tall images stop at most of the screen height so they never fill the whole view. */
.article-figure {
  margin: calc(56 * var(--u)) 0;
  text-align: center;
}

.article-figure img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 80vh;
  margin: 0 auto;
}

.article-figure figcaption > span { display: block; } /* one line per item, e.g. A / B / C */

.article-figure figcaption {
  display: block;
  margin-top: calc(12 * var(--u));
  font-size: max(11px, calc(12 * var(--t)));
  line-height: 1.4;
  color: #555;
}

.article-figure figcaption strong,
.side-note strong { font-weight: 600; color: var(--black); }

/* The small mark in the text that a side note refers to */
.note-ref { font-size: 0.7em; line-height: 0; vertical-align: super; }

/* Side notes: in the text flow by default (tablets, phones, or before the script runs);
   on desktop js/article-notes.js lifts them into the margins beside their line. */
.side-note {
  display: block;
  margin: calc(32 * var(--u)) 0;
  font-size: clamp(11px, calc(var(--fs-note) * var(--t)), 14px); /* grows with the column text, then stops */
  line-height: 1.3;
}

.notes-placed .side-note {
  --note-width: min(calc(220 * var(--u)), 260px); /* stops growing on big screens, like the column text */
  position: absolute;
  width: var(--note-width);
  margin: 0;
}

.notes-placed .side-note--left { left: calc(-1 * (var(--note-width) + 16 * var(--u))); }
.notes-placed .side-note--right { left: calc(100% + 16 * var(--u)); }

/* Image at the top of a side note: always the full width of the side-note column */
.side-note__image {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: calc(10 * var(--u));
  background: var(--placeholder);
}

.article-rule {
  width: calc(1164 * var(--u));
  height: 1px;
  margin: calc(58 * var(--u)) auto 0;
  border: 0;
  background: var(--black);
}

.author-bio {
  display: grid;
  grid-template-columns: calc(100 * var(--u)) calc(456 * var(--u)) calc(456 * var(--u));
  column-gap: calc(16 * var(--u));
  padding: calc(64 * var(--u)) 0 0 calc(140 * var(--u));
  font-family: var(--sans);
  font-size: clamp(var(--min-reading), calc(var(--fs-article) * var(--t)), 19px);
  line-height: 1.375;
}

.author-bio__photo {
  width: calc(100 * var(--u));
  height: calc(100 * var(--u));
  border-radius: 50%;
  background: var(--placeholder);
  object-fit: cover;
}

/* References sit to the right of the profile, in the side-note size. */
.author-bio__refs .label { margin-bottom: calc(12 * var(--u)); }
.author-bio__refs ol {
  margin: 0;
  padding-left: 1.5em;
  font-size: clamp(11px, calc(var(--fs-note) * var(--t)), 14px);
  line-height: 1.3;
}
.author-bio__refs li + li { margin-top: 0.75em; }

.read-more__heading {
  margin: calc(224 * var(--u)) 0 calc(60 * var(--u));
  font-family: var(--sans);
  font-size: calc(var(--fs-issue) * var(--t));
  font-weight: 600;
  line-height: 1;
  text-align: center;
}

.compact .site-footer { margin-top: calc(160 * var(--u)); }

/* ---------- About page ---------- */

.about-statement {
  max-width: calc(1060 * var(--u));
  margin: 0 auto;
  padding: calc(272 * var(--u)) 0 calc(136 * var(--u));
  font-size: calc(var(--fs-title) * var(--t));
  line-height: 1.05;
  text-align: center;
  text-wrap: balance;
}

.colophon--about { padding-top: 0; }
.colophon--about dd p + p { margin-top: 1.2em; }
.about .site-footer { margin-top: calc(120 * var(--u)); }

/* ---------- Issue page ---------- */

.issue-head {
  position: relative;
  padding-top: calc(140 * var(--u)); /* "Issue no.1" sits just below the white header bar */
}

.issue-head .issue-heading { margin-bottom: 0; scroll-margin-top: 0; }

.issue-head .issue-head__buy {
  display: flex;
  width: calc(220 * var(--t));
  margin: calc(24 * var(--u)) auto 0;
}

.issue-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: calc(57 * var(--t));
  padding: 0 calc(20 * var(--t));
  border: 1px solid var(--black);
  font-family: var(--sans);
  font-size: calc(14 * var(--t));
  font-weight: 500;
  line-height: 1.2;
}

.issue-button:hover { text-decoration: none; opacity: 0.8; }
.issue-button--dark { background: var(--black); color: var(--white); }
.issue-button--outline { background: var(--white); color: var(--black); }

/* Closed state: the cover */
.issue-deck { display: none; }

.issue-deck__cover {
  position: relative;
  display: block;
  /* 340 wide like the design, but smaller on short screens so the caption always fits above the fold:
     screen height minus everything above the cover, the caption and a little breathing room, turned into a width */
  width: clamp(200px, calc((100svh - 310 * var(--u) - 38 * var(--u) - 70 * var(--t) - 24px) * 220 / 264), calc(340 * var(--u)));
  margin: calc(82 * var(--u)) auto 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  isolation: isolate;
}

.issue-deck__cover:disabled { cursor: default; }
.issue-deck__cover:focus-visible { outline: 2px solid var(--black); outline-offset: 4px; }

.issue-deck__image {
  position: relative;
  display: block;
  aspect-ratio: 220 / 264;
  background: var(--placeholder);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  transition: transform 0.45s cubic-bezier(0.34, 1.4, 0.64, 1), box-shadow 0.45s ease;
}

/* The articles hiding behind the cover. On hover they peek out, fanned like a hand of cards. */
.issue-deck__peek {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #e4e4e4 center / cover no-repeat; /* article image set in issue.html; grey until it loads */
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  transition: transform 0.5s cubic-bezier(0.34, 1.4, 0.64, 1);
}

.issue-deck__peek--2 { background-color: #cfcfcf; }
.issue-deck__peek--3 { background-color: #ebebeb; }

.issue-deck__cover:hover .issue-deck__image,
.issue-deck__cover:focus-visible .issue-deck__image {
  transform: translateY(-6px);
  box-shadow: 0 22px 44px rgba(0, 0, 0, 0.12);
}

.issue-deck__cover:hover .issue-deck__peek--1,
.issue-deck__cover:focus-visible .issue-deck__peek--1 { transform: translate(-14%, -6%) rotate(-9deg); }
.issue-deck__cover:hover .issue-deck__peek--2,
.issue-deck__cover:focus-visible .issue-deck__peek--2 { transform: translate(0, -11%) rotate(1.5deg); transition-delay: 0.04s; }
.issue-deck__cover:hover .issue-deck__peek--3,
.issue-deck__cover:focus-visible .issue-deck__peek--3 { transform: translate(14%, -5%) rotate(8deg); transition-delay: 0.08s; }

/* Once the deal starts, the peeking cards tuck back in behind the cover. */
.issue-deck__cover:disabled .issue-deck__peek { transform: none; transition-duration: 0.2s; transition-delay: 0s; }

@media (prefers-reduced-motion: reduce) {
  .issue-deck__image,
  .issue-deck__peek { transition: none; }
}

.issue-deck__ghost {
  position: absolute;
  z-index: 6;
  margin: 0;
  pointer-events: none;
}

.issue-deck__caption {
  max-width: calc(410 * var(--u));
  margin: calc(38 * var(--u)) auto 0;
  font-size: calc(var(--fs-card) * var(--t));
  line-height: 1.15;
  text-align: center;
  text-wrap: balance;
}

/* Open state: the dealt cards and everything after them */
.issue-contents { outline: none; }
.issue-contents .card-grid { margin-top: calc(82 * var(--u)); }

.js .issue-page:not(.is-open) .issue-deck { display: block; }
.js .issue-page:not(.is-open) .issue-contents,
.js .issue-page:not(.is-open) .issue-head__buy { display: none; }

.colophon--issue { padding-top: calc(150 * var(--u)); }
.issue-rule { margin-top: calc(104 * var(--u)); }

.issue-buy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(39 * var(--u));
  margin-top: calc(83 * var(--u));
}

.issue-buy .issue-button { width: calc(271 * var(--t)); min-height: calc(56 * var(--t)); }

.issue-next {
  display: grid;
  grid-template-columns: calc(195 * var(--u)) calc(508 * var(--u));
  column-gap: calc(80 * var(--u));
  align-items: center;
  margin-top: calc(97 * var(--u));
  padding-left: calc(456 * var(--u));
}

.issue-next__cover { aspect-ratio: 220 / 264; background: var(--placeholder); }

.issue-next__title {
  margin-top: calc(8 * var(--u));
  font-size: calc(var(--fs-card) * var(--t));
  line-height: 1.2;
}

.issue-next__text { margin-top: calc(12 * var(--u)); }

.issue-body .site-footer { margin-top: calc(180 * var(--u)); }

/* ---------- Paywalled article ---------- */

.paywalled {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.paywalled main { flex: 1 0 auto; }
.paywalled .article-body { margin-bottom: calc(60 * var(--u)); }
[hidden] { display: none !important; }

.paywall {
  position: sticky;
  bottom: 0;
  z-index: 5;
  padding: calc(35 * var(--u)) calc(138 * var(--u)) calc(65 * var(--u));
  background: #242424;
  color: var(--white);
}

/* With the script running, the bar is fixed to the bottom and slides up after the first paragraph */
.paywall-js .paywall {
  position: fixed;
  left: 0;
  right: 0;
  transition: transform 0.45s ease, visibility 0s;
}

.paywall-waiting .paywall,
.paywall-closed .paywall {
  transform: translateY(100%);
  visibility: hidden;
  transition: transform 0.45s ease, visibility 0s 0.45s;
}

/* Close button on the bar at the end of today's free article */
.paywall__close {
  position: absolute;
  top: calc(16 * var(--u));
  right: calc(20 * var(--u));
  padding: 4px 8px;
  border: 0;
  background: none;
  color: var(--white);
  font-family: var(--sans);
  font-size: max(20px, calc(24 * var(--t)));
  line-height: 1;
  cursor: pointer;
}
.paywall__close:focus-visible { outline: 2px solid var(--white); }

@media (prefers-reduced-motion: reduce) {
  .paywall-js .paywall,
  .paywall-waiting .paywall { transition: none; }
}

.paywall__title {
  font-size: calc(32 * var(--t));
  line-height: 1.25;
  text-transform: capitalize;
}

.paywall__text {
  margin-top: calc(8 * var(--u));
  font-family: var(--sans);
  font-size: calc(16 * var(--t));
  line-height: 1.25;
}

.paywall__actions {
  display: flex;
  flex-wrap: wrap;
  gap: calc(19 * var(--u));
  margin-top: calc(36 * var(--u));
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: calc(59 * var(--t));
  padding: 0 calc(27 * var(--t));
  border: 1px solid #d9d9d9;
  font-family: var(--sans);
  font-size: calc(16 * var(--t));
  font-weight: 600;
  line-height: 1.25;
}

.paywall__signin {
  align-self: center;
  margin-left: calc(8 * var(--u));
  font-family: var(--sans);
  font-size: calc(16 * var(--t));
  line-height: 1.25;
}

.paywall__signin a,
.paywall__back {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.paywall__back {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.paywall__back:focus-visible,
.paywall__signin a:focus-visible { outline-color: var(--white); }

button.button { cursor: pointer; background: none; }
button.button--solid { background: #d9d9d9; }

.button:hover { text-decoration: none; opacity: 0.8; }
.button:focus-visible { outline-color: var(--white); }
.button--solid { background: #d9d9d9; color: var(--black); text-transform: capitalize; }
.button--outline { color: #d9d9d9; }

/* ---------- Sign-in panel ---------- */

.signin {
  width: min(calc(397 * var(--t)), calc(100vw - 32px));
  max-width: none;
  max-height: calc(100dvh - 32px);
  padding: 0;
  border: 0;
  background: var(--white);
  color: #0a0a0a;
}

.signin::backdrop { background: rgb(65 65 65 / 0.7); }

.signin__form {
  display: flex;
  flex-direction: column;
  padding: calc(57 * var(--t)) calc(24 * var(--t)) calc(23 * var(--t));
  font-size: calc(14 * var(--t));
  line-height: calc(16 / 14);
  letter-spacing: 0.02em;
}

.signin__logo {
  align-self: center;
  width: calc(180 * var(--t)); /* was 259; smaller so the panel's heading leads (owner's request) */
  max-width: 100%;
  height: auto;
}

.signin__title {
  margin-top: calc(21 * var(--t));
  font-size: calc(32 * var(--t));
  line-height: 1.25;
  text-align: center;
}

.signin__intro {
  margin-top: calc(12 * var(--t));
  font-family: var(--sans);
  font-size: calc(16 * var(--t));
  line-height: 1.25;
  text-align: center;
  text-wrap: balance;
}

.signin__field { display: block; margin-top: calc(19 * var(--t)); }
.signin__intro + .signin__field { margin-top: calc(42 * var(--t)); }

.signin__field input {
  display: block;
  width: 100%;
  height: calc(51 * var(--t));
  margin-top: calc(3 * var(--t));
  padding: 0 calc(12 * var(--t));
  border: 1px solid var(--black);
  border-radius: 4px;
  background: var(--white);
  color: inherit;
  font-family: var(--sans);
  font-size: 16px; /* stops phones zooming in when the field is tapped */
}

.signin__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: calc(8 * var(--t));
  margin-top: calc(28 * var(--t));
}

.signin__stay { display: flex; align-items: center; gap: calc(15 * var(--t)); }

.signin__stay input {
  width: calc(13 * var(--t));
  height: calc(13 * var(--t));
  margin: 0;
  accent-color: var(--black);
}

.signin__submit {
  align-self: center;
  min-width: calc(80 * var(--t));
  min-height: calc(48 * var(--t));
  margin: calc(18 * var(--t)) 0 calc(23 * var(--t));
  padding: 0 calc(17 * var(--t));
  border: 0;
  background: var(--black);
  color: var(--white);
  font-family: var(--sans);
  font-size: calc(14 * var(--t));
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
}

.signin__submit:hover { opacity: 0.8; }

/* ---------- Purchase panel (amount choice) ---------- */

.purchase__amounts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(12 * var(--t));
  margin-top: calc(32 * var(--t));
}

.purchase__amount {
  min-height: calc(72 * var(--t));
  border: 1px solid var(--black);
  background: var(--white);
  color: var(--black);
  font-family: var(--serif);
  font-size: calc(28 * var(--t));
  letter-spacing: 0;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.purchase__amount:hover,
.purchase__amount:focus-visible {
  background: var(--black);
  color: var(--white);
}

.purchase__other {
  align-self: center;
  margin-top: calc(20 * var(--t));
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 0.15em;
  cursor: pointer;
}

.purchase__custom {
  display: flex;
  align-items: flex-end;
  gap: calc(12 * var(--t));
  margin-top: calc(20 * var(--t));
}

.purchase__custom .signin__field { flex: 1; margin-top: 0; }

.purchase__money { position: relative; display: block; }

.purchase__money::before {
  content: "£";
  position: absolute;
  left: calc(12 * var(--t));
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--sans);
  font-size: 16px;
}

.purchase__money input { padding-left: calc(28 * var(--t)); }

.purchase__custom .signin__submit { margin: 0; flex: none; }

.purchase__note,
.purchase__signin {
  margin-top: calc(24 * var(--t));
  font-family: var(--sans);
  font-size: calc(13 * var(--t));
  letter-spacing: 0;
  text-align: center;
}

.purchase__note { color: #555; }
.purchase__signin { margin: calc(8 * var(--t)) 0 calc(4 * var(--t)); }
.purchase__signin a { text-decoration: underline; text-underline-offset: 0.15em; }

/* ---------- Thank-you page ---------- */

.thanks {
  max-width: calc(640 * var(--u));
  margin: 0 auto;
  padding: calc(272 * var(--u)) 0 0;
  text-align: center;
}

.thanks h1 {
  margin-top: calc(16 * var(--u));
  font-size: calc(var(--fs-title) * var(--t));
  line-height: 1.05;
  text-wrap: balance;
}

.thanks__text {
  max-width: calc(520 * var(--u));
  margin: calc(32 * var(--u)) auto 0;
  text-wrap: balance;
}

.thanks .issue-button { width: calc(271 * var(--t)); margin-top: calc(40 * var(--u)); }

.thanks__note {
  margin-top: calc(32 * var(--u));
  font-family: var(--sans);
  font-size: calc(14 * var(--t));
  color: #555;
}

.thanks__note a { color: var(--black); text-decoration: underline; text-underline-offset: 0.15em; }

/* The thank-you message fills the first screen; the footer starts below it instead of peeking in. */
.thanks-body main { min-height: 100svh; }
.thanks-body .site-footer { margin-top: calc(120 * var(--u)); }

/* ---------- Demo pages (payment, sign-in email) — remove once payments are built ---------- */

.demo-banner {
  padding: 10px 16px;
  background: #fff4c2;
  font-family: var(--sans);
  font-size: 13px;
  text-align: center;
}

.demo-checkout,
.demo-email-page { background: #f6f6f4; }

.demo-checkout__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: calc(100vh - 40px);
}

.demo-checkout__summary {
  padding: 64px max(32px, 8vw) 48px;
  background: var(--white);
}

.demo-checkout__back {
  display: inline-block;
  font-family: var(--sans);
  font-size: 14px;
}

.demo-checkout__logo { width: 180px; height: auto; margin: 40px 0 32px; }

.demo-checkout__price {
  margin-top: 8px;
  font-size: 48px;
  line-height: 1;
}

.demo-checkout__item {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 32px;
  padding: 16px 0;
  border-top: 1px solid #e2e2e2;
  border-bottom: 1px solid #e2e2e2;
  font-family: var(--sans);
  font-size: 15px;
}

.demo-checkout__small {
  margin-top: 16px;
  font-family: var(--sans);
  font-size: 13px;
  color: #666;
}

.demo-checkout__pay { padding: 64px max(32px, 8vw) 48px; }

.demo-checkout__title {
  font-family: var(--sans);
  font-size: 20px;
  font-weight: 600;
}

.demo-checkout__form { max-width: 420px; margin-top: 24px; }

.demo-field {
  display: block;
  margin-top: 18px;
  font-family: var(--sans);
  font-size: 14px;
}

.demo-field input,
.demo-field select {
  display: block;
  width: 100%;
  height: 44px;
  margin-top: 6px;
  padding: 0 12px;
  border: 1px solid #cfcfcf;
  border-radius: 6px;
  background: var(--white);
  font-family: var(--sans);
  font-size: 16px;
}

.demo-field input[readonly] { background: #f0f0ee; color: #555; }

.demo-field__row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.demo-field__row input { margin-top: 8px; }

.demo-consent {
  display: flex;
  gap: 10px;
  margin-top: 22px;
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.4;
}

.demo-consent input { flex: none; margin-top: 2px; accent-color: var(--black); }

.demo-checkout__button {
  width: 100%;
  height: 48px;
  margin-top: 22px;
  border: 0;
  border-radius: 6px;
  background: var(--black);
  color: var(--white);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}

.demo-checkout__button:disabled { opacity: 0.6; cursor: progress; }

.demo-email {
  max-width: 640px;
  margin: 48px auto;
  padding: 0 16px;
}

.demo-email__meta {
  padding: 16px 20px;
  border: 1px solid #e2e2e2;
  border-bottom: 0;
  background: var(--white);
  font-family: var(--sans);
  font-size: 14px;
}

.demo-email__meta div { display: flex; gap: 12px; }
.demo-email__meta div + div { margin-top: 4px; }
.demo-email__meta dt { width: 64px; color: #777; }

.demo-email__body {
  padding: 48px 40px;
  border: 1px solid #e2e2e2;
  background: var(--white);
  text-align: center;
}

.demo-email__logo { width: 200px; height: auto; margin: 0 auto 32px; }
.demo-email__body h1 { font-size: 32px; line-height: 1.1; }

.demo-email__body > p:not(.demo-email__small) {
  max-width: 420px;
  margin: 16px auto 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
}

.demo-email__body .issue-button { margin-top: 28px; padding: 0 28px; }

.demo-email__small {
  max-width: 420px;
  margin: 28px auto 0;
  font-family: var(--sans);
  font-size: 13px;
  color: #777;
}

.signin__submit--link { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.signin__submit--link:hover { text-decoration: none; }

/* Small message at the bottom of the screen ("You're signed in") */
.toast {
  position: fixed;
  left: 50%;
  bottom: 32px;
  z-index: 20;
  padding: 14px 22px;
  background: var(--black);
  color: var(--white);
  font-family: var(--sans);
  font-size: 15px;
  transform: translateX(-50%);
  animation: toast-in 0.4s cubic-bezier(0.34, 1.4, 0.64, 1);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.toast--gone { opacity: 0; transform: translate(-50%, 12px); }

@keyframes toast-in {
  from { opacity: 0; transform: translate(-50%, 16px); }
}

@media (max-width: 760px) {
  .demo-checkout__layout { grid-template-columns: 1fr; min-height: 0; }
  .demo-checkout__summary,
  .demo-checkout__pay { padding: 32px 20px; }
  .demo-checkout__logo { margin: 24px 0 20px; }
  .demo-email { margin: 24px auto; }
  .demo-email__body { padding: 32px 20px; }
}

/* ---------- Tablet: 3 cards per row, same card-to-gap proportion ---------- */

@media (max-width: 999px) {
  :root {
    --frame: 1000;
    --t: 0.85px; /* text holds the size it had at the desktop minimum, so nothing jumps at 1000 */
    --logo-end-scale: 0.2271; /* small logo 218 wide: 218 / 960 */
    --logo-width: 960;
    --logo-left: 20;
    --logo-top: 20;
    --logo-move-x: 371; /* centres the small logo: (1000 - 218) / 2 - 20 */
    --logo-move-y: -5; /* level with the first menu line */
    --bar-start: 220;
    --bar-end: 130;
    --range: 240; /* fallback only */
    --range-anchor: 160; /* the logo finishes shrinking when the issue heading reaches just under the header bar */
    --columns: 3;
    --card: 27.1605%; /* 3 cards + 2 gaps fill the row at the 220 : 75 ratio */
    --gap: 9.2593%;
    --row-gap: 88;
  }

  .site-nav { padding-top: calc(24 * var(--u)); } /* keeps the menu inside the white header bar */
  .intro { width: calc(760 * var(--u)); min-height: 0; padding-top: calc(240 * var(--u)); padding-bottom: calc(100 * var(--u)); }
  .rule, .article-rule { width: calc(960 * var(--u)); }
  .colophon { grid-template-columns: 1fr 1fr; padding-left: calc(20 * var(--u)); padding-right: calc(20 * var(--u)); column-gap: calc(40 * var(--u)); }
  .site-footer { grid-template-columns: 1fr 1fr 1fr; column-gap: calc(24 * var(--u)); }
  .footer-brand__logo { width: 100%; margin-left: 0; }
  .footer-brand__by { margin-left: 0; }
  .frd-lockup { width: calc(220 * var(--u)); }

  .article-head { padding-top: calc(134 * var(--u)); }
  .article-head h1 { width: max(calc(800 * var(--u)), 13.4em); }
  .article-head__quote { width: calc(760 * var(--u)); }
  .article-body { width: calc(760 * var(--u)); margin-left: auto; margin-right: auto; }
  .side-note { margin: calc(40 * var(--u)) 0; padding-left: calc(16 * var(--u)); border-left: 1px solid #cfcfcf; }
  .side-note__image { max-width: 50%; }
  .article-figure { width: auto; margin-left: 0; margin-right: 0; }
  .author-bio { grid-template-columns: calc(100 * var(--u)) 1fr; padding: calc(64 * var(--u)) calc(120 * var(--u)) 0; }
  .author-bio__refs { grid-column: 2; margin-top: calc(32 * var(--u)); }

  .paywall { padding-left: calc(40 * var(--u)); padding-right: calc(40 * var(--u)); }
  .about-statement { max-width: none; padding: calc(200 * var(--u)) calc(40 * var(--u)) calc(100 * var(--u)); }

  .issue-head { padding-top: calc(140 * var(--u)); }
  .thanks { max-width: none; padding: calc(200 * var(--u)) calc(80 * var(--u)) 0; }
  .issue-rule { width: calc(960 * var(--u)); }
  .colophon--issue { padding-top: calc(100 * var(--u)); }
  .issue-next { grid-template-columns: calc(195 * var(--u)) 1fr; padding: 0 calc(40 * var(--u)) 0 calc(200 * var(--u)); }
}

/* ---------- Read More: a swipeable row on tablets and phones ----------
   Desktop keeps the 5-card row. Below 1000 wide the cards sit in one horizontal row
   that scrolls sideways and snaps to each card; the next card peeks in at the edge
   so readers can see there is more. Card and gap keep the 220 : 75 ratio. */
@media (max-width: 999px) {
  .card-grid--swipe {
    --swipe-card: 30%;
    display: flex;
    column-gap: calc(var(--swipe-card) * 75 / 220);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: calc(20 * var(--u));
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .card-grid--swipe::-webkit-scrollbar { display: none; }
  .card-grid--swipe > .card { flex: 0 0 var(--swipe-card); scroll-snap-align: start; }
  /* Room after the last card so it can snap fully into view. */
  .card-grid--swipe::after { content: ""; flex: 0 0 1px; }
}

/* ---------- Phone: 2 cards per row ---------- */

@media (max-width: 599px) {
  :root {
    --frame: 390;
    --t: clamp(0.85px, var(--u), 1px); /* text stops growing above 390 wide and shrinking below 332 */
    --logo-width: 358;
    --logo-left: 16;
    --logo-top: 16;
    --logo-end-scale: 0.2793; /* 100 wide: 100 / 358 */
    --logo-move-x: 129; /* centred: (390 - 100) / 2 - 16 */
    --logo-move-y: -3; /* level with the first menu line */
    --bar-start: 92;
    --bar-end: 76;
    --range: 120; /* fallback only */
    --range-anchor: 100; /* finishes as the issue heading reaches just under the header bar: a longer, gentler shrink than before */
    --columns: 2;
    --card: 43.5897%;
    --gap: 14.8606%; /* keeps the 220 : 75 ratio of the desktop grid */
    --row-gap: 40;
    --fs-label: 11;
    --fs-body: 18;
    --fs-card: 20;
    --fs-nav: 14;
    --fs-issue: 18;
    --fs-theme: 28;
    --fs-title: 36;
    --fs-author: 16;
    --fs-quote: 22;
    --fs-article: 17;
    --fs-note: 13;
  }

  .site-nav { padding: calc(14 * var(--u)) calc(16 * var(--u)) 0; font-size: max(12px, calc(13 * var(--t))); }
  .site-nav li + li { margin-top: calc(2 * var(--u)); }

  .intro { width: auto; padding: calc(120 * var(--u)) calc(20 * var(--u)) calc(64 * var(--u)); box-sizing: border-box; }
  .issue-heading { margin-bottom: calc(32 * var(--u)); scroll-margin-top: calc(90 * var(--u)); }
  .issue-heading p, .issue-heading h1 { line-height: 1.4; }
  .card-grid { padding: 0 calc(16 * var(--u)); }
  .card__author { margin-top: calc(10 * var(--u)); }
  .card__title { margin-top: calc(6 * var(--u)); line-height: 1.05; }
  .card-grid--swipe { --swipe-card: 52%; scroll-padding-left: calc(16 * var(--u)); }

  .rule, .article-rule { width: calc(358 * var(--u)); }
  .rule { margin-top: calc(64 * var(--u)); }
  .colophon { grid-template-columns: 1fr; row-gap: calc(34 * var(--u)); padding: calc(40 * var(--u)) calc(16 * var(--u)) 0; scroll-margin-top: calc(70 * var(--u)); }

  .site-footer { grid-template-columns: 1fr 1fr; column-gap: calc(16 * var(--u)); row-gap: calc(40 * var(--u)); margin-top: calc(72 * var(--u)); padding: 0 calc(16 * var(--u)) calc(20 * var(--u)); }
  .footer-brand { grid-column: 1 / -1; }
  .footer-brand__logo { width: calc(240 * var(--u)); }
  .footer-brand__by { font-size: calc(13 * var(--t)); }
  .frd-lockup { width: calc(180 * var(--u)); height: calc(48 * var(--u)); }
  .footer-group li { line-height: 1.4; }
  .copyright { margin-top: 0; font-size: calc(15 * var(--t)); }

  .article-head { padding: calc(110 * var(--u)) calc(16 * var(--u)) 0; }
  .article-head__issue { line-height: 1.4; }
  .article-head h1 { width: auto; margin-top: calc(16 * var(--u)); }
  .article-head__author { margin-top: calc(20 * var(--u)); line-height: 1.2; }
  .article-head__quote { width: auto; margin-top: calc(48 * var(--u)); }
  .article-body { width: auto; margin: calc(48 * var(--u)) calc(16 * var(--u)) 0; line-height: 1.5; }
  .side-note { margin: calc(28 * var(--u)) 0; }
  .side-note__image { max-width: 100%; }
  .article-chapter { margin-top: calc(56 * var(--u)); font-size: calc(22 * var(--t)); }
  .article-figure { margin: calc(40 * var(--u)) 0; }
  .article-pullquote { font-size: calc(22 * var(--t)); }
  .article-blockquote { padding-left: calc(16 * var(--u)); font-size: calc(19 * var(--t)); }
  .article-rule { margin-top: calc(40 * var(--u)); }
  .author-bio { grid-template-columns: 1fr; row-gap: calc(16 * var(--u)); padding: calc(32 * var(--u)) calc(16 * var(--u)) 0; }
  .author-bio__refs { grid-column: auto; margin-top: calc(16 * var(--u)); }
  .read-more__heading { margin: calc(64 * var(--u)) 0 calc(24 * var(--u)); }
  .compact .site-footer { margin-top: calc(72 * var(--u)); }

  /* Shop and Sign In (or the reader's initial) side by side, on one line with the menu button and logo. */
  .site-nav__actions { flex-direction: row; align-items: center; gap: calc(16 * var(--u)); }

  /* Phone menu: About, Issues and Contributors fold into a menu button on the left. */
  .nav-ready .site-nav__menu-button {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 28px;
    height: 28px;
    margin: -5px 0 0 -4px;
    padding: 4px;
    border: 0;
    background: none;
    cursor: pointer;
    pointer-events: auto;
  }
  .site-nav__menu-button span { display: block; width: 20px; height: 1.5px; background: var(--black); transition: transform 0.25s ease, opacity 0.2s ease; }
  .site-nav.is-open .site-nav__menu-button span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .site-nav.is-open .site-nav__menu-button span:nth-child(2) { opacity: 0; }
  .site-nav.is-open .site-nav__menu-button span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
  .nav-ready .site-nav__links { display: none; }
  .nav-ready .site-nav.is-open .site-nav__links {
    display: block;
    position: absolute;
    top: calc(var(--bar-end) * var(--u));
    left: 0;
    right: 0;
    padding: calc(12 * var(--u)) calc(16 * var(--u)) calc(24 * var(--u));
    border-bottom: 1px solid var(--black);
    background: var(--white);
    font-size: 20px;
    line-height: 1.2;
  }
  .nav-ready .site-nav.is-open .site-nav__links li + li { margin-top: 14px; }
  .account-menu { top: calc(100% + 10px); min-width: 200px; }
  .about-statement { padding: calc(120 * var(--u)) calc(16 * var(--u)) calc(56 * var(--u)); }
  .about-statement__break { display: none; }
  .colophon--about { padding-top: 0; }
  .colophon--about .colophon__contributors { order: -1; }

  .issue-head { padding-top: calc(110 * var(--u)); text-align: center; }
  .thanks { padding: calc(120 * var(--u)) calc(16 * var(--u)) 0; }
  .thanks__text { max-width: none; }
  .thanks-body .site-footer { margin-top: calc(64 * var(--u)); }
  .purchase__custom { flex-wrap: wrap; }
  .purchase__custom .signin__submit { flex: 1 0 100%; }
  .issue-head .issue-head__buy { margin-top: calc(16 * var(--u)); }
  .issue-deck__cover { width: calc(240 * var(--u)); margin-top: calc(32 * var(--u)); }
  .issue-deck__caption { max-width: none; padding: 0 calc(24 * var(--u)); margin-top: calc(24 * var(--u)); }
  .issue-contents .card-grid { margin-top: calc(32 * var(--u)); }
  .colophon--issue { padding-top: calc(56 * var(--u)); }
  .issue-rule { margin-top: calc(56 * var(--u)); }
  .issue-buy { gap: calc(12 * var(--u)); margin-top: calc(40 * var(--u)); }
  .issue-next { grid-template-columns: calc(120 * var(--u)) 1fr; column-gap: calc(20 * var(--u)); margin-top: calc(56 * var(--u)); padding: 0 calc(16 * var(--u)); }
  .issue-body .site-footer { margin-top: calc(72 * var(--u)); }
  .about .site-footer { margin-top: calc(72 * var(--u)); }

  .paywall { padding: calc(24 * var(--u)) calc(16 * var(--u)); }
  .paywall__title { font-size: calc(24 * var(--t)); }
  .paywall__text { font-size: calc(14 * var(--t)); }
  .paywall__actions { flex-direction: column; gap: calc(10 * var(--u)); margin-top: calc(18 * var(--u)); }
  .paywall__signin { margin-left: 0; font-size: calc(14 * var(--t)); text-align: center; }
  .button { min-height: calc(48 * var(--t)); }
}

/* ---------- Newsletter banner ----------
   Desktop: columns 2 to 11 (1164 wide), 64 padding top and bottom, 40 at the sides, 120 above and below; heading on one line.
   The text starts at column 5 (x 492). Field and button follow Monocle's proportions to the heading:
   36 tall (about 1.4 x the 24 heading), a short button fitted to its word, 12 between them. */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.newsletter {
  display: grid;
  grid-template-columns: calc(274 * var(--u)) 1fr; /* text still starts at column 5 (x 492) */
  column-gap: calc(40 * var(--u));
  align-items: stretch; /* the image runs from the top of the heading to the last line */
  width: calc(1164 * var(--u));
  margin: calc(120 * var(--u)) auto 0;
  padding: calc(64 * var(--u)) calc(40 * var(--u));
  background: var(--black);
  color: var(--white);
}

.newsletter__image {
  min-height: 100%;
  background: #d9d9d9 center / cover no-repeat;
}

.newsletter__title {
  font-size: calc(24 * var(--t)); /* same as the article chapter headings */
  font-weight: 400;
  line-height: 1.125;
}

.newsletter__text {
  max-width: 38em;
  margin-top: calc(12 * var(--u));
  font-family: var(--sans);
  font-size: max(12px, calc(14 * var(--t)));
  line-height: 1.375;
}

.newsletter__form {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: calc(12 * var(--u));
  align-items: end;
  margin-top: calc(36 * var(--u));
}

.newsletter__input {
  min-height: calc(36 * var(--t));
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--white);
  border-radius: 0;
  background: transparent;
  color: var(--white);
  font-family: var(--sans);
  font-size: calc(14 * var(--t));
}

.newsletter__input::placeholder { color: #bdbdbd; opacity: 1; }
.newsletter__input:focus-visible { outline: 2px solid var(--white); outline-offset: 4px; }
.newsletter__submit {
  min-height: calc(36 * var(--t));
  padding: 0 calc(24 * var(--t));
  font-size: calc(14 * var(--t));
  cursor: pointer;
}
.newsletter__break { display: none; } /* heading on one line on desktop */

.newsletter__consent {
  margin-top: calc(16 * var(--u));
  color: #bdbdbd;
  font-family: var(--sans);
  font-size: max(11px, calc(12 * var(--t)));
  line-height: 1.4;
}

.newsletter__consent a { color: inherit; text-decoration: underline; }

/* Any page with the banner: 120 between the banner and the footer */
body:has(.newsletter) .site-footer { margin-top: calc(120 * var(--u)); }

/* Tablet: full width inside the 20 margins */
@media (max-width: 999px) {
  .newsletter {
    grid-template-columns: calc(300 * var(--u)) 1fr;
    column-gap: calc(40 * var(--u));
    width: auto;
    margin: calc(120 * var(--u)) calc(20 * var(--u)) 0;
    padding: calc(56 * var(--u)) calc(40 * var(--u));
  }
  .newsletter__break { display: inline; } /* two lines on tablet */
}

/* Phone: image on top, then text, then a full-width field and button */
@media (max-width: 599px) {
  .newsletter {
    grid-template-columns: 1fr;
    row-gap: calc(24 * var(--u));
    margin: calc(64 * var(--u)) calc(16 * var(--u)) 0;
    padding: calc(24 * var(--u)) calc(16 * var(--u)) calc(28 * var(--u));
  }
  .newsletter__break { display: none; }
  .newsletter__image { aspect-ratio: 16 / 9; min-height: 0; } /* wide and short, so the banner stays compact */
  .newsletter__title { font-size: calc(22 * var(--t)); } /* same as chapter headings on phones */
  .newsletter__text { font-size: calc(14 * var(--t)); }
  .newsletter__form { grid-template-columns: 1fr; row-gap: calc(12 * var(--u)); margin-top: calc(24 * var(--u)); }
  /* Phones: taller field and button for thumbs, and 16 text so the phone doesn't zoom in */
  .newsletter__input { min-height: 44px; font-size: 16px; }
  .newsletter__submit { width: 100%; min-height: 44px; }
  body:has(.newsletter) .site-footer { margin-top: calc(64 * var(--u)); }
}