/* About-only palette: warm red accents over the site's dark glass surfaces. */
:root {
  --blue: #ff727c;
  --purple: #e85b72;
  --red: #ff727c;
  --muted: #c6b7bd;
  --line: rgba(255, 114, 124, 0.22);
  --card: rgba(30, 14, 22, 0.76);
  --glow: 0 18px 50px rgba(20, 4, 10, 0.45), 0 0 28px rgba(255, 90, 110, 0.09);
}
html, body {
  background: radial-gradient(1200px 700px at 15% 0%, rgba(255, 90, 110, 0.10), transparent 55%), radial-gradient(900px 600px at 85% 70%, rgba(192, 58, 79, 0.08), transparent 60%), #030204;
}
/* Clip horizontal overflow without creating a scroll container around the sticky header. */
body { overflow-x: clip; }
.about-page { max-width: 1180px; margin: 50px auto 0; }
.about-hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(32px, 6vw, 88px); align-items: center; }
.about-hero h1 { margin: 20px 0 26px; font-family: var(--font-sans); font-size: clamp(42px, 5.2vw, 72px); line-height: 1.04; letter-spacing: -0.055em; color: #ffabb1; }
.about-hero p { color: var(--muted); font-family: var(--font-sans); line-height: 1.8; }
.about-hero .about-intro { color: var(--text); font-size: clamp(18px, 1.6vw, 23px); line-height: 1.6; }
.about-link { display: inline-flex; gap: 20px; margin-top: 20px; color: #ffabb1; text-decoration: none; }
.about-portrait { margin: 0; }
.about-portrait img { display: block; width: 100%; height: auto; border-radius: 24px; border: 1px solid var(--line); box-shadow: 0 28px 70px #0006; }
.about-portrait figcaption { margin-top: 12px; font-size: 11px; color: var(--muted); }
.about-story { max-width: 740px; margin: clamp(64px, 10vw, 120px) auto 72px; font-family: var(--font-sans); }
.about-story section { margin-bottom: 58px; scroll-margin-top: 120px; }
.about-story h2 { margin: 0 0 22px; color: #ffd1d5; font-size: clamp(28px, 3vw, 38px); line-height: 1.15; letter-spacing: -0.035em; }
.about-story p { margin: 0 0 20px; line-height: 1.9; color: #c2cde0; }
.about-story a { color: #ffabb1; text-underline-offset: 4px; }
.about-story blockquote { margin: 50px 0 62px; padding-left: 28px; border-left: 3px solid #e85b72; color: #edf5ff; font-size: clamp(23px, 3vw, 32px); line-height: 1.5; }
.about-story cite { display: block; margin-top: 18px; color: var(--muted); font: normal 12px var(--font-mono); }
.about-name { padding: clamp(24px, 4vw, 40px); border: 1px solid var(--line); border-radius: 22px; background: linear-gradient(125deg, #101c32cc, #221830aa); }
.about-story .eyebrow { color: #ff929c; font: 11px var(--font-mono); letter-spacing: 0.14em; }
.about-signature { padding-top: 12px; font-weight: 700; }
.about-signature span { display: block; margin-top: 4px; font-size: 13px; font-weight: 400; }
.about-invitation { border-top: 1px solid var(--line); padding-top: 38px; }
.about-story .about-button { display: inline-block; padding: 14px 24px; border-radius: 999px; background: linear-gradient(115deg, #ff727c, #e85b72); color: #071121; font-weight: 800; text-decoration: none; }
.about-page a:focus-visible { outline: 2px solid var(--blue); outline-offset: 5px; }
@media (max-width: 700px) {
  .about-page { margin-top: 22px; }
  .about-hero { grid-template-columns: 1fr; gap: 30px; }
  .about-hero h1 { font-size: clamp(40px, 9vw, 60px); }
  .about-portrait { max-width: 480px; margin-inline: auto; }
  .about-story { margin-top: 64px; }
}

/* Use the homepage's glass surfaces, borders, and a distinct red accent palette. */
.about-hero {
  padding: clamp(24px, 4vw, 48px);
  gap: clamp(28px, 4vw, 56px);
  border: 1px solid var(--line);
  border-radius: 24px;
  background:
    radial-gradient(circle at 16% 20%, rgba(255,114,124,.16), transparent 36%),
    radial-gradient(circle at 76% 24%, rgba(232,91,114,.18), transparent 38%),
    radial-gradient(circle at 60% 78%, rgba(255,93,135,.12), transparent 40%),
    linear-gradient(180deg, rgba(36,15,25,.84), rgba(20,9,16,.92));
  box-shadow: var(--glow);
}
.about-hero h1 { font-size: clamp(38px, 4.6vw, 64px); color: var(--text); }
.about-hero .eyebrow { color: var(--blue); font: 600 11px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }
.about-page a:not(.about-button) { text-underline-offset: 4px; }
.about-founder-link { color: #ffabb1; text-decoration-color: rgba(255,114,124,.5); }
.about-founder-link:hover { color: #ffd1d5; }
.about-portrait figcaption a { color: inherit; }
.about-link { padding: 11px 18px; border: 1px solid rgba(255,114,124,.3); border-radius: 999px; background: rgba(255,114,124,.08); font-size: 13px; }
.about-story { max-width: 860px; }
.about-story section { padding: clamp(24px, 4vw, 42px); margin-bottom: 30px; border: 1px solid var(--line); border-radius: 24px; background: var(--card); box-shadow: var(--glow); backdrop-filter: blur(8px); }
.about-story h2 { color: var(--text); font-size: clamp(25px, 2.6vw, 34px); }
.about-story p { color: var(--muted); line-height: 1.85; }
.about-story blockquote { padding: clamp(24px, 4vw, 40px); border: 1px solid rgba(232,91,114,.3); border-left: 3px solid var(--purple); border-radius: 0 24px 24px 0; background: linear-gradient(120deg, rgba(255,114,124,.08), rgba(232,91,114,.12), rgba(255,93,135,.07)); }
.about-story .about-name { background: linear-gradient(125deg, rgba(42,18,27,.85), rgba(30,14,24,.85)); }
.about-invitation { border: 0; padding-top: 20px; }
.about-invitation .blog-newsletter { width: 100%; margin: 0; padding: 0; }
.about-invitation .hero-waitlist-panel { width: 100%; }
.about-invitation .hero-waitlist-copy p { font-family: var(--font-mono); }
.about-invitation .waitlist-offer-note { font-size: 12px; }
.about-invitation .hero-waitlist input { font-size: 16px; }
@media (max-width: 700px) {
  .about-hero { padding: 24px 20px; }
  .about-hero h1 { font-size: clamp(34px, 8.2vw, 52px); }
  .about-story blockquote { margin-inline: 0; }
}

.about-invitation .hero-waitlist-panel { border-color: var(--line); background: linear-gradient(135deg, rgba(42,18,27,.88), rgba(23,12,20,.94)); box-shadow: var(--glow); }
.about-invitation .hero-waitlist { border-color: var(--line); }
.about-invitation .hero-waitlist button { background: linear-gradient(115deg, #ff8b91, #ed5c72); color: #20060e; }
.about-invitation .waitlist-offer .blue-glow,
.about-invitation .waitlist-offer .red-glow { background-image: linear-gradient(120deg, #ffd1d5, #ff727c); }
.nav-toggle, .nav-links .nav-link { border-color: var(--line); }
.nav-links .nav-link[aria-current="page"] { color: #ffd1d5; background: rgba(232,91,114,.18); border-color: #e85b72; }

.about-luna-layout { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 32px; align-items: center; }
.about-luna-preview { margin: 0; min-width: 0; perspective: 1400px; }
.about-luna-phone { position: relative; width: 240px; max-width: 100%; aspect-ratio: 9 / 19.5; margin-inline: auto; padding: 7px; border: 1px solid #596274; border-radius: 48px; background: linear-gradient(180deg, #191d28, #020308 60%, #10141e); box-shadow: 2px 1px 0 #566073, 4px 2px 0 #303745, 6px 3px 0 #151923, 0 25px 40px #0008, 0 0 28px rgba(255,114,124,.12); transform: rotateY(-12deg) rotate(-2deg); }
.about-luna-phone::before { content: ""; position: absolute; z-index: 2; top: 14px; left: 50%; transform: translateX(-50%); width: 42%; height: 21px; border-radius: 99px; background: radial-gradient(circle at 75% 50%, #233249 0 2px, #05060a 3px); pointer-events: none; }
.about-luna-screen { width: 100%; height: 100%; overflow: hidden; border-radius: 40px; background: #050714; }
.about-luna-screen video { display: block; width: 100%; height: 100%; object-fit: cover; }
.about-luna-buttons { position: absolute; top: 25%; left: -4px; width: 3px; height: 38px; border-radius: 2px; background: linear-gradient(90deg, #182030, #8a94a8); box-shadow: 0 53px 0 #596274; pointer-events: none; }
.about-luna-phone::after { content: ""; position: absolute; right: -8px; top: 34%; width: 3px; height: 58px; border-radius: 2px; background: #596274; pointer-events: none; }
.about-luna-preview figcaption { margin-top: 22px; color: var(--muted); text-align: center; font: 12px/1.6 var(--font-mono); }
@media (max-width: 760px) {
  .about-luna-layout { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .about-luna-preview { width: min(100%, 300px); margin-inline: auto; }
  .about-luna-phone { width: min(100% - 16px, 260px); }
}

.about-attention-layout { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 32px; align-items: start; }
.about-athletics { position: sticky; top: 120px; margin: 0; min-width: 0; }
.about-athletics__photos { display: grid; overflow: hidden; border-radius: 18px; border: 1px solid var(--line); background: #080609; }
.about-athletics__photo { grid-area: 1 / 1; display: block; width: 100%; height: auto; opacity: 0; transition: opacity 850ms ease; }
.about-athletics__photo.is-active { opacity: 1; }
.about-athletics figcaption { padding-top: 14px; color: var(--muted); font: 12px/1.6 var(--font-mono); text-align: center; }
.about-athletics__controls { display: flex; justify-content: center; gap: 8px; margin-top: 12px; }
.about-athletics__controls button { min-width: 44px; min-height: 44px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; color: #ffd1d5; background: #ff727c12; font: inherit; cursor: pointer; }
.about-athletics__controls button:hover { background: #ff727c26; }
.about-athletics__controls button:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
@media (min-width: 1200px) {
  .about-story #why { width: calc(100% + 240px); margin-left: -120px; box-sizing: border-box; }
  .about-attention-layout { grid-template-columns: minmax(0, 1fr) 330px; gap: 42px; }
}
@media (max-width: 760px) {
  .about-attention-layout { grid-template-columns: minmax(0, 1fr); }
  .about-athletics { position: static; width: min(100%, 360px); margin-inline: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .about-athletics__photo { transition: none; }
}

.about-understanding-layout { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 30px; align-items: center; }
.about-handwritten { margin: 0; min-width: 0; }
.about-handwritten img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 16px; }
.about-handwritten figcaption { margin-top: 12px; color: var(--muted); font: 12px/1.6 var(--font-mono); text-align: center; }
@media (max-width: 760px) {
  .about-understanding-layout { grid-template-columns: minmax(0, 1fr); }
  .about-handwritten { width: min(100%, 360px); margin-inline: auto; }
}
.about-page .about-home-link { color: inherit; text-decoration-color: rgba(255,114,124,.5); text-decoration-thickness: 1px; }
.about-page .about-home-link:hover { color: #ffabb1; }

.about-luna-pair { display: grid; grid-template-columns: 1.2fr 1fr; align-items: end; gap: 24px; margin-top: 30px; }
.about-luna-pair figure { margin: 0; min-width: 0; }
.about-luna-pair__real { display: block; width: 100%; height: auto; border-radius: 18px; border: 1px solid var(--line); }
.about-luna-pair__art { display: grid; place-items: center; aspect-ratio: 4 / 3; }
.about-luna-pair__art img { display: block; width: 85%; max-width: 280px; height: auto; }
.about-luna-pair figcaption { margin-top: 14px; color: var(--muted); font: 12px/1.6 var(--font-mono); text-align: center; }
@media (max-width: 520px) {
  .about-luna-pair { grid-template-columns: 1fr; gap: 24px; }
  .about-luna-pair__art { aspect-ratio: auto; }
  .about-luna-pair__art img { width: 210px; max-width: 85%; }
}

/* A slow orbit of personal photos, centered beneath the attention story. */
.about-attention-layout { display: block; }
.about-story #why { width: auto; margin-left: 0; }
.about-athletics { position: relative; top: auto; width: 100%; max-width: 720px; margin: 36px auto 0; }
.about-athletics__photos { position: relative; display: grid; place-items: center; height: clamp(300px, 48vw, 470px); overflow: hidden; border: 0; background: transparent; border-radius: 0; }
.about-athletics__photo { position: absolute; width: 40%; max-width: 270px; height: auto; opacity: 1; transition: none; border-radius: 16px; border: 1px solid var(--line); box-shadow: 0 14px 28px #0005; }
.about-athletics__pause { display: block; margin: 10px auto 0; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: #ff727c12; color: #ffd1d5; cursor: pointer; }
.about-athletics__pause[hidden] { display: none; }
.about-athletics__pause:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }
@media (max-width: 520px) { .about-athletics__photos { height: 280px; } .about-athletics__photo { width: 45%; } }

.about-athletics__photos { touch-action: pan-y pinch-zoom; cursor: grab; user-select: none; -webkit-user-select: none; }
.about-athletics__photos.is-dragging { cursor: grabbing; }
.about-athletics__photo { -webkit-user-drag: none; }
.about-athletics__photos:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }