/* ---------------------------------- Fonts --------------------------------- */
@import url("https://fonts.googleapis.com/css2?family=Neuton:ital,wght@0,200;0,300;0,400;0,700;0,800;1,400&display=swap");
@font-face {
  font-family: "lucien_schoenschriftv_catRg";
  src: url("/fonts/Lucian Schoenschrift CAT-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
/* --------------------------- Pattern Backgrounds -------------------------- */
:root {
  --color0: #FFEFF6;
  --color1: #f994bf83;
  --pink: #D9749D;
  --brightpink: #FF87B7;
  --green: #55764A;
  --yellow: #FFF7E2;
  --panelHeight: calc(100vh - 5vh - 28vh);
  --elementWidth: calc(var(--panelHeight) * 2);
  --scaleUnit: calc(var(--panelHeight) /30);
}

body.yellow {
  --color0: #FFF7E2;
  --color1: #f4da8688;
}

.blue {
  --color0: #EAF6FB;
  --color1: #bce2f579;
}

html,
body {
  min-height: 100vh;
  line-height: 1.3;
  display: flow-root;
  text-wrap: pretty;
}

body {
  width: 100vw;
}

.gingham {
  background-color: #FFFFFF;
  background-image: repeating-linear-gradient(0deg, var(--color1) 0px 3.5vh, transparent 3.5vh 7vh), repeating-linear-gradient(90deg, var(--color1) 0px 3.5vh, transparent 3.5vh 7vh);
}

/* ---------------------------------- Page ---------------------------------- */
body {
  margin: 0;
  padding: 0;
  background-color: var(--color0);
  font-family: "Neuton", serif;
  color: var(--green);
}

body > * {
  margin-inline: auto;
}

p {
  margin-block: 0.5em;
}

body > header,
body > footer {
  background-color: #ffffff;
  overflow: hidden;
}
body > header div,
body > footer div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--brightpink);
  max-width: var(--elementWidth);
  margin-inline: auto;
  height: 5vh;
  padding-top: 3.5vh;
  padding-bottom: 3.5vh;
  padding-inline: 3.5vh;
}
body > header .logo,
body > footer .logo {
  font-size: calc(var(--scaleUnit) * 2.5);
  font-family: "lucien_schoenschriftv_catRg", cursive, serif;
  text-decoration: none !important;
  color: var(--pink);
}
body > header nav,
body > footer nav {
  display: flex;
  gap: calc(var(--scaleUnit) * 2);
}
body > header nav a,
body > footer nav a {
  color: #71646a;
  font-size: calc(var(--scaleUnit) * 1.4);
  font-weight: light;
  text-decoration: none;
  text-wrap: nowrap;
}
body > header nav a:hover,
body > footer nav a:hover {
  text-decoration: underline;
}
body > header nav a.active,
body > footer nav a.active {
  color: var(--pink);
  text-decoration: underline;
}

body > footer nav a {
  font-size: calc(var(--scaleUnit) * 1.2);
}

.hero {
  box-sizing: border-box;
  position: relative;
  min-height: calc(100vh - 12vh);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3.5vh;
  box-sizing: border-box;
}

section {
  min-height: calc(100vh - 12vh);
}

.panel {
  border-radius: 2rem;
  background-color: var(--color0);
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: auto;
  width: var(--elementWidth);
  min-height: var(--panelHeight);
  overflow: hidden;
}
.panel p {
  margin-block: 0.25em;
}

.imagepanel {
  position: relative;
}
.imagepanel img {
  position: absolute;
  inset: 0;
  object-fit: cover;
  object-position: center;
  width: 100%;
  height: 100%;
}

.flowerpanel {
  background-image: url("/images/flower-bottom.png"), url("/images/flower-topleft.png");
  background-position: bottom, top left;
  background-size: contain;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--green);
  font-size: calc(var(--scaleUnit) * 2);
  padding-bottom: calc(var(--scaleUnit) * 2);
  padding-inline: 3.5vh;
}
.flowerpanel span {
  font-family: "lucien_schoenschriftv_catRg", cursive, serif;
  font-size: calc(var(--scaleUnit) * 3.5);
}
.flowerpanel h1 {
  margin: 0;
  padding-bottom: calc(var(--scaleUnit) * 0.5);
}

label {
  font-size: calc(var(--scaleUnit) * 0.8);
}

form {
  text-align: left;
  display: flex;
  flex-direction: column;
}

p.nogap {
  margin-bottom: 0;
}

div.stepb {
  display: none;
}

.stepa:has(:checked[value=true]) + div.stepb {
  display: block;
}

.stepb textarea {
  display: none;
}

.stepb:has(:checked[value=true]) textarea {
  display: block;
}

div.stepc {
  display: none;
}

.stepa:has(:checked[value=true]) + .stepb:has(:checked) + div.stepc {
  display: block;
}

input[type=submit],
.button,
input[type=text],
textarea,
label.card {
  font-size: calc(var(--scaleUnit) * 1);
  padding: calc(var(--scaleUnit) * 0.5) calc(var(--scaleUnit) * 0.8);
  display: block;
  margin-bottom: calc(var(--scaleUnit) * 0.5);
  box-sizing: border-box;
  width: calc(var(--scaleUnit) * 18);
  max-width: calc(40vw);
  border: 1px solid var(--green);
  border-radius: 5px;
  box-shadow: 1px 1px 3px var(--color1);
}

textarea {
  min-width: calc(var(--scaleUnit) * 37);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

input[type=radio] {
  width: 16px;
  height: 16px;
  border: 2px solid grey;
  padding: 2px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
  box-sizing: border-box;
  border-radius: 100%;
}
input[type=radio]:checked {
  background: var(--green) content-box;
  border-color: var(--green);
}

.inputgroup {
  display: flex;
  gap: calc(var(--scaleUnit) * 1);
}

label.card {
  background: #f9fff7;
  margin-top: calc(var(--scaleUnit) * 1);
  gap: 0.5em;
  display: flex;
  align-items: center;
}
label.card:has(:checked) {
  background: #ffffff;
}
details label.card {
  margin-top: 0;
}

input[type=submit],
.button {
  min-width: unset;
  width: auto;
  align-self: flex-end;
  background-color: var(--green);
  border: 0;
  font-size: calc(var(--scaleUnit) * 0.8);
  color: white;
  margin-top: calc(var(--scaleUnit) * 1);
}
input[type=submit]:hover,
.button:hover {
  background-color: var(--green);
}

.button {
  display: block;
  align-self: center;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  text-decoration: none;
}

input[type=submit].link-button {
  background: none !important;
  border: none;
  color: var(--pink) !important;
  text-decoration: underline;
  box-shadow: unset;
  cursor: pointer;
  align-self: center;
}

.cursive {
  font-family: "lucien_schoenschriftv_catRg", cursive, serif;
}

.textpanel {
  padding: 3.5vh 7vh;
  text-wrap: pretty;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.textpanel.wide {
  grid-column: 1/span 2;
}

h1 {
  font-family: "lucien_schoenschriftv_catRg", cursive, serif;
  color: var(--brightpink);
  font-size: calc(var(--scaleUnit) * 4);
  font-weight: lighter;
  margin-bottom: 0;
  margin-top: 0;
}

h2 {
  color: var(--pink);
  margin-bottom: 0;
  font-size: calc(var(--scaleUnit) * 1.5);
  text-wrap: pretty;
}

p,
li {
  font-size: calc(var(--scaleUnit) * 1.4);
}
p.small,
li.small {
  font-size: calc(var(--scaleUnit) * 1.4 * 0.8);
}
.hero p,
.hero li {
  font-size: calc(var(--scaleUnit) * 1.5);
}
.hero p.small,
.hero li.small {
  font-size: calc(var(--scaleUnit) * 1.7 * 0.8);
}

a {
  color: var(--pink);
}

li {
  list-style-position: inside;
}

h2 + p {
  margin-top: 0.3em;
}

p + ol {
  margin-top: -1em;
}

.alt {
  color: var(--pink);
}
.pink .alt {
  color: var(--green);
}

.flowerhero {
  background-image: url("/images/flower-bottomright.png"), url("/images/flower-topleft.png");
  background-position: bottom right, top left;
  background-size: 50%;
  background-repeat: no-repeat;
  text-align: center;
  position: relative;
}

.flowerhero.scroller {
  background-image: url("/images/flower-bottomright.png");
  background-position: bottom right;
}
.flowerhero.scroller:before {
  content: "";
  width: 100%;
  height: 100vh;
  background-image: url("/images/flower-topleft.png");
  background-position: top left;
  background-size: 50%;
  background-repeat: no-repeat;
  position: sticky;
  top: 0;
  left: 0;
  margin-top: -3.5vh;
  margin-left: -3.5vh;
  margin-bottom: -100vh;
  display: block;
  pointer-events: none;
}

.scroller {
  padding: 3.5vh;
  box-sizing: border-box;
  background-attachment: fixed;
}
.scroller.yellow {
  background-color: var(--yellow);
}
.scroller > div {
  margin-inline: auto;
  max-width: var(--elementWidth);
  text-align: center;
  position: relative;
  z-index: 2;
}
.scroller .questions {
  padding-block: 10.5vh;
}
.scroller .questions h2 {
  margin-top: 3em;
}

.blue h1 {
  color: var(--green);
}

.stacked {
  flex-direction: column;
}

.tombstones {
  padding-top: calc(var(--scaleUnit) * 1);
  padding-top: calc(var(--scaleUnit) * 3);
  max-width: var(--elementWidth);
  width: 100%;
  gap: calc(var(--scaleUnit) * 3);
  margin-inline: auto;
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-flow: column;
}
.tombstones > div {
  background-color: var(--color0);
  padding: 3.5vh;
  padding-top: 4.2vh;
  text-align: center;
  border-top-left-radius: 50% 40%;
  border-top-right-radius: 50% 40%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.tombstones > div h2 {
  font-size: calc(var(--scaleUnit) * 1.5);
  text-transform: uppercase;
  padding-bottom: 3.5vh;
}
.tombstones > div p {
  font-size: calc(var(--scaleUnit) * 1.4);
  margin-bottom: 0;
}

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  box-sizing: border-box;
  gap: calc(var(--scaleUnit) * 3);
  align-items: center;
}
.split > div {
  width: 100%;
  text-overflow: ellipsis;
}
.split h2 {
  color: var(--green);
  font-size: calc(var(--scaleUnit) * 2);
}
.split img {
  width: 90%;
  height: auto;
  border-radius: calc(var(--scaleUnit) * 1.5);
}
.split .infopanel {
  width: 90%;
  margin-inline: auto;
  background-color: var(--color1);
  border-radius: calc(var(--scaleUnit) * 1.5);
  padding: 0.875vh 3.5vh;
  margin-top: 3.5vh;
  box-sizing: border-box;
  font-size: calc(var(--scaleUnit) * 1);
}
.split .infopanel p {
  margin: 0;
}

#menu {
  display: none;
}

label[for=menu] {
  display: none;
}

.med-alt {
  display: none;
}

@media screen and (max-width: 950px) {
  .med-alt {
    display: initial;
  }

  .med {
    display: none;
  }

  .med-only {
    display: none;
  }

  .panel {
    grid-template-columns: 5fr 4fr;
  }

  .panel:has(.flowerpanel:first-child) {
    grid-template-columns: 3fr 5fr;
  }

  label[for=menu] {
    display: block;
    font-size: calc(var(--scaleUnit) * 2);
    text-align: right;
    position: relative;
    top: calc(var(--scaleUnit) * -0.25);
  }

  body > header nav {
    flex-direction: column;
    position: absolute;
    z-index: 1;
    inset: 0;
    background-color: white;
    transition-duration: 0.2s;
    transform-origin: right;
    left: 100vw;
    overflow: hidden;
    box-sizing: border-box;
    width: 0;
  }
  body > header nav a {
    padding-inline: 3.5vh;
  }
  body > header nav label {
    padding: 3.5vh;
  }

  #menu:checked + nav {
    left: 0;
    width: 100%;
  }

  .tombstones {
    grid-auto-rows: min-content;
    grid-auto-flow: row;
  }

  .infopanel p {
    font-size: calc(var(--scaleUnit) * 1.15);
    padding: 0;
  }

  .split {
    grid-template-columns: 5fr 4fr;
    min-height: unset !important;
    padding-block: calc(var(--scaleUnit) * 2);
    border-bottom: 1px solid #ecd18e;
  }
  .split div {
    min-width: 0;
    min-height: 0;
  }
  .split a {
    white-space: pre-wrap;
    /* CSS3 */
    white-space: -moz-pre-wrap;
    /* Mozilla, since 1999 */
    white-space: -pre-wrap;
    /* Opera 4-6 */
    white-space: -o-pre-wrap;
    /* Opera 7 */
    word-wrap: break-word;
    /* Internet Explorer 5.5+ */
  }
}
@media screen and (max-width: 650px) {
  .panel,
.split {
    display: flex;
    flex-direction: column;
    min-height: unset;
  }

  .split {
    gap: 0;
    text-overflow: ellipsis;
  }
  .split .small {
    padding-bottom: calc(var(--scaleUnit) * 1);
  }
  .split > div {
    width: 100%;
    text-overflow: ellipsis;
  }
  .split a {
    text-overflow: ellipsis;
    display: inline-block;
    max-width: calc(100vw - 7vh);
    overflow: hidden;
  }
  .split .infopanel p {
    font-size: calc(var(--scaleUnit) * 1.15);
    padding: 0;
  }
  .split h2 {
    margin: 0;
  }
  .split p.small br {
    display: none;
  }

  .flowerpanel,
.imagepanel {
    aspect-ratio: 1/1;
  }

  .home .flowerpanel,
.home .imagepanel {
    aspect-ratio: 1/1.25;
  }

  .textpanel {
    padding: 3.5vh;
  }

  body > footer div {
    height: unset;
  }
  body > footer nav {
    flex-direction: column;
  }

  input[type=submit],
.button,
input[type=text],
textarea,
label.card {
    min-width: unset;
    max-width: unset;
    width: 100%;
  }

  .textpanel.wide {
    min-height: 50vh;
    display: block;
    padding: 3.5vh;
  }

  .button {
    text-align: center;
  }

  details {
    margin-bottom: calc(var(--scaleUnit) * 1);
  }

  .hero:has(.wide) {
    align-items: flex-start;
  }
}