/* ============================================================
   Smoke & Sear — Stylesheet
   Palette: charcoal / cream / ember orange
   Type: Bebas Neue (display) + Inter (body)
   ============================================================ */

:root {
  /* Type scale */
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.85rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.6vw, 1.4rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
  --text-2xl: clamp(2rem, 1.4rem + 2.5vw, 3.5rem);
  --text-3xl: clamp(2.75rem, 1.2rem + 5vw, 5.5rem);
  --text-hero: clamp(3.25rem, 1rem + 9vw, 8.5rem);

  /* Spacing */
  --space-1: 0.25rem;  --space-2: 0.5rem;  --space-3: 0.75rem;
  --space-4: 1rem;     --space-5: 1.25rem; --space-6: 1.5rem;
  --space-8: 2rem;     --space-10: 2.5rem; --space-12: 3rem;
  --space-16: 4rem;    --space-20: 5rem;   --space-24: 6rem;
  --space-32: 8rem;

  /* Brand palette */
  --charcoal: #1a1a1a;
  --charcoal-2: #232323;
  --charcoal-3: #2e2c29;
  --cream: #faf6ee;
  --cream-2: #f1ebdd;
  --ember: #e85d2f;
  --ember-hover: #d24a1d;
  --ember-deep: #c43a1c;
  --smoke: #6b6b6b;
  --gold: #e8a83a;

  /* Semantic */
  --color-bg: var(--cream);
  --color-surface: #ffffff;
  --color-ink: #1f1d1a;
  --color-ink-muted: #5a554c;
  --color-line: #e3dccd;
  --color-success: #2f8a3e;
  --color-danger: #c0392b;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-full: 999px;

  --shadow-sm: 0 1px 3px rgba(26,26,26,.08);
  --shadow-md: 0 6px 20px rgba(26,26,26,.10);
  --shadow-lg: 0 18px 48px rgba(26,26,26,.18);

  --content-narrow: 720px;
  --content-default: 1040px;
  --content-wide: 1240px;

  --font-display: 'Bebas Neue', 'Arial Narrow', sans-serif;
  --font-body: 'Inter', -apple-system, system-ui, sans-serif;
  --transition: 200ms cubic-bezier(.16,1,.3,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;scroll-behavior:smooth;scroll-padding-top:84px}
body{min-height:100dvh;line-height:1.65;font-family:var(--font-body);font-size:var(--text-base);color:var(--color-ink);background:var(--color-bg)}
img,picture,svg,video{display:block;max-width:100%;height:auto}
ul[role=list]{list-style:none}
input,button,textarea,select{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{line-height:1.05;text-wrap:balance}
p,li{text-wrap:pretty}
button{cursor:pointer;background:none;border:none}
table{border-collapse:collapse;width:100%}
:focus-visible{outline:3px solid var(--ember);outline-offset:3px;border-radius:var(--radius-sm)}
::selection{background:rgba(232,93,47,.28)}
a,button{transition:color var(--transition),background var(--transition),border-color var(--transition),box-shadow var(--transition),transform var(--transition)}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- Display headings ---------- */
.display{font-family:var(--font-display);font-weight:400;letter-spacing:.5px;line-height:.95}

/* ---------- Layout helpers ---------- */
.wrap{width:100%;max-width:var(--content-wide);margin-inline:auto;padding-inline:var(--space-5)}
.wrap-default{max-width:var(--content-default)}
.wrap-narrow{max-width:var(--content-narrow)}
.section{padding-block:clamp(var(--space-12),7vw,var(--space-24))}
.bg-dark{background:var(--charcoal);color:var(--cream)}
.bg-dark h1,.bg-dark h2,.bg-dark h3{color:var(--cream)}
.eyebrow{font-family:var(--font-body);font-weight:700;text-transform:uppercase;letter-spacing:.18em;font-size:var(--text-xs);color:var(--ember)}
.lead{font-size:var(--text-lg);color:var(--color-ink-muted);max-width:60ch}
.bg-dark .lead{color:#cfc8ba}
.center{text-align:center}
.mx-auto{margin-inline:auto}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);font-weight:700;font-size:var(--text-sm);padding:var(--space-3) var(--space-6);border-radius:var(--radius-full);text-align:center;line-height:1.1}
.btn-cta{background:var(--ember);color:#fff;box-shadow:0 6px 18px rgba(232,93,47,.35)}
.btn-cta:hover{background:var(--ember-hover);transform:translateY(-2px);box-shadow:0 10px 26px rgba(232,93,47,.45)}
/* Amazon price buttons: lock every link state to strong, readable contrast. */
a.btn-cta[href*="amazon.com"],
a.btn-cta[href*="amazon.com"]:link,
a.btn-cta[href*="amazon.com"]:visited{
  background:#a6381c;
  color:#fffaf2;
  text-shadow:0 1px 1px rgba(0,0,0,.18);
}
a.btn-cta[href*="amazon.com"]:hover,
a.btn-cta[href*="amazon.com"]:focus-visible,
a.btn-cta[href*="amazon.com"]:active{
  background:#81270f;
  color:#fff;
}
a.btn-cta[href*="amazon.com"]:focus-visible{
  outline:3px solid #fffaf2;
  outline-offset:3px;
}
.btn-ghost{border:2px solid currentColor;color:var(--cream)}
.btn-ghost:hover{background:var(--cream);color:var(--charcoal)}
.btn-outline{border:2px solid var(--ember);color:var(--ember)}
.btn-outline:hover{background:var(--ember);color:#fff}
.btn-lg{padding:var(--space-4) var(--space-8);font-size:var(--text-base)}
.btn-block{display:flex;width:100%}

/* ---------- Header / Nav ---------- */
.site-header{position:sticky;top:0;z-index:50;background:rgba(26,26,26,.96);backdrop-filter:blur(8px);border-bottom:1px solid rgba(255,255,255,.08)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);padding-block:var(--space-3)}
.brand{display:flex;align-items:center;gap:var(--space-3);color:var(--cream)}
.brand .logo{width:38px;height:38px;flex:none}
.brand .name{font-family:var(--font-display);font-size:1.6rem;letter-spacing:1px;line-height:1}
.brand .name b{color:var(--ember);font-weight:400}
.nav-links{display:flex;align-items:center;gap:var(--space-6);list-style:none}
.nav-links a{color:#d9d3c8;font-weight:600;font-size:var(--text-sm)}
.nav-links a:hover{color:var(--ember)}
.nav-toggle{display:none;color:var(--cream)}
@media (max-width:860px){
  .nav-links{position:absolute;inset:64px 0 auto 0;flex-direction:column;background:var(--charcoal);padding:var(--space-5);gap:var(--space-4);border-bottom:1px solid rgba(255,255,255,.1);transform:translateY(-130%);transition:transform var(--transition);box-shadow:var(--shadow-lg)}
  .nav-links.open{transform:translateY(0)}
  .nav-toggle{display:block}
}

/* ---------- Hero ---------- */
.hero{position:relative;color:var(--cream);overflow:hidden;background:var(--charcoal)}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,20,20,.55) 0%,rgba(20,20,20,.45) 40%,rgba(20,20,20,.88) 100%)}
.hero-inner{position:relative;z-index:2;padding-block:clamp(var(--space-20),14vw,var(--space-32))}
.hero h1{font-family:var(--font-display);font-size:var(--text-hero);letter-spacing:1px;max-width:16ch}
.hero .lead{color:#e4ddd0}
.hero-cta{display:flex;flex-wrap:wrap;gap:var(--space-4);margin-top:var(--space-8)}

/* page hero (interior) — shorter */
.hero-interior .hero-inner{padding-block:clamp(var(--space-16),10vw,var(--space-24))}
.hero-interior h1{font-size:var(--text-2xl);max-width:20ch}

/* ---------- Breadcrumb ---------- */
.crumb{font-size:var(--text-xs);color:var(--color-ink-muted);padding-block:var(--space-4)}
.crumb a:hover{color:var(--ember)}
.crumb span{color:var(--ember);margin-inline:6px}
.bg-dark .crumb,.hero .crumb{color:#cabfae}
.hero .crumb a,.hero .crumb{color:#e7ddcd}

/* ---------- Badges ---------- */
.badge{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.08em;padding:5px 12px;border-radius:var(--radius-full)}
.badge-pick{background:var(--gold);color:#3a2c08}
.badge-deal{background:var(--ember-deep);color:#fff}
.badge-update{background:rgba(255,255,255,.12);color:#e7ddcd;border:1px solid rgba(255,255,255,.2)}
.badge-soft{background:#fff;border:1px solid var(--color-line);color:var(--color-ink-muted)}

/* ---------- Stars ---------- */
.stars{display:inline-flex;align-items:center;gap:4px}
.stars svg{width:18px;height:18px}
.score-pill{display:inline-flex;align-items:center;gap:6px;font-weight:800;background:var(--charcoal);color:var(--cream);border-radius:var(--radius-full);padding:4px 12px;font-size:var(--text-sm)}
.score-pill b{color:var(--gold);font-size:1.05em}

/* ---------- Category cards ---------- */
.grid{display:grid;gap:var(--space-6)}
.cards-5{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.cards-3{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.cat-card{display:flex;flex-direction:column;gap:var(--space-3);background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--radius-lg);padding:var(--space-6);text-align:center;align-items:center;box-shadow:var(--shadow-sm)}
.cat-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--ember)}
.cat-card .ico{width:64px;height:64px;color:var(--ember)}
.cat-card h3{font-family:var(--font-display);font-size:1.5rem;letter-spacing:.5px;color:var(--color-ink)}
.cat-card p{font-size:var(--text-sm);color:#4a453c}

/* ---------- Comparison table ---------- */
.table-wrap{overflow-x:auto;border:1px solid var(--color-line);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);background:#fff}
table.compare{min-width:680px;font-size:var(--text-sm)}
table.compare th,table.compare td{padding:var(--space-4);text-align:left;border-bottom:1px solid var(--color-line);vertical-align:middle}
table.compare thead th{background:var(--charcoal);color:var(--cream);font-family:var(--font-display);letter-spacing:.5px;font-size:1.05rem;font-weight:400;border-bottom:none}
table.compare tbody tr:last-child td{border-bottom:none}
table.compare tbody tr:hover{background:var(--cream)}
table.compare .rank{font-family:var(--font-display);font-size:1.4rem;color:var(--ember)}
table.compare .prod{font-weight:700;color:var(--color-ink)}
table.compare .prod small{display:block;font-weight:500;color:var(--color-ink-muted);font-size:var(--text-xs)}
table.compare td .btn{padding:8px 16px;white-space:nowrap}
.pick-row{background:#fff8ec!important}

/* ---------- Product block ---------- */
.product{display:grid;grid-template-columns:280px 1fr;gap:var(--space-8);background:#fff;border:1px solid var(--color-line);border-radius:var(--radius-lg);padding:var(--space-6);box-shadow:var(--shadow-sm);scroll-margin-top:90px}
.product+.product{margin-top:var(--space-8)}
.product.is-pick{border:2px solid var(--gold);box-shadow:0 10px 30px rgba(232,168,58,.2)}
.product-media{display:flex;flex-direction:column;gap:var(--space-4)}
.prod-img{width:100%;aspect-ratio:1;border-radius:var(--radius-md);border:1px solid var(--color-line);background:var(--cream-2)}
.product-body h3{font-family:var(--font-display);font-size:clamp(1.6rem,1rem+2vw,2.2rem);letter-spacing:.5px;line-height:1}
.product-head{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3);margin-bottom:var(--space-2)}
.rank-num{font-family:var(--font-display);font-size:2rem;color:var(--ember);line-height:.8}
.meta-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-4);margin:var(--space-3) 0}
.proscons{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-5);margin:var(--space-5) 0}
.proscons h4{font-size:var(--text-sm);text-transform:uppercase;letter-spacing:.08em;margin-bottom:var(--space-2)}
.proscons ul{list-style:none;display:flex;flex-direction:column;gap:6px}
.proscons li{display:flex;gap:8px;font-size:var(--text-sm);align-items:flex-start}
.proscons li svg{width:18px;height:18px;flex:none;margin-top:2px}
.pros li svg{color:var(--color-success)}
.cons li svg{color:var(--color-danger)}
.spec-line{font-size:var(--text-sm);color:var(--color-ink-muted);border-top:1px dashed var(--color-line);padding-top:var(--space-3);margin-top:var(--space-2)}
.spec-line b{color:var(--color-ink)}
.cta-row{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-5)}

/* ---------- Sticky editor pick ---------- */
.review-layout{display:grid;grid-template-columns:1fr 320px;gap:var(--space-8);align-items:start}
.sticky-pick{position:sticky;top:90px;background:var(--charcoal);color:var(--cream);border-radius:var(--radius-lg);padding:var(--space-6);box-shadow:var(--shadow-lg);border-top:5px solid var(--gold)}
.sticky-pick .badge{margin-bottom:var(--space-3)}
.sticky-pick h3{font-family:var(--font-display);font-size:1.7rem;letter-spacing:.5px;color:#fff}
.sticky-pick .pick-img{width:100%;aspect-ratio:4/3;border-radius:var(--radius-md);margin:var(--space-3) 0;background:#111}
.sticky-pick p{font-size:var(--text-sm);color:#cfc8ba;margin-bottom:var(--space-4)}
.sticky-pick .why{font-size:var(--text-xs);color:#cfc8ba;margin-top:var(--space-3);line-height:1.5}
@media (max-width:960px){
  .review-layout{grid-template-columns:1fr}
  .sticky-pick{position:static;order:-1}
}

/* ---------- Article / guide prose ---------- */
.prose{max-width:72ch}
.prose h2{font-family:var(--font-display);font-size:var(--text-xl);letter-spacing:.5px;margin-top:var(--space-10);margin-bottom:var(--space-4)}
.prose h3{font-size:var(--text-lg);font-weight:800;margin-top:var(--space-8);margin-bottom:var(--space-3)}
.prose p{margin-bottom:var(--space-4)}
.prose ul,.prose ol{margin:0 0 var(--space-4) var(--space-6);display:flex;flex-direction:column;gap:6px}
.prose a{color:var(--ember-deep);text-decoration:underline;text-underline-offset:3px;font-weight:600}
.prose a:hover{color:var(--ember)}
.callout{background:#fff;border-left:4px solid var(--ember);border-radius:var(--radius-md);padding:var(--space-5);box-shadow:var(--shadow-sm);margin:var(--space-6) 0}
.callout h4{font-size:var(--text-base);margin-bottom:var(--space-2)}
.aff-card{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-4);background:var(--charcoal);color:var(--cream);border-radius:var(--radius-lg);padding:var(--space-5) var(--space-6);margin:var(--space-6) 0}
.aff-card .ac-txt b{font-family:var(--font-display);font-size:1.3rem;letter-spacing:.5px;display:block}
.aff-card .ac-txt span{font-size:var(--text-sm);color:#cfc8ba}

/* ---------- Temp chart table ---------- */
.temp-table th,.temp-table td{padding:var(--space-3) var(--space-4);text-align:left;border-bottom:1px solid var(--color-line);font-size:var(--text-sm)}
.temp-table thead th{background:var(--ember);color:#fff}
.temp-table tbody tr:nth-child(even){background:var(--cream-2)}

/* ---------- Author byline ---------- */
.byline{display:flex;align-items:center;gap:var(--space-3);font-size:var(--text-sm);color:var(--color-ink-muted);flex-wrap:wrap}
.byline .av{width:40px;height:40px;border-radius:50%;background:var(--ember);color:#fff;display:grid;place-items:center;font-family:var(--font-display);font-size:1.2rem;flex:none}

/* ---------- Email capture ---------- */
.capture{background:var(--charcoal-3);color:var(--cream);border-radius:var(--radius-lg);padding:clamp(var(--space-8),5vw,var(--space-16));text-align:center;position:relative;overflow:hidden}
.capture h2{font-family:var(--font-display);font-size:var(--text-2xl);letter-spacing:.5px}
.capture form{display:flex;flex-wrap:wrap;gap:var(--space-3);justify-content:center;margin-top:var(--space-6);max-width:520px;margin-inline:auto}
.capture input[type=email]{flex:1;min-width:220px;padding:var(--space-4) var(--space-5);border-radius:var(--radius-full);border:2px solid transparent;background:#fff;color:#222}
.capture input:focus-visible{outline:3px solid var(--gold)}
.capture .note{font-size:var(--text-xs);color:#b8b0a2;margin-top:var(--space-4)}
.capture .thanks{display:none;font-size:var(--text-lg);font-weight:700;color:var(--gold);margin-top:var(--space-6)}
.capture.done form{display:none}
.capture.done .thanks{display:block}

/* ---------- Guide preview cards ---------- */
.guide-card{background:#fff;border:1px solid var(--color-line);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);display:flex;flex-direction:column}
.guide-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.guide-card .gc-img{aspect-ratio:16/10;object-fit:cover;width:100%}
.guide-card .gc-body{padding:var(--space-5);display:flex;flex-direction:column;gap:var(--space-2);flex:1}
.guide-card h3{font-family:var(--font-display);font-size:1.5rem;letter-spacing:.5px}
.guide-card p{font-size:var(--text-sm);color:var(--color-ink-muted);flex:1}
.guide-card .gc-link{color:var(--ember-deep);font-weight:700;font-size:var(--text-sm)}

/* ---------- Disclosure strip ---------- */
.disc-strip{background:var(--cream-2);border:1px solid var(--color-line);border-radius:var(--radius-md);padding:var(--space-3) var(--space-4);font-size:var(--text-xs);line-height:1.55;color:var(--color-ink-muted)}
.disc-strip b{color:var(--color-ink)}

/* ---------- Footer ---------- */
.site-footer{background:var(--charcoal);color:#cfc8ba;padding-block:var(--space-16) var(--space-8)}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:var(--space-8)}
.site-footer h4{font-family:var(--font-display);color:var(--cream);font-size:1.3rem;letter-spacing:.5px;margin-bottom:var(--space-4)}
.site-footer ul{list-style:none;display:flex;flex-direction:column;gap:var(--space-2)}
.site-footer a:hover{color:var(--ember)}
.footer-disc{margin-top:var(--space-10);padding-top:var(--space-6);border-top:1px solid rgba(255,255,255,.1);font-size:.72rem;color:#9a948a;line-height:1.55;letter-spacing:.01em}
.footer-disc b{color:var(--cream)}
.footer-last-updated{margin-top:var(--space-4);font-size:.7rem;color:#7a7468;letter-spacing:.02em;opacity:.85}
.footer-bottom{margin-top:var(--space-6);font-size:var(--text-xs);color:#8a847a;display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--space-3)}
@media (max-width:760px){.footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.footer-grid{grid-template-columns:1fr}}

/* ---------- Section heading ---------- */
.sec-head{margin-bottom:var(--space-10)}
.sec-head h2{font-family:var(--font-display);font-size:var(--text-2xl);letter-spacing:.5px;margin-top:var(--space-2)}
.sec-head p{margin-top:var(--space-3);color:var(--color-ink-muted);max-width:60ch}
.bg-dark .sec-head p{color:#cfc8ba}

/* ---------- Product block responsive ---------- */
@media (max-width:680px){
  .product{grid-template-columns:1fr}
  .proscons{grid-template-columns:1fr}
  .prod-img{max-width:240px;margin-inline:auto}
}

/* ---------- misc ---------- */
.divider{height:1px;background:var(--color-line);border:0;margin-block:var(--space-12)}
.tag{display:inline-block;font-size:var(--text-xs);font-weight:700;color:var(--ember);text-transform:uppercase;letter-spacing:.1em}
.mt-6{margin-top:var(--space-6)}.mt-8{margin-top:var(--space-8)}.mt-10{margin-top:var(--space-10)}
.mb-6{margin-bottom:var(--space-6)}

/* Quick-answer Editor's Pick box */
.top-pick-box{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.75rem;background:var(--charcoal);color:var(--cream);border-left:5px solid var(--gold);border-radius:var(--radius-lg);padding:1.35rem 1.6rem;margin:0 0 2.25rem;box-shadow:var(--shadow-md)}
.top-pick-box .tp-txt{flex:1 1 32ch;min-width:0}
.top-pick-box .tp-label{display:block;font-size:var(--text-xs);font-weight:800;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-bottom:.3rem}
.top-pick-box .tp-name{font-family:var(--font-display);font-size:1.6rem;letter-spacing:.4px;line-height:1.05;margin:0 0 .25rem;color:var(--cream)}
.top-pick-box .tp-why{margin:0;font-size:var(--text-sm);color:#cfc8ba;line-height:1.55}
.top-pick-box .tp-why a{color:var(--gold);text-decoration:underline}
.top-pick-box .tp-cta{display:flex;flex-direction:column;align-items:stretch;gap:.4rem;flex:0 0 auto}
.top-pick-box .tp-score{align-self:center;font-size:var(--text-xs);font-weight:700;color:var(--gold)}
@media(max-width:640px){.top-pick-box{padding:1.1rem 1.15rem}.top-pick-box .tp-cta{width:100%}}