:root {
  --ink: #171514;
  --paper: #f4efe5;
  --paper-deep: #e8dece;
  --white: #fffdf8;
  --berry: #8f2448;
  --ochre: #d89b2b;
  --forest: #24463c;
  --blue: #405f84;
  --line: rgba(23, 21, 20, .22);
  --display: "Italiana", "Times New Roman", serif;
  --sans: "Instrument Sans", system-ui, sans-serif;
  --mono: "Roboto Mono", ui-monospace, monospace;
  --page: min(1240px, calc(100vw - 40px));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--sans); line-height: 1.7; }
body::before { content: ""; display: block; height: 7px; background: linear-gradient(90deg, var(--berry) 0 31%, var(--ochre) 31% 53%, var(--forest) 53% 77%, var(--blue) 77%); }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: .08em; text-underline-offset: .18em; }
a:hover { color: var(--berry); }
.skip-link { position: absolute; z-index: 100; left: 1rem; top: -6rem; padding: .7rem 1rem; background: var(--white); border: 2px solid var(--ink); }
.skip-link:focus { top: 1rem; }

.site-header { position: relative; z-index: 10; background: rgba(244, 239, 229, .96); border-bottom: 1px solid var(--line); }
.site-header.is-scrolled { box-shadow: 0 8px 30px rgba(23, 21, 20, .08); }
.nav { min-width: 0; }
.nav__inner { width: var(--page); min-width: 0; margin: 0 auto; padding: 1rem 0; display: flex; align-items: center; justify-content: space-between; gap: 1.2rem 2rem; flex-wrap: wrap; }
.wordmark { min-width: 0; display: inline-flex; align-items: center; gap: .8rem; text-decoration: none; }
.wordmark__monogram { width: 2.75rem; height: 2.75rem; display: grid; place-items: center; flex: 0 0 auto; color: var(--paper); background: var(--ink); border-radius: 50%; font-family: var(--display); font-size: .92rem; letter-spacing: .08em; }
.wordmark__text { min-width: 0; font-family: var(--display); font-size: clamp(1.05rem, 2.2vw, 1.45rem); line-height: 1.05; }
.wordmark__text small { display: block; margin-top: .28rem; font-family: var(--mono); font-size: .55rem; line-height: 1.2; letter-spacing: .08em; text-transform: uppercase; }
.nav__links { min-width: 0; display: flex; flex: 1 1 620px; align-items: center; justify-content: flex-end; gap: .45rem 1.15rem; flex-wrap: wrap; }
.nav__links a { padding: .35rem 0; font-family: var(--mono); font-size: .68rem; letter-spacing: .04em; text-decoration: none; text-transform: uppercase; border-bottom: 2px solid transparent; }
.nav__links a:hover, .nav__links a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--berry); }

.hero { overflow: hidden; border-bottom: 1px solid var(--line); }
.hero__grid { width: var(--page); min-width: 0; margin: 0 auto; padding: clamp(3rem, 7vw, 7rem) 0; display: grid; grid-template-columns: minmax(0, .84fr) minmax(320px, 1.16fr); align-items: center; gap: clamp(2.2rem, 6vw, 7rem); }
.hero__copy { min-width: 0; }
.eyebrow { margin: 0 0 2rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-family: var(--mono); font-size: .64rem; letter-spacing: .11em; text-transform: uppercase; }
.hero h1 { max-width: 14ch; margin: 0; font-family: var(--display); font-size: clamp(3.1rem, 7.3vw, 7.8rem); font-weight: 400; line-height: .92; letter-spacing: -.045em; }
.hero__lead { max-width: 61ch; margin-top: 2rem; font-size: clamp(1rem, 1.6vw, 1.18rem); }
.hero__lead p { margin: 0; }
.read-cue { display: inline-flex; gap: 2.8rem; align-items: center; margin-top: 2rem; padding: .65rem 0; font-family: var(--mono); font-size: .7rem; letter-spacing: .09em; text-transform: uppercase; text-decoration: none; border-bottom: 1px solid var(--ink); }
.read-cue span { color: var(--berry); font-size: 1rem; }
.hero__figure { position: relative; margin: 0; padding: clamp(.55rem, 1.4vw, 1.15rem); background: var(--white); border: 1px solid var(--ink); transform: rotate(1.2deg); box-shadow: 24px 30px 0 var(--paper-deep); }
.hero__figure img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; filter: saturate(.88) contrast(1.04); }
.hero__figure figcaption { display: flex; justify-content: space-between; gap: 1rem; margin-top: .7rem; font-family: var(--mono); font-size: .58rem; line-height: 1.45; text-transform: uppercase; }
.hero__figure figcaption span { color: rgba(23, 21, 20, .62); white-space: nowrap; }
.frame-corner { position: absolute; z-index: 2; width: 2.6rem; height: 2.6rem; pointer-events: none; }
.frame-corner--a { top: -.45rem; left: -.45rem; border-top: 4px solid var(--berry); border-left: 4px solid var(--berry); }
.frame-corner--b { right: -.45rem; bottom: -.45rem; border-right: 4px solid var(--ochre); border-bottom: 4px solid var(--ochre); }

.hero--text .hero__grid { min-height: 680px; }
.hero__composition { position: relative; min-height: 450px; background: var(--ink); overflow: hidden; }
.composition__line { position: absolute; width: 140%; height: 1px; left: -20%; top: 50%; background: var(--paper); transform: rotate(-33deg); }
.composition__disc { position: absolute; width: min(28vw, 280px); aspect-ratio: 1; right: 12%; top: 12%; border-radius: 50%; background: var(--berry); }
.composition__square { position: absolute; width: min(20vw, 200px); aspect-ratio: 1; left: 10%; bottom: 10%; background: var(--ochre); mix-blend-mode: screen; }
.composition__label { position: absolute; right: 1.5rem; bottom: 1.2rem; color: var(--paper); font-family: var(--mono); font-size: .7rem; letter-spacing: .12em; }

.story-wrap { width: min(1040px, calc(100vw - 40px)); min-width: 0; margin: 0 auto; padding: clamp(4rem, 9vw, 8rem) 0; display: grid; grid-template-columns: minmax(180px, .32fr) minmax(0, 1fr); gap: clamp(2.2rem, 7vw, 7rem); align-items: start; }
.record-key { position: sticky; top: 2rem; padding-top: 1rem; border-top: 5px solid var(--ink); }
.record-key__number { margin: 0 0 1.8rem; color: var(--berry); font-family: var(--display); font-size: 4.5rem; line-height: 1; }
.record-key h2 { margin: 0 0 .8rem; font-family: var(--mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; }
.record-key dl { margin: 0; font-size: .76rem; line-height: 1.45; }
.record-key dl div { padding: .65rem 0; border-top: 1px solid var(--line); }
.record-key dt { font-family: var(--mono); font-size: .58rem; letter-spacing: .08em; text-transform: uppercase; }
.record-key dd { margin: .18rem 0 0; }
.record-key > p:last-child { margin-top: 1.3rem; font-size: .74rem; line-height: 1.55; }
.story { min-width: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.05rem, 1.6vw, 1.19rem); }
.story > *:first-child { margin-top: 0; }
.story h2 { max-width: 18ch; margin: 3.7rem 0 1.2rem; font-family: var(--display); font-size: clamp(2.05rem, 4.2vw, 3.7rem); font-weight: 400; line-height: 1.03; letter-spacing: -.025em; }
.story h2::before { content: ""; display: block; width: 2.5rem; height: .33rem; margin-bottom: 1rem; background: var(--ochre); }
.story h3 { margin-top: 2.4rem; font-family: var(--sans); font-size: 1.2rem; }
.story p { margin: 0 0 1.35rem; }
.story a { color: var(--berry); font-weight: 600; }
.story strong { font-family: var(--sans); font-size: .94em; }

.next-room { width: var(--page); margin: 0 auto clamp(4rem, 8vw, 7rem); padding-top: 1.2rem; border-top: 5px solid var(--ink); }
.next-room .eyebrow { margin-bottom: 1rem; }
.next-room__links { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--ink); }
.next-room__links a { min-width: 0; min-height: 135px; padding: 1.2rem; display: flex; flex-direction: column; justify-content: space-between; font-family: var(--display); font-size: clamp(1.25rem, 2.2vw, 2rem); line-height: 1.05; text-decoration: none; border-right: 1px solid var(--ink); transition: background .2s, color .2s; }
.next-room__links a:last-child { border-right: 0; }
.next-room__links a:hover { color: var(--paper); background: var(--berry); }
.next-room__links span { font-family: var(--mono); font-size: .58rem; }

.footer { color: var(--paper); background: var(--ink); padding: clamp(3rem, 7vw, 6rem) max(20px, calc((100vw - 1240px) / 2)); }
.footer__lead { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.4rem; align-items: center; padding-bottom: 2.5rem; border-bottom: 1px solid rgba(244, 239, 229, .32); }
.footer__mark { width: 4.5rem; height: 4.5rem; margin: 0; display: grid; place-items: center; border: 1px solid var(--paper); border-radius: 50%; font-family: var(--display); }
.footer__title { margin: 0; font-family: var(--display); font-size: clamp(1.7rem, 4vw, 3.2rem); line-height: 1; }
.footer__lead div > p:last-child { margin: .55rem 0 0; font-family: var(--mono); font-size: .62rem; letter-spacing: .09em; text-transform: uppercase; }
.footer__nav { min-width: 0; padding: 2.5rem 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem 2rem; }
.footer__nav a { min-width: 0; color: var(--paper); font-size: .85rem; text-decoration-color: rgba(244, 239, 229, .45); }
.footer__nav a:hover { color: var(--ochre); }
.footer__fine { margin: 0; font-family: var(--mono); font-size: .58rem; letter-spacing: .05em; text-transform: uppercase; }

.error-main { width: var(--page); min-height: 66vh; margin: 0 auto; padding: clamp(4rem, 9vw, 9rem) 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, .7fr); gap: 4rem; align-items: center; }
.error-main h1 { margin: 0; font-family: var(--display); font-size: clamp(4rem, 12vw, 11rem); font-weight: 400; line-height: .8; }
.error-main h2 { max-width: 16ch; font-family: var(--display); font-size: clamp(2rem, 4vw, 3.5rem); font-weight: 400; line-height: 1; }
.error-main p { max-width: 52ch; }
.button { display: inline-block; margin-top: 1rem; padding: .75rem 1.1rem; color: var(--paper); background: var(--ink); font-family: var(--mono); font-size: .67rem; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; border: 1px solid var(--ink); }
.button:hover { color: var(--ink); background: var(--ochre); }
.error-art { position: relative; min-height: 340px; border: 1px solid var(--ink); background: var(--white); }
.error-art::before, .error-art::after { content: ""; position: absolute; }
.error-art::before { width: 45%; aspect-ratio: 1; left: 12%; top: 13%; background: var(--berry); border-radius: 50%; }
.error-art::after { width: 50%; height: 26%; right: 9%; bottom: 15%; background: var(--forest); transform: rotate(-8deg); }

@media (max-width: 920px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero h1 { max-width: 16ch; }
  .hero__figure { width: min(760px, 95%); justify-self: center; transform: rotate(.6deg); }
  .hero--text .hero__grid { min-height: auto; }
  .story-wrap { grid-template-columns: 1fr; }
  .record-key { position: static; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .2rem 1.5rem; }
  .record-key__number { grid-row: 1 / 4; }
  .record-key dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
  .record-key > p:last-child { grid-column: 2; }
  .next-room__links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .next-room__links a:nth-child(2) { border-right: 0; }
  .next-room__links a:nth-child(-n+2) { border-bottom: 1px solid var(--ink); }
}

@media (max-width: 620px) {
  :root { --page: min(100% - 28px, 1240px); }
  .nav__inner { align-items: flex-start; }
  .nav__links { flex-basis: 100%; justify-content: flex-start; gap: .25rem 1rem; }
  .hero__grid { padding: 3rem 0 4rem; }
  .hero h1 { font-size: clamp(2.8rem, 14vw, 4.8rem); }
  .hero__figure { width: calc(100% - 12px); box-shadow: 12px 15px 0 var(--paper-deep); }
  .hero__figure figcaption { display: block; }
  .hero__figure figcaption span { display: block; margin-top: .25rem; }
  .hero__composition { min-height: 310px; }
  .story-wrap { width: calc(100vw - 28px); padding: 4rem 0; }
  .record-key { display: block; }
  .record-key dl { grid-template-columns: 1fr; }
  .record-key__number { font-size: 3.5rem; }
  .record-key > p:last-child { grid-column: auto; }
  .next-room__links { grid-template-columns: 1fr; }
  .next-room__links a { min-height: 105px; border-right: 0; border-bottom: 1px solid var(--ink); }
  .next-room__links a:last-child { border-bottom: 0; }
  .footer__nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .error-main { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}