/* css reset */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
}
ol {
  list-style: decimal inside;
}
ul {
  list-style: disc;
  list-style-position: outside;
  margin-left: 1.6rem;
}
li {
  margin: 1rem 0;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* end reset */
/*
@font-face {
  font-family: "Lora";
  src: url("./fonts/Lora-Regular.ttf"), url("./fonts/Lora-Italic.ttf");
  font-display: fallback;
}

@font-face {
  font-family: "Vollkorn";
  src: url("./fonts/Vollkorn-VariableFont_wght.ttf"), url("./fonts/Vollkorn-Italic-VariableFont_wght.ttf");
  font-display: fallback;
} */

@font-face {
  font-family: "Berkeley Mono";
  src: url("/fonts/BerkeleyMono-Regular.woff2")
}

@font-face {
  font-family: "Berkeley Mono Bold";
  src: url("/fonts/BerkeleyMono-Bold.woff2");
}

:root {
  --c-white: #fafafa;
  --c-linen: #d0d0d0;
  /* --c-outrageous-orange: #F96E46; */
  /* --c-spanish-blue: #296EB4; */
  /* --c-dodger-blue: #1789FC; */
  /* --c-dark-purple: #2D1E2F; */

  --c-dark-sea: #39cb8e;
  --c-dark-sea: #58d4a0;
  --c-dark-sea: #24e8aa;
  --c-dark-sea: #24e5e8;
  --sec: #e327ae;
  /* --c-xanadu: #778472; */
  /* --c-charcoal: #2E4052; */
  --c-charcoal: #12100b;

  --main-bg: var(--c-white);
  --main-text: var(--c-charcoal);

  --link-color: var(--c-dark-sea);

  --title-font: "Vollkorn";
  --body-font: "Lora";

  --title-font: "Berkeley Mono Bold";
  --body-font: "Charter";
  --code-font: "Berkeley Mono";

  --size-xxs: 0.125rem;
  --size-xs: 0.25rem;
  --size-s: 0.5rem;
  --size-m: 0.75rem;
  --size-l: 1rem;
  --size-xl: 1.5rem;
  --size-xxl: 2rem;

  --text-s: 0.75rem;
  --text-m: 1rem;
  --text-l: 1.15rem;
  --text-xl: 1.5rem;
  --text-xxl: 2rem;
}

code {
  font-family: var(--code-font);
}

pre:has(code) {
  margin: var(--size-xl) 0;
  line-height: 1.5em;
  overflow-x: scroll;
  max-width: 100vw;
}

@media(prefers-color-scheme: dark) {
  :root {
    --main-bg: var(--c-charcoal);
    --main-text: var(--c-linen);
  }
}

html {
  background-color: var(--main-bg);
  color: var(--main-text);

  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;

}

a {
  color: var(--link-color);
  padding: var(--size-xxs) 0;
}

a:visited {
  color: var(--link-color);
}

h1,h2,h3,h4,h5,h6 {
  font-family: var(--title-font);
  font-weight: 700;
  margin-bottom: var(--size-l);
  color: var(--c-dark-sea);
}

h1 {
  font-size: var(--text-xxl);
}

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

h3 {
  font-size: var(--text-l);
}

em {
  font-style: italic;
}

strong {
  font-weight: 600;
}

body {
  font-family: var(--body-font);
  font-weight: 400;
}

p, li {
  line-height: 1.8;
  margin-bottom: 1rem;
  font-size: var(--text-l);
  font-size: 20px;
}

img.photo {
  max-width: 100%;
  margin: 1rem 0;
  display: block;
}

@media screen and (max-width: 1024px) {
  main {
    margin-top: 0;
  }
}

table {
  text-align: left;
}

thead {
  border-bottom: 1px solid var(--main-text);
}

th, td  {
  padding: var(--size-s) 0;
  padding-right: var(--size-s);
}

/******** components ********/

.page-header {
  padding-bottom: var(--size-s);
  border-bottom: var(--size-xs) solid var(--c-dark-sea);
  margin: var(--size-xxl) 0;
  font-family: var(--title-font);
}

.page-header h1 {
  /* background: linear-gradient(
    to right,
    var(--c-dark-sea) 25%, var(--sec) 75%
  ); */
  background: radial-gradient(
    circle farthest-side at 0% 33%,
    var(--sec),
    var(--c-dark-sea) 100%
  );
  background-clip: text;
  /* -webkit-text-fill-color: transparent; */
  color: transparent;
}

.grid-header {
  display: grid;
  gap: 1rem 1rem;
  grid-template: 1fr 1fr / 3fr 1fr;
}

.grid-header--page-title {
  grid-row: 2;
  grid-column: 1;
}

.grid-header--blog-title {
  grid-row: 1;
  grid-column: 1;
}

.grid-header--byline {
  grid-row: 1 / span 2;
  grid-column: 2;
  align-self: end;
}

/******** utilities ********/

.text-right {
  text-align: right;
}

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

.margin-x-s { margin-left: var(--size-s); margin-right: var(--size-s); }
.margin-x-m { margin-left: var(--size-m); margin-right: var(--size-m); }
.margin-x-l { margin-left: var(--size-l); margin-right: var(--size-l); }

.margin-y-s { margin-top: var(--size-s); margin-bottom: var(--size-s); }
.margin-y-m { margin-top: var(--size-m); margin-bottom: var(--size-m); }
.margin-y-l { margin-top: var(--size-l); margin-bottom: var(--size-l); }
.margin-y-xxl { margin-top: var(--size-xxl); margin-bottom: var(--size-xxl); }

.margin-xs { margin: var(--size-xs); }
.margin-s { margin: var(--size-s); }
.margin-m { margin: var(--size-m); }
.margin-l { margin: var(--size-l); }
.margin-xl { margin: var(--size-xl); }

.margin-bottom-xs { margin-bottom: var(--size-xs); }
.margin-bottom-s { margin-bottom: var(--size-s); }
.margin-bottom-m { margin-bottom: var(--size-m); }
.margin-bottom-l { margin-bottom: var(--size-l); }
.margin-bottom-xl { margin-bottom: var(--size-xl); }
.margin-bottom-xxl { margin-bottom: var(--size-xxl); }

.margin-top-xs { margin-top: var(--size-xs); }
.margin-top-s { margin-top: var(--size-s); }
.margin-top-m { margin-top: var(--size-m); }
.margin-top-l { margin-top: var(--size-l); }
.margin-top-xl { margin-top: var(--size-xl); }
.margin-top-xxl { margin-top: var(--size-xxl); }

.margin-right-xs { margin-right: var(--size-xs); }
.margin-right-s { margin-right: var(--size-s); }
.margin-right-m { margin-right: var(--size-m); }
.margin-right-l { margin-right: var(--size-l); }
.margin-right-xl { margin-right: var(--size-xl); }
.margin-right-xxl { margin-right: var(--size-xxl); }


.flex-col {
  display: flex;
  flex-direction: column;
}

.flex-row {
  display: flex;
  flex-direction: row;
}

.justify-content-center {
  justify-content: center;
}

.flex-basis-48 {
  flex-basis: 48rem;
}

.flex-wrap {
  flex-wrap: wrap;
}

.gap-m {
  gap: var(--size-xl);
}

.flex-align-end {
  align-items: flex-end;
}

.flex-grow {
  flex-grow: 2;
}

.flex-no-shrink {
  flex-shrink: 0;
}

.flex-shrink {
  flex-shrink: 2;
}

.flex-1 { flex: 1; }
.flex-2 { flex: 2; }

.max-y-48 { max-width: 48rem; }
.max-y-64 { max-width: 64rem; }

.l-centered { margin: 0 auto; }