@font-face {
  font-family: "Geist";
  src: url("/fonts/geist-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Skin */
  --ground: #EFE9E1;
  --ground-2: #E2D9CD;
  --ink: #1A1716;
  --ink-muted: #4F4843;
  --accent: #B3321F;
  --accent-deep: #7E2012;
  --on-accent: #FFFFFF;
  --on-accent-deep: #FFFFFF;
  --accent-text: #9C2A19;
  --line: rgba(26, 23, 22, 0.14);
  --line-interactive: rgba(26, 23, 22, 0.32);
  --focus: #9C2A19;

  /* Spacing */
  --gap-3xs: 4px;
  --gap-half: 5px;
  --gap-2xs: 8px;
  --gap-xs: 10px;
  --gap-sm: 20px;
  --gap-md: 40px;
  --gap-lg: 60px;
  --gap-xl: 80px;
  --gap-2xl: 100px;
  --gap-3xl: 120px;

  /* Type */
  --text-xs: 11px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: clamp(17px, 0.95rem + 0.3vw, 19px);
  --text-xl: clamp(19px, 1rem + 0.5vw, 22px);
  --text-2xl: clamp(26px, 1.2rem + 1.2vw, 36px);
  --text-3xl: clamp(34px, min(1.4rem + 2.6vw, 7vh), 60px);
  --text-5xl: clamp(44px, min(1.8rem + 4.4vw, 11vh), 96px);

  /* Sizes */
  --control: 48px;
  --icon-md: 16px;
  --icon-lg: 20px;
  --width-prose: 68ch;
  --width-md: 800px;
  --width-2xl: 1400px;

  /* Motion */
  --ease-fast: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-marbl: cubic-bezier(0.32, 0.72, 0, 1);
  --transition-fast: 0.15s ease;

  --font: "Geist", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--gap-md); }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 400 var(--text-base)/1.6 var(--font);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
a { color: inherit; text-underline-offset: var(--gap-3xs); }
p, li, dd, summary { text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: var(--gap-3xs); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip {
  position: absolute; left: var(--gap-sm); top: var(--gap-sm); z-index: 10;
  padding: var(--gap-xs) var(--gap-sm); background: var(--accent); color: var(--on-accent);
  transform: translateY(-200%); transition: transform var(--transition-fast);
}
.skip:focus { transform: none; }

/* ── Shell: every section shares one width ─────────────────── */
.shell { width: 100%; max-width: var(--width-2xl); margin: 0 auto; padding-inline: var(--gap-md); }

/* ── Bar ───────────────────────────────────────────────────── */
.bar { display: flex; align-items: center; justify-content: space-between; gap: var(--gap-sm); padding-block: var(--gap-sm); }
.mark { font-weight: 800; font-size: var(--text-xl); letter-spacing: -0.03em; text-decoration: none; }
.mark span { color: var(--accent-text); }

/* ── Buttons: square, fill-up, arrow rotates to face right ── */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--gap-xs);
  min-height: var(--control); padding: 0 var(--gap-sm);
  border: 1px solid var(--line-interactive); background: transparent; color: var(--ink);
  font: 700 var(--text-sm)/1 var(--font); text-decoration: none; cursor: pointer;
  overflow: hidden; isolation: isolate;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--accent);
  transform: translateY(101%); transition: transform 0.4s var(--ease-fast);
}
.btn:hover, .btn:focus-visible { color: var(--on-accent); border-color: var(--accent); }
.btn:hover::before, .btn:focus-visible::before { transform: translateY(0); }
.btn--solid { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn--solid::before { background: var(--accent-deep); }
.btn--solid:hover, .btn--solid:focus-visible { border-color: var(--accent-deep); color: var(--on-accent-deep); }
.arrow { width: var(--icon-md); height: var(--icon-md); flex: none; fill: none; stroke: currentColor; stroke-width: 2; transition: transform 0.4s var(--ease-fast); }
.btn:hover .arrow, .btn:focus-visible .arrow, .finder:hover .arrow, .finder:focus-visible .arrow { transform: rotate(45deg); }

/* ── Type helpers ──────────────────────────────────────────── */
.label {
  margin: 0 0 var(--gap-sm); color: var(--accent-text);
  font-size: var(--text-xs); font-weight: 600; letter-spacing: 2px; text-transform: uppercase; line-height: 1;
}
h1 { margin: 0; font-size: var(--text-5xl); font-weight: 800; line-height: 0.95; letter-spacing: -0.045em; max-width: 14ch; }
h2 { margin: 0 0 var(--gap-sm); font-size: var(--text-3xl); font-weight: 800; line-height: 1; letter-spacing: -0.035em; max-width: 18ch; }
h3 { margin: 0 0 var(--gap-2xs); font-size: var(--text-lg); font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; }
.lede { margin: var(--gap-sm) 0 0; max-width: 46ch; font-size: var(--text-lg); color: var(--ink-muted); }
.intro { margin: 0; max-width: var(--width-prose); color: var(--ink-muted); font-size: var(--text-lg); }
.source { color: var(--ink-muted); font-size: var(--text-sm); }
.source a { color: var(--ink); }

/* ── Hero: copy left, art right ────────────────────────────── */
.hero {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center;
  gap: var(--gap-lg); padding-block: var(--gap-xl) var(--gap-2xl);
}
.hero__ctas { display: flex; flex-wrap: wrap; gap: var(--gap-xs); margin-top: var(--gap-md); }
.hero__art { position: relative; aspect-ratio: 1; background: var(--ground-2); overflow: hidden; }
.hero__art svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Art palette */
.art-i { fill: var(--ink); }
.art-a { fill: var(--accent); }
.art-as { stroke: var(--accent); }
.art-g { fill: var(--ground-2); }
.art-m { fill: var(--line-interactive); }

/* ── Sections ──────────────────────────────────────────────── */
.section { padding-block: var(--gap-2xl); }
.band { background: var(--ground-2); }
.section__head { display: grid; gap: var(--gap-sm); margin-bottom: var(--gap-lg); }
.section__head h2 { margin: 0; }

/* Finders: tiles on the band, a surface shift, no borders */
.finders { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--gap-sm); margin: 0; padding: 0; list-style: none; }
.finder {
  display: flex; flex-direction: column; gap: var(--gap-xs); height: 100%;
  padding: var(--gap-md) var(--gap-md) var(--gap-sm); background: var(--ground); text-decoration: none;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.finder__name { font-size: var(--text-xl); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }
.finder__what { color: var(--ink-muted); font-size: var(--text-sm); flex: 1; }
.finder__go { display: flex; align-items: center; justify-content: space-between; gap: var(--gap-xs); padding-top: var(--gap-sm); font-weight: 700; font-size: var(--text-sm); color: var(--accent-text); }
.finder:hover, .finder:focus-visible { background: var(--accent); color: var(--on-accent); }
.finder:hover .finder__what, .finder:focus-visible .finder__what,
.finder:hover .finder__go, .finder:focus-visible .finder__go { color: var(--on-accent); }
.finders-note { margin: var(--gap-md) 0 0; max-width: var(--width-prose); color: var(--ink-muted); font-size: var(--text-sm); }

/* Checklist: big numerals, two columns */
.checks { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--gap-md) var(--gap-lg); margin: 0; padding: 0; list-style: none; counter-reset: check; }
.checks li { counter-increment: check; display: grid; grid-template-columns: auto 1fr; gap: var(--gap-sm); align-items: start; }
.checks li::before {
  content: counter(check, decimal-leading-zero);
  font-size: var(--text-2xl); font-weight: 800; line-height: 1; letter-spacing: -0.03em; color: var(--accent-text);
  font-variant-numeric: tabular-nums;
}
.checks p { margin: 0; color: var(--ink-muted); }

/* Key facts */
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--gap-sm); margin: 0; }
.fact { padding: var(--gap-md); background: var(--ground); }
.fact dt { color: var(--ink-muted); font-size: var(--text-sm); }
.fact dd { margin: var(--gap-2xs) 0 0; }
.fact__figure { display: block; font-size: var(--text-3xl); font-weight: 800; line-height: 1; letter-spacing: -0.04em; }
.fact__note { display: block; margin-top: var(--gap-xs); color: var(--ink-muted); font-size: var(--text-sm); }

/* FAQ: native details, chevron circle rotates */
.faq { max-width: var(--width-md); }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--gap-sm);
  min-height: var(--control); padding-block: var(--gap-sm); cursor: pointer; list-style: none;
  font-size: var(--text-lg); font-weight: 700; letter-spacing: -0.01em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--accent-text); }
.chev { flex: none; display: grid; place-items: center; width: 32px; height: 32px; background: var(--ground-2); transition: transform 0.4s var(--ease-fast); }
.chev svg { width: var(--icon-md); height: var(--icon-md); fill: none; stroke: currentColor; stroke-width: 2; }
.faq details[open] .chev { transform: rotate(180deg); }
.faq__a { padding-bottom: var(--gap-sm); color: var(--ink-muted); max-width: var(--width-prose); }
.faq__a p { margin: 0 0 var(--gap-xs); }

/* ── For sale: the accent band ─────────────────────────────── */
.sale { background: var(--accent); color: var(--on-accent); }
.sale .label { color: var(--on-accent); }
.sale__grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--gap-lg); align-items: end; }
.sale h2 { max-width: 16ch; }
.sale__price { margin: 0; font-size: var(--text-5xl); font-weight: 800; line-height: 0.9; letter-spacing: -0.05em; }
.sale__terms { margin: var(--gap-sm) 0 var(--gap-md); max-width: 46ch; }
.sale .btn { border-color: var(--on-accent); color: var(--on-accent); }
.sale .btn::before { background: var(--on-accent); }
.sale .btn:hover, .sale .btn:focus-visible { color: var(--accent); }
.sale__email { margin: var(--gap-sm) 0 0; font-size: var(--text-sm); }
.sale__email a { color: var(--on-accent); font-weight: 700; }
.sale :focus-visible { outline-color: var(--on-accent); }

/* ── Footer ────────────────────────────────────────────────── */
.foot { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--gap-sm) var(--gap-lg); padding-block: var(--gap-lg); color: var(--ink-muted); font-size: var(--text-sm); }
.foot p { margin: 0 0 var(--gap-xs); max-width: var(--width-prose); }
.foot a { color: var(--ink); }
.foot a:hover { color: var(--accent-text); }
.foot__meta { text-align: right; }

/* ── Entrance: a short rise, then still ────────────────────── */
@keyframes rise { from { opacity: 0; transform: translateY(var(--gap-sm)); } }
.reveal { animation: rise 0.8s var(--ease-marbl) both; }
.reveal--2 { animation-delay: 0.08s; }
.reveal--3 { animation-delay: 0.16s; }

/* ── Small screens ─────────────────────────────────────────── */
@media (max-width: 900px) {
  .hero { grid-template-columns: minmax(0, 1fr); padding-block: var(--gap-md) var(--gap-xl); }
  .hero__art { aspect-ratio: 4 / 3; }
  .sale__grid { grid-template-columns: minmax(0, 1fr); align-items: start; }
}
@media (max-width: 768px) {
  .shell { padding-inline: var(--gap-sm); }
  .section { padding-block: var(--gap-xl); }
  .section__head { margin-bottom: var(--gap-md); }
  .finder, .fact { padding: var(--gap-sm); }
  .checks { grid-template-columns: minmax(0, 1fr); }
  .foot { grid-template-columns: minmax(0, 1fr); }
  .foot__meta { text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0s !important; transition-duration: 0.01ms !important; }
}