/* The Blog: the index, story pages and their covers. Loaded only on /blog/ pages (style.css does the rest). */

/* ---------- Covers ----------
   Each cover is a Blender render of what the story is about, with the MITRAS AI lockup laid over its bottom-left corner:
   ink on light renders, white on dark ones. */
.cover{position:relative;overflow:hidden;isolation:isolate;container-type:size;aspect-ratio:16/10;border-radius:24px;background:#05060b;
  box-shadow:0 30px 70px -40px rgb(20 30 70/.45)}
.cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cover .cv-mark{position:absolute;left:max(18px,4.2cqw);bottom:max(16px,6cqh);display:flex;align-items:center;gap:max(7px,1.5cqh);color:#1d1d1f}
.cover.dark .cv-mark{color:#fff}
.cv-mark i{display:block;width:max(11px,3cqh);height:max(19px,5.2cqh);background:currentColor;-webkit-mask:url(/assets/branding/mitras-mark.svg) center/contain no-repeat;mask:url(/assets/branding/mitras-mark.svg) center/contain no-repeat}
.cv-mark b{font-family:'Geist Wordmark',Inter,sans-serif;font-size:max(15px,4cqh);font-weight:600;letter-spacing:-.015em;line-height:1}
.cv-mark b em{font-style:normal;color:var(--accent)}.cover.dark .cv-mark b em{color:#9db8ff}

/* ---------- The Blog page ---------- */
.journal .chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 30px}
.journal .chips button{font:inherit;font-size:14px;font-weight:560;padding:7px 15px;border:0;border-radius:999px;background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line);cursor:pointer}
.journal .chips button[aria-pressed=true]{background:var(--ink);color:#fff;box-shadow:none}
.stories{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(22px,3vw,36px)}
.story-card a{display:flex;flex-direction:column;gap:18px;color:var(--ink)}
.story-card .cover{transition:transform .6s var(--ease),box-shadow .6s var(--ease)}
.story-card a:hover .cover{transform:translateY(-4px);box-shadow:0 40px 80px -40px rgb(20 30 70/.6)}
.story-card h2{font-size:clamp(20px,1.7vw,24px);letter-spacing:-.025em;line-height:1.2;margin-top:8px}
.story-card a:hover h2{color:var(--accent)}
/* The newest story leads as a wide night-sky card, the same scene as its opening screen: the title floats in the dark and
   the cover rises into it from below, fading into the sky at its top edge. */
.story-card.feature{grid-column:1 / -1}
.story-card.feature a{position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:center;gap:0;
  min-height:clamp(560px,58vw,720px);padding:clamp(44px,6vw,84px) clamp(22px,5vw,64px) 0;overflow:hidden;border-radius:28px;background:#030304;
  color:#fff;text-align:center;box-shadow:0 50px 100px -60px rgb(10 20 50/.7);transition:transform .7s var(--ease),box-shadow .7s var(--ease)}
.story-card.feature a:hover{transform:translateY(-4px);box-shadow:0 60px 110px -56px rgb(10 20 50/.75)}
.feature-art{position:relative;z-index:-1;flex:1 1 auto;align-self:stretch;min-height:clamp(300px,36vw,520px);
  margin:calc(-1*clamp(40px,6vw,90px)) calc(-1*clamp(22px,5vw,64px)) 0}
.feature-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 20%;transform-origin:50% 30%;transition:transform 1.4s var(--ease);
  -webkit-mask:linear-gradient(to bottom,transparent,#000 30%);mask:linear-gradient(to bottom,transparent,#000 30%)}
.story-card.feature a:hover .feature-art img{transform:scale(1.035)}
.story-card.feature .story-card-text{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;max-width:760px}
.story-card.feature .story-meta{justify-content:center;color:rgb(255 255 255/.58)}
.story-card.feature .story-meta>*+*::before{color:rgb(255 255 255/.35)}
.story-card.feature .story-meta .kind{color:#9db8ff}
.story-card.feature h2{margin-top:14px;font-size:clamp(36px,5.6vw,72px);font-weight:680;letter-spacing:-.04em;line-height:1.03;text-wrap:balance;color:#fff}
.story-card.feature a:hover h2{color:#fff}
.story-card.feature .story-dek{max-width:560px;margin-top:16px;font-size:clamp(16px,1.35vw,19px);color:rgb(242 238 232/.78);text-wrap:balance}
.story-card.feature .cv-mark{position:absolute;left:clamp(18px,3vw,30px);bottom:clamp(16px,2.6vw,26px);display:flex;align-items:center;gap:8px;color:#fff;opacity:.9}
.story-card.feature .cv-mark i{width:12px;height:20px}
.story-card.feature .cv-mark b{font-size:15px}
.story-card.feature .cv-mark b em{color:#9db8ff}
.story-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 0;font-size:13.5px;color:var(--faint)}
.story-meta>*+*::before{content:'·';margin:0 9px;color:var(--faint)}
.story-meta .kind{color:var(--accent);font-weight:600}
.story-dek{margin-top:14px;font-size:18px;line-height:1.6;color:var(--muted);text-wrap:pretty}
.stories [hidden]{display:none}

/* ---------- A story ----------
   It opens on a black sky. The title, dek and byline float in it, and the cover rises into the frame from below, its
   top edge fading into the sky so the sun comes up just under the words. On load the cover brightens like dawn and the
   title's words rise in one after another; with reduced motion everything simply appears. */
.read-progress{position:fixed;inset:0 0 auto;z-index:60;height:2px;pointer-events:none}
.read-progress span{display:block;height:100%;background:var(--accent);transform-origin:0 50%;transform:scaleX(var(--p,0))}
.story-hero{position:relative;isolation:isolate;display:flex;flex-direction:column;min-height:100svh;margin-top:-64px;overflow:hidden;
  background:#030304;color:#fff}
.hero-sky{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;width:100%;max-width:calc(1120px + 2*var(--gutter));
  margin:0 auto;padding:calc(72px + clamp(24px,6.5vh,84px)) var(--gutter) 0;text-align:center}
.hero-back{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:500;color:rgb(255 255 255/.6);transition:color .3s var(--ease)}
.hero-back:hover{color:#fff}
.hero-title{margin-top:clamp(14px,2.4vh,26px);font-size:clamp(42px,min(7.2vw,10.8vh),96px);font-weight:680;letter-spacing:-.04em;line-height:1.02;
  text-wrap:balance;color:#fff}
.hero-title .w{display:inline-block}
.hero-dek{max-width:600px;margin-top:clamp(16px,2.6vh,26px);font-size:clamp(17px,1.4vw,21px);line-height:1.58;color:rgb(242 238 232/.8);text-wrap:balance}
.story-hero .byline{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;row-gap:6px;margin-top:clamp(18px,3vh,30px);
  font-size:14px;color:rgb(255 255 255/.66)}
.story-hero .byline img{width:28px;height:28px;margin-right:10px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 1px rgb(255 255 255/.22)}
.story-hero .byline b{font-weight:600;color:#fff}
.story-hero .byline .by-when::before{content:'·';margin:0 10px;color:rgb(255 255 255/.38)}
.story-hero .byline .by-when i{margin:0 10px;font-style:normal;color:rgb(255 255 255/.38)}
@media(max-width:480px){.story-hero .byline .by-when{flex-basis:100%}.story-hero .byline .by-when::before{content:none}}
.hero-art{position:relative;z-index:-1;flex:1 1 auto;min-height:clamp(240px,48svh,900px);margin-top:calc(-1*clamp(48px,9vh,130px))}
.hero-art::before{content:'';position:absolute;inset:auto 0 62% 0;height:90%;background:radial-gradient(46% 60% at 50% 100%,rgb(58 52 46/.7),transparent 72%)}
.hero-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform-origin:50% 30%;
  -webkit-mask:linear-gradient(to bottom,transparent,#000 24%,#000 74%,transparent);mask:linear-gradient(to bottom,transparent,#000 24%,#000 74%,transparent)}
/* A cover whose subject has to stay whole (a shopfront, not a horizon) names the rows it spans as --r0 and --r1
   (hero_safe in tools/blog.py). The image is then sized so those rows sit between the byline and the bottom of the
   opening, on a wide, short window as well as a tall one, and its edges fade into the dark when it's narrower. On a
   short window the words start higher, so the picture can stay big. */
@supports (height:1cqh){
  .story-hero.fit .hero-art{flex-basis:0;min-height:clamp(220px,40svh,900px);container-type:size} /* an auto basis reads as 0 tall */
  .story-hero.fit .hero-art img{--u0:calc(clamp(48px,9vh,130px) + 24px);--u1:calc(100cqh - 8px);
    --h:min(max(50cqw,100cqh),calc((var(--u1) - var(--u0))/(var(--r1) - var(--r0))));
    inset:auto;top:calc((var(--u0) + var(--u1) - (var(--r0) + var(--r1))*var(--h))/2);left:calc(50% - var(--h));
    width:calc(2*var(--h));max-width:none;height:var(--h);
    -webkit-mask:linear-gradient(to bottom,transparent 12%,#000 27%,#000 76%,transparent),linear-gradient(to right,transparent,#000 12%,#000 88%,transparent);
    -webkit-mask-composite:source-in;
    mask:linear-gradient(to bottom,transparent 12%,#000 27%,#000 76%,transparent),linear-gradient(to right,transparent,#000 12%,#000 88%,transparent);
    mask-composite:intersect}
  @media(min-width:768px) and (max-height:820px){.story-hero.fit .hero-sky{padding-top:calc(72px + clamp(8px,1.5vh,84px))}}
}
.hero-cue{position:absolute;left:50%;bottom:clamp(14px,3vh,28px);width:1px;height:44px;margin-left:-.5px;overflow:hidden;
  background:linear-gradient(rgb(255 255 255/0),rgb(255 255 255/.5))}
.hero-cue::after{content:'';position:absolute;inset:0 0 auto;height:40%;background:#fff}
@media(prefers-reduced-motion:no-preference){
  .hero-art img{animation:dawn 2.8s cubic-bezier(.16,1,.3,1) both}
  .hero-title .w{animation:rise 1.25s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(.35s + var(--i)*.075s)}
  .hero-back,.hero-dek,.story-hero .byline{animation:lift 1.2s cubic-bezier(.16,1,.3,1) both}
  .hero-back{animation-delay:.15s}.hero-dek{animation-delay:.85s}.story-hero .byline{animation-delay:1s}
  .hero-cue{animation:lift .9s ease both 2s}
  .hero-cue::after{animation:cue 2.4s cubic-bezier(.7,0,.3,1) 2.6s infinite}
}
@keyframes dawn{from{transform:scale(1.07);filter:brightness(.22) saturate(.7)}to{transform:none;filter:none}}
@keyframes rise{from{opacity:0;transform:translateY(.32em);filter:blur(12px)}to{opacity:1;transform:none;filter:none}}
@keyframes lift{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes cue{from{transform:translateY(-100%)}to{transform:translateY(260%)}}

/* While the dark opening is under the floating menu, the menu turns to dark glass so it doesn't sit on the night sky
   like a white sticker. blog.js adds .over-dark; the open phone menu keeps its light panel. */
body:has(.story-hero) .nav :is(.brand,.nav-links,.nav-tool,.nav-cta,.menu span){transition:color .4s var(--ease),background-color .4s var(--ease),transform .2s var(--ease)}
.nav.over-dark:not(.is-open) .nav-inner{background:rgb(22 22 26/.5);
  box-shadow:inset 0 0 0 1px rgb(255 255 255/.1),inset 0 1px 0 rgb(255 255 255/.07),0 14px 40px -18px rgb(0 0 0/.6)}
.nav.over-dark:not(.is-open) .brand{color:#fff}
.nav.over-dark:not(.is-open) .brand b,.nav.over-dark:not(.is-open) .nav-tool{color:#9db8ff}
.nav.over-dark:not(.is-open) .nav-links{color:rgb(255 255 255/.7)}
.nav.over-dark:not(.is-open) .nav-links a:hover,.nav.over-dark:not(.is-open) .nav-links a[aria-current=page]{color:#fff}
.nav.over-dark:not(.is-open) .nav-links a[aria-current=page],.nav.over-dark:not(.is-open) .nav-glide{background:rgb(255 255 255/.12)}
.nav.over-dark:not(.is-open) .nav-links.has-glide a[aria-current=page]{background:none}
.nav.over-dark:not(.is-open) .nav-tool:hover{background:rgb(157 184 255/.12)}
.nav.over-dark:not(.is-open) .nav-cta{background:#fff;color:var(--ink)}
.nav.over-dark:not(.is-open) .nav-cta:hover{background:#e8e8ed}
.nav.over-dark:not(.is-open) .menu span{background:#fff}

.story-body{max-width:calc(var(--max) + 2*var(--gutter));margin:0 auto;padding:clamp(56px,10vh,112px) var(--gutter) clamp(36px,6vh,64px)}
.prose{max-width:680px;margin:0 auto;font-size:clamp(18px,.55vw + 12.5px,20px);line-height:1.75;color:#2b2b30;text-wrap:pretty}
.prose>*+*{margin-top:1.2em}
.prose .story-lede{font-size:clamp(22px,1.25vw + 8px,27px);font-weight:450;letter-spacing:-.014em;line-height:1.5;color:var(--ink)}
.prose h2{margin-top:2.1em;font-size:clamp(26px,2.4vw,32px);letter-spacing:-.03em;line-height:1.15;color:var(--ink)}
.prose a{color:var(--accent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.prose sup{line-height:0}.prose sup a{padding:0 2px;font-size:.7em;font-weight:650;text-decoration:none}
.prose ul{padding-left:1.15em}.prose li+li{margin-top:.55em}.prose li::marker{color:var(--accent)}
.prose strong{font-weight:650;color:var(--ink)}
.prose .doom{margin-inline:calc(-1*clamp(0px,(100vw - 680px - 2*var(--gutter))/2,72px))}
/* Sources: a small "11 sources" button at the end opens them all in a little card, and each number in the text opens a
   card with just its source (blog.js places both by what was tapped). The cards are popovers, in the top layer. */
.prose>.sources{margin-top:2.4em}
.sources-open{display:inline-flex;align-items:center;gap:6px;margin-left:-10px;padding:5px 10px;border:0;border-radius:99px;background:none;
  font:inherit;font-size:13px;font-weight:500;line-height:1.4;color:var(--faint);cursor:pointer;transition:color .2s,background .2s}
.sources-open::after{content:'';width:9px;height:9px;background:currentColor;transition:transform .3s var(--ease);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 6.5 5 3.5l3 3' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 6.5 5 3.5l3 3' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.sources-open:hover,.sources:has(.sources-pop:popover-open) .sources-open{color:var(--ink);background:rgb(29 29 31/.05)}
.sources:has(.sources-pop:popover-open) .sources-open::after{transform:rotate(180deg)}
.prose sup a[aria-expanded=true]{border-radius:4px;background:rgb(47 98 224/.1)}

.pop{position:fixed;inset:auto;left:50%;top:50%;translate:-50% -50%;margin:0;width:min(var(--pw,520px),calc(100vw - 32px));
  max-height:var(--room,min(360px,calc(100dvh - 32px)));overflow:auto;overscroll-behavior:contain;padding:16px 20px 18px;border:0;border-radius:16px;
  background:#fff;color:var(--muted);font-size:13px;line-height:1.55;text-align:left;
  box-shadow:0 0 0 1px rgb(29 29 31/.08),0 2px 6px rgb(0 0 0/.04),0 22px 56px -16px rgb(0 0 0/.26);
  transform-origin:var(--origin,50% 100%);transition:opacity .16s ease,transform .26s cubic-bezier(.16,1,.3,1),display .26s allow-discrete,overlay .26s allow-discrete}
.pop.anchored{translate:none}
.pop:not(:popover-open){opacity:0;transform:translateY(var(--from,6px)) scale(.97)}
@starting-style{.pop:popover-open{opacity:0;transform:translateY(var(--from,6px)) scale(.97)}}
.pop::backdrop{background:none}
.pop-title{margin:0 0 .7em;font-size:12px;font-weight:600;color:var(--ink)}
/* When the list is taller than the card, its foot fades out until it's scrolled to the end. */
@supports (animation-timeline:scroll()){
  .sources-pop.scrolls::after{content:'';position:sticky;bottom:-18px;display:block;height:36px;margin:-36px -20px -18px;
    background:linear-gradient(rgb(255 255 255/0),#fff 70%);pointer-events:none;animation:list-end linear both;animation-timeline:scroll(nearest)}
  @keyframes list-end{88%{opacity:1}100%{opacity:0}}
}
.pop .footnotes{margin:0;padding:0 0 0 1.4em}
.pop .footnotes li+li{margin-top:.6em}
.pop .footnotes li::marker{color:var(--faint);font-variant-numeric:tabular-nums}
.prose .pop a{color:#3a3a40;text-decoration-color:rgb(29 29 31/.22)}
.prose .pop a:hover{color:var(--accent);text-decoration-color:currentColor}
.cite-pop{--pw:340px;display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;padding:14px 16px}
.cite-pop:not(:popover-open){display:none}
.cite-pop p{margin:0}
.pop-n{min-width:20px;height:20px;padding:0 5px;border-radius:99px;background:rgb(47 98 224/.1);color:var(--accent);
  font-size:11px;font-weight:650;line-height:20px;text-align:center;font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){.pop,.pop:not(:popover-open){transform:none}@starting-style{.pop:popover-open{transform:none}}}
/* An end mark: the MITRAS flame closes the last paragraph, as a magazine closes a story. */
.prose>p:last-of-type::after{content:'';display:inline-block;width:.52em;height:.86em;margin-left:.5em;vertical-align:-.06em;background:var(--accent);
  -webkit-mask:url(/assets/branding/mitras-mark.svg) center/contain no-repeat;mask:url(/assets/branding/mitras-mark.svg) center/contain no-repeat}
/* The author, set on the page under a hairline rather than in a card. */
.author{display:flex;align-items:center;gap:18px;max-width:680px;margin:52px auto 0;padding-top:24px;border-top:1px solid var(--line)}
.author img{width:64px;height:64px;border-radius:50%;object-fit:cover;flex:none}
.author p{font-size:15px;line-height:1.55;color:var(--muted)}.author b{color:var(--ink);font-weight:600}

/* The doom-o-meter: a night-sky card with a slider; the verdict compares the reader's guess with the 2023 survey and,
   once they answer, with every reader so far. The scale and the readers' marker sit inside the track, so 0%, 10% and the
   average line up with where the thumb's centre would be (it travels from 14px to 100% - 14px). */
.doom{margin:1.8em 0 2.2em;padding:clamp(22px,3vw,34px);border-radius:26px;color:#e9ecff;
  background:radial-gradient(90% 120% at 100% 0%,rgb(143 107 255/.35),transparent 60%),radial-gradient(80% 90% at 0% 100%,rgb(79 124 255/.3),transparent 60%),#0d1230}
.doom-title{display:block;font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#ff9b73}
.doom-q{display:block;margin-top:10px;font-size:clamp(19px,1.8vw,23px);font-weight:620;letter-spacing:-.015em;line-height:1.35;color:#fff}
.doom-dial{display:flex;align-items:center;gap:20px;margin:24px 0 30px;transition:margin-top .5s cubic-bezier(.2,.7,.2,1)}
.doom.has-avg .doom-dial{margin-top:62px}
.doom-track{position:relative;flex:1;min-width:0;display:flex}
.doom input{flex:1;min-width:0;height:8px;margin:0;border-radius:99px;-webkit-appearance:none;appearance:none;cursor:pointer;
  background:linear-gradient(90deg,#4f7cff,#8f6bff 45%,#ff8a5c)}
.doom input::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;border-radius:50%;background:#fff;box-shadow:0 0 0 6px rgb(255 255 255/.16),0 6px 18px rgb(0 0 0/.35)}
.doom input::-moz-range-thumb{width:28px;height:28px;border:0;border-radius:50%;background:#fff;box-shadow:0 0 0 6px rgb(255 255 255/.16),0 6px 18px rgb(0 0 0/.35)}
.doom input:focus-visible{outline:2px solid #fff;outline-offset:6px}
.doom-value{min-width:3.4ch;text-align:right;font-size:clamp(32px,3.4vw,44px);font-weight:700;letter-spacing:-.035em;font-variant-numeric:tabular-nums;color:#fff}
.doom-scale{position:absolute;inset:calc(100% + 12px) 0 auto;display:flex;justify-content:space-between;font-size:12px;color:rgb(233 236 255/.55)}
.doom-mark{position:absolute;left:calc(14px + (100% - 28px) * .1);translate:-50% 0;color:#ff9b73;font-weight:600}
.doom-mark::before{content:'';position:absolute;left:50%;bottom:calc(100% + 4px);width:1px;height:10px;background:#ff9b73}
.doom-avg{position:absolute;bottom:calc(100% + 18px);left:calc(14px + (100% - 28px) * var(--avg,0) / 100);width:1px;height:9px;
  background:#9db8ff;opacity:0;transition:opacity .4s .2s,left .6s cubic-bezier(.2,.7,.2,1)}
.doom-avg b{position:absolute;bottom:calc(100% + 5px);left:0;translate:var(--shift,-50%) 0;white-space:nowrap;font-size:12.5px;font-weight:650;color:#9db8ff}
.doom.has-avg .doom-avg{opacity:1}
.doom.has-avg .doom-avg b{animation:avg-pop .7s cubic-bezier(.16,1,.3,1) .15s both}
@keyframes avg-pop{from{opacity:0;transform:translateY(8px) scale(.88)}}
.doom input:disabled{opacity:1;cursor:default}
.doom-verdict{margin-top:0;font-size:16px;line-height:1.55;color:#cfd5ff}

/* The shopkeeper test: the doom-o-meter's card with four decisions in it. The reader's pick turns white, the AI's pick
   gets a small "AI" tag, and what the AI did opens underneath. Before JavaScript runs (no .live), each answer is a plain
   "What the AI did" disclosure. */
.shop-list{margin:22px 0 22px;padding:0;list-style:none}
.prose .shop-item{margin:0;padding:18px 0;border-top:1px solid rgb(233 236 255/.14)}
.shop-item:last-child{border-bottom:1px solid rgb(233 236 255/.14)}
.shop-q{margin:0;font-size:17px;line-height:1.5;color:#fff}
.shop-pick{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.shop-pick button{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border:1px solid rgb(233 236 255/.3);border-radius:99px;
  background:rgb(255 255 255/.06);font:inherit;font-size:15px;font-weight:600;line-height:1.3;color:#e9ecff;cursor:pointer;
  transition:background .2s,color .2s,border-color .2s}
.shop-pick button:hover:not(:disabled){background:rgb(255 255 255/.14)}
.shop-pick button:focus-visible{outline:2px solid #fff;outline-offset:3px}
.shop-pick button:disabled{cursor:default}
.shop-pick button[aria-pressed="true"]{background:#fff;border-color:#fff;color:#0d1230}
.answered .shop-pick button[aria-pressed="false"]{opacity:.62}
.shop-pick button.ai::after{content:'AI';padding:2px 7px;border-radius:99px;background:#ff9b73;font-size:11px;font-weight:700;letter-spacing:.08em;color:#0d1230}
.shop-share{font-size:13px;font-weight:500;opacity:.75}
.shop-a{margin-top:10px}
.shop-a summary{width:fit-content;font-size:14px;font-weight:600;color:#9db8ff;cursor:pointer}
.shop-a p{margin:8px 0 0;font-size:15.5px;line-height:1.55;color:#cfd5ff}
.shop.live .shop-a summary{display:none}
.shop.live .shop-a p{margin-top:0;animation:shop-in .5s cubic-bezier(.16,1,.3,1) both}
@keyframes shop-in{from{opacity:0;transform:translateY(6px)}}

@media(max-width:900px){.stories{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.stories{grid-template-columns:1fr}.prose{font-size:18px}
  .doom-dial{gap:14px}.doom-scale span:first-child{visibility:hidden}.author{align-items:flex-start}}
@media(prefers-reduced-motion:reduce){.story-card .cover,.story-card.feature a,.feature-art img,.doom-dial,.doom-avg{transition:none}.doom-avg b{animation:none!important}}