/* WEBDESIGN MICROSITE 07 — controlled editorial interaction pass
   Source: 06 ZIP; preserve copy, artwork, colors, five-choice tool and footer.
   Light / Lens: no layout movement, no invented pairings, fine rule follows type.
   Header: one unobtrusive underline, in addition to 06's existing ANNA echo.
   All interactions are enhancements; text remains visible without hover or JS. */

/* --- LIGHT / LENS: the rule follows the reading, not the letterforms --- */
#together .role-panel li {
  position:relative;
  padding-left:0;
  color:inherit;
  border-top-color:var(--rule);
  transition:color .24s ease;
  isolation:isolate;
}
#together .light-panel li {color:var(--paper-2);border-top-color:#5b5953}
#together .lens-panel li {color:var(--ink);border-top-color:var(--rule)}
#together .role-panel li::before {
  content:"";
  position:absolute;
  top:-1px;
  left:0;
  right:0;
  height:2px;
  background:var(--role-accent);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .28s cubic-bezier(.22,.61,.36,1);
  pointer-events:none;
}
#together .light-panel {--role-accent:var(--lj-yellow-2)}
#together .lens-panel {--role-accent:var(--anna-teal)}
#together .light-panel li:is(:hover,:focus-visible) {color:var(--lj-yellow-2)}
#together .lens-panel li:is(:hover,:focus-visible) {color:var(--anna-teal)}
#together .role-panel li:is(:hover,:focus-visible)::before {transform:scaleX(1)}
#together .role-panel li:focus-visible {outline:2px solid var(--role-accent);outline-offset:4px}

/* Heading stays at rest; hovered section lets its own color subtly connect. */
#together .role-panel h3 {transition:color .25s ease}
@media (hover:hover) {
 #together .light-panel:hover h3 {color:var(--lj-yellow-2)}
 #together .lens-panel:hover h3 {color:var(--anna-teal)}
 #together:has(.together-strip:hover) .light-panel h3 {color:var(--lj-yellow-2)}
 #together:has(.together-strip:hover) .lens-panel h3 {color:var(--anna-teal)}
}
#together .light-panel:focus-within h3 {color:var(--lj-yellow-2)}
#together .lens-panel:focus-within h3 {color:var(--anna-teal)}

/* Shared responsibility reads as a conclusion, not a third card. */
#together .together-strip {transition:border-color .25s ease}
@media(hover:hover) {
 #together .together-strip:hover {border-top-color:var(--anna-teal)}
}

/* --- HEADER: a typographic accent, no movement or new artwork --- */
.webdesign-masthead .masthead-title {
  position:relative;
  display:inline-block;
  padding-bottom:.035em;
}
.webdesign-masthead .masthead-title::after {
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-.045em;
  height:2px;
  background:var(--ink);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .28s cubic-bezier(.22,.61,.36,1);
  pointer-events:none;
}
@media(hover:hover) {
 .webdesign-masthead:hover .masthead-title::after {transform:scaleX(1)}
}
.webdesign-masthead:focus-visible .masthead-title::after {transform:scaleX(1)}

/* No hidden hover-only information. Motion can be disabled at OS or page level. */
body[data-motion="off"] #together .role-panel li,
body[data-motion="off"] #together .role-panel li::before,
body[data-motion="off"] #together .role-panel h3,
body[data-motion="off"] #together .together-strip,
body[data-motion="off"] .webdesign-masthead .masthead-title::after {transition:none!important}
@media(prefers-reduced-motion:reduce){
 #together .role-panel li,
 #together .role-panel li::before,
 #together .role-panel h3,
 #together .together-strip,
 .webdesign-masthead .masthead-title::after {transition:none!important}
}
@media(forced-colors:active){
 #together .role-panel li:is(:hover,:focus-visible) {color:Highlight}
 #together .role-panel li::before {background:Highlight}
 #together .role-panel li:focus-visible {outline-color:Highlight}
 #together .role-panel h3 {color:CanvasText!important}
 .webdesign-masthead .masthead-title::after {background:CanvasText}
}
@media print{
 #together .role-panel li::before,
 .webdesign-masthead .masthead-title::after {display:none!important}
 #together .role-panel li {color:black!important}
 #together .role-panel h3 {color:black!important}
}