/* Four reading holds on the portfolio grid, over the complete original camera path. */
.story-journey { height: 650svh; position: relative; }
.story-stage { position: sticky; top: 0; height: 100svh; overflow: hidden; isolation: isolate; background: #0b0b0d; }
.story-canvas { position: absolute; inset: 0; opacity: calc(1 - var(--story-end, 0)); }
/* The stage stays dark until the first frame is ready; the status text sits in .story-controls. */
#studio-root:not([data-load-phase="ready"]) .story-canvas { visibility: hidden; }
.story-canvas > div { height: 100% !important; }
.story-grid { position: absolute; inset: 0; pointer-events: none; opacity: .55; }
.story-grid i { position: absolute; top: 0; bottom: 0; width: 1px; background: #ffffff18; }
.story-grid i:nth-child(1) { left: 25%; } .story-grid i:nth-child(2) { left: 50%; } .story-grid i:nth-child(3) { left: 75%; }
.story-grid b { position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: #ffffff18; }
.story-chapter { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; padding: 150px var(--cell) 95px; opacity: var(--chapter-opacity, 0); pointer-events: none; background: linear-gradient(90deg,#000f 0%,#000e 31%,#000a 47%,transparent 78%); }
.build-page .story-chapter:focus { outline: none; }
.story-chapter > * { width: calc(50% - var(--cell)); max-width: 620px; }
.story-chapter .story-label { font-size: var(--t-meta); color: #a6a6a6; margin: 0 0 32px; }
.story-chapter h1, .story-chapter h2 { margin: 0 0 32px; font-size: clamp(40px,4.5vw,68px); font-weight: 500; line-height: 1.06; letter-spacing: -.035em; text-wrap: balance; }
.story-chapter p { margin: 0 0 20px; font-size: var(--t-h4); line-height: 1.4; max-width: 40ch; }
.story-chapter--4 { background: #000; }
.story-controls { position: absolute; bottom: var(--cell); left: var(--cell); right: var(--cell); display: flex; justify-content: space-between; gap: 20px; font-size: var(--t-meta); }
.story-controls button { border: 0; background: none; padding: 0; color: #fff; font: inherit; cursor: pointer; }
.story-controls .arrow { display: inline-block; transition: transform .35s var(--ez); }
.story-controls button:hover .arrow { transform: translateX(.5ch); }
.story-fallback, .story-journey.is-reading { height: auto; }
.story-fallback { padding-top: 160px; }
.is-reading .story-stage { height: auto; position: relative; overflow: visible; }
.is-reading .story-grid { display: none; }
.story-fallback .story-chapter, .is-reading .story-chapter { position: relative; opacity: 1; padding: 80px var(--cell); background: #000; border-bottom: 1px solid var(--line); pointer-events: auto; }
.is-reading .story-chapters { padding-top: 160px; }
/* Jumps and reading mode land each chapter below the fixed nav; --nav-height is set by build-hero. */
.story-fallback .story-chapter, .is-reading .story-chapter { scroll-margin-top: var(--nav-height, 0px); }
.story-fallback .story-chapter > *, .is-reading .story-chapter > * { margin-left: calc(25% + var(--cell) / 2); }
.is-reading .story-controls { position: relative; padding: var(--cell); left: auto; right: auto; bottom: auto; }
.build-page .nav:not(.is-paper) { background: linear-gradient(#0b0b0d, #0b0b0d00); }
@media (max-width:1023px) {
  .story-grid { display: none; }
  .story-chapter { justify-content: flex-end; padding: 140px var(--cell) 95px; background: linear-gradient(transparent 35%,#0005 45%,#000e 56%,#000f 65%); }
  .story-chapter > * { width: 100%; max-width: 36ch; }
  .story-chapter .story-label { margin-bottom: 20px; font-size: 13px; }
  .story-chapter h1, .story-chapter h2 { font-size: clamp(30px,8vw,52px); margin-bottom: 24px; }
  .story-chapter p { font-size: clamp(16px,4.3vw,21px); margin-bottom: 16px; }
  .story-chapter--4 { background: #000; }
  .story-chapter.story-chapter--4 > *, .story-fallback .story-chapter > *, .is-reading .story-chapter > * { margin-left: 0; }
  .story-controls { font-size: 12px; flex-wrap: wrap; gap: 12px; }
  .story-controls button { min-height: 44px; }
  .story-controls > span { align-self: center; }
  .story-fallback .story-chapter, .is-reading .story-chapter { padding: 48px var(--cell); }
}
@media (prefers-reduced-motion:reduce) { .story-controls .arrow { transition: none; } }
@media (max-width:1023px) and (max-height:650px) {
  .story-chapter { background: linear-gradient(transparent 15%,#000c 32%,#000f 55%); }
  .story-chapter--4 { background: #000; }
}
/* The opening sits at the center of the frame; later chapters retain their layout. */
.story-chapter.story-intro { align-items: center; justify-content: center; text-align: center; padding-block: 0; background: radial-gradient(ellipse at center, #0009, #0005 55%, transparent 85%); }
.story-chapter.story-intro > * { width: 100%; max-width: 620px; margin-inline: 0; }
.story-chapter.story-intro p { max-width: 40ch; }
.story-chapter.story-intro > :last-child { margin-bottom: 0; }
.story-fallback .story-intro, .is-reading .story-intro { padding-block: 80px; background: #000; }

/* Closing chapter: centered as a group, using the Nyme/Kaizen close type scale. */
.story-chapter.story-chapter--4, .story-fallback #system { align-items: center; justify-content: center; text-align: center; }
.story-chapter.story-chapter--4 { padding-block: 0; }
.story-chapter.story-chapter--4 > *, .story-fallback #system > * { width: 100%; max-width: 620px; margin-inline: 0; }
.story-chapter.story-chapter--4 h2, .story-fallback #system h2 { font-size: var(--t-h1); line-height: 1.1; letter-spacing: -.032em; }
.story-chapter.story-chapter--4 p, .story-fallback #system p { max-width: 44ch; font-size: var(--t-h4); font-weight: 500; line-height: 1.4; letter-spacing: -.012em; }
.story-chapter.story-chapter--4 .story-label, .story-fallback #system .story-label { font-size: var(--t-meta); font-weight: 400; }
.story-chapter.story-chapter--4 > :last-child, .story-fallback #system > :last-child { margin-bottom: 0; }
.is-reading .story-chapter--4 { padding-block: 80px; }

/* One grid row recaps the four chapters before the closing invitation. */
.build-summary__grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); min-height: var(--row); }
.build-summary h2 { margin: 0 0 var(--cell); font-size: var(--t-h3); font-weight: 500; line-height: 1.2; letter-spacing: -.025em; }
.build-summary p { margin: 0; max-width: 32ch; font-size: var(--t-body); line-height: 1.4; }
.build-summary .build-summary__number { margin-bottom: calc(var(--cell) * 2); font-size: var(--t-meta); color: var(--ink-2); }
/* A link inside running text needs a mark at rest; colour, hover accent and focus ring come from .build-page a. */
.build-summary p a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
@media (max-width:1023px) {
  .build-summary__grid { grid-template-columns: repeat(2,minmax(0,1fr)); min-height: 0; }
  .build-summary__grid > .cell { padding-block: calc(var(--cell) * 2); }
  .build-summary__grid > .cell:nth-child(even) { border-left: 1px solid var(--line); }
  .build-summary__grid > .cell:nth-child(n+3) { border-top: 1px solid var(--line); }
  .build-summary h2 { font-size: 24px; }
  .build-summary p { font-size: 16px; }
}
@media (max-width:479px) {
  .build-summary__grid { grid-template-columns: 1fr; }
  .build-summary__grid > .cell:nth-child(even) { border-left: 0; }
  .build-summary__grid > .cell + .cell { border-top: 1px solid var(--line); }
  .build-summary .build-summary__number { margin-bottom: var(--cell); }
}

/* Closing invitation: the homepage contact grid and shared content-action style. */
.build-page .build-contact:focus { outline: none; }
.build-page .nav.is-hidden:has(:focus-visible) { transform: translateY(0); }
.build-contact .contact__h { grid-column: 2 / 4; grid-row: 1; align-self: center; justify-self: center; text-align: center; }
.build-contact .contact__h h2 { margin: 0 auto; max-width: 20ch; font-size: min(var(--t-xxl), calc(var(--row) / 3.4)); font-weight: 500; line-height: 1; letter-spacing: -.04em; }
.build-contact .contact__lede { grid-column: 2 / 4; grid-row: 2; align-self: center; justify-self: center; text-align: center; }
.build-contact .contact__lede p { margin: 0 auto; max-width: 44ch; font-size: var(--t-h4); font-weight: 500; line-height: 1.4; letter-spacing: -.012em; }
@media (max-width:1023px) {
  .build-contact .system-grid { padding-block: calc(var(--cell) * 4); gap: var(--cell); }
  .build-contact .contact__h, .build-contact .contact__lede, .build-contact .contact__cta { grid-column: 1 / -1; }
  .build-contact .contact__h h2 { font-size: clamp(45px, 12vw, 80px); }
  .build-contact .contact__cta { grid-row: 3; }
}
@media (max-width:1023px) {
  /* Same fluid mobile rem basis and multipliers as nyme.html and kaizen.html,
     scoped here so the earlier animation chapters keep their current sizing. */
  .story-chapter--4, .story-fallback #system, .build-contact {
    --closing-base: clamp(13px, calc(100vw / 24.375), 18px);
    --t-h1: calc(var(--closing-base) * 1.875);
    --t-h4: calc(var(--closing-base) * 1.31);
    --t-meta: calc(var(--closing-base) * .9375);
  }
  .build-contact .system-link { font-size: var(--t-meta); }
}