/* NxtAtlas — studio story. The shared tokens and motion system keep this page
   part of nxtatlas.com; this file only gives the story its own structure. */

.about-page{ background:var(--ink); }
.about-page::before{
  background:
    radial-gradient(70% 48% at 72% 3%, var(--brass-faint), transparent 70%),
    linear-gradient(180deg,var(--ink-raise),var(--ink) 38%);
}

.skip{
  position:fixed; left:16px; top:12px; z-index:100; translate:0 -160%;
  padding:9px 13px; border:1px solid var(--line-strong); border-radius:9px;
  background:var(--ink-card); color:var(--paper); text-decoration:none;
  transition:translate var(--fast) var(--ease);
}
.skip:focus{ translate:0 0; }

.about-head{
  position:fixed; inset:0 0 auto; z-index:30; padding-block:18px;
  border-bottom:1px solid transparent;
  transition:background var(--fast) ease,border-color var(--fast) ease;
}
.about-head.is-stuck{
  background:rgba(10,11,13,.84); border-bottom-color:var(--line);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
.about-head-in{ display:flex; align-items:center; justify-content:space-between; gap:24px; }
.about-brand{ display:inline-flex; align-items:center; gap:10px; text-decoration:none; }
.about-brand img{ display:block; border-radius:8px; transition:transform .5s var(--ease); }
.about-brand:hover img{ transform:rotate(-8deg) scale(1.06); }
.about-brand .wm{ font-size:13px; }
.about-nav{ display:flex; align-items:center; gap:clamp(14px,2.5vw,30px); }
.about-nav a{ font-size:14px; }
.about-status{ display:inline-flex; align-items:center; gap:8px; }
.about-status span{ width:6px; height:6px; border-radius:50%; background:var(--brass); box-shadow:0 0 0 4px var(--brass-faint); }

.about-hero{ min-height:100svh; display:flex; align-items:center; position:relative; overflow:hidden; padding-block:140px 88px; }
.about-hero-in{ position:relative; z-index:2; }
.about-hero h1{ max-width:930px; font-size:clamp(3.15rem,8.5vw,7.4rem); line-height:.96; letter-spacing:-.065em; }
.about-hero .eyebrow{ margin-bottom:30px; }
.about-hero .lede{ margin-top:34px; max-width:660px; font-size:clamp(17px,1.6vw,21px); }
.about-hero strong{ color:var(--paper); font-weight:500; }
.about-hero-cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:34px; }
.about-facts{ display:flex; flex-wrap:wrap; gap:clamp(30px,7vw,82px); margin:clamp(62px,9vh,92px) 0 0; padding-top:26px; border-top:1px solid var(--line); }
.about-facts div{ display:grid; gap:7px; }
.about-facts dt,.about-facts dd{ margin:0; }
.about-facts dd{ font-family:var(--display); font-size:clamp(1.1rem,2vw,1.35rem); color:var(--paper-soft); }

.about-orbit{ position:absolute; z-index:1; width:min(66vw,840px); aspect-ratio:1; right:-18vw; top:50%; translate:0 -49%; opacity:.42; pointer-events:none; }
.about-orbit::before,.about-orbit span{ content:""; position:absolute; inset:10%; border:1px solid var(--brass-soft); border-radius:50%; }
.about-orbit::before{ box-shadow:inset 0 0 90px var(--brass-faint),0 0 90px var(--brass-faint); }
.about-orbit span:nth-child(1){ transform:rotate(28deg) scaleY(.34); }
.about-orbit span:nth-child(2){ transform:rotate(-38deg) scaleY(.42); }
.about-orbit span:nth-child(3){ transform:rotate(76deg) scaleY(.28); }

.identity-grid{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(48px,10vw,140px); align-items:start; }
.identity h2{ margin-top:20px; }
.identity-copy{ display:grid; gap:28px; padding-top:42px; }
.identity-copy p{ padding-bottom:28px; border-bottom:1px solid var(--line); color:var(--paper-soft); font-size:clamp(16px,1.5vw,19px); line-height:1.75; }
.identity-copy strong{ color:var(--paper); font-weight:500; }

.history-head{ max-width:760px; }
.history-head h2{ margin-top:20px; }
.history-head .lede{ margin-top:22px; }
.timeline{ list-style:none; margin:clamp(50px,7vw,82px) 0 0; padding:0; border-top:1px solid var(--line); }
.timeline-entry{ position:relative; display:grid; grid-template-columns:120px minmax(0,1fr); gap:clamp(24px,5vw,72px); padding:34px 0; border-bottom:1px solid var(--line); }
.timeline-entry::before{ content:""; position:absolute; top:-4px; left:0; width:7px; height:7px; border-radius:50%; background:var(--paper-faint); }
.timeline-entry.is-current::before{ background:var(--brass); box-shadow:0 0 0 7px var(--brass-faint); }
.timeline-year{ font-family:var(--display); color:var(--brass); font-size:13px; letter-spacing:.12em; text-transform:uppercase; }
.timeline-entry h3{ margin:0 0 9px; }
.timeline-entry p{ color:var(--paper-dim); max-width:690px; line-height:1.72; }

.product-panel{ display:grid; grid-template-columns:110px minmax(0,1fr) minmax(180px,280px); gap:clamp(24px,4vw,54px); align-items:center; padding:clamp(26px,5vw,58px); border:1px solid var(--line-strong); border-radius:20px; background:linear-gradient(135deg,var(--brass-faint),transparent 46%),var(--ink-raise); text-decoration:none; }
.product-index{ align-self:start; color:var(--brass); }
.product-copy h2{ margin-top:18px; max-width:720px; }
.product-copy .lede{ margin-top:20px; }
.product-links{ display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }
.product-mark{ display:grid; place-items:center; }
.product-mark img{ width:100%; height:auto; display:block; border-radius:26%; filter:drop-shadow(0 28px 40px rgba(0,0,0,.38)); }

.principles h2{ margin-top:20px; }
.principle-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; margin-top:54px; background:var(--line); border-block:1px solid var(--line); }
.principle{ background:var(--ink); padding:32px clamp(20px,3vw,34px) 36px; }
.principle .lbl{ color:var(--brass); }
.principle h3{ margin:32px 0 12px; }
.principle p{ color:var(--paper-dim); line-height:1.7; }

.founder-grid{ display:grid; grid-template-columns:minmax(260px,430px) minmax(0,1fr); gap:clamp(48px,10vw,138px); align-items:center; }
.founder-avatar{ position:relative; }
.founder-avatar::before{ content:""; position:absolute; inset:-1px; border:1px solid var(--line-strong); border-radius:24px; pointer-events:none; }
.founder-avatar img{ width:100%; height:auto; display:block; border-radius:24px; }
.founder-copy h2{ margin-top:20px; font-size:clamp(2.8rem,7vw,6rem); }
.founder-copy .lede{ margin-top:24px; }
.founder-link{ margin-top:28px; }

.about-closing-in{ max-width:820px; }
.about-closing h2{ margin-top:20px; }
.about-closing-links{ display:flex; flex-wrap:wrap; gap:12px; margin-top:32px; }
.about-foot{ padding-block:32px 46px; }
.about-foot-in{ display:flex; justify-content:space-between; align-items:center; gap:20px; padding-top:26px; border-top:1px solid var(--line); }
.about-foot nav{ display:flex; flex-wrap:wrap; gap:22px; }

@media(max-width:820px){
  .about-nav a:not(.about-status){ display:none; }
  .identity-grid,.founder-grid{ grid-template-columns:1fr; }
  .identity-copy{ padding-top:0; }
  .product-panel{ grid-template-columns:1fr; }
  .product-mark{ display:none; }
  .principle-grid{ grid-template-columns:1fr; }
  .founder-avatar{ max-width:420px; }
}

@media(max-width:560px){
  .about-head{ padding-block:15px; }
  .about-brand .wm{ font-size:11px; }
  .about-hero{ min-height:auto; padding-block:128px 74px; }
  .about-hero h1{ font-size:clamp(3.05rem,16vw,4.75rem); }
  .about-hero .lede{ margin-top:26px; }
  .about-orbit{ width:112vw; right:-63vw; top:38%; opacity:.24; }
  .about-facts{ display:grid; grid-template-columns:1fr 1fr; }
  .timeline-entry{ grid-template-columns:1fr; gap:12px; }
  .product-panel{ padding:26px 22px; }
  .founder-avatar{ max-width:330px; }
  .about-foot-in{ align-items:flex-start; flex-direction:column; }
}

@media(prefers-reduced-motion:reduce){ .about-orbit{ opacity:.25; } }