/* ---------------------------------------------------------------------------
   gihuncho.github.io — single stylesheet, no build step, no external requests.

   Monokai Dimmed, set in JetBrains Mono. Hue is spent only where greyscale
   cannot do the job — the theme's function orange for the name, its numeric
   blue for links. Every other distinction (title, prose, author list, date,
   comment) is carried by the neutral ramp, whose middle step is the theme's
   own editor foreground. Italics go where the theme and the citation style
   agree on them — comments and journal names.

   Two faces, split by what the reader does with the text. Reference data —
   the name, section labels, titles, dates, author lists, journal names — is
   monospaced, because that is the material the theme is about. Running prose
   is set in Inter on a narrower measure, because a uniform advance width
   stops words forming recognisable shapes over a paragraph.
   --------------------------------------------------------------------------- */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/Inter-400.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/JetBrainsMono-400.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/JetBrainsMono-400-italic.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/JetBrainsMono-600.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/JetBrainsMono-600-italic.woff2") format("woff2");
}

:root {
  --ground: #1e1e1e;   /* editor.background */
  --rule:   #3b3b38;
  --ink:    #e2e4e1;   /* headings */
  --soft:   #c5c8c6;   /* body prose — editor.foreground */
  --muted:  #9a9b99;   /* author lists, organisations — comment */
  --dim:    #8a8b89;   /* section labels, venues, dates */

  --name:   #ce6700;   /* entity.name.function, and nothing else */
  --link:   #6089b4;   /* constant.numeric */
  --link-hi:#82a6cc;

  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  --measure: 44rem;   /* reference data — titles, author lists */
  --prose:   34rem;   /* running prose, in the narrower face */
  --label:    9rem;   /* margin column holding section labels */
  --gutter:   3rem;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

::selection { background: rgba(103, 107, 113, 0.5); }   /* editor.selectionBackground */

main {
  max-width: calc(var(--measure) + 3rem);
  margin: 0 auto;
  padding: 4rem 1.5rem 5rem;
}

/* --- links ---------------------------------------------------------------- */

a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 0.055em;
  text-underline-offset: 0.18em;
  transition: color 90ms linear;
}

a:hover { color: var(--link-hi); }

a:focus-visible {
  outline: 2px solid var(--link-hi);
  outline-offset: 2px;
  border-radius: 1px;
}

/* --- masthead ------------------------------------------------------------- */

.masthead h1 {
  margin: 0;
  font-size: 1.9em;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--name);
}

.masthead .role {
  margin: 0.45rem 0 0;
  font-size: 0.86em;
  color: var(--soft);
}

.masthead .role .org { color: var(--muted); }

.bio {
  margin: 1.5rem 0 0;
  max-width: var(--prose);
  font-family: var(--sans);
  font-size: 0.94em;   /* Inter's x-height runs large next to the mono */
  line-height: 1.65;
  color: var(--soft);
  text-wrap: pretty;
}

.contact {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0;
  margin: 1.6rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.85em;
}

/* separator trails its item, so a wrapped line never opens with a stray dot */
.contact li:not(:last-child)::after {
  content: "·";
  color: var(--rule);
  margin: 0 0.6em;
}

/* --- sections ------------------------------------------------------------- */

section {
  margin-top: 3rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--rule);
}

/* section labels are comments, and comments are italic in this theme */
section > h2 {
  margin: 0 0 1.4rem;
  font-size: 0.8em;
  font-weight: 600;
  font-style: italic;
  letter-spacing: 0.02em;
  text-transform: lowercase;
  color: var(--dim);
}

section > h2::before { content: "// "; }

/* --- entries (experience, software, education) ---------------------------- */

.entry, .pub { margin-top: 1.9rem; }
.entry:first-of-type, .pub:first-of-type { margin-top: 0; }

.head::after { content: ""; display: block; clear: both; }

.head h3 {
  margin: 0;
  font-size: 1em;
  font-weight: 600;
  line-height: 1.45;
  color: var(--ink);
  text-wrap: pretty;
}

.head h3 .org {
  font-weight: 400;
  color: var(--muted);
}

.when {
  float: right;
  margin-left: 1.25rem;
  font-size: 0.82em;
  line-height: 1.78;
  color: var(--dim);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.note {
  margin: 0.5rem 0 0;
  max-width: var(--prose);
  font-family: var(--sans);
  font-size: 0.88em;
  line-height: 1.68;
  color: var(--soft);
  text-wrap: pretty;
}

/* --- publications --------------------------------------------------------- */

.pub h3 {
  margin: 0;
  font-size: 1em;
  font-weight: 600;
  line-height: 1.45;
  color: var(--ink);
  text-wrap: pretty;
}

.pub .authors,
.pub .venue {
  margin: 0.32rem 0 0;
  font-size: 0.85em;
  line-height: 1.55;
  color: var(--muted);
}

.pub .authors b {
  font-weight: 600;
  color: var(--ink);
}

.pub .venue { margin-top: 0.12rem; color: var(--dim); }
.pub h3 + .venue { margin-top: 0.32rem; }   /* no author list above it */

/* journal and conference names: italic by citation convention */
.pub .venue i {
  font-style: italic;
  color: var(--muted);
}

.num { font-variant-numeric: tabular-nums; }

.refs {
  margin: 0.6rem 0 0;
  font-size: 0.82em;
}

.refs a { margin-right: 1.1rem; }
.refs a:last-child { margin-right: 0; }

/* --- footer --------------------------------------------------------------- */

footer {
  margin-top: 3rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--rule);
  font-size: 0.8em;
  color: var(--dim);
}

footer p { margin: 0; }

/* --- wide screens: section labels move into the left margin --------------- */

@media (min-width: 64rem) {
  main {
    max-width: calc(var(--label) + var(--gutter) + var(--measure) + 3rem);
  }

  .masthead,
  section,
  footer {
    display: grid;
    grid-template-columns: var(--label) 1fr;
    column-gap: var(--gutter);
  }

  .masthead > *,
  section > *,
  footer > * {
    grid-column: 2;
  }

  section > h2 {
    grid-column: 1;
    grid-row: 1 / span 100;   /* not 1/-1 — there are no explicit rows to span to */
    align-self: start;
    position: sticky;
    top: 2.25rem;
    margin: 0;
    padding-top: 0.3rem;      /* optical align with the first entry's cap height */
    text-align: right;
  }
}

/* --- print: ink on paper, not a screenshot of an editor ------------------- */

@media print {
  :root {
    --ground: #fff;
    --ink: #000;
    --soft: #222;
    --muted: #444;
    --dim: #555;
    --rule: #bbb;
    --name: #000;
    --link: #000;
    --link-hi: #000;
  }

  @page { margin: 18mm 16mm; }

  body { font-size: 10pt; line-height: 1.45; }

  main { max-width: none; padding: 0; }

  .bio, .note { max-width: none; }   /* the page margin already sets the measure */
  .bio { font-size: 1em; }

  a { text-decoration: none; }

  section {
    margin-top: 1.4rem;
    padding-top: 0.8rem;
    break-inside: avoid;
  }

  section > h2 { position: static; }

  .entry, .pub { break-inside: avoid; }

  footer { display: none; }
}

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