/* ==========================================================================
   Exoframe Labs — base.css
   Reset, typography, layout primitives, utilities. Mobile-first (375px),
   then 768px and 1024px.
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  /* anchor jumps + focus land below the sticky nav (nav height + notch) */
  scroll-padding-top: calc(var(--nav-h) + var(--safe-top) + 8px);
}

@media (prefers-reduced-motion: no-preference) {
  html:not([data-motion="off"]) { scroll-behavior: smooth; }
}

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-md);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  transition: background-color var(--d-base) var(--ease-out), color var(--d-base) var(--ease-out);
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; margin: 0; padding: 0; }
img, picture, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
/* Tap feedback for plain links (the grey tap highlight is off globally) */
a:not(.btn):active { opacity: .6; }
table { border-collapse: collapse; }
[hidden] { display: none !important; }

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

/* Controls get the touch contract */
a, button, input, select, textarea, label, summary, [role="tab"], [role="button"] {
  touch-action: manipulation;
}

/* Focus: 2px ring, 2px offset, theme-aware */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

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

.t-hero { font-family: var(--font-display); font-weight: 700; font-size: var(--t-hero); line-height: var(--lh-hero); letter-spacing: var(--tracking-display); text-wrap: balance; }
.t-3xl  { font-family: var(--font-display); font-weight: 700; font-size: var(--t-3xl); line-height: var(--lh-display); letter-spacing: var(--tracking-display); }
.t-2xl  { font-family: var(--font-display); font-weight: 600; font-size: var(--t-2xl); line-height: var(--lh-display); letter-spacing: var(--tracking-display); }
.t-xl   { font-family: var(--font-display); font-weight: 600; font-size: var(--t-xl); line-height: 1.25; letter-spacing: -0.01em; }
.t-lg   { font-size: var(--t-lg); }
.t-md   { font-size: var(--t-md); }
.t-sm   { font-size: var(--t-sm); }
.t-xs   { font-size: var(--t-xs); }
.t-mono { font-family: var(--font-mono); font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: 0; }
.t-ink-2 { color: var(--ink-2); }
.t-medium { font-weight: 500; }
.t-semibold { font-weight: 600; }

p { text-wrap: pretty; }
.lede { font-size: var(--t-lg); color: var(--ink-2); max-width: var(--measure); }
.prose { max-width: var(--measure); color: var(--ink-2); }
.prose > * + * { margin-top: var(--s-4); }

code, kbd, samp, pre { font-family: var(--font-mono); font-size: 0.875em; }
code:not(pre code) {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 0.05em 0.35em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  overflow-wrap: anywhere;
}

/* Highlight mark: volt fill, ink text */
mark, .mark {
  background: linear-gradient(transparent 12%, var(--volt) 12%, var(--volt) 88%, transparent 88%);
  color: var(--on-volt);
  padding: 0 0.12em;
  border-radius: 2px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Sparkle list marker */
.list-spark { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-3); }
.list-spark > li { position: relative; padding-left: 1.6em; }
.list-spark > li::before {
  content: "";
  position: absolute;
  left: 0.15em;
  top: 0.35em;
  width: 0.85em;
  height: 0.85em;
  background: var(--spark);
  -webkit-mask: var(--spark-mask) center / contain no-repeat;
  mask: var(--spark-mask) center / contain no-repeat;
}

:root {
  --spark-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1C12.55 7.4 14.6 10.9 21.5 12C14.6 13.1 12.55 16.6 12 23C11.45 16.6 9.4 13.1 2.5 12C9.4 10.9 11.45 7.4 12 1Z'/%3E%3C/svg%3E");
}

/* ---- Icons ------------------------------------------------------------- */
.icon {
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon--sm { width: 16px; height: 16px; }
.icon--lg { width: 24px; height: 24px; }
.icon--fill { fill: currentColor; stroke: none; }

/* ---- Layout primitives ------------------------------------------------- */
.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: max(var(--gutter), var(--safe-left)) max(var(--gutter), var(--safe-right));
}

.section { padding-block: var(--s-10); }
.section--alt { background: var(--paper-2); }

@media (min-width: 768px) {
  .section { padding-block: var(--s-11); }
}

.stack { display: flex; flex-direction: column; gap: var(--stack-gap, var(--s-4)); }
.stack-sm { --stack-gap: var(--s-2); }
.stack-lg { --stack-gap: var(--s-7); }

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

.grid {
  display: grid;
  gap: var(--grid-gap, var(--s-4));
  grid-template-columns: repeat(auto-fill, minmax(min(var(--grid-min, 240px), 100%), 1fr));
}

.split { display: grid; gap: var(--s-6); }
@media (min-width: 768px) { .split { grid-template-columns: 1fr 1fr; } }

/* ---- Utilities --------------------------------------------------------- */
.sr-only {
  position: absolute !important;
  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;
  left: var(--s-4);
  top: var(--s-4);
  z-index: 100;
  padding: var(--s-3) var(--s-4);
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--r-md);
  transform: translateY(-200%);
}
.skip-link:focus-visible { transform: none; }

.hairline { border: 0; border-top: 1px solid var(--line); margin: 0; }
.muted { color: var(--ink-2); }
.nowrap { white-space: nowrap; }
.w-full { width: 100%; }