/* =========================================================================
   dylan.ninja — "Pixel Renaissance" / amber CRT terminal theme
   VT323 (pixel display) + JetBrains Mono (body) · CRT amber on warm black
   Self-contained: no Bootstrap, no frameworks.
   ========================================================================= */

/* ---- Reset ------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;border-radius:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:hidden}
img,iframe{max-width:100%}
/* grid/flex children must be allowed to shrink below their content size,
   otherwise wide children (e.g. <pre> maps) force horizontal overflow */
.hero__grid>*,.split>*,.cards>*,.gallery>*{min-width:0}
.window,.card,.shot,.frame,.hero__intro{min-width:0}

:root{
  /* palette — warm near-black + CRT amber */
  --bg:#0a0806;
  --bg-2:#0f0c08;
  --panel:#100c07;
  --panel-2:#16110a;
  --amber:#ffb000;
  --amber-bright:#ffc845;
  --amber-dim:#a87a12;
  --text:#f1e4c9;          /* warm paper for body copy */
  --muted:#9a8a63;         /* secondary / labels */
  --line:rgba(255,176,0,.22);
  --line-soft:rgba(255,176,0,.12);
  --line-strong:rgba(255,176,0,.5);
  --grid:rgba(255,176,0,.045);
  --black:#0a0806;
  --glow:0 0 6px rgba(255,176,0,.45), 0 0 18px rgba(255,176,0,.16);
  --glow-soft:0 0 4px rgba(255,176,0,.3);
  --maxw:1120px;
  --pixel:"VT323", ui-monospace, monospace;
  --mono:"JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

/* ---- Base -------------------------------------------------------------- */
body{
  font-family:var(--mono);
  font-size:15px;
  line-height:1.75;
  color:var(--text);
  background-color:var(--bg);
  /* faint pixel grid texture, à la gensyn */
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size:34px 34px;
  background-position:center top;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  overflow-wrap:break-word;
  min-height:100vh;
}

/* CRT scanlines + faint vignette overlays (non-interactive) */
body::before{
  content:"";position:fixed;inset:0;z-index:9998;pointer-events:none;
  background:repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0,
    rgba(0,0,0,0) 2px,
    rgba(0,0,0,.16) 3px,
    rgba(0,0,0,0) 4px);
  mix-blend-mode:multiply;
  opacity:.55;
}
body::after{
  content:"";position:fixed;inset:0;z-index:9997;pointer-events:none;
  background:radial-gradient(120% 100% at 50% 30%, transparent 55%, rgba(0,0,0,.45) 100%);
}

/* ---- Typography -------------------------------------------------------- */
h1,h2,h3,h4,h5,h6{
  font-family:var(--pixel);
  font-weight:400;
  line-height:.95;
  letter-spacing:.01em;
  color:var(--amber);
  text-shadow:var(--glow);
}
h1{font-size:clamp(56px,11vw,132px)}
h2{font-size:clamp(34px,5.5vw,64px)}
h3{font-size:clamp(26px,3.6vw,40px)}
h4{font-size:clamp(22px,2.6vw,30px)}
p{margin:0 0 1.15rem}
p:last-child{margin-bottom:0}
a{color:var(--amber);text-decoration:none}
a:not(.btn):not(.brand):not(.navlink):not(.foot-link){
  text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--line-strong);
  transition:color .15s, text-decoration-color .15s, text-shadow .15s;
}
a:not(.btn):not(.brand):not(.navlink):not(.foot-link):hover{
  color:var(--amber-bright);text-decoration-color:var(--amber);text-shadow:var(--glow-soft);
}
strong,b{color:var(--amber-bright);font-weight:600}
::selection{background:var(--amber);color:var(--black);text-shadow:none}

/* Signature gensyn-style highlight block on a heading */
.mark{
  background:var(--amber);
  color:var(--black);
  text-shadow:none;
  padding:.02em .18em;
  box-decoration-break:clone;-webkit-box-decoration-break:clone;
  box-shadow:0 0 26px rgba(255,176,0,.35);
}

/* tiny mono labels e.g. [01] SECTION */
.label{
  font-family:var(--mono);
  font-size:12px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--muted);text-shadow:none;
  display:inline-block;margin-bottom:1.1rem;
}
.label .idx{color:var(--amber)}

.eyebrow{color:var(--amber);font-family:var(--mono);font-size:12px;letter-spacing:.3em;text-transform:uppercase;text-shadow:none}

/* blinking terminal cursor */
.cursor{
  display:inline-block;width:.52em;height:.92em;margin-left:.06em;
  background:var(--amber);box-shadow:var(--glow);transform:translateY(.08em);
  animation:blink 1.05s steps(1) infinite;
}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}

/* ---- Layout helpers ---------------------------------------------------- */
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 24px}
.section{padding:clamp(56px,9vw,116px) 0}
.section--tight{padding:clamp(36px,5vw,60px) 0}
.center{text-align:center}
.muted{color:var(--muted)}
.amber{color:var(--amber)}

/* dashed / dotted dividers */
.rule{border:none;border-top:1px dashed var(--line);margin:0}
.rule--dotted{border-top:1px dotted var(--line)}
.rule--strong{border-top:1px dashed var(--line-strong)}

/* ---- Status bar (top window chrome) ----------------------------------- */
.statusbar{
  position:relative;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  height:26px;padding:0 12px;
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--muted);
  border-bottom:1px solid var(--line);
  background:linear-gradient(var(--bg-2),var(--bg-2));
}
.statusbar .sb-dots{letter-spacing:.18em;color:var(--amber-dim)}
.statusbar .sb-url{color:var(--text)}
.statusbar .sb-right{color:var(--amber-dim);letter-spacing:.18em}
.statusbar .blink{animation:blink 1.4s steps(1) infinite;color:var(--amber)}

/* ---- Header / nav ------------------------------------------------------ */
.site-header{
  position:sticky;top:0;z-index:40;
  background:rgba(10,8,6,.86);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
.nav{
  display:flex;align-items:center;justify-content:space-between;
  height:64px;
}
.brand{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--pixel);font-size:30px;line-height:1;color:var(--amber);
  text-shadow:var(--glow);
}
.brand .dmark{
  height:23px;width:auto;display:inline-block;fill:var(--amber);
  filter:drop-shadow(0 0 4px rgba(255,176,0,.55));
}
.brand:hover{color:var(--amber-bright)}

.nav-links{display:flex;align-items:center;gap:6px;list-style:none}
.navlink{
  font-family:var(--pixel);font-size:22px;line-height:1;
  letter-spacing:.04em;color:var(--text);
  padding:6px 12px;border:1px solid transparent;
  transition:background .14s,color .14s,box-shadow .14s,border-color .14s;
}
.navlink::before{content:"[ ";color:var(--amber-dim)}
.navlink::after{content:" ]";color:var(--amber-dim)}
.navlink:hover{color:var(--amber);text-shadow:var(--glow-soft)}
.navlink.active,.navlink:active{
  background:var(--amber);color:var(--black);text-shadow:none;box-shadow:0 0 22px rgba(255,176,0,.3);
}
.navlink.active::before,.navlink.active::after{color:var(--black)}

.nav-toggle{
  display:none;font-family:var(--pixel);font-size:22px;color:var(--amber);
  background:none;border:1px solid var(--line);padding:5px 12px;cursor:pointer;
}
.nav-toggle::before{content:"[ "}
.nav-toggle::after{content:" ]"}
.nav-toggle:hover{background:var(--amber);color:var(--black)}

/* ---- Buttons ----------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;gap:.5ch;
  font-family:var(--pixel);font-size:24px;line-height:1;letter-spacing:.03em;
  padding:11px 22px;cursor:pointer;
  border:1px solid var(--amber);
  background:var(--amber);color:var(--black);
  text-shadow:none;
  transition:background .15s,color .15s,box-shadow .15s,transform .05s;
}
.btn::before{content:"[ "}
.btn::after{content:" ]"}
.btn:hover{
  background:transparent;color:var(--amber);
  box-shadow:var(--glow);text-shadow:var(--glow-soft);
}
.btn:active{transform:translateY(1px)}
.btn--ghost{background:transparent;color:var(--amber);box-shadow:none}
.btn--ghost:hover{background:var(--amber);color:var(--black);text-shadow:none}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}

/* ---- Window / panel ---------------------------------------------------- */
.window{border:1px solid var(--line);background:var(--panel)}
.window__bar{
  display:flex;align-items:center;gap:10px;
  padding:8px 14px;border-bottom:1px solid var(--line);
  background:var(--bg-2);
  font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
}
.window__dots{display:inline-flex;gap:6px}
.window__dots i{width:9px;height:9px;border:1px solid var(--amber-dim);display:inline-block}
.window__dots i:first-child{background:var(--amber);border-color:var(--amber)}
.window__title{margin-left:2px}
.window__body{padding:clamp(20px,3vw,34px)}

/* terminal prompt line */
.prompt{font-family:var(--mono);font-size:14px;color:var(--text);margin-bottom:.4rem}
.prompt .sigil{color:var(--amber);text-shadow:var(--glow-soft)}
.prompt .out{color:var(--muted)}

/* ---- Pixel image frame ------------------------------------------------- */
.frame{position:relative;border:1px solid var(--line);background:#000;overflow:hidden}
.frame::after{ /* scanline + amber wash over imagery */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0 2px, rgba(0,0,0,.28) 3px, rgba(0,0,0,0) 4px),
    linear-gradient(rgba(255,176,0,.10), rgba(255,176,0,.10));
  mix-blend-mode:multiply;
}
.frame__corners::before,.frame__corners::after{
  content:"";position:absolute;width:12px;height:12px;z-index:2;pointer-events:none;
  border-color:var(--amber);
}
.frame__corners::before{top:-1px;left:-1px;border-top:2px solid;border-left:2px solid}
.frame__corners::after{bottom:-1px;right:-1px;border-bottom:2px solid;border-right:2px solid}
.pixel-img{
  display:block;width:100%;height:100%;object-fit:cover;
  image-rendering:pixelated;image-rendering:crisp-edges;
  /* amber-duotone CRT cast */
  filter:grayscale(1) sepia(.55) saturate(2.6) hue-rotate(-8deg) brightness(.92) contrast(1.12);
}

/* ---- Hero -------------------------------------------------------------- */
.hero{position:relative;padding:clamp(48px,8vw,96px) 0 clamp(40px,6vw,72px)}
.hero__grid{
  display:grid;grid-template-columns:1.45fr .85fr;gap:clamp(28px,4vw,56px);align-items:center;
}
.hero h1{margin:.12em 0 .2em;text-transform:uppercase}
.hero__sub{
  font-family:var(--pixel);font-size:clamp(24px,3vw,34px);line-height:1.05;
  color:var(--text);text-shadow:none;letter-spacing:.02em;margin-bottom:1.2rem;
}
.hero__sub .slash{color:var(--amber)}
.hero__lede{max-width:54ch;color:var(--text)}
.hero__portrait{align-self:stretch}
.hero__portrait .frame{height:100%;min-height:300px}

/* ---- Generic content --------------------------------------------------- */
.lead{font-size:17px;line-height:1.7;color:var(--text);max-width:62ch}
.prose{max-width:70ch}
.prose p{color:var(--text)}
.page-head{padding:clamp(40px,6vw,72px) 0 clamp(20px,3vw,34px)}
.page-head h2{text-transform:uppercase;margin:.1em 0 .35em}

/* ---- Grids ------------------------------------------------------------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4vw,52px)}
.split--bio{grid-template-columns:1.5fr 1fr}

.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.card{
  border:1px solid var(--line);background:var(--panel);
  padding:26px;transition:border-color .15s,box-shadow .15s,transform .15s;
}
.card:hover{border-color:var(--line-strong);box-shadow:0 0 26px rgba(255,176,0,.08);transform:translateY(-2px)}
.card__icon{
  font-family:var(--pixel);font-size:34px;color:var(--amber);text-shadow:var(--glow);
  display:flex;align-items:center;gap:.4ch;margin-bottom:14px;
  width:54px;height:54px;border:1px solid var(--line);justify-content:center;
}
.card h3{font-size:30px;margin-bottom:10px;text-transform:uppercase}
.card p{color:var(--text);font-size:14px}
.card p+p{margin-top:.8rem}

/* spec / stat list */
.spec{list-style:none;border-top:1px dashed var(--line)}
.spec li{
  display:flex;gap:14px;padding:13px 0;border-bottom:1px dashed var(--line);
  font-size:14px;
}
.spec .k{color:var(--amber);font-family:var(--pixel);font-size:22px;line-height:1;min-width:42px;white-space:nowrap;text-shadow:var(--glow-soft)}
.spec .v{color:var(--text)}

/* feature list with > markers */
.feat{list-style:none}
.feat li{padding:7px 0 7px 26px;position:relative;color:var(--text);font-size:14px}
.feat li::before{content:">";position:absolute;left:0;color:var(--amber);text-shadow:var(--glow-soft)}

/* ---- Portfolio gallery ------------------------------------------------- */
.gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.shot{position:relative;cursor:pointer;border:1px solid var(--line);background:#000}
.shot .frame{border:none}
.shot__cap{
  position:absolute;left:0;right:0;bottom:0;z-index:3;
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 14px;font-family:var(--mono);font-size:12px;letter-spacing:.1em;
  color:var(--amber);background:linear-gradient(transparent,rgba(10,8,6,.92));
  text-transform:uppercase;
}
.shot__cap .zoom{color:var(--text)}
.shot:hover{box-shadow:0 0 30px rgba(255,176,0,.14)}
.shot:hover .pixel-img{filter:grayscale(1) sepia(.5) saturate(3) hue-rotate(-6deg) brightness(1.02) contrast(1.12)}

/* ---- Lightbox ---------------------------------------------------------- */
.lightbox{
  position:fixed;inset:0;z-index:9999;display:none;
  align-items:center;justify-content:center;padding:40px;
  background:rgba(5,4,3,.92);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
}
.lightbox.open{display:flex}
.lightbox img{max-width:min(92vw,900px);max-height:86vh;border:1px solid var(--line-strong);box-shadow:var(--glow)}
.lightbox__close{
  position:absolute;top:22px;right:26px;font-family:var(--pixel);font-size:30px;
  color:var(--amber);background:none;border:1px solid var(--line);padding:2px 14px;cursor:pointer;
}
.lightbox__close:hover{background:var(--amber);color:var(--black)}

/* ---- Contact / location ------------------------------------------------ */
.ascii-map{
  font-family:var(--mono);font-size:12px;line-height:1.35;color:var(--amber-dim);
  white-space:pre;overflow-x:auto;max-width:100%;text-shadow:var(--glow-soft);
}
.ascii-map .pin{color:var(--amber);text-shadow:var(--glow)}

/* embeds (e.g. strava) framed in the theme */
.embed{border:1px solid var(--line);background:var(--panel);padding:10px;display:inline-block}
.embed iframe{display:block;border:0;filter:saturate(.6) hue-rotate(5deg)}

/* ---- Footer ------------------------------------------------------------ */
.site-footer{border-top:1px solid var(--line);background:var(--bg-2);padding:30px 0 26px}
.foot-links{
  display:flex;flex-wrap:wrap;gap:8px 26px;align-items:center;
  list-style:none;margin-bottom:18px;
}
.foot-link{
  font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
  transition:color .15s,text-shadow .15s;
}
.foot-link:hover{color:var(--amber);text-shadow:var(--glow-soft)}
.foot-meta{
  display:flex;flex-wrap:wrap;gap:10px 20px;justify-content:space-between;align-items:center;
  font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:var(--muted);
}
.foot-status{color:var(--amber-dim)}
.foot-status .dot{color:var(--amber);animation:blink 2.2s steps(1) infinite}

/* ---- Responsive -------------------------------------------------------- */
@media (max-width:860px){
  .hero__grid{grid-template-columns:1fr}
  .hero__portrait{max-width:340px}
  .split,.split--bio{grid-template-columns:1fr}
  .cards,.gallery{grid-template-columns:1fr}
  .nav-toggle{display:inline-block}
  .nav-links{
    position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--bg);border-bottom:1px solid var(--line);
    padding:8px 24px 16px;display:none;
  }
  .nav-links.open{display:flex}
  .navlink{font-size:26px;padding:10px 6px;border:none;border-bottom:1px dashed var(--line-soft)}
  .navlink:last-child{border-bottom:none}
}
@media (max-width:480px){
  body{font-size:14px}
  .statusbar .sb-right{display:none}
  .ascii-map{font-size:10px}
  .hero__lede,.lead,.prose{max-width:100%}
}

/* ---- Motion preferences ------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;scroll-behavior:auto!important;transition:none!important}
  body::before{opacity:.35}
}