/* ============================================================
   ViberSpace — home surface. "Deployable Sheet" world.
   Miura-fold deployable sheet: one pull propagates a linked
   crease field. Mountain and valley; dev and prod.

   Surface-only. The world's faces, tokens, printed ground and
   shared primitives live in sheet_core.css, which this file
   loads on top of and never redefines.
   ============================================================ */

/* ---------- Hero ---------- */
.hero{ padding:clamp(40px,6vw,80px) 0 var(--bay) }
.hero-grid{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(24px,4vw,64px); align-items:center;
}

/* the sheet itself */
.sheet-stage{ position:relative; min-height:clamp(300px,42vw,520px) }
.sheet-stage svg{ display:block; width:100%; height:auto; overflow:visible }

/* the packet: what your sentence is before it deploys.
   Foil, not a flat fill — a raking sheen across the face plus grain, and a
   real cast shadow with offset and blur. */
.packet{
  position:absolute; right:0; top:2%; width:min(208px,30%);
  color:var(--ink); overflow:hidden;
  background:
    linear-gradient(103deg,
      rgba(255,255,255,.34) 0%, rgba(255,255,255,0) 18%,
      rgba(120,88,10,.16) 43%, rgba(255,255,255,.30) 58%,
      rgba(255,255,255,0) 74%, rgba(120,88,10,.20) 100%),
    var(--foil);
  padding:16px 16px 18px;
  clip-path:polygon(0 0,100% 0,100% 100%,14px 100%,0 calc(100% - 14px));
  box-shadow:0 16px 34px -8px rgba(28,22,6,.42), 0 3px 8px rgba(28,22,6,.20);
  transform:rotate(-4deg);
}
.packet::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:var(--grain); background-size:120px 120px;
  mix-blend-mode:overlay; opacity:.30;
}
.packet > *{ position:relative; z-index:1 }
.packet h2{ font:700 13px/1.15 var(--display); letter-spacing:.06em; text-transform:uppercase; margin:0 0 10px }
.packet .spec dt{ color:rgba(14,14,14,.66) }
.packet .spec dd{ color:var(--ink) }
.packet .spec .dots{ border-bottom-color:rgba(14,14,14,.3) }
.packet .pull{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-top:12px; padding-top:10px; border-top:1px solid rgba(14,14,14,.28);
  font:700 10px/1.3 var(--mono); letter-spacing:.18em; text-transform:uppercase;
}
.packet .pull svg{ width:22px; height:8px; flex:0 0 22px }

/* the thesis, demoted from the headline to the field it describes */
.caption{
  margin:18px 0 0; font:italic 700 15px/1.3 var(--display);
  letter-spacing:.01em; text-transform:uppercase; color:var(--ink);
}

/* ---------- Status readout ---------- */
.readout{ margin-top:clamp(30px,4vw,54px) }

/* ---------- Sequence ---------- */
/* A numbered rail driving one sheet, so the fold you ask for happens
   beside the control that asks for it. */
.seq-grid{ display:grid; grid-template-columns:minmax(0,0.92fr) minmax(0,1.08fr); gap:clamp(20px,3vw,44px); align-items:start }

.rail{ display:flex; flex-direction:column }
.step{
  display:flex; gap:18px; align-items:flex-start; width:100%; text-align:left;
  padding:20px 20px 20px 18px; cursor:pointer;
  background:transparent; border:0; border-top:1px solid var(--mountain);
  font:inherit; color:inherit; position:relative;
  transition:background .18s var(--ease);
}
.step:first-child{ border-top:0 }
/* Selected state is carried by the wash and by the world's own gold corner
   notch — not by a thick coloured left edge. */
.step::before{
  content:""; position:absolute; top:0; right:0; width:26px; height:26px;
  background:var(--foil); clip-path:polygon(100% 0,100% 100%,0 0);
  transform:scale(0); transform-origin:100% 0;
  transition:transform .18s var(--ease);
}
.step .n{ font:700 11px/1.5 var(--mono); letter-spacing:.2em; color:var(--ink-2); flex:0 0 auto }
.step .t{ display:block; font:700 16px/1.2 var(--display); letter-spacing:.03em; text-transform:uppercase; margin-bottom:6px }
.step .d{ display:block; font-size:12.5px; line-height:1.65; color:var(--ink-2) }
.step:hover{ background:var(--sheet-2) }
.step.is-on{ background:var(--foil-wash) }
.step.is-on::before{ transform:scale(1) }
.step.is-on .n{ color:var(--ink) }

.seq-stage .face{ padding:clamp(18px,2.4vw,30px); display:flex; flex-direction:column; gap:16px }
.seq-stage svg{ display:block; width:100%; height:auto; overflow:visible }
.seq-stage .legend{ margin-top:0 }

/* ---------- Two folds: dev + prod ---------- */
.folds{ display:grid; grid-template-columns:1fr 1fr; gap:var(--gap) }
.fold .face{ padding:26px }
.fold h3{
  font:700 12px/1 var(--mono); letter-spacing:.2em; text-transform:uppercase;
  margin:0 0 6px; color:var(--ink-2);
}
.fold .branch{ font:italic 700 30px/1 var(--display); text-transform:uppercase; margin:0 0 16px }
.fold p{ margin:0 0 18px; font-size:13.5px; line-height:1.7; color:var(--ink-2) }
.fold .crease{ height:2px; background:var(--mountain); margin-bottom:18px }
.fold--prod .crease{ height:0; border-top:2px dashed var(--valley-line); background:none }

/* ---------- Product depiction ---------- */
.plates{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap) }
.plate .face{ display:flex; flex-direction:column; height:100% }
.plate figure{ margin:0; background:var(--sheet-2); border-bottom:1px solid var(--mountain) }
.plate figure svg{ display:block; width:100%; height:auto }
.plate .cap{ padding:16px 18px 20px }
.plate h3{ font:700 13px/1.2 var(--display); letter-spacing:.04em; text-transform:uppercase; margin:0 0 7px }
.plate p{ margin:0; font-size:12.5px; line-height:1.65; color:var(--ink-2) }

/* ---------- Ownership ledger ---------- */
.ledger .face{ padding:clamp(22px,3vw,38px) }
.ledger-grid{ display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(24px,4vw,56px); align-items:start }
.ledger ul{ list-style:none; margin:0; padding:0 }
.ledger li{
  display:flex; gap:14px; padding:15px 0; border-top:1px solid var(--mountain);
  font-size:13.5px; line-height:1.65;
}
.ledger li:first-child{ border-top:0; padding-top:0 }
.ledger li svg{ flex:0 0 auto; margin-top:2px }
.ledger li b{ display:block; font:700 12px/1.5 var(--mono); letter-spacing:.14em; text-transform:uppercase }
.ledger li span{ color:var(--ink-2) }

/* ---------- Adaptation ---------- */
@media (max-width:1080px){
  /* The proposition leads. The sheet follows it — never above it. */
  .hero-grid{ grid-template-columns:1fr; gap:36px }
  .sheet-stage{ min-height:0 }
  .packet{ width:min(190px,32%) }
  .seq-grid{ grid-template-columns:1fr; gap:28px }
  .plates{ grid-template-columns:1fr 1fr }
  .ledger-grid{ grid-template-columns:1fr; gap:30px }
}

@media (max-width:760px){
  .folds{ grid-template-columns:1fr }
  .plates{ grid-template-columns:1fr }
}

@media (max-width:520px){
  .packet{
    position:static; width:100%; max-width:320px; transform:none; margin:16px 0 0;
    clip-path:polygon(0 0,100% 0,100% 100%,14px 100%,0 calc(100% - 14px));
  }
}

/* ---------- Motion ---------- */
.deploying .sheet-stage{ will-change:contents }