/* DW elli.me Design — warm editorial-magazine overlay
   All selectors scoped under body.dwellimedesign to stay isolated from admin.

   The retouch direction (per the elli-retouch design package):
   warm cream paper, deep ink, brick-terracotta accent, sepia-tan hairlines,
   narrow reading column, italic lede, drop cap, roman-numeral section
   markers, accent-rule lists, hairline-underline share row. */

/* ── Self-hosted fonts (latin + latin-ext only) ─────────────────────────── */
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/eb-garamond/eb-garamond-400-normal-latin.woff2') format('woff2'),
       url('../fonts/eb-garamond/eb-garamond-400-normal-latin-ext.woff2') format('woff2');
}
@font-face {
  font-family: 'EB Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/eb-garamond/eb-garamond-400-italic-latin.woff2') format('woff2'),
       url('../fonts/eb-garamond/eb-garamond-400-italic-latin-ext.woff2') format('woff2');
}
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/eb-garamond/eb-garamond-700-normal-latin.woff2') format('woff2'),
       url('../fonts/eb-garamond/eb-garamond-700-normal-latin-ext.woff2') format('woff2');
}

/* ── Palette + tokens ──────────────────────────────────────────────────── */
body.dwellimedesign {
  /* Palette aligned with the elli-retouch design package — cooler cream paper
     and a deeper brick terracotta than the previous iteration. */
  --dwe-paper: #f4eee2;
  --dwe-paper-soft: #ebe3d2;     /* slightly darker for cards / sidebars */
  --dwe-ink: #1c1a17;            /* near-black, warm */
  --dwe-ink-soft: #4b463d;       /* muted ink for body emphasis */
  --dwe-ink-mute: #7a7264;       /* sepia ink for metadata */
  --dwe-accent: #8a3a2a;         /* deep terracotta */
  --dwe-accent-deep: #6e2d20;    /* hover / visited */
  --dwe-rule: #d8cdb6;           /* hairline rules */
  --dwe-rule-soft: #e6dcc4;      /* even quieter */

  /* One serif family — the editorial feel comes from weight, italic and size,
     not from family-mixing. EB Garamond at 400 / 400 italic / 700 covers
     body, italic display and bold display. No separate Didone face. */
  --dwe-font-body: 'EB Garamond', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  --dwe-font-display: var(--dwe-font-body);
  --dwe-font-mono: ui-monospace, 'JetBrains Mono', 'SF Mono', Menlo, monospace;

  /* Reading column ≈ 640 px. Applied to .widget_dw_content_widget so the
     surrounding hero / share / continue-reading bands keep container width. */
  --dwe-measure: 38rem;

  background: var(--dwe-paper);
  color: var(--dwe-ink);
  /* !important is required to win against dwtheme's customizer, which prints
     a `body { font-family: <sans> !important }` block inline at priority 20.
     Without it, paragraphs and any element that doesn't carry its own
     font-family rule inherits the sans-serif stack — every `<p>` and `<li>`
     in the prose. Specificity (0,2,0 vs 0,1,0) is on our side, so this just
     beats the !important arms race, doesn't override anything else. */
  font-family: var(--dwe-font-body) !important;
  font-size: 1.25rem;         /* 20px; matches elli-retouch design body */
  line-height: 1.65;          /* matches design body */
  hyphens: manual;            /* author-controlled only — no auto Silbentrennung
                                 mid-word in titles or prose */
  font-feature-settings: 'onum' 1, 'liga' 1, 'kern' 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* Generic headings — display family + tight leading. The single-post title
   and section H2s have dedicated rules below that override these. */
body.dwellimedesign h1,
body.dwellimedesign h2,
body.dwellimedesign h3,
body.dwellimedesign h4,
body.dwellimedesign h5,
body.dwellimedesign h6 {
  font-family: var(--dwe-font-display);
  color: var(--dwe-ink);
  line-height: 1.2;
  letter-spacing: -0.005em;
  margin-top: 1.6em;
  margin-bottom: 0.5em;
  font-weight: 700;
}
body.dwellimedesign h1,
body.dwellimedesign .entry-title {
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3.4rem);
}
body.dwellimedesign h2 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem); }
body.dwellimedesign h3 { font-size: 1.3rem; font-style: italic; font-weight: 400; }
body.dwellimedesign h4 { font-size: 1.1rem; }

/* Meta / captions / small caps labels — sepia ink, mono small caps. */
body.dwellimedesign .entry-meta,
body.dwellimedesign .post-meta,
body.dwellimedesign figcaption,
body.dwellimedesign small {
  color: var(--dwe-ink-mute);
  font-family: var(--dwe-font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* Links — chrome links are colour-only; prose links opt in to underline. */
body.dwellimedesign a {
  color: var(--dwe-accent);
  text-decoration: none;
  transition: color .15s ease, text-decoration-color .15s ease;
}
body.dwellimedesign a:hover,
body.dwellimedesign a:focus {
  color: var(--dwe-accent-deep);
}
body.dwellimedesign .entry-content a,
body.dwellimedesign blockquote a,
body.dwellimedesign .dw-card-langs a {
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--dwe-rule);
}
body.dwellimedesign .entry-content a:hover,
body.dwellimedesign .entry-content a:focus,
body.dwellimedesign blockquote a:hover,
body.dwellimedesign blockquote a:focus,
body.dwellimedesign .dw-card-langs a:hover,
body.dwellimedesign .dw-card-langs a:focus {
  text-decoration-color: var(--dwe-accent);
}

/* ── Single-post prose — narrow measure + editorial typography ───────────
   The dw_content_widget wraps the post body (title H2 + paragraphs + section
   H2s + lists + blockquotes). We constrain it to the reading measure so the
   surrounding widget bands (hero, share, continue-reading) keep their full
   container width. */
body.dwellimedesign .entry-content .widget_dw_content_widget {
  max-width: var(--dwe-measure);
  margin: 0 auto;
  padding: 0 1rem;
  counter-reset: dwe-section;
}

/* The post title — either the first H2 inside the content widget OR a
   <h1 class="dwe-ph-title"> rendered inside the Post Header widget when its
   "Render the post title here" option is on. Both share styling so toggling
   the option doesn't change the title's appearance, only its position
   (under the featured image vs. inside the content body).
   Display headline, refined editorial weight (the design uses 500; we have
   400/700, so 500 selects 400 — the lighter, more Garamond-y form).
   Clamp matches design's clamp(44px, 6vw, 72px). */
body.dwellimedesign .entry-content .widget_dw_content_widget > h2:first-child,
body.dwellimedesign .dwe-ph-title {
  font-family: var(--dwe-font-display);
  font-weight: 500;
  font-size: clamp(2.75rem, 1.4rem + 3vw, 4.5rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 1.6rem 0 1rem;
  text-wrap: balance;
  color: var(--dwe-ink);
}
body.dwellimedesign .dwe-ph-title {
  /* Inside the Post Header block, sit a touch tighter against the eyebrow
     above and the byline rule below. Opt out of the uppercase the parent
     .dwe-post-header sets for the mono eyebrow / byline rows — titles read
     as natural-case display serif. */
  margin: 0.75rem 0 0.85rem;
  text-transform: none;
  letter-spacing: -0.01em;
}
/* Italic emphasis inside the title becomes the accent phrase. Authors can
   wrap the secondary clause in <em> ("Epicuro <em>en cinco minutos</em>:")
   to get the literary-magazine accent treatment. */
body.dwellimedesign .entry-content .widget_dw_content_widget > h2:first-child em,
body.dwellimedesign .entry-content .widget_dw_content_widget > h2:first-child i,
body.dwellimedesign .dwe-ph-title em,
body.dwellimedesign .dwe-ph-title i {
  font-style: italic;
  color: var(--dwe-accent);
  font-weight: inherit;
}

/* Section headings — every H2 *after* the title gets a small mono roman
   numeral as an eyebrow, in the accent. The counter resets per widget.
   Sizes match the design: 34px / 1.2 / 64px-top / 18px-bottom / gap 18px. */
body.dwellimedesign .entry-content .widget_dw_content_widget > h2:nth-of-type(n+2) {
  counter-increment: dwe-section;
  font-family: var(--dwe-font-display);
  font-weight: 500;
  font-size: clamp(1.7rem, 1.4rem + 1vw, 2.125rem);
  line-height: 1.2;
  letter-spacing: -0.005em;
  margin: 4rem 0 1.125rem;
  display: flex;
  align-items: baseline;
  gap: 1.125rem;
  text-wrap: balance;
}
body.dwellimedesign .entry-content .widget_dw_content_widget > h2:nth-of-type(n+2)::before {
  content: counter(dwe-section, upper-roman);
  font-family: var(--dwe-font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  color: var(--dwe-accent);
  transform: translateY(-0.3em);
  flex: 0 0 auto;
}

/* H3s in body — softer italic display. Design: 22px / 1.5 / 36px-top / 10px-bottom. */
body.dwellimedesign .entry-content .widget_dw_content_widget > h3 {
  font-family: var(--dwe-font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.375rem;
  line-height: 1.5;
  margin: 2.25rem 0 0.625rem;
  color: var(--dwe-ink);
  letter-spacing: 0;
}

/* Body prose paragraphs — explicit because body line-height drops to 1.65 to
   match design's body baseline; prose paragraphs keep 1.7 like .body p in
   the design. Margin-bottom 1.1em matches design's `.body p { margin: 0 0 1.1em }`. */
body.dwellimedesign .entry-content .widget_dw_content_widget > p {
  margin: 0 0 1.1em;
  line-height: 1.7;
}

/* Italic display lede — applies to the first TWO paragraphs to set the
   editorial register at the start of the article. Design: 22px / 1.55. */
body.dwellimedesign .entry-content .widget_dw_content_widget > p:nth-of-type(-n+2) {
  font-style: italic;
  font-size: 1.375rem;
  line-height: 1.55;
  color: var(--dwe-ink-soft);
  margin-bottom: 0.7em;
}
body.dwellimedesign .entry-content .widget_dw_content_widget > p:nth-of-type(2) {
  margin-bottom: 1.4em;       /* normal trailing space at the end of the lede */
}

/* Body lists: no bullets — short accent rule on the left. Design:
   padding-left 26px, line-height 1.55, ::before width 14px / top 0.7em. */
body.dwellimedesign .entry-content .widget_dw_content_widget > ul {
  list-style: none;
  padding: 0;
  margin: 0 0 1.4em;
}
body.dwellimedesign .entry-content .widget_dw_content_widget > ul > li {
  position: relative;
  padding-left: 1.625rem;
  margin: 0.35em 0;
  line-height: 1.55;
}
body.dwellimedesign .entry-content .widget_dw_content_widget > ul > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 0.875rem;
  height: 1px;
  background: var(--dwe-accent);
}

/* Pull-quote / blockquote — italic display, terracotta left rule. Design:
   28px / 1.35, padding 0 0 0 28px (1.4em at 20px body), margin 36px 0 (1.8em). */
body.dwellimedesign blockquote {
  margin: 1.8em 0;
  padding: 0 0 0 1.4em;
  border-left: 2px solid var(--dwe-accent);
  font-family: var(--dwe-font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.4em;
  line-height: 1.35;
  color: var(--dwe-ink);
}
body.dwellimedesign blockquote cite {
  display: block;
  margin-top: 0.75em;
  font-family: var(--dwe-font-mono);
  font-style: normal;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dwe-ink-mute);
}

/* Inline code + pre — keep monospace but warm it up. */
body.dwellimedesign code,
body.dwellimedesign pre {
  background: var(--dwe-paper-soft);
  color: var(--dwe-ink);
  border: 1px solid var(--dwe-rule-soft);
  border-radius: 2px;
}
body.dwellimedesign code { padding: .05em .35em; font-size: .95em; }
body.dwellimedesign pre { padding: .8em 1em; line-height: 1.5; }

/* ── Ornaments ─────────────────────────────────────────────────────────── */

/* SVG fleuron, inlined as data URI so there are no extra HTTP requests.
   Fill is the accent terracotta. */
body.dwellimedesign {
  --dwe-fleuron: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%238a3a2a' d='M12 2c1.3 2.3 3 3.6 5.2 4.2-2.2.6-3.9 1.9-5.2 4.2-1.3-2.3-3-3.6-5.2-4.2C9 5.6 10.7 4.3 12 2zm0 11.6c1.3 2.3 3 3.6 5.2 4.2-2.2.6-3.9 1.9-5.2 4.2-1.3-2.3-3-3.6-5.2-4.2 2.2-.6 3.9-1.9 5.2-4.2zM4 12c1 .3 1.8.9 2.4 1.9C7 12.9 7.8 12.3 8.8 12c-1-.3-1.8-.9-2.4-1.9C5.8 11.1 5 11.7 4 12zm11.2 0c1 .3 1.8.9 2.4 1.9.6-1 1.4-1.6 2.4-1.9-1-.3-1.8-.9-2.4-1.9-.6 1-1.4 1.6-2.4 1.9z'/%3E%3C/svg%3E");
}

/* Article-end mark — fleuron after the prose widget on single posts. */
body.dwellimedesign.single .entry-content .widget_dw_content_widget::after,
body.dwellimedesign.single-post .entry-content .widget_dw_content_widget::after {
  content: '';
  display: block;
  width: 2.2rem;
  height: 2.2rem;
  margin: 2.4em auto 1em auto;
  background-image: var(--dwe-fleuron);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: .9;
}

/* <hr> — hairline rule with a centered fleuron overlay. */
body.dwellimedesign hr {
  position: relative;
  border: 0;
  height: 1px;
  background: var(--dwe-rule);
  margin: 2.4em auto;
  max-width: 28rem;
  overflow: visible;
}
body.dwellimedesign hr::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.6rem;
  height: 1.6rem;
  transform: translate(-50%, -50%);
  background: var(--dwe-paper) var(--dwe-fleuron) center / 1.2rem no-repeat;
}

/* ── Post Header widget — eyebrow + byline ─────────────────────────────
   The Post Header widget (DW_ElliMe_Post_Header_Widget, registered when the
   overlay is enabled) renders two metadata rows: eyebrow above + byline
   below. Drop it into the `content-area-post` sidebar, ideally just before
   `dw_content_widget`. The whole thing centers on the reading measure so
   it visually frames the title that the content widget prints below it. */
body.dwellimedesign .entry-content .widget_dwellimedesign_post_header_widget {
  max-width: var(--dwe-measure);
  margin: 1.6rem auto 0;
  padding: 0 1rem;
}
body.dwellimedesign .dwe-post-header {
  font-family: var(--dwe-font-mono);
  font-size: 0.6875rem;       /* 11px — matches design's mono small caps */
  text-transform: uppercase;
  color: var(--dwe-ink-mute);
  line-height: 1.5;
}

/* Eyebrow — № N · CATEGORY · LANGUAGE · DATE — segments separated by short
   sepia rules so it reads as a magazine masthead, not a list of metadata.
   Design: letter-spacing 0.22em, gap 14px, sep width 28px. */
body.dwellimedesign .dwe-ph-eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.875rem;
  letter-spacing: 0.22em;
}
body.dwellimedesign .dwe-ph-eyebrow .dwe-ph-num {
  color: var(--dwe-accent);
  font-weight: 500;
}
body.dwellimedesign .dwe-ph-eyebrow .dwe-ph-sep {
  flex: 0 0 1.75rem;          /* 28px */
  height: 1px;
  background: var(--dwe-ink-mute);
  opacity: 0.5;
}

/* On narrow viewports the three eyebrow segments wrap to three lines (each
   on its own line because the mid segment fills the row). Switch to an
   explicit 2-row grid: line 1 puts № on the left and the date on the right,
   line 2 spans the series · language line full width. The hairline
   separators don't fit the layout — hide them. */
@media (max-width: 36rem) {
  body.dwellimedesign .dwe-ph-eyebrow {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-areas:
      "num date"
      "mid mid";
    justify-content: space-between;
    align-items: center;
    gap: 0.4rem 0.875rem;
  }
  body.dwellimedesign .dwe-ph-eyebrow .dwe-ph-num  { grid-area: num; }
  body.dwellimedesign .dwe-ph-eyebrow .dwe-ph-mid  { grid-area: mid; }
  body.dwellimedesign .dwe-ph-eyebrow .dwe-ph-date { grid-area: date; }
  body.dwellimedesign .dwe-ph-eyebrow .dwe-ph-sep  { display: none; }
}

/* Byline — BY <author> · LECTURA · 5 MIN · SERIE · X — sits between the
   eyebrow and the title block, ruled top so the trio (eyebrow / byline /
   title) reads as a single masthead unit. Design: letter-spacing 0.18em,
   gap 18px, padding-top 16px. */
body.dwellimedesign .dwe-ph-byline {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 1.125rem;
  letter-spacing: 0.18em;
  margin-top: 1.75rem;
  padding-top: 1rem;
  border-top: 1px solid var(--dwe-rule);
  color: var(--dwe-ink-soft);
}
body.dwellimedesign .dwe-ph-byline .dwe-ph-bullet {
  color: var(--dwe-ink-mute);
}
body.dwellimedesign .dwe-ph-byline .dwe-ph-by {
  color: var(--dwe-ink);
  font-weight: 500;
}

/* ── Featured image (dw_video_or_featured_widget) ──────────────────────── */

/* Hero image renders at its natural aspect — sepia hairline frame + width
   cap, no forced ratio. (Earlier iteration cropped to 4:3 to tame a square
   source; we now trust the author to upload an appropriately-sized image.) */
body.dwellimedesign .entry-content .widget_dw_video_or_featured_widget .dw-vof-lightbox-container {
  border: 1px solid var(--dwe-rule);
  background: var(--dwe-paper-soft);
  margin: 0 auto 2rem;
  max-width: 60rem;
}
body.dwellimedesign .entry-content .widget_dw_video_or_featured_widget img {
  display: block;
  width: 100%;
  height: auto;
  border: 0;
  background: transparent;
}

/* ── Accessibility & misc ──────────────────────────────────────────────── */

body.dwellimedesign ::selection {
  background: var(--dwe-accent);
  color: var(--dwe-paper);
}

body.dwellimedesign a:focus-visible,
body.dwellimedesign button:focus-visible,
body.dwellimedesign input:focus-visible,
body.dwellimedesign textarea:focus-visible,
body.dwellimedesign select:focus-visible {
  outline: 2px solid var(--dwe-accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Featured-image and inline-image framing — quiet sepia hairline so images
   sit on the paper rather than floating. Excludes the dw-vof container which
   has its own treatment above. */
body.dwellimedesign .wp-post-image,
body.dwellimedesign .entry-content img {
  border: 1px solid var(--dwe-rule-soft);
  background: var(--dwe-paper-soft);
}

/* ── Bootstrap chrome integration ──────────────────────────────────────── */

/* Site header navbar — paper-cream so it fades into the page; hairline rule
   underneath for quiet separation. Magazine masthead. */
body.dwellimedesign .site-header .navbar,
body.dwellimedesign .navbar.bg-light {
  background-color: var(--dwe-paper) !important;
  border-bottom: 1px solid var(--dwe-rule);
}

/* Wordmark — italic display serif. */
body.dwellimedesign .navbar-brand {
  font-family: var(--dwe-font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 1.6rem;
  color: var(--dwe-ink);
  letter-spacing: 0;
}
body.dwellimedesign .navbar-brand:hover,
body.dwellimedesign .navbar-brand:focus {
  color: var(--dwe-accent);
}

/* Nav links — mono small caps. */
body.dwellimedesign .navbar .nav-link {
  color: var(--dwe-ink);
  font-family: var(--dwe-font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
body.dwellimedesign .navbar .nav-link:hover,
body.dwellimedesign .navbar .nav-link:focus {
  color: var(--dwe-accent);
}

/* Dates that ride on Bootstrap's text-muted — warm them up to mono small caps. */
body.dwellimedesign .text-muted,
body.dwellimedesign .dw-card-date {
  color: var(--dwe-ink-mute) !important;
  font-family: var(--dwe-font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* ── Homepage masthead (dropped into a dw_html_widget) ─────────────────
   The homepage masthead lives inside a dw_html_widget at the top of
   home-widgets-wide. Three shortcodes ([dwe_issue], [dwe_issue_date],
   [dwe_languages]) supply the dynamic bits.

   Visual rules (sizes, margins, layout) live in the WIDGET's per-instance
   custom_css field — not here — so the user can tweak them from
   Appearance → Widgets without editing the plugin. The plugin only
   exposes the design tokens (var(--dwe-accent), --dwe-font-display, etc.)
   that the widget custom_css consumes via cascade. */

/* ── Card grid (dwsp / archive listings) ───────────────────────────────── */

body.dwellimedesign .card {
  background: transparent;
  border: 0;
}
body.dwellimedesign .card-body {
  padding-left: 0;
  padding-right: 0;
}
body.dwellimedesign .card-title {
  font-family: var(--dwe-font-display);
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 1.18;
  margin-top: 0.2em;
  letter-spacing: -0.005em;
  text-wrap: balance;
}
body.dwellimedesign .card-title a { color: var(--dwe-ink); }
body.dwellimedesign .card-title a:hover,
body.dwellimedesign .card-title a:focus { color: var(--dwe-accent); }

/* Card image — sepia frame. */
body.dwellimedesign .dw-card-media {
  border: 1px solid var(--dwe-rule);
  background: var(--dwe-paper-soft);
}

/* Card "also in <language>" hint. */
body.dwellimedesign .dw-card-langs {
  font-family: var(--dwe-font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dwe-ink-mute);
  margin-top: 0.4rem;
}

/* ── Sharing widget (dwtheme's .dw-socialsharing) ──────────────────────── */

/* Re-skin the share buttons as inline text links — mono small caps with a
   hairline underline. Removes the Bootstrap "card" treatment that the
   default skin gives them. */
body.dwellimedesign .dw-socialsharing .dwss-btn {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--dwe-rule);
  border-radius: 0;
  color: var(--dwe-ink);
  font-family: var(--dwe-font-mono);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.5em 0.2em;
  text-align: left;
  transition: color .15s ease, border-color .15s ease;
}
body.dwellimedesign .dw-socialsharing .dwss-btn:hover,
body.dwellimedesign .dw-socialsharing .dwss-btn:focus {
  color: var(--dwe-accent);
  border-bottom-color: var(--dwe-accent);
}
body.dwellimedesign .dw-socialsharing .dwss-excerpt {
  color: var(--dwe-ink-soft);
  font-style: italic;
  font-size: 1em;
  border-top: 1px solid var(--dwe-rule-soft);
  border-bottom: 1px solid var(--dwe-rule-soft);
  padding: .8em 0;
  margin-bottom: .4em;
  text-align: center;
  font-family: var(--dwe-font-display);
}

/* ── Language switchers ────────────────────────────────────────────────── */

/* Archive switcher (dw_smartposts_widget). */
body.dwellimedesign .dwsp-lang-selector {
  display: inline-flex;
  gap: .2em;
  align-items: baseline;
}
body.dwellimedesign .dwsp-lang-selector .dwsp-lang-btn {
  color: var(--dwe-ink-mute);
  font-family: var(--dwe-font-mono);
  font-weight: 500;
  font-size: .72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0 .35em;
}
body.dwellimedesign .dwsp-lang-selector .dwsp-lang-btn:hover,
body.dwellimedesign .dwsp-lang-selector .dwsp-lang-btn:focus {
  color: var(--dwe-ink);
}
body.dwellimedesign .dwsp-lang-selector .dwsp-lang-btn.dwsp-lang-active {
  color: var(--dwe-accent);
  text-decoration: underline;
  text-decoration-color: var(--dwe-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}

/* Per-post sibling languages (dwmultilang widget). */
body.dwellimedesign .dwml-siblings-widget {
  background-color: var(--dwe-paper-soft);
  border-top: 1px solid var(--dwe-rule-soft);
  border-bottom: 1px solid var(--dwe-rule-soft);
  color: var(--dwe-ink-soft);
  font-style: italic;
  padding: .7em 1em;
  margin: 1em auto;
  max-width: var(--dwe-measure);
  text-align: center;
}
body.dwellimedesign .dwml_info_before {
  color: var(--dwe-ink-soft);
}
body.dwellimedesign .dwml-siblings-list {
  margin: 0;
  padding: 0;
  display: inline;
  list-style: none;
}
body.dwellimedesign .dwml-siblings-list li strong {
  color: var(--dwe-accent);
  font-style: normal;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--dwe-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}
body.dwellimedesign .dwml-siblings-list li a {
  color: var(--dwe-accent);
  font-style: normal;
  text-decoration: none;
}
body.dwellimedesign .dwml-siblings-list li a:hover,
body.dwellimedesign .dwml-siblings-list li a:focus {
  color: var(--dwe-accent-deep);
  text-decoration: underline;
  text-decoration-color: var(--dwe-accent);
}

/* ── Cookie consent (dwcookies plugin) ─────────────────────────────────── */
/* The plugin paints banner/modal from --dwc-* custom properties. Overriding
   those at body scope is the single-source fix — every .dwcookies-* selector
   inherits the new palette automatically. */
body.dwellimedesign {
  --dwc-banner-bg:          var(--dwe-paper);
  --dwc-banner-text:        var(--dwe-ink);
  --dwc-link:               var(--dwe-accent);
  --dwc-btn-primary-bg:     var(--dwe-accent);
  --dwc-btn-primary-text:   var(--dwe-paper);
  --dwc-btn-secondary-bg:   var(--dwe-paper-soft);
  --dwc-btn-secondary-text: var(--dwe-ink);
  --dwc-btn-ghost-text:     var(--dwe-ink-soft);
  --dwc-btn-ghost-border:   var(--dwe-rule-soft);
  /* Warm ink scrim at low opacity — the site reads THROUGH the banner. */
  --dwc-overlay-bg:         rgba(28, 26, 23, 0.35);
  --dwc-modal-bg:           var(--dwe-paper);
  --dwc-modal-text:         var(--dwe-ink);
  --dwc-modal-border:       var(--dwe-rule);
}

body.dwellimedesign .dwcookies-banner,
body.dwellimedesign .dwcookies-banner__inner {
  font-family: var(--dwe-font-body);
}
body.dwellimedesign .dwcookies-banner--box .dwcookies-banner__inner {
  border: 1px solid var(--dwe-rule);
}

body.dwellimedesign .dwcookies-modal__box {
  background: var(--dwe-paper);
  color: var(--dwe-ink);
  border: 1px solid var(--dwe-rule);
  border-radius: 2px;
  font-family: var(--dwe-font-body);
  /* Garamond at Bootstrap's default .875rem strains the eye. 1.05rem reads. */
  font-size: 1.05rem;
  line-height: 1.55;
}
body.dwellimedesign .dwcookies-modal__title {
  font-family: var(--dwe-font-display);
  color: var(--dwe-ink);
}

body.dwellimedesign .dwcookies-modal__item {
  border-bottom: 1px solid var(--dwe-rule-soft);
}
body.dwellimedesign .dwcookies-modal__item:last-child {
  border-bottom: 0;
}
body.dwellimedesign .dwcookies-modal__label {
  color: var(--dwe-ink);
  font-weight: 700;
  font-size: 1.05rem;
}
body.dwellimedesign .dwcookies-modal__desc {
  color: var(--dwe-ink);
  font-size: 1rem;
  line-height: 1.5;
  margin-top: .25em;
}

body.dwellimedesign .dwcookies-modal__badge {
  background: var(--dwe-paper-soft);
  color: var(--dwe-ink);
  border: 1px solid var(--dwe-rule-soft);
  border-radius: 2px;
  font-size: .82em;
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: .2em .55em;
}

body.dwellimedesign .dwcookies-cat-check {
  accent-color: var(--dwe-accent);
}

body.dwellimedesign .dwcookies-modal__cookie-details summary {
  color: var(--dwe-ink);
  cursor: pointer;
  font-size: .95rem;
}
body.dwellimedesign .dwcookies-modal__cookie-table {
  font-size: .95rem;
  line-height: 1.4;
}
body.dwellimedesign .dwcookies-modal__cookie-table td {
  color: var(--dwe-ink);
}
body.dwellimedesign .dwcookies-modal__cookie-table th,
body.dwellimedesign .dwcookies-modal__cookie-table td {
  border-bottom: 1px solid var(--dwe-rule-soft);
  padding: .35em .6em;
}
body.dwellimedesign .dwcookies-modal__cookie-table th {
  color: var(--dwe-ink-mute);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: .78em;
}
body.dwellimedesign .dwcookies-modal__cookie-table code {
  background: var(--dwe-paper-soft);
  border: 1px solid var(--dwe-rule-soft);
}

body.dwellimedesign .dwcookies-btn {
  font-family: var(--dwe-font-body);
  letter-spacing: 0.02em;
  border-radius: 2px;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
body.dwellimedesign .dwcookies-btn--primary {
  background: var(--dwe-accent);
  border: 1px solid var(--dwe-accent);
  color: var(--dwe-paper);
}
body.dwellimedesign .dwcookies-btn--primary:hover,
body.dwellimedesign .dwcookies-btn--primary:focus {
  background: var(--dwe-accent-deep);
  border-color: var(--dwe-accent-deep);
  color: var(--dwe-paper);
}
body.dwellimedesign .dwcookies-btn--secondary {
  background: var(--dwe-paper-soft);
  border: 1px solid var(--dwe-rule);
  color: var(--dwe-ink);
}
body.dwellimedesign .dwcookies-btn--secondary:hover,
body.dwellimedesign .dwcookies-btn--secondary:focus {
  background: var(--dwe-paper);
  border-color: var(--dwe-accent);
  color: var(--dwe-accent);
}
body.dwellimedesign .dwcookies-btn--ghost {
  background: transparent;
  border: 1px solid var(--dwe-rule-soft);
  color: var(--dwe-ink-soft);
}
body.dwellimedesign .dwcookies-btn--ghost:hover,
body.dwellimedesign .dwcookies-btn--ghost:focus {
  color: var(--dwe-ink);
  border-color: var(--dwe-rule);
}

body.dwellimedesign .dwcookies-settings-panel {
  background: var(--dwe-paper);
  color: var(--dwe-ink);
  border: 1px solid var(--dwe-rule-soft);
  border-radius: 2px;
  padding: 1.2em 1.4em;
  font-family: var(--dwe-font-body);
}

@media (prefers-reduced-motion: reduce) {
  body.dwellimedesign a { transition: none; }
  body.dwellimedesign .dwcookies-btn { transition: none; }
  body.dwellimedesign .card-title a { transition: none; }
  body.dwellimedesign .dw-socialsharing .dwss-btn { transition: none; }
}