/* ==========================================================================
   Magazine review skin — loaded AFTER style.css and overrides it.
   Direction: serious print-magazine review. Serif headlines + body, small-caps
   sans labels, square corners, no shadows, hairline/heavy rules instead of
   floating cards, ink + paper palette with one editorial red accent.
   Remove the <link> to this file to get the original look back.
   ========================================================================== */

:root {
  /* warm paper + soft ink: easier on the eyes for long reads */
  --ink: #1f2328;
  --ink-soft: #33383f;
  --ink-faint: #5f6670;
  --paper: #faf7f0;
  --paper-2: #f1ece1;
  --white: #fffdf8;
  --rule: #d9d2c3;
  --rule-soft: #e8e2d5;
  --rule-heavy: #2a3440;

  --brand: #1f3a5f;             /* deep navy: labels, top-pick marker */
  --brand-bright: #1f3a5f;
  --accent: #1f3a5f;
  --pos: #1e7a3c;               /* clear green = good */
  --pos-soft: #e6f2e9;
  --neg: #b42318;               /* clear red = bad */
  --neg-soft: #fbe9e7;
  --star: #e0a100;              /* familiar gold stars */
  --cta: #1e7a3c;
  --cta-hover: #155c2c;

  --link: #1f3a5f;
  --link-hover: #1e7a3c;

  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
  --radius: 0;
  --radius-sm: 0;

  --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-sans: "Libre Franklin", "Helvetica Neue", Arial, sans-serif;
  --font-ui: var(--font-serif);
}

/* ── Base ─────────────────────────────────────────────────────────────── */
html { font-size: 19.5px; }

body {
  background: var(--paper);
  background-image: none;
  font-family: var(--font-serif);
  color: var(--ink);
  line-height: 1.65;
}

h1, h2, h3, h4 { font-family: var(--font-serif); }

a { text-decoration: none; }
a:hover { color: var(--link-hover); }
::selection { background: rgba(31, 58, 95, 0.15); }

/* small-caps sans label used across the page */
.kicker,
.meta-label,
.section-label,
.pros-label,
.cons-label,
.performance-name,
.performance-percent,
.masthead-nav,
.rankings-header h2,
.method-phase,
.criteria dt,
.cta-button,
.footer-link {
  font-family: var(--font-sans);
}

/* ── Masthead ─────────────────────────────────────────────────────────── */
.masthead {
  background: var(--paper);
  backdrop-filter: none;
  box-shadow: none;
  border-bottom: 1px solid var(--rule-heavy);
}
.masthead::after {               /* classic double rule under the nameplate */
  content: "";
  display: block;
  height: 3px;
  border-bottom: 1px solid var(--rule-heavy);
}
.masthead-nav {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--ink);
}
.masthead-nav a { color: var(--ink); }
.masthead-nav a:hover { color: var(--accent); }

/* ── Lead / headline ──────────────────────────────────────────────────── */
.article { padding-top: 40px; }

.kicker {
  display: block;
  background: none;
  border-radius: 0;
  padding: 0 0 10px;
  margin-bottom: 18px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--accent);
  border-bottom: 1px solid var(--rule);
}

.lead h1 {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(2rem, 4.6vw, 2.9rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin-bottom: 28px;
}

.hero-figure { max-width: none; margin-bottom: 30px; }
.hero-figure img {
  border-radius: 0;
  box-shadow: none;
  width: 100%;
}
.hero-figure figcaption {
  text-align: left;
  font-style: italic;
  font-size: 14px;
  color: var(--ink-faint);
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--rule);
}

.intro p,
.product-description,
.wrap-up p {
  font-family: var(--font-serif);
  font-size: 1.06rem;
  line-height: 1.75;
  color: var(--ink-soft);
}
.intro p:first-child,
.product-body .product-description:first-of-type {
  font-size: 1.14rem;
  font-weight: 400;
  color: var(--ink);
}
.intro p:first-child::first-letter {          /* drop cap */
  float: left;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 3.4em;
  line-height: 0.85;
  margin: 0.06em 0.08em 0 0;
  color: var(--ink);
}

/* criteria: heavy rule above, hairline below */
.criteria {
  border-top: 3px solid var(--rule-heavy);
  border-bottom: 1px solid var(--rule-heavy);
  padding: 22px 0;
}
.criteria dt {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.criteria dd { font-size: 0.98rem; }

.lead-outro {
  font-family: var(--font-serif);
  font-weight: 600;
  font-style: italic;
  font-size: 1.2rem;
}

/* byline */
.author-photo {
  border-radius: 50%;
  filter: none;
  width: 96px;
  height: 96px;
}
.author-name {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
}
.author-text {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1rem;
  color: var(--ink-soft);
}

/* ── Rankings header ──────────────────────────────────────────────────── */
.rankings-header {
  text-align: left;
  padding: 48px 0 0;
  border-bottom: 3px solid var(--rule-heavy);
  margin-bottom: 0;
}
.rankings-header h2 {
  font-family: var(--font-serif);
  font-size: 1.9rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--ink);
  border-bottom: none;
  padding-bottom: 10px;
}

/* ── Product entries: ruled sections, not floating cards ──────────────── */
.product-card,
.product-card--top {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--rule-heavy);
  border-radius: 0;
  box-shadow: none;
  transition: none;
  margin-top: 0;
  padding: 34px 0 30px;
}
.product-card:hover { transform: none; box-shadow: none; }

.product-card--top {
  position: relative;
  overflow: visible;
  border-top: 4px solid var(--brand);
  background: var(--white);
  padding-left: 22px;
  padding-right: 22px;
}
.product-card--top::before {
  content: "Editor’s Choice";
  position: static;
  transform: none;
  display: inline-block;
  align-self: center;
  margin-bottom: 14px;
  padding: 6px 14px;
  background: var(--brand);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  box-shadow: none;
}

.product-header {
  border-bottom: none;
  padding-bottom: 6px;
}
.product-name {
  font-family: var(--font-serif);
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.product-name a { color: var(--ink); }
.product-name a:hover { color: var(--accent); }

/* image | grade | rating as a ruled three-column table */
.product-meta {
  gap: 0;
  margin-top: 18px;
  border-top: 1px solid var(--rule-heavy);
  border-bottom: 1px solid var(--rule-heavy);
}
.product-meta-item {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 18px 14px;
}
.product-meta-item + .product-meta-item { border-left: 1px solid var(--rule); }
.product-meta-item--image { background: transparent; }

.meta-label {
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--ink-faint);
}
.meta-grade {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 54px;
  color: var(--ink);
  letter-spacing: 0;
}
.meta-rating {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 28px;
  color: var(--ink);
}
.rating-stars {
  --star-size: 20px;
  --star-fill: var(--star);
  --star-empty: #d6cfbf;
}

.section-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--accent);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--rule);
}

/* pros / cons: plain typographic marks, no coloured bubbles */
.pros-label,
.cons-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.pros-label { color: var(--pos); }
.cons-label { color: var(--neg); }
.pros-label::before,
.cons-label::before { display: none; }

.pros-list,
.cons-list {
  font-family: var(--font-serif);
  font-size: 1.02rem;
  color: var(--ink);
}
.pros-item,
.cons-item { padding-left: 22px; }
.pros-item::before,
.cons-item::before {
  background: none !important;
  border-radius: 0;
  width: auto;
  height: auto;
  top: 0;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.5;
}
.pros-item::before { content: "✓"; color: var(--pos); font-size: 18px; }
.cons-item::before { content: "✗"; color: var(--neg); font-size: 18px; }

/* performance: thin flat ink bars */
.product-action-row { border-top: 1px solid var(--rule); }
.performance-name {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}
.bar {
  height: 8px;
  border-radius: 0;
  background-color: var(--rule-soft);
}
.performance-progress {
  background: var(--pos);
  border-radius: 0;
}
.performance-percent {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}

/* CTA: black, square, small caps */
.cta-button,
.product-action-row .cta-button {
  background: var(--cta);
  border: 1px solid var(--cta);
  border-radius: 0;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.14em;
  padding: 17px 24px;
}
.cta-button:hover {
  background: var(--cta-hover);
  border-color: var(--cta-hover);
  color: #fff;
}

/* wrap-up: verdict box with a heavy left rule */
.product-card--top .wrap-up {
  background: var(--pos-soft);
  border: none;
  border-left: 4px solid var(--pos);
  border-radius: 0;
  padding: 18px 22px;
}
.wrap-up .section-label { color: var(--pos); border-bottom: none; padding-bottom: 0; }

/* ── Buying guide + How We Tested ─────────────────────────────────────── */
.buying-guide {
  border-top: 3px solid var(--rule-heavy);
  margin-top: 56px;
}
.guide-panel { border-bottom: 1px solid var(--rule-heavy); }
.guide-panel__title {
  font-family: var(--font-serif);
  font-size: 1.55rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.guide-benefits li,
.guide-tips p,
.guide-tips strong,
.guide-avoid p,
.guide-avoid strong { font-family: var(--font-serif); }
.guide-benefits li { font-weight: 400; }
.guide-benefits li::before {
  background-image: none;
  content: "✓";
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 18px;
  color: var(--pos);
  width: auto;
  height: auto;
  top: 15px;
}
.guide-tips li::before {
  font-family: var(--font-serif);
  font-size: 28px;
  font-weight: 700;
  color: var(--accent);
}
.guide-avoid li { border-left: 4px solid var(--neg); background: var(--neg-soft); padding-right: 14px; }

.method-intro { font-style: italic; }
.method-step::before {
  border-radius: 0;
  background: none;
  color: var(--accent);
  font-family: var(--font-serif);
  font-size: 28px;
  font-weight: 700;
  justify-content: flex-start;
  align-items: flex-start;
  line-height: 1;
}
.method-step:not(:last-child)::after { background: var(--rule); left: 6px; top: 38px; width: 1px; }
.method-phase {
  background: none;
  border-radius: 0;
  padding: 0;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--ink-faint);
}
.method-step-title { font-family: var(--font-serif); font-size: 1.08rem; }
.method-step p { font-family: var(--font-serif); }

/* ── Footer ───────────────────────────────────────────────────────────── */
.site-footer { background: var(--ink); }

/* ── Mobile ───────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  html { font-size: 18px; }
  .product-card--top { padding-left: 14px; padding-right: 14px; }
  .lead h1 { font-size: 1.9rem; line-height: 1.2; }
  .product-card, .product-card--top { padding: 28px 0 24px; }
  .product-name { font-size: 1.7rem; }
  .product-meta { border-bottom: none; }
  .product-meta-item + .product-meta-item { border-left: none; border-top: 1px solid var(--rule); }
  .product-meta-item:last-child { border-bottom: 1px solid var(--rule-heavy); }
  .meta-grade { font-size: 46px; }
  .rankings-header h2 { font-size: 1.6rem; }
  .method-step:not(:last-child)::after { left: 6px; top: 34px; }
}