/* WEMMS TYPOGRAPHY UNIFY V3 — only website UI, never printed designs */
@font-face {
  font-family: "WEMMS Oswald";
  src: url("/fonts/oswald.ttf") format("truetype");
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "WEMMS Schueler";
  src: url("/fonts/schueler-superxp-regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
:root {
  --wm-font-display: "WEMMS Oswald", "Arial Narrow", Arial, sans-serif;
  --wm-font-text: "WEMMS Schueler", Arial, sans-serif;
}
@media screen {
  /* Inherited text font; leave image/canvas typography untouched. */
  html body {
    font-family: var(--wm-font-text) !important;
    min-width: 0;
    overflow-x: clip;
    font-synthesis: style weight;
  }
  html body :is(p, li, blockquote, label, input, textarea, select,
    .hero-lead, .section-lead, .lead, .muted, .small-ink,
    .request-copy > p, .section-heading > p, .chosen-details,
    .catalog-card p, .handwritten, .handnote, .hand-note,
    .page-note, .round-stamp, .paper-note, .footer-brand small,
    .brief-notice, .under-form, .selection-note):not(.page *, .print-page *, .template-page *, .collage-sheet *, .slot *,
         .spread *, .hero-page *, .paper-swatch *, .featured-preview *) {
    font-family: var(--wm-font-text) !important;
    font-weight: 400;
  }
  html body .wm-v4 .wm-nav {
    font-size: 13px !important;
    line-height: 1.3;
  }
  html body .wm-v4 .wm-nav :is(a, button) {
    font-size: inherit !important;
    font-weight: 500;
  }
  /* No Georgia fallback or mismatched widths for UI headings. */
  html body :is(h1, h2, h3, h4, h5, h6,
    .catalog-card h3, .chosen-name, .summary strong, .feature h3,
    .timeline h3, .product-list strong, .help-item strong,
    .book-topline strong, .step-number, .steps strong,
    .feature-grid strong, .form-label strong,
    .price-empty strong, .footer-brand,
    .round-stamp strong):not(.page *, .print-page *, .template-page *, .collage-sheet *,
         .slot *, .spread *, .hero-page *, .paper-swatch *, .featured-preview *) {
    font-family: var(--wm-font-display) !important;
    font-style: normal;
    font-weight: 400;
    letter-spacing: 0 !important;
    overflow-wrap: break-word;
    word-break: normal;
    text-wrap: pretty;
  }
  /* Italic title accents still remain italic, but in Oswald. */
  html body :is(h1 em, h2 em, h3 em, .intro h1 em, .request h2 em):not(.page *, .print-page *, .template-page *, .collage-sheet *, .spread *) {
    font-family: var(--wm-font-display) !important;
    font-style: italic;
    font-weight: inherit;
    letter-spacing: 0 !important;
  }
  /* The same typography for navigation, actions and section labels everywhere. */
  html body :is(nav, nav a, nav button,
    .wm-nav, .wm-nav a, .wm-nav button,
    .topnav, .topnav a, .header nav, .header nav a,
    button, .btn, .primary, .outline, .add-btn,
    .button-primary, .nav-action, .header-cta, .copy-brief,
    .text-link, .download-button, .tab, .page-pill,
    .round-nav, .choice span,
    .kicker, .eyebrow, .side-label, .chapter-name,
    .side-heading, .step-number, .count-pill, .count-dot,
    .marquee, .wm-v4 .wm-nav *):not(.page *, .print-page *, .template-page *, .collage-sheet *,
         .slot *, .spread *, .hero-page *, .paper-swatch *, .featured-preview *) {
    font-family: var(--wm-font-display) !important;
    letter-spacing: .01em !important;
  }
  /* Text controls should remain legible and not truncate on narrow screens. */
  html body :is(button, .btn, .primary, .outline, .add-btn,
    .button-primary, .nav-action, .header-cta, .copy-brief):not(.page *, .print-page *, .template-page *, .collage-sheet *, .spread *) {
    line-height: 1.25;
    text-align: center;
  }
  html body :is(input, textarea, select):not(.page *, .print-page *, .template-page *, .collage-sheet *, .spread *) {
    font-family: var(--wm-font-text) !important;
    letter-spacing: 0 !important;
  }
  /* Main headings: balanced, no overflow from legacy Georgia metrics. */
  html body h1:not(.page *, .print-page *, .template-page *, .collage-sheet *) {
    font-size: clamp(40px, 5vw, 78px) !important;
    line-height: 1.09 !important;
    max-width: 100%;
  }
  html body :is(.section h2, .editor-intro h2, .intro h2,
    .request h2, .ending h2, .last h2):not(.page *, .print-page *, .template-page *, .collage-sheet *) {
    font-size: clamp(31px, 3.35vw, 53px) !important;
    line-height: 1.14 !important;
    max-width: 100%;
  }
  html body :is(.catalog-card h3, .chosen-name):not(.page *, .print-page *, .template-page *, .collage-sheet *) {
    font-size: clamp(16px, 1.25vw, 19px) !important;
    line-height: 1.25 !important;
  }
  html body :is(.catalog-card p, .chosen-details, .muted, .selection-note):not(.page *, .print-page *, .template-page *, .collage-sheet *) {
    line-height: 1.45;
  }
  /* Root cause on the last screenshot: the end section is a flex row.
     Prevent text from escaping the viewport when a new font loads. */
  html body :is(.ending, .ending-content, .last, .footer-inner,
    .hero, .editor-intro, .workspace, .order-card,
    .product-layout, .request, .catalog, .selection,
    .footer-row, .header-row, .header-inner) {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }
  html body :is(.ending-content, .last, .footer-inner) {
    flex-wrap: wrap;
    gap: clamp(14px, 2.4vw, 30px);
  }
  html body :is(.ending-content, .last, .footer-inner, .hero,
    .editor-intro, .workspace, .order-card, .product-layout, .request) > * {
    min-width: 0;
  }
  html body .ending-content {
    width: 100%;
    max-width: 100%;
    padding-right: clamp(100px, 11vw, 170px);
    align-items: center;
  }
  html body .ending-content h2 {
    flex: 1 1 340px;
    max-width: 100%;
    margin: 0;
  }
  html body .ending-content :is(a, button) {
    flex: 0 1 auto;
    max-width: 100%;
  }
  html body .ending > img {
    max-width: 140px;
    height: auto;
    object-fit: contain;
  }
  html body :is(.container, .wrap, .shell) {
    max-width: calc(100% - 28px);
  }
}
@media screen and (max-width: 900px) {
  html body h1:not(.page *, .print-page *, .template-page *, .collage-sheet *) {
    font-size: clamp(38px, 6.2vw, 64px) !important;
  }
  html body .ending-content {
    padding-right: 125px;
  }
  html body .wm-v4 .wm-nav :is(a, button) {
    font-size: 12px;
  }
}
@media screen and (max-width: 600px) {
  html body h1:not(.page *, .print-page *, .template-page *, .collage-sheet *) {
    font-size: clamp(35px, 9.1vw, 47px) !important;
    line-height: 1.12 !important;
  }
  html body :is(.section h2, .editor-intro h2, .intro h2,
    .request h2, .ending h2, .last h2) {
    font-size: clamp(29px, 7.5vw, 39px) !important;
  }
  html body .ending-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-right: 0;
  }
  html body .ending-content h2 {
    flex: none;
  }
  html body .ending > img {
    position: relative;
    width: 110px;
    max-width: 35%;
    top: auto;
    right: auto;
    bottom: auto;
    margin: 12px 0 0 auto;
  }
  html body :is(.btn, .primary, .button-primary, .header-cta, .nav-action) {
    white-space: normal;
    overflow-wrap: break-word;
  }
  html body :is(.catalog-card, .chosen-item, .selection, .catalog) {
    min-width: 0;
  }
}