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

html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
}

main {
  display: block;
}

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}

pre {
  font-family: monospace, monospace;
  font-size: 1em;
}

a {
  background-color: transparent;
}

abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  text-decoration: underline dotted;
}

b,
strong {
  font-weight: bolder;
}

code,
kbd,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

small {
  font-size: 80%;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

img {
  border-style: none;
}

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}

button,
input {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

[type="button"],
[type="reset"],
[type="submit"],
button {
  -webkit-appearance: button;
  appearance: button;
}

[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner,
button::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring,
button:-moz-focusring {
  outline: 1px dotted ButtonText;
}

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

legend {
  box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal;
}

progress {
  vertical-align: baseline;
}

textarea {
  overflow: auto;
}

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box;
  padding: 0;
}

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

[type="search"] {
  -webkit-appearance: textfield;
  appearance: textfield;
  outline-offset: -2px;
}

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

details {
  display: block;
}

summary {
  display: list-item;
}

template {
  display: none;
}

[hidden] {
  display: none;
}


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

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

html {
  height: 100%;
  scrollbar-gutter: stable;
}

:has(:target),
html {
  scroll-behavior: smooth;
}

body {
  height: 100%;
  line-height: 1.5;
}

h1:not([class]) {
  margin-top: 4rem;
  margin-bottom: 2rem;
}

h2:not([class]) {
  margin-top: 3.5rem;
  margin-bottom: 1.75rem;
}

h3:not([class]) {
  margin-top: 3rem;
  margin-bottom: 1.5rem;
}

h4:not([class]) {
  margin-top: 2.5rem;
  margin-bottom: 1.25rem;
}

h5:not([class]) {
  margin-top: 2rem;
  margin-bottom: 1rem;
}

h6:not([class]) {
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
}

:where(h1, h2, h3, h4, h5, h6, p, ul, ol, dl):where([class]) {
  margin-block: 0;
}

:where(h1, h2, h3, h4, h5, h6, p, ul, ol, dl, blockquote, figure):where(:not([class])):first-child {
  margin-top: 0;
}

:where(h1, h2, h3, h4, h5, h6, p, ul, ol, dl, blockquote, figure):where(:not([class])):last-child {
  margin-bottom: 0;
}

:where(ul, ol):where([class]) {
  padding-left: 0;
}

:where(ul[class]) {
  list-style: none;
}

:where(dd[class]) {
  margin-left: 0;
}

:where(blockquote, figure):where([class]) {
  margin: 0;
}

:where(fieldset[class]) {
  margin-left: 0;
  padding: 0;
  border: none;
}

:where(address[class]) {
  font-style: normal;
}

p {
  --paragraphMarginBottom: 24px;
  margin-block: 0;
}

p:where(:not([class]):not(:last-child)) {
  margin-bottom: var(--paragraphMarginBottom);
}

img,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

button,
input,
select,
textarea {
  font: inherit;
}

a:where([class]) {
  display: inline-flex;
  text-decoration: none;
}

button,
label {
  cursor: pointer;
}

[fill] {
  fill: currentColor;
}

[stroke] {
  stroke: currentColor;
}

svg * {
  transition-property: fill, stroke;
}

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


/* ============================================================
   CSS VARIABLES
   ============================================================ */

@supports (height: 100svh) {
  :root {
    --full-height: calc(100svh - var(--header-height));
  }
}

:root {
  /* Colors */
  --color-cream: #FEFCF3;
  --color-dark: #181818;
  --color-espresso: #2A1A04;
  --color-teal: #1F9FB3;
  --color-teal-light: #D4ECF0;
  --color-gray: #F1F1F1;
  --color-beige: #FBF2DE;
  --color-gold: #D7BA90;
  --color-text: #2B2B2B;
  --color-muted: #6B6B6B;
  --color-ink: #261600;

  /* Typography */
  --font-family-accent: "Forum", serif;
  --font-family-base: "Montserrat", sans-serif;

  /* Transitions */
  --transition: ease 0.4s;
  --transition-duration: 0.4s;

  /* Layout */
  --width-base: 1440;
  --width-current: min(100vw, 1600px);
  --width-multiplier: calc(var(--width-current) / var(--width-base));
  --container-width: calc(1240 * var(--width-multiplier));
  --container-padding-x: calc(100 * var(--width-multiplier));
  --header-height: calc(116 * var(--width-multiplier));
  --full-height: calc(100vh - var(--header-height));
}

@media (width <= 768.98px) {
  :root {
    --width-base: 390;
    --container-padding-x: calc(20 * var(--width-multiplier));
    --header-height: calc(87 * var(--width-multiplier));
  }
}


/* ============================================================
   GLOBAL STYLES
   ============================================================ */

body {
  font-size: calc(16 * var(--width-multiplier));
  min-width: 20rem;
  color: var(--color-text);
  font-family: var(--font-family-base);
  background-color: var(--color-cream);
}

.page {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

main {
  flex-grow: 1;
}

a,
button,
input,
label,
select,
svg *,
textarea {
  transition-duration: var(--transition-duration);
}

a {
  color: inherit;
}

section {
  padding: calc(120 * var(--width-multiplier)) 0;
}

@media (width <= 768.98px) {
  section {
    padding: calc(64 * var(--width-multiplier)) 0;
  }
}


/* ============================================================
   LAYOUT
   ============================================================ */

.container {
  max-width: calc(var(--container-width) + var(--container-padding-x) * 2);
  margin-inline: auto;
  padding-inline: var(--container-padding-x);
}

.grid {
  --gridColumns: 1;
  display: grid;
  grid-template-columns: repeat(var(--gridColumns), 1fr);
  gap: 0.9375rem;
}

.grid--2  { --gridColumns: 2; }
.grid--3  { --gridColumns: 3; }
.grid--4  { --gridColumns: 4; }
.grid--5  { --gridColumns: 5; }
.grid--6  { --gridColumns: 6; }
.grid--7  { --gridColumns: 7; }
.grid--8  { --gridColumns: 8; }
.grid--9  { --gridColumns: 9; }
.grid--10 { --gridColumns: 10; }
.grid--11 { --gridColumns: 11; }
.grid--12 { --gridColumns: 12; }


/* ============================================================
   UTILITIES
   ============================================================ */

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  border: 0 !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(100%) !important;
}

@media (width > 1024.98px) {
  .visible-tablet {
    display: none !important;
  }
}

@media (width <= 1024.98px) {
  .hidden-tablet {
    display: none !important;
  }
}

@media (width <= 768.98px) {
  .hidden-mobile {
    display: none !important;
  }
}

@media (width > 768.98px) {
  .visible-mobile {
    display: none !important;
  }
}

.is-lock {
  overflow: hidden;
}


/* ============================================================
   COMPONENTS
   ============================================================ */

.modal {
  position: fixed;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.menu {
  display: none;
}


/* ============================================================
   ANIMATIONS
   ============================================================ */

@media (prefers-reduced-motion: no-preference) {
  html:not(.no-js) [data-reveal],
  html:not(.no-js) [data-reveal-group] > * {
    opacity: 0;
    transform: translateY(40px);
  }
}