:root{--primaryH: 160.0;--primaryS: 98.60%;--primaryL: 28.04%;--secondaryH: 213.9;--secondaryS: 32.39%;--secondaryL: 13.92%;}
:root{--primary-darker: hsl(var(--primaryH) var(--primaryS) 10%);--primary-dark: hsl(var(--primaryH) var(--primaryS) 20%);--primary: hsl(var(--primaryH) var(--primaryS) var(--primaryL));--primary-light: hsl(var(--primaryH) var(--primaryS) 80%);--primary-lighter: hsl(var(--primaryH) var(--primaryS) 90%);--primary-lightest: hsl(var(--primaryH) var(--primaryS) 97%);--secondary-darker: hsl(var(--secondaryH) var(--secondaryS) 10%);--secondary-dark: hsl(var(--secondaryH) var(--secondaryS) 20%);--secondary: hsl(var(--secondaryH) var(--secondaryS) var(--secondaryL));--secondary-light: hsl(var(--secondaryH) var(--secondaryS) 80%);--secondary-lighter: hsl(var(--secondaryH) var(--secondaryS) 90%)}body{color:var(--secondary-dark);font-weight:400}h1,h2,h3,h4,h5,h6{color:var(--primary);font-weight:400}a{text-decoration:none;color:var(--primary)}p{max-width:80ch}figure{max-width:4in}figure img{max-width:4in}figure figcaption{font-style:italic}.page-width,main{max-width:12in;padding-left:1rem;padding-right:1rem}body{margin:0;padding:0;display:flex;flex-direction:column;min-height:100vh}body main{flex:1}nav li.has-subpages{position:relative}nav li.has-subpages::marker{content:"»";color:var(--primary-dark)}nav li.has-subpages.submenu-open::marker{content:"–"}nav li.has-subpages>ul{display:none;padding-left:0}nav li.has-subpages.submenu-open>ul{display:block;position:absolute;z-index:999;top:2rem;left:calc(50% - 0.75in + 0.5rem);background-color:var(--primary-lightest);border:1px solid var(--primary-light);width:1.5in}nav li.has-subpages li{padding:0.2rem}nav li.has-subpages li:hover,nav li.has-subpages li:focus-within{background-color:var(--primary-lighter)}#lightbox{background-color:rgba(0,0,0,0.8);z-index:1000;border:none;position:fixed;left:0;top:0;width:100%;height:100%;padding:0}#lightbox #lightbox-top-bar{max-width:12in;margin:auto;display:flex;flex-direction:row;align-items:center;margin-bottom:0.3rem}#lightbox #lightbox-top-bar h2{font-size:20pt;margin:0;flex:1;color:white;font-weight:200;text-align:center;border:none}#lightbox button{border:none;border-radius:2px;background-color:rgba(0,0,0,0.5);color:var(--secondary-lighter);padding:1rem}#lightbox #lightbox-main{max-width:12in;margin:auto;display:flex;flex-direction:row}#lightbox #img-container{flex:1;overflow:hidden}#lightbox #img-container img{object-fit:cover;width:100%;height:100%}@font-face{font-display:swap;font-family:'Libre Caslon Text';font-style:normal;font-weight:400;src:url("/static/fonts/libre-caslon-text-v5-latin-regular.woff2") format("woff2")}@font-face{font-display:swap;font-family:'Petra Sans';font-style:normal;font-weight:300;src:url("/static/fonts/petra-sans.light.woff2") format("woff2")}@font-face{font-display:swap;font-family:'Petra Sans';font-style:normal;font-weight:400;src:url("/static/fonts/petra-sans.regular.woff2") format("woff2")}@font-face{font-display:swap;font-family:'Petra Sans';font-style:normal;font-weight:500;src:url("/static/fonts/petra-sans.medium.woff2") format("woff2")}@font-face{font-display:swap;font-family:'Petra Sans';font-style:normal;font-weight:600;src:url("/static/fonts/petra-sans.semibold.woff2") format("woff2")}@font-face{font-display:swap;font-family:'Petra Sans';font-style:normal;font-weight:700;src:url("/static/fonts/petra-sans.bold.woff2") format("woff2")}@font-face{font-display:swap;font-family:'Petra Sans';font-style:italic;font-weight:300;src:url("/static/fonts/petra-sans.light-italic.woff2") format("woff2")}@font-face{font-display:swap;font-family:'Petra Sans';font-style:italic;font-weight:400;src:url("/static/fonts/petra-sans.italic.woff2") format("woff2")}@font-face{font-display:swap;font-family:'Petra Sans';font-style:italic;font-weight:500;src:url("/static/fonts/petra-sans.medium-italic.woff2") format("woff2")}@font-face{font-display:swap;font-family:'Petra Sans';font-style:italic;font-weight:600;src:url("/static/fonts/petra-sans.semibold-italic.woff2") format("woff2")}

:root { --hero-height: 480px; }
body {
  font-family: "Petra Sans", "Cantarell", sans-serif;
  line-height: 1.47;
  font-weight: 300;
  background-color: #fbfbfb;
}
header nav ul { list-style-type: none !important; }
@media (min-width: 960px) {
  main {
    display: grid;
    grid-template-columns: 89fr 55fr;
    grid-template-areas:
      "main gallery "
      "main info    "
      "main calendar";
    padding: 1rem;
    gap: 1rem;
    width: 100%;
    margin: auto;
  }
  .page-width { margin: auto; }
  #hero { grid-area: main; }
  #gallery { grid-area: gallery; }
  #services { grid-area: info; }
  #latest-news {
    grid-area: main;
    padding-top: 1rem;
    /* HACK, https://github.com/w3c/csswg-drafts/issues/1183 */
    margin-top: var(--hero-height);
  }
  #event-calendar { grid-area: calendar; }
  #gallery h2, #services h2, #latest-news h2 { margin-top: 0; }
  /* article page */
  main > article { grid-column: 1/4; grid-row: 1/3; }
}

main h2 { border-bottom: 1px solid var(--primary); }

.service-item { margin-bottom: 0.7in; }

header nav ul {
  list-style-type: auto !important;
}
header nav li::marker {
  content: " ";
}

header nav li.has-subpages > ul {
  position: absolute !important;
  left: calc(50% - 1in + 0.5rem) !important;
  width: 2in !important;
  transition-property: all;
  transition-duration: 200ms;
  transition-behavior: allow-discrete;
  text-align: center;
}

header nav li.has-subpages.submenu-open > ul {
  position: absolute !important;
  top: 2rem !important;
  opacity: 1;
  @starting-style {
    top: 0 !important;
    opacity: 0;
  }
}



/**************** header ****************/
body > header .logotype {
  font-family: "Libre Caslon Text", serif;
  font-size: 15pt;
}
body > header .logotype a {
  font-weight: bold;
  text-decoration: none;
}
@media (min-width: 640px) {
  body > header {
    padding-top: 40px;
    padding-bottom: 10px;
  }
  body > header p, body > header li, body > header ul {
    margin: 0;
  }
  .logotype img {
    height: 60px;
    vertical-align: bottom;
    margin-right: 1rem;
  }
  body > header .page-width {
    display: flex;
  }
  body > header .logotype {
    vertical-align: bottom;
  }
  body > header .logotype a {
    display: flex;
    width: 250px;
  }
  body > header nav {
    display: flex;
    flex-direction: column;
    justify-content: end;
    margin-bottom: 0.31rem;
  }
  body > header nav ul {
    display: flex;
    flex-direction: row;
    gap: 2.2rem;
  }
}

@media (max-width: 639px) {
  .logotype {
    text-align: center;
  }
  .logotype a {
    display: flex;
    flex-direction: column;
  }
  .logotype img {
    width: 32px;
    margin: auto;
  }
  body > header {
    padding-bottom: 1rem;
  }
  body > header nav {
    display: flex;
    flex-direction: column;
    justify-content: end;
    gap: 1.6rem;
  }
  body > header nav ul {
    display: flex;
    flex-direction: row;
    list-style-type: none;
    padding-left: 0;
    margin: auto;
    gap: 1.8rem;
  }
}
@media (max-width: 500px) {
  #latest-news article { flex-direction: column !important; }
  #latest-news img {
    max-width: 100% !important;
    width: 100% !important;
    height: 60vw !important;
    object-fit: cover;
  }
}

aside { background-color: beige; }
#crumbs ul {
  padding-left: 0;
  border-bottom: 1px solid var(--primary);
  list-style-type: none;
}
#crumbs li {
  display: inline;
  margin-left: 2pt;
}
#crumbs li::before {
  content: "→ ";
  color: #999;
}
#crumbs a {
  text-decoration: none;
}
#crumbs ul li:last-child a {
  font-weight: bold;
}
#announcements { padding: 1rem; }
#announcements > p:first-of-type {
  font-weight: bold;
}
@keyframes --slide-fade-in {
  from { opacity: 0; translate: 5rem 0; }
  to { opacity: 100%; translate: 0 0; }
}
@keyframes --fade-in-2 {
  0%, 60% { opacity: 0; }
  100% { opacity: 100%; }
}
#hero {
  display: grid;
  grid-template: 1fr / 1fr;
  place-items: center;
  width: 100%;
  height: var(--hero-height);
  overflow: hidden;
}
#hero > * { grid-column: 1 / 1; grid-row: 1 / 1; }
#hero-background {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: var(--hero-height);
  width: 100%;
  animation-name: --slide-fade-in;
  animation-duration: 0.5s;
}
#hero-background img {
  position: relative;
  z-index: 100;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#hero-text {
  position: relative;
  z-index: 200;
  width: 100%;
  height: 100%;
  line-height: 1.72;
  display: flex;
  flex-direction: column;
  justify-content: end;
  text-align: center;
  background: linear-gradient(180deg, transparent 0%, transparent 50%, black 100%);
  padding: 1rem;
  animation-name: --fade-in-2;
  animation-duration: 1s;
}
#hero-text h1 {
  color: white;
  font-weight: 300;
}
#gallery ul {
  padding-left: 0;
  list-style-type: none;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.8rem;
}
#gallery ul img { width: 5rem; }
#services .service-item { clear: both; }
#latest-news article {
  display: flex;
  flex-direction: row;
  gap: 1rem;
}
#latest-news article h3 {
  margin-top: 0;
}
#latest-news img {
  max-width: 192px;
  width: 192px;
  height: 192px;
}

@media (min-width: 640px) {
  main > article figure:first-of-type {
    float: right;
    width: 50%;
    margin: 1rem;
  }
}

footer {
  background-color: var(--primary-lighter);
  margin-top: 2rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
  clear: both;
}
footer h2 {
  color:var(--primary-dark);
  font-size: 16pt;
}
footer a {
  color: var(--primary-dark);
}
#contact-footer {
  margin-bottom: 2rem;
}

@media (min-width: 960px) {
  footer .page-width { display: flex; }
  footer .page-width section { flex: 1; }
}

#services img {float:right;}