/* Extracted from article-v2.blade.php, 2026-08-15. Every article page carried this
   inside its HTML, where a browser cannot cache it: a reader opening three guides
   downloaded the same 23KB three times. Only rules needing no per-request value are
   here. The :root variables stay inline (one is built per request) and the expert
   rules stay inline (conditional). Order preserved: inline :root, this file, then the
   conditional block. */
*{margin:0;padding:0;box-sizing:border-box;min-width:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--pn-bg);color:var(--pn-ink);line-height:1.5;overflow-x:hidden}
h1,h2,h3,h4,.t,.deck,p,li,td,th,a,.article-body{overflow-wrap:anywhere;word-break:break-word}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
.wrap{padding:0 18px;max-width:760px;margin:0 auto}

/* masthead (compact) */

/* header */
.kick{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:linear-gradient(90deg,var(--pn-electric),var(--pn-magenta));padding:4px 10px;border-radius:4px}
.kick .rec{width:7px;height:7px;border-radius:50%;background:var(--rec);animation:blink 1.6s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.headwrap{background:var(--pn-bg)}
.head{padding-top:22px}
.head h1{font-family:var(--display);font-size:clamp(27px,7.6vw,44px);line-height:1.05;font-weight:900;letter-spacing:-.025em;margin:12px 0;color:var(--pn-ink);animation:rise .5s ease both}
.head .deck{font-family:var(--serif);font-size:18px;line-height:1.45;color:var(--pn-ink-2);margin-bottom:16px}
.who{display:flex;align-items:center;gap:10px;padding:14px 0;border-top:1px solid var(--pn-line);border-bottom:1px solid var(--pn-line);margin-bottom:4px}
/* Monogram avatar: flat duotone split + heavy letterform (matches home + archive) */
.ava{width:38px;height:38px;border-radius:30%;overflow:hidden;position:relative;flex:0 0 38px;
  display:grid;place-items:center;color:#fff;font-family:var(--display);font-size:14px;font-weight:900;
  letter-spacing:-.03em;line-height:1;
  background:linear-gradient(135deg,var(--a1) 0 50%,var(--a2) 50% 100%);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.22)}
.ava.a0{--a1:#5B2EFF;--a2:#C43BFF}
.ava.a1{--a1:#2E1BA6;--a2:#6A4BFF}
.ava.a2{--a1:#A62BFF;--a2:#FF5AD8}
.ava.a3{--a1:#4B3BD6;--a2:#9B7BFF}
.ava img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05)}
.ava:has(img)::after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(91,46,255,.55),rgba(196,59,255,.35));mix-blend-mode:multiply}
.byline{font-size:13.5px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:var(--pn-electric)}
.dt{font-family:var(--mono);font-size:12px;color:var(--pn-ink-3)}
.share{margin-left:auto;display:flex;gap:8px}
.share a,.share button{width:44px;height:44px;border:1px solid var(--pn-line);border-radius:50%;display:grid;place-items:center;font-size:15px;color:var(--pn-ink-2);background:none;cursor:pointer;font-family:inherit;padding:0}
.share button:active{background:var(--pn-surface)}
.share .shared{position:absolute;transform:translateY(-38px);background:var(--pn-ink);color:#fff;font-size:12px;font-weight:700;padding:6px 10px;border-radius:6px;white-space:nowrap}
figure.heroim{margin:18px -18px 0;position:relative}
figure.heroim img{width:100%;aspect-ratio:16/9;object-fit:cover;filter:saturate(1.06) contrast(1.04)}/* reserve space = no layout shift (CLS) as the hero loads */
figure.heroim::before,figure.heroim::after{content:"";position:absolute;width:24px;height:24px;border:2.5px solid rgba(255,255,255,.85);z-index:2}
figure.heroim::before{top:12px;left:12px;border-right:0;border-bottom:0}
figure.heroim::after{bottom:12px;right:12px;border-left:0;border-top:0}
figure.heroim figcaption{font-family:var(--mono);font-size:11px;color:var(--pn-ink-3);padding:8px 18px 0}
@media(min-width:800px){figure.heroim{margin:22px 0 8px}figure.heroim img{border-radius:var(--pn-radius)}}

/* ============ ARTICLE BODY: themes the LEGACY pipeline output ============ */
.article-body{font-family:var(--serif);font-size:17.5px;line-height:1.7;color:#1C1D26;padding:10px 0 8px}
.article-body p{margin:0 0 1.15em}
.article-body h2{font-family:var(--sans);font-size:25px;font-weight:900;letter-spacing:-.02em;line-height:1.2;margin:1.5em 0 .6em}
.article-body h3{font-family:var(--sans);font-size:20px;font-weight:800;letter-spacing:-.015em;margin:1.3em 0 .5em}
.article-body a{color:var(--pn-electric);font-weight:600;text-decoration:underline;text-decoration-color:rgba(91,46,255,.35);text-underline-offset:2px}
.article-body img{border-radius:var(--pn-radius-sm);margin:14px auto;height:auto}
.article-body img:not([width]):not([height]){aspect-ratio:16/10;object-fit:contain;background:var(--pn-surface)}/* hold space for pipeline images that ship no dimensions */
.article-body ul,.article-body ol{padding-left:1.3em;margin:0 0 1.15em}
.article-body li{margin-bottom:.4em}
/* pull-quote styling is for EDITORIAL quotes only - never the social embeds,
   which are blockquotes too until their script upgrades them (val, 2026-07-24) */
.article-body blockquote:not(.instagram-media):not(.tiktok-embed):not(.twitter-tweet){font-family:var(--sans);font-weight:700;font-size:19px;line-height:1.45;border-left:4px solid;border-image:linear-gradient(180deg,var(--pn-electric),var(--pn-magenta)) 1;padding:6px 0 6px 18px;margin:1.4em 0}
/* social embeds: center them at a sensible width so they don't span full desktop */
.article-body .instagram-media,.article-body .tiktok-embed,.article-body .twitter-tweet{margin:20px auto !important}
.article-body iframe{max-width:100%;border:0;border-radius:var(--pn-radius-sm)}
/* video iframes (YouTube fallback, Vimeo, etc.) must keep 16:9 on every width,
   not stay a fixed 560x315 box that letterboxes on mobile */
.article-body iframe[src*="youtube"],.article-body iframe[src*="youtu.be"],.article-body iframe[src*="vimeo"],.article-body iframe[src*="youtube-nocookie"]{width:100%;height:auto;aspect-ratio:16/9;display:block;margin:20px auto}
/* lite-youtube facade: fast click-to-play thumbnail (the JS below upgrades it).
   Without this the pipeline's <lite-youtube> element rendered 0x0 = invisible.
   Styled to feel premium + smooth on tap (val, 2026-07-24: "make it look cool
   and the transition smooth"). */
.article-body lite-youtube{display:block;position:relative;width:100%;max-width:820px;margin:22px auto;aspect-ratio:16/9;border-radius:var(--pn-radius-sm);overflow:hidden;background:#0b0b12 center/cover no-repeat;cursor:pointer;box-shadow:0 14px 40px -18px rgba(0,0,0,.7)}
/* scrim: darkens the thumb toward the centre so the button always pops, even
   on a bright frame; fades out as the real player comes in */
.article-body lite-youtube::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(0,0,0,.28),rgba(0,0,0,.05) 60%);transition:opacity .35s ease;pointer-events:none}
.article-body lite-youtube.lty-on::after{opacity:0}
/* the thumbnail lives on a child so we can zoom it under a fixed-size button */
.article-body lite-youtube .lty-thumb{position:absolute;inset:0;background:inherit;background-size:cover;background-position:center;transition:transform .5s ease,opacity .35s ease;transform:scale(1.001)}
@media (hover:hover){.article-body lite-youtube:hover .lty-thumb{transform:scale(1.05)}}
.article-body lite-youtube.lty-on .lty-thumb{opacity:0}
.article-body lite-youtube .lty-play{position:absolute;inset:0;margin:auto;width:72px;height:72px;border:0;border-radius:50%;background:linear-gradient(135deg,var(--pn-electric),var(--pn-magenta));box-shadow:0 8px 26px -6px rgba(196,59,255,.6);cursor:pointer;transition:transform .25s cubic-bezier(.34,1.56,.64,1),box-shadow .25s ease,opacity .3s ease;-webkit-tap-highlight-color:transparent}
@media (hover:hover){.article-body lite-youtube:hover .lty-play{transform:scale(1.12);box-shadow:0 12px 32px -6px rgba(196,59,255,.75)}}
.article-body lite-youtube .lty-play:active{transform:scale(.94)}
.article-body lite-youtube.lty-on .lty-play{opacity:0;transform:scale(.6);pointer-events:none}
.article-body lite-youtube .lty-play::before{content:"";position:absolute;inset:0;margin:auto;width:0;height:0;border-style:solid;border-width:12px 0 12px 20px;border-color:transparent transparent transparent #fff;transform:translateX(2px)}
/* the real player fades + scales in once the reader taps */
.article-body lite-youtube iframe{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;margin:0;border:0;opacity:0;transform:scale(1.02);transition:opacity .4s ease,transform .4s ease}
.article-body lite-youtube.lty-on iframe{opacity:1;transform:scale(1)}
@media (prefers-reduced-motion:reduce){.article-body lite-youtube *,.article-body lite-youtube::after{transition:none !important}}
/* Spec/price tables: card-like, branded, and resilient to pipeline markup.
   Many articles emit tables with NO <th> (the header is just the first row of
   <td>s), which is why they rendered bare - style both shapes (val: the
   Malaysia-price table "can feel cooler", 2026-07-23). */
.article-body table{width:100%;border-collapse:separate;border-spacing:0;font-family:var(--sans);font-size:14.5px;margin:1.4em 0;display:block;overflow-x:auto;
  border:1px solid var(--pn-line);border-radius:var(--pn-radius);
  box-shadow:0 1px 2px rgba(18,19,31,.05),0 10px 28px -20px rgba(18,19,31,.3)}
.article-body table th,
.article-body table:not(:has(th)) tr:first-child td{background:var(--pn-ink);color:#fff;text-align:left;padding:12px 14px;font-weight:800;white-space:nowrap;border-bottom:0;
  font-size:12.5px;letter-spacing:.06em;text-transform:uppercase}
.article-body table:not(:has(th)) tr:first-child td strong{color:#fff}
.article-body table thead tr th:first-child{border-top-left-radius:calc(var(--pn-radius) - 2px)}
.article-body table thead tr th:last-child{border-top-right-radius:calc(var(--pn-radius) - 2px)}
.article-body table td{padding:12px 14px;border-bottom:1px solid var(--pn-line);vertical-align:top}
.article-body table tr:last-child td{border-bottom:0}
.article-body table tbody tr:nth-child(even) td{background:var(--pn-surface)}
.article-body table tr:hover td{background:#F0EEFF}
/* prices and figures read as data, not prose */
.article-body table td:not(:first-child){font-variant-numeric:tabular-nums;font-weight:600}
/* the electric top rule that signs the rest of the design */
.article-body table thead th,
.article-body table:not(:has(th)) tr:first-child td{box-shadow:inset 0 3px 0 var(--pn-electric)}

/* legacy grid shims (product cards use Bootstrap-era classes) */
.article-body .row{display:flex;flex-wrap:wrap;margin:0 -8px}
.article-body .row>[class*="col-"]{padding:0 8px;flex:0 0 100%;max-width:100%}
@media(min-width:640px){
  .article-body .col-sm-4{flex-basis:33.333%;max-width:33.333%}
  .article-body .col-sm-6{flex-basis:50%;max-width:50%}
  .article-body .col-sm-8{flex-basis:66.667%;max-width:66.667%}
  .article-body .col-sm-12{flex-basis:100%;max-width:100%}
}
.article-body .d-flex{display:flex}.article-body .flex-row{flex-direction:row}
.article-body .d-block{display:block}.article-body .mr-3{margin-right:12px}
.article-body .mb-1{margin-bottom:4px}.article-body .mb-3{margin-bottom:14px}
.article-body .mt-3{margin-top:14px}.article-body .text-right{text-align:right}

/* PRODUCT CARDS (tpl-product-info + hydrated variants) */
.article-body .card{font-family:var(--sans);border:1px solid var(--pn-line);border-radius:var(--pn-radius);box-shadow:0 1px 2px rgba(18,19,31,.05),0 10px 28px -18px rgba(18,19,31,.25);margin:1.4em 0;overflow:hidden;background:#fff}
.article-body .card-body{padding:16px}
.article-body .h2_product_header{font-size:20px;font-weight:900;letter-spacing:-.02em;line-height:1.2;margin:0 0 2px}
.article-body .subtitle{font-size:13px;font-weight:700;color:var(--pn-magenta);text-transform:uppercase;letter-spacing:.05em}
.article-body .product-price{font-size:22px;font-weight:900;color:var(--pn-electric);font-family:var(--sans)}
.article-body .product-status{font-family:var(--mono);font-size:11.5px;color:var(--pn-ink-3)}
.article-body .product-desc{font-family:var(--serif);font-size:15.5px;line-height:1.6;color:#2A2B36;margin-top:8px}
.article-body .img-container img{border-radius:var(--pn-radius-sm);margin:0}
.article-body .product-pros,.article-body .product-cons{font-size:14.5px;line-height:1.55;margin-top:10px}
.article-body .product-pros ul,.article-body .product-cons ul{list-style:none;padding:0}
.article-body .product-pros li::before{content:"+";color:#0BA05F;font-weight:900;margin-right:8px}
.article-body .product-cons li::before{content:"–";color:#E5484D;font-weight:900;margin-right:8px}
.article-body .btn{display:inline-block;font-family:var(--sans);font-weight:800;font-size:14px;letter-spacing:.02em;padding:11px 18px;border-radius:10px;border:0;cursor:pointer}
.article-body .btn-product-info-edit{display:none}
.article-body [class*="buy"],.article-body .btn-primary,.article-body .btn-default{background:linear-gradient(90deg,var(--pn-electric),var(--pn-purple));color:#fff !important;text-decoration:none}
/* sponsor block */
.article-body [class*="sponsor"],.article-body [class*="partnership"]{border:1.5px solid;border-image:linear-gradient(90deg,var(--pn-electric),var(--pn-magenta)) 1;background:linear-gradient(180deg,#FBFAFF,#fff)}

/* HYDRATED PRODUCT CARDS (pipeline output: .product-card__ BEM family) */
.article-body .product-card{font-family:var(--sans);border:1px solid var(--pn-line);border-radius:var(--pn-radius);box-shadow:0 1px 2px rgba(18,19,31,.05),0 10px 28px -18px rgba(18,19,31,.25);margin:1.6em 0;padding:16px;background:#fff}
.article-body .product-card__meta-subtitle{font-size:12.5px;font-weight:800;color:var(--pn-magenta);text-transform:uppercase;letter-spacing:.06em;margin-bottom:2px}
.article-body .product-card__meta-brand{display:inline-flex;align-items:center;gap:5px;margin-top:4px;font-size:11.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#8A6D3B;background:linear-gradient(90deg,rgba(232,184,115,.22),rgba(232,184,115,.08));border:1px solid rgba(232,184,115,.5);padding:4px 10px;border-radius:99px}
.article-body .product-card__meta-brand strong{color:#7A5A28}
.article-body .product-card__meta-title{font-size:21px;font-weight:900;letter-spacing:-.02em;line-height:1.15;margin-bottom:6px}
.article-body .product-card img{margin:8px auto;max-height:340px;width:auto;border-radius:var(--pn-radius-sm)}
.article-body .product-card__check-price-label{font-family:var(--mono);font-size:12px;color:var(--pn-ink-3);margin:10px 0 8px}
.article-body .product-card__merchants{display:flex;flex-wrap:wrap;gap:10px}
.article-body .product-card__button-merchant{flex:1 1 140px;display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1.5px solid var(--pn-line);border-radius:12px;padding:11px 14px;background:#fff;transition:border-color .15s}
.article-body .product-card__button-merchant:active{border-color:var(--pn-electric)}
.article-body .merchant-logo{display:block;height:26px;overflow:hidden}
.article-body .merchant-logo img{height:26px !important;width:auto !important;margin:0 !important;border-radius:4px}
/* legacy in-body author card + inline ad slots: replaced by the template's own byline/ads */
.article-body .adbox{display:none}
/* pros/cons rows */
.article-body .product-card__reasons--good,.article-body .product-card__reasons--bad{margin-top:6px}
.article-body .product-card__reasons-item{display:flex;align-items:flex-start;gap:9px;font-family:var(--sans);font-size:14.5px;line-height:1.5;margin:6px 0}
.article-body .product-card__reasons-item .material-icons{font-size:19px;line-height:1.35;flex:0 0 auto}
.article-body .reason-pros{color:#0BA05F}
.article-body .reason-cons{color:#E5484D}
/* EXPERT REVIEW CARD: shown ONLY on content with a real expert attached
   (val, 2026-07-23: "it should only be there for expert content"). The
   pipeline injects an editor-bio card into EVERY article; on normal articles
   the header byline already credits the editor, so the in-body card is
   noise. On the 141 expert-attached articles it is E-E-A-T signal. */

.article-body .expert-card{margin:1.8em 0;padding:18px;border:1px solid var(--pn-line);border-radius:var(--pn-radius);background:var(--pn-surface);position:relative;overflow:hidden}
.article-body .expert-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(180deg,var(--pn-electric),var(--pn-magenta))}
.article-body .expert-card__profile{display:flex;align-items:center;gap:14px;margin-bottom:10px}
.article-body .expert-card__avatar img{width:56px;height:56px;border-radius:50%;object-fit:cover;margin:0}
.article-body .expert-card__avatar figure{margin:0}
.article-body .expert-card__editor-expert-tag{margin-top:6px}
.article-body .expert-card__eidtor-export-title{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--pn-electric);margin:0}
.article-body .expert-card__occupation{font-size:12.5px;font-weight:600;color:var(--pn-ink-3)}
.article-body .expert-card__name{font-family:var(--display);font-size:17px;font-weight:900;letter-spacing:-.01em;margin:2px 0 0}
.article-body .expert-card__name a{color:var(--pn-ink) !important;text-decoration:none}
.article-body .expert-card__arrow-icon{font-size:15px;vertical-align:middle;color:var(--pn-electric)}
.article-body .expert-card__description{font-family:var(--serif);font-size:15px;line-height:1.6;color:var(--pn-ink-2)}
/* the legacy Read More button calls a jQuery-era function that no longer
   exists; the full bio is always shown, so the button is pure debris */
.article-body .expert-card .expert-card__read-more{display:none}
/* avatar: the pipeline nests broken <html> wrappers around the img, so pin
   the size on ANY img inside the card or it collapses to a sliver on mobile */
.article-body .expert-card img{width:56px !important;height:56px !important;max-height:56px;object-fit:cover;border-radius:50%;margin:0}
/* the EDITOR tag was wrapping one letter per line inside its narrow column */
.article-body .expert-card__eidtor-export-title{white-space:nowrap;letter-spacing:.14em}
.article-body .expert-card__profile > div:first-child{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:5px}
.article-body .expert-card__profile > div:last-child{flex:1 1 0;min-width:0}
.article-body .expert-card__link{color:var(--pn-electric) !important;text-decoration:underline;text-underline-offset:3px;font-family:var(--sans);font-size:13.5px;font-weight:700}
/* product-card "Why we recommend it" read-more (raw <button> -> electric link) */
/* min 44px hit area (finger-sized on the buy-cards) while still reading as a text link */
.article-body .product-card__read-more{display:inline-flex;align-items:center;min-height:44px;margin-top:2px;font-family:var(--sans);font-weight:800;font-size:13px;letter-spacing:.03em;text-transform:uppercase;color:var(--pn-electric);background:none;border:0;padding:6px 0;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
/* The COLLAPSED state the old jQuery bundle used to apply on load. Without
   this the description renders in full and Read More is a dead button doing
   nothing (val, 2026-07-22). Clamp + fade; the click handler expands.
   NOTE the wrapper class is __content-CONTAINER: an earlier version targeted
   ".product-card__content", which does not exist in the pipeline markup (it
   only appears as a substring of other class names), so nothing collapsed. */
.article-body .product-card__content-container{max-height:340px;overflow:hidden;position:relative}
.article-body .product-card__content-blurer{position:absolute;bottom:0;left:0;right:0;height:72px;background:linear-gradient(180deg,transparent,#fff)}
/* short descriptions do not need the theatre: JS marks them and everything relaxes */
.article-body .product-card__content-container.is-short{max-height:none}
.article-body .product-card__content-container.is-short + div .product-card__read-more,
.article-body .product-card__content-container.is-short .product-card__content-blurer{display:none}
/* legacy WordPress-era buy buttons (.fasc-button / .pn-fasc-link): render as real buttons */
.article-body .fasc-button,.article-body a.pn-fasc-link{display:inline-flex;align-items:center;justify-content:center;width:100%;max-width:340px;padding:13px 20px !important;margin:6px 0;border-radius:12px !important;font-family:var(--sans);font-weight:800 !important;font-size:14.5px;letter-spacing:.02em;text-decoration:none !important;background:linear-gradient(90deg,var(--pn-electric),var(--pn-purple)) !important;color:#fff !important;border:0}
.article-body p>strong>.fasc-button,.article-body strong>.pn-fasc-link{margin:0}
.article-body .fasc-button:active{opacity:.9}
/* "Mini verdict" / "Why we recommend it" sub-headers inside cards */
.article-body .product-card strong,.article-body .product-card b{font-family:var(--sans)}
/* TABLE OF CONTENTS: visible by default in v2 */
.article-body .table-of-content{position:relative;border:0;border-radius:0;background:none;padding:0 0 0 18px;margin:1.8em 0}
.article-body .table-of-content::before{content:"";position:absolute;left:0;top:4px;bottom:4px;width:4px;border-radius:99px;background:linear-gradient(180deg,var(--pn-electric),var(--pn-magenta))}
.article-body .table-of-content__header{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--pn-ink-3);margin:0 0 10px}
.article-body .table-of-content__header .material-icons{display:none}
.article-body .table-of-content__content{display:block !important}
.article-body .table-of-content__content ul{list-style:none;padding:0;margin:0;counter-reset:toc}
@media(min-width:720px){.article-body .table-of-content__content ul{columns:2;column-gap:30px}}
.article-body .table-of-content__content li{margin:0;padding:3px 0;border:0;break-inside:avoid;counter-increment:toc;display:flex;gap:10px;align-items:baseline}
.article-body .table-of-content__content li::before{content:counter(toc);font-family:var(--mono);font-size:11.5px;font-weight:700;color:var(--pn-magenta);flex:0 0 auto;min-width:1.1em}
.article-body .table-of-content__content a{font-family:var(--sans);font-size:15px;font-weight:650;line-height:1.4;color:var(--pn-ink);text-decoration:none;border-bottom:1px solid transparent}
.article-body .table-of-content__content a:hover{border-bottom-color:var(--pn-electric);color:var(--pn-electric)}
.article-body .table-of-content__content__list__product a{color:var(--pn-ink)}

/* related */
.rule{display:flex;align-items:center;gap:12px;margin:34px 0 6px}
.rule h2{font-family:var(--display);font-size:15px;font-weight:900;letter-spacing:.1em;text-transform:uppercase}
.rule::after{content:"";flex:1;height:3px;background:linear-gradient(90deg,var(--pn-electric),var(--pn-magenta),transparent)}
.rel a{display:grid;grid-template-columns:1fr 96px;gap:14px;padding:15px 0;border-bottom:1px solid var(--pn-line)}
.rel .t{font-family:var(--sans);font-size:16.5px;font-weight:800;line-height:1.28;letter-spacing:-.01em}
.rel img{width:96px;height:68px;object-fit:cover;border-radius:var(--pn-radius-sm)}
.rel .meta-line{margin-top:6px;display:flex;gap:10px;align-items:baseline}

/* footer (compact) */