/* 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

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} /* These three blocks set their padding with the shorthand, which wiped out the left and right page margin .wrap gives every other block, so their text sat hard against the edge. Restore it one direction at a time. */ .wrap.verbs,.wrap.selected,.wrap.rnote,.wrap.inside{padding-left:26px;padding-right:26px} @media (max-width:880px){ .wrap.verbs,.wrap.selected,.wrap.rnote,.wrap.inside{padding-left:18px;padding-right:18px} } /* Inside: four across on a wide screen, two on a middling one, one on a phone. */ .igrid{grid-template-columns:repeat(4,minmax(0,1fr))} @media (max-width:880px){ .igrid{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:600px){ .igrid{grid-template-columns:1fr} } /* People photos, bigger. 230px wide at 3:4 makes a card's picture end where the schooling lines do — Jaehyun Park's card is the reference (307 against 320). The PI portrait gets the same 230px. On a phone the picture sits on top, a little smaller, and centred over the text. */ .mcell{grid-template-columns:230px minmax(0,1fr)} .mcell .face{width:230px;aspect-ratio:3/4} .pi-photo{max-width:230px} @media (max-width:880px){ .pi .rail{grid-template-columns:1fr} .pi .rail .pi-photo{max-width:230px;margin-left:auto;margin-right:auto} } @media (max-width:600px){ .mcell{grid-template-columns:minmax(0,1fr)} .mcell .face{width:200px;justify-self:center} .pi .rail .pi-photo{max-width:200px;margin-left:auto;margin-right:auto} } /* Students and alumni summary: the four counts used to sit in the PI's right rail, where they read as part of his entry. They are their own section now, four across, two on a middling screen, one on a phone. */ .scount{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;margin:0} .scount > div{border-top:2px solid var(--ink);padding-top:9px} .scount dt{font-family:Archivo,"Noto Sans KR",sans-serif;font-size:var(--fs-micro); letter-spacing:var(--ls-micro);text-transform:uppercase;color:var(--muted)} .scount dd{margin:3px 0 0;font-size:1.7rem;line-height:1.05} @media (max-width:880px){ .scount{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:600px){ .scount{grid-template-columns:1fr;gap:16px} } /* The alumni list is not one run of years: doctorates come first, then master's degrees. Label each run so the jump back in time is not read as a mistake. */ .alumroster .alumdiv{display:block;border-bottom:0;border-top:2px solid var(--ink); font-family:Archivo,"Noto Sans KR",sans-serif;font-size:var(--fs-micro); letter-spacing:var(--ls-micro);text-transform:uppercase;color:var(--muted); padding:6px 0 0;margin-top:18px;break-after:avoid} .alumroster .alumdiv:first-child{margin-top:0} /* Album: every entry keeps one line under its pictures, whether or not it carries a note, so the list links above always land on the same place. */ .evnote{font-family:"Noto Sans KR",Archivo,sans-serif;font-size:var(--fs-meta); color:var(--muted);line-height:1.45;min-height:1.45em;margin:9px 0 0} /* One of the 22 entries is a technology transfer, not a funded project. The bracket in front of the title says so, and the right-hand column keeps only the company. */ td.kr .tag{font-family:"Noto Sans KR",Archivo,sans-serif;font-size:var(--fs-micro); letter-spacing:var(--ls-micro);font-weight:600;color:var(--ink); white-space:nowrap;margin-right:4px} /* On a phone the browser was giving the venue more room than the title, because the journal names are long unbroken words. Fix the columns so the title keeps about three parts to the venue's two. */ @media (max-width:600px){ #publist{table-layout:fixed} #publist th:nth-child(1),#publist td.y{width:46px} #publist th:nth-child(3),#publist td.v{width:34%} #publist td{overflow-wrap:break-word} } /* One measure for running prose in the Latin text: 48em, about 94 characters at 17.5px. The paragraph now ends near where the roster's first column does instead of stopping well short of it. The Korean body under Notice keeps its own, narrower measure — a Korean character is a full em wide, so 42em there is already about 42 characters a line. */ .prose{max-width:48em} /* =========================================================================== 2026-09-05 — 흑백 조판 정리 (A3 + M1) 선이 많아 지저분하던 것을 정리한다. 규칙은 세 줄이다. · 섹션이 시작하는 자리에 2px 먹 선 하나. · 그 안의 꼭지(카드·항목 머리)는 1px 먹 선. · 같은 종류가 여러 건 이어지는 목록에만 아주 옅은 줄. 그 밖의 구분은 여백이 맡는다. 세로선은 쓰지 않는다. 흐린 글자는 세피아–골드로, 종이·사진과 같은 계열에 둔다. =========================================================================== */ :root{ --muted:#73633F; /* 보조 글자 — 종이색 대비 5.7 */ --label:#8C7C64; /* 대문자 라벨 — 대비 4.0 */ --hair:#E8E1D6; /* 목록 줄 */ --rule:#C9C0B2; /* 얇은 선 */ } /* 1. 섹션 경계 — 굵은 선 하나 */ section{border-bottom:0;border-top:2px solid var(--ink);padding-top:26px} .wrap.verbs,.wrap.selected,.wrap.inside{ border-top:2px solid var(--ink);padding-top:28px} .selected{padding-top:0;border-bottom:0} .inside{padding-top:0;border-bottom:0} /* 2. 꼭지 머리 — 1px 먹 선 (섹션 선보다 한 단계 아래) */ .icard,.mcell,.topic,.ev,.scount > div,.alumroster .alumdiv,.qa{ border-top:1px solid var(--ink)} .qa:last-of-type{border-bottom:1px solid var(--ink)} .tally{border-top:1px solid var(--ink);border-bottom:0} /* 3. 걷어내는 선 — 세로선과 블록 경계 */ .lead,.cols,.montage,.phead,.band,.quote,.lower,.pbanner{border-bottom:0} .rail,.col,.lower > div:last-child,.pi .rail{border-left:0} .shead{border-bottom:0;color:var(--label);margin-bottom:16px} .col{padding-left:0;padding-right:28px} .col:last-child{padding-right:0} .rail{padding-left:0} @media (max-width:880px){ .col{border-top:0} } /* 4. 라벨과 캡션 — 라벨색으로 */ .rail dt,.cap,.cvhead,.tally span,.ev .when,.topic .tnum{color:var(--label)} /* 5. 구분자 노릇을 하는 문장은 흐린 글자가 아니라 본문 글자로 */ .verbs p{color:var(--ink);font-size:1rem;font-weight:400} /* 6. 숨 쉴 자리 */ .story{padding:34px 30px 30px 0} .rail{padding-top:38px} .story p.deck,.prose p,.col p{line-height:1.66} .selected .item{padding:14px 0} /* 목록의 제목은 링크라도 먹색으로. 49줄이 통째로 금색이면 색이 너무 무겁다. */ .evindex a,.tindex a{color:var(--ink)} .evindex span,.tindex span{color:var(--label)} /* 굵은 선이 화면 끝에서 끝까지 그어지던 것을 본문 칸 폭에 맞춘다.
과