/* ==========================================================================
   evey.cc — blog reading layer
   Loaded AFTER each post's inline <style> so it refines the shared base while
   leaving per-post extras and custom tokens (--purple, .persp, .crew-card…)
   untouched. Only safe, shared selectors are upgraded here.
   ========================================================================== */

/* reading-progress bar — pure CSS scroll-timeline; invisible where unsupported */
.read-progress{position:fixed;top:0;left:0;height:2px;width:100%;transform-origin:0 50%;transform:scaleX(0);
  background:linear-gradient(90deg,var(--accent),var(--accent-2,#00d838));box-shadow:0 0 12px rgba(0,255,66,0.6);z-index:200;pointer-events:none}
@supports (animation-timeline: scroll()){
  .read-progress{animation:readGrow auto linear;animation-timeline:scroll(root block)}
  @keyframes readGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
}

::selection{background:rgba(0,255,66,0.22);color:#fff}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
html{scrollbar-width:thin;scrollbar-color:rgba(0,255,66,0.28) transparent}
::-webkit-scrollbar{width:9px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(0,255,66,0.22);border-radius:9px}
::-webkit-scrollbar-thumb:hover{background:rgba(0,255,66,0.4)}

/* faint film grain over the flat background for depth */
body::after{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;opacity:0.022;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat:repeat;background-size:240px 240px}
.wrap{z-index:1}

/* headline + meta — Departure Mono where available, safe fallback to the
   post's own --mono/--font otherwise so the 15 legacy posts still read fine */
h1{font-family:var(--font-display,var(--mono,var(--font,inherit)));letter-spacing:-0.035em;line-height:1.18}
.meta{letter-spacing:0.05em;display:inline-flex;flex-wrap:wrap;gap:0 2px}

/* section headings get a quiet accent kicker */
h2{position:relative;padding-left:15px}
h2::before{content:'';position:absolute;left:0;top:0.18em;bottom:0.18em;width:3px;border-radius:2px;background:linear-gradient(var(--accent),transparent)}

/* drop cap — only when the post truly opens with a paragraph */
article>p:first-child::first-letter{float:left;font-family:var(--mono);font-size:3.1rem;line-height:0.78;font-weight:700;color:var(--accent);margin:0.34rem 0.7rem 0 0;text-shadow:0 0 22px rgba(0,255,66,0.3)}

/* body links — animated underline grow */
article a,.bio a{text-decoration:none;background-image:linear-gradient(currentColor,currentColor);background-size:0% 1px;background-position:0 100%;background-repeat:no-repeat;transition:background-size 0.25s var(--ease,ease),color 0.2s ease}
article a:hover{color:var(--accent-hover,#5bff86);text-decoration:none;background-size:100% 1px}

/* code, quotes, tables */
code{border:1px solid rgba(255,255,255,0.06)}
pre{box-shadow:0 16px 32px -22px rgba(0,0,0,0.85)}
blockquote{box-shadow:inset 0 0 36px -22px rgba(0,255,66,0.45)}
th{letter-spacing:0.05em;text-transform:uppercase;font-size:0.68rem}
table tr td{transition:background 0.18s ease}
table tr:hover td{background:rgba(255,255,255,0.022)}
hr{border:none;height:1px;background:linear-gradient(90deg,transparent,var(--border),transparent)}

/* elevated back link + footer + cta */
.back{display:inline-flex;align-items:center;gap:7px;padding:7px 15px;border:1px solid var(--border);border-radius:999px;transition:color 0.2s ease,border-color 0.2s ease,box-shadow 0.2s ease}
.back:hover{color:var(--accent);border-color:rgba(0,255,66,0.4);box-shadow:0 0 18px -8px rgba(0,255,66,0.55);text-decoration:none}
.cta{box-shadow:0 0 0 1px rgba(0,255,66,0.4),0 8px 22px -8px rgba(0,255,66,0.35)}
.cta:hover{box-shadow:0 0 0 1px #00ff42,0 12px 30px -8px rgba(0,255,66,0.4)}
.footer{border-top:1px solid var(--border);margin-top:36px}

@media(max-width:640px){article>p:first-child::first-letter{font-size:2.6rem}}
@media(prefers-reduced-motion:reduce){.read-progress{display:none}}