/* ==========================================================================
   Brand Identity — "The Specimen Book". Page base layer (.cbi-*).
   Tokens from core.css only. Section styles: assets/css/brand/brand-identity/<id>.css.
   Primitives: page spacing vars, the specimen section head (folio + plate number),
   printer's crop marks, registration mark, specimen grid paper, the mono folio label,
   the "Illustrative" stamp and the page's own buttons/chips.
   ========================================================================== */
.cbi{
  --cbi-gap:clamp(20px,2.4vw,32px);
  --cbi-gap-l:clamp(40px,6vw,96px);
  --cbi-head-mb:clamp(44px,5.4vw,80px);
  --cbi-hero-t:clamp(136px,16vh,196px);
  --cbi-crop:18px;
  overflow-x:clip;
}
.cbi :focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.cbi-sec{position:relative;padding-block:var(--band);background:var(--paper)}
.cbi-sec--tint{background:var(--paper-2)}
.cbi-sec--ink{background:var(--ink);color:var(--on-ink-2)}
.cbi-sec--ink h2,.cbi-sec--ink h3{color:var(--on-ink)}
.cbi-sec--ink .g{color:var(--on-ink-3)}

/* ---- specimen head: folio rule on top, plate number left, title, lead ---- */
.cbi-head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:var(--cbi-gap-l);row-gap:20px;align-items:end;margin-bottom:var(--cbi-head-mb)}
.cbi-head__folio{grid-column:1 / -1;display:flex;align-items:center;justify-content:space-between;gap:16px;padding-bottom:14px;border-bottom:1px solid var(--ink);
  font-family:var(--f);font-size:var(--t-lbl);font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);line-height:1.3}
.cbi-head__folio span:last-child{color:var(--faint)}
.cbi-sec--ink .cbi-head__folio{border-color:var(--on-ink-line);color:var(--on-ink)}
.cbi-head__t{display:flex;flex-direction:column;gap:18px;min-width:0}
.cbi-head .h2{max-width:18ch;font-size:clamp(1.85rem,3.6vw,3.1rem);letter-spacing:-.03em;line-height:1.04}
.cbi-head .lead{max-width:52ch}
.cbi-head--solo{grid-template-columns:minmax(0,1fr)}
@media (max-width:860px){.cbi-head{grid-template-columns:minmax(0,1fr)}}

/* the mono folio label, e.g. "Plate 04 · Colour" */
.cbi-lbl{font-family:var(--f);font-size:var(--t-lbl);font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);line-height:1.3}
.cbi-lbl--blue{color:var(--blue)}
.cbi-lbl--ink{color:var(--ink)}
.cbi-sec--ink .cbi-lbl{color:var(--on-ink-3)}

/* ---- printer's crop marks: <span class="cbi-crop" aria-hidden="true"><i></i><i></i><i></i><i></i></span> inside a positioned box ---- */
.cbi-crop{position:absolute;inset:0;pointer-events:none;z-index:2}
.cbi-crop i{position:absolute;width:var(--cbi-crop);height:var(--cbi-crop)}
.cbi-crop i::before,.cbi-crop i::after{content:"";position:absolute;background:var(--ink)}
.cbi-crop i::before{width:100%;height:1px}
.cbi-crop i::after{width:1px;height:100%}
.cbi-crop i:nth-child(1){left:calc(var(--cbi-crop) * -1 - 6px);top:calc(var(--cbi-crop) * -1 - 6px)}
.cbi-crop i:nth-child(1)::before{bottom:0;left:0}.cbi-crop i:nth-child(1)::after{right:0;top:0}
.cbi-crop i:nth-child(2){right:calc(var(--cbi-crop) * -1 - 6px);top:calc(var(--cbi-crop) * -1 - 6px)}
.cbi-crop i:nth-child(2)::before{bottom:0;right:0}.cbi-crop i:nth-child(2)::after{left:0;top:0}
.cbi-crop i:nth-child(3){right:calc(var(--cbi-crop) * -1 - 6px);bottom:calc(var(--cbi-crop) * -1 - 6px)}
.cbi-crop i:nth-child(3)::before{top:0;right:0}.cbi-crop i:nth-child(3)::after{left:0;bottom:0}
.cbi-crop i:nth-child(4){left:calc(var(--cbi-crop) * -1 - 6px);bottom:calc(var(--cbi-crop) * -1 - 6px)}
.cbi-crop i:nth-child(4)::before{top:0;left:0}.cbi-crop i:nth-child(4)::after{right:0;bottom:0}
.cbi-sec--ink .cbi-crop i::before,.cbi-sec--ink .cbi-crop i::after{background:var(--on-ink-3)}

/* ---- registration mark (target) ---- */
.cbi-reg{display:inline-block;width:22px;height:22px;flex:none;position:relative;border-radius:50%;box-shadow:inset 0 0 0 1px currentColor;color:var(--ink)}
.cbi-reg::before,.cbi-reg::after{content:"";position:absolute;left:50%;top:50%;background:currentColor}
.cbi-reg::before{width:32px;height:1px;transform:translate(-50%,-50%)}
.cbi-reg::after{width:1px;height:32px;transform:translate(-50%,-50%)}

/* ---- specimen grid paper ---- */
.cbi-gridpaper{background-color:var(--paper);background-image:linear-gradient(var(--line-2) 1px,transparent 1px),linear-gradient(90deg,var(--line-2) 1px,transparent 1px);background-size:24px 24px}

/* ---- "Illustrative" stamp ---- */
.cbi-ill{display:inline-flex;align-items:center;gap:6px;min-height:22px;padding:2px 8px;border:1px dashed var(--line-3);border-radius:var(--r-xs);
  font-family:var(--f);font-size:var(--t-lbl);font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);line-height:1.2}
.cbi-sec--ink .cbi-ill{border-color:var(--on-ink-line);color:var(--on-ink-3)}

/* ---- page controls: square-cornered "proof" buttons ---- */
.cbi-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 16px;border:1px solid var(--line-3);border-radius:var(--r-xs);background:var(--paper);
  font-size:var(--t-sm);font-weight:500;color:var(--ink);transition:border-color var(--d1) var(--e-io),background var(--d1) var(--e-io),color var(--d1) var(--e-io)}
.cbi-btn:hover{border-color:var(--ink)}
.cbi-btn[aria-pressed="true"],.cbi-btn[aria-selected="true"],.cbi-btn.is-on{background:var(--ink);border-color:var(--ink);color:var(--on-ink)}
.cbi-btn--blue{background:var(--blue);border-color:var(--blue);color:#fff}
.cbi-btn--blue:hover{background:var(--blue-d);border-color:var(--blue-d)}
.cbi-btn:disabled{opacity:.45;cursor:not-allowed}
.cbi-sec--ink .cbi-btn{background:transparent;border-color:var(--on-ink-line);color:var(--on-ink)}
.cbi-sec--ink .cbi-btn:hover{border-color:var(--on-ink-2)}
.cbi-sec--ink .cbi-btn[aria-pressed="true"],.cbi-sec--ink .cbi-btn[aria-selected="true"],.cbi-sec--ink .cbi-btn.is-on{background:var(--paper);border-color:var(--paper);color:var(--ink)}

@media (prefers-reduced-motion:reduce){.cbi *,.cbi *::before,.cbi *::after{transition-duration:.01ms;animation:none}}