/* ============================================================================ DIRECTION A — "EDITORIAL GALLERY" (ported from design package, 2026-06-10) Scoped to pages carrying . The rest of the site is untouched until each template is migrated. Bridges the legacy token names (--gold/--text/--surface/--black) to the prototype names (--accent/--ink/ --bg/--line) so prototype component CSS pastes in verbatim. ============================================================================ */ html[data-theme="a"]{ /* legacy tokens, remapped to the light editorial palette (semantic flip) */ --gold:#a8833c; --gold-light:#c19a4a; --gold-dim:#8a6d2f; --black:#ffffff; --surface:#ffffff; --surface2:#f7f5f0; --surface3:#f1eee7; --border:#e8e4db; --text:#17140f; --muted:#6f6a60; --serif:'Cormorant Garamond',serif; --sans:'Hanken Grotesk',sans-serif; /* prototype tokens */ --bg:#ffffff; --bg-soft:#f7f5f0; --bg-deep:#14110c; --ink:#17140f; --ink-soft:#6f6a60; --line:#e8e4db; --accent:#a8833c; --accent-soft:#f3ecdd; --accent-ink:#ffffff; --font-display:'Cormorant Garamond',serif; --font-ui:'Hanken Grotesk',sans-serif; --r-card:6px; --r-pill:999px; --btn-r:999px; --shadow:0 24px 60px -24px rgba(23,20,15,0.18); --max:1280px; --pad:clamp(20px,4vw,56px); --anim:1; } html[data-theme="a"] body{ background:var(--bg); color:var(--ink); font-family:var(--font-ui); font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased; } html[data-theme="a"] .wrap{ max-width:var(--max); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad); } /* display + kicker primitives */ html[data-theme="a"] .display{ font-family:var(--font-display); font-weight:500; letter-spacing:-0.01em; line-height:1.04; text-wrap:balance; } html[data-theme="a"] .display em{ font-style:italic; color:var(--accent); } html[data-theme="a"] .kicker{ font-size:11.5px; font-weight:600; letter-spacing:0.22em; text-transform:uppercase; color:var(--accent); display:inline-flex; align-items:center; gap:12px; white-space:nowrap; } html[data-theme="a"] .kicker::before{ content:""; width:28px; height:1px; background:currentColor; } /* reveal-on-scroll (JS adds .in; falls back to visible) */ html[data-theme="a"] .rv{ opacity:0; transform:translateY(26px); transition:opacity .8s cubic-bezier(.2,.6,.2,1), transform .9s cubic-bezier(.2,.6,.2,1); transition-delay:var(--rv-d,0s); } html[data-theme="a"] .rv.in{ opacity:1; transform:none; } @media (prefers-reduced-motion:reduce){ html[data-theme="a"] .rv{ opacity:1; transform:none; transition:none; } } @media print{ html[data-theme="a"] .rv{ opacity:1; transform:none; } } /* ---------- Header (re-skins existing #site-nav) ---------- */ html[data-theme="a"] #site-nav{ background:color-mix(in srgb, var(--bg) 90%, transparent); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border-bottom:1px solid var(--line); padding:0 var(--pad); height:76px; gap:36px; } html[data-theme="a"] #site-nav .nav-logo{ display:inline-flex; align-items:center; gap:11px; font-family:var(--font-display); font-size:21px; font-weight:600; letter-spacing:-0.01em; color:var(--ink); text-transform:none; } html[data-theme="a"] #site-nav .nav-logo span{ font-style:italic; color:var(--ink); } html[data-theme="a"] #site-nav .nav-logo .crown{ width:26px; height:26px; color:var(--accent); flex:none; } html[data-theme="a"] .nav-links{ display:flex; gap:28px; align-items:center; margin-left:auto; } html[data-theme="a"] .nav-links a{ font-size:14.5px; font-weight:500; letter-spacing:0; text-transform:none; color:var(--ink-soft); position:relative; padding:6px 0; } html[data-theme="a"] .nav-links a::after{ content:""; position:absolute; left:0; bottom:0; width:100%; height:1.5px; background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform .3s cubic-bezier(.2,.6,.2,1); } html[data-theme="a"] .nav-links a:hover{ color:var(--ink); } html[data-theme="a"] .nav-links a:hover::after{ transform:scaleX(1); } html[data-theme="a"] .hd-search{ display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:50%; border:1px solid var(--line); color:var(--ink); flex:none; transition:border-color .25s, transform .25s; } html[data-theme="a"] .hd-search svg{ width:16px; height:16px; } html[data-theme="a"] .hd-search:hover{ border-color:var(--ink); transform:translateY(-1px); } html[data-theme="a"] #site-nav .nav-cta{ background:var(--accent); color:var(--accent-ink); border:1px solid var(--accent); border-radius:var(--r-pill); padding:9px 18px; font-size:13.5px; font-weight:600; letter-spacing:0; text-transform:none; transition:transform .25s, box-shadow .25s; } html[data-theme="a"] #site-nav .nav-cta:hover{ transform:translateY(-2px); box-shadow:0 12px 28px -10px color-mix(in srgb, var(--accent) 55%, transparent); background:var(--accent); color:var(--accent-ink); } html[data-theme="a"] .nav-hamburger span{ background:var(--accent); } /* ---------- Buttons (pill) ---------- */ html[data-theme="a"] .btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; background:var(--accent); color:var(--accent-ink); border:1px solid var(--accent); border-radius:var(--btn-r); padding:12px 26px; font-size:14.5px; font-weight:600; white-space:nowrap; transition:transform .25s cubic-bezier(.2,.6,.2,1), box-shadow .25s, background .25s; } html[data-theme="a"] .btn:hover{ transform:translateY(-2px); box-shadow:0 12px 28px -10px color-mix(in srgb, var(--accent) 55%, transparent); } html[data-theme="a"] .btn svg{ width:17px; height:17px; flex:none; } html[data-theme="a"] .btn.ghost{ background:transparent; color:var(--ink); border-color:var(--line); } html[data-theme="a"] .btn.ghost:hover{ border-color:var(--ink); box-shadow:none; } /* ---------- Split hero ---------- */ html[data-theme="a"] .hero-home{ min-height:0; display:block; text-align:left; position:relative; padding:clamp(120px,16vh,170px) 0 0; overflow:hidden; } html[data-theme="a"] .hero-home .hero-bg{ display:none; } /* old full-bleed dark bg replaced by framed photo */ html[data-theme="a"] .hero-grid{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:clamp(32px,5vw,72px); align-items:center; max-width:var(--max); margin:0 auto; padding:0 var(--pad); } html[data-theme="a"] .hero-home .hero-eyebrow{ font-size:12.5px; font-weight:600; letter-spacing:0.2em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:26px; display:inline-flex; align-items:center; gap:10px; text-shadow:none; } html[data-theme="a"] .hero-home .hero-eyebrow .dot{ width:6px; height:6px; border-radius:50%; background:var(--accent); } html[data-theme="a"] .hero-home .hero-title{ font-family:var(--font-display); font-weight:500; color:var(--ink); font-size:clamp(52px,7.2vw,104px); line-height:1.04; margin-bottom:26px; text-shadow:none; letter-spacing:-0.01em; } html[data-theme="a"] .hero-home .hero-title em{ font-style:italic; color:var(--accent); } html[data-theme="a"] .hero-home .hero-sub{ font-size:clamp(16px,1.4vw,19px); color:var(--ink-soft); max-width:46ch; margin:0 0 32px; font-weight:400; line-height:1.6; text-shadow:none; } html[data-theme="a"] .hero-home .hero-sub strong{ color:var(--ink); font-weight:600; } html[data-theme="a"] .hero-photo{ position:relative; } html[data-theme="a"] .hero-photo .frame{ position:relative; border-radius:var(--r-card); overflow:hidden; aspect-ratio:4/5; box-shadow:var(--shadow); } html[data-theme="a"] .hero-photo img{ width:100%; height:100%; object-fit:cover; } html[data-theme="a"] .hero-card{ position:absolute; left:-40px; bottom:34px; background:var(--bg); border:1px solid var(--line); border-radius:var(--r-card); padding:16px 20px; display:flex; gap:14px; align-items:center; box-shadow:var(--shadow); max-width:290px; text-decoration:none; color:var(--ink); } html[data-theme="a"] .hero-card img{ width:52px; height:52px; object-fit:cover; border-radius:calc(var(--r-card)*.7); } html[data-theme="a"] .hero-card .t{ font-size:14px; font-weight:600; line-height:1.3; } html[data-theme="a"] .hero-card .s{ font-size:12.5px; color:var(--ink-soft); } html[data-theme="a"] .hero-card .score{ margin-left:auto; font-family:var(--font-display); font-size:22px; color:var(--accent); font-weight:600; } /* occasion sentence-builder */ html[data-theme="a"] .builder{ background:var(--bg); border:1px solid var(--line); border-radius:var(--r-card); box-shadow:var(--shadow); padding:22px 24px; max-width:640px; } html[data-theme="a"] .builder .sentence{ font-family:var(--font-display); font-size:clamp(20px,2vw,26px); line-height:1.5; color:var(--ink); } html[data-theme="a"] .chip{ display:inline-flex; align-items:center; gap:8px; border:none; background:var(--accent-soft); color:var(--ink); border-bottom:2px solid var(--accent); padding:2px 12px; margin:0 2px; font-family:var(--font-display); font-size:inherit; font-weight:600; font-style:italic; border-radius:6px 6px 0 0; transition:background .25s; position:relative; white-space:nowrap; cursor:pointer; } html[data-theme="a"] .chip:hover{ background:color-mix(in srgb, var(--accent) 18%, var(--bg)); } html[data-theme="a"] .chip svg{ width:13px; height:13px; opacity:.55; } html[data-theme="a"] .builder-foot{ display:flex; align-items:center; gap:14px; margin-top:18px; padding-top:18px; border-top:1px solid var(--line); flex-wrap:wrap; } html[data-theme="a"] .builder-foot .meta{ font-size:13px; color:var(--ink-soft); } html[data-theme="a"] .builder-foot .btn{ margin-left:auto; } html[data-theme="a"] .menu{ position:absolute; top:calc(100% + 8px); left:0; z-index:40; min-width:230px; background:var(--bg); border:1px solid var(--line); border-radius:var(--r-card); box-shadow:var(--shadow); padding:6px; opacity:0; transform:translateY(-6px) scale(.98); pointer-events:none; transition:opacity .22s, transform .22s cubic-bezier(.2,.6,.2,1); max-height:300px; overflow:auto; } html[data-theme="a"] .menu.open{ opacity:1; transform:none; pointer-events:auto; } html[data-theme="a"] .menu button{ display:flex; align-items:center; gap:10px; width:100%; text-align:left; background:none; border:none; font-family:var(--font-ui); font-size:14.5px; font-weight:500; color:var(--ink); padding:10px 12px; border-radius:calc(var(--r-card)*.6); } html[data-theme="a"] .menu button:hover{ background:var(--bg-soft); } html[data-theme="a"] .menu button.active{ color:var(--accent); font-weight:600; } /* hero search box (wraps existing #cityInput) */ html[data-theme="a"] .hero-home .city-search{ display:block; max-width:640px; margin:18px 0 0; } html[data-theme="a"] .hero-home .city-search .search-box{ display:flex; align-items:center; gap:12px; border:1px solid var(--line); border-radius:var(--r-pill); padding:14px 20px; background:var(--bg); transition:border-color .25s, box-shadow .25s; } html[data-theme="a"] .hero-home .city-search .search-box:focus-within{ border-color:var(--accent); box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 12%, transparent); } html[data-theme="a"] .hero-home .city-search .search-box svg{ width:18px; height:18px; color:var(--ink-soft); flex:none; } html[data-theme="a"] .hero-home .city-search input{ flex:1; border:none; outline:none; background:none; padding:0; font-family:var(--font-ui); font-size:15.5px; color:var(--ink); } html[data-theme="a"] .hero-home .city-search input::placeholder{ color:var(--ink-soft); opacity:1; } html[data-theme="a"] .hero-home .city-search kbd{ font-family:var(--font-ui); font-size:11.5px; color:var(--ink-soft); border:1px solid var(--line); border-radius:6px; padding:2px 7px; } /* ticker */ html[data-theme="a"] .ticker{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); overflow:hidden; margin-top:64px; background:var(--bg); } html[data-theme="a"] .ticker-track{ display:flex; gap:0; width:max-content; animation:tick 38s linear infinite; } html[data-theme="a"] .ticker span{ display:inline-flex; align-items:center; gap:26px; padding:15px 26px 15px 0; font-family:var(--font-display); font-size:17px; font-style:italic; color:var(--ink-soft); white-space:nowrap; } html[data-theme="a"] .ticker span::after{ content:"\2726"; font-style:normal; font-size:10px; color:var(--accent); } @keyframes tick{ to{ transform:translateX(-50%);} } @media (prefers-reduced-motion:reduce){ html[data-theme="a"] .ticker-track{ animation:none; } } /* ---------- Sticky occasion filter bar -> light pill bar ---------- */ html[data-theme="a"] .occasions{ background:color-mix(in srgb, var(--bg) 90%, transparent); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border-top:1px solid var(--line); border-bottom:1px solid var(--line); } html[data-theme="a"] .section-label{ color:var(--ink-soft); display:inline-flex; align-items:center; gap:12px; } html[data-theme="a"] .section-label::before{ content:""; width:28px; height:1px; background:var(--accent); } html[data-theme="a"] .occasion-tag{ border:1px solid var(--line); color:var(--ink-soft); border-radius:var(--r-pill); } html[data-theme="a"] .occasion-tag:hover{ border-color:var(--accent); color:var(--ink); } html[data-theme="a"] .occasion-tag.active{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); } /* ---------- Section header ---------- */ html[data-theme="a"] .section-title{ font-family:var(--font-display); font-weight:500; color:var(--ink); } html[data-theme="a"] .section-title em{ color:var(--accent); } html[data-theme="a"] .result-count{ color:var(--ink-soft); } /* ---------- Restaurant cards (override dark-literal block) ---------- */ html[data-theme="a"] .restaurant-card{ background:var(--bg); border:1px solid var(--line); border-radius:var(--r-card); } html[data-theme="a"] .restaurant-card:hover{ transform:translateY(-4px); border-color:var(--line); box-shadow:var(--shadow); background:var(--bg); } html[data-theme="a"] .restaurant-card .card-image{ height:220px; } html[data-theme="a"] .restaurant-card .card-image img{ transition:transform .9s ease; } html[data-theme="a"] .restaurant-card:hover .card-image img{ transform:scale(1.07); } html[data-theme="a"] .restaurant-card .card-name{ color:var(--ink) !important; font-family:var(--font-display) !important; } html[data-theme="a"] .restaurant-card .card-city{ color:var(--accent) !important; } html[data-theme="a"] .restaurant-card .card-cuisine{ color:var(--ink-soft) !important; } html[data-theme="a"] .restaurant-card .card-verdict{ color:var(--ink-soft) !important; border-left-color:var(--accent); } html[data-theme="a"] .restaurant-card .card-price{ color:var(--accent) !important; } html[data-theme="a"] .restaurant-card .card-rank{ background:color-mix(in srgb, var(--bg) 92%, transparent) !important; color:var(--accent) !important; border:1px solid var(--line); border-radius:var(--r-pill); } html[data-theme="a"] .restaurant-card .card-scores .score-num, html[data-theme="a"] .restaurant-card .card-scores [class*="score-value"]{ color:var(--accent) !important; } html[data-theme="a"] .restaurant-card .card-scores [class*="score-label"]{ color:var(--ink-soft) !important; } html[data-theme="a"] .restaurant-card .card-occasion-badge{ background:color-mix(in srgb, var(--bg) 85%, transparent); color:var(--accent); border:1px solid var(--line); } html[data-theme="a"] .score-val{ color:var(--accent); } html[data-theme="a"] .btn-outline{ border:1px solid var(--accent); color:var(--accent); border-radius:var(--r-pill); } html[data-theme="a"] .btn-outline:hover{ background:var(--accent); color:var(--accent-ink); } html[data-theme="a"] .btn-hero-join{ border-radius:var(--r-pill); } /* ---------- Worldwide "dir-card" grid ---------- */ html[data-theme="a"] .dir-card{ border-radius:var(--r-card); border-color:var(--line) !important; } html[data-theme="a"] .dir-card img{ transition:transform .9s ease; } html[data-theme="a"] .dir-card:hover{ transform:translateY(-4px); border-color:var(--accent) !important; box-shadow:var(--shadow); } html[data-theme="a"] .dir-card:hover img{ transform:scale(1.07); } /* ---------- Footer ---------- */ html[data-theme="a"] footer{ background:var(--bg-soft); border-top:1px solid var(--line); } html[data-theme="a"] .footer-logo-text{ color:var(--ink); } html[data-theme="a"] .footer-logo-text span{ color:var(--accent); } html[data-theme="a"] .footer-col h4{ color:var(--ink-soft); } html[data-theme="a"] .footer-col ul li a, html[data-theme="a"] .footer-legal a, html[data-theme="a"] .footer-copy{ color:var(--ink-soft); } html[data-theme="a"] .footer-col ul li a:hover, html[data-theme="a"] .footer-legal a:hover{ color:var(--accent); } html[data-theme="a"] .footer-newsletter input{ background:var(--bg); color:var(--ink); border-color:var(--line); } html[data-theme="a"] .footer-newsletter button{ color:var(--accent-ink); border-radius:0 var(--r-pill) var(--r-pill) 0; } /* ---------- Advertiser / forms on light ---------- */ html[data-theme="a"] .advertiser h2 em{ color:var(--accent); } html[data-theme="a"] .adv-num{ color:var(--accent); } html[data-theme="a"] .adv-form input{ background:var(--bg); color:var(--ink); border-color:var(--line); } /* ---------- Mobile drawer -> light ---------- */ html[data-theme="a"] .nav-mobile-drawer{ background:color-mix(in srgb, var(--bg) 98%, transparent); border-bottom:1px solid var(--line); } html[data-theme="a"] .nav-mobile-drawer a{ color:var(--ink-soft); border-bottom:1px solid var(--line); text-transform:none; letter-spacing:0; } html[data-theme="a"] .nav-mobile-drawer a:hover{ color:var(--accent); } html[data-theme="a"] .rfk-drawer-search input{ background:var(--bg-soft); border:1px solid var(--line); color:var(--ink); } /* ---------- Responsive ---------- */ @media (max-width:900px){ html[data-theme="a"] .hero-grid{ grid-template-columns:1fr; } html[data-theme="a"] .hero-photo{ display:none; } html[data-theme="a"] #site-nav{ height:64px; padding:0 24px; } html[data-theme="a"] .builder-foot .btn{ margin-left:0; width:100%; } } /* ============================================================================ DIRECTION A — CITY TEMPLATE (added 2026-06-10) City pages ship a full inline dark theme (:root tokens + component styles). html[data-theme="a"] tokens win on specificity, flipping body/cards/footer/ nav to light. The ONLY casualty is the dark photographic hero, whose text inherits --text and would flip to ink — so pin hero text light under the per-template scope html[data-tpl="city"]. Generators emit: + Hanken font link. ============================================================================ */ /* --- dark photographic city hero: keep text light --- */ html[data-tpl="city"] .hero .hero-eyebrow{ color:var(--gold-light); display:inline-flex; align-items:center; gap:12px; } html[data-tpl="city"] .hero .hero-eyebrow::before{ content:""; width:28px; height:1px; background:currentColor; } html[data-tpl="city"] .hero .hero-title{ color:#f4f1ea; } html[data-tpl="city"] .hero .hero-title em{ color:var(--gold-light); } html[data-tpl="city"] .hero .hero-sub{ color:rgba(244,241,234,.82); } html[data-tpl="city"] .hero .stat-num{ color:#f4f1ea; } html[data-tpl="city"] .hero .stat-label{ color:rgba(244,241,234,.72); } html[data-tpl="city"] .hero .rfk-reviewer-byline a{ color:var(--gold-light); } /* breadcrumb (city + other interior pages) */ html[data-theme="a"] .breadcrumb a{ color:var(--ink-soft); } html[data-theme="a"] .breadcrumb a:hover{ color:var(--accent); } html[data-theme="a"] .breadcrumb span{ color:var(--ink-soft); opacity:.6; } /* "At a glance" summary card -> light */ html[data-theme="a"] .rfk-summary-card > div{ background:var(--bg-soft) !important; border-left-color:var(--accent) !important; } html[data-theme="a"] .rfk-summary-card .rfk-speakable{ color:var(--ink) !important; } html[data-theme="a"] .rfk-summary-card .rfk-speakable a{ color:var(--accent); } /* price legend on light */ html[data-theme="a"] .price-legend{ color:var(--ink-soft) !important; } html[data-theme="a"] .price-legend strong{ color:var(--accent) !important; } /* section-header count span */ html[data-theme="a"] .section-header span{ color:var(--ink-soft) !important; } html[data-theme="a"] .rfk-directory-list li{ border-bottom-color:var(--line); } /* The mid-page email-capture band stays dark (one dark band per page). */ /* city header search button -> circular ghost icon (overrides inline gold) */ html[data-theme="a"] .nav-search-btn.hd-search{ width:38px; height:38px; border:1px solid var(--line) !important; border-radius:50% !important; color:var(--ink) !important; justify-content:center; } html[data-theme="a"] .nav-search-btn.hd-search:hover{ border-color:var(--ink) !important; } /* ============================================================================ DIRECTION A — RESTAURANT DETAIL TEMPLATE (added 2026-06-10) Same model as city: per-page inline dark theme flips light via tokens; the dark photographic hero needs its text pinned light. Scope: data-tpl="restaurant". Generators emit: + Hanken link + crown header; and emit var(--text)/var(--muted) (not #F0EDE4/#8A8778) in the "sibling-restaurants" and "more-tables" related-card sections. ============================================================================ */ html[data-tpl="restaurant"] .hero .hero-eyebrow{ color:var(--gold-light); display:inline-flex; align-items:center; gap:12px; } html[data-tpl="restaurant"] .hero .hero-eyebrow::before{ content:""; width:28px; height:1px; background:currentColor; } html[data-tpl="restaurant"] .hero .hero-rank{ color:rgba(244,241,234,.82); } html[data-tpl="restaurant"] .hero .hero-rank a{ color:var(--gold-light); } html[data-tpl="restaurant"] .hero .hero-title{ color:#f4f1ea; } html[data-tpl="restaurant"] .hero .hero-title em{ color:var(--gold-light); } html[data-tpl="restaurant"] .hero .hero-verdict{ color:rgba(244,241,234,.86); border-left-color:var(--gold-light); } html[data-tpl="restaurant"] .hero .hero-badges .badge{ color:#f4f1ea; border-color:rgba(244,241,234,.32); } html[data-tpl="restaurant"] .hero .rfk-reviewer-byline a{ color:var(--gold-light); } /* body score boxes + info card flip light via tokens; accent the score number */ html[data-theme="a"] .score-grid .score-card{ background:var(--bg-soft); border:1px solid var(--line); } html[data-theme="a"] .score-grid .score-big{ color:var(--accent); font-family:var(--font-display); } html[data-theme="a"] .score-grid .score-label{ color:var(--ink-soft); } html[data-theme="a"] .info-card{ background:var(--bg-soft); border:1px solid var(--line); } html[data-theme="a"] .info-card h4{ color:var(--ink); } html[data-theme="a"] .info-label{ color:var(--ink-soft); } html[data-theme="a"] .info-value{ color:var(--ink); } html[data-theme="a"] .content h2 em, html[data-theme="a"] .content h3{ color:var(--accent); } /* related-card grids -> light cards with hover */ html[data-theme="a"] .more-table-card{ background:var(--bg) !important; border:1px solid var(--line) !important; border-radius:var(--r-card); transition:transform .25s, box-shadow .25s, border-color .25s; } html[data-theme="a"] .more-table-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow); border-color:var(--accent) !important; } /* sticky reserve bar stays dark (self-consistent literals) — leave as-is. */ /* ============================================================================ DIRECTION A — RANKINGS LIST TEMPLATE (added 2026-06-10) /rankings//// — article layout, NO per-page