/* The wordmark in the header becomes the logo.
 *
 * A patch stylesheet, added rather than edited into an existing one, because
 * *.js and *.css here are served max-age=604800 and rewriting a file in place
 * strands every returning visitor on the old copy. Same convention as
 * cta-lock.v1.css and the rest of the chain in index.html.
 *
 * The <a> is addressed by its aria-label, NOT by its classes: the classes are
 * Tailwind hashes emitted by a build that no longer has source here, and a
 * label is content. It is the one attribute on that element that describes
 * what it IS rather than what it looks like.
 *
 * Nothing here hides the wordmark on its own. .has-logo is added by
 * brand.v1.js only after the image has actually loaded, so a missing or
 * broken file leaves the typeset name exactly as it is today. */
/* The header is h-16 (64px), so 46px is about as tall as this can go and still
   have air above and below it. At the current file's 736x222 that is ~152px
   wide, against the ~100px the first 30px cut gave. */
/* v9 (2026-09-24): the artwork is now the bare "agoras" wordmark
   (agoras-fulltext-trim.png, 4.03:1, no margins, lowercase with a "g"
   descender). The old 40px box was cut for a lockup that carried its own
   air; on a marginless wordmark it made the letters twice the nav size. 27px
   puts the x-height (~2/3 of the file) at ~18px, level with the 17-19px nav
   wordmark it replaces, ~109px wide. The 4px nudge centres the x-height band
   on the nav line instead of the box (the descender otherwise pulls the
   visual centre up). */
header a[aria-label="Agoras home"] .jp-logo {
  display: block;
  height: 24px;
  width: auto;
  max-width: 190px;
  object-fit: contain;
  transform: translateY(3px);
}
header a[aria-label="Agoras home"].has-logo > span { display: none; }
@media (max-width: 640px) {
  header a[aria-label="Agoras home"] .jp-logo { height: 19px; max-width: 150px; transform: translateY(2px); }
}

/* v10 (2026-09-24): the wordmark moves in towards the nav. The container is
   px-12 (48px) with gap-3, and the nav carries ml-9 (36px), which left ~48px
   of air between the wordmark and "Features". The anchor now takes 32px of
   that as margin and the nav gives 32px of its own back, so the nav stays
   exactly where it was and the wordmark sits 16px from it. Desktop only:
   below lg the nav is hidden and the wordmark keeps the page edge. */
@media (min-width: 1024px) {
  header a[aria-label="Agoras home"].has-logo { margin-left: 32px; }
  header a[aria-label="Agoras home"].has-logo + nav { margin-left: 4px; }
}

/* v11 (2026-09-24): 27px -> 24px, the operator found it a touch large beside
   the nav. And the hairline under the bar is now always there: the bundle
   sets border-transparent at rest and border-line (rgba(224,226,230,.91))
   only past scrollY > 8; the operator wants the line at rest too. The blur
   and the tinted background still arrive on scroll as before. Specificity
   beats the Tailwind utility, no !important needed. */
header.sticky.top-0.border-b { border-bottom-color: rgba(224, 226, 230, 0.91); }

/* v12 (2026-09-24): the lockup. brand.v9.js puts the alpha tile (.jp-mark)
   before the "goras" wordmark (.jp-logo, kept at 23px so the letters match
   the previous full wordmark); the anchor's own flex gap (gap-2.5, 10px)
   spaces them. The tile is 26px, centred on the nav line by the anchor;
   the wordmark keeps its 3px nudge so its x-height sits on the tile's
   alpha. Phones: 22px tile, 18px wordmark. */
header a[aria-label="Agoras home"] .jp-mark {
  display: block;
  width: 26px;
  height: 26px;
  object-fit: contain;
}
header a[aria-label="Agoras home"] .jp-logo { height: 23px; }
@media (max-width: 640px) {
  header a[aria-label="Agoras home"] .jp-mark { width: 22px; height: 22px; }
  header a[aria-label="Agoras home"] .jp-logo { height: 18px; }
}

/* v13 (2026-09-24): phones. The lockup is ~17px wider than the bare wordmark
   was, which made "Sign in" wrap onto two lines at 390px. A tighter pair on
   small screens (20px tile, 17px wordmark, 7px gap) and no wrapping in the
   right-hand group. */
@media (max-width: 640px) {
  header a[aria-label="Agoras home"] { gap: 7px; }
  header a[aria-label="Agoras home"] .jp-mark { width: 20px; height: 20px; }
  header a[aria-label="Agoras home"] .jp-logo { height: 17px; }
  header .ml-auto a { white-space: nowrap; }
}