/* =========================================================
   Stonk Daily — landing page
   Built to the app's visual style guide (editorial / newspaper).
   System fonts only. Light/dark via prefers-color-scheme.
   Mobile-first (design target: 390px), scales up gracefully.
   ========================================================= */

:root {
  /* canvas */
  --bg:        #FAFAFA;
  --surface:   #FFFFFF;   /* raised paper (briefing card) */

  /* brand */
  --orange:    #F04E23;   /* EMPHASIS ONLY — inline bold, lead bullet */
  --navy:      #1D1B6B;   /* structure: labels, date, dividers (light) */
  --indigo:    #6E6BC4;   /* structure in dark mode */
  --structure: var(--navy);

  /* ink (near-black on light canvas) */
  --ink-headline: rgba(10,10,10,1);
  --ink-body:     rgba(10,10,10,0.85);
  --ink-subhead:  rgba(10,10,10,0.75);
  --ink-quiet:    rgba(10,10,10,0.30);
  --rule:         rgba(29,27,107,0.4);   /* navy @ 40% */
  --hairline:     rgba(10,10,10,0.08);

  /* type */
  --font-serif: Georgia, "Times New Roman", Palatino, serif;
  --font-sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* shape & rhythm */
  --radius-card: 14px;
  --read: 31rem;          /* phone-ish reading column (~496px) */
  --pad-x: 22px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:        #0F0F0F;
    --surface:   #161616;
    --structure: var(--indigo);
    --ink-headline: rgba(250,250,250,1);
    --ink-body:     rgba(250,250,250,0.85);
    --ink-subhead:  rgba(250,250,250,0.75);
    --ink-quiet:    rgba(250,250,250,0.30);
    --rule:         rgba(110,107,196,0.4); /* indigo @ 40% */
    --hairline:     rgba(250,250,250,0.10);
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink-body);
  font-family: var(--font-serif);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

/* ---- Layout helpers ------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--read);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}
/* one consistent gap between sections: each section owns only its TOP space,
   so boundaries never double-up. Hero (a <header>) and the footer bookend it. */
section { padding-top: clamp(3rem, 9vw, 5rem); padding-bottom: 0; }

/* ---- Section label (── LABEL ── newspaper divider) ------ */
.section-label {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 1.5rem;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--structure);
}
.section-label::before,
.section-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rule);
}

/* ---- App Store badge (official Apple badge image) ------- */
.appstore-badge { display: inline-block; line-height: 0; }
.appstore-badge img { height: 64px; width: auto; }
.appstore-badge:active { transform: translateY(1px); }

/* =========================================================
   1. HERO
   ========================================================= */
.hero { padding-top: 2rem; text-align: center; }

.logo { display: block; }
.logo img { height: 96px; width: auto; margin-inline: auto; }

.display {
  font-family: var(--font-serif);
  font-weight: 700;
  /* sized so the longest line stays on ONE line down to 360px */
  font-size: clamp(1.75rem, 8vw, 2.75rem);
  line-height: 1.1;
  color: var(--ink-headline);
  margin: 1.25rem 0 0.6rem;
}
.display span {
  display: block;
  white-space: nowrap;   /* each line never wraps */
}
.subhead {
  font-family: var(--font-serif);
  font-size: 21px;
  line-height: 1.45;
  color: var(--ink-subhead);
  max-width: 34rem;       /* one line on web */
  margin: 0 auto 1.75rem;
}

.phone {
  /* bleed past the column padding so it can go bigger than the text width */
  margin-top: 2.5rem;
  margin-inline: calc(-1 * var(--pad-x));
  width: calc(100% + 2 * var(--pad-x));
  max-width: none;
}
.phone img { width: 100%; max-width: 520px; margin-inline: auto; }

/* =========================================================
   2. PROBLEM BEAT
   ========================================================= */
.problem { text-align: center; }
.problem p {
  font-size: 20px;
  line-height: 1.5;
  color: var(--ink-body);
  margin: 0 0 0.6rem;
}
.problem p:last-child { color: var(--ink-subhead); margin-bottom: 0; }

/* =========================================================
   3. THE BRIEFING — rendered exactly like the app
   ========================================================= */
.briefing .paper {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  padding: 28px 22px 32px;
}

/* brief masthead */
.brief-logo { height: 64px; width: auto; margin: 0 auto 10px; }
.brief-date {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--structure);
  text-align: center;
  margin: 0 0 14px;
}
.brief-headline {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink-headline);
  text-align: left;
  margin: 0 0 14px;
}
.brief-subhead {
  font-size: 18px;
  line-height: 1.5;
  color: var(--ink-subhead);
  margin: 0 0 22px;
}

/* story blocks */
.story { padding-block: 6px; }
.story + .story {
  border-top: 1px solid var(--rule);
  margin-top: 22px;
  padding-top: 22px;
}
.story .lead {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--ink-headline);
  margin: 0 0 16px;
}
.story p {
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-body);
  margin: 0 0 16px;
}
.story p:last-child { margin-bottom: 0; }

/* inline emphasis — heavy + orange (emphasis only) */
.paper b, .paper strong { font-weight: 800; color: var(--orange); }
.paper em { font-style: italic; }

/* also today */
.also { list-style: none; margin: 0; padding: 0; }
.also li {
  position: relative;
  padding-left: 1.25rem;
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-body);
  margin-bottom: 18px;
}
.also li:last-child { margin-bottom: 0; }
.also li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--structure);
  font-weight: 700;
}

/* takeaway */
.takeaway p {
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink-body);
  margin: 0 0 16px;
}
.takeaway p:last-child { margin-bottom: 0; }

/* quiet today */
.quiet {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--ink-quiet);
  text-align: center;
  margin: 0;
}

/* brief footer */
.brief-footer {
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--ink-quiet);
  text-align: center;
  margin: 28px 0 0;
}

/* the in-card section labels reuse .section-label but tighter */
.paper .section-label { margin: 22px 0 18px; }

/* =========================================================
   4. HOW IT WORKS
   ========================================================= */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; }
.steps li { display: flex; align-items: baseline; gap: 1rem; }
.step-n {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1.2px;
  color: var(--structure);
  flex: none;
}
.steps p { margin: 0; font-size: 18px; line-height: 1.45; color: var(--ink-body); }

/* =========================================================
   5. FOUNDER NOTE
   ========================================================= */
.founder figure { margin: 0; }
.founder blockquote {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 20px;
  line-height: 1.65;
  color: var(--ink-body);
}
.founder blockquote::before {
  content: "\201C";              /* decorative opening quote */
  display: block;
  font-size: 3rem;
  line-height: 0.6;
  color: var(--structure);
  opacity: 0.45;
  margin-bottom: 0.5rem;
}
.founder blockquote p { margin: 0; }
.founder figcaption {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--structure);
  margin-top: 1.5rem;
}

/* =========================================================
   6. FINAL CTA
   ========================================================= */
.final-cta { text-align: center; }
.honest-line {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(1.15rem, 5vw, 1.6rem);
  line-height: 1.3;
  color: var(--ink-headline);
  margin: 0 0 2rem;
}
.honest-line span { display: block; white-space: nowrap; }
.honest-line span:not(.cta-punch) { color: var(--ink-headline); }
.honest-line .cta-punch { color: var(--orange); }

/* =========================================================
   7. STANDALONE PAGES (brief/<date>.html, archive.html)
   ========================================================= */
.site-header { padding-top: 1.75rem; padding-bottom: 0.5rem; text-align: center; }
.site-header .logo img { height: 40px; width: auto; margin-inline: auto; }

/* the App Store nudge under a standalone brief */
.brief-cta { text-align: center; margin-top: 2.5rem; }
.brief-cta p {
  font-size: 18px;
  line-height: 1.5;
  color: var(--ink-subhead);
  margin: 0 0 1.25rem;
}

/* archive index */
.archive-title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(2rem, 8vw, 2.75rem);
  line-height: 1.1;
  color: var(--ink-headline);
  margin: 0 0 1.5rem;
}
.archive { list-style: none; margin: 0; padding: 0; }
.archive li { border-top: 1px solid var(--rule); }
.archive li:last-child { border-bottom: 1px solid var(--rule); }
.archive a {
  display: block;
  padding: 18px 0;
  text-decoration: none;
}
.archive-date {
  display: block;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--structure);
  margin-bottom: 6px;
}
.archive-headline {
  display: block;
  font-size: 19px;
  line-height: 1.4;
  color: var(--ink-headline);
}
.archive a:hover .archive-headline { color: var(--orange); }

/* =========================================================
   8. LEGAL PAGES (privacy.html, terms.html)
   ========================================================= */
.legal { max-width: 42rem; }
.legal-title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(2rem, 8vw, 2.75rem);
  line-height: 1.1;
  color: var(--ink-headline);
  margin: 0 0 0.5rem;
}
.legal-updated {
  font-family: var(--font-sans);
  font-size: 13px;
  letter-spacing: 0.4px;
  color: var(--ink-quiet);
  margin: 0 0 2.5rem;
}
.legal h2 {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink-headline);
  margin: 2.5rem 0 0.75rem;
}
.legal h3 {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 700;
  color: var(--ink-headline);
  margin: 1.75rem 0 0.5rem;
}
.legal p, .legal li {
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink-body);
}
.legal p { margin: 0 0 1.1rem; }
.legal ul, .legal ol { margin: 0 0 1.1rem; padding-left: 1.25rem; }
.legal li { margin-bottom: 0.5rem; }
.legal a { color: var(--structure); text-decoration: underline; text-underline-offset: 2px; }
.legal strong, .legal b { font-weight: 700; color: var(--ink-headline); }

/* ---- Footer --------------------------------------------- */
.footer { padding-block: 2.5rem; text-align: center; }
.footer nav {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--ink-quiet);
  display: flex;
  gap: 0.6rem;
  justify-content: center;
  flex-wrap: wrap;
}
.footer a { text-decoration: none; }
.footer a:hover { color: var(--ink-body); }

/* =========================================================
   Scale up gracefully
   ========================================================= */
@media (min-width: 48rem) {
  .phone { margin-top: 3rem; }
  .display { font-size: 3.5rem; }
  /* widen just the hero so the subhead sits on one line (briefing stays narrow) */
  .hero .wrap { max-width: 42rem; }
}