/* ═══ The Descent — light → ink over the scroll (no-JS safe) ═══ */
.bridge { height: clamp(180px, 26svh, 300px); background: linear-gradient(to bottom, var(--paper), #131110); border: 0; }
.on-ink {
  --paper: #131110; --paper-2: #1c1916; --ink: #e9e4da; --ink-soft: #b5aea1;
  --ash: #7a746a; --line: #2e2a25; --white: #17150f;
  background: #131110; color: var(--ink);
}
body.descent .foot { --paper: #131110; --paper-2: #0d0c0a; --ink: #e9e4da; --ink-soft: #b5aea1; --ash: #7a746a; --line: #2e2a25; background: #0d0c0a; color: var(--ink); border-color: #2e2a25; }
body.descent { background: #131110; } /* gaps below the bridge stay ink */
/* everything ABOVE the bridge keeps its paper ground explicitly */
body.descent .hero,
body.descent main > .section:not(.on-ink) { background: var(--paper); }

/* ═══ Cinema — the Spine beat ═══ */
.cinema { position: relative; }
.cinema__spacer { height: 560vh; height: 560svh; position: relative; }
@media (max-width: 860px) { .cinema__spacer { height: 420svh; } }
.cinema__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: clip; }
.cinema__stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.cinema__poster { position: absolute; inset: 0; display: grid; place-items: center; background: #131110; }
.cinema__poster img { height: 92%; width: auto; max-width: 88%; object-fit: contain; }
html.cine-live .cinema__poster { display: none; }

/* ── beat 2: THE MATERIAL — a scroll-scrubbed macro film of the real cloth.
   Until the film exists the SAME box runs the poster treatment: the macro
   crop of the robe's own fabric photograph, moved transform-only. ── */
.cinema__material {
  position: absolute; inset: 0; overflow: clip; background: #131110;
  opacity: 0; transition: opacity 0.42s ease; pointer-events: none;
}
.cinema__material.is-on { opacity: 1; }
.cinema__material img,
.cinema__material video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 39% 62%; display: block;
  transform-origin: 50% 50%; will-change: transform; backface-visibility: hidden;
}
/* the photograph was shot on white — grade it into the ink of the stage */
.cinema__material img { filter: brightness(0.82) contrast(1.16) saturate(0.62); }
.cinema__material video { opacity: 0; }
.cinema__material.has-film video { opacity: 1; }
.cinema__material.has-film img { opacity: 0; }
/* vignette: holds the eye on the weave and keeps the panel legible */
.cinema__material::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(120% 90% at 58% 42%, transparent 34%, rgba(13, 12, 10, 0.72) 100%),
    linear-gradient(to bottom, rgba(13, 12, 10, 0.5), transparent 26% 62%, rgba(13, 12, 10, 0.72));
}
html:not(.cine-live) .cinema__material { display: none; }

/* dip-to-ink cut between beat 1 (the spine) and beat 2 (the material) */
.cinema__veil { position: absolute; inset: 0; background: #131110; opacity: 0; pointer-events: none; }
html:not(.cine-live) .cinema__veil { display: none; }
/* panels keep hit-testing: elementFromPoint-based audits must see the text,
   not the canvas underneath */
.cinema__panel {
  position: absolute; left: var(--gutter); top: 50%; transform: translateY(-50%);
  max-width: min(34ch, 38vw); display: grid; gap: 14px;
  opacity: 0; transition: opacity 0.5s ease;
}
html:not(.cine-live) .cinema__panel { position: relative; left: 0; top: 0; transform: none; opacity: 1; max-width: var(--measure); padding: 8vh var(--gutter); }
html:not(.cine-live) .cinema__spacer { height: auto; }
html:not(.cine-live) .cinema__stage { position: relative; height: 72vh; }
.cinema__panel.is-on { opacity: 1; }
.cinema__panel h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(26px, 3vw, 44px); line-height: 1.05; }
.cinema__panel p { color: var(--ink-soft); font-size: clamp(14px, 1.1vw, 16.5px); }
.cinema__panel .mono { color: var(--ash); }
@media (max-width: 860px) {
  .cinema__panel {
    left: var(--gutter); right: var(--gutter); top: auto;
    bottom: calc(5svh + env(safe-area-inset-bottom, 0px)); transform: none; max-width: 100%;
    background: rgba(13, 12, 10, 0.82); padding: 16px 18px 18px;
    border-top: 1px solid #2e2a25;
  }
  .cinema__panel p { max-width: 100%; }
  .cinema__panel h2 { max-width: 100%; font-size: clamp(22px, 6.4vw, 30px); }
}

/* ember exists only as light: one radial glow behind the acquire CTA */
.ember-cta { position: relative; display: inline-block; }
.ember-cta::before {
  content: ""; position: absolute; inset: -34px -60px; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(217, 97, 31, 0.22), transparent 65%);
}

/* anatomy quiet beats */
.anat-figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.anat-figs figure { background: var(--white); border: 1px solid var(--line); }
.anat-figs img { width: 100%; height: auto; }
.anat-figs figcaption { padding: 10px 12px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ash); }
.spec-strip { display: flex; flex-wrap: wrap; gap: 12px 40px; border-block: 1px solid var(--line); padding-block: 22px; }
.spec-strip div { display: grid; gap: 4px; }
.spec-strip b { font-family: var(--font-display); font-weight: 400; font-size: clamp(20px, 2.2vw, 30px); }
.spec-strip span { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ash); }


/* ═══ Powder intro (built by JS; no-JS = plain hero) ═══ */
#sindhu-hero.js-pin { min-height: 240vh; min-height: 250svh; padding-block: 0; }
@media (max-width: 860px) { #sindhu-hero.js-pin { min-height: 230svh; } }
#sindhu-hero.js-pin .hero__sticky {
  position: sticky; top: 0; min-height: 100vh; min-height: 100svh;
  display: grid; align-content: center;
  padding-block: clamp(64px, 12vh, 140px) clamp(48px, 8vh, 96px);
}
.powder-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
#sindhu-hero.js-pin .hero__grid { position: relative; z-index: 2; }

/* home opens IN the ink — the unexcavated dark; the dig surfaces below */
body.descent #sindhu-hero {
  background: #131110;
  --paper: #131110; --paper-2: #1c1916; --ink: #e9e4da; --ink-soft: #b5aea1;
  --ash: #8b8478; --line: #2e2a25;
  color: var(--ink);
}
.bridge--up { height: clamp(180px, 26svh, 300px); background: linear-gradient(to bottom, #131110, var(--paper)); border: 0; }
body.descent .bridge--up { background: linear-gradient(to bottom, #131110, #efece6); }

/* ═══ Cine-hero ═══ */
/* min-height without .js-pin: the no-JS hero must still own its frame,
   or .hero-static (absolute, inset:0) prints over the next section */
.hero-cine { background: #131110; padding: 0; position: relative; min-height: 100vh; min-height: 100svh; }

.hero-static {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  display: grid; align-content: center; justify-items: center; gap: 3vh;
  padding: 0 var(--gutter);
  color: #e9e4da;
}
.hero-static .hero__title { font-size: clamp(52px, 12vw, 150px); text-align: center; color: #e9e4da; }
.hero-static .hero__title em { font-style: normal; color: #8b8478; font-size: 0.3em; vertical-align: super; }
.hero-static .hero-meta {
  position: absolute; left: var(--gutter); right: var(--gutter);
  bottom: calc(5svh + env(safe-area-inset-bottom, 0px));
  display: grid; grid-auto-rows: min-content; gap: 12px; align-content: end;
  justify-items: start; max-width: 430px;
  pointer-events: auto;
}
.hero-static .hero-meta p { max-width: 34ch; }
.hero-static .hero-meta .btn { margin-top: 4px; }
@media (max-width: 640px) {
  .hero-static .hero-meta { gap: 9px; }
  .hero-static .hero-meta p { font-size: 13.5px; line-height: 1.45; }
  .hero-static .grains { font-size: 9.5px; letter-spacing: 0.1em; max-width: 100%; }
  .hero-static .hero-meta .btn { padding: 12px 20px; font-size: 10.5px; }
  .hero-static .hero__title { font-size: clamp(44px, 11.4vw, 64px); }
}
.hero-static .hero-meta p { color: #b5aea1; font-size: clamp(14px, 1.1vw, 16.5px); }
.hero-static .grains { color: #6f695e; font-size: 10.5px; }
.powder-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
@media (max-width: 640px) { .hero-static .hero-meta { max-width: 78vw; } }

/* ── kode beats — viewport-filling written sentences (anatomy) ── */
.kode-beat { position: relative; padding: 13svh var(--gutter) 11svh; }
.kode-beat > p, .kode-beat h2 {
  font-family: var(--font-display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(33px, 8.8vw, 126px); line-height: 0.98; letter-spacing: 0.004em;
  max-width: none; margin: 0;
}
.kode-beat .i1 { display: block; padding-left: clamp(30px, 11vw, 170px); }
.kode-beat .i2 { display: block; padding-left: clamp(14px, 4.5vw, 64px); }
.kode-beat .kb-meta, .kode-beat .kb-num {
  position: absolute; font-size: 11px; letter-spacing: 0.14em; color: var(--ash);
}
.kode-beat .kb-meta { top: clamp(18px, 4svh, 44px); right: var(--gutter); }
.kode-beat .kb-num { bottom: clamp(16px, 3svh, 36px); left: var(--gutter); }
.kode-beat--inset { padding-inline: 0; }
.kode-beat--inset .kb-meta { right: 0; }
.kode-beat--inset .kb-num { left: 0; }
.kode-beat--center { text-align: left; max-width: none; }
@media (max-width: 640px) {
  .kode-beat > p, .kode-beat h2 { font-size: clamp(30px, 10.4vw, 52px); }
  .kode-beat .kb-meta { position: static; display: block; margin-bottom: 14px; }
}