/* ==========================================================================
   Kilnwork — reset, element defaults, layout primitives
   Depends on tokens.css. Load order: tokens.css → base.css → components.css
   ========================================================================== */

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

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + var(--space-6));
  tab-size: 4;
  /* clip, not hidden: no scroll container, so position:sticky keeps working
     and off-canvas drawers can't create a horizontal scrollbar */
  overflow-x: clip;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  min-height: 100svh;
  background-color: var(--surface);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--step-1);
  font-weight: var(--weight-book);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-snug);
  font-optical-sizing: auto;
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color var(--dur-3) var(--ease-standard),
              color var(--dur-3) var(--ease-standard);
}

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

img, video { height: auto; }

svg { fill: currentColor; }

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

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

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

table { border-collapse: collapse; }

hr {
  border: 0;
  border-top: 1px solid var(--border);
}

/* ---- Focus & selection --------------------------------------------------- */

:focus { outline: none; }

:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}

::selection {
  background-color: var(--brand);
  color: var(--ink-on-brand);
}

/* ---- Typography ---------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
  font-weight: var(--weight-medium);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
  color: var(--ink);
}

h1 { font-size: var(--step-8); letter-spacing: var(--tracking-tighter); }
h2 { font-size: var(--step-6); }
h3 { font-size: var(--step-4); }
h4 { font-size: var(--step-3); letter-spacing: var(--tracking-snug); }
h5 { font-size: var(--step-2); letter-spacing: var(--tracking-snug); line-height: var(--leading-snug); }
h6 { font-size: var(--step-1); letter-spacing: var(--tracking-snug); line-height: var(--leading-snug); }

p { text-wrap: pretty; }

p, li { max-width: var(--measure); }

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

small { font-size: var(--step--1); }

code, kbd, pre, samp {
  font-family: var(--font-mono);
  font-size: 0.92em;
  letter-spacing: 0;
}

/* Display type — for hero and finale headlines. */
.display {
  font-size: var(--step-9);
  font-weight: var(--weight-medium);
  line-height: var(--leading-flat);
  letter-spacing: var(--tracking-tighter);
}

.lede {
  font-size: var(--step-2);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--ink-muted);
  max-width: var(--measure);
}

.text-muted  { color: var(--ink-muted); }
.text-subtle { color: var(--ink-subtle); }
.text-center { text-align: center; }
.measure       { max-width: var(--measure); }
.measure-short { max-width: var(--measure-short); }
.text-center.measure,
.text-center.measure-short { margin-inline: auto; }

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

a {
  color: inherit;
  text-decoration-color: color-mix(in oklab, currentColor 35%, transparent);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  transition: color var(--dur-2) var(--ease-standard),
              text-decoration-color var(--dur-2) var(--ease-standard);
}

a:hover { text-decoration-color: currentColor; }

/* Standalone inline link with a sliding arrow. Markup: <a class="link-arrow"> */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--brand);
  font-weight: var(--weight-medium);
  text-decoration: none;
}

.link-arrow::after {
  content: "";
  width: 0.85em;
  height: 0.85em;
  background-color: currentColor;
  /* chevron-right, masked so it inherits colour */
  -webkit-mask: var(--icon-arrow) center / contain no-repeat;
  mask: var(--icon-arrow) center / contain no-repeat;
  transform: translateX(-2px);
  opacity: 0.7;
  transition: transform var(--dur-3) var(--ease-out-expo),
              opacity var(--dur-2) var(--ease-standard);
}

.link-arrow:hover::after,
.link-arrow:focus-visible::after {
  transform: translateX(3px);
  opacity: 1;
}

:root {
  --icon-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6.2 2.6 11.6 8l-5.4 5.4-1.4-1.4L8.8 8 4.8 4z'/%3E%3C/svg%3E");
}

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

.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--wide   { max-width: calc(var(--container-wide) + var(--gutter) * 2); }
.container--narrow { max-width: calc(var(--container-narrow) + var(--gutter) * 2); }

.section {
  position: relative;
  padding-block: var(--section-y);
}

.section--tight { padding-block: var(--section-y-tight); }
.section--loose { padding-block: var(--section-y-loose); }
.section--flush-top    { padding-block-start: 0; }
.section--flush-bottom { padding-block-end: 0; }

/* Signature structural move: a band that overlaps the band above it with
   large rounded top corners. Give the band its own background. */
.section--band {
  border-start-start-radius: var(--radius-band);
  border-start-end-radius: var(--radius-band);
  overflow: clip;
}

/* Dark band inside a light page (and vice-versa in dark theme). */
.is-inverse {
  background-color: var(--inv-surface);
  color: var(--inv-ink);
  --ink: var(--inv-ink);
  --ink-muted: var(--inv-ink-muted);
  --ink-subtle: var(--inv-ink-subtle);
  --surface: var(--inv-surface);
  --surface-raised: var(--inv-surface-raised);
  --surface-sunken: var(--inv-surface-sunken);
  --border: var(--inv-border);
  --border-strong: var(--inv-border-strong);
  --highlight: var(--inv-highlight);
  --brand: var(--inv-brand);
  --ring: var(--inv-highlight);
}

.grid {
  display: grid;
  gap: var(--grid-gap);
  grid-template-columns: repeat(var(--cols, 12), minmax(0, 1fr));
}

/* Auto-fitting card grids: set --min to control the breakpoint. */
.grid--auto {
  grid-template-columns: repeat(auto-fit, minmax(min(var(--min, 17rem), 100%), 1fr));
}

.grid--2 { --cols: 1; }
.grid--3 { --cols: 1; }
.grid--4 { --cols: 2; }

@media (width >= 48rem) {
  .grid--2 { --cols: 2; }
  .grid--3 { --cols: 3; }
  .grid--4 { --cols: 4; }
}

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--stack-gap, var(--space-4));
}

.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cluster-gap, var(--space-3));
}

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

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.sr-only-focusable:focus-visible {
  position: fixed;
  inset-block-start: var(--space-3);
  inset-inline-start: var(--space-3);
  z-index: var(--z-toast);
  width: auto;
  height: auto;
  margin: 0;
  padding: var(--space-3) var(--space-5);
  overflow: visible;
  clip-path: none;
  background-color: var(--surface-raised);
  color: var(--ink);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-lg);
}

.no-scroll {
  overflow: hidden;
  /* keep layout stable when the scrollbar disappears */
  padding-inline-end: var(--scrollbar-w, 0px);
}

/* ---- Reveal on scroll ---------------------------------------------------- */
/* JS adds .is-revealed via IntersectionObserver. Stagger with --reveal-i. */

.reveal {
  opacity: 0;
  translate: 0 var(--reveal-y, 1.75rem);
  transition:
    opacity var(--dur-6) var(--ease-out-cubic),
    translate var(--dur-6) var(--ease-out-expo);
  transition-delay: calc(var(--reveal-i, 0) * var(--reveal-step, 90ms));
  will-change: opacity, translate;
}

.reveal.is-revealed {
  opacity: 1;
  translate: 0 0;
}

/* Variants */
.reveal--left  { translate: calc(var(--reveal-y, 1.75rem) * -1) 0; }
.reveal--right { translate: var(--reveal-y, 1.75rem) 0; }
.reveal--fade  { translate: none; }

/* No JS: never leave content invisible. */
.no-js .reveal { opacity: 1; translate: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .reveal,
  .reveal.is-revealed {
    opacity: 1;
    translate: none;
    transition: none;
    will-change: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}