.journey-page{margin:0}
/* ---------- section rhythm ---------- */
:where(.journey-page main) section{padding-block:clamp(90px,13vh,150px)}
.h2{font-weight:900;font-size:clamp(34px,5vw,66px);letter-spacing:-.035em}
.lede{font-size:clamp(17px,1.5vw,20px);color:var(--ink-2);max-width:60ch}
/* ===================== BRAND BOOK TEMPLATE (extracted verbatim, type-spec adapted) ===================== */
/* Layout: book cover hero (tilting brand-mark tile) → chapter rail 01–09 (a real sequence) → intro → four live specimens (logo, mark, colours, type), each opening its chapter page. */
.bhero{position:relative;overflow:hidden;background:var(--purple);color:#fff;padding-block:clamp(48px,8vh,96px)}
.bhero::before{content:"";position:absolute;right:-10%;top:-40%;width:70%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.14),transparent)}
.bhero-grid{position:relative;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:40px;align-items:center}
.bhero .crumb{display:flex;gap:8px;align-items:center;font-family:var(--font-display);font-size:14px;color:rgba(255,255,255,.75);margin-bottom:22px}
.bhero .crumb a{text-decoration:none}.bhero .crumb a:hover{color:#fff}
.bhero .crumb svg{width:12px;height:12px;opacity:.7}
.bhero .kick{font-family:var(--font-display);font-weight:600;font-size:15px;letter-spacing:.22em;text-transform:uppercase;color:var(--yellow)}
.bhero h1{font-weight:900;font-size:clamp(52px,8vw,120px);letter-spacing:-.045em;line-height:.9;text-transform:uppercase;margin-top:14px}
.bhero p.lede{color:rgba(255,255,255,.82);margin-top:24px;max-width:46ch}
.tile-stage{perspective:1200px;display:grid;place-items:center;min-height:340px}
.tile{position:relative;width:min(300px,64vw);aspect-ratio:1;border-radius:26%;background:linear-gradient(150deg,rgba(255,255,255,.2),rgba(255,255,255,.04));border:1.5px solid rgba(255,255,255,.3);display:grid;place-items:center;transform-style:preserve-3d;box-shadow:0 50px 80px -30px rgba(0,0,0,.45);will-change:transform}
.tile svg{width:52%;fill:#fff;transform:translateZ(50px);filter:drop-shadow(0 18px 20px rgba(0,0,0,.25))}
.tile::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.28) 48%,transparent 60%);transform:translateX(var(--shine,-40%));pointer-events:none}
.tile .ring{position:absolute;inset:-14%;border-radius:30%;border:1.5px dashed rgba(255,204,0,.6);transform:translateZ(-40px)}

.chapters-wrap{position:sticky;top:calc(74px + env(safe-area-inset-top,0px));z-index:15;background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.chapters{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;padding:10px var(--gutter);max-width:1240px;margin-inline:auto}
.chapters::-webkit-scrollbar{display:none}
.chapters > *{flex:none;display:inline-flex;align-items:baseline;gap:8px;padding:9px 14px;border-radius:10px;font-family:var(--font-display);font-weight:600;font-size:14.5px;text-decoration:none;color:var(--ink-2)}
.chapters > * span{font-weight:800;font-size:12px;color:var(--purple-text);font-variant-numeric:tabular-nums}
.chapters a:hover{background:var(--purple-soft);color:var(--ink)}
.chapters a[aria-current]{background:var(--purple);color:#fff}
.chapters a[aria-current] span{color:var(--yellow)}
.chapters .soon{opacity:.45;cursor:default}

.intro2{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(36px,6vw,96px);align-items:start}
.intro2 .body{display:grid;gap:16px;font-size:clamp(17px,1.4vw,19px);color:var(--ink-2)}
.intro2 .body p:first-child{color:var(--ink);font-family:var(--font-display);font-weight:500;font-size:clamp(20px,2vw,26px);line-height:1.35;letter-spacing:-.01em}

.assets-head{max-width:760px}
.assets-head .lede{margin-top:18px}
.bento{margin-top:56px;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:20px}
.spec{position:relative;display:flex;flex-direction:column;border-radius:28px;border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow);overflow:hidden;text-decoration:none;color:inherit;transition:border-color .3s var(--ease-out),transform .4s var(--ease-out)}
.spec:hover{border-color:var(--purple-text);transform:translateY(-4px)}
.spec .show{position:relative;display:grid;place-items:center;min-height:260px;padding:32px;background:var(--bg-2)}
.spec .txt{padding:26px 28px 28px;display:grid;gap:10px}
.spec h3{font-weight:800;font-size:clamp(22px,2.2vw,30px);letter-spacing:-.02em}
.spec p{color:var(--ink-2)}
.spec .more{display:inline-flex;align-items:center;gap:8px;margin-top:6px;font-family:var(--font-display);font-weight:700;font-size:15px;color:var(--purple-text)}
.spec .more svg{width:16px;height:16px;transition:transform .3s var(--ease-out)}
.spec:hover .more svg{transform:translateX(4px)}
.s-logo{grid-column:span 7}.s-mark{grid-column:span 5}.s-col{grid-column:span 7}.s-type{grid-column:span 5}
.s-logo .show svg{width:min(420px,90%);height:auto}
.s-logo .show .clear{position:relative;padding:28px 34px;border:1.5px dashed color-mix(in srgb,var(--purple-text) 45%,transparent);border-radius:8px}
.s-logo .show .clear i{position:absolute;width:14px;height:14px;border:1.5px solid var(--purple-text);border-radius:50%;background:var(--surface)}
.s-logo .show .clear i:nth-child(1){left:-8px;top:-8px}.s-logo .show .clear i:nth-child(2){right:-8px;top:-8px}.s-logo .show .clear i:nth-child(3){left:-8px;bottom:-8px}.s-logo .show .clear i:nth-child(4){right:-8px;bottom:-8px}
.marks{display:grid;grid-template-columns:repeat(3,64px);gap:14px}
.marks span{width:64px;height:64px;border-radius:18px;display:grid;place-items:center;border:1px solid var(--line);transition:transform .45s var(--ease-out)}
.marks span svg{width:58%}
.spec:hover .marks span{transform:rotate(-6deg)}
.spec:hover .marks span:nth-child(even){transform:rotate(6deg)}
.swatches{display:grid;grid-template-columns:2fr 2fr 1fr;gap:10px;width:100%;height:180px}
.sw{position:relative;border-radius:18px;border:0;cursor:copy;display:flex;flex-direction:column;justify-content:flex-end;padding:14px;text-align:left;font-family:var(--font-display);transition:flex-grow .4s var(--ease-out),transform .3s var(--ease-out)}
.sw:hover{transform:translateY(-3px)}
.sw b{font-size:15px;font-weight:800}
.sw small{font-size:12.5px;opacity:.85;font-variant-numeric:tabular-nums;letter-spacing:.04em}
.type-spec{width:100%;display:grid;gap:6px}
.type-spec .aa{font-family:"Visby Round CF",var(--font-display);font-weight:500;font-synthesis:none;font-size:clamp(84px,9vw,128px);line-height:.85;letter-spacing:-.04em;color:var(--purple-text)}
.type-spec .row2{display:flex;flex-wrap:wrap;gap:8px 14px;font-family:var(--font-display);font-size:15px;color:var(--ink-2)}
/* Adapted: only Medium (500) and Arial Bold (700) are live. Heavy / Extra Light have no font file, so they show the original specimen thumbnails (no ExtraBold or Regular substitution). */
.type-spec .row2{align-items:center}
.type-spec .row2 .tw{display:inline-flex;flex-direction:column;gap:4px;align-items:flex-start}
.type-spec .row2 .tw img{display:block;width:96px;height:auto;border-radius:6px;border:1px solid var(--line);background:#fff}
.type-spec .row2 .tw small{font-size:12px;font-weight:600;color:var(--ink-2)}
.type-spec .row2 .live-m{font-family:"Visby Round CF",sans-serif;font-weight:500;color:var(--ink);font-synthesis:none}
.type-spec .row2 .live-a{font-family:Arial,"Helvetica Neue",Helvetica,sans-serif;font-weight:700;color:var(--ink);font-synthesis:none}
.toast{position:fixed;left:50%;bottom:calc(28px + env(safe-area-inset-bottom,0px));z-index:40;transform:translate(-50%,20px);opacity:0;padding:12px 18px;border-radius:12px;background:var(--ink);color:var(--bg);font-family:var(--font-display);font-weight:600;font-size:14px;pointer-events:none;transition:opacity .25s var(--ease-out),transform .3s var(--ease-out)}
.toast.show{opacity:1;transform:translate(-50%,0)}

@media (max-width:900px){
  .bhero-grid,.intro2{grid-template-columns:1fr}
  .tile-stage{min-height:260px}
  .s-logo,.s-mark,.s-col,.s-type{grid-column:1/-1}
}
@media (max-width:480px){.swatches{grid-template-columns:1fr 1fr 1fr;height:auto}.sw{min-height:90px}}

/* ===================== CHAPTER PAGES (additions on the approved template language) ===================== */
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.bhero .kick .kick-sep{opacity:.55;margin-inline:.35em}
.bhero-sm{padding-block:clamp(30px,5vh,60px)}
.bhero-sm .bhero-grid{grid-template-columns:minmax(0,1.6fr) minmax(0,.4fr);gap:28px}
.bhero-sm h1{font-size:clamp(34px,5vw,70px);line-height:.94;letter-spacing:-.04em}
.bhero-sm p.lede{margin-top:18px}
.bhero-sm .tile-stage{min-height:170px}
.bhero-sm .tile{width:min(180px,44vw)}
.bhero-sm .crumb{margin-bottom:16px;flex-wrap:wrap}
.ch{padding-block:clamp(56px,9vh,100px)}
.h2-md{font-size:clamp(26px,3.4vw,44px);letter-spacing:-.03em;line-height:1.08}
.gallery{list-style:none;margin:40px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,var(--min,280px)),1fr));gap:20px}
.assets-head+.gallery{margin-top:48px}
.gallery:first-child{margin-top:0}
.shot{margin:0;height:100%;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:26px;background:var(--surface);box-shadow:var(--shadow);overflow:hidden;transition:border-color .3s var(--ease-out),transform .4s var(--ease-out)}
.shot:hover{border-color:var(--purple-text);transform:translateY(-3px)}
.shot .img{position:relative;display:grid;place-items:center;min-height:200px;padding:20px;background:#fbf9fb}
.shot img{display:block;max-width:100%;height:auto;border-radius:8px}
.shot figcaption{padding:20px 24px 26px;display:grid;gap:8px;align-content:start}
.shot h3{font-weight:800;font-size:clamp(19px,1.8vw,24px);letter-spacing:-.015em;line-height:1.15}
.shot h3 .n{display:inline-block;margin-right:10px;font-size:.62em;font-weight:800;letter-spacing:.06em;color:var(--purple-text);font-variant-numeric:tabular-nums;vertical-align:.12em}
.shot p{color:var(--ink-2);font-size:15.5px}
.shot .no,.shot .ok{position:absolute;top:12px;right:12px;width:38px;height:38px;border-radius:50%;display:grid;place-items:center}
.shot .no{background:#c62828;box-shadow:0 8px 16px -6px rgba(150,20,20,.65)}
.shot .no svg{width:18px;height:18px;stroke:#fff;stroke-width:3.2}
.shot .ok{background:var(--yellow);box-shadow:0 8px 16px -6px rgba(160,110,0,.5)}
.shot .ok svg{width:18px;height:18px;stroke:#1d0f1c}
.shot.bad{border-color:color-mix(in srgb,#c62828 40%,var(--line))}
.shot.bad:hover{border-color:#c62828}
.shot .tag{justify-self:start;font-family:var(--font-display);font-weight:800;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;padding:5px 10px;border-radius:999px;background:var(--purple-soft);color:var(--purple-text)}
.shot .tag.tag-live{background:var(--yellow);color:#1d0f1c}
.shot .live-spec{font-size:clamp(34px,4vw,54px);line-height:1.1;margin-top:6px;color:var(--ink);font-synthesis:none;letter-spacing:0}
.live-spec.live-m{font-family:"Visby Round CF",sans-serif;font-weight:500}
.live-spec.live-a{font-family:Arial,"Helvetica Neue",Helvetica,sans-serif;font-weight:700}
.notes{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.notes li{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(20px,5vw,72px);padding:34px 6px;border-bottom:1px solid var(--line)}
.notes h2{font-weight:800;font-size:clamp(26px,3vw,40px);letter-spacing:-.025em}
.notes p{color:var(--ink-2);font-size:clamp(17px,1.4vw,19px);max-width:62ch}
.prose-b{display:grid;gap:18px;max-width:72ch;color:var(--ink-2);font-size:clamp(17px,1.4vw,19px)}
.prose-b p:first-child{color:var(--ink);font-family:var(--font-display);font-weight:500;font-size:clamp(20px,2vw,26px);line-height:1.35}
.mark-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));gap:20px}
.mk-card{margin:0;height:100%;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:26px;background:var(--surface);box-shadow:var(--shadow);overflow:hidden;transition:border-color .3s var(--ease-out),transform .4s var(--ease-out)}
.mk-card:hover{border-color:var(--purple-text);transform:translateY(-3px)}
.mk-art{display:grid;place-items:center;aspect-ratio:1.15;background:#f7f2f7}
.mk-art.dark{background:#7f277d}
.mk-art svg{width:34%;height:auto;transition:transform .5s var(--ease-out)}
.mk-card:hover .mk-art svg{transform:rotate(-6deg) scale(1.05)}
.mk-card figcaption{padding:20px 24px 24px}
.mk-card h3{font-weight:800;font-size:clamp(18px,1.6vw,22px);letter-spacing:-.015em;line-height:1.2}
.palette{list-style:none;margin:48px 0 0;padding:0;display:grid;grid-template-columns:2fr 2fr 1.4fr;gap:20px}
.pal{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:28px;background:var(--surface);box-shadow:var(--shadow);overflow:hidden}
.pal-chip{min-height:240px;padding:22px;display:flex;flex-direction:column;justify-content:flex-end;font-family:var(--font-display)}
.pal-chip b{font-size:clamp(20px,2vw,26px);font-weight:800;letter-spacing:-.02em}
.pal-chip small{font-size:14px;opacity:.85;letter-spacing:.06em;font-variant-numeric:tabular-nums}
.vals{display:grid;gap:0}
.val{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:12px;align-items:center;padding:14px 18px;border-top:1px solid var(--line)}
.val .k{font-family:var(--font-display);font-weight:800;font-size:12px;letter-spacing:.14em;color:var(--purple-text)}
.val code{font-family:var(--font-display);font-weight:600;font-size:16px;font-variant-numeric:tabular-nums;user-select:all;overflow-wrap:anywhere}
.cp{position:relative;font-family:var(--font-display);font-weight:800;font-size:13px;letter-spacing:.06em;text-transform:uppercase;min-height:44px;min-width:76px;padding:0 16px;border-radius:12px;border:1px solid var(--line);background:transparent;color:var(--ink);cursor:copy;transition:background-color .2s var(--ease-out),border-color .2s var(--ease-out),color .2s var(--ease-out),transform .16s var(--ease-out)}
.cp:hover{border-color:var(--purple-text)}
.cp:active{transform:scale(.96)}
.cp.copied,.sw.copied{background:var(--yellow);border-color:var(--yellow);color:#1d0f1c}
.sw.copied{outline:3px solid var(--purple-text);outline-offset:-3px}
@media (max-width:900px){
  .notes li{grid-template-columns:1fr;gap:12px;padding:28px 2px}
  .palette{grid-template-columns:1fr}
  .pal-chip{min-height:150px}
  .bhero-sm .bhero-grid{grid-template-columns:1fr}
  .bhero-sm .tile-stage{min-height:150px;justify-items:start}
  .bhero-sm .tile{width:130px}
}
@media (max-width:480px){
  .val{grid-template-columns:40px minmax(0,1fr);}
  .val .cp{grid-column:1/-1;width:100%}
  .type-spec .row2 .tw img{width:80px}
}
@media (prefers-reduced-motion:reduce){
  .spec,.spec:hover,.sw,.sw:hover,.marks span,.spec:hover .marks span,.spec:hover .marks span:nth-child(even),.spec:hover .more svg,
  .shot,.shot:hover,.mk-card,.mk-card:hover,.mk-card:hover .mk-art svg,.cp,.cp:active{transform:none!important;transition:none!important}
  .bhero h1,.tile,.tile::after,.tile .ring{animation:none!important}
  .tile::after{display:none}
}