/*
Theme Name: CupertinoOS
Theme URI: https://example.com/cupertinoos
Author: Nikola Milivojevic
Description: A dense, fast news theme for technology coverage. Two-axis structure (sections and products), roundups, reviews and deals as first-class formats, automatic dark mode, and no webfont requests. Dressed in Sand & Terracotta: a cream ground, a terracotta accent, a sage second voice, Caprasimo over Figtree.
Version: 1.2.2
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cupertinoos
Tags: news, blog, magazine, two-columns, custom-menu, featured-images, editor-style, translation-ready
*/

/* ============================================================
   1. TOKENS

   Light and dark are the same variable names with different
   values, so no component ever hardcodes a colour.
   Contrast ratios below are measured against the surface they
   sit on; everything used for text clears WCAG AA (4.5:1).
   ============================================================ */

:root {
  /* Surfaces — Sand & Terracotta */
  --bg:         #f5ead8;   /* the warm ground */
  --surface:    #fcf5e8;   /* cards, panels — lifted off the ground */
  --surface-2:  #ece0c9;   /* recessed fills, hovers */
  --line:       #ddcdb0;   /* hairlines */
  --line-2:     #c9b494;   /* stronger dividers */

  /* Text — ratios measured against --surface */
  --ink:        #201e1d;   /* 14.8:1 — headlines, body */
  --ink-2:      #453f39;   /*  9.2:1 — standfirst, secondary */
  --muted:      #5e564e;   /*  6.3:1 — excerpts, meta */
  --faint:      #6b6256;   /*  5.3:1 — timestamps, labels */

  /* Accent — terracotta. The base #c67139 clears 3:1 on sand, which is
     enough for fills and chrome but not for text, so --accent is the
     deep ramp step and --accent-fill carries the solid colour. */
  --accent:      #a1551f;  /*  4.9:1 — links, hovers, rules */
  --accent-fill: #c67139;  /* solid buttons, current states */
  --accent-ink:  #241505;  /*  6.2:1 on the fill */
  --accent-weak: rgba(198, 113, 57, .14);

  /* Section colours — sage is the genuine second voice */
  --c-news:     #a1551f;   /* 4.9:1 */
  --c-roundup:  #4f6138;   /* 6.2:1 — sage 700 */
  --c-review:   #7d3f70;   /* 5.4:1 */
  --c-how-to:   #3d6a5d;   /* 5.0:1 */
  --c-guides:   #4f6138;
  --c-deal:     #9c3c1c;   /* 5.9:1 */
  --c-opinion:  #a02c3f;   /* 5.6:1 */

  /* Type — Caprasimo carries the display voice, Figtree the reading,
     IBM Plex Mono every label and number. Real fallbacks first, so the
     page is readable before the webfonts land. See functions.php for
     self-hosting, which is faster and more private. */
  --display: "Caprasimo", Georgia, "Times New Roman", serif;
  --body:    "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --serif:   var(--body);
  --sans:    var(--body);

  /* Rhythm — 16px radii that grow into pills */
  --measure: 70ch;
  --gutter:  clamp(16px, 3.5vw, 32px);
  --radius:  16px;
  --radius-sm: 10px;
  --pill:    999px;
  --shadow:  0 1px 2px rgba(60, 40, 20, .06), 0 8px 24px -8px rgba(60, 40, 20, .14);
  --shell:   1280px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:        #241d16;
    --surface:   #2e251b;
    --surface-2: #3a2f22;
    --line:      #453829;
    --line-2:    #5a4a36;

    --ink:       #f5ead8;   /* 13.9:1 */
    --ink-2:     #d8c9ad;   /*  9.4:1 */
    --muted:     #b6a689;   /*  6.5:1 */
    --faint:     #b6a689;

    --accent:      #e09a63;  /*  7.4:1 */
    --accent-fill: #c67139;
    --accent-ink:  #1b1409;  /*  7.0:1 on the fill */
    --accent-weak: rgba(224, 154, 99, .16);

    --c-news:    #e09a63;
    --c-roundup: #adbd85;
    --c-review:  #d79ac8;
    --c-how-to:  #85c3b0;
    --c-guides:  #adbd85;
    --c-deal:    #ef9a6a;
    --c-opinion: #f0919f;

    --shadow:    0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px -8px rgba(0, 0, 0, .45);
  }
}

:root[data-theme="dark"] {
  --bg:        #241d16;
  --surface:   #2e251b;
  --surface-2: #3a2f22;
  --line:      #453829;
  --line-2:    #5a4a36;

  --ink:       #f5ead8;   /* 13.9:1 */
  --ink-2:     #d8c9ad;   /*  9.4:1 */
  --muted:     #b6a689;   /*  6.5:1 */
  --faint:     #b6a689;

  --accent:      #e09a63;  /*  7.4:1 */
  --accent-fill: #c67139;
  --accent-ink:  #1b1409;  /*  7.0:1 on the fill */
  --accent-weak: rgba(224, 154, 99, .16);

  --c-news:    #e09a63;
  --c-roundup: #adbd85;
  --c-review:  #d79ac8;
  --c-how-to:  #85c3b0;
  --c-guides:  #adbd85;
  --c-deal:    #ef9a6a;
  --c-opinion: #f0919f;

  --shadow:    0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px -8px rgba(0, 0, 0, .45);
}

/* ============================================================
   2. BASE
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 6.5rem;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.55;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, video { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); }
h1, h2, h3, h4 { line-height: 1.2; letter-spacing: -0.015em; margin: 0; }

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

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

.wrap {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-width: 820px; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--ink);
  color: var(--bg);
  padding: 12px 18px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; }

.screen-reader-text {
  border: 0;
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  word-wrap: normal !important;
}

/* ============================================================
   3. HEADER
   Two rows: sections on top, products below. That is the whole
   two-axis structure made visible in one glance.
   ============================================================ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(1.6) blur(10px);
  border-bottom: 1px solid var(--line);
}

.masthead {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-block: 12px;
}

.brand {
  font-size: 23px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.brand__mark { color: var(--accent); }

.site-nav {
  display: flex;
  gap: 2px;
  margin-left: auto;
  flex-wrap: wrap;
}
.site-nav a {
  color: var(--ink-2);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  padding: 8px 11px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  transition: background .12s ease, color .12s ease;
}
.site-nav a:hover { background: var(--surface-2); color: var(--ink); }
.site-nav .current-menu-item > a,
.site-nav a[aria-current="page"] { color: var(--accent); background: var(--accent-weak); }

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink-2);
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  padding: 0;
}
.icon-btn:hover { background: var(--surface-2); color: var(--ink); }

.nav-toggle { display: none; }

/* Product strip */
.productbar {
  border-top: 1px solid var(--line);
  background: var(--surface);
}
.productbar__inner {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-block: 7px;
}
.productbar__inner::-webkit-scrollbar { display: none; }
.productbar a {
  color: var(--muted);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 100px;
  white-space: nowrap;
}
.productbar a:hover { background: var(--surface-2); color: var(--ink); }

/* Search drawer */
.site-search {
  display: none;
  border-top: 1px solid var(--line);
  background: var(--surface);
  padding-block: 12px;
}
.site-search.is-open { display: block; }

.search-form { display: flex; gap: 8px; }
.search-form input[type="search"] {
  flex: 1;
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}
.search-form button {
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent-ink);
  background: var(--accent);
  border: 0;
  border-radius: var(--radius-sm);
  padding: 10px 18px;
  cursor: pointer;
}

@media (max-width: 900px) {
  .nav-toggle { display: inline-grid; margin-left: auto; }
  .site-nav {
    display: none;
    width: 100%;
    order: 3;
    margin-left: 0;
    flex-direction: column;
    gap: 0;
    padding-bottom: 8px;
  }
  .site-nav.is-open { display: flex; }
  .site-nav a { padding: 10px 12px; border-bottom: 1px solid var(--line); border-radius: 0; }
  .masthead { flex-wrap: wrap; }
}

/* ============================================================
   4. BADGES, CHIPS, BYLINES
   ============================================================ */

.badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-news);
  text-decoration: none;
  padding: 3px 7px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, currentColor 12%, transparent);
}
.badge:hover { background: color-mix(in srgb, currentColor 22%, transparent); }
.badge--news    { color: var(--c-news); }
.badge--roundup { color: var(--c-roundup); }
.badge--review  { color: var(--c-review); }
.badge--how-to  { color: var(--c-how-to); }
.badge--guides  { color: var(--c-guides); }
.badge--deal    { color: var(--c-deal); }
.badge--opinion { color: var(--c-opinion); }

.chips { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.chip {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
  background: var(--surface-2);
  border-radius: 100px;
  padding: 2px 9px;
}
.chip:hover { color: var(--ink); background: var(--line); }

.byline {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: baseline;
  font-size: 13px;
  color: var(--faint);
}
.byline__author { color: var(--ink-2); font-weight: 600; text-decoration: none; }
.byline__author:hover { color: var(--accent); }
.byline__updated { color: var(--c-deal); font-weight: 600; }

/* ============================================================
   5. HOME — lead, river, sidebar
   ============================================================ */

.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 40px;
  align-items: start;
  padding-block: 28px 64px;
}
@media (max-width: 1040px) {
  .layout { grid-template-columns: 1fr; gap: 32px; }
}

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 16px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--ink);
}
.section-head h2 {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.section-head a {
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

/* Lead story */
.lead { margin-bottom: 28px; }
.lead__media { display: block; }
.lead__media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--surface-2);
  margin-bottom: 14px;
}
.lead__media img { width: 100%; height: 100%; object-fit: cover; }
.lead__title {
  font-size: clamp(28px, 3.8vw, 44px);
  font-weight: 600;
  letter-spacing: -0.025em;
  margin: 8px 0 10px;
}
.lead__title a { color: var(--ink); text-decoration: none; }
.lead__title a:hover { color: var(--accent); }
.lead__dek {
  font-size: 18px;
  color: var(--muted);
  margin: 0 0 10px;
  max-width: 62ch;
}

/* Secondary cards under the lead */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 24px;
  margin-bottom: 36px;
}
.card { display: block; }
.card__media { display: block; }
.card__media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--surface-2);
  margin-bottom: 10px;
}
.card__media img { width: 100%; height: 100%; object-fit: cover; }
.card__title {
  font-size: 19px;
  font-weight: 600;
  margin: 6px 0;
}
.card__title a { color: var(--ink); text-decoration: none; }
.card__title a:hover { color: var(--accent); }

/* The river: the chronological list that does most of the work */
.river { list-style: none; margin: 0; padding: 0; }
.river__item {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 16px;
  padding-block: 18px;
  border-bottom: 1px solid var(--line);
}
.river__item:first-child { padding-top: 0; }
.river__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.river__media img { width: 100%; height: 100%; object-fit: cover; }
.river__title {
  font-size: 20px;
  font-weight: 600;
  margin: 5px 0 6px;
}
.river__title a { color: var(--ink); text-decoration: none; }
.river__title a:hover { color: var(--accent); }
.river__dek {
  font-size: 14px;
  color: var(--muted);
  margin: 0 0 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (max-width: 560px) {
  .river__item { grid-template-columns: 96px minmax(0, 1fr); gap: 12px; }
  .river__title { font-size: 16px; }
  .river__dek { display: none; }
}

/* ============================================================
   6. SIDEBAR
   ============================================================ */

.sidebar { display: grid; gap: 24px; position: sticky; top: 96px; }
@media (max-width: 1040px) { .sidebar { position: static; } }

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
}
.panel__title {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
  margin: 0 0 12px;
}
.panel ul { list-style: none; margin: 0; padding: 0; }
.panel li { padding-block: 10px; border-bottom: 1px solid var(--line); }
.panel li:last-child { border-bottom: 0; padding-bottom: 0; }
.panel li:first-child { padding-top: 0; }
.panel a { color: var(--ink); text-decoration: none; font-weight: 600; font-size: 15px; }
.panel a:hover { color: var(--accent); }

.rank {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 10px;
  align-items: start;
}
.rank__n {
  font-size: 15px;
  font-weight: 800;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   7. ARTICLE
   ============================================================ */

.article { padding-block: 28px 64px; }

.article-head { max-width: var(--measure); }
.article-head__badges { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; }
.article-head__title {
  font-size: clamp(30px, 4.4vw, 48px);
  font-weight: 600;
  letter-spacing: -0.03em;
  margin: 0 0 12px;
}
.article-head__dek {
  font-size: 21px;
  font-style: italic;
  line-height: 1.5;
  color: var(--ink-2);
  margin: 0 0 16px;
}
.article-head__byline { padding-block: 12px; border-block: 1px solid var(--line); }

.figure-lead { margin: 24px 0; }
.figure-lead img { width: 100%; border-radius: var(--radius); }
.figure-lead figcaption,
.wp-caption-text,
.wp-block-image figcaption {
  font-size: 13px;
  color: var(--faint);
  margin-top: 8px;
}

.prose {
  max-width: var(--measure);
  font-size: 18.5px;
  line-height: 1.7;
  color: var(--ink);
}
.prose > * + * { margin-top: 1.25em; }
.prose p { margin: 0; }
.prose h2 { font-size: 27px; font-weight: 600; margin-top: 1.8em; }
.prose h3 { font-size: 22px; font-weight: 600; margin-top: 1.5em; }
.prose a { text-underline-offset: 3px; }
.prose ul, .prose ol { padding-left: 1.3em; margin-block: 0; }
.prose li + li { margin-top: .4em; }
.prose img { border-radius: var(--radius); }
.prose blockquote,
.prose .wp-block-quote {
  margin-inline: 0;
  padding: 4px 0 4px 20px;
  border-left: 3px solid var(--accent);
  color: var(--ink-2);
  font-style: italic;
}
.prose code, .prose .wp-block-code {
  font-family: var(--mono);
  font-size: .88em;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 1px 5px;
}
.prose pre {
  background: #0f1419;
  color: #e9edf2;
  border-radius: var(--radius);
  padding: 18px 20px;
  overflow-x: auto;
  font-size: 14px;
  line-height: 1.6;
}
.prose pre code { background: none; border: 0; padding: 0; color: inherit; }
.prose table { width: 100%; border-collapse: collapse; font-size: 15px; }
.prose th, .prose td { border: 1px solid var(--line); padding: 8px 12px; text-align: left; }
.prose th { background: var(--surface); font-weight: 700; }
.prose .wp-block-table { overflow-x: auto; }
.prose .wp-block-separator { border: 0; border-top: 1px solid var(--line); }

.alignleft  { float: left;  margin: .4em 1.5em 1em 0; }
.alignright { float: right; margin: .4em 0 1em 1.5em; }
.aligncenter { clear: both; display: block; margin-inline: auto; }
.alignwide  { max-width: min(1100px, 100%); margin-inline: auto; }

/* ============================================================
   8. FORMAT BOXES — roundup, review, deal
   These are what separate a news site from a blog.
   ============================================================ */

.box {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 18px 20px;
  margin: 24px 0;
  max-width: var(--measure);
}
.box__label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
  margin: 0 0 10px;
}
.box ul { margin: 0; padding-left: 1.2em; }
.box li + li { margin-top: .35em; }

.status-bar {
  display: flex;
  gap: 10px 20px;
  flex-wrap: wrap;
  align-items: center;
  padding: 12px 16px;
  border-radius: var(--radius);
  background: var(--accent-weak);
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
  margin: 20px 0;
  max-width: var(--measure);
  font-size: 14px;
}
.status-bar strong { color: var(--ink); }

/* Review */
.score {
  font-family: var(--mono);
  display: inline-grid;
  place-items: center;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: var(--c-review);
  color: #fff;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.03em;
  flex: none;
}
.score small { display: block; font-size: 10px; font-weight: 600; opacity: .85; letter-spacing: .06em; }

.verdict {
  display: flex;
  gap: 18px;
  align-items: center;
  border: 1px solid var(--line);
  border-left: 4px solid var(--c-review);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 18px 20px;
  margin: 24px 0;
  max-width: var(--measure);
}
.verdict p { margin: 0; color: var(--ink-2); }

.proscons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 24px 0;
  max-width: var(--measure);
}
@media (max-width: 620px) { .proscons { grid-template-columns: 1fr; } }
.proscons__col { border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; background: var(--surface); }
.proscons__col h3 { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 10px; }
.proscons__col--pro h3 { color: #0f766e; }
.proscons__col--con h3 { color: #be123c; }
:root[data-theme="dark"] .proscons__col--pro h3 { color: #4fd1c5; }
:root[data-theme="dark"] .proscons__col--con h3 { color: #ff8099; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .proscons__col--pro h3 { color: #4fd1c5; }
  :root:not([data-theme="light"]) .proscons__col--con h3 { color: #ff8099; }
}
.proscons ul { margin: 0; padding-left: 1.1em; font-size: 15px; color: var(--ink-2); }

/* Deal */
.pricebox {
  display: flex;
  gap: 18px;
  align-items: center;
  flex-wrap: wrap;
  border: 1px solid color-mix(in srgb, var(--c-deal) 35%, transparent);
  background: color-mix(in srgb, var(--c-deal) 8%, transparent);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin: 24px 0;
  max-width: var(--measure);
}
.pricebox__now { font-family: var(--mono); font-size: 28px; font-weight: 600; letter-spacing: -0.03em; color: var(--ink); }
.pricebox__was { font-size: 16px; color: var(--faint); text-decoration: line-through; }
.pricebox__meta { font-size: 13px; color: var(--muted); }
.btn {
  display: inline-block;
  font-size: 15px;
  font-weight: 700;
  color: var(--accent-ink);
  background: var(--accent);
  border: 0;
  border-radius: var(--radius-sm);
  padding: 11px 20px;
  text-decoration: none;
  cursor: pointer;
}
.btn:hover { filter: brightness(1.08); }
.btn--deal { background: var(--c-deal); color: #fff; }

.disclosure {
  font-size: 12.5px;
  color: var(--faint);
  border-top: 1px solid var(--line);
  padding-top: 10px;
  margin-top: 20px;
  max-width: var(--measure);
}

/* ============================================================
   9. RELATED + PAGINATION + FOOTER
   ============================================================ */

.related { margin-top: 48px; }

.pagination {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 32px;
  font-size: 14px;
  font-weight: 600;
}
.pagination .page-numbers {
  color: var(--ink-2);
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 8px 13px;
  background: var(--surface);
}
.pagination .page-numbers:hover { border-color: var(--accent); color: var(--accent); }
.pagination .page-numbers.current {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}
.pagination .dots { border: 0; background: none; }

.postnav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  margin-top: 40px;
  max-width: var(--measure);
}
@media (max-width: 620px) { .postnav { grid-template-columns: 1fr; } }
.postnav a { background: var(--bg); padding: 16px 18px; text-decoration: none; color: var(--ink); }
.postnav a:hover { background: var(--surface); }
.postnav .next { text-align: right; }
@media (max-width: 620px) { .postnav .next { text-align: left; } }
.postnav__dir { display: block; font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--accent); margin-bottom: 5px; }
.postnav__ttl { font-size: 15px; font-weight: 600; line-height: 1.3; }

.site-footer {
  border-top: 1px solid var(--line);
  background: var(--surface);
  padding-block: 36px;
  margin-top: 64px;
}
.site-footer__inner {
  display: flex;
  gap: 16px 36px;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}
.site-footer__brand { font-size: 19px; font-weight: 700; letter-spacing: -0.02em; }
.site-footer nav { display: flex; gap: 18px; flex-wrap: wrap; }
.site-footer nav a { color: var(--muted); text-decoration: none; font-size: 14px; font-weight: 600; }
.site-footer nav a:hover { color: var(--accent); }
.site-footer__meta { font-size: 13px; color: var(--faint); margin: 0; }

/* ============================================================
   10. ARCHIVE + 404 + PAGE
   ============================================================ */

.page-head { padding-block: 28px 4px; }
.page-head__eyebrow {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 8px;
}
.page-head__title {
  font-size: clamp(28px, 4.2vw, 42px);
  font-weight: 600;
  letter-spacing: -0.03em;
  margin: 0;
}
.page-head__sub { color: var(--muted); margin: 10px 0 0; max-width: 60ch; }

.notfound {
  text-align: center;
  padding-block: 88px;
  display: grid;
  gap: 14px;
  place-items: center;
}

.comments-area { margin-top: 56px; max-width: var(--measure); border-top: 1px solid var(--line); padding-top: 28px; }
.comments-area .comment-list { list-style: none; padding: 0; margin: 0; }
.comments-area .comment-list li { padding-block: 16px; border-bottom: 1px solid var(--line); }
.comments-area input[type="text"],
.comments-area input[type="email"],
.comments-area input[type="url"],
.comments-area textarea {
  width: 100%;
  font: inherit;
  background: var(--bg);
  color: var(--ink);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}
.comments-area input[type="submit"] {
  font: inherit;
  font-weight: 700;
  background: var(--accent);
  color: var(--accent-ink);
  border: 0;
  border-radius: var(--radius-sm);
  padding: 11px 20px;
  cursor: pointer;
}

/* ============================================================
   11. LABEL FACE
   Figtree carries the reading; IBM Plex Mono carries every
   label, timestamp, badge and number — the same split the
   original design used.
   ============================================================ */

.site-nav a,
.productbar a,
.badge,
.chip,
.byline,
.panel__title,
.box__label,
.section-head h2,
.postnav__dir,
.pagination,
.page-head__eyebrow,
.disclosure,
.figure-lead figcaption,
.wp-caption-text,
.wp-block-image figcaption,
.proscons__col h3,
.pricebox__was,
.pricebox__meta,
.search-form button,
.btn {
  font-family: var(--mono);
}

.site-nav a     { font-size: 12.5px; letter-spacing: 0.02em; }
.productbar a   { font-size: 12px;   letter-spacing: 0.02em; }
.byline         { font-size: 12.5px; letter-spacing: 0.01em; }
.badge          { font-size: 10.5px; }
.section-head h2 { letter-spacing: 0.08em; }
.btn,
.search-form button { font-size: 13px; letter-spacing: 0.03em; }

.prose blockquote,
.prose .wp-block-quote { font-family: var(--body); }

/* ============================================================
   12. SAND & TERRACOTTA
   The display voice and the round geometry. Caprasimo ships one
   weight, so every heading that used to ask for 600/700 asks for
   400 here — anything heavier is a synthesised bold.
   ============================================================ */

.brand,
.site-footer__brand,
h1, h2, h3, h4,
.lead__title,
.card__title,
.river__title,
.article-head__title,
.page-head__title,
.postnav__ttl,
.prose h2,
.prose h3,
.notfound h1 {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: -0.005em;
}

/* Labels stay on the mono, whatever tag they sit in. */
.section-head h2,
.panel__title,
.box__label,
.proscons__col h3 { font-family: var(--mono); font-weight: 700; letter-spacing: 0.08em; }

.brand { letter-spacing: -0.01em; }
.brand__logo { display: inline-grid; place-items: center; flex: none; margin-inline-end: 7px; }
.brand__logo svg { display: block; }
.site-footer__brand { display: inline-flex; align-items: center; gap: 8px; }
.lead__title { line-height: 1.04; }
.article-head__title { line-height: 1.04; }

/* Figtree has no reading italic worth setting; the standfirst carries
   weight and colour instead. */
.article-head__dek { font-style: normal; font-weight: 500; }

/* Round everything that can be round. */
.btn,
.icon-btn,
.badge,
.chip,
.score,
.search-form input[type="search"],
.search-form button,
.pagination .page-numbers,
.comments-area input[type="text"],
.comments-area input[type="email"],
.comments-area input[type="url"],
.comments-area input[type="submit"] { border-radius: var(--pill); }

.icon-btn { width: 38px; height: 38px; }
.badge { padding: 4px 10px; }
.chip { padding: 4px 12px; }
.btn, .search-form button { padding: 12px 24px; }
.pagination .page-numbers { padding: 9px 16px; }
.comments-area textarea { border-radius: var(--radius); }
.panel, .box, .card__media, .lead__media, .river__media, .verdict, .pricebox, .status-bar,
.proscons__col, .postnav, .figure-lead img, .prose img { border-radius: var(--radius); }
.river__media { border-radius: var(--radius-sm); }

/* Solid fills take the terracotta base rather than the text-safe step. */
.btn,
.search-form button,
.comments-area input[type="submit"] { background: var(--accent-fill); color: var(--accent-ink); }
.btn:hover,
.search-form button:hover,
.comments-area input[type="submit"]:hover { background: var(--accent); color: #fff; filter: none; }
.pagination .page-numbers.current { background: var(--accent-fill); border-color: var(--accent-fill); color: var(--accent-ink); }
.rank__n { color: var(--accent); }

/* The section rule is a soft terracotta line, not a hard black bar. */
.section-head { border-bottom: 2px solid var(--accent-fill); }

/* Photographs sit back into the warm page instead of on top of it. */
.lead__media img,
.card__media img,
.river__media img,
.figure-lead img { filter: saturate(.86) contrast(.96); }

/* The header is a warm pane, not a grey one. */
.site-header { background: color-mix(in srgb, var(--bg) 90%, transparent); }
.productbar { background: color-mix(in srgb, var(--surface) 70%, transparent); }

.prose pre { background: #241d16; color: var(--bg); border-radius: var(--radius); }
::selection { background: var(--accent-weak); }

/* ============================================================
   13. DEVICE OPTIMISATION — iPhone, iPad, MacBook

   Ordered by cause, not by device, because one fix usually
   serves several: input sizing and safe areas are physical
   facts of the hardware, pointer capability is a fact of the
   input method, and viewport width is what's left.

   Breakpoints below are logical CSS pixels, which is what the
   browser reports — not the marketing resolution:
     iPhone SE ........ 375 x 667
     iPhone 15/16 ..... 393 x 852
     iPhone Pro Max ... 430 x 932
     iPad mini ........ 744 x 1133
     iPad Air/Pro 11 .. 820 x 1180
     iPad Pro 12.9 .... 1024 x 1366
     MacBook Air 13 ... 1440 x 900  (1470 on M2/M3)
     MacBook Pro 14 ... 1512 x 982
     MacBook Pro 16 ... 1728 x 1117
   ============================================================ */

/* ---- Safari needs the prefix or the header blur silently
        does nothing on every Apple device. -------------------- */
.site-header {
  -webkit-backdrop-filter: saturate(1.6) blur(10px);
}

/* ---- Notch, Dynamic Island, home indicator.
        In portrait these insets are 0 and nothing changes; in
        landscape the left/right insets keep text out from under
        the camera housing. ------------------------------------ */
.wrap {
  padding-inline:
    max(var(--gutter), env(safe-area-inset-left))
    max(var(--gutter), env(safe-area-inset-right));
}
.site-header { padding-top: env(safe-area-inset-top); }
.site-footer { padding-bottom: max(28px, env(safe-area-inset-bottom)); }

/* ---- iOS Safari zooms the whole page when a focused form
        control is smaller than 16px, then leaves you scrolled
        sideways. The search field was 14px. ------------------- */
@supports (-webkit-touch-callout: none) {
  input, select, textarea { font-size: 16px; }
}

/* ---- Touch behaviour: no grey flash on tap, no rubber-band
        chaining to the page behind the search drawer. --------- */
@media (pointer: coarse) {
  a, button, [role="button"] { -webkit-tap-highlight-color: transparent; }
  body { overscroll-behavior-y: none; }

  /* Apple HIG asks for 44x44pt. The icon buttons were 36. */
  .icon-btn { width: 44px; height: 44px; }
  .site-nav a { padding-block: 12px; }
  .productbar a { padding-block: 9px; }
  .pagination .page-numbers { min-width: 44px; min-height: 44px; }
}

/* ---- On a touch screen :hover fires on tap and then sticks
        until you tap elsewhere, so a tapped headline stays
        terracotta on the page you come back to. Hand every
        hover state back to real pointers. -------------------- */
@media (hover: none) {
  .site-nav a:hover,
  .icon-btn:hover,
  .productbar a:hover,
  .panel a:hover,
  .postnav a:hover { background: none; color: inherit; }

  .lead__title a:hover,
  .card__title a:hover,
  .river__title a:hover,
  .byline__author:hover,
  .site-footer nav a:hover { color: inherit; }

  .badge:hover { background: color-mix(in srgb, currentColor 12%, transparent); }
  .chip:hover { color: var(--muted); background: var(--surface-2); }
  .btn:hover { filter: none; }
  .pagination .page-numbers:hover { border-color: var(--line); color: inherit; }

  /* Give the product strip momentum and snap instead of a
     scrollbar nobody can grab. */
  .productbar__inner {
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }
  .productbar a { scroll-snap-align: start; }
}

/* ---- iPhone, portrait. One column everywhere; the lead image
        is the only thing worth full width. ------------------- */
@media (max-width: 430px) {
  body { font-size: 16px; }

  .layout { padding-block: 16px 40px; gap: 24px; }
  .card-grid { grid-template-columns: 1fr; gap: 20px; margin-bottom: 24px; }

  /* A 16:9 card image at 360px wide is 200px tall — too much of
     the screen for a secondary story. Crop shallower. */
  .card__media { aspect-ratio: 2 / 1; }

  .lead__dek { font-size: 16px; }
  .card__title { font-size: 17px; }

  /* Panels lose their frame and become plain sections: at this
     width a border inside a border wastes 34px of measure. */
  .panel { padding: 14px 0; background: none; border: 0; border-top: 1px solid var(--line); border-radius: 0; }

  .search-form { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
  .prose { font-size: 17px; }
  .prose pre { border-radius: var(--radius-sm); font-size: 13px; }
}

/* ---- iPhone, landscape. The viewport is ~390px tall, so a
        sticky header at full height eats a third of it. ------- */
@media (orientation: landscape) and (max-height: 460px) {
  .site-header { position: static; }
  .productbar { display: none; }
  .sidebar { position: static; }
  html { scroll-padding-top: 1rem; }
}

/* ---- iPad, portrait (744–1024). Wide enough for a real grid,
        too narrow for the sidebar beside the river — the
        existing 1040px rule already stacks it, so the job here
        is making the stacked sidebar earn its full width. ----- */
@media (min-width: 745px) and (max-width: 1024px) {
  .sidebar {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    align-items: start;
    gap: 20px;
  }
  .card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .river__item { grid-template-columns: 180px minmax(0, 1fr); }
  .lead__dek { font-size: 19px; }
}

/* ---- iPad, landscape and 13" MacBook (1025–1366).
        The sidebar returns at 1040px. 320px is tight for panel
        headlines at this width, so widen it and pull the gap
        in — the shell is 1280px and there is no slack. ------- */
@media (min-width: 1041px) and (max-width: 1366px) {
  .layout { grid-template-columns: minmax(0, 1fr) 300px; gap: 32px; }
  .river__item { grid-template-columns: 150px minmax(0, 1fr); }
}

/* ---- 15" and 16" MacBook and external displays (1600+).
        Let the shell breathe rather than stranding the river in
        a 1280px column with 300px of empty page either side. -- */
@media (min-width: 1600px) {
  :root { --shell: 1440px; --measure: 74ch; }
  .layout { grid-template-columns: minmax(0, 1fr) 360px; gap: 56px; }
  .card-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
  .river__item { grid-template-columns: 160px minmax(0, 1fr); }
}

/* ---- Retina. Every Apple screen here is 2x or 3x, so hairlines
        specified as 1px render at a true 1px and read heavier
        than intended against the warm ground. ---------------- */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .panel, .productbar, .site-header, .river__item, .site-footer {
    border-color: color-mix(in srgb, var(--line) 82%, transparent);
  }
}

/* ---- Printing from a Mac: drop the furniture. -------------- */
@media print {
  .site-header, .productbar, .site-search, .sidebar,
  .pagination, .postnav, .site-footer nav, .skip-link { display: none; }
  .layout { display: block; padding: 0; }
  body { font-size: 11pt; background: #fff; color: #000; }
  .prose a::after { content: " (" attr(href) ")"; font-size: 9pt; word-break: break-all; }
}

/* ============================================================
   14. ARCHIVE + PAGE TEMPLATES

   Three archive layouts, because roundups, reviews and deals
   are read for different reasons: a shelf you browse, a list
   you scan by number, a grid you scan by price.
   ============================================================ */

/* ---- Roundups: the shelf ---------------------------------- */
.shelf {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 28px;
  margin-bottom: 40px;
}
.shelf__item {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.shelf__media {
  display: block;
  aspect-ratio: 16 / 9;
  background: var(--surface-2);
}
.shelf__media img { width: 100%; height: 100%; object-fit: cover; }
.shelf__body { padding: 14px 16px 16px; display: flex; flex-direction: column; flex: 1; }
.shelf__title { font-size: 19px; font-weight: 600; margin: 8px 0 6px; }
.shelf__title a { color: var(--ink); text-decoration: none; }
.shelf__status {
  font-size: 14px;
  color: var(--muted);
  margin: 0 0 12px;
}
.shelf__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.shelf__updated { font-family: var(--mono); font-size: 11px; color: var(--faint); }

/* Confidence is a claim about reporting quality, so it reads as a
   label, not a badge — and the colour is a hint, never the only cue. */
.conf {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: var(--pill);
  border: 1px solid currentColor;
  color: var(--faint);
}
.conf--high   { color: #0f766e; }
.conf--medium { color: var(--accent); }
.conf--low    { color: var(--faint); }

/* ---- Reviews: the score list ------------------------------ */
.scorelist { list-style: none; margin: 0 0 40px; padding: 0; }
.scorelist__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 140px;
  gap: 20px;
  align-items: start;
  padding-block: 22px;
  border-bottom: 1px solid var(--line);
}
.scorelist__item:first-child { padding-top: 0; }

.score--sm {
  font-size: 26px;
  width: 68px;
  height: 68px;
  flex: none;
}
.score--none { color: var(--faint); background: var(--surface-2); }

.scorelist__title { font-size: 21px; font-weight: 600; margin: 6px 0 6px; }
.scorelist__title a { color: var(--ink); text-decoration: none; }
.scorelist__verdict {
  font-size: 15px;
  color: var(--muted);
  margin: 0 0 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.scorelist__price { font-family: var(--mono); font-weight: 600; color: var(--ink-2); }
.scorelist__media {
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface-2);
}
.scorelist__media img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 720px) {
  .scorelist__item { grid-template-columns: auto minmax(0, 1fr); gap: 14px; }
  .scorelist__media { display: none; }
  .score--sm { font-size: 20px; width: 54px; height: 54px; }
  .scorelist__title { font-size: 18px; }
}

/* ---- Deals: the price grid -------------------------------- */
.dealgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 24px;
  margin-bottom: 40px;
}
.deal-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.deal-card__media {
  display: block;
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--surface-2);
}
.deal-card__media img { width: 100%; height: 100%; object-fit: cover; }
.deal-card__flag {
  position: absolute;
  inset-inline-start: 10px;
  inset-block-start: 10px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: var(--ink);
  color: var(--bg);
  padding: 4px 8px;
  border-radius: var(--radius-sm);
}
.deal-card__body { padding: 14px 16px 16px; display: flex; flex-direction: column; flex: 1; }
.deal-card__title { font-size: 17px; font-weight: 600; margin: 8px 0 10px; }
.deal-card__title a { color: var(--ink); text-decoration: none; }
.deal-card__price { display: flex; align-items: baseline; gap: 8px; margin: 0 0 4px; }
.deal-card__price .pricebox__now { font-size: 24px; }
.deal-card__meta { font-size: 13px; color: var(--muted); margin: 0 0 14px; }

/* An ended deal stays legible but stops competing. The buy button is
   removed in the template, not just dimmed here. */
.deal-card.is-expired { opacity: .62; }
.deal-card.is-expired .pricebox__now { text-decoration: line-through; color: var(--faint); }

.btn--sm { font-size: 13px; padding: 8px 14px; margin-top: auto; align-self: start; }

.disclosure--top { margin: 0 0 24px; }

/* ---- Page templates --------------------------------------- */

/* Full width: the page may be wide, the prose is not. */
.page-wide { padding-block: 28px 64px; }
.prose--measured > * { max-width: var(--measure); }
.prose--measured > .alignwide,
.prose--measured > .alignfull,
.prose--measured > figure,
.prose--measured > table,
.prose--measured > pre { max-width: none; }

/* Landing hero */
.page-landing { padding-bottom: 72px; }
.hero {
  padding-block: 56px 32px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 32px;
  background:
    radial-gradient(120% 140% at 12% 0%, var(--accent-weak) 0%, transparent 58%),
    var(--bg);
}
.hero__eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 12px;
}
.hero__title {
  font-family: var(--display);
  font-size: clamp(34px, 6vw, 60px);
  font-weight: 400;
  margin: 0 0 14px;
}
.hero__dek {
  font-size: clamp(17px, 2vw, 21px);
  color: var(--ink-2);
  margin: 0;
  max-width: 54ch;
}
.hero__media {
  margin: 0 0 36px;
  border-radius: var(--radius);
  overflow: hidden;
}
.hero__media img { width: 100%; height: auto; }

@media (max-width: 430px) {
  .hero { padding-block: 32px 22px; margin-bottom: 24px; }
  .shelf, .dealgrid { grid-template-columns: 1fr; gap: 18px; }
  .page-wide { padding-block: 16px 40px; }
}

@media (hover: hover) {
  .shelf__title a:hover,
  .scorelist__title a:hover,
  .deal-card__title a:hover { color: var(--accent); }
  .shelf__item:hover,
  .deal-card:hover { border-color: var(--line-2); }
}

/* ============================================================
   15. MOBILE HARDENING

   Everything here fixes a way the phone layout can break
   sideways. Horizontal overflow is the worst failure mode on a
   phone: one wide element and the whole page scrolls, every
   section gets a dead margin, and the sticky header detaches
   from the right edge. The causes are always the same handful
   of things — tables, code, long URLs, fixed-width flex rows —
   so each gets handled at the source.
   ============================================================ */

/* ---- Containment. `clip` rather than `hidden`, because
        `hidden` on a body ancestor silently kills
        position: sticky on the header and sidebar. ----------- */
html, body { overflow-x: clip; max-width: 100%; }

/* ---- Long words, URLs and inline code are the most common
        single cause. A pasted tracking URL in a paragraph will
        push the page 400px wide on its own. ------------------ */
.prose,
.prose p,
.prose li,
.lead__dek,
.card__title,
.river__title,
.shelf__title,
.scorelist__title,
.article-head__title,
.page-head__title,
.hero__title,
.comments-area { overflow-wrap: break-word; }

.prose a, .prose code { word-break: break-word; }

/* ---- Raw tables. Only .wp-block-table had a scroll container,
        so a table pasted as HTML, or one from an imported post,
        overflowed. Wrap every table in its own scroller. ----- */
.prose table { display: block; overflow-x: auto; max-width: 100%; }
.prose table thead, .prose table tbody { display: table; width: 100%; }
.prose .wp-block-table > table { display: table; }
.prose iframe,
.prose embed,
.prose object,
.prose video { max-width: 100%; }

/* ---- Blocks that set their own width. ------------------------ */
.prose > .alignfull,
.prose > .alignwide { max-width: 100%; margin-inline: 0; }

@media (max-width: 430px) {

  /* Masthead: brand plus three 44px controls on a 390px row.
     `flex: 1` here was wrong — it expands to `1 1 0%`, so the box
     collapsed to a zero basis, shrank under its own text, and the
     wordmark spilled out across the buttons. `0 1 auto` keeps the
     basis at the text width, and the font scales with the viewport
     so it never needs to overflow in the first place. */
  .masthead { gap: 10px; padding-block: 8px; }
  .brand {
    flex: 0 1 auto;
    min-width: 0;
    gap: 8px;
    font-size: clamp(15px, 4.4vw, 20px);
    letter-spacing: -0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .brand__logo { flex: none; }
  .brand__logo svg { width: 26px; height: 26px; }

  /* The toggle carries the auto margin, so the three controls stay
     pinned right and the brand never fights them for space. */
  .nav-toggle { margin-left: auto; }

  /* All three controls fit once the gap is tightened: 3 x 44px plus
     three 8px gaps leaves ~200px of brand on a 390px screen, which
     is enough for a two-word wordmark at 19px. The 44px targets
     stay — shrinking them back would undo the accessibility fix. */
  .masthead .icon-btn { flex: none; }

  /* Price row: value, strikethrough, retailer and button in one
     flex line overflowed. Stack it. */
  .pricebox {
    flex-wrap: wrap;
    gap: 8px 12px;
    padding: 14px;
  }
  .pricebox .btn { width: 100%; text-align: center; }
  .pricebox__now { font-size: 24px; }

  /* Score circle beside a headline leaves ~250px of measure.
     Put the score above the title instead. */
  .scorelist__item { grid-template-columns: 1fr; gap: 10px; }
  .score--sm { width: 48px; height: 48px; font-size: 18px; }
  .score--sm small { display: none; }

  /* Boxes and status bars lose their side padding so text keeps
     the full measure. */
  .box, .verdict { padding: 14px; }
  .status-bar { flex-wrap: wrap; gap: 6px 10px; font-size: 13px; }

  /* Comment form controls sit edge to edge. */
  .comments-area { margin-top: 36px; padding-top: 20px; }
  .comments-area input[type="submit"] { width: 100%; }

  /* Pagination: seven numbered links do not fit. mid_size is 1 in
     PHP, so this only has to survive prev / 1 / … / current / next. */
  .pagination { flex-wrap: wrap; gap: 6px; justify-content: center; }

  /* Headings were still running long at 3 words per line. */
  .article-head__title { font-size: clamp(26px, 8vw, 34px); }
  .page-head__title { font-size: clamp(24px, 7.5vw, 32px); }
  .hero__title { font-size: clamp(30px, 9vw, 40px); }
  .prose h2 { font-size: 22px; }
  .prose h3 { font-size: 19px; }

  /* Figures and lead images go edge to edge: on a 390px screen a
     32px gutter either side wastes 16% of the image. */
  .figure-lead,
  .lead__media,
  .hero__media {
    margin-inline: calc( -1 * max(var(--gutter), env(safe-area-inset-left)) );
    border-radius: 0;
  }
  .figure-lead img, .lead__media img, .hero__media img { border-radius: 0; }
}

/* ---- Very narrow: iPhone SE at 375px, and iPad Split View,
        which can hand a page a 320px viewport on a 12.9" screen. */
@media (max-width: 375px) {
  :root { --gutter: 14px; }
  body { font-size: 15.5px; }
  .masthead { gap: 8px; }
  .masthead .icon-btn { width: 42px; height: 42px; }
  .river__item { grid-template-columns: 80px minmax(0, 1fr); }
  .prose { font-size: 16.5px; }
  .chips { display: none; }
}

/* ---- Deal meta: retailer and expiry were joined by a middot that
        had to be echoed conditionally, so an absent retailer left a
        leading dot. Spacing separates them instead — nothing to
        omit, and it wraps cleanly on a narrow card. -------------- */
.pricebox__meta,
.deal-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
}