/* /brand/ only. Shared components live in /styles.css. Swatches are classes (CSP: no style attributes)
   and read the live tokens, so a swatch can never drift from styles.css. */
.bk-defs{ position:absolute; width:0; height:0; overflow:hidden; }

/* ---------- head + contents ---------- */
.bk-head .actions{ gap:28px; }
.bk-head .more{ min-height:44px; }
.bk-toc{ margin-top:clamp(56px, 3rem + 2vw, 96px); }
.bk-toc ol{ list-style:none; display:flex; flex-wrap:wrap; gap:4px 32px; padding-top:18px; border-top:1px solid var(--line-2); }
.bk-toc a{ display:inline-flex; align-items:center; gap:10px; min-height:44px; padding:0; color:var(--ink-2); text-decoration:none; font-weight:500; }
@media (hover: hover) and (pointer: fine){ .bk-toc a:hover{ color:var(--ink); } }
.bk-toc span{ font:500 var(--t-label)/1 var(--mono); color:var(--ink-4); }
.bk-toc ol{ row-gap:0; }

/* ---------- logo tiles ---------- */
.bk-art{ display:grid; place-items:center; border-radius:var(--radius); box-shadow:inset 0 0 0 1px var(--line); }
.bk-art.on-dark{ background:var(--card); }
.bk-art.on-light{ background:var(--ink); box-shadow:none; }
.bk-art.on-amber{ background:var(--amber); box-shadow:none; }

.bk-lockups{ list-style:none; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:48px clamp(20px, 2.5vw, 32px); }
.bk-lockups .bk-art{ aspect-ratio:16 / 10; }
.bk-lockups .bk-art img{ width:56%; }
.bk-lockups .bk-art img.bk-mark{ width:19%; }
.bk-lockups p{ margin-top:16px; }
.bk-lockups p b{ display:block; font-weight:600; letter-spacing:-.012em; }
.bk-lockups p span{ display:block; margin-top:2px; color:var(--ink-3); font-size:var(--t-small); }
.bk-icon-sizes{ display:flex !important; align-items:center; justify-content:center; gap:clamp(12px, 2vw, 24px); }
.bk-lockups .bk-icon-sizes img{ flex:none; }
.bk-icon-sizes img:nth-child(1){ width:96px; }
.bk-icon-sizes img:nth-child(2){ width:60px; }
.bk-icon-sizes img:nth-child(3){ width:40px; }
.bk-icon-sizes img:nth-child(4){ width:24px; }
/* download links: small type, 44 px hit areas */
.bk-dl{ display:flex; flex-wrap:wrap; gap:0 8px; margin-top:2px !important; font:500 var(--t-micro)/1.4 var(--mono); }
.bk-dl a{ display:inline-flex; align-items:center; min-width:44px; min-height:44px; padding-right:8px; color:var(--ink-2); text-underline-offset:3px; }

/* construction drawings */
.bk-anatomy{ display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(32px, 5vw, 80px); margin-top:clamp(72px, 4rem + 3vw, 128px); padding-top:48px; border-top:1px solid var(--line); }
.bk-anatomy figure{ margin:0; }
.bk-anatomy svg{ width:100%; height:auto; max-height:300px; overflow:visible; }
.bk-anatomy figcaption{ margin-top:24px; max-width:48ch; color:var(--ink-2); font-size:var(--t-small); }
.bk-anatomy figcaption b{ color:var(--ink); }
.bk-ink{ fill:var(--ink); }
.bk-ghost{ fill:var(--ink); opacity:.07; }
.bk-guide{ fill:none; stroke:var(--ink-4); stroke-width:1; stroke-dasharray:3 3; vector-effect:non-scaling-stroke; }
.bk-notch{ fill:rgba(255,255,255,.07); stroke:var(--ink-2); stroke-width:1.5; vector-effect:non-scaling-stroke; }
.bk-cross{ stroke:var(--ink); stroke-width:1; vector-effect:non-scaling-stroke; }
.bk-dim{ fill:none; stroke:var(--ink-3); stroke-width:1; vector-effect:non-scaling-stroke; }
.bk-label{ fill:var(--ink-3); font:500 4.2px var(--mono); }
.bk-zone{ fill:rgba(255,255,255,.05); }
.bk-edge{ fill:none; stroke:var(--ink-3); stroke-width:1; stroke-dasharray:4 3; vector-effect:non-scaling-stroke; }

/* do and don't */
.bk-misuse{ list-style:none; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:clamp(16px, 2vw, 28px); margin-top:clamp(56px, 3rem + 2vw, 88px); }
.bk-mu-art{ display:grid; place-items:center; height:120px; border-radius:var(--radius); background:var(--bg-2); box-shadow:inset 0 0 0 1px var(--line); }
.bk-mu-art svg{ width:62%; height:auto; fill:var(--ink); overflow:visible; }
.bk-mu-art .bk-recolor{ fill:var(--prior); }
.bk-mu-art .bk-stretch{ width:88%; aspect-ratio:7.4; }
.bk-spot{ fill:none; stroke:var(--ink-3); stroke-width:1.5; stroke-dasharray:3 2; vector-effect:non-scaling-stroke; }
.bk-spot.ok{ stroke:var(--ink-2); stroke-dasharray:none; }
.bk-misuse p{ margin-top:14px; color:var(--ink-2); font-size:var(--t-small); }
.bk-ok{ color:var(--ink) !important; }
/* Don'ts are marked by the word and the struck label, not by a status color (status colors are never decoration). */
.bk-no{ color:var(--ink) !important; text-decoration:line-through; text-decoration-thickness:1.5px; text-decoration-color:var(--ink-3); }

/* ---------- color ---------- */
.sw-bg{ background:var(--bg); } .sw-bg-2{ background:var(--bg-2); } .sw-card{ background:var(--card); } .sw-card-2{ background:var(--card-2); }
.sw-line{ background:var(--line); } .sw-line-2{ background:var(--line-2); }
.sw-ink{ background:var(--ink); } .sw-ink-2{ background:var(--ink-2); } .sw-ink-3{ background:var(--ink-3); } .sw-ink-4{ background:var(--ink-4); }
.sw-amber{ background:var(--amber); } .sw-amber-2{ background:var(--amber-2); } .sw-amber-ink{ background:var(--amber-ink); }
.sw-new{ background:var(--new); } .sw-prior{ background:var(--prior); } .sw-wear{ background:var(--wear); } .sw-sealed{ background:var(--sealed); }
.sw-paint-covered{ background:var(--paint-covered); } .sw-paint-partial{ background:var(--paint-partial); } .sw-paint-needs{ background:var(--paint-needs); } .sw-paint-empty{ background:var(--paint-empty); }

.bk-strip{ border:1px solid var(--line); display:grid; grid-template-columns:1.6fr 1.6fr 1.6fr 1fr 1fr 1fr 1fr; height:clamp(140px, 10rem + 4vw, 240px); margin-bottom:clamp(56px, 3rem + 2vw, 88px); border-radius:var(--radius-lg); overflow:hidden; }
.bk-strip > div{ display:flex; align-items:flex-end; padding:16px; min-width:0; }
.bk-strip span{ font:500 13px/1.3 var(--font); color:rgba(0,0,0,.66); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bk-strip .sw-bg span, .bk-strip .sw-card span{ color:var(--ink-3); }

.bk-colors td:first-child{ position:relative; padding-left:44px; }
.bk-colors .sub{ margin-top:2px; }
.bk-sw{ position:absolute; left:0; top:15px; width:28px; height:28px; border-radius:8px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.1); }
.bk-colors tr.bk-group th{ padding:36px 0 12px; border-bottom:1px solid var(--line-2); color:var(--ink); }
.bk-colors tbody tr.bk-group:first-child th{ padding-top:20px; }
.bk-colors td{ vertical-align:top; }
.bk-colors td:not(:first-child){ padding-top:20px; }
.bk-tok{ color:var(--ink-3) !important; white-space:nowrap; }
.bk-hex{ position:relative; display:inline-flex; align-items:center; min-height:44px; margin-block:-11px; padding:0; border:0; background:none; color:var(--ink); font:500 var(--t-small)/1.4 var(--mono); letter-spacing:-.01em; cursor:copy; transition:transform .16s var(--ease-out); }
.bk-hex{ -webkit-user-select:text; user-select:text; }
.bk-hex:active{ transform:scale(.97); }
/* Copy refused by the browser: the status line leaves sr-only and shows as a pill at the bottom of the screen. */
.bk-copy-status.is-failed{ position:fixed; left:50%; bottom:max(20px, env(safe-area-inset-bottom)); z-index:60; width:max-content; max-width:calc(100vw - 32px); height:auto; margin:0; padding:12px 18px; overflow:visible; clip:auto; white-space:normal; transform:translateX(-50%); border-radius:18px; background:var(--card-2); box-shadow:inset 0 0 0 1px var(--line-2), 0 12px 32px rgba(0,0,0,.45); color:var(--ink); font-size:var(--t-small); text-align:center; }
/* "Copied" slides out from the value it confirms, and back in as it leaves. */
.bk-hex::after{ content:"Copied"; position:absolute; left:calc(100% + 10px); top:50%; transform:translate(-4px, -50%); font:500 var(--t-label)/1 var(--font); color:var(--ink-2); opacity:0; transition:opacity .2s var(--ease-out), transform .2s var(--ease-out); white-space:nowrap; }
.bk-hex.is-copied::after{ opacity:1; transform:translate(0, -50%); }
@media (hover: hover) and (pointer: fine){
  .bk-hex:hover{ text-decoration:underline; text-decoration-color:var(--ink-3); text-underline-offset:4px; }
}
.bk-note{ margin-top:24px; }

/* ---------- type ---------- */
.bk-ladder{ list-style:none; border-top:1px solid var(--line-2); }
.bk-ladder li{ display:grid; grid-template-columns:240px minmax(0,1fr); align-items:baseline; gap:12px 40px; padding:28px 0; border-bottom:1px solid var(--line); }
.bk-ladder .lede{ max-width:none; }
.bk-body{ color:var(--ink-2); max-width:62ch; }
.bk-label-sample{ color:var(--ink-2); }
.bk-data{ white-space:normal; color:var(--ink); }
.bk-scales{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:clamp(32px, 5vw, 96px); margin-top:clamp(56px, 3rem + 2vw, 96px); }
.bk-scales h3{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:4px 16px; margin-bottom:16px; }
.bk-scales h3 span{ font-weight:400; font-size:var(--t-small); }

/* ---------- icons ---------- */
.bk-sub{ margin-bottom:18px; }
.bk-status{ list-style:none; border-top:1px solid var(--line-2); }
.bk-status li{ display:grid; grid-template-columns:28px minmax(0,auto) minmax(0,1fr) auto; align-items:center; gap:4px 16px; padding:18px 0; border-bottom:1px solid var(--line); }
.bk-status .i{ width:24px; height:24px; }
.bk-status b{ font-weight:600; white-space:nowrap; }
.bk-status span:not(.i){ color:var(--ink-3); font-size:var(--t-small); }
.bk-status code, .bk-objects code{ font-size:var(--t-micro); color:var(--ink-3); }
.c-new .i, .c-new b{ color:var(--new); }
.c-prior .i, .c-prior b{ color:var(--prior); }
.c-wear .i, .c-wear b{ color:var(--wear); }
.c-none .i{ color:var(--ink-2); }
.c-time .i, .c-time b{ color:var(--ink-2); }
.c-sealed .i{ color:var(--sealed); }

.bk-sub-next{ margin-top:clamp(56px, 3rem + 2vw, 96px); }
.bk-objects{ list-style:none; display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); border-top:1px solid var(--line-2); }
.bk-objects li{ display:grid; align-content:start; gap:6px; padding:24px 20px 24px 0; border-bottom:1px solid var(--line); }
.bk-objects li:not(:nth-child(5n+1)){ padding-left:20px; border-left:1px solid var(--line); }
.bk-objects .i{ width:28px; height:28px; margin-bottom:10px; color:var(--ink); }
.bk-objects code{ color:var(--ink); font-size:var(--t-small); }
.bk-objects span{ color:var(--ink-3); font-size:var(--t-small); }

/* ---------- seal: the one raised band ---------- */
.bk-seal-band{ background:var(--bg-2); border-block:1px solid var(--line); }
.bk-seal{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); align-items:center; gap:clamp(40px, 6vw, 112px); }
.bk-seal-visual{ display:grid; place-items:center; }
.bk-seal .lede{ margin-top:24px; }
.bk-states{ list-style:none; margin-top:40px; border-top:1px solid var(--line-2); }
.bk-states li{ display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:6px 12px; padding:20px 0; border-bottom:1px solid var(--line); }
.bk-states .i{ width:20px; height:20px; }
.bk-states p{ grid-column:2; color:var(--ink-2); font-size:var(--t-small); }
.bk-seal-files{ list-style:none; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px; margin-top:32px; }
.bk-seal-files .bk-art{ aspect-ratio:3 / 2; }
.bk-seal-files img{ width:64px; }
.bk-seal-files a{ display:flex; align-items:center; min-height:44px; margin-top:2px; font:500 var(--t-micro)/1.4 var(--font); color:var(--ink-2); text-underline-offset:3px; }

/* ---------- voice ---------- */
.bk-voice td:first-child{ font-weight:600; white-space:nowrap; }
.bk-voice td:nth-child(2){ color:var(--ink); }
.bk-voice td:nth-child(3){ color:var(--ink-3); }
.bk-haptics{ display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:24px clamp(32px, 5vw, 96px); margin-top:clamp(56px, 3rem + 2vw, 96px); }
.bk-haptics .dim{ margin-top:10px; max-width:36ch; }
.bk-haptics dd{ font-family:var(--font); }

/* ---------- files ---------- */
.bk-files td:first-child{ font-weight:600; white-space:nowrap; }
.bk-files .sub{ font-weight:400; }
.bk-links{ display:flex; flex-wrap:wrap; gap:0 18px; margin-block:-10px; }
.bk-links a{ display:inline-flex; align-items:center; gap:6px; min-height:44px; min-width:44px; color:var(--ink); text-underline-offset:3px; }
.bk-links small{ color:var(--ink-4); font:500 var(--t-label)/1 var(--mono); }
.bk-links-mono a{ font:500 var(--t-micro)/1.6 var(--mono); }

/* ---------- responsive ---------- */
@media (max-width: 1020px){
  .bk-objects{ grid-template-columns:repeat(3, minmax(0,1fr)); }
  .bk-objects li:not(:nth-child(5n+1)){ padding-left:0; border-left:0; }
  .bk-objects li:not(:nth-child(3n+1)){ padding-left:20px; border-left:1px solid var(--line); }
  .bk-misuse{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width: 860px){
  .bk-lockups{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .bk-anatomy, .bk-seal, .bk-scales, .bk-haptics{ grid-template-columns:minmax(0,1fr); }
  .bk-seal-visual .dial{ max-width:280px; }
  .bk-ladder li{ grid-template-columns:minmax(0,1fr); gap:10px; }
  .bk-strip{ grid-template-columns:repeat(2, minmax(0,1fr)); grid-auto-rows:72px; height:auto; }
  .bk-strip .sw-bg{ grid-column:span 2; }
  .bk-strip > div{ padding:12px 14px; }
  .bk-use{ display:none; }
}
@media (max-width: 560px){
  .bk-lockups{ grid-template-columns:minmax(0,1fr); gap:36px; }
  .bk-objects{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .bk-objects li:not(:nth-child(3n+1)){ padding-left:0; border-left:0; }
  .bk-objects li:nth-child(2n){ padding-left:16px; border-left:1px solid var(--line); }
  .bk-status li{ grid-template-columns:28px minmax(0,1fr); }
  .bk-status span:not(.i), .bk-status code{ grid-column:2; }
  .bk-tok{ display:none; }
  .bk-seal-files{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; }
  .bk-voice td:first-child{ white-space:normal; }
  .bk-files td:first-child{ white-space:normal; }
}