/* ============================================================
   MyTCRPlus — NEO-BRUTALIST DESIGN SYSTEM (System 02)
   Tokens: #111 ink / #fff paper / #FF5518 electric orange
   Type: Space Grotesk (display) + IBM Plex Mono (labels)
   Rules: 8px borders, 12px hard offset shadows, NO radius,
          NO gradients, NO glass, NO stock photo sentimentality.
   ============================================================ */

:root {
  --ink: #111111;
  --paper: #ffffff;
  --accent: #ff5518;
  --accent-dark: #d63d05;
  --muted: #6b6560;
  --wash: #f4f1ec;
}

* { -webkit-tap-highlight-color: transparent; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  background: var(--paper);
  color: var(--ink);
  overflow-x: hidden;
}

.mono { font-family: 'IBM Plex Mono', ui-monospace, monospace; }

/* ---------- core brutalist primitives ---------- */

.b-brutal { border: 8px solid var(--ink); }
.b-brutal-sm { border: 4px solid var(--ink); }
.b-brutal-b { border-bottom: 8px solid var(--ink); }
.b-brutal-t { border-top: 8px solid var(--ink); }

.hard-shadow { box-shadow: 12px 12px 0 var(--ink); }
.hard-shadow-sm { box-shadow: 6px 6px 0 var(--ink); }
.hard-shadow-accent { box-shadow: 12px 12px 0 var(--accent); }

.hero-grid {
  background-image:
    linear-gradient(rgba(17,17,17,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17,17,17,0.07) 1px, transparent 1px);
  background-size: 48px 48px;
}

/* ---------- motion ---------- */

.marquee-track { display: flex; width: max-content; animation: nb-marquee 28s linear infinite; }
@keyframes nb-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.sticker { transform: rotate(-6deg); transition: transform .18s cubic-bezier(.4,0,.2,1); }
.sticker:hover { transform: rotate(2deg) scale(1.04); }
.sticker-r { transform: rotate(4deg); }
.sticker-r:hover { transform: rotate(-2deg) scale(1.04); }

.neo-btn { transition: transform .1s cubic-bezier(.4,0,.2,1), box-shadow .1s cubic-bezier(.4,0,.2,1), background .15s, color .15s; }
.neo-btn:hover { transform: translate(-2px,-2px); box-shadow: 8px 8px 0 var(--ink); }
.neo-btn:active { transform: translate(4px,4px); box-shadow: 2px 2px 0 var(--ink); }

.feature-card { transition: transform .18s cubic-bezier(.4,0,.2,1), box-shadow .18s cubic-bezier(.4,0,.2,1); }
.feature-card:hover { transform: translate(-6px,-6px); box-shadow: 16px 16px 0 var(--ink); }

.scanline { position: relative; }
.scanline::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, transparent, transparent 4px, rgba(255,85,24,.08) 4px, rgba(255,85,24,.08) 6px);
}

.terminal { font-family: 'IBM Plex Mono', monospace; background: var(--ink); color: var(--accent); }

.pulse-dot { animation: nb-pulse 1.4s ease-in-out infinite; }
@keyframes nb-pulse { 0%,100% { opacity: 1; } 50% { opacity: .25; } }

/* ---------- article content (scraped, untruncated) ---------- */

.content-brutal { font-size: 1.125rem; line-height: 1.75; }

.content-brutal > h2 {
  font-size: clamp(1.75rem, 3.2vw, 2.5rem);
  font-weight: 700; letter-spacing: -0.03em; line-height: 1.05;
  margin: 3.5rem 0 1.25rem;
  padding-left: 1.25rem; border-left: 12px solid var(--accent);
}
.content-brutal > h3 {
  font-size: clamp(1.3rem, 2.2vw, 1.75rem);
  font-weight: 700; letter-spacing: -0.02em;
  margin: 2.5rem 0 1rem;
  padding-left: 1rem; border-left: 8px solid var(--ink);
}
.content-brutal > h4, .content-brutal > h5, .content-brutal > h6 {
  font-size: 1.2rem; font-weight: 700; margin: 2rem 0 .75rem;
  font-family: 'IBM Plex Mono', monospace; text-transform: uppercase; letter-spacing: .06em;
}
.content-brutal > p { margin: 0 0 1.4rem; }
.content-brutal a { color: var(--accent-dark); text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 3px; font-weight: 600; }
.content-brutal a:hover { background: var(--accent); color: #fff; text-decoration: none; }
.content-brutal strong { font-weight: 700; }
.content-brutal em { font-style: italic; }

.content-brutal ul, .content-brutal ol {
  margin: 0 0 1.75rem; padding: 1rem 1rem 1rem 2.5rem;
  border: 4px solid var(--ink); background: var(--wash);
}
.content-brutal ul { list-style: none; }
.content-brutal ul li { position: relative; margin-bottom: .6rem; padding-left: 1.4rem; }
.content-brutal ul li::before {
  content: ''; position: absolute; left: 0; top: .52em;
  width: .65em; height: .65em; background: var(--accent);
}
.content-brutal ol { list-style: decimal; }
.content-brutal ol li { margin-bottom: .6rem; padding-left: .4rem; }
.content-brutal ol li::marker { font-family: 'IBM Plex Mono', monospace; font-weight: 700; color: var(--accent-dark); }

.content-brutal blockquote {
  margin: 2rem 0; padding: 1.5rem 1.75rem;
  border: 6px solid var(--ink); box-shadow: 10px 10px 0 var(--accent);
  font-size: 1.3rem; font-weight: 600; line-height: 1.5; background: #fff;
}

.content-brutal pre {
  margin: 2rem 0; padding: 1.5rem; overflow-x: auto;
  background: var(--ink); color: var(--accent);
  font-family: 'IBM Plex Mono', monospace; font-size: .95rem;
}

.content-brutal img {
  display: block; max-width: 100%; height: auto;
  border: 8px solid var(--ink); box-shadow: 12px 12px 0 var(--ink);
  margin: 2.5rem auto;
}
.content-brutal figure { margin: 2.5rem 0; }
.content-brutal figcaption { font-family: 'IBM Plex Mono', monospace; font-size: .8rem; text-align: center; margin-top: .75rem; color: var(--muted); }

.table-brutal { width: 100%; border-collapse: collapse; margin: 2rem 0; font-size: 1rem; }
.table-brutal th, .table-brutal td { border: 3px solid var(--ink); padding: .8rem 1rem; text-align: left; vertical-align: top; }
.table-brutal tr:first-child th, .table-brutal thead th { background: var(--ink); color: #fff; font-family: 'IBM Plex Mono', monospace; text-transform: uppercase; font-size: .8rem; letter-spacing: .08em; }
.table-brutal tr:nth-child(even) td { background: var(--wash); }

/* ---------- nav ---------- */

.nav-mega { display: none; }
.nav-mega.open { display: block; }
@media (min-width: 1024px) {
  .nav-item:hover .nav-mega { display: block; }
  .nav-mega { position: absolute; left: 0; top: 100%; z-index: 60; min-width: 560px; }
}
.nav-link { position: relative; }
.nav-link::after {
  content: ''; position: absolute; left: 0; bottom: -4px; height: 5px; width: 0;
  background: var(--accent); transition: width .15s;
}
.nav-link:hover::after { width: 100%; }

/* ---------- misc ---------- */

::selection { background: var(--accent); color: #fff; }

.toc-box a { display: block; padding: .35rem 0; }
.toc-box a:hover { color: var(--accent-dark); transform: translateX(4px); }
.toc-box a { transition: transform .12s, color .12s; }

.skip-link { position: absolute; left: -9999px; top: 0; background: var(--ink); color: #fff; padding: .75rem 1.25rem; z-index: 100; font-family: 'IBM Plex Mono', monospace; }
.skip-link:focus { left: 0; }

@media print {
  nav, footer, .no-print { display: none !important; }
  .hard-shadow, .hard-shadow-sm { box-shadow: none !important; }
}