/* ==========================================================================
   Design tokens
   Subject: NLP / text-analysis researcher — signature motif is the
   "annotated text" look (token highlighting), like a sarcasm-detection
   model marking up a sentence.
   ========================================================================== */
:root{
  --ink: #16202A;
  --ink-soft: #3B4A56;
  --paper: #F6F4EE;
  --paper-raised: #FFFFFF;
  --line: #DAD6C9;
  --mark: #FFC64B;      /* highlighter yellow — the annotation accent */
  --mark-soft: #FFE7A8;
  --teal: #276F62;      /* research / links accent */
  --teal-soft: #E4EFEC;
  --tag-neg: #C1543B;   /* used sparingly, borrowed from sentiment-tag idea */

  --display: "Fraunces", "Source Serif 4", Georgia, serif;
  --body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;

  --maxw: 1080px;
  --radius: 10px;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: inherit; }

.wrap{ max-width: var(--maxw); margin:0 auto; padding: 0 24px; }

::selection{ background: var(--mark); color: var(--ink); }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior:auto !important; }
}

/* ------------------------------ Nav -------------------------------- */
.nav{
  position: sticky; top:0; z-index: 50;
  background: rgba(246,244,238,0.9);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
}
.nav .wrap{ display:flex; align-items:center; justify-content:space-between; height:64px; }
.nav-name{ font-family: var(--display); font-weight:600; font-size:1.05rem; text-decoration:none; }
.nav-links{ display:flex; gap: 22px; list-style:none; margin:0; padding:0; }
.nav-links a{ text-decoration:none; font-size: 0.92rem; color: var(--ink-soft); border-bottom: 2px solid transparent; padding-bottom:2px; }
.nav-links a:hover{ color: var(--ink); border-color: var(--mark); }
.nav-links{ }
@media (max-width: 720px){
  .nav-links{ gap: 12px; }
  .nav-links span{ display:none; }
}

/* ------------------------------ Hero -------------------------------- */
.hero{ padding: 72px 0 56px; border-bottom: 1px solid var(--line); }
.hero .wrap{ display:grid; grid-template-columns: 1.3fr 0.9fr; gap: 48px; align-items:center; }
@media (max-width: 820px){ .hero .wrap{ grid-template-columns: 1fr; } .hero{ padding: 44px 0 40px; } }

.eyebrow{
  font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--teal); margin: 0 0 14px;
}
.hero h1{
  font-family: var(--display); font-weight: 600; font-size: clamp(2.1rem, 4.2vw, 3.1rem);
  line-height: 1.1; margin: 0 0 18px;
}
.hero-annotated{ font-size: clamp(1.05rem, 1.6vw, 1.2rem); color: var(--ink-soft); margin: 0 0 26px; max-width: 54ch; }
.hero-annotated mark{
  background: var(--mark-soft); color: var(--ink); padding: 1px 6px; border-radius: 4px;
  position: relative; font-style: normal;
}
.hero-annotated mark::after{
  content: attr(data-tag);
  position:absolute; top:-1.15em; left:0; font-family: var(--mono); font-size: 0.62rem;
  color: var(--teal); letter-spacing: 0.04em; white-space:nowrap;
}

.hero-links{ display:flex; flex-wrap:wrap; gap:10px; }
.pill{
  display:inline-flex; align-items:center; gap:7px;
  border:1px solid var(--line); background: var(--paper-raised);
  padding: 8px 14px; border-radius: 999px; font-size:0.85rem; text-decoration:none; color: var(--ink);
  transition: border-color .15s ease, transform .15s ease;
}
.pill:hover{ border-color: var(--teal); transform: translateY(-1px); }

.hero-photo{ position:relative; }
.hero-photo-frame{
  border: 1px solid var(--line); border-radius: var(--radius); overflow:hidden;
  aspect-ratio: 1/1; background: var(--paper-raised);
}
.hero-photo-frame img{ width:100%; height:100%; object-fit:cover; }
.hero-photo-caption{ font-family: var(--mono); font-size:0.72rem; color: var(--ink-soft); margin-top:10px; text-align:center; }

/* ------------------------------ Sections -------------------------------- */
section{ padding: 56px 0; border-bottom: 1px solid var(--line); }
section:last-of-type{ border-bottom:none; }
.section-head{ display:flex; align-items:baseline; gap:14px; margin-bottom: 28px; }
.section-num{ font-family: var(--mono); font-size:0.8rem; color: var(--teal); }
.section-head h2{ font-family: var(--display); font-size: clamp(1.5rem, 2.4vw, 1.9rem); margin:0; font-weight:600; }
.section-lede{ color: var(--ink-soft); max-width: 62ch; margin: -14px 0 28px; }

/* Research interests as tag chips */
.tag-row{ display:flex; flex-wrap:wrap; gap:10px; }
.tag{
  font-family: var(--mono); font-size:0.82rem; background: var(--teal-soft); color: var(--teal);
  padding: 7px 13px; border-radius: 6px;
}

/* Timeline (experience/education) */
.timeline{ display:flex; flex-direction:column; gap: 28px; }
.tl-item{ display:grid; grid-template-columns: 150px 1fr; gap: 20px; }
@media (max-width: 640px){ .tl-item{ grid-template-columns: 1fr; gap:6px; } }
.tl-date{ font-family: var(--mono); font-size:0.8rem; color: var(--ink-soft); padding-top:3px; }
.tl-role{ font-weight:600; font-size:1.05rem; margin:0 0 4px; }
.tl-org{ color: var(--teal); font-size:0.92rem; margin: 0 0 8px; }
.tl-desc{ color: var(--ink-soft); font-size:0.92rem; margin:0; }
.tl-courses{ margin: 8px 0 0; padding-left: 18px; color: var(--ink-soft); font-size: 0.88rem; }
.tl-courses li{ margin-bottom: 2px; }

/* Publications */
.pub-list{ display:flex; flex-direction:column; }
.pub{
  padding: 16px 0; border-top: 1px solid var(--line);
  display:grid; grid-template-columns: 90px 1fr; gap: 18px;
}
.pub:first-child{ border-top:none; }
@media (max-width: 640px){ .pub{ grid-template-columns: 1fr; gap: 4px; } }
.pub-year{ font-family: var(--mono); color: var(--teal); font-size:0.85rem; }
.pub-title{ margin:0 0 4px; font-weight: 600; font-size: 0.98rem; }
.pub-venue{ margin:0; color: var(--ink-soft); font-size: 0.88rem; }
.pub-more{ margin-top:22px; }

/* Cards grid (talks / misc) */
.card-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
@media (max-width: 640px){ .card-grid{ grid-template-columns: 1fr; } }
.card{ background: var(--paper-raised); border:1px solid var(--line); border-radius: var(--radius); padding: 18px; }
.card h3{ font-size: 0.98rem; margin: 0 0 6px; }
.card p{ margin:0; color: var(--ink-soft); font-size: 0.87rem; }

/* ------------------------------ Blog / posts -------------------------------- */
#posts-feed{ display:flex; flex-direction:column; gap: 22px; }
.post-card{
  background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius);
  overflow:hidden;
}
.post-card img.post-image{ width:100%; max-height: 420px; object-fit: cover; }
.post-body{ padding: 20px 22px 22px; }
.post-meta{ font-family: var(--mono); font-size:0.74rem; color: var(--teal); margin: 0 0 8px; text-transform:uppercase; letter-spacing:0.04em; }
.post-title{ font-family: var(--display); font-size:1.25rem; margin: 0 0 10px; font-weight:600; }
.post-excerpt{ color: var(--ink-soft); margin: 0 0 12px; white-space: pre-wrap; }
.post-link{ font-size: 0.88rem; color: var(--teal); text-decoration:none; border-bottom: 1px solid var(--teal); }
.post-embed{ border-top:1px solid var(--line); margin-top: 14px; padding-top:14px; }
.post-empty, .post-error{ color: var(--ink-soft); font-family: var(--mono); font-size: 0.88rem; }

/* ------------------------------ Footer -------------------------------- */
footer{ padding: 40px 0 60px; }
footer .wrap{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; }
footer p{ margin:0; color: var(--ink-soft); font-size:0.85rem; }
.footer-links{ display:flex; gap:16px; list-style:none; padding:0; margin:0; }
.footer-links a{ text-decoration:none; color: var(--ink-soft); font-size:0.85rem; }
.footer-links a:hover{ color: var(--teal); }

/* ------------------------------ Admin -------------------------------- */
.admin-shell{ max-width: 720px; margin: 0 auto; padding: 56px 24px 80px; }
.admin-card{ background: var(--paper-raised); border:1px solid var(--line); border-radius: var(--radius); padding: 28px; margin-bottom: 24px; }
.admin-card h2{ font-family: var(--display); margin-top:0; }
.field{ margin-bottom: 16px; }
.field label{ display:block; font-size:0.85rem; font-weight:600; margin-bottom: 6px; }
.field-hint{ display:block; font-size:0.78rem; color: var(--ink-soft); margin-top:4px; font-weight:400; }
input[type=text], input[type=password], input[type=url], textarea, select{
  width:100%; padding: 10px 12px; border:1px solid var(--line); border-radius:6px;
  font-family: var(--body); font-size:0.95rem; background: var(--paper);
}
textarea{ min-height: 130px; resize: vertical; }
.btn{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  background: var(--ink); color: var(--paper); border:none; border-radius: 999px;
  padding: 11px 20px; font-size: 0.92rem; font-weight:600; font-family: var(--body);
}
.btn:hover{ background: var(--teal); }
.btn.secondary{ background: transparent; color: var(--ink); border: 1px solid var(--line); }
.btn.secondary:hover{ background: var(--paper); border-color: var(--teal); color: var(--teal); }
.btn:disabled{ opacity:0.5; cursor:not-allowed; }
.status-msg{ font-family: var(--mono); font-size: 0.82rem; margin-top: 12px; }
.status-msg.ok{ color: var(--teal); }
.status-msg.err{ color: var(--tag-neg); }
.type-toggle{ display:flex; gap:8px; margin-bottom: 18px; }
.type-toggle button{
  flex:1; padding: 9px; border-radius:6px; border:1px solid var(--line); background: var(--paper);
  cursor:pointer; font-family: var(--body); font-size:0.88rem;
}
.type-toggle button.active{ background: var(--mark-soft); border-color: var(--mark); font-weight:600; }
.warn-box{
  background: #FCEFE9; border: 1px solid #E9B79D; border-radius: 8px; padding: 14px 16px;
  font-size: 0.85rem; color: #7A3A22; margin-bottom: 20px;
}
.existing-post{ border-top: 1px solid var(--line); padding: 12px 0; display:flex; justify-content:space-between; align-items:center; gap:12px; }
.existing-post-title{ font-size: 0.92rem; font-weight:600; }
.existing-post-meta{ font-family: var(--mono); font-size: 0.75rem; color: var(--ink-soft); }
.icon-btn{ background:none; border:none; cursor:pointer; color: var(--tag-neg); font-size:0.8rem; font-family: var(--mono); }