/* gwdkim.com — single column, no navigation, system fonts only.

   One accent, #990000, at 8.9:1 on white — safe as a body-link colour. Every
   grey is neutral on purpose, so the accent is the only colour on the page;
   that is what lets it carry information (see .me) rather than decorate.
   Tinting the greys toward it, as an earlier draft did, made it sit back into
   its own background. The bio panel is the one exception: a very pale, dusty
   version of the accent, so the introduction reads as its own ground without
   introducing a second hue. */

:root{
  --accent:       #990000;
  --accent-soft:  rgba(153, 0, 0, .30);
  --ink:          #161616;
  --body:         #3A3A3A;
  --muted:        #6F6F6F;   /* 5.0:1 on white, 4.5:1 on --panel. A lighter grey
                                looks better but drops author lists, the e-mail
                                and the footnote below WCAG AA at this size. */
  --rule:         #E2E2E2;
  --bg:           #FFFFFF;
  --panel:        #FCF7F6;   /* bio ground — 1.06:1 on white. Paler than it
                                looks safe to go: red minus blue is only 6, so
                                the tint reads as a warm ground rather than as
                                pink. Widening that gap is what made an earlier
                                value feel vivid, not the darkness. */

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

@media (prefers-color-scheme: dark){
  :root{
    --accent:       #E98C8C;   /* #990000 lightened; it is unreadable on black */
    --accent-soft:  rgba(233, 140, 140, .32);
    --ink:          #F0F0F0;
    --body:         #C6C6C6;
    --muted:        #8E8E8E;
    --rule:         #2E2E2E;
    --bg:           #121212;
    --panel:        #1B1717;   /* same faint warm cast, inverted */
  }
}

*{ box-sizing: border-box; }

body{
  margin: 0;
  background: var(--bg);
  color: var(--body);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

main{
  max-width: 42rem;
  margin: 0 auto;
  padding: 4.5rem 1.5rem 6rem;
  display: flex;
  flex-direction: column;
  gap: 2.75rem;
}

a{ color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--accent-soft); }
a:hover{ border-bottom-color: var(--accent); }
a:focus-visible{ outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

/* ── masthead ─────────────────────────────────────────────── */
/* Name on the left; e-mail and links stacked on the right, both starting at
   the top of the name's text box:

       Geun-Woo D. Kim        Email : …            <- tops meet
                              Scholar · ORCID · CV  <- --masthead-gap below it

   The two right-hand lines are grouped in .contact so one value controls the
   space between them. Pinning the links to the name's BOTTOM instead would
   force that space to be (name box − two lines) ≈ 11px, with no way to tighten
   it short of resizing the name.

   line-height:1 everywhere collapses the leading so each box hugs its text —
   without it, "top" means the top of the leading, not of the letters. CSS has
   no cap-height alignment, so two typefaces can still disagree by a pixel or
   two; --masthead-nudge is the manual trim. */
.masthead{
  --masthead-gap:   .25rem;
  --masthead-nudge: 0px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  column-gap: 1.5rem;
  row-gap: .6rem;
}
.masthead h1{
  margin: 0;
  font-family: var(--serif);
  font-size: 2.3rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.015em;
  color: var(--ink);
  text-wrap: balance;
}
.contact{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--masthead-gap);
  position: relative;
  top: var(--masthead-nudge);
}
.emails{
  margin: 0;
  line-height: 1;
  text-align: right;
  white-space: nowrap;
  font-size: .82rem;
  color: var(--muted);
}
.links{
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .9rem;
  line-height: 1;
  font-size: .82rem;
}

/* The bio sits on a faint panel so the page reads in two parts: an
   introduction, then the record. The panel spans the content column exactly,
   so its right edge lands on the same line as the e-mail above it and the
   section rules below it. No max-width: the text runs the full column, about
   72 characters — wide, but the alignment is what carries the page.
   To drop the panel, delete background/padding and nothing else changes. */
.bio{
  display: flex;
  flex-direction: column;
  gap: .75rem;
  background: var(--panel);
  padding: 1.2rem 1.35rem;
  border-radius: 2px;
}
.bio p{ margin: 0; }

/* ── sections ─────────────────────────────────────────────── */
section{ display: flex; flex-direction: column; gap: .9rem; }

h2{
  margin: 0;
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: .9rem;
}
h2::after{ content: ""; flex: 1; height: 1px; background: var(--rule); }

h3{
  margin: .4rem 0 -.35rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ── publication / talk / resource entries ────────────────── */
.entries{ margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 1.15rem; }
.entries--tight{ gap: .95rem; margin-top: 1rem; }
.entries p{ margin: 0; }

.title{ color: var(--ink); line-height: 1.4; }
.authors{ font-size: .87rem; color: var(--muted); }
.venue{ font-size: .87rem; }
.venue em{ font-family: var(--serif); font-size: .97rem; font-style: italic; color: var(--ink); }

/* The one place colour carries information rather than decoration:
   which of these papers are the author's own. Set from `me` in data/site.yml. */
.me{ color: var(--accent); font-weight: 600; }

.tag{
  display: inline-block;
  font-size: .68rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .1rem .4rem;
  border: 1px solid var(--accent-soft);
  border-radius: 2px;
  white-space: nowrap;
  vertical-align: .05em;
}
a.tag:hover{ border-color: var(--accent); }
.tag--quiet{ color: var(--muted); border-color: var(--rule); }

/* Explains the * and # markers carried inside the author strings. */
.footnote{ margin: .35rem 0 0; font-size: .76rem; color: var(--muted); }

/* ── awards ───────────────────────────────────────────────── */
.awards{ margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .55rem; }
.awards li{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  align-items: baseline;
  font-size: .92rem;
}
.awards .award-body{ color: var(--ink); }
.award-detail{ display: block; font-size: .82rem; color: var(--muted); }
.awards time,
.edu time{
  color: var(--muted);
  font-size: .8rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ── education ────────────────────────────────────────────── */
.edu{ margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .55rem; }
/* Same two-column shape as .awards li: one block on the left, the period on
   the right. .edu-body exists to keep the child count at two — a third grid
   child gets its own row and the period drops below the entry. */
.edu li{ display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: baseline; }
/* Only the degree itself is bold; the field that follows is not. */
.edu-degree{ display: block; color: var(--ink); font-size: .92rem; }
.edu-degree strong{ font-weight: 600; }
/* One .edu-line per fact — school, advisor, note — each on its own row.
   Named for what it is rather than what it holds: "where" stopped being
   true once the advisor and the note moved into it. */
/* Affiliation links carry no colour: the accent is reserved for the one place
   it means something (see .me), and three coloured lines here would drown it.
   The underline does the work instead — text-decoration rather than a border,
   so it breaks around the descenders in "Technology" and "Biology". */
.edu-line a{
  color: inherit;
  border-bottom: none;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.edu-line a:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }
.edu-line{ display: block; font-size: .82rem; color: var(--muted); line-height: 1.5; }

/* ── collapsed presentations ──────────────────────────────── */
details summary{
  cursor: pointer;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.05rem;
  width: fit-content;
}
details summary::marker{ color: var(--accent); }
details summary:focus-visible{ outline: 2px solid var(--accent); outline-offset: 3px; }

/* ── footer ───────────────────────────────────────────────── */
footer{
  border-top: 1px solid var(--rule);
  padding-top: 1.1rem;
  font-size: .8rem;
  color: var(--muted);
}

@media (max-width: 34rem){
  main{ padding: 3rem 1.15rem 4rem; gap: 2.25rem; }
  /* One column: name, then e-mail, then links — all flush left. */
  .masthead{ grid-template-columns: 1fr; row-gap: .5rem; }
  .masthead h1{ font-size: 1.9rem; line-height: 1.1; }
  .contact{ align-items: flex-start; top: 0; }
  .emails{ text-align: left; }
  .links{ justify-content: flex-start; }
  .bio{ padding: 1rem 1.1rem; }
  .awards li, .edu li{ grid-template-columns: 1fr; gap: .15rem; }
  .awards time, .edu time{ order: -1; }
}

@media (prefers-reduced-motion: reduce){
  *{ transition: none !important; animation: none !important; }
}