/* How sectors evolve (/industries/how-sectors-evolve): the Sense Future deck in ESRE colours and type.
   Built by build-sectors-deck.py. */

/* ── the diagrams: the deck's text classes, in ESRE type ── */
.ev text{font-family:var(--font-body)}
.ev .k{font-size:23px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;fill:var(--navy)}
.ev .k--mute{fill:#78808A}
.ev .lab{font-size:22px;font-weight:500;letter-spacing:-.01em;fill:var(--text-secondary)}
.ev .lab--mute{fill:#78808A}
.ev .lab--gold{fill:var(--navy);font-weight:600}
.ev .lab--paper{fill:#fff;font-weight:600}
.ev .cap{font-size:29px;font-weight:400;fill:var(--text-secondary)}
.ev .cap--b{font-weight:600;fill:var(--navy)}
.ev .s{font-size:31px;font-weight:400;fill:var(--text-secondary)}
.ev .s--b{font-weight:600;fill:var(--navy)}
.ev .s--sm{font-size:27px}
.ev .rd{font-size:21px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;fill:#78808A}
.sx-defs{position:absolute;width:0;height:0;overflow:hidden}

/* ── the page: the Industry Hubs bar, then the deck's own bar of sections, then the sections ── */
.sx-hero{min-height:0}
.sx-hero .hero__inner{max-width:880px}
.sx-bar{position:sticky;top:calc(var(--nav-height) + 49px);z-index:998;background:#fff;border-bottom:1px solid var(--border)}
.sx-bar + .hero--page{padding-top:80px}
.sx-bar__list{position:relative;display:flex;flex-wrap:wrap;justify-content:center;gap:0 24px}
.sx-bar__link{display:inline-flex;align-items:center;gap:6px;min-height:40px;font-size:13px;font-weight:500;color:var(--navy);opacity:.7;border-bottom:2px solid transparent;white-space:nowrap}
.sx-bar__link:hover{opacity:1}
.sx-bar__link[aria-current="true"]{opacity:1;border-bottom-color:var(--navy)}
.sx{padding:56px 0 72px}
.sx-main{max-width:1040px;margin:0 auto}
.sx-thesis{max-width:760px;margin:0 auto 8px;font-size:1.1rem;line-height:1.75;color:var(--navy);text-align:center}
.sx-sheet{padding:56px 0 8px;scroll-margin-top:calc(var(--nav-height) + 49px + 96px)}
.sx-sheet + .sx-sheet{margin-top:48px;border-top:1px solid var(--border)}
.sx-title{margin:0 0 28px;font-family:var(--font-display);font-size:2rem;font-weight:700;line-height:1.15;color:var(--navy);text-align:center}
.sx-sub{display:block;margin-top:8px;font-family:var(--font-body);font-size:1.1rem;font-weight:400;line-height:1.5;color:var(--text-secondary)}
.sx-svg{display:block;width:100%;height:auto;overflow:visible}
.sx-halves{display:none}
.sx-note{max-width:760px;margin:28px auto 0;font-size:1.02rem;line-height:1.7;color:var(--navy);text-align:center}
.sx-src{max-width:760px;margin:10px auto 0;font-size:.8rem;line-height:1.6;color:#6B7280;text-align:center}
.sx-refs{columns:2;column-gap:40px;font-size:.84rem;line-height:1.65;color:var(--text-secondary)}
.sx-refs p{margin:0 0 14px;break-inside:avoid}
.sx-refs b{color:var(--navy);font-weight:600}
.sx-fine{margin:24px 0 0;padding-top:20px;border-top:1px solid var(--border);font-size:.78rem;line-height:1.6;color:#6B7280}

/* ── phones and small tablets: the bar scrolls sideways; each diagram shows as two halves ── */
@media (max-width:1100px){
  .sx-bar__list{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scrollbar-width:none}
  .sx-bar__list::-webkit-scrollbar{display:none}
  .sx-sheet{scroll-margin-top:calc(var(--nav-height) + 49px + 56px)}
}
@media (max-width:768px){
  .sx-bar{top:var(--nav-height);margin-top:var(--nav-height)}
  .sx-bar .container{padding:0}
  .sx-bar__list{gap:0 18px;padding:0 16px}
  .sx-bar + .hero--page{padding-top:56px}
  .sx{padding:0 0 56px}
  .sx .container{text-align:left!important}
  .sx-thesis{font-size:1rem;margin-top:32px;text-align:left}
  .sx-sheet{padding-top:40px;scroll-margin-top:calc(var(--nav-height) + 56px)}
  .sx-sheet + .sx-sheet{margin-top:32px}
  .sx-title{font-size:1.6rem;text-align:left}
  .sx-sub{font-size:1rem}
  .sx-svg{display:none}
  .sx-halves{display:block}
  .sx-half + .sx-half{margin-top:28px;padding-top:24px;border-top:1px solid var(--border)}
  .sx-half svg{display:block;width:100%;height:auto}
  .sx-half svg .k,.sx-half svg .cap{display:none}
  .sx-k{margin:0 0 8px;font-size:.74rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--navy)}
  .sx-k--mute{color:#78808A}
  .sx-cap{margin:10px 0 0;font-size:.95rem;line-height:1.5;color:var(--text-secondary)}
  .sx-cap--b{font-weight:600;color:var(--navy)}
  .sx-note,.sx-src{text-align:left}
  .sx-refs{columns:1}
}