@font-face {
  font-family: "Open Sans";
  src: url(../fonts/open-sans/OpenSans-VariableFont_wdth,wght.ttf);
  font-weight: 100 900;
  font-stretch: 75% 100%;
  font-style: normal;
}
@font-face {
  font-family: "Open Sans";
  src: url(../fonts/open-sans/OpenSans-Italic-VariableFont_wdth,wght.ttf);
  font-weight: 100 900;
  font-stretch: 75% 100%;
  font-style: italic;
}
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
}

* {
  box-sizing: border-box;
}

html {
  line-height: 1.6;
}

p,
h1, h2, h3, h4, h5, h6,
li,
dl, dt,
blockquote {
  overflow-wrap: break-word;
}

body {
  min-height: 100vh;
}

:root {
  --step--2: clamp(0.64rem, calc(0.62rem + 0.11vw), 0.70rem);
  --step--1: clamp(0.80rem, calc(0.75rem + 0.24vw), 0.94rem);
  --step-0: clamp(1.00rem, calc(0.91rem + 0.43vw), 1.25rem);
  --step-1: clamp(1.25rem, calc(1.11rem + 0.72vw), 1.67rem);
  --step-2: clamp(1.56rem, calc(1.33rem + 1.15vw), 2.22rem);
  --step-3: clamp(1.95rem, calc(1.60rem + 1.75vw), 2.96rem);
  --step-4: clamp(2.44rem, calc(1.92rem + 2.62vw), 3.95rem);
  --step-5: clamp(3.05rem, calc(2.28rem + 3.84vw), 5.26rem);
  --space-xs: clamp(0.75rem, calc(0.68rem + 0.33vw), 0.94rem);
  --space-s: clamp(1.00rem, calc(0.91rem + 0.43vw), 1.25rem);
  --space-m: clamp(1.50rem, calc(1.37rem + 0.65vw), 1.88rem);
  --space-l: clamp(2.00rem, calc(1.83rem + 0.87vw), 2.50rem);
  --space-xl: clamp(3.00rem, calc(2.74rem + 1.30vw), 3.75rem);
  --space-xs-m: clamp(0.75rem, calc(0.36rem + 1.96vw), 1.88rem);
  --space-screen: clamp(0.25rem, calc(-0.32rem + 2.83vw), 1.88rem);
  --color-standout: hsl(0deg, 0%, 93%);
  --font-sans: "Open Sans", system-ui, sans-serif;
  --font-mono: ui-monospace, monospace;
}

html {
  font-family: var(--font-sans);
}

body {
  font-size: var(--step-0);
  font-weight: 400;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
}

h1, h2, h3, h4, h5, h6 {
  line-height: 1;
  text-wrap: balance;
}

hr {
  border: none;
  height: 1px;
  background-color: black;
}

blockquote {
  font-style: italic;
  background-color: var(--color-standout);
  padding: var(--space-s);
}
blockquote > * + * {
  margin-block-start: var(--space-m);
}

#site-header {
  padding-block-start: var(--space-m);
  padding-block-end: var(--space-screen);
  padding-inline: var(--space-screen);
}
#site-header h1 {
  font-size: var(--step-1);
  font-weight: 300;
}

#site-home {
  margin-block-start: var(--space-l);
  margin-block-end: calc(2 * var(--space-l));
  padding-inline: var(--space-screen);
}
#site-home h2 {
  font-size: var(--step-2);
  font-weight: 300;
}

#site-entry {
  margin-block-start: var(--space-l);
  padding-inline: var(--space-screen);
}
#site-entry header {
  border-block-end: 1px solid black;
  padding-block-end: var(--space-s);
}
#site-entry header p {
  font-weight: 300;
  font-style: italic;
}
#site-entry header time {
  font-size: var(--step--1);
  font-style: normal;
}
#site-entry header h2 {
  font-size: var(--step-3);
  font-weight: 600;
}
#site-entry > *:not(header, footer) {
  max-width: 60ch;
}
#site-entry h3,
#site-entry h4 {
  font-weight: 600;
}
* > #site-entry h3,
* > #site-entry h4 {
  margin-block-start: var(--space-l);
}
#site-entry h3 {
  font-size: var(--step-2);
}
#site-entry h4 {
  font-size: var(--step-1);
}
#site-entry ul,
#site-entry ol {
  margin-inline-start: var(--space-xs);
}
#site-entry ul > li,
#site-entry ol > li {
  margin-inline-start: var(--space-xs);
}
#site-entry ul > * + *,
#site-entry ol > * + * {
  margin-block-start: var(--space-s);
}
#site-entry code {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  background: hsl(0, 0%, 85%);
  padding-inline: 5px;
  padding-block-start: 2px;
  padding-block-end: 1px;
  border-radius: 3px;
}
#site-entry img,
#site-entry picture {
  max-width: 100%;
  display: block;
}

#site-footer {
  margin-block-start: var(--space-xl);
  padding-inline: var(--space-screen);
  padding-block-start: var(--space-m);
  padding-block-end: var(--space-l);
  font-size: var(--step--1);
  font-weight: 300;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.entry-preview p {
  font-weight: 300;
}
.entry-preview time {
  font-size: var(--step--1);
}
.entry-preview h3 {
  font-size: var(--step-1);
  font-weight: 600;
}

.callout {
  background-color: hsl(98, 29%, 90%);
  border: 1px solid hsl(98, 50%, 70%);
  padding: var(--space-s);
  border-radius: 0.75rem;
}

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

.center > * {
  margin-inline-start: auto;
  margin-inline-end: auto;
  max-width: var(--c, 55ch);
}

.center-self {
  margin-inline-start: auto;
  margin-inline-end: auto;
  max-width: var(--c, 60rem);
}

a.plain {
  color: inherit;
}
a.plain:link, a.plain:hover, a.plain:focus, a.plain:active {
  color: inherit;
  text-decoration: none;
}

a.plain-underline {
  color: inherit;
}
a.plain-underline:link {
  color: inherit;
  text-decoration: none;
}
a.plain-underline:hover, a.plain-underline:focus, a.plain-underline:active {
  text-decoration: underline;
  color: inherit;
}

ul.plain,
ol.plain {
  list-style-type: none;
}

/*# sourceMappingURL=style.css.map */