@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;1,400&family=Fraunces:opsz,wght,SOFT@9..144,300..700,70&family=Instrument+Sans:wght@400;500;600&family=JetBrains+Mono:wght@400;600&display=swap');

:root {
  --ink: #080A08;
  --paper: #FBF7EE;
  --muted: rgba(251,247,238,.68);
  --faint: rgba(251,247,238,.44);
  --rule: rgba(251,247,238,.16);
  --rule-strong: rgba(251,247,238,.24);
  --ember: #E86F35;
  --teal: #2C7C82;
  --blue: #5E7BE8;
  --max: 1220px;
  --g: clamp(22px, 4vw, 64px);
  --font-display: 'Cormorant Garamond', serif;
  --font-warm: 'Fraunces', serif;
  --font-text: 'Instrument Sans', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  min-height: 100vh;
  color: var(--paper);
  background:
    radial-gradient(circle at 78% 10%, rgba(232,111,53,.18), transparent 34rem),
    radial-gradient(circle at 12% 76%, rgba(44,124,130,.15), transparent 30rem),
    var(--ink);
  font-family: var(--font-text);
}

a { color: inherit; }
.mono {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

nav,
main,
footer {
  max-width: var(--max);
  margin: 0 auto;
  padding-left: var(--g);
  padding-right: var(--g);
}

nav {
  min-height: 84px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--rule);
}

.brand {
  font-family: var(--font-display);
  font-size: 1.35rem;
  text-decoration: none;
}

.nav-links {
  display: flex;
  gap: 24px;
  list-style: none;
  color: var(--faint);
}

.nav-links a {
  text-decoration: none;
}

.nav-links a:hover { color: var(--paper); }

.hero {
  min-height: 68vh;
  padding-top: clamp(72px, 10vw, 128px);
  padding-bottom: 82px;
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(280px, .85fr);
  gap: clamp(38px, 8vw, 112px);
  align-items: end;
  border-bottom: 1px solid var(--rule);
}

.hero > *,
.split > *,
.grid > * {
  min-width: 0;
}

.eyebrow,
.section-label { color: var(--ember); margin-bottom: 24px; }

h1 {
  font-family: var(--font-display);
  font-size: clamp(4.2rem, 10vw, 9.6rem);
  font-weight: 300;
  line-height: .86;
  letter-spacing: -.04em;
  max-width: 8ch;
}

.lede {
  color: var(--muted);
  font-size: clamp(1.1rem, 1.7vw, 1.35rem);
  line-height: 1.62;
  max-width: 39ch;
}

.status-card {
  border: 1px solid var(--rule-strong);
  background: rgba(251,247,238,.045);
  padding: 28px;
  max-width: 100%;
}

.status-card h2 {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 300;
  line-height: 1;
  margin: 18px 0;
}

.status-card p {
  color: var(--muted);
  line-height: 1.58;
}

section {
  padding-top: 82px;
  padding-bottom: 82px;
  border-bottom: 1px solid var(--rule);
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
  gap: clamp(38px, 7vw, 96px);
  align-items: start;
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(3rem, 6vw, 6rem);
  font-weight: 300;
  line-height: .95;
  letter-spacing: -.035em;
  max-width: 10ch;
}

.copy {
  color: var(--muted);
  line-height: 1.72;
  font-size: 1.04rem;
}

.copy p + p { margin-top: 18px; }

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  border: 1px solid var(--rule-strong);
  background: var(--rule);
  margin-top: 44px;
}

.cell {
  background: rgba(251,247,238,.04);
  padding: 30px 26px 34px;
  min-height: 220px;
}

.cell__kicker { color: var(--faint); margin-bottom: 28px; }

.cell h3 {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 300;
  line-height: 1;
  margin-bottom: 16px;
}

.cell p {
  color: var(--muted);
  line-height: 1.58;
}

.ask {
  background:
    linear-gradient(rgba(251,247,238,.035), rgba(251,247,238,.035)),
    #0B0D0B;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 28px;
}

.button {
  min-height: 48px;
  padding: 0 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--paper);
  color: var(--ink);
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.button--ghost {
  background: transparent;
  color: var(--paper);
  border: 1px solid var(--rule-strong);
}

footer {
  padding-top: 30px;
  padding-bottom: 30px;
  color: var(--faint);
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  font-size: .84rem;
}

footer a { color: var(--faint); text-decoration: none; }

.kindling { --accent: #E86F35; }
.kiln { --accent: #C9A46A; }
.mantle { --accent: #2E9B80; }
.sol { --accent: #5E7BE8; }
.product-mark { color: var(--accent); }

@media (max-width: 900px) {
  .hero,
  .split,
  .grid {
    grid-template-columns: 1fr;
  }
  .hero { align-items: start; }
  .nav-links { display: none; }
  .section-title { max-width: 9ch; }
}

@media (max-width: 620px) {
  body { overflow-x: hidden; }
  nav,
  main,
  footer {
    width: 100%;
    max-width: 100%;
    padding-left: 22px;
    padding-right: 22px;
  }
  .hero,
  .split {
    display: block;
    width: 100%;
  }
  h1 {
    font-size: clamp(3.25rem, 14vw, 4.25rem);
    max-width: 8ch;
  }
  .status-card {
    width: 100%;
    margin-top: 56px;
    padding: 26px;
  }
  .status-card p,
  .copy,
  .cell p {
    overflow-wrap: break-word;
  }
  .status-card p {
    max-width: 28ch;
  }
  section { padding-top: 68px; padding-bottom: 68px; }
  .grid { display: block; }
  .cell + .cell { border-top: 1px solid var(--rule); }
}