@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@400;500;600;700&display=swap");

/* ==============================
   GLOBAL VARIABLES
============================== */

:root {
  --navy: #0b1730;
  --navy-light: #122443;

  --gold: #c8a45d;
  --gold-light: #e4c98b;

  --white: #ffffff;
  --cream: #f8f6f1;

  --text-dark: #17243a;
  --text-light: #aeb9cc;
}

/* ==============================
   RESET
============================== */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
}

body {
  font-family: "DM Sans", sans-serif;
  background: var(--white);
  color: var(--text-dark);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

button,
input,
textarea {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  cursor: pointer;
}

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

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

/* ==============================
   COMMON CONTAINER
============================== */

.container {
  width: min(1200px, calc(100% - 80px));
  margin-inline: auto;
}

/* ==============================
   COMMON SECTION STYLING
============================== */

.section-label {
  display: inline-flex;
  align-items: center;
  gap: 12px;

  color: var(--gold);

  font-size: 11px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
}

.section-label::before {
  content: "";

  width: 30px;
  height: 1px;

  background: currentColor;
}

.section-title {
  font-family: "Playfair Display", serif;
  font-size: clamp(34px, 4vw, 52px);
  font-weight: 500;
  line-height: 1.2;
}

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

/* ==============================
   SELECTION
============================== */

::selection {
  background: var(--gold);
  color: var(--navy);
}

/* ==============================
   RESPONSIVE
============================== */

@media (max-width: 768px) {
  .container {
    width: calc(100% - 40px);
  }

  .section-title {
    font-size: 34px;
  }
}

/* ==============================
   ACCESSIBILITY
============================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}