/* ==========================================================================
   LIMM — Clinical Editorial
   profile.css · Dokyoung Kim — portrait hero, roles, affiliations,
                 career ledger, advisory · awards, contact
   Depends on tokens.css + layout.css. Adds nothing to them.
   ========================================================================== */

/* ---- Page header --------------------------------------------------------- */
.pro-head { padding-bottom: clamp(40px, 4vw, 72px); }

.pro-head__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding-block: 14px;
  border-bottom: 1px solid var(--rule);
  color: var(--navy);
}
.pro-head__meta b { color: var(--accent-ink); font-weight: 500; }
.pro-head__meta span:last-child { color: var(--muted); }

/* ---- Hero ---------------------------------------------------------------- */
.pro-hero {
  align-items: start;
  row-gap: clamp(28px, 3vw, 40px);
  margin-top: clamp(32px, 3.5vw, 52px);
}

/* Portrait: 5 of 12 columns, 3:4, inside a hairline frame. */
.pro-figure { grid-column: 1 / 6; margin: 0; }
.pro-figure__frame {
  padding: 10px;
  border: 1px solid var(--rule);
  background: var(--paper-3);
}
.pro-figure img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: 50% 18%;
  background: var(--paper-2);
}

/* The Korean name signs the portrait — the page is bilingual by design. */
.pro-figure__sig {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--ink);
}
.pro-figure__sig i { font-style: normal; color: var(--accent-ink); }
.pro-figure__sig b {
  font-weight: 500;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
}

.pro-body { grid-column: 7 / 13; }

.pro-kicker { display: block; color: var(--accent-ink); margin-bottom: clamp(20px, 2.2vw, 32px); }

.pro-name {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 144;
  font-weight: 300;
  font-size: clamp(2.75rem, 1.1rem + 4.6vw, 5rem);
  line-height: 0.98;
  letter-spacing: -0.03em;
  margin-bottom: 20px;
  text-wrap: balance;
}

.pro-role {
  font-size: var(--text-lead);
  line-height: 1.4;
  color: var(--navy);
}
.pro-lab {
  display: block;
  margin-top: 10px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--rule);
  color: var(--muted);
  text-transform: none;
  letter-spacing: 0.05em;
}

.pro-bio {
  margin-top: 26px;
  line-height: 1.62;
  max-width: 56ch;
  text-wrap: pretty;
}

/* Quick facts — a mono ledger, not a card. */
.pro-facts {
  margin-top: clamp(32px, 3.4vw, 48px);
  border-top: 1px solid var(--ink);
}
.pro-facts > div {
  display: grid;
  grid-template-columns: minmax(96px, 24%) minmax(0, 1fr);
  column-gap: var(--gutter);
  row-gap: 2px;
  padding-block: 13px;
  border-bottom: 1px solid var(--rule-soft);
}
.pro-facts dt { color: var(--navy); align-self: baseline; }
.pro-facts dd {
  grid-column: 2;
  font-size: var(--text-sm);
  line-height: 1.45;
  /* Addresses, e-mail and URLs are read, not labelled — they keep their case. */
  text-transform: none;
  letter-spacing: 0.02em;
  overflow-wrap: anywhere;
}
.pro-facts dd + dd { margin-top: 4px; }

.pro-note {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: clamp(28px, 3vw, 40px);
  color: var(--muted);
}
.pro-note::before {
  content: "";
  flex: 0 0 auto;
  width: 40px; height: 1px;
  background: var(--accent);
}

@media (max-width: 1023px) {
  .pro-figure { grid-column: 1 / 4; }
  .pro-body   { grid-column: 4 / 7; }
  .pro-facts > div { grid-template-columns: minmax(0, 1fr); }
  .pro-facts dt { margin-bottom: 4px; }
  .pro-facts dd { grid-column: 1; }
}
@media (max-width: 767px) {
  .pro-head__meta { flex-direction: column; gap: 6px; }
  .pro-figure { grid-column: 1 / 5; }
  .pro-body   { grid-column: 1 / 5; }
  .pro-figure__frame { padding: 8px; }
}

/* ---- 01 / Roles ---------------------------------------------------------- */
.roles { display: block; }
.role {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: var(--gutter);
  row-gap: 8px;
  padding-block: clamp(14px, 1.5vw, 22px);
  border-top: 1px solid var(--rule);
}
.role:first-child { border-top-color: var(--ink); }
.role:last-child { border-bottom: 1px solid var(--rule); }

.role__n { color: var(--navy); transition: color var(--dur) var(--ease); }
.role:hover .role__n { color: var(--accent-ink); }

.role__t {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 72;
  font-weight: 400;
  font-size: clamp(1.25rem, 1rem + 0.75vw, 1.625rem);
  line-height: 1.22;
  letter-spacing: -0.014em;
  text-wrap: pretty;
}
.role__t em {
  font-style: normal;
  display: block;
  margin-top: 6px;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--muted);
  letter-spacing: 0;
}
.role__link { white-space: nowrap; color: var(--navy); }
.role__link:hover { color: var(--accent-ink); }

@media (max-width: 767px) {
  .role { grid-template-columns: 2.5rem minmax(0, 1fr); }
  .role__link { grid-column: 2; justify-self: start; }
}

/* The sub-heading that replaced the accordion summary on the Affiliations and
   Career lists: the same rule the summary drew, without the toggle. */
.profile-sublabel {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--navy);
  padding-top: 20px;
  margin: 0 0 14px;
  border-top: 1px solid var(--rule);
}

/* ---- 02 / Affiliations --------------------------------------------------- */
.affil {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(6, auto);
  grid-auto-flow: column;
  column-gap: clamp(32px, 5vw, 96px);
  border-top: 1px solid var(--ink);
}
.affil li {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  column-gap: 8px;
  align-items: baseline;
  padding-block: 14px;
  border-bottom: 1px solid var(--rule-soft);
  font-size: var(--text-sm);
  line-height: 1.45;
  color: var(--navy);
}
.affil li i { font-style: normal; color: var(--muted); }
@media (max-width: 767px) {
  .affil { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-flow: row; }
}

/* ---- 03 / 이력 — career ledger with a spine ------------------------------- */
.career { border-top: 1px solid var(--ink); }
.career__row {
  --row-pad: clamp(15px, 1.5vw, 20px);
  display: grid;
  grid-template-columns: minmax(88px, 8.5rem) minmax(0, 1fr);
  column-gap: var(--gutter);
  border-bottom: 1px solid var(--rule-soft);
}
.career__period {
  color: var(--muted);
  padding-block: calc(var(--row-pad) + 0.25em) var(--row-pad);
  white-space: nowrap;
}
.career__row--now .career__period { color: var(--accent-ink); }

/* Padding lives on the cells, not the row, so the spine runs unbroken from the
   first entry to the last. */
.career__body {
  position: relative;
  padding: var(--row-pad) 0 var(--row-pad) clamp(20px, 2vw, 28px);
  border-left: 1px solid var(--rule);
}
/* The marker sits on the spine and punches a hole in it. */
.career__body::before {
  content: "";
  position: absolute;
  left: -4px;
  top: calc(var(--row-pad) + 0.62em);
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--rule);
  box-shadow: 0 0 0 4px var(--paper);
}
.career__row--now .career__body::before { background: var(--accent); }

.career__text { font-size: var(--text-sm); line-height: 1.5; }
/* The web address closes the entry on the same line and never breaks in two;
   a narrow viewport may still wrap it whole onto the next line. */
.career__text .career__link {
  margin-left: 0.55em;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 0.8em;
  letter-spacing: 0.04em;
}

/* One column on a phone: the spine moves to the row itself so the timeline
   survives the stack. */
@media (max-width: 560px) {
  .career__row {
    position: relative;
    grid-template-columns: minmax(0, 1fr);
    padding-left: 18px;
    border-left: 1px solid var(--rule);
  }
  .career__row::before {
    content: "";
    position: absolute;
    left: -4px;
    top: calc(var(--row-pad) + 0.5em);
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--rule);
    box-shadow: 0 0 0 4px var(--paper);
  }
  .career__row--now::before { background: var(--accent); }
  .career__period { padding-block: var(--row-pad) 0; }
  .career__body { padding: 5px 0 var(--row-pad); border-left: 0; }
  .career__body::before { display: none; }
}

/* ---- 04 / 자문활동 · 수상 -------------------------------------------------- */
.two-col {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(32px, 5vw, 96px);
  row-gap: clamp(32px, 3.5vw, 48px);
}
.plist__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--ink);
  color: var(--navy);
}
.plist__head span:last-child { color: var(--muted); }

.plist li {
  padding-block: 13px;
  border-bottom: 1px solid var(--rule-soft);
  font-size: var(--text-sm);
  line-height: 1.5;
}
.awards li {
  display: grid;
  grid-template-columns: 3.75rem minmax(0, 1fr);
  column-gap: 12px;
  align-items: baseline;
}
.awards__y { color: var(--navy); }
.awards li b { font-weight: 400; }
.awards__now {
  display: inline-block;
  margin-left: 8px;
  color: var(--accent-ink);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
@media (max-width: 767px) { .two-col { grid-template-columns: minmax(0, 1fr); } }

/* ---- 05 / Contact -------------------------------------------------------- */
.pro-contact {
  background: var(--paper-2);
  border-top: 1px solid var(--rule);
  padding-block: clamp(48px, 5vw, 80px);
}
.pro-contact__grid { row-gap: 40px; align-items: start; }
.pro-contact__col { grid-column: span 4; }
.pro-contact__label {
  display: block;
  padding-bottom: 12px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--ink);
  color: var(--navy);
}
.pro-contact__col p { font-size: var(--text-sm); line-height: 1.55; padding-block: 3px; }
.pro-contact__col a:hover { color: var(--accent-ink); }
.pro-contact__col .mono { color: var(--muted); display: block; margin-top: 10px; }
.pro-contact__url { text-transform: none; letter-spacing: 0.03em; overflow-wrap: anywhere; }

@media (max-width: 1023px) { .pro-contact__col { grid-column: span 3; } }
@media (max-width: 640px)  { .pro-contact__col { grid-column: span 4; } }

/* ---- Selected recognition cards ------------------------------------------
   The recognition line is a sentence, not a label: it wraps onto a second line
   rather than being cut. Two class names so the rule outranks refinement.css,
   which loads after this file. */
.profile-highlights .profile-highlight p {
  white-space: normal;
  overflow: visible;
  overflow-wrap: break-word;
  text-overflow: clip;
  -webkit-line-clamp: none;
}