/* Hutch Ventures. Tokens follow the Hutch brand guidelines (brand/guidelines/tokens.json).
   Layout: one 1080px column, sparse and left-aligned; golden-ratio spacing; square corners. */
:root {
  --paper: #fafaf8;
  --surface: #f0efec;
  --line: #dcdbd7;
  --ink-muted: #63625e;
  --ink: #141414;

  --font-sans: Urbanist, "Avenir Next", system-ui, sans-serif;

  --space-1: 4px;
  --space-2: 6px;
  --space-3: 10px;
  --space-4: 16px;
  --space-5: 26px;
  --space-6: 42px;
  --space-7: 68px;
  --space-8: 110px;

  --measure: 62ch;
  --page: 1080px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #141414;
    --surface: #1d1d1c;
    --line: #353533;
    --ink-muted: #a8a7a2;
    --ink: #f2f2f0;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --paper: #141414;
  --surface: #1d1d1c;
  --line: #353533;
  --ink-muted: #a8a7a2;
  --ink: #f2f2f0;
  color-scheme: dark;
}

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

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 26px;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.wrap {
  max-width: calc(var(--page) + 2 * var(--space-6));
  margin: 0 auto;
  padding-left: max(var(--space-4), env(safe-area-inset-left, 0px));
  padding-right: max(var(--space-4), env(safe-area-inset-right, 0px));
}
@media (min-width: 720px) {
  .wrap {
    padding-left: max(var(--space-6), env(safe-area-inset-left, 0px));
    padding-right: max(var(--space-6), env(safe-area-inset-right, 0px));
  }
}

/* Type, from the guidelines' type styles */
.display { font-size: clamp(40px, 7vw, 64px); line-height: 1; font-weight: 600; letter-spacing: -0.01em; text-wrap: balance; }
.headline { font-size: clamp(30px, 4.4vw, 40px); line-height: 1.1; font-weight: 600; text-wrap: balance; }
.title { font-size: 26px; line-height: 32px; font-weight: 600; }
.lead { font-size: 20px; line-height: 32px; max-width: var(--measure); }
.small { font-size: 14px; line-height: 22px; color: var(--ink-muted); }
.label { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-muted); }
.prose { display: flex; flex-direction: column; gap: var(--space-4); max-width: var(--measure); }
.prose ul { padding-left: 1.1em; display: flex; flex-direction: column; gap: var(--space-2); }

/* Header */
.site-header { border-bottom: 1px solid var(--line); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); flex-wrap: wrap; padding-block: var(--space-5); }
.home-link { display: block; line-height: 0; }
.logo { display: block; height: 30px; width: auto; }
.nav { display: flex; gap: var(--space-5); flex-wrap: wrap; }
.nav a { font-size: 15px; font-weight: 600; text-decoration: none; color: var(--ink-muted); }
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); }
.nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; }

/* Sections */
main { display: flex; flex-direction: column; }
main > * { width: 100%; }
.section { padding-block: var(--space-7); }
.section + .section { border-top: 1px solid var(--line); }
.section-head { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-6); max-width: var(--measure); }
.page-head { padding-block: var(--space-7) var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); }

/* Hero */
.hero { display: grid; gap: var(--space-6); align-items: end; padding-block: var(--space-8) var(--space-7); }
.hero-text { display: flex; flex-direction: column; gap: var(--space-5); min-width: 0; }
.hero-art { width: 100%; height: auto; display: block; }
@media (min-width: 880px) { .hero { grid-template-columns: 1fr 1fr; } }
.art-ink { fill: var(--ink); }
.art-muted { fill: var(--ink-muted); }
.art-line { fill: var(--line); }

/* Links styled as actions */
.actions { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.btn { display: inline-block; padding: var(--space-3) var(--space-5); border: 1px solid var(--ink); font-weight: 600; text-decoration: none; }
.btn-solid { background: var(--ink); color: var(--paper); }
.btn:hover { background: var(--surface); color: var(--ink); }
.btn-solid:hover { background: var(--ink-muted); border-color: var(--ink-muted); color: var(--paper); }

/* Grids and cards */
.grid { display: grid; gap: var(--space-5); }
@media (min-width: 720px) { .grid-2 { grid-template-columns: 1fr 1fr; } .grid-3 { grid-template-columns: repeat(3, 1fr); } }
.card { background: var(--surface); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.card .meta { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.card-quiet { background: transparent; border: 1px dashed var(--line); }
.chip { display: inline-block; font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; padding: var(--space-1) var(--space-3); border: 1px solid var(--ink); }
.chip-quiet { border-color: var(--line); color: var(--ink-muted); }
.venture-mark { width: 56px; height: 56px; }

/* Numbered steps and values */
.steps { display: grid; gap: var(--space-6); }
@media (min-width: 720px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step { display: flex; flex-direction: column; gap: var(--space-3); border-top: 2px solid var(--ink); padding-top: var(--space-4); }
.values { display: grid; gap: var(--space-6); }
@media (min-width: 720px) { .values { grid-template-columns: 1fr 1fr; } }
.value-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--space-5); counter-reset: value; }
.value-list li { display: grid; grid-template-columns: 2.2em 1fr; gap: var(--space-3); }
.value-list .n { font-weight: 600; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.value-list strong { display: block; font-weight: 600; }

/* Brand downloads */
.asset { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.asset-preview { aspect-ratio: 1.618 / 1; max-width: 100%; display: flex; align-items: center; justify-content: center; padding: var(--space-5); border: 1px solid var(--line); }
.asset-preview img { max-height: 100%; }
.on-light { background: #fafaf8; }
.on-dark { background: #141414; border-color: #141414; }
.asset-links { display: flex; gap: var(--space-4); flex-wrap: wrap; font-size: 14px; }
.swatch { display: flex; flex-direction: column; gap: var(--space-2); }
.swatch-chip { height: 68px; border: 1px solid var(--line); }
.boiler { background: var(--surface); padding: var(--space-5); max-width: var(--measure); }

/* Contact band and footer */
.contact { display: flex; flex-direction: column; gap: var(--space-4); }
.email { font-size: clamp(24px, 4vw, 32px); line-height: 1.2; font-weight: 600; }
.site-footer { border-top: 1px solid var(--line); margin-top: auto; }
.site-footer .wrap { display: grid; gap: var(--space-5); padding-block: var(--space-6); }
@media (min-width: 720px) { .site-footer .wrap { grid-template-columns: 1fr auto; align-items: end; } }
.footer-brand { display: flex; align-items: center; gap: var(--space-4); }
.footer-mark { width: 32px; height: 32px; flex: none; }
.footer-links { display: flex; gap: var(--space-5); flex-wrap: wrap; font-size: 14px; }
.footer-links a { color: var(--ink-muted); text-decoration: none; }
.footer-links a:hover { color: var(--ink); }

@media (prefers-reduced-motion: no-preference) {
  .btn, .nav a { transition: background-color 120ms ease, color 120ms ease; }
}