/* Theology Matters: tm-v6, tm-v7, tm-v8, tm-v9, tm-mobile, folded by includes/tm-css-bundle.php. Edit the theme files, not this. */

/* ==== tm-v6.css ==== */
/* =============================================================================
   SECTION 100: Cover Story v6: colour, boldness and the printed page (2026-10)
   Scoped to body.tm-cs-v6 (theme includes/tm-cover-v6.php: on with the
   ?tm_v6 preview key, or for everyone once the option tm_cover_story_v6 is
   set). A theme file, loaded on every page while v6 is on.
   1. --tm-v6-season: the current issue's colour, from the season class the
      header puts on <body>. It changes with each issue.
   2. Colour-field heads (v5 pages and the Institute) and the season band.
   3. From the archive: one sentence from an essay, set large on navy.
   4. The numbers band.
   5. The printed page: each first page drawn as a printed issue in 3D.
   Guardrails (DESIGN.md): one colour field per screen, cream stays the
   paper, no gradients, cream on every season colour clears AA.
   ============================================================================= */

/* ---------- 1. The season ---------- */
body.tm-cs-v6 {
  --tm-v6-season: var(--tm-navy);
}
body.tm-cs-v6.tm-season--winter,
body.tm-cs-v6.tm-season--issue-1 { --tm-v6-season: var(--tm-season-winter); }
body.tm-cs-v6.tm-season--spring,
body.tm-cs-v6.tm-season--issue-2 { --tm-v6-season: var(--tm-season-spring); }
body.tm-cs-v6.tm-season--summer,
body.tm-cs-v6.tm-season--issue-3 { --tm-v6-season: var(--tm-season-summer); }
body.tm-cs-v6.tm-season--fall,
body.tm-cs-v6.tm-season--issue-4 { --tm-v6-season: var(--tm-season-fall); }
body.tm-cs-v6.tm-season--issue-5 { --tm-v6-season: var(--tm-issue-5); }
body.tm-cs-v6.tm-season--issue-6 { --tm-v6-season: var(--tm-issue-6); }

/* ---------- 2. Colour-field heads ---------- */
/* The head keeps its frame and grid; the field runs to both edges of the
   window through a wide box-shadow clipped to the head's own height. */
body.tm-cs-v6 :is(.tm-v5-head, .tm-v4-institute .tm-v4-head) {
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
  background: var(--tm-v6-season);
  box-shadow: 0 0 0 100vmax var(--tm-v6-season);
  clip-path: inset(0 -100vmax);
  color: var(--tm-cream);
}
body.tm-cs-v6 :is(.tm-v5-head, .tm-v4-institute .tm-v4-head) :is(.tm-v3-head__title, .tm-v3-head__title em) {
  color: var(--tm-cream);
}
body.tm-cs-v6 :is(.tm-v5-head, .tm-v4-institute .tm-v4-head) .tm-v3-head__title {
  font-size: clamp(3.25rem, 7.5vw, 7.5rem);
  letter-spacing: -0.035em;
}
body.tm-cs-v6 :is(.tm-v5-head, .tm-v4-institute .tm-v4-head) :is(.tm-v3-head__dek, .tm-v3-head__facts, .tm-v4-head__kicker) {
  color: color-mix(in srgb, var(--tm-cream) 86%, var(--tm-v6-season));
}
body.tm-cs-v6 :is(.tm-v5-head, .tm-v4-institute .tm-v4-head)::after {
  border-color: var(--tm-cream);
}
/* The paper sheets and covers in a head sit on the field without a ghost. */
body.tm-cs-v6 .tm-v5-head .tm-v3-head__plate {
  border-color: color-mix(in srgb, var(--tm-cream) 40%, var(--tm-v6-season));
}

/* The navy set-piece bands take the season (About, Institute, Conference). */
body.tm-cs-v6 .tm-v4-charge {
  background: var(--tm-v6-season);
}
body.tm-cs-v6 .tm-v4-charge :is(.tm-v4-charge__lede, .tm-v4-charge__text, .tm-v4-charge__num, .tm-v4-charge__verse footer, .tm-v4-charge__note) {
  color: color-mix(in srgb, var(--tm-cream) 86%, var(--tm-v6-season));
}
body.tm-cs-v6 .tm-v4-charge__item {
  border-top-color: color-mix(in srgb, var(--tm-cream) 40%, var(--tm-v6-season));
}

/* The one drop cap per page carries the season. */
body.tm-cs-v6 .tm-v5-dropcap::first-letter {
  color: var(--tm-v6-season);
}

/* ---------- 3. From the archive ---------- */
body.tm-cs-v6 .tm-v6-quote {
  display: block;
  margin: clamp(3.5rem, 7vw, 6rem) 0 0;
  padding: clamp(3.5rem, 8vw, 7rem) 0;
  background: var(--tm-navy);
  color: var(--tm-cream);
}
/* A global figure style gives figures a pale card; this one sits on navy. */
html body.tm-cs-v6 .tm-v6-quote figure.tm-v6-quote__inner {
  box-sizing: border-box;
  max-width: var(--tm-v3-width, 81.25rem);
  margin: 0 auto;
  padding: 0 var(--tm-v3-edge, clamp(1.25rem, 4vw, 3rem));
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
body.tm-cs-v6 .tm-v6-quote__label {
  margin: 0 0 1.5rem;
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  color: color-mix(in srgb, var(--tm-cream) 72%, var(--tm-navy));
}
html body.tm-cs-v6 .tm-v6-quote blockquote.tm-v6-quote__text {
  display: block;
  margin: 0;
  padding: 0;
  max-width: 24ch;
  background: none;
  border: 0;
  box-shadow: none;
}
html body.tm-cs-v6 .tm-v6-quote blockquote.tm-v6-quote__text::before,
html body.tm-cs-v6 .tm-v6-quote blockquote.tm-v6-quote__text::after {
  content: none;
}
body.tm-cs-v6 .tm-v6-quote__text p {
  margin: 0;
  font-family: "Newsreader", serif;
  font-size: clamp(2rem, 4.6vw, 4.25rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--tm-cream);
  text-wrap: balance;
}
body.tm-cs-v6 .tm-v6-quote__source {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1.5rem;
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  padding-top: 1.25rem;
  border-top: 1px solid color-mix(in srgb, var(--tm-cream) 30%, var(--tm-navy));
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 0.9375rem;
  color: color-mix(in srgb, var(--tm-cream) 80%, var(--tm-navy));
}
body.tm-cs-v6 .tm-v6-quote__by {
  font-weight: 600;
  color: var(--tm-cream);
}
body.tm-cs-v6 .tm-v6-quote__source a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
}
body.tm-cs-v6 .tm-v6-quote__source a:hover {
  color: var(--tm-cream);
}
body.tm-cs-v6 a.tm-v6-quote__title {
  font-family: "Newsreader", serif;
  font-size: 1.125rem;
  font-style: italic;
}
body.tm-cs-v6 .tm-v6-quote .tm-v3-swatch {
  display: inline-block;
  width: 0.75rem;
  height: 0.75rem;
  margin-right: 0.5rem;
  vertical-align: -0.0625rem;
  background: var(--tm-shelf-cover, var(--tm-cream));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--tm-cream) 50%, transparent);
}

/* ---------- 4. The numbers ---------- */
body.tm-cs-v6 .tm-v6-numbers {
  box-sizing: border-box;
  max-width: var(--tm-v3-width, 81.25rem);
  margin: clamp(2rem, 4vw, 3rem) auto 0;
  padding-inline: var(--tm-v3-edge, clamp(1.25rem, 4vw, 3rem));
}
body.tm-cs-v6 .tm-v6-numbers__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 3px solid var(--tm-navy);
  border-bottom: 1px solid var(--tm-navy);
}
body.tm-cs-v6 .tm-v6-numbers__item + .tm-v6-numbers__item {
  border-left: 1px solid var(--tm-rule);
}
body.tm-cs-v6 .tm-v6-numbers__item a {
  display: block;
  padding: clamp(1.25rem, 3vw, 2rem) clamp(1rem, 2.5vw, 2rem);
  text-decoration: none;
}
body.tm-cs-v6 .tm-v6-numbers__figure {
  display: block;
  font-family: "Newsreader", serif;
  font-size: clamp(3.5rem, 8vw, 7rem);
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: -0.045em;
  font-variant-numeric: lining-nums;
  color: var(--tm-v6-season);
}
body.tm-cs-v6 .tm-v6-numbers__label {
  display: block;
  margin-top: 0.75rem;
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--tm-ink);
}
body.tm-cs-v6 .tm-v6-numbers__item a:hover .tm-v6-numbers__label {
  color: var(--tm-oxblood);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

/* ---------- 5. The printed page ---------- */
/* Each first page is drawn as a printed issue standing in space, as in a
   product film: turned in perspective, with the edges of the pages behind
   it, a soft shadow on the floor and the page lifted off it. Angles are
   custom properties: --tm-v6-base-ry / -rx / -rz set the pose per place,
   and the script in tm-cover-v6.php adds --tm-v6-ry / -rx from the pointer.
   It turns into place as it scrolls in (html.tm-v6-anim, .is-in). */
body.tm-cs-v6 .tm-v6-sheet {
  --tm-v6-base-ry: -24deg;
  --tm-v6-base-rx: 8deg;
  --tm-v6-base-rz: 1.5deg;
  position: relative;
  display: block;
  padding: 4% 4% 9%;
  perspective: 1400px;
  perspective-origin: 50% 40%;
  text-decoration: none;
}
body.tm-cs-v6 .tm-v6-sheet__body {
  position: relative;
  display: block;
  transform-style: preserve-3d;
  transform:
    rotateX(calc(var(--tm-v6-base-rx) + var(--tm-v6-rx, 0deg)))
    rotateY(calc(var(--tm-v6-base-ry) + var(--tm-v6-ry, 0deg)))
    rotateZ(var(--tm-v6-base-rz));
  transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.8s ease-out;
  transition-delay: calc(var(--i, 0) * 90ms);
}
body.tm-cs-v6 .tm-v6-sheet.is-tilting .tm-v6-sheet__body {
  transition-duration: 0.25s;
  transition-delay: 0s;
}
/* The issue's pages behind the front page: a stack of edges. */
body.tm-cs-v6 .tm-v6-sheet__stack {
  position: absolute;
  inset: 0;
  background: var(--tm-bone);
  transform: translateZ(-2px);
  box-shadow:
    1px 1px 0 color-mix(in srgb, var(--tm-ink) 16%, var(--tm-bone)),
    2px 2px 0 var(--tm-bone),
    3px 3px 0 color-mix(in srgb, var(--tm-ink) 16%, var(--tm-bone)),
    4px 4px 0 var(--tm-bone),
    5px 5px 0 color-mix(in srgb, var(--tm-ink) 18%, var(--tm-bone)),
    6px 6px 0 var(--tm-bone),
    7px 7px 0 color-mix(in srgb, var(--tm-ink) 22%, var(--tm-bone)),
    2rem 2.75rem 3.5rem -1rem color-mix(in srgb, var(--tm-ink) 45%, transparent);
}
body.tm-cs-v6 .tm-v6-sheet img {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  transform: translateZ(1px);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--tm-ink) 10%, transparent),
    0 0.25rem 0.5rem color-mix(in srgb, var(--tm-ink) 10%, transparent);
}
/* The floor shadow: a soft pool under the issue, not on it. */
body.tm-cs-v6 .tm-v6-sheet__floor {
  position: absolute;
  left: 12%;
  right: 6%;
  bottom: 2%;
  height: 7%;
  border-radius: 50%;
  background: color-mix(in srgb, var(--tm-ink) 30%, transparent);
  filter: blur(14px);
  transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.8s ease-out;
}
/* Before it scrolls in: flat and lower, then it turns into its pose. */
html.tm-v6-anim body.tm-cs-v6 .tm-v6-sheet:not(.is-in) .tm-v6-sheet__body {
  opacity: 0;
  transform: rotateX(0deg) rotateY(calc(var(--tm-v6-base-ry) * -1.6)) translateY(2.5rem);
}
html.tm-v6-anim body.tm-cs-v6 .tm-v6-sheet:not(.is-in) .tm-v6-sheet__floor {
  opacity: 0;
  transform: scaleX(0.6);
}
body.tm-cs-v6 a.tm-v6-sheet:focus-visible {
  outline: 2px solid var(--tm-oxblood);
  outline-offset: 4px;
}
/* Front pages across the years (About): a lineup, all turned the same way. */
body.tm-cs-v6 figure.tm-v6-fronts {
  margin: clamp(2.5rem, 5vw, 3.5rem) 0 0;
}
body.tm-cs-v6 .tm-v6-fronts__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: clamp(0.5rem, 1.5vw, 1.25rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
body.tm-cs-v6 .tm-v6-fronts__item .tm-v6-sheet {
  --tm-v6-base-ry: -30deg;
  --tm-v6-base-rx: 6deg;
  --tm-v6-base-rz: 0deg;
}
body.tm-cs-v6 .tm-v6-fronts__label {
  display: block;
  margin-top: 0.25rem;
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--tm-ink-soft);
}
body.tm-cs-v6 .tm-v6-fronts__caption {
  margin-top: 1.25rem;
  font-family: "Newsreader", serif;
  font-size: 1rem;
  font-style: italic;
  color: var(--tm-ink-soft);
}
/* The printed issue on issue pages: larger, turned toward its text. Inside
   the contents block it shares its frame; alone (an issue with no articles
   online) its wrapper sets the same frame. */
body.tm-cs-v6 .tm-v6-printed-wrap {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--tm-v3-width, 81.25rem);
  margin-inline: auto;
  padding-inline: var(--tm-v3-edge, clamp(1.25rem, 4vw, 3rem));
}
body.tm-cs-v6 .tm-v6-printed {
  display: grid;
  grid-template-columns: minmax(0, 24rem) minmax(0, 1fr);
  column-gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
  margin: clamp(2.5rem, 5vw, 4rem) 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--tm-navy);
}
body.tm-cs-v6 .tm-v6-printed .tm-v6-sheet {
  --tm-v6-base-ry: 22deg;
  --tm-v6-base-rz: -1.5deg;
}
body.tm-cs-v6 .tm-v6-printed__label {
  margin: 0;
  font-family: "Newsreader", serif;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  line-height: 1.05;
  color: var(--tm-navy);
}
body.tm-cs-v6 .tm-v6-printed__text {
  margin: 0.5rem 0 1rem;
  font-family: "Newsreader", serif;
  font-size: 1.0625rem;
  font-style: italic;
  color: var(--tm-ink-soft);
}
body.tm-cs-v6 a.tm-v6-printed__link {
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--tm-oxblood);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
}
/* Beside the Print edition form. */
body.tm-cs-v6 .tm-v6-signup__sheet {
  width: min(100%, 18rem);
}
body.tm-cs-v6 .tm-v6-signup__sheet .tm-v6-sheet {
  --tm-v6-base-ry: -20deg;
}

/* ---------- Narrower screens ---------- */
@media (max-width: 900px) {
  body.tm-cs-v6 .tm-v6-numbers__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  body.tm-cs-v6 .tm-v6-numbers__item:nth-child(3) {
    border-left: 0;
  }
  body.tm-cs-v6 .tm-v6-numbers__item:nth-child(n+3) {
    border-top: 1px solid var(--tm-rule);
  }
  body.tm-cs-v6 .tm-v6-printed {
    grid-template-columns: minmax(0, 1fr);
  }
  body.tm-cs-v6 .tm-v6-printed .tm-v6-sheet {
    width: min(100%, 17rem);
    margin-bottom: 0.5rem;
  }
  body.tm-cs-v6 .tm-v6-sheet {
    --tm-v6-base-ry: -16deg;
  }
  body.tm-cs-v6 .tm-v6-printed .tm-v6-sheet {
    --tm-v6-base-ry: 16deg;
  }
}
@media (max-width: 600px) {
  body.tm-cs-v6 .tm-v6-fronts__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (prefers-reduced-motion: reduce) {
  body.tm-cs-v6 :is(.tm-v6-sheet__body, .tm-v6-sheet__floor) {
    transition: none;
  }
}


/* ==== tm-v7.css ==== */
/* =============================================================================
   SECTION 102: Cover Story v7: texture, so the pages feel lived in (2026-10)
   Scoped to body.tm-cs-v7 (theme includes/tm-cover-v7.php: on with the
   ?tm_v7 preview key, or for everyone once the option tm_cover_story_v7 is
   set). A theme file, loaded on every page while v7 is on.
   1. Paper grain over the whole page.
   2. The site's own conference photographs as printed halftones, faded into
      chosen sections (uploads/tm-textures/photo-*.webp, ink only, drawn as
      CSS masks so their colour is a token).
   3. Printer's ornaments: the section rule's ornament and the printer's
      initial for the page's one drop cap.
   Guardrails: text sits on the paper, the photograph dissolves toward it;
   nothing moves; no gradients you can see (the only gradients are inside
   masks, where they fade a photograph's edge).
   ============================================================================= */

/* ---------- 1. Paper grain ---------- */
/* A 160 px tile of fractal noise, black speckles only, over the page at a
   few per cent: the cream reads as paper rather than a screen colour. It
   never takes pointer events. */
body.tm-cs-v7::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  pointer-events: none;
  opacity: 0.055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}
@media print {
  body.tm-cs-v7::after {
    content: none;
  }
}

/* ---------- 2. Halftone photographs ---------- */
/* Each host gets a layer behind its content on the right, the photograph
   masked to its halftone dots and faded toward the text on the left. The
   mask gradient only shapes the fade (its colour is irrelevant). */
body.tm-cs-v7 :is(.tm-v4-conf-head, .tm-v4-institute .tm-v4-head, .tm-v5-history, .tm-v5-why, .tm-v5-case, .tm-v5-reach, .tm-v6-quote) {
  position: relative;
  isolation: isolate;
}
body.tm-cs-v7 :is(.tm-v4-conf-head, .tm-v4-institute .tm-v4-head, .tm-v5-history, .tm-v5-why, .tm-v5-case, .tm-v5-reach, .tm-v6-quote)::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(62%, 52rem);
  pointer-events: none;
  background: var(--tm-v7-ink, var(--tm-v6-season, var(--tm-navy)));
  opacity: var(--tm-v7-opacity, 0.1);
  -webkit-mask-image: var(--tm-v7-photo), linear-gradient(to right, transparent, black 55%);
  -webkit-mask-composite: source-in;
  mask-image: var(--tm-v7-photo), linear-gradient(to right, transparent, black 55%);
  mask-composite: intersect;
  -webkit-mask-size: cover, 100% 100%;
  mask-size: cover, 100% 100%;
  -webkit-mask-position: right center, 0 0;
  mask-position: right center, 0 0;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
body.tm-cs-v7 .tm-v4-conf-head {
  --tm-v7-photo: url("/wp-content/uploads/tm-textures/photo-conference.webp");
  --tm-v7-opacity: 0.13;
}
/* The Institute head is a season-colour field (v6): cream dots on it, from
   the "-light" file, whose dots follow the highlights so the photograph
   reads as a positive, not a negative. */
body.tm-cs-v7 .tm-v4-institute .tm-v4-head {
  --tm-v7-photo: url("/wp-content/uploads/tm-textures/photo-institute-light.webp");
  --tm-v7-ink: var(--tm-cream);
  --tm-v7-opacity: 0.14;
}
body.tm-cs-v7 .tm-v5-history {
  --tm-v7-photo: url("/wp-content/uploads/tm-textures/photo-history.webp");
  --tm-v7-opacity: 0.1;
}
body.tm-cs-v7 .tm-v5-why {
  --tm-v7-photo: url("/wp-content/uploads/tm-textures/photo-print.webp");
  --tm-v7-opacity: 0.1;
}
body.tm-cs-v7 .tm-v5-case {
  --tm-v7-photo: url("/wp-content/uploads/tm-textures/photo-give.webp");
  --tm-v7-opacity: 0.1;
}
body.tm-cs-v7 .tm-v5-reach {
  --tm-v7-photo: url("/wp-content/uploads/tm-textures/photo-contact.webp");
  --tm-v7-opacity: 0.09;
}
/* The quote band is navy: cream dots (the "-light" file), across the band. */
body.tm-cs-v7 .tm-v6-quote {
  --tm-v7-photo: url("/wp-content/uploads/tm-textures/photo-quote-light.webp");
  --tm-v7-ink: var(--tm-cream);
  --tm-v7-opacity: 0.12;
}
body.tm-cs-v7 .tm-v6-quote::before {
  width: min(70%, 60rem);
}

/* ---------- 3. Printer's ornaments ---------- */
/* The section rule carries an ornament at its start: a dot, a diamond and
   a dot, in oxblood, sitting on the navy hairline. */
body.tm-cs-v7 .tm-v4-section__head {
  position: relative;
}
body.tm-cs-v7 .tm-v4-section__head::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 0;
  width: 3.75rem;
  height: 13px;
  background: var(--tm-oxblood);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 13'%3E%3Ccircle cx='4' cy='6.5' r='2.4'/%3E%3Cpath d='M30 .5 36.5 6.5 30 12.5 23.5 6.5Z'/%3E%3Ccircle cx='56' cy='6.5' r='2.4'/%3E%3C/svg%3E") left center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 13'%3E%3Ccircle cx='4' cy='6.5' r='2.4'/%3E%3Cpath d='M30 .5 36.5 6.5 30 12.5 23.5 6.5Z'/%3E%3Ccircle cx='56' cy='6.5' r='2.4'/%3E%3C/svg%3E") left center / contain no-repeat;
}
/* The printer's initial: the page's one drop cap (v5 pages) and the
   article's, as a cream letter cut out of a season-colour block. */
body.tm-cs-v7 .tm-v5-dropcap::first-letter,
body.tm-cs-v7 .tm-prose p.tm-prose__lede::first-letter,
body.tm-cs-v7 .tm-prose > p:first-of-type::first-letter,
body.tm-cs-v7 .tm-prose > .brxe-post-content > p:first-of-type::first-letter {
  margin: 0.06em 0.16em 0 0;
  padding: 0.1em 0.14em 0.02em;
  background: var(--tm-v6-season, var(--tm-oxblood));
  color: var(--tm-cream);
  line-height: 0.85;
}
body.tm-cs-v7 .tm-article-body.no-drop-cap .tm-prose p.tm-prose__lede::first-letter,
body.tm-cs-v7 .tm-article-body.no-drop-cap .tm-prose > p:first-of-type::first-letter {
  padding: 0;
  margin: 0;
  background: none;
  color: inherit;
}

/* ---------- Phones ---------- */
/* The photograph sits behind the top of its section at full width, fading
   down rather than sideways, and lighter. */
@media (max-width: 768px) {
  body.tm-cs-v7 :is(.tm-v4-conf-head, .tm-v4-institute .tm-v4-head, .tm-v5-history, .tm-v5-why, .tm-v5-case, .tm-v5-reach, .tm-v6-quote)::before {
    width: 100%;
    bottom: auto;
    height: min(26rem, 80%);
    opacity: calc(var(--tm-v7-opacity, 0.1) * 0.75);
    -webkit-mask-image: var(--tm-v7-photo), linear-gradient(to bottom, black 35%, transparent);
    mask-image: var(--tm-v7-photo), linear-gradient(to bottom, black 35%, transparent);
    -webkit-mask-position: center top, 0 0;
    mask-position: center top, 0 0;
  }
}


/* ==== tm-v8.css ==== */
/* =============================================================================
   SECTION 103: Cover Story v8: the finishing pass (2026-10)
   Scoped to body.tm-cs-v8 (theme includes/tm-cover-v8.php: on with the
   ?tm_v8 preview key, or for everyone once the option tm_cover_story_v8 is
   set). A theme file, loaded on every page while v8 is on; script
   js/tm-v8.js.
   1. Typeset articles: small capitals, section ornament, sidenotes, the
      running head.
   2. (Removed: the photo treatment; halftones stay background decor, v7.)
   3. This season, years ago (home).
   4. The cover grows into its issue (view transition).
   ============================================================================= */

/* ---------- 1. Typeset articles ---------- */
/* The opening line in small capitals after the drop cap, as a printed
   journal sets it. The font has no small capitals of its own, so the
   browser draws them; a little tracking keeps them from looking cramped. */
body.tm-cs-v8 .tm-prose p.tm-prose__lede::first-line,
body.tm-cs-v8 .tm-prose > p:first-of-type::first-line,
body.tm-cs-v8 .tm-prose > .brxe-post-content > p:first-of-type::first-line {
  font-variant-caps: small-caps;
  letter-spacing: 0.04em;
}

/* Section breaks: the printer's ornament (dot, diamond, dot), centred. */
body.tm-cs-v8 .tm-prose hr.wp-block-separator,
body.tm-cs-v8 .tm-prose hr {
  width: 3.75rem;
  height: 13px;
  margin: 2.75rem auto;
  border: 0;
  background: var(--tm-oxblood);
  opacity: 1;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 13'%3E%3Ccircle cx='4' cy='6.5' r='2.4'/%3E%3Cpath d='M30 .5 36.5 6.5 30 12.5 23.5 6.5Z'/%3E%3Ccircle cx='56' cy='6.5' r='2.4'/%3E%3C/svg%3E")
    center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 13'%3E%3Ccircle cx='4' cy='6.5' r='2.4'/%3E%3Cpath d='M30 .5 36.5 6.5 30 12.5 23.5 6.5Z'/%3E%3Ccircle cx='56' cy='6.5' r='2.4'/%3E%3C/svg%3E")
    center / contain no-repeat;
}

/* Sidenotes: each footnote beside its line, in the right margin, from
   1280 px where there is room (the script measures). The notes list at
   the end stays; these are a reading aid and hidden from screen readers. */
body.tm-cs-v8.single-post .tm-prose {
  position: relative;
}
body.tm-cs-v8 .tm-v8-sidenotes {
  position: absolute;
  top: 0;
  left: calc(100% + 2.5rem);
  width: var(--tm-v8-note-w, 14rem);
  height: 100%;
  pointer-events: none;
}
body.tm-cs-v8 .tm-v8-sidenote {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0;
  padding-top: 0.5rem;
  border-top: 1px solid var(--tm-rule);
  font-family: "Newsreader", serif;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--tm-ink-soft);
  pointer-events: auto;
  overflow-wrap: anywhere;
}
body.tm-cs-v8 .tm-v8-sidenote__n {
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--tm-oxblood);
}
body.tm-cs-v8 .tm-v8-sidenote a {
  color: inherit;
}
body.tm-cs-v8 .tm-v8-sidenote em,
body.tm-cs-v8 .tm-v8-sidenote i {
  font-style: italic;
}

/* The running head: a slim line under the header while the essay is being
   read, like the head of a printed page. Wide screens only. */
body.tm-cs-v8 .tm-v8-runhead {
  display: none;
}
@media (min-width: 900px) {
  body.tm-cs-v8 .tm-v8-runhead {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 290;
    background: var(--tm-cream);
    border-bottom: 1px solid var(--tm-rule);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-0.5rem);
    transition:
      opacity 0.2s ease-out,
      transform 0.2s ease-out,
      visibility 0s linear 0.2s;
  }
  body.tm-cs-v8 .tm-v8-runhead.is-on {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition:
      opacity 0.2s ease-out,
      transform 0.2s ease-out,
      visibility 0s;
  }
  body.tm-cs-v8 .tm-v8-runhead__inner {
    box-sizing: border-box;
    display: flex;
    gap: 0.5rem 1.25rem;
    align-items: baseline;
    max-width: var(--tm-v3-width, 81.25rem);
    margin-inline: auto;
    padding: 0.4rem var(--tm-v3-edge, clamp(1.25rem, 4vw, 3rem));
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--tm-ink-soft);
    white-space: nowrap;
  }
  body.tm-cs-v8 .tm-v8-runhead__part {
    overflow: hidden;
    text-overflow: ellipsis;
  }
  body.tm-cs-v8 .tm-v8-runhead__part--0 {
    font-family: "Newsreader", serif;
    font-size: 0.9375rem;
    font-style: italic;
    font-weight: 400;
    color: var(--tm-navy);
  }
  body.tm-cs-v8 .tm-v8-runhead__part + .tm-v8-runhead__part::before {
    content: "\00b7";
    margin-right: 1.25rem;
    color: var(--tm-oxblood);
  }
  body.tm-cs-v8 .tm-v8-runhead__part:last-child {
    margin-left: auto;
  }
  body.tm-cs-v8 .tm-v8-runhead__part:last-child::before {
    content: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  body.tm-cs-v8 .tm-v8-runhead,
  body.tm-cs-v8 .tm-v8-runhead.is-on {
    transform: none;
    transition: none;
  }
}
@media print {
  body.tm-cs-v8 .tm-v8-runhead,
  body.tm-cs-v8 .tm-v8-sidenotes {
    display: none;
  }
}

/* ---------- 2. (Removed) ---------- */
/* A photo treatment for article pictures and portraits was tried here and
   dropped (Nathan, 2026-10-14): the halftone effect belongs to the
   background photographs only (v7, CSS section 102). Pictures in content
   keep their own colour. */

/* ---------- 3. This season, years ago ---------- */
body.tm-cs-v8 .tm-v8-ago {
  box-sizing: border-box;
  max-width: var(--tm-v3-width, 81.25rem);
  margin: clamp(3rem, 6vw, 4.5rem) auto 0;
  padding-inline: var(--tm-v3-edge, clamp(1.25rem, 4vw, 3rem));
}
body.tm-cs-v8 .tm-v8-ago__inner {
  border-top: 3px solid var(--tm-navy);
  box-shadow: 0 4px 0 -3px var(--tm-navy) inset;
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
}
body.tm-cs-v8 .tm-v8-ago__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1rem clamp(1.5rem, 4vw, 3.5rem);
  align-items: end;
  margin-bottom: clamp(1.75rem, 4vw, 2.75rem);
}
body.tm-cs-v8 .tm-v8-ago__title {
  margin: 0;
  font-family: "Newsreader", serif;
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-weight: 400;
  line-height: 1.05;
  color: var(--tm-navy);
}
body.tm-cs-v8 .tm-v8-ago__title em {
  font-style: italic;
  color: var(--tm-oxblood);
}
body.tm-cs-v8 .tm-v8-ago__dek {
  margin: 0;
  max-width: 34rem;
  font-family: "Newsreader", serif;
  font-size: 1.125rem;
  font-style: italic;
  line-height: 1.5;
  color: var(--tm-ink-soft);
}
body.tm-cs-v8 .tm-v8-ago__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem clamp(1.5rem, 4vw, 3.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
body.tm-cs-v8 .tm-v8-ago__item .tm-v6-sheet {
  --tm-v6-base-ry: -18deg;
  --tm-v6-base-rx: 4deg;
  --tm-v6-base-rz: 0deg;
  display: block;
  max-width: 13rem;
  margin-bottom: 1.25rem;
}
body.tm-cs-v8 .tm-v8-ago__when {
  margin: 0 0 0.35rem;
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--tm-oxblood);
}
body.tm-cs-v8 .tm-v8-ago__issue {
  margin-left: 0.4rem;
  font-weight: 500;
  color: var(--tm-ink-soft);
}
body.tm-cs-v8 .tm-v8-ago__essay {
  display: block;
  font-family: "Newsreader", serif;
  font-size: 1.375rem;
  line-height: 1.25;
  color: var(--tm-navy);
  text-decoration: none;
}
body.tm-cs-v8 .tm-v8-ago__essay:hover,
body.tm-cs-v8 .tm-v8-ago__essay:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
body.tm-cs-v8 .tm-v8-ago__by {
  margin: 0.4rem 0 0;
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 0.875rem;
  color: var(--tm-ink-soft);
}
@media (max-width: 768px) {
  body.tm-cs-v8 .tm-v8-ago__head {
    grid-template-columns: minmax(0, 1fr);
  }
  body.tm-cs-v8 .tm-v8-ago__list {
    grid-template-columns: minmax(0, 1fr);
  }
  body.tm-cs-v8 .tm-v8-ago__item {
    display: grid;
    grid-template-columns: 6.5rem minmax(0, 1fr);
    column-gap: 1.25rem;
    align-items: start;
  }
  body.tm-cs-v8 .tm-v8-ago__item .tm-v6-sheet {
    --tm-v6-base-ry: 14deg;
    grid-row: span 3;
    margin-bottom: 0;
  }
}

/* ---------- 4. The cover grows into its issue ---------- */
/* Same-site page changes cross-fade quickly; a cover opened from the shelf,
   the home page or an issue's neighbours grows into the issue page's cover.
   Both pages must carry v8 (in a preview the script keeps the key on). */
@view-transition {
  navigation: auto;
}
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.18s;
}
::view-transition-group(tm-issue-cover) {
  animation-duration: 0.5s;
  animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1);
}
@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }
}

/* Quotations in articles (added 2026-10-15). Bricks' theme style sets every blockquote in
   Georgia at 1.3em, and Automatic.css paints quotes (and figures holding one) with its
   --blockquote-* grey box, upright text and padding; both beat the older .tm-prose blockquote
   rule, so readers saw large upright Georgia in a grey box. These rules restore the design the
   article editor shows (assets/admin/tm-editor-look.css): block quotes in italic Newsreader with
   a thin rule beside them; pull quotes and creeds centred between two rules. */
body.tm-cs-v8 .tm-prose blockquote,
body.tm-cs-v8 .tm-prose .wp-block-quote {
  margin: var(--space-l) 0;
  padding: 0 0 0 var(--space-m);
  border: 0;
  border-left: 3px solid var(--tm-rule);
  border-radius: 0;
  background: none;
  font-family: "Newsreader", serif;
  font-style: italic;
  font-weight: 400;
  font-size: 0.94em;
  line-height: 1.55;
  color: var(--tm-ink-soft);
}
body.tm-cs-v8 .tm-prose blockquote p,
body.tm-cs-v8 .tm-prose .wp-block-quote p {
  font-family: inherit;
  font-style: inherit;
  font-weight: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  margin: 0 0 0.6em;
}
body.tm-cs-v8 .tm-prose blockquote p:last-of-type { margin-bottom: 0; }
body.tm-cs-v8 .tm-prose blockquote cite,
body.tm-cs-v8 .tm-prose .wp-block-quote cite {
  display: block;
  margin-top: var(--space-s);
  font-family: "IBM Plex Sans", sans-serif;
  font-style: normal;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--tm-ink-soft);
}
body.tm-cs-v8 .tm-prose blockquote.tm-prose__verse p { margin: 0; line-height: 1.65; }

/* Pull quotes and creeds: centred between two rules (the figure loses Automatic.css's box). */
body.tm-cs-v8 .tm-prose figure.wp-block-pullquote {
  margin: var(--space-l) auto;
  max-width: 35rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  font-size: 1em; /* WordPress core sets pull quotes to 1.5em */
}
body.tm-cs-v8 .tm-prose .wp-block-pullquote blockquote,
body.tm-cs-v8 .tm-prose blockquote.tm-prose__creed {
  margin: var(--space-l) auto;
  max-width: 35rem;
  padding: var(--space-m) 0;
  border: 0;
  border-top: 1px solid var(--tm-rule);
  border-bottom: 1px solid var(--tm-rule);
  text-align: center;
  font-style: italic;
  font-size: 1.15em;
  line-height: 1.5;
  color: var(--tm-ink);
}
body.tm-cs-v8 .tm-prose .wp-block-pullquote blockquote { margin: 0 auto; }
body.tm-cs-v8 .tm-prose .wp-block-pullquote p { margin-bottom: var(--space-s); }
body.tm-cs-v8 .tm-prose .wp-block-pullquote cite,
body.tm-cs-v8 .tm-prose blockquote.tm-prose__creed cite {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tm-oxblood);
}

/* Pull quotes set to float beside the text keep to a column, with room around them; on phones they sit in the flow. */
body.tm-cs-v8 .tm-prose figure.wp-block-pullquote.alignleft,
body.tm-cs-v8 .tm-prose figure.wp-block-pullquote.alignright {
  width: 45%;
  max-width: 18rem;
  margin-top: 0.4em;
  margin-bottom: var(--space-s);
}
body.tm-cs-v8 .tm-prose figure.wp-block-pullquote.alignleft { float: left; margin-left: 0; margin-right: var(--space-m); }
body.tm-cs-v8 .tm-prose figure.wp-block-pullquote.alignright { float: right; margin-right: 0; margin-left: var(--space-m); }
body.tm-cs-v8 .tm-prose figure.wp-block-pullquote.alignleft blockquote,
body.tm-cs-v8 .tm-prose figure.wp-block-pullquote.alignright blockquote { font-size: 1em; text-align: left; }
@media (max-width: 700px) {
  body.tm-cs-v8 .tm-prose figure.wp-block-pullquote.alignleft,
  body.tm-cs-v8 .tm-prose figure.wp-block-pullquote.alignright { float: none; width: auto; max-width: none; margin: var(--space-l) 0; }
}


/* ==== tm-v9.css ==== */
/* =============================================================================
   SECTION 104: Cover Story v9: motion, and the lead essay behind the home hero
   (2026-10)
   Scoped to body.tm-cs-v9 (theme includes/tm-cover-v9.php: on with the
   ?tm_v9 preview key, or for everyone once the option tm_cover_story_v9 is
   set). A theme file with js/tm-v9.js, loaded on every page while v9 is on.
   1. Scroll reveals: headings, cards and entries rise into place (classes
      set by the script, so nothing hides without it).
   2. Live feedback: cards lift, covers tilt toward the pointer, buttons press.
   3. Moving texture: the v7 halftone photographs drift with scroll.
   4. The home hero: the lead essay's picture as a faded halftone.
   5. Page changes: the header holds still while the page fades up.
   6. Soft edges: every halftone photograph fades out on all sides.
   Guardrails: transform, translate, scale and opacity only (never layout);
   everything off for prefers-reduced-motion; hover motion only with a fine
   pointer; the photograph is decoration and never sits on body text at
   full strength.
   ============================================================================= */

/* ---------- 1. Scroll reveals ---------- */
/* The script marks only what is below the fold when the page loads
   (.tm-v9-rv), adds .is-in as each scrolls in, and removes both once the
   move is over, so each element's own transitions come back. The stagger
   is a delay the script sets per element. */
@media (prefers-reduced-motion: no-preference) {
  html.tm-v9-js body.tm-cs-v9 .tm-v9-rv {
    transition:
      opacity 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) var(--tm-v9-delay, 0s),
      translate 0.9s cubic-bezier(0.16, 1, 0.3, 1) var(--tm-v9-delay, 0s);
  }
  html.tm-v9-js body.tm-cs-v9 .tm-v9-rv:not(.is-in) {
    opacity: 0;
    translate: 0 1.5rem;
  }
  html.tm-v9-js body.tm-cs-v9 .tm-v9-rv--head:not(.is-in) {
    translate: 0 0.875rem;
  }
}
@media print {
  html.tm-v9-js body.tm-cs-v9 .tm-v9-rv {
    opacity: 1 !important;
    translate: none !important;
  }
}

/* ---------- 2. Live feedback ---------- */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  /* Cards lift; their pictures already zoom (§ card styles). */
  body.tm-cs-v9 :is(.tm-card, .tm-issue-next__card, .tm-v4-next-card) {
    transition: translate 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  body.tm-cs-v9 :is(.tm-card, .tm-issue-next__card, .tm-v4-next-card):hover {
    translate: 0 -0.3rem;
  }
  /* Pictures in essay lists and next-issue cards zoom a touch, inside their
     frame. Bricks gives images a 0.3 s transition on every property, so the
     property is named here. */
  body.tm-cs-v9 .tm-card .tm-card__image {
    transition:
      transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1),
      filter 0.6s ease;
  }
  /* Contents entries nudge toward the reader. */
  body.tm-cs-v9
    :is(
      .tm-home-hero__toc-link,
      .tm-v5-toc__entry,
      .tm-issue-next__item,
      .tm-v4-essay
    ) {
    transition: translate 0.25s cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  body.tm-cs-v9
    :is(
      .tm-home-hero__toc-link,
      .tm-v5-toc__entry,
      .tm-issue-next__item,
      .tm-v4-essay
    ):hover {
    translate: 0.25rem 0;
  }
  /* Covers tilt toward the pointer (the script sets the angles), lifted as
     their own hover already lifts them. */
  html body.tm-cs-v9 .tm-v9-tilt.is-tilting.is-tilting {
    transform: perspective(56rem) translateY(-0.25rem)
      rotateX(var(--tm-v9-rx, 0deg)) rotateY(var(--tm-v9-ry, 0deg));
    transition:
      transform 0.14s linear,
      box-shadow 0.35s ease-out;
  }
}
/* Presses: buttons give a little under the finger or the mouse. */
@media (prefers-reduced-motion: no-preference) {
  body.tm-cs-v9
    :is(
      .btn,
      .brxe-button,
      button,
      input[type="submit"],
      .wpforms-submit,
      .tm-v4-watch,
      .tm-home-hero__read,
      .tm-home-hero__pdf,
      .tm-home-issue__read,
      .tm-home-issue__pdf
    ):active {
    scale: 0.97;
  }
  body.tm-cs-v9
    :is(
      .tm-card,
      .tm-shelf__cover,
      .tm-home-issue__cover,
      .tm-v6-sheet
    ):active {
    scale: 0.985;
  }
}
/* Text links answer a press with a quick dim on every device. */
body.tm-cs-v9 #brx-content a:active {
  opacity: 0.7;
}

/* ---------- 3. Moving texture ---------- */
/* Each v7 photograph (and the home hero's, part 4) sits a little inside its
   section and moves through that room as the section crosses the screen: a
   scroll-driven animation on the section's own view timeline, run by the
   browser's compositor, no script. Browsers without scroll timelines keep
   the photographs still, as in v7. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    body.tm-cs-v9
      :is(
        .tm-home-hero,
        .tm-v4-conf-head,
        .tm-v4-institute .tm-v4-head,
        .tm-v5-history,
        .tm-v5-why,
        .tm-v5-case,
        .tm-v5-reach,
        .tm-v6-quote
      ) {
      view-timeline: --tm-v9-host block;
    }
    body.tm-cs-v9
      :is(
        .tm-home-hero,
        .tm-v4-conf-head,
        .tm-v4-institute .tm-v4-head,
        .tm-v5-history,
        .tm-v5-why,
        .tm-v5-case,
        .tm-v5-reach,
        .tm-v6-quote
      )::before {
      animation: tm-v9-drift linear both;
      animation-timeline: --tm-v9-host;
      animation-range: cover;
    }
    body.tm-cs-v7.tm-cs-v9
      :is(
        .tm-v4-conf-head,
        .tm-v4-institute .tm-v4-head,
        .tm-v5-history,
        .tm-v5-why,
        .tm-v5-case,
        .tm-v5-reach,
        .tm-v6-quote
      )::before {
      top: 1.5rem;
      bottom: 1.5rem;
    }
  }
  @media (prefers-reduced-motion: no-preference) and (max-width: 768px) {
    body.tm-cs-v7.tm-cs-v9
      :is(
        .tm-v4-conf-head,
        .tm-v4-institute .tm-v4-head,
        .tm-v5-history,
        .tm-v5-why,
        .tm-v5-case,
        .tm-v5-reach,
        .tm-v6-quote
      )::before {
      bottom: auto;
    }
  }
}
@keyframes tm-v9-drift {
  from {
    translate: 0 1.5rem;
  }
  to {
    translate: 0 -1.5rem;
  }
}

/* ---------- 4. The home hero ---------- */
/* The current lead essay's picture, rendered as halftone dots (the "-light"
   file: the dots follow the highlights, so cream ink reads as a positive on
   the season field), behind the cover stack and faded toward the title.
   The URL comes from the head (#tm-v9-hero-photo); with none, nothing draws. */
body.tm-cs-v9.home .tm-home-hero {
  position: relative;
  isolation: isolate;
}
body.tm-cs-v9.home .tm-home-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -1.5rem;
  right: 0;
  bottom: -1.5rem;
  width: min(66%, 60rem);
  pointer-events: none;
  background: var(--tm-cream);
  opacity: 0.13;
  -webkit-mask-image:
    var(--tm-v9-hero-photo, none),
    linear-gradient(to right, transparent, black 50%);
  -webkit-mask-composite: source-in;
  mask-image:
    var(--tm-v9-hero-photo, none),
    linear-gradient(to right, transparent, black 50%);
  mask-composite: intersect;
  -webkit-mask-size:
    cover,
    100% 100%;
  mask-size:
    cover,
    100% 100%;
  -webkit-mask-position:
    center,
    0 0;
  mask-position:
    center,
    0 0;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
@media (max-width: 768px) {
  body.tm-cs-v9.home .tm-home-hero::before {
    top: -1.5rem;
    bottom: auto;
    width: 100%;
    height: min(30rem, 60%);
    opacity: 0.1;
    -webkit-mask-image:
      var(--tm-v9-hero-photo, none),
      linear-gradient(to bottom, black 30%, transparent);
    mask-image:
      var(--tm-v9-hero-photo, none),
      linear-gradient(to bottom, black 30%, transparent);
  }
}
@media print {
  body.tm-cs-v9.home .tm-home-hero::before {
    content: none;
  }
}

/* ---------- 5. Page changes ---------- */
/* Extends v8: the header is its own layer, so it holds still (the new one
   shows at once) while the page beneath fades up. The header encloses no
   backdrop blur; keep it that way, or name its rows instead (a named
   element blurs nothing inside it). */
@media (prefers-reduced-motion: no-preference) {
  body.tm-cs-v9 #brx-header {
    view-transition-name: tm-header;
  }
  ::view-transition-old(tm-header) {
    display: none;
  }
  ::view-transition-new(tm-header) {
    animation: none;
  }
  ::view-transition-group(tm-header) {
    animation-duration: 0.3s;
    animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  ::view-transition-old(root) {
    animation: tm-v9-vt-out 0.16s ease-in both;
  }
  ::view-transition-new(root) {
    animation: tm-v9-vt-in 0.36s cubic-bezier(0.2, 0.7, 0.2, 1) 0.05s both;
  }
}
@keyframes tm-v9-vt-out {
  to {
    opacity: 0;
  }
}
@keyframes tm-v9-vt-in {
  from {
    opacity: 0;
    translate: 0 0.75rem;
  }
}

/* ---------- 6. Soft edges on the halftone photographs ---------- */
/* v7 faded each photograph only on the side facing the text, so its other
   edges ended square, and the drift inset (part 3) put those edges inside
   the section. A third mask layer fades every edge, and the side fade now
   eases out at the far edge too, so the photograph dissolves on all sides
   (Nathan, 2026-10-14). */
body.tm-cs-v7.tm-cs-v9
  :is(
    .tm-v4-conf-head,
    .tm-v4-institute .tm-v4-head,
    .tm-v5-history,
    .tm-v5-why,
    .tm-v5-case,
    .tm-v5-reach,
    .tm-v6-quote
  )::before,
body.tm-cs-v9.home .tm-home-hero::before {
  -webkit-mask-image:
    var(--tm-v7-photo, var(--tm-v9-hero-photo, none)),
    linear-gradient(to right, transparent, black 55%, black 80%, transparent),
    linear-gradient(to bottom, transparent, black 25%, black 75%, transparent);
  -webkit-mask-composite: source-in, source-in;
  mask-image:
    var(--tm-v7-photo, var(--tm-v9-hero-photo, none)),
    linear-gradient(to right, transparent, black 55%, black 80%, transparent),
    linear-gradient(to bottom, transparent, black 25%, black 75%, transparent);
  mask-composite: intersect, intersect;
  -webkit-mask-size:
    cover,
    100% 100%,
    100% 100%;
  mask-size:
    cover,
    100% 100%,
    100% 100%;
  -webkit-mask-position:
    right center,
    0 0,
    0 0;
  mask-position:
    right center,
    0 0,
    0 0;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
body.tm-cs-v9.home .tm-home-hero::before {
  -webkit-mask-position:
    center,
    0 0,
    0 0;
  mask-position:
    center,
    0 0,
    0 0;
}
@media (max-width: 768px) {
  body.tm-cs-v7.tm-cs-v9
    :is(
      .tm-v4-conf-head,
      .tm-v4-institute .tm-v4-head,
      .tm-v5-history,
      .tm-v5-why,
      .tm-v5-case,
      .tm-v5-reach,
      .tm-v6-quote
    )::before,
  body.tm-cs-v9.home .tm-home-hero::before {
    -webkit-mask-image:
      var(--tm-v7-photo, var(--tm-v9-hero-photo, none)),
      linear-gradient(to right, transparent, black 18%, black 82%, transparent),
      linear-gradient(to bottom, transparent, black 15%, black 35%, transparent);
    mask-image:
      var(--tm-v7-photo, var(--tm-v9-hero-photo, none)),
      linear-gradient(to right, transparent, black 18%, black 82%, transparent),
      linear-gradient(to bottom, transparent, black 15%, black 35%, transparent);
    -webkit-mask-position:
      center top,
      0 0,
      0 0;
    mask-position:
      center top,
      0 0,
      0 0;
  }
}


/* ==== tm-mobile.css ==== */
/* =============================================================================
   SECTION 101: Phone fixes from the full mobile audit (2026-10-14)
   A theme file loaded on every front-end page (includes/tm-mobile.php), after
   the Cover Story files. Every rule but one sits inside a max-width query, so
   desktop is untouched; the one (no donate prompt on the Give page) applies
   everywhere. Audit method and findings: clients repo
   docs/claude/mobile-audit-2026-10.md.
   ============================================================================= */

/* ---------- 1. Header: the logo and menu row stays in reach ---------- */
/* On phones only the masthead was sticky, inside a header box no taller than
   itself, so it scrolled away and the menu was out of reach on long pages.
   The whole header is sticky instead, offset by the top bar's height (set by
   the #tm-topbar-height script), so the dark top bar scrolls off and the
   logo and menu row stays pinned. */
@media (max-width: 768px) {
  .tm-cs-v2 #brx-header {
    position: sticky;
    top: calc(
      var(--wp-admin--admin-bar--height, 0px) - var(--tm-topbar-h, 0px)
    );
    z-index: 300;
  }
}

/* ---------- 2. Home: the Institute emblem ---------- */
/* The emblem's box shrank to its column's minimum while the image kept its
   clamp() width, so it started in the middle and spilled right. */
@media (max-width: 900px) {
  .tm-institute__visual {
    justify-self: stretch;
    width: 100%;
    justify-content: center;
  }
  /* Pixels, not vw or rem: on a phone both follow the layout viewport
     (the root font size is fluid), which grows when content overflows, so
     the width fed itself (it reached 525 px). */
  .tm-institute__visual {
    min-width: 0;
  }
  /* The real cause: the Bricks global class on the emblem (.tm-institute__seal-image)
     sets min-width: 150% under 992 px, so the image was 1.5 times its column and
     spilled right. min-width: 0 undoes it; the width also outranks the global
     rule html body.tm-cs-v3.home .tm-institute__seal-image { width: clamp(9rem, 40vw, 13rem) }. */
  html body .tm-institute__visual .tm-institute__seal-image,
  html body.tm-cs-v3.home .tm-institute__visual .tm-institute__seal-image {
    width: 240px;
    min-width: 0;
    max-width: 100%;
    margin-inline: auto;
  }
  .tm-institute__visual .tm-institute__seal-image img {
    width: 100%;
    height: auto;
  }
}

/* ---------- 3. Form fields: 16 px, so iPhones do not zoom on tap ---------- */
/* Safari on iPhone zooms the page into any field under 16 px when it is
   focused. The WPForms fields (newsletter, contact, print edition) and the
   sort menus on the listings were 15 px. */
@media (max-width: 768px) {
  html
    body
    :is(
      .wpforms-container
        input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
      .wpforms-container select,
      .wpforms-container textarea,
      select[id$="-sort"]
    ) {
    font-size: 16px;
  }
}

/* ---------- 4. Tap targets: at least 24 px, most 44 px ---------- */
@media (max-width: 768px) {
  /* "On this page" strips (About, Give, Print edition, Institute, Conference). */
  body .tm-v4-strip a {
    display: inline-block;
    padding-block: 0.6875rem;
  }
  body .tm-v4-strip li + li::before {
    vertical-align: middle;
  }
  /* Filters on the listings, author pages and search. */
  body
    :is(
      .tm-archive-filterbar__filter,
      .tm-author-filterbar__filter,
      .tm-search-refine__link
    ) {
    min-width: 2.75rem;
    min-height: 2.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  /* Footnote return arrows in articles. */
  body a.tm-footnotes__back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    min-height: 2.75rem;
    margin-block: -0.75rem;
  }
  /* Writers' names under each article in an issue's contents. */
  body .tm-v5-toc__names a {
    display: inline-block;
    padding-block: 0.375rem;
  }
  /* The news list's dates are links. */
  body .tm-news-archive__item-date a {
    display: inline-block;
    padding-block: 0.375rem;
  }
  /* About: the run of issues, one mark per issue; wider marks, wider gaps,
     so each is a 24 px target. */
  body.tm-cs-v5 .tm-v5-run__years {
    grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  }
  body.tm-cs-v5 .tm-v5-run__marks {
    gap: 0.25rem;
  }
  body.tm-cs-v5 a.tm-v5-run__mark {
    width: 1.25rem;
    height: 2rem;
  }
}

/* ---------- 5. The donate prompt: a slim bar on phones, none on Give ---------- */
/* It covered about a sixth of a phone screen on every page, Give included. */
@media (max-width: 768px) {
  html body .tm-donate-prompt {
    left: 0.75rem;
    right: 0.75rem;
    bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
    width: auto;
    max-width: none;
    padding: 0.875rem 3rem 0.875rem 1rem;
  }
  html body .tm-donate-prompt .tm-donate-prompt__body {
    display: none;
  }
  html body .tm-donate-prompt .tm-donate-prompt__title {
    margin: 0.125rem 0 0.625rem;
    font-size: 1.0625rem;
  }
  html body .tm-donate-prompt .tm-donate-prompt__close {
    min-width: 2.75rem;
    min-height: 2.75rem;
  }
}
html body.page-id-6052 .tm-donate-prompt {
  display: none;
}

/* ---------- 6. One alignment per section: left, like the text ---------- */
@media (max-width: 768px) {
  /* Home bands (Print, Institute) and the quote band: buttons and links sit
     on the text's left edge at their own width, not full width with
     centred labels. */
  body :is(.tm-print__btn-row, .tm-institute__btn-row) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
  body :is(.tm-print__btn-row, .tm-institute__btn-row) > .btn {
    width: auto;
    text-align: left;
  }
  body
    :is(.tm-print__btn-row, .tm-institute__btn-row)
    > .btn:not(.btn--primary) {
    padding-inline: 0;
  }
  body.tm-cs-v6 .tm-v6-quote :is(.tm-v6-quote__source, .tm-v6-quote__title) {
    text-align: left;
  }
  /* Articles: More Articles on the page edge with a left heading. */
  body .tm-article-more {
    padding-inline: 0;
  }
  body .tm-article-more .tm-article-more__title {
    align-self: stretch;
    width: 100%;
    text-align: left;
    margin-inline: 0;
  }
  /* Issue pages: the cover in the head is centred under the contents. */
  body.tm-cs-v3
    [class*="issue-head"]
    :is(.tm-home-hero__stack, .tm-home-hero__front) {
    margin-inline: auto;
  }
  /* Section strips: no separator dot at the start of a wrapped line. */
  body .tm-v4-strip ul {
    gap: 0 1.25rem;
  }
  body .tm-v4-strip li + li::before {
    content: none;
  }
}

/* ---------- 7. Forms: one field style, visible on cream ---------- */
@media (max-width: 768px) {
  html
    body
    .wpforms-container
    :is(
      input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not(
          [type="submit"]
        ),
      select,
      textarea
    ) {
    background-color: var(--tm-bone);
    border: 1px solid color-mix(in srgb, var(--tm-ink) 32%, var(--tm-bone));
  }
  /* Split fields (first and last name, city and state, postal code) stack full width.
     WPForms' own grid rules carry four or five classes (.wpforms-field .wpforms-field-row
     .wpforms-one-half { width: 50% }, ...field-row-block { padding: 0 10px } and its
     :only-child variant), so these selectors repeat that chain plus html body to win
     without !important. Until 2026-10-15 they had only .wpforms-container and lost: the
     boxes stacked at half width, the second one indented 10px, and the wrapping column
     could show a scrollbar on phones. */
  html body .wpforms-container .wpforms-form .wpforms-field .wpforms-field-row:has(> .wpforms-one-half) {
    flex-direction: column;
    flex-wrap: nowrap;
    overflow: visible;
  }
  html body .wpforms-container .wpforms-form .wpforms-field .wpforms-field-row .wpforms-field-row-block {
    width: 100%;
    max-width: none;
    margin-left: 0;
    padding-left: 0;
    padding-right: 0;
    float: none;
  }
  html
    body
    .wpforms-container
    .wpforms-field-row-block
    + .wpforms-field-row-block {
    margin-top: 0.75rem;
  }
  html body .wpforms-container .wpforms-submit-container {
    margin-top: 1.5rem;
  }
}

/* ---------- 8. Spacing the v4 pages lost on phones ---------- */
@media (max-width: 768px) {
  body.tm-cs-v4 .tm-v4-apply :is(p + p, h3 + p, figure + h3) {
    margin-top: 0.875rem;
  }
  body.tm-cs-v4 .tm-v4-apply__support {
    margin-top: 1rem;
  }
  body.tm-cs-v4 .tm-v4-panel__name {
    margin-top: 0.5rem;
  }
  body.tm-cs-v4 .tm-v4-panel :is(p + p, h3 + p, h4 + p) {
    margin-top: 0.75rem;
  }
}

/* ---------- 9. Small covers: titles that fit ---------- */
@media (max-width: 600px) {
  /* The journal's shelf: long cover titles stop at three lines, clear of
     the author line. */
  body .tm-shelf__cover-lead {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  body .tm-shelf__cover-by {
    margin-top: 0.375rem;
  }
  /* Previous and next issue: words break inside the narrow cover instead
     of running out of it. */
  body.tm-cs-v3 .tm-issue-nav .tm-home-issue__cover-lead {
    font-size: 0.875rem;
    line-height: 1.15;
    hyphens: auto;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* ---------- 10. The donate prompt as one row ---------- */
@media (max-width: 768px) {
  html body .tm-donate-prompt {
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }
  html body .tm-donate-prompt .tm-donate-prompt__eyebrow {
    display: none;
  }
  html body .tm-donate-prompt .tm-donate-prompt__title {
    flex: 1;
    margin: 0;
    font-size: 1rem;
    line-height: 1.25;
  }
  html body .tm-donate-prompt .btn {
    flex: none;
    margin: 0;
  }
}

/* ---------- 11. The last small tap targets (re-audit) ---------- */
@media (max-width: 768px) {
  body
    :is(
      a.tm-v4-fac__count,
      a.tm-v6-printed__link,
      .tm-v4-speaker a,
      .tm-v4 summary
    ) {
    display: inline-block;
    padding-block: 0.375rem;
  }
}

/* ---------- 12. The phone menu: one screen, still ---------- */
/* The menu ran to nearly two screens (seven 100 px rows, then search, the
   issue, the print button, links and contact lines), and on phones the page
   behind it could still be dragged, sideways too. Now the page behind is
   held (body overflow, as before), the panel never scrolls sideways, and the menu is set to fit one
   screen: the list on top, the issue, print and small links pinned to the
   foot. Shorter phones drop the one-line descriptions, the shortest drop the
   issue card; the panel only scrolls if a phone is shorter still (landscape).
   Contact lines and social icons are left to the Contact page and footer. */
@media (max-width: 768px) {
  /* body only: hiding overflow on html as well makes body its own scroll
     container, the sticky header stops sticking, and a menu opened
     mid-page puts the logo and Close button off screen. */
  body.tm-cs-v2.tm-nav-is-open {
    overflow: hidden;
    overscroll-behavior: none;
  }
  html body.tm-cs-v2 .tm-masthead.tm-cs nav.tm-nav--open {
    display: flex;
    flex-direction: column;
    padding: 4.75rem 0 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    touch-action: pan-y;
  }
  html body.tm-cs-v2 .tm-masthead.tm-cs nav.tm-nav--open .tm-nav__inner {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    width: 100%;
    max-width: 100%;
    padding: 0 clamp(1.25rem, 6vw, 2rem) max(1rem, env(safe-area-inset-bottom));
    border: 0;
  }
  html body.tm-cs-v2 .tm-masthead.tm-cs nav.tm-nav--open .tm-nav__list {
    width: 100%;
    padding: 0.25rem 0 0;
    gap: 0;
  }
  html body.tm-cs-v2 .tm-masthead.tm-cs nav.tm-nav--open .tm-nav__item {
    width: 100%;
  }
  html body.tm-cs-v2 .tm-masthead.tm-cs nav.tm-nav--open .tm-nav__link {
    grid-template-columns: minmax(0, 1fr) 1.25rem;
    column-gap: 0.75rem;
    width: 100%;
    padding: 0.45rem 0;
    font-size: 1.625rem;
    line-height: 1.1;
  }
  html body.tm-cs-v2 .tm-masthead.tm-cs nav.tm-nav--open .tm-nav__link::after {
    width: 1.25rem;
    height: 0.75rem;
    opacity: 0.7;
  }
  html body.tm-cs-v2 .tm-masthead.tm-cs nav.tm-nav--open .tm-nav__desc {
    display: block;
    margin-top: 0.1rem;
    font-size: 0.875rem;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  html
    body.tm-cs-v2
    .tm-masthead.tm-cs
    nav.tm-nav--open
    .tm-nav__drawer-search {
    width: 100%;
    margin: 0.5rem 0 0;
    padding: 0.125rem 0;
  }
  html
    body.tm-cs-v2
    .tm-masthead.tm-cs
    nav.tm-nav--open
    .tm-nav__drawer-search-input {
    padding: 0.5rem 0;
    font-size: 1rem;
  }
  /* The foot: issue, print, small links; pinned to the bottom. */
  html
    body.tm-cs-v2
    .tm-masthead.tm-cs
    nav.tm-nav--open
    .brxe-shortcode:has(> .tm-nav-extras) {
    margin-top: auto;
    width: 100%;
  }
  html body.tm-cs-v2 .tm-nav--open .tm-nav-extras {
    display: grid;
    gap: 0.5rem;
    padding: 1rem 0 0;
  }
  html body.tm-cs-v2 .tm-nav--open a.tm-nav-extras__issue {
    gap: 0.875rem;
    padding: 0.5rem 0.75rem;
  }
  html body.tm-cs-v2 .tm-nav--open .tm-nav-extras__cover {
    width: 2.5rem;
    padding: 0.25rem;
  }
  html body.tm-cs-v2 .tm-nav--open .tm-nav-extras__cover span:first-child {
    font-size: 1rem;
  }
  html body.tm-cs-v2 .tm-nav--open .tm-nav-extras__cover span:last-child {
    font-size: 0.5625rem;
  }
  html body.tm-cs-v2 .tm-nav--open .tm-nav-extras__title {
    font-size: 1.125rem;
  }
  html body.tm-cs-v2 .tm-nav--open .tm-nav-extras__text {
    flex: 1 1 auto;
    min-width: 0;
  }
  html body.tm-cs-v2 .tm-nav--open a.tm-nav-extras__cta {
    justify-content: center;
    gap: 0.75rem;
    min-height: 2.75rem;
    margin: 0;
  }
  html body.tm-cs-v2 .tm-nav--open a.tm-nav-extras__cta .tm-nav-extras__arrow {
    margin: 0;
  }
  html body.tm-cs-v2 .tm-nav--open .tm-nav-extras__links {
    justify-content: center;
    gap: 0 1.75rem;
    margin: 0;
  }
  html body.tm-cs-v2 .tm-nav--open .tm-nav-extras__foot {
    display: none;
  }
}
@media (max-width: 768px) and (max-height: 780px) {
  html body.tm-cs-v2 .tm-masthead.tm-cs nav.tm-nav--open .tm-nav__desc {
    display: none;
  }
  html body.tm-cs-v2 .tm-masthead.tm-cs nav.tm-nav--open .tm-nav__link {
    padding: 0.5rem 0;
    font-size: 1.5rem;
  }
  html body.tm-cs-v2 .tm-nav--open .tm-nav-extras__sub {
    display: none;
  }
  html body.tm-cs-v2 .tm-masthead.tm-cs nav.tm-nav--open .tm-nav__link::after {
    grid-row: 1;
  }
}
@media (max-width: 768px) and (max-height: 620px) {
  html body.tm-cs-v2 .tm-masthead.tm-cs nav.tm-nav--open .tm-nav__link {
    padding: 0.45rem 0;
    font-size: 1.375rem;
  }
  html body.tm-cs-v2 .tm-nav--open a.tm-nav-extras__issue {
    display: none;
  }
  html body.tm-cs-v2 .tm-nav--open .tm-nav-extras {
    padding-top: 0.75rem;
  }
}

/* ---------- 13. The phone menu: the logo stays put ---------- */
/* Opening the menu moved the logo: it jumped from the centre to the left,
   drifted down and shrank in two steps (its picture inherits Bricks'
   0.3 s transition on every property, so size and position animated
   through layout, which stutters on phones). Now the logo keeps its place
   and size and only turns cream, a filter fade the GPU draws; the Close
   label that pushed it aside is dropped (the X stays, and the button keeps
   its "Close navigation menu" name). */
@media (max-width: 768px) {
  html
    body.tm-cs-v2.tm-nav-is-open
    .tm-masthead.tm-cs
    .tm-masthead__logo.tm-masthead__logo {
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    justify-content: center !important;
  }
  html
    body.tm-cs-v2.tm-nav-is-open
    .tm-masthead.tm-cs
    .tm-masthead__logo
    .tm-masthead__logo-img,
  html
    body.tm-cs-v2.tm-nav-is-open
    .tm-masthead.tm-cs
    .tm-masthead__logo
    .tm-masthead__logo-img
    img {
    max-width: min(100%, 300px) !important;
    max-height: 64px !important;
  }
  html body.tm-cs-v2 .tm-masthead.tm-cs .tm-masthead__logo,
  html body.tm-cs-v2 .tm-masthead.tm-cs .tm-masthead__logo a,
  html body.tm-cs-v2 .tm-masthead.tm-cs .tm-masthead__logo-img img {
    transition: filter 0.2s ease-out;
  }
  html body.tm-cs-v2.tm-nav-is-open .tm-masthead.tm-cs .tm-nav__toggle::before {
    content: none;
  }
  /* With the top bar hidden while open, pin the header at the very top
     at once (the --tm-topbar-h offset would lift it for a frame). */
  .tm-cs-v2.tm-nav-is-open #brx-header {
    top: var(--wp-admin--admin-bar--height, 0px);
  }
}
@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
  html body.tm-cs-v2 .tm-masthead.tm-cs .tm-masthead__logo-img img {
    transition: none;
  }
}

/* ---------- 14. No top bar on phones ---------- */
/* The dark top bar (the current issue, Contact, News, Give) repeats what the
   phone menu already holds, and took 64 px above the logo (Nathan,
   2026-10-14). On phones it is gone; its issue-colour line moves to the top
   of the logo row, and the #tm-topbar-height script records 0, so the header
   pins flush with the top. */
@media (max-width: 768px) {
  .tm-cs-v2 #brx-header .tm-topbar.tm-cs {
    display: none;
  }
  .tm-cs-v2 #brx-header .tm-masthead.tm-cs {
    border-top: 4px solid var(--tm-shelf-cover, var(--tm-oxblood));
  }
}

/* ---------- 15. Search beside the logo on phones ---------- */
/* The menu button's mirror on the left of the logo row: the same 45 px
   target, the same 20 px inset, centred on the row. The link is printed
   next to the menu button by includes/tm-mobile.php (the header's own
   search link lives in the menu panel, out of the row). Hidden while the
   menu is open, which has its own search, and at desktop widths, where the
   nav row has the search button (Nathan, 2026-10-14). */
.tm-masthead__search {
  display: none;
}
@media (max-width: 768px) {
  .tm-cs-v2 #brx-header .tm-masthead__search {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 45px;
    height: 45px;
    color: var(--tm-ink);
    z-index: 2;
  }
  .tm-cs-v2 #brx-header .tm-masthead__search:focus-visible {
    outline: 2px solid var(--tm-oxblood);
    outline-offset: 2px;
  }
  .tm-cs-v2.tm-nav-is-open #brx-header .tm-masthead__search {
    display: none;
  }
}

/* ---------- 16. The header steps aside while reading ---------- */
/* Scrolling down slides the pinned logo row up out of the way; any scroll up
   brings it straight back (Nathan, 2026-10-15). The #tm-header-autohide
   script sets body.tm-hdr-up, never near the top of the page, while the
   menu is open or while anything in the header has focus. Article contents
   bar follows it (CSS 105). Reduced motion: it still hides, without the
   slide. */
@media (max-width: 768px) {
  .tm-cs-v2 #brx-header {
    transition: translate 240ms cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  .tm-cs-v2.tm-hdr-up:not(.tm-nav-is-open) #brx-header {
    /* Pixels, not a percentage, so scripts can read the computed shift. */
    translate: 0 calc(-1 * var(--tm-hdr-h, 100%) - 8px);
  }
}
@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
  .tm-cs-v2 #brx-header {
    transition: none;
  }
}