/* Get Less Chaos: A Place for Everything. Base: fonts, reset, typography, layout primitives, focus, reduced motion.
   Needs tokens.css first. Paths are relative to this file (system/), so any page in the direction can link it. */
@font-face {
  font-family: "Epilogue";
  src: url("/assets/fonts/Epilogue.ttf") format("truetype");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Recursive";
  src: url("/assets/fonts/Recursive.ttf") format("truetype");
  font-weight: 300 1000;
  font-display: swap;
}

/* ---------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
img, svg, video, canvas { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }

/* ---------------------------------------------------------------- the board */
html { background: var(--board); color: var(--ink); scroll-padding-top: 96px; }
body {
  min-height: 100vh;
  background: var(--board);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--text-md);
  line-height: var(--leading-body);
  font-weight: var(--weight-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
  overflow-x: clip;
}
::selection { background: var(--selection); color: var(--ink); }

/* ---------------------------------------------------------------- type */
h1, h2, h3, h4, .display {
  font-family: var(--font-display);
  font-weight: var(--weight-black);
  letter-spacing: var(--tracking-heading);
  line-height: var(--leading-snug);
  text-wrap: balance;
  color: var(--ink);
}
.display { font-size: var(--text-4xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-display); }
h1, .h1 { font-size: var(--text-3xl); line-height: 1.04; letter-spacing: var(--tracking-display); }
h2, .h2 { font-size: var(--text-2xl); line-height: 1.08; }
h3, .h3 { font-size: var(--text-xl); line-height: 1.16; }
h4, .h4 { font-size: var(--text-lg); line-height: 1.25; font-weight: var(--weight-bold); letter-spacing: 0; }
p { text-wrap: pretty; max-width: var(--measure); }
.lede { font-size: var(--text-lg); line-height: 1.5; color: var(--ink-2); font-weight: 420; }
.small { font-size: var(--text-sm); }
.muted { color: var(--ink-3); }
strong, b { font-weight: var(--weight-bold); }
em { font-style: normal; font-weight: var(--weight-bold); }
/* the label face: workshop labels, never sentences */
.label, .eyebrow, code, kbd, samp {
  font-family: var(--font-label);
  font-variation-settings: "MONO" 1, "CASL" 0;
  font-feature-settings: "ss01", "ss05";
}
.eyebrow {
  display: inline-flex; align-items: center; gap: .6em;
  font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--ink-3);
}
.eyebrow::before { /* a tiny cut: the label's own slot */
  content: ""; width: .62em; height: .62em; border-radius: 2px; flex: none;
  background: linear-gradient(var(--floor-top), var(--floor-bot));
  box-shadow: inset .5px 1.5px 0 -.5px var(--pocket-edge-a), 0 1px 0 var(--lip-a);
}
code, kbd, samp { font-size: .92em; }

/* links in running text: they sit in a green groove; hovering lifts the word out of it */
a { color: inherit; }
.prose a, a.link {
  color: var(--ink);
  text-decoration-line: underline;
  text-decoration-color: var(--foam);
  text-decoration-thickness: 2px;
  text-underline-offset: .22em;
  text-decoration-skip-ink: auto;
  transition: text-underline-offset var(--dur-hover) var(--ease-spring), color var(--dur-hover) var(--ease-settle), text-decoration-thickness var(--dur-hover) var(--ease-settle);
}
.prose a:hover, a.link:hover { text-underline-offset: .36em; color: var(--foam-ink); text-decoration-thickness: 3px; }
.prose a:active, a.link:active { text-underline-offset: .12em; transition-duration: var(--dur-press); }

/* ---------------------------------------------------------------- focus: the cut line */
:focus { outline: none; }
:focus-visible {
  outline: var(--ring-width) solid var(--ring);
  outline-offset: var(--ring-offset);
  border-radius: var(--radius-sm);
}

/* ---------------------------------------------------------------- layout primitives */
.wrap { width: min(100% - 2 * var(--space-gutter), var(--space-wrap)); margin-inline: auto; }
.stack > * + * { margin-block-start: var(--stack, var(--space-5)); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cluster, var(--space-4)); }
.grid { display: grid; gap: var(--grid-gap, var(--space-6)); grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--grid-min, 280px)), 1fr)); }
.section { padding-block: var(--space-section); }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* skip link: a piece that drops down from the top edge when focused */
.skip-link {
  position: fixed; left: var(--space-4); top: var(--space-3); z-index: 100;
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-pill);
  background: var(--ink); color: var(--board); font-weight: var(--weight-bold); text-decoration: none;
  transform: translateY(calc(-100% - 24px)); transition: transform var(--dur-pop) var(--ease-pop);
}
.skip-link:focus-visible { transform: none; box-shadow: var(--z-lift-2); }

/* ---------------------------------------------------------------- smooth scroll (Lenis) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* ---------------------------------------------------------------- reduced motion: nothing travels, things crossfade */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-property: opacity, color, background-color, border-color, outline-color, text-decoration-color !important;
    transition-duration: var(--dur-crossfade) !important;
  }
}