/* ─────────────────────────────────────────────
   Félicette — archival dossier
   Bodoni Moda (display/text) + JetBrains Mono (machine)
   ───────────────────────────────────────────── */

:root{
  --paper:#EDE9E0;
  --paper-2:#E4DFD4;
  --ink:#16130F;
  --ink-70:rgba(22,19,15,.70);
  --ink-45:rgba(22,19,15,.45);
  --ink-22:rgba(22,19,15,.22);
  --ink-12:rgba(22,19,15,.12);
  --red:#A5322A;
  --night:#0B0A09;
  --night-tx:#DCD6C9;

  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --serif:"Bodoni Moda",Didot,"Times New Roman",serif;

  --pad:clamp(20px,5vw,88px);
  --ease:cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--serif);
  font-optical-sizing:auto;
  font-size:17px;
  line-height:1.62;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}

/* paper texture */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:1;
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(100% 80% at 50% 110%, rgba(120,105,80,.10), transparent 65%);
}
.grain{
  position:fixed;inset:-50%;width:200%;height:200%;
  pointer-events:none;z-index:2;opacity:.055;mix-blend-mode:multiply;
  animation:grain 6s steps(4) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)} 25%{transform:translate(-3%,2%)}
  50%{transform:translate(2%,-3%)} 75%{transform:translate(-2%,-2%)}
  100%{transform:translate(0,0)}
}

/* ── shared bits ───────────────────────── */
.kicker,.lab,.tel,.nav,.sec-no,.index,.ledger,.chart__lab,.chart__axis,.mq,.steps span,.btn,.ca,.cabig{
  font-family:var(--mono);
}
.kicker,.lab{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-45);font-weight:400;margin:0 0 clamp(24px,4vw,40px);
}
.kicker i{width:34px;height:1px;background:var(--ink-22);flex:none}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  height:44px;padding:0 22px;
  font-size:12px;letter-spacing:.13em;text-transform:uppercase;font-weight:500;
  text-decoration:none;border:1px solid var(--ink);
  transition:background .18s var(--ease),color .18s var(--ease),transform .18s var(--ease);
}
.btn--solid{background:var(--ink);color:var(--paper)}
.btn--solid:hover{background:var(--red);border-color:var(--red);transform:translateY(-2px)}
.btn--ghost:hover{background:var(--ink);color:var(--paper);transform:translateY(-2px)}

.sec-no{
  display:flex;align-items:baseline;gap:16px;
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-45);
  padding-bottom:14px;margin-bottom:clamp(40px,6vw,72px);
  border-bottom:1px solid var(--ink-12);
}
.sec-no span{
  font-size:11px;color:var(--red);font-weight:700;
}
.sec-no--inv{border-color:rgba(220,214,201,.18);color:rgba(220,214,201,.5)}
.sec-no--inv span{color:#C9705F}

.reveal{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ── nav ───────────────────────────────── */
.nav{
  position:sticky;top:0;z-index:60;
  display:flex;align-items:center;gap:24px;
  padding:0 var(--pad);height:60px;
  background:rgba(237,233,224,.82);
  backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid var(--ink-12);
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
}
.nav__mark{display:flex;align-items:center;gap:9px;text-decoration:none;font-weight:500}
.nav__mark img{width:17px;height:auto;opacity:.85}
.nav__links{display:flex;gap:26px;margin-left:auto;color:var(--ink-45)}
.nav__links a{text-decoration:none;transition:color .18s var(--ease)}
.nav__links a:hover{color:var(--ink)}
.nav__act{display:flex;align-items:center;gap:12px;margin-left:8px}
.nav .btn{height:32px;padding:0 16px;font-size:10.5px}

.ca{
  display:flex;align-items:center;gap:8px;position:relative;
  background:none;border:1px solid var(--ink-22);color:var(--ink-70);
  height:32px;padding:0 12px;font-size:10.5px;letter-spacing:.1em;
  cursor:pointer;transition:border-color .18s var(--ease),color .18s var(--ease);
}
.ca:hover{border-color:var(--ink);color:var(--ink)}
.ca__k{color:var(--red);font-weight:700}
.ca__s{position:absolute;inset:0;display:grid;place-items:center;
  background:var(--ink);color:var(--paper);opacity:0;transition:opacity .18s var(--ease)}
.ca.done .ca__s{opacity:1}
.ca.done .ca__s::after{content:"Copied"}

/* ── hero ──────────────────────────────── */
.hero{position:relative;padding:clamp(38px,5.2vw,68px) var(--pad) clamp(48px,7vw,88px);max-width:1560px;margin:0 auto}
.crop{position:absolute;width:16px;height:16px;pointer-events:none}
.crop--tl{top:22px;left:calc(var(--pad) - 22px);border-top:1px solid var(--ink-22);border-left:1px solid var(--ink-22)}
.crop--tr{top:22px;right:calc(var(--pad) - 22px);border-top:1px solid var(--ink-22);border-right:1px solid var(--ink-22)}

.hero .kicker{margin-bottom:clamp(18px,2.4vw,30px)}

.hero__title{
  margin:0;font-size:clamp(56px,18.4vw,268px);
  font-weight:600;line-height:.82;letter-spacing:-.045em;
  font-variation-settings:"opsz" 96;
  display:flex;justify-content:space-between;
  white-space:nowrap;
}
.hero__title.fit{visibility:visible}
.hero__title .mw{display:inline-block;white-space:nowrap}
.hero__title .l{
  display:inline-block;
  opacity:0;transform:translateY(.30em) rotate(1.5deg);
  animation:letter 1s var(--ease) forwards;
  animation-delay:calc(var(--i) * 52ms + 100ms);
}
@keyframes letter{to{opacity:1;transform:none}}

.hero__rule{
  display:flex;align-items:center;gap:14px;
  margin:clamp(18px,2.6vw,30px) 0 clamp(38px,5.2vw,68px);
}
.hero__rule span{height:1px;background:var(--ink-22);flex:1}
.hero__rule span:first-child{flex:.4}
.hero__rule em{
  font-family:var(--mono);font-style:normal;
  font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--red);flex:none;
}
.hero__rule em:last-of-type{color:var(--ink-45)}

.hero__grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,clamp(300px,32vw,440px));
  gap:clamp(32px,5vw,80px);align-items:start;
}
.hero__lede{
  margin:0;max-width:34ch;font-size:clamp(18px,1.62vw,23px);line-height:1.52;
}
.hero__lede b{font-weight:700}
.hero__sub{
  margin:clamp(22px,3vw,32px) 0 0;
  font-family:var(--mono);font-size:12.5px;line-height:1.9;
  color:var(--ink-45);letter-spacing:.02em;
}
.hero__cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:clamp(26px,3.4vw,38px)}

.hero__fig{margin:0}
.plate{
  position:relative;border:1px solid var(--ink-22);padding:9px;background:var(--paper-2);
  transition:transform .5s var(--ease);will-change:transform;
}
.plate img{filter:grayscale(1) contrast(1.04)}
.plate__stamp{
  position:absolute;right:-12px;bottom:24px;
  font-family:var(--mono);font-size:10px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--red);border:1.5px solid var(--red);padding:5px 11px;
  transform:rotate(-7deg);opacity:.72;background:rgba(237,233,224,.72);
}
.hero__fig figcaption,.plate figcaption{
  font-family:var(--mono);font-size:10.5px;line-height:1.7;
  color:var(--ink-45);margin-top:12px;max-width:42ch;letter-spacing:.01em;
}
.hero__fig figcaption b,.plate figcaption b{color:var(--ink-70);font-weight:500}

/* ── telemetry ─────────────────────────── */
.tel{
  border-top:1px solid var(--ink-12);border-bottom:1px solid var(--ink-12);
  background:var(--paper-2);
}
.tel__wrap{
  display:flex;align-items:center;gap:20px;
  padding:0 var(--pad);max-width:1440px;margin:0 auto;min-height:62px;
  overflow-x:auto;scrollbar-width:none;
}
.tel__wrap::-webkit-scrollbar{display:none}
.tel__dot{
  width:6px;height:6px;border-radius:50%;background:var(--ink-22);flex:none;
  transition:background .3s var(--ease);
}
.tel__dot.on{background:var(--red);animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(165,50,42,.5)}50%{box-shadow:0 0 0 6px rgba(165,50,42,0)}}

.tel__list{display:flex;gap:clamp(20px,3.4vw,52px);margin:0;flex:1}
.tel__list div{display:flex;align-items:baseline;gap:10px;white-space:nowrap}
.tel__list dt{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-45)}
.tel__list dd{margin:0;font-size:13px;font-weight:500;font-variant-numeric:tabular-nums}
.tel__list dd.up{color:#3F6B3A}
.tel__list dd.down{color:var(--red)}
.tel__src{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-22);white-space:nowrap}

/* ── record ────────────────────────────── */
.record{padding:clamp(72px,10vw,140px) var(--pad);max-width:1440px;margin:0 auto}
.record__grid{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(40px,6vw,96px);align-items:start;
}
.record__body p{margin:0 0 1.3em;max-width:58ch;font-size:clamp(17px,1.35vw,19px)}
.record__body b{font-weight:700}
.dc::first-letter{
  float:left;font-size:5.1em;line-height:.78;font-weight:700;
  margin:.06em .09em 0 -.03em;color:var(--red);
}
.record__kick{
  border-left:2px solid var(--red);padding-left:22px;margin-top:2em !important;
  font-style:italic;font-size:clamp(19px,1.7vw,24px) !important;line-height:1.42;
}

.record__side{position:sticky;top:96px;display:flex;flex-direction:column;gap:32px}
.plate--sm{margin:0}
.plate--sm img{filter:grayscale(1) contrast(1.06)}

.index,.ledger{margin:0;font-size:11.5px}
.index div,.ledger div{
  display:flex;align-items:baseline;gap:8px;
  padding:9px 0;border-bottom:1px solid var(--ink-12);
}
.index div:first-child,.ledger div:first-child{border-top:1px solid var(--ink-12)}
.index dt,.ledger dt{
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-45);font-size:10px;flex:none;
}
.index dt::after,.ledger dt::after{content:""}
.index div::after,.ledger div::after{
  content:"";flex:1;border-bottom:1px dotted var(--ink-22);transform:translateY(-3px);
}
.index dd,.ledger dd{margin:0;order:3;font-weight:500;font-variant-numeric:tabular-nums}

/* ── flight (inverted) ─────────────────── */
.flight{
  position:relative;background:var(--night);color:var(--night-tx);
  padding:clamp(72px,10vw,140px) var(--pad);overflow:hidden;
}
.stars{position:absolute;inset:0;width:100%;height:100%;opacity:.55}
.flight__inner{position:relative;max-width:1180px;margin:0 auto}
.flight__h{
  font-size:clamp(27px,4.1vw,55px);font-weight:500;line-height:1.14;
  letter-spacing:-.025em;margin:0 0 clamp(54px,8vw,96px);
}

.chart{position:relative}
.chart__plot{position:relative}
.chart__svg{width:100%;height:clamp(190px,25vw,320px);display:block;overflow:visible}
.ax{stroke:rgba(220,214,201,.30);stroke-width:1;vector-effect:non-scaling-stroke}
.karman{stroke:rgba(220,214,201,.18);stroke-width:1;stroke-dasharray:2 8;vector-effect:non-scaling-stroke}
.traj{
  fill:none;stroke:#C9705F;stroke-width:1.7;
  stroke-linecap:round;
  stroke-dasharray:var(--len);stroke-dashoffset:var(--len);
}
.chart.in .traj{transition:stroke-dashoffset 2.8s cubic-bezier(.30,.05,.2,1);stroke-dashoffset:0}
.apo{fill:#C9705F;opacity:0}
.chart.in .apo{opacity:1;animation:apo 2.6s ease-in-out 2s infinite}
@keyframes apo{0%,100%{r:4}50%{r:8}}

.chart__lab{
  position:absolute;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.16em;text-transform:uppercase;color:rgba(220,214,201,.42);
  white-space:nowrap;pointer-events:none;
}
.chart__lab--karman{left:0;top:37.8%;transform:translateY(-150%)}
.chart__lab--apo{left:42%;top:8.9%;transform:translate(-50%,-165%);color:#C9705F;opacity:.85}

.chart__axis{position:relative;height:54px;margin-top:2px}
.chart__axis span{
  position:absolute;left:var(--x);top:0;padding-top:12px;
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  color:rgba(220,214,201,.62);white-space:nowrap;
}
.chart__axis span::before{
  content:"";position:absolute;top:0;left:0;width:1px;height:7px;
  background:rgba(220,214,201,.34);
}
.chart__axis span em{
  display:block;font-style:normal;font-size:9px;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(220,214,201,.34);margin-top:5px;
}
.chart__axis span:nth-child(2),.chart__axis span:nth-child(3){transform:translateX(-50%)}
.chart__axis span:nth-child(2)::before,.chart__axis span:nth-child(3)::before{left:50%}
.chart__axis span:last-child{transform:translateX(-100%);text-align:right}
.chart__axis span:last-child::before{left:auto;right:0}

.flight__note{
  margin:clamp(48px,6vw,72px) 0 0;max-width:52ch;
  font-size:clamp(16px,1.3vw,19px);line-height:1.62;color:rgba(220,214,201,.72);
}

/* ── manifest ──────────────────────────── */
.manifest{padding:clamp(72px,10vw,140px) var(--pad);max-width:1440px;margin:0 auto}
.manifest__grid{
  display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  gap:clamp(40px,6vw,88px);align-items:start;
}
.lab{margin-bottom:14px}
.cabig{
  display:block;width:100%;text-align:left;position:relative;
  background:var(--paper-2);border:1px solid var(--ink-22);
  padding:22px 24px;cursor:pointer;
  transition:border-color .2s var(--ease),background .2s var(--ease);
}
.cabig:hover{border-color:var(--ink)}
.cabig code{
  display:block;font-family:var(--mono);font-size:clamp(11px,1.5vw,17px);
  letter-spacing:.01em;word-break:break-all;line-height:1.5;
}
.cabig__s{
  position:absolute;top:0;right:0;
  background:var(--ink);color:var(--paper);
  font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;padding:5px 11px;
}
.cabig.done .cabig__s{background:var(--red)}
.manifest__links{display:flex;gap:22px;flex-wrap:wrap;margin-top:22px;
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.manifest__links a{color:var(--ink-45);text-decoration:none;transition:color .18s var(--ease)}
.manifest__links a:hover{color:var(--red)}

.steps{
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,48px);
  margin-top:clamp(56px,8vw,96px);padding-top:clamp(32px,4vw,48px);
  border-top:1px solid var(--ink-12);
}
.steps div{display:flex;gap:16px;align-items:flex-start}
.steps span{
  font-size:11px;letter-spacing:.1em;color:var(--red);font-weight:700;
  padding-top:5px;flex:none;min-width:22px;
}
.steps p{margin:0;font-size:15.5px;line-height:1.6;color:var(--ink-70)}

/* ── marquee ───────────────────────────── */
.mq{
  border-top:1px solid var(--ink-12);border-bottom:1px solid var(--ink-12);
  background:var(--paper-2);overflow:hidden;padding:14px 0;
}
.mq__t{
  display:flex;gap:36px;white-space:nowrap;width:max-content;
  animation:mq 34s linear infinite;
  font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-45);
}
.mq__t i{color:var(--red);font-style:normal}
@keyframes mq{to{transform:translateX(-50%)}}

/* ── footer ────────────────────────────── */
.foot{
  padding:clamp(64px,9vw,120px) var(--pad) clamp(40px,5vw,64px);
  text-align:center;max-width:900px;margin:0 auto;
}
.foot__script{width:min(360px,72vw);margin:0 auto;opacity:.9}
.foot__fr{
  margin:6px 0 0;font-style:italic;font-size:19px;color:var(--ink-45);
}
.foot__nav{
  display:flex;justify-content:center;gap:28px;flex-wrap:wrap;
  margin:clamp(36px,5vw,56px) 0 0;
  font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;
}
.foot__nav a{text-decoration:none;color:var(--ink-70);transition:color .18s var(--ease)}
.foot__nav a:hover{color:var(--red)}
.foot__dis{
  margin:clamp(36px,5vw,56px) auto 0;max-width:62ch;
  font-family:var(--mono);font-size:10px;line-height:1.85;color:var(--ink-22);
  letter-spacing:.02em;
}

/* ── responsive ────────────────────────── */
@media (max-width:1080px){
  .nav__links{display:none}
  .hero__grid{grid-template-columns:1fr;gap:clamp(36px,6vw,56px)}
  .hero__fig{max-width:520px}
  .record__grid,.manifest__grid{grid-template-columns:1fr}
  .record__side{position:static;max-width:520px}
  .steps{grid-template-columns:1fr;gap:20px}
}
@media (max-width:720px){
  body{font-size:16px}
  .nav{gap:12px;padding:0 16px}
  .ca__v{display:none}
  .chart__axis span:nth-child(2),.chart__axis span:nth-child(3){display:none}
  .chart__lab--apo{font-size:9px}
  .plate__stamp{right:auto;left:10px;bottom:20px;font-size:9px;padding:4px 9px}
  .dc::first-letter{font-size:4em}
}
@media (max-width:400px){
  .nav__act .btn{padding:0 12px}
  .tel__list{gap:18px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  html{scroll-behavior:auto}
  .hero__title.fit{visibility:visible}
.hero__title .mw{display:inline-block;white-space:nowrap}
.hero__title .l{opacity:1;transform:none}
  .reveal{opacity:1;transform:none}
  .traj{stroke-dashoffset:0 !important}
  .apo{opacity:1}
}