/* ============================================================
   JAYYREDD — Brand Hub
   Dark editorial · serif authority · Redd red accent
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
  --ink: #0b0b0d;
  --ink-2: #101014;
  --ink-3: #17171e;
  --paper: #f2efe7;
  --paper-dim: rgba(242, 239, 231, 0.62);
  /* 0.50 is the lowest alpha that clears WCAG AA 4.5:1 on all three ink
     surfaces (4.79 / 4.81 / 4.73). At the previous 0.38 this token measured
     3.23:1 while carrying form labels, stat labels and the ledger's link
     column — real text, below the floor. Kept as low as the maths allows so
     the three-step paper hierarchy (1.0 / 0.62 / 0.50) still reads. */
  --paper-faint: rgba(242, 239, 231, 0.50);
  --red: #e5484d;
  --red-deep: #b3282d;
  --hairline: rgba(242, 239, 231, 0.14);
  --hairline-soft: rgba(242, 239, 231, 0.08);

  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono: "Space Mono", "Courier New", monospace;

  --nav-h: 76px;
  --ease: cubic-bezier(0.22, 0.61, 0.21, 1);
  --container: 1240px;
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 1.0625rem;
  /* Light text on a dark surface optically thins and tightens. Compensating on
     two axes — a little more leading, a hair of tracking — is what keeps this
     readable at 17px without reaching for a heavier weight. .serif and .mono
     set their own tracking, so this only reaches the sans body copy. */
  line-height: 1.7;
  letter-spacing: 0.008em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* Avoids single-word last lines in body copy. Ignored where inapplicable. */
  text-wrap: pretty;
}

/* Headings balance instead: it evens the line lengths and kills orphans like
   the lone "door." that fell off "Three rooms. Pick your door." */
.hero-title,
.section-head h2,
.faq-q { text-wrap: balance; }

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

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

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

.serif {
  font-family: var(--serif); font-weight: 400; letter-spacing: -0.02em;
  /* Fraunces carries an optical-size axis (9–144). Letting it track the
     rendered size is why the 11px ledger names and the 100px display headline
     can share one family without either looking wrong. */
  font-optical-sizing: auto;
}
.mono {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

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

.skip-link {
  position: fixed; top: -100px; left: 1rem; z-index: 1000;
  padding: 0.75rem 1.25rem; background: var(--red); color: var(--ink);
  font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.12em;
  transition: top 0.25s var(--ease);
}
.skip-link:focus { top: 1rem; }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--ink); }
::-webkit-scrollbar-thumb { background: #2a2a33; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: var(--red-deep); }

.container {
  width: min(var(--container), 92vw);
  margin-inline: auto;
}

section { scroll-margin-top: calc(var(--nav-h) + 12px); }

/* ---------- Film grain ---------- */
.grain {
  position: fixed; inset: 0; z-index: 900; pointer-events: none;
  opacity: 0.055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Custom cursor ---------- */
.cursor-dot, .cursor-ring {
  position: fixed; top: 0; left: 0; z-index: 950;
  pointer-events: none; border-radius: 50%;
  opacity: 0;
}
.cursor-dot { width: 7px; height: 7px; background: var(--red); }
.cursor-ring {
  width: 34px; height: 34px;
  border: 1px solid rgba(242, 239, 231, 0.55);
  transition: width 0.25s var(--ease), height 0.25s var(--ease),
              border-color 0.25s var(--ease), background-color 0.25s var(--ease);
}
.cursor-ring.is-active {
  width: 52px; height: 52px;
  border-color: var(--red);
  background: rgba(229, 72, 77, 0.08);
}
body.has-cursor, body.has-cursor a, body.has-cursor button { cursor: none; }
body.has-cursor :is(input, textarea, select) { cursor: text; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.95rem 1.7rem;
  font-family: var(--mono); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  border-radius: 2px;
  transition: transform 0.3s var(--ease), background-color 0.3s, color 0.3s,
              border-color 0.3s, box-shadow 0.3s;
  will-change: transform;
}
.btn-solid {
  background: var(--red); color: var(--ink);
  box-shadow: 0 0 0 rgba(229, 72, 77, 0);
}
.btn-solid:hover {
  background: #f25a5f;
  box-shadow: 0 12px 34px rgba(229, 72, 77, 0.28);
}
.btn-ghost {
  border: 1px solid var(--hairline); color: var(--paper);
}
.btn-ghost:hover { border-color: var(--red); color: var(--red); }
.btn-wide { width: 100%; justify-content: center; }

/* ---------- Nav ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 800;
  transition: background-color 0.4s, border-color 0.4s, backdrop-filter 0.4s;
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled {
  background: rgba(11, 11, 13, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--hairline-soft);
}
.nav-inner {
  width: min(var(--container), 92vw);
  margin-inline: auto;
  height: var(--nav-h);
  display: flex; align-items: center; gap: 2rem;
}
.wordmark {
  display: flex; align-items: center; gap: 0.65rem;
  font-family: var(--serif); font-size: 1.3rem; font-weight: 600;
  letter-spacing: 0.02em;
}
.wordmark-mark {
  width: 30px; height: 30px; flex: none;
  border-radius: 6px;
}
.dot { color: var(--red); }

.nav-links {
  display: flex; gap: 2.2rem; margin-left: auto;
}
.nav-links a {
  position: relative;
  font-family: var(--mono); font-size: 0.72rem;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--paper-dim);
  padding: 0.4rem 0;
  transition: color 0.3s;
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: var(--red);
  transform: scaleX(0); transform-origin: right;
  transition: transform 0.35s var(--ease);
}
.nav-links a:hover { color: var(--paper); }
.nav-links a:hover::after { transform: scaleX(1); transform-origin: left; }

.nav-cta { padding: 0.7rem 1.2rem; }

.scroll-progress {
  height: 2px; background: transparent;
}
.scroll-progress::after {
  content: ""; display: block; height: 100%;
  background: var(--red);
  transform: scaleX(var(--scroll, 0));
  transform-origin: left;
}

/* Hamburger */
.menu-btn {
  display: none;
  flex-direction: column; gap: 6px;
  padding: 0.6rem; margin-left: auto;
}
.menu-btn-bar {
  display: block; width: 26px; height: 2px;
  background: var(--paper);
  transition: transform 0.35s var(--ease), background-color 0.3s;
}
.menu-btn[aria-expanded="true"] .menu-btn-bar:nth-child(1) {
  transform: translateY(4px) rotate(45deg); background: var(--red);
}
.menu-btn[aria-expanded="true"] .menu-btn-bar:nth-child(2) {
  transform: translateY(-4px) rotate(-45deg); background: var(--red);
}

/* Mobile menu overlay */
.menu-overlay {
  position: fixed; inset: 0; z-index: 790;
  background: rgba(11, 11, 13, 0.97);
  backdrop-filter: blur(10px);
  display: flex; flex-direction: column;
  justify-content: center; padding: 0 8vw;
  opacity: 0; transition: opacity 0.4s var(--ease);
}
.menu-overlay.is-open { opacity: 1; }
.menu-overlay[hidden] { display: none; }
.menu-overlay-nav { display: flex; flex-direction: column; gap: 0.5rem; }
.menu-overlay-nav a {
  display: flex; align-items: baseline; gap: 1.2rem;
  font-family: var(--serif); font-size: clamp(2.2rem, 8vw, 3.6rem);
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--hairline-soft);
  transform: translateY(24px); opacity: 0;
  transition: transform 0.55s var(--ease), opacity 0.55s var(--ease), color 0.3s;
}
.menu-overlay.is-open .menu-overlay-nav a { transform: none; opacity: 1; }
.menu-overlay.is-open .menu-overlay-nav a:nth-child(1) { transition-delay: 0.08s; }
.menu-overlay.is-open .menu-overlay-nav a:nth-child(2) { transition-delay: 0.16s; }
.menu-overlay.is-open .menu-overlay-nav a:nth-child(3) { transition-delay: 0.24s; }
.menu-overlay.is-open .menu-overlay-nav a:nth-child(4) { transition-delay: 0.32s; }
.menu-overlay-nav a:hover { color: var(--red); }
.menu-idx { color: var(--red); font-size: 0.8rem; }
.menu-overlay-foot {
  margin-top: 3rem; display: flex; flex-direction: column; gap: 0.4rem;
  color: var(--paper-faint);
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: center;
  padding: calc(var(--nav-h) + 2rem) 0 6rem;
  overflow: hidden;
}
.hero-media {
  position: absolute; left: 0; right: 0; top: -10%; height: 120%;
  z-index: -1;
  will-change: transform;
}
.hero-media img,
.hero-media video {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 62% center;
  filter: saturate(0.9) contrast(1.06) brightness(0.78);
}
.hero-media video { transition: opacity 0.9s ease; }
.hero-media video.is-hidden { opacity: 0; }

/* Desktop: anchor the subject to the right two-thirds so the copy
   never covers him; feather the video's left edge into the ink. */
@media (min-width: 861px) {
  .hero-media video {
    position: absolute; top: 0; right: 0;
    width: 72%;
    object-position: center 20%;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 16%);
    mask-image: linear-gradient(to right, transparent 0, #000 16%);
  }
}
.hero-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(to right, var(--ink) 4%, rgba(11, 11, 13, 0.88) 34%, rgba(11, 11, 13, 0.45) 60%, rgba(11, 11, 13, 0.15) 100%),
    linear-gradient(to top, rgba(11, 11, 13, 0.92) 0%, transparent 32%),
    linear-gradient(to bottom, rgba(11, 11, 13, 0.7) 0%, transparent 20%);
}

.hero-content {
  width: min(var(--container), 92vw);
  margin-inline: auto;
}

.eyebrow {
  display: flex; align-items: center; gap: 0.9rem;
  color: var(--paper-dim);
  margin-bottom: 1.8rem;
}
.eyebrow-dot {
  flex: none;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 14px rgba(229, 72, 77, 0.85);
}
.eyebrow-line { flex: none; width: 44px; height: 1px; background: var(--hairline); }

/* The eyebrow now lives inside the <h1> so the name is part of the page's
   primary heading. Reset the inherited display-type scale and line-height. */
.hero-title .eyebrow {
  font-weight: 400;
  line-height: 1.6;
}

.hero-title {
  font-size: clamp(2.6rem, 7.4vw, 6.4rem);
  line-height: 1.02;
  font-weight: 400;
  /* Display sizes need tighter tracking than text sizes; -0.02em looks loose
     once the face is this large. Stays inside the -0.04em floor. */
  letter-spacing: -0.03em;
}
.hero-title .line { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.hero-title .line > span {
  display: block;
  transform: translateY(112%);
  animation: line-rise 1s var(--ease) forwards;
  animation-delay: var(--d, 0s);
}
.is-italic { font-style: italic; font-weight: 300; }
.is-red { color: var(--red); font-style: italic; font-weight: 300; }

@keyframes line-rise { to { transform: none; } }

.hero-sub {
  margin-top: 1.8rem;
  max-width: 34rem;
  color: var(--paper-dim);
  font-size: 1.05rem;
  opacity: 0;
  animation: fade-up 0.9s var(--ease) 0.75s forwards;
}
.hero-ctas {
  margin-top: 2.4rem; display: flex; flex-wrap: wrap; gap: 1rem;
  opacity: 0;
  animation: fade-up 0.9s var(--ease) 0.95s forwards;
}
.btn-ic { color: inherit; transition: transform 0.35s var(--ease); }
.btn:hover .btn-ic { transform: translateX(4px); }
@keyframes fade-up {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}

/* Hero stat row — big honest numbers, hairline dividers */
.hero-stats {
  margin-top: clamp(2.6rem, 6vh, 4rem);
  padding-top: 1.7rem;
  border-top: 1px solid var(--hairline);
  display: flex; flex-wrap: wrap;
  max-width: 42rem;
  opacity: 0;
  animation: fade-up 0.9s var(--ease) 1.15s forwards;
}
.stat {
  padding-right: 2.4rem; margin-right: 2.4rem;
  border-right: 1px solid var(--hairline);
}
.stat:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.stat-num {
  display: block;
  font-size: clamp(1.7rem, 2.6vw, 2.2rem);
  line-height: 1.1;
  color: var(--red);
}
.stat-label {
  display: block; margin-top: 0.35rem;
  font-size: 0.82rem; color: var(--paper-faint);
}

/* Centered scroll cue */
.scroll-cue {
  position: absolute; left: 50%; bottom: 1.3rem;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 0.6rem;
  color: var(--paper-faint);
  opacity: 0;
  animation: fade-up 1s var(--ease) 1.4s forwards;
}
.scroll-line-v {
  width: 1px; height: 44px;
  background: var(--hairline);
  position: relative; overflow: hidden;
}
.scroll-line-v::after {
  content: ""; position: absolute; inset: 0;
  background: var(--red);
  animation: scroll-pulse-v 2.2s var(--ease) infinite;
}
@keyframes scroll-pulse-v {
  0% { transform: translateY(-100%); }
  55%, 100% { transform: translateY(100%); }
}

/* ---------- Marquee ---------- */
.marquee {
  overflow: hidden;
  border-block: 1px solid var(--hairline);
  background: var(--ink-2);
}
.marquee-track {
  display: flex; width: max-content;
  padding: 0.95rem 0;
  animation: marquee 30s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track span {
  font-family: var(--serif); font-style: italic;
  font-size: 1.02rem; letter-spacing: 0.02em;
  color: var(--paper-dim); white-space: nowrap;
  margin-right: 3rem;
}
.marquee-track i { font-style: normal; color: var(--red); margin-left: 3rem; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Sections shared ---------- */
.section { padding: clamp(5.5rem, 13vh, 9.5rem) 0; }
.section + .section { border-top: 1px solid var(--hairline-soft); }

.section-head { max-width: 46rem; margin-bottom: clamp(3rem, 7vh, 5rem); }
.section-idx { color: var(--paper-faint); margin-bottom: 1.4rem; }
.idx-red { color: var(--red); }
/* Inner pages lead with an h1 in the same slot the home page uses for h2s. */
.section-head :is(h1, h2) {
  font-size: clamp(2.3rem, 5.4vw, 4.3rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-family: var(--serif); font-weight: 400;
  font-optical-sizing: auto;
  text-wrap: balance;
}
.section-head :is(h1, h2) em { font-style: italic; font-weight: 300; color: var(--red); }

/* First section of an inner page has no hero above it, so it clears the fixed
   nav itself rather than sliding under it. */
.section-page-top { padding-top: calc(var(--nav-h) + clamp(3rem, 9vh, 6.5rem)); }
/* Short enough to balance rather than merely avoid widows — otherwise these
   one-and-a-bit-line intros strand two words on their own row. */
.section-sub { margin-top: 1.2rem; color: var(--paper-dim); max-width: 36rem; text-wrap: balance; }

/* ---------- Thread ---------- */
.thread-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}
.thread-story .lede {
  font-size: clamp(1.5rem, 2.6vw, 2.05rem);
  line-height: 1.35;
  margin-bottom: 1.8rem;
}
.thread-story p { color: var(--paper-dim); margin-bottom: 1.2rem; }
/* The column runs ~700px, which put body prose at 86 characters a line. The
   lede keeps the full width — it is display type and reads in one glance —
   so the narrower body underneath also sharpens the hierarchy between them. */
.thread-story p:not(.lede) { max-width: 36rem; }
.thread-story strong { color: var(--paper); font-weight: 600; }

/* ---------- Editorial bands ----------
   Full-bleed stills that break up the type-only stretch between the hero and
   the footer. The gutter is computed rather than using an inner container so
   the text can left-align to the same optical line as every section above it
   while still carrying its own reading measure. */
.band {
  position: relative;
  isolation: isolate;
  margin: 0;
  min-height: clamp(380px, 66vh, 660px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 1.15rem;
  padding: clamp(2.5rem, 7vh, 5rem) 0 clamp(2.2rem, 6vh, 4rem);
  padding-inline: max(4vw, calc((100% - var(--container)) / 2));
  overflow: hidden;
  border-block: 1px solid var(--hairline-soft);
}

.band-media { position: absolute; inset: 0; z-index: -2; margin: 0; display: block; }
.band-media img {
  width: 100%; height: 100%;
  object-fit: cover;
}
/* Graded separately rather than sharing one filter: the tie frame is a low-key
   detail shot that should stay in shadow, while the St. Louis frame is the only
   daylight on the page and needs its golden hour back. */
.band-craft .band-media img {
  object-position: 50% 44%;
  filter: saturate(0.8) contrast(1.08) brightness(0.72);
}
.band-stl .band-media img {
  object-position: 50% 36%;
  filter: saturate(0.96) contrast(1.04) brightness(0.82);
}

/* Two axes: darkest at the bottom where the type sits, plus a left-side wash
   so the first characters never land on a bright patch of the photograph. */
/* The caption text is semi-transparent, so it composites with whatever is
   behind it — over a bright patch of photograph it washes out rather than
   darkening. The bottom stop therefore stays near-opaque through the whole
   caption zone instead of easing off immediately. */
.band-scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, rgba(11, 11, 13, 0.96) 0%, rgba(11, 11, 13, 0.93) 22%,
                    rgba(11, 11, 13, 0.66) 46%, rgba(11, 11, 13, 0.22) 78%,
                    rgba(11, 11, 13, 0.42) 100%),
    linear-gradient(to right, rgba(11, 11, 13, 0.72) 0%, rgba(11, 11, 13, 0.12) 58%, transparent 100%);
}

.band-quote {
  max-width: 26ch;
  font-size: clamp(1.55rem, 3.4vw, 2.95rem);
  font-style: italic; font-weight: 300;
  line-height: 1.16;
  letter-spacing: -0.03em;
  color: var(--paper);
  text-wrap: balance;
  text-indent: -0.42em;
}

.band-attr { display: flex; align-items: center; color: var(--paper-faint); letter-spacing: 0.2em; }
.band-attr::before {
  content: ""; flex: none;
  width: 30px; height: 1px; margin-right: 0.85rem;
  background: var(--red);
}

.band-caption { display: flex; flex-direction: column; gap: 0.6rem; }
.band-caption-lead {
  font-family: var(--serif); font-optical-sizing: auto;
  font-style: italic; font-weight: 300;
  font-size: clamp(1.5rem, 3.1vw, 2.5rem);
  line-height: 1.15; letter-spacing: -0.03em;
  text-transform: none;
  color: var(--paper);
}
.band-caption-meta { color: var(--paper-faint); letter-spacing: 0.2em; }

.thread-pillars {
  display: flex; flex-direction: column;
  border-top: 1px solid var(--hairline);
}
.pillar {
  padding: 1.8rem 0.25rem;
  border-bottom: 1px solid var(--hairline);
}
/* The at-a-glance strip below supplies the closing rule, so the last pillar
   drops its own. Otherwise the two hairlines read as an empty row, which is
   especially obvious once the columns stack on mobile. */
.thread-pillars .pillar:last-child { border-bottom: 0; }
.pillar-label { margin-bottom: 0.8rem; color: var(--paper); }
.pillar p { color: var(--paper-dim); font-size: 0.98rem; }

/* ---------- Ventures ---------- */
.section-ventures { background: var(--ink-2); }
.venture-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.4rem;
}
.venture-card {
  position: relative;
  display: flex; flex-direction: column;
  min-height: 460px;
  padding: 2rem 1.8rem;
  background: linear-gradient(160deg, var(--ink-3), var(--ink) 70%);
  border: 1px solid var(--hairline);
  border-radius: 6px;
  overflow: hidden;
  transform-style: preserve-3d;
  transition: border-color 0.4s, box-shadow 0.4s;
  will-change: transform;
}
.venture-card:hover, .venture-card:focus-visible {
  border-color: rgba(229, 72, 77, 0.65);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(229, 72, 77, 0.18);
}
.vc-glow {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(420px circle at var(--gx, 50%) var(--gy, 0%),
              rgba(229, 72, 77, 0.13), transparent 65%);
  opacity: 0; transition: opacity 0.4s;
}
.venture-card:hover .vc-glow { opacity: 1; }

.vc-top {
  display: flex; justify-content: space-between;
  color: var(--paper-faint); margin-bottom: 2.6rem;
}
.vc-index { color: var(--red); }
.venture-card h3 {
  font-size: clamp(1.5rem, 2.2vw, 1.9rem);
  line-height: 1.15;
  margin-bottom: 1.1rem;
}
.venture-card h3 em {
  display: block;
  font-size: 0.72em; font-style: italic; font-weight: 300;
  color: var(--paper-dim); margin-top: 0.35rem;
}
.venture-card > p { color: var(--paper-dim); font-size: 0.98rem; }
.vc-tags {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  margin-top: auto; padding-top: 1.8rem;
}
.vc-tags li {
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  font-size: 0.62rem;
  color: var(--paper-dim);
  letter-spacing: 0.14em;
}
.vc-cta {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 1.6rem; padding-top: 1.2rem;
  border-top: 1px solid var(--hairline-soft);
  color: var(--paper);
}
.vc-arrow { color: var(--red); transition: transform 0.35s var(--ease); }
.venture-card:hover .vc-arrow { transform: translateX(8px); }

/* Staggered editorial rhythm on desktop.
   margin-top (not transform) so it survives reveal + tilt transforms. */
@media (min-width: 1024px) {
  .venture-grid { align-items: start; padding-bottom: 4.6rem; }
  .venture-card:nth-child(2) { margin-top: 2.2rem; }
  .venture-card:nth-child(3) { margin-top: 4.4rem; }
}

/* ---------- Proof / ledger ---------- */
.ledger {
  border-top: 1px solid var(--hairline);
}
.ledger-row {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 2.2fr) minmax(0, 3fr) minmax(0, 2fr);
  gap: 1.5rem; align-items: baseline;
  padding: 1.7rem 0.5rem;
  border-bottom: 1px solid var(--hairline);
  transition: background-color 0.35s, padding-left 0.35s var(--ease);
}
a.ledger-row:hover {
  background: rgba(229, 72, 77, 0.05);
  padding-left: 1.1rem;
}
.lr-index { color: var(--red); }
.lr-name { font-size: 1.35rem; }
.lr-desc { color: var(--paper-dim); font-size: 0.95rem; }
.lr-link { color: var(--paper-faint); text-align: right; transition: color 0.3s; }
a.ledger-row:hover .lr-link { color: var(--red); }

/* Row 03 (Redd Liners) is a <div>, not a link, but sat visually identical to
   the three anchor rows — including link-looking text in the last cell. Anchor
   rows now read brighter in that cell, and the static row stops claiming a
   pointer it has no destination for. */
a.ledger-row .lr-link { color: var(--paper-dim); }
.ledger-row:not(a) { cursor: default; }

.proof-note { margin-top: 2.4rem; color: var(--paper-faint); max-width: 44rem; line-height: 1.9; }

/* ---------- At a glance ----------
   A compact definition list of the core facts. Reads fast for humans and
   extracts cleanly for search and answer engines. */
.at-glance {
  margin-top: clamp(3rem, 6vh, 4.5rem);
  padding-top: 2rem;
  border-top: 1px solid var(--hairline);
}
.at-glance-label { color: var(--red); margin-bottom: 1.7rem; }
.at-glance dl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1.9rem 2.4rem;
}
.at-glance dt {
  font-family: var(--mono); font-size: 0.62rem;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--paper-faint);
}
.at-glance dd { margin-top: 0.5rem; color: var(--paper-dim); font-size: 0.95rem; line-height: 1.55; }
.at-glance dd strong { color: var(--paper); font-weight: 600; }

/* ---------- FAQ ---------- */
.faq-list { max-width: 58rem; border-top: 1px solid var(--hairline); }
.faq-item { border-bottom: 1px solid var(--hairline); }
.faq-item summary {
  display: flex; align-items: flex-start; gap: 1.4rem;
  padding: 1.5rem 0.4rem;
  cursor: pointer; list-style: none;
  transition: color 0.3s, padding-left 0.35s var(--ease);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--red); padding-left: 1rem; }
.faq-q {
  flex: 1;
  font-size: clamp(1.15rem, 2vw, 1.42rem);
  font-weight: 400; line-height: 1.3;
}
.faq-sign {
  flex: none;
  color: var(--red); font-family: var(--mono); font-size: 1.25rem; font-weight: 400;
  line-height: 1.15;
  transition: transform 0.35s var(--ease);
}
.faq-item[open] .faq-sign { transform: rotate(45deg); }
/* 40rem lands the measure near 75ch; 46rem ran to roughly 90. */
.faq-a { padding: 0 0.4rem 1.8rem; max-width: 40rem; color: var(--paper-dim); }
.faq-a p + p { margin-top: 0.9rem; }
.faq-a strong { color: var(--paper); font-weight: 600; }
.faq-a a {
  color: var(--paper);
  border-bottom: 1px solid rgba(229, 72, 77, 0.7);
  transition: color 0.3s, border-color 0.3s;
}
.faq-a a:hover { color: var(--red); border-bottom-color: var(--red); }
.faq-note { margin-top: 2.6rem; color: var(--paper-faint); max-width: 44rem; line-height: 1.9; }

/* ---------- Inner-page building blocks ---------- */

/* Prose column on /about/ — same 65-75ch discipline as everywhere else. */
.about-body { max-width: 40rem; }
.about-body p { color: var(--paper-dim); margin-bottom: 1.35rem; }
.about-body .lede {
  color: var(--paper);
  font-size: clamp(1.5rem, 2.6vw, 2.05rem);
  line-height: 1.35;
  margin-bottom: 1.9rem;
  max-width: none;
}
.about-body strong { color: var(--paper); font-weight: 600; }

/* Inline text link that still reads as an action. */
.inline-cta {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--mono); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--paper);
  padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--red);
  transition: color 0.3s, gap 0.3s var(--ease);
}
.inline-cta:hover { color: var(--red); }
.thread-more { margin-top: 2rem; }

.cta-actions { display: flex; flex-wrap: wrap; gap: 1rem; }
.section-cta .section-head { margin-bottom: clamp(2rem, 4vh, 2.8rem); }

/* Pillars run as a row on the About page rather than a stacked sidebar. */
@media (min-width: 861px) {
  .thread-pillars-wide {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: clamp(2rem, 4vw, 3.5rem);
  }
  .thread-pillars-wide .pillar { border-bottom: 0; }
}

/* Four service cards, evenly weighted — no editorial stagger here. */
.venture-grid-flat { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.venture-grid-flat .venture-card { min-height: 0; }
/* The home grid sets align-items:start for its editorial stagger; these four
   are peers and should share a baseline, so let them stretch again. */
.venture-grid-flat { align-items: stretch; }
@media (min-width: 1100px) {
  .venture-grid-flat { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .venture-grid-flat { padding-bottom: 0; }
  .venture-grid-flat .venture-card:nth-child(2),
  .venture-grid-flat .venture-card:nth-child(3),
  .venture-grid-flat .venture-card:nth-child(4) { margin-top: 0; }
}

/* Direct routes out, under the topic picker on /contact/. */
.routing-alt { margin-top: 2.6rem; padding-top: 1.8rem; border-top: 1px solid var(--hairline); }
.routing-alt a {
  display: block; padding: 0.5rem 0;
  color: var(--paper-dim); font-size: 0.95rem;
  transition: color 0.3s, transform 0.3s var(--ease);
}
.routing-alt a:hover { color: var(--paper); transform: translateX(4px); }

/* ---------- Contact ---------- */
.section-contact { background: var(--ink-2); }
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}
.routing-label { color: var(--paper-faint); margin-bottom: 1.4rem; }
.routing-list { display: flex; flex-direction: column; border-top: 1px solid var(--hairline); }
.routing-item {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  width: 100%; text-align: left;
  padding: 1.15rem 0.4rem;
  border-bottom: 1px solid var(--hairline);
  font-family: var(--serif); font-size: 1.22rem;
  color: var(--paper);
  transition: color 0.3s, padding-left 0.35s var(--ease);
}
.routing-item .ri-arrow { color: var(--paper-faint); transition: transform 0.3s var(--ease), color 0.3s; }
.routing-item:hover, .routing-item.is-selected {
  color: var(--red);
  padding-left: 1rem;
}
.routing-item:hover .ri-arrow, .routing-item.is-selected .ri-arrow {
  transform: translateX(6px); color: var(--red);
}
.routing-hint { margin-top: 1.2rem; color: var(--paper-faint); font-size: 0.9rem; }

.contact-form {
  display: flex; flex-direction: column; gap: 1.5rem;
  padding: clamp(1.6rem, 3vw, 2.6rem);
  background: var(--ink);
  border: 1px solid var(--hairline);
  border-radius: 6px;
}
.field { display: flex; flex-direction: column; gap: 0.55rem; }
.field label { color: var(--paper-faint); }
.field :is(input, select, textarea) {
  background: transparent;
  border: 0; border-bottom: 1px solid var(--hairline);
  padding: 0.6rem 0.1rem;
  color: var(--paper);
  font-family: var(--sans); font-size: 1rem;
  transition: border-color 0.3s;
  border-radius: 0;
}
.field select { appearance: none; -webkit-appearance: none; cursor: pointer; }
.field select:invalid { color: var(--paper-faint); }
.field select option { background: var(--ink-3); color: var(--paper); }
.field textarea { resize: vertical; min-height: 110px; }
.field :is(input, select, textarea):focus { outline: none; border-bottom-color: var(--red); }
/* Placeholders were left to the UA default, which renders near 3:1 on this
   ink. Pin them to the same token as the labels so they clear 4.5:1 too. */
.field :is(input, textarea)::placeholder { color: var(--paper-faint); opacity: 1; }
/* --red-deep measured 3.05:1 here — technically a pass for a border, but the
   invalid state needs to be unmistakable next to the neutral hairline. */
.field.is-invalid :is(input, select, textarea) { border-bottom-color: var(--red); }
.field-error { color: var(--red); font-size: 0.85rem; }

.form-status { margin-top: 0.4rem; min-height: 1.2em; color: var(--red); line-height: 1.7; }
.form-status.is-ok { color: var(--paper-dim); }

/* ---------- Footer ---------- */
.footer { border-top: 1px solid var(--hairline-soft); padding: 4.5rem 0 2.5rem; }
.footer-logo {
  height: clamp(120px, 18vw, 170px);
  width: auto;
  border-radius: 14px;
  margin-bottom: 3rem;
  user-select: none;
}
.footer-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid var(--hairline-soft);
}
.footer-label { color: var(--red); margin-bottom: 1.1rem; }
.footer-col a {
  display: block; padding: 0.3rem 0;
  color: var(--paper-dim); font-size: 0.98rem;
  transition: color 0.3s, transform 0.3s var(--ease);
}
.footer-col a:hover { color: var(--paper); transform: translateX(4px); }

.footer-bottom {
  display: flex; flex-wrap: wrap; gap: 1rem;
  justify-content: space-between; align-items: center;
  padding-top: 2rem;
  color: var(--paper-faint);
  font-size: 0.68rem;
}
.back-to-top { color: var(--paper-dim); transition: color 0.3s; }
.back-to-top:hover { color: var(--red); }

/* ---------- Depth ----------
   The sections on flat ink read as paper. A single soft brand-coloured light,
   anchored where each section index sits, gives them a top-left source without
   resorting to pattern overlays. */
.section-thread, .section-proof, .section-faq { position: relative; isolation: isolate; }
.section-thread::before,
.section-proof::before,
.section-faq::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(58% 52% at 10% 0%, rgba(229, 72, 77, 0.06), transparent 68%);
}

/* ---------- Nav: current section ---------- */
.nav-links a[aria-current] { color: var(--paper); }
.nav-links a[aria-current]::after { transform: scaleX(1); transform-origin: left; }

/* ---------- Hero footage picker ---------- */
.hero-clips {
  position: absolute; z-index: 2;
  right: max(4vw, calc((100% - var(--container)) / 2));
  bottom: 1.1rem;
  display: flex; gap: 0.4rem;
}
.hero-clip {
  display: flex; align-items: flex-end; justify-content: center;
  min-width: 2.6rem; min-height: 44px;      /* touch target, not the ink */
  padding: 0 0.2rem 0.55rem;
  font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.12em;
  color: var(--paper-faint);
  border-bottom: 1px solid var(--hairline);
  transition: color 0.3s, border-color 0.3s;
}
.hero-clip:hover { color: var(--paper); border-bottom-color: var(--paper-dim); }
.hero-clip[aria-pressed="true"] { color: var(--red); border-bottom-color: var(--red); }

/* ---------- Scroll-driven motion ----------
   Progressive enhancement: where scroll timelines are unsupported the elements
   simply sit in their finished state, so nothing depends on this. It is kept
   off the elements the JS reveal already owns, otherwise the two would stack
   and multiply each other's opacity. Only translate/scale/opacity animate. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .band-media img {
      scale: 1.16;
      animation: band-drift linear both;
      animation-timeline: view();
    }
    @keyframes band-drift {
      from { translate: 0 -5.5%; }
      to { translate: 0 5.5%; }
    }

    .band-quote, .band-caption {
      animation: band-rise cubic-bezier(0.16, 1, 0.3, 1) both;
      animation-timeline: view();
      animation-range: entry 14% entry 82%;
    }
    .band-attr {
      animation: band-rise cubic-bezier(0.16, 1, 0.3, 1) both;
      animation-timeline: view();
      animation-range: entry 26% entry 94%;
    }
    @keyframes band-rise {
      from { opacity: 0; translate: 0 1.9rem; }
      to { opacity: 1; translate: 0 0; }
    }

    /* Ledger rows enter sideways rather than up, so the page does not repeat
       one identical entrance everywhere. Driven by scroll instead of the JS
       reveal for two reasons: each row then staggers off its own position, and
       [data-reveal]'s transition would otherwise replace the row's own
       padding-left hover transition. */
    .ledger-row {
      animation: row-in cubic-bezier(0.16, 1, 0.3, 1) both;
      animation-timeline: view();
      animation-range: entry 4% entry 52%;
    }
    @keyframes row-in {
      from { opacity: 0; translate: -1.3rem 0; }
      to { opacity: 1; translate: 0 0; }
    }
  }
}

/* The marquee was an infinite decorative loop, which is exactly what the
   animation guidance says to avoid. Tying it to scroll position keeps the
   motion but hands the user the control of it. */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .marquee-track {
      animation-name: marquee;
      animation-duration: auto;
      animation-timing-function: linear;
      animation-iteration-count: 1;
      animation-fill-mode: both;
      animation-timeline: scroll(root block);
    }
  }
}

/* ---------- Scroll reveal ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.85s var(--ease), transform 0.85s var(--ease);
  transition-delay: var(--d, 0s);
}
[data-reveal].is-revealed { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1023px) {
  .venture-grid { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; }
  .venture-card { min-height: 0; }
  .thread-grid { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .nav-links, .nav-cta { display: none; }
  .menu-btn { display: flex; }
}

@media (max-width: 719px) {
  .hero { padding-bottom: 6.5rem; }
  /* The picker would collide with the scroll cue, and switching clips costs
     ~4 MB a tap on a phone. The playlist still advances on its own. */
  .hero-clips { display: none; }
  .band { min-height: clamp(330px, 56vh, 460px); }
  .band-quote { max-width: none; }
  .hero-scrim {
    background:
      linear-gradient(to top, rgba(11, 11, 13, 0.96) 14%, rgba(11, 11, 13, 0.78) 52%, rgba(11, 11, 13, 0.55) 100%);
  }
  .hero-media img { object-position: center 18%; }
  .stat { padding-right: 1.3rem; margin-right: 1.3rem; }
  .ledger-row {
    grid-template-columns: 2.4rem 1fr;
    row-gap: 0.3rem;
  }
  .lr-desc { grid-column: 2; }
  .lr-link { grid-column: 2; text-align: left; }
  .footer-grid { grid-template-columns: 1fr; gap: 2.4rem; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  /* Footer links sat at ~26px tall — under the 44px touch minimum. Widened
     on touch widths only, so desktop keeps its tighter density. */
  .footer-col a { padding: 0.6rem 0; }
  /* 0.85rem lands this at ~45px; the 0.68rem mono is short enough that 0.6rem
     only reached 37px. */
  .back-to-top { display: inline-block; padding: 0.85rem 0; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .hero-title .line > span { transform: none; animation: none; }
  .hero-sub, .hero-ctas, .hero-stats, .scroll-cue { opacity: 1; animation: none; }
  .marquee-track { animation: none; flex-wrap: wrap; width: 100%; }
  [data-reveal] { opacity: 1; transform: none; }
}