:root {
  color-scheme: dark;
  --canvas: #191a18;
  --stone: #e7e7df;
  --muted: #b0b1a8;
  --rule: #41433e;
  --gutter: 48px;
  --max-width: 1440px;
}

* { box-sizing: border-box; }
html { scroll-behavior: auto; scroll-padding-top: 32px; }
body {
  margin: 0;
  background: var(--canvas);
  color: var(--stone);
  font: 400 16px/1.6 "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
h1, h2, p, figure { margin: 0; }
a { color: inherit; text-decoration: none; touch-action: manipulation; }
a:focus-visible {
  outline: 3px solid var(--stone);
  outline-offset: 5px;
}
a:hover { text-decoration: underline; text-underline-offset: 5px; }
img { display: block; max-width: 100%; height: auto; }
picture { display: block; }
.page {
  width: min(calc(100% - var(--gutter) * 2), var(--max-width));
  margin-inline: auto;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: absolute;
  left: 20px;
  top: 12px;
  z-index: 5;
  transform: translateY(-180%);
  padding: 12px 18px;
  background: var(--stone);
  color: var(--canvas);
}
.skip-link:focus { transform: none; }
.site-header { padding-top: 40px; }
.masthead {
  font-size: clamp(28px, 10.7vw, 174px);
  font-weight: 800;
  line-height: .91;
  letter-spacing: -.07em;
  text-transform: uppercase;
  white-space: nowrap;
}
.header-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  margin-top: 25px;
  padding-block: 8px 14px;
  border-bottom: 1px solid var(--rule);
}
.provenance, .label, .footer-label, .footer-bottom {
  font-size: 12px;
}
.provenance { color: var(--muted); }
.label { text-transform: uppercase; letter-spacing: .08em; }
.main-nav { display: flex; gap: 30px; }
.main-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 14px;
}
.current-record {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 56px;
  align-items: center;
  padding-block: 48px 88px;
}
.record-art img { width: 100%; aspect-ratio: 1; object-fit: contain; }
.record-copy {
  width: 100%;
  max-width: 540px;
  margin-inline: auto;
  padding-block: 24px;
  text-align: center;
}
.record-copy h2 {
  font-size: clamp(42px, 5.2vw, 80px);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -.055em;
  margin-top: 24px;
}
.feature { margin-top: 24px; font-size: 18px; }
.record-credits { margin-top: 28px; color: var(--muted); font-size: 14px; }
.button {
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
  gap: 44px;
  min-height: 56px;
  padding: 16px 24px;
  background: var(--stone);
  color: var(--canvas);
  font-size: 16px;
  margin-top: 36px;
}
.button:hover { background: #d4d5cb; text-decoration: none; }
.button:focus-visible { outline-offset: 5px; }
.text-link {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  min-height: 44px;
  border-bottom: 1px solid var(--stone);
  font-size: 14px;
}
.text-link:hover { text-decoration: none; border-bottom-width: 2px; }
.story-route { display: flex; width: fit-content; margin-inline: auto; margin-top: 18px; border-bottom: 0; }
.story-route:hover { text-decoration: underline; }
.archive { border-top: 1px solid var(--rule); padding-block: 32px 88px; }
.archive-grid {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 64px;
  align-items: center;
  margin-top: 32px;
}
.archive-art { width: 300px; }
.archive-art img { width: 100%; aspect-ratio: 1; object-fit: contain; }
.archive-copy { max-width: 660px; }
.archive-copy h2, .footer-intro h2 {
  font-size: clamp(38px, 4.2vw, 60px);
  line-height: 1.06;
  font-weight: 600;
  letter-spacing: -.05em;
}
.archive-lead { font-size: 22px; line-height: 1.35; margin-top: 20px; letter-spacing: -.02em; }
.body-copy { max-width: 620px; }
.archive-copy .body-copy { margin-top: 20px; color: var(--muted); max-width: 560px; }
.archive-copy .text-link { margin-top: 20px; }
.story { border-top: 1px solid var(--rule); padding-block: 48px 88px; }
.story-grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: 56px;
}
.story-grid > .label { padding-top: 8px; }
.story-copy h2 {
  font-size: clamp(38px, 4.6vw, 68px);
  line-height: 1.04;
  font-weight: 600;
  letter-spacing: -.05em;
}
.story-copy .body-copy { margin-top: 28px; }
.story-copy .text-link { margin-top: 24px; }
.site-footer { border-top: 1px solid var(--rule); padding-block: 48px 24px; }
.footer-main {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 72px;
}
.footer-intro h2 { margin-top: 24px; }
.footer-intro > p:last-child { margin-top: 20px; color: var(--muted); max-width: 370px; }
.footer-links { align-self: end; }
.footer-links > a {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr);
  gap: 20px;
  align-items: center;
  min-height: 64px;
  border-bottom: 1px solid var(--rule);
  padding-block: 10px;
}
.footer-links > a:first-child { border-top: 1px solid var(--rule); }
.footer-label { color: var(--muted); }
.footer-value { display: flex; justify-content: space-between; gap: 18px; overflow-wrap: anywhere; }
.footer-value > span[aria-hidden] { flex-shrink: 0; }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  border-top: 1px solid var(--rule);
  padding-top: 16px;
  margin-top: 64px;
  color: var(--muted);
}
.footer-bottom a { display: inline-flex; align-items: center; min-height: 44px; gap: 20px; }

@media (max-width: 1100px) and (min-width: 801px) {
  .current-record { gap: 36px; padding-bottom: 72px; }
  .record-copy h2 { font-size: 48px; }
  .record-credits { font-size: 14px; }
  .record-copy .label { font-size: 12px; }
  .archive-grid { gap: 48px; }
  .footer-main { gap: 48px; }
  .footer-links > a { grid-template-columns: 52px minmax(0, 1fr); gap: 12px; }
  .footer-value { font-size: 14px; }
}

@media (max-width: 800px) {
  :root { --gutter: max(20px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px)); }
  html { scroll-padding-top: 24px; }
  .site-header { padding-top: max(28px, env(safe-area-inset-top, 0px)); }
  .masthead { font-size: clamp(28px, 10.7vw, 88px); line-height: 1; }
  .header-line { display: block; margin-top: 17px; padding-block: 0 10px; }
  .main-nav { gap: 0 24px; flex-wrap: wrap; margin-top: 9px; }
  .main-nav a { font-size: 13px; }
  .current-record { grid-template-columns: 1fr; gap: 28px; padding-block: 28px 48px; }
  .record-copy { max-width: 620px; padding-block: 0; }
  .record-copy h2 { font-size: clamp(32px, 9.3vw, 64px); margin-top: 18px; }
  .feature { font-size: 18px; margin-top: 18px; }
  .record-credits { margin-top: 20px; font-size: 14px; }
  .button { width: 100%; min-height: 56px; margin-top: 20px; }
  .story-route { margin-top: 14px; }
  .archive { padding-block: 24px 48px; }
  .archive-grid { grid-template-columns: 1fr; gap: 26px; margin-top: 24px; }
  .archive-art { width: min(260px, 100%); }
  .archive-copy h2 { font-size: clamp(30px, 8.2vw, 42px); }
  .archive-lead { font-size: 22px; margin-top: 18px; }
  .archive-copy .body-copy { margin-top: 18px; }
  .archive-copy .text-link { margin-top: 18px; }
  .story { padding-block: 24px 48px; }
  .story-grid { grid-template-columns: 1fr; gap: 24px; }
  .story-grid > .label { padding-top: 0; }
  .story-copy h2 { font-size: clamp(28px, 8vw, 56px); }
  .story-copy .body-copy { margin-top: 24px; }
  .story-copy .text-link { margin-top: 20px; }
  .site-footer { padding-block: 24px max(20px, env(safe-area-inset-bottom, 0px)); }
  .footer-main { grid-template-columns: 1fr; gap: 28px; }
  .footer-intro h2 { font-size: clamp(30px, 8.2vw, 42px); margin-top: 20px; }
  .footer-intro > p:last-child { margin-top: 18px; }
  .footer-links > a { grid-template-columns: 44px minmax(0, 1fr); gap: 12px; }
  .footer-value { font-size: 14px; gap: 8px; }
  .footer-bottom { display: grid; grid-template-columns: 1fr; align-items: start; gap: 6px; margin-top: 36px; }
  .footer-bottom a { width: fit-content; margin-top: 4px; }
}

@media (max-width: 350px) {
  .masthead { font-size: 10.4vw; }
  .main-nav { gap: 0 18px; }
  .main-nav a { font-size: 12px; }
  .record-copy h2 { font-size: 32px; }
  .footer-links > a { grid-template-columns: 1fr; gap: 2px; padding-block: 12px; }
}

@media (max-width: 700px) {
  .site-header, .record-copy, .section-heading, .archive-copy,
  .story-grid, .footer-intro, .footer-links, .footer-bottom {
    text-align: center;
  }
  .main-nav { justify-content: center; }
  .record-copy { width: 100%; margin-inline: auto; }
  .record-copy .button { justify-content: center; gap: 18px; }
  .text-link { justify-content: center; gap: 14px; }
  .story-route { margin-inline: auto; }
  .archive-art, .archive-copy { margin-inline: auto; }
  .archive-copy { width: 100%; }
  .archive-copy .body-copy, .story-copy .body-copy,
  .footer-intro > p:last-child {
    max-width: 38ch;
    margin-inline: auto;
  }
  .footer-links > a {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 2px;
    padding-block: 12px;
  }
  .footer-value { justify-content: center; gap: 8px; }
  .footer-bottom { justify-items: center; }
  .footer-bottom a { justify-content: center; gap: 12px; }
}

@media (min-width: 701px) and (max-width: 800px) {
  .current-record {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 32px;
  }
  .record-copy h2 { font-size: 44px; }
  .record-copy .button { width: fit-content; gap: 22px; }
}

@media (max-width: 700px) and (max-height: 740px) {
  .site-header { padding-top: max(20px, env(safe-area-inset-top, 0px)); }
  .current-record { padding-top: 24px; gap: 20px; }
  .record-art {
    width: min(100%, max(180px, calc(100svh - 420px)));
    margin-inline: auto;
  }
  .record-copy h2 { margin-top: 14px; }
  .feature { margin-top: 14px; }
  .record-copy .button { margin-top: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}