/* iliad, stage eight. Tokens from 00-DESIGN-PLAN.md. */
@font-face{font-family:"Space Grotesk";font-weight:400;font-style:normal;font-display:swap;src:url(fonts/space-grotesk-regular.ttf) format("truetype")}
@font-face{font-family:"Space Grotesk";font-weight:500;font-style:normal;font-display:swap;src:url(fonts/space-grotesk-medium.ttf) format("truetype")}
@font-face{font-family:"Space Grotesk";font-weight:700;font-style:normal;font-display:swap;src:url(fonts/space-grotesk-bold.ttf) format("truetype")}

:root{
  --navy:#020817;--light:#FAFAFC;--blue:#4484C5;--orange:#F47221;
  --page:#F0F0F3;--railbg:#E9E9EC;--ink2:#4C515C;--light2:#B0B1B7;--bluedeep:#305F91;--rulel:#D2D3D7;--rulen:#202532;--opress:#DC6720;--raised:#0D1424;
  --sans:"Space Grotesk",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --rail:232px;--pad:48px;--gap:24px;--colmax:70px;
  --s-sec:120px;--s-head:44px;--s-block:64px;--str:200px;--s-mast:72px;
  --ovh:220px; /* how far the Home and Publishers plate hangs below the navy: its caption, controls and the foot of the picture */
  /* light ground by default */
  --hi:var(--navy);--mid:var(--ink2);--rule:var(--rulel);--acc:var(--bluedeep);--focus:var(--navy);
}
@media (max-width:1100px){:root{--rail:200px;--pad:24px;--s-sec:96px;--s-head:40px;--s-block:56px;--str:120px;--s-mast:72px}}
@media (max-width:820px){:root{--pad:0px;--s-sec:80px;--s-head:36px;--s-block:48px;--str:80px;--s-mast:64px}}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--page);color:var(--hi);font:400 17px/1.55 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,video,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3,p,dl,dd,dt,figure{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.tnum{font-variant-numeric:tabular-nums}
.dark,.mast,.band,.foot{--hi:var(--light);--mid:var(--light2);--rule:var(--rulen);--acc:var(--blue);--focus:var(--light);background:var(--navy);color:var(--hi)}

/* shell: the rail on the left, the pages beside it */
.shell{display:grid;grid-template-columns:var(--rail) minmax(0,1fr);min-height:100vh}
main{min-width:0;container-type:inline-size}
.rail{position:sticky;top:0;height:100vh;overflow:auto;background:var(--railbg);color:var(--navy);border-right:1px solid var(--rulel);padding:30px 24px 24px 32px;display:flex;flex-direction:column;scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.rail .mark img{height:36px;width:auto}
.rail .group{padding-top:40px}
.rail .gl{font-size:14.5px;color:var(--ink2);margin-bottom:8px}
.rail .group a{display:block;padding:7px 0;font-size:16.5px;line-height:1.35;color:var(--navy);border-bottom:1px solid transparent}
.rail .group a:hover{text-decoration:underline;text-underline-offset:5px;text-decoration-color:var(--orange)}
.rail .group a[aria-current="page"]{font-weight:500;text-decoration:underline;text-underline-offset:5px;text-decoration-color:var(--navy)}
.rail .access{margin-top:40px;padding-top:24px;border-top:1px solid var(--rulel);display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.rail .signin{display:block;font-size:16px;font-weight:500}
.rail .signin small{display:block;font-size:14px;font-weight:400;color:var(--ink2);margin-top:2px}
.rail .btn{display:block;width:100%;text-align:center;font-size:15px;line-height:1.3;padding:12px 14px;text-wrap:balance}
.rail .onpage{margin-top:auto;padding-top:48px}
.rail .tick{display:grid;grid-template-columns:18px 1fr;gap:10px;align-items:baseline;padding:5px 0;font-size:14.5px;line-height:1.4;color:var(--ink2)}
.rail .tick .n{font-size:13px;color:var(--ink2)}
.rail .tick.on{color:var(--navy)}
.rail .tick.on .n{color:var(--bluedeep);font-weight:500}
.rail .tick:hover{color:var(--navy)}

/* the grid: a full-bleed track each side, twelve columns between */
.fg{display:grid;grid-template-columns:[full-start] var(--pad) repeat(12,[c] minmax(0,var(--colmax))) [c] minmax(var(--pad),1fr) [full-end];column-gap:var(--gap);--bleed:max(0px,calc(100cqw - var(--pad) - 12 * var(--colmax) - 13 * var(--gap) - var(--pad)))}
@container (min-width:1500px){main .fg{--colmax:84px}}
@container (min-width:1900px){main .fg{--colmax:100px;--pad:64px}}
@container (min-width:2200px){main .fg{--colmax:112px}}
@media (max-width:820px){.fg{grid-template-columns:[full-start] 24px repeat(12,[c] minmax(0,1fr)) [c] 24px [full-end];column-gap:16px;--bleed:0px}}
/* --edge: from the right edge of the window back to the end of the text column (the last track plus the gap before it).
   Pictures that run off the edge keep doing so; their controls and captions stop where the text does. */
.fg{--edge:calc(var(--bleed) + var(--pad) + var(--gap))}
@media (max-width:820px){.fg{--edge:0px}}
.fg>*{grid-column:c 1 / c 13;min-width:0}
.fg>.h1,.fg>.label{grid-column:c 1 / c 11}
.fg>.h2{grid-column:c 1 / c 9}
.fg>.aside{grid-column:c 10 / c 13;align-self:end}
.fg>.lead,.fg>.read{grid-column:c 5 / c 11}
.fg>.wide{grid-column:c 1 / c 13}
.fg>.wide3{grid-column:c 3 / full-end}
.fg>.bleed{grid-column:c 5 / full-end}
.fg>.figb{grid-column:c 5 / c 13}
.fg>.plate.crop-tile{grid-column:c 5 / full-end}
.fg>.plate.screen3{grid-column:c 3 / full-end}
.plate.screen3>.vis-plat.vp-store .p2-win,.plate.screen3>.vis-how.vh-system{border-radius:2px 0 0 2px;padding-right:calc(var(--bleed) + 36px)}
.plate.screen3>.vis-plat.vp-store .p2-caps,.plate.screen3>.vis-plat.vp-store .p2-credit{padding-right:var(--edge)}
@media (max-width:820px){.fg>.h1,.fg>.label,.fg>.h2,.fg>.aside,.fg>.lead,.fg>.read,.fg>.wide3,.fg>.bleed,.fg>.figb,.fg>.plate.crop-tile,.fg>.plate.screen3{grid-column:c 1 / c 13}.plate.screen3>.vis-plat.vp-store .p2-win,.plate.screen3>.vis-how.vh-system{border-radius:2px;padding-right:20px}.fg>.aside{align-self:start}}

/* type */
.h1{font-weight:500;line-height:1;letter-spacing:-.025em;text-wrap:balance}
.h1.xl{font-size:clamp(42px,5.6cqw,68px)}
.h1.l{font-size:clamp(36px,4.8cqw,58px)}
.h1.m{font-size:clamp(32px,4.2cqw,52px)}
.sub{font-size:clamp(28px,2.6cqw,32px);font-weight:400;line-height:1.2;letter-spacing:-.012em;text-wrap:balance;color:var(--hi)}
.fg>.sub{grid-column:c 1 / c 10}
.mast .sub{margin-top:22px}
@media (max-width:820px){.fg>.sub{grid-column:c 1 / c 13}.mast .sub{margin-top:18px}}
.h2{font-size:clamp(28px,3vw,38px);font-weight:500;line-height:1.1;letter-spacing:-.015em;text-wrap:balance}
.h3{font-size:22px;font-weight:500;line-height:1.25;letter-spacing:-.005em}
.label{font-size:17px;line-height:1.4;color:var(--acc)}
.lead p{font-size:clamp(18px,1.45vw,21px);line-height:1.45;max-width:58ch}
.lead p+p{margin-top:14px}
.read p{max-width:62ch}
.read p+p{margin-top:16px}
.read p.note{margin-top:22px;color:var(--mid)}
.aside{font-size:15px;line-height:1.5;color:var(--mid);max-width:32ch;text-wrap:balance}
.meta,.small{font-size:14.5px;line-height:1.45;color:var(--mid)}
.quiet{margin-top:26px;font-size:15px;line-height:1.5;color:var(--mid)}
.more{margin-top:28px}
.sec>.more.wide{margin-top:24px}
.h3.sub{margin-bottom:28px}
.sec>.h3.sub{margin-bottom:0}
.sec>.h3.sub+*{margin-top:28px}
.h3.q{margin-top:48px;margin-bottom:10px}

/* actions and links */
.btn{display:inline-block;background:var(--orange);color:var(--navy);font-size:16px;font-weight:500;line-height:1;padding:15px 22px;border-radius:3px;transition:background .2s}
.btn:hover{background:var(--opress)}
.btn.ghost{background:none;color:var(--hi);border:1px solid var(--hi);padding:14px 21px}
.btn.ghost:hover{background:none;border-color:var(--orange)}
.lnk{font-weight:500;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;text-decoration-color:var(--acc);transition:text-decoration-color .25s}
.lnk:hover{text-decoration-color:var(--orange)}
.acts{display:flex;gap:28px;align-items:center;flex-wrap:wrap;margin-top:36px}

/* top line */
.top{display:none}
.top .mark{grid-column:c 1 / c 3;justify-self:start}
.top .mark img{height:40px;width:auto}
.top .pages{grid-column:c 3 / c 10;display:flex;gap:32px;align-items:center;font-size:16px}
.top .pages a{padding:6px 0;border-bottom:1px solid transparent}
.top .pages a:hover{border-color:var(--light2)}
.top .pages a[aria-current="page"]{border-color:var(--light)}
.top .acts{grid-column:c 10 / c 13;justify-self:end;margin:0;gap:28px}
.top .acts .q{font-size:16px}
.top .pages,.top .acts{display:none}
.skip{position:absolute;left:-9999px;top:16px;z-index:60;background:var(--page);color:var(--navy);padding:12px 16px;border-radius:3px;font-weight:500}
.skip:focus{left:16px}
@media (max-width:1100px){.rail{padding:26px 18px 20px 24px}.rail .group a{font-size:15.5px}.rail .btn{font-size:14.5px;padding:12px 14px}}
@media (max-width:820px){.shell{grid-template-columns:minmax(0,1fr)}.rail{display:none}.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;display:flex;justify-content:space-between;align-items:center;height:60px;padding:0 24px;background:var(--railbg);color:var(--navy);border-bottom:1px solid var(--rulel)}.top .mark img{height:30px;width:auto}.top .menu{display:block;font-size:16px;font-weight:500;padding:12px 0 12px 12px;min-height:44px;min-width:44px}}

/* drawer (phones) */
.drawer{display:none}
@media (max-width:820px){
  .drawer{position:fixed;inset:0;z-index:50;background:var(--page);color:var(--navy);padding:calc(env(safe-area-inset-top,0px) + 14px) 24px 28px;flex-direction:column;overflow:auto}
  .drawer[data-open="true"]{display:flex}
  .drawer .dhead{display:flex;justify-content:space-between;align-items:center;height:46px;margin-bottom:26px}
  .drawer .dhead img{height:32px;width:auto}
  .drawer .close{font-size:16px;font-weight:500}
  .drawer .ditem{display:block;padding:16px 0;border-top:1px solid var(--rulel);font-size:24px;font-weight:500;letter-spacing:-.01em;line-height:1.2}
  .drawer .ditem small{display:block;font-size:14.5px;font-weight:400;color:var(--ink2);margin-top:6px;line-height:1.4}
  .drawer .dsmall{display:block;padding:14px 0;border-top:1px solid var(--rulel);font-size:17px}
  .drawer .dfoot{margin-top:auto;padding-top:24px}
  .drawer .dfoot .signin{display:flex;justify-content:space-between;align-items:baseline;padding:14px 0;border-top:1px solid var(--rulel);font-size:17px;font-weight:500}
  .drawer .dfoot .signin small{font-size:14px;font-weight:400;color:var(--ink2)}
  .drawer .btn{display:block;text-align:center;margin-top:14px}
}

/* masthead */
.mast{padding:var(--s-mast) 0 calc(var(--str) + 64px);row-gap:0}
@media (min-width:821px){.mast{padding-top:calc(var(--s-mast) - 16px)}}
.mast .label{margin-bottom:22px}
.mast .lead{margin-top:36px}
.mast .founders-h{margin-top:var(--s-block)}
.mast.wm{padding-bottom:var(--s-sec)}
.mast.side{padding-bottom:0;row-gap:0;grid-template-rows:auto auto auto auto 1fr}
.mast.side>.label{grid-row:1}.mast.side>.h1{grid-row:2}.mast.side>.sub{grid-row:3}
.mast.side>.lead{grid-column:c 1 / c 5;grid-row:4;margin-top:36px;text-wrap:pretty}
.mast.side>.lead p{font-size:clamp(17px,1.3vw,19px);max-width:none}
.mast.side>.actsb{grid-column:c 1 / c 5;grid-row:5;align-self:start;padding-bottom:32px}
.mast.side>.actsb .acts{margin-top:28px}
.mast.side>.plate{grid-column:c 5 / full-end;grid-row:4 / span 2;margin-top:36px;position:relative;z-index:1;align-self:start;margin-bottom:calc(-1 * var(--ovh))}
.mast.side>.plate .pcap,.mast.side>.plate .ctl{--hi:var(--navy);--mid:var(--ink2);--rule:var(--rulel);--focus:var(--navy);color:var(--mid)}
.mast.side>.plate.crop-tile{grid-column:c 5 / full-end}
.mast.side>.plate .pcap,.mast.side>.plate .ctl{padding-right:var(--edge)}
.hero.after-side{padding-top:var(--ovh)}
/* masthead-edge fix: the navy ends --ovh above the plate's foot, so the caption and controls always sit on the light page and the picture crosses the edge.
   That only holds while the text beside the plate is shorter than the picture, so the side masthead takes three shapes from 821 px up:
   1440 and wider, the lead beside the plate; 1001 to 1439, the lead above and the actions beside the plate; 821 to 1000, everything above and the plate below. */
@media (min-width:1001px) and (max-width:1439px){.mast.side{grid-template-rows:none}.mast.side>.lead{grid-column:c 1 / c 9}.mast.side>.actsb,.mast.side>.plate{grid-row:5}.mast.side>.actsb .acts{margin-top:36px}}
@media (min-width:821px) and (max-width:1000px){.mast.side{grid-template-rows:none}.mast.side>.lead{grid-column:c 1 / c 10}.mast.side>.actsb{grid-column:c 1 / c 13;grid-row:5;padding-bottom:0}.mast.side>.plate,.mast.side>.plate.crop-tile{grid-column:c 3 / full-end;grid-row:6;margin-top:48px}}
@media (max-width:820px){.mast.side>.label,.mast.side>.h1,.mast.side>.sub,.mast.side>.lead,.mast.side>.actsb,.mast.side>.plate,.mast.side>.plate.crop-tile{grid-column:c 1 / c 13;grid-row:auto}.mast.side>.plate .pcap,.mast.side>.plate .ctl{--hi:var(--light);--mid:var(--light2);--rule:var(--rulen);--focus:var(--light)}.mast.side>.actsb{padding-bottom:48px}.mast.side>.plate{margin-top:32px;margin-bottom:calc(-1 * var(--str))}.mast.side>.actsb{padding-top:calc(var(--str) + 28px)}.mast.side>.actsb .acts{margin-top:0}.hero.after-side{padding-top:0}.mast.side>.actsb{position:relative;z-index:0}}
@media (max-width:820px){.mast .label{margin-bottom:18px}.mast .lead{margin-top:28px}}

/* hero figure straddling the navy edge */
.hero{padding:0}
.hero>.plate{margin-top:calc(-1 * var(--str));position:relative;z-index:1}
.plate .pcap{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;padding-top:18px;font-size:15px;line-height:1.5;color:var(--mid)}
.plate .pcap p{max-width:62ch}
.plate.wide3 .pcap,.plate.wide3 .ctl,.plate.bleed .pcap,.plate.bleed .ctl,.plate.crop-tile .pcap{padding-right:var(--edge)}
.crop{position:relative;overflow:hidden;background:#000;border-radius:2px}
.crop img{position:absolute;max-width:none;height:auto}
.hero.people{padding-top:0}

/* sections */
.sec{padding-top:var(--s-sec)}
.srule{height:1px;background:var(--rule);margin-bottom:40px}
.sec>.h2,.sec>.aside,.band>.h2,.band>.aside{margin-bottom:var(--s-head)}
.sec>.h2~*{margin-top:var(--s-block)}
.sec:not(.alt)>.aside{grid-column:c 1 / c 4;align-self:start;margin-top:0;padding-top:6px}
.sec:not(.alt)>.h2{grid-column:c 1 / c 11}
.sec:not(.alt)>.h2+.aside{grid-row:3}
.sec:not(.alt)>.aside+.read,.sec:not(.alt)>.aside+.lead,.sec:not(.alt)>.aside+.figb{grid-row:3}
.sec:not(.alt)>.aside:not(:has(+.read,+.lead,+.figb)){margin-bottom:var(--s-head)}
.sec.alt>.h2{grid-column:c 1 / c 10}
.sec.alt>.aside{grid-column:c 1 / c 5;align-self:start;margin-top:0;margin-bottom:var(--s-head)}
.sec.alt>.read,.sec.alt>.lead{grid-column:c 1 / c 8}
.sec.alt>.aside+*{margin-top:0}
.sec.alt>.figb{grid-column:c 1 / c 9}
.sec.alt>.defs{grid-column:c 1 / c 13}
@media (max-width:820px){.sec.alt>.h2,.sec.alt>.aside,.sec.alt>.read,.sec.alt>.lead,.sec.alt>.figb{grid-column:c 1 / c 13}}
/* phones: the odd sections' margin note goes full width above the text, as in the even sections (it shared row 3 with the text and overlapped it before 23 October) */
@media (max-width:820px){.sec:not(.alt)>.aside{grid-column:c 1 / c 13;margin-bottom:var(--s-head)}.sec:not(.alt)>.h2+.aside,.sec:not(.alt)>.aside+.read,.sec:not(.alt)>.aside+.lead,.sec:not(.alt)>.aside+.figb{grid-row:auto}}
.sec>.h2+*,.sec>.h2+.aside+*,.sec>.aside{margin-top:0}
.band{padding:var(--s-sec) 0;margin-top:var(--s-sec)}
.band+.sec{padding-top:calc(var(--s-sec) - 40px)}
.band+.sec>.srule{display:none}
.band>.h2~*{margin-top:var(--s-block)}
.band>.h2+*,.band>.h2+.aside+*,.band>.aside{margin-top:0}
.band>.limit{grid-column:c 1 / c 9;font-size:15px;line-height:1.5;color:var(--mid);margin-top:-32px;margin-bottom:var(--s-head)}
.band>.label{margin-bottom:22px}
.band .backers{display:flex;gap:48px;align-items:center;flex-wrap:wrap}
.band .backers span{font-size:15px;color:var(--mid);margin-right:8px}
.band .backers img{width:auto;filter:invert(1)}
@media (max-width:640px){.band .backers{display:grid;grid-template-columns:auto 1fr 1fr;gap:20px 24px;align-items:center}.band .backers span{grid-column:1/-1}.band .backers img{height:24px!important}}

/* definition rows */
.defs .d{display:grid;grid-template-columns:minmax(0,421fr) minmax(0,866fr);column-gap:var(--gap);padding:22px 0} /* no row rules: rules mark section starts and the rows of the two cross-read tables only (23 October) */
.defs .d:first-child{padding-top:0}
.defs dt{font-size:19px;font-weight:500;line-height:1.3;letter-spacing:-.005em}
.defs dd{font-size:16.5px;line-height:1.55;color:var(--mid);max-width:62ch}
.defs.stack .d{grid-template-columns:1fr;row-gap:6px;padding:20px 0}
.defs.stack dt{font-size:18px}
@media (max-width:820px){.defs .d{grid-template-columns:1fr;row-gap:6px;padding:20px 0}.defs dt{font-size:18px}}

/* two routes, three columns, two columns */
.routes{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--gap)}
.routes>div{display:flex;flex-direction:column;align-items:flex-start}
.routes p{margin:12px 0 22px;color:var(--mid);max-width:40ch}
/* Publishers, how a campaign goes live: four numbered steps in a row, two by two below 1101 px, stacked on phones */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--gap);margin-bottom:-40px} /* the last row's padding is not section spacing */
.steps li{padding:0 0 40px;display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:0;align-content:start} /* subgrid keeps the descriptions level when a title wraps */
.steps .n{display:block;font-size:15px;font-weight:500;color:var(--acc);margin-bottom:12px}
.steps .h3{font-size:19px}
.steps p{margin-top:10px;font-size:15.5px;line-height:1.5;color:var(--mid);max-width:34ch}
@media (max-width:1100px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.steps{grid-template-columns:1fr;margin-bottom:-32px}.steps li{display:block;grid-row:auto;padding-bottom:32px}}
.who3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--gap)}
.who3 .h3{font-size:19px}
.who3 p{margin-top:10px;font-size:15.5px;line-height:1.5;color:var(--mid);max-width:34ch}
.two{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:calc(var(--gap) * 2)}
.faq{display:grid;grid-template-columns:1fr 1fr;column-gap:calc(var(--gap) * 2)}
.faq p{margin-top:12px;color:var(--mid);max-width:48ch}
@media (max-width:820px){.routes,.who3,.two,.faq{grid-template-columns:1fr;row-gap:40px}}

/* table: what happens when */
.tbl .th,.tbl .tr{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,6fr) minmax(0,2fr);column-gap:var(--gap)}
.tbl .th{font-size:14.5px;color:var(--mid);padding-bottom:12px;border-bottom:1px solid var(--rule)}
.tbl .tr{padding:24px 0;border-bottom:1px solid var(--rule);align-items:start}
.tbl .t{font-size:18px;font-weight:500;line-height:1.35;letter-spacing:-.005em}
.tbl .d{font-size:16.5px;line-height:1.55;color:var(--mid)}
.tbl .w{font-size:14.5px;line-height:1.5;color:var(--mid);padding-top:3px}
@media (max-width:820px){.tbl .th{display:none}.tbl .tr{grid-template-columns:1fr;row-gap:6px;padding:18px 0}}

/* matrix: who does what */
.div3 .h,.div3 .r{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,3fr) minmax(0,3fr) minmax(0,3fr);column-gap:var(--gap)}
.div3 .h{font-size:14.5px;color:var(--mid);padding-bottom:12px;border-bottom:1px solid var(--rule)}
.div3 .h .a{color:var(--acc)}
.div3 .r{padding:24px 0;border-bottom:1px solid var(--rule);font-size:15.5px;line-height:1.5;color:var(--mid)}
.div3 .r .k{font-size:18px;font-weight:500;line-height:1.35;color:var(--hi);letter-spacing:-.005em}
.div3 .r .a{color:var(--hi)}
.div3.sub{border-top:0}
.dd{margin-top:8px;border-bottom:1px solid var(--rule)}
.dd summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:14px;padding:20px 0;font-size:16.5px;font-weight:500}
.dd summary::-webkit-details-marker{display:none}
.dd summary::before{content:"+";width:18px;color:var(--acc);font-weight:400;font-size:20px;line-height:1}
.dd[open] summary::before{content:"\2212"}
.dd summary:hover{color:var(--acc)}
@media (max-width:820px){
  .div3 .h{display:none}
  .div3 .r{grid-template-columns:1fr;row-gap:8px}
  .div3 .r>div:not(.k)::before{content:attr(data-k);display:block;font-size:13.5px;color:var(--mid);margin-bottom:2px}
  .div3 .r>div.a::before{color:var(--acc)}
}

/* video player (stage-seven behaviours, restyled) */
.player{position:relative}
.player video{width:100%;height:auto;aspect-ratio:16/9;background:#000;border-radius:2px;color:var(--light)}
.player .poster{position:absolute;left:0;top:0;width:100%;aspect-ratio:16/9;border:0;padding:0;cursor:pointer;background:#000;display:block;border-radius:2px;overflow:hidden}
.player .poster[hidden]{display:none}
.player .poster img{width:100%;height:100%;object-fit:cover}
.player .poster span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:14px;font-size:15px;font-weight:500;color:var(--light);background:rgba(2,8,23,.78);padding:13px 20px 13px 16px;border-radius:3px}
.player .poster span::before{content:"";width:0;height:0;border-left:12px solid var(--orange);border-top:7px solid transparent;border-bottom:7px solid transparent}
.player .poster:hover span,.player .poster:focus-visible span{outline:1px solid var(--orange)}
.player .poster .outline{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.player .poster .outline rect{fill:none;stroke:var(--orange);stroke-width:1.5;vector-effect:non-scaling-stroke}
.player .poster .tilecap{display:none;position:absolute;right:12px;bottom:12px;font-style:normal;font-size:13px;color:var(--light);background:rgba(2,8,23,.78);padding:6px 9px;border-radius:2px}
.player .ctl{display:flex;align-items:center;gap:14px;padding:16px 0 0;font-size:14.5px;color:var(--mid)}
.player .ctl button{white-space:nowrap;font-size:14.5px;font-weight:500;color:var(--hi);padding:8px 12px;border:1px solid var(--rule);border-radius:3px}
.player .ctl button:hover{border-color:var(--orange)}
.player .ctl .seek{flex:1;display:flex;align-items:center;min-width:120px}
.player .ctl input[type=range]{width:100%;height:20px;margin:0;background:transparent;-webkit-appearance:none;appearance:none;cursor:pointer}
.player .ctl input[type=range]::-webkit-slider-runnable-track{height:2px;background:var(--rule)}
.player .ctl input[type=range]::-moz-range-track{height:2px;background:var(--rule)}
.player .ctl input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:var(--orange);margin-top:-6px}
.player .ctl input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--orange);border:0}
.player .ctl input[type=range]:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.player .ctl .tc{min-width:64px;text-align:right}
/* the trailer carries a fourth control, Sound on; on phones the seek bar and timecode take a second row */
@media (max-width:640px){.player.trailer .ctl{flex-wrap:wrap;row-gap:12px}.player.trailer .ctl .seek{order:1;flex:1 1 60%}.player.trailer .ctl .tc{order:2}}
@media (max-width:640px){.player .ctl{gap:10px}.player .ctl .seek{min-width:72px}.player .ctl .tc{min-width:52px}.player .ctl button{padding:8px 10px}.player .poster .tilecap{font-size:12px;right:8px;bottom:8px}}

/* click-to-play embed */
.cinema .chead{display:flex;justify-content:space-between;align-items:baseline;gap:24px;flex-wrap:wrap;padding-bottom:18px}
.cinema .chead .h3{max-width:48ch}
.cinema .screen{position:relative;aspect-ratio:16/9;background:#000;overflow:hidden;border-radius:2px}
.cinema .screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cinema .screen iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.cinema .screen .play{position:absolute;inset:0;display:grid;place-items:center}
.cinema .screen .play span{display:inline-flex;align-items:center;gap:14px;font-size:15px;font-weight:500;color:var(--light);background:rgba(2,8,23,.78);padding:13px 20px 13px 16px;border-radius:3px}
.cinema .screen .play span::before{content:"";width:0;height:0;border-left:12px solid var(--orange);border-top:7px solid transparent;border-bottom:7px solid transparent}
.cinema .screen .play:hover span{outline:1px solid var(--orange)}
.cinema .pcap{padding-top:18px;font-size:15px;line-height:1.5;color:var(--mid)}
.cinema .pcap p+p{margin-top:4px}

/* stepper (catalogue) */
.diagram .cmwrap svg{width:100%;height:auto;overflow:hidden}
.diagram .cmwrap svg.cm-mobile{display:none}
.cmside{display:flex;gap:16px 40px;align-items:center;flex-wrap:wrap;padding-top:20px}
.cmside .cmcap{font-size:15px;color:var(--mid)}
.diagram .ctl{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.diagram .ctl button{font-size:14.5px;font-weight:500;color:var(--hi);padding:8px 12px;min-width:44px;border:1px solid var(--rule);border-radius:3px}
.diagram .ctl button:hover{border-color:var(--orange)}
.diagram .ctl button:disabled{opacity:.4;cursor:default}
.cm text{font-family:var(--sans);fill:var(--hi)}
.cm .role{font-size:14.5px;fill:var(--mid)}
.cm .name{font-size:18px;font-weight:500}
.cm .name.sm{font-size:16.5px}
.cm .frame{fill:#0A1122}
.cm .card{transition:opacity .5s}
.cm .route{fill:none;stroke:var(--blue);stroke-width:1.75;stroke-dasharray:900;stroke-dashoffset:900;transition:stroke-dashoffset 1s cubic-bezier(.2,.7,.2,1),opacity .5s}
.cm .tag{opacity:0;transition:opacity .4s}
.cm .tag rect{fill:var(--blue)}
.cm .tag text{fill:var(--navy);font-size:14px;font-weight:500}
.cm-mobile .role{font-size:14.5px}.cm-mobile .tag text{font-size:14.5px}.cm-mobile .name.sm{font-size:15px}
.cm[data-step="1"] .r1,.cm[data-step="2"] .r1,.cm[data-step="3"] .r1{stroke-dashoffset:0}
.cm[data-step="2"] .r2,.cm[data-step="3"] .r2{stroke-dashoffset:0}
.cm[data-step="2"] .r1{opacity:.4}
.cm[data-step="1"] .t1,.cm[data-step="2"] .t1,.cm[data-step="3"] .t1{opacity:1}
.cm[data-step="2"] .t2,.cm[data-step="3"] .t2{opacity:1}
.cm[data-step="1"] .card.dimmable:not(.c1){opacity:.5}
.cm[data-step="2"] .card.dimmable:not(.c2){opacity:.5}
.cm[data-step="3"] .card.dimmable.cx{opacity:.5}
.cm[data-step="3"] .r1{opacity:.4}
.cm[data-step="3"] .t1{opacity:.55}
@media (max-width:900px){.cm-desktop .role{font-size:21px}.cm-desktop .name{font-size:26px}.cm-desktop .name.sm{font-size:24px}.cm-desktop .tag text{font-size:20px}.cm-desktop .tag rect{transform:scaleY(1.3);transform-origin:center;transform-box:fill-box}}
@media (max-width:640px){.diagram .cmwrap svg.cm-desktop{display:none}.diagram .cmwrap svg.cm-mobile{display:block}}

/* footer */
.foot{padding:var(--s-sec) 0 40px;margin:0;row-gap:0}
.band+.foot{padding-top:0}
.mast.wm+.foot{padding-top:0}
.sec+.foot{margin-top:120px;padding-top:96px}
.sec+.foot>.srule{display:none}
.sec+.foot .close{margin-top:40px}
.foot .srule{margin-bottom:56px}
.foot .close{grid-column:c 1 / c 9;font-size:clamp(24px,2.2vw,30px);font-weight:500;line-height:1.25;letter-spacing:-.015em;text-wrap:balance}
.foot .facts .lnk{text-wrap:balance}
.foot .facts{grid-column:c 10 / c 13;display:flex;flex-direction:column;align-items:flex-start;gap:22px;align-self:end;padding-bottom:4px}
.foot .index{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--gap);margin-top:var(--s-block);padding-top:32px;border-top:1px solid var(--rule)}
.foot .index .gl{font-size:14.5px;color:var(--mid);margin-bottom:12px}
.foot .index a{display:block;font-size:15.5px;line-height:1.6;padding:2px 0}
.foot .index a:hover{text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--orange)}
.foot .bar{display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap;margin-top:64px;font-size:13.5px;color:var(--mid)}
@media (max-width:820px){.foot .close,.foot .facts{grid-column:c 1 / c 13}.foot .facts{margin-top:28px;align-self:start}.foot .index{grid-template-columns:1fr 1fr;row-gap:28px}.foot .bar{flex-direction:column;gap:8px}}

@media (prefers-reduced-motion:reduce){.player .poster .tilecap{display:block}html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}
@media print{.top,.drawer{display:none!important}body{background:#fff;color:#000}}

/* variant: two columns of short notes in place of the definition tables */
.pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:calc(var(--gap) * 2)}
.pair .h3{font-size:19px}
.pair p{margin-top:12px;font-size:15.5px;line-height:1.55;color:var(--mid);max-width:52ch}
.pair p b{font-weight:500;color:var(--hi)}
.pair .vb-control{margin-top:28px}
@media (max-width:820px){.pair{grid-template-columns:1fr;row-gap:40px}}
/* Home band: the StageTime mark beside the StageTime line, reversed for the navy ground */
.band>.stlogo,.band>.stlogo+.read{grid-row:3}
.band>.stlogo{grid-column:c 1 / c 5;display:flex;gap:16px;align-items:end;align-self:start}
.band>.stlogo img{width:64px;height:auto}
.band>.stlogo p{font-size:14.5px;line-height:1.45;color:var(--mid)}
@media (max-width:820px){.band>.stlogo,.band>.stlogo+.read{grid-row:auto;grid-column:c 1 / c 13}.band>.stlogo+.read{margin-top:24px}}
.nw{white-space:nowrap}