================================================================
PICKED5 — PRODUCTION SPEC
How Claude generates each "Top 5" article for this site.
Read this whole file before producing a new ranking.
================================================================

------------------------------------------------------------
0. WHAT THIS SITE IS
------------------------------------------------------------
Picked5 is a 100% static website (no backend, no build step).
Each article ranks the FIVE best items in one category, ordered
best -> worst, using ONE fixed rubric so every list is comparable
and reproducible.

The home page (index.html) cannot read the /articles folder on its
own — browsers can't list a directory. So articles.js is the single
source of truth: it sets window.ARTICLES, the home page reads it and
renders the newest 10, with a "See more" button for the rest. Whenever
you publish an article you MUST add an entry to articles.js (see section 6).

Why a .js file and not .json: a <script src="articles.js"> tag loads under
the file:// protocol, so the site works when you just double-click
index.html. A fetch() of a local .json file would be blocked by the
browser's file:// security policy.

File layout:
  index.html                      home page (do not hand-edit the list; it reads window.ARTICLES)
  articles.js                     manifest of all articles (newest first) — sets window.ARTICLES
  produce.txt                     this file
  llms.txt                        site description for LLMs / AI crawlers — MUST be updated each release
  robots.txt                      crawler permissions
  sitemap.xml                     URL list for SEO — MUST be updated each release
  assets/style.css                shared design system — REUSE its classes, do not invent new ones
  assets/theme.js                 dark/light aurora theme toggle (do not edit)
  articles/<slug>.html            one file per ranking

SITE_URL placeholder:
  All absolute URLs in canonical/og:url/JSON-LD/sitemap currently use
  https://pickedfive.com/ as a placeholder. If you deploy under a different
  domain, search-and-replace that string across:
     index.html, articles/*.html, sitemap.xml, robots.txt, llms.txt
  Relative links (href="../...", "articles/...") stay as-is.

------------------------------------------------------------
1. THE RANKING RUBRIC  (do not change the weights)
------------------------------------------------------------
Score every candidate 0–10 on three axes, then combine:

    FINAL = 0.50 * Performance
          + 0.30 * Value
          + 0.20 * Reliability

Order the list from highest FINAL to lowest. Exactly 5 entries.
Break ties toward the higher Performance score.

Axis definitions (adapt the sub-criteria to the category, keep the spirit):

  PERFORMANCE (50%) — the primary axis. Raw capability and how well it
  holds up in real use. For phones: SoC compute (Geekbench/AnTuTu), GPU,
  SUSTAINED performance under thermal load (not just peak), RAM/storage
  speed, display responsiveness. For other categories, map to the
  equivalent "how good is it at its core job" measures.

  VALUE (30%) — price relative to what you actually get. A cheaper item
  that delivers most of the performance should out-score an expensive one
  that delivers a little more. Use real launch/street prices.

  RELIABILITY (20%) — will it keep being good? Software/support longevity,
  build quality & durability, brand track record, battery/wear longevity,
  thermal and long-term stability, warranty/service network.

Scoring discipline:
  - Be willing to rank household names BELOW lesser-known products when the
    rubric says so. The methodology is the point — not consensus picks.
  - Show your scores. Every entry displays its three sub-scores and the
    weighted overall, and the article opens with a comparison table. The
    numbers must actually add up to the displayed FINAL (rounded to 1 dp).
  - Label scores as Picked5's own editorial ratings derived from cited sources.

------------------------------------------------------------
2. RESEARCH REQUIREMENTS
------------------------------------------------------------
  - Research the web for CURRENT data before ranking. Use the real model
    names, prices, chips and benchmarks available at publication time.
  - Prefer recent, reputable reviews and benchmark sources (GSMArena,
    Notebookcheck, AnandTech-style outlets, Tom's Guide, TechRadar, Android
    Authority, manufacturer spec pages, etc.). Cross-check at least 2 sources
    for any contested number.
  - NEVER fabricate specs, prices or benchmark figures. If a number is
    uncertain, phrase it cautiously ("around", "starting at") or omit it.
  - Collect the source URLs as you go — every article ends with a numbered
    "Sources & benchmarks" list, and key factual claims link inline.
  - Note honest caveats (e.g. thermal throttling, short update windows,
    weak cameras). The disclaimer paragraph is mandatory.

------------------------------------------------------------
3. VOICE & STYLE
------------------------------------------------------------
  - Confident, specific, no fluff. Short editor's-verdict sentences.
  - Each entry: a one-line verdict, the score bars, For/Against lists, and
    1–2 short "take" paragraphs that JUSTIFY the placement against the rubric
    (especially WHY it isn't higher/lower).
  - Explain surprises explicitly ("it lands 2nd not 1st because reliability…").
  - US English. Prices in USD with a "from $X" framing.

------------------------------------------------------------
4. DESIGN PRINCIPLES
------------------------------------------------------------
  - **Mobile-first.** assets/style.css is written mobile-first: base styles
    target small screens, a single `@media (min-width: 720px)` block layers
    on desktop refinements. Do not invent new media queries; do not add
    desktop-only styles outside that block.
  - **Reuse the design system.** Use existing class names from style.css
    (.entry, .scores .row, .pc, .method-box, .pill, .chip, .btn, etc.).
    Never inline a new stylesheet, never use inline `style="..."` except
    for the bar widths on `.scores .bar > i`.
  - **Themed.** Dark and light themes are driven by CSS vars under
    `:root[data-theme="dark|light"]`. Stay var-driven — no hard-coded
    colors in article HTML.
  - **Tap targets.** Any interactive element must be at least 40×40 px
    on mobile. The existing .btn / .theme-toggle satisfy this.

------------------------------------------------------------
5. ARTICLE HTML TEMPLATE
------------------------------------------------------------
Copy the structure of articles/top-mobile-phones-2026.html — it is the
reference template. Reuse the existing CSS classes from assets/style.css;
do NOT invent new styling or inline a new stylesheet. Required sections,
in order:

  <head>      Full SEO + AI meta block (see section 5a) and JSON-LD (5b).
              Then the theme script and stylesheet (one level up):
                <script src="../assets/theme.js"></script>
                <link rel="stylesheet" href="../assets/style.css">
  nav.nav     Same brand + methodology pill + theme toggle as the reference.
              `aria-label="Primary"` on the nav.
  article.article
    .back link "← All rankings" -> ../index.html
    header.art-head
       <span class="eyebrow">Category</span>
       <h1 itemprop="headline">Title</h1>
       <p class="deck">standfirst</p>
       <time datetime="YYYY-MM-DD">Long Date</time>
       DO NOT add a byline, an "Updated" line, a "Generated by Claude"
       tag, or a "N ranked best -> worst" line.
    div.prose                  intro paragraph(s); link key claims inline.
                               (The methodology block does NOT go here anymore.)
    div.cmp-wrap > table.cmp   comparison table: #, item, Perf, Value, Rel., Score, From
    5 × section.entry          data-rank="1..5", aria-labelledby="rank-N", each contains:
                                  .numeral, .head (h3#rank-N + .verdict + .meta tags + .overall)
                                  .scores (three .row bars; <i style="width:NN%"> = score*10)
                                  .pc (For / Against lists)
                                  1–2 <p class="take"> paragraphs
    aside.method-box           THE METHODOLOGY BOX GOES HERE, AT THE END,
                               immediately AFTER the 5th entry and BEFORE
                               the sources block. Restate the rubric +
                               the three weight chips.
                               aria-labelledby pointing to its h4 id.
    div.prose.sources          numbered <ol> of source links + .disclaimer
  footer.foot                  same as reference: "© 2026" line and a
                               "How rankings are made" link to ../produce.txt.
                               DO NOT add any "Generated by Claude" attribution.

Bar widths: width % = score * 10  (e.g. 9.3 -> width:93%). Keep them in sync
with the printed sub-scores and the comparison table.

------------------------------------------------------------
5a. SEO + AI META (required per article)
------------------------------------------------------------
Every article <head> must include the following, in this order. Use the
reference article as a copy-paste template — only the values change.

  REQUIRED:
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
    <title>{Article Title} — Picked5</title>
    <meta name="description" content="{1–2 sentence summary, ≤160 chars}">
    <meta name="robots" content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1">
    <meta name="googlebot" content="index, follow, max-image-preview:large, max-snippet:-1">
    <meta name="author" content="Picked5">
    <meta name="keywords" content="{8–12 comma-separated relevant terms}">
    <meta name="application-name" content="Picked5">
    <meta name="color-scheme" content="dark light">
    <meta name="theme-color" content="#060a18" media="(prefers-color-scheme: dark)">
    <meta name="theme-color" content="#eef3fb" media="(prefers-color-scheme: light)">
    <link rel="canonical" href="https://pickedfive.com/articles/{slug}.html">

  OPEN GRAPH:
    <meta property="og:type" content="article">
    <meta property="og:site_name" content="Picked5">
    <meta property="og:locale" content="en_US">
    <meta property="og:title" content="{Article Title}">
    <meta property="og:description" content="{social-friendly variant of meta description}">
    <meta property="og:url" content="https://pickedfive.com/articles/{slug}.html">
    <meta property="og:image" content="https://pickedfive.com/assets/og-default.png">
    <meta property="og:image:width" content="1200">
    <meta property="og:image:height" content="630">
    <meta property="article:published_time" content="YYYY-MM-DDT00:00:00Z">
    <meta property="article:modified_time" content="YYYY-MM-DDT00:00:00Z">
    <meta property="article:section" content="{Category, e.g. Smartphones}">
    <meta property="article:author" content="Picked5">
    <meta property="article:tag" content="{tag1}">  <!-- repeat for 3–5 tags -->

  TWITTER:
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="{Article Title}">
    <meta name="twitter:description" content="{≤200 chars}">
    <meta name="twitter:image" content="https://pickedfive.com/assets/og-default.png">

------------------------------------------------------------
5b. STRUCTURED DATA (required per article)
------------------------------------------------------------
Include ONE <script type="application/ld+json"> block in <head> with a
@graph containing THREE schema.org objects:

  1. Article            — headline, description, datePublished, dateModified,
                          inLanguage, mainEntityOfPage, author + publisher
                          (Organization Picked5), articleSection, keywords.
  2. BreadcrumbList     — position 1 = Picked5 home, position 2 = the article.
  3. ItemList           — itemListOrder "ItemListOrderDescending",
                          numberOfItems = 5, one ListItem per ranked entry.
                          Each ListItem.item is a Product with:
                             name, category,
                             offers { price (USD numeric string), priceCurrency:"USD" },
                             review { reviewRating { ratingValue (the FINAL, "8.9"),
                                      bestRating:"10", worstRating:"0" },
                                      author Picked5, reviewBody (the verdict) }.

Keep ratingValue / position / numberOfItems consistent with the visible
ranking — they're audited against the visible scorecards.

------------------------------------------------------------
6. PUBLISHING — UPDATE THE MANIFEST, SITEMAP, AND llms.txt (required)
------------------------------------------------------------
After writing articles/<slug>.html:

  (a) articles.js
      PREPEND a new object to the "articles" array (newest first) and bump
      "updated". The home page sorts by "date" descending and shows the
      newest 10, so the timestamp matters.

      Entry schema (a JavaScript object literal inside window.ARTICLES.articles):
        {
          slug:     "kebab-case-id",                  // matches the html filename
          title:    "Top 5 <Things> of <Year>",
          category: "Smartphones",                    // shown as the card eyebrow
          date:     "YYYY-MM-DD",                     // publication date = sort key
          summary:  "One or two sentences for the card.",
          url:      "articles/<slug>.html",           // relative to index.html
          picks:    ["#1 name", "#2", "#3", "#4", "#5"] // best->worst, for the card preview
        }

      Rules:
        - slug = lowercase, hyphenated, no spaces; the html file is articles/<slug>.html.
        - "picks" is ordered best -> worst and must match the article's ranking.
        - Keep articles.js valid JavaScript: it must set window.ARTICLES, and the
          array must have no trailing commas / no syntax errors (one bad comma
          breaks the whole home page).

  (b) sitemap.xml
      Append a <url> entry for the new article with <loc>, <lastmod> (the
      article date), <changefreq>monthly</changefreq>, <priority>0.8</priority>.

  (c) llms.txt
      Append a bullet under "## Articles" linking to the new article with a
      one-sentence summary of the top picks.

------------------------------------------------------------
7. PRE-PUBLISH CHECKLIST
------------------------------------------------------------
  [ ] Researched current data; sources collected and cited inline + listed.
  [ ] Exactly 5 entries, ordered by FINAL score (best -> worst).
  [ ] Sub-scores * weights actually equal each displayed overall (1 dp).
  [ ] Score bar widths = score * 10, consistent with table + entry numbers.
  [ ] Comparison table matches the five entries.
  [ ] Placement of each item is justified against the rubric in the prose.
  [ ] Methodology box appears AFTER the 5th entry, BEFORE the sources block.
  [ ] <time datetime="YYYY-MM-DD"> appears in art-head.
  [ ] Full SEO meta block (5a) is present and matches article content.
  [ ] JSON-LD @graph (5b) is present: Article + BreadcrumbList + ItemList of
      5 Product/Review entries; ratingValues match the visible scores.
  [ ] Disclaimer paragraph present; no fabricated numbers.
  [ ] articles/<slug>.html uses ../ paths for css/links and reuses style.css.
  [ ] New entry prepended to articles.js; "updated" bumped; file still valid JS.
  [ ] sitemap.xml updated with the new <url>.
  [ ] llms.txt updated with the new article bullet.
================================================================