/* ==========================================================================
   "Professional" style — magazine / large-scale knowledge site layout

   - Fonts (English site, Latin subset only — the browser loads what it needs):
       Inter           body text, UI
       Space Grotesk   headings (grotesk sans — close to the TechCrunch look)
       JetBrains Mono  code
     All three are variable fonts under the OFL licence: FONTS-LICENSE.txt.
     (TechCrunch uses NB International Pro / Yellix — commercial fonts, cannot be embedded.)
   - Colours, font sizes, spacing: edit the variables in :root.
   - HTML classes: docs/STYLE-CLASSES.md.
   ========================================================================== */

/* ── Font ─────────────────────────────────────────────────── */

@font-face { font-family: "Inter Variable"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url(assets/fonts/inter-latin-ext-wght-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter Variable"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url(assets/fonts/inter-latin-wght-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter Variable"; font-style: italic; font-display: swap; font-weight: 100 900;
  src: url(assets/fonts/inter-latin-ext-wght-italic.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter Variable"; font-style: italic; font-display: swap; font-weight: 100 900;
  src: url(assets/fonts/inter-latin-wght-italic.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Space Grotesk Variable"; font-style: normal; font-display: swap; font-weight: 300 700;
  src: url(assets/fonts/space-grotesk-latin-ext-wght-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Space Grotesk Variable"; font-style: normal; font-display: swap; font-weight: 300 700;
  src: url(assets/fonts/space-grotesk-latin-wght-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "JetBrains Mono Variable"; font-style: normal; font-display: swap; font-weight: 100 800;
  src: url(assets/fonts/jetbrains-mono-latin-ext-wght-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "JetBrains Mono Variable"; font-style: normal; font-display: swap; font-weight: 100 800;
  src: url(assets/fonts/jetbrains-mono-latin-wght-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ── Variables ────────────────────────────────────────────── */

:root {
  --c-bg: #eceff0;                /* page background — visible in the gaps between blocks */
  --c-surface: #ffffff;           /* background of each block */
  --c-subtle: #f4f6f2;
  --c-text: #111a15;
  --c-muted: #5a665e;
  --c-border: #e2e6e0;
  --c-rule: #111a15;              /* heavy rule at the top of each block */
  --c-brand: #14532d;             /* forest green — logo, buttons, links */
  --c-brand-ink: #ffffff;
  --c-brand-soft: #e8f2ea;
  --c-kicker: #166534;            /* category label */
  --c-accent: #b45309;            /* accent: menu underline, table of contents */
  --c-link: #166534;
  --c-danger: #b42318;
  --c-success: #166534;
  --c-code-bg: #f3f4f1;
  --c-footer-bg: #0c2419;
  --c-footer-text: #d3ddd6;
  --c-footer-muted: #93a79b;
  --c-footer-border: rgb(255 255 255 / 0.12);

  --font-sans: "Inter Variable", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-heading: "Space Grotesk Variable", "Inter Variable", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --font-serif: var(--font-heading);   /* old name — custom styles using var(--font-serif) still work */
  --font-mono: "JetBrains Mono Variable", ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas, monospace;

  --fs-base: 1.0625rem;
  --fs-sm: 0.875rem;
  --fs-xs: 0.75rem;
  --fs-article: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --fs-display: clamp(2rem, 1.35rem + 2.4vw, 3.1rem);
  --fs-h1: clamp(1.9rem, 1.45rem + 1.7vw, 2.6rem);
  --fs-h2: clamp(1.45rem, 1.25rem + 0.8vw, 1.85rem);
  --fs-h3: 1.3rem;

  --radius: 6px;
  --radius-lg: 10px;
  --gutter: clamp(1rem, 0.6rem + 1.6vw, 2rem);
  --gap: clamp(1.25rem, 0.9rem + 1.2vw, 2rem);
  --container: 1360px;            /* standard site-wide container (home page, archives) */
  --single: 1187px;               /* article page container */
  --single-side: 316px;           /* article sidebar; article column = 1187 − 316 − 24 = 847 */
  --single-gap: 24px;
  --measure: 720px;               /* line length on static pages */
  --sidebar: 316px;               /* right column on category pages / Most Popular (300px ads) */
  --panel-pad: clamp(1.1rem, 0.75rem + 1.1vw, 1.75rem);   /* inner padding of each block */
  --c-hero-bg: #0f2a1d;           /* home page hero background (full screen width) */
  --c-hero-text: #e9f0eb;
  --c-hero-muted: #9fb7a8;
  --c-single-hero-bg: #eef3ec;    /* article page hero background */
  --c-block-bg: #f4f6f2;          /* Latest News block background */
  --shadow-sm: 0 1px 2px rgb(16 24 20 / 0.06);
  --shadow: 0 1px 2px rgb(16 24 20 / 0.06), 0 8px 24px rgb(16 24 20 / 0.08);

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --c-bg: #080d0a;                /* page background, darker than the blocks */
    --c-surface: #121b16;
    --c-subtle: #18231d;
    --c-text: #e6ece8;
    --c-muted: #9aa9a0;
    --c-border: #25322b;
    --c-rule: #e6ece8;
    --c-brand: #7fd6a0;
    --c-brand-ink: #08130d;
    --c-brand-soft: #193326;
    --c-kicker: #7fd6a0;
    --c-accent: #f2a65a;
    --c-link: #8ee0ad;
    --c-danger: #ff8a80;
    --c-success: #7fd6a0;
    --c-code-bg: #1b2520;
    --c-footer-bg: #09110d;
    --c-hero-bg: #0a1a12;
    --c-single-hero-bg: #16211b;
    --c-block-bg: #151e19;
    --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
    --shadow: 0 1px 2px rgb(0 0 0 / 0.4), 0 8px 24px rgb(0 0 0 / 0.35);
  }
}

/* ── Base ─────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 1.5rem; }
body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font: 400 var(--fs-base)/1.65 var(--font-sans);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, picture, video, iframe, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--c-link); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; border-radius: 2px; }
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 700; line-height: 1.22; letter-spacing: -0.01em; margin: 0 0 0.5em; text-wrap: balance; }
p { margin: 0 0 1em; text-wrap: pretty; }
small, .muted { color: var(--c-muted); }
::selection { background: color-mix(in srgb, var(--c-brand) 22%, transparent); }

.container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip-link { position: absolute; left: -999px; top: 0.5rem; z-index: 100; padding: 0.6rem 1rem; background: var(--c-brand); color: var(--c-brand-ink); font-weight: 600; border-radius: var(--radius); }
.skip-link:focus { left: 0.75rem; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Shared small uppercase label */
.post-card__category, .post__category, .page-header__eyebrow, .author-box__label,
.site-footer__heading, .widget__title, .home-section__more, .toc__title {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

/* ── Buttons, inputs, notices ────────────────────────────── */

.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.45em;
  padding: 0.7em 1.25em; border: 1px solid transparent; border-radius: var(--radius);
  background: var(--c-brand); color: var(--c-brand-ink);
  font: 600 0.9375rem/1.2 var(--font-sans); text-decoration: none; cursor: pointer;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.button:hover { background: color-mix(in srgb, var(--c-brand) 86%, #000); }
.button:disabled { opacity: 0.6; cursor: progress; }
.button--small { padding: 0.45em 0.9em; font-size: var(--fs-sm); }
.button--block { width: 100%; }
.button--ghost { background: transparent; color: var(--c-brand); border-color: currentColor; }
.button--ghost:hover { background: var(--c-brand-soft); }
.link-button { background: none; border: 0; padding: 0; font: inherit; color: var(--c-link); cursor: pointer; }
.link-button:hover { text-decoration: underline; }

.field { display: grid; gap: 0.35rem; margin-bottom: 1.1rem; }
.field__label { font-weight: 600; font-size: var(--fs-sm); }
.field__hint { font-size: 0.8rem; color: var(--c-muted); }
.field__input {
  width: 100%; padding: 0.7em 0.85em; font: inherit; font-size: 1rem; color: inherit;
  background: var(--c-surface); border: 1px solid color-mix(in srgb, var(--c-text) 22%, transparent); border-radius: var(--radius);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.field__input:focus { outline: none; border-color: var(--c-brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-brand) 18%, transparent); }
textarea.field__input { resize: vertical; min-height: 7rem; }

.alert { padding: 0.85rem 1rem; border-radius: var(--radius); margin-bottom: 1rem; border-left: 4px solid; }
.alert--error { background: color-mix(in srgb, var(--c-danger) 9%, transparent); color: var(--c-danger); }
.alert--success { background: var(--c-brand-soft); color: var(--c-success); }
.badge { display: inline-block; padding: 0.1em 0.55em; border-radius: 3px; background: var(--c-brand-soft); color: var(--c-brand); font-size: 0.75em; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }

/* ── Header ───────────────────────────────────────────────── */

.site-header { position: relative; z-index: 50; background: var(--c-surface); border-bottom: 1px solid var(--c-border); }
.site-header__inner { display: flex; align-items: center; gap: 1rem; min-height: 4.25rem; }

.site-brand { display: flex; align-items: center; gap: 0.75rem; min-width: 0; color: var(--c-text); text-decoration: none; }
.site-brand__logo { width: 2.75rem; height: 2.75rem; flex: none; border-radius: 8px; }
.site-brand__text { display: grid; line-height: 1.15; min-width: 0; }
.site-brand__title { font-family: var(--font-heading); font-size: clamp(1.35rem, 1.1rem + 0.9vw, 1.75rem); font-weight: 700; letter-spacing: -0.02em; color: var(--c-brand); }
.site-brand__tagline { margin-top: 0.2rem; font-size: 0.78rem; color: var(--c-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.site-nav__list { list-style: none; margin: 0; padding: 0; display: flex; }
.site-nav__item { position: relative; }
.site-nav__link { display: block; color: var(--c-text); text-decoration: none; font-weight: 600; }
.site-nav__sub {
  position: absolute; top: 100%; left: 0; z-index: 60; min-width: 15rem; list-style: none; margin: 0; padding: 0.4rem 0;
  background: var(--c-surface); border: 1px solid var(--c-border); border-top: 2px solid var(--c-brand); box-shadow: var(--shadow);
  opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
}
.site-nav__sub .site-nav__link { padding: 0.55rem 1rem; font-weight: 500; font-size: 0.9rem; text-transform: none; letter-spacing: 0; }
.site-nav__sub .site-nav__link:hover { background: var(--c-subtle); color: var(--c-brand); }
.site-nav__item:hover > .site-nav__sub, .site-nav__item:focus-within > .site-nav__sub { opacity: 1; visibility: visible; transform: none; }

.search-form { display: flex; gap: 0.4rem; }
.search-form__input {
  flex: 1; min-width: 0; padding: 0.6em 0.9em; font: inherit; font-size: 0.95rem; color: inherit;
  background: var(--c-surface); border: 1px solid color-mix(in srgb, var(--c-text) 22%, transparent); border-radius: var(--radius);
}
.search-form__input:focus { outline: none; border-color: var(--c-brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-brand) 18%, transparent); }
.search-form__button { padding: 0.6em 1.1em; border: 0; border-radius: var(--radius); background: var(--c-brand); color: var(--c-brand-ink); font: 600 0.9375rem var(--font-sans); cursor: pointer; }
.search-form--header { position: relative; gap: 0; }
.search-form--header .search-form__input { width: 15rem; padding-right: 2.5rem; background: var(--c-subtle); border-color: transparent; }
.search-form--header .search-form__input:focus { background: var(--c-surface); border-color: var(--c-brand); }
.search-form--header .search-form__button { position: absolute; right: 0.2rem; top: 50%; transform: translateY(-50%); width: 2.2rem; height: 2.2rem; padding: 0; background: transparent; color: var(--c-muted); font-size: 1.3rem; line-height: 1; }
.search-form--header .search-form__button:hover { color: var(--c-brand); }
.search-form--large { margin-top: 1.25rem; max-width: 40rem; }
.search-form--large .search-form__input { padding: 0.85em 1.1em; font-size: 1.05rem; }

.site-account { display: flex; align-items: center; gap: 0.9rem; font-size: 0.9rem; white-space: nowrap; }
.site-account a { color: var(--c-text); font-weight: 600; text-decoration: none; }
.site-account a:hover { color: var(--c-brand); }
.site-account a.button { color: var(--c-brand-ink); }
.site-account__hello { color: var(--c-muted); }
.site-account__logout { display: inline; margin: 0; }
.site-account .link-button { color: var(--c-muted); font-size: 0.9rem; }

.nav-toggle { position: absolute; opacity: 0; pointer-events: none; }
.nav-toggle__label { display: none; margin-left: auto; width: 2.75rem; height: 2.75rem; place-items: center; cursor: pointer; border-radius: var(--radius); }
.nav-toggle__label:hover { background: var(--c-subtle); }
.nav-toggle__label span, .nav-toggle__label span::before, .nav-toggle__label span::after {
  display: block; width: 1.35rem; height: 2px; background: var(--c-text); border-radius: 2px; position: relative; transition: transform 0.2s, background-color 0.2s, top 0.2s;
}
.nav-toggle__label span::before, .nav-toggle__label span::after { content: ""; position: absolute; }
.nav-toggle__label span::before { top: -7px; }
.nav-toggle__label span::after { top: 7px; }
.nav-toggle:focus-visible + .nav-toggle__label { outline: 2px solid var(--c-accent); outline-offset: 2px; }

/* Wide screens: row 1 = logo · search · account; row 2 = bordered menu bar */
@media (min-width: 1025px) {
  .site-header__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas: "brand search account" "nav nav nav";
    column-gap: 1.5rem;
    padding-top: 1.1rem;
  }
  .site-brand { grid-area: brand; }
  .site-nav { display: contents; }
  .search-form--header { grid-area: search; }
  .site-account { grid-area: account; }
  .site-nav__list { grid-area: nav; margin-top: 1rem; border-top: 1px solid var(--c-border); flex-wrap: wrap; }
  .site-nav__list > .site-nav__item > .site-nav__link {
    padding: 0.95rem 1rem 0.85rem; font-size: 0.8125rem; letter-spacing: 0.07em; text-transform: uppercase;
    box-shadow: inset 0 -3px 0 transparent; transition: color 0.15s, box-shadow 0.15s;
  }
  .site-nav__list > .site-nav__item:first-child > .site-nav__link { padding-left: 0; }
  .site-nav__list > .site-nav__item > .site-nav__link:hover,
  .site-nav__list > .site-nav__item.is-current > .site-nav__link { color: var(--c-brand); box-shadow: inset 0 -3px 0 var(--c-accent); }
  .site-nav__item.has-children > .site-nav__link::after { content: ""; display: inline-block; width: 0.4em; height: 0.4em; margin-left: 0.45em; vertical-align: 0.2em; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); opacity: 0.6; }
}

/* Small screens: logo + menu button, menu drops down (no JS needed) */
@media (max-width: 1024px) {
  .site-header { position: sticky; top: 0; box-shadow: var(--shadow-sm); }
  .site-header__inner { min-height: 3.75rem; }
  .site-brand__logo { width: 2.25rem; height: 2.25rem; }
  .site-brand__tagline { display: none; }
  .nav-toggle__label { display: grid; }
  .site-nav {
    position: absolute; top: 100%; left: 0; right: 0; max-height: calc(100dvh - 3.75rem); overflow-y: auto;
    display: none; flex-direction: column; gap: 1rem;
    padding: 0.75rem var(--gutter) 1.5rem; background: var(--c-surface); border-bottom: 1px solid var(--c-border); box-shadow: var(--shadow);
  }
  .nav-toggle:checked ~ .site-nav { display: flex; }
  .nav-toggle:checked + .nav-toggle__label span { background: transparent; }
  .nav-toggle:checked + .nav-toggle__label span::before { top: 0; transform: rotate(45deg); }
  .nav-toggle:checked + .nav-toggle__label span::after { top: 0; transform: rotate(-45deg); }
  .site-nav__list { flex-direction: column; }
  .site-nav__list > .site-nav__item { border-bottom: 1px solid var(--c-border); }
  .site-nav__link { padding: 0.85rem 0; font-size: 1rem; }
  .site-nav__sub { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; padding: 0 0 0.5rem 1rem; min-width: 0; background: none; }
  .site-nav__sub .site-nav__link { padding: 0.45rem 0; }
  .search-form--header .search-form__input { width: 100%; }
  .site-account { justify-content: space-between; flex-wrap: wrap; }
}

/* ── Blocks ───────────────────────────────────────────────────
   Each block is its own panel with padding around it; the gaps between panels
   show the page background => the boundary of each block is visible. */
.site-body > .site-main,
.hp-latest__main,
.hp-latest__side,
.hp-cat,
.keep-reading,
.single-main,
.site-sidebar .widget,
.site-sidebar .ad-slot,
.single-sidebar .ad-slot {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: var(--panel-pad);
}

/* ── Page body container ──────────────────────────────────── */

.site-body {
  display: grid; gap: var(--gap);
  grid-template-columns: minmax(0, 1fr) var(--sidebar);
  padding-block: var(--gap) calc(var(--gap) * 2.5);
  align-items: start;
}
.site-main { min-width: 0; }
@media (max-width: 1024px) { .site-body { grid-template-columns: minmax(0, 1fr); } }

/* Home page, author page, account pages: full width */
.is-front .site-body, .is-authors .site-body, .is-account .site-body, .is-404 .site-body { grid-template-columns: minmax(0, 1fr); }
.is-front .site-sidebar, .is-authors .site-sidebar, .is-account .site-sidebar, .is-404 .site-sidebar { display: none; }

.breadcrumbs__list { display: flex; flex-wrap: wrap; gap: 0.3rem; list-style: none; padding: 0; margin: 0 0 1.25rem; font-size: 0.8125rem; color: var(--c-muted); }
.breadcrumbs__item + .breadcrumbs__item::before { content: "/"; margin-right: 0.3rem; opacity: 0.5; }
.breadcrumbs a { color: inherit; text-decoration: none; }
.breadcrumbs a:hover { color: var(--c-brand); text-decoration: underline; }
.breadcrumbs [aria-current] { color: var(--c-text); }

.page-header { margin-bottom: calc(var(--gap) * 1.25); padding-bottom: 1.25rem; border-bottom: 1px solid var(--c-border); }
.page-header__eyebrow { margin: 0 0 0.5rem; color: var(--c-kicker); }
.page-header__title { font-size: var(--fs-h1); margin: 0; }
.page-header__desc { max-width: 46rem; margin: 0.6rem 0 0; color: var(--c-muted); font-size: 1.1rem; }
.page-header__count { margin: 0.6rem 0 0; color: var(--c-muted); font-size: var(--fs-sm); }
.empty { padding: 3rem 1.5rem; text-align: center; color: var(--c-muted); background: var(--c-subtle); border-radius: var(--radius); }
.section-title { font-size: var(--fs-h2); margin: calc(var(--gap) * 2) 0 var(--gap); padding-top: 0.75rem; border-top: 3px solid var(--c-rule); }

/* ── Post cards ───────────────────────────────────────────── */

.post-card { position: relative; display: grid; align-content: start; gap: 0.9rem; min-width: 0; }
.post-card__media { display: block; overflow: hidden; border-radius: var(--radius); aspect-ratio: 3 / 2; background: var(--c-subtle); }
.post-card__media picture { height: 100%; }
.post-card__image { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1); }
.post-card:hover .post-card__image { transform: scale(1.035); }
.post-card__body { min-width: 0; }
.post-card__category { display: inline-block; margin-bottom: 0.45rem; color: var(--c-kicker); text-decoration: none; }
.post-card__category:hover { text-decoration: underline; }
.post-card__title { font-size: 1.2rem; font-weight: 700; line-height: 1.28; margin: 0 0 0.45rem; }
.post-card__title a { color: var(--c-text); text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-size: 0 1px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size 0.25s; }
.post-card__title a:hover { background-size: 100% 1px; }
.post-card__excerpt { margin: 0 0 0.6rem; color: var(--c-muted); font-size: 0.95rem; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.post-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem 0; margin: 0; font-size: 0.8125rem; color: var(--c-muted); }
.post-card__meta > * + *::before { content: "·"; margin: 0 0.5rem; opacity: 0.7; }
.post-card__author { color: var(--c-text); font-weight: 600; }
.post-card__comments { color: inherit; text-decoration: none; }
.post-card--sticky .post-card__category::after { content: "Pinned"; margin-left: 0.6rem; padding: 0.1em 0.45em; border-radius: 3px; background: var(--c-accent); color: #fff; font-size: 0.65rem; vertical-align: 0.1em; }

/* Lists (category, tag, search, author): image left, text right, row dividers */
.post-list { display: grid; }
.post-list > .post-card { padding-block: 1.5rem; border-bottom: 1px solid var(--c-border); }
.post-list > .post-card:first-child { padding-top: 0; }
.post-list > .post-card--has-image { grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); gap: 1.5rem; }
.post-list .post-card__title { font-size: 1.4rem; }
@media (max-width: 640px) {
  .post-list > .post-card--has-image { grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr); gap: 1rem; }
  .post-list > .post-card--has-image .post-card__media { aspect-ratio: 1; }
  .post-list .post-card__title { font-size: 1.1rem; }
  .post-list .post-card__excerpt { display: none; }
}

/* ── Home page (layout configured in Admin → Layout) ──────── */

.site-main--full { padding-bottom: calc(var(--gap) * 3); }
.is-front .site-main--full > section + section { margin-top: var(--gap); }

/* Small meta line under the title: author · date */
.ov-card__meta, .tl-item__meta, .row-card__meta, .st-card__meta, .keep-reading__meta {
  display: flex; flex-wrap: wrap; gap: 0 0.5rem; margin: 0; font-size: 0.8125rem; color: var(--c-muted);
}
.meta-author { font-weight: 600; color: var(--c-text); }
.meta-author + time::before { content: "·"; margin-right: 0.5rem; opacity: 0.7; }
.ov-card__cat, .tl-item__cat, .row-card__cat, .st-card__cat {
  display: inline-block; margin-bottom: 0.35rem; font: 700 var(--fs-xs)/1.2 var(--font-sans);
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--c-kicker); text-decoration: none;
}
.ov-card__cat:hover, .tl-item__cat:hover, .row-card__cat:hover, .st-card__cat:hover { text-decoration: underline; }
.hp-block-title { margin: 0 0 1.1rem; padding-top: 0.7rem; border-top: 3px solid var(--c-rule); font-size: var(--fs-h2); }
.hp-block-title a { color: inherit; text-decoration: none; }
.hp-block-title a:hover { color: var(--c-brand); }

/* Card with text over the image */
.ov-card {
  position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 11rem; border-radius: var(--radius-lg); background: #1e3a2b; color: #fff;
}
.ov-card__media { position: absolute; inset: 0; z-index: -2; }
.ov-card__media picture { height: 100%; }
.ov-card__img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
.ov-card:hover .ov-card__img { transform: scale(1.04); }
.ov-card::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgb(0 0 0 / 0) 30%, rgb(0 0 0 / 0.55) 60%, rgb(0 0 0 / 0.85)); }
.ov-card--no-image { background: linear-gradient(135deg, #1f5135, #0f2a1d); }
.ov-card__body { padding: clamp(1rem, 0.6rem + 1.2vw, 1.6rem); }
.ov-card__cat { position: relative; z-index: 1; color: #bde8c8; }
.ov-card__title { margin: 0 0 0.45rem; font-size: 1.2rem; line-height: 1.25; color: #fff; }
.ov-card__title a { color: inherit; text-decoration: none; }
.ov-card__title a::before { content: ""; position: absolute; inset: 0; }   /* whole card is clickable */
.ov-card__title a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.ov-card__meta, .ov-card__meta .meta-author { color: rgb(255 255 255 / 0.82); }
.ov-card--lg .ov-card__title { font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.4rem); line-height: 1.14; letter-spacing: -0.015em; }
.ov-card--sq { aspect-ratio: 1; }
.ov-card--sq .ov-card__title { font-size: clamp(1.4rem, 1rem + 1.2vw, 2rem); line-height: 1.18; }

/* Title + meta only */
.tl-item { display: flex; gap: 0.9rem; min-width: 0; }
.tl-item__body { min-width: 0; }
.tl-item__title { margin: 0 0 0.35rem; font-size: 1.05rem; line-height: 1.32; }
.tl-item__title a { color: var(--c-text); text-decoration: none; }
.tl-item__title a:hover { color: var(--c-brand); text-decoration: underline; }
.tl-item__num { flex: none; width: 1.6rem; font: 700 1.6rem/1 var(--font-heading); color: var(--c-accent); }

/* Ad slot */
.ad-slot { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.35rem; min-width: 0; overflow: hidden; }
.ad-slot__label { font-size: 0.65rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-muted); }
.ad-slot > :not(.ad-slot__label) { max-width: 100%; }

/* 1. Hero: full-width background, posts inside the 1360 container */
.hp-hero { padding-block: clamp(1.25rem, 0.8rem + 1.5vw, 2rem); background: var(--c-hero-bg); color: var(--c-hero-text); }
.hp-hero__inner { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
/* Column 1 min height = 3/4 of its width; the row stretches to the tallest column => all 3 columns are always equal */
.hp-hero__lead { position: relative; }
.hp-hero__lead::before { content: ""; display: block; padding-top: 75%; }
.hp-hero__lead > .ov-card { position: absolute; inset: 0; }
.hp-hero__pair { display: grid; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
.hp-hero__side { display: flex; flex-direction: column; min-width: 0; }
.hp-hero__side-title { margin: 0 0 0.25rem; padding-bottom: 0.7rem; border-bottom: 3px solid var(--c-accent); font: 700 var(--fs-xs)/1.2 var(--font-sans); letter-spacing: 0.09em; text-transform: uppercase; color: #fff; }
.hp-hero__side-list > .tl-item { padding-block: 0.8rem; border-bottom: 1px solid rgb(255 255 255 / 0.12); }
.hp-hero .tl-item__title { font-size: 0.98rem; }
.hp-hero .tl-item__title a { color: #fff; }
.hp-hero .tl-item__title a:hover { color: #bde8c8; }
.hp-hero .tl-item__cat { color: #bde8c8; }
.hp-hero .tl-item__meta, .hp-hero .meta-author { color: var(--c-hero-muted); }
.hp-hero .ad-slot { flex: 1; margin-top: 1rem; }
.hp-hero .ad-slot__label { color: var(--c-hero-muted); }
@media (max-width: 1100px) {
  .hp-hero__inner { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
  .hp-hero__side { grid-column: 1 / -1; }
  .hp-hero__side-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); column-gap: 1.5rem; }
}
@media (max-width: 700px) {
  .hp-hero__inner { grid-template-columns: minmax(0, 1fr); }
  .hp-hero__lead::before { padding-top: 90%; }
  .hp-hero__pair { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto; gap: 12px; }
  .hp-hero__pair .ov-card { min-height: 12rem; }
  .hp-hero__pair .ov-card__title { font-size: 1rem; }
}

/* 2. Latest News + Most Popular: own background, inside the 1360 container */
.hp-latest {
  display: grid; grid-template-columns: minmax(0, 1fr) var(--sidebar); gap: var(--gap);
  align-items: start; background: none; padding: 0;
}
.hp-latest__main { min-width: 0; }
@media (max-width: 1024px) { .hp-latest { grid-template-columns: minmax(0, 1fr); } }
.hp-latest__list { display: grid; }
.row-card { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: 1.25rem; align-items: start; padding-block: 1.1rem; border-bottom: 1px solid var(--c-border); }
.row-card:first-child { padding-top: 0.25rem; }
.row-card--no-image { grid-template-columns: minmax(0, 1fr); }
.row-card__media { display: block; overflow: hidden; border-radius: var(--radius); aspect-ratio: 3 / 2; background: var(--c-border); }
.row-card__media picture { height: 100%; }
.row-card__img { width: 100%; height: 100%; object-fit: cover; }
.row-card__title { margin: 0 0 0.45rem; font-size: 1.25rem; line-height: 1.28; }
.row-card__title a { color: var(--c-text); text-decoration: none; }
.row-card__title a:hover { color: var(--c-brand); text-decoration: underline; }
@media (max-width: 560px) {
  .row-card { grid-template-columns: minmax(0, 7rem) minmax(0, 1fr); gap: 0.9rem; }
  .row-card--no-image { grid-template-columns: minmax(0, 1fr); }
  .row-card__media { aspect-ratio: 1; }
  .row-card__title { font-size: 1.02rem; }
}
.hp-latest__more { margin: 1.25rem 0 0; font-weight: 700; font-size: 0.9rem; }
.hp-latest__more a { color: var(--c-brand); text-decoration: none; }
.hp-latest__more a::after { content: " →"; }
.hp-latest__side { display: flex; flex-direction: column; min-width: 0; }
.hp-popular > .tl-item { padding-block: 0.85rem; border-bottom: 1px solid var(--c-border); }
.hp-popular > .tl-item:first-child { padding-top: 0.25rem; }
.hp-latest__side .ad-slot { margin-top: 1.25rem; }
@media (min-width: 1025px) { .hp-latest__side .ad-slot { position: sticky; top: 1.5rem; } }

/* 3. Category block: 1 column, row 1 two posts, row 2 three posts + ads */
.hp-cat__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.hp-cat__head .hp-block-title { flex: 1; }
.hp-cat__more { margin-left: auto; font: 700 var(--fs-xs)/1.2 var(--font-sans); letter-spacing: 0.09em; text-transform: uppercase; color: var(--c-brand); text-decoration: none; white-space: nowrap; }
.hp-cat__more::after { content: " →"; }
.hp-cat__head { border-top: 3px solid var(--c-rule); padding-top: 0.7rem; margin-bottom: 1.1rem; }
.hp-cat__head .hp-block-title { border: 0; padding: 0; margin: 0; }
.hp-cat__top { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); align-items: stretch; }
/* Right column: 2 stacked posts, text over the image; two images + the gap = exactly the height of the square image on the left */
.hp-cat__side { display: grid; grid-template-rows: 1fr 1fr; gap: var(--gap); min-width: 0; }
.hp-cat__side .ov-card--half { aspect-ratio: auto; min-height: 0; }
.ov-card--half { aspect-ratio: 2 / 1; }
.ov-card--half .ov-card__title { font-size: clamp(1.15rem, 0.95rem + 0.5vw, 1.45rem); line-height: 1.22; }
.hp-cat__row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); margin-top: var(--gap); padding-top: var(--gap); border-top: 1px solid var(--c-border); }
.hp-cat__row > .ad-slot:not(.ad-slot--empty) { min-height: 6rem; }
@media (max-width: 900px) {
  .hp-cat__top { grid-template-columns: minmax(0, 1fr); }
  .hp-cat__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hp-cat__row > .ad-slot--empty { display: none; }
  .hp-cat__side { grid-template-rows: none; }
  .hp-cat__side .ov-card--half { aspect-ratio: 2 / 1; }
}
@media (max-width: 480px) { .hp-cat__row { grid-template-columns: minmax(0, 1fr); } }

.pagination { display: flex; align-items: center; justify-content: center; gap: 0.5rem; flex-wrap: wrap; margin-top: calc(var(--gap) * 1.5); font-size: 0.9rem; }
.pagination__list { display: flex; gap: 0.3rem; list-style: none; margin: 0; padding: 0; }
.pagination a, .pagination span[aria-current] {
  display: grid; place-items: center; min-width: 2.5rem; height: 2.5rem; padding-inline: 0.8rem;
  border: 1px solid var(--c-border); border-radius: var(--radius); color: var(--c-text); text-decoration: none; font-weight: 600;
}
.pagination a:hover { border-color: var(--c-brand); color: var(--c-brand); }
.pagination span[aria-current] { background: var(--c-brand); border-color: var(--c-brand); color: var(--c-brand-ink); }
.pagination__gap { align-self: center; color: var(--c-muted); }

/* ── Article ──────────────────────────────────────────────── */

.post__header { margin-bottom: 1.75rem; }
.post__categories { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; margin: 0 0 0.9rem; }
.post__category { color: var(--c-kicker); text-decoration: none; }
.post__category:hover { text-decoration: underline; }
.post__title { font-size: var(--fs-display); font-weight: 750; line-height: 1.12; letter-spacing: -0.022em; margin: 0 0 1rem; max-width: 30ch; }
.post--page .post__title { max-width: none; }
.post__dek { max-width: var(--measure); margin: 0 0 1.5rem; font-size: clamp(1.1rem, 1rem + 0.35vw, 1.3rem); line-height: 1.55; color: var(--c-muted); }
.post__meta { font-size: 0.875rem; color: var(--c-muted); }
.post__meta--page { margin: 0; }
.post__edit { margin: 1rem 0 0; }

.byline { display: flex; align-items: center; gap: 0.85rem; padding-block: 1rem; border-block: 1px solid var(--c-border); }
.byline__avatar { flex: none; line-height: 0; }
.byline__text { min-width: 0; }
.byline__text p { margin: 0; }
.byline__author { font-size: 0.95rem; color: var(--c-text); }
.post__author { color: var(--c-text); font-weight: 700; text-decoration: none; }
.post__author:hover { color: var(--c-brand); text-decoration: underline; }
.byline__role { color: var(--c-muted); }
.byline__role::before { content: ", "; }
.byline__dates { display: flex; flex-wrap: wrap; margin-top: 0.15rem !important; font-size: 0.8125rem; }
.byline__dates > * + *::before { content: "·"; margin: 0 0.5rem; opacity: 0.7; }
.post__updated { color: var(--c-text); }

.post__featured { margin: 0 0 2rem; }
.post__featured-image { width: 100%; border-radius: var(--radius-lg); }

.toc { max-width: var(--measure); margin: 0 0 2rem; padding: 1.1rem 1.4rem; background: var(--c-subtle); border-left: 3px solid var(--c-accent); border-radius: 0 var(--radius) var(--radius) 0; }
.toc__title { cursor: pointer; color: var(--c-text); list-style-position: outside; }
.toc__list { margin: 0.75rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.4rem; font-size: 0.95rem; }
.toc__item--h3 { padding-left: 1.1rem; font-size: 0.9rem; }
.toc__item--h3::before { content: "–"; margin-right: 0.45rem; color: var(--c-muted); }
.toc a { color: var(--c-text); text-decoration: none; }
.toc a:hover { color: var(--c-brand); text-decoration: underline; }

.post__footer { max-width: var(--measure); margin-top: 2.5rem; }
.tag-list { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0; padding: 0; }
.tag { display: inline-block; padding: 0.35em 0.8em; border: 1px solid var(--c-border); border-radius: var(--radius); font-size: 0.8125rem; font-weight: 600; color: var(--c-muted); text-decoration: none; }
.tag:hover { border-color: var(--c-brand); color: var(--c-brand); }

/* Editor content */
.prose { max-width: var(--measure); font-size: var(--fs-article); line-height: 1.8; }
.prose > * + * { margin-top: 1.15em; }
.prose > :first-child { margin-top: 0; }
.prose p { margin-bottom: 0; }
.prose h2 { font-size: var(--fs-h2); margin: 0.6em 0 0.6em; }
.prose h3 { font-size: var(--fs-h3); margin: 1.8em 0 0.5em; }
.prose h4 { font-family: var(--font-sans); font-size: 1rem; font-weight: 700; margin: 1.6em 0 0.4em; }
.prose h2 + *, .prose h3 + *, .prose h4 + * { margin-top: 0; }
.prose h2 + h3 { margin-top: 0.9em; }
.prose a { color: var(--c-link); font-weight: 500; }
.prose strong { font-weight: 700; }
.prose ul, .prose ol { padding-left: 1.4rem; }
.prose li + li { margin-top: 0.45em; }
.prose li > p { margin: 0; }
.prose li::marker { color: var(--c-kicker); }
.prose ol > li::marker { font-weight: 700; font-size: 0.95em; }
.prose blockquote { margin: 2em 0; padding: 0.25em 0 0.25em 1.5rem; border-left: 3px solid var(--c-accent); font-family: var(--font-heading); font-size: 1.25em; line-height: 1.55; color: var(--c-text); }
.prose blockquote p + p { margin-top: 0.75em; }
.prose figure { margin: 2em 0; }
.prose figure img { border-radius: var(--radius); margin-inline: auto; }
.prose figcaption { margin-top: 0.6rem; font-size: 0.85rem; color: var(--c-muted); text-align: left; border-left: 2px solid var(--c-border); padding-left: 0.75rem; }
.prose img { border-radius: var(--radius); }
.prose code { font-family: var(--font-mono); font-size: 0.88em; background: var(--c-code-bg); padding: 0.15em 0.4em; border-radius: 4px; }
.prose pre { background: var(--c-code-bg); padding: 1rem 1.25rem; border-radius: var(--radius); overflow-x: auto; font-size: 0.9rem; line-height: 1.6; }
.prose pre code { background: none; padding: 0; }
.prose hr { border: 0; height: 1px; background: var(--c-border); margin: 3em 0; }
.prose mark { background: color-mix(in srgb, var(--c-accent) 25%, transparent); color: inherit; padding: 0 0.1em; }
.prose .table-wrap { overflow-x: auto; border: 1px solid var(--c-border); border-radius: var(--radius); }
.prose table { width: 100%; border-collapse: collapse; font-size: 0.92em; line-height: 1.55; }
.prose th, .prose td { padding: 0.7em 0.9em; border-bottom: 1px solid var(--c-border); text-align: left; vertical-align: top; }
.prose th { background: var(--c-subtle); font-weight: 700; font-size: 0.9em; }
.prose tr:last-child td { border-bottom: 0; }
.prose [data-youtube-video] iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--radius); }
.prose .callout { padding: 1.1rem 1.35rem; border-radius: var(--radius); border-left: 4px solid; font-size: 0.95em; }
.prose .callout > * + * { margin-top: 0.6em; }
.prose .callout-info { background: var(--c-brand-soft); border-color: var(--c-brand); }
.prose .callout-warn { background: color-mix(in srgb, var(--c-accent) 11%, transparent); border-color: var(--c-accent); }
.prose .align-center { text-align: center; }
.prose .align-right { text-align: right; }
.prose .align-justify { text-align: justify; }
.prose .align-left { text-align: left; }

/* Author box at the end of the article */
.author-box {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.5rem;
  max-width: var(--measure); margin-top: 3rem; padding: 1.75rem; background: var(--c-subtle); border-top: 3px solid var(--c-brand); border-radius: 0 0 var(--radius) var(--radius);
}
@media (max-width: 560px) { .author-box { grid-template-columns: minmax(0, 1fr); gap: 1rem; } }
.author-box__avatar { line-height: 0; }
.author-box__label { margin: 0 0 0.35rem; color: var(--c-muted); }
.author-box__name { font-size: 1.45rem; margin: 0; }
.author-box__name a { color: var(--c-text); text-decoration: none; }
.author-box__name a:hover { color: var(--c-brand); }
.author-box__role { margin: 0.2rem 0 0.8rem; color: var(--c-kicker); font-weight: 600; font-size: 0.925rem; }
.author-box__bio { margin: 0 0 0.9rem; font-size: 0.975rem; line-height: 1.7; }
.author-box .author-box__topics { margin-bottom: 1rem; }
.author-box__links { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.1rem; margin: 0; font-size: 0.875rem; font-weight: 600; }
.author-box__more { color: var(--c-brand); }
.author-box__more::after { content: " →"; }
.author-box__social { color: var(--c-muted); }

.post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); max-width: var(--measure); margin-top: 2.5rem; padding-block: 1.25rem; border-block: 1px solid var(--c-border); }
.post-nav a { display: grid; gap: 0.3rem; color: var(--c-text); text-decoration: none; font-family: var(--font-heading); font-weight: 700; font-size: 1.05rem; line-height: 1.35; }
.post-nav a:hover { color: var(--c-brand); }
.post-nav span { font: 700 var(--fs-xs)/1.2 var(--font-sans); letter-spacing: 0.09em; text-transform: uppercase; color: var(--c-muted); }
.post-nav__next { grid-column: 2; text-align: right; }
@media (max-width: 560px) { .post-nav { grid-template-columns: 1fr; } .post-nav__next { grid-column: 1; text-align: left; } }

.related { margin-top: calc(var(--gap) * 2); }
.related__title { font-size: 1.35rem; padding-top: 0.75rem; border-top: 3px solid var(--c-rule); }
.related__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: var(--gap); }
.related__item { display: grid; align-content: start; gap: 0.65rem; color: var(--c-text); text-decoration: none; font-family: var(--font-heading); font-weight: 700; font-size: 1.02rem; line-height: 1.35; }
.related__item:hover { color: var(--c-brand); }
.related__image { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius); }

/* ── Comments ─────────────────────────────────────────────── */

.comments { max-width: var(--measure); margin-top: calc(var(--gap) * 2); }
.comments__title { display: flex; align-items: center; gap: 0.6rem; font-size: 1.35rem; padding-top: 0.75rem; border-top: 3px solid var(--c-rule); }
.comments__count { font: 700 0.8rem/1 var(--font-sans); padding: 0.35em 0.6em; border-radius: 3px; background: var(--c-subtle); color: var(--c-muted); }
.comment-list, .comment-children { list-style: none; margin: 0; padding: 0; }
.comment-children { margin-left: clamp(1rem, 4vw, 2.75rem); padding-left: 1.1rem; border-left: 1px solid var(--c-border); }
.comment { margin-top: 1.5rem; }
.comment.is-new > .comment__body { animation: comment-in 1.4s ease-out; }
@keyframes comment-in { from { background: var(--c-brand-soft); } to { background: transparent; } }
.comment__body { padding: 0.25rem 0.5rem; margin: -0.25rem -0.5rem; border-radius: var(--radius); }
.comment__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 0.35rem; }
.comment__avatar { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--c-subtle); color: var(--c-muted); font-weight: 700; font-size: 0.95rem; }
.comment__author { font-weight: 700; font-size: 0.95rem; }
.comment__badge { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.2em 0.5em; border-radius: 3px; background: var(--c-brand); color: var(--c-brand-ink); }
.comment__date { font-size: 0.8rem; color: var(--c-muted); text-decoration: none; }
.comment__content { padding-left: 2.85rem; font-size: 0.975rem; }
.comment__content p { margin: 0 0 0.5em; }
.comment__reply { margin-left: 2.85rem; font-size: 0.85rem; font-weight: 600; }
.comment--staff > .comment__body .comment__avatar { background: var(--c-brand); color: var(--c-brand-ink); }
.comments__more-wrap { text-align: center; margin: 1.75rem 0 0; }
.comments__closed, .comments__login, .comments__noscript { color: var(--c-muted); margin-top: 1.5rem; }
.comment-form { margin-top: 2rem; padding: 1.5rem; background: var(--c-subtle); border-radius: var(--radius); }
.comment .comment-form { margin: 1rem 0 0 2.85rem; background: var(--c-surface); border: 1px solid var(--c-border); }
.comment-form__title { font-size: 1.15rem; }
.comment-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
@media (max-width: 560px) { .comment-form__row { grid-template-columns: 1fr; } }
.comment-form__replying { background: var(--c-brand-soft); padding: 0.55rem 0.8rem; border-radius: var(--radius); font-size: var(--fs-sm); }
.comment-form__captcha:empty { display: none; }
.comment-form__captcha { margin-bottom: 1rem; }
.comment-form__status:empty { display: none; }
.comment-form__status { font-size: var(--fs-sm); }
.comment-form__status.is-error { color: var(--c-danger); }
.comment-form__status.is-success { color: var(--c-success); }

/* ── Right column ─────────────────────────────────────────── */

.site-sidebar { min-width: 0; }
.site-sidebar__inner { display: grid; gap: var(--gap); align-content: start; }
.site-sidebar .ad-slot:not(.ad-slot--empty) { min-height: 250px; }
.site-sidebar .ad-slot--empty { display: none; }
@media (min-width: 1025px) {
  .site-sidebar__inner { position: sticky; top: 1.5rem; }
  .widget--search { display: none; }      /* search box already in the header */
}
.widget__title { margin: 0 0 0.9rem; padding-top: 0.75rem; border-top: 3px solid var(--c-rule); color: var(--c-text); }
.term-list { list-style: none; margin: 0; padding: 0; }
.term-list__item a { display: flex; justify-content: space-between; padding: 0.6rem 0; color: var(--c-text); text-decoration: none; font-weight: 500; font-size: 0.95rem; border-bottom: 1px solid var(--c-border); }
.term-list__item a::after { content: "›"; color: var(--c-muted); }
.term-list__item a:hover, .term-list__item a[aria-current] { color: var(--c-brand); }
.term-list__item--depth-1 { padding-left: 1rem; }
.term-list__item--depth-2 { padding-left: 2rem; }

/* ── Author page ──────────────────────────────────────────── */

.avatar { display: block; flex: none; width: var(--avatar-size, 44px); height: var(--avatar-size, 44px); border-radius: 50%; object-fit: cover; background: var(--c-subtle); }
.avatar--initials { display: grid; place-items: center; background: var(--c-brand); color: var(--c-brand-ink); font: 700 calc(var(--avatar-size, 44px) * 0.4)/1 var(--font-heading); }

.chip-list { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; margin: 0; padding: 0; }
.chip { padding: 0.3em 0.7em; border-radius: 3px; background: var(--c-surface); border: 1px solid var(--c-border); color: var(--c-text); font-size: 0.8rem; font-weight: 600; }

.author-profile {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(1.25rem, 3vw, 2.5rem); align-items: start;
  padding-bottom: calc(var(--gap) * 1.25); border-bottom: 1px solid var(--c-border);
}
@media (max-width: 640px) { .author-profile { grid-template-columns: minmax(0, 1fr); } .author-profile__image { --avatar-size: 112px !important; } }
.author-profile__avatar { line-height: 0; }
.author-profile__image { box-shadow: 0 0 0 4px var(--c-surface), 0 0 0 5px var(--c-border); }
.author-profile .page-header__eyebrow { color: var(--c-kicker); }
.author-profile__name { font-size: var(--fs-display); line-height: 1.1; margin: 0; }
.author-profile__role { margin: 0.4rem 0 1.25rem; color: var(--c-kicker); font-weight: 600; font-size: 1.05rem; }
.author-profile__bio { max-width: var(--measure); font-size: 1.05rem; line-height: 1.75; }
.author-profile__bio p { margin-bottom: 0.9em; }
.author-profile__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem 2rem; max-width: 52rem; margin: 1.5rem 0; padding: 1.25rem 1.4rem; background: var(--c-subtle); border-radius: var(--radius); }
.author-profile__fact dt { margin-bottom: 0.45rem; font: 700 var(--fs-xs)/1.2 var(--font-sans); letter-spacing: 0.09em; text-transform: uppercase; color: var(--c-muted); }
.author-profile__fact dd { margin: 0; font-size: 0.95rem; }
.author-profile__stats { margin: 0 0 0.75rem; font-size: 0.875rem; font-weight: 600; color: var(--c-muted); }
.author-posts .section-title { margin-top: calc(var(--gap) * 1.5); }

.author-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr)); gap: var(--gap); list-style: none; margin: 0; padding: 0; }
.author-card { position: relative; display: grid; justify-items: center; align-content: start; padding: 2rem 1.5rem 1.5rem; text-align: center; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-lg); transition: box-shadow 0.2s, border-color 0.2s; }
.author-card:hover { box-shadow: var(--shadow); border-color: transparent; }
.author-card__avatar { line-height: 0; }
.author-card__name { font-size: 1.25rem; margin: 1rem 0 0.2rem; }
.author-card__name a { color: var(--c-text); text-decoration: none; }
.author-card__name a::after { content: ""; position: absolute; inset: 0; }   /* whole card is clickable */
.author-card__role { margin: 0 0 0.75rem; color: var(--c-kicker); font-size: 0.875rem; font-weight: 600; }
.author-card__bio { margin: 0 0 1rem; color: var(--c-muted); font-size: 0.9rem; line-height: 1.6; }
.author-card__count { margin: auto 0 0; padding-top: 0.75rem; border-top: 1px solid var(--c-border); width: 100%; font-size: 0.8rem; font-weight: 600; color: var(--c-muted); }

/* ── Static pages, contact ────────────────────────────────── */

.post--page .post__header { padding-bottom: 1.25rem; border-bottom: 1px solid var(--c-border); }
.post--page .post__title { font-size: var(--fs-h1); }
.post--page .toc { margin-top: 0; }
.contact-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); gap: calc(var(--gap) * 1.5); align-items: start; }
@media (max-width: 900px) { .contact-layout { grid-template-columns: minmax(0, 1fr); } }
.contact-card { padding: 1.5rem 1.6rem; background: var(--c-subtle); border-top: 3px solid var(--c-brand); border-radius: 0 0 var(--radius) var(--radius); }
.contact-card__title { font-size: 1.2rem; margin-bottom: 1rem; }
.contact-card__list { display: grid; gap: 1rem; margin: 0; }
.contact-card__row dt { font: 700 var(--fs-xs)/1.2 var(--font-sans); letter-spacing: 0.09em; text-transform: uppercase; color: var(--c-muted); }
.contact-card__row dd { margin: 0.25rem 0 0; font-weight: 500; white-space: pre-line; overflow-wrap: anywhere; }
.contact-card__row a { color: var(--c-text); }
.contact-card__social { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; white-space: normal !important; }

/* ── Account, 404 ─────────────────────────────────────────── */

.auth-box { max-width: 28rem; margin: clamp(1rem, 4vw, 3rem) auto; padding: clamp(1.5rem, 4vw, 2.5rem); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.auth-box--wide { max-width: 40rem; }
.auth-box__title { font-size: 1.75rem; }
.auth-box__links { text-align: center; margin: 1.25rem 0 0; font-size: var(--fs-sm); }
.form + .form { margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--c-border); }
.form__title { font-size: 1.2rem; }

.not-found { max-width: 40rem; margin: 0 auto; text-align: center; padding: clamp(2rem, 8vw, 5rem) 0; }
.not-found__code { margin: 0; font: 700 clamp(5rem, 3rem + 8vw, 8rem)/1 var(--font-heading); color: var(--c-brand); letter-spacing: -0.04em; }
.not-found__title { font-size: var(--fs-h1); margin-top: 0.5rem; }
.not-found .search-form { margin: 1.5rem auto; }

/* ── Footer ───────────────────────────────────────────────── */

.site-footer { background: var(--c-footer-bg); color: var(--c-footer-text); font-size: 0.9rem; line-height: 1.6; }
.site-footer a { color: var(--c-footer-text); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer__main {
  display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 2.5rem;
  padding-block: clamp(2.5rem, 5vw, 4rem) 2.5rem;
}
@media (max-width: 1024px) { .site-footer__main { grid-template-columns: repeat(2, minmax(0, 1fr)); } .site-footer__about { grid-column: 1 / -1; } }
@media (max-width: 520px) { .site-footer__main { grid-template-columns: minmax(0, 1fr); gap: 2rem; } }
.site-footer__brand { display: inline-flex; align-items: center; gap: 0.75rem; }
.site-footer__brand:hover { text-decoration: none !important; }
.site-footer__logo { width: 2.75rem; height: 2.75rem; border-radius: 8px; }
.site-footer__name { font: 700 1.6rem/1.1 var(--font-heading); letter-spacing: -0.02em; color: #fff; }
.site-footer__desc { max-width: 26rem; margin: 1rem 0 1.25rem; color: var(--c-footer-muted); }
.site-footer__heading { margin: 0 0 1rem; color: #fff; }
.site-footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.contact-list { display: grid; gap: 0.85rem; font-style: normal; }
.contact-list__item { margin: 0; overflow-wrap: anywhere; }
.contact-list__label { display: block; margin-bottom: 0.1rem; font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-footer-muted); }
.social-links { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0; padding: 0; }
.social-links__item { display: inline-block; padding: 0.4em 0.9em; border: 1px solid var(--c-footer-border); border-radius: var(--radius); font-size: 0.8125rem; font-weight: 600; }
.site-footer .social-links__item:hover { background: rgb(255 255 255 / 0.08); text-decoration: none; }
.site-footer__bottom { border-top: 1px solid var(--c-footer-border); }
.site-footer__bottom-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 2rem; padding-block: 1.4rem; font-size: 0.8125rem; color: var(--c-footer-muted); }
.site-footer__copy, .site-footer__license { margin: 0; }
.site-footer__license { flex-basis: 100%; font-size: 0.78rem; opacity: 0.85; }
.site-footer__legal { display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; }
.site-footer__legal a { color: var(--c-footer-muted); }

/* Social buttons on a light background (author page) */
.author-profile__links .social-links__item { border-color: var(--c-border); color: var(--c-text); text-decoration: none; }
.author-profile__links .social-links__item:hover { border-color: var(--c-brand); color: var(--c-brand); }

/* ── Article page (1187 container: article 847 + sidebar 316) ─── */

.single + .single { margin-top: 0; }
/* Hero: full-width background; the thumb bleeds to the left edge of the screen; text sits inside the 1187 container.
   Columns: [left margin][35% of container][65% of container][right margin] — the thumb spans the left margin + 35%. */
.single-hero { background: var(--c-single-hero-bg); }
.single-hero__inner {
  --w: min(var(--single), 100% - 2 * var(--gutter));
  display: grid;
  grid-template-columns: minmax(var(--gutter), 1fr) calc(var(--w) * 0.35) calc(var(--w) * 0.65) minmax(var(--gutter), 1fr);
  min-height: clamp(22rem, 30vw, 30rem);
}
.single-hero__media { grid-column: 1 / 3; position: relative; margin: 0; min-height: 100%; overflow: hidden; background: var(--c-border); }
.single-hero__media picture { position: absolute; inset: 0; }
.single-hero__img { width: 100%; height: 100%; object-fit: cover; }
.single-hero__body { grid-column: 3 / 4; align-self: center; min-width: 0; padding: clamp(1.5rem, 1rem + 2vw, 3rem) 0 clamp(1.5rem, 1rem + 2vw, 3rem) clamp(1.5rem, 1rem + 2vw, 3rem); }
.single-hero--no-media .single-hero__body { grid-column: 2 / 4; padding-left: 0; }
.single-hero .breadcrumbs__list { margin-bottom: 1rem; }
.single-hero .post__title { font-size: clamp(1.9rem, 1.3rem + 2vw, 2.9rem); max-width: none; }
.single-hero .post__dek { max-width: none; margin-bottom: 1.25rem; }
.single-hero .byline { border-color: color-mix(in srgb, var(--c-text) 12%, transparent); }
@media (max-width: 900px) {
  .single-hero__inner { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .single-hero__media { grid-column: 1; aspect-ratio: 16 / 9; min-height: 0; }
  .single-hero__body, .single-hero--no-media .single-hero__body { grid-column: 1; padding: 1.5rem var(--gutter) 1.75rem; }
}

.share { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 1.1rem; }
.share__btn {
  display: inline-flex; align-items: center; padding: 0.42em 0.85em; border: 1px solid color-mix(in srgb, var(--c-text) 18%, transparent);
  border-radius: 999px; background: var(--c-surface); color: var(--c-text); font: 600 0.8125rem/1.2 var(--font-sans); text-decoration: none; cursor: pointer;
}
.share__btn:hover { border-color: var(--c-brand); color: var(--c-brand); }

.single-body {
  display: grid; grid-template-columns: minmax(0, 1fr) var(--single-side); gap: var(--single-gap);
  align-items: start;
  width: min(100% - 2 * var(--gutter), var(--single)); margin: clamp(1.75rem, 1rem + 2vw, 2.75rem) auto 0;
}
.single-main { min-width: 0; }
.single .prose, .single .toc, .single .post__footer, .single .author-box, .single .comments { max-width: none; }
.single .prose { font-size: clamp(1.0625rem, 1rem + 0.2vw, 1.15rem); }
.single-sidebar { min-width: 0; }
/* No ad code: drop the right column entirely, the article takes the whole container */
.single-sidebar .ad-slot--empty { display: none; }
.single-body:has(.single-sidebar .ad-slot--empty) { grid-template-columns: minmax(0, 1fr); }
.single-body:has(.single-sidebar .ad-slot--empty) .single-sidebar { display: none; }
.single-sidebar__sticky { position: sticky; top: 1.5rem; }
.single-sidebar .ad-slot:not(.ad-slot--empty) { min-height: 250px; }
.single-comments__link { margin: 2rem 0 0; font-weight: 700; }
@media (max-width: 1024px) {
  .single-body { grid-template-columns: minmax(0, 1fr); }
  .single-sidebar__sticky { position: static; }
}

/* Keep reading: list of links (readable by Google) — once the next article has loaded only the title remains as a divider */
.keep-reading { width: min(100% - 2 * var(--gutter), var(--single)); margin: clamp(2rem, 1.5rem + 2vw, 3.5rem) auto clamp(2rem, 1.5rem + 2vw, 3rem); }
.keep-reading__title { display: flex; align-items: center; gap: 1rem; margin: 0 0 1.1rem; font: 800 var(--fs-xs)/1.2 var(--font-sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-text); }
.keep-reading__title::before, .keep-reading__title::after { content: ""; flex: 1; height: 3px; background: var(--c-rule); }
.keep-reading__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 1.25rem; list-style: none; margin: 0; padding: 0; }
.keep-reading__item { display: grid; gap: 0.6rem; align-content: start; }
.keep-reading__media { display: block; overflow: hidden; border-radius: var(--radius); aspect-ratio: 3 / 2; background: var(--c-subtle); }
.keep-reading__media picture { height: 100%; }
.keep-reading__img { width: 100%; height: 100%; object-fit: cover; }
.keep-reading__link { display: block; margin-bottom: 0.3rem; font: 700 1.02rem/1.32 var(--font-heading); color: var(--c-text); text-decoration: none; }
.keep-reading__link:hover { color: var(--c-brand); text-decoration: underline; }
.keep-reading.is-loaded { margin-bottom: 0; }
.keep-reading.is-loaded .keep-reading__list { display: none; }
.keep-reading.is-loading .keep-reading__title::after { animation: kr-pulse 1s ease-in-out infinite alternate; }
@keyframes kr-pulse { from { opacity: 1; } to { opacity: 0.25; } }

/* ── Motion, print ────────────────────────────────────────── */

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

@media print {
  .site-header, .site-sidebar, .site-footer, .comments, .post-nav, .related, .toc, .breadcrumbs, .single-sidebar, .keep-reading, .share, .ad-slot { display: none !important; }
  .single-body { display: block; }
  .site-body { display: block; padding: 0; }
  body { font-size: 11pt; background: #fff; color: #000; }
  .prose a::after { content: " (" attr(href) ")"; font-size: 0.85em; color: #555; }
}

/* ── Search suggestions (JSON index, runs in the browser) ─── */
.search-form--suggest { position: relative; }
.search-suggest {
  position: absolute; z-index: 60; top: calc(100% + 6px); left: 0; right: 0; min-width: 18rem;
  background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden; max-height: 60vh; overflow-y: auto;
}
.search-suggest__item {
  display: block; padding: 0.6rem 0.85rem; color: var(--c-text); text-decoration: none;
  font-size: 0.925rem; line-height: 1.35; border-bottom: 1px solid var(--c-border);
}
.search-suggest__item:last-child { border-bottom: 0; }
.search-suggest__item:hover, .search-suggest__item.is-active { background: var(--c-subtle); color: var(--c-brand); }
.search-suggest mark { background: none; color: var(--c-brand); font-weight: 700; }
@media (max-width: 640px) { .search-suggest { min-width: 0; } }

/* ── Back-to-top button (all public pages, public/js/site.js) ──── */
.to-top {
  position: fixed; right: max(1rem, env(safe-area-inset-right)); bottom: max(1rem, env(safe-area-inset-bottom)); z-index: 45;
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0;
  border: 1px solid var(--c-border); border-radius: 50%; background: var(--c-surface); color: var(--c-text);
  box-shadow: var(--shadow); cursor: pointer;
  opacity: 0; visibility: hidden; transform: translateY(0.5rem);
  transition: opacity 0.2s, transform 0.2s, visibility 0.2s, background-color 0.15s, color 0.15s;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--c-brand); border-color: var(--c-brand); color: var(--c-brand-ink); }
.to-top:focus-visible { outline: 2px solid var(--c-brand); outline-offset: 2px; }
.to-top svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-reduced-motion: reduce) { .to-top { transition: none; } }
@media print { .to-top { display: none !important; } }

/* ==========================================================================
   Spec & Compare (spec module) — spec pages, listings, comparisons, spec box in articles
   Classes: docs/STYLE-CLASSES.md (section "Spec & Compare")
   ========================================================================== */

.spec-page { display: grid; gap: var(--gap); padding-block: var(--gap) calc(var(--gap) * 2.5); min-width: 0; }
.spec-page > * { min-width: 0; }
.spec-page > .breadcrumbs .breadcrumbs__list { margin: 0; }
/* Spec / compare / listing pages: more compact text than article pages (data tables, not long reads) */
.spec-single, .spec-page { font-size: 0.9375rem; line-height: 1.55; }

.spec-panel {
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--radius-lg); padding: var(--panel-pad);
}

/* Spec page + compare page: same container as the article page (--single = 1187px).
   The header is a full-width background band (.spec-band, like .single-hero); content sits inside the container. */
.spec-band { background: var(--c-single-hero-bg); }
.spec-band__inner {
  width: min(100% - 2 * var(--gutter), var(--single)); margin-inline: auto;
  padding-block: clamp(1.25rem, 0.9rem + 1.5vw, 2rem) clamp(1.75rem, 1rem + 2vw, 2.75rem);
}
.spec-band .breadcrumbs__list { margin: 0 0 clamp(1rem, 0.8rem + 0.8vw, 1.5rem); }
.spec-page--narrow { width: min(100% - 2 * var(--gutter), var(--single)); margin-inline: auto; padding-top: clamp(1.75rem, 1rem + 2vw, 2.75rem); }
.spec-panel__title { font-size: clamp(1.08rem, 1rem + 0.3vw, 1.25rem); margin: 0 0 0.35rem; padding-top: 0.65rem; border-top: 3px solid var(--c-rule); }
.spec-panel__desc { margin: 0 0 1rem; color: var(--c-muted); font-size: 0.85rem; }
.spec-na { color: var(--c-muted); font-weight: 500; }
/* Data being updated (benchmark / price not yet available): placeholder text, data-nosnippet — Google does not use it in snippets */
.updating { color: var(--c-muted); font-style: italic; font-weight: 500; }
.spec-approx { color: var(--c-danger); font-weight: 700; margin-left: 0.1em; }
.spec-note { margin: 0; padding-inline: 0.25rem; font-size: 0.8rem; color: var(--c-muted); }

/* Spec page header: image · name + summary · score */
.spec-hero__grid { display: grid; grid-template-columns: minmax(0, 14rem) minmax(0, 1fr) minmax(0, 19rem); gap: calc(var(--gap) * 1.25); align-items: start; }
.spec-hero__media { display: grid; place-items: center; aspect-ratio: 3 / 4; overflow: hidden; background: var(--c-surface); border-radius: var(--radius); }
.spec-hero__scores { padding: 1.1rem 1.25rem 1.25rem; background: var(--c-surface); border-radius: var(--radius-lg); }
.spec-hero__img { width: 100%; height: 100%; object-fit: contain; padding: 0.9rem; }
.spec-hero__placeholder, .spec-card__placeholder { font: 700 0.7rem/1.2 var(--font-sans); letter-spacing: 0.09em; text-transform: uppercase; color: var(--c-muted); text-align: center; padding: 0.5rem; }
.spec-hero__eyebrow { margin: 0 0 0.45rem; font: 700 var(--fs-xs)/1.3 var(--font-sans); letter-spacing: 0.09em; text-transform: uppercase; color: var(--c-kicker); }
.spec-hero__eyebrow a { color: inherit; text-decoration: none; }
.spec-hero__eyebrow a:hover { text-decoration: underline; }
.spec-hero__title { font-size: clamp(1.4rem, 1.15rem + 1vw, 1.85rem); margin: 0 0 0.8rem; }

.spec-summary { margin: 0; display: grid; }
.spec-summary__row { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: 0.75rem; padding: 0.45rem 0; border-bottom: 1px solid var(--c-border); }
.spec-summary__row:last-child { border-bottom: 0; }
.spec-summary dt { font-size: 0.8rem; font-weight: 600; color: var(--c-muted); }
.spec-summary dd { margin: 0; font-weight: 600; font-size: 0.875rem; overflow-wrap: anywhere; }

.spec-overall { display: flex; align-items: center; gap: 1rem; padding-bottom: 1rem; margin-bottom: 1rem; border-bottom: 1px solid var(--c-border); }
.spec-overall__value { display: flex; align-items: center; justify-content: center; width: 4rem; height: 4rem; flex: none; border-radius: 50%; background: var(--c-brand); color: var(--c-brand-ink); font: 700 1.35rem/1 var(--font-heading); }
.spec-overall__value .spec-approx { align-self: flex-start; margin-top: 1rem; font-size: 0.7em; color: #ffb4ab; }
@media (prefers-color-scheme: dark) { .spec-overall__value .spec-approx { color: #b42318; } }
.spec-overall__label { font-weight: 700; }
.spec-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.8rem; }
.spec-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.3rem 0.75rem; font-size: 0.8125rem; }
.spec-bar__label { font-weight: 600; }
.spec-bar__value { font-weight: 700; font-variant-numeric: tabular-nums; }
.spec-bar__track { grid-column: 1 / -1; display: block; height: 6px; overflow: hidden; background: var(--c-subtle); border-radius: 3px; }
.spec-bar__fill { display: block; height: 100%; background: var(--c-brand); border-radius: 3px; }

@media (max-width: 1100px) {
  .spec-hero__grid { grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); }
  .spec-hero__scores { grid-column: 1 / -1; }
  .spec-bars { grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); column-gap: 1.5rem; }
}
@media (max-width: 640px) {
  .spec-hero__grid { grid-template-columns: minmax(0, 1fr); }
  .spec-hero__media { width: min(100%, 11rem); justify-self: center; }
  .spec-summary__row { grid-template-columns: 5.25rem minmax(0, 1fr); }
}

/* Compare form + device picker with suggestions (reuses the .search-suggest box) */
.spec-compare-form { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0.6rem; margin-top: 0.9rem; }
.spec-compare-form .button { flex: none; }
.spec-compare-form__vs { align-self: center; font: 700 0.75rem/1 var(--font-sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-muted); }
.spec-picker { position: relative; flex: 1 1 15rem; min-width: 0; }
.spec-picker__input {
  width: 100%; padding: 0.65em 0.9em; font: inherit; font-size: 0.9375rem; color: inherit;
  background: var(--c-surface); border: 1px solid color-mix(in srgb, var(--c-text) 22%, transparent); border-radius: var(--radius);
}
.spec-picker__input:focus { outline: none; border-color: var(--c-brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-brand) 18%, transparent); }
.spec-picker__list { top: calc(100% + 4px); min-width: 0; }
.spec-picker__item { display: flex; width: 100%; justify-content: space-between; align-items: baseline; gap: 1rem; background: none; border: 0; border-bottom: 1px solid var(--c-border); font: inherit; font-size: 0.875rem; text-align: left; cursor: pointer; }
.spec-picker__brand { flex: none; font-size: 0.78rem; color: var(--c-muted); }
.spec-picker__empty { margin: 0; padding: 0.65rem 0.85rem; font-size: 0.9rem; color: var(--c-muted); }
@media (max-width: 560px) {
  .spec-compare-form--multi .spec-picker { flex-basis: 100%; }
  .spec-compare-form--multi .spec-compare-form__vs { width: 100%; text-align: center; }
  .spec-compare-form .button { width: 100%; }
}

.spec-chips { display: flex; flex-wrap: wrap; gap: 0.45rem; list-style: none; margin: 1rem 0 0; padding: 0; }
.spec-chip {
  display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.38em 0.85em;
  border: 1px solid var(--c-border); border-radius: 999px; background: var(--c-surface);
  color: var(--c-text); font-size: 0.8rem; font-weight: 600; text-decoration: none;
}
.spec-chip:hover { border-color: var(--c-brand); color: var(--c-brand); }
.spec-chip.is-active { background: var(--c-brand); border-color: var(--c-brand); color: var(--c-brand-ink); }
.spec-chip__count { font-size: 0.75rem; opacity: 0.7; }

/* Full specification table: groups in 2 columns on wide screens (730px spec page: 1 column) */
/* "Full specifications" table of contents: full row of buttons at the top of the specs section (.spec-toc). Once scrolled past it,
   a compact 1-row button bar STICKS to the top of the screen (.spec-tocbar — built by JS from the same buttons, public/js/spec.js
   setupToc); the section in view is highlighted + scrolled into the middle; the bar hides after the specs section ends.
   --spec-sticky-top = header bar height if that bar is sticky, --spec-toc-h = button bar height,
   --spec-scroll-pad = page scroll-padding-top: measured by JS — clicking an item stops its block right below the bar, never hidden. */
.spec-toc { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0 0 1.1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--c-border); }
.spec-toc__link {
  display: inline-flex; align-items: center; flex: none; padding: 0.26rem 0.6rem;
  border: 1px solid var(--c-border); border-radius: 999px; background: var(--c-surface);
  color: var(--c-text); font: 600 0.75rem/1.2 var(--font-sans); white-space: nowrap; text-decoration: none;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.spec-toc__link:hover { border-color: var(--c-brand); color: var(--c-brand); }
.spec-toc__link.is-current { background: var(--c-brand); border-color: var(--c-brand); color: var(--c-brand-ink); }
.spec-tocbar { position: sticky; top: var(--spec-sticky-top, 0px); z-index: 6; height: 0; margin: 0 calc(-1 * var(--panel-pad)); }
.spec-tocbar__inner {
  display: flex; gap: 0.35rem; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
  padding: 0.5rem var(--panel-pad); background: var(--c-surface);
  border-bottom: 1px solid var(--c-border); box-shadow: 0 8px 14px -10px rgb(0 0 0 / 0.35);
  /* left/right edges fade out = more buttons, scrollable horizontally */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--panel-pad), #000 calc(100% - var(--panel-pad)), transparent);
  mask-image: linear-gradient(to right, transparent, #000 var(--panel-pad), #000 calc(100% - var(--panel-pad)), transparent);
  visibility: hidden; opacity: 0; transform: translateY(-0.25rem);
  transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
}
.spec-tocbar__inner::-webkit-scrollbar { display: none; }
.spec-tocbar.is-on .spec-tocbar__inner { visibility: visible; opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .spec-tocbar__inner { transition: none; } }
.spec-groups { columns: 2 22rem; column-gap: calc(var(--gap) * 1.5); }
.spec-group { break-inside: avoid; margin: 0 0 1.5rem; scroll-margin-top: calc(var(--spec-sticky-top, 0px) + var(--spec-toc-h, 2.75rem) + 0.5rem - var(--spec-scroll-pad, 0px)); }
.spec-group__title { display: flex; align-items: center; gap: 0.55rem; font-size: 1rem; margin: 0 0 0.2rem; padding-bottom: 0.45rem; border-bottom: 2px solid var(--c-rule); }
/* SVG icons (sprite public/icons/spec.svg): stroke follows the text colour */
.icn-svg { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.spec-group__icon { box-sizing: border-box; width: 1.85rem; height: 1.85rem; padding: 0.32rem; border-radius: var(--radius); background: var(--c-brand-soft); color: var(--c-brand); }
.spec-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; line-height: 1.5; }
.spec-table th, .spec-table td { padding: 0.5rem 0; border-bottom: 1px solid var(--c-border); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.spec-table tbody th { width: 42%; padding-right: 1rem; font-weight: 500; color: var(--c-muted); }
.spec-table td { font-weight: 600; }
.spec-table tbody tr:last-child > * { border-bottom: 0; }
.spec-table a { color: var(--c-link); }

/* Compare table */
.spec-group--vs { margin-bottom: 1.75rem; }
/* Spec page price block (price module) */
.spec-price__now { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.6rem; margin: 0.2rem 0 0.75rem; }
.spec-price__label { color: var(--c-muted); font-size: 0.85rem; }
.spec-price__range { font-size: 1.3rem; line-height: 1.2; }
.spec-price__table { margin-bottom: 0.75rem; }
.spec-price__table thead th { padding-top: 0.2rem; font: 700 var(--fs-xs)/1.3 var(--font-sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-muted); }
.spec-price__table th, .spec-price__table td { padding-right: 0.75rem; overflow-wrap: normal; }
.spec-price__amount { white-space: nowrap; }
.spec-price__table th:last-child, .spec-price__table td:last-child { padding-right: 0; }
.spec-price__date { white-space: nowrap; color: var(--c-muted); font-weight: 500; }
.spec-price__table tr.is-out td { color: var(--c-muted); }
.spec-price__out { font-size: 0.75rem; font-weight: 500; color: var(--c-muted); white-space: nowrap; }
.spec-price__low { margin: 0 0 0.75rem; font-size: 0.875rem; }
.spec-price__history { margin: 0 0 0.75rem; }
.spec-price__history > summary { cursor: pointer; font-weight: 600; font-size: 0.875rem; color: var(--c-link); margin-bottom: 0.5rem; }
@media (max-width: 480px) {
  .spec-price__table { font-size: 0.8125rem; }
  .spec-price__table th, .spec-price__table td { padding-right: 0.5rem; }
  .spec-price__table thead th { letter-spacing: 0.02em; }
  /* Current price table: drop the date column ("Updated …" is shown below) */
  .spec-price__offers .spec-price__date { display: none; }
  .spec-price__offers td:nth-last-child(2) { padding-right: 0; }
  .spec-price__history .spec-price__table { font-size: 0.75rem; }
}
/* User-submitted figure (median) replaces the original number in the spec table: "3,110,500 4 results" */
.spec-users { display: inline-block; margin-left: 0.35em; padding: 0 0.45em; border-radius: 999px; background: var(--c-subtle); border: 1px solid var(--c-border); color: var(--c-muted); font-size: 0.72rem; font-weight: 600; line-height: 1.5; white-space: nowrap; vertical-align: 0.1em; }
/* "User results" block on the spec page */
.spec-users-box__type + .spec-users-box__type { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--c-border); }
.spec-users-box__name { margin: 0 0 0.5rem; font-size: 1rem; }
.spec-users-box__table { margin-bottom: 0.6rem; }
.spec-users-box__table thead th { padding-top: 0.2rem; font: 700 var(--fs-xs)/1.3 var(--font-sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-muted); }
.spec-users-box__table th, .spec-users-box__table td { padding-right: 0.75rem; overflow-wrap: normal; }
.spec-users-box__table th:last-child, .spec-users-box__table td:last-child { padding-right: 0; }
.spec-users-box__ctx, .spec-users-box__range { display: block; font-size: 0.75rem; font-weight: 500; color: var(--c-muted); }
.spec-users-box__n { width: 1%; text-align: right; white-space: nowrap; }
.spec-users-box__add { margin: 0; }
.spec-users-box > .spec-panel__desc { margin: 1rem 0 0; }
/* /submit/ — users submit results */
.submit-page { max-width: 46rem; margin: 0 auto; }
.submit-page__title { font-size: var(--fs-h2); margin: 0 0 0.5rem; }
.submit-page__intro { color: var(--c-muted); margin: 0 0 1.25rem; }
.submit-page__links { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; }
.submit-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.75rem; }
.submit-list__item { padding: 1rem 1.25rem; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); }
.submit-list__link { font-weight: 700; font-size: 1.05rem; }
.submit-list__desc { margin: 0.35rem 0 0; font-size: var(--fs-sm); }
.submit-list__meta { margin: 0.35rem 0 0; font-size: var(--fs-xs); color: var(--c-muted); }
.submit-form { padding: clamp(1rem, 3vw, 1.75rem); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); }
.submit-form__group { border: 0; padding: 0; margin: 0 0 1.25rem; min-width: 0; }
.submit-form__legend { padding: 0; margin: 0 0 0.6rem; font: 700 var(--fs-xs)/1.3 var(--font-sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-muted); }
.submit-form__trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.submit-form__device { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.submit-form__req { color: var(--c-danger); }
.submit-form__note { margin: 0.75rem 0 0; font-size: 0.8rem; color: var(--c-muted); }
.field__help { color: var(--c-muted); font-size: 0.8rem; }
.spec-table--vs { table-layout: fixed; }
.spec-table--vs thead th { padding-top: 0.2rem; font: 700 var(--fs-xs)/1.3 var(--font-sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-muted); }
.spec-table--vs tbody th { width: 30%; }
.spec-table--vs td { width: 35%; padding-right: 0.75rem; }
.spec-table td.is-win { color: var(--c-success); }
.spec-table td.is-win::after { content: " ✓"; font-size: 0.85em; }
/* Rows where the devices DIFFER: light background + coloured bar on the left; rows that are the SAME: muted text — differences stand out at a glance */
.spec-table--vs tbody th { padding-left: 0.7rem; }
.spec-table--vs tbody tr.is-diff > * { background: color-mix(in srgb, var(--c-brand) 6%, transparent); }
.spec-table--vs tbody tr.is-diff > th { box-shadow: inset 3px 0 0 var(--c-brand); color: var(--c-text); }
.spec-table--vs tbody tr.is-same > td { color: var(--c-muted); font-weight: 500; }
.spec-vs-legend { display: flex; flex-wrap: wrap; gap: 0.35rem 1.1rem; margin: -0.35rem 0 1rem; font-size: 0.78rem; color: var(--c-muted); }
.spec-vs-legend > span { display: inline-flex; align-items: center; gap: 0.4rem; }
.spec-vs-legend__diff::before, .spec-vs-legend__same::before { content: ""; width: 0.95rem; height: 0.95rem; border-radius: 2px; }
.spec-vs-legend__diff::before { background: color-mix(in srgb, var(--c-brand) 12%, transparent); box-shadow: inset 3px 0 0 var(--c-brand); }
.spec-vs-legend__same::before { border: 1px solid var(--c-border); }
.spec-vs-legend__win::before { content: "✓"; color: var(--c-success); font-weight: 700; }
/* Score block on the compare page: same table layout — number + bar in each device column */
.spec-table--scores td { vertical-align: middle; }
.spec-table--scores td.is-win::after { content: none; }
.spec-score__cell { display: flex; align-items: center; gap: 0.6rem; }
.spec-score__num { flex: none; min-width: 2.1rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.spec-score .spec-bar__track { flex: 1; max-width: 10rem; }
.spec-score .spec-bar__track { background: color-mix(in srgb, var(--c-text) 10%, transparent); }
.spec-score.is-win .spec-score__num { color: var(--c-success); }
.spec-score:not(.is-win) .spec-bar__fill { background: color-mix(in srgb, var(--c-text) 28%, transparent); }
@media (max-width: 560px) {
  /* Narrow screens: score name on its own line, below it the number + bar for each device (a narrow label column would cut the text) */
  .spec-table--scores, .spec-table--scores thead, .spec-table--scores tbody { display: block; }
  .spec-table--scores tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 0.75rem; border-bottom: 1px solid var(--c-border); }
  .spec-n3 .spec-table--scores tr { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .spec-table--scores tbody tr:last-child { border-bottom: 0; }
  .spec-table--scores thead th, .spec-table--scores tbody th, .spec-table--scores tbody td { width: auto; padding-right: 0; border-bottom: 0; }
  .spec-table--scores thead th:first-child { display: none; }
  .spec-table--scores tbody th { grid-column: 1 / -1; padding-bottom: 0.1rem; }
  .spec-table--scores tbody td, .spec-table--scores thead th { padding-left: 0.7rem; }
  .spec-table--scores tbody td { padding-top: 0.1rem; }
  .spec-score__cell { gap: 0.45rem; }
  /* Stacked rows: colour bar + background applied to the whole row instead of each cell */
  :is(.spec-table--scores, .spec-n3 .spec-table--vs) tbody tr.is-diff { background: color-mix(in srgb, var(--c-brand) 6%, transparent); box-shadow: inset 3px 0 0 var(--c-brand); }
  :is(.spec-table--scores, .spec-n3 .spec-table--vs) tbody tr.is-diff > * { background: none; box-shadow: none; }
  .spec-n3 .spec-table--vs tbody td { padding-left: 0.7rem; }
}
/* 3 devices: label 25% + 3 columns of 25% */
.spec-n3 .spec-table--vs tbody th, .spec-n3 .spec-table--vs td { width: 25%; }
@media (max-width: 560px) {
  .spec-table--vs { font-size: 0.85rem; }
  .spec-table--vs tbody th { width: 34%; }
  /* 3 devices on narrow screens: label on its own line above the 3 values */
  .spec-n3 .spec-table--vs, .spec-n3 .spec-table--vs thead, .spec-n3 .spec-table--vs tbody { display: block; }
  .spec-n3 .spec-table--vs tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 0.75rem; border-bottom: 1px solid var(--c-border); }
  .spec-n3 .spec-table--vs tbody tr:last-child { border-bottom: 0; }
  .spec-n3 .spec-table--vs thead th, .spec-n3 .spec-table--vs tbody th, .spec-n3 .spec-table--vs tbody td { width: auto; padding-right: 0; border-bottom: 0; }
  .spec-n3 .spec-table--vs thead th:first-child { display: none; }
  .spec-n3 .spec-table--vs tbody th { grid-column: 1 / -1; padding-bottom: 0.1rem; }
  .spec-n3 .spec-table--vs tbody td { padding-top: 0.1rem; }
}

.spec-vs__title { font-size: clamp(1.4rem, 1.15rem + 1vw, 1.85rem); margin: 0 0 0.35rem; text-align: center; }
.spec-vs__lead { margin: 0; text-align: center; color: var(--c-muted); font-size: 0.925rem; }
/* Device columns with VS badges in between: [device] VS [device] (VS [device]) */
.spec-vs__grid { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: var(--gap); margin-top: clamp(1.25rem, 1rem + 1vw, 1.75rem); }
.spec-n3 .spec-vs__grid { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); }
.spec-vs__side { display: grid; justify-items: center; align-content: start; gap: 0.75rem; min-width: 0; }
.spec-vs__media { display: grid; place-items: center; width: 8.5rem; aspect-ratio: 3 / 4; overflow: hidden; background: var(--c-surface); border-radius: var(--radius); }
.spec-vs__media img { width: 100%; height: 100%; object-fit: contain; padding: 0.6rem; }
.spec-vs__name { font-size: 1.1rem; margin: 0; text-align: center; }
.spec-vs__name a { color: var(--c-text); text-decoration: none; }
.spec-vs__name a:hover { color: var(--c-brand); text-decoration: underline; }
.spec-summary--compact { width: 100%; }
.spec-vs__badge {
  align-self: start; margin-top: 4.3rem;   /* middle of the image height (8.5rem × 4/3) */
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%;
  background: var(--c-accent); color: #fff; font: 700 0.85rem/1 var(--font-heading);
}
@media (max-width: 640px) {
  .spec-vs__grid { gap: 0.75rem; }
  .spec-vs__media { width: 5.5rem; }
  .spec-vs__badge { margin-top: 2.55rem; width: 2.25rem; height: 2.25rem; font-size: 0.75rem; }
  .spec-vs__name { font-size: 1.05rem; }
  .spec-n3 .spec-vs__grid { gap: 0.35rem; }
  .spec-n3 .spec-vs__media { width: 4.5rem; }
  .spec-n3 .spec-vs__badge { margin-top: 2.1rem; width: 1.75rem; height: 1.75rem; font-size: 0.62rem; }
  .spec-n3 .spec-vs__name { font-size: 0.95rem; }
  .spec-summary--compact .spec-summary__row { grid-template-columns: minmax(0, 1fr); gap: 0.1rem; }
  .spec-summary--compact dd { font-size: 0.85rem; }
}

.spec-pros { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
.spec-pros__list { display: grid; gap: 0.45rem; margin: 0.75rem 0 0; padding-left: 1.15rem; font-size: 0.875rem; }
.spec-pros__list li::marker { color: var(--c-success); }
.spec-n3 .spec-pros { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 800px) { .spec-pros, .spec-n3 .spec-pros { grid-template-columns: minmax(0, 1fr); } }

/* Device list */
.spec-list-head .page-header__title { font-size: clamp(1.4rem, 1.15rem + 1vw, 1.85rem); margin: 0; }
.spec-list-head .page-header__eyebrow { color: var(--c-kicker); margin: 0 0 0.5rem; }
.spec-list-head .page-header__desc { max-width: 46rem; margin: 0.6rem 0 0; color: var(--c-muted); font-size: 0.95rem; }
.spec-list-head .page-header__count { margin: 0.6rem 0 0; color: var(--c-muted); font-size: var(--fs-sm); }
.spec-list-head__compare { margin: 1.1rem 0 0; font-size: 0.9rem; font-weight: 700; }
.spec-list-head__compare a { color: var(--c-brand); text-decoration: none; }
.spec-list-head__compare a:hover { text-decoration: underline; }

.spec-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr)); gap: var(--gap); }
.spec-card {
  position: relative; display: grid; grid-template-columns: 5.25rem minmax(0, 1fr); gap: 1rem; align-items: start;
  padding: 1rem; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-lg);
  transition: box-shadow 0.2s, border-color 0.2s;
}
.spec-card:hover { box-shadow: var(--shadow); border-color: transparent; }
.spec-card__media { display: grid; place-items: center; aspect-ratio: 3 / 4; overflow: hidden; background: var(--c-subtle); border-radius: var(--radius); }
.spec-card__img { width: 100%; height: 100%; object-fit: contain; padding: 0.3rem; }
.spec-card__body { min-width: 0; }
.spec-card__brand { margin: 0 0 0.2rem; font: 700 var(--fs-xs)/1.2 var(--font-sans); letter-spacing: 0.09em; text-transform: uppercase; color: var(--c-kicker); }
.spec-card__title { font-size: 1rem; line-height: 1.25; margin: 0 0 0.5rem; }
.spec-card__title a { color: var(--c-text); text-decoration: none; }
.spec-card__title a::after { content: ""; position: absolute; inset: 0; }   /* whole card is clickable */
.spec-card:hover .spec-card__title a { color: var(--c-brand); }
.spec-card__specs { display: grid; gap: 0.2rem; margin: 0; font-size: 0.8rem; line-height: 1.4; }
.spec-card__specs div { display: grid; grid-template-columns: 3.9rem minmax(0, 1fr); gap: 0.5rem; }
.spec-card__specs dt { color: var(--c-muted); }
.spec-card__specs dd { margin: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; }
.spec-page .pagination { margin-top: 0; }

.spec-pair-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 0.75rem; list-style: none; margin: 0.9rem 0 0; padding: 0; }
.spec-pair__link {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; height: 100%;
  padding: 0.85rem 1rem; border: 1px solid var(--c-border); border-radius: var(--radius);
  color: var(--c-text); font-size: 0.875rem; font-weight: 600; text-decoration: none;
}
.spec-pair__link:hover { border-color: var(--c-brand); color: var(--c-brand); }
.spec-pair__name { min-width: 0; }
.spec-pair__name:last-child { text-align: right; }
.spec-pair__vs { flex: none; padding: 0.2em 0.55em; border-radius: 999px; background: var(--c-accent); color: #fff; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }

.spec-review-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr)); gap: 1.25rem var(--gap); margin-top: 1rem; }
.spec-review-list .post-card { grid-template-columns: minmax(0, 1fr); align-content: start; }
.spec-review-list .post-card--has-image { grid-template-columns: minmax(0, 8rem) minmax(0, 1fr); gap: 1rem; }
.spec-review-list .post-card__media { aspect-ratio: 4 / 3; }
.spec-review-list .post-card__title { font-size: 0.975rem; }
@media (max-width: 480px) { .spec-review-list { grid-template-columns: minmax(0, 1fr); } }
.spec-intro.prose { max-width: none; font-size: 0.9375rem; }
.spec-intro p { max-width: 60rem; }

/* Spec box at the end of a review */
.spec-box { display: grid; gap: 1rem; margin-top: 2.5rem; }
.spec-box__item {
  display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 1.25rem;
  padding: 1.25rem 1.4rem; background: var(--c-subtle); border-top: 3px solid var(--c-brand); border-radius: 0 0 var(--radius) var(--radius);
}
.spec-box__item:not(:has(.spec-box__media)) { grid-template-columns: minmax(0, 1fr); }
.spec-box__media { display: grid; place-items: center; align-self: start; aspect-ratio: 3 / 4; overflow: hidden; background: var(--c-surface); border-radius: var(--radius); }
.spec-box__media img { width: 100%; height: 100%; object-fit: contain; padding: 0.4rem; }
.spec-box__body { min-width: 0; }
.spec-box__eyebrow { margin: 0 0 0.2rem; font: 700 var(--fs-xs)/1.2 var(--font-sans); letter-spacing: 0.09em; text-transform: uppercase; color: var(--c-kicker); }
.spec-box__name { margin: 0 0 0.6rem; font: 700 1.3rem/1.2 var(--font-heading); }
.spec-box__name a { color: var(--c-text); text-decoration: none; }
.spec-box__name a:hover { color: var(--c-brand); text-decoration: underline; }
.spec-box__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 0.35rem 1.5rem; margin: 0 0 1rem; font-size: 0.875rem; }
.spec-box__list div { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: 0.5rem; }
.spec-box__list dt { font-weight: 600; color: var(--c-muted); }
.spec-box__list dd { margin: 0; font-weight: 600; }
.spec-box__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; }
@media (max-width: 560px) { .spec-box__item { grid-template-columns: 4.5rem minmax(0, 1fr); gap: 1rem; padding: 1rem; } }

/* Hidden via the hidden attribute (JS toggles it when the configuration option changes) — overrides any display of spec blocks */
.spec-single [hidden], .spec-page [hidden] { display: none !important; }

/* Configuration options (RAM / CPU… dropdowns — data from the crawler): on the spec page under the device name, on the compare page under each device name */
.spec-variants { display: flex; flex-wrap: wrap; gap: 0.6rem 0.9rem; margin: 0 0 1rem; }
.spec-variants__item { display: grid; gap: 0.3rem; flex: 0 1 15rem; min-width: 0; }
.spec-variants__label { font: 700 var(--fs-xs)/1.2 var(--font-sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-muted); }
.spec-variants__select {
  appearance: none; -webkit-appearance: none; width: 100%; min-width: 0;
  padding: 0.5em 2.2em 0.5em 0.8em; font: 600 0.875rem/1.3 var(--font-sans); color: var(--c-text);
  background-color: var(--c-surface);
  background-image: linear-gradient(45deg, transparent 50%, var(--c-muted) 50%), linear-gradient(135deg, var(--c-muted) 50%, transparent 50%);
  background-position: calc(100% - 1.1em) 55%, calc(100% - 0.8em) 55%;
  background-size: 0.3em 0.3em, 0.3em 0.3em; background-repeat: no-repeat;
  border: 1px solid color-mix(in srgb, var(--c-text) 22%, transparent); border-radius: var(--radius); cursor: pointer;
}
.spec-variants__select:hover { border-color: var(--c-brand); }
.spec-variants__select:focus-visible { outline: none; border-color: var(--c-brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-brand) 18%, transparent); }
.spec-variants--compact { justify-content: center; width: 100%; margin: 0; }
.spec-variants--compact .spec-variants__item { flex: 1 1 9rem; }
.spec-variants--compact .spec-variants__label { text-align: left; }
.spec-variants--compact .spec-variants__select { font-size: 0.8125rem; }
@media (max-width: 640px) {
  .spec-variants__item { flex-basis: 100%; }
  .spec-n3 .spec-variants__label { font-size: 0.62rem; letter-spacing: 0.03em; }
  .spec-n3 .spec-variants__select { padding: 0.45em 1.6em 0.45em 0.5em; font-size: 0.75rem; background-position: calc(100% - 0.85em) 55%, calc(100% - 0.55em) 55%; }
}

/* Compare form while navigating: button locked + spinner */
.spec-compare-form .button.is-loading { display: inline-flex; align-items: center; justify-content: center; gap: 0.55em; cursor: progress; opacity: 0.9; }
.spec-compare-form.is-loading .spec-picker__input { opacity: 0.6; cursor: progress; }
.spec-spinner {
  display: inline-block; flex: none; width: 1em; height: 1em; box-sizing: border-box;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: spec-spin 0.7s linear infinite;
}
@keyframes spec-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spec-spinner { animation: none; border-right-color: currentColor; opacity: 0.6; } }

/* Apply button of the configuration dropdowns: changes take effect only after clicking Apply (grey while nothing has changed) */
.spec-variants { align-items: flex-end; }
.spec-variants__fields { display: contents; }
.spec-variants__apply { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; min-height: 2.55rem; padding-block: 0.5em; }
.spec-variants__apply:disabled { opacity: 1; cursor: not-allowed; background: var(--c-subtle); color: var(--c-muted); border-color: transparent; box-shadow: none; filter: none; }
.spec-variants__apply.is-dirty { box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-brand) 24%, transparent); }
.spec-variants__apply.is-loading, .spec-variants__apply.is-loading:disabled { cursor: progress; background: var(--c-brand); color: var(--c-brand-ink); opacity: 0.92; }
.spec-variants.is-dirty .spec-variants__select { border-color: var(--c-brand); }
.spec-variants--compact .spec-variants__apply { flex: 1 1 100%; min-height: 2.3rem; font-size: 0.875rem; }
@media (max-width: 640px) { .spec-variants__apply { flex: 1 1 100%; } }

/* Updating figures after clicking Apply: the data area fades briefly */
:is(.spec-summary, .spec-hero__scores, .spec-rating, .spec-glance, .spec-groups, .spec-table--scores, .spec-pros, .spec-group--vs, .spec-vs__lead) { transition: opacity 0.2s; }
.is-updating :is(.spec-summary, .spec-hero__scores, .spec-rating, .spec-glance, .spec-groups, .spec-table--scores, .spec-pros, .spec-group--vs, .spec-vs__lead) { opacity: 0.35; }
@media (prefers-reduced-motion: reduce) { :is(.spec-summary, .spec-hero__scores, .spec-rating, .spec-glance, .spec-groups, .spec-table--scores, .spec-pros, .spec-group--vs, .spec-vs__lead) { transition: none; } }

/* "At a glance" right below the spec page header: overall score + strengths / weaknesses versus devices of the same type */
.spec-glance__verdict { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.9rem; margin: 0.65rem 0 1.1rem; }
.spec-glance__score { display: inline-flex; align-items: baseline; padding: 0.4rem 0.75rem; border-radius: var(--radius); background: var(--c-subtle); font: 700 1.45rem/1 var(--font-heading); font-variant-numeric: tabular-nums; }
.spec-glance__score small { margin-left: 0.15em; font-size: 0.5em; font-weight: 600; color: var(--c-muted); }
.spec-glance__score--hi { color: var(--c-success); }
.spec-glance__score--lo { color: var(--c-danger); }
.spec-glance__rating { font-size: 0.875rem; color: var(--c-muted); }
.spec-glance__rating strong { color: var(--c-text); }
.spec-glance__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem calc(var(--gap) * 1.5); }
.spec-glance__head { margin: 0 0 0.35rem; font: 700 var(--fs-xs)/1.2 var(--font-sans); letter-spacing: 0.08em; text-transform: uppercase; }
.spec-glance__col--pros .spec-glance__head { color: var(--c-success); }
.spec-glance__col--cons .spec-glance__head { color: var(--c-danger); }
.spec-glance__list { list-style: none; margin: 0; padding: 0; }
.spec-glance__item { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.15rem 0.75rem; padding: 0.55rem 0 0.55rem 1rem; border-bottom: 1px solid var(--c-border); font-size: 0.875rem; }
.spec-glance__item:last-child { border-bottom: 0; }
.spec-glance__item::before { content: ""; position: absolute; left: 0; top: 0.95rem; width: 0.45rem; height: 0.45rem; border-radius: 50%; }
.spec-glance__col--pros .spec-glance__item::before { background: var(--c-success); }
.spec-glance__col--cons .spec-glance__item::before { background: var(--c-danger); }
.spec-glance__label { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.spec-glance__value { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.spec-glance__note { grid-column: 1 / -1; font-size: 0.78rem; color: var(--c-muted); }
.spec-glance__none { margin: 0.4rem 0 0; font-size: 0.85rem; color: var(--c-muted); }
@media (max-width: 640px) { .spec-glance__cols { grid-template-columns: minmax(0, 1fr); } }

/* Spec page: 730px reading container — the header background stays full width, header content + page body both narrow to 730px,
   one block per row (specs in 1 column). Compare / article / home pages keep their own widths. */
.spec-single--read { --read: 730px; }
.spec-single--read .spec-band__inner, .spec-page--read { width: min(100% - 2 * var(--gutter), var(--read)); }
.spec-single--read .spec-hero__grid { grid-template-columns: minmax(0, 10.5rem) minmax(0, 1fr); gap: 1.5rem; }
.spec-single--read .spec-hero__title { font-size: clamp(1.4rem, 1.15rem + 1vw, 1.85rem); }
.spec-page--read .spec-groups { columns: 1; }
.spec-hero__config { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid color-mix(in srgb, var(--c-text) 12%, transparent); }
.spec-hero__config-title { margin: 0 0 0.6rem; font: 700 var(--fs-xs)/1.2 var(--font-sans); letter-spacing: 0.09em; text-transform: uppercase; color: var(--c-kicker); }
.spec-hero__config .spec-variants { margin: 0; }
.spec-hero__config .spec-variants__item { flex: 1 1 12.5rem; }
@media (max-width: 560px) {
  .spec-single--read .spec-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .spec-single--read .spec-hero__media { width: min(100%, 10rem); justify-self: center; }
}

/* Score block (calculated by the site) right below the header: overall score + 2-column score bars */
.spec-rating__overall { gap: 1rem; margin: 0.5rem 0 1.2rem; padding-bottom: 1.1rem; }
.spec-rating__text { display: grid; gap: 0.15rem; }
.spec-rating__word { font: 700 1.05rem/1.2 var(--font-heading); color: var(--c-text); }
.spec-rating__bars { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; row-gap: 0.9rem; }
@media (max-width: 560px) { .spec-rating__bars { grid-template-columns: minmax(0, 1fr); } }

/* Spec page with ads (Admin → Ads → Spec page; empty = use the article sidebar code):
   730px container + 300px right column (ad sticks while scrolling, reuses .single-sidebar of the article page).
   The header background stays full width; header content lines up with the 730px column on the left. */
.spec-single--read { --read-side: 300px; --read-gap: 2rem; }
.spec-single--side .spec-band__inner,
.spec-single--side .spec-body { width: min(100% - 2 * var(--gutter), calc(var(--read) + var(--read-gap) + var(--read-side))); }
.spec-single--side .spec-hero__wrap { max-width: var(--read); }
.spec-single--side .spec-body { display: grid; grid-template-columns: minmax(0, var(--read)) var(--read-side); gap: var(--read-gap); align-items: start; margin-inline: auto; }
.spec-single--side .spec-page--read { width: auto; margin: 0; }
.spec-sidebar { align-self: stretch; padding-top: clamp(1.75rem, 1rem + 2vw, 2.75rem); }   /* same height as the left column => the ad can stick for the whole page */
/* Ad slot without border / padding: fits exactly 300px (300×250, 300×600) */
.spec-sidebar .ad-slot { padding: 0; border: 0; border-radius: 0; background: none; }
.spec-sidebar .ad-slot__label { display: block; margin: 0 0 0.35rem; text-align: center; }
.spec-sidebar .ad-slot:not(.ad-slot--empty) { min-height: 250px; }
.spec-sidebar .single-sidebar__sticky { top: calc(var(--spec-sticky-top, 0px) + 1rem); }
@media (max-width: 1140px) {
  .spec-single--side .spec-band__inner, .spec-single--side .spec-body { width: min(100% - 2 * var(--gutter), var(--read)); }
  .spec-single--side .spec-hero__wrap { max-width: none; }
  .spec-single--side .spec-body { display: block; }
  .spec-sidebar { padding: 0 0 calc(var(--gap) * 2.5); }
  .spec-sidebar .single-sidebar__sticky { position: static; }
}

/* Compare with rivals + compare-other-device button + latest comparisons (internal links) */
.spec-rivals__list { display: grid; margin: 0.4rem 0 0; padding-left: 1.6rem; }
.spec-rivals__item { border-bottom: 1px solid var(--c-border); }
.spec-rivals__item::marker { color: var(--c-muted); font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.spec-rivals__link { display: inline-block; padding: 0.55rem 0; color: var(--c-text); font-size: 0.9rem; font-weight: 600; text-decoration: none; }
.spec-rivals__link:hover { color: var(--c-brand); }
.spec-rivals__link:hover .spec-rivals__name { text-decoration: underline; }
.spec-rivals__vs { margin-inline: 0.2rem; font-size: 0.75rem; font-weight: 600; color: var(--c-muted); }
.spec-rivals__more { margin: 1.1rem 0 0; }
.spec-rivals__button { display: flex; width: 100%; justify-content: center; }
.spec-rivals__note { margin: 0.7rem 0 0; font-size: 0.8rem; color: var(--c-muted); }
.spec-rivals__note a { color: var(--c-link); }
.spec-latest__list { margin-top: 0.6rem; }

/* Comments on the spec page: reuses the article comment block, placed inside a panel */
.spec-comments .comments { max-width: none; margin: 0; }
.spec-comments .comments__title { margin: 0 0 0.25rem; padding-top: 0.65rem; font-size: clamp(1.08rem, 1rem + 0.3vw, 1.25rem); }
.spec-comments .comment__content { font-size: 0.9rem; }
.spec-comments .comment-form { padding: 1.1rem 1.25rem; }

/* ── Home page: Spec block (spec module — src/modules/spec/home.js) ───────────
   spec_tabs: All tab (one column per type, "Recent …") + one tab per type · spec_compare: Popular comparisons */
.hp-spec, .hp-compare {
  background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-lg); padding: var(--panel-pad);
}
.hp-spec__head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; margin-bottom: 1.25rem; padding-top: 0.7rem; border-top: 3px solid var(--c-rule); }
.hp-spec__head .hp-block-title { margin: 0; padding: 0; border: 0; }
.hp-spec__tabs { display: flex; gap: 0.4rem; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.hp-spec__tabs::-webkit-scrollbar { display: none; }
.hp-spec__tab {
  flex: none; padding: 0.45rem 0.95rem; border: 1px solid var(--c-border); border-radius: 999px; background: transparent;
  color: var(--c-text); font: 600 var(--fs-sm)/1.2 var(--font-sans); white-space: nowrap; cursor: pointer;
}
.hp-spec__tab:hover { border-color: var(--c-brand); color: var(--c-brand); }
.hp-spec__tab.is-active { border-color: var(--c-brand); background: var(--c-brand); color: var(--c-brand-ink); }
.hp-spec__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: 1.75rem var(--gap); }
.hp-spec__title { margin: 0 0 0.35rem; font-size: 1.05rem; }
.hp-spec__title a { color: var(--c-text); text-decoration: none; }
.hp-spec__title a:hover { color: var(--c-brand); }
.hp-spec__title a::after { content: " →"; color: var(--c-muted); }
.hp-spec__more { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin: 1rem 0 0; font-size: 0.9rem; font-weight: 700; }
.hp-spec__more a { color: var(--c-brand); text-decoration: none; }
.hp-spec__more a::after { content: " →"; }

/* "Recent …" list: number · name · short specs (All tab: secondary line; per-type tab: aligned columns) */
.hs-list { margin: 0; padding: 0; list-style: none; }
.hs-row { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); column-gap: 0.5rem; padding-block: 0.55rem; border-bottom: 1px solid var(--c-border); }
.hs-row:last-child { border-bottom: 0; }
.hs-row__num { grid-row: span 2; font: 700 1rem/1.35 var(--font-heading); color: var(--c-accent); }
.hs-row__name { color: var(--c-text); font-weight: 600; line-height: 1.35; text-decoration: none; overflow-wrap: anywhere; }
a.hs-row__name:hover { color: var(--c-brand); text-decoration: underline; }
.hs-row__specs { display: flex; flex-wrap: wrap; gap: 0 0.5rem; font-size: 0.8125rem; color: var(--c-muted); }
.hs-row__val + .hs-row__val::before { content: "·"; margin-right: 0.5rem; opacity: 0.7; }
.hs-row--head { display: none; }
@media (min-width: 701px) {
  .hs-list--wide .hs-row { grid-template-columns: 2rem minmax(0, 1fr) minmax(0, 1.6fr); align-items: center; column-gap: 1rem; }
  .hs-list--wide .hs-row__num { grid-row: auto; }
  .hs-list--wide .hs-row__specs { display: grid; grid-template-columns: repeat(var(--hs-cols, 3), minmax(0, 1fr)); gap: 1rem; font-size: var(--fs-sm); color: var(--c-text); }
  .hs-list--wide .hs-row__val + .hs-row__val::before { content: none; }
  .hs-list--wide .hs-row__val.is-empty { color: var(--c-muted); }
  .hs-list--wide .hs-row--head { display: grid; padding-block: 0 0.45rem; border-bottom: 2px solid var(--c-border); }
  .hs-list--wide .hs-row--head > *, .hs-list--wide .hs-row--head .hs-row__specs {
    font: 700 var(--fs-xs)/1.2 var(--font-sans); letter-spacing: 0.09em; text-transform: uppercase; color: var(--c-muted);
  }
}

.hp-compare__list { margin: 0; padding: 0; list-style: none; counter-reset: hp-compare; }
.hp-compare__item { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); column-gap: 0.5rem; align-items: baseline; padding-block: 0.6rem; border-bottom: 1px solid var(--c-border); counter-increment: hp-compare; }
.hp-compare__item::before { content: counter(hp-compare) "."; font: 700 1rem/1.35 var(--font-heading); color: var(--c-accent); }
.hp-compare__text { line-height: 1.45; }
.hp-compare__type { margin-right: 0.15rem; font: 700 var(--fs-xs)/1.2 var(--font-sans); letter-spacing: 0.09em; text-transform: uppercase; color: var(--c-kicker); }
.hp-compare__link { color: var(--c-text); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.hp-compare__link:hover { color: var(--c-brand); text-decoration: underline; }
.hp-compare__vs { color: var(--c-muted); font-weight: 400; }
.hp-compare__views { color: var(--c-muted); font-size: var(--fs-sm); }