/* ===================================================================
   Design tokens
   =================================================================== */
:root{
  --bg:#FAFAF8;
  --surface:#FFFFFF;
  --surface-2:#F2F3F1;
  --text:#14181F;
  --muted:#5B6472;
  --border:#E3E6EA;
  --accent:#2454A6;      /* reagent blue */
  --accent-ink:#FFFFFF;
  --accent-soft:#E8EEF9;
  --flame:#E8622C;       /* bunsen flame orange - secondary accent, used sparingly */
  --flame-soft:#FCE9E0;
  --teal:#12786F;
  --teal-soft:#E1F1EF;
  --violet:#6B4FA0;
  --violet-soft:#EEE8F7;
  --radius:14px;
  --radius-sm:9px;
  --shadow:0 1px 2px rgba(20,24,31,.04), 0 8px 24px -12px rgba(20,24,31,.10);
  --maxw:1120px;
  --font-display:'Space Grotesk', 'Segoe UI', Arial, sans-serif;
  --font-body:'Inter', 'Segoe UI', Arial, sans-serif;
  --font-mono:'IBM Plex Mono', 'Consolas', monospace;
}

[data-theme="dark"]{
  --bg:#0E1116;
  --surface:#161B22;
  --surface-2:#1C222B;
  --text:#EDEFF2;
  --muted:#8B94A3;
  --border:#262C36;
  --accent:#6FA1FF;
  --accent-ink:#08101F;
  --accent-soft:#182640;
  --flame:#FF8A5C;
  --flame-soft:#2E1D14;
  --teal:#4FC2B6;
  --teal-soft:#132420;
  --violet:#B29AE0;
  --violet-soft:#221B31;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.5);
}

/* ===================================================================
   Base
   =================================================================== */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font-body); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
  transition:background .2s, color .2s;
}
body.has-hero-wash{
  background-image:radial-gradient(760px 420px at 82% -8%, var(--accent-soft), transparent 65%),
                    radial-gradient(600px 360px at -6% 10%, var(--flame-soft), transparent 60%);
  background-repeat:no-repeat;
}
h1,h2,h3{
  font-family:var(--font-display); font-weight:600; line-height:1.15;
  margin:0 0 .5em; letter-spacing:-.01em;
}
h1{font-size:clamp(2.1rem, 4.5vw, 3.4rem);}
h2{font-size:clamp(1.5rem, 3vw, 2.1rem);}
h3{font-size:1.25rem;}
p{margin:0 0 1em; color:var(--text);}
a{color:var(--accent); text-decoration:none;}
a:hover{text-decoration:underline;}
.muted{color:var(--muted);}
img{max-width:100%; display:block;}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:4px;}

.container{max-width:var(--maxw); margin:0 auto; padding:0 20px;}
.section{padding:64px 0;}
.section--tight{padding:40px 0;}
.section-head{max-width:640px; margin-bottom:32px;}
.eyebrow{
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.09em;
  text-transform:uppercase; color:var(--accent); display:block; margin-bottom:10px;
  font-weight:600;
}

/* ===================================================================
   Nav
   =================================================================== */
header.site-header{
  position:sticky; top:0; z-index:50; background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--border);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 20px; max-width:var(--maxw); margin:0 auto; gap:16px;
}
.brand{
  font-family:var(--font-display); font-weight:700; font-size:1.05rem;
  color:var(--text); display:flex; align-items:center; gap:8px;
}
.brand .dot{color:var(--flame);}
.nav-links{display:flex; gap:4px; list-style:none; margin:0; padding:0; align-items:center;}
.nav-links a{
  color:var(--text); font-size:.92rem; font-weight:500; padding:8px 12px;
  border-radius:var(--radius-sm); text-decoration:none;
}
.nav-links a:hover{background:var(--surface-2); text-decoration:none;}
.nav-links a.current{color:var(--accent);}
.nav-right{display:flex; align-items:center; gap:8px;}
.theme-toggle{
  background:var(--surface-2); border:1px solid var(--border); color:var(--text);
  width:36px; height:36px; border-radius:50%; cursor:pointer; font-size:1rem;
  display:flex; align-items:center; justify-content:center;
}
.theme-toggle:hover{border-color:var(--accent);}
.nav-toggle{display:none; background:none; border:none; font-size:1.4rem; color:var(--text); cursor:pointer;}

@media (max-width:820px){
  .nav-links{
    position:absolute; top:100%; left:0; right:0; background:var(--bg);
    border-bottom:1px solid var(--border); flex-direction:column; align-items:stretch;
    padding:8px; display:none;
  }
  .nav-links.open{display:flex;}
  .nav-links a{padding:12px 14px;}
  .nav-toggle{display:block;}
}

/* ===================================================================
   Buttons
   =================================================================== */
.btn{
  display:inline-flex; align-items:center; gap:8px; font-family:var(--font-body);
  font-weight:600; font-size:.94rem; padding:11px 20px; border-radius:var(--radius-sm);
  border:1px solid transparent; cursor:pointer; text-decoration:none; transition:filter .15s, transform .1s;
}
.btn:hover{text-decoration:none; transform:translateY(-1px);}
.btn-primary{background:var(--accent); color:var(--accent-ink);}
.btn-primary:hover{filter:brightness(1.08);}
.btn-secondary{background:var(--surface); color:var(--text); border-color:var(--border);}
.btn-secondary:hover{border-color:var(--accent); color:var(--accent);}
.btn-sm{padding:8px 14px; font-size:.85rem;}

/* ===================================================================
   Hero
   =================================================================== */
.hero{padding:60px 0 20px;}
.hero-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:48px; align-items:center;}
.hero-solo{max-width:680px;}
.hero-solo .hero-ctas{justify-content:flex-start;}
.hero-solo .hero-sub{margin-left:0; margin-right:0;}
.hero h1{margin-bottom:.4em;}
.hero-sub{font-size:1.15rem; color:var(--muted); max-width:46ch; margin-bottom:1.6em;}
.hero-ctas{display:flex; gap:12px; flex-wrap:wrap;}

@media (max-width:820px){
  .hero-grid{grid-template-columns:1fr;}
}

/* ===================================================================
   Cards / project grid
   =================================================================== */
.grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:20px;}
.grid--2{grid-template-columns:repeat(2, 1fr);}
@media (max-width:900px){.grid, .grid--2{grid-template-columns:repeat(2,1fr);}}
@media (max-width:600px){.grid, .grid--2{grid-template-columns:1fr;}}

.card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  overflow:hidden; box-shadow:var(--shadow); display:flex; flex-direction:column;
  transition:transform .15s, border-color .15s, box-shadow .15s;
}
.card:hover{transform:translateY(-3px); border-color:var(--accent); box-shadow:0 16px 32px -16px rgba(20,24,31,.22);}
.card-media{
  aspect-ratio:16/10; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  color:var(--muted); font-family:var(--font-mono); font-size:.72rem; border-bottom:1px solid var(--border);
  background:linear-gradient(155deg, var(--accent-soft), var(--surface-2) 70%); position:relative; overflow:hidden;
}
.card-media::before{
  content:attr(data-icon); font-family:var(--font-display); font-size:2.4rem; line-height:1;
  color:var(--accent); opacity:.55;
}
.card-media::after{
  content:""; position:absolute; inset:0; background-image:radial-gradient(var(--border) 1px, transparent 1px);
  background-size:16px 16px; opacity:.35; pointer-events:none;
}
.card-media span{position:relative; z-index:1;}
.card-media img{width:100%; height:100%; object-fit:cover; position:relative; z-index:1;}
.card-media.has-img{display:block; padding:0;}
.card-media.has-img::before, .card-media.has-img::after{display:none;}
.card-media.has-img img{position:absolute; inset:0; width:100%; height:100%;}
.card-media.m-contain img{object-fit:contain; padding:16px;}
.card-media.m-chem{background:linear-gradient(155deg, var(--flame-soft), var(--surface-2) 70%);}
.card-media.m-chem::before{color:var(--flame);}
.card-media.m-student{background:linear-gradient(155deg, var(--teal-soft), var(--surface-2) 70%);}
.card-media.m-student::before{color:var(--teal);}
.card-media.m-data{background:linear-gradient(155deg, var(--violet-soft), var(--surface-2) 70%);}
.card-media.m-data::before{color:var(--violet);}

/* ===================================================================
   Swipe carousel (phone-shaped screenshots)
   =================================================================== */
.phone-carousel{
  background:linear-gradient(155deg, var(--teal-soft), var(--surface-2) 75%);
  border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow);
  overflow:hidden; position:relative;
}
.phone-track{
  display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch; padding:26px 0 0;
}
.phone-track::-webkit-scrollbar{display:none;}
.phone-slide{
  flex:0 0 100%; scroll-snap-align:center; display:flex; flex-direction:column;
  align-items:center; padding:0 24px;
}
.phone-slide img{
  max-height:400px; width:auto; border-radius:14px; border:1px solid var(--border);
  box-shadow:0 12px 28px -14px rgba(20,24,31,.35);
}
.phone-slide .phone-caption{
  margin-top:14px; font-family:var(--font-mono); font-size:.78rem; color:var(--teal);
  text-transform:uppercase; letter-spacing:.07em; font-weight:600;
}
.phone-dots{display:flex; justify-content:center; gap:7px; padding:16px 0 20px;}
.phone-dot{
  width:7px; height:7px; border-radius:50%; background:var(--border); border:none; padding:0; cursor:pointer;
}
.phone-dot.active{background:var(--teal); width:18px; border-radius:4px; transition:width .2s;}
.phone-arrow{
  position:absolute; top:50%; transform:translateY(-50%); background:var(--surface); border:1px solid var(--border);
  width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  cursor:pointer; color:var(--text); font-size:.9rem; box-shadow:var(--shadow); z-index:2;
}
.phone-arrow.prev{left:10px;} .phone-arrow.next{right:10px;}
@media (max-width:600px){.phone-arrow{display:none;}}

.phone-row-wrap{
  background:linear-gradient(155deg, var(--teal-soft), var(--surface-2) 75%);
  border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:28px 20px 22px;
}
.phone-row{display:flex; justify-content:center; align-items:flex-start; gap:24px; flex-wrap:wrap;}
.phone-row .phone-slide{flex:0 1 260px; padding:0;}
.phone-row .phone-slide img{max-height:340px; width:100%; height:auto; object-fit:contain;}
@media (max-width:700px){
  .phone-row{gap:16px;}
  .phone-row .phone-slide{flex:0 1 150px;}
}
.card-body{padding:18px 20px 20px; display:flex; flex-direction:column; gap:6px; flex:1;}
.tag{
  display:inline-flex; align-self:flex-start; font-family:var(--font-mono); font-size:.68rem;
  letter-spacing:.06em; text-transform:uppercase; padding:4px 9px; border-radius:20px;
  background:var(--accent-soft); color:var(--accent); margin-bottom:2px;
}
.tag.chem{background:var(--flame-soft); color:var(--flame);}
.tag.student{background:var(--teal-soft); color:var(--teal);}
.tag.data{background:var(--violet-soft); color:var(--violet);}
.card h3{margin:0 0 2px;}
.card p.desc{color:var(--muted); font-size:.92rem; margin-bottom:12px; flex:1;}
.card-cta{font-weight:600; font-size:.9rem; color:var(--accent);}
.status-pill{
  font-family:var(--font-mono); font-size:.68rem; color:var(--muted);
  border:1px solid var(--border); border-radius:20px; padding:3px 9px; align-self:flex-start;
}

/* ===================================================================
   Filter bar (resources page)
   =================================================================== */
.filter-bar{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:28px;}
.filter-btn{
  font-family:var(--font-mono); font-size:.78rem; padding:7px 14px; border-radius:20px;
  border:1px solid var(--border); background:var(--surface); color:var(--text); cursor:pointer;
}
.filter-btn:hover{border-color:var(--accent);}
.filter-btn.active{background:var(--accent); color:var(--accent-ink); border-color:var(--accent);}

/* ===================================================================
   Misc sections
   =================================================================== */
.strip{background:var(--surface-2); border-top:1px solid var(--border); border-bottom:1px solid var(--border);}
.stat-row{display:flex; gap:40px; flex-wrap:wrap;}
.stat{}
.stat .num{font-family:var(--font-display); font-size:2rem; font-weight:700; color:var(--accent);}
.stat .lbl{font-size:.85rem; color:var(--muted);}

.book-strip{
  display:grid; grid-template-columns:140px 1fr auto; gap:22px; align-items:center;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:22px; box-shadow:var(--shadow);
}
.book-cover{
  aspect-ratio:2/3; background:var(--surface-2); border-radius:8px; border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center; color:var(--muted); font-family:var(--font-mono); font-size:.7rem; text-align:center; padding:8px;
  overflow:hidden;
}
@media (max-width:700px){.book-strip{grid-template-columns:90px 1fr; }.book-strip .btn{grid-column:1/-1;}}

.split{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center;}
@media (max-width:820px){.split{grid-template-columns:1fr;}}

.list-check{list-style:none; margin:0; padding:0;}
.list-check li{padding-left:26px; position:relative; margin-bottom:10px; color:var(--muted);}
.list-check li::before{content:"→"; position:absolute; left:0; color:var(--accent); font-weight:700;}

/* ===================================================================
   Footer
   =================================================================== */
footer.site-footer{border-top:1px solid var(--border); padding:44px 0 30px; margin-top:40px;}
.footer-grid{display:grid; grid-template-columns:2fr 1fr 1fr; gap:24px; margin-bottom:28px;}
.footer-grid h4{font-size:.8rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin:0 0 12px; font-family:var(--font-mono); font-weight:500;}
.footer-grid ul{list-style:none; margin:0; padding:0;}
.footer-grid li{margin-bottom:8px;}
.footer-grid a{color:var(--text); font-size:.92rem;}
.footer-bottom{display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; padding-top:20px; border-top:1px solid var(--border); font-size:.82rem; color:var(--muted);}
@media (max-width:700px){.footer-grid{grid-template-columns:1fr 1fr;}}

/* ===================================================================
   Collage (About page "what I've made" photo wall)
   =================================================================== */
.collage{
  display:flex; flex-wrap:wrap; gap:18px 14px; justify-content:center; align-items:flex-start;
  padding:10px;
}
.collage-tile{
  background:var(--surface); padding:8px 8px 26px; border-radius:5px; box-shadow:var(--shadow);
  width:130px; transition:transform .2s, box-shadow .2s; position:relative; cursor:default;
}
.collage-tile img{width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:2px; display:block;}
.collage-tile .collage-cap{
  position:absolute; left:0; right:0; bottom:7px; text-align:center;
  font-family:var(--font-display); font-size:.68rem; font-weight:600; color:var(--muted);
}
.collage-tile:hover{transform:rotate(0deg) translateY(-5px) scale(1.05); box-shadow:0 20px 34px -16px rgba(20,24,31,.3); z-index:5;}
.collage-tile.r1{transform:rotate(-7deg);}
.collage-tile.r2{transform:rotate(4deg); margin-top:22px;}
.collage-tile.r3{transform:rotate(-3deg);}
.collage-tile.r4{transform:rotate(6deg); margin-top:10px;}
.collage-tile.r5{transform:rotate(-5deg); margin-top:26px;}
.collage-tile.r6{transform:rotate(3deg);}
.collage-tile.r7{transform:rotate(-4deg); margin-top:14px;}
@media (max-width:820px){
  .collage-tile{width:108px;}
  .collage-tile.r2, .collage-tile.r4, .collage-tile.r5, .collage-tile.r7{margin-top:0;}
}
.page-head{padding:52px 0 8px;}
.page-head .eyebrow{margin-bottom:12px;}
.page-head p{color:var(--muted); max-width:60ch; font-size:1.05rem;}

/* ===================================================================
   Lightbox (click-to-enlarge images)
   =================================================================== */
.lightbox-trigger{cursor:zoom-in;}
.lightbox-overlay{
  position:fixed; inset:0; background:rgba(10,10,15,.88); z-index:1000;
  display:flex; align-items:center; justify-content:center; padding:40px; cursor:zoom-out;
  opacity:0; pointer-events:none; transition:opacity .18s;
}
@media (max-width:600px){
  .lightbox-overlay{padding:14px;}
  .lightbox-overlay img{max-width:96vw; max-height:82vh;}
  .lightbox-close{top:10px; right:10px;}
}
.lightbox-overlay.open{opacity:1; pointer-events:auto;}
.lightbox-overlay img{
  max-width:92vw; max-height:88vh; border-radius:10px; box-shadow:0 24px 60px -20px rgba(0,0,0,.6);
  cursor:zoom-out;
}
.lightbox-close{
  position:absolute; top:22px; right:26px; width:38px; height:38px; border-radius:50%;
  background:var(--surface); border:1px solid var(--border); color:var(--text); font-size:1.1rem;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}