/* ==========================================================================
   Prestige Meadows · design tokens, fonts, reset
   ========================================================================== */

/* Fonts are self-hosted (SIL OFL 1.1, licences alongside the files). */
@font-face {
  font-family: "Bodoni Moda";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("../fonts/bodoni-moda-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Bodoni Moda";
  font-style: italic;
  font-weight: 400 900;
  font-display: swap;
  src: url("../fonts/bodoni-moda-latin-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/hanken-grotesk-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext carries the rupee sign */
@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/hanken-grotesk-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* palette */
  --ink: #0d0f0e;
  --ink-2: #131615;
  --ink-3: #1a1d1b;
  --ink-4: #272b28;
  --forest: #16201a;
  --forest-2: #1e2b23;
  --forest-3: #2c3c31;
  --champagne: #cdbfa5;
  --champagne-2: #e1d7c4;
  --stone: #d6d2c9;
  --stone-2: #bcb7ab;
  --paper: #f0efea;
  --paper-2: #e6e4dd;
  --bronze: #6a614d;

  --on-dark: #ebe8e0;
  --on-dark-soft: #aeaaa0;
  --on-dark-faint: #8b887f;
  --on-paper: #161816;
  --on-paper-soft: #4f4d47;
  --on-paper-faint: #6d6a62;

  /* type */
  --serif: "Bodoni Moda", "Didot", "Bodoni 72", "Bodoni MT", Georgia, serif;
  --sans: "Hanken Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --fs-hero: clamp(3.6rem, 9.6vw, 9.75rem);
  --fs-display: clamp(2.5rem, 6vw, 6rem);
  --fs-display-md: clamp(2.2rem, 4.5vw, 4.4rem);
  --fs-h3: clamp(1.5rem, 2.1vw, 2rem);
  --fs-figure: clamp(2.3rem, 4.1vw, 4.1rem);
  --fs-lead: clamp(1.14rem, 1.45vw, 1.42rem);
  --fs-body: 1.0625rem;
  --fs-small: 0.9rem;
  --fs-micro: 0.72rem;
  --opsz-display: 42;
  --opsz-figure: 36;

  /* layout */
  --gutter: clamp(1.25rem, 4.4vw, 4.75rem);
  --max: 92.5rem;
  --col-gap: clamp(1rem, 2vw, 2rem);
  --sec-pad: clamp(5.5rem, 11.5vw, 11.5rem);
  --header-h: 4.5rem;

  /* motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-cine: cubic-bezier(0.7, 0, 0.18, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);

  /* z-index scale */
  --z-media: 0;
  --z-content: 2;
  --z-bar: 40;
  --z-menu: 45; /* sits under the header so the toggle stays reachable */
  --z-header: 50;
  --z-skip: 70;
}

/* reset ------------------------------------------------------------------ */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
  background: var(--ink);
  color-scheme: dark;
  scrollbar-gutter: stable; /* no sideways jump when the menu locks scrolling */
}
/* the open menu holds the page still */
html.is-menu-open { overflow: hidden; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.7;
  font-weight: 400;
  color: var(--on-dark);
  background: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

h1, h2, h3, h4, p, figure, blockquote, dl, dd, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
img, picture, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; border-radius: 0; }
em { font-style: italic; }
strong { font-weight: 600; }
small { font-size: inherit; }

:focus { outline: none; }
:focus-visible {
  outline: 1px solid var(--focus, var(--champagne));
  outline-offset: 4px;
}

::selection { background: var(--champagne); color: var(--ink); }

/* themes ----------------------------------------------------------------- */
.t-ink,
.t-forest {
  --fg: var(--on-dark);
  --fg-soft: var(--on-dark-soft);
  --fg-faint: var(--on-dark-faint);
  --line: rgba(235, 232, 224, 0.16);
  --line-strong: rgba(235, 232, 224, 0.42);
  --accent: var(--champagne);
  --focus: var(--champagne);
  color: var(--fg);
}
.t-ink { --bg: var(--ink); background: var(--bg); }
.t-forest { --bg: var(--forest); background: var(--bg); }

.t-paper,
.t-stone {
  --fg: var(--on-paper);
  --fg-soft: var(--on-paper-soft);
  --fg-faint: var(--on-paper-faint);
  --line: rgba(22, 24, 22, 0.16);
  --line-strong: rgba(22, 24, 22, 0.78);
  --accent: var(--bronze);
  --focus: var(--on-paper);
  color: var(--fg);
}
.t-paper { --bg: var(--paper); background: var(--bg); }
.t-stone { --bg: var(--paper-2); --fg-faint: #5f5c55; background: var(--bg); }

/* utilities -------------------------------------------------------------- */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: fixed;
  top: 0.75rem; left: 0.75rem;
  z-index: var(--z-skip);
  padding: 0.75rem 1.1rem;
  background: var(--champagne);
  color: var(--ink);
  font-size: var(--fs-small);
  font-weight: 500;
  transform: translateY(-200%);
}
.skip-link:focus-visible { transform: none; outline-color: var(--ink); outline-offset: -4px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}