/* Metriq — Brutalist Tech (Theme D)
   Space Grotesk + Space Mono, terminal motifs, sharp edges, dark hairline rules.
   To re-enable other themes (A: Editorial Serif, B: Modern Technical, C: Editorial Magazine),
   see variations.html (preserves all 4 theme definitions). */

:root {
  --orange: #F37726;
  --orange-deep: #C5571A;
  --orange-soft: #F9B27D;
  --cream: #F5F1E6;        /* Theme D bg */
  --cream-2: #EBE5D2;      /* Theme D bg-2 */
  --paper: #FFFCF2;        /* Theme D paper */
  --ink: #15140F;          /* Theme D ink */
  --ink-2: #2A2820;
  --muted: #6B6357;
  --muted-2: #8A8276;
  --rule: #1A1814;         /* Theme D — DARK rules (brutalist edge) */
  --rule-2: #B7AE94;
  --card-radius: 6px;      /* Sharper radii than Editorial */
  --pill-radius: 6px;
  --btn-radius: 6px;
}

html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  background: var(--cream);
  color: var(--ink);
  font-feature-settings: 'ss01', 'ss02';
}

/* Paper grain — extremely subtle warm noise */
.grain {
  position: relative;
  isolation: isolate;
}
.grain::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.5;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.45  0 0 0 0 0.40  0 0 0 0 0.32  0 0 0 0.06 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 240px 240px;
}

/* Display + accent typography
   Theme D doesn't use a serif — italics are simulated via weight + accent color
   per the variations.html convention. */
.serif { font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 500; letter-spacing: -0.025em; }
.serif-italic { font-family: 'Space Grotesk', system-ui, sans-serif; font-style: normal; font-weight: 500; color: var(--orange); }
.mono { font-family: 'Space Mono', ui-monospace, monospace; }

.eyebrow {
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.eyebrow-orange {
  color: var(--orange);
}

/* Hairline rule — Theme D rules are dark for brutalist sharpness */
.hairline { border-color: var(--rule); }
.hairline-2 { border-color: var(--rule-2); }

/* Pill */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 4px 10px 4px 8px;
  border: 1px solid var(--ink);
  background: var(--paper);
  border-radius: var(--pill-radius);
  font-size: 12px;
  color: var(--ink-2);
  font-family: 'Space Mono', ui-monospace, monospace;
  letter-spacing: 0.02em;
}
.pill-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--orange);
  box-shadow: 0 0 0 3px rgba(243,119,38,0.18);
}

/* Card surface */
.card-paper {
  background: var(--paper);
  border: 1px solid var(--ink);
  border-radius: var(--card-radius);
}

.card-elevated {
  background: var(--paper);
  border: 1px solid var(--ink);
  border-radius: var(--card-radius);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.6) inset,
    0 1px 2px rgba(45, 36, 22, 0.04),
    0 12px 28px -12px rgba(45, 36, 22, 0.18),
    0 36px 60px -32px rgba(45, 36, 22, 0.14);
}

/* CTA */
.cta-primary {
  background: var(--ink);
  color: #fff;
  border-radius: var(--btn-radius);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  letter-spacing: -0.005em;
  transition: transform .15s ease, background .15s ease, box-shadow .2s ease;
  box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 1px 2px rgba(0,0,0,0.2), 0 8px 22px -10px rgba(243,119,38,0.55);
}
.cta-primary:hover { transform: translateY(-1px); background: #000; }

.cta-orange {
  background: var(--orange);
  color: #fff;
  border-radius: var(--btn-radius);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  transition: transform .15s ease, background .15s ease, box-shadow .2s ease;
  box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 6px 16px -8px rgba(243,119,38,0.55);
}
.cta-orange:hover { background: var(--orange-deep); transform: translateY(-1px); }

.cta-ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
  border-radius: var(--btn-radius);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.cta-ghost:hover { border-color: var(--ink); background: var(--paper); }

/* Section number */
.section-number {
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--orange);
  text-transform: uppercase;
}

/* Animated reveal — initial state hidden, animation kicks in */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  animation: rise 0.9s cubic-bezier(0.2, 0.7, 0.1, 1) forwards;
}
.reveal-1 { animation-delay: 0.05s; }
.reveal-2 { animation-delay: 0.18s; }
.reveal-3 { animation-delay: 0.30s; }
.reveal-4 { animation-delay: 0.42s; }
.reveal-5 { animation-delay: 0.54s; }
@keyframes rise {
  to { opacity: 1; transform: translateY(0); }
}

/* Display headline — Theme D uses Space Grotesk for both display and body */
.display {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 0.96;
  color: var(--ink);
}

/* Hand-drawn-ish dotted ring used as decorative motif */
.dotted-ring {
  border: 1px dashed var(--rule-2);
  border-radius: 999px;
}

/* Underline-on-hover for nav */
.nav-link {
  position: relative;
  color: var(--ink-2);
  transition: color .15s ease;
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: -4px;
  height: 1px;
  background: var(--orange);
  transition: right .25s ease;
}
.nav-link:hover { color: var(--ink); }
.nav-link:hover::after { right: 0; }
.nav-link.active { color: var(--ink); }
.nav-link.active::after { right: 0; }

/* Tick / cross icons in compare */
.cell-yes { color: var(--orange); font-weight: 600; }
.cell-no  { color: var(--muted-2); }

/* Notebook chrome cell numbers */
.cell-num {
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 11px;
  color: var(--muted-2);
  white-space: nowrap;
}

/* Code block */
pre.codeblock {
  background: var(--ink);
  color: #f5efe6;
  border-radius: var(--card-radius);
  padding: 18px 20px;
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 14px;
  line-height: 1.6;
  overflow-x: auto;
  border: 1px solid #2a241d;
  position: relative;
}

/* Section dividers — center marker */
.center-mark {
  display: inline-flex;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 1px dashed var(--rule-2);
  background: var(--cream);
  position: relative;
}
.center-mark::after {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 999px;
  background: var(--orange);
}

/* Subtle column rule grid background (graph-paper feel) — used selectively */
.ruled {
  background-image:
    linear-gradient(to right, rgba(110,90,60,0.05) 1px, transparent 1px);
  background-size: 80px 100%;
}

/* Marquee for model logos — pause on hover */
.scroller { -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.scroller-track { display: flex; gap: 56px; width: max-content; animation: scroll 38s linear infinite; }
.scroller:hover .scroller-track { animation-play-state: paused; }
@keyframes scroll {
  to { transform: translateX(-50%); }
}

/* Heatmap cell (notebook output) — Theme D = no rounding for brutalist edge */
.heat { border-radius: 0; }

/* In-page tab transitions */
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }

/* Numbers (display) */
.tabular { font-variant-numeric: tabular-nums; }

/* Side scroll hint */
.scroll-hint::after {
  content: "↓";
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 10px;
  margin-left: 6px;
  opacity: 0.5;
}