/* Two-theme content stylesheet. Theme selected via body[data-theme],
   toggled by _shared.js. Structure is theme-agnostic; palette, fonts,
   and border treatments differ per theme.

   - paper  : Fraunces serif + IBM Plex Mono on paper-cream, ink black.
              The "research artifact" register — matches the brain_vs_llm
              figure's aesthetic.
   - dark   : Space Grotesk + JetBrains Mono on near-black, neon-pink
              accent. Matches the Tachyon brand surface at tachyon-ai.eu.
 */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,400&family=IBM+Plex+Mono:wght@300;400;500;600&family=Space+Grotesk:wght@300;500;700&family=JetBrains+Mono:wght@400;600&display=swap');

/* -------- base layout (theme-agnostic) -------- */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  max-width: 780px;
  margin: 0 auto;
  padding: 2rem 1.5rem 4rem;
  line-height: 1.55;
  transition: background-color 0.2s ease, color 0.2s ease;
}

h1 { font-size: 2.1rem; line-height: 1.1; margin: 0 0 1rem; letter-spacing: -0.02em; }
h2 { font-size: 1.35rem; margin: 2.5rem 0 0.75rem; padding-top: 1.25rem; }
h3 { font-size: 1.05rem; margin: 1.25rem 0 0.5rem; }

p, ul, ol { margin: 0.75rem 0; }
ul, ol { padding-left: 1.25rem; }
li { margin: 0.25rem 0; }

table { border-collapse: collapse; margin: 1rem 0; font-size: 0.95rem; }
th, td { padding: 0.5rem 0.9rem; }

footer { margin-top: 3rem; padding-top: 1rem; font-size: 0.8rem; }

p.lede { font-size: 1.1rem; line-height: 1.55; margin: 1rem 0 2rem; }

figure.page-art {
  margin: 1.6rem 0 2.25rem;
}
.page-art img {
  display: block;
  width: 100%;
  aspect-ratio: 1672 / 941;
  height: auto;
  object-fit: cover;
  border: 1px solid var(--rule);
  border-radius: 8px;
}
.page-art figcaption {
  margin: 0.7rem 0 0;
  color: var(--muted);
  font-family: 'IBM Plex Mono', 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  line-height: 1.45;
}
body[data-theme="dark"] .page-art img {
  border-color: rgba(255, 255, 255, 0.12);
  filter: brightness(0.86) contrast(1.06) saturate(0.95);
}

/* -------- nav + theme toggle -------- */

nav.site-nav {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.82rem;
  padding-bottom: 0.6rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}
nav.site-nav a { text-decoration: none; }
nav.site-nav a:hover { text-decoration: underline; }
nav.site-nav a.brand { text-decoration: none; }
nav.site-nav a.brand:hover { text-decoration: none; opacity: 0.75; }
nav.site-nav .spacer { flex: 1; }

.theme-toggle {
  font-family: inherit;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.15s ease;
}

/* ============================================
   THEME: paper
   ============================================ */

body[data-theme="paper"] {
  --brain: #B8432C;
  --llm: #1F5567;
  --target: #C68D24;
  --rule: #C9BBA0;
  --muted: #6B5E49;
  --ink: #1C1812;
  --paper: #F2EBDD;
  background: #F2EBDD;
  background-image:
    radial-gradient(ellipse at top left, rgba(184, 67, 44, 0.04), transparent 60%),
    radial-gradient(ellipse at bottom right, rgba(31, 85, 103, 0.05), transparent 60%);
  color: #1C1812;
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: "SOFT" 50, "WONK" 0;
}

body[data-theme="paper"] h1,
body[data-theme="paper"] h2,
body[data-theme="paper"] h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: "SOFT" 30, "WONK" 0;
  font-weight: 500;
}
body[data-theme="paper"] h2 {
  border-top: 1px solid #C9BBA0;
}

body[data-theme="paper"] em { color: #B8432C; font-style: italic; }
body[data-theme="paper"] strong { font-weight: 600; }

body[data-theme="paper"] a {
  color: #1F5567;
  text-decoration: underline;
  text-decoration-color: rgba(31, 85, 103, 0.4);
  text-underline-offset: 2px;
}
body[data-theme="paper"] a:hover { text-decoration-color: #1F5567; }

body[data-theme="paper"] code,
body[data-theme="paper"] nav.site-nav,
body[data-theme="paper"] footer,
body[data-theme="paper"] .theme-toggle {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
}

body[data-theme="paper"] nav.site-nav {
  border-bottom: 1px solid #C9BBA0;
  color: #6B5E49;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.72rem;
}
body[data-theme="paper"] nav.site-nav a { color: #1C1812; }
body[data-theme="paper"] nav.site-nav a.brand { color: #1C1812; }

body[data-theme="paper"] p.lede { color: #1C1812; }

body[data-theme="paper"] table { border: 1px solid #C9BBA0; }
body[data-theme="paper"] table th,
body[data-theme="paper"] table td { border: 1px solid #C9BBA0; }
body[data-theme="paper"] table th {
  background: rgba(28, 24, 18, 0.04);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 500;
  color: #6B5E49;
}

body[data-theme="paper"] footer {
  border-top: 1px solid #C9BBA0;
  color: #6B5E49;
}

body[data-theme="paper"] .theme-toggle {
  background: transparent;
  border: 1px solid #C9BBA0;
  color: #6B5E49;
}
body[data-theme="paper"] .theme-toggle:hover {
  border-color: #1C1812;
  color: #1C1812;
}

/* ============================================
   THEME: dark
   ============================================ */

body[data-theme="dark"] {
  --brain: #E8724F;
  --llm: #5FB8D0;
  --target: #ff3d7f;
  --rule: rgba(255,255,255,0.12);
  --muted: #9a95a2;
  --ink: #f5f0ea;
  --paper: #0a0a0f;
  background: #0a0a0f;
  color: #e8e2da;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

body[data-theme="dark"] h1,
body[data-theme="dark"] h2,
body[data-theme="dark"] h3 {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-weight: 700;
  color: #f5f0ea;
  letter-spacing: -0.02em;
}
body[data-theme="dark"] h3 {
  font-size: 1.1rem;
  letter-spacing: -0.01em;
}
body[data-theme="dark"] h1 {
  font-weight: 700;
  background: linear-gradient(180deg, #f5f0ea 0%, #a8a4b0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
body[data-theme="dark"] h2 {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

body[data-theme="dark"] em {
  color: #ff3d7f;
  font-style: normal;
  font-weight: 500;
}
body[data-theme="dark"] strong { color: #f5f0ea; font-weight: 600; }

body[data-theme="dark"] a {
  color: #e8e2da;
  border-bottom: 1px solid rgba(255, 61, 127, 0.4);
  text-decoration: none;
  padding-bottom: 1px;
}
body[data-theme="dark"] a:hover { color: #ff3d7f; border-bottom-color: #ff3d7f; }

body[data-theme="dark"] code,
body[data-theme="dark"] nav.site-nav,
body[data-theme="dark"] footer,
body[data-theme="dark"] .theme-toggle {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}

body[data-theme="dark"] nav.site-nav {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  color: #6a6573;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.72rem;
}
body[data-theme="dark"] nav.site-nav a { color: #b8b3c0; border-bottom: none; }
body[data-theme="dark"] nav.site-nav a:hover { color: #ff3d7f; }
body[data-theme="dark"] nav.site-nav a.brand { color: #f5f0ea; border-bottom: none; }
body[data-theme="dark"] nav.site-nav a.brand:hover { color: #f5f0ea; }

body[data-theme="dark"] p.lede { color: #e8e2da; }

body[data-theme="dark"] table { border: 1px solid rgba(255, 255, 255, 0.12); }
body[data-theme="dark"] table th,
body[data-theme="dark"] table td { border: 1px solid rgba(255, 255, 255, 0.08); }
body[data-theme="dark"] table th {
  background: rgba(255, 255, 255, 0.03);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 500;
  color: #9a95a2;
}

body[data-theme="dark"] footer {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: #6a6573;
}

body[data-theme="dark"] .theme-toggle {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #9a95a2;
}
body[data-theme="dark"] .theme-toggle:hover {
  border-color: #ff3d7f;
  color: #ff3d7f;
}

/* ============================================
   HOME PAGE — hero + sectioned layout
   Applied only when <body class="home">. Other pages are untouched.
   ============================================ */

body.home {
  max-width: none;
  padding: 0;
  overflow-x: hidden;
}
body.home > nav.site-nav,
body.home > .hero,
body.home > .home-content,
body.home > footer.home-footer {
  position: relative;
  z-index: 2;
}
body.home > nav.site-nav {
  max-width: 72rem;
  margin: 0 auto;
  padding: 1.25rem clamp(1rem, 4vw, 3rem) 0.6rem;
  border-bottom: none;
}

/* Particle field (dark theme only) */
body.home .field {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
body[data-theme="paper"].home .field { display: none; }
body.home .streak {
  position: absolute;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,61,127,0.85), transparent);
  animation: streak linear infinite;
  transform-origin: left center;
  box-shadow: 0 0 4px rgba(255,61,127,0.35);
}
@keyframes streak {
  0%   { transform: translateX(-10vw) scaleX(0.2); opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translateX(110vw) scaleX(1); opacity: 0; }
}

/* Hero — two-column grid: text left, decorative art right. The bitmap
   used to bleed across the full hero and sit under the headline; the
   right column now contains it so text always reads on a clean surface. */
.hero {
  max-width: 72rem;
  margin: 0 auto;
  padding: clamp(2rem, 6vh, 5rem) clamp(1rem, 4vw, 3rem) clamp(3rem, 8vh, 6rem);
  min-height: 78vh;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
}
.hero-text { min-width: 0; }

.hero-art {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-width: 28rem;
  justify-self: end;
  pointer-events: none;
  color: var(--target);
}
/* Hero animation: three discovery-themed reveals. Exactly one variant
   is active per page-load; the others stay in the DOM but display:none
   so animations on the active variant start fresh from t=0.
   Pick is randomized in _shared.js; ?hero=a|b|c overrides for sharing. */
.hero-anim {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.hero-art:not([data-hero="a"]) .hero-anim-a,
.hero-art:not([data-hero="b"]) .hero-anim-b,
.hero-art:not([data-hero="c"]) .hero-anim-c { display: none; }

/* ===== Hero anim A — Terra Incognita ============================ */
.hero-anim-a .graticule { stroke: currentColor; stroke-width: 0.4; opacity: 0.18; fill: none; }
.hero-anim-a .frame-ring { stroke: currentColor; stroke-width: 1; fill: none; opacity: 0.35; }
.hero-anim-a .compass { stroke: currentColor; fill: currentColor; }
.hero-anim-a .island {
  fill: currentColor; fill-opacity: 0.10;
  stroke: currentColor; stroke-width: 1; opacity: 0.95;
}
.hero-anim-a .island-inner { stroke-width: 0.7; fill-opacity: 0.15; opacity: 0.65; }
.hero-anim-a .island-core  { stroke-width: 0.6; fill-opacity: 0.30; opacity: 0.55; }
.hero-anim-a .fog {
  opacity: 0.92;
  transform-box: fill-box; transform-origin: center;
  animation: fogClear 2.4s ease-out 0.3s 1 both;
}
.hero-anim-a .fog.f2 { animation-delay: 0.6s; }
.hero-anim-a .fog.f3 { animation-delay: 0.9s; }
.hero-anim-a .fog.f4 { animation-delay: 1.2s; }
body[data-theme="dark"]  .hero-anim-a .fog { fill: #0a0a0f; }
body[data-theme="paper"] .hero-anim-a .fog { fill: #F2EBDD; }
@keyframes fogClear {
  0%   { opacity: 0.92; transform: scale(1); }
  100% { opacity: 0;    transform: scale(0.55); }
}
.hero-anim-a .ship-start { opacity: 0; animation: aPopIn 0.5s ease-out 0.7s forwards; }
.hero-anim-a .trail {
  stroke: currentColor; stroke-width: 1.2; fill: none;
  stroke-dasharray: 3 4;
  stroke-dashoffset: 360;
  animation: aDrawTrail 2.2s cubic-bezier(.55,.05,.4,1) 0.9s 1 both;
}
@keyframes aDrawTrail { to { stroke-dashoffset: 0; } }
.hero-anim-a .candidate {
  fill: none; stroke: currentColor; stroke-width: 1; opacity: 0;
  animation: aPopIn 0.4s ease-out forwards;
}
.hero-anim-a .candidate.c1 { animation-delay: 1.4s; }
.hero-anim-a .candidate.c2 { animation-delay: 1.7s; }
.hero-anim-a .candidate.c3 { animation-delay: 2.0s; }
.hero-anim-a .candidate.c4 { animation-delay: 2.3s; }
@keyframes aPopIn { to { opacity: 0.7; } }
.hero-anim-a .discovery {
  stroke: currentColor; stroke-width: 1.6; fill: none;
  opacity: 0;
  transform-origin: 350px 200px; transform-box: fill-box;
  animation: aLandX 0.55s cubic-bezier(.3,1.5,.5,1) 2.8s 1 forwards;
}
@keyframes aLandX {
  0%   { opacity: 0; transform: scale(2.5) rotate(20deg); }
  80%  { opacity: 1; transform: scale(0.9) rotate(-3deg); }
  100% { opacity: 1; transform: scale(1)   rotate(0); }
}
.hero-anim-a .discovery-ring {
  stroke: currentColor; stroke-width: 0.8; fill: none; opacity: 0;
  transform-origin: 350px 200px; transform-box: fill-box;
  animation: aRingIn 0.8s ease-out 3.1s 1 forwards;
}
@keyframes aRingIn {
  0%   { opacity: 0;    transform: scale(0.2); }
  100% { opacity: 0.65; transform: scale(1);   }
}
.hero-anim-a .label {
  font-family: 'IBM Plex Mono', monospace; font-size: 11px;
  fill: currentColor; opacity: 0;
  animation: aPopIn 0.4s ease-out 3.2s forwards;
}

/* ===== Hero anim B — Fitness Landscape ========================== */
.hero-anim-b .contour {
  fill: none; stroke: currentColor; stroke-width: 0.9; opacity: 0.7;
  stroke-dasharray: 900; stroke-dashoffset: 900;
  animation: bDrawContour 1.4s ease-out forwards;
}
.hero-anim-b .contour.r1 {
  opacity: 0.95; animation-delay: 0.05s;
  fill: currentColor; fill-opacity: 0.35; stroke-width: 1.1;
}
.hero-anim-b .contour.r2 { opacity: 0.80; animation-delay: 0.20s; }
.hero-anim-b .contour.r3 { opacity: 0.65; animation-delay: 0.35s; }
.hero-anim-b .contour.r4 { opacity: 0.50; animation-delay: 0.50s; }
.hero-anim-b .contour.r5 { opacity: 0.35; animation-delay: 0.65s; }
.hero-anim-b .contour.r6 { opacity: 0.22; animation-delay: 0.80s; }
@keyframes bDrawContour { to { stroke-dashoffset: 0; } }

.hero-anim-b .peak-mark {
  fill: currentColor; opacity: 0;
  animation: bPopIn 0.35s ease-out 1.5s forwards;
}
@keyframes bPopIn { to { opacity: 0.7; } }

.hero-anim-b .agent-trail {
  fill: none; stroke: currentColor; stroke-width: 1.1;
  stroke-dasharray: 320; stroke-dashoffset: 320;
  animation: bTrailGrow 2.4s cubic-bezier(.5,.1,.4,1) forwards;
}
.hero-anim-b .agent-trail.t1 { animation-delay: 1.1s; }
.hero-anim-b .agent-trail.t2 { animation-delay: 1.2s; }
.hero-anim-b .agent-trail.t3 { animation-delay: 1.3s; stroke-width: 1.3; opacity: 0.9; }
.hero-anim-b .agent-trail.t4 { animation-delay: 1.0s; stroke-width: 1.6; opacity: 1; }
.hero-anim-b .agent-trail.t5 { animation-delay: 1.25s; }
.hero-anim-b .agent-trail.doomed {
  animation: bTrailGrow 1.8s cubic-bezier(.5,.1,.4,1) forwards,
             bFadeOut 0.8s ease-out forwards;
}
.hero-anim-b .agent-trail.doomed.t1 { animation-delay: 1.0s,  2.6s; }
.hero-anim-b .agent-trail.doomed.t2 { animation-delay: 1.15s, 2.7s; }
.hero-anim-b .agent-trail.doomed.t5 { animation-delay: 1.05s, 2.4s; }
@keyframes bTrailGrow { to { stroke-dashoffset: 0; } }
@keyframes bFadeOut   { to { opacity: 0; } }

.hero-anim-b .agent-dot {
  fill: currentColor; opacity: 0;
  animation: bPopIn 0.4s ease-out forwards;
}
.hero-anim-b .agent-dot.d1 { animation-delay: 1.1s; }
.hero-anim-b .agent-dot.d2 { animation-delay: 1.2s; }
.hero-anim-b .agent-dot.d3 { animation-delay: 1.3s; }
.hero-anim-b .agent-dot.d4 { animation-delay: 1.0s; }
.hero-anim-b .agent-dot.d5 { animation-delay: 1.25s; }
.hero-anim-b .agent-dot.doomed {
  animation: bPopIn 0.4s ease-out forwards,
             bFadeOut 0.6s ease-out forwards;
}
.hero-anim-b .agent-dot.doomed.d1 { animation-delay: 1.0s,  2.6s; }
.hero-anim-b .agent-dot.doomed.d2 { animation-delay: 1.15s, 2.7s; }
.hero-anim-b .agent-dot.doomed.d5 { animation-delay: 1.05s, 2.4s; }

.hero-anim-b .summit-flag {
  stroke: currentColor; fill: currentColor; opacity: 0;
  transform-origin: 245px 195px; transform-box: fill-box;
  animation: bPlantFlag 0.55s cubic-bezier(.3,1.4,.5,1) 3.4s forwards;
}
@keyframes bPlantFlag {
  0%   { opacity: 0; transform: translateY(-22px) scale(0.7); }
  70%  { opacity: 1; transform: translateY(2px)   scale(1.05); }
  100% { opacity: 1; transform: translateY(0)     scale(1); }
}
.hero-anim-b .summit-halo {
  fill: none; stroke: currentColor; stroke-width: 0.8; opacity: 0;
  transform-origin: 245px 200px; transform-box: fill-box;
  animation: bHaloIn 0.9s ease-out 3.7s forwards;
}
@keyframes bHaloIn {
  0%   { opacity: 0;   transform: scale(0.3); }
  100% { opacity: 0.6; transform: scale(1);   }
}

/* ===== Hero anim C — Sonar Reveal ================================= */
/* Phosphor green in both themes — the panel paints its own dark void. */
.hero-anim-c, body[data-theme="dark"] .hero-anim-c, body[data-theme="paper"] .hero-anim-c {
  color: #3ef0b0;
}
.hero-anim-c .void       { fill: #06120e; }
.hero-anim-c .range-ring { fill: none; stroke: currentColor; stroke-width: 0.4; opacity: 0.22; }
.hero-anim-c .crosshair  { stroke: currentColor; stroke-width: 0.5; opacity: 0.30; }
.hero-anim-c .sweep-group {
  transform-origin: 240px 240px; transform-box: view-box;
  animation: cSweepRotate 3s linear 0.2s 1 both;
}
@keyframes cSweepRotate {
  0%   { transform: rotate(-90deg); opacity: 1; }
  90%  { transform: rotate(270deg); opacity: 1; }
  100% { transform: rotate(270deg); opacity: 0; }
}
.hero-anim-c .node {
  fill: currentColor; opacity: 0;
  transform-origin: center; transform-box: fill-box;
  animation: cLightUp 1.6s ease-out forwards;
}
@keyframes cLightUp {
  0%   { opacity: 0;    transform: scale(0.4); }
  8%   { opacity: 1;    transform: scale(1.7); }
  40%  { opacity: 0.95; transform: scale(1);   }
  100% { opacity: 0.80; transform: scale(1);   }
}
.hero-anim-c .edge {
  fill: none; stroke: currentColor; stroke-width: 1.4;
  stroke-dasharray: 240; stroke-dashoffset: 240; opacity: 0;
  animation: cDrawEdge 0.7s ease-out forwards;
}
.hero-anim-c .edge.minor { stroke-width: 0.9; }
@keyframes cDrawEdge { to { stroke-dashoffset: 0; opacity: 0.95; } }
.hero-anim-c .core {
  fill: currentColor; opacity: 0;
  transform-origin: 240px 240px; transform-box: view-box;
  animation: cCorePop 0.7s cubic-bezier(.3,1.5,.5,1) 3.4s forwards;
}
@keyframes cCorePop {
  0%   { opacity: 0; transform: scale(0.2); }
  70%  { opacity: 1; transform: scale(1.4); }
  100% { opacity: 1; transform: scale(1);   }
}
.hero-anim-c .core-halo {
  fill: none; stroke: currentColor; stroke-width: 0.7; opacity: 0;
  transform-origin: 240px 240px; transform-box: view-box;
  animation: cHaloPop 1.1s ease-out 3.6s forwards;
}
@keyframes cHaloPop {
  0%   { opacity: 0;   transform: scale(0.3); }
  100% { opacity: 0.6; transform: scale(1);   }
}

@media (prefers-reduced-motion: reduce) {
  .hero-anim-a *, .hero-anim-b *, .hero-anim-c * { animation: none !important; }
  .hero-anim-a .fog { opacity: 0; }
  .hero-anim-a .trail, .hero-anim-b .contour, .hero-anim-b .agent-trail { stroke-dashoffset: 0; }
  .hero-anim-a .candidate, .hero-anim-a .discovery, .hero-anim-a .discovery-ring, .hero-anim-a .label,
  .hero-anim-a .ship-start,
  .hero-anim-b .agent-dot, .hero-anim-b .summit-flag, .hero-anim-b .summit-halo, .hero-anim-b .peak-mark,
  .hero-anim-c .node, .hero-anim-c .core, .hero-anim-c .core-halo, .hero-anim-c .edge { opacity: 1; }
}

@media (max-width: 900px) {
  .hero {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .hero-art {
    grid-row: 1;
    justify-self: center;
    max-width: 14rem;
    margin-bottom: 0.5rem;
    opacity: 0.55;
  }
}
.hero-mark {
  font-size: 0.78rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  margin: 0 0 1.8rem 0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.hero-mark::before {
  content: '';
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 0.6; transform: scale(0.85); }
  50%      { opacity: 1;   transform: scale(1.15); }
}
.hero h1 {
  font-size: clamp(2.6rem, 5.6vw, 5.2rem);
  line-height: 0.96;
  letter-spacing: -0.035em;
  margin: 0 0 1.4rem 0;
  max-width: 14ch;
}
.hero-tagline {
  font-size: clamp(1.15rem, 1.8vw, 1.55rem);
  font-weight: 300;
  line-height: 1.4;
  margin: 0 0 1.1rem 0;
  max-width: 44rem;
}
.hero-tagline strong { font-weight: 600; }
.hero-second {
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  line-height: 1.5;
  margin: 0 0 2.2rem 0;
  max-width: 44rem;
}
.hero-cta {
  display: flex;
  gap: 0.9rem;
  flex-wrap: wrap;
  margin: 0 0 3rem 0;
}
.cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.3rem;
  border-radius: 999px;
  font-size: 0.88rem;
  letter-spacing: 0.02em;
  text-decoration: none !important;
  border: 1px solid transparent;
  transition: all 0.15s ease;
  font-weight: 500;
}
.card { text-decoration: none !important; }
.cta-primary:hover { transform: translateY(-1px); }
.cta-secondary:hover { transform: translateY(-1px); }

.hero-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1.2rem 2.5rem;
  margin: 0;
  padding: 1.4rem 0 0 0;
  border-top: 1px solid;
  max-width: 56rem;
}
.hero-meta > div { margin: 0; }
.hero-meta dt {
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0 0 0.3rem 0;
}
.hero-meta dd {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.3;
}
.hero-meta dd a { font-size: inherit; }

/* Sectioned content below the hero */
.home-content {
  max-width: 72rem;
  margin: 0 auto;
  padding: clamp(2rem, 5vh, 4rem) clamp(1rem, 4vw, 3rem);
}
.home-content > section {
  padding: clamp(2.5rem, 6vh, 5rem) 0;
  border-top: 1px solid;
  display: grid;
  grid-template-columns: 12rem 1fr;
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: start;
}
.home-content > section:first-child { border-top: none; padding-top: 0; }
.section-mark {
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin: 0.25rem 0 0 0;
  position: sticky;
  top: 1rem;
}
.section-body { min-width: 0; }
.section-body > h2 {
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 1rem 0;
  border-top: none;
  padding-top: 0;
}
.section-body > p {
  font-size: 1.02rem;
  line-height: 1.6;
  max-width: 44rem;
}
.section-body > p:first-of-type { font-size: 1.08rem; }

@media (max-width: 720px) {
  .home-content > section { grid-template-columns: 1fr; gap: 0.8rem; }
  .section-mark { position: static; }
}

/* Card grid for careers + read-further */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: 1rem;
  margin: 1.5rem 0;
}
.card {
  padding: 1.4rem 1.5rem;
  border-radius: 10px;
  border: 1px solid;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
  font-size: 0.96rem;
  line-height: 1.5;
}
.card:hover { transform: translateY(-2px); }
.card-eyebrow {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0;
}
.card-title {
  font-size: 1.12rem;
  margin: 0;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.card p { margin: 0; font-size: 0.95rem; line-height: 1.5; }
.card-arrow {
  margin-top: auto;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding-top: 0.6rem;
}

/* Home footer — mono status bar */
footer.home-footer {
  max-width: 72rem;
  margin: 0 auto;
  padding: 2rem clamp(1rem, 4vw, 3rem) 3rem;
  border-top: 1px solid;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2.5rem;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
}
footer.home-footer .brandmark { text-transform: uppercase; letter-spacing: 0.24em; }
footer.home-footer .spacer { flex: 1; }

/* -------- dark-theme home palette -------- */
body[data-theme="dark"].home .hero-mark { color: #ff3d7f; }
body[data-theme="dark"].home .hero-art { color: #ff3d7f; }
body[data-theme="dark"].home .hero-anim-a,
body[data-theme="dark"].home .hero-anim-b {
  filter: drop-shadow(0 0 6px rgba(255, 61, 127, 0.35));
}
body[data-theme="dark"].home .hero-mark::before {
  background: #ff3d7f;
  box-shadow: 0 0 16px rgba(255,61,127,0.8);
}
body[data-theme="dark"].home .hero-tagline { color: #e8e2da; }
body[data-theme="dark"].home .hero-tagline em {
  font-style: normal;
  color: #ff3d7f;
  font-weight: 500;
}
body[data-theme="dark"].home .hero h1 em {
  font-style: normal;
  background: linear-gradient(180deg, #ff3d7f 0%, #c9295f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
body[data-theme="dark"].home .hero-second { color: #9a95a2; }
body[data-theme="dark"].home .hero-meta { border-top-color: rgba(255,255,255,0.1); }
body[data-theme="dark"].home .hero-meta dt { color: #6a6573; }
body[data-theme="dark"].home .hero-meta dd { color: #b8b3c0; }
body[data-theme="dark"].home .hero-meta dd a { color: #e8e2da; border-bottom-color: rgba(255,61,127,0.4); }

body[data-theme="dark"].home .cta-primary {
  background: #ff3d7f;
  color: #0a0a0f;
  border-color: #ff3d7f;
}
body[data-theme="dark"].home .cta-primary:hover {
  background: #ff5a91;
  border-color: #ff5a91;
  color: #0a0a0f;
}
body[data-theme="dark"].home .cta-secondary {
  color: #e8e2da;
  border-color: rgba(255,255,255,0.2);
  background: transparent;
}
body[data-theme="dark"].home .cta-secondary:hover {
  border-color: #ff3d7f;
  color: #ff3d7f;
}

body[data-theme="dark"].home .home-content > section { border-top-color: rgba(255,255,255,0.08); }
body[data-theme="dark"].home .section-mark { color: #ff3d7f; }
body[data-theme="dark"].home .section-body > p { color: #c9c4cf; }
body[data-theme="dark"].home .section-body > p em { color: #ff3d7f; font-style: normal; font-weight: 500; }

body[data-theme="dark"].home .card {
  background: rgba(255,255,255,0.02);
  border-color: rgba(255,255,255,0.1);
  color: #e8e2da;
}
body[data-theme="dark"].home .card:hover {
  border-color: #ff3d7f;
  background: rgba(255,61,127,0.05);
}
body[data-theme="dark"].home .card-eyebrow { color: #ff3d7f; }
body[data-theme="dark"].home .card-title { color: #f5f0ea; }
body[data-theme="dark"].home .card p { color: #b8b3c0; }
body[data-theme="dark"].home .card-arrow { color: #ff3d7f; }

body[data-theme="dark"].home footer.home-footer {
  border-top-color: rgba(255,255,255,0.08);
  color: #6a6573;
}
body[data-theme="dark"].home footer.home-footer a { color: #b8b3c0; border-bottom-color: rgba(255,61,127,0.4); }
body[data-theme="dark"].home footer.home-footer a:hover { color: #ff3d7f; }

/* -------- paper-theme home palette -------- */
body[data-theme="paper"].home { background: #F2EBDD; }
body[data-theme="paper"].home .hero-art { color: #B8432C; }
body[data-theme="paper"].home .hero-anim-a,
body[data-theme="paper"].home .hero-anim-b { opacity: 0.95; }
body[data-theme="paper"].home .hero-mark { color: #B8432C; }
body[data-theme="paper"].home .hero-mark::before {
  background: #B8432C;
  box-shadow: 0 0 14px rgba(184,67,44,0.5);
}
body[data-theme="paper"].home .hero h1 {
  background: none;
  -webkit-text-fill-color: initial;
  color: #1C1812;
  font-weight: 500;
}
body[data-theme="paper"].home .hero-tagline { color: #1C1812; }
body[data-theme="paper"].home .hero-tagline em {
  color: #B8432C;
  font-style: italic;
  font-weight: 500;
}
body[data-theme="paper"].home .hero-second { color: #6B5E49; }
body[data-theme="paper"].home .hero-meta { border-top-color: #C9BBA0; }
body[data-theme="paper"].home .hero-meta dt { color: #6B5E49; font-family: 'IBM Plex Mono', monospace; }
body[data-theme="paper"].home .hero-meta dd { color: #1C1812; }

body[data-theme="paper"].home .cta-primary {
  background: #B8432C;
  color: #F2EBDD;
  border-color: #B8432C;
}
body[data-theme="paper"].home .cta-primary:hover {
  background: #1C1812;
  border-color: #1C1812;
  color: #F2EBDD;
}
body[data-theme="paper"].home .cta-secondary {
  color: #1C1812;
  border-color: #C9BBA0;
  background: transparent;
}
body[data-theme="paper"].home .cta-secondary:hover {
  border-color: #1C1812;
  color: #1C1812;
}

body[data-theme="paper"].home .home-content > section { border-top-color: #C9BBA0; }
body[data-theme="paper"].home .section-mark { color: #B8432C; font-family: 'IBM Plex Mono', monospace; }
body[data-theme="paper"].home .section-body > p { color: #1C1812; }
body[data-theme="paper"].home .section-body > p em { color: #B8432C; font-style: italic; }

body[data-theme="paper"].home .card {
  background: rgba(255, 248, 225, 0.4);
  border-color: #C9BBA0;
  color: #1C1812;
}
body[data-theme="paper"].home .card:hover {
  border-color: #1F5567;
  background: rgba(255, 248, 225, 0.7);
}
body[data-theme="paper"].home .card-eyebrow { color: #B8432C; font-family: 'IBM Plex Mono', monospace; }
body[data-theme="paper"].home .card-title { color: #1C1812; }
body[data-theme="paper"].home .card p { color: #6B5E49; }
body[data-theme="paper"].home .card-arrow { color: #1F5567; font-family: 'IBM Plex Mono', monospace; }

body[data-theme="paper"].home footer.home-footer {
  border-top-color: #C9BBA0;
  color: #6B5E49;
  font-family: 'IBM Plex Mono', monospace;
}
body[data-theme="paper"].home footer.home-footer a { color: #1C1812; }

/* Section marks use mono on both themes */
.hero-mark,
.section-mark,
.card-eyebrow,
.card-arrow,
.hero-meta dt,
footer.home-footer {
  font-family: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;
}
body[data-theme="paper"].home .hero-mark,
body[data-theme="paper"].home .section-mark,
body[data-theme="paper"].home .card-eyebrow,
body[data-theme="paper"].home .card-arrow,
body[data-theme="paper"].home .hero-meta dt,
body[data-theme="paper"].home footer.home-footer {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
}