/* CosmicRx homepage. Everything is scoped under .crx so Assembler's global styles can't leak in (or out). */

body.crx-home{margin:0; background:#EBECFF}

.crx{
  --ground:#EBECFF; --orchid:#FD42D2; --violet:#61538A; --pink:#FD329A; --ink:#433259; --white:#FFFFFF;
  --disp:"Bricolage Grotesque", "Arial Narrow", Impact, system-ui, sans-serif;
  --brand:"Room205", "Instrument Serif", Georgia, serif;
  --serif:"Instrument Serif", "Times New Roman", Georgia, serif;
  --mono:"DM Mono", ui-monospace, Menlo, monospace;
  --gutter:clamp(16px,4vw,48px);
  background:var(--ground); color:var(--ink); font-family:var(--disp); font-size:17px; line-height:1.5; font-variation-settings:"opsz" 14;
  -webkit-font-smoothing:antialiased; overflow-x:clip;
}
.crx *, .crx *::before, .crx *::after{box-sizing:border-box}
.crx a{color:inherit; text-decoration:none}
.crx p{margin:0}
.crx ul{margin:0; padding:0; list-style:none}
.crx img{max-width:100%; height:auto; display:block}
.crx .wrap{max-width:1280px; margin:0 auto; padding-inline:var(--gutter)}
.crx h1,.crx h2,.crx h3,.crx h4{margin:0; font-family:var(--disp); font-weight:800; font-stretch:75%; text-transform:uppercase; line-height:.86; letter-spacing:-.01em; text-wrap:balance; color:inherit}
.crx .sv{font-family:var(--serif); font-style:italic; font-weight:400; text-transform:none; letter-spacing:-.02em; font-stretch:100%}
.crx .tag{font-family:var(--mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase}
.crx :focus-visible{outline:3px solid var(--violet); outline-offset:3px}

.crx .btn{display:inline-flex; align-items:center; gap:10px; font:700 16px/1 var(--disp); padding:17px 26px; border-radius:999px; border:2px solid var(--ink); background:var(--ink); color:var(--white); cursor:pointer; transition:transform .15s, box-shadow .15s; white-space:nowrap}
.crx .btn:hover{transform:translate(-2px,-2px); box-shadow:4px 4px 0 var(--ink)}
.crx .btn.alt{background:var(--white); color:var(--ink)}
.crx .btn.y{background:var(--orchid); color:var(--ink)}
.crx .ctas{display:flex; flex-wrap:wrap; gap:12px}

.crx .sticker{position:absolute; display:grid; place-items:center; text-align:center; border-radius:50%; font:800 13px/1.05 var(--disp); text-transform:uppercase; border:2px solid var(--ink); z-index:2; color:var(--ink)}

/* nav */
.crx .nav{position:sticky; top:0; z-index:50; padding-block:12px}
.admin-bar .crx .nav{top:32px}
@media (max-width:782px){ .admin-bar .crx .nav{top:46px} }
@media (max-width:600px){ .admin-bar .crx .nav{top:0} }
.crx .nav-in{position:relative; display:flex; align-items:center; gap:24px; background:var(--white); border:2px solid var(--ink); border-radius:999px; padding:8px 8px 8px 24px}
/* Logo: the CosmicRx wordmark in the brand face Room205, with a magenta Rx */
.crx .logo{flex:none; font:400 31px/1 var(--brand); letter-spacing:-.01em; white-space:nowrap; color:var(--ink)}
.crx .logo b, .crx .logo-text b{color:var(--pink); font-weight:400}
.crx .nav-links{display:flex; gap:22px; margin:0 auto; font-weight:600; font-size:15px}
.crx .nav-links a:hover{color:var(--pink)}
.crx .nav-cta{padding:12px 20px; font-size:14px}
.crx .menu-btn{display:none; font:700 14px/1 var(--disp); background:var(--white); color:var(--ink); border:2px solid var(--ink); border-radius:999px; padding:10px 16px; cursor:pointer}
@media (max-width:980px){
  .crx .nav-links{display:none; position:absolute; top:calc(100% + 8px); left:0; right:0; flex-direction:column; gap:0; background:var(--white); border:2px solid var(--ink); border-radius:24px; padding:8px; font-size:18px}
  .crx .nav-links a{display:block; padding:12px 16px; border-radius:14px}
  .crx .nav-links a:hover{background:var(--ground)}
  .crx .nav.open .nav-links{display:flex}
  .crx .nav-cta{margin-left:auto}
  .crx .menu-btn{display:block}
}
@media (max-width:420px){ .crx .nav-cta{padding:12px 14px; font-size:13px} .crx .nav-in{gap:10px; padding-left:16px} .crx .logo{font-size:25px} }

/* ticker */
.crx .ticker{background:var(--ink); color:var(--white); overflow:hidden; white-space:nowrap}
.crx .ticker-track{display:inline-flex; gap:40px; padding:12px 0; font:500 14px/1 var(--mono); text-transform:uppercase; letter-spacing:.06em}
.crx .ticker-track span::after{content:"✦"; margin-left:40px; color:var(--orchid)}
@media (prefers-reduced-motion:no-preference){ .crx .ticker-track{animation:crx-tick 40s linear infinite} }
@keyframes crx-tick{to{transform:translateX(-50%)}}

/* hero */
.crx .hero{display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(28px,4vw,56px); align-items:center; padding-block:clamp(40px,6vw,80px) clamp(48px,6vw,88px)}
.crx .hero h1{font-size:clamp(64px,11.6vw,168px)}
.crx .hero h1 .sv{display:block; color:var(--pink); font-size:.8em; line-height:.9; margin-top:.04em}
/* the footnote on the warning label (hero + blog headings) */
.crx h1 .aka{display:block; width:fit-content; margin:14px 0 0 4px; background:var(--pink); color:var(--white); border:2px solid var(--ink); border-radius:999px; padding:.42em .9em .38em; font:700 clamp(15px,1.7vw,24px)/1 var(--disp); font-stretch:100%; text-transform:none; letter-spacing:0; transform:rotate(-4deg); box-shadow:4px 4px 0 var(--ink)}
.crx .hero .tag{margin-bottom:14px}
.crx .lede{font-size:clamp(19px,1.8vw,23px); max-width:30ch; margin:26px 0 30px; font-weight:500}
.crx .lede i{font-family:var(--serif); font-size:1.15em}
.crx .proof{margin-top:32px; display:flex; align-items:center; gap:14px; font-weight:600}
.crx .faces{display:flex}
.crx .faces i{width:38px; height:38px; border-radius:50%; border:2px solid var(--ground); margin-left:-10px; display:block}
.crx .faces i:first-child{margin-left:0}
.crx .faces .f1{background:var(--violet)} .crx .faces .f2{background:var(--pink)} .crx .faces .f3{background:var(--orchid)} .crx .faces .f4{background:var(--white)}

/* Hero poster: today's moon over a real sky photo */
.crx .poster{position:relative; isolation:isolate; width:100%; max-width:520px; justify-self:center; aspect-ratio:4/5; display:flex; flex-direction:column; padding:clamp(20px,3vw,28px); color:var(--white); border:2px solid var(--ink); border-radius:36px; box-shadow:10px 10px 0 var(--ink); container-type:inline-size; background:var(--violet) var(--img) center var(--img-y, 68%)/cover no-repeat}
.crx .poster::before{content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; background:linear-gradient(0deg, rgba(67,50,89,.88) 0%, rgba(67,50,89,.5) 48%, rgba(67,50,89,0) 70%)}
.crx .poster-copy{margin-top:auto; display:flex; flex-direction:column; gap:12px; text-shadow:0 2px 18px rgba(30,20,50,.35)}
/* type scales with the card (cqi = % of card width) so the sky's moon always shows */
.crx .poster h2{font-size:clamp(34px,14cqi,74px); line-height:.84}
.crx .poster h2 .sv{display:block; color:#FFB8EF; font-size:.82em; line-height:.95}
/* Today's prescription, stapled into the poster */
.crx .poster-rx{display:grid; grid-template-columns:auto 1fr; gap:4px clamp(12px,3.5cqi,18px); align-items:center; margin-top:14px; padding:clamp(12px,3.6cqi,20px) clamp(14px,4cqi,22px); border:1.5px dashed rgba(255,255,255,.55); border-radius:18px; background:rgba(67,50,89,.45); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px)}
.crx .poster-rx .rx-sym{font:400 clamp(44px,15cqi,84px)/.8 var(--serif); font-style:italic; color:#FFB8EF}
.crx .poster-rx .tag{font-size:clamp(10.5px,2.4cqi,12.5px); opacity:.85; margin-bottom:8px}
.crx .poster-rx h3{font-size:clamp(22px,7.6cqi,40px); line-height:.92}
.crx .poster-rx #crx-rx-body{margin-top:6px; font-size:clamp(13.5px,3.8cqi,19px); font-weight:600; line-height:1.35}
.crx .poster-chips{display:flex; flex-wrap:wrap; gap:6px; margin-top:14px}
.crx .poster-chips .pill{border:2px solid var(--ink)}
.crx .poster-chips .pill:empty{display:none}
.crx .poster .sticker{width:clamp(76px,21cqi,100px); height:clamp(76px,21cqi,100px); font-size:clamp(10.5px,2.8cqi,13px); background:var(--orchid); top:18px; right:18px; transform:rotate(10deg)}
.crx .spark{position:absolute; z-index:1; width:var(--s,16px); aspect-ratio:1; background:#fff; clip-path:polygon(50% 0,58% 42%,100% 50%,58% 58%,50% 100%,42% 58%,0 50%,42% 42%); filter:drop-shadow(0 0 6px rgba(255,255,255,.9)); pointer-events:none}
@media (prefers-reduced-motion:no-preference){ .crx .spark{animation:crx-tw 2.8s ease-in-out infinite; animation-delay:var(--d,0s)} }
@keyframes crx-tw{0%,100%{opacity:.35; transform:scale(.6) rotate(0)} 50%{opacity:1; transform:scale(1) rotate(20deg)}}
.crx .pill{display:inline-block; background:var(--white); color:var(--ink); border-radius:999px; padding:6px 12px; font:500 11.5px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase}
.crx .pill.live::before{content:"● "; color:var(--pink)}
@media (max-width:900px){ .crx .hero{grid-template-columns:1fr} }

/* section heads */
.crx .head{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:20px 40px; margin:clamp(88px,11vw,150px) 0 clamp(28px,4vw,48px)}
.crx .head h2{font-size:clamp(56px,9vw,128px)}
.crx .head h2 .sv{color:var(--pink)}
.crx .head p{max-width:36ch; font-size:18px; font-weight:500}
.crx .head p a{border-bottom:2px solid currentColor; white-space:nowrap}

/* channels */
.crx .bento{display:grid; grid-template-columns:repeat(12,1fr); gap:16px}
.crx .card{position:relative; border:2px solid var(--ink); border-radius:32px; padding:clamp(22px,3vw,34px); display:flex; flex-direction:column; gap:16px; overflow:hidden; min-width:0}
.crx .card h3{font-size:clamp(46px,5.4vw,78px)}
.crx .card > p{font-size:17px; font-weight:500; max-width:44ch}
.crx .card > .btn, .crx .card > .ctas{margin-top:auto}
.crx .card > .btn{align-self:flex-start}
.crx .card .tag{display:flex; flex-wrap:wrap; justify-content:space-between; gap:6px 12px}
.crx .card .l{font:500 10.5px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; border-radius:999px; padding:7px 10px; white-space:nowrap}

.crx .academy{grid-column:1 / -1; flex-direction:row; align-items:stretch; gap:clamp(24px,4vw,56px); background:var(--white); color:var(--ink)}
.crx .ac-intro{flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:16px}
.crx .ac-intro p{font-size:17px; font-weight:500; max-width:40ch}
.crx .ac-intro .btn{align-self:flex-start; margin-top:auto}
.crx .academy h3 .sv{color:var(--pink)}
.crx .courses{flex:1 1 0; min-width:0; display:grid; gap:10px; align-content:center}
.crx .courses a{display:flex; align-items:center; justify-content:space-between; gap:14px; background:var(--ground); border:2px solid var(--ink); color:var(--ink); border-radius:999px; padding:12px 12px 12px 20px; font-weight:700; font-size:16px; transition:transform .15s}
.crx .courses a:hover{transform:translateX(6px)}
.crx .courses a{justify-content:flex-start}
.crx .courses .l{background:var(--orchid); color:var(--ink); flex:none; min-width:104px; text-align:center}
.crx .courses .ct{flex:1 1 auto; min-width:0; line-height:1.25}
.crx .courses .go{flex:none; font-family:var(--mono); padding-right:8px}
@media (max-width:540px){ .crx .courses a{flex-wrap:wrap; border-radius:22px; padding:12px 16px} .crx .courses .l{min-width:0} }

.crx .letter{grid-column:span 6; color:var(--white); background:radial-gradient(120% 85% at 88% 0%, #BAA3E9 0%, #8B78C2 26%, #61538A 56%, #433259 100%)}
.crx .letter h3 .sv{color:#BAA3E9}
.crx .letter .btn{background:var(--white); color:var(--ink); border-color:var(--white)}
.crx .letter .btn:hover{box-shadow:4px 4px 0 var(--orchid)}
.crx .letter > p{font-weight:600}
.crx .sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.crx .sub-form{display:flex; align-items:center; gap:6px; background:var(--white); border:2px solid var(--ink); border-radius:999px; padding:6px}
.crx .sub-form input{flex:1 1 auto; min-width:0; border:0; background:transparent; font:500 16px var(--disp); color:var(--ink); padding:12px 8px 12px 16px; outline:none}
.crx .sub-form input::placeholder{color:#8A82A6}
.crx .sub-form:focus-within{box-shadow:0 0 0 3px var(--orchid)}
.crx .letter .sub-form .btn{background:var(--ink); color:var(--white); border-color:var(--ink); padding:14px 22px; flex:none}
.crx .letter .sub-form .btn:hover{box-shadow:none; transform:none; background:var(--violet)}
.crx .issues{display:grid; gap:8px}
.crx .issues a{display:flex; align-items:baseline; gap:10px; font-weight:700; font-size:15px; line-height:1.3}
.crx .issues a:hover{text-decoration:underline}
.crx .issues .l{background:var(--orchid); color:var(--ink); flex:none}

.crx .pod{grid-column:span 6; background:var(--pink); color:var(--ink)}
.crx .pod h3 .sv{color:var(--white)}
.crx .pod > p{font-weight:600}
.crx .spotify-embed{border:2px solid var(--ink); border-radius:16px; overflow:hidden; background:var(--ink); line-height:0}
.crx .spotify-embed iframe{display:block; width:100%; height:232px; border:0}

.crx .yt{grid-column:1 / -1; background:var(--orchid); color:var(--ink)}
.crx .yt h3 .sv{color:var(--white)}
.crx .yt-row{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:18px}
.crx .yt-title{display:grid; gap:14px}
.crx .vids{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.crx .vid{display:grid; gap:10px; align-content:start}
.crx .thumb{position:relative; aspect-ratio:16/9; max-width:100%; border-radius:20px; overflow:hidden; display:grid; place-items:center; border:2px solid var(--ink); background:var(--ink)}
.crx .thumb img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.crx .thumb.c1{background:var(--orchid)} .crx .thumb.c2{background:var(--pink)} .crx .thumb.c3{background:var(--ground)}
.crx .thumb .big{position:relative; font:800 clamp(30px,3.6vw,52px)/.85 var(--disp); font-stretch:75%; text-transform:uppercase; color:var(--ink); text-align:center; padding:0 12px}
.crx .thumb .play{position:absolute; right:12px; bottom:12px; width:40px; height:40px; border-radius:50%; background:var(--pink); color:var(--white); border:2px solid var(--ink); display:grid; place-items:center; font-size:12px; transition:transform .15s}
.crx .vid:hover .play{transform:scale(1.15)}
.crx .vid .t{font-weight:700; font-size:17px; line-height:1.25}

@media (max-width:960px){
  .crx .letter,.crx .pod{grid-column:1 / -1}
  .crx .academy{flex-direction:column}
  .crx .vids{grid-template-columns:1fr 1fr}
  .crx .vids .vid:nth-child(3){display:none}
}
@media (max-width:540px){ .crx .vids{grid-template-columns:1fr} .crx .vids .vid:nth-child(3){display:grid} .crx .courses a{font-size:15px} }

/* book */
.crx .book-sec{margin-top:clamp(96px,12vw,170px)}
.crx .book{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1fr); gap:clamp(32px,6vw,88px); align-items:center}
.crx .book-art{position:relative; display:block; width:100%; max-width:460px; aspect-ratio:4/5; justify-self:center}
.crx .book-art::before{content:""; position:absolute; left:4%; top:10%; width:92%; aspect-ratio:1; border-radius:50%; border:2px solid var(--ink); background:radial-gradient(circle at 38% 32%, #FFFFFF 0%, #EBECFF 30%, #BAA3E9 62%, #FD42D2 100%)}
.crx .book-art img{position:relative; width:100%; height:100%; object-fit:cover; object-position:47% 50%; filter:drop-shadow(0 26px 28px rgba(67,50,89,.35)); transition:transform .3s ease}
.crx .book-art:hover img{transform:rotate(-2deg) scale(1.03)}
.crx .book-art .sticker{width:100px; height:100px; background:var(--pink); color:var(--white); right:2%; top:4%; transform:rotate(12deg); z-index:3}
.crx .book h2{font-size:clamp(52px,7vw,100px); margin:14px 0 18px}
.crx .book h2 .sv{color:var(--pink)}
.crx .book p{font-size:18px; font-weight:500; max-width:44ch}
.crx .chips{display:flex; flex-wrap:wrap; gap:8px; margin:22px 0 30px}
.crx .chips li{border:2px solid var(--ink); border-radius:999px; padding:7px 14px; font-weight:700; font-size:14px; background:var(--white)}
.crx .chips li:nth-child(3n+1){background:var(--orchid)} .crx .chips li:nth-child(3n+2){background:var(--pink); color:var(--white)}
@media (max-width:860px){ .crx .book{grid-template-columns:1fr} }

/* journal */
.crx .posts{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.crx .post{background:var(--white); border:2px solid var(--ink); border-radius:28px; padding:24px; display:flex; flex-direction:column; gap:14px; transition:transform .15s, box-shadow .15s}
.crx .post:hover{transform:translate(-3px,-3px); box-shadow:6px 6px 0 var(--ink)}
.crx .post .t{font:800 clamp(28px,2.8vw,36px)/.92 var(--disp); font-stretch:75%; text-transform:uppercase; overflow-wrap:break-word}
.crx .post p{font-weight:500}
.crx .post .pill{align-self:flex-start; background:var(--orchid); border:2px solid var(--ink)}
.crx .cats{display:flex; flex-wrap:wrap; gap:10px 24px; margin-top:24px}
.crx .cats a{font:400 26px/1 var(--serif); font-style:italic; border-bottom:2px solid var(--ink); padding-bottom:2px}
.crx .cats a:hover{color:var(--pink); border-color:var(--pink)}
@media (max-width:900px){ .crx .posts{grid-template-columns:1fr} }

/* paid substack band */
.crx .premium{margin-top:clamp(88px,11vw,150px); background:var(--pink); color:var(--white); border-block:2px solid var(--ink); padding-block:clamp(56px,8vw,110px); position:relative; overflow:hidden}
.crx .premium h2{font-size:clamp(76px,16vw,240px); line-height:.8}
.crx .premium h2 .sv{color:var(--ink); display:block; font-size:.62em}
.crx .premium .row{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:24px; margin-top:32px}
.crx .premium p{max-width:40ch; font-size:19px; font-weight:600}
.crx .premium .btn{background:var(--ink); color:var(--white)}
.crx .premium .btn:hover{box-shadow:4px 4px 0 var(--white)}
.crx .premium .sticker{width:130px; height:130px; background:var(--orchid); right:var(--gutter); top:36px; transform:rotate(10deg); font-size:15px}
@media (max-width:600px){ .crx .premium .sticker{width:96px; height:96px; top:16px; font-size:12px} }

/* footer */
.crx .foot-wrap{background:var(--ink); color:var(--white); padding-block:56px 32px}
.crx .foot{display:grid; grid-template-columns:1.6fr repeat(3,1fr); gap:32px}
.crx .foot .logo-text{display:block; font:400 clamp(56px,8vw,104px)/1 var(--brand); letter-spacing:-.01em; color:var(--white)}
.crx .foot h4{font:500 11.5px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--orchid); margin:0 0 14px; font-stretch:100%}
.crx .foot ul{display:grid; gap:8px; font-weight:600}
.crx .foot ul a:hover{color:var(--orchid)}
.crx .fine{display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; margin-top:48px; padding-top:18px; border-top:1px solid rgba(255,255,255,.2); font:500 12px/1.4 var(--mono); opacity:.85}
@media (max-width:760px){ .crx .foot{grid-template-columns:1fr 1fr} .crx .foot > div:first-child{grid-column:1 / -1} }

/* ---------- Blog listing ---------- */
.crx .bhead{padding-block:clamp(36px,5vw,64px) 0}
.crx .bhead .tag{margin-bottom:14px}
.crx .bhead h1{font-size:clamp(56px,9vw,132px); overflow-wrap:anywhere}
.crx .bhead h1 .sv{color:var(--pink); font-size:.86em; line-height:.9}
.crx .bhead .lede{max-width:52ch; margin:22px 0 0}
.crx .bbar{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px 24px; margin-block:clamp(28px,4vw,44px)}
.crx .bchips{display:flex; flex-wrap:wrap; gap:8px}
.crx .bchips a{border:2px solid var(--ink); border-radius:999px; padding:9px 16px; font-weight:700; font-size:14px; background:var(--white); transition:transform .15s}
.crx .bchips a:hover{transform:translateY(-2px)}
.crx .bchips a.on{background:var(--ink); color:var(--white)}
.crx .bsearch{display:flex; align-items:center; gap:6px; background:var(--white); border:2px solid var(--ink); border-radius:999px; padding:5px; flex:0 1 380px; min-width:0}
.crx .bsearch input{flex:1 1 auto; min-width:0; border:0; background:transparent; font:500 15px var(--disp); color:var(--ink); padding:10px 8px 10px 14px; outline:none}
.crx .bsearch input::placeholder{color:#8A82A6}
.crx .bsearch:focus-within{box-shadow:0 0 0 3px var(--orchid)}
.crx .bsearch .btn{padding:12px 18px; font-size:14px}
.crx .bsearch .btn:hover{box-shadow:none; transform:none; background:var(--violet)}
@media (max-width:700px){ .crx .bsearch{flex-basis:100%} }

.crx .bpost{display:flex; flex-direction:column; background:var(--white); border:2px solid var(--ink); border-radius:26px; padding:10px; transition:transform .15s, box-shadow .15s; min-width:0}
.crx .bpost:hover{transform:translate(-3px,-3px); box-shadow:6px 6px 0 var(--ink)}
.crx .bthumb{position:relative; display:block; aspect-ratio:16/10; border-radius:18px; overflow:hidden; background:var(--ground)}
.crx .bthumb img{width:100%; height:100%; object-fit:cover}
.crx .bthumb .pill{position:absolute; left:10px; top:10px; border:2px solid var(--ink); background:var(--orchid)}
.crx .bfallback{position:absolute; inset:0; display:grid; place-items:center; padding:16px; background:radial-gradient(120% 90% at 85% 0%, #BAA3E9 0%, #8B78C2 30%, #61538A 60%, #433259 100%)}
.crx .bfallback span{font:400 clamp(28px,3vw,44px)/1 var(--serif); font-style:italic; color:var(--white); text-align:center}
.crx .bbody{display:flex; flex-direction:column; gap:10px; padding:16px 8px 8px; flex:1}
.crx .bpost .t{font:800 clamp(24px,2.2vw,30px)/.95 var(--disp); font-stretch:75%; text-transform:uppercase; overflow-wrap:break-word}
.crx .bpost .ex{font-size:15px; font-weight:500}
.crx .bpost .meta{margin-top:auto; padding-top:4px; display:flex; justify-content:space-between; gap:12px; font:500 11.5px/1.4 var(--mono); letter-spacing:.06em; text-transform:uppercase; opacity:.75}
.crx .bpost .meta b{font:700 15px/1 var(--disp); letter-spacing:0; text-transform:none; opacity:1}

.crx .bfeat{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:clamp(16px,3vw,36px); padding:12px; border-radius:32px; box-shadow:10px 10px 0 var(--ink); margin-bottom:28px}
.crx .bfeat:hover{box-shadow:12px 12px 0 var(--ink)}
.crx .bfeat .bthumb{aspect-ratio:auto; min-height:320px; border-radius:22px}
.crx .bfeat .bbody{padding:clamp(12px,2.4vw,28px) clamp(8px,2vw,20px); justify-content:center; gap:14px}
.crx .bfeat .t{font-size:clamp(34px,4.2vw,62px); line-height:.9}
.crx .bfeat .ex{font-size:17px}
.crx .bfeat .meta{margin-top:10px; align-items:center; opacity:1}
.crx .bfeat .meta b{background:var(--ink); color:var(--white); border-radius:999px; padding:12px 18px}
@media (max-width:860px){ .crx .bfeat{grid-template-columns:1fr} .crx .bfeat .bthumb{min-height:0; aspect-ratio:16/10} }

.crx .bgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
@media (max-width:980px){ .crx .bgrid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:600px){ .crx .bgrid{grid-template-columns:1fr} }

.crx .bpager{display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:40px}
.crx .bpager .page-numbers{min-width:46px; text-align:center; border:2px solid var(--ink); border-radius:999px; padding:11px 16px; font-weight:700; font-size:15px; background:var(--white)}
.crx .bpager a.page-numbers:hover{background:var(--ground)}
.crx .bpager .current{background:var(--ink); color:var(--white)}
.crx .bpager .dots{border-color:transparent; background:transparent}

.crx .bempty{text-align:center; padding:48px 16px; display:grid; justify-items:center; gap:16px}
.crx .bempty h2{font-size:clamp(40px,6vw,72px)}
.crx .bempty h2 .sv{color:var(--pink)}

.crx .bletter{margin-top:clamp(72px,9vw,120px); display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:24px 48px; align-items:center; color:var(--white); border:2px solid var(--ink); border-radius:36px; padding:clamp(24px,4vw,48px); background:radial-gradient(120% 85% at 88% 0%, #BAA3E9 0%, #8B78C2 26%, #61538A 56%, #433259 100%)}
.crx .bletter h2{font-size:clamp(40px,5.4vw,76px); margin:12px 0 14px}
.crx .bletter h2 .sv{color:#BAA3E9}
.crx .bletter p{font-weight:600; max-width:44ch}
.crx .bletter-cta{display:grid; gap:14px}
.crx .bletter .sub-form .btn{background:var(--ink); color:var(--white); border-color:var(--ink); padding:14px 22px; flex:none}
.crx .bletter .sub-form .btn:hover{box-shadow:none; transform:none; background:var(--violet)}
.crx .bletter .golink{font-weight:700; text-decoration:underline; text-underline-offset:3px}
@media (max-width:860px){ .crx .bletter{grid-template-columns:1fr} }

/* motion */
@media (prefers-reduced-motion:no-preference){
  .crx .pop{animation:crx-pop .7s cubic-bezier(.3,1.5,.5,1) both}
  .crx .d1{animation-delay:.1s} .crx .d2{animation-delay:.2s} .crx .d3{animation-delay:.3s}
  .crx .sticker.spin{animation:crx-wob 4s ease-in-out infinite}
}
@keyframes crx-pop{from{transform:translateY(18px) scale(.97)} to{transform:none}}
@keyframes crx-wob{50%{transform:rotate(-4deg) scale(1.04)}}