@charset "UTF-8";
/*
 * My base-level CSS reset, inspired by several resets, but mostly
 * https://piccalil.li/blog/a-more-modern-css-reset/
 */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  text-size-adjust: none;
}

body {
  min-block-size: 100vh;
  inline-size: min(100%, 100vw);
  margin: 0;
  padding: 0;
}

:target {
  scroll-margin-block: 5ex;
}

:focus,
:focus-visible {
  scroll-margin-bottom: 10vh;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-block-end: 0.65em;
  font-weight: 800;
  line-height: 1.15;
  text-wrap: balance;
  overflow-wrap: break-word;
  hyphens: auto;
}

p,
figure,
blockquote,
ul,
dl,
table {
  margin-block: 0;
}

a {
  text-decoration-skip-ink: auto;
}

input,
button,
textarea,
select {
  font-family: inherit;
  font-size: inherit;
  line-height: 1;
}

textarea:not([rows]) {
  min-block-size: 10em;
}

ul[role=list],
ol[role=list] {
  list-style: none;
  margin: 0;
  padding: 0;
}

img,
picture,
svg {
  display: block;
  block-size: auto;
  max-inline-size: 100%;
}

svg {
  pointer-events: none;
  fill: currentColor;
}

body {
  font-size: 1.125rem;
  line-height: 1.25;
}
@media (width > 768px) {
  body {
    font-size: 1.5rem;
  }
}
body {
  line-height: 1.4;
  font-family: "georama-variable";
  font-variation-settings: "wght" 100 1000, "wdth" 100;
}

h5 {
  font-size: var(--h5-font-size, 1.265625rem);
}
@media (width > 768px) {
  h5 {
    --h5-font-size: 1.8rem;
  }
}

h4 {
  font-size: var(--h4-font-size, 1.423828125rem);
}
@media (width > 768px) {
  h4 {
    --h4-font-size: 2.16rem;
  }
}

h3 {
  font-size: var(--h3-font-size, 1.6018066406rem);
}
@media (width > 768px) {
  h3 {
    --h3-font-size: 2.592rem;
  }
}

h2 {
  font-size: var(--h2-font-size, 1.8020324707rem);
}
@media (width > 768px) {
  h2 {
    --h2-font-size: 3.1104rem;
  }
}

h1 {
  font-size: var(--h1-font-size, 2.0272865295rem);
}
@media (width > 768px) {
  h1 {
    --h1-font-size: 3.73248rem;
  }
}

/* 🛑 STOP!
  Do not change this file directly.
  Modify colors in ./source/template/data/colors.cjs
 */
:root {
  --color-family: #331f51;
  --color-on-family: #9989B3;
  --color-family-alt: #b197d8;
  --color-on-family-alt: #413357;
  --color-reed: #003d3c;
  --color-on-reed: #56ABAA;
  --color-reed-alt: #b5fffe;
  --color-on-reed-alt: #367878;
  --color-ami: #660066;
  --color-on-ami: #D184D1;
  --color-ami-alt: #ffb6ff;
  --color-on-ami-alt: #843C84;
  --color-dark: #343432;
  --color-on-dark: #9C9C9A;
  --color-light: #f5f3f7;
  --color-on-light: #726E75;
}

body {
  background-color: var(--color-family);
  color: var(--color-on-family);
}

a {
  color: var(--color-light);
}
a:focus, a:hover {
  color: var(--color-on-dark);
}
a:focus {
  outline-width: 0.125em;
  outline-color: currentColor;
  outline-style: solid;
  outline-offset: 0.125em;
}

.site {
  inline-size: min(960px, 100%);
  margin-inline: auto;
  padding-inline: 2rem;
}

.profiles {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  justify-content: space-between;
}

.profile {
  inline-size: min(400px, 100%);
  font-weight: 650;
}
.profile a,
.profile img,
.profile span {
  display: block;
}
.profile a {
  background-color: var(--profile-link-backgroundColor, #331f51);
  color: var(--profile-link-color, #f5f3f7);
}
.profile a:hover, .profile a:focus {
  color: var(--profile-linkHover-color, #9989B3);
  text-decoration: none;
}
.profile img {
  object-fit: contain;
}
.profile span {
  padding-block: 1em;
  padding-inline: 1.5em;
}
.profile-reed {
  --profile-link-backgroundColor: #003d3c;
  --profile-linkHover-color: #56ABAA;
}
.profile-ami {
  --profile-link-backgroundColor: #660066;
  --profile-linkHover-color: #D184D1;
}

.content p {
  margin-block-start: 1em;
}

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