: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}.eyebrow{font-size:10px;font-weight:750;letter-spacing:1.65px;line-height:1.5;margin:0 0 19px}.serif{font-family:Georgia,'Times New Roman',serif;font-style:italic;font-weight:400;letter-spacing:-.045em}.text-link{display:inline-flex;align-items:center;gap:16px;font-size:13px;font-weight:650;line-height:1.5}.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}.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 .eyebrow{font-size:8px;letter-spacing:1.3px;margin:0 0 7px;color:var(--muted)}.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}.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 .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)}.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}.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{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-panel>.button{align-self:start;margin-top:6px}.prose .fine-print{font-size:11px}.form-buttons{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap}.admin-item .button{font-size:11px;padding:9px 13px;min-height:36px;flex-shrink:0}@media(max-width:1050px){.header-inner,.page-container,.site-footer{padding-left:30px;padding-right:30px}.footer-top{flex-wrap:wrap}.person-detail{gap:30px}.voting-panel{padding:25px}}@media(max-width:760px){.section-heading h2{font-size:25px}.section-heading>.text-link{font-size:11px;gap:7px}.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}.footer-bottom{font-size:8px}}@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}.eyebrow{font-size:8px;letter-spacing:1.3px}.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}.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 .eyebrow{font-size:7px}.results{padding:14px 12px}.result-labels{font-size:9px}.vote-count{font-size:8px}.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}.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 .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}.pagination .button{font-size:10px;padding:10px 12px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}}.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: 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%}/* 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}.person-card .portrait{height:92px}.person-card .card-body .eyebrow{margin-bottom:4px;line-height:1.3}.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"] .quiet-voting-panel{padding-top:25px}/* 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. */.person-profile,.voting-panel,.vote-actions,.page-container{min-width:0}.page-container{container-type:inline-size;container-name:lod-main}.button{min-height:44px}.person-card .card-link:focus-visible,.person-card .card-vote-link:focus-visible{outline-offset:-4px}.consent{min-height:44px;align-items:center}.section-heading{min-width:0;max-width:100%}.eyebrow{min-width:0;max-width:100%;overflow-wrap:break-word}.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}}/* 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}/* 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;
}