/* Three takes on the panel header, on top of panel/theme.css. A comparison
   sheet, not part of the design contract: the chosen one moves into
   panel/theme.css and build.py, the rest is deleted. */
body { display: block; }
.hv-note { max-width: 60rem; margin: 2rem auto 0; padding: 0 1.5rem; }
.hv-note h1 { font-size: 1.6rem; font-weight: 600; margin-bottom: .4rem; }
.hv-label { max-width: 1344px; margin: 2.6rem auto .6rem; padding: 0 1.5rem; display: flex; gap: 1rem; align-items: baseline; }
.hv-label b { font-family: var(--sp-mono); font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--sp-brick); }
.hv-label span { color: var(--sp-muted); }
.hv-frame { border-block: 1px solid var(--sp-rule); background: var(--sp-paper); padding-bottom: 1.5rem; }
.hv-frame .sp-head { margin: 1.6rem 0 0; }

.hv-word { width: auto; display: block; }
.navbar-brand img.hv-word { max-height: none; height: 1.45rem; }

/* A — brick bar, wordmark, the stamp's real edge: round holes of page colour
   bitten into the bar, hole wider than tooth (r / pitch = 5 / 16, the mark's
   2.2 / 7.03). */
.hv-a .hv-perf {
  height: 5px; margin-top: -5px; position: relative; z-index: 31; /* above Bulma's navbar (30) */
  background: radial-gradient(circle at 8px 5px, var(--sp-paper) 5px, transparent 5.6px);
  background-size: 16px 5px; background-repeat: repeat-x;
}

/* C — the header is the stamp: its paper, its ink hairline, its perforation;
   brick is only the block behind the name, as on the mark. */
.hv-c .navbar { background: var(--sp-stamp-paper); --bulma-navbar-height: 4rem; }
.hv-c .navbar-item, .hv-c .navbar-link { color: var(--sp-ink); font-weight: 500; }
.hv-c .navbar-link::after { border-color: var(--sp-brick); }
.hv-c .hv-brand { background: var(--sp-brick); padding: .7rem 1.1rem; margin-block: .55rem; margin-right: 1rem; display: flex; align-items: center; }
.hv-c .hv-current { box-shadow: inset 0 -3px 0 var(--sp-brick); color: var(--sp-brick); }
.hv-c .hv-perf { height: 7px; background: url("perf-edge.svg") repeat-x; background-size: 16px 7px; }
.hv-b .sp-subnav, .hv-a .sp-subnav, .hv-c .sp-subnav { margin-top: 0; }