/* Peak Beak — /brand/ (loaded after site.css) */
.brand-hero{padding-bottom:48px}
.brand-hero .cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.brand-toc{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.brand-toc a{font-family:var(--mono);font-size:12px;letter-spacing:.06em;padding:7px 12px;border:1px solid var(--line-2);border-radius:999px;color:var(--ink);text-decoration:none;background:#fff}
.brand-toc a:hover{border-color:var(--ink)}

.bsec{padding:72px 0;border-top:1px solid var(--line)}
.bsec:nth-of-type(even){background:var(--cream)}
.bsec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:32px}
.bsec-head .bk-kicker{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:10px}
.bsec-head h2{font-family:var(--disp);font-size:clamp(1.8rem,3.6vw,2.6rem);line-height:1.08;letter-spacing:-0.03em;margin:0}
.bsec-head p{color:var(--muted);max-width:52ch;margin:10px 0 0;line-height:1.6}

/* logos */
.logo-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.logo-card{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:#fff;display:flex;flex-direction:column}
.logo-card .stage{display:flex;align-items:center;justify-content:center;padding:48px 32px;min-height:220px;background:#fff}
.logo-card .stage.ink{background:var(--ink)}
.logo-card .stage.cream{background:var(--cream)}
.logo-card .stage img{max-width:100%;height:auto;display:block}
.logo-card .meta{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 18px;border-top:1px solid var(--line);flex-wrap:wrap}
.logo-card .meta b{font-family:var(--disp);font-size:15px}
.logo-card .meta span{display:block;font-size:13px;color:var(--muted)}
.bk-dl{display:flex;gap:6px}
.bk-dl a{font-family:var(--mono);font-size:12px;font-weight:700;padding:7px 11px;border-radius:8px;border:1px solid var(--line-2);color:var(--ink);text-decoration:none;background:#fff}
.bk-dl a:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.logo-card.wide{grid-column:1/-1}

/* rules */
.bk-rules{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.bk-rule{border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;padding:24px}
.bk-rule h3{font-family:var(--disp);font-size:1.15rem;margin:0 0 6px}
.bk-rule p{color:var(--muted);font-size:14.5px;line-height:1.6;margin:0 0 18px}
.clearspace{position:relative;display:inline-block;padding:22px;border:1.5px dashed #E26A3B;border-radius:6px;background:repeating-linear-gradient(45deg,rgba(226,106,59,.06) 0 8px,transparent 8px 16px)}
.clearspace img{display:block;width:300px;max-width:100%;height:auto;background:#fff;outline:1px solid rgba(14,17,29,.08)}
.clearspace .x{position:absolute;font-family:var(--mono);font-size:11px;color:#B8431B;font-weight:700}
.minsize{display:flex;align-items:flex-end;gap:28px;flex-wrap:wrap}
.minsize figure{margin:0;text-align:center}
.minsize figcaption{font-family:var(--mono);font-size:11.5px;color:var(--muted);margin-top:8px;white-space:nowrap}

.donts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.dont{border:1px solid var(--line);border-radius:var(--r);background:#fff;overflow:hidden}
.dont .stage{height:130px;display:flex;align-items:center;justify-content:center;background:#fff;overflow:hidden}
.dont .stage.ink{background:var(--ink)}
.dont .stage img{height:84px;width:auto}
.dont p{margin:0;padding:10px 12px;font-size:13px;color:var(--ink);display:flex;gap:8px;align-items:flex-start;border-top:1px solid var(--line);line-height:1.4}
.dont svg{flex:none;margin-top:1px}

/* colors */
.swatches{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.swatch{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:#fff;text-align:left;padding:0;font:inherit;color:inherit;cursor:pointer;display:flex;flex-direction:column}
.swatch:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.swatch .bk-chip{height:120px;display:flex;align-items:flex-end;justify-content:flex-end;padding:10px;font-family:var(--mono);font-size:11px;font-weight:700}
.swatch .bk-info{padding:14px 16px;display:block}
.swatch .bk-name,.swatch .hex,.swatch .rgb,.swatch .bk-use{display:block}
.swatch .bk-name{font-family:var(--disp);font-weight:700;font-size:1.02rem}
.swatch .hex{font-family:var(--mono);font-size:13px;margin-top:4px}
.swatch .rgb{font-family:var(--mono);font-size:11.5px;color:var(--muted)}
.swatch .bk-use{font-size:13px;color:var(--muted);margin-top:8px;line-height:1.45}
.swatch.bk-primary .bk-chip{height:170px}
.swatches.bk-primary{grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:16px}
.copied{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(20px);background:var(--ink);color:#fff;padding:10px 16px;border-radius:999px;font-size:14px;font-weight:600;opacity:0;transition:.2s;pointer-events:none;z-index:1000}
.copied.show{opacity:1;transform:translateX(-50%)}
.contrast{margin-top:22px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.contrast div{border-radius:var(--r);padding:14px 16px;font-weight:600;display:flex;justify-content:space-between;gap:10px;align-items:center;font-size:15px}
.contrast small{font-family:var(--mono);font-size:11px;font-weight:700;opacity:.85}

/* type */
.type-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.type-card{border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;padding:26px}
.type-card .bk-role{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-ink)}
.type-card .sample{margin:14px 0 10px;line-height:1.05;color:var(--ink)}
.type-card .specs{font-size:13.5px;color:var(--muted);line-height:1.6}
.type-card .specs b{color:var(--ink)}

/* voice */
.voice{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.voice div{border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;padding:22px}
.voice h3{font-family:var(--disp);font-size:1.1rem;margin:0 0 8px}
.voice p{color:var(--muted);font-size:14.5px;line-height:1.6;margin:0}
.say{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:20px}
.say div{border-radius:var(--r-lg);padding:20px 22px;font-size:15px;line-height:1.6}
.say .bk-yes{background:rgba(14,159,87,.08);border:1px solid rgba(14,159,87,.25)}
.say .bk-no{background:rgba(180,35,24,.05);border:1px solid rgba(180,35,24,.2)}
.say b{display:block;font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;margin-bottom:6px}
.say .bk-yes b{color:#0B7A43}.say .bk-no b{color:#B42318}

/* in use */
.inuse{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}
.inuse a{display:block;border-radius:var(--r);overflow:hidden;background:#fff;border:1px solid var(--line)}
.inuse img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover}

@media (max-width:900px){
  .swatches,.swatches.bk-primary{grid-template-columns:repeat(2,minmax(0,1fr))}
  .donts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .inuse{grid-template-columns:repeat(3,minmax(0,1fr))}
  .voice{grid-template-columns:1fr}
}
@media (max-width:700px){
  .logo-grid,.bk-rules,.type-grid,.say,.contrast{grid-template-columns:1fr}
  .logo-card .stage{padding:32px 20px;min-height:170px}
  .bsec{padding:56px 0}
}
