.site-head { min-height: 90px; display: grid; grid-template-columns: 1fr auto 1fr; gap: 35px; align-items: center; border-bottom: 1px solid var(--ink); }
.identity { display: flex; gap: 12px; align-items: baseline; }
.identity .site-wordmark { font: 700 1.5rem var(--display); letter-spacing: -.02em; }
.identity small { color: var(--muted); font: .55rem var(--mono); letter-spacing: .04em; text-transform: uppercase; }
.site-head nav { display: flex; gap: clamp(18px, 2.8vw, 38px); }
.site-head nav a { min-height: 44px; display: inline-flex; align-items: center; font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; }
.site-head nav a:hover { color: var(--signal); }
.head-aside { justify-self: end; margin: 0; color: var(--muted); font: .54rem/1.5 var(--mono); letter-spacing: .04em; text-align: right; text-transform: uppercase; }

.home-hero { position: relative; width: var(--page); min-height: min(860px, calc(100vh - 90px)); margin-inline: auto; padding-block: clamp(65px, 8vw, 115px); display: grid; grid-template-columns: minmax(360px, .9fr) minmax(420px, 1.15fr) minmax(170px, .42fr); grid-template-rows: auto auto; gap: clamp(25px, 4vw, 60px); align-items: start; }
.hero-copy { position: relative; z-index: 2; grid-column: 1 / 3; grid-row: 1; padding-top: clamp(18px, 3vw, 44px); pointer-events: none; }
.hero-copy [contenteditable] { pointer-events: auto; }
.home-hero h1 { max-width: 1050px; margin: 18px 0 34px; font: 400 clamp(4.4rem, 8.1vw, 9rem)/.88 var(--display); letter-spacing: -.065em; text-wrap: balance; }
.hero-intro { width: min(49ch, 48%); margin: 0; font: 1.02rem/1.62 var(--display); }
.hero-primary { grid-column: 2; grid-row: 1 / 3; align-self: end; margin-top: clamp(230px, 24vw, 330px); }
.hero-primary img { aspect-ratio: 4 / 5; height: min(60vh, 630px); object-fit: cover; filter: saturate(.8) contrast(1.04); }
.hero-secondary { grid-column: 3; grid-row: 1; margin-top: clamp(265px, 29vw, 390px); }
.hero-secondary img { aspect-ratio: 3 / 4; object-fit: cover; filter: saturate(.72) contrast(1.06); }
.hero-note { grid-column: 1; grid-row: 2; align-self: end; max-width: 260px; margin: 0 0 28px; padding-top: 14px; border-top: 3px solid var(--signal); font: italic 1.05rem/1.35 var(--display); }
.hero-note b { display: block; margin-bottom: 15px; color: var(--signal); font: .54rem var(--mono); letter-spacing: .05em; text-transform: uppercase; }

.feature { padding: clamp(95px, 11vw, 160px) max(4vw, calc((100vw - 1320px) / 2)); display: grid; grid-template-columns: minmax(450px, 1.2fr) minmax(340px, .8fr); gap: clamp(55px, 9vw, 135px); align-items: center; background: var(--ink); color: var(--paper); }
.feature-image img { aspect-ratio: 4 / 3; object-fit: cover; filter: saturate(.62) contrast(1.07); }
.feature-image figcaption { color: #bdc9c2; }
.feature-copy h2 { margin: 18px 0 30px; font: 400 clamp(3.4rem, 6vw, 6.6rem)/.91 var(--display); letter-spacing: -.055em; }
.feature-copy h2 a { text-decoration: none; }
.feature-copy h2 a:hover { color: var(--sand); }
.feature-copy > p:not(.section-label) { max-width: 50ch; color: #d5ddd7; font: 1rem/1.62 var(--display); }

.mosaic { padding: clamp(100px, 13vw, 190px) max(4vw, calc((100vw - 1320px) / 2)); background: var(--paper-deep); }
.mosaic > header { display: grid; grid-template-columns: 160px minmax(0, 700px) 1fr; gap: 42px; align-items: end; margin-bottom: clamp(60px, 8vw, 110px); }
.mosaic h2 { margin: 0; font: 400 clamp(3.4rem, 6.5vw, 7rem)/.9 var(--display); letter-spacing: -.06em; }
.mosaic > header > p:last-child { justify-self: end; max-width: 38ch; margin: 0; color: var(--muted); font: italic .9rem/1.55 var(--display); }
.mosaic-grid { display: grid; grid-template-columns: 1.15fr .56fr .76fr; gap: clamp(14px, 2vw, 28px); align-items: start; }
.mosaic-grid img { object-fit: cover; filter: saturate(.78) contrast(1.04); }
.mosaic-1 img { aspect-ratio: 4 / 5; }
.mosaic-2 { margin-top: 23%; }
.mosaic-2 img { aspect-ratio: 3 / 4; }
.mosaic-3 { margin-top: 7%; }
.mosaic-3 img { aspect-ratio: 4 / 3; }
.mosaic-link { margin: 55px 0 0 calc(58% + 15px); }

.recent { width: var(--page); margin-inline: auto; padding-block: clamp(100px, 13vw, 180px); }
.recent > header { display: grid; grid-template-columns: 190px 1fr; gap: 35px; align-items: end; margin-bottom: 70px; }
.recent h2 { max-width: 900px; margin: 0; font: 400 clamp(3.2rem, 6vw, 6.5rem)/.92 var(--display); letter-spacing: -.055em; }
.recent ol { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ink); }
.recent li { border-bottom: 1px solid var(--rule); }
.recent li a { min-height: 104px; display: grid; grid-template-columns: 75px 185px minmax(0, 1fr) 65px; gap: 24px; align-items: center; text-decoration: none; }
.card-code, .card-kind, .recent time { color: var(--muted); font: .55rem var(--mono); letter-spacing: .04em; text-transform: uppercase; }
.card-code { color: var(--signal); }
.recent b { font: 400 clamp(1.25rem, 2.1vw, 2.1rem)/1.1 var(--display); transition: transform 160ms cubic-bezier(.22,1,.36,1); }
.recent time { text-align: right; }
.recent li a:hover b { color: var(--signal); transform: translateX(7px); }

.side-quest { padding: clamp(95px, 12vw, 175px) max(4vw, calc((100vw - 1320px) / 2)); display: grid; grid-template-columns: minmax(380px, .75fr) minmax(460px, 1.15fr) minmax(150px, .35fr); gap: clamp(35px, 6vw, 85px); align-items: end; background: var(--sand); }
.quest-copy h2 { margin: 18px 0 28px; font: 400 clamp(3.3rem, 6vw, 6.5rem)/.91 var(--display); letter-spacing: -.06em; }
.quest-copy > p:not(.section-label) { max-width: 43ch; font: .96rem/1.6 var(--display); }
.quest-image img { aspect-ratio: 4 / 5; object-fit: cover; filter: saturate(.7); }
.side-quest aside { margin-bottom: 14px; padding-top: 14px; border-top: 3px solid var(--signal); font: italic .82rem/1.45 var(--display); }

.site-footer { display: grid; grid-template-columns: minmax(0, 650px) auto 1fr; gap: clamp(50px, 8vw, 120px); align-items: end; background: var(--paper); }
.footer-copy p { font-size: clamp(1.45rem, 2.7vw, 2.7rem); line-height: 1.2; }
.footer-copy > a { color: var(--signal); font-size: .73rem; font-weight: 700; }
.colophon { justify-self: end; max-width: 22ch; text-align: right; }

@keyframes arrive { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }
.hero-copy { animation: arrive 500ms cubic-bezier(.22,1,.36,1) both; }
.hero-primary { animation: arrive 520ms 80ms cubic-bezier(.22,1,.36,1) both; }
.hero-secondary { animation: arrive 520ms 150ms cubic-bezier(.22,1,.36,1) both; }

@media (max-width: 950px) {
  .site-head { grid-template-columns: 1fr auto; }
  .head-aside { display: none; }
  .home-hero { grid-template-columns: .85fr 1.15fr; grid-template-rows: auto auto auto; }
  .hero-copy { grid-column: 1 / -1; }
  .home-hero h1 { font-size: clamp(4rem, 10vw, 7rem); }
  .hero-intro { width: 58%; }
  .hero-primary { grid-column: 2; grid-row: 2 / 4; margin-top: 0; }
  .hero-secondary { grid-column: 1; grid-row: 2; margin-top: 70px; }
  .hero-note { grid-column: 1; grid-row: 3; }
  .feature { grid-template-columns: 1fr; }
  .feature-image { max-width: 78%; }
  .mosaic > header { grid-template-columns: 1fr; }
  .mosaic > header > p:last-child { justify-self: start; }
  .side-quest { grid-template-columns: 1fr 1fr; }
  .side-quest aside { grid-column: 1; }
  .site-footer { grid-template-columns: 1fr 1fr; }
  .colophon { grid-column: 1 / -1; justify-self: start; text-align: left; }
}

@media (max-width: 650px) {
  .site-head { min-height: 74px; }
  .site-head nav a:not(:first-child), .identity small { display: none; }
  .home-hero { min-height: auto; padding-block: 55px 80px; grid-template-columns: 1fr 1fr; gap: 24px 14px; }
  .home-hero h1 { font-size: clamp(3.5rem, 17vw, 5.6rem); }
  .hero-intro { width: 100%; }
  .hero-primary img { height: auto; }
  .hero-secondary { margin-top: 45px; }
  .hero-note { width: 90%; }
  .feature-image { max-width: 100%; }
  .mosaic-grid { grid-template-columns: 1.15fr .85fr; }
  .mosaic-3 { grid-column: 1 / -1; width: 72%; margin: 20px 0 0 auto; }
  .mosaic-link { margin-left: 0; }
  .recent > header { grid-template-columns: 1fr; }
  .recent li a { min-height: 120px; grid-template-columns: 42px 1fr 48px; gap: 12px; }
  .card-kind { grid-column: 2; grid-row: 2; }
  .recent time { grid-column: 3; grid-row: 1; }
  .side-quest { grid-template-columns: 1fr; }
  .quest-image { width: 82%; margin-left: auto; }
  .side-quest aside { grid-column: 1; width: 65%; }
  .site-footer { grid-template-columns: 1fr; }
}