/* About (Re)in Asia, who we are, not what we sell, one screen at a time. Why we exist,
   the right insight at the right time, who reads us, four kinds of in-depth journalism, every line of business, every market on the map, the
   named newsroom, where to find us and how to reach us. Without script it is an ordinary page. */

@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:block;src:url('../../../assets/fonts/inter-latin.woff2') format('woff2')}
@font-face{font-family:Montserrat;font-style:normal;font-weight:500 700;font-display:block;src:url('montserrat-latin.woff2') format('woff2')}
@font-face{font-family:"Playfair Display";font-style:normal;font-weight:400 900;font-display:block;src:url('../../../assets/fonts/playfair-latin.woff2') format('woff2')}
@font-face{font-family:"Playfair Display";font-style:italic;font-weight:400 900;font-display:block;src:url('../../../assets/fonts/playfair-italic-latin.woff2') format('woff2')}

:root{
  --paper:#FCFBF8; --soft:#F4F2ED; --ink:#14161A; --text:#3B3E45; --grey:#6B6F78; --line:#E8E4DC; --line2:#D9D3C7;
  --red:#C8102E; --red-d:#A50D26; --red-l:#FF5A6E; --night:#0E0F12; --sand:#EEE7DA; --wine:#3D0F19;
  --logo-b:#519CCB; --logo-r:#E0566A;
  --disp:"Playfair Display",Georgia,serif;
  --logo:Montserrat,"Segoe UI",sans-serif;
  --sans:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --gut:max(clamp(20px,6.6vw,112px),calc((100vw - 1560px) / 2));
  --headh:clamp(64px,9vh,84px);
  --vh:100vh;
}
@supports (height:100dvh){:root{--vh:100dvh}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body.ab{margin:0;background:var(--paper);color:var(--text);font:400 17px/1.55 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.ab a{color:inherit}
.ab img{display:block;max-width:100%}
.ab :where(h1,h2,h3,p,ul,ol,dl,dd,figure,blockquote){margin:0}
.ab :focus-visible{outline:2px solid var(--red);outline-offset:3px}
.ab-vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ab h2{font:500 clamp(30px,3.1vw,48px)/1.08 var(--disp);letter-spacing:-.012em;color:var(--ink)}
.ab-sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px}
.ab-sec-head p{max-width:27em;font-size:16px;text-align:right}

/* header: tone follows the section beneath it; today's date in Hong Kong in the middle, as a paper's masthead carries it */
.ab-head{position:fixed;z-index:20;inset:0 0 auto;height:var(--headh);display:flex;align-items:center;justify-content:space-between;padding:0 var(--gut);transition:background .3s,box-shadow .3s}
.ab-head.is-scrolled{background:var(--paper);box-shadow:0 1px 0 var(--line)}
.ab-head.is-dark{background:var(--night)}
.ab-head.is-dark.is-top{background:transparent}
.ab-head.is-red{background:var(--wine);box-shadow:0 1px 0 rgba(255,255,255,.1)}
.ab-logo img{width:140px;height:auto}
.ab-logo-l{display:none!important}
.ab-head.is-dark .ab-logo-d{display:none!important}
.ab-head.is-dark .ab-logo-l{display:block!important}
.ab-head-date{position:absolute;left:50%;transform:translateX(-50%);font:500 13px/1 var(--sans);color:var(--grey);white-space:nowrap;font-variant-numeric:lining-nums}
.ab-head.is-dark .ab-head-date{color:rgba(255,255,255,.62)}
.ab-head-btn{display:inline-flex;align-items:center;height:40px;padding:0 20px;border-radius:3px;background:var(--red);color:#fff!important;font:600 14px/1 var(--sans);text-decoration:none;transition:background .2s}
.ab-head-btn:hover{background:var(--red-d)}

/* the deck: one full screen per page, one gesture per page (with script) */
html.js,html.js body.ab{height:100%}
html.js body.ab{overflow:hidden}
.js .ab-deck{position:relative;height:100vh;height:var(--vh);overflow-y:auto;overflow-x:hidden;overscroll-behavior:none;scroll-snap-type:y mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.js .ab-deck::-webkit-scrollbar{display:none}
.js .ab-deck.is-gliding{scroll-snap-type:none}
.js .ab-pg{position:relative;height:100vh;height:var(--vh);overflow:hidden;scroll-snap-align:start;scroll-snap-stop:always}
.js .ab-pg.is-tall{overflow-y:auto;scrollbar-width:none}
.js .ab-pg.is-tall::-webkit-scrollbar{display:none}
.ab-stage{height:100%}
html:not(.js) .ab-stage{min-height:var(--vh)}
/* without script each page is still the frame its backgrounds are drawn in, and the cover shows Hong Kong, not the lens */
.ab-pg{position:relative}
html:not(.js) .ab-pg{overflow:hidden}
html:not(.js) .ab-lz-lens,html:not(.js) .ab-cover-cap{display:none}
.ab-cover-still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* page marks: one per page, the current one long and red */
.ab-dots{position:fixed;z-index:20;right:clamp(10px,2vw,30px);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:2px;color:#fff;transition:color .4s ease}
html:not(.js) .ab-dots{display:none}
.ab-dots a{display:flex;align-items:center;justify-content:flex-end;width:44px;height:30px;color:inherit}
.ab-dots i{display:block;width:16px;height:2px;background:currentColor;opacity:.36;transition:width .45s var(--ease),opacity .3s,background-color .3s}
.ab-dots a:hover i{opacity:.75}
.ab-dots a[aria-current="true"] i{width:30px;opacity:1;background:var(--red)}
body[data-tone="light"] .ab-dots{color:var(--ink)}
body[data-tone="red"] .ab-dots a[aria-current="true"] i{background:#fff}
body[data-tone="blue"] .ab-head.is-dark{background:rgba(15,46,87,.94);box-shadow:0 1px 0 rgba(255,255,255,.1)}
body[data-tone="navy"] .ab-head.is-dark{background:rgba(10,22,38,.92);box-shadow:0 1px 0 rgba(255,255,255,.08)}

/* 1. cover */
.ab-cover{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);min-height:var(--vh);background:var(--night);color:#fff}
.ab-cover-text{align-self:center;padding:calc(var(--headh) + 3vh) clamp(32px,4.4vw,80px) 4vh var(--gut)}
.ab-cover h1{font:500 clamp(40px,4.3vw,72px)/1.03 var(--disp);letter-spacing:-.02em;color:#fff;max-width:11em;text-wrap:balance;animation:ab-rise 1.1s var(--ease) .1s both}
.ab-lede{margin-top:clamp(20px,3.4vh,32px);max-width:28em;font-size:clamp(17px,1.35vw,20px);line-height:1.55;color:rgba(255,255,255,.78);animation:ab-rise 1.1s var(--ease) .25s both}
/* the name as a sum: insurance plus reinsurance is (re)insurance, and the "surance" gives way to Asia. Drawn final
   here (no script, reduced motion); with script it plays each time the cover arrives */
.ab-sum{position:relative;display:inline-flex;flex-direction:column;margin-top:clamp(24px,4.4vh,44px);font:600 clamp(25px,2.3vw,37px)/1.25 var(--logo);letter-spacing:-.005em;color:#fff}
.ab-sum-r{display:grid;grid-template-columns:1em auto;column-gap:.42em;align-items:baseline}
.ab-sum-r i{font:300 .78em/1 var(--sans);font-style:normal;color:rgba(255,255,255,.55);text-align:center;transition:opacity .5s ease,transform .7s var(--ease)}
.ab-sum-r > span{white-space:nowrap}
.ab-sum-w{display:inline-block;opacity:.32;transition:opacity .7s ease,transform .9s var(--ease),filter .9s ease}
.ab-sum em{font-style:normal;transition:color .5s ease}
.ab-sum-3{position:relative;margin-top:.5em;padding-top:.62em;padding-bottom:.3em}
.ab-sum-3::before{content:"";position:absolute;left:0;right:0;top:0;height:1.5px;background:rgba(255,255,255,.5);transform-origin:0 50%;transition:transform .8s var(--ease)}
/* the result reads as the logo: blue brackets, Re and in, then Asia in red italic */
.ab-sum-x{display:inline-block;transform-origin:0 60%}
.ab-sum svg{fill:currentColor}
/* sizes and gaps below are the logo master's own, in em of the type: its capitals match Montserrat's */
.ab-sum-x u{display:inline-block;margin:0 .0432em 0 0;text-decoration:none;line-height:0;vertical-align:-.216em;color:var(--logo-b);transition:opacity .35s ease,transform .6s cubic-bezier(.34,1.56,.64,1)}
.ab-sum-x u svg{display:block;width:.3438em;height:1.0852em;overflow:visible}
.ab-sum-x u + em + u{margin:0 .1169em 0 -.0447em;transition-delay:.06s}
/* Re and in: type while the words land, then the logo's letters (their own widths) as Asia writes in */
.ab-sum-gw{position:relative;display:inline-block;width:var(--tw,var(--gw));white-space:nowrap;transition:width .7s var(--ease) .1s}
.ab-sum-bl{display:inline-block;width:0;height:0}
.ab-sum-gw > svg{position:absolute;left:0;top:var(--gt,0);width:var(--gw);overflow:visible;opacity:0;transition:opacity .5s ease .15s}
.ab-sum-t{transition:opacity .35s ease}
.ab-sum.is-4 .ab-sum-gw,html:not(.js) .ab-sum-gw{width:var(--gw)}
.ab-sum.is-4 .ab-sum-gw > svg,html:not(.js) .ab-sum-gw > svg{opacity:1}
.ab-sum.is-4 .ab-sum-t,html:not(.js) .ab-sum-t{opacity:0}
.ab-sum-x em{color:#fff;transition:color .7s ease .2s}
.ab-sum-x s,.ab-sum-x strong{display:inline-flex;overflow:hidden;overflow:clip visible;white-space:nowrap;text-decoration:none;font-weight:inherit}
.ab-sum-x s{width:0;transition:width .8s var(--ease) .25s}
.ab-sum-x s .l{display:inline-block;opacity:0;transform:translateY(.75em) rotate(14deg);transition:opacity .45s ease calc(var(--k) * 45ms),transform .7s cubic-bezier(.55,0,.75,.2) calc(var(--k) * 45ms)}
.ab-sum-x strong{width:var(--aw,auto);margin-left:-.091em;vertical-align:-.301em;color:var(--logo-r);transition:width 1s var(--ease) .3s}
/* Asia from the logo artwork: its height and drop below the line are measured from the master file, and it writes in left to right */
.ab-sum-a{display:block;flex:none;width:2.532em;height:1.0944em;margin:0;overflow:visible;clip-path:inset(-10% 0 -10% 0);transition:clip-path 1.15s cubic-bezier(.55,.1,.3,1) .55s}
.js .ab-sum:not(.is-4) .ab-sum-a{clip-path:inset(-10% 100% -10% 0);transition:none}
.ab-sum-fly{position:absolute;left:0;top:0;white-space:nowrap;pointer-events:none;will-change:transform}
.ab-sum-fly.is-re{color:var(--red-l)}
.ab-sum-fly.is-go{transition:transform .95s cubic-bezier(.65,0,.35,1),opacity .8s ease}
.ab-sum-fly.is-fade{opacity:0}
/* the answer settles into the logo itself */
.ab-sum-end{display:inline-block}
html:not(.js) .ab-sum-x s{display:none}
.ab-sum-k{margin-top:22px;max-width:25em;font:400 15px/1.5 var(--sans);color:rgba(255,255,255,.72);transition:opacity .8s ease,transform .9s var(--ease)}
/* with script the sum plays: the two words arrive, the rule draws, they fly down and merge into (Re)insurance, the
   brackets pop in, then "surance" falls away and Asia rises in its place */
.js .ab-sum.is-reset *{transition:none!important;animation:none!important}
.js .ab-sum:not(.is-g) .ab-sum-w{opacity:1}
.js .ab-sum:not(.is-1) .ab-sum-1 .ab-sum-w,.js .ab-sum:not(.is-2) .ab-sum-2 .ab-sum-w,.js .ab-sum:not(.is-2) .ab-sum-2 i{opacity:0;transform:translateY(.45em);filter:blur(8px)}
.js .ab-sum.is-2:not(.is-g) .ab-sum-2 em{color:var(--red-l)}
.js .ab-sum:not(.is-3) .ab-sum-3 i{opacity:0;transform:translateY(.3em)}
.js .ab-sum:not(.is-3) .ab-sum-3::before{transform:scaleX(0)}
.js .ab-sum.is-f .ab-sum-w{opacity:0;transition:none}
.js .ab-sum:not(.is-m) .ab-sum-x{opacity:0}
.js .ab-sum:not(.is-m) .ab-sum-x u{opacity:0;transform:scale(.3)}
.js .ab-sum.is-m .ab-sum-x{animation:ab-pop .7s var(--ease)}
.js .ab-sum:not(.is-4) .ab-sum-x em{color:var(--red-l)}
.js .ab-sum:not(.is-4) .ab-sum-x s{width:var(--sw,auto)}
.js .ab-sum:not(.is-4) .ab-sum-x s .l{opacity:1;transform:none;transition-delay:0s}
.js .ab-sum:not(.is-4) .ab-sum-x strong{width:0}
.js .ab-cover-text:not(.is-5) .ab-sum-k{opacity:0;transform:translateY(.4em)}
@keyframes ab-pop{0%{transform:scale(1.07)}100%{transform:none}}
.ab-cover-meta{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:14px clamp(24px,3vw,48px);margin-top:clamp(24px,4.4vh,44px);padding-top:18px;border-top:1px solid rgba(255,255,255,.18);animation:ab-rise 1.1s var(--ease) .4s both}
/* a label that wraps to two lines still leaves its figure on the same line as the others */
.ab-cover-meta > div{display:flex;flex-direction:column}
.ab-cover-meta dt{margin-bottom:6px;font:500 12.5px/1.3 var(--sans);color:rgba(255,255,255,.58);max-width:11em}
.ab-cover-meta dd{margin-top:auto;font:500 clamp(24px,2.2vw,34px)/1 var(--disp);color:#fff;font-variant-numeric:lining-nums}
.ab-cover-fig{position:relative;overflow:hidden;background:#161a22}
.ab-cover-fig::before{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(90deg,var(--night) 0,rgba(14,15,18,0) 20%),linear-gradient(0deg,rgba(14,15,18,.86) 0,rgba(14,15,18,0) 42%);pointer-events:none}
.ab-cover-imgs img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.6s ease}
.ab-cover-imgs img.is-on{opacity:1;animation:ab-drift 9s linear both}
.ab-cover-cap{position:absolute;z-index:3;left:clamp(24px,3vw,44px);right:clamp(24px,3vw,44px);bottom:clamp(26px,5vh,48px);transition:opacity .5s}
.ab-cover-cap.is-out{opacity:0}
.ab-cover-cap b{display:block;font:600 13px/1.3 var(--sans);color:var(--red-l)}
.ab-cover-cap a{display:block;margin-top:6px;max-width:28em;font:500 clamp(18px,1.55vw,23px)/1.3 var(--disp);color:#fff;text-decoration:none}
.ab-cover-cap a:hover{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.ab-cover-pips{position:absolute;z-index:3;right:clamp(24px,3vw,44px);top:calc(var(--headh) + 14px);display:flex;gap:6px}
.ab-cover-pips i{display:block;width:18px;height:2px;background:rgba(255,255,255,.3);overflow:hidden}
.ab-cover-pips i.is-on::after{content:"";display:block;height:100%;background:#fff;animation:ab-pip 6s linear both}
/* the lens (the Subscribe page's closing lens, made to pick): a year of our stories in grey; the lens shows the one under it
   in colour, a little closer, outlined in red; its headline sits below */
.ab-lz{cursor:pointer}
.ab-lz::before{z-index:1}
.ab-lz-far,.ab-lz-near{position:absolute;left:0;top:0;width:var(--fw,100%);display:grid;grid-template-columns:repeat(var(--tc,4),minmax(0,1fr))}
.ab-lz-far img,.ab-lz-near img{display:block;width:100%;height:auto;aspect-ratio:16 / 9;object-fit:cover;background:#1C1E23}
.ab-lz-far{filter:grayscale(1) brightness(.62);opacity:.55}
.ab-lz-lens{position:absolute;z-index:2;left:0;top:0;width:calc(2 * var(--lr,180px));height:calc(2 * var(--lr,180px));pointer-events:none;will-change:transform}
.ab-lz-glass{position:absolute;inset:0;border-radius:50%;overflow:hidden;background:#1C1E23;transform:translateZ(0);box-shadow:0 34px 80px -24px rgba(0,0,0,.85);transition:transform .9s var(--ease),opacity .7s ease}
.ab-lz-glass::after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 50% 45%,rgba(14,15,18,0) 58%,rgba(14,15,18,.34))}
.ab-lz-near{transform-origin:0 0;will-change:transform}
.ab-lz-near img{transition:box-shadow .3s ease}
.ab-lz-near img.is-pick{box-shadow:0 0 0 2px var(--red)}
.ab-lz-ring{position:absolute;inset:-8px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(252,251,248,.32);transition:opacity .7s ease}
.js .ab-lz:not(.is-in) .ab-lz-glass{opacity:0;transform:scale(.6)}
.js .ab-lz:not(.is-in) .ab-lz-ring{opacity:0}
.ab-still .ab-lz-glass{transition:none}
@keyframes ab-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes ab-drift{from{transform:scale(1.06)}to{transform:none}}
@keyframes ab-pip{from{width:0}to{width:100%}}

/* 2. readers: a year ago, then today */
.ab-readers .ab-stage{display:flex;flex-direction:column;padding:calc(var(--headh) + 3vh) var(--gut) 4vh}
.ab .ab-rd-h{max-width:21em;margin-top:clamp(10px,1.8vh,18px);font:500 clamp(24px,2.35vw,38px)/1.16 var(--disp);letter-spacing:-.012em;color:var(--ink);text-wrap:balance}
.ab-rd-then{display:block;margin-bottom:.3em;font-size:max(.62em,14px);font-weight:400;line-height:1.2;letter-spacing:-.005em;color:var(--grey)}
.ab-rd-now{display:block}
.ab-rd-now b{font-weight:600;color:var(--red);font-variant-numeric:lining-nums}
.ab-rd-ast{margin-left:.04em;font-size:.6em;vertical-align:.55em;color:var(--grey)}
.js .ab-rd-now{opacity:0;transform:translateY(12px);transition:opacity .7s ease,transform .9s var(--ease)}
.js .ab-rd-now.is-lit{opacity:1;transform:none}
.ab-chart{position:relative;flex:1;min-height:160px;margin:clamp(30px,6vh,64px) clamp(120px,10vw,160px) 34px 0}
.ab-chart-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ab-chart-u{fill:none;stroke:var(--red);stroke-width:2.5;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.ab-chart-area{fill:rgba(200,16,46,.07);stroke:none}
.ab-chart-dot{position:absolute;z-index:2;left:0;top:0;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--red);box-shadow:0 0 0 5px rgba(200,16,46,.16);will-change:transform}
.ab-chart-mark,.ab-chart-end{position:absolute;font:500 13px/1.3 var(--sans);color:var(--grey);white-space:nowrap;transition:opacity .5s ease,transform .7s var(--ease)}
.ab-chart-mark b,.ab-chart-end b{display:block;font:500 clamp(24px,2.3vw,36px)/1 var(--disp);color:var(--ink);font-variant-numeric:lining-nums;margin-bottom:5px}
.ab-chart-mark{transform:translate(calc(-100% - 14px),calc(-100% - 8px));text-align:right}
.ab-chart-end{left:calc(100% + 18px);transform:translateY(-50%);text-align:left}
.ab-chart-end b{color:var(--red)}
.js .ab-chart-mark{opacity:0;transform:translate(calc(-100% - 14px),calc(-100% - 22px))}
.js .ab-chart-mark.is-in{opacity:1;transform:translate(calc(-100% - 14px),calc(-100% - 8px))}
.js .ab-chart-end{opacity:0;transform:translate(-10px,-50%)}
.js .ab-chart-end.is-in{opacity:1;transform:translate(0,-50%)}
.ab-chart-start{position:absolute;left:0;bottom:46px;font-size:13px;line-height:1.35;color:var(--grey)}
.ab-chart-start b{color:var(--ink);font-weight:600}
.ab-chart-axis{position:absolute;left:0;right:0;top:calc(100% + 10px);height:14px;font:500 12px/1 var(--sans);color:var(--grey)}
.ab-chart-axis span{position:absolute;transform:translateX(-50%)}
.ab-chart-axis span.is-first{transform:none}
.ab-rd-foot{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px clamp(28px,4vw,64px);padding-top:16px;border-top:1px solid var(--line2);font-size:15px}
.ab-rd-foot b{font:500 24px/1 var(--disp);color:var(--ink);margin-right:6px;font-variant-numeric:lining-nums}
.ab-rd-src{margin-left:auto;font-size:12.5px;color:var(--grey)}

/* 5. depth: four kinds of story, several of each, each in the form it takes: features with their pictures whole, the
   executives' own words, a data feature's chart, the white papers. The tabs walk through them until you pick one */
.ab-types{background:var(--soft)}
.ab-types .ab-stage{display:flex;flex-direction:column;padding:calc(var(--headh) + 2vh) var(--gut) 4vh}
.ab-dt-tabs{display:flex;gap:clamp(24px,3.6vw,60px);margin-top:calc(clamp(14px,2.8vh,28px) - 12px);border-bottom:1px solid var(--line2)}
html:not(.js) .ab-dt-tabs{display:none}
.ab-dt-tabs button{all:unset;box-sizing:border-box;position:relative;padding:12px 0;cursor:pointer}
.ab-dt-tabs button::before{content:"";position:absolute;inset:0 -10px}
.ab-dt-tabs b{display:block;font:500 clamp(19px,1.55vw,24px)/1.15 var(--disp);color:var(--grey);transition:color .3s}
.ab-dt-tabs button:hover b,.ab-dt-tabs [aria-selected="true"] b{color:var(--ink)}
.ab-dt-tabs i{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--red);transform:scaleX(0);transform-origin:0 50%}
.ab-dt-tabs [aria-selected="true"] i{transform:scaleX(1)}
.ab-types.is-cycling .ab-dt-tabs [aria-selected="true"] i{animation:ab-fill 7s linear both}
@keyframes ab-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.ab-dt-panels{flex:1;min-height:0;display:grid;grid-template:minmax(0,1fr) / minmax(0,1fr);margin-top:clamp(16px,3vh,30px)}
.ab-dt-p{grid-area:1 / 1;min-height:0;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(28px,3.6vw,60px);align-items:start;container-type:size}
.js .ab-dt-p{opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .4s ease,transform .7s var(--ease),visibility 0s .4s}
.js .ab-dt-p.is-on{opacity:1;visibility:visible;transform:none;transition:opacity .5s ease .12s,transform .8s var(--ease) .12s,visibility 0s}
html:not(.js) .ab-dt-panels{display:block}
html:not(.js) .ab-dt-p{container-type:normal;margin-bottom:48px}
/* the lead feature: its picture whole, as large as the screen allows */
.ab-dt-lead{display:block;max-width:calc((100cqh - 90px) * 1.7778);color:var(--ink);text-decoration:none}
.ab-dt-lead img{width:100%;height:auto;aspect-ratio:16 / 9;background:var(--soft)}
.ab-dt-lead b{display:block;margin-top:14px;font:500 clamp(22px,1.9vw,30px)/1.16 var(--disp);color:var(--ink);text-wrap:balance}
.ab-dt-p a:hover b,.ab-iv:hover .ab-iv-h{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
/* more of the same kind, each with its picture whole */
.ab-dt-more{margin:0;padding:0;list-style:none;border-top:2px solid var(--ink)}
.ab-dt-more li{border-bottom:1px solid var(--line)}
.ab-dt-more a{display:grid;grid-template-columns:clamp(112px,10vw,152px) minmax(0,1fr);gap:16px;align-items:center;padding:clamp(8px,1.4vh,12px) 0;color:var(--ink);text-decoration:none}
.ab-dt-more img{width:100%;height:auto;aspect-ratio:16 / 9;object-fit:cover;background:var(--soft)}
.ab-dt-more b{display:block;font:500 clamp(15.5px,1.15vw,18px)/1.3 var(--disp);color:var(--ink);text-wrap:pretty}
/* interviews: four executives in their own words */
.ab-dt-int{grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.4vw,20px);align-items:stretch;align-content:start}
.ab-iv{display:flex;flex-direction:column;min-height:0;padding:clamp(12px,1.9vh,18px) clamp(14px,1.2vw,18px) clamp(12px,1.6vh,16px);background:var(--paper);border-top:3px solid var(--ink);color:var(--ink);text-decoration:none;overflow:hidden}
.ab-iv:first-child{border-top-color:var(--red)}
.ab-iv-top{display:flex;align-items:center;gap:12px}
.ab-iv img{flex:none;width:clamp(46px,3.9vw,58px);height:auto;aspect-ratio:1;clip-path:circle(44% at 50% 50%)}
.ab-iv-who{display:block;min-width:0;font-size:12.5px;line-height:1.3;color:var(--grey)}
.ab-iv-who b{display:block;font-size:13.5px;font-weight:600;color:var(--ink)}
.ab-iv blockquote{margin:clamp(8px,1.4vh,12px) 0 clamp(10px,1.6vh,14px);font:400 italic clamp(16px,1.22vw,19px)/1.3 var(--disp);color:var(--ink);text-wrap:pretty}
.ab-iv-h{display:block;margin-top:auto;padding-top:10px;border-top:1px solid var(--line2);font:500 clamp(13.5px,.98vw,15px)/1.3 var(--disp);color:var(--grey)}
/* the data feature: its chart drawn from the story's figures; every market in grey, China in red, point at a line to read it */
.ab-ch{display:flex;flex-direction:column;height:100cqh;color:var(--ink);text-decoration:none}
.ab-ch-card{flex:1;min-height:0;display:flex;flex-direction:column;padding:clamp(14px,2.2vh,22px) clamp(16px,1.5vw,24px) clamp(10px,1.6vh,14px);background:#fff;box-shadow:0 1px 2px rgba(20,22,26,.06),0 18px 44px rgba(20,22,26,.11)}
.ab-ch-t b{display:block;font:600 15px/1.3 var(--sans);color:var(--ink)}
.ab-dt-p a:hover .ab-ch-t b{text-decoration:none}
.ab-ch-t span{display:block;margin-top:3px;font-size:12.5px;line-height:1.4;color:var(--grey)}
.ab-ch-g{position:relative;flex:1;min-height:160px;margin-top:12px}
.ab-ch-g svg{position:absolute;inset:0;display:block;overflow:visible}
.ab-ch-alt{display:block;font-size:14px;line-height:1.5;color:var(--text)}
.ab-ch-s{display:block;margin-top:6px;font-size:11px;line-height:1.3;color:var(--grey)}
.ab-ch-gl{stroke:var(--line);stroke-width:1}
.ab-ch-base{stroke:var(--line2);stroke-width:1}
.ab-ch-ax{font:500 10.5px var(--sans);fill:var(--grey)}
.ab-ch-l{fill:none;stroke:#CFCAC0;stroke-width:1.3;stroke-linejoin:round;stroke-linecap:round;opacity:0;transition:opacity .6s ease,stroke .2s,stroke-width .2s,stroke-opacity .2s}
.ab-ch-l.is-k{stroke:#8F8B83;stroke-width:1.7}
.ab-ch-l.is-cn{stroke:var(--red);stroke-width:2.8;transition:opacity .2s,stroke-dashoffset 1.9s var(--ease) .35s,stroke-width .2s}
.ab-ch-g.is-go .ab-ch-l{opacity:1}
.ab-ch-g svg.is-pt .ab-ch-l:not(.is-on){stroke-opacity:.4}
.ab-ch-g svg.is-pt .ab-ch-l.is-on:not(.is-cn){stroke:var(--ink);stroke-width:2.4}
.ab-ch-end{opacity:0;transition:opacity .5s ease}
.ab-ch-g.is-go .ab-ch-end{opacity:1;transition-delay:1.9s}
.ab-ch-g svg.is-pt .ab-ch-end{opacity:.35;transition-delay:0s}
.ab-ch-end text{font:600 11.5px var(--sans);fill:var(--ink)}
.ab-ch-end text.v{font-weight:500;fill:var(--grey)}
.ab-ch-end.is-cn text{fill:var(--red)}
.ab-ch-dot{fill:var(--red)}
.ab-ch-pt{fill:#fff;stroke:var(--ink);stroke-width:2;opacity:0;pointer-events:none}
.ab-ch-tip{font:600 12px var(--sans);fill:var(--ink);paint-order:stroke;stroke:#fff;stroke-width:5px;stroke-linejoin:round;opacity:0;pointer-events:none}
.ab-ch-c{display:block;margin-top:12px}
.ab-ch-c b{display:block;font:500 clamp(17px,1.35vw,21px)/1.25 var(--disp);color:var(--ink);text-wrap:balance}
.ab-ch-c span{display:block;margin-top:4px;font-size:13px;line-height:1.4;color:var(--grey)}
/* the white papers: the latest, with its headline finding, then the others */
.ab-wp{display:flex;flex-direction:column;max-width:calc((100cqh - 196px) * 1.7778);max-height:100%;background:var(--night);color:#fff;text-decoration:none;overflow:hidden}
.ab-wp > img{flex:none;width:100%;height:auto;aspect-ratio:16 / 9}
.ab-wp-in{flex:1;min-width:0;display:flex;flex-direction:column;padding:clamp(18px,2.8vh,30px) clamp(20px,1.9vw,32px) clamp(14px,2.2vh,24px)}
.ab-wp-t{display:block;font:500 clamp(20px,1.7vw,27px)/1.15 var(--disp);color:#fff}
.ab-wp-s{display:none}
.ab-wp-n{display:flex;align-items:center;gap:14px;padding-top:12px}
.ab-wp-n b{flex:none;font:500 clamp(36px,3.2vw,52px)/1 var(--disp);color:#fff;font-variant-numeric:lining-nums tabular-nums}
.ab-wp-n span{max-width:19em;font-size:13.5px;line-height:1.4;color:rgba(255,255,255,.74)}
.ab-wp-d{display:block;margin-top:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,.16);font-size:12.5px;color:rgba(255,255,255,.62)}
.ab-wp:hover .ab-wp-t{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}

/* 6. every line of business, one at a time and full screen: the line's picture, its name and its latest story. A ruler runs
   along the foot with a mark for every line, the one showing named at its mark, and the four families named under it; it turns
   by itself, or step with the arrows, tap a mark or a family, drag along the ruler or swipe */
.ab-dl{background:#0E0F12;color:#fff;overflow:hidden}
.ab-dl-bg{position:absolute;inset:0;overflow:hidden;background:#15171C}
.ab-dl-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.08);transition:opacity 1.1s ease,transform 7s linear}
.ab-dl-bg img.is-on{opacity:1;transform:scale(1)}
.ab-dl-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,11,14,.74) 0,rgba(10,11,14,.22) 30%,rgba(10,11,14,.26) 50%,rgba(10,11,14,.93) 100%)}
.ab-dl .ab-stage{position:relative;z-index:1;display:flex;flex-direction:column;padding:calc(var(--headh) + 2vh) var(--gut) 3.4vh}
.ab-dl .ab-sec-head h2{color:#fff}
.ab-dl .ab-sec-head h2 em{font-style:italic}
.ab-dl .ab-sec-head p{max-width:24em;color:rgba(255,255,255,.78);text-wrap:balance}
.ab-dl-now{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;margin-top:auto}
/* every line's words share one cell, so the ruler never moves whatever the length of the headline */
.ab-dl-its{display:grid;min-width:0;max-width:min(980px,78vw)}
.ab-dl-it{grid-area:1/1;align-self:end;color:#fff;text-decoration:none;opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .3s ease,transform .5s var(--ease),visibility 0s .5s}
.ab-dl-it.is-on{opacity:1;visibility:visible;transform:none;transition:opacity .55s ease .2s,transform .8s var(--ease) .2s,visibility 0s}
.ab-dl-it b{display:block;font:500 clamp(54px,7.2vw,120px)/.98 var(--disp);letter-spacing:-.02em;text-wrap:balance}
.ab-dl-hd{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;max-width:34em;margin-top:14px;font:500 clamp(17px,1.45vw,22px)/1.3 var(--disp);color:rgba(255,255,255,.92)}
.ab-dl-go{display:block;margin-top:6px;font:500 13px/1.3 var(--sans);color:rgba(255,255,255,.64)}
.ab-dl-go u{text-decoration-color:rgba(255,255,255,.35);text-underline-offset:4px}
.ab-dl-it:hover .ab-dl-go u{color:#fff;text-decoration-color:#fff}
.ab-dl-navs{display:flex;gap:10px;flex:none}
.ab-dl-nav{backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);background:rgba(14,15,18,.25)}
.ab-dl-rule{margin-top:clamp(46px,6.4vh,64px);user-select:none;-webkit-user-select:none;touch-action:pan-y;cursor:grab}
.ab-dl-rule.is-drag{cursor:grabbing}
.ab-dl-ticks{display:flex;height:34px;border-bottom:1px solid rgba(255,255,255,.42)}
.ab-dl-tk{position:relative;flex:1;height:100%;padding:0;border:0;background:none;color:#fff;cursor:inherit}
.ab-dl-tk::before{content:"";position:absolute;left:50%;bottom:0;width:1px;height:12px;background:rgba(255,255,255,.55);transform-origin:50% 100%;transition:height .45s var(--ease),background-color .4s,transform .7s var(--ease) calc(var(--d) * 22ms)}
.ab-dl-tk:hover::before{height:20px;background:#fff}
.ab-dl-tk.is-on::before{width:2px;margin-left:-.5px;height:34px;background:var(--red-l)}
/* the line showing is named at its mark; near the ends the name turns inward so it never runs off */
.ab-dl-tk span{position:absolute;left:50%;bottom:42px;transform:translateX(-50%);font:600 12.5px/1 var(--sans);white-space:nowrap;opacity:0;transition:opacity .3s ease}
.ab-dl-tk.is-l span{transform:translateX(-1px)}
.ab-dl-tk.is-r span{transform:translateX(calc(-100% + 1px))}
.ab-dl-tk:hover span{opacity:.7}
.ab-dl-tk.is-on span{opacity:1}
.ab-dl-fams{display:flex}
.ab-dl-fams button{min-width:0;padding:10px 0 0 10px;border:0;border-left:1px solid rgba(255,255,255,.42);background:none;text-align:left;font:500 clamp(17px,1.5vw,23px)/1.2 var(--disp);color:rgba(255,255,255,.5);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;transition:color .4s ease}
.ab-dl-fams button:hover{color:rgba(255,255,255,.8)}
.ab-dl-fams button.is-on{color:#fff}
/* arrival: the marks rise along the ruler and the words come in after the picture */
.ab-dl-now,.ab-dl-fams{transition:opacity .8s ease .35s,transform 1s var(--ease) .35s}
.js .ab-dl:not(.is-in) .ab-dl-now,.js .ab-dl:not(.is-in) .ab-dl-fams{opacity:0;transform:translateY(16px)}
.js .ab-dl:not(.is-in) .ab-dl-tk::before{transform:scaleY(0)}

/* 7. every market: the Discover page's dot map beside a panel of the chosen market's latest stories */
.ab-mkt{background:var(--night);color:rgba(255,255,255,.74)}
.ab-mkt h2{color:#fff}
.ab-mkt .ab-stage{display:grid;grid-template-columns:minmax(300px,.8fr) minmax(0,1.2fr);grid-template-rows:minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:center;padding:calc(var(--headh) + 2vh) var(--gut) 4vh}
.ab-mkt-lede{margin-top:14px;max-width:25em;font-size:16px}
.ab-mkt-pick{display:none}
.ab-mkt-panel{margin-top:clamp(20px,4.5vh,44px);padding-top:16px;border-top:3px solid var(--red);transition:opacity .22s ease}
.ab-mkt-panel.is-out{opacity:0}
.ab-mkt-name{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.ab-mkt-name b{font:500 clamp(25px,2.3vw,36px)/1.1 var(--disp);color:#fff}
.ab-mkt-name span{font-size:13px;color:rgba(255,255,255,.55);font-variant-numeric:lining-nums;white-space:nowrap}
.ab-mkt-list{margin:12px 0 0;padding:0;list-style:none}
.ab-mkt-list li{padding:10px 0;border-top:1px solid rgba(255,255,255,.14)}
.ab-mkt-list a{display:block;font:500 clamp(16px,1.2vw,18px)/1.32 var(--disp);color:#fff;text-decoration:none}
.ab-mkt-list a:hover{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.ab-mkt-list time{display:block;margin-top:3px;font-size:12.5px;color:rgba(255,255,255,.55)}
.ab-mkt-hub{display:inline-flex;align-items:center;height:46px;margin-top:16px;padding:0 22px;border-radius:3px;background:var(--red);color:#fff!important;font:600 15px/1 var(--sans);text-decoration:none;transition:background .2s}
.ab-mkt-hub:hover{background:var(--red-d)}
.ab-mkt-hub::after{content:"\2192";display:inline-block;margin-left:10px;transition:transform .4s var(--ease)}
.ab-mkt-hub:hover::after{transform:translateX(4px)}
.ab-mkt-links{display:flex;flex-wrap:wrap;gap:6px 0;margin:22px 0 0;padding:0;list-style:none;font-size:15px}
.ab-mkt-links li + li::before{content:"·";margin:0 9px;color:rgba(255,255,255,.3)}
.ab-mkt-links a{text-decoration:none}
.ab-mkt.has-map .ab-mkt-links{display:none}
.ab-mkt:not(.has-map) .ab-mkt-panel,.ab-mkt:not(.has-map) .ab-map,.ab-mkt:not(.has-map) .ab-mkt-pick{display:none!important}
.ab-map{height:100%;min-height:0;display:flex;align-items:center;justify-content:center;container-type:size}
.ab-map-box{position:relative;width:min(100cqw,calc(100cqh * 1.2));aspect-ratio:1.2}
.ab-map-c{position:absolute;inset:0;width:100%;height:100%;display:block}
.ab-map-nodes{position:absolute;inset:0}
.ab-node{all:unset;box-sizing:border-box;position:absolute;--hw:20px;width:calc(var(--hw) * 2);height:calc(var(--hw) * 2);margin:calc(var(--hw) * -1) 0 0 calc(var(--hw) * -1);border-radius:50%;cursor:pointer}
.ab-node:focus-visible{outline:2px solid #fff;outline-offset:-2px}
.ab-node-l{position:absolute;left:calc(50% + var(--lo,16px));top:50%;transform:translateY(-50%);white-space:nowrap;font:500 12.5px/1 var(--sans);color:rgba(255,255,255,.6);pointer-events:none;transition:color .2s,opacity .6s ease}
.ab-node.is-left .ab-node-l{left:auto;right:calc(50% + var(--lo,16px))}
.ab-node:hover .ab-node-l{color:#fff}
.ab-node.is-on .ab-node-l{color:var(--red-l);font-weight:600}
.js .ab-mkt:not(.is-drawn) .ab-node-l{opacity:0}
.ab-mkt.is-drawn .ab-node-l{transition:color .2s,opacity .6s ease 1.1s}

/* 2. why we exist: the problem in ink, the answer inking in */

/* the red line sits between the problem and the answer, drawn once the problem has printed */

/* 3. the right insight, the right people, the right time: three columns, each the real thing */
.ab-ux{background:#2E0B13;color:#fff}
.ab-ux-px{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.ab-ux .ab-stage{position:relative;z-index:1;display:flex;flex-direction:column;padding:calc(var(--headh) + 3vh) var(--gut) clamp(28px,7vh,72px)}
.ab-ux-head{display:flex;justify-content:space-between;align-items:flex-end;gap:clamp(40px,5vw,96px)}
.ab .ab-ux-head h2{color:#fff}
.ab-ux-head h2 em{font-style:italic}
.ab-ux-head h2{flex:0 1 auto;max-width:15.5em;text-wrap:balance}
.ab-ux-head p{flex:0 1 27em;max-width:27em;font-size:16px;line-height:1.5;text-align:left;text-wrap:pretty;color:rgba(255,255,255,.8)}
.ab-ux-row{flex:1;min-height:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:minmax(0,1fr) auto auto;gap:0 clamp(32px,5vw,96px);margin-top:clamp(24px,6vh,64px)}
.ab-ux-c{position:relative;display:grid;grid-row:span 3;grid-template-rows:subgrid;align-content:start;min-height:0}
.ab-ux-c h3{text-wrap:balance;margin-top:clamp(20px,3.4vh,34px);font:500 clamp(20px,1.5vw,24px)/1.15 var(--disp);color:#fff}
.ab-ux-c > p{margin-top:6px;max-width:26em;font-size:14.5px;line-height:1.5;color:rgba(255,255,255,.76)}
.ab-ux-head,.ab-ux-c{transition:opacity .7s ease,transform .9s var(--ease)}
.ab-ux-c:nth-child(2){transition-delay:.1s}
.ab-ux-c:nth-child(3){transition-delay:.2s}
.js .ab-ux:not(.is-in) .ab-ux-head,.js .ab-ux:not(.is-in) .ab-ux-c{opacity:0;transform:translateY(16px)}
.js .ab-ux.is-now *{transition:none!important}
/* while one demo plays, the other two step back */
.ab-ux-c > *{transition:opacity .5s ease,filter .5s ease}
.ab-ux.is-in .ab-ux-row.is-playing .ab-ux-c:not(.is-on) > :not(.ab-ux-f){opacity:.42}
.ab-ux.is-in .ab-ux-row.is-playing .ab-ux-c:not(.is-on) .ab-ux-f{filter:brightness(.42) saturate(.55)}
.ab-ux.is-in .ab-ux-row.is-playing .ab-ux-c.is-on{transition-delay:0s}
/* the demos: each a white frame showing the real thing; with script each starts as the usual thing (.is-s0), takes a
   step (.is-s1), then settles as ours (no class). Without script, or with less motion, ours is all you see */
.ab-ux-f{position:relative;flex:1 1 auto;min-height:0;overflow:hidden;background:#fff;border-radius:4px;color:var(--ink);box-shadow:0 0 0 1px rgba(255,255,255,.08),0 2px 4px rgba(0,0,0,.2),0 28px 70px rgba(0,0,0,.45);cursor:pointer}
.ab-ux-f::after{content:"";position:absolute;left:0;right:0;bottom:0;height:48px;background:linear-gradient(rgba(255,255,255,0),#fff);pointer-events:none}
html:not(.js) .ab-ux-f{max-height:440px}
.ab-dm{padding:clamp(14px,2.2vh,20px) clamp(16px,1.4vw,22px)}
.ab-dm *{margin:0}
.ab-dm ul,.ab-dm ol{padding:0;list-style:none}
/* 1. the Summary: the key lines light up in the text, then rise to the top as the Summary while the detail steps back */
.ab-dm-h{font:500 clamp(17px,1.3vw,20px)/1.2 var(--disp);color:var(--ink);text-wrap:balance}
.ab-dm-sim{margin-top:10px}
.ab-dm-sim img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:var(--line)}
.ab-dm-box{display:grid;grid-template-rows:1fr;margin-top:12px;transition:grid-template-rows .9s var(--ease),margin .9s var(--ease)}
.ab-dm-boxi{min-height:0;overflow:hidden}
.ab-dm-boxi > div{padding:11px 14px 10px;background:var(--soft);border-left:3px solid var(--red)}
.ab-dm-bt{font:600 14px/1.2 var(--disp);color:var(--red)}
.ab-dm-box li{position:relative;margin-top:6px;padding-left:14px;font-size:12.5px;line-height:1.42;color:var(--text);transition:opacity .5s ease .45s,transform .7s var(--ease) .45s}
.ab-dm-box li:nth-child(2){transition-delay:.6s}
.ab-dm-box li:nth-child(3){transition-delay:.75s}
.ab-dm-box li::before{content:"";position:absolute;left:0;top:7px;width:5px;height:5px;border-radius:50%;background:var(--red)}
.ab-dm-body{margin-top:12px;font-size:12.5px;line-height:1.55;color:var(--text);opacity:.38;transition:opacity .8s ease .2s}
.ab-dm-body p + p{margin-top:8px}
.ab-dm-body mark{color:inherit;background:linear-gradient(rgba(200,16,46,.15),rgba(200,16,46,.15)) no-repeat 0 0 / 100% 100%;transition:background-size .7s var(--ease)}
.ab-dm-body p:nth-child(2) mark{transition-delay:.2s}
.ab-dm-body p:nth-child(4) mark{transition-delay:.4s}
.ab-dm-sum.is-s0 .ab-dm-box,.ab-dm-sum.is-s1 .ab-dm-box{grid-template-rows:0fr;margin-top:0}
.ab-dm-sum.is-s0 .ab-dm-box li,.ab-dm-sum.is-s1 .ab-dm-box li{opacity:0;transform:translateY(8px)}
.ab-dm-sum.is-s0 .ab-dm-body,.ab-dm-sum.is-s1 .ab-dm-body{opacity:1;margin-top:14px}
.ab-dm-sum.is-s0 mark{background-size:0 100%}
/* 2. the hubs: the hub index (markets, lines, topics), one picked, then the real hub pages in turn: a market, a line, a topic */
.ab-dm-hub{display:flex;flex-direction:column;padding:0}
.ab-dm-bar{flex:0 0 auto;display:flex;align-items:center;height:32px;padding:0 12px;background:#EFECE6;border-bottom:1px solid var(--line);font:500 11.5px/1 var(--sans);color:var(--grey);white-space:nowrap}
.ab-dm-bar > i{flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:var(--line2);box-shadow:13px 0 0 var(--line2),26px 0 0 var(--line2);margin-right:38px}
.ab-dm-u{display:inline-grid;font-weight:600;color:var(--ink);transition:opacity .4s ease}
.ab-dm-u i{grid-area:1 / 1;font-style:normal;opacity:0;transition:opacity .4s ease}
.ab-dm-hub:not([data-p]) .ab-dm-u i:nth-child(1),.ab-dm-hub[data-p="0"] .ab-dm-u i:nth-child(1),.ab-dm-hub[data-p="1"] .ab-dm-u i:nth-child(2),.ab-dm-hub[data-p="2"] .ab-dm-u i:nth-child(3){opacity:1}
.ab-dm-hub.is-s0 .ab-dm-u,.ab-dm-hub.is-s1 .ab-dm-u{opacity:0}
.ab-dm-hv{position:relative;flex:1 1 auto;min-height:0}
.ab-dm-grid{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-content:start;gap:0 10px;padding:clamp(12px,2vh,16px) clamp(14px,1.3vw,18px);opacity:0;visibility:hidden;transition:opacity .45s ease,visibility 0s .45s}
.ab-dm-hub.is-s0 .ab-dm-grid,.ab-dm-hub.is-s1 .ab-dm-grid{opacity:1;visibility:visible;transition-delay:0s}
.ab-dm-gt{grid-column:1 / -1;margin-bottom:10px!important;padding-bottom:8px;border-bottom:2px solid var(--ink);font:500 clamp(18px,1.45vw,22px)/1.1 var(--disp);color:var(--ink)}
.ab-dm-gc em{display:block;margin-bottom:6px;font:600 10.5px/1.2 var(--sans);font-style:normal;color:var(--grey)}
.ab-dm-gi{margin-bottom:10px!important;transition:opacity .5s ease,transform .6s var(--ease)}
.ab-dm-gi img{display:block;width:100%;height:auto;aspect-ratio:16 / 11;object-fit:cover;border-radius:2px;transition:box-shadow .4s ease}
.ab-dm-gi span{display:block;margin-top:5px;font:500 12.5px/1.2 var(--disp);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ab-dm-hub.is-s1 .ab-dm-gi:not(.is-pick){opacity:.28}
.ab-dm-hub.is-s1 .ab-dm-gi.is-pick{transform:scale(1.06)}
.ab-dm-hub.is-s1 .ab-dm-gi.is-pick img{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--red)}
.ab-dm-hp{position:absolute;inset:0;display:flex;flex-direction:column;opacity:0;transform:translateY(10px);transition:opacity .55s ease,transform .7s var(--ease)}
.ab-dm-hub:not([data-p]) .p0,.ab-dm-hub[data-p="0"] .p0,.ab-dm-hub[data-p="1"] .p1,.ab-dm-hub[data-p="2"] .p2{opacity:1;transform:none}
.ab-dm-hub.is-s0 .ab-dm-hp,.ab-dm-hub.is-s1 .ab-dm-hp{opacity:0;transform:translateY(10px)}
.ab-dm-hh{position:relative;flex:0 0 33%;overflow:hidden;background:var(--night)}
.ab-dm-hh img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ab-dm-hh::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(14,16,20,0) 30%,rgba(14,16,20,.78))}
.ab-dm-hh p{position:absolute;z-index:1;left:clamp(14px,1.3vw,18px);right:14px;bottom:12px;color:#fff}
.ab-dm-hh em{display:block;font:600 10.5px/1.2 var(--sans);font-style:normal;color:rgba(255,255,255,.82)}
.ab-dm-hh b{display:block;margin-top:3px;font:500 clamp(20px,1.6vw,25px)/1.05 var(--disp)}
.ab-dm-hh b::after{content:"";display:block;width:34px;height:3px;margin-top:8px;background:var(--red)}
.ab-dm-ks{margin:clamp(10px,1.6vh,14px) clamp(14px,1.3vw,18px) 2px!important;padding-left:8px;border-left:3px solid var(--red);font:500 15px/1.1 var(--disp);color:var(--ink)}
.ab-dm-hp ul{margin:0 clamp(14px,1.3vw,18px)!important}
.ab-dm-hp li{padding:6px 0;border-bottom:1px solid var(--line);font:500 13px/1.3 var(--disp);color:var(--ink)}
/* each hub page runs down its stories while it shows, to show how much each hub carries */
.ab-dm-hs{position:relative;flex:1 1 auto;min-height:0;overflow:hidden}
.ab-dm-hs::after{content:"";position:absolute;left:0;right:0;bottom:0;height:30px;background:linear-gradient(rgba(255,255,255,0),#fff);pointer-events:none}
.ab-dm-hl{padding-bottom:18px}
.ab-dm-hs::before{content:"";position:absolute;z-index:1;left:0;right:0;top:0;height:16px;background:linear-gradient(#fff,rgba(255,255,255,0));pointer-events:none}
.ab-dm-hl{padding-top:4px}
.ab-dm-hub:not(.is-s0):not(.is-s1)[data-p="0"] .p0 .ab-dm-sc,.ab-dm-hub[data-p="1"] .p1 .ab-dm-sc,.ab-dm-hub[data-p="2"] .p2 .ab-dm-sc{animation:ab-run 2s ease-in-out .45s both}
@keyframes ab-run{to{transform:translateY(var(--sy,0px))}}
/* 3. Cover Notes, told the way its own About page tells it: a wall of the market's headlines; the editors' key stories light up and
   the rest fall away; then the picks leave the wall for the edition, each summed up on one page. A caption names each step */
.ab-dm-cn{display:flex;flex-direction:column;background:#FFFDF8}
.ab-dm-ct{flex:none;display:grid;padding-bottom:9px;border-bottom:1px solid var(--line2)}
.ab-dm-ct p{grid-area:1 / 1;transition:opacity .45s ease,transform .6s var(--ease)}
.ab-dm-ct i{display:block;margin-top:5px;font:500 11px/1.2 var(--sans);font-style:normal;color:var(--grey)}
.ab-dm-c0{font:500 clamp(20px,1.55vw,24px)/1 var(--disp);color:var(--ink);opacity:0;transform:translateY(-8px)}
.ab-dm-c1{font:500 clamp(21px,1.6vw,25px)/1 var(--disp);color:var(--ink)}
.ab-dm-cn.is-s0 .ab-dm-c0,.ab-dm-cn.is-s1 .ab-dm-c0{opacity:1;transform:none}
.ab-dm-cn.is-s0 .ab-dm-c1,.ab-dm-cn.is-s1 .ab-dm-c1{opacity:0;transform:translateY(8px)}
.ab-dm-cn::after{display:none}
.ab-dm-cv{position:relative;flex:1 1 auto;min-height:0;overflow:hidden}
.ab-dm-cv::after{content:"";position:absolute;z-index:2;left:0;right:0;bottom:0;height:26px;background:linear-gradient(rgba(255,253,248,0),#FFFDF8);pointer-events:none}
/* the wall */
.ab-dm-w{position:absolute;z-index:1;inset:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px;padding-top:7px;background:#FFFDF8;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .55s ease .1s,visibility 0s .7s}
.ab-dm-cn.is-s0 .ab-dm-w,.ab-dm-cn.is-s1 .ab-dm-w{opacity:1;visibility:visible;transition:opacity .3s ease}
.ab-dm-w > div{min-width:0}
.ab-dm-cn.is-s0 .ab-dm-w > div,.ab-dm-cn.is-s1 .ab-dm-w > div{animation:ab-drift 12s linear both}
.ab-dm-w > div + div{animation-duration:15s!important}
@keyframes ab-drift{to{transform:translateY(-44px)}}
.ab-dm-w p{height:21px;margin:0;font:500 11px/21px var(--sans);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:opacity .5s ease,background-color .35s ease,box-shadow .35s ease,padding .35s var(--ease),margin .35s var(--ease)}
.ab-dm-w .d1{opacity:.62}
.ab-dm-w .d2{opacity:.42}
.ab-dm-w .d3{opacity:.25}
.ab-dm-cn.is-s1 .ab-dm-w p{opacity:.08}
.ab-dm-cn.is-s1 .ab-dm-w .is-h{opacity:1;margin:0 -6px;padding:0 6px;background-color:#F7DCE0;box-shadow:inset 2px 0 0 var(--red);font-weight:600;transition-delay:calc(var(--i) * 170ms)}
/* the edition */
.ab-dm-ed{padding:12px 0 24px}
.ab-dm-ms{display:flex;align-items:baseline;gap:8px;margin:0;padding-left:9px;box-shadow:inset 3px 0 0 var(--red);font:500 15px/1.15 var(--disp);color:var(--ink)}
.ab-dm-ms i{font:500 11px/1 var(--sans);font-style:normal;color:var(--grey)}
/* the day's lead picture opens with the paragraphs, as it sits at the top of the edition */
.ab-dm-img{display:grid;grid-template-rows:1fr;transition:grid-template-rows .85s var(--ease) 1.45s,opacity .6s ease 1.6s}
.ab-dm-img > div{min-height:0;overflow:hidden}
.ab-dm-img img{display:block;width:100%;height:auto;aspect-ratio:16 / 9;margin-top:10px;object-fit:cover}
.ab-dm-cn.is-s0 .ab-dm-img,.ab-dm-cn.is-s1 .ab-dm-img{grid-template-rows:0fr}
.ab-dm-cl{margin:4px 0 0!important;padding:0!important;list-style:none}
.ab-dm-cl li{padding:9px 0 10px;border-bottom:1px solid var(--line);transition:border-color .5s ease}
.ab-dm-cl b{display:block;font:500 14.5px/1.28 var(--disp);color:var(--ink);transform-origin:0 0}
/* the picks land as a list of headlines, then each opens into its paragraph */
.ab-dm-p{display:grid;grid-template-rows:1fr;transition:grid-template-rows .85s var(--ease) 1.45s,opacity .6s ease 1.6s}
.ab-dm-p > span{min-height:0;overflow:hidden;padding-top:4px;font-size:12.5px;line-height:1.5;color:var(--text)}
.ab-dm-p strong,.ab-art-cn-l strong{font-weight:600;color:var(--ink)}
.ab-dm-ms,.ab-dm-more{transition:opacity .5s ease .5s}
.ab-dm-more{margin:12px 0 0;font:600 12px/1.3 var(--sans);color:var(--ink)}
.ab-dm-cn.is-s0 .ab-dm-ed *,.ab-dm-cn.is-s1 .ab-dm-ed *{opacity:0;transition-delay:0s!important}
.ab-dm-cn.is-s0 .ab-dm-cl li,.ab-dm-cn.is-s1 .ab-dm-cl li{border-color:transparent;opacity:1}
.ab-dm-cn.is-s0 .ab-dm-p,.ab-dm-cn.is-s1 .ab-dm-p{grid-template-rows:0fr}
.ab-dm-cn:not(.is-s0):not(.is-s1) .ab-dm-sc{animation:ab-run 6.5s ease-in-out 3s both}
.ab-dm .ab-dm-cap{flex:none;display:grid;margin:0 calc(-1 * clamp(16px,1.4vw,22px)) calc(-1 * clamp(14px,2.2vh,20px));padding:10px clamp(16px,1.4vw,22px);background:var(--ink);color:#fff;font:600 12.5px/1.3 var(--sans)}
.ab-dm-cap span{grid-area:1 / 1;display:flex;align-items:baseline;gap:9px;opacity:0;transform:translateY(5px);transition:opacity .4s ease,transform .5s var(--ease)}
.ab-dm-cap b{flex:none;font:600 11px/1 var(--sans);color:var(--red-l)}
.ab-dm-cn.is-s0 .ab-dm-cap span:nth-child(1),.ab-dm-cn.is-s1 .ab-dm-cap span:nth-child(2),.ab-dm-cn:not(.is-s0):not(.is-s1) .ab-dm-cap span:nth-child(3){opacity:1;transform:none;transition-delay:.15s}
@keyframes ab-pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,90,110,.55)}50%{box-shadow:0 0 0 7px rgba(255,90,110,0)}}

/* 8b. how we stay independent: the newsroom and the business either side of one red line. The business touches the line
   (a red stroke runs from what it earns from to the line) and lights the rules that hold it; it never crosses */
.ab-ind{--ig:clamp(28px,4.2vw,76px);background:var(--night);color:rgba(255,255,255,.66)}
.ab-ind .ab-stage{position:relative;display:flex;flex-direction:column;justify-content:center;padding:calc(var(--headh) + 1vh) var(--gut) calc(4vh + 40px)}
.ab-ind h2{color:#fff}
.ab-ind h2 em{font-style:italic;color:#F3E9DD}
.ab-ind-head p{max-width:40em;margin-top:clamp(12px,2vh,18px);font-size:16.5px;line-height:1.55}
.ab-ind-head p b{display:block;margin-top:.45em;font:500 1.3em/1.25 var(--disp);color:#fff}
.ab-ind-split{display:grid;grid-template-columns:minmax(0,1fr) 2px minmax(0,1fr);gap:0 var(--ig);margin-top:clamp(24px,4.6vh,48px)}
.ab-ind-col h3{text-wrap:balance;padding-bottom:12px;font:600 13px/1.2 var(--sans);color:rgba(255,255,255,.5)}
.ab-ind-ed{text-align:right}
.ab-ind-col ul{list-style:none;padding:0;margin:0}
.ab-ind-col li{position:relative;padding:clamp(7px,1.15vh,11px) 0;border-top:1px solid rgba(255,255,255,.1);font:500 clamp(18px,1.6vw,25px)/1.2 var(--disp);transition:opacity .6s ease,transform .8s var(--ease),color .3s ease;transition-delay:calc(.35s + var(--i) * 90ms),calc(.35s + var(--i) * 90ms),0s}
.ab-ind-ed li{color:#fff}
.ab-ind-biz li{color:rgba(255,255,255,.5);cursor:default;outline-offset:4px}
.ab-ind-biz li::before{content:"";position:absolute;right:100%;top:50%;width:var(--ig);height:2px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.ab-ind-biz li.is-on{color:#fff}
.ab-ind-biz li.is-on::before{transform:none}
.ab-ind-line{position:relative;background:rgba(255,255,255,.12)}
.ab-ind-line i{position:absolute;inset:0;background:var(--red);transform-origin:top;transition:transform 1.5s var(--ease) .15s}
.ab-ind-rules{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px clamp(20px,2.4vw,40px);margin:clamp(24px,4.6vh,48px) 0 0;padding:clamp(14px,2.2vh,20px) 0 0;border-top:1px solid rgba(255,255,255,.16);list-style:none}
.ab-ind-rules li{font-size:15px;line-height:1.45;color:rgba(255,255,255,.72);transition:opacity .5s ease,color .3s ease,transform .7s var(--ease);transition-delay:calc(1s + var(--i) * 110ms),0s,calc(1s + var(--i) * 110ms)}
.ab-ind-rules b{display:block;margin-bottom:6px;font:600 12px/1 var(--sans);color:rgba(255,255,255,.45);transition:color .3s ease}
.ab-ind.is-pick .ab-ind-rules li{opacity:.42;transition-delay:0s}
.ab-ind.is-pick .ab-ind-rules li.is-on{opacity:1;color:#fff}
.ab-ind-rules li.is-on b{color:var(--red-l)}
.ab-ind-pol{position:absolute;left:var(--gut);right:var(--gut);bottom:clamp(14px,2.8vh,28px);margin:0;text-align:center;font-size:12px;line-height:1.9;color:rgba(255,255,255,.42)}
.ab-ind-pol a{margin:0 6px;color:rgba(255,255,255,.82);text-decoration:underline;text-decoration-color:rgba(255,255,255,.28);text-underline-offset:4px;white-space:nowrap}
.ab-ind-pol a:hover{color:#fff;text-decoration-color:#fff}
.js .ab-ind:not(.is-in) .ab-ind-line i{transform:scaleY(0)}
.js .ab-ind:not(.is-in) .ab-ind-col li,.js .ab-ind:not(.is-in) .ab-ind-rules li{opacity:0;transform:translateY(8px);transition-delay:0s}
.ab-still .ab-ind *{transition:none!important}
@media (max-width:760px){
  .ab-ind{--ig:12px}
  .ab-ind-split{grid-template-columns:minmax(0,.82fr) 2px minmax(0,1.18fr)}
  .ab-ind .ab-stage{justify-content:flex-start;padding:calc(var(--headh) + 14px) var(--gut) 70px}
  .ab-ind-head p{margin-top:8px;font-size:14px;line-height:1.5}
  .ab-ind-split{margin-top:18px}
  .ab-ind-col h3{padding-bottom:7px;font-size:11.5px}
  .ab-ind-col li{padding:6px 0;font-size:14.5px;line-height:1.22}
  .ab-ind-rules{grid-template-columns:1fr;gap:7px;margin-top:16px;padding-top:12px}
  .ab-ind-rules li{display:flex;gap:10px;font-size:13.5px;line-height:1.4}
  .ab-ind-rules b{flex:none;margin:2px 0 0;font-size:11px}
  .ab-ind-pol{bottom:10px;font-size:13px;line-height:1.75}
  .ab-ind-pol a{margin:0 4px}}
@media (max-width:760px) and (max-height:660px){
  .ab-ind-head p{display:none}
  .ab-ind-split{margin-top:14px}
  .ab-ind-col li{padding:5px 0;font-size:14px}
  .ab-ind-rules{gap:5px;margin-top:12px;padding-top:10px}
  .ab-ind-rules li{font-size:12.5px;line-height:1.35}}

/* 4. depth: a curved gallery, the way a studio shows its work. Features, interviews, data journalism and white papers stand
   round a slow-turning drum as landscape panels in their pictures' own shape, each in the form it takes (a picture, a portrait
   and their words, a chart or a figure, a report). Picking a kind takes the rest away and closes the gap; the story at the
   front is named below. Script sets the drum's size: --pw/--ph per panel, --r its radius */
.ab-dg{background:#0D0F14;color:rgba(255,255,255,.7);overflow:hidden}
.ab-dg .ab-stage{display:flex;flex-direction:column;padding:calc(var(--headh) + 2.4vh) var(--gut) 3.2vh}
.ab-dg h2{color:#fff}
.ab-dg-head{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:flex-end;gap:40px}
.ab-dg-head > div > p{max-width:34em;margin-top:10px;font-size:15px;line-height:1.5}
.ab-dg-kinds{display:flex;gap:4px 26px;flex-wrap:wrap;justify-content:flex-end;max-width:none!important;margin:0 0 4px!important}
.ab-dg-kinds button{position:relative;padding:6px 0;border:0;background:none;font:500 14.5px/1.2 var(--sans);color:rgba(255,255,255,.5);cursor:pointer;transition:color .3s}
.ab-dg-kinds button::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--red);transform:scaleX(0);transform-origin:0 50%;transition:transform .45s var(--ease)}
.ab-dg-kinds button:hover{color:#fff}
.ab-dg-kinds button.is-on{color:#fff}
.ab-dg-kinds button.is-on::after{transform:none}

/* the drum: panels face outwards, the back half is turned away; dragging works across the whole band */
.ab-dg-view{position:relative;flex:1;min-height:0;margin:clamp(10px,2vh,22px) calc(var(--gut) * -1) 0;display:grid;place-items:center;perspective:var(--pv,1400px);perspective-origin:50% 46%;touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none}
.ab-dg-view.is-drag{cursor:grabbing}
.ab-dg-ring{position:relative;width:var(--pw,480px);height:var(--ph,300px);margin:0;padding:0;list-style:none;transform-style:preserve-3d;will-change:transform}
.ab-dg-p{position:absolute;inset:0;transform:rotateY(calc(var(--i) * var(--a, 18deg))) translateZ(var(--r,1500px));backface-visibility:hidden;-webkit-backface-visibility:hidden}
/* a kind picked: script sinks the others away, closes up the rest and raises the newcomers; gone ones stay hidden */
.ab-dg-p.is-gone{opacity:0;visibility:hidden;pointer-events:none}
.ab-dg-p > a{position:relative;display:flex;flex-direction:column;height:100%;overflow:hidden;border-radius:6px;font-size:calc(var(--pw,480px) * .03);text-decoration:none;color:#fff;background:#1A1D24;box-shadow:0 30px 60px rgba(0,0,0,.45);-webkit-user-drag:none}
.ab-dg-p img{-webkit-user-drag:none;pointer-events:none}
.ab-dg-p > a::after{content:"";position:absolute;inset:0;border-radius:inherit;background:#0D0F14;opacity:var(--dim,0);pointer-events:none}
.ab-dg-p em{display:block;font:600 .74em/1.2 var(--sans);font-style:normal;letter-spacing:.01em;color:var(--red-l)}
.ab-dg-p b{display:block;font:500 1.5em/1.17 var(--disp);letter-spacing:-.005em}

/* a feature: its picture to the edges; the headline is named below, and shows over the picture only while pointed at */
.ab-dg-f > a > img,.ab-dg-d > a > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ab-dg-ov{position:absolute;left:0;right:0;bottom:0;display:block;padding:4.2em 1.3em 1.15em;background:linear-gradient(180deg,rgba(10,11,15,0),rgba(10,11,15,.74) 42%,rgba(10,11,15,.94));color:#fff;opacity:0;transform:translateY(.8em);transition:opacity .35s ease,transform .55s var(--ease)}
@media (hover:hover){.ab-dg-p > a:hover .ab-dg-ov{opacity:1;transform:none}}
.ab-dg-p > a:focus-visible .ab-dg-ov{opacity:1;transform:none}
.ab-dg-ov em{margin-bottom:.45em}
.ab-dg-ov b{max-width:24em}

/* an interview: the portrait in its ring over the city, as the story ran it, and their own words beside it */
.ab-dg-i > a{flex-direction:row;background:#F3EDE4;color:var(--ink)}
.ab-dg-pic{position:relative;flex:0 0 50%;overflow:hidden;background:#cfc8bd}
.ab-dg-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ab-dg-iq{display:flex;flex-direction:column;flex:1;min-width:0;padding:1.35em 1.4em 1.3em 1.35em}
.ab-dg-i em{margin-bottom:.85em;color:var(--red)}
.ab-dg-i q{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:7;overflow:hidden;quotes:"\201C" "\201D";font:500 1.3em/1.25 var(--disp);letter-spacing:-.005em;color:var(--ink);text-wrap:pretty}
.ab-dg-i q::before{content:open-quote;color:var(--red)}
.ab-dg-who{display:block;margin-top:auto;padding-top:.9em;font:500 .76em/1.35 var(--sans);color:var(--grey)}
.ab-dg-who strong{display:block;font-weight:600;color:var(--ink)}

/* data journalism: the chart from the story beside its headline, or its picture with the headline, like a feature */

/* a white paper: the report's picture, and its cover beside it */
.ab-dg-w > a{flex-direction:row;background:#14233A}
.ab-dg-w > a > img{flex:0 0 50%;width:50%;height:100%;object-fit:cover}
.ab-dg-wc{display:flex;flex-direction:column;flex:1;min-width:0;padding:1.3em 1.35em 1.25em}
.ab-dg-wc > img{width:6.2em;height:auto;margin-bottom:auto}
.ab-dg-wc em{margin:1.1em 0 .5em;color:rgba(255,255,255,.66)}
.ab-dg-w b{font-size:1.36em}
.ab-dg-free{margin-top:.9em;font:600 .76em/1 var(--sans);color:var(--red-l)}

/* the story at the front, named in full, with the way round */
/* script lifts it (--lift) so it sits close under the drum */
.ab-dg-foot{position:relative;z-index:2;translate:0 calc(var(--lift,0px) * -1);display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:24px;max-width:780px;width:100%;margin:clamp(8px,1.6vh,18px) auto 0}
.ab-dg-cap{display:block;min-height:5.2em;text-align:center;text-decoration:none;color:#fff;transition:opacity .35s ease}
.ab-dg-cap.is-out{opacity:0}
.ab-dg-cap em{display:block;font:600 12.5px/1.3 var(--sans);font-style:normal;color:var(--red-l);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* the headline always takes two lines' room, so a short one never lets the drum above shift */
.ab-dg-cap b{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;height:2.5em;margin-top:5px;font:500 clamp(18px,1.5vw,23px)/1.25 var(--disp)}
.ab-dg-cap span{display:inline-block;margin-top:6px;font:500 13px/1.3 var(--sans);color:rgba(255,255,255,.62);text-decoration:underline;text-decoration-color:rgba(255,255,255,.3);text-underline-offset:4px}
.ab-dg-cap:hover span{color:#fff;text-decoration-color:#fff}
.ab-dg-nav{position:relative;width:44px;height:44px;border:1px solid rgba(255,255,255,.22);border-radius:50%;background:none;cursor:pointer;transition:border-color .25s,background-color .25s,opacity .25s}
.ab-dg-nav:hover{border-color:#fff;background:rgba(255,255,255,.06)}
.ab-dg-nav:disabled{opacity:.3;cursor:default;border-color:rgba(255,255,255,.22);background:none}
.ab-dg-nav i{position:absolute;left:50%;top:50%;width:9px;height:9px;margin:-5px 0 0 -3px;border:solid #fff;border-width:0 0 1.5px 1.5px;transform:rotate(45deg)}
.ab-dg-nav[data-d="1"] i{margin-left:-7px;transform:rotate(-135deg)}

/* arrival: the drum swings in from the side as it fades up */
.ab-dg-head,.ab-dg-foot{transition:opacity .7s ease,transform .9s var(--ease)}
.ab-dg-view{transition:opacity 1s ease}
.js .ab-dg:not(.is-in) .ab-dg-head,.js .ab-dg:not(.is-in) .ab-dg-foot{opacity:0;transform:translateY(14px)}
.js .ab-dg:not(.is-in) .ab-dg-view{opacity:0}
.ab-still .ab-dg *{transition:none!important}

@media (max-height:800px) and (min-width:761px){
  .ab-dg-head > div > p{font-size:14px;margin-top:6px}
  .ab-dg-cap{min-height:4.4em}}
@media (max-width:760px){
  .ab-dg .ab-stage{padding:calc(var(--headh) + 12px) var(--gut) 14px}
  .ab-dg-head{display:block}
  .ab-dg-head > div > p{margin-top:6px;font-size:14px}
  .ab-dg-kinds{justify-content:flex-start;gap:2px 16px;margin-top:10px!important}
  .ab-dg-kinds button{font-size:13px}
  .ab-dg-kinds button span{display:none}
  .ab-dg-view{margin-top:6px}
  .ab-dg-p > a{font-size:calc(var(--pw,300px) * .044)}
  /* small panels keep to the picture; the words go in the caption below */
  .ab-dg-iq,.ab-dg-wc > img,.ab-dg-free{display:none}
  .ab-dg-pic{flex:1}
  .ab-dg-w > a > img{position:absolute;inset:0;width:100%}
  .ab-dg-wc{position:relative;margin-top:auto;padding:3.4em 1.1em 1em;background:linear-gradient(180deg,rgba(20,35,58,0),rgba(20,35,58,.9) 45%,#14233A)}
  .ab-dg-wc em{margin-top:0}
  .ab-dg-ov{padding:3em 1.1em 1em}
  .ab-dg-foot{gap:12px;margin-top:6px}
  .ab-dg-cap{min-height:4.6em}
  .ab-dg-cap b{font-size:16px;-webkit-line-clamp:3;height:3.75em}
  .ab-dg-cap.is-q b{font-size:15px;line-height:1.333;-webkit-line-clamp:3;height:4em}
  .ab-dg-cap em{font-size:11.5px}
  .ab-dg-cap span{font-size:12px}
  .ab-dg-nav{width:38px;height:38px}}
@media (max-width:760px) and (max-height:660px){
  .ab-dg-head > div > p{font-size:13px}
  .ab-dg-cap span{display:none}
  .ab-dg-cap{min-height:3.4em}}
/* cover tiles come in as they arrive, so a slow connection never shows a broken grid */
.js .ab-lz img{opacity:0;transition:opacity .6s ease}
.js .ab-lz img.is-ld{opacity:1}

/* 6. the newsroom */
.ab-news{display:flex;flex-direction:column;justify-content:center;min-height:var(--vh);background:var(--soft);padding:calc(var(--headh) + 3vh) var(--gut) 5vh}
.ab-news-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;padding-bottom:22px;border-bottom:2px solid var(--ink)}
.ab-news-head h2{max-width:12em}
.ab-news-head p{max-width:27em;font-size:16px;text-align:right}
.ab-news-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(22px,3.6vh,34px) clamp(32px,4vw,64px);padding:clamp(22px,3.6vh,34px) 0 40px}
.ab-person b{display:block;font:500 22px/1.2 var(--disp);color:var(--ink)}
.ab-person i{display:block;margin-top:4px;font:600 13px/1.3 var(--sans);font-style:normal;color:var(--red)}
.ab-person span{display:block;margin-top:8px;font-size:14.5px;line-height:1.5;color:var(--text)}
.ab-news-head a{font-weight:600;white-space:nowrap;text-underline-offset:4px}
.ab-news-grid{padding-bottom:0}
.ab-news-swipe{display:none;margin-top:12px;font-size:13px;color:var(--grey)}
html:not(.js) .ab-news-swipe{display:none!important}

.ab-btn{display:inline-flex;align-items:center;justify-content:center;height:52px;padding:0 28px;border-radius:3px;background:var(--red);color:#fff!important;font:600 16px/1 var(--sans);text-decoration:none;transition:background .2s,color .2s}
.ab-btn:hover{background:var(--red-d)}
.ab-btn-o{background:transparent;color:var(--ink)!important;box-shadow:inset 0 0 0 1.5px var(--ink)}
.ab-btn-o:hover{background:var(--ink);color:#fff!important}
/* 9. where to find us: the ways in on the left; on the right, the thing itself (a page, an edition, an email, the app,
   the awards), one after another until you point at one */
.ab-pub{background:var(--paper);display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:40px clamp(40px,5vw,96px);align-items:center;min-height:var(--vh);padding:calc(var(--headh) + 3vh) var(--gut) 5vh}
.ab-pub-head p{margin-top:16px;max-width:22em;font-size:16px}
.ab-pub-list{margin:clamp(20px,4vh,36px) 0 0;padding:0;list-style:none;border-top:2px solid var(--ink)}
.ab-pub-list li{position:relative;border-bottom:1px solid var(--line2)}
.ab-pub-list li::before{content:"";position:absolute;left:-18px;top:14px;bottom:14px;width:3px;background:var(--red);transform:scaleY(0);transition:transform .45s var(--ease)}
.ab-pub.has-stage .ab-pub-list li.is-on::before{transform:scaleY(1)}
.ab-pub-list a{position:relative;display:block;padding:clamp(12px,2vh,18px) 34px clamp(12px,2vh,18px) 0;text-decoration:none;color:var(--text)}
.ab-pub-list a::after{content:"→";position:absolute;right:4px;top:50%;margin-top:-9px;font:500 18px/1 var(--sans);color:var(--red);transition:transform .4s var(--ease)}
.ab-pub-list a:hover::after{transform:translateX(5px)}
.ab-pub-list b{display:block;font:500 clamp(20px,1.6vw,25px)/1.2 var(--disp);color:var(--ink);transition:color .3s}
.ab-pub-list span{display:block;margin-top:4px;font-size:15px;line-height:1.45}
.ab-pub-list a:hover b,.ab-pub.has-stage .ab-pub-list li.is-on b{color:var(--red)}
.ab-pub-stage{display:none;position:relative;height:min(70vh,620px);min-height:0;grid-template:minmax(0,1fr) / minmax(0,1fr);place-items:center}
.ab-pub.has-stage .ab-pub-stage{display:grid}
.ab-art{grid-area:1 / 1;max-width:100%;max-height:100%;overflow:hidden;opacity:0;transform:translateY(16px) scale(.985);transition:opacity .5s ease,transform .8s var(--ease)}
.ab-art.is-on{opacity:1;transform:none}
.ab-art-site,.ab-art-mail{width:min(100%,540px);background:#fff;border-radius:8px;box-shadow:0 1px 2px rgba(20,22,26,.06),0 24px 60px rgba(20,22,26,.14)}
.ab-art-bar{display:flex;align-items:center;gap:6px;height:34px;padding:0 12px;background:#EFECE6;border-bottom:1px solid var(--line)}
.ab-art-bar i{width:9px;height:9px;border-radius:50%;background:var(--line2)}
.ab-art-bar span{flex:1;max-width:240px;height:22px;margin:0 auto;border-radius:11px;background:#fff;font:500 11.5px/22px var(--sans);color:var(--grey);text-align:center}
.ab-art-page{padding:16px 20px 18px}
.ab-art-mast{display:flex;justify-content:space-between;align-items:center;padding-bottom:10px;border-bottom:2px solid var(--ink)}
.ab-art-mast img,.ab-art-mail-h img{width:96px;height:auto}
.ab-art-today{font:500 11px/1 var(--sans);color:var(--grey)}
.ab-art-lead{display:grid;grid-template-columns:1.05fr 1fr;gap:14px;align-items:start;margin-top:14px}
.ab-art-lead img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.ab-art em{display:block;margin-bottom:3px;font:600 10.5px/1.3 var(--sans);font-style:normal;color:var(--red)}
.ab-art-lead b{display:block;font:500 17px/1.25 var(--disp);color:var(--ink)}
.ab-art-latest{margin:14px 0 0;padding:0;list-style:none}
.ab-art-latest li{padding:8px 0;border-top:1px solid var(--line);font:500 13.5px/1.3 var(--disp);color:var(--ink)}
.ab-art-cn{width:min(100%,500px);padding:24px 28px 16px;background:#FFFDF8;border-top:4px solid var(--red);box-shadow:0 1px 2px rgba(20,22,26,.06),0 24px 60px rgba(20,22,26,.14)}
.ab-art-cn-h{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;padding-bottom:12px;border-bottom:1px solid var(--line2)}
.ab-art-cn-t{font:500 32px/1 var(--disp);color:var(--ink)}
.ab-art-cn-d{font:600 13px/1.3 var(--sans);color:var(--ink);text-align:right}
.ab-art-cn-d i{display:block;font-style:normal;font-weight:500;font-size:12px;color:var(--grey)}
.ab-art-cn-ms{display:flex;align-items:baseline;gap:8px;margin-top:16px;padding-left:10px;border-left:3px solid var(--ink);font:600 15px/1.1 var(--sans);color:var(--ink)}
.ab-art-cn-ms i{font-style:normal;font-weight:500;font-size:12px;color:var(--grey)}
.ab-art-cn-l{margin:6px 0 0;padding:0;list-style:none}
.ab-art-cn-l li{padding:11px 0;border-bottom:1px solid var(--line)}
.ab-art-cn-l b{display:block;font:600 14px/1.35 var(--sans);color:var(--ink)}
.ab-art-cn-l li:first-child b{font:500 18px/1.25 var(--disp)}
.ab-art-cn-l span{display:block;margin-top:6px;font-size:13.5px;line-height:1.55;color:var(--text)}
@media (max-height:800px){.ab-art-cn-l li:nth-child(4){display:none}}
.ab-art-cn-f{padding-top:11px;font-size:12px;line-height:1.3;color:var(--grey)}
.ab-art-mail-h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 20px;border-bottom:3px solid var(--red)}
.ab-art-mail-h b{display:block;font:600 13px/1.3 var(--sans);color:var(--ink);text-align:right}
.ab-art-mail-h i{display:block;font:400 normal 11.5px/1.3 var(--sans);color:var(--grey);text-align:right}
.ab-art-mail-b{padding:18px 20px 16px}
.ab-art-mail-lead{font:500 22px/1.22 var(--disp);color:var(--ink)}
.ab-art-mail-l{margin:14px 0 0;padding:0;list-style:none}
.ab-art-mail-l li{position:relative;padding:8px 0 8px 16px;border-top:1px solid var(--line);font:400 13.5px/1.35 var(--sans);color:var(--text)}
.ab-art-mail-l li::before{content:"";position:absolute;left:0;top:15px;width:6px;height:6px;border-radius:50%;background:var(--red)}
.ab-art-app{height:100%;display:flex;align-items:center;justify-content:center;overflow:visible}
.ab-art-phone{height:100%;max-height:600px;aspect-ratio:760 / 1651;border:9px solid var(--ink);border-radius:38px;overflow:hidden;background:#fff;box-shadow:0 30px 70px rgba(20,22,26,.2)}
.ab-art-phone img{width:100%;height:100%;object-fit:cover;object-position:top}
/* the awards: a solid card, like the others, with the spotlight photograph filling it */
.ab-art-aw{position:relative;width:min(100%,540px);height:min(100%,560px);max-height:100%;background:#140A10;border-radius:8px;box-shadow:0 1px 2px rgba(20,22,26,.06),0 24px 60px rgba(20,22,26,.18)}
.ab-art-aw-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ab-art-aw::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 50%,rgba(20,10,16,.72) 0,rgba(20,10,16,.5) 70%,rgba(20,10,16,.4) 100%);pointer-events:none}
.ab-art-aw-in{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(14px,2.6vh,22px);padding:8% 12%}
.ab-art-aw-in img{width:min(100%,240px);height:auto}
.ab-art-aw-in i{display:block;width:44px;height:1px;background:rgba(255,255,255,.45)}
.ab-art-aw-s{max-width:23em;margin-top:-6px;font:400 13px/1.45 var(--sans);color:rgba(255,255,255,.78);text-align:center}
.ab-art-aw-f{margin-top:6px;padding-top:12px;border-top:1px solid rgba(255,255,255,.2);font:600 13.5px/1.4 var(--sans);color:#fff;text-align:center}

/* 9. get in touch: three doors, and who we are underneath */
.ab-doors{display:flex;flex-direction:column;min-height:var(--vh);background:var(--night);color:rgba(255,255,255,.74)}
.ab-doors h2{color:#fff}
.ab-doors-in{flex:1;display:flex;flex-direction:column;justify-content:center;padding:calc(var(--headh) + 3vh) var(--gut) 5vh}
.ab-doors h2{font-size:clamp(34px,3.6vw,58px)}
.ab-doors-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px clamp(32px,4vw,64px);margin-top:clamp(28px,5vh,48px)}
.ab-doors-row > div{padding-top:20px;border-top:3px solid rgba(255,255,255,.85)}
.ab-doors-row > div:first-child{border-top-color:var(--red)}
.ab-doors h3{font:500 clamp(22px,1.8vw,28px)/1.15 var(--disp);color:#fff}
.ab-doors-row p{margin-top:10px;font-size:15.5px}
.ab-doors .ab-doors-a{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:16px}
.ab-doors-a a{font-weight:600;color:#fff;text-underline-offset:4px;text-decoration-color:var(--red-l);text-decoration-thickness:1.5px}

/* footer: who owns us, how to reach us */
.ab-foot{padding:clamp(22px,4vh,36px) var(--gut);border-top:1px solid rgba(255,255,255,.14);font-size:14px;color:rgba(255,255,255,.55)}
.ab-foot-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px clamp(32px,5vw,80px)}
.ab-foot-grid b{color:#fff}
.ab-foot-grid a{color:#fff;text-underline-offset:3px}
.ab-foot-pol{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:clamp(16px,3vh,28px);padding-top:clamp(12px,2vh,18px);border-top:1px solid rgba(255,255,255,.1);font-size:13.5px}
.ab-foot-pol a{color:rgba(255,255,255,.82);text-decoration:none}
.ab-foot-pol a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.ab-foot-note{margin-top:clamp(10px,1.8vh,16px);font-size:12.5px}

@media (max-width:1100px){
  .ab-head-date{display:none}}
/* short desktop screens */
@media (min-width:761px) and (max-height:800px){
  .ab-pub-list a{padding:10px 34px 10px 0}
  .ab-pub-list span{font-size:14px;margin-top:2px}
  .ab-wp-s{display:none}
  .ab-dt-more a{padding:7px 0}
  .ab-dt-more li:nth-child(n+5){display:none}
  .ab-iv-h{display:none}
  .ab-iv blockquote{font-size:16px;margin-bottom:4px}
  .ab-mkt-list li{padding:7px 0}
  .ab-mkt-list a{font-size:15.5px}
  .ab-mkt-hub{height:42px;margin-top:12px}
  .ab-lede{font-size:16.5px;line-height:1.5}
  .ab-cover h1{font-size:clamp(40px,4.3vw,62px)}
  .ab-sum{font-size:clamp(26px,2.4vw,36px)}
  .ab-cover-meta dd{font-size:26px}
  .ab-ux-head p{font-size:15px}
  .ab-ux-c > p{font-size:14px;line-height:1.45}
  .ab-ux-c h3{margin-top:20px;font-size:21px}}

/* desktop screens up to 900px tall (1536 x 864, 1440 x 900): the cover's words and figures fit without scrolling */
@media (min-width:761px) and (max-height:900px){
  .ab-cover-text{padding-bottom:2vh}
  .ab-cover-meta{margin-top:clamp(18px,3vh,32px)}}

/* laptops after browser chrome (1366 x 657, 1280 x 632): the sum keeps its line, the note under it goes, so the figures stay on the cover */
@media (min-width:761px) and (max-height:700px){
  .ab-cover-text{padding-top:calc(var(--headh) + 1vh)}
  .ab-cover h1{font-size:clamp(36px,3.9vw,54px)}
  .ab-lede{margin-top:14px}
  .ab-sum-k{display:none}
  .ab-cover-meta{margin-top:16px;padding-top:14px}
  .ab-news,.ab-pub{padding-top:calc(var(--headh) + 1vh);padding-bottom:2vh}
  .ab-pub-list{margin-top:14px}
  .ab-pub-list a{padding:6px 34px 6px 0}}

/* phones */
@media (max-width:760px){
  body.ab{font-size:16px}
  .ab-logo img{width:112px}
  .ab-head-btn{height:36px;padding:0 16px;font-size:13px}
  .ab h2{font-size:28px}
  .ab-sec-head{display:block}
  .ab-sec-head p{text-align:left;margin-top:8px;font-size:15px}
  .ab-cover{display:flex;flex-direction:column;min-height:var(--vh)}
  .ab-cover-text{padding:calc(var(--headh) + 14px) var(--gut) 0}
  .ab-cover h1{font-size:clamp(32px,9vw,38px)}
  .ab-lede{font-size:15.5px;margin-top:12px}
  .ab-sum{margin-top:16px;font-size:clamp(21px,6vw,24px)}
  .ab-sum-k{margin-top:8px;font-size:13.5px}
  .ab-cover-meta{display:none}
  .ab-cover-fig{flex:1;min-height:170px;margin-top:20px}
  .ab-cover-fig::before{background:linear-gradient(180deg,var(--night) 0,rgba(14,15,18,0) 18%),linear-gradient(0deg,rgba(14,15,18,.9) 0,rgba(14,15,18,0) 60%)}
  .ab-cover-cap a{font-size:16px}
  .ab-cover-pips{display:none}

  .ab-readers .ab-stage{padding:calc(var(--headh) + 12px) var(--gut) 14px}
  .ab .ab-rd-h{margin-top:8px;font-size:clamp(19px,5.4vw,22px);line-height:1.2}
  .ab-chart{margin:52px 0 30px;min-height:120px}
  .ab-chart-end{display:none}
  .ab-chart-mark,.ab-chart-end{font-size:11.5px}
  .ab-chart-mark b,.ab-chart-end b{font-size:21px;margin-bottom:3px}
  .ab-chart-start{font-size:12px}
  .ab-rd-foot{display:block;padding-top:10px;font-size:14px}
  .ab-rd-foot p{margin-top:4px}
  .ab-rd-foot b{font-size:19px}
  .ab-rd-src{margin-top:6px!important;font-size:11.5px}

  .ab-mkt .ab-stage{display:flex;flex-direction:column;align-items:stretch;gap:0;padding:calc(var(--headh) + 10px) var(--gut) 14px}
  .ab-mkt-text{display:contents}
  .ab-mkt h2{order:1}
  .ab-mkt-lede{display:none}
  .ab-map{order:3;flex:1 1 0;min-height:150px;margin:6px calc(-1 * var(--gut)) 0;padding:0 8px}
  .ab-mkt-pick{order:4}
  .ab-mkt-panel{order:5}
  .ab-mkt-links{order:6}
  .ab-node-l{display:none}
  .ab-mkt-pick{display:flex;gap:2px 18px;margin:0 calc(-1 * var(--gut));padding:0 var(--gut);overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity}
  .ab-mkt-pick::-webkit-scrollbar{display:none}
  .ab-mkt-pick button{all:unset;box-sizing:border-box;flex:none;position:relative;padding:11px 0;cursor:pointer;scroll-snap-align:center;font:500 14.5px/1.2 var(--sans);color:rgba(255,255,255,.6)}
  .ab-mkt-pick button::after{content:"";position:absolute;left:0;right:0;bottom:5px;height:2px;background:var(--red-l);transform:scaleX(0);transform-origin:0 50%;transition:transform .3s var(--ease)}
  .ab-mkt-pick button[aria-pressed="true"]{color:#fff}
  .ab-mkt-pick button[aria-pressed="true"]::after{transform:scaleX(1)}
  .ab-mkt-panel{margin-top:4px;padding-top:10px;border-top-width:2px}
  .ab-mkt-name b{font-size:21px}
  .ab-mkt-list{margin-top:6px}
  .ab-mkt-list li{padding:7px 0}
  .ab-mkt-list a{font-size:15px}
  .ab-mkt-list time{font-size:12px}
  .ab-mkt-hub{height:40px;margin-top:8px;padding:0 18px;font-size:14px}
  .ab-mkt-list li:nth-child(n+4){display:none}

  .ab-types .ab-stage{padding:calc(var(--headh) + 8px) var(--gut) 14px}
  .ab-dt-tabs{gap:20px;margin:0 calc(-1 * var(--gut)) 0;padding:0 var(--gut);overflow-x:auto;scrollbar-width:none}
  .ab-dt-tabs::-webkit-scrollbar{display:none}
  .ab-dt-tabs button{flex:none;padding:12px 0 9px}
  .ab-dt-tabs b{font-size:16.5px}
  .ab-dt-panels{margin-top:14px}
  .ab-dt-p{display:flex;flex-direction:column;gap:12px;container-type:normal}
  .ab-dt-lead{max-width:none}
  .ab-dt-lead b{margin-top:10px;font-size:19px}
  .ab-dt-more{border-top-width:1px}
  .ab-dt-more a{grid-template-columns:104px minmax(0,1fr);gap:12px;padding:9px 0}
  .ab-dt-more b{font-size:14.5px}
  .ab-dt-more li:nth-child(n+3){display:none}
  .ab-lines .ab-sec-head p,.ab-types .ab-sec-head p{display:none}
  .ab-iv{flex:0 0 78vw;scroll-snap-align:start}
  .ab-iv blockquote{font-size:18px}
  .ab-dt-int{flex-direction:row;align-items:flex-start;margin:0 calc(-1 * var(--gut));padding:0 var(--gut);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 var(--gut);scrollbar-width:none;overscroll-behavior-x:contain}
  .ab-dt-int::-webkit-scrollbar{display:none}
  .ab-ch{height:auto}
  .ab-ch-card{flex:none;padding:12px 14px 10px}
  .ab-ch-t b{font-size:14px}
  .ab-ch-t span{font-size:12px}
  .ab-ch-g{flex:none;height:max(170px,calc(var(--vh) - 440px));min-height:0;margin-top:8px}
  .ab-ch-c{margin-top:8px}
  .ab-ch-c b{font-size:15.5px}
  .ab-ch-c span{font-size:12px}
  .ab-dt-data .ab-dt-more{display:none}
  .ab-wp{max-width:none;max-height:none}
  .ab-wp-in{padding:14px 16px 12px}
  .ab-wp-t{font-size:20px}
  .ab-wp-s{display:none}
  .ab-wp-n b{font-size:38px}
  .ab-dt-wp .ab-dt-more li:nth-child(n+2){display:none}

  /* phones: the same dial; only the family showing is named under the ruler */
  .ab-dl .ab-stage{padding:calc(var(--headh) + 10px) var(--gut) 16px}
  .ab-dl-now{gap:14px}
  .ab-dl-its{max-width:none}
  .ab-dl-it b{font-size:44px}
  .ab-dl-hd{margin-top:10px;font-size:16px;-webkit-line-clamp:3}
  .ab-dl-go{font-size:12px}
  .ab-dl-navs{flex-direction:column;gap:8px}
  .ab-dl-nav{width:38px;height:38px}
  .ab-dl-rule{margin-top:34px}
  .ab-dl-tk span{font-size:12px;bottom:40px}
  .ab-dl-fams button{padding:8px 0 0 6px;font-size:17px;color:transparent;overflow:visible;text-overflow:clip}
  .ab-dl-fams button.is-on{color:#fff}
  .ab-dl-fams button:last-child{direction:rtl;text-align:right;padding:8px 0 0}

  .ab-ux .ab-stage{padding:calc(var(--headh) + 10px) var(--gut) 14px}
  .ab-ux-head{display:block}
  .ab-ux-head p{margin-top:6px;text-align:left;font-size:14px}
  .ab-ux-row{display:flex;gap:12px;margin:14px calc(-1 * var(--gut)) 0;padding:0 var(--gut);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 var(--gut);scrollbar-width:none;overscroll-behavior-x:contain}
  .ab-ux-row::-webkit-scrollbar{display:none}
  .ab-ux-c{display:flex;flex-direction:column;flex:0 0 82vw;scroll-snap-align:start}
  .ab-ux-c h3{margin-top:16px;font-size:20px}
  .ab-ux-c > p{font-size:13.5px;line-height:1.45}

  .ab-pub{display:flex;flex-direction:column;justify-content:center;align-items:stretch;gap:0;padding:calc(var(--headh) + 10px) var(--gut) 16px}
  .ab-pub-side{display:contents}
  .ab-pub-head{order:1}
  .ab-pub-head p{margin-top:8px;font-size:15px}
  .ab-pub-stage{order:2;flex:1 1 0;height:auto;min-height:150px;margin:14px 0 4px;overflow:hidden}
  .ab-pub-list{order:3;margin-top:10px}
  .ab-pub-list li::before{left:-12px;top:10px;bottom:10px}
  .ab-pub-list a{padding:10px 28px 10px 0}
  .ab-pub-list b{font-size:18px}
  .ab-pub.has-stage .ab-pub-list span{display:none}
  .ab-pub-list span{font-size:14px}
  .ab-art-site,.ab-art-mail,.ab-art-cn,.ab-art-aw{width:100%}
  .ab-art-page{padding:12px 14px}
  .ab-art-lead b{font-size:15px}
  .ab-art-cn{padding:16px 18px 10px}
  .ab-art-cn-h{padding-bottom:9px}
  .ab-art-cn-t{font-size:24px}
  .ab-art-cn-d{font-size:11.5px}
  .ab-art-cn-d i{font-size:11px}
  .ab-art-cn-ms{margin-top:11px;font-size:13.5px}
  .ab-art-cn-l li:nth-child(n+3){display:none}
  .ab-art-cn-l li{padding:9px 0}
  .ab-art-cn-l li:first-child b{font-size:15.5px}
  .ab-art-cn-l b{font-size:13px}
  .ab-art-cn-l span{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden;font-size:12.5px}
  .ab-art-cn-f{padding-top:8px;font-size:11px}
  .ab-art-mail-lead{font-size:18px}
  .ab-art-aw-in{gap:12px;padding:10% 14%}
  .ab-art-aw-in img{width:min(62%,190px)}
  .ab-art-aw-f{margin-top:2px;padding-top:8px;font-size:12.5px}
  .ab-art-aw-s{display:none}
  .ab-art-phone{border-width:6px;border-radius:24px}
  .ab-doors-in{flex:none;padding:calc(var(--headh) + 16px) var(--gut) 36px}
  .ab-doors h2{font-size:32px}
  .ab-doors-row{grid-template-columns:1fr;gap:26px}

  .ab-news{padding:calc(var(--headh) + 12px) var(--gut) 24px}
  .ab-news-head{display:block}
  .ab-news-head p{text-align:left;margin-top:10px;font-size:15px}
  .ab-news-grid{display:flex;gap:12px;margin:0 calc(-1 * var(--gut));padding:22px var(--gut) 4px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 var(--gut);scrollbar-width:none}
  .ab-news-grid::-webkit-scrollbar{display:none}
  .ab-person{flex:0 0 74vw;scroll-snap-align:start;padding:16px 16px 18px;background:var(--paper);border-top:3px solid var(--ink)}
  .ab-person:first-child{border-top-color:var(--red)}
  .ab-person b{font-size:20px}
  .ab-news-swipe{display:block}
  .ab-dots{right:0;gap:0}
  .ab-dots a{width:26px;height:26px;padding-right:2px}
  .ab-dots i{width:3px;height:12px;border-radius:2px;transition:height .45s var(--ease),opacity .3s}
  .ab-dots a[aria-current="true"] i{width:3px;height:22px}

  .ab-foot-grid{grid-template-columns:1fr;gap:12px}}
@media (max-width:760px) and (max-height:660px){
  .ab-lede{display:none}
  .ab-sum{margin-top:14px}
  .ab-cover-fig{min-height:140px}
  .ab-ux-c > p{display:none}
  .ab-ux-head p{font-size:13px;line-height:1.45}
  .ab-dm-sim{display:none}
  .ab-ux-c h3{margin-top:14px;font-size:18px}
  .ab-ch-c span{display:none}
  .ab-mkt-list li:nth-child(n+3){display:none}
  .ab .ab-rd-h{font-size:18px}
  .ab-dt-more li:nth-child(n+2),.ab-dt-wp .ab-dt-more{display:none}
  .ab-chart-start{display:none}
  .ab-dl-it b{font-size:38px}
  .ab-dl-hd{font-size:15px;-webkit-line-clamp:2}
  .ab-pub-head p{display:none}
  .ab-pub-list span{font-size:13.5px;line-height:1.4}
  .ab-pub-list a{padding:8px 28px 8px 0}
  .ab-mkt-lede{display:none}
  .ab-art-aw-s{display:none}}

/* reduced motion: still one page at a time, nothing drifts, nothing hidden; a page turn is a short fade */
.ab-still .ab-dl-now,.ab-still .ab-dl-fams{opacity:1!important;transform:none!important}
.ab-still .ab-dl-tk::before{transform:none!important}
.ab-still .ab-dl-bg img{transition:opacity .4s ease!important;transform:none!important}
.ab-still .ab-node-l{opacity:1!important}
.ab-still .ab-cover-imgs img.is-on{animation:none}
@media (prefers-reduced-motion:reduce){
  .ab *{transition:none!important;animation:none!important}
  .js .ab-deck.is-fade{animation:ab-fade .22s ease!important}
  @keyframes ab-fade{from{opacity:.35}to{opacity:1}}}

/* 2. why we exist: Hong Kong beside the words, wiping in from the right and settling */

@media (min-width:761px) and (max-height:800px){
  .ab-sum{margin-top:18px;line-height:1.18;font-size:clamp(22px,2.1vw,32px)}.ab-sum-3{margin-top:.34em;padding-top:.42em;padding-bottom:.12em}.ab-sum-k{margin-top:14px}}

/* ---------- the reading page: a blueprint behind the three tools ---------- */
.ab-ux-bg{position:absolute;inset:0;pointer-events:none;overflow:hidden}


/* p. the blueprint: a drafting grid on blueprint blue; the playing demo is measured on a layer above the page */
.ab-ux.v-p{background:#0F2E57}

/* ---------- Depth on a nautical chart in blue-grey: depth bands, contours, soundings, a chart border; still, so the drum keeps the eye ---------- */
.ab-dg{background:#0A1626;color:rgba(255,255,255,.7)}
.ab-dg-sea{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.ab-dg .ab-stage{position:relative;z-index:1}
.ab-dg-p > a::after{background:#0A1626}
.ab-dg-cap b{text-wrap:balance}

/* ---------- Independent journalism on a guilloche seal, centred on the red line ---------- */
.ab-ind-seal{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.ab-ind .ab-stage{z-index:1}

/* ---------- Why we exist (default): Hong Kong in pieces that lock together as the answer inks in ---------- */

/* newsroom cards link to each person's author page */
a.ab-person{display:block;color:inherit;text-decoration:none}
a.ab-person b{transition:color .2s}
a.ab-person b::after{content:" \2192";font:400 .8em/1 var(--sans);color:var(--red);opacity:0;transition:opacity .2s}
a.ab-person:hover b,a.ab-person:focus-visible b{color:var(--red)}
a.ab-person:hover b::after,a.ab-person:focus-visible b::after{opacity:1}
a.ab-person:focus-visible{outline:2px solid var(--red);outline-offset:6px}

/* the drawing board's pencil sketches, above the blueprint grid and below the demos */
.ab-ux-sk{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
/* WordPress: an editor's toolbar sits above the fixed header */
body.admin-bar .ab-head{margin-top:var(--wp-admin--admin-bar--height,32px)}

/* Phones: the name as a sum is one line, Insurance + Reinsurance = (Re)in Asia, sized to fit the widest moment of its animation */
@media (max-width:760px){
  .ab .ab-sum{flex-direction:row;align-items:baseline;gap:.42em;white-space:nowrap;font-size:clamp(11px,4.1vw,18px)}
  .ab-sum-r{grid-template-columns:auto auto;column-gap:.3em}
  .ab-sum-1 i{display:none}
  .ab .ab-sum-3{margin-top:0;padding:0}
  .ab-sum-3::before{display:none}
}

/* bigger places to tap (about 40px) round small links and controls, without changing how they look */
.ab-ind-pol a,.ab-news-head a,.ab-doors-a a,.ab-foot-grid a,.ab-foot-pol a{position:relative}
.ab-ind-pol a::before,.ab-news-head a::before,.ab-foot-grid a::before,.ab-foot-pol a::before{content:"";position:absolute;inset:-12px -4px}
.ab-doors-a a::before{content:"";position:absolute;inset:-8px -6px}
.ab-node::before{content:"";position:absolute;left:50%;top:50%;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%}
.ab-dl-tk::after{content:"";position:absolute;inset:-4px 0}

/* phones: the strips that swipe sideways stop at the right gutter, clear of the page marks */
@media (max-width:760px){
  .ab-mkt-pick,.ab-dt-tabs,.ab-dt-int,.ab-ux-row,.ab-news-grid{margin-right:0;padding-right:0}
  .ab-dl-fams button{position:relative}
  .ab-dl-fams button::after{content:"";position:absolute;inset:-10px 0 0}}