/* Parent Pep Talks brand system — shared by every page on parentpeptalks.com.
   Two worlds. The warm paper world is the interface: bone field, charcoal ink,
   1px hairlines. The black night world is the artwork, used exactly as Allie
   painted it — deep-navy night field, ice-blue foam hsl(197 100% 95%),
   lemon glow hsl(54 77% 66%) — hung full-bleed as a band from the very top
   of the page,
   cropping at the viewport edges (the framed-print staging from PR #5 is
   retired). Gold bridges the worlds: one gold family, and the CTA --primary
   is the brand's single gold — Allie's Oct 23 pick anchors everything on the
   button's own gold (#e0b051, hsl(40 70% 60%)): the mark carries the CTA gold
   in every context, and the duck artwork converges on the same gold.
   The artwork's thick carved linocut lines against the UI's 1px hairlines are
   an intentional contrast, not a mismatch. There are no navy tokens — the
   navy idea was declined. On the band the header floats transparent and the
   lockup switches to its cream variant (CTA-gold ring, cream envelope, and
   the bold cream wordmark); the tagline and email capture stay in the warm
   world below, never overlaid on the artwork. Fonts stay the system stack
   on purpose — no webfonts. */
:root {
  --background: hsl(39 36% 94%);   /* warm bone */
  --surface: hsl(42 40% 98%);      /* inputs and panel backing, a step lighter */
  --foreground: hsl(30 7% 13%);    /* charcoal ink */
  --muted-foreground: hsl(30 6% 38%);
  --border: hsl(35 16% 82%);       /* hairline */
  --primary: hsl(40 70% 60%);      /* the brand gold — ring and duck follow this token */
  --primary-foreground: hsl(30 8% 10%);
  --success: hsl(33 55% 32%);      /* deep gold-amber, legible on bone */
  --destructive: hsl(8 65% 40%);
  --footer-ink: hsl(40 27% 92%);
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-heading: Georgia, "Times New Roman", serif;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
}
.site-header {
  display: flex;
  align-items: center;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--border);
}
/* The lockup: inline SVG life-ring mark plus real text in the site's Georgia
   serif (crisper at header size than outlined SVG text, and it honors the
   no-webfonts rule). .logo's font-size is set to its own height so the
   wordmark and the mark gap (.21em, measured off the old PNG) scale with
   the 768px height step. The wordmark runs .58em bold — the Oct 23 bump
   from the PNG-matched .46em regular so the brand reads at a glance next
   to the gold ring. */
.logo {
  display: inline-flex;
  align-items: center;
  gap: .21em;
  height: 2rem;
  font-size: 2rem;
  text-decoration: none;
}
.logo-mark { display: block; height: 100%; width: auto; }
/* Warm brown sampled from the retired logo.png wordmark (#88735d). */
.logo-word {
  font-family: var(--font-heading);
  font-size: .58em;
  font-weight: 700;
  line-height: 1;
  color: #88735d;
  white-space: nowrap;
}
@media (min-width: 768px) {
  .site-header { padding: 1rem 2.5rem; }
  .logo { height: 2.25rem; font-size: 2.25rem; }
}
/* Homepage header floats over the band: transparent, no hairline, and the
   cream logo variant (CTA-gold ring, cream envelope and wordmark).
   /signup and /welcome keep the bone-backed header. */
.site-header.hero-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  background: transparent;
  border-bottom: none;
}
/* On the band the wordmark goes cream (the same bone as the cream PNG's). */
.hero-header .logo-word { color: var(--footer-ink); }
main { flex: 1; display: flex; flex-direction: column; }

/* The hero is a full-bleed band from the very top of the page: edge-to-edge
   artwork, no border, no shadow, no rounded corners — the wave crops at the
   viewport edges. The wide artwork carries desktop and landscape; portrait
   phones swap to the tall artwork via the index.html <picture>. Height stays
   generous so the vast-ocean scope reads, but capped so the tagline and email
   capture still peek into the first screenful, and object-position holds the
   duck in frame. */
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hero-band {
  width: 100%;
  height: clamp(420px, 58vh, 640px);
  overflow: hidden;
}
.hero-band .hero-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Wide artwork: horizon at ~23% of frame height, duck at ~73% — the center
     window keeps both in frame across desktop sizes. */
  object-position: center 50%;
  pointer-events: none;
}
@media (max-width: 640px) {
  /* Landscape phones: short band on the wide artwork — today's crop. */
  .hero-band { height: clamp(240px, 34vh, 320px); }
}
@media (max-width: 640px) and (orientation: portrait) {
  /* Portrait phones get the tall artwork: a taller band opens up the ocean
     expanse; a low anchor keeps the duck and main crest in frame — the duck
     sits at ~86% of the tall frame. */
  .hero-band { height: clamp(380px, 56vh, 520px); }
  .hero-band .hero-image { object-position: center 78%; }
}
/* The promise line lives in the warm space below the band — charcoal
   serif-italic ink on bone, never overlaid on the artwork. */
.hero-line {
  margin: clamp(1.25rem, 3vh, 2rem) 0 0;
  max-width: 34rem;
  padding: 0 1.5rem;
  text-align: center;
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.25rem, 2.6vw, 1.875rem);
  line-height: 1.35;
  letter-spacing: -0.01em;
}
.signup {
  width: 100%;
  padding: clamp(1.5rem, 4vh, 3rem) 1.5rem 2.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.signup-inner { width: 100%; max-width: 32rem; text-align: center; }
/* /signup is a standalone moment: one centered column, filling the viewport. */
.signup-centered { flex: 1; justify-content: center; }
.tagline {
  margin: 0 0 1.5rem;
  line-height: 1.625;
  font-size: clamp(0.9rem, 1.6vw, 1.1rem);
  font-weight: 300;
  color: var(--muted-foreground);
}
/* The promise headline on /signup — same serif-italic voice as the homepage
   caption, but in document flow and scaled up for a page with nothing else in it. */
.signup-title {
  margin: 0 0 1.5rem;
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.75rem, 4.5vw, 2.75rem);
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.fields { display: flex; flex-direction: column; gap: .625rem; margin-bottom: .625rem; }
.field {
  width: 100%;
  padding: .75rem 1rem;
  border-radius: .5rem;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: .875rem;
  outline: none;
  min-width: 0;
  transition: border-color .2s;
}
.field::placeholder { color: var(--muted-foreground); opacity: 1; }
/* Focus goes to ink, not gold — gold stays exclusively on the primary action. */
.field:focus { border-color: var(--foreground); }
@media (min-width: 640px) {
  .fields { flex-direction: row; }
  .field.first-name { flex: 1; }
  .field.email { flex: 2; }
}
.submit {
  width: 100%;
  padding: .75rem 2rem;
  border: none;
  border-radius: .5rem;
  background: var(--primary);
  color: var(--primary-foreground);
  font-family: var(--font-sans);
  font-size: .875rem;
  font-weight: 500;
  letter-spacing: .02em;
  cursor: pointer;
  transition: opacity .2s;
}
.submit:hover { opacity: .9; }
.submit:disabled { opacity: .6; cursor: default; }
.fine-print { margin: .625rem 0 0; font-size: .75rem; color: hsl(30 6% 38% / .75); }
.fallback-cta {
  display: block;
  width: 100%;
  padding: .75rem 2rem;
  border-radius: .5rem;
  background: var(--primary);
  color: var(--primary-foreground);
  text-decoration: none;
  text-align: center;
  font-size: .875rem;
  font-weight: 500;
  letter-spacing: .02em;
  transition: opacity .2s;
}
.fallback-cta:hover { opacity: .9; }
.form-status { margin: .75rem 0 0; font-size: .875rem; }
.form-status[data-state="success"] { color: var(--success); }
.form-status[data-state="error"] { color: var(--destructive); }
/* Charcoal concentrates in the footer band — the page's dark anchor on bone. */
.site-footer {
  padding: 2rem 1.5rem;
  background: var(--foreground);
  color: var(--footer-ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
}
.site-footer p { margin: 0; }
.footer-note { font-size: .875rem; opacity: .85; }
.footer-copyright { font-size: .75rem; opacity: .6; }

/* /welcome — page two of the two-step signup. The celebration header carries
   the homepage's old success line verbatim; the profile form below it is a
   left-aligned labeled column inside the same centered page column, styled
   from the existing field/submit primitives. */
.welcome-title {
  margin: 0 0 .75rem;
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.75rem, 4.5vw, 2.75rem);
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.welcome-lead {
  margin: 0 auto 2.25rem;
  max-width: 30rem;
  line-height: 1.625;
  font-size: .9rem;
  font-weight: 300;
  color: var(--muted-foreground);
}
.incentive { margin: 0 auto 2rem; max-width: 30rem; }
.incentive-title {
  margin: 0 0 .5rem;
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.25rem, 2.6vw, 1.625rem);
  line-height: 1.3;
}
.incentive-copy { margin: 0; line-height: 1.625; font-size: .9rem; color: var(--muted-foreground); }
.optionality { margin: .75rem 0 0; line-height: 1.625; font-size: .8125rem; color: hsl(30 6% 38% / .75); }
.welcome-form { text-align: left; }
/* Seven stacked fields on every viewport — the homepage's side-by-side row is
   a two-field layout, not this one. Labels carry the vertical rhythm. */
.welcome-form .fields { flex-direction: column; gap: 0; margin-bottom: 1.25rem; }
.field-label { display: block; margin: 1.125rem 0 .375rem; font-size: .8125rem; font-weight: 500; }
.field-label:first-child { margin-top: 0; }
.field-help { margin: .375rem 0 0; font-size: .75rem; color: hsl(30 6% 38% / .75); }
/* Locked email: prefilled from the homepage handoff, readonly, visibly muted. */
.field-locked { background: hsl(42 20% 92%); color: var(--muted-foreground); }
.field-locked:focus { border-color: var(--border); }

/* /notes/<slug>/ — the daily-note archive. One article column in the warm
   world: the note itself is set in the site's Georgia serif (the letter is
   the product), the kicker carries date and category, and the signup block
   below reuses the form primitives untouched. Pattern reference:
   notes/example/ — flow documented in notes/README.md. */
.note {
  width: 100%;
  max-width: 34rem;
  margin: 0 auto;
  padding: clamp(2rem, 6vh, 3.5rem) 1.5rem 0;
}
/* Only the template example wears the banner — real notes drop it (and the
   noindex) when they publish. */
.example-banner {
  margin: 0 0 2rem;
  padding: .75rem 1rem;
  border: 1px solid var(--border);
  border-radius: .5rem;
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--muted-foreground);
}
.note-kicker {
  margin: 0 0 .75rem;
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: hsl(30 6% 38% / .75);
}
.note-title {
  margin: 0 0 1.75rem;
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.75rem, 4.5vw, 2.5rem);
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.note-body {
  font-family: var(--font-heading);
  font-size: 1.0625rem;
  line-height: 1.75;
}
.note-body p { margin: 0 0 1.25rem; }
.note-signoff { font-style: italic; color: var(--muted-foreground); }
/* Prev/next links between neighboring notes, once real notes exist. */
.note-nav {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: 2rem 0 0;
  font-size: .875rem;
}
.note-nav a {
  color: var(--foreground);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* /sleep — the Sleep Disruption Calculator.
   Same warm world as /signup: the centered bone column, serif-italic display
   type, and gold reserved for the one primary action. The calculator adds
   symptom chips and a result card; both lean on the shared field, submit,
   and note primitives above. */

.sleep {
  flex: 1;
  justify-content: center;
  padding-top: clamp(2rem, 6vh, 3.5rem);
}

.sleep-lead {
  margin: 0 0 1.5rem;
  line-height: 1.625;
  font-size: .9rem;
  font-weight: 300;
  color: var(--muted-foreground);
}

.dst-banner {
  margin: 0 0 1.5rem;
  padding: .75rem 1rem;
  border: 1px solid var(--border);
  border-radius: .5rem;
  background: var(--surface);
  font-size: .8125rem;
  line-height: 1.55;
  color: var(--muted-foreground);
}

.dst-banner strong {
  color: var(--foreground);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: .5rem 0 1.5rem;
}

.chip {
  padding: .5rem .875rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: .8125rem;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, color .2s ease;
}

.chip:hover {
  border-color: var(--foreground);
}

/* Selected: ink, not gold — gold stays exclusively on the primary action. */
.chip.selected {
  background: var(--foreground);
  border-color: var(--foreground);
  color: var(--background);
}

.chip.featured {
  border-color: var(--foreground);
  font-weight: 500;
}

.sleep-date {
  width: 100%;
  max-width: 16rem;
}

.result {
  margin: 1.75rem 0 0;
  padding: 1.25rem 1.25rem 1.5rem;
  border: 1px solid var(--border);
  border-radius: .5rem;
  background: var(--surface);
}

.result-kicker {
  margin: 0 0 .5rem;
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: hsl(30 6% 38% / .75);
}

.result-title {
  margin: 0 0 .25rem;
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.375rem, 3vw, 1.75rem);
  line-height: 1.3;
}

.result-band {
  margin: 0 0 .75rem;
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: hsl(30 6% 38% / .75);
}

.result-summary {
  margin: 0 0 .75rem;
  line-height: 1.625;
  font-size: .9rem;
}

.result-why {
  margin: 0 0 .75rem;
  line-height: 1.625;
  font-size: .875rem;
  color: var(--muted-foreground);
}

.result-duration {
  margin: 0 0 1.25rem;
  font-size: .8125rem;
  color: var(--muted-foreground);
}

.result-duration strong {
  color: var(--foreground);
  font-weight: 500;
}

.script-label {
  margin: 0 0 .5rem;
  font-family: var(--font-sans);
  font-size: .8125rem;
  font-weight: 500;
}

.script-block {
  padding: 1rem 1.25rem;
  border: 1px solid var(--border);
  border-radius: .5rem;
  background: var(--background);
  font-family: var(--font-heading);
  font-size: 1rem;
  line-height: 1.7;
}

.script-block p {
  margin: 0;
}

.result-alt {
  margin: 1rem 0 0;
  font-size: .8125rem;
  font-style: italic;
  color: var(--muted-foreground);
}

.result-error {
  margin: 0;
  color: var(--destructive);
  font-size: .875rem;
  line-height: 1.625;
}

.capture {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}

.capture-title {
  margin: 0 0 1rem;
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.25rem, 2.6vw, 1.625rem);
  line-height: 1.3;
}


/* Homepage nav — the one cross-page hop out of the header, to /sleep.
   Cream over the band (the same footer-ink as the wordmark), Georgia
   like the lockup, underline offset matching the notes' prev/next links.
   Phones wrap it to its own row under the lockup: one line cannot hold
   the wordmark plus a full question at 360px. */
.site-nav {
  margin-left: auto;
  font-family: var(--font-heading);
  font-size: .875rem;
}

.site-nav a {
  color: var(--footer-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.site-nav a:hover { opacity: .9; }

@media (max-width: 767px) {
  .site-header.hero-header { flex-wrap: wrap; }
  .site-header.hero-header .site-nav {
    flex-basis: 100%;
    text-align: right;
    padding-top: .25rem;
  }
}

/* /normal — Is This Normal? Checker. Reuses the shared signup, field, chip,
   and result primitives; adds only the checker's own pieces: the lead, the
   months field, the search row, the counter line, and the estimate footnote. */

.normal {
  flex: 1;
  justify-content: center;
  padding-top: clamp(2rem, 6vh, 3.5rem);
}

.normal-lead {
  margin: 0 0 1.5rem;
  line-height: 1.625;
  font-size: .9rem;
  font-weight: 300;
  color: var(--muted-foreground);
}

.normal-months {
  width: 100%;
  max-width: 16rem;
}

.normal-search {
  display: flex;
  gap: .5rem;
}

.normal-search .field { flex: 1; }

.normal-search .submit { white-space: nowrap; }

/* The counter line wears the italic serif the result title wears — it is the
   warm center of the card, not metadata. */
.result-counter {
  margin: 0 0 1rem;
  font-family: var(--font-heading);
  font-style: italic;
  font-size: .95rem;
  line-height: 1.6;
}

.result-footnote {
  margin: .75rem 0 0;
  font-size: .75rem;
  line-height: 1.6;
  color: var(--muted-foreground);
}