/* ============================================================
   K·S brand · canonical CSS classes
   ------------------------------------------------------------
   Drop-in stylesheet. Requires tokens.css loaded first.
   Provides:
     .ks-sig        K·S signature (K + dot + S)
     .pt            trailing brand-dot for headings
     .av            avatar container (square or round)
     .av-1 / .av-2  avatar variants (cream / dark)
     .av-32/96/200  avatar sizes
   No layout, no demos — just the brand objects themselves.
   ============================================================ */

/* ---- K·S signature ----
   <span class="ks-sig">K<span class="dot"></span>S</span>
   Inline-flex + line-height: 1 puts the dot on cap-middle of K/S.
   The dot is constructive (built between glyphs), not typographic.

   Two rendering pitfalls govern the dot at sub-5px sizes. They are
   mechanical, not opinion — apply to any chosen ratio. README has
   the full description; this is the working summary:

   Pitfall 1 (horizontal — disc itself):
   border-radius: 50% becomes a real circle only with enough
   subpixels for the curve. Diameters that land on integer or
   half-integer pixel boundaries render cleanly; in-between values
   render asymmetric (rounded square / diamond).
   Dodge: dot diameter ≥ ~3.5px AND lands on n.0 or n.5 px boundary
   at every host font-size shipped.

   Pitfall 2 (vertical — position inside line-box):
   The browser computes dot offset as (line-box − dot) / 2. If
   fractional, the dot lands on sub-pixel y-coordinate and is
   rendered "low". Below visual threshold for tiny dots; visible
   from ~4px upward.
   Dodge: ensure (font-size × line-height − dot-height) / 2 is
   integer at every host context.

   Current values (--dot-sig 0.25em + 3.5px floor below) clear both
   at every current host context EXCEPT 18px font, where Pitfall 2
   fires; that one is patched per-context with explicit width: 4px
   (see .sig-lines .row .ex.disp .ks-sig .dot in the spec doc).
   If you change the ratio or introduce a new host font-size,
   recompute both pitfalls and patch the breakages. */
.ks-sig {
  font-family: var(--font-display);
  font-weight: var(--fw-sig, 650);
  letter-spacing: -0.02em;
  display: inline-flex;
  align-items: center;
  line-height: 1;
}
.ks-sig .dot {
  display: inline-block;
  width: max(var(--dot-sig, 0.25em), 3.5px);
  height: max(var(--dot-sig, 0.25em), 3.5px);
  background: var(--acc);
  border-radius: 50%;
  margin: 0 0.08em;
  box-shadow: var(--dot-shadow, 0 0.04em 0.04em rgba(0,0,0,0.15));
  flex-shrink: 0;
}

/* ---- Trailing brand-dot ----
   <h1>Find what carries<span class="pt"></span></h1>
   Default: em-relative, vertical-align middle — works in plain
   block-level headings. */
.pt {
  display: inline-block;
  width: var(--dot-ratio, 0.333em);
  height: var(--dot-ratio, 0.333em);
  background: var(--acc);
  border-radius: 50%;
  margin-left: 0.14em;
  vertical-align: middle;
  box-shadow: var(--dot-shadow, 0 0.04em 0.04em rgba(0,0,0,0.15));
}

/* ---- Avatars ----
   <div class="av av-1 av-200">
     <span class="ks">K<span class="dot"></span>S</span>
   </div>
   av-1: square cream — github / email / square social
   av-2: round dark — linkedin / x / round-frame */
.av {
  aspect-ratio: 1 / 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.av-1 { background: var(--bg); }
.av-2 { background: var(--ink); }
.av-1 .ks {
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: var(--fw-sig, 650);
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  line-height: 1;
}
.av-2 .ks {
  color: var(--bg);
  font-family: var(--font-display);
  font-weight: var(--fw-sig, 650);
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  line-height: 1;
}
.av .dot {
  display: inline-block;
  width: max(var(--dot-sig, 0.25em), 3.5px);
  height: max(var(--dot-sig, 0.25em), 3.5px);
  background: var(--acc);
  border-radius: 50%;
  margin: 0 0.08em;
  box-shadow: var(--dot-shadow, 0 0.04em 0.04em rgba(0,0,0,0.15));
  flex-shrink: 0;
}
.av-2 .dot { box-shadow: 0 0.04em 0.04em rgba(0,0,0,0.25); }

.av-32  { width: 32px;  height: 32px;  aspect-ratio: unset; }
.av-96  { width: 96px;  height: 96px;  aspect-ratio: unset; }
.av-200 { width: 200px; height: 200px; aspect-ratio: unset; }
.av-32  .ks { font-size: 12px; }
.av-96  .ks { font-size: 32px; }
.av-200 .ks { font-size: 64px; }

/* Corner-radius scaled to size — applied to both variants now that
   av-2 is also a rounded square (was full-round before; the round
   form added a third class for the favicon case unnecessarily). */
.av-1.av-32,  .av-2.av-32  { border-radius: 6px;  }
.av-1.av-96,  .av-2.av-96  { border-radius: 18px; }
.av-1.av-200, .av-2.av-200 { border-radius: 36px; }