:root{
  color-scheme:light;   /* light only — never auto-darken */
  --bg:#ffffff; --fg:#1a1a1c; --muted:#6b7280; --line:#e3eae6;
  --card:#f6faf7; --accent:#00693E; --radius:12px; --maxw:1000px;
}
*{box-sizing:border-box}
body{
  margin:0;background:var(--bg);color:var(--fg);
  font:16px/1.62 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  letter-spacing:.01em;-webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--maxw);margin:0 auto;padding:56px 22px 72px}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

/* hero */
.hero{display:flex;gap:26px;align-items:center;margin-bottom:6px}
.hero .avatar{width:118px;height:118px;border-radius:50%;object-fit:cover;flex:0 0 auto;border:1px solid var(--line)}
.hero h1{margin:0 0 2px;font-size:1.72rem;font-weight:700;letter-spacing:-.015em}
.hero .role{color:var(--muted);font-size:.94rem;margin:0 0 9px}
.tagline{font-size:1.03rem;margin:0 0 6px;max-width:64ch}
.subline{color:var(--muted);font-size:.9rem;margin:0;line-height:1.5}
.seeking{margin:14px 0 0;font-weight:700;color:var(--accent);font-size:1rem}
.footnote{margin:12px 0 0;font-size:.78rem;color:var(--muted)}
.links{margin:18px 0 0;font-size:.92rem}
.links .sep{color:var(--line);margin:0 9px}

/* section + divider */
.section{margin-top:40px}
.section>.label{font-size:.73rem;text-transform:uppercase;letter-spacing:.15em;color:var(--muted);font-weight:600;margin:0 0 5px}
.section>.rule{height:1px;background:var(--line);margin:0 0 12px}

/* card */
.card{display:flex;align-items:center;gap:16px;padding:14px;margin:6px -14px;border-radius:var(--radius);
  transition:background .15s ease,box-shadow .15s ease;position:relative}
.card:hover{background:var(--card);box-shadow:0 6px 26px rgba(0,0,0,.06)}
/* the thumbnail box is a fixed size — nothing inside it may change the layout */
.thumbwrap{position:relative;flex:0 0 auto;line-height:0;display:block;width:304px;height:171px}
.thumb{width:304px;height:171px;border-radius:9px;object-fit:cover;border:1px solid var(--line);background:var(--card)}
.thumbwrap .thumb{width:100%;height:100%}
/* video thumbnails autoplay muted; the poster covers the load and any blocked autoplay */
video.thumb{display:block;background:var(--card)}
.body{min-width:0}
.ttl{display:inline-block;font-weight:650;font-size:1.02rem;margin:1px 0 3px;color:var(--fg);line-height:1.35}
a.ttl:hover{color:var(--accent)}
.ko{font-size:.85rem;color:var(--muted);margin:0 0 2px}   /* Korean name of a Korean competition */
.auth{font-size:.85rem;color:var(--muted);margin:0 0 3px}
/* my own name, anywhere it appears */
.me{color:var(--fg);font-weight:700;text-decoration:underline;text-underline-offset:2px}
/* author lists: co-authors in body colour, linked ones subdued */
.authors{color:var(--fg)}
.authors a{color:var(--muted)}
.authors a:hover{color:var(--accent)}
.venue{font-size:.83rem;color:var(--accent);font-weight:600;margin:0 0 6px}
.desc{font-size:.9rem;color:var(--fg);opacity:.87;margin:0 0 7px}
.clinks{font-size:.82rem;color:var(--muted);margin:0}
.clinks a{margin-right:13px}
.badge{display:inline-block;font-size:.68rem;font-weight:700;color:#fff;background:var(--accent);
  border-radius:5px;padding:1px 6px;vertical-align:middle;margin-left:4px;letter-spacing:.02em;
  white-space:nowrap}
/* role badge — same shape as the rank badge, outlined instead of filled */
.badge.lead{color:var(--accent);background:none;box-shadow:inset 0 0 0 1px currentColor;font-weight:650}
/* card variant without a thumbnail / link — no hover affordance */
.card.flat{padding:8px 14px;margin:2px -14px}
.card.flat:hover{background:none;box-shadow:none}


footer{margin-top:54px;padding-top:18px;border-top:1px solid var(--line);color:var(--muted);
  font-size:.81rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}

/* detail */
.detail .back{font-size:.9rem;color:var(--muted);display:inline-block;margin-bottom:20px}
.detail h1{font-size:1.5rem;margin:0 0 7px;letter-spacing:-.015em;line-height:1.28}
.detail .meta{color:var(--muted);font-size:.9rem;margin:0 0 18px;line-height:1.5}
.detail .meta strong{color:var(--fg)}
.hero-media{width:100%;border-radius:var(--radius);border:1px solid var(--line);margin:4px 0 6px;background:var(--card)}
.mock{font-size:.74rem;color:var(--muted);font-style:italic;margin:0 0 18px}
.mock a{font-style:normal;font-weight:650}
.detail h2{font-size:.77rem;text-transform:uppercase;letter-spacing:.13em;color:var(--muted);margin:26px 0 8px}
.detail p{margin:0 0 12px;max-width:72ch}
.detail ul{margin:0 0 12px;padding-left:19px}
.detail li{margin:5px 0}
.bibtex{background:var(--card);border:1px solid var(--line);border-radius:9px;padding:13px 15px;
  font:13px/1.55 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;overflow-x:auto;white-space:pre;color:var(--fg)}

/* embedded slide deck */
.slides{position:relative;width:100%;aspect-ratio:16/11;min-height:340px;margin:4px 0 6px;
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--card)}
.slides iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

@media (max-width:560px){
  .wrap{padding:40px 18px 60px}
  /* the intro runs ~9 lines on a phone — body text, so keep it ranged left */
  .hero{flex-direction:column;align-items:flex-start;text-align:left;gap:14px}
  .hero .avatar{width:96px;height:96px}
  .links a{display:inline-block;padding:7px 2px}      /* touch target */
  .card{flex-direction:column;align-items:stretch;gap:12px}
  .thumbwrap,.thumb{width:100%}
  .thumbwrap{height:auto;aspect-ratio:16/9}
  .thumb{height:auto;aspect-ratio:16/9}
  .thumbwrap .thumb{height:100%}
  .clinks a{display:inline-block;padding:6px 0;margin-right:18px}
  .detail h1{font-size:1.3rem}
  .bibtex{font-size:11.5px;padding:11px 12px}
  /* embedded PDF viewers are unreliable on mobile — offer the file instead */
  .slides{display:none}
  .mock a.deck{display:inline-block;margin-top:2px;padding:11px 16px;
    border:1px solid var(--line);border-radius:9px;font-size:.92rem}
}