/* ============================================================
   SITE HEADER — shared brand lockup
   Single source of truth for the FRS mark and wordmark.
   Linked by every page before its own <style> block.
   Do not redeclare .brand / .brand-mark / .brand-name / .n1 / .n2
   in a page stylesheet; change it here instead.
   ============================================================ */

.brand{display:flex;align-items:center;gap:12px;text-decoration:none;min-width:0}
.brand-mark{flex:0 0 auto;width:40px;height:40px;border-radius:50%;background:var(--ink);color:var(--paper);display:grid;place-items:center;font-family:var(--serif);font-weight:500;font-size:13px;letter-spacing:.04em;font-variation-settings:"opsz" 9}
.brand-name{display:flex;flex-direction:column;line-height:1.1;min-width:0}
.brand-name .n1{font-family:var(--serif);font-size:17px;font-weight:500;color:var(--ink);letter-spacing:-.01em;white-space:nowrap}
.brand-name .n2{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-top:3px;white-space:nowrap}

/* Matches the breakpoint where the nav collapses into the hamburger. */
@media(max-width:1040px){
  .brand{gap:10px}
  .brand-mark{width:34px;height:34px;font-size:11px}
  .brand-name .n1{font-size:13px}
  .brand-name .n2{font-size:9px;letter-spacing:.12em}
}

@media(max-width:480px){
  .brand{gap:8px}
  .brand-mark{width:30px;height:30px;font-size:10px}
  .brand-name .n1{font-size:11.5px;letter-spacing:-.005em}
  .brand-name .n2{font-size:8.5px;letter-spacing:.1em;margin-top:2px}
}