/* Shared base styles for every web-sites property - resets, font
   stack, and the link-state rules keyed off a small set of custom-
   property names. Extracted 2026-10-02 from taiji's splash/404/50x
   pages, confirmed as the new standard (sunsetting each legacy site's
   own styles.css) - see design/taiji.md.

   This file does NOT set a universal color palette: each page defines
   its own :root values for --background/--surface/--text/--muted/
   --accent/--line (and an optional --accent-hover), since different
   pages intentionally use different moods (taiji's calm greens vs. the
   404 page's dark "abyss" theme) while sharing the same mechanism. */

/* Self-hosted fonts (2026-10-10), served from /shared/fonts/ - Google
   Fonts is blocked by our Content-Security-Policy and would leak
   visitors to a third party anyway. Latin subset (covers English and
   Spanish). SIL Open Font License 1.1, licence text beside each family.
   A browser downloads a file only when a page uses that family and
   weight, so declaring them all here costs other sites nothing.
   font-display: swap shows text in the fallback font until it loads. */
@font-face {
  font-family: "Atkinson Hyperlegible";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/shared/fonts/atkinson-hyperlegible/atkinson-hyperlegible-400.woff2") format("woff2");
}

@font-face {
  font-family: "Atkinson Hyperlegible";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/shared/fonts/atkinson-hyperlegible/atkinson-hyperlegible-700.woff2") format("woff2");
}

/* Variable fonts: one file covers the whole weight range. */
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url("/shared/fonts/dm-sans/dm-sans-variable.woff2") format("woff2");
}

@font-face {
  font-family: "Libre Baskerville";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/shared/fonts/libre-baskerville/libre-baskerville-variable.woff2") format("woff2");
}

@font-face {
  font-family: "Libre Baskerville";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/shared/fonts/libre-baskerville/libre-baskerville-italic.woff2") format("woff2");
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  font-family:
    "Atkinson Hyperlegible",
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  line-height: 1.55;
  color: var(--text);
  background: var(--background);
}

a {
  color: var(--accent);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}

a:hover {
  color: var(--accent-hover, var(--accent));
}

a:focus-visible {
  outline: 3px solid var(--focus, var(--accent));
  outline-offset: 4px;
  border-radius: 2px;
}

/* Page titles, fitted to their column (added 2026-10-08 for the hub
   pages and Open Mic): each written line stays on one line, sized as
   column width / longest line in em, capped so short titles don't
   become huge. Floor of 2rem (added 2026-10-08): below it a title wraps
   at a space (or the <wbr> after a ".") instead of shrinking further -
   multi-word titles like "Taiji for Balance" stay readable on phones. --title-em comes from the fit_title macro
   (sites/_shared/templates/macros.html); --title-col is the layout's
   column width - override it on the title's container. Mobile cap
   matches the hub breakpoint. */
:root {
  --title-col: calc(100vw - 2.5rem);
}

.fit-title {
  font-size: clamp(2rem, calc(var(--title-col) / var(--title-em)), 5.4rem);
  font-weight: 700;
  letter-spacing: -0.045em;
  overflow-wrap: normal;
}

@media (max-width: 48rem) {
  .fit-title {
    font-size: clamp(2rem, calc(var(--title-col) / var(--title-em)), 4.5rem);
  }
}