/* ─── pages/brand.css ─ /brand-guidelines/ only.
   A centred intro, then an index of chapters (.ch). Each row is a sticky
   button; site.js ("Brand page") adds .bp-ready to .bp, which collapses the
   chapters, then opens them on scroll or click, fading each .snap in once it's
   on screen. Until that script runs (no JS, a stale cached site.js, or
   .reveal-all) everything is open and visible. ── */

.bp {
  --or: #F4805D; --gr: #34D399; --bk: #0A0B0E;
  --bp-w: min(1160px, calc(100% - 48px));
}
.bp a:not(.btn-lg):not(.chip) { color: var(--brand); }
.bp a:not(.btn-lg):not(.chip):hover { color: var(--success); }
.bp .ico {
  display: inline-block; flex-shrink: 0; width: 16px; height: 16px; background: currentColor;
  -webkit-mask: var(--i) center/contain no-repeat; mask: var(--i) center/contain no-repeat;
}

/* ── Intro ─────────────────────────────────────────────────────────────────── */
.bp-intro {
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  width: var(--bp-w); margin: 0 auto; padding: 64px 0 clamp(48px,8vh,80px); text-align: center;
}
.bp-intro-k {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 48px;
  font: 400 12px/1 var(--font-mono); letter-spacing: 1.6px; text-transform: uppercase; color: var(--hint);
}
.bp-intro-k span:last-child { display: inline-flex; align-items: center; gap: 10px; }
.bp-intro-k span:last-child::before { content: ""; width: 8px; height: 8px; background: var(--success); }
.bp-intro-h {
  max-width: 20ch; margin: 0; text-wrap: pretty; text-transform: uppercase;
  font: 800 clamp(30px,4.4vw,58px)/1.04 var(--font-mono); letter-spacing: -1.6px; color: var(--fg-primary);
}
.bp-intro-h em { font-style: normal; color: var(--or); }
.bp-intro-s { max-width: 66ch; margin: 0; font: 400 15px/24px var(--font-mono); color: var(--fg-muted); }

/* ── Index + chapters ──────────────────────────────────────────────────────── */
.ix { display: flex; flex-direction: column; width: var(--bp-w); margin: 0 auto clamp(64px,12vh,120px); border-bottom: 1px dashed var(--or); }
.ch { border-top: 1px dashed var(--or); }
.ix-h { position: sticky; top: 0; z-index: 5; margin: 0; }
.ix-r {
  display: grid; grid-template-columns: 64px minmax(0,1fr) minmax(0,1fr) 32px; gap: 24px; align-items: center;
  width: 100%; padding: 18px 16px; background: var(--bk); border: 0; text-align: left; cursor: pointer;
  font-family: var(--font-mono); color: var(--fg-primary);
  transition: background 120ms steps(2), color 120ms steps(2);
}
.ix-n { font: 400 12px/1 var(--font-mono); color: var(--gr); }
.ix-t { font: 700 clamp(24px,3.4vw,48px)/1 var(--font-mono); }
.ix-s { font: 400 13px/1.5 var(--font-mono); color: var(--fg-muted); }
.ix-ar { justify-self: end; font: 400 22px/1 var(--font-mono); color: var(--or); }
.ix-ar::before { content: "+"; display: inline-block; transition: transform 300ms cubic-bezier(.22,.8,.24,1); }
.ch.open .ix-ar::before { content: "\2212"; transform: rotate(180deg); }
.ix-r:hover, .ix-r:focus-visible { background: var(--or); color: var(--bk); outline: none; }
.ix-r:hover :is(.ix-n,.ix-s,.ix-ar), .ix-r:focus-visible :is(.ix-n,.ix-s,.ix-ar) { color: var(--bk); }
.ch.open .ix-r { border-bottom: 1px dashed var(--or); }
body.bp-scrolling .ix-r { pointer-events: none; }

/* Collapsed once site.js is running (.bp-ready); .done = fully open (height:auto). */
.bp-ready .ch-b { height: 0; overflow: hidden; transition: height 600ms cubic-bezier(.22,.8,.24,1); }
.bp-ready .ch:not(.open) .ch-b { transition-duration: 440ms; transition-timing-function: cubic-bezier(.5,0,.75,.2); }
.bp-ready .ch-b.done, .reveal-all .ch-b { height: auto; overflow: visible; }
.ch-in { display: flex; flex-direction: column; }

.snap {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 28px;
  padding: clamp(40px,8vh,80px) clamp(16px,3vw,40px);
}
.snap > :is(.g2,.vp,.vc,.dnt,.cols4,.acs,.pterm) { align-self: stretch; }
.bp-ready .snap > * { opacity: 0; transform: translateY(16px); transition: opacity 520ms cubic-bezier(.22,.8,.24,1), transform 620ms cubic-bezier(.22,.8,.24,1); }
.bp-ready .snap.in > *, .reveal-all .snap > * { opacity: 1; transform: none; }
.bp-ready .ch:not(.open) .snap > * { transition-duration: 200ms; transition-delay: 0s !important; }
.snap.in > :nth-child(2) { transition-delay: 60ms; }
.snap.in > :nth-child(3) { transition-delay: 120ms; }
.snap.in > :nth-child(4) { transition-delay: 180ms; }
.snap.in > :nth-child(n+5) { transition-delay: 240ms; }

/* ── Shared bits ───────────────────────────────────────────────────────────── */
.kick { font: 700 11px/1 var(--font-mono); letter-spacing: 1.8px; text-transform: uppercase; color: var(--gr); }
.dh { max-width: 24ch; margin: 0; text-wrap: pretty; font: 700 clamp(28px,3.6vw,48px)/1.05 var(--font-mono); color: var(--fg-primary); }
.dh em { font-style: normal; color: var(--or); }
.dp { max-width: 64ch; margin: 0; font: 400 15px/24px var(--font-mono); color: var(--fg-muted); }
.g2 { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; align-items: center; }
.g2 .col { display: flex; flex-direction: column; gap: 20px; }
.chip {
  display: inline-flex; align-items: center; height: 30px; padding: 0 12px;
  border: 1px solid var(--brand); color: var(--brand); font: 400 12px/1 var(--font-mono);
  transition: background 60ms steps(1), color 60ms steps(1);
}
.chip:hover { background: var(--brand); color: var(--bg-base); }

/* About */
.bp-about .col { gap: 24px; }
.hv-term {
  justify-self: end; width: max-content; max-width: 100%; padding: 24px 28px; white-space: nowrap;
  background: var(--bk); border: 1px dashed var(--or);
  font: 400 clamp(13px,1.2vw,17px)/1.75 var(--font-mono); color: var(--fg-primary);
}
.hv-term b { color: var(--or); }
.cur { animation: bp-blink 1s steps(1) infinite; }
@keyframes bp-blink { 50% { opacity: 0; } }

/* Naming */
.nm-right { display: flex; align-items: center; gap: 12px; font: 700 12px/1 var(--font-mono); letter-spacing: 1.4px; text-transform: uppercase; color: var(--success); }
.nm-big { font: 700 clamp(56px,12vw,180px)/.9 var(--font-mono); color: var(--fg-primary); }
.nm-wrong { display: flex; flex-direction: column; gap: 10px; }
.nm-wrong span { display: flex; align-items: center; gap: 12px; font: 400 16px/1 var(--font-mono); color: var(--fg-muted); }
.nm-wrong s { text-decoration-color: var(--danger); text-decoration-thickness: 2px; }
.nm-wrong b { font-weight: 700; color: var(--danger); }

/* Asset cards (wordmark, logomark) */
.acs { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.ac { display: flex; flex-direction: column; margin: 0; background: var(--bk); border: 1px dashed var(--or); }
.ac-art { display: flex; flex: 1; align-items: center; justify-content: center; min-height: 220px; padding: 32px; }
.ac-art.d { background: var(--bk); }
.ac-art.l { background: #fff; }
.ac-art img { width: 62%; height: auto; }
.ac-art .ac-mark { width: 64px; }
.ac-art .ac-avatar { width: 96px; }
.ac-ft { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 20px; padding: 20px 24px; background: var(--bg-elevated); }
.ac-t { font: 400 14px/1.4 var(--font-mono); color: var(--fg-muted); }
.ac-t b { font-weight: 700; color: var(--fg-primary); }
.ac-l { display: flex; gap: 20px; }
.bp .ac-l a { padding-bottom: 3px; border-bottom: 1px dashed var(--or); font: 400 14px/1 var(--font-mono); color: var(--or); }
.bp .ac-l a:hover { color: var(--gr); border-color: var(--gr); }

/* Don'ts */
.dnt { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
.dnt figure { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.dnt .t { position: relative; display: flex; align-items: center; justify-content: center; height: 120px; overflow: hidden; border: 1px dashed var(--brand-line-strong); }
.dnt .t::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top right, transparent calc(50% - 1px), var(--danger) 50%, transparent calc(50% + 1px)); }
.dnt img { height: 28px; width: auto; }
.dnt-type { font: 700 26px/1 var(--font-mono); color: var(--or); }
.dnt figcaption { font: 400 12px/1.4 var(--font-mono); color: var(--fg-muted); }
.dnt figcaption b { color: var(--danger); }

/* Pixel avatar */
.msc-art { position: relative; display: flex; justify-content: center; align-items: center; padding: 40px 0; }
.msc-art img { display: block; height: min(52vh,400px); width: auto; aspect-ratio: 125/160; image-rendering: pixelated; }
.msc-art .chip { position: absolute; right: 14px; bottom: 14px; }
.rules { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.rules li { display: flex; align-items: baseline; gap: 12px; padding: 11px 0; border-top: 1px dashed var(--divider-dim); font: 400 13px/20px var(--font-mono); color: var(--fg-secondary); }
.rules b { flex-shrink: 0; font-weight: 700; }
.rules .ok b { color: var(--success); }
.rules .nope b { color: var(--danger); }

/* Colours: click a swatch to copy its hex */
.cols4 { display: flex; height: min(56vh,460px); }
.sw {
  position: relative; display: flex; flex: 1; min-width: 0; flex-direction: column; justify-content: space-between;
  padding: 20px; border: 0; text-align: left; cursor: pointer; font-family: var(--font-mono);
  outline: 1px solid transparent; outline-offset: -1px;
  transition: flex 300ms steps(3), outline-color 60ms steps(1);
}
.sw:hover { flex: 2.4; outline-color: var(--fg-primary); }
.sw:focus-visible { outline: 2px solid var(--hint); }
.sw.dark { color: var(--bk); }
.sw.light { color: var(--fg-primary); border: 1px solid var(--brand-line-strong); }
.sw-n { font: 700 14px/1 var(--font-mono); letter-spacing: .4px; }
.sw .hex { font: 700 22px/1 var(--font-mono); }
.sw .cp { position: absolute; top: 18px; right: 18px; font: 400 11px/1 var(--font-mono); opacity: .85; }
.sw.copied .cp::after { content: " \2713"; }

/* Typography */
.ty-aa { font: 700 clamp(120px,16vw,240px)/.8 var(--font-mono); color: var(--or); margin-bottom: 20px; }
.ty-row { display: grid; grid-template-columns: 120px minmax(0,1fr); gap: 24px; align-items: baseline; padding: 16px 0; border-top: 1px dashed var(--divider-dim); }
.ty-row i { font: normal 400 11px/1 var(--font-mono); color: var(--success); }
.ty-1 { font: 800 28px/1.1 var(--font-mono); color: var(--fg-primary); }
.ty-2 { font: 700 18px/1.2 var(--font-mono); letter-spacing: .6px; color: var(--or); }
.ty-3 { font: 400 14px/20px var(--font-mono); color: var(--fg-secondary); }
.ty-4 { font: 400 12px/16px var(--font-mono); color: var(--fg-muted); }
.ty-5 { font: 400 14px/1.4 var(--font-mono); color: var(--fg-primary); }
.ty-5 b { font-weight: 400; color: var(--or); }
.ty-5 span { color: var(--fg-muted); }

/* Voice */
.vp { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
.vp div { display: flex; flex-direction: column; gap: 8px; padding-top: 14px; border-top: 2px solid var(--or); }
.vp b { font: 700 15px/1 var(--font-mono); color: var(--fg-primary); }
.vp span { font: 400 12px/18px var(--font-mono); color: var(--fg-muted); }
.vc { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--or); }
.vc > div { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px; font: 400 13px/20px var(--font-mono); }
.vc .yes { background: var(--bg-terminal); }
.vc .no { border-left: 1px dashed var(--brand-line-strong); color: var(--fg-muted); }
.vc .lbl { font: 700 10px/1 var(--font-mono); letter-spacing: 1.6px; text-transform: uppercase; }
.vc .yes .lbl { color: var(--success); }
.vc .no .lbl { color: var(--danger); }
.vc p { margin: 0; }
.vc .yes p { color: var(--fg-primary); }
.vc .no p { text-decoration: line-through; text-decoration-color: rgba(248,113,113,.6); }

/* Moltsetify: before/after slider, steps, tips, prompt box */
.cmp {
  --cx: 50%; position: relative; width: 100%; max-width: min(64vh,520px); aspect-ratio: 1; overflow: hidden;
  background: var(--bg-base); border: 1px solid var(--or); user-select: none; touch-action: none; cursor: ew-resize;
}
.cmp:focus-visible { outline: 2px solid var(--hint); outline-offset: 2px; }
.cmp img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.cmp .after { image-rendering: pixelated; clip-path: inset(0 0 0 var(--cx)); }
.cmp .bar { position: absolute; top: 0; bottom: 0; left: var(--cx); width: 2px; margin-left: -1px; background: var(--or); pointer-events: none; }
.cmp .knob {
  position: absolute; top: 50%; left: var(--cx); transform: translate(-50%,-50%); display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; background: var(--or); color: var(--bk); font: 700 14px/1 var(--font-mono); pointer-events: none;
}
.cmp .tag { position: absolute; bottom: 12px; padding: 6px 8px; font: 700 10px/1 var(--font-mono); letter-spacing: 1.6px; text-transform: uppercase; pointer-events: none; }
.cmp .tag.l { left: 12px; background: var(--bg-base); color: var(--fg-primary); }
.cmp .tag.r { right: 12px; background: var(--or); color: var(--bk); }

.mz-steps { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; align-self: stretch; }
.mz-steps > div { display: flex; flex-direction: column; gap: 8px; padding: 16px; background: var(--bg-elevated); border: 1px solid var(--or); }
.mz-steps i { font: normal 700 10px/1 var(--font-mono); letter-spacing: 1.4px; text-transform: uppercase; color: var(--hint); }
.mz-steps p { margin: 0; font: 400 13px/19px var(--font-mono); color: var(--fg-secondary); }

.mz-tips { gap: 64px; align-items: stretch; }
.tips { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.tips li { display: grid; grid-template-columns: 22px 20px minmax(0,1fr); gap: 10px; align-items: center; padding: 12px 0; border-top: 1px dashed var(--divider-dim); font: 400 14px/1.3 var(--font-mono); color: var(--fg-primary); }
.tips .n { font-size: 12px; color: var(--fg-muted); }
.tips .ico { color: var(--success); }
.llm { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bp .llm a { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 16px; border: 1px solid var(--or); font: 700 14px/1 var(--font-mono); color: var(--fg-primary); }
.llm small { display: block; margin-top: 8px; font: 400 11px/1 var(--font-mono); color: var(--fg-muted); }
.bp .llm a:hover, .bp .llm a:hover small { background: var(--or); color: var(--bk); }

.pbx { position: relative; display: flex; flex-direction: column; contain: size; background: var(--bg-base); border: 1px dashed var(--or); }
.pbx .ab-top { justify-content: space-between; }
.pbx .ab-title { flex: none; }
.pbx pre { flex: 1 1 0; min-height: 0; margin: 0; padding: 20px 22px; overflow: auto; white-space: pre-wrap; background: var(--bg-terminal); font: 400 12px/19px var(--font-mono); color: var(--fg-secondary); }
.pbx .ph { font-weight: 700; color: var(--hint); }
.pbx .cpy { display: flex; align-items: center; gap: 6px; padding: 0; background: none; border: 0; cursor: pointer; font: 400 12px/1 var(--font-mono); color: var(--brand); }
.pbx .cpy .ico { width: 14px; height: 14px; }
.pbx .cpy:hover { color: var(--fg-secondary); }

/* Press: the terminal form (site.css "Terminal forms") */
.snap > .pterm { margin: 0; }

/* ── Assets pack band ──────────────────────────────────────────────────────── */
.pack { background: var(--or); }
.pack-in { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 24px; align-items: center; width: var(--bp-w); margin: 0 auto; padding: 56px 0; }
.pack h2 { margin: 0; font: 700 clamp(32px,4.4vw,56px)/1 var(--font-mono); color: var(--bk); }
.pack p { margin: 12px 0 0; font: 400 14px/22px var(--font-mono); color: var(--bk); }
.pack .btn-lg { gap: 10px; background: var(--bk); color: var(--or); text-transform: uppercase; letter-spacing: 1px; }
.pack .btn-lg:hover { background: var(--bg-elevated); color: var(--or); }
.pack .btn-lg .ico { width: 14px; height: 14px; }

/* Copy confirmation toast */

@media (max-width:1040px) {
  .dnt { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width:860px) {
  .ix-r { grid-template-columns: 40px minmax(0,1fr) 24px; padding: 16px 12px; }
  .ix-s { display: none; }
  .g2, .vp, .llm, .acs { grid-template-columns: 1fr; }
  .mz-tips { gap: 32px; }
  .pbx { contain: none; }
  .pbx pre { flex: none; max-height: 50vh; }
  .cols4 { flex-direction: column; height: auto; }
  .sw { min-height: 96px; }
  .sw:hover { flex: 1; }
  .hv-term { justify-self: stretch; width: auto; white-space: normal; }
  .pack-in { grid-template-columns: 1fr; }
}
@media (max-width:640px) {
  .vc, .mz-steps { grid-template-columns: 1fr; }
  .vc .no { border-left: 0; border-top: 1px dashed var(--brand-line-strong); }
  .ty-row { grid-template-columns: 1fr; gap: 8px; }
}
@media (prefers-reduced-motion:reduce) {
  .bp-ready .ch-b, .ix-ar::before { transition: none; }
  .bp-ready .snap > * { opacity: 1; transform: none; transition: none; }
  .cur { animation: none; }
}