/* NEWSLETTER_CARD_TREATMENT_v1 — "quiet luxury" layer for Newsletter cards + backgrounds.
   Load AFTER nrai-article-card.css, upstory.css, nrai-motion.css, nrai-goodreads.css.
   Scoped to .nac / .up-lib / .up-ins / .nrai-gl / .ngr / .up-strip. Does NOT touch .up-hero, .up-box, .up-search
   (search bar approved as is), marquee, header, footer or .btn-primary. Palette: NRAI navy, cream, orange only. */
:root{
 --nt-navy:#14204A; --nt-navy-2:#253679; --nt-navy-deep:#0F1838;
 --nt-cream:#FBF8F2; --nt-cream-2:#F5EFE4; --nt-mist:#F7F9FC; --nt-orange:#BF5508;
 --nt-ease:cubic-bezier(.22,.61,.36,1);
 --nt-r-card:22px; --nt-r-media:16px; --nt-inset:8px;
 --nt-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.08 0 0 0 0 0.13 0 0 0 0 0.29 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* ---------- 1. Card frame ---------- */
.nac{border-radius:var(--nt-r-card);border:1px solid rgba(20,32,74,.08);background:#fff;
 box-shadow:0 1px 2px rgba(20,32,74,.04),0 10px 28px -16px rgba(20,32,74,.18);
 transition:transform .55s var(--nt-ease),box-shadow .55s var(--nt-ease),border-color .55s var(--nt-ease)}
.nac-media{aspect-ratio:16/10;margin:var(--nt-inset) var(--nt-inset) 0;border-radius:var(--nt-r-media);isolation:isolate;background:#E9ECF3}
.nac-media img{object-fit:cover;object-position:var(--nac-fp,50% 38%);
 filter:saturate(.88) contrast(.97);transform:scale(1.001);
 transition:transform .9s var(--nt-ease),filter .55s var(--nt-ease)}
/* unifying tone (lifts) + inner hairline (stays) */
.nac-media::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1;
 background:linear-gradient(180deg,rgba(20,32,74,0) 45%,rgba(20,32,74,.16) 100%),rgba(37,54,121,.10);
 mix-blend-mode:multiply;opacity:1;transition:opacity .55s var(--nt-ease)}
.nac-media::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;
 box-shadow:inset 0 0 0 1px rgba(20,32,74,.12),inset 0 1px 0 rgba(255,255,255,.28)}
/* lifted state: hover (mouse), keyboard focus inside, tap (.is-open set by nrai-article-card.js) */
.nac:hover,.nac:focus-within,.nac.is-open{transform:translateY(-4px);border-color:rgba(20,32,74,.14);
 box-shadow:0 2px 4px rgba(20,32,74,.05),0 24px 48px -20px rgba(20,32,74,.30)}
.nac:hover .nac-media::after,.nac:focus-within .nac-media::after,.nac.is-open .nac-media::after{opacity:0}
.nac:hover .nac-media img,.nac:focus-within .nac-media img,.nac.is-open .nac-media img{filter:none;transform:scale(1.035)}
/* optional credit (PENDING Rowan's ruling on publisher rights; JS renders it only when x.credit exists and img_type!=='slot') */
.nac-credit{margin:8px calc(var(--nt-inset) + 12px) 0;font-size:12px;line-height:16px;letter-spacing:.01em;color:#5B6478;
 white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nac-credit:empty{display:none}
/* ---------- 2. Backgrounds ---------- */
.up-lib{position:relative;isolation:isolate;
 background:linear-gradient(180deg,var(--nt-mist) 0,var(--nt-cream) 220px,var(--nt-cream) calc(100% - 220px),var(--nt-mist) 100%)}
.up-lib::before,.up-ins::before,.up-strip::before,.ngr::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;
 background-image:var(--nt-grain);background-size:160px 160px;opacity:.05;border-radius:inherit}
/* Featured tab: warm tinted panel around the grid */
.up-lib:has(.up-tab[data-tab="featured"][aria-selected="true"]) #up-grid{
 padding:28px;border-radius:32px;border:1px solid rgba(191,85,8,.16);
 background:linear-gradient(160deg,#FFFFFF 0%,#FBF3E9 100%);
 box-shadow:inset 0 3px 0 rgba(191,85,8,.55),0 20px 50px -30px rgba(20,32,74,.25)}
/* Insights band: deep navy with a soft orange glow + grain */
.up-ins{position:relative;isolation:isolate;
 background:radial-gradient(900px 480px at 88% 0%,rgba(191,85,8,.22),transparent 62%),
  radial-gradient(900px 640px at 0% 100%,rgba(37,54,121,.65),transparent 60%),var(--nt-navy-deep)}
.up-ins::before{opacity:.09;mix-blend-mode:screen}
/* band + strip tiles: navy/orange family only, duotone image, bottom scrim, hairline */
.nrai-gl__it{box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.nrai-gl--float .nrai-gl__it:nth-child(4n+1){background:#253679}
.nrai-gl--float .nrai-gl__it:nth-child(4n+2){background:#14204A}
.nrai-gl--float .nrai-gl__it:nth-child(4n+3){background:#1D2B63}
.nrai-gl--float .nrai-gl__it:nth-child(4n){background:#8A3A06}
.nrai-gl--float .nrai-gl__it{box-shadow:0 18px 40px rgba(0,0,0,.35),inset 0 0 0 1px rgba(255,255,255,.12)}
.nrai-gl__it img{filter:grayscale(1) contrast(1.05);mix-blend-mode:luminosity;opacity:.36;object-position:var(--nac-fp,50% 38%);
 transition:transform .9s var(--nt-ease),opacity .55s var(--nt-ease),filter .55s var(--nt-ease)}
.nrai-gl__it::after{content:"";position:absolute;inset:0;pointer-events:none;
 background:linear-gradient(180deg,rgba(15,24,56,0) 30%,rgba(15,24,56,.55) 100%)}
.nrai-gl__it>span,.nrai-gl__it>strong{z-index:1}
.nrai-gl__it .nrai-gl__ar{z-index:2}
.nrai-gl__it:hover img,.nrai-gl__it:focus-visible img{opacity:.5;filter:grayscale(.35);transform:scale(1.04)}
/* Bottom strip */
.up-strip{position:relative;isolation:isolate;background:linear-gradient(180deg,#EEF1F7 0%,var(--nt-mist) 100%)}
/* Good reads slider: cream tinted panel */
.ngr{isolation:isolate;padding:32px 32px 24px;border-radius:32px;border:1px solid rgba(20,32,74,.06);
 background:linear-gradient(180deg,var(--nt-cream) 0%,var(--nt-cream-2) 100%)}
@media (max-width:639px){
 .ngr{padding:20px 16px 16px;border-radius:24px}
 .up-lib:has(.up-tab[data-tab="featured"][aria-selected="true"]) #up-grid{padding:14px;border-radius:24px}
}
/* ---------- 3. Reduced motion: nothing moves (tone may still change instantly) ---------- */
@media (prefers-reduced-motion:reduce){
 .nac,.nac-media img,.nac-media::after,.nrai-gl__it img{transition:none}
 .nac:hover,.nac:focus-within,.nac.is-open{transform:none}
 .nac:hover .nac-media img,.nac:focus-within .nac-media img,.nac.is-open .nac-media img{transform:none}
 .nrai-gl__it:hover img,.nrai-gl__it:focus-visible img{transform:none}
}