/* ---------- Fonts ---------- */
/* Inter, self-hosted: the variable font (Fontsource
   @fontsource-variable/inter 5.1.0, Latin) covers every weight 100-900 and
   an optical-size axis (opsz 14-32: text cut to Inter Display), which the
   browser picks from the font size. Used for all body and UI text. */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/inter/inter-latin-opsz-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter Variable';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/inter/inter-latin-opsz-italic.woff2') format('woff2');
}

/* ---------- Tokens ---------- */
/* Spec lives in CLAUDE.md → "Visual Design → Colour tokens".
   The --color-* tokens are the source of truth; the legacy aliases
   below exist only to keep older class rules working. */
:root {
  --color-ink: #1c1c1e;
  --color-navy: #26334d;
  /* Startup Ideas orange: the colour of the block S logo. */
  --color-brand: #ff5e00;
  --color-brand-hover: #e85500;
  --color-paper: #ffffff;
  --color-offwhite: #f8f7f4;
  --color-rule: #e5e7eb;
  --color-muted: #6b7280;
  /* The brand orange taken darker, so link text stays readable on white. */
  --color-link: #c2410c;
  --color-link-hover: #9a3412;

  /* Legacy aliases */
  --bg: var(--color-paper);
  --ink: var(--color-ink);
  --ink-soft: var(--color-ink);
  --muted: var(--color-muted);
  --muted-soft: #9ca3af;
  --border: var(--color-rule);
  --border-input: var(--color-rule);
  --surface: var(--color-offwhite);
  --surface-alt: var(--color-offwhite);
  --accent: var(--color-brand);
  --accent-hover: var(--color-brand-hover);
  --accent-mid: var(--color-navy);

  --radius: 6px;
  /* Height of the S tile in the nav. */
  --nav-control-h: 36px;
  --radius-card: 8px;
  --maxw: 1120px;
  --gutter: clamp(20px, 4vw, 48px);
  /* Headings: Inter at its Display optical size (set per heading via
     font-variation-settings 'opsz' 32 in theme-v2.css). */
  --font-display: 'Inter Variable', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --font-sans: 'Inter Variable', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
}

/* ---------- Reset ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }
html, body { overflow-x: hidden; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Reserve the scrollbar's width on every page. Otherwise it appears once the
     archive cards load and shoves the whole page sideways. */
  scrollbar-gutter: stable;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

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

a { color: inherit; text-decoration: none; }

button { font: inherit; cursor: pointer; }

ul { margin: 0; padding: 0; list-style: none; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* ---------- Nav ---------- */
.nav {
  position: relative;
  z-index: 110;
  width: 100%;
  padding: 32px var(--gutter) 12px;
  background: #ffffff;
}

.nav__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  /* Brand | links, pushed to the right edge. Mobile adds a third column for
     the menu toggle. */
  grid-template-columns: auto 1fr;
  /* The wordmark and the links share one text baseline. */
  align-items: baseline;
  gap: 32px;
}

.nav__links {
  display: flex;
  gap: 28px;
  justify-self: end;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.005em;
  color: var(--ink);
}

.nav__links a {
  position: relative;
  padding: 4px 0;
  transition: opacity 180ms ease;
}
.nav__links:hover a { opacity: 0.4; }
.nav__links a:hover { opacity: 1; }

/* The mobile-only CTA in the slide-down menu; hidden on desktop, where the
   nav is just the brand and the About / Contact links. */
.nav__links-cta { display: none; }

.nav__brand {
  /* One knob for the whole lockup: the name is set at this size and the
     tile, the "By" line and the ebe sticker all scale off it. */
  --brand-size: 16px;
  --brand-gap: 8px;
  --brand-mark-h: var(--nav-control-h);
  /* Inter's cap height. The tile and sticker centre on the wordmark's capitals. */
  --brand-cap-h: calc(var(--brand-size) * 0.7275);
  /* A single line of text, so the lockup has a real baseline for .nav__inner
     to align with the links. */
  display: block;
  min-width: 0;
  line-height: 0;
  white-space: nowrap;
}
/* The Startup Ideas tile: the same height as the Subscribe button opposite. */
.brand-mark {
  display: inline-block;
  width: auto;
  height: var(--brand-mark-h);
  margin-right: var(--brand-gap);
  vertical-align: calc((var(--brand-cap-h) - var(--brand-mark-h)) / 2);
}
/* The wordmark: Inter semibold. */
.brand-name {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--brand-size);
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--color-ink);
  white-space: nowrap;
}
/* The endorsement line: Startup Ideas is a brand by Entrepreneurs Being
   Entrepreneurs, so the ebe sticker signs off after the name, small and muted. */
.brand-by {
  margin-left: var(--brand-gap);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: calc(var(--brand-size) * 0.75);
  line-height: 1;
  color: var(--color-muted);
  white-space: nowrap;
}
/* The sticker is its own link, to the ebe Instagram. */
.brand-by__link { transition: opacity 180ms ease; }
.brand-by__link:hover { opacity: 0.7; }
.nav__brand a:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
  border-radius: 6px;
}
.brand-by__mark {
  --sticker-h: calc(var(--brand-size) * 1.6);
  display: inline-block;
  width: auto;
  height: var(--sticker-h);
  margin-left: 4px;
  vertical-align: calc((var(--brand-cap-h) - var(--sticker-h)) / 2);
}

/* EBE lockup (the ebe sticker + "Entrepreneurs Being Entrepreneurs"), used
   during the rebrand while the site keeps the EBE name. Same proportions as
   the original ebe.xyz nav: name at 14px to match the nav links, sticker
   2.2x the name. The Startup Ideas lockup above stays intact for when
   brands/switch-brand.sh switches back. */
.nav__brand.nav__brand--ebe {
  --brand-size: 14px;
  --brand-mark-h: calc(var(--brand-size) * 2.2);
  /* The sticker carries its own sliver of transparent margin, so 6px reads
     as a gap where 8px looks loose. */
  --brand-gap: 6px;
}
.nav__brand--ebe .brand-name { font-weight: 500; letter-spacing: 0; }

.nav__menu-toggle {
  display: none;
  width: 36px;
  height: 36px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  justify-self: start;
}
.nav__menu-toggle span {
  display: block;
  width: 22px;
  height: 1.6px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 240ms cubic-bezier(0.2, 0.7, 0.2, 1),
              opacity 180ms ease;
}
.nav__menu-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(5.6px) rotate(45deg);
}
.nav__menu-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.nav__menu-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-5.6px) rotate(-45deg);
}

/* Injected by JS on mobile menu; hidden on desktop */
.nav__menu-close {
  display: none;
}

/* ---------- Hero ---------- */
.hero {
  padding: clamp(40px, 6vw, 96px) var(--gutter) clamp(32px, 5vw, 72px);
}

.hero__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(40px, 6vw, 96px);
  text-align: left;
}

.hero__text {
  max-width: 560px;
}

.hero__mascot {
  width: clamp(120px, 14vw, 172px);
  height: auto;
  margin: 0 auto 28px;
}

.hero__headline {
  font-family: var(--font-display);
  font-weight: 1000;
  /* Sized so the long line ("Get startup ideas") measures the same 500px
     as the subscribe form below it. The line runs 5.66em, so the 88px cap
     puts it at ~499px, and the cap holds from ~975px up where the form is
     its own 500px.

     Below that the form is as wide as the text column, so the headline has
     to track the column rather than the viewport. While the illustration
     sits at its 320px floor the column is about 0.86vw - 320px (gutters
     take 8vw, the grid gap 6vw), which divided by 5.66 gives the middle
     term. It leaves a few percent in hand on purpose: this weight is
     synthesized from a Regular-only face and each engine widens the
     faux-bold differently, so an exact fit would risk a third line. The
     42px floor is unreachable above the 680px breakpoint and only guards
     the rule if the mobile override below ever goes away. */
  font-size: clamp(42px, calc(15vw - 58px), 88px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 24px;
}

.hero__subtext {
  max-width: 480px;
  margin: 0 0 28px;
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
}
/* Desktop <br /> in the subtext forces the break after "delivered".
   Hidden on mobile (max-width:680px), where it wraps naturally. */

.hero .subscribe-form {
  margin: 0;
}

.hero .subscribe-status {
  text-align: left;
}

.hero__illustration {
  display: block;
  width: clamp(320px, 34vw, 460px);
  height: auto;
  margin: 0;
  pointer-events: none;
  user-select: none;
}

/* ---------- Subscribe form ---------- */
.subscribe-form {
  display: flex;
  gap: 8px;
  max-width: 420px;
  margin: 0 auto;
}

.subscribe-form input[type="email"] {
  flex: 1;
  min-width: 0;
  height: 48px;
  padding: 0 18px;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--border-input);
  border-radius: var(--radius);
  outline: none;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}
.subscribe-form input[type="email"]::placeholder { color: var(--muted-soft); }
.subscribe-form input[type="email"]:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(61, 90, 128, 0.22);
}

.subscribe-form .btn {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  padding: 0;
  border-radius: var(--radius);
}
.subscribe-form .btn svg { display: block; }
.subscribe-form .btn:disabled { opacity: 0.65; cursor: wait; }

.hero .subscribe-form { max-width: 500px; }
.hero .subscribe-form input[type="email"] {
  height: 52px;
  font-size: 15px;
}
.hero .subscribe-form .btn {
  width: 52px;
  height: 52px;
}

/* Consent-free disclosure under every subscribe form. Inherits the
   parent's text-align so it centres in the modal and on /subscribe, and
   is overridden to left in the hero alongside .hero .subscribe-status. */
.subscribe-fineprint {
  max-width: 420px;
  margin: 8px auto 0;
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}
.subscribe-fineprint a {
  color: var(--color-link);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 180ms ease;
}
.subscribe-fineprint a:hover { color: var(--color-link-hover); }

.hero .subscribe-fineprint {
  max-width: 500px;
  margin: 8px 0 0;
  text-align: left;
}

/* ---------- Signups closed notice ---------- */
.signups-closed {
  width: fit-content;
  max-width: 100%;
  margin: 0;
  padding: 24px;
  background: #eceef1;
  border-radius: var(--radius);
}

.signups-closed__headline {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.4;
  color: var(--ink);
  white-space: nowrap;
}

.signups-closed__subtext {
  margin: 6px 0 0;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
  white-space: nowrap;
}

.signups-closed__subtext a {
  color: var(--color-link);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 180ms ease;
}
.signups-closed__subtext a:hover { color: var(--color-link-hover); }

.modal .signups-closed {
  margin: 0 auto;
  text-align: center;
}

.subscribe-page .signups-closed {
  margin: 0 auto;
  text-align: center;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 18px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.005em;
  border-radius: var(--radius);
  border: 1px solid transparent;
  transition: background 180ms ease, color 180ms ease;
}

.btn--primary {
  background: var(--color-brand);
  background-origin: border-box;
  background-clip: border-box;
  color: #ffffff;
  font-weight: 600;
  transition: background 180ms ease;
}
.btn--primary:hover { background: var(--color-brand-hover); }
.btn--primary:active { background: var(--color-brand-hover); }

/* Secondary button (See All): white fill, ink outline, so ink stays for
   headings and orange for the one filled button, Subscribe. */
.btn--outline {
  background: var(--color-paper);
  border-color: var(--color-ink);
  color: var(--color-ink);
}
.btn--outline:hover,
.btn--outline:active { background: var(--color-offwhite); }

.subscribe-notice {
  max-width: none;
  margin: 12px auto 0;
  font-family: var(--font-sans);
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--muted);
  opacity: 0.78;
  text-align: center;
  white-space: nowrap;
}

.subscribe-status {
  min-height: 1.2em;
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--muted);
}
.subscribe-status.is-success { color: var(--ink); }
.subscribe-status.is-error { color: #b00020; }

/* ---------- Archive ---------- */
.archive {
  padding: 0 var(--gutter) 48px;
}

.archive__heading {
  max-width: var(--maxw);
  margin: 0 auto 28px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(34px, 3.9vw, 47px);
  letter-spacing: -0.01em;
  color: var(--ink);
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
}

.archive__grid {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 40px 32px;
}

/* Sits under the archive grid on the home page: subscribe, or read the
   full run of editions. */
.archive__actions {
  max-width: var(--maxw);
  /* Reads as the same 48px of space that sits below the sign-off: the last
     line of card text carries ~4px of trailing leading of its own. */
  margin: 44px auto 0;
  display: flex;
  justify-content: center;
  gap: 16px;
}
/* A single centred CTA; the min-width keeps the short label from looking stubby. */
.archive__actions .btn { min-width: 136px; padding: 0 12px; }

/* Standalone collection pages (Build, Founder stories) reuse the
   archive layout but lead with the section heading, so they need
   top breathing room and an intro line. */
.collection { padding-top: clamp(40px, 6vw, 72px); }
/* Only tuck the heading in when an intro line follows it; without one the
   heading keeps the standard 28px down to the grid. */
.collection .archive__heading:has(+ .collection__lead) { margin-bottom: 20px; }
.collection__lead {
  max-width: var(--maxw);
  margin: 0 auto 40px;
}
.collection__lead p {
  max-width: 620px;
  margin: 0;
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
}
/* Lets the intro sit on a single line on desktop; still wraps on
   narrower screens where the measure no longer fits. */
.collection__lead--wide p { max-width: 100%; }

.coming-soon {
  grid-column: 1 / -1;
  margin: 0;
  padding: 40px 0 24px;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(56px, 9vw, 104px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.post-card__link {
  display: block;
  color: var(--color-ink);
}

.post-card__thumb {
  width: 100%;
  /* Beehiiv letter thumbnails are 1200x630, so the card matches that
     ratio exactly: cover then has nothing to crop and full-bleed
     artwork keeps its edges. */
  aspect-ratio: 1200 / 630;
  border-radius: 6px;
  margin-bottom: 16px;
  background-color: #ececea;
  background-size: cover;
  background-position: center;
}

.post-card__thumb--img {
  aspect-ratio: 1200 / 630;
  object-fit: cover;
  background-color: #ececea;
}

.post-card__thumb--fallback {
  background-color: #ececea;
}

/* ---------- Archive loading / empty ---------- */
.post-card__thumb--loading {
  background: #ececea;
  animation: pulse 1.6s ease-in-out infinite;
}
.post-card__bar {
  height: 12px;
  border-radius: 4px;
  background: #ececea;
  margin-bottom: 8px;
  animation: pulse 1.6s ease-in-out infinite;
}
.post-card__bar--meta { width: 38%; height: 10px; margin-top: 4px; }
.post-card__bar--title { width: 82%; height: 18px; margin-top: 12px; margin-bottom: 12px; }
.post-card__bar--excerpt { width: 100%; }
.post-card__bar--excerpt.is-short { width: 62%; margin-bottom: 0; }

.archive__empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: 36px 0;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--muted);
  text-align: center;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

.post-card__meta {
  margin: 0 0 8px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--accent);
  text-transform: none;
}

/* Title and excerpt are locked to one and three lines. Both reserve their
   full height whether or not the text fills it, so every card in a row
   ends up the same height. */
.post-card__title {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 26px;
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.post-card__excerpt {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(3 * 1.55em);
}

/* ---------- Subscribe page ---------- */
.subscribe-page {
  max-width: 560px;
  margin: 0 auto;
  padding: clamp(48px, 10vw, 120px) var(--gutter);
  text-align: center;
}

.subscribe-page .hero__mascot { margin-bottom: 28px; }

.subscribe-page__headline {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
  color: var(--ink);
}

.subscribe-page__subtext {
  margin: 0 auto 32px;
  max-width: 420px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
}

.social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 40px;
  width: 32px;
  height: 32px;
  color: var(--ink-soft);
  transition: color 180ms ease, transform 180ms ease;
}
.social-link:hover { color: var(--accent); transform: translateY(-1px); }

/* ---------- Legal pages ---------- */
.legal-page {
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(48px, 8vw, 96px) var(--gutter) clamp(64px, 10vw, 120px);
}

.legal-page__headline {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(32px, 4.4vw, 48px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
  color: var(--ink);
}

.legal-page__updated {
  margin: 0 0 40px;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--muted);
}

.legal-page__lead {
  margin: 0 0 28px;
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink);
  font-weight: 500;
}

.legal-page__article {
  font-family: var(--font-sans);
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--ink-soft);
}

.legal-page__article h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: -0.005em;
  margin: 40px 0 12px;
  color: var(--ink);
}

.legal-page__article p { margin: 0 0 16px; }
.legal-page__article ul {
  margin: 0 0 16px;
  padding-left: 20px;
}
.legal-page__article li { margin-bottom: 8px; }

.legal-page__article a {
  color: var(--color-link);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}
.legal-page__article a:hover { color: var(--color-link-hover); }

/* Keep an email address whole: the block moves to the next line rather than
   splitting mid-address, and carries its own full stop so the punctuation is
   never orphaned. On screens too narrow to fit the address it breaks at the
   <wbr> after the @. */
.legal-page__article .email-line { display: inline-block; }

.legal-page__article strong { color: var(--ink); font-weight: 600; }

/* ---------- About page ---------- */
/* One 880px column, left aligned: hero, numbered sections and FAQ share an
   edge, and the closing panel fills the same width. */
.about {
  width: 100%;
  max-width: calc(880px + var(--gutter) * 2);
  margin: 0 auto;
  padding: 48px var(--gutter) 96px;
}

.about__hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
  align-items: center;
  gap: 48px;
}

.about__headline {
  margin: 0 0 24px;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ink);
}

.about__lede {
  max-width: 480px;
  margin: 0 0 32px;
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.6;
  color: var(--muted);
}

/* The same sign-up box as the home page hero. */
.about__hero-form.subscribe-form { max-width: 500px; margin: 0; }
.about__hero-form.subscribe-form input[type="email"] { height: 52px; font-size: 15px; }
.about__hero-form.subscribe-form .btn { width: 52px; height: 52px; }
.about__hero-copy .subscribe-status { margin: 8px 0 0; text-align: left; }
/* Takes no space until there's a message, so the gap below the form stays even. */
.about__hero-copy .subscribe-status:empty { display: none; }

/* The small labels: numbered section markers and data lines. */
.about__eyebrow,
.about__proof {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0.08em;
}

.about__proof { margin: 24px 0 0; color: var(--muted); text-wrap: balance; }

.about__figure { display: block; }
.about__illustration { display: block; width: 100%; height: auto; }

.about__section { margin-top: 96px; }

.about__eyebrow { margin: 0 0 16px; color: var(--color-brand); }
.about__eyebrow--muted { color: var(--color-muted); }

.about__subhead {
  max-width: 640px;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ink);
}

.about__text {
  max-width: 640px;
  margin-top: 24px;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--muted);
}
.about__text p { margin: 0 0 16px; }
.about__text p:last-child { margin-bottom: 0; }

.about__link {
  overflow-wrap: anywhere;
  color: var(--color-brand);
  font-weight: 500;
  transition: color 180ms ease;
}
.about__link:hover { color: var(--color-brand-hover); }

/* Scrollable preview of the newest letter (filled by script.js). The fallback
   only shows if the letter can't be loaded. */
.letter-preview.is-failed .letter-preview__fallback { display: block; }
.letter-preview {
  margin-top: 32px;
  border: 1px solid var(--color-rule);
  border-radius: 16px;
  overflow: hidden;
}
.letter-preview__scroll {
  height: 560px;
  overflow-x: hidden;
  overflow-y: auto;
  background: #fff;
}
/* Always show the scrollbar, so the box reads as scrollable before anyone tries. */
.letter-preview__scroll::-webkit-scrollbar { width: 8px; }
.letter-preview__scroll::-webkit-scrollbar-thumb {
  background: var(--color-rule);
  border-radius: 4px;
}
@supports not selector(::-webkit-scrollbar) {
  .letter-preview__scroll { scrollbar-width: thin; }
}
.letter-preview__scroll:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: -2px;
}
.letter-preview__fallback {
  display: none;
  margin: 0;
  padding: 24px;
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--muted);
}

.about__show-us {
  margin: 16px 0 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--muted);
}

/* FAQ: heading on the left, questions on the right, split by hairlines. */
.about__faq {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 48px;
  padding-top: 96px;
  border-top: 1px solid var(--color-rule);
}
.about__faq-item {
  padding: 24px 0;
  border-bottom: 1px solid var(--color-rule);
  font-family: var(--font-sans);
}
.about__faq-item:first-child { padding-top: 0; }
.about__faq-item h3 {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
}
.about__faq-item p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
}

/* Closing panel */
.about__cta {
  margin-top: 96px;
  padding: 64px 32px;
  background: var(--color-offwhite);
  border-radius: 16px;
  text-align: center;
}
.about__cta-title {
  margin: 0 0 16px;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ink);
}
.about__cta-text {
  margin: 0 0 32px;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--muted);
}
.about__cta-form.subscribe-form { max-width: 480px; }
.about__cta-form.subscribe-form .btn {
  width: auto;
  padding: 0 24px;
}

/* Below this the left column can't hold the headline in three lines. */
@media (max-width: 960px) {
  .about__hero { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .about__headline { text-wrap: balance; }
  .about__figure { width: min(100%, 280px); margin: 0 auto; }
}

@media (max-width: 760px) {
  .about { padding: 16px var(--gutter) 48px; }
  .about__headline { margin-bottom: 16px; }
  .about__lede { max-width: none; margin-bottom: 24px; font-size: 16px; }
  /* 16px stops iOS zooming the page when an email box is tapped. */
  .about__hero-form.subscribe-form,
  .about__cta-form.subscribe-form { max-width: none; }
  .about__hero-form.subscribe-form input[type="email"],
  .about__cta-form.subscribe-form input[type="email"] { height: 48px; font-size: 16px; }
  .about__hero-form.subscribe-form .btn { width: 48px; height: 48px; }
  .about__proof { margin-top: 16px; font-size: 11px; letter-spacing: 0.06em; }
  .about__section { margin-top: 64px; }
  .about__text { margin-top: 16px; }
  .letter-preview { margin-top: 24px; }
  /* Shorter than the screen, so a thumb can still scroll the page past it. */
  .letter-preview__scroll { height: min(440px, 60svh); }
  .about__faq-item { padding: 16px 0; }
  .about__faq-item h3 { font-size: 16px; }
  .about__faq-item p { font-size: 15px; }
  .about__faq {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    padding-top: 64px;
  }
  .about__cta { margin-top: 64px; padding: 32px 16px; }
  .about__cta-text { margin-bottom: 24px; }
  .about__cta-form.subscribe-form { flex-direction: column; }
  .about__cta-form.subscribe-form input[type="email"] { flex: none; }
  .about__cta-form.subscribe-form .btn { width: 100%; height: 48px; }
}

/* ---------- Welcome page (post-signup) ---------- */
/* Single column, left aligned, and short: a status badge, the greeting and
   two lines telling the reader where the welcome email is. Nothing else,
   because there is nothing else to do here.

   Sits a little above centre. body is a min-height:100vh column flex
   container and the global `main { flex: 1 }` would grow this block to fill
   the leftover height, pinning its content to the top; resetting grow to 0
   leaves that height as free space instead. The auto margins here and the
   footer's own margin-top:auto then split it three ways, so the greeting
   lands a sixth of the free height above true centre rather than dead in
   the middle of it. Content taller than the viewport just scrolls: every
   auto margin goes to zero and nothing is clipped.

   980px, not the 720px reading column the other pages use. The greeting
   runs to 16.3em, so it needs about 846px of text column at its 52px cap
   to hold one line, and max-width is a border-box number here: 846 plus
   two gutters, rounded up for slack. It holds one line down to a ~640px
   viewport and wraps below that, which is phones, where no column width
   would have saved it. */
.welcome {
  flex: 0 1 auto;
  max-width: 980px;
  margin: auto;
  padding: clamp(24px, 4vw, 48px) var(--gutter);
}

/* "You're in." as a boxed label rather than the headline: it is the status,
   the headline is the greeting. */
.welcome__badge {
  display: inline-block;
  margin: 0 0 16px;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--color-paper);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink);
}

.welcome__headline {
  font-family: var(--font-display);
  font-weight: 1000;
  font-size: clamp(36px, 5vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 24px;
}

.welcome__intro {
  max-width: 58ch;
  margin: 0;
  font-family: var(--font-sans);
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--ink);
}

.welcome__intro p { margin: 0 0 16px; }
.welcome__intro p:last-child { margin-bottom: 0; }

/* Welcome page nav: the brand lockup is the only item up there, so centre it.
   Two classes, so it outranks the one-class nav rules in the responsive
   block below and stays centred on mobile too. Size stays the nav default. */
.page--welcome .nav__inner {
  grid-template-columns: 1fr;
  justify-items: center;
  gap: 0;
}

.page--welcome .nav__brand {
  grid-column: 1;
  justify-self: center;
}

@media (max-width: 680px) {
  .welcome__intro { font-size: 14.5px; }
}

/* ---------- Post page (Beehiiv content wrapper) ---------- */
.post-page {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(32px, 6vw, 64px) var(--gutter) clamp(48px, 8vw, 96px);
}
.post-page__article img,
.post-page__article video {
  max-width: 100%;
  height: auto;
}

/* The letter renders with Beehiiv's own typography. We only wrap it in the
   site shell, so no font, size, or colour overrides live here. */

/* Spacing needs one reset, though. Beehiiv positions every block with padding
   on its own wrapper divs and zeroes heading/paragraph margins in the site
   stylesheet it serves alongside the letter - a stylesheet we deliberately
   don't load, since the shell only reuses Beehiiv's <head> fragment. Without
   that reset the browser defaults (1em on <p>, 0.67-0.83em on headings) stack
   on top of Beehiiv's padding, so every heading sat further from the text below
   it than in the emailed letter. Zeroing the vertical margins hands spacing
   back to Beehiiv's own values, matching the newsletter everywhere at once.
   Blocks where Beehiiv sets a margin inline are untouched: inline wins, and
   those values are the ones the letter intends. */
.post-page__article :is(h1, h2, h3, h4, h5, h6, p) {
  margin-block: 0;
}

/* Poll options. Beehiiv's web render gives them underlines; the emailed letter
   gives them boxes. Boxes win, so the post page matches the letter. */
.post-page__article .post-poll__option {
  margin: 0 0 8px;
  list-style: none;
}
.post-page__article .post-poll__option:last-child {
  margin-bottom: 0;
}
.post-page__article .post-poll__option > a {
  display: block;
  padding: 8px 16px;
  border: 1px solid var(--color-rule);
  border-radius: 6px;
  background: var(--color-paper);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.post-page__article .post-poll__option > a:hover {
  border-color: var(--color-muted);
  background: var(--color-offwhite);
}
.post-page__article .post-poll__option > a:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
}
/* Beehiiv dims the whole poll cell; the boxes need full contrast. */
.post-page__article td:has(.post-poll__option) {
  opacity: 1 !important;
}

@media (prefers-reduced-motion: reduce) {
  .post-page__article .post-poll__option > a { transition: none; }
}

/* ---------- Footer ---------- */
.footer {
  border-top: 1px solid var(--border);
  padding: 22px var(--gutter);
  margin-top: auto;
}

.footer__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  /* Copyright | sign-off | links: equal outer columns keep the sign-off
     truly centred whatever the two ends measure. */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px;
  font-size: 12px;
  color: var(--muted-soft);
}

.footer__right {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.footer__social { display: flex; align-items: center; gap: 16px; }
.footer__social li { display: flex; align-items: center; }
.footer__social a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 4px;
  margin: -4px;
  color: var(--muted-soft);
  transition: color 180ms ease;
}
.footer__social a:hover { color: var(--muted); }
.footer__ig,
.footer__x { flex: none; }
/* Icon-only link, so it carries the weight the @handle used to. */
.footer__ig { width: 18px; height: 18px; }

.footer__links { display: flex; align-items: center; gap: 18px; }
.footer__links a {
  color: var(--muted-soft);
  text-decoration: none;
  transition: color 180ms ease;
}
.footer__links a:hover { color: var(--muted); }

/* "Made with love by data nerds", centred in the footer between the
   copyright and the links. */
.footer__signoff { justify-self: center; text-align: center; }
.signoff__heart {
  /* Emoji fonts are colour-glyph only, so this ignores the inherited colour. */
  font-size: 13px;
  line-height: 1;
  vertical-align: -0.08em;
  margin: 0 2px;
}


/* ---------- Page layout helpers ---------- */
body { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; }
body.is-modal-open { overflow: hidden; }

/* ---------- Modal ---------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.modal[aria-hidden="false"] { display: flex; }

.modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(28, 28, 30, 0.45);
}

.modal__dialog {
  position: relative;
  background: #fff;
  border-radius: 12px;
  padding: 36px 32px 32px;
  width: 100%;
  max-width: 480px;
  text-align: center;
  box-shadow: 0 20px 60px rgba(28, 28, 30, 0.18);
}

.modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  border-radius: 50%;
  color: var(--muted);
  transition: color 180ms ease, background 180ms ease;
}
.modal__close:hover { color: var(--ink); background: var(--surface); }

.modal__mascot {
  width: 64px;
  height: 64px;
  margin: 0 auto 14px;
}

.modal__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  color: var(--ink);
  margin: 0 0 22px;
}

.modal__form { margin: 0 auto; max-width: 360px; }
.modal__form input[type="email"] { height: 48px; }
.modal__form .btn { width: 48px; height: 48px; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* ---------- Responsive ---------- */
@media (max-width: 680px) {
  /* iOS Safari renders antialiased as noticeably thinner than desktop.
     Switching to auto restores subpixel weight on mobile WebKit. */
  body {
    -webkit-font-smoothing: auto;
    -moz-osx-font-smoothing: auto;
  }
  .hero__headline,
  .archive__heading,
  .post-card__title,
  .coming-soon,
  .subscribe-page__headline,
  .legal-page__headline,
  .legal-page__article h2,
  .welcome__headline,
  .modal__title {
    text-shadow:
      0 0 0.8px currentColor,
      0 0 0.8px currentColor,
      0 0 0.8px currentColor,
      0 0 0.8px currentColor,
      0 0 0.8px currentColor;
  }

  /* Nav: hamburger left | brand centered | (no subscribe pill on mobile) */
  .nav { padding: 24px var(--gutter) 10px; }
  .nav__inner {
    grid-template-columns: auto 1fr auto;
    gap: 12px;
  }
  .nav__brand {
    --brand-size: 15px;
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    align-self: center;
  }
  /* Long EBE name: gives size back only on the narrowest phones, where it
     would otherwise run into the menu toggle. */
  .nav__brand.nav__brand--ebe { --brand-size: min(14px, calc(4.9vw - 4px)); }
  .nav__menu-toggle {
    display: inline-flex;
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    align-self: center;
    width: auto;
    height: auto;
    gap: 4px;
    padding: 2px 0;
  }
  .nav__menu-toggle span {
    width: 22px;
  }

  /* Slide-down nav menu */
  .nav__links {
    position: fixed;
    inset: 0;
    /* The desktop rule parks this grid item at the end of its track, and
       that alignment still applies once it goes fixed: without the reset
       the panel shrink-wraps to a strip on the right instead of filling
       the screen. */
    justify-self: stretch;
    z-index: 95;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 84px 28px 40px;
    background: #ffffff;
    transform: translateY(-100%);
    transition: transform 320ms cubic-bezier(0.2, 0.7, 0.2, 1),
                visibility 0s linear 320ms;
    visibility: hidden;
  }
  body.is-menu-open .nav__menu-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    /* Level with the hamburger it replaces. */
    top: 24px;
    right: var(--gutter);
    z-index: 100;
    width: 36px;
    height: 36px;
    padding: 0;
    background: transparent;
    border: 0;
    color: var(--ink);
    cursor: pointer;
  }
  /* Hide the hamburger while the menu is open — the X replaces it */
  body.is-menu-open .nav__menu-toggle {
    visibility: hidden;
  }
  .nav__links[data-open="true"] {
    transform: translateY(0);
    visibility: visible;
    transition: transform 320ms cubic-bezier(0.2, 0.7, 0.2, 1),
                visibility 0s linear 0s;
  }
  .nav__links li { width: 100%; }
  .nav__links a {
    display: block;
    width: 100%;
    padding: 18px 0;
    font-family: var(--font-sans);
    font-weight: 400;
    font-size: 26px;
    line-height: 1.2;
    color: var(--ink);
    border-bottom: 1px solid var(--border);
  }
  .nav__links:hover a { opacity: 1; }

  /* Mobile-only Subscribe CTA inside the slide-down menu. Hidden by the
     base rule, so it has to be switched back on here. */
  .nav__links-cta {
    display: block;
    margin-top: 24px;
  }
  .nav__links-cta a {
    background: var(--color-brand);
    background-origin: border-box;
    background-clip: border-box;
    color: #ffffff;
    text-align: center;
    padding: 16px;
    border-radius: var(--radius);
    border-bottom: 0;
    font-weight: 500;
    font-size: 18px;
    transition: background 180ms ease;
  }
  .nav__links-cta a:hover { background: var(--color-brand-hover); }

  body.is-menu-open { overflow: hidden; }

  /* Hero — revert two-column desktop layout to single-column stack */
  .hero {
    padding: 32px var(--gutter) 24px;
  }
  .hero__inner {
    display: block;
    text-align: center;
  }
  .hero__text {
    max-width: 100%;
    padding-top: 32px;
  }
  .hero__mascot { width: 108px; margin-bottom: 18px; }
  .hero__headline {
    /* Two-line headline (break before "that"). Instrument Serif ships
       Regular and Italic only, so this weight is synthesized, and each
       engine widens the faux-bold differently. Sized to leave the long
       line room to spare so no engine pushes it to three lines. */
    font-size: clamp(29px, 9.4vw, 47px);
    font-weight: 1000;
    line-height: 1.12;
    letter-spacing: -0.02em;
    margin: 0 0 16px;
  }
  .hero__subtext {
    font-size: 13px;
    line-height: 1.55;
    margin: 0 auto 24px;
    max-width: min(100%, 360px);
  }
  /* The desktop subtext break (after "delivered") is too wide for phones;
     hide it and let the subtext wrap naturally. */
  .hero__subtext br { display: none; }
  .hero .subscribe-form { margin: 0 auto; }
  /* Same box as the form above it, so the message starts at the input's
     left edge instead of centring under a centred hero. */
  .hero .subscribe-status {
    max-width: 500px;
    margin: 10px auto 0;
    text-align: left;
  }
  .hero .subscribe-fineprint {
    max-width: min(100%, 340px);
    margin: 8px auto 0;
    text-align: center;
  }
  .hero .signups-closed { margin: 0 auto; text-align: center; }
  .hero__illustration {
    width: 100%;
    max-width: 330px;
    /* Negative top margin pulls the character up over the PNG's ~6.1%
       transparent header space so the full body/desk fits within shorter
       in-app browser viewports (e.g. Instagram). Fixed px max-width
       (no vh) keeps the size stable when in-app browser toolbars
       collapse on scroll. */
    margin: -16px auto 0;
  }

  /* Subscribe form: input + square arrow button, sized to feel
     proportional next to the headline rather than full-bleed. */
  .subscribe-form {
    flex-direction: row;
    gap: 8px;
    max-width: min(100%, 340px);
  }
  .subscribe-form input[type="email"] {
    flex: 1;
    min-width: 0;
    height: 44px;
    border: 1px solid var(--border-input);
    border-radius: var(--radius);
    /* 16px prevents iOS auto-zoom on focus. */
    font-size: 16px;
  }
  .subscribe-form .btn {
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: var(--radius);
  }
  .hero .subscribe-form { max-width: min(100%, 340px); }
  .hero .subscribe-form input[type="email"] { height: 44px; }
  .hero .subscribe-form .btn { width: 44px; height: 44px; }

  /* Subscribe notice (only present on legacy pages, kept defensive) */
  .subscribe-notice { white-space: normal; max-width: 420px; }

  /* Archive */
  .archive { padding: 0 var(--gutter) 64px; }
  .archive__heading {
    font-size: 31px;
    font-weight: 700;
    padding-bottom: 14px;
    margin-bottom: 22px;
    text-shadow: none;
  }
  .archive__grid {
    gap: 28px 0;
    grid-template-columns: 1fr;
  }
  .archive__actions {
    /* Clears the 28px between cards, so the button reads as a footer to the
       list rather than one more row in it. */
    margin-top: 32px;
  }
  /* Full width on phones, spanning the cards above it. */
  .archive__actions .btn {
    flex: 1 1 0;
    min-width: 0;
    padding: 0 8px;
  }
  .post-card__title {
    font-size: 25px;
    font-weight: 700;
    text-shadow: none;
    /* Single column here, so the title gets two lines rather than a
       hard cut at the card edge. */
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .post-card__excerpt { font-size: 13.5px; }

  /* Subscribe page */
  .subscribe-page { padding: 36px var(--gutter) 72px; }
  .subscribe-page .hero__mascot { width: 108px; margin-bottom: 20px; }
  .subscribe-page__headline { font-size: 30px; font-weight: 800; }
  .subscribe-page__subtext {
    font-size: 14.5px;
    max-width: 100%;
  }
  .subscribe-page__subtext br { display: none; }
  .social-link { margin-top: 32px; }

  /* Modal */
  .modal { padding: 16px; }
  .modal__dialog {
    padding: 30px 22px 24px;
    border-radius: 14px;
    max-width: 100%;
  }
  .signups-closed__headline,
  .signups-closed__subtext { white-space: normal; }
  .modal__close {
    width: 40px;
    height: 40px;
    top: 8px;
    right: 8px;
  }
  .modal__mascot { width: 56px; height: 56px; margin-bottom: 12px; }
  .modal__title { font-size: 20px; font-weight: 800; margin-bottom: 18px; }
  .modal__form { max-width: 100%; }
  .modal__form input[type="email"] { height: 46px; }
  .modal__form .btn { width: 46px; height: 46px; }

  /* Legal pages */
  .legal-page { padding: 36px var(--gutter) 64px; }
  .legal-page__headline { font-size: 32px; font-weight: 800; }
  .legal-page__updated { margin-bottom: 28px; }
  .legal-page__article {
    font-size: 15px;
    line-height: 1.65;
  }
  .legal-page__article h2 {
    font-size: 20px;
    font-weight: 800;
    margin-top: 32px;
  }

  /* Footer */
  /* Sign-off is desktop only, so mobile goes straight from content to footer. */
  .footer { padding: 18px var(--gutter); }
  .footer__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
  }
  /* Phones: the sign-off leads the stack, above the copyright. */
  .footer__signoff { order: -1; }
  .footer__right {
    /* One row: icon, then the legal links. Stacking put the single
       Instagram icon on a line of its own, which read as a stray mark. */
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 16px;
    row-gap: 10px;
  }
  .footer__social { flex-direction: row; gap: 14px; }
  .footer__links { gap: 14px; flex-wrap: wrap; justify-content: center; }
}

@media (max-width: 380px) {
  /* The gutter stops shrinking at 20px here, so the headline has to give
     back a little to keep the same breathing room as wider phones. */
  .hero__headline { font-size: 9.2vw; }
  .hero__subtext { font-size: 12.5px; }
  .subscribe-page__headline { font-size: 26px; }
  .legal-page__headline { font-size: 28px; }
}