/* ──────────────────────────────────────────────────────────────
   Typography scale - MIRRORS the plugin/builder scale exactly so
   theme content and builder sections render at identical sizes.
   Sizes are in `em` against the 16px body anchor (html 1rem / body
   100%); the same responsive steps as the builder are reproduced by
   redefining the tokens inside media queries (single source of truth
   - change a token here and every consumer follows).

   Role tokens (builder names) + content-heading aliases (h1..h6):
     h1 = hero      3.75em → 2.75 → 1.75 → 1.25   (60→44→28→20)
     h2 = section   2.75em → 2 → 2 → 1.6          (44→32→32→25.6)
     h3 = card      1.2em                          (19.2, fixed)
     h4 = sub       1.15em → → 1em                 (18.4→16 at ≤768)
     h5 = small     0.95em                         (15.2, fixed)
     h6 = label     0.92em                         (14.7, fixed)
     body 1em (16) · lead = sub 1.15em · meta 0.85em (13.6) · tiny 0.75em
   ────────────────────────────────────────────────────────────── */
:root {
  /* role tokens (builder-canonical) */
  --ewut-uny-fs-hero: 3.75em;
  --ewut-uny-fs-section: 2.75em;
  --ewut-uny-fs-display: 2em;
  --ewut-uny-fs-quote: 1.4em;
  --ewut-uny-fs-card: 1.2em;
  --ewut-uny-fs-sub: 1.15em;
  --ewut-uny-fs-body: 1em;
  --ewut-uny-fs-small: 0.95em;
  --ewut-uny-fs-label: 0.92em;
  --ewut-uny-fs-meta: 0.85em;
  --ewut-uny-fs-tiny: 0.75em;
  /* content-heading aliases - modular scale (ratio 1.25 "major third"
       from a 16px base). h1/h2 keep the brand display sizes; h3-h6 step
       down evenly so the hierarchy reads correctly:
       h1 60 · h2 44 · h3 31.25 · h4 25 · h5 20 · h6 16. */
  --ewut-uny-fs-h1: var(--ewut-uny-fs-hero);
  --ewut-uny-fs-h2: var(--ewut-uny-fs-section);
  --ewut-uny-fs-h3: 1.953em;
  --ewut-uny-fs-h4: 1.5625em;
  --ewut-uny-fs-h5: 1.25em;
  --ewut-uny-fs-h6: 1em;
  --ewut-uny-fs-lead: var(--ewut-uny-fs-sub);
  /* line-heights (builder-paired) */
  --ewut-uny-lh-tight: 1.15;
  --ewut-uny-lh-snug: 1.25;
  --ewut-uny-lh-normal: 1.5;
  --ewut-uny-lh-relaxed: 1.7;
  --ewut-uny-lh-base: 1.7;
  --ewut-uny-fw-head: 700;
  --ewut-uny-fw-body: 400;
}

@media (max-width: 1024px) {
  :root {
    --ewut-uny-fs-hero: 2.75em;
    --ewut-uny-fs-section: 2em;
  }
}

@media (max-width: 768px) {
  :root {
    --ewut-uny-fs-hero: 1.75em;
    --ewut-uny-fs-sub: 1em;
  }
}

@media (max-width: 576px) {
  :root {
    --ewut-uny-fs-hero: 1.25em;
    --ewut-uny-fs-section: 1.6em;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

ul,
ol {
  list-style: none;
}

a {
  text-decoration: none !important;
  color: inherit;
}

/* Kill the browser autofill blue/yellow wash on inputs - keep our
   white field background and dark text. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-text-fill-color: var(--ewut-uny-dark);
  -webkit-box-shadow: 0 0 0 1000px var(--ewut-uny-white) inset;
  box-shadow: 0 0 0 1000px var(--ewut-uny-white) inset;
  caret-color: var(--ewut-uny-dark);
}

p a {
  color: inherit;
  border-bottom: 1px dotted var(--ewut-uny-grey);
}

p a:hover {
  color: var(--ewut-uny-accent);
  border-bottom: none;
}

/* Builder meta labels (author / date eyebrow inside `.ewub-title-label`) are
   not prose links - when the theme header/footer chrome loads main.css on a
   builder page, the `p a` dotted underline above would otherwise bleed into
   them. Keep those meta links clean. */
p .ewub-title-label a,
p a.ewub-blog__author,
p a.ewub-blog__date {
  border-bottom: none;
}

img {
  max-width: 100%;
  display: block;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
}

input,
textarea,
select {
  font-family: inherit;
}

:root {
  --ewut-uny-dark: #0f0f0f;
  --ewut-uny-grey: #6b6b6b;
  --ewut-uny-medium: #f0f0ee;
  --ewut-uny-light: #f8f8f6;
  --ewut-uny-white: #ffffff;
  --ewut-uny-accent: #e91e8c;
  --ewut-uny-accent-hover: #c4177a;
  --ewut-uny-border: #e5e5e5;
  --ewut-uny-border-dark: #d0d0d0;
  --ewut-uny-muted: #a0a0a0;
  /* Fixed points of the palette. Everything above is repainted by the colour
     scheme (Appearance > Customize > Colors); these two are not, because they
     describe a relationship rather than a shade:

     --ewut-uny-on-accent  text and hairlines drawn ON the accent colour or on
                           an always-dark surface. The accent does not change
                           between schemes, so this stays white in both.
     --ewut-uny-ink        surfaces that are meant to read as dark whatever the
                           scheme: a kbd chip, a tooltip, a dark section.

     Keeping them separate is what lets the scheme flip --ewut-uny-white and
     --ewut-uny-dark without turning button labels dark or leaving white text
     on a light chip. */
  --ewut-uny-on-accent: #ffffff;
  --ewut-uny-ink: #0f0f0f;
  --ewut-uny-font:
    Google Sans, Inter, -apple-system, BlinkMacSystemFont, sans-serif;
}

* {
  font-family: var(--ewut-uny-font);
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

.ewut-rowrap {
  flex-flow: row wrap;
}

.ewut-flex {
  display: flex;
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
}

.c-muted {
  color: var(--ewut-uny-muted) !important;
}

.c-accent {
  color: var(--ewut-uny-accent) !important;
}

.bg-accent {
  background-color: var(--ewut-uny-accent) !important;
}

.bc-border {
  border-style: solid;
  border-color: var(--ewut-uny-border) !important;
}

.bc-accent {
  border-style: solid;
  border-color: var(--ewut-uny-accent) !important;
}

html {
  font-size: 1rem;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
  /* Hidden (visibility:hidden) flyout sub-menus stay in the layout and
       cascade rightward, inflating document width and creating a horizontal
       scrollbar. Clip horizontal overflow at the document level. `clip`
       (not `hidden`) creates no scroll container and preserves sticky. */
  overflow-x: clip;
}

body {
  margin: 0;
  color: var(--ewut-uny-dark);
  background-color: var(--ewut-uny-white);
  font-size: 100%;
  font-family: var(--ewut-uny-font);
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  scroll-behavior: smooth;
  overflow-x: clip;
}

/* Main content fills the space so the footer is pushed to the bottom
   even on short pages (account, cart, 404, etc.). */
body > .ewut-page-content,
body > main {
  flex: 1 0 auto;
}

body > .ewut-site-footer {
  flex-shrink: 0;
}

body:hover {
  background-color: var(--ewut-uny-white);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

p,
figure {
  margin: 0;
  padding: 0;
}

p {
  line-height: 1.6;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--ewut-uny-dark);
  font-weight: 700;
  line-height: 1.3;
}

a {
  text-decoration: none;
}

img {
  max-width: 100%;
  display: block;
}

button {
  cursor: pointer;
  font-family: var(--ewut-uny-font);
}

#root {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
}

.ewut-container {
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}

@media (max-width: 768px) {
  .ewut-container {
    padding-left: 16px;
    padding-right: 16px;
  }
}

.ewut-input-s:focus {
  border-color: var(--ewut-uny-accent);
}

.ewut-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-width: 140px;
  height: 48px;
  padding: 0 28px;
  color: var(--ewut-uny-on-accent);
  /* PIXELS, never em - matches the builder's `.ewub-button`. An `em` label
     rescaled with whatever container the button sat in. */
  font-size: 16px;
  font-weight: 500;
  font-family: var(--ewut-uny-font);
  border-radius: 8px;
  border: none;
  outline: none !important;
  box-shadow: none !important;
  background-color: var(--ewut-uny-accent);
  transition: background-color ease 0.2s;
  cursor: pointer;
  text-decoration: none;
}

.ewut-button:hover {
  background-color: var(--ewut-uny-accent-hover);
  color: var(--ewut-uny-on-accent);
}

.ewut-button.outline {
  color: var(--ewut-uny-dark);
  background-color: transparent;
  border: 2px solid var(--ewut-uny-accent) !important;
}

.ewut-button.outline:hover {
  border-color: var(--ewut-uny-accent) !important;
  background-color: var(--ewut-uny-accent);
  color: var(--ewut-uny-on-accent);
}

.ewut-button.accent {
  background-color: var(--ewut-uny-accent);
}

.ewut-button.accent:hover {
  background-color: var(--ewut-uny-accent-hover);
}

.ewut-button.white {
  background-color: var(--ewut-uny-white);
  color: var(--ewut-uny-dark);
  border-color: var(--ewut-uny-white);
}

.ewut-button.white:hover {
  background-color: var(--ewut-uny-accent);
  color: var(--ewut-uny-on-accent);
  border-color: var(--ewut-uny-accent);
}

.ewut-button.magenta {
  background-color: var(--ewut-uny-accent);
}

.ewut-button.magenta:hover {
  background-color: var(--ewut-uny-accent-hover);
}

.ewut-button.sm {
  height: 38px;
  padding: 0 18px;
  /* 14px, the px equivalent of the old `0.85em`. Buttons take px only. */
  font-size: 14px;
  min-width: auto;
}

.ewut-button.attached {
  border-radius: 0 8px 8px 0;
  min-width: auto;
}

.ewut-button.outline-accent {
  color: var(--ewut-uny-accent);
  background-color: rgba(0, 0, 0, 0);
  border: 2px solid var(--ewut-uny-accent) !important;
}

.ewut-button.outline-accent:hover {
  background-color: var(--ewut-uny-accent);
  color: var(--ewut-uny-on-accent);
  border-color: var(--ewut-uny-accent) !important;
}

.ewut-button.outline-accent-dark {
  color: var(--ewut-uny-dark);
  background-color: rgba(0, 0, 0, 0);
  border: 2px solid var(--ewut-uny-dark) !important;
}

.ewut-button.outline-accent-dark:hover {
  background-color: var(--ewut-uny-accent);
  color: var(--ewut-uny-on-accent);
  border-color: var(--ewut-uny-accent) !important;
}

.ewut-button.outline-white {
  color: var(--ewut-uny-on-accent);
  background-color: rgba(0, 0, 0, 0);
  border: 2px solid var(--ewut-uny-on-accent) !important;
}

.ewut-button.outline-white:hover {
  background-color: var(--ewut-uny-accent);
  color: var(--ewut-uny-on-accent);
  border-color: var(--ewut-uny-accent) !important;
}

.ewut-title-sub {
  font-size: 1.15em;
  font-weight: 700;
  color: var(--ewut-uny-dark);
  line-height: 1.7;
}

@media (max-width: 768px) {
  .ewut-title-sub {
    font-size: 1em;
  }
}

h4.ewut-title-sub,
h3.ewut-title-sub,
h5.ewut-title-sub {
  font-weight: bold;
  color: var(--ewut-uny-dark);
}

h4.title-sub-accent,
h3.title-sub-accent,
h5.title-sub-accent {
  color: var(--ewut-uny-accent);
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  background-color: rgba(var(--ewut-uny-white), 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(0, 0, 0, 0);
  transition:
    border-color ease 0.25s,
    box-shadow ease 0.25s;
}

.site-header.scrolled {
  border-bottom-color: var(--ewut-uny-border);
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.06);
}

.site-header__inner {
  display: flex;
  align-items: center;
  height: 64px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

@media (max-width: 768px) {
  .site-header__inner {
    padding: 0 16px;
  }
}

.site-header__logo {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 1.05em;
  font-weight: 700;
  color: var(--ewut-uny-dark);
  letter-spacing: -0.02em;
  flex-shrink: 0;
  white-space: nowrap;
}

.site-header__logo-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: var(--ewut-uny-accent);
  flex-shrink: 0;
}

.site-header__search-wrap {
  position: relative;
  width: 480px;
  margin: 0 auto;
}

@media (max-width: 1024px) {
  .site-header__search-wrap {
    width: 100%;
    margin: 0 24px;
  }
}

@media (max-width: 768px) {
  .site-header__search-wrap {
    display: none;
  }
}

.site-header__search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ewut-uny-muted);
  font-size: 1em;
  pointer-events: none;
}

.site-header__search {
  width: 100%;
  height: 36px;
  padding: 0 12px 0 34px;
  border: 1px solid var(--ewut-uny-border);
  border-radius: 8px;
  font-family: var(--ewut-uny-font);
  font-size: 0.88em;
  color: var(--ewut-uny-dark);
  background-color: var(--ewut-uny-light);
  outline: none;
  transition:
    border-color ease 0.2s,
    background-color ease 0.2s;
}

.site-header__search::-webkit-input-placeholder {
  color: var(--ewut-uny-muted);
}

.site-header__search:-moz-placeholder {
  color: var(--ewut-uny-muted);
}

.site-header__search::-moz-placeholder {
  color: var(--ewut-uny-muted);
}

.site-header__search:-ms-input-placeholder {
  color: var(--ewut-uny-muted);
}

.site-header__search:focus {
  border-color: var(--ewut-uny-accent);
  background-color: var(--ewut-uny-white);
}

.site-header__nav {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-shrink: 0;
}

.site-header__nav a {
  font-size: 0.88em;
  font-weight: 500;
  color: var(--ewut-uny-grey);
  transition: color ease 0.2s;
  white-space: nowrap;
}

.site-header__nav a:hover {
  color: var(--ewut-uny-dark);
}

@media (max-width: 1024px) {
  .site-header__nav {
    display: none;
  }
}

.hero {
  padding-top: 10vh;
  padding-bottom: 15vh;
  background-color: var(--ewut-uny-white);
  position: relative;
  overflow: hidden;
}

@media (max-width: 1024px) {
  .hero {
    padding-top: 10vh;
    padding-bottom: 10vh;
  }
}

.hero__inner {
  display: flex;
  align-items: center;
  gap: 80px;
  position: relative;
  z-index: 1;
}

@media (max-width: 1024px) {
  .hero__inner {
    flex-direction: column;
    gap: 40px;
  }
}

.hero__text {
  flex: 1;
  padding-top: 16px;
}

.hero__headline {
  font-size: 5em;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.04em;
  color: var(--ewut-uny-dark);
  margin: 0 0 24px;
}

@media (max-width: 1024px) {
  .hero__headline {
    font-size: 3.5em;
  }
}

@media (max-width: 768px) {
  .hero__headline {
    font-size: 2.8em;
  }
}

@media (max-width: 576px) {
  .hero__headline {
    font-size: 2.2em;
  }
}

.hero__lead {
  font-size: 1.15em;
  color: var(--ewut-uny-grey);
  line-height: 1.6;
  margin-bottom: 12px;
}

.hero__sub {
  font-size: 1em;
  color: var(--ewut-uny-muted);
  line-height: 1.7;
}

@media (max-width: 768px) {
  .hero__br {
    display: none;
  }
}

.hero__form-block {
  flex: 0 0 480px;
  max-width: 480px;
}

@media (max-width: 1024px) {
  .hero__form-block {
    flex: none;
    max-width: 100%;
    width: 100%;
    padding-top: 0;
  }
}

.hero__form-label {
  display: block;
  font-size: 0.82em;
  font-weight: 600;
  color: var(--ewut-uny-grey);
  letter-spacing: 0.02em;
  margin-bottom: 8px;
}

.hero__textarea {
  width: 100%;
  min-height: 140px;
  padding: 16px;
  border: 1px solid var(--ewut-uny-border);
  border-radius: 8px;
  font-family: var(--ewut-uny-font);
  font-size: 0.95em;
  color: var(--ewut-uny-dark);
  background-color: var(--ewut-uny-white);
  outline: none;
  resize: vertical;
  transition: border-color ease 0.2s;
  line-height: 1.6;
}

.hero__textarea::-webkit-input-placeholder {
  color: var(--ewut-uny-muted);
}

.hero__textarea:-moz-placeholder {
  color: var(--ewut-uny-muted);
}

.hero__textarea::-moz-placeholder {
  color: var(--ewut-uny-muted);
}

.hero__textarea:-ms-input-placeholder {
  color: var(--ewut-uny-muted);
}

.hero__textarea:focus {
  border-color: var(--ewut-uny-accent);
}

.hero__form-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.hero__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1;
}

.hero__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.hero__bg-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.25;
}

.hero__bg-blob--1 {
  width: 500px;
  height: 500px;
  background: radial-gradient(
    circle,
    rgba(79, 70, 229, 0.18) 0%,
    transparent 70%
  );
  top: -100px;
  right: -60px;
}

.hero__bg-blob--2 {
  width: 300px;
  height: 300px;
  background: radial-gradient(
    circle,
    rgba(79, 70, 229, 0.1) 0%,
    transparent 70%
  );
  bottom: -40px;
  left: 10%;
}

a.tag,
button.tag,
span.tag {
  display: inline-flex;
  align-items: center;
  padding: 5px 11px;
  background-color: var(--ewut-uny-medium);
  border-radius: 999px;
  font-size: 0.78em;
  font-weight: 500;
  color: var(--ewut-uny-grey);
  cursor: pointer;
  transition: all ease 0.15s;
  font-family: var(--ewut-uny-font);
  white-space: nowrap;
  border: none;
  outline: none;
  text-decoration: none;
}

a.tag:hover,
a.tag.active,
button.tag:hover,
button.tag.active,
span.tag:hover,
span.tag.active {
  background-color: var(--ewut-uny-ink);
  color: var(--ewut-uny-on-accent);
}

.section {
  padding-top: 96px;
  padding-bottom: 96px;
}

@media (max-width: 1024px) {
  .section {
    padding-top: 64px;
    padding-bottom: 64px;
  }
}

.section__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

@media (max-width: 768px) {
  .section__inner {
    padding: 0 16px;
  }
}

.section--soft {
  background-color: var(--ewut-uny-light);
}

.section--dark {
  background-color: var(--ewut-uny-ink);
}

.section__label {
  display: block;
  font-size: 0.92em;
  font-weight: 600;
  color: var(--ewut-uny-accent);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.section__header {
  margin-bottom: 48px;
}

@media (max-width: 768px) {
  .section__header {
    margin-bottom: 32px;
  }
}

.problem__stats {
  gap: 0;
}

.problem__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32px 48px;
  border-right: 1px solid var(--ewut-uny-border);
}

@media (max-width: 768px) {
  .problem__stat {
    padding: 24px 32px;
  }
}

.problem__stat:last-child {
  border-right: none;
}

@media (max-width: 576px) {
  .problem__stat {
    border-right: none;
    border-bottom: 1px solid var(--ewut-uny-border);
    width: 100%;
  }

  .problem__stat:last-child {
    border-bottom: none;
  }
}

.problem__stat-num {
  font-size: 3em;
  font-weight: 800;
  color: var(--ewut-uny-dark);
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 8px;
}

@media (max-width: 768px) {
  .problem__stat-num {
    font-size: 2.2em;
  }
}

.problem__stat-label {
  font-size: 0.88em;
  color: var(--ewut-uny-grey);
  text-align: center;
}

.how-step {
  padding: 28px 24px;
  border: 1px solid var(--ewut-uny-border);
  border-radius: 8px;
  height: 100%;
  transition:
    box-shadow ease 0.2s,
    border-color ease 0.2s;
}

.how-step:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.07);
  border-color: var(--ewut-uny-border-dark);
}

.how-step__num {
  display: block;
  font-size: 0.75em;
  font-weight: 700;
  color: var(--ewut-uny-accent);
  letter-spacing: 0.06em;
  margin-bottom: 16px;
}

.how-step__title {
  font-size: 1.05em;
  font-weight: 600;
  color: var(--ewut-uny-dark);
  margin-bottom: 8px;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.how-step__desc {
  font-size: 0.9em;
  color: var(--ewut-uny-grey);
  line-height: 1.65;
}

.ownership {
  background-color: var(--ewut-uny-ink);
}

.ownership__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 96px 24px;
  display: flex;
  align-items: center;
  gap: 80px;
}

@media (max-width: 1024px) {
  .ownership__inner {
    flex-direction: column;
    gap: 48px;
    padding: 64px 24px;
  }
}

@media (max-width: 768px) {
  .ownership__inner {
    padding: 64px 16px;
  }
}

.ownership__content {
  flex: 1;
}

.ownership__content .section__label {
  color: rgba(var(--ewut-uny-on-accent), 0.5);
}

.ownership__title {
  font-size: 3em;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ewut-uny-on-accent);
  margin: 0 0 20px;
}

@media (max-width: 1024px) {
  .ownership__title {
    font-size: 2.2em;
  }
}

@media (max-width: 768px) {
  .ownership__title {
    font-size: 1.8em;
  }
}

.ownership__lead {
  font-size: 1.05em;
  color: rgba(var(--ewut-uny-on-accent), 0.65);
  line-height: 1.65;
  margin-bottom: 28px;
}

.ownership__list {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
}

.ownership__list li {
  font-size: 0.95em;
  color: rgba(var(--ewut-uny-on-accent), 0.8);
  padding: 8px 0;
  border-bottom: 1px solid rgba(var(--ewut-uny-on-accent), 0.08);
  display: flex;
  align-items: center;
  gap: 10px;
}

.ownership__list li::before {
  content: "✓";
  color: var(--ewut-uny-accent);
  font-weight: 700;
  flex-shrink: 0;
}

.ownership__closing {
  font-size: 0.95em;
  color: rgba(var(--ewut-uny-on-accent), 0.5);
  line-height: 1.7;
}

.ownership__visual {
  flex: 0 0 360px;
  max-width: 360px;
}

@media (max-width: 1024px) {
  .ownership__visual {
    flex: none;
    max-width: 100%;
    width: 100%;
  }
}

.ownership__card {
  background-color: rgba(var(--ewut-uny-white), 0.05);
  border: 1px solid rgba(var(--ewut-uny-on-accent), 0.12);
  border-radius: 8px;
  padding: 28px;
}

.ownership__card-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--ewut-uny-accent);
  margin-bottom: 16px;
}

.ownership__card-label {
  display: block;
  font-size: 0.75em;
  font-weight: 600;
  color: rgba(var(--ewut-uny-on-accent), 0.4);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.ownership__card-idea {
  font-size: 1.05em;
  color: var(--ewut-uny-on-accent);
  line-height: 1.55;
  margin-bottom: 20px;
}

.ownership__card-meta {
  display: flex;
  justify-content: space-between;
  font-size: 0.82em;
  color: rgba(var(--ewut-uny-on-accent), 0.4);
}

.for-card {
  padding: 32px 28px;
  border: 1px solid var(--ewut-uny-border);
  border-radius: 8px;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition:
    box-shadow ease 0.2s,
    border-color ease 0.2s;
}

.for-card:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.07);
  border-color: var(--ewut-uny-border-dark);
}

.for-card__icon {
  font-size: 1.5em;
  margin-bottom: 18px;
  display: block;
}

.for-card__role {
  font-size: 1.05em;
  font-weight: 600;
  color: var(--ewut-uny-dark);
  margin-bottom: 10px;
  letter-spacing: -0.01em;
}

.for-card__desc {
  font-size: 0.9em;
  color: var(--ewut-uny-grey);
  line-height: 1.65;
  flex: 1;
  margin-bottom: 20px;
}

.for-card__link {
  font-size: 0.85em;
  font-weight: 600;
  color: var(--ewut-uny-accent);
  transition: color ease 0.15s;
}

.for-card__link:hover {
  color: var(--ewut-uny-accent-hover);
}

.proof-numbers {
  gap: 0;
  border: 1px solid var(--ewut-uny-border);
  border-radius: 8px;
  overflow: hidden;
}

.proof-number {
  flex: 1;
  padding: 32px 24px;
  border-right: 1px solid var(--ewut-uny-border);
}

@media (max-width: 768px) {
  .proof-number {
    padding: 24px 16px;
  }
}

.proof-number:last-child {
  border-right: none;
}

@media (max-width: 576px) {
  .proof-number {
    flex: 0 0 50%;
    border-bottom: 1px solid var(--ewut-uny-border);
  }

  .proof-number:nth-child(2) {
    border-right: none;
  }

  .proof-number:nth-child(3) {
    border-bottom: none;
  }

  .proof-number:last-child {
    border-bottom: none;
  }
}

.proof-number__val {
  display: block;
  font-size: 2.2em;
  font-weight: 800;
  color: var(--ewut-uny-dark);
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 6px;
}

@media (max-width: 768px) {
  .proof-number__val {
    font-size: 1.8em;
  }
}

.proof-number__label {
  font-size: 0.82em;
  color: var(--ewut-uny-grey);
}

.review-card {
  padding: 28px;
  border: 1px solid var(--ewut-uny-border);
  border-radius: 8px;
  transition: box-shadow ease 0.2s;
}

.review-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

.review-card__text {
  font-size: 1em;
  color: var(--ewut-uny-dark);
  line-height: 1.65;
  margin-bottom: 16px;
}

.review-card__author {
  font-size: 0.85em;
  color: var(--ewut-uny-muted);
  font-weight: 500;
}

.idea-card {
  padding: 28px;
  border: 1px solid var(--ewut-uny-border);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition:
    box-shadow ease 0.2s,
    border-color ease 0.2s;
  cursor: pointer;
}

.idea-card:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.07);
  border-color: var(--ewut-uny-border-dark);
}

.idea-card__tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  background-color: var(--ewut-uny-medium);
  border-radius: 999px;
  font-size: 0.75em;
  font-weight: 600;
  color: var(--ewut-uny-grey);
  align-self: flex-start;
}

.idea-card__text {
  font-size: 0.98em;
  color: var(--ewut-uny-dark);
  line-height: 1.6;
  flex: 1;
}

.idea-card__meta {
  display: flex;
  gap: 16px;
  font-size: 0.82em;
  color: var(--ewut-uny-muted);
  border-top: 1px solid var(--ewut-uny-border);
  padding-top: 14px;
}

.ai-feature {
  display: flex;
  gap: 14px;
  padding: 22px 20px;
  background-color: var(--ewut-uny-white);
  border: 1px solid var(--ewut-uny-border);
  border-radius: 8px;
  transition: box-shadow ease 0.2s;
}

.ai-feature:hover {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.ai-feature__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: var(--ewut-uny-accent);
  flex-shrink: 0;
  margin-top: 5px;
}

.ai-feature__label {
  font-size: 0.95em;
  font-weight: 600;
  color: var(--ewut-uny-dark);
  margin-bottom: 4px;
}

.ai-feature__desc {
  font-size: 0.85em;
  color: var(--ewut-uny-grey);
  line-height: 1.6;
}

.mission__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 96px 24px calc(96px + 5vh);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

@media (max-width: 1024px) {
  .mission__inner {
    padding: 64px 24px calc(64px + 5vh);
  }
}

@media (max-width: 768px) {
  .mission__inner {
    padding: 64px 16px calc(64px + 5vh);
  }
}

.mission__label {
  display: block;
  font-size: 0.92em;
  font-weight: 600;
  color: var(--ewut-uny-accent);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 40px;
}

.mission__quote {
  margin: 0;
  padding: 0;
  border: none;
  max-width: 640px;
}

.mission__quote p {
  font-size: 1.9em;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--ewut-uny-on-accent);
  margin-bottom: 28px;
}

.mission__quote p:last-child {
  margin-bottom: 0;
}

@media (max-width: 1024px) {
  .mission__quote p {
    font-size: 1.7em;
  }
}

@media (max-width: 768px) {
  .mission__quote p {
    font-size: 1.35em;
  }
}

@media (max-width: 576px) {
  .mission__quote p {
    font-size: 1.15em;
  }
}

.cta-section {
  border-top: 1px solid var(--ewut-uny-border);
}

.cta-section__inner {
  max-width: 680px;
  margin: 0 auto;
  padding: 96px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

@media (max-width: 1024px) {
  .cta-section__inner {
    padding: 64px 24px;
  }
}

@media (max-width: 768px) {
  .cta-section__inner {
    padding: 64px 16px;
  }
}

.cta-section__form {
  width: 100%;
  margin-top: 32px;
}

.cta-section__textarea {
  width: 100%;
  min-height: 100px;
  padding: 14px 16px;
  border: 1px solid var(--ewut-uny-border);
  border-radius: 8px;
  font-family: var(--ewut-uny-font);
  font-size: 0.95em;
  color: var(--ewut-uny-dark);
  background-color: var(--ewut-uny-white);
  outline: none;
  resize: none;
  transition: border-color ease 0.2s;
  line-height: 1.6;
}

.cta-section__textarea::-webkit-input-placeholder {
  color: var(--ewut-uny-muted);
}

.cta-section__textarea:-moz-placeholder {
  color: var(--ewut-uny-muted);
}

.cta-section__textarea::-moz-placeholder {
  color: var(--ewut-uny-muted);
}

.cta-section__textarea:-ms-input-placeholder {
  color: var(--ewut-uny-muted);
}

.cta-section__textarea:focus {
  border-color: var(--ewut-uny-accent);
}

.cta-section__actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 16px;
}

.site-footer {
  border-top: 1px solid var(--ewut-uny-border);
  padding: 32px 0;
}

.site-footer__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

@media (max-width: 768px) {
  .site-footer__inner {
    flex-direction: column;
    align-items: flex-start;
    padding: 0 16px;
  }
}

.site-footer__brand {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 1em;
  font-weight: 700;
  color: var(--ewut-uny-dark);
  letter-spacing: -0.02em;
}

.site-footer__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: var(--ewut-uny-accent);
}

.site-footer__copy {
  font-size: 0.82em;
  color: var(--ewut-uny-muted);
}

.site-footer__nav {
  display: flex;
  gap: 24px;
}

.site-footer__nav a {
  font-size: 0.82em;
  color: inherit;
  transition: color ease 0.2s;
}

.site-footer__nav a:hover {
  color: var(--ewut-uny-dark);
}

@keyframes scroll-left {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

.carousel {
  margin-top: 64px;
  overflow: hidden;
}

.carousel__track {
  display: flex;
  gap: 16px;
  width: max-content;
  animation: scroll-left 40s linear infinite;
  padding: 4px 0;
}

.carousel__track:hover {
  animation-play-state: paused;
}

.carousel__card {
  flex: 0 0 260px;
  padding: 20px 20px 16px;
  border: 1px solid var(--ewut-uny-border);
  border-radius: 8px;
  background-color: var(--ewut-uny-white);
  transition:
    box-shadow ease 0.2s,
    border-color ease 0.2s;
  cursor: pointer;
}

.carousel__card:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border-color: var(--ewut-uny-border-dark);
}

.carousel__card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.carousel__tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  background-color: var(--ewut-uny-medium);
  border-radius: 999px;
  font-size: 0.75em;
  font-weight: 600;
  color: var(--ewut-uny-grey);
}

.carousel__badge {
  font-size: 0.75em;
  font-weight: 600;
  color: var(--ewut-uny-accent);
}

.carousel__card-title {
  font-size: 0.88em;
  color: var(--ewut-uny-dark);
  line-height: 1.55;
  margin-bottom: 14px;
}

.carousel__card-meta {
  display: flex;
  gap: 14px;
  font-size: 0.75em;
  color: var(--ewut-uny-muted);
  border-top: 1px solid var(--ewut-uny-border);
  padding-top: 10px;
}

.funded-card {
  padding: 26px 24px;
  border: 1px solid var(--ewut-uny-border);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  transition:
    box-shadow ease 0.2s,
    border-color ease 0.2s;
}

.funded-card:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border-color: var(--ewut-uny-accent);
}

.funded-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.funded-card__tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  background-color: var(--ewut-uny-medium);
  border-radius: 999px;
  font-size: 0.75em;
  font-weight: 600;
  color: var(--ewut-uny-grey);
}

.funded-card__funded {
  font-size: 0.78em;
  font-weight: 700;
  color: var(--ewut-uny-accent);
}

.funded-card__title {
  font-size: 0.95em;
  color: var(--ewut-uny-dark);
  line-height: 1.55;
  min-height: 3.1em;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin-bottom: 14px;
}

.funded-card__needed {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-top: 1px solid var(--ewut-uny-border);
  padding-top: 12px;
  padding-bottom: 12px;
  margin-bottom: 14px;
}

.funded-card__needed-label {
  font-size: 0.72em;
  font-weight: 600;
  color: var(--ewut-uny-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.funded-card__needed-val {
  font-size: 0.88em;
  color: var(--ewut-uny-dark);
  font-weight: 500;
}

.funded-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 4px;
}

.funded-card__supporters {
  font-size: 0.82em;
  color: var(--ewut-uny-muted);
}

.ewut-page-content {
  width: 100%;
  padding-top: 24px;
  padding-bottom: 60px;
}

/* Below the widest tier the desktop 60px is too much, but zero was too little:
   the footer's own spacing lives on its INNER wrapper (.ewut-site-footer__main
   has padding-top: 40px), while the footer element itself has no top padding and
   carries a 1px top border. So with padding-bottom: 0 the content ended exactly
   on that border - measured 0px from the last element to the footer edge on the
   login page, which reads as the content being glued to the footer. 40px gives
   the page bottom its own air before the divider. The top padding stays: above
   the content is the header, which has no bottom spacing of its own. */
@media (max-width: 1024px) {
  .ewut-page-content {
    padding-top: 24px;
    padding-bottom: 40px;
  }
}

.ewut-article {
  margin: 0 auto;
}

/* Full-width article - for standard pages (page.php) and WooCommerce
   cart/checkout/account where the narrow 780px reading column is wrong.
   Fills the parent .ewut-container (1200px) instead. */
.ewut-article--full {
  max-width: none;
}

.ewut-article__header {
  margin-bottom: 24px;
}

/* Standard-format single posts give the header a touch more breathing room
   below it before the body copy. */
.single-format-standard .ewut-article__header {
  margin-bottom: 32px;
}

.ewut-article__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 16px;
  font-size: 0.85em;
  color: var(--ewut-uny-dark);
  margin: 20px 0 0;
  padding: 16px 0;
  border-bottom: 1px solid var(--ewut-uny-border);
  border-top: 1px solid var(--ewut-uny-border);
}

/* Date must never be squeezed by a long category list. */
.ewut-article__date {
  flex-shrink: 0;
  white-space: nowrap;
}

/* More than 5 categories: the category list claims the whole row so the
   date drops onto its own line underneath instead of being crushed. */
.ewut-article__meta:has(.ewut-article__cat a:nth-of-type(6))
  .ewut-article__cat {
  flex: 1 1 100%;
}

/* Footer variant - meta sits after the article body, above the line
   that separates it from the tags. */
.ewut-article__meta--footer {
  margin: 0 0 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--ewut-uny-border);
}

.ewut-article__cat,
.ewut-article__author,
.ewut-article__date {
  display: inline;
}

.ewut-article__meta-icon {
  width: 16px;
  height: 16px;
  margin-right: 6px;
  vertical-align: middle;
  color: var(--ewut-uny-dark);
}

.ewut-article__date .ewut-article__meta-icon {
  transform: translateY(-2px);
}

.ewut-article__cat .ewut-article__meta-icon {
  transform: translateY(-2px);
}

.ewut-article__cat a,
.ewut-article__author a,
.ewut-article__date a {
  color: inherit;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s;
}

.ewut-article__cat a:hover,
.ewut-article__author a:hover,
.ewut-article__date a:hover {
  color: var(--ewut-uny-accent);
}

.ewut-article__title {
  font-size: 3.25em;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ewut-uny-dark);
  margin: 0 0 16px;
  /* Long unbreakable titles (e.g. the Theme Unit Test "Taumatawhaka…"
       title) must wrap instead of forcing a horizontal page scroll. */
  overflow-wrap: break-word;
  word-wrap: break-word;
  -webkit-hyphens: auto;
  hyphens: auto;
}

@media (max-width: 768px) {
  .ewut-article__title {
    font-size: 2.2em;
  }
}

.ewut-article__thumb {
  border-radius: 8px;
  overflow: hidden;
  margin-top: 24px;
  margin-bottom: 24px;
}

/* Breadcrumbs now sit above the layout row, so the article hero (cover/video)
   is the first thing in the column - drop its top margin so it lines up with
   the top of the sidebar. */
.ewut-article__header > .ewut-article__thumb:first-child {
  margin-top: 0;
}

.ewut-article__thumb img {
  width: 100%;
  height: auto;
}

/* Portrait covers keep their natural (vertical) proportions instead of
   being cropped to the 2:1 landscape band. Cap the height so a very tall
   image doesn't dominate the viewport, and centre it. */
.ewut-article__thumb--portrait {
  display: flex;
  justify-content: center;
  background: var(--ewut-uny-light);
}

.ewut-article__thumb--portrait img {
  width: auto;
  max-width: 100%;
  max-height: 80vh;
  height: auto;
}

.ewut-article__thumb--video {
  position: relative;
  aspect-ratio: 16 / 9;
}

.ewut-article__thumb--video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Video facade button (click-to-play). Fills the 16:9 box, shows the poster
   image as background, and paints a centred play triangle. The real player
   iframe replaces this button on click (see main.js). */
.ewut-video-facade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  cursor: pointer;
  background-color: var(--ewut-uny-ink);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ewut-video-facade::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(15, 15, 15, 0.25);
  transition: background 0.2s ease;
}

.ewut-video-facade:hover::after,
.ewut-video-facade:focus-visible::after {
  background: rgba(15, 15, 15, 0.1);
}

.ewut-video-facade__play {
  position: relative;
  z-index: 1;
  width: 68px;
  height: 48px;
  border-radius: 8px;
  background: var(--ewut-uny-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease;
}

.ewut-video-facade:hover .ewut-video-facade__play,
.ewut-video-facade:focus-visible .ewut-video-facade__play {
  transform: scale(1.08);
}

.ewut-video-facade__play::before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 0 10px 17px;
  border-color: transparent transparent transparent var(--ewut-uny-on-accent);
  margin-left: 3px;
}

/* In-content video embeds (oEmbed inside the article body): responsive 16:9
   box holding either the live player iframe or the click-to-play facade. */
.ewut-video-embed {
  position: relative;
  aspect-ratio: 16 / 9;
  margin: 24px 0;
  border-radius: 8px;
  overflow: hidden;
}

.ewut-video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.ewut-article__body {
  font-size: var(--ewut-uny-fs-body);
  line-height: var(--ewut-uny-lh-base);
  color: var(--ewut-uny-dark);
}

/* The first content element must sit exactly `.ewut-article__header`'s 24px
   below the breadcrumbs - its own top margin (blockquote / figure / caption
   all carry 32px) would otherwise collapse through and win, opening a 32px
   gap. Zero it so the header's margin-bottom alone governs the spacing. */
.ewut-article__body.ewut-article__body > *:first-child,
.ewut-article__body.ewut-article__body > *:first-child > *:first-child {
  margin-top: 0;
}

/* QA hardening: long unbreakable words / URLs inside prose must wrap so
   Theme-Unit-Test content never forces a horizontal page scroll. */
.ewut-article__body,
.ewut-article__body p,
.ewut-article__body li,
.ewut-article__body dd,
.ewut-article__body dt,
.ewut-article__body h1,
.ewut-article__body h2,
.ewut-article__body h3,
.ewut-article__body h4,
.ewut-article__body h5,
.ewut-article__body h6,
.ewut-article__body a {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

.ewut-article__body h1 {
  font-size: var(--ewut-uny-fs-h1);
  font-weight: var(--ewut-uny-fw-head);
  line-height: var(--ewut-uny-lh-tight);
  margin: 48px 0 20px;
  letter-spacing: -0.02em;
}

.ewut-article__body h2 {
  font-size: var(--ewut-uny-fs-h2);
  font-weight: var(--ewut-uny-fw-head);
  line-height: var(--ewut-uny-lh-tight);
  margin: 40px 0 16px;
  letter-spacing: -0.01em;
}

.ewut-article__body h3 {
  font-size: var(--ewut-uny-fs-h3);
  font-weight: 700;
  line-height: 1.25;
  margin: 32px 0 12px;
}

.ewut-article__body h4 {
  font-size: var(--ewut-uny-fs-h4);
  font-weight: 700;
  line-height: 1.3;
  margin: 24px 0 10px;
}

.ewut-article__body h5 {
  font-size: var(--ewut-uny-fs-h5);
  font-weight: 600;
  line-height: 1.35;
  margin: 20px 0 8px;
}

.ewut-article__body h6 {
  font-size: var(--ewut-uny-fs-h6);
  font-weight: 600;
  line-height: 1.4;
  margin: 16px 0 8px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ewut-uny-dark);
}

/* Embedded WordPress block headings inside post content.
   Blocks such as Site Title, Post Title and Query-Loop Post Title render as
   h1/h2 but are NOT section headings - they're small labels/list items inside
   the article. Our hero-scale h1/h2 rules blow them up (Site Title at 60px,
   query-loop titles at ~49px), which looks wrong in body copy. Bring them
   down to a sensible inline-content size. Real prose h1-h6 are untouched. */
.ewut-article__body :is(h1, h2, h3, h4, h5, h6).wp-block-site-title,
.ewut-article__body :is(h1, h2, h3, h4, h5, h6).wp-block-post-title {
  font-size: var(--ewut-uny-fs-h4);
  font-weight: 600;
  line-height: 1.3;
  margin: 0 0 8px;
  letter-spacing: 0;
  text-transform: none;
}

/* Query-loop post titles are repeated list items - keep them compact. */
.ewut-article__body .wp-block-query .wp-block-post-title {
  font-size: var(--ewut-uny-fs-h5);
  margin: 0;
}

.ewut-article__body p,
.ewut-article__body li,
.ewut-article__body dd,
.ewut-article__body dt {
  margin-bottom: 20px;
  font-size: 18px;
  line-height: 1.65;
  color: var(--ewut-uny-dark);
}

.ewut-article__body p {
  margin: 16px 0 8px;
  font-size: 18px;
  line-height: 1.5;
  color: var(--ewut-uny-dark);
}

.ewut-article__body li,
.ewut-article__body dt {
  margin-bottom: 6px;
}

.ewut-article__body > p.has-lead,
.ewut-article__body > p.is-lead {
  font-size: var(--ewut-uny-fs-lead);
  line-height: 1.6;
  font-weight: 600;
  color: var(--ewut-uny-dark);
}

.ewut-article__body ul,
.ewut-article__body ol {
  padding-left: 24px;
  margin-bottom: 20px;
}

.ewut-article__body ul {
  list-style: circle;
}

.ewut-article__body ol {
  list-style: decimal;
}

/* Structural WordPress block lists must NOT inherit the prose bullet/number
   markers above - they are layout containers, not content lists. Reset them:
   Query post-template, Comment template, Navigation/page-list. */
.ewut-article__body .wp-block-post-template,
.ewut-article__body .wp-block-comment-template,
.ewut-article__body .wp-block-navigation__container,
.ewut-article__body .wp-block-page-list,
.ewut-article__body .wp-block-navigation ul,
.ewut-article__body .wp-block-post-template li,
.ewut-article__body .wp-block-comment-template li {
  list-style: none;
  padding-left: 0;
  margin-left: 0;
}

.ewut-article__body ul li,
.ewut-article__body ol li {
  margin-bottom: 6px;
}

/* Nested lists keep the same 6px item rhythm, not the 20px block gap */
.ewut-article__body li > ul,
.ewut-article__body li > ol {
  margin-top: 6px;
  margin-bottom: 6px;
}

.ewut-article__body blockquote {
  border-left: 3px solid var(--ewut-uny-accent);
  padding: 16px 24px;
  margin: 32px 0;
  font-size: 0.9em;
  font-weight: 400;
  color: var(--ewut-uny-grey);
  font-style: italic;
  background: var(--ewut-uny-light);
  border-radius: 8px;
}

.ewut-article__body blockquote p {
  font-size: 1.15em;
  font-weight: 500;
  line-height: 1.5;
  margin: 0;
  color: var(--ewut-uny-dark);
}

.ewut-article__body blockquote p + p {
  margin-top: 16px;
}

/* Large style quote (is-style-large) - core strips the padding to `0 1em`
   and removes the left border, leaving the quote flush and border-less.
   Restore the theme's card look (padding, accent left border) and give the
   text a comfortable size. */
.ewut-article__body blockquote.is-style-large {
  padding: 24px 32px;
  border-left: 3px solid var(--ewut-uny-accent);
}

.ewut-article__body blockquote.is-style-large p {
  font-size: 1.4em;
  line-height: 1.4;
}

.ewut-article__body blockquote.is-style-large cite {
  font-size: 1em;
  text-align: left;
}

/* Right-aligned quote - move the accent border to the right so it sits on
   the same side the text is aligned to. */
.ewut-article__body blockquote.has-text-align-right {
  border-left: none;
  border-right: 3px solid var(--ewut-uny-accent);
}

.ewut-article__body img {
  border-radius: 8px;
  max-width: 100%;
  height: auto;
}

.ewut-article__body figure {
  margin: 32px 0;
}

/* A large standalone image dropped in prose (optionally wrapped in a link)
   carries `.alignnone` and its intrinsic pixel width, leaving it narrower
   than the text column. Stretch such block-level images to fill the column. */
.ewut-article__body p > img.alignnone,
.ewut-article__body p > a > img.alignnone,
.ewut-article__body > img.alignnone,
.ewut-article__body > a > img.alignnone {
  width: 100%;
}

.ewut-article__body figure figcaption {
  display: block;
  font-size: 0.85em;
  color: var(--ewut-uny-muted);
  text-align: center;
  margin-top: 6px;
}

/* Core (inline block styles) forces `display: table-caption` on captions of
   aligned images (`.wp-block-image.aligncenter > figcaption`, etc.), which
   shrink-wraps the caption to its longest word and breaks it onto multiple
   lines off to one side. Force it back to a normal centered block that
   spans the figure width. Selector matches core's specificity + wins on
   source order. */
.ewut-article__body .wp-block-image.aligncenter > figcaption,
.ewut-article__body .wp-block-image.alignleft > figcaption,
.ewut-article__body .wp-block-image.alignright > figcaption,
.ewut-article__body .wp-block-image .aligncenter > figcaption,
.ewut-article__body .wp-block-image .alignleft > figcaption,
.ewut-article__body .wp-block-image .alignright > figcaption {
  display: block;
  text-align: center;
}

/* Media inside a <figure> must not add its own bottom margin - the gap to
   the caption is owned by figcaption's margin-top (6px). Without this, the
   generic `.ewut-article__body video/audio { margin: 24px 0 }` rule pushes
   the caption ~24px below the media. Media OUTSIDE a figure keeps its margin. */
.ewut-article__body figure > video,
.ewut-article__body figure > audio,
.ewut-article__body figure > img {
  margin: 0;
}

/* Classic [gallery] shortcode - responsive column grid (1-9). WordPress
   outputs `.gallery.gallery-columns-N` with `.gallery-item` children; the
   default markup uses inline widths we override with CSS grid. */
.ewut-article__body .gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 32px 0;
}

.ewut-article__body .gallery-columns-1 {
  grid-template-columns: repeat(1, 1fr);
}
.ewut-article__body .gallery-columns-2 {
  grid-template-columns: repeat(2, 1fr);
}
.ewut-article__body .gallery-columns-3 {
  grid-template-columns: repeat(3, 1fr);
}
.ewut-article__body .gallery-columns-4 {
  grid-template-columns: repeat(4, 1fr);
}
.ewut-article__body .gallery-columns-5 {
  grid-template-columns: repeat(5, 1fr);
}
.ewut-article__body .gallery-columns-6 {
  grid-template-columns: repeat(6, 1fr);
}
.ewut-article__body .gallery-columns-7 {
  grid-template-columns: repeat(7, 1fr);
}
.ewut-article__body .gallery-columns-8 {
  grid-template-columns: repeat(8, 1fr);
}
.ewut-article__body .gallery-columns-9 {
  grid-template-columns: repeat(9, 1fr);
}

/* Neutralise WordPress' inline per-item width so the grid controls layout. */
.ewut-article__body .gallery-item {
  width: auto !important;
  margin: 0 !important;
  text-align: center;
}

.ewut-article__body .gallery-item img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: 1px solid var(--ewut-uny-border);
  border-radius: 8px;
}

.ewut-article__body .gallery-item .gallery-caption {
  display: block;
  font-size: 0.8em;
  color: var(--ewut-uny-muted);
  margin-top: 6px;
}

@media (max-width: 768px) {
  .ewut-article__body .gallery {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  .ewut-article__body .gallery-columns-1 {
    grid-template-columns: repeat(1, 1fr) !important;
  }
  .ewut-article__body .gallery-columns-2 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 480px) {
  .ewut-article__body .gallery {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Paged posts (<!--nextpage-->) - page links under the content. */
.ewut-article__page-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 32px 0;
}

.ewut-article__page-links-label {
  font-weight: 600;
  margin-right: 4px;
}

.ewut-article__page-links .ewut-article__page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--ewut-uny-border);
  border-radius: 8px;
  font-size: 0.9em;
  font-weight: 500;
  line-height: 1;
  color: var(--ewut-uny-dark);
  transition:
    color 0.15s,
    border-color 0.15s,
    background-color 0.15s;
}

/* The <a> is only a transparent wrapper around the bordered span. */
.ewut-article__page-links a {
  display: inline-flex;
}

.ewut-article__page-links a:hover .ewut-article__page-link {
  background-color: var(--ewut-uny-accent);
  border-color: transparent;
  color: var(--ewut-uny-on-accent);
}

/* Current page: WP wraps it in .current (not an <a>). */
.ewut-article__page-links .current .ewut-article__page-link {
  background: var(--ewut-uny-light);
  color: var(--ewut-uny-muted);
  border-color: var(--ewut-uny-border-dark);
}

/* WordPress content alignment (alignleft / right / center / none / wide / full) */
.ewut-article__body .alignleft {
  float: left;
  margin: 8px 32px 16px 0;
  max-width: 50%;
  height: auto;
}

.ewut-article__body .alignright {
  float: right;
  margin: 8px 0 16px 32px;
  max-width: 50%;
  height: auto;
}

.ewut-article__body .aligncenter {
  display: block;
  margin: 24px auto;
  height: auto;
  clear: both;
}

/* A resized image inside an aligncenter figure is a block-level <img> with
   its own width, so text-align:center on the figure can't move it. Centre it
   with auto side-margins. */
.ewut-article__body figure.aligncenter {
  text-align: center;
  clear: both;
}

.ewut-article__body figure.aligncenter > img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.ewut-article__body .alignnone {
  display: block;
  margin: 24px 0;
  height: auto;
  clear: both;
}

/* A full-width (non-floated, non-aligned) figure/image must also clear any
   preceding float so it starts on its own line. */
.ewut-article__body > figure.wp-block-image:not(.alignleft):not(.alignright) {
  clear: both;
}

/* Headings clear floats so each new section starts below any wrapped image
   instead of sitting beside a tall floated figure from the section above. */
.ewut-article__body h2,
.ewut-article__body h3 {
  clear: both;
}

.ewut-article__body .alignwide {
  max-width: calc(100% + 120px);
  margin-left: -60px;
  margin-right: -60px;
  width: auto;
}

.ewut-article__body .alignfull {
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: 100vw;
}

/* WooCommerce blocks (cart / checkout) render through the_content with
   an `alignwide` class on their wrapper. The prose `.alignwide` rule
   above pulls them 60px past the container on each side; WC layout
   should stay inside the article width, so neutralise it. */
.ewut-article__body .wp-block-woocommerce-cart.alignwide,
.ewut-article__body .wp-block-woocommerce-checkout.alignwide,
.ewut-article__body .wp-block-woocommerce-cart.alignfull,
.ewut-article__body .wp-block-woocommerce-checkout.alignfull {
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
  width: auto;
}

/* With a sidebar the article is a narrow column next to the aside.
   The break-out `alignwide`/`alignfull` rules above would push content
   past the article edge and over/under the sidebar, so constrain any
   aligned block to the article width whenever a sidebar is present. */
.ewut-layout-sidebar__main .ewut-article__body .alignwide,
.ewut-layout-sidebar__main .ewut-article__body .alignfull {
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
  width: auto;
}

/* Media & Text block (core). Side padding only makes sense when the block
   has a background colour - it keeps text and image off the coloured edge.
   Core always adds `padding: 0 8%` to the text column; mirror that on the
   media column so a backgrounded block is symmetric on both sides. */
.ewut-article__body
  .wp-block-media-text.has-background
  .wp-block-media-text__media {
  padding-left: 8%;
  padding-right: 8%;
}
.ewut-article__body
  .wp-block-media-text.has-background.has-media-on-the-right
  .wp-block-media-text__media {
  padding-left: 0;
}
.ewut-article__body
  .wp-block-media-text.has-background:not(.has-media-on-the-right)
  .wp-block-media-text__media {
  padding-right: 0;
}

/* No background → no outer gutter needed, but keep the inner gap between
   text and image. Block 1 has media on the left / text on the right, so the
   content's RIGHT padding is the outer edge (drop it) and its LEFT padding
   is the gap to the image (keep). Mirror for `has-media-on-the-right`. */
.ewut-article__body
  .wp-block-media-text:not(.has-background):not(.has-media-on-the-right)
  > .wp-block-media-text__content {
  padding-right: 0;
}
.ewut-article__body
  .wp-block-media-text:not(.has-background).has-media-on-the-right
  > .wp-block-media-text__content {
  padding-left: 0;
}

@media (max-width: 768px) {
  .ewut-article__body .alignleft,
  .ewut-article__body .alignright {
    float: none;
    display: block;
    margin: 24px 0;
    max-width: 100%;
  }
  .ewut-article__body .alignwide {
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
}

/* Cover block text readability. The overlay sits in `::before` with
   `z-index: 1`. In the legacy cover markup the text (`.wp-block-cover-text`)
   is a direct child WITHOUT its own stacking context, so the semi-transparent
   overlay paints OVER the white text and washes it out to the overlay colour
   (e.g. pale pink). Lift the text/inner-container above the overlay so the
   white reads as solid white. */
.ewut-article__body .wp-block-cover .wp-block-cover__inner-container,
.ewut-article__body .wp-block-cover > .wp-block-cover-text {
  position: relative;
  z-index: 2;
}

/* WordPress captions (classic [caption] + figure) */
.ewut-article__body .wp-caption {
  max-width: 100%;
  margin: 32px 0;
}

/* Empty classic caption wrappers (an orphaned `[caption]` shortcode whose
   image was removed, leaving `<dl class="wp-caption"><dt></dt></dl>`) render
   as a blank 32px gap before the real content. Hide any caption that has no
   image inside so the stray margin disappears. */
.ewut-article__body .wp-caption:not(:has(img)) {
  display: none;
}

/* A stray `<p>&nbsp;</p>` left in the content right after that orphaned
   caption adds another empty line before the image. Collapse an empty
   paragraph that immediately follows the (now hidden) empty caption. */
.ewut-article__body .wp-caption:not(:has(img)) + p:not(:has(*)) {
  display: none;
}

.ewut-article__body .wp-caption.alignleft {
  margin: 8px 32px 16px 0;
}

.ewut-article__body .wp-caption.alignright {
  margin: 8px 0 16px 32px;
}

.ewut-article__body .wp-caption img {
  border-radius: 8px;
  height: auto;
  max-width: 100%;
}

/* Classic captions carry an inline `width:Npx` from WordPress that pins the
   figure to the image's intrinsic width, leaving it narrower than the text
   column. For centered / non-floated captions, ignore that inline width and
   let the figure + image fill the column. Floated (left/right) captions keep
   their intrinsic size so text can wrap beside them. */
.ewut-article__body .wp-caption.aligncenter,
.ewut-article__body .wp-caption.alignnone,
.ewut-article__body .wp-caption:not(.alignleft):not(.alignright) {
  width: 100% !important;
}

.ewut-article__body .wp-caption.aligncenter img,
.ewut-article__body .wp-caption.alignnone img,
.ewut-article__body .wp-caption:not(.alignleft):not(.alignright) img {
  width: 100%;
}

.ewut-article__body .wp-caption-text,
.ewut-article__body .wp-element-caption {
  font-size: 0.95em;
  color: var(--ewut-uny-muted);
  text-align: left;
  line-height: 1.4;
  margin-top: 8px;
}

/* Caption alignment follows the image's alignment: a centered image gets a
   centered caption, a right-aligned image a right-aligned caption. Left /
   none stay left (the base rule above). Covers both classic `.wp-caption`
   figures and block-image `figcaption`. */
.ewut-article__body .wp-caption.aligncenter .wp-caption-text,
.ewut-article__body figure.aligncenter figcaption,
.ewut-article__body .wp-block-image.aligncenter figcaption {
  text-align: center;
}

.ewut-article__body .wp-caption.alignright .wp-caption-text,
.ewut-article__body figure.alignright figcaption,
.ewut-article__body .wp-block-image.alignright figcaption {
  text-align: right;
}

/* Clear floats so following blocks don't wrap under aligned media */
.ewut-article__body::after {
  content: "";
  display: block;
  clear: both;
}

/* Chat post format - dialogue rows. Speaker name is emphasised and the two
   speakers alternate with a subtle zebra background so the conversation is
   easy to follow. */
.ewut-article__body .ewut-chat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 24px 0;
  border-radius: 8px;
  overflow: hidden;
}

.ewut-article__body .ewut-chat__row {
  margin: 0;
  padding: 12px 16px;
  line-height: 1.6;
}

.ewut-article__body .ewut-chat__row--a {
  background: var(--ewut-uny-light);
}

.ewut-article__body .ewut-chat__row--b {
  background: var(--ewut-uny-medium);
}

.ewut-article__body .ewut-chat__row--cont {
  padding-top: 0;
}

.ewut-article__body .ewut-chat__speaker {
  font-weight: 700;
  color: var(--ewut-uny-dark);
  margin-right: 4px;
}

.ewut-article__body .ewut-chat__text {
  color: var(--ewut-uny-dark);
}

/* Quote post format - large display pull quote in the theme style. */
.ewut-article__body .ewut-quote-format blockquote {
  border-left: 3px solid var(--ewut-uny-accent);
  padding: 16px 24px;
  margin: 32px 0;
  font-size: 1em;
  font-weight: 400;
  color: var(--ewut-uny-grey);
  font-style: italic;
  background: var(--ewut-uny-light);
  border-radius: 8px;
}

.ewut-article__body .ewut-quote-format blockquote p {
  font-size: var(--ewut-uny-fs-quote);
  font-weight: 500;
  font-style: italic;
  line-height: 1.5;
  margin: 0;
  color: var(--ewut-uny-dark);
}

.ewut-article__body .ewut-quote-format blockquote cite {
  display: block;
  margin-top: 12px;
  font-size: 0.85em;
  font-weight: 500;
  font-style: italic;
  color: var(--ewut-uny-grey);
}

.ewut-article__body .ewut-quote-format blockquote cite::before {
  /* Typographic em-dash before the quote attribution. This is a design
     element, not prose - the project-wide "no em-dash" rule targets UI
     strings and documentation, not typography. */
  content: "\2014 ";
}

/* Link post format - themed link card with icon. */
.ewut-article__body .ewut-link-card {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 24px 0;
  padding: 20px 24px;
  background: var(--ewut-uny-light);
  border: 0;
  border-radius: 8px;
  color: var(--ewut-uny-dark);
  font-size: 1.15em;
  font-weight: 600;
  transition:
    background-color 0.15s,
    color 0.15s;
}

.ewut-article__body .ewut-link-card:hover {
  color: var(--ewut-uny-accent);
}

.ewut-article__body .ewut-link-card__icon {
  flex-shrink: 0;
  color: var(--ewut-uny-accent);
}

.ewut-article__body .ewut-link-card__label {
  flex: 1 1 auto;
  overflow-wrap: anywhere;
}

.ewut-article__body .ewut-link-card__arrow {
  flex-shrink: 0;
  opacity: 0.6;
}

/* Facebook / Instagram embed fallback - themed card shown when WordPress
   can't produce a real embed (Meta closed unauthenticated oEmbed in 2020).
   Mirrors the link-card look with a network icon and an external-link arrow. */
.ewut-article__body .ewut-embed-card {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 24px 0;
  padding: 20px 24px;
  background: var(--ewut-uny-light);
  border: 0;
  border-radius: 8px;
  color: var(--ewut-uny-dark);
  font-size: 1.15em;
  font-weight: 600;
  transition:
    background-color 0.15s,
    color 0.15s;
}

.ewut-article__body .ewut-embed-card:hover {
  color: var(--ewut-uny-accent);
}

.ewut-article__body .ewut-embed-card__icon {
  flex-shrink: 0;
  display: inline-flex;
  color: var(--ewut-uny-accent);
}

.ewut-article__body .ewut-embed-card__label {
  flex: 1 1 auto;
  overflow-wrap: anywhere;
  line-height: 1.35;
}

.ewut-article__body .ewut-embed-card__arrow {
  flex-shrink: 0;
  opacity: 0.6;
}

/* Audio post format - themed media card with a music icon, track label and
   a native HTML5 player (mirrors the link card look). */
.ewut-article__body .ewut-audio-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 24px 0;
  padding: 20px 24px;
  border: 1px solid var(--ewut-uny-border);
  border-radius: 8px;
  color: var(--ewut-uny-dark);
}

.ewut-article__body .ewut-audio-card__head {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 1.15em;
  font-weight: 600;
}

.ewut-article__body .ewut-audio-card__icon {
  flex-shrink: 0;
  color: var(--ewut-uny-accent);
}

.ewut-article__body .ewut-audio-card__label {
  flex: 1 1 auto;
  overflow-wrap: anywhere;
}

.ewut-article__body .ewut-audio-card__head > svg {
  margin-left: 8px;
}

/* Status post format - reuses the author-bio card markup/styling with a
   "Status" eyebrow (see ewut_uny_status_content in functions.php).
   Adds paired ewut-status__* classes for standalone targeting; only
   difference from the author box is the light fill. */
.ewut-article__body .ewut-status {
  background: var(--ewut-uny-light);
  border: 0;
}

.ewut-article__body .ewut-status__text p {
  margin: 0;
}

/* Aside post format - a highlighted "note in the margin". */
.ewut-article__body .ewut-aside {
  margin: 24px 0;
  padding: 20px 24px;
  background: var(--ewut-uny-light);
  border-radius: 8px;
}

.ewut-article__body .ewut-aside p {
  margin: 0 0 12px;
}

.ewut-article__body .ewut-aside p:last-child {
  margin-bottom: 0;
}

/* Video / embeds in prose - make any embedded player responsive (16:9)
   instead of the fixed oEmbed dimensions (e.g. 500×281). Covers YouTube,
   Vimeo, VideoPress and self-hosted <video>. Only video-type embeds get the
   16:9 box - rich embeds (Twitter, Facebook, Instagram) size themselves, so
   forcing 16:9 on them leaves a huge empty gap above the caption. */
.ewut-article__body .wp-block-embed.is-type-video .wp-block-embed__wrapper,
.ewut-article__body iframe[src*="youtube"],
.ewut-article__body iframe[src*="youtu.be"],
.ewut-article__body iframe[src*="vimeo"],
.ewut-article__body iframe[src*="wordpress.tv"],
.ewut-article__body iframe[src*="videopress"],
.ewut-article__body iframe[src*="video.wordpress.com"] {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  margin: 0;
  border: 0;
  border-radius: 8px;
  overflow: hidden;
}

/* Native block embeds / self-hosted video that already ship their own
   wrapper - just round + constrain them. */
.ewut-article__body .wp-block-embed__wrapper,
.ewut-article__body figure.wp-block-video video,
.ewut-article__body video {
  max-width: 100%;
  border-radius: 8px;
}

.ewut-article__body video {
  display: block;
  width: 100%;
  height: auto;
  margin: 24px 0;
  border-radius: 8px;
}

/* WordPress wraps oEmbeds in a figure.wp-block-embed; keep it full-width and
   drop the default margins so the frame aligns with the text column. */
.ewut-article__body figure.wp-block-embed {
  margin: 24px 0;
}

.ewut-article__body figure.wp-block-embed.is-type-video iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
}

.ewut-article__body pre {
  background: var(--ewut-uny-light);
  color: var(--ewut-uny-dark);
  font-family:
    ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;
  padding: 20px 24px;
  border-radius: 8px;
  overflow-x: auto;
  font-size: 0.9em;
  line-height: 1.5;
  margin: 24px 0;
}

/* Accent bar only for actual code blocks (pre wrapping <code>) */
.ewut-article__body pre:has(code) {
  border-left: 10px solid var(--ewut-uny-accent);
}

/* Code block: no grey box border, accent bar on the left only, square corners */
.ewut-article__body pre.wp-block-code {
  border: none;
  border-left: 10px solid var(--ewut-uny-accent);
  border-radius: 0;
  /* Keep the source line breaks. Without this the editor (where the JS upgrade
     below never runs) collapsed the whole snippet onto ONE line, so the block
     looked nothing like the front end. `pre` defaults to `pre` already, but the
     editor's own reset overrode it. */
  white-space: pre-wrap;
  padding: 16px 20px;
  background: var(--ewut-uny-light);
  font-family: var(--ewut-uny-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 14.4px;
  line-height: 1.6;
  overflow-x: auto;
}

/* Enhanced code block (JS-upgraded): line numbers + zebra rows + copy button.
   Lines are wrapped in `.ewut-code__line` spans by main.js; the line number is
   a CSS counter rendered via ::before (generated content is NOT copied to the
   clipboard and the copy button copies the raw text), so numbering never ends
   up in a paste. */
.ewut-code-wrap {
  position: relative;
  margin: 24px 0;
}

.ewut-code-wrap pre.wp-block-code {
  margin: 0;
}

/* Once JS has split the snippet into line spans the zebra rows carry their own
   inline padding, so the block's horizontal padding is dropped. */
.ewut-article__body pre.wp-block-code.ewut-code--numbered {
  padding: 16px 0;
}

/* Multiline inline <code> (line breaks via <br>) upgraded the same way.
   After JS splits it into line spans the `<br>`s are gone, so the
   `code:has(br)` block styling no longer matches - restore the code-box look
   (light fill, accent bar, mono font) here. */
.ewut-article__body code.ewut-code--numbered {
  display: block;
  background: var(--ewut-uny-light);
  border-left: 10px solid var(--ewut-uny-accent);
  border-radius: 8px;
  white-space: pre-wrap;
  word-break: break-word;
  padding: 16px 0;
}

.ewut-article__body pre.wp-block-code.ewut-code--numbered code,
.ewut-article__body code.ewut-code--numbered {
  display: block;
  counter-reset: ewut-code-line;
}

.ewut-code__line {
  display: block;
  position: relative;
  counter-increment: ewut-code-line;
  padding: 2px 24px 2px 3.75em;
  min-height: 1.5em;
}

/* Alternating row shades - one row light, the next a touch darker. */
.ewut-code__line:nth-child(odd) {
  background: rgba(15, 15, 15, 0.035);
}

.ewut-code__line:nth-child(even) {
  background: rgba(15, 15, 15, 0.0025);
}

.ewut-code__line::before {
  content: counter(ewut-code-line);
  position: absolute;
  left: 0;
  width: 2.75em;
  padding-right: 0.85em;
  text-align: right;
  color: var(--ewut-uny-muted);
  -webkit-user-select: none;
  user-select: none;
}

/* Copy button - top-right, revealed on hover/focus of the block. */
.ewut-code__copy {
  position: absolute;
  top: 8px;
  right: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--ewut-uny-border);
  border-radius: 8px;
  background: var(--ewut-uny-white);
  color: var(--ewut-uny-dark);
  cursor: pointer;
  opacity: 0;
  transition:
    opacity 0.15s ease,
    background 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease;
}

.ewut-code-wrap:hover .ewut-code__copy,
.ewut-code__copy:focus-visible {
  opacity: 1;
}

.ewut-code__copy:hover {
  background: var(--ewut-uny-accent);
  color: var(--ewut-uny-on-accent);
  border-color: var(--ewut-uny-accent);
}

.ewut-code__copy svg {
  width: 16px;
  height: 16px;
}

.ewut-code-wrap.is-copied .ewut-code__copy {
  opacity: 1;
  background: var(--ewut-uny-accent);
  color: var(--ewut-uny-on-accent);
  border-color: var(--ewut-uny-accent);
}

/* Verse block - render identically to the preformatted block (mono font,
   light box, rounded corners, no accent bar); only keep pre-wrap so long
   lines wrap. */
.ewut-article__body pre.wp-block-verse {
  white-space: pre-wrap;
  margin: 24px 0;
}

.ewut-article__body code {
  color: var(--ewut-uny-dark);
  background: var(--ewut-uny-medium);
  padding: 1px 4px;
  border-radius: 4px;
  font-family:
    ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;
  font-size: 0.9em;
  font-weight: 400;
  word-break: break-word;
}

/* Multiline inline <code> (line breaks via <br>) renders like <pre>.
   Scoped to `:not(pre) > code` so a real Code block is never caught: inside
   `<pre>` the newlines are genuine `\n` characters and need no help. */
.ewut-article__body :not(pre) > code:has(br) {
  display: block;
  background: var(--ewut-uny-light);
  border-left: 10px solid var(--ewut-uny-accent);
  padding: 20px 24px;
  border-radius: 8px;
  white-space: pre-wrap;
  word-break: break-word;
  margin: 24px 0;
}

/* wpautop injects <br> on top of preserved newlines → double spacing; hide them.
   NOT applied to `pre code`: the block editor stores Code block line breaks as
   `<br data-rich-text-line-break>` with NO `\n` beside them, so hiding the <br>
   collapsed the whole snippet onto one line in the editor while the front end
   (which does have the newlines) looked right. Editor and front must match. */
.ewut-article__body :not(pre) > code:has(br) br {
  display: none;
}

.ewut-article__body pre code {
  background: none;
  padding: 0;
  border-radius: 0;
  font-size: inherit;
  color: inherit;
}

.ewut-article__body a:not(.ewut-button) {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ewut-article__body a:not(.ewut-button):hover {
  color: var(--ewut-uny-accent-hover);
}

/* Buttons rendered inside article content keep their own component colour
   and never inherit the link colour / underline. Hover states mirror the
   theme button component (outline variants fill accent + white text). */
.ewut-article__body a.ewut-button {
  color: var(--ewut-uny-on-accent);
  text-decoration: none;
}
.ewut-article__body a.ewut-button:hover {
  color: var(--ewut-uny-on-accent);
}
.ewut-article__body a.ewut-button.outline {
  color: var(--ewut-uny-dark);
}
.ewut-article__body a.ewut-button.outline:hover,
.ewut-article__body a.ewut-button.outline-accent:hover {
  color: var(--ewut-uny-on-accent);
}
.ewut-article__body a.ewut-button.outline-accent {
  color: var(--ewut-uny-accent);
}
/* Disabled button - light-grey surface, muted text, not-allowed cursor. */
.ewut-article__body a.ewut-button[aria-disabled="true"] {
  background-color: var(--ewut-uny-medium);
  color: var(--ewut-uny-muted);
  cursor: not-allowed;
  pointer-events: auto;
}
.ewut-article__body a.ewut-button[aria-disabled="true"]:hover {
  background-color: var(--ewut-uny-medium);
  color: var(--ewut-uny-muted);
  cursor: not-allowed;
}

/* Inline elements ----------------------------------------------------- */

.ewut-article__body mark {
  background: color-mix(in srgb, var(--ewut-uny-accent) 18%, transparent);
  color: var(--ewut-uny-dark);
  padding: 1px 4px;
  border-radius: 4px;
}

.ewut-article__body kbd {
  font-family:
    ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;
  font-size: 0.85em;
  background: var(--ewut-uny-ink);
  color: var(--ewut-uny-on-accent);
  padding: 2px 7px;
  border-radius: 6px;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.25);
  white-space: nowrap;
}

.ewut-article__body samp,
.ewut-article__body tt,
.ewut-article__body var {
  font-family:
    ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;
  font-size: 0.9em;
}

.ewut-article__body var {
  font-style: italic;
}

.ewut-article__body abbr[title] {
  text-decoration: underline dotted;
  text-underline-offset: 3px;
  cursor: help;
}

.ewut-article__body q {
  quotes: "\201C" "\201D" "\2018" "\2019";
}

.ewut-article__body sub,
.ewut-article__body sup {
  font-size: 0.72em;
  line-height: 0;
}

.ewut-article__body small {
  font-size: 0.65em;
  font-weight: 400;
  color: var(--ewut-uny-muted);
}

.ewut-article__body ins {
  padding: 1px 4px;
  text-decoration: underline;
  text-decoration-color: var(--ewut-uny-accent);
  background: color-mix(in srgb, var(--ewut-uny-accent) 10%, transparent);
  border-radius: 4px;
}

.ewut-article__body del,
.ewut-article__body s {
  color: var(--ewut-uny-muted);
}

/* Definition list ----------------------------------------------------- */

/* Definition list built from blocks instead of a `wp:html` island. A Custom
   HTML block renders as raw markup in the editor, so `<dl><dt>` showed up as a
   textarea full of tags where the front end showed a styled list. Core has no
   definition-list block, so the same look is built from a group of paragraphs:
   bold term, indented description. Identical on both sides. */
.ewut-article__body .ewut-deflist {
  margin: 0 0 20px;
}

.ewut-article__body .ewut-deflist__term {
  margin: 0 0 4px;
  font-weight: 700;
  color: var(--ewut-uny-dark);
}

/* `.wp-block-group p` zeroes the padding later in the file, so the indent has to
   be stated with the group in the selector to outrank it. */
.ewut-article__body .wp-block-group.ewut-deflist p.ewut-deflist__desc {
  margin: 0 0 16px;
  padding-left: 20px;
  color: var(--ewut-uny-grey);
}

.ewut-article__body .wp-block-group.ewut-deflist p.ewut-deflist__desc:last-child {
  margin-bottom: 0;
}

.ewut-article__body dl {
  margin: 0 0 20px;
}

.ewut-article__body dt {
  font-weight: 700;
  color: var(--ewut-uny-dark);
  margin-bottom: 4px;
}

.ewut-article__body dd {
  margin: 0 0 16px;
  padding-left: 24px;
  color: var(--ewut-uny-grey);
}

/* Address -------------------------------------------------------------- */

.ewut-article__body address {
  font-style: italic;
  color: var(--ewut-uny-dark);
  line-height: var(--ewut-uny-lh-base);
  margin-bottom: 20px;
}

.ewut-article__body audio {
  width: 100%;
  margin: 4px 0 8px;
}

.ewut-article__body video {
  width: 100%;
  border-radius: 8px;
  margin: 24px 0;
}

.ewut-article__body .wp-block-gallery {
  margin: 32px 0;
}

/* Floated galleries (alignleft/alignright) - the base `.wp-block-gallery`
   margin above (32px 0) overrides the generic `.alignleft/.alignright`
   float margins, so wrapping text stuck to the gallery edge and the block
   sat 32px below the text top. Restore the float gutter + tighten the top
   so the gallery lines up with the first text line. */
.ewut-article__body .wp-block-gallery.alignleft {
  margin: 8px 32px 16px 0;
}

.ewut-article__body .wp-block-gallery.alignright {
  margin: 8px 0 16px 32px;
}

/* Gallery tiles - round the figure itself and clip overflow so the
   absolutely-positioned caption (dark gradient, square corners) doesn't
   cover the image's 8px rounding at the bottom. */
.ewut-article__body .wp-block-gallery figure.wp-block-image {
  border-radius: 8px;
  overflow: hidden;
}

/* Gallery image captions - tighter leading so 1-2 lines fit inside the
   image without pushing the caption box tall enough to scroll the tile. */
.ewut-article__body .wp-block-gallery figure figcaption {
  line-height: 1.3;
}

/* Clamp long gallery image captions to two lines. The core rule
   `.blocks-gallery-item__caption` sets `overflow:auto`, which lets a long
   caption scroll the image tile; clamp the wrapped text instead. Full text
   lives in a hover/focus tooltip toggled by the `[+]` button (added in JS).
   The gallery-wide caption (`.blocks-gallery-caption`) is left untouched.
   Round the bottom corners to match the image (radius 8px on the <img>) so
   the overlay doesn't square off the tile. */
.ewut-article__body .wp-block-gallery figure .blocks-gallery-item__caption {
  overflow: visible;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

.ewut-article__body .ewut-caption__text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Narrow, short gallery tiles (5-8 columns) leave little vertical room, so
   the core caption's large top padding pushes the 2nd clamped line off the
   image. Trim the caption's top padding on tighter column counts so both
   lines fit within the tile. */
.ewut-article__body .wp-block-gallery.columns-5 .blocks-gallery-item__caption,
.ewut-article__body .wp-block-gallery.columns-6 .blocks-gallery-item__caption,
.ewut-article__body .wp-block-gallery.columns-7 .blocks-gallery-item__caption,
.ewut-article__body .wp-block-gallery.columns-8 .blocks-gallery-item__caption {
  padding-top: 18px;
}

/* Tooltip with the full caption text. Fixed-positioned (placed by JS) so it
   escapes the caption box's `overflow` and the gallery tile bounds. Shown
   on hovering the image tile when the caption is clamped. */
.ewut-caption__tip {
  position: fixed;
  z-index: 999;
  max-width: 260px;
  padding: 8px 10px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--ewut-uny-on-accent);
  background: rgba(15, 15, 15, 0.8);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease;
}

.ewut-caption__tip.is-visible {
  opacity: 1;
  visibility: visible;
}

/* Group blocks with a border color/width set (WP 6.1 spacing-preset demos)
   only carry border-width + color in markup, never border-style - so the
   rule renders invisibly. Force a solid style so the border shows. */
.ewut-article__body .wp-block-group.has-border-color,
.ewut-article__body .wp-block-group[style*="border-width"] {
  border-style: solid;
}

.ewut-article__body .wp-block-group {
  margin: 0 0 20px !important;
  padding: 0;
}

.ewut-article__body .wp-block-group p {
  margin: 0 !important;
  padding: 0;
}

.ewut-article__body .wp-block-embed {
  margin: 32px 0;
}

.ewut-article__body .wp-block-embed iframe {
  width: 100%;
  border-radius: 8px;
}

.ewut-article__body hr {
  border: none;
  border-top: 1px solid var(--ewut-uny-border);
  margin: 64px 0 48px;
}

/* Default separator is a short centred rule; `is-style-wide` spans the full
   measure and `is-style-dots` renders the dotted variant. The `hr` rule above
   zeroes the horizontal margin, so re-assert `auto` to keep it centred. */
.ewut-article__body
  .wp-block-separator:not(.is-style-wide):not(.is-style-dots) {
  width: 20%;
  margin-left: auto;
  margin-right: auto;
}

.ewut-article__body table {
  width: 100%;
  border-collapse: collapse;
  border: none;
  margin: 0;
  font-size: 0.95em;
}

.ewut-article__body table th,
.ewut-article__body table td {
  padding: 14px 20px;
  text-align: left;
  vertical-align: middle;
  border: none;
  border-bottom: 1px solid var(--ewut-uny-border);
}

.ewut-article__body table th {
  font-weight: 600;
  color: var(--ewut-uny-dark);
  border: none;
  border-bottom: 1px solid var(--ewut-uny-border);
}

.ewut-article__body table td {
  color: var(--ewut-uny-dark);
}

.ewut-article__body table thead {
  border: none;
}

.ewut-article__body table tfoot {
  border-top: 2px solid var(--ewut-uny-border) !important;
}

.ewut-article__body table tr:last-child td {
  border-bottom: none;
}

/* Striped table: repaint the shaded row from the palette instead of core's
   literal #f0f0f0. Core's rule is a fixed light grey, while the cell ink is
   `var(--ewut-uny-dark)` - which is semantic "primary ink" and turns #F2F2F4 on
   a dark-scheme site. Measured on /elements/: six cells at contrast 1.02, light
   text on a light band, unreadable on the front AND in the editor.
   Same defect family as the alert tiles: half the component on literals, half on
   tokens. The selector carries `.ewut-article__body` so it outranks core's
   `.wp-block-table.is-style-stripes tbody tr:nth-child(odd)` by one class.
   `medium` rather than `light`: in the light scheme it resolves to #F0F0EE, which
   is core's #f0f0f0 to the eye, so the default look of the theme is unchanged -
   only the dark scheme gains a band it can actually show. */
.ewut-article__body .wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
  background-color: var(--ewut-uny-medium);
}

.ewut-article__body .wp-block-table.is-style-stripes {
  border-bottom-color: var(--ewut-uny-border);
}

/* Pull quote keeps the brand accent on its left border. Core stores the
   colour chosen in the editor as an inline `style="border-color:#…"` on the
   <figure>, which outranks this rule by specificity - so force the accent to
   win, otherwise a stray editor colour (e.g. #b80000) leaks onto the border. */
.ewut-article__body .wp-block-pullquote {
  background: var(--ewut-uny-light);
  border: none;
  border-left: 3px solid var(--ewut-uny-accent) !important;
  border-radius: 8px;
  padding: 32px;
  text-align: center;
  margin: 40px 0;
}

.ewut-article__body .wp-block-pullquote cite {
  color: var(--ewut-uny-accent);
}

.ewut-article__body .wp-block-pullquote blockquote {
  border: none;
  background: none;
  padding: 0;
  font-size: 1.3em;
}

/* Solid-color pullquote - the block sets its own background from the palette.
   Drop the accent left border (it clashes with the solid fill), keep the text
   at a readable size instead of the huge core 2em, and force the text + cite
   to white so they stay legible on the coloured fill. */
.ewut-article__body .wp-block-pullquote.is-style-solid-color {
  border-left: none !important;
}

.ewut-article__body .wp-block-pullquote.is-style-solid-color blockquote {
  font-size: 1rem;
  max-width: 100%;
}

.ewut-article__body .wp-block-pullquote.is-style-solid-color blockquote p {
  font-size: 1.5rem;
  line-height: 1.4;
  color: var(--ewut-uny-on-accent) !important;
}

.ewut-article__body .wp-block-pullquote.is-style-solid-color cite {
  color: var(--ewut-uny-on-accent) !important;
  opacity: 0.8;
}

/* Details block (core/details) - styled to match the builder's text-3 FAQ
   accordion (and the theme's .ewut-accordion): no outer card, a thin rule per
   item, question in 1.25rem/600, and a chevron on the right that rotates when
   the item opens. Consecutive Details blocks stack into one list: each one
   carries a bottom rule and only the first of a run gets a top rule. */
.ewut-article__body .wp-block-details {
  border: 0;
  border-bottom: 1px solid var(--ewut-uny-border);
  border-radius: 0;
  padding: 0;
  margin: 0;
  background: none;
}
/* Top rule for the first item of a run of Details blocks. */
.ewut-article__body
  .wp-block-details:not(.wp-block-details + .wp-block-details) {
  border-top: 1px solid var(--ewut-uny-border);
}
/* Breathing room before/after the whole accordion, not between its items. */
.ewut-article__body
  .wp-block-details:not(.wp-block-details + .wp-block-details) {
  margin-top: 24px;
}
.ewut-article__body .wp-block-details:not(:has(+ .wp-block-details)) {
  margin-bottom: 24px;
}

.ewut-article__body .wp-block-details > summary {
  font-size: 1.25rem;
  line-height: 1.4;
  font-weight: 600;
  color: var(--ewut-uny-dark);
  cursor: pointer;
  padding: 20px 0;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.ewut-article__body .wp-block-details > summary:hover {
  color: var(--ewut-uny-accent);
}
.ewut-article__body .wp-block-details > summary::-webkit-details-marker {
  display: none;
}
.ewut-article__body .wp-block-details > summary::marker {
  content: "";
}
/* Chevron drawn with borders - points down, rotates up when open. Mirrors
   .ewut-accordion__trigger::after so both accordions look identical. */
.ewut-article__body .wp-block-details > summary::after {
  content: "";
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.25s;
  margin-top: -3px;
}
.ewut-article__body .wp-block-details[open] > summary::after {
  transform: rotate(-135deg);
  margin-top: 3px;
}
.ewut-article__body .wp-block-details > summary + * {
  margin-top: 0;
}
.ewut-article__body .wp-block-details > *:not(summary) {
  font-size: var(--ewut-uny-fs-sub);
  color: var(--ewut-uny-grey);
  line-height: 1.7;
}
.ewut-article__body .wp-block-details > *:last-child {
  margin-bottom: 20px;
}

/* Footnotes block (core/footnotes) - smaller, muted, numbered references. */
.ewut-article__body .wp-block-footnotes {
  font-size: var(--ewut-uny-fs-small);
  color: var(--ewut-uny-grey);
  border-top: 1px solid var(--ewut-uny-border);
  margin-top: 40px;
  padding-top: 20px;
}
.ewut-article__body .wp-block-footnotes li {
  margin-bottom: 8px;
}

/* Spacer block (core/spacer) - height is set inline by the block; ensure it
   never collapses and stays a clean vertical gap. */
.ewut-article__body .wp-block-spacer {
  display: block;
  clear: both;
}

.ewut-article__body .wp-block-cover {
  border-radius: 8px;
  overflow: hidden;
  margin: 32px 0;
}

/* Aligned cover blocks (float left/right) need the same side gap to the
   wrapping text as aligned images - the base `.wp-block-cover { margin:32px 0 }`
   above comes later than `.alignleft/.alignright` and would otherwise zero
   the float side margin, sticking the text to the cover edge. */
.ewut-article__body .wp-block-cover.alignleft {
  float: left;
  margin: 8px 32px 16px 0;
}

.ewut-article__body .wp-block-cover.alignright {
  float: right;
  margin: 8px 0 16px 32px;
}

/* Readability safety net: keep cover text legible even when the demo
   content pairs a mismatched dim colour with the text tone. A soft
   text-shadow (opposite tone to the text) preserves contrast without
   hard-overriding WP's automatic is-light/dark text colour. */
.ewut-article__body .wp-block-cover .wp-block-cover__inner-container {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.ewut-article__body .wp-block-cover.is-light .wp-block-cover__inner-container {
  text-shadow: 0 1px 3px rgba(255, 255, 255, 0.6);
}

/* Let WordPress manage cover text colour. The prose rule
   `.ewut-article__body p { color: dark }` (specificity 0,1,1) otherwise
   overrides WP's `:where(.wp-block-cover p) { color: inherit }` (0,1,0) and
   forces the caption/title dark - invisible on a dark cover image. Restoring
   `inherit` makes the text follow the cover inner-container tone WP already
   sets (white on dark covers, black on is-light covers). */
.ewut-article__body
  .wp-block-cover
  :is(p, h1, h2, h3, h4, h5, h6):not(.has-text-color) {
  color: inherit;
}

/* Contrast fix for a demo-content mismatch: some covers are tagged `is-light`
   (WP core then forces BLACK text) yet render a dark dim overlay on top of the
   media - black text on a darkened image is unreadable. When the default
   (uncoloured = black) dim scrim is present, the media is dark regardless of
   the is-light tag, so force white text. A cover with an explicit custom dim
   colour (`has-*-background-color` on the scrim) is left to WP. */
.ewut-article__body
  .wp-block-cover.is-light:not(.has-text-color):has(
    > .wp-block-cover__background.has-background-dim:not(
        [class*="-background-color"]
      )
  ),
.ewut-article__body
  .wp-block-cover.is-light:not(.has-text-color):has(
    > .wp-block-cover__background.has-background-dim:not(
        [class*="-background-color"]
      )
  )
  :is(p, h1, h2, h3, h4, h5, h6):not(.has-text-color) {
  color: var(--ewut-uny-on-accent);
}

/* ...and give that white text a dark shadow (not the is-light white glow). */
.ewut-article__body
  .wp-block-cover.is-light:not(.has-text-color):has(
    > .wp-block-cover__background.has-background-dim:not(
        [class*="-background-color"]
      )
  )
  .wp-block-cover__inner-container {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* Media & Text: WP ships these with no block margin, so consecutive ones
   touch with zero gap. Match the 32px rhythm used by image/gallery/cover.
   Only set vertical margins - a shorthand `margin: 32px 0` would zero the
   horizontal margins and break `.alignfull` / `.alignwide` full-bleed. */
.ewut-article__body .wp-block-media-text {
  margin-top: 32px;
  margin-bottom: 32px;
}

/* Cropped media (is-image-fill) paints the photo as a background on the
   <figure>, so the 8px radius on the inner <img> doesn't show - round the
   figure itself (and clip) so the cropped image matches every other image. */
.ewut-article__body
  .wp-block-media-text.is-image-fill
  .wp-block-media-text__media {
  border-radius: 8px;
  overflow: hidden;
}

/* File block: map the download button to the theme accent button */
.ewut-article__body .wp-block-file {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 24px 0;
}

.ewut-article__body .wp-block-file .wp-block-file__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  height: 40px;
  color: var(--ewut-uny-on-accent);
  font-size: 1em;
  font-weight: 500;
  line-height: 1;
  border: none;
  border-radius: 8px;
  background: var(--ewut-uny-accent);
  text-decoration: none;
  transition: background-color ease 0.2s;
}

.ewut-article__body .wp-block-file .wp-block-file__button:hover {
  background: var(--ewut-uny-accent-hover);
  color: var(--ewut-uny-on-accent);
}

/* ---- WP layout blocks: restore vertical rhythm ----
   Buttons / Columns / Group ship with no block margin, and the theme's
   universal `* { margin: 0 }` reset zeroes them too, so consecutive blocks
   touch. Match the 32px rhythm used by media blocks. */
.ewut-article__body .wp-block-buttons,
.ewut-article__body .wp-block-columns,
.ewut-article__body .wp-block-group {
  margin-top: 32px;
  margin-bottom: 32px;
}

/* Query Loop pagination → theme pagination look (reuses `.page-numbers`). */
.ewut-article__body .wp-block-query-pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 32px 0;
}

.ewut-article__body
  .wp-block-query-pagination
  .wp-block-query-pagination-numbers {
  display: flex;
  gap: 8px;
  align-items: center;
}

.ewut-article__body .wp-block-query-pagination .page-numbers,
.ewut-article__body .wp-block-query-pagination-previous,
.ewut-article__body .wp-block-query-pagination-next {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 6px;
  border: 1px solid var(--ewut-uny-border);
  border-radius: 8px;
  font-size: 0.9em;
  font-weight: 500;
  line-height: 1;
  color: var(--ewut-uny-dark);
  transition:
    color 0.15s,
    border-color 0.15s,
    background-color 0.15s;
}

.ewut-article__body .wp-block-query-pagination .page-numbers:hover,
.ewut-article__body .wp-block-query-pagination-previous:hover,
.ewut-article__body .wp-block-query-pagination-next:hover {
  background-color: var(--ewut-uny-accent);
  border-color: transparent;
  color: var(--ewut-uny-on-accent);
}

.ewut-article__body .wp-block-query-pagination .page-numbers.current {
  background: var(--ewut-uny-light);
  color: var(--ewut-uny-muted);
  border-color: var(--ewut-uny-border-dark);
}

.ewut-article__body .wp-block-query-pagination-previous,
.ewut-article__body .wp-block-query-pagination-next {
  width: auto;
  padding: 0 16px;
  gap: 6px;
  color: var(--ewut-uny-dark);
  border: 1px solid var(--ewut-uny-border);
  background: none;
}

.ewut-article__body .wp-block-query-pagination .page-numbers.dots {
  border: none;
  min-width: 0;
  width: auto;
  padding: 0 2px;
  color: var(--ewut-uny-muted);
  background-color: transparent !important;
}

/* Colored columns: the theme's universal `* { padding: 0 }` reset wipes the
   inner padding WordPress puts on `.has-background` columns/column, gluing the
   text to the coloured edge. Restore WP's default scrim padding. */
.ewut-article__body .wp-block-columns.has-background,
.ewut-article__body .wp-block-column.has-background {
  padding: 1.25em 2.375em;
}

/* Same scrim-padding story for coloured Group blocks: the universal
   `* { padding: 0 }` reset strips WP's default inner padding, gluing the
   content to the coloured edge. Restore it. */
.ewut-article__body .wp-block-group.has-background {
  padding: 1.5em 1.75em;
}

/* A lone Button block (not wrapped in `.wp-block-buttons`) carries no block
   margin, and inside a Group the `p { margin: 0 }` rule leaves it glued to
   the surrounding text. Give it breathing room top and bottom. */
.ewut-article__body .wp-block-button {
  margin-top: 20px;
  margin-bottom: 20px;
}

/* A standalone Button placed directly at article top level (not inside a
   Group/Column and not wrapped in `.wp-block-buttons`) is centred by the
   block editor via `display:table` + auto side margins. Reproduce that exact
   mechanism on the front so it matches the editor. Buttons nested in a
   Group/Column keep their inherited (left) alignment. */
.ewut-article__body > .wp-block-button {
  display: table;
  margin-left: auto;
  margin-right: auto;
}

/* First element in ANY column must sit flush with the column top - WP's
   inner blocks carry their own top margin (paragraphs 16px, blockquotes
   32px, etc.), which makes columns start at different heights (a visible
   "staircase"). Zero the top margin so every column's content aligns. */
.ewut-article__body .wp-block-column > *:first-child {
  margin-top: 0;
}

/* Last paragraph inside a column shouldn't carry the prose 20px bottom margin
   - it pushes text off-centre inside the coloured scrim. */
.ewut-article__body .wp-block-column p:last-child {
  margin-bottom: 0;
}

/* Inside colour-filled blocks (columns/groups/cover with a background -
   WP adds `.has-background`) the leading 20px top margin pushes the first
   line off the padded top edge. Drop the top margin, keep the 16px bottom
   rhythm between paragraphs. The last paragraph keeps its zeroed bottom
   from the `:last-child` rule above, so it ends up at margin 0. */
.ewut-article__body .has-background p {
  margin: 0 0 16px;
}

/* ---- WP Button block → theme .ewut-button ---- */
.ewut-article__body .wp-block-button__link {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-width: 140px;
  min-height: 48px;
  padding: 10px 28px;
  /* 16px to match the builder's `.ewub-button`, measured live. The theme sat at
     14px, so a Button block next to a builder section showed visibly smaller
     labels on the same page. */
  font-size: 16px !important;
  font-weight: 500;
  line-height: 1.3;
  text-align: center;
  border-radius: 8px;
  transition: background-color ease 0.2s;
}

/* Fill button: accent (magenta) fill, white text - the theme default. */
.ewut-article__body
  .wp-block-button:not(.is-style-outline)
  .wp-block-button__link:not(.has-background) {
  color: var(--ewut-uny-on-accent);
  background-color: var(--ewut-uny-accent);
  border: none;
}

.ewut-article__body
  .wp-block-button:not(.is-style-outline)
  .wp-block-button__link:not(.has-background):hover {
  background-color: var(--ewut-uny-accent-hover);
  color: var(--ewut-uny-on-accent);
}

/* Outline button: transparent, 2px accent border, dark text → accent on hover. */
.ewut-article__body
  .wp-block-button.is-style-outline
  .wp-block-button__link:not(.has-text-color) {
  color: var(--ewut-uny-dark);
  background-color: transparent;
  border: 2px solid var(--ewut-uny-accent);
}

.ewut-article__body
  .wp-block-button.is-style-outline
  .wp-block-button__link:not(.has-text-color):hover {
  background-color: var(--ewut-uny-accent);
  color: var(--ewut-uny-on-accent);
  border-color: var(--ewut-uny-accent);
}

/* Squared style variant - no rounding. */
.ewut-article__body .wp-block-button.is-style-squared .wp-block-button__link {
  border-radius: 0;
}

/* Rounded/pill style variant - fully rounded ends. */
.ewut-article__body .wp-block-button.is-style-rounded .wp-block-button__link {
  border-radius: 999px;
}

/* Aligned buttons (float left/right) must keep the same side gap to the
   wrapping text as aligned images, and NOT inherit the standalone-button
   auto-centering (`> .wp-block-button { margin:auto }`) or the 20px top
   margin - those come later in the file and otherwise zero out the float
   side margin, so the text sticks to the button. Restore image-like
   alignment margins. */
.ewut-article__body > .wp-block-button.alignleft,
.ewut-article__body .wp-block-button.alignleft {
  display: block;
  float: left;
  margin: 8px 32px 16px 0;
}

.ewut-article__body > .wp-block-button.alignright,
.ewut-article__body .wp-block-button.alignright {
  display: block;
  float: right;
  margin: 8px 0 16px 32px;
}

/* ---- File block ---- */
/* Core sets the whole `.wp-block-file` to 0.8em, which shrinks the file-
   name link to ~12.8px. Reset the wrapper to the prose body size (18px,
   same as `.ewut-article__body p`) so the name reads at normal size; the
   Download control keeps the button skin. */
.ewut-article__body .wp-block-file {
  font-size: 18px;
}

/* File-name link (everything except the Download button) → same inline
   treatment as prose links: inherit colour + dotted underline, accent on
   hover with the underline dropped. */
.ewut-article__body .wp-block-file a:not(.wp-block-file__button) {
  color: inherit;
  border-bottom: 1px dotted var(--ewut-uny-grey);
}

.ewut-article__body .wp-block-file a:not(.wp-block-file__button):hover {
  color: var(--ewut-uny-accent);
  border-bottom: none;
}

/* Download control → same size as the article's other buttons (Post
   Comment / Button block): 48px tall, 140px min-width, 28px side padding,
   16px text. Core's 0.8em wrapper otherwise leaves it small; the button
   keeps its accent skin from `.wp-element-button`. */
.ewut-article__body .wp-block-file .wp-block-file__button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-width: 140px;
  height: 48px;
  padding: 0 28px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  border-radius: 8px;
}

/* =====================================================================
   Raw core blocks used on the "Theme block category" demo post.
   These render straight from the_content (Navigation, Query Loop, Avatar,
   Post Author, Post Terms, Post Navigation, Read More, Login/out, Author
   Biography, comment meta) and otherwise inherit plain prose styling.
   Bring each into the theme look. */

/* ---- Navigation block (page list) → tidy inline menu ---- */
.ewut-article__body .wp-block-navigation {
  font-size: 0.95em;
  margin: 16px 0 24px;
}

.ewut-article__body .wp-block-navigation .wp-block-navigation__container,
.ewut-article__body .wp-block-navigation ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 20px;
  margin: 0;
  padding: 0;
}

.ewut-article__body .wp-block-navigation .wp-block-navigation-item__content {
  padding: 0;
  font-size: 15px;
  color: var(--ewut-uny-dark);
  text-decoration: none;
  transition: color 0.15s;
}

.ewut-article__body
  .wp-block-navigation
  a:hover
  .wp-block-navigation-item__content,
.ewut-article__body
  .wp-block-navigation
  .wp-block-navigation-item__content:hover {
  color: var(--ewut-uny-accent);
}

.ewut-article__body
  .wp-block-navigation
  .wp-block-navigation__submenu-container {
  display: block;
  gap: 0;
  padding: 8px 0;
}

.ewut-article__body .wp-block-navigation .wp-block-navigation__submenu-icon {
  align-self: center;
  background-color: inherit;
  border: none;
  color: currentColor;
  display: inline-block;
  font-size: inherit;
  height: 0.6em;
  line-height: 0;
  margin-left: 0.25em;
  padding: 0;
  width: 0.6em;
  transform: translateY(-1px);
}

/* ---- Query Loop listings → mini post list ---- */
.ewut-article__body .wp-block-query {
  margin: 8px 0 24px;
}

.ewut-article__body .wp-block-query .wp-block-post-template > .wp-block-post {
  margin: 0 0 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--ewut-uny-border);
}

.ewut-article__body
  .wp-block-query
  .wp-block-post-template
  > .wp-block-post:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

/* Query-loop post title link inherits the dark tone, accent on hover. */
.ewut-article__body .wp-block-query .wp-block-post-title {
  font-size: var(--ewut-uny-fs-h5);
  font-weight: 600;
  line-height: 1.3;
  margin: 0 0 6px;
}

.ewut-article__body .wp-block-query .wp-block-post-title a {
  color: var(--ewut-uny-dark);
  text-decoration: none;
  transition: color 0.15s;
}

.ewut-article__body .wp-block-query .wp-block-post-title a:hover {
  color: var(--ewut-uny-accent);
}

/* Post date → muted meta line. */
.ewut-article__body .wp-block-post-date,
.ewut-article__body .wp-block-post-date time {
  font-size: 0.85em;
  color: var(--ewut-uny-muted);
}

/* Excerpt keeps prose size but sits tight under the title. */
.ewut-article__body .wp-block-query .wp-block-post-excerpt {
  margin: 8px 0 0;
}

.ewut-article__body .wp-block-query .wp-block-post-excerpt p {
  margin-bottom: 0;
  color: var(--ewut-uny-grey);
}

/* Featured image inside a listing → rounded, capped to a banner ratio. */
.ewut-article__body .wp-block-query .wp-block-post-featured-image {
  margin: 0 0 12px;
}

.ewut-article__body .wp-block-query .wp-block-post-featured-image img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 8px;
}

/* ---- Avatar block (standalone) → round ---- */
.ewut-article__body .wp-block-avatar__image {
  border-radius: 50% !important;
}

/* ---- Post Author card ---- */
.ewut-article__body .wp-block-post-author {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 8px 0 24px;
}

.ewut-article__body .wp-block-post-author__avatar img {
  display: block;
  border-radius: 50%;
}

.ewut-article__body .wp-block-post-author__name {
  margin: 0;
  font-weight: 600;
  color: var(--ewut-uny-dark);
}

/* ---- Post Terms (Categories / Tags) → inherit dark, accent hover ---- */
.ewut-article__body .wp-block-post-terms a {
  color: var(--ewut-uny-dark);
  text-decoration: none;
}

.ewut-article__body .wp-block-post-terms a:hover {
  color: var(--ewut-uny-accent);
}

/* ---- Post Navigation Link (Next / Previous demo) ---- */
.ewut-article__body .wp-block-post-navigation-link {
  margin: 4px 0;
}

.ewut-article__body .wp-block-post-navigation-link a {
  color: var(--ewut-uny-dark);
  font-weight: 500;
  text-decoration: none;
  transition: color 0.15s;
}

.ewut-article__body .wp-block-post-navigation-link a:hover {
  color: var(--ewut-uny-accent);
}

/* ---- Read More → accent link ---- */
.ewut-article__body .wp-block-read-more {
  display: inline-block;
  margin: 8px 0;
  color: var(--ewut-uny-accent);
  font-weight: 600;
  text-decoration: none;
  transition: color 0.15s;
}

.ewut-article__body .wp-block-read-more:hover {
  color: var(--ewut-uny-accent-hover);
}

/* ---- Login/out link ---- */
.ewut-article__body .wp-block-loginout a {
  color: var(--ewut-uny-accent);
  font-weight: 500;
  text-decoration: none;
  transition: color 0.15s;
}

.ewut-article__body .wp-block-loginout a:hover {
  color: var(--ewut-uny-accent-hover);
}

/* ---- Author Biography (standalone block) ---- */
.ewut-article__body .wp-block-post-author-biography {
  color: var(--ewut-uny-grey);
  line-height: 1.7;
  margin: 8px 0 24px;
}

/* ---- Comments block (wp-block-comments) in post content ----
   The Theme-Unit-Test "block category" demo posts embed a Gutenberg
   Comments block INSIDE the post content. It renders WP's default markup
   (not the theme's .ewut-comment card), so bring its typography in line with
   the theme comment scale. Single source of truth - no duplicate rule set. */
.ewut-article__body .wp-block-comments-title {
  font-size: 1.4em;
  font-weight: 700;
  color: var(--ewut-uny-dark);
  margin: 0 0 32px;
  line-height: 1.25;
}

.ewut-article__body .wp-block-comment-template {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Each comment reads as the theme's grey card. */
.ewut-article__body .wp-block-comment-template > li {
  margin: 0;
  padding: 20px 24px;
  background: var(--ewut-uny-light);
  border-radius: 8px;
}

/* WP's inner blocks (columns/paragraph) carry their own 32px vertical margin
   which stacks on top of the card padding → oversized top/bottom gap. Zero
   the first/last child margins so the 20px padding alone governs the inset. */
.ewut-article__body .wp-block-comment-template > li > *:first-child {
  margin-top: 0;
}

.ewut-article__body .wp-block-comment-template > li > *:last-child {
  margin-bottom: 0;
}

/* Avatar column sits too far from the name (WP columns default to a 36px
   gap). Match the theme comment's avatar↔text spacing (12px). */
.ewut-article__body .wp-block-comment-template > li .wp-block-columns {
  gap: 12px;
}

.ewut-article__body .wp-block-comment-author-name,
.ewut-article__body .wp-block-comment-author-name a {
  font-weight: 600;
  font-size: 0.95em;
  line-height: 1;
  margin-top: 5px;
  color: var(--ewut-uny-dark);
  text-decoration: none;
}

.ewut-article__body .wp-block-comment-author-name a:hover {
  color: var(--ewut-uny-accent);
}

/* Date + Edit share a row. Both are secondary meta - small and muted, and
   the row sits tight under the name (WP's default line-height/gap push it
   away). */
.ewut-article__body .wp-block-comment-date,
.ewut-article__body .wp-block-comment-date a,
.ewut-article__body .wp-block-comment-edit-link,
.ewut-article__body .wp-block-comment-edit-link a {
  font-size: 0.8em;
  line-height: 1.3;
  color: var(--ewut-uny-muted);
  text-decoration: none;
}

.ewut-article__body .wp-block-comment-edit-link a:hover {
  color: var(--ewut-uny-accent);
}

.ewut-article__body .wp-block-comment-content {
  font-size: 0.95em;
  line-height: 1.65;
  color: var(--ewut-uny-dark);
}

/* WP lays the comment out as two columns (avatar | everything else), so the
   body text + reply link sit indented to the right of the avatar. The theme
   card keeps only the name/date beside the avatar and runs the text + reply
   full-width underneath. Pull them back under the avatar (avatar column 40px
   + 12px gap = 52px) to match. */
.ewut-article__body .wp-block-comment-content,
.ewut-article__body .wp-block-comment-reply-link {
  margin-left: -52px;
}

.ewut-article__body .wp-block-comment-reply-link a {
  font-size: 0.85em;
  font-weight: 600;
  color: var(--ewut-uny-accent);
  text-decoration: none;
}

.ewut-article__body .wp-block-comment-reply-link a:hover {
  color: var(--ewut-uny-accent-hover);
}

/* Comment edit link (shown to logged-in admins) - keep it subtle. */
.ewut-article__body .wp-block-comments .comment-edit-link {
  font-size: 0.8em;
  color: var(--ewut-uny-muted);
}

.ewut-article__body .wp-block-comments .comment-edit-link:hover {
  color: var(--ewut-uny-accent);
}

/* =====================================================================
   Widget blocks used on the "Widgets block category" demo post.
   Archives / Categories / Latest Posts / Latest Comments / RSS / Calendar /
   Search / Social Links / Tag Cloud render straight from the_content and
   otherwise inherit plain prose bullets / default WP chrome. */

/* ---- Widget list blocks → clean, no prose bullets ----
   Mirror the polished sidebar-widget treatment (compact 16px rows with hair
   dividers + accent hover) so these in-content demo blocks read as designed
   lists, not raw 18px prose bullets. */
.ewut-article__body .wp-block-archives-list,
.ewut-article__body .wp-block-categories-list,
.ewut-article__body .wp-block-latest-posts__list,
.ewut-article__body .wp-block-latest-comments,
.ewut-article__body .wp-block-page-list,
.ewut-article__body .wp-block-rss {
  list-style: none;
  padding-left: 0;
  margin: 8px 0 24px;
  font-size: 16px;
}

.ewut-article__body .wp-block-archives-list li,
.ewut-article__body .wp-block-categories-list li,
.ewut-article__body .wp-block-latest-posts__list li,
.ewut-article__body .wp-block-page-list > li,
.ewut-article__body .wp-block-rss__item {
  margin-bottom: 0;
  padding: 8px 0;
  font-size: 16px;
  line-height: 1.4;
  border-bottom: 1px solid var(--ewut-uny-border);
}

.ewut-article__body
  :is(
    .wp-block-archives-list,
    .wp-block-categories-list,
    .wp-block-latest-posts__list,
    .wp-block-page-list,
    .wp-block-rss
  )
  a {
  color: var(--ewut-uny-dark);
  text-decoration: none;
  transition: color 0.15s;
}

.ewut-article__body
  :is(
    .wp-block-archives-list,
    .wp-block-categories-list,
    .wp-block-latest-posts__list,
    .wp-block-page-list,
    .wp-block-rss
  )
  a:hover {
  color: var(--ewut-uny-accent);
}

/* Long flat directories (Archives, Categories, Page List) would otherwise run
   for pages - flow them into responsive columns. Rows keep their dividers and
   never split across a column break. */
.ewut-article__body .wp-block-archives-list,
.ewut-article__body .wp-block-categories-list,
.ewut-article__body .wp-block-page-list {
  columns: 220px 3;
  column-gap: 40px;
}

.ewut-article__body .wp-block-archives-list > li,
.ewut-article__body .wp-block-categories-list > li,
.ewut-article__body .wp-block-page-list > li {
  break-inside: avoid;
}

/* Nested category children keep a small indent + en-dash marker (matches the
   sidebar widget treatment). Nested rows drop the divider so only top-level
   items separate. */
.ewut-article__body .wp-block-categories-list ul,
.ewut-article__body .wp-block-page-list ul {
  list-style: none;
  padding-left: 16px;
  margin: 8px 0 0;
  font-size: inherit;
}

.ewut-article__body .wp-block-categories-list ul li,
.ewut-article__body .wp-block-page-list ul li {
  padding: 4px 0;
  font-size: 16px;
  border-bottom: none;
}

.ewut-article__body .wp-block-categories-list ul li > a::before,
.ewut-article__body .wp-block-page-list ul li > a::before {
  content: "- ";
  color: var(--ewut-uny-muted);
}

/* ---- Latest Comments ---- */
.ewut-article__body .wp-block-latest-comments__comment {
  margin-bottom: 16px;
  line-height: 1.5;
}

.ewut-article__body .wp-block-latest-comments__comment-author,
.ewut-article__body .wp-block-latest-comments__comment-link {
  color: var(--ewut-uny-dark);
  font-weight: 600;
  text-decoration: none;
}

.ewut-article__body .wp-block-latest-comments__comment-author:hover,
.ewut-article__body .wp-block-latest-comments__comment-link:hover {
  color: var(--ewut-uny-accent);
}

.ewut-article__body .wp-block-latest-comments__comment-date {
  font-size: 0.8em;
  color: var(--ewut-uny-muted);
}

.ewut-article__body .wp-block-latest-comments__comment-excerpt p {
  margin: 4px 0 0;
  font-size: 0.9em;
  color: var(--ewut-uny-grey);
}

.ewut-article__body .wp-block-latest-comments__comment-avatar {
  border-radius: 50%;
}

/* ---- RSS block ---- */
.ewut-article__body .wp-block-rss__item-title a {
  font-weight: 600;
}

/* ---- Calendar block: compact, centred, accent "today" ---- */
.ewut-article__body .wp-block-calendar {
  margin: 8px 0 24px;
}

.ewut-article__body .wp-block-calendar table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--ewut-uny-border);
  font-size: 0.9em;
}

.ewut-article__body .wp-block-calendar caption {
  caption-side: top;
  text-align: center;
  font-weight: 600;
  color: var(--ewut-uny-dark);
  padding: 10px 0;
  background: var(--ewut-uny-light);
}

.ewut-article__body .wp-calendar-table th,
.ewut-article__body .wp-calendar-table td {
  padding: 8px;
  text-align: center;
  border: 1px solid var(--ewut-uny-border);
  color: var(--ewut-uny-dark);
}

.ewut-article__body .wp-calendar-table th {
  font-weight: 600;
  background: var(--ewut-uny-light);
}

.ewut-article__body .wp-calendar-table td#today {
  background: var(--ewut-uny-accent);
  color: var(--ewut-uny-on-accent);
  font-weight: 600;
}

.ewut-article__body .wp-calendar-table td#today a {
  color: var(--ewut-uny-on-accent);
}

.ewut-article__body .wp-calendar-table a {
  color: var(--ewut-uny-accent);
  font-weight: 600;
  text-decoration: none;
}

.ewut-article__body .wp-calendar-nav {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 0.85em;
}

.ewut-article__body .wp-calendar-nav a {
  color: var(--ewut-uny-accent);
  text-decoration: none;
}

/* ---- Search block (in-content) → theme input + accent button ---- */
.ewut-article__body .wp-block-search {
  margin: 8px 0 24px;
}

.ewut-article__body .wp-block-search__label {
  display: block;
  font-weight: 600;
  color: var(--ewut-uny-dark);
  margin-bottom: 8px;
}

.ewut-article__body .wp-block-search__input {
  border: 1px solid var(--ewut-uny-border);
  border-radius: 8px;
  padding: 0 16px;
  height: 48px;
  font-size: 1em;
  color: var(--ewut-uny-dark);
  background: var(--ewut-uny-white);
}

.ewut-article__body .wp-block-search__input:focus {
  outline: none;
  border-color: var(--ewut-uny-accent);
}

/* Button-outside layout: input keeps its own radius, button sits apart. */
.ewut-article__body .wp-block-search .wp-block-search__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  min-width: 48px;
  padding: 0 20px;
  margin-left: 8px;
  border: none;
  border-radius: 8px;
  background: var(--ewut-uny-accent);
  color: var(--ewut-uny-on-accent);
  font-size: 1em;
  font-weight: 500;
  line-height: 1;
  transition: background-color ease 0.2s;
}

.ewut-article__body .wp-block-search .wp-block-search__button:hover {
  background: var(--ewut-uny-accent-hover);
  color: var(--ewut-uny-on-accent);
}

.ewut-article__body .wp-block-search .wp-block-search__button svg {
  fill: currentColor;
}

/* Button-inside layout: input + button share one rounded shell. */
.ewut-article__body
  .wp-block-search.wp-block-search__button-inside
  .wp-block-search__inside-wrapper {
  border: 1px solid var(--ewut-uny-border);
  border-radius: 8px;
  padding: 4px;
  overflow: hidden;
}

.ewut-article__body
  .wp-block-search.wp-block-search__button-inside
  .wp-block-search__input {
  border: none;
  height: 40px;
}

.ewut-article__body
  .wp-block-search.wp-block-search__button-inside
  .wp-block-search__button {
  height: 40px;
  margin-left: 0;
}

/* ---- Social Links → accent circles ---- */
.ewut-article__body .wp-block-social-links {
  gap: 8px;
  margin: 8px 0 24px;
  padding-left: 0;
  list-style: none;
}

.ewut-article__body .wp-social-link {
  width: 36px;
  height: 36px;
  display: flex !important;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background-color: var(--ewut-uny-accent);
  transition:
    background-color 0.15s,
    transform 0.15s;
}

.ewut-article__body .wp-social-link:hover {
  background-color: var(--ewut-uny-accent-hover);
  transform: translateY(-2px);
}

.ewut-article__body .wp-social-link a {
  padding: 8px;
}

/* Icon glyph is white on the accent circle (WP's default logos-only tone
   would render the icon dark = invisible on our accent chip). */
.ewut-article__body .wp-social-link,
.ewut-article__body .wp-social-link a,
.ewut-article__body .wp-social-link svg {
  color: var(--ewut-uny-on-accent);
  fill: currentColor;
}

/* ---- Tag Cloud (in-content) → theme pills like the sidebar ---- */
.ewut-article__body .wp-block-tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 24px;
}

.ewut-article__body .wp-block-tag-cloud a {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 2px 12px;
  border: 1px solid var(--ewut-uny-border);
  border-radius: 999px;
  font-size: 0.85em !important;
  color: var(--ewut-uny-dark);
  text-decoration: none;
  transition: all 0.15s;
}

.ewut-article__body .wp-block-tag-cloud a:hover {
  border-color: var(--ewut-uny-accent);
  color: var(--ewut-uny-accent);
}

.ewut-article__footer {
  margin-top: 40px;
}

.ewut-article__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 48px;
  padding-top: 48px;
  border-top: 1px solid var(--ewut-uny-border);
}

/* Empty post (no body copy): the meta capsule already ends with a bottom
   border, so the tags' own top divider would stack into a second line with
   a blank band between them. Drop the tags' top border/padding so the meta
   line is the only separator. */
.ewut-article--no-content .ewut-article__tags {
  padding-top: 0;
  border-top: 0;
}

/* Author bio block (after the tags) - an "About the author" eyebrow on
   top, then avatar + name on the left and bio text on the right. */
.ewut-author-bio,
.ewut-status {
  margin: 0 0 32px;
  padding: 24px;
  border: 1px solid var(--ewut-uny-border);
  border-radius: 8px;
  background: var(--ewut-uny-white);
}

.ewut-author-bio__eyebrow,
.ewut-status__eyebrow {
  display: block;
  font-size: 0.78em;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ewut-uny-muted);
  margin: 0 0 8px;
}

.ewut-author-bio__row,
.ewut-status__row {
  display: flex;
  align-items: flex-start;
  gap: 24px;
}

.ewut-author-bio__main,
.ewut-status__main {
  flex: 1;
}

.ewut-author-bio__side,
.ewut-status__side {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  width: 80px;
}

.ewut-author-bio__avatar img,
.ewut-status__avatar img {
  display: block;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
}

.ewut-author-bio__name,
.ewut-status__name {
  font-size: 0.9em;
  font-weight: 600;
  color: var(--ewut-uny-dark);
  text-decoration: none;
  line-height: 1.2;
}

.ewut-author-bio__name:hover,
.ewut-status__name:hover {
  color: var(--ewut-uny-accent);
}

.ewut-author-bio__text,
.ewut-status__text {
  flex: 1;
  color: var(--ewut-uny-dark);
  line-height: 1.7;
}

.ewut-article__tags a {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 2px 12px;
  background: rgba(0, 0, 0, 0);
  border: 1px solid var(--ewut-uny-border);
  border-radius: 999px;
  font-size: 16px;
  color: var(--ewut-uny-dark);
  text-decoration: none;
  transition: all 0.15s;
}

.ewut-article__tags a:hover {
  border-color: var(--ewut-uny-accent);
  color: var(--ewut-uny-accent);
}

.ewut-article__nav {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 48px;
  margin-bottom: 8px;
  padding-top: 0;
}

/* When the author block is NOT shown, the nav follows the tags directly,
   so it carries the separating line itself. With the author block (which
   has its own top border) this modifier is omitted. */
.ewut-article__nav--bordered {
  padding-top: 24px;
  border-top: 1px solid var(--ewut-uny-border);
}

@media (max-width: 768px) {
  .ewut-article__nav {
    flex-direction: column;
  }
}

.ewut-article__nav-link {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  max-width: 48%;
  color: var(--ewut-uny-dark);
  text-decoration: none;
  transition: color 0.2s;
}

.ewut-article__nav-link:hover {
  color: var(--ewut-uny-accent);
}

.ewut-article__next {
  flex-direction: row;
  margin-left: auto;
}

.ewut-article__nav-thumb {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  border-radius: 8px;
  overflow: hidden;
}

.ewut-article__nav-thumb img {
  width: 48px;
  height: 48px;
  object-fit: cover;
  display: block;
}

.ewut-article__nav-text {
  display: flex;
  flex-direction: column;
  margin-top: 4px;
  min-width: 0;
}

.ewut-article__next .ewut-article__nav-text {
  text-align: right;
}

.ewut-article__nav-dir {
  font-size: 0.76em;
  color: var(--ewut-uny-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.ewut-article__nav-title {
  font-size: 0.92em;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 768px) {
  .ewut-article__next {
    margin-left: 0;
    text-align: left;
  }
}

.ewut-posts {
  gap: 24px;
}

/* Related posts block on single.php - reuses .ewut-posts/.ewut-post-card;
   only the wrapper spacing and heading size are theme-owned here. */
.ewut-related {
  margin-top: 64px;
}

.ewut-related__title {
  font-size: var(--ewut-uny-fs-h3);
  margin: 0 0 24px;
}

/* Related posts row. Column count depends on the layout, driven by the
   modifier class on the section (set in single.php): 3-up with a sidebar,
   5-up on a full-width single. The selectors restate the sidebar-layout
   context so the generic 2-col sidebar rule doesn't override related. */
.ewut-related--cols-3 .ewut-posts > .ewut-post-card,
.ewut-layout-sidebar__main .ewut-related--cols-3 .ewut-posts > .ewut-post-card {
  flex: 0 0 calc((100% - 48px) / 3);
  max-width: calc((100% - 48px) / 3);
}
.ewut-related--cols-5 .ewut-posts > .ewut-post-card {
  flex: 0 0 calc((100% - 96px) / 5);
  max-width: calc((100% - 96px) / 5);
}
@media (max-width: 1024px) {
  .ewut-related .ewut-posts > .ewut-post-card,
  .ewut-layout-sidebar__main .ewut-related .ewut-posts > .ewut-post-card {
    flex-basis: calc((100% - 24px) / 2);
    max-width: calc((100% - 24px) / 2);
  }
}
@media (max-width: 576px) {
  .ewut-related .ewut-posts > .ewut-post-card,
  .ewut-layout-sidebar__main .ewut-related .ewut-posts > .ewut-post-card {
    flex-basis: 100%;
    max-width: 100%;
  }
}

/* Compact related card: cover + meta + title only (no excerpt / read-more).
   Title clamped to two lines so every card keeps an even height. */
.ewut-related .ewut-post-card--compact .ewut-post-card__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ewut-related .ewut-post-card__title {
  margin: 0 !important;
}

/* Related video cover: YouTube draws its (native, red) play button at a size
   keyed to the PLAYER's pixel size, so on the small related card the button
   looks oversized. Render the iframe at 2× the slot, then scale it back down
   by half - the player (and its native button) end up half-size relative to
   the card, keeping the real YouTube button, just smaller. `overflow:hidden`
   on the thumb clips the scaled-down box back to the slot. Scoped to
   .ewut-related so the blog feed is untouched. */
.ewut-related .ewut-post-card__thumb--video {
  overflow: hidden;
}
.ewut-related .ewut-post-card__thumb--video iframe {
  width: 200%;
  height: 200%;
  transform: translate(-50%, -50%) scale(0.5);
  transform-origin: center;
}

.ewut-posts.ewut-flex {
  flex-wrap: wrap;
}

/* 3 columns: subtract the two 24px gaps before dividing so cards fit the row. */
.ewut-posts > .ewut-post-card {
  flex: 0 0 calc((100% - 48px) / 3);
  max-width: calc((100% - 48px) / 3);
}

@media (max-width: 1024px) {
  .ewut-posts > .ewut-post-card {
    flex-basis: calc((100% - 24px) / 2);
    max-width: calc((100% - 24px) / 2);
  }
}

@media (max-width: 576px) {
  .ewut-posts > .ewut-post-card {
    flex-basis: 100%;
    max-width: 100%;
  }
}

.ewut-post-card {
  border-radius: 8px;
  overflow: hidden;
  transition:
    box-shadow 0.2s,
    border-color 0.2s;
  display: flex;
  flex-direction: column;
  box-shadow: inset 0 0 0 1px var(--ewut-uny-border);
}

.ewut-post-card:hover {
  box-shadow:
    inset 0 0 0 1px var(--ewut-uny-border-dark),
    0 4px 20px rgba(0, 0, 0, 0.07);
}

/* Sticky post - the card a site owner pinned to the top of the feed. Marked
   with the project's accent top edge, the same device as `.ewut-archive__intro`,
   `.ewut-author-card`, `.ewut-legal-notice` and the WooCommerce order
   summaries: 4px of accent along the top of an otherwise ordinary card.

   The class arrives from `post_class()` on the card wrapper, which the templates
   only started printing now - before that WordPress had no way to mark the
   state, so a pinned post looked exactly like every other one. Envato's review
   requires sticky posts to be styled.

   Laid OVER the card, not added to it as a real `border-top`. A border occupies
   4px of the box, which pushed the cover down and made the pinned card start 4px
   lower than everything level with it: the sidebar column beside it, and the
   other cards in its row. Positioning the band with `inset` takes it out of the
   flow, so it costs the card no height and moves nothing.

   `box-shadow: inset` was tried first and does not work here: an inset shadow
   paints above the card's background but BELOW its content, and the cover image
   sits flush against the top edge - measured by reading pixels down the top of
   the card, rows 212 to 220 all came back as the cover, with no accent anywhere.
   An overlay with a z-index is above the image.

   `overflow: hidden` on the card clips the band to the 8px corner radius, so it
   follows the rounded top exactly as the border did. */
.ewut-post-card.sticky {
  position: relative;
}

.ewut-post-card.sticky::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--ewut-uny-accent);
  z-index: 1;
  pointer-events: none;
}

.ewut-post-card__thumb {
  display: block;
  overflow: hidden;
  background: none;
  aspect-ratio: 16 / 10;
}

/* Generated fallback cover - shown in "feed" listings when a post has no
   featured image. A soft pastel panel (NOT the brand accent) carries two
   simple shapes anchored to OPPOSITE sides, each bleeding off its edge as a
   cropped fragment. Colours + shapes + placement come from per-post CSS vars
   / data-attributes, so every placeholder looks distinct while staying calm
   and never out-shouting real photo covers. */
.ewut-post-card__thumb--gen {
  position: relative;
  overflow: hidden;
  background: var(--ewut-gen-bg, var(--ewut-uny-light));
}

/* Two shapes: A = ::before, B = ::after. Size keyed to WIDTH + aspect-ratio:1
   so circles/squares stay true (never ovals) on the 16:10 card. */
.ewut-post-card__thumb--gen::before,
.ewut-post-card__thumb--gen::after {
  content: "";
  position: absolute;
  aspect-ratio: 1;
  pointer-events: none;
}

.ewut-post-card__thumb--gen::before {
  left: var(--ewut-gen-ax, 0%);
  top: var(--ewut-gen-ay, 0%);
  width: var(--ewut-gen-sa, 60%);
  transform: translate(-50%, -50%) rotate(var(--ewut-gen-ra, 0deg));
  background: var(--ewut-gen-ca, #ddd);
}

.ewut-post-card__thumb--gen::after {
  left: var(--ewut-gen-bx, 100%);
  top: var(--ewut-gen-by, 100%);
  width: var(--ewut-gen-sb, 55%);
  transform: translate(-50%, -50%) rotate(var(--ewut-gen-rb, 0deg));
  background: var(--ewut-gen-cb, #ccc);
}

/* Shape A type (data-shape-a): 0 circle 1 square 2 diamond 3 triangle */
.ewut-post-card__thumb--gen[data-shape-a="0"]::before {
  border-radius: 50%;
}
.ewut-post-card__thumb--gen[data-shape-a="1"]::before {
  border-radius: 6px;
}
.ewut-post-card__thumb--gen[data-shape-a="2"]::before {
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.ewut-post-card__thumb--gen[data-shape-a="3"]::before {
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

/* Shape B type (data-shape-b) */
.ewut-post-card__thumb--gen[data-shape-b="0"]::after {
  border-radius: 50%;
}
.ewut-post-card__thumb--gen[data-shape-b="1"]::after {
  border-radius: 6px;
}
.ewut-post-card__thumb--gen[data-shape-b="2"]::after {
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.ewut-post-card__thumb--gen[data-shape-b="3"]::after {
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.ewut-post-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}

/* Format-content covers (non-standard post formats without a featured image):
   video/audio embeds, native audio player, and text panels for
   aside/status/link posts. All share the 16:10 slot from `.ewut-post-card__thumb`. */
.ewut-post-card__thumb--embed,
.ewut-post-card__thumb--audio,
.ewut-post-card__thumb--text {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ewut-uny-light);
  transition: background-color 0.25s ease;
}

.ewut-post-card__thumb--embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Audio: center the player in the slot; format icon pinned to the top. */
.ewut-post-card__thumb--audio {
  padding: 0 20px;
}

.ewut-post-card__thumb--audio iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.ewut-post-card__thumb--audio audio {
  width: 100%;
}

/* Format icon: pinned to the top of the slot, accent-colored by default. */
.ewut-post-card__thumb-icon {
  position: absolute;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ewut-uny-accent);
  transition: color 0.25s ease;
}

.ewut-post-card__thumb-icon svg {
  width: 28px;
  height: 28px;
  display: block;
}

/* Text panel (aside / status / link): excerpt centered both axes, clamped so
   it never overflows the 16:10 slot; format icon pinned to the top. */
.ewut-post-card__thumb--text {
  padding: 24px 28px;
  text-align: center;
}

.ewut-post-card__thumb-text {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  width: 90%;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--ewut-uny-dark);
  transition: color 0.25s ease;
}

/* Quote: same panel, but the excerpt reads as a quotation - italic. */
.ewut-post-card__thumb--quote .ewut-post-card__thumb-text {
  font-style: italic;
}

/* Video: embed the live player inline (like the builder blog cards). The
   iframe fills the 16:10 slot; each host shows its own poster + play button. */
.ewut-post-card__thumb--video {
  position: relative;
  overflow: hidden;
  background: var(--ewut-uny-light);
}

/* Cover the slot like an image: a 16:9 player in a square/16:10 slot would
   otherwise letterbox (black bars top/bottom). Force the iframe to keep a
   16:9 box but grow to at least fill the slot in both axes, centred, so the
   video fills the frame and the overflow is clipped - the object-fit:cover
   equivalent for an iframe. */
.ewut-post-card__thumb--video iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: auto;
  height: auto;
  min-width: 100%;
  min-height: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  display: block;
}

/* Listing video cover: the click-to-play facade shows the clean poster with a
   single play button (no YouTube title/author chrome - that only exists in the
   live player and can't be hidden from a cross-origin iframe). The play button
   is scaled to ~half the in-content facade size so it stays proportional to the
   small feed thumbnail. */
.ewut-post-card__thumb--video .ewut-video-facade__play {
  width: 34px;
  height: 24px;
  border-radius: 8px;
}

.ewut-post-card__thumb--video .ewut-video-facade__play::before {
  border-width: 5px 0 5px 8px;
  margin-left: 2px;
}

/* Hover: swap the light panel for the accent fill, flip icon + text to white.
   Double class beats the generic `.ewut-post-card__thumb:hover{background:none}`
   rule that follows it in source order. */
.ewut-post-card__thumb.ewut-post-card__thumb--text:hover,
.ewut-post-card__thumb.ewut-post-card__thumb--audio:hover {
  background: var(--ewut-uny-accent);
}

.ewut-post-card__thumb--text:hover .ewut-post-card__thumb-icon,
.ewut-post-card__thumb--text:hover .ewut-post-card__thumb-text,
.ewut-post-card__thumb--audio:hover .ewut-post-card__thumb-icon {
  color: var(--ewut-uny-on-accent);
}

.ewut-post-card__thumb:hover {
  background: none;
}

/* Generated placeholder keeps its pastel panel on hover (no <img> to zoom). */
.ewut-post-card__thumb--gen:hover {
  background: var(--ewut-gen-bg, var(--ewut-uny-light));
}

.ewut-post-card__thumb:hover img {
  transform: scale(1.03);
}

.ewut-post-card__body {
  padding: 20px 24px 24px;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.ewut-post-card__meta {
  font-size: 0.8em;
  color: var(--ewut-uny-muted);
  margin-bottom: 10px;
}

.ewut-post-card__cat + .ewut-post-card__date::before {
  content: "\00b7";
  display: inline-block;
  margin: 0 6px;
  color: var(--ewut-uny-muted);
}

/* "Many categories" collapse: hidden extras + a small "+N" toggle. The
   container stays inline (text separators ", "), never flex. */
.ewut-cat-more[hidden] {
  display: none;
}

.ewut-cat-toggle {
  display: inline;
  margin-left: 4px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  line-height: inherit;
}

.ewut-cat-toggle:hover {
  color: var(--ewut-uny-accent);
}

.ewut-post-card__title {
  font-size: 1.1em;
  font-weight: 600;
  line-height: 1.3;
  margin: 0 0 10px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ewut-post-card__title a {
  color: inherit;
  text-decoration: none;
}

.ewut-post-card__title a:hover {
  color: var(--ewut-uny-accent);
}

.ewut-post-card__excerpt {
  font-size: 0.9em;
  color: var(--ewut-uny-grey);
  font-weight: 500;
  line-height: 1.6;
  margin-bottom: 16px;
}

.ewut-post-card__excerpt p {
  margin: 0;
}

.ewut-post-card .ewut-button {
  text-decoration: none;
  margin-top: auto;
  align-self: flex-start;
  display: inline-flex;
}

.ewut-archive__title {
  font-size: 2.2em;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ewut-uny-dark);
  margin: 0 0 12px;
}

@media (max-width: 768px) {
  .ewut-archive__title {
    font-size: 1.6em;
  }
}

/* ── Unified page header (breadcrumb + title) ──────────────────
   Every template renders its title through ewut_uny_page_header()
   → identical class, level (h2) and size site-wide. h1 is reserved
   for the site name in the header. */
.ewut-page-header {
  margin-bottom: 24px;
}

.ewut-page-title {
  font-size: 3em;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ewut-uny-dark);
  margin: 0 0 0 -3px;
}

@media (max-width: 768px) {
  .ewut-page-title {
    font-size: 2.1em;
  }
}

/* Breadcrumb trail - matches the WooCommerce breadcrumb tone so the
   whole site reads the same above every page title. */
.ewut-breadcrumb {
  font-size: 0.92em;
  color: var(--ewut-uny-dark);
  margin: 0 0 12px;
}

.ewut-breadcrumb a {
  color: var(--ewut-uny-dark);
  transition: color 0.2s;
}

.ewut-breadcrumb a:hover {
  color: var(--ewut-uny-accent);
}

.ewut-breadcrumb__sep {
  margin: 0 8px;
  color: var(--ewut-uny-muted);
}

.ewut-breadcrumb__current {
  color: var(--ewut-uny-muted);
}

/* Page-header top row: breadcrumbs left, view toggle right. */
.ewut-page-header__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 12px;
}

.ewut-page-header__top .ewut-breadcrumb {
  margin: 0;
}

/* Grid / List view switcher. */
.ewut-view-toggle {
  display: inline-flex;
  flex-shrink: 0;
  gap: 4px;
  padding: 0;
  transform: translateY(2px);
}

.ewut-view-toggle__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  /* 8px is the project-wide radius; this was the only 6px on a control. */
  border-radius: 8px;
  background: none;
  color: var(--ewut-uny-muted);
  cursor: pointer;
  transition: color 0.2s;
}

.ewut-view-toggle__btn:hover {
  color: var(--ewut-uny-dark);
}

.ewut-view-toggle__btn.is-active {
  background: none;
  color: var(--ewut-uny-accent);
}

.ewut-view-toggle__btn svg {
  display: block;
  width: 20px;
  height: 20px;
}

/* The grid glyph (4 filled squares) reads visually larger than the list
   glyph (thin lines) at the same box size - trim it down so the pair looks
   balanced. */
.ewut-view-toggle__btn[data-view="grid"] svg {
  width: 17px;
  height: 17px;
}

/* Custom tooltip for the view-toggle buttons (data-tip). Appears on
   hover / keyboard focus below the button. aria-label keeps it accessible;
   the native title is dropped so there's no double tooltip. */
.ewut-view-toggle__btn {
  position: relative;
}

.ewut-view-toggle__btn[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  padding: 5px 9px;
  background: var(--ewut-uny-ink);
  color: var(--ewut-uny-on-accent);
  font-size: 11px;
  line-height: 1;
  white-space: nowrap;
  border-radius: 5px;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.15s,
    transform 0.15s;
  z-index: 20;
}

.ewut-view-toggle__btn[data-tip]::before {
  content: "";
  position: absolute;
  top: calc(100% + 3px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  border: 5px solid transparent;
  border-bottom-color: var(--ewut-uny-ink);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.15s,
    transform 0.15s;
  z-index: 20;
}

.ewut-view-toggle__btn[data-tip]:hover::after,
.ewut-view-toggle__btn[data-tip]:focus-visible::after,
.ewut-view-toggle__btn[data-tip]:hover::before,
.ewut-view-toggle__btn[data-tip]:focus-visible::before {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── List view: one card per row, thumb left, body right. ────────── */
.ewut-posts--list > .ewut-post-card {
  flex-basis: 100%;
  max-width: 100%;
  flex-direction: row;
  align-items: flex-start;
}

.ewut-posts--list > .ewut-post-card .ewut-post-card__thumb {
  flex: 0 0 auto;
  width: 120px;
  height: 120px;
  aspect-ratio: 1 / 1;
}

.ewut-posts--list > .ewut-post-card .ewut-post-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ewut-posts--list > .ewut-post-card .ewut-post-card__body {
  flex: 1 1 auto;
  justify-content: center;
  min-width: 0;
  padding: 20px 24px 0;
}

/* List view: title and excerpt are each capped to a SINGLE line with an
   ellipsis. They must never wrap or expand - the thumb keeps its fixed
   144px square (aspect-ratio 1/1), and a taller text column would break
   that ratio. `min-width:0` on the body lets the flex child actually shrink
   so the ellipsis can kick in. */
.ewut-posts--list > .ewut-post-card .ewut-post-card__title {
  display: block;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 4px;
}

.ewut-posts--list > .ewut-post-card .ewut-post-card__excerpt {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 16px;
}

.ewut-posts--list > .ewut-post-card .ewut-post-card__excerpt p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Cards without a thumb (list-context posts, no featured image) still fill
   the row cleanly - the body just spans the full width. */
.ewut-posts--list
  > .ewut-post-card:not(:has(.ewut-post-card__thumb))
  .ewut-post-card__body {
  flex-basis: 100%;
}

/* "Read more" link - accent, inline, matches the block editor Read More.
   `margin-top:auto` pins it to the BOTTOM of the card body (a flex column
   with flex:1), so it lines up across cards regardless of title/excerpt
   height. `align-self:flex-start` keeps the hit-area to the text width. */
.ewut-post-card__more {
  display: inline-block;
  align-self: flex-start;
  margin-top: auto;
  color: var(--ewut-uny-accent);
  font-size: 0.9em;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.15s;
}

.ewut-post-card__more:hover {
  color: var(--ewut-uny-accent-hover);
}

/* "Read more" link belongs to the GRID card only. In list view the whole
   card title/excerpt already links through, so the link is redundant -
   hide it there. */
.ewut-posts--list > .ewut-post-card .ewut-post-card__more {
  display: none;
}

@media (max-width: 768px) {
  /* On small screens the list collapses back to a stacked card so the
       thumbnail and text don't get too cramped side by side. */
  .ewut-posts--list > .ewut-post-card {
    flex-direction: column;
  }
  .ewut-posts--list > .ewut-post-card .ewut-post-card__thumb {
    flex-basis: auto;
    max-width: 100%;
  }
}

/* Author archive intro card - avatar + bio + post count. */
.ewut-author-card {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 24px;
  margin: 0 0 40px;
  border: 1px solid var(--ewut-uny-border);
  border-top: 4px solid var(--ewut-uny-accent);
  border-radius: 8px;
  background: var(--ewut-uny-white);
}

.ewut-author-card__avatar img {
  display: block;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
}

.ewut-author-card__info {
  flex: 1;
  min-width: 0;
}

.ewut-author-card__bio {
  margin: 0 0 6px;
  color: var(--ewut-uny-dark);
  line-height: 1.6;
}

.ewut-author-card__count {
  margin: 0;
  font-size: 0.9em;
  color: var(--ewut-uny-grey);
}

.ewut-author-card__sep {
  margin: 0 8px;
  color: var(--ewut-uny-muted);
}

.ewut-author-card__link {
  color: var(--ewut-uny-dark);
  font-weight: 500;
}

.ewut-author-card__link:hover {
  color: var(--ewut-uny-accent);
}

/* Archive intro block: category description + post count / RSS row wrapped in
   a single light, bordered card. On the day archive there's no description,
   so the card just holds the "N posts" line. */
.ewut-archive__intro {
  border: 1px solid var(--ewut-uny-border);
  border-top: 4px solid var(--ewut-uny-accent);
  border-radius: 8px;
  padding: 20px 24px;
  margin: 0 0 32px;
}

.ewut-archive__desc {
  font-size: 1.25em;
  color: var(--ewut-uny-dark);
  font-weight: 600;
  margin: 0 0 8px;
  line-height: 1.25;
}

.ewut-archive__desc p {
  line-height: 1.25;
}

.ewut-archive__count {
  font-size: 0.9em;
  color: var(--ewut-uny-muted);
  margin: 0;
  padding-top: 0;
  line-height: 1.25;
}

/* When a description is present, keep a small gap above the count row. */
.ewut-archive__desc + .ewut-archive__count {
  margin-top: 4px;
}

.ewut-archive__sep {
  margin: 0 8px;
  color: var(--ewut-uny-border);
}

.ewut-archive__feed {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--ewut-uny-dark);
  font-weight: 500;
  vertical-align: middle;
}

.ewut-archive__feed:hover {
  color: var(--ewut-uny-accent);
}

/* Accessibility helper - visually hidden text.
   WordPress core markup relies on this class being hidden: the headings
   printed by `the_posts_pagination()` and `the_comments_pagination()`
   ("Posts pagination", "Comments navigation"), the search-form label, the
   password-form label and the shop view-switcher labels all use it. Without
   the rule those strings render as plain visible text under the block. */
.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Keep it reachable for keyboard users when focused (skip links). */
.screen-reader-text:focus {
  position: static !important;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

.ewut-pagination {
  margin-top: 48px;
  display: flex;
  justify-content: center;
}

.ewut-pagination .nav-links {
  display: flex;
  gap: 8px;
  align-items: center;
}

.ewut-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 6px;
  border: 1px solid var(--ewut-uny-border);
  border-radius: 8px;
  font-size: 0.9em;
  font-weight: 500;
  line-height: 1;
  color: var(--ewut-uny-dark);
  transition:
    color 0.15s,
    border-color 0.15s,
    background-color 0.15s;
}

.ewut-pagination .page-numbers:hover {
  background-color: var(--ewut-uny-accent);
  border-color: transparent;
  color: var(--ewut-uny-on-accent);
}

.ewut-pagination .page-numbers.current {
  background: var(--ewut-uny-light);
  color: var(--ewut-uny-muted);
  border-color: var(--ewut-uny-border-dark);
}

/* Prev / Next are text labels, not single glyphs: let them grow and
   breathe with horizontal padding instead of being clipped in a square. */
.ewut-pagination .page-numbers.prev,
.ewut-pagination .page-numbers.next {
  width: auto;
  padding: 0 16px;
  gap: 6px;
  color: var(--ewut-uny-dark);
  border: 1px solid var(--ewut-uny-border);
  background: none;
}

.ewut-pagination .page-numbers.dots {
  border: none;
  min-width: 0;
  width: auto;
  padding: 0 2px;
  color: var(--ewut-uny-muted);
  background-color: transparent !important;
}

.ewut-pagination .page-numbers.dots:hover {
  color: var(--ewut-uny-muted);
  background-color: transparent !important;
}

.ewut-search-form {
  display: flex;
  gap: 0;
  margin-bottom: 40px;
  width: 100%;
}

.ewut-search-form__input {
  flex: 1;
  height: 48px;
  padding: 0 16px;
  border: 1px solid var(--ewut-uny-border);
  border-right: none;
  border-radius: 8px 0 0 8px;
  font-family: var(--ewut-uny-font);
  font-size: 0.95em;
  color: var(--ewut-uny-dark);
  outline: none;
}

.ewut-search-form__input:focus {
  border-color: var(--ewut-uny-accent);
}
/* The clear button of a search field.
   Chrome draws its own glyph inside `<input type="search">` as soon as the field
   has a value: `::-webkit-search-cancel-button`, a cross in the browser's own
   blue. Nobody asked for it, and it looked out of place in every search field the
   product has - a blue cross beside the accent submit button.
   Replaced, not removed: `-webkit-appearance: none` on its own deletes the
   control, and a field with text in it and no way to clear it is worse than an
   ugly cross.
   Drawn as a MASK so `background-color: currentColor` decides the colour - the
   cross then follows the field's own text colour instead of being pinned to one
   tone. The shape is Feather `x`. Same treatment on the plugin side, in
   `source/new-styles/components/_form.sass`. */
.ewut-search-form__input::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  margin-left: 8px;
  cursor: pointer;
  background-color: currentColor;
  /* A secondary control inside a field: at full strength it competed with the
     value the user typed. */
  opacity: 0.55;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
input[type="search"]:hover::-webkit-search-cancel-button,
input[type="search"]:focus::-webkit-search-cancel-button {
  opacity: 1;
}

.ewut-search-form .ewut-button {
  border-radius: 0 8px 8px 0;
  height: 48px;
  min-width: auto;
}

.ewut-no-results {
  font-size: 1.1em;
  color: var(--ewut-uny-muted);
  padding: 48px 0;
  text-align: center;
}

.ewut-404 {
  text-align: center;
  padding: 80px 0;
  max-width: 100%;
  margin: 0 auto;
}

.ewut-404__code,
.ewut-404__title,
.ewut-404__desc {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

.ewut-404__code {
  font-size: 8em;
  font-weight: 800;
  color: var(--ewut-uny-accent);
  line-height: 1;
  letter-spacing: -0.04em;
  margin-bottom: 16px;
}

@media (max-width: 768px) {
  .ewut-404__code {
    font-size: 5em;
  }
}

.ewut-404__title {
  font-size: 2em;
  font-weight: 700;
  color: var(--ewut-uny-dark);
  margin: 0 auto 16px;
}

.ewut-404__desc {
  font-size: 1.05em;
  color: var(--ewut-uny-grey);
  margin: 0 auto 32px;
}

/* 404 - search, actions and suggested links */
.ewut-404__search {
  max-width: 420px;
  margin: 0 auto 24px;
}

.ewut-404__actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 48px;
}

.ewut-404__suggest {
  text-align: left;
  max-width: 100%;
  margin: 0 auto;
  padding-top: 32px;
  border-top: 1px solid var(--ewut-uny-border);
}

.ewut-404__suggest-title {
  font-size: 0.8em;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ewut-uny-grey);
  margin: 0 0 20px;
  text-align: center;
}

.ewut-404__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.ewut-404__card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--ewut-uny-border);
  border-radius: 8px;
  color: var(--ewut-uny-dark);
  transition:
    border-color ease 0.2s,
    color ease 0.2s;
}

.ewut-404__card:hover {
  border-color: var(--ewut-uny-border-dark);
}

.ewut-404__card-thumb {
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--ewut-uny-medium);
}

.ewut-404__card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ewut-404__card-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.ewut-404__card-title {
  font-size: 0.95em;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ewut-uny-dark);
  transition: color ease 0.2s;
}

.ewut-404__card:hover .ewut-404__card-title {
  color: var(--ewut-uny-accent);
}

.ewut-404__card-meta {
  font-size: 0.78em;
  color: var(--ewut-uny-grey);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.ewut-404__card-cat {
  color: var(--ewut-uny-accent);
  font-weight: 600;
}

.ewut-404__card-cat::after {
  content: "·";
  margin-left: 6px;
  color: var(--ewut-uny-grey);
}

@media (max-width: 900px) {
  .ewut-404__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 540px) {
  .ewut-404__grid {
    grid-template-columns: 1fr;
  }
}

.ewut-comments {
  max-width: 780px;
  margin: 40px 0 0;
  padding-top: 32px;
  border-top: 1px solid var(--ewut-uny-border);
}

.ewut-comments__title {
  font-size: 1.4em;
  font-weight: 700;
  color: var(--ewut-uny-dark);
  margin: 0 0 32px;
}

.ewut-comments__closed {
  color: var(--ewut-uny-muted);
  font-size: 0.9em;
}

.ewut-comment-list {
  list-style: none;
  padding: 0;
  margin: 0 0 40px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.ewut-comment-list .children {
  list-style: none;
  padding-left: 40px;
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

@media (max-width: 768px) {
  .ewut-comment-list .children {
    padding-left: 16px;
  }
}

.ewut-comment__body {
  background: var(--ewut-uny-light);
  border-radius: 8px;
  padding: 20px 24px;
}

/* Post author's own comment - mark it with an accent left border so it's
   distinguishable from visitor comments (WordPress adds `.bypostauthor`). */
.ewut-comment-list > li.bypostauthor > .ewut-comment__body,
.ewut-comment-list .children > li.bypostauthor > .ewut-comment__body {
  border-left: 3px solid var(--ewut-uny-accent);
}

.ewut-comment__author {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.ewut-comment__avatar {
  border-radius: 50%;
  flex-shrink: 0;
}

.ewut-comment__name {
  display: block;
  font-weight: 600;
  font-size: 0.95em;
  color: var(--ewut-uny-dark);
}

.ewut-comment__date {
  display: block;
  font-size: 0.8em;
  color: var(--ewut-uny-muted);
  margin-top: 0;
}

/* Comment body reuses the article typography (`.ewut-article__body` class is
   added in the comment callback) so rich comment content - headings, lists,
   blockquotes, tables, hr, pre - gets the same vertical rhythm as the post.
   Only the accent link border from `p a` is scoped away below; no size/margin
   overrides here so the article rules win cleanly. */
.ewut-comment__text {
  color: var(--ewut-uny-dark);
}

/* Comment body copy is one step smaller than article prose (16px vs 18px) -
   comments read as secondary content, 18px is too large here. */
.ewut-comment__text p,
.ewut-comment__text li,
.ewut-comment__text dd,
.ewut-comment__text dt {
  font-size: 16px;
}

/* An inline image inside a comment paragraph is separated from the
   surrounding text only by <br>; since the img renders as a block it would
   otherwise butt straight against the text above and below. Give it a little
   vertical breathing room. */
.ewut-comment__text img {
  display: block;
  margin: 12px 0;
}

.ewut-comment__reply {
  margin-top: 12px;
}

/* Comment pagination - reuse the blog `.ewut-pagination` circle style and
   sit with equal vertical breathing room between the last comment above and
   the reply form below. */
.ewut-comments > .ewut-pagination {
  margin-top: 40px;
  margin-bottom: 40px;
}

/* Prev/next in comment pagination are chevron icons, not text labels -
   keep them square like the number buttons instead of the wide text pill. */
.ewut-comments > .ewut-pagination .page-numbers.prev,
.ewut-comments > .ewut-pagination .page-numbers.next {
  width: 40px;
  padding: 0;
}

.ewut-comments > .ewut-pagination .ewut-pagination__chevron {
  display: block;
}

/* Pingbacks / trackbacks are automated link notifications, not real comments.
   Render them as a compact, single reference line (no card background, no
   avatar, no reply link) so they read differently from human comments. */
.ewut-comment-list > li.pingback > .ewut-comment__body,
.ewut-comment-list > li.trackback > .ewut-comment__body {
  background: none;
  padding: 8px 0;
  border-bottom: 1px solid var(--ewut-uny-border);
  border-radius: 0;
}

/* The comment list uses a 24px flex gap that suits the comment cards. For the
   thin pingback/trackback reference lines that 24px lands between the divider
   of the previous line and the next line's text, making a big lopsided gap
   above each ping (only 8px below to its own divider). Collapse the gap
   between consecutive ping/track lines so the divider sits symmetrically
   (8px above / 8px below). */
.ewut-comment-list > li.pingback + li.pingback,
.ewut-comment-list > li.pingback + li.trackback,
.ewut-comment-list > li.trackback + li.trackback,
.ewut-comment-list > li.trackback + li.pingback {
  margin-top: -24px;
}

.ewut-comment-list > li.pingback .ewut-comment__author,
.ewut-comment-list > li.trackback .ewut-comment__author {
  margin-bottom: 0;
}

/* Small link glyph before the source title. */
.ewut-comment-list > li.pingback .ewut-comment__author::before,
.ewut-comment-list > li.trackback .ewut-comment__author::before {
  content: "";
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  background: var(--ewut-uny-muted);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/%3E%3C/svg%3E")
    no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/%3E%3C/svg%3E")
    no-repeat center / contain;
}

.ewut-comment-list > li.pingback .ewut-comment__name,
.ewut-comment-list > li.trackback .ewut-comment__name {
  display: inline;
  font-weight: 500;
  font-size: 0.9em;
  color: var(--ewut-uny-dark);
}

.ewut-comment-list > li.pingback .ewut-comment__date,
.ewut-comment-list > li.trackback .ewut-comment__date {
  display: inline;
  margin-top: 0;
  margin-left: 8px;
}

/* Drop the automated excerpt and reply link - the source title is enough. */
.ewut-comment-list > li.pingback .ewut-comment__text,
.ewut-comment-list > li.trackback .ewut-comment__text,
.ewut-comment-list > li.pingback .ewut-comment__reply,
.ewut-comment-list > li.trackback .ewut-comment__reply {
  display: none;
}

.ewut-comment__reply a {
  font-size: 0.85em;
  font-weight: 500;
  color: var(--ewut-uny-accent);
}

.ewut-comment__reply a:hover {
  color: var(--ewut-uny-accent-hover);
}

#respond h3 {
  font-size: 1.4em;
  font-weight: 700;
  color: var(--ewut-uny-dark);
  margin: 0 0 24px;
}

.ewut-comment-form__row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.ewut-comment-form__row > .ewut-comment-form__field {
  flex: 1 1 calc(50% - 8px);
  min-width: 0;
}

@media (max-width: 768px) {
  .ewut-comment-form__row > .ewut-comment-form__field {
    flex-basis: 100%;
  }
}

.ewut-comment-form__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}

.ewut-comment-form__field label {
  font-size: 0.95em;
  font-weight: 500;
  color: var(--ewut-uny-grey);
}

.ewut-comment-form__field label span {
  color: var(--ewut-uny-accent);
}

.ewut-comment-form__field input,
.ewut-comment-form__field textarea {
  padding: 12px 16px;
  border: 1px solid var(--ewut-uny-border);
  /* 8px is the project radius (see the rule: 8, never 2/4/6/12). */
  border-radius: 8px;
  font-family: var(--ewut-uny-font);
  font-size: 1em;
  color: var(--ewut-uny-dark);
  background: var(--ewut-uny-white);
  outline: none;
  transition: border-color 0.15s ease;
}

.ewut-comment-form__field input:focus,
.ewut-comment-form__field textarea:focus {
  border-color: var(--ewut-uny-accent);
}

.ewut-comment-form__field textarea {
  resize: vertical;
  min-height: 140px;
}

#respond .form-submit {
  margin-top: 8px;
}

/* WordPress-generated comment form bits (reply title, notes, login note,
   and the submit button - the theme's .ewut-button is not applied here). */
#respond .comment-reply-title {
  font-size: 1.4em;
  font-weight: 700;
  color: var(--ewut-uny-dark);
  margin: 0 0 24px;
}

#respond .comment-reply-title small {
  font-size: 0.6em;
  font-weight: 500;
  margin-left: 12px;
}

#respond .comment-reply-title small a {
  color: inherit;
  text-decoration: none;
}

#respond .comment-notes,
#respond .logged-in-as {
  font-size: 15px;
  color: var(--ewut-uny-dark);
  margin: 0 0 20px;
}

#respond .comment-notes a,
#respond .logged-in-as a {
  color: inherit;
  text-decoration: underline;
  transition: color 0.2s;
}

#respond .comment-notes a:hover,
#respond .logged-in-as a:hover {
  color: var(--ewut-uny-accent);
}

#respond .required,
#respond .comment-notes .required,
#respond .required-field-message .required {
  color: var(--ewut-uny-accent);
}

#respond .form-submit .submit {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-width: 140px;
  height: 48px;
  padding: 0 28px;
  color: var(--ewut-uny-on-accent);
  font-size: 1em;
  font-weight: 500;
  font-family: var(--ewut-uny-font);
  border-radius: 8px;
  border: none;
  outline: none;
  box-shadow: none;
  background-color: var(--ewut-uny-accent);
  transition: background-color ease 0.2s;
  cursor: pointer;
}

#respond .form-submit .submit:hover {
  background-color: var(--ewut-uny-accent-hover);
}

/* Comment blocks rendered INSIDE post content (Theme-Unit-Test "Comments" /
   "Post Comments Form" blocks). These use WP's raw markup
   (.comment-respond / .wp-block-post-comments-form) which the theme's
   #respond rules don't reach, so the submit button falls back to the
   unstyled browser default. Map it to the theme accent button. */
.ewut-article__body .comment-respond .form-submit .submit,
.ewut-article__body .wp-block-post-comments-form .form-submit .submit {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-width: 140px;
  height: 48px;
  padding: 0 28px;
  color: var(--ewut-uny-on-accent);
  font-size: 1em;
  font-weight: 500;
  font-family: var(--ewut-uny-font);
  line-height: 1;
  border-radius: 8px;
  border: none;
  outline: none;
  box-shadow: none;
  background-color: var(--ewut-uny-accent);
  transition: background-color ease 0.2s;
  cursor: pointer;
}

.ewut-article__body .comment-respond .form-submit .submit:hover,
.ewut-article__body .wp-block-post-comments-form .form-submit .submit:hover {
  background-color: var(--ewut-uny-accent-hover);
  color: var(--ewut-uny-on-accent);
}

/* ---- Comment reply form (comment-respond / wp-block-post-comments-form) ----
   Align the "Leave a Reply" title, notes and fields with the theme's own
   comment form (.ewut-comment-form) instead of WP block defaults. */
.ewut-article__body .comment-respond .comment-reply-title,
.ewut-article__body .wp-block-post-comments-form .comment-reply-title {
  font-size: 1.4em;
  font-weight: 700;
  color: var(--ewut-uny-dark);
  line-height: 1.25;
  margin: 0 0 24px;
}

.ewut-article__body .comment-respond .comment-reply-title small,
.ewut-article__body .wp-block-post-comments-form .comment-reply-title small {
  font-size: 0.6em;
  font-weight: 500;
  margin-left: 12px;
}

.ewut-article__body .comment-respond .logged-in-as,
.ewut-article__body .comment-respond .comment-notes,
.ewut-article__body .wp-block-post-comments-form .logged-in-as,
.ewut-article__body .wp-block-post-comments-form .comment-notes {
  font-size: 15px;
  color: var(--ewut-uny-dark);
  margin: 0 0 20px;
}

.ewut-article__body .comment-respond label,
.ewut-article__body .wp-block-post-comments-form label {
  font-size: 0.95em;
  font-weight: 500;
  color: var(--ewut-uny-grey);
}

.ewut-article__body .comment-respond textarea,
.ewut-article__body
  .comment-respond
  input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.ewut-article__body .wp-block-post-comments-form textarea,
.ewut-article__body
  .wp-block-post-comments-form
  input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]) {
  padding: 12px 16px;
  border: 1px solid var(--ewut-uny-border);
  border-radius: 8px;
  font-family: var(--ewut-uny-font);
  font-size: 1em;
  color: var(--ewut-uny-dark);
  background: var(--ewut-uny-white);
  outline: none;
  transition: border-color 0.15s ease;
}

.ewut-article__body .comment-respond textarea:focus,
.ewut-article__body
  .comment-respond
  input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):focus,
.ewut-article__body .wp-block-post-comments-form textarea:focus,
.ewut-article__body
  .wp-block-post-comments-form
  input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):focus {
  border-color: var(--ewut-uny-accent);
}

.ewut-layout-sidebar {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  align-items: flex-start;
}

.ewut-layout-sidebar__main {
  flex: 1 1 0;
  min-width: 0;
}

.ewut-layout-sidebar__aside {
  flex: 0 0 300px;
  max-width: 300px;
  font-size: 16px;
  color: var(--ewut-uny-dark);
  margin-top: 0;
}

/* Sidebar on the left: keep source order (main first for a11y/SEO), flip
   visually with flex order. */
.ewut-layout-sidebar--left .ewut-layout-sidebar__main {
  order: 2;
}
.ewut-layout-sidebar--left .ewut-layout-sidebar__aside {
  order: 1;
}

@media (max-width: 1024px) {
  .ewut-layout-sidebar__main,
  .ewut-layout-sidebar__aside {
    flex-basis: 100%;
    max-width: 100%;
  }
}

.ewut-layout-sidebar__main {
  min-width: 0;
}

.ewut-layout-sidebar__main .ewut-posts > .ewut-post-card {
  flex-basis: calc((100% - 24px) / 2);
  max-width: calc((100% - 24px) / 2);
}

@media (max-width: 768px) {
  .ewut-layout-sidebar__main .ewut-posts > .ewut-post-card {
    flex-basis: 100%;
    max-width: 100%;
  }
}

/* List view inside the sidebar layout: one card per row (the two-column
   sidebar rule above is more specific than .ewut-posts--list, so restate
   the full-width basis for the list modifier in this context). */
.ewut-layout-sidebar__main .ewut-posts--list > .ewut-post-card {
  flex-basis: 100%;
  max-width: 100%;
}

.ewut-widget {
  margin-bottom: 32px;
  font-size: 16px;
}

.ewut-widget:last-child {
  margin-bottom: 0;
}

/* A widget that renders nothing still gets its wrapper from before_widget, and the
   32px gap above then pushes everything below it down - measured on the demo sidebar,
   three empty block widgets at the top shifted the first visible widget 32px below the
   article column. The wrapper is dropped when it has no element children at all, so an
   empty widget takes no space instead of leaving a hole in the layout. */
.ewut-widget:not(:has(> *)) {
  display: none !important;
}

.ewut-widget__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--ewut-uny-dark);
  margin: 0 0 16px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--ewut-uny-border);
}

.ewut-widget ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.ewut-widget ul li {
  padding: 8px 0;
  border-bottom: 1px solid var(--ewut-uny-border);
  font-size: 16px;
}

.ewut-widget ul li:last-child {
  border-bottom: none;
}

.ewut-widget ul li a {
  color: inherit;
  text-decoration: none;
}

.ewut-widget ul li a:hover {
  color: var(--ewut-uny-accent);
}

/* Nested lists (child categories, sub-pages, sub-menus) - show hierarchy */
.ewut-widget ul ul {
  margin: 8px 0 0;
  border-top: 1px solid var(--ewut-uny-border);
}

.ewut-widget ul ul li:first-child {
  padding-top: 8px;
}

.ewut-widget ul ul li:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

/* Second level of nesting and deeper get a 16px step indent */
.ewut-widget ul ul ul {
  padding-left: 16px;
}

/* Dash marker on nested sidebar links to signal hierarchy */
.ewut-widget ul ul li > a::before {
  content: "- ";
  color: var(--ewut-uny-muted);
}

.ewut-widget .search-form {
  display: flex;
}

.ewut-widget .search-form input {
  flex: 1;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--ewut-uny-border);
  border-right: none;
  border-radius: 8px 0 0 8px;
  font-family: var(--ewut-uny-font);
  font-size: 0.9em;
  outline: none;
}

.ewut-widget .search-form input:focus {
  border-color: var(--ewut-uny-accent);
}

.ewut-widget .search-form button,
.ewut-widget .search-form input[type="submit"] {
  height: 38px;
  padding: 0 14px;
  background: var(--ewut-uny-ink);
  color: var(--ewut-uny-on-accent);
  border: none;
  border-radius: 0 8px 8px 0;
  font-family: var(--ewut-uny-font);
  font-size: 0.9em;
  cursor: pointer;
}

.ewut-widget .search-form button:hover,
.ewut-widget .search-form input[type="submit"]:hover {
  background: var(--ewut-uny-accent);
}

.ewut-widget .tagcloud {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ewut-widget .tagcloud a,
.ewut-widget .tagcloud .tag-cloud-link {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 2px 12px;
  background: rgba(0, 0, 0, 0);
  border: 1px solid var(--ewut-uny-border);
  border-radius: 999px;
  font-size: 0.82em !important;
  color: var(--ewut-uny-dark);
  text-decoration: none;
}

.ewut-widget .tagcloud a:hover,
.ewut-widget .tagcloud .tag-cloud-link:hover {
  border-color: var(--ewut-uny-accent);
  color: var(--ewut-uny-accent);
}

.ewut-layout-sidebar__aside h1,
.ewut-layout-sidebar__aside h2,
.ewut-layout-sidebar__aside h3,
.ewut-layout-sidebar__aside h4,
.ewut-layout-sidebar__aside h5,
.ewut-layout-sidebar__aside h6 {
  font-size: 16px !important;
  font-weight: 700;
  color: var(--ewut-uny-dark);
  margin: 0 0 24px !important;
  padding: 0 !important;
}

.ewut-layout-sidebar__aside > * + * {
  margin-top: 32px;
}

/* A heading-only widget block (e.g. "Tag cloud") sits as a separate
   block from its content widget; the generic 32px block gap then
   doubles the title→content distance. Drop its bottom margin so the
   heading's own 16px margin alone sets the title→content gap. */
.ewut-layout-sidebar__aside > .ewut-widget:has(> .wp-block-heading:only-child) {
  margin-bottom: 0;
}
.ewut-layout-sidebar__aside
  > .ewut-widget:has(> .wp-block-heading:only-child)
  + .ewut-widget {
  margin-top: 0;
}

.ewut-layout-sidebar__aside .wp-block-search,
.ewut-layout-sidebar__aside .wp-block-latest-posts,
.ewut-layout-sidebar__aside .wp-block-categories,
.ewut-layout-sidebar__aside .wp-block-tag-cloud,
.ewut-layout-sidebar__aside .wp-block-archives,
.ewut-layout-sidebar__aside .wp-block-latest-comments {
  font-size: 16px !important;
}

.ewut-layout-sidebar__aside .wp-block-search__label {
  display: block;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--ewut-uny-dark);
  margin-bottom: 24px;
  padding-bottom: 0;
}

.ewut-layout-sidebar__aside .wp-block-categories .wp-block-categories__label {
  display: block;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--ewut-uny-dark);
  margin-bottom: 24px;
  padding-bottom: 0;
}

.ewut-layout-sidebar__aside .wp-block-categories select {
  margin-top: 8px;
}

.ewut-layout-sidebar__aside .wp-block-search__inside-wrapper {
  display: flex;
}

.ewut-layout-sidebar__aside .wp-block-search__input {
  flex: 1;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--ewut-uny-border);
  border-right: none;
  border-radius: 8px 0 0 8px;
  font-family: var(--ewut-uny-font);
  font-size: 16px;
  outline: none;
}

.ewut-layout-sidebar__aside .wp-block-search__input:focus {
  border-color: var(--ewut-uny-accent);
}

.ewut-layout-sidebar__aside .wp-block-search__button {
  margin-left: 0;
  height: 38px;
  padding: 0 20px;
  background: var(--ewut-uny-accent);
  color: var(--ewut-uny-on-accent);
  border: none;
  border-radius: 0 8px 8px 0;
  font-family: var(--ewut-uny-font);
  font-size: 16px;
  cursor: pointer;
  transition: all ease-out 0.3s;
}

.ewut-layout-sidebar__aside .wp-block-search__button:hover {
  background: var(--ewut-uny-accent-hover);
}

.ewut-layout-sidebar__aside .wp-block-latest-posts {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Every widget shows a uniform 24px title→content gap. The heading
   already carries margin-bottom:24; zero the first list item's top
   padding across ALL list widgets so none of them adds extra space. */
.ewut-layout-sidebar__aside ul:not(.children) > li:first-child,
.ewut-layout-sidebar__aside ol > li:first-child {
  padding-top: 0 !important;
}

/* Normalise the VISIBLE title→content gap to exactly 24px for every
   widget - see the override block at the end of this file. */

.ewut-layout-sidebar__aside .wp-block-tag-cloud {
  margin-top: 0 !important;
}

.ewut-layout-sidebar__aside .wp-block-latest-posts__list-item {
  padding: 8px 0;
  border-bottom: 1px solid var(--ewut-uny-border);
}

.ewut-layout-sidebar__aside .wp-block-latest-posts__list-item:first-child {
  padding-top: 0 !important;
}

.ewut-layout-sidebar__aside .wp-block-latest-posts__list-item:last-child {
  border-bottom: none;
}

.ewut-layout-sidebar__aside .wp-block-latest-posts a {
  font-size: 16px;
  color: inherit;
  text-decoration: none;
}

.ewut-layout-sidebar__aside .wp-block-latest-posts a:hover {
  color: var(--ewut-uny-accent);
}

.ewut-layout-sidebar__aside .wp-block-categories {
  list-style: none;
  padding: 0;
  margin: 0;
}

.ewut-layout-sidebar__aside .wp-block-categories li {
  padding: 8px 0;
  border-bottom: 1px solid var(--ewut-uny-border);
  font-size: 16px;
}

.ewut-layout-sidebar__aside .wp-block-categories > li:first-child {
  padding-top: 0 !important;
}

.ewut-layout-sidebar__aside .wp-block-categories li:last-child {
  border-bottom: none;
}

.ewut-layout-sidebar__aside .wp-block-categories li a {
  color: inherit;
  text-decoration: none;
}

.ewut-layout-sidebar__aside .wp-block-categories li a:hover {
  color: var(--ewut-uny-accent);
}

.ewut-layout-sidebar__aside .wp-block-categories select {
  width: 100%;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--ewut-uny-border);
  border-radius: 8px;
  font-family: var(--ewut-uny-font);
  font-size: 16px;
  color: var(--ewut-uny-dark);
  background: var(--ewut-uny-white);
  outline: none;
  cursor: pointer;
  margin-top: 0;
}

.ewut-layout-sidebar__aside .wp-block-categories select:focus {
  border-color: var(--ewut-uny-accent);
}

.ewut-layout-sidebar__aside .wp-block-tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 0 !important;
}

.ewut-layout-sidebar__aside .wp-block-tag-cloud a {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 2px 12px;
  background: rgba(0, 0, 0, 0);
  border: 1px solid var(--ewut-uny-border);
  border-radius: 999px;
  font-size: 16px !important;
  color: var(--ewut-uny-dark);
  text-decoration: none !important;
  transition: all 0.15s;
}

.ewut-layout-sidebar__aside .wp-block-tag-cloud a:hover {
  border-color: var(--ewut-uny-accent);
  color: var(--ewut-uny-accent);
}

.ewut-layout-sidebar__aside .wp-block-archives {
  list-style: none;
  padding: 0;
  margin: 0;
}

.ewut-layout-sidebar__aside .wp-block-archives li {
  padding: 8px 0;
  border-bottom: 1px solid var(--ewut-uny-border);
  font-size: 16px;
}

.ewut-layout-sidebar__aside .wp-block-archives li:first-child {
  padding-top: 0 !important;
}

.ewut-layout-sidebar__aside .wp-block-archives li:last-child {
  border-bottom: none;
}

.ewut-layout-sidebar__aside .wp-block-archives li a {
  color: inherit;
  text-decoration: none;
  font-size: 16px;
}

.ewut-layout-sidebar__aside .wp-block-archives li a:hover {
  color: var(--ewut-uny-accent);
}

.ewut-layout-sidebar__aside .wp-block-latest-comments {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Core ships `.wp-block-latest-comments__comment { margin-bottom: 1em }`,
   which at 16px added 16px on top of the 8px padding - so the separator sat
   24px below the text here but only 8px in Recent Posts. Zero it so every
   list widget keeps the same 8px/8px rhythm around its divider. */
.ewut-layout-sidebar__aside .wp-block-latest-comments li {
  padding: 8px 0;
  margin: 0;
  border-bottom: 1px solid var(--ewut-uny-border);
  font-size: 16px;
  line-height: 1.5;
}

.ewut-layout-sidebar__aside .wp-block-latest-comments li:first-child {
  padding-top: 0 !important;
}

.ewut-layout-sidebar__aside .wp-block-latest-comments li:last-child {
  border-bottom: none;
}

.ewut-layout-sidebar__aside .wp-block-latest-comments a {
  color: inherit;
  text-decoration: none;
  font-size: 16px;
}

.ewut-layout-sidebar__aside .wp-block-latest-comments a:hover {
  color: var(--ewut-uny-accent);
}

.ewut-logo-fallback,
.custom-logo-link {
  display: inline-flex;
  align-items: center;
}

.ewut-logo-fallback img,
.ewut-logo-fallback .custom-logo,
.custom-logo-link img,
.custom-logo-link .custom-logo {
  height: 32px;
  width: auto;
  display: block;
}

.ewut-site-header {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: var(--ewut-uny-white);
  border-bottom: 1px solid var(--ewut-uny-border);
}

.ewut-site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  gap: 32px;
}

/* Nav sits in the center thanks to space-between on the parent. */
.ewut-site-header__nav {
  margin-left: 0;
}

.ewut-site-header__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

/* Header CTA buttons read at the same size as the menu links beside them
   (16px). The `.sm` class still sets their height and padding - only the
   label size is lifted, so "Demo" / "Buy Now" no longer look smaller than
   "Shop" or "Contact" on the same row. Mirrors
   `.ewub-nav__actions .ewub-button` in the plugin. */
.ewut-site-header__actions .ewut-button {
  font-size: 16px;
}

/* When action buttons are present, space-between handles distribution. */
.ewut-site-header__inner.has-actions .ewut-site-header__nav {
  margin-left: 0;
}

.ewut-site-header__logo {
  flex-shrink: 0;
  text-decoration: none;
}

/* The brand is wrapped in an <h1> (the page's single site-identity
   heading). Strip the default h1 margin/size so it renders exactly
   like the old logo/link - visual size comes from the logo img or
   .ewut-site-header__logo-text, not from h1 defaults. */
.ewut-site-title {
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: 0;
  display: inline-flex;
  align-items: center;
}

.ewut-site-title .ewut-custom-logo-link,
.ewut-site-title .custom-logo-link {
  display: inline-flex;
}

.ewut-site-header__logo img {
  height: 36px;
  width: auto;
}

.ewut-site-header__logo-text {
  font-size: 1.1em;
  font-weight: 700;
  color: var(--ewut-uny-dark);
  letter-spacing: -0.02em;
}

/* Icon + site name variant */
.ewut-site-header__logo--icon-text {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.ewut-site-header__logo-icon {
  height: 32px;
  width: 32px;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
}

/* The nav must NOT grow: `justify-content: space-between` on
   .ewut-site-header__inner needs free space to distribute. With `flex: 1` the
   nav swallowed the whole middle and its <ul> sat flush against the logo. */
.ewut-site-header__nav {
  flex: 0 1 auto;
}

.ewut-site-header__menu {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 0;
}

.ewut-site-header__menu li {
  margin-left: 32px;
}

.ewut-site-header__menu li a {
  font-size: 16px;
  font-weight: 400;
  color: var(--ewut-uny-dark);
  text-decoration: none;
  transition: color 0.2s;
}

.ewut-site-header__menu li a:hover {
  color: var(--ewut-uny-accent);
}

.ewut-site-header__menu > li.current-menu-item > a {
  color: inherit;
  font-weight: 600;
}

/* ── Dropdown submenus (Shop, Builder, any parent with children) ── */
.ewut-site-header__menu li.menu-item-has-children {
  position: relative;
}

/* Caret after parent items */
.ewut-site-header__menu li.menu-item-has-children > a::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 7px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.2s;
  opacity: 0.7;
}

.ewut-site-header__menu li.menu-item-has-children:hover > a::after {
  transform: translateY(0) rotate(225deg);
}

.ewut-site-header__menu .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--ewut-uny-white);
  border: 1px solid var(--ewut-uny-border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition:
    opacity 0.18s ease,
    transform 0.18s ease,
    visibility 0.18s;
  z-index: 200;
}

/* Levels 2+: open beside the parent row. top:-1px so the flyout's first
   item text lines up with the parent link that opened it (panel border 1px +
   link padding-top 10px == parent link padding-top 10px). Mirrors the plugin
   nav flyout (the styling reference). */
.ewut-site-header__menu .sub-menu .sub-menu {
  top: -1px;
  left: 100%;
  transform: translateX(6px);
}

.ewut-site-header__menu li.menu-item-has-children:hover > .sub-menu,
.ewut-site-header__menu li.menu-item-has-children:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translate(0, 0);
}

/* Top-level panels drop ~10px below the parent link (matches the plugin nav
   flyout, the styling reference, which opens its level-1 panel offset below
   the row). Nested level-2+ panels keep their top:-1px side alignment. */
.ewut-site-header__menu > li.menu-item-has-children > .sub-menu {
  top: calc(100% + 8px);
}
.ewut-site-header__menu > li.ewut-submenu--left > .sub-menu {
  left: auto;
  right: 0;
}

.ewut-site-header__menu .sub-menu li.ewut-submenu--open-left > .sub-menu {
  left: auto;
  right: 100%;
  transform: translateX(-6px);
}

/* Scroll only flat panels (no nested sub-menus), so cascades aren't clipped */
.ewut-site-header__menu > li > .sub-menu:not(:has(.sub-menu)) {
  max-height: 78vh;
  overflow-y: auto;
  overflow-x: hidden;
}

.ewut-site-header__menu .sub-menu li {
  margin: 0;
  width: 100%;
}

/* Row separators between items - matches the plugin nav flyout (reference). */
.ewut-site-header__menu .sub-menu li + li {
  border-top: 1px solid var(--ewut-uny-border);
}

.ewut-site-header__menu .sub-menu li a {
  display: block;
  padding: 10px 20px;
  font-size: var(--ewut-uny-fs-body);
  color: var(--ewut-uny-dark);
  white-space: nowrap;
}

.ewut-site-header__menu .sub-menu li a:hover {
  color: var(--ewut-uny-dark);
  background: var(--ewut-uny-light);
}

/* Caret on parent rows */
.ewut-site-header__menu .sub-menu li.menu-item-has-children > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ewut-site-header__menu .sub-menu li.menu-item-has-children > a::after {
  margin-left: 12px;
  transform: rotate(-45deg); /* opens right (default) */
}

.ewut-site-header__menu
  .sub-menu
  li.menu-item-has-children.ewut-submenu--open-left
  > a {
  flex-direction: row-reverse;
  justify-content: flex-end;
}

.ewut-site-header__menu
  .sub-menu
  li.menu-item-has-children.ewut-submenu--open-left
  > a::after {
  margin-left: 0;
  margin-right: 10px;
  transform: rotate(135deg); /* opens left */
}

/* Scrollbar: hidden by default, faint on hover */
.ewut-site-header__menu .sub-menu {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}

.ewut-site-header__menu .sub-menu:hover,
.ewut-site-header__menu .sub-menu:focus-within {
  scrollbar-color: rgba(0, 0, 0, 0.22) transparent;
}

.ewut-site-header__menu .sub-menu::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.ewut-site-header__menu .sub-menu::-webkit-scrollbar-track {
  background: transparent;
}

.ewut-site-header__menu .sub-menu::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: content-box;
  transition: background-color 0.2s ease;
}

.ewut-site-header__menu .sub-menu:hover::-webkit-scrollbar-thumb,
.ewut-site-header__menu .sub-menu:focus-within::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.22);
  background-clip: content-box;
}

.ewut-site-header__menu .sub-menu:hover::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.38);
  background-clip: content-box;
}

.ewut-site-header__burger {
  display: none;
}

@media (max-width: 1024px) {
  .ewut-site-header__nav {
    display: none;
  }

  .ewut-site-header__burger {
    display: flex;
  }
}

.ewut-site-header.is-open .ewut-site-header__nav {
  display: block;
  position: absolute;
  top: 64px;
  left: 0;
  right: 0;
  background: var(--ewut-uny-white);
  border-bottom: 1px solid var(--ewut-uny-border);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  z-index: 99;
  padding: 8px 0;
}

.ewut-site-header.is-open .ewut-site-header__menu {
  flex-direction: column;
  align-items: flex-start;
}

.ewut-site-header.is-open .ewut-site-header__menu li {
  margin-left: 0;
  width: 100%;
  border-bottom: 1px solid var(--ewut-uny-border);
}

.ewut-site-header.is-open .ewut-site-header__menu li:last-child {
  border-bottom: none;
}

.ewut-site-header.is-open .ewut-site-header__menu li a {
  display: flex;
  align-items: center;
  height: 48px;
  padding: 0 24px;
  font-size: 1em;
}

.ewut-site-footer {
  border-top: 1px solid var(--ewut-uny-border);
  background: var(--ewut-uny-white);
}

.ewut-site-footer__main {
  padding: 40px 0;
}

/* Footer main row: logo + description + menu in one flex line. */
.ewut-site-footer__row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.ewut-site-footer__brand {
  flex-shrink: 0;
}

.ewut-site-footer__logo img,
.ewut-site-footer__brand img {
  height: 36px;
  width: auto;
  display: block;
}

.ewut-site-footer__desc {
  flex: 1 1 240px;
  min-width: 0;
  margin: 0;
  font-size: 1em;
  color: var(--ewut-uny-dark);
  line-height: 1.6;
}

/* Menu pushed to the right end of the row. */
.ewut-site-footer__nav {
  margin-left: auto;
  flex-shrink: 0;
}

.ewut-site-footer__menu {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 20px;
}

.ewut-site-footer__menu a:hover {
  color: var(--ewut-uny-accent);
}

/* Social items inside a footer menu: URL that is a social network renders
   as an 18×18 brand icon instead of a text link. */
.ewut-menu__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  transition: color 0.2s;
}

.ewut-menu__social-link:hover {
  color: var(--ewut-uny-accent);
}

.ewut-menu__social-link .ewut-uny-social-icon {
  display: inline-flex;
  width: 18px;
  height: 18px;
}

.ewut-menu__social-link .ewut-uny-social-icon svg {
  width: 100%;
  height: 100%;
}

@media (max-width: 768px) {
  .ewut-site-footer__row {
    flex-direction: column;
    align-items: flex-start;
  }
  .ewut-site-footer__desc {
    flex-basis: auto;
  }
  .ewut-site-footer__nav {
    margin-left: 0;
  }
}

.ewut-site-footer__bottom {
  padding: 0 0 20px;
}

/* Divider sits above the copyright row at content width (not full-bleed).
   The border lives on the inner row, which is bounded by `.ewut-container`,
   so it lines up with the footer columns above instead of spanning the
   whole viewport. */
.ewut-site-footer__bottom-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 20px;
  border-top: 1px solid var(--ewut-uny-border);
}

.ewut-site-footer__copy {
  font-size: 1em;
  color: var(--ewut-uny-dark);
}

/* ──────────────────────────────────────────────────────────────
   Select dropdowns - match the ewub-uny-builder plugin look.
   The builder flips every <select> to the modern customizable
   `appearance: base-select` rendering (Chrome 130+) with a built-in
   ::picker-icon chevron + fully styleable popup. The theme must use
   the SAME skin so a theme page and a builder page never show two
   different dropdown styles. Mirrors the global block at the bottom
   of the plugin's frontend.css, retokenised to --ewut-uny-*.
   ────────────────────────────────────────────────────────────── */
select {
  appearance: base-select !important;
  display: flex !important;
  align-items: center;
  gap: 8px;
}
::picker(select) {
  appearance: base-select;
}
/* Replace the base-select default (a solid triangle glyph) with the thin
   chevron used everywhere else on the site: header nav caret, accordions,
   the builder sidebar toggles. Left to the browser, `::picker-icon` renders
   `counter(fake-counter-name, disclosure-open)` - a heavy filled triangle -
   and setting only `color` / `font-size` on it does NOT change that shape.
   Same masked-SVG caret as the product variations select. */
select::picker-icon {
  content: "";
  width: 12px;
  height: 12px;
  margin-top: 2px;
  margin-left: auto;
  /* `currentColor` so the caret follows the select's own text colour, exactly
     like the header nav caret does. A fixed dark token disappears on any
     dark-background select. */
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center/contain no-repeat;
  transition: transform 0.2s ease;
}

select:open::picker-icon {
  transform: rotate(180deg);
}

/* The open popup - mirror the header nav flyout (the styling reference):
   white panel, 1px border, 8px radius, 0 8px 24px rgba(0,0,0,.08) shadow,
   NO inner padding (rows go edge to edge, separated by 1px lines).

   `position-area` is the fix for the checkout State dropdown covering the
   fields above it. Without it Chrome anchors a base-select popup the way a
   native one behaves: the SELECTED row is aligned over the closed control, so
   the list is centred on the current value and everything before it is drawn
   upward, over the form. Measured on /checkout/ with "Nevada" selected (row 16
   of 55): the control sat at y=789 and the popup's Nevada row at y=606, i.e.
   183px of panel above the field, sitting on top of City / Address.
   The computed value in that state was `position-area: self-start span-self-end`,
   which Chrome picks itself - not something the theme asked for.

   `bottom span-all` pins the panel BELOW the control and lets it span the
   control's own width, so it always grows downward from the field the way a
   themed dropdown is expected to. `position-try-fallbacks: flip-block` is the
   escape hatch for a control near the bottom of the viewport: the panel flips
   above instead of being clipped. This is the same anchoring the WooCommerce
   sort dropdown already uses (woocommerce.css:114), so the two now agree.

   Both properties are inert in browsers without anchor positioning, and the
   popup there falls back to the previous behaviour - no @supports needed. */
::picker(select) {
  position-area: bottom span-all;
  position-try-fallbacks: flip-block;
  margin-top: 8px;
  border: 1px solid var(--ewut-uny-border);
  border-radius: 8px;
  padding: 0;
  background: var(--ewut-uny-white);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  /* `min()` so a tall list never exceeds the viewport on a phone, where 320px
     is a third of the screen. The px value keeps desktop as it was. */
  max-height: min(320px, 60vh);
  overflow-y: auto;
  box-sizing: border-box;
}

/* Option rows - mirror the nav flyout links: 10px 20px rows, dark text,
   light hover bg, 1px separator between items (not under the last). */
option {
  min-height: 44px;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ewut-uny-dark);
  background: var(--ewut-uny-white);
  cursor: pointer;
}
option + option {
  border-top: 1px solid var(--ewut-uny-border);
}
option:hover,
option:focus,
option:focus-visible {
  background: var(--ewut-uny-light);
  outline: none;
}
/* Active row: weight only, no fill - matches the nav flyout's current item. */
option:checked {
  color: var(--ewut-uny-dark);
  font-weight: 600;
}
option[disabled] {
  color: var(--ewut-uny-muted);
  cursor: not-allowed;
}
/* Drop the native base-select checkmark; the nav flyout has no such marker. */
option::checkmark {
  content: none;
  display: none;
}

/* Archive / Category dropdown widgets rendered inside the article body
   (`.wp-block-archives-dropdown`, `.wp-block-categories-dropdown`) only got
   the global base-select caret/popup skin but not the field "box", so they
   showed a thin 1px black user-agent border with zero padding. Give them the
   same box skin the sidebar categories dropdown already uses so every theme
   dropdown looks identical. */
.ewut-article__body .wp-block-archives-dropdown select,
.ewut-article__body .wp-block-categories-dropdown select {
  width: 100%;
  max-width: 320px;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--ewut-uny-border);
  border-radius: 8px;
  font-family: var(--ewut-uny-font);
  font-size: 16px;
  color: var(--ewut-uny-dark);
  background: var(--ewut-uny-white);
  outline: none;
  cursor: pointer;
}
.ewut-article__body .wp-block-archives-dropdown select:focus,
.ewut-article__body .wp-block-categories-dropdown select:focus {
  border-color: var(--ewut-uny-accent);
}

/* Protected-post password form (the_password_form filter) */
.ewut-password-form {
  margin: 24px 0;
}

.ewut-password-form__text {
  margin: 0 0 12px;
  color: var(--ewut-uny-dark);
}

.ewut-password-form__row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.ewut-password-form__input {
  flex: 1 1 280px;
  min-width: 0;
  height: 48px;
  padding: 12px 16px;
  border: 1px solid var(--ewut-uny-border);
  border-radius: 8px;
  font-family: var(--ewut-uny-font);
  font-size: 1em;
  color: var(--ewut-uny-dark);
  background: var(--ewut-uny-white);
  outline: none;
  transition: border-color 0.15s ease;
}

.ewut-password-form__input:focus {
  border-color: var(--ewut-uny-accent);
}

.ewut-password-form__submit {
  flex: 0 0 auto;
}

/* ── Sidebar: one 24px title-to-content gap for EVERY widget ──
   A buyer can put any widget in the sidebar, so this must not depend on a list of
   known widget types. The previous version corrected each widget separately with
   line-height tweaks and negative margins; measured on a sidebar holding one of
   every core widget, the gap came out as 16, 22, 23, 25, 26 or 29px depending on
   what was added.

   Now the gap is structural and has one source of truth:
     1. every widget title carries margin-bottom 24px - both the block Heading that
        block widgets use and .ewut-widget__title that classic widgets get from the
        theme's before_title;
     2. whatever the widget renders first has its top margin and padding zeroed,
        including the first row of a list or a table, so nothing is added on top of
        the 24px;
     3. form controls keep their own padding - for an input or a select the padding
        IS the control's shape, so zeroing it would deform them;
     4. the title itself contributes NOTHING but that margin: no padding, no bottom
        border. This is point 4 because it was the hole in points 1-3 - the margin
        was unified while a classic title still added `padding: 0 0 10px` and the
        2px underline it inherits, so its visible gap was 36 against a block
        Heading's 24. Anything that separates a title from its body other than the
        24px margin belongs here, or the next widget type is wrong again.

   DO NOT add a rule for one widget type. Two attempts to do that are why this had
   to be fixed twice: the theme carried a per-type padding here, and ewd-widgets
   carried a per-type copy of the whole rule that never applied because a plain
   declaration cannot beat `!important`. Both are gone. If a widget looks wrong,
   the fix goes in THIS block, for all of them. */

.ewut-layout-sidebar__aside .ewut-widget__title,
.ewut-layout-sidebar__aside .wp-block-heading,
.ewut-layout-sidebar__aside .wp-block-search__label,
.ewut-layout-sidebar__aside .wp-block-categories__label {
  display: block !important;
  line-height: 1.2 !important;
  margin: 0 0 24px 0 !important;
  /* Nothing but the margin may sit between the words and the body. A classic
     title used to keep `padding: 0 0 10px` plus the 2px underline it inherits
     from the base `.ewut-widget__title` rule, so the gap a reader actually sees
     was 24 + 10 + 2 while a block Heading showed a bare 24. Measured on /blog/:
     Random Posts 33.7px from the glyphs, Recent Posts 23.7px - the visible
     difference reported. Both are zeroed here so the 24px margin is the ONLY
     thing separating any title from any body, whatever widget a buyer adds.
     Scoped to the sidebar: footer widget areas keep the underlined title. */
  padding: 0 !important;
  border-bottom: 0 !important;
}

/* First element of the widget body, whether it follows a title or opens the widget. */
.ewut-layout-sidebar__aside .ewut-widget__title + *,
.ewut-layout-sidebar__aside .wp-block-heading + *,
.ewut-layout-sidebar__aside .wp-block-search__label + *,
.ewut-layout-sidebar__aside .ewut-widget > *:first-child {
  margin-top: 0 !important;
}
.ewut-layout-sidebar__aside .ewut-widget__title + *:not(input):not(select):not(textarea):not(button),
.ewut-layout-sidebar__aside .wp-block-heading + *:not(input):not(select):not(textarea):not(button),
.ewut-layout-sidebar__aside .ewut-widget > *:first-child:not(input):not(select):not(textarea):not(button) {
  padding-top: 0 !important;
}

/* First row inside whatever the body is: list, table, figure, media. Covers widgets
   that were never enumerated, because it keys on structure and not on a class name. */
.ewut-layout-sidebar__aside .ewut-widget li:first-child,
.ewut-layout-sidebar__aside .ewut-widget tr:first-child > td,
.ewut-layout-sidebar__aside .ewut-widget tr:first-child > th,
.ewut-layout-sidebar__aside .ewut-widget caption,
.ewut-layout-sidebar__aside .ewut-widget figure:first-child,
.ewut-layout-sidebar__aside .ewut-widget p:first-child,
.ewut-layout-sidebar__aside .ewut-widget img:first-child,
.ewut-layout-sidebar__aside .ewut-widget blockquote:first-child,
.ewut-layout-sidebar__aside .ewut-widget blockquote:first-child > p:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Social icons and button rows wrap their first item in a list whose padding is not
   covered by the row reset above. */
.ewut-layout-sidebar__aside .ewut-widget .wp-block-social-links,
.ewut-layout-sidebar__aside .ewut-widget .wp-block-buttons,
.ewut-layout-sidebar__aside .ewut-widget .wp-block-tag-cloud {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* A text row's own line box adds half-leading above its first glyph, so a list whose
   first row is text reads 2px lower than a widget that opens with a control or an
   image - measured 26px against 24px. Tighten the FIRST row only, so the visible gap
   matches everywhere while the remaining rows keep their readable line height.
   This keys on `li:first-child`, not on a widget class, so it also applies to widgets
   that ship with no rule of their own. */
.ewut-layout-sidebar__aside .ewut-widget li:first-child,
.ewut-layout-sidebar__aside .ewut-widget li:first-child > a,
.ewut-layout-sidebar__aside .ewut-widget li:first-child > span,
.ewut-layout-sidebar__aside .ewut-widget dt:first-child,
.ewut-layout-sidebar__aside .ewut-widget dd:first-child {
  line-height: 1.2 !important;
}

/* Tables draw a border between the heading and the first cell; collapse it and drop the
   top border of the first row so the cell's own top edge is the visible top. */
.ewut-layout-sidebar__aside .ewut-widget table {
  border-collapse: collapse !important;
  margin-top: 0 !important;
}
.ewut-layout-sidebar__aside .ewut-widget tr:first-child > td,
.ewut-layout-sidebar__aside .ewut-widget tr:first-child > th {
  border-top: 0 !important;
}

/* ============================================================
   Article content forms (typography page etc.) - style raw
   <input>/<select>/<textarea> to match the CF7 skin, scoped to
   .ewut-article__body so the builder (.ewub-*) and CF7
   (.wpcf7-form) forms are never affected.
   ============================================================ */
.ewut-article__body form label {
  display: block;
  font-size: 0.88em;
  font-weight: 500;
  color: var(--ewut-uny-dark);
  margin-bottom: 6px;
}
.ewut-article__body form input[type="text"],
.ewut-article__body form input[type="email"],
.ewut-article__body form input[type="tel"],
.ewut-article__body form input[type="url"],
.ewut-article__body form input[type="number"],
.ewut-article__body form input[type="date"],
.ewut-article__body form input[type="password"],
.ewut-article__body form input[type="search"],
.ewut-article__body form textarea,
.ewut-article__body form select {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--ewut-uny-border);
  border-radius: 8px;
  font-family: var(--ewut-uny-font);
  font-size: 0.95em;
  color: var(--ewut-uny-dark);
  background-color: var(--ewut-uny-white);
  outline: none;
  transition: border-color 0.2s;
}
.ewut-article__body form textarea {
  min-height: 140px;
  resize: vertical;
}
.ewut-article__body form input::placeholder,
.ewut-article__body form textarea::placeholder {
  color: rgba(15, 15, 15, 0.5);
  opacity: 1;
}
.ewut-article__body form input:focus,
.ewut-article__body form textarea:focus,
.ewut-article__body form select:focus {
  border-color: var(--ewut-uny-accent);
}
.ewut-article__body form input:disabled,
.ewut-article__body form textarea:disabled,
.ewut-article__body form select:disabled {
  background-color: var(--ewut-uny-light);
  color: var(--ewut-uny-muted);
  cursor: not-allowed;
}
.ewut-article__body form input[aria-invalid="true"] {
  border-color: #cf1322;
}
/* Validation error message under a field - red text, no highlight
   background (the <mark> tint used elsewhere is dropped inside forms). */
.ewut-article__body form small {
  display: inline-block;
  margin-top: 6px;
  font-size: 0.85em;
  color: #cf1322;
}
.ewut-article__body form small mark {
  background: none;
  color: #cf1322;
  padding: 0;
}
/* checkbox / radio in content forms (a Contact Form 7 form dropped into a page,
   the demo forms) - 18px, inline with the label, brand accent when selected.
   ──────────────────────────────────────────────────────────────
   Drawn by hand rather than through `accent-color`. With `accent-color` the
   browser keeps the mark and picks its colour by contrast with the fill: white
   on a dark accent, near-black on a LIGHT one. So the tick changed colour with
   the customer's brand colour and on a light accent read as a smudge.
   `appearance: none` takes that decision back - accent fill, white mark, always. */
.ewut-article__body form input[type="checkbox"]:not([class*="wc-block"]),
.ewut-article__body form input[type="radio"]:not([class*="wc-block"]) {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  width: 18px;
  height: 18px;
  min-height: 0;
  margin-right: 8px;
  border: 1px solid var(--ewut-uny-border-dark);
  background: var(--ewut-uny-white);
  flex-shrink: 0;
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease;
}
.ewut-article__body form input[type="checkbox"]:not([class*="wc-block"]) {
  /* 4px, not the project's 8px: 8px on an 18px box reads as a radio button. */
  border-radius: 4px;
}
.ewut-article__body form input[type="radio"]:not([class*="wc-block"]) {
  border-radius: 50%;
}
.ewut-article__body form input[type="checkbox"]:not([class*="wc-block"]):checked,
.ewut-article__body form input[type="radio"]:not([class*="wc-block"]):checked {
  background: var(--ewut-uny-accent);
  border-color: var(--ewut-uny-accent);
}
/* The tick: two borders of a rotated box, so it cannot inherit a text colour
   or fail to load like a glyph or an image could. */
.ewut-article__body form input[type="checkbox"]:not([class*="wc-block"]):checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 2px;
  width: 5px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
/* The radio dot is cut OUT of the accent fill with an inset ring, which leaves
   an accent centre inside a white gap - the standard radio look, and one less
   pseudo-element to position. */
.ewut-article__body form input[type="radio"]:not([class*="wc-block"]):checked {
  box-shadow: inset 0 0 0 3px #fff;
}
.ewut-article__body form input[type="checkbox"]:not([class*="wc-block"]):focus-visible,
.ewut-article__body form input[type="radio"]:not([class*="wc-block"]):focus-visible {
  outline: 2px solid var(--ewut-uny-accent);
  outline-offset: 2px;
}
/* Inline checkbox/radio labels in article/demo forms. Excludes WooCommerce
   block components (checkout shipping/payment options are <label>s with a
   radio inside - they must stay full-width block, not shrink to content). */
.ewut-article__body
  form
  label:not([class*="wc-block"]):has(input[type="checkbox"]),
.ewut-article__body
  form
  label:not([class*="wc-block"]):has(input[type="radio"]) {
  display: inline-flex;
  align-items: center;
  margin-right: 24px;
  font-weight: 400;
  cursor: pointer;
}

/* Button showcase row - buttons sit inline in one row, sized by content
   with 40px side padding (not stretched to fill the column). */
.ewut-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  margin-top: 20px;
}
.ewut-btn-row .ewut-button {
  display: inline-flex;
  width: auto;
  min-width: 0;
  padding: 0 40px;
}

/* Article-content form field spacing - the raw <br> WordPress inserts
   between a label and its field is redundant (label is block with its own
   margin), so hide it to keep the label close to the input. */
.ewut-article__body form br {
  display: none;
}

/* [ewut_form] submit - accent button matching the theme (the site has no
   black button; buttons are accent). */
.ewut-article__body .ewut-form__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 40px;
  border: none;
  border-radius: 8px;
  background-color: var(--ewut-uny-accent);
  color: var(--ewut-uny-on-accent);
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.ewut-article__body .ewut-form__submit:hover {
  background-color: var(--ewut-uny-accent-hover);
  color: var(--ewut-uny-on-accent);
}

/* ============================================================
   Elements page - atomic UI components. Scoped under
   .ewut-article__body so they (a) win specificity over the
   article's native tag rules (e.g. ul{list-style}) and (b) are
   mirrored into the block editor by build/gen-editor-styles.php.
   Each component ships default + accent variants.
   ============================================================ */
.ewut-article__body .ewut-elements__group {
  margin: 48px 0;
}
.ewut-article__body .ewut-elements__group > h2 {
  margin-bottom: 8px;
}
.ewut-article__body .ewut-elements__group > p {
  color: var(--ewut-uny-grey);
  margin-bottom: 24px;
}
.ewut-article__body .ewut-elements__row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-start;
}
.ewut-article__body .ewut-elements__row > * {
  flex: 1 1 240px;
}
/* Badges size to their content instead of stretching in the flex row. */
.ewut-article__body .ewut-elements__row > .ewut-badge {
  flex: 0 0 auto;
}

/* Accordion - FAQ style (matches the builder text-3 FAQ): no outer card,
   thin rule per item, chevron that rotates when open. */
.ewut-article__body .ewut-accordion {
  border: 0;
  border-radius: 0;
  overflow: visible;
}
.ewut-article__body .ewut-accordion__item {
  border-bottom: 1px solid var(--ewut-uny-border);
}
.ewut-article__body .ewut-accordion__item:first-child {
  border-top: 1px solid var(--ewut-uny-border);
}
.ewut-article__body .ewut-accordion__head {
  margin: 0;
}
.ewut-article__body .ewut-accordion__trigger {
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 20px 0;
  /* Match the builder FAQ question size (--ewub-uny-fs-desc-header: 1.25em).
       Set the size explicitly - the trigger sits inside an <h3> head, so an
       inherited font-size would pick up the large h3 scale (31px). */
  font-family: inherit;
  font-size: 1.25rem;
  line-height: 1.4;
  font-weight: 600;
  color: var(--ewut-uny-dark);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.ewut-article__body .ewut-accordion__trigger:hover {
  color: var(--ewut-uny-accent);
}
/* Chevron drawn with borders; points down, rotates up (-135deg) when open. */
.ewut-article__body .ewut-accordion__trigger::after {
  content: "";
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.25s;
  margin-top: -3px;
}
.ewut-article__body .ewut-accordion__trigger[aria-expanded="true"]::after {
  transform: rotate(-135deg);
  margin-top: 3px;
}
.ewut-article__body .ewut-accordion__panel {
  padding: 0;
  max-height: 0;
  overflow: hidden;
  transition:
    max-height 0.25s ease,
    padding 0.25s ease;
}
.ewut-article__body .ewut-accordion__panel[data-open="true"] {
  padding: 0 0 20px;
  max-height: 400px;
}
.ewut-article__body .ewut-accordion__panel p {
  margin: 0;
  color: var(--ewut-uny-grey);
}
.ewut-article__body
  .ewut-accordion--accent
  .ewut-accordion__trigger[aria-expanded="true"] {
  color: var(--ewut-uny-accent);
}

/* Tabs - the list must never render bullets/indent inherited from the
   article's `ul` rule; scope under .ewut-article__body to win specificity. */
.ewut-article__body .ewut-tabs__list {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--ewut-uny-border);
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}
.ewut-article__body .ewut-tabs__list li {
  margin: 0;
  padding: 0;
  list-style: none;
}
.ewut-article__body .ewut-tabs__list li::marker {
  content: none;
}
.ewut-article__body .ewut-tabs__tab {
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  padding: 10px 16px;
  font: inherit;
  font-weight: 600;
  color: var(--ewut-uny-grey);
  margin-bottom: -1px;
}
.ewut-article__body .ewut-tabs__tab[aria-selected="true"] {
  color: var(--ewut-uny-dark);
  border-bottom-color: var(--ewut-uny-dark);
}
.ewut-article__body .ewut-tabs--accent .ewut-tabs__tab[aria-selected="true"] {
  color: var(--ewut-uny-accent);
  border-bottom-color: var(--ewut-uny-accent);
}
.ewut-article__body .ewut-tabs__panel {
  display: none;
  color: var(--ewut-uny-grey);
}
.ewut-article__body .ewut-tabs__panel[data-open="true"] {
  display: block;
}

/* Alerts / notices */
/* Alerts - full Bootstrap-style set (success/info/warning/danger/accent/
   secondary/light/dark). Text size sits between the theme's small body and
   Bootstrap's larger alert copy (0.95em). Each variant = tinted bg + matching
   border + readable text colour, plus a coloured left rule for emphasis. */
/* Alerts - Ant Design palette (soft tints), plain 1px border on all sides,
   8px radius, no accent left-rule. Text size 0.95em (between the theme's
   small body and Bootstrap's larger alert copy). */
.ewut-alert {
  border: 1px solid var(--ewut-uny-border);
  border-radius: 8px;
  padding: 14px 18px;
  margin: 0 0 12px;
  font-size: 0.95em;
  line-height: var(--ewut-uny-lh-normal);
  color: var(--ewut-uny-dark);
  background: var(--ewut-uny-light);
}
.ewut-alert:last-child {
  margin-bottom: 0;
}
.ewut-alert strong {
  font-weight: 700;
}
.ewut-alert a {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
}

/* Ant Design v5 tints: bg / border / accent text tone */
.ewut-alert--success {
  background: #f6ffed;
  border-color: #b7eb8f;
}
.ewut-alert--success strong {
  color: #389e0d;
}
.ewut-alert--info {
  background: #e6f4ff;
  border-color: #91caff;
}
.ewut-alert--info strong {
  color: #0958d9;
}
.ewut-alert--warning {
  background: #fffbe6;
  border-color: #ffe58f;
}
.ewut-alert--warning strong {
  color: #d48806;
}
.ewut-alert--danger {
  background: #fff2f0;
  border-color: #ffccc7;
}
.ewut-alert--danger strong {
  color: #cf1322;
}
.ewut-alert--accent {
  background: color-mix(in srgb, var(--ewut-uny-accent) 8%, var(--ewut-uny-white));
  border-color: color-mix(in srgb, var(--ewut-uny-accent) 28%, var(--ewut-uny-white));
}
.ewut-alert--accent strong {
  color: var(--ewut-uny-accent);
}
.ewut-alert--secondary {
  background: #fafafa;
  border-color: #d9d9d9;
}
.ewut-alert--secondary strong {
  color: #595959;
}
.ewut-alerts-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Native alert = core Group block with an `is-style-alert-*` block style
   (registered in inc/blocks.php). Same Ant-Design tints as .ewut-alert, but
   on a native block so authors build alerts in the editor with zero custom
   classes. Styling scoped to article content; mirrored to the editor by
   build/gen-editor-styles.php. */
.ewut-article__body .wp-block-group[class*="is-style-alert-"] {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--ewut-uny-border);
  border-radius: 8px;
  padding: 14px 18px;
  /* 16px, not the old `0.95em`: the text sits in a `<p>` that took its size
     from the article paragraph rule anyway, so the em value only looked like it
     was in charge. Set here too for alerts whose content is bare text. */
  font-size: 16px;
  line-height: var(--ewut-uny-lh-normal);
  color: var(--ewut-uny-dark);
  background: var(--ewut-uny-light);
}
.ewut-article__body .wp-block-group[class*="is-style-alert-"] > * {
  margin-block: 0;
}
/* Leading status icon as a flex item so it stays vertically centred with the
   text. The SVG is used as a MASK (only its shape matters); the visible colour
   comes from `background-color: currentColor`, and each variant sets the group
   `color` to its tone. Replaces the old bold word label. */
.ewut-article__body .wp-block-group[class*="is-style-alert-"]::before {
  content: "";
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  background-color: currentColor;
  -webkit-mask: var(--ewut-alert-icon) center / contain no-repeat;
  mask: var(--ewut-alert-icon) center / contain no-repeat;
}
/* success - check circle */
.ewut-article__body .wp-block-group.is-style-alert-success {
  background: var(--ewut-alert-success-bg, #f6ffed);
  border-color: var(--ewut-alert-success-border, #b7eb8f);
  color: var(--ewut-alert-success-ink, #389e0d);
}
.ewut-article__body .wp-block-group.is-style-alert-success::before {
  --ewut-alert-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/%3E%3Cpolyline points='22 4 12 14.01 9 11.01'/%3E%3C/svg%3E");
}
/* info - info circle. Background lightened from #e6f4ff and the border from
   #91caff: both read as a heavy blue block beside the softer success and warning
   tints. The border was the louder of the two once the fill had been calmed, so
   it moved the same distance. Icon and text keep the full #0958d9 - they carry
   the meaning and need the contrast. */
.ewut-article__body .wp-block-group.is-style-alert-info {
  background: var(--ewut-alert-info-bg, #f2f9ff);
  border-color: var(--ewut-alert-info-border, #c2e0ff);
  color: var(--ewut-alert-info-ink, #0958d9);
}

/* Vertical rhythm: the SAME margin above and below every variant, so a run of
   alerts is evenly spaced and the first one is not glued to the paragraph above
   it. Adjacent margins collapse, so 20 + 20 still reads as a 20px gap between
   two alerts, while the gap from a preceding paragraph (8px bottom margin)
   becomes 20px instead of 8px.
   An earlier `margin-top: 40px` on the `info` variant alone is what made the
   second alert in the run sit 40px away while the rest sat at 20px. */
/* `!important` is needed here, not for emphasis: the base group rule above
   (`.ewut-article__body .wp-block-group`) sets `margin: 0 0 20px !important`,
   which zeroed the top margin no matter how specific this selector was. */
.ewut-article__body .wp-block-group[class*="is-style-alert-"] {
  margin-top: 20px !important;
}

/* ...except when an alert OPENS the content: a leading top margin pushed it
   below the sidebar, so the two columns started at different heights. */
.ewut-article__body > .wp-block-group[class*="is-style-alert-"]:first-child {
  margin-top: 0 !important;
}

/* ──────────────────────────────────────────────────────────────
   Legal demo notice - the "replace this placeholder" panel that opens
   Privacy Policy / Terms of Use / Cookie Policy.

   Styled like the WooCommerce cart and checkout summary panels: a plain card
   with a 4px accent rule along the top edge. That reads as a note ABOUT the
   page rather than as content of it, which the coloured info alert did not -
   a blue tint says "status message", and it also stole attention from the
   heading right below.

   A separate class, not `is-style-alert-info`: the six demo alerts on the
   Elements and Typography pages keep their Ant-Design tints unchanged.
   ────────────────────────────────────────────────────────────── */
.ewut-article__body .wp-block-group.ewut-legal-notice {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 0;
  margin-bottom: 32px;
  padding: 16px 20px;
  border: 1px solid var(--ewut-uny-border);
  border-top: 4px solid var(--ewut-uny-accent);
  border-radius: 8px;
  background: var(--ewut-uny-white);
  color: var(--ewut-uny-grey);
}

.ewut-article__body .wp-block-group.ewut-legal-notice > * {
  margin-block: 0;
}

.ewut-article__body .wp-block-group.ewut-legal-notice p {
  font-size: 16px;
  color: var(--ewut-uny-grey);
}

/* Leading info glyph, same 18px masked icon the alerts use, tinted accent to
   pick up the top rule. */
.ewut-article__body .wp-block-group.ewut-legal-notice::before {
  content: "";
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  background-color: var(--ewut-uny-accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='16' x2='12' y2='12'/%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='16' x2='12' y2='12'/%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'/%3E%3C/svg%3E") center/contain no-repeat;
}
.ewut-article__body .wp-block-group.is-style-alert-info::before {
  --ewut-alert-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='16' x2='12' y2='12'/%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'/%3E%3C/svg%3E");
}
/* warning - triangle */
.ewut-article__body .wp-block-group.is-style-alert-warning {
  background: var(--ewut-alert-warning-bg, #fffbe6);
  border-color: var(--ewut-alert-warning-border, #ffe58f);
  color: var(--ewut-alert-warning-ink, #d48806);
}
.ewut-article__body .wp-block-group.is-style-alert-warning::before {
  --ewut-alert-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/%3E%3Cline x1='12' y1='9' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E");
}
/* danger - x circle */
.ewut-article__body .wp-block-group.is-style-alert-danger {
  background: var(--ewut-alert-danger-bg, #fff2f0);
  border-color: var(--ewut-alert-danger-border, #ffccc7);
  color: var(--ewut-alert-danger-ink, #cf1322);
}
.ewut-article__body .wp-block-group.is-style-alert-danger::before {
  --ewut-alert-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='15' y1='9' x2='9' y2='15'/%3E%3Cline x1='9' y1='9' x2='15' y2='15'/%3E%3C/svg%3E");
}
/* accent - bell */
.ewut-article__body .wp-block-group.is-style-alert-accent {
  background: color-mix(in srgb, var(--ewut-uny-accent) 8%, var(--ewut-uny-white));
  border-color: color-mix(in srgb, var(--ewut-uny-accent) 28%, var(--ewut-uny-white));
  color: var(--ewut-uny-accent);
}
.ewut-article__body .wp-block-group.is-style-alert-accent::before {
  --ewut-alert-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9'/%3E%3Cpath d='M13.73 21a2 2 0 0 1-3.46 0'/%3E%3C/svg%3E");
}
/* secondary - dot circle */
.ewut-article__body .wp-block-group.is-style-alert-secondary {
  background: var(--ewut-alert-neutral-bg, #fafafa);
  border-color: var(--ewut-alert-neutral-border, #d9d9d9);
  color: var(--ewut-alert-neutral-ink, #595959);
}
.ewut-article__body .wp-block-group.is-style-alert-secondary::before {
  --ewut-alert-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='16' x2='12' y2='12'/%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'/%3E%3C/svg%3E");
}
/* Body copy stays dark for readability; the icon carries the variant colour. */
/* The alert text lives in a `<p>`, and article paragraphs are 18px - so the
   `font-size: 0.95em` on the group never reached the text you actually read,
   and alerts came out heavier than everything around them. Size the paragraph
   itself: 16px, same as the buttons. */
.ewut-article__body .wp-block-group[class*="is-style-alert-"] p {
  font-size: 16px;
  /* The running text uses the ordinary ink of the scheme, NOT the tone: the tone
     stays on the group because the leading icon is drawn with currentColor, and
     letting the paragraph inherit it turned every note blue, green or red. Was
     `var(--ewut-uny-dark)`, which is semantic "primary ink" and flips light on a
     dark page, leaving light text on a light tile. */
  color: var(--ewut-alert-text, #0f0f0f);
}

/* Badges */
.ewut-article__body .ewut-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: var(--ewut-uny-fs-tiny);
  font-weight: 700;
  line-height: 1.6;
  background: var(--ewut-uny-medium);
  color: var(--ewut-uny-dark);
}
.ewut-article__body .ewut-badge--accent {
  background: var(--ewut-uny-accent);
  color: var(--ewut-uny-on-accent);
}
.ewut-article__body .ewut-badge--outline {
  background: none;
  border: 1px solid var(--ewut-uny-border-dark);
  color: var(--ewut-uny-dark);
}

/* Progress bars */
.ewut-article__body .ewut-progress {
  background: var(--ewut-uny-medium);
  border-radius: 999px;
  height: 8px;
  overflow: hidden;
}
.ewut-article__body .ewut-progress__bar {
  height: 100%;
  background: var(--ewut-uny-ink);
  border-radius: 999px;
}
.ewut-article__body .ewut-progress--accent .ewut-progress__bar {
  background: var(--ewut-uny-accent);
}
.ewut-article__body .ewut-progress__label {
  display: flex;
  justify-content: space-between;
  font-size: var(--ewut-uny-fs-meta);
  color: var(--ewut-uny-grey);
  margin-bottom: 6px;
}

/* Icon list */
.ewut-article__body .ewut-icon-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ewut-article__body .ewut-icon-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
}
.ewut-article__body .ewut-icon-list li::marker {
  content: none;
}
.ewut-article__body .ewut-icon-list svg {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  color: var(--ewut-uny-grey);
}
.ewut-article__body .ewut-icon-list--accent svg {
  color: var(--ewut-uny-accent);
}

/* Counters */
.ewut-article__body .ewut-counter {
  text-align: center;
}
.ewut-article__body .ewut-counter__num {
  font-size: var(--ewut-uny-fs-h2);
  font-weight: 700;
  color: var(--ewut-uny-dark);
  line-height: 1.1;
}
.ewut-article__body .ewut-counter__label {
  font-size: var(--ewut-uny-fs-meta);
  color: var(--ewut-uny-grey);
  margin-top: 4px;
}
.ewut-article__body .ewut-counter--accent .ewut-counter__num {
  color: var(--ewut-uny-accent);
}

/* Dividers - all three variants share the same full-width 1px rule; only the
   colour / dash style changes (never the width). Scoped so the article's
   generic `hr` rule (40px margin) doesn't override the divider margin. */
.ewut-article__body hr.ewut-divider {
  width: 100%;
  border: 0;
  border-top: 1px solid var(--ewut-uny-border);
  margin: 24px 0;
}
.ewut-article__body hr.ewut-divider--accent {
  border-top-color: var(--ewut-uny-accent);
}
.ewut-article__body hr.ewut-divider--dashed {
  border-top-style: dashed;
}

/* Cards */
.ewut-article__body .ewut-ui-card {
  border: 1px solid var(--ewut-uny-border);
  border-radius: 8px;
  padding: 24px;
  background: var(--ewut-uny-white);
}
.ewut-article__body .ewut-ui-card h4 {
  margin: 0 0 8px;
}
.ewut-article__body .ewut-ui-card p {
  margin: 0;
  color: var(--ewut-uny-grey);
}
.ewut-article__body .ewut-ui-card--accent {
  border-color: var(--ewut-uny-accent);
  border-top: 4px solid var(--ewut-uny-accent);
}

/* ── A custom page background ─────────────────────────────────────────────
   Cards, the article body and sidebar widgets carry no background of their
   own, and they are meant to stay that way: the design reads better when the
   page colour shows through and a card is set off by its hairline alone.

   Painting them white on a coloured background was tried and dropped - white
   slabs sitting on a dark page fight with it, and a filled sidebar loses the
   line it shares with the first card.

   What they do need is readable text. That is handled in PHP by
   ewut_uny_background_text_css(): when the chosen background is dark it
   repaints the colour tokens for the content column and the sidebar, so every
   rule that already uses those tokens follows along. Nothing to do here.    */