(TipTap wraps list items in ), giant-lettering every bullet point. */
.article-body-content > p:first-of-type::first-letter{font-family:var(--serif); font-size:3.6em; font-weight:600; float:left; line-height:.92; padding-right:14px; padding-top:4px; color:var(--white)}
.article-body-content a{color:var(--green); text-decoration:underline; text-decoration-color:rgba(31,223,103,.4); text-underline-offset:3px; transition:color .15s, text-decoration-color .15s}
.article-body-content a:hover{color:var(--green-soft); text-decoration-color:var(--green-soft)}
.article-body-content h1,
.article-body-content h2,
.article-body-content h3,
.article-body-content h4{font-family:var(--serif); color:var(--white); font-weight:600; line-height:1.15; letter-spacing:-.015em; margin-top:1.6em; margin-bottom:.4em}
.article-body-content h2{font-size:clamp(26px,3.4vw,38px)}
.article-body-content h3{font-size:clamp(22px,2.6vw,28px)}
.article-body-content h4{font-size:20px}
.article-body-content blockquote{font-family:var(--serif); font-style:italic; font-weight:300; font-size:clamp(22px,2.4vw,28px); line-height:1.4; color:var(--gold-soft); border-left:3px solid var(--gold); padding:6px 0 6px 26px; margin:2em 0 !important}
.article-body-content blockquote p{font-size:inherit; color:inherit; line-height:inherit; font-weight:inherit; font-family:inherit; max-width:none}
.article-body-content ul,
.article-body-content ol{padding-left:26px; color:var(--cream); font-weight:300}
.article-body-content li{margin:.4em 0}
.article-body-content figure{margin:2em 0 !important; position:relative; border-radius:12px; overflow:hidden}
.article-body-content figure img{border-radius:0; display:block; margin:0}
.article-body-content figcaption{position:absolute; left:0; right:0; bottom:0; margin:0; padding:36px 22px 16px; background:linear-gradient(transparent, rgba(7,8,7,.55) 35%, rgba(7,8,7,.9)); color:rgba(255,255,255,.7); font-family:var(--mono); font-size:11.5px; letter-spacing:.06em; line-height:1.5; text-align:left; pointer-events:none}
.article-body-content figcaption:empty{display:none}
.article-body-content img{max-width:100%; height:auto; border-radius:12px; background:var(--panel-2)}
/* Single body images auto-crop to the hero's 16/9 (object-fit:cover). The
:not() excludes the 2-column gallery grid, whose cells keep their
2/3 portrait crop. Slideshows are handled on .tmw-gallery below. */
.article-body-content figure:not(.tmw-gallery-grid-item){aspect-ratio:16/9}
.article-body-content figure:not(.tmw-gallery-grid-item) img{width:100%; height:100%; object-fit:cover}
.article-body-content > img{width:100%; aspect-ratio:16/9; object-fit:cover}
.article-body-content iframe{max-width:100%; aspect-ratio:16/9; height:auto; border-radius:12px; border:0; background:#000}
/* YouTube embeds carry a fixed width attr — force them full-width like images. */
.article-body-content div[data-youtube-video]{width:100%; margin:2em 0}
.article-body-content div[data-youtube-video] iframe,
.article-body-content iframe[src*="youtube"]{width:100%; aspect-ratio:16/9; height:auto}
/* Map of Tomorrow embed — fixed tall height so every article's map is identical,
regardless of the height="" the embed snippet was pasted with. Targets the
.tmw-map-embed class baked into the article body, so all current AND future
articles inherit it automatically. */
.article-body-content iframe.tmw-map-embed{width:100%; aspect-ratio:auto; height:760px; max-height:88vh; border-radius:14px}
@media(max-width:760px){.article-body-content iframe.tmw-map-embed{height:600px}}
.article-body-content hr{border:0; height:1px; background:var(--hair); margin:2.4em 0}
.article-body-content strong{color:var(--white); font-weight:600}
/* ---- Gallery slideshow (rendered from Wix GALLERY nodes) ---- */
.tmw-gallery{position:relative; margin:2em 0 !important; aspect-ratio:16/9; overflow:hidden; border-radius:12px; background:#0a0a0a; padding:0}
/* Grid/slideshow galleries are display:grid/flex, so their vertical margins do
NOT collapse with adjacent paragraph margins the way a does — that
double-counts and leaves an oversized gap. Zero the following element's
top-margin so a gallery's gap matches a single image's (the 2em above + 2em
below, never stacked with the next paragraph's margin). */
.article-body-content > .tmw-gallery + *,
.article-body-content > .tmw-gallery-grid + *{margin-top:0 !important}
.tmw-gallery-track{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; -ms-overflow-style:none; height:100%; scroll-behavior:smooth}
.tmw-gallery-track::-webkit-scrollbar{display:none}
.tmw-gallery-slide{flex:0 0 100%; width:100%; height:100%; position:relative; scroll-snap-align:start}
.tmw-gallery-slide img{width:100%; height:100%; object-fit:cover; border-radius:0; display:block; margin:0}
.tmw-gallery-caption{position:absolute; left:0; right:0; bottom:0; padding:30px 22px 18px; background:linear-gradient(transparent, rgba(7,8,7,.78) 60%, rgba(7,8,7,.92)); color:rgba(255,255,255,.7); font-family:var(--mono); font-size:11.5px; letter-spacing:.08em; line-height:1.5; pointer-events:none}
.tmw-gallery-arrow{position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:999px; background:none; border:none; backdrop-filter:none; -webkit-backdrop-filter:none; color:var(--white); display:flex; align-items:center; justify-content:center; cursor:pointer; opacity:0; transition:opacity .2s, color .2s, filter .2s, transform .2s; z-index:3; padding:0; filter:drop-shadow(0 1px 3px rgba(0,0,0,.55))}
.tmw-gallery:hover .tmw-gallery-arrow{opacity:1}
.tmw-gallery-arrow.prev{left:14px} .tmw-gallery-arrow.next{right:14px}
.tmw-gallery-arrow:hover,.tmw-gallery-arrow:active{color:var(--gold); filter:drop-shadow(0 0 6px rgba(230,197,116,.75)) drop-shadow(0 0 13px rgba(230,197,116,.45)); transform:translateY(-50%) scale(1.12)}
.tmw-gallery-arrow:disabled{opacity:0 !important; cursor:default}
.tmw-gallery-arrow svg{width:16px; height:16px}
.tmw-gallery-counter{position:absolute; top:14px; right:14px; font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; color:var(--white); background:rgba(7,8,7,.65); backdrop-filter:blur(10px); padding:5px 10px; border-radius:999px; z-index:3; font-weight:700}
@media (hover: none){.tmw-gallery-arrow{opacity:.65}}
/* ---- Gallery grid (2-column) ---- */
.tmw-gallery-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:2em 0 !important}
.tmw-gallery-grid-item{position:relative; border-radius:12px; overflow:hidden; background:#0a0a0a}
/* The grid items are elements, so the generic
".article-body-content figure{margin:2em 0 !important}" rule was adding a
~36px band ABOVE and BELOW every image INSIDE the gallery (that was the
"too much space"). Override it — needs the extra specificity + !important to
beat that rule — so the cells hug the images. */
.article-body-content .tmw-gallery-grid-item{margin:0 !important}
.tmw-gallery-grid-item img{width:100%; height:100%; object-fit:cover; display:block; aspect-ratio:2/3; margin:0; border-radius:0}
.tmw-gallery-grid-item figcaption{position:absolute; left:0; right:0; bottom:0; padding:26px 16px 12px; background:linear-gradient(transparent, rgba(7,8,7,.85) 70%); color:rgba(255,255,255,.7); font-family:var(--mono); font-size:11px; letter-spacing:.06em; line-height:1.45; pointer-events:none}
@media(max-width:560px){.tmw-gallery-grid{gap:6px} .tmw-gallery-grid-item figcaption{font-size:9.5px; padding:18px 10px 9px}}
/* Mobile: smaller caption text + a lighter (less dark) gradient overlay so the
captions feel airier on phones. */
@media(max-width:600px){
.article-body-content figcaption{font-size:10px; padding:28px 16px 13px; background:linear-gradient(transparent, rgba(7,8,7,.34) 40%, rgba(7,8,7,.68))}
.tmw-gallery-caption{font-size:10px; padding:24px 16px 14px; background:linear-gradient(transparent, rgba(7,8,7,.5) 60%, rgba(7,8,7,.72))}
.tmw-gallery-grid-item figcaption{background:linear-gradient(transparent, rgba(7,8,7,.62) 70%)}
}
/* ─── Image lightbox (click any article image to view full-screen) ─── */
.tmw-lb{position:fixed; inset:0; z-index:9999; display:none; align-items:center; justify-content:center; background:rgba(5,6,5,.95); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); overscroll-behavior:contain}
.tmw-lb.open{display:flex}
.tmw-lb-img{max-width:92vw; max-height:88vh; object-fit:contain; border-radius:6px; box-shadow:0 24px 90px rgba(0,0,0,.65); user-select:none}
.tmw-lb-close{position:absolute; top:16px; right:18px; width:42px; height:42px; border:0; border-radius:50%; background:rgba(255,255,255,.1); color:#fff; font-size:25px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .15s; z-index:2}
.tmw-lb-close:hover{background:rgba(255,255,255,.22)}
.tmw-lb-arrow{position:absolute; top:50%; transform:translateY(-50%); width:50px; height:50px; border:0; border-radius:50%; background:rgba(255,255,255,.08); color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .15s; z-index:2}
.tmw-lb-arrow:hover{background:rgba(255,255,255,.2)}
.tmw-lb-arrow svg{width:24px; height:24px}
.tmw-lb-arrow.prev{left:16px} .tmw-lb-arrow.next{right:16px}
.tmw-lb-counter{position:absolute; top:22px; left:50%; transform:translateX(-50%); color:rgba(255,255,255,.7); font-family:var(--mono); font-size:12px; letter-spacing:.1em}
.tmw-lb-cap{position:absolute; bottom:22px; left:50%; transform:translateX(-50%); max-width:80vw; text-align:center; color:rgba(255,255,255,.72); font-family:var(--mono); font-size:12px; line-height:1.5; pointer-events:none}
@media(max-width:600px){
.tmw-lb-arrow{width:40px; height:40px} .tmw-lb-arrow svg{width:20px; height:20px}
.tmw-lb-arrow.prev{left:8px} .tmw-lb-arrow.next{right:8px}
.tmw-lb-img{max-width:96vw; max-height:80vh}
.tmw-lb-cap{font-size:10.5px; max-width:90vw}
}
.article-body-content code{background:rgba(255,255,255,.06); padding:2px 6px; border-radius:4px; font-family:var(--mono); font-size:.9em}
.article-body-content pre{background:var(--panel); border:1px solid var(--hair); border-radius:10px; padding:18px; overflow-x:auto; font-family:var(--mono); font-size:13.5px; line-height:1.6}
/* Empty / error states */
.art-empty{padding:120px 28px; text-align:center; max-width:680px; margin:0 auto}
.art-empty h2{font-size:32px; margin-bottom:14px}
.art-empty p{color:var(--mute-2); margin-bottom:24px}
.art-empty .legacy-link{display:inline-flex; align-items:center; gap:8px; padding:12px 22px; background:var(--green); color:var(--ink); border-radius:999px; font-family:var(--mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; font-weight:700}
.art-empty .err{background:rgba(158,59,27,.12); border:1px solid rgba(158,59,27,.35); border-radius:10px; padding:16px 22px; color:#f5a98e; font-family:var(--mono); font-size:12px; margin-top:24px; text-align:left}
/* ============== READ NEXT ============== */
.read-next{padding:70px 0 80px; border-top:1px solid var(--hair); background:var(--ink-2)}
.read-next h3{font-size:clamp(22px,2.8vw,32px); margin-bottom:30px}
.rn-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
@media(max-width:880px){.rn-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.rn-grid{grid-template-columns:1fr}}
.rn-card{background:var(--panel); border:1px solid var(--hair); border-radius:14px; overflow:hidden; transition:transform .25s ease, border-color .25s ease}
.rn-card:hover{transform:translateY(-3px); border-color:var(--hair-2)}
.rn-card-img{aspect-ratio:16/10; background:var(--panel-2); overflow:hidden}
.rn-card-img img{width:100%; height:100%; object-fit:cover; transition:transform .6s ease}
.rn-card:hover .rn-card-img img{transform:scale(1.04)}
.rn-card-body{padding:18px 20px 20px}
.rn-card-date{font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--mute); margin-bottom:8px}
.rn-card-title{font-family:var(--serif); font-weight:600; font-size:18px; line-height:1.22; color:var(--white)}
/* Skeleton */
.skel-block{background:linear-gradient(90deg, #161916, #1f231f, #161916); background-size:200% 100%; animation:shimmer 1.8s linear infinite; border-radius:6px}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
/* Footer */
footer{background:var(--ink-2); color:var(--mute-2); padding:60px 0 30px; border-top:1px solid var(--hair)}
footer .ft-grid{display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:40px; padding-bottom:30px; border-bottom:1px solid var(--hair)}
@media(max-width:900px){footer .ft-grid{grid-template-columns:1fr 1fr; gap:30px}}
footer h4{font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--white); margin-bottom:14px; font-weight:600}
footer ul{list-style:none; display:flex; flex-direction:column; gap:9px; font-size:14px}
footer ul a{color:var(--mute); transition:color .2s}
footer ul a:hover{color:var(--green)}
footer .blurb{color:var(--mute); font-size:13px; line-height:1.55; margin-top:14px; max-width:32ch}
footer .ft-bot{padding-top:22px; font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--mute); display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px}
footer .tmw-wordmark{width:118px}
/* ===== Subscribe lightbox =====
The .tmw-sub* styles now live ONCE in the shared funnel module
(journal/_shared/journal-signup-funnel.js), which injects them on every page
so the popup is byte-identical site-wide. Kept out of post.css on purpose to
avoid the two copies drifting again. */
/* ── TMW Intelligence: AI summary + follow suggestions atop the article ── */
.article-intel{margin:22px 0 4px; border:1px solid rgba(167,139,250,.26); border-radius:16px;
background:linear-gradient(180deg, rgba(167,139,250,.075), rgba(167,139,250,.02)); padding:17px 20px 16px; position:relative}
.article-intel[hidden]{display:none}
/* instant skeleton loader (shown while /post-intel resolves) */
.article-intel .ai-skel{height:13px; border-radius:6px; margin-bottom:11px;
background:linear-gradient(90deg, rgba(255,255,255,.05) 25%, rgba(255,255,255,.11) 50%, rgba(255,255,255,.05) 75%);
background-size:200% 100%; animation:aiShimmer 1.25s ease-in-out infinite}
.article-intel .ai-skel-1{width:97%} .article-intel .ai-skel-2{width:90%} .article-intel .ai-skel-3{width:64%; margin-bottom:2px}
@keyframes aiShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.ai-head{display:flex; align-items:center; gap:8px; font-family:var(--mono); font-size:10.5px; letter-spacing:.16em;
text-transform:uppercase; font-weight:700; color:var(--purple-glow); margin-bottom:12px}
.ai-head .spark{width:15px; height:15px; flex:0 0 auto; fill:var(--purple-glow); filter:drop-shadow(0 0 6px rgba(167,139,250,.75))}
.ai-head .live{margin-left:auto; display:inline-flex; align-items:center; gap:5px; font-size:9px; letter-spacing:.14em; color:var(--mute)}
.ai-head .live i{width:5px; height:5px; border-radius:50%; background:var(--green); box-shadow:0 0 8px var(--green)}
.ai-tldr{font-family:var(--sans); font-size:15.5px; line-height:1.55; color:var(--cream); margin:0 0 13px}
.ai-takes{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px}
.ai-takes li{position:relative; padding-left:20px; font-size:13.5px; line-height:1.5; color:var(--mute-2)}
.ai-takes li::before{content:""; position:absolute; left:4px; top:8px; width:6px; height:6px; border-radius:50%;
background:var(--purple); box-shadow:0 0 8px rgba(167,139,250,.65)}
.ai-follows{display:flex; flex-wrap:wrap; gap:8px; margin-top:15px; padding-top:14px; border-top:1px solid rgba(167,139,250,.15)}
.ai-follows-k{width:100%; font-family:var(--mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--mute); margin:0 0 3px}
.ai-follow{display:inline-flex; align-items:center; gap:8px; cursor:pointer; appearance:none;
font-family:var(--sans); font-size:13px; font-weight:600; color:var(--cream);
background:rgba(255,255,255,.04); border:1px solid var(--hair-2); border-radius:999px; padding:8px 14px 8px 11px;
transition:border-color .15s, background .15s, transform .12s}
.ai-follow:hover{border-color:var(--purple); background:rgba(167,139,250,.1); transform:translateY(-1px)}
.ai-follow .ai-f-ic{width:15px; height:15px; flex:0 0 auto; stroke:var(--purple-glow); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.ai-follow .ai-f-role{font-family:var(--mono); font-size:8.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--mute)}
.ai-follow.on{border-color:rgba(31,223,103,.5); background:rgba(31,223,103,.1); color:var(--green-soft)}
.ai-follow.on .ai-f-ic{stroke:var(--green-soft)}
.ai-follow.on .ai-f-role{color:var(--green-soft)}
/* Ask Onyx bar inside the intel block */
.article-intel .ai-ask{display:flex; align-items:center; gap:10px; margin-top:15px; padding:9px 10px 9px 13px; border-radius:12px;
background:rgba(0,0,0,.28); border:1px solid rgba(167,139,250,.3); transition:border-color .15s, box-shadow .15s}
.article-intel .ai-ask:focus-within{border-color:var(--purple); box-shadow:0 0 0 3px rgba(167,139,250,.14)}
.article-intel .ai-ask-hex{width:19px; height:19px; flex:0 0 auto; display:block}
.article-intel .ai-ask-hex svg{width:100%; height:100%; display:block; overflow:visible}
.article-intel .ai-ask-in{flex:1; min-width:0; background:transparent; border:0; outline:none; color:var(--cream); font-family:var(--sans); font-size:14px}
.article-intel .ai-ask-in::placeholder{color:var(--mute)}
/* Gray circle submit — mirrors the /search bar's resting .go button. */
.article-intel .ai-ask-go{flex:0 0 auto; appearance:none; cursor:pointer; width:34px; height:34px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.10); color:rgba(255,255,255,.5); transition:background .2s, border-color .2s, color .2s, transform .12s}
.article-intel .ai-ask-go:hover{background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.2); color:rgba(255,255,255,.85); transform:translateY(-1px)}
.article-intel .ai-ask-go svg{width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
/* inline Onyx answer (from the article) */
.article-intel .ai-ask-ans{margin-top:11px}
.article-intel .ai-ask-ans[hidden]{display:none}
.article-intel .ai-ask-loading{display:flex; align-items:center; gap:10px; font-size:13.5px; color:var(--mute-2); padding:4px 2px}
.article-intel .ai-ask-a{font-family:var(--sans); font-size:14.5px; line-height:1.55; color:var(--cream); padding:4px 2px}
.article-intel .ai-ask-foot{margin-top:8px}
.article-intel .ai-ask-more{display:inline-flex; align-items:center; gap:6px; appearance:none; cursor:pointer; background:none; border:0; padding:2px;
font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; font-weight:700; color:var(--purple-glow)}
.article-intel .ai-ask-more:hover{color:#fff}
.article-intel .ai-ask-more svg{width:12px; height:12px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
/* Summary block holds the takeaways + the expand caret. On desktop the caret
floats to the far right of the last bullet's line (position:absolute), so the
box loses the extra caret row. */
.article-intel .ai-sum{position:relative}
.article-intel .ai-takes{padding-right:38px} /* clear the floated caret */
/* Expand control — a circular button so it clearly reads as tappable; the
chevron bobs to invite a click and flips to point up on expand. touch-action
+ no tap-highlight + hover gated to hover-capable devices so a mobile tap
opens on the FIRST touch instead of just applying a hover state. */
.article-intel .ai-expand{position:absolute; right:0; bottom:-2px; display:inline-flex; align-items:center; justify-content:center;
width:24px; height:24px; padding:0; appearance:none; cursor:pointer; border-radius:50%;
background:rgba(167,139,250,.07); border:1px solid rgba(167,139,250,.26); color:var(--purple-glow);
-webkit-tap-highlight-color:transparent; touch-action:manipulation;
transition:background .18s, border-color .18s, color .18s}
.article-intel .ai-expand svg{width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round;
position:relative; top:1.5px; /* a down-chevron reads top-heavy — drop it to sit centered in the circle */
transition:transform .35s cubic-bezier(.4,0,.2,1), top .35s cubic-bezier(.4,0,.2,1); animation:ai-caret-bob 2.2s linear infinite}
@media(hover:hover){ .article-intel .ai-expand:hover{background:rgba(167,139,250,.18); border-color:var(--purple); color:#fff} }
/* Expanded: chevron flips to point up (now bottom-heavy) — mirror the nudge so
the still icon sits centered in the circle. */
.article-intel.ai-open .ai-expand svg{transform:rotate(180deg); animation:none; top:-1.5px}
/* Smooth sine bob (linear timing over a sine-shaped keyframe curve = no pauses
at the turns). Gentle ±1.5px, equal above/below center. */
@keyframes ai-caret-bob{
0%{transform:translateY(0)} 12.5%{transform:translateY(-1.06px)} 25%{transform:translateY(-1.5px)} 37.5%{transform:translateY(-1.06px)}
50%{transform:translateY(0)} 62.5%{transform:translateY(0.71px)} 67%{transform:translateY(1px)} 87.5%{transform:translateY(0.71px)} 100%{transform:translateY(0)}}
/* Collapsible region — grid-rows 0fr→1fr animates height without a fixed max,
so a loaded Onyx answer grows naturally when open. */
.article-intel .ai-more{display:grid; grid-template-rows:0fr; opacity:0;
transition:grid-template-rows .4s cubic-bezier(.4,0,.2,1), opacity .3s ease}
.article-intel .ai-more-inner{overflow:hidden; min-height:0}
.article-intel.ai-open .ai-more{grid-template-rows:1fr; opacity:1}
.article-intel .ai-takes-c{min-height:0}
@media (prefers-reduced-motion:reduce){ .article-intel .ai-expand svg{animation:none} }
/* Mobile: paragraph-only by default — the bullets join the collapsed region.
The caret rides the LAST line of the paragraph (far right, in a reserved
gutter) so it never takes its own row; it stays put collapsed or open. */
@media(max-width:700px){
.article-intel{padding:15px 17px 14px}
.article-intel .ai-tldr{margin-bottom:0; padding-right:38px}
.article-intel .ai-sum{display:flex; flex-direction:column}
/* gap above the bullets when expanded — lives inside the collapsed region so
it only appears once open (the caret rides the paragraph's last line). */
.article-intel .ai-takes{padding-right:0; padding-top:16px}
.article-intel .ai-takes-c{display:grid; grid-template-rows:0fr; opacity:0; order:1;
transition:grid-template-rows .4s cubic-bezier(.4,0,.2,1), opacity .3s ease}
.article-intel .ai-takes-c > .ai-takes{overflow:hidden}
.article-intel.ai-open .ai-takes-c{grid-template-rows:1fr; opacity:1}
/* pull the caret up onto the paragraph's last line (into the gutter); z-index
so the tap always lands over the paragraph text. */
.article-intel .ai-expand{position:relative; z-index:2; order:0; align-self:flex-end; width:30px; height:30px; margin:-26px 0 0}
.article-intel .ai-expand svg{width:17px; height:17px}
}
/* ── Post-follow nudge — one line pointing at the Pro payoff ── */
.ai-follow-nudge{display:inline-flex; align-items:center; gap:7px; width:100%; margin-top:8px; padding:0; border:0; background:none; cursor:pointer; text-align:left;
font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; color:#C4B5FD; text-shadow:0 0 12px rgba(167,139,250,.4)}
.ai-follow-nudge svg{width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform .2s}
.ai-follow-nudge:hover svg{transform:translateX(2px)}
/* ── Onyx Deep tease under Ask-Onyx answers (compact purple, collapsed) ── */
.ai-dt{margin-top:10px; border:1px solid rgba(167,139,250,.38); border-radius:12px; padding:9px 14px; position:relative; overflow:hidden;
background:linear-gradient(180deg,rgba(167,139,250,.06),rgba(167,139,250,.015));
animation:aiDtGlow 2.6s ease-in-out infinite}
.ai-dt.open{padding:12px 16px 14px}
@keyframes aiDtGlow{0%,100%{box-shadow:0 0 0 1px rgba(167,139,250,.08) inset,0 0 18px -6px rgba(167,139,250,.22)}
50%{box-shadow:0 0 0 1px rgba(167,139,250,.14) inset,0 0 26px -4px rgba(167,139,250,.4)}}
@media(prefers-reduced-motion:reduce){.ai-dt{animation:none}.ai-dt-bar{animation:none}}
.ai-dt-toggle{width:100%; background:none; border:0; padding:0; cursor:pointer; font:inherit; color:inherit; text-align:left; display:flex; align-items:center; gap:10px}
.ai-dt-eye{font:700 10.5px/1 "Inter",-apple-system,system-ui,sans-serif; letter-spacing:.1em; text-transform:uppercase; color:#C4B5FD; text-shadow:0 0 12px rgba(167,139,250,.5); display:flex; align-items:center; gap:6px; flex:none}
.ai-dt-eye svg{width:12px; height:12px; flex:none}
.ai-dt-pro{font-size:7.5px; letter-spacing:.12em; background:#B9A6FF; color:#120a24; border-radius:4px; padding:2px 5px; font-weight:800}
.ai-dt-peek{font-size:11.5px; color:rgba(236,234,229,.6); flex:1 1 auto; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ai-dt-chev{color:#C4B5FD; font-size:11px; flex:none; transition:transform .2s}
.ai-dt.open .ai-dt-chev{transform:rotate(180deg)}
.ai-dt-body{margin-top:9px}
.ai-dt-sec{font-size:12px; font-weight:600; color:#ECEAE5; display:flex; align-items:center; gap:7px; padding-top:9px; border-top:1px solid rgba(255,255,255,.06); margin-bottom:6px}
.ai-dt-sec .k{font-family:var(--mono); font-size:8px; color:#C4B5FD; letter-spacing:.14em}
.ai-dt-bar{height:6px; border-radius:3px; margin:4px 0; background:linear-gradient(90deg,rgba(255,255,255,.05) 25%,rgba(167,139,250,.13) 50%,rgba(255,255,255,.05) 75%); background-size:200% 100%; animation:aiDtShimmer 1.8s linear infinite}
@keyframes aiDtShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.ai-dt-cta{display:inline-flex; align-items:center; gap:7px; margin-top:10px; padding:8px 14px; border-radius:999px; border:1px solid rgba(167,139,250,.5); background:rgba(167,139,250,.12); color:#C4B5FD;
font:600 11.5px/1 "Inter",-apple-system,system-ui,sans-serif; letter-spacing:.03em; cursor:pointer; text-shadow:0 0 12px rgba(167,139,250,.5)}
.ai-dt-cta:hover{background:rgba(167,139,250,.18)}