/* top50.css — Top 50 editorial design system: tokens, market modifiers, all components */
/* Google Fonts used: Playfair Display (700, 900) + Inter (400, 500, 600)
   Add before this <link> in every <head>:
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;900&family=Inter:wght@400;500;600&display=swap">
*/

/* ─── DESIGN TOKENS ──────────────────────────────────────────── */

:root {
  /* Surface */
  --paper:       #fafaf8;
  --paper-mid:   #f2f1ee;
  --ink:         #0d0d0b;
  --ink-2:       #4b4845;
  --ink-3:       #918e8a;
  --rule:        #dedad4;
  --rule-2:      #c8c4be;

  /* Accent — overridden per market */
  --accent:      #0b3d24;   /* default / UK fallback */
  --accent-pale: #e4ede8;

  /* Type */
  --serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --sans:  'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

  /* Scale */
  --t-xs:  0.6875rem;   /* 11px */
  --t-sm:  0.8125rem;   /* 13px */
  --t-md:  1rem;        /* 16px */
  --t-lg:  1.125rem;    /* 18px */
  --t-xl:  1.375rem;    /* 22px */
  --t-2xl: 1.75rem;     /* 28px */
  --t-3xl: 2.25rem;     /* 36px */

  /* Space */
  --s1: .25rem;  --s2: .5rem;   --s3: .75rem;
  --s4: 1rem;    --s5: 1.25rem; --s6: 1.5rem;
  --s8: 2rem;    --s10: 2.5rem; --s12: 3rem;
  --s16: 4rem;   --s20: 5rem;   --s24: 6rem;

  /* Layout */
  --wrap: 1200px;
  --r:    3px;
}

/* ─── MARKET MODIFIERS ───────────────────────────────────────── */

body.market-uk {
  --accent:      #0b3d24;   /* British racing green */
  --accent-pale: #e4ede8;
}

body.market-us {
  --accent:      #9b1c31;   /* American crimson */
  --accent-pale: #f5e8eb;
}

/* ─── RESET ──────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  font-size: var(--t-md);
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a   { color: inherit; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--r);
}

.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;
}

/* ─── HEADER ─────────────────────────────────────────────────── */

.site-header {
  position: sticky; top: 0; z-index: 200;
  background: var(--paper);
  border-bottom: 1px solid var(--rule-2);
}

.header-bar {
  display: flex; align-items: center; gap: var(--s3);
  max-width: var(--wrap); margin: 0 auto;
  padding: var(--s4) var(--s6);
}

.wordmark {
  font-family: var(--serif);
  font-size: var(--t-2xl);
  font-weight: 900;
  letter-spacing: -.04em;
  line-height: 1;
  text-decoration: none;
  color: var(--ink);
}
.wordmark__num { color: var(--accent); }

.market-tag {
  font-size: var(--t-xs); font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent); border: 1px solid currentColor;
  border-radius: var(--r); padding: 2px 6px; line-height: 1.4;
  flex-shrink: 0;
}

/* Category nav */
.cat-nav {
  border-top: 1px solid var(--rule);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.cat-nav::-webkit-scrollbar { display: none; }

.cat-nav__list {
  display: flex; list-style: none;
  max-width: var(--wrap); margin: 0 auto;
  padding: 0 var(--s6); white-space: nowrap;
}

.cat-nav__link {
  display: inline-block;
  padding: var(--s3) var(--s4);
  font-size: var(--t-sm); font-weight: 500;
  color: var(--ink-2); text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
}
.cat-nav__link:hover,
[aria-current="page"] .cat-nav__link {
  color: var(--ink);
  border-bottom-color: var(--accent);
}

/* ─── CATEGORY HERO ──────────────────────────────────────────── */

.cat-hero {
  max-width: var(--wrap); margin: 0 auto;
  padding: var(--s12) var(--s6) var(--s10);
  border-bottom: 1px solid var(--rule);
}

.cat-hero__label {
  display: block;
  font-size: var(--t-xs); font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent); margin-bottom: var(--s4);
}

.cat-hero__title {
  font-family: var(--serif);
  font-size: clamp(2.25rem, 6vw, 4.5rem);
  font-weight: 900; line-height: 1.03; letter-spacing: -.03em;
  margin-bottom: var(--s5);
}

.cat-hero__dek {
  font-size: var(--t-lg); color: var(--ink-2);
  line-height: 1.5; max-width: 54ch; margin-bottom: var(--s5);
}

.cat-hero__meta {
  display: flex; align-items: center; gap: var(--s3);
  font-size: var(--t-sm); color: var(--ink-3);
}
.cat-hero__sep {
  display: inline-block; width: 1px; height: 1em;
  background: var(--rule-2);
}

/* ─── RANKED LIST ────────────────────────────────────────────── */

.ranked-list {
  max-width: var(--wrap); margin: 0 auto;
  padding: 0 var(--s6); list-style: none;
}

/* Full row — 4-column grid: rank | image | body | cta */
.row {
  display: grid;
  grid-template-columns: 3.5rem 7rem minmax(0, 1fr) auto;
  column-gap: var(--s6);
  align-items: center;
  padding: var(--s8) 0;
  border-bottom: 1px solid var(--rule);
}

/* Keep the body column from stretching the price/CTA to the far edge of a wide
   viewport — an editorial list reads tight, not sparse. */
.ranked-list { max-width: 74rem; }
.row__body { max-width: 46rem; }
.row:first-child { border-top: 1px solid var(--rule); }

.row__rank {
  font-family: var(--serif);
  font-size: 2.5rem; font-weight: 900;
  line-height: 1; letter-spacing: -.05em;
  color: var(--accent);
  align-self: center; user-select: none;
}

.row__img {
  width: 7rem; height: 7rem; flex-shrink: 0;
  border: 1px solid var(--rule); border-radius: var(--r);
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.row__img img {
  width: 100%; height: 100%;
  object-fit: contain; padding: var(--s2);
}

.row__body { min-width: 0; }

.row__title {
  font-size: var(--t-lg); font-weight: 600; line-height: 1.35;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin-bottom: var(--s2);
}

.row__rating {
  display: flex; align-items: center; gap: var(--s2);
  font-size: var(--t-sm); color: var(--ink-2);
  margin-bottom: var(--s2);
}
.row__stars { color: #b87c00; letter-spacing: .03em; }

.row__excerpt {
  font-size: var(--t-sm); color: var(--ink-2); line-height: 1.55;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.row__cta {
  display: flex; flex-direction: column;
  align-items: flex-end; gap: var(--s3);
  flex-shrink: 0;
}

.price {
  font-size: var(--t-xl); font-weight: 700;
  line-height: 1; white-space: nowrap;
}
.price--hidden {
  font-size: var(--t-xs); font-weight: 400;
  color: var(--ink-3); text-align: right;
}

.btn-amazon {
  display: inline-block;
  background: var(--accent); color: #fff;
  font-family: var(--sans); font-size: var(--t-xs);
  font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  text-decoration: none;
  padding: var(--s2) var(--s5); border-radius: var(--r);
  white-space: nowrap; transition: opacity .15s;
}
.btn-amazon:hover { opacity: .84; }

/* ── Compact list variant ── */
.row--compact {
  grid-template-columns: 2.75rem 4rem 1fr auto;
  column-gap: var(--s4);
  padding: var(--s4) 0;
}
.row--compact .row__rank    { font-size: 1.5rem; }
.row--compact .row__img     { width: 4rem; height: 4rem; }
.row--compact .row__title   { font-size: var(--t-md); -webkit-line-clamp: 1; }
.row--compact .row__excerpt { display: none; }
.row--compact .row__rating  { margin-bottom: 0; }

/* ── Mobile: stack CTA below content ── */
@media (max-width: 600px) {
  .row {
    grid-template-columns: 2.75rem 5rem 1fr;
    grid-template-rows: auto auto;
    column-gap: var(--s4);
  }
  .row__rank { font-size: 2rem; }
  .row__img  { width: 5rem; height: 5rem; }
  .row__cta  {
    grid-column: 1 / -1;
    flex-direction: row; justify-content: space-between; align-items: center;
    padding-top: var(--s3); margin-top: var(--s3);
    border-top: 1px solid var(--rule);
  }
}

/* ─── HOMEPAGE HERO ──────────────────────────────────────────── */

.home-hero {
  background: var(--ink); color: #fff;
  padding: var(--s24) var(--s6); text-align: center;
}

.home-hero__eyebrow {
  display: block;
  font-size: var(--t-xs); font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--accent-pale); margin-bottom: var(--s6);
}

.home-hero__headline {
  font-family: var(--serif);
  font-size: clamp(2.75rem, 9vw, 6.5rem);
  font-weight: 900; line-height: 1; letter-spacing: -.04em;
  max-width: 16ch; margin: 0 auto var(--s6);
}
.home-hero__headline em { color: var(--accent-pale); font-style: normal; }

.home-hero__sub {
  font-size: var(--t-lg); color: #aeaaa4;
  max-width: 44ch; margin: 0 auto; line-height: 1.55;
}

/* ─── CATEGORY GRID ──────────────────────────────────────────── */

.cat-grid-wrap {
  max-width: var(--wrap); margin: 0 auto;
  padding: var(--s16) var(--s6);
}

.section-eyebrow {
  display: block;
  font-size: var(--t-xs); font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-3); padding-bottom: var(--s4);
  margin-bottom: var(--s8); border-bottom: 1px solid var(--rule);
}

/* 1px gap grid: tiles sit edge-to-edge with hairline separators */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 1px; background: var(--rule); border: 1px solid var(--rule);
}

.cat-tile {
  background: var(--paper);
  display: flex; flex-direction: column;
  padding: var(--s6); text-decoration: none; color: inherit;
  transition: background .15s;
}
.cat-tile:hover { background: var(--accent-pale); }

.cat-tile__icon  { font-size: 1.75rem; margin-bottom: var(--s3); line-height: 1; }
.cat-tile__name  { font-weight: 600; font-size: var(--t-md); margin-bottom: var(--s1); }
.cat-tile__count { font-size: var(--t-xs); color: var(--ink-3); }

/* ─── HOW WE RANK ────────────────────────────────────────────── */

.rank-method {
  background: var(--paper-mid);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: var(--s16) var(--s6);
}
.rank-method__inner { max-width: var(--wrap); margin: 0 auto; }

.rank-method__heading {
  font-family: var(--serif);
  font-size: var(--t-2xl); font-weight: 700;
  letter-spacing: -.025em; margin-bottom: var(--s10);
}

.pillars {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: var(--s8);
}
.pillar__n {
  font-family: var(--serif);
  font-size: var(--t-3xl); font-weight: 900;
  color: var(--accent); line-height: 1; margin-bottom: var(--s3);
}
.pillar__h    { font-weight: 600; font-size: var(--t-md); margin-bottom: var(--s2); }
.pillar__body { font-size: var(--t-sm); color: var(--ink-2); line-height: 1.6; }

/* ─── FOOTER ─────────────────────────────────────────────────── */

.site-footer {
  border-top: 1px solid var(--rule-2);
  padding: var(--s12) var(--s6);
}
.footer-inner { max-width: var(--wrap); margin: 0 auto; }

.footer-top {
  display: flex; justify-content: space-between;
  gap: var(--s8); flex-wrap: wrap;
  padding-bottom: var(--s8); margin-bottom: var(--s8);
  border-bottom: 1px solid var(--rule);
}

.footer-wordmark {
  font-family: var(--serif);
  font-size: var(--t-xl); font-weight: 900;
  letter-spacing: -.03em;
  text-decoration: none; color: var(--ink);
}

.disclosure {
  font-size: var(--t-xs); color: var(--ink-3);
  line-height: 1.75; max-width: 62ch;
  padding-left: var(--s5);
  border-left: 2px solid var(--rule-2);
}

.footer-bottom {
  display: flex; justify-content: space-between;
  align-items: center; gap: var(--s4); flex-wrap: wrap;
  font-size: var(--t-xs); color: var(--ink-3);
}

.footer-links { display: flex; gap: var(--s5); list-style: none; }
.footer-links a {
  text-decoration: none; color: var(--ink-3);
  transition: color .15s;
}
.footer-links a:hover { color: var(--ink); }

/* ─── RESPONSIVE UTILITIES ───────────────────────────────────── */

@media (max-width: 768px) {
  .cat-hero       { padding: var(--s8) var(--s4); }
  .ranked-list    { padding: 0 var(--s4); }
  .cat-grid-wrap  { padding: var(--s10) var(--s4); }
  .rank-method    { padding: var(--s10) var(--s4); }
  .home-hero      { padding: var(--s16) var(--s4); }
  .site-footer    { padding: var(--s8) var(--s4); }
  .header-bar     { padding: var(--s3) var(--s4); }
  .cat-nav__list  { padding: 0 var(--s4); }
}


/* ─── ARTICLE / BLOG POST ───────────────────────────────────── */
.post-wrap { max-width: 46rem; margin: 0 auto; padding: var(--s10) var(--s5); }
.post-meta { font-size: .82rem; letter-spacing: .08em; text-transform: uppercase;
             color: var(--ink-3); margin-bottom: var(--s4); }
.post-title { font-family: var(--serif); font-size: clamp(2rem, 5vw, 3.1rem);
              line-height: 1.08; letter-spacing: -.02em; margin: 0 0 var(--s5); }
.post-dek { font-size: 1.12rem; color: var(--ink-2); margin: 0 0 var(--s6); }
.post-byline { font-size: .9rem; color: var(--ink-3); border-top: 1px solid var(--rule);
               border-bottom: 1px solid var(--rule); padding: var(--s3) 0; margin-bottom: var(--s8); }
.post-body { font-size: 1.06rem; line-height: 1.75; color: var(--ink-2); }
.post-body h2 { font-family: var(--serif); font-size: 1.6rem; color: var(--ink);
                margin: var(--s9) 0 var(--s4); letter-spacing: -.01em; }
.post-body h3 { font-size: 1.15rem; color: var(--ink); margin: var(--s7) 0 var(--s3); }
.post-body p { margin: 0 0 var(--s5); }
.post-body ul, .post-body ol { margin: 0 0 var(--s5); padding-left: 1.4rem; }
.post-body li { margin-bottom: var(--s2); }
.post-body a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.post-body a:hover { color: var(--accent); }
.post-body strong { color: var(--ink); }
.post-body img { max-width: 100%; height: auto; }
.disclosure-box { border-left: 3px solid var(--accent); background: var(--paper-mid);
                  padding: var(--s4) var(--s5); margin: 0 0 var(--s6); font-size: .95rem; }
.pick { display: grid; grid-template-columns: auto 1fr; gap: var(--s4);
        align-items: start; padding: var(--s5) 0; border-bottom: 1px solid var(--rule); }
.pick__n { font-family: var(--serif); font-size: 1.5rem; color: var(--accent); line-height: 1; }
.pick__body h3 { margin: 0 0 var(--s2); font-size: 1.05rem; color: var(--ink); }
.pick__meta { font-size: .9rem; color: var(--ink-3); }