/*
 * DDS Journal — base stylesheet.
 * Mobile-first: unqualified rules are the 390px design. Two breakpoints
 * widen the layout — 768px (tablet) and 1200px (desktop, ~1440 canvas).
 * Never add a third breakpoint without updating this comment and the
 * contrast/CLS harnesses that assume these two.
 *
 * Colour tokens come from theme.json (--wp--preset--color--*). Spacing
 * tokens come from theme.json (--wp--preset--spacing--*, 4pt scale).
 * Radius tokens: --wp--custom--radius--{sm,md,full} (2px/4px/999px).
 *
 * GOLD TEXT RULE (B1): #c9a84c / #e8c84a are used as TEXT only inside a
 * dark-background context (.dds-section--dark/--darkest, .dds-hero,
 * .dds-header, .dds-footer, .dds-drawer, .dds-fairwear, .dds-hub-header).
 * On cream/paper it is used only as a button fill with dark text on top,
 * never as the text colour itself. _work/wo175/harness/contrast.mjs
 * asserts this on the rendered page.
 */

/* -------------------------------------------------------------------- */
/* Reset + base                                                          */
/* -------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
	margin: 0;
	background: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--deep);
	font-family: var(--wp--preset--font-family--body);
	-webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--wp--preset--color--teal); }
a:hover { color: var(--wp--preset--color--forest); }
a:focus-visible, button:focus-visible, input:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold-bright);
	outline-offset: 2px;
}

.screen-reader-text {
	border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
	height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute;
	width: 1px; word-wrap: normal !important;
}
.screen-reader-text:focus {
	background: var(--wp--preset--color--cream); clip: auto !important; clip-path: none;
	color: var(--wp--preset--color--deep); display: block; height: auto; width: auto;
	padding: var(--wp--preset--spacing--15); z-index: 100000; left: var(--wp--preset--spacing--10); top: var(--wp--preset--spacing--10);
}

.dds-eyebrow {
	display: inline-flex; align-items: center; gap: 8px;
	font-family: var(--wp--preset--font-family--eyebrow);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600;
	color: var(--wp--preset--color--teal);
}
.dds-eyebrow--gold { color: var(--wp--preset--color--gold-bright); }
/* WO-175 fix-round (B10 touch targets, MEASURED 21px). .dds-eyebrow is mostly a plain <span>
   label (not a target at all); core's wp:post-terms block puts the class on a wrapping <div>
   (class="taxonomy-category dds-eyebrow wp-block-post-terms"), not the <a> itself, so an
   a.dds-eyebrow selector never matches -- target the descendant link instead. */
.dds-eyebrow a { display: inline-flex; align-items: center; min-height: 44px; }

.dds-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 44px; padding: 0 20px; border-radius: var(--wp--custom--radius--sm);
	font-weight: 700; font-size: 0.9375rem; text-decoration: none; border: 1px solid transparent;
	transition: transform 0.15s ease, background-color 0.15s ease;
}
.dds-btn--gold { background: var(--wp--preset--color--gold-bright); color: var(--wp--preset--color--deep); }
.dds-btn--gold:hover { background: var(--wp--preset--color--gold); color: var(--wp--preset--color--deep); }
.dds-btn--outline { border-color: var(--wp--preset--color--gold); color: var(--wp--preset--color--on-dark); }
.dds-btn--outline-on-dark { border-color: var(--wp--preset--color--cream); color: var(--wp--preset--color--cream); }
.dds-btn--dark { background: var(--wp--preset--color--forest); color: var(--wp--preset--color--cream); }
@media (hover: hover) {
	.dds-btn:hover { transform: translateY(-1px); }
}

.dds-pill {
	/* WO-175 fix-round (B10 touch targets, MEASURED 40px): 44px is the floor. */
	display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 14px;
	border-radius: var(--wp--custom--radius--full); font-weight: 600; font-size: 0.875rem;
	border: 1px solid var(--wp--preset--color--deep); color: var(--wp--preset--color--deep);
	text-decoration: none; white-space: nowrap;
}
.dds-pill--active, .dds-hubpills .dds-pill--active { background: var(--wp--preset--color--gold-bright); border-color: var(--wp--preset--color--gold-bright); color: var(--wp--preset--color--deep); }
.dds-pill__count { font-size: 0.75rem; opacity: 0.75; }
.dds-pill-row, .dds-hub-strip, .dds-hubpills { display: flex; flex-wrap: wrap; gap: 8px; }
.dds-hubpills { overflow-x: auto; padding-bottom: 2px; }
.dds-hubpills .dds-pill { border-color: var(--wp--preset--color--emerald); color: var(--wp--preset--color--on-dark); flex-shrink: 0; }

/* WO-175 fix-round (B10 touch targets, MEASURED 44px min): a standalone link styled only by
   font-weight has a tap target equal to its text line-box, well under 44px. inline-flex +
   min-height keeps the link inline where it's used (proof-grid.php, category.html -- both are
   standalone links, never mid-sentence text) while giving it a real tap area. */
.dds-link-strong { font-weight: 600; display: inline-flex; align-items: center; min-height: 44px; }
.dds-lead-strong { font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: var(--wp--preset--font-size--large); margin: 0; }
.dds-fineprint { font-size: var(--wp--preset--font-size--x-small); color: var(--wp--preset--color--muted); }
/* WO-175 fix-round (B10 axe color-contrast, MEASURED 2.18:1 on #0d2818, needs 4.5:1): .dds-fineprint
   is used on BOTH light backgrounds (page-newsletter.html, page-tools.html -- .dds-section with no
   --dark modifier, i.e. cream; --muted is fine there, not touched) AND dark ones (illustration
   credit captions in boston-band.php / gazette-band.php / inc/blocks.php's figcaptions, always
   inside a .dds-section--dark or .dds-hub-header__cover card). --muted is calibrated for cream and
   fails on the dark card specifically -- scope the override to the dark context only, matching the
   existing .dds-section--dark p / .dds-hub-header__cover figcaption pattern already in this file
   (see the rule immediately above), rather than changing the class's colour everywhere. */
.dds-section--dark .dds-fineprint, .dds-section--darkest .dds-fineprint, .dds-hero .dds-fineprint,
.dds-hub-header .dds-fineprint, .dds-hub-header__cover .dds-fineprint { color: var(--wp--preset--color--on-dark-faint); }
.dds-empty { color: var(--wp--preset--color--muted); font-style: italic; }

/* -------------------------------------------------------------------- */
/* Sections                                                              */
/* -------------------------------------------------------------------- */
.dds-section, .dds-hero, .dds-hub-header {
	padding: var(--wp--preset--spacing--40) 16px;
	display: flex; flex-direction: column; gap: var(--wp--preset--spacing--30);
}
.dds-section--tight { padding-top: var(--wp--preset--spacing--30); padding-bottom: var(--wp--preset--spacing--30); }
.dds-section--dark, .dds-hero, .dds-hub-header { background: var(--wp--preset--color--forest); color: var(--wp--preset--color--cream); }
.dds-section--darkest { background: var(--wp--preset--color--deep); color: var(--wp--preset--color--cream); }
.dds-section--dark p, .dds-hero p, .dds-hub-header p, .dds-section--darkest p { color: var(--wp--preset--color--on-dark); }
.dds-section--dark a:not(.dds-btn), .dds-hero a:not(.dds-btn) { color: var(--wp--preset--color--cream); }

.dds-hero__eyebrow { display: flex; align-items: center; gap: 8px; font-family: var(--wp--preset--font-family--eyebrow); font-size: var(--wp--preset--font-size--x-small); letter-spacing: 0.18em; text-transform: uppercase; color: var(--wp--preset--color--gold-bright); }
.dds-hero__dot { width: 7px; height: 7px; border-radius: 999px; background: var(--wp--preset--color--emerald); display: inline-block; }
.dds-hero__title, .wp-block-post-title.dds-hero__title { margin: 0; font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--display); line-height: 1.05; font-weight: 700; }
.dds-hero__title em { font-style: italic; color: var(--wp--preset--color--gold-bright); }
.dds-hero__lead { margin: 0; font-size: var(--wp--preset--font-size--medium); line-height: 1.55; max-width: 62ch; }
.dds-hero__ctas { display: flex; flex-direction: column; gap: 12px; }

.dds-archive__intro p { max-width: 68ch; }
.dds-archive__intro { font-size: var(--wp--preset--font-size--medium); }

.dds-hub-header__cover { margin: 0; }
.dds-hub-header__cover-img { width: 100%; height: auto; border-radius: var(--wp--custom--radius--md); aspect-ratio: 1200 / 800; object-fit: cover; }
.dds-hub-header__cover figcaption, .dds-hub-header__cover .dds-fineprint { margin-top: 6px; color: var(--wp--preset--color--on-dark-faint); }
.dds-band-figure { margin: 0; }
.dds-band-image { width: 100%; height: auto; border-radius: var(--wp--custom--radius--md); aspect-ratio: 1200 / 800; object-fit: cover; }

/* -------------------------------------------------------------------- */
/* Cards                                                                 */
/* -------------------------------------------------------------------- */
.dds-card-grid { display: grid; grid-template-columns: 1fr; gap: var(--wp--preset--spacing--30); }
.dds-card { display: flex; flex-direction: column; gap: 10px; color: var(--wp--preset--color--deep); text-decoration: none; }
.dds-card__media { height: 200px; border-radius: var(--wp--custom--radius--md); background: var(--wp--preset--color--placeholder); overflow: hidden; }
.dds-card__media img { width: 100%; height: 100%; object-fit: cover; }
.dds-card__media--placeholder::after { content: ""; }
.dds-card__body { display: flex; flex-direction: column; gap: 8px; }
.dds-card__title { font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--x-large); line-height: 1.2; font-weight: 700; color: var(--wp--preset--color--deep); }
.dds-card__meta { font-size: var(--wp--preset--font-size--x-small); color: var(--wp--preset--color--muted); }
@media (hover: hover) {
	.dds-card:hover .dds-card__title { color: var(--wp--preset--color--teal); }
	.dds-card:hover { transform: translateY(-2px); }
}
.dds-card { transition: transform 0.18s ease; }

.dds-latest-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.dds-latest-list__item { border-top: 1px solid var(--wp--preset--color--line); }
.dds-latest-list__item a { display: flex; flex-direction: column; gap: 4px; padding: 14px 0; text-decoration: none; color: var(--wp--preset--color--deep); }
.dds-latest-list__title { font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: var(--wp--preset--font-size--large); }
.dds-latest-list__meta { font-size: var(--wp--preset--font-size--x-small); color: var(--wp--preset--color--muted); }

.dds-archive-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--wp--preset--spacing--20); }
.dds-archive-list > li { border-top: 1px solid var(--wp--preset--color--line); padding-top: var(--wp--preset--spacing--20); }
.dds-archive-list__title a { text-decoration: none; color: var(--wp--preset--color--deep); }

/* -------------------------------------------------------------------- */
/* Proof grid + Fair Wear                                                */
/* -------------------------------------------------------------------- */
.dds-proof-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.dds-proof-grid__item { padding: 14px; background: var(--wp--preset--color--paper); border: 1px solid var(--wp--preset--color--line); border-radius: var(--wp--custom--radius--md); font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: var(--wp--preset--font-size--medium); }
.dds-proof-grid__note { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--muted); margin: 0; }
.dds-fairwear { padding: 14px; background: var(--wp--preset--color--forest); border-radius: var(--wp--custom--radius--md); color: var(--wp--preset--color--cream); display: flex; flex-direction: column; gap: 6px; }
.dds-fairwear p { margin: 0; color: var(--wp--preset--color--on-dark); font-size: var(--wp--preset--font-size--medium); line-height: 1.5; }

/* -------------------------------------------------------------------- */
/* Games + Gazette                                                       */
/* -------------------------------------------------------------------- */
.dds-games__claim { font-size: var(--wp--preset--font-size--medium); color: var(--wp--preset--color--on-dark); margin: 0; }
.dds-games-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.dds-games-grid__item { padding: 0 0 14px; background: var(--wp--preset--color--forest); border: 1px solid var(--wp--preset--color--teal); border-radius: var(--wp--custom--radius--md); color: var(--wp--preset--color--cream); text-decoration: none; display: flex; flex-direction: column; gap: 4px; overflow: hidden; }
.dds-games-grid__art { width: 100%; aspect-ratio: 1200 / 630; object-fit: cover; }
.dds-games-grid__item .dds-games-grid__name, .dds-games-grid__item .dds-games-grid__note { padding-left: 14px; padding-right: 14px; }
.dds-games-grid__item .dds-games-grid__name { margin-top: 10px; }
.dds-games-grid__name { font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: var(--wp--preset--font-size--medium); }
.dds-games-grid__note { font-size: var(--wp--preset--font-size--x-small); color: var(--wp--preset--color--on-dark-faint); }
.dds-pill--link { border-color: var(--wp--preset--color--deep); }

/* -------------------------------------------------------------------- */
/* Tools band + tool cards                                               */
/* -------------------------------------------------------------------- */
.dds-tools-band { display: flex; flex-direction: column; gap: 12px; }
.dds-tools-band__item {
	min-height: 56px; padding: 0 16px; display: flex; align-items: center; justify-content: space-between;
	background: var(--wp--preset--color--forest); border: 1px solid var(--wp--preset--color--teal);
	border-radius: var(--wp--custom--radius--md); color: var(--wp--preset--color--cream); font-weight: 600; text-decoration: none;
}
.dds-tools-band__arrow { color: var(--wp--preset--color--gold-bright); }
.dds-tool-card { border-top: 1px solid var(--wp--preset--color--line); }
.dds-toolteaser { display: flex; flex-direction: column; gap: 4px; padding: 18px; background: var(--wp--preset--color--forest); border-radius: var(--wp--custom--radius--md); color: var(--wp--preset--color--cream); text-decoration: none; }
.dds-toolteaser__title { font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--large); font-weight: 700; }
.dds-toolteaser__sub { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--on-dark); }

/* -------------------------------------------------------------------- */
/* Header                                                                */
/* -------------------------------------------------------------------- */
.dds-header { position: sticky; top: 0; z-index: 40; }
.dds-utilitybar { display: none; }
.dds-headerbar {
	height: 60px; padding: 0 16px; display: flex; align-items: center; gap: 8px;
	background: var(--wp--preset--color--forest); transition: height 0.2s ease, padding 0.2s ease;
}
.dds-header.is-condensed .dds-headerbar { height: 52px; }
/* WO-175 fix-round (B10 touch targets, MEASURED 22px): the header row is 60px tall but
   align-items:center on .dds-headerbar only centers the logo's own intrinsic-height box inside
   it -- it doesn't stretch the clickable link. min-height + justify-content:center keeps the
   text vertically centred inside a taller, real 44px tap target. */
.dds-logo { flex-grow: 1; display: flex; flex-direction: column; justify-content: center; gap: 2px; min-height: 44px; text-decoration: none; color: var(--wp--preset--color--cream); min-width: 0; }
.dds-logo__kicker { display: none; font-family: var(--wp--preset--font-family--eyebrow); font-size: var(--wp--preset--font-size--x-small); letter-spacing: 0.22em; text-transform: uppercase; color: var(--wp--preset--color--gold); }
.dds-logo__mark { font-family: var(--wp--preset--font-family--display); font-size: 22px; font-weight: 700; line-height: 1; color: var(--wp--preset--color--cream); }
.dds-logo__mark--footer { font-size: var(--wp--preset--font-size--x-large); }

.dds-hubnav { display: none; } /* revealed at desktop breakpoint */
.dds-hubnav__list { list-style: none; display: flex; gap: 28px; margin: 0; padding: 0; }
.dds-hubnav__item { position: relative; }
/* WO-175 fix-round (B10 touch targets, MEASURED 26px at the desktop breakpoint). */
.dds-hubnav__link { color: var(--wp--preset--color--cream); text-decoration: none; font-weight: 500; display: inline-flex; align-items: center; min-height: 44px; }
.dds-hubnav__link--muted { color: var(--wp--preset--color--on-dark-faint); }
.dds-hubnav__panel {
	display: none; position: absolute; top: 100%; left: 0; min-width: 240px; margin-top: 12px;
	padding: 16px; background: var(--wp--preset--color--paper); border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--md); box-shadow: 0 12px 24px rgba(10, 26, 15, 0.18);
	flex-direction: column; gap: 10px;
}
.dds-hubnav__item:hover .dds-hubnav__panel, .dds-hubnav__item:focus-within .dds-hubnav__panel { display: flex; }
.dds-hubnav__panel-title { font-family: var(--wp--preset--font-family--eyebrow); font-size: var(--wp--preset--font-size--x-small); letter-spacing: 0.14em; text-transform: uppercase; color: var(--wp--preset--color--teal); }
.dds-hubnav__panel-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.dds-hubnav__panel-list a, .dds-hubnav__panel-all { color: var(--wp--preset--color--deep); text-decoration: none; font-size: var(--wp--preset--font-size--small); }
.dds-hubnav__panel-empty { margin: 0; font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--muted); font-style: italic; }
.dds-hubnav__panel-all { font-weight: 700; color: var(--wp--preset--color--teal) !important; }

.dds-headerbar__actions { display: flex; align-items: center; gap: 6px; }
.dds-headerbar__shop, .dds-headerbar__newsletter { display: none; }
.dds-iconbtn {
	width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
	background: transparent; border: none; color: var(--wp--preset--color--cream); cursor: pointer; padding: 0;
}
.dds-drawer-toggle { border: 1px solid var(--wp--preset--color--teal); border-radius: var(--wp--custom--radius--sm); }

.dds-searchpanel { display: flex; gap: 8px; padding: 12px 16px; background: var(--wp--preset--color--forest); }
.dds-searchpanel[hidden] { display: none; }
.dds-searchpanel input[type="search"], .wp-block-search__input {
	flex-grow: 1; height: 48px; padding: 0 12px; border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--sm); font-size: 16px; font-family: var(--wp--preset--font-family--body);
}
.dds-searchpanel--inline { background: transparent; padding: 0; }
.wp-block-search { display: flex; gap: 8px; }
.wp-block-search__button { border-radius: var(--wp--custom--radius--sm) !important; background: var(--wp--preset--color--gold-bright) !important; color: var(--wp--preset--color--deep) !important; border: none; font-weight: 700; padding: 0 20px; }
/* [lead, WO-175 C2 2026-09-27] The search block widened the page by 20 px at 390 px on search + 404 (harness scrollWidth):
   a non-wrapping flex row (label + inside-wrapper) whose input kept flex's default min-width:auto. Wrap the label onto its
   own line and let the input shrink. */
.wp-block-search { flex-wrap: wrap; max-width: 100%; }
.wp-block-search__label { flex-basis: 100%; }
.wp-block-search__inside-wrapper { display: flex; gap: 8px; flex: 1 1 100%; min-width: 0; max-width: 100%; }
.wp-block-search__input, .dds-searchpanel input[type="search"] { min-width: 0; }

/* Full-screen mobile drawer */
.dds-drawer { position: fixed; inset: 0; z-index: 100; background: var(--wp--preset--color--deep); }
.dds-drawer[hidden] { display: none; }
.dds-drawer__panel { height: 100%; display: flex; flex-direction: column; padding: 16px; }
.dds-drawer__top { display: flex; align-items: center; justify-content: space-between; }
.dds-drawer__nav { display: flex; flex-direction: column; gap: 4px; margin-top: 24px; }
.dds-drawer__nav a { padding: 14px 4px; font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--x-large); font-weight: 700; color: var(--wp--preset--color--cream); text-decoration: none; border-bottom: 1px solid var(--wp--preset--color--teal); }
.dds-drawer__utility { margin-top: auto; display: flex; flex-direction: column; gap: 10px; padding-top: 24px; }
.dds-drawer__utility a { color: var(--wp--preset--color--on-dark); text-decoration: none; }
.dds-drawer__shop { color: var(--wp--preset--color--gold-bright) !important; font-weight: 700; }

/* -------------------------------------------------------------------- */
/* Footer                                                                */
/* -------------------------------------------------------------------- */
.dds-footer { background: var(--wp--preset--color--deep); color: var(--wp--preset--color--on-dark); padding: var(--wp--preset--spacing--40) 16px var(--wp--preset--spacing--30); }
.dds-footer__grid { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--30); }
.dds-footer__brand p { margin: 4px 0 0; }
.dds-footer__col { display: flex; flex-direction: column; gap: 10px; }
/* WO-175 fix-round (B10 touch targets, MEASURED 32px): a plain unclassed <a> in a gap:10px
   flex column has a tap target equal to its text line-box. */
.dds-footer__col a { color: var(--wp--preset--color--on-dark); text-decoration: none; display: flex; align-items: center; min-height: 44px; }
.dds-footer__legal { margin-top: var(--wp--preset--spacing--30); padding-top: var(--wp--preset--spacing--20); border-top: 1px solid var(--wp--preset--color--teal); display: flex; flex-direction: column; gap: 8px; font-size: var(--wp--preset--font-size--x-small); }
/* WO-175 fix-round (B10 touch targets, MEASURED 21px). */
.dds-footer__legal a { color: var(--wp--preset--color--gold-bright); font-weight: 600; display: flex; align-items: center; min-height: 44px; }

/* WO-175 fix-round (B10 touch targets, MEASURED 26px on .dds-author-box__link).
   NOTE left for whoever styles the B4 article blocks next: none of dds-journal-core's article
   blocks (quick-answer, editorial-standards, key-takeaways, faq, bottom-line, sources,
   author-box, product-context) have ANY rules in this file yet -- they render as unstyled plain
   HTML today. This is the one touch-target fix this fix-round asked for, not a style pass. */
.dds-author-box__link { display: inline-flex; align-items: center; min-height: 44px; }
/* WO-175 fix-round (B10 touch targets, MEASURED 32px on the FAQ block's <summary>, dds-faq__item). */
.dds-faq__item > summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; }

/* -------------------------------------------------------------------- */
/* Article (single) + TOC                                                */
/* -------------------------------------------------------------------- */
.dds-progress { height: 3px; background: var(--wp--preset--color--deep); }
.dds-progress__bar { height: 3px; width: 0%; background: var(--wp--preset--color--gold-bright); transform-origin: left; }

.dds-article { padding: 0 16px; }
.dds-article__intro { display: flex; flex-direction: column; gap: 14px; padding-top: 20px; }
.dds-breadcrumb { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--muted); display: flex; align-items: center; flex-wrap: wrap; }
/* WO-175 fix-round (B10 touch targets, MEASURED 17px). */
.dds-breadcrumb a { color: var(--wp--preset--color--muted); display: inline-flex; align-items: center; min-height: 44px; }
.dds-article__title { font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--display); line-height: 1.12; font-weight: 700; margin: 0; }
.dds-article__lead { font-size: var(--wp--preset--font-size--medium); line-height: 1.5; color: var(--wp--preset--color--ink-soft); margin: 0; }
.dds-article__byline { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--wp--preset--color--line); border-bottom: 1px solid var(--wp--preset--color--line); }
.dds-byline .wp-block-post-author__avatar img { border-radius: 999px; }
.dds-article__media { margin: 20px 0 0; border-radius: var(--wp--custom--radius--md); overflow: hidden; }
.dds-article__media img { width: 100%; height: auto; }
.dds-article__body { padding: 24px 16px; font-size: var(--wp--preset--font-size--medium); line-height: 1.7; color: var(--wp--preset--color--ink); }
.dds-article__body :is(h2, h3) { font-family: var(--wp--preset--font-family--display); scroll-margin-top: 76px; }
.dds-article__body table { width: 100%; border-collapse: collapse; font-size: var(--wp--preset--font-size--small); }
.dds-article__body table th, .dds-article__body table td { padding: 10px 12px; border: 1px solid var(--wp--preset--color--line); text-align: left; }
.dds-article__body details { padding: 14px 16px; background: var(--wp--preset--color--paper); border: 1px solid var(--wp--preset--color--line); border-radius: var(--wp--custom--radius--md); }
.dds-article__body details + details { margin-top: 8px; }
/* WO-175 fix-round (B10 axe color-contrast). The 152 real imported posts carry inline
   `style="color:#fbbf24"` / `#fcd34d` (Tailwind amber-400/300, NOT a DDS brand token -- the
   theme never emits either hex anywhere) baked into their stored post_content from the
   original site (MEASURED: e.g. the GOTS-guide links and "24.99 USD" price on
   /2026/09/25/verify-dds-boston-certifications.../, and an inline-styled "Frequently Asked
   Questions" <h3>). Both fail contrast against this theme's cream article background --
   1.59:1 and 1.37:1 measured, need 3:1/4.5:1. This is CONTENT, not theme or plugin markup, so
   it is out of this fix-round's edit scope (dds-journal/dds-journal-core only) to change at
   the source; flagged for the content/import side separately. An inline `style` attribute
   otherwise always wins over an external stylesheet regardless of selector specificity, so a
   defensive `!important` override here is the only lever the THEME has to guarantee body-text
   contrast for content it does not control. Scoped to exactly the two measured hex values --
   never a blanket color override -- so a future legitimate inline colour is not silently
   defeated too. NOT scoped to .dds-article__body: MEASURED the "Frequently Asked Questions"
   <h3> carrying this exact defect renders OUTSIDE .dds-article__body (inside the
   product-context card's own embedded content), so a container-scoped version of this rule
   missed it -- this pattern can appear anywhere post/product content is rendered, not only the
   main article body. */
[style*="color:#fbbf24" i],
[style*="color: #fbbf24" i],
[style*="color:#fcd34d" i],
[style*="color: #fcd34d" i] { color: var(--wp--preset--color--ink) !important; }
.dds-article__body summary { font-weight: 700; cursor: pointer; }

.dds-toc { padding: 14px 16px; background: var(--wp--preset--color--deep); border-radius: var(--wp--custom--radius--md); color: var(--wp--preset--color--cream); }
/* WO-175 fix-round (B10 touch targets, MEASURED 32px on the summary, 21px per link). */
.dds-toc__summary { font-weight: 700; cursor: pointer; display: flex; align-items: center; min-height: 44px; }
.dds-toc__nav { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.dds-toc__link { color: var(--wp--preset--color--cream); text-decoration: none; font-size: var(--wp--preset--font-size--small); display: flex; align-items: center; min-height: 44px; }
.dds-toc__link--h3 { padding-left: 14px; color: var(--wp--preset--color--on-dark); }
.dds-toc__link.is-active { color: var(--wp--preset--color--gold-bright); font-weight: 700; }

/* -------------------------------------------------------------------- */
/* Motion (B9): transform-only, content never opacity:0, fail-open       */
/* -------------------------------------------------------------------- */
.dds-reveal { transform: translateY(12px); }
@supports (animation-timeline: view()) {
	.dds-reveal {
		animation: dds-reveal-in linear both;
		animation-timeline: view();
		animation-range: entry 0% cover 30%;
	}
}
@keyframes dds-reveal-in { from { transform: translateY(12px); } to { transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
	.dds-reveal { transform: none; animation: none; }
}

/* -------------------------------------------------------------------- */
/* Breakpoint: tablet (>=768px)                                          */
/* -------------------------------------------------------------------- */
@media (min-width: 768px) {
	.dds-utilitybar { display: flex; align-items: center; justify-content: space-between; height: 36px; padding: 0 32px; background: var(--wp--preset--color--deep); color: var(--wp--preset--color--on-dark-faint); font-size: var(--wp--preset--font-size--x-small); }
	.dds-utilitybar__links { display: flex; gap: 20px; }
	.dds-utilitybar a { color: var(--wp--preset--color--on-dark); }
	.dds-utilitybar__shop { color: var(--wp--preset--color--gold-bright) !important; font-weight: 600; }
	/* WO-175 fix-round (B10 touch targets, MEASURED 21px). First attempt used an invisible
	   ::after to enlarge only the hit-test area without growing the visible 36px bar -- reads
	   right for a human but a pseudo-element doesn't change the <a>'s own getBoundingClientRect,
	   so it still measures as a violation. The requirement is the element's real box, so the
	   element has to actually be that tall; the bar grows to fit rather than clipping it. */
	.dds-utilitybar { height: auto; min-height: 44px; }
	.dds-utilitybar a { display: inline-flex; align-items: center; min-height: 44px; }

	.dds-headerbar { height: 76px; padding: 0 32px; gap: 32px; }
	.dds-header.is-condensed .dds-headerbar { height: 60px; }
	.dds-logo__kicker { display: block; }

	.dds-hubnav { display: block; }
	.dds-drawer-toggle { display: none; }

	.dds-headerbar__shop { display: inline-flex; }

	.dds-section, .dds-hero, .dds-hub-header { padding: var(--wp--preset--spacing--70) 32px; }
	.dds-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.dds-proof-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.dds-games-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.dds-hero__ctas { flex-direction: row; }

	.dds-article { padding: 0 32px; }

	.dds-footer__grid { flex-direction: row; justify-content: space-between; align-items: flex-start; }
	.dds-footer__legal { flex-direction: row; justify-content: space-between; }
}

/* -------------------------------------------------------------------- */
/* Breakpoint: desktop (>=1200px, ~1440 canvas)                          */
/* -------------------------------------------------------------------- */
@media (min-width: 1200px) {
	.dds-utilitybar, .dds-headerbar { padding-left: 64px; padding-right: 64px; }
	.dds-headerbar__newsletter { display: inline-flex; }

	.dds-section, .dds-hero, .dds-hub-header { padding: var(--wp--preset--spacing--80) 64px; }
	.dds-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

	/* Sticky TOC on desktop — see the four V6 traps note in inc/blocks.php
	 * and assets/js/toc.js. overflow lives on the article body wrapper's
	 * ancestor set to visible; no ancestor of .dds-toc carries transform,
	 * filter or contain; top offset is set explicitly. */
	.dds-article__intro { display: grid; grid-template-columns: 1fr 280px; gap: 40px; align-items: start; }
	.dds-toc { position: sticky; top: 88px; align-self: start; grid-column: 2; grid-row: 1 / -1; }

	.dds-article__body { padding: 40px 0; max-width: 720px; margin: 0 auto; }
}