/* Scroll story, shared by all templates (net.carbonboards.frontend.story, plugin/story/story-base.xslt,
   /story/story.js). A template package adds /story/<template>/template.css for its look and scenes.
   Everything is scoped under .cb-story and uses cbs- classes, so a story can sit inside a site
   page without touching its styles. Layout: sticky stage on the right, steps scroll past on the
   left; on phones the stage sticks to the top half and the step copy sticks under it.
   One look on purpose: night on the mountain, red for customer/rider, amber for staff. */
@font-face { font-family: 'Oswald'; src: url('../css/fonts/Oswald-latin-var.woff2') format('woff2');
             font-weight: 200 700; font-display: swap; }
@font-face { font-family: 'Open Sans'; src: url('../css/fonts/OpenSans-Regular.woff2') format('woff2');
             font-weight: normal; font-display: swap; }

.cb-story {
    --night: #0c0c0d;
    --slate: #161618;
    --rule: #2b2b2f;
    --snow: #f1f2f4;
    --fog: #9b9ca3;
    --soft: #d3d4d8;
    --red: #be0606;
    --red-lite: #ff4a3d;
    --amber: #e8a317;
    --green: #4cc26a;

    --display: 'Oswald', 'Arial Narrow', 'Roboto Condensed', sans-serif;
    --body: 'Open Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
    --gutter: 16px;

    color-scheme: dark;
    background: var(--night);
    color: var(--snow);
    font: 16px/1.6 var(--body);
    text-align: left;
}
.cb-story *, .cb-story *::before, .cb-story *::after { box-sizing: border-box; }
.cb-story a { color: inherit; }
.cb-story :focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
.cb-story ol, .cb-story ul { list-style: none; margin: 0; padding: 0; }
.cb-story h1, .cb-story h2, .cb-story p { color: inherit; }

/* ---------- standalone chrome (preview only) ---------- */
.cbs-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
           padding: calc(.9rem + env(safe-area-inset-top, 0px)) var(--gutter) .9rem;
           border-bottom: 1px solid var(--rule); background: #000; }
.cbs-wordmark { font: 600 1.15rem/1 var(--display); letter-spacing: .06em; text-transform: uppercase; }
.cbs-wordmark b { color: var(--red-lite); font-weight: 600; }

/* ---------- hero ---------- */
.cbs-hero { max-width: 76rem; margin: 0 auto; padding: clamp(3rem, 9vw, 7rem) var(--gutter) clamp(2.5rem, 6vw, 4.5rem);
            display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 2rem; align-items: center; }
.cbs-eyebrow { font: 500 .8rem/1 var(--display); letter-spacing: .22em; text-transform: uppercase; color: var(--fog); margin: 0 0 1.2rem; }
.cbs-hero h1 { font: 600 clamp(2.8rem, 9vw, 6.6rem)/.95 var(--display); text-transform: uppercase; letter-spacing: -.005em;
               margin: 0 0 1.4rem; text-wrap: balance; }
.cbs-hero h1 span { color: var(--red-lite); }
.cbs-lead { max-width: 38rem; font-size: 1.12rem; line-height: 1.6; color: var(--soft); margin: 0 0 2.2rem; }
.cbs-route { margin: 0 0 2.2rem; display: flex; flex-wrap: wrap; gap: .5rem; counter-reset: cbs-r; }
.cbs-route li { margin: 0; }
.cbs-route a { display: inline-flex; align-items: baseline; gap: .45rem; padding: .45rem .8rem; border: 1px solid var(--rule);
               border-radius: 999px; text-decoration: none; font-size: .88rem; color: var(--soft); transition: border-color .2s, color .2s; }
.cbs-route a:hover { border-color: var(--snow); color: var(--snow); }
.cbs-route a::before { counter-increment: cbs-r; content: counter(cbs-r); font: 600 .78rem/1 var(--display); color: var(--fog); }
.cbs-cue { display: inline-flex; align-items: center; gap: .6rem; font-size: .85rem; color: var(--fog); }
.cbs-cue i { width: 1px; height: 2.4rem; background: linear-gradient(var(--fog), transparent); display: block; }
.cbs-hero-visual { width: 100%; max-width: 420px; justify-self: center; }

/* ---------- story ---------- */
.cbs-track { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
             max-width: 80rem; margin: 0 auto; padding-inline: 4.5rem var(--gutter); }
.cbs-stage-wrap { grid-column: 2; grid-row: 1; position: sticky; top: 0; height: 100vh; height: 100svh;
                  display: flex; flex-direction: column; justify-content: center; align-self: start; }
.cbs-steps { grid-column: 1; grid-row: 1; }

.cbs-stage { position: relative; width: 100%; max-width: 620px; margin: 0 auto; aspect-ratio: 1; max-height: 82vh; }
.cbs-stage svg { width: 100%; height: 100%; display: block; overflow: hidden; }
.cbs-caption { display: flex; justify-content: center; gap: .8rem; align-items: baseline; margin-top: .4rem;
               font: 500 .8rem/1 var(--display); letter-spacing: .18em; text-transform: uppercase; color: var(--fog); }
.cbs-caption b { color: var(--snow); font-weight: 500; }

.cbs-step { margin: 0; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center;
            padding-block: 3rem; padding-right: clamp(0px, 3vw, 2.5rem); transition: opacity .35s; }
.cbs-track.cbs-live .cbs-step:not(.cbs-on) { opacity: .32; }
.cbs-copy { display: flex; flex-direction: column; }
.cbs-num { font: 600 5.5rem/.8 var(--display); color: transparent; -webkit-text-stroke: 1px #4a4a50; margin: 0 0 1rem; }
.cbs-step.cbs-on .cbs-num { -webkit-text-stroke-color: var(--snow); }
.cbs-who { align-self: flex-start; display: inline-flex; align-items: center; gap: .5rem; padding: .3rem .7rem .3rem .55rem;
           border-radius: 999px; font: 500 .75rem/1 var(--display); letter-spacing: .14em; text-transform: uppercase;
           background: color-mix(in srgb, var(--c) 16%, transparent); color: var(--c); margin-bottom: 1rem; }
.cbs-who::before { content: ''; width: .5rem; height: .5rem; border-radius: 50%; background: var(--c); }
.cb-story .cbs-customer { --c: var(--red-lite); }
.cb-story .cbs-staff { --c: var(--amber); }
.cbs-step h2 { font: 500 clamp(1.9rem, 3.4vw, 2.7rem)/1.05 var(--display); text-transform: uppercase; margin: 0 0 1rem; text-wrap: balance; }
.cbs-step p { margin: 0 0 1.2rem; max-width: 34rem; font-size: 1rem; line-height: 1.6; color: var(--soft); }
.cbs-fact { font: .82rem/1.5 var(--mono); color: var(--fog); border-left: 2px solid var(--rule); padding-left: .8rem; max-width: 34rem; }
.cbs-fact b { color: var(--snow); font-weight: normal; }

/* progress rail (desktop) and bar (phones) */
.cbs-rail { position: fixed; left: 1.2rem; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: .9rem;
            z-index: 5; opacity: 0; pointer-events: none; transition: opacity .3s; }
.cbs-rail.cbs-show { opacity: 1; pointer-events: auto; }
.cbs-rail a { position: relative; display: block; width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--fog); }
.cbs-rail a.cbs-done { background: var(--fog); }
.cbs-rail a.cbs-on { background: var(--snow); border-color: var(--snow); box-shadow: 0 0 0 4px rgba(241,242,244,.12); }
.cbs-rail a span { position: absolute; left: 1.4rem; top: 50%; transform: translateY(-50%); white-space: nowrap;
                   font: 500 .7rem/1 var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--fog); opacity: 0; transition: opacity .2s; }
.cbs-rail a:hover span, .cbs-rail a:focus-visible span { opacity: 1; }
.cbs-pbar { position: fixed; left: 0; top: 0; height: calc(3px + env(safe-area-inset-top, 0px)); width: 100%; z-index: 6;
            background: linear-gradient(90deg, var(--red) var(--w, 0%), transparent 0); display: none; }

/* ---------- loop ---------- */
.cbs-loop { max-width: 72rem; margin: 0 auto; padding: clamp(4rem, 10vw, 8rem) var(--gutter); }
.cbs-loop h2 { font: 600 clamp(2.2rem, 6vw, 4.2rem)/1 var(--display); text-transform: uppercase; margin: 0 0 1.2rem; text-wrap: balance; }
.cbs-loop > p { max-width: 40rem; color: var(--soft); margin: 0 0 2.5rem; }
.cbs-chain { display: grid; grid-template-columns: repeat(var(--n, 7), minmax(0, 1fr)); counter-reset: cbs-c; }
.cbs-chain li { position: relative; margin: 0; padding: 1.4rem .9rem 0 0; border-top: 2px solid var(--rule); min-width: 0; }
.cbs-chain li::before { counter-increment: cbs-c; content: counter(cbs-c, decimal-leading-zero); display: block;
                        font: 500 .8rem/1 var(--display); letter-spacing: .1em; color: var(--fog); margin-bottom: .5rem; }
.cbs-chain li::after { content: ''; position: absolute; left: 0; top: -6px; width: 10px; height: 10px; border-radius: 50%; background: var(--c, var(--amber)); }
.cbs-chain strong { display: block; font: 500 1.15rem/1.15 var(--display); text-transform: uppercase; margin-bottom: .35rem; }
.cbs-chain span { display: block; font-size: .85rem; color: var(--fog); line-height: 1.45; }
.cbs-chain li:last-child { border-top-color: var(--red); }
.cbs-legend { margin-top: 2.5rem; font-size: .9rem; color: var(--fog); display: flex; gap: 1.5rem; flex-wrap: wrap; align-items: center; }
.cbs-legend span { display: inline-flex; align-items: center; gap: .45rem; }
.cbs-legend i { width: .6rem; height: .6rem; border-radius: 50%; background: var(--c); }
.cbs-footer { border-top: 1px solid var(--rule); padding: 1.4rem var(--gutter) calc(1.4rem + env(safe-area-inset-bottom, 0px));
              color: var(--fog); font-size: .8rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

/* ---------- phones ---------- */
@media (max-width: 820px) {
    .cbs-hero { grid-template-columns: minmax(0, 1fr); }
    .cbs-hero-visual { display: none; }
    .cbs-track { grid-template-columns: minmax(0, 1fr); padding-inline: var(--gutter); }
    .cbs-stage-wrap { grid-column: 1; grid-row: 1; height: 50vh; height: 50svh; z-index: 2; background: var(--night);
                      padding-top: env(safe-area-inset-top, 0px); justify-content: flex-start; }
    .cbs-stage { max-height: calc(50vh - 2rem); }
    .cbs-steps { grid-column: 1; grid-row: 2; }
    .cbs-step { min-height: 100vh; justify-content: flex-start; padding-block: 1.5rem 2rem; padding-right: 0; }
    .cbs-copy { position: sticky; top: calc(50vh + .75rem); }
    .cbs-track.cbs-live .cbs-step:not(.cbs-on) { opacity: .45; }
    .cbs-num { font-size: 3.4rem; margin-bottom: .6rem; }
    .cbs-rail { display: none; }
    .cbs-pbar { display: block; }
    .cbs-chain { grid-template-columns: minmax(0, 1fr); }
    .cbs-chain li { border-top: 0; border-left: 2px solid var(--rule); padding: 0 0 1.4rem 1.2rem; }
    .cbs-chain li::after { left: -6px; top: 0; }
    .cbs-chain li:last-child { border-left-color: var(--red); }
}
@media (prefers-reduced-motion: reduce) {
    .cb-story *, .cb-story *::before, .cb-story *::after { animation: none !important; }
}