:root {
  --paper: #f2eee6;
  --ink: #17201b;
  --muted: #687069;
  --line: #c9c7bc;
  --signal: #c8ff45;
  --night: #121b2d;
  --chalk: #f8f5ed;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
}

a { color: inherit; text-decoration: none; }

button { color: inherit; font: inherit; }

img { display: block; width: 100%; }

main { min-height: 100vh; }

.site-header {
  min-height: 118px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 32px;
  padding: 22px 4vw;
  border-bottom: 1px solid var(--ink);
}

.brand { display: flex; align-items: center; gap: 13px; width: max-content; }

.brand-orbit {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid var(--ink);
  border-radius: 50%;
  font: 700 11px/1 "Courier New", monospace;
  letter-spacing: -0.05em;
  transform: rotate(-8deg);
}

.brand strong {
  display: block;
  font: 600 21px/0.9 Georgia, "Times New Roman", serif;
  letter-spacing: -0.045em;
}

.masthead {
  margin: 0;
  font: 11px/1.3 "Courier New", monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.menu-button {
  justify-self: end;
  width: 47px;
  height: 47px;
  border: 1px solid var(--ink);
  border-radius: 50%;
  background: transparent;
  display: grid;
  align-content: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
}

.menu-button span { width: 17px; height: 1px; background: currentColor; }

.menu-shell { position: relative; justify-self: end; z-index: 20; }
.menu-shell summary { list-style: none; }
.menu-shell summary::-webkit-details-marker { display: none; }
.menu-shell[open] .menu-button span:first-child { transform: translateY(3.5px) rotate(45deg); }
.menu-shell[open] .menu-button span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
.menu-button span { transition: transform 180ms ease; }

.menu-panel {
  position: absolute;
  width: min(430px, 88vw);
  right: 0;
  top: 60px;
  padding: 28px;
  background: var(--night);
  color: var(--chalk);
  box-shadow: 0 24px 80px rgba(18,27,45,.22);
}

.menu-panel > p {
  margin: 0 0 20px;
  color: var(--signal);
  font: 10px/1 "Courier New", monospace;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.menu-panel > a:not(.menu-about) {
  display: grid;
  grid-template-columns: 38px 1fr;
  padding: 13px 0;
  border-top: 1px solid rgba(248,245,237,.2);
  font: 500 24px/1.05 Georgia, "Times New Roman", serif;
}

.menu-panel a span {
  color: #9ca399;
  font: 9px/1.5 "Courier New", monospace;
}

.menu-about {
  display: inline-block;
  margin-top: 24px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--signal);
  font: 700 9px/1 "Courier New", monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.site-header--compact {
  min-height: 88px;
  border-bottom-color: var(--line);
}

.topic-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 31px;
  padding: 13px 4vw;
  overflow-x: auto;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
  scrollbar-width: none;
}

.topic-nav a {
  color: #3f4841;
  font: 600 10px/1 "Courier New", monospace;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.hero {
  padding: 30px 4vw 46px;
}

.hero-art {
  position: relative;
  width: 100%;
  aspect-ratio: 1731 / 909;
  margin: 0;
  overflow: hidden;
  background: var(--night);
  border: 1px solid var(--ink);
  box-shadow: 0 24px 60px rgba(18, 27, 45, .12);
}

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

.hero-copy {
  display: grid;
  grid-template-columns: minmax(0, 1.22fr) minmax(280px, .78fr);
  align-items: end;
  gap: 8vw;
  padding: 46px 0 4px;
}

.hero-heading,
.hero-intro {
  min-width: 0;
}

.hero-heading .eyebrow {
  margin-bottom: 24px;
}

.eyebrow {
  margin: 0 0 28px;
  color: var(--muted);
  font: 10px/1 "Courier New", monospace;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.eyebrow span { color: var(--ink); font-weight: 700; }

h1 {
  max-width: 680px;
  margin: 0;
  font: 500 clamp(68px, 7.15vw, 122px)/0.79 Georgia, "Times New Roman", serif;
  letter-spacing: -0.075em;
}

.dek {
  max-width: 520px;
  margin: 36px 0 35px;
  color: #404943;
  font: 18px/1.55 Georgia, "Times New Roman", serif;
}

.read-link {
  display: inline-flex;
  align-items: center;
  gap: 22px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--ink);
  font: 700 11px/1 "Courier New", monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.read-link span { font-size: 16px; transition: transform 180ms ease; }
.read-link:hover span { transform: translate(3px, -3px); }

.edition-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
  padding: 17px 4vw;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  overflow-x: auto;
  white-space: nowrap;
  font: 10px/1 "Courier New", monospace;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.edition-strip p { margin: 0; padding: 7px 10px; background: var(--ink); color: var(--paper); }
.edition-strip span::before { content: "✦"; margin-right: 18px; color: #8c391d; }

.section-wrap { padding: 120px 4vw; }

.section-heading {
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  align-items: end;
  gap: 8vw;
  margin-bottom: 70px;
}

.section-heading h2,
.rabbit-intro h2,
.about-section h2 {
  margin: 0;
  font: 500 clamp(55px, 6vw, 98px)/.88 Georgia, "Times New Roman", serif;
  letter-spacing: -.065em;
}

.section-heading h2 em,
.opinion-title h2 em,
.opinion-page-hero h1 em { font-weight: 400; color: #8c391d; }

.section-intro {
  max-width: 430px;
  margin: 0 0 7px;
  color: #505952;
  font: 17px/1.55 Georgia, "Times New Roman", serif;
}

.story-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 62px 28px;
}

.story-card { min-width: 0; }
.story-card:nth-child(1) { grid-column: 1 / 8; grid-row: 1 / 3; }
.story-card:nth-child(2) { grid-column: 8 / 13; }
.story-card:nth-child(3) { grid-column: 8 / 13; }
.story-card:nth-child(4) { grid-column: 1 / 9; }
.story-card:nth-child(5) { grid-column: 9 / 13; }

.story-image {
  position: relative;
  display: block;
  aspect-ratio: 1.48 / 1;
  overflow: hidden;
  background: #d4d0c7;
}

.story-card--lead .story-image { aspect-ratio: .96 / 1; }
.story-card--wide .story-image { aspect-ratio: 1.75 / 1; }
.story-card.story-card--uncropped-image .story-image { aspect-ratio: 16 / 9; background: #151c18; }

.story-image img {
  height: 100%;
  object-fit: cover;
  filter: saturate(.82) contrast(.98);
  transition: transform 450ms cubic-bezier(.2,.7,.2,1), filter 250ms ease;
}

.story-image:hover img { transform: scale(1.025); filter: saturate(1); }
.story-card--uncropped-image .story-image img { width: 100%; height: 100%; object-fit: contain; }

.story-index {
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 10px 12px;
  background: var(--paper);
  color: var(--ink);
  font: 9px/1 "Courier New", monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.story-copy { padding-top: 20px; }

.card-kicker {
  margin: 0 0 14px !important;
  color: #8c391d !important;
  font: 700 9px/1 "Courier New", monospace !important;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.story-copy h3 {
  margin: 0 0 13px;
  font: 500 clamp(29px, 3vw, 48px)/.98 Georgia, "Times New Roman", serif;
  letter-spacing: -.045em;
}

.story-card:not(.story-card--lead) .story-copy h3 { font-size: clamp(26px, 2.35vw, 38px); }
.story-copy h3 a:hover { color: #8c391d; }

.story-copy > p:not(.card-kicker) {
  max-width: 620px;
  margin: 0 0 18px;
  color: #505952;
  font: 15px/1.5 Georgia, "Times New Roman", serif;
}

.text-link {
  display: inline-flex;
  gap: 13px;
  align-items: center;
  padding-bottom: 5px;
  border-bottom: 1px solid currentColor;
  font: 700 9px/1 "Courier New", monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.opinion-section {
  display: grid;
  grid-template-columns: .82fr 1.18fr;
  min-height: 790px;
  background: #8f371f;
  color: var(--chalk);
}

.opinion-title {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 90px 6vw 90px 4vw;
  overflow: hidden;
  border-right: 1px solid rgba(248,245,237,.25);
}

.opinion-title::after {
  content: "";
  position: absolute;
  width: 520px;
  height: 520px;
  left: -230px;
  bottom: -315px;
  border: 1px solid rgba(248,245,237,.25);
  border-radius: 50%;
}

.opinion-title > p:first-child,
.opinion-page-hero > p {
  margin: 0 0 35px;
  font: 9px/1 "Courier New", monospace;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.unreasonable-mark {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  margin-bottom: 35px;
  border: 1px solid currentColor;
  border-radius: 50%;
  font: 700 11px/1 "Courier New", monospace;
  transform: rotate(8deg);
}

.opinion-title h2 {
  margin: 0;
  font: 500 clamp(62px, 6.6vw, 108px)/.79 Georgia, "Times New Roman", serif;
  letter-spacing: -.07em;
}

.opinion-title h2 em { color: var(--signal); }

.opinion-dek {
  max-width: 450px;
  margin: 36px 0 32px !important;
  font: 19px/1.45 Georgia, "Times New Roman", serif !important;
}

.button-light {
  display: inline-flex;
  align-items: center;
  gap: 22px;
  padding: 15px 18px;
  border: 1px solid currentColor;
  font: 700 9px/1 "Courier New", monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.button-light:hover { background: var(--chalk); color: #8f371f; }

.opinion-list { display: flex; flex-direction: column; justify-content: center; padding: 60px 4vw; }

.opinion-list article {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 56px;
  padding: 42px 15px 42px 0;
  border-top: 1px solid rgba(248,245,237,.3);
}

.opinion-list article:last-child { border-bottom: 1px solid rgba(248,245,237,.3); }

.opinion-list article > p {
  grid-column: 1 / 3;
  margin: 0 0 17px;
  color: #e0a996;
  font: 9px/1 "Courier New", monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.opinion-list article > p span { display: inline-block; width: 42px; color: var(--signal); }

.opinion-list h3 {
  max-width: 680px;
  margin: 0;
  font: 500 clamp(35px, 4vw, 63px)/.95 Georgia, "Times New Roman", serif;
  letter-spacing: -.045em;
}

.opinion-list h3 a:hover { color: var(--signal); }
.opinion-list article > a { align-self: end; justify-self: end; font-size: 25px; }

.rabbit-section { display: grid; grid-template-columns: .72fr 1.28fr; gap: 8vw; }
.rabbit-intro { position: sticky; top: 35px; align-self: start; }
.rabbit-intro h2 { font-size: clamp(54px, 5.6vw, 88px); }

.rabbit-list article {
  position: relative;
  display: grid;
  grid-template-columns: 48px minmax(150px, .55fr) 1fr 32px;
  gap: 24px;
  align-items: start;
  padding: 33px 0 30px;
  border-top: 1px solid var(--ink);
  scroll-margin-top: 35px;
}

.rabbit-list article:last-child { border-bottom: 1px solid var(--ink); }
.rabbit-list article > span { color: #8c391d; font: 700 9px/1.6 "Courier New", monospace; }
.rabbit-list h3 { margin: 0; font: 500 29px/1 Georgia, "Times New Roman", serif; letter-spacing: -.035em; }
.rabbit-list p { margin: 0 0 19px; color: #515a53; font: 15px/1.5 Georgia, "Times New Roman", serif; }
.rabbit-list small { grid-column: 3; color: #7b817c; font: 9px/1.4 "Courier New", monospace; letter-spacing: .06em; text-transform: uppercase; }
.rabbit-list a { grid-column: 4; grid-row: 1 / 3; align-self: center; font-size: 21px; }

.media-section { display: grid; grid-template-columns: 1fr 1fr; min-height: 710px; background: var(--night); color: var(--chalk); }
.media-visual { display: grid; place-items: center; padding: 65px 5vw; background: var(--signal); color: var(--night); }

.media-frame {
  position: relative;
  width: min(560px, 100%);
  aspect-ratio: 1 / .82;
  padding: 24px;
  border: 1px solid var(--night);
  overflow: hidden;
}

.media-frame::after {
  content: "";
  position: absolute;
  width: 360px;
  height: 360px;
  right: -130px;
  top: -140px;
  border: 1px solid var(--night);
  border-radius: 50%;
}

.media-frame > p, .media-frame > small { margin: 0; font: 700 9px/1 "Courier New", monospace; letter-spacing: .12em; text-transform: uppercase; }
.media-frame > small { position: absolute; right: 24px; bottom: 24px; }
.play-disc { position: absolute; left: 50%; top: 48%; transform: translate(-50%,-50%); width: 145px; height: 145px; display: grid; place-items: center; border: 1px solid var(--night); border-radius: 50%; }
.play-disc span { margin-left: 6px; font-size: 22px; }

.waveform { position: absolute; inset: auto 24px 70px; height: 65px; display: flex; align-items: end; gap: 6px; }
.waveform span { flex: 1; background: var(--night); min-height: 5px; }

.media-copy { display: flex; flex-direction: column; justify-content: center; padding: 80px 5vw; }
.media-copy .eyebrow span { color: var(--signal); }
.media-copy .eyebrow { color: #a6ada7; }
.media-copy h2 { margin: 0; font: 500 clamp(53px, 5.6vw, 91px)/.87 Georgia, "Times New Roman", serif; letter-spacing: -.06em; }
.media-copy > p:not(.eyebrow) { max-width: 620px; margin: 32px 0; color: #c5cbc6; font: 17px/1.55 Georgia, "Times New Roman", serif; }
.media-actions { display: flex; gap: 25px; margin-bottom: 45px; }
.media-actions a { padding-bottom: 6px; border-bottom: 1px solid var(--signal); font: 700 9px/1 "Courier New", monospace; letter-spacing: .1em; text-transform: uppercase; }
.episode-list { margin: 0; padding: 0; list-style: none; }
.episode-list li { display: grid; grid-template-columns: 35px 1fr auto; align-items: center; gap: 18px; padding: 18px 0; border-top: 1px solid rgba(248,245,237,.2); }
.episode-list span, .episode-list small { color: #a6ada7; font: 9px/1 "Courier New", monospace; }
.episode-list p { margin: 0; font: 15px/1.3 Georgia, "Times New Roman", serif; }

.field-note-section { display: grid; grid-template-columns: 1.3fr .7fr; min-height: 670px; }
.field-image { position: relative; min-height: 670px; overflow: hidden; }
.field-image img { height: 100%; object-fit: cover; filter: saturate(.72); }
.field-image > span { position: absolute; left: 24px; bottom: 24px; padding: 10px 12px; background: var(--paper); font: 9px/1 "Courier New", monospace; letter-spacing: .1em; }
.field-copy { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 80px 5vw; background: #d9d3c8; }
.field-copy blockquote { margin: 0 0 32px; font: 500 clamp(38px, 4.2vw, 65px)/.95 Georgia, "Times New Roman", serif; letter-spacing: -.05em; }
.field-copy > p:not(.eyebrow) { max-width: 420px; margin: 0 0 28px; color: #525b54; font: 16px/1.55 Georgia, "Times New Roman", serif; }

.about-section { display: grid; grid-template-columns: minmax(320px, .82fr) minmax(0, 1.18fr); gap: 8vw; border-bottom: 1px solid var(--ink); }
.about-identity { display: flex; flex-direction: column; justify-content: space-between; gap: 55px; }
.about-portrait { position: relative; min-height: 390px; margin: 0; overflow: hidden; background: linear-gradient(145deg, #d9d3c8 0 66%, var(--signal) 66%); border: 1px solid var(--ink); }
.about-portrait::before { content: ""; position: absolute; width: 330px; height: 330px; left: -120px; top: -130px; border: 1px solid rgba(23,32,27,.32); border-radius: 50%; }
.about-portrait img { position: absolute; z-index: 1; width: 100%; height: calc(100% - 64px); left: 0; bottom: 64px; object-fit: contain; object-position: center bottom; }
.about-portrait figcaption { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 25px; padding: 15px 18px; background: var(--night); color: var(--chalk); }
.about-portrait strong { font: 500 19px/1 Georgia, "Times New Roman", serif; }
.about-portrait span { color: var(--signal); font: 700 8px/1.3 "Courier New", monospace; letter-spacing: .08em; text-align: right; text-transform: uppercase; }
.about-copy { align-self: end; }
.about-lead { margin: 0 0 42px; font: 500 clamp(27px, 2.8vw, 42px)/1.1 Georgia, "Times New Roman", serif; letter-spacing: -.035em; }
.about-details { display: grid; gap: 24px; padding-top: 28px; border-top: 1px solid var(--line); }
.about-details p { max-width: 760px; margin: 0; color: #505952; font: 16px/1.68 Georgia, "Times New Roman", serif; }
.about-link { display: inline-flex; align-items: center; gap: 20px; margin-top: 36px; padding-bottom: 8px; border-bottom: 1px solid var(--ink); font: 700 9px/1 "Courier New", monospace; letter-spacing: .08em; text-transform: uppercase; }
.about-link span { font-size: 15px; transition: transform 180ms ease; }
.about-link:hover span { transform: translate(3px, -3px); }

.contact-section { display: grid; grid-template-columns: .82fr 1.18fr; gap: 8vw; align-items: end; background: var(--night); color: var(--chalk); }
.contact-section .eyebrow { color: #a6ada7; }
.contact-section .eyebrow span { color: var(--signal); }
.contact-section h2 { margin: 0; font: 500 clamp(57px, 7vw, 112px)/.84 Georgia, "Times New Roman", serif; letter-spacing: -.065em; }
.contact-copy > p { max-width: 680px; margin: 0 0 46px; color: #c5cbc6; font: 19px/1.55 Georgia, "Times New Roman", serif; }
.contact-copy > a { display: grid; grid-template-columns: 1fr auto; gap: 13px 25px; align-items: end; padding: 24px 0; border-top: 1px solid rgba(248,245,237,.28); border-bottom: 1px solid rgba(248,245,237,.28); }
.contact-copy > a span { grid-column: 1 / 3; color: var(--signal); font: 700 9px/1 "Courier New", monospace; letter-spacing: .1em; text-transform: uppercase; }
.contact-copy > a strong { min-width: 0; font: 500 clamp(21px, 2.6vw, 39px)/1.08 Georgia, "Times New Roman", serif; letter-spacing: -.025em; overflow-wrap: anywhere; }
.contact-copy > a b { color: var(--signal); font: 400 25px/1 Georgia, "Times New Roman", serif; transition: transform 180ms ease; }
.contact-copy > a:hover b { transform: translate(3px, -3px); }

.newsletter-section { position: relative; display: grid; grid-template-columns: .95fr 1.05fr; gap: 7vw; align-items: end; padding: 105px 8vw; overflow: hidden; background: var(--signal); }
.newsletter-section > div:not(.newsletter-orbit), .newsletter-form { position: relative; z-index: 2; }
.newsletter-section > div > p { margin: 0 0 26px; font: 700 9px/1 "Courier New", monospace; letter-spacing: .1em; text-transform: uppercase; }
.newsletter-section h2 { margin: 0; font: 500 clamp(57px, 6vw, 95px)/.86 Georgia, "Times New Roman", serif; letter-spacing: -.065em; }
.newsletter-orbit { position: absolute; width: 470px; height: 470px; right: -170px; top: -235px; display: grid; place-items: center; border: 1px solid rgba(18,27,45,.45); border-radius: 50%; }
.newsletter-orbit span { position: absolute; left: 88px; bottom: 92px; font: 700 11px/1 "Courier New", monospace; }
.newsletter-form > label { display: block; margin-bottom: 15px; font: 700 9px/1 "Courier New", monospace; letter-spacing: .1em; text-transform: uppercase; }
.newsletter-form > div { display: grid; grid-template-columns: 1fr auto; border-bottom: 1px solid var(--night); }
.newsletter-form input { min-width: 0; padding: 17px 0; border: 0; outline: 0; background: transparent; color: var(--night); font: 22px/1 Georgia, "Times New Roman", serif; }
.newsletter-form input::placeholder { color: rgba(18,27,45,.55); }
.newsletter-form button { border: 0; background: transparent; cursor: pointer; font: 700 9px/1 "Courier New", monospace; letter-spacing: .08em; text-transform: uppercase; }
.newsletter-form small { display: block; margin-top: 14px; font: 9px/1.4 "Courier New", monospace; }

.site-footer { display: grid; grid-template-columns: 1.5fr .75fr .75fr; gap: 6vw; padding: 90px 4vw 30px; background: var(--night); color: var(--chalk); }
.footer-brand > p, .footer-links > p { margin: 0 0 25px; color: var(--signal); font: 700 9px/1 "Courier New", monospace; letter-spacing: .12em; text-transform: uppercase; }
.footer-brand h2 { margin: 0; font: 500 clamp(45px, 5vw, 78px)/.9 Georgia, "Times New Roman", serif; letter-spacing: -.055em; }
.footer-links { display: flex; flex-direction: column; align-items: flex-start; }
.footer-links a { margin-bottom: 13px; color: #c9cec9; font: 14px/1.2 Georgia, "Times New Roman", serif; }
.footer-links a:hover { color: var(--signal); }
.footer-bottom { grid-column: 1 / 4; display: flex; justify-content: space-between; gap: 30px; margin-top: 75px; padding-top: 22px; border-top: 1px solid rgba(248,245,237,.2); color: #969d97; font: 9px/1.4 "Courier New", monospace; letter-spacing: .06em; text-transform: uppercase; }

/* Article pages */
.article-hero { display: grid; grid-template-columns: .92fr 1.08fr; align-items: center; min-height: 0; border-bottom: 1px solid var(--ink); }
.article-heading { display: flex; flex-direction: column; justify-content: center; padding: 85px 5vw 85px 4vw; }
.article-heading h1 { max-width: 900px; font-size: clamp(63px, 7vw, 116px); }
.article-standfirst { max-width: 650px; margin: 38px 0; color: #49524b; font: 20px/1.5 Georgia, "Times New Roman", serif; }
.article-byline { display: flex; flex-wrap: wrap; gap: 10px 24px; padding-top: 20px; border-top: 1px solid var(--line); font: 9px/1 "Courier New", monospace; letter-spacing: .08em; text-transform: uppercase; }
.article-byline span:not(:first-child)::before { content: "✦"; margin-right: 24px; color: #8c391d; }
.article-image { align-self: center; width: 100%; min-width: 0; margin: 0; display: block; background: #d9d3c8; }
.article-image img { display: block; width: 100%; height: auto; min-height: 0; object-fit: contain; filter: saturate(.9); }
.article-image figcaption { padding: 12px 18px; background: #d9d3c8; font: 9px/1.3 "Courier New", monospace; }
.article-layout { display: block; width: 100%; max-width: 1320px; margin: 0 auto; padding: 90px 4vw 140px; }
.article-body { width: 100%; min-width: 0; max-width: none; }
.article-body p { margin: 0 0 30px; font: 20px/1.72 Georgia, "Times New Roman", serif; }
.article-body > div:first-child > p::first-letter { float: left; margin: 9px 10px 0 0; color: #8c391d; font: 500 80px/.63 Georgia, "Times New Roman", serif; }
.article-body blockquote { margin: 55px -6vw; padding: 45px 6vw; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); font: 500 clamp(36px, 4.2vw, 61px)/1 Georgia, "Times New Roman", serif; letter-spacing: -.045em; }
.article-body a { color: #7f321b; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.article-body a:hover { color: var(--signal); background: var(--night); }
.article-section-heading { scroll-margin-top: 35px; margin: 68px 0 27px; padding-top: 19px; border-top: 1px solid var(--ink); }
.article-section-heading > p { margin: 0 0 12px; color: #8c391d; font: 700 9px/1 "Courier New", monospace; letter-spacing: .12em; text-transform: uppercase; }
.article-section-heading h2 { margin: 0; font: 500 clamp(27px, 3vw, 41px)/1.02 Georgia, "Times New Roman", serif; letter-spacing: -.04em; }
.article-body h3 { scroll-margin-top: 35px; margin: 38px 0 15px; font: 500 24px/1.08 Georgia, "Times New Roman", serif; letter-spacing: -.025em; }
.article-body ul { margin: -3px 0 38px; padding-left: 25px; }
.article-body li { margin: 0 0 12px; padding-left: 7px; font: 18px/1.58 Georgia, "Times New Roman", serif; }
.article-note { margin: 50px 0; padding: 32px 35px 6px; border: 1px solid var(--ink); background: #e3ded3; }
.article-note h3 { margin: 0 0 18px; color: #8c391d; font: 700 10px/1.2 "Courier New", monospace; letter-spacing: .1em; text-transform: uppercase; }
.article-note p { font-size: 17px; line-height: 1.62; }
.article-race-moment { --moment-accent: #edcf60; width: min(900px, calc(100vw - 48px)); display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 0; margin: 70px 0 82px 50%; overflow: hidden; border: 1px solid var(--ink); background: #151c18; color: var(--chalk); box-shadow: 12px 12px 0 var(--moment-accent); transform: translateX(-50%); }
.article-race-moment--rain { --moment-accent: #76a8c4; }
.article-race-moment--rivalry { --moment-accent: #b94a32; }
.article-race-moment--comeback { --moment-accent: #82a56d; }
.article-race-moment--radio { --moment-accent: #e8943a; }
.article-race-moment > header { display: flex; flex-direction: column; justify-content: space-between; gap: 30px; padding: 28px 22px; border-right: 1px solid rgba(248,245,237,.28); background: color-mix(in srgb, var(--moment-accent) 16%, #151c18); }
.article-race-moment > header strong { color: var(--moment-accent); font: 700 34px/1 "Courier New", monospace; letter-spacing: -.08em; }
.article-race-moment > header span { color: #d7dcd7; font: 700 9px/1.3 "Courier New", monospace; letter-spacing: .12em; text-transform: uppercase; }
.article-race-moment > div { padding: 34px 38px 31px; }
.article-race-moment h3 { margin: 0 0 18px; color: var(--chalk); font: 500 clamp(29px, 3.35vw, 44px)/.98 Georgia, "Times New Roman", serif; letter-spacing: -.04em; }
.article-body .article-race-moment p { margin: 0 0 20px; color: #e1e5e1; font-size: 17px; line-height: 1.58; }
.article-race-moment small { display: block; padding-top: 16px; border-top: 1px solid rgba(248,245,237,.25); color: var(--moment-accent); font: 700 10px/1.45 "Courier New", monospace; letter-spacing: .04em; }
.article-race-moment__media { grid-column: 1 / -1; margin: 0; border-top: 1px solid rgba(248,245,237,.28); background: #090d0b; }
.article-race-moment__media > a { display: block; aspect-ratio: 16 / 8.5; overflow: hidden; }
.article-race-moment__media img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .45s ease; }
.article-race-moment__media > a:hover img { transform: scale(1.015); }
.article-race-moment__media figcaption { padding: 12px 18px 14px; color: #bfc7c0; font: 700 9px/1.45 "Courier New", monospace; letter-spacing: .035em; }
.article-data-table { width: min(980px, calc(100vw - 48px)); margin: 68px 0 78px 50%; padding-top: 24px; border-top: 1px solid var(--ink); transform: translateX(-50%); }
.article-data-table > h3 { max-width: 760px; margin: 0 0 18px; font: 500 clamp(29px, 3.35vw, 46px)/1 Georgia, "Times New Roman", serif; letter-spacing: -.04em; }
.article-body .article-data-table__intro { max-width: 720px; margin: 0 0 28px; color: #4f5851; font: 16px/1.55 Georgia, "Times New Roman", serif; }
.article-data-table__scroll { overflow-x: auto; border: 1px solid var(--ink); background: #eee8de; }
.article-data-table table { width: 100%; min-width: 780px; border-collapse: collapse; }
.article-data-table th,
.article-data-table td { padding: 17px 18px; border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); vertical-align: top; text-align: left; }
.article-data-table tr > :last-child { border-right: 0; }
.article-data-table tbody tr:last-child > * { border-bottom: 0; }
.article-data-table thead th { background: #1a211d; color: var(--chalk); font: 700 9px/1.35 "Courier New", monospace; letter-spacing: .09em; text-transform: uppercase; }
.article-data-table tbody th { width: 18%; color: #7f321b; font: 700 10px/1.45 "Courier New", monospace; letter-spacing: .05em; text-transform: uppercase; }
.article-data-table td { min-width: 190px; font: 15px/1.48 Georgia, "Times New Roman", serif; }
.article-body .article-data-table__note { margin: 13px 0 0; color: #5a625c; font: 12px/1.45 "Courier New", monospace; }
.article-inline-image { width: min(980px, calc(100vw - 48px)); margin: 58px 0 68px 50%; overflow: hidden; border: 1px solid var(--ink); background: #171d19; transform: translateX(-50%); }
.article-inline-image--portrait { width: min(650px, calc(100vw - 48px)); }
.article-inline-image--header + .article-inline-image--header { margin-top: -48px; }
.article-inline-image__frame { display: grid; place-items: center; overflow: hidden; background: #ede8df; }
.article-inline-image__frame img { display: block; width: 100%; height: auto; max-height: 880px; object-fit: contain; }
.article-inline-image--portrait .article-inline-image__frame img { width: auto; max-width: 100%; max-height: 760px; }
.article-inline-image figcaption { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; padding: 13px 16px; color: #e5e5df; }
.article-body .article-inline-image figcaption p { margin: 0; color: inherit; font: 14px/1.4 Georgia, "Times New Roman", serif; }
.article-inline-image figcaption small { flex: 0 0 auto; color: #aeb7b0; font: 8px/1.35 "Courier New", monospace; letter-spacing: .035em; text-transform: uppercase; }
.article-media-gallery,
.article-media-feature { width: min(980px, calc(100vw - 48px)); margin: 64px 0 74px 50%; transform: translateX(-50%); }
.article-media-eyebrow,
.article-body .article-media-eyebrow { margin: 0 0 12px; color: #8c391d; font: 700 9px/1.2 "Courier New", monospace; letter-spacing: .12em; text-transform: uppercase; }
.article-media-gallery > header { display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, .72fr); gap: 18px 48px; align-items: end; margin-bottom: 25px; padding-top: 20px; border-top: 1px solid var(--ink); }
.article-media-gallery > header .article-media-eyebrow { grid-column: 1 / 3; }
.article-media-gallery > header h3 { margin: 0; font: 500 clamp(29px, 3.35vw, 46px)/1 Georgia, "Times New Roman", serif; letter-spacing: -.04em; }
.article-media-gallery--drivers > header h3 { font-size: clamp(25px, 2.75vw, 37px); line-height: 1.03; }
.article-media-gallery > header > p:last-child { margin: 0; color: #4e5750; font: 16px/1.52 Georgia, "Times New Roman", serif; }
.article-media-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.article-media-gallery--ingredients .article-media-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.article-media-gallery--drivers .article-media-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.article-media-card { display: grid; grid-template-rows: auto 1fr; min-width: 0; margin: 0; overflow: hidden; border: 1px solid var(--ink); background: #e6dfd4; }
.article-media-card__image { display: grid; place-items: center; aspect-ratio: 1 / 1.12; overflow: hidden; padding: 22px; background: #eee9e0; }
.article-media-gallery--ingredients .article-media-card__image,
.article-media-gallery--process .article-media-card__image,
.article-media-gallery--drivers .article-media-card__image { aspect-ratio: 4 / 3; padding: 0; }
.article-media-gallery--process .article-media-card--contain .article-media-card__image { padding: 18px; background: #f7f3ec; }
.article-media-card__image:hover { background: #ded6ca; }
.article-media-card__image img { width: 100%; height: 100%; object-fit: contain; transition: transform .35s ease; }
.article-media-card--cover .article-media-card__image img { object-fit: cover; }
.article-media-card__image:hover img { transform: scale(1.025); }
.article-media-card figcaption { display: flex; flex-direction: column; align-items: flex-start; padding: 18px; border-top: 1px solid var(--ink); }
.article-media-card figcaption h4 { margin: 0 0 9px; font: 500 22px/1.02 Georgia, "Times New Roman", serif; letter-spacing: -.025em; }
.article-body .article-media-card figcaption p { margin: 0 0 17px; color: #4f5851; font: 14px/1.48 Georgia, "Times New Roman", serif; }
.article-media-card figcaption a { margin-top: auto; color: #7f321b; font: 700 9px/1.2 "Courier New", monospace; letter-spacing: .07em; text-decoration: none; text-transform: uppercase; }
.article-media-card figcaption .article-media-card__credit { margin-top: 8px; color: #59625b; font-size: 8px; letter-spacing: .02em; text-transform: none; }
.article-media-gallery--drivers .article-media-card figcaption { padding: 13px; }
.article-media-gallery--drivers .article-media-card figcaption h4 { margin-bottom: 7px; font-size: 17px; line-height: 1.05; }
.article-body .article-media-gallery--drivers .article-media-card figcaption p { margin-bottom: 12px; font-size: 12px; line-height: 1.35; }
.article-media-gallery--drivers .article-media-card figcaption .article-media-card__credit { display: none; }
.article-media-feature { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(260px, .88fr); min-height: 470px; overflow: hidden; border: 1px solid var(--ink); background: #161d19; color: var(--chalk); }
.article-media-feature__image { display: grid; place-items: center; min-height: 470px; overflow: hidden; padding: 34px; background: #e7dfd3; }
.article-media-feature__image img { width: 100%; height: 100%; max-height: 620px; object-fit: cover; transition: transform .45s ease; }
.article-media-feature--contain .article-media-feature__image img { object-fit: contain; }
.article-media-feature__image:hover img { transform: scale(1.02); }
.article-media-feature figcaption { align-self: stretch; display: flex; flex-direction: column; justify-content: center; padding: clamp(32px, 4vw, 58px); }
.article-media-feature figcaption h3 { margin: 0 0 21px; color: var(--chalk); font: 500 clamp(30px, 3.25vw, 46px)/.98 Georgia, "Times New Roman", serif; letter-spacing: -.04em; }
.article-body .article-media-feature figcaption > p:not(.article-media-eyebrow) { margin: 0 0 28px; color: #d6dbd6; font: 16px/1.55 Georgia, "Times New Roman", serif; }
.article-media-feature figcaption > a { align-self: flex-start; color: var(--signal); font: 700 9px/1.3 "Courier New", monospace; letter-spacing: .08em; text-decoration: none; text-transform: uppercase; }
.article-media-feature figcaption > a:hover { color: var(--night); background: var(--signal); }
.article-sources { margin-top: 100px; padding-top: 35px; border-top: 2px solid var(--ink); }
.article-sources h2 { margin: 0 0 35px; font: 500 45px/1 Georgia, "Times New Roman", serif; letter-spacing: -.04em; }
.article-sources ol { margin: 0; padding-left: 22px; }
.article-sources li { margin-bottom: 18px; padding-left: 8px; font-size: 15px; line-height: 1.45; }
.article-sources li span { display: block; margin-top: 3px; color: #5a625c; }
.article-endmark { width: 55px; height: 55px; display: grid; place-items: center; margin-top: 65px; border: 1px solid var(--ink); border-radius: 50%; font: 700 10px/1 "Courier New", monospace; transform: rotate(-8deg); }

.article-hero--opinion { background: #8f371f; color: var(--chalk); }
.article-hero--opinion .article-standfirst { color: #f1d8cf; }
.article-hero--opinion .article-byline { border-top-color: rgba(248,245,237,.3); }
.article-opinion-art { position: relative; display: grid; place-items: center; overflow: hidden; background: var(--signal); color: var(--night); }
.article-opinion-art::before, .article-opinion-art::after { content: ""; position: absolute; border: 1px solid var(--night); border-radius: 50%; }
.article-opinion-art::before { width: 540px; height: 540px; left: -230px; top: -180px; }
.article-opinion-art::after { width: 330px; height: 330px; right: -120px; bottom: -70px; }
.article-opinion-art > span { width: 180px; height: 180px; display: grid; place-items: center; border: 1px solid var(--night); border-radius: 50%; font: 700 28px/1 "Courier New", monospace; transform: rotate(9deg); }
.article-opinion-art > p { position: absolute; left: 40px; bottom: 35px; margin: 0; font: 700 9px/1.5 "Courier New", monospace; letter-spacing: .1em; text-transform: uppercase; }

.related-section { padding-top: 95px; border-top: 1px solid var(--ink); }
.section-heading--small { margin-bottom: 45px; }
.section-heading--small h2 { font-size: clamp(50px, 5vw, 78px); }
.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.related-grid img { aspect-ratio: 1.35 / 1; object-fit: cover; filter: saturate(.75); }
.related-grid article > p { margin: 18px 0 10px; color: #8c391d; font: 700 9px/1 "Courier New", monospace; letter-spacing: .1em; text-transform: uppercase; }
.related-grid h3 { margin: 0; font: 500 28px/1 Georgia, "Times New Roman", serif; letter-spacing: -.035em; }

/* Oddly Unreasonable archive */
.opinion-page { background: #8f371f; color: var(--chalk); }
.opinion-page .site-header { border-bottom-color: rgba(248,245,237,.3); }
.opinion-page .brand-orbit, .opinion-page .menu-button { border-color: var(--chalk); }
.opinion-page-hero { min-height: 680px; padding: 80px 4vw; display: grid; grid-template-columns: .35fr 1.65fr; grid-template-rows: auto 1fr auto; }
.opinion-page-hero .unreasonable-mark { grid-column: 1; grid-row: 1; }
.opinion-page-hero > p { grid-column: 2; grid-row: 1; align-self: center; margin: 0; }
.opinion-page-hero h1 { grid-column: 1 / 3; align-self: center; max-width: none; color: var(--chalk); font-size: clamp(83px, 12vw, 190px); }
.opinion-page-hero h1 em { color: var(--signal); }
.opinion-page-hero > div:last-child { grid-column: 2; display: flex; justify-content: space-between; align-items: end; gap: 30px; border-top: 1px solid rgba(248,245,237,.3); padding-top: 25px; }
.opinion-page-hero > div:last-child p { max-width: 500px; margin: 0; font: 21px/1.4 Georgia, "Times New Roman", serif; }
.opinion-page-hero > div:last-child span { font: 9px/1.5 "Courier New", monospace; letter-spacing: .08em; text-transform: uppercase; }
.opinion-archive { background: var(--paper); color: var(--ink); }
.opinion-manifesto { display: grid; grid-template-columns: .35fr .85fr .8fr; gap: 4vw; align-items: start; padding-bottom: 80px; border-bottom: 1px solid var(--ink); }
.opinion-manifesto > p:first-child { margin: 7px 0 0; color: #8c391d; font: 700 9px/1 "Courier New", monospace; text-transform: uppercase; letter-spacing: .1em; }
.opinion-manifesto h2 { margin: 0; font: 500 clamp(38px, 4.5vw, 67px)/.98 Georgia, "Times New Roman", serif; letter-spacing: -.045em; }
.opinion-manifesto > p:last-child { margin: 7px 0 0; color: #515a53; font: 16px/1.6 Georgia, "Times New Roman", serif; }
.opinion-archive-list { margin-top: 80px; }
.opinion-archive-list article { display: grid; grid-template-columns: 70px 1fr 40px; gap: 25px; padding: 45px 0; border-top: 1px solid var(--ink); }
.opinion-archive-list article:last-child { border-bottom: 1px solid var(--ink); }
.opinion-archive-list article > span { color: #8c391d; font: 700 10px/1.5 "Courier New", monospace; }
.opinion-archive-list article > div > p:first-child { margin: 0 0 14px; color: #8c391d; font: 700 9px/1 "Courier New", monospace; letter-spacing: .1em; text-transform: uppercase; }
.opinion-archive-list h3 { margin: 0; font: 500 clamp(37px, 4vw, 63px)/.95 Georgia, "Times New Roman", serif; letter-spacing: -.045em; }
.opinion-archive-list article > div > p:last-child { max-width: 680px; margin: 18px 0 0; color: #505952; font: 16px/1.5 Georgia, "Times New Roman", serif; }
.opinion-archive-list article > a { align-self: center; font-size: 23px; }

@media (max-width: 900px) {
  .site-header { grid-template-columns: 1fr auto; min-height: 96px; }
  .masthead { display: none; }
  .topic-nav { justify-content: flex-start; }
  .hero { padding-top: 22px; }
  .hero-copy { grid-template-columns: 1fr; gap: 24px; padding-top: 36px; }
  .hero-intro { max-width: 620px; }
  .hero-intro .dek { margin-top: 0; }
  h1 { font-size: clamp(68px, 15vw, 108px); }
  .section-wrap { padding-block: 90px; }
  .section-heading { grid-template-columns: 1fr; gap: 30px; }
  .section-intro { max-width: 620px; }
  .story-grid { grid-template-columns: 1fr 1fr; }
  .story-card:nth-child(n) { grid-column: auto; grid-row: auto; }
  .story-card:nth-child(1) { grid-column: 1 / 3; }
  .story-card--lead .story-image { aspect-ratio: 1.55 / 1; }
  .opinion-section { grid-template-columns: 1fr; }
  .opinion-title { min-height: 620px; border-right: 0; border-bottom: 1px solid rgba(248,245,237,.25); }
  .rabbit-section { grid-template-columns: 1fr; }
  .rabbit-intro { position: static; margin-bottom: 25px; }
  .media-section { grid-template-columns: 1fr; }
  .media-visual { min-height: 590px; }
  .field-note-section { grid-template-columns: 1fr; }
  .field-image { min-height: 560px; }
  .field-copy { min-height: 520px; }
  .about-section { grid-template-columns: 1fr; }
  .about-identity { display: grid; grid-template-columns: 1fr minmax(280px, .72fr); align-items: end; }
  .about-portrait { min-height: 360px; }
  .contact-section { grid-template-columns: 1fr; align-items: start; }
  .contact-copy { margin-top: 20px; }
  .newsletter-section { grid-template-columns: 1fr; align-items: start; }
  .newsletter-form { margin-top: 30px; }
  .site-footer { grid-template-columns: 1.3fr 1fr 1fr; }
  .article-hero { grid-template-columns: 1fr; }
  .article-heading { min-height: 610px; }
  .article-image { min-height: 0; }
  .article-layout { grid-template-columns: 1fr; }
  .article-body blockquote { margin-inline: 0; padding-inline: 0; }
  .article-media-gallery > header { grid-template-columns: 1fr; }
  .article-media-gallery > header .article-media-eyebrow { grid-column: 1; }
  .article-media-gallery--ingredients .article-media-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .article-media-gallery--drivers .article-media-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .article-opinion-art { min-height: 540px; }
  .opinion-page-hero { grid-template-columns: 1fr; }
  .opinion-page-hero .unreasonable-mark,
  .opinion-page-hero > p,
  .opinion-page-hero h1,
  .opinion-page-hero > div:last-child { grid-column: 1; }
  .opinion-page-hero > p { display: none; }
  .opinion-manifesto { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .site-header { padding-inline: 20px; }
  .brand strong { font-size: 18px; }
  .brand-orbit { width: 40px; height: 40px; }
  .menu-button { width: 42px; height: 42px; }
  .menu-panel { right: -1px; top: 52px; padding: 24px; }
  .menu-panel > a:not(.menu-about) { font-size: 21px; }
  .topic-nav { padding-inline: 20px; gap: 22px; }
  .hero { padding: 12px 20px 35px; gap: 20px; }
  h1 { font-size: 64px; }
  .dek { font-size: 17px; }
  .hero-art { aspect-ratio: 1731 / 909; }
  .hero-copy { padding-top: 28px; }
  .edition-strip { padding-inline: 20px; }
  .section-wrap { padding: 72px 20px; }
  .section-heading { margin-bottom: 48px; }
  .section-heading h2, .rabbit-intro h2, .about-section h2 { font-size: 52px; }
  .story-grid { grid-template-columns: 1fr; gap-block: 50px; }
  .story-card:nth-child(1) { grid-column: auto; }
  .story-card--lead .story-image,
  .story-card--wide .story-image { aspect-ratio: 1.2 / 1; }
  .story-copy h3,
  .story-card:not(.story-card--lead) .story-copy h3 { font-size: 32px; }
  .opinion-title { min-height: 590px; padding: 70px 20px; }
  .opinion-title h2 { font-size: 66px; }
  .opinion-list { padding: 35px 20px 70px; }
  .opinion-list article { grid-template-columns: 1fr 35px; padding-block: 32px; }
  .opinion-list h3 { font-size: 37px; }
  .rabbit-list article { grid-template-columns: 35px 1fr 26px; gap: 15px; }
  .rabbit-list h3 { grid-column: 2; font-size: 27px; }
  .rabbit-list p { grid-column: 2 / 4; }
  .rabbit-list small { grid-column: 2 / 4; }
  .rabbit-list a { grid-column: 3; grid-row: 1 / 2; }
  .media-visual { min-height: 440px; padding: 35px 20px; }
  .media-frame { aspect-ratio: 1 / .94; }
  .play-disc { width: 115px; height: 115px; }
  .media-copy { padding: 70px 20px; }
  .media-copy h2 { font-size: 54px; }
  .media-actions { flex-direction: column; align-items: flex-start; }
  .episode-list li { grid-template-columns: 25px 1fr; }
  .episode-list small { grid-column: 2; }
  .field-image { min-height: 430px; }
  .field-copy { min-height: 470px; padding: 65px 20px; }
  .field-copy blockquote { font-size: 42px; }
  .about-identity { grid-template-columns: 1fr; }
  .about-portrait { min-height: 370px; }
  .about-portrait figcaption { align-items: flex-start; flex-direction: column; gap: 6px; }
  .about-portrait span { text-align: left; }
  .contact-section h2 { font-size: 64px; }
  .contact-copy > p { font-size: 17px; }
  .newsletter-section { padding: 75px 20px; }
  .newsletter-section h2 { font-size: 56px; }
  .newsletter-form > div { grid-template-columns: 1fr; }
  .newsletter-form button { justify-self: start; padding: 16px 0; }
  .site-footer { grid-template-columns: 1fr; padding: 70px 20px 25px; }
  .footer-links { margin-top: 20px; }
  .footer-bottom { grid-column: 1; flex-direction: column; margin-top: 40px; }
  .article-heading { min-height: auto; padding: 70px 20px; }
  .article-heading h1 { font-size: 61px; }
  .article-standfirst { font-size: 18px; }
  .article-byline { flex-direction: column; }
  .article-byline span:not(:first-child)::before { content: none; }
  .article-image { min-height: 0; }
  .article-layout { padding: 70px 20px 95px; }
  .article-body p { font-size: 18px; line-height: 1.7; }
  .article-body blockquote { margin: 45px 0; padding: 35px 0; font-size: 39px; }
  .article-section-heading { margin: 54px 0 24px; padding-top: 17px; }
  .article-section-heading h2 { font-size: 28px; }
  .article-body h3 { margin: 32px 0 14px; font-size: 22px; }
  .article-race-moment { width: calc(100vw - 30px); grid-template-columns: 1fr; margin: 55px 0 67px 50%; box-shadow: 7px 7px 0 var(--moment-accent); }
  .article-race-moment > header { flex-direction: row; align-items: baseline; padding: 20px 22px; border-right: 0; border-bottom: 1px solid rgba(248,245,237,.28); }
  .article-race-moment > header strong { font-size: 29px; }
  .article-race-moment > div { padding: 28px 24px 25px; }
  .article-race-moment h3 { font-size: 31px; }
  .article-race-moment__media > a { aspect-ratio: 16 / 9; }
  .article-data-table { width: calc(100vw - 24px); margin: 52px 0 62px 50%; padding-inline: 8px; }
  .article-data-table > h3 { font-size: 31px; }
  .article-data-table__scroll { margin-inline: -8px; }
  .article-inline-image,
  .article-inline-image--portrait { width: calc(100vw - 24px); margin: 45px 0 54px 50%; }
  .article-inline-image--header + .article-inline-image--header { margin-top: -35px; }
  .article-inline-image figcaption { align-items: flex-start; flex-direction: column; gap: 7px; padding: 12px 14px; }
  .article-media-gallery,
  .article-media-feature { width: calc(100vw - 24px); margin: 52px 0 62px 50%; }
  .article-media-gallery > header { padding-inline: 8px; }
  .article-media-gallery > header h3 { font-size: 31px; }
  .article-media-grid,
  .article-media-gallery--ingredients .article-media-grid { grid-template-columns: 1fr; gap: 12px; }
  .article-media-gallery--drivers .article-media-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .article-media-gallery--drivers > header h3 { font-size: 26px; }
  .article-media-card__image { aspect-ratio: 1 / .9; padding: 28px; }
  .article-media-gallery--ingredients .article-media-card__image,
  .article-media-gallery--process .article-media-card__image { aspect-ratio: 4 / 2.8; }
  .article-media-gallery--drivers .article-media-card__image { aspect-ratio: 4 / 3; }
  .article-media-feature { grid-template-columns: 1fr; }
  .article-media-feature__image { min-height: 360px; }
  .article-media-feature figcaption { padding: 34px 26px; }
  .article-media-feature figcaption h3 { font-size: 33px; }
  .article-opinion-art { min-height: 420px; }
  .related-grid { grid-template-columns: 1fr; gap: 42px; }
  .opinion-page-hero { min-height: 600px; padding: 65px 20px; }
  .opinion-page-hero h1 { font-size: 76px; }
  .opinion-page-hero > div:last-child { flex-direction: column; align-items: flex-start; }
  .opinion-archive-list article { grid-template-columns: 40px 1fr; }
  .opinion-archive-list article > a { grid-column: 2; justify-self: end; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}