/* mlsanity logo component: styles. Markup source: logo.py. Rules: LOGO_SPEC.md.
   Consumes the site tokens (design/tokens.css): --ink --rubric --faint --serif --s* --fs-* --motion-*. It defines no colour,
   type or spacing of its own. The fallbacks after each var() are the same token values, only for standalone use.
   Dark: the adopted --dark-* tokens in design/tokens.css (site-wide dark mode needs nothing here; .mls-dark forces it locally).
   Per-instance theming: set --mls-ink / --mls-chain / --mls-faint on any ancestor, or use .mls-dark / .mls-mono. */

.mls-mark{display:inline-block;flex:none;vertical-align:baseline;overflow:visible}
.mls-mark .mls-i{fill:var(--mls-ink,var(--ink,#1c1a16))}
.mls-mark .mls-c{stroke:var(--mls-chain,var(--rubric,#9b2215))}        /* the chain is exactly --rubric */
.mls-mark .mls-f{fill:var(--mls-faint,var(--faint,#a39a85))}
svg .mls-line{fill:none;stroke:var(--mls-chain,var(--rubric,#9b2215));stroke-width:1;stroke-linecap:square}
.mls-mark .mls-cs{fill:var(--mls-chain,var(--rubric,#9b2215));stroke:none}   /* solid fallback, unused (LOGO_SPEC section 2) */

/* Forced dark (a dark band on a light page). Site-wide dark mode needs nothing: design/tokens.css remaps the tokens. */
.mls-dark{--mls-ink:var(--dark-ink,#ece6d6);--mls-chain:var(--dark-rubric,#e5705a);--mls-faint:var(--dark-faint,#6f6756)}
/* Monochrome (print, single-colour): everything follows currentColor; the chain still reads by shape. */
.mls-mono{--mls-ink:currentColor;--mls-chain:currentColor;--mls-faint:currentColor}

/* Primary lockup: mark + "mlsanity" in EB Garamond (500; "ml" 700 since v1.6), lowercase; the mark's foot sits on the text baseline. */
.mls-lockup{display:inline-flex;align-items:baseline;gap:var(--s3,12px);margin:0;color:var(--mls-ink,var(--ink,#1c1a16));
  font-family:var(--serif,"EB Garamond",Garamond,"Times New Roman",serif);font-weight:500;line-height:1;letter-spacing:-.005em;text-decoration:none}
.mls-lockup .mls-word{font-feature-settings:"kern","liga"}
/* Wordmark (v1.6, brand/wordmark/): 'ml' at EB Garamond 700 (a real instance of the self-hosted variable font, wght 400-800;
   never synthesised) + 'sanity' at 500, one word, so it reads "ML sanity" without a space. Option: data-wordmark="plain" = v1.5 (one weight). */
.mls-lockup .mls-wm-a{font-weight:700;font-synthesis:none}
.mls-lockup .mls-wm-sep{display:none}
.mls-lockup[data-wordmark~="plain"] .mls-wm-a{font-weight:inherit}
/* Header slot: 18px box (DESIGN_SYSTEM_V1 section 4a); the mark draws at 16px = 1 device px per unit, centred with 1px around it,
   so the grid stays pixel-exact. Word at --fs-h2. Gap --s3 (12px ≥ 0.5× slot). */
.mls-lockup--header{font-size:var(--fs-h2,23px)}
/* the lockup adds no height to the site header: the word's line box = the 18px slot box (header stays 41px on home, as on 8771) */
.mls-lockup--header .mls-word{line-height:18px}
/* phones (Critiquito L-N9): word at --fs-wordmark (16px, design/tokens.css; v1.5.1: no literal fallback, the site's tokens.css loads first on every page) with an --s2 gap, so the wordmark's x-height (6.75px)
   matches the breadcrumb's and the lockup reads as one unit (17px wraps the longest crumbs). Header heights stay equal to 8771 at 320/360/390 (brand/screens/r2/r2_checks.json) */
@media (max-width:760px){.mls-lockup--header{font-size:var(--fs-wordmark);gap:var(--s2,8px)}}
.mls-lockup--header .mls-mark{width:16px;height:16px;margin:0 1px;position:relative;top:0}   /* foot on the word baseline: measured delta 0 at top:0 (top:-.5px measured -0.5; LOGO_SPEC section 10) */
.mls-lockup--hero{font-size:var(--fs-display,clamp(36px,5.2vw,64px))}
.mls-lockup--hero .mls-mark{width:.75em;height:.75em}
a.mls-lockup:focus-visible{outline:2px solid var(--rubric,#9b2215);outline-offset:var(--s1,4px)}

/* Alternate inline glyph [•]: an unnumbered reference mark (chips, links, footnote markers). 1em; never below 12px. */
.mls-ref{display:inline-block;vertical-align:-.12em;width:1em;height:1em;min-width:12px;min-height:12px}
.mls-ref .mls-rd{fill:var(--mls-chain,var(--rubric,#9b2215))}
.mls-ref--empty .mls-rd{fill:var(--mls-faint,var(--faint,#a39a85))}
.mls-ref.sup{vertical-align:.45em;width:.72em;height:.72em}
.mls-dark .mls-ref .mls-rd{fill:var(--dark-rubric,#e5705a)}

/* No-flash pre-reveal state. Set by the inline head snippet (LOGO_SPEC section 5.3) only when JS runs and motion is allowed;
   mlsanity-logo.js removes the class in the same task that starts the reveal. Never set with no JS or reduced motion. */
html.mls-intro svg[data-mls-anim~="session"] :is(.mls-i,.mls-f),
html.mls-intro-load svg[data-mls-anim~="load"] :is(.mls-i,.mls-f){opacity:0}
html.mls-intro svg[data-mls-anim~="session"] .mls-c,
html.mls-intro-load svg[data-mls-anim~="load"] .mls-c{stroke-dasharray:1 1;stroke-dashoffset:1}

/* Empty states. Inline (data-logo-slot="empty"): the [·] glyph at 1em, 0.25em to the text.
   Display (404, ≥64px): the empty corner, i.e. six faint slots with nothing cited. Static. */
.mls-empty-inline{margin-right:.25em}
.mls-mark--empty{display:block}

/* Loading (data-logo-slot="loading"): rows arrive, the chain rings, fade, repeat. One cycle = --motion-loader-cycle.
   CSS only. No amber, no spinner. Under reduced motion: the static mark at full strength + a visible "Loading…". */
.mls-mark--loading .mls-i,.mls-mark--loading .mls-c{animation:mls-load var(--motion-loader-cycle,1200ms) var(--motion-ease,cubic-bezier(.2,.7,.2,1)) infinite both}
.mls-mark--loading .mls-c{animation-name:mls-load-ring}
.mls-mark--loading [data-r="2"]{animation-delay:calc(var(--motion-loader-cycle,1200ms) * .08)}
.mls-mark--loading [data-r="3"]{animation-delay:calc(var(--motion-loader-cycle,1200ms) * .16)}
.mls-mark--loading .mls-c[data-r="1"]{animation-delay:calc(var(--motion-loader-cycle,1200ms) * .26)}
.mls-mark--loading .mls-c[data-r="2"]{animation-delay:calc(var(--motion-loader-cycle,1200ms) * .34)}
.mls-mark--loading .mls-c[data-r="3"]{animation-delay:calc(var(--motion-loader-cycle,1200ms) * .42)}
@keyframes mls-load{0%{opacity:0}18%,80%{opacity:1}100%{opacity:0}}
@keyframes mls-load-ring{0%,10%{stroke-dasharray:1 1;stroke-dashoffset:1;opacity:1}35%,80%{stroke-dasharray:1 1;stroke-dashoffset:0;opacity:1}100%{stroke-dasharray:1 1;stroke-dashoffset:0;opacity:0}}
/* Loader label: "Loading…" beside the mark. Shown under reduced motion (the mark is then static at full strength);
   aria-hidden, because the mark already carries role="img" aria-label="Loading". */
.mls-loader{display:inline-flex;align-items:center;gap:var(--s2,8px)}
.mls-loadlabel{display:none;font:400 var(--fs-meta,14px)/1 var(--sans,"Inter Tight",sans-serif);color:var(--muted,#5d574a)}
@media (prefers-reduced-motion: reduce){
  .mls-mark--loading .mls-i,.mls-mark--loading .mls-c{animation:none}
  .mls-loadlabel{display:inline}
}
/* No JS: a loader can never finish, so it is not shown (the page's own no-JS message stands alone). */
html:not(.js) .mls-loader,html:not(.js) .mls-mark--loading{display:none}