/* Testing controls are quiet chrome; switching layouts is instant. */
.layout-study-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:14px 24px;margin-block:32px 0;padding-block:14px;border-top:1px solid var(--line);font-family:var(--body-type);color:var(--muted)}
.layout-study-label{font-size:12px;line-height:1.4;margin-right:auto}
.layout-tabs{display:flex;gap:4px;flex-wrap:wrap}
.layout-tabs button{font:500 12px/1.4 var(--body-type);min-height:40px;padding:10px 14px;border:1px solid var(--line);background:white;color:var(--ink);cursor:pointer;white-space:nowrap}
.layout-tabs button[aria-selected=true]{background:var(--purple);border-color:var(--purple);color:white}
.layout-tabs button:hover:not([aria-selected=true]){background:var(--surface)}
.layout-reset{border:0;background:transparent;font:400 12px/1.4 var(--body-type);text-decoration:underline;text-underline-offset:4px;min-height:40px;color:var(--muted)}
.layout-study-toolbar+section[data-layout-study]{padding-top:42px}
/* HERO: a two-column editorial opening, a centred masthead, or a split poster. */
html[data-typeface="source"] body #hero[data-layout="2"]{text-align:center;padding-bottom:72px}
#hero[data-layout="2"] .hero-intro{display:block}
#hero[data-layout="2"] .hero-heading{max-width:1050px;margin-inline:auto}
html[data-typeface="source"] body #hero[data-layout="2"] h1{font-size:clamp(44px,7.2vw,106px);line-height:1.06}
#hero[data-layout="2"] .hero-copy{max-width:670px;margin:36px auto 0}
#hero[data-layout="2"] .hero-actions{justify-content:center;flex-direction:row;align-items:center}
#hero[data-layout="2"] .satellite-teaser{display:inline-block;margin-top:26px;text-align:left}
#hero[data-layout="3"] .hero-intro{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0;align-items:stretch;background:var(--surface)}
#hero[data-layout="3"] .hero-heading{background:var(--lilac);padding:42px}
html[data-typeface="source"] body #hero[data-layout="3"] h1{font-size:clamp(48px,6.5vw,94px);line-height:1.03}
#hero[data-layout="3"] .hero-copy{padding:42px;margin:0;align-self:center}
#hero[data-layout="3"] .hero-actions{flex-direction:column;align-items:start;gap:12px}
#hero[data-layout="3"] .hero-eyebrow{margin-bottom:44px}
/* WHO: four images in a row; paired image/text cards; a compact editorial list. */
#who[data-layout="2"] .audience-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
#who[data-layout="2"] .audience-grid article{display:grid;grid-template-columns:43% minmax(0,1fr);background:white;align-items:stretch}
#who[data-layout="2"] .audience-image{aspect-ratio:auto;min-height:250px}
#who[data-layout="2"] .audience-image img{height:100%;aspect-ratio:auto;object-fit:cover}
#who[data-layout="2"] .audience-caption{padding:28px}
#who[data-layout="2"] .audience-caption p{max-width:none}
#who[data-layout="3"] .audience-grid{display:grid;grid-template-columns:1fr;gap:0}
#who[data-layout="3"] .audience-grid article{display:grid;grid-template-columns:180px minmax(0,1fr);gap:36px;padding-block:24px;border-top:1px solid var(--line);align-items:center}
#who[data-layout="3"] .audience-image{aspect-ratio:3/2}
#who[data-layout="3"] .audience-caption{padding:0;display:grid;grid-template-columns:28px minmax(0,.8fr) minmax(0,1.2fr);gap:24px;align-items:start}
#who[data-layout="3"] .audience-index{margin:7px 0 0}
#who[data-layout="3"] .audience-caption p{max-width:none;margin:0}
/* PARTICIPANTS: bounded cells, an open logo wall, or a named directory. */
.company-name{display:none}
#participants[data-layout="2"] .company-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;background:var(--surface);padding:32px;border:0}
#participants[data-layout="2"] .company-grid>.company-cell{border:0;background:transparent;height:110px}
#participants[data-layout="3"] .company-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border:0;--logo-scale:.8}
#participants[data-layout="3"] .company-grid>.company-cell{display:grid;grid-template-columns:110px minmax(0,1fr);gap:24px;justify-items:start;align-items:center;height:104px;padding:20px 24px;border:0;border-top:1px solid var(--line)}
#participants[data-layout="3"] .company-cell img{max-width:100%;max-height:40px;justify-self:center}
#participants[data-layout="3"] .company-name{display:block;font-size:14px;font-weight:500;line-height:1.4}
/* ABOUT: overview and statistics; a story beside a stat rail; a broad statement. */
#about[data-layout="2"]{background:white}
#about[data-layout="2"]>.wrap{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,.6fr);gap:32px 72px}
#about[data-layout="2"] .section-heading{display:contents}
#about[data-layout="2"] .section-heading>h2{grid-column:1;grid-row:1}
#about[data-layout="2"] .section-heading>div{grid-column:1;grid-row:2;max-width:670px}
#about[data-layout="2"] .about-stats{grid-column:2;grid-row:1/span 2;grid-template-columns:1fr;gap:24px;background:var(--lilac);padding:32px}
#about[data-layout="2"] .about-stats>div{padding-top:20px}
#about[data-layout="2"] .about-stats strong{font-size:54px}
#about[data-layout="2"] .about-stats span{margin-top:8px}
#about[data-layout="3"]{background:var(--sky)}
#about[data-layout="3"] .section-heading{display:block}
#about[data-layout="3"] .section-heading>h2{margin-bottom:36px}
#about[data-layout="3"] .section-heading>div{max-width:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px}
#about[data-layout="3"] .section-heading>div p{margin:0}
#about[data-layout="3"] .about-stats{gap:36px}
#about[data-layout="3"] .about-stats>div{border-color:#0a0a0a35;display:flex;align-items:baseline;gap:22px;flex-wrap:wrap}
#about[data-layout="3"] .about-stats strong{font-size:52px}
#about[data-layout="3"] .about-stats span{max-width:140px;margin:0}
/* TEAM: compact contacts; a horizontal directory; small editorial portrait cards. */
#team[data-layout="2"] .team-grid{grid-template-columns:1fr;gap:0}
#team[data-layout="2"] .team-grid .portrait{max-width:none;grid-template-columns:72px minmax(0,1fr);gap:28px;border-top:1px solid var(--line);padding-block:24px}
#team[data-layout="2"] .team-grid .portrait img{width:72px;height:72px;border-radius:50%}
#team[data-layout="2"] .organiser-info{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:center}
#team[data-layout="2"] .organiser-info p{font-size:14px;margin:0}
#team[data-layout="3"] .team-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
#team[data-layout="3"] .team-grid .portrait{display:flex;flex-direction:column;align-items:start;gap:28px;padding:30px;background:var(--surface);max-width:none}
#team[data-layout="3"] .team-grid .portrait img{width:88px;height:88px}
#team[data-layout="3"] .portrait:nth-child(2){background:var(--lilac)}
#team[data-layout="3"] .portrait:nth-child(3){background:var(--sky)}
/* Q&A: split intro/list, a broad row list, or independent question cards. */
#faq[data-layout="2"],#faq[data-layout="3"]{display:block}
#faq[data-layout="2"] .section-heading,#faq[data-layout="3"] .section-heading{display:grid;grid-template-columns:1fr 1fr;margin-bottom:40px}
#faq[data-layout="2"] .faq-list details{padding:26px 0}
#faq[data-layout="2"] .faq-list summary{font-size:21px}
#faq[data-layout="2"] .faq-list p{max-width:640px;margin-left:25%}
#faq[data-layout="3"] .faq-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;border:0;align-items:start}
#faq[data-layout="3"] .faq-list details{border:1px solid var(--line);background:var(--surface);padding:26px;min-width:0}
#faq[data-layout="3"] .faq-list details[open]{background:white}
#faq[data-layout="3"] .faq-list p{max-width:none;margin-top:20px}
@media(max-width:1100px){
 #participants[data-layout="2"] .company-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
 #participants[data-layout="3"] .company-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 #who[data-layout="2"] .audience-grid article{grid-template-columns:1fr}
 #who[data-layout="2"] .audience-image{aspect-ratio:16/9;min-height:0}
 #who[data-layout="3"] .audience-caption{grid-template-columns:24px minmax(0,1fr);gap:12px 20px}
 #who[data-layout="3"] .audience-caption p{grid-column:2}
 #about[data-layout="2"]>.wrap{gap:32px 40px}
 #about[data-layout="3"] .about-stats>div{display:block}
 #about[data-layout="3"] .about-stats span{max-width:none;margin-top:12px}
}
@media(max-width:800px){
 .layout-study-label{width:100%}.layout-study-toolbar{gap:12px}.layout-reset{margin-left:auto}
 #hero[data-layout="3"] .hero-heading,#hero[data-layout="3"] .hero-copy{padding:28px}
 #hero[data-layout="3"] .hero-intro{grid-template-columns:1fr}
 html[data-typeface="source"] body #hero[data-layout="3"] h1{font-size:clamp(48px,8vw,70px)}
 #hero[data-layout="2"] .hero-actions{flex-wrap:wrap}
 #who[data-layout="3"] .audience-grid article{grid-template-columns:140px minmax(0,1fr);gap:24px}
 #participants[data-layout="2"] .company-grid{grid-template-columns:repeat(3,minmax(0,1fr));padding:20px}
 #participants[data-layout="3"] .company-grid>.company-cell{grid-template-columns:90px minmax(0,1fr);gap:18px;padding-inline:16px}
 #about[data-layout="2"]>.wrap{display:block}
 #about[data-layout="2"] .section-heading{display:block}
 #about[data-layout="2"] .section-heading>h2{margin-bottom:28px}
 #about[data-layout="2"] .about-stats{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:32px;gap:24px;padding:24px}
 #about[data-layout="2"] .about-stats strong{font-size:42px}
 #about[data-layout="3"] .section-heading>div{grid-template-columns:1fr;gap:20px;max-width:670px}
 #team[data-layout="2"] .organiser-info{grid-template-columns:1fr;gap:6px}
 #team[data-layout="3"] .team-grid{grid-template-columns:1fr}
 #team[data-layout="3"] .team-grid .portrait{flex-direction:row;gap:24px;align-items:center;padding:24px}
 #faq[data-layout="2"] .section-heading,#faq[data-layout="3"] .section-heading{grid-template-columns:1fr;gap:20px}
}
@media(max-width:600px){
 .layout-study-toolbar{margin-top:24px;padding-block:12px}
 .layout-tabs{width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
 .layout-tabs button{font-size:11px;white-space:normal;padding:10px 8px}
 .layout-study-toolbar+section[data-layout-study]{padding-top:28px}
 html[data-typeface="source"] body #hero[data-layout="2"] h1{font-size:clamp(39px,10vw,58px)}
 #hero[data-layout="2"] .hero-copy{margin-top:28px}
 #hero[data-layout="2"] .hero-actions{flex-direction:column;gap:14px}
 #hero[data-layout="2"] .satellite-teaser{max-width:100%}
 #hero[data-layout="3"] .hero-eyebrow{font-size:12px;margin-bottom:28px}
 html[data-typeface="source"] body #hero[data-layout="3"] h1{font-size:clamp(43px,11vw,62px)}
 #who[data-layout="2"] .audience-grid{grid-template-columns:1fr;gap:20px}
 #who[data-layout="2"] .audience-caption{padding:24px}
 #who[data-layout="3"] .audience-grid article{grid-template-columns:100px minmax(0,1fr);gap:18px;align-items:start}
 #who[data-layout="3"] .audience-caption{display:block}
 #who[data-layout="3"] .audience-index{margin:0 0 10px}
 #who[data-layout="3"] .audience-caption p{margin-top:12px}
 #who[data-layout="3"] .audience-caption h3{font-size:21px}
 #participants[data-layout="2"] .company-grid{grid-template-columns:repeat(2,minmax(0,1fr));padding:12px;gap:4px}
 #participants[data-layout="2"] .company-grid>.company-cell{padding:16px;height:94px}
 #participants[data-layout="3"] .company-grid{grid-template-columns:1fr}
 #participants[data-layout="3"] .company-grid>.company-cell{grid-template-columns:110px minmax(0,1fr);height:92px;padding-inline:12px}
 #about[data-layout="2"] .about-stats{grid-template-columns:1fr;padding:26px}
 #about[data-layout="3"] .about-stats{grid-template-columns:1fr;gap:24px}
 #about[data-layout="3"] .about-stats strong{font-size:48px}
 #team[data-layout="2"] .team-grid .portrait{grid-template-columns:64px minmax(0,1fr);gap:20px}
 #team[data-layout="2"] .team-grid .portrait img{width:64px;height:64px}
 #team[data-layout="3"] .team-grid .portrait{align-items:start;padding:24px 20px;gap:18px}
 #team[data-layout="3"] .team-grid .portrait img{width:72px;height:72px}
 #faq[data-layout="2"] .faq-list p{margin-left:0}
 #faq[data-layout="3"] .faq-list{grid-template-columns:1fr}
 #faq[data-layout="3"] .faq-list details{padding:22px}
}
