/* Shared, self-hosted fonts; loaded only on the Cover Notes explainer. */
@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url('../../../assets/fonts/inter-latin.woff2') format('woff2')}
@font-face{font-family:"Playfair Display";font-style:normal;font-weight:400 900;font-display:swap;src:url('../../../assets/fonts/playfair-latin.woff2') format('woff2')}
@font-face{font-family:"Playfair Display";font-style:italic;font-weight:400 900;font-display:swap;src:url('../../../assets/fonts/playfair-italic-latin.woff2') format('woff2')}

:root{
  --bg:#FCFBF8; --white:#FFFFFF; --soft:#F5F3EE; --line:#E8E4DC; --line2:#DCD7CD;
  --ink:#14161A; --ink2:#2A2D33; --text:#3B3E45; --grey:#6B6F78; --faint:#9A9DA4;
  --wall1:#BDB8AF; --wall2:#D2CEC6; --wall3:#E2DFD8;
  --red:#C8102E; --red-d:#A50D26; --hl:rgba(200,16,46,.13); --blush:#FBEDEF;
  --disp:"Playfair Display",Georgia,"Times New Roman",serif;
  --sans:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --m:max(48px,calc((100vw - 1344px) / 2 + 48px));
  --e:cubic-bezier(.2,.7,.2,1);
  --sh:0 1px 2px rgba(20,22,26,.04),0 12px 28px rgba(20,22,26,.06),0 40px 80px rgba(20,22,26,.08);
}
@media (max-width:767px){:root{--m:20px}}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font:400 17px/1.55 var(--sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
::selection{background:var(--red);color:#fff}
a{color:inherit}
img{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.tnum{font-variant-numeric:tabular-nums}
.wrap{padding:0 var(--m)}
.g{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px}
@media (max-width:959px){.g{display:block}}
h1,h2,h3,.disp{font-variant-numeric:lining-nums}

.h2{margin:0;font:600 clamp(34px,3.3vw,50px)/1.1 var(--disp);letter-spacing:-.018em;color:var(--ink)}
.h2 em{font-style:italic;font-weight:500}
.h2>div[aria-hidden],#claim>div[aria-hidden],#sub>div[aria-hidden]{padding:0 .14em .16em 0;margin:0 -.14em -.16em 0}
.an .stand,.ed-head p{text-wrap:balance}
.btn{display:inline-flex;align-items:center;height:52px;padding:0 26px;border-radius:4px;background:var(--red);color:#fff;font:600 16px/1 var(--sans);text-decoration:none;transition:background .18s var(--e)}
.btn:hover{background:var(--red-d)}
.tl{font:500 16px/1.3 var(--sans);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;transition:color .18s var(--e)}
.tl:hover{color:var(--red)}

/* running head */
.rh{position:fixed;left:0;right:0;top:0;z-index:60;height:56px;display:flex;align-items:center;gap:18px;padding:0 var(--m);background:rgba(252,251,248,.97);border-bottom:1px solid var(--line)}
.rmast{display:flex;align-items:baseline;gap:7px;text-decoration:none;color:var(--ink)}
.rh img{height:15px;width:auto;transform:translateY(3px)}
.rh .by{font:400 13px var(--sans);color:var(--grey)}
.rh .ttl{font:700 21px/1 var(--disp);letter-spacing:-.01em}
.rh .nx{margin-left:auto;font:500 14px var(--sans);color:var(--grey);font-variant-numeric:tabular-nums}
.rh .nx b{font-weight:650;color:var(--ink)}
.rh .btn{height:36px;padding:0 16px;font-size:14px}
@media (max-width:640px){.rh .nx{display:none}.rh .btn{margin-left:auto}}

/* the keep-scrolling cue */
.cue{all:unset;box-sizing:border-box;position:fixed;left:50%;bottom:92px;z-index:55;width:56px;height:44px;margin-left:-28px;color:var(--ink);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:color .18s var(--e)}
.cue:hover{color:var(--red)}
.cue svg{width:30px;height:30px}
.cue:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.cue{opacity:0;visibility:hidden}
.cue.on svg{animation:bob 1.1s ease-in-out infinite}
@keyframes bobBig{0%,100%{transform:translateY(-4px)}50%{transform:translateY(5px)}}
.cue.on svg{animation-name:bobBig}
.navs{position:fixed;right:24px;bottom:24px;z-index:55;display:flex;flex-direction:column;gap:8px}
.nb{all:unset;box-sizing:border-box;width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.94);box-shadow:0 0 0 1px var(--line),0 8px 20px rgba(20,22,26,.08);color:var(--ink);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:color .18s var(--e),box-shadow .18s var(--e),opacity .2s}
.nb:hover{color:var(--red);box-shadow:0 0 0 1px var(--red),0 8px 20px rgba(20,22,26,.1)}
.nb:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.nb[disabled]{opacity:.35;cursor:default;pointer-events:none}
@keyframes bob{0%,100%{transform:translateY(-2px)}50%{transform:translateY(3px)}}
@media (prefers-reduced-motion:reduce){.cue svg{animation:none}}
@media (max-width:959px){.cue,.navs{display:none}}

.js .stack,.js .wall,.js .mhead,.js .rh{opacity:0;animation:cnUnhide 0s 6s forwards}
@keyframes cnUnhide{to{opacity:1}}
@keyframes cnShow{to{visibility:visible}}
/* every reveal starts hidden in CSS and is shown only in the step that sets its start state; it all falls open after 6s if the script never takes over */
.js #claim,.js #sub,.js .h2{visibility:hidden;animation:cnShow 0s 6s forwards}
.js #acts{opacity:0;animation:cnUnhide 0s 6s forwards}
.js .w{opacity:0}
.js:not(.cn-on) .w{animation:cnUnhide 0s 6s forwards}
@media (min-width:960px) and (prefers-reduced-motion:no-preference){.js #card{clip-path:inset(0% 0% 100% 0% round 10px)}.js .slot{opacity:0}.js .panel[data-p="2"]{visibility:hidden;opacity:0}}

/* ---------- 1. the wall ---------- */
.wire{position:relative;height:100vh;min-height:740px;overflow:hidden;background:radial-gradient(70% 60% at 80% 40%,#FFFFFF 0,rgba(255,255,255,0) 70%),var(--bg)}
.hgrid{position:relative;z-index:1;height:100%;align-content:center;padding-top:56px}
.fg{grid-column:1/8;align-self:center}
.dline{margin:0;font:500 14px/18px var(--sans);color:var(--grey);font-variant-numeric:tabular-nums}
.dline b{color:var(--red);font-weight:650}
.wm{margin:14px 0 0;display:flex;flex-direction:column;align-items:flex-start;width:max-content;max-width:100%;font:800 clamp(52px,5.8vw,88px)/.98 var(--disp);letter-spacing:-.025em;color:var(--ink);font-variant-numeric:lining-nums}
.wm .wmt{white-space:nowrap}
.wm .wsig{align-self:flex-end;display:flex;align-items:center;gap:12px;margin-top:.18em;font:400 max(19px,.26em)/1 var(--sans);letter-spacing:0;color:var(--grey)}
.wm .wlogo{height:1.6em;width:auto}
.mhead{display:flex;flex-direction:column;align-items:flex-start;width:max-content;max-width:100%}
.stack{display:grid;margin-top:38px}
.stack>*{grid-area:1/1}
.claim{margin:0;max-width:23em;font:600 clamp(21px,1.85vw,28px)/1.28 var(--disp);letter-spacing:-.01em;color:var(--ink)}
.claim em{font-style:italic;font-weight:500}
.sub{margin:14px 0 0;max-width:36em;font:400 clamp(14.5px,1.2vw,17px)/1.6 var(--sans);color:var(--text)}
@media (min-width:960px){#sub{white-space:nowrap;max-width:none}}
.acts{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin-top:32px}
.acts-member{margin:0;font:400 15px/1.3 var(--sans);color:var(--grey);white-space:nowrap}
.acts-member a{position:relative;font-size:inherit;color:var(--ink)}
.acts-member a::after{content:'';position:absolute;inset:-13px -6px}
.acts-member a:hover{color:var(--red)}
.acts-member a:focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:2px}
.fgb{align-self:start}
.cardcell{grid-column:8/13;position:relative;align-self:stretch}
.card{position:absolute;left:0;right:0;top:0;will-change:clip-path;background:var(--white);border-radius:10px;box-shadow:0 0 0 1px var(--line),var(--sh);padding:26px 28px 20px}
.mast{display:flex;align-items:baseline;gap:8px}
.mast b{font:800 27px/1 var(--disp);letter-spacing:-.02em;color:var(--ink)}
.mast span{font:500 13px var(--sans);color:var(--grey)}
.mast img{height:13px;width:auto;transform:translateY(2px)}
.cd{margin-top:8px;font:500 13px var(--sans);color:var(--grey);font-variant-numeric:tabular-nums}
.cd b{color:var(--red);font-weight:650}
.rr{height:3px;background:var(--red);margin-top:12px}
.grp{margin:16px 0 2px;font:650 13px var(--sans);color:var(--red)}
.slots{list-style:none;margin:0;padding:0;counter-reset:s}
.slots li{display:grid;grid-template-columns:22px 1fr;gap:4px;padding:9px 0;border-top:1px solid var(--line);counter-increment:s}
.slots li:first-child{border-top:0}
.slots li::before{content:counter(s);font:650 15px/21px var(--sans);color:var(--red);font-variant-numeric:tabular-nums}
.slot{display:block;font:600 15px/21px var(--sans);color:var(--ink)}
.clist{position:relative;max-height:calc(100vh - 480px);min-height:300px;overflow:hidden;-webkit-mask-image:linear-gradient(transparent 0,#000 12px);mask-image:linear-gradient(transparent 0,#000 12px)}
.slots li:first-child{padding-top:12px}
.cfade{position:absolute;left:0;right:0;bottom:0;height:130px;background:linear-gradient(rgba(255,255,255,0),#fff 85%);opacity:0;pointer-events:none}
.lp{grid-column:2;height:0;overflow:hidden}
.lp p{margin:8px 0 2px;font:400 14.5px/1.6 var(--sans);color:var(--text)}
.lp b{font-weight:650;color:var(--ink)}
.pil{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;margin-left:4px;border-radius:50%;background:var(--red);color:#fff;font:700 13px/1 var(--disp);text-decoration:none;vertical-align:1px;transition:transform .2s var(--e),background .18s var(--e)}
.pil:hover{background:var(--red-d);transform:scale(1.12)}
.card .more{margin:8px 0 0;padding-top:12px;border-top:1px solid var(--line);font:500 13px var(--sans);color:var(--grey)}
.wall-mask{position:absolute;inset:0 0 0 50%;z-index:2;pointer-events:none;-webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.55) 18%,#000 36%);mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.55) 18%,#000 36%)}
.wall{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:28px;padding:0 var(--m) 0 0;overflow:hidden;}
.col{display:flex;flex-direction:column;justify-content:center;min-width:0}
.wall-mask::before,.wall-mask::after{content:"";position:absolute;left:0;right:0;height:100px;z-index:1;pointer-events:none}
.wall-mask::before{top:0;background:linear-gradient(var(--bg),rgba(252,251,248,0))}
.wall-mask::after{bottom:0;background:linear-gradient(rgba(252,251,248,0),var(--bg))}
.w{flex:none;height:22px;font:400 14px/22px var(--sans);color:var(--wall2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transform-origin:0 50%}
.w.d1{font-size:15px;font-weight:500;color:var(--wall1)}
.w.d3{font-size:13px;color:var(--wall3)}
.w.hot{position:relative;padding:0 4px;margin-left:-4px;border-radius:3px;background:linear-gradient(var(--hl),var(--hl)) 0 0/0% 100% no-repeat}

/* ---------- 2. the benefit: two stories, read sideways ---------- */
.an{position:relative;z-index:1;height:100vh;min-height:620px;background:var(--white);overflow:hidden}
.an-in{height:100%;display:flex;flex-direction:column;justify-content:center;padding-top:56px}
.an-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px}
.an-head .h2{max-width:15em}
.an .stand{margin:22px 0 0;max-width:34em;font:400 18px/1.55 var(--sans);color:var(--text)}
.an-count{flex:none;font:600 14px var(--sans);color:var(--grey);font-variant-numeric:tabular-nums;text-align:right}
.an-count span{color:var(--ink)}
.an-count i{display:block;width:120px;height:2px;margin-top:10px;background:var(--line);position:relative;overflow:hidden}
.an-count i b{position:absolute;left:0;top:0;bottom:0;width:50%;background:var(--red)}
.an-view{position:relative;flex-shrink:0;margin:clamp(24px,4.6vh,44px) calc(-1 * var(--m)) 0;overflow:hidden}
.an-track{display:flex;width:max-content}
.panel{position:relative;box-sizing:border-box;width:100vw;padding:0 var(--m);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px}
.pw{grid-column:1/8}
.an-hl{margin:0 0 20px;max-width:24em;font:600 clamp(24px,2.1vw,31px)/1.22 var(--disp);letter-spacing:-.01em;color:var(--ink);font-variant-numeric:lining-nums}
.an-hl .k{display:block;margin-bottom:8px;font:650 13px/16px var(--sans);letter-spacing:.02em;color:var(--red)}
.an-p{margin:0;font:400 clamp(19px,min(1.85vw,2.75vh),27px)/1.5 var(--disp);color:var(--ink);font-variant-numeric:lining-nums}
.ph{border-radius:3px;background:linear-gradient(var(--red),var(--red)) 0 100%/100% 2px no-repeat,linear-gradient(var(--blush),var(--blush)) 0 0/100% 100% no-repeat;padding:1px 2px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.full{display:inline-block;margin-top:18px;font-size:15px}
.an-foot{margin:34px 0 0;max-width:46em;font:500 15px/1.55 var(--sans);color:var(--grey)}
.notes{grid-column:9/13;position:relative}
.note{position:absolute;left:0;right:0}
.note b{display:block;font:650 13px/16px var(--sans);letter-spacing:.02em;color:var(--red)}
.note span{display:block;margin-top:4px;font:400 16px/24px var(--sans);color:var(--text)}
.leaders{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.leaders path{fill:none;stroke:var(--line2);stroke-width:1}
.notes-m{display:none}
.an-space{height:400vh}

/* ---------- 3. the edition, drawn the way the reader page draws it ---------- */
.ed{position:relative;z-index:5;background:var(--soft);padding:120px 0 140px;border-radius:16px 16px 0 0;box-shadow:0 -30px 70px -30px rgba(20,22,26,.18)}
.ed-head{max-width:880px;margin:0 auto}
.ed-head .h2{text-wrap:balance}
.ed-head p{margin:22px 0 0;font:400 18px/1.55 var(--sans);color:var(--text)}
.t-page{max-width:880px;margin:48px auto 0;background:#fff;border-radius:12px;box-shadow:0 0 0 1px var(--line),var(--sh)}
.t-in{position:relative;max-width:760px;margin:0 auto;padding:40px 24px 30px;--ti:#14181F;--tb:#1F242C;--tg:#8A93A0;--tl:#37709F;--th:#F0F0F0;--tline:#E6E6E6}
.t-mast{display:flex;align-items:baseline;gap:8px;margin:0 0 18px;padding-bottom:10px;border-bottom:1px solid var(--tline)}
.t-mast .cn{font:700 30px/1 var(--disp);color:var(--ti)}
.t-mast .by{font:400 13px var(--sans);color:var(--tg)}
.t-mast img{height:15px;width:auto;transform:translateY(4px)}
.t-top{padding-bottom:15px;border-bottom:1px solid var(--ti)}
.t-date{margin:0;font:700 34px/1.08 var(--sans);letter-spacing:-.02em;color:var(--ti)}
.t-status{margin:11px 0 0;font:400 12.5px var(--sans);color:var(--tg)}
.t-status b{color:var(--ti);font-weight:600}
.t-live{display:inline-block;width:7px;height:7px;border-radius:50%;background:#CFD5DC;margin-right:7px;vertical-align:1px}
.t-elabel{margin:5px 0 0;font:700 11px var(--sans);letter-spacing:.09em;text-transform:uppercase;color:var(--ti)}
.t-days{display:flex;gap:6px;margin-top:14px;flex-wrap:wrap}
.t-tab{min-width:64px;padding:7px 10px 8px;border:1px solid #E1E3E6;border-radius:4px;background:#F8F7F4;font:600 11px var(--sans);letter-spacing:.08em;text-transform:uppercase;color:#5B6472}
.t-tab b{display:block;margin-top:3px;font:700 14px var(--sans);letter-spacing:-.01em;text-transform:none;color:var(--ti)}
.t-tab.on{background:var(--ti);border-color:var(--ti);color:#fff;box-shadow:0 6px 16px rgba(20,24,31,.2)}
.t-tab.on b{color:#fff}
.t-tab.off{background:#FCFCFA;border-color:#F1F1EF;color:#CBD1D8}
.t-tab.off b{color:#CBD1D8}
.t-tab i{display:block;margin-top:3px;font:700 9.5px var(--sans);font-style:normal;letter-spacing:.09em;text-transform:uppercase;color:#CBD1D8}
.t-tab.t-all{display:inline-flex;align-items:center;gap:7px;min-width:0;padding-right:13px;color:var(--ti);text-transform:none;letter-spacing:0;font-size:13px;font-weight:700}
.t-tab.t-all svg{color:var(--ti)}
.t-views{display:flex;gap:8px;margin-top:12px}
.t-vbtn{font:600 12px/1.5 var(--sans);padding:6px 14px;border-radius:3px;border:1px solid var(--tline);background:#fff;color:#5B6472}
.t-vbtn.on{background:var(--ti);border-color:var(--ti);color:#fff}
.t-chips{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0 0}
.t-chip{font:600 12px var(--sans);letter-spacing:.01em;color:#5B6472;padding:6px 12px;border:1px solid var(--tline);border-radius:999px;background:#fff}
.t-chip.on{background:var(--ti);border-color:var(--ti);color:#fff}
.t-sec{margin-top:34px}
.t-sec h4{margin:0;padding-left:12px;border-left:3.6px solid var(--tl);font:700 21px/1.2 var(--sans);letter-spacing:-.012em;color:var(--ti);display:flex;align-items:baseline;gap:11px}
.t-sec h4 .n{font:500 12px var(--sans);letter-spacing:.02em;color:var(--tg)}
.t-hero{margin:20px 0 0}
.t-hwrap{position:relative;overflow:hidden}
.t-hwrap img{width:100%;height:auto;max-height:340px;object-fit:cover}
.t-hwrap::after{content:"";position:absolute;left:0;right:0;bottom:0;height:74%;pointer-events:none;background:linear-gradient(to top,rgba(10,12,16,.82),rgba(10,12,16,0))}
.t-hcap{position:absolute;z-index:2;max-width:62%;left:22px;bottom:20px}
.t-hcap h5{margin:0;font:700 24px/1.22 var(--sans);letter-spacing:-.018em;color:#fff}
.t-hcap a{color:#fff;text-decoration:none}
.t-list,.t-plain{margin-top:28px}
.t-entry{padding:16px 0;border-top:1px solid var(--th)}
.t-entry:first-child{border-top:0;padding-top:0}
.t-label{margin:0 0 6px;font:700 11.5px/1.3 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--tl)}
.t-para{margin:0;font:400 16.5px/1.55 var(--sans);color:var(--tb);max-width:64ch}
.t-para b{font-weight:700;color:var(--ti)}
.t-end{display:flex;align-items:center;gap:10px;margin-top:12px;line-height:1}
.t-full{font:600 13px var(--sans);color:var(--tl);text-decoration:none}
.t-full:hover{text-decoration:underline}
.tacc{display:inline-flex;align-items:center;gap:4px;line-height:1;font:700 9.5px var(--sans);letter-spacing:.09em;text-transform:uppercase;padding:2px 7px;border-radius:3px;white-space:nowrap;vertical-align:2px}
.tacc svg{display:block;width:11px;height:11px}
.tacc.p{color:var(--ink);background:rgba(200,169,110,.18);border:1px solid rgba(200,169,110,.55)}
.tacc.p svg{color:#C8A96E}
.tacc.f{color:#1D7A46;background:rgba(29,122,70,.10);border:1px solid transparent}
.t-prow{position:relative;padding:13px 0;border-top:1px solid var(--th)}
.t-prow:first-child{border-top:0}
.t-prow:hover{z-index:7}
.t-hl{font:600 15px/1.42 var(--sans);letter-spacing:-.004em;color:var(--ti)}
.t-hl a{color:var(--ti);text-decoration:none}
.t-hl a:hover{color:var(--tl)}
.t-hl .tacc{margin-left:9px}
.pvc{position:absolute;z-index:8;left:calc(100% + 20px);top:4px;width:300px;background:#fff;border-radius:10px;box-shadow:0 0 0 1px var(--line),var(--sh);padding:12px;display:grid;grid-template-columns:60px 1fr;gap:12px;pointer-events:none;opacity:0;visibility:hidden}
.pvc .tb{width:60px;height:60px;border-radius:6px;overflow:hidden;background:#ddd}
.pvc .tb img{width:100%;height:100%;object-fit:cover}
.pvc p{margin:0;font:400 13.5px/19px var(--sans);color:var(--text);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.t-foot{margin-top:46px;padding-top:18px;border-top:1px solid var(--tline);font:400 12.5px/1.7 var(--sans);color:#5B6472}
.t-nav{display:flex;justify-content:space-between;margin-top:14px}
.t-page{position:relative}
.t-in.clip{max-height:1440px;overflow:hidden}
.t-more{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:-170px;padding:110px 0 34px;background:linear-gradient(rgba(255,255,255,0),#fff 52%);border-radius:0 0 12px 12px;font:500 13px var(--sans);color:var(--grey)}
.t-more.gone{display:none}
.t-morebtn{background:var(--ink);height:46px;padding:0 22px;font-size:15px}
.t-morebtn:hover{background:#000}
[data-ask] .t-tab,[data-ask] .t-vbtn,[data-ask] .t-dbtn{cursor:pointer;transition:border-color .15s,transform .15s}
[data-ask] .t-tab:not(.on):hover,[data-ask] .t-vbtn:not(.on):hover,[data-ask] .t-dbtn:hover{border-color:#9AA3AE;transform:translateY(-1px)}
.ask{position:absolute;z-index:20;width:320px;background:#fff;border-radius:10px;box-shadow:0 0 0 1px var(--line),0 24px 60px rgba(20,22,26,.18);padding:20px 20px 18px}
.ask b{display:block;font:600 20px/1.25 var(--disp);color:var(--ink);padding-right:24px}
.ask p{margin:8px 0 0;font:400 14.5px/1.55 var(--sans);color:var(--text)}
.ask-a{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin-top:14px}
.ask-a .btn{height:42px;padding:0 18px;font-size:14px;white-space:nowrap}
.ask-a .tl{font-size:14px}
.ask-x{all:unset;cursor:pointer;position:absolute;right:12px;top:8px;font:400 22px/1 var(--sans);color:var(--grey)}
.t-dbtn{font:600 12px var(--sans);padding:6px 12px;border:1px solid var(--tline);border-radius:3px;color:var(--ti)}

/* ---------- 4. who it is for, and how to subscribe ---------- */
.sb{position:relative;z-index:5;background:var(--bg);padding:120px 0 96px;border-top:1px solid var(--line)}
.who{max-width:1120px;margin:0 auto}
.who-l{margin:0;display:flex;align-items:center;gap:.3em;font:400 clamp(40px,4.6vw,64px)/1.36 var(--disp);letter-spacing:-.015em;color:var(--ink);font-variant-numeric:lining-nums}
.who-l .for{flex:none}
.wheel{position:relative;display:block;height:1.36em;overflow:hidden;flex:1}
.wl{position:absolute;left:0;top:0;display:block}
.wl span{display:block;height:1.36em;line-height:1.36em;white-space:nowrap;font-style:italic;color:var(--red)}
.wl span.on{color:var(--red)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.moment{margin:4px 0 0;padding-left:0;font:400 clamp(24px,2.3vw,32px)/1.25 var(--disp);color:#3a3a3a;font-variant-numeric:lining-nums;min-height:1.25em}
.plans{max-width:1120px;margin:64px auto 0;display:grid;grid-template-columns:1fr 1fr;gap:28px}
.plan{position:relative;display:flex;flex-direction:column;background:#fff;border-radius:6px;box-shadow:0 0 0 1px var(--line),var(--sh);padding:36px 36px 32px}
.plan.main{box-shadow:0 0 0 1px var(--red),var(--sh)}
.pt{font:650 13px/16px var(--sans);color:#6b6b6b}
.plan.main .pt{color:var(--red)}
.plan h3{margin:8px 0 0;font:600 30px/1.15 var(--disp);letter-spacing:-.012em;color:var(--ink)}
.plan > p{margin:12px 0 0;font:400 16.5px/1.6 var(--sans);color:var(--text)}
.facts{margin:20px 0 0}
.facts div{display:grid;grid-template-columns:110px 1fr;gap:12px;padding:10px 0;border-top:1px solid #e6e6e6}
.facts dt{font:600 13px/1.5 var(--sans);color:var(--ink)}
.facts dd{margin:0;font:400 14px/1.5 var(--sans);color:#444}
.plan .trust{margin:18px 0 0;font:italic 400 20px/1.35 var(--disp);color:var(--ink);font-variant-numeric:lining-nums}
.pbtn{margin-top:auto;justify-content:center;height:54px;font-size:16px}
.plan .pbtn{margin-top:auto}
.plan .facts{margin-bottom:28px}
.price{display:flex;align-items:baseline;gap:8px;margin:auto 0 0}
.plan .bill{margin:6px 0 18px;font:500 14px var(--sans);color:var(--grey)}
.price b{font:700 36px/1 var(--sans);letter-spacing:-.025em;color:var(--ink);font-variant-numeric:lining-nums}
.price span{font:500 15px var(--sans);color:var(--grey)}
.price i{margin-left:auto;font:600 14px var(--sans);font-style:normal;color:var(--red)}
.plan .pbtn{margin-top:0}
.pmon{align-self:center;margin-top:14px;font:500 14px var(--sans);color:var(--text);text-decoration:underline;text-decoration-color:rgba(20,22,26,.25);text-underline-offset:3px}
.pmon:hover{color:var(--red);text-decoration-color:var(--red)}
.pbtn.ink{background:var(--ink)}
.pbtn.ink:hover{background:#000}
.already{max-width:1120px;margin:40px auto 0;padding-bottom:96px;border-bottom:1px solid #e5e5e5;text-align:center;font:400 15px var(--sans);color:#3a3a3a}
.already a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}

.foot{position:relative;z-index:5;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;padding:24px var(--m);background:var(--ink);color:rgba(255,255,255,.6);font:500 13px var(--sans)}

/* ---------- small screens ---------- */
@media (max-width:959px){
  .wire{height:auto;min-height:0;overflow:visible;padding:96px 0 48px;display:flex;flex-direction:column}
  .hgrid{display:contents}
  .fg{order:1;padding:0 var(--m)}
  .wm{font-size:clamp(52px,14vw,88px)}
  .stack{display:block}
  .fgb{margin-top:48px}
  .wall-mask{order:2;position:relative;inset:auto;height:280px;margin-top:36px;-webkit-mask-image:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent);mask-image:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent)}
  .wall{grid-template-columns:minmax(0,1fr);padding:0 var(--m)}
  .col:not(:nth-child(2)){display:none}
  .wall-mask::before,.wall-mask::after{display:none}
  .cardcell{order:3;margin:14px var(--m) 0}
  .card{position:relative}
  .clist{max-height:520px}
  .an{height:auto;min-height:0;padding:100px 0 80px;overflow:visible}
  .an-in{height:auto;padding-top:0}
  .an-head{display:block}
  .an-count{display:none}
  .an-view{margin:0;overflow:visible}
  .an-p{font-size:22px}
  .an-track{display:block;width:auto}
  .panel{display:block;width:auto;padding:0;margin-top:44px}
  .an-space{display:none}
  .notes,.leaders{display:none}
  .ph::after{content:attr(data-n);font:650 .6em/1 var(--sans);color:var(--red);vertical-align:super;margin-left:2px}
  .notes-m{display:block;list-style:none;margin:24px 0 0;padding:0;border-top:1px solid var(--line)}
  .notes-m li{padding:12px 0;border-bottom:1px solid var(--line);font:400 16px/1.45 var(--sans);color:var(--text)}
  .notes-m b{color:var(--red);font-weight:650;margin-right:6px}
  .ed{padding:90px 0 100px}
  .t-in{padding:26px 16px 22px}
  .t-date{font-size:27px}
  .t-tab{min-width:52px;padding:6px 7px}
  .t-hcap{max-width:82%;left:16px;bottom:14px}
  .t-hcap h5{font-size:20px}
  .pvc{display:none}
  .sb{padding:96px 0 90px}
  .who-l{display:block;font-size:clamp(34px,9vw,44px)}
  .wheel{height:1.115em;margin-top:0}
  .wl span{height:1.36em;line-height:1.36em}
  .wl span{font-size:.82em}
  .moment{padding-left:0;font-size:24px}
  .plans{grid-template-columns:1fr;margin-top:48px}
  .plan{padding:26px 22px}
  .facts div{grid-template-columns:1fr;gap:2px}
  .qs{grid-template-columns:1fr}
}

/* v29: all reader-page examples match the live Cover Notes layout checked
   on 15 October 2026. The 5 October sample remains fixed and self-contained. */
.t-mastwrap{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-bottom:16px;margin-bottom:18px;border-bottom:1px solid #E6E6E6}
.t-mast{flex:0 0 auto;margin:0;padding:0;border:0;gap:8px}
.t-mast .cn{font-weight:700;letter-spacing:-.005em}
.t-mast .by{margin-right:-3px}
.t-days{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:5px;margin:0;padding:0;flex:0 0 356px}
.t-tab{display:flex;flex-direction:column;justify-content:center;align-items:center;min-width:0;min-height:54px;padding:7px 4px;border:1px solid #E3E7EA;border-top:2px solid #C8102E;border-radius:4px;font:600 10.5px/1.4 var(--sans);letter-spacing:.035em;text-align:center;text-transform:uppercase;background:#F8F7F4;color:#536170;box-shadow:0 1px 2px rgba(20,24,31,.04);transition:transform 350ms ease-out,box-shadow 350ms ease-out,background .2s,color .2s}
.t-tab b{margin-top:4px;font:600 12px/1.4 var(--sans);letter-spacing:-.01em;color:inherit;white-space:nowrap;text-transform:none}
.t-tab.on{background:#14181F;color:#fff;border-color:#14181F;border-top-color:#C8102E;box-shadow:0 3px 8px rgba(20,24,31,.15)}
.t-tab.t-all{display:flex;flex-direction:column;gap:5px;min-width:0;padding:7px 4px;color:#536170;font-size:10.5px;letter-spacing:.035em;text-transform:uppercase}
.t-tab.t-all svg{color:inherit;width:12px;height:12px}
[data-ask] .t-tab:not(.on):hover,[data-ask] .t-tab:focus-visible{transform:translateY(-4px);z-index:2;box-shadow:0 9px 18px rgba(20,24,31,.17);background:#fff;color:#14181F}
.t-top{padding:0;border:0}
.t-date{font-size:34px}
.t-status{margin:4px 0 0;font-size:12.5px;line-height:1.4;color:#6A7480}
.t-views{display:flex;width:max-content;gap:2px;padding:3px;margin:18px 0 0;background:#F0F3F5;border:1px solid #E6EBEF;border-radius:7px}
.t-vbtn{display:inline-flex;align-items:center;justify-content:center;min-height:32px;padding:5px 17px;border:0;border-radius:4px;background:transparent;color:#596673;font:600 12px/1.4 var(--sans)}
.t-vbtn.on{background:#fff;color:#14181F;border:0;box-shadow:0 1px 3px rgba(20,24,31,.12)}
[data-ask] .t-vbtn:not(.on):hover{transform:none;background:#E4EAEF;color:#14181F}
.t-in{padding-top:32px}
.t-sec{margin-top:40px}
.t-top + .t-sec{margin-top:22px}
.t-sec h4{line-height:25.2px;align-items:center;flex-wrap:wrap}
.t-hero{margin-top:18px}
.t-hwrap{display:block}
.t-hwrap::after{display:none}
.t-hwrap img{max-height:none;width:100%;height:auto;transition:filter .18s}
.t-hwrap:hover img{filter:brightness(.96)}
.t-hero + .t-list{margin-top:22px}
.t-entry{padding-bottom:24px}
.tacc{display:inline-flex;align-items:center;gap:4px;line-height:1;font:600 11.5px/1 var(--sans);letter-spacing:0;text-transform:none;white-space:nowrap;padding:0;border:0;border-radius:0;vertical-align:middle}
.tacc svg{display:block;width:13px;height:11px;flex:0 0 auto}
.tacc.p{color:#8C6D23;background:none;border:0}
.tacc.f{color:#1D7A46;background:none;border:0}
.t-story-box{display:inline-flex;align-items:stretch;margin:3px 0;vertical-align:middle;white-space:nowrap;font:600 13px/1.3 var(--sans);text-decoration:none;color:#222831;background:#fff;border:1px solid #dcdfe3;border-radius:8px;overflow:hidden;letter-spacing:0}
.t-box-access{display:inline-flex;align-items:center;padding:6px 9px;border-right:1px solid #e8e1d5;background:#f7f3eb}
.t-box-story{display:inline-flex;align-items:center;gap:7px;padding:6px 9px}
.t-story-box .tacc{gap:4px;font-size:12px;font-weight:500}
.t-box-free .t-box-access{background:#eff6f1;border-right-color:#dbe9df}
.t-story-box:hover{color:#222831;border-color:#a7adb5;text-decoration:none}
.t-hl .tacc{margin-left:9px}
.an-p{font-family:var(--sans);font-size:clamp(18px,min(1.7vw,2.55vh),24px);line-height:1.55;letter-spacing:0;color:#1F242C}
.an-p .ph{font-weight:600}
.mini-mastwrap{display:flex;flex-direction:column;gap:16px;padding-bottom:14px;margin-bottom:14px;border-bottom:1px solid #E6E6E6}
.mini-mastwrap .t-days{flex:auto;width:100%;gap:4px}
.mini-mastwrap .t-tab{min-height:40px;padding:4px 3px;font-size:9px;cursor:default}
.mini-mastwrap .t-tab b{font-size:10px;margin-top:2px}
.mini-mastwrap .t-all{gap:2px}
.mini-mastwrap .t-all svg{width:10px;height:10px}
.mast{gap:8px}
.mast b{font-weight:700;letter-spacing:-.005em}
.mast span{font-weight:400}
.cd{margin:0}
.cd .mini-date{display:block;font:700 22px/1.1 var(--sans);letter-spacing:-.02em;color:#14181F}
.mini-status{display:block;margin-top:4px;font:400 11px/1.4 var(--sans);color:#6A7480}
.mini-status b{font-weight:600;color:#14181F}
.mini-views{display:flex;width:max-content;gap:2px;padding:3px;margin:14px 0 0;background:#F0F3F5;border:1px solid #E6EBEF;border-radius:7px;font:600 10px/1.4 var(--sans);color:#596673}
.mini-views span{padding:5px 13px;border-radius:4px}
.mini-views .on{background:#fff;color:#14181F;box-shadow:0 1px 3px rgba(20,24,31,.12)}
.grp{margin:18px 0 8px;padding-left:9px;border-left:3px solid #37709F;font:700 17px/1.2 var(--sans);color:#14181F;display:flex;align-items:center;gap:9px}
.grp span{font:500 10px/1.4 var(--sans);color:#8A93A0}
.slots li{display:block;padding:12px 0;counter-increment:none}
.slots li::before{display:none}
.slot{overflow:hidden}
.lp p{font-family:var(--sans);color:#1F242C;margin:0;line-height:1.55}
.lp p b{font-weight:700;color:#14181F}
.card .t-story-box{font-size:10px;border-radius:8px}
.card .t-story-box .tacc{font-size:10px}
.card .t-box-access,.card .t-box-story{padding:5px 6px}
.card .tacc svg{width:11px;height:10px}
.card .clist{min-height:170px}
.card .more{font-size:12px}
.ask{max-width:calc(100% - 32px)}
.ask[hidden]{display:none}
@media(max-width:1099px){.t-mastwrap{flex-wrap:wrap;gap:16px}.t-days{flex:1 1 100%;width:100%}}
@media(max-width:959px){.t-date{font-size:27px}.t-vbtn{min-height:36px}.an-p{font-size:20px}.t-in{padding:26px 20px 22px}.t-page{margin-top:32px}.t-tab{min-width:0;padding:7px 3px}.t-mast .cn{font-size:25px}.card{padding:24px 20px}.card .clist{min-height:170px}}
@media(max-width:420px){.rh .ttl{font-size:19px}.rh .btn{padding:0 12px}.t-in{padding-left:16px;padding-right:16px}.t-tab{font-size:9px}.t-tab b{font-size:10.5px}.t-mast .cn{font-size:24px}.t-date{font-size:25px}.t-mast{gap:7px}}
@media(pointer:coarse){.t-story-box{min-height:44px}}
@media(prefers-reduced-motion:reduce){.t-tab,.t-hwrap img{transition:none}[data-ask] .t-tab:not(.on):hover{transform:none}.card .slot{display:none}}

/* v31: balanced colour glows, blue for Cover Notes and red for full access. */
.plan-cover{--plan-glow:55,112,159}
.plan-premium{--plan-glow:200,16,46}
.plans .plan{
  box-shadow:0 0 0 1px rgba(var(--plan-glow),.22),
             0 8px 24px rgba(20,22,26,.04),
             0 0 36px 4px rgba(var(--plan-glow),.10),
             0 20px 70px 8px rgba(var(--plan-glow),.13);
}
@media(max-width:959px){
  .plans{gap:36px}
  .plans .plan{box-shadow:0 0 0 1px rgba(var(--plan-glow),.22),
                         0 6px 20px rgba(20,22,26,.04),
                         0 0 24px 2px rgba(var(--plan-glow),.10),
                         0 16px 44px 4px rgba(var(--plan-glow),.13)}
}

/* Keep the fixed running head below WordPress's editor toolbar. */
body.admin-bar.rein-studio-about-cover-notes .rh{top:var(--wp-admin--admin-bar--height,32px)}
@media(max-width:782px){body.admin-bar.rein-studio-about-cover-notes .rh{top:var(--wp-admin--admin-bar--height,46px)}}
@media(max-width:600px){body.admin-bar.rein-studio-about-cover-notes #wpadminbar{position:fixed}}

/* short laptop screens (1280x720 and smaller): Know what moved keeps all four notes in view, clear of the arrows */
@media (min-width:960px) and (max-height:720px){
  .an{min-height:0}
  .an-head .h2{font-size:clamp(30px,6.4vh,44px)}
  .an-in{padding-top:44px}
  .an .stand{margin-top:10px;font-size:16px}
  .an-view{margin-top:14px}
  .an-hl{margin-bottom:10px;font-size:22px}
  .an-p{font-size:17px;line-height:1.5}
  .note b{font-size:12px;line-height:14px}
  .note span{margin-top:2px;font-size:14px;line-height:19px}
}

/* Without the script, or on the still page (reduced motion, slow phones), Know what moved reads straight down:
   both stories in full, nothing clipped by the one-screen frame the scroll scene needs. */
@media (min-width:960px){
  html:not(.js) .an,.cn-still .an{height:auto;min-height:0;overflow:visible}
  html:not(.js) .an-in,.cn-still .an-in{height:auto;padding-top:120px;padding-bottom:110px}
  html:not(.js) .an-view,.cn-still .an-view{overflow:visible}
  html:not(.js) .an-track,.cn-still .an-track{display:block;width:auto}
  html:not(.js) .panel,.cn-still .panel{width:auto}
  html:not(.js) .panel+.panel,.cn-still .panel+.panel{margin-top:72px}
  html:not(.js) .an-count,.cn-still .an-count{display:none}
  /* the side notes are placed by the script, so without it they become the numbered list phones use */
  html:not(.js) .notes,html:not(.js) .leaders{display:none}
  html:not(.js) .ph::after{content:attr(data-n);font:650 .6em/1 var(--sans);color:var(--red);vertical-align:super;margin-left:2px}
  html:not(.js) .notes-m{display:block;list-style:none;margin:28px 0 0;padding:0;border-top:1px solid var(--line)}
  html:not(.js) .notes-m li{padding:12px 0;border-bottom:1px solid var(--line);font:400 16px/1.45 var(--sans);color:var(--text)}
  html:not(.js) .notes-m b{color:var(--red);font-weight:650;margin-right:6px}
  /* the opening card is placed by the script too; without it, it sits in the grid beside the masthead */
  html:not(.js) .wire{height:auto;min-height:max(740px,100vh);display:grid}
  html:not(.js) .hgrid{height:auto;padding-bottom:48px}
  html:not(.js) .cardcell{align-self:center}
  html:not(.js) .card{position:relative}
}
html:not(.js) .an-space,html:not(.js) .navs,html:not(.js) .t-more{display:none}
/* the role wheel is built by the script; without it the first role reads as plain text */
html:not(.js) .wheel,html:not(.js) .moment{display:none}
html:not(.js) .who .vh{position:static;width:auto;height:auto;overflow:visible;clip:auto;font-style:italic;color:var(--red)}
html:not(.js) .who-l{flex-wrap:wrap}

/* the sample edition's lead picture: a tinted frame holds its place until it arrives */
.t-hwrap{background:#E9E6E0;aspect-ratio:1200/675}

/* subscribe cards: no single word left on a heading's last line, and prices keep their units together */
.plan h3{text-wrap:balance}
.price span,.price i{white-space:nowrap}
@media (max-width:400px){.price{flex-wrap:wrap;row-gap:4px}.price b{font-size:32px}}

/* phones and tablets: every control here is at least 44px tall to the finger */
@media (pointer:coarse){
  .rh .btn{height:44px}
  .t-vbtn{min-height:44px}
  .t-dbtn{display:inline-flex;align-items:center;min-height:44px}
  .pmon{display:inline-flex;align-items:center;min-height:44px}
  .already a{position:relative}
  .already a::after{content:'';position:absolute;inset:-13px -6px}
}

/* the headline wall stops short of the up/down arrows (24px from the edge, 42px wide) on narrower desktops */
@media (min-width:960px){.wall{padding-right:max(var(--m),84px)}}
