/* The Verdict brand book, sections 04-20. Components only; tokens live in theme.json.
   Roles: 70% bone, 20% char, 7% sand, 3% verdict orange. If orange feels present, there is too much. */

:root {
  --wa-ground:    #FFF8F0;
  --wa-surface:   #F2E3CF;
  --wa-ink:       #1B1A17;
  --wa-ink-soft:  #4A453E;
  --wa-muted:     #7A736A;
  --wa-line:      #E5D9CB;
  --wa-chrome:    #1B1A17;
  --wa-on-chrome: #FFF8F0;
  --wa-verdict:   #FF5321;
  --wa-go:        #1F6F5C;
  /* space scale, multiples of 8, nothing between */
  --wa-1: 8px; --wa-2: 16px; --wa-3: 24px; --wa-4: 40px; --wa-5: 56px; --wa-6: 88px;
}

/* ---------- foundations ---------- */

.wa-header { position: sticky; top: 0; z-index: 99; min-height: 72px; }

.wa-mono,
.wa-label,
p.is-style-wa-label {
  font-family: var(--wp--preset--font-family--mono);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--wa-muted);
}
.wa-label,
p.is-style-wa-label { display: block; margin: 0 0 var(--wa-2); }

/* Components below lay their children out with flex gap; cancel the flow-layout
   margins WordPress adds between sibling blocks so the spacing is not doubled. */
.wa-verdict-block > *,
.wa-verdict-block__row > *,
.wa-verdict-block__meta > *,
.wa-card__body > *,
.wa-trust > *,
.wa-sponsored > *,
.wa-newsletter > *,
.wa-disclosure > *,
.wa-correction > *,
.wa-counter > *,
.wa-chart > * { margin-block: 0; }

/* Hit areas: 44px minimum, always square. */
.wp-block-button__link,
.wp-element-button { min-height: 44px; display: inline-flex; align-items: center; border-radius: 0; }

/* Verdict CTA: verb + vendor + arrow. The only orange button. */
.wp-block-button.is-style-wa-verdict .wp-block-button__link {
  background: var(--wa-verdict);
  color: var(--wa-on-chrome);
  border-color: var(--wa-verdict);
}
.wp-block-button.is-style-wa-verdict .wp-block-button__link:hover {
  background: var(--wa-chrome);
  border-color: var(--wa-chrome);
  color: var(--wa-on-chrome);
}

/* Links carry an orange underline only, never orange body text.
   Section 18 lists orange body text as forbidden, so the colour is char and only
   the rule underneath is orange. */
/* :where() keeps this at zero specificity so the on-char overrides below,
   and WordPress's own :root :where(a) rule, can still win the colour. */
a:where(:not(.wp-block-button__link):not(.wa-chip)) {
  color: var(--wa-ink);
  text-decoration-color: var(--wa-verdict);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
/* On a char ground the light colour has to win: header, footer, panels. */
.has-char-background-color a,
.wa-panel a,
.wa-verdict-block a,
.wa-counter a,
footer a { color: var(--wa-on-chrome); }
/* Mono chrome stays muted even when it is a link. */
.wa-commission a,
.wa-byline a,
.wa-label a { color: inherit; }

/* The slash is the divider device. Never more than two per screen. */
.wa-slash { color: var(--wa-verdict); }

/* ---------- 04 header, to the book's site-assets artboard ---------- */

.wa-header { padding-top: 0; padding-bottom: 0; }
.wa-header__inner { min-height: 72px; align-items: center; gap: var(--wa-3); width: 100%; }
.wa-header__left  { align-items: center; gap: var(--wa-4); }
.wa-header__right { align-items: center; gap: var(--wa-2); }

/* The wordmark: WHICH in bone, AI in verdict orange. Never "Which AI", never spaced. */
.wa-logo { margin: 0; font-family: var(--wp--preset--font-family--display); font-weight: 700;
           font-size: 1.375rem; letter-spacing: -.035em; line-height: 1; }
.wa-logo a { color: var(--wa-on-chrome); text-decoration: none; }
.wa-logo a span { color: var(--wa-verdict); }

.wa-nav a { font-size: .875rem; font-weight: 500; text-decoration: none; }
.wa-nav a:hover { text-decoration: underline; text-decoration-color: var(--wa-verdict); }

.wa-search .wp-block-search__input {
  background: transparent; border: 1px solid #3A352E; color: var(--wa-on-chrome);
  font-family: var(--wp--preset--font-family--mono); font-size: .75rem;
  padding: 9px 11px; border-radius: 0; min-width: 15ch;
}
.wa-search .wp-block-search__input::placeholder { color: var(--wa-muted); }
.wa-search .wp-block-search__label { display: none; }

/* ---------- 04 footer ---------- */

.wa-footer > * { margin-block: 0; }
.wa-footer .wa-logo { margin-bottom: var(--wa-3); }
.wa-footer__nav { display: flex; flex-wrap: wrap; gap: var(--wa-3); font-size: .875rem; margin-bottom: var(--wa-3); }
.wa-footer__nav a { text-decoration: none; }
.wa-footer__nav a:hover { text-decoration: underline; text-decoration-color: var(--wa-verdict); }
.wa-footer__legal {
  font-family: var(--wp--preset--font-family--mono);
  font-size: .625rem; letter-spacing: .1em; text-transform: uppercase;
  line-height: 1.9; color: var(--wa-muted);
}

/* ---------- 15 one left edge ---------- */

/* The book's grid is a 1200px shell with the article column as the left 8 of 12.
   WordPress centres constrained children by default, so the wide elements and the
   text column ended up on different left edges. Cap the shell, then flush left. */
@media (min-width: 1024px) {
  .wp-site-blocks > main.wp-block-group { max-width: 75rem; margin-inline: auto; }
  /* WordPress sets these margins with !important on .is-layout-constrained children,
     so matching it is the only way to flush the column left. */
  .wp-site-blocks > main.wp-block-group > *:not(.alignfull) { margin-left: 0 !important; margin-right: auto !important; }
  .wp-block-post-content,
  .wp-block-post-content > *:not(.alignfull):not(.alignwide) { margin-left: 0 !important; margin-right: auto !important; }
  /* The wordmark sits on the same left edge as the content below it. */
  .wa-header__inner { padding-inline: 1.25rem; }
}

/* ---------- 05 editorial type ---------- */

.wa-dek {
  font-family: var(--wp--preset--font-family--display);
  font-size: 1.5625rem;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -.01em;
  color: var(--wa-ink-soft);
  text-wrap: pretty;
}
.wa-byline {
  font-family: var(--wp--preset--font-family--mono);
  font-size: .6875rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--wa-muted);
}
.wa-caption,
.wp-block-image figcaption {
  font-family: var(--wp--preset--font-family--mono);
  font-size: .8125rem;
  line-height: 1.6;
  color: var(--wa-ink-soft);
}

/* Pull quote: orange 8px rule, one per article. */
.wp-block-quote.is-style-wa-pull {
  border: 0;
  border-left: 8px solid var(--wa-verdict);
  padding: 4px 0 4px var(--wa-3);
  margin-left: 0;
  font-family: var(--wp--preset--font-family--display);
  font-size: 1.625rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.03em;
  color: var(--wa-ink);
}
.wp-block-quote.is-style-wa-pull p { font-size: inherit; line-height: inherit; }

/* Callouts and panels. */
.wp-block-group.is-style-wa-callout,
.wa-callout { background: var(--wa-surface); padding: var(--wa-3); }
.wp-block-group.is-style-wa-panel,
.wa-panel { background: var(--wa-chrome); color: var(--wa-on-chrome); padding: var(--wa-3); }
.wa-panel .wp-block-heading, .wa-panel h2, .wa-panel h3 { color: var(--wa-on-chrome); }
.wa-panel .wa-label { color: var(--wa-verdict); }

/* Anything paid is dashed. */
.wp-block-group.is-style-wa-paid,
.wa-paid { border: 2px dashed var(--wa-ink); padding: var(--wa-2); }

/* ---------- 06 the verdict block ---------- */

.wa-verdict-block {
  background: var(--wa-chrome);
  color: var(--wa-on-chrome);
  padding: var(--wa-3);
  display: flex;
  flex-direction: column;
  gap: var(--wa-2);
}
.wa-verdict-block > .wa-label { color: var(--wa-verdict); margin: 0; }
.wa-verdict-block__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--wa-3);
  flex-wrap: wrap;
}
.wa-verdict-block__call {
  font-family: var(--wp--preset--font-family--display);
  font-size: 1.625rem;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.035em;
  max-width: 26ch;
  margin: 0;
}
.wa-verdict-block__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--wa-1);
}

/* ---------- 08 scores and badges ---------- */

/* Never show a score without the sample size beside it. */
.wa-score {
  font-family: var(--wp--preset--font-family--mono);
  font-weight: 600;
  background: var(--wa-chrome);
  color: var(--wa-verdict);
  padding: 9px 12px;
  font-size: 1.375rem;
  line-height: 1;
  display: inline-block;
}
.wa-score--hero { font-size: 2.125rem; padding: 12px 16px; }
.wa-score--inline { background: none; padding: 0; font-size: .9375rem; color: var(--wa-verdict); }

.wa-badge {
  font-family: var(--wp--preset--font-family--display);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 8px 12px;
  display: inline-block;
  line-height: 1;
}
.wa-badge--buy   { background: var(--wa-go);      color: var(--wa-on-chrome); }
.wa-badge--skip  { background: var(--wa-verdict); color: var(--wa-on-chrome); }
.wa-badge--wait  { border: 2px solid var(--wa-ink); color: var(--wa-ink); padding: 6px 10px; }
.wa-badge--value { background: var(--wa-surface); color: var(--wa-ink); }
.wa-panel .wa-badge--wait,
.wa-verdict-block .wa-badge--wait { border-color: var(--wa-on-chrome); color: var(--wa-on-chrome); }

/* ---------- 07 / 11 tables ---------- */

.wp-block-table.is-style-wa-scoring,
.wa-table { overflow-x: auto; }
.wp-block-table.is-style-wa-scoring table,
.wa-table table { width: 100%; border-collapse: collapse; background: var(--wa-ground); }
.wp-block-table.is-style-wa-scoring th,
.wa-table th {
  background: var(--wa-chrome);
  color: var(--wa-on-chrome);
  font-family: var(--wp--preset--font-family--mono);
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-align: left;
  padding: 10px 14px;
  border: 0;
}
.wp-block-table.is-style-wa-scoring td,
.wa-table td {
  padding: 11px 14px;
  border: 0;
  border-bottom: 1px solid var(--wa-line);
  font-size: .875rem;
  vertical-align: middle;
}

/* ---------- 07 cards and listings ---------- */

.wa-card { border: 1px solid var(--wa-line); background: var(--wa-ground); }
.wa-card--featured { border: 3px solid var(--wa-ink); }
.wa-card__body { padding: var(--wa-2); display: flex; flex-direction: column; gap: var(--wa-1); }
.wa-card__title {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.025em;
  margin: 0;
}

.wa-row {
  display: flex;
  align-items: center;
  gap: var(--wa-2);
  padding: 12px 0;
  border-bottom: 1px solid var(--wa-line);
}
.wa-row__score {
  font-family: var(--wp--preset--font-family--mono);
  font-weight: 600;
  font-size: .9375rem;
  color: var(--wa-muted);
  width: 34px;
  flex: none;
}
.wa-row--pick .wa-row__score { color: var(--wa-verdict); }
.wa-row__name { flex: 1; font-size: .9375rem; line-height: 1.2; }

/* Category chips: sand ground, mono caps, no colour coding. */
.wa-chip {
  background: var(--wa-surface);
  color: var(--wa-ink);
  font-family: var(--wp--preset--font-family--mono);
  font-size: .6875rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 7px 10px;
  display: inline-block;
  text-decoration: none;
}
.wa-chip--on { background: var(--wa-chrome); color: var(--wa-on-chrome); }

/* ---------- 10 signature moves ---------- */

/* The stamp: rotated 2-4 degrees, always claims something we can prove. */
.wa-stamp {
  border: 3px solid var(--wa-verdict);
  color: var(--wa-verdict);
  padding: 12px 16px;
  transform: rotate(-3deg);
  font-family: var(--wp--preset--font-family--mono);
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1.4;
  display: inline-block;
  text-align: center;
}

/* The strikethrough: only ever through words we are rejecting. */
.wa-strike {
  text-decoration: line-through;
  text-decoration-color: var(--wa-verdict);
  text-decoration-thickness: 4px;
  color: var(--wa-muted);
}

/* The counter: the only place a solid orange field is allowed. */
.wa-counter {
  background: var(--wa-verdict);
  color: var(--wa-on-chrome);
  padding: var(--wa-3);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.wa-counter__n {
  font-family: var(--wp--preset--font-family--mono);
  font-size: 2.75rem;
  font-weight: 600;
  line-height: 1;
}
.wa-counter__label {
  font-family: var(--wp--preset--font-family--mono);
  font-size: .6875rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* The disclosure strip: says the money plainly, at the top. */
.wa-disclosure {
  border: 1px dashed var(--wa-muted);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-family: var(--wp--preset--font-family--mono);
  font-size: .8125rem;
}
.wa-disclosure__row { display: flex; justify-content: space-between; gap: var(--wa-2); }
.wa-disclosure__row + .wa-disclosure__row { border-top: 1px dashed var(--wa-muted); padding-top: 7px; }
.wa-disclosure__no { font-weight: 600; color: var(--wa-verdict); }

/* Sitewide bar under the header on commercial pages. Not dismissible. */
.wa-disclosure-bar {
  background: var(--wa-surface);
  color: var(--wa-ink);
  padding: var(--wa-2) var(--wa-3);
  font-size: .9375rem;
  line-height: 1.45;
}

/* ---------- 11 monetisation ---------- */

.wa-tag {
  font-family: var(--wp--preset--font-family--mono);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 7px 10px;
  display: inline-block;
  line-height: 1;
}
.wa-tag--sponsored { background: var(--wa-chrome); color: var(--wa-on-chrome); }
.wa-tag--partner   { border: 2px solid var(--wa-ink); color: var(--wa-ink); padding: 5px 8px; }
.wa-tag--affiliate { background: var(--wa-surface); color: var(--wa-ink); font-weight: 500; }
.wa-tag--pick      { background: var(--wa-go); color: var(--wa-on-chrome); }

/* Sponsored units never carry a score, a badge or a position number. */
.wa-sponsored { border: 2px dashed var(--wa-ink); padding: var(--wa-2); display: flex; flex-direction: column; gap: var(--wa-2); }
.wa-sponsored__head { display: flex; align-items: center; justify-content: space-between; gap: var(--wa-2); }

.wa-commission {
  font-family: var(--wp--preset--font-family--mono);
  font-size: .6875rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--wa-muted);
}

/* ---------- 27 the source strip: ships with every verdict ---------- */

/* The proof device. Replaces the old "we bought every licence" claim: it states
   what the score is built on, so "tested" is only ever used when we opened the product. */
.wa-sources {
  border: 2px solid var(--wa-ink);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.wa-sources > * { margin-block: 0; }
.wa-sources__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--wa-2);
  font-family: var(--wp--preset--font-family--mono);
  font-size: .8125rem;
}
.wa-sources__row + .wa-sources__row { border-top: 1px solid var(--wa-line); padding-top: 7px; }
.wa-sources__row > span:last-child { font-weight: 600; }

/* Trust block, every article foot. */
.wa-trust { border: 2px solid var(--wa-ink); padding: 18px 20px; display: flex; flex-direction: column; gap: var(--wa-1); }

/* One CTA per page, at the end, newsletter only. */
.wa-newsletter {
  border-top: 3px solid var(--wa-ink);
  padding-top: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wa-3);
  flex-wrap: wrap;
}

/* ---------- front page: news grid, sections 07 and 15 ---------- */

/* Counter as a wide strip. Same component, laid out along the 12-column shell. */
.wa-counter--strip {
  flex-direction: row;
  align-items: baseline;
  gap: var(--wa-2);
  padding: var(--wa-2) var(--wa-3);
  flex-wrap: wrap;
}
.wa-counter--strip .wa-counter__n { font-size: 1.75rem; }

.wa-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--wa-2);
  border-bottom: 3px solid var(--wa-ink);
  padding-bottom: 10px;
  flex-wrap: wrap;
}
.wa-section-head > * { margin-block: 0; }
.wa-section-head .wp-block-heading { letter-spacing: -.02em; }

/* Card grid. 4-4-4 or 6-6 on the grid, one column on a phone. */
.wa-grid .wp-block-post-template {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--wa-3);
  list-style: none;
  padding: 0;
  margin: 0;
}
/* Related verdicts run 4-4-4 across the full shell. */
.wa-grid--3 .wp-block-post-template { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .wa-grid--3 .wp-block-post-template { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .wa-grid--3 .wp-block-post-template { grid-template-columns: 1fr; } }

.wa-grid .wp-block-post {
  border-top: 3px solid var(--wa-ink);
  padding-top: var(--wa-2);
  display: flex;
  flex-direction: column;
  gap: var(--wa-1);
  min-width: 0;
}
.wa-grid .wp-block-post > * { margin-block: 0; }
.wa-grid .wp-block-post-title { font-size: 1.125rem; line-height: 1.15; letter-spacing: -.025em; }
.wa-grid .wp-block-post-title a { text-decoration: none; }
.wa-grid .wp-block-post-title a:hover { text-decoration: underline; text-decoration-color: var(--wa-verdict); }
.wa-grid img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }

/* The pick: one story, given the room a lead deserves. */
.wa-lead .wp-block-post-title { font-size: 2rem; line-height: .98; letter-spacing: -.04em; }
.wa-lead .wp-block-post-title a { text-decoration: none; }
.wa-lead .wp-block-post-template { list-style: none; padding: 0; margin: 0; }
.wa-lead .wp-block-post { display: flex; flex-direction: column; gap: var(--wa-2); }
.wa-lead .wp-block-post > * { margin-block: 0; }
.wa-lead img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }

/* Rail: numbered, mono, orange rank. The slash and the number do the work. */
.wa-rail .wp-block-post-template {
  counter-reset: wa-rank;
  list-style: none;
  padding: 0;
  margin: 0;
}
.wa-rail .wp-block-post {
  counter-increment: wa-rank;
  display: flex;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--wa-line);
  min-width: 0;
}
/* Section 07: the top rank carries the orange, the rest are grey. */
.wa-rail .wp-block-post::before {
  content: counter(wa-rank, decimal-leading-zero);
  font-family: var(--wp--preset--font-family--mono);
  font-size: .8125rem;
  font-weight: 600;
  color: var(--wa-muted);
  flex: none;
  width: 22px;
  line-height: 1.35;
}
.wa-rail .wp-block-post:first-child::before { color: var(--wa-verdict); }
.wa-rail .wp-block-post > * { margin-block: 0; min-width: 0; }
.wa-rail .wp-block-post-title { font-size: .9375rem; line-height: 1.25; letter-spacing: -.015em; }
.wa-rail .wp-block-post-title a { text-decoration: none; }
.wa-rail .wp-block-post-title a:hover { text-decoration: underline; text-decoration-color: var(--wa-verdict); }

.wa-chips { display: flex; flex-wrap: wrap; gap: var(--wa-1); }

/* ---------- 20 charts: bars and tables, that is all ---------- */

.wa-chart { border: 1px solid var(--wa-line); padding: var(--wa-2); display: flex; flex-direction: column; gap: 10px; }
.wa-chart__row { display: flex; align-items: center; gap: 10px; }
.wa-chart__name { font-size: .8125rem; width: 72px; flex: none; }
.wa-chart__track { flex: 1; height: 16px; background: var(--wa-surface); display: block; }
.wa-chart__bar { display: block; height: 16px; background: var(--wa-ink); width: var(--wa-v, 0%); }
/* Orange marks the winner, char the rest. */
.wa-chart__row--win .wa-chart__bar { background: var(--wa-verdict); }
.wa-chart__value {
  font-family: var(--wp--preset--font-family--mono);
  font-size: .75rem;
  width: 40px;
  text-align: right;
  flex: none;
}

/* ---------- newsletter signup, section 19 form states ---------- */

.wa-nl-form { display: flex; flex-wrap: wrap; gap: var(--wa-1); align-items: stretch; }
.wa-nl-form input[type=email] {
  flex: 1 1 18rem;
  border: 2px solid var(--wa-ink);
  background: var(--wa-ground);
  color: var(--wa-ink);
  padding: 12px 14px;
  font-family: var(--wp--preset--font-family--display);
  font-size: .9375rem;
  border-radius: 0;
  min-height: 44px;
}
.wa-nl-form input[type=email]::placeholder { color: var(--wa-muted); }
.wa-nl-form input[type=email]:focus-visible { outline: 2px solid var(--wa-verdict); outline-offset: 2px; }
/* Errors say what to do, never "oops". */
.wa-nl-form input[type=email]:not(:placeholder-shown):invalid { border-color: var(--wa-verdict); }
.wa-nl-form button {
  background: var(--wa-verdict);
  color: var(--wa-on-chrome);
  border: 2px solid var(--wa-verdict);
  font-family: var(--wp--preset--font-family--mono);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .04em;
  padding: 11px 18px;
  min-height: 44px;
  border-radius: 0;
  cursor: pointer;
}
.wa-nl-form button:hover { background: var(--wa-chrome); border-color: var(--wa-chrome); }
.wa-nl-form button[disabled] { opacity: .6; cursor: default; }
/* Success states say what happens next and when. */
.wa-nl-msg { flex: 1 0 100%; margin: var(--wa-1) 0 0; font-size: .875rem; color: var(--wa-ink-soft); }
.wa-nl-trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* ---------- 19 states, 23 corrections ---------- */

.wa-empty { background: var(--wa-surface); padding: var(--wa-2) var(--wa-3); }
.wa-correction { border: 1px solid var(--wa-line); padding: var(--wa-2); display: flex; flex-direction: column; gap: 10px; }
.wa-correction__stamp {
  font-family: var(--wp--preset--font-family--mono);
  font-size: .625rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--wa-verdict);
}

/* ---------- inherited article chrome ---------- */

.wp-block-post-content table { width: 100%; border-collapse: collapse; background: var(--wa-ground); }
.wp-block-post-content thead th {
  background: var(--wa-chrome); color: var(--wa-on-chrome);
  font-family: var(--wp--preset--font-family--mono);
  font-size: .6875rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; text-align: left; padding: .7rem;
}
.wp-block-post-content td { padding: .75rem; border-top: 1px solid var(--wa-line); vertical-align: top; }
.wp-block-post-content figure { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.wp-block-post-content img { max-width: 100%; height: auto; }

/* Existing money pages mark their affiliate CTA as bold text inside an external
   link. Keep rendering those as a square 44px button rather than stray bold copy. */
.wp-block-post-content a[target="_blank"] { text-decoration: none; }
.wp-block-post-content a[target="_blank"] strong {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  border: 2px solid var(--wa-ink);
  padding: 10px 18px;
  font-family: var(--wp--preset--font-family--mono);
  font-size: .8125rem;
  font-weight: 600;
}
.wp-block-post-content a[target="_blank"]:hover strong { background: var(--wa-ink); color: var(--wa-ground); }

/* Motion: 120ms fades, no parallax, no carousels. */
a, .wp-block-button__link, .wa-chip { transition: background-color 120ms linear, color 120ms linear; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* Contact is intentionally dependency-free: the old WPForms shortcode returned
   an empty string. Same square, high-contrast states as the newsletter form. */
.wa-contact-form {
  display: grid;
  gap: var(--wa-2);
  margin-top: var(--wa-3);
}
.wa-contact-form p { margin: 0; }
.wa-contact-form label {
  display: block;
  margin-bottom: 6px;
  font-family: var(--wp--preset--font-family--mono);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.wa-contact-form input,
.wa-contact-form textarea {
  box-sizing: border-box;
  width: 100%;
  border: 2px solid var(--wa-ink);
  border-radius: 0;
  background: var(--wa-ground);
  color: var(--wa-ink);
  font: inherit;
  padding: 12px 14px;
}
.wa-contact-form input { min-height: 48px; }
.wa-contact-form input:focus,
.wa-contact-form textarea:focus {
  outline: 3px solid var(--wa-verdict);
  outline-offset: 2px;
}
.wa-contact-form__trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.wa-contact__notice {
  border: 2px solid var(--wa-ink);
  padding: 14px 16px;
  margin-bottom: var(--wa-2);
}
.wa-contact__notice--success {
  border-color: var(--wa-go);
  color: var(--wa-go);
}

/* ---------- 15 breakpoints ---------- */

@media (max-width: 767px) {
  .wa-header { min-height: 60px; }
  .wa-verdict-block__call { font-size: 1.375rem; max-width: none; }
  .wa-dek { font-size: 1.3125rem; }
  .wa-newsletter { flex-direction: column; align-items: flex-start; }
  .wa-counter__n { font-size: 2.25rem; }
  /* Tables scroll rather than reflow. Older posts contain bare <table> markup with
     no figure wrapper, so the table itself has to become the scroll container. */
  .wa-table, .wp-block-table { overflow-x: auto; }
  .wa-table th, .wa-table td { white-space: nowrap; }
  .wp-block-post-content table { display: block; overflow-x: auto; max-width: 100%; }
  .wa-lead .wp-block-post-title { font-size: 1.75rem; }
}

/* One column, 20px margins. Mobile is the default reader: 70% of traffic
   arrives on a phone from search, so this case is the one that must be right. */
@media (max-width: 600px) {
  .wa-grid .wp-block-post-template { grid-template-columns: 1fr; }
  .wa-counter--strip { flex-direction: column; align-items: flex-start; gap: 4px; }
  .wa-counter--strip .wa-counter__n { font-size: 2rem; }
  .wa-lead .wp-block-post-title { font-size: 1.625rem; }
  .wa-verdict-block__meta { align-items: flex-start; flex-direction: row; align-self: stretch; justify-content: space-between; }
  .wa-disclosure__row { gap: var(--wa-1); }
  .wa-sponsored__head { flex-wrap: wrap; gap: var(--wa-1); }
  .wa-chart__name { width: 56px; }
  .wa-stamp { font-size: .8125rem; }
}

/* The column is 760px (section 15) but prose still obeys the 68ch measure from the
   pre-publish checklist. Media, tables and the verdict block use the full column,
   which is what stops a desktop article reading like a blown-up phone layout. */
.wp-block-post-content > p,
.wp-block-post-content > ul,
.wp-block-post-content > ol,
.wp-block-post-content > h2,
.wp-block-post-content > h3,
.wp-block-post-content > h4 { max-width: 68ch; }

/* Long headlines and long URLs must not push the page sideways. */
.wp-block-post-title, .wa-card__title, .wa-verdict-block__call, h1, h2, h3 { overflow-wrap: break-word; }

/* ---------- 18 night mode: same roles, inverted ground ---------- */

@media (prefers-color-scheme: dark) {
  :root {
    --wa-ground:    #14130F;
    --wa-surface:   #221F1A;
    --wa-ink:       #F4EFE6;
    --wa-ink-soft:  #9C948A;
    --wa-muted:     #9C948A;
    --wa-line:      #3A352E;
    --wa-chrome:    #221F1A;
    --wa-on-chrome: #F4EFE6;
    --wa-verdict:   #FF6636;
  }
  /* Remap the theme.json presets so existing block markup follows. Doubled :root
     to outrank the global-styles declarations, which sit in a plain :root. */
  :root:root {
    --wp--preset--color--cream: #F4EFE6;
    --wp--preset--color--char:  #221F1A;
    --wp--preset--color--sand:  #221F1A;
    --wp--preset--color--orange:#FF6636;
    --wp--preset--color--ink:   #F4EFE6;
    --wp--preset--color--grey:  #9C948A;
  }
  html body { background-color: #14130F; color: #F4EFE6; }
  .wp-block-heading, h1, h2, h3, h4, h5, h6 { color: #F4EFE6; }
  .wp-block-button__link, .wp-element-button { border-color: #3A352E; color: #F4EFE6; }
  .wp-block-button__link:hover, .wp-element-button:hover { background: #221F1A; color: #F4EFE6; }
  .wp-block-button.is-style-wa-verdict .wp-block-button__link { background: #FF6636; border-color: #FF6636; color: #14130F; }
  .wa-badge--wait { border-color: #F4EFE6; color: #F4EFE6; }
  .wa-counter, .wa-tag--sponsored, .wa-badge--skip { color: #14130F; }
  /* Sand is dropped in night mode: surfaces use #221F1A. */
  .wa-disclosure-bar, .wa-callout, .wa-empty, .wp-block-group.is-style-wa-callout { background: #221F1A; color: #F4EFE6; }
}