/* ===== AStudio — brand guidelines page (reuses tokens from styles.css) ===== */
.bnav{position:fixed;top:0;left:0;right:0;z-index:100}
.bnav__inner{display:flex;align-items:center;gap:16px;width:calc(100% - 32px);max-width:var(--maxw);margin:14px auto;padding:10px 18px;border:1px solid var(--border);background:rgba(11,13,20,.72);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-radius:999px}
.bnav .brand{margin-right:auto}

.bhero{padding:150px 0 60px;text-align:center}
.bhero .logo-lockup{display:inline-flex;align-items:center;gap:18px;margin-bottom:34px}
.bhero .logo-lockup .mark{width:84px;height:84px}
.bhero .logo-lockup .word{font-family:var(--font-head);font-weight:700;font-size:clamp(40px,7vw,68px);letter-spacing:-.03em}
.bhero .logo-lockup .word i{font-style:normal;color:var(--cyan)}
.bhero p{color:var(--muted);max-width:560px;margin:0 auto;font-size:18px}
.bpill{display:inline-block;margin-bottom:26px;padding:7px 16px;border:1px solid var(--border-strong);border-radius:999px;background:var(--surface);font-family:var(--font-head);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--cyan)}

.bsection{padding:64px 0;border-top:1px solid var(--border)}
.bsection__head{margin-bottom:36px;max-width:680px}
.bsection__head h2{font-size:clamp(24px,3.4vw,34px)}
.bsection__head p{color:var(--muted);margin-top:12px}
.bnum{font-family:var(--font-head);color:var(--cyan);font-size:13px;letter-spacing:.2em;font-weight:600;display:block;margin-bottom:10px}

/* logo system */
.logo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.logo-box{border:1px solid var(--border);border-radius:var(--radius);padding:34px;display:grid;place-items:center;min-height:170px;position:relative}
.logo-box .cap{position:absolute;bottom:12px;left:16px;font-size:12px;color:var(--muted-2);font-family:var(--font-head)}
.logo-box.on-light{background:#f2f5fb}
.logo-box.on-dark{background:var(--bg-2)}
.logo-box.on-grad{background:linear-gradient(135deg,var(--cyan),var(--violet))}
.logo-box .mark{width:64px;height:64px}
.logo-box .lock{display:flex;align-items:center;gap:14px}
.logo-box .lock .word{font-family:var(--font-head);font-weight:700;font-size:26px;letter-spacing:-.02em}
.logo-box .lock .word i{font-style:normal;color:var(--cyan)}
.logo-box.on-light .lock .word{color:#08101e}
.logo-box.on-grad .lock .word{color:#08101e}
.logo-box.on-grad .lock .word i{color:#0b2a33}

/* clear space + misuse */
.clearspace{display:grid;place-items:center;border:1px dashed var(--border-strong);border-radius:var(--radius);padding:30px;background:var(--surface)}
.clearspace .frame{position:relative;padding:28px;outline:1px dashed rgba(56,225,255,.4)}
.clearspace .mark{width:72px;height:72px;display:block}
.dos{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px}
.do,.dont{border:1px solid var(--border);border-radius:var(--radius);padding:20px}
.do b,.dont b{font-family:var(--font-head);font-size:13px;letter-spacing:.04em}
.do b{color:#3ddc84}.dont b{color:#f87171}
.do ul,.dont ul{margin-top:10px;display:grid;gap:8px}
.do li,.dont li{color:var(--muted);font-size:14px;padding-left:18px;position:relative}
.do li::before{content:"✓";position:absolute;left:0;color:#3ddc84}
.dont li::before{content:"✕";position:absolute;left:0;color:#f87171}

/* colors */
.swatches{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.swatch{border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:var(--surface)}
.swatch .chip{height:96px}
.swatch .meta{padding:14px 16px}
.swatch .meta b{font-family:var(--font-head);font-size:14px;display:block}
.swatch .meta span{color:var(--muted-2);font-size:12.5px;display:block;margin-top:3px}
.swatch .meta .hex{color:var(--muted);font-family:var(--font-head);font-size:12.5px;text-transform:uppercase;letter-spacing:.06em;margin-top:6px}
.grad-bar{height:96px;border-radius:var(--radius);background:linear-gradient(135deg,var(--cyan),var(--blue) 50%,var(--violet));border:1px solid var(--border);display:flex;align-items:flex-end;padding:14px;font-family:var(--font-head);font-size:13px;color:#08101e;font-weight:600}

/* typography */
.type-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.type-card{border:1px solid var(--border);border-radius:var(--radius);padding:28px;background:var(--surface)}
.type-card .lbl{font-size:12px;color:var(--cyan);font-family:var(--font-head);letter-spacing:.16em;text-transform:uppercase}
.type-card .big{font-size:60px;line-height:1;margin:14px 0 8px;letter-spacing:-.02em}
.type-card .name{font-family:var(--font-head);font-weight:600;font-size:18px}
.type-card .use{color:var(--muted);font-size:13.5px;margin-top:4px}
.type-card .weights{display:flex;gap:14px;flex-wrap:wrap;margin-top:16px;color:var(--muted)}
.specimen{border:1px solid var(--border);border-radius:var(--radius);padding:28px;margin-top:18px;display:grid;gap:14px}
.specimen .s1{font-family:var(--font-head);font-weight:700;font-size:34px;letter-spacing:-.02em}
.specimen .s2{font-family:var(--font-head);font-weight:600;font-size:22px}
.specimen .s3{color:var(--muted);max-width:62ch}
.specimen .s4{font-family:var(--font-head);font-size:12px;text-transform:uppercase;letter-spacing:.18em;color:var(--cyan)}

/* voice */
.voice{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:22px}
.voice div{border:1px solid var(--border);border-radius:var(--radius);padding:20px;background:var(--surface)}
.voice b{font-family:var(--font-head);font-size:15px}
.voice p{color:var(--muted);font-size:13.5px;margin-top:6px}

/* applications */
.apps{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.app{border:1px solid var(--border);border-radius:var(--radius);padding:24px;background:var(--surface);min-height:200px;display:flex;flex-direction:column;justify-content:center}
.app .alabel{position:relative}
.app .alabel span{font-size:12px;color:var(--muted-2);font-family:var(--font-head)}
.bizcard{width:100%;max-width:360px;aspect-ratio:1.75/1;border-radius:14px;padding:22px;display:flex;flex-direction:column;justify-content:space-between;background:linear-gradient(150deg,#0f121b,#07080c);border:1px solid var(--border-strong);margin:0 auto}
.bizcard .top{display:flex;align-items:center;gap:12px}
.bizcard .mark{width:40px;height:40px}
.bizcard .top b{font-family:var(--font-head);font-size:20px;letter-spacing:-.02em}
.bizcard .top b i{font-style:normal;color:var(--cyan)}
.bizcard .bottom{font-size:12.5px;color:var(--muted);line-height:1.7}
.bizcard .bottom .role{color:var(--text);font-family:var(--font-head);font-size:13px}
.iconset{display:flex;gap:16px;align-items:center;justify-content:center;flex-wrap:wrap}
.appicon{width:84px;height:84px;border-radius:20px;display:grid;place-items:center;box-shadow:0 14px 34px rgba(0,0,0,.5)}
.appicon .mark{width:84px;height:84px}
.avatar{width:84px;height:84px;border-radius:50%;overflow:hidden;border:1px solid var(--border-strong);display:grid;place-items:center;background:var(--bg-2)}
.avatar .mark{width:84px;height:84px;border-radius:50%}
.fav{width:32px;height:32px}
.social-banner{grid-column:1/-1}
.social-banner img{width:100%;border-radius:var(--radius);border:1px solid var(--border)}

.bfoot{border-top:1px solid var(--border);padding:30px 0;color:var(--muted-2);font-size:13px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.bfoot a{color:var(--muted)}.bfoot a:hover{color:var(--cyan)}

@media (max-width:900px){
  .logo-grid,.swatches,.voice{grid-template-columns:repeat(2,1fr)}
  .type-grid,.dos,.apps{grid-template-columns:1fr}
  .type-card .big{font-size:46px}
}
@media (max-width:560px){
  .bnav__inner{width:calc(100% - 24px);margin-top:12px;padding:8px 12px}
  .swatches{grid-template-columns:1fr 1fr}
  .bnav__links{display:none}
  .bhero{padding:126px 0 48px}
  .bhero .logo-lockup{gap:12px;margin-bottom:24px}
  .bhero .logo-lockup .mark{width:64px;height:64px}
  .bhero p{font-size:16px}
  .bsection{padding:52px 0}
  .logo-grid,.voice{grid-template-columns:1fr}
  .logo-box{min-height:156px;padding:28px 22px}
  .type-card,.specimen{padding:22px}
  .type-card .big{font-size:42px}
  .specimen .s1{font-size:29px}
  .app{padding:20px 16px}
}