#announce {
  background: var(--yellow);
  color: var(--ink-on-yellow);          /* 11.60:1. White here would be 1.63:1. */
  display: flex; align-items: center; justify-content: center;
  gap: var(--space-s); padding: 0.6rem var(--gutter);
  font-weight: 700; letter-spacing: 0.02em; text-align: center;
  font-size: var(--step--1);
}
#announce a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
#announce-dismiss {
  background: none; border: 0; color: inherit; font-size: 1.4rem;
  line-height: 1; cursor: pointer; padding: 0 0.25rem; min-width: 44px; min-height: 32px;
}

#site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--rind); color: var(--ink-on-rind);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-m); padding: var(--space-s) var(--gutter);
}
#site-header a { color: inherit; text-decoration: none; }

.brand { display: flex; align-items: center; gap: 0.6rem; }
.brand .mark { width: 40px; height: 40px; flex: none; }
.wordmark { display: flex; flex-direction: column; line-height: 1; }
.wordmark b {
  font-weight: 800; letter-spacing: 0.01em; font-size: var(--step-0);
  text-transform: uppercase;
}
.wordmark i {
  font-style: normal; font-weight: 700; color: var(--yellow);  /* 8.17:1 on rind */
  font-size: var(--step--1); letter-spacing: 0.32em; text-transform: uppercase;
}

#site-header nav ul { display: flex; gap: var(--space-m); font-weight: 600; }
#site-header nav a:hover { color: var(--yellow); }

#site-header .cta {
  background: var(--red); color: var(--ink-on-red);
  padding: 0.7rem 1.4rem; border-radius: 999px;
  font-weight: 800; white-space: nowrap;
}

@media (max-width: 800px) {
  #site-header nav { display: none; }
  #site-header { gap: var(--space-s); }
  .wordmark b { font-size: var(--step--1); }
  #site-header .cta { padding: 0.65rem 1rem; font-size: var(--step--1); }
}

/* Small phones: the stacked wordmark wraps to three lines and pushes the order
   button off the right edge. The roundel alone carries the brand at this size —
   the accessible name lives on the link. */
@media (max-width: 460px) {
  .wordmark { display: none; }
  .brand .mark { width: 44px; }
}

/* The client's own mark, replacing the placeholder roundel. */
.brand img.mark { width: 40px; height: auto; }