/* ==========================================================================
   MY STORY — four-act cinematic collage
   Organized calm on a disciplined 12-column grid. Cards carry authored
   placement as custom properties (--d-* desktop, --t-* tablet) set inline
   from story_data.json; mobile ignores them and reads top-to-bottom.
   Foundation C: Newsreader display / Inter UI / approved palette only.
   Type direction: light, editorial weights — display serif at 500,
   UI labels at 600 max. Bold is reserved for nothing on this page.
   ========================================================================== */

/* ---- Page shell -------------------------------------------------------- */

body.story-acts-page .site-sky {
    display: none;
}

body.story-acts-page .main-content {
    overflow-x: clip;
    overflow-y: visible;
    background: transparent;
}

/* sky-glass.css paints a white halo behind every heading on slate-light
   pages; over this page's dark rail it reads as a glow. Kill it here. */
body.story-acts-page :is(h1, h2, h3) {
    text-shadow: none;
}

.story-acts {
    --st-ink: #0a1b36;
    --st-muted: #4c5d75;
    --st-indigo: #203767;
    --st-azure: #4ea3ff;
    --st-cyan: #2f5296;
    --st-amber: #b87900;
    --st-cloud: #f6f8fc;
    --st-night: #060b18;
    --st-card-radius: 0.85rem;
    --st-display: "Newsreader", "Newsreader", Georgia, serif;
    --st-ui: "Inter", ui-sans-serif, system-ui, sans-serif;
    --st-hand: "Caveat", "Segoe Script", cursive;
    position: relative;
    color: var(--st-ink);
    font-family: var(--st-ui);
}

/* ---- Acts: four full-bleed editorial bands ------------------------------ */

.story-act {
    position: relative;
    isolation: isolate;
    min-height: 0;
    padding: 0;
    scroll-margin-top: 4.25rem;
    border-top: 2px solid rgb(255 255 255 / 92%);
}

.story-act::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background-position: center;
    background-size: cover;
}

/* Act atmospheres. Each band reads like one large card with its own
   photographic backdrop: light peaks, dark dusk, bright outdoors, night. */
/* Act One's landscape photo is a data-driven backdrop CARD, so the band
   behind it only needs a quiet sky wash. */
.story-act--day::before {
    background: linear-gradient(180deg, #f4f8fd 0%, #e9f1fa 55%, #dfeaf7 100%);
}

.story-act--dusk::before {
    background:
        linear-gradient(180deg, rgb(8 15 30 / 86%) 0%, rgb(11 20 38 / 76%) 48%, rgb(6 12 25 / 90%) 100%),
        url("../images/cinematic/story-sunset-bg.jpg") center / cover no-repeat,
        #0b1426;
}

.story-act--bright::before {
    background:
        linear-gradient(180deg, rgb(242 247 253 / 72%) 0%, rgb(236 244 252 / 52%) 50%, rgb(223 236 249 / 76%) 100%),
        url("../images/cinematic/together-summit.jpg") center 30% / cover no-repeat,
        #e9f2fb;
}

.story-act--night::before {
    background:
        linear-gradient(180deg, rgb(6 11 22 / 90%) 0%, rgb(10 19 38 / 82%) 55%, rgb(5 9 20 / 93%) 100%),
        url("../images/cinematic/hero-aurora.jpg") center / cover no-repeat,
        #070d1c;
}

/* Keep the reference's crisp white dividers between acts. */
.story-act + .story-act::before {
    -webkit-mask-image: none;
    mask-image: none;
}

/* ---- The canvas: black editorial rail + authored scrapbook ------------- */

.story-canvas {
    display: grid;
    grid-template-columns: clamp(10.75rem, 15vw, 14.75rem) minmax(0, 1fr);
    position: relative;
    width: 100%;
    max-width: none;
    padding: 0;
}

.story-collage {
    display: grid;
    grid-column: 2;
    grid-row: 1;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-rows: minmax(3.1rem, auto);
    grid-auto-flow: dense;
    gap: clamp(0.85rem, 1.3vw, 1.35rem);
    position: relative;
    min-width: 0;
    padding: clamp(1.25rem, 2vw, 2.1rem);
    padding-right: clamp(1.4rem, 2.4vw, 2.5rem);
}

#act-now .story-collage { min-height: clamp(40rem, 48vw, 47rem); }
#act-becoming .story-collage { min-height: clamp(33rem, 39vw, 39rem); }
#act-life .story-collage { min-height: clamp(42rem, 50vw, 49rem); }
#act-next .story-collage { min-height: clamp(30rem, 35vw, 35rem); }

/* ---- Act headers: persistent editorial rail ---------------------------- */

.story-act__head {
    display: flex;
    grid-column: 1;
    grid-row: 1;
    flex-direction: column;
    align-self: stretch;
    max-width: none;
    padding: clamp(2rem, 3.5vw, 3.75rem) clamp(1.2rem, 2vw, 2rem);
    color: #f4f7fb;
    background: linear-gradient(180deg, #0a0e14 0%, #05080d 100%);
    z-index: 6;
}

.story-act__head::after {
    content: "";
    order: 3;
    width: 2rem;
    height: 2px;
    margin-top: 1.2rem;
    background: var(--st-azure);
}

.story-act__eyebrow {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin: 0;
    color: var(--st-azure);
    font-size: 0.74rem;
    font-weight: 650;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.story-act__eyebrow > span {
    display: none;
    font-family: var(--st-display);
    font-size: 1.5rem;
    font-weight: 500;
    letter-spacing: 0;
}

.story-act :is(h1, h2) {
    order: 1;
    margin: 0.6rem 0 0;
    color: #f4f7fb;
    font-family: var(--st-display);
    font-size: clamp(2.05rem, 2.65vw, 3.05rem);
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1.12;
    max-width: none;
}

.story-act__intro {
    order: 4;
    max-width: 24ch;
    margin: 1.25rem 0 0;
    color: #b7c3d3;
    font-size: clamp(0.88rem, 0.95vw, 0.98rem);
    font-weight: 400;
    line-height: 1.62;
}

.story-act__eyebrow { order: 0; }

.story-act--night .story-act__eyebrow { color: var(--st-cyan); }
.story-act--night :is(h1, h2) { color: #f2f7ff; }
.story-act--night .story-act__intro { color: #b7c3d3; }

/* ---- Card base ---------------------------------------------------------- */

.st-card {
    position: relative;
    min-width: 0;
    grid-column: var(--d-col, auto / span 3);
    grid-row: var(--d-row, auto);
    z-index: var(--d-z, 1);
    transform: translate(var(--d-x, 0), var(--d-y, 0)) rotate(var(--d-rot, 0deg));
}

.story-collage > .st-card {
    align-self: stretch;
}

/* ---- Surfaces ------------------------------------------------------------
   Three quiet families, matched to the reference: clean near-opaque white,
   deep midnight navy, and warm note paper. Shadows stay soft and close. */

.sc-glass,
.sc-ai {
    padding: clamp(1.05rem, 1.4vw, 1.5rem);
    background: rgb(255 255 255 / 93%);
    border: 1px solid rgb(255 255 255 / 90%);
    border-radius: var(--st-card-radius);
    box-shadow: 0 0.7rem 1.9rem rgb(10 27 54 / 12%);
    backdrop-filter: blur(14px) saturate(120%);
}

.sc-dark,
.sc-var-dark,
.sc-closing {
    padding: clamp(1.15rem, 1.55vw, 1.7rem);
    color: #f2f7ff;
    background: linear-gradient(160deg, #1a2b50 0%, #0c1830 100%);
    border: 1px solid rgb(122 156 255 / 22%);
    border-radius: var(--st-card-radius);
    box-shadow: 0 0.9rem 2.2rem rgb(4 12 28 / 30%);
}

.sc-paper {
    padding: clamp(1rem, 1.35vw, 1.4rem);
    background: linear-gradient(165deg, #fdf9ec 0%, #f8f0da 100%);
    border: 1px solid rgb(178 143 66 / 24%);
    border-radius: 0.5rem;
    box-shadow: 0 0.7rem 1.8rem rgb(74 55 15 / 13%);
}

/* Keepsake notes that the reference renders on clean white stock. */
.sc-paper.sc-var-white {
    background: rgb(255 255 255 / 94%);
    border: 1px solid rgb(255 255 255 / 88%);
    border-radius: var(--st-card-radius);
    box-shadow: 0 0.7rem 1.9rem rgb(10 27 54 / 12%);
}

.sc-stat {
    display: grid;
    align-content: center;
    gap: 0.3rem;
    padding: 1.1rem 1.2rem;
    text-align: left;
    background: rgb(255 255 255 / 90%);
    border: 1px solid rgb(255 255 255 / 85%);
    border-radius: var(--st-card-radius);
    box-shadow: 0 0.7rem 1.9rem rgb(10 27 54 / 12%);
    backdrop-filter: blur(12px) saturate(118%);
}

/* The reference renders statistics as midnight cards. */
.sc-stat.sc-var-dark {
    display: grid;
    padding: 1.1rem 1.2rem;
    background: linear-gradient(160deg, #1a2b50 0%, #0c1830 100%);
    backdrop-filter: none;
}

@supports not (backdrop-filter: blur(1px)) {
    .sc-glass,
    .sc-ai,
    .sc-stat {
        background: rgb(255 255 255 / 97%);
    }
}

/* ---- Image cards: edge-to-edge photography ------------------------------ */

.sc-image {
    display: flex;
    min-height: 12rem;
}

.sc-figure {
    position: relative;
    display: flex;
    flex: 1;
    overflow: hidden;
    margin: 0;
    border: 1px solid rgb(255 255 255 / 72%);
    border-radius: var(--st-card-radius);
    box-shadow: 0 0.9rem 2.2rem rgb(10 27 54 / 20%);
}

.sc-figure img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sc-figure figcaption {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    padding: 2.25rem 1.1rem 0.85rem;
    color: #fff;
    background: linear-gradient(180deg, transparent, rgb(6 17 33 / 74%));
    font-size: 0.85rem;
    font-weight: 500;
    line-height: 1.45;
    text-shadow: 0 1px 6px rgb(0 0 0 / 40%);
}

.sc-figure__eyebrow {
    position: absolute;
    top: 0.9rem;
    left: 0.9rem;
    z-index: 1;
    padding: 0.42rem 0.85rem;
    color: var(--st-ink);
    background: rgb(255 255 255 / 90%);
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 650;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    backdrop-filter: blur(8px);
}

.sc-anchor.sc-image { min-height: 22rem; }

/* Backdrop variant: one landscape photo underlays an act's whole collage
   and the cards compose around its subjects. Purely layout-driven — the
   photo, its alt text, and its grid span all come from the story data. */
.sc-image.sc-var-backdrop .sc-figure {
    border: 1px solid rgb(255 255 255 / 78%);
    border-radius: 1.05rem;
    box-shadow: 0 1.2rem 3rem rgb(10 27 54 / 22%);
}

/* Scrapbook language from the reference: selected real photos become
   physical-looking prints without changing their semantic image markup. */
.sc-image.sc-var-polaroid .sc-figure {
    overflow: visible;
    background: #fffdf9;
    border: 0;
    border-radius: 0.25rem;
    box-shadow: 0 0.8rem 1.9rem rgb(10 27 54 / 18%);
}

.sc-image.sc-var-polaroid .sc-figure picture {
    position: absolute;
    inset: 0.5rem 0.5rem 2.65rem;
    overflow: hidden;
    border-radius: 0.12rem;
}

.sc-image.sc-var-polaroid .sc-figure img {
    position: absolute;
}

.sc-image.sc-var-polaroid .sc-figure figcaption {
    padding: 0.7rem 0.85rem 0.55rem;
    color: #243550;
    background: #fffdf9;
    font-family: var(--st-hand);
    font-size: clamp(1rem, 1.25vw, 1.3rem);
    font-weight: 500;
    line-height: 1;
    text-shadow: none;
}

.sc-image.sc-var-film .sc-figure {
    border: 0.4rem solid #f8f5ed;
    border-bottom-width: 1.8rem;
    border-radius: 0.3rem;
    box-shadow: 0 0.8rem 1.9rem rgb(10 27 54 / 16%);
}

#act-now-now-maui .sc-figure img { object-position: 50% 38%; }
#act-now-now-danielle .sc-figure img { object-position: 50% 32%; }
#act-now-now-home .sc-figure img { object-position: center; }
#act-life-life-race .sc-figure img { object-position: 50% 22%; }
/* Tall reflection shot: keep the crop on the real couple, not the mirror. */
#act-life-life-bali .sc-figure img { object-position: 50% 32%; }
#act-next-next-bridge .sc-figure img { object-position: center; }

#act-life .sc-anchor.sc-image { min-height: 14rem; }
#act-now-now-purpose .sc-title { font-size: clamp(1.15rem, 1.4vw, 1.55rem); }

/* ---- Shared content pieces ---------------------------------------------- */

.sc-eyebrow {
    margin: 0;
    color: #3568c0;
    font-size: 0.7rem;
    font-weight: 650;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.sc-dark .sc-eyebrow,
.sc-var-dark .sc-eyebrow {
    color: #8fd7de;
}

.sc-paper .sc-eyebrow {
    color: #8a6323;
}

.sc-title {
    margin: 0.5rem 0 0;
    font-family: var(--st-display);
    font-size: clamp(1.3rem, 1.55vw, 1.75rem);
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1.12;
}

.sc-anchor .sc-title {
    font-size: clamp(1.75rem, 2.15vw, 2.5rem);
}

.sc-body {
    margin: 0.55rem 0 0;
    color: var(--st-muted);
    font-size: 0.92rem;
    font-weight: 400;
    line-height: 1.6;
}

.sc-dark .sc-body,
.sc-var-dark .sc-body {
    color: #c3d0df;
}

.sc-list {
    display: grid;
    gap: 0.85rem;
    margin: 0.95rem 0 0;
    padding: 0;
    list-style: none;
}

.sc-list li {
    display: flex;
    gap: 0.7rem;
    align-items: flex-start;
}

.sc-list__icon {
    display: grid;
    flex: none;
    width: 2rem;
    height: 2rem;
    place-items: center;
    color: #3d63c4;
    background: rgb(32 55 103 / 9%);
    border-radius: 0.55rem;
}

.sc-list__icon svg {
    width: 1.1rem;
    height: 1.1rem;
}

.sc-list__text {
    display: grid;
    gap: 0.12rem;
}

.sc-list strong {
    color: var(--st-ink);
    font-size: 0.85rem;
    font-weight: 600;
}

.sc-list__text > span {
    color: var(--st-muted);
    font-size: 0.82rem;
    font-weight: 400;
    line-height: 1.45;
}

.sc-hand {
    margin: 0.4rem 0 0;
    color: #1d3a6e;
    font-family: var(--st-hand);
    font-size: clamp(1.45rem, 1.7vw, 1.8rem);
    font-weight: 500;
    line-height: 1.15;
}

.sc-attrib {
    margin: 0.5rem 0 0;
    color: #8a6323;
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.05em;
}

.sc-checklist {
    display: grid;
    gap: 0.5rem;
    margin: 0.8rem 0 0;
    padding: 0;
    list-style: none;
    color: #3c4d66;
    font-family: var(--st-hand);
    font-size: 1.3rem;
    font-weight: 500;
    line-height: 1.1;
}

.sc-checklist li::before {
    content: "✓ ";
    color: var(--st-amber);
}

/* The reference paints its big keepsake numbers in confident periwinkle. */
.sc-ghost {
    position: absolute;
    right: 0.8rem;
    bottom: 0.3rem;
    z-index: 0;
    color: rgb(32 55 103 / 30%);
    font-family: var(--st-display);
    font-size: clamp(4.25rem, 5.5vw, 6.5rem);
    font-weight: 500;
    line-height: 1;
    pointer-events: none;
}

.sc-var-dark .sc-ghost {
    color: rgb(78 163 255 / 24%);
}

.sc-link {
    display: inline-flex;
    min-height: 2.75rem;
    align-items: center;
    gap: 0.45rem;
    margin-top: 0.6rem;
    color: #2b62c2;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
}

.sc-link:hover,
.sc-link:focus-visible {
    text-decoration: underline;
}

/* ---- Statistic cards ----------------------------------------------------- */

.sc-stat-value {
    color: #173f82;
    font-family: var(--st-display);
    font-size: clamp(2.3rem, 2.8vw, 3.3rem);
    font-weight: 500;
    line-height: 1;
}

.sc-stat.sc-var-dark .sc-stat-value {
    color: #eef4ff;
}

.sc-stat-label {
    color: var(--st-ink);
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.35;
}

.sc-stat.sc-var-dark .sc-stat-label {
    color: #dfe9f6;
}

.sc-stat-context {
    color: var(--st-muted);
    font-size: 0.76rem;
    font-weight: 400;
    line-height: 1.5;
}

.sc-stat.sc-var-dark .sc-stat-context {
    color: #9fb2cc;
}

/* ---- Chapters (Act Two) -------------------------------------------------- */

.story-chapter-path {
    position: absolute;
    inset: 0.75rem;
    z-index: 1;
    width: calc(100% - 1.5rem);
    height: calc(100% - 1.5rem);
    overflow: visible;
    pointer-events: none;
}

.story-chapter-path path {
    fill: none;
    stroke: rgb(255 255 255 / 45%);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: 3 8;
}

.sc-chapter {
    padding: clamp(1.1rem, 1.4vw, 1.5rem);
    background: rgb(255 255 255 / 94%);
    border: 1px solid rgb(255 255 255 / 88%);
    border-radius: var(--st-card-radius);
    box-shadow: 0 0.9rem 2.2rem rgb(4 12 28 / 26%);
    backdrop-filter: blur(12px) saturate(115%);
}

.sc-chapter.sc-var-ember {
    color: #fff8ef;
    background:
        radial-gradient(circle at 85% 110%, rgb(255 176 106 / 30%), transparent 55%),
        linear-gradient(150deg, #571f0d 0%, #a34a1c 100%);
    border: 1px solid rgb(255 200 150 / 22%);
}

.sc-chapter.sc-var-clinical {
    background:
        linear-gradient(90deg, rgb(255 255 255 / 97%) 0 58%, rgb(214 226 232 / 90%) 100%),
        #f2f5f6;
}

.sc-chapter.sc-var-summit {
    background:
        linear-gradient(90deg, rgb(246 238 224 / 96%) 0 36%, rgb(246 238 224 / 62%) 54%, rgb(30 30 50 / 8%) 78%),
        url("../images/cinematic/story-card-turning.jpg") right center / cover no-repeat;
}

.sc-chapter.sc-var-workbench {
    background:
        repeating-linear-gradient(0deg, transparent 0 17px, rgb(49 95 145 / 5%) 17px 18px),
        rgb(250 251 252 / 96%);
}

.sc-chapter.sc-var-air {
    background:
        linear-gradient(100deg, rgb(255 255 255 / 96%) 0 46%, rgb(255 255 255 / 52%) 66%, rgb(255 255 255 / 5%) 90%),
        url("../images/cinematic/work-clouds.jpg") 80% 30% / cover no-repeat;
}

.sc-chapter.sc-var-systems,
.sc-chapter.sc-var-code {
    color: #f2f7ff;
    background:
        radial-gradient(circle at 88% 10%, rgb(46 200 211 / 16%), transparent 34%),
        linear-gradient(160deg, #1a2b50 0%, #0c1830 100%);
    border: 1px solid rgb(122 156 255 / 22%);
    box-shadow: 0 1rem 2.6rem rgb(4 12 28 / 34%);
    backdrop-filter: none;
}

.sc-chapter.sc-var-code {
    background:
        repeating-linear-gradient(0deg, transparent 0 16px, rgb(46 200 211 / 7%) 16px 17px),
        linear-gradient(140deg, #101f3d 0%, #0a1526 100%);
}

.sc-chapter:is(.sc-var-ember, .sc-var-systems, .sc-var-code) :is(.sc-title, .sc-body),
.sc-chapter.sc-var-summit .sc-title {
    color: #f2f7ff;
}

.sc-chapter.sc-var-summit .sc-title {
    max-width: 10ch;
    color: var(--st-ink);
    font-size: clamp(1.7rem, 2.3vw, 2.7rem);
}

.sc-chapter.sc-var-summit .sc-body { max-width: 26ch; color: #33445c; }
.sc-chapter:is(.sc-var-ember, .sc-var-systems, .sc-var-code) .sc-eyebrow { color: #8fd7de; }
.sc-chapter.sc-var-ember .sc-eyebrow { color: #ffd9ae; }
.sc-chapter:is(.sc-var-ember, .sc-var-systems, .sc-var-code) .sc-body { color: #d5e0ea; }

/* The turning-point chapter carries its keepsake number inline, like the
   reference: a confident serif numeral above the era line. */
.sc-chapter.sc-var-summit .sc-ghost {
    position: static;
    display: block;
    margin-bottom: 0.2rem;
    color: #1d3a6e;
    font-size: clamp(3rem, 4vw, 4.75rem);
}

.sc-chapter.is-open {
    align-self: start;
    z-index: 30;
    height: auto;
    box-shadow: 0 1.2rem 3rem rgb(4 12 28 / 36%);
}

.sc-node {
    position: absolute;
    top: -0.75rem;
    left: -0.75rem;
    display: grid;
    width: 2.25rem;
    height: 2.25rem;
    place-items: center;
    color: #fff;
    background: linear-gradient(150deg, var(--st-azure), var(--st-indigo));
    border: 3px solid rgb(255 255 255 / 92%);
    border-radius: 50%;
    box-shadow: 0 0.4rem 1rem rgb(4 12 28 / 30%);
    font-family: var(--st-display);
    font-size: 1rem;
    font-weight: 500;
}

.sc-expand-toggle {
    display: inline-flex;
    min-height: 2.75rem;
    align-items: center;
    gap: 0.45rem;
    margin-top: 0.7rem;
    padding: 0.5rem 0;
    color: #2b62c2;
    background: transparent;
    border: 0;
    cursor: pointer;
    font: 600 0.82rem/1 var(--st-ui);
    transition: color 160ms ease-out;
}

.sc-expand-toggle:hover,
.sc-expand-toggle:focus-visible {
    color: #163e86;
    text-decoration: underline;
}

.sc-var-dark .sc-expand-toggle,
.sc-chapter:is(.sc-var-ember, .sc-var-systems, .sc-var-code) .sc-expand-toggle {
    color: #9fd7ff;
}

.sc-var-dark .sc-expand-toggle:hover,
.sc-var-dark .sc-expand-toggle:focus-visible,
.sc-chapter:is(.sc-var-ember, .sc-var-systems, .sc-var-code) .sc-expand-toggle:hover,
.sc-chapter:is(.sc-var-ember, .sc-var-systems, .sc-var-code) .sc-expand-toggle:focus-visible {
    color: #d3ecff;
}

.sc-expand-arrow {
    display: inline-block;
    transition: transform 280ms cubic-bezier(.22, .8, .25, 1);
}

.st-card.is-open .sc-expand-arrow {
    transform: rotate(90deg);
}

.sc-expand {
    margin-top: 1rem;
    animation: sc-expand-in 340ms cubic-bezier(.22, .8, .25, 1);
}

@keyframes sc-expand-in {
    from { opacity: 0; transform: translateY(0.6rem); }
    to { opacity: 1; transform: translateY(0); }
}

.sc-expand p {
    margin: 0.65rem 0 0;
    color: var(--st-muted);
    font-size: 0.92rem;
    font-weight: 400;
    line-height: 1.6;
}

.sc-var-dark .sc-expand p,
.sc-chapter:is(.sc-var-ember, .sc-var-systems, .sc-var-code) .sc-expand p {
    color: #c3d0df;
}

.sc-meaning {
    padding: 0.7rem 0.9rem;
    background: rgb(215 163 62 / 12%);
    border-left: 3px solid var(--st-amber);
    border-radius: 0.5rem;
}

.sc-var-dark .sc-meaning,
.sc-chapter:is(.sc-var-ember, .sc-var-systems, .sc-var-code) .sc-meaning {
    background: rgb(215 163 62 / 16%);
    color: #ecd9ac;
}

.sc-ask {
    display: inline-flex;
    min-height: 2.75rem;
    align-items: center;
    margin-top: 0.9rem;
    padding: 0.6rem 1rem;
    color: #fff;
    background: #1f3a69;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    font: 600 0.8rem/1 var(--st-ui);
}

.sc-ask:hover,
.sc-ask:focus-visible {
    background: #105e67;
}

/* ---- Closing card (Act Four) --------------------------------------------- */

.sc-closing {
    display: grid;
    align-content: start;
    min-height: 20rem;
    padding-top: clamp(1.75rem, 2.4vw, 2.6rem);
    background:
        linear-gradient(165deg, rgb(10 27 54 / 52%), rgb(6 11 24 / 82%)),
        url("../images/cinematic/hero-aurora.jpg") center / cover no-repeat;
}

.sc-closing-title {
    margin: 0;
    font-family: var(--st-display);
    font-size: clamp(2.1rem, 3vw, 3.4rem);
    font-weight: 500;
    letter-spacing: -0.015em;
    line-height: 1.06;
}

.sc-closing-body {
    margin: 0.9rem 0 0;
    color: #c3d0df;
    font-family: var(--st-display);
    font-size: clamp(1.15rem, 1.45vw, 1.55rem);
    font-weight: 400;
    line-height: 1.32;
}

.sc-closing-sign {
    margin-top: 1.3rem;
    color: #8fd7de;
    font-size: clamp(1.6rem, 1.9vw, 2.1rem);
}

#act-next .sc-glass,
#act-next .sc-ai {
    height: 100%;
}

#act-next .sc-glass,
#act-next .sc-paper {
    display: flex;
    height: 100%;
    flex-direction: column;
}

/* The reference keeps Act Four's supporting cards white, including the
   "working toward" note; only the sticky notes elsewhere stay cream. */
#act-next .sc-paper {
    background: rgb(255 255 255 / 93%);
    border: 1px solid rgb(255 255 255 / 90%);
    border-radius: var(--st-card-radius);
    box-shadow: 0 0.7rem 1.9rem rgb(10 27 54 / 12%);
}

#act-next .sc-paper .sc-eyebrow { color: #3568c0; }

#act-next .sc-paper .sc-hand {
    margin-top: 0.9rem;
    color: #2b4a86;
}

/* Quiet waypoint line-art at the foot of the "working toward" card. */
#act-next .sc-paper::after {
    content: "";
    margin-top: auto;
    padding-top: 1rem;
    height: 2.6rem;
    background:
        url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 36" fill="none" stroke="%234ea3ff" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"><path d="M6 30l24-18 14 11 12-8 22 15" opacity="0.75"/><path d="M78 30l18-13 18 13" opacity="0.45"/><circle cx="30" cy="12" r="2.2" fill="%234ea3ff" stroke="none" opacity="0.8"/></svg>')
        left bottom / auto 1.6rem no-repeat;
    opacity: 0.9;
}

#act-next .sc-list {
    gap: 0.8rem;
}

#act-next .sc-list strong {
    font-size: 0.8rem;
}

#act-next .sc-list__text > span {
    font-size: 0.76rem;
}

#act-next .sc-title {
    font-size: clamp(1.15rem, 1.45vw, 1.6rem);
}

#act-next .sc-hand {
    font-size: clamp(1.2rem, 1.5vw, 1.6rem);
}

/* Compact trajectory modules remain available to any profile's data; the
   default fixture no longer uses them. */
.sc-signal {
    position: relative;
    overflow: hidden;
    margin-top: auto;
    padding: 0.95rem 0.8rem 0.8rem;
    background:
        radial-gradient(circle at 82% 12%, rgb(78 163 255 / 22%), transparent 35%),
        linear-gradient(145deg, rgb(10 27 54 / 96%), rgb(20 58 108 / 92%));
    border: 1px solid rgb(78 163 255 / 30%);
    border-radius: 0.75rem;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 12%);
}

.sc-signal::after {
    position: absolute;
    right: -1.25rem;
    bottom: -1.65rem;
    width: 4.5rem;
    height: 4.5rem;
    border: 1px solid rgb(46 200 211 / 28%);
    border-radius: 50%;
    content: "";
}

.sc-signal > p {
    margin: 0;
    color: #7fd4dc;
    font-size: 0.61rem;
    font-weight: 650;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.sc-signal > strong {
    display: block;
    margin-top: 0.28rem;
    color: #fff;
    font-family: var(--st-display);
    font-size: 0.94rem;
    font-weight: 500;
    line-height: 1.12;
}

.sc-signal ol {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.38rem;
    margin: 0.85rem 0 0;
    padding: 0;
    list-style: none;
}

.sc-signal ol::before {
    position: absolute;
    top: 0.35rem;
    bottom: 0.35rem;
    left: 0.27rem;
    width: 1px;
    background: linear-gradient(180deg, #4ea3ff, #2f5296, #b87900);
    content: "";
}

.sc-signal li {
    position: relative;
    z-index: 1;
    min-height: 0.8rem;
    padding-left: 1.05rem;
    color: #dbe9f8;
    font-size: 0.58rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: left;
}

.sc-signal li::before {
    position: absolute;
    top: 50%;
    left: 0.27rem;
    width: 0.55rem;
    height: 0.55rem;
    background: #2f5296;
    border: 2px solid #173f82;
    border-radius: 50%;
    box-shadow: 0 0 0 2px rgb(46 200 211 / 20%);
    content: "";
    transform: translate(-50%, -50%);
}

.sc-signal--orbit li:nth-child(2)::before {
    background: #b87900;
    box-shadow: 0 0 0 3px rgb(215 163 62 / 18%);
}

.sc-signal--path ol::before {
    background: linear-gradient(180deg, #2f5296, #4ea3ff, #b87900);
}

.sc-signal--waypoint {
    background:
        radial-gradient(circle at 76% 5%, rgb(215 163 62 / 25%), transparent 38%),
        linear-gradient(145deg, #163f82, #0a1b36);
}

/* ---- AI invitation (Act Four) --------------------------------------------- */

.sc-ai {
    display: grid;
    gap: 0.85rem;
    align-content: start;
}

.sc-ai-title {
    margin: 0;
    font-family: var(--st-display);
    font-size: clamp(1.3rem, 1.55vw, 1.75rem);
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1.15;
}

.sc-ai .sc-body {
    margin: 0;
    font-size: 0.85rem;
}

.sc-ai-chips {
    display: grid;
    gap: 0.5rem;
}

.sc-ai-chip {
    min-height: 2.75rem;
    padding: 0.6rem 0.95rem;
    color: #33445c;
    text-align: left;
    background: rgb(10 27 54 / 4%);
    border: 1px solid rgb(10 27 54 / 10%);
    border-radius: 0.65rem;
    cursor: pointer;
    font: 500 0.8rem/1.3 var(--st-ui);
    transition: background 160ms ease-out, color 160ms ease-out, border-color 160ms ease-out;
}

.sc-ai-chip:hover,
.sc-ai-chip:focus-visible {
    color: var(--st-ink);
    background: rgb(78 163 255 / 12%);
    border-color: rgb(78 163 255 / 45%);
}

.sc-ai .hero-ai-search {
    max-width: none;
}

.sc-ai .hero-ai-search__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.sc-ai .hero-ai-search__box {
    min-height: 3.1rem;
    background: rgb(255 255 255 / 97%);
    border-radius: 999px;
    border-color: rgb(10 27 54 / 14%);
    box-shadow: 0 0.4rem 1.1rem rgb(10 38 78 / 8%);
}

.sc-ai .hero-ai-search__box::before {
    border-radius: 999px;
}

.sc-ai .hero-ai-search__input {
    padding-left: 1.1rem;
    color: var(--st-ink);
}

.sc-ai .hero-ai-search__input::placeholder {
    color: #66768b;
}

.sc-ai .hero-ai-search__button {
    border-radius: 999px;
}

.sc-ai .hero-ai-search__status {
    color: var(--st-muted);
    font-size: 0.76rem;
}

/* ---- Story progress rail -------------------------------------------------- */

.story-rail {
    display: none;
    position: fixed;
    top: 50%;
    right: clamp(0.5rem, 1.25vw, 1.5rem);
    z-index: 900;
    transform: translateY(-50%);
}

.story-rail ol {
    display: grid;
    gap: 0.4rem;
    margin: 0;
    padding: 0.5rem;
    list-style: none;
    background: rgb(246 248 252 / 88%);
    border: 1px solid rgb(255 255 255 / 60%);
    border-radius: 999px;
    box-shadow: 0 0.9rem 2.5rem rgb(10 38 78 / 14%);
    backdrop-filter: blur(14px) saturate(120%);
}

.story-rail a {
    display: flex;
    min-width: 2.75rem;
    min-height: 2.75rem;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.4rem 0.6rem;
    color: #47597a;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 160ms ease-out, color 160ms ease-out;
}

.story-rail__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.story-rail a:hover .story-rail__label,
.story-rail a:focus-visible .story-rail__label {
    position: static;
    width: auto;
    height: auto;
    clip: auto;
    white-space: nowrap;
}

.story-rail a:hover,
.story-rail a:focus-visible {
    color: var(--st-ink);
    background: rgb(255 255 255 / 85%);
}

.story-rail a[aria-current="true"] {
    color: #fff;
    background: var(--st-indigo);
}

/* ---- Entrance reveals ------------------------------------------------------ */

body.sa-js .sa-reveal {
    opacity: 0;
    transform: translate(var(--d-x, 0), calc(var(--d-y, 0px) + 1.1rem)) rotate(var(--d-rot, 0deg));
    transition:
        opacity 700ms cubic-bezier(.22, .8, .25, 1),
        transform 700ms cubic-bezier(.22, .8, .25, 1);
    transition-delay: calc(var(--sc-i, 0) * 65ms);
}

body.sa-js .sa-reveal.is-in {
    opacity: 1;
    transform: translate(var(--d-x, 0), var(--d-y, 0)) rotate(var(--d-rot, 0deg));
}

/* ---- Closing values strip ----------------------------------------------- */

.story-values {
    display: flex;
    min-height: 5.5rem;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    padding: 1rem clamp(1.25rem, 3vw, 3rem);
    color: #1d58b4;
    background: rgb(255 255 255 / 97%);
    border-top: 1px solid rgb(78 163 255 / 18%);
    border-bottom: 1px solid rgb(10 27 54 / 8%);
    box-shadow: 0 -0.5rem 1.8rem rgb(10 38 78 / 8%);
}

.story-values ul {
    display: flex;
    flex: 1;
    justify-content: space-around;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.story-values li,
.story-values a {
    display: inline-flex;
    min-height: 2.75rem;
    align-items: center;
    gap: 0.65rem;
    color: #1d58b4;
    font-family: var(--st-hand);
    font-size: clamp(1.1rem, 1.45vw, 1.45rem);
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}

.story-values li + li {
    padding-left: clamp(0.65rem, 1.6vw, 1.75rem);
    border-left: 1px solid rgb(10 27 54 / 12%);
}

.story-values li > span,
.story-values a > span {
    color: #276fc7;
    font-family: var(--st-ui);
    font-size: 1.5rem;
}

.story-values a {
    padding-left: clamp(1rem, 2vw, 2rem);
    border-left: 1px solid rgb(10 27 54 / 12%);
}

.story-values a:hover,
.story-values a:focus-visible {
    color: var(--st-indigo);
    text-decoration: underline;
}

/* ---- Completed goals: keep the shared component, give it a stage ---------- */

.story-goals {
    width: min(94vw, 64rem);
    margin: clamp(3rem, 6vh, 5rem) auto clamp(4rem, 8vh, 6rem);
    padding: clamp(1.5rem, 2.5vw, 2.5rem);
    background: rgb(246 248 252 / 78%);
    border: 1px solid rgb(255 255 255 / 62%);
    border-radius: 1.5rem;
    box-shadow: 0 1.25rem 3.5rem rgb(10 38 78 / 14%);
    backdrop-filter: blur(16px) saturate(120%);
}

/* ---- Focus --------------------------------------------------------------- */

.story-acts :is(a, button, summary, input):focus-visible {
    outline: 3px solid #0b6dd7;
    outline-offset: 3px;
}

.story-act--night :is(a, button):focus-visible,
.story-act--dusk :is(a, button):focus-visible {
    outline-color: #9fd7ff;
}

/* ==========================================================================
   Responsive composition
   ========================================================================== */

/* Tablet: a dark chapter banner followed by the authored 8-column collage. */
@media (min-width: 48rem) and (max-width: 63.99rem) {
    .story-rail {
        display: block;
        position: relative;
        top: auto;
        right: auto;
        z-index: 8;
        transform: none;
    }

    .story-rail ol {
        display: flex;
        justify-content: center;
        gap: 0.35rem;
        border-radius: 0;
    }

    .story-canvas {
        display: block;
    }

    .story-collage {
        display: grid;
        grid-template-columns: repeat(8, minmax(0, 1fr));
        grid-auto-rows: minmax(3.25rem, auto);
        min-height: 0 !important;
        padding: 1.25rem 1.25rem 2.25rem;
    }

    .st-card {
        grid-column: var(--t-col, auto / span 4);
        grid-row: var(--t-row, auto);
        transform: rotate(var(--t-rot, 0deg));
    }

    body.sa-js .sa-reveal {
        transform: translateY(1.1rem) rotate(var(--t-rot, 0deg));
    }

    body.sa-js .sa-reveal.is-in {
        transform: rotate(var(--t-rot, 0deg));
    }

    .story-act__head {
        min-height: 15rem;
        padding: 2rem clamp(1.5rem, 5vw, 3rem);
        border-right: 0;
        border-bottom: 1px solid rgb(78 163 255 / 18%);
    }

    .story-act__intro { max-width: 48ch; }

    .story-chapter-path { display: none; }

    .sc-anchor.sc-image { min-height: 24rem; }

    .story-values {
        flex-wrap: wrap;
    }

    .story-values ul {
        flex-basis: 100%;
    }

    .story-values a {
        width: 100%;
        justify-content: center;
        padding-left: 0;
        border-left: 0;
    }
}

/* Mobile: deliberate editorial flow, no authored grid. */
@media (max-width: 47.9rem) {
    .story-act {
        display: block;
        min-height: 0;
        padding: 0;
        scroll-margin-top: 6rem;
    }

    .story-canvas {
        display: block;
    }

    .story-collage {
        display: flex;
        flex-direction: column;
        gap: 0.9rem;
        min-height: 0 !important;
        padding: 1rem 1rem 2rem;
    }

    .st-card {
        transform: none;
        max-width: none;
    }

    body.sa-js .sa-reveal {
        transform: translateY(0.9rem);
        transition-delay: 0ms;
    }

    body.sa-js .sa-reveal.is-in {
        transform: none;
    }

    .story-act__head {
        max-width: none;
        min-height: 15.5rem;
        padding: 2.25rem 1.25rem;
        border-right: 0;
        border-bottom: 1px solid rgb(78 163 255 / 18%);
    }

    .story-act :is(h1, h2) { font-size: clamp(2.15rem, 10vw, 2.9rem); }
    .story-act__intro { max-width: 37ch; }

    .story-chapter-path { display: none; }

    .sc-image {
        min-height: 0;
    }

    .sc-figure {
        position: relative;
    }

    .sc-figure img {
        position: static;
        width: 100%;
        height: auto;
        max-height: 70svh;
    }

    .sc-anchor.sc-image { min-height: 0; }

    .sc-image.sc-var-polaroid .sc-figure {
        display: block;
        padding: 0.5rem 0.5rem 2.8rem;
    }

    .sc-image.sc-var-polaroid .sc-figure picture {
        position: relative;
        inset: auto;
        display: block;
        width: 100%;
        overflow: hidden;
    }

    .sc-image.sc-var-polaroid .sc-figure img {
        position: static;
    }

    /* Small companion cards may share a row in pairs. */
    .sc-small.sc-stat,
    .sc-small.sc-paper {
        width: 100%;
    }

    .story-rail {
        display: block;
        position: relative;
        top: auto;
        right: auto;
        bottom: auto;
        z-index: 8;
        transform: none;
        background: #f6f8fc;
    }

    .story-rail ol {
        display: flex;
        justify-content: center;
        gap: 0.2rem;
        padding: 0.3rem;
        border: 0;
        border-radius: 0;
        box-shadow: 0 0.6rem 1.5rem rgb(10 38 78 / 10%);
    }

    .story-rail a {
        min-width: 2.75rem;
        min-height: 2.75rem;
        padding: 0.3rem 0.45rem;
        font-size: 0.72rem;
    }

    .story-rail a:hover .story-rail__label,
    .story-rail a[aria-current="true"] .story-rail__label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
    }

    .story-goals {
        width: min(100% - 2rem, 42rem);
    }

    .story-values {
        display: grid;
        gap: 0.35rem;
        padding: 1rem;
    }

    .story-values ul {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0;
    }

    .story-values li,
    .story-values li + li {
        justify-content: flex-start;
        padding: 0 0.45rem;
        border: 0;
        white-space: normal;
    }

    .story-values a {
        justify-content: center;
        padding: 0.75rem 0 0;
        border-top: 1px solid rgb(10 27 54 / 12%);
        border-left: 0;
        text-align: center;
        white-space: normal;
    }
}

/* Very large screens: let the canvas breathe but keep line lengths sane. */
@media (min-width: 120rem) {
    .story-collage {
        padding-inline: clamp(2rem, 3vw, 4rem);
    }
}

/* ---- Reduced motion -------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    body.sa-js .sa-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .sc-expand {
        animation: none;
    }

    .sc-expand-arrow,
    .sc-expand-toggle,
    .sc-ai-chip,
    .story-rail a {
        transition: none;
    }

    .story-acts * {
        scroll-behavior: auto !important;
    }
}

/* ---- Forced colors ---------------------------------------------------------- */

@media (forced-colors: active) {
    .sc-glass,
    .sc-ai,
    .sc-dark,
    .sc-var-dark,
    .sc-paper,
    .sc-stat,
    .sc-chapter,
    .sc-closing,
    .story-rail ol,
    .story-values,
    .story-goals {
        border: 2px solid CanvasText;
        background: Canvas;
        box-shadow: none;
        backdrop-filter: none;
    }

    .story-rail a[aria-current="true"],
    .sc-ask,
    .sc-ai-chip:hover {
        color: HighlightText;
        background: Highlight;
    }
}

/* =====================================================================
   LAYERED INK & SIGNAL GOLD (PS-THEME-002, 2026-07-16)
   body[data-theme="dark"]: the act stages sit on the near-black canvas
   (editorial-glass paints story-act--day::before); white chapter slabs
   and warm scrapbook paper float on top as the light layers, with gold
   timeline markers. Photography stays natural.
   ===================================================================== */
body[data-theme="dark"] .story-acts,
body[data-theme="dark"] .my-story-page {
    --st-ink: #0a1730;
    --st-muted: #55534e;
    --st-indigo: #8a6500;
    --st-azure: #d8a928;
    --st-cyan: #bf8f17;
    --st-amber: #d8a928;
    --st-cloud: #faf9f5;
    --st-night: #0a1730;
}

/* Dark chapter/stat/closing panels: ink instead of navy. */
body[data-theme="dark"] .sc-closing,
body[data-theme="dark"] .sc-stat.sc-var-dark {
    background: linear-gradient(160deg, #182c52 0%, #0a1730 100%);
}

/* Eyebrows/kickers. */
body[data-theme="dark"] .sc-eyebrow { color: #8a6500; }
body[data-theme="dark"] .sc-dark .sc-eyebrow,
body[data-theme="dark"] .sc-var-dark .sc-eyebrow,
body[data-theme="dark"] .sc-chapter:is(.sc-var-ember, .sc-var-systems, .sc-var-code) .sc-eyebrow { color: #e3b83a; }
body[data-theme="dark"] #act-next .sc-paper .sc-eyebrow { color: #8a6500; }

/* Handwriting notes, links, stats. */
body[data-theme="dark"] .sc-hand { color: #3a3d42; }
body[data-theme="dark"] .sc-stat-value { color: #0a1730; }
body[data-theme="dark"] .sc-body { color: #3a3d42; }
body[data-theme="dark"] .sc-chapter.sc-var-summit .sc-body { color: #3a3d42; }

body[data-theme="dark"] .sc-expand-toggle { color: #8a6500; }
body[data-theme="dark"] .sc-var-dark .sc-expand-toggle,
body[data-theme="dark"] .sc-chapter:is(.sc-var-ember, .sc-var-systems, .sc-var-code) .sc-expand-toggle { color: #e3b83a; }

/* Timeline spines + dots: gold. */
body[data-theme="dark"] .sc-signal--path ol::before { background: linear-gradient(180deg, #d8a928, #bf8f17, #8a6500); }

body[data-theme="dark"] .story-act--night :is(a, button):focus-visible,
body[data-theme="dark"] .story-act--dusk :is(a, button):focus-visible { outline-color: #e3b83a; }

body[data-theme="dark"] .sc-signal ol::before,
body[data-theme="dark"] .sc-signal--path ol::before { background: linear-gradient(180deg, #d8a928, #bf8f17, #8a6500); }

body[data-theme="dark"] .sc-signal li::before {
    background: #d8a928;
    border-color: #0a1730;
    box-shadow: 0 0 0 2px rgb(216 169 40 / 25%);
}

body[data-theme="dark"] .story-values,
body[data-theme="dark"] .story-values li,
body[data-theme="dark"] .story-values a {
    color: #8a6500;
}

body[data-theme="dark"] .story-values {
    border-top-color: rgb(216 169 40 / 30%);
}

/* Completed-goals stage: the light glass slab flips to a navy card so its
   flipped light type stays readable. */
body[data-theme="dark"] .story-goals {
    background: rgb(26 44 79 / 92%);
    border-color: #2e4573;
    box-shadow: 0 1.25rem 3.5rem rgb(0 0 0 / 45%);
    backdrop-filter: none;
}