/* Site-wide typography system matching the approved AMAL direction. */
@font-face {
  font-family: "AMAL Bodoni";
  src: url("/assets/fonts/bodoni-moda-400.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "AMAL Bodoni";
  src: url("/assets/fonts/bodoni-moda-500.ttf") format("truetype");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "AMAL Bodoni";
  src: url("/assets/fonts/bodoni-moda-600.ttf") format("truetype");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "AMAL Sans";
  src: url("/assets/fonts/dm-sans-400.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "AMAL Hero Editorial";
  src: url("/_next/static/media/01e4147cff8141ee-s.p.10ked.7w885.g.woff2") format("woff2");
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
}

@font-face {
  font-family: "AMAL Sans";
  src: url("/assets/fonts/dm-sans-500.ttf") format("truetype");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "AMAL Sans";
  src: url("/assets/fonts/dm-sans-600.ttf") format("truetype");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "AMAL Sans";
  src: url("/assets/fonts/dm-sans-700.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

:root {
  --amal-type-display: "AMAL Bodoni", "Bodoni Moda", Didot, "Times New Roman", serif;
  --amal-type-body: "AMAL Sans", "DM Sans", Arial, sans-serif;
  --display: var(--amal-type-display);
  --serif: var(--amal-type-display);
  --sans: var(--amal-type-body);
  --home-display: var(--amal-type-display);
  --home-body: var(--amal-type-body);
  --support-display: var(--amal-type-display);
  --support-body: var(--amal-type-body);
  --amal-commerce-font-display: var(--amal-type-display);
  --amal-commerce-font-body: var(--amal-type-body);
  --font-display: var(--amal-type-display);
  --font-body: var(--amal-type-body);
  --font-editorial: var(--amal-type-display);
  --amal-display: var(--amal-type-display);
  --amal-editorial: var(--amal-type-display);
  --amal-rounded: var(--amal-type-body);
  --contact-serif: var(--amal-type-display);
  --contact-sans: var(--amal-type-body);
}

/* A few legacy route styles declare their own variables on the body or theme node. */
body.home-reactive-page {
  --home-display: var(--amal-type-display);
  --home-body: var(--amal-type-body);
}

.composed-home {
  --serif: var(--amal-type-display) !important;
  --sans: var(--amal-type-body) !important;
}

body.wallet-catalog-body {
  --wallet-modern-display: var(--amal-type-display) !important;
  --wallet-modern-body: var(--amal-type-body) !important;
}

.reactive-nav,
.reactive-mobile-links {
  --home-display: var(--amal-type-display) !important;
  --home-body: var(--amal-type-body) !important;
}

html[data-theme] {
  --font-display: var(--amal-type-display);
  --font-body: var(--amal-type-body);
  --font-editorial: var(--amal-type-display);
}

body,
button,
input,
textarea,
select {
  font-family: var(--amal-type-body);
}

h1,
h2,
h3,
h4,
h5,
h6,
.section-h2,
.shop-title,
.card-title,
.support-title,
.support-heading,
.product-title,
.product-name,
.collection-title,
.composed-hero h1,
.composed-editorial h2,
.composed-craft h2,
.leather-archive-title {
  font-family: var(--amal-type-display) !important;
  font-weight: 400;
}

.site-nav,
.site-nav a,
.nav-links,
.nav-links a,
.composed-header,
.composed-header a,
.support-nav,
.support-nav a,
.amal-mega-menu,
.amal-mega-menu a,
.button,
button,
input,
select,
textarea {
  font-family: var(--amal-type-body);
}

/* The approved homepage hero deliberately uses a quieter, narrow serif than the site display system. */
.composed-home .composed-hero h1 {
  font-family: "AMAL Hero Editorial", "Cormorant Garamond", Georgia, serif !important;
  font-size: clamp(33px, 3.7vw, 54px);
  font-weight: 500;
  line-height: 0.94;
  letter-spacing: 0.012em !important;
  text-transform: uppercase !important;
}

.composed-home .composed-hero-copy {
  max-width: clamp(420px, 42vw, 620px);
}

/* Responsive first-view composition: sized by both the viewport and the visual field,
   with protected room for the title and CTA rather than the source image's ratio. */
.composed-home .composed-hero {
  height: min(88svh, clamp(520px, 55vw, 1280px));
  min-height: 0;
  aspect-ratio: auto;
}

.composed-home .composed-hero-copy {
  bottom: clamp(40px, 7.5vh, 110px);
}

.composed-home .composed-hero h1 {
  font-size: clamp(33px, 3.7vw, 58px);
}

@media (max-width: 900px) and (orientation: portrait) {
  .composed-home .composed-hero {
    height: min(76svh, clamp(640px, 86vw, 780px));
  }

  .composed-home .composed-hero-copy {
    bottom: clamp(42px, 6.5vh, 68px);
    max-width: min(68vw, 530px);
  }
}

@media (max-width: 600px) {
  .composed-home .composed-hero {
    height: clamp(520px, 78svh, 640px);
  }

  .composed-home .composed-hero-copy {
    bottom: clamp(28px, 5svh, 42px);
    max-width: calc(100% - 48px);
  }

  .composed-home .composed-hero-media {
    object-position: 50% 50%;
  }

  .composed-home .composed-hero h1 {
    font-size: clamp(33px, 9vw, 44px);
  }
}

@media (min-width: 761px) and (orientation: landscape) {
  .composed-home .composed-hero {
    height: 100svh;
  }

  .composed-home .composed-hero-media {
    object-position: 50% 50%;
  }
}

/* Keep the two craft-story panels in the same current editorial type system as the hero. */
.composed-home .composed-editorial-copy h2 {
  font-family: "AMAL Hero Editorial", "Cormorant Garamond", Georgia, serif !important;
  font-weight: 500;
  letter-spacing: 0.012em !important;
  text-transform: uppercase !important;
}

.composed-home .composed-editorial-copy .composed-kicker,
.composed-home .composed-editorial-copy .composed-text-link {
  font-family: var(--amal-type-body) !important;
}