/*
  Living with Prompts, cipher lime. Glyph field hero with lime as the second colour, light paper sections.
  Cipher variant, dark theme. Near-black ground with a purple cast. The
  hero looks empty until the pointer's light finds the scatter of
  characters behind the copy (script.js).

  Colour (revised Sep 2026 after Rino's feedback): purple is the main
  brand colour, lime is the accent. Purple carries the ground, the
  headline's two words, the primary button, the wordmark's pad, the
  tags, the tick on every promise and the section blooms. Lime is kept
  for the small payoffs only: the arrow badge in the primary button and
  its hover flood, the nav CTA, the marker pad under "This is for you
  if", the moment a phrase locks in the light, and the hovers. It is
  never body copy and never a glow. On paper and in the white nav, lime
  type is unreadable, so there it is only ever a fill under dark ink.

  Tilted pads and tags are a brand move: the "with" in the wordmark,
  every tag and chip, the marker labels. A hair of rotation, straightened
  on hover.

  Backgrounds: the cipher characters are the one texture. The drafting
  grids the earlier draft layered under the Build Check, the course and
  the final ask are gone, so the page never mixes two patterns.

  Paper variant: the page turns to paper under the hero and stays there
  until the footer. The Build Check, the course, the founder story and the
  final ask share the blog's light tokens, scoped in the block at the end of
  this file, so the dark rules above stay the base and only the light
  overrides live in one place.
*/

:root {
  --ground: #0d0b14;
  --surface: rgba(23, 20, 31, 0.7);
  --ink: #f3f1f8;
  --ink-muted: #a5a1b5;
  --brand: #8f65f0;
  --brand-deep: #7a52dd;
  --brand-light: #b79cff;
  --brand-pad: #6a3ae0;
  --lime: #c8f136;
  --lime-ink: #150e28;
  --accent-ink: #150e28;
  --line: rgba(255, 255, 255, 0.08);
  --font-display: "Bricolage Grotesque", system-ui, sans-serif;
  --font-sans: "Geist", system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, monospace;
  --font-hand: "Caveat", "Segoe Script", "Bradley Hand", cursive;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --container: 70rem;

  /* Pads and tags. One radius and one tilt for every lime marker on the
     page: the tags, the "with" in both wordmarks, the Build Check label. */
  --pad-radius: 0.35em;
  --pad-tilt: -3deg;

  /* The wordmark pads (nav and footer) round by a share of the pad's
     height rather than the font size: the nav line is 1.17em tall and
     the footer line 0.95em, so one em radius made the footer's corners
     rounder (37% of the pad) than the nav's (30%). 0.33 sits between. */
  --mark-round: 0.33;

  /* Buttons. The purple is the arrow badge and the hover flood; the two
     gradients are the white and the ink variant of the pill. */
  --btn-purple: #7c4dea;
  --btn-white-top: #ffffff;
  --btn-white-bottom: #efeafb;
  --btn-dark-top: #2a1b4d;
  --btn-dark-bottom: #150e28;
  --btn-ink: #171029;

  /* The indigo the hero and footer floors are lit in, as an RGB triplet so
     it can take an alpha: rgba(var(--indigo), 0.4). */
  --indigo: 92, 58, 220;

  /* A light grey-purple hairline for rules on paper. */
  --line-lilac: rgba(95, 46, 199, 0.16);
}

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

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection {
  background: var(--lime);
  color: var(--lime-ink);
}

/* The headline's two words, in lime so they read on the
   dark ground. The nav's wordmark overrides this with its own pad. */
.accent {
  color: var(--lime);
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  border-radius: 9999px;
  font-family: var(--font-sans);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition:
    transform 0.2s var(--ease-out),
    box-shadow 0.3s var(--ease-out),
    filter 0.2s var(--ease-out),
    background-color 0.2s var(--ease-out);
}

.btn:active {
  transform: scale(0.98);
}

.btn:focus-visible {
  border-radius: 9999px;
}

/* Two variants of one pill, both carrying a soft top-to-bottom gradient so
   the surface reads slightly domed rather than flat. White on dark grounds,
   ink on light ones. The arrow badge is purple at rest; on hover that purple
   floods the whole pill from the badge outward and the badge inverts. No hard
   bottom edge: the lift comes from a soft purple glow under the pill. */
.btn-primary {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--btn-white-top), var(--btn-white-bottom));
  color: var(--btn-ink);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -1px 0 rgba(21, 14, 40, 0.08),
    0 4px 16px rgba(109, 59, 217, 0.25);
}

.btn-primary:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -1px 0 rgba(21, 14, 40, 0.08),
    0 6px 22px rgba(109, 59, 217, 0.38);
}

/* The dark variant, set with a class in the markup wherever the pill sits
   on a light ground (paper sections, the white nav island): it inverts to
   ink and the purple flood reads exactly as it does on the dark ground. */
.btn-dark {
  background: linear-gradient(180deg, var(--btn-dark-top), var(--btn-dark-bottom));
  color: #ffffff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -1px 0 rgba(0, 0, 0, 0.3),
    0 4px 16px rgba(23, 16, 41, 0.28);
}

.btn-dark:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -1px 0 rgba(0, 0, 0, 0.3),
    0 6px 22px rgba(23, 16, 41, 0.36);
}

/* The flood: a circle under the badge swells until it fills the pill, the
   label turns white as the wave passes, and the badge inverts to white with
   a purple arrow, so the button ends as the mirror of its rest state. */
.btn-primary::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0.25rem;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--btn-purple);
  transform: translateY(-50%) scale(1);
  transition: transform 0.5s cubic-bezier(0.33, 1, 0.68, 1);
}

.btn-primary:hover::before {
  transform: translateY(-50%) scale(13);
}

/* The nav pill carries a smaller badge, so its flood starts smaller too. */
.btn-nav::before {
  left: 0.3rem;
  width: 1.9rem;
  height: 1.9rem;
}

.btn-label {
  position: relative;
  transition: color 0.25s var(--ease-out) 0.05s;
}

.btn-primary:hover .btn-label {
  color: #ffffff;
}

.btn-arrow {
  position: relative;
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background-color: var(--btn-purple);
  color: #ffffff;
  transition:
    background-color 0.25s var(--ease-out) 0.05s,
    color 0.25s var(--ease-out) 0.05s;
}

.btn-primary:hover .btn-arrow {
  background-color: #ffffff;
  color: var(--btn-purple);
}

.btn-arrow svg {
  width: 1.125rem;
  height: 1.125rem;
}

@media (prefers-reduced-motion: reduce) {
  .btn-primary::before,
  .btn-label {
    transition: none;
  }
}

/* Asymmetric padding: the arrow circle hugs the LEFT edge with a tight
   0.25rem inset, the label gets the room. */
.btn-lg {
  padding: 0.25rem 1.5rem 0.25rem 0.25rem;
  gap: 0.75rem;
  font-size: 1.0625rem;
}

/* ---------- Nav ---------- */

/* Floating island, not a full-bleed bar: .nav is the fixed positioner,
   .nav-inner is the visible rounded container.

   Two independent axes, set by script.js:
     .nav-scrolled  colour. Off at the very top (white island over the dark
                    hero), on once the page has scrolled at all (brand
                    purple). A quick tint, never tied to direction.
     .nav-hidden    visibility. On while scrolling down, off while
                    scrolling up. A long drift on a slow ease.
   Flat surfaces, no shadow, no hairline: the island reads as a solid
   object, and the row's tint shows through a light backdrop blur.

   The nav sits outside the light sections, so page tokens resolve to the
   dark theme here. It carries its own tokens, one set per colour state. */
.nav {
  --nav-purple: #6224b8;
  --nav-bg: #ffffff;
  --nav-ink: #171029;
  --nav-ink-soft: rgba(23, 16, 41, 0.66);
  --nav-accent: #6224b8;
  --nav-pad-bg: var(--brand-pad);
  --nav-pad-ink: #ffffff;
  --nav-btn-bg: var(--lime);
  --nav-btn-ink: var(--lime-ink);
  --nav-btn-hover: var(--lime-ink);
  --nav-btn-hover-ink: var(--lime);
  --ease-drift: cubic-bezier(0.3, 0.9, 0.1, 1);
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 40;
  padding: 1.5rem 1rem 0;
  transition: transform 0.8s var(--ease-drift);
}

.nav-scrolled {
  --nav-bg: rgba(255, 255, 255, 0.8);
  --nav-ink: #171029;
  --nav-ink-soft: rgba(23, 16, 41, 0.66);
  --nav-accent: #171029;
  --nav-pad-bg: var(--brand-pad);
  --nav-pad-ink: #ffffff;
  --nav-btn-bg: var(--lime);
  --nav-btn-ink: var(--lime-ink);
  --nav-btn-hover: var(--lime-ink);
  --nav-btn-hover-ink: var(--lime);
}

.nav-hidden {
  transform: translateY(calc(-100% - 1.5rem));
  transition-duration: 0.65s;
}

/* Keyboard users get the island back the moment focus lands in it. */
.nav-hidden:focus-within {
  transform: none;
}

.nav-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  height: 3.5rem;
  max-width: calc(var(--container) + 2rem);
  margin: 0 auto;
  padding: 0 0.5rem 0 1.5rem;
  border-radius: 9999px;
  background: var(--nav-bg);
  color: var(--nav-ink);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: background-color 0.2s;
}

.nav :focus-visible {
  outline-color: var(--nav-accent);
}

.wordmark {
  grid-column: 1;
  justify-self: start;
  min-width: 0;
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--nav-ink);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s;
}

.wordmark .accent {
  color: var(--nav-accent);
  transition: color 0.2s;
}

/* The header. Two small moves:
     the "with" sits on a purple pad, tilted a hair like a marker stroke
     (lime once the island itself turns purple on scroll);
     each nav link draws a lime rule under itself on hover. */
.wordmark .accent {
  display: inline-block;
  padding: 0 0.28em;
  margin: 0 0.04em;
  line-height: 1.17;
  border-radius: calc(1.17em * var(--mark-round));
  background: var(--nav-pad-bg);
  color: var(--nav-pad-ink);
  transform: rotate(var(--pad-tilt));
  transition: transform 0.3s var(--ease-out), background-color 0.2s, color 0.2s;
}

.wordmark:hover .accent {
  transform: rotate(0deg);
}

/* The pad is a prompt box. On load it lands like a sticker (a hair too
   big and too tilted, settling to its resting angle) while the
   characters inside it churn through the cipher alphabet and resolve
   into "with", left to right. A text cursor sits after the word, blinks
   twice and goes out. All of it under 1.5s, once per page load, and
   again on hover without the landing. The same rules run the footer
   mark once it scrolls into view (script.js, "Wordmark intro").
   `.wm-final` is the real word and sizes the pad; `.wm-live` is the
   churning copy laid over it, so the pad never changes width and the
   last frame is pixel-identical to the static mark. Without JS, or with
   reduced motion, nothing runs and the pad is just the word. */
.wm-pad {
  position: relative;
}

.wm-live {
  display: none;
  position: absolute;
  inset: 0;
  text-align: center;
  white-space: nowrap;
}

.wm-live-text {
  position: relative;
  display: inline-block;
}

.wm-cursor {
  position: absolute;
  left: 100%;
  top: 50%;
  width: 0.075em;
  height: 0.72em;
  margin-left: 0.07em;
  border-radius: 0.04em;
  background: currentColor;
  transform: translateY(-50%);
  opacity: 0;
}

/* Clip the churn to the pad without `overflow: hidden`: on an
   inline-block that moves the baseline to the pad's bottom edge, which
   grew the whole line and shoved "Living" and "Prompts" down for the
   length of the run. Paint containment clips the same box (rounded
   corners included) and leaves the baseline alone. */
.wm-pad.wm-run {
  contain: paint;
}

.wm-pad.wm-run .wm-final {
  visibility: hidden;
}

.wm-pad.wm-run .wm-live {
  display: block;
}

.wm-pad.wm-run .wm-cursor-on {
  opacity: 1;
}

.wm-pad.wm-land {
  animation: wm-land 0.55s cubic-bezier(0.34, 1.4, 0.64, 1) backwards;
}

@keyframes wm-land {
  from {
    opacity: 0;
    transform: rotate(-11deg) scale(1.35);
  }
  to {
    opacity: 1;
    transform: rotate(var(--pad-tilt)) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .wm-pad.wm-land {
    animation: none;
  }
}

.nav-links a {
  position: relative;
}

.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.35rem;
  height: 3px;
  border-radius: 2px;
  background: var(--lime);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease-out);
}

.nav-links a:hover::after {
  transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
  .wordmark .accent,
  .nav-links a::after {
    transition: none;
  }
}

.nav-links {
  grid-column: 2;
  justify-self: center;
  display: none;
  align-items: center;
  gap: 1.75rem;
}

.nav-links a {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--nav-ink-soft);
  text-decoration: none;
  transition: color 0.15s;
}

.nav-links a:hover {
  color: var(--nav-ink);
}

/* The nav CTA is the same white, raised pill as the rest of the page,
   sized down for the island, with a small purple arrow badge on the
   left. It inherits the .btn-primary surface and only retunes its size. */
.btn-nav {
  grid-column: 3;
  justify-self: end;
  height: 2.5rem;
  padding: 0.25rem 1rem 0.25rem 0.3rem;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
}

.btn-nav .btn-arrow {
  width: 1.9rem;
  height: 1.9rem;
}

.btn-nav .btn-arrow svg {
  width: 0.9rem;
  height: 0.9rem;
}

@media (prefers-reduced-motion: reduce) {
  .nav,
  .nav-inner,
  .wordmark,
  .wordmark .accent,
  .nav-links a,
  .btn-nav {
    transition: none;
  }
}

@media (min-width: 640px) {
  .wordmark {
    font-size: 1.125rem;
  }
  .nav {
    padding: 1.5rem 1.5rem 0;
  }
}

@media (min-width: 768px) {
  .nav-links {
    display: flex;
  }
}

/* ---------- Hero ---------- */

/* The ground is not flat black: a wide purple pool sits on the bottom edge
   and runs out toward the top, with a shoulder at each lower corner, so the
   hero reads as lit from below before a single character is drawn. The
   canvas field then adds its own floor glow and the characters on top. */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(13, 11, 20, 0) 56%, rgba(var(--indigo), 0.2) 100%),
    radial-gradient(70% 40% at 50% 112%, rgba(var(--indigo), 0.42), rgba(13, 11, 20, 0) 70%),
    radial-gradient(44% 80% at 0% 92%, rgba(var(--indigo), 0.4), rgba(13, 11, 20, 0) 72%),
    radial-gradient(44% 80% at 100% 92%, rgba(var(--indigo), 0.38), rgba(13, 11, 20, 0) 72%),
    var(--ground);
}

.hero-content {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 52rem;
  padding: 6rem 1.5rem 3rem;
  text-align: center;
}

h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 3.6vw + 1.2rem, 4.75rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.subtext {
  margin: 1.75rem 0 0;
  max-width: 38rem;
  font-size: clamp(1.0625rem, 0.4vw + 0.95rem, 1.3125rem);
  line-height: 1.55;
  color: var(--ink-muted);
  text-wrap: balance;
}

.hero-ctas {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin-top: 2.75rem;
}

/* The cipher field is the whole hero, edge to edge. The copy is protected
   by a guard rect inside the script (no characters are laid under it),
   not by cropping the band. */
.field {
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: hidden;
}

.field-shader {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

/* Settles the top edge under the nav. */
.field-fade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    var(--ground) 0%,
    rgba(13, 11, 20, 0.55) 6%,
    rgba(13, 11, 20, 0) 16%
  );
}

/* ---------- The seam ----------
   The field pressed into a rule between two paper sections: a 96px band
   edge to edge, a few rows of small ink characters right out to the
   viewport's sides. The wrapper paints paper, since the ground behind the
   sections is dark. The band's hit area reaches a
   little above and below it, so a hand near the rule wakes it; the copy
   on either side sits well outside that reach. */

.seam {
  position: relative;
  z-index: 2;
  height: 12rem;
  /* The same paper as the blog above and the Build Check below. */
  background: var(--paper, #fbfaff);
}

.seam-band {
  position: absolute;
  inset: 0;
  height: 12rem;
  overflow: hidden;
  pointer-events: none;
  /* The band's own ground, drawn as light rather than shade: a dark
     purple at low alpha over white only greys the paper, so this is a
     pale, saturated lavender at real strength, fullest along the centre
     line and easing to nothing well before the top and bottom edges, so
     no edge shows, with a rose shoulder to
     the left of centre and a blue one to the right, the same two colours
     the field's light carries. The whole thing breathes slowly between
     the blue violet and pink ends of that palette. */
  /* Turned well down (Sep 2026): the rose and blue shoulders are gone
     and the lavender sits at a quarter of its old strength, so the band
     reads like the founder rail, ink characters on paper with a breath
     of purple behind them, rather than a coloured stripe. */
  background:
    linear-gradient(180deg,
      rgba(222, 206, 255, 0) 0%,
      rgba(222, 206, 255, 0.02) 12%,
      rgba(222, 206, 255, 0.08) 28%,
      rgba(222, 206, 255, 0.16) 44%,
      rgba(222, 206, 255, 0.18) 50%,
      rgba(222, 206, 255, 0.16) 56%,
      rgba(222, 206, 255, 0.08) 72%,
      rgba(222, 206, 255, 0.02) 88%,
      rgba(222, 206, 255, 0) 100%);
  animation: seam-breathe 14s ease-in-out infinite alternate;
}

/* The reach: the seam itself takes the pointer, and it grows past its
   own box with a transparent border so the light answers a little early. */
.seam::before {
  content: "";
  position: absolute;
  inset: -1rem 0;
}

.seam-shader {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

@keyframes seam-breathe {
  from { filter: hue-rotate(-14deg); }
  to { filter: hue-rotate(16deg); }
}

@media (prefers-reduced-motion: reduce) {
  .seam-band { animation: none; }
}

/* No canvas: the hairline the seam replaced, in the paper's line colour. */
.seam-band.field-fallback::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: rgba(23, 16, 41, 0.14);
}

/* No canvas fallback: a static purple wash in the shape of a bowl. */
.field-fallback {
  background:
    radial-gradient(130% 58% at 50% 116%, rgba(143, 101, 240, 0.85), rgba(13, 11, 20, 0) 68%),
    radial-gradient(42% 86% at -4% 80%, rgba(122, 82, 221, 0.7), rgba(13, 11, 20, 0) 70%),
    radial-gradient(42% 86% at 104% 80%, rgba(122, 82, 221, 0.7), rgba(13, 11, 20, 0) 70%),
    var(--ground);
}

/* ---------- Entrance ---------- */

.rise {
  animation: rise 0.9s var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 0.1s + 0.1s);
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rise {
    animation: none;
  }
}

@media (max-width: 40rem) {
  .hero-content {
    padding-top: 5rem;
  }
}

/* ---------- Shared section type ---------- */

section[id] {
  scroll-margin-top: 5.5rem;
}

h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 2.6vw + 1.35rem, 3.75rem);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

/* ---------- Tags ----------
   One marker pad for every small label on the page: lime, dark ink, the
   body face at one size, tilted by the shared pad angle. The look lives
   here and only here; the element that carries a tag (.post-tag, .rail-tag,
   .course-kicker, .check-for-label) keeps its own position and spacing. */
.tag {
  display: inline-block;
  padding: 0.15em 0.5em;
  border-radius: var(--pad-radius);
  background: var(--lime);
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
  color: var(--lime-ink);
  white-space: nowrap;
  transform: rotate(var(--pad-tilt));
  transform-origin: left center;
  transition: transform 0.3s var(--ease-out);
}

/* A kicker above a headline: just the tag with room under it. */
.eyebrow {
  margin: 0 0 1rem;
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--brand);
  text-decoration: none;
  transition: color 0.2s var(--ease-out);
}

.text-link svg {
  width: 0.875rem;
  height: 0.875rem;
  transition: transform 0.25s var(--ease-out);
}

.text-link:hover {
  color: var(--ink);
}

.text-link:hover svg {
  transform: translateX(3px);
}

/* ---------- Scroll reveal (class set by script.js; without JS all visible) ---------- */

.reveal-ready [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.7s var(--ease-out) var(--rd, 0s),
    transform 0.7s var(--ease-out) var(--rd, 0s);
}

.reveal-ready [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* ---------- Blog ----------
   The first light section. The blog sits on paper straight under the dark
   hero, with its tokens flipped locally so every shared pattern (h2,
   hairlines, text link, muted copy) just works. The paper edge under the
   hero is the one hard change of ground on the page: the dark bottom of
   the cipher field lands straight on it, and the paper then runs on
   through the Build Check and the course to the footer. */

.blog {
  --paper: #fbfaff;
  --ink: #171029;
  --ink-muted: rgba(23, 16, 41, 0.64);
  --line: rgba(23, 16, 41, 0.14);
  --brand: #5f2ec7;
  position: relative;
  /* The B carousel track bleeds past the content column; clip it here so
     the page never gains a horizontal scroll. */
  overflow-x: clip;
  background: var(--paper);
  color: var(--ink);
  padding: 7rem 1.5rem;
}

.blog ::selection {
  background: #5f2ec7;
  color: #fff;
}

.blog-inner {
  position: relative;
  max-width: var(--container);
  margin: 0 auto;
}

/* One baseline row: the title left, the archive link (and, in B, the
   arrows) at the far end. */
.blog-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem 2rem;
  margin-bottom: 2.5rem;
}

.blog-head h2 {
  margin: 0;
}

.blog-foot {
  margin-top: 2.5rem;
}

@media (min-width: 64rem) {
  .blog-head {
    margin-bottom: 3rem;
  }
  .blog-foot {
    margin-top: 3rem;
  }
}

.post-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--line);
}

.post-row {
  border-top: 1px solid var(--line);
}

/* Three columns on desktop: thumb, body, tag. .post-meta collapses to
   display: contents there so the tag takes its own cell at the end of the
   row; at narrow widths it sits above the title. */
.post-link {
  display: grid;
  grid-template-columns: 6rem 1fr;
  grid-template-areas:
    "thumb meta"
    "thumb body";
  align-items: start;
  gap: 0.5rem 1.25rem;
  padding: 1.25rem 1rem;
  margin-inline: -1rem;
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  transition: background-color 0.3s var(--ease-out);
}

.post-link:hover {
  background: rgba(109, 59, 217, 0.07);
}

.post-meta {
  grid-area: meta;
  display: flex;
  align-items: center;
}

/* Tags are lime pads with dark type, tilted a hair (the brand's
   marker-stroke move from the wordmark), straightening on hover. */
.post-tag {
  grid-area: tag;
  justify-self: end;
  flex: none;
}

.post-link:hover .post-tag {
  transform: rotate(0deg);
}

.post-thumb {
  grid-area: thumb;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px var(--line);
  /* The thumbnails are dark art, so the ground under them stays dark while
     they decode and the paper never flashes through. */
  background: #0b0813;
}

.post-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease-out);
}

.post-link:hover .post-thumb img {
  transform: scale(1.04);
}

/* Stand-in for a post with no generated thumbnail yet: the same void as the
   real set with a single brand bloom in it, and nothing else. */
.post-thumb-placeholder {
  background:
    radial-gradient(7rem 5rem at 50% 46%, rgba(143, 101, 240, 0.28), transparent 70%),
    radial-gradient(14rem 10rem at 50% 40%, rgba(143, 101, 240, 0.08), transparent 70%),
    #0b0813;
}

.post-body {
  grid-area: body;
  min-width: 0;
}

.post-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.015em;
  transition: color 0.2s var(--ease-out);
}

.post-link:hover .post-title {
  color: var(--ink);
}

.post-excerpt {
  margin: 0.4rem 0 0;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ink-muted);
}

@media (min-width: 48rem) {
  .post-link {
    grid-template-columns: 9.5rem minmax(0, 1fr) auto;
    grid-template-areas: "thumb body tag";
    align-items: center;
    gap: 1.75rem;
    padding: 1.5rem 1rem;
  }

  .post-meta {
    display: contents;
  }

  .post-thumb {
    aspect-ratio: 4 / 3;
  }

  .post-title {
    font-size: 1.375rem;
  }

  .post-excerpt {
    font-size: 1rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  .post-thumb img,
  .text-link svg {
    transition: none;
  }
}

/* ---------- Blog, versions B and C ----------
   The section has three layouts to review, flipped by the fixed panel at
   the foot of the page (script.js). A is the list above. B is the carousel
   from the paper lime match page: hairline cards on a full width snap
   track. C is the cards: four equal cards in one row.
   Nothing here reuses .post-link or .post-tag, since those carry the
   list's grid areas and the one-line excerpt. */

.blog-v[hidden] {
  display: none !important;
}

/* B: the carousel. The arrows join the archive link in the head row only
   here. Everything below is the paper lime match page's carousel with its
   classes renamed so it never touches the list's .post-* rules. */

.blog:not([data-variant-on="b"]) .blog-arrow {
  display: none;
}

.blog-head-words {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}

.blog-controls {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

/* Round hairline arrows. The previous arrow is the same glyph mirrored.
   At the ends the arrow that has nowhere to go fades but stays in place. */
.blog-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 9999px;
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  transition:
    border-color 0.25s var(--ease-out),
    background-color 0.25s var(--ease-out),
    color 0.25s var(--ease-out),
    opacity 0.25s var(--ease-out);
}

.blog-arrow svg {
  width: 1rem;
  height: 1rem;
}

.blog-arrow[data-dir="-1"] svg {
  transform: scaleX(-1);
}

.blog-arrow:hover:not(:disabled) {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--lime);
}

.blog-arrow:disabled {
  opacity: 0.3;
  cursor: default;
}

/* The track: a row of fixed-width cards that snaps a card at a time. The
   scroller is the full screen width, pulled out of the column on both
   sides, with padding that puts the first card back on the column. So the
   cards start on the column, bleed off the right edge, and when scrolled
   they slide under the left gutter to the screen edge rather than being
   cut at the column. The scroll padding keeps every snap point on the
   column. Scrollbar hidden, since the arrows and the cut card carry the
   affordance. The bleed is the gap from the screen edge to the column,
   written as a plain length: a percentage would mean something different
   inside scroll-padding (the scroller's width, not the column's) and the
   snap would pull the first card to the screen edge on load. */
.rail-track {
  --bleed: max(1.5rem, (100vw - var(--container)) / 2);
  display: flex;
  gap: 1.25rem;
  margin: 0 calc(-1 * var(--bleed));
  padding: 0 var(--bleed);
  scroll-padding-inline: var(--bleed);
  list-style: none;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.rail-track::-webkit-scrollbar {
  display: none;
}

.rail-card {
  flex: 0 0 auto;
  width: min(20.5rem, 82vw);
  min-width: 0;
  scroll-snap-align: start;
}

/* A card is a hairline box on the paper, art flush to its top edge, words
   in a padded body. No shadow: the lift on hover is the border darkening
   and a lime wash under the words. */
.rail-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--paper);
  text-decoration: none;
  color: inherit;
  transition:
    border-color 0.3s var(--ease-out),
    background-color 0.3s var(--ease-out);
}

.rail-link:hover {
  border-color: rgba(95, 46, 199, 0.5);
  background: rgba(109, 59, 217, 0.06);
}

.rail-thumb {
  position: relative;
  flex: none;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 16 / 10;
  /* The thumbnails are dark art, so the ground under them stays dark while
     they decode and the paper never flashes through. */
  background: #0b0813;
}

.rail-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease-out);
}

.rail-link:hover .rail-thumb img {
  transform: scale(1.04);
}

/* The tag pins to the top-left corner of the art. */
.rail-tag {
  position: absolute;
  top: 0.875rem;
  left: 0.875rem;
}

.rail-link:hover .rail-tag {
  transform: rotate(0deg);
}

.rail-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  padding: 1.25rem 1.375rem 1.5rem;
}

.rail-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.rail-excerpt {
  margin: 0.6rem 0 0;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ink-muted);
}

/* Every card closes on a read link. */
.rail-more {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  /* Always on the card's foot, whatever the excerpt's length. */
  margin-top: auto;
  padding-top: 1.5rem;
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--brand);
  transition: color 0.2s var(--ease-out);
}

.rail-more svg {
  width: 0.875rem;
  height: 0.875rem;
  transition: transform 0.25s var(--ease-out);
}

.rail-link:hover .rail-more {
  color: var(--ink);
}

.rail-link:hover .rail-more svg {
  transform: translateX(3px);
}

@media (min-width: 40rem) {
  .rail-track {
    gap: 1.5rem;
  }

  .rail-card {
    width: 21.5rem;
  }
}

@media (min-width: 64rem) {
  .rail-card {
    width: 22.5rem;
  }

  .rail-title {
    font-size: 1.375rem;
  }
}

/* C: the cards. One hairline grid, walls shared, art on top. */

.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.card {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.card-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1.25rem;
  color: inherit;
  text-decoration: none;
  transition: background-color 0.3s var(--ease-out);
}

.card-link:hover {
  background: rgba(109, 59, 217, 0.07);
}

.card-art {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  background: #0b0813;
  box-shadow: inset 0 0 0 1px var(--line);
  aspect-ratio: 4 / 3;
}

.card-thumb {
  position: absolute;
  inset: 0;
}

.card-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease-out);
}

.card-link:hover .card-thumb img {
  transform: scale(1.04);
}

.card-body {
  padding-top: 1.125rem;
}

.card-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -0.015em;
}

.card-excerpt {
  margin: 0.5rem 0 0;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--ink-muted);
}

@media (min-width: 40rem) {
  .card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .card-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .card-link {
    padding: 1.375rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rail-thumb img,
  .rail-more svg,
  .card-thumb img {
    transition: none;
  }
}

/* The picker. Fixed at the foot of the page, above everything. */

.blog-panel {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.5rem 0.5rem 0.875rem;
  border: 1px solid rgba(201, 184, 255, 0.18);
  border-radius: 999px;
  background: rgba(19, 16, 32, 0.9);
  backdrop-filter: blur(12px);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: #a5a1b5;
}

.blog-panel-label {
  margin-right: 0.375rem;
  text-transform: uppercase;
}

.blog-panel button {
  display: inline-flex;
  align-items: baseline;
  gap: 0.375rem;
  padding: 0.4rem 0.75rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: #f3f1f8;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.blog-panel button i {
  font-style: normal;
  font-weight: 400;
  color: #a5a1b5;
}

.blog-panel button:hover {
  border-color: rgba(201, 184, 255, 0.3);
}

.blog-panel button[aria-pressed="true"] {
  background: var(--brand);
  color: #ffffff;
}

.blog-panel button[aria-pressed="true"] i {
  color: rgba(255, 255, 255, 0.75);
}

/* ---------- Build Check ----------
   Full bleed, not a boxed panel: the magnet's lockup and layers art sit
   straight on the ground over a faint drafting grid, with the section's own
   glow rising behind the art. The dark values here are the base; the paper
   block at the end of the file retunes the ground, the blooms and the grid. */

.check {
  position: relative;
  padding: 8.5rem 1.5rem 7rem;
  background:
    radial-gradient(46rem 34rem at 22% 55%, rgba(143, 101, 240, 0.17), transparent 65%),
    radial-gradient(36rem 28rem at 78% 30%, rgba(143, 101, 240, 0.08), transparent 65%),
    var(--ground);
}

/* The drafting grid that used to sit here is gone: the cipher characters
   are the page's one texture. The pseudo element stays so the paper
   block below can still address it without a hard edge appearing. */
.check::before {
  content: none;
}

.check-inner {
  position: relative;
  display: grid;
  gap: 3.5rem;
  align-items: center;
  max-width: var(--container);
  margin: 0 auto;
}

@media (min-width: 1024px) {
  .check-inner {
    grid-template-columns: 6fr 6fr;
    gap: 4rem;
  }
}

/* The lockup: the magnet's wordmark above its layers art. Both are
   transparent, so they sit straight on the ground and a frame here would
   only be a card on open ground. */
.check-lockup {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
  width: 100%;
  max-width: 24rem;
  margin: 0 auto;
}

@media (min-width: 1024px) {
  .check-lockup {
    max-width: none;
    margin: 0;
  }
}

/* Both images are cropped to their visible content, so flex-start alone
   keeps the wordmark and the art on the same left edge. */
.check-logo {
  display: block;
  width: min(70%, 18rem);
  height: auto;
}

@media (min-width: 1024px) {
  .check-logo {
    width: min(70%, 22.5rem);
  }
}

.check-art-img {
  display: block;
  width: min(100%, 29rem);
  height: auto;
}

/* The Build Check sits on paper, where lime type vanishes, so the label
   is dark ink on a lime highlighter pad, the same move as the "with" in
   the wordmark. */
.check-for-label {
  margin: 1.75rem 0 0;
}

/* Hung out by its own padding so the words line up with the list below. */
.check-for-label .tag {
  margin-left: -0.5em;
}

.check-for {
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
  max-width: 33rem;
}

.check-for li,
.course-for li {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.625rem 0;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--ink);
}

/* Round check badge in brand purple with a white glyph, so the list
   reads as three promises kept by the purple button underneath. The
   course's promise list wears the same badge. */
.check-for li::before,
.course-for li::before {
  content: "";
  flex: none;
  width: 1.625rem;
  height: 1.625rem;
  border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E")
      center / 0.8125rem no-repeat,
    var(--brand);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.check-action {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  margin-top: 2rem;
}

/* ---------- Course ----------
   Straight after the Build Check. Three stacked moves: a centred
   headline, then the promises on the left with the art on the right in a
   framed stage, then the ask centred underneath. The section's own light
   gathers behind the stage; the headline and the ask sit on clean ground. */

.course {
  position: relative;
  padding: 7rem 1.5rem 9rem;
  background: var(--ground);
}

/* The whole section sits in one card: a lifted sheet with a hairline, a
   deep radius and a soft drop, so the course reads as a single object
   between the Build Check and the founder story. The bloom and the drafting grid
   live inside the card, clipped by its corners. */
.course-card {
  position: relative;
  max-width: 78rem;
  margin: 0 auto;
  padding: 4.5rem 2rem 5rem;
  border: 1px solid rgba(95, 46, 199, 0.16);
  border-radius: 2rem;
  background: #efe9fc;
  overflow: hidden;
  box-shadow: 0 12px 32px -24px rgba(95, 46, 199, 0.35);
}

@media (min-width: 1024px) {
  .course-card {
    padding: 5.5rem 5rem 6rem;
  }
}

/* A brand bloom behind the stage side, so the frame is lit from behind and
   the copy side stays near black. */
.course-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(44rem 34rem at 72% 52%, rgba(143, 101, 240, 0.18), transparent 65%),
    radial-gradient(30rem 22rem at 20% 18%, rgba(143, 101, 240, 0.06), transparent 65%);
}

/* No drafting grid in the card either (see the note on .check::before). */
.course-card::after {
  content: none;
}

/* The headline, centred over the two columns. */
.course-head {
  position: relative;
  max-width: 46rem;
  margin: 0;
  text-align: left;
}

.course-head h2 {
  font-size: clamp(2.5rem, 2.9vw + 1.4rem, 4rem);
}

/* A one-line promise opens the copy column, then the lede. */
.course-promise {
  margin: 0 0 0.875rem;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.lede {
  margin: 0 0 1.75rem;
  max-width: 34rem;
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--ink-muted);
}

.course-inner {
  position: relative;
  display: grid;
  gap: 3.5rem;
  align-items: center;
  max-width: 72rem;
  margin: 4.5rem auto 0;
}

/* Two near-equal columns: with the headline moved up top, the promise
   list and the stage carry similar weight, the list a touch wider so its
   lines wrap comfortably. */
@media (min-width: 1024px) {
  .course-inner {
    grid-template-columns: 6fr 5fr;
    gap: 5rem;
  }
}

.course-copy {
  max-width: 36rem;
}

/* A small mono label so the list reads as a section of its own now that
   it no longer sits under the headline. */
.course-kicker {
  margin: 0;
}

/* The promise list borrows the Build Check's badge rows (see .check-for). */
.course-for {
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}

/* The ask closes the copy column as a form: a pill field with the
   primary button seated inside its right end, so the two read as one
   control. Below a narrow width the button drops under the field. */
.course-join {
  max-width: 32rem;
  margin-top: 2.5rem;
}

.course-join-row {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.375rem 0.375rem 1.5rem;
  border: 1px solid rgba(201, 184, 255, 0.18);
  border-radius: 9999px;
  background: rgba(23, 20, 31, 0.7);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition:
    border-color 0.2s var(--ease-out),
    box-shadow 0.3s var(--ease-out);
}

.course-join-row:focus-within {
  border-color: var(--brand);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 0 0 4px rgba(143, 101, 240, 0.18);
}

.course-join-input {
  flex: 1 1 8rem;
  min-width: 0;
  padding: 0.5rem 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 1.0625rem;
  text-align: left;
  color: var(--ink);
}

.course-join-input::placeholder {
  color: var(--ink-muted);
}

.course-join-input:focus {
  outline: none;
}

.course-join-row .btn {
  flex: none;
  border: 0;
  cursor: pointer;
}

.course-join-note {
  margin: 0.875rem 0 0 1.5rem;
  font-size: 0.875rem;
  color: var(--ink-muted);
}

@media (max-width: 480px) {
  .course-join-row {
    flex-direction: column;
    align-items: stretch;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    gap: 0.75rem;
  }

  .course-join-row:focus-within {
    box-shadow: none;
  }

  .course-join-input {
    flex: 0 0 auto;
    padding: 0.875rem 1.5rem;
    border: 1px solid rgba(201, 184, 255, 0.18);
    border-radius: 9999px;
    background: rgba(23, 20, 31, 0.7);
  }

  .course-join-input:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 4px rgba(143, 101, 240, 0.18);
  }

  /* The badge stays at the left end of the stretched pill, over the
     circle the hover wave grows from. */
  .course-join-row .btn {
    justify-content: flex-start;
  }

  .course-join-note {
    margin-left: 0;
  }
}

/* The stage: open ground, no frame. A purple bloom sits low behind the
   art, which is oversized a touch so it fills the column. */
.course-stage {
  position: relative;
  aspect-ratio: 1 / 1;
}

.course-stage::before {
  content: "";
  position: absolute;
  inset: 10% 0 0;
  pointer-events: none;
  background: radial-gradient(60% 55% at 50% 70%, rgba(143, 101, 240, 0.4), transparent 70%);
  filter: blur(12px);
}

.course-stage-art {
  position: absolute;
  inset: 50% auto auto 50%;
  width: auto;
  height: 125%;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 30px 40px rgba(6, 4, 12, 0.6));
}

@media (min-width: 1024px) {
  .course-stage {
    aspect-ratio: 1 / 1;
  }

  .course-stage-art {
    height: 135%;
  }
}

/* ---------- Founder story ----------
   A lifted band after the course: a hairline along the bottom, a slightly
   raised ground, and the section's light gathered behind the portrait. */

.story {
  position: relative;
  overflow-x: clip;
  padding: 7rem 1.5rem 8rem;
  background: #100d1a;
}

.story::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(40rem 36rem at 84% 55%, rgba(143, 101, 240, 0.14), transparent 65%);
}

.story-inner {
  position: relative;
  max-width: var(--container);
  margin: 0 auto;
}

.story-title {
  margin: 0 0 1.75rem;
  max-width: 14ch;
  font-size: clamp(2.25rem, 2.6vw + 1.2rem, 3.5rem);
}

.story-grid {
  display: grid;
  gap: 3rem;
  align-items: stretch;
}

/* From the laptop breakpoint the portrait runs off the right edge of the
   viewport, so the grid drops its right padding and the card keeps only
   its left corners. */
@media (min-width: 1024px) {
  .story-grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 5rem;
    margin-right: calc(50% - 50vw);
  }

}

.story-body {
  margin: 0 0 1.375rem;
  max-width: 38rem;
  font-size: 1.1875rem;
  line-height: 1.6;
  color: var(--ink-muted);
}

/* The sign off. His name in a hand, the role in mono under it, the way a
   letter ends. */
.story-sign {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  margin: 2.25rem 0 0;
}

.story-sign-name {
  font-family: var(--font-hand);
  font-size: 2.375rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--ink);
  transform: rotate(var(--pad-tilt));
  transform-origin: left bottom;
}

.story-sign-role {
  margin-top: 0.625rem;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--brand);
}

/* The rail: the hero's cipher field again, a pillar of ink glyphs down
   the far left of the screen in the gutter outside the container, so the
   section is framed by a live surface on one side and the portrait on
   the other. The script shapes the field itself, full at the left edge
   and fading toward the copy and at both ends, so the box needs no mask.
   Wide screens only, where the gutter has room for it. */
.story-rail {
  display: none;
}

@media (min-width: 1360px) {
  .story-rail {
    display: block;
    position: absolute;
    left: 0;
    top: 6.5rem;
    bottom: 6.5rem;
    width: min(16rem, calc(50vw - var(--container) / 2 - 2.5rem));
    overflow: hidden;
    /* Takes the pointer: the words in the pillar form only under it. */
    pointer-events: auto;
  }

  .story-rail-shader {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }

  /* No canvas fallback: a purple wash off the left edge. */
  .story-rail.field-fallback {
    background: linear-gradient(90deg, rgba(143, 101, 240, 0.35), transparent);
    -webkit-mask-image: linear-gradient(to bottom, transparent, black 25%, black 75%, transparent);
    mask-image: linear-gradient(to bottom, transparent, black 25%, black 75%, transparent);
  }
}

.story-portrait {
  position: relative;
  overflow: hidden;
  margin: 0;
  min-height: 24rem;
  border: 1px solid rgba(23, 16, 41, 0.1);
  border-radius: 1.5rem;
  background: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    0 40px 80px -30px rgba(95, 46, 199, 0.25),
    0 24px 60px -20px rgba(23, 16, 41, 0.25);
}

.story-portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 55% 40%;
}

@media (min-width: 1024px) {
  .story-portrait {
    border-right: 0;
    border-radius: 1.5rem 0 0 1.5rem;
  }

  .story-portrait img {
    object-position: 45% 40%;
  }
}

/* A soft dark shelf along the bottom so the pills stay legible on the desk. */
.story-portrait::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 45%;
  pointer-events: none;
  background: linear-gradient(to top, rgba(23, 16, 41, 0.55), transparent);
}

.story-pills {
  position: absolute;
  inset: auto 1.5rem 1.5rem;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.625rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.story-pills li {
  padding: 0.5rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  background: rgba(23, 16, 41, 0.45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  color: #fff;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .story-portrait { aspect-ratio: 4 / 3; min-height: 0; }
  .story-pills { inset: auto 0.75rem 0.75rem; gap: 0.375rem; }
  .story-pills li { padding: 0.375rem 0.75rem; font-size: 0.6875rem; white-space: normal; text-align: center; }
}

/* ---------- Final CTA ----------
   Centred on the plain ground, lit from below, with the drafting grid
   fading in around the light and out again before the footer. */

.final {
  position: relative;
  padding: 8rem 1.5rem 10rem;
  text-align: center;
  background: var(--ground);
}

.final::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(56rem 32rem at 50% 62%, rgba(143, 101, 240, 0.2), transparent 68%);
}

/* No drafting grid under the final ask (see the note on .check::before). */
.final::after {
  content: none;
}

.final-inner {
  position: relative;
  max-width: 48rem;
  margin: 0 auto;
}

.final h2 {
  font-size: clamp(2.25rem, 2.8vw + 1.4rem, 3.75rem);
}

.final .subtext {
  margin: 1.5rem auto 2.5rem;
}

/* ---------- Footer ----------
   Fixed to the bottom of the viewport and behind the page. The main
   carries a bottom margin the size of the footer (measured into
   --footer-h by script.js), so the last sheet of paper scrolls up and
   reveals it. A band of empty ground, then the hero's cipher field along
   the bottom, with a giant outlined wordmark floating in the middle of
   the footer, over the dark ground, in flow so the footer's natural
   height includes it. */

:root {
  --footer-h: 70vh;
}

.js main {
  position: relative;
  z-index: 1;
  margin-bottom: var(--footer-h);
}

.js .footer {
  position: fixed;
  inset: auto 0 0;
  z-index: 0;
}

.footer {
  position: relative;
  display: flex;
  flex-direction: column;
  height: calc(40vh + 7rem);
  min-height: 23rem;
  /* The hero's floor again: an indigo band on the foot, rising at the sides. */
  background:
    linear-gradient(180deg, rgba(13, 11, 20, 0) 50%, rgba(var(--indigo), 0.2) 100%),
    radial-gradient(70% 46% at 50% 112%, rgba(var(--indigo), 0.4), rgba(13, 11, 20, 0) 70%),
    radial-gradient(44% 90% at 0% 96%, rgba(var(--indigo), 0.36), rgba(13, 11, 20, 0) 72%),
    radial-gradient(44% 90% at 100% 96%, rgba(var(--indigo), 0.34), rgba(13, 11, 20, 0) 72%),
    var(--ground);
  color: var(--ink);
  overflow: hidden;
}

/* The copy floats over the whole footer, centred, so the wordmark sits in
   the dark hollow with the field below it. Only the wordmark takes the
   pointer; the rest lets the light through. */
.footer-inner {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  text-align: center;
  padding: 0 1.5rem;
  pointer-events: none;
}

.footer-inner a {
  pointer-events: auto;
}

/* A dark hollow behind the mark, so the tiles thin out under the letters
   and the outline stays clean where it crosses the grid. */
.footer-inner::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 50%;
  width: min(90vw, 64rem);
  height: 18rem;
  transform: translate(-50%, -50%);
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(13, 11, 20, 0.92), rgba(13, 11, 20, 0.7) 55%, rgba(13, 11, 20, 0) 100%);
}

/* The wordmark, set enormous and solid (the outline version is gone):
   white letters with "with" on a tilted purple pad, the nav's mark at
   footer scale. Hover keeps the old payoff: the pad straightens and
   floods lime, and the letters brighten to full white. */
.footer-mark {
  display: block;
  max-width: 100%;
  text-decoration: none;
  line-height: 1;
}

.footer-mark-text {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.5rem, 5.6vw, 5.25rem);
  letter-spacing: -0.04em;
  line-height: 0.95;
  white-space: nowrap;
  color: rgba(243, 241, 248, 0.88);
  transition: color 0.5s var(--ease-out);
}

.footer-mark-with {
  display: inline-block;
  padding: 0 0.28em;
  margin: 0 0.04em;
  line-height: 0.95;
  border-radius: calc(0.95em * var(--mark-round));
  background: var(--lime);
  color: var(--lime-ink);
  transform: rotate(var(--pad-tilt));
  transition:
    transform 0.5s var(--ease-out),
    background-color 0.5s var(--ease-out),
    color 0.5s var(--ease-out);
}

.footer-mark:hover .footer-mark-text {
  color: var(--ink);
}

.footer-mark:hover .footer-mark-with {
  transform: rotate(0deg);
}

@media (prefers-reduced-motion: reduce) {
  .footer-mark-text,
  .footer-mark-with,
  .post-tag,
  .rail-tag {
    transition: none;
  }
}

.footer-copy {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
}

/* The field covers the whole footer, right up to the sheet's edge, so a
   light near the top blooms into the band under the paper instead of
   cutting off at a hard line. Dark until a light finds it. */
.footer-field {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.footer-field-shader {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.footer-field.field-fallback {
  background:
    radial-gradient(130% 58% at 50% 116%, rgba(143, 101, 240, 0.85), rgba(13, 11, 20, 0) 68%),
    radial-gradient(42% 86% at -4% 80%, rgba(122, 82, 221, 0.7), rgba(13, 11, 20, 0) 70%),
    radial-gradient(42% 86% at 104% 80%, rgba(122, 82, 221, 0.7), rgba(13, 11, 20, 0) 70%),
    var(--ground);
}

@media (max-width: 640px) {
  .footer-inner { gap: 1.25rem; }
  .footer-inner::before { height: 16rem; }
  .footer-mark-text { white-space: normal; font-size: clamp(2.5rem, 11vw, 3.75rem); }
  .footer { height: calc(30vh + 6rem); min-height: 19rem; }
}

/* A footer taller than the viewport would have an unreachable top edge,
   so on short screens it goes back into the flow. */
@media (max-height: 560px) {
  .js main { margin-bottom: 0; }
  .js .footer { position: relative; }
}

/* ---------- Paper tail ----------
   Everything after the hero sits on the blog's paper. The tokens flip
   locally, the same way the blog does it, so the shared patterns (h2,
   eyebrow, lede, badge rows, hairlines, wordmark) follow on their own.
   The rules below only touch the values the dark base hard codes: blooms
   that were tuned for near black, the drafting grids, the join field, the
   stage shadow, the portrait frame and the primary pill's glow. */

.check,
.course,
.story,
.final {
  --paper: #fbfaff;
  --ground: var(--paper);
  --surface: #ffffff;
  --ink: #171029;
  --ink-muted: rgba(23, 16, 41, 0.64);
  --line: rgba(23, 16, 41, 0.14);
  --brand: #5f2ec7;
  --brand-deep: #4f22b0;
  color: var(--ink);
}

.check ::selection,
.course ::selection,
.story ::selection,
.final ::selection {
  background: #5f2ec7;
  color: #fff;
}

/* Lime type is unreadable on paper, so the focus ring goes back to the
   sheet's dark purple here and in the blog. */
.blog :focus-visible,
.course :focus-visible,
.story :focus-visible,
.final :focus-visible {
  outline-color: var(--brand);
}

/* The button is the same white, raised pill everywhere, so nothing
   retunes it on the paper sections. */

/* Build Check: paper ground, a faint violet bloom behind the art, the
   drafting grid drawn in ink instead of lavender, and the art's shadow
   standing in for the screen blend it had on the dark ground. */
.check {
  /* The blog above is the same paper; the seam between them marks the
     change of section, so the padding above the lockup can stay shorter
     than the dark ground needed. */
  padding-top: 9rem;
  background:
    radial-gradient(46rem 34rem at 22% 55%, rgba(109, 59, 217, 0.13), transparent 65%),
    radial-gradient(36rem 28rem at 78% 30%, rgba(109, 59, 217, 0.07), transparent 65%),
    var(--paper);
}

.check .check-art-img {
  filter: drop-shadow(0 24px 36px rgba(23, 16, 41, 0.18));
}

/* Course: paper ground, a faint violet bloom behind the stage, the
   drafting grid drawn in ink instead of lavender. */
.course {
  background: var(--paper);
}

.course-card::before {
  background-image:
    radial-gradient(44rem 34rem at 72% 52%, rgba(109, 59, 217, 0.14), transparent 65%),
    radial-gradient(30rem 22rem at 20% 18%, rgba(109, 59, 217, 0.06), transparent 65%);
}

/* The join field turns into a white pill with an ink hairline. */
.course-join-row {
  border-color: rgba(23, 16, 41, 0.16);
  background: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.course-join-row:focus-within {
  border-color: var(--brand);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 0 0 4px rgba(95, 46, 199, 0.2);
}

@media (max-width: 480px) {
  .course-join-row {
    background: none;
    box-shadow: none;
  }

  .course-join-input {
    border-color: rgba(23, 16, 41, 0.16);
    background: #fff;
  }

  .course-join-input:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 4px rgba(95, 46, 199, 0.2);
  }
}

/* The stage bloom and the art's shadow, both lighter on paper. */
.course-stage::before {
  background: radial-gradient(60% 55% at 50% 70%, rgba(109, 59, 217, 0.34), transparent 70%);
}

.course-stage-art {
  filter: drop-shadow(0 24px 36px rgba(23, 16, 41, 0.22));
}

/* Founder story: a slightly deeper sheet of paper so it still reads as a
   lifted band between the course and the final ask. */
.story {
  background: var(--paper);
}

.story::before {
  background: radial-gradient(40rem 36rem at 84% 55%, rgba(109, 59, 217, 0.09), transparent 65%);
}


/* Final ask: paper, a faint bloom under the copy, the grid in ink. */
.final {
  background: var(--paper);
}

.final::before {
  background: radial-gradient(56rem 32rem at 50% 62%, rgba(109, 59, 217, 0.14), transparent 68%);
}

/* The final ask is the last sheet of paper. Its bottom corners round off
   and it clips its own bloom and grid, so it lifts off the dark footer as
   a sheet. Its shadow is a faint purple rim, since a dark drop reads as
   nothing on near black. */
.final {
  border-radius: 0 0 2rem 2rem;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(143, 101, 240, 0.35), 0 24px 60px -20px rgba(143, 101, 240, 0.45);
}

@media (max-width: 640px) {
  .final { border-radius: 0 0 1.25rem 1.25rem; }
}

/* ---------- Section layouts B and C ----------
   The Build Check, the course and the founder story each carry two more
   layouts beside the one above. They sit on the same paper, so every
   value here is written in the paper's ink and purple straight away,
   rather than through the tokens the block above retunes. Each wrapper
   hides with the hidden attribute, the way the article layouts do. */

.check-v[hidden],
.course-v[hidden],
.story-v[hidden] {
  display: none !important;
}

/* The dev panel grows from one pill into a stack of rows, one per
   section, each with its own label and three picks. */
.blog-panel {
  flex-direction: column;
  align-items: stretch;
  gap: 0.125rem;
  padding: 0.5rem;
  border-radius: 1.25rem;
}

.blog-panel-row {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding-left: 0.5rem;
}

.blog-panel-label {
  flex: none;
  width: 5.75rem;
  margin-right: 0.25rem;
}

/* The panel's own header: a title and the minimize toggle. Collapsed, the
   whole thing shrinks to the round toggle so it stops covering the page. */
.blog-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 0.125rem 0.375rem 0.5rem;
}

.blog-panel-title {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #cfc9e6;
}

.blog-panel-toggle {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: 1px solid rgba(201, 184, 255, 0.2);
  border-radius: 999px;
  background: rgba(201, 184, 255, 0.08);
  color: #cfc9e6;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}

.blog-panel-toggle:hover {
  background: rgba(201, 184, 255, 0.2);
  color: #ffffff;
}

.blog-panel-toggle svg {
  width: 0.8125rem;
  height: 0.8125rem;
  transition: transform 0.3s var(--ease-out);
}

.blog-panel.is-min {
  padding: 0.3125rem;
  border-radius: 999px;
}

.blog-panel.is-min .blog-panel-row,
.blog-panel.is-min .blog-panel-title {
  display: none;
}

.blog-panel.is-min .blog-panel-head {
  padding: 0;
}

.blog-panel.is-min .blog-panel-toggle {
  width: 1.875rem;
  height: 1.875rem;
}

/* Collapsed, the chevron points back up: click to bring the panel out. */
.blog-panel.is-min .blog-panel-toggle svg {
  transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
  .blog-panel-toggle svg {
    transition: none;
  }
}

/* ----- Build Check B: the sheet.
   A dark rounded sheet on the paper, the same object the course card is
   but in ink. The dark lockup, the headline and the button hold the left;
   the stack art stands at the right, larger than its cell, and runs off
   the sheet's edge. The qualifiers close the sheet as three ruled columns
   with mono ordinals. The section's own grid stays off; the sheet draws
   its own in lavender. */

.check[data-variant-on="b"] {
  background: #ffffff;
}

.check[data-variant-on="b"]::before {
  display: none;
}

.check-sheet {
  position: relative;
  display: grid;
  gap: 3rem;
  max-width: 78rem;
  margin: 0 auto;
  padding: 3.5rem 2rem 3rem;
  border: 1px solid rgba(201, 184, 255, 0.14);
  border-radius: 2rem;
  overflow: hidden;
  background:
    radial-gradient(40rem 30rem at 78% 40%, rgba(143, 101, 240, 0.28), transparent 65%),
    radial-gradient(24rem 20rem at 12% 90%, rgba(143, 101, 240, 0.12), transparent 65%),
    #14102a;
  color: #f3f1f8;
  box-shadow:
    0 1px 0 rgba(143, 101, 240, 0.3),
    0 40px 80px -30px rgba(23, 16, 41, 0.45);
}

/* No drafting grid on the sheet either. */
.check-sheet::after {
  content: none;
}

@media (min-width: 1024px) {
  .check-sheet {
    grid-template-columns: 6fr 6fr;
    gap: 3rem 4rem;
    padding: 5rem 5rem 4rem;
  }
}

.check-sheet-head {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.75rem;
}

.check-sheet-logo {
  display: block;
  width: 100%;
  max-width: 17rem;
  height: auto;
}

.check-sheet-title {
  max-width: 15ch;
  font-size: clamp(2.25rem, 2.6vw + 1.2rem, 3.5rem);
  color: #f3f1f8;
}

.check-sheet-art {
  display: block;
  width: 100%;
  max-width: 22rem;
  height: auto;
  margin: 0 auto;
  filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.45));
}

/* From the laptop width the art leaves the flow: it stands in the right
   cell at a fifth over the cell's height, centred on the headline, and
   its right quarter runs off under the sheet's edge. */
.check-sheet-artwrap {
  position: relative;
}

@media (min-width: 1024px) {
  .check-sheet-artwrap {
    min-height: 16rem;
  }

  .check-sheet-art {
    position: absolute;
    top: 50%;
    right: -12%;
    width: auto;
    max-width: none;
    height: 108%;
    transform: translateY(-50%);
  }
}

.check-sheet-foot {
  position: relative;
  z-index: 1;
  grid-column: 1 / -1;
  margin-top: 0.5rem;
  padding: 2rem 1.75rem 2.25rem;
  border-radius: 1.25rem;
  background: rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

@media (min-width: 1024px) {
  .check-sheet-foot {
    padding: 2.5rem 2.5rem 2.75rem;
  }
}

/* The label in Rino's hand, tilted a touch and sat in the plate's top
   corner as a margin note. */
.check-sheet-label {
  position: absolute;
  top: -1.1rem;
  left: 1.5rem;
  margin: 0;
  transform: rotate(var(--pad-tilt));
  font-family: var(--font-hand);
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1;
  color: var(--lime);
}

@media (min-width: 1024px) {
  .check-sheet-label {
    top: -1.25rem;
    left: 2.25rem;
    font-size: 1.75rem;
  }
}

.check-sheet-foot .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.check-sheet-for {
  display: grid;
  gap: 1.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 800px) {
  .check-sheet-for {
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem;
  }
}

.check-sheet-for li {
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.5;
  color: rgba(243, 241, 248, 0.86);
  text-wrap: pretty;
}

.check-sheet-n {
  display: block;
  margin-bottom: 0.625rem;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--lime);
}

/* ----- Course B: the split.
   Two tones edge to edge, no card and no section padding: the art on ink
   at the left, lit by a purple bloom and the lavender drafting grid, the
   copy and the ask on paper at the right. Below the laptop width the ink
   panel becomes a band across the top. */

.course[data-variant-on="b"] {
  padding: 0;
}

.course-split {
  display: grid;
}

@media (min-width: 1024px) {
  .course-split {
    grid-template-columns: 5fr 7fr;
  }
}

.course-split-art {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 3.5rem 1.5rem 4.5rem;
  background:
    radial-gradient(60% 50% at 50% 62%, rgba(143, 101, 240, 0.32), transparent 70%),
    #100d1a;
}

/* No drafting grid behind the art either. */
.course-split-art::before {
  content: none;
}

.course-split-art img {
  position: relative;
  display: block;
  width: 100%;
  max-width: 17rem;
  height: auto;
  filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.5));
}

@media (min-width: 1024px) {
  .course-split-art {
    padding: 7rem 3rem 9rem;
  }

  .course-split-art img {
    max-width: 27rem;
  }
}

.course-split-stamp {
  position: absolute;
  left: 1.5rem;
  bottom: 1.5rem;
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 500;
  color: #c9b8ff;
}

.course-split-stamp i {
  margin: 0 0.5rem;
  font-style: normal;
  color: rgba(201, 184, 255, 0.4);
}

@media (min-width: 1024px) {
  .course-split-stamp {
    left: 3rem;
    bottom: 2.5rem;
  }
}

.course-split-copy {
  padding: 7rem 1.5rem 8rem;
  background: #ffffff;
}

.course-split-copy > * {
  max-width: 38rem;
}

@media (min-width: 1024px) {
  .course-split-copy {
    padding: 7rem clamp(2.5rem, 6vw, 6rem) 9rem clamp(3rem, 6vw, 6rem);
  }
}

.course-split-copy h2 {
  max-width: 13ch;
  font-size: clamp(2.25rem, 2.6vw + 1.2rem, 3.5rem);
}

.course-split-promise {
  margin: 1.5rem 0 0.875rem;
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: #5f2ec7;
}

.course-split-for {
  max-width: 36rem;
  margin-top: 0;
}

.course-split-copy .course-join {
  margin-top: 2rem;
}

/* ----- Founder B: the masthead.
   The desk photo as a wide band across the top, a byline row under it
   with a rule, then the title against one measure of the story, the
   first paragraph set larger as a lede. The credentials close the
   section as one ruled row of figures set in the display face, not four
   boxes. */

/* The halo: hidden on small screens; from the laptop width it sits
   behind the photo, six rem past its left, top and right edges and flush
   with its foot. The rail down the screen edge stays off in this layout
   since the halo takes its place. */
.story[data-variant-on="b"] .story-rail {
  display: none;
}

.story-mast-head {
  position: relative;
}

.story-mast-field {
  display: none;
}

@media (min-width: 1024px) {
  .story-mast-field {
    display: block;
    position: absolute;
    left: -6rem;
    right: -6rem;
    top: -6rem;
    bottom: 0;
    overflow: hidden;
    pointer-events: auto;
  }

  .story-mast-field-shader {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
}

.story-mast-photo {
  position: relative;
  z-index: 1;
  overflow: hidden;
  margin: 0;
  aspect-ratio: 4 / 3;
  border: 1px solid rgba(23, 16, 41, 0.1);
  border-radius: 1.5rem;
  background: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    0 40px 80px -30px rgba(95, 46, 199, 0.25),
    0 24px 60px -20px rgba(23, 16, 41, 0.25);
}

.story-mast-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 38%;
}

@media (min-width: 800px) {
  .story-mast-photo {
    aspect-ratio: 21 / 9;
  }
}

.story-mast-byline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.75rem;
  margin: 1.5rem 0 0;
  font-size: 0.9375rem;
  font-weight: 500;
  color: rgba(23, 16, 41, 0.64);
}

.story-mast-name {
  font-weight: 600;
  color: #171029;
}

.story-mast-role {
  color: #5f2ec7;
}

@media (min-width: 800px) {
  .story-mast-since {
    margin-left: auto;
  }
}

.story-mast-grid {
  display: grid;
  gap: 2rem;
  margin-top: 3.5rem;
}

@media (min-width: 1024px) {
  .story-mast-grid {
    grid-template-columns: 4fr 8fr;
    gap: 5rem;
  }
}

.story-mast-title {
  max-width: 10ch;
  margin-bottom: 0;
}

.story-mast-lede {
  margin: 0 0 1.5rem;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: #171029;
  text-wrap: pretty;
}

.story-mast-cols .story-body {
  max-width: none;
  font-size: 1.0625rem;
  text-wrap: pretty;
}

.story-mast-cols {
  max-width: 40rem;
}

/* The figures: four rows in the text column, under the copy. The figure
   sits at the left edge and its label at the right, on one baseline, with a
   light grey-purple rule between each row. All four figures share one size. */
.story-figures {
  display: flex;
  flex-direction: column;
  margin: 2.75rem 0 0;
}

.story-figures > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.125rem 0;
}

.story-figures > div + div {
  border-top: 1px solid var(--line-lilac);
}

.story-figures dt {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: #171029;
}

.story-figures dd {
  margin: 0;
  text-align: right;
  font-size: 1rem;
  font-weight: 500;
  color: rgba(23, 16, 41, 0.64);
}

/* ---------- Waitlist page ----------
   The hero carries the join field on the dark ground. The paper tail
   turned the pill white for the course card, so here the typed text goes
   back to ink and the field centres under the copy. The letter section
   reuses the founder story's paper and grid, and as the last sheet it
   takes the final ask's rounded lift off the footer. */

.hero-waitlist .join {
  width: 100%;
  max-width: 32rem;
  margin-top: 2.5rem;
  text-align: left;
}

.hero-waitlist .course-join-input {
  color: #171029;
}

.hero-waitlist .course-join-input::placeholder {
  color: rgba(23, 16, 41, 0.5);
}

.hero-waitlist .course-join-row {
  border-color: rgba(255, 255, 255, 0.35);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 12px 40px -12px rgba(143, 101, 240, 0.55);
}

/* On the dark ground the focus ring is lime itself, the pass colour. */
.hero-waitlist .course-join-row:focus-within {
  border-color: var(--lime);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 0 0 4px rgba(200, 241, 54, 0.35),
    0 12px 40px -12px rgba(143, 101, 240, 0.55);
}

.hero-waitlist .course-join-note {
  text-align: center;
  margin-left: 0;
}

@media (max-width: 480px) {
  .hero-waitlist .course-join-row,
  .hero-waitlist .course-join-row:focus-within {
    box-shadow: none;
  }
  .hero-waitlist .course-join-input {
    color: var(--ink);
    background: rgba(23, 20, 31, 0.7);
    border-color: rgba(201, 184, 255, 0.18);
  }
  .hero-waitlist .course-join-input::placeholder {
    color: var(--ink-muted);
  }
}

/* The waitlist nav is the wordmark alone, centred in the island. */
.nav-plain .nav-inner {
  grid-template-columns: 1fr;
  justify-items: center;
  width: max-content;
  max-width: 100%;
  padding: 0 1.5rem;
}

.nav-plain .wordmark {
  grid-column: 1;
  justify-self: center;
}

/* The waitlist nav does not follow the page: it sits at the top and
   scrolls away with the hero, so the script's scroll classes have nothing
   to move. */
.nav-plain {
  position: absolute;
}

.nav-plain.nav-hidden {
  transform: none;
}

/* On phones the hero carries the copy and the field alone. */
@media (max-width: 640px) {
  .hero-waitlist .field {
    display: none;
  }
}

/* The letter's field sits under the sign off with a little more air. */
.letter .join {
  margin-top: 2.75rem;
}

/* The portrait is upright, so it crops to the face rather than the desk. */
.letter-portrait img {
  object-position: 50% 20%;
}

@media (min-width: 1024px) {
  .letter-portrait img {
    object-position: 50% 25%;
  }
}

/* Validation: the note turns to the lime under the pill's ring. */
.join-invalid .course-join-row {
  border-color: #e0525a;
}

.join-invalid .course-join-note {
  color: #e0525a;
}

/* The thank you replaces the form in place, same width, same left edge. */
.join-done {
  max-width: 32rem;
  margin-top: 2.5rem;
  padding: 1.5rem 1.75rem;
  border: 1px solid var(--line);
  border-radius: 1.25rem;
  background: var(--surface);
}

.hero-waitlist .join-done {
  width: 100%;
  text-align: left;
}

.letter .join-done {
  margin-top: 2.75rem;
  background: #fff;
  box-shadow: 0 8px 24px -12px rgba(95, 46, 199, 0.25);
}

.join-done-title {
  margin: 0 0 0.375rem;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.join-done-body {
  margin: 0;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink-muted);
}

/* The last sheet of paper lifts off the dark footer, as the final ask
   does on the home page. */
.sheet-end {
  border-bottom: 0;
  border-radius: 0 0 2rem 2rem;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(143, 101, 240, 0.35), 0 24px 60px -20px rgba(143, 101, 240, 0.45);
}

@media (max-width: 640px) {
  .sheet-end { border-radius: 0 0 1.25rem 1.25rem; }
}