/* ═══════════════════════════════════════════════════════════
   NECTUS · ethos.css
   A story told in six acts. Pinned scenes, scrubbed type,
   the mark performing behind the glass.
   ═══════════════════════════════════════════════════════════ */

/* ── act indicator ────────────────────────────────────────── */
.actbar{
  position:fixed;left:50%;transform:translateX(-50%);bottom:22px;z-index:22;
  display:flex;align-items:center;gap:14px;padding:9px 18px;
  background:rgba(7,8,10,.72);border:1px solid var(--hair);backdrop-filter:blur(10px);
}
.actbar-n{font-family:var(--mono);font-size:0.75rem;letter-spacing:.26em;text-transform:uppercase;color:var(--iron);font-variant-numeric:tabular-nums;white-space:nowrap}
.actbar-t{font-family:var(--disp);font-weight:500;font-size:1rem;letter-spacing:.06em;text-transform:uppercase;color:var(--platinum);white-space:nowrap}
.actbar-b{width:64px;height:1px;background:var(--hair);position:relative;overflow:hidden}
.actbar-b i{position:absolute;inset:0 100% 0 0;background:var(--platinum);transition:right .6s var(--ease)}
@media (max-width:640px){.actbar{display:none}}

/* ── shared act frame ─────────────────────────────────────── */
.act{position:relative;z-index:3;min-height:100svh;display:flex;align-items:center;padding:clamp(120px,15vh,180px) var(--gut)}
.act-in{max-width:1360px;margin:0 auto;width:100%}
.act.dim{background:linear-gradient(180deg,rgba(7,8,10,0),rgba(7,8,10,.86) 14%,rgba(7,8,10,.9) 50%,rgba(7,8,10,.86) 86%,rgba(7,8,10,0))}
.act-hd{display:flex;align-items:baseline;gap:18px;margin-bottom:clamp(26px,4vh,48px);flex-wrap:wrap}
.act-num{font-family:var(--disp);font-weight:900;font-size:clamp(2.4rem,5vw,4.2rem);line-height:.8;color:transparent;-webkit-text-stroke:1px var(--iron)}

/* ── ACT 0 · cold open ────────────────────────────────────── */
.open0{position:relative;min-height:118svh;display:grid;place-items:center;padding:0;z-index:auto}
.open0-type{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;text-align:center}
.open0-back{z-index:1}
.open0-front{z-index:3}
.open0-back .h-xl{transform:translateY(-.36em)}
.open0-front .h-xl{transform:translateY(.44em)}
.open0-foot{
  position:absolute;z-index:3;left:var(--gut);right:var(--gut);bottom:clamp(64px,10vh,110px);
  display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap;
}
.open0-foot p{max-width:38ch;font-size:.97rem;line-height:1.8;color:var(--mercury)}
.open0-foot b{color:var(--platinum);font-weight:500}

/* ── ACT I · the observation ──────────────────────────────── */
.obs{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(30px,6vw,90px);align-items:center}
@media (max-width:900px){.obs{grid-template-columns:1fr}}
.obs-lines{display:flex;flex-direction:column;gap:clamp(18px,2.6vh,30px)}
.obs-line{font-family:var(--disp);font-weight:500;font-size:clamp(1.5rem,2.9vw,2.6rem);line-height:1.06;text-transform:uppercase;color:var(--iron);transition:color .6s var(--ease)}
.obs-line.lit{color:var(--platinum)}
.obs-line em{font-style:normal;color:var(--platinum)}
.stamp{
  border:1px solid var(--hair);background:rgba(12,14,17,.7);padding:clamp(22px,2.6vw,34px);
  display:flex;flex-direction:column;gap:14px;
}
.stamp-yr{font-family:var(--disp);font-weight:900;font-size:clamp(4rem,9vw,7.5rem);line-height:.78;color:transparent;-webkit-text-stroke:1px var(--iron);font-variant-numeric:tabular-nums}
.stamp-l{font-family:var(--mono);font-size:0.78rem;letter-spacing:.24em;text-transform:uppercase;color:var(--iron);line-height:2}

/* ── ACT II · the number ──────────────────────────────────── */
.num-wrap{display:flex;flex-direction:column;align-items:center;text-align:center;gap:clamp(20px,3vh,38px)}
.num-big{
  font-family:var(--disp);font-weight:900;font-size:clamp(8rem,30vw,26rem);line-height:.72;
  font-variant-numeric:tabular-nums;letter-spacing:-.03em;
}
.num-copy{max-width:56ch;font-size:1.02rem;line-height:1.85;color:var(--mercury);text-align:left}
.num-copy strong{color:var(--platinum);font-weight:500}
.num-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--hair-2);border:1px solid var(--hair-2);width:100%;margin-top:12px}
.num-cell{background:rgba(12,14,17,.86);padding:20px;text-align:left}
.num-cell b{display:block;font-family:var(--disp);font-weight:700;font-size:2rem;line-height:.9;color:var(--platinum);font-variant-numeric:tabular-nums}
.num-cell span{display:block;font-family:var(--mono);font-size:0.73rem;letter-spacing:.2em;text-transform:uppercase;color:var(--iron);margin-top:9px}

/* ── ACT III · the refusals ───────────────────────────────── */
.ref-grid{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1fr);gap:clamp(30px,6vw,80px);align-items:start}
@media (max-width:900px){.ref-grid{grid-template-columns:1fr}}
.ref-list{list-style:none;border-top:1px solid var(--hair)}
.ref-list li{
  position:relative;padding:clamp(14px,2vh,22px) 0;border-bottom:1px solid var(--hair-2);
  font-family:var(--disp);font-weight:500;font-size:clamp(1.4rem,2.6vw,2.3rem);line-height:1.05;
  text-transform:uppercase;color:var(--mercury);transition:color .5s var(--ease);
  display:flex;align-items:baseline;gap:16px;
}
.ref-list li::after{
  content:'';position:absolute;left:0;right:0;top:50%;height:1px;background:var(--deny);
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform .75s var(--ease);
}
.ref-list li.struck::after{transform:scaleX(1)}
.ref-list li.out{color:var(--steel)}
.ref-n{font-family:var(--mono);font-size:0.75rem;letter-spacing:.2em;color:var(--iron);flex:0 0 auto;position:relative;top:-.35em}

/* ── ACT IV · the making ──────────────────────────────────── */
.make-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,6vw,80px);align-items:start}
@media (max-width:900px){.make-grid{grid-template-columns:1fr}}
.make-figs{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--hair-2);border:1px solid var(--hair-2);margin-top:36px}
.make-fig{background:rgba(12,14,17,.86);padding:22px;display:flex;flex-direction:column;gap:8px;min-height:150px;justify-content:flex-end;position:relative;overflow:hidden}
.make-fig b{font-family:var(--disp);font-weight:700;font-size:1.7rem;line-height:1;color:var(--platinum)}
.make-fig span{font-family:var(--mono);font-size:0.73rem;letter-spacing:.2em;text-transform:uppercase;color:var(--iron)}
.make-fig i{position:absolute;top:16px;right:18px;font-family:var(--mono);font-style:normal;font-size:0.7rem;letter-spacing:.2em;color:var(--steel)}

/* ── ACT V · the four laws (pinned stack) ─────────────────── */
.laws{position:relative;z-index:3;height:100svh;overflow:hidden;display:flex;align-items:center}
.laws-in{max-width:1360px;margin:0 auto;width:100%;padding:0 var(--gut);position:relative}
.law{
  position:absolute;inset:0;display:grid;grid-template-columns:minmax(0,.42fr) minmax(0,1fr);
  gap:clamp(28px,5vw,72px);align-items:center;opacity:0;
}
.law:first-child{position:relative;opacity:1}
@media (max-width:860px){.law{grid-template-columns:1fr;align-content:center}}
.law-rom{font-family:var(--disp);font-weight:900;font-size:clamp(6rem,15vw,13rem);line-height:.74;color:transparent;-webkit-text-stroke:1px var(--iron)}
.law-body h3{font-family:var(--disp);font-weight:700;font-size:clamp(2.4rem,5.6vw,4.6rem);line-height:.9;text-transform:uppercase;color:var(--platinum);margin-bottom:14px}
.law-rule{font-family:var(--disp);font-weight:400;font-size:clamp(1.2rem,2.1vw,1.8rem);line-height:1.15;text-transform:uppercase;color:var(--mercury);border-left:1px solid var(--hair-lit);padding-left:18px;margin-bottom:22px}
.law-body p{font-size:.97rem;line-height:1.82;color:var(--mercury);max-width:52ch}
.laws-prog{position:absolute;left:var(--gut);right:var(--gut);bottom:clamp(56px,9vh,90px);display:flex;gap:4px;max-width:1360px;margin:0 auto}
.laws-prog i{flex:1;height:1px;background:var(--hair);position:relative;overflow:hidden}
.laws-prog i::after{content:'';position:absolute;inset:0 100% 0 0;background:var(--platinum);transition:right .5s var(--ease)}
.laws-prog i.on::after{right:0}

/* ── ACT VI · the vow ─────────────────────────────────────── */
.vow{position:relative;z-index:3;min-height:110svh;display:grid;place-items:center;text-align:center;padding:clamp(120px,16vh,190px) var(--gut)}
.vow-in{max-width:900px;display:flex;flex-direction:column;align-items:center;gap:26px}
.vow-q{font-family:var(--disp);font-weight:500;font-size:clamp(2rem,5.4vw,4.4rem);line-height:1;text-transform:uppercase;color:var(--platinum);text-wrap:balance}
.vow-q span{color:var(--iron)}
.vow-sig{font-family:var(--mono);font-size:0.81rem;letter-spacing:.28em;text-transform:uppercase;color:var(--iron);line-height:2.2}
.vow-acts{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:14px}
.vow-rule{width:1px;height:70px;background:linear-gradient(180deg,transparent,var(--iron),transparent)}

/* ── ACT I · the origin ───────────────────────────────────── */
.origin{max-width:1020px}
.origin .obs-line{font-size:clamp(1.35rem,2.5vw,2.2rem)}
.origin-tail{margin-top:clamp(30px,4.5vh,54px);padding-top:clamp(24px,3vh,34px);border-top:1px solid var(--hair)}

/* ── ACT II · the name ────────────────────────────────────── */
.name-wrap{display:flex;flex-direction:column;align-items:center;text-align:center;gap:clamp(18px,2.6vh,32px)}
.name-big{
  font-family:var(--disp);font-weight:900;font-size:clamp(3.2rem,11vw,8.5rem);
  line-height:.86;letter-spacing:-.015em;text-transform:uppercase;
}
.name-copy{font-size:clamp(1rem,1.5vw,1.2rem);line-height:1.8;color:var(--mercury);max-width:52ch}
.name-copy strong{color:var(--platinum);font-weight:500}
.name-note{
  font-family:var(--mono);font-size:0.81rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--iron);padding-top:14px;border-top:1px solid var(--hair);
}

/* ── ACT VII · the vow ────────────────────────────────────── */
.vow-lede{font-size:1rem;line-height:1.85;color:var(--mercury);max-width:56ch}