/* GENERATED by meatball-labs/family/build.py from base.css + family.json + electric.json. Do not edit. */
/* The family base kit: one skeleton, many skins.
 *
 * Every family site keeps its own look (meatball.ai's magazine, SysForge's
 * forge, tinymachines' datasheet). What they share is the skeleton: the
 * masthead pattern, the footer pattern and the family dots. This file is
 * that skeleton and nothing else. It sets no colours and no fonts of its
 * own; a site skins it by setting the --fam-* variables below on :root
 * (light and dark as it likes).
 *
 * Source: meatball-labs/family/base.css. Do not edit a copy inside a site;
 * edit here and run family/build.py, which writes family.css (this file
 * plus the dot hues from family.json) into every site that carries it.
 *
 * THE CONTRACT (each has a fallback, so an unskinned page still lays out)
 *   --fam-ground   page background (the ring around "you are here")
 *   --fam-ink      text
 *   --fam-muted    secondary text, nav links at rest
 *   --fam-rule     hairlines
 *   --fam-accent   focus ring
 *   --fam-body     body font stack
 *   --fam-mono     mono font stack (eyebrows, fine print)
 *   --fam-max      content width
 *   --fam-gutter   side padding (16px under 620px regardless)
 *
 * THE MASTHEAD
 *   <header class="fam-mast">
 *     <div class="fam-mast__in">
 *       <a class="fam-brand" href="/">mark + name</a>
 *       <nav class="fam-nav" aria-label="Main">at most five links</nav>
 *       <div class="fam-util">theme switch, search, menu (optional)</div>
 *     </div>
 *   </header>
 * Brand left, links right, utilities last. Under 620px the links drop to
 * their own row and scroll sideways rather than disappearing: a phone
 * visitor keeps every door the desktop one has.
 *
 * THE FOOTER
 *   <footer class="fam-foot">
 *     <div class="fam-foot__in">
 *       <div class="fam-foot__main">
 *         <div class="fam-foot__family">(the dots) <span>Meatball Labs and family</span></div>
 *         <p class="fam-foot__note">one line in the site's own voice</p>
 *       </div>
 *       <nav class="fam-foot__links" aria-label="Footer">the site's links</nav>
 *       <p class="fam-foot__fine">&copy; 2026 Name. Fine print.</p>
 *     </div>
 *   </footer>
 * The dots markup is generated (build.py) between the markers
 * <!-- family:dots me=HUE --> and <!-- /family:dots -->; never hand-edit it.
 */

:root {
  --fam-ground: Canvas;
  --fam-ink: CanvasText;
  --fam-muted: GrayText;
  --fam-rule: color-mix(in srgb, CanvasText 18%, transparent);
  --fam-accent: Highlight;
  --fam-body: system-ui, sans-serif;
  --fam-mono: ui-monospace, Menlo, Consolas, monospace;
  --fam-max: 1160px;
  --fam-gutter: 24px;
}

/* ---- Masthead ---------------------------------------------------------- */
.fam-mast { border-bottom: 1px solid var(--fam-rule); padding-inline: var(--fam-gutter) }
.fam-mast__in { max-width: var(--fam-max); margin-inline: auto; display: flex; align-items: center; gap: 24px; padding-block: 16px; flex-wrap: wrap }
.fam-brand { flex: none; display: flex; align-items: center; gap: 12px; color: var(--fam-ink); text-decoration: none }
.fam-nav { display: flex; gap: 22px; margin-left: auto; font: 400 15px/1.3 var(--fam-body) }
.fam-nav a { color: var(--fam-muted); text-decoration: none; white-space: nowrap }
.fam-nav a:hover, .fam-nav a[aria-current="page"] { color: var(--fam-ink) }
.fam-util { display: flex; align-items: center; gap: 12px; flex: none }
.fam-mast :focus-visible, .fam-foot :focus-visible { outline: 3px solid var(--fam-accent); outline-offset: 3px }

/* ---- Footer ------------------------------------------------------------ */
.fam-foot { border-top: 1px solid var(--fam-rule); padding-inline: var(--fam-gutter); color: var(--fam-ink) }
.fam-foot__in { max-width: var(--fam-max); margin-inline: auto; padding-block: 40px 56px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 40px; align-items: start }
.fam-foot__family { display: flex; align-items: center; gap: 12px; flex-wrap: wrap }
.fam-foot__family > span { font: 500 12px/1.3 var(--fam-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--fam-muted) }
.fam-foot__note { margin: 14px 0 0; color: var(--fam-muted); font: 400 14px/1.55 var(--fam-body); max-width: 60ch }
.fam-foot__links { display: flex; gap: 20px; flex-wrap: wrap; font: 400 15px/1.4 var(--fam-body) }
.fam-foot__links a { color: inherit }
.fam-foot__fine { grid-column: 1 / -1; margin: 0; font: 400 12px/1.5 var(--fam-mono); color: var(--fam-muted) }

/* ---- The family dots --------------------------------------------------- */
/* 10px dots; the marked one 14px with a ring in the page's ground. A linked
   dot's hit area is 18px (the ::after), so neighbours touch, never overlap. */
.family { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap }
.family-dot { position: relative; display: block; flex: none; width: 10px; height: 10px; border-radius: 50% }
a.family-dot::after { content: ""; position: absolute; inset: -4px }
a.family-dot:hover, a.family-dot:focus-visible { box-shadow: 0 0 0 2px var(--fam-ground), 0 0 0 3px var(--fam-ink); outline: none }
.family-dot.is-me { width: 14px; height: 14px; box-shadow: 0 0 0 2px var(--fam-ground), 0 0 0 3px var(--fam-muted) }

@media (max-width: 620px) {
  .fam-mast, .fam-foot { padding-inline: 16px }
  .fam-mast__in { gap: 12px 16px; padding-block: 12px }
  .fam-nav { order: 3; flex-basis: 100%; margin-left: 0; overflow-x: auto; gap: 18px; padding-bottom: 2px; scrollbar-width: none }
  .fam-util { margin-left: auto }
  .fam-foot__in { grid-template-columns: minmax(0, 1fr) }
}
@media print { .fam-nav, .fam-util { display: none } }

/* The hues (family.json). */
.family-dot[data-hue="clay"] { background: #995d48 }
.family-dot[data-hue="ochre"] { background: #89692f }
.family-dot[data-hue="moss"] { background: #68763a }
.family-dot[data-hue="sage"] { background: #427d59 }
.family-dot[data-hue="spruce"] { background: #1b7d82 }
.family-dot[data-hue="steel"] { background: #41749d }
.family-dot[data-hue="iris"] { background: #6a679e }
.family-dot[data-hue="plum"] { background: #8b5c86 }
.family-dot[data-hue="rose"] { background: #995963 }
.family-dot[data-electric="lime"] { background: #3dc820 }
.family-dot[data-electric="cyan"] { background: #25c1c8 }
.family-dot[data-electric="ember"] { background: #be6515 }
.family-dot[data-electric="magenta"] { background: #b61692 }
.family-dot[data-electric="violet"] { background: #5f0fa7 }

/* The electric set (electric.json): for a site that lives on a dark screen. */
:root {
  /* electric set: each hue at its most saturated point in sRGB */
  /* Lime (snailmail.ai), electric, hue 141 */
  --lime-glow: #3ffe00;
  --lime-core: #3dc820;
  --lime-dim: #25541d;
  --lime-haze: #1e2a1c;
  /* Cyan (gopher), electric, hue 200 */
  --cyan-glow: #00f4fe;
  --cyan-core: #25c1c8;
  --cyan-dim: #005256;
  --cyan-haze: #132b2c;
  /* Ember (hotbits), electric, hue 55 */
  --ember-glow: #ff8505;
  --ember-core: #be6515;
  --ember-dim: #6f3600;
  --ember-haze: #322318;
  /* Magenta, electric, hue 340 */
  --magenta-glow: #fc00cb;
  --magenta-core: #b61692;
  --magenta-dim: #6a2f58;
  --magenta-haze: #31212b;
  /* Violet (Flux), electric, hue 300 */
  --violet-glow: #9200fe;
  --violet-core: #5f0fa7;
  --violet-dim: #503975;
  --violet-haze: #292333;
}