/* === House palette (single source of truth) === */
:root{
  --bg:#0b0f14;
  --panel:#0f1215;
  --text:#cfd6dd;
  --muted:#a9b3bd;
  --line:rgba(255,255,255,.08);
  --teal:#00fff0;
  --teal-soft:#66fff7;

  --thumb-w:240px;   /* poster width; tweak 200–260px */
  --thumb-gap:18px;
}

/* ===== 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 (works with/without Jekyll themes) */
.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 with 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)}
a:focus-visible,.btn:focus-visible{outline:2px solid var(--teal);outline-offset:2px;border-radius:10px}

/* ===== Project case-study blocks (with teal glow) ===== */
.project-block{
  position:relative;
  background:var(--panel);
  border:1px solid rgba(0,255,240,.15);
  border-radius:12px;
  box-shadow:0 4px 20px rgba(0,0,0,.25);
  margin:22px 0;
  padding:16px 18px;
  overflow:hidden;

  /* hover/focus effects */
  transition: box-shadow .22s ease, border-color .22s ease, transform .18s ease;
}
.project-block > *{ position:relative; z-index:1; }

/* teal “glow” layer */
.project-block::before{
  content:"";
  position:absolute; inset:-2px;
  border-radius:12px;
  background:
    radial-gradient(40% 50% at 85% 10%, rgba(0,255,240,.30) 0%, transparent 70%),
    radial-gradient(100% 100% at 50% 50%, rgba(0,255,240,.18) 0%, transparent 60%);
  opacity:0;
  filter: blur(14px);
  pointer-events:none;
  transition: opacity .22s ease, filter .22s ease;
  z-index:0;
}
.project-block:hover,
.project-block:focus-within{
  border-color: rgba(0,255,240,.35);
  box-shadow: 0 10px 30px rgba(0,255,240,.10), 0 6px 20px rgba(0,0,0,.35);
  transform: translateY(-1px);
}
.project-block:hover::before,
.project-block:focus-within::before{
  opacity:1; filter: blur(22px);
}
.project-block:active{transform:translateY(1px)}

.project-block em{color:var(--muted)}
.project-block p{margin:6px 0 8px;line-height:1.5;max-width:78ch}

/* Right-docked poster */
.project-block.with-thumb{
  padding-right:calc(var(--thumb-w) + var(--thumb-gap) + 18px);
  min-height:calc(var(--thumb-w) * 1.25);
}
.project-block.with-thumb .thumb{
  position:absolute; top:16px; right:18px;
  width:var(--thumb-w); height:auto; aspect-ratio:3/4; object-fit:cover;
  border-radius:10px; border:1px solid var(--line);
  box-shadow:0 6px 18px rgba(0,0,0,.35);
}

/* ===== Metrics table (teal header, dark rows, thin grid) ===== */
.metrics-look table{
  width:100%;
  border-collapse:collapse;
  background:#0f1215;
  border:1px solid rgba(255,255,255,.08);
  margin:12px 0;
  border-radius:8px;
}
.metrics-look thead th{
  background:rgba(0,255,240,.08);
  color:#00fff0;
  text-align:left;
  font-weight:700;
  font-size:14px;
  padding:12px 14px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.metrics-look tbody th,
.metrics-look tbody td{
  background:#0f1215;
  color:#cfd6dd;
  padding:12px 14px;
  vertical-align:top;
}
.metrics-look thead th + th,
.metrics-look tbody td + td,
.metrics-look tbody th + td{ border-left:1px solid rgba(255,255,255,.08); }
.metrics-look tbody tr + tr td,
.metrics-look tbody tr + tr th{ border-top:1px solid rgba(255,255,255,.08); }

/* Media */
img{border-radius:10px;transition:transform .12s}
img:hover{transform:translateY(-1px)}

/* 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:780px){
  .project-block.with-thumb{padding-right:18px;min-height:auto}
  .project-block.with-thumb .thumb{
    position:static;display:block;margin:0 0 10px auto;width:60%;max-width:280px;aspect-ratio:auto;
  }
}
@media (max-width:760px){
  .wrap, body>*:not(header):not(footer):not(.hero){padding:0 14px}
  .hero{margin:22px auto 14px}
}

/* Motion sensitivity */
@media (prefers-reduced-motion: reduce){
  .project-block, .project-block::before,
  .btn, a.cta-btn, img{ transition:none; animation:none; }
}

/* --- Global content rhythm (applies across case-study pages) --- */
main h2{ margin:28px 0 10px; }
main hr{ margin:24px 0; }

main p{ line-height:1.65; margin:0 0 14px; }

main ul,
main ol{ margin:10px 0 18px; padding-left:1.25rem; }

main li{ line-height:1.55; margin:6px 0; }   /* <-- fixes the “crammed” bullets */

/* handy: space after details/embeds so the next section breathes */
details + *{ margin-top:16px; }
.embed{ margin:12px 0 18px; }

/* --- FORCE comfy spacing for plain content sections (case-study pages) --- */
main h2 { margin: 32px 0 12px !important; }
main hr { margin: 28px 0 !important; }

main p  { line-height: 1.7 !important; margin: 0 0 14px !important; }

main ul,
main ol { margin: 12px 0 20px !important; padding-left: 1.3rem !important; }

main li  { line-height: 1.7 !important; margin: 8px 0 !important; }

/* after a <details> block or video embed, give breathing room */
details + * { margin-top: 16px !important; }
.embed { margin: 12px 0 18px !important; }

/* Smaller evidence thumbnail in the insight table */
.table-insight .evidence{ width: 160px; text-align: center; }

.table-insight .evidence img.thumb-sm{
  width: 120px !important;       /* tweak: 120 → 96 if you want even smaller */
  height: auto !important;
  aspect-ratio: 4 / 3;           /* keeps it compact; drop if you prefer free ratio */
  object-fit: cover;
  display: block; margin: 0 auto 6px;
  border-radius: 10px; border: 1px solid var(--line);
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
}

/* Certificates table */
.table-certs{
  width:100%; border-collapse:collapse; background:#0f1215;
  border:1px solid rgba(255,255,255,.08); margin:12px 0; border-radius:8px;
}
.table-certs th{
  background:rgba(0,255,240,.08); color:#00fff0; text-align:left;
  font-weight:700; font-size:14px; padding:12px 14px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.table-certs td{
  padding:12px 14px; vertical-align:top; border-top:1px solid rgba(255,255,255,.08);
}
.table-certs th + th, .table-certs td + td{ border-left:1px solid rgba(255,255,255,.08); }
.table-certs .evidence{ width:160px; text-align:center; }

/* Small clickable PDF thumbnail */
.pdf-thumb{
  width: 96px;   /* change to 120px if you want larger */
  height:auto; display:block; margin:0 auto;
  border-radius:8px; border:1px solid rgba(255,255,255,.08);
  box-shadow:0 6px 18px rgba(0,0,0,.35); transition:transform .12s ease;
}
.pdf-thumb:hover{ transform:translateY(-1px); }

/* Mobile: stack rows nicely */
@media (max-width:820px){
  .table-certs{ display:block; }
  .table-certs thead{ display:none; }
  .table-certs tr{ display:block; }
  .table-certs td{ display:block; border-left:0 !important; }
  .table-certs .evidence{ width:auto; margin-top:8px; }
}

/* high-specificity + !important to beat theme styles */
.wrap main p.disclaimer{
  max-width:72ch !important;
  margin-left:auto !important;
  margin-right:auto !important;
  margin-bottom:2rem !important;
  font-style:italic;
  display:block;
}

.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 */

/* FIGURE spacing + kill any site frame */
.article-figure{
  margin: 18px 0 22px;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none;
}

/* Clickable wrapper: no visible box */
.article-figure .zoomable{
  display: inline-block;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-decoration: none;
}

/* Image: clean, and glow happens on hover */
.article-figure{ text-align:center; }

.article-figure img{
  width: auto;
  max-width: 100%;
  height: auto;
}

/* Teal glow ON THE IMAGE (not a box) */
.article-figure .zoomable:hover img{
  box-shadow:
    0 0 0 1px rgba(0,242,201,.35),
    0 0 28px rgba(0,242,201,.22),
    0 18px 60px rgba(0,0,0,.35);
  transform: translateY(-1px);
}

/* Caption hint */
.article-figure .hint{
  opacity:.7;
  font-size:.95em;
}
/* FORCE: center + hover glow, no clipping, no boxes */
.article-figure.plain-figure{
  padding: 0 !important;
  margin: 18px 0 22px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
  text-align: center !important;
}

.article-figure.plain-figure a.zoomable{
  display: inline-block !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important; /* stops glow being clipped */
  text-decoration: none !important;
}

.article-figure.plain-figure a.zoomable img{
  display: block !important;
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 0 auto !important;
  border: 0 !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  transition: box-shadow .15s ease, transform .15s ease !important;
}

.article-figure.plain-figure a.zoomable:hover img{
  box-shadow:
    0 0 0 1px rgba(0,242,201,.45),
    0 0 34px rgba(0,242,201,.28),
    0 18px 60px rgba(0,0,0,.35) !important;
  transform: translateY(-1px) !important;
}

.intro .headshot{ margin:0 !important; }