/* header.css: the header is the same on every page of well. the logo height,
 * the title beside it and the page title below it come from here and nowhere
 * else; page and shell rules for these are overridden on purpose.
 *
 * It also carries the liquid glass layer in (wellglass.css). This sheet is the
 * last one on every page, so an import here is the one place that puts the
 * glass after every shell and page rule without a page needing to know. */
@import url('/css/wellglass.css?v=1');
:root { --logo-h: clamp(52px, 5.34vw, 64px); --head-title: 22px; --page-title: 28px; }
@media (max-width: 900px) { :root { --page-title: 24px; } }
/* on a phone the mark grows with the screen instead of sitting small in the bar:
   46px at 320, 54px at 390, 57px by 430 — wide enough to read, narrow enough to
   leave room for the log in button */
@media (max-width: 600px) { :root { --logo-h: clamp(46px, 13.8vw, 57px); --head-title: 19px; --page-title: 22px; } }
.topbar .logo, .topbar img.logo, header .logo, .logo.brand { height: var(--logo-h) !important; width: auto !important; max-height: none !important; transform: none !important; flex: 0 0 auto !important; }
/* the link around the mark must not shrink either, or a crowded bar squeezes it */
.topbar > a:first-child, header > a:first-child, .topbar-left { flex: 0 0 auto; min-width: 0; }
.topbar-title { font-size: var(--head-title) !important; font-weight: normal !important; color: var(--text, #1a1a1a) !important; letter-spacing: 0 !important; }
.page-title, h1.title, .content > h1.title { font-size: var(--page-title) !important; font-weight: normal !important; line-height: 1.15 !important; }
.footer-logo { height: 56px !important; width: auto !important; }

/* Keep the private lockup and account controls visible when an admin title
   is long. Only the title yields space; the artwork retains its proportions. */
.topbar[data-well-brand="private"] { gap: 16px; }
.topbar[data-well-brand="private"] .topbar-left { flex: 1 1 auto; min-width: 0; }
.topbar[data-well-brand="private"] .topbar-left > a { flex: 0 0 auto; }
.topbar[data-well-brand="private"] .topbar-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar[data-well-brand="private"] .topbar-right { flex: 0 0 auto; white-space: nowrap; }