/* ZAAEE — "Field Notes" design system. Spec: docs/design-system.md
   Designed for the 2am read: large type, short measure, low glare, one thumb. */

:root {
  /* ---- the five ---------------------------------------------------- */
  --ink:       #1F2B27;   /* text — near-black with eucalypt in it */
  --paper:     #F6F2E9;   /* ground — warm, unbleached */
  --eucalypt:  #6E8A78;   /* structure — eyebrows, rules, markers */
  --mulberry:  #6C4356;   /* the one loud colour — links, CTAs, the strand */
  --parchment: #E9E2D2;   /* panel fill — short answer, callouts */

  /* ---- derived tones (mixes of the five, never new hues) ----------- */
  --ink-soft:  #4A5A52;   /* secondary text */
  --rule:      #E0D9C7;   /* hairlines and borders, parchment deepened */
  --ink-well:  #2A3833;   /* form fields on the dark band */
  --ink-mist:  #7E8F86;   /* placeholders, fine print on the dark band */
  --paper-dim: #CBCEC0;   /* body copy on the dark band */

  /* ---- type: two faces only ---------------------------------------- */
  --display: "Fraunces", Georgia, serif;
  --body:    "Newsreader", Georgia, serif;

  /* ---- space: 8 / 16 / 24 / 40 / 64 / 96 --------------------------- */
  --s1: .5rem;
  --s2: 1rem;
  --s3: 1.5rem;
  --s4: 2.5rem;
  --s5: 4rem;
  --s6: 6rem;

  --measure: 34rem;   /* do not widen — one-handed at 2am */
  --wide:    72rem;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1.1875rem;      /* 19px — she can't zoom, she's holding a baby */
  line-height: 1.72;
  font-optical-sizing: auto;
}

/* ---------- the strand: reading-progress hairline ---------- */
.strand {
  position: fixed; top: 0; left: 0; height: 2px; width: 0%;
  background: var(--mulberry); z-index: 100;
  transition: width .08s linear;
}

/* ---------- layout ---------- */
.wrap { max-width: var(--wide); margin: 0 auto; padding: 0 var(--s3); }
.col  { max-width: var(--measure); margin: 0 auto; padding: 0 var(--s3); }

/* ---------- masthead ---------- */
.masthead {
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
  position: sticky; top: 0; z-index: 50;
}
.masthead .wrap {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s2); padding-top: 1.15rem; padding-bottom: 1.15rem;
}
.wordmark {
  font-family: var(--display);
  font-weight: 600; font-size: 1.4rem;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink); text-decoration: none;
  font-variation-settings: "SOFT" 40, "WONK" 1;
}
.wordmark span { display: block; font-family: var(--body); font-size: .62rem;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--eucalypt); font-weight: 500; margin-top: .25rem; }
.nav { display: flex; gap: var(--s3); font-family: var(--body); font-size: .84rem;
  font-weight: 500; letter-spacing: .07em; text-transform: uppercase; }
.nav a { color: var(--ink-soft); text-decoration: none; padding-bottom: 2px; }
.nav a:hover, .nav a:focus-visible { color: var(--mulberry); border-bottom: 1px solid var(--mulberry); }

/* ---------- hero ---------- */
.hero { padding: var(--s6) 0 var(--s5); }
.hero .col { text-align: left; }
.eyebrow {
  font-family: var(--body); font-size: .76rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--eucalypt);
  margin: 0 0 var(--s3);
}
h1 {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(2.4rem, 7vw, 3.9rem); line-height: 1.07;
  letter-spacing: -.02em; margin: 0 0 var(--s3);
  font-variation-settings: "SOFT" 60, "WONK" 1;
  text-wrap: balance;
}
.standfirst { font-size: 1.28rem; color: var(--ink-soft); margin: 0 0 var(--s4); }
/* Links outside .prose (404, hero copy) still take the one loud colour. */
.hero a { color: var(--mulberry); text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* ---------- the signature: short-answer block ---------- */
.short-answer {
  border-left: 3px solid var(--mulberry);
  background: var(--parchment);
  padding: 1.6rem 1.75rem;
  margin: var(--s4) 0;
  border-radius: 0 4px 4px 0;
}
.short-answer .label {
  font-family: var(--body); font-size: .72rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--mulberry); display: block; margin-bottom: .6rem;
}
.short-answer p { margin: 0; font-size: 1.15rem; }
.short-answer p + p { margin-top: .8rem; }

/* ---------- prose ---------- */
.prose { padding-bottom: var(--s5); }
.prose h2 {
  font-family: var(--display); font-weight: 500; font-size: 1.75rem;
  line-height: 1.2; letter-spacing: -.01em;
  margin: var(--s4) 0 var(--s2); font-variation-settings: "SOFT" 50, "WONK" 1;
}
.prose h3 { font-family: var(--display); font-weight: 600; font-size: 1.25rem; margin: 2.2rem 0 .6rem; }
.prose p, .prose li { font-size: 1.1875rem; }
.prose ul, .prose ol { padding-left: 1.3rem; }
.prose li { margin-bottom: .7rem; }
.prose li::marker { color: var(--eucalypt); }
.prose a { color: var(--mulberry); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.prose strong { font-weight: 600; }
.prose hr {
  border: 0; height: 1px; background: var(--rule); margin: var(--s4) 0;
}

.callout {
  background: var(--parchment); padding: 1.4rem 1.6rem; border-radius: 4px;
  margin: 2.2rem 0; font-size: 1.05rem;
}
.callout strong { display: block; font-family: var(--body); font-size: .74rem;
  letter-spacing: .14em; text-transform: uppercase; margin-bottom: .5rem; color: var(--ink); }

.disclaimer {
  border-top: 1px solid var(--rule);
  margin-top: 3.5rem; padding-top: var(--s3);
  font-size: .95rem; line-height: 1.6; color: var(--ink-soft);
}

.meta {
  font-family: var(--body); font-size: .82rem; letter-spacing: .04em;
  color: var(--eucalypt); margin: 0 0 var(--s4);
  display: flex; gap: .6rem; flex-wrap: wrap; align-items: center;
}
.meta .dot { color: var(--rule); }

/* ---------- article list ---------- */
.list { padding: var(--s4) 0 var(--s6); }
.entry {
  display: block; text-decoration: none; color: inherit;
  border-top: 1px solid var(--rule);
  padding: var(--s4) 0;
}
.entry:last-child { border-bottom: 1px solid var(--rule); }
.entry h2 {
  font-family: var(--display); font-weight: 500; font-size: 1.6rem;
  line-height: 1.18; margin: .4rem 0 .5rem;
  font-variation-settings: "SOFT" 50, "WONK" 1;
}
.entry:hover h2, .entry:focus-visible h2 { color: var(--mulberry); }
.entry p { margin: 0; color: var(--ink-soft); font-size: 1.05rem; }
.entry .kicker { font-family: var(--body); font-size: .74rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--eucalypt); }

/* ---------- waitlist ---------- */
.waitlist { background: var(--ink); color: var(--paper); padding: var(--s5) 0; margin-top: var(--s5); }
.waitlist h2 {
  font-family: var(--display); font-weight: 500; font-size: clamp(1.8rem, 5vw, 2.5rem);
  line-height: 1.12; margin: 0 0 var(--s2); color: var(--paper);
  font-variation-settings: "SOFT" 60, "WONK" 1;
}
.waitlist p { color: var(--paper-dim); margin: 0 0 var(--s4); }
.form-row { display: flex; gap: .6rem; flex-wrap: wrap; }
.form-row input[type=email] {
  flex: 1 1 15rem; min-width: 0;
  font-family: var(--body); font-size: 1rem; padding: .95rem 1.1rem;
  border: 1px solid var(--ink-soft); border-radius: 3px; background: var(--ink-well); color: var(--paper);
}
.form-row input[type=email]::placeholder { color: var(--ink-mist); }
.form-row input[type=email]:focus-visible { outline: 2px solid var(--eucalypt); outline-offset: 1px; }
.btn {
  font-family: var(--body); font-size: .98rem; font-weight: 600; letter-spacing: .04em;
  padding: .95rem 1.7rem; border: 0; border-radius: 3px; cursor: pointer;
  background: var(--paper); color: var(--ink);
}
.btn:hover { background: var(--mulberry); color: var(--paper); }
.form-note { font-size: .85rem; color: var(--ink-mist); margin-top: var(--s2); }
.form-note.is-ok  { color: var(--paper); }
.form-note.is-err { color: #E2A9B4; }   /* mulberry lifted to read on --ink */

/* ---------- footer ---------- */
.foot {
  border-top: 1px solid var(--rule); padding: var(--s4) 0;
  font-size: .9rem; color: var(--ink-soft);
}
.foot .wrap { display: flex; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; }
.foot a { color: var(--ink-soft); }
.socials { display: flex; gap: 1.2rem; }

:focus-visible { outline: 2px solid var(--mulberry); outline-offset: 2px; }

@media (max-width: 640px) {
  body { font-size: 1.125rem; }
  .hero { padding: var(--s4) 0 var(--s4); }
  .masthead .wrap { flex-direction: column; align-items: flex-start; gap: .9rem; }
  .nav { gap: 1.1rem; font-size: .8rem; }
  .col, .wrap { padding: 0 1.25rem; }
}