/* A person and their charts (B317, redesigned in B323). */

.person-hero { background: linear-gradient(var(--navy) 0 200px, var(--paper) 200px); padding: 20px 0 8px; }
.person-hero .crumb a { color: var(--on-navy-muted); }
.person-grid { display: grid; grid-template-columns: minmax(240px, 360px) minmax(0, 1fr); gap: 56px; align-items: end; padding-top: 20px; }
.person-hero.no-portrait .person-grid { grid-template-columns: minmax(0, 1fr); }
/* Without a portrait the dark band only carries the way back; the name stands on the paper, never across the edge. */
.person-hero.no-portrait { background: linear-gradient(var(--navy) 0 84px, var(--paper) 84px); }
.person-hero.no-portrait .who { padding-top: 28px; }
.print { margin: 0; padding: 14px 14px 18px; background: #fffdf8; border-radius: 6px; box-shadow: 0 22px 50px rgba(11, 45, 77, 0.25); transform: rotate(-1.2deg); }
.print img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.who { display: flex; flex-direction: column; gap: 14px; padding-bottom: 8px; }
/* The years sit where the dark band ends – how far up depends on the screen – so they carry their own light ground. */
.who .eyebrow { align-self: flex-start; padding: 5px 12px; border-radius: 999px; background: var(--paper); }
.who h1 { margin: 0; font-family: var(--serif); font-size: clamp(2.4rem, 5vw, 4rem); line-height: 1.04; font-weight: 600; color: var(--heading); }
.tagline { margin: 0; font-family: var(--serif); font-size: 1.5rem; font-style: italic; line-height: 1.45; color: var(--muted); }
.quick { margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 14px 32px; }
.quick dt { font-size: 0.875rem; color: var(--muted); }
.quick dd { margin: 0; font-weight: 700; }
.meter { display: flex; align-items: center; gap: 14px; font-size: 0.9rem; color: var(--muted); }
.meter .on { fill: #2f7d4f; }
.meter .off { fill: var(--chip); }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 0; }

.lifecard { margin-top: 36px; padding: 20px 28px; }
.lifeline { display: block; width: 100%; height: auto; }
.lifeline .bar { fill: #0e6872; }
.lifeline .mark { fill: var(--card); stroke: #0e6872; stroke-width: 4; }
.lifeline .tick { font-size: 20px; fill: var(--muted); text-anchor: middle; }
.lifeline .tick.end { text-anchor: end; }
:root[data-theme='dark'] .lifeline .bar { fill: #78d4ca; }
:root[data-theme='dark'] .lifeline .mark { stroke: #78d4ca; }
:root[data-theme='dark'] .status-disputed, :root[data-theme='dark'] .status-disproven { background: #3d2a14; color: #f5c58f; }
:root[data-theme='dark'] .fan .label { fill: #0b2d4d; }

.columns { display: flex; flex-wrap: wrap; gap: 48px; align-items: flex-start; margin-top: 40px; }
.main-column { flex: 999 1 560px; min-width: 0; }
.side-column { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.side-column .card:first-child { margin-top: 0; }
.section-h { margin: 6px 0 10px; font-family: var(--serif); font-size: 2.1rem; line-height: 1.15; font-weight: 600; color: var(--heading); }
.story { font-size: 1.1rem; line-height: 1.75; }
.story-block { margin-bottom: 40px; }

.facts { margin: 0; padding: 0; list-style: none; }
.fact { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 24px; padding: 22px 0; border-bottom: 1px solid var(--rule); }
.fact:last-child { border-bottom: 0; }
.fact .when { font-family: var(--serif); font-size: 1.3rem; font-weight: 600; line-height: 1.25; color: var(--heading); }
.fact .what { font-size: 1.15rem; font-weight: 700; }
.fact .where { color: var(--muted); margin-top: 2px; }
.status { display: inline-flex; margin-top: 10px; padding: 4px 12px; border-radius: 999px; font-size: 0.85rem; font-weight: 700; }
.status-proven, .status-corroborated, .status-sourced { background: var(--ok-soft); color: var(--ok); }
.status-disputed, .status-disproven { background: #fdebd9; color: #7a3a00; }
.status-unsourced { background: var(--brass-soft); color: var(--brass); }
.sources { margin-top: 10px; }
.sources summary { cursor: pointer; color: var(--link); font-weight: 600; }
.sources ul { margin: 8px 0 0; padding: 12px 16px 12px 32px; background: var(--card); border: 1px solid var(--rule); border-radius: 12px; }
.know-more { margin: 8px 0 0; font-size: 0.95rem; }

.kin { margin: 0 0 6px; padding: 0; list-style: none; }
.kin a { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 12px; text-decoration: none; color: inherit; }
.kin a:hover { background: var(--paper); }
.kin strong { display: block; }

/* The tabs on a phone (person-tabs.js): Life, Family, Sources, Places */
.tabs { display: none; }
@media (max-width: 760px) {
  .person-hero { background: linear-gradient(var(--navy) 0 120px, var(--paper) 120px); text-align: center; }
  .person-hero.no-portrait { background: linear-gradient(var(--navy) 0 72px, var(--paper) 72px); }
  .person-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; justify-items: center; }
  .print { width: 200px; }
  .quick, .meter, .actions { justify-content: center; }
  .who .eyebrow { align-self: center; }
  .tabs { position: sticky; top: 0; z-index: 5; display: flex; gap: 4px; margin: 20px -16px 0; padding: 8px 16px; overflow-x: auto; background: var(--paper); border-bottom: 1px solid var(--rule); }
  .tabs a { flex: 0 0 auto; padding: 10px 16px; border-radius: 999px; text-decoration: none; color: var(--heading); font-weight: 700; }
  .tabs a[aria-selected='true'] { background: var(--navy); color: #ffffff; }
  .columns { gap: 24px; margin-top: 24px; }
  .columns > div, .columns > aside { flex-basis: 100%; }
  .fact { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .lifecard { display: none; }
}

/* The life and its time (B324), woven into the life (B326): history between the facts, quieter than they are */
.lanes { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 8px; }
.lanes .chip[aria-pressed='true'] { background: var(--navy); border-color: var(--navy); color: #ffffff; }
.fact.time { padding: 10px 16px; margin: 4px 0; row-gap: 0; border: 0; border-left: 3px solid var(--brass); border-radius: 0 12px 12px 0; background: var(--brass-soft); grid-template-columns: 121px minmax(0, 1fr); }
.fact.time .when { font-size: 1.1rem; color: var(--brass); }
.fact.time .what { font-size: 1rem; font-weight: 600; color: var(--heading); }
.fact.time .lane-name { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brass); }
.fact.time .age { display: inline; font-size: 0.9rem; color: var(--brass); }
.fact.time details { margin-top: 4px; }
.fact.time summary { cursor: pointer; color: var(--link); font-size: 0.9rem; }
.fact.time details p { margin: 6px 0 0; color: var(--muted); }
.lifeline .event .pin { fill: var(--brass); }
.lifeline .event .stem { stroke: var(--brass); stroke-width: 1.5; stroke-dasharray: 3 3; }
.lifeline .pin-label { font-size: 15px; fill: var(--ink); }
.lifeline .event:hover .pin-label { fill: var(--brass); font-weight: 700; }
.kin-entry { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; margin-top: 40px; }
.kin-entry p { margin: 0; font-size: 1.4rem; color: var(--heading); }

/* The public articles about the person (B394). */
.person-articles .pa-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; }
.person-articles .pa-head a { font-weight: 700; color: var(--link); text-decoration: none; }
.person-articles .pa-head a:hover { text-decoration: underline; }
.pa-card { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 18px; margin-top: 14px; color: inherit; text-decoration: none; align-items: start; }
.pa-card img, .pa-card .none { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; }
.pa-card .none { background: linear-gradient(135deg, var(--brass-soft), var(--chip)); }
.pa-card .text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pa-card .eyebrow { margin: 0; }
.pa-card strong { font-family: var(--serif); font-size: 1.2rem; line-height: 1.25; color: var(--link); }
.pa-card:hover strong { text-decoration: underline; }
.pa-card .muted { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pa-card .meta { font-size: 0.85rem; color: var(--muted); }
@media (max-width: 560px) { .pa-card { grid-template-columns: 104px minmax(0, 1fr); gap: 12px; } }