/* EDITED IN PLACE (10/11, docs/GRADES-ON-PAGES.md: generators are retired for built pages). This file is no longer
   generated: mocks/src/people-attractions/make_css.py made its first build and now refuses to overwrite it without --force.
   Edit the rules here; tools/css_lint.py guards them (a rule two pages share goes in core.css). The note below is history. */
/* TG people.css: Famous people page (light pass on the live page). Part 1 is generated by
   mocks/src/people-attractions/make_css.py: the live TownTapestry app.css rules the live Famous people pages use
   (tools/css_audit.py, @media wrappers kept), minus every rule core.css already has (rules shared with another
   page file go to core.css through tools/css_dedupe.py). Part 2 is this page's additions
   (mocks/src/people-attractions/people-additions.css). */
.fp-hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:32px;align-items:center}
.fp-hero:not(:has(>.fp-mosaic)){display:block}
.fp-hero:has(>.fp-mosaic.n1){grid-template-columns:minmax(0,1fr) 250px}
.fp-hero .hb-in{max-width:none}
.fp-hero h1 em{font-style:normal;color:var(--accent-ink)}
/* the portrait wall (10/30, Jamie picked option A): the best known framed large with a name plate, the next ones beside
   it (a column of two for 2-3 portraits, a 2x2 block for 4 or more), the last cell "+N more" */
.fp-mosaic{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:30px}
.fp-mosaic.n2,.fp-mosaic.n3{grid-template-columns:repeat(3,minmax(0,1fr))}
.fp-mosaic.n1{grid-template-columns:minmax(0,1fr);width:100%;max-width:250px;justify-self:end}
.fp-mosaic img,.fp-mosaic>a{width:100%;aspect-ratio:4/5;border-radius:var(--r);object-fit:cover;object-position:50% 20%;background:var(--surface);box-shadow:0 0 0 1px var(--line)}
.fp-mosaic figure{position:relative;margin:0;grid-column:span 2;grid-row:span 2;border-radius:var(--r-lg);overflow:hidden;box-shadow:0 0 0 1px var(--line),0 18px 44px rgba(0,0,0,.45)}
.fp-mosaic.n1 figure{grid-column:auto;grid-row:auto;aspect-ratio:4/5}
.fp-mosaic figure img{position:absolute;inset:0;height:100%;aspect-ratio:auto;border-radius:0;box-shadow:none}
.fp-mosaic figcaption{position:absolute;left:0;right:0;bottom:0;padding:44px 14px 12px;background:linear-gradient(180deg,transparent,rgba(8,12,18,.9));display:flex;flex-direction:column;gap:1px}
.fp-mosaic figcaption i{font-style:normal;align-self:flex-start;font-size:11.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:2px}
.fp-mosaic figcaption b{font-size:17px;letter-spacing:-.02em;line-height:1.2;color:var(--ink)}
.fp-mosaic figcaption small{font-size:12.5px;color:var(--ink-2)}
.fp-mosaic>a{display:grid;place-content:center;text-align:center;color:var(--ink);font-size:24px;font-weight:800;letter-spacing:-.03em;line-height:1.1}
.fp-mosaic>a small{display:block;font-size:12px;font-weight:600;letter-spacing:0;color:var(--muted)}
.fp-mosaic>a:hover{box-shadow:0 0 0 1px var(--accent)}
.fp-mosaic.n2>:last-child{grid-row:span 2;aspect-ratio:auto;height:100%}
.fp-kpis .fp-vname{font-size:19px;font-weight:700;letter-spacing:-.02em;line-height:1.25;margin-top:4px}
.fp-pill{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 8px;border-radius:6px;font-size:12px;font-weight:700;background:color-mix(in srgb,var(--fc) 12%,#fff);color:color-mix(in srgb,var(--fc) 80%,#000)}
.fp-ini{display:grid;place-items:center;background:hsl(var(--h) 45% 88%);color:hsl(var(--h) 40% 30%);font-weight:800}
.fp-bph{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--surface)}
.fp-bph.tall{background:#1d2228}
.fp-bph.tall::before{content:'';position:absolute;inset:-24px;background:var(--bg) center/cover;filter:blur(22px);opacity:.55}
.fp-bph.tall img{position:relative;object-fit:scale-down}
.fp-bph img{width:100%;height:100%;object-fit:cover;object-position:50% 25%}
.fp-bph .fp-ini{position:absolute;inset:0;font-size:56px}
.fp-rank{position:absolute;left:12px;top:12px;background:rgba(15,22,35,.78);color:#fff;font-weight:800;font-size:13px;border-radius:999px;padding:4px 10px}
.fp-bb{padding:16px;display:flex;flex-direction:column;gap:6px;flex:1}
.fp-bb h3{font-size:20px;letter-spacing:-.02em}
.fp-bb p{margin:0;color:var(--ink-2);font-size:14.5px}
.fp-yrs{color:var(--muted);font-size:13px}
.fp-f{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;margin-top:auto;padding-top:8px;font-size:13px}
.fp-f a{color:var(--accent-ink);font-weight:600}
.fp-era{fill:#f7f8fa}
.fp-era.alt{fill:#eff2f5}
.fp-erl{font:700 12px var(--sans);fill:var(--muted)}
.fp-yl{font:500 11px var(--sans);fill:var(--faint)}
.fp-axis{stroke:var(--bar)}
.fp-dot{stroke:#fff;stroke-width:1.5;cursor:pointer}
.fp-ring{fill:none;stroke-width:2.5;cursor:pointer}
a:hover>.fp-dot,a:hover>.fp-ring{stroke:var(--ink)}
.fp-fields{display:flex;flex-direction:column}
.fp-fr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr) 104px;gap:14px;align-items:center;padding:10px 0;border:0;border-top:1px solid var(--hair);background:none;text-align:left;width:100%}
.fp-fr:first-child{border-top:0}
.fp-fr:hover .fp-fl b{color:var(--accent-ink)}
.fp-fl{display:flex;align-items:center;gap:8px;min-width:0}
.fp-fl b{font-size:14.5px}
.fp-fl small{color:var(--muted);font-size:12.5px;white-space:nowrap}
.fp-fb{position:relative;height:12px;border-radius:6px;background:#eef0f3}
.fp-fb i{position:absolute;left:0;top:0;bottom:0;border-radius:6px}
.fp-key{position:static;display:inline-block;height:12px;vertical-align:-1px;margin-right:4px}
.fp-fv{text-align:right;font-weight:700;font-size:15px}
.fp-fv small{display:block;font-size:11.5px;font-weight:600;color:var(--muted)}
.fp-fv small.hi{color:var(--good)}
.fp-chips{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.fp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:12px}
.fp-card:target,.fp-big:target{outline:2px solid var(--accent);outline-offset:2px}
.fp-ph{width:64px;height:64px;border-radius:50%;overflow:hidden;flex:none;background:var(--surface);font-size:20px}
.fp-b{min-width:0;display:flex;flex-direction:column;gap:3px;flex:1}
.fp-b h3{font-size:15.5px;letter-spacing:-.01em}
.fp-b p{margin:0;font-size:13.5px;color:var(--ink-2);line-height:1.4}
.fp-from{font-weight:600;color:var(--ink-2)!important}
.fp-near{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:16px;align-items:start}
.fp-ring-c svg{display:block;width:100%;max-width:400px;margin:0 auto}
.fp-bdot{fill:#5a3fb0;fill-opacity:.85;stroke:#fff;stroke-width:2;cursor:pointer}
a:hover>.fp-bdot{fill-opacity:1;stroke:var(--ink)}
.fp-grid.one{grid-template-columns:1fr}
.fp-cands{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.fp-cand{display:flex;align-items:center;gap:10px;border:1px solid var(--line);background:#fff;border-radius:var(--r);padding:8px;text-align:left;font-size:14px}
.fp-cand:hover{border-color:var(--accent)}
.fp-cph{width:40px;height:40px;border-radius:50%;overflow:hidden;flex:none;font-size:14px}
.fp-nx:hover{border-color:var(--accent)}
.fp-nx>span:nth-child(2){flex:1;min-width:0}
.fp-nx b{display:block;font-size:14.5px}
.fp-nph{width:44px;height:44px;border-radius:50%;overflow:hidden;flex:none;font-size:15px}
.fp-credits details{margin-top:8px}
.fp-credits summary{cursor:pointer;font-weight:600;color:var(--muted)}
.fp-credits ul{margin:8px 0 0;padding-left:18px;columns:2;column-gap:24px}
@media (max-width:1100px){
  .fp-near{grid-template-columns:1fr}
}
@media (max-width:900px){
  .fp-hero,.fp-hero:has(>.fp-mosaic.n1){grid-template-columns:1fr;gap:22px}
  .fp-mosaic{max-width:520px;margin-top:0}
  .fp-mosaic.n1{justify-self:start;max-width:220px}
}
@media (max-width:640px){
  .hb-hero.fp-hero{padding:20px}
  .fp-hero.has-photo .hb-in{margin:-20px;padding:20px}
  .fp-hero h1{font-size:30px}
  .fp-mosaic{gap:8px}
  .fp-mosaic figcaption{padding:30px 10px 9px}
  .fp-mosaic figcaption b{font-size:14.5px}
  .fp-mosaic figcaption small{font-size:11.5px}
  .fp-mosaic>a{font-size:19px}
  .fp-fr{grid-template-columns:minmax(0,1fr) 92px;gap:6px 12px}
  .fp-fr .fp-fb{grid-column:1/-1;grid-row:2}
  .fp-cands{grid-template-columns:1fr}
  .fp-credits ul{columns:1}
  .fp-grid{grid-template-columns:1fr}
}
.fp-showall{margin-top:14px}
.fp-ring-c{position:sticky;top:calc(var(--hdr) + 16px)}
@media (max-width:1100px){
  .fp-ring-c{position:static}
}

/* Ported from TownTapestry 10/11 (css audit: used on this page, no rule here). */
.fp-wait{margin-top:16px}