@charset "UTF-8";
:root {
  --bg: #f3ebdf;
  --fg: black;
  --fg-h: #8f483c;
  --bg2: #bd9582;
  --fg2: #f3ebdf;
  --fg-h2: #8f483c;
  --bg3: #f3ebdf;
  --fg3: black;
  --fg-h3: #8f483c;
  --bg4: #8f483c;
  --fg4: #f3ebdf;
  --fg-h4: #f3ebdf;
  --bg5: #f4e3d7;
  --fg5: black;
  --fg-h5: #8f483c;
  --bg6: #bd9582;
  --fg6: #f3ebdf;
  --fg-h6: #8f483c;
  --menu-bg: #f3ebdf;
  --menu-bg-scrolled: #f4e3d7;
  --menu-fg: black;
  --menu-fg-hover: #8d5a30;
  --width: 80rem; }

@font-face {
  font-family: "Bon Vivant";
  src: url("/fonts/bon-vivant-webfont.woff2") format("woff2"), url("/fonts/bon-vivant-webfont.woff") format("woff");
  font-weight: 400;
  font-style: normal; }

*, *:before, *:after {
  box-sizing: border-box; }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: "montserrat", sans-serif;
  text-align: left;
  line-height: 1.5; }

h1, h2, h3 {
  text-align: left;
  color: var(--fg-h);
  font-family: "dancing script", sans-serif;
  font-weight: 700;
  font-size: 220%;
  scroll-margin-top: 200px; }

a {
  color: #8f483c; }

a:visited {
  color: #8f483c; }

p.button {
  margin: 3.5em 0em;
  text-align: center;
  font-family: "amatic sc", sans-serif; }
  p.button a {
    border-radius: 0.3em;
    padding: 0.3em 1em !important;
    background: var(--fg2);
    color: var(--bg2);
    text-decoration: none; }

h3.button {
  text-align: center;
  font-family: "amatic sc", sans-serif;
  font-size: 150%; }
  h3.button a {
    border-radius: 0.3em;
    padding: 0.3em 1em !important;
    background: #8f483c;
    color: #f4e3d7;
    text-decoration: none; }

details summary {
  cursor: pointer;
  text-align: right;
  margin-top: 3em; }

.collapsible .collapsible-button {
  background-color: #bd9582;
  color: #f3ebdf;
  cursor: pointer;
  width: 100%;
  border: none;
  text-align: left;
  border-radius: 0.3em;
  font-family: "amatic sc", sans-serif;
  font-size: 200%;
  font-weight: bold;
  outline: none;
  padding: 0.25em; }
  .collapsible .collapsible-button.active {
    border-radius: 0.3em 0.3em 0 0; }
  .collapsible .collapsible-button.active, .collapsible .collapsible-button:hover {
    background-color: #bd9582; }
  .collapsible .collapsible-button:after {
    content: '+';
    /* + */
    float: right; }
  .collapsible .collapsible-button.active:after {
    content: '-';
    /* - */ }

.collapsible .collapsible-content {
  padding: 0 1em;
  max-height: 0;
  border-radius: 0 0 0.6em 0.6em;
  background-color: #bd9582;
  overflow: hidden;
  color: #f3ebdf;
  margin-bottom: 10px;
  transition: max-height 0.4s ease-out; }

.frame {
  font-size: 100%;
  padding: 2em 0; }
  .frame strong {
    color: #8f483c; }
  .frame .curve {
    position: relative;
    top: -2em; }
  .frame h1 {
    font-family: "bon vivant", sans-serif;
    text-align: center;
    color: #8d5a30;
    margin-bottom: 0em;
    margin-top: 0.5em;
    font-size: 270%; }
  .frame h2 {
    font-family: "dancing script", sans-serif;
    text-align: center;
    color: #8f483c;
    margin-bottom: 1em;
    margin-top: -0.7em; }
  .frame h3 {
    font-family: "amatic sc", sans-serif;
    text-align: center;
    color: #8f483c; }
  .frame .sepimg {
    position: relative;
    top: -2em; }
    .frame .sepimg img {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translate(-50%, -50%); }
  .frame p.button a {
    background: #8f483c;
    color: #f4e3d7;
    letter-spacing: 0.03em;
    font-size: 150%; }

.frame + .frame .curve {
  color: var(--bg); }

.frame.color2 {
  font-size: 100%;
  text-align: center;
  background: var(--bg2);
  color: var(--fg2); }
  .frame.color2 strong {
    color: #f4e3d7; }
  .frame.color2 h1 {
    font-family: "bon vivant", sans-serif;
    text-align: center;
    color: #8f483c;
    margin-bottom: 0em;
    margin-top: 0.5em; }
  .frame.color2 h2 {
    font-family: "dancing script", sans-serif;
    text-align: center;
    color: #f4e3d7;
    margin-bottom: 1em;
    margin-top: -0.7em; }
  .frame.color2 h3 {
    font-family: "amatic sc", sans-serif;
    text-align: center;
    color: var(--fg-h2); }
  .frame.color2 p.button a {
    background: #f4e3d7;
    color: #8f483c;
    letter-spacing: 0.03em;
    font-size: 150%; }
  .frame.color2 .collapsible .collapsible-button {
    background-color: #f3ebdf;
    color: #8f483c;
    cursor: pointer;
    width: 100%;
    border: none;
    text-align: left;
    border-radius: 0.3em;
    font-family: "amatic sc", sans-serif;
    font-size: 200%;
    font-weight: bold;
    outline: none;
    padding: 0.25em; }
    .frame.color2 .collapsible .collapsible-button.active {
      border-radius: 0.3em 0.3em 0 0; }
    .frame.color2 .collapsible .collapsible-button.active, .frame.color2 .collapsible .collapsible-button:hover {
      background-color: #f3ebdf; }
    .frame.color2 .collapsible .collapsible-button:after {
      content: '+';
      /* + */
      float: right; }
    .frame.color2 .collapsible .collapsible-button.active:after {
      content: '-';
      /* - */ }
  .frame.color2 .collapsible .collapsible-content {
    padding: 0 1em;
    max-height: 0;
    border-radius: 0 0 0.6em 0.6em;
    background-color: #f3ebdf;
    overflow: hidden;
    color: black;
    margin-bottom: 10px;
    transition: max-height 0.4s ease-out; }
    .frame.color2 .collapsible .collapsible-content strong {
      color: #8f483c; }

.frame.color2 + .frame .curve {
  color: var(--bg2); }

.frame.color3 {
  font-size: 100%;
  text-align: center;
  background: var(--bg3);
  color: var(--fg3);
  a: visited;
    a-color: #8f483c; }
  .frame.color3 h2 {
    font-family: "dancing script", sans-serif;
    text-align: center; }
  .frame.color3 h3 {
    font-family: "amatic sc", sans-serif;
    text-align: center; }
  .frame.color3 a {
    color: #8f483c; }
  .frame.color3 p.button a {
    background: #f4e3d7;
    color: #8f483c;
    letter-spacing: 0.03em;
    font-size: 150%; }

.frame.color3 + .frame .curve {
  color: var(--bg3); }

.frame.color4 {
  background: var(--bg4);
  color: var(--fg4); }
  .frame.color4 h1, .frame.color4 h2, .frame.color4 h3 {
    color: var(--fg-h4); }

.frame.color4 + .frame .curve {
  color: var(--bg4); }

.frame.color5 {
  background: var(--bg5);
  color: var(--fg5);
  text-align: center;
  padding: 0em 0; }
  .frame.color5 h1, .frame.color5 h2, .frame.color5 h3 {
    color: var(--fg-h5); }
  .frame.color5 p {
    margin: 0;
    font-size: 85%; }
  .frame.color5 a {
    color: #8f483c; }

.frame.color5 + .frame .curve {
  color: var(--bg5); }

.frame.color6 {
  font-size: 100%;
  background: var(--bg6);
  color: var(--fg6); }
  .frame.color6 strong {
    color: #8f483c; }
  .frame.color6 h1, .frame.color6 h2, .frame.color6 h3 {
    color: var(--fg-h6); }
  .frame.color6 h1 {
    font-family: "bon vivant", sans-serif;
    color: black; }
  .frame.color6 h2 {
    font-family: "dancing script", sans-serif;
    color: #8f483c; }
  .frame.color6 h3 {
    font-family: "amatic sc", sans-serif; }
  .frame.color6 p.button a {
    background: #f4e3d7;
    color: #8f483c;
    letter-spacing: 0.03em;
    font-size: 150%; }

.frame.color6 + .frame .curve {
  color: var(--bg6); }

.frame.header {
  font-size: 100%;
  background: var(--bg3);
  color: var(--fg3); }
  .frame.header h1 {
    color: #8d5a30;
    font-family: "Bon Vivant", sans-serif;
    rotate: -7deg;
    width: fit-content;
    font-size: 250%;
    margin-bottom: 0em;
    margin-top: -0.5em; }
  .frame.header p {
    padding-left: 1em;
    text-align: center;
    line-height: 1.5; }
  .frame.header blockquote p {
    text-align: left;
    font-style: italic; }
  .frame.header .img {
    width: 100%; }
    @media screen and (min-width: 48em) {
      .frame.header .img {
        width: calc(40% - 1em); } }
  .frame.header .text {
    width: calc(60% - 1em);
    flex-grow: 1; }

.frame.header + .frame .curve {
  color: var(--bg3); }

.frame.bgimg {
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 40em; }

.frame.bgimg.wbgimg {
  background-attachment: fixed;
  min-height: 30em; }

.frame.bgimg.bgimg-center {
  background-position: center; }

article, header {
  max-width: var(--width);
  margin: 0 auto;
  padding: 1em; }

div.quote {
  clear: both;
  margin: 1em; }
  div.quote q {
    quotes: "“" "„"; }
  div.quote q:before, div.quote q:after {
    font-size: 300%;
    color: #8f483c;
    line-height: 0;
    margin-bottom: 3em; }
  div.quote q:before {
    margin-right: 0.1em; }
  div.quote q:after {
    margin-left: 0.1em; }
  div.quote .by {
    color: #8f483c;
    float: right;
    margin-top: 1ex;
    margin-right: 3em;
    font-family: "amatic sc", sans-serif;
    font-weight: bold;
    font-size: 200%; }
  div.quote .by:before {
    content: "—"; }

form.contact, form.newsletter {
  display: flex;
  flex-flow: row wrap;
  gap: 1em;
  margin: 0 auto; }
  form.contact label, form.newsletter label {
    display: none; }
  form.contact input, form.newsletter input {
    width: 100%;
    padding: 0.5em;
    border: none;
    background-color: #f4e3d7; }
    @media screen and (min-width: 48em) {
      form.contact input, form.newsletter input {
        width: calc(50% - 0.5em); } }
  form.contact textarea, form.newsletter textarea {
    width: 100%;
    padding: 0.5em;
    border: none;
    background-color: #f4e3d7; }
  form.contact button, form.newsletter button {
    width: 100%;
    border-radius: 0.3em;
    border: none;
    outline: none;
    padding: 0.3em 1em;
    background: #8f483c;
    color: #f4e3d7;
    font-family: "amatic sc", sans-serif;
    letter-spacing: 0.03em;
    font-size: 150%;
    margin-bottom: 60px; }

@media screen and (min-width: 48em) {
  form.contact {
    max-width: 80%; } }

@media screen and (min-width: 48em) {
  form.newsletter {
    max-width: 50%; } }

.carousel {
  display: flex;
  width: 100%;
  gap: 1em;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  anchor-name: --carousel;
  scrollbar-color: var(--fg-h) var(--bg); }
  .carousel div.quote {
    flex: 0 0 100%;
    scroll-snap-align: center; }

header {
  display: flex;
  flex-flow: row wrap;
  align-content: flex-start;
  justify-content: left; }
  header img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    height: auto; }
  header .img {
    width: 100%; }
    @media screen and (min-width: 48em) {
      header .img {
        width: 40%; } }
  header .intro {
    width: 100%; }
    @media screen and (min-width: 48em) {
      header .intro {
        width: 60%; } }
  header .quote {
    width: 100%; }

.frame article {
  display: flex;
  flex-flow: row wrap;
  align-content: flex-start;
  justify-content: center;
  align-items: center;
  gap: 1em; }

.frame.img-right article {
  flex-direction: row-reverse; }

.frame img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto; }

.frame .img {
  width: 100%; }
  @media screen and (min-width: 48em) {
    .frame .img {
      width: calc(50% - 1em); } }
.frame .text {
  width: calc(50% - 1em);
  flex-grow: 1; }

.frame.columns .text {
  width: 100%;
  gap: 2.5em; }

.frame .column {
  align-self: start;
  width: 100%; }
  .frame .column .img {
    width: 100%;
    min-height: 128px;
    display: flex;
    justify-content: center;
    align-items: end; }
  .frame .column .timg {
    width: 100%;
    min-height: 24px;
    display: flex;
    justify-content: center;
    align-items: end; }
  .frame .column h1, .frame .column h2, .frame .column h3, .frame .column p {
    text-align: center; }
  @media screen and (min-width: 48em) {
    .frame .column {
      width: calc(20% - 2.5em); } }
  .frame .column a img {
    vertical-align: middle;
    display: inline; }

.frame .column-img-only {
  align-self: center;
  width: 100%; }
  .frame .column-img-only .img {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center; }
  .frame .column-img-only h1, .frame .column-img-only h2, .frame .column-img-only h3, .frame .column-img-only p {
    text-align: center; }
  @media screen and (min-width: 48em) {
    .frame .column-img-only {
      width: calc(20% - 2.5em); } }
@media screen and (min-width: 48em) {
  .frame.cols3 .column, .frame.cols3 .column-img-only {
    width: calc(33% - 2.5em); } }

@media screen and (min-width: 48em) {
  .frame.cols4 .column, .frame.cols4 .column-img-only {
    width: calc(25% - 2.5em); } }

.topnav {
  background: var(--menu-bg);
  transition: background-color 200ms linear;
  color: var(--menu-fg);
  box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.22);
  width: 100%;
  font-family: "Amatic SC", sans-serif;
  font-size: 150%;
  font-weight: 700; }
  .topnav > div {
    margin: 0 auto;
    max-width: var(--width);
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: center; }
  .topnav a {
    display: block;
    padding: 1rem;
    color: var(--menu-fg);
    text-decoration: none; }
    .topnav a:hover, .topnav a.current {
      color: var(--menu-fg-hover);
      text-decoration: underline; }
  .topnav img.logo {
    margin-right: auto; }
  .topnav .menu-btn {
    cursor: pointer;
    border: none;
    background: var(--menu-bg);
    padding: 1.5rem 1rem;
    position: relative;
    user-select: none; }
  .topnav .menu-icon {
    background: var(--menu-fg);
    display: block;
    height: 2px;
    position: relative;
    transition: background .2s ease-out;
    width: 1rem; }
    @media (prefers-reduced-motion) {
      .topnav .menu-icon {
        transition: none; } }
  .topnav .menu-icon:before,
  .topnav .menu-icon:after {
    background: var(--menu-fg);
    content: '';
    display: block;
    height: 100%;
    position: absolute;
    transition: all .2s ease-out;
    width: 100%; }
    @media (prefers-reduced-motion) {
      .topnav .menu-icon:before,
      .topnav .menu-icon:after {
        transition: none; } }
  .topnav .menu-icon:before {
    top: -5px; }
  .topnav .menu-icon:after {
    top: 5px; }

.topnav.navopen .menu-icon {
  background: transparent; }

.topnav.navopen .menu-icon:before {
  transform: translateY(5px) rotate(45deg); }

.topnav.navopen .menu-icon:after {
  transform: translateY(-5px) rotate(-45deg); }

.topnav .menu {
  width: 100%;
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .4s ease-out; }
  @media (prefers-reduced-motion) {
    .topnav .menu {
      transition: none; } }
  .topnav .menu menu {
    margin: 0;
    padding: 0 2em;
    list-style: none;
    overflow: hidden; }
    .topnav .menu menu img {
      display: none; }

.topnav.navopen .menu {
  grid-template-rows: 1fr; }

@media screen and (min-width: 64em) {
  .topnav {
    position: fixed;
    top: 0;
    z-index: 3; }
    .topnav.scrolled {
      background: var(--menu-bg-scrolled); }
    .topnav .menu-btn, .topnav img.logo {
      display: none; }
    .topnav .menu {
      display: block; }
      .topnav .menu menu {
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center; }
        .topnav .menu menu li.beforelogo {
          order: -1; }
        .topnav .menu menu img {
          display: block; }
        .topnav .menu menu span {
          display: none; } }

@media screen and (min-width: 64em) {
  main {
    margin-top: calc(280px); } }