/* ==========================================================================
   ORION ARM — English edition
   Direction: editorial mission dossier — ivory on ink, one gold accent
   ========================================================================== */

@font-face{
  font-family:'Newsreader';
  src:url('fonts/newsreader-latin.woff2') format('woff2');
  font-weight:200 700;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Newsreader';
  src:url('fonts/newsreader-italic-latin.woff2') format('woff2');
  font-weight:200 500;
  font-style:italic;
  font-display:swap;
}
@font-face{
  font-family:'Archivo';
  src:url('fonts/archivo-var-latin.woff2') format('woff2');
  font-weight:400 900;
  font-stretch:62% 125%;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Plex Mono';
  src:url('fonts/plexmono-400-latin.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
}

:root{
  --ink:#0a0a09;
  --ink-2:#0f0f0e;
  --ivory:#f2ede3;
  --ivory-2:#b6b0a3;
  --ivory-3:#8a8478;
  --gold:#c2a265;
  --gold-soft:rgba(194,162,101,.12);
  --rule:rgba(242,237,227,.14);
  --rule-soft:rgba(242,237,227,.08);

  --serif:'Newsreader','Iowan Old Style','Palatino',Georgia,serif;
  --sans:'Archivo','Helvetica Neue',Arial,sans-serif;
  --mono:'Plex Mono',ui-monospace,monospace;

  --pad:clamp(22px,6vw,96px);
  --ease:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}
body{
  margin:0;background:var(--ink);color:var(--ivory);
  font-family:var(--sans);font-size:17px;line-height:1.72;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body::after{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:90;
  background-image:url('assets/img/grain.webp');
  background-size:320px 320px;
  opacity:.045;mix-blend-mode:overlay;
}
img{display:block;max-width:100%;height:auto}
h1,h2,h3,p,ol,ul,dl,dd,figure{margin:0}
ol,ul{padding:0;list-style:none}
a{color:inherit}
em{font-style:italic}
::selection{background:var(--gold);color:#0a0a09}
:focus-visible{outline:1px solid var(--gold);outline-offset:4px}

.sr,.skip{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip:focus{position:fixed;top:10px;left:10px;z-index:200;width:auto;height:auto;clip-path:none;background:var(--ivory);color:var(--ink);padding:8px 14px;font-size:14px}

.micro{
  font-family:var(--mono);
  font-size:11px;line-height:1.6;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--ivory-3);
}

.wrap{max-width:1360px;margin:0 auto;padding-inline:var(--pad)}

/* ── bar ──────────────────────────────────────────────────── */
.bar{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  gap:32px;
  padding:22px var(--pad);
  border-bottom:1px solid transparent;
  transition:background 400ms var(--ease),border-color 400ms var(--ease),padding 400ms var(--ease);
}
.bar.is-scrolled{
  background:rgba(10,10,9,.86);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom-color:var(--rule);
  padding-block:14px;
}
.mark{
  font-family:var(--serif);font-weight:400;font-size:17px;
  letter-spacing:.22em;text-transform:uppercase;text-decoration:none;
}
.links{display:flex;align-items:center;gap:clamp(18px,2.4vw,38px)}
.links a{
  position:relative;text-decoration:none;
  font-size:13px;letter-spacing:.06em;color:var(--ivory-2);
  transition:color 300ms var(--ease);
}
.links a::after{
  content:'';position:absolute;left:0;right:0;bottom:-4px;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:0 50%;
  transition:transform 400ms var(--ease);
}
.links a:hover,.links a:focus-visible{color:var(--ivory)}
.links a:hover::after,.links a:focus-visible::after{transform:scaleX(1)}
.links .lang{color:var(--gold);letter-spacing:.02em}

/* ── hero ─────────────────────────────────────────────────── */
.hero{height:156svh;position:relative}
.hero-stage{
  position:sticky;top:0;height:100svh;overflow:hidden;
  display:flex;align-items:flex-end;
}
.hero-media{position:absolute;inset:0}
.hero-media img{
  width:100%;height:100%;object-fit:cover;
  object-position:58% 42%;
  filter:saturate(.82) contrast(1.04) brightness(.92);
  will-change:transform;
}
.hero-scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(to top,rgba(10,10,9,.96) 0%,rgba(10,10,9,.72) 26%,rgba(10,10,9,.18) 58%,rgba(10,10,9,.42) 100%),
    radial-gradient(120% 90% at 78% 18%,rgba(10,10,9,0) 40%,rgba(10,10,9,.55) 100%);
}
.hero-body{
  position:relative;z-index:2;
  width:100%;max-width:1360px;margin:0 auto;
  padding:0 var(--pad) clamp(96px,14vh,148px);
}
.kicker{color:var(--ivory-2);margin-bottom:clamp(20px,3vh,34px);letter-spacing:.2em}
.hero-title{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(46px,8.4vw,142px);
  line-height:.94;letter-spacing:-.026em;
  font-variation-settings:'opsz' 72;
  max-width:16ch;
}
.hero-title span{display:block;overflow:hidden}
.hero-title span > *{display:inline-block}
.hero-title em{color:var(--gold);font-style:italic}
.hero-stand{
  margin-top:clamp(24px,3.6vh,40px);
  font-size:clamp(15px,1.15vw,19px);line-height:1.65;
  color:var(--ivory-2);max-width:52ch;
}
.hero-foot{
  position:absolute;left:0;right:0;bottom:0;z-index:3;
  display:flex;justify-content:space-between;gap:24px;
  max-width:1360px;margin:0 auto;padding:0 var(--pad) 26px;
}

/* ── chapters ─────────────────────────────────────────────── */
.chapter{
  padding-block:clamp(92px,12vw,180px);
  border-top:1px solid var(--rule-soft);
}
.rule-line{
  display:flex;justify-content:space-between;align-items:baseline;gap:24px;
  padding-bottom:16px;margin-bottom:clamp(44px,7vw,104px);
  border-bottom:1px solid var(--rule);
  color:var(--ivory-2);
}

.statement{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(44px,7vw,104px);
  line-height:1.0;letter-spacing:-.024em;
  font-variation-settings:'opsz' 72;
  margin-bottom:clamp(48px,6vw,96px);
}
.prose{
  margin-left:auto;max-width:840px;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(28px,4vw,56px);
}
.prose p{font-size:16px;line-height:1.75;color:var(--ivory-2)}
.lede{
  font-family:var(--serif);font-weight:400;
  text-wrap:pretty;
  font-size:clamp(19px,1.5vw,24px) !important;
  line-height:1.5 !important;color:var(--ivory) !important;
  letter-spacing:-.005em;
}
.endnote{
  margin-top:clamp(44px,6vw,80px);
  color:var(--gold);
  padding-top:16px;border-top:1px solid var(--rule);
  max-width:340px;
}

.head{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(30px,4.4vw,66px);
  line-height:1.08;letter-spacing:-.02em;
  font-variation-settings:'opsz' 60;
  margin-bottom:clamp(48px,6vw,96px);
}

/* ── machine ──────────────────────────────────────────────── */
.machine{
  display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1fr);
  gap:clamp(36px,6vw,104px);
  align-items:start;
}
.machine-fig{position:sticky;top:14vh}
.cut{
  position:relative;
  display:grid;place-items:center;
  padding:24px 0 12px;
}
.cut::before{
  content:'';position:absolute;z-index:-1;
  width:74%;height:64%;left:13%;top:18%;
  background:radial-gradient(closest-side,rgba(194,162,101,.20),rgba(194,162,101,0) 72%);
  filter:blur(6px);
}
.cut img{width:78%;filter:drop-shadow(0 30px 60px rgba(0,0,0,.75))}
.machine-fig figcaption{margin-top:18px;padding-top:12px;border-top:1px solid var(--rule-soft)}

.sheet{padding-top:6px}
.spec{border-top:1px solid var(--rule);margin:0}
.spec > div{
  display:grid;grid-template-columns:minmax(0,.42fr) minmax(0,1fr);
  gap:24px;padding:18px 0;
  border-bottom:1px solid var(--rule);
}
.spec dt{
  font-family:var(--mono);font-size:11px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--gold);padding-top:4px;
}
.spec dd{
  margin:0;font-family:var(--serif);font-size:clamp(18px,1.5vw,22px);
  line-height:1.4;color:var(--ivory);
}
.sheet-note{
  margin-top:32px;font-size:15.5px;line-height:1.75;
  color:var(--ivory-2);max-width:46ch;
}

.plate{
  margin-top:clamp(72px,9vw,132px);
  width:min(100%,720px);
  margin-left:auto;
}
.plate img{
  width:100%;aspect-ratio:865/682;object-fit:cover;
  filter:saturate(.88) contrast(1.05);
}
.plate figcaption{
  margin-top:14px;padding-top:12px;
  border-top:1px solid var(--rule-soft);
}

/* ── plan ─────────────────────────────────────────────────── */
.plan-wrap{
  display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1fr);
  gap:clamp(36px,6vw,110px);
  align-items:start;
}
.plan-rail{position:sticky;top:16vh}
.plan-rail .rule-line{margin-bottom:40px}
.plan-year{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(56px,7.4vw,124px);
  line-height:.95;letter-spacing:-.03em;
  font-variation-settings:'opsz' 72;
  font-variant-numeric:tabular-nums;
  min-height:1.1em;
}
.plan-meter{position:relative;height:1px;background:var(--rule);margin-top:36px;width:74%}
.plan-meter span{
  position:absolute;left:0;top:0;height:1px;width:20%;
  background:var(--gold);
  transition:width 500ms var(--ease);
}

.stages{border-top:1px solid var(--rule)}
.stage{
  padding:clamp(26px,3vw,40px) 0 clamp(26px,3vw,38px);
  border-bottom:1px solid var(--rule);
}
.stage-l{
  color:var(--ivory-3);margin-bottom:14px;
  transition:color 600ms var(--ease);
}
.stage-l::before{
  content:'';display:inline-block;vertical-align:middle;
  width:0;height:1px;background:var(--gold);margin-right:0;
  transition:width 600ms var(--ease),margin-right 600ms var(--ease);
}
.stage.is-on .stage-l{color:var(--gold)}
.stage.is-on .stage-l::before{width:14px;margin-right:10px}
.stage h3{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(24px,2.4vw,36px);
  line-height:1.15;letter-spacing:-.015em;margin-bottom:12px;
  color:var(--ivory-2);transition:color 600ms var(--ease);
}
.stage.is-on h3{color:var(--ivory)}
.stage p:last-child{font-size:15.5px;line-height:1.7;color:var(--ivory-3);max-width:46ch;transition:color 600ms var(--ease)}
.stage.is-on p:last-child{color:var(--ivory-2)}

/* ── capability ───────────────────────────────────────────── */
.caps{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(24px,3.4vw,56px);
}
.caps article{border-top:1px solid var(--rule);padding-top:22px}
.cap-n{color:var(--gold);margin-bottom:clamp(28px,4vw,56px)}
.caps h3{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(20px,1.9vw,28px);line-height:1.2;
  letter-spacing:-.01em;margin-bottom:14px;
}
.caps p:last-child{font-size:15px;line-height:1.72;color:var(--ivory-2);max-width:34ch}

.band{
  position:relative;
  width:100%;
  margin-top:clamp(72px,9vw,140px);
}
.band img{
  width:100%;height:clamp(320px,68vh,720px);object-fit:cover;
  filter:grayscale(.35) contrast(1.1) brightness(.92);
}
.band::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(to top,rgba(10,10,9,.85),rgba(10,10,9,.12) 55%);
}
.band figcaption{
  position:absolute;z-index:2;left:var(--pad);right:var(--pad);bottom:24px;
  display:flex;justify-content:flex-end;
}

/* ── record ───────────────────────────────────────────────── */
.record{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:clamp(36px,6vw,100px);
}
.record-claim .lede{font-size:clamp(21px,2.1vw,32px) !important;line-height:1.42 !important}
.record-claim em{color:var(--gold);font-style:italic}
.record-list li{
  border-top:1px solid var(--rule);
  padding:18px 0 24px;
  display:grid;grid-template-columns:minmax(0,.5fr) minmax(0,1fr);gap:24px;
}
.record-list li span{padding-top:3px;color:var(--ivory-3)}
.record-list li p{font-size:15px;line-height:1.7;color:var(--ivory-2)}

/* ── contact ──────────────────────────────────────────────── */
.contact-title{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(34px,5.2vw,82px);
  line-height:1.04;letter-spacing:-.025em;
  font-variation-settings:'opsz' 72;
  margin-bottom:clamp(48px,6vw,92px);
}
.contact-grid{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:clamp(36px,6vw,100px);align-items:start;
}
.contact-list li{
  display:grid;grid-template-columns:minmax(0,.34fr) minmax(0,1fr);gap:24px;
  padding:18px 0;border-top:1px solid var(--rule);
}
.contact-list li:last-child{border-bottom:1px solid var(--rule)}
.contact-list p{font-size:15px;color:var(--ivory-2)}
.contact-list span{padding-top:3px}
.contact-act{display:flex;flex-direction:column;gap:16px;align-items:flex-start;padding-top:6px}
.cta{
  display:inline-flex;align-items:center;gap:16px;
  padding:17px 26px;
  border:1px solid var(--ivory);
  color:var(--ivory);text-decoration:none;
  font-size:14px;letter-spacing:.06em;
  transition:background 320ms var(--ease),color 320ms var(--ease),border-color 320ms var(--ease);
}
.cta svg{transition:transform 380ms var(--ease)}
.cta:hover{background:var(--ivory);color:var(--ink)}
.cta:hover svg{transform:translate(2px,-2px)}
.cta:active{transform:scale(.99)}

.foot{border-top:1px solid var(--rule);padding-block:34px}
.foot-in{display:flex;justify-content:space-between;align-items:baseline;gap:24px;flex-wrap:wrap}
.foot-mark{
  font-family:var(--serif);font-size:15px;letter-spacing:.22em;
  text-transform:uppercase;
}
.foot a{color:var(--gold);text-decoration:none}
.foot a:hover{text-decoration:underline}


/* ── reveal states (IntersectionObserver adds .is-in) ─────── */
.js :where(.rule-line,.statement,.head,.contact-title,.prose,.sheet,.caps article,.record-claim,.record-list li,.contact-list li,.contact-act,.machine-fig figcaption){
  opacity:0;transform:translateY(22px);
  transition:opacity .95s var(--ease),transform .95s var(--ease);
}
.is-in:where(.rule-line,.statement,.head,.contact-title,.prose,.sheet,.caps article,.record-claim,.record-list li,.contact-list li,.contact-act,.machine-fig figcaption){
  opacity:1;transform:none;
}
@media (min-width:821px){
  .js :where(.cut img,.plate img,.band img){
    clip-path:inset(0 0 100% 0);
    transition:clip-path 1.15s var(--ease);
  }
  .is-in:where(.cut img,.plate img,.band img){clip-path:inset(0 0 0% 0)}
}

/* ── responsive ───────────────────────────────────────────── */
@media (max-width:1024px){
  .machine{grid-template-columns:1fr;gap:40px}
  .machine-fig{position:static}
  .cut img{width:min(72%,420px)}
  .plan-wrap{grid-template-columns:1fr;gap:40px}
  .plan-rail{position:static;display:flex;align-items:baseline;gap:24px;flex-wrap:wrap}
  .plan-rail .rule-line{width:100%;margin-bottom:8px}
  .plan-year{min-height:0}
  .plan-meter{flex:1;min-width:120px;margin-top:0;width:auto}
  .record{grid-template-columns:1fr;gap:40px}
  .contact-grid{grid-template-columns:1fr;gap:40px}
}

@media (max-width:820px){
  .links a:not(.lang){display:none}
  .hero{height:150svh}
  .hero-title{font-size:clamp(42px,11.5vw,72px)}
  .hero-stand{max-width:none}
  .hero-foot{flex-direction:column;gap:4px;padding-bottom:18px}
  .hero-body{padding-bottom:clamp(110px,20vh,150px)}
  .prose{grid-template-columns:1fr;gap:18px}
  .statement{font-size:clamp(38px,11vw,64px)}
  .caps{grid-template-columns:1fr;gap:0}
  .caps article{padding:22px 0 26px}
  .cap-n{margin-bottom:18px}
  .spec > div{grid-template-columns:1fr;gap:6px}
  .record-list li{grid-template-columns:1fr;gap:6px}
  .contact-list li{grid-template-columns:1fr;gap:6px}
  .plate figcaption{text-align:left}
  .band figcaption{justify-content:flex-start}
  .foot-in{flex-direction:column;gap:8px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
}