/* Stack — the alternating left/right list of titled blocks.
   Notes: docs/component-stack-notes.md */

.stack-tip{margin-top:1.2rem;font-family:var(--body);font-size:1rem;line-height:1.6;color:#6b6b6b}
.stack-tip strong{display:block;font-family:var(--display);font-weight:700;letter-spacing:.05em;text-transform:uppercase;font-size:.875rem;color:#2A2A2A;margin-bottom:.3rem}
.stack-block--right .stack-tip{margin-left:auto}
.stack-aka{margin-top:1.6rem;font-family:var(--body);font-size:.9rem;font-style:italic;line-height:1.5;color:#6b6b6b;max-width:520px}
.stack-block--right .stack-aka{margin-left:auto}
/* Dark focus ring for the light surface. */
.stack-section :focus-visible{outline-color:#0a0a0a;}

/* Reduced motion. */
@media (prefers-reduced-motion:reduce){
  .stack-block,
.stack-content{
      opacity:1!important;
      transform:none!important;
      transition:none!important;
      animation:none!important;
  }
}
/* No-JS fallback. */
.no-js .stack-block,
.no-js .stack-content{
  opacity:1!important;
  transform:none!important;
}

/* ── Stacked reveals — L/R asymmetric scroll-in ── */
.stack-section{
  background:#faf9f6;
  padding:0 3rem;
  overflow:hidden;
}
.stack-block{
  max-width:1100px;
  margin:0 auto;
  padding:5rem 0;
  display:grid;
  grid-template-columns:4px 1fr;
  gap:0 2.5rem;
  align-items:start;
  position:relative;
}
.stack-block--right{
  grid-template-columns:1fr 4px;
  text-align:right;
}
/* Gold vertical rule. */
.stack-rule{
  width:3px;
  height:0;
  background:linear-gradient(180deg,var(--gold) 0%,var(--gold-dark) 60%,transparent 100%);
  border-radius:2px;
  transition:height 1.8s cubic-bezier(.22,1,.36,1);
  align-self:stretch;
}
.stack-block--right .stack-rule{order:2}
.stack-block.visible .stack-rule{height:100%}
.stack-content{
  opacity:0;
  transition:opacity 1.3s ease .15s,transform 1.3s cubic-bezier(.22,1,.36,1) .15s;
}
.stack-block--left .stack-content{transform:translateX(-60px);}
.stack-block--right .stack-content{transform:translateX(60px);}
.stack-block.visible .stack-content{opacity:1;transform:translateX(0);}
.stack-label{
  font-family:var(--display);font-size:.875rem;font-weight:700;
  letter-spacing:.25em;text-transform:uppercase;
  color:#2A2A2A;margin-bottom:1.2rem;
}
.stack-title{
  font-family:var(--display);
  font-size:clamp(2.4rem,6vw,4.5rem);
  font-weight:500;letter-spacing:.04em;
  text-transform:uppercase;line-height:1.05;
  color:var(--charcoal);
}
.stack-title .gold{color:var(--gold-dark)}
.stack-sub{
  font-family:var(--display);
  font-size:clamp(1rem,1.8vw,1.35rem);
  font-weight:500;letter-spacing:.06em;
  text-transform:uppercase;line-height:1.4;
  color:#6b6b6b;margin-top:1rem;
}
.stack-sub .gold{color:var(--gold-dark)}
.stack-body{
  font-family:var(--body);
  font-size:clamp(1rem,1.3vw,1.1rem);
  font-weight:400;line-height:1.7;
  color:#6b6b6b;margin-top:1rem;
  max-width:520px;
}
.stack-block--right .stack-body{margin-left:auto;margin-right:0;}

/* ── stack-quote / stack-attr ── */
.stack-quote{font-family:'Playfair Display',Georgia,serif;font-size:clamp(1.12rem,1.8vw,1.42rem);font-weight:400;line-height:1.72;color:#3f3f3f;max-width:560px}
.stack-quote .gold{color:var(--gold-dark);font-weight:600}

.stack-block--right .stack-quote{margin-left:auto}
.stack-attr{font-family:var(--display);font-size:.72rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:#6b6b6b;margin-top:1.4rem}

@media(max-width:768px){
  .stack-section{padding:0 1.5rem}
  /* Phone keeps the L/R alternation. */
  .stack-block{
      grid-template-columns:3px 1fr;
      text-align:left;
      padding:3.5rem 0;
      gap:0 1.5rem;
  }
  .stack-block--right{
      grid-template-columns:1fr 3px;
      text-align:right;
  }
  .stack-block--left .stack-content{transform:translateX(-40px);}
  .stack-block--right .stack-content{transform:translateX(40px);}
  .stack-title{font-size:clamp(1.8rem,8vw,2.8rem)}
  .stack-sub{font-size:clamp(.85rem,3.5vw,1.1rem)}
  .stack-body{font-size:clamp(.95rem,3.5vw,1rem)}
}
/* ── stack-meta ── */
.stack-meta{margin-top:1.5rem;display:flex;flex-direction:column;gap:.9rem;max-width:520px}
.stack-block--right .stack-meta{margin-left:auto}
.stack-meta-row{font-family:var(--body);font-size:1rem;line-height:1.6;color:#6b6b6b}
.stack-meta-label{display:block;font-family:var(--display);font-weight:700;letter-spacing:.05em;text-transform:uppercase;font-size:.875rem;color:#2A2A2A;margin-bottom:.25rem}