/* ==========================================================================
   STORYBOARD V3 (2026-11-09) - built to THE APPLE STANDARD (APPLE-STANDARD.md)
   Loaded after projects.css on story pages only (projects/*-story.html).
   One type family (Inter) for all story content. One idea per screen.
   The scene is the picture; everything else is type and air.
   Accent colour lives on the primary button and links only.
   No progress bar, no hairline chapter dividers, no bordered boxes
   competing with the scene. Pinned sequences are desktop-only;
   reduced motion and narrow screens get the designed static version.
   ========================================================================== */

.sb3 {
  font-family: "Inter", var(--font-sans, "Inter"), sans-serif;
  color: var(--text-primary);
  /* Pull the story flush to the top of the viewport, cancelling the
     inner-page top offset (.page-main padding-top in inner.css), so the
     cold open scene fills the first screen behind the glass nav. */
  margin-top: -120px;
}

/* Content column for the static chapters (kept from the site system) */
.sb-wrap {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Shared atoms ------------------------------------------------------ */
.sb3-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 26px;
}
.sb3-support {
  font-size: 17px;
  line-height: 1.47;
  color: var(--text-secondary);
  max-width: 680px;
  margin: 0;
}
.sb3-caption {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 640px;
  margin: 22px 0 0;
}

/* Section 1. Cold open ---------------------------------------------- */
.sb3-open {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  padding: 120px 24px 72px;
}
.sb3-open-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.sb3-open::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 62%;
  background: linear-gradient(180deg, transparent, rgba(3, 6, 14, 0.78));
  pointer-events: none;
}
.sb3-open-label {
  position: absolute;
  top: 112px;
  left: 24px;
  z-index: 2;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
  margin: 0;
  text-shadow: 0 1px 14px rgba(3, 6, 14, 0.55);
}
.sb3-open-copy {
  position: relative;
  z-index: 2;
  max-width: 1160px;
  width: 100%;
  margin: 0 auto;
}
.sb3-open-copy h1 {
  font-weight: 600;
  font-size: clamp(44px, 6.4vw, 76px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: #fff;
  margin: 0 0 18px;
  max-width: 900px;
}
.sb3-open-copy p {
  font-size: 17px;
  line-height: 1.47;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
}

/* Pinned sequences: common ------------------------------------------ */
.sb3-track { display: none; position: relative; height: 300vh; }
body.sb3-live .sb3-track { display: block; }
.sb3-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: #0a1428;
}
.sb3-stage-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
#seqB-calm { opacity: 0; }
.sb3-stage::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 52%;
  background: linear-gradient(180deg, transparent, rgba(3, 6, 14, 0.66));
  pointer-events: none;
  z-index: 1;
}

/* Section 2 beats ---------------------------------------------------- */
.sb3-cap {
  position: absolute;
  left: max(24px, calc(50vw - 580px));
  bottom: 10vh;
  z-index: 3;
  font-weight: 600;
  font-size: clamp(26px, 3.6vw, 42px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: #fff;
  max-width: 620px;
  margin: 0;
  opacity: 0;
}
.sb3-question {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 13vh;
  z-index: 3;
  width: min(880px, calc(100vw - 48px));
  text-align: center;
  font-weight: 600;
  font-size: clamp(24px, 3.2vw, 38px);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: #fff;
  margin: 0;
  opacity: 0;
}

/* Section 3 beats: the conversation, staged large -------------------- */
.sb3-chat {
  position: absolute;
  right: 6vw;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  width: min(560px, calc(100vw - 48px));
  background: rgba(7, 12, 24, 0.88);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 20px;
  padding: 26px 28px 22px;
  opacity: 0;
}
.sb3-chat-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 16px;
}
.sb3-chat-q {
  margin-left: auto;
  max-width: 92%;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 14px 14px 4px 14px;
  padding: 12px 15px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--text-primary);
  opacity: 0;
}
.sb3-think {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 16px 0 2px;
  opacity: 0;
}
.sb3-dots { display: inline-flex; gap: 4px; }
.sb3-dots i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--text-secondary);
  animation: sb3-pulse 1.1s ease-in-out infinite;
}
.sb3-dots i:nth-child(2) { animation-delay: 0.18s; }
.sb3-dots i:nth-child(3) { animation-delay: 0.36s; }
@keyframes sb3-pulse {
  0%, 100% { opacity: 0.25; }
  50% { opacity: 1; }
}
.sb3-think span { font-size: 13px; color: var(--text-muted); }
.sb3-a {
  margin-top: 14px;
  font-size: 18px;
  line-height: 1.55;
  color: var(--text-primary);
  opacity: 0;
}
.sb3-a p { margin: 0; }
.sb3-a strong { font-weight: 700; }
.sb3-src {
  margin-top: 16px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text-muted);
  opacity: 0;
}
.sb3-src b { color: var(--text-secondary); font-weight: 600; }

/* Section 3 final beat: the number, staged as type ------------------- */
.sb3-stat {
  position: absolute;
  inset: 0;
  z-index: 5;
  background: radial-gradient(ellipse 78% 62% at 50% 50%, rgba(3, 6, 14, 0.52), rgba(3, 6, 14, 0) 72%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 24px;
  opacity: 0;
  pointer-events: none;
}
.sb3-stat-num {
  font-weight: 600;
  font-size: clamp(56px, 10vw, 118px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0 0 20px;
  text-shadow: 0 4px 44px rgba(3, 6, 14, 0.6);
}
.sb3-stat-sub {
  font-size: 17px;
  line-height: 1.47;
  color: rgba(255, 255, 255, 0.88);
  max-width: 540px;
  margin: 0;
  text-shadow: 0 2px 20px rgba(3, 6, 14, 0.6);
}

/* Section 4 beats: type only, on a quiet dark stage ------------------ */
.sb3-stage-dark { background: #060b18; }
.sb3-stage-dark::after { display: none; }
.sb3-edu {
  position: relative;
  z-index: 2;
  height: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.sb3-edu-lead {
  font-weight: 600;
  font-size: clamp(26px, 3.6vw, 40px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin: 0 0 16px;
}
.sb3-edu-note {
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0;
}
.sb3-edu-lines { margin-top: 8px; }
.sb3-line {
  font-size: clamp(22px, 2.8vw, 28px);
  line-height: 1.4;
  color: var(--text-primary);
  margin: 0 0 20px;
  opacity: 0;
}
.sb3-teach {
  font-weight: 600;
  font-size: clamp(30px, 4.4vw, 46px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin: 12px 0 0;
  opacity: 0;
}

/* Static version: reduced motion, narrow screens, no JS -------------- */
.sb3-fallback { padding: 84px 0 10px; }
body.sb3-live .sb3-fallback { display: none; }
.sb3-fallback figure { margin: 0 0 40px; }
.sb3-fallback img {
  width: 100%;
  display: block;
  border-radius: 20px;
}
.sb3-fallback ol {
  max-width: 720px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: sb3-step;
}
.sb3-fallback li {
  counter-increment: sb3-step;
  padding: 22px 0;
  font-size: 17px;
  line-height: 1.55;
  color: var(--text-secondary);
}
.sb3-fallback li::before {
  content: "0" counter(sb3-step);
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.24em;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.sb3-fallback li strong { color: var(--text-primary); font-weight: 600; }
.sb3-fallback-calm { margin-top: 40px; }

/* Chapters ------------------------------------------------------------ */
.sb3-chapter { padding: 130px 0 10px; }
.sb3-chapter h2 {
  font-weight: 600;
  font-size: clamp(32px, 4.6vw, 48px);
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--text-primary);
  margin: 0 0 20px;
  max-width: 760px;
}

/* Section 5: the six documents, as a quiet list (kept from V2) ------- */
.sb3-docs {
  list-style: none;
  margin: 44px 0 8px;
  padding: 0;
  max-width: 860px;
  border-top: 1px solid rgba(186, 230, 253, 0.12);
}
.sb3-docs li {
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding: 15px 2px;
  border-bottom: 1px solid rgba(186, 230, 253, 0.12);
}
.sb3-docs .d-num {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--text-muted);
  flex: none;
}
.sb3-docs .d-name {
  font-size: 17px;
  font-weight: 600;
  color: var(--text-primary);
}
.sb3-docs .d-note {
  margin-left: auto;
  text-align: right;
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.5;
}
.sb3-closing-line {
  font-size: 17px;
  line-height: 1.47;
  color: var(--text-secondary);
  max-width: 680px;
  margin: 30px 0 0;
}

/* Section 6: four claims, separated by space only --------------------- */
.sb3-claim { margin-top: 92px; }
.sb3-claim:first-of-type { margin-top: 54px; }
.sb3-claim h3 {
  font-weight: 600;
  font-size: clamp(24px, 3.2vw, 34px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin: 0 0 14px;
}
.sb3-claim p {
  font-size: 17px;
  line-height: 1.5;
  color: var(--text-secondary);
  max-width: 680px;
  margin: 0;
}

/* Section 7: the evidence, staged as type ----------------------------- */
.sb3-ev-q {
  font-weight: 600;
  font-size: clamp(24px, 3.4vw, 38px);
  line-height: 1.28;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  max-width: 840px;
  margin: 6px 0 30px;
}
.sb3-ev-a { max-width: 680px; }
.sb3-ev-a p {
  font-size: 19px;
  line-height: 1.55;
  color: var(--text-primary);
  margin: 0 0 12px;
}
.sb3-ev-a .sb3-ev-src {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-muted);
  margin-top: 18px;
}
/* Placeholder for the branded demo screenshot (rebrand run pending).
   Temporary by design: it is replaced by the real capture on delivery. */
.sb3-shot-slot {
  margin: 48px 0 8px;
  max-width: 980px;
  aspect-ratio: 16 / 7;
  border: 1px dashed rgba(186, 230, 253, 0.3);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sb3-shot-slot p {
  font-size: 13px;
  line-height: 1.65;
  color: var(--text-muted);
  text-align: center;
  margin: 0;
  padding: 0 24px;
}
.sb3-ev-h {
  font-weight: 600;
  font-size: clamp(21px, 2.8vw, 28px);
  line-height: 1.25;
  color: var(--text-primary);
  margin: 96px 0 26px;
  max-width: 680px;
}
.sb3-kept {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 760px;
}
.sb3-kept li {
  font-size: 17px;
  line-height: 1.5;
  color: var(--text-secondary);
  padding: 9px 0;
}
.sb3-kept li strong { color: var(--text-primary); font-weight: 600; }

/* Section 8: three rows and the closing claim -------------------------- */
.sb3-row { margin-top: 40px; }
.sb3-row:first-of-type { margin-top: 8px; }
.sb3-row p {
  font-size: 17px;
  line-height: 1.5;
  color: var(--text-secondary);
  max-width: 680px;
  margin: 0;
}
.sb3-row p strong { color: var(--text-primary); font-weight: 600; }
.sb3-bigclaim {
  font-weight: 600;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  max-width: 780px;
  margin: 96px 0 0;
}

/* Section 9: close and small print ------------------------------------- */
.sb3-close { padding: 150px 0 60px; }
.sb3-close h2 {
  font-weight: 600;
  font-size: clamp(32px, 4.8vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--text-primary);
  margin: 0 0 18px;
  max-width: 760px;
}
.sb3-actions { margin: 38px 0 0; }
.sb3-quiet-links {
  margin: 30px 0 0;
  font-size: 15px;
  color: var(--text-muted);
}
.sb3-quiet-links a {
  color: var(--text-secondary);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.sb3-quiet-links span { margin: 0 10px; }
.sb3-smallprint {
  margin-top: 84px;
  max-width: 640px;
}
.sb3-smallprint p {
  font-size: 12px;
  line-height: 1.65;
  color: var(--text-muted);
  margin: 0 0 8px;
}

/* Narrow screens: the static version carries the story ----------------- */
@media (max-width: 820px) {
  .sb3 { margin-top: -96px; }
  .sb3-track { display: none !important; }
  .sb3-fallback { display: block !important; padding-top: 64px; }
  .sb3-open { padding: 110px 20px 54px; }
  .sb3-open-label { left: 20px; top: 100px; }
  .sb3-open-copy h1 { font-size: clamp(38px, 11vw, 52px); }
  /* Phone cold open uses the dedicated portrait crop (maya-chaos-phone.webp,
     composed on Maya's face, receiver and desk) via <picture>; the centred
     cover crop of that portrait frame keeps the whole subject in frame at
     any phone aspect ratio. */
  .sb3-open-img { object-position: 50% 50%; }
  /* The cold open already shows the chaos scene full-screen, so the static
     version's lead figure would repeat the same photo back to back.
     On phone the steps start straight after the hero. */
  .sb3-fallback .sb3-fallback-lead { display: none; }
  .sb3-fallback { padding-top: 40px; }
  /* Quiet links get real tap height on phone. */
  .sb3-quiet-links a { display: inline-block; padding: 12px 4px; }
  .sb3-chapter { padding: 92px 0 8px; }
  .sb3-claim { margin-top: 64px; }
  .sb3-docs .d-note { display: none; }
  .sb3-ev-h { margin-top: 64px; }
  .sb3-bigclaim { margin-top: 64px; }
  .sb3-close { padding: 100px 0 50px; }
}

/* Reduced motion: no pinned sequences; the fallback tells the story ---- */
@media (prefers-reduced-motion: reduce) {
  .sb3-track { display: none !important; }
  .sb3-fallback { display: block !important; }
  .sb3-dots i { animation: none; opacity: 0.7; }
}