/* ============================================================
   Eun Kyoung Choe — academic site
   Spectral (headings) · Source Sans 3 (body) · IBM Plex Mono (labels)
   Blue primary accent + amber secondary
   ============================================================ */

:root {
  --ink:        #1a1f26;
  --body:       #33363c;
  --muted:      #6b6f76;
  --faint:      #9a9ea5;
  --rule:       #eaecef;
  --rule-soft:  #eef0f2;
  --card-bd:    #ececea;
  --bg:         #f4f3f1;

  --accent:     oklch(0.48 0.13 252);   /* blue  */
  --accent-2:   oklch(0.58 0.12 64);    /* amber */
  --accent-bd:  oklch(0.62 0.12 250);

  --serif: 'Spectral', Georgia, serif;
  --sans:  'Source Sans 3', system-ui, sans-serif;
  --mono:  'IBM Plex Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--body);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
hr { border: 0; border-top: 1px solid var(--rule); margin: 20px 0; }

/* ---- shell ---------------------------------------------------- */
.page-bg { min-height: 100vh; padding: 36px 20px; }
.wrap    { max-width: 900px; margin: 0 auto; }

.card {
  background: #fff;
  border: 1px solid var(--card-bd);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,.07), 0 10px 34px rgba(0,0,0,.05);
}
.browser-bar {
  height: 38px; display: flex; align-items: center; gap: 7px;
  padding: 0 14px; background: #f6f5f2; border-bottom: 1px solid var(--card-bd);
}
.browser-bar i { width: 10px; height: 10px; border-radius: 50%; background: #d8d6d1; }
.browser-bar .url {
  flex: 1; text-align: center; font-family: var(--mono);
  font-size: 12px; color: #a3a19a;
}
.card-pad { padding: 26px 36px 30px; }

/* ---- masthead / nav ------------------------------------------ */
.masthead {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 28px; padding-bottom: 16px; border-bottom: 1px solid var(--rule);
}
.name { font-family: var(--serif); font-size: 27px; font-weight: 600;
        line-height: 1.05; color: var(--ink); letter-spacing: -0.01em; }
.tagline { font-family: var(--sans); font-size: 13.5px; color: var(--muted);
           margin-top: 5px; line-height: 1.35; }
.site-nav { display: flex; gap: 17px; font-size: 14px; color: #83878e; padding-top: 5px; }
.site-nav a { transition: color .15s; }
.site-nav a:hover, .site-nav a.is-active { color: var(--accent); }
.site-nav a.is-active { font-weight: 600; }

/* ---- labels --------------------------------------------------- */
.label {
  font-family: var(--mono); font-size: 11.5px; font-weight: 500;
  letter-spacing: 0.18em; color: var(--accent);
}
.label-sm { font-size: 10.5px; letter-spacing: 0.16em; }

/* ---- bio block ------------------------------------------------ */
.bio-grid { display: grid; grid-template-columns: 220px 1fr; gap: 34px;
            padding: 24px 0 20px; align-items: stretch; }
.left-col { display: flex; flex-direction: column; height: 100%; }
.headshot { aspect-ratio: 1440/1080; border-radius: 4px; overflow: hidden;
            border: 1px solid #e6e8ec; }
.headshot img { width: 100%; height: 100%; object-fit: cover; object-position: center; }

.travel-block { margin-top: auto; padding-top: 18px; }
.travel-row { display: flex; gap: 10px; font-size: 13px; color: var(--body); margin-top: 7px; }
.travel-row .mo { font-family: var(--mono); font-size: 12px; color: #aeb2b8; }

.bio-body p { font-family: var(--sans); font-size: 15px; line-height: 1.5;
              color: var(--body); margin: 0; }

.areas-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px; margin-top: 16px; }
.area { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #3d4046; }
.area .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); flex: none; }

.contact-line {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--rule-soft);
  font-size: 13.5px; color: #5b5f66;
}
.contact-line .sep { color: #cfcdc8; }
.contact-line a { font-weight: 600; color: var(--accent); }

/* ---- section heading row ------------------------------------- */
.sec-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 13px; }
.sec-head .more { font-size: 13px; color: var(--faint); transition: color .15s; }
.sec-head .more:hover { color: var(--accent); }

/* ---- projects ------------------------------------------------- */
.proj-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.proj {
  display: block; border: 1px solid #e9eaed; border-radius: 5px; padding: 14px 15px;
  transition: border-color .15s, box-shadow .15s;
}
.proj:hover { border-color: var(--accent-bd); box-shadow: 0 2px 10px rgba(40,70,140,.07); }
.proj .kicker { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em;
                color: var(--accent-2); text-transform: uppercase; }
.proj .ptitle { font-family: var(--serif); font-size: 16px; font-weight: 600;
                color: var(--ink); margin: 8px 0 5px; line-height: 1.2; }
.proj .pdesc { font-size: 13px; line-height: 1.45; color: var(--muted); }
.proj .pmore { font-size: 12.5px; font-weight: 600; color: var(--accent); margin-top: 10px; display: flex; gap: 14px; align-items: center; }
.proj .pmore a { display: flex; align-items: center; gap: 4px; }

.proj-theme-section { margin-bottom: 40px; }
.proj-theme-heading { font-family: var(--mono); font-size: 11px; font-weight: 500;
                      color: var(--accent-2); letter-spacing: 0.18em; text-transform: uppercase;
                      margin: 0 0 16px; }

/* ---- project list (projects page) ----------------------------- */
.proj-list { display: flex; flex-direction: column; gap: 0; }
.proj-row { border-bottom: 1px solid var(--rule-soft); padding: 18px 0; }
.proj-row:first-child { border-top: 1px solid var(--rule-soft); }
.proj-row-main { display: flex; gap: 20px; align-items: flex-start; }
.proj-row-body { flex: 1; }
.proj-row-title { font-family: var(--serif); font-size: 17px; font-weight: 600;
                  color: var(--ink); margin-bottom: 5px; }
.proj-row-desc { font-size: 13.5px; color: var(--muted); line-height: 1.5; }
.proj-row-img-wrap { flex: none; width: 150px; overflow: hidden; border-radius: 4px; }
.proj-row-img { width: 100%; height: 100px; object-fit: cover; object-position: top left;
                display: block; transition: transform .35s ease; }
.proj-row:hover .proj-row-img { transform: scale(1.06); }

/* sub-projects */
.proj-subs { margin: 14px 0 4px 20px; border-left: 2px solid var(--rule); padding-left: 18px;
             display: flex; flex-direction: column; gap: 12px; }
.proj-sub-main { display: flex; gap: 16px; align-items: flex-start; }
.proj-sub-body { flex: 1; }
.proj-sub-title { font-family: var(--sans); font-size: 14px; font-weight: 600;
                  color: var(--ink); margin-bottom: 4px; }

/* papers */
.proj-papers { margin: 10px 0 0; padding: 0; list-style: none;
               display: flex; flex-direction: column; gap: 5px; }
.proj-paper { font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.proj-paper a { color: var(--accent); }
.proj-paper-venue { font-style: italic; }

/* ---- card grid (homepage) ------------------------------------- */
.proj-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.proj {
  display: block; border: 1px solid #e9eaed; border-radius: 5px; padding: 14px 15px;
  transition: border-color .15s, box-shadow .15s;
}
.proj:hover { border-color: var(--accent-bd); box-shadow: 0 2px 10px rgba(40,70,140,.07); }
.proj .kicker { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em;
                color: var(--accent-2); text-transform: uppercase; }
.proj .ptitle { font-family: var(--serif); font-size: 16px; font-weight: 600;
                color: var(--ink); margin: 8px 0 5px; line-height: 1.2; }
.proj .pdesc { font-size: 13px; line-height: 1.45; color: var(--muted); }
.proj .pmore { font-size: 12.5px; font-weight: 600; color: var(--accent); margin-top: 10px;
               display: flex; gap: 14px; align-items: center; }
.proj .pmore a { display: flex; align-items: center; gap: 4px; }
.proj-img-wrap { overflow: hidden; border-radius: 3px; margin-top: 12px; margin-bottom: 10px; }
.proj-img { width: 100%; height: 140px; object-fit: cover; object-position: top left; display: block;
            transition: transform .35s ease; }
.proj:hover .proj-img { transform: scale(1.06); }

/* ---- timeline rows (news) ------------------------------------ */
.news-list { display: flex; flex-direction: column; gap: 7px; }
.news-row { display: grid; grid-template-columns: 96px 1fr; gap: 18px; align-items: baseline; }
.news-row .when { font-family: var(--mono); font-size: 13px; color: #aeb2b8; }
.news-row .what { font-size: 14.5px; color: var(--body); }

/* ---- obfuscated email ----------------------------------------- */
.obf-email::before { content: attr(data-user) "@" attr(data-domain); }

/* ---- footer --------------------------------------------------- */
.foot {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--rule);
  font-size: 12.5px; color: var(--faint);
}
.foot .links { display: flex; gap: 15px; }
.foot .links a { transition: color .15s; }
.foot .links a:hover { color: var(--accent); }

/* ---- bio page ------------------------------------------------ */
.bio-prose p { font-size: 15px; line-height: 1.7; color: var(--body); margin: 0 0 18px; max-width: 680px; }
.bio-prose a { color: var(--accent); }

/* ---- interior pages ------------------------------------------ */
.page-title { font-family: var(--mono); font-size: 12.5px; font-weight: 500;
              color: var(--accent); letter-spacing: 0.18em; text-transform: uppercase;
              margin: 4px 0 4px; }
.page-note  { font-family: var(--mono); font-size: 11.5px; color: #aeb2b8; margin-bottom: 22px; }

.pub-list, .stack { display: flex; flex-direction: column; }
.pub-year-group { display: grid; grid-template-columns: 60px 1fr; gap: 18px;
                  padding: 14px 0; border-top: 1px solid var(--rule-soft); }
.pub-year-group:first-child { border-top: 0; }
.pub-year { font-family: var(--mono); font-size: 13px; color: #b8b6b0; padding-top: 2px; }
.pub { margin-bottom: 16px; }
.pub:last-child { margin-bottom: 0; }
.pub .pub-title { font-size: 15px; font-weight: 600; color: var(--ink); line-height: 1.35; }
.pub .pub-meta  { font-size: 13.5px; color: var(--muted); margin-top: 3px; line-height: 1.4; }
.pub .pub-venue { font-style: italic; }
.pub .pub-links { display: flex; gap: 14px; margin-top: 6px; font-size: 12.5px; color: var(--accent); align-items: center; }
.pub .pub-links a { display: flex; align-items: center; gap: 4px; color: var(--accent); }
.badge { display: inline-block; font-family: var(--mono); font-size: 10px; letter-spacing: .06em;
         text-transform: uppercase; color: oklch(0.68 0.14 64); border: 1px solid currentColor;
         border-radius: 3px; padding: 1px 5px; margin-left: 0; vertical-align: 1px; }

.course { border: 1px solid var(--rule); border-radius: 4px; padding: 14px 16px; margin-bottom: 14px; }
.course .code { font-family: var(--mono); font-size: 12.5px; color: var(--accent); }
.course .cname { font-size: 15px; font-weight: 600; color: var(--ink); margin-top: 6px; }
.course .cmeta { font-size: 13px; color: var(--muted); margin-top: 3px; }

.students-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.student { display: flex; align-items: center; gap: 12px; }
.student .avatar { width: 60px; height: 60px; border-radius: 50%; flex: none;
                   background: oklch(0.96 0.015 252); border: 1px solid oklch(0.92 0.02 252);
                   object-fit: cover; }
.student .sname { font-size: 14.5px; font-weight: 600; color: var(--ink); }
.student .srole { font-size: 13px; color: var(--muted); margin-top: 2px; }
.student .skeywords { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.student .skw { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.03em;
                border-radius: 2px; padding: 0 4px; border: 1px solid currentColor; }
/* ---- prospective students ------------------------------------ */
.prosp-section { margin-bottom: 32px; }
.prosp-section-title { font-family: var(--serif); font-size: 17px; font-weight: 600;
                       color: var(--ink); margin-bottom: 16px; }
.prosp-intro { font-size: 14px; color: var(--body); line-height: 1.6; margin: 0 0 12px; }
.prosp-intro a { color: var(--accent); }

.prosp-steps { display: flex; flex-direction: column; gap: 16px; margin-bottom: 22px; }
.prosp-step { display: grid; grid-template-columns: 36px 1fr; gap: 12px; align-items: baseline; }
.prosp-num { font-family: var(--mono); font-size: 11.5px; color: var(--accent); }
.prosp-body { font-size: 14px; color: var(--body); line-height: 1.6; }

.prosp-roles { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--rule);
               border-radius: 6px; overflow: hidden; margin-bottom: 22px; }
.prosp-role { padding: 16px 18px; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.prosp-role:nth-child(2n) { border-right: none; }
.prosp-role:nth-child(3), .prosp-role:nth-child(4) { border-bottom: none; }
.prosp-role-title { font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.prosp-role-desc { font-size: 13px; color: var(--muted); line-height: 1.5; }

.prosp-contact { background: oklch(0.97 0.02 252); border: 1px solid oklch(0.88 0.05 252);
                 border-radius: 6px; padding: 18px 20px; }
.prosp-contact-label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
                       text-transform: uppercase; color: var(--accent); margin-bottom: 10px; }
.prosp-contact p { font-size: 14px; color: var(--body); line-height: 1.6; margin: 0; }
.prosp-contact code { font-family: var(--mono); font-size: 12.5px; background: white;
                      border: 1px solid var(--rule); border-radius: 3px; padding: 1px 5px; }

.skw-1 { color: oklch(0.48 0.13 252); }   /* blue */
.skw-2 { color: oklch(0.58 0.12 64);  }   /* amber */
.skw-3 { color: oklch(0.48 0.13 160); }   /* teal */
.skw-4 { color: oklch(0.48 0.13 310); }   /* purple */
.skw-5 { color: oklch(0.48 0.13 20);  }   /* rose */

.post-list .post-item { padding: 16px 0; border-top: 1px solid var(--rule-soft); }
.post-list .post-item:first-child { border-top: 0; }
.post-list .post-title { font-family: var(--serif); font-size: 19px; font-weight: 600; color: var(--ink); }
.post-list .post-date  { font-family: var(--mono); font-size: 12px; color: #aeb2b8; margin-top: 3px; }
.post-list .post-excerpt { font-size: 14px; color: var(--muted); margin-top: 7px; line-height: 1.5; }

.prose { font-size: 16px; line-height: 1.65; color: var(--body); }
.prose h2 { font-family: var(--serif); font-size: 22px; color: var(--ink); margin: 28px 0 10px; }
.prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.prose code { font-family: var(--mono); font-size: 0.9em; background: #f3f4f6; padding: 1px 5px; border-radius: 3px; }

.back-link { font-family: var(--mono); font-size: 12px; color: var(--faint); display: inline-block; margin-bottom: 14px; }
.back-link:hover { color: var(--accent); }

/* ---- responsive ----------------------------------------------- */
@media (min-width: 701px) and (max-width: 880px) {
  .proj-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  .page-bg { padding: 14px 10px; }
  .card-pad { padding: 22px 20px 24px; }
  .masthead { flex-direction: column; align-items: flex-start; gap: 14px; }
  .site-nav { flex-wrap: wrap; gap: 10px 16px; }
  .bio-grid { grid-template-columns: 1fr; gap: 22px; }
  .left-col { height: auto; }
  .areas-grid { grid-template-columns: 1fr; }
  .proj-grid { grid-template-columns: 1fr; }
  .students-grid { grid-template-columns: 1fr; }
  .foot { flex-direction: column; align-items: flex-start; gap: 8px; }
}