/* A FEATURE: a Note written as a magazine cover story (field/tools/publish.mjs, e.feature), on its own page and in
   Play's story window on the homepage alike, so these styles stand on their own: a magazine cover (masthead, issue,
   cover lines), a feature head (label, headline, standfirst, byline between rules), serif story type with a drop
   cap, section heads, big pull quotes, a Q&A and a Spotted box */
.feature{--mg-ink:#10302f;--mg-ink2:#435a5f;--mg-ink3:#7a8c90;--mg-red:#c8335c;--mg-gold:#f3d79a;--mg-rule:#1d3b3a;
  --mg-serif:"Playfair Display",Didot,"Bodoni 72","Bodoni MT",Charter,"Iowan Old Style",Georgia,serif;--mg-text:Charter,"Iowan Old Style","Palatino Linotype",Georgia,serif;
  --mg-sans:"Nunito","Poppins","Helvetica Neue",Arial,sans-serif}
/* the cover */
.feature .mag-cover{position:relative;margin:0 0 6px;border-radius:14px;overflow:hidden;background:#0b2a28;color:#fff;aspect-ratio:16/9}
@media (min-width:900px){main.feature .mag-cover{margin-left:-60px;margin-right:-60px}}
.feature .mag-img,.feature .mag-img img,.feature .mag-img video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;max-height:none;border-radius:0}
.feature .mag-cover::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(6,24,24,.6) 0,rgba(6,24,24,0) 42%,rgba(6,24,24,0) 62%,rgba(6,24,24,.55) 100%),linear-gradient(180deg,rgba(6,24,24,.55) 0,rgba(6,24,24,0) 32%)}
.feature .mag-top{position:absolute;z-index:1;top:4%;left:4%;right:4%;display:flex;flex-direction:column;gap:2px}
.feature .mag-mast{font:900 clamp(30px,8.2vw,74px)/.9 var(--mg-serif);letter-spacing:.02em;text-transform:uppercase;color:var(--mg-gold);text-shadow:0 2px 14px rgba(0,0,0,.35)}
.feature .mag-tag{font:italic 500 clamp(11px,1.6vw,15px)/1.3 var(--mg-text);color:rgba(255,255,255,.86);padding-left:3px}
.feature .mag-issue{position:absolute;z-index:1;left:4%;bottom:7%;padding:5px 12px;background:var(--mg-red);font:800 clamp(10px,1.4vw,13px)/1.2 var(--mg-sans);letter-spacing:.1em;text-transform:uppercase;color:#fff}
.feature .mag-lines{position:absolute;z-index:1;right:4%;top:30%;width:31%;margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:clamp(6px,1.4vw,14px);text-align:right}
.feature .mag-lines li{font:700 clamp(11px,1.65vw,17px)/1.25 var(--mg-text);color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.5);margin:0}
.feature .mag-lines li::marker{content:none}
.feature .mag-lines li:first-child{font-style:italic;font-size:clamp(13px,2.1vw,22px);color:var(--mg-gold)}
.feature .mag-cap{margin:8px 0 0;font:13px/1.45 system-ui,sans-serif;color:var(--mg-ink3);text-align:right}
@media (max-width:640px){.feature .mag-lines{display:none}.feature .mag-cover{border-radius:10px}}
/* the feature head */
.feature .mag-head{margin:26px 0 22px;text-align:center}
.feature .mag-label{display:inline-block;margin:0;padding:0 0 4px;border-bottom:2px solid var(--mg-red);font:800 12px/1.2 var(--mg-sans);letter-spacing:.2em;text-transform:uppercase;color:var(--mg-red)}
.feature .mag-head h1{margin:14px auto 0;max-width:15ch;font:900 clamp(38px,7vw,68px)/1.02 var(--mg-serif);letter-spacing:-.015em;color:var(--mg-ink)}
.feature .mag-deck{margin:14px auto 0;max-width:34em;font:italic 400 clamp(18px,2.2vw,22px)/1.45 var(--mg-text);color:var(--mg-ink2)}
.feature .mag-byline{display:flex;flex-direction:column;align-items:center;gap:3px;margin:20px 0 0;padding:10px 0;border-top:1px solid var(--mg-rule);border-bottom:1px solid var(--mg-rule);
  font:700 12px/1.4 var(--mg-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--mg-ink2)}
.feature .mag-byline span+span{font-weight:600;color:var(--mg-ink3)}
/* the story */
.feature .post>p{font-family:var(--mg-text);font-size:19px;line-height:1.7;color:var(--mg-ink)}
.feature .post>p:first-child::first-letter{float:left;font:900 74px/.8 var(--mg-serif);margin:7px 10px 0 0;color:var(--mg-red)}
.feature .post>p:first-child::first-line{font-variant:small-caps;letter-spacing:.04em}
.feature .post h2.sub{margin:1.8em 0 .55em;font:800 13px/1.3 var(--mg-sans);letter-spacing:.18em;text-transform:uppercase;color:var(--mg-red)}
.feature .post h2.sub::before{content:"";display:block;width:36px;height:3px;margin:0 0 10px;background:var(--mg-ink)}
.feature .pull{margin:1.6em 0;padding:.9em 0;border-top:3px solid var(--mg-ink);border-bottom:1px solid var(--mg-ink);text-align:center}
.feature .pull p{margin:0;font:italic 700 clamp(24px,3.6vw,34px)/1.22 var(--mg-serif);color:var(--mg-ink)}
@media (min-width:900px){main.feature .pull{margin-left:-60px;margin-right:-60px}}
.feature .post figcaption{font-family:var(--mg-text);font-style:italic}
/* the look book: her portraits two by two, the first one across the column */
.feature .mag-book{margin:2em 0 1.6em}
.feature .mag-book-dek{margin:0 0 14px;font:italic 17px/1.5 var(--mg-text);color:var(--mg-ink2)}
.feature .mag-book-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 12px}
.feature .mag-look{margin:0}
.feature .mag-look.wide{grid-column:1/-1}
.feature .mag-look a{display:block;border-radius:6px;overflow:hidden;background:#0b2a28}
.feature .mag-look img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;max-height:none;border-radius:0;margin:0;transition:transform .5s}
.feature .mag-look a:hover img{transform:scale(1.03)}
.feature .mag-look figcaption{margin:6px 0 0;font:14px/1.4 var(--mg-text);color:var(--mg-ink2);text-align:left}
.feature .mag-look figcaption b{display:block;font:800 12px/1.3 var(--mg-sans);letter-spacing:.1em;text-transform:uppercase;color:var(--mg-ink)}
.feature .mag-book-ai{margin:10px 0 0}
@media (min-width:900px){main.feature .mag-book{margin-left:-60px;margin-right:-60px}}
@media (max-width:420px){.feature .mag-book-grid{grid-template-columns:1fr}}
/* the Q&A and Spotted */
.feature .mag-qa{margin:36px 0;padding:26px 24px;border-radius:4px;background:#f4efe4;border-top:4px solid var(--mg-ink)}
.feature .mag-qa h2{font:900 26px/1.15 var(--mg-serif);margin:0 0 14px;color:var(--mg-ink)}
/* the Q&A as a chat: her interviewer's questions on the left, her answers on the right beside her face */
.feature .mag-qa dl{margin:0;display:flex;flex-direction:column;gap:10px}
.feature .mag-qa dt,.feature .mag-qa dd{position:relative;max-width:78%;margin:0;padding:10px 15px;border-radius:18px;font:17px/1.45 var(--mg-text)}
.feature .mag-qa dt{align-self:flex-start;margin-top:8px;background:#fff;color:var(--mg-ink);border:1px solid #e3d8c2;border-bottom-left-radius:5px;
  font:700 15px/1.4 var(--mg-sans);letter-spacing:0;text-transform:none}
.feature .mag-qa dt:first-child{margin-top:0}
.feature .mag-qa dd{align-self:flex-end;margin-right:46px;background:#0f4d47;color:#fff;border-bottom-right-radius:5px;box-shadow:0 6px 14px -10px rgba(15,77,71,.8)}
.feature .mag-qa dd::after{content:"";position:absolute;right:-46px;bottom:0;width:36px;height:36px;border-radius:50%;
  background:#0b3b37 url(/assets/narrator/ga-avatar.jpg) center/cover;box-shadow:0 0 0 2px #f4efe4,0 0 0 3px #c9a14a}
@media (max-width:520px){.feature .mag-qa dt,.feature .mag-qa dd{max-width:88%}.feature .mag-qa{padding:22px 14px}}
.feature .mag-spot{margin:0 0 30px;padding:18px 20px;border:2px solid var(--mg-ink);border-radius:4px}
.feature .mag-spot h2{font:900 22px/1 var(--mg-serif);text-transform:uppercase;letter-spacing:.08em;margin:0 0 12px;color:var(--mg-red)}
.feature .mag-spot ul{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.feature .mag-spot li{font:16px/1.5 var(--mg-text);color:var(--mg-ink)}
.feature .mag-spot b{display:block;font:800 13px/1.3 var(--mg-sans);letter-spacing:.06em;text-transform:uppercase}
/* the homepage's story window: its own padding, so the cover runs edge to edge inside it */
.pi-story-body .feature .mag-cover{margin-left:-24px;margin-right:-24px;border-radius:0}
@media (max-width:640px){.pi-story-body .feature .mag-cover{margin-left:-14px;margin-right:-14px}}
.pi-story-body .feature .mag-img img{border-radius:0}
.pi-story-body .feature .mag-book,.pi-story-body .feature .pull,.pi-story-body .feature .mag-callouts,.pi-story-body .feature .mag-verdict{margin-left:0;margin-right:0}   /* the window has no room to run wider than its column */
.pi-story-body{overflow-x:hidden}   /* and nothing in a feature ever scrolls the window sideways (the cover still runs edge to edge) */
/* night mode (the homepage's Night mode, html.night-page): light type on the dark page, a dark Q&A panel */
html.night-page .feature{--mg-ink:#e6efed;--mg-ink2:#b9c9cc;--mg-ink3:#8fa2a7;--mg-red:#f06d93;--mg-rule:#3a5157}
html.night-page .feature .mag-qa{background:#16232f;border-top-color:#e6efed}
html.night-page .feature .mag-qa dt{background:#22313d;border-color:#33475a;color:#e6efed}
html.night-page .feature .mag-qa dd{background:#1f6d63}
html.night-page .feature .mag-qa dd::after{box-shadow:0 0 0 2px #16232f,0 0 0 3px #c9a14a}
html.night-page .feature .mag-spot{border-color:#3a5157}
/* A feature's building blocks (field/tools/publish.mjs, e.feature.blocks), shared by every magazine theme: a spec box,
   a sidebar, a verdict with bars, and a picture with numbered callouts. Each theme only re-colours and re-types them. */
.feature .mag-specs,.feature .mag-box{margin:1.6em 0;padding:18px 20px;border:2px solid var(--mg-ink);border-radius:4px;background:rgba(255,255,255,.35)}
.feature .mag-specs h3,.feature .mag-box h3{margin:0 0 10px;font:800 15px/1.25 var(--mg-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--mg-red)}
.feature .mag-specs dl{margin:0;display:grid;gap:6px}
.feature .mag-specs dl>div{display:flex;gap:10px;align-items:baseline;border-bottom:1px dotted var(--mg-ink3);padding:0 0 5px}
.feature .mag-specs dt{flex:0 0 40%;font:700 13px/1.3 var(--mg-sans);letter-spacing:.06em;text-transform:uppercase;color:var(--mg-ink2)}
.feature .mag-specs dd{margin:0;font:600 16px/1.35 var(--mg-text);color:var(--mg-ink)}
.feature .mag-specs>p{margin:10px 0 0;font:italic 14px/1.45 var(--mg-text);color:var(--mg-ink3)}
.feature .mag-box-k{margin:0 0 4px;font:800 11px/1.2 var(--mg-sans);letter-spacing:.2em;text-transform:uppercase;color:var(--mg-ink3)}
.feature .mag-box p{font:16.5px/1.6 var(--mg-text);color:var(--mg-ink);margin:0 0 10px}
.feature .mag-box figure{margin:12px 0 0}
.feature .mag-verdict{margin:2em 0 1.4em;padding:22px 22px 18px;border-top:4px solid var(--mg-ink);border-bottom:1px solid var(--mg-ink)}
.feature .mag-verdict h2{margin:0 0 12px;font:900 28px/1.1 var(--mg-serif);color:var(--mg-ink)}
.feature .mv-top{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin:0 0 14px}
.feature .mv-score{margin:0;display:flex;align-items:baseline;gap:4px}
.feature .mv-score b{font:900 56px/1 var(--mg-serif);color:var(--mg-red)}
.feature .mv-score span{font:700 18px/1 var(--mg-sans);color:var(--mg-ink2)}
.feature .mv-seal{margin:0;width:96px;height:96px;border-radius:50%;display:grid;place-items:center;text-align:center;padding:10px;rotate:-12deg;
  border:3px double var(--mg-red);color:var(--mg-red);font:900 13px/1.1 var(--mg-sans);letter-spacing:.08em;text-transform:uppercase}
.feature .mv-bars{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:8px}
.feature .mv-bars li{display:grid;grid-template-columns:minmax(110px,34%) 1fr 34px;gap:10px;align-items:center;margin:0}
.feature .mv-bars span{font:700 13px/1.2 var(--mg-sans);letter-spacing:.06em;text-transform:uppercase;color:var(--mg-ink2)}
.feature .mv-bars i{height:12px;border-radius:6px;background:linear-gradient(90deg,var(--mg-red) calc(var(--v) * 100%),rgba(0,0,0,.1) 0)}
.feature .mv-bars b{font:800 15px/1 var(--mg-sans);color:var(--mg-ink);text-align:right}
.feature .mag-verdict>p{font:17px/1.6 var(--mg-text);color:var(--mg-ink);margin:0 0 10px}
.feature .mag-callouts{margin:1.6em 0}
.feature .mc-pic{position:relative;border-radius:6px;overflow:hidden}
.feature .mc-pic img{display:block;width:100%;height:auto;max-height:none;margin:0;border-radius:0}
.feature .mc-dot{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);display:flex;align-items:center;gap:6px;pointer-events:none}
.feature .mc-dot i{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--mg-red);color:#fff;font:800 13px/1 var(--mg-sans);font-style:normal;box-shadow:0 0 0 2px #fff,0 2px 6px rgba(0,0,0,.35)}
.feature .mc-dot.flip{flex-direction:row-reverse;transform:translate(calc(-100% + 12px),-50%)}   /* near the right edge: the label to the left of its dot */
.feature .mc-dot b{padding:3px 8px;border-radius:3px;background:rgba(255,255,255,.92);color:var(--mg-ink);font:700 12px/1.25 var(--mg-sans);letter-spacing:.02em;white-space:nowrap;box-shadow:0 2px 6px rgba(0,0,0,.25)}
.feature .mag-callouts figcaption{margin:8px 0 0;font:italic 14px/1.45 var(--mg-text);color:var(--mg-ink2)}
.feature .mag-callouts figcaption b{font-style:normal;font-family:var(--mg-sans);letter-spacing:.06em;text-transform:uppercase;color:var(--mg-ink)}
@media (max-width:640px){.feature .mc-dot b{display:none}}   /* small screens: just the numbers; the caption lists them */
@media (min-width:900px){main.feature .mag-callouts,main.feature .mag-verdict{margin-left:-60px;margin-right:-60px}}
html.night-page .feature .mag-specs,html.night-page .feature .mag-box{background:rgba(255,255,255,.04);border-color:var(--mg-rule)}
html.night-page .feature .mv-bars i{background:linear-gradient(90deg,var(--mg-red) calc(var(--v) * 100%),rgba(255,255,255,.12) 0)}

/* POPULAR PARADOX (theme "paradox"): a made-up 1970s–80s popular-science monthly. Cream newsprint, mustard, burnt
   orange and avocado, a chunky slab masthead over rainbow stripes, a round "tested" seal, slab body type. */
.feature.mag-paradox{--mg-ink:#2a1e14;--mg-ink2:#5a4632;--mg-ink3:#8b7457;--mg-red:#d4521c;--mg-gold:#ffd166;--mg-rule:#2a1e14;--pp-mustard:#e3a12b;--pp-avocado:#6e7b2b;--pp-paper:#f6ecd2;
  --mg-serif:"Alfa Slab One","Rockwell","Roboto Slab",Georgia,serif;--mg-text:"Roboto Slab","Rockwell",Georgia,serif;--mg-sans:"Roboto Condensed","Arial Narrow","Helvetica Neue",Arial,sans-serif}
.feature.mag-paradox .mag-cover{background:#1b120b;border-radius:6px}
.feature.mag-paradox .mag-cover::after{background:linear-gradient(90deg,rgba(20,12,6,.72) 0,rgba(20,12,6,.15) 46%,rgba(20,12,6,0) 62%),linear-gradient(180deg,rgba(20,12,6,.55) 0,rgba(20,12,6,0) 36%)}
.feature.mag-paradox .mag-mast{font:400 clamp(30px,8.4vw,80px)/.88 var(--mg-serif);letter-spacing:.01em;color:var(--pp-paper);text-shadow:3px 3px 0 var(--mg-red),6px 6px 0 rgba(0,0,0,.35)}
.feature.mag-paradox .mag-top{right:max(19%,84px)}   /* the masthead wraps before it reaches the round seal */
.feature.mag-paradox .mag-top::after{content:"";display:block;width:min(46%,420px);height:12px;margin:8px 0 4px;
  background:linear-gradient(180deg,var(--pp-mustard) 0 33%,var(--mg-red) 33% 66%,var(--pp-avocado) 66%)}
.feature.mag-paradox .mag-tag{font:700 clamp(10px,1.4vw,14px)/1.3 var(--mg-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--mg-gold);font-style:normal;padding:0}
.feature.mag-paradox .mag-issue{left:auto;right:4%;top:4%;bottom:auto;width:clamp(64px,11vw,110px);height:clamp(64px,11vw,110px);padding:8px;border-radius:50%;display:grid;place-items:center;text-align:center;
  background:var(--pp-mustard);color:var(--mg-ink);rotate:10deg;box-shadow:0 4px 14px rgba(0,0,0,.4);font:800 clamp(9px,1.3vw,13px)/1.1 var(--mg-sans)}
.feature.mag-paradox .mag-lines{left:4%;right:auto;top:auto;bottom:7%;width:40%;text-align:left}
.feature.mag-paradox .mag-lines li{font:700 clamp(11px,1.6vw,17px)/1.25 var(--mg-sans);letter-spacing:.02em;text-transform:uppercase}
.feature.mag-paradox .mag-lines li:first-child{font:400 clamp(14px,2.3vw,25px)/1.1 var(--mg-serif);text-transform:none;color:var(--mg-gold)}
.feature.mag-paradox .mag-label{border:0;padding:4px 12px;background:var(--mg-red);color:#fff;letter-spacing:.24em}
.feature.mag-paradox .mag-head h1{font:400 clamp(36px,6.6vw,64px)/1.04 var(--mg-serif);max-width:17ch;letter-spacing:0}
.feature.mag-paradox .mag-deck{font:400 clamp(17px,2.1vw,21px)/1.5 var(--mg-text);font-style:normal}
.feature.mag-paradox .mag-byline{border-top:3px solid var(--mg-ink);border-bottom:3px solid var(--mg-ink);font-family:var(--mg-sans)}
.feature.mag-paradox .post>p{font:400 18px/1.72 var(--mg-text)}
.feature.mag-paradox .post>p:first-child::first-letter{font:400 78px/.8 var(--mg-serif);color:var(--mg-red)}
.feature.mag-paradox .post>p:first-child::first-line{font-variant:normal;font-weight:600}
.feature.mag-paradox .post h2.sub{font:400 24px/1.15 var(--mg-serif);letter-spacing:0;text-transform:none;color:var(--mg-ink)}
.feature.mag-paradox .post h2.sub::before{width:72px;height:8px;background:linear-gradient(180deg,var(--pp-mustard) 0 33%,var(--mg-red) 33% 66%,var(--pp-avocado) 66%)}
.feature.mag-paradox .pull{border-top:6px solid var(--mg-red);border-bottom:2px solid var(--mg-ink)}
.feature.mag-paradox .pull p{font:400 clamp(22px,3.3vw,32px)/1.22 var(--mg-serif);font-style:normal;color:var(--mg-red)}
.feature.mag-paradox .mag-specs{background:var(--pp-paper);border:3px solid var(--mg-ink);border-radius:0;box-shadow:6px 6px 0 var(--pp-mustard)}
.feature.mag-paradox .mag-specs h3{margin:-18px -20px 12px;padding:8px 20px;background:var(--mg-ink);color:var(--pp-paper)}
.feature.mag-paradox .mag-box{background:#eef0d8;border:0;border-left:8px solid var(--pp-avocado);border-radius:0}
.feature.mag-paradox .mag-box h3{color:var(--pp-avocado);font-family:var(--mg-serif);font-weight:400;letter-spacing:0;text-transform:none;font-size:21px}
.feature.mag-paradox .mv-seal{border-color:var(--mg-red);background:var(--pp-paper)}
.feature.mag-paradox .mv-bars i{background:linear-gradient(90deg,var(--pp-mustard) calc(var(--v) * 100%),rgba(42,30,20,.12) 0)}
.feature.mag-paradox .mag-qa{background:var(--pp-paper);border-top:6px solid var(--mg-red)}
.feature.mag-paradox .mag-qa h2{font:400 26px/1.15 var(--mg-serif)}
.feature.mag-paradox .mag-qa dd{margin-right:0;background:var(--mg-ink);font-family:var(--mg-text)}
.feature.mag-paradox .mag-qa dd::after{display:none}   /* the inventor answers here, not GlazyArray: no avatar */
.feature.mag-paradox .mag-spot h2{font:400 22px/1 var(--mg-serif);letter-spacing:.02em}
html.night-page .feature.mag-paradox{--mg-ink:#f3e7cf;--mg-ink2:#d6c4a3;--mg-ink3:#a8936f;--mg-red:#ff7a45;--mg-rule:#5a4632}
html.night-page .feature.mag-paradox .mag-specs,html.night-page .feature.mag-paradox .mag-qa{background:#2a2016}
html.night-page .feature.mag-paradox .mag-specs h3{background:#f3e7cf;color:#2a2016}
html.night-page .feature.mag-paradox .mag-box{background:#262a17}
html.night-page .feature.mag-paradox .mag-qa dd{background:#5a4632}