/* ===========================================================================
   Portfolio, redesigned on the site's system.

   A dawn sky, full-bleed above the column like home. Below it the CV is one
   typed document — rows parted by hairlines, no boxes around text — with a
   rail on the left that names the sections and follows the scroll.
=========================================================================== */
.pf-sky {
    margin: 0; border-radius: 0; min-height: 0;
    padding: clamp(36px, 5vw, 60px) 32px 40px;
    justify-content: center;
}
.pf-sky .sky-object.is-moon { top: 26px; right: 8%; }
.pf-sky-inner {
    position: relative; z-index: 1;
    max-width: 1100px; width: 100%; margin: 0 auto;
    display: flex; align-items: flex-start; gap: 32px;
    color: #EEF1FF;
}
.pf-avatar {
    flex: none; width: 112px; height: 112px; border-radius: 50%; object-fit: cover;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .55);
}
.pf-who { min-width: 0; }
.pf-eyebrow { margin: 0 0 6px; font-size: 11px; font-weight: 700; letter-spacing: .26em; text-transform: uppercase; color: #A9C0FF; }
.pf-name { margin: 0; font-size: clamp(30px, 3.4vw, 42px); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; color: #fff; }
.pf-role { margin: 8px 0 0; font-size: 15px; font-weight: 600; color: rgba(238, 241, 255, .8); }
.pf-bio { margin: 16px 0 0; max-width: 720px; font-size: 14.5px; line-height: 1.7; color: rgba(238, 241, 255, .74); }
.pf-bio strong { color: #fff; font-weight: 600; }
.pf-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
.pf-links a {
    display: inline-flex; align-items: center; gap: 7px;
    height: 34px; padding: 0 13px; border-radius: 999px;
    background: rgba(255, 255, 255, .10); border: 1px solid rgba(255, 255, 255, .16);
    color: #fff; font-size: 12.5px; font-weight: 600; text-decoration: none;
    transition: background .12s ease-out;
}
.pf-links a:hover { background: rgba(255, 255, 255, .18); }
.pf-links a:first-child { background: #fff; color: #0F1436; border-color: #fff; }
.pf-links a:first-child:hover { background: #E8EEFF; }
.pf-links svg { width: 14px; height: 14px; }

/* ---- the document ----
   Below the sky, a CV set as one typed document: no boxes around text. Each entry is a row
   — a small logo or thumbnail, the text, the date in a right column — and rows are parted by
   hairlines. Skills and Courses are definition lists with the label in the left column.
   Only Projects keep cards, because those are links to posts. */
.pf-layout { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 32px; max-width: 1100px; margin: 0 auto; }
.pf-rail {
    position: sticky; top: calc(var(--h-topbar) + 24px); align-self: start;
    display: flex; flex-direction: column; gap: 2px; padding-top: 6px;
}
.pf-rail a {
    display: block; padding: 7px 12px; border-radius: 8px;
    font-size: 13px; font-weight: 600; color: #8B95A1; text-decoration: none;
    transition: color .12s ease-out, background .12s ease-out;
}
.pf-rail a:hover { color: #333D4B; background: #F2F4F6; }
.pf-rail a.on { color: #3182F6; background: #E8F3FF; }

.portfolio { min-width: 0; padding-bottom: 24px; }
.portfolio .section { padding: 36px 0 12px; scroll-margin-top: calc(var(--h-topbar) + 16px); }
.portfolio .section:first-child { padding-top: 8px; }
.portfolio .section h2 {
    margin: 0 0 6px; padding-bottom: 12px; border-bottom: 1px solid #191F28;
    font-size: 18px; font-weight: 800; letter-spacing: -.02em; color: #191F28;
}

.doc-row {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 24px; align-items: start;
    padding: 18px 0; border-bottom: 1px solid #E9ECEF;
}
.doc-row:last-child { border-bottom: 0; }
.doc-row:has(> .doc-logo) { grid-template-columns: 44px minmax(0, 1fr) auto; }
.doc-row:has(> .doc-thumb) { grid-template-columns: 56px minmax(0, 1fr) auto; }
.doc-logo {
    width: 44px; height: 44px; border-radius: 10px; border: 1px solid #E9ECEF; background: #fff;
    /* wordmarks are wider than they are tall (ISL 1.76:1, Dankook 1.33:1) — cover cropped them,
       so the whole mark sits inside the tile with a little air instead */
    object-fit: contain; padding: 4px; box-sizing: border-box;
}
.doc-thumb { width: 56px; height: 72px; border-radius: 6px; object-fit: cover; border: 1px solid #E9ECEF; }
.doc-main { min-width: 0; }
.doc-main h3 { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: -.01em; line-height: 1.4; color: #191F28; text-wrap: pretty; }
.doc-sub { margin: 3px 0 0; font-size: 13px; line-height: 1.5; color: #6B7684; }
.doc-sub strong { font-weight: 700; color: #333D4B; }
.doc-meta { margin: 6px 0 0; font-size: 12.5px; color: #8B95A1; font-variant-numeric: tabular-nums; }
.doc-meta b { font-weight: 700; color: #333D4B; }
.doc-desc { margin: 8px 0 0; font-size: 13.5px; line-height: 1.65; color: #4E5968; text-wrap: pretty; }
.doc-date { padding-top: 2px; font-size: 12.5px; font-weight: 600; color: #8B95A1; white-space: nowrap; font-variant-numeric: tabular-nums; }
.doc-link {
    display: inline-flex; align-items: center; align-self: start; padding: 2px 0; margin-top: 1px;
    font-size: 12.5px; font-weight: 600; color: #3182F6; text-decoration: none; white-space: nowrap;
    transition: color .1s ease-out;
}
.doc-link:hover { color: #1B64DA; text-decoration: underline; text-underline-offset: 3px; }
.doc-sub .doc-link { margin-left: 6px; }
/* the paper's kind: a dot, the venue, and 1st author when it is */
.doc-kind { display: flex; align-items: center; gap: 7px; margin: 0 0 6px; font-size: 12px; font-weight: 600; color: #8B95A1; }
.doc-kind i { width: 7px; height: 7px; border-radius: 50%; }
.doc-kind .k-journal { background: #3182F6; }
.doc-kind .k-conf { background: #22C55E; }
.doc-kind .k-domestic { background: #F59E0B; }
.doc-kind em { margin-left: 2px; padding: 1px 7px; border-radius: 6px; background: #E8F3FF; color: #3182F6; font-style: normal; font-size: 11px; font-weight: 700; }
/* the research body under a role */
.doc-body { margin-top: 12px; }
.doc-body h4 { margin: 12px 0 5px; font-size: 13.5px; font-weight: 700; color: #333D4B; }
.doc-body h4:first-child { margin-top: 0; }
.doc-body ul { margin: 0; padding-left: 14px; font-size: 13.5px; line-height: 1.65; color: #4E5968; }
.doc-body li { padding-left: 2px; }
.doc-body li::marker { color: #B0B8C1; }

.doc-dl { display: grid; grid-template-columns: 170px minmax(0, 1fr); margin: 0; }
.doc-dl dt, .doc-dl dd { margin: 0; padding: 14px 0; border-bottom: 1px solid #E9ECEF; }
.doc-dl dt:nth-last-of-type(1), .doc-dl dd:last-child { border-bottom: 0; }
.doc-dl dt { padding-right: 24px; font-size: 13px; font-weight: 700; color: #333D4B; }
.doc-dl dt small { display: block; margin-top: 3px; font-size: 12px; font-weight: 500; color: #8B95A1; font-variant-numeric: tabular-nums; }
.doc-dl dd { display: flex; flex-wrap: wrap; gap: 6px; }
.doc-dl dd span { padding: 3px 9px; border-radius: 7px; background: #F2F4F6; color: #4E5968; font-size: 12.5px; font-weight: 600; }
.doc-dl-text dd { display: block; }
.doc-dl-text ul { margin: 0; padding-left: 14px; font-size: 13.5px; line-height: 1.7; color: #4E5968; }
.doc-dl-text li::marker { color: #B0B8C1; }

.project-category { margin-top: 18px; }
.project-category-title { margin: 0 0 12px; font-size: 13px; font-weight: 700; color: #6B7684; }
.portfolio .home-cards-grid { gap: 14px; }

@media (max-width: 960px) {
    .pf-layout { grid-template-columns: 1fr; gap: 0; }
    .pf-rail {
        position: sticky; top: var(--h-topbar); z-index: 30;
        flex-direction: row; gap: 4px; overflow-x: auto; padding: 8px 0;
        margin: 0 -16px; padding-left: 16px; padding-right: 16px;
        background: rgba(255, 255, 255, .92); backdrop-filter: blur(8px);
        border-bottom: 1px solid #E9ECEF; scrollbar-width: none;
    }
    .pf-rail::-webkit-scrollbar { display: none; }
    .pf-rail a { flex: none; border-radius: 999px; padding: 6px 12px; }
    .pf-sky-inner { flex-direction: column; align-items: center; text-align: center; gap: 18px; }
    .pf-bio { max-width: none; }
    .pf-links { justify-content: center; }
}
@media (max-width: 600px) {
    .doc-row, .doc-row:has(> .doc-logo), .doc-row:has(> .doc-thumb) { grid-template-columns: minmax(0, 1fr); }
    .doc-logo, .doc-thumb { display: none; }
    .doc-date, .doc-row > .doc-link { grid-row: 1; justify-self: start; padding-top: 0; }
    .doc-dl { grid-template-columns: 1fr; }
    .doc-dl dt { padding-bottom: 6px; border-bottom: 0; }
    .doc-dl dd { padding-top: 0; }
}

/* The portfolio's sky is dawn, not night. Home is the night sky and the category pages
   each carry their own palette; a third page on the same navy read as the same page.
   Warm horizon, a low sun where the moon was, the stars mostly gone. */
.pf-sky { --sky-1: #17102E; --sky-2: #4A2A5E; --sky-3: #9E4E5A; --sky-4: #E39A5B; }
.pf-sky .stars-near, .pf-sky .stars-mid { opacity: .25; }
.pf-sky .firefly { display: none; }
.pf-sky .haze { opacity: .7; }
.pf-sky .sky-object.is-moon { top: auto; bottom: 28px; right: 10%; }
.pf-sky .sky-object.is-moon::after {
    width: 72px; height: 72px;
    background: radial-gradient(circle at 40% 38%, #FFF6DC 0%, #FFD48A 55%, #F2A24A 100%);
    box-shadow: 0 0 30px rgba(255, 190, 110, .55), 0 0 90px rgba(255, 170, 90, .28);
}
.pf-sky .sky-object::before { background: radial-gradient(circle, rgba(255, 190, 110, .28), rgba(255, 190, 110, 0) 70%); }
.pf-eyebrow { color: #FFD7A8; }
.pf-links a:first-child { background: #FFE9CF; border-color: #FFE9CF; color: #3A1D2B; }
.pf-links a:first-child:hover { background: #FFF4E6; }