/* Accent tones interpreted from the Instagram logo; the original base palette stays intact. */
:root {
  --brand-teal: #296b68;
  --brand-copper: #a65333;
  --brand-gold: #bc8b43;
  --brand-blue: #345365;
  --brand-gold-light: #dfb477;
}

.header::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 5.6%;
  width: 108px;
  height: 3px;
  background: linear-gradient(to right,
    var(--brand-teal) 0 40%,
    var(--brand-copper) 40% 65%,
    var(--brand-gold) 65% 85%,
    var(--brand-blue) 85% 100%);
}

.wordmark-dot { color: var(--brand-copper); }
.wordmark.has-logo { display: inline-flex; align-items: center; flex-shrink: 0; }
.brand-logo { display: block; width: auto; max-width: 180px; height: 88px; object-fit: contain; }
.footer-top .brand-logo { height: 110px; }
@media (max-width:760px) {
  .header .brand-logo { height: 64px; max-width: 150px; }
}
.announcement span { color: var(--brand-gold-light); }
.fine-rule { background: var(--brand-copper); }
.hero-frame { border-bottom: 4px solid var(--brand-copper); }
.hero-placeholder { border-color: #618b7e; }
.placeholder-monogram { color: var(--brand-gold-light); }
.nav-commission { border-color: var(--brand-copper); }
.nav-commission span { color: var(--brand-copper); }
.text-link { text-decoration-color: var(--brand-copper); border-color: var(--brand-copper); }
.text-link:hover, nav a:hover { color: var(--brand-copper); }

.studio-strip span:nth-child(2) { color: var(--brand-copper); }
.studio-strip span:nth-child(4) { color: var(--brand-teal); }
.studio-strip span:nth-child(6) { color: var(--brand-gold); }
.section-heading h2 em, .center-heading h2 em { color: var(--brand-teal); }
.filters button.active { color: var(--brand-teal); border-color: var(--brand-copper); }

.art-card:nth-child(3n+2) .art-media { background: #eee0d3; }
.art-card:nth-child(3n+2) .work-placeholder { border-color: #bb9674; }
.art-card:nth-child(3n+2) .work-index { color: var(--brand-copper); }
.art-card:nth-child(3n) .art-media { background: #dce7e4; }
.art-card:nth-child(3n) .work-placeholder { border-color: #8eafaa; }
.art-card:nth-child(3n) .work-index { color: var(--brand-teal); }
.card-arrow { color: var(--brand-teal); border-color: #99bab0; }
.art-button:hover .card-arrow { color: var(--brand-copper); border-color: var(--brand-copper); }
.studio-image { border-left: 3px solid var(--brand-gold); }
.signature { color: var(--brand-teal); }

.commission-intro h2 em, .step-number { color: var(--brand-gold-light); }
.commissions .button.light {
  background: var(--brand-copper);
  border-color: #c8835e;
  color: #fff;
}
.commissions .button.light:hover { background: #8d4328; }

.quote-card { border-top: 2px solid var(--brand-gold); }
.quote-card:nth-child(2) { border-top-color: var(--brand-copper); }
.quote-card:nth-child(3) { border-top-color: var(--brand-teal); }
.quote-mark { color: var(--brand-copper); }
.faq summary::after { color: var(--brand-teal); }
.closing { border-top: 2px solid var(--brand-gold); }
.footer-top > a:last-child { color: var(--brand-teal); }

button:focus-visible, a:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, summary:focus-visible {
  outline-color: var(--brand-copper);
}

@media (max-width:760px) {
  .header::after { left: 6%; width: 90px; }
}