/* Supplemental rules layered on top of the extracted design system
   (dom-design.css): nav dropdowns + mobile drawer + a couple of blocks whose
   markup the collapsed React render didn't emit. Uses the same design tokens. */

/* Arrows inside buttons/links: a crisp SVG icon painted in the label's own
   colour (currentColor) via a CSS mask. Sized to the text (1em) and vertically
   centred by each button's flex/inline-middle alignment, so the arrow always
   sits at the exact vertical centre and never touches the top/bottom border.
   The stroke-width in the SVG (3 of 24) gives the bold, clearly-visible look. */
.dom-arrow {
  --dom-arrow-src: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
  display: inline-block; vertical-align: middle; flex: none;
  width: 1.05em; height: 1.05em;
  background-color: currentColor;
  -webkit-mask: var(--dom-arrow-src) center / contain no-repeat;
  mask: var(--dom-arrow-src) center / contain no-repeat;
}
.dom-arrow--left {
  --dom-arrow-src: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M11 6l-6 6 6 6'/%3E%3C/svg%3E");
}
.dom-arrow--down {
  --dom-arrow-src: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M6 13l6 6 6-6'/%3E%3C/svg%3E");
}

/* ── Search page ── */
.dom-search-hero { text-align: center; max-width: 640px; margin: 4px auto 0; }
.dom-search-eyebrow { display: inline-block; font: 700 12px var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--color-accent-hover); margin-bottom: 10px; }
.dom-search-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(28px, 3.4vw, 38px); line-height: 1.1; color: var(--text-heading); margin: 0 0 8px; }
.dom-search-sub { color: var(--text-muted); font-size: 15.5px; line-height: 1.6; margin: 0; }
.dom-search-bar {
  display: flex; align-items: center; gap: 8px;
  max-width: 600px; margin: 22px auto 0;
  background: var(--surface-card); border: 1px solid var(--border-default);
  border-radius: 999px; padding: 6px 6px 6px 20px;
  box-shadow: 0 12px 30px -22px rgba(15, 23, 42, 0.4);
  transition: border-color .18s var(--ease-out), box-shadow .18s var(--ease-out);
}
.dom-search-bar:focus-within { border-color: var(--color-secondary); box-shadow: 0 0 0 4px rgba(43, 108, 176, .15); }
.dom-search-ic { display: inline-flex; flex: none; color: var(--text-muted); }
.dom-search-bar input { flex: 1; min-width: 0; border: none; outline: none; box-shadow: none; -webkit-appearance: none; appearance: none; background: transparent; font: 400 16px var(--font-body); color: var(--text-body); padding: 12px 4px; }
.dom-search-bar input:focus { outline: none; box-shadow: none; }
.dom-search-bar button { flex: none; background: var(--color-primary); color: #fff; border: none; border-radius: 999px; padding: 12px 28px; font: 600 15px var(--font-body); cursor: pointer; transition: background .18s var(--ease-out); }
.dom-search-bar button:hover { background: var(--color-secondary); }

.dom-search-count { color: var(--text-muted); font-size: 15px; margin: 32px 0 18px; }
.dom-search-count strong { color: var(--text-heading); }

.dom-search-empty { text-align: center; max-width: 640px; margin: 0 auto; padding: 52px 20px 24px; }
.dom-search-empty__icon { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background: var(--color-primary-soft); color: var(--color-primary); margin-bottom: 18px; }
.dom-search-empty__text { font: 700 19px var(--font-display); color: var(--text-heading); margin: 0 0 6px; }
.dom-search-empty__hint { color: var(--text-muted); font-size: 14.5px; line-height: 1.6; margin: 0; }
.dom-search-topics { margin-top: 28px; }
.dom-search-topics__label { display: block; font: 700 11px var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--color-accent-hover); margin-bottom: 14px; }
.dom-search-topics__chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.dom-search-chip { display: inline-flex; padding: 9px 18px; border-radius: 999px; border: 1px solid var(--border-default); background: var(--surface-card); font: 600 13.5px var(--font-body); color: var(--color-primary); transition: color .18s, background .18s, border-color .18s; }
.dom-search-chip:hover { border-color: var(--color-primary); background: var(--color-primary); color: #fff; }

/* Category page — navy hero band + section nav chips. */
.dom-cat-hero { background: var(--surface-inverse); color: #fff; position: relative; overflow: hidden; }
.dom-cat-hero::after { content: ""; position: absolute; right: -80px; top: -80px; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(closest-side, rgba(212,175,55,0.18), rgba(212,175,55,0)); pointer-events: none; }
.dom-cat-hero__inner { position: relative; z-index: 1; padding-top: clamp(28px, 5vw, 52px); padding-bottom: clamp(28px, 5vw, 52px); }
.dom-cat-bc { font: 500 13px var(--font-body); color: rgba(255,255,255,0.6); margin-bottom: 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dom-cat-bc a { color: rgba(255,255,255,0.72); }
.dom-cat-bc a:hover { color: #fff; }
.dom-cat-bc span[aria-hidden] { opacity: .4; }
.dom-cat-eyebrow { display: inline-block; font: 600 12px var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-accent); }
.dom-cat-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(32px, 4.4vw, 52px); line-height: 1.06; letter-spacing: -0.01em; color: #fff; margin: 10px 0 0; }
.dom-cat-sub { max-width: 62ch; margin: 14px 0 0; font: 400 17px/1.65 var(--font-body); color: rgba(255,255,255,0.78); }
.dom-cat-meta { margin-top: 20px; display: flex; align-items: center; gap: 12px; }
.dom-cat-count { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.16); font: 500 13px var(--font-body); color: rgba(255,255,255,0.9); }
.dom-cat-count strong { font-weight: 700; color: #fff; }

.dom-cat-nav { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 28px; padding-bottom: 24px; border-bottom: 1px solid var(--border-default); }
.dom-cat-chip { display: inline-flex; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--border-default); background: var(--surface-card); font: 600 13px var(--font-body); color: var(--text-body); transition: color .18s, background .18s, border-color .18s; }
.dom-cat-chip:hover { border-color: var(--color-primary); color: var(--color-primary); }
.dom-cat-chip.is-active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.dom-cat-chip.is-active:hover { color: #fff; }

/* Admin draft-preview toolbar (article page, ?preview=1) — full-width navy bar. */
.dom-preview-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; background: var(--color-primary); color: #fff; padding: 10px clamp(16px, 4vw, 48px); font: 600 13.5px var(--font-body); }
.dom-preview-bar__label { color: rgba(255,255,255,.85); }
.dom-preview-bar__label strong { color: var(--color-accent); }
.dom-preview-bar__actions { display: flex; align-items: center; gap: 10px; }
.dom-preview-bar__actions form { margin: 0; }
.dom-preview-bar__btn { display: inline-flex; align-items: center; gap: 7px; padding: 7px 16px; border-radius: 8px; font: 600 13px var(--font-body); color: #fff; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.3); text-decoration: none; cursor: pointer; }
.dom-preview-bar__btn:hover { background: rgba(255,255,255,.24); }
.dom-preview-bar__btn--pub { background: var(--color-accent); color: var(--color-primary); border-color: var(--color-accent); }
.dom-preview-bar__btn--pub:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); }

/* Footer link columns — brand + section lists. Stacks to 2 columns on tablets
   and phones (the desktop auto-fit + 220px brand track overflows narrow screens). */
.dom-foot-cols { display: grid; grid-template-columns: minmax(220px, 1.4fr) repeat(auto-fit, minmax(160px, 1fr)); gap: 40px; }
@media (max-width: 900px) { .dom-foot-cols { grid-template-columns: 1fr 1fr; gap: 30px 24px; } }
@media (max-width: 380px) { .dom-foot-cols { grid-template-columns: 1fr; gap: 26px; } }

/* Preview only: an extra Back-to-editor button at the foot of the article. */
.dom-preview-foot { display: flex; justify-content: center; margin: 8px auto 44px; padding: 0 20px; }
.dom-preview-foot__btn { display: inline-flex; align-items: center; gap: 8px; font: 700 15px var(--font-body); color: var(--color-primary); background: var(--surface-card, #fff); border: 1.5px solid var(--border-default); border-radius: 999px; padding: 12px 26px; text-decoration: none; transition: background .18s, border-color .18s; }
.dom-preview-foot__btn:hover { background: var(--color-primary-soft, #eef2f7); border-color: #b9c4d2; }

/* Diversity News — hero "Back to Home", listing item cards, and the item page. */
.dom-news-back { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.35); color: #fff; font: 600 14px var(--font-body); text-decoration: none; transition: background .18s, border-color .18s; }
.dom-news-back:hover { background: rgba(255,255,255,0.1); border-color: #fff; }
.dom-news-list { display: flex; flex-direction: column; gap: 22px; }
.dom-news-item { background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-card, 16px); padding: 24px 28px; }
/* Heading = the item's Title, shown like the reference's gold date label. */
.dom-news-item__head { font: 700 13px var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent-hover); margin-bottom: 12px; }
/* Compound selector (.dom-art-body.dom-news-item__body) so the smaller news
   type beats the 19px .dom-art-body base regardless of source order. */
.dom-art-body.dom-news-item__body { font-size: 16px; line-height: 1.7; }
.dom-art-body.dom-news-item__body p { margin: 0 0 16px; line-height: 1.7; }
.dom-art-body.dom-news-item__body > *:last-child { margin-bottom: 0; }
.dom-art-body.dom-news-item__body h2,
.dom-art-body.dom-news-item__body h3 { font-size: clamp(18px, 2vw, 20px); margin: 20px 0 10px; }
@media (max-width: 560px) { .dom-art-body.dom-news-item__body { font-size: 15px; } }

/* Article masthead — breadcrumb, category tag, heading, author chip, share. */
.dom-art-bc { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font: 500 13px var(--font-body); color: var(--text-muted); margin-bottom: 20px; }
.dom-art-bc a { color: var(--text-muted); }
.dom-art-bc a:hover { color: var(--color-primary); }
.dom-art-bc__sep { width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-top: 1.5px solid currentColor; transform: rotate(45deg); opacity: .45; }
.dom-art-bc__cur { color: var(--text-heading); font-weight: 600; }

.dom-art-tag { display: inline-flex; align-items: center; padding: 5px 13px; border-radius: 999px; background: var(--color-accent-soft); color: var(--color-accent-hover); font: 700 11.5px var(--font-body); letter-spacing: 0.09em; text-transform: uppercase; }
.dom-art-tag:hover { background: var(--color-accent); color: var(--color-primary); }
.dom-art-h1 { font-family: var(--font-display); font-size: clamp(32px, 4.4vw, 50px); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; margin: 14px 0 20px; color: var(--text-heading); text-wrap: balance; }

.dom-art-meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding-bottom: 20px; margin-bottom: 28px; border-bottom: 1px solid var(--border-default); }
.dom-art-author { display: inline-flex; align-items: center; gap: 11px; }
.dom-art-author__ava { width: 42px; height: 42px; border-radius: 50%; overflow: hidden; flex: none; display: block; box-shadow: 0 0 0 1px var(--border-default); }
.dom-art-author__ava img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dom-art-author__mono { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: var(--color-primary); color: #fff; font: 700 17px var(--font-display); }
.dom-art-author__txt { display: flex; flex-direction: column; line-height: 1.25; }
.dom-art-author__name { font: 700 15px var(--font-body); color: var(--text-heading); }
.dom-art-author:hover .dom-art-author__name { color: var(--color-secondary); }
.dom-art-author__role { font: 600 11px var(--font-body); letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-accent-hover); }
.dom-art-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--border-strong, #cbd5e1); flex: none; }
.dom-art-when { font: 400 13.5px var(--font-body); color: var(--text-muted); }

/* Public pagination (news / search / category / author listings). Kaminari
   emits Bootstrap-style markup (ul.pagination > li.page-item > a.page-link);
   reset the list bullets and render tidy square page buttons. */
.dom-pagination { margin-top: 32px; }
.dom-pagination nav { display: flex; justify-content: center; }
.dom-pagination ul.pagination {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px;
  list-style: none; margin: 0; padding: 0;
}
.dom-pagination .page-item { display: inline-flex; margin: 0; }
.dom-pagination .page-link {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px; padding: 0 13px; box-sizing: border-box;
  border: 1px solid var(--border-default); border-radius: 10px;
  background: var(--surface-card); color: var(--color-primary);
  font: 600 14px var(--font-body); line-height: 1; text-decoration: none;
  transition: background .15s, border-color .15s, color .15s;
}
.dom-pagination .page-link:hover { background: var(--color-primary-soft); border-color: var(--color-secondary); }
.dom-pagination .page-item.active .page-link {
  background: var(--color-primary); border-color: var(--color-primary); color: #fff; cursor: default;
}
.dom-pagination .page-item.disabled .page-link {
  opacity: .45; pointer-events: none; background: var(--surface-card);
}

/* ── Homepage "Latest Articles" — horizontal card (image left, content right)
   with a footer row: read-time · like · Read More. Matches the reference. ── */
.dom-lcard { display: flex; flex-direction: column; }
.dom-lcard__main {
  display: flex; gap: 24px; align-items: stretch; padding: 22px; text-decoration: none;
  background: var(--surface-card); border: 1px solid var(--border-default);
  border-radius: var(--radius-card, 16px);
  transition: box-shadow .25s var(--ease-out), transform .25s var(--ease-out), border-color .25s var(--ease-out);
}
.dom-lcard__main:hover { border-color: rgba(212,175,55,.45); box-shadow: 0 14px 34px -18px rgba(11,31,58,.45); transform: translateY(-2px); }
.dom-lcard__media { flex: 0 0 210px; }
.dom-lcard__media img { width: 100%; height: 100%; min-height: 150px; object-fit: cover; border-radius: 12px; display: block; background: var(--color-primary-soft); }
.dom-lcard__media:empty { border-radius: 12px; background: var(--color-primary-soft); min-height: 160px; }
.dom-lcard__text { display: flex; flex-direction: column; min-width: 0; }
.dom-lcard__cat { font: 600 12px var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--color-accent-hover); margin-bottom: 6px; }
.dom-lcard__title { font: 700 22px var(--font-display); line-height: 1.2; letter-spacing: -0.01em; color: var(--text-heading); margin-bottom: 10px; }
.dom-lcard__excerpt { font: 400 15px var(--font-body); line-height: 1.6; color: var(--text-body); margin-bottom: 12px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.dom-lcard__meta { font: 400 13px var(--font-body); color: var(--text-muted); margin-top: auto; }
.dom-lcard__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; padding: 0 4px; }
.dom-lcard__time { font: 500 13px var(--font-body); color: var(--text-muted); }
.dom-lcard__like {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  background: var(--surface-card); border: 1px solid var(--border-default); border-radius: 999px;
  padding: 7px 16px; font: 600 14px var(--font-body); color: var(--text-heading);
  transition: color .18s, border-color .18s, background .18s;
}
.dom-lcard__like:hover { border-color: var(--color-accent); }
.dom-lcard__like .dom-like-heart { display: inline-flex; }
.dom-lcard__like .dom-like-heart svg { width: 18px; height: 18px; }
.dom-lcard__like[aria-pressed="true"] { color: #e0245e; border-color: #e0245e; }
.dom-lcard__like[aria-pressed="true"] .dom-like-heart svg { fill: #e0245e; stroke: #e0245e; }
@media (max-width: 640px) {
  .dom-lcard__main { flex-direction: column; gap: 16px; }
  .dom-lcard__media { flex-basis: auto; }
  .dom-lcard__media img { height: 200px; }
}

/* Homepage "Explore the Magazine" / "Diversity Executive Jobs" category cards
   (gold accent bar + serif heading). Matches the design's CategoryCard hover. */
.dom-catcard {
  text-decoration: none; display: block;
  transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.dom-catcard:hover {
  box-shadow: 0 10px 26px -14px rgba(11,31,58,0.4);
  transform: translateY(-2px);
  border-color: rgba(212,175,55,0.45) !important;
}

/* Registration form (design's `dom-reg` — the original Ezine Director
   subscription form, restyled to the new design tokens). */
.dom-reg { background: var(--surface-card); border: 1px solid var(--border-default); border-radius: 16px; padding: 24px; margin: 8px 0 24px; display: flex; flex-direction: column; gap: 16px; }
.dom-reg-row { display: flex; gap: 16px; flex-wrap: wrap; }
.dom-reg-f { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 200px; font: 600 13px var(--font-body); color: var(--text-heading); }
.dom-reg-wide { flex-basis: 100%; }
.dom-reg-f input, .dom-reg-f select { font: 400 15px var(--font-body); color: var(--text-body); border: 1px solid var(--border-default); border-radius: 10px; padding: 10px 12px; background: #fff; }
.dom-reg-f input:focus, .dom-reg-f select:focus { outline: none; border-color: var(--color-secondary); box-shadow: var(--focus-ring, 0 0 0 3px rgba(43,108,176,.35)); }
.dom-reg-fs { border: 1px solid var(--border-default); border-radius: 12px; padding: 12px 16px; display: flex; gap: 20px; flex-wrap: wrap; font: 400 14px var(--font-body); color: var(--text-body); }
.dom-reg-fs legend { font: 600 13px var(--font-body); color: var(--text-heading); padding: 0 6px; }
.dom-reg-fs label { display: flex; align-items: center; gap: 6px; }
.dom-reg-btn { align-self: flex-start; font: 600 15px var(--font-body); color: #fff; background: var(--color-primary); border: none; border-radius: 12px; padding: 12px 28px; cursor: pointer; transition: background .2s; }
.dom-reg-btn:hover { background: var(--color-secondary); }
.dom-reg-note { font: 400 13px/1.5 var(--font-body); color: var(--text-muted); margin: 0; }
.dom-reg-done { background: #F0FDF4; border: 1px solid #BBF7D0; border-radius: 16px; padding: 24px; font: 400 15px var(--font-body); color: #166534; margin: 8px 0 24px; }

/* reCAPTCHA widget — breathing room before the submit button on every public
   form (registration, contact, article/contact comment modals). */
.g-recaptcha { margin: 8px 0 20px; }

/* ── Public auth (Sign Up / Sign In) ── */
.dom-auth-card { background: var(--surface-card); border: 1px solid var(--border-default); border-radius: 18px; padding: 34px 36px; box-shadow: 0 24px 60px -28px rgba(15,23,42,.45); }
.dom-auth-title { font-family: var(--font-display); font-size: 28px; font-weight: 700; margin: 0 0 6px; color: var(--text-heading); }
.dom-auth-sub { color: var(--text-muted); font-size: 15px; margin: 0 0 20px; }

/* ── DCA-style auth header: centered badge → title → subtitle → gold accent bar ── */
.dom-auth-head { text-align: center; margin-bottom: 24px; }
.dom-auth-badge { display: inline-flex; align-items: center; justify-content: center; width: 58px; height: 58px; border-radius: 50%; background: var(--color-primary); color: #fff; border: 2.5px solid var(--color-accent); box-shadow: 0 8px 20px rgba(22,58,95,.24); margin-bottom: 16px; }
.dom-auth-head .dom-auth-title { margin: 0 0 8px; }
.dom-auth-head .dom-auth-sub { margin: 0 auto; max-width: 42ch; }
.dom-auth-accent { display: block; width: 54px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--color-accent), var(--color-accent-hover)); margin: 16px auto 0; }

/* Inputs with a leading icon (mail / user / lock) — the DCA field structure. */
.dom-auth-ivf { position: relative; display: block; }
.dom-auth-ic { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; display: inline-flex; }
.dom-auth-form { display: flex; flex-direction: column; gap: 14px; }
/* Two-column variant (sign up) — wider card, fewer rows, less height. */
.dom-auth-form--grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; align-items: start; }
.dom-auth-form--grid .dom-auth-span { grid-column: 1 / -1; }
.dom-pw-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 6px; }
.dom-pw-head .dom-pw-strength { margin: 0; }
.dom-pw-head .dom-pw-match { margin: 0; }
@media (max-width: 560px) { .dom-auth-form--grid { grid-template-columns: 1fr; } }
.dom-auth-field { display: flex; flex-direction: column; gap: 6px; font: 600 13px var(--font-body); color: var(--text-heading); }
.dom-auth-field input { font: 400 15px var(--font-body); color: var(--text-body); background: var(--surface-page, #F8FAFC); border: 1px solid var(--border-default); border-radius: 10px; padding: 11px 13px; width: 100%; box-sizing: border-box; }
.dom-auth-field input:focus { outline: none; background: #fff; border-color: var(--color-secondary); box-shadow: var(--focus-ring, 0 0 0 3px rgba(43,108,176,.35)); }
.dom-pw-wrap { position: relative; display: block; }
.dom-pw-wrap input { padding-right: 64px; }
/* Leave room for the leading icon. Declared AFTER the base `.dom-auth-field
   input` shorthand padding so the 42px left padding wins — otherwise the typed
   text sits on top of the icon. */
.dom-auth-ivf input, .dom-pw-wrap input { padding-left: 42px; }
.dom-pw-toggle { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); border: none; background: transparent; color: var(--color-secondary); font: 600 12px var(--font-body); cursor: pointer; padding: 6px 8px; }
.dom-pw-meter { height: 6px; border-radius: 999px; background: var(--border-default); overflow: hidden; margin-top: 2px; }
.dom-pw-meter__bar { display: block; height: 100%; width: 0; border-radius: 999px; transition: width .2s, background .2s; }
.dom-pw-meter__bar.is-weak   { width: 33%; background: #DC2626; }
.dom-pw-meter__bar.is-medium { width: 66%; background: #D97706; }
.dom-pw-meter__bar.is-strong { width: 100%; background: #16A34A; }
.dom-pw-strength { font: 600 12px var(--font-body); color: var(--text-muted); }
.dom-pw-rules { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; font: 500 12px var(--font-body); color: var(--text-muted); }
.dom-pw-rules li { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; background: var(--color-primary-soft, #EEF2F7); border: 1px solid var(--border-default); white-space: nowrap; }
.dom-pw-rules li::before { content: "○"; color: var(--text-muted); font-size: 11px; }
.dom-pw-rules li.is-ok { color: #16A34A; background: #F0FDF4; border-color: #BBF7D0; }
.dom-pw-rules li.is-ok::before { content: "✓"; color: #16A34A; }
.dom-pw-match { font: 600 12.5px var(--font-body); min-height: 16px; margin-top: -4px; }
.dom-pw-match.is-ok  { color: #16A34A; }
.dom-pw-match.is-ok::before  { content: "✓ "; }
.dom-pw-match.is-bad { color: #DC2626; }
.dom-pw-match.is-bad::before { content: "✕ "; }
.dom-auth-recaptcha { margin: 2px 0; }
.dom-auth-remember { display: flex; align-items: center; gap: 8px; font: 400 14px var(--font-body); color: var(--text-body); }
.dom-auth-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 700 15.5px var(--font-body); color: var(--color-primary); background: linear-gradient(135deg, var(--color-accent), var(--color-accent-hover)); border: none; border-radius: var(--radius-button); padding: 14px 24px; cursor: pointer; box-shadow: 0 10px 24px rgba(212,175,55,.3); transition: filter .2s, transform .15s, opacity .2s; }
.dom-auth-btn:hover { filter: brightness(1.05); transform: translateY(-1px); }
.dom-auth-btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; transform: none; filter: none; }
.dom-auth-back { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; box-sizing: border-box; margin-top: 14px; font: 600 14px var(--font-body); color: var(--text-heading); background: transparent; border: 1px solid var(--border-default); border-radius: var(--radius-button); padding: 11px 20px; cursor: pointer; text-decoration: none; transition: background .18s, border-color .18s; }
.dom-auth-back:hover { background: var(--color-primary-soft, #EEF2F7); border-color: #b9c4d2; text-decoration: none; }
.dom-auth-back .dom-arrow { line-height: 1; }
.dom-auth-alt { margin: 18px 0 0; font-size: 14px; color: var(--text-muted); text-align: center; }
.dom-auth-alt a { color: var(--color-secondary); font-weight: 600; text-decoration: none; }
.dom-auth-alert { background: #FEF2F2; border: 1px solid #FECACA; color: #B91C1C; border-radius: 10px; padding: 11px 14px; font-size: 14px; margin: 0 0 16px; }

/* ── Auth redesign: eye toggle, remember row, terms, secure note, 2-col sign-up
   panel, and the single Newsletter card below the forms. ── */
.dom-auth-wrap { display: flex; flex-direction: column; }
.dom-pw-wrap input { padding-right: 46px; }
.dom-pw-toggle--icon { color: var(--text-muted); padding: 6px; display: inline-flex; align-items: center; }
.dom-pw-toggle--icon svg { width: 19px; height: 19px; }
.dom-pw-toggle--icon:hover { color: var(--color-secondary); }
.dom-pw-toggle--icon[aria-pressed="true"] { color: var(--color-secondary); }

.dom-auth-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.dom-auth-forgot { font: 600 13.5px var(--font-body); color: var(--color-secondary); text-decoration: none; }

.dom-auth-terms { display: flex; align-items: flex-start; gap: 9px; font: 400 13.5px/1.5 var(--font-body); color: var(--text-body); }
.dom-auth-terms input { margin-top: 2px; flex: none; }
.dom-auth-terms a { color: var(--color-secondary); font-weight: 600; text-decoration: none; }

.dom-auth-secure { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 14px 0 0; font: 400 12.5px/1.5 var(--font-body); color: var(--text-muted); text-align: center; }
.dom-auth-secure svg { color: var(--color-accent-hover); flex: none; }

/* Two-column sign-up card */
.dom-auth-split {
  display: grid; grid-template-columns: 0.92fr 1.08fr; background: var(--surface-card);
  border: 1px solid var(--border-default); border-radius: 20px; overflow: hidden;
  box-shadow: 0 24px 60px -28px rgba(15,23,42,.45);
}
.dom-auth-aside {
  background: var(--color-primary); color: #fff; padding: 40px 36px;
  display: flex; flex-direction: column; gap: 28px;
  background-image: radial-gradient(120% 60% at 100% 0%, rgba(212,175,55,.14), transparent 60%);
}
.dom-auth-aside__mark { font-family: var(--font-display); font-weight: 700; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--color-accent); }
.dom-auth-aside__markb { font: 600 9px var(--font-body); letter-spacing: .32em; text-transform: uppercase; color: rgba(255,255,255,.6); margin-top: 3px; }
.dom-auth-aside__main { margin-top: auto; }
.dom-auth-aside__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(30px, 3.4vw, 40px); line-height: 1.08; margin: 0; color: #fff; }
.dom-auth-accent--left { margin: 16px 0 0; }
.dom-auth-aside__desc { margin: 20px 0 0; font: 400 15px/1.65 var(--font-body); color: rgba(255,255,255,.8); }
.dom-auth-benefits { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.dom-auth-benefits li { display: flex; align-items: center; gap: 12px; font: 600 14px var(--font-body); color: #fff; }
.dom-auth-benefit__ic { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 9px; background: rgba(255,255,255,.1); color: var(--color-accent); }
.dom-auth-aside__quote { margin: 0; padding-left: 16px; border-left: 2px solid var(--color-accent); font: 400 13.5px/1.6 var(--font-body); color: rgba(255,255,255,.72); }
.dom-auth-panel { padding: 40px 40px 34px; display: flex; flex-direction: column; }
@media (max-width: 720px) {
  .dom-auth-split { grid-template-columns: 1fr; }
  .dom-auth-aside { padding: 32px 28px; gap: 20px; }
  .dom-auth-aside__main { margin-top: 0; }
  .dom-auth-panel { padding: 30px 26px 28px; }
}

/* Newsletter card below the forms */
.dom-auth-perks { margin: 22px auto 0; width: 100%; max-width: 460px; }
.dom-auth-perk {
  display: flex; align-items: center; gap: 14px; padding: 16px 18px;
  background: var(--surface-card); border: 1px solid var(--border-default); border-radius: 14px;
  text-decoration: none; transition: border-color .18s, box-shadow .18s, transform .18s;
}
.dom-auth-perk:hover { border-color: var(--color-accent); box-shadow: 0 14px 30px -18px rgba(15,23,42,.4); transform: translateY(-2px); }
.dom-auth-perk__ic { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: var(--color-accent-soft); color: var(--color-accent-hover); }
.dom-auth-perk__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.dom-auth-perk__t { font-family: var(--font-display); font-weight: 700; font-size: 15.5px; color: var(--text-heading); }
.dom-auth-perk__d { font: 400 13px/1.5 var(--font-body); color: var(--text-muted); }
.dom-auth-perk__arrow { flex: none; color: var(--color-accent-hover); }
.dom-flash {
  /* Shrink to the text rather than spanning the grid, and sit centred at
     the top of the page. min() keeps it inside the viewport on mobile. */
  width: fit-content; max-width: min(92vw, 680px);
  margin: 16px auto 0; padding: 12px 20px;
  border-radius: 10px; font: 500 14px/1.5 var(--font-body);
  text-align: center; box-shadow: 0 6px 18px -12px rgba(11, 31, 58, .35);
}
.dom-flash--notice { background: #F0FDF4; border: 1px solid #BBF7D0; color: #166534; }
.dom-flash--alert  { background: #FEF2F2; border: 1px solid #FECACA; color: #B91C1C; }

/* ── "Show More" buttons (Browse the Magazine + footer Explore) ── */
.dom-more-wrap { text-align: center; margin-top: 28px; }
.dom-more-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font: 600 14px var(--font-body); color: var(--color-primary);
  background: var(--surface-card); border: 1px solid var(--border-default);
  border-radius: 999px; padding: 11px 26px; cursor: pointer;
  transition: color .2s, background .2s, border-color .2s;
}
/* The button sets display, so the plain [hidden] attribute (UA display:none)
   is overridden — restore it so JS hiding actually removes the button once all
   articles are loaded (homepage Browse + footer Explore "Show More"). */
.dom-more-btn[hidden] { display: none; }
.dom-more-btn:hover { color: #fff; background: var(--color-primary); border-color: var(--color-primary); }
.dom-more-btn--onnavy { color: #fff; background: transparent; border-color: rgba(255,255,255,.3); }
.dom-more-btn--onnavy:hover { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-primary); }
/* Footer card footer: read-time · like · Read More spread across the row. */
.dom-xpl-foot { justify-content: space-between; }
.dom-xpl-foot .dom-xpl-read { margin-left: 0; }
button.dom-arch-chip { line-height: 1.2; -webkit-appearance: none; appearance: none; }
/* Keep the ACTIVE chip's label white on hover — the generic :hover turns text
   navy, which would be invisible on the active chip's navy background. */
.dom-arch-chip-on:hover { color: #fff; background: var(--color-primary-hover); border-color: var(--color-primary-hover); }
.dom-browse-empty { color: var(--text-muted); padding: 24px 0; }

/* ── Article reader: sticky vertical share rail (left) + reading theme ── */
.rx-share {
  position: fixed; left: 16px; top: 50%; transform: translateY(-50%);
  z-index: 70; display: flex; flex-direction: column; gap: 8px;
}
.rx-share a, .rx-share button {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 999px;
  background: var(--surface-card, #fff); border: 1px solid var(--border-default, #E2E8F0);
  color: var(--text-muted, #64748B); font: 700 14px var(--font-body); line-height: 1;
  text-decoration: none; cursor: pointer;
  transition: color .2s cubic-bezier(.22,1,.36,1), border-color .2s, transform .2s, background .2s;
}
.rx-share a:hover, .rx-share button:hover {
  color: var(--color-primary); border-color: var(--color-secondary); transform: scale(1.08);
}
.rx-share svg { width: 18px; height: 18px; }
.rx-share .rx-copied { color: #16A34A; border-color: #16A34A; transform: none; }
/* "Copied!" confirmation bubble to the right of the copy button. */
.rx-share .rx-copied::after {
  content: "Copied!";
  position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%);
  background: var(--color-primary, #163A5F); color: #fff;
  font: 600 12px var(--font-body); letter-spacing: .01em;
  padding: 6px 10px; border-radius: 8px; white-space: nowrap; pointer-events: none;
  box-shadow: 0 6px 16px -6px rgba(15,23,42,.4);
}
.rx-share .rx-copied::before {
  content: ""; position: absolute; left: calc(100% + 4px); top: 50%; transform: translateY(-50%);
  border: 6px solid transparent; border-right-color: var(--color-primary, #163A5F);
}
.rx-share a:focus-visible, .rx-share button:focus-visible {
  outline: none; box-shadow: var(--focus-ring, 0 0 0 3px rgba(43,108,176,.35));
}
/* Desktop-only rail (matches the reference); the in-article share row covers smaller screens. */
@media (max-width: 1359px) { .rx-share { display: none !important; } }

/* ── "In This Article" table of contents ──────────────────────────────────
   Built by dom-site.js from the article's H2/H3. Below 1360px it renders as an
   inline card above the body; at ≥1360px it becomes a fixed rail in the right
   gutter beside the centred 760px article (a scrollspy highlights the section
   in view). Uses design tokens, so it follows the article's light/dark theme. */
/* Right rail = free-guidebook promo + "In This Article". A single-column block
   below the article on smaller screens; a STICKY right column on wide screens
   (see the .dom-art-layout grid below). */
.rx-aside { display: flex; flex-direction: column; gap: 20px; max-width: 760px; margin: 0 auto 32px; padding: 0 var(--grid-margin); box-sizing: border-box; }
.rx-toc { background: var(--surface-card); border: 1px solid var(--border-default); border-radius: 16px; padding: 20px 22px; margin: 0; }
.rx-toc[hidden] { display: none; }
.rx-toc__title { font: 700 12px var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--text-heading); padding-bottom: 12px; margin-bottom: 10px; border-bottom: 2px solid var(--color-accent); }
.rx-toc__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.rx-toc__list li { margin: 0; }
.rx-toc__list a { display: block; padding: 7px 0 7px 15px; border-left: 2px solid transparent; font: 400 14px var(--font-body); line-height: 1.45; color: var(--text-muted); text-decoration: none; transition: color .15s, border-color .15s; }
.rx-toc__list a:hover { color: var(--text-heading); }
.rx-toc__list a.rx-toc__sub { padding-left: 28px; font-size: 13px; }
.rx-toc__list a.is-active { color: var(--text-heading); font-weight: 600; border-left-color: var(--color-accent); }
/* Land section anchors below the sticky header when jumped to. */
.dom-art-body h2, .dom-art-body h3 { scroll-margin-top: 96px; }
/* Breathing room below the sticky header — pushes the article AND its sidebar
   down together so they clear the header and stay top-aligned. */
.dom-art-layout { padding-top: 32px; }
@media (max-width: 560px) { .dom-art-layout { padding-top: 20px; } }
/* Article reading column as a soft floating card — subtle brand-tinted shadow
   so the article stands off the page background. Adapts to the dark reader theme
   via the surface/border tokens. */
.dom-art--card {
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: 20px;
  box-shadow: 0 20px 54px -22px rgba(22, 58, 95, 0.20), 0 3px 10px -6px rgba(22, 58, 95, 0.10);
  margin-bottom: 24px;
}
/* Two-column article + STICKY rail once there's room beside the 760px article.
   The rail sticks 104px below the top while the article scrolls, and releases
   naturally at the end of the article (right before Related Articles), because
   its containing block is the grid — which is exactly as tall as the article.
   Pure CSS: smooth, no layout shift, no JS. Below 1400px it's a single column. */
@media (min-width: 1400px) {
  .dom-art-layout {
    display: grid;
    grid-template-columns: minmax(0, 760px) 300px;
    column-gap: 44px; justify-content: center; align-items: start;
  }
  .dom-art-layout > .dom-art { grid-column: 1; grid-row: 1; }
  .rx-aside {
    grid-column: 2; grid-row: 1;
    position: sticky; top: 104px; align-self: start;
    max-width: none; margin: 0; padding: 0;
    max-height: calc(100vh - 130px); overflow-y: auto;
  }
}

/* ── "Get This Free Guidebook!" promo — a single clickable card linking to the
   DCA mini-app. Themed to match the site (navy/gold). Responsive: a vertical
   card in the article right-rail, a horizontal banner in the page-footer band. ── */
.dom-guidebook {
  display: flex; gap: 16px; align-items: center;
  text-decoration: none; overflow: hidden;
  background: var(--surface-card); border: 1px solid var(--border-default);
  border-radius: 16px; padding: 20px;
  box-shadow: 0 12px 30px -20px rgba(15, 23, 42, 0.35);
  transition: box-shadow .2s var(--ease-out), transform .2s var(--ease-out), border-color .2s var(--ease-out);
}
.dom-guidebook:hover { transform: translateY(-2px); border-color: rgba(212,175,55,.55); box-shadow: 0 18px 40px -20px rgba(15,23,42,.45); }
.dom-guidebook__media { flex: 0 0 auto; }
.dom-guidebook__media img { display: block; width: 132px; height: auto; border-radius: 8px; box-shadow: 0 10px 24px -10px rgba(15,23,42,.5); }
.dom-guidebook__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.dom-guidebook__eyebrow { font: 700 11px var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--color-accent-hover); }
/* Gold rule UNDER the heading (same pattern as .rx-toc__title / section heads). */
.dom-guidebook__title { display: block; font: 700 21px var(--font-display); line-height: 1.14; color: var(--color-primary); padding-bottom: 10px; margin-bottom: 4px; border-bottom: 2px solid var(--color-accent); }
.dom-guidebook__desc { font: 400 13.5px var(--font-body); line-height: 1.5; color: var(--text-muted); }
.dom-guidebook__cta { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font: 700 13.5px var(--font-body); color: var(--color-secondary); }
.dom-guidebook:hover .dom-guidebook__cta { color: var(--color-primary); }

/* Stacked & centred variant (image below the title) — used in the article
   right-rail and in the homepage sidebar (above "Top Posts & Pages"). */
.rx-aside .dom-guidebook,
.dom-guidebook-side .dom-guidebook { flex-direction: column-reverse; text-align: center; }
.rx-aside .dom-guidebook__media,
.dom-guidebook-side .dom-guidebook__media { align-self: center; }
.rx-aside .dom-guidebook__media img,
.dom-guidebook-side .dom-guidebook__media img { width: 168px; }
.rx-aside .dom-guidebook__cta,
.dom-guidebook-side .dom-guidebook__cta { align-self: center; }

/* Footer-band variant: a centred horizontal banner on pages without a rail. */
.dom-guidebook-band { max-width: 720px; margin: 48px auto 8px; padding: 0 var(--grid-margin); }
@media (max-width: 560px) {
  .dom-guidebook { flex-direction: column-reverse; text-align: center; }
  .dom-guidebook-band .dom-guidebook__media { align-self: center; }
  .dom-guidebook-band .dom-guidebook__cta { align-self: center; }
}

/* Dark reading theme — toggled from the rail, applied to <html>, persisted in
   localStorage. Overrides the surface/text/border tokens so the whole reader
   (and site) adapts; brand navy/gold stay intact. */
html.rx-dark, html.rx-dark body { background: #0F172A; }
html.rx-dark {
  --surface-page: #0F172A; --surface-card: #1E293B;
  --text-heading: #F1F5F9; --text-body: #E2E8F0; --text-muted: #94A3B8;
  --border-default: #334155; --color-border: #334155; --color-bg: #0F172A;
  --surface-inverse: #1E293B;
}
/* The site header is fixed brand chrome — keep it in its normal LIGHT appearance
   even under the dark reading theme (otherwise the token flip turns nav links
   near-white on a semi-transparent bar). Reset its surface + text tokens and use
   a solid white background so the dark page can't bleed through. */
html.rx-dark header {
  background: #ffffff !important;
  border-bottom-color: #E2E8F0 !important;
  --surface-card: #ffffff;
  --surface-page: #F8FAFC;
  --text-heading: #163A5F;
  --text-body: #1E293B;
  --text-muted: #64748B;
  --border-default: #E2E8F0;
  --color-border: #E2E8F0;
}

/* Footer social icons (URLs come from Admin → Settings; empty ones are hidden). */
.dom-social__icon { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.22); color: rgba(255,255,255,0.85); transition: background .2s, border-color .2s, color .2s, transform .2s; }
.dom-social__icon svg { width: 18px; height: 18px; }
.dom-social__icon:hover { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-primary); transform: translateY(-2px); }

/* Threaded admin reply under an article comment (in the comment modal). */
.dom-comment__reply { margin: 10px 0 0 18px; padding-left: 14px; border-left: 2px solid var(--color-accent); }

/* ── Contact page (design's dom-jb navy hero + dom-cu contact UI) ── */
.dom-jb-hero { background: var(--color-primary); color: #fff; padding: 24px 0 56px; }
.dom-jb-kicker { font: 600 12px var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--color-accent); margin: 24px 0 12px; }
.dom-jb-hero h1 { font-family: var(--font-display); font-size: clamp(34px,4.6vw,54px); font-weight: 700; line-height: 1.08; letter-spacing: -0.02em; margin: 0 0 16px; color: #fff; }
.dom-jb-sub { font: 400 18px/1.6 var(--font-body); color: #E2E8F0; max-width: 680px; margin: 0 0 28px; }
.dom-jb-hero nav a { color: #CBD5E1; text-decoration: none; }
.dom-jb-hero nav a:hover { color: #fff; }
.dom-jb-btn-ghost { display: inline-flex; align-items: center; gap: 8px; font: 600 15px var(--font-body); color: #fff; background: transparent; border: 1.5px solid rgba(255,255,255,.55); border-radius: 12px; padding: 12px 22px; cursor: pointer; text-decoration: none; transition: all .2s cubic-bezier(.22,1,.36,1); }
.dom-jb-btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,.08); color: #fff; }

.dom-cu-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 20px; }
.dom-cu-card { display: flex; flex-direction: column; gap: 6px; background: var(--surface-card); border: 1px solid var(--border-default); border-radius: 16px; padding: 24px; text-decoration: none; transition: transform .2s cubic-bezier(.22,1,.36,1), box-shadow .2s, border-color .2s; }
.dom-cu-card:hover { transform: translateY(-3px); box-shadow: 0 12px 30px -14px rgba(11,31,58,.4); border-color: transparent; }
.dom-cu-ico { font: 700 16px var(--font-display); color: var(--color-accent-hover); background: var(--surface-page, #F8FAFC); width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 6px; }
.dom-cu-ct { font: 600 12px var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--text-heading); }
.dom-cu-cv { font: 400 14px/1.5 var(--font-body); color: var(--text-muted); word-break: break-word; }

.dom-cu-form { background: var(--surface-card); border: 1px solid var(--border-default); border-radius: 16px; padding: 32px; }
.dom-cu-form h2, .dom-cu-comments h2 { font-family: var(--font-display); font-size: 26px; font-weight: 700; margin: 0 0 20px; color: var(--text-heading); }
.dom-cu-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .dom-cu-row { grid-template-columns: 1fr; } }
.dom-cu-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.dom-cu-field label { font: 600 13px var(--font-body); color: var(--text-heading); }
.dom-cu-opt { font-weight: 400; color: var(--text-muted); }
.dom-cu-field input, .dom-cu-field textarea { font: 400 15px var(--font-body); color: var(--text-body); background: var(--surface-page, #F8FAFC); border: 1px solid var(--border-default); border-radius: 12px; padding: 12px 14px; transition: border-color .15s, box-shadow .15s, background .15s; }
.dom-cu-field input:focus, .dom-cu-field textarea:focus { outline: none; background: #fff; border-color: var(--color-secondary); box-shadow: var(--focus-ring, 0 0 0 3px rgba(43,108,176,.35)); }

.dom-cu-comments { margin-top: 40px; }
.dom-cu-comment { border: 1px solid var(--border-default); border-radius: 16px; padding: 20px 24px; margin-bottom: 16px; background: var(--surface-card); }
.dom-cu-comment p { font: 400 15px/1.6 var(--font-body); color: var(--text-body); margin: 8px 0 0; }
.dom-cu-reply { border-left: 2px solid var(--color-accent); margin-top: 14px; padding: 10px 0 0 16px; }
.dom-cu-who { font: 700 14px var(--font-body); color: var(--text-heading); margin-right: 10px; }
.dom-cu-when { font: 400 12px var(--font-body); color: var(--text-muted); }

/* Reader "you reached the end" divider (design's rx-end). */
.rx-end { max-width: 760px; margin: 0 auto; padding: 8px 24px 40px; text-align: center; }
.rx-end .rx-end-mark { font-family: var(--font-display); font-size: 28px; font-weight: 700; color: var(--color-primary); }
.rx-end .rx-end-rule { width: 64px; height: 3px; background: var(--color-accent); border-radius: 2px; margin: 14px auto; }
.rx-end p { font: 400 15px/1.6 var(--font-body); color: var(--text-muted); margin: 0 0 16px; }
.rx-end button { font: 600 14px var(--font-body); color: var(--color-secondary); background: none; border: 1px solid var(--border-default); border-radius: 999px; padding: 10px 20px; cursor: pointer; transition: all .2s; }
.rx-end button:hover { color: #fff; background: var(--color-primary); border-color: var(--color-primary); }

/* Browse the Magazine — breathing room between the category chips and the grid. */
.dom-arch-cats { margin-bottom: 30px; }

/* Desktop nav dropdowns — full-width panels that span the header and align their
   content to the page grid (matches the design's mega-menus). */
.dom-navitem { position: static; }
/* The open/hovered nav button gets a soft highlight, like the design. */
.dom-navitem > a { transition: background .15s, color .15s; }
.dom-navitem:hover > a, .dom-navitem:focus-within > a { background: var(--color-primary-soft) !important; color: var(--color-primary) !important; }
/* Thin chevron (matches the design) instead of a filled ▾ triangle. Inherits the
   link colour via currentColor, and points down; rotates up when the menu opens. */
.dom-navcaret {
  display: inline-block; width: 7px; height: 7px; margin-left: 6px; flex: none;
  border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: translateY(-2px) rotate(45deg); opacity: .55;
  transition: transform .18s ease, opacity .18s ease;
}
.dom-navitem:hover .dom-navcaret, .dom-navitem:focus-within .dom-navcaret { opacity: .9; transform: translateY(1px) rotate(-135deg); }
.dom-navmenu {
  position: absolute; top: 100%; left: 0; right: 0; width: 100%;
  /* Columns of links, left-aligned to the page grid via the calc'd padding. */
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, max-content)); justify-content: start; gap: 2px 44px;
  background: var(--surface-card); border: none; border-top: 1px solid var(--border-default);
  border-radius: 0; box-shadow: 0 26px 42px -26px rgba(15,23,42,.35);
  padding: 22px max(var(--grid-margin), calc((100% - var(--grid-max)) / 2 + var(--grid-margin)));
  z-index: 55;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity var(--dur-fast), transform var(--dur-fast), visibility var(--dur-fast);
}
.dom-navitem:hover .dom-navmenu, .dom-navitem:focus-within .dom-navmenu {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.dom-navmenu a {
  display: block; padding: 9px 10px; border-radius: 8px;
  font: 600 15px var(--font-body); color: var(--text-heading); text-decoration: none;
}
.dom-navmenu a:hover { background: var(--color-primary-soft); color: var(--color-primary); }

/* ── Account dropdown (avatar button → glassy menu, click-toggled via JS) ── */
.dom-acct { position: relative; flex: 0 0 auto; }
.dom-acct__btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--color-primary); color: #fff;
  border: 2.5px solid var(--color-accent); cursor: pointer; padding: 0;
  box-shadow: 0 2px 10px rgba(22, 58, 95, .18);
  transition: transform .14s ease, box-shadow .14s ease;
}
.dom-acct__btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(22, 58, 95, .26); }
.dom-acct__btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(212, 175, 55, .35); }
.dom-acct__menu {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 70;
  min-width: 232px; padding: 10px;
  background: var(--surface-card); border: 1px solid var(--border-default);
  border-radius: 14px; box-shadow: 0 18px 50px rgba(22, 58, 95, .22);
  animation: domAcctDrop 170ms cubic-bezier(.16, 1, .3, 1);
}
.dom-acct__menu[hidden] { display: none; }
@keyframes domAcctDrop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
.dom-acct__head {
  padding: 8px 12px 12px; margin-bottom: 8px;
  border-bottom: 1px solid var(--border-default);
}
.dom-acct__title { font: 700 16px var(--font-display); color: var(--color-primary); }
.dom-acct__sub { font: 400 12.5px var(--font-body); color: var(--color-muted); margin-top: 2px; }
.dom-acct__item {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 11px 12px; border-radius: 9px; margin: 0;
  background: none; border: none; cursor: pointer; text-align: left;
  font: 600 14.5px var(--font-body); color: var(--color-primary); text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.dom-acct__item:hover { background: var(--color-primary-soft); color: var(--color-primary-hover); }
.dom-acct__item svg { flex: none; }

/* "More" mega-menu — a dropdown that SIZES TO ITS CONTENT (columns of top-level
   categories, each listing subcategories + articles nested inside). Anchored
   under the "More" item; it grows wider as more categories are added and wraps
   within a sensible max-width, so a single category shows a tidy narrow panel
   instead of a giant empty bar. */
/* static so the panel positions relative to the (sticky) header and can be
   horizontally centred in the content area, not anchored to the Articles item. */
.dom-navitem--mega { position: static; }
.dom-megamenu {
  position: absolute; top: 100%; left: 0; right: 0; width: 100%;
  /* Bounded height with its own scroll so a full 3-row menu never runs off the
     page. The cascading flyouts are moved to <body> (position:fixed) by JS, so
     this scroll doesn't clip them. */
  max-height: min(560px, calc(100vh - 120px)); overflow-y: auto; overflow-x: hidden;
  background: var(--surface-card); border: none; border-top: 1px solid var(--border-default);
  border-radius: 0; box-shadow: 0 26px 42px -26px rgba(15, 23, 42, 0.35);
  padding: 28px 0; z-index: 55;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), visibility var(--dur-base);
}
.dom-navitem--mega:hover .dom-megamenu,
.dom-navitem--mega:focus-within .dom-megamenu,
.dom-navitem--mega.is-mega-pinned .dom-megamenu { opacity: 1; visibility: visible; transform: translateY(0); }

/* Inner content constrained to the page grid + centred, so columns line up with
   the wordmark like the design. */
/* Aligned column grid — each top-level category is its own cell with its heading
   at the top of the row, so the sections are easy to scan (no masonry stagger).
   Lists are capped at 6 items, keeping columns short and even. */
.dom-megamenu__grid {
  max-width: var(--grid-max); margin: 0 auto; padding: 0 var(--grid-margin);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px 40px; align-items: start;
}
@media (max-width: 1200px) { .dom-megamenu__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 820px)  { .dom-megamenu__grid { grid-template-columns: repeat(2, 1fr); } }
.dom-megacol { position: relative; margin: 0 0 18px; }
.dom-megacol--wide { grid-column: 1 / -1; }

/* "Show more (N)" — opens a cascading flyout (positioned by dom-site.js). */
.dom-megamore {
  display: inline-flex; align-items: center; gap: 4px; margin: 6px 0 0; padding: 6px 8px;
  background: none; border: none; cursor: pointer; border-radius: 8px;
  font: 600 12.5px var(--font-body); color: var(--color-secondary);
  transition: background var(--dur-fast), color var(--dur-fast);
}
.dom-megamore::after { content: "\203A"; font-size: 15px; line-height: 1; margin-top: -1px; } /* › */
.dom-megamore:hover,
.dom-megamore[aria-expanded="true"] { background: var(--color-primary-soft); color: var(--color-primary); }

/* Cascading flyout with the remaining articles — matches the dropdown look.
   Moved to <body> and fixed-positioned by JS right next to the "Show more"
   button (flipping to the left of the column when there's no room on the
   right), so the menu's own scroll never clips it. */
.dom-megaflyout {
  position: fixed; z-index: 130;
  width: 262px; box-sizing: border-box;
  max-height: min(70vh, 460px); overflow-y: auto;
  background: var(--surface-card); border: 1px solid var(--border-default);
  border-radius: 12px; box-shadow: 0 22px 46px -20px rgba(15, 23, 42, 0.4);
  padding: 12px 10px;
  opacity: 0; visibility: hidden; transform: translateX(-6px);
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), visibility var(--dur-fast);
}
.dom-megaflyout[hidden] { display: none; }
.dom-megaflyout--left { transform: translateX(6px); }
.dom-megaflyout.is-open { opacity: 1; visibility: visible; transform: translateX(0); }
.dom-megaflyout__title {
  font: 700 11px var(--font-body); letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--color-primary); padding: 2px 8px 9px; margin-bottom: 6px;
  border-bottom: 1px solid var(--border-default);
}

/* Category (column) heading */
.dom-megacol__head {
  display: flex; align-items: center; gap: 6px; font-family: var(--font-display);
  font-size: 16px; font-weight: 700; color: var(--color-primary); text-decoration: none;
  padding-bottom: 9px; margin-bottom: 4px; border-bottom: 2px solid var(--color-accent);
}
.dom-megacol__head:hover { color: var(--color-secondary); }
.dom-megacol__caret { color: var(--color-accent); font-weight: 700; }

/* Recent-article links (under a category or a subcategory) */
.dom-megacol__arts { display: flex; flex-direction: column; gap: 0; margin-top: 4px; }
.dom-megacol__arts a {
  display: block; font: 500 13.5px var(--font-body); color: var(--text-body); text-decoration: none; line-height: 1.3;
  padding: 4px 8px; border-radius: 8px;
  /* Show the full title — wrap onto as many lines as needed, break long words
     so nothing is hidden or overflows the column. */
  overflow-wrap: anywhere; word-break: break-word; hyphens: auto;
}
.dom-megacol__arts a:hover { color: var(--color-primary); background: var(--color-primary-soft); }
.dom-megacol__arts--grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px 20px; }

/* Subcategory block within a category column, with its own articles nested */
.dom-megasub { margin-top: 8px; }
.dom-megasub__head {
  display: block; font: 700 11px var(--font-body); letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--color-secondary); text-decoration: none; padding: 4px 8px;
}
.dom-megasub__head:hover { color: var(--color-primary); }
.dom-megasub .dom-megacol__arts { margin-top: 2px; margin-left: 8px; padding-left: 10px; border-left: 2px solid var(--color-accent-soft); }

.dom-megamenu__foot { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border-default); }
.dom-megamenu__foot a { font: 600 13px var(--font-body); color: var(--color-secondary); text-decoration: none; }

/* Sidebar blocks on the homepage (dom-side-block markup uses inline styles in the
   design; give the container a consistent card look as a safety net). */
.dom-side-block { background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-card); padding: 16px; }
.dom-side-head { font-family: var(--font-display); font-size: 17px; color: var(--color-primary); margin: 0 0 12px; }

/* Mobile drawer */
.dom-mobnav { display: none; flex-direction: column; gap: 2px; padding: 8px var(--grid-margin) 18px; background: var(--surface-card); border-top: 1px solid var(--border-default); max-height: calc(100vh - 72px); overflow-y: auto; }
.dom-mobnav.is-open { display: flex; }

/* Accordion groups — mirror the desktop dropdowns / mega-menu. A row = a nav link
   plus a caret button that expands the submenu panel; deeper levels (categories,
   subcategories) nest the same structure. */
.dom-mobgroup { display: flex; flex-direction: column; border-top: 1px solid var(--border-default); }
.dom-mobnav > .dom-mobgroup:first-child { border-top: none; }
.dom-mobgroup__row { display: flex; align-items: center; gap: 4px; }
.dom-mobnav .dom-mobgroup__link { flex: 1 1 auto; min-width: 0; padding: 12px 8px; border-radius: 8px; font: 600 15px var(--font-body); color: var(--text-heading); text-decoration: none; }
.dom-mobnav .dom-mobgroup__link:hover { background: var(--color-primary-soft); }
.dom-mobgroup__toggle { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding: 12px 8px; border: none; border-radius: 8px; background: transparent; text-align: left; cursor: pointer; font: 600 15px var(--font-body); color: var(--text-heading); }
.dom-mobgroup__toggle:hover { background: var(--color-primary-soft); }
.dom-mobgroup__caret { flex: 0 0 auto; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: none; background: transparent; color: var(--text-muted); cursor: pointer; }
.dom-mobcaret { width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .2s ease; }
.dom-mobgroup__toggle[aria-expanded="true"] .dom-mobcaret,
.dom-mobgroup__caret[aria-expanded="true"] .dom-mobcaret { transform: rotate(-135deg); }
.dom-mobgroup__panel { display: flex; flex-direction: column; margin: 2px 0 4px 6px; padding-left: 12px; border-left: 1px solid var(--border-default); }
.dom-mobgroup__panel[hidden] { display: none; }
.dom-mobnav .dom-mobgroup__panel a { padding: 10px 8px; border-radius: 8px; font: 500 14px var(--font-body); color: var(--text-body); text-decoration: none; }
.dom-mobnav .dom-mobgroup__panel a:hover { background: var(--color-primary-soft); color: var(--text-heading); }
.dom-mobgroup--sub .dom-mobgroup__link { font-size: 14px; }
.dom-mobgroup--sub2 .dom-mobgroup__link { font-size: 13.5px; color: var(--text-body); }
/* "Show more (N)" — the mobile equivalent of the desktop mega-menu flyout trigger. */
.dom-mobgroup--more { border-top: none; }
.dom-mobgroup__more { padding: 9px 8px; font: 600 13px var(--font-body); color: var(--color-secondary); }
.dom-mobgroup__more[aria-expanded="true"] { color: var(--color-primary); }

/* Plain top-level links (News, Contact) + the utility cluster (Search/Subscribe/account). */
.dom-mobnav .dom-mobnav__link { display: block; padding: 12px 8px; border-radius: 8px; font: 600 15px var(--font-body); color: var(--text-heading); text-decoration: none; border-top: 1px solid var(--border-default); }
.dom-mobnav .dom-mobnav__link:hover { background: var(--color-primary-soft); }
.dom-mobnav__util { display: flex; flex-direction: column; margin-top: 8px; }
.dom-mobnav .dom-mobnav__btn { width: 100%; text-align: left; background: transparent; border: none; border-top: 1px solid var(--border-default); cursor: pointer; }
.dom-mobnav .is-current { color: var(--color-secondary); }

/* ── Article engagement: Like + Comment ───────────────────────────────────── */
.dom-engage { display: flex; gap: 12px; align-items: center; margin: 32px 0 8px; padding-top: 24px; border-top: 1px solid var(--border-default); }
.dom-like-big, .dom-comment-btn {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  font: 600 15px var(--font-body); color: var(--text-heading);
  background: var(--surface-card); border: 1px solid var(--border-default);
  border-radius: var(--radius-pill, 999px); padding: 10px 18px;
  transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
}
.dom-like-big:hover, .dom-comment-btn:hover { background: var(--color-primary-soft); border-color: var(--color-secondary); }
.dom-like-big .dom-like-heart svg { width: 20px; height: 20px; display: block; transition: transform var(--dur-fast); }
.dom-like-big[aria-pressed="true"] { color: var(--color-danger); border-color: rgba(220,38,38,0.4); background: rgba(220,38,38,0.06); }
.dom-like-big[aria-pressed="true"] .dom-like-heart svg { fill: currentColor; transform: scale(1.1); }
.dom-comment-btn svg { width: 20px; height: 20px; }
.dom-like-n, .dom-comment-count { font-weight: 700; }
.dom-like-label { color: var(--text-muted); font-weight: 500; }

/* ── Modal ─────────────────────────────────────────────────────────────────── */
.dom-modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 20px; }
.dom-modal[hidden] { display: none; }
.dom-modal__backdrop { position: absolute; inset: 0; background: rgba(15,23,42,0.55); backdrop-filter: blur(2px); }
.dom-modal__panel {
  position: relative; z-index: 1; width: 100%; max-width: 620px; max-height: 88vh; display: flex; flex-direction: column;
  background: var(--surface-card); border-radius: var(--radius-card); box-shadow: 0 30px 70px rgba(0,0,0,0.35); overflow: hidden;
}
.dom-modal__head { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid var(--border-default); }
.dom-modal__head h3 { font-family: var(--font-display); font-size: 22px; margin: 0; color: var(--color-primary); }
.dom-modal__close { border: none; background: var(--color-surface-2, #f1f5f9); width: 34px; height: 34px; border-radius: 50%; cursor: pointer; font-size: 15px; color: var(--text-muted); }
.dom-modal__close:hover { background: var(--color-primary-soft); color: var(--color-primary); }
.dom-modal__body { padding: 22px 24px; overflow-y: auto; }

/* ── Comments list + form ──────────────────────────────────────────────────── */
.dom-comment { padding: 14px 0; border-bottom: 1px solid var(--border-default); }
.dom-comment:first-child { padding-top: 0; }
.dom-comment__meta { font-size: 13px; color: var(--text-muted); margin-bottom: 4px; }
.dom-comment__meta strong { color: var(--text-heading); }
.dom-comment__body { font-size: 15px; line-height: 1.6; color: var(--text-body); }
.dom-comments__empty { color: var(--text-muted); font-size: 15px; padding: 8px 0 4px; }
.dom-comment-form { margin-top: 22px; padding-top: 20px; border-top: 2px solid var(--color-accent-soft); }
.dom-comment-form h4 { font-family: var(--font-display); font-size: 17px; margin: 0 0 12px; color: var(--color-primary); }
.dom-comment-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dom-comment-form input, .dom-comment-form textarea {
  width: 100%; border: 1px solid var(--border-default); border-radius: var(--radius-input, 12px);
  padding: 11px 13px; font: 400 15px var(--font-body); margin-bottom: 12px; color: var(--text-body);
}
.dom-comment-form input:focus, .dom-comment-form textarea:focus { outline: none; border-color: var(--color-secondary); box-shadow: 0 0 0 3px rgba(43,108,176,0.15); }
.dom-comment-form textarea { resize: vertical; }
.dom-comment-form__foot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.dom-comment-form__msg { font-size: 14px; }
.dom-comment-form__msg.is-ok { color: var(--color-success, #16a34a); }
.dom-comment-form__msg.is-err { color: var(--color-danger, #dc2626); }
@media (max-width: 520px) { .dom-comment-form__row { grid-template-columns: 1fr; } }

/* Reading progress bar (article reader) */
.dom-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; background: transparent; z-index: 120; }
.dom-progress-fill { display: block; height: 100%; width: 0; }

/* ── Article prose — design-system typography ──────────────────────────────
   The design system OWNS article typography (imported source fonts are stripped
   from the stored HTML in Dom::Article). Every element is constrained so long
   words, tables, media, <pre> and code stay inside the column on all viewports. */
.dom-art-body {
  font-family: var(--font-body);
  font-size: 16px;          /* unified body size across ALL pages (matches Diversity News) */
  line-height: 1.7;
  color: var(--text-body);
  max-width: 100%;
  overflow-wrap: break-word;      /* wrap long words / URLs instead of overflowing */
  word-break: break-word;
  -webkit-font-smoothing: antialiased;
}
/* Safety net: neutralise any font styling reaching the body via spans/font so
   the design system always wins; emphasis via <strong>/<em> is untouched. */
.dom-art-body span, .dom-art-body font {
  font-family: inherit !important; font-size: inherit !important;
  font-weight: inherit !important; line-height: inherit !important; letter-spacing: inherit !important;
}

.dom-art-body p { margin: 0 0 16px; font-size: 1em; line-height: 1.7; color: var(--text-body); }
.dom-art-body h2 { font-family: var(--font-display); font-size: clamp(24px, 3vw, 30px); margin: 34px 0 14px; color: var(--text-heading); line-height: 1.2; }
.dom-art-body h3 { font-family: var(--font-display); font-size: clamp(20px, 2.4vw, 24px); margin: 28px 0 12px; color: var(--text-heading); line-height: 1.25; }
.dom-art-body h4 { font-family: var(--font-display); font-size: clamp(18px, 1.9vw, 20px); margin: 24px 0 10px; color: var(--text-heading); line-height: 1.3; }
/* Headings follow the design-system colour even if the imported markup wrapped
   them in a coloured span (source sites used maroon/blue heading colours). */
.dom-art-body :is(h1, h2, h3, h4, h5, h6) :is(span, font, b, strong) { color: inherit !important; }

.dom-art-body ul, .dom-art-body ol { margin: 0 0 22px; padding-left: 24px; }
.dom-art-body li { margin: 0 0 8px; font-size: 1em; line-height: 1.7; color: var(--text-body); }
.dom-art-body a { color: var(--text-link); text-decoration: none; overflow-wrap: break-word; }
.dom-art-body strong, .dom-art-body b { font-weight: 700; color: var(--text-heading); }
.dom-art-body em, .dom-art-body i { font-style: italic; }

.dom-art-body img { max-width: 100%; height: auto; border-radius: var(--radius-image, 20px); margin: 24px 0; }
.dom-art-body figure { margin: 24px 0; max-width: 100%; }
.dom-art-body figure img { margin: 0; }
.dom-art-body figcaption { margin-top: 8px; font-size: 14px; color: var(--text-muted); text-align: center; }

/* Video / embeds: force a responsive 16:9 box so fixed-width iframes (e.g. the
   YouTube width="640") shrink to the column instead of overflowing. */
.dom-art-body iframe { display: block; width: 100%; max-width: 100%; aspect-ratio: 16 / 9; height: auto; border-radius: 12px; margin: 24px 0; border: 0; }
.dom-art-body .embed-youtube { display: block; max-width: 100%; }

.dom-art-body blockquote {
  margin: 28px 0; padding: 8px 0 8px 24px; border-left: 4px solid var(--color-accent);
  font-family: var(--font-display); font-size: clamp(20px, 2.2vw, 24px); line-height: 1.4; font-style: italic; color: var(--color-primary);
}
.dom-art-body blockquote p:last-child { margin-bottom: 0; }

/* Tables scroll horizontally on narrow screens instead of breaking the layout. */
.dom-art-body table { display: block; width: 100%; max-width: 100%; overflow-x: auto; border-collapse: collapse; margin: 24px 0; font-size: 16px; }
.dom-art-body th, .dom-art-body td { border: 1px solid var(--border-default); padding: 10px 12px; text-align: left; vertical-align: top; }

/* <pre>: the source site wrapped PROSE in <pre>. BASE rule = wrap as normal body
   text (keeps author line breaks, no monospace, no overflow) — this is also the
   safe fallback where :has() is unsupported. Genuine code blocks (<pre><code>)
   are upgraded to a monospace box that scrolls horizontally. */
.dom-art-body pre {
  max-width: 100%; margin: 0 0 22px;
  font-family: inherit; font-size: 1em; line-height: 1.8; color: var(--text-body);
  white-space: pre-wrap; overflow-wrap: break-word; word-break: break-word;
  background: none; padding: 0; border-radius: 0;
}
.dom-art-body pre:has(code) {
  white-space: pre; overflow-x: auto; word-break: normal;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.88em; line-height: 1.6;
  background: var(--color-primary); color: #e8eef5; padding: 16px 18px; border-radius: 12px;
}
.dom-art-body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.88em; background: var(--color-primary-soft); color: var(--color-primary);
  padding: 0.12em 0.4em; border-radius: 6px; overflow-wrap: break-word;
}
.dom-art-body pre:has(code) code { background: none; color: inherit; padding: 0; font-size: 1em; }

@media (max-width: 900px) {
  .dom-nav-desktop { display: none !important; }
  .dom-nav-burger { display: inline-flex !important; }
  /* Subscribe + account avatar move into the burger drawer — they overflow the
     bar on phones. Keep only the wordmark, search and the burger in the top row. */
  .dom-header-cta { display: none !important; }
  .dom-header-bar { gap: 12px !important; }
}
@media (max-width: 560px) {
  .dom-art-body { font-size: 15px; }
  .dom-art-body ul, .dom-art-body ol { padding-left: 20px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Scholarship application — multi-step form (matches the DELA scholarship form)
   ══════════════════════════════════════════════════════════════════════════ */
.dom-schol-card { background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-card, 16px); padding: 32px 36px; box-shadow: 0 10px 30px -20px rgba(15,23,42,.3); }
.dom-schol-progress { text-align: right; font: 600 12px var(--font-body); letter-spacing: .04em; text-transform: uppercase; color: var(--color-accent-hover); margin: 0 0 14px; }

.dom-schol-head { font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--color-primary); margin: 0 0 4px; padding-bottom: 14px; border-bottom: 1px solid var(--text-heading); }
.dom-schol-subhead { font-family: var(--font-display); font-size: 18px; font-weight: 700; color: var(--color-primary); margin: 0 0 18px; }
.dom-schol-rule { border: none; border-top: 1px solid var(--border-default); margin: 22px 0; }
.dom-schol-section-note { font: 600 14px var(--font-body); color: var(--color-accent-hover); margin: 0 0 18px; }

.dom-schol-row { display: grid; grid-template-columns: minmax(150px, 210px) 1fr; gap: 8px 28px; align-items: start; padding: 12px 0; }
.dom-schol-label { font: 500 14px var(--font-body); color: var(--text-body); line-height: 1.4; padding-top: 8px; }
.dom-schol-req { color: #DC2626; font-weight: 700; }
.dom-schol-hint { color: var(--text-muted); font-size: 12.5px; font-weight: 400; }

.dom-schol-input { width: 100%; max-width: 360px; box-sizing: border-box; font: 400 15px var(--font-body); color: var(--text-body); background: #fff; border: 1px solid var(--border-default); border-radius: 8px; padding: 10px 12px; }
.dom-schol-input:focus { outline: none; border-color: var(--color-secondary); box-shadow: var(--focus-ring, 0 0 0 3px rgba(43,108,176,.28)); }
.dom-schol-input--sm { max-width: 210px; }
.dom-schol-select { appearance: auto; }
.dom-schol-textarea { max-width: 100%; min-height: 96px; resize: vertical; line-height: 1.6; }

/* Yes / No radios (stacked, as in the source) */
.dom-schol-radios { display: flex; flex-direction: column; gap: 8px; padding-top: 6px; }
.dom-schol-radios label { display: inline-flex; align-items: center; gap: 9px; font: 400 15px var(--font-body); color: var(--text-body); cursor: pointer; }
.dom-schol-radios input[type="radio"] { width: 17px; height: 17px; accent-color: var(--color-primary); cursor: pointer; }

/* File upload — hidden native input + blue "Browse Files" button + filename */
.dom-schol-file { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding-top: 4px; }
.dom-schol-fileinput { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; }
.dom-schol-browse { display: inline-flex; align-items: center; justify-content: center; font: 600 15px var(--font-body); color: #fff; background: var(--color-secondary); border-radius: 8px; padding: 11px 26px; cursor: pointer; transition: background .15s; }
.dom-schol-browse:hover { background: var(--color-primary); }
.dom-schol-fileinput:focus + .dom-schol-browse { box-shadow: var(--focus-ring, 0 0 0 3px rgba(43,108,176,.28)); }
.dom-schol-filename { font: 400 13.5px var(--font-body); color: var(--text-muted); word-break: break-all; }

/* Month / Day / Year date triples */
.dom-schol-date { display: flex; align-items: flex-start; gap: 8px; flex-wrap: wrap; }
.dom-schol-datebox { display: inline-flex; flex-direction: column; align-items: center; gap: 3px; }
.dom-schol-datebox input { width: 66px; text-align: center; box-sizing: border-box; font: 400 15px var(--font-body); color: var(--text-body); background: #fff; border: 1px solid var(--border-default); border-radius: 8px; padding: 10px 8px; }
.dom-schol-datebox input:focus { outline: none; border-color: var(--color-secondary); box-shadow: var(--focus-ring, 0 0 0 3px rgba(43,108,176,.28)); }
.dom-schol-datebox--year input { width: 88px; }
.dom-schol-datebox em { font-style: normal; font: 400 11px var(--font-body); color: var(--text-muted); }
.dom-schol-dash { color: var(--text-muted); padding-top: 10px; }

.dom-schol-recaptcha { margin: 22px 0 4px; }

.dom-schol-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--border-default); }
.dom-schol-btn { font: 600 15px var(--font-body); color: var(--text-heading); background: #fff; border: 1px solid var(--border-default); border-radius: 8px; padding: 11px 30px; cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.dom-schol-btn:hover { background: var(--color-primary-soft, #EEF2F7); border-color: #b9c4d2; }
.dom-schol-btn--next { color: #fff; background: var(--color-primary); border-color: var(--color-primary); }
.dom-schol-btn--next:hover { background: var(--color-primary-hover, #0F2B48); border-color: var(--color-primary-hover, #0F2B48); }
.dom-schol-btn--submit { color: #fff; background: var(--color-secondary); border-color: var(--color-secondary); }
.dom-schol-btn--submit:hover { background: var(--color-primary); border-color: var(--color-primary); }

@media (max-width: 640px) {
  .dom-schol-card { padding: 24px 20px; }
  .dom-schol-row { grid-template-columns: 1fr; gap: 6px; padding: 10px 0; }
  .dom-schol-label { padding-top: 0; }
  .dom-schol-input, .dom-schol-input--sm { max-width: 100%; }
}

/* ── Legacy WordPress pages (Dom::LEGACY_PAGES) ─────────────────────────────
   Scoped to .dom-legacy so the imported markup — WordPress alignment classes,
   wide reference tables, old fixed-width media — sits inside the Dom type
   scale and stays readable on small screens. Nothing here affects the
   hand-built pages. */
.dom-legacy { overflow-wrap: anywhere; }

/* Old inline font sizes/colours from Word-pasted content would otherwise fight
   the design system's scale. */
.dom-legacy [style*="font-size"] { font-size: inherit !important; }
.dom-legacy [style*="font-family"] { font-family: inherit !important; }
.dom-legacy [style*="line-height"] { line-height: inherit !important; }

.dom-legacy img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-image);
}

/* WordPress alignment classes */
.dom-legacy .alignleft {
  float: left;
  margin: 4px var(--space-5) var(--space-4) 0;
}
.dom-legacy .alignright {
  float: right;
  margin: 4px 0 var(--space-4) var(--space-5);
}
.dom-legacy .aligncenter,
.dom-legacy img.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.dom-legacy .wp-caption { max-width: 100%; height: auto; }
.dom-legacy .wp-caption-text,
.dom-legacy figcaption {
  font: 400 13px var(--font-body);
  color: var(--text-muted);
  margin-top: var(--space-2);
  text-align: center;
}

/* Reference tables are frequently wider than the column. */
.dom-legacy table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  margin: var(--space-5) 0;
  font-size: 15px;
}
.dom-legacy th,
.dom-legacy td {
  border: 1px solid var(--border-default, var(--color-border));
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
}
.dom-legacy th { background: var(--color-surface-2); color: var(--text-heading); }

/* Video/iframe embeds: a span keeps the markup valid inside <p>. */
.dom-legacy-embed {
  display: block;
  position: relative;
  width: 100%;
  max-width: 720px;
  margin: var(--space-5) auto;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-image);
  overflow: hidden;
  background: var(--color-surface-2);
}
.dom-legacy-embed iframe,
.dom-legacy-embed video,
.dom-legacy-embed embed,
.dom-legacy-embed object {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Stand-in for the decorative rule graphics the old theme used. */
.dom-legacy .dom-legacy-rule {
  border: 0;
  border-top: 2px solid var(--color-accent);
  opacity: .5;
  margin: var(--space-6) 0;
}

/* Notice shown on pages whose original WordPress plugin isn't rebuilt yet. */
.dom-legacy-notice {
  margin: var(--space-6) 0 0;
  padding: var(--space-5);
  background: var(--color-primary-soft);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-card);
}
.dom-legacy-notice p { margin: 0 0 var(--space-2); color: var(--text-body); }
.dom-legacy-notice p:last-child { margin-bottom: 0; }
.dom-legacy-notice__title {
  font: 700 17px var(--font-display);
  color: var(--text-heading);
}
.dom-legacy-notice__links a { color: var(--text-link); font-weight: 600; }
.dom-legacy-notice__links span { margin: 0 var(--space-2); color: var(--text-muted); }

/* "More in this section" list under the content. */
.dom-legacy-more {
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-default, var(--color-border));
}
.dom-legacy-more h2 {
  font: 700 20px var(--font-display);
  color: var(--text-heading);
  margin: 0 0 var(--space-4);
}
.dom-legacy-more ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-2) var(--space-5);
}
.dom-legacy-more a {
  display: block;
  padding: 6px 0;
  font-size: 15px;
  color: var(--text-link);
  text-decoration: none;
}
.dom-legacy-more a:hover { text-decoration: underline; }

@media (max-width: 640px) {
  .dom-legacy .alignleft,
  .dom-legacy .alignright {
    float: none;
    display: block;
    margin: var(--space-4) auto;
  }
  .dom-legacy-embed { margin: var(--space-4) 0; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Form submission UX — spinner, success confirmation, page splash
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Submitting state: disabled button + spinner (mirrors the Dtui pattern) ── */
.dom-spinner {
  width: 16px; height: 16px; flex: none; display: inline-block;
  border: 2.5px solid rgba(255, 255, 255, .4); border-top-color: #fff;
  border-radius: 50%; animation: domSpin .7s linear infinite;
}
/* Ghost/outline buttons sit on a light background, so tint the spinner dark. */
.dom-btn--ghost .dom-spinner, .dom-schol-btn--back .dom-spinner {
  border-color: rgba(22, 58, 95, .25); border-top-color: var(--color-primary);
}
@keyframes domSpin { to { transform: rotate(360deg); } }

button[disabled], input[type="submit"][disabled] { opacity: .72; cursor: progress; }
.dom-is-submitting { pointer-events: none; }

/* ── Success confirmation ─────────────────────────────────────────────────── */
.dom-success { position: fixed; inset: 0; z-index: 1200; display: flex;
  align-items: center; justify-content: center; padding: 20px; }
.dom-success__backdrop { position: absolute; inset: 0; background: rgba(11, 31, 58, .55); }
.dom-success__panel {
  position: relative; z-index: 1; width: min(560px, 100%);
  background: #fff; border-radius: 6px; padding: 56px 40px 60px;
  text-align: center; box-shadow: 0 24px 60px -20px rgba(11, 31, 58, .45);
  animation: domSuccessIn .32s cubic-bezier(.22, 1, .36, 1);
}
@keyframes domSuccessIn { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }

.dom-success__close {
  position: absolute; top: 10px; right: 14px; border: 0; background: none;
  font-size: 26px; line-height: 1; color: #9aa4b0; cursor: pointer; padding: 4px 8px;
}
.dom-success__close:hover { color: var(--text-heading); }

.dom-success__icon { display: block; width: 104px; height: 104px; margin: 0 auto 26px; }
.dom-success__icon svg { width: 100%; height: 100%; overflow: visible; }
.dom-success__circle {
  fill: none; stroke: #5cb85c; stroke-width: 2.5;
  stroke-dasharray: 151; stroke-dashoffset: 151;
  animation: domSuccessCircle .5s cubic-bezier(.65, 0, .45, 1) .08s forwards;
}
.dom-success__check {
  fill: none; stroke: #5cb85c; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 40; stroke-dashoffset: 40;
  animation: domSuccessCheck .3s cubic-bezier(.65, 0, .45, 1) .5s forwards;
}
@keyframes domSuccessCircle { to { stroke-dashoffset: 0; } }
@keyframes domSuccessCheck  { to { stroke-dashoffset: 0; } }

.dom-success__title {
  font-family: var(--font-body); font-size: 30px; font-weight: 700;
  color: #4a4a4a; margin: 0 0 18px;
}
.dom-success__msg {
  font-family: var(--font-body); font-size: 16px; line-height: 1.65;
  color: #6b7280; margin: 0; max-width: 44ch; margin-inline: auto;
}

/* Splash styles are INLINED in the Dom layout <head> so the overlay paints
   on the first paint instead of waiting for this stylesheet. Do not
   re-add them here — two copies would drift. */


@media (prefers-reduced-motion: reduce) {
  .dom-spinner { animation: none; }  /* .dom-splash__mark is handled by the inline <head> block */
  .dom-success__circle, .dom-success__check { animation: none; stroke-dashoffset: 0; }
  .dom-success__panel { animation: none; }
}

/* ── Shared card lift ───────────────────────────────────────────────────────
   The Latest Articles card (.dom-lcard__main) hover — gold border, soft lift —
   reused verbatim so every clickable card in the magazine reacts identically.
   Applied to the cards that previously had no hover response at all.          */
.dom-rm-wrap,
.dom-tp-card,
.dom-news-item__head,
.dom-cu-comment {
  transition: box-shadow .25s var(--ease-out), transform .25s var(--ease-out),
              border-color .25s var(--ease-out);
}
a.dom-rm-wrap:hover,
a.dom-tp-card:hover,
.dom-tp-card:hover,
.dom-news-item__head:hover {
  border-color: rgba(212, 175, 55, .45);
  box-shadow: 0 14px 34px -18px rgba(11, 31, 58, .45);
  transform: translateY(-2px);
}
/* Thumbnails inside a lifting card ease in with it rather than jumping. */
.dom-tp-card:hover .dom-tp-thumb img,
.dom-rm-wrap:hover img { transform: scale(1.03); }
.dom-tp-thumb img, .dom-rm-wrap img { transition: transform .35s var(--ease-out); }

@media (prefers-reduced-motion: reduce) {
  .dom-rm-wrap, .dom-tp-card, .dom-news-item__head,
  .dom-lcard__main, .dom-catcard { transition: none; }
  a.dom-rm-wrap:hover, .dom-tp-card:hover, .dom-news-item__head:hover,
  .dom-lcard__main:hover, .dom-catcard:hover { transform: none; }
  .dom-tp-card:hover .dom-tp-thumb img, .dom-rm-wrap:hover img { transform: none; }
}

/* Spinner + "Submitting…" share a wrapper so spacing is identical on every
   button, including the ones whose own gap is set inline (or not set at all). */
.dom-submitting { display: inline-flex; align-items: center; justify-content: center; gap: 8px; line-height: 1; }
.dom-submitting__label { line-height: 1; }

/* tokens.css also defines .dom-flash; it loads first, but restate the parts it
   sets so the compact centred treatment can't be partially overridden. */
.dom-flash { margin-bottom: 0; }
@media (max-width: 640px) {
  .dom-flash { max-width: calc(100vw - 32px); padding: 11px 16px; font-size: 13.5px; }
}