/* Montserrat (Google Fonts, OFL license, self-hosted) — approved sans-serif
   typeface for the site, filling the design system's "Gotham" text-style
   role (see --font-gotham in variables.css). */
@font-face {
  font-family: 'Montserrat';
  font-weight: 300;
  font-style: normal;
  src: url('../fonts/Montserrat-Light.woff2') format('woff2');
}
@font-face {
  font-family: 'Montserrat';
  font-weight: 350;
  font-style: normal;
  src: url('../fonts/Montserrat-Medium.woff2') format('woff2');
}
/* Didot: GFS Didot (OFL-licensed, self-hosted) is a faithful free match
   for the Regular cut. No Bold cut exists for GFS Didot — the browser
   synthesizes bold from this face when font-weight: 700 is requested.
   CLIENT INPUT NEEDED: replace with real licensed Didot-Regular.woff2 /
   Didot-Bold.woff2 if the client provides them. */
@font-face {
  font-family: 'Didot';
  font-weight: 400;
  font-style: normal;
  src: local('Didot'), url('../fonts/gfsdidot-regular.woff2') format('woff2');
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  /* Always reserve the scrollbar's width, so full-bleed (100%/100vw) elements
     are measured consistently whether or not the page is currently
     scrollable — avoids a 1-scrollbar-wide sliver appearing/disappearing
     on the right edge of full-width sections. */
  scrollbar-gutter: stable;
}

/* The header is fixed on top of every page (see header.css), so anchor
   scrolling needs an offset or the destination section lands partly hidden
   underneath it. */
[id] {
  scroll-margin-top: var(--header-height);
}

body {
  background: var(--dark);
  color: var(--white);
  font-family: var(--font-gotham);
  font-weight: var(--text-body-base-weight);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

ul,
ol {
  list-style: none;
}

/* Typography — named to match Figma text styles exactly */
.text-display-hero {
  font-family: var(--font-didot);
  font-weight: var(--text-display-hero-weight);
  font-size: var(--text-display-hero-size);
  line-height: var(--text-display-hero-line);
  overflow-wrap: break-word;
}

.text-heading-h2 {
  font-family: var(--font-didot);
  font-weight: var(--text-heading-h2-weight);
  font-size: var(--text-heading-h2-size);
  line-height: var(--text-heading-h2-line);
}

.text-heading-h4 {
  font-family: var(--font-didot);
  font-weight: var(--text-heading-h4-weight);
  font-size: var(--text-heading-h4-size);
  line-height: var(--text-heading-h4-line);
}

.text-heading-h3 {
  font-family: var(--font-gotham);
  font-weight: var(--text-heading-h3-weight);
  font-size: var(--text-heading-h3-size);
  line-height: var(--text-heading-h3-line);
}

.text-body-large {
  font-family: var(--font-gotham);
  font-weight: var(--text-body-large-weight);
  font-size: var(--text-body-large-size);
  line-height: var(--text-body-large-line);
  letter-spacing: var(--text-body-large-tracking);
}

.text-body-base {
  font-family: var(--font-gotham);
  font-weight: var(--text-body-base-weight);
  font-size: var(--text-body-base-size);
  line-height: var(--text-body-base-line);
}

.text-label-medium {
  font-family: var(--font-gotham);
  font-weight: var(--text-label-medium-weight);
  font-size: var(--text-label-medium-size);
  line-height: var(--text-label-medium-line);
}

.text-label-light {
  font-family: var(--font-gotham);
  font-weight: var(--text-label-light-weight);
  font-size: var(--text-label-light-size);
  line-height: var(--text-label-light-line);
}

.text-caption-small {
  font-family: var(--font-gotham);
  font-weight: var(--text-caption-small-weight);
  font-size: var(--text-caption-small-size);
  line-height: var(--text-caption-small-line);
}

.text-gold {
  color: var(--gold);
}

.text-fog-white {
  color: var(--fog-white);
}

.container {
  width: 100%;
  max-width: var(--page-max-width);
  margin-inline: auto;
  padding-inline: var(--page-gutter);
}

.section {
  width: 100%;
  background: var(--dark);
}