/* style.css — shared styling for youngjinstephaniehong.com
   Purpose: one stylesheet used by every page, so a change here changes the whole site.
   Created: 2026-11-08. Colors are defined once as variables (":root") and swapped
   automatically for dark mode. Layout works on phones (single column) and desktops. */

:root {
  /* SITE FONT: change this one line to change the font everywhere.
     Current choice: a clean modern sans-serif that is built into Mac, Windows and phones. */
  --font: "Avenir Next", Avenir, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --bg: #fbfaf7;        /* page background */
  --text: #222222;      /* main text */
  --muted: #5f6368;     /* secondary text (dates, notes) */
  --accent: #7a1f2b;    /* links and headings accent (deep red) */
  --line: #e3dfd6;      /* thin divider lines */
  --card: #ffffff;      /* figure box background */
  --soft: #f3e9ea;      /* light tint of the accent color */
  /* Figure 1 gradient, light -> dark (g = box background, t = its text color) */
  --g1: #ffffff; --t1: #222222;
  --g2: #e8bfc5; --t2: #222222;
  --g3: #b5545f; --t3: #ffffff;
  --g4: #7a1f2b; --t4: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #17181a; --text: #e8e6e1; --muted: #a0a4a8; --accent: #e08b97; --line: #34363a; --card: #202225; --soft: #2d2426;
    --g1: #3b2d30; --t1: #e8e6e1; --g2: #5a3a40; --t2: #e8e6e1; --g3: #c7808a; --t3: #17181a; --g4: #e8a3ac; --t4: #17181a; }
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--font); line-height: 1.6; font-size: 17px;
}
a { color: var(--accent); }
.wrap { max-width: 860px; margin: 0 auto; padding: 0 16px; }   /* 16px side gutter on phones */

/* ---- header and navigation ---- */
header { border-bottom: 1px solid var(--line); padding: 20px 0 12px; }
.site-name { font-size: 1.5rem; font-weight: bold; text-decoration: none; color: var(--text); }
nav { margin-top: 8px; font-family: var(--font); font-size: 0.95rem; }
nav a { margin-right: 18px; text-decoration: none; color: var(--muted); padding-bottom: 2px; }
nav a:hover, nav a[aria-current="page"] { color: var(--accent); border-bottom: 2px solid var(--accent); }

/* ---- main content ---- */
main { padding: 28px 0 40px; }
h1 { font-size: 1.7rem; margin: 0 0 12px; }
h2 { font-size: 0.95rem; letter-spacing: 0.16em; text-transform: uppercase; text-align: center; margin: 40px 0 6px; padding-bottom: 8px; border-bottom: 1px solid var(--line); color: var(--accent); }
.muted { color: var(--muted); font-size: 0.92rem; }

/* home page: headshot on the left, text on the right (stacks on phones) */
.intro { display: grid; grid-template-columns: 240px 1fr; gap: 0 28px; align-items: start;
         grid-template-areas: "photo text" "contact text"; grid-template-rows: auto 1fr; }
.intro img { grid-area: photo; width: 240px; max-width: 100%; height: auto; border-radius: 6px; }
.intro .text { grid-area: text; }
.intro .contact { grid-area: contact; margin-top: 12px; }
/* phones: photo, then text, then contact, in one column */
@media (max-width: 640px) { .intro { grid-template-columns: 1fr; grid-template-rows: auto; grid-template-areas: "photo" "text" "contact"; } .intro img { margin-bottom: 16px; } }
.contact { font-family: var(--font); font-size: 0.95rem; }

/* publication and course lists */
ul.pubs, ul.courses { list-style: none; padding: 0; margin: 0; }
ul.pubs li, ul.courses li { padding: 10px 0; border-bottom: 1px solid var(--line); }
.note { font-style: italic; color: var(--muted); font-size: 0.92rem; }

footer { border-top: 1px solid var(--line); padding: 16px 0 32px; font-size: 0.85rem; color: var(--muted); }

/* ---- Figures on the home page (built from text, so they stay sharp on every screen) ---- */
figure.fig { margin: 24px 0; padding: 18px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--soft); }
figure.fig figcaption { font-family: var(--font); font-weight: 600; font-size: 1rem; text-align: center; margin-bottom: 14px; }
.box { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 14px 12px;
       text-align: center; font-family: var(--font); font-size: 0.95rem; line-height: 1.35; }
.box small { display: block; margin-top: 8px; color: var(--muted); font-size: 0.8rem; }
/* Figure 1 boxes: each step is one shade darker than the last */
.box.g1 { background: var(--g1); color: var(--t1); border-color: #e0c4c8; }
.box.g2 { background: var(--g2); color: var(--t2); border-color: var(--g2); }
.box.g3 { background: var(--g3); color: var(--t3); border-color: var(--g3); }
.box.g4 { background: var(--g4); color: var(--t4); border-color: var(--g4); font-weight: 600; }
.box.g3 small { color: inherit; opacity: .85; }

/* Figure 1: four boxes in a row joined by arrows; stacks vertically on phones */
.flow { display: flex; align-items: stretch; gap: 8px; }
.flow .box { flex: 1 1 0; display: flex; flex-direction: column; justify-content: center; }
.flow .arrow { align-self: center; color: var(--accent); font-size: 1.6rem; line-height: 1; }
@media (max-width: 640px) { .flow { flex-direction: column; } .flow .arrow { transform: rotate(90deg); } }

/* Figure 2: three numbered cards. Cards 2 and 3 carry their own bullet points. A bracketed band
   underneath cards 2 and 3 says I also study the combined/interaction effects of multiple policies.
   On phones the cards stack and the band appears below them at full width. */
.areas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.areas .box { font-size: 0.98rem; padding: 18px 14px; }
.areas .num { display: inline-block; width: 28px; height: 28px; line-height: 28px; border-radius: 50%;
              background: var(--accent); color: #ffffff; font-weight: 700; margin-bottom: 8px; }
@media (prefers-color-scheme: dark) { .areas .num { color: #17181a; } }
.areas ul.pts { text-align: left; margin: 10px 0 0; padding-left: 20px; font-size: 0.92rem; }
.areas ul.pts li { margin: 4px 0; }
.areas .combo { grid-column: 2 / 4; margin-top: -4px; padding: 10px 14px 12px; text-align: center;
                border: 2px solid var(--accent); border-top: none; border-radius: 0 0 12px 12px;
                font-family: var(--font); font-size: 0.92rem; color: var(--accent); }
.areas .combo strong { display: block; font-size: 1rem; }
@media (max-width: 640px) { .areas { grid-template-columns: 1fr; } .areas .combo { grid-column: 1; margin-top: 0; border: 2px dashed var(--accent); border-radius: 10px; } }

/* bullet lists inside the research overview */
.research-intro ul { padding-left: 22px; }
.research-intro li { margin: 6px 0; }

/* ---- Publications: year | journal, title, authors (one entry per row, newest first) ---- */
.pub { display: grid; grid-template-columns: 88px 1fr; gap: 0 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.pub .yr { font-weight: 700; color: var(--accent); }
.pub .jr { color: var(--muted); font-size: 0.92rem; }
.pub .ti { font-weight: 600; margin: 2px 0; }
.pub .ti a { color: var(--text); text-decoration-color: var(--accent); }
.pub .au { font-size: 0.95rem; }
.pub .au strong { font-weight: 700; }
@media (max-width: 640px) { .pub { grid-template-columns: 1fr; } .pub .yr { margin-bottom: 2px; } }

/* ---- Contact block: small capitalized labels with stacked values ---- */
.contact dl { margin: 0; }
.contact dt { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-top: 12px; }
.contact dd { margin: 2px 0 0; font-size: 0.95rem; line-height: 1.45; }
.intro .contact { border-top: 1px solid var(--line); padding-top: 4px; }