/* The header is three slots: ornament, title, ornament. Equal side widths keep
   the title optically centred; space-between pushes each sign out to the inner
   edge of the wrapper's padding, hard against the magenta rule. */
.hdr-row   { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hdr-side  { flex: 0 0 290px; width: 290px; }
.hdr-left  { margin-left: -13px; }
.hdr-right { margin-right: -13px; }
.hdr-title { flex: 1 1 auto; min-width: 0; text-align: center; }
.hdr-sign  { display: block; width: 100%; height: auto; opacity: 0.92; pointer-events: none; }
/* On a phone the row wraps: the title takes the full width and the two signs
   sit side by side beneath it, still a matched pair, just stacked. */
@media (max-width: 900px) {
    .hdr-row   { flex-wrap: wrap; justify-content: center; gap: 10px; }
    .hdr-title { order: -1; flex: 1 1 100%; }
    .hdr-side  { flex: 1 1 44%; width: auto; max-width: 300px; min-width: 130px; }
    .hdr-left, .hdr-right { margin: 0; }
}
@media (max-width: 340px) { .hdr-side { display: none; } }