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

/* Prevent font size inflation */
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

/* Remove default margin in favour of better control in authored CSS */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin-block-end: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role="list"],
ol[role="list"] {
  list-style: none;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  line-height: 1.5;
}

/* Set shorter line heights on headings and interactive elements */
h1,
h2,
h3,
h4,
button,
input,
label {
  line-height: 1.1;
}

/* Balance text wrapping on headings */
h1,
h2,
h3,
h4 {
  text-wrap: balance;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  color: currentColor;
  text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font-family: inherit;
  font-size: inherit;
}

/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
  min-height: 10em;
}

/* Anything that has been anchored to should have extra scroll margin */
:target {
  scroll-margin-block: 5ex;
}


:root {
  --color-almond: oklch(0.9 0.0352 96.33);
  --color-dusk: oklch(0.67 0.0514 263.01);
  --color-ice: oklch(0.9 0.051 252.93);
  --color-blueberry: oklch(0.5 0.0973 285.24);
  --color-lavendar: oklch(0.49 0.1178 309.31);
  --color-pink: oklch(0.75 0.1372 320.67);
  --color-hopbush: oklch(0.63 0.136 353.97);
  --color-blush: oklch(0.77 0.1097 14.25);
  --color-sundown: oklch(0.85 0.0852 17.2);
  --color-peach: oklch(0.87 0.0816 73.04);
  --color-merino: oklch(0.95 0.0233 27.34);

  --color-primary-950: oklch(from var(--color-primary) 0.99 c h);
  --color-primary-900: oklch(from var(--color-primary) 0.97 c h);
  --color-primary-800: oklch(from var(--color-primary) 0.83 c h);
  --color-primary-700: oklch(from var(--color-primary) 0.75 c h);
  --color-primary-600: oklch(from var(--color-primary) 0.67 c h);
  --color-primary-500: oklch(from var(--color-primary) 0.59 c h);
  --color-primary-400: oklch(from var(--color-primary) 0.51 c h);
  --color-primary-300: oklch(from var(--color-primary) 0.43 c h);
  --color-primary-200: oklch(from var(--color-primary) 0.28 c h);
  --color-primary-100: oklch(from var(--color-primary) 0.15 c h);
  --color-primary-50: oklch(from var(--color-primary) 0.05 c h);

  --color-gray-100: oklch(0.99 0 0);
  --color-gray-200: oklch(0.91 0 0);
  --color-gray-300: oklch(0.83 0 0);
  --color-gray-400: oklch(0.75 0 0);
  --color-gray-500: oklch(0.67 0 0);
  --color-gray-600: oklch(0.59 0 0);
  --color-gray-700: oklch(0.51 0 0);
  --color-gray-800: oklch(0.43 0 0);
  --color-gray-900: oklch(0.28 0 0);
}

[data-theme="almond"] {
  --color-primary: var(--color-almond);
}

[data-theme="dusk"] {
  --color-primary: var(--color-dusk);
}

[data-theme="ice"] {
  --color-primary: var(--color-ice);
}

[data-theme="blueberry"] {
  --color-primary: var(--color-blueberry);
}

[data-theme="lavendar"] {
  --color-primary: var(--color-lavendar);
}

[data-theme="pink"] {
  --color-primary: var(--color-pink);
}

[data-theme="hopbush"] {
  --color-primary: var(--color-hopbush);
}

[data-theme="blush"] {
  --color-primary: var(--color-blush);
}

[data-theme="sundown"] {
  --color-primary: var(--color-sundown);
}

[data-theme="peach"] {
  --color-primary: var(--color-peach);
}

[data-theme="merino"] {
  --color-primary: var(--color-merino);
}

#theme-almond {
  --color-primary: var(--color-almond);
}

#theme-dusk {
  --color-primary: var(--color-dusk);
}

#theme-ice {
  --color-primary: var(--color-ice);
}

#theme-blueberry {
  --color-primary: var(--color-blueberry);
}

#theme-lavendar {
  --color-primary: var(--color-lavendar);
}

#theme-pink {
  --color-primary: var(--color-pink);
}

#theme-hopbush {
  --color-primary: var(--color-hopbush);
}

#theme-blush {
  --color-primary: var(--color-blush);
}

#theme-sundown {
  --color-primary: var(--color-sundown);
}

#theme-peach {
  --color-primary: var(--color-peach);
}

#theme-merino {
  --color-primary: var(--color-merino);
}

/* @link https://utopia.fyi/space/calculator?c=320,18,1.2,1240,20,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,&g=s,l,xl,12 */

:root {
  --space-3xs: clamp(0.3125rem, 0.3125rem + 0vw, 0.3125rem);
  --space-2xs: clamp(0.5625rem, 0.5408rem + 0.1087vw, 0.625rem);
  --space-xs: clamp(0.875rem, 0.8533rem + 0.1087vw, 0.9375rem);
  --space-s: clamp(1.125rem, 1.0815rem + 0.2174vw, 1.25rem);
  --space-m: clamp(1.6875rem, 1.6223rem + 0.3261vw, 1.875rem);
  --space-l: clamp(2.25rem, 2.163rem + 0.4348vw, 2.5rem);
  --space-xl: clamp(3.375rem, 3.2446rem + 0.6522vw, 3.75rem);
  --space-2xl: clamp(4.5rem, 4.3261rem + 0.8696vw, 5rem);
  --space-3xl: clamp(6.75rem, 6.4891rem + 1.3043vw, 7.5rem);

  /* One-up pairs */
  --space-3xs-2xs: clamp(0.3125rem, 0.2038rem + 0.5435vw, 0.625rem);
  --space-2xs-xs: clamp(0.5625rem, 0.4321rem + 0.6522vw, 0.9375rem);
  --space-xs-s: clamp(0.875rem, 0.7446rem + 0.6522vw, 1.25rem);
  --space-s-m: clamp(1.125rem, 0.8641rem + 1.3043vw, 1.875rem);
  --space-m-l: clamp(1.6875rem, 1.4049rem + 1.413vw, 2.5rem);
  --space-l-xl: clamp(2.25rem, 1.7283rem + 2.6087vw, 3.75rem);
  --space-xl-2xl: clamp(3.375rem, 2.8098rem + 2.8261vw, 5rem);
  --space-2xl-3xl: clamp(4.5rem, 3.4565rem + 5.2174vw, 7.5rem);
}

/* @link https://utopia.fyi/type/calculator?c=320,18,1.2,1240,20,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,&g=s,l,xl,12 */

:root {
  --step--2: clamp(0.7813rem, 0.7747rem + 0.0326vw, 0.8rem);
  --step--1: clamp(0.9375rem, 0.9158rem + 0.1087vw, 1rem);
  --step-0: clamp(1.125rem, 1.0815rem + 0.2174vw, 1.25rem);
  --step-1: clamp(1.35rem, 1.2761rem + 0.3696vw, 1.5625rem);
  --step-2: clamp(1.62rem, 1.5041rem + 0.5793vw, 1.9531rem);
  --step-3: clamp(1.944rem, 1.771rem + 0.8651vw, 2.4414rem);
  --step-4: clamp(2.3328rem, 2.0827rem + 1.2504vw, 3.0518rem);
  --step-5: clamp(2.7994rem, 2.4462rem + 1.7658vw, 3.8147rem);
}

/* @link https://utopia.fyi/type/calculator?c=320,18,1.2,1240,20,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,&g=s,l,xl,12 */

:root {
  --step--2: clamp(0.7813rem, 0.7747rem + 0.0326vw, 0.8rem);
  --step--1: clamp(0.9375rem, 0.9158rem + 0.1087vw, 1rem);
  --step-0: clamp(1.125rem, 1.0815rem + 0.2174vw, 1.25rem);
  --step-1: clamp(1.35rem, 1.2761rem + 0.3696vw, 1.5625rem);
  --step-2: clamp(1.62rem, 1.5041rem + 0.5793vw, 1.9531rem);
  --step-3: clamp(1.944rem, 1.771rem + 0.8651vw, 2.4414rem);
  --step-4: clamp(2.3328rem, 2.0827rem + 1.2504vw, 3.0518rem);
  --step-5: clamp(2.7994rem, 2.4462rem + 1.7658vw, 3.8147rem);
}


.stack {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.stack > * {
  margin-block: 0;
}

.stack > * + * {
  margin-block-start: var(--space, 1.5rem);
}

.cluster {
  align-items: var(--cluster-vertical-alignment, center);
  column-gap: var(--cluster-column-gap, var(--gutter, var(--space-s-m)));
  display: flex;
  flex-direction: var(--cluster-direction, row);
  flex-wrap: var(--cluster-wrap, wrap);
  justify-content: var(--cluster-horizontal-alignment, flex-start);
  row-gap: var(--cluster-row-gap, var(--gutter, var(--space-s-m)));
}


.wrapper {
  margin-inline: auto;
  width: 95vw;
  width: clamp(16rem, 95vw, 50rem);
  padding-inline: var(--space-xs);
  position: relative;
}

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

.uppercased {
  text-transform: uppercase;
}


:root {
  --color-primary: var(--color-blueberry);

  /* sufficient contrast */
  --color-text: var(--color-gray-900);
  --color-text-weak: var(--color-gray-800);
  --color-text-weaker: var(--color-gray-700);

  /* disabled; which doesn't need sufficient contrast */
  --color-text-weakest: var(--color-gray-500);

  --space: var(--space-m);

  --color-border: var(--color-gray-300);
  --border-radius: 5px;
  --box-shadow-card: 0 0 0 1px var(--color-border), 0 1px 5px rgba(12, 12, 12, 0.05), 0 0 40px rgba(12, 12, 12, 0.015);

  --color-health-shortcuts-accent: #fd1148;
  --color-brb-accent: #30b0c7;
  --color-mastodon-accent: #6364ff;
  --color-github-accent: #1a1f25;
  --color-eemgoed-accent: #4d7c0f;

  --color-background: var(--color-primary-950);
  --color-background-pattern: oklch(from var(--color-primary-800) l c h / 0.2);
  --color-background-banner: oklch(from var(--color-primary-800) l c h / 0.3);
}

@media(prefers-color-scheme: dark) {
  :root {
    --color-text: var(--color-gray-100);
    --color-text-weak: var(--color-gray-200);
    --color-text-weaker: var(--color-gray-300);
    --color-text-weakest: var(--color-gray-500);

    --space: var(--space-m);

    --color-github-accent: #1a1f25;

    --color-background: var(--color-primary-50);
    --color-background-pattern: var(--color-primary-100);
  }
}

body {
  margin: 0;
  color: var(--color-text);

  font-size: var(--step-0);
  font-family: system-ui, sans-serif;

  text-align: left;

  --pattern-size: 32px;
  --background-size: var(--pattern-size) var(--pattern-size);
  --background-size-half: calc(var(--pattern-size) / 2) calc(var(--pattern-size) / 2);

  background:
    repeating-linear-gradient( 45deg, transparent calc(-650%/13) calc(50%/13),var(--color-background-pattern) 0 calc(100%/13),
    transparent 0 calc(150%/13),var(--color-background-pattern) 0 calc(200%/13),
    transparent 0 calc(250%/13),var(--color-background-pattern) 0 calc(300%/13)),

    repeating-linear-gradient( 45deg, transparent calc(-650%/13) calc(50%/13),var(--color-background-pattern) 0 calc(100%/13),
    transparent 0 calc(150%/13),var(--color-background-pattern) 0 calc(200%/13),
    transparent 0 calc(250%/13),var(--color-background-pattern) 0 calc(300%/13)) var(--background-size-half),

    repeating-linear-gradient(-45deg, transparent  calc(-650%/13) calc(50%/13),var(--color-background-pattern) 0 calc(100%/13),
    transparent 0 calc(150%/13),var(--color-background-pattern) 0 calc(200%/13),
    transparent 0 calc(250%/13),var(--color-background-pattern) 0 calc(300%/13)),

    repeating-linear-gradient(-45deg, transparent calc(-650%/13) calc(50%/13),var(--color-background-pattern) 0 calc(100%/13),
    transparent 0 calc(150%/13),var(--color-background-pattern) 0 calc(200%/13),
    transparent 0 calc(250%/13),var(--color-background-pattern) 0 calc(300%/13)) var(--background-size-half) var(--color-background);
  background-size: var(--background-size);
}

:where(body, h1, h2, h3, h4, p, figure, blockquote, dl, dd) {
    margin-block:0
}

table {
  text-align: left;
  border-collapse: collapse;

  --border-color: var(--color-primary-50);
}

thead {
  border-block-end: 2px solid var(--border-color);
}

tfoot {
  border-block-start: 2px solid var(--border-color);
}

th, td {
  border: 1px solid color-mix(in srgb, var(--border-color), transparent 85%);
  padding: var(--space-2xs) var(--space-3xs);
}

tbody tr:nth-child(odd) {
	background: color-mix(in srgb, var(--color-primary), transparent 95%);
}

.brand-header {
  --gutter: var(--space-xs);
  font-size: var(--step-2);

  padding-block: var(--space-l);
  margin-block-end: var(--space-xl);

  background-color: var(--color-background-banner);
}

.main-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.theme-picker {
  display: none;
}

.theme-picker button {
  cursor: pointer;
  outline: inherit;
  background: none;
  border: none;

  width: var(--pattern-size);
  height: var(--pattern-size);

  border-radius: 30%;

  background:
    repeating-linear-gradient( 45deg, transparent calc(-650%/13) calc(50%/13),var(--color-primary) 0 calc(100%/13),
    transparent 0 calc(150%/13),var(--color-primary) 0 calc(200%/13),
    transparent 0 calc(250%/13),var(--color-primary) 0 calc(300%/13)),

    repeating-linear-gradient( 45deg, transparent calc(-650%/13) calc(50%/13),var(--color-primary) 0 calc(100%/13),
    transparent 0 calc(150%/13),var(--color-primary) 0 calc(200%/13),
    transparent 0 calc(250%/13),var(--color-primary) 0 calc(300%/13)) var(--background-size-half),

    repeating-linear-gradient(-45deg, transparent  calc(-650%/13) calc(50%/13),var(--color-primary) 0 calc(100%/13),
    transparent 0 calc(150%/13),var(--color-primary) 0 calc(200%/13),
    transparent 0 calc(250%/13),var(--color-primary) 0 calc(300%/13)),

    repeating-linear-gradient(-45deg, transparent calc(-650%/13) calc(50%/13),var(--color-primary) 0 calc(100%/13),
    transparent 0 calc(150%/13),var(--color-primary) 0 calc(200%/13),
    transparent 0 calc(250%/13),var(--color-primary) 0 calc(300%/13)) var(--background-size-half) oklch(from var(--color-primary) 0.55 c h);
  background-size: var(--background-size);
}

h1 {
  font-size: var(--step-5);
  font-weight: normal;
}

h2 {
  font-weight: normal;
  font-size: var(--step-4);
}

article {
  margin-block-end: var(--space-xl);
}

a:not([class]) {
  text-decoration-thickness: .2ex;
  text-decoration-color: var(--color-primary);
  text-underline-offset: .2ex;

  @media(prefers-color-scheme: dark) {
    text-decoration-color: var(--color-primary-700);
  }
}

a:not([class]):hover {
  text-underline-offset: .1ex;
}

pre[data-language]:not([data-language=""]) {
  position: relative;

  &::before {
    content: attr(data-language);
    display: block;
    position: absolute;
    padding: 0;
    font-size: var(--step--2);
    top: calc(var(--space-m) / 3);
    right: var(--space-m);
    text-transform: lowercase;
  }
}

pre {
  padding: var(--space-m);
  overflow: hidden;
}

pre code {
  overflow-x: scroll;
  display: block;
}

.prose h2 {
  margin-block-start: var(--space-2xl);
}

.home {
  --space: var(--space-xl);
}

.home .stack * {
  --space: var(--space-2xs);
  --gutter: var(--space-xs);
}

.health-shortcuts a {
  --color-primary: var(--color-health-shortcuts-accent);
  @media(prefers-color-scheme: dark) {
    --color-primary-700: var(--color-health-shortcuts-accent);
  }
}

.brb {
  --color-primary: var(--color-brb-accent);

  @media(prefers-color-scheme: dark) {
    --color-primary-700: var(--color-brb-accent);
  }
}

.eemgoed {
  --color-primary: var(--color-eemgoed-accent);

  @media(prefers-color-scheme: dark) {
    --color-primary-700: var(--color-eemgoed-accent);
  }
}

.github {
  --color-primary: var(--color-github-accent);

  @media(prefers-color-scheme: dark) {
    --color-primary-700: white;
  }
}

.mastodon {
  --color-primary: var(--color-mastodon-accent);
  @media(prefers-color-scheme: dark) {
    --color-primary-700: var(--color-mastodon-accent);
  }
}

ul[role="list"],
ol[role="list"] {
  padding: 0;
}

.post-item__icon, .post-item__date {
  vertical-align: middle;
}

.post-item__icon {
  width: 20px;
  height: 20px;
}

.post-item__date {
  font-size: var(--step--1);
  color: var(--color-text-weaker);
}

.post .post--metadata {
  --space: var(--space-2xs);
  padding-inline-start: 0;
  font-size: var(--step--1);
  color: var(--color-text-weaker);
  list-style: none;
}

.post .post--outdated {
  margin-block: var(--space-m);
  padding: var(--space-m);
  border: 1px solid var(--color-primary-300);
  border-radius: var(--border-radius);
  background-color: var(--color-background-banner);
  color: var(--color-text);
}

@media(prefers-color-scheme: dark) {
  .post .post--outdated {
    border-color: var(--color-primary-700);
    background-color: var(--color-background-banner);
  }
}