/*******************************************************************************
 * root.css
 * Sets the global settings for the page.
 ******************************************************************************/
html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  overflow-x: hidden; /* prevent accitendally creating horizontal scrollbar*/
  -webkit-text-stroke: 0.25px transparent; /* slightly crispier edges */
  background: var(--global-background-color);
}

.bold {
  font-weight: 700;
  opacity: 1;
}

:root {
  --global-background-color: rgb(10, 7, 7);
  --global-background-alternate-color: rgb(19, 16, 16);
  --global-background-alternate-color-reddish: hsl(12, 30%, 10%);
  --global-golden-color: rgb(255, 200, 100);
  --global-page-width: 96vw;

  /* Shared glow/highlight color (warm cream/gold) - use with rgba() */
  --glow-color: 255, 235, 200;
}

/* Outline (used only for debugging) */
/* *,
*::before,
*::after {
   outline: 3px solid rgba(0, 255, 0, 0.75); 
} */

/*******************************************************************************
 * Section
 ******************************************************************************/
.section {
  width: 100%;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-x: clip;
  max-width: 100%;
  z-index: 0;
}
/*******************************************************************************
 * Section Title
 ******************************************************************************/
.section-title,
.section-title-with-subtitle {
  margin-top: 8rem;
  margin-bottom: 4rem;

  font-family: "Cinzel", serif;
  font-weight: 100;
  letter-spacing: 0.2em;
  max-height: 5rem;
  font-size: clamp(1.5rem, 6vw, 2.5rem);

  max-height: none;
  text-align: center;

  --h: 40;
  --s: 70%;
  --l: 55%;
  opacity: 0.8;

  /* derived shades (using parameterized H, S, L) */
  --gold-dark-2: hsl(var(--h) var(--s) var(--l));
  --gold-dark-1: hsl(calc(var(--h) - 2) var(--s) calc(var(--l) - 8%));
  --gold-mid: hsl(calc(var(--h) - 2) var(--s) var(--l));
  --gold-light-1: hsl(calc(var(--h) - 2) var(--s) calc(var(--l) + 8%));
  --gold-light-2: hsl(calc(var(--h) - 2) var(--s) calc(var(--l) + 15%));

  /* gold plating gradient */
  background: linear-gradient(
    3deg,
    var(--gold-dark-1) 0%,
    var(--gold-mid) 20%,
    var(--gold-light-1) 35%,
    var(--gold-light-2) 45%,
    var(--gold-light-1) 55%,
    var(--gold-mid) 70%,
    var(--gold-dark-2) 100%
  );

  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: contrast(0.9) saturate(1.1);
}

.section-title-with-subtitle {
  margin-bottom: 0.5rem;
}

/*******************************************************************************
 * Subtitle
 ******************************************************************************/
.subheading,
.section-subtitle {
  font-family: "EB Garamond", serif;
  /* font-size: 1.2rem; */
  font-size: clamp(0.8rem, 1.4vw, 1.5rem);
  font-weight: 400;
  letter-spacing: 0.05em;
  color: hsla(45, 90%, 90%, 0.8);
  text-align: center;
}
.section-subtitle {
  margin-top: 0rem;
  margin-bottom: 4rem;
  font-size: clamp(1.1rem, 1.4vw, 1.5rem);
}

@media (max-width: 900px) {
  .section-subtitle {
    display: none;
  }
  .section-title-with-subtitle {
    margin-bottom: 3rem;
  }
}

/*******************************************************************************
 * Heading
 ******************************************************************************/
.heading {
  font-family: "Cinzel", serif;
  text-transform: uppercase;
  font-weight: 100;
  letter-spacing: 0.15em;
  font-size: clamp(1.2rem, 1.5vw, 1.5rem);
  align-self: center;

  --h: 40;
  --s: 70%;
  --l: 55%;
  opacity: 0.8;

  /* derived shades (using parameterized H, S, L) */
  --gold-dark-2: hsl(var(--h) var(--s) var(--l));
  --gold-dark-1: hsl(calc(var(--h) - 2) var(--s) calc(var(--l) - 8%));
  --gold-mid: hsl(calc(var(--h) - 2) var(--s) var(--l));
  --gold-light-1: hsl(calc(var(--h) - 2) var(--s) calc(var(--l) + 8%));
  --gold-light-2: hsl(calc(var(--h) - 2) var(--s) calc(var(--l) + 15%));

  /* gold plating gradient */
  background: linear-gradient(
    3deg,
    var(--gold-dark-1) 0%,
    var(--gold-mid) 20%,
    var(--gold-light-1) 35%,
    var(--gold-light-2) 45%,
    var(--gold-light-1) 55%,
    var(--gold-mid) 70%,
    var(--gold-dark-2) 100%
  );

  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: contrast(0.9) saturate(1);
}

/*******************************************************************************
 * Body
 ******************************************************************************/
.body-weak {
  font-family: "EB Garamond", serif;
  font-size: 1.3rem;
  font-weight: 200;
  color: hsla(45, 90%, 90%, 0.7);
}

/*******************************************************************************
 * Utils
 ******************************************************************************/
.fade-bottom-right {
  -webkit-mask-image:
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 1) 0%,
      rgba(0, 0, 0, 0.7) 40%,
      rgba(0, 0, 0, 0.2) 60%,
      rgba(0, 0, 0, 0) 90%,
      rgba(0, 0, 0, 0) 100%
    ),
    linear-gradient(
      to right,
      rgba(0, 0, 0, 1) 0%,
      rgba(0, 0, 0, 1) 80%,
      rgba(0, 0, 0, 0.2) 90%,
      rgba(0, 0, 0, 0) 100%
    );

  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  -webkit-mask-position: 0 0;
  -webkit-mask-composite: source-in; /* multiplies/intersects layers */

  mask-image:
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 1) 0%,
      rgba(0, 0, 0, 0.7) 40%,
      rgba(0, 0, 0, 0.2) 60%,
      rgba(0, 0, 0, 0) 90%,
      rgba(0, 0, 0, 0) 100%
    ),
    linear-gradient(
      to right,
      rgba(0, 0, 0, 1) 0%,
      rgba(0, 0, 0, 1) 80%,
      rgba(0, 0, 0, 0.2) 90%,
      rgba(0, 0, 0, 0) 100%
    );
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
  mask-position: 0 0;
  mask-composite: intersect; /* standard-ish equivalent */
}

.fade-bottom-left {
  -webkit-mask-image:
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 1) 0%,
      rgba(0, 0, 0, 0.7) 40%,
      rgba(0, 0, 0, 0.2) 60%,
      rgba(0, 0, 0, 0) 90%,
      rgba(0, 0, 0, 0) 100%
    ),
    linear-gradient(
      to left,
      rgba(0, 0, 0, 1) 0%,
      rgba(0, 0, 0, 1) 80%,
      rgba(0, 0, 0, 0.2) 90%,
      rgba(0, 0, 0, 0) 100%
    );

  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  -webkit-mask-position: 0 0;
  -webkit-mask-composite: source-in; /* multiplies/intersects layers */

  mask-image:
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 1) 0%,
      rgba(0, 0, 0, 0.7) 40%,
      rgba(0, 0, 0, 0.2) 60%,
      rgba(0, 0, 0, 0) 90%,
      rgba(0, 0, 0, 0) 100%
    ),
    linear-gradient(
      to left,
      rgba(0, 0, 0, 1) 0%,
      rgba(0, 0, 0, 1) 80%,
      rgba(0, 0, 0, 0.2) 90%,
      rgba(0, 0, 0, 0) 100%
    );
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
  mask-position: 0 0;
  mask-composite: intersect;
}