/* Draft 2: story-led case study. Builds on case.css (dark page, bento, browser chrome). */

/* Progress bar and chapter rail */
.st-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 80; background: rgba(253,249,240,.08); }
.st-progress i { display: block; height: 100%; background: var(--accent); transform-origin: 0 50%; transform: scaleX(0); }
.st-rail { position: fixed; right: 18px; top: 50%; transform: translateY(-50%); z-index: 55; display: flex; flex-direction: column; gap: 4px; }
.st-rail a { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 6px 4px 6px 12px; border-radius: 999px; color: rgba(253,249,240,.45); font-size: 13px; font-weight: 500; transition: color .3s, background .3s; }
.st-rail a b { font-family: var(--display); font-weight: 900; font-size: 12px; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: rgba(253,249,240,.08); transition: background .3s, color .3s, transform .4s var(--n-out); }
.st-rail a span { max-width: 0; overflow: hidden; white-space: nowrap; transition: max-width .4s var(--n-out); }
.st-rail:hover a span, .st-rail a.on span { max-width: 120px; }
.st-rail a.on { color: var(--cream); }
.st-rail a.on b { background: var(--accent); color: var(--ink); transform: scale(1.12); }
.st-rail a:hover { color: var(--cream); }
.st-now { display: none; }

/* Hero extras */
.st-hero-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: -24px 0 18px; }
.st-read, .st-skip { padding: 8px 16px; border-radius: 999px; font-size: 14px; font-weight: 500; }
.st-read { background: rgba(20,20,20,.12); }
.st-skip { background: var(--ink); color: var(--cream); transition: border-radius .3s var(--n-out); }
.st-skip:hover { border-radius: 10px; }

/* Chapters */
.ch { max-width: 1280px; margin: 0 auto; padding: 16vh 16px 4vh; }
.ch-num { display: inline-flex; align-items: center; gap: 10px; color: var(--accent); font-weight: 700; font-size: 14px; margin-bottom: 28px; }
.ch-num b { font-family: var(--display); font-weight: 900; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--ink); font-size: 13px; }
.st-big { color: var(--cream); font-size: clamp(52px, 8.6vw, 150px); line-height: .88; margin-bottom: 6vh; }
.st-big .bl { display: block; overflow: hidden; padding-bottom: .04em; }
.st-big .bl > span { display: inline-block; will-change: transform; }
.st-big .bl:nth-child(2) > span { color: var(--accent); }
.st-text { max-width: 720px; margin-left: auto; }
.st-text p { font-size: clamp(18px, 1.6vw, 22px); line-height: 1.5; color: rgba(253,249,240,.8); }
.st-text p + p { margin-top: 1em; }
.st-quote { max-width: 900px; margin: 8vh 0 0 auto; padding: clamp(24px, 4vw, 48px); border-radius: 28px; background: var(--accent); color: var(--ink); font-family: var(--display); font-weight: 900; letter-spacing: -.03em; line-height: 1.04; font-size: clamp(26px, 3.4vw, 50px); }
.st-points { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 7vh 0; }
.st-point { background: var(--ink-2); border-radius: 22px; padding: 22px; min-height: 210px; display: flex; flex-direction: column; gap: 10px; }
.st-point span { font-family: var(--display); font-weight: 900; color: var(--accent); }
.st-point b { font-family: var(--display); font-weight: 900; letter-spacing: -.03em; line-height: 1; font-size: 24px; color: var(--cream); }
.st-point p { color: rgba(253,249,240,.68); font-size: 15px; margin-top: auto; }
.st-image { margin: 6vh 0 0; }
.st-image .par { border-radius: 28px; aspect-ratio: 16 / 9; }
.st-image figcaption, .st-note { margin-top: 12px; font-size: 14px; color: rgba(253,249,240,.5); }
.st-note { max-width: 720px; margin: 4vh 0 0 auto; }
.st-note a { color: var(--cream); border-bottom: 1px solid var(--accent); }
.st-list { list-style: none; max-width: 820px; margin-left: auto; display: grid; gap: 0; }
.st-list li { padding: 22px 0 22px 44px; position: relative; border-top: 1px solid rgba(253,249,240,.14); font-size: clamp(18px, 1.6vw, 22px); color: rgba(253,249,240,.82); }
.st-list li::before { content: "→"; position: absolute; left: 0; color: var(--accent); font-weight: 700; }
.st-bento { margin: 0 0 5vh; }
@media (max-width: 900px) { .st-points { grid-template-columns: 1fr 1fr; } }

/* Steps: pinned stage + scrolling list */
.st-steps { display: grid; grid-template-columns: 1.35fr 1fr; gap: 48px; align-items: start; }
.st-stage { position: sticky; top: 13vh; }
.stage-frame { border-radius: 16px; overflow: hidden; background: #fff; box-shadow: 0 30px 80px rgba(0,0,0,.35); }
.stage-frame .bar, .show-browser .bar { display: flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; background: #f2eee6; }
.stage-frame .bar i, .show-browser .bar i { width: 10px; height: 10px; border-radius: 50%; }
.stage-frame .bar i:nth-child(1), .show-browser .bar i:nth-child(1) { background: var(--orange); }
.stage-frame .bar i:nth-child(2), .show-browser .bar i:nth-child(2) { background: var(--yellow); }
.stage-frame .bar i:nth-child(3), .show-browser .bar i:nth-child(3) { background: var(--lime); }
.stage-screen { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--ink); }
.stage-screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; opacity: 0; transform: scale(1.04); transition: opacity .6s var(--n-out), transform 1s var(--n-out); }
.stage-screen img.on { opacity: 1; transform: none; }
.hl { position: absolute; border: 3px solid var(--accent); border-radius: 14px; box-shadow: 0 0 0 9999px rgba(20,20,20,.45); opacity: 0; transition: all .7s var(--n-out); pointer-events: none; }
.hl.on { opacity: 1; }
.stage-count { margin-top: 14px; font-size: 14px; color: rgba(253,249,240,.5); }
.stage-count .cur { color: var(--accent); font-family: var(--display); font-weight: 900; }
.st-step-list { list-style: none; padding: 8vh 0 30vh; }
.st-step-list li { min-height: 62vh; padding-top: 2vh; opacity: .28; transition: opacity .5s; }
.st-step-list li.on { opacity: 1; }
.st-step-list .n { font-family: var(--display); font-weight: 900; color: var(--accent); }
.st-step-list h3 { font-family: var(--display); font-weight: 900; letter-spacing: -.035em; line-height: 1; font-size: clamp(28px, 3vw, 46px); color: var(--cream); margin: 10px 0 14px; }
.st-step-list p { color: rgba(253,249,240,.74); font-size: 18px; max-width: 42ch; }
@media (max-width: 860px) {
  .st-steps { grid-template-columns: 1fr; gap: 0; }
  .st-stage { top: 70px; z-index: 2; }
  .st-step-list li { min-height: 55vh; }
}

/* Showcase: a full-screen browser that scrolls the real site */
.st-show { position: relative; height: 420vh; margin: 0 -16px; }
.show-pin { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; justify-content: center; padding: 74px 16px 84px; }
.show-browser { position: relative; width: min(1500px, 100%); height: 100%; border-radius: 18px; overflow: hidden; background: #fff; box-shadow: 0 40px 120px rgba(0,0,0,.5); will-change: transform; }
.show-browser .bar span { margin: 0 auto; padding: 3px 18px; border-radius: 999px; background: #fff; font-size: 12px; color: #444; transform: translateX(-20px); }
.show-screen { position: absolute; top: 36px; left: 0; right: 0; bottom: 0; overflow: hidden; }
.show-img { width: 100%; display: block; will-change: transform; }
.show-phone { position: absolute; right: max(4vw, 24px); bottom: 64px; width: clamp(150px, 15vw, 240px); background: var(--ink); border-radius: 34px; padding: 8px; box-shadow: 0 30px 80px rgba(0,0,0,.45); will-change: transform; }
.show-phone .screen { position: relative; border-radius: 27px; overflow: hidden; aspect-ratio: 9 / 19; background: #fff; }
.show-phone .screen::before { content: ""; position: absolute; z-index: 1; top: 8px; left: 50%; width: 30%; height: 18px; border-radius: 999px; background: var(--ink); transform: translateX(-50%); }
.show-img-m { width: 100%; display: block; will-change: transform; }
.show-actions { position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); display: flex; gap: 10px; align-items: center; white-space: nowrap; }
.show-live { padding: 12px 18px; border-radius: 999px; background: rgba(20,20,20,.85); color: var(--cream); font-size: 14px; font-weight: 500; }
.show-overlay { position: fixed; inset: 0; z-index: 200; background: var(--ink); }
.show-overlay[hidden] { display: none; }
.ov-scroll { position: absolute; inset: 0; overflow: auto; }
.ov-scroll img { width: 100%; display: block; }
.ov-close { position: fixed; top: 18px; right: 18px; z-index: 2; width: 48px; height: 48px; border-radius: 50%; border: 0; background: var(--lime); color: var(--ink); font-size: 18px; cursor: pointer; }
@media (max-width: 760px) { .show-phone { display: none; } .st-show { height: 320vh; } }

/* Mobile: the rail becomes a small "you are here" chip */
@media (max-width: 1100px) {
  .st-rail { display: none; }
  .st-now { display: flex; position: fixed; top: 76px; left: 50%; transform: translateX(-50%); z-index: 55; gap: 8px; align-items: center; padding: 6px 14px 6px 6px; border-radius: 999px; background: rgba(20,20,20,.82); backdrop-filter: blur(10px); color: var(--cream); font-size: 13px; font-weight: 500; opacity: 0; transition: opacity .3s; }
  .st-now.show { opacity: 1; }
  .st-now b { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--ink); font-family: var(--display); font-size: 11px; }
}

/* Meta: a big value with a short line under it */
.story .cs-meta { gap: 28px; }
.story .cs-meta dt { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; opacity: .6; margin-bottom: 10px; }
.story .cs-meta dd { font-family: var(--display); font-weight: 900; letter-spacing: -.03em; font-size: clamp(22px, 2vw, 30px); line-height: 1; }
.story .cs-meta dd small { display: block; margin-top: 10px; font-family: var(--body, inherit); font-weight: 400; letter-spacing: 0; font-size: 14px; line-height: 1.4; opacity: .7; max-width: 26ch; }
.story .cs-meta dd a { font-size: .8em; }

/* Second steps block gets its own small heading */
.st-sub { font-family: var(--display); font-weight: 900; letter-spacing: -.03em; color: var(--cream); font-size: clamp(26px, 2.6vw, 38px); margin: 12vh 0 0; }
.st-sub + .st-steps .st-step-list { padding-top: 4vh; }

/* Phones row: hover scrolls the full-length screen */
.st-phones { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 3vw, 44px); margin: 8vh auto 0; max-width: 1080px; }
.st-phone .screen { position: relative; aspect-ratio: 9 / 19; border-radius: 30px; overflow: hidden; background: #fff; border: 8px solid var(--ink-2); box-shadow: 0 30px 80px rgba(0,0,0,.4); }
.st-phone img { width: 100%; display: block; margin-top: var(--trim, 0); transition: transform 6s cubic-bezier(.45,0,.2,1); }
.st-phone:hover img { transform: translateY(calc(-100% + var(--h, 0px))); }
.st-phone figcaption { margin-top: 14px; font-size: 14px; color: rgba(253,249,240,.55); text-align: center; }
@media (max-width: 760px) { .st-phones { grid-template-columns: 1fr 1fr; } .st-phone:nth-child(3) { display: none; } }

/* Spec sheet */
.st-specs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin: 8vh 0 0; border-radius: 24px; overflow: hidden; background: rgba(253,249,240,.1); }
.st-specs > div { background: var(--ink-2); padding: 24px; }
.st-specs dt { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); font-weight: 700; margin-bottom: 10px; }
.st-specs dd { color: rgba(253,249,240,.82); font-size: 16px; line-height: 1.45; }
@media (max-width: 760px) { .st-specs { grid-template-columns: 1fr; } }

/* Full-bleed helper for demos that break out of the chapter column */
.st-wall { width: 100vw; margin-left: calc(50% - 50vw); }

/* Video in a frame */
.st-video { margin: 8vh auto 0; max-width: 1120px; }
.st-video .vf { border-radius: 16px; overflow: hidden; background: #fff; box-shadow: 0 30px 80px rgba(0,0,0,.35); }
.st-video .bar { display: flex; gap: 7px; align-items: center; height: 34px; padding: 0 14px; background: #f2eee6; }
.st-video .bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--orange); }
.st-video .bar i:nth-child(2) { background: var(--yellow); } .st-video .bar i:nth-child(3) { background: var(--lime); }
.st-video video { width: 100%; display: block; }
.st-video.is-phone { max-width: 300px; }
.st-video.is-phone .vf { border-radius: 34px; border: 8px solid var(--ink-2); }
.st-video figcaption { margin-top: 12px; font-size: 14px; color: rgba(253,249,240,.5); }

/* Exploration wall */
.st-wall { position: relative; height: 130vh; overflow: hidden; margin-top: 4vh; -webkit-mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent); }
.wall-grid { position: absolute; left: -10%; right: -10%; top: -20%; display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; transform: rotate(-8deg) scale(1.25); will-change: transform; }
.wall-col { display: grid; gap: 12px; align-content: start; will-change: transform; }
.wall-col img { width: 100%; display: block; border-radius: 8px; background: #fff; }
.wall-card { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: var(--accent); color: var(--ink); border-radius: 28px; padding: 28px 34px; text-align: center; box-shadow: 0 30px 80px rgba(0,0,0,.45); }
.wall-card b { display: block; font-family: var(--display); font-weight: 900; font-size: clamp(70px, 10vw, 150px); line-height: .9; letter-spacing: -.04em; }
.wall-card span { display: block; max-width: 22ch; margin: 8px auto 0; font-size: 16px; font-weight: 500; }

/* Before / after */
.st-compare { margin: 8vh 0 0; }
.cmp { position: relative; aspect-ratio: 1352 / 767; border-radius: 18px; overflow: hidden; background: #fff; }
.cmp img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cmp-before { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--x)) 0 0); }
.cmp-h { position: absolute; top: 0; bottom: 0; left: var(--x); width: 2px; margin-left: -1px; background: var(--accent); pointer-events: none; }
.cmp-h::after { content: "↔"; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--ink); font-weight: 700; }
.cmp input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.cmp-l, .cmp-r { position: absolute; top: 14px; padding: 6px 12px; border-radius: 999px; background: var(--ink); color: var(--cream); font-size: 13px; font-weight: 500; pointer-events: none; }
.cmp-l { left: 14px; } .cmp-r { right: 14px; background: var(--accent); color: var(--ink); }
.st-compare figcaption { margin-top: 12px; font-size: 14px; color: rgba(253,249,240,.5); max-width: 720px; }

/* Gallery */
.st-gallery { display: grid; grid-template-columns: repeat(var(--cols), 1fr); gap: 14px; margin: 5vh 0 0; }
.st-gallery figure { margin: 0; }
.st-gallery .g-img { border-radius: 16px; overflow: hidden; background: var(--ink-2); }
.st-gallery .light .g-img { background: #F6F2EA; padding: 14px; }
.st-gallery img { width: 100%; display: block; }
.st-gallery figcaption { margin-top: 10px; font-size: 14px; color: rgba(253,249,240,.6); }
@media (max-width: 760px) { .st-gallery { grid-template-columns: 1fr 1fr; } }

/* Floor line demo */
.st-floor { margin: 7vh 0 0; }
.floor-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; align-items: end; border-radius: 18px; overflow: hidden; background: #d9d6d0; }
.floor-row figure { margin: 0; aspect-ratio: 3 / 4; overflow: hidden; transition: transform 1s var(--n-out); transform-origin: 50% 100%; }
.floor-row img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; display: block; }
.st-floor.messy .floor-row figure:nth-child(1) { transform: translateY(-9%) scale(.86); }
.st-floor.messy .floor-row figure:nth-child(2) { transform: translateY(4%) scale(1.06); }
.st-floor.messy .floor-row figure:nth-child(3) { transform: translateY(-16%) scale(.8); }
.st-floor.messy .floor-row figure:nth-child(4) { transform: translateY(2%) scale(.94); }
.floor-btn { margin-top: 18px; }
.floor-cap { margin-top: 12px; font-size: 14px; color: rgba(253,249,240,.55); max-width: 720px; }

/* Rotating stamp */
.st-stamp { display: grid; grid-template-columns: minmax(160px, 260px) 1fr; gap: clamp(24px, 5vw, 72px); align-items: center; margin: 10vh 0 0; }
.stamp-svg { width: 100%; filter: invert(1); will-change: transform; }
.st-stamp .st-text { margin: 0; }
@media (max-width: 760px) { .st-stamp { grid-template-columns: 1fr; } .stamp-svg { width: 160px; } }

/* Showcase playing prototype videos */
.st-show.is-video { height: 240vh; }
.is-video .show-img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.is-video .show-img-m { width: 100%; height: 100%; object-fit: cover; }
.show-overlay video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: var(--ink); }
.st-rail a.on span { background: rgba(20,20,20,.75); padding: 3px 9px; border-radius: 999px; }
@media (max-width: 760px) {
  .wall-grid { left: -70%; right: -70%; }
  .st-wall { height: 110vh; }
}
.st-floor { margin-bottom: 6vh; }


/* Prototype reel: frames take the video's own shape, so nothing is cropped */
.is-video .show-browser { height: auto; width: min(1500px, 100%, calc((100vh - 210px) * 1.766)); }
.is-video .show-screen { position: relative; top: 0; }
.is-video .show-img { height: auto; display: block; }
.show-overlay.is-reel { background: #FAF9F3; }
.show-overlay.is-reel .ov-close { left: 18px; right: auto; background: var(--ink); color: var(--cream); z-index: 3; }
@media (max-width: 760px) {
  .is-video .show-browser { display: none; }
  .is-video .show-phone { display: block; position: relative; right: auto; bottom: auto; width: min(300px, 72vw); margin: 0 auto; }
  .st-show.is-video { height: 200vh; }
  .show-overlay.is-reel { background: var(--ink); }
}
.show-overlay.is-reel video { background: transparent; }
@media (min-width: 761px) {
  .is-video .show-pin { gap: clamp(20px, 2.5vw, 40px); }
  .is-video .show-browser { width: min(1180px, calc(100% - 400px), calc((100vh - 210px) * 1.766)); }
  .is-video .show-phone { position: relative; right: auto; bottom: auto; flex: none; width: clamp(170px, 15vw, 240px); }
}

/* CTA island demo: the real homepage design scrolling inside a pinned browser window (a phone on mobile),
   with a working island, logo and nav on top. --u is one design pixel inside the window. */
.st-island { position: relative; height: 520vh; margin-top: 6vh; }
.isl-pin { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; justify-content: center; padding: 84px 0 96px; }
.isl-m { display: none; }
@media (max-width: 760px) { .isl-d { display: none; } .isl-m { display: block; } }
.isl-win { border-radius: 16px; overflow: hidden; background: #FAF9F3; box-shadow: 0 40px 120px rgba(0,0,0,.5); }
.isl-d .isl-win { width: min(1180px, calc(100vw - 200px), calc((100vh - 216px) * 1352 / 766)); }
.isl-win .bar { display: flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; background: #f2eee6; }
.isl-win .bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--orange); }
.isl-win .bar i:nth-child(2) { background: var(--yellow); } .isl-win .bar i:nth-child(3) { background: var(--lime); }
.isl-win .bar span { margin: 0 auto; padding: 3px 18px; border-radius: 999px; background: #fff; font-size: 12px; color: #444; transform: translateX(-20px); }
.isl-screen { position: relative; overflow: hidden; container-type: inline-size; aspect-ratio: var(--dw) / var(--dv); --u: calc(100cqw / var(--dw)); color: #FAF9F3; }
.isl-m .isl-win { width: min(330px, 78vw, calc((100vh - 200px) * 392 / 867)); border-radius: 36px; border: 8px solid var(--ink-2); }
.isl-page { position: absolute; inset: 0 0 auto 0; overflow: hidden; will-change: transform; }
.isl-page img { display: block; width: 100%; }
.isl-blend { position: absolute; inset: 0; mix-blend-mode: difference; pointer-events: none; }
.isl-blend img { position: absolute; }
.isl-nav { filter: invert(1); }
.isl-nav.l { left: 0; top: 0; width: calc(120 * var(--u)); }
.isl-nav.r { left: calc(1210 * var(--u)); top: 0; width: calc(142 * var(--u)); }
.isl-logo { left: calc(611 * var(--u)); top: calc(605 * var(--u)); width: calc(395 * var(--u)); }
.isl-ui { position: absolute; display: grid; gap: 1px; opacity: 0; transform: translateY(6px); transition: opacity .45s var(--n-out), transform .6s var(--n-out); }
.isl-ui.on { opacity: 1; transform: none; }
.isl-t, .isl-c span { display: flex; align-items: center; background: rgba(250,249,243,.28); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); letter-spacing: .03em; line-height: 1; white-space: nowrap; transition: opacity .22s; }
.isl-c { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 1px; }
.isl-ui.swap .isl-t, .isl-ui.swap .isl-c span { opacity: 0; }
.isl-d .isl-ui { left: calc(610 * var(--u)); top: calc(483 * var(--u)); width: calc(397 * var(--u)); }
.isl-d .isl-t, .isl-d .isl-c span { height: calc(40 * var(--u)); padding: 0 calc(16 * var(--u)); font: 500 calc(11 * var(--u)) "Marr Sans", var(--body); }
.isl-m .isl-ui { left: calc(34 * var(--u)); top: calc(620 * var(--u)); width: calc(324 * var(--u)); }
.isl-m .isl-t, .isl-m .isl-c span { height: calc(40 * var(--u)); padding: 0 calc(16 * var(--u)); font: 500 calc(12 * var(--u)) "Marr Sans", var(--body); }
.isl-m .isl-c span { font-weight: 400; }
.isl-cols { position: absolute; inset: 0 calc(16 * var(--u)); display: grid; grid-template-columns: repeat(20, 1fr); opacity: 0; transition: opacity .4s; pointer-events: none; }
.isl-m .isl-cols { grid-template-columns: repeat(10, 1fr); }
.isl-cols i { border-left: 1px solid rgba(255,64,129,.5); background: rgba(255,64,129,.06); }
.isl-cols i:last-child { border-right: 1px solid rgba(255,64,129,.5); }
.st-island.grid-on .isl-cols { opacity: 1; }
.isl-hud { position: fixed; right: 24px; bottom: 96px; z-index: 61; width: 250px; display: grid; gap: 8px; opacity: 0; pointer-events: none; transition: opacity .4s; }
.st-island.live .isl-hud { opacity: 1; pointer-events: auto; }
.isl-say { background: var(--ink-2); color: var(--cream); border-radius: 16px; padding: 14px 16px; font-size: 14px; line-height: 1.4; box-shadow: 0 20px 60px rgba(0,0,0,.4); }
.isl-say b { display: block; color: var(--accent); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 4px; }
.isl-gridbtn { justify-self: start; padding: 9px 14px; border-radius: 999px; border: 0; background: var(--cream); color: var(--ink); font: 500 13px var(--body); cursor: pointer; }
.isl-gridbtn kbd { font: 700 11px var(--body); padding: 1px 6px; border-radius: 5px; background: rgba(20,20,20,.1); margin-left: 4px; }
.st-island.grid-on .isl-gridbtn { background: #ff4081; color: #fff; }
@media (max-width: 1100px) and (min-width: 761px) { .isl-hud { bottom: 24px; right: 16px; } .isl-d .isl-win { width: min(1180px, calc(100vw - 48px), calc((100vh - 216px) * 1352 / 766)); } }
@media (max-width: 760px) {
  .st-island { height: 480vh; }
  .isl-pin { padding: 120px 0 90px; align-items: flex-start; }
  .isl-hud { left: 16px; right: 16px; width: auto; top: auto; bottom: 90px; }
  .isl-say { font-size: 13px; padding: 10px 12px; border-radius: 12px; }
  .isl-gridbtn { display: none; }
}
@media (max-width: 760px) {
  .isl-hud { display: none; }
  .isl-pin { padding: 110px 0 100px; align-items: center; }
  .isl-m .isl-win { width: min(330px, 78vw, calc((100vh - 226px) * 392 / 867)); }
}

/* Hero cover: a complete card inside the hero, not a tab cut off by the next section */
.story .cs-hero { padding-bottom: clamp(32px, 5vw, 64px); }
.story .cs-cover .par { border: 0; border-radius: clamp(18px, 2.4vw, 28px); }

/* Meta: values and their short lines closer in scale */
.story .cs-meta dd { font-size: clamp(18px, 1.55vw, 23px); }
.story .cs-meta dd small { font-size: 15px; opacity: .8; margin-top: 8px; max-width: 30ch; }
@media (max-width: 720px) { .story .cs-meta dd { font-size: 19px; } .story .cs-meta dd small { font-size: 14px; } }

/* Exploration wall: a clean framed panel instead of a faded edge */
.st-wall { -webkit-mask-image: none; mask-image: none; width: auto; margin-left: 0; height: 100vh; border-radius: 28px; background: var(--ink-2); }
@media (max-width: 760px) { .st-wall { height: 90vh; border-radius: 20px; } }

/* ---------- Chapter tabs (after Raw Materials): a stack of coloured tabs, the current one grows ---------- */
.st-rail, .st-now, .ch-num { display: none !important; }
.st-tabs { position: fixed; z-index: 56; display: flex; gap: 6px; opacity: 0; pointer-events: none; transition: opacity .5s, transform .7s var(--n-out); }
.st-tabs.show { opacity: 1; pointer-events: auto; transform: none; }
.st-tabs a { position: relative; overflow: hidden; display: flex; background: var(--c); color: var(--cf); border-radius: 14px; font-size: 12px; font-weight: 500; line-height: 1.1; transition: flex-grow .7s var(--n-out), border-radius .4s; }
.st-tabs a b { font-family: var(--display); font-weight: 900; font-size: 11px; position: relative; z-index: 1; }
.st-tabs a span { position: relative; z-index: 1; white-space: nowrap; }
.st-tabs .fill { position: absolute; left: 0; top: 0; background: rgba(20,20,20,.16); pointer-events: none; }
@media (min-width: 1101px) {
  .st-tabs { left: 16px; top: 96px; bottom: 84px; width: 104px; flex-direction: column; transform: translateX(-140px); }
  .st-tabs a { flex: 0 0 52px; flex-direction: column; justify-content: space-between; padding: 9px 11px; }
  .st-tabs a.on { flex-grow: 1; }
  .st-tabs a.on span { font-size: 14px; }
  .st-tabs .fill { right: 0; height: calc(var(--p, 0) * 100%); }
  .st-tabs a.done .fill { height: 100%; }
  .story .ch { padding-left: max(16px, calc(150px - (100vw - 1280px) / 2)); }
}
@media (max-width: 1100px) {
  .st-tabs { left: 12px; right: 12px; top: 84px; height: 30px; transform: translateY(-12px); }
  .st-tabs a { flex: 0 0 30px; align-items: center; gap: 8px; padding: 0 10px; border-radius: 999px; }
  .st-tabs a span { display: none; }
  .st-tabs a.on { flex-grow: 1; }
  .st-tabs a.on span { display: inline; }
  .st-tabs .fill { bottom: 0; width: calc(var(--p, 0) * 100%); }
  .st-tabs a.done .fill { width: 100%; }
}

/* ---------- Chapter openers: "now entering" bar + a colour card holding the headline ---------- */
.ch { padding-top: 10vh; }
.ch-enter { display: flex; justify-content: space-between; gap: 12px; padding: 8px 16px; border-radius: 999px; background: var(--c); color: var(--cf); font-size: 12px; font-weight: 500; margin-bottom: 10px; }
.ch-enter b { font-weight: 700; }
.ch-card { position: relative; background: var(--c); color: var(--cf); border-radius: 28px; padding: clamp(22px, 3.6vw, 48px); min-height: min(58vh, 560px); display: flex; flex-direction: column; justify-content: space-between; gap: 6vh; margin-bottom: 7vh; will-change: transform; transform-origin: 50% 0; }
.ch-card-top { display: flex; justify-content: space-between; align-items: flex-start; font-size: 14px; font-weight: 500; }
.ch-card-top b { font-family: var(--display); font-weight: 900; font-size: clamp(44px, 6vw, 96px); line-height: .8; letter-spacing: -.04em; }
.ch-card .st-big { color: var(--cf); margin: 0; }
.ch-card .st-big .bl:nth-child(2) > span { color: var(--ca); }
@media (max-width: 760px) { .ch-card { min-height: 46vh; border-radius: 22px; } .ch-enter { font-size: 11px; } }

/* Inline image chips inside headlines (after nvg8) */
.st-big .chip { display: inline-block; width: 1.3em; height: .82em; margin: 0 .1em; border-radius: .16em; overflow: hidden; vertical-align: -.04em; transform-origin: 50% 60%; }
.st-big .chip img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Words light up as you read (after nvg8) */
.st-text .w, .st-quote .w { opacity: .3; transition: none; }

/* Trials at a glance: one row that slides sideways with the scroll */
.st-strip { overflow: hidden; margin: 4vh calc(50% - 50vw) 0; padding: 0 16px; }
.strip-row { display: flex; gap: 14px; width: max-content; will-change: transform; }
.strip-row figure { margin: 0; flex: none; width: clamp(240px, 24vw, 360px); }
.s-img { aspect-ratio: 4 / 3; border-radius: 16px; background: #F6F2EA; display: grid; place-items: center; padding: 16px; overflow: hidden; }
.s-img img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.s-img.dark { padding: 0; background: var(--ink-2); }
.s-img.dark img { width: 100%; height: 100%; object-fit: cover; }
.strip-row figcaption { margin-top: 10px; font-size: 13px; color: rgba(253,249,240,.6); }

/* Exploration wall card: calm cream instead of yellow */
.wall-card { background: var(--cream); color: var(--ink); }

/* Prototype reel: a cream stage fades in, devices tilt up, design frames float around them */
.st-show .show-pin { perspective: 1600px; }
.show-bg { position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); background: #FAF9F3; opacity: 0; z-index: 0; }
.show-tiles { position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); z-index: 0; pointer-events: none; }
.show-tiles img { position: absolute; width: clamp(110px, 13vw, 210px); border-radius: 12px; box-shadow: 0 24px 60px rgba(0,0,0,.18); opacity: 0; will-change: transform; }
.show-tiles .t0 { left: 3vw; top: 14vh; } .show-tiles .t1 { left: 6vw; bottom: 12vh; }
.show-tiles .t2 { right: 4vw; top: 10vh; } .show-tiles .t3 { right: 2vw; bottom: 16vh; }
.show-tiles .t4 { left: 40vw; top: 4vh; } .show-tiles .t5 { left: 46vw; bottom: 3vh; }
.st-show .show-browser, .st-show .show-phone, .st-show .show-actions { z-index: 1; }
.st-show .show-browser { transform-origin: 50% 100%; }
@media (max-width: 760px) { .show-tiles img { width: 90px; } .show-tiles .t4, .show-tiles .t5 { display: none; } }

/* Hero: one short line under a big title, with room to breathe (after nvg8) */
.story .cs-tagline { font-family: var(--body); font-weight: 500; letter-spacing: 0; line-height: 1.35; font-size: clamp(19px, 1.7vw, 25px); max-width: 32ch; margin: 22px 0 44px; }
@media (max-width: 760px) { .st-big .chip { width: 1.05em; height: .7em; } }

/* Calm palette (Draft 4): chapters share one dark tone; the case accent only marks where you are.
   !important beats the per-chapter colours set inline by the template. */
.story.calm .ch, .story.calm .st-tabs a { --c: var(--ink-2) !important; --cf: var(--cream) !important; --ca: var(--accent) !important; }
.story.calm .st-tabs a { color: rgba(253,249,240,.55); }
.story.calm .st-tabs a.on { --c: var(--accent) !important; --cf: var(--ink) !important; color: var(--ink); }
.story.calm .st-tabs a.done { color: rgba(253,249,240,.8); }
.story.calm .st-tabs .fill { background: rgba(20,20,20,.14); }
.story.calm .st-tabs a.done .fill { background: rgba(253,249,240,.06); }
.story.calm .ch-enter { background: transparent; border: 1px solid rgba(253,249,240,.14); color: rgba(253,249,240,.6); }
.story.calm .ch-enter b { color: var(--cream); }
.story.calm .ch-card { border: 1px solid rgba(253,249,240,.06); }
.story.calm .ch-card-top { color: rgba(253,249,240,.55); }
.story.calm .ch-card-top b { color: var(--accent); }

/* Phones: five draft options need the bottom bar to themselves (the live site link is in the meta) */
@media (max-width: 760px) {
  .ver-toggle { left: 12px; right: 12px; bottom: 12px; justify-content: space-between; }
  .ver-toggle a { padding: 8px 10px; font-size: 12px; }
  .story:has(.ver-toggle) .visit { display: none; }
}

/* Hero balance: title on its own, then tagline left and actions right on one baseline, then the details */
.story .cs-hero-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 48px; align-items: end; }
.story .cs-back, .story .cs-title, .story .cs-meta { grid-column: 1 / -1; }
.story .cs-back { justify-self: start; }
.story .cs-title { margin: 0 0 clamp(28px, 4vw, 56px); }
.story .cs-tagline { margin: 0 0 40px; }
.story .st-hero-row { margin: 0 0 40px; justify-content: flex-end; }
@media (max-width: 720px) {
  .story .cs-hero-inner { display: block; }
  .story .cs-title { margin-bottom: 24px; }
  .story .cs-tagline { margin-bottom: 22px; }
  .story .st-hero-row { justify-content: flex-start; margin-bottom: 32px; }
}
.story.calm .ch, .story.calm .st-tabs a { --ca: rgba(253,249,240,.42) !important; }

/* Hero: a bigger tagline and a slightly smaller title, so the two read as a pair */
.story .cs-title { font-size: clamp(64px, 11vw, 190px); }
.story .cs-tagline { font-size: clamp(24px, 2.7vw, 40px); line-height: 1.2; letter-spacing: -.015em; max-width: 26ch; }
@media (max-width: 720px) { .story .cs-tagline { font-size: 24px; } }
.story .cs-tagline { max-width: 31ch; text-wrap: balance; }

/* Draft 4 hero: black like the rest of the page, cream type */
.story.calm .cs-hero { background: var(--ink); color: var(--cream); }
.story.calm .cs-back { border-bottom-color: var(--cream); }
.story.calm .cs-meta { border-top-color: rgba(253,249,240,.3); }
.story.calm .cs-meta a { border-bottom-color: var(--cream); }
.story.calm .st-read { background: rgba(253,249,240,.1); }
.story.calm .st-skip { background: var(--cream); color: var(--ink); }
@media (max-width: 1100px) { .st-tabs { transition: opacity .5s, transform .7s var(--n-out), top .5s var(--n-out); } body.nav-hidden .st-tabs { top: 12px; } }

/* Chapter tabs run the full height of the screen (they only stop short of the draft toggle on draft pages) */
@media (min-width: 1101px) {
  .st-tabs { top: 16px; bottom: 16px; }
  .story:has(.ver-toggle) .st-tabs { bottom: 84px; }
}

/* Prototype stage: sized to the full screen width by story.js (the reel's perspective traps fixed positioning) */
.show-bg { transform: none; }
.story.calm .st-tabs a.on { box-shadow: inset 0 0 0 1px rgba(20,20,20,.14); }

/* ---------- Draft 5: super simple, like the Imigon page ----------
   Small "/ 01 / Label" marker on the left, a bold statement on the right, plain copy, big visuals. */
.story.simple .st-tabs, .story.simple .ch-enter, .story.simple .st-big .chip { display: none !important; }
.story.simple .ch { padding-left: 16px; padding-top: 14vh; }
.story.simple .ch-card { display: grid; grid-template-columns: minmax(140px, 1fr) minmax(0, 2.2fr); gap: 32px; align-items: start; background: none; border: 0; padding: 0; min-height: 0; margin-bottom: 5vh; border-radius: 0; transform: none !important; }
.story.simple .ch-card-top { display: flex; gap: 6px; justify-content: flex-start; align-items: baseline; padding-top: .6em; font-size: 13px; color: var(--accent); }
.story.simple .ch-card-top b { font-family: var(--body); font-weight: 500; font-size: 13px; letter-spacing: 0; line-height: 1; color: rgba(253,249,240,.45); }
.story.simple .ch-card-top b::before { content: "/ "; }
.story.simple .ch-card-top b::after { content: " /"; }
.story.simple .ch-card .st-big { font-size: clamp(34px, 3.6vw, 56px); line-height: 1.02; letter-spacing: -.03em; color: var(--cream); }
.story.simple .ch-card .st-big .bl:nth-child(2) > span { color: var(--cream); }
.story.simple .ch-card .st-big .bl { display: inline; overflow: visible; }
.story.simple .ch-card .st-big .bl + .bl::before { content: " "; }
.story.simple .st-text { max-width: none; margin-left: calc((100% - 32px) * 1 / 3.2 + 32px); }
.story.simple .st-text p { max-width: 58ch; font-size: 17px; color: rgba(253,249,240,.72); }
.story.simple .st-quote { margin-top: 5vh; border-radius: 999px; padding: 26px 40px; font-size: clamp(20px, 2vw, 28px); text-align: center; max-width: none; }
.story.simple .st-sub { font-size: 13px; font-family: var(--body); font-weight: 500; letter-spacing: 0; color: rgba(253,249,240,.5); margin-top: 8vh; }
@media (max-width: 760px) {
  .story.simple .ch-card { grid-template-columns: 1fr; gap: 12px; }
  .story.simple .st-text { margin-left: 0; }
  .story.simple .st-quote { border-radius: 24px; text-align: left; padding: 22px; }
}
@media (max-width: 760px) { .ver-toggle a { padding: 8px 7px; font-size: 11px; white-space: nowrap; } }

/* ---------- Draft 5 motion (assets/motion.js) ---------- */
.story.motion .ch-card-top { align-items: center; }
.mk { display: inline-block; width: 26px; height: 26px; margin-right: 6px; flex: none; }
.mk svg { width: 100%; height: 100%; display: block; }
.st-marquee { overflow: hidden; margin: 12vh calc(50% - 50vw) 0; padding: 22px 0; border-top: 1px solid rgba(253,249,240,.1); border-bottom: 1px solid rgba(253,249,240,.1); }
.mq-row { display: flex; width: max-content; align-items: center; gap: 28px; will-change: transform; }
.mq-row span { font-family: var(--display); font-weight: 900; letter-spacing: -.03em; font-size: clamp(40px, 6vw, 96px); line-height: 1; color: var(--cream); white-space: nowrap; }
.mq-row span:nth-of-type(2n) { color: transparent; -webkit-text-stroke: 1.5px rgba(253,249,240,.55); }
.mq-row i { font-style: normal; font-size: clamp(22px, 3vw, 44px); color: var(--accent); }
.story.motion .st-quote { transform-origin: 50% 50%; }
/* Cursor ring (desktop only) */
.mcur { position: fixed; left: 0; top: 0; z-index: 500; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; border: 1.5px solid var(--cream); pointer-events: none; opacity: 0; mix-blend-mode: difference; display: grid; place-items: center; transition: width .35s cubic-bezier(.22,1,.36,1), height .35s cubic-bezier(.22,1,.36,1), margin .35s cubic-bezier(.22,1,.36,1), opacity .3s, background .3s; }
.mcur.on { opacity: 1; }
.mcur.big { width: 46px; height: 46px; margin: -23px 0 0 -23px; background: rgba(253,249,240,.12); }
.mcur.says { width: 74px; height: 74px; margin: -37px 0 0 -37px; background: var(--cream); mix-blend-mode: normal; }
.mcur span { font: 600 12px var(--body); color: var(--ink); opacity: 0; transition: opacity .2s; }
.mcur.says span { opacity: 1; }
.mcur.press::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid var(--cream); opacity: .4; }

/* Island callout (Draft 5): the note sits on the window, right next to the island, instead of a side card */
.isl-call, .isl-ghost { display: none; }
.story.simple .isl-hud { display: none !important; }
.story.simple .isl-call { display: block; position: absolute; z-index: 3; opacity: 0; background: var(--cream); color: var(--ink); border-radius: 14px; padding: 12px 14px 13px; box-shadow: 0 18px 50px rgba(0,0,0,.28); font-size: 13px; line-height: 1.4; pointer-events: none; }
.story.simple .isl-call.on { opacity: 1; }
.story.simple .isl-call small { display: inline-block; font: 700 11px var(--body); letter-spacing: .04em; padding: 2px 7px; border-radius: 999px; background: var(--ink); color: var(--cream); margin-bottom: 8px; }
.story.simple .isl-call p b { display: block; font-family: var(--display); font-weight: 900; font-size: 17px; letter-spacing: -.02em; line-height: 1.05; margin-bottom: 4px; }
/* Desktop: to the right of the island, joined to it by a short line */
.story.simple .isl-d .isl-call { left: calc(1031 * var(--u)); top: calc(483 * var(--u)); width: min(270px, calc(300 * var(--u))); }
.story.simple .isl-d .isl-call::before { content: ""; position: absolute; left: calc(-24 * var(--u)); top: calc(20 * var(--u)); width: calc(24 * var(--u)); height: 1px; background: var(--cream); }
/* Phone: above the island */
.story.simple .isl-m .isl-call { left: calc(34 * var(--u)); width: calc(324 * var(--u)); bottom: calc(256 * var(--u)); font-size: 12px; padding: 10px 12px; }
.story.simple .isl-m .isl-call p b { font-size: 15px; }
/* When the island steps aside, a dashed outline shows where it was */
.story.simple .isl-ghost { display: block; position: absolute; z-index: 2; border: 1.5px dashed rgba(250,249,243,.85); border-radius: 2px; opacity: 0; transition: opacity .4s; pointer-events: none; }
.story.simple .isl-off .isl-ghost { opacity: 1; }
.story.simple .isl-d .isl-ghost { left: calc(610 * var(--u)); top: calc(483 * var(--u)); width: calc(397 * var(--u)); height: calc(81 * var(--u)); }
.story.simple .isl-m .isl-ghost { left: calc(34 * var(--u)); top: calc(620 * var(--u)); width: calc(324 * var(--u)); height: calc(81 * var(--u)); }
.story.simple .isl-ghost { mix-blend-mode: difference; }

/* ---------- Draft 5 spacing rhythm ----------
   One scale instead of per-block margins: 16 (caption to its visual), 32 (headline or label to its text,
   paragraph to paragraph), --gap between unrelated blocks, and a generous chapter break. */
.story.simple { --s1: 16px; --s2: 32px; --gap: clamp(56px, 7vw, 104px); }
.story.simple .ch { padding-top: clamp(112px, 16vh, 180px); padding-bottom: 0; }
.story.simple .ch > * { margin-top: 0 !important; margin-bottom: 0 !important; }
.story.simple .ch > * + * { margin-top: var(--gap) !important; }
.story.simple .ch > .ch-card + * { margin-top: var(--s2) !important; }
.story.simple .ch > .st-text + .st-text,
.story.simple .ch > .st-text + .st-list,
.story.simple .ch > .st-list + .st-text { margin-top: var(--s2) !important; }
.story.simple .ch > .st-sub + * { margin-top: var(--s1) !important; }
.story.simple .ch > .st-note { margin-top: var(--s1) !important; }
.story.simple .st-text p + p { margin-top: 1.1em; }
.story.simple .st-note, .story.simple .st-list { max-width: 58ch; margin-left: calc((100% - 32px) * 1 / 3.2 + 32px); margin-right: 0; }
.story.simple .st-list li { font-size: 17px; padding: 18px 0 18px 36px; }
.story.simple .st-compare figcaption, .story.simple .floor-cap, .story.simple .strip-row figcaption { margin-top: var(--s1); }
.story.simple .floor-btn { margin-top: var(--s1); }
.story.simple .cs-hero { padding-bottom: var(--gap); }
@media (max-width: 760px) {
  .story.simple { --s1: 12px; --s2: 24px; --gap: 56px; }
  .story.simple .ch { padding-top: 96px; }
  .story.simple .st-note, .story.simple .st-list { margin-left: 0; }
}

/* Text into boxes (Draft 5): a word becomes a soft grey bar while it is off its reading spot */
.story.motion .bw, .story.motion .st-text .w, .story.motion .st-quote .w { border-radius: .14em; transition: color .4s cubic-bezier(.22,1,.36,1), background-color .4s cubic-bezier(.22,1,.36,1); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.story.motion .boxed { color: transparent !important; background-color: rgba(253,249,240,.12); }
.story.motion .st-quote .boxed { background-color: rgba(20,20,20,.14); }
.story.motion .st-text b .boxed, .story.motion .st-text a .boxed { background-color: rgba(253,249,240,.2); }


/* Short browser windows: chapter headlines also cap at a share of the window's height, so one headline never
   fills (or overflows) the screen in a window that is wide but not tall. */
.st-big, .ch-card .st-big { font-size: clamp(44px, min(8.6vw, 15svh), 150px); }
.story.simple .ch-card .st-big { font-size: clamp(30px, min(3.6vw, 8svh), 56px); }