:root {
  /* Glossamer Brand Colour */
  --color-glossamer-50: #edfaf8;
  --color-glossamer-100: #dcf5f2;
  --color-glossamer-200: #aae3da;
  --color-glossamer-300: #7fd4c6;
  --color-glossamer-400: #36b39a;
  --color-glossamer-500: #00916e;
  --color-glossamer-600: #00825f;
  --color-glossamer-700: #006e49;
  --color-glossamer-800: #005735;
  --color-glossamer-900: #004224;
  --color-glossamer-950: #002b16;

  /* Neutral Text & Surface Colours */
  --color-neutral-50: #f7f7f7;
  --color-neutral-100: #f2f2f2;
  --color-neutral-200: #dedcdc;
  --color-neutral-300: #c7c4c3;
  --color-neutral-400: #9e9a99;
  --color-neutral-500: #737373;
  --color-neutral-600: #525252;
  --color-neutral-700: #404040;
  --color-neutral-800: #262626;
  --color-neutral-900: #171717;
  --color-neutral-950: #0a0a0a;

  --color-red-100: #f5dcdc;
  --color-red-500: #d81313;
  --color-jungle-100: #dcf5de;
  --color-jungle-700: #008209;

  --color-text-primary: var(--color-neutral-950);
  /* --color-text-secondary: var(--color-neutral-600); */
  --color-text-inverse: var(--color-neutral-50);

  --color-surface-primary: var(--color-neutral-50);
  --color-surface-secondary: var(--color-neutral-100);
  --color-surface-tertiary: var(--color-neutral-200);
  --color-surface-inverse: var(--color-neutral-950);

  --color-accent: var(--color-glossamer-700);
  --color-accent-contrast: var(--color-neutral-50);
  --color-accent-hover: var(--color-glossamer-900);

  --color-secondary: var(--color-neutral-50);
  --color-secondary-contrast: var(--color-neutral-950);
  --color-secondary-hover: var(--color-neutral-200);

  --color-error: var(--color-red-100);
  --color-error-contrast: var(--color-red-500);

  --color-success: var(--color-jungle-100);
  --color-success-contrast: var(--color-jungle-700);

  font-size: 16px;
  font-family: 'Helvetica Neue', Arial, sans-serif;

  --text-4xl: 3.815rem;
  --text-3xl: 3.052rem;
  --text-2xl: 2.441rem;
  --text-xl: 1.953rem;
  --text-lg: 1.563rem;
  --text-md: 1.25rem;
  --text-base: 1rem;
  --text-sm: 0.8rem;
  --text-xs: 0.64rem;

  --space-xl: 8rem;
  --space-lg: 4rem;
  --space-md: 2rem;
  --space-base: 1rem;
  --space-sm: 0.5rem;
  --space-xs: 0.25rem;
}

.heading--4xl {
  font-weight: 600;
  font-size: var(--text-4xl);
}

.heading--3xl {
  font-weight: 600;
  font-size: var(--text-3xl);
}

.heading--2xl {
  font-weight: 600;
  font-size: var(--text-2xl);
}

.heading--xl {
  font-weight: 500;
  font-size: var(--text-xl);
}

.heading--lg {
  font-weight: 500;
  font-size: var(--text-lg);
}

.heading--md {
  font-weight: 500;
  font-size: var(--text-md);
}

.text--base {
  font-weight: 400;
  font-size: var(--text-base);
}

.text--sm {
  font-weight: 400;
  font-size: var(--text-sm);
}

.text--xs {
  font-weight: 400;
  font-size: var(--text-xs);
}

.link {
  outline: none;
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.link:visited {
  color: var(--color-glossamer-800);
  text-decoration: underline;
}

.link:hover {
  color: var(--color-accent-hover);
  text-decoration: underline;
}

.link:focus-visible {
  box-shadow: 0 0 0 5px var(--color-surface-primary), 0 0 0 6px var(--color-surface-inverse);
  border-radius: 2px;
  text-decoration: none;
}

.link[href=''],
.link:not([href]) {
  opacity: 0.9;
  pointer-events: none;
}

.button {
  display: inline-block;
  appearance: none;
  transition: all 0.25s ease;
  outline: none;
  border: none;
  border-radius: var(--space-sm);
  background-color: var(--color-accent);
  padding: var(--space-sm) var(--space-base);
  color: var(--color-accent-contrast);
  font-size: var(--text-base);
  text-decoration: none;
}

.button:hover:not(:disabled) {
  background-color: var(--color-accent-hover);
}

.button:active:not(:disabled) {
  background-color: var(--color-accent-hover);
}

.button:focus-visible {
  box-shadow: 0 0 0 1px var(--color-surface-primary), 0 0 0 2px var(--color-surface-inverse);
}

.button:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

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

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

.button--secondary:active:not(:disabled) {
  background-color: var(--color-secondary-hover);
}

.input {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.input__label {
  font-size: var(--text-sm);
}

.input__field {
  outline: none;
  border: none;
  border-radius: var(--space-sm);
  background-color: var(--color-surface-secondary);
  padding: var(--space-sm);
  font-size: var(--text-base);
}

.input__field:hover:not(:disabled, .input__field--error, .input__field--success) {
  background-color: var(--color-surface-tertiary);
}

.input__field:focus-visible {
  box-shadow: 0 0 0 1px var(--color-surface-primary), 0 0 0 2px var(--color-surface-inverse);
}

.input__field:focus-visible:not(.input__field--error, .input__field--success) {
  background-color: var(--color-surface-tertiary);
}

.input:has(.input__field:disabled) {
  opacity: 0.6;
}

.input__field--error {
  background-color: var(--color-error);
}

.input__error {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  color: var(--color-error-contrast);
  font-size: var(--text-sm);
}

.input__field--success {
  background-color: var(--color-success);
}

.input__success {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  color: var(--color-success-contrast);
  font-size: var(--text-sm);
}

.textarea {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.textarea__label {
  font-size: var(--text-sm);
}

.textarea__field {
  outline: none;
  border: none;
  border-radius: var(--space-sm);
  background-color: var(--color-surface-secondary);
  padding: var(--space-sm);
  resize: vertical;
  font-size: var(--text-base);
}

.textarea__field:hover:not(:disabled, .textarea__field--error, .textarea__field--success) {
  background-color: var(--color-surface-tertiary);
}

.textarea__field:focus-visible {
  box-shadow: 0 0 0 1px var(--color-surface-primary), 0 0 0 2px var(--color-surface-inverse);
}

.textarea__field:focus-visible:not(.textarea__field--error, .textarea__field--success) {
  background-color: var(--color-surface-tertiary);
}

.textarea:has(.textarea__field:disabled) {
  opacity: 0.6;
}

.textarea__field--error {
  background-color: var(--color-error);
}

.textarea__error {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  color: var(--color-error-contrast);
  font-size: var(--text-sm);
}

.textarea__field--success {
  background-color: var(--color-success);
}

.textarea__success {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  color: var(--color-success-contrast);
  font-size: var(--text-sm);
}

.select {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.select__label {
  font-size: var(--text-sm);
}

.select__field {
  appearance: none;
  outline: none;
  border: none;
  border-radius: var(--space-sm);
  background-image: url('data:image/svg+xml,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4 6L9 11L14 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  background-position: calc(100% - var(--space-sm)) center;
  background-repeat: no-repeat;
  background-color: var(--color-surface-secondary);
  padding: var(--space-sm);
  font-size: var(--text-base);
}

.select__field:hover:not(:disabled, .select__field--error, .select__field--success) {
  background-color: var(--color-surface-tertiary);
}

.select__field:focus-visible {
  box-shadow: 0 0 0 1px var(--color-surface-primary), 0 0 0 2px var(--color-surface-inverse);
}

.select__field:focus-visible:not(.select__field--error, .select__field--success) {
  background-color: var(--color-surface-tertiary);
}

.select:has(.select__field:disabled) {
  opacity: 0.6;
}

.select__field--error {
  background-color: var(--color-error);
}

.select__error {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  color: var(--color-error-contrast);
  font-size: var(--text-sm);
}

.select__field--success {
  background-color: var(--color-success);
}

.select__success {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  color: var(--color-success-contrast);
  font-size: var(--text-sm);
}

.eventcard {
  display: flex;
  border-radius: var(--space-base);
  background-color: var(--color-surface-secondary);
  width: 100%;
}

.eventcard__image {
  border-radius: var(--space-base);
  width: 33%;
  object-fit: cover;
}

.eventcard__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-base);
  padding: var(--space-md);
  width: 67%;
}

.eventcard__subcontent {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-xs);
}

.eventcard__headline {
  font-weight: 600;
  font-size: var(--text-2xl);
}

.eventcard__info {
  font-size: var(--text-sm);
}

@container (width < 500px) {
  .eventcard {
    flex-direction: column-reverse;
  }

  .eventcard__image {
    width: 100%;
  }

  .eventcard__content {
    width: 100%;
  }
}

.eventphoto {
  position: relative;
  border-radius: var(--space-base);
  max-width: 600px;
  overflow: hidden;
}

.eventphoto__image {
  display: block;
  width: 100%;
}

.eventphoto__caption {
  position: absolute;
  bottom: 0;
  z-index: 1;
  padding: var(--space-base);
  width: 100%;
  color: var(--color-text-inverse);
}

.eventphoto:has(.eventphoto__caption)::after {
  position: absolute;
  top: 0;
  background: linear-gradient(
    0,
    color-mix(in oklab, var(--color-surface-inverse) 70%, transparent) 10%,
    color-mix(in oklab, var(--color-surface-inverse) 0%, transparent) 50%
  );
  width: 100%;
  height: 100%;
  content: '';
}

.filter {
  display: inline-flex;
  gap: var(--space-sm);
  border-radius: var(--space-sm);
  background-color: var(--color-surface-secondary);
  padding: var(--space-sm);
}

.filter__input {
  clip: rect(0 0 0 0);
  position: absolute;
  clip-path: inset(100%);
  width: 1px;
  height: 1px;
  overflow: hidden;
  white-space: nowrap;
}

.filter__label {
  display: inline-block;
  outline: none;
  border-radius: var(--space-sm);
  padding: var(--space-sm);
  color: var(--color-text-primary);
}

.filter:has(.filter__input:focus-visible) {
  box-shadow: 0 0 0 1px var(--color-surface-secondary), 0 0 0 2px var(--color-surface-inverse);
}

.filter__input:checked + .filter__label {
  background-color: var(--color-accent);
  color: var(--color-accent-contrast);
}

.filter__input:disabled + .filter__label {
  opacity: 0.6;
  cursor: not-allowed;
}