/* ==========================================================================
   Mind Wall — base: tokens, reset, type, utilities
   Palette is strictly black / white / lime (plus tints of those three).
   Rule of thumb: lime is a FILL behind ink, or ink-surface text — never
   lime text or lime marks on white (1.18:1 contrast).
   ========================================================================== */

/* A condensed heavy grotesk from the OS. Falls back gracefully. */
@font-face {
  font-family: "MW Display";
  src: local("HelveticaNeue-CondensedBlack"), local("Helvetica Neue Condensed Black"),
       local("AvenirNextCondensed-Heavy"), local("Avenir Next Condensed Heavy"),
       local("ArialNarrow-Bold"), local("Arial Narrow Bold"),
       local("Impact");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  /* Colour */
  --ink: #0b0b0b;
  --ink-2: #151515;
  --ink-3: #222220;
  --ink-4: #2e2e2b;
  --paper: #ffffff;
  --paper-2: #f4f4f2;
  --paper-3: #e9e9e6;
  --lime: #c8ff3d;
  --lime-deep: #a9e11d;
  --lime-wash: #f3ffd6;

  --text-2: #5c5c58;        /* secondary on white — 6.7:1 */
  --text-3: #8a8a85;        /* muted on white — non-essential only */
  --on-ink: #ffffff;
  --on-ink-2: #a3a39e;      /* secondary on ink — 7.8:1 */
  --on-ink-3: #8a8a85;      /* muted on ink — 5.7:1 */

  --line: rgba(11, 11, 11, .12);
  --line-strong: rgba(11, 11, 11, .24);
  --line-ink: rgba(255, 255, 255, .14);
  --line-ink-strong: rgba(255, 255, 255, .28);

  /* Shape */
  --bw: 2px;
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 26px;
  --r-xl: 34px;
  --r-pill: 999px;

  --shadow-sm: 2px 2px 0 var(--ink);
  --shadow: 4px 4px 0 var(--ink);
  --shadow-lg: 8px 8px 0 var(--ink);

  /* Type */
  --font-display: "MW Display", "Helvetica Neue", "Arial Narrow", Impact, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  /* Motion — --ease-spring* are replaced at runtime with true spring curves (CSS linear()) */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in: cubic-bezier(.7, 0, .84, 0);
  --ease-in-out: cubic-bezier(.77, 0, .18, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --ease-spring-soft: cubic-bezier(.3, 1.35, .5, 1);
  --dur-spring: 560ms;

  /* Layout */
  --strip-h: 34px;
  --bar-h: 68px;
  --header-h: calc(var(--strip-h) + var(--bar-h));
  --tabbar-h: 0px;
  --gutter: clamp(16px, 3vw, 40px);

  /* Textures */
  --bricks-paper: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='44'%3E%3Cpath d='M0 .5h88M0 22.5h88M.5 0v22M44.5 22v22' fill='none' stroke='%230b0b0b' stroke-opacity='.055'/%3E%3C/svg%3E");
  --bricks-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='44'%3E%3Cpath d='M0 .5h88M0 22.5h88M.5 0v22M44.5 22v22' fill='none' stroke='%23ffffff' stroke-opacity='.06'/%3E%3C/svg%3E");
  --bricks-lime: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='44'%3E%3Cpath d='M0 .5h88M0 22.5h88M.5 0v22M44.5 22v22' fill='none' stroke='%230b0b0b' stroke-opacity='.08'/%3E%3C/svg%3E");

  color-scheme: light;
}

/* -------------------------------------------------------------------------- */
/* Reset                                                                       */
/* -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow: hidden;
}
h1, h2, h3, h4, h5, p, figure, blockquote, ol, ul, dl, dd { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
img, video { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; }
button:disabled { cursor: not-allowed; }
input, textarea, select { margin: 0; }
textarea { resize: none; }
table { border-collapse: collapse; }
[hidden] { display: none !important; }
svg { flex: none; }
::selection { background: var(--lime); color: var(--ink); }

/* Scrollbars — thin ink */
* { scrollbar-width: thin; scrollbar-color: rgba(11, 11, 11, .55) transparent; }
.on-ink, .on-ink * { scrollbar-color: rgba(255, 255, 255, .35) transparent; }

/* Focus — ink ring on light surfaces, lime ring on ink surfaces */
:focus { outline: none; }
:focus-visible { outline: 2.5px solid var(--ink); outline-offset: 3px; }
.on-ink :focus-visible, .on-ink:focus-visible { outline-color: var(--lime); }

.skip-link {
  position: fixed; left: 12px; top: 12px; z-index: 1000;
  padding: 10px 16px; border-radius: var(--r-pill);
  background: var(--lime); color: var(--ink); font-weight: 700;
  border: var(--bw) solid var(--ink);
  transform: translateY(-160%);
  transition: transform .25s var(--ease-out);
}
.skip-link:focus { transform: translateY(0); }

.noscript {
  position: fixed; inset: 0; display: grid; place-items: center;
  background: var(--ink); color: var(--lime); font: 700 20px var(--font-body);
  padding: 24px; text-align: center;
}

/* -------------------------------------------------------------------------- */
/* Type                                                                        */
/* -------------------------------------------------------------------------- */
.display {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  line-height: .88;
  letter-spacing: -.005em;
  font-stretch: condensed;
}
.h1 { font-size: clamp(52px, 7.4vw, 112px); }
.h2 { font-size: clamp(40px, 5vw, 72px); }
.h3 { font-size: clamp(28px, 2.6vw, 38px); }
.h4 { font-size: 24px; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font: 600 12px/1.2 var(--font-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.lead { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.5; }
.muted { color: var(--text-2); }
.on-ink .muted { color: var(--on-ink-2); }
.mono { font-family: var(--font-mono); }
.small { font-size: 13.5px; }
.tiny { font-size: 12px; }
.strong { font-weight: 700; }
.nowrap { white-space: nowrap; }
.balance { text-wrap: balance; }
.pretty { text-wrap: pretty; }

/* Highlighter mark — draws in when its ancestor gets .is-in (or immediately with .is-on) */
.mark {
  --mark-size: 0%;
  background-image: linear-gradient(var(--lime), var(--lime));
  background-repeat: no-repeat;
  background-position: 0 88%;
  background-size: var(--mark-size) 78%;
  padding: 0 .12em;
  margin: 0 -.06em;
  border-radius: .12em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  transition: background-size 1s var(--ease-out);
  transition-delay: var(--mark-delay, 0s);
}
.is-in .mark, .mark.is-on { --mark-size: 100%; }
.on-ink .mark { color: var(--ink); }

/* -------------------------------------------------------------------------- */
/* 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;
}
.on-ink { background: var(--ink); color: var(--on-ink); }
.on-lime { background: var(--lime); color: var(--ink); }
.bricks { background-image: var(--bricks-paper); }
.on-ink.bricks, .bricks-ink { background-image: var(--bricks-ink); }
.row { display: flex; align-items: center; gap: 12px; }
.row-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.stack { display: grid; gap: 16px; }
.grow { flex: 1 1 auto; min-width: 0; }
.spacer { flex: 1; }
.center { text-align: center; }
.wrap { width: min(1240px, 100%); margin-inline: auto; padding-inline: var(--gutter); }

.live-dot {
  position: relative; display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--lime); flex: none;
  box-shadow: 0 0 0 1.5px var(--ink);
}
.live-dot::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 1.5px solid var(--lime);
  animation: live-ping 2.2s var(--ease-out) infinite;
}
.on-ink .live-dot { box-shadow: none; }
@keyframes live-ping {
  0% { transform: scale(.4); opacity: 1; }
  80%, 100% { transform: scale(1.6); opacity: 0; }
}

/* Reduced motion — CSS-driven loops stop; JS motion checks MW.motion.reduced() */
html.reduce-motion *, html.reduce-motion *::before, html.reduce-motion *::after {
  animation-duration: .001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .001ms !important;
  transition-delay: 0ms !important;
  scroll-behavior: auto !important;
}
html.reduce-motion .mark { transition-duration: .001ms; }