/* Shared DOODLE ROCKS site header + navigation.
   Link after the page's own CSS and /brand.css. Add /nav.js (defer) to collapse the nav into a
   menu button on phones; without it, phones get a scrollable pill row instead. */
.site-header{--nav-ink:var(--ink,#252720);--nav-paper:var(--paper,#f4f1e9);--nav-line:#d7d5cc;--nav-orange:var(--orange,#fe623a);position:sticky;top:0;z-index:30;background:var(--nav-paper);border-bottom:1px solid #25272022;font-family:'DM Sans',sans-serif}
.site-header-inner{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:16px;max-width:1180px;min-height:64px;margin:0 auto;padding:10px 20px;background:var(--nav-paper)}
.site-header .brand{min-height:44px;font-size:19px;color:var(--nav-ink);text-decoration:none;border-radius:8px}
.site-header .brand span{font-family:'Space Grotesk',sans-serif}

.site-nav{display:flex;align-items:center;gap:4px}
.site-nav a{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 14px;border:1px solid transparent;border-radius:10px;color:var(--nav-ink);font:600 14px/1.1 'DM Sans',sans-serif;text-decoration:none;white-space:nowrap;transition:background-color .15s,border-color .15s}
.site-nav a:hover{background:#fff;border-color:var(--nav-line)}
.site-nav a[aria-current=page]{background:var(--nav-ink);border-color:var(--nav-ink);color:var(--nav-paper)}
.site-nav a > span{display:flex;flex-direction:column}
.site-nav small{display:none}
.site-nav svg{width:17px;height:17px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.site-nav a:not([aria-current=page]) svg{color:#5d5f55}
.site-header a:focus-visible,.nav-toggle:focus-visible{outline:3px solid var(--nav-orange);outline-offset:3px}

.nav-toggle{display:none}
.nav-scrim{display:none}

/* Phones, no script: a pill row under the brand that scrolls sideways if it has to. */
@media (max-width:719px){
  .site-header-inner{flex-wrap:wrap;gap:4px 12px;min-height:58px;padding:7px 16px}
  .site-header .brand{font-size:17px;gap:7px}
  .site-header .brand-doodle{width:26px;height:30px}
  .site-nav{margin:0 -16px;padding:0 16px 6px;width:calc(100% + 32px);overflow-x:auto;scrollbar-width:none}
  .site-nav::-webkit-scrollbar{display:none}
  .site-nav a{padding:0 12px;font-size:13px}
  .site-header:not([data-nav=ready]) .site-nav svg{display:none}
}

/* Phones, with nav.js: a menu button that opens a sheet of big, described destinations. */
@media (max-width:719px){
  .site-header[data-nav=ready] .site-header-inner{flex-wrap:nowrap}
  .site-header[data-nav=ready] .nav-toggle{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 14px 0 12px;border:1px solid var(--nav-line);border-radius:10px;background:#fff;box-shadow:2px 3px 0 #e2dfd5;color:var(--nav-ink);font:600 14px/1 'DM Sans',sans-serif;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .site-header.nav-open .nav-toggle{border-color:var(--nav-ink);box-shadow:2px 3px 0 var(--nav-ink)}
  .nav-toggle-icon{position:relative;width:18px;height:12px}
  .nav-toggle-icon i{position:absolute;left:0;width:18px;height:2px;border-radius:2px;background:currentColor;transition:transform .2s,opacity .2s,top .2s}
  .nav-toggle-icon i:nth-child(1){top:0}.nav-toggle-icon i:nth-child(2){top:5px}.nav-toggle-icon i:nth-child(3){top:10px}
  .nav-open .nav-toggle-icon i:nth-child(1){top:5px;transform:rotate(45deg)}
  .nav-open .nav-toggle-icon i:nth-child(2){opacity:0}
  .nav-open .nav-toggle-icon i:nth-child(3){top:5px;transform:rotate(-45deg)}

  .site-header[data-nav=ready] .site-nav{position:absolute;top:100%;left:0;right:0;width:auto;margin:0;display:none;flex-direction:column;align-items:stretch;gap:8px;padding:12px 16px 18px;overflow:visible;background:var(--nav-paper);border-bottom:1px solid #25272022;box-shadow:0 18px 28px -18px #25272055}
  .site-header.nav-open .site-nav{display:flex;animation:nav-sheet .18s ease-out}
  .site-header[data-nav=ready] .site-nav a{gap:14px;min-height:64px;padding:10px 14px;background:#fff;border:1px solid var(--nav-line);border-radius:12px;box-shadow:2px 3px 0 #e2dfd5;font-size:16px;white-space:normal}
  .site-header[data-nav=ready] .site-nav a::after{content:'→';margin-left:auto;color:var(--nav-orange);font-weight:700}
  .site-header[data-nav=ready] .site-nav a[aria-current=page]{background:#fff;color:var(--nav-ink);border-color:var(--nav-ink);box-shadow:2px 3px 0 var(--nav-ink)}
  .site-header[data-nav=ready] .site-nav a[aria-current=page]::after{content:'Here';padding:4px 8px;border-radius:20px;background:var(--nav-ink);color:var(--nav-paper);font-size:10px;letter-spacing:1px;text-transform:uppercase}
  .site-header[data-nav=ready] .site-nav svg{box-sizing:content-box;width:20px;height:20px;padding:9px;border-radius:50%;background:var(--nav-paper);color:var(--nav-ink)}
  .site-header[data-nav=ready] .site-nav a[aria-current=page] svg{background:var(--nav-orange)}
  .site-header[data-nav=ready] .site-nav small{display:block;margin-top:3px;font-size:12px;font-weight:400;color:#6b6d63}
  .site-header.nav-open .nav-scrim{display:block;position:fixed;inset:0;z-index:0;background:#25272040;animation:nav-fade .18s ease-out}
}
@media (max-width:359px){.site-header[data-nav=ready] .brand span{font-size:15px}.site-header[data-nav=ready] .nav-toggle-label{display:none}.site-header[data-nav=ready] .nav-toggle{padding:0 13px}}
@keyframes nav-sheet{from{opacity:0;transform:translateY(-8px)}}
@keyframes nav-fade{from{opacity:0}}
@media (prefers-reduced-motion:reduce){.site-nav,.nav-scrim,.nav-toggle-icon i{animation:none!important;transition:none!important}}

/* "made by SlopOverflow", added by nav.js next to the brand. */
.brand-group{display:flex;align-items:center;gap:14px;min-width:0}
.made-by{display:flex;align-items:center;gap:6px;min-height:44px;color:var(--muted,#78796f);text-decoration:none;font:600 10px/1 'DM Sans',sans-serif;letter-spacing:.8px;text-transform:uppercase;white-space:nowrap}
.made-by img{display:block;width:auto;height:18px}
@media (max-width:719px){.brand-group{flex-direction:column;align-items:flex-start;gap:0}.made-by{min-height:0;margin:-6px 0 2px 2px;gap:4px;font-size:8px}.made-by img{height:12px}}