/* =========================================================================
   ACADEMIC PROFILE — STYLESHEET
   -------------------------------------------------------------------------
   You should NOT normally need to edit this file. Colors, fonts and spacing
   are all controlled by the CSS variables in the ":root" block right below.
   Change a value there and it updates the whole site.
   ========================================================================= */

:root{
  /* ---- COLORS ---- */
  --bg:        #10161d;   /* page background */
  --panel:     #1a222b;   /* card / panel surface */
  --panel-2:   #212b36;   /* hover surface, alt rows */
  --line:      #2a3441;   /* hairline borders / grid lines */
  --text:      #eaedf0;   /* primary text */
  --muted:     #8792a0;   /* secondary text */
  --accent:    #46d7c4;   /* "charge" teal — links, highlights, hover fills */
  --accent-2:  #e8a23d;   /* copper amber — secondary highlight, badges */

  /* ---- TYPE ---- */
  --f-display: 'Space Grotesk', sans-serif;   /* headings */
  --f-body:    'Inter', sans-serif;           /* paragraphs, UI */
  --f-mono:    'JetBrains Mono', monospace;   /* labels, dates, stats */

  /* ---- LAYOUT ---- */
  --maxw: 1120px;
  --radius: 10px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--f-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img,video{max-width:100%;display:block;border-radius:var(--radius);}
a{color:var(--accent);text-decoration:none;}
a:hover{text-decoration:underline;}
h1,h2,h3,h4{font-family:var(--f-display);font-weight:600;line-height:1.15;margin:0 0 .5em;}
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);}
.muted{color:var(--muted);}
.mono{font-family:var(--f-mono);}
.container{max-width:var(--maxw);margin:0 auto;padding:0 24px;}
.eyebrow{
  font-family:var(--f-mono);font-size:.75rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--accent);margin-bottom:.6em;display:block;
}

/* Subtle blueprint grid texture used behind the hero only */
.grid-bg{
  position:absolute;inset:0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:42px 42px;
  background-position:center top;
  -webkit-mask-image:linear-gradient(to bottom, black, transparent 85%);
          mask-image:linear-gradient(to bottom, black, transparent 85%);
  opacity:.35;
  pointer-events:none;
}

/* =============================== NAVBAR ================================ */
header.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(16,22,29,.85);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  max-width:var(--maxw);margin:0 auto;padding:14px 24px;
  display:flex;align-items:center;justify-content:space-between;
}
.brand{font-family:var(--f-display);font-weight:700;font-size:1.05rem;color:var(--text);display:flex;align-items:center;gap:10px;}
.brand .dot{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent);}
.brand:hover{text-decoration:none;}

/* header nav links — the "charge" underline is the site's signature hover motif */
.nav-links{display:flex;gap:22px;flex-wrap:wrap;align-items:center;}
.charge-link{position:relative;padding-bottom:4px;color:var(--text);font-size:.88rem;white-space:nowrap;}
.charge-link::after{
  content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--line);
}
.charge-link::before{
  content:"";position:absolute;left:0;bottom:0;height:2px;width:0%;
  background:var(--accent);transition:width .35s ease;
}
.charge-link:hover::before,.charge-link.active::before{width:100%;}
.charge-link:hover{text-decoration:none;color:var(--text);}
.charge-link.active{color:var(--accent);}

/* hamburger toggle — shown only on narrow screens */
.nav-toggle{
  display:none;background:var(--panel);border:1px solid var(--line);border-radius:8px;
  width:38px;height:38px;cursor:pointer;color:var(--text);align-items:center;justify-content:center;
}
.nav-toggle svg{width:18px;height:18px;}

/* ================================ HERO ================================= */
.hero{position:relative;padding:72px 0 40px;overflow:hidden;}
.hero-grid{
  display:grid;grid-template-columns:220px 1fr;gap:44px;align-items:center;position:relative;z-index:1;
}
.hero-photo{
  width:220px;height:220px;border-radius:50%;object-fit:cover;
  border:3px solid var(--panel);outline:2px solid var(--accent);outline-offset:6px;
}
.hero h1{margin-bottom:.15em;}
.hero .role{font-family:var(--f-mono);color:var(--accent-2);font-size:.95rem;margin-bottom:.3em;}
.hero .thesis{max-width:56ch;color:var(--muted);font-size:1.05rem;}
.social-row{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap;}
.social-row a{
  width:38px;height:38px;border-radius:50%;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;color:var(--text);
  transition:.2s;
}
.social-row a:hover{border-color:var(--accent);color:var(--accent);text-decoration:none;transform:translateY(-2px);}
.social-row svg{width:17px;height:17px;fill:currentColor;}

/* animated charge-bar divider — the site's one signature motif */
.charge-divider{display:flex;gap:4px;margin:34px 0;height:6px;}
.charge-divider span{flex:1;background:var(--line);border-radius:2px;animation:chg 2.4s ease-in-out infinite;}
.charge-divider span:nth-child(1){animation-delay:0s;}
.charge-divider span:nth-child(2){animation-delay:.15s;}
.charge-divider span:nth-child(3){animation-delay:.3s;}
.charge-divider span:nth-child(4){animation-delay:.45s;}
.charge-divider span:nth-child(5){animation-delay:.6s;}
.charge-divider span:nth-child(6){animation-delay:.75s;}
@keyframes chg{
  0%,100%{background:var(--line);}
  50%{background:var(--accent);box-shadow:0 0 10px var(--accent);}
}
@media (prefers-reduced-motion: reduce){
  .charge-divider span{animation:none;background:var(--accent);}
}

/* ============================ CARDS (uniform everywhere) ================= */
/* Every card — home page "Latest" sections and every list page — uses this
   same shape: image on top, then a label/title/date block. Titles are
   clamped to 2 lines so every card in a row stays the same height. */
.readout,.latest-sections{margin:30px 0 10px;}
.latest-section{margin-bottom:56px;}
.latest-section:last-child{margin-bottom:0;}

.card{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:0;overflow:hidden;transition:.2s;cursor:pointer;display:flex;flex-direction:column;
}
.card:hover{border-color:var(--accent);transform:translateY(-3px);}
.card img{height:160px;width:100%;object-fit:cover;margin:0;border-radius:0;}
.card .card-body{padding:16px 18px 18px;}
.card .label{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);}
.card h3{
  margin:.5em 0 0;font-size:1.05rem;min-height:2.6em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.card .date{font-family:var(--f-mono);font-size:.75rem;color:var(--muted);display:block;margin-top:8px;}

/* ============================== SECTIONS ================================ */
section{padding:50px 0;}
section.alt{background:var(--panel);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.section-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:26px;flex-wrap:wrap;gap:10px;}
.section-head a{font-family:var(--f-mono);font-size:.8rem;}


.updates-banner{
  max-width:300px;margin:0 auto 40px;text-align:center;
  background:var(--panel);border:1px solid var(--line);border-top:3px solid var(--accent);
  border-radius:var(--radius);padding:20px 24px;
}
.updates-banner h2{margin:0;color:var(--accent);font-size:1.4rem;}


/* grids for listing pages */
.grid{display:grid;gap:20px;}
.grid.cols-3{grid-template-columns:repeat(3,1fr);}
.grid.cols-2{grid-template-columns:repeat(2,1fr);}

.tag{
  display:inline-block;font-family:var(--f-mono);font-size:.68rem;
  border:1px solid var(--line);border-radius:999px;padding:3px 10px;margin:0 6px 6px 0;color:var(--muted);
}

/* ============================== PAGE HEADERS ============================ */
.page-hero{padding:60px 0 30px;border-bottom:1px solid var(--line);}
.page-hero .eyebrow{margin-bottom:.3em;}

/* ============================ POPUP / MODAL =============================== */
.modal-overlay{
  position:fixed;inset:0;background:rgba(8,11,15,.86);display:none;
  align-items:flex-start;justify-content:center;z-index:200;padding:56px 20px;overflow-y:auto;
}
.modal-overlay.open{display:flex;}
.modal-box{
  background:var(--panel);border:1px solid var(--line);border-radius:14px;
  max-width:760px;width:100%;padding:36px;position:relative;margin-bottom:40px;
}
.modal-close{
  position:absolute;top:14px;right:18px;background:none;border:none;
  color:var(--muted);font-size:1.9rem;cursor:pointer;line-height:1;
}
.modal-close:hover{color:var(--accent);}
.modal-content img{width:100%;max-height:360px;object-fit:cover;margin-bottom:20px;}
.modal-content .modal-meta{font-family:var(--f-mono);font-size:.85rem;color:var(--muted);margin-bottom:18px;}
.modal-content .body{font-size:1.02rem;}
.modal-content .body p{text-align:justify;margin-bottom:1em;}
.modal-content .body ul,.modal-content .body blockquote{text-align:left;}
@media (max-width:600px){.modal-box{padding:24px 20px;}}

/* ============================ DETAIL MEDIA (inside popups) ================ */
.detail-media{margin:0 0 22px;display:flex;flex-wrap:wrap;gap:16px;}
.media-small{width:100%;max-width:260px;}
.media-medium{width:100%;max-width:480px;}
.media-large{width:100%;max-width:100%;}
.detail-body{max-width:74ch;font-size:1.02rem;}
.detail-body mark{background:transparent;color:var(--accent-2);}
.detail-body blockquote{border-left:3px solid var(--accent);margin:0;padding:6px 0 6px 18px;color:var(--muted);}

/* ================================ FORMS ================================= */
.contact-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:26px;}
.contact-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);}
.contact-row:last-child{border-bottom:none;}
.contact-row .ic{width:34px;height:34px;border-radius:50%;background:var(--panel-2);display:flex;align-items:center;justify-content:center;color:var(--accent);flex-shrink:0;}
.contact-row .ic svg{width:16px;height:16px;fill:currentColor;}

/* ================================ BUTTONS ================================ */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--accent);color:#0c1116;font-weight:600;font-family:var(--f-body);
  padding:11px 20px;border-radius:8px;border:none;cursor:pointer;font-size:.92rem;
}
.btn:hover{text-decoration:none;filter:brightness(1.08);}
.btn.outline{background:transparent;border:1px solid var(--line);color:var(--text);}
.btn.outline:hover{border-color:var(--accent);color:var(--accent);}

/* ================================ GALLERY ================================ */
.gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
.gallery-grid figure{margin:0;cursor:pointer;overflow:hidden;border-radius:8px;border:1px solid var(--line);}
.gallery-grid img,.gallery-grid video{height:180px;width:100%;object-fit:cover;transition:.3s;}
.gallery-grid figure:hover img,.gallery-grid figure:hover video{transform:scale(1.06);}
.gallery-grid figcaption{padding:8px 10px;font-size:.78rem;color:var(--muted);}
.lightbox{
  position:fixed;inset:0;background:rgba(8,11,15,.92);display:none;
  align-items:center;justify-content:center;z-index:100;padding:30px;
}
.lightbox.open{display:flex;}
.lightbox img,.lightbox video{max-height:85vh;max-width:90vw;border-radius:10px;}
.lightbox .close{position:absolute;top:20px;right:28px;color:var(--text);font-size:2rem;cursor:pointer;}

/* ================================ FOOTER ================================= */
footer{border-top:1px solid var(--line);padding:38px 0 28px;margin-top:40px;background:var(--panel);}
footer .social-row{margin:0 0 24px;}
footer .foot-inner{
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;
  padding-top:20px;border-top:1px solid var(--line);
}
footer p{margin:0;color:var(--muted);font-size:.85rem;}

/* ================================ MISC UTIL ================================ */
.empty-note{color:var(--muted);font-family:var(--f-mono);font-size:.85rem;border:1px dashed var(--line);padding:18px;border-radius:8px;}

/* ================================ RESPONSIVE ============================== */
@media (max-width:880px){
  .hero-grid{grid-template-columns:1fr;text-align:center;}
  .hero-photo{margin:0 auto;}
  .social-row{justify-content:center;}
  .readout{grid-template-columns:1fr;}
  .grid.cols-3,.grid.cols-2{grid-template-columns:1fr;}
  .gallery-grid{grid-template-columns:repeat(2,1fr);}
  .nav-inner{padding:12px 16px;flex-wrap:wrap;}

  /* collapse the header links into a toggleable stack on narrow screens */
  .nav-toggle{display:flex;}
  .nav-links{
    display:none;flex-direction:column;align-items:flex-start;gap:14px;
    width:100%;padding-top:14px;margin-top:12px;border-top:1px solid var(--line);
  }
  .nav-links.open{display:flex;}
}