/* Webdesign microsite 04 — incremental LIGHT × LENS treatment.
   Based on the approved PDF's exact lists. Deliberately leaves the decision-tree
   and hero source-fidelity audit for the next separate Perplexity review.
   The original footer and public-link rules remain untouched. */

/* Editorial scale / Anna's established Charter-led typography */
#together .section-head {grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:end}
#together .section-head .eyebrow {font:650 clamp(15px,1.5vw,19px)/1.4 var(--sans);letter-spacing:.085em;margin-bottom:22px}
#together #together-title {font:700 clamp(48px,6.5vw,98px)/.98 var(--serif);letter-spacing:-.055em;margin:0}
#together .section-head>p {font:400 clamp(19px,1.7vw,24px)/1.45 var(--serif);max-width:34ch;margin:0 0 .15em}
#together .role-panel h3 {font:700 clamp(58px,6.3vw,92px)/.95 var(--serif);letter-spacing:-.055em;margin-bottom:17px}
#together .role-person {font:italic 400 clamp(27px,2.6vw,36px)/1.2 var(--serif);margin-bottom:29px}
#together .role-panel li {font:500 clamp(20px,1.85vw,26px)/1.45 var(--sans);letter-spacing:-.018em;padding-block:11px;transition:color .2s ease,padding-left .2s ease;outline-offset:2px;cursor:default}
#together .light-panel li:is(:hover,:focus) {color:var(--lj-yellow-2);padding-left:9px}
#together .lens-panel li:is(:hover,:focus) {color:var(--anna-teal);padding-left:9px}
#together .light-panel li:focus-visible {outline:2px solid var(--lj-yellow-2)}
#together .lens-panel li:focus-visible {outline:2px solid var(--anna-teal)}
#together .role-panel li:focus:not(:focus-visible){outline:none}
@media(max-width:850px){
 #together .section-head {grid-template-columns:1fr;gap:20px}
 #together #together-title {font-size:clamp(48px,9.5vw,74px)}
 #together .role-panel h3 {font-size:clamp(59px,10vw,77px)}
 #together .role-person {font-size:clamp(26px,4.3vw,32px)}
 #together .role-panel li {font-size:clamp(20px,2.75vw,24px)}
}
@media(max-width:640px){
 #together .section-head .eyebrow {font-size:15px;margin-bottom:17px}
 #together #together-title {font-size:clamp(41px,10.5vw,62px)}
 #together .section-head>p {font-size:19px;line-height:1.5}
 #together .role-panel h3 {font-size:clamp(54px,13vw,73px)}
 #together .role-person {font-size:27px}
 #together .role-panel li {font-size:20px;line-height:1.4}
}
@media(prefers-reduced-motion:reduce){#together .role-panel li{transition:none}}
@media(forced-colors:active){
 #together .role-panel li:is(:hover,:focus){color:Highlight;padding-left:9px}
 #together .role-panel li:focus-visible{outline:2px solid Highlight}
}
@media print{
 #together #together-title {font-size:32pt}
 #together .role-panel h3 {font-size:27pt}
 #together .role-person {font-size:16pt}
 #together .role-panel li {font-size:11pt;padding-left:0!important;color:black!important}
}