@font-face { font-family: "Jost"; src: url("fonts/jost-300.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Jost"; src: url("fonts/jost-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Jost"; src: url("fonts/jost-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }

:root {
  --ink: #0b0b0b;
  --muted: #4a4a4a;
  --rule: #0b0b0b;
  --sans: "Jost", "Century Gothic", "Segoe UI", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: light; scroll-behavior: smooth; }
body {
  margin: 0;
  background: #fff;
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.page {
  max-width: 1040px;
  margin: 0 auto;
  padding: 32px 16px 40px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}

/* Masthead */
.wordmark {
  margin: 0;
  font-weight: 300;
  font-size: min(calc(17vw - 6px), 12rem);
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  white-space: nowrap;
}
.date { margin: 6px 0 0; font-weight: 300; font-size: clamp(1rem, 2vw, 1.3rem); }

/* Headline */
.headline { margin: 0; font-weight: 400; font-size: clamp(2rem, 5vw, 3.2rem); line-height: 1.08; letter-spacing: -0.025em; }
.sub { margin: 14px 0 0; font-weight: 400; font-size: clamp(1.3rem, 3vw, 1.9rem); line-height: 1.15; letter-spacing: -0.02em; }

/* Letter */
.letter p { margin: 0 0 1.4em; font-size: 1.05rem; line-height: 1.65; max-width: 62ch; }
.letter .sign { margin-top: 1.8em; font-weight: 500; }

/* Form */
.connect h2 { margin: 0 0 10px; font-weight: 400; font-size: clamp(1.5rem, 3.4vw, 2.1rem); line-height: 1.1; letter-spacing: -0.02em; }
.lead { margin: 0 0 22px; max-width: 34ch; }
form { max-width: 380px; }
label { display: block; margin-top: 16px; font-size: 0.95rem; }
input[type="text"], input[type="email"], textarea {
  display: block; width: 100%;
  padding: 8px 0; font: inherit; font-size: 1rem; color: var(--ink);
  background: transparent; border: 0; border-bottom: 1px solid var(--rule); border-radius: 0; resize: vertical;
}
input:focus-visible, textarea:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
button {
  margin-top: 28px; padding: 14px 28px;
  font: inherit; font-weight: 500; color: #fff; background: var(--ink);
  border: 2px solid var(--ink); border-radius: 0; cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
button:hover { background: #fff; color: var(--ink); }
button:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
button:disabled { opacity: 0.5; cursor: wait; }
.status { min-height: 1.6em; margin: 12px 0 0; font-size: 0.95rem; }
.status.err { color: #b00020; }

.foot { padding-top: 24px; border-top: 1px solid #d9d9d9; font-size: 0.82rem; color: var(--muted); max-width: 70ch; }
.foot p { margin: 0; }

/* Desktop: wordmark across the top, headline + form left, letter right */
@media (min-width: 860px) {
  .page {
    padding: 56px 32px 72px;
    gap: 0;
    column-gap: clamp(56px, 7vw, 104px);
    grid-template-columns: 4fr 7fr;
    grid-template-rows: auto auto 1fr auto;
    grid-template-areas:
      "mast mast"
      "intro letter"
      "connect letter"
      "foot foot";
    align-items: start;
  }
  .masthead { grid-area: mast; margin-bottom: 72px; }
  .wordmark { font-size: min(calc(17vw - 11px), 10.4rem); }
  .intro { grid-area: intro; margin-bottom: 80px; }
  .headline { font-size: clamp(2.1rem, 3.6vw, 2.9rem); }
  .sub { font-size: clamp(1.2rem, 1.9vw, 1.5rem); }
  .letter { grid-area: letter; }
  .letter p { font-size: clamp(1.05rem, 1.25vw, 1.2rem); line-height: 1.65; margin-bottom: 1.6em; max-width: 56ch; }
  .letter .sign { margin-top: 2.2em; margin-bottom: 0; }
  .connect { grid-area: connect; }
  .foot { grid-area: foot; margin-top: 96px; }
}

/* Keep the form in view beside the longer letter, on screens tall enough to hold it */
@media (min-width: 860px) and (min-height: 720px) {
  .connect { position: sticky; top: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}