/* Acetate — ONE page-chrome component, shared by the homepage (splash) and /about so the corner
   wordmark is identical in position/size/style on both (no jump when navigating). Transparent over
   the wallpaper/hero; legibility comes from the text-shadow + the soft corner scrim, never a solid
   band. Left cluster = wordmark (+ optional tertiary link); right slot = optional quiet "sign in".
   Extracted from sendbox.css; pages may override position (about.css makes it absolute so it
   scrolls away with the hero). */
.sb-topbar{ position:fixed; top:0; left:0; right:0; z-index:20; display:flex; align-items:baseline;
  justify-content:space-between; gap:11px;
  padding:22px clamp(16px,3vw,40px); padding-top:max(22px, env(safe-area-inset-top)); pointer-events:none; }
.sb-topbar > *{ pointer-events:auto; }
/* soft dark corner scrim behind the left pair so the white wordmark + link stay legible over a bright
   top-left. Fades out diagonally so it never reads as a hard box. */
.sb-topbar::before{ content:""; position:absolute; top:0; left:0; width:480px; height:190px; z-index:-1;
  pointer-events:none; max-width:82vw;
  background:radial-gradient(150% 160% at 0% 0%, rgba(0,0,0,.52) 0%, rgba(0,0,0,.30) 32%, rgba(0,0,0,0) 72%); }
.sb-tbL{ display:flex; align-items:baseline; gap:11px; pointer-events:none; }
.sb-tbL > *{ pointer-events:auto; }
.sb-tbwm{ font-weight:200; font-size:30px; line-height:1; letter-spacing:.28em; padding-left:.28em;
  text-transform:uppercase; color:#fff; text-decoration:none; white-space:nowrap;
  text-shadow:0 1px 3px rgba(0,0,0,.55), 0 2px 18px rgba(0,0,0,.45); }
.sb-tbwm:hover{ color:#fff; }
.sb-toplink{ font:500 12px var(--ui); color:rgba(255,255,255,.72); text-decoration:none; white-space:nowrap;
  text-shadow:0 1px 3px rgba(0,0,0,.55), 0 1px 10px rgba(0,0,0,.4); }
.sb-toplink:hover{ color:#fff; }
/* quiet top-right sign in (matches the homepage card's sign-in treatment) */
.sb-tbsign{ font:500 12.5px var(--ui); color:rgba(255,255,255,.7); text-decoration:none; white-space:nowrap;
  text-shadow:0 1px 3px rgba(0,0,0,.5); }
.sb-tbsign:hover{ color:#fff; }
/* signed-in account avatar (topbar.js swaps it in for the "sign in" link when a session is present).
   Same right slot; vertically centred against the wordmark baseline row. Photo via background-image,
   else the initial as text. */
.sb-tbava{ width:30px; height:30px; border-radius:50%; flex:none; align-self:center; cursor:pointer;
  background:#3B74F0 center/cover no-repeat; color:#fff; text-decoration:none; text-align:center;
  font:600 13px/30px var(--ui); box-shadow:0 1px 3px rgba(0,0,0,.5); }
.sb-tbava:hover{ filter:brightness(1.08); }