/* =========================================================
   rakushki2 — museum-grade design tokens
   Phillips/MoMA эстетика: pure white, серьёзная типографика,
   контрастные акценты, плотная сетка.
   ========================================================= */

:root {
  /* Palette — нейтральная, музейная */
  --ink: #0d0d0e;
  --ink-soft: #2b2b2e;
  --ink-mute: #5b5b62;
  --ink-faint: #8e8e96;
  --rule: #d9d9dd;
  --rule-soft: #ecedf0;
  --paper: #fdfdfb;
  --paper-warm: #f6f3ec;
  --paper-cool: #f1f3f6;

  /* Acent — глубокий «коралл» в очень малых дозах + sea-blue */
  --accent: #8a2a1c;
  --accent-soft: #b54a3a;
  --sea: #1a3a52;
  --sea-soft: #335a7a;
  --moss: #45624a;

  /* Legal status */
  --legal-allowed: #2c6a3a;
  --legal-prohibited: #8a2a1c;
  --legal-pending: #8a6b1c;

  /* Type — Cormorant + Inter + JetBrains Mono */
  --ff-display: "Cormorant Garamond", "Playfair Display", Georgia, serif;
  --ff-text: "Inter", "Helvetica Neue", system-ui, sans-serif;
  --ff-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;

  /* Scale */
  --fs-mono: 12px;
  --fs-meta: 13px;
  --fs-body: 16px;
  --fs-body-lg: 18px;
  --fs-h4: 20px;
  --fs-h3: 24px;
  --fs-h2: 32px;
  --fs-h1: 56px;
  --fs-display: 88px;

  --ls-mono: 0.08em;
  --ls-tight: -0.01em;

  /* Layout */
  --container: 1280px;
  --container-narrow: 920px;
  --gutter: 24px;

  --radius-s: 2px;
  --radius-m: 4px;
  --radius-l: 8px;

  --transition: 200ms ease-out;
}

@media (max-width: 920px) {
  :root {
    --fs-h1: 40px;
    --fs-display: 56px;
    --fs-h2: 26px;
    --gutter: 16px;
  }
}

/* ---------- reset ---------- */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; }
a { color: inherit; text-underline-offset: 2px; }
[hidden] { display: none !important; }

html {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--ff-text);
  font-size: var(--fs-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main { flex: 1; }

/* ---------- type ---------- */

h1, h2, h3, h4 {
  font-family: var(--ff-display);
  font-weight: 500;
  letter-spacing: var(--ls-tight);
  margin: 0;
  color: var(--ink);
}

h1 { font-size: var(--fs-h1); line-height: 1.05; }
h2 { font-size: var(--fs-h2); line-height: 1.12; }
h3 { font-size: var(--fs-h3); line-height: 1.2; }
h4 { font-size: var(--fs-h4); line-height: 1.25; }

p { margin: 0 0 1em; }
.lede { font-size: var(--fs-body-lg); color: var(--ink-soft); }

.eyebrow {
  font-family: var(--ff-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--ink-mute);
}

.meta {
  font-family: var(--ff-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* ---------- layout ---------- */

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.container--narrow {
  max-width: var(--container-narrow);
}

.rule {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 64px 0;
}

section { padding: 80px 0; }
section.tight { padding: 48px 0; }

@media (max-width: 760px) {
  section { padding: 48px 0; }
}

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  margin-bottom: 40px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--rule);
  flex-wrap: wrap;
}

/* ---------- header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  backdrop-filter: blur(6px);
}

.site-header .container {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  padding-top: 16px;
  padding-bottom: 16px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--ink);
}

.brand-mark {
  width: 28px;
  height: 28px;
  border: 1px solid var(--ink);
  border-radius: 50%;
  position: relative;
}

.brand-mark::after {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: var(--ink);
}

.b-name {
  font-family: var(--ff-display);
  font-size: 18px;
  line-height: 1;
  display: block;
}

.b-sub {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--ink-mute);
}

.nav {
  display: flex;
  gap: 28px;
  justify-content: center;
}

.nav a {
  text-decoration: none;
  color: var(--ink-soft);
  font-size: 14px;
  letter-spacing: 0.02em;
  position: relative;
  padding: 4px 0;
}

.nav a:hover,
.nav a[aria-current="page"] {
  color: var(--ink);
}

.nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 1px;
  background: var(--ink);
}

.lang-switch {
  display: flex;
  gap: 4px;
  font-family: var(--ff-mono);
  font-size: 12px;
  letter-spacing: var(--ls-mono);
}

.lang-switch button {
  background: transparent;
  border: 1px solid var(--rule);
  padding: 6px 10px;
  color: var(--ink-mute);
  border-radius: var(--radius-s);
  transition: var(--transition);
}

.lang-switch button:hover { color: var(--ink); border-color: var(--ink); }
.lang-switch button[aria-pressed="true"] {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

.menu-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--rule);
  padding: 8px 12px;
  border-radius: var(--radius-s);
}

@media (max-width: 920px) {
  .site-header .container { grid-template-columns: auto 1fr auto; }
  .nav {
    position: fixed;
    inset: 64px 0 auto 0;
    background: var(--paper);
    flex-direction: column;
    gap: 0;
    padding: 16px var(--gutter);
    border-bottom: 1px solid var(--rule);
    display: none;
  }
  .nav.is-open { display: flex; }
  .nav a { padding: 14px 0; border-bottom: 1px solid var(--rule-soft); }
  .menu-toggle { display: inline-flex; }
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 22px;
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
  font-size: 14px;
  letter-spacing: 0.02em;
  border: 1px solid var(--ink);
  border-radius: var(--radius-s);
  transition: var(--transition);
}

.btn:hover { background: var(--paper); color: var(--ink); }

.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); }

.btn-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--ink);
  font-size: 14px;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 2px;
}

.btn-link:hover { color: var(--accent); border-color: var(--accent); }

/* ---------- hero ---------- */

.hero {
  padding: 120px 0 80px;
  border-bottom: 1px solid var(--rule);
}

.hero .hero-meta {
  font-family: var(--ff-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--ink-mute);
  display: flex;
  gap: 16px;
  margin-bottom: 32px;
}

.hero .hero-meta .dot { opacity: 0.5; }

.hero h1 {
  font-size: var(--fs-display);
  line-height: 1.02;
  letter-spacing: -0.015em;
  max-width: 11em;
}

.hero h1 em { font-style: italic; color: var(--ink-soft); }

.hero .lede {
  max-width: 38em;
  margin-top: 32px;
  font-size: var(--fs-body-lg);
}

.hero-actions {
  margin-top: 40px;
  display: flex;
  gap: 24px;
  align-items: center;
  flex-wrap: wrap;
}

.counters {
  margin-top: 80px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--rule);
}

.counters > div {
  padding: 24px 0;
  border-right: 1px solid var(--rule);
}

.counters > div:last-child { border-right: 0; }
.counters > div:nth-child(n+2) { padding-left: 24px; }

.counters .num {
  font-family: var(--ff-display);
  font-size: 40px;
  line-height: 1;
  display: block;
  margin-bottom: 8px;
}

.counters .num em { font-style: normal; color: var(--ink-mute); }

.counters .label {
  font-family: var(--ff-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--ink-mute);
}

@media (max-width: 760px) {
  .hero { padding: 64px 0 48px; }
  .counters { grid-template-columns: repeat(2, 1fr); }
  .counters > div:nth-child(2) { border-right: 0; }
  .counters > div:nth-child(3),
  .counters > div:nth-child(4) { border-top: 1px solid var(--rule); }
}

/* ---------- specimen grid ---------- */

.specimen-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 32px 24px;
}

.specimen-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-decoration: none;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid transparent;
  transition: var(--transition);
}

.specimen-card:hover { color: var(--accent); }

.specimen-card .frame {
  background: var(--paper-warm);
  aspect-ratio: 4 / 5;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.specimen-card .frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition);
}

.specimen-card:hover .frame img { transform: scale(1.03); }

.specimen-card .frame.is-empty {
  background:
    repeating-linear-gradient(
      45deg,
      var(--paper-warm) 0 12px,
      var(--paper-cool) 12px 24px
    );
}

.specimen-card .frame.is-empty .placeholder {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--ink-mute);
}

.specimen-card .frame.has-placeholder {
  background: var(--paper-warm);
}

.specimen-card .frame.has-placeholder img {
  object-fit: contain;
  padding: 8%;
  filter: saturate(0.92);
}

.specimen-card .cat {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--ink-mute);
}

.specimen-card .name {
  font-family: var(--ff-display);
  font-size: 22px;
  font-style: italic;
  line-height: 1.15;
}

.specimen-card .name.not-italic { font-style: normal; }

.specimen-card .sub {
  color: var(--ink-mute);
  font-size: 14px;
}

.specimen-card .flags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.flag {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  padding: 3px 7px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-s);
  color: var(--ink-mute);
  white-space: nowrap;
}

.flag--cites { color: var(--accent); border-color: var(--accent); }
.flag--iucn { color: var(--sea); border-color: var(--sea); }
.flag--sale-allowed { color: var(--legal-allowed); border-color: var(--legal-allowed); }
.flag--sale-prohibited { color: var(--legal-prohibited); border-color: var(--legal-prohibited); }
.flag--sale-pending { color: var(--legal-pending); border-color: var(--legal-pending); }
.flag--rank { color: var(--ink-mute); }

/* ---------- catalog layout ---------- */

.catalog-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 48px;
  align-items: start;
}

@media (max-width: 980px) {
  .catalog-layout { grid-template-columns: 1fr; }
}

.facets {
  position: sticky;
  top: 96px;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  padding-right: 8px;
  border-right: 1px solid var(--rule);
  font-size: 14px;
}

@media (max-width: 980px) {
  .facets {
    position: fixed;
    inset: 0;
    background: var(--paper);
    border-right: 0;
    z-index: 60;
    max-height: 100vh;
    padding: 64px var(--gutter) var(--gutter);
    transform: translateX(-100%);
    transition: transform var(--transition);
  }
  .facets.is-open { transform: translateX(0); }
}

.facet-group {
  border-bottom: 1px solid var(--rule);
  padding: 16px 0;
}

.facet-group summary {
  list-style: none;
  cursor: pointer;
  font-family: var(--ff-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--ink);
  padding: 4px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.facet-group summary::-webkit-details-marker { display: none; }
.facet-group summary::after {
  content: "+";
  color: var(--ink-mute);
}
.facet-group[open] summary::after { content: "−"; }

.facet-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}

.facet-option {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  cursor: pointer;
  color: var(--ink-soft);
}

.facet-option input { accent-color: var(--ink); }
.facet-option .count { color: var(--ink-faint); margin-left: auto; font-size: 12px; }
.facet-option:hover { color: var(--ink); }

.facet-range {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.facet-range input {
  width: 100%;
  border: 1px solid var(--rule);
  padding: 8px 10px;
  font-family: var(--ff-mono);
  font-size: var(--fs-mono);
  border-radius: var(--radius-s);
}

.catalog-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.catalog-search {
  flex: 1 1 280px;
  display: flex;
  border: 1px solid var(--rule);
  border-radius: var(--radius-s);
  overflow: hidden;
}

.catalog-search input {
  border: 0;
  padding: 14px 16px;
  font-size: 14px;
  width: 100%;
  background: transparent;
}

.catalog-search input:focus { outline: 1px solid var(--ink); outline-offset: -1px; }

.results-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
  font-family: var(--ff-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--ink-mute);
}

.sort-select {
  border: 1px solid var(--rule);
  padding: 8px 28px 8px 12px;
  font-family: var(--ff-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  background: transparent;
  border-radius: var(--radius-s);
}

.active-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border: 1px solid var(--ink);
  border-radius: var(--radius-s);
  font-size: 12px;
  background: var(--paper);
}

.chip button {
  background: transparent;
  border: 0;
  padding: 0;
  font-size: 14px;
  color: var(--ink-mute);
}

.facets-mobile-toggle {
  display: none;
  border: 1px solid var(--rule);
  padding: 10px 16px;
  background: var(--paper);
  border-radius: var(--radius-s);
}

@media (max-width: 980px) {
  .facets-mobile-toggle { display: inline-flex; }
}

.facets-close {
  display: none;
  position: absolute;
  top: 12px;
  right: var(--gutter);
  border: 0;
  background: transparent;
  font-size: 18px;
}

@media (max-width: 980px) {
  .facets.is-open .facets-close { display: inline-flex; }
}

/* ---------- specimen page ---------- */

.specimen-detail {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 64px;
  padding-top: 48px;
}

@media (max-width: 980px) {
  .specimen-detail { grid-template-columns: 1fr; gap: 32px; }
}

.specimen-gallery {
  background: var(--paper-warm);
  aspect-ratio: 4 / 5;
  position: relative;
  overflow: hidden;
}

.specimen-gallery.is-empty {
  background:
    repeating-linear-gradient(
      45deg,
      var(--paper-warm) 0 14px,
      var(--paper-cool) 14px 28px
    );
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-mute);
}

img.specimen-gallery { width: 100%; height: 100%; object-fit: cover; display: block; }

.specimen-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.specimen-thumbs .spec-thumb {
  width: 64px; height: 64px;
  padding: 0; border: 1px solid var(--rule); background: var(--paper-warm);
  cursor: pointer; overflow: hidden; border-radius: 2px;
}
.specimen-thumbs .spec-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.specimen-thumbs .spec-thumb.active { border-color: var(--ink); }

.specimen-info .crumbs {
  font-family: var(--ff-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 16px;
}

.specimen-info .crumbs a {
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid var(--rule);
}

.specimen-info h1 {
  font-size: var(--fs-h1);
  font-style: italic;
  margin-bottom: 8px;
}

.specimen-info .common {
  font-family: var(--ff-text);
  font-size: var(--fs-body-lg);
  color: var(--ink-soft);
  margin-bottom: 24px;
}

.specimen-info .author {
  font-family: var(--ff-text);
  font-style: normal;
  color: var(--ink-mute);
  font-size: 0.55em;
  margin-left: 8px;
  vertical-align: middle;
}

.kv {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 10px 16px;
  font-size: 14px;
  border-top: 1px solid var(--rule);
  padding-top: 24px;
  margin-top: 24px;
}

.kv dt {
  font-family: var(--ff-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--ink-mute);
  align-self: center;
}

.kv dd { margin: 0; color: var(--ink); }

.tabs {
  margin-top: 48px;
  border-top: 1px solid var(--rule);
}

.tab-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 4px;
  border-bottom: 1px solid var(--rule);
}

.tab-list button {
  background: transparent;
  border: 0;
  padding: 14px 16px;
  font-family: var(--ff-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--ink-mute);
  position: relative;
  white-space: nowrap;
  cursor: pointer;
}

.tab-list button:hover { color: var(--ink-soft); }

.tab-list button[aria-selected="true"] { color: var(--ink); }
.tab-list button[aria-selected="true"]::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--ink);
}

.tab-panel { padding: 32px 0; }

.legal-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  border: 1px solid var(--rule);
  padding: 24px;
  background: var(--paper-warm);
}

@media (max-width: 600px) { .legal-card { grid-template-columns: 1fr; } }

.legal-card .label {
  font-family: var(--ff-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--ink-mute);
}

.legal-card .value { font-size: 16px; }

.sensitive-notice {
  margin-top: 24px;
  padding: 16px 20px;
  background: var(--paper-cool);
  border-left: 3px solid var(--sea);
  font-size: 14px;
  color: var(--ink-soft);
}

/* ---------- footer ---------- */

.site-footer {
  margin-top: 80px;
  border-top: 1px solid var(--rule);
  padding: 64px 0 24px;
  background: var(--paper);
}

.footer-top {
  display: grid;
  grid-template-columns: 2fr repeat(3, 1fr);
  gap: 48px;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--rule);
}

@media (max-width: 760px) {
  .footer-top { grid-template-columns: 1fr 1fr; gap: 32px; }
}

.footer-top h4 {
  font-family: var(--ff-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 16px;
  font-weight: 500;
}

.footer-top ul { list-style: none; margin: 0; padding: 0; }
.footer-top ul li { margin-bottom: 8px; }
.footer-top ul a { text-decoration: none; color: var(--ink-soft); font-size: 14px; }
.footer-top ul a:hover { color: var(--ink); }

.brand-line { font-family: var(--ff-display); font-size: 22px; }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: 24px;
}

/* ---------- a11y ---------- */

:focus-visible {
  outline: 2px solid var(--sea);
  outline-offset: 2px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  background: var(--ink);
  color: var(--paper);
  padding: 12px 16px;
  z-index: 100;
}

.skip-link:focus { top: 0; }

/* ---------- collections / exhibits index ---------- */

.set-card {
  display: block;
  text-decoration: none;
  color: var(--ink);
  border-top: 1px solid var(--rule);
  padding: 32px 0;
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 24px;
  align-items: center;
}

.set-card:last-child { border-bottom: 1px solid var(--rule); }
.set-card:hover .set-card-title { color: var(--accent); }

.set-card .set-card-num {
  font-family: var(--ff-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  color: var(--ink-faint);
}

.set-card .set-card-title {
  font-family: var(--ff-display);
  font-size: 28px;
  font-style: italic;
}

.set-card .set-card-lede {
  color: var(--ink-soft);
  font-size: 14px;
  margin-top: 8px;
  max-width: 56ch;
}

.set-card .set-card-cta {
  font-family: var(--ff-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* ---------- about / contact ---------- */

.split {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 64px;
  align-items: start;
}

@media (max-width: 760px) {
  .split { grid-template-columns: 1fr; gap: 32px; }
}

.split .stack > * + * { margin-top: 24px; }

.contact-form {
  display: grid;
  gap: 16px;
  max-width: 560px;
}

.contact-form label {
  display: block;
  font-family: var(--ff-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 6px;
}

.contact-form input,
.contact-form textarea,
.contact-form select {
  width: 100%;
  border: 1px solid var(--rule);
  padding: 12px 14px;
  font-family: inherit;
  font-size: 15px;
  background: var(--paper);
  border-radius: var(--radius-s);
}

.contact-form textarea { min-height: 140px; resize: vertical; }

.form-note {
  font-size: 13px;
  color: var(--ink-mute);
  border-top: 1px solid var(--rule-soft);
  padding-top: 16px;
}

/* ---------- exhibit page ---------- */

.exhibit-hero {
  border-bottom: 1px solid var(--rule);
  padding: 80px 0;
}

.exhibit-hero .subtitle {
  font-family: var(--ff-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--ink-mute);
}

.chapter {
  border-top: 1px solid var(--rule);
  padding: 48px 0;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 48px;
}

@media (max-width: 760px) {
  .chapter { grid-template-columns: 1fr; gap: 16px; }
}

.chapter h3 { font-size: var(--fs-h2); font-style: italic; }

/* ---------- utility ---------- */

.stack > * + * { margin-top: 16px; }
.center { text-align: center; }
.mute { color: var(--ink-mute); }
.italic { font-style: italic; }
.mono {
  font-family: var(--ff-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
}

/* ---------- hero split (image + copy) ---------- */

.hero--split {
  position: relative;
  isolation: isolate;
  padding-top: 100px;
  padding-bottom: 80px;
  overflow: hidden;
}

.hero--split .hero-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
  opacity: 0.55;
}

.hero--split::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    100deg,
    var(--paper) 0%,
    var(--paper) 40%,
    rgba(253, 253, 251, 0.7) 65%,
    rgba(253, 253, 251, 0.35) 100%
  );
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
}

.hero-figure {
  margin: 0;
  position: relative;
  box-shadow:
    0 1px 0 var(--rule),
    0 30px 60px -25px rgba(20, 20, 25, 0.35);
}

.hero-figure img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

.hero-figure figcaption {
  position: absolute;
  left: 0;
  bottom: -28px;
  font-family: var(--ff-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--ink-mute);
}

.hero--split .hero h1,
.hero--split h1 {
  font-size: var(--fs-display);
  line-height: 1.02;
}

@media (max-width: 920px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .hero-figure figcaption { position: static; margin-top: 12px; }
  .hero--split .hero-bg { opacity: 0.35; }
}

/* ---------- showroom strip ---------- */

.showroom {
  padding: 64px 0 24px;
  background:
    linear-gradient(to bottom, var(--paper) 0, var(--paper-warm) 100%);
}

.showroom-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 24px;
}

.showroom-figure {
  margin: 0;
  background: var(--paper);
  border: 1px solid var(--rule);
}

.showroom-figure img {
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  display: block;
}

.showroom-figure--wide img { aspect-ratio: 16 / 9; }

.showroom-figure figcaption {
  font-family: var(--ff-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--ink-mute);
  padding: 12px 16px;
  border-top: 1px solid var(--rule);
}

@media (max-width: 760px) {
  .showroom-grid { grid-template-columns: 1fr; }
}

/* ---------- about portrait ---------- */

.about-portrait {
  margin: 0;
  border: 1px solid var(--rule);
}

.about-portrait img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

.about-portrait figcaption {
  font-family: var(--ff-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--ink-mute);
  padding: 12px 16px;
  border-top: 1px solid var(--rule);
  background: var(--paper-warm);
}

/* ---------- about: pull-quote + facts ---------- */

.pull-quote {
  margin: 0;
  padding: 8px 0 8px 28px;
  border-left: 2px solid var(--accent);
}

.pull-quote p {
  font-family: var(--ff-display);
  font-style: italic;
  font-size: var(--fs-body-lg);
  line-height: 1.4;
  color: var(--ink-soft);
}

.pull-quote cite {
  display: block;
  margin-top: 14px;
  font-family: var(--ff-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  font-style: normal;
  color: var(--ink-mute);
}

.facts-head {
  margin-bottom: 20px;
}

.about-facts {
  border-top: 1px solid var(--rule);
}

/* ---------- catalog decorative strip ---------- */

.catalog-strip {
  height: 200px;
  background-size: cover;
  background-position: center;
  background-image: url('../img/bg/bg-shells.jpg');
  border-bottom: 1px solid var(--rule);
}