/* A black stage for one scroll-driven, connected campaign. */
#advertising,#advertising .ads-stage{background:#050505;color:#FFFFFF}
#advertising .ads-stage{min-height:0;padding:26px 4vw 65px;justify-content:center}
#advertising .ads-head{position:relative;z-index:1;flex-shrink:0}
#advertising .ads-head .section-label{border:1px solid #343434;background:transparent;color:#BFC4CF;font-size:10px;letter-spacing:.13em;padding:6px 12px;margin-bottom:17px}
#advertising .ads-head h2{font-family:Sora,Inter,sans-serif;font-weight:600;font-size:clamp(32px,3.6vw,48px);letter-spacing:-.055em;line-height:1.13;color:#FFFFFF}
#advertising .campaign-network{position:relative;width:min(1100px,100%);margin:8px auto 0;flex-shrink:0}
#advertising .ads-network{display:block;width:100%;height:min(40svh,390px);overflow:visible}
#advertising .network-stars{fill:#6B7B9C;opacity:.4}
#advertising .network-track{fill:none;stroke:#262C36;stroke-width:1.1;vector-effect:non-scaling-stroke}
#advertising .network-line{fill:none;stroke:#3979FF;stroke-width:1.6;stroke-linecap:round;vector-effect:non-scaling-stroke}
#advertising .network-sheen{fill:none;stroke:#2563EB;stroke-width:8;vector-effect:non-scaling-stroke}
#advertising .packet-halo{fill:#2563EB;opacity:.25}
#advertising .packet-core{fill:#D9E8FF}
#advertising .channel-surface{fill:#11151D;stroke:#363D49;stroke-width:1.2}
#advertising .channel-light{fill:#102855;stroke:#528AFF;stroke-width:1.4}
#advertising .channel-icon{fill:none;stroke:#F1F6FF;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
#advertising .channel-label{font-family:Inter,Arial,sans-serif;font-size:16px;font-weight:500;fill:#FFFFFF;text-anchor:middle}
#advertising .hub-orbit{fill:#050505;fill-opacity:.42;stroke:#2A3B5F;stroke-width:1}
#advertising .hub-orbit-outer{fill:none;stroke:#1C2535;stroke-dasharray:2 7}
#advertising .hub-arcs{fill:none;stroke:#4E8AFF;stroke-width:2.2;stroke-linecap:round}
#advertising .hub-arrival{fill:none;stroke:#417FFF;stroke-width:1}
#advertising .ads-copy{max-width:700px;min-height:116px;margin:9px auto 0;padding:0 12px;flex-shrink:0}
#advertising .ads-copy h3{color:#FFFFFF;font-family:Sora,Inter,sans-serif;font-weight:600;font-size:clamp(23px,2.6vw,32px);line-height:1.2;letter-spacing:-.045em}
#advertising .ads-copy p{color:#B4BAC5;font-size:14px;line-height:1.7;max-width:610px;margin-top:14px}
#advertising .stage-nav{background:#111111;border:1px solid #363636;border-radius:999px;padding:5px;gap:5px;margin-top:18px;flex-shrink:0}
#advertising .stage-nav button{background:transparent;color:#C2C6CE;border:0;border-radius:999px;min-height:40px;font-size:12px;padding:9px 24px}
#advertising .stage-nav button:hover{background:#202938;color:#FFFFFF}
#advertising .stage-nav button[aria-current=step],#advertising .stage-nav button[aria-current=step]:hover{background:#2563EB;color:#FFFFFF}
#advertising .stage-nav button:focus-visible{outline:2px solid #93B9FF;outline-offset:3px}
#advertising .scene-foot{color:#929AA8;font-size:11px}
#advertising .scene-foot a{color:#C8DBFF}
#advertising .ads-reading p{color:#B4BAC5;line-height:1.7}
@media(max-height:800px) and (min-width:900px){
 #advertising .ads-stage{padding-top:18px;padding-bottom:56px}
 #advertising .ads-network{height:34svh}
 #advertising .ads-head h2{font-size:36px}
 #advertising .ads-head .section-label{margin-bottom:12px}
 #advertising .ads-copy{min-height:100px;margin-top:6px}
 #advertising .ads-copy h3{font-size:26px}
 #advertising .ads-copy p{font-size:13px;margin-top:11px}
 #advertising .stage-nav{margin-top:14px}
}
@media(max-width:899px){
 #advertising .ads-stage{padding:24px 22px 66px}
 #advertising .ads-head h2{font-size:36px}
 #advertising .ads-copy{max-width:580px}
 #advertising .ads-copy h3{font-size:27px}
}
/* Keep labels legible as the wide network scales into a tablet viewport. */
@media(min-width:601px) and (max-width:899px){
 #advertising .channel-label{font-size:20px}
}
@media(max-width:600px){
 #advertising .ads-stage{padding:20px 18px 58px}
 #advertising .ads-head h2{font-size:30px}
 #advertising .ads-head .section-label{font-size:9px;margin-bottom:13px;padding:5px 10px}
 #advertising .campaign-network{margin-top:12px}
 #advertising .ads-network{height:min(42svh,360px)}
 #advertising .channel-label{font-size:18px}
 #advertising .network-line{stroke-width:1.25}
 #advertising .network-sheen{stroke-width:6}
 #advertising .network-track{stroke-width:.8}
 #advertising .ads-copy{min-height:132px;margin-top:14px;padding:0 3px}
 #advertising .ads-copy h3{font-size:23px;line-height:1.23}
 #advertising .ads-copy p{font-size:12px;line-height:1.65;margin-top:12px}
 #advertising .stage-nav{margin-top:13px;padding:4px;gap:3px}
 #advertising .stage-nav button{font-size:11px;min-height:38px;padding:8px 21px}
 #advertising .scene-foot{font-size:9px;padding:16px 20px}
}
@media(max-height:740px) and (max-width:600px){
 #advertising .ads-stage{padding-top:16px;padding-bottom:53px}
 #advertising .ads-head h2{font-size:27px}
 #advertising .ads-head .section-label{margin-bottom:10px;font-size:8px}
 #advertising .campaign-network{margin-top:5px}
 #advertising .ads-network{height:43svh}
 #advertising .ads-copy{min-height:112px;margin-top:8px}
 #advertising .ads-copy h3{font-size:21px}
 #advertising .ads-copy p{font-size:11px;margin-top:9px}
 #advertising .stage-nav{margin-top:9px}
 #advertising .stage-nav button{min-height:36px}
}
body.reading #advertising .ads-stage{height:auto;min-height:0;padding-block:64px;overflow:visible}
body.reading #advertising .ads-network{height:auto;max-height:460px}
body.reading #advertising .ads-copy{min-height:0;margin-top:30px}
body.reading #advertising .stage-nav{display:none}
body.reading #advertising .network-packets{display:none}
@media(max-width:600px){body.reading #advertising .ads-network{max-height:430px}}

/* Portrait artwork uses the phone width, with icons around the hub.
   The SVG's accessible description retains the channel names. */
@media (max-width: 600px) {
  #advertising .ads-stage { padding: 18px 12px 20px; }
  #advertising .ads-head h2 { font-size: 27px; }
  #advertising .ads-head .section-label { margin-bottom: 10px; }
  #advertising .campaign-network { width: 100%; max-width: 420px; margin: 7px auto 0; }
  #advertising .ads-network { width: 100%; height: auto; aspect-ratio: 390 / 440; }
  #advertising .channel-label { display: none; }
  #advertising .ads-copy { min-height: 110px; margin-top: 3px; padding-inline: 10px; }
  #advertising .ads-copy h3 { font-size: 22px; }
  #advertising .ads-copy p { font-size: 11px; line-height: 1.6; margin-top: 10px; }
  #advertising .stage-nav { margin-top: 10px; }
  #advertising .scene-foot { display: none; }
  body.reading #advertising .ads-network { max-height: none; }
  body.reading #advertising .ads-stage { padding-block: 52px; }
}
@media (max-width: 600px) and (max-height: 740px) {
  /* Leave room for the heading, changing chapter copy and controls on short
     phones. The portrait map keeps its proportions instead of clipping them. */
  body:not(.reading) #advertising .campaign-network { max-width: min(100%, 310px, calc((100svh - 344px) * .88636)); }
  body:not(.reading) #advertising .ads-copy { min-height: 96px; }
  body:not(.reading) #advertising .ads-copy h3 { font-size: 20px; }
  body:not(.reading) #advertising .ads-head h2 { font-size: 25px; }
}