@font-face{font-family:Geist;src:url(/geist.woff2) format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:"Instrument Serif";font-style:italic;font-weight:400;src:url(/instrument-serif-italic.woff2) format('woff2');font-display:swap}
:root{--bg:#05061A;--panel:#0B0E2B;--line:rgba(169,193,255,.14);--white:#fff;--ice:#A9C1FF;--sky:#5085EA;--sky-hi:#6a98ef;--muted:rgba(169,193,255,.62);--gutter:clamp(20px,5vw,72px)}
/* the site's one scale (Richey 31-10: one look within a phone or a desktop and between them). Every page takes its type, colour and
   spacing from these and from nothing else; each size is one curve from a 390 pt phone to a 1440 pt desktop, so a role keeps its place
   in the hierarchy at every width. The three widths a layout may change at: 560 (phone), 860 (tablet; the bar folds), 1100 (laptop). */
/* tokens */
:root{--fs-display:clamp(44px,7.4vw,112px);--fs-title:clamp(36px,5vw,76px);--fs-h2:clamp(32px,4.4vw,60px);--fs-h3:clamp(26px,3vw,44px);--fs-h4:clamp(20px,1.8vw,26px);--fs-h5:18px;
--fs-lede:clamp(18px,1.7vw,22px);--fs-body-l:clamp(17px,1.35vw,20px);--fs-body:16px;--fs-small:14px;--fs-label:12px;--fs-figure:clamp(44px,4.6vw,68px);
--fg-2:rgba(255,255,255,.86);
--sp-section:clamp(64px,9vw,128px);--sp-hero:clamp(32px,3.6vw,52px);--sp-head:clamp(32px,4vw,56px);--sp-stack:clamp(20px,2.4vw,32px);--r-card:18px;--r-panel:28px;--wrap:1180px}
/* /tokens */
/* a label: an eyebrow, the bar's pages, a small heading over a list, a table's head; its number, where it has one, in the blue */
.eyebrow,.label{font-size:var(--fs-label);font-weight:600;letter-spacing:.24em;color:var(--ice);text-transform:uppercase;margin:0}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html,body{margin:0;background:var(--bg);color:var(--white);font-family:Geist,-apple-system,"Helvetica Neue",Arial,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit}
:focus-visible{outline:2px solid var(--ice);outline-offset:3px;border-radius:4px}
img{max-width:100%}
.top{display:flex;align-items:center;gap:14px;padding:calc(var(--gutter)*.7) var(--gutter);text-decoration:none;width:max-content}
.top img{height:22px;display:block}.top span{font-size:var(--fs-label);font-weight:600;letter-spacing:.24em}
.eyebrow b{color:var(--sky);font-weight:800;letter-spacing:0;margin-right:.5em}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
h1{font-weight:600;letter-spacing:-.035em;line-height:1;margin:.3em 0 0;font-size:var(--fs-display);max-width:13ch;text-wrap:balance}
/* the brand line's last row: white to glow across its own box, as the film sets it (Richey 28-10) */
h1 .eng{background:linear-gradient(90deg,#fff,rgb(157,187,255));-webkit-background-clip:text;background-clip:text;padding-right:.08em;margin-right:-.08em;-webkit-box-decoration-break:clone;box-decoration-break:clone;-webkit-text-fill-color:transparent;color:transparent}
h2{font-weight:600;letter-spacing:-.03em;font-size:var(--fs-h2);line-height:1.04;margin:0 0 .6em;text-wrap:balance}
h3{font-weight:600;letter-spacing:-.02em;line-height:1.15;text-wrap:balance}
p{line-height:1.55;color:var(--fg-2)}
.lede{font-size:var(--fs-lede);line-height:1.45;max-width:36em;color:var(--ice);text-wrap:pretty}
h1+.lede{margin:var(--sp-stack) 0 0}
footer{max-width:var(--wrap);margin:0 auto;padding:64px var(--gutter) 48px;color:var(--muted);font-size:var(--fs-label);letter-spacing:.04em;display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:12px}
footer a{color:var(--white);text-decoration:none;border-bottom:2px solid var(--sky);padding:22px 0 4px;margin:-22px 0 -4px}
footer .fl{display:flex;gap:28px;flex-wrap:wrap}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}
/* the site's bar: the brand home on the left, the pages on the right; under 860 pt the pages fold into one MENU, as the home page's header does */
.bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-right:var(--gutter);position:relative;z-index:10}
.bar .top{padding-right:0}
/* nav: the pages and the one way to talk to us, on every page and at every width (J1, 29-10); the home page sets this block in as it is built */
.site{display:flex;align-items:center;margin-left:auto}
.site .links{display:flex;gap:clamp(16px,2vw,28px)}
.site .links a,.menu summary{display:flex;align-items:center;min-height:44px;padding:0 4px;font-size:var(--fs-label);font-weight:600;letter-spacing:.24em;color:var(--ice);text-decoration:none;cursor:pointer}
.site .links a:hover,.site .links a[aria-current],.menu summary:hover{color:var(--white)}
.site .links a[aria-current]{box-shadow:inset 0 -2px 0 var(--sky)}
.menu{display:none;position:relative}
.menu summary{list-style:none;gap:10px}.menu summary::-webkit-details-marker{display:none}
.menu summary i{position:relative;width:16px;height:8px;border-top:2px solid currentColor;border-bottom:2px solid currentColor;transition:transform .25s}
.menu[open] summary{color:var(--white)}
.menu .panel{position:absolute;right:-8px;top:calc(100% + 6px);min-width:220px;padding:8px;display:flex;flex-direction:column;background:rgba(11,14,43,.97);border:1px solid var(--line);border-radius:16px;box-shadow:0 18px 48px rgba(0,0,0,.45);z-index:30}
.menu .panel a{display:flex;align-items:center;min-height:48px;padding:0 14px;border-radius:10px;font-size:17px;font-weight:520;color:var(--white);text-decoration:none}
.menu .panel a:hover{background:rgba(80,133,234,.14)}.menu .panel a[aria-current]{color:var(--ice);box-shadow:inset 3px 0 0 var(--sky)}
@media (max-width:860px){.site .links{display:none}.menu{display:block}}
.site .talk{display:inline-flex;align-items:center;min-height:44px;margin-left:clamp(16px,2vw,28px);padding:0 16px;border-radius:99px;background:var(--sky);color:var(--white);text-decoration:none;font-size:var(--fs-small);font-weight:520;white-space:nowrap;transition:background .25s}
.site .talk:hover,.site .talk:focus-visible{background:var(--sky-hi)}
@media (max-width:860px){.site .talk{margin:0 12px 0 0;min-height:44px;padding:0 14px}}
/* /nav */
@media (max-width:1100px){.bar .top span{display:none}}

/* the inner pages' sections, shared by approach, expertise and why-atp; every picture is the film's engine drawing one of its scenes (scenes.js) */
section{padding:var(--sp-section) 0 0}
.sec-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(20px,4vw,64px);align-items:end;margin-bottom:var(--sp-head)}
.sec-head h2{margin:.3em 0 0}
.sec-head p:not(.eyebrow){margin:0;font-size:var(--fs-body-l);color:var(--ice);max-width:34em;text-wrap:pretty}  /* not the label over the heading: it is a label everywhere */
@media (max-width:860px){.sec-head{grid-template-columns:1fr}}
canvas.scene{display:block;width:100%;aspect-ratio:16/10;background:#05061A}
/* a photograph where a page's content does not change often (Richey 29-10): same frame as a scene card */
img.ph{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;background:#05061A}
figure{margin:0}
figcaption{font-size:var(--fs-label);letter-spacing:.02em;color:var(--muted);padding:10px 2px 0;font-family:ui-monospace,"SF Mono",Menlo,monospace}

/* every page opens the same way, at every width (Richey 31-10: the photograph at the top with the words over it, as the rule): the page's
   photograph full bleed, one height on every page at a given width, and its label, title and lede starting one step under the bar (or the
   band), never sinking to the photograph's foot as their length changes. The shade sits where the words do, so they hold their contrast
   on any picture; the foot fades into the page. Privacy and 404 open the same way on the page's own ground. */
/* the shade holds its strength across the words and eases only past them: --words-end is where the widest line (the lede, 36em of
   --fs-lede) stops, from the wrap's left edge, so a white patch of photo under any word still leaves the ice lede at 4.5:1 */
.page-hero{--words-end:calc(max(0px,(100% - var(--wrap)) / 2) + var(--gutter) + 36 * var(--fs-lede));position:relative;min-height:calc(min(86vh,860px) - var(--now,0px));padding:var(--sp-hero) 0 var(--sp-head)}
.page-hero.plain{min-height:0}
/* a page one level down the navigation (a case under Work) opens with its way back, then the same eyebrow, title and lede,
   the title one step smaller than a section page's (--fs-title); the body type is the same at every level */
.sub .back{display:inline-flex;align-items:center;min-height:44px;margin-top:calc(var(--sp-hero) - 12px);font-size:var(--fs-small);color:var(--muted);text-decoration:none;transition:color .2s}
.sub .back:hover{color:var(--white)}
.sub .back+.eyebrow{margin-top:var(--sp-stack)}
.sub h1{font-size:var(--fs-title);max-width:18ch}
.page-hero>img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.page-hero:has(>img.bg)::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(to top,var(--bg) 0%,rgba(5,6,26,0) 34%),linear-gradient(90deg,rgba(5,6,26,.78) 0%,rgba(5,6,26,.62) var(--words-end),rgba(5,6,26,.12) calc(var(--words-end) + 18%)),linear-gradient(rgba(5,6,26,.35),rgba(5,6,26,.35))}
/* on a phone the words run the full width over the photo, top-anchored through about the hero's top 70 %, so the shade is
   strongest there (white photo under it still leaves the ice eyebrow and the lede at 4.5:1) and eases below the words */
@media (max-width:860px){.page-hero:has(>img.bg)::after{background:linear-gradient(to top,var(--bg) 0%,rgba(5,6,26,0) 30%),linear-gradient(rgba(5,6,26,.76) 0%,rgba(5,6,26,.74) 72%,rgba(5,6,26,.5) 100%)}}
.page-hero .wrap{position:relative;z-index:2}
.jump{display:flex;flex-wrap:wrap;gap:10px;margin:var(--sp-stack) 0 0}
.jump :is(a,button){display:inline-flex;align-items:center;background:none;font-family:inherit;cursor:pointer;min-height:44px;padding:0 18px;border:1px solid rgba(80,133,234,.5);border-radius:99px;color:var(--white);text-decoration:none;font-size:var(--fs-small);font-weight:520;transition:background .25s,border-color .25s}
.jump :is(a,button):hover,.jump :is(a,button):focus-visible{background:rgba(80,133,234,.16);border-color:var(--sky)}
.jump .primary{background:var(--sky);border-color:var(--sky)}
.jump .primary:hover{background:var(--sky-hi)}

/* the method: six stages on one line, then a row each */
.stage{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(24px,5vw,72px);align-items:center;padding:clamp(40px,5vw,72px) 0;border-top:1px solid var(--line);scroll-margin-top:24px}
.stage:nth-of-type(even) figure{order:-1}
.stage h3{font-size:var(--fs-h3);letter-spacing:-.025em;line-height:1.05;margin:.4em 0 .45em}
.stage p.lead{margin:0;font-size:var(--fs-body-l);color:var(--ice);max-width:32em;text-wrap:pretty}
.stage ul{margin:20px 0 0;padding:0;list-style:none}
.stage li{position:relative;padding:10px 0 10px 22px;border-top:1px solid var(--line);font-size:var(--fs-body);line-height:1.5;color:var(--fg-2);text-wrap:pretty}
.stage li::before{content:"";position:absolute;left:2px;top:19px;width:8px;height:2px;background:var(--sky)}
.gate{margin-top:20px;padding:16px 18px;border-radius:14px;background:linear-gradient(90deg,rgba(80,133,234,.14),rgba(80,133,234,.03));border:1px solid rgba(80,133,234,.28)}
.gate span{display:block;font-size:var(--fs-label);font-weight:600;letter-spacing:.24em;color:var(--sky);text-transform:uppercase;margin-bottom:6px}
.gate p{margin:0;font-size:var(--fs-body);color:var(--white)}
.stage figure canvas,.stage figure img{border-radius:var(--r-card);box-shadow:0 0 0 1px var(--line)}
@media (max-width:860px){.stage{grid-template-columns:1fr}.stage:nth-of-type(even) figure{order:0}}

/* the close */
.close{margin-top:var(--sp-section);padding:clamp(40px,6vw,88px) clamp(24px,5vw,72px);border-radius:var(--r-panel);background:radial-gradient(120% 140% at 100% 0%,rgba(80,133,234,.28),rgba(80,133,234,0) 55%),var(--panel);border:1px solid rgba(80,133,234,.3)}
.close h2{margin:0 0 .35em}
.close p{margin:0 0 28px;font-size:var(--fs-body-l);color:var(--ice);max-width:32em}
.close a.mail{font-size:clamp(18px,1.9vw,26px);font-weight:520;color:var(--white);text-decoration:none;border-bottom:3px solid var(--sky);padding-bottom:4px}
.close a.mail:hover{color:var(--ice)}

/* the bar stays with the reader (J1, 29-10) */
.bar{position:sticky;top:0;background:rgba(5,6,26,.86);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
/* every page ends on a road onward, then the conversation (J5) */
.onward{display:flex;justify-content:flex-end;margin-top:clamp(56px,7vw,104px)}
.onward a{display:inline-flex;flex-direction:column;align-items:flex-end;gap:6px;color:var(--white);text-decoration:none;font-size:var(--fs-h3);font-weight:600;letter-spacing:-.025em;line-height:1.05}
.onward a span{font-size:var(--fs-label);font-weight:600;letter-spacing:.24em;color:var(--ice);text-transform:uppercase}
.onward a:hover b,.onward a:focus-visible b{color:var(--ice)}
.onward b{font-weight:inherit;transition:color .25s}
.onward+.close{margin-top:clamp(24px,3vw,40px)}
/* on a phone a 16:10 card is smaller than any box the film is laid out for, and a scene's labels collide (Brooks's Law at 390, J10):
   the card goes square there, inside the film's tested range */
canvas.scene.wide{aspect-ratio:21/9}
@media (max-width:560px){canvas.scene,canvas.scene.wide{aspect-ratio:1/1}}
/* motion.js: blocks rise into place once; diagrams grow and draw when seen; small answers to the pointer */
.mo .rv{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.mo .rv.in{opacity:1;transform:none}
/* a cell of the hairline services grid stays opaque, so the grid's line colour never shows through it; its contents rise instead */
.mo .services>.rv{opacity:1;transform:none}
.mo .services>.rv>*{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.mo .services>.rv.in>*{opacity:1;transform:none}
.mo .flow.wait .grow{transform-box:fill-box;transform-origin:0 50%;transform:scaleX(0);transition:transform 1.2s cubic-bezier(.2,.7,.2,1) .15s}
.mo .flow.drawn .grow{transform:none}
.mo .flow.wait path.draw{transition:stroke-dashoffset 1.8s cubic-bezier(.4,0,.2,1) .2s}
.mo .flow.drawn path.draw{stroke-dashoffset:0!important}
.site .talk,.jump :is(a,button){transition:background .25s,transform .15s}
.site .talk:active,.jump :is(a,button):active{transform:scale(.96)}
.onward b{display:inline-block;transition:color .25s,transform .3s cubic-bezier(.2,.7,.2,1)}
.onward a:hover b,.onward a:focus-visible b{transform:translateX(6px)}
/* motion.js, second pass: words, photographs, the hero, the bar, the pointer, the page change */
.mo .wsplit .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.mo .wsplit .w>span{display:inline-block;transform:translateY(105%);transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.mo .wsplit.up .w>span{transform:none}
.mo img.mask{clip-path:inset(7% 7% 7% 7% round 18px);scale:1.04;transition:clip-path 1.2s cubic-bezier(.2,.7,.2,1),scale 1.6s cubic-bezier(.2,.7,.2,1),transform .6s ease}
.mo img.mask.open{clip-path:inset(0 0 0 0 round 0);scale:1}
.mo .page-hero>img.bg{animation:settle 2.6s cubic-bezier(.2,.7,.2,1) both}
.mo .page-hero{overflow:clip}
.mo .page-hero .wrap>:not(h1){animation:rise .9s cubic-bezier(.2,.7,.2,1) both}
.mo .page-hero .wrap>:nth-child(2){animation-delay:.08s}.mo .page-hero .wrap>:nth-child(3){animation-delay:.16s}.mo .page-hero .wrap>:nth-child(4){animation-delay:.24s}
@keyframes settle{from{scale:1.07}}@keyframes rise{from{opacity:0;transform:translateY(24px)}}
.mo .bar{transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.mo .bar.tuck{transform:translateY(-100%)}
.mo .bar::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,var(--sky),var(--ice));transform-origin:0 50%;transform:scaleX(var(--p,0));pointer-events:none}
.mo .svc::before,.mo .signals>div::before{background:radial-gradient(360px circle at var(--mx,0) var(--my,0),rgba(80,133,234,.2),rgba(80,133,234,0) 70%)}
.mo .way{position:relative}
.mo .way::after{content:"";position:absolute;inset:0;border-radius:inherit;opacity:0;transition:opacity .4s;pointer-events:none;background:radial-gradient(420px circle at var(--mx,50%) var(--my,0),rgba(80,133,234,.14),rgba(80,133,234,0) 70%)}
.mo .way:hover::after{opacity:1}
@media (prefers-reduced-motion:no-preference){@view-transition{navigation:auto}::view-transition-old(root),::view-transition-new(root){animation-duration:.32s}}
/* motion.js, third pass: the page's heading, the hero's depth, the small things */
.mo .wsplit .eng{background:none}
.mo .wsplit .eng .w>span{background-image:linear-gradient(90deg,#fff,rgb(157,187,255));background-repeat:no-repeat;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.mo .lead-in .w>span{transition:transform 1.1s cubic-bezier(.16,.84,.24,1)}
.mo img.hero:not(.mask){animation:unveil 1.5s cubic-bezier(.2,.7,.2,1) .35s both}
@keyframes unveil{from{clip-path:inset(8% 8% 8% 8% round 22px);scale:1.04;opacity:.4}}
.mo .eyebrow{transition:letter-spacing 1.3s cubic-bezier(.2,.7,.2,1)}
.mo .rv:not(.in) .eyebrow{letter-spacing:.5em}
.mo .menu[open] .panel{animation:pop .26s cubic-bezier(.2,.7,.2,1)}
@keyframes pop{from{opacity:0;transform:translateY(-6px) scale(.98)}}
.bar{view-transition-name:bar}
/* Latest in AI (31-10): the three most important AI stories of the last hours, under the bar on every page. The worker fills the
   empty aside as the page is served (worker/latest.js) and leaves it hidden when nothing is fresh. It scrolls away with the page;
   the bar stays. A band of its own (Richey 31-10): lit from above and edged in sky from its live dot, drawn up close under the bar and kept
   tight, two lines a headline, its source and age beneath. Under 860 pt the stories sit in one row the reader swipes, the next one
   showing at the edge. The home page, which does not load this file, takes the block between the band markers as it is built. */
/* band */
/* a strip of its own under the bar (Richey 31-10, second pass): lit from above as the news page's lead card is, and edged along the top by
   a sky line that is brightest at the live dot and fades across, as the bar marks the page you are on */
.now{position:relative;background:linear-gradient(180deg,rgba(20,26,82,.9),rgba(11,14,43,.94));-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.now::before{content:"";position:absolute;inset:0 0 auto;height:1px;background:linear-gradient(90deg,rgba(80,133,234,.3),rgba(80,133,234,.95) var(--gutter),rgba(80,133,234,.32) 38%,rgba(80,133,234,.08) 80%)}
.now[hidden],.now li[hidden]{display:none}
.now .in{display:flex;align-items:flex-start;gap:clamp(20px,2.4vw,36px);padding:11px var(--gutter) 12px}
.now .k{flex:none;display:flex;align-items:center;gap:10px;min-height:18.5px;font-size:var(--fs-label);font-weight:600;letter-spacing:.24em;color:var(--ice);text-transform:uppercase;text-decoration:none;white-space:nowrap}
.now .k:hover{color:var(--white)}
.now .k i{width:6px;height:6px;border-radius:50%;background:var(--sky);box-shadow:0 0 0 4px rgba(80,133,234,.2)}
.now ol{list-style:none;margin:0;padding:0;flex:1;min-width:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.now li{border-left:1px solid var(--line);padding:0 clamp(16px,2vw,28px)}
.now li a{display:block;text-decoration:none}
.now .t{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:14px;line-height:1.32;font-weight:520;color:var(--white);text-wrap:pretty;transition:color .25s}
.now li a:hover .t,.now li a:focus-visible .t{color:var(--ice)}
.now .m{display:block;margin-top:3px;font-size:11.5px;color:var(--muted);letter-spacing:.04em}
/* so it is noticed (worker/latest.js): the live dot rings, a light passes along a headline, a new story rises in; the script stops it */
.now i{position:relative}
.now i::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--sky);opacity:0}
.now.live i::after{animation:ring 3s cubic-bezier(.2,.7,.2,1) infinite}
@keyframes ring{0%{transform:scale(1);opacity:.75}55%,100%{transform:scale(3.6);opacity:0}}
.now .at{margin-right:.7em;font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;font-variant-numeric:tabular-nums;color:var(--muted)}.now .at.new{color:var(--sky)}
.now .vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.now li{position:relative}  /* the hidden label is placed in its own story, so a phone's scrolling row clips it; placed in the band, it widened the page */
.now .is-new .t,.now .is-new .m{animation:nowin .9s cubic-bezier(.2,.7,.2,1) .25s both}
@keyframes nowin{from{opacity:0;transform:translateY(10px)}}
.now .t.glint{background:linear-gradient(100deg,#fff 36%,#b8ccff 43%,#6f9bff 48%,#6f9bff 52%,#b8ccff 57%,#fff 64%) 0 0/240% 100% no-repeat;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:glint 2.4s cubic-bezier(.4,0,.3,1) both}
@keyframes glint{from{background-position:100% 0}to{background-position:0 0}}
@media (prefers-reduced-motion:reduce){.now *,.now *::after{animation:none!important}}
@media (max-width:860px){
.now .in{flex-direction:column;gap:7px;padding:10px 0 12px}
.now .k{margin:0 var(--gutter)}
.now ol{display:flex;width:100%;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 var(--gutter);padding:0 var(--gutter);scrollbar-width:none;-webkit-overflow-scrolling:touch}
.now ol::-webkit-scrollbar{display:none}
.now ol::after{content:"";flex:0 0 1px}
.now li{flex:0 0 min(84%,420px);scroll-snap-align:start;border-left:0;padding:0 18px 0 0}
.now li+li{flex-basis:calc(min(84%,420px) + 19px);border-left:1px solid var(--line);padding-left:18px}  /* every headline the same width: the divider and its margin are added, not taken */
.now .t{-webkit-line-clamp:3;min-height:3.96em}  /* a twelve-word headline takes three lines at a phone's width; every story keeps the room, so the band is one height */
}
/* /band */
/* the band's height, and what the bar gave up, come out of the opening photograph, so every page's first screen ends at one place */
body:has(>.now:not([hidden])){--now:calc(82px + min(0px,calc(27px - var(--gutter)*.7)))}
@media (max-width:860px){body:has(>.now:not([hidden])){--now:124px}}
/* drawn up under the bar: 16 px below the pages' 44 px links (27 below the brand), as the home page's header leaves, where the bar
   left more; each of its children gives up the same amount below, so the brand and the pages stay centred on one line */
body:has(>.now:not([hidden])) .bar>*{margin-bottom:min(0px,calc(27px - var(--gutter)*.7))}