:root {
  /* Colors */
  --summagia-black: #11130e;
  --summagia-olive: #202317;
  --summagia-cream: #eee7da;
  --summagia-paper: #e5dccb;
  --summagia-gold: #c99a35;
  --summagia-gold-light: #dfbc68;
  --summagia-muted: #9b9588;

  /* Fonts */
  --font-display: "Cormorant Garamond", serif;
  --font-ui: "Montserrat", sans-serif;

  /* Type roles */
  --type-headline: 600;
  --type-subheading: 300;
  --type-body: 500;
  --type-ui: 500;

  --tracking-ui: 0.04em;
}


/* Display */
.summagia-headline,
h1,
h2 {
  font-family: var(--font-display);
  font-weight: var(--type-headline);
}


/* Editorial / supporting */
.summagia-subheading,
.summagia-subtext,
h3 {
  font-family: var(--font-display);
  font-weight: var(--type-subheading);
}

/* Body */
body,
p,
.summagia-body {
  font-family: var(--font-display);
  font-weight: var(--type-body);
}


/* Interface */
.summagia-nav,
.summagia-button,
.summagia-eyebrow,
.summagia-ui {
  font-family: var(--font-ui) !important;
  font-weight: var(--type-ui);
  letter-spacing: var(--tracking-ui);
  text-transform: uppercase;
}

.summagia-button {
  display: inline-flex !important;
  align-items: center;
  gap: 0.5em;
  padding: 0.9em 1.8em !important;
  border: 1px solid var(--color-accent) !important;
  background: transparent !important;
  color: var(--color-text) !important;
  font-family: var(--font-ui) !important;
  font-weight: var(--type-ui);
  letter-spacing: var(--tracking-ui);
  text-transform: uppercase;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: color 0.5s cubic-bezier(.16,1,.3,1);
}

.summagia-button::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-accent) !important;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s cubic-bezier(.16,1,.3,1);
  z-index: -1;
}

.summagia-button:hover::before {
  transform: scaleX(1);
}

.summagia-button:hover {
  color: var(--color-bg) !important;
}
.summagia-card {
  background: var(--summagia-olive) !important;
  border: 1px solid rgba(201, 154, 53, 0.2) !important;
  border-radius: 2px;
  padding: 2.5em 2em;

  transition:
    transform 0.5s cubic-bezier(.16, 1, .3, 1),
    border-color 0.5s cubic-bezier(.16, 1, .3, 1),
    box-shadow 0.5s cubic-bezier(.16, 1, .3, 1);

  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.summagia-card:hover {
  transform: translateY(-6px);
  border-color: var(--summagia-gold) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
}

.summagia-card h3,
.summagia-card .summagia-headline {
  color: var(--summagia-gold) !important;
}

.summagia-card p {
  color: var(--summagia-cream) !important;
}

.summagia-section {
  padding-top: clamp(4rem, 8vw, 8rem) !important;
  padding-bottom: clamp(4rem, 8vw, 8rem) !important;
  padding-left: 2rem !important;
  padding-right: 2rem !important;
  max-width: 1280px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: overlay;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}