/* Zeal Publishers — /services (Job 20): every service is a book on Zeal's shelf.
 * Loaded only by public/services.html, after site.css (the shelf, letters, colophon, picker), story.css (the
 * journey scene) and anims.css (the plates). Every class here is prefixed svx-; the shared classes it reuses
 * are only re-sized under .svx-* parents, so no other page changes. Motion: the tokens' easings/durations,
 * transform + opacity only; reduced motion lands on the final frame (base.css) with no cover at all.    */

/* ---------- Service colours: one per book, the homepage shelf's order (s-book--1..8). Named --bk* because the
   plates inside a chapter read --t/--d/--h/--i as their own timings (anims.css). ---------- */
.svx-c1 { --bk: var(--z-green); --bk-ink: var(--z-cream); --bk-foil: var(--z-amber); }
.svx-c2 { --bk: var(--z-parchment); --bk-ink: var(--z-green); --bk-foil: var(--z-amber-ink); }
.svx-c3 { --bk: var(--z-sage); --bk-ink: var(--z-cream); --bk-foil: var(--z-amber); }
.svx-c4 { --bk: var(--z-amber); --bk-ink: var(--z-green-950); --bk-foil: var(--z-green); }
.svx-c5 { --bk: var(--z-charcoal); --bk-ink: var(--z-parchment); --bk-foil: var(--z-amber); }
.svx-c6 { --bk: var(--z-purple); --bk-ink: var(--z-green-950); --bk-foil: var(--z-green-950); }
.svx-c7 { --bk: var(--z-white); --bk-ink: var(--z-green); --bk-foil: var(--z-amber-ink); }
.svx-c8 { --bk: var(--z-green-900); --bk-ink: var(--z-amber); --bk-foil: var(--z-amber); }

/* A mini spine: the service's colour wherever the page names it (picker, journey) */
.svx-chips { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; padding: 0; }
.svx-chip {
  display: inline-flex; align-items: center; gap: .55rem; min-height: 44px; padding: .35rem .85rem .3rem .45rem;
  border: 1px solid var(--line-strong); border-radius: 6px; background: var(--card); color: var(--fg-strong);
  font-size: var(--z-fs-sm); font-weight: 500; line-height: 1.2; text-decoration: none;
  transition: border-color var(--z-dur-2), transform var(--z-dur-2) var(--z-ease-out);
}
.svx-chip:hover { color: var(--fg-strong); border-color: var(--accent); transform: translateY(-1px); }
.svx-chip__spine {
  flex: none; width: 10px; height: 26px; border-radius: 2px 2px 1px 1px; background-color: var(--bk);
  background-image: linear-gradient(transparent 5px, var(--bk-foil) 5px 6.5px, transparent 6.5px calc(100% - 7px), var(--bk-foil) calc(100% - 7px) calc(100% - 5.5px), transparent 0);
  box-shadow: inset 0 0 0 1px rgba(40,40,40,.14);
}
.svx-chips--dark .svx-chip { background: rgba(250,249,245,.05); color: var(--z-cream); }
.svx-chips--dark .svx-chip:hover { color: var(--z-cream); }

/* ======================= HERO: what we do, then the picker beside the shelf it lights ======================= */
.svx-hero { padding-bottom: clamp(3rem, 2rem + 3vw, 5.5rem); }
.svx-hero__head { display: grid; gap: 1.25rem; padding-top: clamp(1.25rem, .8rem + 1.6vw, 2.25rem); }
.svx-hero__head > *, .svx-hero__stage > * { min-width: 0; }
.svx-hero__title { max-width: 13em; margin-top: 1.1rem; font-size: clamp(2.3rem, 1.15rem + 4vw, 5.25rem); line-height: .98; }
.svx-hero__copy .s-hero__lede { margin-top: 0; }
.svx-hero__copy .z-btn-row { margin-top: 1.6rem; }
.svx-hero__copy .s-proof { margin-top: 1.4rem; }
@media (min-width: 1180px) {
  .svx-hero__head { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); column-gap: clamp(2.5rem, 5vw, 5.5rem); align-items: end; }
  .svx-hero__title { max-width: 9.5em; }
}
@media (min-width: 760px) and (max-width: 1179px) { .svx-hero__copy { max-width: 40rem; } }
.svx-hero__stage { display: grid; gap: clamp(2rem, 1.5rem + 2vw, 3rem); margin-top: clamp(2.25rem, 1.5rem + 2.4vw, 3.25rem); }
@media (min-width: 1180px) {
  .svx-hero__stage { grid-template-columns: minmax(0, 1fr) 400px; gap: 1.5rem clamp(2.5rem, 4vw, 4rem); align-items: start; }
  .svx-hero__stage .svx-pick { grid-column: 2; grid-row: 1 / span 2; }
  .svx-hero__stage .svx-shelf { grid-column: 1; grid-row: 1; margin-top: 0; }
  .svx-hero__stage .svx-note { grid-column: 1; grid-row: 2; align-self: start; }
}

/* The picker: the homepage's C card (cv-teaser / cv-opt); its answer is the note under the shelf */
.svx-pick { padding: clamp(1.25rem, .9rem + 1.4vw, 2rem); }
.svx-pick__title { font-weight: 500; }
.svx-pick__opts { grid-template-columns: 1fr; gap: .45rem; margin-top: 1.1rem; }
.svx-opt { min-height: 50px; padding: .55rem .85rem .45rem; }
@media (min-width: 560px) and (max-width: 1179px) {
  .svx-pick__opts { grid-template-columns: 1fr 1fr; }
  .svx-pick__opts .svx-opt:last-of-type { grid-column: 1 / -1; }
}
@media (min-width: 900px) and (max-width: 1179px) {
  .svx-pick__q { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); column-gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
  .svx-pick__q > :not(fieldset) { grid-column: 1; }
  .svx-pick__q .z-badge { justify-self: start; }
  .svx-pick__opts { grid-column: 2; grid-row: 1 / span 3; margin-top: 0; }
}

.svx-note {
  position: relative; padding: 1.15rem 1.4rem 1.2rem 1.6rem; border-radius: 10px; background: var(--z-white);
  border: 1px solid var(--line); box-shadow: var(--z-shadow-1);
}
.svx-note::before { content: ""; position: absolute; left: -1px; top: 14px; bottom: 14px; width: 3px; border-radius: 0 3px 3px 0; background: var(--z-amber); }
@supports selector(:has(*)) {
  .svx-hero:has(input[value="idea"]:checked) .cv-res[data-stage="idea"],
  .svx-hero:has(input[value="draft"]:checked) .cv-res[data-stage="draft"],
  .svx-hero:has(input[value="done"]:checked) .cv-res[data-stage="done"],
  .svx-hero:has(input[value="stalled"]:checked) .cv-res[data-stage="stalled"],
  .svx-hero:has(input[value="founders"]:checked) .cv-res[data-stage="founders"] { display: block; animation: cv-in .5s var(--z-ease-out); }
  .svx-hero:not(:has(input:checked)) .svx-res--none { display: block; }
}
.svx-res--none { font-family: var(--z-font-display); font-style: italic; font-size: var(--z-fs-md); line-height: 1.5; color: var(--fg-strong); }
.svx-note .cv-res__title { font-weight: 500; }
.svx-res__books { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .5rem .9rem; align-items: center; margin-top: .9rem; }
.svx-res__k { font-size: var(--z-fs-2xs); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-ink); }
.svx-note .svx-chip { min-height: 40px; }
.svx-note .cv-res__actions { margin-top: 1rem; }
.svx-note .cv-res__call { display: inline-flex; align-items: center; min-height: 44px; }
.svx-pick__reset {
  display: inline-flex; align-items: center; min-height: 44px; margin-top: .35rem; padding: 0 .1rem;
  font-size: var(--z-fs-sm); font-weight: 600; color: var(--z-green); text-decoration: underline; text-underline-offset: .2em;
  text-decoration-color: rgba(6,69,48,.35);
}
.svx-pick__reset:hover { color: var(--accent-ink); }
@media (max-width: 559px) {
  .svx-res__books { grid-template-columns: 1fr; gap: .35rem; }
  .svx-res__books .svx-chips + .svx-res__k { margin-top: .4rem; }
  .svx-note { padding: 1rem 1.1rem 1.05rem 1.3rem; }
}

/* The shelf (homepage .s-shelf / .s-book): a little shorter here, a label, and the picker's light */
.svx-shelf { position: relative; }
@media (min-width: 900px) and (max-width: 1179px) { .svx-hero__stage .svx-shelf { order: 1; } .svx-hero__stage .svx-note { order: 2; } }
.svx-shelf__label {
  display: flex; align-items: center; gap: .9rem; font-size: var(--z-fs-2xs); font-weight: 600; letter-spacing: .2em;
  text-transform: uppercase; color: var(--fg-muted);
}
.svx-shelf__label span { color: var(--accent-ink); }
.svx-shelf__label::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.svx-shelf__books { margin-top: 3.4rem; }
.svx-book .s-book__spine { cursor: pointer; }
/* Standing shelf: the books share the width in the homepage's proportions (it sits beside the picker on wide screens). */
@media (min-width: 900px) {
  .svx-shelf__books { max-width: 1040px; margin-inline: auto; gap: 5px; }
  .svx-book { flex: var(--g) 1 0; min-width: 0; }
  .svx-book .s-book__spine { width: 100%; }
  .svx-book.s-book--1 { --g: 118; } .svx-book.s-book--2 { --g: 104; } .svx-book.s-book--3 { --g: 124; } .svx-book.s-book--4 { --g: 100; }
  .svx-book.s-book--5 { --g: 108; } .svx-book.s-book--6 { --g: 112; } .svx-book.s-book--7 { --g: 98; } .svx-book.s-book--8 { --g: 116; }
  .svx-shelf .s-shelf__quill { width: clamp(56px, 7vw, 96px); }
  .svx-book.s-book--1 .s-book__spine { --h: 336px; }
  .svx-book.s-book--2 .s-book__spine { --h: 300px; }
  .svx-book.s-book--3 .s-book__spine { --h: 352px; }
  .svx-book.s-book--4 .s-book__spine { --h: 310px; }
  .svx-book.s-book--5 .s-book__spine { --h: 328px; }
  .svx-book.s-book--6 .s-book__spine { --h: 294px; }
  .svx-book.s-book--7 .s-book__spine { --h: 322px; }
  .svx-book.s-book--8 .s-book__spine { --h: 342px; }
}

/* Bookmark ribbon: grows out of the top of a "start here" book */
.svx-mark {
  position: absolute; bottom: 100%; right: 18%; width: 13px; height: 26px; background: var(--z-red);
  clip-path: polygon(0 0, 50% 22%, 100% 0, 100% 100%, 0 100%);
  transform: scaleY(0); transform-origin: 50% 100%; transition: transform var(--z-dur-3) var(--z-ease-spring);
}

/* Picker light: "start" books lift and get a bookmark, "then" books lift a little, the rest stay down and go grey.
   Greying (saturate) keeps each spine's text contrast, so every book stays a readable, usable link. */
.js .svx-book .s-book__spine {   /* the homepage spines' reveal timing (base.css [data-reveal]), plus the greying */
  transition: opacity var(--z-dur-4) var(--z-ease-out), transform var(--z-dur-4) var(--z-ease-out), filter var(--z-dur-3) var(--z-ease-out);
  transition-delay: calc(var(--i, 0) * var(--z-stagger) + var(--d, 0ms));
}
.svx-hero:has(input[value="idea"]:checked) .svx-book:not(.svx-s-idea, .svx-t-idea) .s-book__spine,
.svx-hero:has(input[value="draft"]:checked) .svx-book:not(.svx-s-draft, .svx-t-draft) .s-book__spine,
.svx-hero:has(input[value="done"]:checked) .svx-book:not(.svx-s-done, .svx-t-done) .s-book__spine,
.svx-hero:has(input[value="stalled"]:checked) .svx-book:not(.svx-s-stalled, .svx-t-stalled) .s-book__spine,
.svx-hero:has(input[value="founders"]:checked) .svx-book:not(.svx-s-founders, .svx-t-founders) .s-book__spine { filter: saturate(.08); }
.svx-hero:has(input[value="idea"]:checked) .svx-s-idea .s-book__spine,
.svx-hero:has(input[value="draft"]:checked) .svx-s-draft .s-book__spine,
.svx-hero:has(input[value="done"]:checked) .svx-s-done .s-book__spine,
.svx-hero:has(input[value="stalled"]:checked) .svx-s-stalled .s-book__spine,
.svx-hero:has(input[value="founders"]:checked) .svx-s-founders .s-book__spine { transform: translateY(-24px) rotate(-1.2deg); box-shadow: 0 30px 34px -20px rgba(2,29,19,.6); }
.svx-hero:has(input[value="idea"]:checked) .svx-t-idea .s-book__spine,
.svx-hero:has(input[value="draft"]:checked) .svx-t-draft .s-book__spine,
.svx-hero:has(input[value="done"]:checked) .svx-t-done .s-book__spine,
.svx-hero:has(input[value="stalled"]:checked) .svx-t-stalled .s-book__spine,
.svx-hero:has(input[value="founders"]:checked) .svx-t-founders .s-book__spine { transform: translateY(-10px); }
.svx-hero:has(input[value="idea"]:checked) .svx-s-idea .svx-mark,
.svx-hero:has(input[value="draft"]:checked) .svx-s-draft .svx-mark,
.svx-hero:has(input[value="done"]:checked) .svx-s-done .svx-mark,
.svx-hero:has(input[value="stalled"]:checked) .svx-s-stalled .svx-mark,
.svx-hero:has(input[value="founders"]:checked) .svx-s-founders .svx-mark { transform: none; }
.svx-hero:has(input:checked) .s-book__spine:hover, .svx-hero:has(input:checked) .s-book__spine:focus-visible { filter: none; }
@media (min-width: 900px) { .svx-book .s-book__spine:focus-visible { transform: translateY(-24px) rotate(-1.2deg); } }

/* Phones: the homepage's stack of books lying flat; the bookmark drapes over the start book's right-hand end */
@media (max-width: 899px) {
  .svx-shelf__books { margin-top: 1.25rem; }
  .svx-mark { bottom: auto; top: -5px; right: 3px; width: 11px; height: 28px; transform-origin: 50% 0;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%); }
  .svx-hero:has(input[value="idea"]:checked) .svx-s-idea .s-book__spine,
  .svx-hero:has(input[value="draft"]:checked) .svx-s-draft .s-book__spine,
  .svx-hero:has(input[value="done"]:checked) .svx-s-done .s-book__spine,
  .svx-hero:has(input[value="stalled"]:checked) .svx-s-stalled .s-book__spine,
  .svx-hero:has(input[value="founders"]:checked) .svx-s-founders .s-book__spine { z-index: 2; transform: translateX(12px); box-shadow: 0 10px 18px -12px rgba(2,29,19,.6); }
  .svx-hero:has(input[value="idea"]:checked) .svx-t-idea .s-book__spine,
  .svx-hero:has(input[value="draft"]:checked) .svx-t-draft .s-book__spine,
  .svx-hero:has(input[value="done"]:checked) .svx-t-done .s-book__spine,
  .svx-hero:has(input[value="stalled"]:checked) .svx-t-stalled .s-book__spine,
  .svx-hero:has(input[value="founders"]:checked) .svx-t-founders .s-book__spine { transform: translateX(5px); }
}

/* ======================= I. THE BOOKS: each service opened as a two-page spread ======================= */
.svx-books { padding-top: clamp(3rem, 2rem + 3vw, 5.5rem); }
.svx-chs { display: grid; gap: clamp(2.25rem, 1.5rem + 3vw, 4.5rem); list-style: none; padding: 0; }
.svx-ch__book {
  position: relative; display: grid; padding: 9px; border-radius: 8px;
  background-color: var(--bk); background-image: linear-gradient(135deg, rgba(255,255,255,.1), rgba(255,255,255,0) 40%, rgba(0,0,0,.12));
  box-shadow: inset 0 0 0 1px rgba(40,40,40,.12), var(--z-shadow-book);
}
.svx-ch__plate, .svx-ch__page { position: relative; min-width: 0; background: #FBF8F1; }
.svx-ch__plate {
  display: flex; flex-direction: column; justify-content: center; padding: clamp(.9rem, .5rem + 1.6vw, 1.9rem);
  border-radius: 4px 4px 0 0;
}
.svx-ch__plate .an { box-shadow: inset 0 0 0 1px rgba(6,69,48,.28), inset 0 0 0 10px var(--z-parchment), inset 0 0 0 11px rgba(6,69,48,.3), var(--z-shadow-1); }
.svx-ch__cap { margin-top: .8rem; text-align: center; font-family: var(--z-font-display); font-style: italic; font-size: var(--z-fs-sm); line-height: 1.4; color: var(--fg-muted); }
.svx-ch__cap span { font-style: normal; font-variant: small-caps; letter-spacing: .06em; color: var(--fg-strong); }
.svx-ch__page {
  display: flex; flex-direction: column; padding: clamp(1.4rem, 1rem + 2vw, 3rem) clamp(1.25rem, .9rem + 2.2vw, 3.25rem);
  border-radius: 0 0 4px 4px; background-image: linear-gradient(180deg, rgba(60,40,10,.09), rgba(60,40,10,0) 18px);
}
@media (min-width: 960px) {
  .svx-ch__book { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 10px; }
  .svx-ch__plate { border-radius: 4px 0 0 4px; box-shadow: inset -14px 0 18px -16px rgba(60,40,10,.35); }
  .svx-ch__page { justify-content: center; border-radius: 0 4px 4px 0; background-image: linear-gradient(90deg, rgba(60,40,10,.11), rgba(60,40,10,0) 30px); }
  .svx-ch--flip .svx-ch__plate { order: 2; border-radius: 0 4px 4px 0; box-shadow: inset 14px 0 18px -16px rgba(60,40,10,.35); }
  .svx-ch--flip .svx-ch__page { border-radius: 4px 0 0 4px; background-image: linear-gradient(270deg, rgba(60,40,10,.11), rgba(60,40,10,0) 30px); }
  /* the gutter: a soft fold where the two pages meet */
  .svx-ch__book::after {
    content: ""; position: absolute; top: 10px; bottom: 10px; left: 50%; width: 2px; margin-left: -1px; pointer-events: none;
    background: linear-gradient(rgba(60,40,10,.06), rgba(60,40,10,.2) 50%, rgba(60,40,10,.06));
  }
}

.svx-ch__no { display: flex; flex-wrap: wrap; gap: .25rem .8rem; font-size: var(--z-fs-2xs); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-ink); }
.svx-ch__name { margin-top: .55rem; font-size: var(--z-fs-xl); font-weight: 500; letter-spacing: -.02em; line-height: 1.1; }
.svx-ch__short { margin-top: .4rem; font-family: var(--z-font-display); font-style: italic; font-size: var(--z-fs-md); color: var(--fg-strong); }
.svx-ch__k { margin-top: 1.4rem; font-size: var(--z-fs-2xs); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-muted); }
.svx-ch__gets { display: grid; gap: .5rem; margin-top: .65rem; list-style: none; padding: 0; }
.svx-ch__gets li { display: flex; gap: .7rem; align-items: flex-start; line-height: 1.45; color: var(--fg); }
.svx-ch__gets svg { flex: none; width: 1.35rem; height: 1.35rem; padding: 3px; margin-top: .05rem; border-radius: 50%; background: var(--z-green); color: var(--z-amber); }
.svx-ch__detail { margin-top: 1.1rem; color: var(--fg); max-width: 34rem; }
.svx-ch__facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 1rem 2.25rem; margin-top: 1.5rem; padding-top: 1.1rem; border-top: 1px solid var(--line); }
.svx-ch__facts > :only-child { grid-column: 1 / -1; }
@media (max-width: 420px) { .svx-ch__facts { grid-template-columns: 1fr; } }
.svx-ch__facts dt { font-size: var(--z-fs-2xs); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-muted); }
.svx-ch__facts dd { margin: .35rem 0 0; font-family: var(--z-font-display); font-size: var(--z-fs-md); color: var(--fg-strong); }
.svx-eds { display: flex; flex-wrap: wrap; gap: .35rem; }
.svx-ed-pill {
  display: inline-flex; align-items: center; min-height: 28px; padding: .2rem .65rem .1rem; border-radius: 999px;
  font-family: var(--z-font-body); font-size: var(--z-fs-xs); font-weight: 600; letter-spacing: .02em;
  border: 1px solid var(--z-green); color: var(--z-green); background: var(--z-white);
}
.svx-ed-pill--prestige { background: var(--z-green); color: var(--z-cream); }
.svx-ed-pill--imperial { background: var(--z-green-900); color: var(--z-cream); border-color: var(--z-purple); }
.svx-ch__note { display: block; margin-top: .45rem; max-width: 28rem; font-family: var(--z-font-body); font-size: var(--z-fs-xs); line-height: 1.45; color: var(--fg-muted); }
.svx-ch__acts { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; margin-top: 1.75rem; }
/* text links keep their underline tight to the words; the hit area grows to 44px+ around them */
.svx-ch__acts .z-link, .svx-eds-more .z-link { position: relative; }
.svx-ch__acts .z-link::after, .svx-eds-more .z-link::after { content: ""; position: absolute; inset: -12px -6px; }
@media (max-width: 520px) {
  .svx-ch__acts .z-btn { width: 100%; }
  .svx-ch__acts .z-link { display: inline; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
  .svx-ch__acts .z-link svg { display: inline-block; margin-left: .35em; vertical-align: -.12em; }
}
@media (max-width: 559px) {
  .svx-ch__book { padding: 7px; }
  .svx-ch__plate { padding: .6rem; }
  .svx-ch__cap { display: none; }
  .svx-ch__page { padding-top: 1.25rem; }
}
.svx-nw { white-space: nowrap; }
@media (max-width: 899px) { .svx-book .s-book__time { text-wrap: balance; } }

/* "Start here" / "Next" tab on the chapters the picker chose (body[data-pick], set by the page script) */
.svx-ch__rib {
  display: none; position: absolute; top: 0; right: clamp(1rem, 3vw, 2.5rem); z-index: 2; transform: translateY(-50%);
  padding: .4rem .85rem .3rem; border-radius: 4px; font-size: var(--z-fs-xs); font-weight: 600; letter-spacing: .04em;
  background: var(--z-amber); color: var(--z-green-950); box-shadow: 0 8px 16px -10px rgba(2,29,19,.6);
}
.svx-ch__rib--then { background: var(--z-green); color: var(--z-cream); }
[data-pick="idea"] .svx-s-idea .svx-ch__rib--start, [data-pick="idea"] .svx-t-idea .svx-ch__rib--then,
[data-pick="draft"] .svx-s-draft .svx-ch__rib--start, [data-pick="draft"] .svx-t-draft .svx-ch__rib--then,
[data-pick="done"] .svx-s-done .svx-ch__rib--start, [data-pick="done"] .svx-t-done .svx-ch__rib--then,
[data-pick="stalled"] .svx-s-stalled .svx-ch__rib--start, [data-pick="stalled"] .svx-t-stalled .svx-ch__rib--then,
[data-pick="founders"] .svx-s-founders .svx-ch__rib--start, [data-pick="founders"] .svx-t-founders .svx-ch__rib--then { display: block; animation: cv-in .5s var(--z-ease-out); }

/* The cover: the book arrives closed, its cover lifts (the homepage band's cover, played in reverse),
   then the plate plays once. JS + full motion only; otherwise there is no cover and the plate just plays. */
.svx-ch__cover { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .js .svx-ch__cover {
    position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: .9rem; padding: 2.5rem 2rem; text-align: center; color: var(--bk-foil); border-radius: inherit;
    background-color: var(--bk);
    background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 2px, transparent 2px 4px),
                      linear-gradient(90deg, rgba(0,0,0,.32), rgba(0,0,0,0) 6%, rgba(255,255,255,.08) 8%, rgba(255,255,255,0) 24%);
    box-shadow: inset 0 0 0 1px rgba(40,40,40,.12);
    transform-origin: 0 50%; backface-visibility: hidden; -webkit-backface-visibility: hidden;
    transition: transform 1.2s var(--z-ease-in-out), opacity .3s var(--z-ease-soft) .42s;
  }
  .js .svx-ch--flip .svx-ch__cover {
    transform-origin: 100% 50%;
    background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 2px, transparent 2px 4px),
                      linear-gradient(270deg, rgba(0,0,0,.32), rgba(0,0,0,0) 6%, rgba(255,255,255,.08) 8%, rgba(255,255,255,0) 24%);
  }
  .js .svx-ch.is-open .svx-ch__cover { transform: perspective(3600px) rotateY(-150deg); opacity: 0; }
  .js .svx-ch--flip.is-open .svx-ch__cover { transform: perspective(3600px) rotateY(150deg); }
  .js .svx-ch.is-reset .svx-ch__cover { transition: none; }
  .js .svx-ch:not(.is-play) .an * { animation-play-state: paused; }
}
.svx-ch__frame { position: absolute; inset: 14px; border: 1px solid var(--bk-foil); border-radius: 3px; opacity: .65; pointer-events: none; }
.svx-ch__kick { font-size: var(--z-fs-2xs); font-weight: 600; letter-spacing: .3em; text-transform: uppercase; }
.svx-ch__ctitle { max-width: 12ch; font-family: var(--z-font-display); font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem); font-weight: 500; line-height: 1.05; letter-spacing: -.02em; color: var(--bk-ink); text-wrap: balance; }
.svx-ch__rule { width: 2.5rem; height: 2px; background: var(--bk-foil); }
.svx-ch__cshort { font-family: var(--z-font-display); font-style: italic; font-size: var(--z-fs-md); color: var(--bk-ink); opacity: .85; }

/* ======================= II. JOURNEY (the homepage band, with each stage's books) ======================= */
.svx-journey .z-head { margin-bottom: clamp(1.5rem, 1rem + 2vw, 3rem); }
.svx-journey .z-lede { color: var(--z-green-200); }
.svx-journey .z-head h2, .svx-journey .z-head .z-lede { margin-top: 0; }
.svx-jr { margin: 0 0 2rem; list-style: none; padding: 0; border-top: 1px solid var(--line); }
.svx-jr__row { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); gap: .9rem; padding: .95rem 0 1rem; border-bottom: 1px solid var(--line); }
.svx-jr__n {
  display: grid; place-items: center; width: 2.3rem; height: 2.3rem; border: 1px solid rgba(239,154,16,.55); border-radius: 50%;
  font-family: var(--z-font-display); font-size: .95rem; color: var(--z-amber);
  transition: background-color .45s var(--z-ease-out), color .45s, border-color .45s;
}
.svx-jr__t { font-family: var(--z-font-display); font-size: var(--z-fs-md); font-weight: 500; line-height: 1.3; color: var(--z-cream); }
.svx-jr__f { margin-top: .15rem; font-size: var(--z-fs-sm); color: var(--z-green-200); }
.svx-jr__main .svx-chips { margin-top: .6rem; }
.svx-jr__row.is-done .svx-jr__n { border-color: var(--z-amber); }
.svx-jr__row.is-active .svx-jr__n { background: var(--z-amber); border-color: var(--z-amber); color: var(--z-green-950); }
@media (min-width: 960px) {
  .svx-journey__grid { align-items: start; }
  .svx-journey .s-band__stage { position: sticky; top: calc(var(--z-header-h) + 1.5rem); }
}
@media (max-width: 959px) { .svx-journey__grid .s-band__stage { order: -1; } }
@media (max-width: 759px) {
  .svx-jr__row { grid-template-columns: 2.2rem minmax(0, 1fr); gap: .7rem; padding: .8rem 0 .85rem; }
  .svx-jr__n { width: 2rem; height: 2rem; font-size: .85rem; }
  .svx-jr__t { font-size: var(--z-fs-base); }
  .svx-jr .svx-chip { min-height: 40px; font-size: var(--z-fs-xs); }
}

/* ======================= III. THE THREE EDITIONS (compact) + colophon ======================= */
.svx-edcards { display: grid; gap: 1rem; list-style: none; padding: 0; }
@media (min-width: 860px) { .svx-edcards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; } }
.svx-edcard {
  position: relative; display: flex; flex-direction: column; gap: .7rem; padding: 2rem 1.75rem 1.6rem; border-radius: 4px;
  background: var(--z-white); color: var(--z-charcoal); box-shadow: var(--z-shadow-2);
}
.svx-edcard::before { content: ""; position: absolute; inset: 9px; border: 1px solid var(--line-strong); border-radius: 2px; pointer-events: none; }
.svx-edcard--prestige::before { border-color: rgba(239,154,16,.6); }
.svx-edcard--imperial { background-image: radial-gradient(120% 55% at 50% 0%, rgba(160,130,197,.26), transparent 62%); }
.svx-edcard--imperial::before { border-color: rgba(160,130,197,.65); }
.svx-edcard__name { font-size: var(--z-fs-lg); font-weight: 500; }
.svx-edcard__name small { display: block; margin-bottom: .2rem; font-family: var(--z-font-body); font-size: var(--z-fs-2xs); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-ink); }
.svx-edcard__badge { width: fit-content; padding: .2rem .65rem .1rem; border-radius: 999px; background: var(--badge-bg); color: var(--badge-fg); font-size: var(--z-fs-xs); font-weight: 600; }
.svx-edcard__tag { flex: 1; color: var(--fg-muted); }
.svx-edcard .z-btn { margin-top: .5rem; }
.svx-eds-more { margin-top: 1.75rem; text-align: center; }

@media (max-width: 759px) {
  .svx-edcard { padding: 1.6rem 1.35rem 1.3rem; } .svx-edcard::before { inset: 7px; }
  /* phones: the homepage editions' swipe rail */
  .svx-edcards {
    display: flex; gap: .85rem; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; align-items: stretch;
    margin-inline: calc(-1 * var(--z-gutter)); padding: .5rem var(--z-gutter) 1rem; scroll-padding-inline: var(--z-gutter); scrollbar-width: none;
  }
  .svx-edcards::-webkit-scrollbar { display: none; }
  .svx-edcard { flex: 0 0 84%; scroll-snap-align: start; }
  .svx-eds-more { margin-top: 1rem; text-align: left; }
}

/* ======================= V. SPECIALIST PAGES ======================= */
.svx-spec__cols { display: grid; gap: 2rem; grid-template-columns: 1fr; }
@media (min-width: 860px) { .svx-spec__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem; } }
.svx-spec__col h3 { margin-bottom: .75rem; font-family: var(--z-font-body); font-size: var(--z-fs-2xs); font-weight: 600; letter-spacing: var(--z-track-caps); text-transform: uppercase; color: var(--accent-ink); }
.svx-spec__col ul { display: grid; list-style: none; padding: 0; border-top: 1.5px solid var(--z-green); }
.svx-spec__col li { border-bottom: 1px solid var(--line-strong); }
.svx-spec__col a {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 52px; padding: .6rem .15rem;
  font-family: var(--z-font-display); font-size: var(--z-fs-md); color: var(--fg-strong); text-decoration: none;
  transition: padding var(--z-dur-3) var(--z-ease-out), background-color var(--z-dur-2);
}
.svx-spec__col a svg { width: 1rem; height: 1rem; flex: none; color: var(--accent-ink); transition: transform var(--z-dur-2) var(--z-ease-out); }
.svx-spec__col a:hover { padding-left: .5rem; background: var(--z-parchment-50); color: var(--fg-strong); }
.svx-spec__col a:hover svg { transform: translateX(3px); }
@media (max-width: 759px) { .svx-spec__col a { min-height: 48px; font-size: var(--z-fs-base); } }

/* ---------- Reduced motion: every state is static and readable ---------- */
@media (prefers-reduced-motion: reduce) {
  .svx-chip, .svx-mark, .svx-spec__col a, .svx-spec__col a svg, .svx-jr__n { transition: none; }
  .svx-chip:hover { transform: none; }
}