.prelaunch--about { --product-content-width: min(var(--product-content-max), calc(100% - (var(--product-content-gutter) * 2))); overflow-x: clip; }
.about-story { width: 100%; margin-inline: auto; padding-block: 24px 88px; }
.about-story__heading { margin-bottom: 24px; }
.about-story > .page-context-layout { width: 100%; margin-bottom: var(--space-8); }
.about-story .page-context-nav__back .icon-mark { width: 19px; height: 19px; }
.about-story__heading h1 { margin: 0; font-size: clamp(30px, 2.8vw, 36px); font-weight: 550; line-height: 1.12; letter-spacing: 0; }
.about-story__opening { --portrait-size: clamp(260px, 25vw, 350px); display: grid; grid-template-columns: minmax(0, 1fr) var(--portrait-size); gap: clamp(28px, 4vw, 56px); align-items: start; padding-block: 0 48px; }
.about-story h2 { margin: 0 0 20px; font-size: clamp(var(--text-xl), 2.2vw, var(--text-4xl)); font-weight: 560; line-height: 1.12; letter-spacing: 0; }
.about-story .eyebrow { font-size: .72rem; line-height: 1.4; }
.about-story__lead { font-size: 1.0625rem; color: var(--text-soft); line-height: 1.65; }
.about-story__lead p:last-child { margin-bottom: 0; }
.about-portrait { width: 100%; height: calc(var(--portrait-size) * .77); margin: 0; text-align: center; }
.about-portrait__universe { translate: 0 -11.5%; }
.about-portrait__universe { position: relative; isolation: isolate; aspect-ratio: 1; display: grid; place-items: center; transform: translate3d(var(--portrait-x, 0px), var(--portrait-y, 0px), 0); }
.about-portrait__universe::before { content: ""; position: absolute; inset: 8%; border-radius: 50%; background: radial-gradient(circle, rgba(139,173,177,.12), transparent 70%); box-shadow: 0 0 70px rgba(129,175,181,.055); }
.about-portrait__photo { position: relative; width: 77%; aspect-ratio: 1; overflow: hidden; border-radius: 50%; padding: 3px; background: linear-gradient(135deg, #f2d492, #655339 40%, #172e35 68%, #8ca7aa); box-shadow: 0 20px 55px rgba(0,0,0,.4); }
.about-portrait__photo img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.about-portrait__bolides { position: absolute; z-index: 2; inset: -10%; width: 120%; height: 120%; pointer-events: none; }
.about-portrait__photo { z-index: 1; }
.about-story__layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: clamp(36px, 6vw, 88px); }
.about-story__contents { position: sticky; top: 36px; align-self: start; display: grid; gap: 6px; border-top: 1px solid rgba(190,211,211,.16); padding-top: 24px; }
.about-story__contents a { position: relative; display: flex; align-items: center; gap: 12px; padding: 8px 0; text-decoration: none; font-size: .9rem; color: var(--text-soft); transition: color 180ms ease; }
.about-story__contents a span { align-self: flex-start; flex: 0 0 24px; width: 24px; height: 24px; border: 1px solid rgba(147,174,179,.25); border-radius: 50%; color: var(--text-muted); text-align: center; font: .65rem/22px var(--font-mono); transition: color 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease; }
.about-story__contents a:not(:last-child)::before,
.about-story__contents a:not(:last-child)::after { content: ""; position: absolute; left: 11.5px; top: 32px; width: 1px; height: calc(100% + 6px - 24px); background: rgba(147,174,179,.2); pointer-events: none; }
.about-story__contents a:not(:last-child)::after { background: var(--accent-amber); transform: scaleY(var(--chapter-progress, 0)); transform-origin: top; }
.about-story__contents a.is-complete span { color: var(--accent-amber-light); border-color: rgba(214,168,95,.6); background: rgba(214,168,95,.12); }
.about-story__contents a[aria-current="location"] { color: var(--accent-amber-light); }
.about-story__contents a[aria-current="location"] span { color: var(--accent-amber-light); border-color: var(--accent-amber); background: rgba(214,168,95,.18); box-shadow: 0 0 14px rgba(214,168,95,.15); }
.about-story__reading { min-width: 0; font-size: 1.0625rem; line-height: 1.9; color: var(--text-soft); }
.about-story__reading p { margin-bottom: 1.4em; }
.about-story__reading h2 { color: var(--text-main); }
.about-story__chapter { position: relative; margin-top: 56px; padding-top: 48px; scroll-margin-top: 32px; }
.about-story__chapter::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: linear-gradient(90deg, rgba(134,182,195,.5), rgba(213,169,98,.5) 56%, transparent); }
.about-story__quote { margin: 32px 0; padding: 8px 0 8px 24px; border-left: 2px solid rgba(214,168,95,.55); color: var(--accent-amber-light); font: 400 var(--text-md)/1.68 var(--font-display); }
.about-story__quote p:last-child, .about-story__thread p:last-child, .about-story__paths p:last-child { margin-bottom: 0; }
.about-story__thread { margin: 30px 0; }
.about-story__thread > div { position: relative; padding: 0 0 24px 34px; }
.about-story__thread > div:last-child { padding-bottom: 0; }
.about-story__thread > div:not(:last-child)::after { content: ""; position: absolute; top: 27px; bottom: -7px; left: 9px; width: 1px; background: linear-gradient(rgba(214,168,95,.3), rgba(140,185,198,.3)); }
.about-story__thread-star { position: absolute; top: 7px; left: 0; width: 19px; height: 19px; color: var(--accent-amber-light); animation: about-star-light 5.5s ease-in-out infinite alternate; }
.about-story__thread > div:nth-child(2) .about-story__thread-star { color: #a7cad0; animation-delay: -2.7s; }
.about-story__paths { display: grid; gap: 16px; margin-block: 32px; }
.about-story__paths section { padding: clamp(22px, 3vw, 30px); background: linear-gradient(120deg, rgba(21,39,47,.38), rgba(13,24,29,.28)); border: 1px solid rgba(147,174,179,.16); border-radius: 12px; box-shadow: 0 14px 35px rgba(0,0,0,.12); }
.about-story__paths h3 { margin: 0 0 14px; color: var(--accent-amber-light); font: 620 1.08rem/1.32 var(--font-display); }
.about-story__ending { margin-block: 32px; color: var(--text-main); font-size: 1.125rem; }
.about-story__closing { margin-top: 36px; border-top: 1px solid rgba(190,211,211,.16); }
.about-story__signature { display: grid; gap: 2px; }
.about-story__signoff { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; }
.about-story__signoff .about-story__signature { margin: 0; }
.about-story__signature strong { color: var(--accent-amber-light); font: 500 1.3rem/1.5 var(--font-display); }
.about-story__signature span { font-size: .875rem; }
.about-story__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 28px; font-size: .9375rem; }
.about-story__actions .btn { text-decoration: none; }
@keyframes about-orbit-light { from { opacity: .45; } to { opacity: 1; } }
@keyframes about-star-light { from { opacity: .6; filter: drop-shadow(0 0 2px rgba(214,168,95,.1)); } to { opacity: 1; filter: drop-shadow(0 0 6px rgba(214,168,95,.55)); } }
@media (max-width: 900px) {
  .about-story__layout { grid-template-columns: 1fr; gap: 32px; }
  .about-story__contents { position: static; display: flex; flex-wrap: wrap; column-gap: 24px; padding-top: 16px; }
  .about-story__contents > p { flex-basis: 100%; margin-bottom: 0; }
  .about-story__contents a::before, .about-story__contents a::after { display: none; }
  .about-story__reading { max-width: 100%; }
  .about-story__opening { gap: 28px; }
}
@media (max-width: 620px) {
  .about-story__opening { grid-template-columns: 1fr; gap: 24px; padding-block: 0 40px; }
  .about-story__heading { margin-bottom: 24px; }
  .about-portrait { width: 260px; height: 200.2px; margin: 16px auto 0; }
  .about-story__reading { font-size: 1rem; line-height: 1.8; }
  .about-story__chapter { margin-top: 40px; padding-top: 32px; }
  .about-story__quote { padding-left: 20px; }
  .about-story__actions { align-items: flex-start; flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  .about-portrait__universe { transform: none; }
  .about-story__contents a, .about-story__contents a span { transition: none; }
  .about-story__thread-star { animation: none; }
}