/* People (/people/): the board, the category pages and the profile. Its own file so the people
   app touches no shared CSS; it reads the tokens in site.css (--card, --line, --tang, ...) and
   follows the Watch board's layout B: a rail, a sort row, a grid and a side box.
   Bump the ?v= on the link in templates/people/ when this file changes. */
.pp-head h1 { font: 900 38px/1 var(--display); letter-spacing: -.03em; margin: 6px 0 0; }
.pp-head p { margin: 8px 0 0; color: var(--txt-2); max-width: 70ch; }
.pp-find { margin-top: 14px; max-width: 420px; }
.pp-roles { display: flex; flex-wrap: wrap; overflow: visible; }
.pp-w { color: var(--tang-ink); font-weight: 600; }
.pp-lay { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 28px; margin-top: 4px; align-items: start; }
.pp-rail { position: sticky; top: 16px; }
.pp-rg { background: var(--card); border-radius: var(--r); padding: 14px; box-shadow: 0 1px 2px var(--shadow); }
:root[data-theme="dark"] .pp-rg, :root[data-theme="dark"] .pp-box { box-shadow: inset 0 0 0 1px var(--line); }
.pp-rg h2, .pp-eyebrow { margin: 0 0 8px; font: 600 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--txt-3); }
.pp-ro { display: flex; justify-content: space-between; align-items: center; height: 36px; padding: 0 10px; border-radius: 10px; color: var(--txt); font-weight: 600; }
.pp-ro:hover { text-decoration: none; background: var(--sunk); }
.pp-ro span { color: var(--txt-3); font-weight: 500; font-size: 13px; }
.pp-ro.on { background: color-mix(in srgb, var(--tang) 14%, var(--card)); color: var(--tang-ink); }
.pp-chips { display: none; gap: 8px; overflow-x: auto; margin-bottom: 14px; scrollbar-width: none; }
.pp-chip { flex: none; height: 34px; padding: 0 14px; border-radius: 999px; display: inline-flex; align-items: center; background: var(--sunk); color: var(--txt-hi); font-weight: 600; font-size: 13px; }
.pp-chip:hover { text-decoration: none; }
.pp-chip.on { background: var(--txt-hi); color: var(--on-hi); }
.pp-sort { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 8px; color: var(--txt-2); }
.pp-sort .pager { padding: 0; justify-content: flex-start; }
.pp-feat { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0 0 26px; }
.pp-fc { display: flex; gap: 14px; align-items: center; background: var(--card); border-radius: var(--r); padding: 12px; color: inherit; box-shadow: 0 1px 2px var(--shadow); }
.pp-fc:hover { text-decoration: none; }
.pp-fc .pp-por { width: 64px; flex: none; border-radius: 12px; }
.pp-fc .pp-por i { font-size: 28px; }
.pp-fc b, .pp-nm b { display: block; color: var(--txt-hi); line-height: 1.25; }
.pp-fc span span, .pp-nm span { font-size: 13px; color: var(--txt-3); }
.pp-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px 18px; }
.pp-card { display: flex; flex-direction: column; gap: 10px; color: inherit; }
.pp-card:hover { text-decoration: none; }
.pp-card:hover .pp-por { transform: translateY(-2px); }
.pp-nm b { font-size: 16px; }
.pp-por { --pt: #1f2a44; --po: #ffd23f; aspect-ratio: 4 / 5; border-radius: var(--r2); position: relative; overflow: hidden; background: var(--pt); color: var(--po); display: grid; place-items: center; transition: transform .15s; }
.pp-por i { font: 900 clamp(34px, 5vw, 64px)/1 var(--display); font-style: normal; letter-spacing: -.04em; opacity: .9; }
.pp-por img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.pp-por.t1 { --pt: #1f2a44; --po: #ffd23f; }
.pp-por.t2 { --pt: #f2610d; --po: #14203a; }
.pp-por.t3 { --pt: #00c2b8; --po: #073b38; }
.pp-por.t4 { --pt: #4c5bff; --po: #fff; }
.pp-por.t5 { --pt: #e8345e; --po: #fff; }
.pp-por.t6 { --pt: #ffd23f; --po: #4a3800; }
.pp-none { grid-column: 1 / -1; color: var(--txt-2); }

/* the profile */
.pp-crumb { font-size: 13px; color: var(--txt-3); }
.pp-tp { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; margin-top: 4px; align-items: start; }
.pp-main { display: grid; gap: 22px; min-width: 0; }
.pp-hero { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 24px; }
.pp-hero .pp-por { border-radius: var(--r); }
.pp-credit { margin: 8px 0 0; font-size: 11.5px; color: var(--txt-3); }
.pp-credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.pp-hero h1 { font: 900 36px/1.05 var(--display); letter-spacing: -.03em; margin: 8px 0; }
.pp-pills, .pp-meta, .pp-soc { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
.pp-meta { color: var(--txt-2); }
.pp-pill { height: 24px; padding: 0 10px; border-radius: 999px; background: color-mix(in srgb, var(--tang) 15%, var(--card)); color: var(--tang-ink); font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; }
.pp-pill:hover { text-decoration: none; }
.pp-wiki { margin: 14px 0 0; max-width: 68ch; }
.pp-src { margin: 6px 0 0; font-size: 12px; color: var(--txt-3); }
.pp-soc { margin-top: 14px; }
.pp-soc .btn { height: 34px; }
.pp-tabs { display: flex; gap: 26px; box-shadow: inset 0 -1px 0 var(--line); overflow-x: auto; scrollbar-width: none; }
.pp-tabs a { padding: 10px 0 12px; border-bottom: 2px solid transparent; font-weight: 600; font-size: 14.5px; color: var(--txt-3); white-space: nowrap; }
.pp-tabs a:first-child { color: var(--txt-hi); border-bottom-color: var(--tang); }
.pp-tabs a:hover { text-decoration: none; color: var(--txt-hi); }
.pp-sec h2 { font: 800 20px var(--display); margin: 0 0 8px; }
.pp-other { list-style: none; margin: 0; padding: 0; }
.pp-other li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.pp-other span { color: var(--txt-3); font-size: 13px; }
.pp-rule { display: flex; gap: 8px; align-items: center; padding: 10px 14px; border-radius: var(--r2); background: var(--sunk); color: var(--txt-2); font-size: 13px; margin-bottom: 12px; }
.pp-side { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.pp-box { background: var(--card); border-radius: var(--r); padding: 18px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 1px 2px var(--shadow); }
.pp-box dl { margin: 0; }
.pp-box dl div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.pp-box dt { color: var(--txt-3); }
.pp-box dd { margin: 0; color: var(--txt-hi); font-weight: 600; text-align: right; }
.pp-more h2 { font: 800 20px var(--display); margin: 0 0 12px; }
.pp-mp { display: flex; gap: 12px; align-items: center; padding: 6px 0; color: inherit; }
.pp-mp:hover { text-decoration: none; }
.pp-mp .pp-por { width: 52px; flex: none; border-radius: 10px; }
.pp-mp .pp-por i { font-size: 20px; }
.pp-mp strong { display: block; color: var(--txt-hi); font-size: 14.5px; }
.pp-mp span span { font-size: 12.5px; color: var(--txt-3); }

@media (max-width: 1100px) {
  .pp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pp-tp { grid-template-columns: minmax(0, 1fr) 300px; }
}
@media (max-width: 900px) {
  .pp-lay, .pp-tp { grid-template-columns: minmax(0, 1fr); }
  .pp-rail { display: none; }
  .pp-chips { display: flex; }
  .pp-feat { grid-template-columns: minmax(0, 1fr); gap: 10px; }
}
@media (max-width: 640px) {
  .pp-head h1 { font-size: 30px; }
  .pp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; }
  .pp-hero { grid-template-columns: 120px minmax(0, 1fr); gap: 14px; }
  .pp-hero h1 { font-size: 28px; }
  .pp-sort { flex-wrap: wrap; }
}