/* ===== p-resources.css — Resources list (magazine) + Article detail (long-form) ===== */

/* eyebrow w/ rule */
.rx-eb{font-family:var(--mono); font-size:.78rem; text-transform:uppercase; letter-spacing:.05em; color:var(--on-light-mute); display:flex; align-items:center; gap:.8em}
.rx-eb .ln{flex:1; max-width:130px; height:1px; background:var(--line-light)}
.rx-eb b{color:var(--brand); font-weight:500}

/* ---- LIST HERO ---- */
.rx-hero{padding:clamp(3rem,7vw,5.6rem) 0 clamp(1.6rem,3vw,2.4rem)}
.rx-hero h1{font-size:clamp(2.6rem,6.4vw,5.2rem); letter-spacing:-.035em; line-height:.98; color:var(--on-light); margin:1rem 0 0; max-width:16ch; font-weight:500}
.rx-hero .lead{max-width:60ch; margin-top:1.3rem; color:var(--on-light-dim); font-size:clamp(1.04rem,1.4vw,1.2rem); line-height:1.6}
.rx-hero .h-meta{display:flex; flex-wrap:wrap; gap:1.6rem 2.4rem; margin-top:2.2rem; padding-top:1.6rem; border-top:1px solid var(--line-light)}
.rx-hstat .n{font-size:clamp(1.4rem,2.4vw,1.9rem); letter-spacing:-.02em; font-weight:500; color:var(--on-light)}
.rx-hstat .l{font-family:var(--mono); font-size:.68rem; text-transform:uppercase; letter-spacing:.04em; color:var(--on-light-mute); margin-top:.25rem}

/* ---- FILTER TABS ---- */
.rx-tabbar{position:sticky; top:64px; z-index:30; background:rgba(255,255,255,.86); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-top:1px solid var(--line-light); border-bottom:1px solid var(--line-light)}
.rx-tabbar .rx-tabs{display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; padding-top:.7rem; padding-bottom:.7rem}
.rx-tab{font-family:var(--mono); font-size:.74rem; text-transform:uppercase; letter-spacing:.03em; color:var(--on-light-mute); background:none; border:1px solid transparent; border-radius:var(--r-pill); padding:.5em 1em; cursor:pointer; transition:.15s var(--ease); white-space:nowrap}
.rx-tab:hover{color:var(--on-light)}
.rx-tab[aria-selected="true"]{color:var(--on-light); border-color:var(--on-light)}
.rx-tab .c{color:var(--on-light-mute); margin-left:.45em; font-size:.92em}
.rx-tab[aria-selected="true"] .c{color:var(--brand)}
.rx-tabbar .spacer{flex:1}
.rx-tab-note{font-family:var(--mono); font-size:.68rem; text-transform:uppercase; letter-spacing:.04em; color:var(--on-light-mute)}
@media(max-width:680px){.rx-tabbar .spacer,.rx-tab-note{display:none} .rx-tabbar .rx-tabs{overflow-x:auto; flex-wrap:nowrap}}

/* ---- FEATURED ---- */
.rx-feat-sec{padding:clamp(2.4rem,4.5vw,3.8rem) 0 0}
.rx-feat{display:grid; grid-template-columns:1.18fr .82fr; gap:clamp(1.8rem,4vw,3.6rem); align-items:center; color:inherit}
.rx-feat .vis{position:relative; aspect-ratio:16/10; border-radius:var(--r-marketing); overflow:hidden; background:var(--g900)}
.rx-feat .vis img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s var(--ease)}
.rx-feat:hover .vis img{transform:scale(1.03)}
.rx-ftag{position:absolute; top:1rem; left:1rem; font-family:var(--mono); font-size:.62rem; text-transform:uppercase; letter-spacing:.05em; color:#fff; background:rgba(11,11,11,.62); backdrop-filter:blur(6px); border-radius:var(--r-pill); padding:.42em .85em}
.rx-feat .kicker{font-family:var(--mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--brand); display:flex; align-items:center; gap:.7em}
.rx-feat .kicker .dt{color:var(--on-light-mute)}
.rx-feat h2{font-size:clamp(1.9rem,3.6vw,2.9rem); letter-spacing:-.03em; line-height:1.04; color:var(--on-light); margin:1rem 0 0; font-weight:500; transition:color .15s}
.rx-feat:hover h2{color:var(--brand)}
.rx-feat p{color:var(--on-light-dim); line-height:1.65; margin-top:1rem; max-width:52ch}
.rx-by{display:flex; align-items:center; gap:.8em; margin-top:1.5rem; font-family:var(--mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.03em; color:var(--on-light-mute)}
.rx-by .av{width:34px; height:34px; border-radius:50%; background:var(--brand-soft); color:var(--brand); display:grid; place-items:center; font-weight:600; font-size:.8rem; flex-shrink:0}
.rx-by .sep{width:4px; height:4px; border-radius:50%; background:var(--line-light)}
.rx-feat .more{margin-top:1.7rem; font-family:var(--mono); font-size:.74rem; text-transform:uppercase; letter-spacing:.04em; color:var(--brand); display:inline-flex; align-items:center; gap:.5em}
@media(max-width:820px){.rx-feat{grid-template-columns:1fr} .rx-feat .vis{order:-1}}

/* ---- GRID ---- */
.rx-grid-sec{padding:clamp(2.6rem,5vw,4.4rem) 0}
.rx-grid-head{display:flex; align-items:flex-end; justify-content:space-between; gap:1.4rem; flex-wrap:wrap; margin-bottom:1.8rem}
.rx-grid-head h2{font-size:clamp(1.5rem,2.8vw,2.1rem); letter-spacing:-.025em; color:var(--on-light); font-weight:500}
.rx-grid-head .cnt{font-family:var(--mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; color:var(--on-light-mute)}
.rx-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.4rem,2.6vw,2.4rem) clamp(1.4rem,2.6vw,2.2rem)}
@media(max-width:880px){.rx-cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.rx-cards{grid-template-columns:1fr}}
.rx-card{display:flex; flex-direction:column; color:inherit; text-decoration:none}
.rx-card .cvis{aspect-ratio:16/10; border-radius:var(--r-md); overflow:hidden; background:var(--g900); position:relative}
.rx-card .cvis img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s var(--ease)}
.rx-card:hover .cvis img{transform:scale(1.04)}
.rx-ccat{position:absolute; top:.7rem; left:.7rem; font-family:var(--mono); font-size:.58rem; text-transform:uppercase; letter-spacing:.05em; color:#fff; background:rgba(11,11,11,.6); backdrop-filter:blur(6px); border-radius:var(--r-pill); padding:.4em .75em}
.rx-card h3{font-size:1.12rem; letter-spacing:-.015em; line-height:1.28; color:var(--on-light); margin:1rem 0 0; font-weight:500; transition:color .15s}
.rx-card:hover h3{color:var(--brand)}
.rx-cmeta{font-family:var(--mono); font-size:.68rem; text-transform:uppercase; letter-spacing:.03em; color:var(--on-light-mute); margin-top:.7rem; display:flex; align-items:center; gap:.6em}
.rx-cmeta .sep{width:3px; height:3px; border-radius:50%; background:var(--line-light)}
.rx-empty{padding:2.6rem 0; font-family:var(--mono); font-size:.8rem; text-transform:uppercase; letter-spacing:.03em; color:var(--on-light-mute)}

/* ---- NEWSLETTER BAND ---- */
.rx-news-sec{padding:0 0 clamp(2.6rem,5vw,4.4rem)}
.rx-news{background:var(--black); color:var(--fg); border-radius:var(--r-marketing); padding:clamp(2rem,4.5vw,3.6rem); display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(1.6rem,3vw,3rem); align-items:center; position:relative; overflow:hidden}
.rx-news::after{content:""; position:absolute; right:-12%; top:-40%; width:46%; height:180%; background:radial-gradient(closest-side, rgba(255,86,10,.22), transparent 70%); pointer-events:none}
.rx-news .ntag{font-family:var(--mono); font-size:.7rem; text-transform:uppercase; letter-spacing:.05em; color:var(--brand)}
.rx-news h2{font-size:clamp(1.6rem,3vw,2.3rem); letter-spacing:-.025em; line-height:1.06; color:var(--fg); margin:.8rem 0 0; font-weight:500; max-width:18ch}
.rx-news p{color:var(--fg-dim); line-height:1.6; margin-top:.8rem; max-width:42ch; font-size:.95rem}
.rx-nform{display:flex; flex-direction:column; gap:.7rem; position:relative; z-index:1}
.rx-nform label{font-family:var(--mono); font-size:.68rem; text-transform:uppercase; letter-spacing:.04em; color:var(--fg-mute)}
.rx-nrow{display:flex; gap:.6rem; flex-wrap:wrap}
.rx-nform input{flex:1; min-width:0; background:var(--g950); border:1px solid var(--line); border-radius:var(--r-sm); color:var(--fg); font-family:inherit; font-size:.95rem; padding:.85em 1em; transition:border-color .15s}
.rx-nform input::placeholder{color:var(--fg-faint)}
.rx-nform input:focus{outline:none; border-color:var(--brand)}
.rx-nform .fine{font-family:var(--mono); font-size:.64rem; text-transform:uppercase; letter-spacing:.03em; color:var(--fg-mute); margin-top:.2rem}
@media(max-width:760px){.rx-news{grid-template-columns:1fr}}

/* ===================== ARTICLE DETAIL ===================== */

/* breadcrumb */
.rx-crumb{border-bottom:1px solid var(--line-light)}
.rx-crumb .row{display:flex; align-items:center; gap:.6em; height:46px; font-family:var(--mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.03em; color:var(--on-light-mute); overflow:hidden; white-space:nowrap}
.rx-crumb a{color:var(--on-light-mute)} .rx-crumb a:hover{color:var(--on-light)}
.rx-crumb .sep{opacity:.5}
.rx-crumb .cur{color:var(--on-light); text-overflow:ellipsis; overflow:hidden}

/* article header */
.rx-ah{padding:clamp(2.6rem,6vw,5rem) 0 clamp(1.6rem,3vw,2.4rem)}
.rx-ah-eyebrow{font-family:var(--mono); font-size:.74rem; text-transform:uppercase; letter-spacing:.05em; color:var(--brand); display:inline-flex; align-items:center; gap:.6em}
.rx-ah-eyebrow .dot{width:6px; height:6px; border-radius:50%; background:var(--brand)}
.rx-ah h1{font-size:clamp(2.2rem,5vw,4.05rem); letter-spacing:-.03em; line-height:1.02; font-weight:500; color:var(--on-light); margin:1rem 0 0; max-width:20ch}
.rx-standfirst{max-width:60ch; margin-top:1.3rem; color:var(--on-light-dim); font-size:clamp(1.06rem,1.5vw,1.26rem); line-height:1.6}
.rx-byline{display:flex; align-items:center; gap:1rem; flex-wrap:wrap; margin-top:1.9rem; padding-top:1.4rem; border-top:1px solid var(--line-light)}
.rx-byline .av{width:42px; height:42px; border-radius:50%; background:var(--on-light); color:#fff; display:grid; place-items:center; font-family:var(--mono); font-size:.82rem; letter-spacing:.02em; flex-shrink:0}
.rx-byline .who b{font-weight:500; color:var(--on-light); font-size:.95rem}
.rx-byline .who .meta{font-family:var(--mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.03em; color:var(--on-light-mute); margin-top:.2rem}
.rx-byline .who .meta .sep{opacity:.5; margin:0 .5em}

/* hero image */
.rx-ah-figure{margin-top:clamp(1.8rem,3.5vw,2.8rem)}
.rx-ah-figure img{width:100%; height:auto; aspect-ratio:21/9; object-fit:cover; border-radius:var(--r-marketing); display:block}
.rx-ah-figure figcaption{font-family:var(--mono); font-size:.72rem; letter-spacing:.02em; color:var(--on-light-mute); margin-top:.8rem; padding-left:.1rem}

/* body grid: sticky TOC + reading column */
.rx-abody{padding:clamp(2.4rem,5vw,4rem) 0 clamp(2.6rem,5vw,4.4rem)}
.rx-abody .grid{display:grid; grid-template-columns:230px minmax(0,1fr); gap:clamp(2rem,5vw,5rem); align-items:start}
@media(max-width:900px){.rx-abody .grid{grid-template-columns:1fr}}

/* TOC */
.rx-toc{position:sticky; top:88px}
.rx-toc .toc-h{font-family:var(--mono); font-size:.66rem; text-transform:uppercase; letter-spacing:.06em; color:var(--on-light-mute); padding-bottom:.9rem; border-bottom:1px solid var(--line-light); margin-bottom:.4rem}
.rx-toc ol{list-style:none; counter-reset:toc; margin:0; padding:0}
.rx-toc li{counter-increment:toc}
.rx-toc a{display:flex; gap:.7em; align-items:baseline; padding:.5rem 0; font-size:.86rem; line-height:1.35; color:var(--on-light-dim); border-left:2px solid transparent; padding-left:.9rem; margin-left:-.9rem; transition:.16s var(--ease)}
.rx-toc a::before{content:counter(toc,decimal-leading-zero); font-family:var(--mono); font-size:.66rem; color:var(--on-light-mute); flex-shrink:0}
.rx-toc a:hover{color:var(--on-light)}
.rx-toc a.active{color:var(--on-light); border-left-color:var(--brand)}
.rx-toc a.active::before{color:var(--brand)}
.rx-toc .reading-time{margin-top:1.4rem; padding-top:1.2rem; border-top:1px solid var(--line-light); font-family:var(--mono); font-size:.7rem; text-transform:uppercase; letter-spacing:.03em; color:var(--on-light-mute); line-height:1.7}
@media(max-width:900px){.rx-toc{position:static; margin-bottom:2rem} .rx-toc ol{columns:2; column-gap:1.4rem} .rx-toc .reading-time{display:none}}
@media(max-width:520px){.rx-toc ol{columns:1}}

/* reading column */
.rx-prose{max-width:68ch}
.rx-prose h2{font-size:clamp(1.55rem,3vw,2.1rem); letter-spacing:-.02em; font-weight:500; line-height:1.12; color:var(--on-light); margin:2.6rem 0 0; scroll-margin-top:90px}
.rx-prose h2:first-child{margin-top:0}
.rx-prose p{font-size:1.075rem; line-height:1.72; color:var(--on-light-dim); margin-top:1.05rem}
.rx-prose h2 + p{margin-top:.7rem}

/* pull-quote */
.rx-pullquote{margin:2.4rem 0; padding:0 0 0 1.6rem; border-left:3px solid var(--brand); max-width:64ch; scroll-margin-top:90px}
.rx-pullquote p{font-size:clamp(1.35rem,2.6vw,1.7rem); line-height:1.3; letter-spacing:-.02em; font-weight:500; color:var(--on-light); margin:0}
.rx-pullquote cite{display:block; margin-top:1rem; font-family:var(--mono); font-size:.74rem; text-transform:uppercase; letter-spacing:.03em; color:var(--on-light-mute); font-style:normal}

/* related */
.rx-related{border-top:1px solid var(--line-light); padding:clamp(2.6rem,5vw,4.2rem) 0; scroll-margin-top:80px}
.rx-rel-head{display:flex; align-items:flex-end; justify-content:space-between; gap:1.2rem; flex-wrap:wrap}
.rx-rel-head h2{font-size:clamp(1.5rem,3vw,2.1rem); letter-spacing:-.02em; font-weight:500; color:var(--on-light)}
.rx-rel-head .arrow-link{color:var(--on-light); font-family:var(--mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.04em}
.rx-rel-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.2rem,2.5vw,1.8rem); margin-top:2rem}
@media(max-width:820px){.rx-rel-grid{grid-template-columns:1fr}}
.rx-rcard{display:block; color:inherit; border:1px solid var(--line-light); border-radius:var(--r-marketing); overflow:hidden; transition:.2s var(--ease)}
.rx-rcard:hover{border-color:var(--on-light); transform:translateY(-3px)}
.rx-rcard .rc-img{aspect-ratio:16/10; overflow:hidden; background:var(--canvas-paper)}
.rx-rcard .rc-img img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s var(--ease)}
.rx-rcard:hover .rc-img img{transform:scale(1.04)}
.rx-rcard .rc-body{padding:1.2rem 1.3rem 1.4rem}
.rx-rcard .rc-cat{font-family:var(--mono); font-size:.66rem; text-transform:uppercase; letter-spacing:.04em; color:var(--brand)}
.rx-rcard h3{font-size:1.12rem; letter-spacing:-.01em; font-weight:500; line-height:1.25; color:var(--on-light); margin:.6rem 0 0}
.rx-rcard .rc-meta{font-family:var(--mono); font-size:.7rem; text-transform:uppercase; letter-spacing:.03em; color:var(--on-light-mute); margin-top:.9rem}

/* CTA (dark) */
.rx-ctaband{padding:0 0 clamp(3rem,6vw,5rem); scroll-margin-top:80px}
.rx-cta{background:var(--black); color:#fff; border-radius:var(--r-marketing); padding:clamp(2rem,4.5vw,3.6rem); display:flex; align-items:center; justify-content:space-between; gap:1.6rem; flex-wrap:wrap}
.rx-cta h2{font-size:clamp(1.5rem,3vw,2.2rem); letter-spacing:-.02em; max-width:22ch; color:#fff; font-weight:500}
.rx-cta p{color:var(--fg-dim); max-width:46ch; margin-top:.6rem; line-height:1.55}
.rx-cta-actions{display:flex; gap:.8rem; flex-wrap:wrap}