header { gap: 16px; }
header .logo { flex-shrink: 0; gap: 13px; min-height: 44px; }
.logo-smile { display: block; flex-shrink: 0; width: 44px; transform: rotate(-9deg); }
.logo-smile .puppet-smile { width: 100%; height: auto; }
header .logo:focus-visible { outline: 3px dashed var(--ink); outline-offset: 6px; }
.logo-wordmark { flex-shrink: 0; }
.logo-slogan { display: block; flex-shrink: 0; font: italic 700 16px/1.1 var(--comic); white-space: nowrap; transform: rotate(-3deg); }

/* Live floor rides in the header as a little price-tag sticker. */
header .live-floor-strip { order: 2; position: static; flex: 0 1 220px; min-width: 150px; padding: 5px 10px; border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--shade,var(--ink)); font: 12px/1.3 var(--marker); transform: rotate(1.5deg); }

/* One flat row of tabs: each page is a single click away. */
.site-nav { gap: 10px; }
header .site-nav a { --tab: var(--yellow); display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 13px; border: 2px solid var(--ink); border-radius: 0; background: var(--cream); box-shadow: 3px 3px 0 var(--shade,var(--ink)); color: var(--ink); font: 16px/1.1 var(--marker); text-decoration: none; white-space: nowrap; transform: rotate(-1deg); transition: transform .15s, box-shadow .15s, background-color .15s; }
header .site-nav a:nth-child(even) { transform: rotate(1deg); }
header .site-nav a:nth-child(1) { --tab: var(--orange); }
header .site-nav a:nth-child(2) { --tab: var(--green); }
header .site-nav a:nth-child(3) { --tab: var(--blue); }
header .site-nav a:nth-child(4) { --tab: var(--yellow); }
header .site-nav a:nth-child(5) { --tab: var(--pink); }
header .site-nav a:nth-child(6) { --tab: var(--green); }
header .site-nav a:hover { background: var(--tab); outline: none; }
header .site-nav a[aria-current="page"] { background: var(--tab); box-shadow: 1px 1px 0 var(--shade,var(--ink)); text-decoration: underline wavy 2px; text-underline-offset: 5px; transform: translate(2px,2px); }
header .site-nav a:focus-visible, header .menu-toggle:focus-visible { outline: 3px dashed var(--ink); outline-offset: 4px; }
header .menu-toggle { display: none; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 10px 14px; border: 2px solid var(--ink); border-radius: 0; background: var(--yellow); box-shadow: 3px 3px 0 var(--shade,var(--ink)); color: var(--ink); font: 16px/1.2 var(--marker); white-space: nowrap; cursor: pointer; }
header .menu-toggle:hover { background: var(--orange); }
@media (min-width: 1001px) and (max-width: 1400px) {
  header .logo-slogan { display: none; }
  .site-nav { gap: 8px; }
  header .site-nav a { padding: 8px 10px; font-size: 15px; }
}
@media (max-width: 1000px) {
  header { height: 72px; padding: 0 5vw; gap: 10px; }
  header .logo { gap: 7px; }
  .logo-smile { width: 28px; }
  .logo-slogan { font-size: 12px; }
  header .live-floor-strip { order: 0; margin-left: auto; }
  header .menu-toggle { display: flex; margin-left: auto; }
  .site-nav { display: none; }
  header .site-nav.open { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); position: absolute; top: 100%; left: 0; right: 0; z-index: 25; gap: 14px; max-height: calc(100dvh - 150px); overflow-y: auto; overscroll-behavior: contain; padding: 20px 5vw 26px; border-bottom: 3px solid var(--ink); background: var(--cream); }
  header .site-nav a { font-size: 18px; transform: none; }
  header .site-nav a:nth-child(even) { transform: none; }
}
@media (max-width: 640px) {
  header .live-floor-strip { order: 10; flex: 1 0 100%; max-width: none; margin: 0; padding: 3px 8px; font-size: 11px; text-align: center; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  header .site-nav a, header .live-floor-strip { transition: none; }
}