/* ============================================================
   NUMA MIRA — Website iteration 1
   Tokens: build-brief palette (warm ink / bone / amber) + brand fonts.
   ============================================================ */

/* ---------- FONTS ---------- */
@font-face {
  font-family: "Suisse Intl";
  src: url("fonts/SuisseIntl-Light.ttf") format("truetype");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Suisse Intl";
  src: url("fonts/SuisseIntl-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Suisse Intl";
  src: url("fonts/SuisseIntl-Medium.ttf") format("truetype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Suisse Intl";
  src: url("fonts/SuisseIntl-SemiBold.ttf") format("truetype");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Neue Regrade";
  src: url("fonts/NeueRegrade-Variable.ttf") format("truetype-variations"),
       url("fonts/NeueRegrade-Variable.ttf") format("truetype");
  font-weight: 300 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Neue Regrade";
  src: url("fonts/NeueRegrade-Light.otf") format("opentype");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Neue Regrade";
  src: url("fonts/NeueRegrade-LightItalic.otf") format("opentype");
  font-weight: 300; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Neue Regrade";
  src: url("fonts/NeueRegrade-SemiBoldItalic.otf") format("opentype");
  font-weight: 600; font-style: italic; font-display: swap;
}

/* ---------- TOKENS ---------- */
:root {
  /* palette */
  --ink:        #1A1815;
  --ink-deep:   #100E0C;
  --bone:       #F5F1EA;
  --bone-warm:  #EFE9DE;
  --paper:      #FBF9F4;
  --grey-warm:  #9B9389;
  --grey-soft:  #D8D2C8;
  --hairline:   #DAD3C7;
  --amber:      #C8841E;
  --amber-soft: #E8C892;
  --amber-deep: #A66A12;
  --coral:      #EB342C;   /* rare accent, reserved */
  --white:      #FFFFFF;

  /* semantic accent (Tweakable) */
  --accent:        var(--amber);
  --accent-deep:   var(--amber-deep);
  --accent-soft:   var(--amber-soft);
  --accent-ink:    var(--ink);

  /* text on dark */
  --on-dark:       #F0EBE2;
  --on-dark-soft:  #B7AE9F;

  /* fonts */
  --sans:    "Suisse Intl", system-ui, -apple-system, sans-serif;
  --display: "Neue Regrade", "Suisse Intl", Georgia, serif;

  /* fluid type scale (brief) */
  --step--1: clamp(0.83rem, 0.8rem + 0.2vw, 0.95rem);
  --step-0:  clamp(1rem, 0.95rem + 0.3vw, 1.12rem);
  --step-1:  clamp(1.3rem, 1.18rem + 0.6vw, 1.6rem);
  --step-2:  clamp(1.7rem, 1.45rem + 1.2vw, 2.4rem);
  --step-3:  clamp(2.3rem, 1.85rem + 2.2vw, 3.6rem);
  --step-4:  clamp(3rem, 2.2rem + 3.8vw, 5.6rem);
  --step-5:  clamp(3.6rem, 2.4rem + 5.6vw, 7.6rem);

  /* spacing */
  --s-1: 8px;  --s-2: 16px; --s-3: 24px; --s-4: 40px;
  --s-5: 64px; --s-6: 104px; --s-7: 168px;

  --gutter: clamp(24px, 5vw, 64px);
  --maxw: 1440px;

  /* motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --d-fast: 240ms;
  --d-base: 480ms;
  --d-slow: 900ms;
}

/* ---------- RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bone);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  font-size: var(--step-0);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img { display: block; max-width: 100%; user-select: none; -webkit-user-drag: none; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3, h4, p { margin: 0; }
::selection { background: var(--amber-soft); color: var(--ink); }

/* ---------- TYPE HELPERS ---------- */
.t-display {
  font-family: var(--display);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.t-serif-italic { font-family: var(--display); font-style: italic; font-weight: 400; }
.t-eyebrow {
  font-family: var(--sans);
  font-weight: 500;
  font-size: var(--step--1);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--grey-warm);
}
.t-lead {
  font-family: var(--sans);
  font-weight: 300;
  font-size: var(--step-1);
  line-height: 1.45;
  text-wrap: pretty;
}
.t-body { font-weight: 300; line-height: 1.65; text-wrap: pretty; color: var(--ink); }
.t-muted { color: var(--grey-warm); }
.num {
  font-family: var(--sans);
  font-weight: 300;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

/* ---------- LAYOUT ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter); }
.wrap-narrow { max-width: 920px; }

/* hairline divider */
.rule { height: 0; border: 0; border-top: 0.5px solid var(--hairline); margin: 0; }

/* reveal-on-scroll */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity 760ms var(--ease), transform 760ms var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: 110ms; }
.reveal.d2 { transition-delay: 220ms; }
.reveal.d3 { transition-delay: 330ms; }

/* image clip + scale reveal (Studio Dado-style wipe-open) */
.m-reveal { clip-path: inset(7% 6% 7% 6% round 4px); opacity: 0; transition: clip-path 1100ms var(--ease), opacity 900ms var(--ease); }
.m-reveal.in { clip-path: inset(0% 0% 0% 0% round 4px); opacity: 1; }

/* cover-parallax frame: the image is oversized so it can drift inside its frame */
[data-parallax] { overflow: hidden; }
[data-parallax] > img, [data-parallax] .px { will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .m-reveal { opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important; }
  [data-parallax] > img, [data-parallax] .px { transform: none !important; }
  * { scroll-behavior: auto !important; }
}