:root{
  --bg: #05080a;
  --surface: #0b1210;
  --surface-2: #10201d;
  --surface-3: #16302a;
  --text: #dff5e6;
  --text-dim: #6f9682;
  --matrix: #3ef07f;
  --matrix-dim: #1f9e56;
  --amber: #e0a83c;
  --line: #17332a;
}

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

body{
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', system-ui, sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  position: relative;
}

a{ color: var(--matrix); }
a:focus-visible, button:focus-visible{
  outline: 2px solid var(--matrix);
  outline-offset: 3px;
}

.wrap{
  max-width: 780px;
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
  z-index: 1;
}

/* ---------- matrix rain backdrop ---------- */
#rain-canvas{
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0.16;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce){
  #rain-canvas{ display: none; }
}

/* ---------- top nav ---------- */
header.top{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 26px 0;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
  gap: 12px;
}

header.top .name{
  font-family: 'IBM Plex Mono', monospace;
  font-size: 1.15rem;
  letter-spacing: 0.01em;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
}
header.top .name::before{ content: "~/"; color: var(--matrix-dim); }

header.top nav{ display: flex; gap: 20px; flex-wrap: wrap; font-family: 'IBM Plex Mono', monospace; font-size: 0.86rem; }
header.top nav a{
  color: var(--text-dim);
  text-decoration: none;
}
header.top nav a::before{ content: "/"; color: var(--matrix-dim); margin-right: 2px; }
header.top nav a:hover, header.top nav a[aria-current="page"]{ color: var(--matrix); }

/* ---------- hero (home) ---------- */
.hero{ padding: 56px 0 44px; }

.hero-media{
  aspect-ratio: 4/5;
  width: 100%;
  max-width: 420px;
  border-radius: 2px;
  margin-bottom: 32px;
  overflow: hidden;
  border: 1px solid var(--line);
  position: relative;
}
.hero-media::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(5,8,10,0) 60%, rgba(5,8,10,0.55) 100%);
  pointer-events: none;
}
.hero-media img{ width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(0.85) contrast(1.05); }

.img-placeholder{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
  background:
    repeating-linear-gradient(135deg, var(--surface), var(--surface) 10px, var(--surface-2) 10px, var(--surface-2) 20px);
  color: var(--text-dim);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.8rem;
  border: 1px dashed var(--line);
}

.prompt-line{
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.82rem;
  color: var(--matrix-dim);
  margin: 0 0 14px;
}
.prompt-line::before{ content: "$ "; color: var(--matrix); }

.hero h1{
  font-family: 'Instrument Serif', serif;
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.7rem, 4.4vw, 2.6rem);
  line-height: 1.25;
  margin: 0 0 22px;
  color: var(--text);
}
.hero h1 .cursor{
  display: inline-block;
  width: 0.5ch;
  background: var(--matrix);
  margin-left: 4px;
  animation: blink 1.1s steps(1) infinite;
}
@keyframes blink{ 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce){
  .hero h1 .cursor{ animation: none; }
}

.hero p{
  max-width: 58ch;
  color: var(--text-dim);
  font-size: 1.08rem;
  margin: 0 0 40px;
}
.hero p a{ color: var(--text); text-decoration-color: var(--matrix); }

.hero-top.split{
  display: flex;
  gap: 32px;
  align-items: flex-start;
  flex-wrap: wrap;
  margin-bottom: 40px;
}
.hero-top.split .hero-media{ flex: 0 0 260px; width: 260px; margin-bottom: 0; }
.hero-top.split .text-col{ flex: 1 1 320px; min-width: 0; }
.hero-top.split h1{ margin-top: 0; }
.hero-top.split p{ margin-bottom: 0; }
@media (max-width: 620px){
  .hero-top.split .hero-media{ flex: 1 1 100%; width: 100%; max-width: 280px; }
}

/* ---------- status strip (project / link lists) ---------- */
.status{
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 2px;
  overflow: hidden;
  background: var(--surface);
  font-family: 'IBM Plex Mono', monospace;
}
.status a, .status .row{
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 13px 18px;
  text-decoration: none;
  color: var(--text);
  border-bottom: 1px solid var(--line);
  transition: background 0.15s ease;
}
.status a:last-child, .status .row:last-child{ border-bottom: none; }
.status a:hover{ background: var(--surface-2); }

.dot{ width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--matrix); }
.dot.live{ animation: pulse 2.4s ease-in-out infinite; }
.dot.wip{ background: var(--amber); }

@keyframes pulse{
  0%, 100% { box-shadow: 0 0 0 0 rgba(62,240,127,0.5); }
  50% { box-shadow: 0 0 0 5px rgba(62,240,127,0); }
}
@media (prefers-reduced-motion: reduce){
  .dot.live{ animation: none; }
  html{ scroll-behavior: auto; }
}

.status .proj-name{ font-weight: 500; font-family: 'Inter', sans-serif; }
.status .proj-desc{
  color: var(--text-dim);
  font-size: 0.88rem;
  flex: 1;
  font-family: 'Inter', sans-serif;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.status .proj-tag{
  font-size: 0.76rem;
  color: var(--matrix-dim);
  white-space: nowrap;
  flex: none;
}
@media (max-width: 480px){
  .status .proj-desc{ display: none; }
}
}

/* ---------- sections ---------- */
section{ padding: 52px 0; border-bottom: 1px solid var(--line); }
section:last-of-type{ border-bottom: none; }

section h2{
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 500;
  font-size: 1.25rem;
  margin: 0 0 22px;
  color: var(--text);
}
section h2::before{ content: "// "; color: var(--matrix-dim); }

section.about p{ max-width: 62ch; color: var(--text-dim); font-size: 1.02rem; }
section.about p strong{ color: var(--text); font-weight: 500; }
section.about .meta{
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.76rem;
  color: var(--amber);
  display: block;
  margin: -10px 0 14px;
}

/* ---------- project card grid (home) ---------- */
.projects-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 2px;
  overflow: hidden;
}
@media (max-width: 620px){ .projects-grid{ grid-template-columns: 1fr; } }

.card{ background: var(--surface); padding: 24px; }
.card h3{
  font-family: 'Instrument Serif', serif;
  font-weight: 400;
  font-size: 1.25rem;
  margin: 0 0 8px;
  color: var(--text);
}
.card p{ color: var(--text-dim); font-size: 0.94rem; margin: 0 0 14px; }
.card .meta{
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.74rem;
  color: var(--matrix-dim);
  display: block;
  margin-bottom: 12px;
}
.card a.visit{ font-size: 0.9rem; text-decoration: none; border-bottom: 1px solid var(--matrix-dim); padding-bottom: 1px; font-family: 'IBM Plex Mono', monospace; }
.card a.visit:hover{ color: var(--matrix); border-bottom-color: var(--matrix); }
.card.wip{ opacity: 0.75; }
.card.wip .meta{ color: var(--amber); }

/* ---------- subpage hero (small header block) ---------- */
.page-hero{ padding: 48px 0 8px; border-bottom: none; }
.page-hero .eyebrow{
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.76rem;
  color: var(--matrix-dim);
  margin: 0 0 10px;
}
.page-hero .eyebrow::before{ content: "> "; color: var(--matrix); }
.page-hero h1{
  font-family: 'Instrument Serif', serif;
  font-weight: 400;
  font-style: italic;
  font-size: clamp(2rem, 5vw, 2.8rem);
  margin: 0 0 18px;
  color: var(--text);
}
.page-hero p{ max-width: 62ch; color: var(--text-dim); font-size: 1.04rem; margin: 0 0 8px; }

.page-hero.split{
  display: flex;
  gap: 32px;
  align-items: flex-start;
  flex-wrap: wrap;
}
.page-hero.split .text-col{ flex: 1 1 340px; min-width: 0; }
.page-hero.split .page-media{
  flex: 0 0 230px;
  width: 230px;
  aspect-ratio: 4/5;
  margin: 0;
}
@media (max-width: 620px){
  .page-hero.split .page-media{ flex: 1 1 100%; width: 100%; aspect-ratio: 4/3; }
}

.page-media{
  aspect-ratio: 4/3;
  width: 100%;
  border-radius: 2px;
  margin: 28px 0 4px;
  overflow: hidden;
  border: 1px solid var(--line);
  position: relative;
}
.page-media::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(5,8,10,0) 55%, rgba(5,8,10,0.6) 100%);
  pointer-events: none;
}
.page-media img{ width: 100%; height: 100%; object-fit: cover; object-position: center 20%; display: block; filter: saturate(0.85) contrast(1.05); }

.embed-frame{
  width: 100%;
  height: 560px;
  border-radius: 2px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface);
}
.embed-frame iframe{ width: 100%; height: 100%; border: 0; display: block; }
.embed-fallback{
  padding: 20px;
  color: var(--text-dim);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.82rem;
}
.embed-fallback a{ color: var(--matrix); }

/* ---------- news feed blocks ---------- */
.news-updated{
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.76rem;
  color: var(--text-dim);
  margin: 0 0 24px;
}
.news-updated .dot{ display: inline-block; margin-right: 8px; vertical-align: middle; }

.news-list{ display: flex; flex-direction: column; }
.news-item{
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.news-item:last-child{ border-bottom: none; }
.news-thumb{
  flex: 0 0 96px;
  width: 96px;
  height: 96px;
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface);
}
.news-thumb img{ width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(0.85); }
.news-body{ flex: 1; min-width: 0; }
.news-item a.headline{
  color: var(--text);
  text-decoration: none;
  font-size: 1.02rem;
  font-weight: 500;
  display: block;
  margin-bottom: 5px;
}
.news-item a.headline:hover{ color: var(--matrix); }
.news-ingress{
  color: var(--text-dim);
  font-size: 0.9rem;
  margin: 0 0 6px;
  line-height: 1.5;
}
.news-item .news-meta{
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.74rem;
  color: var(--matrix-dim);
}
@media (max-width: 480px){
  .news-thumb{ display: none; }
}
.news-empty, .news-error{
  color: var(--text-dim);
  font-size: 0.92rem;
  font-style: italic;
  font-family: 'IBM Plex Mono', monospace;
}

.news-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px 32px;
}
@media (max-width: 620px){ .news-grid{ grid-template-columns: 1fr; } }
.news-grid h3{
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 500;
  font-size: 0.95rem;
  margin: 0 0 8px;
  color: var(--text);
}
.news-grid h3::before{ content: "> "; color: var(--matrix-dim); }
.news-grid .news-item{ padding: 10px 0; gap: 12px; }
.news-grid .news-thumb{ flex: 0 0 56px; width: 56px; height: 56px; }
.news-grid .news-ingress{ font-size: 0.84rem; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- media galleries (Harley page) ---------- */
.photo-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.photo-grid-item{
  aspect-ratio: 4/3;
  border-radius: 2px;
  overflow: hidden;
  border: 1px solid var(--line);
}
.photo-grid-item img{ width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(0.9); transition: transform 0.3s ease; }
.photo-grid-item:hover img{ transform: scale(1.05); }
@media (max-width: 620px){
  .photo-grid{ grid-template-columns: repeat(2, 1fr); }
}

.video-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.video-grid .page-media{ margin: 0; aspect-ratio: 4/3; }
@media (max-width: 620px){
  .video-grid{ grid-template-columns: 1fr; }
}

/* ---------- footer ---------- */
footer{ padding: 44px 0 60px; }

footer .links-block{ margin-bottom: 8px; }
footer .links-block .status a{ padding: 12px 16px; }
footer .links-block .proj-tag{ letter-spacing: 0.02em; }

footer .contact-lines a{
  display: block;
  text-decoration: none;
  color: var(--text);
  font-size: 1.05rem;
  margin-bottom: 10px;
  border-bottom: 1px solid transparent;
}
footer .contact-lines a:hover{ border-bottom-color: var(--matrix); }
footer .fine{
  margin-top: 36px;
  color: var(--text-dim);
  font-size: 0.78rem;
  font-family: 'IBM Plex Mono', monospace;
}