/* ============================================================
   Just Web Academy — shared foundation
   Brand-derived OKLCH tokens, type scale, surfaces, motion.
   ============================================================ */

:root {
  /* Ground: Just Web Agency deep blue, taken down for long reading */
  --ink-980: oklch(14.5% 0.098 285);
  --ink-950: oklch(16.5% 0.092 285);
  --ink-900: oklch(21%   0.100 285);
  --ink-850: oklch(25%   0.094 284);
  --ink-800: oklch(29%   0.086 284);
  --ink-700: oklch(36%   0.076 284);

  /* Text on dark ground */
  --text-hi: oklch(96.5% 0.012 280);
  --text-md: oklch(81%   0.026 280);
  --text-lo: oklch(73%   0.030 282);

  /* Semantic accents — each one means something in this material */
  --signal: oklch(80% 0.135 216);   /* cyan   — the DNS lookup path   */
  --infra:  oklch(62% 0.235 292);   /* purple — infrastructure / owners */
  --alarm:  oklch(66% 0.202 25);    /* red    — broken, misconfigured */
  /* the same red lifted just enough to clear AA as small text on its own tinted panels */
  --alarm-ink: oklch(74% 0.168 27);
  --human:  oklch(80% 0.115 58);    /* orange — the person doing the work */
  --paper:  oklch(96.5% 0.013 92);  /* cream  — light panels          */

  --font-display: 'Montserrat', sans-serif;
  --font-body: 'Varta', sans-serif;

  /* Layered, tinted shadows — never a flat grey blur */
  --lift-1:
    0 1px 0 0 oklch(100% 0 0 / 0.055) inset,
    0 1px 2px -1px oklch(12% 0.09 285 / 0.7),
    0 10px 26px -14px oklch(12% 0.09 285 / 0.85);
  --lift-2:
    0 1px 0 0 oklch(100% 0 0 / 0.07) inset,
    0 2px 5px -2px oklch(12% 0.09 285 / 0.75),
    0 26px 56px -22px oklch(10% 0.09 285 / 0.9);

  --hairline: oklch(100% 0 0 / 0.11);
  --hairline-soft: oklch(100% 0 0 / 0.065);

  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;

  --shell: 1360px;
  --ease: cubic-bezier(0.22, 0.61, 0.28, 1);

  /* Filmic noise, inlined so there is no extra request */
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }

body {
  background-color: var(--ink-950);
  color: var(--text-md);
  font-family: var(--font-body);
  font-size: clamp(16px, 0.55vw + 14.2px, 18px);
  line-height: 1.7;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-variant-numeric: tabular-nums;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  color: var(--text-hi);
  letter-spacing: -0.03em;
  line-height: 1.06;
  margin: 0;
  font-weight: 700;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }

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

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

/* ---------- Atmosphere: multi-layer radial ground + grain ---------- */

.ground {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(112% 78% at 5% -8%,  oklch(30% 0.115 286 / 0.60) 0%, transparent 55%),
    radial-gradient(92%  74% at 98% 2%,  oklch(33% 0.075 228 / 0.42) 0%, transparent 60%),
    radial-gradient(138% 94% at 52% 112%, oklch(19% 0.088 288 / 0.92) 0%, transparent 64%);
}
.ground::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--noise);
  background-size: 140px 140px;
  opacity: 0.55;
  mix-blend-mode: overlay;
}

/* ---------- The machine voice: uppercase, tracked, aligned ----------
   Stands in for a monospace face. Brand type rule allows only
   Montserrat + Varta, so the technical register is built from
   tracking, weight and tabular figures instead.                       */

.mono {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.72em;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
}

.eyebrow {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--signal);
  display: flex;
  align-items: center;
  gap: 0.7em;
}
.eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  background: currentColor;
  flex: none;
}

/* A record value — the literal strings people paste into DNS panels */
.value {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--text-hi);
  background: oklch(100% 0 0 / 0.05);
  border: 1px solid var(--hairline-soft);
  border-radius: var(--r-sm);
  padding: 0.18em 0.5em;
  display: inline-block;
  white-space: nowrap;
}
.value--signal { color: var(--signal); border-color: oklch(80% 0.135 216 / 0.3); }
.value--infra  { color: oklch(74% 0.16 292); border-color: oklch(62% 0.235 292 / 0.36); }
.value--human  { color: var(--human); border-color: oklch(80% 0.115 58 / 0.3); }

/* ---------- Buttons ---------- */

.btn {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.78em 1.3em;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  background: oklch(100% 0 0 / 0.05);
  color: var(--text-hi);
  cursor: pointer;
  transition: transform 0.22s var(--ease), opacity 0.22s var(--ease),
              background-color 0.22s var(--ease), border-color 0.22s var(--ease);
}
.btn:hover { transform: translateY(-2px); background: oklch(100% 0 0 / 0.1); border-color: oklch(100% 0 0 / 0.2); }
.btn:active { transform: translateY(0) scale(0.985); }

.btn--go {
  background: linear-gradient(160deg, oklch(66% 0.24 292), oklch(52% 0.235 288));
  border-color: oklch(74% 0.2 292 / 0.55);
  color: oklch(99% 0.005 280);
  box-shadow: var(--lift-1);
}
.btn--go:hover { background: linear-gradient(160deg, oklch(70% 0.24 292), oklch(56% 0.235 288)); }

/* ---------- Motion policy ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}