/* ============================================================
   Artikelen (engaginguxdesign.nl/artikelen/)
   The quiet sibling of the homepage: white page, grey #F7F7F7 surfaces,
   Alexandria headings, DM Sans UI, one red (#963723), dark #2B1206 only for
   the CTA block. Loaded on top of the main .nl nav, footer and cookie
   banner, which style themselves. Everything global is scoped to
   <body class="art"> and to the article regions (main, .art-subnav, .eud-news)
   via :where() (zero specificity), so nothing here reaches the main-site parts.
   Mirror of deploy-en/articles/assets/css/articles.css: keep the two in step.

   Layout system (one only): .article-wrap > .art-hero + .art-body, then
   .art-nav (prev/next). Overview pages: .hero + .section blocks.
   Breakpoints: two only, <=860 (tablet/phone) and <=520 (phone), at the end.
   ============================================================ */

.art {
  /* Text + surfaces */
  --bg:           #FFFFFF;
  --surface:      #F7F7F7;
  --ink:          #111111;
  --text:         #333333;
  --deck:         #474646;
  --muted:        #5F5F5F;
  --line:         #E4E4E4;   /* decorative dividers only */
  --control-line: #8C8C8C;   /* borders of inputs and controls (3:1 on white) */

  /* One red, one dark */
  --red:          #963723;
  --red-hover:    #7F2E1E;
  --red-press:    #6B2718;
  --red-soft:     rgba(150,55,35,.08);
  --dark:         #2B1206;   /* CTA block, active chip */
  --foot-bg:      #2B1004;   /* = main site footer, so the newsletter band runs into it */

  /* Small accents */
  --gold:         #D4952A;
  --gold-bar:     #B8860B;   /* active tab bar, pre-launch badge only */
  --ok:           #3F7A4E;   /* "moves fine" icon only */
  --live:         #1F7A43;   /* LIVE badge, white text 5.4:1 */
  --on-dark-hi:   #FFD999;   /* focus ring + arrows on dark surfaces */

  /* Newsletter card (matches engaginguxdesign.com) */
  --news-card:        #602114;
  --news-btn:         #F6E9E0;
  --news-btn-hover:   #FFE8C0;
  --news-highlight:   #FFD999;
  --news-note:        #E8D8CD;
  --news-placeholder: #6B645D;   /* 5.9:1 on white */
  --news-error:       #FF8A78;

  /* Layout */
  --container:    1280px;     /* = .nav__inner max-width */
  --container-pad: 48px;      /* = .nav__inner side padding; 24 <=860, 20 <=520 (below) */
  --reading:      720px;
  --gutter:       24px;
  --section-y:    96px;
  --radius-s:     12px;      /* stat, step, callout */
  --radius-m:     16px;      /* cards, figures */
  --radius-l:     24px;      /* CTA block, banner */
  --lift:         0 8px 24px rgba(43,18,6,.10);
}

/* Zero specificity on purpose: article components below always win,
   and nothing here can reach the main-site nav, footer or cookie banner. */
:where(.art main, .art .art-subnav, .art .eud-news),
:where(.art main, .art .art-subnav, .art .eud-news) *,
:where(.art main, .art .art-subnav, .art .eud-news) *::before,
:where(.art main, .art .art-subnav, .art .eud-news) *::after { box-sizing: border-box; margin: 0; padding: 0; }
html:has(> body.art) { -webkit-font-smoothing: antialiased; scroll-behavior: smooth; }

body.art {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  line-height: 1.7;
}

:where(.art main, .art .art-subnav, .art .eud-news) a { color: inherit; }
.art main img { max-width: 100%; height: auto; display: block; }

/* Keyboard focus: one rule for every interactive element of the articles
   (the main site's nav, footer and banner have their own focus styles) */
.art :where(main, .art-subnav, .eud-news, .skip-link):focus-visible,
.art :where(main, .art-subnav, .eud-news) :focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 3px;
}
.art .cta-box :focus-visible,
.eud-news :focus-visible { outline-color: var(--on-dark-hi); }
/* Inputs show focus on their wrapper (search) or ring (newsletter), never twice */
.art .art-subnav__search input:focus-visible,
.art .news-field input:focus-visible { outline: none; }

/* Skip link: hidden until focused; sits above the sticky main nav (z-index 1000) */
.art .skip-link {
  position: fixed;
  left: 1rem;
  top: -100px;
  z-index: 1100;
  background: var(--ink);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  padding: .75rem 1.2rem;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 0 0 2px #fff, 0 8px 24px rgba(0,0,0,.35);
}
.art .skip-link:focus { top: 1rem; }

/* ── EYEBROW: the one small-label style ──
   DM Sans 600 13px, .18em, uppercase, red, with an 8px dot. Used by
   .hero-label, .pill, .tag, .section-title, .section-label, .eyebrow. */
.hero-label,
.pill,
.tag,
.section-title,
.section-label,
.related__title,
.ch-label,
.eyebrow {
  display: flex;
  width: fit-content;
  max-width: 100%;
  align-items: flex-start;
  gap: 10px;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--red);
}
.hero-label::before,
.pill::before,
.tag::before,
.section-title::before,
.section-label::before,
.related__title::before,
.ch-label::before,
.eyebrow::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  margin-top: 5px;   /* centres the dot on the first text line (13px x 1.4) */
  border-radius: 50%;
  background: var(--red);
}

/* ── BUTTONS (the homepage .hero-btn system) ──
   Primary: .research-btn, .survey-cta (light surfaces). On the dark CTA box
   .cta-btn is the cream pill with a dark arrow chip (same as nav + Subscribe).
   Markup: <a class="research-btn">Label <span class="btn-chip" aria-hidden="true"><svg class="btn-arrow">...</svg></span></a>
   .btn-ghost: white, 1px grey border, ink text (for secondary actions). */
.research-btn,
.survey-cta,
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 52px;
  padding: 0 28px;
  border-radius: 999px;
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.research-btn,
.survey-cta {
  background: var(--red);
  color: #fff;
  box-shadow: 0 6px 20px rgba(150,55,35,.22);
}
.research-btn:hover,
.survey-cta:hover { background: var(--red-hover); transform: translateY(-2px); }
.btn-ghost {
  background: #fff;
  color: var(--ink);
  border: 1px solid #CFCFCF;
}
.btn-ghost:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.08); }
/* Press: back down to rest (no lift), a touch darker. Colour/shadow only, so it is motion-safe. */
.research-btn:active,
.survey-cta:active { background: var(--red-press); transform: none; box-shadow: 0 2px 8px rgba(150,55,35,.22); }
.btn-ghost:active { background: var(--surface); transform: none; box-shadow: none; }
.btn-chip { display: inline-grid; place-items: center; flex: none; }
.btn-arrow { width: 20px; height: 20px; transition: transform .25s ease; }
.research-btn:hover .btn-arrow,
.survey-cta:hover .btn-arrow,
.research-btn:focus-visible .btn-arrow,
.survey-cta:focus-visible .btn-arrow { transform: translateX(6px); }

/* ── CARD HOVER (shared): lift + soft shadow, off under reduced motion ── */
.featured-main,
.side-card,
.article-card,
.showcase-card,
.research-card,
.art-nav-link {
  transition: transform .2s ease, box-shadow .2s ease;
}
.featured-main:hover,
.side-card:hover,
.article-card:hover,
.showcase-card:hover,
.research-card:hover,
.art-nav-link:hover { transform: translateY(-2px); box-shadow: var(--lift); }

/* ── SECTION NAV (slim bar under the main nav) ──
   Desktop: visible label + divider, 40px items, search at the right.
   <=860: one 48px row, label visually hidden, links scroll sideways.
   <=520: search moves above the listing (section-nav.php + index.php). */
.art-subnav {
  --pad: .5rem;
  background: var(--bg);
  border-bottom: 1px solid #DADADA;
}
.art-subnav__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: .5rem var(--container-pad);
  gap: 1rem;
  display: flex;
  align-items: center;
}
.art-subnav__title {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-shrink: 0;
  font-family: 'Alexandria', sans-serif;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--ink);
}
.art-subnav__title::after { content: ''; width: 1px; height: 16px; background: #DADADA; }
.art-subnav__links {
  flex: 0 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: .5rem;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.art-subnav__links::-webkit-scrollbar { display: none; }
.art-subnav__links a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 var(--pad);
  scroll-snap-align: start;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--muted);   /* 6.3:1 on white */
  text-decoration: none;
  transition: color .2s;
}
.art-subnav__links a:hover { color: var(--ink); }
.art-subnav__links a:focus-visible { outline-offset: -3px; }
.art-subnav__links a.active,
.art-subnav__links a[aria-current="page"] {
  color: var(--ink);
  font-weight: 700;
}
/* Active tab bar: gold-bar is 3.25:1 on white (gold itself is only 2.6:1) */
.art-subnav__links a.active::after,
.art-subnav__links a[aria-current="page"]::after {
  content: '';
  position: absolute;
  left: var(--pad);
  right: var(--pad);
  bottom: 0;
  height: 3px;
  background: var(--gold-bar);
  border-radius: 3px 3px 0 0;
}
/* Small tag on links that lead to an English page (Dutch site): the one 12px */
.art-subnav__lang {
  margin-left: .4rem;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1;
  padding: .2rem .35rem;
  border: 1px solid currentColor;
  border-radius: 4px;
  display: inline-block;
}

/* Edge fade for any row that scrolls sideways (subnav links, filter chips).
   assets/js/scroll-fade.js sets .has-more while there is more to scroll. */
[data-scroll-fade].has-more {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
}

/* Empty search result: plain, left-aligned, system colours */
.search-empty { margin: 0 0 32px; font-size: 16px; line-height: 1.6; color: var(--text); text-align: left; }
.search-empty[hidden] { display: none; }
.search-empty__clear {
  font: inherit;
  color: var(--red);
  background: none;
  border: 0;
  padding: 10px 0;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.search-empty__clear:hover { text-decoration-thickness: 2px; }

/* Search: white, grey control border, 40px desktop / 44px in the phone slot.
   Focus shows once, on the wrapper: red border + 2px red ring, offset 2. */
.art-subnav__search {
  margin-left: auto;
  flex-shrink: 0;
  min-height: 40px;
  background: #fff;
  border: 1px solid var(--control-line);
  border-radius: 999px;
  padding: 0 16px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 8px;
  transition: border-color .2s;
}
.art-subnav__search:focus-within {
  border-color: var(--red);
  outline: 2px solid var(--red);
  outline-offset: 2px;
}
.art-subnav__search svg { flex-shrink: 0; }
.art-subnav__search input {
  background: none;
  border: none;
  outline: none;
  color: var(--text);
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  width: 160px;
  min-height: 38px;
  padding: 0;
}
.art-subnav__search input::placeholder { color: var(--muted); opacity: 1; }
.art-subnav__search input::-webkit-search-cancel-button { cursor: pointer; }
.art-search-slot:not(:empty) { padding: 0 var(--container-pad) 32px; }
.art-search-slot .art-subnav__search { margin: 0; min-height: 44px; }
.art-search-slot .art-subnav__search input { width: 100%; font-size: 16px; min-height: 42px; }

/* ── OVERVIEW HERO (articles, projects, research) ──
   Left-aligned in the 1280 container (same edges as the main nav): eyebrow, h1, deck, filter chips. */
.hero {
  max-width: var(--container);
  margin: 0 auto;
  padding: 80px var(--container-pad) 48px;
}
.hero-label { margin-bottom: 24px; }
.hero h1 {
  font-family: 'Alexandria', sans-serif;
  font-size: clamp(36px, 5.5vw, 60px);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -.03em;
  line-height: 1.15;
  margin-bottom: 20px;
  max-width: 16em;
}
.hero h1 em { font-style: normal; color: var(--red); }
.hero p {
  font-size: 20px;
  color: var(--deck);
  max-width: 72ch;
  margin: 0 0 32px;
  line-height: 1.6;
}
.hero p:last-child { margin-bottom: 0; }

/* Filter chips (.cat-pill): a real control, not a text link.
   Row wraps on desktop, scrolls sideways with an edge fade <=520. */
.hero-cats { display: flex; flex-wrap: wrap; gap: 8px 12px; }
.cat-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--control-line);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color .2s ease, border-color .2s ease;
}
.cat-pill:hover { background: var(--surface); }
.cat-pill:active { background: var(--line); }
.cat-pill.active:active,
.cat-pill[aria-current="page"]:active { background: var(--ink); }
.cat-pill.active,
.cat-pill[aria-current="page"] {
  background: var(--dark);
  border-color: var(--dark);
  color: #fff;
}
.cat-pill.active::before,
.cat-pill[aria-current="page"]::before {
  content: "";
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ── SECTIONS ── */
.section { max-width: var(--container); margin: 0 auto; padding: 0 var(--container-pad) var(--section-y); }
.section-title { margin-bottom: 24px; }

/* ── FEATURED GRID ── */
.featured-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 24px;
}
.featured-main {
  background: var(--surface);
  border-radius: var(--radius-m);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
}
.featured-img {
  aspect-ratio: 2 / 1;
  display: flex;
  align-items: flex-end;
  padding: 24px;
  background-color: #3b1208;
  background-size: cover;
  background-position: center;
}
.featured-img .img-label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(17,17,17,.78);
  padding: 4px 12px;
  border-radius: 999px;
}
.featured-body { padding: 24px; flex: 1; display: flex; flex-direction: column; gap: 12px; }
.featured-body h2 {
  font-family: 'Alexandria', sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -.01em;
  line-height: 1.25;
  margin: 0;
}
.featured-body p { font-size: 15px; line-height: 1.6; color: var(--deck); margin: 0; }

.featured-side { display: grid; grid-template-rows: repeat(3, 1fr); gap: 24px; min-width: 0; }
.side-card {
  background: var(--surface);
  border-radius: var(--radius-m);
  overflow: hidden;
  text-decoration: none;
  display: flex;
  gap: 20px;
  align-items: stretch;
  min-width: 0;
}
.side-thumb {
  width: 136px;
  flex-shrink: 0;
  align-self: stretch;
  background-size: cover;
  background-position: center;
}
.side-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  padding: 20px 20px 20px 0;
}
.side-card h3 {
  font-family: 'Alexandria', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -.01em;
  line-height: 1.25;
  margin: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}
.side-card p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--deck);
  margin: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}
@media (max-width: 1180px) {
  .side-thumb { width: 104px; }
  .side-card { gap: 16px; }
  .side-body { padding: 16px 16px 16px 0; }
}
@media (max-width: 860px) {
  .featured-side { display: flex; flex-direction: column; }
  .side-thumb { width: 96px; }
}

/* ── ARTICLE CARD GRID (also the "related" cards at the end of articles) ── */
.article-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: 24px;
}
.article-card {
  background: var(--surface);
  border-radius: var(--radius-m);
  overflow: hidden;
  text-decoration: none;
  display: flex;
  flex-direction: column;
}
.article-thumb {
  aspect-ratio: 16 / 10;
  background-size: cover;
  background-position: center;
}
/* Square illustration on white: show it whole instead of cropping the person */
.article-thumb--contain { background-color: #fff; background-repeat: no-repeat; background-size: contain; }
/* Card rhythm: 24px padding (20px <=520), 12px between eyebrow, title and teaser.
   The body grows, the footer sits at the bottom (margin-top: auto), so cards in a
   row are equal height and spare space collects above the footer, not below it. */
.article-body { padding: 24px 24px 0; flex: 1; display: flex; flex-direction: column; gap: 12px; }
.article-body h3 {
  font-family: 'Alexandria', sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -.01em;
  line-height: 1.25;
  margin: 0;
}
.article-body p {
  font-size: 15px; line-height: 1.6; color: var(--deck); margin: 0;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
}
/* Footer: date and read time on one row, the "Read article" button under it.
   Used by .article-card and .featured-main. */
.article-footer {
  margin-top: auto;
  padding: 20px 24px 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
}
.article-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; margin: 0; }
.article-footer .read-time { color: var(--red); font-weight: 600; }
.article-footer:has(> .card-cta:only-child) { padding-top: 16px; }

/* "Read article": a ghost button drawn by a span inside the card link (see a_card_cta()).
   Same look as .btn-ghost, a size down (44px). The arrow nudges when the card is hovered or focused. */
.card-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid #CFCFCF;
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  transition: background-color .2s ease;
}
.card-cta__arrow { flex: none; transition: transform .25s ease; }
:is(a, .showcase-card):hover .card-cta__arrow,
a:focus-visible .card-cta__arrow { transform: translateX(4px); }
/* Compact variant for the narrow side cards: a text link, no pill */
.card-cta--text { min-height: 0; padding: 0; border: 0; background: none; color: var(--red); font-size: 14px; margin-top: 4px; }

/* ── RESEARCH BANNER ── */
.research-banner {
  background: var(--surface);
  border-radius: var(--radius-l);
  padding: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  width: min(calc(var(--container) - 2 * var(--container-pad)), calc(100% - 2 * var(--container-pad)));
  margin: 0 auto var(--section-y);
}
.research-banner-text .eyebrow { margin-bottom: 12px; }
.research-banner-text h3 {
  font-family: 'Alexandria', sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -.01em;
  line-height: 1.25;
  margin-bottom: 8px;
}
.research-banner-text p { font-size: 15px; line-height: 1.6; color: var(--deck); margin: 0; max-width: 56ch; }
.research-btn { flex-shrink: 0; white-space: nowrap; }

/* ── PROJECT SHOWCASE + RESEARCH CARDS ── */
.showcase-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: 24px;
}
.showcase-card,
.research-card {
  background: var(--surface);
  border-radius: var(--radius-m);
  overflow: hidden;
  text-decoration: none;
  display: flex;
  flex-direction: column;
}
.showcase-preview {
  aspect-ratio: 16 / 10;
  position: relative;
  background-size: cover;
  background-position: center top;
}
/* Badges stay badges: 12px 700, 4/12 padding. LIVE = green + white (5.4:1) */
.showcase-preview .live-badge {
  position: absolute;
  top: 16px;
  right: 16px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 999px;
}
.showcase-preview .live-badge.live { background: var(--live); color: #fff; }
.showcase-preview .live-badge.pre-launch { background: var(--gold-bar); color: var(--dark); }
.showcase-body { padding: 24px 24px 0; flex: 1; display: flex; flex-direction: column; gap: 12px; }
.showcase-body h3,
.research-card-header h3 {
  font-family: 'Alexandria', sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -.01em;
  line-height: 1.25;
  margin: 0;
}
.showcase-body p,
.research-card-header p { font-size: 15px; line-height: 1.6; color: var(--deck); margin: 0 0 16px; }
.showcase-body p { flex: 1; margin: 0; }
.showcase-body .showcase-meta { margin-top: 4px; }
.showcase-meta { display: flex; flex-wrap: wrap; gap: 8px; }
.showcase-meta .meta-pill {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--muted);
  background: #fff;
  padding: 4px 12px;
  border-radius: 999px;
}
.showcase-footer {
  margin-top: auto;
  padding: 20px 24px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
}
.showcase-footer .visit-link { display: inline-flex; align-items: center; min-height: 44px; }
.showcase-footer .visit-link,
.author-box__link {
  color: var(--red);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.showcase-footer .visit-link:hover,
.author-box__link:hover { text-decoration-thickness: 2px; }

.research-card-header { padding: 24px 24px 0; }
.research-card-header .tag { margin-bottom: 12px; }
.research-card-header p { margin: 0; }
.research-card-body { padding: 16px 24px 24px; }
.research-card-body .survey-details {
  list-style: none;
  margin: 0 0 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.research-card-body .survey-details li {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 15px;
  line-height: 1.6;
  color: var(--deck);
}
.research-card-body .survey-details li::before {
  content: '→';
  color: var(--red);
  font-weight: 700;
  flex-shrink: 0;
}

.coming-soon-banner { padding: 48px 0 0; color: var(--muted); font-size: 15px; }

/* ── NEWSLETTER (same card as engaginguxdesign.com) ── */
.eud-news {
  /* light top, dark bottom that runs on into the footer */
  background: linear-gradient(var(--bg) 0 50%, var(--foot-bg) 50%);
  padding: 3rem clamp(16px, 4vw, 48px) 4rem;
}
.news-card {
  max-width: 1160px;
  margin: 0 auto;
  background: var(--news-card);
  color: #fff;
  border-radius: 40px;
  padding: clamp(32px, 5vw, 64px) clamp(28px, 6vw, 88px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 2rem 4rem;
  align-items: center;
}
.news-title { font-family: 'Alexandria', sans-serif; line-height: 1.2; font-size: clamp(24px, 2.2vw, 30px); margin-bottom: 1rem; }
.news-title__lead { display: block; font-weight: 500; }
.news-title__main { display: block; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.news-copy { font-size: clamp(15px, 1.1vw, 17px); line-height: 1.5; max-width: 36ch; }
.news-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: 14px;
  position: relative;
}
.news-field--email, .news-note, .news-status { grid-column: 1 / -1; }
.news-field { height: 60px; border-radius: 18px; }
.news-field input {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: inherit;
  background: #fff;
  color: var(--text);
  font-family: 'DM Sans', sans-serif;
  font-size: 18px;
  padding: 0 22px;
  box-shadow: 0 4px 4px rgba(0,0,0,.25);
  outline: none;
}
.news-field input::placeholder { color: var(--news-placeholder); opacity: 1; }
.news-field input:focus-visible { box-shadow: 0 4px 4px rgba(0,0,0,.25), 0 0 0 3px var(--news-highlight); }
.news-field input[aria-invalid="true"] { box-shadow: 0 4px 4px rgba(0,0,0,.25), 0 0 0 3px var(--news-error); }
.news-field input[aria-invalid="true"]:focus-visible { box-shadow: 0 4px 4px rgba(0,0,0,.25), 0 0 0 3px var(--news-error), 0 0 0 6px rgba(255,255,255,.55); }

/* Subscribe: the main site's primary CTA (cream pill + dark arrow chip) */
.news-btn {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 60px;
  min-height: 48px;
  padding: 0 8px 0 26px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, #FFF3DC 0%, #FFE2AE 100%);
  color: #2B1004;
  font-family: 'DM Sans', sans-serif;
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 6px 22px rgba(255,214,150,.22), inset 0 1px 0 rgba(255,255,255,.85), inset 0 -1px 0 rgba(150,90,30,.28);
  transition: transform .3s cubic-bezier(.34,1.36,.64,1), box-shadow .3s ease;
}
.news-btn::after { /* soft light sweep on hover */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.75) 50%, transparent 65%);
  translate: -120% 0;
  pointer-events: none;
}
.news-btn:hover:not([aria-disabled="true"]) {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(255,214,150,.38), inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 0 rgba(150,90,30,.28);
}
.news-btn:hover:not([aria-disabled="true"])::after { translate: 120% 0; transition: translate .8s ease; }
.news-btn:active:not([aria-disabled="true"]) { transform: translateY(0) scale(.98); box-shadow: 0 3px 12px rgba(255,214,150,.25), inset 0 1px 0 rgba(255,255,255,.8); }
.news-btn:focus-visible { outline: 3px solid var(--news-highlight); outline-offset: 3px; }
.news-btn__chip {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #2B1004;
  color: #FFE8C0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.15);
  transition: transform .35s cubic-bezier(.34,1.36,.64,1);
}
.news-btn__chip > * { grid-area: 1 / 1; }
.news-btn__chip svg { width: 18px; height: 18px; }
.news-btn:hover:not([aria-disabled="true"]) .news-btn__arrow { transform: rotate(-45deg); }
.news-btn__arrow { transition: transform .35s cubic-bezier(.34,1.36,.64,1); }
.news-btn__check, .news-btn__spin { display: none; }
.news-btn__spin {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255,232,192,.3);
  border-top-color: #FFE8C0;
  border-radius: 50%;
  animation: news-spin .7s linear infinite;
}
@keyframes news-spin { to { rotate: 360deg; } }
/* loading: arrow swaps for a spinner; the button stays focusable (aria-disabled + aria-busy) */
.news-btn[aria-disabled="true"] { cursor: progress; }
.news-form[data-state="busy"] .news-btn { background: linear-gradient(180deg, #F3E6CF 0%, #E3CC9F 100%); }
.news-form[data-state="busy"] .news-btn__arrow { display: none; }
.news-form[data-state="busy"] .news-btn__spin { display: block; }
/* success: check mark in the chip */
.news-form[data-state="ok"] .news-btn__arrow { display: none; }
.news-form[data-state="ok"] .news-btn__check { display: block; }
.news-form[data-state="ok"] .news-btn__chip { background: #1F5A33; color: #fff; }

.eud-news :focus-visible { outline-color: var(--news-highlight); }
.news-note { font-size: 13.5px; line-height: 1.45; color: var(--news-note); }
.news-note a { color: #fff; text-underline-offset: 2px; }
.news-status {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  padding: .7rem .9rem;
  border-radius: 14px;
}
.news-status:empty { display: none; }
/* while sending, the text is only for screen readers (the button already shows it) */
.news-form[data-state="busy"] .news-status--ok { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.news-status::before {
  content: "";
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  background: currentColor;
  -webkit-mask: var(--status-icon) center / contain no-repeat;
  mask: var(--status-icon) center / contain no-repeat;
}
.news-status--ok {
  color: #C9F0D3;
  background: rgba(63,160,96,.18);
  border: 1px solid rgba(201,240,211,.4);
  --status-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M7.5 12.5l3 3 6-6.5'/%3E%3C/svg%3E");
}
.news-status--error {
  color: #FFD2CA;
  background: rgba(255,90,70,.16);
  border: 1px solid rgba(255,138,120,.55);
  --status-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 7v6M12 16.5v.01'/%3E%3C/svg%3E");
}
.news-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ── ARTICLE PAGE ──
   <article>
     <div class="article-wrap">                 720 reading column + 24 gutters
       <div class="art-hero"> .pill, h1, .art-deck, .byline </div>
       <figure class="hero-illu | art-figure"> (optional, 720 wide)
       <div class="art-body"> p, h2, h3, ul/ol, components, .related,
         .author-box, .cta-box, .sources </div>
     </div>
     <div class="art-nav"> .art-nav-link.prev / .next </div>
   </article> */
.article-wrap {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}
/* Under 1200px hero, figure, text and tail share one centred 720 column */
.art-hero, .art-figure, .hero-illu, .art-layout, .art-body.art-tail { max-width: var(--reading); margin-inline: auto; }
.art-hero { padding: 64px 0 32px; }
.art-hero .pill { margin-bottom: 24px; }
.art-hero h1 {
  text-wrap: balance;          /* even line lengths; avoids a dangling "(And" */
  font-family: 'Alexandria', sans-serif;
  font-size: clamp(32px, 5vw, 52px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--ink);
  margin-bottom: 20px;
  overflow-wrap: break-word;   /* long Dutch compounds at 360 */
  hyphens: manual;            /* no auto-hyphenation in titles (it split "web-site") */
}
.art-hero h1 em { font-style: normal; color: var(--red); }
.art-deck {
  font-size: 20px;
  color: var(--deck);
  max-width: 72ch;
  line-height: 1.6;
  margin-bottom: 24px;
}
.byline { font-size: 14px; font-weight: 500; line-height: 1.5; color: var(--muted); }
.byline strong { color: var(--ink); font-weight: 600; }

/* Hero figure under the byline (webshop illustration, POS photo) */
.hero-illu,
.art-figure { margin-top: 16px; margin-bottom: 0; }
.hero-illu__frame,
.art-figure__frame {
  border-radius: var(--radius-m);
  overflow: hidden;
  background: var(--surface);
}
.hero-illu img { width: 100%; height: auto; }
/* Square hero illustration: capped size, centred on the frame, never cropped.
   White background blends into --surface. aspect-ratio reserves the space (no CLS). */
.hero-illu--square .hero-illu__frame { display: flex; justify-content: center; padding: 16px; }
.hero-illu--square .hero-illu__frame img { width: 100%; max-width: 420px; aspect-ratio: 1 / 1; mix-blend-mode: multiply; }
.art-figure__frame { position: relative; aspect-ratio: 14 / 9; }
.art-figure__frame img { width: 100%; height: 100%; object-fit: cover; }
.art-figure__stamp {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(-4deg);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink);
  border: 1.5px solid var(--ink);
  background: rgba(255,255,255,.78);
  padding: .5rem .9rem;
  white-space: nowrap;
}
.hero-illu figcaption,
.art-figure figcaption { font-size: 13px; color: var(--muted); margin-top: 12px; }

/* ── ARTICLE BODY ── */
.art-body { max-width: var(--reading); padding: 40px 0 64px; font-size: 18px; }
.art-body > :first-child { margin-top: 0; }
.art-body p { margin-bottom: 24px; color: var(--text); line-height: 1.7; }
.art-body h2 {
  font-family: 'Alexandria', sans-serif;
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--ink);
  margin: 64px 0 16px;
  line-height: 1.2;
}
.art-body h3 {
  font-family: 'Alexandria', sans-serif;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--ink);
  margin: 40px 0 12px;
  line-height: 1.3;
}
.art-body .section-label { margin: 48px 0 8px; }
.art-body strong { color: var(--ink); font-weight: 700; }
.art-body em.hi { font-style: normal; color: var(--red); font-weight: 600; }

/* Plain lists in the body: 24 indent, 8 gap, red markers, air after */
.art-body > :is(ul, ol):not([class]) { margin: 0 0 24px; padding-left: 24px; }
.art-body > :is(ul, ol):not([class]) li { color: var(--text); line-height: 1.7; }
.art-body > :is(ul, ol):not([class]) li + li { margin-top: 8px; }
.art-body > :is(ul, ol):not([class]) li::marker { color: var(--red); }

/* Body links: red, 1px underline (2px on hover) */
.art-body :is(p, li) a:not([class]),
.sources a {
  color: var(--red);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.art-body :is(p, li) a:not([class]):hover,
.sources a:hover { text-decoration-thickness: 2px; }

/* Blockquote: red rule, no fill */
.art-body blockquote {
  margin: 40px 0;
  padding-left: 24px;
  border-left: 3px solid var(--red);
  font-family: 'Alexandria', sans-serif;
  font-size: 22px;
  font-weight: 500;
  font-style: normal;
  line-height: 1.45;
  color: var(--ink);
}
.art-body blockquote cite {
  display: block;
  margin-top: 12px;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--red);
}
hr.divider { border: none; border-top: 1px solid var(--line); margin: 64px 0; }

/* Thesis line */
.art-body .thesis {
  font-family: 'Alexandria', sans-serif;
  font-weight: 700;
  font-size: clamp(22px, 4vw, 28px);
  line-height: 1.25;
  letter-spacing: -.02em;
  color: var(--ink);
  margin: 40px 0;
  padding: 28px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.art-body .thesis em { font-style: normal; color: var(--red); }

/* ── STAT CARDS ──
   .stat-row > .stat-card > .stat-num + .stat-desc + .stat-source
   .stat-row--icons: .stat-card > .icon-tile + b + .stat-desc */
.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
  gap: 16px;
  margin: 32px 0;
}
.stat-card {
  min-width: 0;
  overflow-wrap: anywhere;
  background: var(--surface);
  padding: 24px 20px;
  border-radius: var(--radius-s);
}
.stat-num {
  font-family: 'Alexandria', sans-serif;
  font-size: clamp(32px, 8vw, 44px);
  font-weight: 700;
  color: var(--red);
  line-height: 1.1;
  margin-bottom: 8px;
}
.stat-desc { font-size: 15px; color: var(--deck); line-height: 1.5; }
.stat-source { font-size: 13px; font-weight: 500; color: var(--muted); margin-top: 8px; }

.icon-tile {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-s);
  background: var(--red-soft);
  color: var(--red);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.icon-tile svg { width: 22px; height: 22px; }
.stat-row--icons { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stat-row--icons .icon-tile { margin-bottom: 12px; }
.stat-row--icons .stat-card b {
  display: block;
  font-family: 'Alexandria', sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
  margin-bottom: 4px;
}
.stat-row--icons .stat-desc { display: block; }

/* ── STEP LIST: one component for numbered steps, icon steps and plain cards ──
   <ol|ul class="step-list [step-list--icons | step-list--plain]">
     <li><span class="step-num">1</span> | <span class="icon-tile">..</span>
         <div><strong class="step-title">Title</strong><p>Text</p></div></li>
   --plain: no marker (scenarios, detail lists). */
.step-list { list-style: none; margin: 32px 0; display: grid; gap: 16px; }
.step-list li {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: var(--surface);
  border-radius: var(--radius-s);
  padding: 20px 24px;
}
.step-num {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  font-family: 'Alexandria', sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
}
.step-list li > div { min-width: 0; }
.step-list li p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--text); }
.step-list li p strong { display: block; margin-bottom: 4px; }
.step-title {
  display: block;
  margin-bottom: 4px;
  font-family: 'Alexandria', sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--ink);
}
.step-list--icons .icon-tile { width: 44px; height: 44px; }
.step-list--icons .icon-tile svg { width: 24px; height: 24px; }
.step-list--icons li b { display: block; color: var(--ink); margin-bottom: 4px; }
.step-list--plain li { display: block; }

/* ── COMPARE TABLE ──
   Wrap in <div class="compare-wrap" data-scroll-fade data-scroll-region aria-label="...">
   so it scrolls sideways on phones (first column stays put). scroll-fade.js adds the
   right-edge fade and, only while it overflows, tabindex="0" + role="region". */
.compare-wrap { margin: 32px 0; overflow-x: auto; }
/* Border-box mask would clip an outside ring: draw it inside. Tab stop is added by
   scroll-fade.js only while the table scrolls ([data-scroll-region]). */
.compare-wrap:focus-visible { outline-offset: -3px; }
.compare-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.compare-table th {
  background: var(--surface);
  color: var(--ink);
  padding: 14px 16px;
  text-align: left;
  font-size: 14px;
  font-weight: 600;
  border-bottom: 2px solid var(--ink);
}
.compare-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  vertical-align: top;
  line-height: 1.5;
}
.compare-table td:first-child { font-weight: 600; color: var(--ink); }
.compare-table th:first-child,
.compare-table td:first-child { position: sticky; left: 0; background: var(--surface); }
.compare-table td:first-child { background: var(--bg); }

/* ── CALLOUT + MOVE GRID ── */
.callout {
  background: var(--surface);
  border-radius: var(--radius-s);
  padding: 24px;
  margin: 32px 0;
}
.callout__head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.art-body .callout__head h3 { margin: 0; font-size: 20px; line-height: 1.3; }
.art-body .callout p { margin-bottom: 16px; font-size: 16px; }
.callout ol { margin: 0; padding-left: 1.3em; display: grid; gap: 8px; font-size: 16px; line-height: 1.6; }
.callout li::marker { color: var(--red); font-weight: 700; }
.callout li b { color: var(--ink); }

.move-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 24px 0 32px;
}
.move-grid--single { grid-template-columns: minmax(0, 1fr); }   /* one self-check list, full width */
.move-col { background: var(--surface); border-radius: var(--radius-s); padding: 20px 24px; }
.move-col--no { background: var(--red-soft); }   /* warning: tint + icon + label */
.art-body .move-col__head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Alexandria', sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
  margin: 0 0 12px;
}
.move-col__head svg { width: 20px; height: 20px; flex: none; }
.move-col--yes .move-col__head svg { color: var(--ok); }
.move-col--no .move-col__head svg { color: var(--red); }
.move-col ul { list-style: none; display: grid; gap: 8px; font-size: 16px; line-height: 1.5; }
.move-col li { position: relative; padding-left: 20px; color: var(--text); }
.move-col li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .55em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--muted);
}
.move-col--no li::before { background: var(--red); }

/* Self-check column: real tickable checkboxes (native input, custom box).
   Markup: <fieldset class="move-col move-col--check"><legend class="move-col__head">
   <ul role="list"><li><label class="check-item"><input type="checkbox"><span class="check-box"></span><span>text</span>
   <p class="check-count" aria-live="polite" hidden> (filled by the page script) */
.move-col--check { border: 0; margin: 0; min-width: 0; }
/* A floated legend joins the normal flow inside the card padding (a plain legend
   straddles the fieldset's top edge). */
.move-col--check .move-col__head { float: left; padding: 0; width: 100%; }
.move-col--check .move-col__head + ul { clear: both; }
.move-col--check li { padding: 0; }
.move-col--check li::before { content: none; }
.move-col--check ul { gap: 0; }
.check-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 44px;
  padding: 10px 0;
  cursor: pointer;
}
.check-item input { position: absolute; opacity: 0; width: 20px; height: 20px; left: 0; top: 12px; margin: 0; cursor: pointer; }
.check-box {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  border: 2px solid var(--control-line);
  border-radius: 4px;
  background: #fff;
  display: grid;
  place-items: center;
  transition: background-color .15s ease, border-color .15s ease;
}
.check-box::after {
  content: "";
  width: 12px;
  height: 12px;
  background: #fff;
  opacity: 0;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.check-item input:checked + .check-box { background: var(--red); border-color: var(--red); }
.check-item input:checked + .check-box::after { opacity: 1; }
.check-item input:focus-visible + .check-box { outline: 3px solid var(--red); outline-offset: 2px; }
/* Windows High Contrast: the red fill is dropped, so ticked must still differ from unticked */
@media (forced-colors: active) {
  .check-item input:checked + .check-box { background: Highlight; border-color: Highlight; }
  .check-item input:checked + .check-box::after { background: HighlightText; forced-color-adjust: none; }
}
.check-count { margin: 8px 0 0; font-size: 14px; color: var(--muted); }
.check-count[hidden] { display: none; }

/* ── PRICE CARDS ── */
.price-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
  gap: 16px;
  margin: 32px 0;
}
.price-card {
  min-width: 0;                 /* let the grid track shrink below long words */
  overflow-wrap: anywhere;
  hyphens: auto;               /* pages carry lang="en" / lang="nl" */
  background: var(--surface);
  border-radius: var(--radius-m);
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
}
.price-card.featured { box-shadow: inset 0 0 0 2px var(--red); }
.price-card .tier {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 8px;
}
.price-card .amount {
  font-family: 'Alexandria', sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -.02em;
  line-height: 1.2;
  margin-bottom: 8px;
}
.price-card .amount span { font-size: 16px; font-weight: 500; color: var(--deck); }
.price-card .price-desc { font-size: 15px; line-height: 1.6; color: var(--deck); margin-bottom: 16px; flex: 1; }
.price-card .price-includes {
  font-size: 15px;
  color: var(--deck);
  line-height: 1.7;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.price-card .price-includes li { list-style: none; padding-left: 20px; position: relative; }
.price-card .price-includes li::before { content: '\2713'; position: absolute; left: 0; color: var(--red); font-weight: 700; }

/* ── COLOR SWATCHES (colour article; swatch colours are inline: they are content) ── */
.color-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
  gap: 16px;
  margin: 32px 0;
}
.color-card { padding: 20px 16px; border-radius: var(--radius-s); font-size: 15px; line-height: 1.5; }
.color-card strong {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

/* ── ILLUSTRATED BITS (POS article): scene, tally, ask ── */
.scene {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 28px;
  align-items: center;
  margin: 32px 0;
}
.scene svg { width: 100%; height: auto; display: block; }
.art-body .scene blockquote { margin: 0; }
.art-body .scene blockquote p {
  font-family: 'Alexandria', sans-serif;
  font-weight: 700;
  font-size: clamp(28px, 5vw, 38px);
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--ink);
  margin: 0 0 12px;
}
.tally { background: var(--surface); border-radius: var(--radius-s); padding: 24px; margin: 24px 0 32px; }
.art-body .tally .section-label { margin: 0 0 16px; color: var(--muted); }
.art-body .tally .section-label::before { background: var(--muted); }
.tally__row { display: grid; grid-template-columns: 8rem 1fr auto; align-items: center; gap: 8px 16px; }
.tally__row + .tally__row { margin-top: 12px; }
.tally__row > span:first-child { font-size: 15px; font-weight: 600; color: var(--ink); }
.tally__taps { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; color: var(--muted); }
.tally__taps svg { width: 18px; height: 18px; }
.tally__row--new .tally__taps { color: var(--red); }
.tally__n {
  font-family: 'Alexandria', sans-serif;
  font-size: 26px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}
.tally__row--new .tally__n { color: var(--red); }
.art-body .tally__note { font-size: 13px; color: var(--muted); margin: 16px 0 0; }
.ask {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: var(--red-soft);
  border-radius: var(--radius-s);
  padding: 24px;
  margin: 24px 0;
}
.ask svg { flex: none; width: 36px; height: 36px; color: var(--red); }
.art-body .ask p {
  font-family: 'Alexandria', sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.3;
  color: var(--ink);
  margin: 0;
}

/* ── PROJECT CASE PAGES: meta facts + challenge blocks ── */
.project-meta {
  background: var(--surface);
  border-radius: var(--radius-s);
  padding: 24px;
  margin: 32px 0 40px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
  gap: 20px;
}
.project-meta dt {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}
.project-meta dd { font-size: 16px; color: var(--ink); font-weight: 600; margin: 0; line-height: 1.4; overflow-wrap: anywhere; }
.project-meta dd a { color: var(--red); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.project-meta dd a:hover { text-decoration-thickness: 2px; }
.challenge { background: var(--surface); border-radius: var(--radius-m); padding: 32px; margin: 24px 0; }
.art-body .challenge h3 { margin: 0 0 16px; font-size: 20px; display: flex; align-items: center; gap: 12px; }
.challenge .ch-num {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
}
.challenge .ch-label { margin: 24px 0 8px; }
.art-body .challenge p { font-size: 16px; margin-bottom: 12px; }
.art-body .challenge p:last-child { margin-bottom: 0; }

/* ── CTA BOX (the one dark block) ── */
.cta-box {
  background: var(--dark);
  border-radius: var(--radius-l);
  padding: 64px 48px;
  margin: 32px 0 0;
}
.art-body .cta-box h2,
.art-body .cta-box h3 {
  color: #fff;
  margin: 0 0 16px;
  font-size: 28px;
  line-height: 1.25;
}
.art-body .cta-box p,
.cta-box > p { color: rgba(255,255,255,.82); font-size: 17px; line-height: 1.6; margin-bottom: 24px; }
.cta-services { list-style: none; margin: 24px 0 32px; }
.cta-services li {
  padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,.12);
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255,255,255,.82);
  /* Block flow, not flex: a flex row split the bold lead-in and the sentence into two
     columns and cramped narrow screens. The arrow hangs in the left padding. */
  position: relative;
  padding-left: 28px;
  overflow-wrap: break-word;
}
.cta-services li::before { content: '→'; color: var(--on-dark-hi); position: absolute; left: 0; top: 12px; }
.cta-services li strong { color: #fff; }
.cta-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
/* Cream pill + dark arrow chip, like the nav CTA and Subscribe */
.cta-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 0 6px 0 28px;
  border-radius: 999px;
  background: linear-gradient(180deg, #FFF3DC 0%, #FFE2AE 100%);
  color: #2B1004;
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  box-shadow: 0 6px 22px rgba(255,214,150,.22), inset 0 1px 0 rgba(255,255,255,.85), inset 0 -1px 0 rgba(150,90,30,.28);
  transition: transform .2s ease, box-shadow .2s ease;
}
.cta-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(255,214,150,.38), inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 0 rgba(150,90,30,.28); }
.cta-btn .btn-chip {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #2B1004;
  color: #FFE8C0;
}
.cta-btn .btn-arrow { width: 18px; height: 18px; }
.cta-btn:hover .btn-arrow { transform: translateX(3px); }
.cta-btn:active { transform: none; filter: brightness(.94); box-shadow: 0 3px 12px rgba(255,214,150,.22), inset 0 1px 0 rgba(255,255,255,.7), inset 0 -1px 0 rgba(150,90,30,.28); }
.cta-secondary { display: inline-flex; align-items: center; min-height: 44px; font-size: 16px; font-weight: 600; color: #fff; text-underline-offset: 3px; }
.cta-secondary:hover { text-decoration-thickness: 2px; }

/* CTA banner as wide as the floating nav capsule (1180px), centred on the page
   (Cess, 2026-10-21). From 1100px: text left, actions right in a column sized
   to the button label; the pill is a size smaller and stays on one line. */
@media (min-width: 861px) {
  .art-body .cta-box {
    width: min(1180px, calc(100vw - 48px));
    margin-left: calc(50% - min(590px, calc(50vw - 24px)));
    padding: 56px;
  }
  .cta-box .cta-btn { min-height: 48px; padding: 0 5px 0 22px; font-size: 15px; justify-content: space-between; }
  .cta-box .cta-btn .btn-chip { width: 38px; height: 38px; }
  .cta-box .cta-btn .btn-arrow { width: 16px; height: 16px; }
  .cta-box .cta-secondary { font-size: 15px; }
}
@media (min-width: 1100px) {
  .art-body .cta-box {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 64px;
    align-items: center;
  }
  .art-body .cta-box > * { grid-column: 1; }
  .art-body .cta-box > .cta-actions {
    grid-column: 2;
    grid-row: 1 / span 6;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .art-body .cta-box > p:last-of-type { margin-bottom: 0; }
  .cta-box .cta-btn { white-space: nowrap; }
  .cta-box .cta-secondary { justify-content: center; }
}

/* ── SOURCES ── */
.sources { margin-top: 64px; padding-top: 32px; border-top: 1px solid var(--line); }
.art-body .sources .section-label { margin: 0 0 16px; }
.sources ol { padding-left: 20px; font-size: 14px; color: var(--deck); line-height: 1.7; }
.sources li { margin-bottom: 8px; }

/* ── RELATED ARTICLES: .article-card without a thumbnail ── */
.related { margin: 64px 0 0; }
.art-body h2.related__title {   /* an h2 that looks like an eyebrow */
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .18em;
  color: var(--red);
  margin: 0 0 16px;
}
.related ul { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.related li { display: flex; }
.related .article-card { width: 100%; }
.related .article-body { padding: 20px 24px 0; }
.related .article-body h3 { font-size: 18px; margin: 0; }

/* ── AUTHOR BOX ── */
.author-box {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  background: var(--surface);
  border-radius: var(--radius-m);
  padding: 24px;
  margin: 48px 0 0;
}
.author-box img { width: 64px; height: 64px; border-radius: 50%; flex-shrink: 0; object-fit: cover; }
.art-body .author-box p { margin: 0; }
.art-body .author-box .author-box__name { font-family: 'Alexandria', sans-serif; font-weight: 700; font-size: 18px; line-height: 1.3; color: var(--ink); }
.art-body .author-box .author-box__role { font-size: 14px; font-weight: 500; color: var(--muted); margin-bottom: 8px; line-height: 1.5; }
.art-body .author-box .author-box__bio { font-size: 15px; line-height: 1.6; color: var(--text); margin-bottom: 8px; }
.author-box__link { font-size: 15px; }

/* ── ARTICLE LAYOUT: nav-width container, text column + sticky sidebar ──
   <div class="article-wrap">  = nav container (1280, same side padding as .nav__inner)
     .art-hero, figure          hero, left-aligned at the container edge
     .art-layout                >=1200: grid, 720 text column + 64 gap + sidebar
       .art-body                the flowing article text (720)
       .art-aside               sticky TOC + booking card (_inc/sidebar.php)
     .art-body.art-tail         full width: related, author, CTA, sources
   Below 1200 everything is one 720 column, centred, and the sidebar is hidden. */
html:has(body.art) { --art-sticky-top: 92px; scroll-padding-top: var(--art-sticky-top); }   /* sticky nav 68px + air, for TOC / anchor jumps */
.art-layout { margin-inline: auto; }
.art-layout > .art-body { padding-bottom: 0; }
.art-layout > .art-body > :last-child { margin-bottom: 0; }
.art-body.art-tail { padding: 64px 0; }
.art-aside { display: none; }
.art-toc[hidden] { display: none; }
.art-toc__list { list-style: none; margin-top: 16px; }
.art-toc__list a {
  display: block;
  padding: 7px 0 7px 14px;
  border-left: 3px solid transparent;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--deck);
  text-decoration: none;
  transition: color .15s ease, border-color .15s ease;
}
.art-toc__list a:hover { color: var(--ink); }
.art-toc__list a[aria-current] { color: var(--ink); border-left-color: var(--red); }
.side-book { margin-top: 32px; padding: 24px; background: var(--surface); border-radius: var(--radius-m); }
.art-toc[hidden] + .side-book { margin-top: 0; }
.side-book__title { font-family: 'Alexandria', sans-serif; font-size: 18px; font-weight: 700; line-height: 1.3; color: var(--ink); margin-bottom: 8px; }
.side-book__copy { font-size: 15px; line-height: 1.5; color: var(--text); margin-bottom: 20px; }
.side-book__btn { display: flex; width: 100%; min-height: 48px; padding: 0 22px; font-size: 15px; }
.side-book__btn .btn-arrow { width: 18px; height: 18px; }
.side-book__link { display: flex; align-items: center; justify-content: center; min-height: 44px; margin-top: 4px; font-size: 14px; font-weight: 600; color: var(--red); text-underline-offset: 3px; }
.side-book__link:hover { color: var(--red-hover); text-decoration-thickness: 2px; }

@media (min-width: 1200px) {
  .art-hero, .art-figure, .hero-illu, .art-body.art-tail { max-width: none; margin-inline: 0; }
  .art-hero h1 { max-width: none; }   /* owner: title may use the full width (fewer lines) */
  .art-figure__frame { aspect-ratio: 21 / 9; }
  .art-layout {
    max-width: none;
    margin-inline: 0;
    display: grid;
    grid-template-columns: minmax(0, var(--reading)) minmax(0, 1fr);
    column-gap: 64px;
  }
  /* Same 40px top space as the text column (.art-body padding-top), so the sidebar never touches the hero image */
  .art-aside { display: block; padding-top: 40px; }
  .art-aside__inner { position: sticky; top: var(--art-sticky-top); }
  /* the CTA fills the full-width tail (replaces the centred 1180 break-out above) */
  .art-tail .cta-box { width: 100%; margin-left: 0; }
}
/* Sticky box never taller than the viewport below the nav: the TOC list scrolls
   inside it, the booking card always stays in view. Top offset = --art-sticky-top. */
@media (min-width: 1200px) {
  .art-aside__inner { display: flex; flex-direction: column; max-height: calc(100vh - var(--art-sticky-top) - 24px); }
  .art-aside__inner .art-toc { display: flex; flex-direction: column; flex: 0 1 auto; min-height: 0; }
  .art-aside__inner .art-toc[hidden] { display: none; }
  .art-aside__inner .art-toc__list {
    overflow-y: auto; overscroll-behavior: contain; min-height: 0;
    /* room for the 3px focus ring + offset, cancelled out by the negative margin */
    padding: 6px; margin: 10px -6px -6px;
  }
  .art-aside__inner .side-book { flex: none; }
}

/* ── READING OPTIONS (_inc/reading-options.php + assets/js/reading.js) ──
   Hero (under the byline) below 1200px, top of the sticky sidebar from 1200px
   (reading.js moves the one block). Hidden until JS removes [hidden]. */
.read-opt[hidden], .read-opt [hidden] { display: none; }
/* With JS (html.js, set in the head) the block is laid out from first paint, only invisible,
   so revealing it shifts nothing. Hero placement only: from 1200px it moves to the sidebar. */
@media (max-width: 1199.98px) {
  html.js .read-opt[hidden] { display: block; visibility: hidden; min-height: 72px; }   /* title + one row */
}
/* From 1200px the block lives in the sidebar: hold its place there until reading.js has moved it in,
   and keep it laid out (invisible) until revealed. */
@media (min-width: 1200px) {
  html.js .art-aside__inner:not(:has(.read-opt))::before { content: ""; flex: none; height: 97.2px; margin-bottom: 24px; }
  html.js .read-opt--aside[hidden] { display: block; visibility: hidden; }
}
.read-opt { margin-top: 20px; }
.read-opt__title { margin-bottom: 10px; }
.read-opt__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.read-opt__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--control-line);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease;
}
.read-opt__btn:hover { background: var(--surface); }
.read-opt__btn:active { background: var(--line); }
.read-opt__btn svg { flex: none; color: var(--red); }
.read-opt__listen[data-state="playing"], .read-opt__listen[data-state="paused"] { border-color: var(--red); }
.read-opt--aside { margin: 0 0 24px; padding-bottom: 24px; border-bottom: 1px solid var(--line); flex: none; }
/* block being read aloud: tint, bar and forced-colors outline come from the global assets/css/a11y-panel.css; only table rows differ */
/* table rows: bar inside the first cell (the scroll wrapper .compare-wrap would clip an outside bar) */
.art main tr.reading-now { box-shadow: none; }
.art main tr.reading-now > :first-child { box-shadow: inset 3px 0 0 #963723; }
@media (prefers-reduced-motion: reduce) {
  .read-opt__btn { transition: none; }
}

/* ── PREV / NEXT ── */
.art-nav {
  max-width: calc(var(--reading) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 0 var(--gutter) 64px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.art-nav-link {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  min-height: 72px;
  padding: 16px 20px;
  background: var(--surface);
  border-radius: var(--radius-s);
  text-decoration: none;
  font-family: 'Alexandria', sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
}
.art-nav-link.next { grid-column: 2; text-align: right; }
@media (min-width: 1200px) { .art-nav { max-width: var(--container); padding-inline: var(--container-pad); } }
.art-nav-link__dir {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--red);
}
.art-nav-link.prev .art-nav-link__dir::before { content: "\2190  " / ""; }
.art-nav-link.next .art-nav-link__dir::after { content: "  \2192" / ""; }

/* ── MAIN NAV ON ARTICLE PAGES: darker than the cream page would otherwise
   let the glass be (same dark look as the main pages). Only body.art. ── */
body.art .nav::before {
  background: linear-gradient(180deg, rgba(43,18,6,.98), rgba(43,18,6,.96));
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
body.art .nav__inner::before {
  background: linear-gradient(135deg, #3A1A0A, #2B1206);
  border-color: rgba(255,255,255,.22);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
body.art .nav__mobile {
  background: #2B1206;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
body.art .nav__links > li > a,
body.art .nav__dropdown-trigger { color: #fff; }

/* ── RESPONSIVE: two breakpoints only ── */
@media (max-width: 860px) {
  .art { --section-y: 64px; --container-pad: 24px; }

  /* section nav: one 48px row, label hidden, links scroll sideways */
  .art-subnav__inner { padding: 0; gap: 0; }
  .art-subnav__title {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .art-subnav__links { flex: 1 1 auto; gap: 20px; padding: 0 24px; scroll-padding-inline: 24px; }
  .art-subnav__links a { min-height: 48px; }
  .art-subnav__search { margin-right: 24px; }
  .art-subnav__search input { width: 140px; }

  /* overview */
  .featured-grid { grid-template-columns: 1fr; }
  .research-banner { flex-direction: column; align-items: flex-start; gap: 24px; }

  /* article */
  .art-body { font-size: 17px; }
  .art-body h2 { font-size: 28px; }
  .art-deck, .hero p { font-size: 18px; }
  .scene { grid-template-columns: 1fr; }
  .scene svg { max-width: 200px; margin: 0 auto; }

  /* newsletter card stacks */
  .news-card { grid-template-columns: 1fr; border-radius: 32px; }
  .news-copy { max-width: 40ch; }
}

@media (max-width: 520px) {
  .art { --gutter: 20px; --container-pad: 20px; }

  /* section nav: search lives above the listing */
  .art-subnav__links { padding: 0 12px; gap: 8px; scroll-padding-inline: 12px; }
  .art-subnav .art-subnav__search { display: none; }

  /* overview */
  .hero { padding: 48px var(--container-pad) 32px; }
  .hero-label { margin-bottom: 16px; }
  .hero h1 { margin-bottom: 16px; }
  .hero p { margin-bottom: 24px; }
  .hero-cats {
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    margin-inline: calc(-1 * var(--container-pad));
    /* Room inside the scroller (and inside the fade mask) for the 3px focus ring */
    padding: 6px var(--container-pad);
    margin-block: -6px;
    scroll-padding-inline: var(--container-pad);
  }
  .hero-cats::-webkit-scrollbar { display: none; }
  .featured-grid, .article-grid, .showcase-grid { gap: 16px; }
  .featured-side { gap: 16px; }
  .featured-img { padding: 16px; }
  .featured-body, .article-body, .showcase-body, .related .article-body { padding: 20px 20px 0; }
  .article-footer, .showcase-footer { padding: 16px 20px 20px; }
  .research-banner { padding: 24px; }
  .research-btn, .survey-cta { width: 100%; }

  /* article */
  .art-hero { padding: 40px 0 24px; }
  .art-body { padding-bottom: 48px; }
  .art-body blockquote { font-size: 20px; }
  .stat-row--icons { grid-template-columns: 1fr; gap: 12px; }
  .stat-row--icons .stat-card:has(> .icon-tile) { display: grid; grid-template-columns: 44px 1fr; column-gap: 16px; align-items: start; }
  .stat-row--icons .stat-card:has(> .icon-tile) .icon-tile { grid-row: 1 / span 2; margin: 0; }
  .stat-row--icons .stat-card:has(> .icon-tile) > :not(.icon-tile) { grid-column: 2; }
  .step-list li { padding: 16px; gap: 12px; }
  .compare-table { min-width: 520px; font-size: 14px; }
  .move-grid { grid-template-columns: 1fr; }
  .tally__row { grid-template-columns: 1fr auto; }
  .tally__taps { grid-column: 1 / -1; order: 3; }
  .challenge { padding: 24px 20px; }
  .cta-box { padding: 40px 24px; border-radius: var(--radius-l); }
  .art-body .cta-box h2, .art-body .cta-box h3 { font-size: 24px; }
  .related ul { grid-template-columns: 1fr; gap: 16px; }
  .author-box { flex-direction: column; }
  .art-nav { grid-template-columns: 1fr; padding-bottom: 48px; }
  .art-nav-link.next { grid-column: auto; text-align: left; }

  /* newsletter */
  .news-form { grid-template-columns: 1fr; }
  .news-btn { width: 100%; }
}

/* ── REDUCED MOTION ── */
@media (prefers-reduced-motion: reduce) {
  html:has(body.art) { scroll-behavior: auto; }
  .art main *, .art main *::before, .art main *::after,
  .art .eud-news *, .art .eud-news *::before, .art .eud-news *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
  /* The busy spinner is the one animation that still turns (slowly): without
     it the button would give no sign that something is happening. */
  .art .eud-news .news-btn__spin {
    animation-duration: 2.4s !important;
    animation-iteration-count: infinite !important;
  }
  .featured-main:hover, .side-card:hover, .article-card:hover, .showcase-card:hover,
  .research-card:hover, .art-nav-link:hover, .research-btn:hover, .survey-cta:hover,
  .btn-ghost:hover, .cta-btn:hover { transform: none; box-shadow: none; }
  .news-btn:hover { transform: none; }
  :is(a, .showcase-card):hover .card-cta__arrow, a:focus-visible .card-cta__arrow { transform: none; }
  .research-btn:hover .btn-arrow, .survey-cta:hover .btn-arrow, .cta-btn:hover .btn-arrow,
  .research-btn:focus-visible .btn-arrow, .survey-cta:focus-visible .btn-arrow { transform: none; }
  .news-btn, .news-btn__chip, .news-btn__arrow, .art-subnav__links a, .cat-pill, .check-box { transition: none; }
  .news-btn:hover::after { translate: -120% 0; }
  .news-btn__spin { animation-duration: 2.4s; }
}

/* ── NO JUSTIFIED UI TEXT ──
   /assets/js/justify-text.js (site-wide, loaded by includes/footer.php) sets an
   INLINE text-align:justify + hyphens:auto on every <p>/<td>/<dd>/<blockquote> in
   <main> that renders 3+ lines. Inline styles only lose to !important, so UI text
   is pinned here. Article body copy stays justified from 768px up (site rule). */
:is(.article-card, .side-card, .featured-main, .showcase-card, .research-card, .news-card,
    .side-book, .art-toc, .card-cta, .tag, .cat-pill, .article-footer, .article-meta,
    .related, .hero, .price-card, .stat-card, .art-nav, .art-aside) :is(p, a, span, li, div),
:is(.article-card, .side-card, .featured-main, .showcase-card, .research-card, .news-card,
    .side-book, .art-toc, .hero, .related) p {
  text-align: left !important;
  hyphens: manual !important;
  -webkit-hyphens: manual !important;
}
@media (max-width: 767px) {
  .art main :is(p, li, td, dd, blockquote) {
    text-align: left !important;
    hyphens: manual !important;
    -webkit-hyphens: manual !important;
  }
}