/* =============================================================================
   Rep Pipeline — reset, typography, layout primitives
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--topbar-h) + var(--s-8));
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  min-height: 100dvh;
  background-color: var(--canvas);
  background-image: var(--canvas-tint);
  background-attachment: fixed;
  color: var(--ink);
  font: var(--t-body);
  letter-spacing: var(--tr-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-synthesis-weight: none;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "cv05" 1;
  overflow-wrap: break-word;
}

img, svg, video, canvas { display: block; max-width: 100%; }
svg { flex: none; }
/* the shared icon size — every inline icon marked .i renders at 16px */
svg.i { width: 16px; height: 16px; }
button, input, select, textarea { font: inherit; letter-spacing: inherit; color: inherit; background: none; border: 0; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
table { border-collapse: collapse; width: 100%; }
th { text-align: left; font-weight: 600; }
summary { cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }
[hidden] { display: none !important; }

/* --- Focus: a single brand ring, everywhere ------------------------------ */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-1);
}

/* --- Selection ----------------------------------------------------------- */
::selection { background: var(--accent-wash-2); color: var(--ink); }

/* --- Scrollbars ---------------------------------------------------------- */
* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--line-strong); border-radius: var(--r-full);
  border: 3px solid transparent; background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--ink-faint); background-clip: content-box; }

/* =============================================================================
   Type
   ========================================================================== */
.t-display  { font: var(--t-display);  letter-spacing: var(--tr-display); }
.t-title-1  { font: var(--t-title-1);  letter-spacing: var(--tr-title-1); }
.t-title-2  { font: var(--t-title-2);  letter-spacing: var(--tr-title-2); }
.t-title-3  { font: var(--t-title-3);  letter-spacing: var(--tr-title-3); }
.t-headline { font: var(--t-headline); letter-spacing: var(--tr-headline); }
.t-body     { font: var(--t-body);     letter-spacing: var(--tr-body); }
.t-callout  { font: var(--t-callout); }
.t-caption  { font: var(--t-caption); }

.overline {
  font: 600 0.6875rem/1.2 var(--font-sans);
  letter-spacing: var(--tr-overline);
  text-transform: uppercase;
  color: var(--ink-faint);
}
.muted  { color: var(--ink-muted); }
.faint  { color: var(--ink-faint); }
.mono   { font-family: var(--font-mono); font-size: .8125rem; letter-spacing: 0; }
.num    { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.nowrap { white-space: nowrap; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

.prose { color: var(--ink-muted); font: var(--t-callout); max-width: 78ch; }
.prose strong { color: var(--ink-2); font-weight: 600; }
.prose code {
  font-family: var(--font-mono); font-size: .95em;
  background: var(--neutral-wash); padding: .1em .35em; border-radius: var(--r-1);
  color: var(--ink-2);
}

/* Accessible-but-invisible */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; top: var(--s-4); left: var(--s-4); z-index: 200;
  transform: translateY(-200%);
  background: var(--surface); color: var(--ink);
  padding: var(--s-4) var(--s-6); border-radius: var(--r-3);
  box-shadow: var(--shadow-3); border: 1px solid var(--line);
  font: var(--t-headline); transition: transform var(--dur-2) var(--ease);
}
.skip-link:focus-visible { transform: translateY(0); }

/* =============================================================================
   Layout primitives
   ========================================================================== */
.stack   { display: flex; flex-direction: column; }
.row     { display: flex; align-items: center; }
.row-top { display: flex; align-items: flex-start; }
.wrap    { flex-wrap: wrap; }
.between { justify-content: space-between; }
.grow    { flex: 1 1 auto; min-width: 0; }
.spacer  { flex: 1 1 auto; }

.gap-1 { gap: var(--s-1); } .gap-2 { gap: var(--s-2); } .gap-3 { gap: var(--s-3); }
.gap-4 { gap: var(--s-4); } .gap-5 { gap: var(--s-5); } .gap-6 { gap: var(--s-6); }
.gap-7 { gap: var(--s-7); } .gap-8 { gap: var(--s-8); } .gap-9 { gap: var(--s-9); }

.grid { display: grid; gap: var(--s-6); }
.grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.grid-5 { grid-template-columns: repeat(5, minmax(0,1fr)); }
.grid-auto { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

@media (max-width: 1180px) {
  .grid-5 { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 860px) {
  .grid-2, .grid-3, .grid-4, .grid-5 { grid-template-columns: minmax(0,1fr); }
}

/* A horizontally scrollable region that never makes the page scroll. */
.scroll-x { overflow-x: auto; overscroll-behavior-x: contain; }