/* =========================================================
   YadoreZ — grain + chromatic-glitch theme
   Boldness lives in the wordmark. Content stays readable.
   ========================================================= */

:root{
  --bg:#050506;
  --bg-soft:#0b0c0e;
  --ink:#e8ebef;
  --ink-soft:#c2c7ce;
  --dim:#7d828b;
  --line:#191b1f;
  --line-hi:#26292f;

  --red:#ff2d4b;      /* chromatic split / [GH] */
  --cyan:#1fd6ff;     /* chromatic split / [RE] / links */
  --amber:#f5b544;    /* [CERT] */
  --green:#5ef08a;    /* [ROBO] */

  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --display:"Space Mono","JetBrains Mono",monospace;

  --measure:720px;
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;background:var(--bg);color:var(--ink-soft);
  font-family:var(--mono);font-size:15px;line-height:1.75;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  min-height:100vh;position:relative;overflow-x:hidden;
}

/* ---------- atmosphere: grain + vignette (site-wide, subtle) ---------- */
body::before{ /* vignette */
  content:"";position:fixed;inset:0;pointer-events:none;z-index:1;
  background:radial-gradient(130% 100% at 50% 30%,transparent 60%,rgba(0,0,0,.7) 100%);
}
body::after{ /* film grain */
  content:"";position:fixed;inset:-50%;width:200%;height:200%;
  pointer-events:none;z-index:2;opacity:.08;mix-blend-mode:screen;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain .6s steps(3) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)} 33%{transform:translate(-3%,2%)}
  66%{transform:translate(2%,-3%)} 100%{transform:translate(0,0)}
}

/* everything sits above atmosphere */
.wrap,.site-header,.site-footer{position:relative;z-index:3;}
.wrap{max-width:var(--measure);margin:0 auto;padding:0 1.25rem;}
.site-main{padding:2.5rem 0 4rem;}

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

a{color:var(--cyan);text-decoration:none;border-bottom:1px solid transparent;
  transition:color .12s,border-color .12s;}
a:hover{border-bottom-color:var(--cyan);}
a:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;border-radius:2px;}
::selection{background:rgba(31,214,255,.25);}

/* ---------- glitch wordmark (the signature) ---------- */
.glitch{
  font-family:var(--display);font-weight:700;position:relative;
  color:var(--ink);letter-spacing:-.03em;line-height:1;
  text-shadow:.5px 0 var(--cyan),-.5px 0 var(--red);
}
.glitch::before,.glitch::after{
  content:attr(data-text);position:absolute;inset:0;background:var(--bg);
  overflow:hidden;clip-path:inset(100% 0 0 0);
}
.glitch::before{left:2px;text-shadow:-2px 0 var(--red);animation:g-r 2.8s steps(2) infinite;}
.glitch::after{left:-2px;text-shadow:2px 0 var(--cyan);animation:g-c 3.6s steps(2) infinite;}
@keyframes g-r{
  0%,92%,100%{clip-path:inset(100% 0 0 0)}
  93%{clip-path:inset(8% 0 78% 0);transform:translateX(-5px)}
  95%{clip-path:inset(58% 0 12% 0);transform:translateX(4px)}
  97%{clip-path:inset(30% 0 45% 0);transform:translateX(-2px)}
}
@keyframes g-c{
  0%,88%,100%{clip-path:inset(100% 0 0 0)}
  89%{clip-path:inset(22% 0 60% 0);transform:translateX(4px)}
  91%{clip-path:inset(70% 0 6% 0);transform:translateX(-3px)}
}

/* ---------- header ---------- */
.site-header{padding:2rem 0 0;}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;}
.brand{display:flex;align-items:center;gap:.7rem;border:0;}
.brand__mark{
  width:34px;height:34px;flex:none;display:grid;place-items:center;
  border:1px solid var(--line-hi);border-radius:6px;background:var(--bg-soft);
  font-family:var(--display);font-weight:700;font-size:.95rem;color:var(--ink);
  text-shadow:.5px 0 var(--cyan),-.5px 0 var(--red);
}
.brand__name{font-family:var(--display);font-weight:700;font-size:1.25rem;color:var(--ink);}
.brand:hover .brand__name{color:var(--ink);}

.nav{display:flex;gap:1.1rem;font-size:.82rem;}
.nav a{color:var(--dim);border:0;}
.nav a::before{content:"/";color:var(--line-hi);margin-right:.35rem;}
.nav a:hover,.nav a[aria-current="page"]{color:var(--cyan);}

/* ---------- home hero ---------- */
.hero{padding:3rem 0 2.5rem;text-align:center;position:relative;}
.hero__mark{font-size:clamp(2.8rem,10vw,5.2rem);margin:0 0 .6rem;display:inline-block;}
.hero__tag{color:var(--dim);font-size:.8rem;letter-spacing:.26em;text-transform:uppercase;margin:0 0 1.4rem;}
.hero__tag b{color:var(--red);} .hero__tag i{color:var(--cyan);font-style:normal;}
.hero__blurb{color:var(--ink-soft);max-width:34rem;margin:0 auto;font-size:.95rem;}
.hero::after{ /* faint scanlines localized to hero */
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.25;z-index:-1;
  background:repeating-linear-gradient(to bottom,transparent 0 3px,rgba(0,0,0,.35) 3px 4px);
}

/* ---------- section head ---------- */
.section-head{display:flex;align-items:center;gap:.7rem;margin:2.4rem 0 1.1rem;}
.section-head h2{font-family:var(--display);font-size:1.05rem;color:var(--ink);margin:0;letter-spacing:.02em;}
.section-head h2::before{content:"// ";color:var(--cyan);}
.section-head .rule{flex:1;height:1px;background:var(--line);}
.section-head .more{font-size:.78rem;color:var(--dim);border:0;}
.section-head .more:hover{color:var(--cyan);}

/* ---------- writeups list ---------- */
.entries{display:flex;flex-direction:column;}
.entry{
  display:grid;grid-template-columns:6.5rem 5rem 1fr;align-items:baseline;gap:.75rem;
  padding:.6rem .5rem;border:0;border-radius:6px;color:var(--ink-soft);
  border-left:2px solid transparent;
}
.entry:hover{background:var(--bg-soft);border-left-color:var(--cyan);color:var(--ink-soft);}
.entry__date{color:var(--dim);font-size:.8rem;white-space:nowrap;}
.entry__tag{font-size:.76rem;white-space:nowrap;font-weight:700;}
.entry__title{color:var(--ink);}
.entry:hover .entry__title{color:var(--cyan);}

/* category chips */
.tag--re{color:var(--cyan);}
.tag--gh{color:var(--red);}
.tag--cert{color:var(--amber);}
.tag--robo{color:var(--green);}
.tag--life{color:var(--dim);}

/* ---------- filters ---------- */
.filters{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 1.4rem;}
.filter{
  font-family:var(--mono);font-size:.77rem;color:var(--dim);background:transparent;
  border:1px solid var(--line);border-radius:999px;padding:.3rem .8rem;cursor:pointer;
  transition:all .12s;
}
.filter:hover{border-color:var(--line-hi);color:var(--ink);}
.filter[aria-pressed="true"]{color:var(--bg);background:var(--cyan);border-color:var(--cyan);font-weight:700;}

/* ---------- post ---------- */
.post-header{margin:1.5rem 0 2.25rem;}
.post-meta{display:flex;flex-wrap:wrap;gap:.55rem;align-items:center;color:var(--dim);font-size:.8rem;margin-bottom:.7rem;}
.post-meta .sep{color:var(--line-hi);}
.post-title{font-family:var(--display);font-weight:700;font-size:clamp(1.5rem,4.5vw,2.1rem);
  line-height:1.22;letter-spacing:-.02em;color:var(--ink);margin:0;
  text-shadow:.5px 0 rgba(31,214,255,.5),-.5px 0 rgba(255,45,75,.5);}

.prose{font-size:15px;color:var(--ink-soft);}
.prose h2{font-family:var(--display);color:var(--ink);font-size:1.18rem;margin:2.4rem 0 .8rem;padding-bottom:.35rem;border-bottom:1px solid var(--line);}
.prose h2::before{content:"## ";color:var(--cyan);}
.prose h3{color:var(--ink);font-size:1rem;margin:1.8rem 0 .6rem;}
.prose h3::before{content:"### ";color:var(--cyan);opacity:.7;}
.prose p,.prose ul,.prose ol{margin:0 0 1.1rem;}
.prose ul,.prose ol{padding-left:1.4rem;}
.prose li{margin:.25rem 0;}
.prose li::marker{color:var(--cyan);}
.prose strong{color:var(--ink);}
.prose a{border-bottom:1px solid var(--cyan);}
.prose blockquote{margin:1.2rem 0;padding:.3rem 0 .3rem 1rem;border-left:2px solid var(--red);color:var(--dim);}
.prose hr{border:0;border-top:1px solid var(--line);margin:2rem 0;}
.prose img{border:1px solid var(--line-hi);border-radius:6px;margin:1.3rem auto;}

:not(pre)>code{background:var(--bg-soft);border:1px solid var(--line);border-radius:4px;
  padding:.1rem .35rem;font-size:.85em;color:var(--cyan);}
.prose pre,.highlight,figure.highlight{background:#08090b !important;border:1px solid var(--line);
  border-radius:6px;padding:1rem 1.1rem;overflow-x:auto;margin:0 0 1.3rem;font-size:.84rem;line-height:1.6;}
.prose pre code{background:none;border:0;padding:0;color:inherit;font-size:inherit;}

.post-nav{display:flex;justify-content:space-between;gap:1rem;margin-top:3rem;padding-top:1.4rem;border-top:1px solid var(--line);font-size:.82rem;}
.post-nav a{color:var(--dim);border:0;}
.post-nav a:hover{color:var(--cyan);}
.post-nav .disabled{color:var(--line-hi);pointer-events:none;}

/* ---------- about ---------- */
.intro a{border-bottom:1px solid var(--cyan);}

/* ---------- footer ---------- */
.site-footer{border-top:1px solid var(--line);padding:1.6rem 0 2.5rem;color:var(--dim);font-size:.76rem;margin-top:2rem;}
.site-footer .wrap{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center;}
.site-footer a{color:var(--dim);border:0;}
.site-footer a:hover{color:var(--cyan);}
.foot-links{display:flex;gap:1rem;}

/* ---------- responsive ---------- */
@media (max-width:560px){
  body{font-size:14px;}
  .entry{grid-template-columns:5.5rem 1fr;grid-template-areas:"date title" "tag title";row-gap:.1rem;}
  .entry__date{grid-area:date;}.entry__tag{grid-area:tag;}.entry__title{grid-area:title;}
  .nav{width:100%;}
}

/* ---------- motion / a11y ---------- */
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important;scroll-behavior:auto !important;}
  .glitch::before,.glitch::after{display:none;}
}

/* ---------- neofetch about card ---------- */
.neofetch{display:flex;gap:1.6rem;align-items:flex-start;margin:1.5rem 0 2rem;
  border:1px solid var(--line);border-radius:8px;background:var(--bg-soft);
  padding:1.3rem 1.4rem;overflow-x:auto;position:relative;z-index:3;max-width:34rem;}
.nf-ascii{color:var(--cyan);font-size:.62rem;line-height:1.08;white-space:pre;margin:0;flex:none;
  text-shadow:.5px 0 var(--red),-.5px 0 var(--cyan);}
.nf-ascii .sub{color:var(--dim);}
.nf-info{flex:1;min-width:0;font-size:.82rem;line-height:1.55;}
.nf-title{font-family:var(--display);color:var(--ink);font-size:1rem;margin-bottom:.5rem;}
.nf-title .at{color:var(--red);}
.nf-head{display:flex;align-items:center;gap:.6rem;color:var(--red);font-size:.7rem;
  letter-spacing:.14em;text-transform:uppercase;margin:1rem 0 .4rem;}
.nf-head::after{content:"";flex:1;border-top:1px solid var(--line-hi);}
.nf-row{display:flex;align-items:baseline;gap:.35rem;}
.nf-key{color:var(--cyan);white-space:nowrap;}
.nf-dots{flex:1;border-bottom:1px dotted var(--line-hi);position:relative;top:-.28em;min-width:1.5rem;}
.nf-val{color:var(--ink-soft);white-space:nowrap;text-align:right;}
.nf-val a{border:0;color:var(--ink);}
.nf-val a:hover{color:var(--cyan);}
.nf-val .g{color:var(--green);} .nf-val .r{color:var(--red);}
@media(max-width:640px){
  .neofetch{flex-direction:column;gap:1rem;}
  .nf-ascii{align-self:center;font-size:.5rem;}
  .nf-val{white-space:normal;text-align:left;}
  .nf-dots{min-width:.75rem;}
}