/* Modern reset: https://piccalil.li/blog/a-more-modern-css-reset/ */

*,
*::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,
h5,
h6,
p,
figure,
blockquote,
dl,
dd {
  margin-block: 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: var(--leading-standard);
}

/* Set shorter line heights on headings and interactive elements */
h1,
h2,
h3,
h4,
h5,
h6,
button,
input,
label {
  line-height: var(--leading-fine);
}

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

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
  color: var(--link-color);
  text-decoration: underline;
  text-decoration-color: var(--link-decoration-color);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.15em;
}

a:not([class]):hover {
  --link-decoration-color: var(
    --link-decoration-hover-color,
    var(--link-color)
  );
}

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

figure:not([class]) {
  margin-inline: var(--space-l);

  img {
    margin-inline: auto;
  }
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: 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;
}

body {
  background: var(--color-brand);
  color: var(--color-light);
  font-size: var(--size-step-0);
  font-family: var(--font-base);
  font-weight: var(--font-regular);
  line-height: var(--leading-standard);
  margin: 0;
}

/* Headings */

:is(h1, h2, h3, h4) {
  line-height: var(--leading-fine);
  font-weight: var(--font-bold);
  color: var(--heading-color, var(--color-light));
  text-wrap: balance;
}

h1 {
  font-size: var(--size-step-6);
  line-height: var(--leading-standard);
}

:is(h1, h2, h3, h4) a:not([class]) {
  text-decoration-thickness: 0.1ex;
  text-underline-offset: 0.2ex;
}

:is(h1, h2, h3, h4) a:not([class]):hover {
  text-underline-offset: 0.3ex;
}

:focus {
  outline: none;
}

:focus-visible {
  outline: 2px solid var(--focus-color, currentColor);
  outline-offset: var(--focus-offset, 0.1lh);
}

::selection {
  color: var(--color-light);
  background: var(--color-primary);
}

:root {
  --color-dark: #000;
  --color-mid: #d9d9d9;
  --color-light: #ffffff;
  --color-brand: #ef5994;
  --color-tint: #f2f2f2;

  --focus-color: var(--color-primary);
  --link-color: var(--color-light);
  --link-decoration-color: #f7acc9;

  --font-base: Helvetica, sans-serif;
}

:root {
  --size-step--1: clamp(0.875rem, 0.875rem + 0vw, 0.875rem); /* 14 -> 14 */
  --size-step-0: clamp(1rem, 1rem + 0vw, 1rem); /* 16 -> 16 */
  --size-step-1: clamp(1.125rem, 1.0016rem + 0.3185vw, 1.25rem); /* 18 -> 20 */
  --size-step-2: clamp(1.25rem, 1.1266rem + 0.3185vw, 1.375rem); /* 20 -> 22 */
  --size-step-3: clamp(1.375rem, 1.2516rem + 0.3185vw, 1.5rem); /* 22 -> 24 */
  --size-step-4: clamp(1.5rem, 1.2532rem + 0.6369vw, 1.75rem); /* 24 -> 28 */
  --size-step-5: clamp(1.625rem, 1.2548rem + 0.9554vw, 2rem); /* 26 -> 32 */
  --size-step-6: clamp(1.75rem, 1.2564rem + 1.2739vw, 2.25rem); /* 28 -> 36 */
}

:root {
  --space-3xs: 0.25rem; /* 4px */
  --space-2xs: 0.5rem; /* 8px */
  --space-xs: 0.75rem; /* 12px */
  --space-s: 1rem; /* 16px */
  --space-m: 1.5rem; /* 24px */
  --space-l: 2rem; /* 36px */
  --space-xl: 4rem; /* 64px */
  --space-2xl: 5rem; /* 80px */
}

:root {
  --space-3xs: 0.25rem; /* 4px */
  --space-2xs: 0.5rem; /* 8px */
  --space-xs: 0.75rem; /* 12px */
  --space-s: 1rem; /* 16px */
  --space-m: 1.5rem; /* 24px */
  --space-l: 2rem; /* 36px */
  --space-xl: 4rem; /* 64px */
  --space-2xl: 5rem; /* 80px */
}

:root {
  --font-base: "Open Sans", sans-serif;
  --font-mono: monospace;
  --leading-micro: 0.85;
  --leading-flat: 1;
  --leading-fine: 1.2;
  --leading-standard: 1.375;
  --leading-loose: 1.7;
  --font-light: 300;
  --font-regular: 400;
  --font-medium: 500;
  --font-bold: 700;
  --font-black: 800;
}

:root {
  --flow-space: var(--space-m);
  --gutter: var(--space-m);
}

.main {
  --wrapper-max-width: 32rem;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100svh;
}

.flow > * + * {
  margin-top: var(--flow-space, var(--space-s));
}

.wrapper {
  position: relative;
  max-width: clamp(0lvw, var(--wrapper-max-width), 100lvw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.roadblock {
  text-align: center;

  img {
    max-width: 16rem;
    margin-inline: auto;
  }
}