/* OPTIMUS Lab — shared stylesheet.
   Edit colours and type here and every page changes. */

:root{
  --ink:#12100E;
  --rule:#C6C2BC;
  --hair:#E5E2DD;
  --muted:#5C574F;
  --flag:#9E1B1B;
  --paper:#FDFCFA;
  --tint:#F3F0EB;
  --chip:#BFBFBF;
  --arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M4.4 1.6h9a1 1 0 0 1 1 1v9a1 1 0 1 1-2 0V5.01L3.11 14.3a1 1 0 1 1-1.41-1.41L10.99 3.6H4.4a1 1 0 1 1 0-2z'/%3E%3C/svg%3E");
}

*{box-sizing:border-box}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:Newsreader,"Noto Sans KR",Georgia,serif;
  font-size:17.5px;
  line-height:1.55;
  font-optical-sizing:auto;
}

.wrap{max-width:1120px;margin:0 auto;padding:0 26px}
.sans{font-family:Archivo,"Noto Sans KR",Helvetica,Arial,sans-serif}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
a:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
h1,h2,h3{margin:0;font-weight:500}
img{max-width:100%;height:auto;display:block}

.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;background:var(--ink);color:#fff;padding:8px 12px;z-index:10}

/* ---------- masthead and navigation ---------- */

.masthead{border-bottom:1px solid var(--ink);padding:16px 0 8px}
.mtop{display:flex;flex-direction:column;align-items:flex-end;gap:2px;text-align:right;
  font-family:Archivo,"Noto Sans KR",sans-serif;font-size:11.5px;color:var(--muted)}
.mtop span:first-child{order:2}
.title{font-size:clamp(1.7rem,4.2vw,2.9rem);font-weight:600;letter-spacing:-0.02em;
  line-height:1;margin:8px 0 4px}
.title a:hover{text-decoration:none}
.title em{font-style:normal;font-weight:300}
.strap{font-size:.98rem;color:var(--muted);margin:0 0 12px}

nav{border-bottom:2px solid var(--ink)}
nav ul{display:flex;flex-wrap:wrap;margin:0;padding:0;list-style:none;
  font-family:Archivo,"Noto Sans KR",sans-serif;font-size:13px}
nav li{border-left:1px solid var(--hair)}
nav li:first-child{border-left:0}
nav a{display:block;padding:9px 16px}
nav a:hover{background:var(--tint);text-decoration:none}
nav a[aria-current="page"]{background:var(--ink);color:var(--paper)}

/* ---------- page heading (inner pages) ---------- */

.phead{border-bottom:1px solid var(--rule);padding:26px 0 20px}
.phead h1{font-size:clamp(1.7rem,3.4vw,2.4rem);line-height:1.1;letter-spacing:-0.02em;
  font-weight:600;max-width:24em}
.phead .standfirst{font-size:1.1rem;color:#2A2621;margin:12px 0 0;max-width:38em}
.kicker{font-family:Archivo,"Noto Sans KR",sans-serif;font-size:11.5px;color:var(--flag);margin:0 0 9px}

/* ---------- front page lead ---------- */

.lead{display:grid;grid-template-columns:1.9fr 1fr;border-bottom:1px solid var(--rule)}
.story{padding:30px 30px 26px 0}
.story h1{font-size:clamp(1.9rem,4vw,2.9rem);line-height:1.06;letter-spacing:-0.02em;
  font-weight:600;max-width:21em}
.deck{font-size:1.15rem;margin:14px 0 0;max-width:36em;color:#2A2621}
.byline{font-family:Archivo,"Noto Sans KR",sans-serif;font-size:12px;color:var(--muted);margin:14px 0 0}
.rail{border-left:1px solid var(--rule);padding:30px 0 26px 26px}
.rail dl{margin:0;font-size:.95rem}
.rail dt{font-family:Archivo,"Noto Sans KR",sans-serif;font-size:11px;color:var(--muted);margin-top:10px}
.rail dt:first-child{margin-top:0}
.rail dd{margin:1px 0 0}

/* ---------- waveform band ---------- */

.band{border-bottom:1px solid var(--rule);padding:16px 0 10px}
.band svg{display:block;width:100%;height:104px}
.cap{display:flex;justify-content:space-between;gap:16px;
  font-family:Archivo,"Noto Sans KR",sans-serif;font-size:11px;color:var(--muted);margin-top:5px}

/* ---------- section headings ---------- */

.shead{font-family:Archivo,"Noto Sans KR",sans-serif;font-size:11.5px;color:var(--muted);font-weight:500;
  border-bottom:1px solid var(--ink);padding-bottom:6px;margin:0 0 14px}

/* ---------- three columns ---------- */

.cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  border-bottom:1px solid var(--rule)}
.col{padding:26px 24px;border-left:1px solid var(--hair)}
.col:first-child{padding-left:0;border-left:0}
.col:last-child{padding-right:0}
.col h3{font-size:1.3rem;font-weight:600;letter-spacing:-0.01em;margin-bottom:2px}
.gloss{font-style:italic;color:var(--muted);font-size:.9rem;display:block;margin-bottom:9px}
.col p{margin:0 0 9px;font-size:.99rem}
.col ul{margin:0;padding-left:16px;font-size:.92rem;color:var(--muted)}
.more{font-family:Archivo,"Noto Sans KR",sans-serif;font-size:12px;color:var(--muted);
  display:inline-block;margin-top:10px}

/* ---------- equation feature ---------- */

.quote{border-bottom:1px solid var(--rule);padding:26px 0;
  display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.eq{font-size:1.5rem;text-align:center}
.frac{display:inline-flex;flex-direction:column;align-items:center;vertical-align:middle}
.frac .top{border-bottom:1px solid var(--ink);padding:0 6px 2px}
.frac .bot{padding:2px 6px 0}
var{font-style:italic}
sub{font-size:.66em}
.quote p{margin:0;font-size:1rem;color:var(--muted)}
.flag{color:var(--flag)}

/* ---------- two column lower deck ---------- */

.lower{display:grid;grid-template-columns:1.35fr 1fr;border-bottom:1px solid var(--rule)}
.lower > div{padding:26px 26px 26px 0}
.lower > div:last-child{border-left:1px solid var(--rule);padding:26px 0 26px 26px}

.item{padding:11px 0;border-bottom:1px solid var(--hair);display:grid;
  grid-template-columns:66px 1fr;gap:14px}
.item:last-of-type{border-bottom:0}
.dt{font-family:Archivo,"Noto Sans KR",sans-serif;font-size:12px;color:var(--muted);padding-top:3px}
.it{font-size:1rem;margin:0}
.vn{font-family:Archivo,"Noto Sans KR",sans-serif;font-size:11.5px;color:var(--muted);margin:2px 0 0}
.allof{font-family:Archivo,"Noto Sans KR",sans-serif;font-size:12px;display:inline-block;margin-top:12px}

/* ---------- inside index ---------- */

.inside{border-bottom:1px solid var(--rule);padding:24px 0}
.igrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.icard{border-top:2px solid var(--ink);padding-top:9px}
.icard:hover{text-decoration:none}
.icard h3{font-size:1.05rem;font-weight:600;margin-bottom:3px}
.icard p{margin:0;font-size:.9rem;color:var(--muted)}

/* ---------- generic article body ---------- */

section{padding:28px 0;border-bottom:1px solid var(--rule)}
.prose{max-width:36em}
.prose p{margin:0 0 14px}
.prose h2{font-size:1.4rem;font-weight:600;margin:26px 0 8px;letter-spacing:-0.01em}
.prose h3{font-size:1.12rem;font-weight:600;margin:20px 0 6px}
.prose ul{margin:0 0 14px;padding-left:20px}
.prose li{margin-bottom:4px}

.twocol{display:grid;grid-template-columns:1.4fr 1fr;gap:40px}
.aside{font-size:.95rem;color:var(--muted)}

/* ---------- tables ---------- */

table{width:100%;border-collapse:collapse;font-size:.98rem}
caption{text-align:left;font-family:Archivo,"Noto Sans KR",sans-serif;font-size:11.5px;color:var(--muted);
  padding-bottom:6px}
th{text-align:left;font-family:Archivo,"Noto Sans KR",sans-serif;font-size:11.5px;font-weight:500;
  color:var(--muted);border-bottom:1px solid var(--ink);padding:0 12px 6px 0}
td{padding:10px 12px 10px 0;border-bottom:1px solid var(--hair);vertical-align:top}
td.y{font-family:Archivo,"Noto Sans KR",sans-serif;font-size:13px;color:var(--muted);
  white-space:nowrap;width:64px}
td.v{color:var(--muted);font-size:.9rem;width:31%}

/* publication rows: title, then authors, then a small marker in the venue cell */
.pt{display:block;line-height:1.34}
.au{display:block;font-family:Archivo,"Noto Sans KR",sans-serif;font-size:11.5px;color:var(--muted);
  margin-top:3px;letter-spacing:.01em}
.au b{color:var(--ink);font-weight:500}
.pnote{display:block;font-family:Archivo,"Noto Sans KR",sans-serif;font-size:10.5px;
  text-transform:uppercase;letter-spacing:.06em;color:var(--ink);margin-top:4px}

/* Link out to the publisher's page. The arrow is drawn from --arrow rather
   than the character U+2197, which some phones render as a colour emoji. */
.v .lnk,.it .lnk{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:20px;height:20px;margin-left:8px;vertical-align:-.32em;
  background:var(--chip);color:var(--ink)}
/* the mark stays 20px, but a finger gets a 36px target */
.v .lnk::after,.it .lnk::after{content:"";position:absolute;inset:-8px}
.v .lnk::before,.it .lnk::before{content:"";width:10px;height:10px;background:currentColor;
  -webkit-mask:var(--arrow) center/contain no-repeat;
  mask:var(--arrow) center/contain no-repeat}
.v .lnk:hover,.v .lnk:focus-visible,.it .lnk:hover,.it .lnk:focus-visible{background:var(--ink);color:var(--paper)}
.tally{display:flex;flex-wrap:wrap;gap:0;border-top:2px solid var(--ink);
  border-bottom:1px solid var(--rule);margin:0 0 20px}
.tally div{flex:1 1 0;min-width:88px;padding:9px 12px 10px 0}
.tally b{display:block;font-size:1.5rem;font-weight:400;line-height:1}
.tally span{font-family:Archivo,"Noto Sans KR",sans-serif;font-size:10.5px;text-transform:uppercase;
  letter-spacing:.06em;color:var(--muted)}

/* ---------- filter buttons ---------- */

.filters{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}
.filters button{font-family:Archivo,"Noto Sans KR",sans-serif;font-size:12.5px;background:none;
  border:1px solid var(--rule);color:var(--muted);padding:6px 13px;cursor:pointer}
.filters button:hover{border-color:var(--ink);color:var(--ink)}
.filters button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}

/* ---------- figures ---------- */

.figgrid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule);
  border:1px solid var(--rule)}
.fig{background:var(--paper);padding:14px}
.fig .box{background:#fff;border:1px solid var(--hair);aspect-ratio:16/10;
  display:flex;align-items:center;justify-content:center;color:#B4B0AA;
  font-family:Archivo,"Noto Sans KR",sans-serif;font-size:11.5px}
.fig p{margin:9px 0 0;font-size:.92rem;color:var(--muted);font-family:Archivo,"Noto Sans KR",sans-serif}
.fig p b{color:var(--ink);font-weight:500}

/* ---------- people ---------- */

.mgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));
  gap:24px 26px}
.mcell{border-top:2px solid var(--ink);padding-top:9px}
.mcell .face{display:block;width:100%;height:auto;border:1px solid var(--hair);
  margin:0 0 9px;background:#fff}
.mcell h3{font-size:1.02rem;font-weight:600;margin:0}
.mcell .kr{font-family:"Noto Sans KR",sans-serif;font-size:.85rem;color:var(--muted);margin:1px 0 0}
.mcell .role{font-family:Archivo,"Noto Sans KR",sans-serif;font-size:10.5px;
  text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:6px 0 5px}
.mcell .motto{margin:0 0 9px;font-size:.95rem;font-style:italic;line-height:1.42}
.mcell .hist{margin:0;padding:0;list-style:none;border-top:1px solid var(--hair);padding-top:7px}
.mcell .hist li{font-size:.85rem;color:var(--muted);line-height:1.38;margin-bottom:3px}
.mcell .hist li b{font-family:Archivo,sans-serif;font-size:10px;font-weight:500;
  text-transform:uppercase;letter-spacing:.05em;color:var(--ink);display:block}
.mcell .mail{display:block;font-family:Archivo,sans-serif;font-size:11px;
  color:var(--muted);margin-top:7px;word-break:break-all}
.alumroster{columns:2;column-gap:34px}
.alumroster div{break-inside:avoid;display:flex;justify-content:space-between;gap:14px;
  padding:7px 0;border-bottom:1px solid var(--hair)}
.alumroster span:last-child{color:var(--muted);font-family:Archivo,sans-serif;font-size:12px;white-space:nowrap}
.pgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.person .ph{background:#fff;border:1px solid var(--hair);aspect-ratio:1/1;margin-bottom:9px;
  display:flex;align-items:center;justify-content:center;color:#B4B0AA;
  font-family:Archivo,"Noto Sans KR",sans-serif;font-size:11px}
.person h3{font-size:1.05rem;font-weight:600}
.person .role{font-family:Archivo,"Noto Sans KR",sans-serif;font-size:11.5px;color:var(--muted);margin:1px 0 5px}
.person p{margin:0;font-size:.92rem;color:var(--muted)}

.roster div{display:flex;justify-content:space-between;gap:16px;padding:8px 0;
  border-bottom:1px solid var(--hair);font-size:.98rem}
.roster span:last-child{color:var(--muted);font-family:Archivo,"Noto Sans KR",sans-serif;font-size:12.5px}

/* ---------- contact ---------- */

.cta{display:inline-block;border:1px solid var(--ink);padding:9px 17px;
  font-family:Archivo,"Noto Sans KR",sans-serif;font-size:13px;margin-top:8px}
.cta:hover{background:var(--ink);color:var(--paper);text-decoration:none}
.callout{background:var(--tint);padding:20px 22px;margin:0 0 18px}
.callout h3{font-size:1.12rem;font-weight:600;margin-bottom:6px}
.callout p{margin:0 0 10px;font-size:.98rem}
.callout ul{margin:0;padding-left:19px;font-size:.96rem}

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

footer{padding:22px 0 46px;font-family:Archivo,"Noto Sans KR",sans-serif;font-size:11.5px;color:var(--muted)}
.fbar{display:flex;justify-content:space-between;gap:22px;flex-wrap:wrap}
.fbar p{margin:0 0 3px}
.links{display:flex;gap:15px;flex-wrap:wrap}

/* ---------- responsive ---------- */

@media (max-width:880px){
  .wrap{padding:0 18px}
  .lead,.cols,.quote,.lower,.twocol,.figgrid{grid-template-columns:1fr}
  .story,.rail,.col,.lower > div,.lower > div:last-child{padding:20px 0}
  .rail,.lower > div:last-child{border-left:0;border-top:1px solid var(--rule)}
  .col{border-left:0;border-top:1px solid var(--hair)}
  .col:first-child{border-top:0}
  .igrid,.mgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));
  gap:24px 26px}
.mcell{border-top:2px solid var(--ink);padding-top:9px}
.mcell .face{display:block;width:100%;height:auto;border:1px solid var(--hair);
  margin:0 0 9px;background:#fff}
.mcell h3{font-size:1.02rem;font-weight:600;margin:0}
.mcell .kr{font-family:"Noto Sans KR",sans-serif;font-size:.85rem;color:var(--muted);margin:1px 0 0}
.mcell .role{font-family:Archivo,"Noto Sans KR",sans-serif;font-size:10.5px;
  text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:6px 0 5px}
.mcell .motto{margin:0 0 9px;font-size:.95rem;font-style:italic;line-height:1.42}
.mcell .hist{margin:0;padding:0;list-style:none;border-top:1px solid var(--hair);padding-top:7px}
.mcell .hist li{font-size:.85rem;color:var(--muted);line-height:1.38;margin-bottom:3px}
.mcell .hist li b{font-family:Archivo,sans-serif;font-size:10px;font-weight:500;
  text-transform:uppercase;letter-spacing:.05em;color:var(--ink);display:block}
.mcell .mail{display:block;font-family:Archivo,sans-serif;font-size:11px;
  color:var(--muted);margin-top:7px;word-break:break-all}
.alumroster{columns:2;column-gap:34px}
.alumroster div{break-inside:avoid;display:flex;justify-content:space-between;gap:14px;
  padding:7px 0;border-bottom:1px solid var(--hair)}
.alumroster span:last-child{color:var(--muted);font-family:Archivo,sans-serif;font-size:12px;white-space:nowrap}
.pgrid{grid-template-columns:1fr 1fr}
  .quote{gap:18px}
  nav a{padding:8px 12px}
}

/* ---------- image figures brought from the old site ---------- */
.fig img{display:block;width:100%;height:auto;border:1px solid var(--hair)}
.topic{border-top:2px solid var(--ink);padding-top:10px;margin:0 0 30px}
.topic h3{margin:0 0 2px;font-size:1.12rem;font-weight:600}
.topic .tnum{font-family:Archivo,sans-serif;font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted)}
.topic figure{margin:11px 0 0}
.topic img{display:block;width:100%;height:auto;border:1px solid var(--hair);background:#fff}
.topic figcaption{margin-top:8px;font-family:Archivo,"Noto Sans KR",sans-serif;
  font-size:11.5px;color:var(--muted);line-height:1.45}
.tindex{columns:3;column-gap:28px;margin:0 0 26px;padding:0;list-style:none}
.tindex li{break-inside:avoid;font-family:Archivo,"Noto Sans KR",sans-serif;font-size:12.5px;
  padding:5px 0;border-bottom:1px solid var(--hair)}
.tindex a{color:var(--muted)}
.tindex a:hover{color:var(--ink)}
.banner{display:block;width:100%;height:auto;border:1px solid var(--hair)}
td.kr{font-family:"Noto Sans KR",sans-serif}
@media (max-width:760px){ .tindex{columns:1} }

/* ---------- lab mark in the masthead ---------- */
.brand{--wordmark:clamp(196px,29vw,296px);
  display:grid;grid-template-columns:auto 1fr;align-items:center;
  column-gap:calc(var(--wordmark)*.0378);margin-top:6px}
.brand .btext{display:contents}
.brand .mark{grid-column:1;grid-row:1;
  width:calc(var(--wordmark)*.2485);height:calc(var(--wordmark)*.2485)}
.brand .mark img{display:block;width:100%;height:100%}

/* The wordmark is images/optimus-lab-wordmark.svg -- the words drawn as
   outlines, so no web font is loaded and nothing can change underneath it.
   The <h1> text stays in the page for screen readers and search engines;
   only its pixels are swapped out. */
.brand .title{grid-column:2;grid-row:1;margin:0}
.brand .title a{display:block;width:var(--wordmark);aspect-ratio:5313/920;
  background:url(../images/optimus-lab-wordmark.svg) no-repeat left center/contain;
  overflow:hidden;text-indent:-999em;white-space:nowrap}
.brand .strap{grid-column:1/-1;grid-row:2;margin:12px 0 0}
@media (max-width:600px){ .brand{--wordmark:min(74vw,230px)} .brand .strap{margin:10px 0 0} }

/* ---------- album ---------- */
.ev{border-top:2px solid var(--ink);padding-top:9px;margin:0 0 34px}
.ev .when{font-family:Archivo,sans-serif;font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted)}
.ev h3{margin:1px 0 11px;font-size:1.1rem;font-weight:600}
.shots{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px}
.shots button{padding:0;border:1px solid var(--hair);background:none;cursor:zoom-in;display:block;line-height:0}
.shots button:hover{border-color:var(--ink)}
.shots img{width:100%;height:auto;display:block}
.evindex{columns:3;column-gap:28px;margin:0 0 30px;padding:0;list-style:none}
.evindex li{break-inside:avoid;font-family:Archivo,"Noto Sans KR",sans-serif;font-size:12.5px;
  padding:5px 0;border-bottom:1px solid var(--hair);display:flex;justify-content:space-between;gap:10px}
.evindex a{color:var(--muted)} .evindex a:hover{color:var(--ink)}
.evindex span{color:var(--muted);white-space:nowrap}
#lb{position:fixed;inset:0;background:rgba(18,16,14,.94);display:none;z-index:100;
  align-items:center;justify-content:center;flex-direction:column;padding:26px}
#lb.on{display:flex}
#lb img{max-width:min(100%,1600px);max-height:calc(100vh - 96px);width:auto;height:auto;
  object-fit:contain;border:1px solid #3a3630}
#lb .bar{color:#CFC9C0;font-family:Archivo,"Noto Sans KR",sans-serif;font-size:12px;
  margin-top:12px;display:flex;gap:20px;align-items:center}
#lb button{background:none;border:1px solid #56504a;color:#CFC9C0;font-family:Archivo,sans-serif;
  font-size:12px;padding:5px 12px;cursor:pointer}
#lb button:hover{border-color:#CFC9C0}
@media (max-width:760px){ .evindex{columns:1} }

.pi-photo{display:block;width:100%;max-width:210px;height:auto;border:1px solid var(--hair);
  margin:0 0 14px}

/* ---------- home montage ---------- */

.montage{padding:16px 0 11px;border-bottom:1px solid var(--rule)}
.montage .cards{position:relative;aspect-ratio:1120/490}
.montage .base{position:absolute;left:0;top:0;width:100%;height:71.43%;
  object-fit:cover;display:block}
.montage figure{position:absolute;left:var(--x);top:var(--y);width:10.71%;margin:0;
  border:5px solid var(--paper);background:var(--paper)}
.montage figure img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover}
.montage .cap{margin-top:2px}

@media (max-width:760px){
  .montage .cards{position:static;aspect-ratio:auto;
    display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
  .montage .base{position:static;height:auto;aspect-ratio:5/3;
    object-position:4% center;grid-column:1/-1;margin-bottom:4px}
  .montage figure{position:static;width:auto;border:0}
  .montage .cap{margin-top:6px;flex-direction:column;gap:2px}
}

/* ---------- home: why / keywords ---------- */

.twocol.why{padding:26px 0 4px}
.kwlist{margin:0;padding:0;list-style:none;
  font-family:Archivo,"Noto Sans KR",sans-serif;font-size:12.5px}
.kwlist li{padding:5px 0;border-bottom:1px solid var(--hair)}

/* ---------- research tabs ---------- */

.rtabs{padding:22px 0 0}
.rtabs>.wrap{padding-top:0}
.rtabs .filters{margin:0}
.rtabs .filters button{font-size:13px;padding:7px 14px}

/* ---------- people banner ---------- */

.pbanner{padding:18px 0 0;border-bottom:1px solid var(--rule)}
.pbanner img{display:block;width:100%;aspect-ratio:16/5;object-fit:cover}
.pbanner .cap{padding-bottom:9px}

/* ---------- home: selected works ---------- */

.selected{border-bottom:1px solid var(--rule);padding:26px 0}
.selected .item{grid-template-columns:66px 1fr}

/* ---------- PI summary CV ---------- */

.cvhead{font-family:Archivo,"Noto Sans KR",sans-serif;font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);margin:22px 0 7px}
.cv{margin:0 0 4px}
.cv > div{display:grid;grid-template-columns:118px 1fr;gap:14px;
  padding:7px 0;border-bottom:1px solid var(--hair);font-size:.97rem}
.cv > div:last-child{border-bottom:0}
.cvy{font-family:Archivo,"Noto Sans KR",sans-serif;font-size:12px;color:var(--muted);padding-top:2px}
.cvnote{margin:0;font-size:.97rem}
@media (max-width:600px){ .cv > div{grid-template-columns:1fr;gap:2px} }

/* ==========================================================================
   Typographic scale  (2026-09)
   Sizes, weights, tracking and leading only. No colours are changed here;
   every rule above keeps its colour. Appended, so nothing earlier is edited.

   Four steps of small type instead of the six that had accumulated:
     micro 10.5px  uppercase markers
     meta  12px    dates, bylines, captions, author lines
     ui    13px    navigation, buttons, index lists
     small 15.5px  secondary prose
   and a clearer gap between headline, standfirst and body.
   ========================================================================== */

:root{
  --fs-micro:10.5px;
  --fs-meta:12px;
  --fs-ui:13px;
  --fs-small:15.5px;
  --ls-micro:.07em;
}

/* --- headlines ------------------------------------------------------- */

.story h1{font-size:clamp(2.05rem,4.6vw,3.25rem);line-height:1.03;letter-spacing:-.025em}
.phead h1{font-size:clamp(1.85rem,3.8vw,2.6rem);line-height:1.07;letter-spacing:-.024em}
.prose h2{font-size:1.5rem;line-height:1.2;letter-spacing:-.015em;margin:30px 0 8px}
.prose h3{font-size:1.14rem;line-height:1.3;margin:22px 0 6px}
.col h3{font-size:1.32rem;line-height:1.18}
.icard h3{font-size:1.1rem;line-height:1.22}
.topic h3,.ev h3,.callout h3{font-size:1.16rem;line-height:1.25}
.mcell h3,.person h3{font-size:1.06rem;line-height:1.25}

/* --- standfirst: the one place the page goes large and light ---------- */

.deck,.phead .standfirst{font-size:1.28rem;font-weight:300;line-height:1.4;
  letter-spacing:-.004em}

/* --- body ------------------------------------------------------------ */

.prose p,.col p,.callout p{line-height:1.55}
.it,.cvnote{font-size:1rem}
.rail dd,.aside,.col ul,.person p,td.v,.callout ul,.mcell .motto{font-size:var(--fs-small)}
.pt{font-weight:500;line-height:1.32}

/* --- micro: uppercase markers ---------------------------------------- */

.kicker,.shead,.pnote,.tally span,.cvhead,.topic .tnum,.ev .when,
.mcell .role,.mcell .hist li b{
  font-size:var(--fs-micro);font-weight:500;
  text-transform:uppercase;letter-spacing:var(--ls-micro)}
.shead{padding-bottom:7px;margin:0 0 15px}
.kicker{margin:0 0 10px}

/* --- meta ------------------------------------------------------------ */

.byline,.dt,.cvy,.rail dt,.cap,.au,.vn,.fig p,.topic figcaption,.mcell .mail,
.mcell .hist li,.roster span:last-child,.alumroster span:last-child,
.evindex span,caption,th,td.y,footer,#lb .bar{
  font-size:var(--fs-meta)}
.rail dt{letter-spacing:.02em}
th{letter-spacing:var(--ls-micro);text-transform:uppercase;font-size:var(--fs-micro)}
caption{letter-spacing:var(--ls-micro);text-transform:uppercase;font-size:var(--fs-micro)}
.au b{font-weight:500}

/* --- interface ------------------------------------------------------- */

nav ul,.filters button,.tindex li,.evindex li,.kwlist,.more,.allof,.cta{
  font-size:var(--fs-ui)}
.rtabs .filters button{font-size:13.5px}

/* --- figures that are numbers ---------------------------------------- */

.tally b{font-size:2.05rem;font-weight:500;line-height:.98;letter-spacing:-.02em}
.tally div{padding:11px 14px 12px 0}

/* --- small screens: the headline should not crowd the standfirst ------ */

@media (max-width:600px){
  .deck,.phead .standfirst{font-size:1.16rem}
  .story h1,.phead h1{letter-spacing:-.02em}
}

/* ---------- home: the line above the three verbs ---------- */

.verbs{padding:26px 0 0}
.verbs p{margin:0;font-size:1.15rem;max-width:36em}

/* ---------- research: the line above the tabs ---------- */

.rnote{padding:20px 0 0}
.rnote p{margin:0}
.rtabs{padding:14px 0 0}

/* ---------- people: the PI photo stays with the PI ----------
   Wide: photo and counts in the right-hand column, as before.
   Narrow: the two columns stack, so the photo and counts move above
   the name instead of drifting below the CV, where they could be
   mistaken for the next person. */

.pi .rail{border-left:1px solid var(--rule)}
@media (max-width:880px){
  .pi{display:flex;flex-direction:column}
  .pi .rail{order:-1;border-left:0;border-top:0;padding:0 0 18px;
    display:grid;grid-template-columns:132px 1fr;gap:0 20px;align-items:start}
  .pi .rail .pi-photo{max-width:132px;margin:0}
  .pi .rail dl{margin:0}
}
@media (max-width:420px){
  .pi .rail{grid-template-columns:1fr;gap:12px}
  .pi .rail .pi-photo{max-width:180px}
}

/* ---------- notice: sections that open when clicked ---------- */

.qa{border-top:2px solid var(--ink)}
.qa:last-of-type{border-bottom:2px solid var(--ink)}
.qa summary{list-style:none;cursor:pointer;display:flex;align-items:baseline;
  justify-content:space-between;gap:20px;padding:13px 0;
  font-size:1.32rem;font-weight:600;letter-spacing:-.01em;line-height:1.2}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";font-family:Archivo,"Noto Sans KR",sans-serif;
  font-size:1.15rem;font-weight:400;color:var(--muted);flex:none}
.qa[open] summary::after{content:"\2212"}
.qa summary:hover{background:var(--tint)}
.qa summary:hover::after{color:var(--ink)}
.qa summary:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.qbody{padding:2px 0 22px;max-width:42em}
.qbody p{margin:0 0 13px;line-height:1.75}
.qbody p:last-child{margin-bottom:0}

/* ---------- album: reserve the thumbnail's space before it loads ----------
   Every thumbnail is 500x375. Without a declared ratio a lazy image has no
   height until it arrives, so a jump to #e17 landed at the wrong place and
   then slid as the pictures filled in. */

.shots img{aspect-ratio:4/3;object-fit:cover;background:var(--tint)}
.ev{scroll-margin-top:16px}

/* ---------- page headings sit lower under the nav ---------- */

/* padding-top/bottom only: the shorthand above wiped .wrap's side padding,
   which is why the headline sat flush left on wide screens and jumped up
   against the nav as soon as the window narrowed past 880px. */
.phead{padding-top:40px;padding-bottom:24px}
@media (max-width:600px){ .phead{padding-top:28px;padding-bottom:20px} }

/* ---------- PI summary: let the group labels be seen ----------
   Education / Experience / Research interests were the same weight and
   colour as the dates beside them, so the three groups ran together. */

.cvhead{color:var(--ink);letter-spacing:.09em;
  border-top:1px solid var(--ink);padding-top:11px;margin:32px 0 10px}
.cvhead:first-of-type{margin-top:26px}

/* ---------- notice: the two photos beside the visiting table ----------
   Wide: the table on the left, campus above building on the right.
   Narrow: campus first, then the table, then the building. */

.vis{display:grid;grid-template-columns:1.4fr 1fr;column-gap:40px;row-gap:18px;
  align-items:start;grid-template-areas:"info shot1" "info shot2"}
.vinfo{grid-area:info}
.vshot1{grid-area:shot1}
.vshot2{grid-area:shot2}
@media (max-width:880px){
  .vis{grid-template-columns:1fr;row-gap:22px;
    grid-template-areas:"shot1" "info" "shot2"}
}
/* and the same for the sides above 880px, where .phead's own shorthand
   (padding:26px 0 20px) is still what wins over .wrap's 26px */
@media (min-width:881px){ .phead{padding-left:26px;padding-right:26px} }

/* ---------- the menu stays at the top of the window ----------
   Only the nav bar is fixed, not the masthead: on a phone the whole
   masthead would eat a quarter of the screen. Below 600px the menu
   scrolls sideways in one row instead of wrapping to two. */

nav{position:sticky;top:0;z-index:30;background:var(--paper)}
@media (max-width:600px){
  nav ul{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  nav ul::-webkit-scrollbar{display:none}
  nav li{flex:none}
}

/* anchors have to clear the fixed menu when jumped to */
.ev,.topic,section[id]{scroll-margin-top:92px}
@media (min-width:881px){ .ev,.topic,section[id]{scroll-margin-top:58px} }

/* ---------- back to the top ---------- */

.totop{position:fixed;right:20px;bottom:20px;z-index:25;
  display:none;align-items:center;justify-content:center;gap:7px;
  background:var(--paper);border:1px solid var(--ink);color:var(--ink);
  padding:8px 13px 8px 11px;
  font-family:Archivo,"Noto Sans KR",sans-serif;font-size:11px;font-weight:500;
  text-transform:uppercase;letter-spacing:.08em}
.totop.on{display:inline-flex}
.totop::before{content:"";width:10px;height:10px;background:currentColor;
  -webkit-mask:var(--arrow) center/contain no-repeat;
  mask:var(--arrow) center/contain no-repeat;
  transform:rotate(-45deg)}
.totop:hover{background:var(--ink);color:var(--paper);text-decoration:none}
@media (max-width:600px){ .totop{right:12px;bottom:12px} }

/* on a phone the two school lines only crowd the mark */
@media (max-width:600px){ .mtop{display:none} .masthead{padding-top:14px} }

/* Home's headline was set larger as a front-page lead. Now that it reads
   "Why the inverter" it should match the other pages' headings. */
.story h1{font-size:clamp(1.85rem,3.8vw,2.6rem);line-height:1.07}

/* ---------- people: member cards read as a directory ----------
   The photo used to be as wide as the card, so it towered over text set in
   the smallest step. Now the photo is a fixed 150px on the left and the
   details sit beside it, two members to a row. The photo spans the six rows
   a card has (name, Korean name, role, motto, history, mail); if a card ever
   gains a seventh line it will drop under the photo instead of beside it. */

.mgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 34px}
.mcell{display:grid;grid-template-columns:150px minmax(0,1fr);
  column-gap:18px;align-content:start;
  border-top:2px solid var(--ink);padding-top:11px}
.mcell .face{grid-column:1;grid-row:1/span 6;width:150px;aspect-ratio:4/5;
  object-fit:cover;object-position:center top;margin:0}
.mcell > :not(.face){grid-column:2}
.mcell h3{font-size:1.12rem;line-height:1.25}
.mcell .kr{font-size:.9rem;margin:2px 0 0}
.mcell .role{margin:7px 0 6px}
.mcell .motto{font-size:var(--fs-small);margin:0 0 10px;line-height:1.45}
.mcell .hist{padding-top:8px}
.mcell .hist li{font-size:var(--fs-small);line-height:1.5;margin-bottom:6px}
.mcell .hist li b{font-size:var(--fs-micro);letter-spacing:var(--ls-micro);margin-bottom:1px}
.mcell .mail{font-size:var(--fs-ui);margin-top:9px}

@media (max-width:860px){ .mgrid{grid-template-columns:1fr} }
/* on a phone there is no room for a column of text beside the photo, so the
   photo sits on top and the details run the full width under it. */
@media (max-width:600px){ .mcell{grid-template-columns:minmax(0,1fr);column-gap:0}
  .mcell .face{grid-column:1;grid-row:auto;width:150px;margin-bottom:12px}
  .mcell > :not(.face){grid-column:1} }

/* alumni: two columns is right on a wide screen, one on a phone.
   (A stray copy of these rules inside the 880px block was keeping two.) */
@media (max-width:700px){ .alumroster{columns:1} }

/* the card reads name, Korean name, mail, then the degree programme, so a
   reader has the address right under the name. Grid order only; the HTML
   keeps its own order. */
.mcell .face{order:0}
.mcell h3{order:1}
.mcell .kr{order:2}
.mcell .mail{order:3;margin-top:8px}
.mcell .role{order:4;margin-top:9px}
.mcell .motto{order:5}
.mcell .hist{order:6}