@font-face {
  font-family: 'Cardo Study';
  src: url('assets/cardo-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Cardo Study';
  src: url('assets/cardo-bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Cardo Study';
  src: url('assets/cardo-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Autobahn';
  src: url('assets/autobahn.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* An editorial cover in the same ink, paper and type as the home page. */
.article-page {
  --serif: 'Cardo Study', Georgia, serif;
  --article-black: #0d090a;
  --article-white: #f0f1e9;
  --content-max: 1680px;
}

/* A single, centered reading column. */
.article-page .article-layout {
  grid-template-columns: minmax(0, 800px);
  justify-content: center;
  gap: 0;
  padding-top: 80px;
  padding-bottom: 104px;
  margin-inline: auto;
}

.article-page .article-body {
  font: 400 22px/1.7 var(--serif);
  letter-spacing: -.01em;
}

.article-page .article-body > p { margin-bottom: 28px; }

.article-page .article-body > p:first-child {
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}

.article-page .article-body h2 {
  margin: 64px 0 24px;
  padding: 0;
  border: 0;
  font: 400 clamp(34px, 2.75cqw, 38px)/1.16 var(--serif);
  letter-spacing: -.035em;
  text-wrap: pretty;
  scroll-margin-top: 40px;
}

.article-page .article-body h3 {
  margin: 38px 0 16px;
  font-size: 30px;
  line-height: 1.18;
  letter-spacing: -.03em;
  text-wrap: pretty;
}

.article-page .article-body a {
  text-decoration-color: #969e92;
  text-underline-offset: .18em;
  transition: text-decoration-color .2s ease;
}

.article-page .article-body figure { margin-block: 48px; }
.article-page .article-body figure img { background: #dfe4df; }
.article-page .article-body ol { margin-top: 28px; padding-left: 28px; font-size: 20px; line-height: 1.7; list-style: decimal-leading-zero; }
.article-page .article-body ol li { margin-bottom: 24px; padding-left: 10px; }
.article-body ol li::marker { font: 400 13px/1.5 var(--mono); color: var(--muted); }
.article-body ol a { font-family: var(--mono); font-size: 15px; letter-spacing: -.025em; }

/* Related stories echo the image-led journal, on the cover's dark ground. */
.article-page .article-more {
  padding-block: 104px 112px;
  padding-inline: max(var(--gutter), calc((100% - var(--content-max)) / 2));
  border: 0;
  background: var(--article-black);
  color: var(--article-white);
}

.article-more .section-heading { max-width: 1000px; margin-inline: auto; }
.article-more .ornament { color: #aaa5a3; }
.article-more .section-heading > .eyebrow { margin-bottom: 18px; font-size: 12px; color: #aaa5a3; }
.article-more .section-heading h2 { font: 400 clamp(42px, 5.5cqw, 80px)/1.1 'Autobahn', serif; font-synthesis: none; letter-spacing: 0; text-wrap: balance; }
.article-page .more-posts { gap: 48px 30px; margin-top: 64px; }
.more-post { min-width: 0; }
.more-post-image { display: block; aspect-ratio: 1.55; overflow: hidden; background: #272321; }
.more-post-image img { width: 100%; height: 100%; filter: saturate(.78); transition: transform .7s ease, filter .5s ease; }
.more-post-copy { margin-top: 22px; }
.more-post-copy > .eyebrow { display: inline-block; font-size: 14px; letter-spacing: -.025em; line-height: 1.5; color: #aaa5a3; text-transform: none; }
.more-post-copy > .eyebrow::before { content: '#'; margin-right: .35em; }
.article-page .more-posts h3 { margin-top: 12px; font-size: clamp(28px, 2.35cqw, 36px); line-height: 1.15; letter-spacing: -.035em; }
.more-posts h3 a { transition: opacity .25s ease; }
.more-post-copy p { margin-top: 16px; font: 400 15px/1.65 var(--mono); letter-spacing: -.025em; color: #aaa5a3; }

@media (hover: hover) {
  .article-body a:hover { text-decoration-color: currentColor; }
  .more-post:hover h3 a { opacity: .72; }
  .more-post-copy > .eyebrow:hover { color: var(--article-white); }
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .more-post:hover .more-post-image img { transform: scale(1.035); filter: saturate(1); }
}

@media (prefers-reduced-motion: no-preference) {
  .article-more .is-reveal-ready { opacity: 0; translate: 0 24px; }
  .article-more .is-reveal-ready.is-revealed { opacity: 1; translate: 0 0; transition: opacity .9s ease, translate .9s cubic-bezier(.16, 1, .3, 1); }
  .article-more .is-reveal-ready:focus-within { opacity: 1; translate: none; transition: none; }
}

@media (min-width: 913px) and (max-width: 1050px) {
  .article-page .more-posts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 912px) {
  .article-page .more-posts { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 900px) {
  .article-page .article-layout { padding-block: 56px 80px; }
}

@media (max-width: 700px) {
  .article-page .article-layout { padding-block: 36px 64px; }
  .article-page .article-body { font-size: 20px; line-height: 1.65; }
  .article-page .article-body > p { margin-bottom: 24px; }
  .article-page .article-body h2 { margin-block: 44px 20px; font-size: 30px; line-height: 1.18; scroll-margin-top: 24px; }
  .article-page .article-body h3 { font-size: 27px; margin-top: 30px; }
  .article-page .article-body figure { margin-block: 36px; }
  .article-page .article-body ol { font-size: 18px; padding-left: 24px; }
  .article-body ol a { font-size: 14px; }
  .article-page .article-body ol li { padding-left: 6px; }
  .article-page .article-more { padding-block: 64px; }
  .article-page .more-posts { gap: 44px; margin-top: 40px; }
  .article-more .section-heading > .eyebrow { font-size: 11px; }
  .article-more .section-heading h2 { font-size: clamp(40px, 10cqw, 56px); }
  .more-post-copy { margin-top: 18px; }
  .article-page .more-posts h3 { font-size: 30px; }
}

.article-page .article-masthead {
  margin-bottom: -1px;
  padding-bottom: 1px;
  background: var(--article-black);
  color: var(--article-white);
}

.article-page .article-masthead,
.article-page .site-header {
  border-bottom: 0;
  box-shadow: none;
}

.article-page .site-header {
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: calc(var(--content-max) + 72px);
  min-height: 106px;
  margin-inline: auto;
  padding-block: 22px;
}

.article-page .brand {
  gap: 8px;
}

.article-wordmark {
  font: 400 32px/1 'Autobahn', serif;
  font-synthesis: none;
  letter-spacing: 0;
}

.article-page .brand img {
  flex: none;
  width: 44px;
  height: 44px;
  translate: 0 -2px;
}

.article-hero {
  background: var(--article-black);
  color: var(--article-white);
  padding-bottom: 36px;
}

.article-page .article-heading {
  isolation: isolate;
  overflow: hidden;
  padding-top: 38px;
  padding-bottom: 42px;
}

.article-page .article-heading > .eyebrow {
  display: inline-block;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: .025em;
  text-transform: none;
  color: #bab6b2;
}

.article-heading > .eyebrow::before {
  content: '#';
  margin-right: .4em;
}

.article-page .article-heading h1 {
  max-width: 1240px;
  margin: 24px auto 22px;
  font-family: 'Autobahn', serif;
  font-size: clamp(54px, 6cqw, 94px);
  font-weight: 400;
  font-synthesis: none;
  line-height: 1.1;
  letter-spacing: 0;
  text-wrap: balance;
}

.article-deck {
  max-width: 580px;
  margin-inline: auto;
  font: 400 22px/1.45 'Cardo Study', Georgia, serif;
  letter-spacing: -.015em;
  color: #bab6b2;
  text-wrap: balance;
}

.article-page .article-meta {
  align-items: center;
  gap: 18px;
  margin-top: 28px;
  font-size: 11px;
  line-height: 1.6;
  color: #bab6b2;
}

.article-meta a {
  color: var(--article-white);
  text-decoration: underline;
  text-decoration-color: #6f6968;
  text-underline-offset: 4px;
}

.article-page .article-cover {
  position: relative;
  isolation: isolate;
  max-width: var(--content-max);
  margin-inline: max(var(--gutter), calc((100% - var(--content-max)) / 2));
  overflow: hidden;
  background: var(--article-black);
}

.article-page .article-cover img {
  width: 100%;
  height: auto;
  aspect-ratio: 2.3;
  object-fit: cover;
  object-position: 50% 47%;
}

.article-cover-fade {
  position: absolute;
  z-index: 1;
  inset: 0;
  background: var(--article-black);
  opacity: 0;
  pointer-events: none;
  will-change: opacity;
}

@media (hover: hover) {
  .article-heading > .eyebrow:hover { color: var(--article-white); }
}

@keyframes article-cover-rise {
  from { opacity: 0; translate: 0 18px; }
  to { opacity: 1; translate: 0 0; }
}

@media (prefers-reduced-motion: no-preference) {
  .js .article-heading > .eyebrow { animation: article-cover-rise .7s .05s both; }
  .js .article-heading h1 { animation: article-cover-rise .9s .12s both; }
  .js .article-deck { animation: article-cover-rise .9s .2s both; }
  .js .article-meta { animation: article-cover-rise .9s .28s both; }
  .article-page .brand img { transition: rotate .8s ease; }
  .article-page .brand:hover img { rotate: 90deg; }
}

@media (max-width: 1000px) {
  .article-page .article-heading { padding-top: 32px; }
  .article-page .article-heading h1 { max-width: 850px; font-size: clamp(50px, 7.2cqw, 72px); }
  .article-deck { font-size: 21px; }
  .article-hero { padding-bottom: 25px; }
}

@media (max-width: 700px) {
  .article-page .site-header {
    min-height: 84px;
    padding-block: 18px;
  }
  .article-wordmark { font-size: 25px; }
  .article-page .brand img { width: 36px; height: 36px; }
  .article-page .article-heading { padding-top: 32px; padding-bottom: 32px; }
  .article-page .article-heading > .eyebrow { font-size: 12px; }
  .article-page .article-heading h1 {
    max-width: 560px;
    margin-block: 22px;
    font-size: clamp(38px, 10cqw, 64px);
    line-height: 1.12;
    letter-spacing: 0;
  }
  .article-deck { max-width: 390px; font-size: 18px; line-height: 1.45; }
  .article-page .article-meta { flex-wrap: nowrap; gap: 12px; margin-top: 24px; font-size: 11px; }
  .article-page .article-cover { margin-inline: 0; }
  .article-page .article-cover img { aspect-ratio: 1.25; object-position: 58% 50%; }
  .article-hero { padding-bottom: 0; }
}

@media (max-width: 370px) {
  .article-wordmark { font-size: 22px; }
  .article-page .article-heading h1 { font-size: 38px; }
  .article-deck { font-size: 17px; }
  .article-page .article-meta { gap: 10px; }
}

/* The same centered footer and entrance as the home page. */
.article-page .site-footer{padding-inline:max(var(--gutter),calc((100% - var(--content-max))/2))}
.article-page .site-footer{--muted:#aaa5a3;overflow:clip;padding-top:64px;background:var(--article-black);color:var(--article-white);border-top:0}
.article-page .site-footer .footer-top{grid-template-columns:minmax(0,1fr);align-items:center;row-gap:12px}
.article-page .site-footer .footer-brand{grid-column:1;grid-row:1;justify-self:center;font-family:'Autobahn',serif;font-size:clamp(40px,4.5cqw,64px);font-weight:400;font-synthesis:none;line-height:1.05;letter-spacing:0;text-align:center;white-space:nowrap}
.article-page .site-footer .footer-brand{transition:opacity .6s ease}
@media (prefers-reduced-motion: reduce) {
  .article-page .site-footer .footer-brand { transition: none; }
}
.article-page .site-footer .footer-top>p{grid-column:1;grid-row:2;justify-self:center;font-size:12px;text-align:center}
.article-page .site-footer .footer-bottom{display:grid;grid-template-columns:minmax(0,1fr);align-items:center;gap:14px}
.article-page .site-footer .footer-bottom>nav{grid-column:1;grid-row:1;justify-self:center;flex-direction:row;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px 28px;font-size:14px;color:var(--article-white)}
.article-page .site-footer .footer-bottom>nav a{display:inline-flex;align-items:center;min-height:40px}
.article-page .site-footer .footer-bottom>nav button{display:inline-flex;align-items:center;min-height:40px;padding:0;border:0;background:none;font:inherit;letter-spacing:inherit;color:inherit}
.article-page .site-footer .footer-copyright{display:block;grid-column:1;grid-row:2;justify-self:center;font-size:11px;line-height:1.5;text-align:center}
@media(prefers-reduced-motion:no-preference){
 .article-page .site-footer.is-reveal-ready>:is(.footer-top,.footer-bottom){opacity:0;translate:0 24px}
 .article-page .site-footer.is-reveal-ready.is-revealed>:is(.footer-top,.footer-bottom){opacity:1;translate:0 0;transition:opacity .9s ease,translate .9s cubic-bezier(.16,1,.3,1)}
 .article-page .site-footer.is-reveal-ready:focus-within>:is(.footer-top,.footer-bottom){transition:none}
}
@media(max-width:700px){
 .article-page .site-footer{padding-top:48px}
 .article-page .site-footer .footer-top{gap:18px}
}