/* ============================================================
   BARS for KINGS — Template v2 (best-of-lists index + ranking article)
   Canonical templates: redesign/templates/ · Spec: redesign/templates/TEMPLATE-SPEC.md
   All classes namespaced .v2-* — safe alongside styles-base/sections/pages/extra.
   Tokens inherited from styles-base.css :root (--ink, --cream, --accent, …)
   ============================================================ */

:root{
  --v2-cream-deep:#f4f0e6;
  --v2-shadow:0 1px 2px rgba(13,12,10,.05),0 16px 40px -16px rgba(13,12,10,.22);
}

body.v2{background:var(--cream)}

/* ---- top ribbon ---- */
.v2-ribbon{height:3px;background:linear-gradient(90deg,var(--accent-deep),var(--accent) 40%,#e8cf7a 70%,var(--accent-deep))}

/* ============ SHARED ============ */

.v2-hero{padding:72px 0 0;position:relative;overflow:hidden}
.v2-hero.index{padding:88px 0 56px}
.v2-hero .v2-watermark{position:absolute;right:-40px;top:-60px;font-family:var(--serif);font-style:italic;font-size:380px;line-height:1;color:var(--ink);opacity:.04;pointer-events:none;user-select:none}
.v2-crumbs{font-size:12.5px;color:var(--muted);margin-bottom:32px;display:flex;gap:10px;flex-wrap:wrap}
.v2-crumbs a:hover{color:var(--accent-deep)}
.v2-crumbs .sep{opacity:.5}
.v2-hero h1{font-family:var(--serif);font-weight:400;line-height:.98;letter-spacing:-.015em;text-wrap:balance;font-size:clamp(44px,5.6vw,84px);margin-top:20px;max-width:18ch}
.v2-hero.index h1{font-size:clamp(52px,7vw,104px);max-width:14ch}
.v2-hero h1 em{font-style:italic;color:var(--accent-deep)}
.v2-dek{margin-top:24px;font-size:19px;line-height:1.6;color:var(--muted);max-width:62ch}

.v2-eyebrow{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--accent-deep);display:flex;align-items:center;gap:12px}
.v2-eyebrow::before{content:"";width:28px;height:1px;background:var(--accent)}

.v2-section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;margin-bottom:40px}
.v2-section-head h2{font-family:var(--serif);font-size:clamp(34px,3.8vw,52px);font-weight:400;line-height:1.02;margin-top:14px}
.v2-section-head h2 em{font-style:italic;color:var(--accent-deep)}
.v2-see-all{font-size:13.5px;font-weight:600;color:var(--accent-deep);white-space:nowrap;padding-bottom:6px;border-bottom:1px solid var(--accent)}

.v2-prose{max-width:70ch;font-size:16.5px;line-height:1.75}
.v2-prose p{margin-bottom:1.35em}
.v2-prose h2{font-family:var(--serif);font-weight:400;font-size:clamp(30px,3.4vw,44px);margin:1.1em 0 .6em}
.v2-prose h2 em{font-style:italic;color:var(--accent-deep)}
.v2-prose a{border-bottom:1px solid var(--accent);transition:background .2s}
.v2-prose a:hover{background:rgba(201,162,39,.12)}

/* ============ RANKING ARTICLE ============ */

.v2-byline{margin-top:36px;padding:20px 0;border-top:1px solid var(--line);display:flex;align-items:center;gap:28px;flex-wrap:wrap;font-size:13.5px}
.v2-avatar{width:44px;height:44px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#e8cf7a,var(--accent-deep));display:grid;place-items:center;font-family:var(--serif);font-size:19px;color:var(--ink);flex-shrink:0}
.v2-byline .who b{display:block;font-weight:600;font-size:14px}
.v2-byline .who span{color:var(--muted);font-size:12.5px}
.v2-byline .meta{margin-left:auto;display:flex;gap:22px;color:var(--muted);flex-wrap:wrap}
.v2-byline .meta b{color:var(--ink);font-weight:600}

/* verdict / at-a-glance */
.v2-verdict{margin-top:8px}
.v2-verdict-box{background:var(--ink);color:#fff;border-radius:6px;padding:36px 40px;position:relative;overflow:hidden;display:grid;grid-template-columns:1.2fr .9fr;gap:40px}
.v2-verdict-box::before{content:"";position:absolute;inset:0;background:radial-gradient(100% 130% at 90% 0%,rgba(201,162,39,.22),transparent 55%)}
.v2-verdict-box .v2-eyebrow{color:var(--accent)}
.v2-verdict-box .v2-eyebrow::before{background:var(--accent)}
.v2-verdict-main{position:relative}
.v2-verdict-main h2{font-family:var(--serif);font-weight:400;font-size:clamp(26px,3vw,38px);line-height:1.12;margin-top:14px}
.v2-verdict-main h2 em{font-style:italic;color:var(--accent)}
.v2-verdict-main p{margin-top:14px;color:rgba(255,255,255,.72);font-size:15px;line-height:1.65}
.v2-verdict-side{position:relative;border-left:1px solid rgba(255,255,255,.14);padding-left:36px;display:flex;flex-direction:column;justify-content:center;gap:18px}
.v2-pick{display:flex;flex-direction:column;gap:2px}
.v2-pick span{font-size:10.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.v2-pick b{font-family:var(--serif);font-weight:400;font-size:19px}
.v2-pick b a:hover{color:var(--accent)}

/* jump nav */
.v2-jump{position:sticky;top:61px;z-index:40;background:var(--cream);border-bottom:1px solid var(--line);margin-top:48px}
.v2-jump-inner{max-width:1180px;margin:0 auto;padding:12px 48px;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none}
.v2-jump-inner::-webkit-scrollbar{display:none}
.v2-jump a{flex-shrink:0;font-size:12.5px;font-weight:500;padding:7px 14px;border:1px solid var(--line);border-radius:99px;background:var(--paper);color:var(--muted);transition:all .2s;text-decoration:none}
.v2-jump a:hover{border-color:var(--accent);color:var(--accent-deep)}
.v2-jump a b{font-family:var(--serif);font-style:italic;color:var(--accent-deep);margin-right:6px;font-weight:400}

.v2-intro{padding:56px 0 8px}

/* rank cards */
.v2-ranklist{padding:40px 0 0}
.v2-rank-card{background:var(--paper);border:1px solid var(--line);border-radius:6px;margin-bottom:22px;padding:34px 38px;display:grid;grid-template-columns:110px 1fr;gap:30px;position:relative;transition:transform .3s var(--ease-out),box-shadow .3s var(--ease-out);scroll-margin-top:130px}
.v2-rank-card:hover{transform:translateY(-3px);box-shadow:var(--v2-shadow)}
.v2-rank-no{font-family:var(--serif);font-style:italic;font-size:74px;line-height:.9;color:var(--line);transition:color .3s;user-select:none}
.v2-rank-card:hover .v2-rank-no{color:var(--accent)}
.v2-rank-body h3{font-family:var(--serif);font-weight:400;font-size:31px;line-height:1.1;margin:0}
.v2-rank-body h3 a{border-bottom:1px solid transparent;text-decoration:none}
.v2-rank-body h3 a:hover{color:var(--accent-deep);border-bottom-color:var(--accent)}
.v2-fact-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.v2-fact{font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);background:var(--cream);border:1px solid var(--line);padding:6px 12px;border-radius:99px}
.v2-fact.gold{color:var(--accent-deep);border-color:var(--accent);background:rgba(201,162,39,.08)}
.v2-rank-body .blurb{margin-top:16px;font-size:15.5px;line-height:1.7;color:#3d3a33;max-width:64ch}
/* one-line editor's verdict — leads the card, carries the answer-first payload */
.v2-rank-verdict{margin-top:16px;font-family:var(--serif);font-size:20px;line-height:1.35;color:var(--ink);max-width:56ch}
.v2-blurb{margin-top:12px;font-size:15.5px;line-height:1.7;color:#3d3a33;max-width:64ch}
.v2-blurb .rank-label{display:block;font-family:var(--sans);font-size:10.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-deep);margin-bottom:4px}
.v2-rank-cta{margin-top:18px;display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--accent-deep);text-decoration:none;transition:gap .25s var(--ease-out)}
.v2-rank-cta:hover{gap:12px}

/* №1 spotlight */
.v2-rank-card.first{background:var(--ink);color:#fff;border-color:var(--ink);padding:44px 42px;overflow:hidden}
.v2-rank-card.first::before{content:"";position:absolute;inset:0;background:radial-gradient(110% 130% at 88% -10%,rgba(201,162,39,.26),transparent 55%)}
.v2-rank-card.first .v2-rank-no{color:var(--accent);position:relative}
.v2-rank-card.first .v2-crown{position:absolute;top:22px;right:26px;font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);border:1px solid rgba(201,162,39,.5);padding:7px 14px;border-radius:99px}
.v2-rank-card.first .v2-rank-body{position:relative}
.v2-rank-card.first h3{font-size:38px}
.v2-rank-card.first .blurb{color:rgba(255,255,255,.75)}
.v2-rank-card.first .v2-rank-verdict{color:#fff}
.v2-rank-card.first .v2-blurb{color:rgba(255,255,255,.75)}
.v2-rank-card.first .v2-blurb .rank-label{color:var(--accent)}
.v2-rank-card.first .v2-fact{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18);color:rgba(255,255,255,.75)}
.v2-rank-card.first .v2-fact.gold{color:var(--accent);border-color:rgba(201,162,39,.55);background:rgba(201,162,39,.1)}
.v2-rank-card.first .v2-rank-cta{color:var(--accent)}

/* also worth knowing (11+) */
.v2-more{padding:56px 0 0}
.v2-more-grid{margin-top:32px;display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--line);border:1px solid var(--line);border-radius:6px;overflow:hidden}
.v2-more-row{background:var(--paper);padding:22px 26px;display:flex;gap:18px;align-items:baseline;transition:background .2s}
.v2-more-row:hover{background:var(--v2-cream-deep)}
.v2-more-row .n{font-family:var(--serif);font-style:italic;color:var(--accent-deep);font-size:17px;flex-shrink:0}
.v2-more-row h4{font-size:16px;font-weight:600;margin:0}
.v2-more-row h4 a{text-decoration:none}
.v2-more-row h4 a:hover{color:var(--accent-deep)}
.v2-more-row p{font-size:13.5px;color:var(--muted);margin-top:4px;line-height:1.55}

/* methodology */
.v2-method{margin-top:72px;background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:64px 0}
.v2-method h2{font-family:var(--serif);font-weight:400;font-size:clamp(30px,3.4vw,44px);margin-top:14px}
.v2-method h2 em{font-style:italic;color:var(--accent-deep)}
.v2-method .v2-prose{font-size:15.5px;margin-top:22px}
.v2-reviewed{margin-top:26px;font-size:13px;color:var(--muted);display:flex;align-items:center;gap:10px}
.v2-reviewed::before{content:"✓";display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:rgba(201,162,39,.15);color:var(--accent-deep);font-size:11px;flex-shrink:0}

/* related pills */
.v2-related{padding:64px 0 8px}
.v2-pill-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
.v2-pill-row a{border:1px solid var(--line);background:var(--paper);padding:10px 18px;font-size:13.5px;font-weight:500;border-radius:99px;transition:all .22s;text-decoration:none}
.v2-pill-row a:hover{border-color:var(--accent);color:var(--accent-deep)}

/* ============ BEST-OF INDEX ============ */

.v2-hero-foot{margin-top:36px;display:flex;align-items:flex-end;justify-content:space-between;gap:40px;flex-wrap:wrap}
.v2-hero-sub{font-size:17.5px;line-height:1.65;color:var(--muted);max-width:52ch}
.v2-hero-stats{display:flex;border-left:1px solid var(--line)}
.v2-stat{padding:4px 28px;border-right:1px solid var(--line)}
.v2-stat b{display:block;font-family:var(--serif);font-size:34px;font-weight:400;line-height:1.05}
.v2-stat span{font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

/* featured trio (page 1 only) */
.v2-featured{padding:72px 0 8px}
.v2-feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.v2-feat-card{position:relative;background:var(--ink);color:#fff;border-radius:4px;overflow:hidden;min-height:340px;display:flex;flex-direction:column;justify-content:flex-end;padding:30px 28px;transition:transform .35s var(--ease-out),box-shadow .35s var(--ease-out)}
.v2-feat-card:hover{transform:translateY(-5px);box-shadow:var(--v2-shadow)}
.v2-feat-card .art{position:absolute;inset:0;background:radial-gradient(120% 90% at 80% 0%,rgba(201,162,39,.32),transparent 55%),linear-gradient(160deg,#26221a 0%,#0d0c0a 70%)}
.v2-feat-card:nth-child(2) .art{background:radial-gradient(120% 90% at 20% 0%,rgba(201,162,39,.26),transparent 55%),linear-gradient(200deg,#221e16 0%,#0d0c0a 70%)}
.v2-feat-card:nth-child(3) .art{background:radial-gradient(140% 100% at 50% -10%,rgba(232,207,122,.22),transparent 60%),linear-gradient(180deg,#1e1a13 0%,#0d0c0a 75%)}
.v2-feat-num{position:absolute;top:18px;right:22px;font-family:var(--serif);font-style:italic;font-size:64px;line-height:1;color:var(--accent);opacity:.85}
.v2-feat-kicker{position:relative;font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-bottom:12px}
.v2-feat-card h3{position:relative;font-family:var(--serif);font-weight:400;font-size:27px;line-height:1.12;text-wrap:balance;margin:0}
.v2-feat-card h3 a{text-decoration:none}
.v2-feat-card h3 a::after{content:"";position:absolute;inset:0}
.v2-feat-meta{position:relative;margin-top:14px;font-size:12.5px;color:rgba(255,255,255,.62);display:flex;gap:14px}

/* list card grid */
.v2-listing{padding:64px 0 40px}
.v2-list-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.v2-list-card{background:var(--paper);border:1px solid var(--line);border-radius:4px;padding:26px 26px 22px;display:flex;flex-direction:column;position:relative;transition:transform .3s var(--ease-out),box-shadow .3s var(--ease-out),border-color .3s}
.v2-list-card:hover{transform:translateY(-4px);box-shadow:var(--v2-shadow);border-color:#ddd3ba}
.v2-tag-row{display:flex;align-items:center;gap:10px;margin-bottom:16px;flex-wrap:wrap}
.v2-chip{font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:5px 10px;border-radius:99px}
.v2-chip.city{background:var(--v2-cream-deep);color:var(--ink)}
.v2-chip.kind{background:transparent;border:1px solid var(--line);color:var(--muted)}
.v2-list-card h3{font-family:var(--serif);font-weight:400;font-size:23px;line-height:1.16;text-wrap:balance;flex:1;margin:0}
.v2-list-card h3 a{text-decoration:none}
.v2-list-card h3 a::after{content:"";position:absolute;inset:0}
.v2-list-card h3 a:hover{color:var(--accent-deep)}
.v2-card-foot{margin-top:20px;padding-top:14px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;font-size:12.5px;color:var(--muted)}
.v2-card-foot .go{font-family:var(--serif);font-style:italic;font-size:15px;color:var(--accent-deep);transition:transform .3s var(--ease-out)}
.v2-list-card:hover .go{transform:translateX(4px)}

/* pagination */
.v2-pagination{display:flex;align-items:center;justify-content:center;gap:8px;padding:56px 0 8px;flex-wrap:wrap}
.v2-page-btn{width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--line);background:var(--paper);border-radius:2px;font-size:13.5px;font-weight:500;transition:all .2s;text-decoration:none}
.v2-page-btn:hover{border-color:var(--accent);color:var(--accent-deep)}
.v2-page-btn.is-on{background:var(--ink);color:#fff;border-color:var(--ink);font-family:var(--serif);font-style:italic;font-size:16px}
.v2-page-btn.arrow{width:auto;padding:0 18px}
.v2-page-ellipsis{color:var(--muted);padding:0 4px}

/* ---- responsive ---- */
@media(max-width:1020px){
  .v2-jump-inner{padding-left:28px;padding-right:28px}
  .v2-verdict-box{grid-template-columns:1fr;gap:28px}
  .v2-verdict-side{border-left:none;padding-left:0;border-top:1px solid rgba(255,255,255,.14);padding-top:26px}
  .v2-more-grid{grid-template-columns:1fr}
  .v2-feat-grid,.v2-list-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .v2-rank-card{grid-template-columns:1fr;gap:10px;padding:26px 22px}
  .v2-rank-no{font-size:52px}
  .v2-byline .meta{margin-left:0}
  .v2-hero{padding-top:48px}
  .v2-feat-grid,.v2-list-grid{grid-template-columns:1fr}
  .v2-hero-stats{border-left:none}
  .v2-stat:first-child{padding-left:0}
}