/* Brand guide page only (/brand/). Loaded by that page alone, so nothing here can move the rest of the site.
   Proposed tokens are named here first; if they're adopted they move into site.css :root. */
.bguide{--navy:#0F0546;--r-card:14px;--r-btn:0;--gap:clamp(56px,8vw,96px)}
.bguide .section{border-top:0;padding:var(--gap) 0 0}
.bguide .section:last-of-type{padding-bottom:var(--gap)}
.bguide .kick{display:flex;gap:14px;align-items:baseline;margin-bottom:10px}
.bguide .kick .n{color:var(--purple)}
.bguide h2{max-width:22ch}
.bguide .intro{max-width:640px;color:var(--ink-2)}
.bguide .grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));margin-top:32px}
.bguide .grid.two{grid-template-columns:repeat(auto-fit,minmax(340px,1fr))}
/* the card: rounded, raised on --soft, no border, no rule */
.bguide .bcard{background:var(--soft);border-radius:var(--r-card);padding:28px;display:flex;flex-direction:column;gap:10px}
.bguide .bcard.paper{background:var(--paper);box-shadow:0 0 0 1px var(--line) inset}
.bguide .bcard.navy{background:var(--navy);color:#fff}
.bguide .bcard h3{margin:0}
.bguide .bcard p{margin:0;font-size:16px;color:var(--dim)}
.bguide .bcard.navy p{color:#c9c3dc}
.bguide .stagebox{display:flex;align-items:center;justify-content:center;min-height:180px;padding:12px}
.bguide .stagebox img{display:block;width:100%;height:auto}
.bguide .stagebox.mark img{width:96px}
.bguide .stagebox.hero-logo{min-height:300px;padding:40px}
.bguide .stagebox.hero-logo img{max-width:760px}
.bguide .stagebox.small{gap:28px}
.bguide .stagebox.small img{width:auto;max-width:200px}
.bguide .stagebox.small img+img{width:40px}
.bguide .dl{display:flex;flex-wrap:wrap;gap:8px 16px;font-size:14px}
.bguide .dl a{color:var(--purple);text-decoration:none;font-weight:600}
.bguide .dl a:hover{color:var(--purple-d)}
.bguide ul.rules{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.bguide ul.rules li{display:grid;grid-template-columns:28px 1fr;gap:4px;font-size:17px}
.bguide ul.rules li::before{content:"";width:10px;height:10px;margin-top:9px;background:var(--purple-2)}
.bguide ul.rules.no li::before{background:transparent;box-shadow:0 0 0 1.5px var(--dim) inset}
/* colour */
.bguide .sw{border-radius:var(--r-card);overflow:hidden;background:var(--paper);box-shadow:0 0 0 1px var(--line) inset;display:flex;flex-direction:column}
.bguide .sw .chip{height:120px}
.bguide .sw .meta{padding:16px 18px 18px;display:flex;flex-direction:column;gap:4px}
.bguide .sw .meta b{font-family:var(--head);font-size:18px;letter-spacing:-.02em}
.bguide .sw .meta .mono{color:var(--dim)}
.bguide .sw .meta p{margin:4px 0 0;font-size:15px;color:var(--dim);line-height:1.5}
.bguide .greys{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px;margin-top:20px}
.bguide .greys .sw .chip{height:64px}
/* type */
.bguide .spec{display:grid;grid-template-columns:minmax(150px,220px) 1fr;gap:8px 32px;align-items:baseline;padding:22px 0}
.bguide .spec+.spec{padding-top:6px}
.bguide .spec .mono{color:var(--dim)}
.bguide .spec .s-head{font-family:var(--head);font-weight:800;letter-spacing:-.035em;font-size:clamp(34px,4.4vw,56px);line-height:1.05}
.bguide .spec .s-body{font-size:19px;max-width:60ch}
.bguide .spec .s-mono{font-family:var(--mono);font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-weight:500}
/* shape */
.bguide .btnrow{display:flex;flex-wrap:wrap;gap:16px;align-items:center}
.bguide .b-btn{display:inline-flex;align-items:center;padding:14px 22px;background:var(--purple);color:#fff;font-weight:650;font-size:16px;border-radius:var(--r-btn);text-decoration:none}
.bguide .b-btn.ghostb{background:#fff;color:var(--ink);box-shadow:0 0 0 1px #d9d2ee inset}
.bguide .b-btn.ghostb:hover{color:var(--purple);background:#fff;box-shadow:0 0 0 1px var(--purple) inset}
.bguide .b-btn:hover{color:#fff;background:var(--purple-d)}
.bguide .stack{display:grid;gap:14px}
.bguide .stack .row{background:var(--paper);border-radius:10px;padding:14px 16px;font-size:16px}
/* drawings */
.bguide .iso-panel{background:var(--soft);border-radius:var(--r-card);padding:28px}
.bguide .iso-top{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:22px}

.bguide .iso-split{display:grid;grid-template-columns:minmax(0,600px) minmax(0,1fr);gap:40px;align-items:start;margin-top:32px}
.bguide .legend{display:grid;gap:4px}
.bguide .legend .bcard{padding:14px 0}
.bguide .legend .bcard{background:transparent}
.bguide .legend .dash{width:44px;height:28px;box-shadow:none;background:#fff;border:1.5px dashed #8a5cf6;border-radius:2px}
.bguide .legend .solidsq{width:44px;height:28px;background:var(--purple-2);box-shadow:3px 3px 0 #5634c0}
.bguide .icons{display:flex;flex-wrap:wrap;gap:18px;margin-top:8px}
.bguide .icons svg{width:56px;height:56px}

@media (max-width:900px){.bguide .iso-split{grid-template-columns:1fr}}
@media (max-width:640px){.bguide .spec{grid-template-columns:1fr}.bguide .bcard,.bguide .iso-panel{padding:22px}}
/* the live mark */
.bguide .motion-head{margin-top:40px;max-width:640px}
.bguide .motion-head h3{margin:6px 0 8px}
.bguide .motion-head p{color:var(--ink-2);font-size:17px}
.bguide .grid.motion{margin-top:20px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.bguide .grid.motion .stagebox{min-height:150px}
.logo3d{display:flex;align-items:center;justify-content:center}
.logo3d img,.logo3d .logo3d-svg{display:block;width:100%;height:auto;overflow:visible}