* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

@font-face {
  font-family: BodoniModaWeb;
  src: url("/assets/fonts/BodoniModa-Italic-VariableFont_opsz,wght.woff2");
  font-weight: 400 900;
}
@font-face {
  font-family: MontserratWeb;
  src: url("/assets/fonts/Montserrat-VariableFont_wght.woff2");
  font-weight: 100 900;
}
@font-face {
  font-family: MrDeHavilandWeb;
  src: url("/assets/fonts/MrDeHaviland-Regular.woff2");
  font-weight: 400;
}
:root {
  --padding: 1.6rem;
  --color-black: #000;
  --color-white: #fff;
  --color-white-overlay: hsla(0, 0%, 100%, 0.7);
  --color-trans-dark: hsla(0, 0%, 0%, 0.4);
  --color-grey: #777;
  --color-light: oklch(96% 0 0);
  --color-green: oklch(58.44% 0.1083 171.86);
  --color-red: oklch(61.82% 0.1863 37.35);
  --color-text: var(--color-black);
  --color-text-grey: var(--color-grey);
  --color-background: var(--color-white);
  --font-family-sans: MontserratWeb, Avenir, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol";
  --font-family-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo,
    Courier, monospace;
  --font-family-script: MrDeHavilandWeb, script;
  --font-weight-main: 380;
  --font-weight-logo: 300;
  --font-weight-menu: 300;
  --font-weight-h1: 400;
  --font-weight-small: 460;
  --font-weight-verysmall: 420;
  --font-weight-transparent: 440;
}

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

body {
  /* background: var(--color-code-orange); */
  font-size: 16px;
  font-weight: var(--font-weight-main);
  line-height: var(--padding);
}

.content,
.testimonial-contents,
.vita,
article {
  backdrop-filter: blur(8px);
  margin: 0 auto;
  max-width: 60rem;
}

header {
  background: var(--color-white);
  font-size: 15px;
  position: sticky;
  top: 0;
  z-index: 1;
}
header .content {
  align-items: end;
  background: var(--color-white);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: var(--padding);
}
header .content p {
  margin-bottom: 0;
}
header .content .logo {
  align-items: center;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  font-weight: var(--font-weight-logo);
}
header .content .menu {
  font-weight: var(--font-weight-menu);
}
header .content .menu ul {
  display: flex;
  list-style-type: none;
}
header .content .menu ul ul {
  background-color: var(--color-white);
  display: none;
  padding: 1.5rem 2rem 0 0;
  position: absolute;
  width: 14em;
}
header .content .menu ul ul li {
  padding-bottom: 0.75rem;
}
header .content .menu ul li {
  position: relative;
}
header .content .menu ul li:hover ul {
  display: block;
}
header .content .menu a {
  margin: 0 0 0 2rem;
  display: block;
}
header .content .menu a[aria-current] {
  color: var(--color-red);
}

.article-wrapper {
  background: var(--color-light);
}
.article-wrapper.image {
  background-color: var(--color-white);
  background-size: cover;
}
.article-wrapper.plain {
  background-color: var(--color-white);
}
.article-wrapper.plain article {
  background-color: var(--color-white);
}
.article-wrapper.transparent {
  background-color: var(--color-white);
}
.article-wrapper.transparent article {
  background-color: var(--color-trans-dark);
  color: var(--color-white);
  font-size: 1.1rem;
  letter-spacing: 0.025em;
}
.article-wrapper.transparent h1,
.article-wrapper.transparent h2,
.article-wrapper.transparent h3 {
  font-weight: var(--font-weight-h1-transparent);
}

article {
  background: var(--color-light);
  hyphens: auto;
  padding: var(--padding);
}
article h1,
article h2,
article h3 {
  color: var(--color-red);
  font-weight: var(--font-weight-h1);
  margin-bottom: var(--padding);
}
article h2 {
  margin-top: calc(2 * var(--padding));
}
article ul {
  margin-left: 1.1rem;
  margin-bottom: var(--padding);
}
article li {
  color: var(--color-green);
}
article.intro {
  display: flex;
  justify-content: space-between;
}
article.intro .intro-text {
  max-width: 40rem;
}
article.intro .intro-image {
  margin-left: var(--padding);
}

.script {
  color: var(--color-red);
  font-family: var(--font-family-script);
  font-size: 3rem;
  line-height: 1em;
  padding-left: var(--padding);
}

section.testimonials {
  background-image: url("/assets/sticks.webp");
  background-size: cover;
  overflow: hidden;
}
section.testimonials aside {
  display: flex;
  position: relative;
  align-items: center;
  text-align: center;
}
section.testimonials aside > div {
  position: absolute;
  bottom: 1.8rem;
  width: 100%;
}
section.testimonials aside a {
  align-items: center;
  background: var(--color-white);
  border-radius: 50%;
  display: inline-flex;
  font-size: 9px;
  font-weight: 500;
  height: 1rem;
  justify-content: center;
  margin: 0;
  position: relative;
  text-decoration: none;
  width: 1rem;
}
section.testimonials aside a:active {
  top: 1px;
}
section.testimonials aside a::focus {
  background: var(--color-black);
}
@supports (scroll-snap-type) {
  section.testimonials .aside {
    display: none;
  }
}
section.testimonials .testimonials-slides {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}
section.testimonials .testimonials-slides::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
section.testimonials .testimonials-slides::-webkit-scrollbar-thumb {
  background: black;
  border-radius: 10px;
}
section.testimonials .testimonials-slides::-webkit-scrollbar-track {
  background: transparent;
}
section.testimonials .testimonial {
  flex-shrink: 0;
  width: 100%;
  position: relative;
  scroll-snap-align: start;
  transition: transform 0.5s;
  width: 100%;
}
section.testimonials .testimonial .testimonial-contents {
  background-color: var(--color-white-overlay);
  font-size: 14px;
  font-weight: var(--font-weight-small);
  height: 100%;
  padding: var(--padding);
  text-align: center;
}
section.testimonials .testimonial .testimonial-contents img {
  border-radius: 50%;
}
section.testimonials .testimonial .testimonial-contents p {
  max-width: 40rem;
  margin: 0 auto var(--padding);
}
section.vita {
  display: flex;
  font-size: 0.9em;
  font-weight: var(--font-weight-small);
  justify-content: space-between;
  padding: var(--padding);
}
section.vita .vita-left,
section.vita .vita-right {
  flex-basis: calc(50% - 0.5 * var(--padding));
}
section.vita .vita-left h2,
section.vita .vita-right h2 {
  font-weight: var(--font-weight-small);
  line-height: 1.5rem;
  margin: var(--padding) 0;
}
section.vita .vita-left h2 {
  color: var(--color-red);
}
section.vita .vita-right h2 {
  color: var(--color-green);
}

a {
  color: currentColor;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

strong,
b {
  font-weight: 700;
}

footer .content {
  align-items: stretch;
  background: url("/assets/iron-pattern.png");
  display: flex;
  justify-content: space-between;
  padding: calc(2 * var(--padding)) var(--padding);
}
footer address a:link {
  text-decoration: underline;
}
footer h2 {
  font-weight: 600;
  margin-bottom: 0.75rem;
}
footer iframe {
  width: 320px;
  height: 220px;
}
footer li {
  margin-right: 1.5rem;
}
footer p {
  font-size: 14px;
  font-weight: var(--font-weight-verysmall);
  letter-spacing: 0.01em;
  margin-bottom: 0;
}
footer ul {
  list-style-type: none;
  display: flex;
  margin-bottom: 1.5rem;
}

address {
  font-style: normal;
}

dd {
  margin: 0 0 var(--padding) -0.1em;
}

dl {
  margin: 0 0 0 0.8em;
}

dt {
  text-indent: -0.2em;
}
dt::before {
  content: "*";
  display: inline-block;
  position: relative;
  right: 0.4em;
  top: 0.2em;
}

p {
  margin: 0 0 var(--padding);
}

.booking p {
  font-variant-numeric: tabular-nums;
}

.tickets a {
  background-color: var(--color-white);
  border: 2px solid var(--color-red);
  color: var(--color-red);
  display: inline-block;
  font-weight: 500;
  padding: 0.3rem 1.2rem;
  text-decoration: none;
}
.tickets a:hover {
  background-color: var(--color-red);
  color: var(--color-white);
}

@media only screen and (max-width: 740px) {
  :root {
    --font-weight-main: 490;
    --font-weight-logo: 440;
    --font-weight-menu: 500;
    --font-weight-h1: 400;
    --font-weight-small: 500;
    --font-weight-verysmall: 520;
    --font-weight-transparent: 440;
  }
  header {
    position: relative;
  }
  header .content {
    flex-direction: column;
    align-items: center;
  }
  header .content .logo {
    margin-bottom: 1.5rem;
  }
  header .content .menu ul {
    flex-wrap: wrap;
  }
  article.intro {
    flex-direction: column;
  }
  section.vita {
    flex-direction: column;
  }
  footer .content {
    flex-direction: column;
  }
  footer iframe {
    display: none;
  }
}

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