/* === House palette (from your SCSS, flattened) === */
:root{
  --bg:#0b0f14; --panel:#0f1215; --text:#cfd6dd; --muted:#a9b3bd;
  --line:rgba(255,255,255,.08); --teal:#00fff0; --teal-soft:#66fff7;
}

/* Base */
html,body{background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:"Segoe UI",Roboto,Helvetica,Arial,sans-serif;margin:0}
a{color:var(--teal);text-decoration:none} a:hover{color:var(--teal-soft)}
strong{color:inherit} hr{border:0;border-top:1px solid var(--teal);opacity:.35;margin:18px 0}
h1,h2,h3,h4,h5,h6{color:var(--teal)} h2,h3{margin-top:34px;margin-bottom:12px}

/* Layout width */
.wrap, .markdown-body, main, .page-content, .content, article, .post,
body>:not(header):not(footer):not(.hero){max-width:980px;margin:0 auto;padding:0 18px}

/* Rhythm */
p{line-height:1.65;margin:0 0 14px} ul,ol{margin:8px 0 16px;padding-left:1.2rem} li{margin:4px 0}

/* Hero (animated glow) */
.hero{max-width:1100px;margin:30px auto 20px;padding:0 18px;text-align:center}
.hero img, img[alt*="Portfolio Banner"]{
  display:block;max-width:100%;height:auto;margin:0 auto 24px;border-radius:14px;
  outline:1px solid rgba(255,255,255,.03);
  box-shadow:0 18px 48px rgba(0,255,240,.20),0 8px 24px rgba(0,0,0,.55);
  animation:bannerGlow 4.5s ease-in-out infinite;
}
@keyframes bannerGlow{
  0%,100%{box-shadow:0 14px 42px rgba(0,255,240,.14),0 6px 20px rgba(0,0,0,.55)}
  50%{box-shadow:0 22px 62px rgba(0,255,240,.36),0 10px 28px rgba(0,0,0,.60)}
}

/* Buttons / CTAs */
.btn, a.cta-btn{
  display:inline-block;padding:12px 18px;border-radius:12px;background:#0d1117;border:1px solid #2b2f36;
  color:var(--teal);font-weight:700;letter-spacing:.2px;box-shadow:0 2px 10px rgba(0,0,0,.25);
  transition:background .15s,color .15s,transform .05s;
}
.btn:hover, a.cta-btn:hover{background:var(--teal);color:var(--bg)} .btn:active, a.cta-btn:active{transform:translateY(1px)}
.btn.block, a.cta-btn.block{display:block;width:max-content}
a:focus-visible,.btn:focus-visible{outline:2px solid var(--teal);outline-offset:2px;border-radius:10px}

/* Grid cards (3 in a row on desktop) */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:18px 0 20px}
.card{background:var(--panel);border:1px solid rgba(0,255,240,.15);border-radius:12px;padding:16px 18px;box-shadow:0 4px 20px rgba(0,0,0,.25)}
.card h3{color:var(--teal);margin:0 0 10px}
.card p{margin:0 0 8px}
.card .meta{color:var(--muted)}

/* QA Chronicles thumbnail */
.qc-thumb{
  display:block;width:280px;max-width:90vw;margin:10px 0 6px;border-radius:12px;overflow:hidden;
  box-shadow:0 6px 22px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.06) inset;
  transition:transform .12s ease, box-shadow .18s ease;
}
.qc-thumb img{display:block;width:100%;height:auto}
.qc-thumb:hover{transform:translateY(-1px);box-shadow:0 10px 28px rgba(0,0,0,.55),0 0 0 1px rgba(0,255,240,.28) inset}

/* Footer */
footer{max-width:980px;margin:40px auto 0;padding:20px 18px 0;text-align:center;font-size:.85em;opacity:.8;border-top:1px solid rgba(255,255,255,.05)}

/* Responsive */
@media (max-width:980px){ .grid-3{grid-template-columns:1fr 1fr} }
@media (max-width:760px){
  .wrap, body>*:not(header):not(footer):not(.hero){padding:0 14px}
  .hero{margin:22px auto 14px}
  .grid-3{grid-template-columns:1fr}
}

/* QA Chronicles card with right-docked thumbnail */
.card.with-thumb{ position:relative; padding-right:235px; min-height:190px; }
.card.with-thumb .card-body{ max-width: 76ch; }
.card.with-thumb .thumb{
  position:absolute; top:16px; right:18px; width:170px; height:auto; aspect-ratio:1/1;
  object-fit:cover; border-radius:10px; border:1px solid var(--line);
  box-shadow:0 6px 18px rgba(0,0,0,.35);
}

/* Stack on mobile */
@media (max-width:780px){
  .card.with-thumb{ padding-right:18px; }
  .card.with-thumb .thumb{
    position:static; display:block; margin:0 0 10px auto; width:60%; max-width:260px;
  }
}
/* Card glow hover (matches project-block style) */
.card{
  background: var(--panel);
  border: 1px solid rgba(0,255,240,.15);
  border-radius: 12px;
  padding: 16px 18px;
  box-shadow: 0 4px 20px rgba(0,0,0,.25);
  transition: box-shadow .28s ease, border-color .28s ease, transform .05s ease;
  will-change: box-shadow, border-color, transform;
}
.card:hover,
.card:focus-within{
  border-color: rgba(0,255,240,.35);
  box-shadow:
    0 0 20px rgba(0,255,240,.25),
    0 0 40px rgba(0,255,240,.15),
    0 6px 24px rgba(0,0,0,.45);
}
.card:active{ transform: translateY(1px); }

/* Optional: subtler glow for the right-thumb variant */
.card.with-thumb:hover,
.card.with-thumb:focus-within{
  box-shadow:
    0 0 18px rgba(0,255,240,.22),
    0 0 36px rgba(0,255,240,.12),
    0 6px 24px rgba(0,0,0,.45);
}
.site-nav a.active,
.site-nav a[aria-current="page"]{
  color: var(--teal);
  font-weight: 700;
  border-bottom: 2px solid var(--teal);
}

.site-nav.cta-row{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:10px 12px;
  margin:10px auto 0;
}
.site-nav.cta-row .cta-btn{ margin:0; } /* remove any leftover per-button margins */