/* =========================================
   TYPO MODULE — ZWISCHEN WELTEN
   Cinzel / Cormorant Garamond / Mulish / Aceserif
   ========================================= */

/* ── @font-face ─────────────────────────── */

@font-face {
  font-family: 'Cinzel';
  src: url('fonts/Cinzel-latin-ext.woff2') format('woff2');
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Cinzel';
  src: url('fonts/Cinzel-latin.woff2') format('woff2');
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Cormorant Garamond';
  src: url('fonts/CormorantGaramond-Regular-latin-ext.woff2') format('woff2');
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Cormorant Garamond';
  src: url('fonts/CormorantGaramond-Regular-latin.woff2') format('woff2');
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Cormorant Garamond';
  src: url('fonts/CormorantGaramond-Italic-latin-ext.woff2') format('woff2');
  font-weight: 400 600;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Cormorant Garamond';
  src: url('fonts/CormorantGaramond-Italic-latin.woff2') format('woff2');
  font-weight: 400 600;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Aceserif';
  src: url('fonts/aceserif-pro.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Mulish';
  src: url('fonts/Mulish-Regular.woff2') format('woff2'),
       url('fonts/Mulish-Regular.woff')  format('woff'),
       url('fonts/Mulish-Regular.ttf')   format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Mulish';
  src: url('fonts/Mulish-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/* ── Custom Properties ───────────────────── */

:root {
  --font-display: "Cinzel", serif;
  --font-body:    "Cormorant Garamond", serif;
  --font-ui:      "Mulish", sans-serif;
  --font-accent:  "Aceserif", serif;

  --fs-h1:          clamp(2.5rem,  5vw,    5.25rem);
  --fs-h2:          clamp(1.9rem,  3.6vw,  3.5rem);
  --fs-h3:          clamp(1.4rem,  2.3vw,  2rem);
  --fs-h4:          clamp(1.05rem, 1.5vw,  1.35rem);
  --fs-body:        1.6rem;
  --fs-body-small:  clamp(0.95rem, 1.05vw, 1.05rem);
  --fs-ui:          clamp(0.72rem, 0.8vw,  0.82rem);
  --fs-button:      clamp(0.8rem,  0.88vw, 0.88rem);

  --lh-tight:      1.02;
  --lh-heading:    1.12;
  --lh-body:       1.72;
  --lh-body-loose: 1.82;

  --ls-display: 0.01em;
  --ls-ui:      0.10em;
  --ls-label:   0.14em;
  --ls-button:  0.10em;

  --text-max:        44rem;
  --text-max-narrow: 34rem;
  --text-max-poetic: 30rem;

  --space-overline-to-heading: 0.9rem;
  --space-heading-to-text:     1.4rem;
  --space-paragraph:           1.1rem;
  --space-section-stack:       clamp(1.5rem, 2vw, 2.5rem);
}

/* ── Base ────────────────────────────────── */

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

p,
li,
blockquote {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  max-width: var(--text-max);
  margin: 0 0 var(--space-paragraph);
}

p.small,
.body-small {
  font-size: var(--fs-body-small);
}

/* ── Display Hierarchy ───────────────────── */

h1,
h2,
.display-heading {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: var(--ls-display);
  text-wrap: balance;
  margin: 0;
}

h1,
.hero-title {
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  max-width: 12ch;
}

h2,
.section-title {
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  max-width: 16ch;
}

h3,
.subsection-title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: 1.14;
  font-weight: 400;
  letter-spacing: 0.01em;
  margin: 0;
  max-width: 18ch;
}

h4,
.minor-title {
  font-family: var(--font-body);
  font-size: var(--fs-h4);
  line-height: 1.25;
  font-weight: 500;
  margin: 0;
  max-width: var(--text-max-narrow);
}

/* ── Overlines / Labels / Meta ───────────── */

.overline,
.label,
.meta,
.section-kicker,
.eyebrow,
nav a,
.button-label {
  font-family: var(--font-ui);
  font-size: var(--fs-ui);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  line-height: 1.2;
}

.overline,
.label,
.section-kicker,
.eyebrow {
  display: inline-block;
  margin-bottom: var(--space-overline-to-heading);
  opacity: 0.88;
}

/* ── Navigation ──────────────────────────── */

nav,
.site-nav,
.site-nav a {
  font-family: var(--font-ui);
  font-size: var(--fs-ui);
  font-weight: 500;
  letter-spacing: var(--ls-ui);
  text-transform: uppercase;
}

/* ── Buttons ─────────────────────────────── */

button,
.button,
.btn,
input[type="submit"],
input[type="button"] {
  font-family: var(--font-ui);
  font-size: var(--fs-button);
  font-weight: 600;
  letter-spacing: var(--ls-button);
  text-transform: uppercase;
  line-height: 1;
}

/* ── Hero Composition ────────────────────── */

.hero-copy,
.section-copy,
.text-column {
  max-width: var(--text-max-narrow);
}

.hero-copy .overline + h1,
.hero-copy .eyebrow + h1 {
  margin-top: 0;
}

.hero-copy h1 + p,
.hero-copy .hero-subline {
  margin-top: var(--space-heading-to-text);
  max-width: 28rem;
}

.hero-subline,
.intro-text,
.lead {
  font-family: var(--font-body);
  font-size: clamp(1.15rem, 1.45vw, 1.55rem);
  line-height: var(--lh-body-loose);
  max-width: var(--text-max-narrow);
}

/* ── Section Rhythm ──────────────────────── */

.section-header > .overline,
.section-header > .eyebrow,
.section-header > .label {
  margin-bottom: var(--space-overline-to-heading);
}

.section-header > h2,
.section-header > .section-title {
  margin-bottom: var(--space-heading-to-text);
}

.stack > * + * {
  margin-top: var(--space-section-stack);
}

.text-flow > * + * {
  margin-top: 0.2rem;
}

.text-flow p + p {
  margin-top: var(--space-paragraph);
}

/* ── Poetic / Parabel Text ───────────────── */

.poetic,
.poetic p,
.parable,
.parable p {
  max-width: var(--text-max-poetic);
  line-height: var(--lh-body-loose);
}

/* ── Aceserif Accent (sparsam) ───────────── */

.accent-mark,
.brand-echo,
.signature-line,
.accent-text {
  font-family: var(--font-accent);
  font-weight: 400;
  letter-spacing: 0.01em;
}

/* ── Utility ─────────────────────────────── */

.balance     { text-wrap: balance; }
.ui-text     { font-family: var(--font-ui); }
.body-text   { font-family: var(--font-body); }
.display-text{ font-family: var(--font-display); }

/* ── Responsive ──────────────────────────── */

@media (max-width: 900px) {
  :root {
    --text-max:        38rem;
    --text-max-narrow: 30rem;
    --text-max-poetic: 28rem;
    --lh-body:         1.64;
    --lh-body-loose:   1.72;
  }

  h1, .hero-title   { max-width: 11ch; }
  h2, .section-title{ max-width: 15ch; }
}

@media (max-width: 640px) {
  :root {
    --fs-ui:    0.7rem;
    --fs-button: 0.74rem;
    --lh-body:  1.58;
    --lh-body-loose: 1.66;
    --space-overline-to-heading: 0.7rem;
    --space-heading-to-text:     1rem;
    --space-paragraph:           0.9rem;
  }

  p, li, blockquote,
  .hero-subline, .intro-text, .lead {
    max-width: 100%;
  }

  h1, .hero-title,
  h2, .section-title,
  h3, .subsection-title {
    text-wrap: pretty;
  }
}