/* A founder's story, told through a native-scroll timeline and documentary photos. */
.about-page { min-height: 100svh; }
.about-skip { position: fixed; z-index: 20; top: 12px; left: 20px; padding: 12px 16px; color: #000; background: var(--text); transform: translateY(-180%); }
.about-skip:focus { transform: none; }
.about-header, .about-footer { width: min(100% - 88px,1352px); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.about-header { min-height: 104px; color: var(--quiet); font-size: .8125rem; }
.about-header a { display: inline-flex; align-items: center; min-height: 44px; }
.about-header a:hover, .about-back:hover { color: var(--text); }
.about-home { gap: 7px; }
.about-home svg, .story-start svg { fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.about-header .about-preorder { padding-inline: 22px; border: 1px solid #ffffff40; border-radius: 999px; color: var(--text); }
.about-story { --about-rule: #292c2e; --timeline-gutter: 44px; position: relative; max-width: 1312px; margin: 0 auto; padding: 56px 48px 100px; }
.about-story:focus { outline: none; }
.about-intro { max-width: 820px; padding-bottom: 112px; }
.about-label { margin: 0 0 26px; color: var(--quiet); font-size: .875rem; }
.about-intro h1 { margin: 0; font-size: clamp(3rem,5.8vw,5.25rem); font-weight: 400; line-height: 1.03; letter-spacing: -.06em; }
.about-lead { max-width: 580px; margin: 30px 0 18px; color: var(--quiet); font-size: 1.0625rem; line-height: 1.7; }
.about-lead p { margin: 0 0 14px; }
.story-start { display: inline-flex; gap: 16px; align-items: center; min-height: 44px; color: #d4d7d6; font-size: .8125rem; }
.story-start:hover { text-decoration: underline; text-underline-offset: 5px; }
.about-timeline { position: relative; isolation: isolate; list-style: none; margin: 0; padding: 0; }
/* The rail, beam, and markers share the same x origin, including across breakpoints. */
.about-timeline::before, .about-timeline::after { content: ''; position: absolute; top: 8px; bottom: 70px; left: 0; pointer-events: none; }
.about-timeline::before { width: 1px; background: var(--about-rule); transform: translateX(-50%); }
.about-timeline::after { width: 3px; background: linear-gradient(#eceeed 0%,#c7e3ed 96%,#c7e3ed00 100%); transform: translateX(-50%) scaleY(var(--timeline-progress,0)); transform-origin: top; }
.about-timeline:not(.is-enhanced)::after { display: none; }
.timeline-entry { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(260px,.85fr) minmax(0,1.35fr); gap: 54px; padding: 0 0 112px var(--timeline-gutter); scroll-margin-top: 56px; }
.milestone-aside { position: relative; }
.milestone-copy { position: sticky; top: 17svh; padding: 0 0 40px; }
.milestone-copy::before { content: ''; position: absolute; left: calc(-1 * var(--timeline-gutter)); top: 5px; width: 12px; height: 12px; transform: translateX(-50%); border: 1px solid #60676a; border-radius: 50%; background: #000; box-shadow: 0 0 0 7px #000; }
.is-reached .milestone-copy::before { background: #d9ebef; border-color: #d9ebef; }
.milestone-when { margin: 0 0 22px; color: var(--quiet); font-size: .8125rem; line-height: 1.65; }
.milestone-copy h2 { max-width: 400px; margin: 0 0 22px; font-size: clamp(2.25rem,3.65vw,3.25rem); line-height: 1.06; letter-spacing: -.05em; font-weight: 400; text-wrap: balance; }
.milestone-copy > p:last-child { max-width: 340px; margin: 0; color: #a5a6a8; font-size: .9375rem; line-height: 1.7; }
.milestone-copy .milestone-title--yc { display: flex; align-items: flex-start; gap: 12px; font-size: clamp(2rem,3.1vw,2.75rem); }
.milestone-title--yc img { flex: 0 0 auto; width: .86em; height: .86em; margin-top: .08em; }
.photo-stage { position: relative; min-width: 0; width: 100%; max-width: 660px; justify-self: end; isolation: isolate; }
.photo-frame { position: absolute; margin: 0; transform: translate3d(var(--photo-x,0px),var(--photo-y,0px),0) rotate(var(--photo-turn,var(--rest-turn,0deg))); transform-origin: center; }
.photo-surface { position: relative; display: block; border-radius: 5px; background: #171819; box-shadow: 0 18px 42px #0009; }
.photo-surface img { display: block; width: 100%; height: auto; border-radius: inherit; }
.photo-stage--openai { height: 620px; }
.photo-frame--openai-stage { --rest-turn: -3deg; width: 88%; top: 20px; left: 2%; }
.photo-frame--behind-scenes { --rest-turn: -6deg; z-index: 1; width: 36%; left: 6%; top: 280px; }
.photo-frame--openai-post { --rest-turn: 4deg; z-index: 2; width: 43%; right: 3%; top: 205px; }
.photo-stage--community { height: 620px; }
.photo-frame--community-post { --rest-turn: -3deg; width: 50%; left: 1%; top: 72px; }
.photo-frame--community-keyboard { --rest-turn: 3deg; z-index: 2; width: 49%; right: 1%; top: 10px; }
.photo-frame--community-keyboard .photo-surface { border: 1px solid #2b2e31; }
.photo-stage--yc { height: 630px; }
.photo-frame--yc-visit { --rest-turn: 3deg; width: 59%; right: 4%; top: 16px; }
.photo-frame--yc-demo { --rest-turn: -5deg; z-index: 2; width: 37%; left: 3%; top: 150px; }
.photo-stage--devices { height: 510px; }
.photo-frame--devices { --rest-turn: -2deg; width: 87%; left: 5%; top: 26px; }
.timeline-entry:last-child { padding-bottom: 32px; }
.about-next { position: relative; padding: 52px 0 0 var(--timeline-gutter); }
.about-next > p { margin: 0 0 26px; font-size: clamp(2.25rem,4.7vw,4rem); line-height: 1.07; letter-spacing: -.055em; }
.about-next > div { display: flex; align-items: center; gap: 28px; }
.about-next-primary { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 10px 26px; color: #000; background: var(--text); border-radius: 999px; font-size: .875rem; }
.about-next-primary:hover { background: #fff; }
.about-back { display: inline-flex; align-items: center; min-height: 44px; color: var(--quiet); font-size: .875rem; }
.about-footer { padding-block: 24px 36px; color: #94979c; font-size: .75rem; }
.about-footer .yc-backing { margin-block: 0; }
@media (hover:hover) and (pointer:fine) {
  .photo-surface { transition: transform 240ms ease, box-shadow 240ms ease; }
  .photo-frame:hover { z-index: 3; }
  .photo-frame:hover .photo-surface { transform: scale(1.045); box-shadow: 0 24px 52px #000b; }
}
@media (min-width:761px) and (max-width:1050px) {
  .about-story { padding-inline: 40px; }
  .about-intro { padding-bottom: 100px; }
  .timeline-entry { grid-template-columns: minmax(220px,.8fr) minmax(0,1.2fr); gap: 30px; }
  .milestone-copy h2 { font-size: 2.25rem; }
  .milestone-copy .milestone-title--yc { font-size: 2rem; }
  .photo-stage--openai { height: 460px; }
  .photo-frame--behind-scenes { top: 220px; }
  .photo-frame--openai-post { top: 130px; width: 46%; }
  .photo-stage--community { height: 440px; }
  .photo-stage--yc { height: 460px; }
  .photo-frame--yc-demo { top: 120px; }
  .photo-stage--devices { height: 320px; }
}
@media (max-width:760px) {
  .about-header, .about-footer { width: calc(100% - 40px); }
  .about-header { min-height: 84px; }
  .about-story { --timeline-gutter: 28px; padding: 36px 26px 64px; overflow-x: clip; }
  .about-intro { padding-bottom: 80px; }
  .about-label { margin-bottom: 22px; }
  .about-intro h1 { font-size: clamp(2.75rem,10.6vw,4.75rem); }
  .about-lead { margin-top: 24px; font-size: 1rem; line-height: 1.65; }
  .timeline-entry { grid-template-columns: minmax(0,1fr); gap: 24px; padding-bottom: 72px; scroll-margin-top: 30px; }
  .milestone-copy { position: relative; top: auto; padding: 0; }
  .milestone-when { margin-bottom: 18px; }
  .milestone-copy h2 { margin-bottom: 18px; font-size: 2.5rem; }
  .milestone-copy .milestone-title--yc { font-size: clamp(1.75rem,7.7vw,2.5rem); gap: 10px; }
  .milestone-copy > p:last-child { max-width: 500px; font-size: .9375rem; }
  .photo-stage { width: min(540px,100%); justify-self: center; margin-top: 20px; }
  .photo-stage--openai { height: clamp(420px,95vw,600px); }
  .photo-frame--openai-stage { width: 90%; left: 0; top: 8px; }
  .photo-frame--behind-scenes { width: 37%; left: 0; top: clamp(202px,46vw,300px); }
  .photo-frame--openai-post { width: 52%; right: 3%; top: clamp(110px,28vw,180px); }
  .photo-stage--community { height: clamp(350px,80vw,540px); }
  .photo-frame--community-post { width: 53%; left: 0; top: 68px; }
  .photo-frame--community-keyboard { width: 52%; right: 0; top: 0; }
  .photo-stage--yc { height: clamp(400px,95vw,610px); }
  .photo-frame--yc-visit { width: 65%; right: 3%; top: 0; }
  .photo-frame--yc-demo { width: 40%; left: 0; top: clamp(126px,34vw,220px); }
  .photo-stage--devices { height: clamp(270px,66vw,420px); }
  .photo-frame--devices { width: 87%; top: 18px; left: 4%; }
  .about-next { padding-top: 32px; }
  .about-next > p { font-size: clamp(2.1rem,8vw,3rem); }
  .about-next > div { gap: 24px; }
  .about-footer { font-size: .6875rem; }
}
@media (prefers-reduced-motion:reduce) {
  .photo-frame { transform: rotate(var(--rest-turn,0deg)); }
  .photo-surface, .photo-frame:hover .photo-surface { transform: none; transition: none; }
  .about-timeline::after { display: none; }
}