.archive {
  display: grid;
  grid-template-columns: minmax(260px, .75fr) minmax(0, 1.6fr);
  gap: clamp(42px, 7vw, 110px);
  padding: clamp(85px, 11vw, 155px) clamp(24px, 6vw, 90px);
  background: #080b12;
}
.archive-intro { position: sticky; top: 40px; align-self: start; }
.archive-intro h2 { font-size: clamp(2.3rem, 4.7vw, 4.5rem); }
.archive-intro > p:last-child { max-width: 430px; margin-top: 28px; color: var(--muted); font-size: 1.08rem; }
.archive-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.archive-grid figure { position: relative; margin: 0; overflow: hidden; background: #111722; border: 1px solid var(--line); aspect-ratio: 1; }
.archive-grid img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .55s ease, filter .55s ease; }
.archive-grid figcaption { position: absolute; inset: auto 0 0; padding: 60px 22px 20px; background: linear-gradient(transparent, #05070bea); display: flex; flex-direction: column; }
.archive-grid span { font: 500 1.25rem Cinzel, Georgia, serif; }
.archive-grid small { color: var(--gold); text-transform: uppercase; letter-spacing: .13em; }
.archive-grid figure:hover img { transform: scale(1.035); filter: saturate(1.08); }
.archive-grid .archive-wide { grid-column: 1 / -1; aspect-ratio: 3 / 2; }
.archive-grid .archive-wide img { object-fit: contain; background: #f4f1e9; }
@media (max-width: 760px) {
  .archive { grid-template-columns: 1fr; }
  .archive-intro { position: static; }
  .archive-grid { gap: 10px; }
  .archive-grid figcaption { padding: 45px 13px 12px; }
  .archive-grid span { font-size: .98rem; }
  .archive-grid small { font-size: .66rem; }
  .archive-grid .archive-wide { aspect-ratio: 3 / 2; }
}
@media (prefers-reduced-motion: reduce) { .archive-grid img { transition: none; } }

.concepts { padding: clamp(85px, 10vw, 145px) clamp(24px, 6vw, 90px); background: #0e131d; border-top: 1px solid var(--line); }
.concept-head { display: grid; grid-template-columns: minmax(220px, .65fr) 1.35fr; column-gap: clamp(40px, 7vw, 110px); margin-bottom: 52px; }
.concept-head .label { grid-column: 1; }
.concept-head h2 { grid-column: 1 / -1; max-width: 1050px; }
.concept-head > p:last-child { grid-column: 2; max-width: 620px; margin: 22px 0 0; color: var(--muted); font-size: 1.08rem; }
.concept-grid { columns: 4 220px; column-gap: 16px; }
.concept-grid figure { position: relative; break-inside: avoid; margin: 0 0 16px; overflow: hidden; background: #080b12; border: 1px solid var(--line); }
.concept-grid img { display: block; width: 100%; height: auto; transition: transform .5s ease, filter .5s ease; }
.concept-grid figcaption { position: absolute; inset: auto 0 0; padding: 54px 16px 14px; background: linear-gradient(transparent, #05070be8); font: 500 1rem Cinzel, Georgia, serif; letter-spacing: .03em; }
.concept-grid figure:hover img { transform: scale(1.025); filter: saturate(1.08); }
@media (max-width: 760px) {
  .concept-head { grid-template-columns: 1fr; }
  .concept-head .label, .concept-head h2, .concept-head > p:last-child { grid-column: 1; }
  .concept-grid { columns: 2 140px; column-gap: 10px; }
  .concept-grid figure { margin-bottom: 10px; }
  .concept-grid figcaption { padding: 42px 10px 10px; font-size: .78rem; }
}
@media (prefers-reduced-motion: reduce) { .concept-grid img { transition: none; } }