/* ============================================================
   ExpertCamRating — shared design system
   ============================================================ */

:root{
  --bg:#f6f1e2;
  --paper:#ffffff;
  --paper-2:#fbf6e6;
  --ink:#1a1814;
  --ink-soft:#2c2820;
  --muted:#7a7363;
  --muted-2:#a39c8a;
  --rule:#d6cdb4;
  --rule-soft:#e6decb;
  --red-bar:#bb1f24;
  --red:#c01f25;
  --red-deep:#8a161a;
  --red-tint:#fae9e6;
  --green:#2c7d3f;
  --gold:#d4a017;

  --maxw:1200px;
  --col-aside:300px;

  --serif:'Iowan Old Style','Charter','Source Serif Pro',Georgia,'Times New Roman',serif;
  --sans:-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,'JetBrains Mono','IBM Plex Mono',Menlo,Consolas,monospace;
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:15px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{display:block;max-width:100%;height:auto}
a{color:var(--red);text-decoration:none}
a:hover{text-decoration:underline}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit;padding:0}
ul,ol{margin:0;padding:0;list-style:none}

/* ===== top red banner ===== */
.topcta{background:var(--red-bar);color:#fff;border-bottom:2px solid #8a161a}
.topcta-inner{
  max-width:var(--maxw);margin:0 auto;
  padding:8px 20px;
  display:flex;justify-content:space-between;align-items:center;gap:18px;
  font:600 13px/1.2 var(--sans);
  letter-spacing:0.02em;
}
.topcta-inner span{
  text-transform:uppercase;
  font:700 12px/1.2 var(--sans);
  letter-spacing:0.12em;
}
.topcta-inner a{
  color:var(--red-bar);
  background:#fff;
  padding:6px 14px;
  font:700 12px/1 var(--sans);
  letter-spacing:0.08em;
  text-transform:uppercase;
  border-radius:2px;
  text-decoration:none;
  white-space:nowrap;
  transition:background .15s;
}
.topcta-inner a:hover{background:#ffefe5;text-decoration:none}

/* ===== black masthead ===== */
.mast{background:#0c0a08;color:#fff;border-bottom:1px solid #1d1a13}
.mast-inner{
  max-width:var(--maxw);margin:0 auto;
  padding:18px 20px;
  display:flex;justify-content:space-between;align-items:center;gap:20px;
}
.wordmark{
  font-family:var(--serif);
  font-weight:700;
  font-size:28px;
  color:#fff;
  text-decoration:none;
  letter-spacing:-0.01em;
  display:flex;align-items:baseline;
}
.wordmark .tld{color:#fff;font-weight:400;font-size:22px}
.wordmark .dot{
  display:inline-block;
  width:6px;height:6px;border-radius:50%;
  background:var(--red);
  margin:0 1px 4px 0;
  vertical-align:middle;
}
.nav{display:flex;gap:22px;flex-wrap:wrap}
.nav a{
  color:#fff;
  font:600 11px/1 var(--sans);
  text-transform:uppercase;
  letter-spacing:0.14em;
  text-decoration:none;
  padding:4px 0;
  border-bottom:2px solid transparent;
  transition:border-color .15s;
}
.nav a:hover{border-color:var(--red);text-decoration:none}
.nav a.current{border-color:var(--red)}
.mast-icons{display:flex;gap:10px;align-items:center}
.mast-icons button{
  color:#fff;
  width:28px;height:28px;
  display:grid;place-items:center;
  border-radius:50%;
  transition:background .15s;
}
.mast-icons button:hover{background:#1d1a13}
.mast-icons svg{width:15px;height:15px}

/* ===== article shell (2-col) ===== */
.shell{
  max-width:var(--maxw);
  margin:0 auto;
  padding:30px 20px 50px;
  display:grid;
  grid-template-columns:minmax(0,1fr) var(--col-aside);
  gap:36px;
}
.main{min-width:0}

/* ===== breadcrumbs ===== */
.crumbs{
  margin:0 0 14px;
  font:600 11px/1 var(--mono);
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--muted);
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;
}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--red)}
.crumbs .sep{color:var(--rule)}
.crumbs .here{color:var(--ink)}

/* ===== article header ===== */
.art-eyebrow{
  font:600 11px/1 var(--mono);
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--muted);
  margin:0 0 14px;
  display:flex;gap:10px;align-items:center;flex-wrap:wrap;
}
.art-eyebrow .cat{color:var(--red);font-weight:700}
.art-eyebrow .sep{color:var(--rule)}

h1.headline{
  font-family:var(--serif);
  font-weight:700;
  font-size:clamp(34px,4.4vw,48px);
  line-height:1.05;
  letter-spacing:-0.015em;
  margin:0 0 12px;
  color:var(--ink);
  text-wrap:balance;
}
.deck{
  font-family:var(--serif);
  font-style:italic;
  font-weight:400;
  font-size:clamp(17px,1.6vw,20px);
  line-height:1.4;
  color:var(--ink-soft);
  margin:0 0 14px;
  max-width:46em;
  text-wrap:pretty;
}
.accent-rule{border:0;height:3px;background:var(--red);width:100%;margin:18px 0}

/* ===== byline ===== */
.byline{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  padding:12px 0;
  margin:6px 0 22px;
  font:13px/1.4 var(--sans);
  color:var(--muted);
}
.byline .author{color:var(--ink);font-weight:600}
.byline .author a{color:var(--red)}
.byline .updated b{color:var(--ink-soft);font-weight:600}
.byline .share{margin-left:auto;display:flex;gap:6px}
.byline .share button{
  width:26px;height:26px;
  border:1px solid var(--rule);
  border-radius:50%;
  color:var(--muted);
  display:grid;place-items:center;
}
.byline .share svg{width:11px;height:11px}
.byline .share button:hover{color:var(--red);border-color:var(--red)}

/* ===== body prose ===== */
.prose{color:var(--ink);font-size:16px;line-height:1.7}
.prose p{margin:0 0 16px;text-wrap:pretty}
.prose p strong, .prose p b{color:var(--ink)}
.prose a.in-link{
  color:var(--red);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:2px;
}
.prose h2{
  font-family:var(--serif);
  font-weight:700;
  font-size:28px;
  line-height:1.18;
  color:var(--red);
  margin:36px 0 8px;
  letter-spacing:-0.005em;
  text-wrap:balance;
}
.prose h2 a{color:var(--red);text-decoration:none}
.prose h2 a:hover{text-decoration:underline}
.prose h3{
  font-family:var(--serif);
  font-weight:700;
  font-size:21px;
  line-height:1.22;
  color:var(--ink);
  margin:24px 0 6px;
}
.prose ul.bullets{
  margin:14px 0 18px;padding:0;list-style:none;
  display:flex;flex-direction:column;gap:8px;
}
.prose ul.bullets li{
  padding-left:22px;position:relative;
  color:var(--ink-soft);font-size:15.5px;line-height:1.6;
}
.prose ul.bullets li::before{
  content:"";position:absolute;left:0;top:10px;
  width:9px;height:9px;border-radius:50%;
  background:var(--red);
}
.prose ul.numbered{
  list-style:none;counter-reset:pick;padding:0;margin:14px 0 18px;
  display:flex;flex-direction:column;gap:14px;
}
.prose ul.numbered li{
  counter-increment:pick;padding-left:42px;position:relative;
  font-size:15.5px;line-height:1.6;color:var(--ink-soft);
}
.prose ul.numbered li::before{
  content:counter(pick);position:absolute;left:0;top:0;
  width:28px;height:28px;background:var(--red);color:#fff;
  border-radius:50%;display:grid;place-items:center;
  font:700 13px/1 var(--mono);
}
.prose ul.numbered b{color:var(--ink);font-weight:700}
.prose blockquote.pull{
  margin:28px 0;padding:8px 0 8px 22px;
  border-inline-start:3px solid var(--red);
  font-family:var(--serif);font-style:italic;
  font-size:24px;line-height:1.3;color:var(--ink);
  text-wrap:balance;
}
.prose blockquote.pull cite{
  display:block;font:600 12px/1.4 var(--mono);
  letter-spacing:0.1em;text-transform:uppercase;
  color:var(--muted);margin-top:10px;font-style:normal;
}
.prose figure.inline{margin:24px 0;}
.prose figure.inline figcaption{
  font:italic 13px/1.5 var(--serif);
  color:var(--muted);
  margin-top:8px;
}

/* ===== visit button ===== */
.visit-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  background:var(--red);color:#fff;
  font:700 12px/1 var(--sans);
  letter-spacing:0.18em;text-transform:uppercase;
  padding:11px 24px;border-radius:2px;
  text-decoration:none;
  transition:background .15s;
  border:1px solid var(--red-deep);
}
.visit-btn:hover{background:var(--red-deep);text-decoration:none}
.visit-btn .arrow{font-weight:400;font-size:14px}

/* ===== aside / sidebar primitives ===== */
.aside{
  display:flex;flex-direction:column;gap:18px;
  align-self:start;
  position:sticky;top:18px;
  min-width:0;
}
.panel{background:var(--paper);border:1px solid var(--rule)}
.panel-head{
  background:var(--ink);color:#fff;
  padding:9px 14px;
  font:700 11px/1 var(--mono);
  letter-spacing:0.16em;text-transform:uppercase;
  display:flex;justify-content:space-between;align-items:center;
}
.panel-head.red{background:var(--red)}
.panel-head .meta{color:#bdb29b;font-weight:600;font-size:10px}
.panel-head.red .meta{color:rgba(255,255,255,0.85)}
.panel-body{padding:6px 0}

/* sidebar Top 5 list (reused on article + review) */
.top5-row{
  display:grid;
  grid-template-columns:22px 36px 1fr auto;
  gap:10px;align-items:center;
  padding:9px 14px;
  border-bottom:1px solid var(--rule-soft);
  font:13px var(--sans);
  color:var(--ink-soft);
}
.top5-row:last-child{border-bottom:none}
.top5-row .num{
  font:700 14px var(--serif);
  color:var(--red);
  font-variant-numeric:tabular-nums;
}
.top5-row .lg{
  width:36px;height:36px;
  background:#fff;border:1px solid var(--rule);
  padding:5px;border-radius:3px;
  display:grid;place-items:center;
}
.top5-row .lg img{max-width:100%;max-height:100%;object-fit:contain}
.top5-row .nm{
  font-family:var(--serif);font-size:14px;font-weight:700;
  color:var(--ink);line-height:1.1;margin-bottom:2px;
}
.top5-row .sc{font:600 11px var(--mono);color:var(--muted);letter-spacing:0.04em}
.top5-row .sc b{color:var(--green);font-weight:700}
.top5-row .go{
  color:var(--red);
  font:700 10px var(--mono);
  letter-spacing:0.12em;text-transform:uppercase;
  text-decoration:none;
}
.top5-row .go:hover{text-decoration:underline}

/* popular row (sidebar) */
.popular-row{
  display:grid;grid-template-columns:42px 1fr;
  gap:10px;align-items:center;
  padding:9px 14px;
  border-bottom:1px solid var(--rule-soft);
  text-decoration:none;color:inherit;
}
.popular-row:last-child{border-bottom:none}
.popular-row:hover{background:var(--paper-2);text-decoration:none}
.popular-row .th{
  width:42px;height:42px;
  background-color:var(--paper-2);
  background-size:cover;
  background-position:center;
  border:1px solid var(--rule);
  border-radius:4px;
  flex-shrink:0;
}
.popular-row h4{
  font-family:var(--serif);
  font-weight:700;font-size:13.5px;
  line-height:1.25;margin:0 0 2px;color:var(--ink);
  text-wrap:pretty;
}
.popular-row .meta{
  font:600 10px var(--mono);
  color:var(--muted);letter-spacing:0.06em;text-transform:uppercase;
}

/* sponsored / newsletter */
.sponsored{
  border:1px solid var(--rule);
  background:var(--paper-2);
  padding:14px;text-align:center;
}
.sponsored .lbl{
  font:700 9px var(--mono);
  letter-spacing:0.18em;text-transform:uppercase;
  color:var(--muted);margin:0 0 8px;
}
.sponsored .box{
  aspect-ratio:300/250;
  background:repeating-linear-gradient(45deg, #f4ecd2 0 8px, #ece1be 8px 16px);
  border:1px dashed var(--rule);
  display:grid;place-items:center;
  font:600 13px var(--mono);
  color:var(--muted);
  letter-spacing:0.1em;
}
.sponsored small{
  color:var(--muted);font:10px var(--mono);
  display:block;margin:8px 0 0;
  letter-spacing:0.08em;text-transform:uppercase;
}
.nl{padding:14px}
.nl h3{
  font-family:var(--serif);font-weight:700;
  font-size:17px;color:var(--ink);
  margin:0 0 6px;
}
.nl p{font-size:12.5px;line-height:1.5;color:var(--ink-soft);margin:0 0 10px}
.nl form{display:flex;gap:0;border:1px solid var(--rule);background:#fff}
.nl input{
  flex:1;border:none;outline:none;
  padding:10px 12px;
  font:13px var(--sans);
  background:transparent;
}
.nl button{
  background:var(--red);color:#fff;
  padding:10px 18px;
  font:700 11px var(--sans);
  letter-spacing:0.1em;text-transform:uppercase;
  border-left:1px solid var(--red-deep);
}
.nl small{font:11px var(--sans);color:var(--muted);display:block;margin:8px 0 0}

/* ===== 18+ disclaimer ===== */
.disclaimer{
  margin:36px 0 0;
  border:2px solid var(--red);
  background:var(--red-tint);
  padding:20px;
  display:grid;grid-template-columns:56px 1fr;gap:16px;align-items:start;
}
.disclaimer .seal{
  width:56px;height:56px;
  border:2px solid var(--red);
  border-radius:50%;
  color:var(--red);background:#fff;
  display:grid;place-items:center;
  font:700 18px var(--serif);letter-spacing:-0.02em;
}
.disclaimer h3{
  font-family:var(--serif);
  font-size:18px;line-height:1.2;
  margin:0 0 6px;color:var(--red-deep);font-weight:700;
}
.disclaimer p{font-size:13px;line-height:1.55;color:var(--ink-soft);margin:0}

/* ===== author bio ===== */
.author-card{
  margin:48px 0 0;
  padding:24px;background:var(--paper);
  border:1px solid var(--rule);
  display:grid;grid-template-columns:80px 1fr;
  gap:20px;align-items:start;
}
.author-card .av{
  width:80px;height:80px;border-radius:50%;
  background:linear-gradient(135deg,#3d2210,#1d1108);
  color:#f0d28a;display:grid;place-items:center;
  font:700 22px var(--serif);letter-spacing:0.04em;
}
.author-card .ab-eye{
  font:700 11px var(--mono);
  letter-spacing:0.16em;text-transform:uppercase;
  color:var(--red);margin:0 0 6px;
}
.author-card h3{
  font-family:var(--serif);font-size:22px;font-weight:700;
  margin:0 0 8px;color:var(--ink);
}
.author-card p{font-size:14.5px;line-height:1.6;color:var(--ink-soft);margin:0}
.author-card .ab-links{
  margin:10px 0 0;
  display:flex;gap:14px;flex-wrap:wrap;
  font:600 12px var(--sans);
}
.author-card .ab-links a{color:var(--red)}

/* ===== related row ===== */
.related{margin:42px 0 0;padding:18px 0 0;border-top:3px solid var(--ink)}
.related h2{
  font-family:var(--serif);font-weight:700;
  font-size:24px;line-height:1.2;margin:0 0 16px;
  color:var(--ink);letter-spacing:-0.005em;
}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.related-card{
  border:1px solid var(--rule);background:var(--paper);
  text-decoration:none;color:var(--ink);
  display:flex;flex-direction:column;
  transition:transform .15s ease, box-shadow .15s ease;
}
.related-card:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 18px -6px rgba(20,17,13,0.18);
  text-decoration:none;
}
.related-card .img{
  aspect-ratio:5/3;
  background:linear-gradient(135deg,var(--c1),var(--c2));
  position:relative;display:flex;align-items:flex-end;padding:10px;
}
.related-card .img .cat{
  background:rgba(0,0,0,0.62);color:#fff;
  font:700 9px var(--mono);
  letter-spacing:0.16em;text-transform:uppercase;
  padding:3px 7px;
}
.related-card .body{padding:14px}
.related-card .body h3{
  font-family:var(--serif);font-weight:700;
  font-size:16px;line-height:1.3;
  color:var(--ink);margin:0 0 6px;
  text-wrap:pretty;
}
.related-card .body .meta{
  font:11px var(--mono);color:var(--muted);letter-spacing:0.04em;
}

/* ===== footer ===== */
footer{
  background:#0c0a08;color:#bdb29b;
  margin-top:50px;
  border-top:3px solid var(--red);
}
.ftop{
  max-width:var(--maxw);margin:0 auto;
  padding:40px 20px 28px;
  display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr;gap:28px;
}
.ftop h4{
  font:700 11px/1 var(--mono);
  letter-spacing:0.16em;text-transform:uppercase;
  color:#fff;margin:0 0 14px;
}
.ftop ul li{font-size:13px;margin-bottom:7px}
.ftop ul li a{color:#bdb29b;text-decoration:none}
.ftop ul li a:hover{color:var(--red)}
.ftop .brand-col{display:flex;flex-direction:column;gap:12px}
.ftop .brand-col .wm{
  font-family:var(--serif);font-size:28px;font-weight:700;color:#fff;
  letter-spacing:-0.01em;
}
.ftop .brand-col .wm .dot{
  display:inline-block;width:5px;height:5px;border-radius:50%;
  background:var(--red);margin:0 1px 4px 0;
}
.ftop .brand-col p{font-size:12.5px;line-height:1.55;margin:0;max-width:280px;color:#9b9281}
.ftop .brand-col .est{font:700 10px var(--mono);letter-spacing:0.16em;color:var(--red)}
.fbottom{
  border-top:1px solid #1d1a13;
  padding:14px 20px;max-width:var(--maxw);margin:0 auto;
  display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:12px;
  font:11px/1.4 var(--sans);color:#76705f;
}
.fbottom .legal{display:flex;gap:14px;flex-wrap:wrap}
.fbottom .legal a{color:#76705f;text-decoration:none;font-size:11px}
.fbottom .legal a:hover{color:#fff}

/* ===== utility: live-now pill ===== */
.live-pill{
  display:inline-flex;align-items:center;gap:6px;
  font:700 10px/1 var(--mono);letter-spacing:0.14em;text-transform:uppercase;
  color:var(--red);
}
.live-pill::before{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--red);
  box-shadow:0 0 0 0 rgba(192,31,37,0.5);
  animation:pulse 1.6s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(192,31,37,0.5)}
  50%{box-shadow:0 0 0 6px rgba(192,31,37,0)}
}

/* ===== responsive ===== */
@media (max-width:1024px){
  .shell{grid-template-columns:1fr;gap:32px}
  .aside{position:static}
  .ftop{grid-template-columns:2fr 1fr 1fr;gap:22px}
}
@media (max-width:760px){
  .topcta-inner{flex-direction:column;gap:8px;padding:8px 16px;text-align:center}
  .topcta-inner span{font-size:11px}
  .nav{display:none}
  .mast-inner{padding:14px 16px}
  .wordmark{font-size:24px}
  .wordmark .tld{font-size:18px}
  .shell{padding:22px 16px 36px}
  h1.headline{font-size:30px}
  .related-grid{grid-template-columns:1fr}
  .author-card{grid-template-columns:1fr;text-align:left}
  .ftop{grid-template-columns:1fr 1fr;gap:22px}
  .ftop .brand-col{grid-column:1 / -1}
}

/* ====================================================================== */
/* ===== INDEX PAGE STYLES (Top-27 listing layout) ===== */
/* ====================================================================== */

:root{
    --bg:#f6f1e2;
    --paper:#ffffff;
    --paper-2:#fbf6e6;
    --ink:#1a1814;
    --ink-soft:#2c2820;
    --muted:#7a7363;
    --muted-2:#a39c8a;
    --rule:#d6cdb4;
    --rule-soft:#e6decb;
    --red-bar:#bb1f24;
    --red:#c01f25;
    --red-deep:#8a161a;
    --red-tint:#fae9e6;
    --green:#2c7d3f;
    --gold:#d4a017;

    --maxw:1200px;
    --col-aside:300px;

    --serif:'Iowan Old Style','Charter','Source Serif Pro',Georgia,'Times New Roman',serif;
    --sans:-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',Roboto,Helvetica,Arial,sans-serif;
    --mono:ui-monospace,'JetBrains Mono','IBM Plex Mono',Menlo,Consolas,monospace;
  }

  *,*::before,*::after{box-sizing:border-box}
  html,body{margin:0;padding:0}
  body{
    background:var(--bg);
    color:var(--ink);
    font-family:var(--sans);
    font-size:15px;
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
  }
  img{display:block;max-width:100%;height:auto}
  a{color:var(--red);text-decoration:none}
  a:hover{text-decoration:underline}
  button{font:inherit;cursor:pointer;border:none;background:none;color:inherit;padding:0}
  ul,ol{margin:0;padding:0;list-style:none}

  /* ===== top red banner ===== */
  .topcta{
    background:var(--red-bar);
    color:#fff;
    border-bottom:2px solid #8a161a;
  }
  .topcta-inner{
    max-width:var(--maxw);margin:0 auto;
    padding:8px 20px;
    display:flex;justify-content:space-between;align-items:center;gap:18px;
    font:600 13px/1.2 var(--sans);
    letter-spacing:0.02em;
  }
  .topcta-inner span{
    text-transform:uppercase;
    font:700 12px/1.2 var(--sans);
    letter-spacing:0.12em;
  }
  .topcta-inner a{
    color:#fff;
    background:#fff;
    color:var(--red-bar);
    padding:6px 14px;
    font:700 12px/1 var(--sans);
    letter-spacing:0.08em;
    text-transform:uppercase;
    border-radius:2px;
    text-decoration:none;
    white-space:nowrap;
    transition:background .15s;
  }
  .topcta-inner a:hover{background:#ffefe5;text-decoration:none}

  /* ===== black masthead ===== */
  .mast{
    background:#0c0a08;
    color:#fff;
    border-bottom:1px solid #1d1a13;
  }
  .mast-inner{
    max-width:var(--maxw);margin:0 auto;
    padding:18px 20px;
    display:flex;justify-content:space-between;align-items:center;gap:20px;
  }
  .wordmark{
    font-family:var(--serif);
    font-weight:700;
    font-size:28px;
    color:#fff;
    text-decoration:none;
    letter-spacing:-0.01em;
    display:flex;align-items:baseline;
  }
  .wordmark .tld{
    color:#fff;
    font-weight:400;
    font-size:22px;
  }
  .wordmark .dot{
    display:inline-block;
    width:6px;height:6px;border-radius:50%;
    background:var(--red);
    margin:0 1px 4px 0;
    vertical-align:middle;
  }
  .nav{
    display:flex;
    gap:22px;
    flex-wrap:wrap;
  }
  .nav a{
    color:#fff;
    font:600 11px/1 var(--sans);
    text-transform:uppercase;
    letter-spacing:0.14em;
    text-decoration:none;
    padding:4px 0;
    border-bottom:2px solid transparent;
    transition:border-color .15s;
  }
  .nav a:hover{border-color:var(--red);text-decoration:none}
  .mast-icons{
    display:flex;
    gap:10px;
    align-items:center;
  }
  .mast-icons button{
    color:#fff;
    width:28px;height:28px;
    display:grid;place-items:center;
    border-radius:50%;
    transition:background .15s;
  }
  .mast-icons button:hover{background:#1d1a13}
  .mast-icons svg{width:15px;height:15px}

  /* ===== article shell ===== */
  .shell{
    max-width:var(--maxw);
    margin:0 auto;
    padding:30px 20px 50px;
    display:grid;
    grid-template-columns:minmax(0,1fr) var(--col-aside);
    gap:36px;
  }
  .main{min-width:0}
  .aside{min-width:0}

  /* ===== article header ===== */
  .art-eyebrow{
    font:600 11px/1 var(--mono);
    letter-spacing:0.16em;
    text-transform:uppercase;
    color:var(--muted);
    margin:0 0 14px;
    display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  }
  .art-eyebrow .cat{color:var(--red);font-weight:700}
  .art-eyebrow .sep{color:var(--rule)}

  h1.headline{
    font-family:var(--serif);
    font-weight:700;
    font-size:clamp(34px,4.4vw,48px);
    line-height:1.05;
    letter-spacing:-0.015em;
    margin:0 0 12px;
    color:var(--ink);
    text-wrap:balance;
  }
  .accent-rule{
    border:0;
    height:3px;
    background:var(--red);
    width:100%;
    margin:18px 0 18px;
  }

  /* hero image */
  .hero-img{
    aspect-ratio:16/9;
    margin:0 0 14px;
    background:linear-gradient(135deg,#7a3438 0%,#3d181b 50%,#23100f 100%);
    position:relative;
    overflow:hidden;
    border:1px solid var(--rule);
  }
  .hero-img::before{
    content:"";
    position:absolute;inset:0;
    background:
      radial-gradient(60% 60% at 78% 38%, rgba(220,180,150,0.45), transparent 60%),
      radial-gradient(80% 60% at 30% 90%, rgba(0,0,0,0.55), transparent 50%),
      radial-gradient(40% 40% at 22% 30%, rgba(255,200,170,0.18), transparent 60%);
  }
  .hero-img::after{
    content:"";
    position:absolute;
    inset:0;
    background:
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 450' preserveAspectRatio='xMidYMid slice'><defs><radialGradient id='r' cx='62%25' cy='42%25' r='25%25'><stop offset='0%25' stop-color='%23eed1ba' stop-opacity='0.85'/><stop offset='100%25' stop-color='%23eed1ba' stop-opacity='0'/></radialGradient></defs><rect width='800' height='450' fill='url(%23r)'/><ellipse cx='500' cy='200' rx='90' ry='130' fill='%23231012' opacity='0.4'/><ellipse cx='480' cy='180' rx='34' ry='42' fill='%23eecfb8' opacity='0.65'/><path d='M460 220 q20 26 40 28 q20 -2 40 -28' stroke='%231a0808' stroke-width='2' fill='none' opacity='0.45'/></svg>");
    background-size:cover;
    background-position:center;
    mix-blend-mode:normal;
    opacity:0.55;
  }
  .hero-img .credit{
    position:absolute;
    right:10px;bottom:8px;
    font:500 10px/1 var(--sans);
    color:rgba(255,255,255,0.55);
    z-index:2;
    letter-spacing:0.04em;
  }

  /* byline */
  .byline{
    display:flex;align-items:center;gap:18px;flex-wrap:wrap;
    border-top:1px solid var(--rule);
    border-bottom:1px solid var(--rule);
    padding:12px 0;
    margin:6px 0 22px;
    font:13px/1.4 var(--sans);
    color:var(--muted);
  }
  .byline .author{
    color:var(--ink);
    font-weight:600;
  }
  .byline .author a{color:var(--red)}
  .byline .updated b{color:var(--ink-soft);font-weight:600}
  .byline .share{
    margin-left:auto;
    display:flex;gap:6px;
  }
  .byline .share button{
    width:26px;height:26px;
    border:1px solid var(--rule);
    border-radius:50%;
    color:var(--muted);
    display:grid;place-items:center;
  }
  .byline .share svg{width:11px;height:11px}
  .byline .share button:hover{color:var(--red);border-color:var(--red)}

  /* ===== body prose ===== */
  .prose{
    color:var(--ink);
    font-size:16px;
    line-height:1.65;
  }
  .prose p{margin:0 0 16px}
  .prose p strong, .prose p b{color:var(--ink)}
  .prose a.in-link{
    color:var(--red);
    text-decoration:underline;
    text-decoration-thickness:1px;
    text-underline-offset:2px;
  }

  /* ===== filter chip strip ===== */
  .filter-bar{
    margin:8px 0 24px;
    border:1px solid var(--rule);
    background:var(--paper);
    padding:10px 14px;
    display:flex;gap:12px;align-items:center;flex-wrap:wrap;
  }
  .filter-bar .label{
    font:700 11px/1 var(--mono);
    letter-spacing:0.16em;
    text-transform:uppercase;
    color:var(--muted);
  }
  .chips{display:flex;gap:6px;flex-wrap:wrap}
  .chip{
    border:1px solid var(--rule);
    background:var(--paper-2);
    padding:5px 10px;
    font:600 11px/1 var(--sans);
    color:var(--ink-soft);
    border-radius:999px;
    transition:all .15s ease;
    text-transform:uppercase;
    letter-spacing:0.06em;
  }
  .chip:hover{border-color:var(--ink)}
  .chip.active{
    background:var(--red);color:#fff;border-color:var(--red);
  }
  .filter-bar .count{
    margin-left:auto;
    font:600 11px var(--mono);
    letter-spacing:0.06em;
    color:var(--muted);
  }
  .filter-bar .count b{color:var(--ink)}

  /* ===== listing block (DatingNews style) ===== */
  .listing{
    background:var(--paper);
    border:1px solid var(--rule);
    margin:0 0 22px;
    padding:0;
    display:grid;
    grid-template-columns:78px minmax(0,1fr);
    box-shadow:0 1px 0 rgba(20,17,13,0.03);
  }
  .listing .rank-col{
    background:#f4ecd2;
    border-right:1px solid var(--rule);
    display:flex;flex-direction:column;align-items:center;
    padding:16px 0;
    gap:14px;
  }
  .listing .rank-num{
    background:var(--red);
    color:#fff;
    width:42px;height:42px;
    display:grid;place-items:center;
    font-family:var(--serif);
    font-weight:700;
    font-size:24px;
    line-height:1;
    border-radius:2px;
    box-shadow:0 1px 0 rgba(0,0,0,0.1);
  }
  .listing .rank-num.gold{background:linear-gradient(180deg,#d4a017,#a37710)}
  .listing .rank-logo{
    width:62px;height:62px;
    background:#fff;
    border:1px solid var(--rule);
    border-radius:4px;
    padding:8px;
    display:flex;align-items:center;justify-content:center;
  }
  .listing .rank-logo img{max-width:100%;max-height:100%;object-fit:contain}
  .listing .rank-stars{
    display:flex;gap:1px;color:var(--gold);
    flex-direction:column;align-items:center;gap:4px;
  }
  .listing .rank-stars .row{display:flex;gap:1px}
  .listing .rank-stars svg{width:11px;height:11px}
  .listing .rank-stars .score{
    font:700 11px var(--mono);
    color:var(--ink);
    font-variant-numeric:tabular-nums;
  }
  .listing .rank-editor{
    background:var(--ink);color:#fff;
    font:700 9px/1 var(--mono);
    letter-spacing:0.16em;
    text-transform:uppercase;
    padding:4px 6px;
    text-align:center;
    width:calc(100% - 12px);
  }
  .listing .rank-editor.gold{background:#a37710}

  .listing .body-col{
    padding:18px 22px 18px;
  }
  .listing .listing-title{
    font-family:var(--serif);
    font-weight:700;
    font-size:24px;
    line-height:1.15;
    margin:0 0 4px;
    letter-spacing:-0.005em;
  }
  .listing .listing-title a{
    color:var(--red);
    text-decoration:none;
  }
  .listing .listing-title a:hover{text-decoration:underline}
  .listing .listing-tag{
    font:italic 14px/1.4 var(--serif);
    color:var(--ink-soft);
    margin:0 0 14px;
  }
  .listing .listing-desc{
    font-size:14.5px;
    line-height:1.6;
    color:var(--ink-soft);
    margin:0 0 12px;
  }
  .listing .listing-meta-row{
    display:flex;gap:18px;flex-wrap:wrap;
    font:600 11px/1 var(--mono);
    letter-spacing:0.04em;
    color:var(--muted);
    text-transform:uppercase;
    margin:0 0 14px;
    padding:8px 10px;
    background:var(--paper-2);
    border:1px solid var(--rule-soft);
  }
  .listing .listing-meta-row .item b{color:var(--ink-soft);font-weight:700}

  /* visit button */
  .visit-row{
    display:flex;align-items:center;gap:14px;flex-wrap:wrap;
    margin:8px 0 6px;
  }
  .visit-btn{
    display:inline-flex;align-items:center;justify-content:center;gap:6px;
    background:var(--red);
    color:#fff;
    font:700 12px/1 var(--sans);
    letter-spacing:0.18em;
    text-transform:uppercase;
    padding:11px 24px;
    border-radius:2px;
    text-decoration:none;
    transition:background .15s;
    border:1px solid var(--red-deep);
  }
  .visit-btn:hover{background:var(--red-deep);text-decoration:none}
  .visit-btn .arrow{font-weight:400;font-size:14px}
  .visit-link{
    font:14px/1.4 var(--sans);
    color:var(--ink-soft);
  }
  .visit-link b{font-weight:700;color:var(--ink)}
  .visit-link a{color:var(--red);text-decoration:none}
  .visit-link a:hover{text-decoration:underline}
  .visit-caret{color:var(--red);margin-right:4px}

  /* pros / cons */
  .pros-cons{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:24px;
    margin:14px 0 0;
    padding:14px 0 0;
    border-top:1px dashed var(--rule);
  }
  .pros-cons h4{
    font-family:var(--serif);
    font-weight:700;
    color:var(--red);
    font-size:15px;
    margin:0 0 8px;
    line-height:1.2;
  }
  .pros-cons ul{display:flex;flex-direction:column;gap:5px}
  .pros-cons li{
    font-size:13.5px;
    line-height:1.45;
    color:var(--ink-soft);
    display:grid;
    grid-template-columns:18px 1fr;
    gap:6px;
    align-items:start;
  }
  .pros-cons .ic{
    width:16px;height:16px;
    border-radius:50%;
    display:grid;place-items:center;
    font:700 11px/1 var(--sans);
    color:#fff;
    margin-top:2px;
  }
  .pros-cons .ic.plus{background:var(--green)}
  .pros-cons .ic.minus{background:var(--red)}

  /* divider before lower-tier */
  .tier-divider{
    margin:18px 0 22px;
    padding:18px 0 0;
    border-top:3px double var(--rule);
  }
  .tier-divider h2{
    font-family:var(--serif);
    font-weight:700;
    font-size:30px;
    line-height:1.1;
    margin:6px 0 6px;
    color:var(--ink);
    letter-spacing:-0.01em;
  }
  .tier-divider .eyebrow{
    font:700 11px var(--mono);
    letter-spacing:0.18em;
    text-transform:uppercase;
    color:var(--red);
  }
  .tier-divider p{
    font:14.5px/1.55 var(--sans);
    color:var(--muted);
    margin:0;
    max-width:640px;
  }

  /* compact listing — same skeleton, less padding */
  .listing.compact .body-col{padding:14px 18px}
  .listing.compact .listing-title{font-size:20px}
  .listing.compact .listing-tag{font-size:13px;margin-bottom:10px}
  .listing.compact .listing-desc{font-size:13.5px;margin-bottom:10px}
  .listing.compact .listing-meta-row{display:none}
  .listing.compact .pros-cons{grid-template-columns:1fr 1fr;gap:16px;padding-top:10px;margin-top:10px}
  .listing.compact .pros-cons h4{font-size:13px}
  .listing.compact .pros-cons li{font-size:12.5px}
  .listing.compact .rank-col{padding:14px 0;gap:10px}
  .listing.compact .rank-num{width:36px;height:36px;font-size:20px}
  .listing.compact .rank-logo{width:54px;height:54px}
  .listing.compact .visit-btn{padding:9px 18px;font-size:11px}

  /* ===== inline article sections (FAQ-as-prose, methodology) ===== */
  .body-section{margin:36px 0 0}
  .body-section h2{
    font-family:var(--serif);
    font-weight:700;
    font-size:26px;
    line-height:1.18;
    color:var(--red);
    margin:0 0 8px;
    letter-spacing:-0.005em;
    text-wrap:balance;
  }
  .body-section h2 a{color:var(--red);text-decoration:none}
  .body-section h2 a:hover{text-decoration:underline}
  .body-section h3{
    font-family:var(--serif);
    font-weight:700;
    font-size:20px;
    line-height:1.2;
    color:var(--ink);
    margin:18px 0 6px;
  }
  .body-section p{
    font-size:15.5px;
    line-height:1.65;
    color:var(--ink-soft);
    margin:0 0 14px;
  }
  .body-section ul.numbered{
    list-style:none;
    counter-reset:pick;
    padding:0;margin:14px 0;
    display:flex;flex-direction:column;gap:14px;
  }
  .body-section ul.numbered li{
    counter-increment:pick;
    padding-left:42px;
    position:relative;
    font-size:15px;line-height:1.6;color:var(--ink-soft);
  }
  .body-section ul.numbered li::before{
    content:counter(pick);
    position:absolute;left:0;top:0;
    width:28px;height:28px;
    background:var(--red);
    color:#fff;
    border-radius:50%;
    display:grid;place-items:center;
    font:700 13px/1 var(--mono);
  }
  .body-section ul.numbered b{color:var(--ink);font-weight:700}

  /* inline figure block (THINK SAFETY-style aside) */
  .inline-figure{
    margin:22px 0;
    border:1px solid var(--rule);
    background:var(--paper);
    overflow:hidden;
  }
  .inline-figure .fig-img{
    aspect-ratio:16/8;
    background:linear-gradient(135deg,#5a3d22 0%,#2c1c0d 100%);
    position:relative;
    display:grid;place-items:center;
    color:#f0d28a;
    font-family:var(--serif);
    font-size:42px;
    font-weight:700;
    letter-spacing:0.16em;
    text-shadow:0 2px 8px rgba(0,0,0,0.4);
  }
  .inline-figure .fig-img::after{
    content:"";
    position:absolute;inset:0;
    background:
      radial-gradient(60% 60% at 50% 50%, rgba(255,210,140,0.2), transparent 60%);
  }
  .inline-figure .fig-caption{
    padding:10px 14px;
    font:italic 13px/1.5 var(--serif);
    color:var(--muted);
    border-top:1px solid var(--rule);
    background:var(--paper-2);
  }

  /* ===== author bio ===== */
  .author-card{
    margin:48px 0 0;
    padding:24px;
    background:var(--paper);
    border:1px solid var(--rule);
    display:grid;
    grid-template-columns:80px 1fr;
    gap:20px;
    align-items:start;
  }
  .author-card .av{
    width:80px;height:80px;border-radius:50%;
    background:linear-gradient(135deg,#3d2210,#1d1108);
    color:#f0d28a;
    display:grid;place-items:center;
    font:700 22px var(--serif);
    letter-spacing:0.04em;
  }
  .author-card .ab-eye{
    font:700 11px var(--mono);
    letter-spacing:0.16em;
    text-transform:uppercase;
    color:var(--red);
    margin:0 0 6px;
  }
  .author-card h3{
    font-family:var(--serif);
    font-size:22px;font-weight:700;
    margin:0 0 8px;
    color:var(--ink);
  }
  .author-card p{
    font-size:14.5px;line-height:1.6;color:var(--ink-soft);
    margin:0;
  }
  .author-card .ab-links{
    margin:10px 0 0;
    display:flex;gap:14px;flex-wrap:wrap;
    font:600 12px var(--sans);
  }
  .author-card .ab-links a{color:var(--red)}

  /* ===== related articles row ===== */
  .related{
    margin:42px 0 0;
    padding:18px 0 0;
    border-top:3px solid var(--ink);
  }
  .related h2{
    font-family:var(--serif);
    font-weight:700;
    font-size:24px;
    line-height:1.2;
    margin:0 0 16px;
    color:var(--ink);
    letter-spacing:-0.005em;
  }
  .related-grid{
    display:grid;grid-template-columns:repeat(3,1fr);gap:18px;
  }
  .related-card{
    border:1px solid var(--rule);
    background:var(--paper);
    text-decoration:none;
    color:var(--ink);
    display:flex;flex-direction:column;
    transition:transform .15s ease, box-shadow .15s ease;
  }
  .related-card:hover{
    transform:translateY(-2px);
    box-shadow:0 6px 18px -6px rgba(20,17,13,0.18);
    text-decoration:none;
  }
  .related-card .img{
    aspect-ratio:5/3;
    background:linear-gradient(135deg,var(--c1),var(--c2));
    position:relative;display:flex;align-items:flex-end;padding:10px;
  }
  .related-card .img .cat{
    background:rgba(0,0,0,0.62);color:#fff;
    font:700 9px var(--mono);
    letter-spacing:0.16em;
    text-transform:uppercase;
    padding:3px 7px;
  }
  .related-card .body{padding:14px}
  .related-card .body h3{
    font-family:var(--serif);
    font-weight:700;
    font-size:16px;line-height:1.3;
    color:var(--ink);
    margin:0 0 6px;
    text-wrap:pretty;
  }
  .related-card .body .meta{
    font:11px var(--mono);
    color:var(--muted);
    letter-spacing:0.04em;
  }

  /* ===== 18+ disclaimer ===== */
  .disclaimer{
    margin:36px 0 0;
    border:2px solid var(--red);
    background:var(--red-tint);
    padding:20px;
    display:grid;grid-template-columns:56px 1fr;gap:16px;align-items:start;
  }
  .disclaimer .seal{
    width:56px;height:56px;
    border:2px solid var(--red);
    border-radius:50%;
    color:var(--red);
    background:#fff;
    display:grid;place-items:center;
    font:700 18px var(--serif);letter-spacing:-0.02em;
  }
  .disclaimer h3{
    font-family:var(--serif);
    font-size:18px;line-height:1.2;
    margin:0 0 6px;color:var(--red-deep);font-weight:700;
  }
  .disclaimer p{
    font-size:13px;line-height:1.55;color:var(--ink-soft);margin:0;
  }

  /* ===== ASIDE / sidebar ===== */
  .aside{
    display:flex;flex-direction:column;gap:18px;
    align-self:start;
    position:sticky;top:18px;
  }
  .panel{
    background:var(--paper);
    border:1px solid var(--rule);
  }
  .panel-head{
    background:var(--ink);color:#fff;
    padding:9px 14px;
    font:700 11px/1 var(--mono);
    letter-spacing:0.16em;
    text-transform:uppercase;
    display:flex;justify-content:space-between;align-items:center;
  }
  .panel-head.red{background:var(--red)}
  .panel-head .meta{color:#bdb29b;font-weight:600;font-size:10px}
  .panel-head.red .meta{color:rgba(255,255,255,0.85)}
  .panel-body{padding:6px 0}

  .top5-list{}
  .top5-row{
    display:grid;
    grid-template-columns:22px 36px 1fr auto;
    gap:10px;align-items:center;
    padding:9px 14px;
    border-bottom:1px solid var(--rule-soft);
    font:13px var(--sans);
    color:var(--ink-soft);
  }
  .top5-row:last-child{border-bottom:none}
  .top5-row .num{
    font:700 14px var(--serif);
    color:var(--red);
    font-variant-numeric:tabular-nums;
  }
  .top5-row .lg{
    width:36px;height:36px;
    background:#fff;border:1px solid var(--rule);
    padding:5px;border-radius:3px;
    display:grid;place-items:center;
  }
  .top5-row .lg img{max-width:100%;max-height:100%;object-fit:contain}
  .top5-row .nm{
    font-family:var(--serif);
    font-size:14px;
    font-weight:700;
    color:var(--ink);
    line-height:1.1;
    margin-bottom:2px;
  }
  .top5-row .sc{
    font:600 11px var(--mono);
    color:var(--muted);
    letter-spacing:0.04em;
  }
  .top5-row .sc b{color:var(--green);font-weight:700}
  .top5-row .go{
    color:var(--red);
    font:700 10px var(--mono);
    letter-spacing:0.12em;
    text-transform:uppercase;
    text-decoration:none;
  }
  .top5-row .go:hover{text-decoration:underline}

  /* editor's choice big card */
  .ec-img{
    aspect-ratio:4/3;
    position:relative;overflow:hidden;
    background:linear-gradient(135deg,var(--ec1),var(--ec2));
  }
  .ec-img::before{
    content:"";position:absolute;inset:0;
    background:
      radial-gradient(50% 50% at 70% 30%, rgba(255,255,255,0.25), transparent 60%),
      radial-gradient(80% 60% at 30% 110%, rgba(0,0,0,0.4), transparent 50%);
  }
  .ec-img .stamp{
    position:absolute;top:10px;left:10px;
    background:var(--red);color:#fff;
    font:700 9px var(--mono);
    letter-spacing:0.16em;text-transform:uppercase;
    padding:5px 10px;z-index:2;
  }
  .ec-img .lg-square{
    position:absolute;
    left:50%;top:50%;
    transform:translate(-50%,-50%);
    width:78px;height:78px;
    background:#fff;border-radius:8px;padding:12px;
    box-shadow:0 10px 24px -6px rgba(0,0,0,0.45);
    display:flex;align-items:center;justify-content:center;
  }
  .ec-img .lg-square img{max-width:100%;max-height:100%;object-fit:contain}
  .ec-body{padding:14px}
  .ec-body h3{
    font-family:var(--serif);font-size:18px;font-weight:700;
    margin:0 0 6px;color:var(--ink);
  }
  .ec-body .stars-row{
    display:flex;align-items:center;gap:8px;margin:0 0 8px;
  }
  .ec-body .stars-row .stars{display:flex;gap:1px;color:var(--gold)}
  .ec-body .stars-row svg{width:12px;height:12px}
  .ec-body .stars-row .sc{font:700 12px var(--mono);color:var(--ink)}
  .ec-body p{
    font-size:12.5px;line-height:1.5;color:var(--ink-soft);margin:0 0 12px;
  }
  .ec-body .visit-btn{display:flex;width:100%;padding:9px 12px;font-size:11px}

  /* most popular */
  .popular-row{
    display:grid;
    grid-template-columns:42px 1fr;
    gap:10px;align-items:center;
    padding:9px 14px;
    border-bottom:1px solid var(--rule-soft);
    text-decoration:none;
    color:inherit;
  }
  .popular-row:last-child{border-bottom:none}
  .popular-row:hover{background:var(--paper-2);text-decoration:none}
  .popular-row .th{
    width:42px;height:42px;
    background-color:var(--paper-2);
    background-size:cover;
    background-position:center;
    border:1px solid var(--rule);
    border-radius:4px;
    flex-shrink:0;
  }
  .popular-row h4{
    font-family:var(--serif);
    font-weight:700;font-size:13.5px;
    line-height:1.25;margin:0 0 2px;color:var(--ink);
    text-wrap:pretty;
  }
  .popular-row .meta{
    font:600 10px var(--mono);
    color:var(--muted);letter-spacing:0.06em;text-transform:uppercase;
  }

  /* sponsored box */
  .sponsored{
    border:1px solid var(--rule);
    background:var(--paper-2);
    padding:14px;
    text-align:center;
  }
  .sponsored .lbl{
    font:700 9px var(--mono);
    letter-spacing:0.18em;text-transform:uppercase;
    color:var(--muted);margin:0 0 8px;
  }
  .sponsored .box{
    aspect-ratio:300/250;
    background:repeating-linear-gradient(45deg, #f4ecd2 0 8px, #ece1be 8px 16px);
    border:1px dashed var(--rule);
    display:grid;place-items:center;
    font:600 13px var(--mono);
    color:var(--muted);
    letter-spacing:0.1em;
  }
  .sponsored small{
    color:var(--muted);font:10px var(--mono);
    display:block;margin:8px 0 0;
    letter-spacing:0.08em;text-transform:uppercase;
  }

  /* newsletter */
  .nl{padding:14px}
  .nl h3{
    font-family:var(--serif);font-weight:700;
    font-size:17px;color:var(--ink);
    margin:0 0 6px;
  }
  .nl p{font-size:12.5px;line-height:1.5;color:var(--ink-soft);margin:0 0 10px}
  .nl form{display:flex;gap:0;border:1px solid var(--rule);background:#fff}
  .nl input{
    flex:1;border:none;outline:none;
    padding:10px 12px;
    font:13px var(--sans);
    background:transparent;
  }
  .nl button{
    background:var(--red);color:#fff;
    padding:10px 18px;
    font:700 11px var(--sans);
    letter-spacing:0.1em;
    text-transform:uppercase;
    border-left:1px solid var(--red-deep);
  }
  .nl small{font:11px var(--sans);color:var(--muted);display:block;margin:8px 0 0}

  /* ===== footer ===== */
  footer{
    background:#0c0a08;color:#bdb29b;
    margin-top:50px;
    border-top:3px solid var(--red);
  }
  .ftop{
    max-width:var(--maxw);margin:0 auto;
    padding:40px 20px 28px;
    display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr;gap:28px;
  }
  .ftop h4{
    font:700 11px/1 var(--mono);
    letter-spacing:0.16em;text-transform:uppercase;
    color:#fff;margin:0 0 14px;
  }
  .ftop ul li{font-size:13px;margin-bottom:7px}
  .ftop ul li a{color:#bdb29b;text-decoration:none}
  .ftop ul li a:hover{color:var(--red)}
  .ftop .brand-col{display:flex;flex-direction:column;gap:12px}
  .ftop .brand-col .wm{
    font-family:var(--serif);font-size:28px;font-weight:700;color:#fff;
    letter-spacing:-0.01em;
  }
  .ftop .brand-col .wm .dot{
    display:inline-block;width:5px;height:5px;border-radius:50%;
    background:var(--red);margin:0 1px 4px 0;
  }
  .ftop .brand-col p{font-size:12.5px;line-height:1.55;margin:0;max-width:280px;color:#9b9281}
  .ftop .brand-col .est{
    font:700 10px var(--mono);letter-spacing:0.16em;color:var(--red);
  }
  .fbottom{
    border-top:1px solid #1d1a13;
    padding:14px 20px;max-width:var(--maxw);margin:0 auto;
    display:flex;justify-content:space-between;align-items:center;
    flex-wrap:wrap;gap:12px;
    font:11px/1.4 var(--sans);color:#76705f;
  }
  .fbottom .legal{display:flex;gap:14px;flex-wrap:wrap}
  .fbottom .legal a{color:#76705f;text-decoration:none;font-size:11px}
  .fbottom .legal a:hover{color:#fff}

  /* ===== responsive ===== */
  @media (max-width:1024px){
    .shell{grid-template-columns:1fr;gap:32px}
    .aside{position:static}
    .ftop{grid-template-columns:2fr 1fr 1fr;gap:22px}
  }
  @media (max-width:760px){
    .topcta-inner{flex-direction:column;gap:8px;padding:8px 16px;text-align:center}
    .topcta-inner span{font-size:11px}
    .nav{display:none}
    .mast-inner{padding:14px 16px}
    .wordmark{font-size:24px}
    .wordmark .tld{font-size:18px}
    .shell{padding:22px 16px 36px}
    h1.headline{font-size:30px}
    .listing{grid-template-columns:64px minmax(0,1fr)}
    .listing .rank-col{padding:12px 0;gap:10px}
    .listing .rank-num{width:36px;height:36px;font-size:18px}
    .listing .rank-logo{width:48px;height:48px;padding:6px}
    .listing .body-col{padding:14px 16px}
    .listing .listing-title{font-size:20px}
    .pros-cons{grid-template-columns:1fr;gap:14px}
    .visit-row{flex-direction:column;align-items:stretch}
    .visit-btn{width:100%}
    .related-grid{grid-template-columns:1fr}
    .author-card{grid-template-columns:1fr;text-align:left}
    .ftop{grid-template-columns:1fr 1fr;gap:22px}
    .ftop .brand-col{grid-column:1 / -1}
  }
  @media (max-width:460px){
    .listing{grid-template-columns:54px minmax(0,1fr)}
    .listing .rank-num{width:28px;height:28px;font-size:14px}
    .listing .rank-logo{width:42px;height:42px;padding:4px}
    .listing .rank-stars svg{width:9px;height:9px}
    .listing .rank-stars .score{font-size:10px}
  }

/* ====================================================================== */
/* ===== COMPARISON TABLES — responsive, editorial, broadsheet ========== */
/* ====================================================================== */

/* Wrapper provides horizontal scroll on small screens with a soft fade hint */
.compare-table-wrap{
  position:relative;
  margin:32px 0;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border:1px solid var(--rule);
  border-radius:6px;
  background:var(--paper);
  box-shadow:0 2px 0 rgba(26,24,20,0.04), 0 8px 24px rgba(26,24,20,0.06);
}
/* Right-edge fade hint when content overflows (mobile only) */
.compare-table-wrap::after{
  content:"";
  position:absolute;top:0;right:0;bottom:0;width:36px;
  background:linear-gradient(to right, rgba(255,255,255,0), var(--paper) 70%);
  pointer-events:none;opacity:0;
  transition:opacity .15s ease;
}
.compare-table-wrap.is-scrollable::after{opacity:1}

.compare-table{
  width:100%;
  border-collapse:collapse;
  font-family:var(--sans);
  font-size:14px;
  line-height:1.5;
  color:var(--ink);
  margin:0;
  min-width:600px; /* triggers wrapper scroll on narrow viewports */
}
.compare-table thead{
  background:linear-gradient(180deg, var(--paper-2) 0%, #f0e8d0 100%);
  border-bottom:2px solid var(--ink);
}
.compare-table thead th{
  padding:14px 16px;
  text-align:left;
  font-family:var(--sans);
  font-weight:700;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.10em;
  color:var(--ink);
  white-space:nowrap;
  vertical-align:bottom;
}
.compare-table thead th:not(:first-child){
  text-align:center;
}
.compare-table tbody td{
  padding:14px 16px;
  border-top:1px solid var(--rule-soft);
  vertical-align:middle;
  text-align:center;
}
/* First column = criterion label, left-aligned and quietly emphasized */
.compare-table tbody td:first-child{
  text-align:left;
  font-weight:600;
  color:var(--ink-soft);
  background:linear-gradient(90deg, var(--paper-2) 0%, transparent 100%);
  white-space:nowrap;
}
.compare-table tbody tr:nth-child(even) td{
  background-color:rgba(214,205,180,0.10);
}
.compare-table tbody tr:nth-child(even) td:first-child{
  background:linear-gradient(90deg, color-mix(in srgb, var(--paper-2) 70%, var(--rule-soft)) 0%, transparent 100%);
}
.compare-table tbody tr:hover td{
  background-color:rgba(187,31,36,0.04);
}
.compare-table tbody tr:hover td:first-child{
  background:linear-gradient(90deg, rgba(187,31,36,0.10) 0%, rgba(187,31,36,0.03) 100%);
  color:var(--ink);
}
/* "Winner" cell highlighting via <b> in cells */
.compare-table tbody td b{
  color:var(--red);
  font-weight:700;
}
/* Last row gets a stronger bottom border to "close" the table */
.compare-table tbody tr:last-child td{
  border-bottom:none;
}

/* Caption (optional, used for source/measurement notes) */
.compare-table caption{
  caption-side:bottom;
  padding:10px 16px;
  font-family:var(--sans);
  font-size:11px;
  color:var(--muted);
  text-align:left;
  font-style:italic;
}

/* === Mobile: keep table scrolling horizontally inside the wrapper === */
@media (max-width:680px){
  .compare-table{
    font-size:13px;
    min-width:560px;
  }
  .compare-table thead th{padding:12px 12px;font-size:10px;letter-spacing:.08em}
  .compare-table tbody td{padding:12px 12px}
  /* Sticky first column on mobile so the criterion label stays visible while scrolling */
  .compare-table tbody td:first-child,
  .compare-table thead th:first-child{
    position:sticky;
    left:0;
    z-index:1;
    box-shadow:1px 0 0 var(--rule-soft);
  }
  .compare-table tbody td:first-child{
    background:var(--paper);
  }
  .compare-table tbody tr:nth-child(even) td:first-child{
    background:color-mix(in srgb, var(--paper-2) 70%, var(--paper));
  }
  .compare-table thead th:first-child{
    background:linear-gradient(180deg, var(--paper-2) 0%, #f0e8d0 100%);
  }
}
@media (max-width:380px){
  .compare-table{font-size:12.5px}
  .compare-table thead th,
  .compare-table tbody td{padding:10px 10px}
}


/* ====================================================================== */
/* ===== AUTHOR AVATAR (image variant) ================================== */
/* ====================================================================== */

/* When a real photo is loaded as <picture class="av-pic"> instead of the
   text-initials .av block, mimic the same circular avatar shape. */
.av-pic{
  display:inline-block;
  flex-shrink:0;
  width:72px;
  height:72px;
  border-radius:50%;
  overflow:hidden;
  border:1px solid var(--rule);
  background:var(--paper-2);
}
.av-pic img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Small variant in inline byline (where applicable) */
.byline .av-pic,
.author .av-pic{
  width:28px;
  height:28px;
  vertical-align:-9px;
  margin-right:6px;
}

/* In the author-card the avatar is bigger on desktop */
.author-card .av-pic{
  width:96px;
  height:96px;
}
@media (max-width:680px){
  .author-card .av-pic{width:72px;height:72px}
}



/* ====================================================================== */
/* ===== PROS / CONS — fallback for simple <li>text</li> ================ */
/* ===== (only fires when <li> has NO explicit .ic span)              === */
/* ====================================================================== */
.pros-cons li:not(:has(.ic)){
  display:block;
  position:relative;
  padding-left:24px;
  font-size:14.5px;
  line-height:1.5;
  margin:0 0 8px;
  color:var(--ink-soft);
  grid-template-columns:none;  /* override grid that broke layout */
}
.pros-cons li:not(:has(.ic))::before{
  position:absolute; left:0; top:5px;
  width:16px; height:16px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  font:700 11px/1 var(--sans);
  color:#fff;
}
.pros-cons div:first-child li:not(:has(.ic))::before{ content:"+"; background:var(--green); }
.pros-cons div:last-child  li:not(:has(.ic))::before{ content:"−"; background:var(--red); }
.pros-cons h4{ margin-bottom:12px; font-size:16px; }

/* ====================================================================== */
/* ===== STICKY TOP-CTA on review pages ================================= */
/* ====================================================================== */
.sticky-cta{
  position:sticky;
  top:0;
  z-index:40;
  background:var(--ink);
  color:#fff;
  padding:10px 18px;
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  border-bottom:2px solid var(--red);
  box-shadow:0 2px 8px rgba(0,0,0,0.15);
  font-size:13px;
}
.sticky-cta__logo{ width:24px; height:24px; border-radius:4px; background:#fff; padding:2px; flex-shrink:0; }
.sticky-cta__name{ font-family:var(--serif); font-size:16px; font-weight:600; }
.sticky-cta__score{ font-family:var(--mono); font-size:12px; color:var(--gold); letter-spacing:.06em; padding:3px 8px; border:1px solid var(--gold); border-radius:2px; }
.sticky-cta__btn{
  margin-left:auto;
  display:inline-flex; align-items:center; gap:6px;
  background:var(--red); color:#fff;
  font:700 12px/1 var(--sans); letter-spacing:.16em; text-transform:uppercase;
  padding:10px 20px; border-radius:2px;
  text-decoration:none;
  transition:background .15s;
}
.sticky-cta__btn:hover{ background:var(--red-deep); text-decoration:none; color:#fff; }
@media (max-width:560px){
  .sticky-cta{ padding:8px 12px; gap:8px; font-size:12px; }
  .sticky-cta__name{ font-size:14px; }
  .sticky-cta__btn{ padding:8px 14px; font-size:11px; letter-spacing:.12em; }
}

/* ====================================================================== */
/* ===== HERO CTA — big above-fold button on review/article pages ======= */
/* ====================================================================== */
.hero-cta{
  margin:24px 0 32px;
  padding:24px 28px;
  background:linear-gradient(135deg, var(--paper-2) 0%, #f0e8d0 100%);
  border:2px solid var(--red);
  border-radius:6px;
  display:flex;
  align-items:center;
  gap:24px;
  flex-wrap:wrap;
}
.hero-cta__txt{ flex:1; min-width:200px; }
.hero-cta__head{ font-family:var(--serif); font-size:22px; line-height:1.2; margin:0 0 4px; color:var(--ink); }
.hero-cta__sub{ font-size:14px; color:var(--muted); margin:0; }
.hero-cta__btn{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--red); color:#fff;
  font:700 14px/1 var(--sans); letter-spacing:.14em; text-transform:uppercase;
  padding:16px 28px; border-radius:3px;
  text-decoration:none;
  transition:background .15s, transform .12s;
  border:1px solid var(--red-deep);
  white-space:nowrap;
}
.hero-cta__btn:hover{ background:var(--red-deep); text-decoration:none; color:#fff; transform:translateY(-1px); }
.hero-cta__note{ display:block; margin-top:6px; font-size:11px; color:var(--muted); letter-spacing:.04em; }

/* ====================================================================== */
/* ===== TABLE INLINE-CTA — small Visit button inside comparison cells == */
/* ====================================================================== */
.compare-table .tbl-cta{
  display:inline-block;
  background:var(--red); color:#fff;
  font:700 11px/1 var(--sans); letter-spacing:.10em; text-transform:uppercase;
  padding:7px 12px; border-radius:2px;
  text-decoration:none;
  white-space:nowrap;
  transition:background .15s;
}
.compare-table .tbl-cta:hover{ background:var(--red-deep); text-decoration:none; color:#fff; }
.compare-table td .review-link{
  display:block; margin-top:4px;
  font-size:11px; color:var(--muted);
  text-decoration:none;
}
.compare-table td .review-link:hover{ color:var(--red); text-decoration:underline; }