:root {
  --h: 24;
  --clay-900: hsl(var(--h) 28% 11%);
  --clay-700: hsl(var(--h) 24% 24%);
  --clay-500: hsl(var(--h) 45% 40%);
  --clay-300: hsl(var(--h) 30% 80%);
  --clay-100: hsl(var(--h) 34% 94%);
  --paper: hsl(var(--h) 22% 98%);
  --paper-2: hsl(var(--h) 20% 96%);
  --ink: hsl(var(--h) 20% 13%);
  --ink-soft: hsl(var(--h) 12% 34%);
  --line: hsl(var(--h) 16% 84%);
  --line-strong: hsl(var(--h) 16% 68%);
  --white: hsl(var(--h) 30% 99%);

  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;

  --f-xs: 0.8125rem;
  --f-sm: 0.875rem;
  --f-base: 1rem;
  --f-md: 1.219rem;
  --f-lg: 1.5rem;
  --f-xl: 1.827rem;
  --f-2xl: 2.25rem;
  --f-3xl: 2.75rem;
  --f-4xl: 3.375rem;

  --container: 1240px;
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Inter", -apple-system, "Segoe UI", Arial, sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--f-base);
  line-height: 1.6;
  font-weight: 400;
}

img { display: block; max-width: 100%; }

a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0;
}

p { margin: 0; }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--s-5);
}

.eyebrow {
  font-size: var(--f-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--clay-500);
  margin: 0;
}

.notice {
  background: var(--clay-900);
  color: hsl(var(--h) 26% 92%);
  font-size: var(--f-xs);
  letter-spacing: 0.06em;
}

.notice__inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
  justify-content: space-between;
  padding-top: var(--s-3);
  padding-bottom: var(--s-3);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: hsl(var(--h) 22% 98% / 0.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  min-height: 72px;
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  text-decoration: none;
  min-height: 48px;
}

.brand__mark {
  width: 32px;
  height: 32px;
  border: 1px solid var(--clay-500);
  position: relative;
  flex: none;
}

.brand__mark::after {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid var(--clay-300);
  transform: rotate(45deg);
}

.brand__name {
  font-family: var(--serif);
  font-size: var(--f-md);
  letter-spacing: 0.02em;
  font-weight: 600;
}

.nav {
  display: flex;
  align-items: center;
  gap: var(--s-6);
}

.nav a {
  text-decoration: none;
  font-size: var(--f-sm);
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  display: inline-flex;
  align-items: center;
  min-height: 48px;
}

.nav a:hover { color: var(--clay-500); }

.currency {
  display: inline-flex;
  border: 1px solid var(--line-strong);
  background: var(--white);
}

.currency button {
  min-width: 56px;
  min-height: 48px;
  border: 0;
  background: transparent;
  font-family: var(--sans);
  font-size: var(--f-sm);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  cursor: pointer;
}

.currency button[aria-pressed="true"] {
  background: var(--clay-900);
  color: var(--white);
}

.menu-toggle {
  display: none;
  min-width: 48px;
  min-height: 48px;
  border: 1px solid var(--line-strong);
  background: var(--white);
  font-size: var(--f-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 var(--s-6);
  font-family: var(--sans);
  font-size: var(--f-sm);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  background: transparent;
}

.btn--primary {
  background: var(--clay-500);
  color: var(--white);
}

.btn--primary:hover { background: hsl(var(--h) 48% 33%); }

.btn--ghost {
  border-color: var(--line-strong);
  color: var(--ink);
  background: var(--white);
}

.btn--ghost:hover { border-color: var(--clay-500); color: var(--clay-500); }

.btn--block { width: 100%; }

.hero {
  padding: var(--s-9) 0 var(--s-8);
  border-bottom: 1px solid var(--line);
}

.hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--s-8);
  align-items: center;
}

.hero h1 {
  font-size: var(--f-4xl);
  margin: var(--s-5) 0 var(--s-5);
  max-width: 15ch;
}

.hero p.lead {
  font-size: var(--f-md);
  color: var(--ink-soft);
  max-width: 52ch;
  margin-bottom: var(--s-7);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
}

.facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
  margin-top: var(--s-8);
  border-top: 1px solid var(--line);
  padding-top: var(--s-5);
}

.facts dt {
  font-size: var(--f-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.facts dd {
  margin: var(--s-1) 0 0;
  font-family: var(--serif);
  font-size: var(--f-lg);
}

.mosaic {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 78px;
  gap: var(--s-2);
}

.mosaic span {
  display: block;
  background: var(--clay-100);
  position: relative;
  overflow: hidden;
}

.mosaic span::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(115deg, hsl(var(--h) 20% 100% / 0.55) 0 32%, transparent 32% 62%, hsl(var(--h) 20% 40% / 0.12) 62% 100%);
}

.mosaic span:nth-child(1) { grid-column: span 3; grid-row: span 3; background: hsl(var(--h) 22% 88%); }
.mosaic span:nth-child(2) { grid-column: span 3; grid-row: span 2; background: hsl(var(--h) 30% 76%); }
.mosaic span:nth-child(3) { grid-column: span 2; grid-row: span 2; background: hsl(var(--h) 24% 33%); }
.mosaic span:nth-child(4) { grid-column: span 1; grid-row: span 1; background: hsl(var(--h) 42% 52%); }
.mosaic span:nth-child(5) { grid-column: span 3; grid-row: span 2; background: hsl(var(--h) 18% 92%); }
.mosaic span:nth-child(6) { grid-column: span 3; grid-row: span 1; background: hsl(var(--h) 28% 66%); }

.strip {
  border-bottom: 1px solid var(--line);
  background: var(--paper-2);
}

.strip__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.strip__item {
  padding: var(--s-6) var(--s-5);
  border-left: 1px solid var(--line);
}

.strip__item:first-child { border-left: 0; padding-left: 0; }

.strip__item h3 {
  font-size: var(--f-base);
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-bottom: var(--s-2);
}

.strip__item p {
  font-size: var(--f-sm);
  color: var(--ink-soft);
}

.section { padding: var(--s-9) 0; }

.section--tight { padding: var(--s-8) 0; }

.section__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-6);
  flex-wrap: wrap;
  margin-bottom: var(--s-7);
}

.section__head h2 {
  font-size: var(--f-2xl);
  margin-top: var(--s-3);
}

.section__head p {
  color: var(--ink-soft);
  max-width: 46ch;
  font-size: var(--f-sm);
}

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-bottom: var(--s-7);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: var(--s-3) 0;
}

.filters button {
  min-height: 48px;
  padding: 0 var(--s-4);
  border: 1px solid transparent;
  background: transparent;
  font-family: var(--sans);
  font-size: var(--f-sm);
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  cursor: pointer;
}

.filters button[aria-pressed="true"] {
  border-color: var(--line-strong);
  color: var(--ink);
  background: var(--white);
}

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-6) var(--s-5);
}

.card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
}

.card__media {
  aspect-ratio: 4 / 5;
  background: var(--clay-100);
  overflow: hidden;
}

.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card__body {
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  flex: 1;
}

.card__tag {
  font-size: var(--f-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.card__title {
  font-size: var(--f-md);
  letter-spacing: -0.01em;
}

.card__desc {
  font-size: var(--f-sm);
  color: var(--ink-soft);
  flex: 1;
}

.card__price {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  border-top: 1px solid var(--line);
  padding-top: var(--s-3);
}

.card__amount {
  font-family: var(--serif);
  font-size: var(--f-lg);
  font-weight: 600;
}

.card__unit {
  font-size: var(--f-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-8);
  align-items: start;
}

.split h2 { font-size: var(--f-xl); margin-bottom: var(--s-5); }

.split p + p { margin-top: var(--s-4); }

.split p { color: var(--ink-soft); }

.spec {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--f-sm);
}

.spec th, .spec td {
  text-align: left;
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.spec th {
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: var(--f-xs);
  color: var(--ink-soft);
  width: 42%;
}

.band {
  background: var(--clay-900);
  color: hsl(var(--h) 26% 93%);
}

.band .split h2 { color: var(--white); }

.band p { color: hsl(var(--h) 18% 82%); }

.band .spec th { color: hsl(var(--h) 18% 76%); }

.band .spec th, .band .spec td { border-bottom-color: hsl(var(--h) 14% 28%); }

.site-footer {
  border-top: 1px solid var(--line);
  background: var(--paper-2);
  padding: var(--s-8) 0 var(--s-6);
}

.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: var(--s-7);
}

.footer__grid h4 {
  font-family: var(--sans);
  font-size: var(--f-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: var(--s-4);
  font-weight: 600;
}

.footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  font-size: var(--f-sm);
}

.footer__list a {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 32px;
}

.footer__list a:hover { color: var(--clay-500); }

.footer__legal {
  margin-top: var(--s-7);
  border-top: 1px solid var(--line);
  padding-top: var(--s-5);
  font-size: var(--f-xs);
  color: var(--ink-soft);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
  justify-content: space-between;
}

.page-head {
  border-bottom: 1px solid var(--line);
  padding: var(--s-8) 0;
  background: var(--paper-2);
}

.page-head h1 {
  font-size: var(--f-3xl);
  margin-top: var(--s-3);
}

.page-head p {
  margin-top: var(--s-4);
  color: var(--ink-soft);
  max-width: 60ch;
}

.doc {
  padding: var(--s-8) 0 var(--s-9);
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: var(--s-8);
  align-items: start;
}

.toc {
  position: sticky;
  top: 96px;
  border-left: 1px solid var(--line);
  padding-left: var(--s-5);
}

.toc h2 {
  font-family: var(--sans);
  font-size: var(--f-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: var(--s-4);
  font-weight: 600;
}

.toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  font-size: var(--f-sm);
}

.toc a {
  text-decoration: none;
  color: var(--ink-soft);
  display: inline-flex;
  align-items: center;
  min-height: 32px;
}

.toc a:hover { color: var(--clay-500); }

.doc__body { max-width: 72ch; }

.doc__body section + section { margin-top: var(--s-8); }

.doc__body h2 {
  font-size: var(--f-lg);
  margin-bottom: var(--s-4);
}

.doc__body p + p, .doc__body ul + p, .doc__body p + ul {
  margin-top: var(--s-4);
}

.doc__body p { color: var(--ink-soft); }

.doc__body ul {
  margin: var(--s-4) 0 0;
  padding-left: var(--s-5);
  color: var(--ink-soft);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.doc__body strong { color: var(--ink); font-weight: 600; }

.callout {
  border: 1px solid var(--line);
  background: var(--white);
  padding: var(--s-5);
  margin-top: var(--s-5);
}

.callout dl {
  margin: 0;
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: var(--s-3) var(--s-4);
  font-size: var(--f-sm);
}

.callout dt {
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: var(--f-xs);
  color: var(--ink-soft);
}

.callout dd { margin: 0; }

.updated {
  font-size: var(--f-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

@media (max-width: 1080px) {
  .grid { grid-template-columns: repeat(3, 1fr); }
  .hero__grid { grid-template-columns: 1fr; gap: var(--s-7); }
  .hero h1 { font-size: var(--f-3xl); max-width: 20ch; }
  .strip__grid { grid-template-columns: repeat(2, 1fr); }
  .strip__item:nth-child(3) { border-left: 0; padding-left: 0; }
  .doc { grid-template-columns: 1fr; }
  .toc { position: static; }
}

@media (max-width: 760px) {
  .nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    padding: var(--s-2) var(--s-5) var(--s-4);
  }
  .nav.is-open { display: flex; }
  .site-header__inner { position: relative; }
  .menu-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .grid { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1fr; gap: var(--s-6); }
  .footer__grid { grid-template-columns: 1fr; gap: var(--s-6); }
  .facts { grid-template-columns: 1fr; }
  .callout dl { grid-template-columns: 1fr; gap: var(--s-1); }
  .hero { padding: var(--s-7) 0 var(--s-6); }
  .section { padding: var(--s-7) 0; }
  .mosaic { grid-auto-rows: 56px; }
}

@media (max-width: 460px) {
  .grid { grid-template-columns: 1fr; }
  .strip__grid { grid-template-columns: 1fr; }
  .strip__item { border-left: 0; padding-left: 0; }
}