/* The page around the brand book's tools: base, the top bar with its lockup, and the footer. Shared by the social post maker and the icon library. */
*{box-sizing:border-box}
html{background:var(--sg-ground)}
body{margin:0;background:var(--sg-ground);color:var(--ink);font:14px/1.5 Sora,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
.top{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:18px;min-height:72px;padding:0 28px 0 24px;background:var(--sg-ground);border-bottom:1px solid var(--sg-rule)}
/* the lockup: the glyph and wordmark, the divider, then Brand book set like a business name */
.top .lk{display:inline-flex;color:var(--ink);line-height:0}
.top .lk svg{height:36px;width:auto}
.top .lk:focus-visible{outline:2px solid var(--sg-accent);outline-offset:4px}
.top span{font-size:12px;color:var(--dim);padding-left:18px;border-left:1px solid var(--sg-rule)}
/* footer: the lockup, the way back into the book and the small print, as in the book */
.colophon{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:20px 40px;padding:36px 32px 48px;font-size:12px;color:var(--faint)}
.colophon .lk{display:inline-flex;line-height:0;color:var(--ink);opacity:.85;transition:opacity .2s}
.colophon .lk:hover{opacity:1}
.colophon .lk svg{height:30px;width:auto}
.colophon .lk:focus-visible{outline:2px solid var(--sg-accent);outline-offset:4px}
.colophon nav{display:flex;flex-wrap:wrap;gap:0 6px}
.colophon nav .btn.t{--h:36px;color:var(--dim);font-size:13px}
.colophon nav .btn.t:hover{color:var(--ink)}
.colophon .fine{display:flex;flex-direction:column;gap:4px;margin:0;text-align:right}
.colophon .mono{font-size:11px;font-variant-numeric:tabular-nums}
.colophon .fine a{color:var(--dim)}
.colophon .fine a:hover{color:var(--ink)}
[hidden]{display:none !important}
/* for screen readers only: announcements and the file input */
.vh{position:absolute !important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;opacity:0;pointer-events:none}
@media (max-width:900px){
  .top{padding:12px 16px}
  .top span{display:none}
  .top .lk svg{height:32px}
  .colophon{grid-template-columns:minmax(0,1fr);gap:18px;padding:28px 16px 40px}
  .colophon nav{margin-left:-6px}
  .colophon .fine{text-align:left}
}