/*! HTML5 Boilerplate v9.0.1 | MIT License | https://html5boilerplate.com/ */
/* main.css 3.0.0 | MIT License | https://github.com/h5bp/main.css#readme */

@font-face {
  font-family: "Perfectly Nineties";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("../fonts/PerfectlyNineties-Regular.woff") format("woff");
}

@font-face {
  font-family: "Perfectly Nineties";
  font-style: italic;
  font-weight: 400;
  font-display: block;
  src: url("../fonts/PerfectlyNineties-Italic.woff") format("woff");
}

@font-face {
  font-family: "MD UI";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("../fonts/MDUI-Regular.woff2") format("woff");
}

@font-face {
  font-family: "MD UI";
  font-style: italic;
  font-weight: 400;
  font-display: block;
  src: url("../fonts/MDUI-Italic.woff2") format("woff");
}

@font-face {
  font-family: "MD IO";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("../fonts/MDIO-Regular.woff2") format("woff");
}

@font-face {
  font-family: "MD IO";
  font-style: italic;
  font-weight: 400;
  font-display: block;
  src: url("../fonts/MDIO-Italic.woff2") format("woff");
}

/* =======================
 Base styles
 ======================= */

:root {
  color-scheme: light dark;
  background-color: light-dark(#F7F7F7, #121212);
  
  /* Primitive tokens: raw design values */
  --color-neutral-100: #F7F7F7;
  --color-neutral-200: #D4D4D4;
  --color-neutral-300: #B4B4B4;
  --color-neutral-400: #959595;
  --color-neutral-500: #777777;
  --color-neutral-600: #5B5B5B;
  --color-neutral-700: #3D3D3D;
  --color-neutral-800: #292929;
  --color-neutral-900: #121212;
  
  --color-orange-red-100: #FFE7CC;
  --color-orange-red-200: #FFC999;
  --color-orange-red-300: #FFA466;
  --color-orange-red-400: #FF803F;
  --color-orange-red-500: #FF4500;
  --color-orange-red-600: #DB2C00;
  --color-orange-red-700: #B71800;
  --color-orange-red-800: #930900;
  --color-orange-red-900: #7A0000;
  
  --color-orange-100: #FFF1CC;
  --color-orange-200: #FFDE99;
  --color-orange-300: #FFC766;
  --color-orange-400: #FFB13F;
  --color-orange-500: #FF8C00;
  --color-orange-600: #DB6E00;
  --color-orange-700: #B75400;
  --color-orange-800: #933D00;
  --color-orange-900: #7A2C00;
  
  --shadow-light: 0px 2px 8px rgba(0, 0, 0, 0.3), 0px 1px 4px rgba(0, 0, 0, 0.2);
  --shadow-dark: 0px 2px 8px rgba(0, 0, 0, 0.5), 0px 1px 4px rgba(0, 0, 0, 0.2);
  
  --gradient-stop-1-light: #f7f7f7;
  --gradient-stop-1-dark:  #121212;
  
  --gradient-stop-2-light: #f7f7f7;
  --gradient-stop-2-dark:  #121212;
  
  --gradient-stop-3-light: #f7f7f780;
  --gradient-stop-3-dark:  #12121280;
  
  --gradient-stop-4-light: #f7f7f700;
  --gradient-stop-4-dark:  #12121200;
  
  --text-h1: clamp(2.25rem, 1.9rem + 1.1vw, 3rem);
  --text-h2: clamp(1.875rem, 1.6rem + 0.9vw, 2.5rem);
  --text-h3: clamp(1.625rem, 1.4rem + 0.7vw, 2rem);
  --text-h4: clamp(1.375rem, 1.22rem + 0.45vw, 1.75rem);
  --text-h5: clamp(1.25rem, 1.15rem + 0.25vw, 1.5rem);
  --text-h6: clamp(1.125rem, 1.05rem + 0.25vw, 1.25rem);
  
  --round-interval: 2px;
  
  --text-body: clamp(1.125rem, 1.05rem + 0.25vw, 1.25rem);
  --text-small: 0.875rem;
  --text-button: clamp(1.25rem, 1.15rem + 0.25vw, 1.5rem);
  
  --line-tight: 1.1;
  --line-normal: 1.2;
  --line-relaxed: 1.4;
  --line-loose: 1.6;
  
  --spacing-1: 0.125rem;
  --spacing-2: 0.25rem;
  --spacing-3: 0.5rem;
  --spacing-4: 1rem;
  --spacing-5: 1.5rem;
  --spacing-6: 2rem;
  --spacing-7: 2.5rem;
  --spacing-8: 3rem;
  --spacing-9: 3.5rem;
  --spacing-10: 4rem;
  --spacing-11: 4.5rem;
  --spacing-12: 5rem;
  
  --border-width-sm: 1px;
  --border-width-md: 1.5px;
  
  --radius-xs: 0.25rem;
  --radius-sm: 0.5rem;
  --radius-md: 1rem;
  --radius-lg: 1.5rem;
  --radius-xl: 2rem;
  --radius-xxl: 2.5rem;
  

  /* Semantic tokens: contextual usage */
  --color-background: light-dark(var(--color-neutral-100), var(--color-neutral-900));
  
  --color-background-content-box: light-dark(var(--color-neutral-200), var(--color-neutral-800));
  
  --color-border-content-box-orange-red: color-mix(in srgb, var(--color-orange-red-800) 50%, transparent);
  --color-border-content-box-orange: color-mix(in srgb, var(--color-orange-800) 50%, transparent);
  --color-border-content-box-grey-light: color-mix(in srgb, var(--color-neutral-400) 25%, transparent);
  --color-border-content-box-grey-dark: color-mix(in srgb, var(--color-neutral-600) 25%, transparent);
  
  --color-primary: light-dark(var(--color-orange-red-600), var(--color-orange-red-500));
  --color-primary-hover: light-dark(var(--color-orange-red-500), var(--color-orange-500));
  --color-primary-active: light-dark(var(--color-orange-red-700), var(--color-orange-red-600));
  
  --color-secondary: light-dark(var(--color-neutral-700), var(--color-neutral-400));
  --color-secondary-hover: light-dark(var(--color-neutral-600), var(--color-neutral-300));
  --color-secondary-active: light-dark(var(--color-neutral-800), var(--color-neutral-500));
  
  --color-text-primary: light-dark(var(--color-neutral-900), var(--color-neutral-100));
  --color-text-secondary: light-dark(var(--color-neutral-700), var(--color-neutral-400));
  --color-text-primary-inverted: light-dark(var(--color-neutral-100), var(--color-neutral-900));
  --color-text-secondary-inverted: light-dark(var(--color-neutral-400), var(--color-neutral-700));
  
  --color-button-primary: var(--color-orange-red-500);
  --color-button-primary-hover: var(--color-orange-500);
  --color-button-primary-active: var(--color-orange-red-600);
  
  --color-button-secondary: light-dark(var(--color-neutral-200), var(--color-neutral-700));
  --color-button-secondary-hover: light-dark(var(--color-neutral-100), var(--color-neutral-600));
  --color-button-secondary-active: light-dark(var(--color-neutral-300), var(--color-neutral-800));
  
  --color-text-button-primary: var(--color-neutral-900);
  --color-text-button-primary-hover: var(--color-neutral-100);
  --color-text-button-primary-active: var(--color-neutral-900);
  
  --color-text-button-secondary: light-dark(var(--color-neutral-800), var(--color-neutral-200));
  --color-text-button-seconary-hover: light-dark(var(--color-neutral-900), var(--color-neutral-100));
  --color-text-button-seconary-active: light-dark(var(--color-neutral-900), var(--color-neutral-100));
  
  --shadow-box: var(--shadow-light);
  
  --shadow-button: inset 0px 1px 2px rgba(0, 0, 0, 0.16), inset 0px -1px 4px rgba(0, 0, 0, 0.28), var(--shadow-box);
  --shadow-button-active: inset 0px -1px 2px rgba(0, 0, 0, 0.16), inset 0px 1px 4px rgba(0, 0, 0, 0.28), var(--shadow-box);
  
  --border: #d8d8d8;
  --overlay: rgb(12 12 12 / 0.24);
  --panel: rgb(255 255 255 / 0.76);
  
}

*,
*::before,
*::after {
  box-sizing: border-box;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  -webkit-font-smoothing: antialiased;
}

html,
body {
  margin: 0;
  background: var(--color-background);
}

html {
  scroll-behavior: smooth;
}

body {
  color: var(--color-text-primary);
  font-family: "MD UI", Helvetica, sans;
  font-style: normal;
  font-weight: 400;
  font-size: 100%;
  line-height: var(--line-relaxed);
  letter-spacing: 0.025em;
  display: flex;
  flex-direction: column;
  min-height: 100vh; 
  min-height: 100dvh; /* better on modern mobile browsers */
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  scroll-margin-top: 132px;
  width: clamp(min(100%, 40ch), 50ch, min(100%, 60ch));
}

::-moz-selection {
  background: var(--color-orange-red-200);
  text-shadow: none;
}

::selection {
  background: var(--color-orange-red-200);
  text-shadow: none;
}

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: var(--border-width-sm) solid var(--color-neutral-500);
  margin: var(--spacing-4) 0;
  padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
  resize: vertical;
}

/* =======================
   Element styles
   ======================= */

.spacer {
  display: block;
  width: 100%;
  height: var(--spacing-2);
  flex-shrink: 0;
}

.spacer-sm {
  height: var(--spacing-3);
}

.spacer-lg {
  height: var(--spacing-4);
}

.spacer-xl {
  height: var(--spacing-5);
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Perfectly Nineties", Times, "Times New Roman", serif;
  font-style: normal;
  font-weight: 400;
  line-height: var(--line-normal);
  text-align: left;
  margin: var(--spacing-6) 0 var(--spacing-6) 0;
}

h1, .size-h1 {
  font-size: round(down, var(--text-h1), var(--round-interval));
}

h2, .size-h2 {
  font-size: round(down, var(--text-h2), var(--round-interval));
}

h3, .size-h3 {
  font-size: round(down, var(--text-h3), var(--round-interval));
}

h4, .size-h4 {
  font-size: round(down, var(--text-h4), var(--round-interval));
}

h5, .size-h5 {
  font-size: round(down, var(--text-h5), var(--round-interval));
}

h6, .size-h6 {
  font-size: round(down, var(--text-h6), var(--round-interval));
}

p, ul, ol, li {
  font-family: "MD UI", Helvetica, sans;
  font-style: normal;
  font-weight: 400;
  font-feature-settings: "ss01" 1, "ss02" 1;
  font-size: round(down, var(--text-body), var(--round-interval));
  line-height: var(--line-relaxed);
  margin: var(--spacing-3) 0 var(--spacing-6) 0;
  text-align: left;
}

a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 0.175rem;
  text-decoration-thickness: 0.075rem;
  transition: 0.2s;
}

a:hover {
  color: var(--color-primary-hover);
  text-decoration-thickness: 0.175rem;
}

a:visited {
  color: var(--color-primary);
  text-decoration-thickness: 0.175rem;
}

button, .button-primary, .button-secondary, .menu-button, .logo {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  font-family: "MD IO", monospace;
  font-style: normal;
  font-weight: 400;
  line-height: var(--line-normal);
  letter-spacing: 0.025rem;
  padding: 0.875rem 1rem;
  font-size: round(down, var(--text-button), var(--round-interval));
  border: none;
  border-radius: var(--radius-xxl);
  text-decoration: none;
  transition: transform 0.2s ease;
  cursor: pointer;
}

button, .button-primary, .logo {
  background: var(--color-button-primary);
  color: var(--color-text-button-primary);
  box-shadow: var(--shadow-button);
}

.button-secondary {
  background: var(--color-button-secondary);
  color: var(--color-text-button-secondary);
  box-shadow: var(--shadow-button);
}

.logo, .button-secondary {
  padding: 1rem;
  aspect-ratio: 1/1;
}

.logo svg {
  height: 2em;
  width: 2em;
  flex: none;
  display: block;
}

.logo svg path {
  fill: currentColor;
}

button:hover, .button-primary:hover, .button-secondary:hover, .logo:hover {
  text-decoration: none;
  transform: scale(1.05);
}

button:hover, .button-primary:hover, .logo:hover {
  background: var(--color-button-primary-hover);
  color: var(--color-text-button-primary);
}

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

button:active, .button-primary:active, .button-secondary:active, .logo:active {
  box-shadow: var(--shadow-button-active);
  text-decoration: none;
  transform: scale(1.05);
}

button:active, .button-primary:active, .logo:active {
  background: var(--color-button-primary-active);
  color: var(--color-text-button-primary-active);
}

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

button:visited, .button-primary:visited, .logo:visited {
  background: var(--color-button-primary);
  color: var(--color-text-button-primary);
  text-decoration: none;
}

.button-secondary:visited {
  background: var(--color-button-secondary);
  color: var(--color-text-button-secondary);
  text-decoration: none;
}

.button-primary span {
  margin-right: 0.3em;
}

/* =======================
 Layout styles
 ======================= */

/* Site header */

.site-header {
  display: flex;
  align-items: center;
  justify-content: center;
  position: sticky;
  top: 0;
  padding-top: max(1px, env(safe-area-inset-top));
  z-index: 100;
  background-image: linear-gradient(
    180deg,
    light-dark(var(--gradient-stop-1-light), var(--gradient-stop-1-dark)) 0%,
    6%,
    light-dark(var(--gradient-stop-2-light), var(--gradient-stop-2-dark)) 12%,
    44%,
    light-dark(var(--gradient-stop-3-light), var(--gradient-stop-3-dark)) 60%,
    76%,
    light-dark(var(--gradient-stop-4-light), var(--gradient-stop-4-dark)) 100%
  );
}

.menu-bar {
  width: 900px;
  padding: var(--spacing-5) var(--spacing-6) var(--spacing-4) var(--spacing-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-4);
}

.menu-left, .menu-right {
  display: flex;
  align-items: stretch;
  gap: var(--spacing-4);
}

.desktop-nav {
  flex: 1 1 auto;
  display: flex;
  align-self: stretch;
  background: var(--color-button-secondary);
  border-radius: var(--radius-xxl);
  box-shadow: var(--shadow-button);
}

.desktop-nav ul {
  display: flex;
  align-items: stretch;
  width: 100%;
  margin: 0;
  padding: var(--spacing-2);
  list-style: none;
  gap: var(--spacing-2);
}

.desktop-nav li {
  flex: 1 1 0;
  display: flex;
  align-items: stretch;
  margin: 0;
  padding: 0;
  list-style: none;
}

.desktop-nav .menu-button {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  white-space: nowrap;
}

.menu-button {
  background: none;
  color: var(--color-text-button-secondary);
  transition: transform 0.2s ease;
}

.menu-button:hover, 
.desktop-nav a[aria-current="page"]:hover,
.mobile-menu a[aria-current="page"]:hover {
  background: var(--color-button-secondary-hover);
  color: var(--color-text-button-seconary-hover);
  text-decoration: none;
  transform: scale(1.03);
}

.menu-button:active, 
.desktop-nav a[aria-current="page"]:active,
.mobile-menu a[aria-current="page"]:active,
.desktop-nav a[aria-current="page"],
.mobile-menu a[aria-current="page"] {
  background: light-dark(var(--color-neutral-400), var(--color-neutral-800));
  color: var(--color-text-button-seconary-active);
}

.menu-button:active, 
.desktop-nav a[aria-current="page"]:active,
.mobile-menu a[aria-current="page"]:active {
  text-decoration: none;
}

.desktop-nav-secondary ul {
  display: flex;
  align-items: stretch;
  gap: var(--spacing-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.desktop-nav-secondary li {
  display: flex;
  margin: 0;
  padding: 0;
}

.desktop-nav-secondary svg {
  color: currentcolor;
  height: 1em;
  width: 1em;
  flex: none;
  display: block;
}

.menu-toggle {
  display: none;
  position: relative;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.menu-toggle.is-open {
  opacity: 0;
}

.menu-overlay {
  position: fixed;
  inset: 0;
  background: var(--overlay);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  z-index: 200;
}

.mobile-menu {
  position: fixed;
  inset: auto 1rem 1rem 1rem;
  width: auto;
  max-width: 24rem;
  margin-inline: auto;
  background: var(--panel);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgb(255 255 255 / 0.45);
  border-radius: 1rem;
  box-shadow: 0 20px 50px rgb(0 0 0 / 0.16);
  padding: 1rem;
  opacity: 0;
  transform: translateY(1rem) scale(0.98);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 300;
}

.mobile-menu__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.mobile-menu ul {
  display: grid;
  gap: 0.5rem;
}

.mobile-menu a {
  display: block;
  padding: 0.95rem 1rem;
  border-radius: 0.75rem;
  background: rgb(255 255 255 / 0.56);
}

/* .page-content {
  padding: 3rem 1.25rem;
} */

.menu-open .menu-overlay {
  opacity: 1;
  pointer-events: auto;
}

.menu-open .mobile-menu {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

@media (max-width: 579px) {
  .desktop-nav {
    display: none;
  }

  .menu-toggle {
    display: inline-block;
  }
}

@media (min-width: 580px) {
  .menu-overlay,
  .mobile-menu {
    display: none;
  }
}


/* Maint content */

main, footer {
  max-width: 900px;
  border: none;
  margin-left:auto;
  margin-right:auto;
  padding: 0 var(--spacing-6) var(--spacing-4) var(--spacing-6);
  display: flex;
  flex-direction: column;
  align-items: center;
  align-content: center;
  justify-items: stretch;
  justify-content: space-between;
  row-gap: var(--spacing-4);
}

main {
  flex: 1;
}

footer {
  margin-top: var(--spacing-3);
  padding-top: var(--spacing-4);
  padding-bottom: var(--spacing-7);
  padding-left: var(--spacing-5);
  padding-right: var(--spacing-5);
  font-family: "MD IO", monospace;
  font-style: normal;
  font-weight: 400;
  font-size: round(down, var(--text-small), var(--round-interval));
  line-height: var(--line-relaxed);
  color: var(--color-text-secondary);
}

footer a {
  color: var(--color-secondary);
}

footer a:hover {
  color: var(--color-secondary-hover);
}

footer a:visited {
  color: var(--color-secondary);
}

.align-left {
	align-items: left;
	align-content: left;
	padding-top: 1rem;
}

.content-box {
  width: 100%;
  background: var(--color-background-content-box);
  border-style: solid;
  border-radius: var(--radius-xxl);
  border-width: var(--border-width-sm);
  box-shadow: var(--shadow-box);
  row-gap: var(--spacing-7);
  padding: var(--spacing-6);
  color: var(--color-neutral-900);
  border-color: light-dark(var(--color-border-content-box-grey-light), var(--color-border-content-box-grey-dark));
}

.content-intro {
  background: var(--color-orange-red-500);
  border-color: var(--color-border-content-box-orange-red);
}

.content-text {
  background: var(--color-orange-500);
  border-color: var(--color-border-content-box-orange);
}

.placeholder {
  flex: 1;
  min-height: 120px;
  -webkit-mask-image: linear-gradient(
    to top,
    hsla(0, 0%, 6%, 0) 0%,
    hsla(0, 0%, 6%, 0.1) 13.6%,
    hsla(0, 0%, 6%, 0.199) 24.8%,
    hsla(0, 0%, 6%, 0.296) 33.8%,
    hsla(0, 0%, 6%, 0.391) 41%,
    hsla(0, 0%, 6%, 0.481) 46.8%,
    hsla(0, 0%, 6%, 0.568) 51.5%,
    hsla(0, 0%, 6%, 0.649) 55.4%,
    hsla(0, 0%, 6%, 0.724) 58.8%,
    hsla(0, 0%, 6%, 0.792) 62.2%,
    hsla(0, 0%, 6%, 0.852) 65.9%,
    hsla(0, 0%, 6%, 0.903) 70.1%,
    hsla(0, 0%, 6%, 0.944) 75.3%,
    hsla(0, 0%, 6%, 0.975) 81.8%,
    hsla(0, 0%, 6%, 0.993) 89.9%,
    hsl(0, 0%, 6%) 100%
  );
  mask-image: linear-gradient(
    to top,
    hsla(0, 0%, 6%, 0) 0%,
    hsla(0, 0%, 6%, 0.1) 13.6%,
    hsla(0, 0%, 6%, 0.199) 24.8%,
    hsla(0, 0%, 6%, 0.296) 33.8%,
    hsla(0, 0%, 6%, 0.391) 41%,
    hsla(0, 0%, 6%, 0.481) 46.8%,
    hsla(0, 0%, 6%, 0.568) 51.5%,
    hsla(0, 0%, 6%, 0.649) 55.4%,
    hsla(0, 0%, 6%, 0.724) 58.8%,
    hsla(0, 0%, 6%, 0.792) 62.2%,
    hsla(0, 0%, 6%, 0.852) 65.9%,
    hsla(0, 0%, 6%, 0.903) 70.1%,
    hsla(0, 0%, 6%, 0.944) 75.3%,
    hsla(0, 0%, 6%, 0.975) 81.8%,
    hsla(0, 0%, 6%, 0.993) 89.9%,
    hsl(0, 0%, 6%) 100%
  );
  
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.headline {
  line-height: var(--line-tight);
  margin: 0;
}

.text {
  width: clamp(min(100%, 40ch), 75%, 60ch);
  margin: 0;
}

.text a {
  color: var(--color-neutral-900);
}

.text a:hover {
  color: var(--color-neutral-800);
}

.text a:visited {
  color: var(--color-neutral-900);
}

/* Footer */

.footer-content {
  display: flex;
  flex-direction: row;
  column-gap: var(--spacing-5);
}

.footer-links {
  display: flex;
  flex-direction: row;
  column-gap: var(--spacing-4);
}

/* =======================
   Helper classes
   ======================= */

/*
 * Adding skipLink styling for screen readers
 */   

#skipLink a {
  display: block;
  position: absolute;
  left: -999px;
  top: -999px;
}
  
#skipLink a:focus {
  left: 0;
  top: 0;
  padding: var(--spacing-2);
  background: var(--color-background-content-box);
}

/*
 * Hide visually and from screen readers
 */

.hidden,
[hidden] {
  display: none !important;
}

/*
 * Hide only visually, but have it available for screen readers:
 * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 *
 * 1. For long content, line feeds are not interpreted as spaces and small width
 *    causes content to wrap 1 word per line:
 *    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
 */

.visually-hidden {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
  /* 1 */
}

/*
 * Extends the .visually-hidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

.visually-hidden.focusable:active,
.visually-hidden.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  white-space: inherit;
  width: auto;
}

/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
  visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * The use of `table` rather than `block` is only necessary if using
 * `::before` to contain the top-margins of child elements.
 */

.clearfix::before,
.clearfix::after {
  content: "";
  display: table;
}

.clearfix::after {
  clear: both;
}

/* =======================
   Media Queries for Responsive Design.
   ======================= */
   
@media (prefers-color-scheme: dark) {
  :root {
    --shadow-box: var(--shadow-dark);
  }
}

@media screen and (max-width:768px) {
  .menu-bar {
    padding: var(--spacing-5) var(--spacing-5) var(--spacing-4) var(--spacing-5);
  }
  
  main {
    padding: 0 var(--spacing-5) var(--spacing-4) var(--spacing-5);
  }
  .footer-content {
    flex-direction: column;
    row-gap: var(--spacing-4);
  }
  .footer-fade {
    height: 240px;
  }
}

@media screen and (max-width:440px) {
  .menu-bar {
    padding: var(--spacing-4) var(--spacing-5) var(--spacing-4) var(--spacing-5);
  }
  .footer-links {
    flex-direction: column;
    row-gap: var(--spacing-4);
  }
  .footer-fade {
    display: none;
  }
}

@media screen and (max-width:375px) {
  main {
    padding: 0 var(--spacing-4) var(--spacing-4) var(--spacing-4);
  }
  .menu-bar {
  padding: var(--spacing-4);
  }
  .menu-left, .menu-right {
    gap: var(--spacing-3);
  }
  .desktop-nav-secondary ul {
    gap: var(--spacing-3);
  }
  .menu-bar {
    gap: var(--spacing-3);
  }
}

@media print,
  (-webkit-min-device-pixel-ratio: 1.25),
  (min-resolution: 1.25dppx),
  (min-resolution: 120dpi) {
  /* Style adjustments for high resolution devices */
}

/* =======================
   Print styles.
   Inlined to avoid the additional HTTP request:
   https://www.phpied.com/delay-loading-your-print-css/
   ======================= */

@media print {
  *,
  *::before,
  *::after {
    background: #fff !important;
    color: #000 !important;
    /* Black prints faster */
    box-shadow: none !important;
    text-shadow: none !important;
  }

  a,
  a:visited {
    text-decoration: underline;
  }

  a[href]::after {
    content: " (" attr(href) ")";
  }

  abbr[title]::after {
    content: " (" attr(title) ")";
  }

  /*
   * Don't show links that are fragment identifiers,
   * or use the `javascript:` pseudo protocol
   */
  a[href^="#"]::after,
  a[href^="javascript:"]::after {
    content: "";
  }

  pre {
    white-space: pre-wrap !important;
  }

  pre,
  blockquote {
    border: var(--border-width-sm) solid #999;
    page-break-inside: avoid;
  }

  tr,
  img {
    page-break-inside: avoid;
  }

  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }

  h2,
  h3 {
    page-break-after: avoid;
  }
}