/* 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). */
/* THE HEADER DECLARES ITS OWN HEIGHT, ONCE (Sid, 2026-08-16). It is position:fixed with z-index:20,
   so it is out of flow and cannot push anything: any surface that wants to sit BELOW it has to
   reserve the space itself, and until now each one guessed. The homepage guessed 48 against a header
   that renders 74, and painted the wordmark straight through the send card at every width from 481
   to 720 — measured, a constant 26px overlap.
   So the height is derived here from the same two values that PRODUCE it, and both are now used by
   the rules below rather than repeated as literals. Change the padding or the wordmark's size and
   the reservation follows on its own; that is the difference between this and a number that happens
   to be big enough today. Consumers read --topbar-h and never a literal. */
:root{
  --topbar-pad:22px;                 /* the bar's own vertical padding, top and bottom */
  --topbar-mark:30px;                /* .sb-tbwm font-size at line-height 1 — the bar's tallest ink */
  --topbar-h:calc(max(var(--topbar-pad), env(safe-area-inset-top)) + var(--topbar-mark) + var(--topbar-pad));
}
.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:var(--topbar-pad) clamp(16px,3vw,40px);
  padding-top:max(var(--topbar-pad), 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:var(--topbar-mark); line-height:1; /* holds the emit mark (wordmark.css) */
  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:#E46F40 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); }