:root{color-scheme:dark;--ink:#f3f3f1;--grey:#909090;--bg:#000;--ui:'IBM Plex Mono',ui-monospace,Consolas,monospace;--hi:#e4ff1a;--head-bg:#d9d9d5;--head-ink:#111;--head-dim:#55554f;--head-line:transparent;--head-rule:#1c1c1c;--head:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;font-family:var(--ui);background:#000;color:var(--ink)}
*,*::before,*::after{box-sizing:border-box}body{margin:0;background:#000;color:var(--ink);font-family:var(--ui);overscroll-behavior-y:contain}button,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,a:focus-visible{outline:2px solid #ddd;outline-offset:4px}a{color:inherit}button{border:0;border-radius:0}
.top{position:fixed;z-index:12;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:flex-start;gap:24px;min-height:70px;padding:17px clamp(14px,2.8vw,40px);background:linear-gradient(180deg,rgba(0,0,0,.96),rgba(0,0,0,0));pointer-events:none}
.name{font-size:13px;font-weight:600;line-height:1.5;letter-spacing:-.045em;pointer-events:auto}.name small{display:block;font-size:11px;font-weight:400;color:#bbb}.status{font-size:10px;color:#888;line-height:1.7;letter-spacing:.04em;text-transform:uppercase;text-align:right;max-width:240px}
/* The grid becomes more generous as the score cutoff admits fewer families. */
.grid{--cols:5;--row:clamp(142px,19vh,230px);--space:0px;--pad:clamp(6px,1.2vw,18px);--type:clamp(21px,3.05vw,58px);display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));grid-auto-rows:var(--row);align-content:start;min-height:100dvh;padding:82px clamp(4px,.8vw,18px) 195px;gap:var(--space)}
.grid[data-density="packed"]{--cols:9;--row:118px;--space:0px;--pad:9px;--type:clamp(18px,1.8vw,29px)}
.grid[data-density="dense"]{--cols:8;--row:135px;--space:0px;--pad:11px;--type:clamp(20px,2.05vw,32px)}
.grid[data-density="compact"]{--cols:7;--row:156px;--space:2px;--pad:12px;--type:clamp(22px,2.5vw,37px)}
.grid[data-density="regular"]{--cols:6;--row:182px;--space:3px;--pad:14px;--type:clamp(26px,2.95vw,45px)}
.grid[data-density="open"]{--cols:5;--row:218px;--space:7px;--pad:17px;--type:clamp(28px,2.9vw,46px)}
.grid[data-density="airy"]{--cols:5;--row:264px;--space:11px;--pad:21px;--type:clamp(30px,3.1vw,49px)}
.grid[data-density="showcase"]{--cols:5;--row:340px;--space:18px;--pad:25px;--type:clamp(32px,3.35vw,54px)}
.specimen{color:var(--ink);background:#000;padding:var(--pad);text-align:left;display:flex;min-width:0;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden;outline:none;border:none;border-radius:0;content-visibility:auto;contain-intrinsic-size:auto var(--row)}
.specimen[hidden]{display:none!important}
.specimen:hover,.specimen:focus-visible{background:#191919}
.phrase{font-size:var(--type);font-weight:400;line-height:1.07;letter-spacing:-.035em;min-width:0;display:flex;flex-direction:column;justify-content:center;white-space:nowrap;flex:1;overflow:hidden}
.phrase span{display:block;overflow:hidden;text-overflow:clip}
.meta{font-family:var(--ui);font-size:10px;line-height:1.4;color:#858585;display:flex;align-items:baseline;justify-content:space-between;gap:6px;letter-spacing:0;min-height:13px}
.meta .family{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;min-width:0}
.meta .score{flex-shrink:0;font-variant-numeric:tabular-nums}
#empty{position:fixed;top:43%;left:50%;transform:translate(-50%,-50%);text-align:center;font-size:12px;color:#ddd;max-width:300px}#empty[hidden]{display:none!important}
.control{position:fixed;z-index:16;left:50%;bottom:clamp(10px,2.5vw,26px);transform:translateX(-50%);width:min(740px,calc(100vw - 24px));padding:20px clamp(16px,3.3vw,31px) 17px;background:rgba(24,24,24,.8);backdrop-filter:blur(19px);-webkit-backdrop-filter:blur(19px);border:0;border-radius:0}
.line{display:flex;justify-content:space-between;align-items:start;gap:20px}.label{font-size:11px;letter-spacing:.04em;font-weight:600}.explain{font-size:10px;color:#9b9b9b;margin-top:7px}.value{font-size:clamp(36px,5vw,60px);font-weight:500;line-height:1;letter-spacing:-.07em;min-width:2ch;text-align:right;font-variant-numeric:tabular-nums}
#threshold{display:block;margin:18px 0 5px;width:100%;height:34px;background:none;appearance:none;-webkit-appearance:none;cursor:ew-resize;touch-action:none}
#threshold::-webkit-slider-runnable-track{height:2px;background:linear-gradient(90deg,#505050 0%,#505050 var(--pct,49%),#eee var(--pct,49%),#eee 100%)}
#threshold::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:24px;height:30px;border-radius:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 30'%3E%3Cpath d='M12 .6 21.4 9.9H2.6Z' fill='%23e4ff1a'/%3E%3Crect x='2.6' y='12.9' width='18.8' height='4.2' fill='%23e4ff1a'/%3E%3C/svg%3E") center/24px 30px no-repeat;margin-top:-14px;border:0;cursor:grab}
#threshold:active::-webkit-slider-thumb{cursor:grabbing}
#threshold:focus-visible{outline:none}
#threshold:hover::-webkit-slider-thumb{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 30'%3E%3Cpath d='M12 .6 21.4 9.9H2.6Z' fill='%23e4ff1a' stroke='%23f3f3f1' stroke-opacity='.75' stroke-width='1.1' stroke-linejoin='round' paint-order='stroke'/%3E%3Crect x='2.6' y='12.9' width='18.8' height='4.2' fill='%23e4ff1a' stroke='%23f3f3f1' stroke-opacity='.75' stroke-width='1.1' stroke-linejoin='round' paint-order='stroke'/%3E%3C/svg%3E")}
#threshold:hover::-moz-range-thumb{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 30'%3E%3Cpath d='M12 .6 21.4 9.9H2.6Z' fill='%23e4ff1a' stroke='%23f3f3f1' stroke-opacity='.75' stroke-width='1.1' stroke-linejoin='round' paint-order='stroke'/%3E%3Crect x='2.6' y='12.9' width='18.8' height='4.2' fill='%23e4ff1a' stroke='%23f3f3f1' stroke-opacity='.75' stroke-width='1.1' stroke-linejoin='round' paint-order='stroke'/%3E%3C/svg%3E")}
.control:has(#threshold:focus-visible) #score{text-decoration:underline;text-decoration-color:var(--hi);text-decoration-thickness:2px;text-underline-offset:6px}
#threshold::-moz-range-track{height:2px;background:#eee}#threshold::-moz-range-progress{height:2px;background:#505050}#threshold::-moz-range-thumb{width:24px;height:30px;border:0;border-radius:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 30'%3E%3Cpath d='M12 .6 21.4 9.9H2.6Z' fill='%23e4ff1a'/%3E%3Crect x='2.6' y='12.9' width='18.8' height='4.2' fill='%23e4ff1a'/%3E%3C/svg%3E") center/24px 30px no-repeat transparent;cursor:grab}
.endpoints,.control-foot{display:flex;justify-content:space-between;gap:15px;align-items:baseline}.endpoints{color:#999;font-size:10px}.control-foot{font-size:10px;color:#aaa;margin-top:13px;flex-wrap:wrap}.control-foot strong{font-weight:600;color:#fff;font-variant-numeric:tabular-nums}.text-button{font-size:10px;background:none;color:#bebebe;padding:0;text-decoration:underline;text-underline-offset:3px}
/* Admission scale: provenance, data-derived milestones, and their readout. */
.score-help{display:inline-block;position:relative;margin-top:9px}
.score-help summary{display:inline-block;list-style:none;cursor:pointer;color:#bcbcbc;font-size:10px;line-height:1.5;text-decoration:underline;text-underline-offset:3px}
.score-help summary::-webkit-details-marker{display:none}.score-help summary::after{content:' ↗';text-decoration:none}.score-help[open] summary{color:#fff}
.score-help summary:focus-visible,.count-mode button:focus-visible{outline:1px solid #fff;outline-offset:3px}
.score-help-card{position:absolute;z-index:21;bottom:calc(100% + 14px);left:0;width:min(430px,calc(100vw - 60px));padding:26px 24px 23px;background:#282828;border:0;box-shadow:0 20px 65px rgba(0,0,0,.88),0 4px 14px rgba(0,0,0,.55);font-size:11px;line-height:1.6;color:#d5d5d5}
.score-help-card strong{color:#fff}.score-help-card p{margin:0 0 10px}.score-help-card p:last-of-type{margin-bottom:0}.score-help-card a{color:#fff;text-underline-offset:3px}
.score-help-card small{display:block;font-size:10px;color:#aaa;margin-top:13px}
.scale{margin-top:14px}#threshold{margin:0;width:100%}
/* V17: the distribution of Business scores sits directly above the slider.
   Bar v is centered over slider value v (the 24px handle leaves 12px at each end). */
.dist{position:relative;height:52px;user-select:none;-webkit-user-select:none;touch-action:pan-y}
.dist svg{display:block;width:100%;height:100%;overflow:visible;cursor:pointer}
.dist svg *{pointer-events:none} /* bars are redrawn on hover; keep the svg itself as the pointer target */
.dist .bar{fill:#474747;shape-rendering:crispEdges}
.dist .bar.in{fill:#e8e8e6}
.dist[data-mode="designs"] .bar.s{fill:#2f2f2f}
.dist[data-mode="designs"] .bar.s.in{fill:#868686}
.dist .bar.hover{fill:#fff}
.dist .cut{stroke:var(--hi);stroke-width:1.5}
.dist .wall-mark{stroke:#9a9a9a;stroke-width:1}
.dist .dist-label{font:500 9.5px var(--ui);letter-spacing:.04em;fill:#cfcfcf}
.milestone-info{margin-top:6px;min-height:15px;color:#a8a8a8;font-size:10px;line-height:1.5;letter-spacing:.025em;font-variant-numeric:tabular-nums}
.milestone-info.active{color:#fff}
/* Count switch: Google's families, or families merged when their letters are identical. */
.count-tools{display:inline-flex;align-items:baseline;gap:16px;flex-wrap:wrap}
.count-mode{display:inline-flex;align-items:center;gap:1px}
.count-mode .cm-label{font-size:10px;color:#9b9b9b;letter-spacing:.04em;margin-right:7px}
.count-mode button{background:#262626;color:#a9a9a9;padding:4px 8px;font-size:10px;letter-spacing:.04em;line-height:1.3}
.count-mode button:hover{background:#363636;color:#fff}
.count-mode button[aria-pressed="true"]{background:#eee;color:#111}
.design-help{margin-top:0}
.design-help .score-help-card{left:auto;right:0}
.meta .siblings{color:#cfcfcf}
/* V18: which scored style decides a family's score. */
.rule-row{display:flex;align-items:center;flex-wrap:wrap;gap:6px 18px;margin-top:9px}
.rule-row .score-help{margin-top:0}
.count-mode .cm-label.after{margin:0 0 0 7px}
.meta .style-tag{color:#6c6c6c}
.detail-shared{font-size:10px;line-height:1.6;color:#cfcfcf!important}
.detail-shared:empty{display:none}
.threshold-hint a{color:#f3f3f1;text-underline-offset:4px;white-space:nowrap}
.collection .design-help .score-help-card{left:auto;right:0}
@media(max-width:700px){.collection .design-help .score-help-card{position:fixed;left:14px;right:14px;top:132px;width:auto}}

/* Floating surfaces stay borderless. Light, soft shadows separate them from the specimen field. */
#detail,#methods{position:fixed;z-index:23;background:#282828;border:0;border-radius:0;color:#eaeaea;font-family:var(--ui);font-size:11px;line-height:1.65;box-shadow:0 25px 82px rgba(0,0,0,.95),0 5px 18px rgba(0,0,0,.7)}
#detail[hidden],#methods[hidden]{display:none!important}
#detail{right:clamp(20px,3vw,42px);top:88px;width:min(380px,calc(100vw - 44px));padding:28px}
#methods{right:clamp(20px,3vw,42px);bottom:clamp(18px,3vw,35px);width:min(495px,calc(100vw - 44px));padding:0}
.methods-inner{max-height:calc(100dvh - 66px);overflow-y:auto;overscroll-behavior:contain;padding:28px;scrollbar-width:thin;scrollbar-color:#777 #282828}
.aside-head{display:flex;justify-content:space-between;align-items:start;gap:12px;color:#aaa;font-size:10px}
/* Crossed-circle close control, overlapping the panel's upper-right corner. */
.popup-close{position:absolute;z-index:4;top:-9.5px;right:-9.5px;width:19px;height:19px;display:grid;place-items:center;padding:0;background:#f3f3f1;color:#101010;border:0;border-radius:50%;box-shadow:0 2px 9px rgba(0,0,0,.7);font-family:Arial,Helvetica,sans-serif;font-size:15px;font-weight:400;line-height:1;transition:background .15s,transform .15s}
.popup-close::before{content:"";position:absolute;inset:-10px;border-radius:50%}
.popup-close:hover{background:#ddd;transform:scale(1.07)}.popup-close:focus-visible{outline:2px solid #fff;outline-offset:4px}
#detail .big{font-size:clamp(28px,5vw,52px);line-height:1.15;margin:25px 0;overflow:hidden}#detail h2{font-size:15px;font-weight:600;margin:0}#detail p{margin:10px 0 0;color:#aaa}#methods h2{font-size:18px;margin:8px 0 16px;color:#fff}#methods p{color:#bcbcbc;margin:10px 0}#methods code{color:#fff}#methods input{max-width:100%;font-size:11px}

@media(max-width:1150px){
  .grid[data-density="packed"]{--cols:7;--type:clamp(17px,2.2vw,26px)}
  .grid[data-density="dense"]{--cols:7;--type:clamp(18px,2.3vw,29px)}
  .grid[data-density="compact"]{--cols:6;--type:clamp(20px,2.75vw,34px)}
  .grid[data-density="regular"]{--cols:5;--type:clamp(24px,3.1vw,42px)}
  .grid[data-density="open"]{--cols:5;--type:clamp(24px,2.9vw,36px)}
  .grid[data-density="airy"]{--cols:5;--type:clamp(25px,3.05vw,38px)}
  .grid[data-density="showcase"]{--cols:5;--type:clamp(26px,3.25vw,40px)}
}
@media(max-width:800px){
  .grid{--cols:3;--row:156px;--type:clamp(19px,4.7vw,43px)}
  .grid[data-density="packed"]{--cols:5;--row:116px;--pad:7px;--type:clamp(16px,2.65vw,23px)}
  .grid[data-density="dense"]{--cols:5;--row:130px;--pad:8px;--type:clamp(18px,2.8vw,26px)}
  .grid[data-density="compact"]{--cols:4;--row:152px;--pad:10px;--type:clamp(21px,3.6vw,33px)}
  .grid[data-density="regular"]{--cols:3;--row:185px;--pad:13px;--type:clamp(25px,4.1vw,39px)}
  .grid[data-density="open"]{--cols:3;--row:205px;--pad:15px;--type:clamp(29px,4.5vw,46px)}
  .grid[data-density="airy"]{--cols:2;--row:252px;--pad:20px;--type:clamp(39px,5.3vw,58px)}
  .grid[data-density="showcase"]{--cols:2;--row:310px;--pad:23px;--type:clamp(47px,6.4vw,72px)}
}
@media(max-width:520px){
  .top{padding:12px 14px;min-height:60px}.name{font-size:11px}.name small{font-size:10px}.status{font-size:9.5px}
  .grid{--cols:2;--row:139px;--type:clamp(21px,6.3vw,32px);--pad:8px;padding:67px 3px 246px}
  .grid[data-density="packed"]{--cols:3;--row:110px;--space:0px;--pad:6px;--type:clamp(16px,4.3vw,20px)}
  .grid[data-density="dense"]{--cols:3;--row:124px;--space:0px;--pad:7px;--type:clamp(17px,4.6vw,24px)}
  .grid[data-density="compact"]{--cols:3;--row:142px;--space:1px;--pad:8px;--type:clamp(18px,4.9vw,27px)}
  .grid[data-density="regular"]{--cols:2;--row:165px;--space:3px;--pad:10px;--type:clamp(23px,5.8vw,31px)}
  .grid[data-density="open"]{--cols:2;--row:194px;--space:6px;--pad:13px;--type:clamp(27px,6.5vw,39px)}
  .grid[data-density="airy"]{--cols:1;--row:235px;--space:8px;--pad:19px;--type:clamp(40px,10vw,57px)}
  .grid[data-density="showcase"]{--cols:1;--row:284px;--space:14px;--pad:24px;--type:clamp(46px,12vw,72px)}
  .meta{font-size:9.5px}.control{padding:16px 16px 14px}.control-foot{font-size:10px;margin-top:10px}.control-foot .text-button{font-size:10px}#detail{right:23px;top:77px}.popup-close{width:17px;height:17px;top:-8.5px;right:-8.5px;font-size:13px}.methods-inner{padding:22px}#methods{right:22px;bottom:20px}
}
@media(prefers-reduced-motion:reduce){*{animation-duration:0.01ms!important;transition-duration:0.01ms!important}}

/* Section navigation and two research chapters. Preserve the base specimen aesthetic. */
html{scroll-behavior:smooth}.research-section,.grid{scroll-margin-top:88px}
.top .project-nav{pointer-events:auto;display:flex;gap:clamp(10px,2.2vw,30px);align-items:center;padding-top:2px}
.project-nav a{color:#b3b3b3;font-size:10px;white-space:nowrap;text-decoration:none;letter-spacing:-.02em}
.project-nav a:hover,.project-nav a:focus-visible{color:#fff;text-decoration:underline;text-underline-offset:5px}
.control{transition:opacity .2s,transform .2s}.control.out-of-view{opacity:0;pointer-events:none;transform:translate(-50%,15px)}
.research-section{position:relative;min-height:100dvh;padding:112px clamp(18px,4vw,62px) 110px;background:#050505;border-top:1px solid #333}
.section-kicker{display:flex;justify-content:space-between;gap:12px;color:#999;font-size:10px;letter-spacing:.06em;line-height:1.6;border-bottom:1px solid #555;padding-bottom:14px}
.section-heading{display:grid;grid-template-columns:1fr minmax(250px,.55fr);gap:40px;align-items:end;padding:55px 0 65px}
.section-heading h2{font-family:var(--ui);font-size:clamp(60px,9.2vw,144px);font-weight:500;letter-spacing:-.035em;line-height:.92;margin:0}
.section-intro{color:#d0d0d0;max-width:460px;font-size:13px;line-height:1.7}.section-intro p{margin:0 0 18px}.section-intro p:last-child{margin-bottom:0}
.section-small{display:block;color:#999;font-size:10px;letter-spacing:.06em;line-height:1.5}
.chapter-status{display:flex;align-items:baseline;gap:16px;border-top:1px solid #555;padding:20px 0;color:#bbb;font-size:10px;letter-spacing:.06em}
.chapter-status strong{font-size:42px;color:#eee;letter-spacing:-.06em;font-weight:500}
.high-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;background:#343434;margin-bottom:80px}
.high-card{background:#080808;color:#e9e9e9;min-height:170px;padding:16px 16px 13px;display:flex;flex-direction:column;justify-content:space-between;text-align:left;min-width:0}
.high-card:hover,.high-card:focus-visible{background:#252525}.high-card.is-chosen{background:#242424}
.high-card .high-sample{font-size:clamp(26px,3vw,49px);line-height:1;letter-spacing:-.045em;white-space:nowrap;overflow:hidden;text-overflow:clip}
.high-card .high-meta{display:flex;justify-content:space-between;gap:8px;align-items:end;color:#999;font-size:10px;line-height:1.35}.high-card .high-meta span:first-child{overflow:hidden;text-overflow:ellipsis}
.empty-panel{padding:32px;color:#aaa;font-size:12px;line-height:1.6;grid-column:1/-1;background:#101010}
.compare-head{display:flex;justify-content:space-between;gap:20px;align-items:end;margin-bottom:28px}
.compare-head h3{font-size:clamp(30px,4.5vw,60px);font-weight:500;letter-spacing:-.07em;line-height:1.03;margin:12px 0 0}
.comparison-controls{display:grid;gap:9px}.pair-switch{display:flex;gap:1px}.pair-switch button{background:#202020;color:#aaa;min-width:55px;min-height:38px;font-size:13px}
.pair-switch button.active{background:#efefee;color:#101010}
.glyph-picker{display:flex;gap:2px;flex-wrap:wrap;margin:22px 0}.glyph-picker button{padding:10px 16px;background:#1a1a1a;color:#bcbcbc;min-width:50px;font-size:13px}.glyph-picker button.active{background:#eee;color:#111}
.comparison-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.comparison{min-height:360px;background:#171717;padding:20px 25px 25px;min-width:0;display:flex;flex-direction:column;justify-content:space-between}
.comparison-label{display:flex;gap:15px;justify-content:space-between;color:#d4d4d4;font-size:10px}.comparison-label span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.comparison-letter{font-size:clamp(120px,19vw,290px);line-height:1.1;font-weight:400;text-align:center;white-space:nowrap;overflow:hidden;min-height:200px;display:grid;place-items:center;letter-spacing:-.03em}
.comparison-letter.is-phrase{font-size:clamp(24px,4.6vw,70px);white-space:normal;overflow-wrap:anywhere}
.comparison-under{font-size:10px;line-height:1.5;color:#aaa;min-height:27px}
.observation{border-top:1px solid #555;max-width:700px;padding-top:25px;margin-top:33px}.observation p{font-size:14px;line-height:1.65;margin:12px 0}
.caveat{color:#999!important;font-size:10px!important;line-height:1.7!important}
.judgment-section{background:#090909}.judgment-layout{display:grid;grid-template-columns:minmax(280px,1fr) minmax(350px,1fr);gap:clamp(30px,4vw,70px);border-top:1px solid #555;padding-top:35px}
.field-label{display:block;margin:25px 0 8px;color:#bcbcbc;font-size:10px;letter-spacing:.04em}
.judge-select,.judge-search{background:#1c1c1c;border:0;color:#eee;border-radius:0;width:100%;min-height:45px;padding:12px 14px;font-size:12px}
.judge-select:focus-visible,.judge-search:focus-visible{outline:1px solid #fff;outline-offset:2px}
.judge-preview{margin-top:28px;min-height:320px;display:flex;flex-direction:column;justify-content:space-between;background:#161616;padding:24px;overflow:hidden}
#judgePhrase{font-size:clamp(48px,5.5vw,90px);font-weight:400;line-height:1.06;letter-spacing:-.05em;overflow-wrap:anywhere;min-height:200px;display:flex;flex-direction:column;justify-content:center}
.judge-caption{display:flex;justify-content:space-between;gap:12px;color:#bcbcbc;font-size:10px}
.judgment-instruction{font-size:12px;color:#ccc;line-height:1.7;max-width:620px;margin:15px 0 22px}
.adjective-tags{display:flex;flex-wrap:wrap;gap:7px;min-height:130px;align-content:start}
.adjective-tags button{padding:10px 13px;background:#202020;color:#ccc;text-transform:uppercase;font-size:10px;border:1px solid transparent}
.adjective-tags button.active{background:#eee;color:#111}.adjective-tags button:hover:not(.active){background:#343434}
.judgment-actions{display:flex;gap:18px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-top:22px;padding:20px 0;border-top:1px solid #494949}
#pickCount{font-size:10px;color:#999}.action-primary{padding:14px 16px;background:#eee;color:#111;font-size:10px;font-weight:600}.action-primary:disabled{opacity:.33;cursor:default}
.judgment-result{padding:25px 0;margin-top:12px;border-top:1px solid #666}.judgment-result[hidden]{display:none!important}
.judgment-result h3{font-size:22px;font-weight:500;letter-spacing:-.05em;margin:14px 0 20px}
.tag-comparison{display:grid;gap:0}.tag-row{display:grid;grid-template-columns:1fr auto;gap:16px;border-bottom:1px solid #383838;padding:11px 0;font-size:12px}.tag-row span:last-child{font-size:10px;color:#aaa;text-align:right}
.other-tags{color:#ccc;font-size:11px;line-height:1.7;margin-top:10px}.inline-action{background:none;color:#dfdfdf;font-size:10px;border:0;padding:15px 0 0;text-align:left;text-decoration:underline;text-underline-offset:4px}
.research-footer{display:flex;gap:20px;justify-content:space-between;flex-wrap:wrap;border-top:1px solid #444;padding:28px clamp(18px,4vw,62px) 45px;font-size:10px;color:#999;line-height:1.5}.research-footer a{color:#eee}
@media(max-width:1100px){.top .status{display:none}.high-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.section-heading{grid-template-columns:1fr minmax(220px,.75fr)}}
@media(max-width:800px){.top .project-nav{gap:10px}.project-nav a{font-size:10px}.section-heading{grid-template-columns:1fr;gap:23px}.section-heading h2{font-size:clamp(60px,13vw,98px)}.section-intro{max-width:620px}.high-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.judgment-layout{grid-template-columns:1fr}.comparison{min-height:285px}.comparison-letter{font-size:clamp(90px,17vw,200px)}}
@media(max-width:520px){.top{align-items:flex-start}.top .project-nav{margin-left:auto;gap:4px;display:grid;text-align:right}.project-nav a{font-size:9.5px;line-height:1.55}.research-section{padding:86px 15px 75px;scroll-margin-top:65px}.section-heading{padding:35px 0 38px}.section-heading h2{font-size:clamp(52px,15vw,82px)}.section-intro{font-size:12px}.section-kicker{font-size:9.5px}.high-grid{grid-template-columns:repeat(2,minmax(0,1fr));margin-bottom:45px}.high-card{min-height:155px;padding:12px}.high-card .high-sample{font-size:clamp(26px,7vw,39px)}.compare-head{align-items:start}.compare-head h3{font-size:31px}.comparison-controls .section-small{font-size:9.5px}.pair-switch button{min-width:40px}.comparison-grid{gap:6px}.comparison{min-height:215px;padding:12px}.comparison-label{font-size:9.5px}.comparison-letter{font-size:clamp(75px,24vw,125px);min-height:120px}.comparison-letter.is-phrase{font-size:18px}.comparison-under{font-size:9.5px}.glyph-picker button{padding:9px 11px;min-width:38px}.chapter-status strong{font-size:32px}.judge-preview{min-height:255px}.research-footer{display:grid}}


/* V11: An editorial horizontal collection. Scroll sideways instead of extending the specimen wall downward. */
.collection{position:relative;background:#000;padding-top:var(--head-h,70px);min-height:100dvh;scroll-margin-top:0;transition:padding-top .25s}
.collection.is-revealed{min-height:0}
.collection .control{position:sticky;z-index:15;top:var(--head-h,70px);transition:top .25s;left:auto;bottom:auto;transform:none;width:100%;max-width:none;
  padding:16px clamp(16px,3.1vw,48px) 11px;border:0;border-bottom:1px solid #343434;
  background:rgba(18,18,18,.96);box-shadow:0 8px 28px rgba(0,0,0,.38);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.collection .control.out-of-view{opacity:1;pointer-events:auto;transform:none}
.collection .line{align-items:center}
.collection .value{font-size:clamp(33px,3.6vw,53px)}
.collection .scale{margin-top:9px}
.collection .score-help{margin-top:5px}
.collection .score-help-card{top:calc(100% + 10px);bottom:auto;left:0}
.collection .control-foot{margin-top:6px}
.collection .milestone-info{margin-top:1px;min-height:13px}
.collection .dist{height:48px}
.specimen-viewport{width:100%;overflow-x:auto;overflow-y:hidden;overscroll-behavior-inline:contain;
  scrollbar-width:thin;scrollbar-color:#666 #090909;position:relative;background:#000}
.specimen-viewport::-webkit-scrollbar{height:5px}.specimen-viewport::-webkit-scrollbar-thumb{background:#595959}
.specimen-viewport:focus-visible{outline:1px solid #aaa;outline-offset:-2px}
/* The number of rows is capped. More fonts create more columns to the right. */
.collection .grid{--rows:4;--cellw:20vw;--row:145px;--space:0px;--pad:12px;--type:clamp(20px,2.4vw,37px);
  display:grid;grid-auto-flow:column;grid-template-columns:none;grid-template-rows:repeat(var(--rows),var(--row));
  grid-auto-columns:var(--cellw);width:max-content;min-width:100%;min-height:0;
  padding:8px clamp(9px,1vw,20px) 9px;gap:var(--space);align-content:start;}
.collection .grid[data-density="packed"]{--rows:5;--cellw:max(119px,calc((100vw - 30px)/9));--row:clamp(96px,calc((100dvh - 280px)/5),138px);--pad:8px;--type:clamp(17px,1.8vw,28px);--space:0px}
.collection .grid[data-density="dense"]{--rows:5;--cellw:max(135px,calc((100vw - 34px)/8));--row:clamp(110px,calc((100dvh - 285px)/5),148px);--pad:10px;--type:clamp(18px,2vw,31px);--space:1px}
.collection .grid[data-density="compact"]{--rows:4;--cellw:max(150px,calc((100vw - 40px)/7));--row:clamp(133px,calc((100dvh - 265px)/4),168px);--pad:12px;--type:clamp(21px,2.4vw,35px);--space:2px}
.collection .grid[data-density="regular"]{--rows:4;--cellw:max(172px,calc((100vw - 44px)/6));--row:clamp(145px,calc((100dvh - 272px)/4),176px);--pad:14px;--type:clamp(23px,2.75vw,41px);--space:3px}
.collection .grid[data-density="open"]{--rows:3;--cellw:max(185px,calc((100vw - 60px)/5));--row:clamp(154px,calc((100dvh - 295px)/3),204px);--pad:16px;--type:clamp(27px,3.1vw,47px);--space:5px}
.collection .grid[data-density="airy"]{--rows:3;--cellw:max(185px,calc((100vw - 66px)/5));--row:clamp(167px,calc((100dvh - 312px)/3),223px);--pad:20px;--type:clamp(29px,3.35vw,50px);--space:8px}
.collection .grid[data-density="showcase"]{--rows:2;--cellw:max(185px,calc((100vw - 80px)/5));--row:clamp(160px,calc((100dvh - 565px)/2),174px);--pad:16px;--type:clamp(30px,3.5vw,53px);--space:10px}
.collection .grid[data-density="sample"]{--rows:2;--cellw:max(185px,calc((100vw - 65px)/5));--row:185px;--pad:16px;--type:clamp(25px,3vw,44px);--space:6px}
.collection .specimen{min-height:0;min-width:0;content-visibility:auto;contain-intrinsic-size:auto var(--row);}
.collection .phrase{font-size:var(--type)}
.collection #empty{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}
.browse-footer{display:flex;align-items:center;gap:22px;padding:10px clamp(15px,3.1vw,48px) 12px;border-top:1px solid #272727;min-height:44px}
.browse-caption{font-size:10px;letter-spacing:.035em;color:#aaa;white-space:nowrap}
.browse-progress{background:#2d2d2d;height:2px;flex:1;position:relative;max-width:390px}
.browse-progress>span{display:block;position:absolute;inset:0 auto 0 0;background:#e6e6e6;width:0;transition:width .12s}
.browse-actions{margin-left:auto;display:flex;gap:3px}.browse-actions button{height:26px;width:32px;background:#222;color:#eee;font-size:17px;line-height:1}
.browse-actions button:disabled{opacity:.22;cursor:default}
.threshold-hint{min-height:85px;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:16px clamp(15px,3.1vw,48px);color:#6e6e6e;font-size:10px;letter-spacing:.035em}
.threshold-hint p{margin:0;text-align:right;line-height:1.6}
.threshold-hint[hidden]{display:none}
.research-section[hidden]{display:none!important}
.research-section{padding-top:72px;min-height:0}
.section-heading{padding:38px 0 49px}
#perception{scroll-margin-top:74px}
@media(max-width:900px){
  .collection .grid[data-density="packed"]{--cellw:135px;--type:20px}
  .collection .grid[data-density="dense"]{--cellw:155px;--type:22px}
  .collection .grid[data-density="compact"]{--cellw:172px;--type:26px}
  .collection .grid[data-density="regular"]{--cellw:195px;--type:30px}
  .collection .grid[data-density="open"],.collection .grid[data-density="airy"]{--cellw:max(195px,calc((100vw - 40px)/3));--type:clamp(29px,4vw,43px)}
  .collection .grid[data-density="showcase"]{--cellw:max(185px,calc((100vw - 30px)/3));--row:185px;--type:clamp(32px,4.2vw,45px)}
  .collection .grid[data-density="sample"]{--cellw:max(170px,calc((100vw - 35px)/3));--type:clamp(28px,4vw,41px)}
}
@media(max-width:520px){
  .collection .control{padding:12px 14px 10px}
  .collection .line{gap:10px}
  .collection .value{font-size:36px}
  .collection .control-foot{font-size:10px}
  .collection .grid{padding:5px 8px 8px}
  .collection .grid[data-density="packed"]{--rows:4;--cellw:117px;--row:106px;--pad:6px;--type:17px}
  .collection .grid[data-density="dense"]{--rows:4;--cellw:132px;--row:118px;--pad:7px;--type:19px}
  .collection .grid[data-density="compact"]{--rows:3;--cellw:156px;--row:148px;--pad:9px;--type:23px}
  .collection .grid[data-density="regular"]{--rows:3;--cellw:180px;--row:165px;--pad:10px;--type:27px}
  .collection .grid[data-density="open"]{--rows:3;--cellw:198px;--row:178px;--pad:12px;--type:29px}
  .collection .grid[data-density="airy"]{--rows:3;--cellw:209px;--row:184px;--pad:13px;--type:32px}
  .collection .grid[data-density="showcase"]{--rows:2;--cellw:205px;--row:197px;--pad:15px;--type:34px}
  .collection .grid[data-density="sample"]{--rows:2;--cellw:190px;--row:185px;--pad:12px;--type:29px}
  .browse-footer{padding:10px 12px;gap:10px}.browse-caption{font-size:9.5px;white-space:normal;line-height:1.4}
  .browse-progress{min-width:35px}.browse-actions button{width:28px}
  .threshold-hint{padding:14px;gap:10px;font-size:9.5px;min-height:65px}
  .research-section{padding-top:67px}
  .section-heading{padding:30px 0 35px}
}
/* Keep five potential specimen columns even when only a few families remain.
   Their unused positions stay empty; narrower screens can browse sideways. */
.collection .grid[data-single-row="true"]{
  --rows:1;
  grid-auto-flow:row;
  grid-template-columns:repeat(5,var(--cellw));
  grid-template-rows:var(--row);
  grid-auto-columns:auto;
  width:max-content;
  min-width:100%;
}

/* Perception study: formal comparison, quiet analytical apparatus. */
.high-grid{grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:repeat(2,170px) minmax(430px,auto);grid-auto-rows:170px;gap:1px;background:#343434;margin:0 0 34px}
.high-card{min-height:0}.high-card.is-overlay-selected{background:#313131;box-shadow:inset 0 0 0 1px #ddd}
.high-card:nth-child(11){align-self:start;min-height:170px}
.overlay-lab{grid-column:2 / -1;grid-row:3;min-width:0;min-height:430px;padding:16px 18px 14px;margin:0;background:#141414;display:flex;flex-direction:column;gap:12px}
.overlay-top{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:end;margin:0}
.overlay-top h3{font-size:clamp(19px,2.2vw,31px);line-height:1.1;margin:4px 0 0;letter-spacing:-.05em;font-weight:500}
.overlay-actions{display:flex;gap:2px;align-self:start;flex-wrap:wrap}
.overlay-actions button{background:#242424;color:#b7b7b7;padding:8px 12px;font-size:10px;letter-spacing:.04em;min-height:32px}
.overlay-actions button.is-active{background:#e9e9e7;color:#050505}.overlay-actions button:hover:not(.is-active){background:#333;color:#fff}
.overlay-figure{background:#050505;position:relative;overflow:hidden;display:flex;flex-direction:column;min-height:0}
#formCanvas{display:block;width:100%;height:232px;flex:0 0 232px;min-height:0;aspect-ratio:auto}
.overlay-figure-bottom{display:flex;justify-content:space-between;gap:15px;padding:0 12px 8px;color:#777;font-size:9.5px;letter-spacing:.06em}
.overlay-bottom{display:grid;grid-template-columns:minmax(180px,.9fr) minmax(200px,1fr) minmax(220px,1.2fr);gap:14px;padding-top:2px;align-items:start}
.overlay-selected{display:flex;flex-direction:column;gap:3px}.overlay-selected strong{font-size:19px;letter-spacing:-.04em;font-weight:500}.overlay-detail{color:#9f9f9f;font-size:10px;line-height:1.55}
.anatomy-tools{display:flex;flex-direction:column;gap:7px}.anatomy-buttons{display:flex;flex-wrap:wrap;gap:3px}.anatomy-buttons button{font:600 10px var(--ui);letter-spacing:.025em;background:#292929;color:#b9b9b9;padding:7px 9px;min-height:27px}.anatomy-buttons button.is-active{background:#eee;color:#111}.anatomy-buttons button:hover:not(.is-active){background:#424242;color:#fff}
.overlay-reading{font-size:10px;line-height:1.6;color:#cfcfcf;max-width:540px;margin:0;padding-top:14px;border-top:1px solid #3f3f3f}
.overlay-context{padding:18px 0 34px;margin:0 0 75px;border-bottom:1px solid #424242}
.traits-head{display:flex;justify-content:space-between;gap:15px;flex-wrap:wrap;margin:18px 0 18px}.trait-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}.trait{padding-top:13px;border-top:1px solid #454545;min-width:0}.trait-index{font-size:10px;color:#777;display:block;margin-bottom:16px}.trait strong{font-size:14px;font-weight:500}.trait p{font-size:11px;color:#aaa;line-height:1.65;max-width:340px;margin:10px 0}.overlay-method{margin:23px 0 0;font-size:10px}
.overlay-lab[data-mode="counter"] .anatomy-tools{opacity:.45}
@media(max-width:1100px){
  .high-grid{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:none;grid-auto-rows:170px}
  .high-card:nth-child(11){min-height:0;align-self:stretch}
  .overlay-lab{grid-column:1/-1;grid-row:auto;min-height:410px}
}
@media(max-width:800px){
  .high-grid{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(4,170px) minmax(450px,auto)}
  .trait-grid{gap:14px}
}
@media(max-width:600px){
  .overlay-top{grid-template-columns:1fr}.overlay-actions{justify-content:flex-start}.overlay-actions button{flex:1}
  .overlay-bottom{grid-template-columns:1fr;gap:10px}#formCanvas{height:200px;flex-basis:200px}
  .trait-grid{grid-template-columns:1fr;gap:16px}.trait{display:grid;grid-template-columns:25px 1fr;gap:0 10px}.trait-index{grid-row:span 2;margin-top:3px}.trait p{grid-column:2;margin-top:5px}.overlay-figure-bottom{font-size:9.5px;padding:0 12px 12px}
}
@media(max-width:520px){
  .high-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(6,156px) minmax(470px,auto);grid-auto-rows:156px}
  .high-card{min-height:0}
  .overlay-lab{padding:13px 11px 10px;min-height:470px}
  .overlay-top h3{font-size:22px}
  #formCanvas{height:184px;flex-basis:184px}
  .overlay-selected strong{font-size:17px}.overlay-detail{font-size:9.5px}.overlay-reading{font-size:10px;padding-top:10px}
  .overlay-context{margin-bottom:52px}
  .overlay-figure-bottom{line-height:1.3}
  .anatomy-buttons button{font-size:9.5px;padding:6px 8px}
}
/* V17: the Perception grid adapts to however many families the slider admits.
   Cards keep a fixed height; the overlay takes the space left after the last card. */
.high-grid{grid-template-rows:none;grid-auto-rows:auto;background:transparent}
.high-grid .high-card{height:170px;min-height:0;box-shadow:0 0 0 1px #343434} /* rules drawn by the cards, so empty cells stay dark */
.high-grid .high-card.is-remainder{align-self:start}
.high-grid .overlay-lab{grid-column:var(--ov-col,1 / -1);grid-row:var(--ov-row,auto)}
@media(max-width:1100px){.high-grid{grid-template-rows:none}.high-grid .overlay-lab{grid-column:1 / -1;grid-row:auto}}
@media(max-width:800px){.high-grid{grid-template-rows:none}}
@media(max-width:520px){.high-grid{grid-template-rows:none}.high-grid .high-card{height:156px}.count-tools{gap:10px}}

/* V19: Part 2 pairs. Families that measure alike but were scored far apart. */
.overlay-bottom{grid-template-columns:minmax(200px,1fr) minmax(260px,1.7fr)}
.overlay-note{margin:0 0 76px;max-width:760px}
.pair-study{border-top:1px solid #555;padding-top:28px;margin-bottom:40px}
.pair-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.8fr);gap:40px;align-items:end;margin-bottom:30px}
.pair-head h3{font-size:clamp(34px,5vw,72px);font-weight:500;letter-spacing:-.07em;line-height:1;margin:12px 0 0}
.pair-intro{color:#cfcfcf;font-size:12px;line-height:1.7;max-width:460px}.pair-intro p{margin:0 0 12px}.pair-intro p:last-child{margin:0}
.pair-nav{display:flex;align-items:center;gap:18px;padding:12px 0;border-top:1px solid #333;border-bottom:1px solid #333;margin-bottom:14px}
.pair-dots{display:flex;gap:6px;flex:1;flex-wrap:wrap}
.pair-dots button{width:26px;height:26px;background:#1b1b1b;color:#8a8a8a;font-size:10px;display:grid;place-items:center}
.pair-dots button[data-answered="true"]{background:#545454;color:#fff}
.pair-dots button[aria-current="true"]{outline:1px solid #eee;outline-offset:2px;color:#fff}
.pair-arrows{display:flex;gap:2px}.pair-arrows button{width:34px;height:28px;background:#222;color:#eee;font-size:16px;line-height:1}
.pair-arrows button:disabled{opacity:.25;cursor:default}
.pair-specimens{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pair-specimen{background:#121212;color:#f3f3f1;min-height:250px;padding:18px 22px 16px;display:flex;flex-direction:column;justify-content:space-between;text-align:left;min-width:0;border:1px solid transparent}
.pair-stage[data-state="guess"] .pair-specimen:hover,.pair-specimen:focus-visible{background:#1c1c1c;border-color:#555}
.pair-stage[data-state="reveal"] .pair-specimen{cursor:default}
.pair-specimen.is-chosen{border-color:var(--hi)}
.pair-word{font-size:clamp(54px,7.4vw,124px);line-height:1.15;white-space:nowrap;overflow:hidden;flex:1;display:flex;align-items:center}
.pair-label{display:flex;gap:12px;align-items:baseline;font-size:10px;color:#9a9a9a;min-height:16px}
.pair-side{color:#fff;font-weight:600}
.pair-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pair-score{font-variant-numeric:tabular-nums;color:#fff;white-space:nowrap}
.pair-lower{display:grid;grid-template-columns:minmax(220px,.75fr) minmax(0,1.6fr);gap:34px;margin-top:20px;align-items:start}
.pair-ruler{width:100%;border-collapse:collapse;font-size:10px;font-variant-numeric:tabular-nums}
.pair-ruler th{font-weight:500;color:#999;text-align:right;padding:0 0 8px;letter-spacing:.04em;font-size:10px}
.pair-ruler th:first-child,.pair-ruler td:first-child{text-align:left}
.pair-ruler td{padding:7px 0;border-top:1px solid #2c2c2c;text-align:right;color:#e6e6e6}
.pair-ruler td:first-child{color:#9a9a9a;font-size:10px;letter-spacing:.04em}
.pair-ask p{font-size:14px;line-height:1.55;margin:0 0 14px;color:#eee;max-width:520px}
.pair-choices{display:flex;gap:2px;flex-wrap:wrap}
.pair-choices button{background:#e8e8e6;color:#111;padding:12px 18px;font-size:11px;font-weight:600;min-width:56px}
.pair-choices button[data-guess="tie"]{background:#262626;color:#ddd;font-weight:500}
.pair-choices button:hover{filter:brightness(.9)}
.pair-reveal[hidden],.pair-detail[hidden],.pair-ask[hidden]{display:none!important}
.pair-verdict{font-size:15px;line-height:1.5;margin:0 0 18px;color:#fff;max-width:640px}
.pair-note{margin:10px 0 0;font-size:12px;line-height:1.65;color:#d0d0d0;max-width:640px;display:grid;grid-template-columns:118px 1fr;gap:12px}
.pair-register{font-size:10px;color:#8d8d8d;letter-spacing:.04em;padding-top:3px}
.pair-detail{display:grid;grid-template-columns:1fr;gap:28px;margin-top:28px;padding-top:22px;border-top:1px solid #333}
.pair-overlay{margin:0;background:#060606;min-width:0}
#pairCanvas{display:block;width:100%;height:250px}
.pair-overlay figcaption{font-size:9.5px;letter-spacing:.06em;color:#8a8a8a;padding:8px 10px;line-height:1.5}
.size-grid{display:grid;grid-template-columns:44px minmax(0,1fr);gap:12px 14px;margin-top:14px;align-items:center;max-width:900px}
.size-grid .sz{font-size:10px;color:#8a8a8a}
.size-grid .sz-pair{display:grid;gap:3px;min-width:0}
.size-grid .sz-line{display:flex;gap:10px;align-items:baseline;white-space:nowrap;overflow:hidden;color:#f0f0ee;line-height:1.15}
.size-grid .sz-line b{font:600 10px var(--ui);color:#8a8a8a;flex:0 0 12px}
.pair-tally{font-size:11px;line-height:1.6;color:#bbb;margin:18px 0 10px;min-height:16px;max-width:820px}
.pair-result{font:400 13px/1.5 var(--read);color:#bbb;margin:0 0 14px}
.pair-closing{display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,3vw,48px);align-items:start}
.pair-closing p{margin:0}
.pair-closing .pair-conclusion,#briefStudy .brief-conclusion{font:500 clamp(20px,2vw,28px)/1.3 var(--head);color:var(--ink)}
.pair-conclusion[hidden]{display:none}
@media(max-width:700px){.pair-closing{grid-template-columns:1fr}}
@media(max-width:900px){.pair-head,.pair-lower{grid-template-columns:1fr;gap:22px}#pairCanvas{height:200px}}
@media(max-width:520px){.pair-specimens{gap:6px}.pair-specimen{min-height:160px;padding:12px}.pair-word{font-size:clamp(28px,9vw,48px)}.pair-label{flex-wrap:wrap;row-gap:2px}.pair-name{order:3;flex-basis:100%}.pair-note{grid-template-columns:1fr;gap:2px}.pair-dots button{width:23px;height:23px}.pair-head h3{font-size:34px}.pair-nav{gap:10px}#pairCanvas{height:250px}}

/* V20: from form to verdict. Measured letter properties against the Business score. */
.form-study{border-top:1px solid #555;padding-top:28px;margin-bottom:84px}
.form-reading{font-size:12px;line-height:1.7;color:#cfcfcf;max-width:620px}.form-reading p{margin:0 0 12px}.form-reading strong{color:#fff;font-weight:600}

/* V22: Part 3, which business? The label's profile, the cases where it runs out, the trade, and the rest of the decision. */
.judge-block{border-top:1px solid #555;padding-top:28px;margin-bottom:76px}
#profileChart{display:block;width:100%;height:360px}
.case-tabs{display:flex;flex-wrap:wrap;gap:2px;margin:0 0 20px}
.case-tabs button{background:#1d1d1d;color:#b5b5b5;padding:10px 14px;font-size:10px;letter-spacing:.03em}
.case-tabs button[aria-selected="true"]{background:#eee;color:#111}
.case-tabs button:hover:not([aria-selected="true"]){background:#2c2c2c;color:#fff}
.case-tabs button .n{opacity:.6;margin-left:8px;font-variant-numeric:tabular-nums}
.case-layout{display:grid;grid-template-columns:minmax(240px,.7fr) minmax(0,1.6fr);gap:34px;align-items:start}
.case-brief{font-size:16px;line-height:1.5;color:#fff;margin:0 0 20px}
.case-count{display:flex;align-items:baseline;gap:14px;margin-bottom:14px}
.case-count strong{font-size:clamp(48px,6vw,88px);font-weight:500;letter-spacing:-.06em;line-height:1;color:#fff;font-variant-numeric:tabular-nums}
.case-count span{font-size:10px;color:#aaa;max-width:170px;line-height:1.5}
.case-detail{font-size:12px;line-height:1.7;color:#cfcfcf;margin:0 0 16px}
.case-hover{font-size:10px;letter-spacing:.04em;color:#9a9a9a;min-height:30px;line-height:1.6;margin:0}
.trade-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.trade-cards[hidden]{display:none!important}
.trade-card{background:#121212;color:#f3f3f1;text-align:left;padding:16px 18px;min-height:230px;display:flex;flex-direction:column;justify-content:space-between;border:1px solid transparent;min-width:0}
.trade-card:hover:not([aria-disabled="true"]),.trade-card:focus-visible{background:#1c1c1c;border-color:#555}
.trade-card.is-chosen{border-color:var(--hi)}
.trade-card[aria-disabled="true"]{cursor:default}
.trade-label{font-size:10px;font-weight:600;letter-spacing:.04em;color:#fff}
.trade-word{font-size:clamp(26px,3vw,46px);line-height:1.12;margin:18px 0;white-space:nowrap;overflow:hidden}
.trade-meta{font-size:10px;line-height:1.6;color:#9a9a9a;min-height:30px;letter-spacing:.03em}
.trade-result{font-size:14px;line-height:1.6;color:#fff;max-width:780px;margin:22px 0 8px;min-height:22px}
.trade-tally{font-size:10px;color:#9a9a9a;margin:0;letter-spacing:.03em}
.decision-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px 22px}
.decision{border-top:1px solid #454545;padding-top:13px;min-width:0}
.decision .trait-index{font-size:10px;color:#777;display:block;margin-bottom:14px}
.decision strong{font-size:14px;font-weight:500;display:block;margin-bottom:8px}
.decision p{font-size:11px;line-height:1.65;color:#aaa;margin:0}
.closing{border-top:1px solid #555;padding:36px 0 20px}
.closing-q{font-size:clamp(28px,4vw,56px);font-weight:500;letter-spacing:-.05em;line-height:1.08;margin:14px 0 26px;max-width:1000px}
.closing-list{list-style:none;padding:0;margin:0}
.closing-list li{display:flex;justify-content:space-between;gap:20px;align-items:baseline;border-top:1px solid #333;padding:14px 0;font-size:clamp(18px,2.2vw,30px);letter-spacing:-.03em}
.closing-list a{font-size:10px;letter-spacing:.06em;color:#9a9a9a;text-decoration:none;white-space:nowrap}
.closing-list a:hover{color:#fff;text-decoration:underline;text-underline-offset:4px}
@media(max-width:1100px){.decision-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){.case-layout{grid-template-columns:1fr;gap:18px}.trade-cards{grid-template-columns:1fr}.trade-card{min-height:160px}.decision-grid{grid-template-columns:1fr 1fr}#caseChart{height:360px}}
@media(max-width:520px){.decision-grid{grid-template-columns:1fr}#profileChart{height:300px}#caseChart{height:320px}.closing-list li{flex-direction:column;gap:4px}}

/* V23: title, tagline, heading faces. Display headings in IBM Plex Sans; interface and figures stay in Plex Mono. */
.name .tagline{display:block;margin-top:0;font-size:12px;font-weight:400;letter-spacing:-.01em;line-height:1.25;color:#9d9d9d;white-space:nowrap}
.section-heading h2 .h2-punct{margin-left:-.24em}
.pair-head h3,.overlay-top h3,.compare-head h3,.closing-q,.closing-list li>span,.closing-answer{font-family:var(--head);letter-spacing:-.02em}
.pair-head h3,.closing-q{font-weight:500}
.overlay-top h3{font-weight:500}
.closing-list li>span{font-weight:400}
.closing-answer{font-size:clamp(18px,2.2vw,30px);line-height:1.35;color:#cfcfcf;margin:24px 0 0;max-width:1000px;border-top:1px solid #333;padding-top:18px}
.closing-answer strong{color:#fff;font-weight:600}
@media(max-width:520px){.name .tagline{font-size:10px}}

/* V29: a light grey masthead framed by two rules. ?header=dark shows the v26 dark grey; ?header=light the v24 off-white. */
html[data-header="light"]{--head-bg:#f3f3f1;--head-ink:#111;--head-dim:#6a6a6a;--head-rule:transparent}
html[data-header="dark"]{--head-bg:#3a3a38;--head-ink:#f3f3f1;--head-dim:#b4b4ae;--head-rule:transparent}
.top{box-shadow:inset 0 3px 0 var(--head-bg),inset 0 4px 0 var(--head-rule),inset 0 -3px 0 var(--head-bg),inset 0 -4px 0 var(--head-rule)}
.top{background:var(--head-bg);color:var(--head-ink);min-height:0;padding:14px clamp(14px,2.8vw,40px);border-bottom:1px solid var(--head-line);pointer-events:auto;align-items:center}
.name{font-size:13px;letter-spacing:-.02em;color:var(--head-ink)}
.name .title-line{display:block;white-space:nowrap;font-weight:600;line-height:1.3}
.name .says{font-weight:500;margin-left:.4em}
.name .tagline{color:var(--head-dim)}
.top .project-nav a{color:var(--head-ink)}
.top .project-nav a:hover,.top .project-nav a:focus-visible{color:var(--head-ink)}
.top .status{color:var(--head-dim)}
.top a:focus-visible{outline-color:var(--head-ink)}
@media(max-width:520px){.top{padding:11px 14px;min-height:0}.name{font-size:11px}}
/* Part 3 profile labels and the scatter corner share the accent, set in the canvas code. */

/* V28: two businesses per industry, side by side. Kept sparse on purpose. */
.case-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.case-col{background:#0d0d0d;padding:18px 20px 20px;display:flex;flex-direction:column;gap:10px;min-width:0;cursor:pointer;border-top:2px solid transparent}
.case-col.is-active{border-top-color:var(--hi)}
.case-col:focus-visible{outline:none;background:#141414}
.case-col-head{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.case-in-trade{font-size:9.5px;letter-spacing:.06em;color:var(--hi);visibility:hidden;white-space:nowrap}
.case-col.is-active .case-in-trade{visibility:visible}
.case-name{font-family:var(--head);font-size:clamp(22px,2.4vw,32px);font-weight:500;letter-spacing:-.02em;margin:0;line-height:1.1}
.case-line{font-size:11px;line-height:1.6;color:#bdbdbd;margin:0}
.case-tags{font-size:10px;letter-spacing:.05em;color:#e8e8e6;margin:0}
/* V35: what a brief is, and how each brief turns into two of Google's words. */
.brief-intro{position:relative}
.inline-help{background:none;border:0;padding:0;color:#f3f3f1;font:inherit;text-decoration:underline;text-decoration-style:dotted;text-decoration-color:var(--hi);text-underline-offset:4px;cursor:pointer}
.inline-help::after{content:' ↗';font-size:.85em;color:#bdbdbd}
.inline-help[aria-expanded="true"]{color:var(--hi)}
.inline-help:focus-visible{outline:1px solid #fff;outline-offset:3px}
.brief-examples{color:#9a9a9a}
.brief-card{top:calc(100% + 12px);bottom:auto;left:0;width:min(470px,calc(100vw - 40px))}
.brief-card[hidden]{display:none}
.brief-words{color:#fff}
.case-line .case-hl{color:#f3f3f1;text-decoration:underline wavy var(--hi);text-decoration-thickness:1px;text-underline-offset:5px;text-decoration-skip-ink:none}
.case-brief{display:flex;flex-direction:column;gap:6px}
.case-chips{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.case-chip{display:inline-flex;align-items:baseline;gap:7px;border:1px solid #333;padding:5px 8px;font-size:10px;letter-spacing:.04em;color:#a8a8a8}
.case-chip b{font-weight:600;color:#fff;letter-spacing:.06em}
.case-plus{font-size:11px;color:#777}
/* V36: your own brief. Two businesses the reader names and describes in two of Google's words. */
.case-tabs button.is-own{box-shadow:inset 0 0 0 1px #5a5a5a;background:#0d0d0d;color:#e6e6e6}
.case-tabs button.is-own[aria-selected="true"]{background:#eee;color:#111;box-shadow:none}
.own-note{grid-column:1/-1;margin:0 0 4px;font-size:12px;line-height:1.7;color:#cfcfcf;max-width:780px}
.own-note b{color:var(--hi);font-weight:500}
.own-name{display:block}
.own-name input{width:100%;background:transparent;border:0;border-bottom:1px dashed #4a4a4a;border-radius:0;color:#fff;font-family:var(--head);font-size:clamp(22px,2.4vw,32px);font-weight:500;letter-spacing:-.02em;line-height:1.15;padding:0 0 5px}
.own-name input::placeholder{color:#5c5c5c}
.own-name input:focus-visible{outline:none;border-bottom:1px solid var(--hi)}
.own-picks select{appearance:none;-webkit-appearance:none;background:#1c1c1c url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0h8L4 5z' fill='%23bbbbbb'/%3E%3C/svg%3E") no-repeat right 9px center;border:1px solid #3a3a3a;border-radius:0;color:#fff;font:600 10px var(--ui);letter-spacing:.06em;padding:8px 26px 8px 10px;cursor:pointer}
.own-picks select:hover{border-color:#777}
.own-picks select:focus-visible{outline:1px solid var(--hi);outline-offset:1px}
.case-spec-empty{font-size:11px;line-height:1.6;color:#9a9a9a;margin:2px 0 0}
.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}
@media(max-width:700px){.brief-card{position:fixed;left:14px;right:14px;top:auto;bottom:14px;width:auto;max-height:70vh;overflow:auto;padding-top:34px}.brief-card .popup-close{top:9px;right:9px}}
.case-col .case-count{margin:4px 0 0}
.case-col .case-count strong{font-size:clamp(40px,4.4vw,64px)}
.case-col .case-count span{max-width:220px}
.case-mini{display:block;width:100%;height:220px;cursor:crosshair}
.case-col .case-hover{min-height:15px;margin:0}
.case-spec{display:flex;flex-direction:column;gap:4px;border-top:1px solid #2a2a2a;padding-top:10px}
.case-spec-word{font-size:clamp(26px,2.6vw,38px);line-height:1.15;white-space:nowrap;overflow:hidden;color:#f3f3f1}
.case-spec-meta{font-size:10px;letter-spacing:.04em;color:#9a9a9a}
.trade-cards.two{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:900px){.case-pair{grid-template-columns:1fr}.case-mini{height:200px}.trade-cards.two{grid-template-columns:1fr}}

/* V32: 2.02 letters that sort themselves into histograms. */
.sort-controls{display:flex;justify-content:space-between;gap:12px 20px;align-items:center;flex-wrap:wrap;margin-top:22px}
.sort-measures{display:flex;flex-wrap:wrap;gap:4px}
.sort-controls button{font:inherit;font-size:10px;letter-spacing:.06em;color:#c4c4c4;background:#0f0f0f;border:1px solid #2b2b2b;padding:7px 9px;cursor:pointer;line-height:1.2}
.sort-controls button:hover{border-color:#6a6a6a;color:#fff}
.sort-controls button:focus-visible{outline:1px solid #fff;outline-offset:2px}
.sort-controls button[aria-pressed="true"]{background:var(--hi);color:#000;border-color:var(--hi)}
.sort-sep{width:1px;background:#2b2b2b;margin:0 4px}
.sort-side{display:flex;gap:14px;align-items:center}
.sort-letter{display:flex;gap:4px;align-items:center;font-size:10px;letter-spacing:.06em;color:#8f8f8f}
.sort-controls .sort-letter button{font-family:var(--head);font-size:14px;letter-spacing:0;padding:3px 9px 5px;text-transform:none}
.sort-caption{display:grid;grid-template-columns:minmax(220px,.42fr) minmax(0,1fr) auto;gap:18px 32px;align-items:start;margin:24px 0 8px;min-height:74px}
.sort-shape{font-family:var(--head);font-size:clamp(24px,2.5vw,36px);font-weight:500;letter-spacing:-.045em;line-height:1.02;display:block;color:#fff}
.sort-gloss{font-size:10px;letter-spacing:.07em;color:#9a9a9a;display:block;margin-top:8px}
.sort-text{font-size:12px;line-height:1.7;color:#dcdcdc;margin:2px 0 0;max-width:700px}
.sort-text b{font-weight:500;color:var(--hi)}
.sort-legend{display:grid;gap:6px;font-size:10px;letter-spacing:.05em;color:#bdbdbd;white-space:nowrap;padding-top:4px}
.sort-legend i{display:inline-block;width:10px;height:10px;margin-right:8px;vertical-align:-1px}
.sort-stage{position:relative;margin-top:6px}
#sortCanvas{display:block;width:100%;height:clamp(430px,66vh,680px);touch-action:manipulation}
.sort-tip{position:absolute;pointer-events:none;background:#0b0b0b;border:1px solid #3d3d3d;padding:10px 12px 11px;min-width:190px;max-width:300px;z-index:3}
.sort-tip[hidden]{display:none}
.sort-tip-name{font-size:10px;letter-spacing:.06em;color:#fff;text-transform:uppercase}
.sort-tip-word{font-size:30px;line-height:1.2;margin:6px 0;white-space:nowrap;overflow:hidden;color:#f3f3f1;min-height:36px;transition:opacity .2s}
.sort-tip-meta{font-size:10px;letter-spacing:.05em;color:#a8a8a8;line-height:1.6}
.sort-tip-meta .hi{color:var(--hi)}
.sort-hint{font-size:10px;letter-spacing:.05em;color:#8f8f8f;margin:12px 0 0}
.form-summary{margin-top:30px;padding-top:22px;border-top:1px solid #333}
@media(max-width:900px){.sort-caption{grid-template-columns:1fr;gap:10px}.sort-legend{grid-auto-flow:column;justify-content:start;gap:16px}}
@media(max-width:520px){.sort-controls button{font-size:10px;padding:6px 7px}#sortCanvas{height:440px}.sort-legend{grid-auto-flow:row}}

/* V33: titles state the finding; the gloss names what is measured. */
.sort-shape{font-size:clamp(21px,2.2vw,30px);line-height:1.08}
.sort-legend .rule{color:#8f8f8f}
/* V33: Ordinary on one design (ten distances) and the designs nearest and farthest from the middle. */
.ord-panel{display:grid;grid-template-columns:minmax(0,1fr);gap:28px 48px;margin-top:22px;padding-top:20px;border-top:1px solid #333}
.ord-panel[hidden]{display:none}
.ord-head{display:flex;flex-direction:column;gap:5px;margin:8px 0 16px}
.ord-head strong{font-family:var(--head);font-size:clamp(22px,2.2vw,28px);font-weight:500;letter-spacing:-.02em;line-height:1.1;color:#fff}
.ord-meta{font-size:10px;letter-spacing:.04em;line-height:1.6;color:#a8a8a8}
.ord-meta .hi{color:var(--hi)}
.ord-rows{display:grid;gap:6px}
.ord-row{display:grid;grid-template-columns:76px 56px minmax(90px,1fr) 64px 34px;gap:8px;align-items:center;font-size:10px;letter-spacing:.04em}
.ord-l{color:#d6d6d6}
.ord-end{color:#6f6f6f;font-size:9.5px;text-align:right;white-space:nowrap}
.ord-end.r{text-align:left}
.ord-track{position:relative;height:13px}
.ord-track::before{content:"";position:absolute;left:0;right:0;top:6px;height:1px;background:#3a3a3a}
.ord-mid{position:absolute;left:50%;top:0;bottom:0;width:1px;background:#8a8a8a}
.ord-bar{position:absolute;top:4px;height:5px;background:#9a9a9a}
.sort-tip[data-tier="2"] .ord-bar{background:var(--hi)}
.ord-dot{position:absolute;top:6.5px;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;background:#fff}
.ord-v{text-align:right;color:#fff;font-variant-numeric:tabular-nums}
.ord-row.is-missing .ord-v{color:#6f6f6f}
.ord-row.is-missing .ord-track::before{background:repeating-linear-gradient(90deg,#3a3a3a 0 3px,transparent 3px 6px)}
.ord-avg{display:grid;grid-template-columns:76px minmax(0,1fr) auto;gap:8px;align-items:baseline;margin-top:10px;padding-top:9px;border-top:1px solid #2c2c2c;font-size:10px;letter-spacing:.04em;color:#d6d6d6}
.ord-avg .ord-v{font-size:13px}
.ord-key{font-size:10px;line-height:1.65;color:#9a9a9a;margin:14px 0 0;max-width:560px}
.ord-ends{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 48px;align-content:start}
.ord-list{list-style:none;padding:0;margin:8px 0 0;counter-reset:ord}
.ord-list li{counter-increment:ord}
.ord-list button{width:100%;display:grid;grid-template-columns:18px minmax(0,1fr) auto;gap:3px 10px;align-items:baseline;text-align:left;background:none;color:#e6e6e6;padding:7px 0 8px;border-top:1px solid #262626;font-size:11px;line-height:1.3}
.ord-list button::before{content:counter(ord);color:#777;font-size:10px}
.ord-list button:hover .ord-n,.ord-list button[aria-pressed="true"] .ord-n{color:#fff;text-decoration:underline;text-underline-offset:3px}
.ord-list button:focus-visible{outline:1px solid #fff;outline-offset:2px}
.ord-n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ord-d{color:#fff;font-variant-numeric:tabular-nums}
.ord-s{grid-column:2/-1;font-size:9.5px;letter-spacing:.05em;color:#8f8f8f}
.ord-s.hi{color:var(--hi)}
.ord-note{font-size:10px;line-height:1.6;color:#8a8a8a;margin:10px 0 0;max-width:420px}
@media(max-width:900px){.ord-panel{grid-template-columns:1fr}}
/* V34: the letter each view opens on, and the designs at each end of a measure. */
.sort-on{margin-left:8px;font-size:10px;letter-spacing:.05em;color:#8f8f8f;white-space:nowrap}
.sort-on b{font-family:var(--head);font-weight:500;font-size:12px;letter-spacing:0;color:#e6e6e6}
.ends{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;margin-top:10px;background:#262626}
.ends[hidden]{display:none}
.end-cell{display:flex;flex-direction:column;gap:4px;min-width:0;text-align:left;background:#050505;color:#e6e6e6;padding:11px 12px 12px;font-size:11px;line-height:1.35}
.end-cell:nth-child(3),.end-cell:nth-child(4){text-align:right;align-items:flex-end}
button.end-cell:hover,button.end-cell[aria-pressed="true"]{background:#141414}
button.end-cell:focus-visible{outline:1px solid #fff;outline-offset:-1px}
.end-k{font-size:9.5px;letter-spacing:.06em;color:#8f8f8f;display:flex;gap:6px;align-items:center}
.end-k i{display:inline-block;width:8px;height:8px;border:1px solid #d6d6d6;flex:0 0 auto}
.end-cell.biz .end-k i{border-color:var(--hi)}
.end-cell.biz .end-k{color:#b9c46a}
.end-n{font-family:var(--head);font-size:15px;font-weight:500;letter-spacing:-.01em;color:#fff;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.end-v{font-size:10px;color:#e6e6e6;font-variant-numeric:tabular-nums}
.end-cell.biz .end-v{color:var(--hi)}
.end-d{font-size:9.5px;letter-spacing:.05em;color:#8f8f8f;line-height:1.5}
@media(max-width:900px){.ends{grid-template-columns:repeat(2,minmax(0,1fr))}.ends .end-cell:nth-child(1){order:1}.ends .end-cell:nth-child(4){order:2}.ends .end-cell:nth-child(2){order:3}.ends .end-cell:nth-child(3){order:4}}
.ends.three{grid-template-columns:minmax(0,1fr) minmax(0,2fr) minmax(0,1fr)}
.ends.three .end-cell:nth-child(2){text-align:center;align-items:center}
@media(max-width:900px){.ends.three{grid-template-columns:repeat(2,minmax(0,1fr))}.ends.three .end-cell:nth-child(2){grid-column:1/-1;order:3}.ends.three .end-cell:nth-child(3){order:2}}
@media(max-width:520px){.sort-on{display:none}}
@media(max-width:520px){.ord-row{grid-template-columns:62px minmax(60px,1fr) 30px}.ord-avg{grid-template-columns:62px minmax(0,1fr) auto}.ord-end{display:none}}

/* V40: 04 / The rest of the decision. Ring with the question panel on its right; a labeled stance track between two answers; designers compared, never adopted. */
.rest-block .pair-intro p+p{color:#a9a9a9}
.rest-block .pair-intro .form-instructions{font-size:12px;line-height:1.6;border-left:1px solid var(--hi);padding-left:16px}
.rest-summary{display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,3vw,48px);margin-top:20px}
.rest-summary p{margin:0;font:400 14px/1.6 var(--read);color:#a9a9a9}
@media(max-width:700px){.rest-summary{grid-template-columns:1fr}}
.rest-tabs{margin-bottom:14px}
.rest-tabs button .n{opacity:.55;margin-left:8px}
.rest-status{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:10px;letter-spacing:.05em;color:#9a9a9a;min-height:16px;margin:0 0 10px}
.rest-status b{color:#f3f3f1;font-weight:500}
.rest-diagram{display:grid;grid-template-columns:minmax(0,560px) minmax(360px,1fr);gap:clamp(20px,3vw,48px);align-items:start;margin:4px 0 26px}
.rest-ring-col{display:flex;flex-direction:column;gap:12px;min-width:0}
.rest-from,.rest-to{display:flex;flex-direction:column;gap:12px;min-width:0}
.rest-from p,.rest-to p{font-size:11px;line-height:1.65;color:#bdbdbd;margin:0}
.rest-funnel{width:100%;height:auto;display:block}
.rest-cap{font-size:10px;letter-spacing:.05em;color:#8a8a8a;line-height:1.5}
.rest-ring-wrap{position:relative;width:100%;max-width:600px;justify-self:center}
.rest-ring{position:relative;width:100%;aspect-ratio:1/1}
.rest-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.rest-core{position:absolute;left:50%;top:50%;width:33%;height:33%;transform:translate(-50%,-50%);border-radius:50%;background:#141414;border:1px solid #3a3a3a;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:10px 14px;text-align:center;overflow:hidden}
.rest-core .section-small{color:#aaa}
.rest-cands{list-style:none;margin:0;padding:0;width:100%;display:grid;gap:3px}
.rest-cand{display:grid;grid-template-columns:30px minmax(0,1fr) auto;align-items:baseline;gap:8px;text-align:left;font-size:10px;line-height:1.25;color:#e8e8e6;transition:opacity .25s,color .25s}
.rest-cand .aa{font-size:18px;line-height:1;text-align:right;color:#f3f3f1;letter-spacing:-.01em}
.rest-cand .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rest-cand .mk{font-size:10px;letter-spacing:.02em;white-space:nowrap;display:flex;gap:5px}
.rest-cand .mk .f{font-style:normal;color:var(--hi)}
.rest-cand .mk .a{font-style:normal;color:#9a9a9a}
            .rest-cand.is-chosen .nm,.rest-cand.is-chosen .aa{color:var(--hi)}
.rest-core-note{font-size:9.5px;line-height:1.5;color:#8d8d8d;letter-spacing:.02em;max-width:92%}
.rest-arc{position:absolute;transform:translate(-50%,-50%);font-size:10px;letter-spacing:.07em;color:#a3a3a3;white-space:nowrap;pointer-events:none}
.rest-arc b{display:block;color:#666;font-weight:400;font-size:9.5px;margin-bottom:2px}
.rest-node{position:absolute;left:calc(var(--x) * 1%);top:calc(var(--y) * 1%);transform:translate(-50%,-50%);width:17%;aspect-ratio:1/1;border-radius:50%;background:#101010;color:#dcdcdc;border:1px solid #474747;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:6px;text-align:center;transition:background .2s,border-color .2s,color .2s}
.rest-node .ix{font-size:10px;color:#8a8a8a;letter-spacing:.04em}
.rest-node .lb{font-family:var(--head);font-size:clamp(11px,1.15vw,14px);font-weight:500;line-height:1.12;letter-spacing:-.01em}
.rest-node .ct{position:absolute;top:4%;right:4%;min-width:22px;height:18px;padding:0 4px;border-radius:9px;background:var(--hi);color:#111;font-size:10px;font-weight:600;display:none;align-items:center;justify-content:center}
.rest-node:hover{border-color:#9a9a9a;color:#fff}
.rest-node.is-set{border-color:var(--hi)}
.rest-node.is-set .ix{color:var(--hi)}
.rest-node.is-set .ct{display:flex}
.rest-node.is-open{border-style:dashed;border-color:#8a8a8a}
.rest-node.is-open .ct{display:flex;background:#2e2e2e;color:#ddd}
.rest-node[aria-pressed="true"]{background:#eee;color:#111;border-color:#eee}
.rest-node[aria-pressed="true"] .ix{color:#555}
.rest-trade{background:#101010;color:#bdbdbd;border:1px solid #555;text-align:left;padding:12px 14px;display:flex;flex-direction:column;gap:5px;transition:border-color .2s,color .2s,background .2s}
.rest-trade .t{font-size:10px;letter-spacing:.06em}
.rest-trade .q{font-family:var(--head);font-size:16px;font-weight:500;letter-spacing:-.01em;color:#f3f3f1}
.rest-trade:hover{border-color:#9a9a9a}
.rest-trade[aria-pressed="true"]{background:#eee;border-color:#eee;color:#333}
.rest-trade[aria-pressed="true"] .q{color:#111}
.rest-arrow{font-size:16px;color:#666;line-height:1}
.rest-choice{display:flex;flex-direction:column;gap:10px}
.rest-choice-circle{width:min(190px,100%);aspect-ratio:1/1;border-radius:50%;border:1px dashed #4a4a4a;display:grid;place-items:center;background:#0b0b0b;transition:border-color .3s,background .3s}
.rest-choice-circle span{font-size:64px;line-height:1;color:#555;letter-spacing:-.02em}
.rest-choice.is-made .rest-choice-circle{border:1px solid var(--hi);background:#121212}
.rest-choice.is-made .rest-choice-circle span{color:#f3f3f1}
.rest-choice-name{font-family:var(--head);font-size:clamp(20px,2vw,26px);font-weight:500;letter-spacing:-.02em;line-height:1.1;margin:0}
.rest-choice-spec{font-size:22px;line-height:1.15;color:#f3f3f1;margin:0;white-space:nowrap;overflow:hidden}
.rest-choice dl{margin:0;display:grid;gap:8px}
.rest-choice dt{font-size:10px;letter-spacing:.06em;color:#8a8a8a}
.rest-choice dd{margin:2px 0 0;font-size:11px;line-height:1.6;color:#cfcfcf}
.rest-panel{border-top:1px solid #454545;background:#0b0b0b;padding:20px 22px 22px;min-width:0}
.rest-panel h4{font-family:var(--head);font-size:clamp(26px,2.6vw,36px);font-weight:500;letter-spacing:-.03em;line-height:1.05;margin:10px 0 12px}
.rest-question{font-family:var(--head);font-size:clamp(16px,1.5vw,19px);line-height:1.4;color:#f3f3f1;margin:0 0 12px}
.rest-why{font-size:11px;line-height:1.75;color:#b9b9b9;margin:0}
.rest-quote{margin:14px 0 0;padding-left:12px;border-left:1px solid var(--hi);font-family:var(--head);font-size:15px;color:#e6e6e4;line-height:1.4}
.rest-quote small{display:block;font-family:var(--ui);font-size:9.5px;letter-spacing:.06em;color:#8a8a8a;margin-top:4px}
.rest-ku{margin:0;display:grid;gap:12px}
.rest-ku dt{font-size:10px;letter-spacing:.06em;color:#8a8a8a}
.rest-ku dd{margin:3px 0 0;font-size:12px;line-height:1.65;color:#d6d6d6}
.rest-ku .unk dt{color:var(--hi)}
.rest-readings{display:grid;gap:6px;margin:10px 0 14px}
.rest-reading{display:block;width:100%;text-align:left;background:#141414;border:1px solid #333;color:#ddd;padding:12px 14px}
.rest-reading:hover{border-color:#777}
.rest-reading[aria-pressed="true"]{border-color:var(--hi);background:#16160f}
.rest-reading .lt{font-size:10px;letter-spacing:.06em;color:#9a9a9a}
.rest-reading[aria-pressed="true"] .lt{color:var(--hi)}
.rest-reading .tx{display:block;font-family:var(--head);font-size:clamp(15px,1.4vw,18px);line-height:1.35;color:#f3f3f1;margin:5px 0 7px;letter-spacing:-.01em}
.rest-reading .ln{display:block;font-size:10px;line-height:1.65;color:#a9a9a9}
.rest-reading .ln b{color:#e6e6e4;font-weight:500}
.rest-reading.open{padding:9px 14px}
.rest-reading.open .tx{font-family:var(--ui);font-size:11px;margin:0;color:#cfcfcf}
.rest-reading.open[aria-pressed="true"]{border-style:dashed;border-color:#9a9a9a;background:#141414}
.rest-answer{font-family:var(--head);font-size:clamp(17px,1.7vw,22px);line-height:1.38;color:#fff;margin:10px 0 14px;letter-spacing:-.01em}
.rest-answer.is-empty{font-family:var(--ui);font-size:12px;line-height:1.7;color:#a5a5a5;letter-spacing:0}
.rest-cut{display:grid;gap:7px;margin:0 0 18px}
.rest-cut .row{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;align-items:baseline;font-size:11px;line-height:1.55;color:#cfcfcf}
.rest-cut .tag{font-size:10px;letter-spacing:.06em;color:#111;background:var(--hi);padding:1px 6px}
.rest-cut .tag.keep{background:#2a2a2a;color:#bdbdbd}
.rest-cut .who{font-weight:500;color:#f3f3f1}
.rest-nav{display:flex;flex-wrap:wrap;gap:2px}
.rest-nav button{background:#1d1d1d;color:#d5d5d5;padding:9px 13px;font-size:10px;letter-spacing:.04em}
.rest-nav button:hover:not(:disabled){background:#2c2c2c;color:#fff}
.rest-nav button.primary{background:#eee;color:#111}
.rest-nav button:disabled{opacity:.35;cursor:default}
.rest-pick-list{display:grid;gap:2px}
.rest-pick-list button{display:grid;grid-template-columns:28px minmax(0,1fr);gap:8px;align-items:baseline;background:#141414;color:#d8d8d8;text-align:left;padding:7px 10px;font-size:10px}
.rest-pick-list button .aa{font-size:16px;line-height:1;text-align:right}
.rest-pick-list button span:last-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rest-pick-list button:hover{background:#222}
.rest-pick-list button[aria-pressed="true"]{background:#eee;color:#111}
.rest-sum{display:grid;gap:12px;margin:10px 0 18px}
.rest-sum dt{font-size:10px;letter-spacing:.06em;color:#8a8a8a}
.rest-sum dd{margin:3px 0 0;font-size:11px;line-height:1.65;color:#d6d6d6}
.rest-designers{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:22px}
.rest-des{background:#0d0d0d;padding:18px 20px 20px;border-top:2px solid #333;display:flex;flex-direction:column;gap:10px;min-width:0}
.rest-des.is-on{border-top-color:var(--hi)}
.rest-des .nm{font-size:clamp(24px,2.4vw,32px);line-height:1.1;letter-spacing:-.01em;margin:0}
.rest-des p{font-size:11px;line-height:1.7;color:#c4c4c4;margin:0}
.rest-des button{align-self:flex-start;background:#1d1d1d;color:#d5d5d5;padding:8px 12px;font-size:10px;letter-spacing:.04em}
.rest-des button:hover{background:#2c2c2c;color:#fff}
.rest-glyphs{display:grid;grid-template-columns:repeat(3,auto);justify-content:center;gap:0 12px;font-size:clamp(15px,1.6vw,21px);line-height:1.25;color:#d6d6d6}
.rest-glyphs span:nth-child(2){font-family:Georgia,'Times New Roman',serif}.rest-glyphs span:nth-child(3){font-family:var(--ui)}.rest-glyphs span:nth-child(4){font-family:'Palatino Linotype',Palatino,serif;font-style:italic}.rest-glyphs span:nth-child(5){font-family:system-ui,sans-serif;font-weight:700}.rest-glyphs span:nth-child(6){font-family:'Courier New',monospace}
.rest-node.is-lean{border-color:#b7c94a}
.rest-node.is-lean .ct{display:flex;background:transparent;border:1px solid var(--hi);color:var(--hi)}
.rest-lean{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:2px;margin:2px 0 2px}
.rest-lean button{background:#1a1a1a;color:#bdbdbd;padding:8px 2px;font-size:10px;letter-spacing:.04em;white-space:nowrap}
.rest-lean button:hover{background:#262626;color:#fff}
.rest-lean button[aria-pressed="true"]{background:#eee;color:#111}
.rest-lean button.mid[aria-pressed="true"]{background:#333;color:#eee}
.rest-shape{display:block;width:100%;height:100%}
.rest-choice-circle svg{width:86%;height:86%}
.rest-des .mini{flex:none;width:88px;height:88px;border-radius:50%;background:#121212;border:1px solid #333;display:grid;place-items:center}
.rest-des .mini svg{width:84%;height:84%}
.rest-des .head{display:flex;gap:16px;align-items:center}
.rest-des .head p{font-family:var(--head);font-size:clamp(16px,1.4vw,19px);line-height:1.25;color:#f3f3f1;margin:0;letter-spacing:-.01em}
.rest-key{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:10px;letter-spacing:.05em;color:#9a9a9a;margin:0 0 6px}
.rest-key i{display:inline-block;width:18px;height:0;border-top:1px solid var(--hi);vertical-align:middle;margin-right:6px}
.rest-key i.d{border-top:1px dashed #b5b5b5}
.rest-ku{grid-template-columns:1fr 1fr;gap:10px 18px}
.rest-poles{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:12px 0 0}
.rest-poles .rest-reading{height:100%}
.rest-scale{margin:16px 0 18px;padding:14px 12px 10px;background:#111;border:1px solid #262626}
.rest-scale-q{font-size:10px;letter-spacing:.06em;color:#cfcfcf;margin:0 0 10px}
.rest-scale-ends{display:flex;justify-content:space-between;gap:12px;font-family:var(--head);font-size:14px;color:#f3f3f1;margin:0 0 10px}
.rest-scale-ends span:last-child{text-align:right}
.rest-track{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
.rest-track::before{content:'';position:absolute;left:10%;right:10%;top:10px;border-top:1px solid #444}
.rest-stop{position:relative;background:none;display:flex;flex-direction:column;align-items:center;gap:7px;padding:0 0 4px;color:#9a9a9a;font-size:10px;letter-spacing:.05em}
.rest-stop .dot{width:20px;height:20px;border-radius:50%;border:1px solid #777;background:#0b0b0b;transition:background .15s,border-color .15s}
.rest-stop.mid .dot{width:14px;height:14px;margin:3px 0}
.rest-stop:hover .dot{border-color:#ddd}
.rest-stop[aria-pressed="true"]{color:#f3f3f1}
.rest-stop[aria-pressed="true"] .dot{background:var(--hi);border-color:var(--hi)}
.rest-stop.mid[aria-pressed="true"] .dot{background:#bbb;border-color:#bbb}
.rest-stop .them{font-size:9.5px;letter-spacing:.04em;color:#cfcfcf;line-height:1.3;text-align:center;border-top:1px dashed #777;padding-top:3px;margin-top:1px}
.rest-stop.is-them .dot{outline:1px dashed #cfcfcf;outline-offset:3px}
.rest-trade{width:100%}
.rest-cmpbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;font-size:10px;letter-spacing:.04em;color:#cfcfcf}
.rest-cmpbar button{background:#1d1d1d;color:#d5d5d5;padding:5px 9px;font-size:10px;letter-spacing:.05em}
.rest-sumshape{display:flex;gap:16px;align-items:center;margin:14px 0 4px}
.rest-sumshape .circ{flex:none;width:120px;height:120px;border-radius:50%;background:#121212;border:1px solid #3a3a3a;display:grid;place-items:center}
.rest-sumshape .circ svg{width:86%;height:86%}
.rest-sumshape p{font-size:11px;line-height:1.65;color:#cfcfcf;margin:0}
.rest-des-note{font-size:11px;line-height:1.7;color:#a9a9a9;margin:26px 0 0;max-width:760px}
.rest-tally{font-size:10px;letter-spacing:.04em;color:#9a9a9a;line-height:1.7;margin:16px 0 0}
@media(max-width:1100px){
  .rest-diagram{grid-template-columns:1fr}
  .rest-ring-col{max-width:560px;width:100%;justify-self:center}
}
@media(max-width:760px){
  .rest-diagram{grid-template-columns:1fr;gap:22px}
  .rest-lines,.rest-arc b{display:none}
  .rest-ring{aspect-ratio:auto;display:grid;grid-template-columns:1fr 1fr;gap:6px}
  .rest-core{position:static;transform:none;width:auto;height:auto;border-radius:0;grid-column:1/-1;padding:16px;margin-bottom:6px}
  .rest-arc{position:static;transform:none;grid-column:1/-1;font-size:10px;margin-top:10px}
  .rest-node{position:relative;left:auto;top:auto;transform:none;width:auto;aspect-ratio:auto;border-radius:0;flex-direction:row;justify-content:flex-start;gap:10px;padding:12px;text-align:left}
  .rest-node .lb{font-size:14px}
  .rest-node .ct{top:50%;right:10px;transform:translateY(-50%)}
  .rest-node{padding-right:44px}
  .rest-to{flex-direction:column}
  .rest-to>.rest-arrow:first-of-type{display:none}
  .rest-choice{display:grid;grid-template-columns:110px 1fr;gap:6px 16px;align-items:center}
  .rest-choice-circle{width:110px}
  .rest-choice-circle span{font-size:44px}
  .rest-choice>:not(.rest-choice-circle){grid-column:1/-1}
  .rest-choice>.rest-choice-name{grid-column:2;grid-row:1}
  .rest-designers{grid-template-columns:1fr}
  .rest-key{display:none}
  .rest-dash-note{display:none}
  .rest-panel{padding:18px 16px}
  .rest-poles{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){.rest-cand,.rest-node,.rest-trade,.rest-choice-circle{transition:none}}

/* V41: three pages (Collection, Perception, Judgment) in one file, switched by the address hash. */
body[data-page="collection"] #perception,body[data-page="collection"] #judgment{display:none!important}
body[data-page="perception"] .collection,body[data-page="perception"] #judgment{display:none!important}
body[data-page="judgment"] .collection,body[data-page="judgment"] #perception{display:none!important}
.project-nav a[aria-current="page"]{color:var(--head-ink,#111);font-weight:600;text-decoration:underline;text-underline-offset:5px}
/* Landing: what Google Fonts is, and what the data, tags and scores are, before the wall. */
/* Next page links at the end of each page. */
.page-next{display:flex;justify-content:space-between;align-items:baseline;gap:18px;flex-wrap:wrap;border-top:1px solid #555;margin-top:60px;padding:22px 0 6px}
.page-next span{font-size:10px;letter-spacing:.06em;color:#999}
.page-next a{font-family:var(--head);font-size:clamp(22px,3vw,40px);font-weight:500;letter-spacing:-.03em;text-decoration:none;color:#f3f3f1}
.page-next a:hover,.page-next a:focus-visible{color:var(--hi)}
.threshold-hint a{color:#f3f3f1}
/* Perception: the sorting letters lead the page. */
#sortCanvas{height:clamp(480px,72vh,760px)}
@media(max-width:700px){#sortCanvas{height:470px}}
.perception-shared{border-top:1px solid #555;padding-top:28px;margin:0 0 30px}
.perception-shared .chapter-status{border-top:0;padding-top:0}
/* Pairs: after a guess, the overlay takes the place of the two specimens. */
.pair-stage[data-state="reveal"] .pair-specimens{display:none}
.pair-stage>.pair-overlay[hidden]{display:none}
.pair-stage>.pair-overlay{border:1px solid #2c2c2c}
.pair-stage>.pair-overlay #pairCanvas{height:250px}
/* Judgment: one business in YOUR OWN BRIEF. */
.case-pair.is-single{grid-template-columns:minmax(0,1fr) minmax(0,1fr);max-width:none;align-items:start}

/* V42: landing poster. A visible 12-column grid; the title, four explanation boxes and three section bars are placed on it.
   The bars cross the edges of the boxes beneath them. Light paper, black blocks, neon on hover. */
.landing{--paper:var(--head-bg,#d9d9d5);--ink:#111;--bar:clamp(96px,8.4vw,116px);container-type:inline-size;background:var(--paper);color:var(--ink);font-family:var(--ui)}
.poster{--pad:clamp(18px,4vw,62px);--col:calc((100cqi - 2 * var(--pad)) / 12);position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  grid-template-rows:[r1] auto [r2] clamp(36px,3.6vw,60px) [r3] var(--bar) [r4] auto [r5] var(--bar) [r6] clamp(16px,1.8vw,28px) [r7] var(--bar) [r8] auto [r9] 34px [end];
  padding:26px var(--pad) 0}
/* the grid underneath: one hairline per column */
.poster::before{content:'';position:absolute;inset:0 var(--pad);pointer-events:none;z-index:0;border-right:1px solid rgba(0,0,0,.1);
  background:linear-gradient(to right,rgba(0,0,0,.1) 0 1px,transparent 1px) 0 0/var(--col) 100% repeat-x}
.poster>*{position:relative;min-width:0}
.pz-intro{grid-column:1/6;grid-row:r1;z-index:2;align-self:start;padding:6px 18px 18px 0;font-size:12px;line-height:1.7;max-width:46ch}
.pz-intro p{margin:0 0 10px}
.pz-intro .kick{font-size:10px;letter-spacing:.06em;color:#555;margin-bottom:12px}
/* title blocks */
.pz-block{z-index:3;background:#0a0a0a;color:#f3f3f1;display:flex;flex-direction:column;justify-content:space-between;gap:10px;padding:clamp(14px,1.4vw,22px)}
.pz-block .big{display:block;line-height:.9;letter-spacing:-.02em}
.pz-block .cap{font-size:10px;letter-spacing:.06em;color:#9a9a9a;line-height:1.4}
.pz-title{grid-column:2/7;grid-row:r2/r5}
.pz-title .big{font-family:var(--ui);font-weight:700;text-transform:uppercase;font-size:calc((var(--col) * 5 - 2 * clamp(14px,1.4vw,22px)) / 5.5)}
.pz-says{grid-column:7/10;grid-row:r4/r6}
.pz-says .big{font-family:var(--head);font-weight:700;font-size:calc((var(--col) * 5 - 2 * clamp(14px,1.4vw,22px)) / 5.5)}
/* explanation boxes: a frame that runs under a bar, and text that stays clear of it */
.pz-frame{z-index:1;border:1px solid var(--ink);pointer-events:none}
.pz-box{z-index:2;padding:16px 18px 18px;font-size:11.5px;line-height:1.7}
.pz-box .ix{display:block;font-size:10px;color:#555;letter-spacing:.06em;margin-bottom:6px}
.pz-box h2{font-family:var(--head);font-size:clamp(22px,2vw,30px);font-weight:500;letter-spacing:-.02em;line-height:1.05;margin:0 0 12px}
.pz-box p{margin:0 0 10px}.pz-box p:last-child{margin-bottom:0}
.pz-box b{font-weight:600}
.pz-box a{color:inherit;text-underline-offset:3px}
.pz-tags{display:flex;flex-wrap:wrap;gap:3px;margin:2px 0 10px}
.pz-tags span{border:1px solid rgba(0,0,0,.45);padding:2px 5px;font-size:10px;letter-spacing:.04em}
.pz-tags span.is-b{background:var(--ink);color:var(--hi);border-color:var(--ink)}
.f-gf{grid-column:7/12;grid-row:r1/r4}  .b-gf{grid-column:7/12;grid-row:r1}
.f-data{grid-column:10/13;grid-row:r4/r8} .b-data{grid-column:10/13;grid-row:r4/r7}
.b-tags{grid-column:2/6;grid-row:r7/r9;align-self:start;border:1px solid var(--ink)}
.b-score{grid-column:7/11;grid-row:r8/r9;align-self:start;border:1px solid var(--ink);border-top:0}
/* the three section bars */
.pz-bar{z-index:4;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto 1fr auto;column-gap:16px;align-content:stretch;
  background:#f3f3f1;color:var(--ink);border:1.5px solid var(--ink);padding:10px 16px 11px;text-decoration:none;transition:background .15s}
.pz-bar .bl{grid-column:1;font-size:10px;letter-spacing:.06em}
.pz-bar .bt{grid-column:1;align-self:center;font-family:var(--head);font-size:clamp(24px,2.5vw,38px);font-weight:500;letter-spacing:-.03em;line-height:1}
.pz-bar .bd{grid-column:1;font-size:10px;line-height:1.45;color:#333}
.pz-bar .ba{grid-column:2;grid-row:1/-1;align-self:center;font-size:clamp(24px,2.4vw,36px);line-height:1}
.pz-bar:hover,.pz-bar:focus-visible{background:var(--hi)}
.pz-bar:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.bar-col{grid-column:7/13;grid-row:r3}
.bar-per{grid-column:1/7;grid-row:r5}
.bar-jud{grid-column:6/12;grid-row:r7}
.pz-foot{grid-column:1/-1;grid-row:end;z-index:2;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:1px solid var(--ink);margin-top:22px;padding:10px 0 12px;font-size:10px;letter-spacing:.05em}
.pz-foot a{color:inherit}
.poster{grid-template-rows:[r1] auto [r2] clamp(36px,3.6vw,60px) [r3] var(--bar) [r4] auto [r5] var(--bar) [r6] clamp(16px,1.8vw,28px) [r7] var(--bar) [r8] auto [r9] 34px [end] auto}
#collectionWall{scroll-margin-top:var(--head-h,70px)}
/* below 1000px: one column; the bars step down like a schedule */
@media(max-width:999px){
  .poster{display:flex;flex-direction:column;padding:18px var(--pad) 0}
  .poster::before{background-size:calc((100% ) / 6) 100%}
  .pz-frame{display:none}
  .pz-intro{padding:0 0 18px;max-width:none}
  .pz-title .big{font-size:calc((100cqi - 2 * var(--pad) - 2 * 16px) / 5.6)}
  .pz-says{align-self:flex-end;width:62%;margin-top:-22px}
  .pz-title .cap{max-width:34%}
  .b-score{border-top:1px solid var(--ink)}
  .pz-says .big{font-size:calc((100cqi - 2 * var(--pad) - 2 * 16px) / 5.6)}
  .pz-box{border:1px solid var(--ink);margin-top:14px;background:transparent}
  .pz-bar{min-height:92px}
  .bar-col{margin:22px 18% 0 0}.bar-per{margin:-8px 9% 0 9%}.bar-jud{margin:-8px 0 0 18%}
  .pz-foot{margin-top:24px}
}

/* V43: the masthead loses its bottom rule and gains a heavy top bar. On the landing poster it stays hidden
   until the collection reaches the top of the window; inside the three areas it is always there. */
.top{box-shadow:inset 0 6px 0 #111;border-bottom:0;padding-top:20px;transition:transform .28s ease,visibility 0s linear 0s}
@media(max-width:520px){.top{padding-top:17px}}
body.head-off .top,body:not([data-page]) .top{transform:translateY(-100%);visibility:hidden;transition:transform .28s ease,visibility 0s linear .28s}
.collection{padding-top:0}
.landing{box-shadow:inset 0 6px 0 #111}
.poster{padding-top:clamp(34px,3vw,48px)}
/* the project intro: a wide, short box toward the centre, resting just above the title */
.pz-intro{grid-column:3/7;grid-row:r1;align-self:end;max-width:none;margin:0 clamp(12px,1.4vw,22px) clamp(16px,1.8vw,26px) 0;padding:14px 18px 15px;border:1px solid var(--ink);font-size:12px;line-height:1.65}
.pz-intro .kick{margin-bottom:8px}
.pz-intro p:last-child{margin-bottom:0}
/* the tags box starts just under The Perception, a little above The Judgement */
.b-tags{grid-row:r6/r9}
@media(prefers-reduced-motion:reduce){.top,body.head-off .top{transition:none}}
@media(max-width:999px){.pz-intro{margin:0 0 16px;align-self:stretch}}

/* V44: the project intro reads as a lead, not a container: no frame, set in Plex Sans. */
.pz-intro{border:0;padding:0;font-size:clamp(15px,1.15vw,17px);line-height:1.5;font-family:var(--head);letter-spacing:-.005em}
.pz-intro .kick{font-family:var(--ui);font-size:10px;line-height:1.6;letter-spacing:.06em;margin-bottom:10px}
/* Why Business: the five feelings most often scored 80 or more */
.pz-why{margin:14px 0 0;padding-top:12px;border-top:1px solid rgba(0,0,0,.35)}
.pz-why h3{font-family:var(--ui);font-size:10px;font-weight:600;letter-spacing:.06em;margin:0 0 6px}
.pz-rank{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:3px}
.pz-rank li{display:grid;grid-template-columns:9.5em minmax(0,1fr) 3.2em;align-items:center;gap:8px;font-size:10px;letter-spacing:.04em}
.pz-rank .bar{height:9px;background:rgba(0,0,0,.28)}
.pz-rank li.is-b .bar{background:var(--ink)}
.pz-rank li.is-b{font-weight:600}
.pz-rank .n{text-align:right;font-variant-numeric:tabular-nums}
.pz-rank-cap{font-size:10px;letter-spacing:.05em;color:#555;margin:9px 0 0}

/* V45: the score's label sits beside the number, small; the number stays large. */
.value-wrap{display:flex;align-items:flex-end;gap:clamp(10px,1.2vw,16px);flex-shrink:0}
.value-wrap .value-label{margin:0 0 .5em;text-align:right;line-height:1.45;letter-spacing:.04em}
@media(max-width:520px){.value-wrap{gap:8px}.value-wrap .value-label{font-size:9.5px}}
/* Data + method: sections inside the panel */
#methods h3{font-size:10px;font-weight:600;letter-spacing:.07em;color:#fff;margin:24px 0 4px;padding-top:14px;border-top:1px solid #444}
#methods h3:first-of-type{margin-top:8px}
#methods a{color:#eaeaea;text-underline-offset:3px}

/* V48: 02.1 header in three columns (title, two paragraphs), the chart notes as pop-ups, the reading in two columns. */
.form-study .form-head{grid-template-columns:max-content minmax(0,1fr);column-gap:clamp(28px,4vw,64px);align-items:end;margin-bottom:16px}
.form-study .form-intro{max-width:none;display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,2.4vw,36px)}
.form-study .form-intro p{margin:0;color:#cfcfcf}
.form-study .form-intro .form-instructions,.perception-shared .pair-intro .form-instructions,.brief-intro .brief-examples.form-instructions{font-size:12px;line-height:1.6;border-left:1px solid var(--hi);padding-left:16px}
.form-study .form-intro .form-measurement-note{margin-top:12px;font-size:12px;line-height:1.5;color:#aaa}
.form-notes{display:flex;flex-wrap:wrap;gap:6px 26px;margin:0 0 20px}
.form-notes .score-help{margin-top:0}
.form-notes .score-help-card{top:calc(100% + 10px);bottom:auto;left:0;width:min(560px,calc(100vw - 60px));color:#cfcfcf}
.form-notes .score-help:last-child .score-help-card{left:auto;right:0}
.form-reading{max-width:none;display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,3vw,48px);align-items:start}
.form-reading p{margin:0}
.form-reading-column{display:flex;flex-direction:column;gap:12px}
.form-reading .form-reading-column .form-claim{margin:0}
.form-reading .form-claim{display:block;font-family:var(--head);font-size:clamp(24px,2.4vw,36px);font-weight:500;letter-spacing:-.02em;line-height:1.1;color:#fff;margin:0 0 14px}
.form-help:not([open]) .score-help-card{display:none}
/* V50: the measures as a definition list */
.measure-list{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:7px 16px;margin:4px 0 14px}
.measure-list dt{color:#fff;font-weight:600;letter-spacing:.02em}
.measure-list dd{margin:0}
@media(max-width:520px){.measure-list{grid-template-columns:1fr;gap:2px}.measure-list dd{margin-bottom:8px}}
@media(max-width:700px){
  .form-notes .score-help-card{position:fixed;left:14px;right:14px;top:calc(var(--head-h,70px) + 14px);width:auto;max-height:calc(100dvh - var(--head-h,70px) - 34px);overflow:auto;padding-top:38px}
  .form-notes .popup-close{top:10px;right:10px}
  .overlay-bottom{grid-template-columns:1fr}
}
@media(max-width:900px){
  .form-study .form-head{grid-template-columns:1fr}
  .form-study .form-intro,.form-reading{grid-template-columns:1fr}
  .form-notes .score-help:last-child .score-help-card{left:0;right:auto}
}

/* V51 · 02.2: hovering (or focusing) a top family turns its card into a specimen: letters, words, a sentence. */
.high-card{container-type:inline-size}
.high-face{display:grid;min-width:0;align-content:start}
.high-face>*{grid-area:1/1;min-width:0;transition:opacity .22s ease}
.high-spec{display:grid;gap:7px;align-content:start;opacity:0;color:#f2f2f0}
.high-spec .hs-letters{font-size:clamp(20px,13.5cqi,34px);line-height:1;white-space:nowrap;overflow:hidden}
.high-spec .hs-words{font-size:clamp(13px,7.6cqi,19px);line-height:1.1;white-space:nowrap;overflow:hidden}
.high-spec .hs-sentence{font-size:clamp(10px,5.1cqi,12.5px);line-height:1.35;color:#cfcfcf}
.high-card:hover .high-sample,.high-card:focus-visible .high-sample{opacity:0}
.high-card:hover .high-spec,.high-card:focus-visible .high-spec{opacity:1}
/* V51 · 02.3: the size test sits beside the verdict as a third column once a pair is revealed. */
.pair-stage[data-state="reveal"] .pair-lower{grid-template-columns:minmax(190px,.55fr) minmax(0,1fr) minmax(0,1.25fr);column-gap:clamp(40px,4.6vw,72px)}
.pair-lower .pair-detail{display:block;margin:0;padding:0;border:0}
.pair-lower .pair-sizes .size-grid{grid-template-columns:40px minmax(0,1fr);gap:10px 12px;margin-top:12px;max-width:none}
@media(max-width:900px){.pair-stage[data-state="reveal"] .pair-lower{grid-template-columns:1fr}}

/* V53 · 03.2: the intro beside the title in three columns */
.brief-head{grid-template-columns:max-content minmax(0,1fr);gap:clamp(32px,4vw,64px)}
.brief-head .brief-intro{max-width:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.2vw,32px);align-items:start}
.brief-head .brief-intro>p{margin:0}
@media(max-width:1200px){.brief-head{grid-template-columns:1fr;gap:22px}}
@media(max-width:760px){.brief-head .brief-intro{grid-template-columns:1fr;gap:12px}}
/* V53 · each business ends with its own trade-off */
.case-col{cursor:default}
.case-trade{display:flex;flex-direction:column;gap:8px;border-top:1px solid #2a2a2a;padding-top:12px;margin-top:6px}
.case-trade:empty{display:none}
.case-trade-intro{font-size:11px;line-height:1.6;color:#cfcfcf;margin:0}
.case-trade .trade-cards{grid-template-columns:1fr;gap:6px}
.case-trade .trade-card{min-height:0;padding:12px 14px;background:#161616}
.case-trade .trade-label{display:flex;justify-content:space-between;gap:12px;align-items:baseline;flex-wrap:wrap}
.trade-sub{font-size:9.5px;font-weight:400;letter-spacing:.05em;color:#9a9a9a}
.case-trade .trade-word{font-size:clamp(24px,2.3vw,34px);margin:10px 0 4px}
.case-trade .trade-meta{min-height:0}
.case-trade .trade-result{font-size:12px;line-height:1.6;margin:2px 0 0;min-height:0;max-width:none}
.case-trade .trade-result:empty{display:none}
#tradeTally{margin-top:16px}

/* V54 · YOUR OWN BRIEF: the trade-off column beside the brief */
.case-side{cursor:default;align-self:start;position:sticky;top:calc(var(--head-h,70px) + 16px)}
.case-side .case-trade{border-top:0;padding-top:0;margin-top:0}
@media(max-width:900px){.case-pair.is-single{grid-template-columns:minmax(0,1fr)}.case-side{position:static}}
/* V55: the sample shown when no trade-off is needed */
.case-trade .case-spec{margin-top:6px}

/* V58 · closing: who decides, as a chain that brightens toward the reader */
.closing .closing-q{margin-bottom:34px}
.verdict-chain{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) minmax(0,1.45fr);gap:0;align-items:stretch;position:relative}
.verdict-chain::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,#333 0%,#9a9a9a 55%,var(--hi) 80%)}
.vc-step,.vc-you{display:flex;flex-direction:column;gap:10px;padding:22px 26px 26px 0;min-width:0;position:relative}
.vc-step{padding-bottom:calc(26px + var(--lift,0) * 34px)} /* each step sits a little higher, climbing toward the reader */
.vc-step::after{content:"→";position:absolute;right:12px;top:18px;font-size:14px;color:#6a6a6a}
.vc-where{font-size:10px;letter-spacing:.06em;color:#8a8a8a;text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
a.vc-where:hover,a.vc-where:focus-visible{color:#fff;text-decoration:underline;text-underline-offset:4px}
.vc-who{font-family:var(--head);font-weight:500;font-size:clamp(26px,2.7vw,42px);letter-spacing:-.03em;line-height:1.02;color:var(--vc);margin-top:auto}
.vc-what{font-size:12px;line-height:1.5;color:#bdbdbd}
.vc-you{background:var(--hi);color:#0b0b0b;padding:22px 24px 24px;margin-top:2px}
.vc-you .vc-where{color:#0b0b0b;font-weight:600}
.vc-you .vc-who{font-size:clamp(56px,6.2vw,104px);color:#0b0b0b;letter-spacing:-.06em}
.vc-you .vc-what{color:#1d1d1d;font-size:13px}
.vc-mine{border-top:1px solid rgba(0,0,0,.35);padding-top:10px;margin-top:4px;font-size:10px;line-height:1.5;color:#1d1d1d}
.vc-mine-h{display:block;font-size:10px;letter-spacing:.06em;font-weight:600;margin-bottom:6px}
.vc-mine ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.vc-mine li{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:10px;align-items:baseline}
.vc-biz{font-size:10px}
.vc-kept{font-size:9.5px;letter-spacing:.06em;text-align:right}
.vc-font{grid-column:1/-1;font-size:22px;line-height:1.15;color:#0b0b0b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vc-stances,.vc-empty{margin:8px 0 0;font-size:10px;letter-spacing:.03em}
@media(max-width:900px){
  .verdict-chain{grid-template-columns:1fr}
  .verdict-chain::before{top:0;bottom:0;left:0;right:auto;width:2px;height:auto;background:linear-gradient(180deg,#333 0%,#9a9a9a 55%,var(--hi) 80%)}
  .vc-step{padding:16px 0 18px 22px;border-bottom:1px solid #222}
  .vc-step{padding-bottom:18px}
  .vc-step::after{content:"↓";right:0;top:16px}
  .vc-who{margin-top:0}
  .vc-you{margin:12px 0 0;padding:20px}
}

/* V59: one "next" link on every page: mid-size, boxed, neon on hover or focus */
.page-next{align-items:center}
.threshold-hint p{display:flex;align-items:center;justify-content:flex-end;gap:16px;flex-wrap:wrap}
.threshold-hint .next-note:empty{display:none}
.page-next a.next-link,.threshold-hint a.next-link{display:inline-flex;align-items:center;gap:12px;font-family:var(--head);font-size:clamp(15px,1.5vw,20px);font-weight:500;letter-spacing:.01em;line-height:1.2;color:#f3f3f1;text-decoration:none;border:1px solid #5a5a5a;padding:12px 18px;white-space:nowrap;transition:background .18s,color .18s,border-color .18s}
.page-next a.next-link:hover,.page-next a.next-link:focus-visible,.threshold-hint a.next-link:hover,.threshold-hint a.next-link:focus-visible{background:var(--hi);border-color:var(--hi);color:#0b0b0b;outline:none}
.page-next a.next-link span,.threshold-hint a.next-link span{font-size:inherit;letter-spacing:0;color:inherit;transition:transform .18s}
.threshold-hint>span{font-size:10px;letter-spacing:.06em;color:#999}
.next-link:hover span,.next-link:focus-visible span{transform:translateX(3px)}
@media(max-width:520px){.page-next a.next-link,.threshold-hint a.next-link{white-space:normal;font-size:15px;padding:11px 14px}}

/* V62 · 03.1: the profile chart, set in type */
.profile-wrap{position:relative}
.profile-type{position:absolute;inset:0;pointer-events:none}
.pt-word{position:absolute;pointer-events:auto;background:none;border:0;padding:0 0 10px;color:#f3f3f1;text-align:left;display:flex;flex-direction:column;gap:3px;cursor:pointer;animation:ptIn .35s ease both;animation-delay:calc(var(--i,0) * 70ms)}
.pt-c{transform:translate(-50%,-100%);align-items:center;text-align:center}
.pt-l{transform:translate(-6px,-100%);align-items:flex-start}
.pt-r{transform:translate(calc(-100% + 6px),-100%);align-items:flex-end;text-align:right}
.pt-w{font-size:clamp(18px,2.1vw,30px);line-height:1;white-space:nowrap;padding:4px 8px;background:rgba(8,8,8,.86);box-shadow:0 0 0 1px #2c2c2c}
.pt-word:hover .pt-w,.pt-word:focus-visible .pt-w{box-shadow:0 0 0 1px var(--hi)}
.pt-word:focus-visible{outline:none}
.pt-m{font-size:9.5px;letter-spacing:.05em;color:#a8a8a8;white-space:nowrap;background:rgba(8,8,8,.86);padding:1px 4px}
@keyframes ptIn{from{opacity:0;translate:0 6px}to{opacity:1;translate:0 0}}
.feel-pick{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:14px 0 0}
.feel-pick-l{font-size:10px;letter-spacing:.06em;color:#8a8a8a;margin-right:8px}
.feel-pick button{display:inline-flex;align-items:center;gap:7px;background:#151515;color:#c8c8c8;border:1px solid #2e2e2e;padding:7px 10px;font-size:10px;letter-spacing:.05em}
.feel-pick button i{display:block;width:14px;height:2px}
.feel-pick button:hover{border-color:#777;color:#fff}
.feel-pick button[aria-pressed="true"]{background:#eee;color:#111;border-color:#eee}
.profile-cap{font-size:11px;line-height:1.6;color:#bdbdbd;margin:10px 0 0;max-width:820px;min-height:36px}
.profile-cap b{color:#fff;font-weight:600}
.profile-fonts{display:block;margin-top:6px;font-size:10px;letter-spacing:.05em;color:#8a8a8a}
@media(max-width:640px){.pt-w{font-size:14px;padding:3px 5px}.pt-m{display:none}.pt-word{padding-bottom:7px}}

/* V64 · 03.1: how many carry the tag */
.volume{margin-top:34px;border-top:1px solid #2c2c2c;padding-top:18px;--lv2:var(--hi)}
.volume-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.8fr);gap:40px;align-items:end}
.volume-title{font-family:var(--head);font-weight:500;font-size:clamp(22px,2.4vw,32px);letter-spacing:-.02em;margin:8px 0 0}
.volume-title span{font-family:var(--ui);font-size:10px;letter-spacing:.05em;color:#8a8a8a;font-weight:400}
.volume-note{font-size:11px;line-height:1.65;color:#bdbdbd;margin:0;max-width:460px}
.volume-legend{display:flex;flex-wrap:wrap;gap:16px;margin:16px 0 10px;font-size:10px;letter-spacing:.05em;color:#bdbdbd}
.volume-legend span{display:inline-flex;align-items:center;gap:6px}
.volume-legend i{display:block;width:12px;height:12px}
.volume-legend .lv2{background:var(--lv2)}.volume-legend .lv1{background:#7a7a7a}.volume-legend .lv0{background:#262626;box-shadow:inset 0 0 0 1px #3a3a3a}
#volumeChart{display:block;width:100%;height:280px;cursor:crosshair}
.volume-hover{font-size:10px;letter-spacing:.05em;color:#cfcfcf;min-height:16px;margin:8px 0 0}
@media(max-width:900px){.volume-head{grid-template-columns:1fr;gap:10px}#volumeChart{height:230px}}

/* V65 · 03.1: the volume strip sits right under the line chart, on the same columns */
.feel-pick{margin:0 0 12px}
.volume{margin-top:4px;border-top:0;padding-top:0}
.volume-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 18px;margin:0 0 6px}
.volume-head b{color:#fff;font-weight:600}
.volume-sub{font-size:9.5px;letter-spacing:.05em;color:#7a7a7a}
#volumeChart{height:150px}
.volume-hover{margin:4px 0 0}
@media(max-width:900px){#volumeChart{height:130px}}
@media(max-width:640px){.pt-w{font-size:12px}.pt-word.pt-high{transform:translate(-50%,calc(-100% - 18px))}}

/* V66 · 03.1: one figure, the volume chart turned on its side beside the lines */
.profile-duo{display:grid;grid-template-columns:minmax(0,1fr) clamp(250px,22vw,330px);gap:clamp(20px,2.4vw,40px);align-items:stretch}
.profile-duo .volume{margin:0;padding:0;border:0;min-width:0}
#volumeChart{display:block;width:100%;height:360px;cursor:crosshair}
.volume-samples{margin:14px 0 0;min-height:64px}
.vs-prompt,.vs-head{font-size:11px;line-height:1.6;color:#bdbdbd;margin:0}
.vs-prompt b,.vs-head b{color:#fff;font-weight:600}
.vs-row{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:10px}
.vs-item{display:flex;flex-direction:column;gap:3px;min-width:0}
.vs-w{font-size:clamp(20px,2vw,28px);line-height:1.1;color:#f3f3f1;white-space:nowrap}
.vs-n{font-size:9.5px;letter-spacing:.05em;color:#8a8a8a;white-space:nowrap}
@media(max-width:900px){.profile-duo{grid-template-columns:1fr}#volumeChart{height:300px}}

/* V67: no frame around the words on the line; samples and summary side by side */
.pt-w{box-shadow:none}
.pt-word:hover .pt-w,.pt-word:focus-visible .pt-w{box-shadow:none;color:var(--hi)}
.profile-foot{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(0,1fr);gap:clamp(24px,3vw,48px);align-items:start;margin-top:16px}
.profile-foot .volume-samples,.profile-foot .profile-cap{margin:0}
.profile-foot .vs-row{gap:8px 20px}
@media(max-width:900px){.profile-foot{grid-template-columns:1fr;gap:16px}}

/* LANDING BACKGROUND (v68): the letter a from every design, on the poster's columns; soft everywhere, sharp around the cursor */
.landing{position:relative;overflow:hidden}
.landing-bg{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;display:block}
.landing>.poster{z-index:1}
.landing.has-bg .poster::before{display:none} /* the letters make the columns visible, so the hairlines go */

/* V69: a shorter landing poster. Shorter bars and gaps, wider tags and scores boxes, Why Business as a pop-up from the top of the tags box. */
.pz-box{padding:14px 18px 15px}
.pz-box h2{margin:0 0 9px}
.pz-why{position:absolute;top:19px;right:18px;margin:0;padding:0;border:0}
.pz-why summary{display:inline-block;list-style:none;cursor:pointer;font-size:10px;font-weight:600;letter-spacing:.06em;text-decoration:underline;text-underline-offset:3px}
.pz-why summary::-webkit-details-marker{display:none}
.pz-why summary::after{content:' ↗'}
.pz-why summary:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.pz-why-card{position:absolute;z-index:8;right:-6px;top:calc(100% + 10px);width:min(430px,calc(100vw - 60px));padding:22px 22px 20px;
  background:#f3f3f1;border:1.5px solid var(--ink);box-shadow:0 18px 50px rgba(0,0,0,.28);font-size:11px;line-height:1.6}
.pz-why-card>p:first-of-type{margin:0}
.b-tags:has(.pz-why[open]){z-index:6}
@media(min-width:1000px){
  .landing{--bar:clamp(86px,6.5vw,96px)}
  .poster{padding-top:clamp(22px,2vw,32px);
    grid-template-rows:[r1] auto [r2] clamp(14px,1.4vw,24px) [r3] var(--bar) [r4] auto [r5] var(--bar) [r6] clamp(10px,1vw,16px) [r7] var(--bar) [r8] auto [r9] 10px [end] auto}
  .pz-intro{margin-bottom:clamp(12px,1.2vw,18px)}
  .pz-bar{padding:8px 16px 9px}
  .pz-bar .bt{font-size:clamp(22px,2.1vw,32px)}
  .b-tags{grid-column:1/6}
  .b-score{grid-column:7/13;border-top:1px solid var(--ink)}
  .pz-foot{margin-top:0;padding:8px 0 10px}
}

/* V70: closing answer on two lines; the font carried into 03.3 */
.vc-you .vc-who{font-size:clamp(40px,4.3vw,74px);line-height:.98;letter-spacing:-.05em}
.vc-you .vc-what{font-size:13px;line-height:1.5;max-width:30ch}
.rest-carry{margin:0 0 24px}
.rest-carry.is-empty p{margin:0;font-size:11px;line-height:1.6;color:#9a9a9a;border-left:2px solid #444;padding:3px 0 3px 12px}
.rest-carry.is-on{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:14px clamp(20px,3vw,44px);align-items:end;border:1.5px solid var(--hi);padding:20px 24px 22px}
.rc-tag{grid-column:1/-1;font-size:10px;font-weight:600;letter-spacing:.06em;color:var(--hi)}
.rc-word{display:block;min-width:0;font-size:clamp(38px,5vw,82px);line-height:1.05;color:#fff;overflow-wrap:anywhere}
.rc-side{display:flex;flex-direction:column;gap:7px;min-width:0}
.rc-name{font-family:var(--head);font-size:clamp(18px,1.6vw,24px);font-weight:500;letter-spacing:-.02em;color:#fff}
.rc-meta{font-size:10px;letter-spacing:.05em;color:#bdbdbd}
.rc-side p{margin:4px 0 0;font-size:12px;line-height:1.55;color:#d0d0d0}
.rc-side a{margin-top:4px;color:#fff;font-size:10px;letter-spacing:.06em;text-underline-offset:3px}
.rc-side a:hover,.rc-side a:focus-visible{color:var(--hi)}
@media(max-width:760px){.rest-carry.is-on{grid-template-columns:1fr;padding:18px}}

/* V71 TYPE SYSTEM. Sentences are set in IBM Plex Sans; IBM Plex Mono stays for labels, numbers, buttons and data.
   Reading sizes: body 16, secondary 14.5, panels 13.5, notes 13 (phones: 15 / 14 / 13 / 12.5). Labels never below 9.5px. */
:root{--read:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;--t-body:16px;--t-2:14.5px;--t-panel:13.5px;--t-note:13px}
@media(max-width:700px){:root{--t-body:15px;--t-2:14px;--t-panel:13px;--t-note:12.5px}}
/* body: section intros and readings */
.pair-intro p,.form-reading p,.sort-caption .sort-text{font-family:var(--read);font-size:var(--t-body);line-height:1.55;letter-spacing:0}
.form-reading p{max-width:62ch}
.pair-intro p{max-width:60ch}
/* secondary: results, notes beside figures, trade-offs, panels */
.pair-note>span:not(.pair-register),.case-trade-intro,.trade-result,.rc-side p,.own-note,.rest-why,.profile-cap,.vs-prompt,
.overlay-reading,.rest-des-note,.case-line,.case-spec-empty
  {font-family:var(--read);font-size:var(--t-2);line-height:1.55;letter-spacing:0}
.pair-verdict{font-family:var(--read);font-size:clamp(17px,1.5vw,20px);line-height:1.4;letter-spacing:0;font-weight:400}
.rest-reading .ln{font-family:var(--read);font-size:13px;line-height:1.5;letter-spacing:0}
.vc-you .vc-what{font-family:var(--read);font-size:15px;line-height:1.45;letter-spacing:0}
/* notes and caveats: smaller, never full width */
.caveat,.rest-tally{font-family:var(--read)!important;font-size:var(--t-note)!important;line-height:1.6!important;letter-spacing:0!important;max-width:88ch}
/* pop-ups and the Data + Method panel */
.score-help-card p,.score-help-card dd,.score-help-card li,.pz-why-card>p:not(.pz-rank-cap),.methods-inner p,.methods-inner li
  {font-family:var(--read);font-size:var(--t-panel);line-height:1.55;letter-spacing:0}
.score-help-card small,.methods-inner small{font-family:var(--ui)}
/* landing poster: the four boxes read in sans like the intro; section bars keep a sans line under the title */
.pz-box p{font-family:var(--read);font-size:14px;line-height:1.5;letter-spacing:0}
.pz-bar .bd{font-family:var(--read);font-size:12.5px;line-height:1.35;letter-spacing:0;color:#2a2a2a}
.rest-reading.open .tx{font-family:var(--read);font-size:14px}
.brief-intro p{font-size:var(--t-2)}
.rest-ku dd{font-family:var(--read);font-size:var(--t-2);line-height:1.5;letter-spacing:0}
.case-count span{font-family:var(--read);font-size:13px;line-height:1.45;letter-spacing:0}
.rest-core-note{font-family:var(--read);font-size:11.5px;line-height:1.4;letter-spacing:0}
.vc-empty{font-family:var(--read);font-size:13px;line-height:1.5;letter-spacing:0}
.methods-inner code{font-size:.88em}
/* small labels that were faint */
.family .style-tag{color:#8a8a8a}
.rest-arc b{color:#8a8a8a}

/* V72 COVER AND PRIMER. The landing is a cover page of its own (#home, the default): the two title blocks, one lead,
   three chapter links and the background letters. The four explainers open the Collection page as a spaced primer. */
body[data-page="home"] .collection,body[data-page="home"] #perception,body[data-page="home"] #judgment{display:none!important}
body:not([data-page="home"]) .home{display:none!important}
.top a.name{color:inherit;text-decoration:none;display:block}
.top a.name:focus-visible{outline:1px solid currentColor;outline-offset:4px}
.collection{padding-top:0}
.home{background:var(--head-bg,#d9d9d5)}
.cover{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));min-height:100svh;padding:clamp(26px,2.6vw,40px) var(--pad) 0;
  grid-template-rows:[k] auto [g1] clamp(34px,7vh,84px) [t1] clamp(110px,10vw,160px) [t2] auto [t3] auto [sp] minmax(32px,1fr) [ch] auto}
.cover::before{display:none}
.cv-kick{grid-column:1/-1;grid-row:k;display:flex;justify-content:space-between;gap:16px;font:500 10px/1.6 var(--ui);letter-spacing:.06em;color:#3a3a3a;z-index:2}
.cover .pz-title{grid-column:2/8;grid-row:t1/t3}
.cover .pz-says{grid-column:8/11;grid-row:t2/sp;align-self:start}
.cover .pz-title .big,.cover .pz-says .big{font-size:calc((var(--col) * 6 - 2 * clamp(14px,1.4vw,22px)) / 5.5)}
.cv-lead{grid-column:2/7;grid-row:t3;align-self:start;margin:clamp(24px,2.6vw,38px) clamp(18px,2vw,30px) 0 0;font-family:var(--head);font-size:clamp(16px,1.3vw,19px);line-height:1.5;color:#1a1a1a;max-width:44ch;z-index:2;position:relative}
.cv-chapters{grid-column:1/-1;grid-row:ch;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1.5px solid var(--ink);margin-top:clamp(28px,4vh,48px);z-index:2;position:relative}
.cv-ch{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:14px;align-content:start;padding:16px 20px 24px;color:var(--ink);text-decoration:none;border-left:1px solid rgba(0,0,0,.28);background:rgba(217,217,213,.78);transition:background .15s}
.cv-ch:first-child{border-left:0;padding-left:0}
.cv-ch .bl{grid-column:1;font:500 10px/1.6 var(--ui);letter-spacing:.06em}
.cv-ch .bt{grid-column:1;font-family:var(--head);font-size:clamp(24px,2.3vw,34px);font-weight:500;letter-spacing:-.03em;line-height:1.05;margin:8px 0 8px}
.cv-ch .bd{grid-column:1;font-family:var(--read);font-size:13.5px;line-height:1.45;color:#2a2a2a;max-width:36ch}
.cv-ch .ba{grid-column:2;grid-row:1/4;align-self:center;font-size:clamp(22px,2vw,30px);line-height:1}
.cv-ch:hover,.cv-ch:focus-visible{background:var(--hi)}
.cv-ch:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
@media(max-width:999px){
  .cover{display:flex;flex-direction:column;padding:20px var(--pad) 0}
  .cv-kick{flex-direction:column;gap:2px;margin-bottom:26px}
  .cover .pz-title .big,.cover .pz-says .big{font-size:calc((100cqi - 2 * var(--pad) - 2 * 16px) / 5.6)}
  .cover .pz-says{align-self:flex-end;width:62%;margin-top:-22px}
  .cv-lead{margin:26px 0 0;max-width:none}
  .cv-chapters{grid-template-columns:1fr;margin-top:30px}
  .cv-ch,.cv-ch:first-child{border-left:0;border-top:1px solid rgba(0,0,0,.28);padding:14px 0 18px}
  .cv-ch:first-child{border-top:0}
}
/* primer: the four explainers, on paper, before the dark collection */
body[data-page="home"] .research-footer{display:none}
.primer{--ink:#111;background:var(--head-bg,#d9d9d5);color:#111;padding:calc(var(--head-h,70px) + clamp(26px,3vw,44px)) clamp(18px,4vw,62px) clamp(46px,5vw,80px)}
.primer .section-kicker{color:#3a3a3a;border-bottom-color:rgba(0,0,0,.4)}
.pr-head{margin:clamp(30px,3.4vw,52px) 0 clamp(30px,3.4vw,52px)}
.pr-head h2{font-family:var(--head);font-weight:500;font-size:clamp(40px,5vw,80px);letter-spacing:-.04em;line-height:.98;margin:0}
.pr-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(22px,2.6vw,44px)}
.pr-card{position:relative;border-top:1.5px solid #111;padding-top:16px;min-width:0}
.pr-fig{display:block;font-family:var(--head);font-weight:500;font-size:clamp(46px,4.6vw,74px);letter-spacing:-.04em;line-height:1}
.pr-cap{display:block;font:500 10px/1.5 var(--ui);letter-spacing:.06em;color:#3a3a3a;margin:10px 0 22px}
.pr-card h3{font-family:var(--head);font-weight:500;font-size:22px;letter-spacing:-.02em;line-height:1.1;margin:0 0 10px}
.pr-card p{font-family:var(--read);font-size:14.5px;line-height:1.55;color:#222;margin:0 0 10px;letter-spacing:0}
.pr-card a{color:inherit;text-underline-offset:3px}
.pr-card .pz-tags{margin:4px 0 12px}
.pr-card .pz-why{position:relative;top:auto;right:auto;margin:4px 0 0;padding:0;border:0}
.pr-card .pz-why-card{top:auto;bottom:calc(100% + 10px);left:0;right:auto}
.pr-card:has(.pz-why[open]){z-index:6}
.pr-card .pz-why-card p{font-size:13.5px}
.pr-card .pz-why-card .pz-rank-cap{font:500 10px/1.5 var(--ui);letter-spacing:.05em;color:#555;margin:9px 0 0}
.pr-go{display:inline-block;margin-top:clamp(30px,3vw,46px);font:500 11px/1 var(--ui);letter-spacing:.06em;color:#111;padding:13px 16px;border:1.5px solid #111;text-decoration:none}
.pr-go:hover,.pr-go:focus-visible{background:var(--hi)}
@media(max-width:1099px){.pr-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.pr-grid{grid-template-columns:1fr;gap:30px}.primer{padding-top:calc(var(--head-h,60px) + 22px)}}

/* V73 · page switching for the split Judgement chapter */
body:not([data-page="decide"]) #decide{display:none!important}
body[data-page="decide"] .home,body[data-page="decide"] .collection,body[data-page="decide"] #perception,body[data-page="decide"] #judgment{display:none!important}

/* V73 · COVER after the sketch: title block top left, "Says who?" offset right and down, the three chapters stacked
   under the title in steps (Collection, Perception a column further left, Judgement further right), the lead in the
   free column on the right. */
@media(min-width:1000px){
  .cover{padding:clamp(26px,2.6vw,40px) var(--pad) clamp(30px,5vh,56px);
    grid-template-rows:[k] auto [g] clamp(24px,6vh,72px) [t1] clamp(100px,9vw,150px) [t2] auto [b1] auto [b2] auto [b3] auto [sp] 1fr}
  .cover .pz-title{grid-column:1/7;grid-row:t1/b1}
  .cover .pz-says{grid-column:7/11;grid-row:t2/b2;align-self:stretch}
  .cv-chapters{display:contents}
  .cb-col{grid-column:3/7;grid-row:b1}
  .cb-per{grid-column:2/7;grid-row:b2;margin-top:-1.5px}
  .cb-jud{grid-column:4/10;grid-row:b3;margin-top:-1.5px}
  .cv-lead{grid-column:10/13;grid-row:b2/sp;align-self:start;margin:clamp(18px,2vw,30px) 0 0 clamp(18px,2vw,30px);font-size:clamp(15px,1.15vw,17px);max-width:none}
}
.cv-bar{position:relative;z-index:3;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:16px;align-content:start;background:#f3f3f1;color:var(--ink);
  border:1.5px solid var(--ink);padding:10px 16px 13px;text-decoration:none;transition:background .15s}
.cv-bar .bl{grid-column:1;font:500 10px/1.6 var(--ui);letter-spacing:.06em}
.cv-bar .bt{grid-column:1;font-family:var(--head);font-size:clamp(22px,2.1vw,32px);font-weight:500;letter-spacing:-.03em;line-height:1.05;margin:4px 0 6px}
.cv-bar .bd{grid-column:1;font-family:var(--read);font-size:13px;line-height:1.4;color:#2a2a2a}
.cv-bar .ba{grid-column:2;grid-row:1/4;align-self:center;font-size:clamp(22px,2vw,30px);line-height:1}
.cv-bar:hover,.cv-bar:focus-visible{background:var(--hi)}
.cv-bar:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
@media(max-width:999px){
  .cv-chapters{display:block;border-top:0;margin-top:26px}
  .cv-bar{margin:0}
  .cb-col{margin-right:14%}.cb-per{margin:-1.5px 7% 0 0}.cb-jud{margin:-1.5px 0 0 12%}
  .cover .cv-lead{order:5}
}
/* V80 · COVER LEAD IN TWO: the question sits under "Says who?" (cols 7–9, beside the Perception bar, its left edge in line
   with the "Says who?" text); the route keeps the free column on the right (cols 10–12, from the .cv-lead rule above).
   Both start the same small gap below "Says who?". The question fits beside the Perception bar at three lines (four
   below 1240px); if it runs longer, that row grows, so it never runs into the Judgement bar.
   Phones: the question follows "Says who?"; the route stays after the chapter bars. */
@media(min-width:1000px){
  .cover .cv-lead--says{grid-column:7/10;grid-row:b2;margin:clamp(12px,1.2vw,18px) clamp(12px,1.4vw,20px) clamp(8px,.8vw,12px) clamp(14px,1.4vw,22px)}
  .cover .cv-lead--path{margin-top:clamp(12px,1.2vw,18px)}
}
@media(max-width:999px){
  .cover .cv-lead--says{order:0}
}

/* V73 · PRIMER after the sketch: the heading in the first three columns; Google Fonts at the top; the dataset a step
   lower to its right; the tags below Google Fonts, shifted left; the scores below the dataset. Boxes are open-sided. */
@media(min-width:1100px){
  .pr-grid{grid-template-columns:repeat(12,minmax(0,1fr));gap:0;grid-template-rows:[a] auto [b] auto [c] auto [d];margin-top:clamp(34px,3.6vw,56px)}
  .pr-head{grid-column:1/4;grid-row:a/b;margin:0;padding:6px 24px 0 0}
  .pr-head h2{font-size:clamp(40px,4.6vw,74px)}
  .pr-card{border-top:0;padding:18px 22px 26px}
  .pr-gf{grid-column:4/7;grid-row:a/b;border-top:1.5px solid #111;border-left:1px solid #111;border-right:1px solid #111}
  .pr-data{grid-column:7/11;grid-row:a/c;margin-top:clamp(70px,8vw,130px);border-top:1.5px solid #111;border-right:1px solid #111}
  .pr-tags{grid-column:2/6;grid-row:b/d;border-top:1.5px solid #111;border-left:1px solid #111;border-bottom:1px solid #111}
  .pr-score{grid-column:7/11;grid-row:c/d;border:1px solid #111;border-top-width:1.5px;margin-top:-1px}
  .pr-go{margin-left:calc(100% / 12)}
}
@media(min-width:700px) and (max-width:1099px){.pr-head{margin:0 0 30px}}
.pr-head{margin-bottom:0}

/* V73 · TEXT LINKS, one style: a 1px underline in the text colour, 3px below the baseline. Hover and keyboard focus
   make it bolder. Covers links in text, pop-up triggers (↗), DATA + METHOD, the chain labels in the closing. */
.cv-lead a,.pr-card a,.methods-inner a,.score-help-card a,.pz-why-card a,.rc-side a,a.vc-where,.research-section p a:not(.next-link),
.score-help>summary,.pz-why>summary,.inline-help,.text-button
  {text-decoration-line:underline;text-decoration-style:solid;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:currentColor;
   text-decoration-skip-ink:auto;transition:text-decoration-thickness .12s ease,color .12s ease}
.cv-lead a:hover,.pr-card a:hover,.methods-inner a:hover,.score-help-card a:hover,.pz-why-card a:hover,.rc-side a:hover,a.vc-where:hover,.research-section p a:not(.next-link):hover,
.score-help>summary:hover,.pz-why>summary:hover,.inline-help:hover,.text-button:hover,
.cv-lead a:focus-visible,.pr-card a:focus-visible,.methods-inner a:focus-visible,.score-help-card a:focus-visible,.pz-why-card a:focus-visible,.rc-side a:focus-visible,a.vc-where:focus-visible,
.research-section p a:not(.next-link):focus-visible,.score-help>summary:focus-visible,.pz-why>summary:focus-visible,.inline-help:focus-visible,.text-button:focus-visible,
.score-help[open]>summary,.pz-why[open]>summary,.inline-help[aria-expanded="true"]
  {text-decoration-thickness:3px}
.inline-help{color:#f3f3f1}
.inline-help[aria-expanded="true"]{color:#f3f3f1}
.inline-help::after{color:inherit}
a.vc-where:hover,a.vc-where:focus-visible{text-underline-offset:3px}

/* V74 · PRIMER: full borders on every card; the cards meet on shared lines (Google Fonts and the tags share a right
   edge, which is the left edge of the dataset and the scores); the heading sets flush right against the cards;
   no large figures, larger card titles. */
.pr-card h3{font-family:var(--head);font-weight:500;font-size:clamp(28px,2.6vw,40px);letter-spacing:-.03em;line-height:1.02;margin:0 0 16px}
.pr-card{padding-top:20px}
@media(min-width:1100px){
  .pr-head{text-align:right;padding:4px clamp(22px,2.4vw,36px) 0 0}
  .pr-head h2{font-size:clamp(36px,3.3vw,52px);line-height:1}
  .pr-card{border:1px solid #111;padding:22px 24px 28px}
  .pr-gf{grid-column:4/7;grid-row:a/b}
  .pr-data{grid-column:7/11;grid-row:a/c;margin-left:-1px}
  .pr-tags{grid-column:2/7;grid-row:b/d;margin-top:-1px}
  .pr-score{grid-column:7/11;grid-row:c/d;margin:-1px 0 0 -1px;border-width:1px}
}
@media(max-width:1099px){.pr-card{border:1px solid #111;padding:20px 20px 24px}.pr-head{grid-column:1/-1;margin:clamp(26px,4vw,40px) 0 4px}}

/* V75 · About page, Who tags chart, find a family, touch */
body:not([data-page="about"]) #about{display:none!important}
body[data-page="about"] .home,body[data-page="about"] .collection,body[data-page="about"] #perception,body[data-page="about"] #judgment,body[data-page="about"] #decide{display:none!important}
.about{background:var(--head-bg,#d9d9d5);color:#111;--ink:#111}
.about .section-kicker{color:#3a3a3a;border-bottom-color:rgba(0,0,0,.4)}
.ab-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));margin-top:clamp(34px,3.6vw,56px);row-gap:clamp(28px,3vw,44px)}
.ab-title{grid-column:1/4;text-align:right;padding-right:clamp(22px,2.4vw,36px);font-family:var(--head);font-weight:500;font-size:clamp(36px,3.3vw,52px);letter-spacing:-.04em;line-height:1;margin:0}
.ab-body{grid-column:4/10}
.ab-body p{font-family:var(--read);font-size:clamp(17px,1.35vw,20px);line-height:1.5;margin:0 0 14px;max-width:58ch}
.ab-facts{grid-column:4/11;display:grid;grid-template-columns:9em minmax(0,1fr);gap:12px 20px;margin:0;border-top:1px solid #111;padding-top:18px}
.ab-facts dt{font:500 10px/1.9 var(--ui);letter-spacing:.06em;color:#3a3a3a}
.ab-facts dd{margin:0;font-family:var(--read);font-size:15px;line-height:1.5}
.ab-facts a{color:inherit}
.ab-facts .text-button{color:#111;font:500 10px/1.6 var(--ui);letter-spacing:.06em;margin-left:6px}
@media(max-width:900px){.ab-title,.ab-body,.ab-facts{grid-column:1/-1;text-align:left;padding-right:0}.ab-facts{grid-template-columns:1fr;gap:4px}.ab-facts dd{margin-bottom:10px}}
.research-footer a{color:inherit;text-decoration-line:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.research-footer a:hover,.research-footer a:focus-visible{text-decoration-thickness:3px}
.cv-kick a{color:inherit;text-decoration-line:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.cv-kick a:hover,.cv-kick a:focus-visible{text-decoration-thickness:3px}
.pz-who-card{width:min(470px,calc(100vw - 60px))}
.who-chart{display:block;width:100%;height:auto;margin:12px 0 2px;overflow:visible}
.who-chart .wg{stroke:rgba(0,0,0,.14);stroke-width:1}
.who-chart .wa{stroke:#111;stroke-width:1}
.who-chart .wn{stroke:#111;stroke-width:1;stroke-dasharray:2 3}
.who-chart .wl{fill:none;stroke:#111;stroke-width:1.6;stroke-linejoin:round}
.who-chart .wd{stroke-dasharray:4 3;stroke-width:1.2}
.who-chart .wt{font:500 9.5px var(--ui);letter-spacing:.04em;fill:#333}
.who-chart .wb{fill:#111;font-weight:600}
.who-chart .wdot{fill:var(--hi);stroke:#111;stroke-width:1}
.pr-card .pz-who{margin-top:14px}
.pr-card .pz-who-card p{margin:0 0 10px}
.pz-who-card strong{font-weight:600;display:block;margin-bottom:2px}
.is-found{box-shadow:inset 0 0 0 2px var(--hi)!important}
.find{display:flex;align-items:center;gap:8px;margin-left:auto}
.find-l{font-size:10px;letter-spacing:.06em;color:#9a9a9a}
.find input{width:min(220px,40vw);background:#111;border:1px solid #444;color:#f3f3f1;font:400 13px/1.2 var(--read);padding:7px 9px;border-radius:0}
.find input:hover,.find input:focus{outline:none;border-color:var(--hi)}
.find-out{font-size:10px;letter-spacing:.05em;color:#cfcfcf;max-width:28ch;line-height:1.4}
.is-found{outline:2px solid var(--hi);outline-offset:-2px;transition:outline-color .3s}
@media(hover:none){.high-card.is-overlay-selected .high-spec{opacity:1}.high-card.is-overlay-selected .high-sample{opacity:0}}
@media(max-width:700px){.find{margin-left:0;order:5;width:100%}.find input{width:100%}.find-out{order:6;max-width:none}.browse-footer{flex-wrap:wrap}}

/* V77 · REVIEW FIXES */
/* specimens drawn in a stand-in face are dimmed and labelled */
.specimen.is-standin .phrase>span:not(.standin){opacity:.28}
.specimen .standin{font:500 9px/1.4 var(--ui);letter-spacing:.06em;color:#bdbdbd;margin-top:6px;white-space:normal}
/* the primer's pop-ups open as a centred card over a dimmed page, at every width */
.pr-card:has(.pz-why[open]){z-index:40}
.pr-card .pz-why[open] .pz-why-card{position:fixed;left:50%;right:auto;top:calc(50% + var(--head-h,70px) / 2);bottom:auto;transform:translate(-50%,-50%);
  width:min(480px,calc(100vw - 32px));max-height:calc(100dvh - var(--head-h,70px) - 32px);overflow:auto;overscroll-behavior:contain;z-index:41;
  box-shadow:0 0 0 100vmax rgba(17,17,17,.4),0 18px 50px rgba(0,0,0,.3)}
.pr-card .pz-why[open] .popup-close{top:10px;right:10px;width:28px;height:28px;font-size:18px;background:#111;color:#f3f3f1;box-shadow:none}
.pr-card .pz-why[open] .popup-close:hover{background:#333}
.pr-card .pz-why[open] .pz-why-card{padding-right:46px}
.pz-who-card .pz-rank-cap+p{margin-top:14px}
/* 02.1 legend wraps between phone and laptop widths */
@media(min-width:521px) and (max-width:900px){.sort-legend{display:flex;flex-wrap:wrap;column-gap:18px;row-gap:6px;white-space:normal}.sort-legend>span{white-space:nowrap}.sort-legend .rule{flex-basis:100%}}
/* phones: the threshold panel scrolls with the page, so the specimens keep the screen */
@media(max-width:699px){.collection .control{position:relative;top:auto}}
  

/* SPLIT SITE · smooth page changes where the browser supports them */
@view-transition{navigation:auto}
.top a.status{pointer-events:auto;color:inherit;text-decoration-line:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.top a.status:hover,.top a.status:focus-visible{text-decoration-thickness:3px}
.research-footer .ft-links a+a{margin-left:18px}
/* anchors land below the fixed header; on phones the header is taller, so sections start below it */
.research-section [id]{scroll-margin-top:calc(var(--head-h,70px) + 12px)}
@media(max-width:700px){.research-section{padding-top:calc(var(--head-h,82px) + 14px)}}

/* METHOD PAGE · the former Data + Method panel, set like the About page */
.method .ab-body{grid-column:4/11}
.method-toc{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0 0 30px;padding:0;list-style:none;font:500 10px/1.6 var(--ui);letter-spacing:.06em}
.method-toc a{color:#111}
.method-body h3{font:600 10.5px/1.5 var(--ui);letter-spacing:.07em;color:#111;margin:38px 0 12px;padding-top:14px;border-top:1px solid #111;scroll-margin-top:calc(var(--head-h,70px) + 16px)}
.method-body h3:first-of-type{margin-top:0}
.method-body p{font-size:16px;line-height:1.62;max-width:70ch;margin:0 0 12px}
.method-body code{font-family:var(--ui);font-size:.86em}
.method-body a{color:inherit}
.method-body #sourceStatus{font:500 11px/1.6 var(--ui);letter-spacing:.04em;color:#3a3a3a;border-left:2px solid #111;padding-left:12px}
@media(max-width:900px){.method .ab-body{grid-column:1/-1}}


/* V81 · PAGE TITLES in the chapter-heading style (02.1 "Form sets the range."): the About and Data + Method titles and
   the Collection primer heading use IBM Plex Sans 500 at 34–72px, tracking -.02em, line height 1, set left. */
.ab-title,.pr-head h2{font-family:var(--head);font-weight:500;font-size:clamp(34px,5vw,72px);letter-spacing:-.02em;line-height:1}
.ab-title,.pr-head{text-align:left}

/* V82 · PRIMER HEADING. Beside the cards (1100px and up) it sets flush right, close to the Google Fonts box. Stacked above
   the cards (below 1100px) it runs on one line; on phones it sizes down just enough to keep that line (10.85em wide). */
@media(min-width:1100px){.pr-head{text-align:right;padding-right:clamp(12px,1.1vw,16px)}}
@media(max-width:1099px){.pr-head h2 br{display:none}}
@media(max-width:640px){.pr-head h2{font-size:min(34px,calc((100vw - 2 * clamp(18px,4vw,62px)) / 11.3))}}

/* V83 · 03.1 INTRO IN TWO BALANCED COLUMNS: the text flows from the first column into the second, so both end at about
   the same height. Laid out like the 03.2 intro on the same page: beside the title above 1200px, under it from 761 to
   1200px, one column at 760px and below. */
.profile-head{grid-template-columns:max-content minmax(0,1fr);column-gap:clamp(32px,4vw,64px)}
.profile-head .profile-intro{max-width:none;columns:2;column-gap:clamp(20px,2.2vw,32px);orphans:2;widows:2}
.profile-head .profile-intro>p{margin:0 0 12px;max-width:none}
.profile-head .profile-intro>p:last-child{margin-bottom:0}
@media(max-width:1200px){.profile-head{grid-template-columns:1fr;gap:22px}}
@media(max-width:760px){.profile-head .profile-intro{columns:1}}

/* V84 · 03.1 THE COMPANY BUSINESS KEEPS. One graph on the left (Business at the centre, the other feelings around it,
   their halos merging into one body) and, on the right, how to read it, the Business score steps and the selected word. */
.cl-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:clamp(20px,2.4vw,36px);align-items:start;margin-top:6px}
.cl-figure{position:relative}
.cl-figure svg{width:100%;height:auto;display:block;overflow:visible}
.cl-rl{font:500 9.5px var(--ui);fill:#5f5f5c;letter-spacing:.05em}
.cl-hub{font:600 14px var(--ui);fill:var(--hi);letter-spacing:.18em;text-anchor:middle}
.cl-hubsub{font:500 9.5px var(--ui);fill:#bdbdbd;letter-spacing:.06em;text-anchor:middle}
.cl-nm{font:600 13.5px var(--head);fill:#f3f3f1;paint-order:stroke;stroke:#0a0a0a;stroke-width:4px;stroke-linejoin:round}
.cl-nv{font:500 10.5px var(--ui);fill:#a8a8a5;letter-spacing:.02em;paint-order:stroke;stroke:#0a0a0a;stroke-width:4px;stroke-linejoin:round}
.cl-lab.grow .cl-nm{fill:var(--hi)}
.cl-f{cursor:pointer}.cl-f:focus{outline:none}.cl-f:focus-visible circle:first-child{stroke:#fff;stroke-width:2.5}
#clusterViz.dim .cl-f:not(.on),#clusterViz.dim .cl-lab:not(.on){opacity:.25}
.cl-side{position:sticky;top:calc(var(--head-h,70px) + 16px)}
.cl-blk{border-top:1px solid #2a2a2a;padding:14px 0 18px}
.cl-blk:first-child{padding-top:12px}
.cl-h{display:block;font:600 10px/1.6 var(--ui);letter-spacing:.07em;color:#bdbdbd;margin:0 0 10px}
.cl-keys{list-style:none;margin:0;padding:0;font-family:var(--read);font-size:14px;line-height:1.45;color:#d0d0ce}
.cl-keys li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:8px;margin:0 0 8px;align-items:start}
.cl-keys svg{width:22px;height:22px}.cl-keys b{color:#f3f3f1;font-weight:600}
.cl-ex{font:500 10.5px/1.5 var(--ui);color:#a8a8a5;letter-spacing:.02em;margin:4px 0 0}
.cl-range{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) 44px;border:1px solid #444}
.cl-range button{position:relative;background:none;border:0;border-left:1px solid #444;color:#cfcfcf;font:500 12px/1.2 var(--ui);letter-spacing:.03em;padding:11px 4px 12px;cursor:pointer}
.cl-range button:first-child{border-left:0}
.cl-range button small{display:block;font-size:9.5px;color:#8a8a8a;letter-spacing:.05em;margin-top:3px}
.cl-range button[aria-pressed=true]{background:var(--hi);color:#111}.cl-range button[aria-pressed=true] small{color:#3a3a2a}
.cl-range button:focus-visible{outline:2px solid #f3f3f1;outline-offset:2px}
.cl-prog{position:absolute;left:0;bottom:0;height:3px;background:#111;width:0}
.cl-pp{font-size:13px}
.cl-word{font-family:var(--read);font-size:var(--t-2);line-height:1.55;color:#cfcfcf}
.cl-t{display:block;font-family:var(--head);font-size:26px;font-weight:500;letter-spacing:-.02em;line-height:1.1;color:#f3f3f1;margin-bottom:6px}
.cl-t.grow{color:var(--hi)}
.cl-hint{display:block;font:500 10px/1.6 var(--ui);letter-spacing:.06em;color:#8a8a8a;margin-top:12px}
.cl-typeh{margin:16px 0 0}
.cl-word .vs-row{gap:8px 18px;margin-top:6px}.cl-word .vs-w{font-size:24px}
.cl-tab,.cl-list{width:100%;border-collapse:collapse;font:500 11px/1.5 var(--ui);margin-top:12px}
.cl-tab td,.cl-tab th,.cl-list td,.cl-list th{text-align:right;padding:4px 0;border-bottom:1px solid #262626;font-weight:500}
.cl-tab th,.cl-list th{color:#8a8a8a;font-size:9.5px;letter-spacing:.05em}
.cl-tab td:first-child,.cl-tab th:first-child,.cl-list td:first-child,.cl-list th:first-child{text-align:left}
.cl-tab tr.cur td{color:var(--hi)}
.cl-list{display:none}.cl-list i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:7px;vertical-align:0}
@media(max-width:1000px){.cl-layout{grid-template-columns:1fr}.cl-side{position:static}}
@media(max-width:700px){.cl-labels{display:none}.cl-list{display:table}}
/* V85 · the type samples float beside the circle in focus instead of lengthening the panel (phones keep them in the panel) */
.cl-pop{position:absolute;z-index:4;width:300px;padding:12px 14px 14px;background:rgba(10,10,10,.94);border:1px solid #4a4a46;pointer-events:none;box-shadow:0 10px 30px rgba(0,0,0,.5)}
.cl-pop .cl-typeh{margin:0}
.cl-pop .vs-row{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;margin-top:8px}
.cl-pop .vs-item{min-width:0}.cl-pop .vs-w{font-size:22px;overflow:hidden;text-overflow:ellipsis}
.cl-pop .vs-n{white-space:normal;line-height:1.35}

/* V86 · 03.3 THE WHEEL. Eight rounded slices, one per question, each with five stance bands and a label band at the rim.
   Every slice starts in its middle band (undecided); a stance grows the light shape toward the centre (A) or the rim (B).
   The chosen slice turns to face the text, and a line joins its rim to the question's title. Replaces the ring of nodes. */
.rest-diagram{position:relative}
.rest-wheel{display:block;width:100%;height:auto;overflow:visible;touch-action:manipulation;margin-top:4px}
.rw-slice{cursor:pointer;outline:none}
.rw-slice:focus-visible .rw-focus{stroke:#fff}
.rw-n{font:500 10px var(--ui);fill:#8a8a8a;letter-spacing:.06em;text-anchor:middle}
.rw-t{font:600 14px var(--head);fill:#e6e6e4;text-anchor:middle;letter-spacing:-.005em}
.rw-slice.on .rw-t{fill:var(--hi)}
.rw-slice.on .rw-n{fill:#cfcfcf}
.rw-badge{font:600 10px var(--ui);fill:#f3f3f1;text-anchor:middle}
.rw-hubt{font:500 9px var(--ui);fill:#9a9a9a;letter-spacing:.08em;text-anchor:middle}
.rw-hubg{font:500 15px var(--head);fill:#e6e6e4;text-anchor:middle}
.rw-hubg tspan:nth-child(2){font-family:Georgia,'Times New Roman',serif}
.rw-hubg tspan:nth-child(3){font-family:var(--ui)}
.rest-leader{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.rest-key{line-height:1.6}
/* the question's name sits under the section title, a step below it */
.rest-panel h4{font-size:clamp(21px,1.8vw,26px);letter-spacing:-.02em;line-height:1.1;margin:8px 0 10px}
.rest-poles{grid-template-columns:1fr;gap:8px;margin-top:14px}
.rest-pole{position:relative;padding:13px 16px 15px 52px}
.rest-pole .end{position:absolute;left:14px;top:12px;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font:600 11px var(--ui);color:#111;background:#cfcfcf}
.rest-pole[data-pole="B"] .end{background:#f3f3f1}
.rest-stance{font-family:var(--read);font-size:var(--t-2);line-height:1.5;color:#cfcfcf;margin:14px 0 0;min-height:22px}
.rest-stance b{color:var(--ink);font-weight:600}
.rest-stance .pre{color:#9a9a9a}
.rest-sumtext{font-family:var(--read);font-size:var(--t-2);line-height:1.55;color:#cfcfcf;margin:12px 0 0}
.rest-panel .rest-nav{margin-top:20px}
/* the five-stop track returns on touch screens and phones, where the bands are small to tap */
.rest-scale--touch{display:none}
@media(max-width:760px),(pointer:coarse){.rest-scale--touch{display:block;margin:14px 0 0}}
@media(max-width:760px){.rest-key{display:flex}}
@media(max-width:600px){.rw-t{font-size:20px}.rw-n{font-size:13px}.rw-hubt{display:none}.rw-hubg{font-size:22px}}

/* V87 · 03.1 FITS THE SCREEN. The graph's height follows the window (js sets --clh): side by side, the heading, the graph
   and the panel fit one screen when the page opens; stacked, the graph alone fits. --clk keeps the names and numbers at
   the same size on screen however large the graph is drawn. The three colour keys share one line. */
@media(min-width:1001px){
  .cl-layout{grid-template-columns:min(calc(100% - clamp(320px,28vw,420px) - clamp(28px,3vw,48px)),calc(var(--clh,770px) * 980 / 770)) clamp(320px,28vw,420px);column-gap:clamp(28px,3vw,48px);justify-content:start}
}
@media(max-width:1000px){.cl-figure{width:min(100%,calc(var(--clh,770px) * 980 / 770));margin-inline:auto}}
@media(max-width:700px){.cl-figure{width:100%}}
.cl-nm{font-size:calc(13.5px * var(--clk,1));stroke-width:calc(4px * var(--clk,1))}
.cl-nv{font-size:calc(11px * var(--clk,1));stroke-width:calc(4px * var(--clk,1))}
.cl-hub{font-size:calc(14px * min(var(--clk,1),1.12))}
.cl-hubsub{font-size:calc(9.5px * min(var(--clk,1),1.3))}
.cl-keys li.cl-cols{display:flex;flex-wrap:wrap;gap:4px 16px}
.cl-cols span{display:inline-flex;align-items:center;gap:7px}
.cl-cols svg{width:16px;height:16px}
.cl-side .cl-blk{padding:12px 0 14px}
.cl-p2{display:block;margin-top:8px}
.cl-side .cl-t{font-size:24px}
.cl-side .cl-hint{margin-top:8px}
.cl-side .cl-blk{padding:10px 0 12px}
.cl-side .cl-h{margin-bottom:8px}
.cl-keys li{margin-bottom:6px}

/* V88 · 03.3: 09 / TRADE-OFFS sits under the question panel, after the answers, so the steps read in order and the two
   columns end at about the same height. On wide screens the panel stops at a readable width. */
.rest-panel-col{display:flex;flex-direction:column;gap:10px;min-width:0;max-width:880px}
.rest-panel-col .rest-trade{width:100%}
@media(max-width:1100px){.rest-panel-col{max-width:none}}

/* V89 · FOUR CHAPTERS. 03 / Application (03.1, 03.2) and 04 / Judgement (the wheel and the closing) are separate pages.
   The cover's chapter bars keep stepping down the page: Collection, Perception a column to the left, then Application
   and Judgement each a column further right. */
@media(min-width:1000px){
  .cover{grid-template-rows:[k] auto [g] clamp(24px,6vh,72px) [t1] clamp(100px,9vw,150px) [t2] auto [b1] auto [b2] auto [b3] auto [b4] auto [sp] 1fr}
  .cb-app{grid-column:4/9;grid-row:b3;margin-top:-1.5px}
  .cb-jud{grid-column:5/10;grid-row:b4;margin-top:-1.5px}
}
@media(max-width:999px){
  .cb-app{margin:-1.5px 3% 0 6%}
}

/* V90 · COVER after the second sketch. The two title blocks interlock with the chapter bars: The Collection sits beside
   "I mean business." and just above "Says who?"; The Perception runs under "I mean business." up to "Says who?", their
   bottoms in line; The Application runs under "Says who?" to the right edge; The Judgement steps back to the left under
   it. The two paragraphs sit in two columns under The Perception. Rows: [a] the step down to The Collection, [b] The
   Collection, [c] the rest of "I mean business.", [d] The Perception beside the foot of "Says who?", [e] The Application,
   [f] The Judgement. The black blocks absorb any difference in height; the bars keep their own. Phones keep the
   stacked order. */
@media(min-width:1000px){
  .cover{grid-template-rows:[k] auto [g] clamp(24px,5.5vh,64px) [a] clamp(16px,2.2vw,36px) [b] auto [c] auto [d] auto [e] auto [f] auto [sp] minmax(clamp(40px,6vw,96px),1fr)}
  .cover .pz-title{grid-column:1/7;grid-row:a/d;align-self:stretch}
  .cover .pz-says{grid-column:7/11;grid-row:c/e;align-self:stretch}
  .cb-col{grid-column:7/11;grid-row:b;margin:0}
  .cb-per{grid-column:2/7;grid-row:d;margin:0}
  .cb-app{grid-column:7/13;grid-row:e;margin:-1.5px 0 0}
  .cb-jud{grid-column:6/11;grid-row:f;margin:-1.5px 0 0}
  .cover .cv-lead,.cover .cv-lead--says,.cover .cv-lead--path{grid-row:e/sp;align-self:start;max-width:none;font-size:clamp(15px,1.15vw,17px);
    margin:clamp(16px,1.6vw,24px) clamp(16px,1.6vw,26px) -480px 0}
  /* the paragraphs run down past The Judgement; the negative margin keeps them from stretching the two bars' rows, and the
     last row's minimum keeps room for them above the next section */
  .cover .cv-lead--says{grid-column:2/4}
  .cover .cv-lead--path{grid-column:4/6}
}
/* Narrower desktops: two 2-column paragraphs get too narrow, so they share one column under The Perception. */
@media(min-width:1000px) and (max-width:1279px){
  .cover{grid-template-rows:[k] auto [g] clamp(24px,5.5vh,64px) [a] clamp(16px,2.2vw,36px) [b] auto [c] auto [d] auto [e] auto [f] auto [p2] auto [sp] minmax(48px,1fr)}
  .cover .cv-lead--says{grid-column:1/6;grid-row:e}
  .cover .cv-lead--path{grid-column:1/6;grid-row:f/sp;margin-top:clamp(10px,1vw,14px)}
}

/* V91 · THE COLLECTION, longer and lower: it reaches one column past "Says who?" (halfway between "Says who?" and The
   Application). Its number sits on the title line beside the arrow and the description runs the full width under the
   title, so the bar is shallower. It starts a little lower beside "I mean business."; "Says who?" stays where it was. */
@media(min-width:1000px){
  .cover{grid-template-rows:[k] auto [g] clamp(24px,5.5vh,64px) [a] clamp(30px,3.6vw,58px) [b] auto [c] auto [d] auto [e] auto [f] auto [sp] minmax(clamp(40px,6vw,96px),1fr)}
  .cb-col{grid-column:7/12;grid-template-columns:minmax(0,1fr) auto auto;column-gap:14px;padding-top:12px}
  .cb-col .bt{grid-column:1;grid-row:1;margin:0 0 6px}
  .cb-col .bl{grid-column:2;grid-row:1;align-self:center}
  .cb-col .ba{grid-column:3;grid-row:1;align-self:center}
  .cb-col .bd{grid-column:1/-1;grid-row:2}
}
@media(min-width:1000px) and (max-width:1279px){
  .cover{grid-template-rows:[k] auto [g] clamp(24px,5.5vh,64px) [a] clamp(30px,3.6vw,58px) [b] auto [c] auto [d] auto [e] auto [f] auto [p2] auto [sp] minmax(48px,1fr)}
}

/* V92 · COVER, CALMER (third sketch; 1280px and wider). The whole composition is smaller and sits right of centre with
   room all round: a 24-column grid, the question in a narrow column at the left beside the title, the title blocks and
   bars in the middle, the second paragraph under The Perception. The Judgement steps down with a gap. The bars show
   their number and name; on a mouse or trackpad the one-line description appears under a bar on hover or focus
   (touch screens keep it visible). Narrower desktops (1000–1279px) keep the V90 layout; phones keep the stacked one. */
@media(min-width:1280px){
  .cover{grid-template-columns:repeat(24,minmax(0,1fr));
    grid-template-rows:[k] auto [g] minmax(32px,1fr) [a] clamp(14px,1.6vw,28px) [b] auto [c] auto [d] auto [e] auto [f] auto [sp] minmax(150px,1fr)}
  .cover .pz-title{grid-column:10/17;grid-row:a/d;align-self:stretch}
  .cover .pz-says{grid-column:17/21;grid-row:c/e;align-self:stretch}
  .cover .pz-title .big,.cover .pz-says .big{font-size:calc((var(--col) * 3.5 - 2 * clamp(12px,1.1vw,18px)) / 5.5)}
  .cover .pz-block{padding:clamp(12px,1.1vw,18px)}
  .cb-col{grid-column:17/22;grid-row:b;margin:0;grid-template-columns:minmax(0,1fr) auto;padding-top:10px}
  .cb-col .bl{grid-column:1;grid-row:1}
  .cb-col .bt{grid-column:1;grid-row:2;margin:3px 0 0}
  .cb-col .bd{grid-column:1;grid-row:3}
  .cb-col .ba{grid-column:2;grid-row:1/4;align-self:center}
  .cb-per{grid-column:11/17;grid-row:d;margin:0}
  .cb-app{grid-column:17/23;grid-row:e;margin:-1.5px 0 0}
  .cb-jud{grid-column:14/20;grid-row:f;margin:clamp(14px,1.4vw,22px) 0 0}
  .cv-bar .bt{font-size:clamp(19px,1.45vw,25px);margin:3px 0 0}
  .cv-bar{padding:9px 14px 12px}
  .cover .cv-lead,.cover .cv-lead--says,.cover .cv-lead--path{font-size:clamp(15px,1.05vw,17px);line-height:1.5;max-width:none;align-self:start}
  .cover .cv-lead--says{grid-column:5/9;grid-row:a/sp;margin:0 clamp(14px,1.4vw,24px) -600px 0}
  .cover .cv-lead--path{grid-column:10/14;grid-row:e/sp;margin:clamp(18px,1.6vw,26px) clamp(14px,1.4vw,24px) -600px 0}
}
@media(min-width:1280px) and (hover:hover){
  .cv-bar .bd{position:absolute;left:-1.5px;right:-1.5px;top:calc(100% - 1.5px);z-index:5;padding:2px 14px 12px;background:var(--hi);
    border:1.5px solid var(--ink);border-top:0;opacity:0;transform:translateY(-6px);pointer-events:none;transition:opacity .15s,transform .15s}
  .cv-bar:hover,.cv-bar:focus-visible{z-index:6}
  .cv-bar:hover .bd,.cv-bar:focus-visible .bd{opacity:1;transform:none}
}
@media(min-width:1280px) and (hover:hover) and (prefers-reduced-motion:reduce){.cv-bar .bd{transition:none;transform:none}}

/* V93 · COVER, closer together (1280px and wider): both paragraphs share the left column, beside "I mean business."; the
   title blocks and bars move one column toward the centre, so the gap to the text is only the column's margin; The
   Judgement meets The Application again. Below 1280px the wrapper steps aside (display:contents) and each paragraph keeps
   its place in the V90 and phone layouts. */
.cv-leads{display:contents}
@media(min-width:1280px){
  .cover{grid-template-rows:[k] auto [g] minmax(32px,1fr) [a] clamp(14px,1.6vw,28px) [b] auto [c] auto [d] auto [e] auto [f] auto [sp] minmax(48px,1fr)}
  .cv-leads{display:block;grid-column:5/9;grid-row:a/sp;align-self:start;margin:0 clamp(20px,2vw,34px) -600px 0;position:relative;z-index:2}
  .cover .cv-leads .cv-lead{margin:0}
  .cover .cv-leads .cv-lead--path{margin-top:.9em}
  .cover .pz-title{grid-column:9/16}
  .cover .pz-says{grid-column:16/20}
  .cb-col{grid-column:16/21}
  .cb-per{grid-column:10/16}
  .cb-app{grid-column:16/22}
  .cb-jud{grid-column:13/19;margin:-1.5px 0 0}
}
@media(min-width:1000px) and (max-width:1279px){
  .cv-leads{display:block;grid-column:1/6;grid-row:e/sp;align-self:start;margin:clamp(16px,1.6vw,24px) clamp(16px,1.6vw,26px) -600px 0;position:relative;z-index:2}
  .cover .cv-leads .cv-lead{margin:0}
  .cover .cv-leads .cv-lead--path{margin-top:.9em}
}

/* V94 · 03.1 IN THREE DIMENSIONS. The ring plate is seen from above at an angle; height is the Business score, the plate
   rising from 1–39 to 80–100. Each feeling is a shaded sphere standing in its halo, and a thin line traces its path
   through the three ranges. Drag sideways to turn the graph. */
#clusterViz{cursor:grab;touch-action:pan-y}
#clusterViz.turning{cursor:grabbing}
#clusterViz.turning .cl-f{cursor:grabbing}
.cl-trace{stroke-width:1.3;opacity:.4;transition:opacity .2s}
.cl-trace.grow{stroke:var(--hi)}.cl-trace.fade{stroke:#f3f3f1}.cl-trace.flat{stroke:#8f8f8b;opacity:.3}
.cl-trace.on{opacity:.95;stroke-width:2.2}
.cl-ghost{opacity:.7}.cl-ghost.grow{fill:var(--hi)}.cl-ghost.fade{fill:#f3f3f1}.cl-ghost.flat{fill:#8f8f8b}
#clusterViz.dim .cl-trace:not(.on),#clusterViz.dim .cl-ghost{opacity:.1}
.cl-rl{font-size:calc(10px * var(--clk,1));fill:#6a6a66}
.cl-rl.on{fill:var(--hi)}
@media(prefers-reduced-motion:reduce){.cl-trace{transition:none}}
/* V94 · 03.2: the design under the pointer floats beside its dot, set in its own letters */
.case-pair{position:relative}
.case-pop{width:min(320px,80vw)}
.case-pop .vs-w{display:block;font-size:30px;line-height:1.15;margin:8px 0 6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.case-pop .vs-n{display:block;white-space:normal;line-height:1.4}
.case-pop-none{display:block;font-family:var(--read);font-size:13px;color:#bdbdbd;margin:8px 0 6px}
.cl-side .cl-blk{padding:8px 0 10px}
.cl-keys li{margin-bottom:4px;line-height:1.4}
#clusterViz{user-select:none;-webkit-user-select:none}

/* V95 · 03.1 AS WORD TAGS (replaces the V94 spheres and the 3D plate). Each feeling is a tag, pinned by a small square on
   its line from Business. Filled neon: moves in; filled white: drifts away; outlined: changes little; dashed: fewer than
   5 designs. Thin lines in the manner of a construction drawing: the network joining the squares, faint guide lines out
   to the edge, faint squares where the feeling stands in the other ranges. Moving between ranges, tags leave a short
   trail and the squares flash once on arrival (both off when motion is reduced). */
#clusterViz{cursor:default}
.cl-guide{stroke:#fff;stroke-width:.7;opacity:.045}
.cl-guide.on{opacity:.22}
.cl-netline{stroke:#d8d8d6;stroke-width:.8;opacity:.26;stroke-linejoin:round}
.cl-spoke{stroke:#bdbdb9;opacity:.6;stroke-linecap:round}
.cl-ghost{fill:none;stroke:#4a4a46;stroke-width:1}
.cl-ghost.here{opacity:0}
.cl-node{fill:#0a0a0a;stroke:#bdbdb9;stroke-width:1.3}
.cl-node.grow{stroke:var(--hi)}.cl-node.fade{stroke:#f3f3f1}
.cl-node.few{stroke-dasharray:2 2}
.cl-hubtag rect{fill:#0a0a0a;stroke:var(--hi);stroke-width:1.6}
.cl-tag{cursor:pointer;outline:none}
.cl-tag .cl-box,.cl-tag .cl-tail{fill:#0a0a0a;stroke:#bdbdb9;stroke-width:1.2;stroke-linejoin:round}
.cl-tag .cl-nm{font-family:var(--head);font-weight:600;fill:#f3f3f1;stroke:none;paint-order:normal;letter-spacing:-.005em}
.cl-tag .cl-nv{font-family:var(--ui);font-weight:500;font-size:calc(10px * var(--clk,1));fill:#9a9a96;stroke:none;paint-order:normal;letter-spacing:.02em}
.cl-tag.grow .cl-box,.cl-tag.grow .cl-tail{fill:var(--hi);stroke:var(--hi)}
.cl-tag.fade .cl-box,.cl-tag.fade .cl-tail{fill:#f3f3f1;stroke:#f3f3f1}
.cl-tag.grow .cl-nm,.cl-tag.fade .cl-nm{fill:#0a0a0a}
.cl-tag.grow .cl-nv{fill:#3d4410}.cl-tag.fade .cl-nv{fill:#5a5a57}
.cl-tag.few .cl-box,.cl-tag.few .cl-tail{fill:#0a0a0a;stroke-dasharray:3 3}
.cl-tag.few.grow .cl-box,.cl-tag.few.grow .cl-tail{stroke:var(--hi)}.cl-tag.few.fade .cl-box,.cl-tag.few.fade .cl-tail{stroke:#f3f3f1}
.cl-tag.few .cl-nm{fill:#f3f3f1}.cl-tag.few .cl-nv{fill:#9a9a96}
.cl-lead{stroke:#bdbdb9;stroke-width:.8;opacity:.75}
.cl-tag:hover .cl-box,.cl-tag.on .cl-box,.cl-tag:focus-visible .cl-box{stroke:#fff;stroke-width:2}
#clusterViz.dim .cl-f:not(.on){opacity:.25}
.cl-trail{fill:none;stroke:#f3f3f1;stroke-width:1}
.cl-trail.grow{stroke:var(--hi)}
@keyframes clFlash{0%{fill:#f3f3f1}100%{fill:#0a0a0a}}
@keyframes clFlashHi{0%{fill:#e4ff1a}100%{fill:#0a0a0a}}
#clusterViz.arrive .cl-node{animation:clFlash .7s ease-out}
#clusterViz.arrive .cl-node.grow{animation-name:clFlashHi}
.cl-sw{display:inline-block;width:20px;height:12px;border-radius:4px;border:1.3px solid #bdbdb9;background:#0a0a0a;flex:none}
.cl-sw.grow{background:var(--hi);border-color:var(--hi)}.cl-sw.fade{background:#f3f3f1;border-color:#f3f3f1}
@media(max-width:700px){.cl-node{transform-box:fill-box;transform-origin:center;transform:scale(2)}}
@media(prefers-reduced-motion:reduce){#clusterViz.arrive .cl-node{animation:none}}

/* V96 · PHONES. 03.1: the tags stay visible (names only; the numbers are in the list under the panel), on a taller,
   tighter graph. 02.1: the measure's title, the measure buttons and the legend sit right above the chart, and the
   description follows it, so what the chart shows is always next to it. */
@media(max-width:700px){
  .cl-labels{display:inline}
  .cl-node{transform:none}
  .cl-hub{font-size:calc(12.5px * var(--clk,1))}
  .cl-hubsub{font-size:calc(9.5px * var(--clk,1))}
  .cl-tag .cl-box,.cl-tag .cl-tail{stroke-width:calc(1px * var(--clk,1))}
  .form-study{display:flex;flex-direction:column}
  .form-study>.pair-head{order:1}
  .form-study>.form-notes{order:2}
  .form-study>.sort-caption{display:contents}
  .sort-caption>div:first-child{order:3;margin-top:24px}
  .form-study>.sort-controls{order:4;margin-top:12px}
  .sort-caption>.sort-legend{order:5;display:flex;flex-wrap:wrap;column-gap:14px;row-gap:4px;white-space:normal;margin:14px 0 4px;padding-top:0}
  .sort-legend>span{white-space:nowrap}
  .sort-legend .rule{flex-basis:100%}
  .form-study>.sort-stage{order:6}
  .sort-caption>.sort-text{order:7;margin:18px 0 0}
  .form-study>.ends{order:8}
  .form-study>.ord-panel{order:9}
  .form-study>.form-summary{order:10}
}
/* the chart a little shorter on phones, so its title, buttons, legend and axis fit one screen */
@media(max-width:700px){#sortCanvas{height:min(400px,52svh)}.form-study .sort-legend{margin-bottom:0}}

/* V98 · PRIMER: The tags box ends with its own content instead of stretching to the foot of The scores, and always a
   clear step above it: where its text runs long, The scores grows to keep the step. */
@media(min-width:1100px){
  /* the third row is flexible, so the room the step needs is added there (lengthening The scores), never to the row
     above, where it would stretch The dataset */
  .pr-grid{grid-template-rows:[a] auto [b] auto [c] 1fr [d]}
  .pr-tags{align-self:start;margin-bottom:clamp(48px,4.5vw,80px)}
}

/* Typical details stay with the selected typeface. */
.sort-tip.is-selected{pointer-events:auto;box-sizing:border-box;width:560px;min-width:0;max-width:100%;max-height:100%;overflow:auto;padding:14px 16px}
.sort-tip.is-selected .sort-tip-name{padding-right:24px}
.ord-print[hidden],.ord-close[hidden]{display:none}
.sort-tip .ord-print{margin-top:14px;padding-top:12px;border-top:1px solid #333}
.sort-tip .ord-row{grid-template-columns:64px 48px minmax(40px,1fr) 52px 30px;gap:6px}
.sort-tip .ord-key{margin-top:10px}
.ord-close{position:absolute;top:5px;right:8px;background:transparent;color:#ccc;font-size:22px;padding:2px 6px;line-height:1}
.ord-close:focus-visible{outline:1px solid #fff}
@media(max-width:520px){
  .ord-ends{gap:18px}
  .sort-tip .ord-row{grid-template-columns:62px minmax(40px,1fr) 30px}
  .ord-list button{gap:3px 5px}
}

/* V100 · 03.2 as a context test: every candidate set in the same setting (same words, sizes, layout and colours).
   The setting inherits the candidate's family and scored style from styleNode(); nothing inside adds weight or italic. */
.ctx-note{font-size:9.5px;letter-spacing:.05em;line-height:1.6;color:#8a8a8a;margin:0}
.case-trade .trade-card{gap:10px;justify-content:flex-start;cursor:default}
.case-trade .trade-card:hover{background:#161616;border-color:transparent}
.case-trade .trade-card.is-chosen,.case-trade .trade-card.is-chosen:hover{border-color:var(--hi)}
.case-trade .trade-card.is-new{animation:ctxNew 1.4s ease-out}
@keyframes ctxNew{0%{box-shadow:0 0 0 2px var(--hi)}100%{box-shadow:0 0 0 2px transparent}}
.ctx{display:flex;flex-direction:column;gap:8px;background:#ecebe6;color:#151515;padding:16px 18px 15px;font-size:14.5px;line-height:1.42;letter-spacing:0;text-align:left;overflow-wrap:break-word;font-synthesis:none;min-width:0}
.ctx>span{display:flex;justify-content:space-between;align-items:baseline;gap:16px;min-width:0}
.ctx>span>span{min-width:0}
.ctx-top,.ctx-foot{font-size:12px;line-height:1.35;color:#3d3d3a}
.ctx-head{font-size:clamp(23px,2.1vw,29px);line-height:1.12;color:#111}
.ctx-head>span:last-child:not(:first-child){flex-shrink:0}
.ctx-body{color:#262624}
.ctx-foot{border-top:1px solid rgba(21,21,21,.22);padding-top:8px;margin-top:2px}
.ctx-line{font-size:13px;line-height:1.3;border-bottom:1px solid rgba(21,21,21,.12);padding-bottom:4px;font-variant-numeric:tabular-nums}
.ctx-line+.ctx-foot{border-top:0;padding-top:4px}
.ctx-btn{align-self:flex-start;display:inline-block!important;border:1px solid #151515;border-radius:999px;padding:5px 14px 6px;font-size:13px;line-height:1.2;margin-top:2px}
.ctx--center{text-align:center}.ctx--center>span{justify-content:center;flex-wrap:wrap}
.trade-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;min-height:28px}
.trade-foot .trade-meta{min-height:0;flex:1 1 220px}
.trade-use{background:#f3f3f1;color:#111;border:1px solid #f3f3f1;font-size:10px;font-weight:600;letter-spacing:.05em;padding:7px 12px;white-space:nowrap}
.trade-use:hover,.trade-use:focus-visible{background:var(--hi);border-color:var(--hi)}
.trade-mine{font-size:10px;font-weight:600;letter-spacing:.05em;color:var(--hi);white-space:nowrap}
.trade-out:empty{display:none}
.case-trade .trade-result{margin:6px 0 0}
.trade-ask{font-family:var(--read);font-size:14px;line-height:1.55;color:#e6e6e4;margin:8px 0 0;padding-left:12px;border-left:2px solid var(--hi)}
.trade-ask .section-small{margin-bottom:2px}
.trade-ctl{margin:10px 0 0}
.case-pin{display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap;background:#141414;border:1px solid #3a3a37;padding:8px 10px;font-size:10px;letter-spacing:.04em;color:#cfcfcf;line-height:1.5}
.case-pin[hidden]{display:none}
.case-pin b{color:var(--hi);font-weight:600;margin-right:4px}
.pin-t{flex:1 1 220px;min-width:0}
.pin-add{background:none;border:1px solid #777;color:#f3f3f1;font-size:10px;letter-spacing:.05em;padding:6px 10px;white-space:nowrap}
.pin-add:hover,.pin-add:focus-visible{border-color:var(--hi);color:var(--hi)}
.pin-no{color:#9a9a9a}
.pin-x{background:none;border:0;color:#aaa;font-size:16px;line-height:1;padding:2px 4px}
.pin-x:hover{color:#fff}
@media(max-width:700px){.ctx{padding:13px 14px 12px;font-size:14px}.ctx-head{font-size:22px}.ctx-top,.ctx-foot{font-size:11.5px}}
@media(prefers-reduced-motion:reduce){.case-trade .trade-card.is-new{animation:none}}
/* V100 · one line, near a finding, on what the evidence can and cannot show */
.evidence{font-size:10px;letter-spacing:.04em;line-height:1.6;color:#9a9a9a;margin:12px 0 0;max-width:110ch}
.evidence b{font-weight:600;color:#d8d8d6;margin-right:6px;letter-spacing:.06em}
.case-tabs+.evidence{margin:-8px 0 18px}
.cl-layout+.evidence{margin-top:14px}
.sort-stage+.evidence{margin:10px 0 0}

/* V100 · 04.2 the decision note: a paper card the reader can copy, download or print */
.dn{background:#ecebe6;color:#151515;max-width:980px;padding:clamp(18px,2.6vw,34px) clamp(18px,3vw,40px) clamp(16px,2.2vw,28px);font-family:var(--read)}
.dn a{color:#151515}
.dn-head{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-family:var(--ui);font-size:10px;letter-spacing:.06em;color:#3d3d3a;border-bottom:2px solid #151515;padding-bottom:10px}
.dn-for{display:flex;align-items:center;gap:10px;margin:14px 0 0;font-family:var(--ui);font-size:10px;letter-spacing:.06em;color:#3d3d3a}
.dn-for[hidden]{display:none}
.dn-for select{font:600 10px var(--ui);letter-spacing:.05em;background:#fff;color:#151515;border:1px solid #151515;border-radius:0;padding:6px 8px}
.dn-list{margin:0}
.dn-list>div{display:grid;grid-template-columns:170px minmax(0,1fr);gap:8px 24px;padding:14px 0;border-bottom:1px solid rgba(21,21,21,.18)}
.dn-list dt{font-family:var(--ui);font-size:10px;font-weight:600;letter-spacing:.06em;color:#151515;padding-top:3px}
.dn-list dd{margin:0;font-size:15px;line-height:1.55;color:#1d1d1b}
.dn-list dd p{margin:0}.dn-list dd p+p{margin-top:6px}
.dn-list dd ol{margin:0;padding-left:1.3em}
.dn-list dd b{font-weight:600}
.dn-spec{display:block;font-size:clamp(28px,3.2vw,44px);line-height:1.1;color:#111;overflow-wrap:anywhere}
.dn-meta{display:block;font-family:var(--ui);font-size:10px;letter-spacing:.05em;color:#55554f;margin-top:6px}
.dn-why textarea{width:100%;min-height:84px;resize:vertical;background:#fff;color:#151515;border:1px solid #151515;border-radius:0;padding:10px 12px;font:15px/1.5 var(--read)}
.dn-why textarea:focus-visible{outline:2px solid #151515;outline-offset:2px}
.dn-why textarea::placeholder{color:#8a8a85}
.dn-why-print{display:none}
.dn-src{font-family:var(--ui);font-size:9.5px;letter-spacing:.04em;line-height:1.6;color:#55554f;margin:14px 0 0;max-width:110ch}
.dn-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:16px}
.dn-actions button{background:#151515;color:#f3f3f1;border:1px solid #151515;font:600 10px var(--ui);letter-spacing:.05em;padding:9px 12px}
.dn-actions button:hover,.dn-actions button:focus-visible{background:var(--hi);color:#111;outline:none}
.dn-msg{font-family:var(--ui);font-size:10px;letter-spacing:.05em;color:#3d3d3a}
@media(max-width:700px){.dn-list>div{grid-template-columns:1fr;gap:6px}.dn-list dd{font-size:14.5px}}
@media print{
 @page{margin:16mm 16mm 18mm}
 html:has(body.print-note){color-scheme:light}
 html:has(body.print-note),body.print-note,body.print-note .research-section,body.print-note .note-block{background:#fff!important}
 body.print-note .top,body.print-note .research-footer,body.print-note .section-kicker,body.print-note #restBlock,body.print-note .closing,body.print-note .note-block>.pair-head,body.print-note .dn-actions{display:none!important}
 body.print-note .research-section{padding:0!important;margin:0!important}
 body.print-note .note-block{border:0;padding:0;margin:0}
 body.print-note .dn{max-width:none;background:#fff;padding:0}
 body.print-note .dn.doc{--paper:#fff;filter:none;padding:0 2px 0 0}
 body.print-note .dn-why textarea{display:none}
 body.print-note .dn-why-print{display:block;margin:0;font-size:15px;line-height:1.55;white-space:pre-wrap}
 body.print-note .dn-for{display:none}
}

/* V101 · Typical: the tip shows the six distances on hover as well as when a design is selected */
.sort-tip.is-ord{box-sizing:border-box;width:460px;min-width:0;max-width:100%;padding:12px 14px}
.sort-tip.is-ord .sort-tip-word{font-size:34px;margin:6px 0 4px}
.sort-tip.is-ord .sort-tip-meta{margin-top:4px}
.sort-tip.is-ord .ord-print{margin-top:10px;padding-top:10px}
.sort-tip.is-ord:not(.is-selected) .ord-key{display:none}

/* V101 · 03.2 as tabbed business columns: [business | DESIGNS] folder tabs over one fixed panel, the chart below.
   The industry buttons and the evidence line share one bar, aligned with the two columns. */
.case-bar{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:center;margin:0 0 18px}
.case-bar .case-tabs{margin:0}
.case-bar .evidence{margin:0;padding-left:16px;border-left:1px solid #3a3a37;max-width:none}
.case-pair{align-items:stretch}
.case-col,.case-col.case-side{background:none;padding:0;gap:0;border:0;position:static;cursor:default}
.case-col>.case-panels{flex:1}
.ctabs{display:flex;align-items:flex-end;gap:2px;padding-left:1px;position:relative;z-index:1;margin-bottom:-1px}
.ctab{position:relative;background:none;border:0;padding:9px 30px 8px 14px;font-size:10px;font-weight:600;letter-spacing:.05em;color:#9a9a9a;white-space:nowrap;max-width:62%;overflow:hidden;text-overflow:ellipsis;isolation:isolate}
.ctab::before,.ctab::after{content:'';position:absolute;z-index:-1;clip-path:polygon(0 0,calc(100% - 16px) 0,100% 100%,0 100%)}
.ctab::before{inset:0;background:#3a3a37}
.ctab::after{inset:1px 1px 0 1px;background:#121212}
.ctab:hover{color:#f3f3f1}
.ctab[aria-selected="true"]{color:#f3f3f1}
.ctab[aria-selected="true"]::after{background:#0d0d0d;bottom:-1px}
.ctab[aria-selected="true"]::before{background:var(--hi)}
.ctab:focus-visible{outline:2px solid #ddd;outline-offset:2px}
.ctab-mark{color:var(--hi)}
.case-panels{display:grid;background:#0d0d0d;border:1px solid #3a3a37}
.case-panel{grid-area:1/1;display:flex;flex-direction:column;gap:10px;padding:18px 20px 18px;min-width:0}
.case-panel.is-off,.case-panel.is-off *{visibility:hidden!important}
.case-panel .case-count{margin-top:6px}
.case-go{margin-top:auto;align-self:flex-start;background:none;border:1px solid #666;color:#f3f3f1;font-size:10px;letter-spacing:.05em;padding:8px 12px;text-align:left}
.case-go:hover,.case-go:focus-visible{border-color:var(--hi);color:var(--hi)}
.case-chart{background:#0d0d0d;margin-top:8px;padding:12px 16px 12px;display:flex;flex-direction:column;gap:8px}
.case-chart .case-mini{height:210px}
.case-chart .case-hover{min-height:15px}
.case-panel .case-trade{border-top:0;padding-top:0;margin-top:0;gap:10px;flex:1}
.trade-top{display:flex;flex-direction:column;gap:6px}
.case-panel .case-trade-intro{font-size:14px;line-height:1.5;min-height:3em}
.cand-chips{display:flex;flex-wrap:wrap;gap:4px}
.cand-chip{background:#1a1a1a;color:#b5b5b5;border:1px solid #333;font-size:10px;letter-spacing:.04em;padding:7px 10px}
.cand-chip:hover{color:#fff;border-color:#666}
.cand-chip[aria-pressed="true"]{background:#ecebe6;color:#111;border-color:#ecebe6}
.cand-chip.is-chosen span{color:var(--hi)}
.cand-chip[aria-pressed="true"].is-chosen span{color:#111}
.cand-stage{display:grid}
.cand{grid-area:1/1;visibility:hidden;display:flex;flex-direction:column}
.cand.is-on{visibility:visible}
.cand .ctx{flex:1}
.cand-stage.is-new .cand.is-on{animation:ctxNew 1.4s ease-out}
.case-panel .trade-foot{align-items:flex-start}
.case-panel .trade-meta{line-height:1.6}
.case-panel .trade-ask{margin:0;font-size:13.5px}
.case-panel .ctx-note{margin-top:auto}
.case-side .case-panels{min-height:100%}
@media(max-width:900px){.case-bar{grid-template-columns:1fr;gap:12px}.case-bar .evidence{padding-left:12px}.case-pair{gap:28px}}
@media(prefers-reduced-motion:reduce){.cand-stage.is-new .cand.is-on{animation:none}}

/* ====================================================================================================================
   V102 · AESTHETIC PASS: canvas, depth and documents
   ==================================================================================================================== */

/* 01 primer: four sheets floating over a dot-grid canvas. Each sheet sits at its own depth (--d drift factor, --z lift)
   and angle; the page's scroll moves them at different speeds (--sy from motion.js) and the pointer tilts them toward
   it (--mx, --my). Hover or keyboard focus brings a sheet forward, flat, for reading. */
.primer{position:relative;overflow:hidden;
  background-color:var(--head-bg,#d9d9d5);
  background-image:radial-gradient(circle at 1px 1px,rgba(17,17,17,.24) 1px,transparent 1.6px),radial-gradient(circle at 1px 1px,rgba(17,17,17,.45) 1.3px,transparent 2px);
  background-size:24px 24px,120px 120px;background-position:0 var(--bgy,0),0 var(--bgy,0)}
.pr-card{background:#efeee9;box-shadow:0 10px 22px -16px rgba(17,17,17,.24),0 2px 5px -3px rgba(17,17,17,.10)}
.pr-card::before{content:attr(data-n);display:block;font:500 10px/1 var(--ui);letter-spacing:.08em;color:#6a6a64;margin:-6px 0 14px}
@media(min-width:1100px){
  .pr-grid{position:relative;padding:0 0 30px}
  .pr-gf{margin:0 18px 0 0}
  .pr-data{margin:clamp(70px,8vw,130px) 0 0 22px}
  .pr-tags{margin:26px 18px clamp(48px,4.5vw,80px) 0}
  .pr-score{margin:34px 0 0 22px}
  .pr-card{--x:0px;--rx:0deg;--ry:0deg;--rz:0deg;--z:0px;--d:0;
    transform:perspective(1500px) translate3d(var(--x),calc(var(--sy,0) * var(--d) * 1px),var(--z)) rotateX(calc(var(--rx) - var(--my,0) * 3deg)) rotateY(calc(var(--ry) + var(--mx,0) * 4deg)) rotateZ(var(--rz));
    transition:transform .8s cubic-bezier(.2,.7,.2,1),box-shadow .5s ease;will-change:transform}
  .pr-gf{--rx:5deg;--ry:-9deg;--rz:-1.2deg;--z:30px;--d:-.10;z-index:3}
  .pr-data{--rx:4deg;--ry:8deg;--rz:1deg;--z:-10px;--d:.06;z-index:1}
  .pr-tags{--rx:-4deg;--ry:6deg;--rz:.8deg;--z:50px;--d:-.16;z-index:4}
  .pr-score{--rx:-3deg;--ry:-7deg;--rz:-.7deg;--z:10px;--d:.12;z-index:2}
  .has-motion .pr-card:hover,.has-motion .pr-card:focus-within{--rx:0deg;--ry:0deg;--rz:0deg;--z:90px;--mx:0;--my:0;z-index:20;
    box-shadow:0 16px 30px -20px rgba(17,17,17,.28),0 3px 8px -4px rgba(17,17,17,.12)}
  /* an open pop-up needs a flat card: a transformed card would pin the fixed pop-up to itself */
  .pr-card:has(.pz-why[open]){transform:none!important;transition:none;will-change:auto}
}
@media(min-width:700px) and (max-width:1099px){
  .pr-grid{gap:26px}
  .pr-gf{transform:rotate(-.6deg)}.pr-data{transform:rotate(.5deg) translateY(18px)}.pr-tags{transform:rotate(.4deg)}.pr-score{transform:rotate(-.5deg) translateY(18px)}
  .pr-card:has(.pz-why[open]){transform:none}
}
@media(prefers-reduced-motion:reduce){.pr-card{transform:none!important;transition:none}}

/* 02.2 as a specimen view: the families in a left pane that scrolls on its own, the shared word and the active family's
   letters in a right pane that stays put. Panes carry a thin title bar, like windows on a canvas. */
.high-split{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);border:1px solid #343434;background:#050505;
  height:min(800px,calc(100vh - var(--head-h,70px) - 40px));min-height:600px;margin:0 0 18px}
.pane-bar{display:flex;justify-content:space-between;gap:12px;padding:9px 14px;border-bottom:1px solid #343434;font-size:10px;letter-spacing:.06em;color:#9a9a9a;background:#0b0b0b;flex:0 0 auto}
.pane-bar span:first-child{color:#f3f3f1}
.high-pane{display:flex;flex-direction:column;min-height:0;min-width:0;border-right:1px solid #343434}
.high-split .high-grid{flex:1;min-height:0;overflow-y:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none;grid-auto-rows:minmax(200px,auto);gap:1px;background:#343434;margin:0;scrollbar-width:thin;scrollbar-color:#555 #0b0b0b}
.high-split .high-grid .high-card{height:auto;min-height:200px;box-shadow:none;position:relative;background:#080808;padding:16px 16px 13px;transition:background .2s}
.high-split .high-card .high-spec{display:none}
.high-split .high-card:hover .high-sample,.high-split .high-card:focus-visible .high-sample{opacity:1}
.high-split .high-card:hover,.high-split .high-card.is-preview{background:#171717}
.high-split .high-card.is-overlay-selected{background:#1d1d1d;box-shadow:inset 0 0 0 1px var(--hi)}
.high-split .high-card .high-sample{font-size:clamp(30px,3.4vw,54px)}
.high-n{position:absolute;top:13px;right:15px;font-size:10px;letter-spacing:.06em;color:#666}
.high-card.is-overlay-selected .high-n{color:var(--hi)}
.high-view{display:flex;min-height:0;min-width:0}
.high-split .overlay-lab{flex:1;min-height:0;margin:0;padding:16px 20px 18px;background:#0d0d0d;overflow-y:auto;gap:12px;scrollbar-width:thin;scrollbar-color:#555 #0d0d0d}
.high-split .overlay-figure{background-color:#050505;background-image:radial-gradient(circle at 1px 1px,#1f1f1f 1px,transparent 1.5px);background-size:20px 20px}
.high-split #formCanvas{height:250px;flex-basis:250px}
.high-specimen{display:grid;gap:10px;border-top:1px solid #2a2a2a;padding-top:16px;margin-top:auto;color:#f3f3f1;min-width:0}
.high-specimen>span{min-width:0;overflow:hidden}
.hsp-letters{font-size:clamp(38px,4vw,64px);line-height:1;white-space:nowrap}
.hsp-words{font-size:clamp(22px,2.2vw,32px);line-height:1.1;white-space:nowrap}
.hsp-sentence{font-size:16px;line-height:1.4;color:#cfcfcf}
@media(max-width:999px){
  .high-split{display:block;height:auto;min-height:0}
  .high-pane{border-right:0;border-bottom:1px solid #343434}
  .high-split .high-grid{overflow:visible;grid-auto-rows:minmax(150px,auto)}
  .high-split .high-grid .high-card{min-height:150px}
  .high-split .overlay-lab{overflow:visible}
}
@media(max-width:520px){.high-split .high-card .high-sample{font-size:clamp(24px,8vw,34px)}.hsp-letters{font-size:34px}.hsp-words{font-size:21px}.hsp-sentence{font-size:14.5px}}

/* Documents: paper with its top-right corner folded down. The cut is drawn by the background (no clip-path), so
   nothing inside is clipped and a drop shadow follows the cut. Used for the briefs in 03.2, the brief pop-up and the
   decision note in 04.2. */
.doc{--fold:26px;--paper:#ecebe6;--flap:#cbcac2;color:#151515;
  background:linear-gradient(225deg,transparent calc(var(--fold) * .7071),var(--paper) calc(var(--fold) * .7071))!important;
  filter:drop-shadow(0 14px 22px rgba(0,0,0,.35))}
.doc::after{content:'';position:absolute;top:0;right:0;width:var(--fold);height:var(--fold);pointer-events:none;
  background:linear-gradient(225deg,transparent 50%,var(--flap) 50%);filter:drop-shadow(-2px 2px 1.5px rgba(0,0,0,.22))}
.dn.doc{--fold:34px;filter:drop-shadow(0 22px 34px rgba(0,0,0,.5))}
.dn.doc .dn-head{padding-right:calc(var(--fold) + 8px)}
/* the brief as a creative-brief sheet inside its folder */
.brief-doc,.dn.doc{position:relative}
.brief-doc{padding:14px 18px 16px;display:flex;flex-direction:column;gap:10px}
.bd-head{display:flex;justify-content:space-between;gap:12px;font:600 10px/1.4 var(--ui);letter-spacing:.07em;color:#151515;border-bottom:1.5px solid #151515;padding:0 calc(var(--fold) + 4px) 7px 0}
.bd-head span:last-child{font-weight:400;color:#55554f}
.brief-doc .case-name{color:#111;font-size:clamp(24px,2.3vw,32px)}
.bd-rows{margin:0;display:grid;gap:0}
.bd-rows>div{display:grid;grid-template-columns:118px minmax(0,1fr);gap:10px;padding:8px 0;border-top:1px solid rgba(21,21,21,.16)}
.bd-rows>div:first-child{border-top:0}
.bd-rows dt{font:500 10px/1.5 var(--ui);letter-spacing:.06em;color:#55554f;padding-top:2px}
.bd-rows dd{margin:0;font-family:var(--read);font-size:14.5px;line-height:1.5;color:#1d1d1b;min-width:0}
.brief-doc .case-line{font-size:15px;color:#1d1d1b}
.brief-doc .case-line .case-hl{color:#111;text-decoration:none;background:linear-gradient(transparent 55%,rgba(228,255,26,.95) 55%);padding:0 1px}
.brief-doc .case-chip{border-color:#151515;color:#55554f;background:transparent}
.brief-doc .case-chip b{color:#111}
.brief-doc .case-plus{color:#777}
.brief-doc .own-name input{color:#111;border-bottom-color:#8a8a85}
.brief-doc .own-name input::placeholder{color:#8f8f8a}
.brief-doc .own-name input:focus-visible{border-bottom-color:#111}
.brief-doc .own-picks select{background-color:#fff;color:#111;border-color:#151515;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0h8L4 5z' fill='%23333'/%3E%3C/svg%3E")}
.brief-doc .own-picks select:focus-visible{outline-color:#111}
@media(max-width:520px){.bd-rows>div{grid-template-columns:1fr;gap:3px}}
/* the "design brief" pop-up as a document too */
.brief-card.doc{box-shadow:none;color:#1d1d1b;padding-right:calc(var(--fold) + 18px)}
.brief-card.doc p{color:#1d1d1b;font-family:var(--read)}
.brief-card.doc strong{color:#111}
.brief-card.doc a{color:#111}
.brief-card.doc small{color:#55554f}
.brief-card.doc .popup-close{top:8px;right:calc(var(--fold) + 6px);background:#151515;color:#f3f3f1;box-shadow:none}

/* The dark pages sit on a dot-grid canvas that stays still while the content scrolls over it. */
.research-section{background-color:#050505;background-image:radial-gradient(circle at 1px 1px,#1d1d1c 1px,transparent 1.5px);background-size:28px 28px;background-attachment:fixed;overflow-x:clip}
@media(max-width:700px){.research-section{background-attachment:scroll}}
/* Section numbers, very large and outlined, behind each heading; motion.js lets them drift at their own speed. */
.research-section .pair-head{position:relative;isolation:isolate}
/* Keep the open brief explanation above the business tabs outside the heading's stacking context. */
.research-section .brief-head:has(#briefHelp:not([hidden])){z-index:3}
.bignum{position:absolute;z-index:-1;right:-.04em;top:-.42em;font-family:var(--head);font-weight:600;font-size:clamp(120px,17vw,280px);line-height:1;letter-spacing:-.05em;
  color:transparent;-webkit-text-stroke:1px #2a2a28;pointer-events:none;user-select:none;will-change:transform}
@media(max-width:700px){.bignum{font-size:clamp(90px,30vw,150px);top:-.2em;-webkit-text-stroke-color:#232321}}
/* Sections ease in the first time they arrive. */
.has-motion .reveal{opacity:0;transform:translateY(26px);transition:opacity .9s cubic-bezier(.2,.7,.2,1) var(--rv-delay,0ms),transform .9s cubic-bezier(.2,.7,.2,1) var(--rv-delay,0ms)}
.has-motion .reveal.is-in{opacity:1;transform:none}
@media print{.has-motion .reveal{opacity:1!important;transform:none!important}.bignum{display:none}}
.high-split .high-card.is-overlay-selected .high-sample{opacity:1}

/* V103 · Next chapter, as a magazine "continued" marker: a filled triangle, the number, the chapter on a long rule. No box. */
nav.page-next{display:block;border-top:0;margin-top:70px;padding:0}
a.next-link.nx{display:flex!important;align-items:flex-end;gap:clamp(12px,1.4vw,22px);border:0!important;background:none!important;padding:0!important;color:#f3f3f1;text-decoration:none;white-space:normal;font-size:inherit}
a.next-link.nx .nx-tri{flex:0 0 auto;width:clamp(26px,2.6vw,40px);height:clamp(30px,3vw,46px);background:#f3f3f1;clip-path:polygon(0 0,100% 50%,0 100%);align-self:center;margin-bottom:.1em;transition:background .2s,transform .25s cubic-bezier(.2,.7,.2,1)}
a.next-link.nx .nx-n{flex:0 0 auto;font-family:var(--head);font-weight:500;font-size:clamp(52px,6.4vw,104px);line-height:.82;letter-spacing:-.05em}
a.next-link.nx .nx-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:10px;padding-bottom:.35em}
a.next-link.nx .nx-t{font-family:var(--ui);font-size:11px;font-weight:600;letter-spacing:.1em;line-height:1.4}
a.next-link.nx .nx-sub{font-weight:400;color:#9a9a9a;transition:color .2s}
a.next-link.nx .nx-rule{position:relative;display:block;height:2px;background:#f3f3f1;transform-origin:left;transition:transform .45s cubic-bezier(.2,.7,.2,1),background .2s}
a.next-link.nx .nx-rule::after{content:'';position:absolute;right:-12px;top:50%;width:5px;height:5px;margin-top:-2.5px;background:inherit}
a.next-link.nx span{transform:none}
a.next-link.nx:hover .nx-tri,a.next-link.nx:focus-visible .nx-tri{background:var(--hi);transform:translateX(6px)}
a.next-link.nx:hover .nx-rule,a.next-link.nx:focus-visible .nx-rule{background:var(--hi)}
a.next-link.nx:hover .nx-sub,a.next-link.nx:focus-visible .nx-sub{color:#f3f3f1}
a.next-link.nx:hover,a.next-link.nx:focus-visible{color:#f3f3f1!important}
a.next-link.nx:focus-visible{outline:2px solid #ddd;outline-offset:6px}
.has-motion nav.page-next:not(.is-in) .nx-rule{transform:scaleX(.08)}
@media(max-width:520px){a.next-link.nx .nx-n{font-size:48px}a.next-link.nx .nx-tri{width:22px;height:26px}a.next-link.nx .nx-t{font-size:10px}}
/* the collection's version sits in its threshold bar, so it is smaller */
.threshold-hint a.next-link.nx{flex:1;min-width:min(420px,100%)}
.threshold-hint a.next-link.nx .nx-n{font-size:clamp(34px,3.4vw,52px)}
.threshold-hint a.next-link.nx .nx-tri{width:22px;height:26px}

/* V104 · Cover: the "Says who?" block sits still, slightly turned; only its words move (motion.js). */
.cover .pz-says{position:relative;z-index:3;rotate:-2.2deg;box-shadow:0 26px 40px -24px rgba(0,0,0,.5)}
/* V105 · the letters of "Says who?" rise one by one from behind each line */
.says-line{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em}
.says-ch{display:inline-block}
.says-anim .says-ch{transform:translateY(110%);opacity:0}
.says-anim.is-up .says-ch{transform:none;opacity:1;transition:transform .7s cubic-bezier(.2,.75,.2,1) var(--d,0ms),opacity .3s ease var(--d,0ms)}

/* V103 · The Collection's specimen as a callout beside its tile: paper, a notch pointing at the tile, the tile outlined. */
#detail{background:#ecebe6;color:#151515;box-shadow:0 26px 70px rgba(0,0,0,.7),0 6px 16px rgba(0,0,0,.4)}
#detail .aside-head{color:#55554f}
#detail h2{color:#111}
#detail p{color:#3d3d3a!important}
#detail .big{color:#111}
#detail .popup-close{background:#151515;color:#f3f3f1}
#detail.is-anchored{right:auto;transition:opacity .2s}
#detail.is-anchored::before{content:'';position:absolute;top:var(--ny,40px);left:-15px;width:16px;height:30px;margin-top:-15px;background:#ecebe6;clip-path:polygon(100% 0,0 50%,100% 100%)}
#detail.is-anchored.to-left::before{left:auto;right:-15px;clip-path:polygon(0 0,100% 50%,0 100%)}
#detail.is-away{opacity:0;pointer-events:none}
.specimen.is-detail{box-shadow:inset 0 0 0 2px var(--hi);background:#151515}
@media(max-width:699px){#detail{left:12px!important;right:12px!important;top:auto!important;bottom:12px;width:auto;max-height:70vh;overflow:auto}}

/* V103 · 02.3 after the sketch: smaller cards with their measurements beneath and the choice beside; a guess opens a
   score strip on each card (counting up; neon on the higher), stamps the card you picked, and opens the letters below,
   which cross-fade or blink between A (white) and B (blue). The size test takes the side column. */
.p3{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,340px);gap:clamp(24px,3.2vw,52px);align-items:start;margin-top:6px}
.p3-main{min-width:0}
.p3-grid{display:grid;grid-template-columns:116px minmax(0,1fr) minmax(0,1fr);column-gap:12px}
.p3-corner{align-self:end;font-size:10px;letter-spacing:.06em;color:#6a6a66;padding-bottom:10px}
.p3-card{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 0fr;height:176px;padding:0;background:#111;border:1px solid #2c2c2c;color:#f3f3f1;text-align:left;overflow:hidden;
  transition:grid-template-columns .75s cubic-bezier(.2,.7,.2,1),border-color .2s,transform .25s cubic-bezier(.2,.7,.2,1),background .2s}
.p3[data-state="guess"] .p3-card:hover,.p3[data-state="guess"] .p3-card:focus-visible{border-color:#8a8a86;background:#171717;transform:translateY(-3px)}
.p3[data-state="reveal"] .p3-card{grid-template-columns:minmax(0,1fr) minmax(0,34%);cursor:default}
.p3-face{display:flex;flex-direction:column;justify-content:space-between;min-width:0;padding:12px 16px 12px}
.p3-letter{align-self:flex-start;display:grid;place-items:center;width:22px;height:22px;font:600 11px var(--ui);background:#f3f3f1;color:#111}
#pairB .p3-letter{background:#50b2ff}
.p3-word{font-size:clamp(34px,3.5vw,58px);line-height:1.1;white-space:nowrap;overflow:hidden}
.p3-name{font:500 10px/1.3 var(--ui);letter-spacing:.05em;color:#9a9a9a;min-height:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:uppercase}
.p3-strip{display:flex;flex-direction:column;justify-content:space-between;min-width:0;overflow:hidden;background:#2a2a28;color:#f3f3f1}
.p3-card.is-high .p3-strip{background:var(--hi);color:#111}
.p3-sk{font:600 9.5px/1 var(--ui);letter-spacing:.08em;padding:12px 12px 0;white-space:nowrap}
.p3-sn{font-family:var(--head);font-weight:600;font-size:clamp(52px,5.4vw,92px);line-height:.8;letter-spacing:-.06em;padding:0 10px 10px;font-variant-numeric:tabular-nums;white-space:nowrap}
.p3-stamp{position:absolute;left:46px;top:12px;font:700 10px/1 var(--ui);letter-spacing:.1em;color:var(--hi);border:2px solid var(--hi);padding:5px 8px 4px;rotate:-8deg;opacity:0;scale:1.7;pointer-events:none;transition:opacity .25s ease .35s,scale .35s cubic-bezier(.3,1.6,.5,1) .35s}
.p3[data-state="reveal"] .p3-card.is-chosen .p3-stamp{opacity:1;scale:1}
.p3[data-state="reveal"] .p3-card.is-chosen{border-color:#8a8a86}
.p3-ruler{grid-column:1/-1;display:grid;grid-template-columns:subgrid;margin-top:12px}
.p3-row{display:contents}
.p3-row>span{padding:7px 0;border-top:1px solid #2c2c2c;font-size:10px;letter-spacing:.04em;font-variant-numeric:tabular-nums;color:#e6e6e4;text-align:right}
.p3-row>span.p3-l{text-align:left;color:#8a8a86}
.p3-l i{font-style:normal;color:var(--hi);margin-left:4px}
.p3-side{min-width:0}
.p3-ask{position:relative;border-top:2px solid #f3f3f1;padding-top:12px}
.p3-q{display:block;font-family:var(--head);font-weight:600;font-size:clamp(88px,8vw,128px);line-height:.8;letter-spacing:-.06em;color:var(--hi);margin:0 0 10px}
.p3-ask p{font-family:var(--read);font-size:16px;line-height:1.45;color:#f3f3f1;margin:0 0 16px}
.p3-choices{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px}
.p3-choices button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;height:64px;background:#f3f3f1;color:#111;font:600 22px var(--head);border:1px solid #f3f3f1;transition:background .15s,transform .15s}
.p3-choices button[data-guess="tie"]{background:transparent;color:#f3f3f1;border-color:#555}
.p3-choices button small{font:500 8.5px/1.1 var(--ui);letter-spacing:.06em;color:#9a9a9a}
.p3-choices button:hover,.p3-choices button:focus-visible{background:var(--hi);border-color:var(--hi);color:#111;transform:translateY(-2px)}
.p3-choices button:hover small{color:#111}
.p3-detail{border-top:2px solid #f3f3f1;padding-top:12px}
.p3-sizes-note{font-family:var(--read);font-size:13.5px;line-height:1.45;color:#cfcfcf;margin:6px 0 0}
.p3-detail .size-grid{grid-template-columns:40px minmax(0,1fr);gap:12px 10px;margin-top:14px}
.p3-overlay{margin:16px 0 0;background:#060606;border:1px solid #2c2c2c}
.p3-overlay[hidden]{display:none}
.p3 #pairCanvas{display:block;width:100%;height:230px}
.p3-mix{display:flex;align-items:center;gap:10px;padding:8px 10px;border-top:1px solid #222;flex-wrap:wrap}
.p3-mix input{flex:1;min-width:140px;accent-color:#f3f3f1}
.p3-key{display:grid;place-items:center;width:20px;height:20px;font:600 10px var(--ui);color:#111}
.p3-key.a{background:#f3f3f1}.p3-key.b{background:#50b2ff}
#pairBlink{background:none;border:1px solid #666;color:#f3f3f1;font-size:10px;letter-spacing:.05em;padding:6px 10px}
#pairBlink[aria-pressed="true"]{background:#50b2ff;border-color:#50b2ff;color:#111}
.p3-overlay figcaption{border-top:1px solid #222}
.p3-reveal{margin-top:18px}
.pair-dots button[data-result="high"]{background:var(--hi);color:#111}
.pair-dots button[data-result="low"]{background:#f3f3f1;color:#111}
.pair-dots button[data-result="tie"]{background:repeating-linear-gradient(45deg,#3a3a37 0 3px,#1b1b1b 3px 6px);color:#fff}
@media(max-width:900px){.p3{grid-template-columns:1fr}.p3-q{font-size:72px}}
@media(max-width:560px){.p3-grid{grid-template-columns:74px minmax(0,1fr) minmax(0,1fr);column-gap:6px}.p3-card{height:128px}.p3-face{padding:9px 10px}
  .p3-word{font-size:clamp(22px,6.6vw,30px)}.p3[data-state="reveal"] .p3-card{grid-template-columns:minmax(0,1fr) minmax(0,40%)}.p3-sn{font-size:40px}.p3-stamp{left:36px;font-size:8.5px}
  .p3-row>span{font-size:9.5px}.p3 #pairCanvas{height:200px}}
@media(prefers-reduced-motion:reduce){.p3-card,.p3-stamp{transition:none}}

/* V103 · About and Data + Method on light paper, laid out like a magazine feature: a sidebar with the title (and, on
   Method, a numbered contents list that follows the reading), numbered section heads in black discs, a drop cap. */
.research-section.about{background-color:#e6e5df;background-image:radial-gradient(circle at 1px 1px,rgba(17,17,17,.17) 1px,transparent 1.5px);background-size:24px 24px;background-attachment:scroll;color:#111}
.about .section-kicker{color:#3a3a3a;border-bottom:2px solid #111}
.ab-side{grid-column:1/4;padding-right:clamp(22px,2.4vw,40px);min-width:0}
.ab-side .ab-title{padding-right:0;font-size:clamp(40px,4.4vw,72px);letter-spacing:-.04em;line-height:.95;color:#111}
@media(min-width:901px){.method .ab-side{position:sticky;top:calc(var(--head-h,70px) + 28px);align-self:start}}
.method .method-toc{flex-direction:column;flex-wrap:nowrap;gap:0;margin:26px 0 0;counter-reset:toc;border-top:2px solid #111}
.method .method-toc li{counter-increment:toc;border-bottom:1px solid rgba(17,17,17,.25)}
.method .method-toc a{display:flex;gap:10px;padding:8px 0;text-decoration:none;color:#3a3a3a}
.method .method-toc a::before{content:counter(toc,decimal-leading-zero);color:#8a8a85;min-width:2ch}
.method .method-toc a:hover,.method .method-toc a[aria-current="true"]{color:#111}
.method .method-toc a[aria-current="true"]::before{content:'▶';color:#111}
.method-body{counter-reset:sec}
.method-body h3{counter-increment:sec;display:flex;align-items:center;gap:12px;border-top:2px solid #111!important;font-size:11px!important;letter-spacing:.1em!important}
.method-body h3::before{content:counter(sec);display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#111;color:#e6e5df;font:600 11px var(--ui);letter-spacing:0;flex:0 0 auto}
.method-body p{color:#1d1d1b}
.method-body p strong{color:#111}
.ab-body p{color:#1d1d1b}
.ab-lede{font-size:clamp(20px,1.7vw,24px)!important;line-height:1.42!important}
.ab-facts{border-top:2px solid #111}
@media(max-width:900px){.ab-side{grid-column:1/-1;padding-right:0}.method .method-toc{margin-top:18px}}
/* phones: the score strip opens along the bottom of each card, so the word keeps its width */
@media(max-width:560px){
  .p3-card{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) 0fr;height:150px;transition:grid-template-rows .75s cubic-bezier(.2,.7,.2,1),border-color .2s}
  .p3[data-state="reveal"] .p3-card{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) 46px}
  .p3-strip{flex-direction:row;align-items:center;justify-content:space-between}
  .p3-sk{padding:0 0 0 10px;font-size:8.5px}
  .p3-sn{font-size:34px;padding:0 10px 0 0;line-height:1}
}
/* V104 · 02.3 simplified: one ink colour for A and B, the score labelled GOOGLE SCORE above a smaller number */
#pairB .p3-letter{background:#f3f3f1}
.p3[data-state="reveal"] .p3-card{grid-template-columns:minmax(0,1fr) minmax(0,30%)}
.p3-sk{font-size:9.5px;letter-spacing:.08em;line-height:1.25;white-space:normal;padding:12px 12px 0}
.p3-sn{font-size:clamp(36px,3.4vw,54px);line-height:.9;padding:0 12px 12px}
.p3-reveal{margin-top:20px;border-top:1px solid #2c2c2c;padding-top:16px}
.p3-reveal .pair-result{font:400 clamp(17px,1.5vw,20px)/1.4 var(--read);color:#f3f3f1;margin:0 0 12px}
@media(max-width:560px){.p3[data-state="reveal"] .p3-card{grid-template-columns:minmax(0,1fr)}.p3-sn{font-size:30px;padding:0 10px 0 0}.p3-sk{padding:0 0 0 10px}}

/* V104 · One next-chapter marker everywhere: the Collection's smaller version, NEXT at the left, the link at the right. */
nav.page-next{display:flex;justify-content:space-between;align-items:center;gap:18px;border-top:1px solid #333;margin-top:60px;padding:18px 0 4px}
.nx-label{font-size:10px;letter-spacing:.06em;color:#999}
nav.page-next a.next-link.nx{flex:0 1 auto;width:min(520px,100%);min-width:min(420px,100%)}
nav.page-next a.next-link.nx .nx-n{font-size:clamp(34px,3.4vw,52px)}
nav.page-next a.next-link.nx .nx-tri{width:22px;height:26px}
@media(max-width:520px){nav.page-next{flex-wrap:wrap}nav.page-next a.next-link.nx{width:100%;min-width:0}}

/* V104 · 03.2 business tab: the brief in plain type, Google's two words, the chart right under them. The threshold counts
   float as a paper card above the chart's corner, its notch pointing in; pointing at the brief opens the card and
   brightens the corner. */
.case-brieftext{display:flex;flex-direction:column;gap:10px}
.case-brieftext .case-name{margin:0}
.case-panel .case-chart{background:none;margin:4px 0 0;padding:0;gap:6px}
.case-plot{position:relative}
.case-panel .case-chart .case-mini{height:236px}
.case-cc{position:absolute;z-index:2;left:0;bottom:calc(100% - var(--top,46px) + 10px);display:flex;flex-direction:column;max-width:min(300px,calc(100% - 8px));
  background:#f3f3f1;color:#111;padding:7px 11px 8px;rotate:-1.4deg;box-shadow:0 14px 26px -12px rgba(0,0,0,.75);cursor:default;
  transition:rotate .35s cubic-bezier(.2,.7,.2,1),translate .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
.case-cc::after{content:'';position:absolute;top:100%;left:var(--nx,50%);width:14px;height:9px;margin-left:-7px;background:#f3f3f1;clip-path:polygon(0 0,100% 0,50% 100%)}
.cc-top{display:flex;align-items:baseline;gap:8px;white-space:nowrap}
.cc-top strong{font-family:var(--head);font-weight:600;font-size:26px;line-height:.95;letter-spacing:-.04em}
.cc-k{font:600 9.5px/1.2 var(--ui);letter-spacing:.06em;text-transform:uppercase}
.cc-more{display:block;max-height:0;opacity:0;overflow:hidden;font:400 12.5px/1.4 var(--read);color:#2a2a28;transition:max-height .35s ease,opacity .25s ease,margin .35s ease}
.cc-t{display:block;margin-top:5px;font:500 9px/1.3 var(--ui);letter-spacing:.06em;color:#55554f}
.case-cc.is-open{rotate:0deg;translate:0 -4px;box-shadow:0 22px 34px -12px rgba(0,0,0,.8)}
.case-cc.is-open .cc-more{max-height:120px;opacity:1;margin-top:6px}
@media(prefers-reduced-motion:reduce){.case-cc,.cc-more{transition:none}}
@media(max-width:560px){.cc-top strong{font-size:22px}.case-cc{max-width:calc(100% - 8px)}}

/* V105 · Every next-chapter link has the same short width; the subtitle sits on its own line above the rule. */
a.next-link.nx .nx-sub{display:block;margin-top:2px}
nav.page-next a.next-link.nx,.threshold-hint a.next-link.nx{flex:0 0 auto;width:clamp(270px,22vw,320px);min-width:0}
@media(max-width:520px){nav.page-next a.next-link.nx{width:100%}}
/* V105 · 03.1: the intro lines up with the HOW TO READ column (application.js sets the columns from the layout). */
#profileStudy .pair-head.is-aligned{align-items:end}
#profileStudy .pair-head.is-aligned .pair-intro p{max-width:none}
#profileStudy .pair-head.is-aligned .pair-intro{max-width:none}

/* V106 · more room between the industry buttons and the two businesses */
.case-bar{margin-bottom:clamp(34px,3.2vw,48px)}
/* V106 · 02.3: the two readings side by side */
.p3-reveal .p3-notes{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,2.6vw,40px);align-items:start}
.p3-reveal .p3-notes .pair-note{display:flex;flex-direction:column;gap:6px;margin:0;max-width:none}
@media(max-width:700px){.p3-reveal .p3-notes{grid-template-columns:1fr;gap:16px}}

/* V106 · the Collection callout sits flush against its tile; its notch reaches over the tile's edge; a clear CLOSE */
#detail.is-anchored::before{left:-11px;width:12px;height:26px;margin-top:-13px}
#detail.is-anchored.to-left::before{left:auto;right:-11px}
#detail .dt-close{position:absolute;top:12px;right:12px;width:auto;height:auto;display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:0;
  background:#151515;color:#f3f3f1;font:600 10px/1 var(--ui);letter-spacing:.08em;box-shadow:none}
#detail .dt-close span{font:400 18px/1 Arial,Helvetica,sans-serif;margin-top:-2px}
#detail .dt-close:hover,#detail .dt-close:focus-visible{background:var(--hi);color:#111;outline:none}
#detail .aside-head{padding-right:96px;min-height:30px;align-items:center}

/* V106 · 03.1: the samples box of a kept tag has a close button */
.cl-pop .cl-pop-x{pointer-events:auto;float:right;margin:-4px -4px 6px 10px;display:inline-flex;align-items:center;gap:6px;padding:6px 9px;background:#f3f3f1;color:#111;border:0;font:600 9.5px/1 var(--ui);letter-spacing:.08em;cursor:pointer}
.cl-pop .cl-pop-x span{font:400 15px/1 Arial,Helvetica,sans-serif;margin-top:-1px}
.cl-pop .cl-pop-x:hover,.cl-pop .cl-pop-x:focus-visible{background:var(--hi);outline:none}

/* V106 · typeface names in italics wherever they are mentioned (not where a name is set in its own face as a specimen) */
i.fn{font-style:italic}
#detailTitle,#sortTipName,#overlayName,.p3-name,.specimen .meta .family{font-style:italic}
/* V107 · 04.2: its instruction set like every other one, smaller, with the neon bar */
.note-block .pair-intro .form-instructions{font-size:12px;line-height:1.6;border-left:1px solid var(--hi);padding-left:16px}