/* Layout: quiet, generous whitespace; light serif display over a soft grotesk; hairline rules only where they separate. Grayscale only. */
/* Single light theme on purpose (user found dark mode too dark). */
:root {
  color-scheme: light;
  --paper: #f7f7f6;
  --ink: #2e2e2d;
  --soft: #757573;
  --faint: #a6a6a3;
  --hair: #dcdcda;
  --serif: "Cormorant Garamond", "Cormorant", Garamond, "Times New Roman", serif;
  --sans: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 300 17px/1.7 var(--sans); -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
a:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }
h1, h2, h3 { margin: 0; font-weight: 400; }

.wrap {
  max-width: 1160px; margin: 0 auto;
  padding-left: max(32px, env(safe-area-inset-left, 0px));
  padding-right: max(32px, env(safe-area-inset-right, 0px));
}

/* Header */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 20; background: var(--paper); }
.bar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10; background: var(--paper); }
.bar-in { display: flex; align-items: center; justify-content: space-between; height: 84px; }
.logo {
  font: 500 22px/1 var(--serif); letter-spacing: 0.32em; margin-right: -0.32em;
  text-decoration: none;
}
.logo.small { font-size: 16px; }
nav { display: flex; gap: 36px; }
nav a { font-size: 14px; font-weight: 400; color: var(--soft); text-decoration: none; letter-spacing: 0.02em; transition: color .2s ease; }
nav a:hover { color: var(--ink); }

/* Hero */
.hero { padding-block: 120px 120px; }
.hero h1 {
  font: 300 clamp(2.8rem, 7vw, 6rem)/1.02 var(--serif); letter-spacing: -0.015em;
  max-width: 13em;
}
.hero h1 em { font-style: italic; color: var(--soft); }

/* Sections */
.section {
  display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 40px;
  padding-block: 56px 120px; border-top: 1px solid var(--hair);
}
.kicker { font: 400 13px/1.6 var(--sans); letter-spacing: 0.08em; color: var(--faint); text-transform: uppercase; padding-top: 4px; }

/* Ventures */
.ventures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px; }
.venture { display: flex; flex-direction: column; }
.venture .field { margin: 0 0 14px; font-size: 13px; color: var(--faint); letter-spacing: 0.02em; }
.venture h3 { font: 400 2.1rem/1.05 var(--serif); margin-bottom: 16px; }
.venture p { margin: 0 0 24px; color: var(--soft); font-size: 1rem; }
.go {
  margin-top: auto; align-self: flex-start; font-size: 14px; font-weight: 400;
  text-decoration: none; padding-bottom: 3px; border-bottom: 1px solid var(--hair);
  transition: border-color .2s ease;
}
.go span { display: inline-block; transition: transform .25s ease; }
a.go:hover { border-color: var(--ink); }
a.go:hover span { transform: translateX(4px); }
.go.soon { color: var(--faint); border-bottom-color: transparent; font-style: italic; font-family: var(--serif); font-size: 16px; }

.note { margin: 0; max-width: 34rem; color: var(--soft); }

/* Contact */
.contact .note { margin-bottom: 18px; }
.mail {
  font: 300 italic clamp(1.6rem, 4vw, 3rem)/1.2 var(--serif); text-decoration: none;
  overflow-wrap: anywhere; border-bottom: 1px solid var(--hair); padding-bottom: 4px;
  transition: border-color .2s ease;
}
.mail:hover { border-color: var(--ink); }

/* Footer */
.foot {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  padding-block: 36px 48px; border-top: 1px solid var(--hair); font-size: 13px; color: var(--faint);
}
.foot .logo { color: var(--soft); }

@media (max-width: 900px) {
  .section { grid-template-columns: 1fr; gap: 28px; padding-block: 44px 88px; }
  .ventures { grid-template-columns: 1fr; gap: 48px; }
  .hero { padding-block: 72px 96px; }
  }
@media (max-width: 520px) {
  .wrap { padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
  .bar-in { height: 68px; }
  nav { gap: 20px; }
  .hero h1 br { display: none; }
}