body {
  font-family: "Onest", Arial, sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6,
.brand b,
.staff,
.quick strong,
.figures b {
  font-family: "Cormorant Garamond", Georgia, serif;
}

h1,
h2,
h3 {
  font-weight: 500;
}

.brand b {
  font-size: 22px;
  font-weight: 600;
}

/* Original illustrated visual system generated for ArtDHO. */
.hero {
  background-image:
    linear-gradient(90deg, rgba(244,240,231,.98) 0%, rgba(244,240,231,.91) 32%, rgba(244,240,231,.22) 62%, rgba(244,240,231,.04) 100%),
    url("hero-choir-v1.png");
  background-position: center, center;
  background-size: cover, cover;
  background-repeat: no-repeat;
}

.hero::after,
.hero .staff {
  display: none;
}

.hero .lead {
  color: #394640;
}

.history {
  position: relative;
  isolation: isolate;
  background-image:
    linear-gradient(90deg, rgba(10,31,25,.9), rgba(15,42,34,.7)),
    url("concert-texture-v1.png");
  background-position: center;
  background-size: cover;
}

.history::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, transparent, rgba(5,18,14,.28));
}

.quick a {
  min-height: 112px;
  transition: background-color .25s ease, transform .25s ease;
}

.quick a:hover {
  background-color: #204d40;
  transform: translateY(-3px);
}

.quick .music-icon {
  flex: 0 0 72px;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background-image: url("music-icons-v1.png");
  background-size: 400% 200%;
  box-shadow: inset 0 0 0 1px rgba(218,183,127,.3), 0 7px 18px rgba(0,0,0,.18);
}

.quick .icon-baton { background-position: 0 0; }
.quick .icon-book { background-position: 66.666% 0; }
.quick .icon-folder { background-position: 0 100%; }

.card::after {
  content: "♪";
  position: absolute;
  right: 24px;
  bottom: 18px;
  font: 38px "Cormorant Garamond", serif;
  color: rgba(189,138,67,.2);
  pointer-events: none;
}

.page-hero {
  position: relative;
  overflow: hidden;
  background-image:
    linear-gradient(90deg, rgba(244,240,231,.98), rgba(233,223,205,.88)),
    url("hero-choir-v1.png");
  background-position: center, right center;
  background-size: cover;
}

@media (max-width: 800px) {
  .hero {
    background-image:
      linear-gradient(180deg, rgba(244,240,231,.97) 0%, rgba(244,240,231,.9) 60%, rgba(244,240,231,.62) 100%),
      url("hero-choir-v1.png");
    background-position: center, 68% center;
  }

  .quick .music-icon {
    flex-basis: 62px;
    width: 62px;
    height: 62px;
  }
}

/* Footer */
.site-footer{position:relative;overflow:hidden;padding:0;border-top:0;display:block;color:#f5f0e6;background:#102f27;font-size:13px}
.footer-decoration{position:absolute;top:-58px;right:clamp(22px,7vw,110px);width:210px;height:210px;border:1px solid rgba(216,179,117,.22);border-radius:50%;display:grid;place-items:center;pointer-events:none}
.footer-decoration::before,.footer-decoration::after{content:"";position:absolute;inset:20px;border:1px solid rgba(216,179,117,.12);border-radius:inherit}.footer-decoration::after{inset:45px}.footer-decoration span{font:64px "Cormorant Garamond",serif;color:rgba(216,179,117,.35)}
.footer-main{position:relative;z-index:1;display:grid;grid-template-columns:1.25fr 1fr .85fr;gap:clamp(38px,7vw,110px);padding:78px clamp(24px,6vw,96px) 64px}
.footer-brand{display:flex;align-items:center;gap:15px;text-decoration:none}.footer-brand img{width:60px;height:60px;padding:7px;object-fit:contain;border:1px solid rgba(216,179,117,.38);border-radius:50%}.footer-brand b{display:block;font:600 23px/1.05 "Cormorant Garamond",serif;color:#fffaf0}.footer-brand small{display:block;margin-top:6px;color:#d8b375;font-size:10px;letter-spacing:.08em;text-transform:uppercase}
.footer-identity>p{margin:27px 0 0;color:#adc0b9;font-size:13px;line-height:1.8}.footer-label{margin:0 0 22px;color:#d8b375;font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.footer-menu{display:grid;grid-template-columns:1fr 1fr;gap:13px 25px;margin:0;padding:0;list-style:none}.footer-menu li{margin:0}.footer-menu a{color:#d9e2de;text-decoration:none;font-size:12px;transition:color .2s ease}.footer-menu a:hover{color:#d8b375}
.footer-note blockquote{margin:0 0 25px;color:#fffaf0;font:500 25px/1.35 "Cormorant Garamond",serif}.footer-admin{color:#a9bbb5;text-decoration:none;font-size:11px}
.footer-bottom{position:relative;z-index:1;display:flex;justify-content:space-between;gap:24px;padding:22px clamp(24px,6vw,96px);border-top:1px solid rgba(216,179,117,.18);color:#829c93;font-size:10px;letter-spacing:.06em;text-transform:uppercase}.footer-made a{margin-left:5px;color:#d8b375;text-decoration:none}
@media(max-width:900px){.footer-main{grid-template-columns:1fr 1fr}.footer-note{grid-column:1/-1}}
@media(max-width:600px){.footer-main{grid-template-columns:1fr;padding-top:58px}.footer-note{grid-column:auto}.footer-menu{grid-template-columns:1fr}.footer-bottom{flex-direction:column}.footer-decoration{right:-65px}}
.resource-hub{padding:100px clamp(24px,6vw,96px)}.resource-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:38px}.resource-grid>a{position:relative;min-height:240px;padding:30px;border:1px solid var(--line);background:#fff;color:var(--ink);text-decoration:none;transition:transform .25s ease,box-shadow .25s ease}.resource-grid>a:hover{transform:translateY(-5px);box-shadow:0 18px 40px rgba(35,53,47,.1)}.resource-grid span{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:var(--green);color:white;font-size:23px}.resource-grid h3{margin:35px 0 8px;font-size:29px}.resource-grid p{margin:0;color:#69716d;line-height:1.6}.resource-grid>a:nth-child(2) span{background:#d7a343}.resource-grid>a:nth-child(3) span{background:#8371bf}.resource-grid>a:nth-child(4) span{background:#d96f78}@media(max-width:700px){.resource-grid{grid-template-columns:1fr}}