/* m4 · variables.css — design tokens + the .m4 unit (--m4r) + live-site type mapping (Mark4 project heroes, scoped under .m4) */

/* ============================================================
   MARK4 PROJECT HEROES — scoped under .m4 (unit: --m4r = the prototype's rem)
   ============================================================ */
:root { --vh: 1vh; }                 /* core/scroll.js replaces this with the real viewport unit */
.m4 { --m4r: 2.6667vw; }
/* desktop: 10px at 1920 and keeps growing with the screen (20px on a 4K TV) so type, buttons and
   wordmarks stay in proportion; the floor keeps tablets readable */
@media (min-width: 768px) { .m4 { --m4r: max(0.520833vw, 7.2px); } }

/* ============================================================
   0. ROOT SCALE (10px @375 mobile, 10px @1920 desktop, rem everywhere)
   ============================================================ */
.m4 {
  /* Shree Buildcon — Warm Ivory x Navy, lifted from shreebuildcon.com */
  --ink: #1A2332;
  --bg: #F8F4E9;
  --bg-soft: #F3EDE0;
  --muted: rgba(26, 35, 50, 0.52);
  --ink-70: rgba(26, 35, 50, 0.68);
  --ink-50: rgba(26, 35, 50, 0.52);
  --line: rgba(22, 58, 95, 0.14);
  --navy: #163A5F;
  --bronze: #A9793B;
  --bronze-lt: #CBA268;
  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-ui: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}


/* ---- type: follow the live index (Aboreto display, DM Sans text) ---- */
.m4 {
  --font-display: 'Aboreto', 'Cormorant Garamond', serif;
  --font: 'DM Sans', 'Inter', system-ui, sans-serif;
  --font-ui: 'DM Sans', 'Manrope', system-ui, sans-serif;
}

/* Aboreto runs wide and caps-only: hero titles sized like the live hero.
   (selectors carry the .m4-hero__content hop so they outrank the structural sizes in layout.css) */
.m4 .m4-hero__content .m4-hero__title h1,
.m4 .m4-hero__content .m4-hero__title h2,
.m4 .m4-hero--tight .m4-hero__content .m4-hero__title h1,
.m4 .m4-hero--tight .m4-hero__content .m4-hero__title h2 {
  font-family: var(--font-display) !important;
  font-size: clamp(24px, 6.8vw, 36px);
  font-weight: 400 !important;
  letter-spacing: 0.02em !important;
  line-height: 1.14 !important;
}

@media (min-width: 768px) {
  .m4 .m4-hero__content .m4-hero__title h1,
  .m4 .m4-hero__content .m4-hero__title h2,
  .m4 .m4-hero--tight .m4-hero__content .m4-hero__title h1,
  .m4 .m4-hero--tight .m4-hero__content .m4-hero__title h2 {
    font-size: max(30px, calc(6 * var(--m4r)));      /* 60px at 1920, 120px on a 4K TV */
  }
}

.m4 .m4-why__label h2 {
  font-family: var(--font-display) !important;
  font-size: max(12px, calc(1.4 * var(--m4r)));
}

/* every hero title at the large size */
.m4 .m4-hero__content .m4-hero__title h1,
.m4 .m4-hero__content .m4-hero__title h2 {
  font-size: clamp(32px, 9vw, 48px) !important;
  line-height: 1.1 !important;
}
@media (min-width: 768px) {
  .m4 .m4-hero__content .m4-hero__title h1,
  .m4 .m4-hero__content .m4-hero__title h2 {
    font-size: max(44px, calc(9 * var(--m4r))) !important;   /* 90px at 1920, 180px on a 4K TV */
  }
}