/* Haultin marketing — landing page styles.
 * Tokens are a minimal subset of design/tokens.css. When this surface
 * grows, mirror the full file instead of extending this subset. */

:root {
  --parchment: #ECEEF1;
  --parchment-soft: #F5F6F7;
  --navy-ink: #15233B;
  --admiralty: #0E1726;
  --oxblood: #7A1F1F;
  --quill: #777F8B;
  --ash: #A6ABB2;
  --floor-gray: #6E7789;

  --serif: "Petrona", "Times New Roman", serif;
  --body: "Source Serif 4", Georgia, serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --hairline: 1px solid var(--admiralty);
  --hairline-faint: 1px solid rgba(14, 23, 38, 0.18);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--parchment);
  color: var(--navy-ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }

/* ── Page frame ──────────────────────────────────────────── */
.page {
  max-width: 1100px;
  margin: 0 auto;
  padding: 32px 32px 128px;
}

/* ── Masthead ────────────────────────────────────────────── */
.masthead {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  opacity: 0.7;
}
.rule {
  border-top: var(--hairline);
  opacity: 0.5;
  margin-top: 12px;
}

/* ── Hero ────────────────────────────────────────────────── */
.hero {
  padding: 120px 0 96px;
  display: grid;
  gap: 24px;
  max-width: 860px;
}
.wordmark {
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 0.92;
  font-size: clamp(72px, 12vw, 132px);
  margin: 0;
}
.headline {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(32px, 4.5vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin: 16px 0 0;
}
.headline em { font-style: italic; color: var(--oxblood); }
.lede {
  font-family: var(--body);
  font-size: clamp(18px, 1.5vw, 21px);
  line-height: 1.55;
  margin: 16px 0 0;
  max-width: 58ch;
  text-wrap: pretty;
}

/* ── Section ─────────────────────────────────────────────── */
.section { margin-top: 96px; }
.section-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1.2;
  letter-spacing: -0.005em;
  margin: 0 0 32px;
  padding-bottom: 12px;
  border-bottom: var(--hairline-faint);
}

/* ── Tile grid (what we add) ─────────────────────────────── */
.tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
}
.tile-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.005em;
  margin: 0 0 12px;
}
.tile-body {
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  margin: 0;
  text-wrap: pretty;
  max-width: 36ch;
}

/* ── Contact ─────────────────────────────────────────────── */
.contact-body {
  font-family: var(--body);
  font-size: 18px;
  line-height: 1.55;
  margin: 0 0 16px;
  max-width: 56ch;
  text-wrap: pretty;
}
.contact-mail {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(28px, 3vw, 40px);
  letter-spacing: -0.01em;
  display: inline-block;
  margin-top: 4px;
  border-bottom: 1px solid currentColor;
  transition: color .12s, border-color .12s;
}
.contact-mail:hover { color: var(--oxblood); }

/* ── Colophon ────────────────────────────────────────────── */
.colophon {
  margin-top: 128px;
  padding-top: 16px;
  border-top: var(--hairline-faint);
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  opacity: 0.7;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 720px) {
  .page { padding: 24px 20px 96px; }
  .hero { padding: 64px 0 48px; }
  .section { margin-top: 72px; }
  .tiles { grid-template-columns: 1fr; gap: 32px; }
}