:root {
  --ink: #171814;
  --paper: #f6f3ed;
  --dark: #080908;
  --gold: #a88750;
  --muted: #6a6257;
  --line: #cfc4b4;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: "Manrope", sans-serif; }
a { color: inherit; text-decoration: none; }
img { display: block; width: 100%; }

.article-nav {
  position: absolute; z-index: 5; inset: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px clamp(20px, 5vw, 70px);
  color: #f6f0e7;
}
.article-nav img { width: 185px; }
.article-nav a:last-child { border-bottom: 1px solid #c5a66c; padding-bottom: 5px; font-size: 9px; letter-spacing: .16em; text-transform: uppercase; }

.article-hero { position: relative; min-height: 92svh; display: grid; align-items: end; overflow: hidden; }
.article-hero > img { position: absolute; inset: 0; height: 100%; object-fit: cover; }
.article-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(3,4,3,.82), rgba(3,4,3,.08)), linear-gradient(0deg, rgba(3,4,3,.88), transparent 62%); }
.article-hero::before { content: ""; position: absolute; z-index: 2; inset: 24px; border: 1px solid rgba(246,240,231,.28); pointer-events: none; }
.hero-copy { position: relative; z-index: 2; max-width: 980px; padding: 150px clamp(20px, 7vw, 105px) 72px; color: #f6f0e7; }
.eyebrow { margin: 0 0 18px; color: #c5a66c; font-size: 9px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; }
h1, h2, blockquote { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 400; letter-spacing: 0; }
h1 { max-width: 900px; margin: 0; font-size: 116px; line-height: .78; }
.standfirst { max-width: 660px; margin: 30px 0 0; font-family: "Cormorant Garamond", Georgia, serif; font-size: 31px; line-height: 1.08; }
.byline { margin: 28px 0 0; color: rgba(246,240,231,.64); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; }

.article-body { max-width: 1320px; margin: 0 auto; padding: 90px clamp(20px, 6vw, 90px) 120px; }
.article-intro { display: grid; grid-template-columns: .62fr 1.38fr; gap: 70px; padding-bottom: 75px; border-bottom: 1px solid var(--line); }
.article-intro h2 { margin: 0; font-size: 63px; line-height: .9; }
.prose { max-width: 740px; }
.prose p { margin: 0 0 26px; color: #3e3a33; font-size: 16px; line-height: 1.9; }
.prose p:first-child::first-letter { float: left; margin: 5px 9px 0 0; color: var(--gold); font-family: "Cormorant Garamond", Georgia, serif; font-size: 76px; line-height: .68; }
.article-image { margin: 76px 0; }
.article-image { position: relative; padding: 12px; border: 1px solid var(--line); }
.article-image img { max-height: 780px; object-fit: cover; }
.article-image figcaption { margin-top: 10px; color: var(--muted); font-size: 8px; letter-spacing: .14em; text-transform: uppercase; }
.columns { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: start; }
blockquote { margin: 20px 0 0; padding-top: 22px; border-top: 1px solid var(--gold); color: #2b2b25; font-size: 50px; line-height: .98; }
.fact-list { margin: 26px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.fact-list li { display: grid; grid-template-columns: 56px 1fr; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 12px; line-height: 1.6; }
.fact-list span { color: var(--gold); }

.more { background: var(--dark); color: #f6f0e7; padding: 76px clamp(20px, 6vw, 90px); }
.more h2 { margin: 0 0 32px; font-size: 55px; }
.more-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(197,166,108,.3); }
.more-links a { min-height: 180px; display: grid; align-content: end; gap: 8px; padding: 24px; background: var(--dark); }
.more-links span { color: #c5a66c; font-size: 8px; letter-spacing: .16em; text-transform: uppercase; }
.more-links strong { font-family: "Cormorant Garamond", Georgia, serif; font-size: 30px; font-weight: 400; }
.more-links a:hover strong { color: #c5a66c; }

.article-footer { display: flex; justify-content: space-between; gap: 24px; padding: 28px clamp(20px, 6vw, 90px); background: #080908; color: #9d968b; font-size: 8px; letter-spacing: .12em; text-transform: uppercase; }

@media (max-width: 850px) {
  h1 { font-size: 74px; }
  .standfirst { font-size: 27px; }
  .article-intro, .columns, .more-links { grid-template-columns: 1fr; }
  .article-intro { gap: 30px; }
  .article-intro h2 { font-size: 50px; }
  blockquote { font-size: 40px; }
  .more-links a { min-height: 130px; }
}

@media (max-width: 520px) {
  .article-nav img { width: 145px; }
  .article-nav a:last-child { display: none; }
  .article-hero { min-height: 760px; }
  h1 { font-size: 58px; }
  .standfirst { font-size: 24px; }
  .article-body { padding-top: 64px; }
  .prose p { font-size: 15px; }
}