/* Six complete type systems for the prototype comparison. */
:root{--font-display:'Bodoni Moda',serif;--font-body:Manrope,sans-serif;--font-mono:'IBM Plex Mono',monospace;--display-weight:500;--display-tracking:-.06em;--display-leading:.9;--display-case:none;--display-em:italic;--hero-scale:1;--heading-scale:1;--body-tracking:0em}
html{font-family:var(--font-body);letter-spacing:var(--body-tracking)}
.editorial,.section-heading h2,.gallery-info h3,.index-caption h3,.practice-heading h2,.contact-section h2,.case-copy h2,.nav-panel a>span,.gallery-counter span:first-child{font-family:var(--font-display);font-weight:var(--display-weight);letter-spacing:var(--display-tracking);text-transform:var(--display-case);font-optical-sizing:auto}
.editorial{font-size:calc(clamp(72px,8.3vw,124px)*var(--hero-scale));line-height:var(--display-leading)}
.section-heading h2{font-size:calc(clamp(48px,5.2vw,80px)*var(--heading-scale));line-height:1.02}
.practice-heading h2{font-size:calc(clamp(70px,7.3vw,104px)*var(--hero-scale));line-height:var(--display-leading)}
.contact-section h2{font-size:calc(clamp(65px,8.3vw,120px)*var(--hero-scale));line-height:var(--display-leading)}
.editorial em,.section-heading em,.practice-heading em,.contact-section em{font-weight:inherit;font-style:var(--display-em)}
.gallery-info h3,.case-copy h2{line-height:1.03}
.index-caption h3{line-height:1.12}
.text-link{font-family:var(--font-body)}
.mono,.wordmark span,.practice-badge span,.progress-label,.progress-value{font-family:var(--font-mono)}
.type-object span{font-family:var(--font-display);font-weight:var(--display-weight)}
.practice-heading,.practice-copy,.case-copy{min-width:0}
.case-copy h2{max-width:100%;overflow-wrap:anywhere}
/* Keep the comparison controls stable while the portfolio changes. */
.palette-lab{left:calc(50% - 91px)}
.palette-lab summary{min-width:222px}
.type-lab{position:fixed;top:43px;left:calc(50% + 115px);transform:translateX(-50%);z-index:61;color:var(--wine);font:500 11px/1.5 Manrope,sans-serif;letter-spacing:0}
.type-lab summary{display:flex;align-items:center;gap:10px;list-style:none;cursor:pointer;background:var(--paper);border:1px solid var(--line);border-radius:28px;padding:12px 16px;min-height:44px;min-width:174px;box-shadow:0 5px 18px var(--palette-shadow);font-weight:700}
.type-lab summary::-webkit-details-marker{display:none}
.type-lab summary:focus-visible{outline:3px solid var(--violet);outline-offset:5px}
#type-current{margin-right:auto}.type-mobile-label{display:none}
.type-symbol{font:500 18px/1 var(--font-display);letter-spacing:-.04em}
.type-chevron{font-size:16px;font-weight:500;transition:transform 200ms var(--ease)}
.type-lab[open] .type-chevron{transform:rotate(180deg)}
.type-panel{position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%);width:310px;max-height:calc(100svh - 120px);overflow:auto;background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:20px;box-shadow:0 15px 40px var(--palette-shadow)}
.type-panel>label{display:block;font:400 10px/1.5 'IBM Plex Mono',monospace;text-transform:uppercase;letter-spacing:.04em;margin-bottom:10px}
.type-panel select{display:block;width:100%;min-height:44px;padding:9px 10px;font:600 13px Manrope,sans-serif;background:var(--pink);color:var(--wine);border:1px solid var(--line);border-radius:5px}
.type-panel select:focus-visible{outline:3px solid var(--violet);outline-offset:3px}
#type-description{font-size:11px;line-height:1.6;margin-top:14px;min-height:36px}
.type-specimen{padding:18px 0 16px;border-bottom:1px solid var(--line)}
.type-specimen>span{display:block;font:var(--display-weight) 39px/1 var(--font-display);letter-spacing:var(--display-tracking);text-transform:var(--display-case)}
.type-specimen em{font-weight:inherit;font-style:var(--display-em)}
.type-specimen p{font:500 12px/1.5 var(--font-body);margin-top:12px}
.type-roles{margin:14px 0 16px}.type-roles>div{display:flex;justify-content:space-between;gap:10px;margin:5px 0}.type-roles dt{font-size:10px;opacity:.75}.type-roles dd{margin:0;font-size:11px;font-weight:600}
.type-actions{display:flex;align-items:center;justify-content:space-between;gap:8px;border-top:1px solid var(--line);padding-top:12px}
.type-actions button{border:0;background:transparent;min-height:36px;padding:4px 0;font:600 11px Manrope,sans-serif}
.type-actions button:hover{color:var(--violet)}#type-count{font:400 10px/1.5 'IBM Plex Mono',monospace}
@media(max-width:1150px) and (min-width:701px){.palette-lab{left:calc(50% - 82px)}.palette-lab summary{min-width:100px}.palette-mobile-label{display:inline}#palette-current,.palette-dots{display:none}.type-lab{left:calc(50% + 64px)}}
@media(max-width:1050px){.editorial{font-size:calc(clamp(65px,8.8vw,95px)*var(--hero-scale))}.practice-heading h2{font-size:calc(76px*var(--hero-scale))}}
@media(max-width:700px){
  .palette-lab{left:auto}
  .palette-lab summary{min-width:0}
  .type-lab{top:auto;left:auto;right:28px;bottom:86px;transform:none}
  .type-lab summary{min-width:0;width:70px;min-height:50px;padding:10px 12px;justify-content:center;gap:0;border-color:var(--wine)}
  .type-mobile-label{display:inline}#type-current,.type-symbol,.type-chevron{display:none}
  .type-panel{left:auto;right:0;top:auto;bottom:calc(100% + 10px);transform:none;width:min(280px,calc(100vw - 55px));max-height:calc(100svh - 175px)}
  .type-panel select{font-size:16px}.type-actions button{min-height:44px}
  .editorial{font-size:calc(clamp(58px,14vw,94px)*var(--hero-scale))}
  .section-heading h2{font-size:calc(clamp(39px,10vw,66px)*var(--heading-scale))}
  .practice-heading h2{font-size:calc(clamp(56px,15vw,90px)*var(--hero-scale))}
  .contact-section h2{font-size:calc(clamp(45px,11.6vw,78px)*var(--hero-scale));line-height:1.02}
}
@media(prefers-reduced-motion:reduce){.type-chevron{transition:none}}