/* nov09a: Culture, Realized. editorial layer. Black, bone, one yellow. Photographs never cropped. */
.x-page{--x-ink:#0c0c0c;--x-bone:#f4f2ee;--x-paper:#fbfaf7;--x-mute:#a8a49c;--x-rule:#2a2a2a;--x-text:#1a1a1a;--x-col:41rem;--x-g:clamp(20px,4vw,72px);background:var(--x-paper)}
.x-page *{box-sizing:border-box}
.x-hw{max-width:1440px;margin-inline:auto;padding-inline:var(--x-g)}
.x-prog{position:fixed;left:0;top:0;height:2px;width:100%;z-index:40;pointer-events:none}
.x-prog span{display:block;height:100%;background:var(--yellow);transform-origin:0 50%;transform:scaleX(0)}

/* kicker */
.x-kick{margin:0;display:flex;flex-wrap:wrap;gap:6px 18px;font:500 .78rem/1.3 var(--body);letter-spacing:.24em;text-transform:uppercase;color:var(--x-mute)}
.x-kick a{color:var(--x-bone);text-decoration:none;border-bottom:1px solid transparent}
.x-kick a:hover{border-color:var(--yellow)}
.x-kick span+span::before,.x-kick a+span::before{content:"";display:inline-block;width:22px;height:1px;background:var(--yellow);vertical-align:middle;margin-right:16px}

/* hero */
.x-hero{background:var(--x-ink);color:var(--x-bone);padding-top:clamp(40px,6vw,104px)}
.x-h1{margin:clamp(22px,2.6vw,40px) 0 0;font:600 clamp(3rem,10.4vw,11.5rem)/.84 var(--display);letter-spacing:-.03em;text-transform:uppercase;color:var(--x-bone);max-width:none}
.x-deck{margin:clamp(22px,2.6vw,40px) 0 0;max-width:46ch;font:400 clamp(1.15rem,1.9vw,1.75rem)/1.38 var(--body);color:#e6e2da}
.x-meta{margin:clamp(20px,2.2vw,32px) 0 0;display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;font:500 .8rem/1.3 var(--body);letter-spacing:.18em;text-transform:uppercase;color:var(--x-mute)}
.x-meta b{color:var(--x-bone);font-weight:600}
.x-meta i{width:4px;height:4px;border-radius:50%;background:var(--yellow)}
.x-cover{margin:clamp(36px,5vw,80px) 0 0;background:#000}
.x-cover img{display:block;width:100%;height:auto}
.x-cover figcaption{max-width:1440px;margin-inline:auto;padding:14px var(--x-g) 22px;font:400 .82rem/1.45 var(--body);letter-spacing:.06em;color:var(--x-mute)}

/* reading column */
.x-art{background:var(--x-paper);color:var(--x-text)}
.x-ch{padding:clamp(48px,6vw,104px) 0 clamp(36px,4vw,72px)}
.x-ch0{padding-top:clamp(56px,7vw,120px)}
.x-col{max-width:calc(var(--x-col) + 2*var(--x-g));margin-inline:auto;padding-inline:var(--x-g)}
.x-col p{margin:0 0 1.35em;font:400 clamp(1.1rem,1.02rem + .38vw,1.3rem)/1.72 var(--body);color:var(--x-text);max-width:none;overflow-wrap:break-word}
.x-col a{color:inherit;text-decoration:underline;text-decoration-color:#c9b400;text-decoration-thickness:1.5px;text-underline-offset:.18em}
.x-col a:hover{background:var(--yellow);text-decoration-color:var(--x-ink)}
.x-col em,.x-col i{font-style:italic}

.x-col p.x-lede{font:500 clamp(1.45rem,1.2rem + 1.1vw,2.1rem)/1.24 var(--body);letter-spacing:-.012em;color:var(--x-ink);margin-bottom:1.1em}
.x-col p.x-say{margin:1.6em 0 1.4em;padding-top:.9em;border-top:1px solid var(--x-ink);font:500 clamp(1.45rem,1.2rem + 1.1vw,2.1rem)/1.24 var(--body);letter-spacing:-.012em;color:var(--x-ink)}
.x-orn{text-align:center;color:#b5b0a6;letter-spacing:.3em;margin:2.2em 0!important;font-size:1rem!important}

/* chapter openers */
.x-chh{background:var(--x-ink);color:var(--x-bone);padding:clamp(56px,8vw,140px) 0 clamp(48px,6vw,104px)}
.x-chw{max-width:1440px;margin-inline:auto;padding-inline:var(--x-g)}
.x-chn{margin:0 0 clamp(14px,1.6vw,24px);font:500 .78rem/1.2 var(--body);letter-spacing:.3em;text-transform:uppercase;color:var(--yellow)}
.x-chh h2{margin:0;max-width:16ch;font:600 clamp(2.4rem,7.2vw,7.6rem)/.88 var(--display);letter-spacing:-.025em;text-transform:uppercase;color:var(--x-bone);overflow-wrap:break-word}

/* figures: black plates, never cropped */
.x-fig{margin:clamp(28px,4vw,64px) 0;background:var(--x-ink);color:var(--x-bone);padding:clamp(20px,4vw,72px) var(--x-g) clamp(18px,2.4vw,36px)}
.x-frame{display:flex;justify-content:center}
.x-frame img{display:block;width:min(100%,1200px,calc(84vh * var(--r)));height:auto;aspect-ratio:var(--r);object-fit:contain;background:#111}
.x-tall .x-frame img{width:min(100%,860px,calc(84vh * var(--r)))}
.x-fig figcaption{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;max-width:52rem;margin:clamp(16px,2vw,28px) auto 0;font:400 .92rem/1.55 var(--body);color:#c9c5bd}
.x-fig figcaption b{color:var(--x-bone);font-weight:600}
.x-fig figcaption a{color:var(--x-bone);text-decoration:underline;text-decoration-color:var(--yellow);text-underline-offset:.16em}
.x-cn{font:600 .74rem/1.9 var(--display);letter-spacing:.2em;color:var(--yellow)}

/* video */
.x-vbox{position:relative;max-width:1200px;margin-inline:auto;aspect-ratio:16/9;background:#000;overflow:hidden}
.x-vposter{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:10px;text-align:center;background:radial-gradient(ellipse at 50% 40%,#1d1d1d 0,#050505 70%)}
.x-vk{font:500 .78rem/1.2 var(--body);letter-spacing:.3em;text-transform:uppercase;color:var(--x-mute)}
.x-vt{font:600 clamp(2.2rem,7vw,6.4rem)/.9 var(--display);text-transform:uppercase;letter-spacing:-.02em;color:var(--x-bone)}
.x-vy{font:500 .9rem/1 var(--display);letter-spacing:.3em;color:var(--yellow)}
.x-play{position:absolute;inset:0;width:100%;height:100%;border:0;background:transparent;cursor:pointer}
.x-play:focus-visible{outline:3px solid var(--yellow);outline-offset:-3px}
.x-pl{margin-top:clamp(8px,2vw,24px);font:600 .8rem/1 var(--display);letter-spacing:.24em;text-transform:uppercase;color:#111;background:var(--yellow);padding:14px 22px}
.x-vbox:hover .x-pl{background:var(--x-bone)}
.x-vbox iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* numbers */
.x-stats{max-width:1200px;margin:clamp(20px,3vw,48px) auto clamp(36px,4vw,64px);padding-inline:var(--x-g);display:grid;grid-template-columns:minmax(0,1fr);gap:0}
@media (min-width:760px){.x-stats{grid-template-columns:repeat(3,minmax(0,1fr))}}
.x-stats div{display:grid;gap:10px;align-content:start;padding:22px 0 24px;border-top:1px solid var(--x-ink)}
@media (min-width:760px){.x-stats div{padding:22px 28px 24px 0}.x-stats div+div{padding-left:28px;border-left:1px solid #d7d3cb}}
.x-stats b{font:600 clamp(3.2rem,6vw,5.6rem)/.86 var(--display);letter-spacing:-.02em;color:var(--x-ink)}
.x-stats span{font:400 1rem/1.5 var(--body);color:var(--x-text)}
.x-stats i{font:500 .72rem/1.2 var(--body);font-style:normal;letter-spacing:.2em;text-transform:uppercase;color:#7a766e}

/* end matter */
.x-end{padding:clamp(24px,3vw,48px) 0 clamp(56px,7vw,112px);border-top:1px solid #e3dfd7}
.x-col p.x-bio{font-style:italic;font-size:1.05rem;color:#4a4a4a;border-left:2px solid var(--yellow);padding-left:18px}
.x-end .cr-notes{margin-top:clamp(28px,3vw,48px)}
.x-end .cr-notes h2{font:600 .82rem/1.2 var(--display);letter-spacing:.24em;text-transform:uppercase;margin:0 0 16px;color:var(--x-ink)}
.x-end .cr-notes ol{margin:0;padding-left:1.2em;display:grid;gap:10px}
.x-end .cr-notes li{font:400 .9rem/1.6 var(--body);color:#4a4a4a;overflow-wrap:anywhere}
.x-end .cr-notes a{color:#1a1a1a}

/* keep reading */
.x-more{background:var(--x-ink);color:var(--x-bone);padding:clamp(48px,6vw,104px) 0}
.x-mw{max-width:1440px;margin-inline:auto;padding-inline:var(--x-g)}
.x-mg{margin-top:clamp(24px,3vw,44px);display:grid;grid-template-columns:minmax(0,1fr);gap:1px;background:var(--x-rule);border:1px solid var(--x-rule)}
@media (min-width:900px){.x-mg{grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr)}}
.x-mc{display:grid;gap:10px;align-content:start;padding:clamp(20px,2.4vw,36px);background:var(--x-ink);color:var(--x-bone);text-decoration:none}
.x-mi{display:block;aspect-ratio:16/9;overflow:hidden;background:#000;margin-bottom:8px}
.x-mi img{width:100%;height:100%;object-fit:cover;display:block}
.x-mk{font:500 .74rem/1.3 var(--body);letter-spacing:.22em;text-transform:uppercase;color:var(--x-mute)}
.x-mt{font:600 clamp(1.5rem,2.4vw,2.4rem)/.95 var(--display);text-transform:uppercase;letter-spacing:-.01em}
.x-md{color:#bdb9b1;line-height:1.5}
.x-go{margin-top:8px;justify-self:start;font:500 .78rem/1.3 var(--body);letter-spacing:.2em;text-transform:uppercase;border-bottom:1px solid var(--x-bone);padding-bottom:3px}
.x-mc:hover .x-mt{color:var(--yellow)}

/* archive */
.xa-mast{background:var(--x-ink);color:var(--x-bone);padding:clamp(40px,6vw,104px) 0 clamp(40px,5vw,88px)}
.xa-h1{margin:clamp(22px,2.6vw,40px) 0 0;font:600 clamp(3.4rem,15vw,15rem)/.82 var(--display);letter-spacing:-.035em;text-transform:uppercase;color:var(--x-bone)}
.xa-sub{margin-top:clamp(24px,3vw,48px);display:grid;gap:14px 48px;grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){.xa-sub{grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:end}}
.xa-sub p{margin:0;color:#cfcbc3;line-height:1.55;font-size:clamp(1rem,1.2vw,1.15rem);max-width:none}
.xa-sub .xa-line{font:400 clamp(1.4rem,2.6vw,2.4rem)/1.2 var(--body);color:var(--x-bone)}
.xa-feat{background:var(--x-ink)}
.xa-fl{display:block;color:var(--x-bone);text-decoration:none}
.xa-fi{margin:0;background:#000}
.xa-fi img{display:block;width:100%;height:auto}
.xa-ft{padding-top:clamp(28px,3.4vw,56px);padding-bottom:clamp(48px,6vw,104px);display:grid;gap:16px}
.xa-k{margin:0;font:500 .78rem/1.3 var(--body);letter-spacing:.22em;text-transform:uppercase;color:var(--x-mute)}
.xa-k b{color:var(--x-ink);background:var(--yellow);padding:.25em .55em;margin-right:10px;font-weight:600}
.xa-fh{margin:0;font:600 clamp(2.6rem,8vw,8.4rem)/.86 var(--display);letter-spacing:-.03em;text-transform:uppercase}
.xa-fl:hover .xa-fh{text-decoration:underline;text-decoration-color:var(--yellow);text-decoration-thickness:4px;text-underline-offset:.1em}
.xa-fd{margin:0;max-width:52ch;font:400 clamp(1.1rem,1.6vw,1.5rem)/1.42 var(--body);color:#e0dcd4}
.xa-go{justify-self:start;font:500 .8rem/1.3 var(--body);letter-spacing:.2em;text-transform:uppercase;border-bottom:1px solid var(--x-bone);padding-bottom:4px}
.xa-list{background:var(--x-paper);padding:clamp(56px,7vw,120px) 0}
.xa-lhd{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px 24px;border-bottom:1px solid var(--x-ink);padding-bottom:16px}
.xa-lhd h2{margin:0;font:600 clamp(1.6rem,3vw,2.6rem)/1 var(--display);text-transform:uppercase;letter-spacing:-.01em;color:var(--x-ink)}
.xa-lhd p{margin:0;font:500 .78rem/1.3 var(--body);letter-spacing:.2em;text-transform:uppercase;color:#7a766e}
.xa-rows{list-style:none;margin:0;padding:0}
.xa-row{display:grid;grid-template-columns:minmax(0,1fr);gap:14px 32px;padding:clamp(24px,3vw,44px) 0;border-bottom:1px solid #d7d3cb;color:var(--x-text);text-decoration:none;align-items:center}
@media (min-width:760px){.xa-row{grid-template-columns:clamp(64px,8vw,140px) minmax(0,1fr) minmax(0,.9fr)}}
.xa-n{font:600 clamp(2.6rem,6vw,5.6rem)/.8 var(--display);color:var(--x-ink);letter-spacing:-.03em}
.xa-t{display:grid;gap:10px}
.xa-t .xa-k{color:#7a766e}
.xa-h{font:600 clamp(1.8rem,3.6vw,3.4rem)/.92 var(--display);text-transform:uppercase;letter-spacing:-.015em;color:var(--x-ink)}
.xa-d{line-height:1.5;color:#4a4a4a;max-width:52ch}
.xa-i{display:block;aspect-ratio:16/9;background:#e9e6df;overflow:hidden}
.xa-i img{width:100%;height:100%;object-fit:contain;background:#0c0c0c;display:block}
a.xa-row:hover .xa-h{text-decoration:underline;text-decoration-color:var(--yellow);text-decoration-thickness:3px;text-underline-offset:.1em}
.xa-soon .xa-n,.xa-soon .xa-h{color:#b5b0a6}
.xa-soon .xa-i{background:repeating-linear-gradient(135deg,#efece6 0 12px,#e7e3dc 12px 24px)}

@media (max-width:480px){.x-page{--x-g:16px}.x-fig{padding-inline:0}.x-fig figcaption{padding-inline:16px}.x-vbox{margin-inline:0}}
@media (prefers-reduced-motion:reduce){.x-prog{display:none}}

/* nov09b: jump links, next step, archive badge masthead */
.x-meta a{color:var(--x-bone);text-decoration:none;border-bottom:1px solid var(--yellow)}
.x-meta a:hover{color:var(--yellow)}
.x-meta span b{color:var(--x-bone)}
.x-toc{background:var(--x-ink);color:var(--x-bone);border-top:1px solid var(--x-rule);padding:clamp(22px,2.6vw,36px) 0 clamp(26px,3vw,44px)}
.x-tk{margin:0 0 14px;font:500 .74rem/1.2 var(--body);letter-spacing:.26em;text-transform:uppercase;color:var(--x-mute)}
.x-toc ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:0}
@media (min-width:760px){.x-toc ol{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1200px){.x-toc ol{grid-template-columns:repeat(4,minmax(0,1fr))}}
.x-toc li{border-top:1px solid var(--x-rule)}
.x-toc a{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:baseline;padding:14px 18px 14px 0;color:var(--x-bone);text-decoration:none;font:600 clamp(1rem,1.3vw,1.2rem)/1.15 var(--display);text-transform:uppercase;letter-spacing:.01em}
.x-toc a span{font:500 .74rem/1 var(--body);letter-spacing:.2em;color:var(--yellow)}
.x-toc a:hover,.x-toc a:focus-visible{color:var(--yellow)}
.x-chh{scroll-margin-top:72px}
.x-next{display:flex;flex-wrap:wrap;gap:14px 24px;align-items:center;margin:8px 0 clamp(28px,3vw,44px)}
.x-nb{display:inline-flex;align-items:center;min-height:50px;padding:0 22px;background:var(--x-ink);color:var(--x-bone)!important;text-decoration:none!important;font:600 .82rem/1.2 var(--display);letter-spacing:.14em;text-transform:uppercase}
.x-nb:hover{background:var(--yellow)!important;color:var(--x-ink)!important}
.x-ns{font:500 .82rem/1.3 var(--body);letter-spacing:.14em;text-transform:uppercase;text-decoration:none!important;border-bottom:1px solid var(--x-ink);padding-bottom:3px}
.x-ns:hover{background:var(--yellow)}
.xa-head{margin-top:clamp(24px,3vw,44px);display:grid;grid-template-columns:minmax(0,1fr);gap:28px 56px;align-items:end}
@media (min-width:760px){.xa-head{grid-template-columns:clamp(220px,28vw,400px) minmax(0,1fr)}}
.xa-badge{margin:0;line-height:0}
.xa-badge img{display:block;width:clamp(200px,28vw,400px);max-width:100%;height:auto}
.xa-head .xa-sub{margin-top:0;display:grid;gap:14px;grid-template-columns:minmax(0,1fr)}
.xa-subs{justify-self:start;color:var(--x-bone);text-decoration:none;font:500 .8rem/1.3 var(--body);letter-spacing:.16em;text-transform:uppercase;border-bottom:1px solid var(--yellow);padding-bottom:3px}
.xa-subs:hover{color:var(--yellow)}

/* nov10a: archive masthead, compact and quiet. Small badge as a mark beside the kicker; title sized to read, not to shout. */
.xa-mast{padding:clamp(28px,4.5vw,80px) 0 clamp(28px,4vw,64px)}
.xa-top{display:flex;align-items:center;gap:16px}
.xa-mark{display:block;width:clamp(48px,4.6vw,72px);height:auto;flex:none}
.xa-mast .xa-h1{margin:clamp(18px,2.4vw,36px) 0 0;font:600 clamp(2.7rem,8.2vw,8.6rem)/.88 var(--display);letter-spacing:-.025em;text-transform:uppercase;color:var(--x-bone)}
.xa-h1 span{color:var(--yellow)}
.xa-mast .xa-sub{margin-top:clamp(16px,2.2vw,32px);gap:10px 48px}
.xa-mast .xa-line{font:400 clamp(1.1rem,1.9vw,1.75rem)/1.32 var(--body);color:var(--x-bone);max-width:34ch}
.xa-meta{font-size:.95rem!important;color:#a8a49c!important}
.xa-meta .xa-subs{margin-left:6px;white-space:nowrap}
.xa-top .x-kick{flex-wrap:nowrap;white-space:nowrap;min-width:0}
@media (max-width:520px){.xa-top .x-kick{font-size:.68rem;letter-spacing:.18em;gap:6px 12px}.xa-top .x-kick span+span::before,.xa-top .x-kick a+span::before{width:14px;margin-right:10px}.xa-meta .xa-subs{display:inline-block;margin:8px 0 0}}
/* nov10a: poster-image videos (Issue 01) */
.x-vimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.85}
.x-play{display:flex;align-items:center;justify-content:center}
.x-play .x-pl{margin:0}
.x-fig.cr-vid{display:block;margin:clamp(28px,4vw,64px) 0}
.x-vid .x-vbox{width:100%}
.x-vid figcaption{color:#c9c5bd}
.x-vid figcaption b{color:var(--x-bone)}
/* nov11a: stat figures as live type, sized for phones first */
.x-sr{max-width:1100px;margin-inline:auto;border-top:1px solid #3a3a3a}
.x-srow{display:grid;grid-template-columns:var(--nw) minmax(0,1fr);align-items:center;column-gap:.32em;font-size:clamp(3.1rem,9vw,7.2rem);padding:.16em 0;border-bottom:1px solid #3a3a3a}
.x-sn{font:600 1em/1 var(--display);letter-spacing:-.02em;color:var(--x-bone);white-space:nowrap}
.x-sn.x-hot{color:var(--yellow)}
.x-st{min-width:0;display:grid;gap:.35rem}
.x-sh{margin:0;font:600 clamp(1.2rem,2.5vw,2.2rem)/1.05 var(--display);text-transform:uppercase;letter-spacing:.005em;color:var(--x-bone)}
.x-sd{margin:0;font:400 clamp(.98rem,1.35vw,1.25rem)/1.4 var(--body);color:#c9c5bd}
.x-statfig figcaption{margin-top:clamp(18px,2.2vw,30px)}
@media (max-width:480px){.x-statfig{padding-inline:16px}.x-statfig figcaption{padding-inline:0}}
.x-fig figcaption{font-size:clamp(1rem,.95rem + .25vw,1.12rem)}
/* nov11b: accessibility floor. No reading text under 17px on a phone. */
.x-sh{font-size:clamp(1.3rem,2.5vw,2.2rem)}
.x-sd{font-size:clamp(1.07rem,1.35vw,1.3rem);color:#d6d2ca}
.x-fig figcaption{font-size:clamp(1.07rem,1rem + .25vw,1.15rem);line-height:1.5;color:#d6d2ca}
.x-meta,.x-kick,.x-tk,.x-cover figcaption{font-size:max(.8rem,13px)}
.x-end .cr-notes li{font-size:1.02rem}
@media (max-width:480px){.x-srow{font-size:2.8rem;grid-template-columns:var(--nw) minmax(0,1fr)}}
/* nov12a: accessibility floor for labels on Culture, Realized. pages and the homepage module: 14px minimum, 4.5:1 contrast */
.x-chn,.x-vk,.x-pl,.x-toc a span,.x-kick,.x-meta,.x-tk,.xa-k,.xa-subs,.xa-go,.xa-lhd p,.x-cover figcaption,.x-mk,.x-go,.x-cn{font-size:max(14px,.875rem)!important}
.xa-lhd p,.xa-t .xa-k{color:#625e57}
.xa-soon .xa-n,.xa-soon .xa-h{color:#8a857c}
@media (max-width:420px){.xa-top{align-items:flex-start}.xa-top .x-kick{flex-wrap:wrap;white-space:normal}}
@media (max-width:359px){.xa-top .x-kick span{display:none}}
/* nov13e: linked figures. The link wrapper spans the frame so the image sizes and centres like every other figure. */
.x-frame>a{display:flex;justify-content:center;width:100%;min-width:0}
/* nov13e: no underline through tight display type. Hover is a colour shift on dark, a yellow highlight on light. */
.xa-fl:hover .xa-fh{text-decoration:none;color:var(--yellow)}
.xa-fh{text-wrap:balance;transition:color .2s}
a.xa-row:hover .xa-h{text-decoration:none;background:linear-gradient(transparent 62%,var(--yellow) 62%);background-repeat:no-repeat}
.xa-h{text-wrap:balance}