/* =============================================================================
   KDU Developer Community — Base
   Reset, typography, layout primitives, utilities.
   Depends on variables.css.
   ========================================================================== */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

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

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

img, picture, svg, video {
  display: block;
  max-width: 100%;
  height: auto;
}

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

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

table { border-collapse: collapse; width: 100%; }

:where(hr) {
  border: 0;
  border-top: var(--rule);
  margin: var(--space-6) 0;
}

/* --- Page ----------------------------------------------------------------- */
body {
  min-height: 100vh;
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font);
  font-size: var(--fs-body);
  font-weight: var(--weight-body);
  line-height: var(--lh-body);
  font-feature-settings: "kern" 1, "liga" 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Paper grain. One fixed layer, painted once, never repainted on scroll.
   Turn it off by setting --grain-opacity: 0 in variables.css. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: var(--z-grain);
  pointer-events: none;
  opacity: var(--grain-opacity);
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: var(--grain-tile) var(--grain-tile);
}

::selection {
  background: var(--color-selection-bg);
  color: var(--color-selection-fg);
}

/* --- Typography ----------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font);
  font-weight: var(--weight-display);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-display);
  color: var(--color-ink);
  text-wrap: balance;
}

h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

h4 {
  font-size: var(--fs-h4);
  font-weight: var(--weight-semibold);
  letter-spacing: 0;
  line-height: var(--lh-tight);
}

p { text-wrap: pretty; }

p + p { margin-top: var(--space-4); }

strong, b { font-weight: var(--weight-semibold); }

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  transition: color var(--dur-fast) var(--ease),
              text-decoration-color var(--dur-fast) var(--ease);
}

a:hover { color: var(--color-primary-hover); }

/* --- Focus ---------------------------------------------------------------- */
:focus { outline: none; }

:focus-visible {
  outline: var(--focus-width) solid var(--color-focus);
  outline-offset: var(--focus-offset);
}

.is-dark :focus-visible,
.footer :focus-visible,
.band :focus-visible {
  outline-color: var(--color-focus-on-dark);
}

/* --- Layout primitives ---------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wrap--wide { max-width: var(--wrap-wide); }
.wrap--narrow { max-width: var(--wrap-narrow); }

.section { padding-block: var(--section-gap); }
.section--tight { padding-block: clamp(2.75rem, 6vw, 5rem); }
.section--flush-top { padding-block-start: 0; }

.section + .section { padding-block-start: 0; }
.section--ruled { border-top: var(--rule); }

main { display: block; }

/* Two-column editorial split: a sticky label column and a content column. */
.split {
  display: grid;
  gap: clamp(1.75rem, 4vw, 4rem);
}

@media (min-width: 62rem) {
  .split {
    grid-template-columns: minmax(12rem, 20fr) minmax(0, 46fr);
    align-items: start;
  }
  .split--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split__aside { position: sticky; top: calc(var(--header-h) + var(--space-6)); }
}

.grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
}

.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr)); }

/* Four items, laid out explicitly rather than by auto-fit, so the row never
   breaks into three-plus-an-orphan at in-between widths. */
.grid--4 { grid-template-columns: minmax(0, 1fr); }

@media (min-width: 40rem) {
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 74rem) {
  .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.stack > * + * { margin-top: var(--space-4); }
.stack-lg > * + * { margin-top: var(--space-6); }

/* Spacing utilities. Used sparingly, where a one-off gap would otherwise
   need a component class of its own. No inline styles anywhere in the HTML. */
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }
.mt-7 { margin-top: var(--space-7); }
.mt-8 { margin-top: var(--space-8); }
.mt-9 { margin-top: var(--space-9); }
.mb-6 { margin-bottom: var(--space-6); }
.measure { max-width: 52ch; }

/* --- Text utilities ------------------------------------------------------- */
.lead {
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--color-text);
  max-width: 40ch;
}

.prose { max-width: 62ch; }
.prose p + p { margin-top: var(--space-4); }
.prose > * + h3 { margin-top: var(--space-7); }
.prose h3 + p { margin-top: var(--space-3); }

.muted { color: var(--color-text-muted); }
.faint { color: var(--color-text-faint); }
.small { font-size: var(--fs-small); }

/* Small letterspaced caps. The quiet voice of the page - eyebrows and
   tags - set in the same face as everything else. */
.caption {
  font-family: var(--font);
  font-size: var(--fs-caption);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
  color: var(--color-text-muted);
  line-height: 1.4;
}

.caption--ink { color: var(--color-ink); }
.caption--on-dark { color: var(--color-on-dark-muted); }

.on-dark-faint { color: var(--color-on-dark-faint); }

.display-italic {
  font-style: italic;
  font-weight: var(--weight-display);
}

/* --- Accessibility helpers ------------------------------------------------ */
.visually-hidden:not(:focus):not(:active) {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  z-index: 200;
  transform: translateY(-200%);
  background: var(--color-ink);
  color: var(--color-on-dark);
  font-family: var(--font);
  font-size: var(--fs-caption);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  text-decoration: none;
  padding: var(--space-3) var(--space-4);
}

.skip-link:focus-visible {
  transform: translateY(0);
  outline-color: var(--color-focus);
  outline-offset: 2px;
}

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

/* --- Print ---------------------------------------------------------------- */
@media print {
  body::after { display: none; }
  .site-header, .site-footer, .band, .hero__ground, .nav-toggle { display: none !important; }
  body { background: #fff; color: #000; }
  a::after { content: " (" attr(href) ")"; font-size: 0.8em; }
}