:root{--paper:#f7f5ee;--white:#fffefa;--ink:#20241e;--muted:#686c62;--line:#dedfd5;--control:#8a8d82;--coral:#e85d47;--blue:#3f55c6;--green:#e4ebd9;--radius:15px;font-family:Arial,Helvetica,sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:24px}body{margin:0}a{color:inherit;text-decoration:none}button,input,textarea,select{font:inherit}button,a,input,textarea,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}a:hover{text-decoration:underline;text-underline-offset:5px}button:disabled{cursor:not-allowed;opacity:.5}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid var(--blue);outline-offset:4px}button,a{touch-action:manipulation}input[type=checkbox]{accent-color:var(--ink)}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip-link{position:fixed;z-index:100;top:-60px;left:16px;background:var(--ink);color:white;padding:12px 20px}.skip-link:focus{top:12px}.site-header{border-bottom:1px solid var(--line)}.header-inner{max-width:1280px;margin:auto;padding:25px 48px;display:flex;align-items:center;justify-content:space-between;gap:24px}.brand{font-size:30px;font-weight:850;letter-spacing:-1.9px;white-space:nowrap;display:inline-flex;align-items:center}.brand:hover{text-decoration:none}.brand-or{font-family:Georgia,serif;font-style:italic;font-size:20px;font-weight:400;margin:0 6px;letter-spacing:-1px}.brand-mark{font-size:33px;color:var(--coral);margin-left:7px;line-height:1}.main-nav{display:flex;gap:33px;font-size:14px;font-weight:600}.main-nav a{padding:10px 0;color:var(--muted)}.main-nav a[aria-current]{color:var(--ink);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:10px}.beta-badge{border:1px solid var(--ink);border-radius:4px;font-size:10px;font-weight:700;letter-spacing:1.5px;padding:8px 10px}.beta-badge span{margin-left:7px}.page-container{max-width:1280px;padding:0 48px;margin:0 auto;min-height:60vh}.hero{display:grid;grid-template-columns:1.15fr 1fr;gap:32px;align-items:center;padding:69px 0 58px;min-height:449px}.eyebrow{font-size:10px;font-weight:750;letter-spacing:1.65px;line-height:1.5;margin:0 0 19px}.status-dot{display:inline-block;width:7px;height:7px;background:var(--coral);border-radius:50%;margin-right:7px}.hero h1{font-size:clamp(45px,5.2vw,68px);line-height:1.04;letter-spacing:-3.8px;margin:0 0 24px;font-weight:750}.serif{font-family:Georgia,'Times New Roman',serif;font-style:italic;font-weight:400;letter-spacing:-.045em}.coral-dot{color:var(--coral)}.hero-description{font-size:15px;line-height:1.75;color:var(--muted);margin-bottom:25px}.text-link{display:inline-flex;align-items:center;gap:16px;font-size:13px;font-weight:650;line-height:1.5}.hero-art{height:305px;position:relative;isolation:isolate}.opinion-note{position:absolute;border-radius:8px;width:203px;height:247px;padding:26px;display:flex;flex-direction:column;box-shadow:0 12px 20px #20241e0c}.opinion-note>span{font-size:9px;font-weight:700;letter-spacing:1.6px}.opinion-note strong{font-family:Georgia,serif;font-size:65px;font-weight:400;letter-spacing:-4px;margin-top:8px}.opinion-note b{font-family:Georgia,serif;font-size:64px;line-height:1;font-weight:400}.opinion-note small{font-size:11px;position:absolute;bottom:22px}.love-note{left:6%;top:6px;background:#f4a08c;transform:rotate(-12deg);z-index:1}.diss-note{right:0;top:45px;background:#bdc8f0;transform:rotate(10deg)}.art-star{position:absolute;bottom:0;left:25%;font-size:88px;line-height:1;color:var(--ink);transform:rotate(-12deg);z-index:2}.manifesto-strip{display:flex;align-items:center;justify-content:space-between;padding:17px 0;border-top:1px solid var(--ink);border-bottom:1px solid var(--line);font-size:11px;letter-spacing:.1px}.manifesto-strip span:before{content:'✦';margin-right:13px;color:var(--coral)}.manifesto-strip a{font-weight:600}.catalog-section{padding-top:50px}.section-heading{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:28px}.section-heading .eyebrow{margin-bottom:9px}.section-heading h2{font-size:29px;letter-spacing:-1.1px;margin:0}.section-heading>.text-link{padding-bottom:4px}.search-form{display:flex;align-items:center;background:var(--white);border:1px solid var(--control);border-radius:8px;gap:13px;padding:8px 9px 8px 17px}.search-form>span{font-size:29px;line-height:1;color:var(--muted)}.search-form input{flex:1;min-width:0;border:0;background:none;padding:11px 0;font-size:14px;color:var(--ink)}.search-form input:focus{outline:none}.search-form:focus-within{outline:2px solid var(--blue);outline-offset:2px}.search-form button{background:var(--ink);border:0;color:var(--white);padding:13px 18px;border-radius:5px;font-size:12px;font-weight:600}.search-form button span{margin-left:18px}.category-tabs{display:flex;gap:9px;flex-wrap:wrap;margin-top:18px}.category-tabs a{padding:10px 18px;border:1px solid var(--line);border-radius:30px;font-size:12px;white-space:nowrap}.category-tabs a span{margin-right:4px}.category-tabs a[aria-current]{background:var(--ink);border-color:var(--ink);color:var(--white)}.category-tabs a:hover{text-decoration:none;border-color:var(--ink)}.results-heading{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin:26px 0 17px;align-items:center}.results-heading p{margin:0}.people-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:21px}.person-card{position:relative;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:transform .18s,box-shadow .18s}.person-card:hover{transform:translateY(-3px);box-shadow:0 8px 25px #20241e09}.card-link{display:block}.card-link:hover{text-decoration:none}.portrait{position:relative;overflow:hidden;height:172px;display:flex;align-items:center;justify-content:center;isolation:isolate}.portrait-actors{background:#e8ddd3;color:#745347}.portrait-musicians{background:#e6deee;color:#705685}.portrait-athletes{background:#dde5d4;color:#52634b}.portrait-creators{background:#dce5ed;color:#526778}.portrait:before{content:'';position:absolute;width:140px;height:140px;border:1px solid currentColor;border-radius:50%;opacity:.16;top:26px;left:calc(50% - 70px)}.portrait:after{content:'';position:absolute;width:205px;height:205px;border:1px solid currentColor;border-radius:50%;opacity:.12;top:-5px;left:calc(50% - 102px)}.portrait-initials{font-family:Georgia,serif;font-size:67px;letter-spacing:-6px;line-height:1;transform:translate(-5px,-3px);font-weight:400;z-index:1}.portrait-musicians .portrait-initials{font-style:italic}.portrait-creators .portrait-initials{font-family:Arial,sans-serif;font-weight:700;letter-spacing:-7px;font-size:61px}.portrait-athletes .portrait-initials{font-style:italic;font-weight:bold}.portrait-symbol{position:absolute;right:17px;top:13px;font-size:22px}.portrait-orbit{position:absolute;bottom:-80px;right:-55px;width:200px;height:200px;border:25px solid currentColor;border-radius:50%;opacity:.06}.card-body{padding:18px 18px 0}.card-body .eyebrow{font-size:8px;letter-spacing:1.3px;margin:0 0 7px;color:var(--muted)}.card-body h3{font-size:19px;letter-spacing:-.6px;line-height:1.2;margin:0 0 7px}.card-description{font-size:11px;color:var(--muted);line-height:1.5;margin:0;min-height:34px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.results{padding:18px}.result-labels{display:flex;justify-content:space-between;font-size:10px;gap:8px;line-height:1.6}.result-labels strong{font-weight:650}.love-text{color:#b73b2b}.diss-text{color:#344aab}.vote-meter{display:block;appearance:none;-webkit-appearance:none;width:100%;height:6px;margin:9px 0 9px;border:0;background:var(--blue);border-radius:9px;overflow:hidden}.vote-meter::-webkit-meter-bar{background:var(--blue);border:0;height:6px;border-radius:9px}.vote-meter::-webkit-meter-optimum-value{background:var(--coral);border-radius:0}.vote-meter::-moz-meter-bar{background:var(--coral)}.vote-meter.is-empty,.vote-meter.is-empty::-webkit-meter-bar{background:var(--line)}.vote-count{font-size:9px;color:var(--muted);margin:0;text-align:center}.card-vote-link{display:flex;justify-content:space-between;padding:12px 18px;border-top:1px solid #ecece4;font-size:10px;font-weight:650}.card-vote-link:hover{background:var(--paper);text-decoration:none}.pagination{display:grid;grid-template-columns:1fr auto 1fr;gap:15px;align-items:center;margin:32px 0;font-size:12px}.pagination>a:last-child{justify-self:end}.pagination>a:first-child{justify-self:start}.button{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:13px 21px;border:1px solid var(--ink);border-radius:6px;background:var(--ink);color:var(--white);font-size:12px;font-weight:600;line-height:1.35;min-height:43px}.button:hover{text-decoration:none;filter:brightness(1.15)}.button-secondary{background:transparent;color:var(--ink);border-color:var(--control)}.button-secondary:hover{background:var(--white)}.bottom-callout{display:flex;gap:27px;align-items:center;background:#e9eddf;border-radius:10px;margin:56px 0;padding:28px}.bottom-callout>span{font-size:29px;white-space:nowrap;letter-spacing:6px}.bottom-callout>div{flex:1}.bottom-callout h2{font-size:18px;letter-spacing:-.5px;margin:0 0 7px}.bottom-callout p{font-size:12px;color:var(--muted);margin:0}.bottom-callout .button{border-color:var(--muted);white-space:nowrap;font-size:11px}.site-footer{border-top:1px solid var(--line);max-width:1280px;padding:34px 48px 25px;margin:0 auto}.footer-top{display:flex;align-items:center;justify-content:space-between;gap:24px}.footer-top .brand{font-size:24px}.footer-top .brand-or{font-size:16px}.footer-top .brand-mark{font-size:26px}.footer-top nav{display:flex;gap:23px;font-size:11px}.footer-bottom{display:flex;justify-content:space-between;gap:20px;font-size:9px;line-height:1.6;color:var(--muted);margin-top:29px;padding-top:21px;border-top:1px solid var(--line)}.page-intro{padding:64px 0 34px;max-width:900px}.page-intro h1,.prose h1,.empty-state h1{font-size:clamp(38px,5vw,58px);letter-spacing:-2.5px;line-height:1.08;margin:0 0 22px}.page-intro>p:last-child{color:var(--muted);font-size:15px;line-height:1.7}.page-intro.compact{padding-bottom:10px}.ranking-section{padding-top:0;padding-bottom:55px}.ranking-tabs{display:flex;border-bottom:1px solid var(--line);gap:32px}.ranking-tabs a{font-size:15px;font-weight:600;padding:17px 0}.ranking-tabs a[aria-current]{border-bottom:3px solid var(--coral)}.ranking-explanation{font-size:12px;line-height:1.7;color:var(--muted);margin:18px 0 27px;max-width:730px}.ranking-section .people-grid{margin-top:27px}.rank-number{position:absolute;z-index:3;top:13px;left:13px;background:var(--white);border-radius:50%;width:30px;height:30px;display:grid;place-items:center;font-size:12px;font-weight:700}.empty-state{text-align:center;padding:60px 20px;border:1px dashed var(--line);border-radius:12px;background:#fffefa50}.empty-state h3{font-size:24px;letter-spacing:-.7px}.empty-state p{color:var(--muted);font-size:14px;line-height:1.7;max-width:520px;margin:0 auto 25px}.empty-icon{color:var(--coral);font-size:48px}.full-empty{margin:55px 0;border:0;background:none;padding:65px 20px 90px}.breadcrumbs{display:flex;gap:13px;font-size:11px;color:var(--muted);padding:32px 0}.person-detail{display:grid;grid-template-columns:1fr 1fr;gap:65px;max-width:1000px;margin:12px auto 55px}.portrait-large{height:270px;border-radius:13px;margin-bottom:28px}.portrait-large .portrait-initials{font-size:110px}.portrait-large:before{width:230px;height:230px;left:calc(50% - 115px);top:30px}.portrait-large:after{width:300px;height:300px;left:calc(50% - 150px);top:-5px}.portrait-large .portrait-symbol{font-size:42px;right:27px;top:19px}.person-profile>.eyebrow{margin:0 0 12px}.person-profile h1{font-size:46px;letter-spacing:-2px;margin:0 0 16px;line-height:1.05;overflow-wrap:break-word;hyphens:auto}.person-bio{font-size:15px;line-height:1.7;color:var(--muted);margin:0 0 16px}.source-link{font-size:11px}.fine-print{font-size:11px;line-height:1.65;color:var(--muted)}.voting-panel{background:var(--white);border:1px solid var(--line);border-radius:14px;padding:32px;align-self:start}.voting-panel h2{font-size:44px;letter-spacing:-2px;margin:0 0 14px}.muted{color:var(--muted);font-size:14px;line-height:1.6}.voting-panel>.results{padding:23px 0}.voting-panel .result-labels{font-size:15px}.voting-panel .vote-meter{height:9px;margin:12px 0}.voting-panel .vote-meter::-webkit-meter-bar{height:9px}.voting-panel .vote-count{font-size:11px}.vote-actions{display:flex;gap:12px}.vote-button{flex:1;font-size:17px;min-height:58px}.vote-button span{font-size:24px}.vote-love{background:#fce3dd;color:#a83626;border-color:#efb8ab}.vote-diss{background:#e5e9fb;color:#344aab;border-color:#c1cafa}.vote-love[aria-pressed=true]{background:#b73b2b;color:var(--white);border-color:#b73b2b;box-shadow:0 0 0 3px #b73b2b25}.vote-diss[aria-pressed=true]{background:var(--blue);color:white;border-color:var(--blue);box-shadow:0 0 0 3px #3f55c625}.consent{display:flex;gap:10px;align-items:start;margin:22px 0;font-size:11px;line-height:1.6;color:var(--muted)}.consent input{margin:3px 0 0;width:17px;height:17px;flex-shrink:0}.consent a,.voting-note a,.prose a,.form-aside a{text-decoration:underline;text-underline-offset:3px}.form-status{font-size:12px;line-height:1.6;min-height:19px;overflow-wrap:anywhere}.form-status[data-state=error]{color:#a52d20}.form-status[data-state=success]{color:#3c6436}.text-button{border:0;background:none;color:var(--muted);font-size:12px;text-decoration:underline;text-underline-offset:4px;padding:9px 0;min-height:44px}.voting-note{border-top:1px solid var(--line);padding-top:18px;margin-top:18px;display:flex;gap:10px;color:var(--muted);font-size:11px;line-height:1.65}.voting-note p{margin:0}.detail-footer{border-top:1px solid var(--line);padding:24px 0 40px;display:flex;align-items:center;justify-content:space-between;gap:20px;color:var(--muted);font-size:12px}.form-layout{display:grid;grid-template-columns:1.25fr 1fr;gap:75px;max-width:1000px;padding-bottom:65px}.form-panel{border:1px solid var(--line);border-radius:12px;background:var(--white);padding:30px;display:flex;flex-direction:column;align-items:stretch}.form-panel>label:not(.consent):not(.checkbox-row){font-size:12px;font-weight:600;margin:18px 0 9px}.form-panel>label:first-child{margin-top:0!important}.optional{font-size:11px;font-weight:400;color:var(--muted)}.form-panel input:not([type=checkbox]),.form-panel textarea,.form-panel select{background:var(--paper);border:1px solid var(--control);border-radius:5px;padding:12px;font-size:14px;color:var(--ink);width:100%;min-width:0}.form-panel textarea{resize:vertical;line-height:1.6}.form-panel>.button{align-self:start;margin-top:6px}.form-aside{padding-top:20px}.aside-symbol{color:var(--coral);font-size:65px}.form-aside h2{font-size:30px;letter-spacing:-1px;max-width:320px}.form-aside p{color:var(--muted);line-height:1.8;font-size:13px}.prose{max-width:740px;margin:64px auto 75px}.prose .lead{font-size:20px;line-height:1.6;color:var(--muted);margin:25px 0}.prose h2{font-size:24px;letter-spacing:-.6px;margin:36px 0 16px}.prose p{font-size:14px;line-height:1.9}.prose .fine-print{font-size:11px}.narrow{max-width:460px;margin:15px 0 60px}.form-panel h2,.form-panel h3{margin:0 0 15px;letter-spacing:-.6px}.admin-toolbar{display:flex;align-items:center;justify-content:space-between;margin:20px 0}.admin-columns{display:grid;grid-template-columns:1fr 1fr;gap:35px}.checkbox-row{display:flex;align-items:center;gap:9px;font-size:13px;margin-top:16px}.checkbox-row input{width:17px;height:17px}.form-buttons{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap}.admin-list{display:grid;gap:10px}.admin-item{background:var(--white);border:1px solid var(--line);border-radius:7px;padding:17px;display:flex;align-items:center;gap:15px;justify-content:space-between}.admin-item h4{margin:0 0 7px;font-size:14px}.admin-item p{font-size:11px;color:var(--muted);line-height:1.7;margin:0;overflow-wrap:anywhere;white-space:pre-wrap}.admin-item .button{font-size:11px;padding:9px 13px;min-height:36px;flex-shrink:0}.reports-section{margin:40px 0 55px}.report-item{align-items:start}.report-item>div{min-width:0}.report-item p{margin-bottom:9px}.report-item .report-message{font-size:13px;color:var(--ink)}
@media(min-width:1400px){.hero h1{font-size:70px}.hero-art{margin-right:20px}.love-note{left:13%}.diss-note{right:3%}}@media(max-width:1050px){.header-inner,.page-container,.site-footer{padding-left:30px;padding-right:30px}.hero{gap:15px}.hero h1{font-size:55px}.opinion-note{width:170px;height:225px;padding:22px}.opinion-note strong{font-size:56px}.love-note{left:4%;top:16px}.diss-note{right:2%;top:53px}.art-star{left:21%;bottom:9px}.people-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.footer-top{flex-wrap:wrap}.person-detail{gap:30px}.voting-panel{padding:25px}.form-layout{gap:40px}}@media(max-width:760px){.hero{grid-template-columns:1fr;position:relative;padding:44px 0 36px;min-height:0}.hero h1{font-size:60px;max-width:580px}.hero-art{display:none}.hero-description{font-size:14px}.manifesto-strip{font-size:10px;gap:15px;line-height:1.6}.manifesto-strip span:nth-child(2){display:none}.catalog-section{padding-top:35px}.people-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.section-heading h2{font-size:25px}.section-heading>.text-link{font-size:11px;gap:7px}.bottom-callout{padding:24px;gap:17px;flex-wrap:wrap}.bottom-callout>span{font-size:23px}.bottom-callout>.button{margin-left:65px}.footer-top nav{gap:17px}.person-detail{grid-template-columns:1fr;max-width:540px;margin-top:0;gap:25px}.portrait-large{height:250px}.person-profile h1{font-size:40px}.person-detail .voting-panel{padding:28px}.detail-footer{align-items:start;font-size:11px}.detail-footer a{font-size:11px;white-space:nowrap}.form-layout,.admin-columns{grid-template-columns:1fr;gap:20px}.form-aside{padding:0}.page-intro{padding-top:45px}.prose{margin:45px auto}.footer-bottom{font-size:8px}.ranking-tabs{gap:27px}.ranking-tabs a{font-size:13px}}@media(max-width:480px){.header-inner,.page-container,.site-footer{padding-left:20px;padding-right:20px}.header-inner{padding-top:20px;padding-bottom:20px;gap:16px}.brand{font-size:26px}.brand-or{font-size:17px;margin:0 5px}.brand-mark{font-size:27px;margin-left:5px}.main-nav{gap:16px;font-size:11px}.beta-badge{display:none}.hero h1{font-size:49px;letter-spacing:-2.8px}.eyebrow{font-size:8px;letter-spacing:1.3px}.hero-description br{display:none}.hero-description{max-width:300px}.section-heading{align-items:start;gap:12px;margin-bottom:22px}.section-heading h2{font-size:23px;max-width:190px}.section-heading>.text-link{max-width:90px;text-align:right;line-height:1.6}.search-form{gap:8px;padding-left:12px}.search-form button{padding:12px 14px}.search-form button span{display:none}.category-tabs{gap:7px;margin-top:16px}.category-tabs a{font-size:10px;padding:9px 12px}.category-tabs a span{margin-right:0}.results-heading{font-size:10px;gap:12px;align-items:start;line-height:1.5}.results-heading>span{white-space:nowrap}.people-grid{gap:12px}.portrait{height:140px}.portrait-initials{font-size:53px}.portrait-creators .portrait-initials{font-size:50px}.portrait-symbol{font-size:18px;right:11px;top:11px}.portrait:before{width:110px;height:110px;left:calc(50% - 55px);top:18px}.portrait:after{width:165px;height:165px;left:calc(50% - 82px);top:-8px}.card-body{padding:14px 12px 0}.card-body h3{font-size:16px;min-height:38px;letter-spacing:-.5px}.card-body .eyebrow{font-size:7px}.card-description{font-size:10px;min-height:30px}.results{padding:14px 12px}.result-labels{font-size:9px}.vote-count{font-size:8px}.card-vote-link{padding:12px;font-size:9px}.bottom-callout{margin:35px 0;padding:21px 18px}.bottom-callout>span{display:none}.bottom-callout h2{font-size:17px;line-height:1.4}.bottom-callout p{font-size:11px;line-height:1.6}.bottom-callout>.button{margin:0}.footer-top{gap:20px}.footer-top nav{width:100%;justify-content:space-between;gap:10px;font-size:10px}.footer-bottom{flex-direction:column;gap:8px;margin-top:23px;padding-top:18px}.page-intro h1,.prose h1,.empty-state h1{font-size:40px;letter-spacing:-1.7px}.page-intro>p:last-child{font-size:13px}.ranking-tabs{gap:23px}.ranking-tabs a{font-size:12px}.ranking-explanation{font-size:11px}.ranking-section .people-grid{margin-top:20px}.portrait-large{height:230px}.portrait-large .portrait-initials{font-size:90px}.portrait-large:before{width:195px;height:195px;left:calc(50% - 97px);top:24px}.portrait-large:after{width:255px;height:255px;left:calc(50% - 127px);top:-6px}.person-detail .voting-panel{padding:23px}.voting-panel h2{font-size:40px}.person-profile h1{font-size:37px}.form-panel{padding:22px}.form-panel .consent{font-size:10px}.consent{margin:8px 0;line-height:1.5}.vote-actions{gap:8px}body[data-page="person"] .breadcrumbs{padding:16px 0}.person-detail .voting-panel>.results{padding:12px 0}.prose .lead{font-size:18px}.prose p{font-size:13px}.prose h2{font-size:22px}.pagination{font-size:10px;gap:7px}.pagination .button{font-size:10px;padding:10px 12px}.admin-toolbar h2{font-size:20px}.admin-item{gap:10px;padding:13px}.report-item{flex-direction:column}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}}
.report-filter{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted)}.report-filter select{padding:9px;border:1px solid var(--control);border-radius:5px;background:var(--white);color:var(--ink);font:inherit}@media(max-width:480px){.reports-section .admin-toolbar{align-items:start;flex-direction:column;gap:10px}.reports-section .admin-toolbar h2{margin-bottom:0}}
.portrait-fallback{display:contents}
.portrait.has-image .portrait-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 25%;z-index:2;background:transparent}
.portrait.has-image.image-failed .portrait-image{display:none}
.portrait-credit{position:absolute;z-index:3;top:12px;left:12px;font-size:9px;font-weight:750;letter-spacing:1.2px;text-transform:uppercase;padding:4px 8px;border-radius:999px;background:#20241ecc;color:#fff;text-decoration:none}
.portrait-credit:hover,.portrait-credit:focus-visible{background:#20241e;text-decoration:underline}
.person-profile{position:relative}
.person-profile .portrait-credit{top:16px;left:16px}
/* CAT-F18: /image-credits renders full Wikimedia Commons URLs as link text. Unbroken URLs cannot wrap, so at 390px they
pushed document.scrollWidth past the viewport. Allow breaks inside credit text and links instead of clipping or scrolling. */
.image-credits .prose{min-width:0}.image-credits .prose p{overflow-wrap:anywhere;word-break:break-word}.image-credits .prose a{overflow-wrap:anywhere;word-break:break-word}
/* CAT-F18: at 320px the shared header (brand + three nav links) is wider than the 280px content box, which also fails
the credits mobile check. Let the header wrap below 360px; desktop and 390px layouts are unchanged. */
@media(max-width:360px){.header-inner{flex-wrap:wrap;gap:8px 12px}.main-nav{gap:14px}}
/* EF133 followup: wrap from used width, not a listed media max. Independent
review: @media(max-width:400px) left 401 CSS zoom 2 at document 401/566
(Discover clipped, Rankings gone) and 500 zoom 2 at 500/743. Flex wrap on
the existing header-inner row stacks brand and nav when min-content does
not fit, and stays one row on ordinary desktop. Links stay whole nowrap
words. The 360 CAT-F18 blocks below stay byte-identical. */
.site-header .header-inner{flex-wrap:wrap;min-width:0;max-width:100%}
.site-header .main-nav{flex-wrap:wrap;min-width:0;max-width:100%}
.site-header .header-inner .main-nav a{flex:0 1 auto;min-width:min-content;max-width:100%;white-space:nowrap}
/* CAT-F24: the detail frame was 270px tall and column-wide with object-fit cover, which cropped the chin from the accepted
640x640 headshots. When a real image is present, give the large frame the source's 1:1 aspect (capped at 320px so the
profile column stays compact) and show the whole square with contain. Initials-only frames and catalog cards keep the
existing layout, and the mobile height overrides below 760px/480px are neutralised by height:auto here. */
.portrait-large.has-image{height:auto;aspect-ratio:1/1;width:100%;max-width:320px}
.portrait-large.has-image .portrait-image{object-fit:contain;object-position:50% 50%}
/* S03: the suggestion list is an optional layer over the existing GET search form. */
.search-form{position:relative;z-index:4}
.search-field{flex:1;min-width:0}
.search-field input{width:100%}
.search-suggestions{position:absolute;z-index:20;top:calc(100% + 8px);left:0;right:0;padding:6px;background:var(--white);border:1px solid var(--control);border-radius:8px;box-shadow:0 10px 25px #20241e18;max-height:280px;overflow:auto}
.search-suggestion{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 11px;border-radius:5px;font-size:13px}
.search-suggestion:hover,.search-suggestion[aria-selected=true]{background:var(--paper);text-decoration:none}
.search-suggestion-identity{display:grid;gap:3px;min-width:0}
.search-suggestion-name{font-weight:650;overflow-wrap:anywhere}
.search-suggestion-note{color:var(--muted);font-size:12px;line-height:1.4;overflow-wrap:anywhere}
.search-suggestion-category{color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:1px;white-space:nowrap}
.search-suggestion-empty{padding:12px 11px;color:var(--muted);font-size:12px;line-height:1.5}
@media(max-width:480px){.search-suggestion{padding:11px 9px}}
/* EF05: the quiet surface removes duplicated promotion while preserving the catalog and its controls. */
body[data-quiet-ui="true"] .quiet-hero{grid-template-columns:1fr;min-height:0;padding:28px 0 0}
/* EF113: the quiet hero is the masthead alone (eyebrow + h1). The description and the "Find your people"
link were removed with the rest of the explanatory copy; the catalog itself is the invitation. */
body[data-quiet-ui="true"] .quiet-hero .hero-art{display:none}
/* EF42 (superseded by EF49 below): after EF20 raised category tabs to 44px, the first portrait dropped
below the 390x844 fold (865.4); tightening the quiet hero padding and results-heading margin brought
the portrait back (828.4) but not the name (898) or the vote link (1024). */
/* EF49: on phones the first person (portrait, name, vote link) must sit inside the initial viewport
(390x844; 375x667 reaches the name). Spacing alone could not do it (EF42: name 898, vote link 1024),
so the quiet home is re-flowed at <=480px without hiding or rewording anything:
- masthead: shorter h1 and tighter rhythm;
- the hero sub-copy and the results caption move below the people grid (flex order; DOM order and
the desktop layout are unchanged);
- section heading in one line; tabs keep min-height 44px and still wrap so every tab stays visible. */
@media(max-width:480px){
body[data-quiet-ui="true"][data-page="home"] .page-container{display:flex;flex-direction:column}
body[data-quiet-ui="true"] .quiet-hero{padding:12px 0 0}
body[data-quiet-ui="true"] .quiet-hero .eyebrow{margin-bottom:8px}
body[data-quiet-ui="true"] .quiet-hero h1{font-size:40px;letter-spacing:-2.2px;margin-bottom:8px}
body[data-quiet-ui="true"] #explore{display:flex;flex-direction:column;padding-top:12px}
body[data-quiet-ui="true"] #explore .section-heading{margin-bottom:12px}
body[data-quiet-ui="true"] #explore .section-heading h2{font-size:20px;max-width:none}
body[data-quiet-ui="true"] #explore .category-tabs{margin-top:12px}
body[data-quiet-ui="true"] #explore .results-heading{order:1;margin:12px 0 0}
body[data-quiet-ui="true"] #explore .pagination{order:2}
}
/* EF61: at <=400px (375x667 iPhone SE class) the first person's vote link (home) and the consent row plus
both vote buttons (person page) must sit inside the initial viewport. EF49/EF59 exhausted hero, tab and
panel spacing; the remaining height is the header, the catalog card and the profile block. Nothing is
hidden or reworded, text stays at its <=480px sizes, tap targets stay >=44px (vote link 44, buttons 60).
- header: 8px vertical padding instead of 20px (all pages, 44px tall);
- catalog card: 92px landscape portrait instead of 140px, tighter body/results padding and leading,
name min-height back to the desktop value (none) so a one-line name has 20px+ of fold spare and a
two-line name still fits at 375x667;
- person profile: a 7rem square portrait floated beside the category/name/fine print (DOM order
unchanged). The image-credit pill (up to 136px wide, wider than the portrait) and the gallery
"View gallery" button float under the portrait in the same left column (the pill is sized to the
column, letter-spacing 0, so the text beside the floats keeps one left edge) instead of over the
small image. The text blocks are flow-roots with min-width min(9rem,100%): beside the portrait when at
least 9rem is free (320px and up), below all the floats when it is not (320px at zoom 200% =
120px content; person.css cannot carry @container rules and media queries do not see root zoom),
so the name is never squeezed to zero width and nothing overflows horizontally;
breadcrumb, profile/panel gap and panel padding tightened.
EF71/EF75: .header-inner .main-nav a hit box is >=44px via min-height + matching
negative margin so the header band stays the v2.4.2 height (quiet 32px
footprint uses padding 6px / margin -6px). row-gap 17px lets two 44px wrap
rows touch without overlap; public COMMUNITY=1 compensation lives in
community.css. .ranking-tabs wrap so 320 CSS-zoom 200% does not pan.
EF93: .header-inner .brand hit box is >=44px. Desktop 34px footprint uses
margin -5px. ≤480px (31px logo) uses margin -6.5px so the 401–480 band
stays 73. flex-shrink:0 keeps content width (min-width:44px would crush
the flex item). Wrap (≤360) shifts extra hit area upward so the box does
not overlap the nav row. Public 26px compensation lives in community.css. */
.header-inner .brand{min-height:44px;flex-shrink:0;margin-top:-5px;margin-bottom:-5px}
@media(max-width:480px){.header-inner .brand{margin:-6.5px 0}}
@media(max-width:400px){
.header-inner{padding-top:8px;padding-bottom:8px}
.header-inner .main-nav{row-gap:17px}
.header-inner .main-nav a{display:inline-flex;align-items:center;min-height:44px;padding-top:6px;padding-bottom:6px;margin-top:-6px;margin-bottom:-6px}
.header-inner .brand{margin-top:-6.5px;margin-bottom:-6.5px}
.ranking-tabs{flex-wrap:wrap;max-width:100%}
.person-card .portrait{height:92px}
.person-card .card-body{padding:8px 12px 0}
.person-card .card-body .eyebrow{margin-bottom:4px;line-height:1.3}
.person-card .card-body h3{margin-bottom:4px;min-height:0;line-height:1.15}
.person-card .results{padding:8px 12px}
.person-card .result-labels{line-height:1.4}
.person-card .vote-meter{margin:6px 0}
.person-card .vote-count{line-height:1.3}
body[data-page="person"] .breadcrumbs{padding:10px 0}
.person-profile{display:flow-root}
.person-profile>.portrait-large{float:left;width:7rem;height:7rem;max-width:7rem;margin:0 12px 8px 0}
.person-profile>.portrait-credit{position:static;float:left;clear:left;width:7rem;max-width:100%;padding:4px;text-align:center;letter-spacing:0;white-space:nowrap;margin:0 12px 8px 0}
.person-profile>.person-gallery{float:left;clear:left;width:7rem;margin:0 12px 8px 0}
.person-profile .person-gallery-open{margin:0}
.person-profile>.eyebrow,.person-profile h1,.person-profile .disambiguation{display:flow-root;min-width:min(9rem,100%);overflow-wrap:anywhere}
.person-profile .portrait-large .portrait-initials{font-size:44px;letter-spacing:-4px;transform:translate(-2px,-2px)}
.person-profile .portrait-large:before{width:88px;height:88px;left:calc(50% - 44px);top:12px}
.person-profile .portrait-large:after{width:124px;height:124px;left:calc(50% - 62px);top:-6px}
.person-profile .portrait-large .portrait-symbol{font-size:18px;right:8px;top:6px}
.person-profile .portrait-large .portrait-orbit{width:84px;height:84px;border-width:10px;bottom:-33px;right:-23px}
.person-profile>.eyebrow{margin-bottom:8px}
.person-profile h1{font-size:30px;letter-spacing:-1.4px;margin-bottom:8px;overflow-wrap:break-word;hyphens:auto}
.person-detail{gap:16px}
.person-detail .voting-panel{padding:16px}
}
@media(max-width:360px){
.header-inner .brand{padding-top:11.5px;padding-bottom:1.5px;margin-top:-11.5px;margin-bottom:-1.5px}
}
body[data-quiet-ui="true"] .catalog-section{padding-top:28px}
body[data-quiet-ui="true"] .quiet-voting-panel{padding-top:25px}
body[data-quiet-ui="true"] .ranking-explanation-details{display:block;margin:12px 0 20px;padding:0;color:var(--muted)}
body[data-quiet-ui="true"] .ranking-explanation-details summary{cursor:pointer;min-height:44px;display:flex;align-items:center;color:var(--ink);font-weight:650}
body[data-quiet-ui="true"] .ranking-explanation-details p{margin:0 0 8px;line-height:1.7}
.version-note{margin:0 auto 55px;max-width:740px}
/* SH02: latest ranking snapshots are a bounded, public home-page surface. */
.growth-share-recent{padding-top:32px;padding-bottom:20px}
.growth-share-recent-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.growth-share-recent-card{border:1px solid var(--line);border-radius:14px;padding:18px;background:var(--white)}
.growth-share-recent-card h3{margin:7px 0;font-size:1.15rem;line-height:1.25}
.growth-share-recent-card h3 a{color:var(--ink);text-decoration:none}
.growth-share-recent-card h3 a:hover{text-decoration:underline}
.growth-share-recent-card p:not(.eyebrow){margin:0 0 14px;color:var(--muted);font-size:.9rem}
@media(max-width:700px){.growth-share-recent-list{grid-template-columns:1fr}}
/* Keep recovery choices distinct when they wrap on narrow screens. */
.empty-state-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
/* EF20: measured 320px gaps. Keep names wrapping, primary taps at 44px, and card
focus rings inside overflow:hidden so rounded portraits stay clipped. Credits stay compact. */
.card-body,.card-link,.person-card,.person-profile,.voting-panel,.vote-actions,.page-container{min-width:0}
.page-container{container-type:inline-size;container-name:lod-main}
.card-body h3{overflow-wrap:break-word}
.search-form button{min-height:44px;min-width:44px}
.category-tabs a{display:inline-flex;align-items:center;min-height:44px}
.card-vote-link{min-height:44px;align-items:center}
.button{min-height:44px}
#report-form button[type="submit"]{min-height:44px;min-width:44px}
.person-card .card-link:focus-visible,.person-card .card-vote-link:focus-visible{outline-offset:-4px}
.consent{min-height:44px;align-items:center}
.hero,.hero>div,.quiet-hero,.catalog-section,.section-heading,.manifesto-strip,.bottom-callout{min-width:0;max-width:100%}
.hero h1,.hero-description,.eyebrow,.coral-dot{min-width:0;max-width:100%;overflow-wrap:break-word}
.manifesto-strip{flex-wrap:wrap}
.manifesto-strip span,.manifesto-strip a,.bottom-callout,.bottom-callout p,.bottom-callout h2{min-width:0;overflow-wrap:anywhere}
.section-heading{flex-wrap:wrap;min-width:0}
.section-heading>.text-link,.text-link{min-width:0;max-width:100%;flex-wrap:wrap}
.bottom-callout .button{white-space:normal;max-width:100%}
@media(max-width:760px){
.vote-actions{flex-direction:column;align-items:stretch;width:100%;min-width:0}
.vote-button{width:100%;min-width:0;flex:none}
.detail-footer,.detail-footer-links,.footer-top nav{min-width:0;max-width:100%}
.detail-footer{flex-wrap:wrap}
.detail-footer a{white-space:normal;overflow-wrap:anywhere}
.footer-top nav{flex-wrap:wrap}
}
@media(max-width:360px){
.header-inner,.main-nav{min-width:0;width:100%}
.main-nav{flex-wrap:wrap}
.main-nav a{flex:1 1 40%;min-width:0}
}
@media(max-width:480px){.people-grid{grid-template-columns:repeat(auto-fit,minmax(8rem,1fr))}}
@container lod-main (max-width:240px){
.people-grid{grid-template-columns:minmax(0,1fr)}
.hero h1{font-size:28px;letter-spacing:-1px}
.hero-description{font-size:14px}
}
/* EF130: photo-less initials. Measured, not adjusted. A portrait without a photo paints the category
pair (.portrait-actors/-musicians/-athletes/-creators background and color) and then three decorative
layers in that same currentColor: the two 1px rings on .portrait:before/:after at opacity .16/.12 and
the .portrait-orbit band at .06. Those layers sit under .portrait-initials, so the background the text
is actually painted on is darker than the declared pair, and where the two rings cross it is darkest.
Walking the real 94-person catalog at 320/375/390/1440 on both the catalog card and the profile
(752 initials measurements, e2e/initials-contrast.spec.js) the declared pair is 4.61:1 at worst
(creators), the worst pixel under the glyph is 3.52:1, and the worst pixel anywhere in the frame is
3.51:1 - all above the 3:1 bar for this large text, so no colour, opacity or geometry here was
changed. The margin is ~17%: raising a ring opacity, adding a fourth layer in currentColor, or
lightening a category color spends it. The same walk holds the category label beside those initials
to the same bar (752 more measurements): var(--muted) on the card at 5.32:1, var(--ink) on the
profile at 14.45:1. Re-run that config after touching any of them, or --muted. */
/* EF133: the vote panel's two text buttons are siblings with no separating whitespace in the markup
(``),
and .text-button has no horizontal padding, so their 44px boxes met at exactly 0px and the labels
rendered as one continuous underlined phrase - "Check againRemove my vote" - measured at 320, 390
and 1440 (v2.5.2 drill shots/m390-08-remove-offline-unconfirmed.png, drill-proof section 4 Should 1).
That only happens in the one state where the write could not be confirmed, which is exactly where a
mis-tap re-sends a vote change instead of re-reading it. Both actions and both labels stay; each one
gets its own row and its own box. Stacking (not a horizontal gap) is what survives 200% zoom, where
320px leaves ~74px of panel content and the two labels wrap anyway. The negative left margin cancels
the new left padding so the labels keep the one left edge they share with the status line above,
and min-height:44px from .text-button still sets the target height. */
.voting-panel .text-button{display:flex;align-items:center;width:fit-content;max-width:100%;padding:9px 12px;margin:10px 0 0 -12px}
/* EF135: prefers-reduced-motion already removes every transition and animation on line 3, so the
catalog card lift stops being animated - but it does not stop. .person-card:hover still applies
transform:translateY(-3px), which under reduce is a discrete 3px jump fired every time the pointer
crosses a card; at 1440 a single pass over the grid of four columns moves the page several times.
Measured in chromium at 1280x900 on / before this rule: computed transform was matrix(1,0,0,1,0,-3)
under both no-preference and reduce. Drop the movement and keep the hover shadow, which is what
actually reports "this card is the one under the pointer". Nothing automatic is affected, and the
un-hovered card is unchanged in both media states. */
@media(prefers-reduced-motion:reduce){.person-card:hover{transform:none!important}}
/* EF128: person-page canonical URL fallback. Exact class so generated person.css
keeps full-width wrap; do not put .form-panel on the keep list. */
.person-copy-url{display:block;box-sizing:border-box;width:100%;max-width:100%;min-width:0;min-height:92px;margin:8px 0 12px;padding:12px;border:1px solid var(--control);border-radius:5px;background:var(--paper);color:var(--ink);font:inherit;font-size:14px;line-height:1.6;overflow-wrap:anywhere;resize:vertical}
/* EF126: the actual sample size is a primary value on the ranking surface. */
.ranking-section .person-card .vote-count {
font-size: 14px;
font-weight: 600;
color: var(--ink);
overflow-wrap: anywhere;
}