:root {
  --void: #0a0909;
  --plate: #131212;
  --plate-hover: #191818;
  --rule: #2c2a29;
  --rule-subtle: #1e1d1c;
  --mark: #ffffff;
  --bone: #ede6e1;
  --ash: #8e8380;
  --red: #ff3344;
  --acid: #ff3344;
  --acid-glow: rgba(255, 51, 68, 0.45);
  --acid-dim: rgba(255, 51, 68, 0.15);
  --dot: rgb(237 230 225 / 8%);
  --sans: "Archivo", "Arial Narrow", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  --mono: "Martian Mono", ui-monospace, Menlo, Monaco, Consolas, monospace;
  --edge: 24px;
  --snap: cubic-bezier(.3, 1.35, .5, 1);
  --settle: cubic-bezier(.16, 1, .3, 1);
  color-scheme: dark;
}

*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  min-height: 100%;
  background-color: var(--void);
  color: var(--bone);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: calc(var(--edge) + 20px) var(--edge) var(--edge);
}

.site-container {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  flex: 1;
}

/* ==========================================================================
   Keyframe Animations (AstraLabs Motion System)
   ========================================================================== */

/* Fluorescent tube strike & ignition */
@keyframes al-light {
  0% {
    opacity: 0.15;
    filter: brightness(0.3);
  }
  6% {
    opacity: 0.9;
    filter: brightness(1.6) drop-shadow(0 0 8px var(--acid-glow));
  }
  11% {
    opacity: 0.25;
    filter: brightness(0.5);
  }
  18% {
    opacity: 1;
    filter: brightness(1.8) drop-shadow(0 0 14px var(--acid-glow));
  }
  24% {
    opacity: 0.5;
    filter: brightness(0.7);
  }
  35% {
    opacity: 0.95;
    filter: brightness(1.3);
  }
  48% {
    opacity: 0.8;
    filter: brightness(0.95);
  }
  65% {
    opacity: 1;
    filter: brightness(1.1) drop-shadow(0 0 4px var(--acid-glow));
  }
  100% {
    opacity: 1;
    filter: brightness(1);
  }
}

/* Shutter wipe reveal */
@keyframes al-wipe {
  0% {
    clip-path: inset(0 100% 0 0);
    opacity: 0.4;
  }
  100% {
    clip-path: inset(0 0 0 0);
    opacity: 1;
  }
}

/* Upward stagger entrance */
@keyframes al-slide-up {
  0% {
    opacity: 0;
    transform: translateY(14px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Pulsing radar / active telemetry beacon */
@keyframes al-pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 0 0 0 var(--acid-glow);
  }
  50% {
    opacity: 0.4;
    transform: scale(0.9);
    box-shadow: 0 0 6px 2px var(--acid-dim);
  }
}

/* Animation utilities */
.al-light {
  animation: al-light 600ms var(--snap) forwards;
}

.al-enter {
  animation: al-slide-up 500ms var(--settle) calc(var(--al-i, 0) * 80ms) backwards;
}

.status-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: var(--acid);
  margin-right: 8px;
  animation: al-pulse 2.2s infinite ease-in-out;
  box-shadow: 0 0 6px var(--acid-glow);
  vertical-align: middle;
}

/* ==========================================================================
   Registration Marks & Technical Decor
   ========================================================================== */
.reg {
  position: fixed;
  width: 18px;
  height: 18px;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.75;
  transition: opacity 250ms ease, transform 250ms var(--snap);
}

.reg:hover {
  opacity: 1;
  transform: scale(1.15);
}

.reg::before, .reg::after {
  content: "";
  position: absolute;
  background: var(--acid);
}
.reg::before {
  left: 50%;
  top: 0;
  width: 1px;
  height: 100%;
  transform: translateX(-50%);
}
.reg::after {
  top: 50%;
  left: 0;
  height: 1px;
  width: 100%;
  transform: translateY(-50%);
}
.reg-tl { top: var(--edge); left: var(--edge); }
.reg-br { bottom: var(--edge); right: var(--edge); }

/* Typography & Labels */
.label, .al-label {
  font-family: var(--mono);
  font-variation-settings: "wdth" 85;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ash);
}

.label-acid {
  color: var(--acid);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--mark);
  font-family: var(--sans);
  font-weight: 800;
  font-variation-settings: "wdth" 110;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin-top: 0;
}

h1 { font-size: 2.2rem; line-height: 1.15; }
h2 { font-size: 1.6rem; line-height: 1.25; margin-bottom: 1rem; }
h3 { font-size: 1.3rem; line-height: 1.3; }
h4 { font-size: 1.1rem; line-height: 1.35; }

p {
  margin: 0 0 1.2rem;
  color: var(--bone);
}

a {
  color: var(--bone);
  text-decoration: none;
  transition: color 180ms ease, border-color 180ms ease;
}

a:hover {
  color: var(--acid);
}

.text-acid { color: var(--acid); }
.text-ash { color: var(--ash); }
.text-mark { color: var(--mark); }
.text-bone { color: var(--bone); }

/* Header & Nav */
header.site-header {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 24px;
  animation: al-slide-up 400ms var(--settle) backwards;
}

@media (min-width: 768px) {
  header.site-header {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }
}

.brand-title {
  font-family: var(--mono);
  font-size: clamp(0.78rem, 3.8vw, 1.25rem);
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--mark);
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  max-width: 100%;
  transition: color 200ms ease;
  user-select: none;
}

.brand-title:hover {
  color: var(--mark);
}

.brand-title .brand-text-a,
.brand-title .brand-text-b {
  white-space: nowrap;
}

.brand-bracket {
  color: var(--acid);
  font-weight: 700;
  display: inline-block;
  flex-shrink: 0;
  transition: transform 220ms var(--snap);
}

.brand-lb { margin-right: 3px; }
.brand-rb { margin-left: 3px; }

.brand-title .brand-slash {
  color: var(--acid);
  margin: 0 6px;
  font-weight: 700;
  display: inline-block;
  flex-shrink: 0;
}

@media (max-width: 480px) {
  :root {
    --edge: 16px;
  }
  .brand-title {
    letter-spacing: 0.03em;
  }
  .brand-title .brand-slash {
    margin: 0 4px;
  }
  .brand-lb { margin-right: 2px; }
  .brand-rb { margin-left: 2px; }
}

.brand-subtitle {
  font-family: var(--mono);
  font-variation-settings: "wdth" 85;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ash);
  margin-top: 5px;
  min-height: 1.4em;
}

/* Boot states */
.booting .brand-text-a,
.booting .brand-text-b {
  visibility: hidden;
}

.booting-hud .reg {
  visibility: hidden;
}

/* Typing cursor */
.cur {
  position: relative;
  display: inline-block;
  width: 0;
  height: 1em;
  vertical-align: baseline;
}
.cur::after {
  content: "";
  position: absolute;
  left: 1px;
  top: 1px;
  width: 6px;
  height: 1.1em;
  background: var(--acid);
}
.rest {
  visibility: hidden;
}

nav.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

nav.site-nav a {
  font-family: var(--mono);
  font-variation-settings: "wdth" 85;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ash);
  padding: 6px 0;
  border-bottom: 1px solid transparent;
  transition: all 180ms var(--snap);
  position: relative;
}

nav.site-nav a:hover, nav.site-nav a.active {
  color: var(--acid);
  border-bottom-color: var(--acid);
  transform: translateY(-1px);
}

/* Measurement Rule */
.mrule {
  position: relative;
  height: 9px;
  margin-bottom: 36px;
  border-bottom: 1px solid var(--rule);
}

.mrule::before, .mrule::after {
  content: "";
  position: absolute;
  bottom: -1px;
  width: 1px;
  height: 9px;
  background: var(--ash);
}
.mrule::before { left: 0; }
.mrule::after { right: 0; }

/* Sections & Layouts */
section.site-section {
  margin-bottom: 48px;
}

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 10px;
  margin-bottom: 24px;
}

.section-title {
  font-family: var(--mono);
  font-variation-settings: "wdth" 85;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mark);
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.section-title::before {
  content: "//";
  color: var(--acid);
}

/* Bio Plate */
.bio-card {
  background: var(--plate);
  border: 1px solid var(--rule);
  padding: 24px 28px;
  margin-bottom: 36px;
  position: relative;
  transition: border-color 200ms ease;
}

.bio-card:hover {
  border-color: var(--rule-subtle);
}

.bio-card p:last-child {
  margin-bottom: 0;
}

.bio-card strong {
  color: var(--mark);
}

.bio-creds-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
}

@media (min-width: 640px) {
  .bio-creds-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.bio-subtitle {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--acid);
  margin-bottom: 12px;
}

.bio-list {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.bio-list li {
  font-size: 13.5px;
  color: var(--bone);
  margin-bottom: 8px;
  padding-left: 14px;
  position: relative;
  line-height: 1.45;
}

.bio-list li::before {
  content: "-";
  position: absolute;
  left: 0;
  color: var(--ash);
}

.bio-list li strong {
  color: var(--mark);
}

/* Grid & Project Cards */
.grid-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

@media (min-width: 768px) {
  .grid-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

.card-item {
  background: var(--plate);
  border: 1px solid var(--rule);
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 220ms var(--snap), border-color 220ms ease, background 220ms ease, box-shadow 220ms ease;
  position: relative;
  text-decoration: none;
  animation: al-slide-up 450ms var(--settle) calc(var(--al-i, 0) * 60ms) backwards;
}

.card-item:hover {
  transform: translateY(-3px);
  border-color: var(--acid);
  background: var(--plate-hover);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), 0 0 10px rgba(255, 51, 68, 0.12);
}

.card-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 12px;
}

.card-index {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .15em;
  color: var(--ash);
  transition: color 200ms ease;
}

.card-item:hover .card-index {
  color: var(--acid);
}

.card-title {
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 700;
  color: var(--mark);
  margin-bottom: 10px;
  letter-spacing: 0.02em;
  transition: color 200ms ease;
}

.card-item:hover .card-title {
  color: var(--acid);
}

.card-desc {
  font-size: 13.5px;
  color: var(--bone);
  line-height: 1.55;
  margin-bottom: 18px;
  flex-grow: 1;
}

.card-footer-link {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--acid);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.card-footer-link::after {
  content: "→";
  transition: transform 180ms var(--snap);
}

.card-item:hover .card-footer-link::after {
  transform: translateX(5px);
}

/* Corner Ticks */
.al-ticks {
  --al-tk: var(--rule);
  --al-tl: 7px;
  background-image:
    linear-gradient(var(--al-tk), var(--al-tk)), linear-gradient(var(--al-tk), var(--al-tk)),
    linear-gradient(var(--al-tk), var(--al-tk)), linear-gradient(var(--al-tk), var(--al-tk)),
    linear-gradient(var(--al-tk), var(--al-tk)), linear-gradient(var(--al-tk), var(--al-tk)),
    linear-gradient(var(--al-tk), var(--al-tk)), linear-gradient(var(--al-tk), var(--al-tk));
  background-repeat: no-repeat;
  background-position: top left, top left, top right, top right, bottom left, bottom left, bottom right, bottom right;
  background-size: var(--al-tl) 1px, 1px var(--al-tl), var(--al-tl) 1px, 1px var(--al-tl), var(--al-tl) 1px, 1px var(--al-tl), var(--al-tl) 1px, 1px var(--al-tl);
  transition: background-image 200ms ease;
}

.card-item:hover.al-ticks, .list-row:hover.al-ticks {
  --al-tk: var(--acid);
}

/* Two-column layout for home sections */
.two-col-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
}

@media (min-width: 860px) {
  .two-col-layout {
    grid-template-columns: 1fr 1fr;
  }
}

/* Item List / Publications / Press */
.item-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.list-row {
  background: var(--plate);
  border: 1px solid var(--rule);
  padding: 16px 20px;
  transition: border-color 200ms ease, background 200ms ease, transform 200ms var(--snap);
  animation: al-slide-up 450ms var(--settle) calc(var(--al-i, 0) * 50ms) backwards;
}

.list-row:hover {
  border-color: var(--rule-subtle);
  background: var(--plate-hover);
  transform: translateX(2px);
}

.list-row-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--mark);
  margin-bottom: 6px;
}

.list-row-title a {
  color: var(--mark);
  transition: color 180ms ease;
}

.list-row-title a:hover {
  color: var(--acid);
}

.list-row-meta {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ash);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.badge-tag {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  padding: 2px 7px;
  background: var(--void);
  border: 1px solid var(--rule);
  color: var(--bone);
  text-transform: uppercase;
  transition: all 180ms ease;
}

.badge-tag.badge-acid {
  border-color: var(--acid);
  color: var(--acid);
}

.badge-tag.badge-original {
  border-color: var(--ash);
  color: var(--ash);
}
.badge-tag.badge-original:hover {
  border-color: var(--acid);
  color: var(--acid);
}

/* Single Post / Articles */
.article-header {
  margin-bottom: 32px;
  animation: al-slide-up 400ms var(--settle) backwards;
}

.article-title {
  font-size: 2.2rem;
  line-height: 1.2;
  margin-bottom: 12px;
}

.article-meta {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ash);
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--rule);
}

.article-body {
  font-size: 15.5px;
  line-height: 1.7;
  animation: al-slide-up 500ms var(--settle) 100ms backwards;
}

.article-body h1, .article-body h2, .article-body h3, .article-body h4 {
  margin-top: 2rem;
  margin-bottom: 1rem;
}

.article-body ul, .article-body ol {
  padding-left: 24px;
  margin-bottom: 1.5rem;
}

.article-body li {
  margin-bottom: 6px;
}

.article-body blockquote {
  border-left: 2px solid var(--acid);
  margin: 1.5rem 0;
  padding: 8px 18px;
  background: var(--plate);
  color: var(--bone);
}

.article-body code {
  font-family: var(--mono);
  font-size: 13px;
  background: var(--plate);
  border: 1px solid var(--rule);
  padding: 2px 6px;
  color: var(--acid);
}

.article-body pre {
  background: var(--plate);
  border: 1px solid var(--rule);
  padding: 16px 20px;
  overflow-x: auto;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.5;
}

.article-body pre code {
  background: transparent;
  border: none;
  padding: 0;
  color: var(--bone);
}

/* Footer */
footer.site-footer {
  margin-top: auto;
  padding-top: 36px;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

@media (min-width: 768px) {
  footer.site-footer {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }
}

.footer-social {
  display: flex;
  gap: 16px;
}

.footer-social a {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ash);
  transition: color 180ms ease, transform 180ms var(--snap);
}

.footer-social a:hover {
  color: var(--acid);
  transform: translateY(-1px);
}

.footer-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

@media (min-width: 768px) {
  .footer-meta {
    align-items: flex-end;
  }
}

.footer-credit {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--ash);
  opacity: 0.8;
}

.footer-credit a {
  color: var(--ash);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 180ms ease;
}

.footer-credit a:hover {
  color: var(--acid);
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .mrule > i {
    animation: none;
  }
  .status-dot {
    animation: none;
  }
}