/* PALEOTRON — phosphor-amber CRT theme.
   Boldness spent in one place: the phosphor glow on display type and the
   vector hero. Everything else stays quiet. */

:root{
  --crt-bg:    #0a0e14;
  --crt-bg-2:  #0d1320;
  --crt-line:  #1b2433;
  --phosphor:  #ffb000;
  --phosphor-dim: #c77800;
  --cyan:      #36e0d0;
  --ink:       #c9d4e0;
  --ink-dim:   #6b7689;

  --mono: ui-monospace, "Cascadia Code", "JetBrains Mono", "SF Mono", Consolas, Menlo, monospace;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;

  --wrap: 72rem;
  --glow: 0 0 1px rgba(255,176,0,.5), 0 0 14px rgba(255,176,0,.18);
}

*{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

body{
  margin: 0;
  background: var(--crt-bg);
  /* barely-there scanline; static, harmless under reduced-motion */
  background-image: repeating-linear-gradient(
    rgba(255,255,255,.012) 0 1px, transparent 1px 3px);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a{ color: var(--cyan); text-decoration: none; }
a:hover{ text-decoration: underline; }

:focus-visible{
  outline: 2px solid var(--phosphor);
  outline-offset: 3px;
}

.skip{
  position: absolute; left: -9999px; top: 0;
  background: var(--phosphor); color: #000; padding: .5rem 1rem; z-index: 10;
}
.skip:focus{ left: 0; }

/* ---- top bar ---------------------------------------------------------- */
.topbar{
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  max-width: var(--wrap); margin: 0 auto;
  padding: 1.1rem clamp(1rem, 4vw, 2.5rem);
  border-bottom: 1px solid var(--crt-line);
}
.brand{ display: flex; align-items: baseline; gap: .6rem; }
.brand-mark{
  font-weight: 700; letter-spacing: .28em; font-size: 1.05rem;
  color: var(--phosphor); text-shadow: var(--glow); text-transform: uppercase;
}
.brand-sub{ color: var(--ink-dim); font-size: .72rem; letter-spacing: .25em; text-transform: uppercase; }
.brand:hover{ text-decoration: none; }

.nav{ display: flex; gap: clamp(.7rem, 2.5vw, 1.6rem); flex-wrap: wrap; }
.nav a{
  color: var(--ink-dim); font-size: .78rem; letter-spacing: .16em;
  text-transform: uppercase; padding: .2rem 0; border-bottom: 1px solid transparent;
}
.nav a:hover{ color: var(--ink); text-decoration: none; }
.nav a.active{ color: var(--phosphor); border-bottom-color: var(--phosphor-dim); }

/* ---- generic page ----------------------------------------------------- */
main{ max-width: var(--wrap); margin: 0 auto; padding: clamp(1.5rem,5vw,3.5rem) clamp(1rem,4vw,2.5rem); }

.eyebrow{
  font-size: .72rem; letter-spacing: .25em; text-transform: uppercase;
  color: var(--phosphor-dim); margin: 0 0 1rem;
}
.eyebrow a{ color: var(--phosphor-dim); }

.page-title{
  font-family: var(--mono); font-weight: 700;
  font-size: clamp(1.7rem, 5vw, 2.6rem); line-height: 1.1; letter-spacing: -.01em;
  margin: 0 0 1rem; color: var(--ink);
}
.page-lede{ color: var(--ink-dim); max-width: 46rem; margin: 0 0 2.5rem; }

/* ---- hero ------------------------------------------------------------- */
.hero{ position: relative; padding: clamp(2rem,7vw,5rem) 0 clamp(2rem,6vw,4rem); }
#vector-hero{
  position: absolute; inset: -2rem 0 0 0; width: 100%; height: 100%;
  z-index: 0; opacity: .55; pointer-events: none;
}
.hero-copy{ position: relative; z-index: 1; max-width: 42rem; }
.hero-title{
  font-family: var(--mono); font-weight: 700;
  font-size: clamp(2rem, 6.5vw, 3.6rem); line-height: 1.08; letter-spacing: -.02em;
  margin: .4rem 0 1.3rem; color: var(--phosphor); text-shadow: var(--glow);
}
.hero-lede{ color: var(--ink); max-width: 38rem; margin: 0 0 2rem; }
.hero-cta{ display: flex; gap: .8rem; flex-wrap: wrap; }

.btn{
  display: inline-block; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase;
  padding: .7rem 1.3rem; border: 1px solid var(--phosphor-dim);
  color: var(--phosphor); background: rgba(255,176,0,.04);
}
.btn:hover{ background: rgba(255,176,0,.12); text-decoration: none; }
.btn-ghost{ border-color: var(--crt-line); color: var(--ink-dim); background: transparent; }
.btn-ghost:hover{ color: var(--ink); background: rgba(255,255,255,.03); }

/* ---- bands / sections ------------------------------------------------- */
.band{ margin: clamp(2.5rem,7vw,4.5rem) 0 0; }
.band-head{ display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  border-bottom: 1px solid var(--crt-line); padding-bottom: .6rem; margin-bottom: 1.5rem; }
.band-head h2{ font-size: 1rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink); margin: 0; }
.more{ font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--phosphor-dim); }

/* ---- playground cards ------------------------------------------------- */
.grid{ display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(15rem,1fr)); }
.grid-wide{ grid-template-columns: repeat(auto-fill, minmax(18rem,1fr)); }
.card{
  border: 1px solid var(--crt-line); background: var(--crt-bg-2);
  padding: 1.1rem 1.2rem; display: flex; flex-direction: column; gap: .6rem;
}
.card:hover{ border-color: var(--phosphor-dim); }
.card-head{ display: flex; align-items: flex-start; justify-content: space-between; gap: .6rem; }
.card-title{ font-weight: 700; color: var(--ink); letter-spacing: .02em; }
.card-title:hover{ color: var(--phosphor); text-decoration: none; }
.card-body{ color: var(--ink-dim); font-size: .86rem; }
.card-body p{ margin: 0 0 .6rem; }
.card-body p:last-child{ margin-bottom: 0; }
/* Recovered-project cards carry real prose, screenshots, spec lists and downloads. */
.card-body h2{ font-family: var(--mono); font-size: .74rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--phosphor-dim); margin: .9rem 0 .35rem; }
.card-body img{ max-width: 100%; height: auto; display: block; border: 1px solid var(--crt-line); }
.card-body figure{ margin: .5rem 0; }
.card-body figcaption{ font-size: .7rem; color: var(--ink-dim); margin-top: .3rem; }
.card-body ul{ margin: .2rem 0 .6rem; padding-left: 1.1rem; }
.card-body li{ margin: .12rem 0; }
.card-body a{ color: var(--cyan); text-decoration: underline; text-underline-offset: 2px; }
.card-meta{ color: var(--ink-dim); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; margin-top: auto; }
.arrow{ color: var(--cyan); }

.badge{ font-size: .62rem; letter-spacing: .12em; text-transform: uppercase;
  padding: .15rem .45rem; border: 1px solid var(--crt-line); color: var(--ink-dim); white-space: nowrap; }
.badge-live{ color: var(--phosphor); border-color: var(--phosphor-dim); }
.badge-wip{ color: var(--cyan); border-color: var(--cyan); }
.badge-archived{ color: var(--ink-dim); }

/* ---- essays ----------------------------------------------------------- */
.essay-group{ margin-bottom: 2.5rem; }
.group-title{ font-size: .82rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--phosphor-dim); border-bottom: 1px solid var(--crt-line); padding-bottom: .4rem; margin: 0 0 1rem; }
.essay-list{ display: flex; flex-direction: column; }
.essay-row{ padding: 1rem 0; border-bottom: 1px solid var(--crt-line); }
.essay-link{ font-weight: 700; color: var(--ink); font-size: 1.05rem; }
.essay-link:hover{ color: var(--phosphor); text-decoration: none; }
.essay-meta{ display: flex; gap: .8rem; align-items: center; margin: .35rem 0; }
.tag{ font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--phosphor-dim);
  border: 1px solid var(--crt-line); padding: .1rem .45rem; }
.date{ font-size: .74rem; color: var(--ink-dim); }
.essay-sum{ color: var(--ink-dim); font-size: .9rem; margin: 0; max-width: 48rem; }
.essay-byline{ color: var(--ink-dim); font-size: .8rem; margin: 0 0 2rem; }
.back{ margin-top: 3rem; }

/* ---- prose (long-form reading: serif) --------------------------------- */
.prose{ font-family: var(--serif); font-size: 1.08rem; line-height: 1.75; color: var(--ink); max-width: 42rem; }
.prose h2{ font-family: var(--mono); font-size: 1.05rem; letter-spacing: .04em; text-transform: uppercase;
  color: var(--phosphor-dim); margin: 2.5rem 0 1rem; }
.prose h3{ font-family: var(--mono); font-size: .95rem; color: var(--ink); margin: 2rem 0 .6rem; }
.prose p{ margin: 0 0 1.2rem; }
.prose a{ color: var(--cyan); text-decoration: underline; text-underline-offset: 2px; }
.prose strong{ color: var(--phosphor); font-weight: 700; }
.prose code{ font-family: var(--mono); font-size: .85em; background: var(--crt-bg-2);
  padding: .1rem .35rem; border: 1px solid var(--crt-line); color: var(--cyan); }
.prose blockquote{ border-left: 2px solid var(--phosphor-dim); margin: 1.5rem 0; padding-left: 1.2rem; color: var(--ink-dim); }

/* bio stack definition rows render as plain strong-led lines */
.prose p strong:first-child{ color: var(--phosphor); }

/* ---- links page ------------------------------------------------------- */
.links{ display: flex; flex-direction: column; max-width: 36rem; }
.link-row{ display: flex; align-items: center; justify-content: space-between;
  padding: 1rem .2rem; border-bottom: 1px solid var(--crt-line); color: var(--ink); }
.link-row:hover{ color: var(--phosphor); text-decoration: none; }
.link-name{ letter-spacing: .04em; }

.empty{ color: var(--ink-dim); }

/* ---- footer ----------------------------------------------------------- */
.foot{ max-width: var(--wrap); margin: 4rem auto 0; padding: 2rem clamp(1rem,4vw,2.5rem);
  border-top: 1px solid var(--crt-line); display: flex; flex-direction: column; gap: .5rem; }
.foot-name{ color: var(--phosphor); letter-spacing: .2em; text-transform: uppercase; font-size: .8rem; text-shadow: var(--glow); }
.foot-links{ font-size: .78rem; }
.foot-links a{ color: var(--ink-dim); }
.foot-links a:hover{ color: var(--cyan); }
.foot-meta{ color: var(--ink-dim); font-size: .7rem; letter-spacing: .06em; }

@media (max-width: 640px){
  .topbar{ flex-direction: column; align-items: flex-start; gap: .8rem; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  #vector-hero{ opacity: .35; }
}