@font-face {
  font-family: 'Outfit';
  src: url('/assets/Outfit-Regular-v1.woff') format('woff');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'Outfit';
  src: url('/assets/Outfit-Bold-v1.woff') format('woff');
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: 'Outfit';
  src: url('/assets/Outfit-Black-v1.woff') format('woff');
  font-style: normal;
  font-weight: 900;
  font-display: swap;
}

:root {
  --paper: #f1eee6;
  --paper-deep: #e4dfd3;
  --surface: #faf8f2;
  --ink: #071a38;
  --brand-blue-primary: #00549e;
  --brand-blue-accent: #2ea3f2;
  --editorial-night: #00549e;
  --editorial-night-raised: #0d2b59;
  --editorial-night-deep: #030e20;
  --editorial-night-line: color-mix(in srgb, var(--brand-blue-accent) 42%, transparent);
  --ink-soft: #233550;
  --ink-faint: #647087;
  --line: rgb(7 26 56 / 18%);
  --line-strong: rgb(7 26 56 / 32%);
  --signal: #ef4b33;
  --signal-deep: #c93824;
  --signal-ink: #071a38;
  --blueprint: #00549e;
  --blueprint-ink: white;
  --display: 'Iowan Old Style', 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
  --sans: 'Outfit', 'Avenir Next', sans-serif;
  --shell: 76rem;
  --reading: 46rem;
  --pad: clamp(1.1rem, 3vw, 2rem);
  --shadow: 0 32px 80px -48px rgb(7 26 56 / 68%);
}

* {
  box-sizing: border-box;
}

/* Titles arrive from the CMS with unspaced punctuation ("Meanings:Unraveling"),
   which reads as one long token and forces horizontal scroll in narrow columns. */
h1, h2, h3, h4, h5, h6 {
  overflow-wrap: anywhere;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 320px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.08rem;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
}

body::before {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  content: '';
  opacity: 0.08;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E");
}

img,
svg,
video {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

button,
input,
textarea {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

::selection {
  background: var(--signal);
  color: var(--signal-ink);
}

:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--blueprint) 72%, white);
  outline-offset: 4px;
}

@media (forced-colors: active) {
  :focus-visible { outline: 3px solid CanvasText; }
  :where(button, input, select, textarea, dialog) { border-color: CanvasText; }
}

.skip-link {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 200;
  padding: 0.75rem 1rem;
  background: var(--editorial-night);
  color: white;
  transform: translateY(-150%);
  transition: transform 0.2s ease;
}

.skip-link:focus {
  transform: none;
}

.reading-progress {
  position: fixed;
  inset: 0 auto auto 0;
  z-index: 120;
  width: 0;
  height: 3px;
  background: var(--signal);
}

.shell {
  width: min(100%, var(--shell));
  margin-inline: auto;
  padding-inline: var(--pad);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  color: var(--signal-deep);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.eyebrow::before {
  width: 1.8rem;
  height: 2px;
  content: '';
  background: var(--signal);
}

.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.75rem;
  padding-bottom: 0.85rem;
  border-bottom: 2px solid var(--ink);
}

.section-heading h2 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.75rem, 3vw, 2.45rem);
  line-height: 1.05;
  letter-spacing: -0.035em;
}

.section-heading a {
  color: var(--signal-deep);
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
}

.home-hero {
  position: relative;
  min-height: min(78vh, 54rem);
  overflow: hidden;
  background: var(--editorial-night);
  color: white;
}

.home-hero__media,
.home-hero__media::after {
  position: absolute;
  inset: 0;
}

.home-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.72;
  animation: hero-drift 16s ease-out both;
}

.home-hero__media::after {
  content: '';
  background:
    linear-gradient(90deg, rgba(9, 12, 17, 0.95) 0%, rgba(9, 12, 17, 0.77) 42%, rgba(9, 12, 17, 0.12) 78%),
    linear-gradient(0deg, rgba(9, 12, 17, 0.7), transparent 55%);
}

.home-hero__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: end;
  min-height: min(78vh, 54rem);
  padding-block: clamp(5rem, 12vw, 9rem) clamp(3.5rem, 8vw, 6rem);
}

.home-hero .eyebrow {
  color: #ff8067;
}

.home-hero h1 {
  max-width: 12ch;
  margin: 1rem 0 0;
  font-family: var(--display);
  font-size: clamp(3.6rem, 10vw, 8.6rem);
  font-weight: 600;
  line-height: 0.82;
  letter-spacing: -0.065em;
}

.home-hero h1 .home-hero__title-primary,
.home-hero h1 .home-hero__title-accent {
  display: block;
}

.home-hero h1 .home-hero__title-primary {
  color: white;
  font-style: normal;
}

.home-hero h1 .home-hero__title-accent {
  display: block;
  color: #ff6547;
  font-style: italic;
}

.home-hero__copy {
  display: grid;
  grid-template-columns: minmax(0, 38rem) auto;
  align-items: end;
  gap: 2rem;
  margin-top: clamp(2rem, 5vw, 3.5rem);
}

.home-hero__copy p {
  max-width: 48ch;
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: clamp(1.08rem, 2vw, 1.32rem);
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0.75rem 1.25rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--signal);
  color: var(--signal-ink);
  font-size: 0.94rem;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.button:hover {
  background: white;
  color: var(--editorial-night);
  transform: translateY(-2px);
}

.button--ghost {
  border-color: rgba(255, 255, 255, 0.42);
  background: transparent;
  color: inherit;
}

.consent-banner {
  position: fixed;
  right: clamp(1rem, 2vw, 1.5rem);
  bottom: clamp(1rem, 2vw, 1.5rem);
  left: auto;
  z-index: 300;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
  width: min(22rem, calc(100% - 2rem));
  max-height: calc(100dvh - 2rem);
  padding: clamp(1.1rem, 2vw, 1.4rem);
  overflow-y: auto;
  border: 1px solid var(--line-strong);
  border-radius: 0.85rem;
  background: var(--surface);
  box-shadow: 0 26px 80px rgba(17, 21, 28, 0.24);
  overscroll-behavior: contain;
}

.consent-banner[hidden] {
  display: none;
}

body:has(.consent-banner:not([hidden])) {
  padding-bottom: 19rem;
}

@media (min-width: 621px) {
  body:has(.consent-banner:not([hidden])) .home-hero__copy {
    grid-template-columns: minmax(0, 32rem);
    gap: 1rem;
  }
}

.consent-banner h2 {
  max-width: 35rem;
  margin: 0.25rem 0 0.5rem;
  font-family: var(--display);
  font-size: clamp(1.35rem, 2vw, 1.55rem);
  line-height: 1.08;
}

.consent-banner p {
  max-width: 52rem;
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.86rem;
  line-height: 1.48;
}

.consent-banner p a {
  color: var(--blueprint);
  font-weight: 600;
}

.consent-banner__actions {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
  gap: 0.65rem;
}

.consent-banner__actions .button {
  min-width: 0;
  min-height: 3rem;
  padding: 0.65rem 0.75rem;
  font-size: 0.84rem;
  line-height: 1.2;
}

.button--quiet {
  border-color: var(--line-strong);
  background: transparent;
  color: var(--ink);
}

.privacy-choices {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 250;
  padding: 0.55rem 0.8rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-soft);
  font-size: 0.76rem;
  font-weight: 600;
  box-shadow: 0 10px 30px rgba(17, 21, 28, 0.12);
  cursor: pointer;
}

.privacy-choices[hidden] {
  display: none;
}

.home-section {
  margin-top: clamp(4.5rem, 9vw, 8rem);
}

.editorial-lead {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(18rem, 0.85fr);
  gap: clamp(1.5rem, 5vw, 4rem);
  align-items: center;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.editorial-lead__image {
  width: 100%;
  min-width: 0;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--paper-deep);
}

.editorial-lead__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.editorial-lead:hover img {
  transform: scale(1.035);
}

.editorial-lead h2,
.editorial-lead h3 {
  margin: 0.8rem 0;
  font-family: var(--display);
  font-size: clamp(2rem, 4.5vw, 3.7rem);
  line-height: 1.02;
  letter-spacing: -0.04em;
}

.editorial-lead p {
  margin: 0;
  color: var(--ink-soft);
}

.story-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.4rem, 3vw, 2.2rem);
}

.story-card {
  display: flex;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
}

.story-card--text {
  min-height: 15rem;
  padding: clamp(1.2rem, 2.5vw, 1.75rem);
  border: 1px solid var(--line);
  border-top: 3px solid var(--signal);
  background: var(--surface);
}

.story-card--text .eyebrow { margin-top: 0; }
.story-card--text time { margin-top: auto; padding-top: 1.5rem; }

.story-card__image {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--paper-deep);
}

.story-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.story-card:hover img {
  transform: scale(1.045);
}

.story-card .eyebrow {
  margin-top: 1rem;
  font-size: 0.68rem;
}

.story-card h3 {
  margin: 0.65rem 0 0;
  font-family: var(--display);
  font-size: clamp(1.18rem, 2vw, 1.45rem);
  line-height: 1.15;
  letter-spacing: -0.025em;
}

.story-card p,
.story-card time {
  margin: 0.65rem 0 0;
  color: var(--ink-soft);
  font-size: 0.93rem;
}

.story-card:hover h3 {
  color: var(--signal-deep);
}

/* Posts pulled in from X, rendered as first-party markup. */
.social-posts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 1.75rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.social-post a {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  justify-content: space-between;
  height: 100%;
  padding: 1.15rem 1.25rem;
  border: 1px solid var(--line);
  background: var(--surface);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.social-post a:hover {
  border-color: var(--line-strong);
  transform: translateY(-2px);
}

.social-post p {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.5;
}

.social-post__meta {
  color: var(--ink-faint);
  font-size: 0.8rem;
  letter-spacing: 0.02em;
}

.manifesto {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(2rem, 7vw, 7rem);
  align-items: start;
  margin-block: clamp(5rem, 11vw, 10rem);
  padding-block: clamp(3rem, 7vw, 6rem);
  border-block: 1px solid var(--line-strong);
}

.manifesto h2 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(2.4rem, 6vw, 5.5rem);
  line-height: 0.95;
  letter-spacing: -0.055em;
}

.manifesto p {
  max-width: 52ch;
  margin: 0 0 1rem;
  color: var(--ink-soft);
  font-size: clamp(1.1rem, 2vw, 1.35rem);
}

.subcategory-callout {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(2rem, 7vw, 7rem);
  align-items: start;
  margin-bottom: clamp(3rem, 7vw, 6rem);
  padding-block: clamp(2rem, 5vw, 4rem);
  border-block: 1px solid var(--line-strong);
}

.subcategory-callout h2 {
  margin: 0.75rem 0 0;
  font-family: var(--display);
  font-size: clamp(2.4rem, 6vw, 5rem);
  line-height: 0.95;
  letter-spacing: -0.055em;
}

.subcategory-callout p {
  max-width: 50ch;
  margin: 0 0 1.4rem;
  color: var(--ink-soft);
  font-size: clamp(1.05rem, 2vw, 1.3rem);
}

.archive-hero,
.page-hero {
  padding-block: clamp(4.5rem, 10vw, 9rem) clamp(2.5rem, 6vw, 5rem);
}

.archive-hero h1,
.page-hero h1 {
  max-width: 13ch;
  margin: 1rem 0 0;
  font-family: var(--display);
  font-size: clamp(3.1rem, 8vw, 7rem);
  font-weight: 600;
  line-height: 0.9;
  letter-spacing: -0.06em;
}

.archive-hero p,
.page-hero p {
  max-width: 50ch;
  margin: 1.5rem 0 0;
  color: var(--ink-soft);
  font-size: clamp(1.12rem, 2.5vw, 1.45rem);
}

.archive-tools {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: 1.5rem 0 2.5rem;
  padding-block: 1.15rem;
  border-block: 1px solid var(--line);
}

.filter-field,
.search-field {
  width: min(100%, 34rem);
  min-height: 3rem;
  padding: 0.75rem 0;
  border: 0;
  border-bottom: 2px solid var(--ink);
  border-radius: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
}

.filter-field:focus,
.search-field:focus {
  border-color: var(--signal);
}

.archive-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.archive-item {
  border-top: 1px solid var(--line);
}

.archive-item:last-child {
  border-bottom: 1px solid var(--line);
}

.archive-item a {
  display: grid;
  grid-template-columns: 10rem minmax(0, 1fr) auto;
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: center;
  padding-block: 1.35rem;
  text-decoration: none;
}

.archive-item img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--paper-deep);
}

.archive-item h2,
.archive-item h3 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.2rem, 2.5vw, 1.75rem);
  line-height: 1.12;
  letter-spacing: -0.03em;
}

.archive-item p {
  max-width: 62ch;
  margin: 0.45rem 0 0;
  color: var(--ink-soft);
  font-size: 0.94rem;
}

.archive-item time,
.archive-item__arrow {
  color: var(--ink-faint);
  font-size: 0.85rem;
}

.archive-item:hover h2,
.archive-item:hover h3,
.archive-item:hover .archive-item__arrow {
  color: var(--signal-deep);
}

.archive-more {
  margin-top: 1.35rem;
  border-radius: 0;
}

.empty-state {
  padding: 3rem 0;
  color: var(--ink-soft);
}

.article-page__main { overflow: clip; }

.article-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--editorial-night);
  color: white;
}

.article-hero::before {
  position: absolute;
  inset: 0 auto auto 0;
  z-index: 2;
  width: min(36rem, 42vw);
  height: 3px;
  background: var(--signal);
  content: '';
}

.article-hero__inner {
  position: relative;
  z-index: 1;
  /* Article headers are compact reading landmarks, not a second homepage
     hero. Keep the same navy/cream editorial treatment while bringing the
     featured image and body into view sooner. */
  padding-block: max(5.75rem, var(--chrome-header-height, 5.25rem)) clamp(2rem, 3.5vw, 3rem);
}

.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-bottom: 2rem;
  color: var(--ink-faint);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.breadcrumbs a {
  text-decoration: none;
}

.article-hero .breadcrumbs {
  margin-bottom: clamp(1.1rem, 2.1vw, 1.75rem);
  color: rgb(255 255 255 / 58%);
}

.article-hero .breadcrumbs a:hover { color: white; }

.article-hero h1 {
  max-width: 30ch;
  margin: 0;
  color: white;
  font-family: var(--display);
  font-size: clamp(2.8rem, 5vw, 5.1rem);
  font-weight: 400;
  line-height: 0.94;
  letter-spacing: -0.06em;
}

.article-standfirst {
  max-width: 64ch;
  margin: 1rem 0 0;
  color: rgb(255 255 255 / 76%);
  font-size: clamp(1rem, 1.7vw, 1.2rem);
  line-height: 1.4;
}

.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.4rem;
  margin-top: 1rem;
  color: rgb(255 255 255 / 62%);
  font-size: 0.84rem;
}

.article-meta > * + *::before {
  margin-right: 1.4rem;
  color: var(--signal);
  content: '/';
}

.article-feature-wrap {
  background: linear-gradient(180deg, var(--editorial-night) 0 4rem, var(--paper) 4rem 100%);
}

.article-feature {
  /* Keep the lead image wider than the reading column without letting a
     portrait or square source dominate the first screenful of the article. */
  width: min(100%, 60rem);
  margin: 0 auto;
  padding-inline: var(--pad);
}

.article-feature img {
  width: 100%;
  height: clamp(18rem, 34vw, 28rem);
  object-fit: contain;
  object-position: center;
  border: 1px solid var(--line-strong);
  border-top: 3px solid var(--blueprint);
  background: var(--surface);
  box-shadow: var(--shadow);
}

/* Wide photographs can fill the capped frame. Square, portrait, logo, and
   diagram assets retain the safer contained treatment above. */
.article-feature--cover img { object-fit: cover; }

.article-hero .article-audio {
  background: var(--surface);
  color: var(--ink);
}

.article-hero .article-tags a,
.article-hero .article-tags span {
  padding: 0.3rem 0.65rem;
  border: 1px solid rgb(255 255 255 / 32%);
  border-radius: 0;
  color: rgb(255 255 255 / 78%);
  font-size: 0.78rem;
  text-decoration: none;
}

.article-hero .article-tags a:hover {
  border-color: var(--signal);
  color: white;
}

.article-body,
.page-body {
  width: min(100%, var(--reading));
  margin: clamp(3rem, 7vw, 6rem) auto 0;
  padding-inline: var(--pad);
}

.article-audio {
  display: grid;
  gap: 1rem;
  width: min(100%, var(--reading));
  margin: 0 0 3rem;
  padding: clamp(1.25rem, 3vw, 1.8rem);
  border: 1px solid var(--line);
  border-left: 4px solid var(--signal);
  background: var(--surface);
  box-shadow: 0 22px 55px -42px rgba(17, 21, 28, 0.65);
}

.article-hero .article-audio {
  margin-top: 2rem;
  margin-bottom: 0;
}

.article-audio__heading {
  display: grid;
  gap: 0.35rem;
}

.article-body .article-audio h2,
.article-hero .article-audio h2 {
  max-width: 32ch;
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.35rem, 3vw, 1.8rem);
  line-height: 1.12;
  letter-spacing: -0.025em;
}

.article-audio audio {
  display: block;
  width: 100%;
  min-height: 3.25rem;
  accent-color: var(--signal);
}

.article-audio__download {
  width: max-content;
  color: var(--ink-soft);
  font-size: 0.86rem;
  font-weight: 650;
  text-decoration-color: var(--signal);
  text-underline-offset: 3px;
}

.article-audio__download:hover {
  color: var(--signal-deep);
}

.article-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 1rem;
}

.article-tags a,
.article-tags span {
  padding: 0.3rem 0.65rem;
  border: 1px solid var(--line);
  border-radius: 0;
  color: var(--ink-soft);
  font-size: 0.78rem;
  text-decoration: none;
}

.article-reusable {
  margin-block: clamp(2rem, 5vw, 4rem);
  padding-block: clamp(2rem, 4vw, 3.5rem);
  border-block: 1px solid var(--line);
}

.article-body .article-reusable--inline {
  width: 100%;
  max-width: none;
  margin-block: clamp(2rem, 5vw, 3.5rem);
  padding-block: clamp(1.5rem, 4vw, 2.75rem);
}

/* A pattern is a published group of ordinary child blocks. Keep the group
   visually together while retaining the child semantics for readers. */
.article-body .article-pattern,
.page-body .article-pattern {
  margin-block: clamp(2rem, 5vw, 4rem);
  padding: clamp(1.25rem, 3vw, 2.5rem);
  border-block: 1px solid var(--line);
}

.reusable-block.reusable--image-left,
.reusable-block.reusable--image-right {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(1.5rem, 5vw, 4rem);
}

.reusable-block.reusable--image-right figure {
  order: 2;
}

.reusable-block figure {
  margin: 0;
}

.reusable-block figure img {
  width: 100%;
  max-height: 30rem;
  object-fit: cover;
}

.reusable-block.reusable--muted {
  padding-inline: clamp(1.5rem, 4vw, 3rem);
  background: var(--paper-deep);
}

.reusable-block.reusable--accent {
  padding-inline: clamp(1.5rem, 4vw, 3rem);
  border-color: var(--signal);
}

.reusable-block.reusable--dark {
  padding-inline: clamp(1.5rem, 4vw, 3rem);
  background: var(--editorial-night);
  color: white;
}

.reusable-block.reusable--quote {
  font-family: var(--display);
  font-size: clamp(1.35rem, 3vw, 2.4rem);
}

/* Contain the drop cap. Without this, a short opening paragraph lets the floated
   letter overhang into the paragraphs below and indent them. */
.article-body > p:first-of-type {
  display: flow-root;
}

.article-body > p:first-of-type::first-letter {
  float: left;
  padding: 0.2rem 0.55rem 0 0;
  color: var(--signal);
  font-family: var(--display);
  font-size: 4.6rem;
  font-weight: 600;
  line-height: 0.78;
}

.article-body p,
.page-body p {
  margin: 0 0 1.55rem;
}

.article-body h2,
.page-body h2 {
  margin: 3.5rem 0 1rem;
  font-family: var(--display);
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  line-height: 1.08;
  letter-spacing: -0.035em;
}

.article-page .article-body h2 {
  position: relative;
  padding-top: 1.15rem;
  border-top: 1px solid var(--line-strong);
}

.article-page .article-body h2::before {
  position: absolute;
  inset: -2px auto auto 0;
  width: 4.25rem;
  height: 3px;
  background: var(--signal);
  content: '';
}

.article-body h3,
.page-body h3 {
  margin: 2.5rem 0 0.7rem;
  font-size: 1.32rem;
  line-height: 1.25;
}

.article-body .article-callout,
.page-body .article-callout {
  position: relative;
  margin: 2.4rem 0;
  border: 1px solid color-mix(in srgb, var(--ink) 24%, transparent);
  border-left: 0.5rem solid var(--signal);
  padding: 2.7rem clamp(1.2rem, 3vw, 2rem) 1.35rem;
  background: color-mix(in srgb, var(--signal) 7%, var(--paper));
}
.article-body .article-callout::before,
.page-body .article-callout::before {
  position: absolute;
  top: 0.9rem;
  left: clamp(1.2rem, 3vw, 2rem);
  color: var(--signal);
  content: 'NOTE';
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.16em;
}
.article-callout[data-tone="tip"] { border-left-color: #13815b; background: #edf8f3; }
.article-callout[data-tone="tip"]::before { color: #096846; content: 'TIP'; }
.article-callout[data-tone="warning"] { border-left-color: #c9780d; background: #fff6e4; }
.article-callout[data-tone="warning"]::before { color: #8c5004; content: 'WARNING'; }
.article-callout[data-tone="takeaway"] { border-left-color: var(--ink); background: #eaf1fb; }
.article-callout[data-tone="takeaway"]::before { color: var(--ink); content: 'KEY TAKEAWAY'; }
.article-callout > :first-child { margin-top: 0; }
.article-callout > :last-child { margin-bottom: 0; }

.article-body .article-button,
.page-body .article-button { display: flex; margin: 2rem 0; }
.article-button[data-align="center"] { justify-content: center; }
.article-button[data-align="right"] { justify-content: flex-end; }
.article-button [data-article-button-link] {
  display: inline-flex;
  min-height: 3rem;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--ink);
  padding: 0.72rem 1.15rem;
  background: var(--signal);
  color: var(--signal-ink);
  font-family: var(--sans);
  font-size: 0.92rem;
  font-weight: 900;
  line-height: 1.15;
  text-decoration: none;
}
.article-button [data-article-button-link]:hover,
.article-button [data-article-button-link]:focus-visible { translate: 0 -2px; box-shadow: 4px 4px 0 var(--ink); }
.article-button[data-style="secondary"] [data-article-button-link] { background: transparent; color: var(--ink); }
.article-button[data-style="text"] [data-article-button-link] { min-height: auto; border: 0; padding-inline: 0; background: transparent; color: var(--signal); text-decoration: underline; }
.article-button[data-style="text"] [data-article-button-link]:hover,
.article-button[data-style="text"] [data-article-button-link]:focus-visible { box-shadow: none; }

.article-body .article-button-row,
.page-body .article-button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 2rem 0;
}
.article-button-row[data-align="center"] { justify-content: center; }
.article-button-row[data-align="right"] { justify-content: flex-end; }
.article-button-row [data-article-button-link] {
  display: inline-flex;
  min-height: 3rem;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--ink);
  padding: 0.72rem 1.15rem;
  background: var(--signal);
  color: var(--signal-ink);
  font-family: var(--sans);
  font-size: 0.92rem;
  font-weight: 900;
  line-height: 1.15;
  text-decoration: none;
}
.article-button-row [data-article-button-link]:hover,
.article-button-row [data-article-button-link]:focus-visible { translate: 0 -2px; box-shadow: 4px 4px 0 var(--ink); }
.article-button-row [data-button-style="secondary"] { background: transparent; color: var(--ink); }
.article-button-row [data-button-style="text"] { min-height: auto; border: 0; padding-inline: 0; background: transparent; color: var(--signal); text-decoration: underline; }
.article-button-row [data-button-style="text"]:hover,
.article-button-row [data-button-style="text"]:focus-visible { box-shadow: none; }

@media (max-width: 620px) {
  .article-button [data-article-button-link],
  .article-button-row [data-article-button-link] { width: 100%; }
}

.article-body img,
.page-body img {
  width: auto;
  max-height: 42rem;
  margin: 2.5rem auto;
  border: 1px solid var(--line);
}

/* The About page closes with a mission image that should read as an editorial
   feature, not as a small inline illustration constrained to the prose column.
   Keep this scoped to the About route so ordinary standalone-page media retains
   the author-selected presentation above. */
body[data-section="about-us"] .page-body > h2:last-of-type + img {
  position: relative;
  left: 50%;
  width: min(60rem, calc(100vw - (2 * var(--pad))));
  max-width: none;
  translate: -50% 0;
}

body[data-section="about-us"] .page-body > h2:last-of-type {
  margin-top: clamp(3.75rem, 8vw, 6rem);
  margin-bottom: 1.25rem;
}

body[data-section="about-us"] .page-body > h2:last-of-type + img {
  display: block;
  aspect-ratio: 16 / 9;
  max-height: none;
  margin: 0;
  border: 1px solid var(--line-strong);
  border-top: 3px solid var(--blueprint);
  background: var(--surface);
  object-fit: cover;
  object-position: center;
}
/* Structured article images use only schema-controlled classes and enumerated
   data attributes. No authored value is interpolated into an inline style. */
.article-body figure.article-image,
.page-body figure.article-image {
  --article-image-width: 100%;
  --article-image-aspect: auto;
  --article-image-fit: contain;
  --article-image-focal-x: 50%;
  --article-image-focal-y: 50%;
  width: min(var(--article-image-width), 100%);
  max-width: 100%;
  margin-block: clamp(2rem, 6vw, 3.5rem);
}

.article-body figure.article-image--small,
.page-body figure.article-image--small {
  --article-image-width: 33%;
}

.article-body figure.article-image--medium,
.page-body figure.article-image--medium {
  --article-image-width: 66%;
}

.article-body figure.article-image--large,
.article-body figure.article-image--custom,
.page-body figure.article-image--large,
.page-body figure.article-image--custom {
  --article-image-width: 100%;
}

figure.article-image--align-left {
  margin-right: auto;
  margin-left: 0;
}

figure.article-image--align-center {
  margin-right: auto;
  margin-left: auto;
}

figure.article-image--align-right {
  margin-right: 0;
  margin-left: auto;
}

.article-body figure.article-image--wide,
.page-body figure.article-image--wide {
  position: relative;
  left: 50%;
  width: min(var(--shell), calc(100vw - (2 * var(--pad))));
  max-width: calc(100vw - (2 * var(--pad)));
  margin-right: 0;
  margin-left: 0;
  transform: translateX(-50%);
}

.article-body figure.article-image--full,
.page-body figure.article-image--full {
  position: relative;
  left: 50%;
  width: 100vw;
  width: 100dvw;
  max-width: 100vw;
  max-width: 100dvw;
  margin-right: 0;
  margin-left: 0;
  transform: translateX(-50%);
}

.article-body figure.article-image > a,
.page-body figure.article-image > a {
  position: relative;
  display: block;
  overflow: hidden;
  color: inherit;
  line-height: 0;
  text-decoration: none;
}

.article-body figure.article-image img,
.page-body figure.article-image img {
  display: block;
  width: 100%;
  max-width: 100%;
  max-height: none;
  margin: 0;
  border: 1px solid var(--line);
  background: var(--surface);
  object-fit: var(--article-image-fit);
  object-position: var(--article-image-focal-x) var(--article-image-focal-y);
}

figure.article-image[data-aspect-ratio="1-1"] {
  --article-image-aspect: 1 / 1;
}

figure.article-image[data-aspect-ratio="3-4"] {
  --article-image-aspect: 3 / 4;
}

figure.article-image[data-aspect-ratio="4-3"] {
  --article-image-aspect: 4 / 3;
}

figure.article-image[data-aspect-ratio="16-9"] {
  --article-image-aspect: 16 / 9;
}

figure.article-image:not([data-aspect-ratio="original"]) > a,
figure.article-image:not([data-aspect-ratio="original"]) > img {
  aspect-ratio: var(--article-image-aspect);
}

figure.article-image:not([data-aspect-ratio="original"]) > a > img {
  height: 100%;
}

figure.article-image[data-object-fit="contain"] {
  --article-image-fit: contain;
}

figure.article-image[data-object-fit="cover"] {
  --article-image-fit: cover;
}

.article-body figure.article-image figcaption,
.page-body figure.article-image figcaption {
  margin-top: 0.7rem;
  color: var(--ink-soft);
  font-size: 0.85rem;
  line-height: 1.45;
  text-align: left;
}

.article-body .article-gallery,
.page-body .article-gallery {
  display: grid;
  grid-template-columns: repeat(var(--gallery-columns, 3), minmax(0, 1fr));
  gap: clamp(0.65rem, 1.5vw, 1rem);
  width: 100%;
  margin: 2rem 0;
}
.article-gallery[data-columns="2"] { --gallery-columns: 2; }
.article-gallery[data-columns="3"] { --gallery-columns: 3; }
.article-gallery[data-columns="4"] { --gallery-columns: 4; }
.article-body .article-gallery > figure.article-image,
.page-body .article-gallery > figure.article-image { width: 100%; margin: 0; }
.article-gallery > figure img { display: block; width: 100%; }
.article-gallery[data-crop="true"] > figure img { aspect-ratio: 1 / 1; height: auto; object-fit: cover; }
.article-gallery > figure figcaption { margin-top: 0.45rem; color: var(--ink-soft); font-size: 0.78rem; line-height: 1.35; }

.article-body .article-media-text,
.page-body .article-media-text {
  --media-text-column: 50%;
  display: grid;
  grid-template-columns: var(--media-text-column) minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2rem);
  margin: 2rem 0;
}
.article-media-text[data-media-position="right"] { grid-template-columns: minmax(0, 1fr) var(--media-text-column); }
.article-media-text[data-media-position="right"] > figure { order: 2; }
.article-media-text[data-media-width="33"] { --media-text-column: 33%; }
.article-media-text[data-media-width="40"] { --media-text-column: 40%; }
.article-media-text[data-media-width="50"] { --media-text-column: 50%; }
.article-media-text[data-media-width="60"] { --media-text-column: 60%; }
.article-media-text[data-media-width="67"] { --media-text-column: 67%; }
.article-media-text[data-vertical-align="top"] { align-items: start; }
.article-media-text[data-vertical-align="center"] { align-items: center; }
.article-media-text[data-vertical-align="bottom"] { align-items: end; }
.article-body .article-media-text > figure.article-image,
.page-body .article-media-text > figure.article-image { width: 100%; margin: 0; }
.article-media-text > [data-media-text-content] { min-width: 0; }
.article-media-text > [data-media-text-content] > :first-child { margin-top: 0; }
.article-media-text > [data-media-text-content] > :last-child { margin-bottom: 0; }

.article-body .article-cover,
.page-body .article-cover {
  --cover-overlay-opacity: 0.4;
  position: relative;
  isolation: isolate;
  display: grid;
  min-height: 320px;
  margin: 2rem 0;
  overflow: hidden;
  border-radius: 0.25rem;
  place-items: center stretch;
  color: #fff;
}
.article-cover[data-min-height="240"] { min-height: 240px; }
.article-cover[data-min-height="320"] { min-height: 320px; }
.article-cover[data-min-height="400"] { min-height: 400px; }
.article-cover[data-min-height="480"] { min-height: 480px; }
.article-cover[data-overlay-opacity="0"] { --cover-overlay-opacity: 0; }
.article-cover[data-overlay-opacity="20"] { --cover-overlay-opacity: 0.2; }
.article-cover[data-overlay-opacity="40"] { --cover-overlay-opacity: 0.4; }
.article-cover[data-overlay-opacity="60"] { --cover-overlay-opacity: 0.6; }
.article-cover[data-overlay-opacity="80"] { --cover-overlay-opacity: 0.8; }
.article-cover::after { position: absolute; z-index: 1; inset: 0; background: rgb(1 20 50 / var(--cover-overlay-opacity)); content: ''; }
.article-cover[data-cover-tone="dark"] { color: var(--editorial-night); }
.article-cover[data-cover-tone="dark"]::after { background: rgb(244 239 231 / var(--cover-overlay-opacity)); }
.article-body .article-cover > figure.article-image,
.page-body .article-cover > figure.article-image { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; margin: 0; }
.article-cover > figure.article-image img { width: 100%; height: 100%; object-fit: cover; object-position: var(--article-image-focal-x) var(--article-image-focal-y); }
.article-cover > [data-cover-content] { position: relative; z-index: 2; width: min(100%, 44rem); padding: clamp(1.25rem, 5vw, 3rem); text-align: left; }
.article-cover[data-content-align="center"] > [data-cover-content] { margin-inline: auto; text-align: center; }
.article-cover[data-content-align="right"] > [data-cover-content] { margin-left: auto; text-align: right; }
.article-cover > [data-cover-content] > :first-child { margin-top: 0; color: inherit; }
.article-cover > [data-cover-content] > :last-child { margin-bottom: 0; }

.article-body .article-video,
.page-body .article-video { margin: 2rem 0; }
.article-video video { display: block; width: 100%; max-height: 75vh; background: var(--editorial-night); }
.article-video figcaption { margin-top: 0.55rem; color: var(--ink-soft); font-size: 0.82rem; }
.article-body .article-embed,
.page-body .article-embed {
  display: grid;
  min-height: 15rem;
  margin: 2rem 0;
  border: 1px solid var(--line);
  padding: clamp(1.25rem, 4vw, 2rem);
  background: var(--paper-deep);
  place-items: center;
  text-align: center;
}
.article-embed strong { font-family: var(--display); font-size: clamp(1.4rem, 3vw, 2rem); }
.article-embed p { margin: 0.35rem 0 1rem; color: var(--ink-soft); }
.article-embed button { border: 0; padding: 0.75rem 1rem; background: var(--signal); color: var(--signal-ink); font: 800 0.8rem var(--sans); cursor: pointer; }
.article-embed > a { margin-top: 0.75rem; font-size: 0.78rem; }
.article-embed.is-loaded { display: block; aspect-ratio: 16 / 9; min-height: 0; padding: 0; }
.article-embed iframe { width: 100%; height: 100%; border: 0; }
@media (max-width: 620px) {
  .article-gallery[data-columns] { --gallery-columns: 2; }
  .article-media-text[data-stack-mobile="true"] { display: block; }
  .article-media-text[data-stack-mobile="true"] > figure { margin-bottom: 1rem; }
  .article-cover[data-min-height] { min-height: min(320px, 72vw); }
}

.article-body figure.article-image--wide figcaption,
.article-body figure.article-image--full figcaption,
.page-body figure.article-image--wide figcaption,
.page-body figure.article-image--full figcaption {
  width: min(100%, var(--reading));
  margin-inline: auto;
  padding-inline: var(--pad);
}

figure.article-image > a[href]::after {
  position: absolute;
  right: 0.7rem;
  bottom: 0.7rem;
  padding: 0.38rem 0.58rem;
  border: 1px solid rgb(255 255 255 / 42%);
  border-radius: 999px;
  content: 'Open link ↗';
  background: rgb(17 21 28 / 82%);
  color: white;
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  line-height: 1;
  opacity: 0.82;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

figure.article-image[data-lightbox="true"] > a,
figure.article-image > a[data-lightbox="true"] {
  cursor: zoom-in;
}

figure.article-image[data-lightbox="true"] > a::after,
figure.article-image > a[data-lightbox="true"]::after {
  content: 'View full size ↗';
}

figure.article-image > a[href]:hover::after,
figure.article-image > a[href]:focus-visible::after {
  opacity: 1;
  transform: translateY(-0.12rem);
}

.article-lightbox {
  width: min(92vw, 90rem);
  max-width: 92vw;
  max-height: 92dvh;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 24%);
  background: #0d1118;
  color: white;
  box-shadow: 0 2rem 6rem rgb(0 0 0 / 55%);
}

.article-lightbox::backdrop {
  background: rgb(5 8 12 / 84%);
  backdrop-filter: blur(0.35rem);
}

.article-lightbox[open] {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
}

.article-lightbox figure {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  min-width: 0;
  min-height: 0;
  margin: 0;
}

.article-lightbox img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: calc(92dvh - 5rem);
  object-fit: contain;
}

.article-lightbox figcaption {
  padding: 0.85rem clamp(1rem, 3vw, 1.5rem);
  color: rgb(255 255 255 / 82%);
  font-size: 0.88rem;
  line-height: 1.45;
}

.article-lightbox__close,
.article-lightbox [data-lightbox-close] {
  position: absolute;
  top: max(0.65rem, env(safe-area-inset-top));
  right: max(0.65rem, env(safe-area-inset-right));
  z-index: 2;
  display: grid;
  width: 2.75rem;
  min-width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  place-items: center;
  border: 1px solid rgb(255 255 255 / 42%);
  border-radius: 50%;
  background: rgb(13 17 24 / 86%);
  color: white;
  cursor: pointer;
}

.article-lightbox__close:hover,
.article-lightbox [data-lightbox-close]:hover {
  background: white;
  color: var(--editorial-night);
}

figure.article-image[data-width="20"] { --article-image-width: 20%; }
figure.article-image[data-width="21"] { --article-image-width: 21%; }
figure.article-image[data-width="22"] { --article-image-width: 22%; }
figure.article-image[data-width="23"] { --article-image-width: 23%; }
figure.article-image[data-width="24"] { --article-image-width: 24%; }
figure.article-image[data-width="25"] { --article-image-width: 25%; }
figure.article-image[data-width="26"] { --article-image-width: 26%; }
figure.article-image[data-width="27"] { --article-image-width: 27%; }
figure.article-image[data-width="28"] { --article-image-width: 28%; }
figure.article-image[data-width="29"] { --article-image-width: 29%; }
figure.article-image[data-width="30"] { --article-image-width: 30%; }
figure.article-image[data-width="31"] { --article-image-width: 31%; }
figure.article-image[data-width="32"] { --article-image-width: 32%; }
figure.article-image[data-width="33"] { --article-image-width: 33%; }
figure.article-image[data-width="34"] { --article-image-width: 34%; }
figure.article-image[data-width="35"] { --article-image-width: 35%; }
figure.article-image[data-width="36"] { --article-image-width: 36%; }
figure.article-image[data-width="37"] { --article-image-width: 37%; }
figure.article-image[data-width="38"] { --article-image-width: 38%; }
figure.article-image[data-width="39"] { --article-image-width: 39%; }
figure.article-image[data-width="40"] { --article-image-width: 40%; }
figure.article-image[data-width="41"] { --article-image-width: 41%; }
figure.article-image[data-width="42"] { --article-image-width: 42%; }
figure.article-image[data-width="43"] { --article-image-width: 43%; }
figure.article-image[data-width="44"] { --article-image-width: 44%; }
figure.article-image[data-width="45"] { --article-image-width: 45%; }
figure.article-image[data-width="46"] { --article-image-width: 46%; }
figure.article-image[data-width="47"] { --article-image-width: 47%; }
figure.article-image[data-width="48"] { --article-image-width: 48%; }
figure.article-image[data-width="49"] { --article-image-width: 49%; }
figure.article-image[data-width="50"] { --article-image-width: 50%; }
figure.article-image[data-width="51"] { --article-image-width: 51%; }
figure.article-image[data-width="52"] { --article-image-width: 52%; }
figure.article-image[data-width="53"] { --article-image-width: 53%; }
figure.article-image[data-width="54"] { --article-image-width: 54%; }
figure.article-image[data-width="55"] { --article-image-width: 55%; }
figure.article-image[data-width="56"] { --article-image-width: 56%; }
figure.article-image[data-width="57"] { --article-image-width: 57%; }
figure.article-image[data-width="58"] { --article-image-width: 58%; }
figure.article-image[data-width="59"] { --article-image-width: 59%; }
figure.article-image[data-width="60"] { --article-image-width: 60%; }
figure.article-image[data-width="61"] { --article-image-width: 61%; }
figure.article-image[data-width="62"] { --article-image-width: 62%; }
figure.article-image[data-width="63"] { --article-image-width: 63%; }
figure.article-image[data-width="64"] { --article-image-width: 64%; }
figure.article-image[data-width="65"] { --article-image-width: 65%; }
figure.article-image[data-width="66"] { --article-image-width: 66%; }
figure.article-image[data-width="67"] { --article-image-width: 67%; }
figure.article-image[data-width="68"] { --article-image-width: 68%; }
figure.article-image[data-width="69"] { --article-image-width: 69%; }
figure.article-image[data-width="70"] { --article-image-width: 70%; }
figure.article-image[data-width="71"] { --article-image-width: 71%; }
figure.article-image[data-width="72"] { --article-image-width: 72%; }
figure.article-image[data-width="73"] { --article-image-width: 73%; }
figure.article-image[data-width="74"] { --article-image-width: 74%; }
figure.article-image[data-width="75"] { --article-image-width: 75%; }
figure.article-image[data-width="76"] { --article-image-width: 76%; }
figure.article-image[data-width="77"] { --article-image-width: 77%; }
figure.article-image[data-width="78"] { --article-image-width: 78%; }
figure.article-image[data-width="79"] { --article-image-width: 79%; }
figure.article-image[data-width="80"] { --article-image-width: 80%; }
figure.article-image[data-width="81"] { --article-image-width: 81%; }
figure.article-image[data-width="82"] { --article-image-width: 82%; }
figure.article-image[data-width="83"] { --article-image-width: 83%; }
figure.article-image[data-width="84"] { --article-image-width: 84%; }
figure.article-image[data-width="85"] { --article-image-width: 85%; }
figure.article-image[data-width="86"] { --article-image-width: 86%; }
figure.article-image[data-width="87"] { --article-image-width: 87%; }
figure.article-image[data-width="88"] { --article-image-width: 88%; }
figure.article-image[data-width="89"] { --article-image-width: 89%; }
figure.article-image[data-width="90"] { --article-image-width: 90%; }
figure.article-image[data-width="91"] { --article-image-width: 91%; }
figure.article-image[data-width="92"] { --article-image-width: 92%; }
figure.article-image[data-width="93"] { --article-image-width: 93%; }
figure.article-image[data-width="94"] { --article-image-width: 94%; }
figure.article-image[data-width="95"] { --article-image-width: 95%; }
figure.article-image[data-width="96"] { --article-image-width: 96%; }
figure.article-image[data-width="97"] { --article-image-width: 97%; }
figure.article-image[data-width="98"] { --article-image-width: 98%; }
figure.article-image[data-width="99"] { --article-image-width: 99%; }
figure.article-image[data-width="100"] { --article-image-width: 100%; }

figure.article-image[data-focal-x="0"] { --article-image-focal-x: 0%; }
figure.article-image[data-focal-x="1"] { --article-image-focal-x: 1%; }
figure.article-image[data-focal-x="2"] { --article-image-focal-x: 2%; }
figure.article-image[data-focal-x="3"] { --article-image-focal-x: 3%; }
figure.article-image[data-focal-x="4"] { --article-image-focal-x: 4%; }
figure.article-image[data-focal-x="5"] { --article-image-focal-x: 5%; }
figure.article-image[data-focal-x="6"] { --article-image-focal-x: 6%; }
figure.article-image[data-focal-x="7"] { --article-image-focal-x: 7%; }
figure.article-image[data-focal-x="8"] { --article-image-focal-x: 8%; }
figure.article-image[data-focal-x="9"] { --article-image-focal-x: 9%; }
figure.article-image[data-focal-x="10"] { --article-image-focal-x: 10%; }
figure.article-image[data-focal-x="11"] { --article-image-focal-x: 11%; }
figure.article-image[data-focal-x="12"] { --article-image-focal-x: 12%; }
figure.article-image[data-focal-x="13"] { --article-image-focal-x: 13%; }
figure.article-image[data-focal-x="14"] { --article-image-focal-x: 14%; }
figure.article-image[data-focal-x="15"] { --article-image-focal-x: 15%; }
figure.article-image[data-focal-x="16"] { --article-image-focal-x: 16%; }
figure.article-image[data-focal-x="17"] { --article-image-focal-x: 17%; }
figure.article-image[data-focal-x="18"] { --article-image-focal-x: 18%; }
figure.article-image[data-focal-x="19"] { --article-image-focal-x: 19%; }
figure.article-image[data-focal-x="20"] { --article-image-focal-x: 20%; }
figure.article-image[data-focal-x="21"] { --article-image-focal-x: 21%; }
figure.article-image[data-focal-x="22"] { --article-image-focal-x: 22%; }
figure.article-image[data-focal-x="23"] { --article-image-focal-x: 23%; }
figure.article-image[data-focal-x="24"] { --article-image-focal-x: 24%; }
figure.article-image[data-focal-x="25"] { --article-image-focal-x: 25%; }
figure.article-image[data-focal-x="26"] { --article-image-focal-x: 26%; }
figure.article-image[data-focal-x="27"] { --article-image-focal-x: 27%; }
figure.article-image[data-focal-x="28"] { --article-image-focal-x: 28%; }
figure.article-image[data-focal-x="29"] { --article-image-focal-x: 29%; }
figure.article-image[data-focal-x="30"] { --article-image-focal-x: 30%; }
figure.article-image[data-focal-x="31"] { --article-image-focal-x: 31%; }
figure.article-image[data-focal-x="32"] { --article-image-focal-x: 32%; }
figure.article-image[data-focal-x="33"] { --article-image-focal-x: 33%; }
figure.article-image[data-focal-x="34"] { --article-image-focal-x: 34%; }
figure.article-image[data-focal-x="35"] { --article-image-focal-x: 35%; }
figure.article-image[data-focal-x="36"] { --article-image-focal-x: 36%; }
figure.article-image[data-focal-x="37"] { --article-image-focal-x: 37%; }
figure.article-image[data-focal-x="38"] { --article-image-focal-x: 38%; }
figure.article-image[data-focal-x="39"] { --article-image-focal-x: 39%; }
figure.article-image[data-focal-x="40"] { --article-image-focal-x: 40%; }
figure.article-image[data-focal-x="41"] { --article-image-focal-x: 41%; }
figure.article-image[data-focal-x="42"] { --article-image-focal-x: 42%; }
figure.article-image[data-focal-x="43"] { --article-image-focal-x: 43%; }
figure.article-image[data-focal-x="44"] { --article-image-focal-x: 44%; }
figure.article-image[data-focal-x="45"] { --article-image-focal-x: 45%; }
figure.article-image[data-focal-x="46"] { --article-image-focal-x: 46%; }
figure.article-image[data-focal-x="47"] { --article-image-focal-x: 47%; }
figure.article-image[data-focal-x="48"] { --article-image-focal-x: 48%; }
figure.article-image[data-focal-x="49"] { --article-image-focal-x: 49%; }
figure.article-image[data-focal-x="50"] { --article-image-focal-x: 50%; }
figure.article-image[data-focal-x="51"] { --article-image-focal-x: 51%; }
figure.article-image[data-focal-x="52"] { --article-image-focal-x: 52%; }
figure.article-image[data-focal-x="53"] { --article-image-focal-x: 53%; }
figure.article-image[data-focal-x="54"] { --article-image-focal-x: 54%; }
figure.article-image[data-focal-x="55"] { --article-image-focal-x: 55%; }
figure.article-image[data-focal-x="56"] { --article-image-focal-x: 56%; }
figure.article-image[data-focal-x="57"] { --article-image-focal-x: 57%; }
figure.article-image[data-focal-x="58"] { --article-image-focal-x: 58%; }
figure.article-image[data-focal-x="59"] { --article-image-focal-x: 59%; }
figure.article-image[data-focal-x="60"] { --article-image-focal-x: 60%; }
figure.article-image[data-focal-x="61"] { --article-image-focal-x: 61%; }
figure.article-image[data-focal-x="62"] { --article-image-focal-x: 62%; }
figure.article-image[data-focal-x="63"] { --article-image-focal-x: 63%; }
figure.article-image[data-focal-x="64"] { --article-image-focal-x: 64%; }
figure.article-image[data-focal-x="65"] { --article-image-focal-x: 65%; }
figure.article-image[data-focal-x="66"] { --article-image-focal-x: 66%; }
figure.article-image[data-focal-x="67"] { --article-image-focal-x: 67%; }
figure.article-image[data-focal-x="68"] { --article-image-focal-x: 68%; }
figure.article-image[data-focal-x="69"] { --article-image-focal-x: 69%; }
figure.article-image[data-focal-x="70"] { --article-image-focal-x: 70%; }
figure.article-image[data-focal-x="71"] { --article-image-focal-x: 71%; }
figure.article-image[data-focal-x="72"] { --article-image-focal-x: 72%; }
figure.article-image[data-focal-x="73"] { --article-image-focal-x: 73%; }
figure.article-image[data-focal-x="74"] { --article-image-focal-x: 74%; }
figure.article-image[data-focal-x="75"] { --article-image-focal-x: 75%; }
figure.article-image[data-focal-x="76"] { --article-image-focal-x: 76%; }
figure.article-image[data-focal-x="77"] { --article-image-focal-x: 77%; }
figure.article-image[data-focal-x="78"] { --article-image-focal-x: 78%; }
figure.article-image[data-focal-x="79"] { --article-image-focal-x: 79%; }
figure.article-image[data-focal-x="80"] { --article-image-focal-x: 80%; }
figure.article-image[data-focal-x="81"] { --article-image-focal-x: 81%; }
figure.article-image[data-focal-x="82"] { --article-image-focal-x: 82%; }
figure.article-image[data-focal-x="83"] { --article-image-focal-x: 83%; }
figure.article-image[data-focal-x="84"] { --article-image-focal-x: 84%; }
figure.article-image[data-focal-x="85"] { --article-image-focal-x: 85%; }
figure.article-image[data-focal-x="86"] { --article-image-focal-x: 86%; }
figure.article-image[data-focal-x="87"] { --article-image-focal-x: 87%; }
figure.article-image[data-focal-x="88"] { --article-image-focal-x: 88%; }
figure.article-image[data-focal-x="89"] { --article-image-focal-x: 89%; }
figure.article-image[data-focal-x="90"] { --article-image-focal-x: 90%; }
figure.article-image[data-focal-x="91"] { --article-image-focal-x: 91%; }
figure.article-image[data-focal-x="92"] { --article-image-focal-x: 92%; }
figure.article-image[data-focal-x="93"] { --article-image-focal-x: 93%; }
figure.article-image[data-focal-x="94"] { --article-image-focal-x: 94%; }
figure.article-image[data-focal-x="95"] { --article-image-focal-x: 95%; }
figure.article-image[data-focal-x="96"] { --article-image-focal-x: 96%; }
figure.article-image[data-focal-x="97"] { --article-image-focal-x: 97%; }
figure.article-image[data-focal-x="98"] { --article-image-focal-x: 98%; }
figure.article-image[data-focal-x="99"] { --article-image-focal-x: 99%; }
figure.article-image[data-focal-x="100"] { --article-image-focal-x: 100%; }

figure.article-image[data-focal-y="0"] { --article-image-focal-y: 0%; }
figure.article-image[data-focal-y="1"] { --article-image-focal-y: 1%; }
figure.article-image[data-focal-y="2"] { --article-image-focal-y: 2%; }
figure.article-image[data-focal-y="3"] { --article-image-focal-y: 3%; }
figure.article-image[data-focal-y="4"] { --article-image-focal-y: 4%; }
figure.article-image[data-focal-y="5"] { --article-image-focal-y: 5%; }
figure.article-image[data-focal-y="6"] { --article-image-focal-y: 6%; }
figure.article-image[data-focal-y="7"] { --article-image-focal-y: 7%; }
figure.article-image[data-focal-y="8"] { --article-image-focal-y: 8%; }
figure.article-image[data-focal-y="9"] { --article-image-focal-y: 9%; }
figure.article-image[data-focal-y="10"] { --article-image-focal-y: 10%; }
figure.article-image[data-focal-y="11"] { --article-image-focal-y: 11%; }
figure.article-image[data-focal-y="12"] { --article-image-focal-y: 12%; }
figure.article-image[data-focal-y="13"] { --article-image-focal-y: 13%; }
figure.article-image[data-focal-y="14"] { --article-image-focal-y: 14%; }
figure.article-image[data-focal-y="15"] { --article-image-focal-y: 15%; }
figure.article-image[data-focal-y="16"] { --article-image-focal-y: 16%; }
figure.article-image[data-focal-y="17"] { --article-image-focal-y: 17%; }
figure.article-image[data-focal-y="18"] { --article-image-focal-y: 18%; }
figure.article-image[data-focal-y="19"] { --article-image-focal-y: 19%; }
figure.article-image[data-focal-y="20"] { --article-image-focal-y: 20%; }
figure.article-image[data-focal-y="21"] { --article-image-focal-y: 21%; }
figure.article-image[data-focal-y="22"] { --article-image-focal-y: 22%; }
figure.article-image[data-focal-y="23"] { --article-image-focal-y: 23%; }
figure.article-image[data-focal-y="24"] { --article-image-focal-y: 24%; }
figure.article-image[data-focal-y="25"] { --article-image-focal-y: 25%; }
figure.article-image[data-focal-y="26"] { --article-image-focal-y: 26%; }
figure.article-image[data-focal-y="27"] { --article-image-focal-y: 27%; }
figure.article-image[data-focal-y="28"] { --article-image-focal-y: 28%; }
figure.article-image[data-focal-y="29"] { --article-image-focal-y: 29%; }
figure.article-image[data-focal-y="30"] { --article-image-focal-y: 30%; }
figure.article-image[data-focal-y="31"] { --article-image-focal-y: 31%; }
figure.article-image[data-focal-y="32"] { --article-image-focal-y: 32%; }
figure.article-image[data-focal-y="33"] { --article-image-focal-y: 33%; }
figure.article-image[data-focal-y="34"] { --article-image-focal-y: 34%; }
figure.article-image[data-focal-y="35"] { --article-image-focal-y: 35%; }
figure.article-image[data-focal-y="36"] { --article-image-focal-y: 36%; }
figure.article-image[data-focal-y="37"] { --article-image-focal-y: 37%; }
figure.article-image[data-focal-y="38"] { --article-image-focal-y: 38%; }
figure.article-image[data-focal-y="39"] { --article-image-focal-y: 39%; }
figure.article-image[data-focal-y="40"] { --article-image-focal-y: 40%; }
figure.article-image[data-focal-y="41"] { --article-image-focal-y: 41%; }
figure.article-image[data-focal-y="42"] { --article-image-focal-y: 42%; }
figure.article-image[data-focal-y="43"] { --article-image-focal-y: 43%; }
figure.article-image[data-focal-y="44"] { --article-image-focal-y: 44%; }
figure.article-image[data-focal-y="45"] { --article-image-focal-y: 45%; }
figure.article-image[data-focal-y="46"] { --article-image-focal-y: 46%; }
figure.article-image[data-focal-y="47"] { --article-image-focal-y: 47%; }
figure.article-image[data-focal-y="48"] { --article-image-focal-y: 48%; }
figure.article-image[data-focal-y="49"] { --article-image-focal-y: 49%; }
figure.article-image[data-focal-y="50"] { --article-image-focal-y: 50%; }
figure.article-image[data-focal-y="51"] { --article-image-focal-y: 51%; }
figure.article-image[data-focal-y="52"] { --article-image-focal-y: 52%; }
figure.article-image[data-focal-y="53"] { --article-image-focal-y: 53%; }
figure.article-image[data-focal-y="54"] { --article-image-focal-y: 54%; }
figure.article-image[data-focal-y="55"] { --article-image-focal-y: 55%; }
figure.article-image[data-focal-y="56"] { --article-image-focal-y: 56%; }
figure.article-image[data-focal-y="57"] { --article-image-focal-y: 57%; }
figure.article-image[data-focal-y="58"] { --article-image-focal-y: 58%; }
figure.article-image[data-focal-y="59"] { --article-image-focal-y: 59%; }
figure.article-image[data-focal-y="60"] { --article-image-focal-y: 60%; }
figure.article-image[data-focal-y="61"] { --article-image-focal-y: 61%; }
figure.article-image[data-focal-y="62"] { --article-image-focal-y: 62%; }
figure.article-image[data-focal-y="63"] { --article-image-focal-y: 63%; }
figure.article-image[data-focal-y="64"] { --article-image-focal-y: 64%; }
figure.article-image[data-focal-y="65"] { --article-image-focal-y: 65%; }
figure.article-image[data-focal-y="66"] { --article-image-focal-y: 66%; }
figure.article-image[data-focal-y="67"] { --article-image-focal-y: 67%; }
figure.article-image[data-focal-y="68"] { --article-image-focal-y: 68%; }
figure.article-image[data-focal-y="69"] { --article-image-focal-y: 69%; }
figure.article-image[data-focal-y="70"] { --article-image-focal-y: 70%; }
figure.article-image[data-focal-y="71"] { --article-image-focal-y: 71%; }
figure.article-image[data-focal-y="72"] { --article-image-focal-y: 72%; }
figure.article-image[data-focal-y="73"] { --article-image-focal-y: 73%; }
figure.article-image[data-focal-y="74"] { --article-image-focal-y: 74%; }
figure.article-image[data-focal-y="75"] { --article-image-focal-y: 75%; }
figure.article-image[data-focal-y="76"] { --article-image-focal-y: 76%; }
figure.article-image[data-focal-y="77"] { --article-image-focal-y: 77%; }
figure.article-image[data-focal-y="78"] { --article-image-focal-y: 78%; }
figure.article-image[data-focal-y="79"] { --article-image-focal-y: 79%; }
figure.article-image[data-focal-y="80"] { --article-image-focal-y: 80%; }
figure.article-image[data-focal-y="81"] { --article-image-focal-y: 81%; }
figure.article-image[data-focal-y="82"] { --article-image-focal-y: 82%; }
figure.article-image[data-focal-y="83"] { --article-image-focal-y: 83%; }
figure.article-image[data-focal-y="84"] { --article-image-focal-y: 84%; }
figure.article-image[data-focal-y="85"] { --article-image-focal-y: 85%; }
figure.article-image[data-focal-y="86"] { --article-image-focal-y: 86%; }
figure.article-image[data-focal-y="87"] { --article-image-focal-y: 87%; }
figure.article-image[data-focal-y="88"] { --article-image-focal-y: 88%; }
figure.article-image[data-focal-y="89"] { --article-image-focal-y: 89%; }
figure.article-image[data-focal-y="90"] { --article-image-focal-y: 90%; }
figure.article-image[data-focal-y="91"] { --article-image-focal-y: 91%; }
figure.article-image[data-focal-y="92"] { --article-image-focal-y: 92%; }
figure.article-image[data-focal-y="93"] { --article-image-focal-y: 93%; }
figure.article-image[data-focal-y="94"] { --article-image-focal-y: 94%; }
figure.article-image[data-focal-y="95"] { --article-image-focal-y: 95%; }
figure.article-image[data-focal-y="96"] { --article-image-focal-y: 96%; }
figure.article-image[data-focal-y="97"] { --article-image-focal-y: 97%; }
figure.article-image[data-focal-y="98"] { --article-image-focal-y: 98%; }
figure.article-image[data-focal-y="99"] { --article-image-focal-y: 99%; }
figure.article-image[data-focal-y="100"] { --article-image-focal-y: 100%; }


.article-body a,
.page-body a {
  text-decoration-line: var(--site-link-decoration, underline);
  text-decoration-color: var(--signal);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.article-body a:hover,
.page-body a:hover {
  color: var(--signal-deep);
}

.article-body ul,
.article-body ol,
.page-body ul,
.page-body ol {
  margin: 0 0 1.6rem;
  padding-left: 1.4rem;
}

.article-body li,
.page-body li {
  margin: 0.55rem 0;
}

.article-body li::marker,
.page-body li::marker {
  color: var(--signal);
}

.article-body blockquote,
.page-body blockquote {
  margin: 2.8rem 0;
  padding-block: 1.4rem;
  border-block: 1px solid var(--line-strong);
  color: var(--ink);
  font-family: var(--display);
  font-size: clamp(1.35rem, 3vw, 1.8rem);
  line-height: 1.35;
}

.article-page .article-body blockquote {
  padding: 1.6rem clamp(1rem, 3vw, 2rem);
  border-top: 3px solid var(--blueprint);
  border-bottom-color: var(--ink);
  background: var(--surface);
}

.article-page .button { border-radius: 0; }

.article-body pre,
.page-body pre {
  max-width: 100%;
  overflow-x: auto;
  padding: 1.2rem;
  background: var(--editorial-night);
  color: #eef1f6;
  font-size: 0.88rem;
}

.article-body :not(pre) > code,
.page-body :not(pre) > code {
  border-radius: 0.2rem;
  padding: 0.08em 0.3em;
  background: var(--paper-deep);
  color: var(--signal-deep);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 0.88em;
}

.article-body [data-text-align="center"],
.page-body [data-text-align="center"] { text-align: center; }
.article-body [data-text-align="right"],
.page-body [data-text-align="right"] { text-align: right; }
.article-body [data-text-align="justify"],
.page-body [data-text-align="justify"] { text-align: justify; }

.article-body table,
.page-body table {
  display: block;
  width: 100%;
  overflow-x: auto;
  margin: 2rem 0;
  border-collapse: collapse;
  font-size: 0.94rem;
}

.article-body table[data-align="left"],
.article-body table[data-align="center"],
.article-body table[data-align="right"],
.page-body table[data-align="left"],
.page-body table[data-align="center"],
.page-body table[data-align="right"] { width: min(88%, 48rem); }
.article-body table[data-align="left"],
.page-body table[data-align="left"] { margin-right: auto; margin-left: 0; }
.article-body table[data-align="center"],
.page-body table[data-align="center"] { margin-right: auto; margin-left: auto; }
.article-body table[data-align="right"],
.page-body table[data-align="right"] { margin-right: 0; margin-left: auto; }
.article-body table caption,
.page-body table caption {
  padding: 0 0 0.75rem;
  color: var(--soft);
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 700;
  text-align: left;
}

@media (max-width: 620px) {
  .article-body table[data-align],
  .page-body table[data-align] { width: 100%; }
}

.article-body th,
.article-body td,
.page-body th,
.page-body td {
  min-width: 9rem;
  padding: 0.75rem;
  border: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.article-cta {
  width: min(100% - 2 * var(--pad), var(--shell));
  margin: clamp(4rem, 9vw, 8rem) auto 0;
  padding: clamp(2.5rem, 6vw, 5rem);
  overflow: hidden;
  background:
    radial-gradient(circle at 85% 10%, rgba(234, 75, 43, 0.55), transparent 23rem),
    var(--editorial-night);
  color: white;
}

.article-cta h2 {
  max-width: 16ch;
  margin: 0;
  font-family: var(--display);
  font-size: clamp(2rem, 5vw, 4.2rem);
  line-height: 0.98;
  letter-spacing: -0.05em;
}

.article-cta p {
  max-width: 50ch;
  margin: 1.2rem 0 1.7rem;
  color: rgba(255, 255, 255, 0.74);
}

.related {
  margin-top: clamp(4rem, 9vw, 8rem);
}

/* Public discussion is visually quieter than the article. The form keeps its
   privacy and moderation state explicit before a reader submits anything. */
.reader-comments {
  max-width: 58rem;
  margin-top: clamp(4rem, 10vw, 8rem);
  padding-top: clamp(2rem, 5vw, 4rem);
  border-top: 3px solid var(--ink);
  scroll-margin-top: 6.5rem;
}

.reader-comments__heading {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: end;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--line-strong);
}

.reader-comments__heading h2,
.reader-comment-form-wrap h3 {
  margin: 0.55rem 0 0;
  font-family: var(--display);
  font-size: clamp(2rem, 5vw, 3.75rem);
  line-height: 0.98;
  letter-spacing: -0.045em;
}

.reader-comments__list {
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}

.reader-comment {
  padding: 1.5rem 0;
  border-top: 1px solid var(--line);
}

.reader-comment:last-child { border-bottom: 1px solid var(--line); }

.reader-comment header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 1rem;
}

.reader-comment header strong { font-size: 0.92rem; }

.reader-comment time {
  color: var(--ink-faint);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.reader-comment p {
  margin: 0.8rem 0 0;
  color: var(--ink-soft);
  line-height: 1.65;
}

.reader-comments__empty,
.reader-comments__closed {
  margin: 1.5rem 0 0;
  color: var(--ink-soft);
}

.reader-comment-form-wrap {
  display: grid;
  grid-template-columns: minmax(13.5rem, 0.7fr) minmax(0, 1.3fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
  margin-top: clamp(2.5rem, 7vw, 5rem);
  padding: clamp(1.5rem, 4vw, 3rem);
  border: 1px solid var(--line-strong);
  border-top: 4px solid var(--signal);
  background: linear-gradient(135deg, var(--surface), var(--paper));
}

.reader-comment-form-wrap h3 {
  position: sticky;
  top: 7rem;
  max-width: 10ch;
  font-size: clamp(2rem, 3.5vw, 3rem);
}

.reader-comment-form {
  display: grid;
  gap: 1.2rem;
  margin: 0;
}

.reader-comment-form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.reader-comment-form label {
  display: grid;
  align-content: start;
  gap: 0.45rem;
  font-size: 0.78rem;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.reader-comment-form input,
.reader-comment-form textarea {
  width: 100%;
  border: 1px solid var(--line-strong);
  border-radius: 0;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
}

.reader-comment-form input { min-height: 3.25rem; padding: 0 0.9rem; }

.reader-comment-form textarea {
  min-height: 9rem;
  padding: 0.9rem;
  resize: vertical;
}

.reader-comment-form input:focus,
.reader-comment-form textarea:focus {
  outline: 2px solid var(--signal);
  outline-offset: 2px;
}

.reader-comment-form small {
  color: var(--ink-faint);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
}

.reader-comment-form__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 1.2rem;
  align-items: center;
}

.reader-comment-form__actions .form-note { margin: 0; }

.comment-honeypot {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

@media (max-width: 42rem) {
  .reader-comment-form-wrap { grid-template-columns: 1fr; gap: 1.5rem; }
  .reader-comment-form-wrap h3 { position: static; max-width: none; }
  .reader-comment-form__grid { grid-template-columns: 1fr; }
}

.contact-layout {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(2rem, 8vw, 7rem);
  margin-bottom: clamp(5rem, 10vw, 9rem);
}

.social-contact-list {
  display: grid;
  border-top: 1px solid var(--line);
}

.social-contact-list a {
  display: grid;
  grid-template-columns: 0.7fr 1fr auto;
  gap: 1rem;
  align-items: center;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  transition: color 0.2s ease, padding-left 0.2s ease;
}

.social-contact-list a:hover,
.social-contact-list a:focus-visible {
  padding-left: 0.4rem;
  color: var(--signal-deep);
}

.social-contact-list strong {
  font-family: var(--display);
  font-size: 1.15rem;
}

.search-page {
  min-height: 50vh;
  padding-bottom: 7rem;
}

.search-results {
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}

.search-result {
  padding: 1.35rem 0;
  border-top: 1px solid var(--line);
}

.search-result a {
  text-decoration: none;
}

.search-result h2 {
  margin: 0;
  font-family: var(--display);
  font-size: 1.55rem;
  line-height: 1.1;
}

.search-result p {
  max-width: 65ch;
  margin: 0.45rem 0 0;
  color: var(--ink-soft);
}

[data-reveal] {
  opacity: 1;
  transform: none;
  transition: opacity 0.7s ease, transform 0.7s ease;
}

[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

@keyframes hero-drift {
  from { transform: scale(1.08); }
  to { transform: scale(1); }
}

@media (max-width: 70rem) {
}

@media (max-width: 48rem) {
}

@media (max-width: 900px) {
  .home-hero__copy,
  .manifesto,
  .contact-layout,
  .subcategory-callout {
    grid-template-columns: 1fr;
  }

  .editorial-lead {
    grid-template-columns: 1fr;
  }

  .story-grid,
  .social-posts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

}

@media (min-width: 621px) and (max-width: 75rem) {
  .article-hero__inner {
    padding-block: max(5.5rem, var(--chrome-header-height, 5.25rem)) clamp(1.75rem, 3vw, 2.5rem);
  }

  .article-hero .breadcrumbs {
    margin-bottom: clamp(1rem, 1.8vw, 1.4rem);
  }

  .article-hero h1 {
    max-width: 30ch;
    font-size: clamp(2.35rem, 4vw, 3.4rem);
    line-height: 0.96;
  }

  .article-standfirst { margin-top: 0.85rem; }
  .article-meta { margin-top: 0.9rem; }
}

@media (max-width: 620px) {
  body {
    min-width: 0;
    font-size: 1rem;
  }

  .reusable-block.reusable--image-left,
  .reusable-block.reusable--image-right {
    grid-template-columns: 1fr;
  }

  .reusable-block.reusable--image-right figure {
    order: 0;
  }

  .social-contact-list a {
    grid-template-columns: 1fr auto;
    gap: 0.25rem 1rem;
  }

  .social-contact-list strong {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .home-hero,
  .home-hero__inner {
    min-height: 32rem;
  }

  .home-hero__inner {
    padding-block: 3rem 2rem;
  }

  .home-hero__media::after {
    background: linear-gradient(0deg, rgba(9, 12, 17, 0.96), rgba(9, 12, 17, 0.22) 80%);
  }

  .home-hero h1 {
    font-size: clamp(3rem, 17vw, 4.25rem);
    line-height: 0.86;
  }

  .home-hero__copy {
    gap: 1rem;
    margin-top: 1.35rem;
  }

  .home-hero .button {
    min-height: 3rem;
    padding-inline: 1rem;
  }

  .home-section {
    margin-top: 3.5rem;
  }

  .section-heading {
    align-items: start;
  }

  .story-grid,
  .social-posts {
    grid-template-columns: 1fr;
  }

  .article-audio {
    padding: 1rem;
  }

  .article-hero__inner {
    padding-block: max(5rem, var(--chrome-header-height, 4.5rem)) 2rem;
  }

  .article-hero .breadcrumbs {
    margin-bottom: 1rem;
  }

  .article-hero h1 {
    max-width: 24ch;
    font-size: clamp(2.3rem, 10.5vw, 3.25rem);
    line-height: 0.95;
  }

  .article-standfirst {
    margin-top: 0.85rem;
    font-size: 1rem;
  }

  .article-meta { margin-top: 0.85rem; }

  .article-feature-wrap {
    background: linear-gradient(180deg, var(--editorial-night) 0 2rem, var(--paper) 2rem 100%);
  }

  .article-feature img {
    height: clamp(15rem, 58vw, 20rem);
  }

  .article-meta > * + *::before {
    margin-right: 0.8rem;
  }

  .archive-item a {
    grid-template-columns: 6.5rem minmax(0, 1fr);
  }

  .archive-item time,
  .archive-item__arrow {
    display: none;
  }

  .archive-item p {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .consent-banner {
    right: 0.75rem;
    bottom: max(0.75rem, env(safe-area-inset-bottom));
    align-items: stretch;
    width: min(20rem, calc(100% - 1.5rem));
    max-height: calc(100dvh - 1.5rem);
    padding: 1rem;
  }

  body:has(.consent-banner:not([hidden])) {
    padding-bottom: 20rem;
  }

  .consent-banner h2 {
    font-size: 1.3rem;
  }

  .consent-banner p {
    font-size: 0.84rem;
    line-height: 1.45;
  }

  .consent-banner__actions .button {
    min-height: 3rem;
    padding-inline: 0.55rem;
    font-size: 0.8rem;
  }

  .privacy-choices {
    right: 0.6rem;
    bottom: max(0.6rem, env(safe-area-inset-bottom));
    inline-size: 4.25rem;
    min-height: 2.75rem;
    padding: 0.45rem 0.65rem;
    border-color: color-mix(in srgb, var(--line-strong) 62%, transparent);
    background: color-mix(in srgb, var(--surface) 78%, transparent);
    box-shadow: none;
    font-size: 0;
    opacity: 0.78;
    transition: opacity 0.2s ease, background 0.2s ease;
  }

  .privacy-choices::before {
    content: 'Privacy';
    font-size: 0.7rem;
  }

  .privacy-choices:hover,
  .privacy-choices:focus-visible {
    background: var(--surface);
    opacity: 1;
  }

  .article-body figure.article-image,
  .article-body figure.article-image--wide,
  .article-body figure.article-image--full,
  .page-body figure.article-image,
  .page-body figure.article-image--wide,
  .page-body figure.article-image--full {
    position: static;
    left: auto;
    width: 100%;
    max-width: 100%;
    margin: 2rem 0;
    transform: none;
  }

  .article-body figure.article-image figcaption,
  .page-body figure.article-image figcaption {
    width: 100%;
    padding-inline: 0;
  }

  .article-lightbox {
    width: calc(100vw - 1rem);
    width: calc(100dvw - 1rem);
    max-width: calc(100vw - 1rem);
    max-width: calc(100dvw - 1rem);
    max-height: calc(100dvh - 1rem);
  }

  .article-lightbox img {
    max-height: calc(100dvh - 6rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  [data-reveal] {
    opacity: 1;
    transform: none;
  }
}

.x-timeline {
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border: 1px dashed var(--line-strong);
  background: var(--surface);
  text-align: center;
}

.x-timeline p { margin: 0 0 1rem; color: var(--ink-soft); }
.x-timeline .privacy-note { margin: 1rem 0 0; font-size: 0.85rem; }

/* Prompt cards: a prompt is something a reader takes away, so it reads as a
   discrete object with its own copy action rather than as list text. */
.form-note {
  color: var(--ink-soft);
  font-size: 0.92rem;
}

.prompt-list {
  margin: 1.75rem 0;
}

.prompt-list__items {
  margin: 0;
  padding: 0 0 0 1.6rem;
  display: grid;
  gap: 0.75rem;
}

/* The <li> keeps display: list-item so the numbering survives; the grid lives
   on an inner wrapper. Making the item itself a grid removes its marker. */
.prompt-card {
  padding: clamp(0.85rem, 2vw, 1.15rem);
  border: 1px solid var(--line);
  border-left: 3px solid var(--signal);
  background: var(--surface);
}

.prompt-card__inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  align-items: start;
}

.prompt-card::marker {
  color: var(--ink-faint);
  font-family: var(--sans);
  font-size: 0.9rem;
}

.prompt-card__text {
  margin: 0;
  line-height: 1.6;
}

.prompt-card__copy {
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink-soft);
  font: inherit;
  font-size: 0.82rem;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.prompt-card__copy:hover,
.prompt-card__copy:focus-visible {
  border-color: var(--signal);
  background: var(--signal);
  color: var(--signal-ink);
}

.prompt-card__copy.is-copied {
  border-color: var(--blueprint);
  background: var(--blueprint);
  color: var(--surface);
}

.prompt-index__controls {
  margin: 0 0 2.5rem;
  display: grid;
  gap: 0.5rem;
}

.prompt-group {
  margin: 0 0 3rem;
}

.prompt-group__count {
  color: var(--ink-faint);
  font-size: 0.88rem;
  white-space: nowrap;
}

@media (max-width: 620px) {
  .prompt-card__inner {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .prompt-card__copy {
    justify-self: start;
  }
}

/* Topic index: a scannable set of tags, sized by nothing but readability. */
.tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tag-cloud a {
  display: inline-flex;
  gap: 0.55rem;
  align-items: baseline;
  padding: 0.55rem 1rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  font-weight: 600;
  text-decoration: none;
  transition: border-color 0.18s ease, background 0.18s ease;
}

.tag-cloud a:hover,
.tag-cloud a:focus-visible {
  border-color: var(--signal);
  background: var(--paper-deep);
}

.tag-cloud span {
  color: var(--ink-faint);
  font-size: 0.82rem;
  font-weight: 500;
}

/* V4 public-page alignment. The homepage remains the expressive front cover;
   these rules carry its navy, cream, coral and blueprint rhythm through the
   directories and utility pages without forcing article content into a hero. */
.archive-hero,
.page-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-top: 0;
  padding: max(clamp(3.5rem, 7vw, 6.5rem), var(--chrome-header-height, 5.25rem)) clamp(1.5rem, 4vw, 3.5rem) clamp(2.5rem, 6vw, 5rem);
  border-top: 4px solid var(--signal);
  background:
    linear-gradient(120deg, rgb(11 79 216 / 22%), transparent 52%),
    var(--editorial-night);
  color: white;
  min-height: 24rem;
}

/* The public chrome is overlayed on the first hero. Keep the hero background
   full-bleed so the transparent header does not reveal the page paper in
   side gutters, while the copy remains aligned to the shared content shell. */
.archive-hero.shell,
.page-hero.shell,
.model-directory__hero-shell.shell,
.model-profile__hero.shell {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding-inline: max(var(--pad), calc((100% - var(--shell)) / 2 + var(--pad)));
}

/* Collection pages share the compact reading landmark used by articles. The
   homepage keeps its own full-bleed cover; News, Learn, AI Tools, and model
   directories should get to their content without repeating that cover. */
.archive-hero {
  min-height: 0;
  padding-block: max(5.75rem, var(--chrome-header-height, 5.25rem)) clamp(2rem, 3.5vw, 3rem);
}

.archive-hero--collection {
  display: grid;
  grid-template-areas:
    "breadcrumbs breadcrumbs"
    "eyebrow summary"
    "title summary";
  grid-template-columns: minmax(0, 1.15fr) minmax(18rem, 0.85fr);
  column-gap: clamp(2rem, 6vw, 6rem);
  align-items: end;
}

.archive-hero--collection .archive-hero__breadcrumbs { grid-area: breadcrumbs; }
.archive-hero--collection > .eyebrow { grid-area: eyebrow; }
.archive-hero--collection > h1 { grid-area: title; }
.archive-hero--collection > p {
  display: flex;
  grid-area: summary;
  align-self: stretch;
  align-items: flex-end;
  max-width: 36rem;
  margin: 0;
  padding: 1rem 0 0 clamp(1.25rem, 3vw, 2.5rem);
  border-left: 2px solid var(--blueprint);
}

.archive-hero .breadcrumbs,
.model-directory__breadcrumbs {
  margin-bottom: clamp(1.1rem, 2.1vw, 1.75rem);
  color: rgb(255 255 255 / 58%);
}

.archive-hero .breadcrumbs a,
.model-directory__breadcrumbs a { color: inherit; }

.archive-hero .breadcrumbs a:hover,
.archive-hero .breadcrumbs a:focus-visible,
.model-directory__breadcrumbs a:hover,
.model-directory__breadcrumbs a:focus-visible { color: white; }

.archive-hero::after,
.page-hero::after,
.model-directory__hero-shell::after,
.model-profile__hero::after {
  position: absolute;
  z-index: -1;
  right: clamp(-2rem, -1vw, 0rem);
  bottom: clamp(-6rem, -7vw, -3rem);
  color: rgb(255 255 255 / 5%);
  content: 'P/B';
  font-family: var(--display);
  font-size: clamp(8rem, 23vw, 20rem);
  letter-spacing: -0.09em;
  line-height: 0.7;
}

.archive-hero::after { content: none; }

.archive-hero .eyebrow,
.page-hero .eyebrow,
.model-directory__hero .eyebrow,
.model-profile__hero .eyebrow { color: #ff7a65; }

.archive-hero h1,
.page-hero h1,
.model-directory__hero h1 {
  max-width: 15ch;
  color: white;
  font-size: clamp(3rem, 5.5vw, 4.25rem);
  font-weight: 400;
}

.archive-hero h1,
.model-directory__hero h1 {
  max-width: 30ch;
  font-size: clamp(2.8rem, 5vw, 5.1rem);
  line-height: 0.94;
}

.archive-hero p,
.page-hero p { color: rgb(255 255 255 / 72%); }

.archive-hero p {
  max-width: 64ch;
  margin-top: 1rem;
  font-size: clamp(1rem, 1.7vw, 1.2rem);
  line-height: 1.4;
}

.editorial-lead {
  gap: 0;
  align-items: stretch;
  overflow: hidden;
  border-bottom: 3px solid var(--blueprint);
  background: var(--editorial-night);
  color: white;
}

/* Keep the archive lead distinct from the hero and bounded on wide screens. */
.archive-feature {
  position: relative;
  z-index: 1;
  margin-top: clamp(1.5rem, 3vw, 2.75rem);
}

.archive-feature .editorial-lead {
  grid-template-columns: minmax(0, 1.18fr) minmax(18rem, 0.82fr);
  min-height: clamp(20rem, 26vw, 26rem);
  border: 1px solid var(--editorial-night-line);
  border-bottom: 3px solid var(--blueprint);
  background: var(--editorial-night-deep);
  box-shadow: 0 2rem 5rem -3.5rem rgb(0 0 0 / 88%);
}

.editorial-lead > div:not(.editorial-lead__image) {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: clamp(1.5rem, 4vw, 3.5rem);
}

.archive-feature .editorial-lead > div:not(.editorial-lead__image) {
  position: relative;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background:
    linear-gradient(145deg, rgb(11 79 216 / 22%), transparent 62%),
    var(--editorial-night-raised);
}

.archive-feature .editorial-lead__copy {
  justify-content: space-between;
}

.archive-feature .editorial-lead__copy::before {
  content: '';
  position: absolute;
  top: clamp(1.5rem, 3vw, 2.5rem);
  left: 0;
  width: 2.5rem;
  height: 2px;
  background: var(--signal);
}

.editorial-lead__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-width: 0;
}

.editorial-lead__meta .eyebrow { margin: 0; }

.editorial-lead__section {
  overflow: hidden;
  color: rgb(255 255 255 / 62%);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-align: right;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Let the desktop grid own the image width; restore its ratio when stacked. */
.editorial-lead .editorial-lead__image {
  min-height: clamp(16rem, 28vw, 24rem);
  aspect-ratio: auto;
}

.archive-feature .editorial-lead .editorial-lead__image {
  position: relative;
  min-height: clamp(15rem, 22vw, 20rem);
  background: var(--editorial-night-deep);
}

.archive-feature .editorial-lead .editorial-lead__image img {
  position: absolute;
  inset: 0;
}

.archive-feature .editorial-lead h2,
.archive-feature .editorial-lead h3 {
  max-width: 15ch;
  margin: clamp(1.25rem, 2.3vw, 2rem) 0 0.85rem;
  font-size: clamp(2.15rem, 3.6vw, 3.65rem);
  line-height: 1;
}

.archive-feature .editorial-lead p {
  display: -webkit-box;
  overflow: hidden;
  max-width: 36ch;
  margin: 0;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
}

.editorial-lead__cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 1.2rem;
  border-top: 1px solid rgb(255 255 255 / 22%);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.editorial-lead__cta > span {
  color: var(--signal);
  font-size: 1.35rem;
  font-weight: 400;
  letter-spacing: 0;
}

/* A post may be published before its media is ready. Collapse the missing
   media column so the featured story remains intentional rather than looking
   like a broken, empty image frame. */
.editorial-lead--no-image {
  grid-template-columns: minmax(0, 1fr);
  min-height: 0;
}

.editorial-lead--no-image > div:not(.editorial-lead__image) {
  min-height: 0;
  background:
    linear-gradient(135deg, rgb(11 79 216 / 22%), transparent 58%),
    var(--editorial-night-raised);
}

.editorial-lead p { color: rgb(255 255 255 / 70%); }
.editorial-lead .eyebrow { color: #ff7a65; }

/* The X page presents one locally stored post as an embed-style card. It does
   not load X's widget script, so viewing the page never triggers an API read. */
.archive-hero--x {
  min-height: 0;
  padding-bottom: clamp(2rem, 3.5vw, 3rem);
}

.archive-hero--x h1 { font-size: clamp(2.8rem, 5vw, 5.1rem); }
.archive-hero--x p { max-width: 34rem; }

.x-post-embed-section {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  min-height: 0;
  margin-top: clamp(-5rem, -7vw, -4rem);
  padding-block: 0 clamp(4rem, 8vw, 7rem);
}

.x-post-embed {
  box-sizing: border-box;
  width: min(100%, 34.375rem);
  padding: 1.2rem 1.25rem 0;
  border: 1px solid #cfd9de;
  border-radius: 0.75rem;
  background: #fff;
  color: #0f1419;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  box-shadow: 0 1rem 3rem rgb(7 26 56 / 12%);
}

.x-post-embed__header,
.x-post-embed__profile,
.x-post-embed__footer {
  display: flex;
  align-items: center;
}

.x-post-embed__header {
  justify-content: space-between;
  gap: 1rem;
}

.x-post-embed__profile {
  min-width: 0;
  gap: 0.65rem;
  color: inherit;
  text-decoration: none;
}

.x-post-embed__avatar {
  flex: 0 0 3rem;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: #eff3f4;
  object-fit: cover;
}

.x-post-embed__identity {
  display: grid;
  min-width: 0;
  line-height: 1.18;
}

.x-post-embed__identity strong {
  overflow: hidden;
  font-size: 0.94rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.x-post-embed__identity span,
.x-post-embed__date { color: #536471; }

.x-post-embed__identity span { font-size: 0.9rem; }

.x-post-embed__brand {
  display: grid;
  flex: 0 0 auto;
  width: 1.55rem;
  height: 1.55rem;
  place-items: center;
  color: #0f1419;
  text-decoration: none;
}

.x-post-embed__brand svg {
  display: block;
  width: 1.35rem;
  height: 1.35rem;
  fill: currentColor;
}

.x-post-embed__text {
  margin: 0.95rem 0 0.85rem;
  color: #0f1419;
  font-size: 1.25rem;
  letter-spacing: -0.012em;
  line-height: 1.35;
  overflow-wrap: anywhere;
  white-space: normal;
}

.x-post-embed__text a,
.x-post-embed__footer a { color: #1d9bf0; }

.x-post-embed__date {
  display: inline-block;
  font-size: 0.94rem;
  text-decoration: none;
}

.x-post-embed__footer {
  justify-content: flex-start;
  margin-top: 0.8rem;
  padding-block: 0.85rem 1rem;
  border-top: 1px solid #eff3f4;
}

.x-post-embed__footer a {
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
}

.x-post-embed a:hover,
.x-post-embed a:focus-visible { text-decoration: underline; }

/* The Legacy Custom GPT collection is a working directory, not a news feed.
   Give its large catalogue a denser card rhythm while keeping the navy cover,
   coral rules and editorial type used by the V4 homepage. */
.custom-gpt-directory { overflow: clip; }

.archive-hero--custom-gpts {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(15rem, 0.55fr);
  gap: clamp(2.5rem, 7vw, 7rem);
  align-items: end;
}

.archive-hero--custom-gpts .archive-hero__breadcrumbs { grid-column: 1 / -1; }

.archive-hero--custom-gpts h1 {
  max-width: 12ch;
  font-size: clamp(2.8rem, 5vw, 5.1rem);
}

.archive-hero--custom-gpts h1 span {
  display: block;
  color: rgb(255 255 255 / 88%);
  font-size: 0.68em;
  line-height: 1;
}

.archive-hero__directory-note {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: end;
  padding: clamp(1.25rem, 3vw, 2rem) 0 0 clamp(1.25rem, 3vw, 2rem);
  border-left: 2px solid var(--signal);
}

.archive-hero__directory-note strong {
  font-family: var(--display);
  font-size: clamp(3.5rem, 6vw, 5.75rem);
  font-weight: 400;
  letter-spacing: -0.06em;
  line-height: 0.78;
}

.archive-hero__directory-note > span {
  margin-top: 0.75rem;
  color: #ff7a65;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.archive-hero--custom-gpts .archive-hero__directory-note p {
  margin-top: 1.25rem;
  color: rgb(255 255 255 / 72%);
  font-size: 1rem;
  line-height: 1.55;
}

.custom-gpt-directory__featured {
  margin-top: clamp(2.5rem, 5vw, 4.5rem);
}

.custom-gpt-directory__featured .editorial-lead {
  min-height: clamp(16rem, 28vw, 24rem);
}

.custom-gpt-directory__featured .editorial-lead__image {
  height: clamp(16rem, 28vw, 24rem);
  min-height: 0;
  aspect-ratio: auto;
}

.custom-gpt-directory__featured .editorial-lead__image img {
  height: 100%;
}

.custom-gpt-directory__browse { margin-top: clamp(4.5rem, 8vw, 7rem); }

.custom-gpt-directory__browse .archive-tools {
  margin-top: 2rem;
  padding: clamp(1rem, 2vw, 1.4rem) clamp(1.1rem, 2vw, 1.5rem);
  border: 1px solid var(--line-strong);
  border-top: 3px solid var(--signal);
  background: var(--surface);
}

.custom-gpt-directory__browse .filter-field {
  width: 100%;
  max-width: none;
  padding-inline: 0.25rem;
}

.archive-list--custom-gpts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  padding: 1px;
  background: var(--ink);
}

.archive-list--custom-gpts .archive-item {
  min-width: 0;
  border: 0;
  background: var(--surface);
  content-visibility: auto;
  contain-intrinsic-size: 1px 26rem;
}

.archive-list--custom-gpts .archive-item:last-child { border: 0; }

.archive-list--custom-gpts .archive-item a {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  gap: 0;
  height: 100%;
  padding: 0;
  border-top: 3px solid var(--blueprint);
}

.archive-list--custom-gpts .archive-item img,
.archive-list--custom-gpts .archive-item a > span:first-child {
  display: block;
  min-width: 0;
  width: 100%;
  height: clamp(11rem, 18vw, 14rem);
  aspect-ratio: auto;
  object-fit: cover;
  background: var(--paper-deep);
}

.archive-list--custom-gpts .archive-item a > div {
  padding: clamp(1.1rem, 2.4vw, 1.5rem) clamp(1.1rem, 2.4vw, 1.5rem) 0.75rem;
}

.archive-list--custom-gpts .archive-item h3 {
  font-size: clamp(1.35rem, 2vw, 1.8rem);
  line-height: 1.05;
}

.archive-list--custom-gpts .archive-item p {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.archive-list--custom-gpts .archive-item__arrow {
  justify-self: start;
  margin: 0 clamp(1.1rem, 2.4vw, 1.5rem) clamp(1.1rem, 2.4vw, 1.5rem);
  color: var(--blueprint);
  font-weight: 700;
}

.archive-list--custom-gpts .archive-item a:hover { border-top-color: var(--signal); }

.home-section > .section-heading h2,
.related > .section-heading h2 {
  font-size: clamp(2.1rem, 4.5vw, 4.4rem);
  font-weight: 400;
}

.archive-item a {
  padding-inline: clamp(0.75rem, 1.5vw, 1.25rem);
  transition: background-color 180ms ease, color 180ms ease;
}

.archive-item a:hover {
  background: var(--editorial-night);
  color: white;
}

.archive-item a:hover p,
.archive-item a:hover time { color: rgb(255 255 255 / 68%); }
.archive-item a:hover h2,
.archive-item a:hover h3,
.archive-item a:hover .archive-item__arrow { color: white; }

.prompt-grid,
.tag-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 2rem 0 0;
  padding: 1px;
  background: var(--ink);
  list-style: none;
}

.prompt-grid .prompt-card {
  margin: 0;
  border: 0;
  border-top: 3px solid var(--signal);
  background: var(--surface);
}

.tag-card {
  display: flex;
  min-height: 9rem;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  padding: clamp(1.25rem, 3vw, 2rem);
  background: var(--surface);
  text-decoration: none;
  transition: background-color 180ms ease, color 180ms ease;
}

.tag-card strong {
  font-family: var(--display);
  font-size: clamp(1.4rem, 2.7vw, 2.2rem);
  font-weight: 400;
  line-height: 1;
}

.tag-card span { color: var(--signal); font-size: 0.78rem; font-weight: 700; }
.tag-card:hover { background: var(--editorial-night); color: white; }

/* Open and closed model directories use the same bounded collection hero as
   archives. The explainer stays beside the title on wide screens, then moves
   below the fixed-height title panel so it remains readable on small screens. */
.model-directory,
.model-profile { overflow: clip; }

.model-directory__hero-shell,
.model-profile__hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-top: 4px solid var(--signal);
  background:
    linear-gradient(120deg, rgb(11 79 216 / 24%), transparent 55%),
    var(--editorial-night);
  color: white;
}

.model-directory__hero-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: end;
  min-height: 0;
  border-top: 0;
  padding-inline: clamp(1.5rem, 4vw, 3.5rem);
}

.model-directory__hero-shell > .model-directory__hero {
  display: flex;
  min-width: 0;
  min-height: 0;
  align-items: center;
  border: 0;
  border-top: 4px solid var(--signal);
  background: transparent;
  color: inherit;
  padding-block: max(5.75rem, var(--chrome-header-height, 5.25rem)) clamp(2rem, 3.5vw, 3rem);
}

.model-directory__hero h1 {
  max-width: 30ch;
  margin: 1rem 0 0;
  font-family: var(--display);
  font-size: clamp(2.8rem, 5vw, 5.1rem);
  font-weight: 400;
  letter-spacing: -0.06em;
  line-height: 0.94;
}

.model-profile__hero h1 {
  max-width: 20ch;
  margin: 1rem 0 0;
  font-family: var(--display);
  font-size: clamp(2.8rem, 5vw, 5.1rem);
  font-weight: 400;
  letter-spacing: -0.07em;
  line-height: 0.94;
}

.model-directory__intro {
  align-self: center;
  padding-top: 1.25rem;
  border-top: 3px solid var(--blueprint);
}

.model-directory__intro p {
  max-width: 39ch;
  margin: 0;
  color: rgb(255 255 255 / 74%);
  font-size: clamp(1.1rem, 1.8vw, 1.25rem);
}

.model-directory__intro .model-directory__updated {
  margin-top: 1.5rem;
  color: #ff7a65;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.model-explainer {
  display: grid;
  grid-template-columns: 0.55fr 0.9fr 1.15fr;
  gap: clamp(1.5rem, 5vw, 4rem);
  align-items: start;
  padding-block: clamp(3rem, 7vw, 5.5rem);
  border-bottom: 1px solid var(--line-strong);
}

.model-explainer h2,
.model-profile__details h2,
.model-profile__links h2,
.model-directory__bridge h2 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(2rem, 4vw, 3.6rem);
  font-weight: 400;
  letter-spacing: -0.05em;
  line-height: 0.98;
}

.model-explainer p { max-width: 48ch; margin: 0; color: var(--ink-soft); }

.model-lab-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  padding: 1px;
  background: var(--ink);
}

.model-card,
.closed-model-card {
  display: flex;
  min-height: 29rem;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  padding: clamp(1.5rem, 3.5vw, 2.75rem);
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
  transition: background-color 180ms ease, color 180ms ease;
}

.model-card:nth-child(4n + 1),
.model-card:nth-child(4n + 4) { border-top: 3px solid var(--signal); }
.model-card:nth-child(4n + 2),
.model-card:nth-child(4n + 3) { border-top: 3px solid var(--blueprint); }

.model-card:hover { background: var(--editorial-night); color: white; }
.model-card__top,
.model-profile__title,
.closed-model-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.model-card__number { color: var(--ink-faint); font-family: var(--display); font-size: 1rem; }
.model-badge { max-width: 18rem; color: var(--signal-deep); font-size: 0.72rem; font-weight: 700; text-align: right; text-transform: uppercase; }
.model-card h3,
.closed-model-card h3 { margin: 0.75rem 0 0; font-family: var(--display); font-size: clamp(2.5rem, 5vw, 4.6rem); font-weight: 400; letter-spacing: -0.06em; line-height: 0.9; }
.model-card p,
.closed-model-card p { max-width: 48ch; margin: 1rem 0 0; color: var(--ink-soft); }
.model-card:hover p,
.model-card:hover .model-card__number,
.model-card:hover .model-card__release span { color: rgb(255 255 255 / 68%); }
.model-card:hover .model-badge { color: #ff7a65; }
.model-card__release { display: grid; gap: 0.25rem; padding-top: 1.25rem; border-top: 1px solid currentColor; }
.model-card__release span { color: var(--ink-faint); font-size: 0.75rem; }
.model-card__release strong { font-family: var(--display); font-size: 1.25rem; font-weight: 400; }
.model-card__link { color: inherit; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-decoration: none; text-transform: uppercase; }

.model-profile__hero { padding-block: max(5.75rem, var(--chrome-header-height, 5.25rem)) clamp(2rem, 3.5vw, 3rem); }
.model-profile__back { display: inline-flex; gap: 0.6rem; color: rgb(255 255 255 / 66%); font-size: 0.78rem; font-weight: 700; text-decoration: none; text-transform: uppercase; }
.model-profile__title { align-items: end; margin-top: clamp(2rem, 5vw, 4rem); }
.model-profile__hero > p { max-width: 52ch; margin: 2rem 0 0; color: rgb(255 255 255 / 72%); font-size: clamp(1.05rem, 2vw, 1.35rem); }
.model-profile__hero .model-badge { color: #ff7a65; }

.model-release {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(18rem, 0.9fr);
  gap: clamp(2rem, 7vw, 6rem);
  padding-block: clamp(4rem, 8vw, 7rem);
}

.model-release__heading h2 { margin: 0.8rem 0 0; font-family: var(--display); font-size: clamp(3rem, 7vw, 6rem); font-weight: 400; letter-spacing: -0.07em; line-height: 0.9; }
.model-release__heading p { max-width: 50ch; margin: 1.5rem 0 0; color: var(--ink-soft); }
.model-facts,
.closed-model-facts { margin: 0; border-top: 1px solid var(--line-strong); }
.model-facts div,
.closed-model-facts div { display: grid; grid-template-columns: 0.7fr 1.3fr; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--line); }
.model-facts dt,
.closed-model-facts dt { color: var(--ink-faint); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.model-facts dd,
.closed-model-facts dd { margin: 0; font-weight: 600; }

.model-profile__details {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.8fr);
  gap: clamp(2rem, 6vw, 5rem);
  padding-block: clamp(3.5rem, 7vw, 6rem);
  border-block: 1px solid var(--line-strong);
}

.model-strengths { margin: 2rem 0 0; padding: 0; list-style: none; }
.model-strengths li { padding: 1rem 0; border-top: 1px solid var(--line); font-family: var(--display); font-size: clamp(1.25rem, 2.5vw, 1.8rem); }
.model-openness { padding: clamp(1.75rem, 4vw, 3rem); border-top: 4px solid var(--signal); background: var(--editorial-night); color: white; }
.model-openness .eyebrow { color: #ff7a65; }
.model-openness p { margin: 1.5rem 0 0; color: rgb(255 255 255 / 72%); }
.model-profile__links { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding-block: clamp(3rem, 7vw, 5.5rem); }

.closed-model-grid { display: grid; grid-template-columns: minmax(0, 1fr); }
.closed-model-card { min-height: 0; border-top: 4px solid var(--blueprint); background: var(--surface); }
.closed-model-facts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.closed-model-facts div { display: block; padding: 1rem; border-right: 1px solid var(--line); }
.closed-model-facts dd { margin-top: 0.4rem; font-family: var(--display); font-size: 1.2rem; font-weight: 400; }
.model-directory__bridge { display: grid; grid-template-columns: 0.7fr 1fr 1fr auto; gap: 1.5rem; align-items: center; margin-top: clamp(2rem, 5vw, 4rem); padding: clamp(1.5rem, 4vw, 3rem); border: 1px solid var(--ink); }
.model-directory__bridge p { margin: 0; color: var(--ink-soft); }

@media (max-width: 54rem) {
  .archive-hero--collection {
    grid-template-areas: "breadcrumbs" "eyebrow" "title" "summary";
    grid-template-columns: 1fr;
  }
  .archive-hero--collection > p {
    display: block;
    margin-top: 1.25rem;
    padding: 1rem 0 0;
    border-top: 1px solid rgb(255 255 255 / 24%);
    border-left: 0;
  }
  .archive-hero--custom-gpts { grid-template-columns: 1fr; }
  .archive-hero__directory-note {
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 1rem;
    align-items: end;
    padding: 1.25rem 0 0;
    border-top: 1px solid rgb(255 255 255 / 24%);
    border-left: 0;
  }
  .archive-hero__directory-note > span { margin: 0 0 0.25rem; }
  .archive-hero--custom-gpts .archive-hero__directory-note p { grid-column: 1 / -1; }
  .custom-gpt-directory__featured .editorial-lead { min-height: 0; }
  .custom-gpt-directory__featured .editorial-lead__image {
    height: auto;
    min-height: 0;
    aspect-ratio: 16 / 9;
  }
  .archive-list--custom-gpts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .archive-list--custom-gpts .archive-item { contain-intrinsic-size: 1px 22rem; }
  .model-directory__hero-shell,
  .model-explainer,
  .model-release,
  .model-profile__details { grid-template-columns: 1fr; }
  .model-lab-grid,
  .prompt-grid,
  .tag-grid { grid-template-columns: 1fr; }
  .model-directory__bridge { grid-template-columns: 1fr; }
  .closed-model-facts { grid-template-columns: 1fr 1fr; }

  .model-directory__hero-shell {
    display: block;
    min-height: 0;
  }

  .model-directory__hero-shell > .model-directory__hero {
    min-height: 0;
    padding-inline: 0;
  }

  .model-directory__hero-shell > .model-directory__intro {
    padding: 1.25rem 0 1.5rem;
    border-top-width: 2px;
  }
  .model-profile__links { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 42rem) {
  .archive-hero,
  .page-hero,
  .model-directory__hero-shell { padding-inline: 1.25rem; }
  .archive-hero.shell,
  .page-hero.shell,
  .model-directory__hero-shell.shell,
  .model-profile__hero.shell { padding-inline: 1.25rem; }
  .archive-hero { min-height: 0; }
  .archive-hero,
  .page-hero,
  .model-directory__hero-shell > .model-directory__hero {
    padding-block: max(5rem, var(--chrome-header-height, 4.5rem)) 2rem;
  }
  .editorial-lead,
  .archive-feature .editorial-lead { grid-template-columns: 1fr; }
  .archive-feature { margin-top: 1rem; }
  .archive-feature .editorial-lead { min-height: 0; }
  .archive-feature .editorial-lead > div:not(.editorial-lead__image) { padding: 1.35rem; }
  .archive-feature .editorial-lead__copy { min-height: 15rem; }
  .archive-feature .editorial-lead__copy::before { top: 1.35rem; }
  .archive-feature .editorial-lead h2,
  .archive-feature .editorial-lead h3 { font-size: clamp(1.9rem, 10vw, 2.6rem); }
  .editorial-lead .editorial-lead__image {
    min-height: 0;
    aspect-ratio: 16 / 10;
  }
  .archive-tools { margin-bottom: 1.5rem; }
  .archive-item a {
    grid-template-columns: 7rem minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
  }
  .archive-item img,
  .archive-item a > span:first-child {
    display: block;
    width: 7rem;
    aspect-ratio: 4 / 3;
  }
  .archive-item h3 {
    font-size: clamp(1.25rem, 5.2vw, 1.5rem);
    line-height: 1.08;
  }
  .archive-item p {
    margin-top: 0.55rem;
    font-size: 0.98rem;
    line-height: 1.45;
  }
  .archive-item__arrow { display: none; }
  .archive-more { width: 100%; }
  .x-post-embed-section {
    min-height: 0;
    margin-top: -3.5rem;
    padding-block: 0 3.5rem;
  }
  .archive-hero--x {
    min-height: 0;
    padding-bottom: 2rem;
  }
  .x-post-embed { padding: 1rem 1rem 0; }
  .x-post-embed__text { font-size: 1.08rem; }
  .archive-hero--custom-gpts {
    gap: 2.25rem;
    padding-block: max(3rem, var(--chrome-header-height, 4.5rem)) 3rem;
  }
  .archive-hero--custom-gpts h1 { font-size: clamp(3.15rem, 15vw, 4.7rem); }
  .custom-gpt-directory__featured { margin-top: 1.25rem; }
  .custom-gpt-directory__featured .editorial-lead { min-height: 0; }
  .custom-gpt-directory__featured .editorial-lead__image {
    height: auto;
    min-height: 0;
    aspect-ratio: 4 / 3;
  }
  .archive-list--custom-gpts { grid-template-columns: 1fr; }
  .archive-list--custom-gpts .archive-item { contain-intrinsic-size: 1px 10rem; }
  .archive-list--custom-gpts .archive-item a {
    grid-template-columns: 7rem minmax(0, 1fr);
    grid-template-rows: 1fr auto;
  }
  .archive-list--custom-gpts .archive-item img,
  .archive-list--custom-gpts .archive-item a > span:first-child {
    grid-row: 1 / span 2;
    height: 100%;
    min-height: 10rem;
  }
  .archive-list--custom-gpts .archive-item a > div { padding: 1rem 1rem 0.45rem; }
  .archive-list--custom-gpts .archive-item h3 { font-size: 1.3rem; }
  .archive-list--custom-gpts .archive-item p {
    margin-top: 0.35rem;
    font-size: 0.85rem;
    -webkit-line-clamp: 2;
  }
  .archive-list--custom-gpts .archive-item__arrow {
    display: inline;
    grid-column: 2;
    margin: 0 1rem 0.85rem;
  }
  .model-profile__hero h1 { font-size: clamp(2.3rem, 10.5vw, 3.25rem); }
  .model-lab-grid { display: block; padding: 0; }
  .model-card + .model-card { border-top: 1px solid var(--ink); }
  .closed-model-facts { grid-template-columns: 1fr; }
}

:root {
  --chrome-ink: var(--ink, #071a38);
  --chrome-ink-soft: var(--ink-soft, #233550);
  --chrome-line: var(--line, var(--rule, rgb(7 26 56 / 18%)));
  --chrome-paper: var(--surface, var(--paper, #f4efe7));
  --chrome-paper-deep: var(--paper-deep, var(--paper, #e4dfd3));
  --chrome-signal: var(--signal, #ef4b33);
  --chrome-signal-ink: #071a38;
  --chrome-blue: var(--blueprint, #00549e);
  --chrome-blue-ink: var(--blueprint-ink, white);
  --chrome-shell: 76rem;
  --chrome-pad: clamp(1.1rem, 3vw, 2rem);
  --chrome-header-shell: 76rem;
  --chrome-header-pad: clamp(1.1rem, 3vw, 2rem);
  --chrome-header-height: 5.25rem;
  --chrome-glass-dark: rgb(7 26 56 / 6%);
  --chrome-glass-dark-line: rgb(255 255 255 / 35%);
  --chrome-glass-light: rgb(250 248 242 / 8%);
  --chrome-glass-light-line: rgb(7 26 56 / 14%);
  --chrome-glass-filter: blur(18px) saturate(2.3) brightness(1.08);
  --chrome-glass-dark-shadow: 0 12px 32px rgb(3 16 36 / 22%), inset 0 1px 1px rgb(255 255 255 / 48%), inset 0 -10px 20px -12px rgb(255 255 255 / 24%);
  --chrome-glass-light-shadow: 0 12px 30px rgb(7 26 56 / 12%), inset 0 1px 1px rgb(255 255 255 / 40%), inset 0 -10px 20px -12px rgb(255 255 255 / 14%);
  --chrome-glass-sheen:
    radial-gradient(65% 180% at 13% -75%, rgb(255 255 255 / 24%), transparent 58%),
    radial-gradient(45% 160% at 92% 5%, rgb(111 187 255 / 18%), transparent 62%),
    linear-gradient(180deg, rgb(255 255 255 / 12%), rgb(255 255 255 / 4%) 42%, transparent 72%);
  --chrome-display: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, serif;
  --chrome-sans: "Outfit", "Avenir Next", sans-serif;
}

html[data-site-theme='dark'] {
  color-scheme: dark;
  --paper: #0c1422;
  --paper-deep: #17263a;
  --paper-bright: #111d2e;
  --surface: #142238;
  --ink: #f2f5fb;
  --ink-soft: #c2ccdc;
  --ink-faint: #9caac0;
  --line: rgb(226 234 247 / 18%);
  --line-strong: rgb(226 234 247 / 34%);
  --rule: rgb(226 234 247 / 22%);
  --signal: #ff735b;
  --signal-deep: #ff9a84;
  --blueprint: #2ea3f2;
  --blueprint-ink: #071a38;
  --blue: #00549e;
  --blue-deep: #0c2a5c;
  --red: #ff735b;
  --chrome-ink: #f2f5fb;
  --chrome-ink-soft: #c2ccdc;
  --chrome-line: rgb(226 234 247 / 18%);
  --chrome-paper: #142238;
  --chrome-paper-deep: #17263a;
  --chrome-signal: #ff735b;
  --chrome-blue: #2ea3f2;
  --chrome-blue-ink: #071a38;
  --chrome-glass-dark: rgb(4 10 20 / 28%);
  --chrome-glass-dark-line: rgb(235 242 255 / 28%);
  --chrome-glass-light: rgb(10 18 31 / 72%);
  --chrome-glass-light-line: rgb(226 234 247 / 20%);
  --chrome-glass-dark-shadow: 0 12px 32px rgb(0 0 0 / 34%), inset 0 1px 1px rgb(255 255 255 / 18%), inset 0 -10px 20px -12px rgb(255 255 255 / 12%);
  --chrome-glass-light-shadow: 0 12px 30px rgb(0 0 0 / 28%), inset 0 1px 1px rgb(255 255 255 / 14%), inset 0 -10px 20px -12px rgb(255 255 255 / 8%);
  --chrome-glass-sheen:
    radial-gradient(65% 180% at 13% -75%, rgb(255 255 255 / 14%), transparent 58%),
    radial-gradient(45% 160% at 92% 5%, rgb(121 170 255 / 12%), transparent 62%),
    linear-gradient(180deg, rgb(255 255 255 / 7%), rgb(255 255 255 / 2%) 42%, transparent 72%);
}

html[data-site-theme='dark'] body {
  background: var(--paper);
  color: var(--ink);
}

body {
  font-size: 1.08rem;
  line-height: 1.68;
}

body.type-scale-compact { font-size: 1rem; }
body.type-scale-balanced { font-size: 1.04rem; }
body.type-scale-expressive { font-size: 1.08rem; }
body.spacing-compact { --chrome-pad: clamp(0.85rem, 2vw, 1.5rem); }
body.spacing-generous { --chrome-pad: clamp(1.35rem, 4vw, 2.75rem); }
body.content-width-narrow { --chrome-shell: 62rem; }
body.content-width-wide { --chrome-shell: 90rem; }

/* The public header is a shared component. Keep its structure, desktop
   spacing, responsive breakpoint, and open-state treatment here so the
   homepage, runtime documents, and generated fallbacks cannot grow separate
   navigation systems. */
body.nav-open { overflow: hidden; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid var(--chrome-glass-dark-line);
  background: var(--chrome-glass-dark);
  color: white;
  /* Liquid-glass approximation: full-width bar, clear saturated blur, a
     bright rim with lensing insets, and a sheen overlay. True refraction
     needs backdrop-filter: url(), which Safari lacks. */
  -webkit-backdrop-filter: var(--chrome-glass-filter);
  backdrop-filter: var(--chrome-glass-filter);
  box-shadow: var(--chrome-glass-dark-shadow);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  isolation: isolate;
  transition: none;
}

/* Sheen: light wash behind the content, above the blurred backdrop. Only the
   dark unscrolled state keeps it — on the clear scrolled glass any uniform
   wash reads as a white film. */
.site-header::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: var(--chrome-glass-sheen);
}

.site-header::after {
  display: block;
  position: absolute;
  inset: 0 0 auto;
  z-index: 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / 62%) 18%, rgb(255 255 255 / 24%) 82%, transparent);
  content: '';
}

.site-header.is-scrolled::before { display: none; }

.site-header--sticky { position: sticky; top: 0; z-index: 100; }

.site-header--overlay {
  position: fixed;
  inset: 0 0 auto;
  border-bottom-color: var(--chrome-glass-dark-line);
  background: var(--chrome-glass-dark);
  color: white;
  -webkit-backdrop-filter: var(--chrome-glass-filter);
  backdrop-filter: var(--chrome-glass-filter);
  box-shadow: var(--chrome-glass-dark-shadow);
  transition: none;
}

.site-header--overlay::after {
  display: block;
}

.site-header--overlay.is-scrolled {
  border-bottom-color: var(--chrome-glass-light-line);
  background: var(--chrome-glass-light);
  color: var(--chrome-ink);
  -webkit-backdrop-filter: var(--chrome-glass-filter);
  backdrop-filter: var(--chrome-glass-filter);
  box-shadow: var(--chrome-glass-light-shadow);
}

.site-header--overlay.is-scrolled::after {
  background: linear-gradient(90deg, transparent, rgb(7 26 56 / 28%) 18%, rgb(255 255 255 / 32%) 82%, transparent);
}

.site-header:not(.site-header--overlay).is-scrolled {
  border-bottom-color: var(--chrome-glass-light-line);
  background: var(--chrome-glass-light);
  color: var(--chrome-ink);
  -webkit-backdrop-filter: var(--chrome-glass-filter);
  backdrop-filter: var(--chrome-glass-filter);
  box-shadow: var(--chrome-glass-light-shadow);
}

.site-header--article {
  border-bottom-color: var(--chrome-glass-dark-line);
  background: var(--chrome-glass-dark);
  color: white;
  -webkit-backdrop-filter: var(--chrome-glass-filter);
  backdrop-filter: var(--chrome-glass-filter);
  box-shadow: var(--chrome-glass-dark-shadow);
}

.site-header--article .site-nav a:hover,
.site-header--article .site-nav a[aria-current='page'] { color: white; }

.site-header--article .site-nav__submenu,
.site-header--article .site-nav.is-open { color: var(--chrome-ink); }

.site-header--article .site-nav.is-open a:hover,
.site-header--article .site-nav.is-open a[aria-current='page'] { color: var(--chrome-signal); }

.site-header--article.is-scrolled {
  border-bottom-color: var(--chrome-glass-light-line);
  background: var(--chrome-glass-light);
  color: var(--chrome-ink);
  -webkit-backdrop-filter: var(--chrome-glass-filter);
  backdrop-filter: var(--chrome-glass-filter);
  box-shadow: var(--chrome-glass-light-shadow);
}

.site-header--article.is-scrolled .site-nav a:hover,
.site-header--article.is-scrolled .site-nav a[aria-current='page'] { color: inherit; }

/* Article pages keep the semantic article modifier, but use the same
   clear liquid-glass treatment as every other public page. */
.site-header--overlay.site-header--article {
  border-bottom-color: var(--chrome-glass-dark-line);
  background: var(--chrome-glass-dark);
  color: white;
  -webkit-backdrop-filter: var(--chrome-glass-filter);
  backdrop-filter: var(--chrome-glass-filter);
  box-shadow: var(--chrome-glass-dark-shadow);
}

.site-header--overlay.site-header--article.is-scrolled {
  border-bottom-color: var(--chrome-glass-light-line);
  background: var(--chrome-glass-light);
  color: var(--chrome-ink);
  -webkit-backdrop-filter: var(--chrome-glass-filter);
  backdrop-filter: var(--chrome-glass-filter);
  box-shadow: var(--chrome-glass-light-shadow);
}

/* Chromium can add a narrow edge refraction on top of the cross-browser
   frosted treatment. The runtime only adds .glass-lens after it has built and
   sized the filter, so browsers without SVG backdrop filters keep the stable
   CSS fallback above. */
html.glass-lens .site-header,
html.glass-lens .site-header.is-scrolled {
  -webkit-backdrop-filter: url('#pb-glass-lens') blur(5px) saturate(2);
  backdrop-filter: url('#pb-glass-lens') blur(5px) saturate(2);
}

/* Adaptive ink: the runtime samples what sits behind the clear glass and
   flags the bar when it is dark, flipping the text to white the way iOS
   glass does. Whole-bar flips only — per-letter masking is not possible
   over backdrop-filter. */
.site-header.is-scrolled.site-header--over-dark {
  border-bottom-color: rgb(255 255 255 / 25%);
  color: white;
}

.site-header.is-scrolled.site-header--over-dark .site-nav a:hover,
.site-header.is-scrolled.site-header--over-dark .site-nav a[aria-current='page'] { color: white; }

@media (prefers-contrast: more), (prefers-reduced-transparency: reduce) {
  :root {
    --chrome-glass-dark: rgb(7 26 56 / 78%);
    --chrome-glass-light: rgb(250 248 242 / 92%);
    --chrome-glass-dark-line: rgb(255 255 255 / 42%);
    --chrome-glass-light-line: rgb(7 26 56 / 34%);
    --chrome-glass-filter: blur(18px);
  }

  .site-header::before { display: none; }
}

.site-header__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr);
  align-items: center;
  gap: 2rem;
  width: min(100%, var(--chrome-header-shell));
  min-height: 5.25rem;
  margin: 0 auto;
  padding: 0 var(--chrome-header-pad);
}

.site-header .brand {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 0.7rem;
  width: max-content;
  color: inherit;
  font-family: var(--chrome-sans);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.035em;
  text-decoration: none;
}

.site-header .brand__logo {
  width: clamp(10rem, 15vw, 13.5rem);
  height: auto;
}

.site-header:not(.is-scrolled) .brand__logo {
  filter: brightness(0) invert(1);
}

.site-header.site-header--over-dark .brand__logo {
  filter: brightness(0) invert(1);
}

.site-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.75rem, 1.45vw, 1.5rem);
}

.site-nav a,
.header-actions a {
  color: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-decoration: none;
  text-transform: uppercase;
}

.site-nav a {
  position: relative;
  padding: 0.35rem 0;
}

.site-nav a::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  content: '';
  background: var(--chrome-signal);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.25s ease;
}

.site-nav a:hover,
.site-nav a[aria-current='page'] { color: var(--chrome-ink); }

.site-header--overlay .site-nav a:hover,
.site-header--overlay .site-nav a[aria-current='page'] { color: inherit; }

.site-nav a:hover::after,
.site-nav a[aria-current='page']::after {
  transform: scaleX(1);
  transform-origin: left;
}

.site-nav__group {
  position: relative;
  display: flex;
  align-items: center;
}
.site-nav__parent {
  display: inline-flex;
  align-items: center;
}
.site-nav__parent span { display: inline-block; margin-left: 0.2rem; transition: transform 0.2s ease; }

.site-nav__submenu {
  position: absolute;
  top: calc(100% + 0.65rem);
  left: 50%;
  z-index: 5;
  display: grid;
  min-width: 12.5rem;
  padding: 0.55rem;
  border: 1px solid var(--chrome-line);
  border-radius: 0.65rem;
  background: var(--chrome-paper, #f4efe7);
  color: var(--chrome-ink);
  box-shadow: 0 1rem 2.5rem rgb(17 21 28 / 12%);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -0.35rem);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.site-nav__submenu::before {
  position: absolute;
  right: 0;
  bottom: 100%;
  left: 0;
  height: 0.7rem;
  content: '';
}

.site-nav__submenu a { padding: 0.65rem 0.75rem; border-radius: 0.4rem; white-space: nowrap; }
.site-nav__submenu a::after { display: none; }

.site-nav__submenu a:hover,
.site-nav__submenu a:focus-visible { background: var(--chrome-paper-deep, #e4dfd3); }
.site-nav__submenu a[aria-current='page'] {
  background: transparent;
  box-shadow: inset 0 -2px var(--chrome-signal);
  color: var(--chrome-signal);
}
.site-nav__submenu a[aria-current='page']:hover,
.site-nav__submenu a[aria-current='page']:focus-visible { background: var(--chrome-paper-deep, #e4dfd3); }

/* Overlay and article headers use light text on the bar but keep dropdowns
   light. Their broad hover rules must not turn submenu labels white on that
   light surface. */
.site-header--overlay .site-nav__submenu a:hover,
.site-header--overlay .site-nav__submenu a:focus-visible,
.site-header--article .site-nav__submenu a:hover,
.site-header--article .site-nav__submenu a:focus-visible { color: var(--chrome-ink); }
.site-header--overlay .site-nav__submenu a[aria-current='page'],
.site-header--article .site-nav__submenu a[aria-current='page'] { color: var(--chrome-signal); }

.site-nav__group:hover .site-nav__submenu,
.site-nav__group:focus-within .site-nav__submenu {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

.site-nav__group:hover .site-nav__parent span,
.site-nav__group:focus-within .site-nav__parent span { transform: rotate(180deg); }

.site-nav__theme { display: none; }
.site-nav__theme-label { display: none; }

.header-actions { display: flex; justify-content: flex-end; align-items: center; gap: clamp(0.55rem, 1.2vw, 0.9rem); }
.header-actions .header-cta { padding-bottom: 0.2rem; border-bottom: 1px solid var(--chrome-signal); }
.header-actions .header-cta span { margin-left: 0.35rem; color: var(--chrome-signal); }

.theme-toggle {
  display: inline-grid;
  width: 2.75rem;
  height: 2.75rem;
  flex: 0 0 2.75rem;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
  line-height: 1;
  transform: none;
  transition: color 180ms ease, transform 180ms ease;
}

.theme-toggle__icon {
  display: block;
  width: 1.2rem;
  height: 1.2rem;
  font-size: 0;
}

.theme-toggle__icon::before {
  display: block;
  width: 100%;
  height: 100%;
  background: currentColor;
  content: '';
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M20.2 15.3A8.5 8.5 0 0 1 8.7 3.8a8.5 8.5 0 1 0 11.5 11.5Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

html[data-site-theme='dark'] .theme-toggle__icon::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 7a5 5 0 1 0 0 10 5 5 0 0 0 0-10Zm-1-5h2v3h-2V2Zm0 17h2v3h-2v-3ZM2 11h3v2H2v-2Zm17 0h3v2h-3v-2ZM4.2 5.6l1.4-1.4 2.1 2.1-1.4 1.4-2.1-2.1Zm12.1 12.1 1.4-1.4 2.1 2.1-1.4 1.4-2.1-2.1Zm0-11.4 2.1-2.1 1.4 1.4-2.1 2.1-1.4-1.4ZM4.2 18.4l2.1-2.1 1.4 1.4-2.1 2.1-1.4-1.4Z'/%3E%3C/svg%3E");
}

.theme-toggle:hover {
  color: var(--chrome-signal);
  transform: translateY(-1px);
}

.theme-toggle:hover { background: rgb(255 255 255 / 10%); }
.theme-toggle:active { transform: none; }

.nav-toggle { display: none; }
.nav-toggle__lines,
.nav-toggle__lines::before {
  display: block;
  width: 1.5rem;
  height: 2px;
  content: '';
  background: currentColor;
  transition: transform 180ms ease;
}

.nav-toggle__lines::before { transform: translateY(-0.45rem); }
.nav-toggle[aria-expanded='true'] .nav-toggle__lines { transform: rotate(45deg); }
.nav-toggle[aria-expanded='true'] .nav-toggle__lines::before { transform: rotate(-90deg); }

@media (max-width: 70rem) {
  .site-header__inner { grid-template-columns: 1fr auto auto; }

  .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: end;
    width: 2.75rem;
    min-height: 2.75rem;
    padding: 0.6rem 0;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .nav-toggle__label {
    position: absolute;
    overflow: hidden;
    clip-path: inset(50%);
    width: 1px;
    height: 1px;
    white-space: nowrap;
  }

  .site-nav { display: none; }
  .header-actions { display: none; }

  .site-nav__theme {
    display: block;
    padding-top: 0.5rem;
    border-top: 1px solid var(--chrome-line);
  }

  .site-nav.is-open .theme-toggle {
    display: inline-flex;
    width: auto;
    height: 2.75rem;
    align-items: center;
    justify-content: flex-start;
    gap: 0.65rem;
    transform: none;
  }

  .site-nav__theme-label {
    display: inline;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .site-nav.is-open .theme-toggle:hover,
  .site-nav.is-open .theme-toggle:active { transform: none; }

  .site-nav.is-open {
    position: fixed;
    top: var(--chrome-header-height);
    right: 0;
    left: 0;
    display: grid;
    gap: 0;
    width: 100%;
    max-height: calc(100dvh - var(--chrome-header-height));
    padding: 1rem var(--chrome-header-pad) 2rem;
    overflow-y: auto;
    border-top: 1px solid var(--chrome-line);
    border-bottom: 1px solid var(--chrome-line);
    background: var(--chrome-paper, #f4efe7);
    color: var(--chrome-ink);
    box-shadow: 0 1.4rem 4rem rgb(17 21 28 / 12%);
    overscroll-behavior: contain;
  }

  .site-nav.is-open a {
    padding: 1rem 0;
    border-bottom: 1px solid var(--chrome-line);
    font-size: 1rem;
  }

  .site-nav.is-open a:hover,
  .site-nav.is-open a[aria-current='page'] { color: var(--chrome-signal); }
  .site-nav.is-open a::after { display: none; }

  .site-nav.is-open .site-nav__group {
    display: grid;
    gap: 0;
    border-bottom: 1px solid var(--chrome-line);
  }

  .site-nav.is-open .site-nav__submenu {
    position: static;
    display: grid;
    min-width: 0;
    margin: 0;
    padding: 0 0 0.5rem 1rem;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }

  .site-nav.is-open .site-nav__submenu a {
    padding: 0.7rem 0;
    color: var(--chrome-ink-soft, #233550);
    font-size: 0.86rem;
  }

  .site-nav.is-open .site-nav__parent span { display: none; }
}

@media (max-width: 48rem) {
  :root { --chrome-header-height: 4.5rem; }
  .site-header__inner { min-height: 4.5rem; }
}

@media (max-width: 31rem) {
  .site-header__inner { column-gap: 0.7rem; }
  .site-header .brand__logo { width: clamp(8rem, 42vw, 10rem); }
  .header-actions { gap: 0.35rem; }
}

.article-body :is(h2, h3, h4), .standard-page__body :is(h2, h3, h4), .story-card :is(h2, h3) { line-height: var(--site-heading-line-height, 1.08); }
.article-body a, .standard-page__body a, .story-card a { text-decoration-line: var(--site-link-decoration, underline); }
.button, .header-cta, .newsletter__field { border-radius: var(--site-button-radius, 0); }
.article-body img, .article-feature img, .story-card__image, .page-template img { border-radius: var(--site-media-radius, 0); }
.article-body p, .page-body p { margin-bottom: var(--site-paragraph-spacing, 1.55rem); }
.article-body h2, .page-body h2 { font-size: var(--site-heading-font-size, clamp(1.8rem, 4vw, 2.5rem)); }
.article-body blockquote, .page-body blockquote { border-block-color: var(--site-quote-accent, var(--line-strong)); }
.article-page .article-body blockquote { border-top-color: var(--site-quote-accent, var(--blueprint)); }
.article-button [data-article-button-link], .article-button-row [data-article-button-link] { background: var(--site-button-fill, var(--signal)); color: var(--site-button-ink, var(--signal-ink)); }
.story-card__image, .prompt-card, .tag-card, .model-card, .closed-model-card { box-shadow: var(--site-card-shadow, none); border-color: var(--site-card-border, var(--line)); }

.site-header--variant-solid:not(.site-header--overlay) { background: var(--chrome-paper); color: var(--chrome-ink); }
.site-header--variant-minimal:not(.site-header--overlay) { border-bottom-color: transparent; box-shadow: none; }
.site-header--variant-minimal .header-cta { display: none; }

.site-announcement {
  width: 100%;
  border-bottom: 1px solid rgb(7 26 56 / 18%);
  background: var(--paper, #f4efe7);
  color: var(--chrome-ink);
  font-family: var(--chrome-sans);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.site-announcement__inner {
  width: min(100%, var(--chrome-shell));
  margin-inline: auto;
  padding: 0.75rem var(--chrome-pad);
  text-align: center;
}

.site-announcement--variant-signal { border-color: transparent; background: var(--chrome-signal); color: var(--chrome-signal-ink); }
.site-announcement--variant-blueprint { border-color: transparent; background: var(--chrome-blue); color: var(--chrome-blue-ink); }

.visually-hidden {
  position: absolute;
  overflow: hidden;
  clip-path: inset(50%);
  width: 1px;
  height: 1px;
  white-space: nowrap;
}

.newsletter {
  display: block;
  width: 100%;
  max-width: none;
  margin: clamp(4rem, 9vw, 8rem) 0 0;
  padding: 0;
  border: 0;
  background: var(--chrome-signal);
  color: var(--chrome-signal-ink);
}

.newsletter__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(18rem, 1.1fr);
  gap: clamp(2rem, 7vw, 7rem);
  align-items: end;
  width: min(100%, var(--chrome-shell));
  margin-inline: auto;
  padding: clamp(4rem, 8vw, 7rem) var(--chrome-pad);
}

.newsletter .eyebrow {
  display: block;
  color: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.newsletter .eyebrow::before { background: currentColor; }

.newsletter__intro h2 {
  max-width: 11ch;
  margin: 1.75rem 0 0;
  font-family: var(--chrome-display);
  font-size: clamp(3rem, 6vw, 6rem);
  font-weight: 400;
  line-height: 0.88;
  letter-spacing: -0.07em;
}

.newsletter__form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  align-self: end;
  border-bottom: 2px solid currentColor;
}

.newsletter__field {
  min-width: 0;
  min-height: 4rem;
  padding: 0.75rem 0;
  border: 0;
  border-radius: 0;
  outline: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: clamp(1.1rem, 1.8vw, 1.5rem);
}

.newsletter__field::placeholder { color: color-mix(in srgb, currentColor 56%, transparent); }
.newsletter__field:focus { box-shadow: inset 0 -3px var(--chrome-blue); }

.newsletter .button {
  justify-self: end;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.newsletter .button:hover { background: var(--editorial-night); color: white; }
.newsletter .form-note { grid-column: 1 / -1; min-height: 1.5rem; margin: 1rem 0 0; font-size: 0.82rem; }
.newsletter .form-note:empty { display: none; }
.newsletter + .site-footer,
main:has(> .newsletter:last-child) + .site-footer,
.article-page .site-footer { margin-top: 0; }

.site-social-links {
  width: 100%;
  border-block: 1px solid var(--chrome-line);
  background: var(--chrome-paper, var(--paper));
  color: var(--chrome-ink);
}

.site-social-links__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem 2rem;
  width: min(100%, var(--chrome-shell));
  margin-inline: auto;
  padding: 1.25rem var(--chrome-pad);
}

.site-social-links h2 {
  margin: 0;
  color: inherit;
  font: 700 0.75rem/1.2 var(--chrome-sans);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.site-social-links nav { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
.site-social-links a { color: inherit; font: 600 0.9rem/1.4 var(--chrome-sans); text-decoration: none; }
.site-social-links a:hover { color: var(--chrome-signal); }
.site-social-links--variant-stacked .site-social-links__inner { align-items: start; }
.site-social-links--variant-stacked nav { display: grid; gap: 0.35rem; }
.site-social-links--variant-minimal { border-block: 0; background: transparent; }
.site-social-links--variant-minimal h2 { position: absolute; overflow: hidden; clip-path: inset(50%); width: 1px; height: 1px; }
.site-social-links--variant-minimal .site-social-links__inner { justify-content: flex-end; padding-block: 0.75rem; }

.newsletter--variant-compact .newsletter__inner {
  padding-block: clamp(2.5rem, 5vw, 4rem);
}

.newsletter--variant-compact .newsletter__intro h2 {
  font-size: clamp(2.5rem, 4.5vw, 4.5rem);
}

.newsletter--variant-minimal {
  border-block: 1px solid var(--chrome-line);
  background: var(--chrome-paper);
  color: var(--chrome-ink);
}

.newsletter--variant-minimal .newsletter__inner {
  padding-block: clamp(3rem, 6vw, 5rem);
}

.site-footer {
  width: 100%;
  max-width: none;
  margin-top: clamp(4rem, 8vw, 7rem);
  padding: 0;
  background: var(--chrome-ink);
  color: white;
  font-family: var(--chrome-sans);
}

.site-footer__inner {
  display: grid;
  grid-template-columns: 1.7fr repeat(3, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  width: min(100%, var(--chrome-shell));
  margin-inline: auto;
  padding: clamp(3.5rem, 7vw, 6rem) var(--chrome-pad);
}

.site-footer .brand {
  display: inline-flex;
  align-items: center;
  color: white;
  text-decoration: none;
}

.site-footer .brand__logo {
  width: min(100%, 13.5rem);
  height: auto;
  filter: brightness(0) invert(1);
}

.site-footer__intro p { max-width: 34ch; margin: 1rem 0 0; color: rgb(255 255 255 / 66%); }
.site-footer h2 { margin: 0 0 1rem; color: white; font: 700 0.75rem/1.2 var(--chrome-sans); letter-spacing: 0.15em; text-transform: uppercase; }

.site-footer nav a {
  display: block;
  width: max-content;
  max-width: 100%;
  margin: 0.48rem 0;
  color: #d8dce4;
  font-size: 0.94rem;
  font-weight: 400;
  line-height: 1.5;
  text-decoration: none;
  text-transform: none;
}

.site-footer nav a:hover { color: #ff755a; }

.site-footer__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  width: min(100%, var(--chrome-shell));
  margin-inline: auto;
  padding: 1.4rem var(--chrome-pad);
  border-top: 1px solid rgb(255 255 255 / 18%);
  color: rgb(255 255 255 / 52%);
  font-size: 0.82rem;
}

.site-footer--variant-compact .site-footer__inner { padding-block: 2.25rem; }
.site-footer--variant-compact .site-footer__intro p { max-width: 44ch; }
.site-footer--variant-minimal .site-footer__inner { grid-template-columns: 1fr auto; padding-block: 2rem; }
.site-footer--variant-minimal .site-footer__inner nav:not(:last-child) { display: none; }
.site-footer--variant-minimal .site-footer__inner nav:last-child { display: flex; flex-wrap: wrap; gap: 1rem; }
.site-footer--variant-minimal .site-footer__inner nav:last-child h2 { position: absolute; overflow: hidden; clip-path: inset(50%); width: 1px; height: 1px; }
.site-footer--variant-minimal .site-footer__inner nav:last-child a { margin: 0; }

@media (max-width: 54rem) {
  .newsletter__inner { grid-template-columns: 1fr; }
  .site-footer__inner {
    grid-template-columns: 1.55fr repeat(3, minmax(0, 1fr));
    gap: clamp(1.25rem, 3vw, 1.75rem);
    padding-block: 2rem;
  }
  .site-footer__intro { grid-column: auto; }
  .site-footer__intro p { margin-top: 0.65rem; }
  .site-footer h2 { margin-bottom: 0.7rem; }
  .site-footer nav a { margin-block: 0.28rem; line-height: 1.35; }
}

@media (max-width: 42rem) {
  .site-footer__inner { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .site-footer__intro { grid-column: 1 / -1; }
}

@media (max-width: 31rem) {
  .site-footer__inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem 1rem;
    padding-block: 2rem;
  }
  .site-footer__intro,
  .site-footer__inner nav:last-child { grid-column: 1 / -1; }
  .site-footer__inner nav:last-child {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, max-content));
    column-gap: 1.5rem;
  }
  .site-footer__inner nav:last-child h2 { grid-column: 1 / -1; }
  .site-footer__base { padding-block: 1.15rem; }
}

@media (max-width: 31rem) {
  .newsletter__form { grid-template-columns: 1fr; }
  .newsletter .button { justify-self: start; padding: 1rem 0; }
}

html[data-site-theme='dark'] .site-header--overlay.is-scrolled,
html[data-site-theme='dark'] .site-header:not(.site-header--overlay).is-scrolled,
html[data-site-theme='dark'] .site-header--article.is-scrolled {
  border-bottom-color: var(--chrome-glass-light-line);
  background: var(--chrome-glass-light);
  color: var(--chrome-ink);
  box-shadow: var(--chrome-glass-light-shadow);
}

html[data-site-theme='dark'] .site-header--overlay.is-scrolled .site-nav a:hover,
html[data-site-theme='dark'] .site-header--overlay.is-scrolled .site-nav a[aria-current='page'],
html[data-site-theme='dark'] .site-header--article.is-scrolled .site-nav a:hover,
html[data-site-theme='dark'] .site-header--article.is-scrolled .site-nav a[aria-current='page'] { color: var(--chrome-ink); }

html[data-site-theme='dark'] .site-nav.is-open {
  background: var(--chrome-paper);
  color: var(--chrome-ink);
  box-shadow: 0 1.4rem 4rem rgb(0 0 0 / 32%);
}

html[data-site-theme='dark'] .site-announcement { border-bottom-color: var(--chrome-line); }

html[data-site-theme='dark'] .site-footer {
  background: #07101d;
  color: #f2f5fb;
}

html[data-site-theme='dark'] .site-footer nav a { color: #d8e2f0; }
html[data-site-theme='dark'] .site-footer nav a:hover { color: var(--chrome-signal); }

html[data-site-theme='dark'] .article-callout[data-tone="tip"] {
  border-left-color: #55d5a5;
  background: #102b28;
}

html[data-site-theme='dark'] .article-callout[data-tone="tip"]::before { color: #6ee6b9; }
html[data-site-theme='dark'] .article-callout[data-tone="warning"] { border-left-color: #f2bf66; background: #332a1d; }
html[data-site-theme='dark'] .article-callout[data-tone="warning"]::before { color: #ffd083; }
html[data-site-theme='dark'] .article-callout[data-tone="takeaway"] { border-left-color: var(--ink); background: #182b49; }

html[data-site-theme='dark'] .desk-item--x,
html[data-site-theme='dark'] .content-desk .desk-item--x { background: #101a29; }

html[data-site-theme='dark'] .x-post-embed {
  border-color: #344255;
  background: #111b2b;
  color: #edf2fa;
}

html[data-site-theme='dark'] .x-post-embed__identity span,
html[data-site-theme='dark'] .x-post-embed__date { color: #a6b4c7; }
html[data-site-theme='dark'] .x-post-embed__text { color: inherit; }
html[data-site-theme='dark'] .x-post-embed__footer { border-top-color: #2b384b; }