/*
 * Modify Human — brand site.
 *
 * The tokens are not new. They are Vanessa's, from `vanessa-website/site/assets/app.css`,
 * which Calendar Reset then mirrored into its Tailwind `@theme`. Three sites by two people
 * that look like three sites by six is a cost paid on every page for nothing, so the cream
 * ground, the ink, the coral and the teal are copied here verbatim rather than re-picked.
 *
 */
:root {
  --coral: #ff5c42;
  --coral-dark: #e8412a;
  /* Coral deep enough to be read as text. --coral and --coral-dark are button
     colours: on the cream ground they measure 2.84:1 and 3.73:1, both under the
     4.5:1 minimum for body copy. Same hue and saturation, taken down until it
     passes at 5.19:1. */
  --coral-ink: #c62b15;
  --teal: #12a89b;
  --teal-dark: #0c8a7f;
  --teal-deep: #0a6b63;

  --ink: #1f2230;
  --muted: #5c6072;
  --faint: #9499aa;
  --bg: #faf6ef;
  --card: #ffffff;
  --line: #ece4d6;
  --disc: #f0e9dc;   /* the ground the founder portraits are cut against */
  --err: #d23b2a;

  --radius: 16px;
  --measure: 62ch;

  /* The two tints off the corners are the most recognisable thing about the other two
     sites. Fixed, so a scroll does not drag them up the page. */
  --grad-hero:
    radial-gradient(1200px 600px at 85% -12%, #ffe4d8 0%, rgba(255, 228, 216, 0) 55%),
    radial-gradient(900px 500px at -5% 0%, #d6f2ee 0%, rgba(214, 242, 238, 0) 50%),
    var(--bg);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--grad-hero);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: var(--teal-dark); }
a:hover { color: var(--teal-deep); }

:focus-visible {
  outline: 2px solid var(--teal-dark);
  outline-offset: 3px;
  border-radius: 4px;
}

.wrap { max-width: 780px; margin: 0 auto; padding: 0 22px; }

.skip {
  position: absolute; left: -9999px;
  background: var(--card); color: var(--ink);
  padding: 10px 16px; border-radius: 8px; z-index: 10;
}
.skip:focus { left: 16px; top: 16px; }

/* ─── header ─────────────────────────────────────────────────────────────── */

.site-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 22px 0 0;
}
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; color: var(--ink); }
.brand img { width: 36px; height: 36px; }
.brand span {
  font-weight: 600; font-size: 15px;
  letter-spacing: 0.15em; text-transform: uppercase;
}
.head-link {
  font-size: 15px; font-weight: 500; text-decoration: none;
  color: var(--muted); white-space: nowrap;
}
.head-link:hover { color: var(--teal-deep); }

/* ─── hero ───────────────────────────────────────────────────────────────── */

.hero { padding: 76px 0 8px; }

.hero h1 {
  font-family: 'Newsreader', ui-serif, Georgia, serif;
  font-weight: 600;
  font-size: clamp(2.35rem, 7vw, 3.5rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0 0 22px;
  max-width: 15ch;
}
.hero h1 .accent { color: var(--teal-dark); }

.lede { font-size: 1.16rem; color: var(--muted); margin: 0 0 18px; max-width: var(--measure); }
.lede strong { color: var(--ink); font-weight: 600; }
.lede:last-of-type { margin-bottom: 0; }

/* ─── section furniture ──────────────────────────────────────────────────── */

section { padding: 62px 0; }

/* The rules between sections do the separating, so where there is no rule the padding
   has to. Between "who we are" and the signup card there is none, and 124px of nothing
   reads as a bug rather than a breath. */
#keep-in-touch { padding-top: 10px; }

.section-lede { margin-bottom: 30px; }

.rule { border: 0; border-top: 1px solid var(--line); margin: 0; }

.eyebrow {
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--faint); margin: 0 0 14px;
}
h2 {
  font-family: 'Newsreader', ui-serif, Georgia, serif;
  font-weight: 600; font-size: clamp(1.6rem, 4.4vw, 2rem);
  letter-spacing: -0.015em; line-height: 1.2; margin: 0 0 18px;
}

/* ─── products ───────────────────────────────────────────────────────────── */

.products { display: grid; gap: 18px; grid-template-columns: 1fr 1fr; }
@media (max-width: 660px) { .products { grid-template-columns: 1fr; } }

.product {
  display: flex; flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  text-decoration: none; color: inherit;
}
/* Only the live product is a link, so only it gets the affordance. */
a.product { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
a.product:hover {
  transform: translateY(-2px);
  border-color: #dcd2c0;
  box-shadow: 0 10px 26px rgba(31, 34, 48, 0.08);
}
@media (prefers-reduced-motion: reduce) { a.product:hover { transform: none; } }

.product-top { display: flex; align-items: center; gap: 13px; margin-bottom: 16px; }
.product-top img {
  width: 46px; height: 46px; border-radius: 11px;
  border: 1px solid var(--line); flex: none;
}
.product-name { font-weight: 650; font-size: 1.12rem; letter-spacing: -0.01em; }

.tag {
  display: inline-block; margin-top: 3px;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.09em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px;
}
.tag-live { color: var(--teal-deep); background: #dff2ef; }
.tag-soon { color: #8a5a20; background: #f6e9d5; }

.product p { margin: 0 0 14px; color: var(--muted); font-size: 0.98rem; }
.product p:last-child { margin-bottom: 0; }

.product-go { margin-top: auto; font-weight: 600; font-size: 0.96rem; color: var(--teal-dark); }
a.product:hover .product-go { color: var(--teal-deep); }
.product-go .arr { display: inline-block; transition: transform .18s ease; }
a.product:hover .product-go .arr { transform: translateX(3px); }

.product-wait { margin-top: auto; font-weight: 500; font-size: 0.96rem; color: var(--faint); }

/* ─── about ──────────────────────────────────────────────────────────────── */

.people { display: grid; gap: 30px; grid-template-columns: 1fr 1fr; margin-top: 34px; }

/* Portrait above the name, not beside it. Two columns all the way down —
   two faces side by side reads as a pair, and stacking them would put a
   scroll between two people who are meant to be seen together. */
.person { text-align: center; }
/* The photos are transparent cutouts. A circular clip on its own is invisible —
   with nothing behind it there is no edge to see, and all it does is slice the
   shoulders off flat. So the disc is a background colour and the cutout sits on
   it: the circle reads, and the subject still looks cut out rather than boxed.
   The crop is centred on the face upstream, so the clip takes shoulders only. */
.person img {
  width: 132px; height: 132px;
  border-radius: 50%;
  background: var(--disc);
  object-fit: cover;
  margin: 0 auto 14px;
}
@media (max-width: 480px) { .person img { width: 108px; height: 108px; } }
.person h3 { margin: 0 0 4px; font-size: 1.02rem; font-weight: 650; }
.person p { margin: 0; font-size: 0.95rem; color: var(--muted); }

/* ─── signup ─────────────────────────────────────────────────────────────── */

.signup {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px;
}
.signup h2 { margin-bottom: 10px; }
.signup .sub { color: var(--muted); margin: 0 0 22px; font-size: 1.02rem; }

.form-row { display: flex; gap: 10px; }
@media (max-width: 560px) { .form-row { flex-direction: column; } }

input[type='email'] {
  flex: 1; min-width: 0;
  font: inherit; font-size: 1rem;
  padding: 13px 15px;
  color: var(--ink); background: var(--bg);
  border: 1px solid var(--line); border-radius: 11px;
}
input[type='email']::placeholder { color: var(--faint); }
input[type='email']:focus { outline: 2px solid var(--teal-dark); outline-offset: 1px; border-color: transparent; }

.btn {
  font: inherit; font-weight: 600; font-size: 1rem;
  padding: 13px 26px; white-space: nowrap;
  color: #fff; background: var(--coral);
  border: 0; border-radius: 11px; cursor: pointer;
  transition: background .15s ease;
}
.btn:hover { background: var(--coral-dark); }
.btn[disabled] { opacity: .6; cursor: default; }

.consent { margin: 14px 0 0; font-size: 0.86rem; color: var(--faint); }
.consent a { color: var(--muted); }

.form-note { margin: 14px 0 0; font-size: 0.95rem; font-weight: 500; }
.form-note.ok { color: var(--teal-deep); }
.form-note.err { color: var(--err); }

/* Kit needs a real field it can see but a person cannot — the honeypot. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ─── footer ─────────────────────────────────────────────────────────────── */

.site-foot {
  border-top: 1px solid var(--line);
  padding: 30px 0 46px;
  display: flex; flex-wrap: wrap; gap: 10px 22px;
  align-items: center; justify-content: space-between;
  font-size: 0.92rem; color: var(--faint);
}
.site-foot nav { display: flex; flex-wrap: wrap; gap: 18px; }
.site-foot a { color: var(--muted); text-decoration: none; }
.site-foot a:hover { color: var(--teal-deep); text-decoration: underline; }

/* ─── /ssot — the explainer ──────────────────────────────────────────────────
 *
 * A reading page, so it gets a narrower measure than the home page and more air
 * between headings. Everything else is the same tokens.
 */

.essay { max-width: 640px; margin: 0 auto; padding: 0 22px; }

.essay-head { padding: 66px 0 0; }
.essay h1 {
  font-family: 'Newsreader', ui-serif, Georgia, serif;
  font-weight: 600;
  font-size: clamp(2.1rem, 6vw, 2.9rem);
  line-height: 1.1; letter-spacing: -0.02em;
  margin: 0 0 18px;
}
/* The definition only — the one line on the page set apart from body copy. */
.essay .lede { font-size: 1.16rem; }

/* Marks the sentence as a definition without boxing it. A label, not emphasis —
   which is why it takes the accent colour rather than plain bold, the site's
   convention for a stressed phrase. It also introduces the abbreviation the
   page is filed under. */
.term { font-weight: 650; color: var(--teal-deep); }


/* The two inline marks. Coral for where the information goes, teal for the turn
   in the argument. Both at 500 rather than bold: plain bold is already the
   site's convention for a stressed phrase, and these are a different signal.

   Both take the darkened token, not the button colour — --coral and --teal-dark
   measure 2.84:1 and 3.93:1 on the cream ground, under the 4.5:1 needed for
   body text at this size. */
.where { color: var(--coral-ink); font-weight: 500; }
.hl { color: var(--teal-deep); font-weight: 500; }

/* The outward reference. Body size, so the head of the page reads as one voice —
   only the definition is set apart. Still quiet in colour, because it is
   corroboration rather than a next step. */
.source { margin: -4px 0 0; font-size: 1rem; }
.source a { color: var(--muted); text-decoration-color: var(--line); text-underline-offset: 3px; }
.source a:hover { color: var(--teal-deep); text-decoration-color: var(--teal); }

.essay section { padding: 40px 0 0; }
.essay h2 {
  font-family: 'Newsreader', ui-serif, Georgia, serif;
  font-size: 1.42rem; margin: 0 0 14px;
}
.essay p { margin: 0 0 17px; }
.essay p:last-child { margin-bottom: 0; }
.essay strong { font-weight: 650; }

/* The trust chain. Always vertical: four steps will not fit across a 640px
   reading measure, and stacking is how a derivation reads anyway — each step is
   caused by the one above it. The label carries the beat; the line explains it. */
.chain { margin: 26px 0; }
.chain-step {
  display: grid;
  grid-template-columns: 112px 1fr;
  gap: 14px; align-items: baseline;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 12px; padding: 13px 16px;
  font-size: 0.95rem; line-height: 1.45;
}
.chain-step.end { border-color: #f3c9c0; background: #fdf2ef; }
.chain-step b {
  font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--faint); font-weight: 600;
}
.chain-step.end b { color: var(--coral-dark); }
.chain-arrow {
  height: 20px; margin-left: 30px;
  border-left: 2px solid #ddd3c2;
}
@media (max-width: 520px) {
  .chain-step { grid-template-columns: 1fr; gap: 4px; }
  .chain-arrow { margin-left: 20px; }
}

.cite {
  font-size: 0.86rem; color: var(--faint);
  border-top: 1px solid var(--line); padding-top: 12px; margin-top: 22px;
}

/* Route back out to the things the argument is about. */
.next {
  display: flex; flex-wrap: wrap; gap: 12px;
  margin-top: 26px;
}
.next a {
  flex: 1 1 240px;
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 16px 18px; text-decoration: none; color: inherit;
  transition: border-color .18s ease, box-shadow .18s ease;
}
/* Each product's own mark, as on the home page — same source files, smaller,
   since these cards are a footnote to the argument rather than the shelf. */
.next a img {
  width: 40px; height: 40px; flex: none;
  border-radius: 10px; border: 1px solid var(--line);
}
.next a:hover { border-color: #dcd2c0; box-shadow: 0 8px 20px rgba(31,34,48,.07); }
.next b { display: block; font-size: 1rem; font-weight: 650; margin-bottom: 3px; }
.next span { font-size: 0.9rem; color: var(--muted); }

/* The hero's link to this page. Underlined rather than coloured, because the
   phrase is already bold and a third signal would shout. */
.lede a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--teal);
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}
.lede a:hover { color: var(--teal-deep); }