/* =========================================================
   jasondillingham.dev — synthwave / outrun aesthetic
   Hand-written. No build step. Edit me directly.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@500;700&display=swap');

/* ---------- 1. Variables ---------- */
:root {
  --bg:           #0A0E27;
  --bg-alt:       #131838;
  --bg-card:      #1A1F4A;
  --bg-deep:      #050717;
  --border:       #2D3375;
  --border-soft:  #1f2552;

  --text:         #E8E8F0;
  --text-dim:     #9B9BB5;
  --text-mute:    #6E6F90;

  --magenta:      #FF2E88;
  --magenta-glow: rgba(255, 46, 136, 0.55);
  --cyan:         #00F0FF;
  --cyan-glow:    rgba(0, 240, 255, 0.5);
  --orange:       #FF6B35;
  --purple:       #7B2CBF;
  --yellow:       #FFD23F;
  --green:        #A3FF7B;

  --display:  'Monoton', 'Space Grotesk', sans-serif;
  --title:    'Space Grotesk', system-ui, sans-serif;
  --body:     'Inter', system-ui, sans-serif;
  --mono:     'JetBrains Mono', ui-monospace, monospace;

  --maxw: 760px;
  --maxw-wide: 1080px;
}

/* ---------- 2. Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

/* ---------- CRT scanline overlay (sits above all content, ignores clicks) ---------- */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent 0,
    transparent 2px,
    rgba(0, 0, 0, 0.22) 2px,
    rgba(0, 0, 0, 0.22) 3px
  );
  pointer-events: none;
  z-index: 9999;
  mix-blend-mode: multiply;
  opacity: 0.55;
}
@media (prefers-reduced-transparency: reduce) {
  body::after { display: none; }
}
/* Lower scanline contrast on phone screens — they're more visually noisy at small size */
@media (max-width: 720px) {
  body::after { opacity: 0.32; }
}

/* ---------- Skip-to-content link (a11y — only visible when keyboard-focused) ---------- */
.skip-link {
  position: fixed;
  top: 12px;
  left: 50%;
  transform: translate(-50%, -200%);
  z-index: 10001;
  padding: 10px 18px;
  background: var(--bg-deep);
  color: var(--cyan);
  font-family: var(--mono);
  font-size: 0.85rem;
  border: 1px solid var(--cyan);
  border-radius: 4px;
  text-decoration: none;
  background-image: none;
  transition: transform 0.18s ease;
  box-shadow: 0 0 16px var(--cyan-glow);
}
.skip-link:focus,
.skip-link:focus-visible {
  transform: translate(-50%, 0);
  outline: none;
}

/* ---------- Page-transition fade for hx-boost navigation ---------- */
main { transition: opacity 0.18s ease; }
body.htmx-swapping main { opacity: 0; }

/* ---------- Drop cap on /about lead paragraph ---------- */
.about-lead::first-letter {
  float: left;
  font-family: var(--display);
  font-size: 4.5rem;
  line-height: 0.85;
  padding: 6px 14px 0 0;
  color: var(--magenta);
  text-shadow:
    0 0 6px var(--magenta-glow),
    0 0 18px var(--magenta-glow);
  -webkit-text-stroke: 1px #08020e;
  paint-order: stroke fill;
}

/* ---------- Reading progress bar (only fills on blog post pages) ---------- */
.reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--magenta), var(--cyan));
  z-index: 10000;
  pointer-events: none;
  box-shadow:
    0 0 8px var(--magenta-glow),
    0 0 16px rgba(255, 46, 136, 0.4);
  transition: width 0.05s linear;
}

/* ---------- Chroma syntax highlighting — synthwave palette on the existing pre/code ---------- */
.chroma {
  color: var(--text);
  background: transparent;
}
.chroma .err  { color: #ff5f57; }
.chroma .k, .chroma .kc, .chroma .kd, .chroma .kn, .chroma .kp, .chroma .kr, .chroma .kt { color: var(--magenta); font-weight: 500; }
.chroma .o, .chroma .ow { color: var(--magenta); }
.chroma .nb, .chroma .bp { color: #FFB37A; }
.chroma .nf, .chroma .fm, .chroma .nc { color: var(--cyan); }
.chroma .nv, .chroma .vc, .chroma .vg, .chroma .vi { color: var(--text); }
.chroma .nt { color: var(--cyan); }
.chroma .na { color: #FFD23F; }
.chroma .s, .chroma .sb, .chroma .sc, .chroma .dl, .chroma .sd, .chroma .s2, .chroma .se, .chroma .sh, .chroma .si, .chroma .sx, .chroma .sr, .chroma .s1, .chroma .ss { color: #A3BE8C; }
.chroma .m, .chroma .mb, .chroma .mf, .chroma .mh, .chroma .mi, .chroma .il, .chroma .mo { color: #FFE680; }
.chroma .c, .chroma .ch, .chroma .cm, .chroma .c1, .chroma .cs, .chroma .cp, .chroma .cpf { color: var(--text-mute); font-style: italic; }
.chroma .ge { font-style: italic; }
.chroma .gs { font-weight: bold; }
.chroma .gh, .chroma .gu { color: var(--magenta); font-weight: 500; }
.chroma .gd { color: #ff5f57; }
.chroma .gi { color: #A3FF7B; }
.chroma .gp { color: var(--cyan); }
.chroma .ln { color: var(--text-mute); user-select: none; padding-right: 12px; }
body {
  margin: 0;
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.7;
  color: var(--text);
  background: var(--bg);
  background-image:
    radial-gradient(ellipse at 50% -200px, rgba(123, 44, 191, 0.35), transparent 60%),
    radial-gradient(ellipse at 100% 800px, rgba(255, 46, 136, 0.08), transparent 50%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }

/* Body links — animated gradient underline that draws in on hover */
a {
  color: var(--cyan);
  text-decoration: none;
  background-image: linear-gradient(90deg, var(--magenta), var(--cyan));
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0% 1.5px;
  padding-bottom: 2px;
  transition: background-size 0.28s cubic-bezier(0.65, 0, 0.35, 1), color 0.15s ease;
}
a:hover {
  color: var(--magenta);
  background-size: 100% 2px;
}

/* Visible focus rings for keyboard navigation — synthwave-themed */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--magenta);
  outline-offset: 3px;
  border-radius: 2px;
}
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}
button:focus-visible,
.btn:focus-visible,
.nav-toggle:focus-visible {
  outline-color: var(--cyan);
  box-shadow: 0 0 12px var(--cyan-glow);
}

::selection { background: var(--magenta); color: var(--bg-deep); }

/* ---------- 3. Typography ---------- */
h1, h2, h3, h4 { font-family: var(--title); font-weight: 700; line-height: 1.25; margin: 0 0 0.6em; color: var(--text); }
h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); letter-spacing: -0.02em; }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.1rem); letter-spacing: -0.01em; margin-top: 2.6em; }
h3 { font-size: 1.25rem; margin-top: 2em; color: var(--cyan); }
h4 { font-size: 1.05rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.08em; }

p { margin: 0 0 1.2em; }
strong { color: var(--text); font-weight: 600; }
em { color: var(--magenta); font-style: italic; }
hr {
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border), transparent);
  margin: 2.5em 0;
}

blockquote {
  border-left: 3px solid var(--magenta);
  padding: 0.4em 1.2em;
  margin: 1.5em 0;
  color: var(--text-dim);
  font-style: italic;
  background: rgba(255, 46, 136, 0.04);
}

code {
  font-family: var(--mono);
  font-size: 0.88em;
  background: var(--bg-deep);
  color: var(--cyan);
  padding: 2px 7px;
  border-radius: 3px;
  border: 1px solid var(--border-soft);
}

pre {
  font-family: var(--mono);
  font-size: 0.82rem;
  background: var(--bg-deep);
  color: var(--text);
  padding: 18px 22px;
  border-radius: 6px;
  border: 1px solid var(--border);
  overflow-x: auto;
  line-height: 1.6;
  margin: 1.5em 0;
  position: relative;
}
pre code { background: none; border: none; padding: 0; color: inherit; font-size: inherit; }

/* Copy button — appears on hover in the top-right of every <pre> */
.code-copy {
  position: absolute;
  top: 6px;
  right: 6px;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 9px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-mute);
  border-radius: 3px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s, color 0.15s, border-color 0.15s;
}
pre:hover .code-copy { opacity: 1; }
.code-copy:hover { color: var(--cyan); border-color: var(--cyan); }
.code-copy.copied { color: var(--green); border-color: var(--green); }

/* Section anchor links inside .post-article — hover any h2/h3 to reveal a # */
.post-article h2,
.post-article h3 {
  position: relative;
}
.post-article h2 .anchor,
.post-article h3 .anchor {
  position: absolute;
  left: -1.4em;
  top: 0;
  font-family: var(--mono);
  color: var(--magenta);
  opacity: 0;
  background: none;
  padding: 0;
  transition: opacity 0.15s;
  text-shadow: 0 0 8px var(--magenta-glow);
}
.post-article h2:hover .anchor,
.post-article h3:hover .anchor,
.anchor:focus { opacity: 0.85; }

ul, ol { padding-left: 1.4em; margin: 0 0 1.4em; }
li { margin-bottom: 0.4em; }
li::marker { color: var(--magenta); }

/* ---------- 4. Layout ---------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.wrap-wide { max-width: var(--maxw-wide); margin: 0 auto; padding: 0 24px; }

main { padding: 60px 0 100px; }
section { margin-bottom: 4rem; }

/* ---------- 5. Nav ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(10, 14, 39, 0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border-soft);
}
.nav-inner {
  max-width: var(--maxw-wide);
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav-brand {
  font-family: var(--display);
  font-size: 1.35rem;
  color: var(--magenta);
  text-shadow: 0 0 12px var(--magenta-glow);
  letter-spacing: 0.04em;
  border: 0;
}
.nav-brand:hover { color: var(--magenta); border: 0; filter: brightness(1.2); }

.nav-links {
  display: flex;
  gap: 22px;
  font-family: var(--mono);
  font-size: 0.85rem;
  text-transform: lowercase;
}
.nav-links a {
  color: var(--text-dim);
  border: 0;
  letter-spacing: 0.02em;
}
.nav-links a:hover, .nav-links a.active { color: var(--cyan); text-shadow: 0 0 8px var(--cyan-glow); }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--border);
  color: var(--cyan);
  font-family: var(--mono);
  font-size: 0.8rem;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
}

/* ---------- 6. Synthwave hero — full road scene ---------- */
.hero {
  position: relative;
  height: clamp(560px, 78vh, 760px);
  overflow: hidden;
  border-bottom: 1px solid var(--border-soft);
  background: var(--bg-deep);
}

/* The full SVG scene — palms, sun, road, car — fills the hero */
.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  display: block;
}

/* Hero content sits over the upper sky portion, centered */
.hero .hero-inner {
  position: relative;
  z-index: 2;
  padding-top: 60px;
}

/* Strengthen text shadow + dark outline so the name reads against the bright sky/sun */
.hero-name {
  -webkit-text-stroke: 2px #08020e;
  paint-order: stroke fill;
  text-shadow:
    0 0 6px var(--magenta-glow),
    0 0 18px var(--magenta-glow),
    0 0 36px rgba(255, 46, 136, 0.4),
    0 2px 12px rgba(0, 0, 0, 0.6);
  position: relative;
  cursor: default;
}

/* Glitch ghosts — cyan + magenta offset copies that flicker on hover */
.hero-name::before,
.hero-name::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  -webkit-text-stroke: 0;
  paint-order: normal;
  text-shadow: none;
  opacity: 0;
  pointer-events: none;
}
.hero-name::before { color: var(--cyan); }
.hero-name::after  { color: var(--magenta); }

.hero-name:hover::before {
  opacity: 0.85;
  animation: glitchTop 0.42s steps(2, end) infinite;
}
.hero-name:hover::after {
  opacity: 0.85;
  animation: glitchBottom 0.42s steps(2, end) infinite;
}

@keyframes glitchTop {
  0%   { transform: translate(2px, -2px); clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%); }
  20%  { transform: translate(-3px, 1px); clip-path: polygon(0 12%, 100% 12%, 100% 22%, 0 22%); }
  40%  { transform: translate(2px, -1px); clip-path: polygon(0 28%, 100% 28%, 100% 36%, 0 36%); }
  60%  { transform: translate(-2px, 2px); clip-path: polygon(0 8%, 100% 8%, 100% 18%, 0 18%); }
  80%  { transform: translate(3px, 0);    clip-path: polygon(0 24%, 100% 24%, 100% 32%, 0 32%); }
  100% { transform: translate(-1px, -2px);clip-path: polygon(0 0, 100% 0, 100% 18%, 0 18%); }
}
@keyframes glitchBottom {
  0%   { transform: translate(-2px, 2px); clip-path: polygon(0 65%, 100% 65%, 100% 100%, 0 100%); }
  20%  { transform: translate(3px, -1px); clip-path: polygon(0 78%, 100% 78%, 100% 88%, 0 88%); }
  40%  { transform: translate(-1px, 2px); clip-path: polygon(0 90%, 100% 90%, 100% 100%, 0 100%); }
  60%  { transform: translate(2px, -2px); clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%); }
  80%  { transform: translate(-3px, 1px); clip-path: polygon(0 84%, 100% 84%, 100% 92%, 0 92%); }
  100% { transform: translate(1px, 2px);  clip-path: polygon(0 60%, 100% 60%, 100% 72%, 0 72%); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-name:hover::before,
  .hero-name:hover::after { animation: none; opacity: 0; }
}
.hero-tag {
  text-shadow: 0 0 8px var(--cyan-glow), 0 1px 4px rgba(0, 0, 0, 0.6);
}
.hero-pitch {
  text-shadow: 0 1px 6px rgba(10, 14, 39, 0.85);
  background: rgba(10, 14, 39, 0.35);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  padding: 14px 22px;
  border-radius: 6px;
  border: 1px solid rgba(255, 46, 136, 0.18);
}

/* Primary CTA row in hero — anchors the user's first decision */
.hero-actions {
  margin: 28px 0 0;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
}
.hero-actions .btn { font-size: 0.95rem; padding: 14px 26px; }
@media (max-width: 720px) {
  .hero-actions { gap: 10px; }
  /* Hit ≥44×44px on mobile: 14+14 vertical padding + ~16px font = ~44px tall */
  .hero-actions .btn { font-size: 0.9rem; padding: 14px 22px; }
}

/* Car positioning — entirely in CSS so the mobile override at the bottom wins reliably.
   Car sits in the RIGHT LANE on all screen sizes. Mobile breakpoint just shrinks the
   scale and nudges position so the right side doesn't get cropped on a phone. */
.hero-car {
  transform: translate(1010px, 680px) scale(1.5);
  transform-origin: 0 0;
}

/* Container for the receding floor + horizon glow */
.grid-floor {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 280px;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

/* The glowing horizon line at the top of the grid floor */
.grid-floor::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 46, 136, 0.85) 25%,
    rgba(0, 240, 255, 0.95) 50%,
    rgba(255, 46, 136, 0.85) 75%,
    transparent 100%
  );
  box-shadow:
    0 0 14px rgba(255, 46, 136, 0.7),
    0 0 28px rgba(255, 46, 136, 0.35),
    0 0 50px rgba(0, 240, 255, 0.25);
  z-index: 3;
}

/* The 3D infinity floor — perspective-rotated grid that scrolls toward you */
.grid-floor::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: -25%;
  right: -25%;
  height: 720px;
  background-image:
    linear-gradient(to right, rgba(0, 240, 255, 0.55) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 240, 255, 0.55) 1px, transparent 1px);
  background-size: 64px 64px;
  background-position: 0 0;
  transform: perspective(340px) rotateX(72deg);
  transform-origin: 50% 100%;
  animation: gridScroll 2.6s linear infinite;
  mask-image: linear-gradient(180deg, transparent 0%, #000 38%, #000 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 38%, #000 100%);
}

@keyframes gridScroll {
  from { background-position: 0 0; }
  to   { background-position: 0 64px; }
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  .grid-floor::after { animation: none; }
}

.hero-inner { position: relative; z-index: 2; text-align: center; }
.hero-name {
  font-family: var(--display);
  font-size: clamp(3rem, 8vw, 5.5rem);
  color: var(--magenta);
  text-shadow:
    0 0 6px var(--magenta-glow),
    0 0 18px var(--magenta-glow),
    0 0 36px rgba(255, 46, 136, 0.3);
  letter-spacing: 0.02em;
  margin: 0 0 0.4em;
  line-height: 1;
}
.hero-tag {
  font-family: var(--mono);
  font-size: 0.95rem;
  color: var(--cyan);
  text-shadow: 0 0 8px var(--cyan-glow);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  margin: 0 0 1.6em;
}
.hero-pitch {
  max-width: 580px;
  margin: 0 auto;
  color: var(--text);
  font-size: 1.05rem;
  line-height: 1.75;
}

/* Smaller hero variant for non-home pages — with a synthwave horizon glow strip */
.page-head {
  position: relative;
  padding: 70px 0 50px;
  margin-bottom: 30px;
  border-bottom: 1px solid var(--border-soft);
  background:
    radial-gradient(ellipse 60% 90% at 50% 110%, rgba(255, 46, 136, 0.22) 0%, transparent 60%),
    linear-gradient(180deg, transparent 0%, rgba(123, 44, 191, 0.10) 60%, rgba(255, 46, 136, 0.06) 100%);
  overflow: hidden;
}

/* Glowing horizon line at the bottom of the page-head — same magenta+cyan as the home hero */
.page-head::after {
  content: '';
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 46, 136, 0.6) 25%,
    rgba(0, 240, 255, 0.85) 50%,
    rgba(255, 46, 136, 0.6) 75%,
    transparent 100%
  );
  box-shadow:
    0 0 12px rgba(255, 46, 136, 0.5),
    0 0 24px rgba(0, 240, 255, 0.25);
  pointer-events: none;
}
.page-head h1 {
  font-family: var(--title);
  font-size: clamp(2rem, 4vw, 2.8rem);
  color: var(--text);
  margin: 0 0 0.3em;
}
.page-head h1 .slash { color: var(--magenta); margin-right: 6px; }
.page-head .lede {
  font-family: var(--mono);
  font-size: 0.9rem;
  color: var(--cyan);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0;
}

/* ---------- 7. Cards / list items ---------- */
.post-list { list-style: none; padding: 0; }
.post-list li {
  padding: 18px 0;
  border-bottom: 1px solid var(--border-soft);
}
.post-list li:last-child { border-bottom: none; }
.post-row {
  display: flex;
  gap: 20px;
  align-items: baseline;
  flex-wrap: wrap;
}
.post-date {
  font-family: var(--mono);
  font-size: 0.82rem;
  color: var(--text-mute);
  min-width: 90px;
}
.post-title { font-size: 1.1rem; color: var(--text); border: 0; }
.post-title:hover { color: var(--magenta); border: 0; }
.post-tags { font-family: var(--mono); font-size: 0.75rem; color: var(--text-mute); margin-left: auto; }

.year-label {
  font-family: var(--display);
  color: var(--magenta);
  font-size: 1.4rem;
  letter-spacing: 0.05em;
  margin: 2em 0 0.4em;
  text-shadow: 0 0 10px var(--magenta-glow);
}

/* ---------- 8. uses / homelab spec list ---------- */
.spec {
  margin: 1em 0 2em;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: rgba(26, 31, 74, 0.4);
  overflow: hidden;
}
.spec h3 {
  margin: 0;
  padding: 12px 18px;
  background: linear-gradient(90deg, rgba(255, 46, 136, 0.15), transparent);
  border-bottom: 1px solid var(--border);
  color: var(--magenta);
  font-family: var(--mono);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.spec ul { list-style: none; padding: 4px 0; margin: 0; }
.spec li {
  padding: 9px 18px;
  border-bottom: 1px solid var(--border-soft);
  font-family: var(--mono);
  font-size: 0.88rem;
  display: flex;
  gap: 14px;
  align-items: baseline;
}
.spec li:last-child { border-bottom: none; }
.spec .key {
  color: var(--cyan);
  min-width: 150px;
  flex-shrink: 0;
}
.spec .val { color: var(--text); flex: 1; }
.spec .val .note { color: var(--text-mute); font-size: 0.85em; }

/* ---------- 9. Buttons / CTA — clear primary / secondary / tertiary hierarchy ---------- */
.btn {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 12px 22px;
  border-radius: 4px;
  border: 1px solid var(--magenta);
  color: var(--magenta);
  background: transparent;
  cursor: pointer;
  background-image: none;
  transition: background 0.18s, color 0.18s, border-color 0.18s, box-shadow 0.18s, transform 0.18s;
}
.btn:hover {
  background: var(--magenta);
  color: var(--bg);
  border-color: var(--magenta);
  box-shadow: 0 0 24px var(--magenta-glow);
}

/* PRIMARY — heaviest visual weight: magenta-filled, perpetual glow, slight lift on hover.
   Use this for the single most important action on a page. */
.btn-primary {
  background: var(--magenta);
  color: var(--bg);
  border-color: var(--magenta);
  font-weight: 600;
  box-shadow:
    0 0 12px var(--magenta-glow),
    0 0 28px rgba(255, 46, 136, 0.28);
}
.btn-primary:hover {
  background: var(--magenta);
  color: var(--bg);
  filter: brightness(1.12);
  box-shadow:
    0 0 18px var(--magenta-glow),
    0 0 40px rgba(255, 46, 136, 0.4);
  transform: translateY(-1px);
}

/* SECONDARY — same as base .btn but with the explicit class for readability. */
.btn-secondary { /* alias of .btn — kept explicit for hierarchy clarity */ }

/* TERTIARY — text-only with the same animated underline as body links, but smaller and uppercase. */
.btn-tertiary {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding-bottom: 3px;
  background-image: linear-gradient(90deg, var(--magenta), var(--cyan));
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 100% 1.5px;
  transition: color 0.15s;
}
.btn-tertiary:hover { color: var(--magenta); background-size: 100% 2px; }

/* Cyan variant of secondary, for contrasting CTAs */
.btn-cyan { border-color: var(--cyan); color: var(--cyan); }
.btn-cyan:hover { background: var(--cyan); color: var(--bg); border-color: var(--cyan); box-shadow: 0 0 24px var(--cyan-glow); }

/* ---------- 10. Forms ---------- */
.form-row { margin-bottom: 16px; }
.form-row label {
  display: block;
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--cyan);
  letter-spacing: 0.06em;
  text-transform: lowercase;
  margin-bottom: 5px;
}
.form-row input,
.form-row textarea,
.form-row select {
  width: 100%;
  font-family: var(--mono);
  font-size: 0.95rem;
  background: var(--bg-deep);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 11px 14px;
  border-radius: 4px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.form-row input:focus,
.form-row textarea:focus,
.form-row select:focus {
  border-color: var(--magenta);
  box-shadow: 0 0 0 3px rgba(255, 46, 136, 0.15);
}
.form-row textarea { min-height: 130px; resize: vertical; font-family: var(--body); }

/* ---------- 11. Palm tree silhouette divider ---------- */
.palms {
  display: block;
  width: 100%;
  height: 52px;
  margin: 30px 0;
  opacity: 0.55;
}

/* ---------- 12. Tags / badges ---------- */
.tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.72rem;
  padding: 2px 8px;
  border-radius: 3px;
  border: 1px solid var(--border);
  color: var(--cyan);
  background: rgba(0, 240, 255, 0.06);
  margin-right: 5px;
  letter-spacing: 0.04em;
}
.tag.hot { color: var(--magenta); border-color: rgba(255, 46, 136, 0.4); background: rgba(255, 46, 136, 0.06); }
.tag.warm { color: var(--orange); border-color: rgba(255, 107, 53, 0.4); background: rgba(255, 107, 53, 0.06); }

/* ---------- 13. Footer — VHS tape easter egg ---------- */
footer {
  margin-top: 80px;
  padding: 60px 24px 40px;
  border-top: 1px solid var(--border-soft);
  background: var(--bg-deep);
  font-family: var(--mono);
  font-size: 0.82rem;
  color: var(--text-mute);
}

/* The cassette spine — long horizontal black plastic case, no visible reels */
.footer-inner {
  position: relative;
  max-width: 820px;
  margin: 0 auto;
  padding: 0;
  display: block;
  height: clamp(96px, 12vw, 120px);
  background: linear-gradient(180deg, #28283a 0%, #15151f 25%, #0c0c14 65%, #050717 100%);
  border: 1.5px solid #3C3C3C;
  border-radius: 8px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    inset 0 -1px 0 rgba(0, 0, 0, 0.6),
    0 6px 18px rgba(0, 0, 0, 0.55),
    0 0 60px rgba(255, 46, 136, 0.04);
}

/* Anti-record tab notch on the lower-left */
.footer-inner::before {
  content: '';
  position: absolute;
  bottom: 10%;
  left: 14px;
  width: 16px;
  height: 11px;
  background: #050717;
  border: 1px solid #2a2a3a;
  border-radius: 1.5px;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.6);
}

/* Right brand panel with vertical "VIDEO CASSETTE" text */
.footer-inner::after {
  content: 'VIDEO CASSETTE';
  position: absolute;
  top: 8%;
  bottom: 8%;
  right: 10px;
  width: 26px;
  background: linear-gradient(180deg, #a8123a 0%, #6a0a22 100%);
  border-radius: 2px;
  color: rgba(255, 240, 240, 0.9);
  font-family: var(--mono);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    inset 0 -1px 0 rgba(0, 0, 0, 0.4);
}

/* The cream label running across most of the spine */
.vhs-label {
  position: absolute;
  top: 8%;
  bottom: 8%;
  left: 46px;
  right: 46px;
  background: linear-gradient(180deg, #fcf2dc 0%, #f5e7c5 100%);
  border-radius: 1.5px;
  border: 1px solid #d8c898;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.5),
    0 1px 2px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 4px 14px;
  font-family: 'Caveat', cursive;
  text-align: center;
  transform: rotate(-0.25deg);
}

/* Subtle paper aging spots on the label */
.vhs-label::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle 14px at 6% 28%, rgba(120, 80, 30, 0.10), transparent 60%),
    radial-gradient(circle 10px at 94% 72%, rgba(120, 80, 30, 0.07), transparent 60%);
  border-radius: 1.5px;
  pointer-events: none;
}

.vhs-label > div:first-child {
  font-size: clamp(0.95rem, 2vw, 1.3rem);
  color: #2a1a08;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: 0.01em;
  position: relative;
}

.vhs-label > .footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  font-size: clamp(0.8rem, 1.6vw, 1.05rem);
  font-weight: 500;
  position: relative;
  line-height: 1.1;
}

.vhs-label > .footer-links a {
  color: #4a2a18;
  border: 0;
  border-bottom: 1px solid rgba(74, 42, 24, 0.35);
  padding-bottom: 1px;
  font-weight: 500;
  transition: color 0.15s, border-color 0.15s;
}
.vhs-label > .footer-links a:hover {
  color: #b80a4a;
  border-bottom-color: #b80a4a;
}

/* SV credit row stays below the tape, unchanged */

/* SV credit row — shown on every page below the main footer-inner */
.footer-credit {
  max-width: var(--maxw-wide);
  margin: 24px auto 0;
  padding: 18px 24px 0;
  border-top: 1px dashed var(--border-soft);
  text-align: center;
  font-family: var(--mono);
  font-size: 0.78rem;
  /* Use --text-dim instead of --text-mute to clear WCAG AA 4.5:1 contrast on the dark footer */
  color: var(--text-dim);
  letter-spacing: 0.04em;
}
.footer-credit a {
  color: var(--magenta);
  border: 0;
  border-bottom: 1px dotted rgba(255, 46, 136, 0.5);
  padding-bottom: 1px;
  transition: color 0.15s, text-shadow 0.15s, border-color 0.15s;
}
.footer-credit a:hover {
  color: var(--cyan);
  border-bottom-color: var(--cyan);
  text-shadow: 0 0 8px var(--cyan-glow);
}

/* ---------- 14. Now-page status pills ---------- */
.now-block {
  border-left: 3px solid var(--magenta);
  padding: 4px 0 4px 22px;
  margin-bottom: 28px;
}
.now-block.cyan    { border-color: var(--cyan); }
.now-block.orange  { border-color: var(--orange); }
.now-block.green   { border-color: var(--green); }
.now-block.magenta { border-color: var(--magenta); }
.now-block h3 {
  margin: 0 0 6px;
  color: var(--text);
  font-family: var(--title);
  font-size: 1.1rem;
}
.now-block .meta {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--text-mute);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.now-block p { margin: 0; color: var(--text-dim); font-size: 0.97rem; }

/* ---------- 15. Article (blog post) ---------- */
.post-article {
  max-width: 720px;
  margin: 0 auto;
}
.post-article .post-meta {
  font-family: var(--mono);
  font-size: 0.85rem;
  color: var(--text-mute);
  margin-bottom: 24px;
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.post-article h1 {
  font-family: var(--title);
  letter-spacing: -0.01em;
  margin-bottom: 0.4em;
}
.post-article h2 { color: var(--cyan); }
.post-article p { font-size: 1.05rem; line-height: 1.8; }

/* Pull quotes inside blog posts — large, magenta-accented, centered */
.post-article blockquote {
  max-width: 640px;
  margin: 2.5em auto;
  padding: 0 30px;
  font-size: clamp(1.15rem, 2.4vw, 1.4rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1.45;
  color: var(--text);
  border-left: 0;
  background: none;
  text-align: center;
  position: relative;
}
.post-article blockquote::before,
.post-article blockquote::after {
  position: absolute;
  font-family: var(--display);
  color: var(--magenta);
  font-size: 3rem;
  line-height: 1;
  opacity: 0.7;
  text-shadow: 0 0 12px var(--magenta-glow);
}
.post-article blockquote::before { content: '"'; top: -8px; left: 0; }
.post-article blockquote::after  { content: '"'; bottom: -22px; right: 0; }
.post-article blockquote p { font-size: inherit; line-height: inherit; margin: 0; }
.post-article blockquote cite,
.post-article blockquote footer {
  display: block;
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 0.78rem;
  font-style: normal;
  color: var(--text-mute);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ---------- 16. Utilities ---------- */
.muted { color: var(--text-mute); }
.center { text-align: center; }
.glow-cyan { color: var(--cyan); text-shadow: 0 0 8px var(--cyan-glow); }
.glow-mag  { color: var(--magenta); text-shadow: 0 0 8px var(--magenta-glow); }

/* ---------- 17. Mobile ---------- */
@media (max-width: 720px) {
  body { font-size: 16px; }
  /* Mobile nav drawer — each link gets a 44px+ touch target by giving it block-level padding.
     Reduces gap because padding now provides the spacing. */
  .nav-links { display: none; flex-direction: column; gap: 2px; padding: 8px 0 16px; }
  .nav-links.open { display: flex; }
  .nav-links a { display: block; padding: 14px 4px; }
  .nav-toggle { display: inline-block; padding: 10px 16px; }
  .nav-inner { flex-wrap: wrap; }
  .nav-links { width: 100%; }

  .hero { padding: 50px 0 160px; }
  .grid-floor { height: 200px; }
  .grid-floor::after { height: 520px; transform: perspective(260px) rotateX(70deg); background-size: 50px 50px; }
  @keyframes gridScroll { from { background-position: 0 0; } to { background-position: 0 50px; } }
  .hero-pitch { font-size: 1rem; padding: 0 8px; }

  /* Mobile: keep car in right lane but shrink + nudge inward so right side doesn't crop */
  .hero-car {
    transform: translate(920px, 680px) scale(1.3) !important;
    transform-origin: 0 0 !important;
  }

  main { padding: 36px 0 60px; }
  .page-head { padding: 48px 0 28px; }

  .post-row { gap: 6px; }
  .post-date { min-width: auto; }
  .post-tags { margin-left: 0; }

  .spec li { flex-direction: column; gap: 4px; padding: 10px 14px; }
  .spec .key { min-width: auto; }

  /* VHS spine — taller on mobile so the label has room for the larger tap-target links */
  .footer-inner { display: block; height: clamp(110px, 28vw, 150px); }
  .footer-inner::after { width: 22px; font-size: 0.5rem; letter-spacing: 0.12em; }
  .footer-inner::before { width: 13px; height: 9px; left: 10px; }
  .vhs-label { left: 38px; right: 38px; gap: 4px; padding: 10px 14px; }

  /* Footer link tap-targets — each link gets vertical padding so adjacent links don't collide */
  .vhs-label > .footer-links { gap: 6px 16px; }
  .vhs-label > .footer-links a { padding: 8px 4px; line-height: 1.1; }
}

/* ---------- 18. Vaporwave easter-egg palette (toggled by konami code) ---------- */
body.vaporwave {
  --bg: #1a0d2e;
  --bg-alt: #2d1b54;
  --bg-card: #3d2870;
  --bg-deep: #110720;
  --magenta: #FF99CC;
  --magenta-glow: rgba(255, 153, 204, 0.6);
  --cyan: #99FFEE;
  --cyan-glow: rgba(153, 255, 238, 0.55);
  --orange: #FFB385;
  --text: #F5E1FF;
}
body.vaporwave::before {
  content: '~~~ AESTHETIC MODE ~~~';
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10001;
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--cyan);
  background: rgba(26, 13, 46, 0.85);
  padding: 4px 12px;
  border: 1px solid var(--cyan);
  border-radius: 3px;
  letter-spacing: 0.18em;
  pointer-events: none;
  text-shadow: 0 0 8px var(--cyan-glow);
}

/* ---------- 19. Tag filter chips on /writing ---------- */
.tag-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 1.4em 0 1em;
  padding: 14px 16px;
  border: 1px solid var(--border-soft);
  border-radius: 4px;
  background: var(--bg-card);
}
.tag-filter-label {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--text-mute);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-right: 6px;
  align-self: center;
}
.tag-chip {
  font-family: var(--mono);
  font-size: 0.78rem;
  background: var(--bg-deep);
  color: var(--text-dim);
  border: 1px solid var(--border);
  padding: 4px 10px;
  border-radius: 3px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.tag-chip:hover { color: var(--cyan); border-color: var(--cyan); }
.tag-chip.active {
  background: var(--magenta);
  color: var(--bg-deep);
  border-color: var(--magenta);
  box-shadow: 0 0 12px var(--magenta-glow);
}
.tag-filter-clear {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--text-mute);
  background: none;
  border: 0;
  padding: 4px 8px;
  cursor: pointer;
  margin-left: auto;
  align-self: center;
}
.tag-filter-clear:hover { color: var(--cyan); }

/* ---------- 20. Print — strip noise and let the article speak ---------- */
@media print {
  body { background: #fff !important; color: #000 !important; }
  body::after { display: none; }            /* CRT scanlines off */
  .reading-progress { display: none; }
  nav, footer, .nav, .footer-inner, .footer-credit, .palms { display: none !important; }
  .hero, .page-head { display: none; }
  main { padding: 0; }
  a { color: #000; background-image: none; padding-bottom: 0; }
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    color: #555;
  }
  pre, code { background: #f4f4f4 !important; color: #111 !important; border: 1px solid #ddd !important; }
  .post-article { max-width: none; }
  .post-article p { font-size: 11pt; line-height: 1.55; color: #000; }
  h1, h2, h3, h4 { color: #000 !important; text-shadow: none !important; -webkit-text-stroke: 0 !important; }
  blockquote { border-left: 3px solid #888 !important; color: #333 !important; background: none !important; }
  blockquote::before, blockquote::after { display: none; }
  .tag, .anchor, .code-copy { display: none; }
}