/* ==========================================================
   EXPLORE NATURAL TUNNEL
   DESIGN SYSTEM — v1.2 | TYPOGRAPHY STANDARDIZED

   Headlines (H1–H6): Manrope, bold
   UI + Body: Inter
   Editorial accent (optional): Instrument Serif

   Prefix: ent-
   ========================================================== */

/* ==========================================================
   00. FONTS
   ========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');


/* ==========================================================
   01. DESIGN TOKENS
   ========================================================== */

:root {

  /* COLOR PALETTE */
  --ent-forest: #0f2f27;
  --ent-forest-dark: #09231d;
  --ent-forest-deep: #071c17;
  --ent-moss: #465139;
  --ent-stone: #aaa99f;
  --ent-sand: #e5ddcf;
  --ent-sky: #a9bbc2;
  --ent-rust: #bd7353;
  --ent-cream: #f5f1e8;
  --ent-cream-light: #faf8f3;
  --ent-white: #ffffff;
  --ent-ink: #102a24;
  --ent-charcoal: #282c29;
  --ent-muted: #626762;

  /* FUNCTIONAL COLORS */
  --ent-bg: var(--ent-cream-light);
  --ent-bg-alt: var(--ent-cream);
  --ent-text: var(--ent-charcoal);
  --ent-heading: var(--ent-forest-dark);
  --ent-accent: var(--ent-moss);
  --ent-border: rgba(15, 47, 39, 0.20);
  --ent-border-light: rgba(15, 47, 39, 0.10);
  --ent-overlay-light: rgba(7, 28, 23, 0.25);
  --ent-overlay-medium: rgba(7, 28, 23, 0.50);
  --ent-overlay-dark: rgba(7, 28, 23, 0.72);

  /* FONTS */
  --ent-font-heading:
    "Manrope", "Inter", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Arial, sans-serif;

  /* Keep legacy editorial styling intact in navigation/footer components. */
  --ent-font-display: "Instrument Serif", Georgia, "Times New Roman", serif;
  --ent-font-editorial: var(--ent-font-display);

  --ent-font-body:
    "Inter", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Arial, sans-serif;

  /* FONT WEIGHTS */
  --ent-weight-regular: 400;
  --ent-weight-medium: 500;
  --ent-weight-semibold: 600;
  --ent-weight-bold: 700;
  --ent-weight-heading: 800;

  /* TYPE SCALE */
  --ent-text-xs: 0.72rem;
  --ent-text-sm: 0.82rem;
--ent-text-base: 1.1875rem; /* 19px */
--ent-text-lg: 1.15rem;
  --ent-text-xl: 1.35rem;

  --ent-h6: 1rem;
  --ent-h5: 1.25rem;
  --ent-h4: clamp(1.5rem, 2vw, 1.9rem);
  --ent-h3: clamp(2rem, 3vw, 2.75rem);
  --ent-h2: clamp(2.75rem, 5vw, 4.5rem);
  --ent-h1: clamp(4rem, 6vw, 6.5rem);

  /* LINE HEIGHT */
  --ent-leading-tight: 0.98;
  --ent-leading-heading: 1.02;
  --ent-leading-body: 1.6;
  --ent-leading-loose: 1.8;

  /* LETTER SPACING */
  --ent-tracking-tight: -0.025em;
  --ent-tracking-heading: -0.045em;
  --ent-tracking-normal: 0;
  --ent-tracking-wide: 0.08em;
  --ent-tracking-label: 0.16em;

  /* SPACING SCALE */
  --ent-space-1: 0.25rem;
  --ent-space-2: 0.5rem;
  --ent-space-3: 0.75rem;
  --ent-space-4: 1rem;
  --ent-space-5: 1.5rem;
  --ent-space-6: 2rem;
  --ent-space-7: 3rem;
  --ent-space-8: 4rem;
  --ent-space-9: 6rem;
  --ent-space-10: 8rem;

  /* LAYOUT */
  --ent-container: 1280px;
  --ent-container-wide: 1440px;
  --ent-container-narrow: 860px;
  --ent-gutter: clamp(20px, 4vw, 64px);

  /* BORDERS */
  --ent-radius-sm: 2px;
  --ent-radius-md: 4px;
  --ent-radius-lg: 8px;
  --ent-rule: 1px solid var(--ent-border);

  /* MOTION */
  --ent-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ent-speed-fast: 180ms;
  --ent-speed: 350ms;
  --ent-speed-slow: 700ms;
}


/* ==========================================================
   02. GLOBAL FOUNDATION
   ========================================================== */

html {
  box-sizing: border-box;
  scroll-behavior: smooth;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

body {
  margin: 0;
  font-family: var(--ent-font-body);
  font-size: var(--ent-text-base);
  font-weight: var(--ent-weight-regular);
  line-height: var(--ent-leading-body);
  color: var(--ent-text);
  background: var(--ent-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  max-width: 100%;
  height: auto;
}

button,
input,
textarea,
select {
  font: inherit;
}


/* ==========================================================
   03. GLOBAL HEADLINES — H1 THROUGH H6
   This is the default for hero titles AND section titles.
   No extra heading class is necessary in Gutenberg.
   ========================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0;
  font-family: var(--ent-font-heading);
  font-weight: var(--ent-weight-heading);
  line-height: var(--ent-leading-heading);
  letter-spacing: var(--ent-tracking-heading);
  color: var(--ent-heading);
}

h1 {
  font-size: var(--ent-h1);
  line-height: var(--ent-leading-tight);
}

h2 { font-size: var(--ent-h2); }
h3 { font-size: var(--ent-h3); }
h4 { font-size: var(--ent-h4); }
h5 { font-size: var(--ent-h5); }
h6 { font-size: var(--ent-h6); }

p {
  margin-top: 0;
  margin-bottom: var(--ent-space-4);
}

a { color: inherit; }

strong,
b { font-weight: var(--ent-weight-bold); }


/* ==========================================================
   04. REUSABLE TYPOGRAPHIC STYLES
   ========================================================== */

/* Oversized display text follows the headline system. */
.ent-display {
  margin: 0;
  font-family: var(--ent-font-heading);
  font-size: var(--ent-h1);
  font-weight: var(--ent-weight-heading);
  line-height: var(--ent-leading-tight);
  letter-spacing: var(--ent-tracking-heading);
}

/* GLOBAL — EYEBROW (unchanged) */
.ent-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  margin: 0 0 20px !important;
  font-family: var(--ent-font-body);
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.4;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ent-forest);
}

.ent-eyebrow::before,
.ent-eyebrow::after {
  content: "";
  display: block;
  flex: 0 0 36px;
  width: 36px;
  height: 2px;
  margin: 0;
  background: var(--ent-rust);
}

/* Lead copy */
.ent-lead {
  font-family: var(--ent-font-body);
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  line-height: 1.6;
}

/* Optional serif accent — not the default for headlines */
.ent-editorial {
  font-family: var(--ent-font-editorial);
  font-size: clamp(1.75rem, 3vw, 2.75rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

/* Large statement — part of the same sans-serif headline system */
.ent-statement {
  font-family: var(--ent-font-heading);
  font-size: clamp(2.25rem, 4vw, 4rem);
  font-weight: var(--ent-weight-heading);
  line-height: 1;
  letter-spacing: var(--ent-tracking-heading);
}

/* Small supporting copy */
.ent-small {
  font-size: var(--ent-text-sm);
  line-height: 1.5;
}

/* Stay introductory copy — existing utility preserved */
.ent-stay-intro {
  max-width: 760px;
  font-size: 18px;
  line-height: 1.7;
}


/* ==========================================================
   05. RESPONSIVE HEADLINE SCALE
   ========================================================== */

@media (max-width: 767px) {
  :root {
    --ent-h1: clamp(42px, 10vw, 60px);
  }
}



/* ==========================================================
   SCROLL REVEAL ANIMATIONS
   ========================================================== */

@media (prefers-reduced-motion: no-preference) {

  .ent-reveal.ent-reveal-ready {
    opacity: 0;
    transform: translateY(20px);
    transition:
      opacity 700ms ease,
      transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .ent-reveal.ent-reveal-ready.is-visible {
    opacity: 1;
    transform: translateY(0);
  }

}