/* Hyeshim Kim — academic homepage. Organic design system tokens (cream + terracotta, muted). */
@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700&display=swap');

:root{
  --bg:#f5ead8; --card:#faf5ec; --card-border:#e4d8c1;
  --ink:#201e1d; --ink-2:#312e2a; --ink-3:#3c3833; --ink-4:#4e4841;
  --muted:#6d6455; --muted-2:#8a8073; --line:#ddd0b8;
  --accent:#c67139; --accent-ink:#8c491a;
  --sage-fill:#e1eecc; --sage-ink:#4b5738;
  --stripe:repeating-linear-gradient(135deg,#e3d6bd 0 8px,#ecdfc8 8px 16px);
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:Figtree,system-ui,sans-serif; font-size:15px; line-height:1.55;
}
img{display:block; max-width:100%}
a{color:var(--accent-ink)}
a:hover{color:#b2622d}
:focus{outline:none}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
::selection{background:rgba(198,113,57,.3)}

.page{max-width:900px; margin:0 auto; padding:64px 72px 72px; display:flex; flex-direction:column; gap:56px}

/* ── intro ───────────────────────────────────────────── */
.intro{display:grid; grid-template-columns:1fr 220px; grid-template-rows:auto 1fr; gap:20px 44px; align-items:start}
.intro .name{grid-column:1; grid-row:1}
.intro .portrait{grid-column:2; grid-row:1 / 3}
.intro .intro-text{grid-column:1; grid-row:2}
.intro-text{display:flex; flex-direction:column; gap:18px}
.name{font-weight:700; font-size:46px; line-height:1.08; letter-spacing:-.03em; margin:0}
.bio{margin:0; font-size:14.5px; line-height:1.6; color:var(--ink-3); max-width:50ch; text-wrap:pretty}
.bio a{text-decoration:none; border-bottom:1px solid rgba(140,73,26,.35)}
.links{display:flex; flex-wrap:wrap; gap:8px; margin-top:6px}
.link-pill{
  display:inline-flex; align-items:center; padding:8px 16px; border-radius:999px;
  border:1px solid var(--line); color:var(--ink); font-size:13px; font-weight:600; text-decoration:none;
}
.link-pill:hover{background:rgba(32,30,29,.06); color:var(--ink)}
.link-pill.is-primary{background:var(--ink); border-color:var(--ink); color:var(--bg)}
.link-pill.is-primary:hover{background:#3c3833; color:var(--bg)}
.portrait{width:220px; height:220px; border-radius:24px; object-fit:cover; background-image:var(--stripe)}
.portrait--placeholder{display:flex; align-items:flex-end; padding:12px; font:11px var(--mono); color:#7a6f5d}

/* ── sections ────────────────────────────────────────── */
.section{display:flex; flex-direction:column; gap:16px}
.section h2{font-weight:700; font-size:24px; letter-spacing:-.02em; margin:0}
.section-head{display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap}

/* ── news ────────────────────────────────────────────── */
.news{display:flex; flex-direction:column; gap:11px}
.news-item{display:flex; gap:16px; align-items:baseline; font-size:14px; line-height:1.2; color:var(--ink-2)}
.news-date{flex:none; width:96px; font-weight:600; font-size:12px; color:var(--muted-2)}
.news-toggle{
  align-self:flex-start; margin-top:4px; padding:6px 14px; border:1px solid var(--line);
  border-radius:999px; background:transparent; color:var(--muted); font:600 12px Figtree,sans-serif;
  cursor:pointer; transition: background 0.2s, color 0.2s;
}
.news-toggle:hover{background:rgba(32,30,29,.06); color:var(--ink)}

/* ── publications ────────────────────────────────────── */
.toggle{display:flex; gap:4px; padding:4px; background:#e9dcc4; border-radius:999px}
.toggle button{
  padding:7px 17px; border:0; border-radius:999px; cursor:pointer;
  background:transparent; color:var(--muted); font:600 12.5px Figtree,sans-serif;
}
.toggle button:hover{color:var(--ink)}
.toggle button[aria-selected="true"]{background:var(--ink); color:var(--bg)}

.pubs{display:flex; flex-direction:column; gap:14px}
.pub{
  display:grid; grid-template-columns:172px 1fr; gap:24px; padding:20px;
  background:var(--card); border:1px solid var(--card-border); border-radius:20px;
}
.pub-thumb{aspect-ratio:16/10; border-radius:12px; object-fit:cover; background-image:var(--stripe)}
.pub-thumb--placeholder{display:flex; align-items:flex-end; padding:8px; font:10px var(--mono); color:#7a6f5d}
.pub-body{display:flex; flex-direction:column; gap:8px}
.pub-title{font-weight:700; font-size:18px; line-height:1.3; letter-spacing:-.01em; margin:0}
.pub-authors{display:flex; flex-wrap:wrap; column-gap:5px; row-gap:2px; font-size:13.5px; color:#5d564b}
.pub-authors .me{font-weight:700; color:var(--ink)}
.pub-meta{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.venue{display:inline-flex; padding:3px 10px; border-radius:999px; background:var(--sage-fill); color:var(--sage-ink); font:600 11.5px Figtree,sans-serif; letter-spacing:.02em}
.year{font:600 12px Figtree,sans-serif; color:#7a6f5d}
.award{font:600 12px Figtree,sans-serif; color:var(--accent-ink)}
.pub-desc{margin:2px 0 0; font-size:14px; line-height:1.55; color:var(--ink-4); max-width:56ch; text-wrap:pretty}
.pub-links{display:flex; flex-wrap:wrap; gap:7px; margin-top:6px}
.pub-links a, .pub-links .bib-btn{
  display:inline-flex; align-items:center; padding:5px 13px; border-radius:999px;
  border:1px solid var(--line); background:var(--bg); color:var(--ink-3);
  font:600 12px Figtree,sans-serif; text-decoration:none; cursor:pointer;
}
.pub-links a:hover, .pub-links .bib-btn:hover{background:#efe4cf; color:var(--ink)}

.foot{margin:0; font-size:12.5px; color:var(--muted-2)}

/* ── fade-in animation ──────────────────────────────── */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
.pub, .news-item {
  animation: fadeIn 0.4s ease both;
}


/* ── responsive ──────────────────────────────────────── */
@media (max-width:760px){
  .page{padding:40px 24px 56px; gap:44px}
  .intro{grid-template-columns:1fr; grid-template-rows:auto auto auto; gap:20px}
  .intro .name{grid-column:1; grid-row:1}
  .intro .portrait{grid-column:1; grid-row:2; width:100%; height:auto; aspect-ratio:1/1}
  .intro .intro-text{grid-column:1; grid-row:3}
  .name{font-size:38px}
  .pub{grid-template-columns:1fr; gap:16px}
  .pub-thumb{width:100%; max-width:100%}
  .news-date{width:72px}
}