/* ============================================================
   Dataplate — base styles
   Reset, typography, layout utilities. Depends on tokens.css.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght,SOFT,WONK@9..144,300..900,0..100,0..1&family=JetBrains+Mono:wght@300;400;500;600;700&family=Hanken+Grotesk:wght@300;400;500;600;700&display=swap');

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

html,
body { margin: 0; padding: 0; }

body {
  font-family: var(--ff-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--paper);
  background-image:
    radial-gradient(1400px 800px at 90% -10%, rgba(181, 65, 30, 0.05), transparent 60%),
    radial-gradient(1100px 700px at -10% 110%, rgba(41, 81, 60, 0.06), transparent 55%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.07 0 0 0 0 0.08 0 0 0 0 0.12 0 0 0 0.045 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-attachment: fixed;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'ss01', 'cv11';
}

a {
  color: var(--rust);
  text-decoration: none;
  border-bottom: 1px solid rgba(181, 65, 30, 0.25);
  transition: color var(--dur-fast) var(--ease-quick),
              border-color var(--dur-fast) var(--ease-quick);
}
a:hover {
  color: var(--rust-2);
  border-bottom-color: var(--rust-2);
}

::selection {
  background: var(--rust);
  color: var(--card);
}

hr.rule {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: var(--s-6) 0;
}
hr.rule-double {
  border: 0;
  border-top: 3px double var(--rule-dk);
  margin: var(--s-6) 0;
}
hr.rule-dashed {
  border: 0;
  height: 3px;
  background: repeating-linear-gradient(90deg, var(--rule) 0 6px, transparent 6px 12px);
  margin: var(--s-6) 0;
}

/* ------------------------------------------------------------
   typography
   ------------------------------------------------------------ */

.display {
  font-family: var(--ff-display);
  font-weight: 430;
  font-variation-settings: 'opsz' 144, 'SOFT' 20, 'WONK' 0;
  letter-spacing: -0.02em;
  line-height: 0.95;
}
.display-italic {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 380;
  font-variation-settings: 'opsz' 144, 'SOFT' 50;
}

h1.display { font-size: clamp(48px, 7vw, 104px); }
h2.display { font-size: clamp(32px, 4.5vw, 62px); }
h3.display { font-size: clamp(24px, 2.6vw, 36px); }

.eyebrow {
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.eyebrow-rust  { color: var(--rust); }
.eyebrow-green { color: var(--ink-green); }
.eyebrow-ink   { color: var(--ink-2); }

.mono {
  font-family: var(--ff-mono);
  font-variant-numeric: tabular-nums;
}
.tnum { font-variant-numeric: tabular-nums; }
.sc   { font-feature-settings: 'smcp' 1, 'c2sc' 1; letter-spacing: 0.04em; }

.tail-number {
  font-family: var(--ff-mono);
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--ink);
}

/* ------------------------------------------------------------
   layout utilities — stacks, clusters, grids, wraps
   ------------------------------------------------------------ */

.wrap { max-width: 1440px; margin: 0 auto; padding: 0 var(--s-7); }

.stack-1 > * + * { margin-top: var(--s-1); }
.stack-2 > * + * { margin-top: var(--s-2); }
.stack-3 > * + * { margin-top: var(--s-3); }
.stack-4 > * + * { margin-top: var(--s-4); }
.stack-5 > * + * { margin-top: var(--s-5); }
.stack-6 > * + * { margin-top: var(--s-6); }
.stack-7 > * + * { margin-top: var(--s-7); }
.stack-8 > * + * { margin-top: var(--s-8); }

.cluster         { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.cluster-sm      { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.cluster-lg      { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-5); }
.cluster-between { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); }

.grid    { display: grid; gap: var(--s-5); }
.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)); }

@media (max-width: 1200px) {
  .wrap { padding: 0 var(--s-5); }
}

@media (max-width: 900px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-2          { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------
   motion — on-load stagger and ink-bleed
   ------------------------------------------------------------ */

@keyframes riseIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes inkBleed {
  from { opacity: 0; letter-spacing: 0.1em; filter: blur(2px); }
  to   { opacity: 1; letter-spacing: normal; filter: blur(0); }
}

.rise > * {
  opacity: 0;
  animation: riseIn var(--dur-slow) var(--ease-ink) forwards;
}
.rise > *:nth-child(1) { animation-delay: 0.00s; }
.rise > *:nth-child(2) { animation-delay: 0.08s; }
.rise > *:nth-child(3) { animation-delay: 0.16s; }
.rise > *:nth-child(4) { animation-delay: 0.24s; }
.rise > *:nth-child(5) { animation-delay: 0.32s; }
.rise > *:nth-child(6) { animation-delay: 0.40s; }
.rise > *:nth-child(7) { animation-delay: 0.48s; }
.rise > *:nth-child(8) { animation-delay: 0.56s; }

.ink-bleed { animation: inkBleed var(--dur-slow) var(--ease-ink) both; }