/* The wordmark — the one canonical definition.
 *
 * `templates/components/wordmark.html` is shared by the marketing
 * header, the early-access page, the marketing footer and the auth art
 * panel. Its sizing and its tail overhang lived in `assets/css/app.css`
 * alone, and **none of those four surfaces loads app.css** — so the
 * element fell back to its `width="530"` attribute and rendered at
 * 414×188 on the marketing home and 530×240 on early access, where it
 * also pushed the page into horizontal overflow at 375px. Both
 * stylesheets still carried rules for `.site-header__wordmark` and
 * `.launch__wordmark`, class names the component stopped emitting.
 *
 * So this file exists to be linked, not copied. A surface that renders
 * the component links this; nothing re-derives the numbers.
 *
 * ── The overhang, which is the composition and not decoration ──
 *
 * The bookmark tail descending from the `g` is meant to cross the
 * header's bottom rule and hang below it, with the rule passing behind
 * the mark rather than clipping it. The element therefore claims only
 * its cap band; the transparent padding above and the tail below are
 * pulled out of flow with negative offsets, and every ancestor keeps
 * `overflow: visible`. A header with `overflow: hidden` silently eats
 * the tail and the treatment degrades into "a small logo" — which is
 * the most likely way this breaks and the reason the rule below is not
 * scoped to one surface.
 *
 * The three constants are measured off wordmark-v2 rather than
 * eyeballed: the word is 57.1% of the canvas from cap-top to baseline,
 * 4.2% of transparent padding sits above it, and 36.3% of tail hangs
 * below the baseline. If a tight-cropped export ever lands, recompute
 * them; do not port these.
 */

/* The selector carries `img` — and `.mkt img` — on purpose.
 * `marketing.css` sets `.mkt img { max-width: 100%; height: auto }` at
 * specificity (0,1,1), which outranks a bare `.dg-masthead` (0,1,0)
 * whatever order the files load in. With both dimensions `auto` inside
 * an inline-flex anchor the mark computes to 0x0 and disappears
 * entirely — measured, not theorised, and the same trap that file's
 * own comment records having fallen into once already.
 */
img.dg-masthead,
.mkt img.dg-masthead {
  /* The one knob: the cap height the word reads at. Responsive by
     default so no caller has to write a media query, and so a surface
     that forgets to size it gets something sane rather than 530px.
     Width follows from the aspect ratio, so the mark can never
     distort. */
  --dg-cap: clamp(30px, 2.2vw + 12px, 34px);

  --dg-h: calc(var(--dg-cap) / 0.571);
  height: var(--dg-h);
  width: auto;
  /* Belt and braces against the intrinsic-width fallback that caused
     this: even with no height applied, the mark can never exceed its
     container or overflow the page. */
  max-width: 100%;
  display: block;
  flex: none;

  /* Claim the cap band only — the padding above and the tail below sit
     outside the flow, which is what lets the rule pass behind them. */
  margin-bottom: calc(var(--dg-h) * -0.583);
  position: relative;
  top: calc(var(--dg-h) * -0.117);
  z-index: 1;
}

/* Nothing between the image and the page may clip the tail. */
.dg-header,
.dg-header *,
.site-header,
.site-header__bar,
.site-header__brand,
.launch__copy {
  overflow: visible;
}

/* The anchor's box is the cap band, which is under 44px. Grow the
   target, never the image. */
.dg-masthead-link,
.site-header__brand {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  /* A flex child with a long intrinsic width will not shrink without
     this, which is how a wordmark squeezes the nav and CTA off-screen. */
  min-width: 0;
}

/* Early access is a full-page splash rather than a bar, so the mark is
   the masthead there and reads larger — the same treatment, one scale
   up. Its own page has no rule for the tail to cross, so it is plain. */
img.dg-masthead--launch,
.mkt img.dg-masthead--launch {
  --dg-cap: clamp(22px, 2.6vw + 14px, 34px);
}

/* Plain placement: no edge to emerge from, so no overhang. The element
   claims its full height and the tail simply occupies it. */
img.dg-masthead--plain,
.mkt img.dg-masthead--plain {
  margin-bottom: 0;
  top: 0;
}