:root {
  --color-punga: #573c17;
  --color-yellowmetal: #82643c;
  --color-bisonhide: #c3b5a3;
  --color-springwood: #f2ede6;
  --color-white: #ffffff;
  --color-black: #000000;
  --color-bigstone: #172240;
  --color-hokeypokey: #d5a029;

  --theme-text-color-primary: var(--color-punga);
  --theme-text-color-secondary: var(--color-yellowmetal);
  --theme-text-color-teritary: var(--color-bisonhide);
  --theme-text-color-quaternary: var(--color-springwood);
  --theme-text-color-quinary: var(--color-hokeypokey);
  --theme-text-color-button-primary: var(--theme-text-color-quaternary);
  --theme-text-color-button-secondary: var(--theme-text-color-primary);

  --theme-background-color-primary: var(--color-springwood);
  --theme-background-color-secondary: var(--color-white);
  --theme-background-color-quaternary: var(--color-punga);
  --theme-background-color-quinary: var(--color-bigstone);
  --theme-background-color-button-primary: var(--theme-background-color-quaternary);
  --theme-background-color-button-secondary: var(--theme-background-color-primary);

  --theme-box-shadow-color-primary: var(--color-bisonhide);
  --theme-box-shadow-color-secondary: var(--color-black);
  --theme-box-shadow-blur-primary: 2.93vw;
  --theme-box-shadow-inset-primary: 0.73vw;

  --theme-backdrop-filter-blur-primary: 1.88rem;

  --theme-font-family-fallback: system-ui, sans-serif;
  --theme-font-family-primary: 'Montserrat', var(--theme-font-family-fallback, sans-serif), sans-serif;

  --theme-font-size-primary: max(1.25rem, 0.88vw + 0.5rem);
  --theme-font-size-secondary: max(1rem, 0.23vw + 0.8rem);
  --theme-font-size-tertiary: max(0.88rem, 0.1vw + 0.79rem);
  --theme-font-size-header-1: max(3.75rem, 3.2vw + 1rem);
  --theme-font-size-header-3: max(2.5rem, 1.757vw + 1rem);
  --theme-font-size-header-4: max(1.75rem, 1.18vw + 0.75rem);
  --theme-font-size-header-5: max(1.5rem, 1.17vw + 0.5rem);
  --theme-font-size-header-6: var(--theme-font-size-primary);
  --theme-font-size-button-primary: var(--theme-font-size-secondary);
  --theme-font-size-button-icon-primary: max(1.5rem, var(--theme-font-size-primary) * 1.2);

  --theme-font-weight-primary: 300;
  --theme-font-weight-secondary: 500;
  --theme-font-weight-header-1: 900;
  --theme-font-weight-header-3: 700;
  --theme-font-weight-header-4: 600;
  --theme-font-weight-header-5: var(--theme-font-weight-secondary);
  --theme-font-weight-header-6: var(--theme-font-weight-secondary);
  --theme-font-weight-button-primary: var(--theme-font-weight-secondary);

  --theme-font-style-primary: normal;
  --theme-line-height-primary: 1.5;
  --theme-line-height-secondary: 1.2;

  --theme-transition-timing-function-primary: ease;
  --theme-transition-duration-hover-primary: 0.2s;
  --theme-transition-duration-motion-primary: 0.5s;

  --theme-illustration-transform-rotate-y-primary: 8deg;

  --theme-page-spacing-block-primary: 8vh;
  --theme-page-spacing-inline-primary: 6vw;
  --theme-main-header-height: 100px;

  --transformation-perspective: 1000px;
}

@view-transition {
  navigation: auto;
}

html {
  scrollbar-gutter: stable;
  background-color: var(--theme-background-color-quinary);
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  font-family: var(--theme-font-family-primary, sans-serif), sans-serif;
  font-size: var(--theme-font-size-primary, 1.25rem);
  font-weight: var(--theme-font-weight-primary, 300);
  font-style: var(--theme-font-style-primary, normal);
  font-optical-sizing: auto;
  line-height: var(--theme-line-height-primary, 1.5);
  color: var(--theme-text-color-primary);
  background-color: var(--theme-background-color-primary);
}

:is(header, footer) {
  flex: 0 0 auto;
}

header {
  position: sticky;
  inset: 0 0 auto;
  z-index: 10;
  display: flex;
  height: var(--theme-main-header-height);
  padding-inline: var(--theme-page-spacing-inline-primary);
}

header::before,
header::after {
  content: '';
  position: absolute;
  inset: 0;
}

header::before {
  z-index: -1;
  background-color: var(--theme-background-color-primary);
  opacity: 0.7;
}

header::after {
  z-index: -2;
  -webkit-backdrop-filter: brightness(3) blur(var(--theme-backdrop-filter-blur-primary));
  backdrop-filter: brightness(3) blur(var(--theme-backdrop-filter-blur-primary));
}

.ghost-input {
  position: fixed;
  top: -100lvh;
  left: -100lvw;
  z-index: -9999;
  width: 0;
  height: 0;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}

header a.logo {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  margin-block: 1.25rem;
  margin-inline-end: var(--theme-page-spacing-inline-primary);
}

header a.logo img {
  max-height: 100%;
  transition: inherit;
}

header a.logo:hover img {
  transform: scale(1.05);
}

header nav {
  flex: 1 1 auto;
  display: flex;
  justify-content: space-between;
  transition: all var(--theme-transition-timing-function-primary) var(--theme-transition-duration-motion-primary);
}

header nav a {
  display: flex;
  align-items: center;
  padding-inline: 2em;
  font-size: var(--theme-font-size-tertiary);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--theme-text-color-teritary);
  color: color-mix(in srgb, var(--theme-text-color-secondary) 45%, transparent);
  text-shadow: 0 0 2.25em var(--theme-background-color-primary);
}

header nav a:is(.active, :hover, :focus-visible) {
  color: var(--theme-text-color-secondary);
}

header nav a.active:active {
  pointer-events: none;
}

/* 
header nav a:where(.home) {
  display: none;
}
*/

header nav a:is([disabled]) {
  display: none;
}

header label[for='header-input-checkbox-nav-switch'] {
  display: none;
}

:where(main) {
  flex: 1 1 auto;
  position: relative;
  z-index: 1;
  background: inherit;
  box-shadow: 0 0.5rem 1rem -0.5rem var(--theme-box-shadow-color-secondary);
}

h1 {
  font-size: var(--theme-font-size-header-1);
  font-weight: var(--theme-font-weight-header-1);
}

h3 {
  font-size: var(--theme-font-size-header-3);
  font-weight: var(--theme-font-weight-header-3);
}

h4 {
  font-size: var(--theme-font-size-header-4);
  font-weight: var(--theme-font-weight-header-4);
}

h5 {
  font-size: var(--theme-font-size-header-5);
  font-weight: var(--theme-font-weight-header-5);
}

h6 {
  font-size: var(--theme-font-size-header-6);
  font-weight: var(--theme-font-weight-header-6);
}

em {
  font-weight: var(--theme-font-weight-secondary);
}

figure {
  display: inline-flex;
}

figure img {
  max-width: 100%;
}

img {
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}

:where(a, .button) {
  transition: all var(--theme-transition-timing-function-primary) var(--theme-transition-duration-hover-primary);
  -webkit-tap-highlight-color: transparent;
}

:where(.button) {
  --default-a-button-opacity: 1;
  --default-a-button-transform-scale: 1;
  --default-a-button-icon-transform-scale: 1;

  display: inline-flex;
  align-items: center;
  border-radius: max(0.3rem, 0.2em);
  cursor: pointer;
  opacity: var(--default-a-button-opacity);
  transform: scale(var(--default-a-button-transform-scale));
  -webkit-user-select: none;
  user-select: none;
}

:where(.button:not([icon])) {
  font-size: var(--theme-font-size-button-primary);
  font-weight: var(--theme-font-weight-button-primary);
}

:where(.button:not(:where([icon], .text))) {
  text-transform: uppercase;
  padding-block: 0.6em;
  padding-inline: 2em;
}

:where(.button[icon]) {
  font-size: var(--theme-font-size-button-icon-primary);
  padding: 0.45em;
}

:where(.button[icon])::before {
  transform: scale(var(--default-a-button-icon-transform-scale));
  transition: inherit;
}

:where(.button:not([icon])):where(:hover, :focus-visible):not(:active) {
  --default-a-button-transform-scale: 1.05;
}

:where(.button[icon]):where(:hover, :focus-visible):not(:active) {
  --default-a-button-transform-scale: 1.1;
}

:where(.button[icon]):where(:hover, :focus-visible):not(:active)::before {
  --default-a-button-icon-transform-scale: 1.1;
}

:where(.button):active {
  --default-a-button-opacity: 0.7;
}

:where(.button.primary) {
  color: var(--theme-text-color-button-primary);
  background-color: var(--theme-background-color-button-primary);
}

:where(.button.secondary) {
  color: var(--theme-text-color-button-secondary);
  background-color: var(--theme-background-color-button-secondary);
}

p:where(:not(:last-of-type)) {
  margin-block-end: calc(var(--theme-line-height-secondary) * 1em);
}

footer {
  position: sticky;
  inset-block-end: 0;
  z-index: 0;
  display: flex;
  flex-direction: column;
  row-gap: 0.1em;
  font-size: var(--theme-font-size-tertiary);
  text-align: center;
  padding: 1.6em;
  color: var(--theme-text-color-quaternary);
  background-color: var(--theme-background-color-quinary);
}

footer p {
  --theme-line-height-secondary: 0;

  display: flex;
  justify-content: center;
}

footer p small:not(:last-of-type)::after {
  content: '|';
  color: var(--theme-text-color-secondary);
  margin-inline: 0.2em;
}

footer p small a {
  font-weight: 500;
  color: var(--theme-text-color-quinary);
}

footer p small a:is(:hover, :focus-visible) {
  text-decoration: underline;
}

section.page-section {
  display: flex;
}

section.page-section.header {
  padding-block: var(--theme-page-spacing-block-primary);
  padding-inline: var(--theme-page-spacing-inline-primary);
}

section.page-section:is(.our-lead, .contact) {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding-block: calc(var(--theme-page-spacing-block-primary) * 2);
  padding-inline: var(--theme-page-spacing-inline-primary);
}

section.page-section.our-lead {
  color: var(--theme-text-color-quaternary);
  background-color: var(--theme-background-color-quaternary);
  background-image: url(../media/images/pexels-fauxels-3184306.jpg);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-blend-mode: multiply;
  margin-block-start: calc(var(--theme-page-spacing-block-primary) * 2);
}

section.page-section:is(.our-lead, .contact) h3 {
  margin-block-end: 0.6em;
}

section.page-section:is(.our-lead, .contact) p {
  padding-inline: var(--theme-page-spacing-inline-primary);
}

a[disabled], a[disabled]:active {
  pointer-events: none;
}

@media (max-width: 992px) {
  :root {
    --theme-font-size-primary: 1rem;
    --theme-font-size-secondary: 0.88rem;
    --theme-font-size-tertiary: 0.75rem;
    --theme-font-size-header-1: 2.75rem;
    --theme-font-size-header-3: 1.75rem;
    --theme-font-size-header-4: 1.25rem;

    --theme-page-spacing-block-primary: 5vh;
    --theme-main-header-height: 80px;
  }

  header {
    justify-content: flex-end;
    padding-inline-end: 0;
  }

  header a.logo {
    margin-inline-end: auto;
  }

  header nav a.home {
    display: flex;
  }

  header #header-input-checkbox-nav-switch:not(:checked)~nav {
    justify-content: flex-start;
  }

  header #header-input-checkbox-nav-switch:not(:checked)~nav a:not(.active) {
    display: none;
  }

  body:has(header #header-input-checkbox-nav-switch:checked) {
    overflow: hidden;
  }

  header #header-input-checkbox-nav-switch:checked~nav {
    position: fixed;
    z-index: 10;
    inset: var(--theme-main-header-height) 0 0;
    padding-block-end: var(--theme-main-header-height);
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
  }

  header #header-input-checkbox-nav-switch:checked~nav::before,
  header #header-input-checkbox-nav-switch:checked~nav::after {
    content: '';
    position: absolute;
    inset: 0;
  }

  header #header-input-checkbox-nav-switch:checked~nav::before {
    z-index: -1;
    background-color: var(--theme-background-color-primary);
    opacity: 0.7;
  }

  header #header-input-checkbox-nav-switch:checked~nav::after {
    z-index: -2;
    -webkit-backdrop-filter: brightness(3) blur(var(--theme-backdrop-filter-blur-primary));
    backdrop-filter: brightness(3) blur(var(--theme-backdrop-filter-blur-primary));
  }

  header label[for='header-input-checkbox-nav-switch'] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--theme-main-header-height);
  }

  header label[for='header-input-checkbox-nav-switch'] icon-bars {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
    font-size: 1.34rem;
    width: 1em;
    height: 1em;
    padding-block: 0.11em;
    padding-inline: 0.06em;
    transform: none;
  }

  header label[for='header-input-checkbox-nav-switch'] icon-bars bar-stroke {
    --header-label-for-input-nav-switch-icon-bar-stroke-transform-translate-y: 0;
    --header-label-for-input-nav-switch-icon-bar-stroke-transform-rotate: 0;

    flex: 0 0 auto;
    display: block;
    height: 0.13em;
    border-radius: 0.1em;
    background-color: currentColor;
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
    transition: transform var(--theme-transition-timing-function-primary) var(--theme-transition-duration-motion-primary);
    transform: translateY(var(--header-label-for-input-nav-switch-icon-bar-stroke-transform-translate-y)) rotate(var(--header-label-for-input-nav-switch-icon-bar-stroke-transform-rotate));
  }

  header #header-input-checkbox-nav-switch:checked~label[for='header-input-checkbox-nav-switch'] icon-bars bar-stroke:first-child {
    --header-label-for-input-nav-switch-icon-bar-stroke-transform-translate-y: 0.32em;
    --header-label-for-input-nav-switch-icon-bar-stroke-transform-rotate: 45deg;
  }

  header #header-input-checkbox-nav-switch:checked~label[for='header-input-checkbox-nav-switch'] icon-bars bar-stroke:nth-child(2) {
    --header-label-for-input-nav-switch-icon-bar-stroke-transform-rotate: 135deg;

    opacity: 0;
  }

  header #header-input-checkbox-nav-switch:checked~label[for='header-input-checkbox-nav-switch'] icon-bars bar-stroke:last-child {
    --header-label-for-input-nav-switch-icon-bar-stroke-transform-translate-y: -0.32em;
    --header-label-for-input-nav-switch-icon-bar-stroke-transform-rotate: -45deg;
  }

  figure img {
    max-height: calc(75vh - var(--theme-main-header-height));
  }
}