/* PENGER background signatures. Never reserve space or resize their content. */
.brand-art-host {
  position: relative;
  isolation: isolate;
}
.brand-motif {
  --brand-size: clamp(128px, 11vw, 160px);
  box-sizing: border-box;
  position: absolute;
  z-index: -1;
  mix-blend-mode: multiply;
  top: 12px;
  right: 24px;
  display: flex;
  align-items: center;
  gap: 6px;
  width: max-content;
  max-width: calc(100% - 32px);
  min-width: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  line-height: 0;
}
.brand-motif > .brand-motif__mark {
  display: block;
  flex: 0 1 auto;
  width: var(--brand-size);
  height: var(--brand-size);
  max-width: 100%;
  min-width: 0;
  object-fit: contain;
  border: 0;
  border-radius: 0;
  background: var(--brand-paper, transparent);
  box-shadow: none;
  mix-blend-mode: normal;
  opacity: .24;
}
.brand-motif__mark > img {
  mix-blend-mode: multiply;
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.brand-motif > .brand-motif__mark:nth-child(2) {
  width: calc(var(--brand-size) * .6);
  height: calc(var(--brand-size) * .6);
  margin-top: calc(var(--brand-size) * .22);
  opacity: .14;
}
.brand-motif > .brand-motif__mark:nth-child(3) {
  width: calc(var(--brand-size) * .4);
  height: calc(var(--brand-size) * .4);
  align-self: flex-start;
  opacity: .1;
}
.brand-motif--compact { --brand-size: clamp(112px, 10vw, 144px); }
.brand-motif--micro { --brand-size: clamp(72px, 7vw, 96px); }
.brand-motif--ambient { --brand-size: clamp(144px, 12vw, 176px); }

/* Editorial pages: existing top padding and outer gutters are the art canvas. */
.about-v2-hero__copy, .brand-art-origin { --brand-paper: var(--about-paper); }
.about-v2-hero__copy > .brand-motif { top: 12px; right: 18px; }
.brand-art-origin > .brand-motif { top: auto; right: 0; bottom: 16px; }
.after-hero-copy > .brand-motif { --brand-size: clamp(88px, 8vw, 112px); top: -16px; right: 0; }
.after-section-heading > .brand-motif { --brand-size: clamp(88px, 8vw, 112px); top: -72px; right: 0; }
.brand-art-contact-heading, .contact-dialogue { --brand-paper: var(--contact-paper); }
.brand-art-contact-heading > .brand-motif { --brand-size: clamp(80px, 7vw, 96px); top: -8px; left: calc(100% + 24px); right: auto; }
.contact-dialogue > .brand-motif { --brand-size: clamp(112px, 10vw, 144px); top: 0; right: 0; }
.about-hero[data-section="cookie-hero"] > .brand-motif { top: 8px; right: clamp(16px, 4vw, 64px); }
.ds-hero > .brand-motif { --brand-size: clamp(128px, 11vw, 160px); top: 8px; right: clamp(16px, 4vw, 64px); }
.ds-section > .brand-motif { --brand-size: clamp(88px, 8vw, 112px); top: 4px; right: clamp(16px, 4vw, 64px); }
.wp-hero > .brand-motif { --brand-size: clamp(112px, 10vw, 144px); top: 2px; right: 24px; }
.destroy-process > .brand-motif { --brand-size: clamp(88px, 8vw, 112px); top: 4px; right: 24px; }
.setup-lede-spacer > .brand-motif { top: 50%; right: 0; transform: translateY(-50%); }
.setup-welcome-note > .brand-motif { --brand-size: clamp(64px, 6vw, 80px); top: 2px; right: 4px; }
.setup-welcome-note > .brand-motif,
.sim-hub-card--generate > .brand-motif,
.quiz-cta-panel > .brand-motif { mix-blend-mode: screen; }
.setup-welcome-note > .brand-motif > .brand-motif__mark,
.sim-hub-card--generate > .brand-motif > .brand-motif__mark,
.quiz-cta-panel > .brand-motif > .brand-motif__mark { filter: invert(1); }
/* These cards swap paper on hover/focus; their background ink swaps with it. */
.sim-hub-card--generate:is(:hover, :focus-visible) > .brand-motif { mix-blend-mode: multiply; }
.sim-hub-card--generate:is(:hover, :focus-visible) > .brand-motif > .brand-motif__mark { filter: none; }
.sim-hub-card--decode:is(:hover, :focus-visible) > .brand-motif { mix-blend-mode: screen; }
.sim-hub-card--decode:is(:hover, :focus-visible) > .brand-motif > .brand-motif__mark { filter: invert(1); }

/* Dense directory/tool headers use the unused outside edge, not a new column. */
.dict-hero > .brand-motif,
.academy-hero > .brand-motif,
.edu-lab > .brand-motif,
.sim-hub > .brand-motif { --brand-size: clamp(80px, 8vw, 112px); top: 2px; right: 2px; }
/* These two-column headings leave a clear gap before the supporting copy. */
.edu-lab > .brand-motif,
.sim-hub > .brand-motif { top: 8px; right: 54%; }
.dict-hero > .brand-motif > .brand-motif__mark:not(:first-child),
.academy-hero > .brand-motif > .brand-motif__mark:not(:first-child),
.edu-lab > .brand-motif > .brand-motif__mark:not(:first-child),
.sim-hub > .brand-motif > .brand-motif__mark:not(:first-child) { display: none; }
.tutor-hero-title > .brand-motif { --brand-size: clamp(64px, 6vw, 80px); top: -52px; right: 0; }
.sim-generate-workbench > .brand-motif { --brand-size: clamp(64px, 6vw, 80px); top: 2px; right: 20px; }
.sim-hub-card > .brand-motif { --brand-size: clamp(88px, 8vw, 112px); top: 0; right: 50%; transform: translateX(50%); }
.studio-toolbar > .brand-motif { --brand-size: clamp(64px, 6vw, 80px); top: 8px; right: 50%; transform: translateX(50%); }

/* Reading and quiz surfaces preserve all headings and original grid children. */
.guide-reader-header > .brand-motif { --brand-size: clamp(112px, 10vw, 144px); top: auto; bottom: 0; right: clamp(16px, 3vw, 48px); }
.guide-level-picker > .brand-motif { --brand-size: clamp(64px, 6vw, 80px); top: 0; right: 12px; }
.article-previews > .brand-motif,
.brand-art-lab > .brand-motif { --brand-size: clamp(80px, 8vw, 112px); top: 2px; right: clamp(12px, 3vw, 40px); }
.quiz-intro > .brand-motif { --brand-size: clamp(64px, 6vw, 80px); top: 0; right: 0; }
.quiz-cta-panel > .brand-motif { --brand-size: clamp(64px, 6vw, 80px); top: 0; right: 4px; }

/* The real status marks, totals, action bars and printable invoice stay intact. */
.error-page > .brand-motif { top: 18px; right: 24px; }
.receipt > .brand-motif,
.payment-status-card > .brand-motif { --brand-size: clamp(72px, 7vw, 96px); top: 4px; right: 6px; }
.brand-art-legacy-commerce > .brand-motif { --brand-size: clamp(72px, 7vw, 96px); top: 0; right: 24px; }
.invoice-page > .brand-motif { --brand-size: clamp(72px, 7vw, 96px); top: 4px; right: 24px; }
.wl-hero > .brand-motif { --brand-size: clamp(112px, 10vw, 144px); top: 8px; right: 12px; }

@media (max-width: 1000px) {
  .dict-hero > .brand-motif,
  .academy-hero > .brand-motif,
  .edu-lab > .brand-motif,
  .sim-hub > .brand-motif { --brand-size: 32px; top: 2px; right: 2px; }
  /* The responsive layout closes these gutters before switching to one column. */
  .studio-toolbar > .brand-motif,
  .tutor-hero-title > .brand-motif,
  .brand-art-contact-heading > .brand-motif,
  .after-section-heading > .brand-motif,
  .brand-art-origin > .brand-motif { display: none; }
}
@media (max-width: 720px) {
  .brand-motif { --brand-size: 48px; top: 4px; right: 8px; gap: 0; max-width: calc(100% - 16px); }
  .brand-motif--compact { --brand-size: 48px; }
  .brand-motif--micro { --brand-size: 36px; }
  .brand-motif--ambient { --brand-size: 64px; }
  .brand-motif > .brand-motif__mark { opacity: .2; }
  .brand-motif > .brand-motif__mark:not(:first-child) { display: none; }
  .about-v2-hero__copy > .brand-motif { --brand-size: 40px; top: 0; right: 8px; }
  .after-hero-copy > .brand-motif { --brand-size: 32px; top: -8px; right: 0; }
  .setup-welcome-note > .brand-motif { --brand-size: 32px; }
  .contact-dialogue > .brand-motif { --brand-size: 40px; top: 4px; right: 0; }
  .about-hero[data-section="cookie-hero"] > .brand-motif,
  .ds-hero > .brand-motif { --brand-size: 40px; top: 0; right: 8px; }
  .ds-section > .brand-motif,
  .wp-hero > .brand-motif,
  .destroy-process > .brand-motif { --brand-size: 32px; top: 0; right: 8px; }
  .guide-reader-header > .brand-motif { --brand-size: 40px; top: 0; bottom: auto; right: 8px; }
  .article-previews > .brand-motif,
  .brand-art-lab > .brand-motif { --brand-size: 28px; top: 0; right: 4px; }
  .quiz-cta-panel > .brand-motif { --brand-size: 24px; top: 0; right: 4px; }
  .receipt > .brand-motif,
  .payment-status-card > .brand-motif { --brand-size: 28px; top: 2px; right: 4px; }
  .error-page > .brand-motif { --brand-size: 32px; top: 2px; right: 8px; }
  /* No decoration on narrow search, choice or working surfaces. */
  .dict-hero > .brand-motif,
  .academy-hero > .brand-motif,
  .edu-lab > .brand-motif,
  .sim-hub > .brand-motif,
  .sim-hub-card > .brand-motif,
  .sim-generate-workbench > .brand-motif,
  .guide-level-picker > .brand-motif,
  .quiz-intro > .brand-motif,
  .brand-art-legacy-commerce > .brand-motif,
  .invoice-page > .brand-motif,
  .wl-hero > .brand-motif { display: none; }
}
/* Mobile is deliberately sparse. Only explicit landing / shop exceptions
   survive; the desktop composition above is unchanged. */
@media (max-width: 900px) {
  .brand-motif:not([data-mobile-decor]),
  .penger-section-art:not([data-mobile-decor]),
  .lp-background-art:not([data-mobile-decor]) { display: none !important; }
  .brand-motif[data-mobile-decor] > .brand-motif__mark:not(:first-child) { display: none; }
}
@media (prefers-contrast: more), (forced-colors: active), print {
  .brand-motif { display: none !important; }
}