/* ============================================================
   PORTFOLIO — RETRO DARK  |  style.css
   ============================================================ */

/* ── RESET & VARIABLES ─────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:            #0d0d0d;
  --bg-surface:    #131313;
  --bg-card:       #191919;
  --bg-card-hover: #1f1f1f;
  --accent:        #cc0000;
  --accent-bright: #ff2020;
  --accent-dim:    #5a0000;
  --text:          #e2e2e2;
  --text-muted:    #6a6a6a;
  --text-dim:      #333333;
  --border:        #222222;
  --border-mid:    #2e2e2e;
  --mono:          'Share Tech Mono', 'Courier New', monospace;
  --card-h:        472px;
  --card-img-h:    196px;
  --radius:        0px;      /* sharp / retro — no border radius */
  --glitch-2:      #00e5ff;  /* second glitch layer colour — overridden in retro theme */
}

html { font-size: 17px; scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--mono);
  line-height: 1.65;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }

.hidden { display: none !important; }

/* ── BOOT SCREEN ───────────────────────────────────────────── */
#boot-screen {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--bg);   /* inherits theme colour — blue in retro mode */
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.6s ease;
}
#boot-screen.fade-out { opacity: 0; pointer-events: none; }

.boot-wrap {
  width: min(640px, 92vw);
  padding: 2rem;
}

.boot-logo-box {
  border: 1px solid var(--accent-dim);
  padding: 1.2rem 2rem;
  text-align: center;
  margin-bottom: 2rem;
  position: relative;
}
.boot-logo-box::before,
.boot-logo-box::after {
  content: '';
  position: absolute;
  width: 8px; height: 8px;
  border-color: var(--accent);
  border-style: solid;
}
.boot-logo-box::before { top: -1px; left: -1px; border-width: 1px 0 0 1px; }
.boot-logo-box::after  { bottom: -1px; right: -1px; border-width: 0 1px 1px 0; }

.boot-logo {
  font-size: clamp(1.2rem, 4vw, 1.8rem);
  color: var(--accent);
  letter-spacing: 0.45em;
  text-transform: uppercase;
}
.boot-logo span { color: var(--text-muted); }

.boot-lines {
  font-size: 0.8rem;
  line-height: 2;
  color: #888;
  min-height: 180px;
}
.boot-line { display: block; white-space: pre; }
.boot-line.ok   { color: #3a9; }
.boot-line.err  { color: var(--accent-bright); }
.boot-line.head { color: var(--text); letter-spacing: 0.1em; }
.boot-line.bar  { color: var(--accent); }

.boot-ready {
  margin-top: 1.5rem;
  font-size: 0.72rem;
  color: var(--text-dim);
  letter-spacing: 0.2em;
  text-align: center;
  animation: blink-text 1.1s step-end infinite;
}
@keyframes blink-text { 0%,100%{opacity:1} 50%{opacity:0} }

/* ── NAV ───────────────────────────────────────────────────── */
#nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  background: rgba(10,10,10,0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.nav-inner {
  max-width: 1200px; margin: 0 auto;
  padding: 0.9rem 2rem;
  display: flex; align-items: center; justify-content: space-between;
}
.nav-logo { font-size: 0.95rem; color: var(--accent); letter-spacing: 0.15em; }
.nav-logo span { color: var(--text-muted); }
.nav-links { display: flex; gap: 2rem; }
.nav-links a {
  font-size: 0.72rem; letter-spacing: 0.2em;
  color: var(--text-muted);
  transition: color 0.2s;
}
.nav-links a:hover { color: var(--accent); }

/* ── HERO ───────────────────────────────────────────────────── */
#hero {
  position: relative;
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 7rem 2rem 5rem;
  overflow: hidden;
}

/* Animated dot-grid background */
#hero::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle, rgba(204,0,0,0.18) 1px, transparent 1px);
  background-size: 30px 30px;
  animation: grid-drift 25s linear infinite;
  pointer-events: none;
}
@keyframes grid-drift {
  0%   { background-position: 0 0; }
  100% { background-position: 30px 30px; }
}

/* CRT scanlines overlay */
#hero::after {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(0,0,0,0.08) 3px,
    rgba(0,0,0,0.08) 4px
  );
  pointer-events: none;
  z-index: 1;
}

.hero-inner {
  position: relative; z-index: 2;
  text-align: center; max-width: 780px;
}

.hero-eyebrow {
  font-size: 0.75rem;
  color: var(--accent);
  letter-spacing: 0.35em;
  margin-bottom: 1.2rem;
}

/* ── GLITCH TITLE ── */
.glitch {
  display: inline-block;
  font-size: clamp(2.4rem, 8vw, 5rem);
  letter-spacing: 0.06em;
  color: var(--text);
  position: relative;
  user-select: none;
  text-transform: uppercase;
}
.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
}
.glitch::before {
  color: var(--accent);
  animation: glitch-top 4s infinite;
  clip-path: polygon(0 0, 100% 0, 100% 38%, 0 38%);
}
.glitch::after {
  color: var(--glitch-2);
  animation: glitch-bot 4s infinite;
  clip-path: polygon(0 62%, 100% 62%, 100% 100%, 0 100%);
}
@keyframes glitch-top {
  0%,88%,100% { transform: translateX(0); opacity: 0; }
  89% { transform: translateX(-4px) skewX(-1deg); opacity: 0.85; }
  91% { transform: translateX(3px); opacity: 0.85; }
  93% { transform: translateX(-1px); opacity: 0.85; }
  95% { transform: translateX(0); opacity: 0; }
}
@keyframes glitch-bot {
  0%,85%,100% { transform: translateX(0); opacity: 0; }
  86% { transform: translateX(4px); opacity: 0.7; }
  88% { transform: translateX(-2px); opacity: 0.7; }
  90% { transform: translateX(0); opacity: 0; }
}

.hero-sub {
  margin-top: 1.4rem;
  font-size: clamp(0.75rem, 2.2vw, 0.95rem);
  letter-spacing: 0.35em;
  color: var(--accent);
}
.hero-desc {
  margin-top: 0.9rem;
  font-size: 0.82rem;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  max-width: 480px;
  margin-left: auto; margin-right: auto;
}
.hero-cta {
  margin-top: 2.2rem;
  display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap;
}
.btn-outline {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  padding: 0.65rem 1.6rem;
  border: 1px solid var(--border-mid);
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}
.btn-outline:hover { border-color: var(--accent); color: var(--accent); }
.btn-outline.primary {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(204,0,0,0.06);
}
.btn-outline.primary:hover { background: rgba(204,0,0,0.12); }

.scroll-hint {
  position: absolute; bottom: 2.5rem; left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  font-size: 0.65rem; letter-spacing: 0.25em; color: var(--text-dim);
  animation: nudge 2.4s ease-in-out infinite;
}
.scroll-hint::after { content: ' ↓'; color: var(--accent); }
@keyframes nudge {
  0%,100%{ transform: translateX(-50%) translateY(0); }
  50%    { transform: translateX(-50%) translateY(6px); }
}

/* ── SECTION BASE ──────────────────────────────────────────── */
section { padding: 5.5rem 2rem; }
.section-inner { max-width: 1200px; margin: 0 auto; }
.section-header { margin-bottom: 2.5rem; }
.section-header h2 {
  font-size: 1.1rem; letter-spacing: 0.12em; color: var(--accent);
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--border);
}
.section-header h2 span { color: var(--text-muted); }

/* ── TAB BAR ───────────────────────────────────────────────── */
.tab-bar {
  display: flex;
  width: fit-content;
  border: 1px solid var(--border-mid);
  margin-bottom: 2.5rem;
}
.tab {
  background: none;
  border: none;
  border-right: 1px solid var(--border-mid);
  color: var(--text-muted);
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  padding: 0.55rem 1.4rem;
  cursor: pointer;
  position: relative;
  transition: color 0.15s, background 0.15s;
}
.tab:last-child { border-right: none; }
.tab:hover { color: var(--text); background: rgba(255,255,255,0.03); }
.tab.active { color: var(--accent); background: rgba(204,0,0,0.06); }
.tab.active::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0; height: 2px;
  background: var(--accent);
}
.tab-count {
  font-size: 0.6rem; color: var(--text-dim);
  margin-left: 0.4rem;
  vertical-align: middle;
}
.tab.active .tab-count { color: var(--accent-dim); }

/* ── CARDS GRID ────────────────────────────────────────────── */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 1.2rem;
}

/* ── CARD ── */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  display: flex; flex-direction: column;
  height: var(--card-h);
  cursor: pointer;
  position: relative; overflow: hidden;
  transition: border-color 0.22s, transform 0.22s, box-shadow 0.22s;
}
.card:hover {
  border-color: var(--accent);
  transform: translateY(-4px);
  box-shadow: 0 8px 32px rgba(204,0,0,0.12);
}
/* Red sweep on top edge */
.card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.25s ease;
}
.card:hover::before { transform: scaleX(1); }

/* Category badge */
.card-badge {
  position: absolute; top: 10px; right: 10px;
  font-size: 0.6rem; letter-spacing: 0.15em;
  padding: 0.15rem 0.5rem;
  background: rgba(0,0,0,0.75);
  border: 1px solid var(--accent-dim);
  color: var(--accent);
  z-index: 5;
}

.card-img-wrap {
  width: 100%; height: var(--card-img-h);
  flex-shrink: 0;
  overflow: hidden;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.card-img-wrap img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.card:hover .card-img-wrap img { transform: scale(1.04); }

/* Placeholder when no image */
.img-placeholder {
  font-size: 0.7rem; letter-spacing: 0.15em; color: var(--text-dim);
  /* Diagonal stripe pattern */
  background: repeating-linear-gradient(
    -45deg,
    var(--bg-surface),
    var(--bg-surface) 6px,
    #161616 6px,
    #161616 12px
  );
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
}

.card-body {
  padding: 1.1rem 1.2rem;
  display: flex; flex-direction: column;
  flex: 1; overflow: hidden;
}

.card-name {
  font-size: 0.95rem; letter-spacing: 0.04em;
  color: var(--text);
  margin-bottom: 0.55rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.card-tags {
  display: flex; flex-wrap: wrap; gap: 0.35rem;
  margin-bottom: 0.75rem;
}
.tag {
  font-size: 0.6rem; letter-spacing: 0.12em;
  color: var(--accent);
  border: 1px solid var(--accent-dim);
  padding: 0.1rem 0.45rem;
  background: rgba(204,0,0,0.05);
  white-space: nowrap;
}

.card-desc {
  font-size: 0.78rem; color: var(--text-muted); line-height: 1.65;
  flex: 1; overflow: hidden;
  /* Soft fade at bottom edge */
  mask-image: linear-gradient(to bottom, black 55%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 55%, transparent 100%);
}

.card-footer {
  display: flex; gap: 0.45rem; flex-wrap: wrap;
  padding-top: 0.85rem;
  margin-top: auto;
  border-top: 1px solid var(--border);
}
.card-btn {
  font-family: var(--mono); font-size: 0.65rem; letter-spacing: 0.12em;
  padding: 0.28rem 0.75rem;
  border: 1px solid var(--border-mid);
  background: none; color: var(--text-muted);
  cursor: pointer; transition: all 0.18s;
  display: inline-flex; align-items: center; gap: 0.25rem;
  text-decoration: none;
}
.card-btn:hover { border-color: var(--accent); color: var(--accent); background: rgba(204,0,0,0.06); }
.card-btn.primary { border-color: var(--accent-dim); color: var(--accent); }
.card-btn.primary:hover { background: rgba(204,0,0,0.1); }

/* "no results" row */
.no-cards {
  grid-column: 1/-1;
  text-align: center;
  padding: 4rem 1rem;
  font-size: 0.8rem; letter-spacing: 0.12em; color: var(--text-dim);
}

/* ── CONTACT SECTION ───────────────────────────────────────── */
#contact { background: var(--bg-surface); border-top: 1px solid var(--border); }

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: start;
}

/* Form */
.contact-form { display: flex; flex-direction: column; gap: 1.2rem; }
.form-row { display: flex; flex-direction: column; gap: 0.35rem; }
.form-row label {
  font-size: 0.68rem; letter-spacing: 0.2em; color: var(--text-muted);
}
.form-row input,
.form-row textarea {
  background: var(--bg);
  border: 1px solid var(--border-mid);
  color: var(--text);
  font-family: var(--mono); font-size: 0.82rem;
  padding: 0.7rem 0.9rem;
  outline: none;
  transition: border-color 0.2s;
  resize: vertical;
  width: 100%;
}
.form-row input:focus,
.form-row textarea:focus { border-color: var(--accent); }
.form-row input::placeholder,
.form-row textarea::placeholder { color: var(--text-dim); }

.btn-submit {
  font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.2em;
  padding: 0.8rem 2rem;
  background: var(--accent); border: none; color: #fff;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s;
  align-self: flex-start;
}
.btn-submit:hover { background: var(--accent-bright); box-shadow: 0 0 16px rgba(204,0,0,0.3); }
.btn-submit:disabled { opacity: 0.5; cursor: default; }

.form-status {
  font-size: 0.75rem; letter-spacing: 0.1em;
  padding: 0.5rem 0;
  min-height: 1.5rem;
}
.form-status.ok  { color: #3a9; }
.form-status.err { color: var(--accent-bright); }

/* Contact links */
.contact-links { display: flex; flex-direction: column; gap: 0.8rem; }
.contact-links-label {
  font-size: 0.68rem; letter-spacing: 0.2em; color: var(--text-muted);
  margin-bottom: 0.5rem;
}
.clink {
  display: flex; align-items: center; gap: 1rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--border);
  color: var(--text-muted);
  transition: all 0.2s;
  font-size: 0.78rem; letter-spacing: 0.12em;
}
.clink:hover { border-color: var(--accent); color: var(--text); background: var(--bg-card); }
.clink-icon {
  width: 34px; height: 34px; flex-shrink: 0;
  border: 1px solid var(--accent-dim);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.68rem; color: var(--accent);
}
.clink-arrow { margin-left: auto; color: var(--text-dim); font-size: 0.7rem; }
.clink:hover .clink-arrow { color: var(--accent); }

/* ── FOOTER ─────────────────────────────────────────────────── */
footer {
  padding: 1.4rem 2rem;
  border-top: 1px solid var(--border);
}
.footer-inner {
  max-width: 1200px; margin: 0 auto;
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 0.5rem;
  font-size: 0.68rem; letter-spacing: 0.1em; color: var(--text-dim);
}
.footer-inner a { color: var(--text-dim); transition: color 0.2s; }
.footer-inner a:hover { color: var(--accent); }

/* ── PROJECT DETAIL PAGE ───────────────────────────────────── */
.detail-page { padding: 5rem 2rem 4rem; }
.detail-back {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.75rem; letter-spacing: 0.15em; color: var(--text-muted);
  border: 1px solid var(--border);
  padding: 0.45rem 1rem;
  margin-bottom: 2.5rem;
  transition: all 0.2s;
}
.detail-back:hover { border-color: var(--accent); color: var(--accent); }

.detail-hero { margin-bottom: 3rem; }
.detail-eyebrow {
  font-size: 0.7rem; letter-spacing: 0.25em; color: var(--accent);
  margin-bottom: 0.8rem;
}
.detail-title {
  font-size: clamp(1.8rem, 5vw, 3rem);
  letter-spacing: 0.04em; color: var(--text);
  margin-bottom: 1rem;
}
.detail-meta {
  display: flex; gap: 1.5rem; flex-wrap: wrap;
  font-size: 0.72rem; letter-spacing: 0.12em; color: var(--text-muted);
  margin-bottom: 1.2rem;
}
.detail-meta span { display: flex; align-items: center; gap: 0.3rem; }
.status-badge {
  display: inline-block;
  font-size: 0.62rem; letter-spacing: 0.15em;
  padding: 0.12rem 0.55rem;
  border: 1px solid var(--accent-dim);
  color: var(--accent);
  background: rgba(204,0,0,0.06);
}
.detail-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.detail-cover {
  width: 100%; max-height: 460px;
  object-fit: cover;
  border: 1px solid var(--border);
  display: block;
  margin-bottom: 3rem;
}
.detail-cover-placeholder {
  width: 100%; height: 300px;
  background: repeating-linear-gradient(
    -45deg,
    var(--bg-surface),
    var(--bg-surface) 8px,
    #161616 8px,
    #161616 16px
  );
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem; letter-spacing: 0.1em; color: var(--text-dim);
  margin-bottom: 3rem;
}

/* Links row in the hero — horizontal strip of link buttons */
.detail-hero-links {
  display: flex; flex-wrap: wrap; gap: 0.6rem;
  margin-top: 1.4rem;
}

/* Top-level YouTube embed (after hero, before cover image) */
.detail-yt {
  position: relative; width: 100%; padding-top: 56.25%;
  margin-bottom: 2rem;
  border: 1px solid var(--border);
}
.detail-yt iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; }

.detail-link {
  display: flex; align-items: center; gap: 0.6rem;
  font-size: 0.75rem; letter-spacing: 0.1em; color: var(--text-muted);
  border: 1px solid var(--border);
  padding: 0.55rem 0.9rem;
  transition: all 0.2s;
}
.detail-link:hover { border-color: var(--accent); color: var(--accent); background: rgba(204,0,0,0.05); }

.detail-gallery { margin-top: 3rem; }
.gallery-label {
  font-size: 0.68rem; letter-spacing: 0.2em; color: var(--text-muted);
  margin-bottom: 1rem;
}
.gallery-row {
  display: flex; gap: 0.8rem; overflow-x: auto;
  padding-bottom: 0.5rem;
  scrollbar-width: thin;
  scrollbar-color: var(--accent-dim) var(--border);
}
.gallery-row img {
  height: 180px; width: auto;
  object-fit: cover;
  border: 1px solid var(--border);
  flex-shrink: 0;
  cursor: pointer;
  transition: border-color 0.2s;
}
.gallery-row img:hover { border-color: var(--accent); }

/* ── DETAIL SECTIONS (inline text + media blocks) ─────────── */
.detail-sections { margin-top: 0; }

.detail-section {
  padding: 2rem;
  margin-bottom: 1rem;
  border: 1px solid var(--border);
}
.detail-section:nth-child(odd)  { background: var(--bg-surface); }
.detail-section:nth-child(even) { background: var(--bg); }

.detail-sh {
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  color: var(--accent);
  margin-bottom: 1.2rem;
  padding-left: 0.9rem;
  border-left: 2px solid var(--accent);
  text-transform: uppercase;
}
.detail-ssubh {
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  color: var(--accent);
  margin-top: 1.5rem;
  margin-bottom: 0.9rem;
  padding-left: 0.9rem;
  border-left: 2px solid var(--accent-dim);
  text-transform: uppercase;
}

.detail-section p {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.85;
  margin-bottom: 1rem;
}
.detail-section p:last-child { margin-bottom: 0; }

.detail-section ul,
.detail-section ol {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.85;
  padding-left: 1.4rem;
  margin-bottom: 1rem;
}
.detail-section li { margin-bottom: 0.3rem; }
.detail-section strong { color: var(--text); }
.detail-section code {
  font-family: var(--mono);
  font-size: 0.78em;
  background: var(--bg-card);
  border: 1px solid var(--border-mid);
  padding: 0.1em 0.4em;
  color: var(--accent-bright);
}

/* Inline media container within sections */
.d-media {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 1.5rem 0;
}
.d-media:last-child { margin-bottom: 0; }
.d-media img,
.d-media video {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--border);
  max-height: 520px;
  object-fit: contain;
  background: #000;
}

/* YouTube embed */
.d-yt {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  margin: 1.5rem 0;
  border: 1px solid var(--border);
}
.d-yt:last-child { margin-bottom: 0; }
.d-yt iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border: none;
}

/* ── SCROLL-REVEAL ANIMATION ───────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}
.reveal.visible { opacity: 1; transform: none; }

/* ── THEME TOGGLE BUTTON ────────────────────────────────────── */
.theme-toggle {
  background: none;
  border: 1px solid var(--border-mid);
  color: var(--text-dim);
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  padding: 0.28rem 0.75rem;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
  white-space: nowrap;
  line-height: 1;
}
.theme-toggle:hover { border-color: var(--accent); color: var(--accent); }

/* ── ABOUT / BIO SECTION ───────────────────────────────────── */
#about {
  border-top: 1px solid var(--border);
  padding: 3rem 2rem;
}

.about-bio {
  font-size: 0.95rem;
  line-height: 2.1;
  color: var(--text-muted);
  max-width: 820px;
  letter-spacing: 0.02em;
}

/* "Hi, I'm Ty" opener — slightly larger, full brightness */
.bio-hi {
  font-size: 1.05rem;
  color: var(--text);
  letter-spacing: 0.06em;
}

/* Soft-skill descriptors — bright white, stands out from muted base */
.about-bio .hl {
  color: var(--text);
}

/* Hard-skill / tech terms — accent color */
.about-bio .hl-tech {
  color: var(--accent);
}

/* ── TOOLS & TECH SECTION ──────────────────────────────────── */
#tools {
  border-top: 1px solid var(--border);
  padding: 3.5rem 2rem;
}

.tools-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}

.tool-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  padding: 1.1rem 0.9rem 0.9rem;
  width: 84px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  cursor: default;
  transition: border-color 0.2s, background 0.2s;
}
.tool-item:hover {
  border-color: var(--accent);
  background: var(--bg-card-hover);
}

.tool-item img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  display: block;
  opacity: 0.75;
  transition: opacity 0.2s;
}
.tool-item:hover img {
  opacity: 1;
}

.tool-item span {
  font-size: 0.52rem;
  letter-spacing: 0.14em;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.3;
}
.tool-item:hover span {
  color: var(--accent);
}

/* ── RETRO THEME ────────────────────────────────────────────── */
/*
   Palette: CGA high-intensity (1987)
   Background: electric blue  #0000a8
   Accent:     bright yellow  #ffff55   (interactive elements)
   Secondary:  magenta        #ff55ff   (tags)
   Tertiary:   cyan           #55ffff   (glitch, dots)
   Text:       white + periwinkle muted

   This is deliberately bright and colorful — the classic
   "BBS / DOS / retro PC" look. Font switches to VT323 (pixel CRT).
*/
html[data-theme="retro"] {
  /* Palette overrides */
  --bg:            #0000a8;
  --bg-surface:    #0011bb;
  --bg-card:       #0022cc;
  --bg-card-hover: #0033dd;
  --accent:        #ffff55;    /* bright yellow */
  --accent-bright: #ffffff;
  --accent-dim:    #888800;
  --text:          #ffffff;
  --text-muted:    #aaaaff;    /* periwinkle */
  --text-dim:      #5566ff;
  --border:        #5555ff;
  --border-mid:    #8888ff;
  /* Glitch second layer → magenta */
  --glitch-2:      #ff55ff;
  /* Switch all font-family: var(--mono) references to VT323 */
  --mono:          'VT323', 'Share Tech Mono', monospace;
}

/* VT323 is a larger pixel font — nudge sizes so it reads well */
html[data-theme="retro"] .boot-lines        { font-size: 1rem; line-height: 1.9; }
html[data-theme="retro"] .boot-ready        { font-size: 0.88rem; }
html[data-theme="retro"] .nav-links a       { font-size: 0.88rem; }
html[data-theme="retro"] .theme-toggle      { font-size: 0.85rem; }
html[data-theme="retro"] .tab               { font-size: 0.88rem; }
html[data-theme="retro"] .tab-count         { font-size: 0.72rem; }
html[data-theme="retro"] .card-name         { font-size: 1.1rem; }
html[data-theme="retro"] .card-desc         { font-size: 0.92rem; }
html[data-theme="retro"] .card-btn          { font-size: 0.8rem; }
html[data-theme="retro"] .tag               { font-size: 0.75rem; }
html[data-theme="retro"] .section-header h2 { font-size: 1.35rem; }
html[data-theme="retro"] .clink             { font-size: 0.95rem; }
html[data-theme="retro"] .form-row label    { font-size: 0.85rem; }
html[data-theme="retro"] .form-row input,
html[data-theme="retro"] .form-row textarea { font-size: 1rem; }
html[data-theme="retro"] .btn-submit        { font-size: 0.9rem; }
html[data-theme="retro"] .footer-inner      { font-size: 0.85rem; }
html[data-theme="retro"] .detail-title      { letter-spacing: 0.02em; }

/* Hero dot-grid: swap red dots → cyan */
html[data-theme="retro"] #hero::before {
  background-image: radial-gradient(circle, rgba(85,255,255,0.28) 1px, transparent 1px);
}

/* Card hover/active glow: yellow instead of red */
html[data-theme="retro"] .card:hover {
  box-shadow: 0 8px 32px rgba(255,255,85,0.3);
}
html[data-theme="retro"] .card:active {
  box-shadow: 0 0 16px rgba(255,255,85,0.25);
}

/* Tabs */
html[data-theme="retro"] .tab.active   { background: rgba(255,255,85,0.1); }
html[data-theme="retro"] .tab:hover    { background: rgba(255,255,255,0.05); }

/* Primary buttons */
html[data-theme="retro"] .btn-outline.primary        { background: rgba(255,255,85,0.1); }
html[data-theme="retro"] .btn-outline.primary:hover  { background: rgba(255,255,85,0.2); }

/* Card action buttons */
html[data-theme="retro"] .card-btn:hover             { background: rgba(255,255,85,0.1); }
html[data-theme="retro"] .card-btn.primary           { border-color: var(--accent-dim); color: var(--accent); }
html[data-theme="retro"] .card-btn.primary:hover     { background: rgba(255,255,85,0.12); }

/* Tags → magenta */
html[data-theme="retro"] .tag {
  color: #ff55ff;
  border-color: #aa00aa;
  background: rgba(255,85,255,0.1);
}

/* Card category badge */
html[data-theme="retro"] .card-badge {
  color: #ffff55;
  border-color: #888800;
  background: rgba(0,0,168,0.75);
}

/* Status badge on detail page */
html[data-theme="retro"] .status-badge {
  color: #ffff55;
  border-color: #888800;
  background: rgba(255,255,85,0.1);
}

/* Detail links */
html[data-theme="retro"] .detail-link:hover { background: rgba(255,255,85,0.08); }

/* Submit button — yellow bg → needs black text for contrast */
html[data-theme="retro"] .btn-submit         { color: #000000; }
html[data-theme="retro"] .btn-submit:hover   { box-shadow: 0 0 18px rgba(255,255,85,0.55); }

/* Contact form inputs — slightly lighter blue surface */
html[data-theme="retro"] .form-row input,
html[data-theme="retro"] .form-row textarea  { background: var(--bg-card); }

/* Image placeholders — blue diagonal stripes (no more dark gray) */
html[data-theme="retro"] .img-placeholder {
  background: repeating-linear-gradient(
    -45deg,
    #0022cc, #0022cc 6px,
    #0033dd 6px, #0033dd 12px
  );
  color: var(--text-muted);
}
html[data-theme="retro"] .detail-cover-placeholder {
  background: repeating-linear-gradient(
    -45deg,
    #0011bb, #0011bb 8px,
    #0022cc 8px, #0022cc 16px
  );
}

/* ── WARM THEME ─────────────────────────────────────────────── */
/*
   Palette: Candlelight — very dark warm brown, amber accent, cream text.
   Font:    Atkinson Hyperlegible — purpose-built for reading ease and
            dyslexia accessibility (distinct letterforms, generous spacing).

   Feels like: reading by lamplight. Relaxed, warm, un-serious.
*/
html[data-theme="warm"] {
  --bg:            #1a1510;
  --bg-surface:    #231c13;
  --bg-card:       #2c2419;
  --bg-card-hover: #352c1f;
  --accent:        #e8922e;    /* amber / honey */
  --accent-bright: #f0aa50;
  --accent-dim:    #7a4c14;
  --text:          #f0e8d8;    /* warm cream */
  --text-muted:    #a08268;
  --text-dim:      #60422e;
  --border:        #352818;
  --border-mid:    #4a3824;
  --glitch-2:      #e07060;    /* warm salmon — softer than cyan */
  /* Swap all font-family: var(--mono) to Commissioner (Black weight) */
  --mono:          'Commissioner', 'Atkinson Hyperlegible', sans-serif;
}

/* Commissioner Black weight as the baseline — heavy, distinct from the
   monospace default. font-weight 900 = "Black" in the Commissioner family. */
html[data-theme="warm"] body {
  font-weight: 900;
}

/* Bolded elements step up: max weight + tighter tracking + slight size
   boost to visually exceed the already-heavy baseline.               */
html[data-theme="warm"] strong,
html[data-theme="warm"] b {
  font-weight: 900;
  letter-spacing: -0.025em;
  font-size: 1.06em;
  text-shadow: 0 0 1px currentColor;
}

/* Nav backdrop — warm tint so it doesn't look cold against brown */
html[data-theme="warm"] #nav { background: rgba(22,17,10,0.92); }

/* Hero dot-grid — amber dots instead of red */
html[data-theme="warm"] #hero::before {
  background-image: radial-gradient(circle, rgba(232,146,46,0.22) 1px, transparent 1px);
}

/* Card hover/active — amber glow */
html[data-theme="warm"] .card:hover  { box-shadow: 0 8px 32px rgba(232,146,46,0.22); }
html[data-theme="warm"] .card:active { box-shadow: 0 0 16px rgba(232,146,46,0.18); }

/* Tabs */
html[data-theme="warm"] .tab.active { background: rgba(232,146,46,0.1); }
html[data-theme="warm"] .tab:hover  { background: rgba(255,255,255,0.03); }

/* Primary buttons */
html[data-theme="warm"] .btn-outline.primary        { background: rgba(232,146,46,0.1); }
html[data-theme="warm"] .btn-outline.primary:hover  { background: rgba(232,146,46,0.18); }

/* Card buttons */
html[data-theme="warm"] .card-btn:hover         { background: rgba(232,146,46,0.09); }
html[data-theme="warm"] .card-btn.primary:hover { background: rgba(232,146,46,0.11); }

/* Tags — amber (same family as accent, not red) */
html[data-theme="warm"] .tag {
  color: var(--accent);
  border-color: var(--accent-dim);
  background: rgba(232,146,46,0.09);
}

/* Card badge */
html[data-theme="warm"] .card-badge { background: rgba(22,17,10,0.82); }

/* Status badge */
html[data-theme="warm"] .status-badge {
  color: var(--accent);
  border-color: var(--accent-dim);
  background: rgba(232,146,46,0.1);
}

/* Detail links */
html[data-theme="warm"] .detail-link:hover { background: rgba(232,146,46,0.08); }

/* Submit button */
html[data-theme="warm"] .btn-submit:hover { box-shadow: 0 0 16px rgba(232,146,46,0.42); }

/* Form inputs — slightly lighter warm surface */
html[data-theme="warm"] .form-row input,
html[data-theme="warm"] .form-row textarea { background: var(--bg-card); }

/* Boot lines — warm muted instead of cold gray */
html[data-theme="warm"] .boot-lines { color: var(--text-muted); }

/* Image placeholders — warm brown diagonal stripes */
html[data-theme="warm"] .img-placeholder {
  background: repeating-linear-gradient(
    -45deg,
    #2c2419, #2c2419 6px,
    #352c1f 6px, #352c1f 12px
  );
}
html[data-theme="warm"] .detail-cover-placeholder {
  background: repeating-linear-gradient(
    -45deg,
    #231c13, #231c13 8px,
    #2c2419 8px, #2c2419 16px
  );
}

/* ── Proportional font adjustments ──────────────────────────
   Commissioner is a humanist sans-serif — the large
   letter-spacing values designed for monospace look stretched.
   Reduce them to natural proportional-font levels.            */
html[data-theme="warm"] .hero-eyebrow        { letter-spacing: 0.1em; }
html[data-theme="warm"] .hero-sub            { letter-spacing: 0.06em; font-size: clamp(0.85rem, 2.2vw, 1rem); }
html[data-theme="warm"] .hero-desc           { font-size: 0.9rem; }
html[data-theme="warm"] .nav-links a         { letter-spacing: 0.04em; font-size: 0.84rem; }
html[data-theme="warm"] .theme-toggle        { letter-spacing: 0.04em; }
html[data-theme="warm"] .tab                 { letter-spacing: 0.05em; font-size: 0.82rem; }
html[data-theme="warm"] .tab-count           { letter-spacing: 0; }
html[data-theme="warm"] .section-header h2   { letter-spacing: 0.03em; font-size: 1.2rem; }
html[data-theme="warm"] .card-name           { letter-spacing: 0.01em; font-size: 1.02rem; }
html[data-theme="warm"] .card-desc           { font-size: 0.87rem; line-height: 1.72; }
html[data-theme="warm"] .card-btn            { letter-spacing: 0.05em; font-size: 0.74rem; }
html[data-theme="warm"] .tag                 { letter-spacing: 0.04em; font-size: 0.68rem; }
html[data-theme="warm"] .clink               { letter-spacing: 0.04em; }
html[data-theme="warm"] .contact-links-label { letter-spacing: 0.1em; }
html[data-theme="warm"] .btn-submit          { letter-spacing: 0.1em; }
html[data-theme="warm"] .form-row label      { letter-spacing: 0.1em; }
html[data-theme="warm"] .form-row input,
html[data-theme="warm"] .form-row textarea   { font-size: 0.92rem; letter-spacing: 0; }
html[data-theme="warm"] .boot-lines          { font-size: 0.9rem; }
html[data-theme="warm"] .boot-ready          { letter-spacing: 0.12em; }
html[data-theme="warm"] .footer-inner        { letter-spacing: 0.04em; }
html[data-theme="warm"] .detail-title        { letter-spacing: 0.01em; }
html[data-theme="warm"] .detail-eyebrow      { letter-spacing: 0.12em; }
html[data-theme="warm"] .sidebar-label       { letter-spacing: 0.1em; }
html[data-theme="warm"] .detail-link         { letter-spacing: 0.06em; }

/* ── ARCADE THEME ───────────────────────────────────────────── */
/*
   Palette: Neon Cabinet — deep dark navy, electric cyan accent, hot pink pop.
   Inspired by 80s-90s arcade cabinet screens: rich blacks, saturated neon,
   that characteristic "lit from within" CRT glow.

   Feels like: standing in a dark arcade hall.
*/
html[data-theme="arcade"] {
  --bg:            #06060f;
  --bg-surface:    #0a0a1c;
  --bg-card:       #0d0d24;
  --bg-card-hover: #121230;
  --accent:        #00cfff;    /* electric cyan */
  --accent-bright: #80e8ff;
  --accent-dim:    #004d66;
  --text:          #d6eeff;    /* cool blue-white */
  --text-muted:    #6888aa;
  --text-dim:      #2a4060;
  --border:        #0f1e38;
  --border-mid:    #1a2e50;
  --glitch-2:      #ff2a6d;    /* hot pink — the arcade pop colour */
  /* Share Tech Mono — clean digital-readout feel, distinct from VT323 retro */
  --mono:          'Share Tech Mono', monospace;
}

/* Nav — deep arcade dark */
html[data-theme="arcade"] #nav { background: rgba(6,6,15,0.94); }

/* Hero dot-grid — cyan dots */
html[data-theme="arcade"] #hero::before {
  background-image: radial-gradient(circle, rgba(0,207,255,0.25) 1px, transparent 1px);
}

/* Glitch hero text — cyan + pink */
html[data-theme="arcade"] .glitch::before { color: var(--accent); }
html[data-theme="arcade"] .glitch::after  { color: var(--glitch-2); }

/* Card hover/active — cyan glow */
html[data-theme="arcade"] .card:hover  { box-shadow: 0 8px 32px rgba(0,207,255,0.28); }
html[data-theme="arcade"] .card:active { box-shadow: 0 0 16px rgba(0,207,255,0.22); }

/* Tabs */
html[data-theme="arcade"] .tab.active { background: rgba(0,207,255,0.1); }
html[data-theme="arcade"] .tab:hover  { background: rgba(255,255,255,0.04); }

/* Primary buttons — pink in arcade (cyan = info, pink = action) */
html[data-theme="arcade"] .btn-outline.primary {
  border-color: var(--glitch-2);
  color: var(--glitch-2);
  background: rgba(255,42,109,0.08);
}
html[data-theme="arcade"] .btn-outline.primary:hover { background: rgba(255,42,109,0.18); }

/* Card buttons */
html[data-theme="arcade"] .card-btn:hover         { background: rgba(0,207,255,0.1); }
html[data-theme="arcade"] .card-btn.primary:hover { background: rgba(0,207,255,0.12); }

/* Tags — hot pink (the arcade pop) */
html[data-theme="arcade"] .tag {
  color: #ff2a6d;
  border-color: #660022;
  background: rgba(255,42,109,0.1);
}

/* Card badge */
html[data-theme="arcade"] .card-badge {
  color: var(--accent);
  border-color: var(--accent-dim);
  background: rgba(6,6,15,0.85);
}

/* Detail links */
html[data-theme="arcade"] .detail-link:hover { background: rgba(0,207,255,0.08); }

/* Secondary outline buttons — pink on hover in arcade */
html[data-theme="arcade"] .btn-outline:not(.primary):hover {
  border-color: var(--glitch-2);
  color: var(--glitch-2);
}

/* Contact external links — pink hover to match secondary button energy */
html[data-theme="arcade"] .clink:hover {
  border-color: var(--glitch-2);
  color: var(--text);
}
html[data-theme="arcade"] .clink:hover .clink-arrow { color: var(--glitch-2); }

/* Submit button — pink fill in arcade */
html[data-theme="arcade"] .btn-submit       { background: var(--glitch-2); }
html[data-theme="arcade"] .btn-submit:hover { background: #ff5090; box-shadow: 0 0 18px rgba(255,42,109,0.55); }

/* Contact form inputs */
html[data-theme="arcade"] .form-row input,
html[data-theme="arcade"] .form-row textarea { background: var(--bg-card); }

/* Image placeholders — deep navy diagonal stripes */
html[data-theme="arcade"] .img-placeholder {
  background: repeating-linear-gradient(
    -45deg,
    #0d0d24, #0d0d24 6px,
    #121230 6px, #121230 12px
  );
}
html[data-theme="arcade"] .detail-cover-placeholder {
  background: repeating-linear-gradient(
    -45deg,
    #0a0a1c, #0a0a1c 8px,
    #0d0d24 8px, #0d0d24 16px
  );
}

/* ── RESPONSIVE ─────────────────────────────────────────────── */

/* ══ ULTRA-WIDE  ≥ 1600px ════════════════════════════════════ */
@media (min-width: 1600px) {
  .section-inner { max-width: 1440px; }
  /* Cap card grid at 4 columns so they don't get comically wide */
  .cards-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  :root { --card-h: 492px; --card-img-h: 212px; }
  section { padding: 6rem 3rem; }
}

/* ══ DESKTOP  1200px – 1599px  (default styles apply) ════════ */

/* ══ TABLET LANDSCAPE  ≤ 1100px ══════════════════════════════ */
@media (max-width: 1100px) {
  .section-inner { max-width: 100%; }
  .cards-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
  .contact-grid { gap: 3.5rem; }
  .detail-body { gap: 2.5rem; }
}

/* ══ TABLET PORTRAIT  ≤ 860px ════════════════════════════════ */
@media (max-width: 860px) {
  section { padding: 4.5rem 1.8rem; }

  /* Nav */
  .nav-inner { padding: 0.85rem 1.8rem; }
  .nav-links { gap: 1.5rem; }

  /* Contact */
  .contact-grid { grid-template-columns: 1fr; gap: 2.8rem; }

  /* Project detail */
  .detail-body { grid-template-columns: 1fr; gap: 2rem; }
  .detail-sidebar { order: -1; }
  /* Show sidebar links in a horizontal row on tablet */
  .sidebar-links { flex-direction: row; flex-wrap: wrap; }
  .detail-link { flex: 1 1 auto; justify-content: center; }

  /* Tabs */
  .tab-bar { width: 100%; }
  .tab { flex: 1; padding: 0.6rem 0.5rem; font-size: 0.68rem; }

  /* Cards — 2 col */
  .cards-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ══ LARGE PHONE / SMALL TABLET  ≤ 640px ════════════════════ */
@media (max-width: 640px) {
  section { padding: 4rem 1.4rem; }

  /* Nav */
  .nav-inner { padding: 0.75rem 1.4rem; }
  .nav-links a { font-size: 0.7rem; letter-spacing: 0.15em; }

  /* Hero */
  .hero-sub { letter-spacing: 0.2em; }
  .hero-cta { flex-direction: column; align-items: center; }
  .btn-outline { width: 100%; max-width: 280px; text-align: center; justify-content: center; display: flex; }

  /* Cards — 1 col */
  .cards-grid { grid-template-columns: 1fr; }
  :root { --card-h: 452px; }

  /* Boot */
  .boot-line { white-space: pre-wrap; word-break: break-all; }
  .boot-logo-box { padding: 1rem 1.2rem; }

  /* Form */
  .btn-submit { width: 100%; }
}

/* ══ PHONE  ≤ 480px ══════════════════════════════════════════ */
@media (max-width: 480px) {
  section { padding: 3.5rem 1.1rem; }

  /* Nav — keep it tight */
  .nav-inner { padding: 0.7rem 1.1rem; }
  .nav-logo { font-size: 0.88rem; }
  .nav-links { gap: 1rem; }
  .nav-links a { font-size: 0.68rem; letter-spacing: 0.12em; }

  /* Hero */
  .hero-sub { letter-spacing: 0.12em; font-size: 0.75rem; }
  .hero-desc { font-size: 0.77rem; }
  .scroll-hint { display: none; } /* hides on short phones — saves viewport */

  /* Tabs — hide count badge, compress padding */
  .tab { font-size: 0.63rem; letter-spacing: 0.08em; padding: 0.65rem 0.3rem; }
  .tab-count { display: none; }

  /* Cards */
  :root { --card-h: 430px; --card-img-h: 173px; }
  .card-name { font-size: 0.88rem; }
  .card-desc { font-size: 0.76rem; }

  /* Detail page */
  .detail-page { padding-top: 4.5rem; }
  .detail-title { font-size: clamp(1.4rem, 6vw, 2rem); }
  .sidebar-links { flex-direction: column; }
  .detail-link { justify-content: flex-start; }

  /* Boot screen */
  .boot-wrap { padding: 1.4rem 1rem; }
  .boot-logo { letter-spacing: 0.2em; font-size: clamp(0.95rem, 4.5vw, 1.4rem); }
  .boot-lines { font-size: 0.7rem; line-height: 1.85; min-height: 140px; }
  .boot-ready { font-size: 0.65rem; letter-spacing: 0.12em; }
}

/* ══ SMALL PHONE  ≤ 360px ════════════════════════════════════ */
@media (max-width: 360px) {
  .nav-logo { font-size: 0.82rem; }
  .nav-links { gap: 0.8rem; }
  .nav-links a { font-size: 0.64rem; }

  .glitch { font-size: clamp(1.7rem, 9vw, 2.5rem); letter-spacing: 0.02em; }
  .hero-eyebrow { font-size: 0.68rem; }

  .tab { font-size: 0.58rem; padding: 0.65rem 0.2rem; }

  :root { --card-h: 410px; --card-img-h: 162px; }
  .section-header h2 { font-size: 1rem; }
}

/* ══ TOUCH DEVICES — replace hover with active states ════════ */
@media (hover: none) {
  /* Disable hover effects that require a mouse */
  .card:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--border);
  }
  .card:hover::before { transform: scaleX(0); }
  .card:hover .card-img-wrap img { transform: none; }

  /* Replace with :active (tap) feedback */
  .card:active { border-color: var(--accent); box-shadow: 0 0 16px rgba(204,0,0,0.12); }
  .card:active::before { transform: scaleX(1); }

  /* Make tappable targets slightly larger */
  .tab { padding-top: 0.7rem; padding-bottom: 0.7rem; }
  .card-btn { padding: 0.42rem 0.85rem; }
  .clink { padding: 1rem; }
}

/* ══ REDUCED MOTION ══════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.1ms !important;
  }
  html { scroll-behavior: auto; }
  /* Keep boot sequence readable without motion */
  .boot-ready { animation: none; opacity: 1; }
}