/* Webdesign Microsite 12 — precise client-facing refinements.
   Inherits the genuine Anna/Lemon Juice palette, Charter fallback stack and
   ORIGINAL Progressive Tree 0.1E. No image approximation or imported fonts. */

/* 01 — Smaller optical trigger; more room for Light and a fuller sideways Lens. */
#together #together-title {font-size:clamp(39px,4.6vw,64px);line-height:1.02;letter-spacing:-.045em;margin-bottom:0;}
#together #together-title .role-title-wrap {gap:.13em;cursor:default;}
#together #together-title .role-title-times {cursor:pointer;}
#together .section-head {align-items:center;margin-bottom:34px;}
#together .role-lists {
  grid-template-columns:minmax(0,1fr) minmax(0,1.11fr);
  gap:clamp(20px,2.5vw,38px);
  overflow:visible;
}
#together .role-panel {padding:clamp(39px,3.9vw,58px) clamp(26px,3.5vw,53px) 48px;}
#together .role-panel h3 {font-size:clamp(76px,7.7vw,108px);line-height:.93;margin-bottom:17px;letter-spacing:-.058em;}
#together .role-person {font-size:clamp(27px,2.65vw,36px);margin-bottom:29px;}
#together .role-panel li {font-size:clamp(20px,1.89vw,25px);line-height:1.42;padding:8px 0!important;}
#together .lens-panel {
  border:1.5px solid var(--ink);
  border-radius:0 100% 100% 0 / 0 50% 50% 0;
  padding-right:clamp(88px,11.5vw,172px);
}
/* Pointer and keyboard preview show the reverse, without shifting a letter.
   The × button still pins/unpins the reversal on click/tap. */
#together:is(.is-hover-lit,.is-reversed) .light-panel {
  background:var(--lj-yellow-2);color:#151513;
}
#together:is(.is-hover-lit,.is-reversed) .light-panel h3,
#together:is(.is-hover-lit,.is-reversed) .light-panel .role-person,
#together:is(.is-hover-lit,.is-reversed) .light-panel li {color:#151513!important;}
#together:is(.is-hover-lit,.is-reversed) .lens-panel {
  background:#151513;color:#fff;border-color:#151513;
}
#together:is(.is-hover-lit,.is-reversed) .lens-panel h3,
#together:is(.is-hover-lit,.is-reversed) .lens-panel .role-person,
#together:is(.is-hover-lit,.is-reversed) .lens-panel li {color:#fff!important;}
#together:is(.is-hover-lit,.is-reversed) .light-panel li:is(:hover,:focus-visible) {color:var(--anna-teal)!important;}
#together:is(.is-hover-lit,.is-reversed) .lens-panel li:is(:hover,:focus-visible) {color:#BDE0DD!important;}
#together .role-panel {transition:background-color .6s cubic-bezier(.2,.64,.35,1),color .6s cubic-bezier(.2,.64,.35,1),border-color .6s ease;}
#together .role-panel h3,#together .role-person,#together .role-panel li {transition:color .52s ease!important;}
#together .together-strip {margin-top:21px;}
/* The reversible sweep crosses both fields without blocking controls. */
#together .role-lists::after {width:30%;mix-blend-mode:normal;}

/* 03 — A full-width light-through-paper field; no pastel cards or decorative graphics. */
#decisions {position:relative;isolation:isolate;padding-block:clamp(60px,7vw,96px) clamp(66px,7vw,105px);}
#decisions::before,#decisions::after {
  content:"";position:absolute;z-index:-2;pointer-events:none;
  top:0;bottom:0;left:50%;width:100vw;transform:translateX(-50%);
}
#decisions::before {
  background:
    radial-gradient(ellipse at 25% 27%,rgba(255,238,0,.29) 0%,rgba(255,238,0,0) 58%),
    linear-gradient(117deg,#ECEAE4 0%,#FCF4C9 34%,#E7EEE2 72%,#C6DBD5 100%);
}
#decisions::after {
  z-index:-1;opacity:0;transition:opacity .65s ease;
  background:radial-gradient(ellipse at 24% 17%,rgba(45,95,103,.14),transparent 66%),radial-gradient(ellipse at 65% 60%,rgba(255,238,0,.32),transparent 58%);
}
@media (hover:hover) {
  #decisions:has(.process-word:hover)::after {opacity:1;}
}
#decisions #decisions-title {font-size:clamp(48px,5.25vw,75px);max-width:20ch;line-height:1.08;}
#decisions .section-head {margin-bottom:46px;}
#decisions .section-head>p {font-size:clamp(19px,1.78vw,24px);max-width:38ch;}
#decisions .process-word {cursor:default;}

/* 04 — Small optional experiment, not a detailed application form. */
#outputs .section-head h2 {font-size:clamp(45px,5.8vw,79px);line-height:1.07;letter-spacing:-.048em;}
#outputs .section-head h2 em {font-weight:400;}
#outputs .section-head>div:last-child>p {font-size:clamp(18px,1.7vw,22px);line-height:1.48;max-width:42ch;}
#outputs .publishing-lede {font-style:italic;font-family:var(--serif);font-size:clamp(18px,1.66vw,21px);color:var(--anna-teal);margin:22px 0 0;max-width:42ch;}
#outputs .publishing-disclosure {margin-top:35px;}
#outputs .publishing-disclosure>summary {font-size:clamp(23px,2.7vw,35px);padding:23px 2px;gap:15px 20px;}
#outputs .publishing-disclosure>summary .summary-note {font-size:12px;letter-spacing:.03em;}
#outputs .publishing-disclosure[open]>summary .demo-toggle {transform:rotate(45deg);}
#outputs .publishing-demo {grid-template-columns:minmax(225px,290px) minmax(0,1fr);gap:clamp(26px,4.2vw,56px);align-items:start;padding:20px 0 0;}
#outputs .publish-controls {padding-top:5px;border-top:0;}
#outputs .publish-controls>label {font-size:15px;font-weight:600;line-height:1.5;margin:0 0 7px;}
#outputs .publish-controls>input {margin:0 0 19px;background:#fffefd;border-color:var(--rule);}
#outputs .output-choices {margin-top:12px;}
#outputs .output-choices legend {font-size:13px;margin-bottom:8px;}
#outputs .output-choices label {font:500 17px/1.3 var(--sans);gap:13px;min-height:44px;}
#outputs .previews-heading {grid-column:1/-1;margin-bottom:0;font-size:12px;color:var(--anna-teal);}
#outputs .outputs {gap:24px;}
#outputs .output {padding-top:15px;}
#outputs .output-content {min-height:184px;}
#outputs .output>small {font-size:13px;margin-top:7px;}
#outputs .publishing-extras {margin-top:21px;border-top:1px solid var(--rule);}
#outputs .publishing-extras>summary {display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:54px;padding:10px 2px;font:500 14px/1.4 var(--sans);color:var(--soft);}
#outputs .publishing-extras>summary:hover {color:var(--anna-teal);}
#outputs .publishing-extras[open]>summary span {transform:rotate(45deg);}
#outputs .publishing-extras .publish-tools {margin:0 0 12px;}
#outputs .publishing-foot {padding:22px 0 3px;gap:16px 30px;}
#outputs .publishing-foot p {font:italic 15px/1.5 var(--serif);color:var(--soft);max-width:48ch;}
#outputs .publishing-foot a {font-size:16px;max-width:none;white-space:normal;}

/* 05 — Three readable categories; keep progressive disclosure. */
#outputs + .making {padding-block:70px 76px;}
.making #making-title {font-size:clamp(46px,4.7vw,68px);line-height:1.09;max-width:19ch;}
.making .section-head>p {font:400 clamp(19px,1.8vw,23px)/1.55 var(--serif);max-width:39ch;}
.making-register .making-disclosure>summary {padding:23px 4px;min-height:100px;}
.making-register .making-title strong {font-size:clamp(26px,3.1vw,40px);}
.making-register .making-summary {display:block;font:italic 19px/1.38 var(--serif);color:var(--soft);margin-top:4px;}
.making-register .making-content {max-width:60em;}
.making-register .making-content p {font-size:clamp(18px,1.8vw,22px);}

/* Contact — inviting, unambiguous, without duplicate address lines or form disclaimers. */
#contact {padding-block:76px 82px;}
#contact #contact-title {font-size:clamp(46px,5.5vw,80px);}
#contact .contact-copy>p:not(.eyebrow) {font-size:clamp(19px,1.9vw,23px);line-height:1.5;max-width:37ch;}
#contact .contact-invitation {font:italic clamp(18px,1.65vw,21px)/1.45 var(--serif);color:var(--ink);margin:21px 0 18px;max-width:36ch;}
#contact .contact-form-link {margin-top:2px;}

@media(max-width:1000px) and (min-width:851px){
  #together .role-panel h3 {font-size:clamp(66px,7.4vw,78px);}
  #together .role-lists {gap:20px;}
  #together .lens-panel {padding-right:clamp(62px,8vw,95px);}
  #together .role-panel {padding:33px 26px 40px;}
  #together .role-panel li {font-size:20px;}
}
@media(max-width:850px){
  #together .role-lists {grid-template-columns:1fr;gap:20px;}
  #together .lens-panel {border:1.5px solid var(--ink);border-radius:0 100% 100% 0 / 0 50% 50% 0;min-height:auto;padding-right:clamp(70px,24vw,160px);}
  #together .role-panel h3 {font-size:clamp(70px,10vw,93px);}
  #together .role-panel {padding:37px 38px 40px;}
  #decisions #decisions-title {font-size:clamp(44px,6.1vw,68px);}
  #outputs .publishing-demo {grid-template-columns:minmax(0,1fr);gap:29px;}
  #outputs .publish-controls {max-width:590px;}
  #outputs .outputs {grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(max-width:640px){
  #together #together-title {font-size:clamp(36px,9.9vw,48px);}
  #together .section-head {margin-bottom:23px;}
  #together .role-lists {gap:16px;}
  #together .role-panel {padding:30px 25px 31px;}
  #together .role-panel h3 {font-size:clamp(59px,15vw,83px);}
  #together .role-person {font-size:clamp(25px,6.6vw,31px);}
  #together .role-panel li {font-size:clamp(19px,5vw,22px);}
  #together .lens-panel {padding-right:clamp(52px,16vw,92px);}
  #together .together-strip {margin-top:14px;}
  #decisions {padding-block:55px 68px;}
  #decisions #decisions-title {font-size:clamp(36px,9vw,48px);}
  #decisions .section-head {margin-bottom:31px;}
  #decisions .section-head>p {font-size:19px;}
  #outputs .section-head h2 {font-size:clamp(41px,10vw,56px);}
  #outputs .section-head>div:last-child>p {font-size:19px;}
  #outputs .publishing-disclosure>summary {font-size:24px;}
  #outputs .publishing-disclosure>summary .summary-note {font-size:11px;}
  #outputs .outputs {grid-template-columns:1fr;}
  #outputs + .making {padding-block:54px 64px;}
  .making #making-title {font-size:clamp(38px,9vw,50px);}
  .making-register .making-disclosure>summary {min-height:94px;}
  .making-register .making-title strong {font-size:clamp(25px,7vw,34px);}
  .making-register .making-summary {font-size:17px;}
  #contact {padding-block:55px 65px;}
  #contact #contact-title {font-size:clamp(44px,10vw,61px);}
  #contact .contact-invitation {font-size:19px;}
}
@media (prefers-reduced-motion:reduce) {
  #together .role-panel,#together .role-panel h3,#together .role-person,#together .role-panel li,
  #decisions::after,#outputs .publishing-disclosure .demo-toggle {transition:none!important;}
}
@media(forced-colors:active){
  #decisions::before,#decisions::after {display:none;}
  #together .role-panel,#together .role-panel h3,#together .role-panel li,#together .role-person {forced-color-adjust:auto;}
  #together .lens-panel {border:2px solid CanvasText;}
}
@media print {
  #decisions::before,#decisions::after {display:none!important;}
  #together .role-panel {background:#fff!important;color:#000!important;}
}
@media(max-width:370px){
  #outputs .output-choices {display:grid;grid-template-columns:1fr;}
  #outputs .output-choices legend {grid-column:1/-1;}
  #outputs .output-choices label {width:100%;}
}