/* Body font: Paperlogy (페이퍼로지, SIL OFL) via the noonnu CDN */
@font-face{font-family:"Paperozi";src:url("https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-4Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Paperozi";src:url("https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-5Medium.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Paperozi";src:url("https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-6SemiBold.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Paperozi";src:url("https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-7Bold.woff2") format("woff2");font-weight:700;font-display:swap}
:root{
  --bg:#f4f6f9; --paper:#ffffff; --ink:#152030; --muted:#5a6678; --line:#dce3ec;
  --accent:#1d4f91; --accent-soft:#e5edf8; --chip:#e9eef5;
  --serif:var(--sans);
  --sans:"Paperozi",-apple-system,"Apple SD Gothic Neo",system-ui,sans-serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0e141c; --paper:#141c26; --ink:#e4eaf2; --muted:#94a2b4; --line:#253142;
  --accent:#8bb6ec; --accent-soft:#18283c; --chip:#1b2533;
}}
:root[data-theme="dark"]{
  --bg:#0e141c; --paper:#141c26; --ink:#e4eaf2; --muted:#94a2b4; --line:#253142;
  --accent:#8bb6ec; --accent-soft:#18283c; --chip:#1b2533;
}
*{box-sizing:border-box}
html{scroll-padding-top:72px}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.65 var(--sans);-webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column}
main{flex:1}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}

/* language switching */
html[data-lang="en"] [lang="ko"]:not(html){display:none!important}
html[data-lang="ko"] [lang="en"]:not(html){display:none!important}
html[data-lang="ko"] body{word-break:keep-all}

/* top bar */
.top{position:sticky;top:0;z-index:10;background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.top-in{max-width:1080px;margin:0 auto;padding:12px 24px;display:flex;align-items:center;gap:20px}
.brand{font:500 19px/1 var(--serif);color:var(--ink);white-space:nowrap}
.brand:hover{text-decoration:none}
.nav{display:flex;gap:4px;margin-left:auto;font-size:14px}
.nav a{color:var(--muted);white-space:nowrap;padding:6px 10px;border-radius:6px}
.nav a:hover{color:var(--ink);background:var(--chip);text-decoration:none}
.nav a[aria-current="page"]{color:var(--ink);background:var(--chip);font-weight:500}
.lang,.menu{flex:none;border:1px solid var(--line);background:var(--paper);color:var(--ink);border-radius:999px;padding:5px 12px;font:500 13px/1.2 var(--sans);cursor:pointer}
.lang:hover{border-color:var(--accent);color:var(--accent)}
.menu{display:none;padding:5px 10px}

.wrap{max-width:1080px;margin:0 auto;padding:0 24px}

/* home hero */
.hero{display:grid;grid-template-columns:200px 1fr;gap:48px;align-items:start;padding:64px 0 48px;border-bottom:1px solid var(--line)}
.portrait{width:200px;aspect-ratio:4/5;border-radius:6px;background:var(--accent-soft);display:grid;place-items:center;overflow:hidden}
.portrait img{width:100%;height:100%;object-fit:cover}
.portrait span{font:400 64px/1 var(--serif);color:var(--accent);letter-spacing:.02em}
.hero h1{font:500 clamp(36px,5vw,52px)/1.05 var(--serif);margin:0 0 6px;letter-spacing:-.01em}
.ko-name{font:400 20px/1 var(--serif);color:var(--muted);margin-left:10px;vertical-align:middle}
.role{font-size:17px;color:var(--muted);margin:10px 0 22px}
.role b{color:var(--ink);font-weight:500}
.lede{font:400 20px/1.55 var(--serif);max-width:640px;margin:0 0 26px}
html[data-lang="ko"] .lede{font-size:18px;line-height:1.75}
.links{display:flex;flex-wrap:wrap;gap:10px}
.btn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:var(--paper);color:var(--ink);padding:8px 14px;border-radius:6px;font-size:14px;font-weight:500}
.btn:hover{border-color:var(--accent);color:var(--accent);text-decoration:none}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.primary:hover{color:#fff;filter:brightness(1.08)}
.btn svg{width:15px;height:15px}

/* page head (inner pages) */
.page-head{padding:56px 0 28px;border-bottom:1px solid var(--line)}
.page-head h1{font:500 clamp(32px,4.4vw,44px)/1.1 var(--serif);margin:0 0 8px}
.page-head p{color:var(--muted);margin:0;max-width:640px}

/* sections */
section{display:grid;grid-template-columns:200px 1fr;gap:48px;padding:44px 0;border-bottom:1px solid var(--line)}
section:last-of-type{border-bottom:0}
h2{font:500 13px/1.4 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin:6px 0 0;position:sticky;top:80px;align-self:start}
html[data-lang="ko"] h2{letter-spacing:.04em;font-size:15px}
h3{font:500 15px/1.4 var(--sans);color:var(--muted);margin:30px 0 12px}
h3:first-child{margin-top:0}
p{margin:0 0 14px}
.prose{font:400 18px/1.65 var(--serif);max-width:680px}
html[data-lang="ko"] .prose{font-size:17px;line-height:1.8}
.tags{display:flex;flex-wrap:wrap;gap:8px}
.tag{background:var(--chip);border-radius:999px;padding:4px 12px;font-size:14px}

/* entries */
.list{list-style:none;margin:0;padding:0}
.entry{display:grid;grid-template-columns:96px 1fr;gap:18px;padding:14px 0;border-top:1px dashed var(--line)}
.entry:first-child{border-top:0;padding-top:0}
.when{font:500 13px/1.75 var(--sans);color:var(--muted);font-variant-numeric:tabular-nums}
.what b{font-weight:600}
.what .sub{color:var(--muted);font-size:15px}
.what ul{margin:6px 0 0;padding-left:18px;color:var(--muted);font-size:15px}
.what li{margin:2px 0}
.cite{font-size:16px}
.title-it{font-family:var(--serif);font-size:18px;font-style:italic;line-height:1.4}
.badge{display:inline-block;font-size:12px;font-weight:600;color:var(--accent);background:var(--accent-soft);border-radius:4px;padding:1px 7px;margin-left:6px;vertical-align:2px}

/* collapsible detail */
details.more{margin-top:4px}
details.more summary{cursor:pointer;color:var(--muted);font-size:13px;font-weight:500;list-style:none;display:inline-flex;align-items:center;gap:4px;user-select:none}
details.more summary::-webkit-details-marker{display:none}
details.more summary::before{content:"+";display:inline-grid;place-items:center;width:16px;height:16px;border:1px solid var(--line);border-radius:4px;font-size:12px;line-height:1}
details.more[open] summary::before{content:"−"}
details.more summary:hover{color:var(--accent)}
details.more ul{margin-top:8px}

/* materials links */
.mats{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.mat{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:500;color:var(--accent);border:1px solid var(--line);background:var(--paper);border-radius:5px;padding:2px 9px}
.mat:hover{border-color:var(--accent);text-decoration:none}
.mat::after{content:"↗";font-size:11px;opacity:.7}

/* cards */
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.card{display:block;background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:20px;color:var(--ink);transition:border-color .15s,transform .15s}
a.card:hover{border-color:var(--accent);text-decoration:none;transform:translateY(-2px)}
.card .name{font:500 21px/1.25 var(--serif);margin-bottom:6px}
.card .name small{font:400 14px var(--sans);color:var(--muted);margin-left:6px}
.card p{font-size:15px;color:var(--muted);margin:0 0 12px}
.card .url{font-size:13px;color:var(--accent);font-weight:500}
.card .url.dim{color:var(--muted)}

/* home: page links */
.go{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.go a{display:block;padding:16px 18px;border:1px solid var(--line);border-radius:8px;background:var(--paper);color:var(--ink)}
.go a:hover{border-color:var(--accent);text-decoration:none}
.go b{display:block;font:500 18px/1.3 var(--serif);margin-bottom:2px}
.go span{font-size:14px;color:var(--muted)}

.langs{display:grid;grid-template-columns:repeat(4,auto);justify-content:start;gap:8px 32px}
.langs b{display:block;font-weight:500}
.langs span{color:var(--muted);font-size:14px}

footer{border-top:1px solid var(--line)}
.foot{max-width:1080px;margin:0 auto;padding:24px 24px 40px;color:var(--muted);font-size:13px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

@media (max-width:900px){
  .menu{display:block;margin-left:auto}
  .nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;background:var(--bg);border-bottom:1px solid var(--line);padding:8px 16px 12px}
  .nav.open{display:flex}
  .nav a{padding:10px 8px;font-size:15px}
  .lang{margin-left:0}
}
@media (max-width:820px){
  .hero{grid-template-columns:1fr;gap:24px;padding:36px 0 32px}
  .portrait{width:112px}
  .portrait span{font-size:40px}
  .page-head{padding:36px 0 22px}
  section{grid-template-columns:1fr;gap:16px;padding:32px 0}
  h2{position:static}
  .cards,.go{grid-template-columns:1fr}
  .langs{grid-template-columns:repeat(2,auto)}
}
@media (max-width:480px){
  .top-in,.wrap,.foot{padding-left:16px;padding-right:16px}
  .entry{grid-template-columns:1fr;gap:2px}
}
@media print{.top,.links,.lang,.menu{display:none}section,.hero{border:0}details.more>*{display:block}}

/* ===== tab pages: card layouts (About keeps the CV layout) ===== */
.page-head.slim{padding:48px 0 8px;border-bottom:0}
.blk{padding:28px 0 8px}
.blk>h2.bh{position:static;margin:0 0 16px;font:500 13px/1.4 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
html[data-lang="ko"] .blk>h2.bh{letter-spacing:.04em;font-size:14px}
.blk:last-child{padding-bottom:56px}

/* publication cards */
.pubs{display:grid;gap:16px}
.pub{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:24px 26px;display:grid;grid-template-columns:72px 1fr;gap:20px}
.pub .yr{font:500 26px/1 var(--serif);color:var(--accent)}
.pub .jr{font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--muted);text-transform:uppercase;margin-bottom:6px}
html[data-lang="ko"] .pub .jr{text-transform:none}
.pub .tt{font:500 22px/1.35 var(--serif);margin:0 0 6px}
.pub .ko-t{font:400 16px/1.5 var(--serif);color:var(--muted);margin:-2px 0 8px}
.pub .au{font-size:14.5px;color:var(--muted);margin-bottom:14px}
.pub .au b{color:var(--ink);font-weight:600}
.acts{display:flex;flex-wrap:wrap;gap:8px}
.act{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:500;border:1px solid var(--line);border-radius:6px;padding:6px 12px;color:var(--ink);background:var(--bg)}
.act:hover{border-color:var(--accent);color:var(--accent);text-decoration:none}
.act.main{background:var(--accent);border-color:var(--accent);color:#fff}
.act.main:hover{color:#fff;filter:brightness(1.08)}
.act .note{font-weight:400;opacity:.8}

/* talk cards */
.talks{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.talk{background:var(--paper);border:1px solid var(--line);border-radius:10px;overflow:hidden;display:flex;flex-direction:column}
.talk.wide{grid-column:1/-1}
.talk .thumb{display:block;aspect-ratio:16/9;background:var(--chip);overflow:hidden;border-bottom:1px solid var(--line)}
.talk .thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s}
.talk .thumb:hover img{transform:scale(1.03)}
.talk .in{padding:20px 22px;display:flex;flex-direction:column;gap:8px;flex:1}
.talk .dt{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--accent)}
.talk .tt{font:500 20px/1.35 var(--serif);margin:0}
.talk .vn{font-size:14.5px;color:var(--muted);margin:0}
.talk .acts{margin-top:auto;padding-top:8px}
.talk.up{border-color:var(--accent);background:linear-gradient(0deg,var(--paper),var(--paper)) padding-box}
.talk.up .in{padding:24px 26px}
.talk.up .tt{font-size:24px}
.pill{display:inline-block;font-size:11.5px;font-weight:600;border-radius:999px;padding:2px 9px;background:var(--accent-soft);color:var(--accent)}

/* teaching */
.courses{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.course{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:18px}
.course .cd{font:500 28px/1 var(--serif);color:var(--accent)}
.course .nm{font-weight:500;margin:8px 0 10px;line-height:1.35}
.course .sm{font-size:13px;color:var(--muted)}
.dots{display:flex;gap:4px;margin-bottom:6px}
.dots i{width:10px;height:10px;border-radius:3px;background:var(--accent)}
.dots i.on{background:transparent;border:1.5px solid var(--accent)}
.legend{font-size:12.5px;color:var(--muted);margin-top:10px;display:flex;gap:14px;align-items:center}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;background:var(--accent);margin-right:5px;vertical-align:-1px}
.legend i.on{background:transparent;border:1.5px solid var(--accent)}
.feature{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.fcard{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:20px 22px}
.fcard .k{font-size:12.5px;font-weight:600;color:var(--accent);margin-bottom:6px}
.fcard .h{font:500 19px/1.35 var(--serif);margin-bottom:6px}
.fcard p{font-size:14.5px;color:var(--muted);margin:0}
.awards{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.award{display:flex;gap:14px;align-items:flex-start;background:var(--accent-soft);border-radius:10px;padding:18px 20px}
.award .ic{flex:none;width:36px;height:36px;border-radius:50%;background:var(--paper);display:grid;place-items:center;color:var(--accent)}
.award .ic svg{width:18px;height:18px}
.award .h{font-weight:600;line-height:1.35}
.award .s{font-size:13.5px;color:var(--muted)}
.before{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.before .fcard ul{margin:8px 0 0;padding-left:16px;font-size:14px;color:var(--muted)}

@media (max-width:820px){
  .talks,.feature,.awards,.before{grid-template-columns:1fr}
  .courses{grid-template-columns:repeat(2,1fr)}
  .pub{grid-template-columns:1fr;gap:6px;padding:20px}
  .page-head.slim{padding:32px 0 4px}
}
.pub .tt,.talk .tt,.fcard .h{color:var(--ink)}
.talk.media{grid-column:1/-1;flex-direction:row}
.talk.media .thumb{flex:0 0 46%;aspect-ratio:auto;border-bottom:0;border-right:1px solid var(--line)}
.talk.media .in{padding:26px 28px;justify-content:center}
.talk.media .acts{margin-top:8px}
.feature{grid-template-columns:1fr}
@media (max-width:820px){.talk.media{flex-direction:column}.talk.media .thumb{aspect-ratio:16/9;border-right:0;border-bottom:1px solid var(--line)}}
.page-head.slim p{margin-top:6px}
/* presentation gallery: every past talk has a 16:9 tile (slide thumbnail or a title cover) */
.talks.gallery{grid-template-columns:repeat(2,1fr)}
.thumb.cover{display:flex;align-items:flex-end;padding:22px 24px;background:linear-gradient(150deg,var(--accent-soft),var(--chip));color:var(--accent);font:500 19px/1.3 var(--serif);border-bottom:1px solid var(--line)}
.thumb.cover span{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;opacity:.85}
.talk .thumb{position:relative}
a.thumb::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(0,0,0,.04)}
.talks.gallery{grid-template-columns:repeat(3,1fr)}
.talks.gallery .tt{font-size:18px}
.thumb.cover{flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:2px}
.thumb.cover b{font:500 40px/1 var(--serif);color:var(--accent);opacity:.9}
.thumb.cover span{font:600 12.5px/1.4 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--accent);opacity:.75;-webkit-line-clamp:2}
@media (max-width:980px){.talks.gallery{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.talks.gallery{grid-template-columns:1fr}}
.cvhead{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-bottom:20px;border-bottom:1px solid var(--line)}
.cvhead h1{margin:0}
.hero{border-bottom:0;padding-bottom:16px}

/* ===== type scale tuned for Paperlogy (a wide geometric sans; the earlier sizes were set for a serif) ===== */
body{font-size:15px;line-height:1.7}
.brand{font-size:16px;font-weight:600;letter-spacing:-.01em}
.nav{font-size:13.5px}
.hero{gap:40px;padding:52px 0 8px;grid-template-columns:168px 1fr}
.portrait{width:168px}
.portrait span{font-size:52px}
.hero h1{font-size:clamp(28px,3.6vw,38px);font-weight:600;letter-spacing:-.02em;line-height:1.15}
.ko-name{font:inherit;color:var(--muted);opacity:.6;margin-left:.3em;vertical-align:baseline;white-space:nowrap}
.role{font-size:14.5px;margin:8px 0 16px}
.lede,html[data-lang="ko"] .lede{font-size:15.5px;line-height:1.75;max-width:600px;margin-bottom:22px;color:var(--ink)}
.btn{font-size:13.5px;padding:7px 13px}
.page-head h1,.page-head.slim h1{font-size:clamp(24px,3vw,30px);font-weight:600;letter-spacing:-.02em}
.page-head.slim{padding:40px 0 4px}
.blk{padding:22px 0 6px}
.blk>h2.bh,html[data-lang="ko"] .blk>h2.bh{font-size:12px}
h2,html[data-lang="ko"] h2{font-size:12px}
.tag{font-size:13px;padding:3px 11px}
.pub{padding:20px 22px;grid-template-columns:56px 1fr;gap:16px}
.pub .yr{font-size:17px;font-weight:600;line-height:1.5}
.pub .jr{font-size:11.5px}
.pub .tt{font-size:16.5px;font-weight:600;line-height:1.45}
.pub .ko-t{font-size:14px}
.pub .au{font-size:13.5px}
.act{font-size:12.5px;padding:5px 11px}
.talk .in{padding:16px 18px;gap:6px}
.talk .dt{font-size:12px}
.talk .tt,.talks.gallery .tt{font-size:15px;font-weight:600;line-height:1.45}
.talk.up .in{padding:20px 22px}
.talk.up .tt{font-size:17.5px}
.talk .vn{font-size:13px}
.thumb.cover{padding:16px 18px}
.thumb.cover b{font-size:28px;font-weight:600}
.thumb.cover span{font-size:11px}
.course{padding:16px}
.course .cd{font-size:22px;font-weight:600}
.course .nm{font-size:14px;margin:6px 0 8px}
.fcard{padding:18px 20px}
.fcard .k{font-size:11.5px}
.fcard .h{font-size:15px;font-weight:600}
.fcard p{font-size:13.5px}
.award .h{font-size:14px}
.award .s{font-size:12.5px}
.card{padding:18px 20px}
.card .name{font-size:17px;font-weight:600}
.card .name small{font-size:13px}
.card p{font-size:13.5px}
.card .url{font-size:12.5px}
/* CV tab */
.entry{grid-template-columns:88px 1fr;padding:12px 0}
.when{font-size:12.5px}
.cite{font-size:14.5px}
.title-it{font-size:15px;line-height:1.5}
.what .sub,.what ul{font-size:13.5px}
.foot{font-size:12.5px}
@media (max-width:820px){.hero{grid-template-columns:1fr;gap:20px;padding:32px 0 4px}.portrait{width:96px}.portrait span{font-size:34px}}

/* ===== one grid for the whole site =====
   Left edge = the page gutter. On About and CV a 200px label column + 48px gap puts every
   content block (hero text, tags, cards, CV entries) on the same second edge. Card pages
   (Publications, Presentations, Teaching, Projects) put title, section labels and cards on the
   first edge. Inside every card the text sits one fixed inset (22px) from the card edge. */
:root{--lab:200px;--gap:48px;--inset:22px}
.hero{grid-template-columns:var(--lab) 1fr;gap:var(--gap);padding:56px 0 44px;border-bottom:1px solid var(--line);align-items:start}
.portrait{width:var(--lab)}
.portrait span{font-size:60px}
.hero h1{margin-top:-6px}
section{grid-template-columns:var(--lab) 1fr;gap:var(--gap)}
h2,html[data-lang="ko"] h2{margin-top:3px}
.edus{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.pub,.talk .in,.talk.up .in,.course,.fcard,.card,.award{padding-left:var(--inset);padding-right:var(--inset)}
.thumb.cover{padding-left:var(--inset);padding-right:var(--inset)}
.cvhead{align-items:center;padding:40px 0 28px}
.page-head.slim{padding:40px 0 6px}
.page-head h1,.page-head.slim h1{line-height:1.2;margin:0}
.blk:first-of-type{padding-top:26px}
@media (max-width:980px){.edus{grid-template-columns:1fr}}
@media (max-width:820px){.hero{grid-template-columns:1fr;gap:20px;padding:32px 0 28px}.portrait{width:104px}.portrait span{font-size:36px}.hero h1{margin-top:0}}
@media (max-width:820px){section{grid-template-columns:minmax(0,1fr);gap:14px}}
/* optical alignment: Paperlogy's "1" has a wide left side bearing, so big numerals start visibly
   to the right of the text under them. Pull them back to the shared inset. */
.course .cd{margin-left:-.07em}
.course .cd.one{margin-left:-.12em}
.tt .subt{display:block;font-weight:500}

/* exact left line: section labels lose their 1px side bearing, card edges read clearly on that line */
.blk>h2.bh{margin-left:-1px}
.pub,.talk,.course,.fcard,.card{border-color:#cfd8e3}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .pub,:root:not([data-theme="light"]) .talk,:root:not([data-theme="light"]) .course,:root:not([data-theme="light"]) .fcard,:root:not([data-theme="light"]) .card{border-color:#2c3a4d}}
:root[data-theme="dark"] .pub,:root[data-theme="dark"] .talk,:root[data-theme="dark"] .course,:root[data-theme="dark"] .fcard,:root[data-theme="dark"] .card{border-color:#2c3a4d}
/* optical overshoot: rounded, light-edged cards read as sitting inside the text line,
   so every card grid starts 2px outside it (the same trick type designers use for round letters) */
.pubs,.talks,.courses,.awards,.feature,.before,.cards,.edus{margin-left:-2px;margin-right:-2px}
/* portrait spans the English text block (top of "Subin Oh" to the baseline of the intro's last line, 213px); the text still starts on the content line */
@media (min-width:821px){.hero{grid-template-columns:170px 1fr;column-gap:calc(var(--lab) + var(--gap) - 170px)}.portrait{width:170px;margin-top:-2px}}
/* header spacing: on desktop the language pill sits one label-gap (24px) after "CV"; on phones the two pills sit 8px apart as a pair */
.top-in{gap:14px}
@media (max-width:820px){.top-in{gap:8px}}

/* blue palette: light accent buttons keep white text; the lighter dark-mode accent gets dark text */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .btn.primary,:root:not([data-theme="light"]) .act.main{color:#0e141c}}
:root[data-theme="dark"] .btn.primary,:root[data-theme="dark"] .act.main{color:#0e141c}