/* THE SPRAWL PAGE (/sprawl/; sprawl.py). The top is the home page's band (front.css: .homeband, .home-pair, .home-card, .tv2-art);
   the tiles are the site's navigation card (navcards.css); this file adds the board's layout, the open sector's window, the mosaic
   and the grid. COLOUR (Michael, bus posts 743, 744): ink, greys and the site's cyan only; no sector has a colour. Other colour
   reaches the page only through a painting, a chart's own drawing and a film's or an article's picture.
   Lettering floor (R-017): 15px on a phone, 16px on a desktop, 17px on a wide screen; nothing here goes under it. */
.sp-top .sp-line{font:600 calc(22px * var(--scale,1))/1.3 Barlow,sans-serif;color:var(--hi);margin:0 0 12px}
.sp-top .sp-slogan{font:700 var(--sp-small)/1.5 "JetBrains Mono",monospace;letter-spacing:.08em;color:var(--hd);margin:0 0 18px}
.sp-top .sp-intro{justify-content:center}
.sp-top .sp-art .tv2-slide{transition:opacity 700ms ease}
.sp-board,.sp-sec{margin:0;padding:0}   /* the page's own side margins, as the top band's */
.sp-board{margin-top:34px}
.sp-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));column-gap:14px}

.sp-grid>.navcard.cat{grid-row:1}
.sp-win :focus-visible,.sp-sec :focus-visible{outline:3px solid var(--hgo);outline-offset:3px}

/* THE CARD (post 728 points 3 and 4): on the light theme everything sits on a white card, as on the home page (the home card's
   own surface, line and corner); a film and an article are the thumbnail alone; a chart card and the film pop-up stay dark */
.sp-side,.sp-part,.sp-rows,.sp-m-k-figure,.sp-m-k-quote,.sp-x-card,.sp-pairs:not(:empty){background:var(--hs);color:var(--hi);border:1px solid var(--hl);border-radius:6px}

/* the open sector's window */
.sp-win{grid-row:2;grid-column:1/-1;display:none;padding:18px 0 8px;min-width:0}
.sp-win.open{display:block}
.sp-main{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:18px;align-items:stretch}
.sp-chart .feat-w{height:100%;min-height:clamp(380px,34vw,520px)}
.sp-chart .feat-cc .feat-tab{font-size:var(--sp-small);border-radius:0}
.sp-chart .feat-more{font-size:var(--sp-small)}
.sp-side{min-width:0;display:flex;flex-direction:column;gap:12px;padding:20px 22px}
.sp-h{font:italic 800 clamp(34px,4vw,56px)/.95 "Barlow Condensed","Arial Narrow",sans-serif;text-transform:uppercase;color:var(--hi);margin:0}
.sp-focus{font:500 calc(18px * var(--scale,1))/1.45 Barlow,sans-serif;color:var(--hi);margin:0}
.sp-film,.sp-m-film{position:relative;display:block;width:100%;padding:0;border:0;border-radius:0;background:#000;cursor:pointer;overflow:hidden;aspect-ratio:16/9}
.sp-film img,.sp-m-film img{display:block;width:100%;height:100%;object-fit:cover}
.sp-film-go{position:absolute;left:0;bottom:0;display:flex;align-items:center;gap:8px;background:#0A0A0A;color:#fff;font:700 var(--sp-small)/1 "JetBrains Mono",monospace;letter-spacing:.06em;padding:10px 12px}
.sp-film-go b{color:#4FC3F7}
.sp-pieces,.sp-part ul,.sp-pair ul{list-style:none;margin:0;padding:0}
.sp-pieces li{border-top:1px solid var(--hl);padding:9px 0}
.sp-pieces a,.sp-part a,.sp-pair a,.sp-m-t{color:var(--hi);text-decoration:none;font:600 calc(17px * var(--scale,1))/1.3 Barlow,sans-serif}
.sp-pieces a:hover,.sp-part a:hover,.sp-pair a:hover,.sp-m-t:hover{text-decoration:underline;text-decoration-color:var(--hgo);text-underline-offset:3px}
.sp-enter{align-self:flex-start;display:inline-block;background:var(--hgo);color:var(--hgoi);text-decoration:none;font:700 var(--sp-small)/1 "JetBrains Mono",monospace;letter-spacing:.06em;text-transform:uppercase;padding:13px 16px;border-radius:0;margin-top:6px}
.sp-enter:hover{filter:brightness(1.12)}
.sp-none{font:500 var(--sp-small)/1.4 Barlow,sans-serif;color:var(--hd);margin:0}

/* the strip: the sector read through the slogan's parts */
.sp-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin-top:18px}
.sp-part{min-width:0;padding:16px 18px}
.sp-part h4{font:italic 800 22px/1 "Barlow Condensed","Arial Narrow",sans-serif;text-transform:uppercase;color:var(--hi);margin:0 0 6px}
.sp-part-what{font:500 var(--sp-small)/1.4 Barlow,sans-serif;color:var(--hd);margin:0 0 8px}
.sp-part li{font:500 var(--sp-small)/1.4 Barlow,sans-serif;color:var(--hi);padding:5px 0;border-top:1px solid var(--hl)}
.sp-part li a{font-size:var(--sp-small)}
.sp-view{appearance:none;background:none;border:0;border-radius:0;padding:0;color:var(--hi);font:600 var(--sp-small)/1.4 Barlow,sans-serif;cursor:pointer;text-align:left;text-decoration:underline;text-decoration-color:var(--hgo);text-underline-offset:3px}

/* the rows behind the figure, collapsed */
.sp-rows{margin-top:18px;padding:0 18px}
.sp-rows summary{cursor:pointer;padding:14px 0;font:700 calc(17px * var(--scale,1))/1.35 Barlow,sans-serif;color:var(--hi)}
.sp-rows-box{overflow-x:auto;max-height:520px;overflow-y:auto;margin-bottom:10px}
.sp-rows table{border-collapse:collapse;width:100%;font:500 var(--sp-small)/1.4 Barlow,sans-serif;color:var(--hi)}
.sp-rows th{position:sticky;top:0;background:var(--hs);text-align:left;font-weight:700;border-bottom:2px solid var(--hl);padding:8px 14px 8px 0;white-space:nowrap}
.sp-rows td{border-bottom:1px solid var(--hl);padding:7px 14px 7px 0;vertical-align:top}
.sp-rows td.num,.sp-rows th.num{text-align:right;font-variant-numeric:tabular-nums}
.sp-rows-wait,.sp-rows-note{font:500 var(--sp-small)/1.4 Barlow,sans-serif;color:var(--hd);margin:0 0 10px}

/* the two sections under the board */
.sp-sec{margin-top:64px}
.sp-title{font:italic 800 clamp(30px,3.4vw,46px)/1 "Barlow Condensed","Arial Narrow",sans-serif;text-transform:uppercase;color:var(--hi);margin:0 0 18px}
.sp-sec-line{font:500 calc(17px * var(--scale,1))/1.5 Barlow,sans-serif;color:var(--hi);margin:0 0 18px;max-width:70ch}
.sp-mosaic{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:34px 22px;align-items:start}
.sp-m{min-width:0;border-top:1px solid var(--hl);padding-top:10px;display:flex;flex-direction:column;gap:8px;grid-column:span var(--span,2)}   /* the span is set by the build, which packs each row to the full six */
/* a carded tile of the mosaic */
.sp-m.sp-m-k-figure,.sp-m.sp-m-k-quote{border-top:1px solid var(--hl);padding:14px 16px 16px}
.sp-m-s{font:700 var(--sp-small)/1.2 "JetBrains Mono",monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--hd)}
.sp-m-pic img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.sp-m-chart{display:block;background:#0c0d0e;padding:14px 12px 10px}
.sp-m-chart svg{display:block;width:100%;height:auto}
.sp-m-k-chart{container-type:inline-size}
.sp-r{display:block}
@container (min-width:632px){.sp-r-phone{display:none}}   /* 608 and the card's own padding */
@container (max-width:631.98px){.sp-r-half{display:none}.sp-m-chart{max-width:460px}}
.sp-m-fig{appearance:none;background:none;border:0;border-radius:0;padding:0;text-align:left;color:var(--hi);cursor:pointer;display:flex;flex-direction:column;gap:4px;font:inherit;container-type:inline-size}
.sp-m-fig .nc-v{font-size:clamp(40px,22cqw,84px)}
.sp-m-fig .nc-lab,.sp-m-fig .nc-date{display:block}
.sp-m-quote{text-decoration:none;color:var(--hi);display:flex;flex-direction:column;gap:10px}
.sp-q{font:italic 600 calc(21px * var(--scale,1))/1.35 Barlow,sans-serif}
.sp-m-from{font:500 var(--sp-small)/1.3 Barlow,sans-serif;color:var(--hd)}

.sp-x-wrap{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:18px;align-items:start}
.sp-x-card{padding:16px 18px;min-width:0}
.sp-pairs:not(:empty){padding:18px 20px}
.sp-pairs:not(:has(.sp-pair:not([hidden]))){display:none}
.sp-x{border-collapse:collapse;width:100%;table-layout:fixed}
.sp-x th{font:700 var(--sp-small)/1.2 Barlow,sans-serif;color:var(--hi);text-align:left;padding:6px 8px 6px 0}
.sp-x th:first-child{width:124px}
.sp-x thead th{border-bottom:1px solid var(--hl);vertical-align:bottom}
.sp-x td{padding:3px;height:52px}
.sp-x-on{appearance:none;display:block;width:100%;height:100%;min-height:46px;border:0;border-radius:0;background:var(--hi);color:var(--hs);font:800 20px/1 "Barlow Condensed",sans-serif;cursor:pointer}   /* a filled square: the page's ink, as a selected card is */
.sp-x-on:hover,.sp-x-on[aria-expanded="true"]{box-shadow:inset 0 -4px 0 var(--hgo)}   /* the chosen square: the site's cyan, as the menu's lit edge */
.sp-x-none{display:block;width:100%;height:100%;min-height:46px;border:1px solid var(--hl)}
.sp-pair h3{font:italic 800 26px/1 "Barlow Condensed","Arial Narrow",sans-serif;text-transform:uppercase;color:var(--hi);margin:0 0 10px}
.sp-pair li{border-top:1px solid var(--hl);padding:9px 0}
body:has(.sp-top) main{padding-bottom:80px}

/* below 1000 wide: the seven stand stacked, one card each, in the same order; a card opens its sector under it (one open at a time) */
@media(max-width:999px){
  .sp-grid{grid-template-columns:minmax(0,1fr);row-gap:10px}
  .sp-grid>.navcard.cat{grid-row:auto;grid-column:1!important;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:14px;align-items:end;padding:16px 16px 14px}
  .sp-grid>.navcard.cat>*{grid-column:1}
  .sp-grid>.navcard.cat .nc-go{grid-column:2;grid-row:1/span 6;align-self:end;padding-top:0;margin:0}
  .sp-grid>.navcard .nc-k{font-size:32px} .sp-grid>.navcard .nc-v{font-size:54px} .sp-grid>.navcard .nc-u{font-size:22px}
  .sp-win{grid-row:auto;padding:8px 0 18px}
  .sp-win .sp-side>.nc-n,.sp-win .sp-h{display:none}
  .sp-main{grid-template-columns:minmax(0,1fr)}
  .sp-chart .feat-w{height:360px;min-height:0}
  .sp-mosaic{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sp-m{grid-column:span 2}
  .sp-x-wrap{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:699px){.sp-m-chart{padding:12px 0 8px}.sp-x th{font-size:15px}.sp-x thead th span{writing-mode:vertical-rl;transform:rotate(180deg)}.sp-x tbody th{width:104px}}
@media(prefers-reduced-motion:reduce){.sp-top .sp-art .tv2-slide{transition:none}}

/* ───────── THE INTERLINKED PAGE'S SECTOR CARDS AND MOSAIC (Michael, bus posts 739, 743, 746; interlinked_front.sectors_html) ─────────
   The site's navigation card with no figure (navcards.css), and the same mosaic as 'Across the sprawl'. The home page's card tokens
   are set here for this page (it has no home band to set them); the page keeps its own ground. Ink, greys and cyan only. */
body:has(.il-sectors){--hs:#FFFFFF;--hi:#111111;--hl:rgba(0,0,0,.14);--hgo:#0B4F9C;--hgoi:#FFFFFF;--hd:#55524A}
html[data-theme="dark"] body:has(.il-sectors){--hs:#1B1D20;--hi:#F2F2F2;--hl:rgba(255,255,255,.12);--hgo:#4FC3F7;--hgoi:#0A0A0A;--hd:rgba(255,255,255,.62)}
@media (prefers-color-scheme:dark){html:not([data-theme="light"]) body:has(.il-sectors){--hs:#1B1D20;--hi:#F2F2F2;--hl:rgba(255,255,255,.12);--hgo:#4FC3F7;--hgoi:#0A0A0A;--hd:rgba(255,255,255,.62)}}
.il-head .il-line{font:500 var(--sp-small)/1.4 Barlow,sans-serif;letter-spacing:0;text-transform:none;color:var(--hd)}
.il-sectors .navcard.cat{padding:14px 12px 12px}
.il-sectors .nc-k{font-size:clamp(19px,15cqw,28px)}
.il-sectors .nc-go{padding-top:12px}
.il-mosaic :focus-visible{outline:3px solid var(--hgo);outline-offset:3px}
.il-mosaic{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:34px 22px;align-items:start}
.il-mosaic>article.ilrow{all:unset;box-sizing:border-box;min-width:0;display:flex;flex-direction:column;gap:8px;border-top:1px solid var(--hl);padding-top:10px;grid-column:span var(--span,2);color:var(--hi)}
.il-mosaic>article.ilrow[hidden]{display:none}
.il-mosaic.il-filtered>article.ilrow{grid-column:span 2}
/* the card's first line is the piece card's label (below): one phrase at the left, so every thumbnail of a row starts at one height */
.il-mosaic .ilthumb{all:unset;display:block}
.il-mosaic .ilthumb img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.ilfront .il-mosaic>article.ilrow h3{margin:0;font:600 calc(17px * var(--scale,1))/1.3 Barlow,sans-serif;font-style:normal;text-transform:none;letter-spacing:0}   /* the title as the Sprawl mosaic has it, not the old row's condensed capitals */
.ilfront .il-mosaic>article.ilrow h3 a{color:var(--hi);text-decoration:none}
.ilfront .il-mosaic>article.ilrow h3 a:hover{text-decoration:underline;text-decoration-color:var(--hgo);text-underline-offset:3px}
.il-none{font:500 calc(17px * var(--scale,1))/1.5 Barlow,sans-serif;color:var(--hi);margin:8px 0 0}
@media(max-width:999px){
  .il-mosaic{grid-template-columns:repeat(2,minmax(0,1fr))}
  .il-mosaic>article.ilrow,.il-mosaic.il-filtered>article.ilrow{grid-column:span 1}
}
@media(max-width:699px){
  .il-mosaic>article.ilrow,.il-mosaic.il-filtered>article.ilrow{grid-column:span 2}
}

/* ───────── SOCIETY, SET UP AND MARKED COMING SOON (bus post 723; society_page.py) ─────────
   The title band is the Sprawl page's; the six buckets are the site's navigation card; a bucket's pane shows under the chosen card.
   The panes work from the address alone (#bucket-work): the first is shown at rest. Ink, greys and cyan only. */
.so-top .so-soon{margin:0}
.so-board{margin-top:34px}
.so-pane{display:none;padding:8px 0 0}
.so-pane:target,.so-pane:first-of-type{display:block}
.so-panes:has(.so-pane:target) .so-pane:first-of-type:not(:target){display:none}
.so-soon-line{font:500 calc(18px * var(--scale,1))/1.5 Barlow,sans-serif;color:var(--hd);margin:0 0 22px}
.so-pieces .sp-m{grid-column:span 2}
.so-board :focus-visible{outline:3px solid var(--hgo);outline-offset:3px}
@media(max-width:999px){.so-pieces .sp-m{grid-column:span 1}}
@media(max-width:699px){.so-pieces .sp-m{grid-column:span 2}}

/* ───────── THE SIX SECTOR PAGES (bus post 784; sector_page.py) ─────────
   The Sprawl band with the sector's live figure; six tiles (navcards.css); the chosen tile's pane (the Society rules above: the
   first pane at rest, the address chooses). Ink, greys and cyan only. */
.sx-fig{display:flex;flex-direction:column;gap:2px;margin-top:6px;border-top:1px solid var(--hl);padding-top:14px}
.sx-fig .nc-fig{margin-top:0}
.sx-fig .nc-v{font-size:clamp(40px,5vw,72px)}
.sx-sub{font:italic 800 24px/1.1 "Barlow Condensed","Arial Narrow",sans-serif;text-transform:uppercase;color:var(--hi);margin:34px 0 14px}
.sx-pieces .sp-m{grid-column:span 2}
.sx-esper{margin:16px 0 0}
.sx-lead{font:500 calc(17px * var(--scale,1))/1.5 Barlow,sans-serif;color:var(--hi);margin:0 0 18px;max-width:72ch}
.sx-posts{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:18px;align-items:start}
.sx-post{min-width:0}
.sx-from{display:block;font:500 var(--sp-small)/1.4 Barlow,sans-serif;color:var(--hd);margin:8px 0 0}
.sx-from a,.sx-link{color:var(--hi);text-decoration:underline;text-decoration-color:var(--hgo);text-underline-offset:3px}
.sx-signals{list-style:none;margin:0;padding:0;background:var(--hs);border:1px solid var(--hl);border-radius:6px}
.sx-signal{padding:12px 18px;border-top:1px solid var(--hl);font:500 var(--sp-small)/1.45 Barlow,sans-serif;color:var(--hi)}
.sx-signal:first-child{border-top:0}
.sx-link{font:600 var(--sp-small)/1.4 Barlow,sans-serif;white-space:nowrap}
.sx-mfigs{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin:0 0 18px}
.sx-mfig{background:var(--hs);color:var(--hi);border:1px solid var(--hl);border-radius:6px;padding:16px 18px;display:flex;flex-direction:column;container-type:inline-size}
.sx-mfig .nc-fig{margin-top:0}
.sx-chart .feat-w{height:clamp(380px,34vw,520px);min-height:0}
@media(max-width:999px){.sx-pieces .sp-m{grid-column:span 1}.sx-chart .feat-w{height:360px}}
@media(max-width:699px){.sx-pieces .sp-m{grid-column:span 2}.sx-posts{grid-template-columns:minmax(0,1fr)}}
/* a quoted post's card on a sector page: its own small lettering (the handle, the date, the button) is raised to the floor (R-017) */
.sx-post .c3page *{font-size:max(1em,var(--sp-small))!important}
/* the quoted post's card laid out as the article page lays it (one column: the author's rail, the words, the button), on a card */
.sx-post .c3page{background:var(--hs);color:var(--hi);border:1px solid var(--hl);border-radius:6px;padding:18px 20px}
.sx-post .c3page .xsc{grid-template-columns:minmax(0,1fr);gap:12px;padding:0;border-top:none}
.sx-post .c3page .xsc-rail{display:grid;grid-template-columns:58px minmax(0,1fr);column-gap:12px;row-gap:2px;align-items:center}
.sx-post .c3page .xsc-av{grid-row:1 / 3}
.sx-post .c3page .xsc-name{align-self:end}
.sx-post .c3page .xsc-handle{align-self:start}
.sx-post .c3page .xsc-open{grid-column:1 / -1;justify-self:start;margin-top:8px;border-radius:0}

/* ───────── THE PIECE CARD (piececard.py; bus posts 799, 803) ─────────
   The picture opens the article; under it two chips, OPEN ARTICLE and PLAY FILM; no repeated title. The label line is one phrase at
   the left: the sector, or '<sector> interlinked' for a piece shown under a sector not its own. Ink, greys, cyan on hover and focus. */
.pc-lab{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}   /* THE LABEL LINE LEAVES THE PICTURE (Michael, bus 1174): kept for a screen reader, not drawn; the picture has its full height */
.pc-pic{display:block;padding:0;border:0;border-radius:0;background:#000;cursor:pointer;width:100%}
.pc-pic img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
a.pc-pic,button.pc-pic{transition:outline-color .15s ease}   /* the card is its picture (bus 1182): a pointer, and a line round it on hover and keyboard focus */
a.pc-pic:hover,button.pc-pic:hover{outline:3px solid var(--hgo, #4FC3F7);outline-offset:2px}
a.pc-pic:focus-visible,button.pc-pic:focus-visible{outline:3px solid var(--hgo, #4FC3F7);outline-offset:3px}
.pc-title{margin:0;font:600 calc(17px * var(--scale,1))/1.3 Barlow,sans-serif;color:var(--hi)}
.pc-chips{display:flex;flex-wrap:wrap;gap:8px}
.pc-chip{appearance:none;display:inline-block;background:none;color:var(--hi);border:1px solid currentColor;border-radius:0;padding:8px 10px;font:700 var(--sp-small)/1 "JetBrains Mono",monospace;letter-spacing:.08em;text-decoration:none;cursor:pointer}
.pc-chip:hover{color:var(--hgo)}
.pc-chip:focus-visible{outline:3px solid var(--hgo);outline-offset:3px}
.il-mosaic .ilthumb .pc-chips{margin-top:8px}

/* the Sprawl window's panel (bus posts 811, 812): 'Go to <Sector>' at the top right and at the foot; its latest film as the piece card */
.sp-side-top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.sp-go-top .sp-enter,.sp-go-foot .sp-enter{margin-top:0}
.sp-latest{display:flex;flex-direction:column;gap:8px}
@media(max-width:999px){.sp-win .sp-side>.sp-side-top .nc-n{display:none}.sp-side-top{justify-content:flex-end}}

/* ───────── ESPER, THE DASHBOARDS (bus posts 787, 848; esper.py) ─────────
   The frame: the band (no painting), the bar of seven cards, the canvas, the data behind it. The canvas is twelve columns; a card
   takes the span its layout line gives it (hero 12, wide 8, half 6, third 4). Chart cards are dark in both themes; the card that
   holds one is the home card's surface. Ink, greys and cyan only. */
.es-top .es-intro{display:block}
.es-asof{font:500 var(--sp-small)/1.5 Barlow,sans-serif;color:var(--hd);margin:0}
.es-bar{margin:22px 0 0}
.es-bar .navcards{margin:0}
.navcard.es-unbuilt,.navcard[disabled]{cursor:default}
.es-canvas{margin-top:8px}
.es-group{margin-top:46px}
.es-title{margin-bottom:16px}
.es-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:18px;align-items:start}
.es-card{grid-column:span var(--span,6);min-width:0;background:var(--hs);color:var(--hi);border:1px solid var(--hl);border-radius:6px;padding:16px 18px 6px;display:flex;flex-direction:column;gap:10px}
.es-card-t{font:700 calc(18px * var(--scale,1))/1.3 Barlow,sans-serif;color:var(--hi);margin:0}
.es-chart .feat-w{height:400px;min-height:0}
.es-hero .es-chart .feat-w{height:560px}
/* a board of many rows (fifty states, sixty companies) is a tall card, so every row has its name (layout: "tall": true) */
.es-canvas .es-card.es-tall .es-chart .feat-w{height:980px}
.es-chart .feat-cc .feat-tab{font-size:var(--sp-small);border-radius:0}
.es-foot{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:space-between}
.es-credit{font:500 var(--sp-small)/1.45 Barlow,sans-serif;color:var(--hd);margin:0;flex:1 1 260px}
.es-credit a,.es-table a{color:var(--hi);text-decoration:underline;text-decoration-color:var(--hgo);text-underline-offset:3px}
.es-card .es-rows{margin-top:0;padding:0;border:0;border-top:1px solid var(--hl);border-radius:0;background:none}
.es-card .es-rows summary{padding:10px 0;font-size:var(--sp-small)}
.es-figure{container-type:inline-size;padding-bottom:16px;gap:4px}
.es-figure .nc-fig{margin-top:0}
.es-figure .nc-v{font-size:clamp(44px,20cqw,84px)}
.es-figure .es-credit{margin-top:10px;flex:none}
.es-behind{padding:0 18px}
.es-behind-box{padding:0 0 12px}
.es-table{border-top:1px solid var(--hl);padding:14px 0}
.es-table p{font:500 var(--sp-small)/1.5 Barlow,sans-serif;color:var(--hi);margin:6px 0 0;max-width:110ch}
.es-method{border-top:1px solid var(--hl);padding:14px 0}
.es-pieces .sp-m{grid-column:span 2}
.es-instruments{margin:40px 0 0}
.es-canvas :focus-visible,.es-bar :focus-visible{outline:3px solid var(--hgo);outline-offset:3px}
@media(min-width:2200px){.es-canvas,.es-bar,.es-top .home-top{max-width:2200px}}
@media(max-width:999px){
  .es-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
  .es-card{grid-column:span 6}
  .es-card.es-third,.es-card.es-figure{grid-column:span 3}
  .es-chart .feat-w,.es-hero .es-chart .feat-w{height:380px}
  .es-pieces .sp-m{grid-column:span 1}
}
@media(max-width:699px){
  .es-card.es-third,.es-card.es-figure{grid-column:span 6}
  .es-chart .feat-w,.es-hero .es-chart .feat-w{height:340px}
  .es-pieces .sp-m{grid-column:span 2}
}
/* ESPER'S LANDING PAGE: the mosaic of each sector's best charts (esper.mosaic; bus post 1032), three across, two on a middle screen, one on a phone */
.es-mosaic{margin-top:34px}
.es-mosaic .es-mo-note{font:500 var(--sp-small)/1.4 Barlow,sans-serif;color:var(--hd);margin:0 0 14px}
.es-mo .feat-w{height:400px}
@media(max-width:760px){.es-mo .feat-w{height:340px}}

/* THE SECTOR PAGE AS ONE PAGE (sector_page.py; Michael's guideline of 11 October 2026, the sector brief): nothing is sliced away. The six
   cards are a summary that jumps down the page: no VIEW mark, none selected. The top pair: the two newest pieces at the left (a third),
   the chart card at the right (two thirds). Then each section the full width, in his order. On a phone all of it stacks in that order. */
.sx-one .navcard .nc-go{display:none}
.sx-one .navcard.cat{padding-bottom:16px}
.sx-secs{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:0 28px;align-items:start;margin-top:8px}
.sx-sec{grid-column:1 / -1;scroll-margin-top:170px;padding:26px 0 8px;border-top:1px solid var(--hl);margin-top:26px;min-width:0}
.sx-sec-interlinked{grid-column:1;border-top:0;margin-top:0;padding-top:8px}
.sx-sec-data{grid-column:2;border-top:0;margin-top:0;padding-top:8px}
.sx-sec-interlinked .sx-newest{display:grid;grid-template-columns:minmax(0,1fr);gap:18px}
.sx-secs .sp-mosaic > *{grid-column:auto;grid-row:auto}
.sx-sec-interlinked-all .sx-all{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.sx-sec-data .sx-chart .feat-w{height:clamp(420px,36vw,560px);min-height:0}
.sx-cut > .sx-hide{display:none}
.sx-more{display:inline-block;margin:18px 0 0;appearance:none;border:0;border-radius:0;cursor:pointer;background:var(--act,#111111);color:var(--act-ink,#4FC3F7);font:700 var(--sp-small)/1 "JetBrains Mono",monospace;letter-spacing:.06em;text-transform:uppercase;padding:13px 16px}
.sx-more:hover,.sx-more:focus-visible{box-shadow:inset 0 -4px 0 #4FC3F7;outline:none}
html[data-theme="dark"] .sx-more{background:var(--hgo);color:var(--hgoi)}
@media(max-width:999px){.sx-secs{grid-template-columns:minmax(0,1fr)}.sx-sec-interlinked,.sx-sec-data{grid-column:1}.sx-sec-data{border-top:1px solid var(--hl);margin-top:26px;padding-top:26px}.sx-sec-interlinked-all .sx-all{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:699px){.sx-sec-interlinked-all .sx-all{grid-template-columns:minmax(0,1fr)}.sx-sec{scroll-margin-top:80px}}
/* Society's pieces carry their bucket as a small label beside the sector's (bus post 1052) */
.sx-bucket{margin-left:10px;font:700 var(--sp-small)/1 "JetBrains Mono",monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--hd);border:1px solid var(--hl);padding:2px 6px}


/* THE CONVERSATIONS BLOCK (bus 1271, 1280): the period's points at the top of the pane; the why folded under each pick */
.sx-conv{margin:0 0 26px}.sx-conv-head{font:800 calc(22px * var(--scale,1))/1.2 "Barlow Condensed",Barlow,sans-serif;text-transform:uppercase;letter-spacing:.01em;margin:18px 0 4px;color:var(--hi)}
.sx-conv-line{font:500 var(--sp-small)/1.4 Barlow,sans-serif;color:var(--hd);margin:0 0 12px}
.sx-cpost .xsc-text{display:-webkit-box;-webkit-line-clamp:12;-webkit-box-orient:vertical;overflow:hidden}
.sx-why{margin:8px 0 0}.sx-why summary{font:600 var(--sp-small)/1.4 Barlow,sans-serif;color:var(--hd);cursor:pointer}.sx-why p{font:500 var(--sp-small)/1.45 Barlow,sans-serif;color:var(--hd);margin:6px 0 0}
.sx-quoted-head{font:700 var(--sp-small)/1.4 "JetBrains Mono",monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--hd);margin:30px 0 10px;padding-top:16px;border-top:1px solid var(--hl)}