/* jose.alista.cloud — all the styling lives here.
   Colours are at the top; change one value, the whole site follows. */

:root{
  --ink:#0E0B0C;        /* page background */
  --panel:#120E10;      /* card background */
  --panel-2:#171214;    /* sidebar / strip background */
  --line:#2A2023;       /* borders */
  --text:#F4EDE8;       /* headings, bright text */
  --body:#CFC2BC;       /* body copy */
  --mute:#A2938E;       /* secondary copy */
  --faint:#6E5F5C;      /* timestamps, labels */
  --faintest:#5C4A44;
  --red:#FF4A3D;        /* the accent */
  --red-dk:#B3231C;     /* hard shadow under the red */
  --amber:#FFB020;      /* BUILD entries */
  --cyan:#45D0E0;       /* WATCHED entries + code blocks */
  --green:#5BE58A;      /* READING entries + charts */
  --gold:#FFD166;       /* hover on red buttons */
  --pixel:'Silkscreen',monospace;
  --mono:'JetBrains Mono',monospace;
  --sans:'DM Sans',system-ui,sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--ink); color:var(--text); font-family:var(--sans);
  min-height:100vh; display:flex; flex-direction:column; overflow-x:hidden;
}
a{color:var(--red); text-decoration:none}
a:hover{color:var(--gold)}
::selection{background:var(--red); color:var(--ink)}

/* CRT SCANLINES — off by default. Add class="scanlines" to <body> to switch on. */
.crt,.vignette{display:none}
body.scanlines .crt{
  display:block; position:fixed; inset:0; pointer-events:none; z-index:60; opacity:.55;
  background:repeating-linear-gradient(to bottom,rgba(0,0,0,.30) 0 1px,transparent 1px 3px);
  mix-blend-mode:multiply;
}
body.scanlines .vignette{
  display:block; position:fixed; inset:0; pointer-events:none; z-index:61;
  background:radial-gradient(ellipse at 50% 45%,transparent 55%,rgba(0,0,0,.45) 100%);
}

.wrap{width:100%; max-width:1080px; margin:0 auto; padding:0 24px}
main.wrap{flex:1 0 auto; position:relative; z-index:5}
main.narrow{max-width:760px}

/* ---------- HEADER ---------- */
.site-head{position:relative; z-index:5; border-bottom:2px solid var(--line)}
.head-row{padding:20px 24px; display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap}
.brand{display:flex; align-items:center; gap:12px; color:inherit}
.brand:hover{color:inherit}
.logo{display:grid; grid-template-columns:repeat(3,8px); grid-template-rows:repeat(3,8px); gap:2px; flex:0 0 auto}
.logo i{display:block}
.logo i.r{background:var(--red)}
.logo i.w{background:var(--text)}
.brand-txt{font-family:var(--pixel); font-size:15px; color:var(--text)}
.dim{color:var(--faint)}
.site-head nav{display:flex; gap:4px; flex-wrap:wrap}
.site-head nav a{
  font-family:var(--pixel); font-size:11px; letter-spacing:.06em;
  padding:8px 10px 6px; color:var(--mute); border-bottom:3px solid transparent;
}
.site-head nav a:hover{color:var(--text); background:var(--panel-2)}
.site-head nav a.on{color:var(--text); border-bottom-color:var(--red)}

.strip{border-top:2px solid var(--line); background:var(--panel-2)}
.strip-row{
  padding:9px 24px; display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  font-family:var(--mono); font-size:11px; letter-spacing:.08em; color:var(--mute); text-transform:uppercase;
}
.live{width:8px; height:8px; background:var(--green); flex:0 0 auto; animation:blip 1.8s steps(1) infinite}
@keyframes blip{0%,100%{opacity:1}50%{opacity:.25}}
.bright{color:var(--text)}
.sep{color:#4A3B3E}

/* ---------- SHARED BITS ---------- */
.eyebrow{font-family:var(--mono); font-size:11px; letter-spacing:.18em; color:var(--red); margin:0 0 16px; text-transform:uppercase}
.eyebrow.quiet{color:var(--faint)}
h1.big{font-family:var(--pixel); font-size:clamp(30px,5.5vw,52px); margin:0 0 18px; color:var(--text); text-shadow:4px 4px 0 var(--red-dk)}
.lede{font-size:17px; line-height:1.65; color:var(--body); max-width:56ch; margin:0 0 44px; text-wrap:pretty}
.btn{font-family:var(--pixel); font-size:11px; letter-spacing:.06em; color:var(--ink); background:var(--red); padding:10px 14px 8px; display:inline-block}
.btn:hover{background:var(--gold); color:var(--ink)}
.btn.ghost{color:var(--mute); background:none; border:2px solid var(--line); padding:9px 13px 7px}
.btn.ghost:hover{color:var(--text); border-color:var(--red); background:none}
.pill{display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--body); border:2px solid var(--line); padding:3px 8px}
.pill i{width:7px; height:7px; flex:0 0 auto; display:block}
.dot-live{background:var(--green)}
.dot-wip{background:var(--amber)}
.tag{font-family:var(--mono); font-size:10px; letter-spacing:.06em; color:var(--faint); border:1px solid var(--line); padding:3px 7px}
.stamp{font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--faint)}

/* ---------- HOME / FEED ---------- */
.hero{padding:56px 0 44px; border-bottom:2px solid var(--line)}
.hero h1{font-family:var(--pixel); font-weight:700; font-size:clamp(38px,7.5vw,76px); line-height:1.05; margin:0 0 24px; color:var(--text); text-shadow:5px 5px 0 var(--red-dk)}
.hero p.intro{font-size:18px; line-height:1.6; color:var(--body); max-width:54ch; margin:0 0 22px; text-wrap:pretty}
.hero p.note{font-family:var(--mono); font-size:13px; line-height:1.7; color:var(--mute); max-width:58ch; margin:0; padding-left:14px; border-left:3px solid var(--red)}

.cols{display:flex; flex-wrap:wrap; gap:44px; align-items:flex-start; padding-top:40px; padding-bottom:64px}
.feed-col{flex:1 1 440px; min-width:0}
.side{flex:1 1 240px; max-width:300px; display:flex; flex-direction:column; gap:20px; min-width:0}

.sec-head{display:flex; align-items:center; gap:10px; margin-bottom:24px}
.sec-head b{width:10px; height:10px; background:var(--red); display:block}
.sec-head span{font-family:var(--pixel); font-size:12px; letter-spacing:.1em; color:var(--text)}
.sec-head hr{flex:1; height:2px; background:var(--line); border:0; margin:0}
.sec-head em{font-family:var(--mono); font-size:11px; color:var(--faint); font-style:normal}

.feed{display:flex; flex-direction:column; gap:18px}
.card{background:var(--panel); border:2px solid var(--line); padding:18px 20px}
.card-head{display:flex; align-items:center; gap:10px; margin-bottom:10px; flex-wrap:wrap}
.badge{font-family:var(--pixel); font-size:10px; letter-spacing:.08em; color:var(--ink); padding:4px 7px 3px}
.b-log{background:var(--red)}
.b-watch{background:var(--cyan)}
.b-build{background:var(--amber)}
.b-read{background:var(--green)}
.b-piece{color:var(--red); border:2px solid var(--red); padding:3px 7px 2px; background:none}
.card p{margin:0; font-size:15px; line-height:1.65; color:var(--body); text-wrap:pretty}

.card.log{border-left:6px solid var(--red)}
.card.build{border-top:6px solid var(--amber); padding:20px}
.card.build h3{font-weight:700; font-size:19px; line-height:1.3; margin:0 0 8px; color:var(--text)}
.card.piece{background:#1B1416; border:2px solid var(--red); box-shadow:6px 6px 0 0 var(--red-dk); padding:26px 24px}
.card.piece h2{font-weight:700; font-size:26px; line-height:1.2; margin:0 0 12px; color:var(--text); letter-spacing:-.01em; text-wrap:pretty}
.card.piece p{margin-bottom:18px; max-width:58ch}
.card.media{display:flex; flex-wrap:wrap; gap:20px; align-items:center}
.card.media .body{flex:1 1 240px; min-width:0}
.card.media h3{font-weight:700; font-size:17px; line-height:1.3; margin:0 0 8px; color:var(--text); text-wrap:pretty}
.card.media p{font-size:14px; color:var(--mute); margin-bottom:8px}
.card.media .src{margin:0; font-family:var(--mono); font-size:10px; letter-spacing:.1em; color:var(--faintest); text-transform:uppercase}
.thumb{flex:0 1 180px; min-width:140px; aspect-ratio:16/9; border:2px solid var(--line); display:flex; align-items:center; justify-content:center;
  background:repeating-linear-gradient(135deg,#1F1719 0 6px,#171012 6px 12px)}
.thumb i{width:0; height:0; border-top:11px solid transparent; border-bottom:11px solid transparent; border-left:18px solid var(--cyan)}
.cover{flex:0 0 56px; aspect-ratio:2/3; border:2px solid var(--line); border-left:5px solid var(--green);
  background:repeating-linear-gradient(to bottom,#1F1719 0 5px,#171012 5px 10px)}
.feed-end{margin-top:26px; text-align:center; border:2px dashed var(--line); padding:18px}
.feed-end p{margin:0; font-family:var(--pixel); font-size:11px; letter-spacing:.08em; color:var(--faint)}

/* ---------- SIDEBAR ---------- */
.panel{background:var(--panel-2); border:2px solid var(--line); padding:16px 18px}
.panel h2{margin:0 0 14px; font-family:var(--pixel); font-size:11px; letter-spacing:.08em; color:var(--red)}
.panel h2.g{color:var(--green)}
.panel h2.c{color:var(--cyan)}
.rows{display:flex; flex-direction:column; gap:11px; font-family:var(--mono); font-size:12px}
.rows div{display:flex; justify-content:space-between; gap:10px; align-items:baseline}
.rows dt,.rows span.k{color:var(--faint); letter-spacing:.04em; text-transform:uppercase; font-size:11px}
.rows dd,.rows span.v{color:var(--text); text-align:right; margin:0}
.linklist{display:flex; flex-direction:column; gap:9px}
.linklist a{font-family:var(--mono); font-size:12px; color:var(--body); display:flex; gap:8px; align-items:center}
.linklist a:hover{color:var(--red)}
.linklist a i{width:6px; height:6px; background:#4A3B3E; flex:0 0 auto; display:block}

/* ---------- CHART (skate log, dance log, any weekly log) ---------- */
.chart{display:flex; gap:8px; align-items:stretch}
.chart .yaxis{display:flex; flex-direction:column; justify-content:space-between; align-items:flex-end;
  height:88px; flex:0 0 auto; font-family:var(--mono); font-size:9px; color:var(--faintest); line-height:1}
.chart .plot{flex:1; min-width:0; height:88px; border-left:2px solid var(--line); border-bottom:2px solid var(--line);
  display:flex; align-items:flex-end; gap:5px; padding:0 4px 0 5px}
.chart .plot i{flex:1; min-width:6px; display:block; background:var(--green)}
.chart .plot i:hover{background:var(--text)}
.chart-x{display:flex; gap:5px; padding-left:33px; margin-top:5px}
.chart-x span{flex:1; text-align:center; font-family:var(--mono); font-size:9px; color:var(--faintest)}
.chart-legend{display:flex; justify-content:space-between; gap:10px; margin-top:12px;
  font-family:var(--mono); font-size:9px; letter-spacing:.08em; color:#4A3B3E; text-transform:uppercase}
.chart.cyan .plot i{background:var(--cyan)}
.chart.amber .plot i{background:var(--amber)}

/* ---------- WRITING INDEX ---------- */
.postlist{display:flex; flex-direction:column; border-bottom:2px solid var(--line)}
.postlist a{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:24px; align-items:baseline;
  padding:24px 0; border-top:2px solid var(--line); color:inherit}
.postlist a:hover{background:var(--panel); color:inherit}
.postlist h2{font-weight:700; font-size:21px; line-height:1.3; margin:0 0 8px; color:var(--text); text-wrap:pretty}
.postlist p{margin:0; font-size:15px; line-height:1.6; color:var(--mute); max-width:58ch; text-wrap:pretty}

/* ---------- ARTICLE ---------- */
.article{padding:44px 0 72px; max-width:680px}
.back{display:inline-block; font-family:var(--mono); font-size:11px; letter-spacing:.1em; color:var(--faint); margin-bottom:32px; text-transform:uppercase}
.back:hover{color:var(--red)}
.article h1{font-weight:700; font-size:clamp(28px,4.6vw,42px); line-height:1.15; letter-spacing:-.02em; margin:0 0 20px; color:var(--text); text-wrap:pretty}
.article .blurb{font-size:19px; line-height:1.6; color:var(--mute); margin:0 0 12px; padding-bottom:32px; border-bottom:2px solid var(--line); text-wrap:pretty}
.prose{display:flex; flex-direction:column; gap:26px; padding-top:32px}
.prose p{margin:0; font-size:17px; line-height:1.75; color:var(--body); text-wrap:pretty}
.prose h2{font-family:var(--pixel); font-size:15px; line-height:1.5; letter-spacing:.02em; margin:16px 0 0; color:var(--text)}
.prose blockquote{margin:0; padding:4px 0 4px 22px; border-left:4px solid var(--red); font-size:19px; line-height:1.6; color:var(--text); text-wrap:pretty}
.prose pre{margin:0; padding:18px 20px; background:var(--panel); border:2px solid var(--line); border-left:6px solid var(--cyan);
  overflow-x:auto; font-family:var(--mono); font-size:13px; line-height:1.7; color:var(--body); white-space:pre-wrap}
.prose ul{margin:0; padding-left:22px; color:var(--body); font-size:17px; line-height:1.75}
.prose li{margin-bottom:8px}
.prose img{max-width:100%; height:auto; border:2px solid var(--line); display:block}
.article-foot{margin-top:48px; padding-top:28px; border-top:2px solid var(--line); display:flex; gap:12px; flex-wrap:wrap; align-items:center}

/* ---------- GRIDS: projects, playground ---------- */
.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:20px; padding-bottom:64px}
.proj{background:var(--panel); border:2px solid var(--line); padding:22px; display:flex; flex-direction:column; gap:12px}
.proj:hover{border-color:var(--red)}
.proj .top{display:flex; align-items:center; gap:8px; justify-content:space-between; flex-wrap:wrap}
.proj h2{font-family:var(--pixel); font-size:15px; line-height:1.4; margin:0; color:var(--text)}
.proj p{margin:0; font-size:15px; line-height:1.65; color:var(--mute); flex:1; text-wrap:pretty}
.proj .tags{display:flex; gap:6px; flex-wrap:wrap}
.game{background:var(--panel); border:2px dashed var(--line); padding:24px; display:flex; flex-direction:column; gap:14px; align-items:flex-start}
.game h2{font-family:var(--pixel); font-size:15px; line-height:1.4; margin:0; color:var(--body)}
.game p{margin:0; font-size:14px; line-height:1.6; color:var(--faint); flex:1; text-wrap:pretty}
.game .cta{font-family:var(--pixel); font-size:10px; letter-spacing:.08em; color:var(--faint); border:2px solid var(--line); padding:8px 12px 6px}
.px{display:grid; grid-template-columns:repeat(3,12px); grid-auto-rows:12px; gap:3px}
.px i{width:12px; height:12px; display:block; background:var(--line)}
.px i.r{background:var(--red)}
.px i.w{background:var(--body)}

/* ---------- ABOUT / RESUME ---------- */
.about-cols{display:flex; flex-wrap:wrap; gap:44px; align-items:flex-start; padding-bottom:64px}
.about-body{flex:1 1 420px; min-width:0; display:flex; flex-direction:column; gap:18px}
.about-body p{margin:0; font-size:16px; line-height:1.7; color:var(--mute); max-width:60ch; text-wrap:pretty}
.about-body p.first{font-size:18px; line-height:1.65; color:var(--body); max-width:58ch}
.loadout{flex:1 1 260px; max-width:320px; display:flex; flex-direction:column; gap:16px}
.cv{display:flex; flex-direction:column; border-bottom:2px solid var(--line); padding-bottom:0}
.cv .row{display:grid; grid-template-columns:120px minmax(0,1fr); gap:24px; padding:22px 0; border-top:2px solid var(--line)}
.cv .when{font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--faint); padding-top:3px}
.cv h2{font-weight:700; font-size:17px; margin:0 0 4px; color:var(--text)}
.cv .org{margin:0 0 8px; font-family:var(--mono); font-size:12px; color:var(--red)}
.cv p{margin:0; font-size:15px; line-height:1.65; color:var(--mute); text-wrap:pretty}

/* ---------- FOOTER ---------- */
.site-foot{flex:0 0 auto; position:relative; z-index:5; border-top:2px solid var(--line); background:var(--panel); margin-top:20px}
.foot-row{padding:32px 24px 40px; display:flex; justify-content:space-between; gap:28px; flex-wrap:wrap; align-items:flex-start}
.foot-brand{margin:0 0 12px; font-family:var(--pixel); font-size:11px; letter-spacing:.06em; color:var(--text)}
.foot-fine{margin:0; font-family:var(--mono); font-size:11px; line-height:1.8; color:var(--faintest); letter-spacing:.04em}
.foot-cols{display:flex; gap:32px; flex-wrap:wrap}
.foot-cols div{display:flex; flex-direction:column; gap:8px}
.foot-h{margin:0 0 2px; font-family:var(--mono); font-size:10px; letter-spacing:.12em; color:#4A3B3E; text-transform:uppercase}
.foot-cols a{font-family:var(--mono); font-size:12px; color:var(--mute)}
.foot-cols a:hover{color:var(--red)}

@media (max-width:640px){
  .cv .row{grid-template-columns:1fr; gap:8px}
  .postlist a{grid-template-columns:1fr; gap:8px}
}