/* Soo Yong Lee — homepage stylesheet.
   Generated; edit the source in the build directory rather than here.
   Fonts are self-hosted (Libre Franklin, Public Sans, IBM Plex Mono; OFL). */

@font-face{font-family:'Libre Franklin';font-style:normal;font-weight:100 900;font-display:swap;src:url('fonts/LibreFranklin-normal-var.woff2') format('woff2');}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:100 900;font-display:swap;src:url('fonts/PublicSans-normal-var.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/IBMPlexMono-normal-400.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/IBMPlexMono-normal-500.woff2') format('woff2');}

:root{
  --bg:#F6F8F7; --surface:#FFFFFF; --raise:#EDF2F0;
  --ink:#14181A; --ink-2:#39433F; --muted:#57635F;
  --line:#DDE4E0; --line-soft:#E8EDEB;
  --teal:#0F766E; --teal-deep:#0B4F4A; --teal-wash:rgba(15,118,110,.08);
  --crimson:#9F1239; --crimson-wash:rgba(159,18,57,.08);
  --frame:1080px; --label:176px;
  --f-display:'Libre Franklin',system-ui,sans-serif;
  --f-body:'Public Sans',system-ui,sans-serif;
  --f-mono:'IBM Plex Mono',ui-monospace,monospace;
  --shadow:0 1px 2px rgba(20,24,26,.05),0 8px 24px rgba(20,24,26,.05);
  /* Light only. This also keeps browser-painted UI — scrollbars, form
     controls, autofill — in light mode regardless of the OS preference. */
  color-scheme:light;
}
*{box-sizing:border-box;}
/* Form controls do not inherit type from their ancestors; without this the
   filter chips fall back to the browser's UI font. */
button,input,select,textarea{font:inherit;color:inherit;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;} *{transition-duration:.01ms!important;}}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--f-body); font-size:16px; line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--teal);text-underline-offset:.2em;}
a:focus-visible,button:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:3px;}
h1,h2,h3,h4{font-family:var(--f-display);letter-spacing:-.018em;text-wrap:balance;}

/* ---------- top bar ---------- */
.bar{
  position:sticky; top:0; z-index:40;
  background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:blur(14px); border-bottom:1px solid var(--line);
}
.bar-in{
  max-width:var(--frame); margin:0 auto; padding:12px 40px;
  display:flex; align-items:center; justify-content:space-between; gap:22px;
}
.mark{
  display:flex; align-items:center; gap:9px;
  font-family:var(--f-display); font-weight:700; font-size:.98rem;
  text-decoration:none; color:var(--ink);
}
.mark i{width:9px;height:9px;border-radius:50%;background:var(--teal);}
.bar nav{display:flex;flex-wrap:wrap;gap:19px;}
.bar nav a{font-size:.87rem;color:var(--muted);text-decoration:none;}
.bar nav a:hover{color:var(--ink);}

/* ---------- hero ---------- */
.hero{max-width:var(--frame);margin:0 auto;padding:76px 40px 60px;}
.hero .eyebrow{
  display:inline-flex; align-items:center; gap:8px; margin:0 0 20px; padding:5px 12px;
  border:1px solid var(--line); border-radius:999px; background:var(--surface);
  font-family:var(--f-mono); font-size:.73rem; color:var(--muted);
}
.hero .eyebrow b{color:var(--teal);font-weight:500;}
.hero h1{
  margin:0 0 20px; font-weight:700; font-size:clamp(2.7rem,6.6vw,4.4rem);
  line-height:1.02; letter-spacing:-.035em;
}
.hero .lede{max-width:64ch;margin:0 0 30px;font-size:1.11rem;color:var(--ink-2);}
.hero .cta{display:flex;flex-wrap:wrap;gap:10px;}
.btn{
  display:inline-flex; align-items:center; gap:7px; min-height:42px; padding:0 17px;
  border:1px solid var(--line); border-radius:7px; background:var(--surface);
  color:var(--ink); font-size:.9rem; font-weight:600; text-decoration:none;
  box-shadow:var(--shadow); transition:transform .12s,border-color .15s;
}
.btn:hover{transform:translateY(-1px);border-color:var(--muted);}
.btn.solid{background:var(--teal);border-color:var(--teal);color:#fff;}
.btn.solid:hover{border-color:var(--teal);}

/* ---------- section frame ---------- */
.sec{
  max-width:var(--frame); margin:0 auto; padding:52px 40px;
  display:grid; grid-template-columns:var(--label) minmax(0,1fr); gap:40px;
  border-top:1px solid var(--line);
}
.sec-label{position:sticky;top:78px;align-self:start;}
.sec-label .idx{
  display:block; font-family:var(--f-mono); font-size:.72rem; color:var(--teal); margin-bottom:5px;
}
.sec-label h2{margin:0 0 7px;font-size:1.12rem;font-weight:700;}
.sec-label p{margin:0;font-size:.83rem;color:var(--muted);line-height:1.5;}

/* ---------- research panels ---------- */
.tri{display:grid;gap:12px;}
.tri article{
  padding:20px 22px; border:1px solid var(--line); border-radius:10px;
  background:var(--surface); box-shadow:var(--shadow);
}
.tri h3{margin:0 0 7px;font-size:1.02rem;font-weight:600;}
.tri p{margin:0;color:var(--muted);font-size:.94rem;}
.tri a{color:var(--teal);}
.tri .tally{
  float:right; margin-left:12px; padding:2px 9px; border-radius:999px;
  background:var(--teal-wash); color:var(--teal);
  font-family:var(--f-mono); font-size:.71rem;
}

/* ---------- featured ---------- */
.spot{display:grid;gap:14px;}
.spot article{
  padding:24px; border:1px solid var(--line); border-radius:12px;
  background:var(--surface); box-shadow:var(--shadow);
}
.spot .top{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:11px;}
.pill{
  padding:3px 10px; border-radius:999px; font-family:var(--f-mono); font-size:.71rem;
  background:var(--raise); color:var(--muted);
}
.pill.venue{background:var(--teal-wash);color:var(--teal);}
.spot h3{margin:0 0 9px;font-size:1.16rem;font-weight:700;line-height:1.3;}
.spot h3 a{color:var(--ink);text-decoration:none;}
.spot h3 a:hover{color:var(--teal);}
.spot .who{margin:0 0 11px;font-size:.89rem;color:var(--muted);line-height:1.55;}
.spot .who strong{color:var(--ink-2);font-weight:600;}
.spot .gist{margin:0 0 14px;color:var(--ink-2);font-size:.97rem;}
.links{display:flex;flex-wrap:wrap;gap:9px;}
.links a{
  display:inline-flex; align-items:center; gap:5px; padding:5px 12px;
  border:1px solid var(--line); border-radius:6px; background:var(--bg);
  color:var(--ink); font-size:.82rem; font-weight:600; text-decoration:none;
}
.links a:hover{border-color:var(--teal);color:var(--teal);}
.flag{
  display:flex; gap:8px; margin-top:13px; padding:9px 13px; border-radius:7px;
  background:var(--crimson-wash); color:var(--crimson); font-size:.85rem; line-height:1.5;
}
.flag a{color:inherit;font-weight:600;}

/* ---------- publications ---------- */
.chips{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:8px;}
.chips button{
  padding:6px 13px; border:1px solid var(--line); border-radius:999px;
  background:var(--surface); color:var(--muted); cursor:pointer;
  font-family:var(--f-body); font-size:.82rem; font-weight:600;
  line-height:1.35; transition:all .15s;
}
.chips button:hover{color:var(--ink);border-color:var(--muted);}
.chips button[aria-pressed="true"]{background:var(--teal);border-color:var(--teal);color:#fff;}
.eqline{margin:0 0 20px;font-size:.83rem;color:var(--muted);}
.agroup{display:block;margin-top:34px;}
.agroup:first-of-type{margin-top:0;}
.agroup[hidden]{display:none;}
.ahead{
  display:flex; align-items:center; gap:11px; margin:0 0 10px; padding-bottom:9px;
  border-bottom:1px solid var(--line);
  font-family:var(--f-display); font-size:1.04rem; font-weight:700;
  letter-spacing:-.015em;
}
.ahead .n{
  padding:2px 9px; border-radius:999px; background:var(--teal-wash);
  color:var(--teal); font-family:var(--f-mono); font-size:.72rem; font-weight:400;
}
.ahead i{flex:1;}
.item{
  display:grid; grid-template-columns:52px minmax(0,1fr); gap:14px;
  padding:14px 16px; border:1px solid transparent; border-radius:9px;
  transition:background .15s,border-color .15s;
}
.item:hover{background:var(--surface);border-color:var(--line);}
.item[hidden]{display:none;}
.item .id{font-family:var(--f-mono);font-size:.73rem;color:var(--muted);padding-top:3px;}
.item h4{margin:0 0 5px;font-family:var(--f-body);font-weight:600;font-size:.99rem;line-height:1.42;}
.item h4 a{color:var(--ink);text-decoration:none;}
.item h4 a:hover{color:var(--teal);}
.item .who{margin:0 0 8px;font-size:.86rem;color:var(--muted);line-height:1.5;}
.item .who strong{color:var(--ink-2);font-weight:600;}
.item .meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;}
.item .meta a{
  font-size:.81rem;font-weight:600;color:var(--teal);text-decoration:none;
}
.item .meta a:hover{text-decoration:underline;}

/* ---------- record rows ---------- */
.list{display:flex;flex-direction:column;gap:2px;}
.rec{
  display:grid; grid-template-columns:170px minmax(0,1fr); gap:18px;
  padding:14px 16px; border-radius:9px; transition:background .15s;
}
.rec:hover{background:var(--surface);}
.rec .when{font-family:var(--f-mono);font-size:.76rem;color:var(--muted);padding-top:2px;}
.rec .when.now{color:var(--teal);}
.rec b{display:block;font-size:.99rem;font-weight:600;margin-bottom:3px;}
.rec span{display:block;color:var(--muted);font-size:.89rem;line-height:1.55;}
.rec em{font-style:italic;color:var(--ink-2);}
.rec.award .when{font-family:var(--f-mono);color:var(--crimson);}

/* ---------- skills ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(228px,1fr));gap:12px;}
.card{
  padding:17px 19px; border:1px solid var(--line); border-radius:10px;
  background:var(--surface); box-shadow:var(--shadow);
}
.card h3{
  margin:0 0 10px; font-family:var(--f-mono); font-size:.71rem; font-weight:500;
  letter-spacing:.09em; text-transform:uppercase; color:var(--teal);
}
.card ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:5px;}
.card li{font-size:.89rem;color:var(--ink-2);}
.tongue{display:flex;justify-content:space-between;gap:12px;font-size:.89rem;}
.tongue span{color:var(--muted);font-family:var(--f-mono);font-size:.76rem;}

/* ---------- contact ---------- */
.reach{display:grid;grid-template-columns:repeat(auto-fit,minmax(224px,1fr));gap:11px;}
.reach a{
  display:flex; flex-direction:column; gap:3px; padding:16px 18px;
  border:1px solid var(--line); border-radius:10px; background:var(--surface);
  text-decoration:none; box-shadow:var(--shadow); transition:transform .12s,border-color .15s;
}
.reach a:hover{transform:translateY(-2px);border-color:var(--teal);}
.reach .k{font-family:var(--f-mono);font-size:.71rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);}
.reach .v{font-size:.95rem;font-weight:600;color:var(--ink);word-break:break-word;}
.end{
  max-width:var(--frame); margin:0 auto; padding:26px 40px 54px;
  border-top:1px solid var(--line); display:flex; flex-wrap:wrap;
  justify-content:space-between; gap:14px; font-size:.85rem; color:var(--muted);
}
.end a{color:var(--muted);text-decoration:none;}
.end a:hover{color:var(--teal);}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .sec{grid-template-columns:1fr;gap:20px;padding:44px 24px;}
  .sec-label{position:static;}
  .bar-in,.hero,.end{padding-inline:24px;}
  .hero{padding-top:52px;}
  .bar nav{display:none;}
  .rec{grid-template-columns:1fr;gap:4px;}
  .item{grid-template-columns:1fr;gap:2px;}
}

.gone{
  max-width:var(--frame); margin:0 auto; padding:16vh 40px 20vh;
  display:flex; flex-direction:column; align-items:flex-start; gap:18px;
}
.gone .code{
  font-family:var(--f-mono); font-size:.78rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--teal); margin:0;
}
.gone h1{margin:0;font-weight:700;font-size:clamp(2.2rem,5.4vw,3.4rem);line-height:1.04;}
.gone p{margin:0;max-width:52ch;color:var(--ink-2);font-size:1.05rem;}
@media (max-width:900px){.gone{padding-inline:24px;}}