/* ==========================================================================
   TCC — base.css
   @font-face, reset, element typography, layout primitives, utilities.
   Shared by every concept. Contains no decoration.
   ========================================================================== */

/* --- Fonts ---------------------------------------------------------------
   Self-hosted. No Google Fonts — the site must open from file://.
   LICENCE: Hanken Sans is a commercial typeface and its web licence status
   is UNCONFIRMED. Must be confirmed before launch. See README.
   The display face, Jost, is SIL Open Font Licence -- see css/site.css.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Hanken Sans';
  src: url('../fonts/hankensans-regular-webfont.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Hanken Sans';
  src: url('../fonts/HankenSans-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}


/* --- Reset ---------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--s-3));
}

body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol {
  margin: 0;
  padding: 0;
}

ul[class], ol[class] { list-style: none; }

/* The UA rule for [hidden] is a bare attribute selector, so any class that
   sets display beats it -- .proof-row { display: grid } kept a "hidden" row
   on screen at full height. If the attribute is set, it should win. */
[hidden] { display: none !important; }

/* height:auto matters. The HTML width/height attributes on <img> map to CSS
   width/height presentational hints, and an explicit height beats a CSS
   aspect-ratio — so without this, every image sized by aspect-ratio silently
   falls back to its intrinsic height. */
img, picture, video, svg {
  display: block;
  max-width: 100%;
}
img { height: auto; }

input, button, textarea, select { font: inherit; color: inherit; }

button { background: none; border: 0; cursor: pointer; }


/* --- Document ------------------------------------------------------------- */

body {
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}


/* --- Headings -------------------------------------------------------------
   Element-level only. Size and rhythm; concepts handle character. */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--lh-head);
  letter-spacing: var(--ls-head);
  text-wrap: balance;
}

h1 { font-size: var(--t-h1); line-height: var(--lh-tight); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); }
h4 { font-size: 1.0625rem; }

p { text-wrap: pretty; }
p + p { margin-top: var(--s-2); }


/* --- Links ----------------------------------------------------------------- */

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }

a:not([class]) {
  color: var(--tcc-tan-deep);
  text-decoration: underline;
}
a:not([class]):hover { color: var(--ink); }


/* --- Focus ----------------------------------------------------------------
   Visible everywhere. Never removed. */

:focus-visible {
  outline: var(--focus-w) solid var(--focus);
  outline-offset: 3px;
}

/* Dark grounds flip the ring to white. Those selectors live in site.css,
   which is where the grounds are defined. */


/* --- Skip link -------------------------------------------------------------- */

.skip-link {
  position: absolute;
  left: var(--s-2);
  top: -100px;
  z-index: 200;
  padding: var(--s-2) var(--s-3);
  background: var(--ink);
  color: var(--white);
  font-weight: 700;
  text-decoration: none;
  transition: top var(--dur-fast) var(--ease);
}
.skip-link:focus { top: var(--s-2); }


/* --- Layout primitives ------------------------------------------------------ */

.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--narrow { max-width: 860px; }

/* Long-form measure. Never let body copy run the full 1320. */
.measure { max-width: var(--maxw-text); }

.stack > * + * { margin-top: var(--s-3); }
.stack-sm > * + * { margin-top: var(--s-2); }
.stack-lg > * + * { margin-top: var(--s-5); }


/* --- Utilities --------------------------------------------------------------- */

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.text-center { text-align: center; }
.no-wrap { white-space: nowrap; }

/* Spacing utilities. These exist so pages never need inline styles — the
   page-by-page one-off styling on the current site is exactly what made it
   unmaintainable. */
.mt-2 { margin-top: var(--s-2); }
.mt-3 { margin-top: var(--s-3); }
.mt-4 { margin-top: var(--s-4); }
.mt-5 { margin-top: var(--s-5); }
.mt-6 { margin-top: var(--s-6); }

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em;
}


/* --- Motion preference ------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
    transition-duration: 0.01ms;
    scroll-behavior: auto;
  }
}