:root {
  --oet-red: #ba2930;
  --oet-white: #f7f7f7;
  --oet-yellow: #e8cc46;
  --ink: #432325;
  --cream: #f7f7f7;
  --orange: #e8cc46;
}

body {
  background: var(--oet-white);
  color: var(--ink);
}

.brand span,
.eyebrow {
  color: var(--oet-yellow);
}

.nav-cta {
  border-color: var(--oet-white);
}

.subhero {
  background: var(--oet-red);
}

.subhero::before {
  background:
    linear-gradient(105deg, rgba(122, 17, 24, .97) 0%, rgba(186, 41, 48, .89) 55%, rgba(186, 41, 48, .68) 100%),
    var(--photo) center / cover no-repeat;
}

.subhero h1,
.subhero p {
  color: var(--oet-white);
}

/* The three full-width bands echo the Oeteldonk flag without adding decoration. */
.oeteldonk-flag {
  height: 72px;
  background: linear-gradient(to bottom,
    var(--oet-red) 0 33.333%,
    var(--oet-white) 33.333% 66.666%,
    var(--oet-yellow) 66.666% 100%);
  box-shadow: 0 8px 22px rgba(67, 35, 37, .09);
}

.section-kicker {
  color: #a11d25;
}

.detail h2,
.detail h3,
.more h2 {
  color: #8c1f26;
}

.detail p,
.detail li {
  color: #4f4543;
}

.detail strong {
  color: #8c1f26;
}

.aside {
  background: #fffdf3;
  border-top: 8px solid var(--oet-yellow);
  box-shadow: 0 18px 50px rgba(104, 38, 40, .12);
}

.aside .price {
  display: flex;
  align-items: baseline;
  gap: 10px;
  background: var(--oet-yellow);
  color: #402522;
  padding: 15px 20px;
  margin: 0 0 24px;
}

.aside .price small {
  font-size: 14px;
  font-weight: 700;
}

.aside dl div {
  border-color: #e7e0cb;
}

.aside dd,
.aside .note {
  color: #5c514a !important;
}

.button {
  background: var(--oet-yellow);
  color: #402522;
}

.button:hover {
  background: #f3da63;
}

.card-link {
  color: #9b2027;
  border-color: var(--oet-yellow);
}

.more {
  background: #f1e8c3;
}

.more-grid a {
  background: var(--oet-white);
  color: #8c1f26;
  border-left: 6px solid var(--oet-red);
}

.more-grid a:hover {
  background: #fff9df;
}

footer {
  background: #972128;
  color: var(--oet-white);
  border-top: 9px solid var(--oet-yellow);
}

footer .brand span {
  color: var(--oet-yellow);
}

a:focus-visible {
  outline-color: var(--oet-yellow);
}

@media (max-width: 600px) {
  .oeteldonk-flag { height: 54px; }
}