@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=IBM+Plex+Mono:ital,wght@0,400;0,600;1,600&family=Space+Grotesk:wght@400;600;700&display=swap');

:root {
  --ink: #151515;
  --paper: #f3f0df;
  --paper-2: #fffdf0;
  --yellow: #f4d40b;
  --red: #f05248;
  --cyan: #24d9d1;
  --blue: #1e50d8;
  --muted: #aba99f;
  --border: 3px solid var(--ink);
  --shadow: 7px 7px 0 var(--ink);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-width: 320px;
  color: var(--ink);
  font-family: "Space Grotesk", Arial, sans-serif;
  background-color: var(--cyan);
  background-image:
    linear-gradient(rgba(255,255,255,.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.16) 1px, transparent 1px),
    radial-gradient(circle at 80% 0%, #a8fff2 0, transparent 29%);
  background-size: 24px 24px, 24px 24px, auto;
}

a { color: inherit; }
.skip-link { position: fixed; left: 1rem; top: -5rem; z-index: 999; background: var(--paper); padding: .75rem 1rem; border: var(--border); font-weight: 700; }
.skip-link:focus { top: 1rem; }
.page-shell { width: min(1500px, calc(100% - 32px)); margin: 20px auto; }

.site-header {
  min-height: 96px; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 14px 22px; border: var(--border); background: var(--paper); box-shadow: var(--shadow);
  position: relative; overflow: hidden;
}
.site-header::after { content: ""; position: absolute; width: 260px; height: 160px; right: 20%; top: -90px; transform: rotate(-18deg); background: var(--yellow); border: var(--border); }
.brand { display: flex; align-items: center; gap: 14px; text-decoration: none; z-index: 1; }
.brand-mark { display: grid; place-items: center; width: 54px; aspect-ratio: 1; background: var(--ink); color: var(--yellow); font: 1rem "IBM Plex Mono", monospace; transform: rotate(-5deg); }
.brand-title { font: clamp(1.9rem, 4vw, 3.7rem)/.8 "Archivo Black", Impact, sans-serif; letter-spacing: -.09em; font-style: italic; }
.brand-title span { color: var(--red); }
.header-status { z-index: 1; font: 600 .72rem "IBM Plex Mono", monospace; background: var(--ink); color: white; padding: 10px 14px; }
.status-light { display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }

.ticker { height: 40px; margin: 12px 0 16px; display: flex; overflow: hidden; border: var(--border); background: var(--ink); color: var(--yellow); font: 600 .76rem/34px "IBM Plex Mono", monospace; }
.ticker-label { flex: none; padding: 0 16px; color: var(--ink); background: var(--red); border-right: var(--border); }
.ticker-track { overflow: hidden; white-space: nowrap; }
.ticker-track span { display: inline-block; min-width: 100%; padding-left: 100%; animation: ticker 24s linear infinite; }
@keyframes ticker { to { transform: translateX(-100%); } }

.three-column-layout { display: grid; grid-template-columns: minmax(190px, .72fr) minmax(420px, 2.15fr) minmax(250px, 1fr); gap: 16px; align-items: start; }
.panel { background: var(--paper); border: var(--border); box-shadow: 5px 5px 0 var(--ink); }
.eyebrow { margin: 0 0 9px; color: #56564f; font: 600 .68rem "IBM Plex Mono", monospace; letter-spacing: .09em; }

.left-rail { position: sticky; top: 16px; padding: 18px 14px; }
.left-rail nav { display: grid; gap: 8px; }
.nav-link { display: flex; align-items: center; gap: 10px; padding: 11px 10px; border: 2px solid var(--ink); text-decoration: none; font: 700 .79rem "IBM Plex Mono", monospace; background: var(--paper-2); box-shadow: 3px 3px 0 var(--ink); transition: .12s ease; }
.nav-link span { color: var(--red); }
.nav-link.active, .nav-link:hover, .nav-link:focus-visible { background: var(--yellow); transform: translate(3px, 3px); box-shadow: 0 0; outline: none; }
.nav-link.external::after { content: "↗"; margin-left: auto; }
.rail-module { margin-top: 24px; padding: 12px; background: var(--ink); color: white; }
.module-label { margin: 0 0 8px; color: var(--yellow); font: .6rem "IBM Plex Mono", monospace; }
.rail-module strong { font: 1.1rem "Archivo Black", sans-serif; }
.progress { height: 9px; margin: 10px 0; border: 1px solid white; }
.progress span { display: block; width: 44%; height: 100%; background: var(--cyan); }
.rail-module small, .serial { font: .56rem/1.5 "IBM Plex Mono", monospace; }
.warning-stripes { height: 12px; margin-top: 22px; background: repeating-linear-gradient(-45deg, var(--yellow) 0 7px, var(--ink) 7px 14px); }
.serial { color: #62625d; }

.main-feed, .right-rail { display: grid; gap: 16px; }
.hero-card { min-height: 360px; padding: clamp(24px, 5vw, 58px); position: relative; overflow: hidden; background: var(--yellow); }
.hero-card::before { content: ""; position: absolute; width: 270px; height: 270px; border: 35px solid var(--red); border-radius: 50%; right: -95px; bottom: -105px; }
.hero-card::after { content: ""; position: absolute; left: 0; right: 0; bottom: 20px; height: 12px; background: repeating-linear-gradient(90deg, var(--ink) 0 28px, transparent 28px 38px); opacity: .17; }
.hero-copy { position: relative; z-index: 1; max-width: 630px; }
.hero-card h1 { margin: 0; font: clamp(2.7rem, 6vw, 5.7rem)/.84 "Archivo Black", Impact, sans-serif; letter-spacing: -.075em; text-transform: uppercase; }
.hero-card h1 em { color: var(--red); text-shadow: 3px 3px 0 var(--ink); }
.hero-card p:not(.eyebrow) { max-width: 470px; font-weight: 700; }
.cta { display: inline-flex; gap: 30px; align-items: center; margin-top: 12px; padding: 12px 15px; background: var(--ink); color: white; text-decoration: none; font: 600 .77rem "IBM Plex Mono", monospace; box-shadow: 4px 4px 0 var(--red); }
.cta:hover, .cta:focus-visible { color: var(--yellow); }
.hero-emblem { position: absolute; right: 28px; top: 22px; display: grid; place-items: center; width: 82px; height: 82px; background: var(--ink); color: white; transform: rotate(9deg); clip-path: polygon(50% 0, 62% 18%, 85% 15%, 82% 39%, 100% 50%, 82% 62%, 85% 85%, 61% 82%, 50% 100%, 38% 82%, 15% 85%, 18% 62%, 0 50%, 18% 38%, 15% 15%, 39% 18%); }
.hero-emblem span { color: var(--yellow); font-size: 1.5rem; }
.hero-emblem b { font: .6rem "IBM Plex Mono", monospace; }

.content-card { padding-bottom: 30px; }
.section-heading { display: flex; align-items: stretch; border-bottom: var(--border); background: var(--paper-2); }
.section-number { min-width: 76px; display: grid; place-items: center; background: var(--red); border-right: var(--border); font: 2rem "Archivo Black", sans-serif; }
.section-heading div { padding: 10px 16px; }
.section-heading p { margin: 0; color: #666; font: .6rem "IBM Plex Mono", monospace; }
.section-heading h2 { margin: 0; font: 1.9rem/.95 "Archivo Black", sans-serif; font-style: italic; }
.prose { padding: 18px 26px 0; font-size: .98rem; line-height: 1.65; }
.prose p:first-child::first-letter { float: left; margin: 5px 8px 0 0; padding: 4px 8px; background: var(--yellow); border: 2px solid var(--ink); font: 2.3rem/.9 "Archivo Black", sans-serif; }
.prose strong { background: var(--yellow); padding: 0 3px; }
blockquote { margin: 24px 26px 0; padding: 16px 20px; border-left: 10px solid var(--red); background: var(--ink); color: white; font: italic clamp(1.2rem, 2vw, 1.8rem)/1.1 "Archivo Black", sans-serif; }
.timeline { list-style: none; margin: 0; padding: 22px 26px 4px; }
.timeline li { position: relative; margin-left: 7px; padding: 0 0 24px 28px; border-left: 3px solid var(--ink); }
.timeline li::before { content: ""; position: absolute; left: -8px; top: 0; width: 11px; height: 11px; background: var(--yellow); border: 2px solid var(--ink); transform: rotate(45deg); }
.timeline time { display: inline-block; padding: 4px 8px; background: var(--ink); color: var(--yellow); font: 600 .72rem "IBM Plex Mono", monospace; }
.timeline p { line-height: 1.55; }
.timeline small { color: #666; }

.profile-card { padding: 15px; background: var(--ink); color: white; }
.profile-top { display: flex; gap: 12px; align-items: center; }
.profile-avatar { width: 64px; height: 64px; display: grid; place-items: center; flex: none; background: var(--red); color: var(--ink); border: 2px solid white; font: 2.4rem "Archivo Black", sans-serif; transform: rotate(-3deg); }
.profile-card h2 { margin: 0; color: var(--yellow); font: italic 1.7rem "Archivo Black", sans-serif; }
.profile-card .eyebrow { color: var(--cyan); }
.profile-top div > span { font: .58rem "IBM Plex Mono", monospace; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); margin: 16px 0 0; border: 1px solid #777; }
.stats div { padding: 8px; border-right: 1px solid #777; }
.stats div:last-child { border: 0; }
.stats dt { color: var(--muted); font: .52rem "IBM Plex Mono", monospace; }
.stats dd { margin: 3px 0 0; font: 600 .7rem "IBM Plex Mono", monospace; }

.loadout-card, .interests-card { padding-bottom: 18px; }
.mini-heading { display: flex; align-items: center; gap: 10px; border-bottom: var(--border); background: var(--yellow); }
.mini-heading span { align-self: stretch; display: grid; place-items: center; padding: 10px; background: var(--red); border-right: var(--border); font: 1rem "Archivo Black", sans-serif; }
.mini-heading h2 { margin: 0; font: italic 1.25rem "Archivo Black", sans-serif; }
.loadout-card h3, .interests-card h3 { margin: 18px 16px 8px; font: 600 .65rem "IBM Plex Mono", monospace; color: #65655f; }
.tag-list, .gear-list { list-style: none; margin: 0; padding: 0 16px; }
.tag-list { display: flex; flex-wrap: wrap; gap: 5px; }
.tag-list li { padding: 5px 7px; background: var(--ink); color: white; font: .57rem "IBM Plex Mono", monospace; }
.gear-list li { display: flex; align-items: center; gap: 8px; padding: 9px 0; border-bottom: 1px dashed #96968e; font-size: .74rem; font-weight: 700; }
.gear-list span { color: var(--red); font: 600 .6rem "IBM Plex Mono", monospace; }
.note { margin: 15px 16px 0; padding: 9px; border: 2px solid var(--ink); background: var(--paper-2); font: .65rem/1.45 "IBM Plex Mono", monospace; }
.interests-card p { margin: 0 16px; font-size: .76rem; line-height: 1.5; }

footer { display: flex; justify-content: space-between; gap: 1rem; margin-top: 18px; padding: 12px 16px; border: var(--border); background: var(--ink); color: white; font: .63rem "IBM Plex Mono", monospace; }

@media (max-width: 1050px) {
  .three-column-layout { grid-template-columns: 190px 1fr; }
  .right-rail { grid-column: 1 / -1; grid-template-columns: repeat(3, 1fr); }
  .left-rail { grid-row: 1; }
  .main-feed { grid-column: 2; grid-row: 1; }
}

@media (max-width: 720px) {
  .page-shell { width: min(100% - 20px, 600px); margin-top: 10px; }
  .site-header { min-height: 76px; padding: 12px; }
  .header-status, .site-header::after, .hero-emblem { display: none; }
  .brand-title { font-size: clamp(1.75rem, 10vw, 2.8rem); }
  .ticker-label { display: none; }
  .three-column-layout { display: flex; flex-direction: column; }
  .left-rail { position: static; width: 100%; }
  .left-rail nav { grid-template-columns: repeat(2, 1fr); }
  .rail-module, .warning-stripes, .serial { display: none; }
  .main-feed, .right-rail { width: 100%; }
  .right-rail { display: grid; grid-template-columns: 1fr; }
  .hero-card { min-height: 330px; padding: 32px 20px; }
  .hero-card h1 { font-size: clamp(2.6rem, 14vw, 4rem); }
  .prose { padding-inline: 18px; }
  blockquote { margin-inline: 18px; }
  footer { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .ticker-track span { padding-left: 1rem; }
}