/* ---------- Design v2 (whole site) ----------
   Loaded after styles.css by every page (and the /p/ letter pages built by
   api/post.js), each of which puts .theme-v2 on <html>.
   Brand ramp, neutrals and status colours as specified, plus light and dark
   roles. The site's own tokens (--color-* and the legacy aliases) are then
   pointed at these roles so the existing rules pick them up.

   One rename: styles.css uses --ink to mean "the text colour", so here --ink
   follows --text (and turns light in dark mode). The fixed ink value,
   #1c1c1e, is written directly into --text instead. */
.theme-v2 {
  /* Brand */
  --orange-50:#FFF5EE; --orange-100:#FFE7D6; --orange-200:#FFCBA8;
  --orange-300:#FFA672; --orange-400:#FF7F33; --orange-500:#FF5E00;
  --orange-600:#E04E00; --orange-700:#B33E00; --orange-800:#8A2F00;
  --orange-900:#5A1F05; --orange-950:#331203;

  /* Neutrals */
  --grey-900:#2C2C2E; --grey-800:#3A3A3C; --grey-600:#636366;
  --grey-400:#8E8E93; --grey-300:#C7C7CC; --grey-200:#E5E5EA; --grey-100:#F2F2F4;
  --paper:#FAF8F5; --white:#FFFFFF;

  /* Status */
  --success:#1F9D55; --warning:#F5B400; --danger:#D7263D; --info:#0A84FF;

  /* Light theme roles */
  --bg:var(--white); --surface:var(--white); --text:#1c1c1e;
  --text-muted:var(--grey-600); --border:var(--grey-200);
  --brand:var(--orange-500); --brand-hover:var(--orange-600);
  /* White on orange (the arrow in the Subscribe button). The spec had ink. */
  --on-brand:var(--white); --link:var(--orange-700); --link-hover:var(--orange-800);

  /* Site tokens -> roles */
  --color-ink: var(--text);
  --ink: var(--text);
  --ink-soft: var(--text);
  --color-paper: var(--bg);
  /* Hover fills (See All). Grey, since the page and surfaces are both white. */
  --color-offwhite: var(--grey-100);
  --surface-alt: var(--grey-100);
  --color-rule: var(--border);
  --border-input: var(--border);
  --color-muted: var(--text-muted);
  --muted: var(--text-muted);
  --muted-soft: var(--grey-400);
  --color-brand: var(--brand);
  --color-brand-hover: var(--brand-hover);
  --accent: var(--brand);
  --accent-hover: var(--brand-hover);
  --color-link: var(--link);
  --color-link-hover: var(--link-hover);

  color-scheme: light;
  background: var(--bg);
}

/* ---------- DARK MODE: OFF (Oct 2026) ----------
   Switched off until the dark version is finished and checked. To turn it
   back on, delete the "DARK MODE OFF START" and "DARK MODE OFF END" lines
   below so the @media block runs again. When on, dark mode follows the
   device, and pages flagged .theme--light-only (letter pages, whose
   Beehiiv HTML carries its own dark-on-light colours) stay light.
   Until then every page renders light (.theme-v2 sets color-scheme: light). */
/* DARK MODE OFF START
@media (prefers-color-scheme: dark) {
  .theme-v2:not(.theme--light-only) {
    --bg:#1c1c1e; --surface:var(--grey-900); --text:#F5F5F7;
    --text-muted:#A1A1A6; --border:var(--grey-800);
    --link:var(--orange-400); --link-hover:var(--orange-300);
    --color-offwhite: var(--grey-900); --surface-alt: var(--grey-900);
    --muted-soft: var(--grey-600);
    color-scheme: dark;
  }
}
DARK MODE OFF END */

/* Surfaces styles.css hard-codes as white or grey. */
.theme-v2 .nav { background: var(--bg); }
.theme-v2 .modal__dialog { background: var(--surface); }
.theme-v2 .signups-closed { background: var(--surface); }
.theme-v2 .post-card__thumb,
.theme-v2 .post-card__thumb--img { background-color: var(--border); }
.theme-v2 input[type="email"],
.theme-v2 input[type="text"] { background: var(--surface); color: var(--text); }
/* Email boxes (hero and pop-up) in Inter's text cut, matching the subtitle. */
.theme-v2 input[type="email"] {
  font-family: 'Inter Variable', var(--font-sans);
  font-variation-settings: 'opsz' 14;
}
.theme-v2 .subscribe-form input[type="email"]:focus { box-shadow: 0 0 0 3px rgba(255, 94, 0, 0.22); }
.theme-v2 .subscribe-status.is-error { color: var(--danger); }

/* Text and icons on orange use --on-brand (white). */
.theme-v2 .btn--primary,
.theme-v2 .nav__links-cta a { color: var(--on-brand); }

@media (max-width: 680px) {
  .theme-v2 .nav__links { background: var(--bg); }
}

/* ---------- Hero type: Inter ----------
   Inter Variable (declared in styles.css) has an optical-size axis, opsz
   14-32. 32 is Inter Display, the tighter cut drawn for headlines; the low
   end is Inter's text cut. The headline is pinned to Display and the
   subtitle to text. */
.theme-v2 .hero__headline {
  font-family: 'Inter Variable', var(--font-sans);
  font-weight: 700;
  font-variation-settings: 'opsz' 32;
  /* Like the serif original, the long line ("Get startup ideas") tracks the
     width of the subscribe form below it. In Inter Display at this weight
     and tracking it runs about 7.45em, so the text column (about
     0.86vw - 320px) divided by 7.45 gives the middle term, and the 66px cap
     lands it at ~492px against the form's 500px. */
  font-size: clamp(36px, calc(11.4vw - 44px), 66px);
  line-height: 1.04;
  letter-spacing: -0.035em;
  /* Inter has a real bold, so the mobile faux-bold shadow isn't needed. */
  text-shadow: none;
}
.theme-v2 .hero__subtext {
  font-family: 'Inter Variable', var(--font-sans);
  font-weight: 400;
  font-variation-settings: 'opsz' 14;
  font-size: 16px;
  letter-spacing: -0.006em;
}

@media (max-width: 680px) {
  .theme-v2 .hero__headline {
    /* Phones: the long line ("Get startup ideas", 7.56em) spans 75% of the
       screen width. ~39px on a 390px phone, ~32px on a 320px one. */
    font-size: calc(75vw / 7.56);
    font-weight: 700;
    letter-spacing: -0.035em;
  }
  .theme-v2 .hero__subtext { font-size: 14px; }
}

/* Desktop character 20% smaller than the live page's
   clamp(320px, 34vw, 460px). Phones are set in the Phones block below. */
.theme-v2 .hero__illustration { width: clamp(256px, 27.2vw, 368px); }

/* Archive: the section heading and the card titles move to Inter too, so the
   page has one typeface. Sizes come down from the serif ones because Inter
   sets much wider. */
.theme-v2 .archive__heading {
  font-family: 'Inter Variable', var(--font-sans);
  font-weight: 700;
  font-variation-settings: 'opsz' 32;
  font-size: clamp(28px, 3vw, 38px);
  letter-spacing: -0.03em;
  text-shadow: none;
}
.theme-v2 .post-card__title {
  font-family: 'Inter Variable', var(--font-sans);
  font-weight: 600;
  font-variation-settings: 'opsz' 28;
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: -0.02em;
  text-shadow: none;
}

@media (max-width: 680px) {
  .theme-v2 .archive__heading { font-size: 26px; font-weight: 700; }
  .theme-v2 .post-card__title { font-size: 20px; font-weight: 600; }
}

/* ---------- Phones ---------- */
@media (max-width: 680px) {
  /* Hero: less air above the headline so the form sits higher. */
  .theme-v2 .hero__text { padding-top: 16px; }
  .theme-v2 .hero__headline { margin-bottom: 12px; }
  .theme-v2 .hero__subtext {
    font-size: 15px;
    line-height: 1.5;
    max-width: 320px;
    margin-bottom: 20px;
  }
  .theme-v2 .hero__illustration { width: 100%; max-width: 288px; margin: 8px auto 0; }
}


/* ---------- Headings on the other pages ----------
   Every heading in styles.css uses --font-display, now Inter. These move
   them to the Display cut at a real bold, drop the mobile faux-bold shadow
   the serif needed, and bring sizes down because Inter sets far wider than
   Instrument Serif did. :is() keeps them above the base and mobile rules. */
.theme-v2 :is(.coming-soon, .subscribe-page__headline, .legal-page__headline,
  .about__headline, .about__subhead, .welcome__headline, .modal__title) {
  font-weight: 700;
  font-variation-settings: 'opsz' 32;
  letter-spacing: -0.03em;
  text-shadow: none;
}
.theme-v2 .legal-page__article h2 {
  font-weight: 650;
  font-variation-settings: 'opsz' 24;
  letter-spacing: -0.02em;
  text-shadow: none;
}
.theme-v2 .coming-soon { font-size: clamp(44px, 7vw, 80px); }
.theme-v2 .subscribe-page__headline { font-size: clamp(26px, 3.2vw, 34px); line-height: 1.12; }
.theme-v2 .legal-page__headline { font-size: clamp(28px, 3.6vw, 40px); line-height: 1.12; }
.theme-v2 .legal-page__article h2 { font-size: 19px; line-height: 1.3; }
.theme-v2 .about__headline { font-size: clamp(28px, 5.4vw, 52px); line-height: 1.06; }
.theme-v2 .about__subhead { font-size: clamp(22px, 2.6vw, 28px); line-height: 1.15; }
.theme-v2 .welcome__headline { font-size: clamp(30px, 4.2vw, 44px); line-height: 1.08; }
.theme-v2 .modal__title { font-size: 20px; }

@media (max-width: 680px) {
  .theme-v2 .subscribe-page__headline { font-size: 25px; }
  .theme-v2 .legal-page__headline { font-size: 27px; }
  .theme-v2 .legal-page__article h2 { font-size: 18px; }
  .theme-v2 .modal__title { font-size: 18px; }
}

/* About: the base layout pulls the unicorn up over the headline's last line
   (Litquidity-style). Against a heavy sans headline that reads as a
   collision, so the new look sits it just below instead. */
.theme-v2 .about__figure { margin-top: clamp(16px, 2.4vw, 28px); }