/* ============================================================
   QUILLON — PINSTACK  (v2)
   Pinned two-column scroll-sequence: a live table-of-contents
   rail on the left, a deck of cards advancing on the right.
   ============================================================ */

/* ---- section container (height set by JS) ---- */
[data-pinstack]{ position:relative; }

/* ---- pinned two-column stage, vertically centred ---- */
.ps-stage{
  position:sticky; top:0; height:100svh; overflow:hidden; z-index:2;
  display:grid;
  grid-template-columns:minmax(290px,0.92fr) 1.08fr;
  align-items:center; gap:clamp(2rem,5vw,5.5rem);
  max-width:var(--maxw); margin:0 auto;
  padding:6rem clamp(1.4rem,4vw,3.5rem) 4rem;
}

/* ---- left rail: head + table of contents ---- */
.ps-head{ position:relative; z-index:5; align-self:center; }
.ps-head.wrap{ max-width:none; margin:0; padding:0; }
.ps-head h2{ margin-top:1rem; }

.ps-rail{ list-style:none; margin:2.4rem 0 0; padding:0; }
.ps-rail__i{
  display:flex; align-items:baseline; gap:1rem; padding:.66rem 0;
  border-top:1px solid var(--ink-line);
  opacity:.42; transition:opacity .5s var(--ease), border-color .5s var(--ease);
}
.ps-rail__i:last-child{ border-bottom:1px solid var(--ink-line); }
.ps-rail__n{ font-family:var(--font-mono); font-size:.7rem; color:var(--t-mute); min-width:2.2em; letter-spacing:.06em; transition:color .5s; }
.ps-rail__t{ font-family:var(--font-serif); font-size:1.04rem; color:var(--t-strong); letter-spacing:-.012em; line-height:1.2; }
.ps-rail__i.done{ opacity:.6; }
.ps-rail__i.on{ opacity:1; border-top-color:var(--tick); }
.ps-rail__i.on .ps-rail__n{ color:var(--tick); }

/* ---- right frame: where the deck lives ---- */
.ps-stack{ position:relative; height:min(72vh,560px); }
.ps-item{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  pointer-events:none; will-change:transform,opacity,filter;
}
.ps-item.ps--tracked{ transition:none !important; }
.ps-item.ps--lit{ pointer-events:auto; }

/* shared resting / lit shadow vocabulary (light surfaces) */
.ps-sec--princ .ps-item .pcard,
.ps-sec--proc  .ps-item .ps-step-body{
  box-shadow:
    inset 0 .5px 0 rgba(255,255,255,.9),
    0 10px 24px -12px rgba(26,20,10,.18),
    0 36px 64px -34px rgba(26,20,10,.22);
}
.ps-sec--princ .ps-item.ps--lit .pcard,
.ps-sec--proc  .ps-item.ps--lit .ps-step-body{
  box-shadow:
    inset 0 .5px 0 rgba(255,255,255,.95),
    0 0 0 1.5px var(--tick),
    0 34px 66px -26px rgba(34,80,63,.30),
    0 64px 104px -54px rgba(26,20,10,.30);
}
[data-theme="dark"] .ps-sec--princ .ps-item .pcard,
[data-theme="dark"] .ps-sec--proc .ps-item .ps-step-body{
  box-shadow:0 12px 26px -12px rgba(0,0,0,.5), 0 36px 70px -34px rgba(0,0,0,.6);
}
[data-theme="dark"] .ps-sec--princ .ps-item.ps--lit .pcard,
[data-theme="dark"] .ps-sec--proc .ps-item.ps--lit .ps-step-body{
  box-shadow:0 0 0 1.5px var(--tick), 0 40px 80px -28px rgba(58,138,106,.26), 0 70px 110px -52px rgba(0,0,0,.55);
}

/* ============================================================
   PRINCIPLES variant — large focus cards
   ============================================================ */
.ps-sec--princ .ps-item .pcard{
  position:relative; overflow:hidden;
  width:100%; max-width:560px; min-height:336px;
  display:flex; flex-direction:column;
  padding:clamp(2rem,3vw,2.9rem);
  background:linear-gradient(180deg,var(--paper-hi) 0%, #fdfcf8 50%, var(--paper) 100%);
  border:1px solid var(--ink-line); border-radius:16px;
  pointer-events:auto;
}
[data-theme="dark"] .ps-sec--princ .ps-item .pcard{
  background:linear-gradient(180deg,var(--paper-hi),var(--paper-2));
}
.ps-sec--princ .pcard > *{ position:relative; z-index:1; }
.ps-sec--princ .pcard svg{ width:34px; height:34px; }
.ps-sec--princ .pcard h3{ font-size:clamp(1.6rem,2.5vw,2.1rem); margin-top:1.3rem; }
.ps-sec--princ .pcard p{ font-size:1.05rem; color:var(--t-body); margin-top:auto; padding-top:1rem; max-width:42ch; }
.ps-sec--princ .pcard__no{ display:none; }

/* big watermark ordinal inside the card */
.ps-num{
  position:absolute; right:-.04em; bottom:-.16em; z-index:0;
  font-family:var(--font-serif); font-weight:500;
  font-size:clamp(9rem,15vw,14rem); line-height:1;
  color:var(--ink-line); opacity:.6; user-select:none; pointer-events:none;
  transition:color .5s var(--ease), opacity .5s;
}
[data-theme="dark"] .ps-num{ color:rgba(234,229,217,.07); opacity:1; }
.ps-item.ps--lit .ps-num{ color:var(--tick-glow); opacity:1; }
[data-theme="dark"] .ps-item.ps--lit .ps-num{ color:rgba(143,176,162,.14); }

/* ============================================================
   PROCESS + COMMIT variants — statement cards
   (ps-step-num is moved INSIDE ps-step-body in the markup)
   ============================================================ */
.ps-sec--proc .ps-step-body,
.ps-sec--commit .ps-step-body{
  position:relative; overflow:hidden;
  width:100%; max-width:560px; min-height:300px;
  display:flex; flex-direction:column; justify-content:center;
  text-align:left; padding:clamp(2rem,3.2vw,3rem);
  border-radius:16px; border:1px solid var(--ink-line);
}
.ps-sec--proc .ps-step-body{
  background:linear-gradient(180deg,var(--paper-hi) 0%, #fdfcf8 50%, var(--paper) 100%);
}
[data-theme="dark"] .ps-sec--proc .ps-step-body{
  background:linear-gradient(180deg,var(--paper-hi),var(--paper-2));
}
.ps-step-body > *{ position:relative; z-index:1; }
.ps-step-body h3{
  font-family:var(--font-serif); font-weight:500;
  font-size:clamp(1.7rem,3vw,2.5rem); line-height:1.04; letter-spacing:-.022em;
  color:var(--t-strong); margin-bottom:.85rem;
}
.ps-step-body p{ font-size:1.08rem; color:var(--t-body); line-height:1.55; max-width:42ch; }

/* watermark ordinal inside statement cards */
.ps-step-num{
  position:absolute; top:50%; right:-.02em; transform:translateY(-50%); z-index:0;
  font-family:var(--font-serif); font-weight:500;
  font-size:clamp(8rem,13vw,12rem); line-height:1;
  color:var(--ink); opacity:.05; user-select:none; pointer-events:none;
  transition:opacity .5s var(--ease), color .5s;
}
.ps-item.ps--lit .ps-step-num{ opacity:.085; color:var(--tick); }

/* ---- COMMIT now follows the same theme-aware surface as PROCESS
       (light cards in light mode, dark cards in dark mode) ---- */
.ps-sec--commit .ps-item .ps-step-body{
  background:linear-gradient(180deg,var(--paper-hi) 0%, #fdfcf8 50%, var(--paper) 100%);
  box-shadow:
    inset 0 .5px 0 rgba(255,255,255,.9),
    0 10px 24px -12px rgba(26,20,10,.18),
    0 36px 64px -34px rgba(26,20,10,.22);
}
[data-theme="dark"] .ps-sec--commit .ps-item .ps-step-body{
  background:linear-gradient(180deg,var(--paper-hi),var(--paper-2));
  box-shadow:0 12px 26px -12px rgba(0,0,0,.5), 0 36px 70px -34px rgba(0,0,0,.6);
}
.ps-sec--commit .ps-item.ps--lit .ps-step-body{
  box-shadow:
    inset 0 .5px 0 rgba(255,255,255,.95),
    0 0 0 1.5px var(--tick),
    0 34px 66px -26px rgba(34,80,63,.30),
    0 64px 104px -54px rgba(26,20,10,.30);
}
[data-theme="dark"] .ps-sec--commit .ps-item.ps--lit .ps-step-body{
  box-shadow:0 0 0 1.5px var(--tick), 0 40px 80px -28px rgba(58,138,106,.26), 0 70px 110px -52px rgba(0,0,0,.55);
}

/* ============================================================
   MOBILE & REDUCED-MOTION — unpin into a clean stacked layout
   ============================================================ */
@media(max-width:860px){
  [data-pinstack]{ height:auto !important; }
  .ps-stage{ position:static; height:auto; display:block; padding:5rem 0 3.2rem; }
  .ps-head.wrap{ padding:0 clamp(1.4rem,5vw,2rem); }
  .ps-rail{ display:none; }
  .ps-stack{ position:static; height:auto; display:flex; flex-direction:column; gap:1.2rem; padding:1.8rem clamp(1.4rem,5vw,2rem) 0; }
  .ps-item{ position:static; opacity:1 !important; transform:none !important; filter:none !important; pointer-events:auto; display:block; }
  .ps-sec--princ .ps-item .pcard,
  .ps-sec--proc .ps-step-body,
  .ps-sec--commit .ps-step-body{ max-width:none; min-height:0; }
  .ps-num,.ps-step-num{ display:none; }
}
@media(prefers-reduced-motion:reduce){
  [data-pinstack]{ height:auto !important; }
  .ps-stage{ position:static; height:auto; display:block; padding:5rem 0 3.2rem; }
  .ps-rail{ display:none; }
  .ps-stack{ position:static; height:auto; display:flex; flex-direction:column; gap:1.2rem; }
  .ps-item{ position:static; opacity:1 !important; transform:none !important; filter:none !important; pointer-events:auto; display:block; }
  .ps-sec--princ .ps-item .pcard,
  .ps-sec--proc .ps-step-body,
  .ps-sec--commit .ps-step-body{ max-width:none; min-height:0; }
  .ps-num,.ps-step-num{ display:none; }
}