:root { --hub-backdrop: radial-gradient(ellipse at 50% -10%, #1b1812 0%, #0b0b0d 55%, var(--bg) 100%) fixed; }
/* Public site masthead; the static pages and the React client use the same markup. */
.public-mast { position:relative; z-index:12; flex:none; background:var(--ink); color:var(--text); border-bottom:1px solid var(--bone-glow); }
.public-mast .mast-inner { box-sizing:border-box; max-width:1200px; min-height:60px; padding:0 28px; margin:auto; display:flex; align-items:center; gap:40px; }
.public-mast a { color:inherit; text-decoration:none; }
.mast-brand { display:inline-flex; align-items:center; gap:9px; flex:none; font:700 24px/1 var(--display); letter-spacing:.035em; }
.mast-brand img { width:29px; height:29px; }
.mast-links { display:flex; gap:28px; align-self:stretch; }
.mast-links a,.mast-action,.mast-menu { font:400 15px/1.3 var(--serif); }
.public-mast .mast-links a { display:flex; align-items:center; position:relative; color:var(--muted); }
.public-mast .mast-links a[aria-current],.public-mast .mast-links a:hover { color:var(--text-strong); }
.mast-links a[aria-current]::after { content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--bone); }
.mast-end { margin-inline-start:auto; display:flex; align-items:center; gap:18px; }
.public-mast .mast-action { display:none; align-items:center; justify-content:center; min-height:38px; padding:0 14px; box-sizing:border-box; border:1px solid var(--bone-soft); color:var(--bone); border-radius:4px; white-space:nowrap; background:transparent; cursor:pointer; }
.public-mast .mast-action:hover { border-color:var(--bone); background:var(--bone-glow); }
.mast-menu { position:relative; display:none; }
.mast-menu summary { width:40px; height:40px; display:grid; place-items:center; cursor:pointer; list-style:none; border:1px solid var(--bone-soft); border-radius:4px; }
.mast-menu summary::-webkit-details-marker { display:none; }
.mast-menu summary span { width:16px; height:9px; border-block:1.5px solid currentColor; }
.mast-menu nav { position:absolute; right:0; top:calc(100% + 8px); min-width:190px; display:grid; padding:6px; background:var(--panel-2); border:1px solid var(--bone-soft); border-radius:5px; box-shadow:0 12px 30px #0008; }
.mast-menu nav a { padding:12px; }
.public-mast :focus-visible { outline:2px solid var(--bone); outline-offset:2px; }
@media(max-width:700px){
  .public-mast .mast-inner { min-height:58px; gap:8px; padding:0 14px; }
  .mast-brand { font-size:21px; gap:4px; } .mast-brand img { width:24px; height:24px; }
  .mast-links { display:none; } .mast-menu { display:block; } .mast-end { gap:7px; }
  .public-mast .mast-action { display:inline-flex; min-height:40px; padding:0 10px; font-size:13px; }
}
@media(max-width:360px){
  .public-mast .mast-inner { padding-inline:8px; gap:4px; }
  .mast-brand { font-size:18px; gap:2px; }
  .mast-end { gap:4px; }
  .public-mast .mast-action { padding-inline:7px; font-size:12px; }
}

.public-mast .mast-action[aria-current], .mast-menu nav [aria-current] { background:var(--bone-glow); color:var(--text-strong); }

.mast-context { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted); font:600 17px var(--display); }
.public-mast .hub-user { min-height:38px; }
@media(max-width:1000px){ .mast-context { display:none; } }

.public-mast .hub-user-icon { display:none; }
@media(max-width:700px){
  .public-mast .hub-user { width:36px; height:40px; padding:8px; justify-content:center; }
  .public-mast .hub-user-name, .public-mast .hub-user-caret { display:none; }
  .public-mast .hub-user-icon { display:inline-flex; width:20px; height:20px; }
}
@media(max-width:480px){ .mast-brand span { display:none; } .mast-brand { gap:0; } }