/* ---------- the journal: shared pieces */
.bj{--tx:620px;padding-bottom:var(--sp)}
.bj .bj-top{padding:clamp(48px,9vh,104px) 0 clamp(32px,4vw,56px)}
.bj .bj-top .wrap{display:flex;align-items:flex-end;justify-content:space-between;gap:24px 48px;flex-wrap:wrap}
.bj .bj-top .x1{margin:0}
.bj a{color:inherit;text-decoration:none}
.bj h1,.bj h2,.bj h3{font-family:var(--f-d);font-weight:500;color:var(--ink);margin:0;text-wrap:balance}
.bj .bj-k{font:500 11px/16px var(--f-n);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)}
.bj .bj-d{font:400 13px/18px var(--f-n);color:var(--stone);font-variant-numeric:lining-nums}
.bj .bj-m{display:flex;align-items:baseline;gap:6px 14px;flex-wrap:wrap}
.bj .bj-im{position:relative;overflow:hidden;aspect-ratio:3/2;background:var(--bone);border-radius:0}
.bj .bj-ph{position:absolute;inset:0;background-size:cover;background-position:center}
.bj .bj-slot{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
 background:repeating-linear-gradient(135deg,transparent 0 13px,rgba(140,134,123,.09) 13px 14px),var(--bone)}
.bj .bj-slot i{font-style:normal;font-family:var(--f-d);font-size:26px;line-height:1.2;color:var(--stone)}
.bj .bj-slot em{font-style:normal;font-family:var(--f-m);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--stone)}
.bj .bj-back{display:inline-flex;align-items:center;gap:8px;font:500 11.5px/17px var(--f-n);letter-spacing:.16em;text-transform:uppercase;color:var(--ink);padding:12px 0}
.bj .bj-back svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--ease)}
.bj .bj-back:hover svg{transform:translateX(-3px)}
.bj .bj-t{font-size:calc(var(--xk)*clamp(40px,4vw + 14px,72px));line-height:1.04;letter-spacing:-.015em}
.bj .bj-dk{font:400 clamp(17px,1.35vw,19.5px)/1.55 var(--f-n);color:var(--ink-2);margin:20px 0 0;max-width:640px;text-wrap:pretty}
/* the text of a post */
.bj .bj-text{max-width:var(--tx);margin:0 auto}
.bj .bj-text>p{font:400 17px/1.75 var(--f-n);color:var(--ink-2);margin:0 0 22px;text-wrap:pretty}
.bj .bj-text>h2{font-size:calc(var(--xk)*clamp(26px,2.2vw,32px));line-height:1.2;margin:48px 0 14px}
.bj .bj-text>p+h2{margin-top:44px}
.bj .bj-fig{margin:40px 0}
.bj .bj-fig figcaption{font:400 13px/1.5 var(--f-n);color:var(--stone);margin-top:12px}
/* the car in this story */
.bj .bj-car{display:block;margin-top:48px}
.bj .bj-car>.bj-k{display:block;margin-bottom:14px;color:var(--stone)}
.bj .bj-cr{display:grid;grid-template-columns:168px minmax(0,1fr);gap:20px;align-items:center}
.bj .bj-cr .bj-im{aspect-ratio:4/3}
.bj .bj-cn{display:flex;flex-direction:column;gap:4px}
.bj .bj-cn b{font:500 24px/1.25 var(--f-d);color:var(--ink);letter-spacing:-.01em;text-wrap:balance}
.bj .bj-cn>span:not(.bj-go){font:500 15px/1.4 var(--f-n);color:var(--ink);font-variant-numeric:lining-nums}
.bj .bj-go{display:inline-flex;align-items:center;gap:8px;margin-top:8px;font:500 11.5px/17px var(--f-n);letter-spacing:.16em;text-transform:uppercase;color:var(--green)}
.bj .bj-go svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--ease)}
.bj .bj-car:hover .bj-go svg{transform:translateX(3px)}
.bj .bj-more{padding-top:clamp(72px,8vw,120px)}
.bj .bj-mh{font-size:calc(var(--xk)*clamp(30px,3vw,44px));line-height:1.1;margin-bottom:32px}
/* the reading line under the header */
/* the reading bar: see the end of the file */

/* ---------- 1 Lead story and grid */
.bj1-tabs{display:flex;gap:4px 28px;flex-wrap:wrap;padding-bottom:12px}
.bj1-tabs button{all:unset;cursor:pointer;font:500 11.5px/17px var(--f-n);letter-spacing:.16em;text-transform:uppercase;color:var(--stone);padding:10px 0;position:relative;transition:color .25s}
.bj1-tabs button::after{content:'';position:absolute;left:0;right:0;bottom:4px;height:1px;background:var(--green);transform:scaleX(0);transform-origin:0 50%;transition:transform .35s var(--ease)}
.bj1-tabs button:hover{color:var(--ink)}
.bj1-tabs button[aria-pressed="true"]{color:var(--green)}
.bj1-tabs button[aria-pressed="true"]::after{transform:scaleX(1)}
.bj1-lead{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,4vw,64px);align-items:end;margin-bottom:clamp(64px,7vw,104px)}
.bj1-lt{display:flex;flex-direction:column;gap:16px;padding-bottom:4px}
.bj .bj1-h{font-size:calc(var(--xk)*clamp(34px,3.6vw,54px));line-height:1.06;letter-spacing:-.015em}
.bj1-lt p{font:400 16px/1.65 var(--f-n);color:var(--ink-2);margin:0}
.bj1-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:56px 32px}
.bj1-c{display:flex;flex-direction:column}
.bj1-c .bj-m{margin-top:18px}
.bj .bj1-c h3{font-size:24px;line-height:1.25;letter-spacing:-.01em;margin-top:8px}
.bj .bj-u{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .45s var(--ease)}
.bj a:hover .bj-u{background-size:100% 1px}
.bj1-ph{padding-top:clamp(32px,5vh,56px);max-width:calc(var(--tx) + 2 * var(--gut))}
.bj1-hd{max-width:var(--tx);margin:20px auto 0;display:flex;flex-direction:column;gap:18px}
.bj1-hd .bj-dk{margin-top:0}
.bj .bj1-hero{aspect-ratio:16/9;margin:clamp(40px,5vw,64px) 0}

/* ---------- 2 Index */
.bj2-n{font:400 13px/18px var(--f-n);color:var(--stone);margin:0 0 14px}
.bj2-y{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,10fr);gap:32px;align-items:baseline}
.bj2-y+.bj2-y{margin-top:56px}
.bj .bj2-yl{font-size:30px;line-height:1.2;color:var(--stone);font-weight:400;font-variant-numeric:lining-nums}
.bj2-l{list-style:none;margin:0;padding:0}
.bj2-r{display:grid;grid-template-columns:44px minmax(0,1fr) 150px 110px;gap:24px;align-items:baseline;padding:14px 0;transition:opacity .3s}
.bj2-no{font:400 13px/18px var(--f-n);color:var(--stone);font-variant-numeric:lining-nums tabular-nums}
.bj2-t{text-wrap:balance;font:500 calc(var(--xk)*clamp(24px,2.4vw,36px))/1.15 var(--f-d);color:var(--ink);letter-spacing:-.01em}
.bj2-r .bj-d{text-align:right}
.bj2-l.hov .bj2-r{opacity:.32}.bj2-l.hov .bj2-r:hover{opacity:1}
.bj2-pv{position:fixed;left:0;top:0;width:300px;aspect-ratio:3/2;z-index:30;pointer-events:none;opacity:0;transition:opacity .3s;overflow:hidden;background:var(--bone)}
.bj2-pv.on{opacity:1}
.bj2-pv .bj-ph{position:absolute;inset:0;background-size:cover;background-position:center}
.bj2-g{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,80px)}
.bj2-p{padding-top:clamp(40px,6vh,72px)}
.bj2-st{position:sticky;top:calc(var(--hdh) + 32px)}
.bj2-st dl{margin:28px 0 0;display:grid;grid-template-columns:auto 1fr;gap:10px 20px}
.bj2-st dt{font:500 11px/20px var(--f-n);letter-spacing:.16em;text-transform:uppercase;color:var(--stone)}
.bj2-st dd{margin:0;font:400 15px/20px var(--f-n);color:var(--ink);font-variant-numeric:lining-nums}
.bj .bj-car-s .bj-cr{grid-template-columns:120px minmax(0,1fr);gap:16px}
.bj .bj-car-s .bj-cn b{font-size:20px}
.bj2-m{padding-top:12px}
.bj .bj2-hero{margin:40px 0 48px}
.bj2-m .bj-text{margin:0;max-width:none}
.bj .bj-car-s .bj-slot em{display:none}
.bj-more .bj2-g>.bj-mh{font-size:calc(var(--xk)*clamp(28px,2.4vw,36px))}
.bj-more .bj2-g>.bj-mh{grid-column:1}
.bj-more .bj2-g>.bj2-l{grid-column:2}
.bj-more .bj2-r{grid-template-columns:minmax(0,1fr) 150px 110px}

/* ---------- 3 Series */
.bj3-s{padding-bottom:clamp(64px,7vw,104px)}
.bj3-sh{display:flex;align-items:baseline;gap:8px 24px;flex-wrap:wrap;margin-bottom:28px}
.bj .bj3-sh h2{font-size:calc(var(--xk)*clamp(30px,3vw,44px));line-height:1.1}
.bj3-sh p{font:400 15px/1.5 var(--f-n);color:var(--stone);margin:0}
.bj3-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.bj3-c{display:flex;flex-direction:column}
.bj3-c .bj-im{aspect-ratio:4/5}
.bj3-ct{display:flex;flex-direction:column;gap:8px;margin-top:16px}
.bj .bj3-c h3{font-size:24px;line-height:1.25;letter-spacing:-.01em}
/* one post in a series: the card runs wide, photo beside its title */
.bj3-row[data-n="1"]{grid-template-columns:minmax(0,1fr)}
.bj3-row[data-n="1"] .bj3-c{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:clamp(24px,4vw,64px);align-items:end}
.bj3-row[data-n="1"] .bj-im{aspect-ratio:16/9}
.bj .bj3-row[data-n="1"] h3{font-size:calc(var(--xk)*clamp(28px,2.8vw,40px));line-height:1.1}
/* two posts: halves, a wider photo */
.bj3-row[data-n="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
.bj3-row[data-n="2"] .bj-im{aspect-ratio:4/3}
.bj3-ph{padding-top:clamp(32px,5vh,56px);display:flex;flex-direction:column;align-items:center;text-align:center}
.bj3-se{margin:20px 0 18px;font:500 11.5px/17px var(--f-n);letter-spacing:.16em;text-transform:uppercase;color:var(--green)}
.bj3-se i{font-style:normal;color:var(--stone);margin-left:8px}
.bj3-ph .bj-t{max-width:820px}
.bj .bj3-dk{font-family:var(--f-d);font-style:italic;font-size:clamp(21px,1.8vw,26px);line-height:1.4;color:var(--ink-2);margin:22px auto 22px}
.bj3-ph .bj-m{justify-content:center}
.bj .bj3-hero{aspect-ratio:3/2;max-width:1000px;margin:clamp(40px,5vw,64px) auto}
.bj .bj-cap::first-letter{float:left;font:500 3.75em/.82 var(--f-d);color:var(--ink);margin:.06em .08em 0 0}

/* ---------- 4 Story and car */
.bj4-r{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,5vw,80px);align-items:center}
.bj4-r+.bj4-r{margin-top:clamp(64px,8vw,120px)}
.bj4-r.flip{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.bj4-r.flip>.bj-im{order:2}
.bj4-t{display:flex;flex-direction:column;gap:16px}
.bj .bj4-h{font-size:calc(var(--xk)*clamp(30px,3.2vw,48px));line-height:1.08;letter-spacing:-.015em}
.bj4-t p{font:400 16px/1.65 var(--f-n);color:var(--ink-2);margin:0}
.bj4-st{display:inline-flex;align-items:center;gap:10px;font:500 14px/20px var(--f-n);color:var(--green);font-variant-numeric:lining-nums}
.bj4-st i{width:7px;height:7px;border-radius:50%;background:var(--green)}
.bj4-ph{padding-top:clamp(32px,5vh,56px);display:flex;flex-direction:column;gap:18px}
.bj4-ph .bj-t{max-width:20ch}
.bj4-ph .bj-back{align-self:flex-start}
.bj .bj4-hero{aspect-ratio:21/9;margin:clamp(32px,4vw,56px) 0}
.bj4-g{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:clamp(40px,6vw,96px);align-items:start}
.bj4-g.solo{grid-template-columns:minmax(0,1fr)}
.bj4-g .bj-text{margin:0}.bj4-g.solo .bj-text{margin:0 auto}
.bj4-g .bj-text>.bj-dk{margin:0 0 32px}
.bj .bj-text>p.bj-dk{font:400 clamp(18px,1.45vw,21px)/1.55 var(--f-n);color:var(--ink)}
.bj4-a{position:sticky;top:calc(var(--hdh) + 32px)}
.bj .bj-car-v{margin:0}
.bj .bj-car-v .bj-cr{grid-template-columns:minmax(0,1fr);gap:16px}

/* ---------- 5 Pictures first */
.bj5-g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(32px,6vw,112px);align-items:start}
.bj5-col{display:flex;flex-direction:column;gap:clamp(64px,8vw,128px)}
.bj5-col.b{padding-top:clamp(80px,12vw,200px)}
.bj5-c{display:flex;flex-direction:column}
.bj5-c .r45{aspect-ratio:4/5}.bj5-c .r32{aspect-ratio:3/2}.bj5-c .r11{aspect-ratio:1/1}.bj5-c .r34{aspect-ratio:3/4}
.bj .bj5-c h2{font-size:calc(var(--xk)*clamp(24px,2.2vw,32px));line-height:1.15;letter-spacing:-.01em;margin-top:20px}
.bj5-c .bj-d{margin-top:8px}
.bj5-p{margin-top:0}
.bj5-hero{position:relative;height:calc(100svh - var(--hdh));min-height:420px;max-height:980px}
.bj .bj5-hero>.bj-im{position:absolute;inset:0;aspect-ratio:auto}
.bj5-hero:not(.sl)>.bj-im::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,16,14,0) 30%,rgba(12,16,14,.74))}
.bj5-ht{position:absolute;left:0;right:0;bottom:clamp(32px,6vh,72px);display:flex;flex-direction:column;gap:16px}
.bj5-hero:not(.sl) .bj5-ht .bj-t,.bj5-hero:not(.sl) .bj5-ht .bj-k,.bj5-hero:not(.sl) .bj5-ht .bj-d{color:var(--paper)}
.bj5-hero .bj-t{max-width:820px}
.bj5-hero.sl .bj-slot{justify-content:flex-start;padding-top:18vh}
.bj5-bk{padding-top:24px;max-width:calc(var(--tx) + 2 * var(--gut))}
body.bj-on .bj5-ht{bottom:calc(clamp(32px,6vh,72px) + 56px)}
.bj5-p .bj-text{padding-top:clamp(24px,4vw,56px)}
.bj5-p .bj-text>.bj-dk{margin:0 0 32px}
.bj .bj5-wide{margin:56px calc(50% - min(50vw - var(--gut), 600px))}
.bj5-wide .bj-im{aspect-ratio:16/9}
.bj5-next{position:relative;display:block;margin-top:clamp(80px,9vw,140px);color:var(--paper)}
.bj .bj5-next .bj-im{aspect-ratio:21/8}
.bj5-next:not(:has(.bj-slot)) .bj-im::after{content:'';position:absolute;inset:0;background:rgba(12,16,14,.38);transition:background-color .4s}
.bj5-next:hover .bj-im::after{background:rgba(12,16,14,.24)}
.bj5-nt{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.bj .bj5-nt .bj-k{color:inherit}
.bj5-nt b{font:500 calc(var(--xk)*clamp(30px,4vw,60px))/1.08 var(--f-d);letter-spacing:-.015em;max-width:20ch}
.bj .bj5-next{color:var(--paper)}
.bj .bj5-next:has(.bj-slot){color:var(--ink)}
.bj[data-v="5"]:has(.bj5-next){padding-bottom:0}
.bj .bj-car-m{display:none}

/* ---------- tablets and phones */
@media(max-width:1000px){
 .bj2-r{grid-template-columns:36px minmax(0,1fr) 120px 96px;gap:16px}
 .bj4-g{grid-template-columns:minmax(0,1fr)}.bj4-a{position:static;max-width:var(--tx);margin:0 auto;width:100%}
 .bj .bj-car-v .bj-cr{grid-template-columns:168px minmax(0,1fr);gap:20px}
}
@media(max-width:900px){
 .bj1-lead,.bj4-r,.bj4-r.flip{grid-template-columns:minmax(0,1fr);gap:24px}
 .bj4-r.flip>.bj-im{order:0}
 .bj1-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:44px 24px}
 .bj2-y{grid-template-columns:minmax(0,1fr);gap:8px}
 .bj2-g{grid-template-columns:minmax(0,1fr);gap:24px}
 .bj2-st{position:static}
 .bj2-a .bj-car-s{display:none}
 .bj .bj-car-m{display:block}
 .bj-more .bj2-g>.bj-mh{margin-bottom:0}
 .bj4-g .bj-text{margin:0 auto}
 .bj-more .bj1-grid>:nth-child(3){display:none}
 .bj2-m .bj-text>p:last-child{margin-bottom:0}
 .bj-more .bj2-g>.bj2-l{grid-column:1}
 .bj3-row,.bj3-row[data-n="2"]{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:16px;margin:0 calc(-1 * var(--gut));padding:0 var(--gut);scrollbar-width:none}
 .bj3-row::-webkit-scrollbar{display:none}
 .bj3-row .bj3-c{flex:0 0 min(72vw,320px);scroll-snap-align:start;scroll-margin-left:var(--gut)}
 .bj3-row[data-n="1"]{display:block;margin:0;padding:0}
 .bj3-row[data-n="1"] .bj3-c{grid-template-columns:minmax(0,1fr);gap:0}
 .bj .bj4-hero{aspect-ratio:3/2}
}
@media(max-width:760px){
  .bj5-g{gap:56px}
 .bj .bj5-next .bj-im{aspect-ratio:4/3}
}
@media(max-width:640px){
 .bj1-grid{grid-template-columns:minmax(0,1fr)}
 .bj1-tabs{gap:0 20px}
 .bj2-r,.bj-more .bj2-r{grid-template-columns:minmax(0,1fr) auto;gap:6px 16px;padding:14px 0}
 .bj2-no{display:none}
 .bj2-t{grid-column:1/-1}
 .bj2-r .bj-d{text-align:right}
 .bj2-st dl{grid-template-columns:repeat(3,auto);grid-auto-flow:column;grid-template-rows:auto auto;justify-content:start;gap:4px 28px}
 .bj .bj-cr{grid-template-columns:120px minmax(0,1fr);gap:16px}
 .bj .bj-car-v .bj-cr{grid-template-columns:120px minmax(0,1fr);gap:16px}
 .bj .bj-cn b{font-size:20px}
 .bj .bj-text>p{font-size:16px}
 .bj5-hero{height:calc(88svh - var(--hdh))}
}

/* figures are lining everywhere (the font shorthands above reset it) */
.bj h1,.bj h2,.bj h3,.bj .bj-cn b,.bj .bj2-t,.bj .bj5-nt b,.bj .bj-slot i,.bj .bj-dk,.bj .bj-cap::first-letter{font-variant-numeric:lining-nums}
@media(max-width:640px){.bj .bj-car .bj-slot em{display:none}}
@media(max-width:760px){.bj5-g{display:flex;flex-direction:column}.bj5-col,.bj5-col.b{display:contents}}

/* ---------- the switcher (preview only) */
#bjs{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:60;display:flex;align-items:center;gap:14px;padding:8px 8px 8px 16px;
 background:var(--card);border:1px solid var(--hair);border-radius:4px;box-shadow:0 10px 30px rgba(22,22,20,.12);font:500 11px/16px var(--f-n);color:var(--ink);white-space:nowrap;max-width:calc(100vw - 24px)}
#bjs[hidden]{display:none}
#bjs .bjs-s{display:none}

#bjs .bjs-l{letter-spacing:.16em;text-transform:uppercase;color:var(--stone)}
#bjs .bjs-n{display:flex;gap:4px}
#bjs button{all:unset;cursor:pointer;width:32px;height:32px;display:grid;place-items:center;border:1px solid var(--hair);border-radius:4px;font:500 13px/1 var(--f-n);font-variant-numeric:lining-nums}
#bjs button:hover{border-color:var(--green);color:var(--green)}
#bjs button[aria-pressed="true"]{background:var(--green);border-color:var(--green);color:var(--card)}
#bjs .bjs-t{font:500 13px/16px var(--f-n);min-width:140px}
#bjs .bjs-g{height:32px;display:inline-flex;align-items:center;padding:0 14px;border:1px solid var(--green);border-radius:4px;color:var(--green);letter-spacing:.16em;text-transform:uppercase;text-decoration:none}
#bjs .bjs-g:hover{background:var(--green);color:var(--card)}
@media(max-width:760px){#bjs{left:12px;right:12px;transform:none;bottom:12px;gap:10px;padding:8px;justify-content:space-between}#bjs .bjs-l,#bjs .bjs-t,#bjs .bjs-w{display:none}#bjs .bjs-s{display:inline}#bjs button{width:36px;height:36px}#bjs .bjs-g{height:36px;padding:0 12px}}

/* ---------- the reading rail on a post (blog.js rd) */
/* in the journal the menu stays on screen (elsewhere on inner pages it scrolls away with the page) */
body.bj-on .hd{position:sticky;top:0}
.bj .bj-text{position:relative}
/* the rail: a column the height of the text, 56px to its right; the line (180px, or 40% of a short text, so it still
   fills over a real stretch of scrolling) sticks in the middle of the space under the menu inside it */
.rd-w{position:absolute;top:0;bottom:0;left:calc(100% + 56px);width:2px;pointer-events:none}
.rd-rl{position:sticky;top:calc(50vh + var(--hdh) / 2 - 90px);height:min(180px,40%);background:var(--hair);overflow:hidden}
.rd-rl i,#bj-rd i{position:absolute;inset:0;background:#657F74;transform:scaleY(0);transform-origin:50% 0;will-change:transform}
/* no room beside the text: the fill runs just under the menu, behind the menu's own pop-ups (the menu is z-index 10) */
#bj-rd{position:fixed;left:0;right:0;top:0;height:2px;z-index:9;pointer-events:none;opacity:0;transition:opacity .3s}
#bj-rd i{transform:scaleX(0);transform-origin:0 50%}
body:not(.bj-post) #bj-rd{display:none}
@media(min-width:880px){#bj-rd{display:none}}
@media(max-width:879px){.rd-w{display:none}#bj-rd.on{opacity:1}}

/* keyboard focus on journal links: the site's green, clear of the photo edge */
.bj a:focus-visible,.bj1-tabs button:focus-visible{outline:2px solid var(--green);outline-offset:4px}
@media(max-width:879px){body:has(.hd [aria-expanded="true"]) #bj-rd{opacity:0}}
/* ---------- round 2: five versions of the Lead story */
.bj .lm{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 8px;font:400 13px/20px var(--f-n);color:var(--stone);font-variant-numeric:lining-nums}
.bj .lm i{font-style:normal;color:var(--hair)}
.bj .la-hero{aspect-ratio:16/9}
.bj .bj-top{padding-bottom:clamp(28px,3.5vw,48px)}
/* the tabs sit under the heading, on its left edge (round 1 had them floating at the right) */
.bj .bj-top .wrap{display:block}
.bj .bj-top .bj1-tabs{margin-top:20px;padding-bottom:0}

/* 1 Caption */
.la-lead{display:block;margin-bottom:clamp(72px,8vw,120px)}
.la-lc{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:32px;align-items:end;margin-top:28px}
.bj .la-h{font-size:calc(var(--xk)*clamp(34px,3.6vw,54px));line-height:1.06;letter-spacing:-.015em}
.la-r{display:flex;flex-direction:column;gap:10px;padding-bottom:6px}
.la-r p{font:400 16px/1.6 var(--f-n);color:var(--ink-2);margin:0}
.la-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:64px 32px}
.la-c{display:flex;flex-direction:column}
.la-cap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:16px;margin-top:18px;align-items:start}
.la-m{display:flex;flex-direction:column;gap:2px;font:400 12.5px/19px var(--f-n);color:var(--stone);padding-top:4px;font-variant-numeric:lining-nums}
.la-m span:first-child{color:var(--ink-2)}
.bj .la-c h3{font-size:22px;line-height:1.25;letter-spacing:-.01em}
.la-p header{padding-top:clamp(32px,5vh,56px)}
.la-ph{margin:20px 0 clamp(36px,4vw,56px)}
.la-ph .bj-dk{margin:0;font-size:16px;line-height:1.6}
.la-bg{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,4vw,64px);margin-top:clamp(40px,5vw,64px);align-items:start}
.la-bg .bj-text{margin:0}
.la-a{position:sticky;top:calc(var(--hdh) + 32px);max-width:320px}

/* 2 Split */
.ls-lead{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,4vw,64px);align-items:stretch;margin-bottom:clamp(72px,8vw,120px)}
.ls-lt{display:flex;flex-direction:column;gap:22px;padding-top:4px}
.ls-tt{display:flex;flex-direction:column;gap:14px}
.ls-lt p{font:400 16px/1.6 var(--f-n);color:var(--ink-2);margin:0;max-width:420px}
.bj .ls-h{font-size:calc(var(--xk)*clamp(34px,3.6vw,54px));line-height:1.06;letter-spacing:-.015em}
.ls-g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:56px 48px}
.ls-c{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:stretch}
.ls-c>.bj-im{align-self:start}
.ls-g{align-items:start}
.ls-t{display:flex;flex-direction:column;gap:12px}
.ls-t .ls-tt{gap:6px}
.bj .ls-c h3{font-size:24px;line-height:1.2;letter-spacing:-.01em}
.ls-t p{font:400 14px/1.55 var(--f-n);color:var(--ink-2);margin:0}
.ls-p header{padding-top:clamp(32px,5vh,56px)}
.ls-ph{margin:20px 0 0}
.ls-ph .bj-t{font-size:calc(var(--xk)*clamp(36px,4vw,60px))}
.ls-ph .bj-dk{margin:0}
.ls-tx{margin-top:clamp(56px,6vw,88px)!important}
.ls-bw .ls-tx{margin-left:0!important}

/* 3 Centred */
.lc-top .wrap{text-align:center}
.lc-top .bj1-tabs{justify-content:center}
.lc-lead{display:flex;flex-direction:column;align-items:center;text-align:center;margin-bottom:clamp(72px,8vw,120px)}
.lc-lead>.bj-im{width:100%}
.bj .lc-k{font:500 11px/16px var(--f-n);letter-spacing:.16em;text-transform:uppercase;color:var(--green)}
.lc-lead>.lc-k{margin-top:32px}
.bj .lc-h{font-size:calc(var(--xk)*clamp(36px,4vw,60px));line-height:1.06;letter-spacing:-.015em;max-width:840px;margin-top:14px}
.lc-lead p{font:400 16px/1.6 var(--f-n);color:var(--ink-2);margin:16px 0 0;max-width:560px}
.lc-lead .bj-d{margin-top:12px}
.lc-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:64px 32px}
.lc-c{display:flex;flex-direction:column;align-items:center;text-align:center}
.lc-c>.bj-im{width:100%}
.lc-c>.lc-k{margin-top:20px}
.bj .lc-c h3{font-size:24px;line-height:1.25;letter-spacing:-.01em;margin-top:8px}
.lc-c .bj-d{margin-top:8px}
/* the back link sits on the page's left edge, apart from the centred header (two stacked capital labels looked cheap) */
.lc-bk{padding-top:clamp(16px,2.5vw,32px)}
.lc-ph{display:flex;flex-direction:column;align-items:center;text-align:center;padding-top:clamp(8px,1.5vw,24px)}
.lc-ph .bj-t{max-width:860px;margin-top:14px}
.lc-ph .bj-dk{margin:18px auto 0}
.lc-ph>.bj-d{margin-top:14px}
.bj .lc-ph .bj-d i,.bj .lc-lead .bj-d i{font-style:normal;color:var(--stone);margin:0 8px}
.lc-p .la-hero{margin:clamp(40px,5vw,64px) 0}
.bj .lc-mh{text-align:center}

/* 4 Lead and two */
.ld-top{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:32px;margin-bottom:clamp(64px,7vw,104px);align-items:stretch}
.ld-lead>.bj-im{flex:1 1 auto;aspect-ratio:auto;min-height:300px}
.ld-lead{display:flex;flex-direction:column}
.bj .ld-h{font-size:calc(var(--xk)*clamp(32px,3.2vw,48px));line-height:1.08;letter-spacing:-.015em;margin-top:22px}
.ld-lead p{font:400 16px/1.6 var(--f-n);color:var(--ink-2);margin:12px 0 10px;max-width:600px}
.ld-side{display:flex;flex-direction:column;gap:40px}
.ld-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:56px 32px}
.ld-g.n4{grid-template-columns:repeat(4,minmax(0,1fr));gap:56px 28px}
.ld-c{display:flex;flex-direction:column}
.bj .ld-c h3{font-size:22px;line-height:1.25;letter-spacing:-.01em;margin:16px 0 6px}
.ld-ph{max-width:calc(var(--tx) + 2 * var(--gut));padding-top:clamp(32px,5vh,56px)}
.ld-ph .bj-t{margin-top:20px}
.ld-ph .bj-dk{margin:16px 0 12px}
.ld-p .la-hero{margin:clamp(40px,5vw,64px) 0}

/* 5 On the photo */
.le-lead{position:relative;display:block;margin-bottom:clamp(72px,8vw,120px);color:var(--paper)}
.bj .le-lead>.bj-im{aspect-ratio:21/9}
.le-lead:not(.sl)>.bj-im::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,16,14,0) 25%,rgba(12,16,14,.55) 55%,rgba(12,16,14,.82))}
.le-lead:not(.sl) .le-t{text-shadow:0 1px 18px rgba(12,16,14,.45)}
.le-lead.sl .bj-slot{justify-content:flex-start;padding-top:9%}
.le-t{position:absolute;left:clamp(20px,3vw,48px);right:clamp(20px,3vw,48px);bottom:clamp(20px,3vw,44px);display:flex;flex-direction:column;gap:12px}
.bj .le-lead:not(.sl) .le-t h2,.bj .le-lead:not(.sl) .le-t h1,.bj .le-lead:not(.sl) .lm{color:var(--paper)}
.bj .le-lead:not(.sl) .lm i{color:rgba(243,239,231,.5)}
.bj .le-h{font-size:calc(var(--xk)*clamp(32px,3.8vw,58px));line-height:1.05;letter-spacing:-.015em;max-width:860px}
.le-lead.sl{color:var(--ink)}
.le-bk{padding-top:clamp(24px,4vh,40px)}
.le-ph{margin:12px 0 0}
.le-ph .bj-t{max-width:900px}
.le-p .bj-text{margin-top:clamp(48px,5vw,72px)}
.le-p .bj-text>.bj-dk{margin:0 0 32px}

@media(max-width:1100px){.ld-g.n4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:1000px){
 .la-bg{grid-template-columns:minmax(0,1fr)}.la-a{position:static;max-width:none}
 .ls-g{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:900px){
 .la-lc,.ls-lead{grid-template-columns:minmax(0,1fr);gap:20px}
 .la-r{padding-bottom:0}
 .la-g,.lc-g,.ld-g{grid-template-columns:repeat(2,minmax(0,1fr));gap:48px 24px}
 .ld-top{grid-template-columns:minmax(0,1fr)}
 .ld-side{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
 .bj .le-lead>.bj-im{aspect-ratio:4/3}
 .bj-more .la-g>:nth-child(3),.bj-more .lc-g>:nth-child(3),.bj-more .ld-g>:nth-child(3){display:none}
}
@media(max-width:640px){
 .la-g,.lc-g,.ld-g,.ld-g.n4,.ld-side{grid-template-columns:minmax(0,1fr);gap:44px}
 .bj-more .la-g>:nth-child(3),.bj-more .lc-g>:nth-child(3),.bj-more .ld-g>:nth-child(3){display:block}
 .bj-more .lc-g>:nth-child(3){display:flex}.bj-more .ld-g>:nth-child(3),.bj-more .la-g>:nth-child(3){display:flex}
 .ls-c{grid-template-columns:minmax(0,1fr);gap:16px}
 .bj .le-lead>.bj-im{aspect-ratio:4/5}
 .bj .le-h{font-size:30px}
}
/* the topic tabs stay on one line on a phone and slide sideways */
@media(max-width:640px){
 .bj .bj-top .bj1-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-left:calc(-1 * var(--gut));margin-right:calc(-1 * var(--gut));padding:0 var(--gut);justify-content:flex-start}
 .bj .bj-top .bj1-tabs::-webkit-scrollbar{display:none}
 .bj1-tabs button{flex:0 0 auto}
 /* the row fades at the right edge, so it is clear there are more topics */
 .bj .bj-top .bj1-tabs{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 48px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 48px),transparent)}
 .bj .bj-top .bj1-tabs.end{-webkit-mask-image:none;mask-image:none}
}

/* dates in a row line up: the cards share their rows (subgrid) */
.lc-g,.ld-g{align-items:start}
@supports(grid-template-rows:subgrid){
 .lc-g>.lc-c{display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:0;justify-items:center}
 .ld-g>.ld-c{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:0}
 .lc-g>.lc-c>.bj-im,.ld-g>.ld-c>.bj-im{width:100%}
}
/* a topic with one or two posts: they share the full width */
@media(min-width:901px){
 .la-g[data-n="2"],.lc-g[data-n="2"],.ld-g[data-n="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:900px){.ld-top{gap:24px}.ld-lead>.bj-im{flex:none;aspect-ratio:3/2;min-height:0}}
.lc-g>.lc-c>h3{align-self:start}

/* tabs: a taller tap area (44px), the same look */
.bj .bj1-tabs button{padding:13px 0;min-width:24px;text-align:center}
.bj .bj-top .bj1-tabs{margin-top:17px}
/* tablets: where the text column would sit a few pixels in from the photo, it takes the photo's width instead */
@media(min-width:641px) and (max-width:720px){.lc-p .bj-text,.lc-cw{max-width:none}}
/* tablets, two columns: an odd last card sits centred under the others */
@media(min-width:641px) and (max-width:900px){.lc-g>.lc-c:last-child:nth-child(odd){grid-column:1/-1;justify-self:center;width:calc(50% - 12px)}}
/* phones: two more posts under an article, not three */
@media(max-width:640px){.bj-more .lc-g>:nth-child(3){display:none}}
/* the space before More is the same whether a post ends on a paragraph or on the car */
.lc-p .bj-text>:last-child{margin-bottom:0}
/* the list: the lead photo is cut lower on a computer, so the lead's topic and title show on the first screen */
@media(min-width:901px){.bj .lc-lead>.la-hero{aspect-ratio:21/9;max-height:calc(100svh - var(--hdh) - 440px);min-height:260px}}
/* cards share their rows (so dates line up) without the grid's row gap leaking inside them; the gap between card
   rows is the card's own bottom padding, taken back under the last row */
@supports(grid-template-rows:subgrid){
 .lc-g{row-gap:0;--rg:64px;margin-bottom:calc(-1 * var(--rg))}
 .lc-g>.lc-c{padding-bottom:var(--rg)}
 @media(max-width:900px){.lc-g{--rg:48px}}
 @media(max-width:640px){.lc-g{--rg:44px}}
}
/* the car of a car post sits under the text, outside it, so the reading rail ends with the last line */
.lc-cw{max-width:var(--tx);margin:0 auto}
.rm #bj-rd{transition:none}
.lc-ph .bj-dk,.lc-lead p{text-wrap:balance}

/* 2026-10-26: the client's own photos in the cards, the car pages and the full-screen view */
img.rc{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit}
.slide,.ph,.mc-ph,.tile .tm{position:relative;overflow:hidden}
.lb-slot{background:none;display:flex;align-items:center;justify-content:center}
.lb-slot img{width:100%;height:100%;object-fit:contain;display:block}