/* ============================================================
   SENSCERA — SCIENCE pages (long-form technical editorial)
   Cinematic full-bleed video · sticky chapter nav · lab-report data
   Ink / white / silver / signal red · Archivo / Inter / IBM Plex Mono
   ============================================================ */

.sx{background:var(--ink);color:#fff}
.sx ::selection{background:var(--signal);color:#fff}

/* ---------- scroll progress ---------- */
.sx-prog{position:fixed;top:0;left:0;right:0;height:2px;z-index:60;background:transparent;pointer-events:none}
.sx-prog i{display:block;height:100%;width:0;background:var(--signal);transition:width .1s linear}

/* ---------- HERO (full-bleed cinematic) ---------- */
.sx-hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;background:var(--ink)}
.sx-hero video,.sx-hero .sx-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.sx-hero .sx-poster{display:none}
.sx-hero-scrim{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(10,10,11,.55) 0%,rgba(10,10,11,.25) 35%,rgba(10,10,11,.75) 72%,var(--ink) 100%)}
.sx-hero-in{position:relative;z-index:2;width:100%;max-width:1180px;margin:0 auto;padding:0 20px 72px}
.sx-crumb{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--silver-400);display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:26px}
.sx-crumb a:hover{color:#fff}.sx-crumb .sep{opacity:.45}.sx-crumb .cur{color:var(--signal)}
.sx-kicker{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--signal);display:block;margin-bottom:16px}
.sx-hero h1{font-family:var(--f-display);font-weight:800;letter-spacing:-.035em;line-height:.92;
  font-size:clamp(2.6rem,9vw,6.4rem);margin:0 0 18px;text-transform:uppercase}
.sx-hero h1 .tm{font-size:.3em;vertical-align:super;letter-spacing:0;font-weight:600}
.sx-hero .sx-sub{font-family:var(--f-display);font-weight:600;font-size:clamp(1.05rem,2.4vw,1.6rem);letter-spacing:-.01em;color:#fff;margin-bottom:14px}
.sx-hero .sx-lede{color:var(--silver-200);font-size:clamp(.95rem,1.4vw,1.05rem);line-height:1.7;max-width:62ch}
.sx-scroll{margin-top:34px;display:inline-flex;align-items:center;gap:10px;font-family:var(--f-mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--silver-300)}
.sx-scroll .ln{width:44px;height:1px;background:var(--silver-500);position:relative;overflow:hidden}
.sx-scroll .ln::after{content:"";position:absolute;inset:0;background:var(--signal);transform:translateX(-100%);animation:sxLn 2.2s var(--ease) infinite}
@keyframes sxLn{50%{transform:translateX(0)}100%{transform:translateX(100%)}}

/* ---------- sticky chapter nav ----------
   MOBILE: a fixed .topbar (60px, z-index 90) occupies the top of the
   viewport below 1024px. Sticking at top:0 would park this nav behind it,
   invisible and untappable. Offset by the topbar height, and sit above it
   in z-order so the two never overlap ambiguously. Desktop hides .topbar,
   so the offset resets to 0 there. */
.sx-chap{position:sticky;top:var(--topbar-h);z-index:91;background:rgba(10,10,11,.92);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.1)}
@media(min-width:1024px){.sx-chap{top:0;z-index:40}}
.sx-chap-in{max-width:1180px;margin:0 auto;padding:0 20px;display:flex;gap:26px;overflow-x:auto;scrollbar-width:none}
.sx-chap-in::-webkit-scrollbar{display:none}
.sx-chap a{flex:none;padding:15px 0;font-family:var(--f-mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--silver-500);border-bottom:2px solid transparent;transition:color .2s,border-color .2s;white-space:nowrap}
.sx-chap a:hover{color:#fff}
.sx-chap a.on{color:#fff;border-bottom-color:var(--signal)}

/* ---------- "in 30 seconds" summary ----------
   The one block most visitors will actually read. It must carry the
   full argument alone: problem → mechanism → why it's worth owning. */
.sx-tldr{background:#0d0d0f;border-bottom:1px solid rgba(255,255,255,.09)}
.sx-tldr-in{max-width:1180px;margin:0 auto;padding:44px 20px 48px}
.sx-tldr-h{display:flex;align-items:center;gap:12px;margin-bottom:26px}
.sx-tldr-h .k{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--signal);white-space:nowrap}
.sx-tldr-h .rule{flex:1;height:1px;background:rgba(255,255,255,.14)}
.sx-tldr-grid{display:grid;grid-template-columns:1fr;gap:1px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.1)}
.sx-tl{background:#0d0d0f;padding:24px 20px}
.sx-tl .lbl{font-family:var(--f-mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--signal);display:block;margin-bottom:12px}
.sx-tl p{margin:0;color:#fff;font-size:.98rem;line-height:1.6;font-weight:500;max-width:none}
.sx-tl p em{font-style:normal;color:var(--silver-400);font-weight:400}
.sx-tldr-more{margin-top:22px;display:inline-flex;align-items:center;gap:9px;font-family:var(--f-mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--silver-400);transition:color .2s}
.sx-tldr-more:hover{color:#fff}
.sx-tldr-more svg{width:14px;height:14px;stroke:var(--signal);fill:none;stroke-width:2}
@media(min-width:880px){.sx-tldr-grid{grid-template-columns:repeat(3,1fr)}}

/* ---------- section shell ---------- */
/* scroll-margin must clear BOTH sticky bars or #anchors land underneath:
   mobile = topbar (60) + chapter nav (~50); desktop = chapter nav only. */
.sx-sec{max-width:1180px;margin:0 auto;padding:82px 20px;scroll-margin-top:calc(var(--topbar-h) + 54px)}
@media(min-width:1024px){.sx-sec{scroll-margin-top:56px}}
.sx-sec + .sx-sec{border-top:1px solid rgba(255,255,255,.09)}
.sx-h{display:flex;align-items:baseline;gap:16px;margin-bottom:12px}
.sx-h .n{font-family:var(--f-mono);font-size:.72rem;color:var(--signal);letter-spacing:.12em}
.sx-sec h2{font-family:var(--f-display);font-weight:800;letter-spacing:-.028em;line-height:1.04;font-size:clamp(1.7rem,4.4vw,2.9rem);margin:0}
.sx-sec .sx-intro{color:var(--silver-200);font-size:1.02rem;line-height:1.75;max-width:68ch;margin-top:16px}
.sx-sec p{color:var(--silver-300);line-height:1.78;max-width:68ch;margin-top:14px}
.sx-sec p strong,.sx-sec p b{color:#fff;font-weight:600}
.sx-sec .lead{color:#fff;font-size:1.1rem;line-height:1.7}

/* reveal */
/* FAILSAFE: content is visible by default. Only a confirmed-running JS
   (html.js, set by an inline script in <head>) opts into the reveal
   animation. Previously opacity:0 was the default, so any JS failure —
   or an observer that never fired — left a tall page with nothing on it. */
.js .sx-rv{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .sx-rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.js .sx-rv{opacity:1;transform:none;transition:none}}

/* ---------- editorial grid (wide screens) ----------
   Prose keeps its ~68ch measure (long lines are hard to read), and the
   space beside it becomes a real column carrying pull quotes — so the
   whitespace reads as structure rather than as an unfinished page.
   Full-width blocks (stats, tables, card grids) span both columns. */
@media(min-width:1120px){
  .sx-sec > .sx-rv{
    display:grid;
    grid-template-columns:minmax(0,68ch) minmax(220px,1fr);
    column-gap:60px;
    align-items:start;
  }
  .sx-sec > .sx-rv > *{grid-column:1}
  .sx-sec > .sx-rv > .sx-h,
  .sx-sec > .sx-rv > .sx-stats,
  .sx-sec > .sx-rv > .sx-mech,
  .sx-sec > .sx-rv > .sx-mols,
  .sx-sec > .sx-rv > .sx-tblwrap,
  .sx-sec > .sx-rv > .sx-layers,
  .sx-sec > .sx-rv > .sx-cross,
  .sx-sec > .sx-rv > .sx-prods,
  .sx-sec > .sx-rv > .sx-call,
  .sx-sec > .sx-rv > .ph-prs,
  .sx-sec > .sx-rv > .ph-nos,
  .sx-sec > .sx-rv > .ph-pillars,
  .sx-sec > .sx-rv > .ph-name,
  .sx-sec > .sx-rv > .ph-mani{grid-column:1 / -1}
  .sx-sec > .sx-rv > .sx-aside{grid-column:2;align-self:start;position:sticky;top:88px}
}

/* pull quote in the right column */
.sx-aside{border-left:2px solid var(--signal);padding:2px 0 2px 20px;margin-top:26px}
.sx-aside .pq{font-family:var(--f-display);font-weight:700;letter-spacing:-.018em;line-height:1.3;
  font-size:1.16rem;color:#fff;margin:0}
.sx-aside .pq em{font-style:normal;color:var(--signal)}
.sx-aside .cap{display:block;margin-top:13px;font-family:var(--f-mono);font-size:.6rem;
  letter-spacing:.13em;text-transform:uppercase;color:var(--silver-500);line-height:1.5}
/* below the grid breakpoint the aside only repeats the prose — hide it */
@media(max-width:1119px){.sx-aside{display:none}}

/* ---------- stat strip ---------- */
.sx-stats{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.1);margin-top:38px}
.sx-stat{background:var(--ink);padding:24px 18px}
.sx-stat b{display:block;font-family:var(--f-display);font-weight:800;font-size:clamp(1.6rem,4vw,2.4rem);letter-spacing:-.03em;line-height:1;color:#fff}
.sx-stat span{display:block;margin-top:9px;font-size:.78rem;line-height:1.45;color:var(--silver-400)}
@media(min-width:820px){.sx-stats{grid-template-columns:repeat(4,1fr)}}

/* ---------- mechanism steps ---------- */
.sx-mech{margin-top:40px;display:grid;gap:1px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.1)}
.sx-step{background:var(--ink);padding:28px 22px;position:relative}
.sx-step .sn{font-family:var(--f-mono);font-size:.68rem;color:var(--signal);letter-spacing:.14em}
.sx-step h3{font-family:var(--f-display);font-weight:700;font-size:1.12rem;letter-spacing:-.01em;margin:10px 0 8px;color:#fff}
.sx-step p{color:var(--silver-400);font-size:.88rem;line-height:1.65;margin:0;max-width:none}
.sx-step .ghost{position:absolute;right:16px;top:10px;font-family:var(--f-display);font-weight:800;font-size:3.4rem;color:rgba(255,255,255,.045);line-height:1;pointer-events:none}
@media(min-width:900px){.sx-mech{grid-template-columns:repeat(3,1fr)}.sx-mech.four{grid-template-columns:repeat(4,1fr)}}

/* ---------- molecule / component cards ---------- */
.sx-mols{margin-top:40px;display:grid;gap:1px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.1)}
.sx-mol{background:var(--ink);padding:26px 22px;transition:background .25s}
.sx-mol:hover{background:#111214}
.sx-mol .top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.sx-mol .idx{font-family:var(--f-mono);font-size:.68rem;color:var(--signal);letter-spacing:.14em}
.sx-mol .tag{font-family:var(--f-mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--silver-400);border:1px solid rgba(255,255,255,.16);padding:3px 7px;border-radius:2px}
.sx-mol h3{font-family:var(--f-display);font-weight:700;font-size:1.08rem;letter-spacing:-.01em;color:#fff;margin:0 0 4px}
.sx-mol .inci{font-family:var(--f-mono);font-size:.68rem;color:var(--silver-500);margin-bottom:12px;word-break:break-word}
.sx-mol .role{display:inline-block;font-size:.72rem;color:var(--signal);font-weight:600;margin-bottom:10px}
.sx-mol p{color:var(--silver-400);font-size:.85rem;line-height:1.65;margin:0;max-width:none}
.sx-mol .depth{margin-top:14px;padding-top:12px;border-top:1px solid rgba(255,255,255,.09);display:flex;align-items:center;gap:9px}
.sx-mol .depth .lbl{font-family:var(--f-mono);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;color:var(--silver-500);white-space:nowrap}
.sx-mol .bar{flex:1;height:3px;background:rgba(255,255,255,.1);position:relative;overflow:hidden}
.sx-mol .bar i{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,var(--signal),#ff5a60);width:var(--w,50%)}
@media(min-width:760px){.sx-mols{grid-template-columns:1fr 1fr}}
@media(min-width:1060px){.sx-mols{grid-template-columns:repeat(3,1fr)}}

/* ---------- mid-page video band ---------- */
.sx-band{position:relative;min-height:clamp(380px,62vh,600px);overflow:hidden;display:flex;align-items:center;margin:0}
.sx-band video,.sx-band .sx-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.sx-band .sx-poster{display:none}
.sx-band-scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(10,10,11,.9) 0%,rgba(10,10,11,.6) 55%,rgba(10,10,11,.35) 100%)}
.sx-band-in{position:relative;z-index:2;max-width:1180px;margin:0 auto;padding:40px 20px;width:100%}
.sx-band .q{font-family:var(--f-display);font-weight:800;letter-spacing:-.03em;line-height:1.06;font-size:clamp(1.5rem,4.2vw,2.9rem);color:#fff;max-width:20ch}
.sx-band .q em{font-style:normal;color:var(--signal)}
.sx-band .qs{margin-top:16px;color:var(--silver-300);max-width:52ch;line-height:1.7;font-size:.95rem}

/* ---------- spec table (lab report) ---------- */
.sx-tblwrap{margin-top:36px;border:1px solid rgba(255,255,255,.1);overflow-x:auto}
.sx-tbl{width:100%;border-collapse:collapse;min-width:620px}
.sx-tbl th,.sx-tbl td{text-align:left;padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.09);vertical-align:top}
.sx-tbl th{font-family:var(--f-mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--silver-400);background:rgba(255,255,255,.03);font-weight:500}
.sx-tbl td{font-size:.86rem;color:var(--silver-300);line-height:1.6}
.sx-tbl td:first-child{color:#fff;font-weight:600}
.sx-tbl tr:last-child td{border-bottom:none}
.sx-tbl .yes{color:var(--signal);font-weight:600}
.sx-tbl .no{color:var(--silver-500)}

/* ---------- layer stack diagram ---------- */
.sx-layers{margin-top:40px;border:1px solid rgba(255,255,255,.1)}
.sx-layer{display:flex;align-items:flex-start;gap:16px;padding:20px 22px;border-bottom:1px solid rgba(255,255,255,.09);position:relative;transition:background .25s}
.sx-layer:last-child{border-bottom:none}
.sx-layer:hover{background:rgba(255,255,255,.02)}
.sx-layer .dp{font-family:var(--f-mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--signal);width:96px;flex:none;padding-top:3px}
.sx-layer .bd h4{font-family:var(--f-display);font-weight:700;font-size:1rem;color:#fff;margin:0 0 5px}
.sx-layer .bd p{margin:0;font-size:.84rem;color:var(--silver-400);line-height:1.6;max-width:none}
.sx-layer .who{margin-top:8px;font-family:var(--f-mono);font-size:.64rem;color:var(--silver-500)}

/* ---------- callout ---------- */
.sx-call{margin-top:36px;border-left:2px solid var(--signal);background:linear-gradient(90deg,rgba(228,20,28,.07),transparent 70%);padding:22px 24px}
.sx-call h4{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--signal);margin:0 0 10px}
.sx-call p{margin:0;color:var(--silver-200);font-size:.92rem;line-height:1.7}

/* ---------- product rail ---------- */
.sx-prods{margin-top:38px;display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(min-width:900px){.sx-prods{grid-template-columns:repeat(4,1fr)}}
.sx-prod{border:1px solid rgba(255,255,255,.12);background:#0d0d0f;transition:border-color .2s,transform .2s}
.sx-prod:hover{border-color:rgba(255,255,255,.34);transform:translateY(-3px)}
.sx-prod .im{aspect-ratio:1/1;background:var(--silver-50);overflow:hidden}
.sx-prod .im img{width:100%;height:100%;object-fit:cover}
.sx-prod .im .ph{width:100%;height:100%;background:linear-gradient(135deg,#e9ebec,#cfd3d6)}
.sx-prod .tx{padding:14px}
.sx-prod .nm{font-size:.84rem;font-weight:600;color:#fff;line-height:1.3}
.sx-prod .sr{font-family:var(--f-mono);font-size:.64rem;color:var(--silver-500);margin-top:5px}

/* ---------- cross links ---------- */
.sx-cross{display:grid;grid-template-columns:1fr;gap:1px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.1);margin-top:38px}
.sx-x{background:var(--ink);padding:24px 20px;transition:background .25s}
.sx-x:hover{background:#111214}
.sx-x .k{font-family:var(--f-mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--signal)}
.sx-x h4{font-family:var(--f-display);font-weight:700;font-size:1.05rem;color:#fff;margin:9px 0 6px}
.sx-x p{margin:0;font-size:.82rem;color:var(--silver-400);line-height:1.6;max-width:none}
@media(min-width:760px){.sx-cross{grid-template-columns:repeat(3,1fr)}}

/* ---------- closing CTA ---------- */
.sx-end{max-width:1180px;margin:0 auto;padding:78px 20px 96px;text-align:center;border-top:1px solid rgba(255,255,255,.09)}
.sx-end h2{font-family:var(--f-display);font-weight:800;letter-spacing:-.03em;line-height:1.05;font-size:clamp(1.8rem,5vw,3.1rem);margin:0 0 16px;color:#fff}
.sx-end p{color:var(--silver-300);max-width:56ch;margin:0 auto 30px;line-height:1.75}
.sx-end .btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ---------- footnote ---------- */
.sx-note{max-width:1180px;margin:0 auto;padding:0 20px 60px}
.sx-note p{font-size:.72rem;color:var(--silver-600);line-height:1.6;max-width:78ch}

/* reduced motion / no-JS: show posters */
@media(prefers-reduced-motion:reduce){
  .sx-hero video,.sx-band video{display:none}
  .sx-hero .sx-poster,.sx-band .sx-poster{display:block}
  .sx-scroll .ln::after{animation:none}
}