@property --100vw {
  syntax: "<length>";
  initial-value: 0px;
  inherits: false;
}
@property --screen-width {
  syntax: "<number>";
  initial-value: 0;
  inherits: false;
}
@property --breakpoint-scale {
  syntax: "<number>";
  initial-value: 0;
  inherits: true;
}
@property --inverse-breakpoint-scale {
  syntax: "<number>";
  initial-value: 1;
  inherits: true;
}
html, body {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
}

html {
  font-size: 10px; /* Force root to 10px. Now 1rem ALWAYS equals 10px, regardless of OS scaling */
  /* more uniform text between mac/linux */
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media screen and (max-width: 599px) {
  body {
    --next-break-down: 0;
    --next-break-up: 599;
  }
}
@media screen and (min-width: 600px) and (max-width: 1199px) {
  body {
    --next-break-down: 600;
    --next-break-up: 1199;
  }
}
@media screen and (min-width: 1200px) and (max-width: 1699px) {
  body {
    --next-break-down: 1200;
    --next-break-up: 1699;
  }
}
@media screen and (min-width: 1700px) and (max-width: 2279px) {
  body {
    --next-break-down: 1700;
    --next-break-up: 2279;
  }
}
@media screen and (min-width: 2280px) {
  body {
    --next-break-down: 2280;
    --next-break-up: 9999;
  }
}
body {
  font-size: 1.6rem; /* Reset body text to 16px (1.6 * 10) */
  line-height: 1;
  font-family: "Barlow";
  --100vw: 100vw;
  --screen-width: tan(atan2(var(--100vw), 1px));
  --break-range: calc(var(--next-break-up) - var(--next-break-down));
  --breakpoint-scale: clamp(0, (var(--screen-width) - var(--next-break-down)) / var(--break-range), 1);
  --inverse-breakpoint-scale: calc(1 - var(--breakpoint-scale));
  --gutter: 4.4rem;
  --content-width: 160rem;
  --content-width-safe: min(var(--content-width), calc(100% - var(--gutter) * 2));
  --feature-width: 10rem;
  --feature-max-width: 10rem;
  /* colors */
  --layout-primary: #f68b1f;
  --layout-light: white;
  --layout-dark: #252525;
  --layout-less-light: #f3f0ec;
  --layout-less-dark: #353635;
  --action-100: #ffcc00;
  --action-300: #ff9900;
  --action-500: #ff7e28;
  --action-700: #fa4f24;
  --action-900: #ff0000;
  --success: #00ff00;
  --error: #ff0000;
  --disabled-light: #aaaaaa;
  --disabled-dark: #555555;
  /* font-sizes */
  --font-line-gap-ratio: .5;
  --prose-paragraph-gap-ratio: .7; /* multiplied with lineheight */
  /* font metrics (barlow; TODO: get from font automatically) */
  --font-cap-height-ratio: .7;
  --font-ascender-height-ratio: 1;
  --font-descender-height-ratio: .2;
  --font-height: calc(var(--font-ascender-height-ratio) + var(--font-descender-height-ratio));
  --font-line-height-ratio: calc(var(--font-cap-height-ratio) + var(--font-line-gap-ratio));
  --font-size-top-fix-ratio: 0;
  --font-size-top-fix-ratio: calc(calc(var(--font-ascender-height-ratio) - var(--font-cap-height-ratio)) + calc(var(--font-line-gap-ratio) / 2));
  --font-size-top-fix-ratio: calc(var(--font-ascender-height-ratio) - var(--font-cap-height-ratio));
  --font-size-bottom-fix-ratio: 0;
  --font-size-bottom-fix-ratio: calc(var(--font-descender-height-ratio) + calc(var(--font-line-gap-ratio) / 2));
  --font-size-bottom-fix-ratio: var(--font-descender-height-ratio);
  --font-size-top-fix-sm: calc(calc(var(--font-size-sm) * var(--font-size-top-fix-ratio)) * -1);
  --font-size-bottom-fix-sm: calc(var(--font-size-sm) * var(--font-size-bottom-fix-ratio));
  --font-size-top-fix-base: calc(calc(var(--font-size-base) * var(--font-size-top-fix-ratio)) * -1);
  --font-size-bottom-fix-base: calc(var(--font-size-base) * var(--font-size-bottom-fix-ratio));
  --font-size-top-fix-lg: calc(calc(var(--font-size-lg) * var(--font-size-top-fix-ratio)) * -1);
  --font-size-bottom-fix-lg: calc(var(--font-size-lg) * var(--font-size-bottom-fix-ratio));
  --font-size-top-fix-xl: calc(calc(var(--font-size-xl) * var(--font-size-top-fix-ratio)) * -1);
  --font-size-bottom-fix-xl: calc(var(--font-size-xl) * var(--font-size-bottom-fix-ratio));
  /* focus */
  --focus-color: var(--action-500);
  --focus-width: 0.2rem;
  --focus-offset: 0.25em;
}

@media screen and (min-width: 768px) {
  body {
    /* font-sizes */
    --font-size-sm: 2.0rem;
    --font-size-base: 2.2rem;
    --font-size-lg: 4.0rem;
    --font-size-xl: 4.8rem;
  }
}
@media screen and (max-width: 768px) {
  body {
    /* font-sizes */
    --font-size-sm: .8rem;
    --font-size-base: 1.2rem;
    --font-size-lg: 1.8rem;
    --font-size-xl: 2.2rem;
  }
}
body > * {
  --font-size: var(--font-size-base);
}

/* tailwind extension */
.text-sm {
  --font-size: var(--font-size-sm);
}

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

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

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

/* elements */
p,
span,
strong,
em,
i,
b,
a,
button,
input[type=submit],
input[type=reset],
input[type=button],
input[type=text],
input[type=email],
input[type=password],
textarea {
  font-size: var(--font-size);
  line-height: var(--font-line-height-ratio);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  text-wrap: balance;
  hyphens: auto;
}

p {
  text-wrap: pretty;
  hyphens: auto;
}

ul {
  display: flex;
  flex-direction: column;
}

a {
  color: var(--action-500);
  text-decoration: underline;
  underline-offset: 0.2em;
  cursor: pointer;
}

a:has(> img) {
  display: contents;
  text-decoration: none;
}

a:has(> img)::before,
a:has(> img)::after {
  content: none !important;
}

a:hover {
  color: var(--action-700);
}

a:active {
  color: var(--action-900);
}

button,
.button,
a.button,
input[type=submit] {
  --btn-background: var(--action-500);
  --btn-text-color: white;
  --btn-border-width: unset;
  --btn-border-color: unset;
  --btn-border-style: unset;
  --btn-border-radius: .25rem;
  --btn-padding: 1rem 2.5rem;
  --btn-font-weight: 600;
  --btn-box-shadow: unset;
  cursor: pointer;
  background: var(--btn-background);
  color: var(--btn-text-color);
  padding: var(--btn-padding);
  border-radius: var(--btn-border-radius);
  border-width: var(--btn-border-width);
  border-style: var(--btn-border-style);
  border-color: var(--btn-border-color);
  font-weight: var(--btn-font-weight);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  box-shadow: var(--btn-box-shadow);
  transition: transform 0.3s, box-shadow 0.3s, background-color 0.3s, color 0.3s;
  /* Default tone: primary */
  /* Default type: filled */
  /* Outline type */
}
button:not([data-tone]), button[data-tone=primary],
.button:not([data-tone]),
.button[data-tone=primary],
a.button:not([data-tone]),
a.button[data-tone=primary],
input[type=submit]:not([data-tone]),
input[type=submit][data-tone=primary] {
  --btn-primary-color: var(--action-500);
  --btn-accent-color: var(--layout-light);
}
button[data-tone=dark],
.button[data-tone=dark],
a.button[data-tone=dark],
input[type=submit][data-tone=dark] {
  --btn-primary-color: var(--layout-dark);
  --btn-accent-color: var(--layout-primary);
}
button[data-tone=light],
.button[data-tone=light],
a.button[data-tone=light],
input[type=submit][data-tone=light] {
  --btn-primary-color: var(--layout-light);
  --btn-accent-color: var(--layout-primary);
}
button:not([data-type]), button[data-type=filled],
.button:not([data-type]),
.button[data-type=filled],
a.button:not([data-type]),
a.button[data-type=filled],
input[type=submit]:not([data-type]),
input[type=submit][data-type=filled] {
  --btn-background: var(--btn-primary-color);
  --btn-text-color: var(--btn-accent-color);
  --btn-box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  --btn-border-width: 2px;
  --btn-border-style: solid;
  --btn-border-color: var(--btn-primary-color);
}
button:not([data-type]):hover, button[data-type=filled]:hover,
.button:not([data-type]):hover,
.button[data-type=filled]:hover,
a.button:not([data-type]):hover,
a.button[data-type=filled]:hover,
input[type=submit]:not([data-type]):hover,
input[type=submit][data-type=filled]:hover {
  --btn-background: transparent;
  --btn-text-color: var(--btn-primary-color);
  --btn-box-shadow: unset;
}
button:not([data-type]):active, button[data-type=filled]:active,
.button:not([data-type]):active,
.button[data-type=filled]:active,
a.button:not([data-type]):active,
a.button[data-type=filled]:active,
input[type=submit]:not([data-type]):active,
input[type=submit][data-type=filled]:active {
  --btn-background: var(--btn-primary-color);
  --btn-text-color: var(--btn-accent-color);
  filter: brightness(0.8);
}
button:not([data-type]):disabled, button[data-type=filled]:disabled,
.button:not([data-type]):disabled,
.button[data-type=filled]:disabled,
a.button:not([data-type]):disabled,
a.button[data-type=filled]:disabled,
input[type=submit]:not([data-type]):disabled,
input[type=submit][data-type=filled]:disabled {
  --btn-background: var(--disabled-dark);
  --btn-text-color: var(--disabled-light);
  --btn-border-color: var(--disabled-dark);
  filter: none;
  cursor: not-allowed;
}
button[data-type=outline],
.button[data-type=outline],
a.button[data-type=outline],
input[type=submit][data-type=outline] {
  --btn-background: transparent;
  --btn-border-color: var(--btn-primary-color);
  --btn-border-width: 2px;
  --btn-border-style: solid;
  --btn-text-color: var(--btn-primary-color);
  --btn-font-weight: bold;
  --btn-box-shadow: unset;
}
button[data-type=outline]:hover,
.button[data-type=outline]:hover,
a.button[data-type=outline]:hover,
input[type=submit][data-type=outline]:hover {
  --btn-background: var(--btn-primary-color);
  --btn-text-color: var(--btn-accent-color);
}
button[data-type=outline]:active,
.button[data-type=outline]:active,
a.button[data-type=outline]:active,
input[type=submit][data-type=outline]:active {
  --btn-background: var(--btn-primary-color);
  --btn-text-color: var(--btn-accent-color);
  filter: brightness(0.8);
}
button[data-type=outline]:disabled,
.button[data-type=outline]:disabled,
a.button[data-type=outline]:disabled,
input[type=submit][data-type=outline]:disabled {
  --btn-background: transparent;
  --btn-border-color: var(--disabled-dark);
  --btn-text-color: var(--disabled-dark);
  filter: none;
  cursor: not-allowed;
}
button:hover,
.button:hover,
a.button:hover,
input[type=submit]:hover {
  transform: translateY(-3px);
}

h1 {
  --font-size: var(--font-size-xl);
  font-size: var(--font-size-xl);
  font-weight: bold;
}

h2 {
  --font-size: var(--font-size-lg);
  font-size: var(--font-size-lg);
  font-weight: bold;
}

h3,
h4,
h5,
h6 {
  --font-size: var(--font-size-base);
  font-size: var(--font-size-base);
  font-weight: bold;
}

::selection {
  background: var(--action-100);
  color: white;
}

/* util */
:where(main.page > section) {
  padding: var(--gutter) 0;
}

.section--light {
  background: var(--layout-light);
  color: var(--layout-dark);
}

.section--dark {
  background: var(--layout-dark);
  color: var(--layout-light);
}

.content-grid {
  --full: minmax(var(--gutter), 1fr);
  padding-inline: 0;
  -moz-column-gap: 0 !important;
  column-gap: 0 !important;
  display: grid !important;
  grid-template-columns: [full-start] var(--full) [feature-max-start] minmax(0, var(--feature-max-width, 100px)) [feature-start] minmax(0, var(--feature-width, 50px)) [content-start] min(var(--content-width), 100% - var(--gutter) * 2) [content-end] minmax(0, var(--feature-width, 50px)) [feature-end] minmax(0, var(--feature-max-width, 100px)) [feature-max-end] var(--full) [full-end];
}

.content-grid > :not(.content--feature,
.content--feature-max,
.content--full,
.content--full-safe) {
  width: 100%;
}

.content-grid > :where(:not(.content--feature,
.content--feature-max,
.content--full,
.content--full-safe)) {
  grid-column: content;
}

.content--feature {
  grid-column: feature;
}

.content--feature-max {
  grid-column: feature-max;
}

.content--full {
  grid-column: full;
}

.content--full-safe {
  grid-column: full;
  padding-inline: var(--gutter);
}

.content-grid:where(.content--full-safe) {
  padding-inline: var(--gutter);
}

:is(.content--feature, .content--feature-max, .content--full, .content--full-safe):not(.content-grid--off :is(.content--feature, .content--feature-max, .content--full, .content--full-safe)) {
  width: 100% !important;
  max-width: 100%;
}

.clickable-parent:not(a) {
  position: static;
}

.clickable-parent:not(a) a {
  position: static;
}

.clickable-parent:not(a) > a::after {
  content: "";
  position: absolute;
  inset: 0;
  cursor: pointer !important;
  display: flex;
}

a.clickable-parent {
  position: static;
}

a.clickable-parent::after {
  content: "";
  position: absolute;
  inset: 0;
  cursor: pointer !important;
  display: flex;
}

.focus-parent:focus-within {
  outline: var(--focus-width) solid var(--focus-color);
  outline-offset: var(--focus-offset);
}

.focus-parent :focus {
  outline: none !important;
  box-shadow: none !important;
}

.focus-parent--shadow:focus-within {
  box-shadow: 0 0 0 var(--focus-width) var(--focus-color);
}

.focus-parent--shadow :focus {
  outline: none !important;
  box-shadow: none !important;
}

.focus-parent--outline:focus-within {
  outline: var(--focus-width) solid var(--focus-color);
  outline-offset: var(--focus-offset);
}

.focus-parent--outline :focus {
  outline: none !important;
  box-shadow: none !important;
}

:focus-visible {
  outline-style: solid;
  outline-color: var(--focus-color);
  outline-width: var(--focus-width);
  outline-offset: var(--focus-offset);
}

.prose {
  font-size: var(--font-size);
  line-height: var(--font-line-height-ratio);
  text-wrap: pretty;
}

.prose h1,
.prose h2,
.prose h3,
.prose h4,
.prose h5,
.prose h6 {
  margin-bottom: calc(var(--font-line-height-ratio) * var(--font-size) * var(--prose-paragraph-gap-ratio));
  text-wrap: balance;
}
.prose h1:nth-child(n+2),
.prose h2:nth-child(n+2),
.prose h3:nth-child(n+2),
.prose h4:nth-child(n+2),
.prose h5:nth-child(n+2),
.prose h6:nth-child(n+2) {
  margin-top: calc(var(--font-line-height-ratio) * var(--font-size) * var(--prose-paragraph-gap-ratio));
}

.prose p + p {
  margin-top: calc(var(--font-line-height-ratio) * var(--font-size) * var(--prose-paragraph-gap-ratio));
}

body:has(dialog[open]) {
  overflow: hidden;
}
body:has(dialog[open]) > *:not(dialog) {
  pointer-events: none;
}