/* Spearhead Stock: the header and footer every page wears.
 *
 * partials/site-nav.blade.php and partials/site-footer.blade.php draw them; this is how they look.
 * It is loaded by the site layout, the home page and Browse (16 Sep 2026). Home and Browse are
 * self-contained documents that do not load site.css, which is why each of them used to carry its
 * own copy of these rules, and why the copies drifted.
 *
 * Only tokens are borrowed from the page (--bg, --ink, --hair and friends), so the same markup
 * takes each page's palette. A page's own look is a modifier on the root element:
 *   .topnav--site     glass bar, 36px icons (the default look)
 *   .topnav--home     solid bar, 44px icons and call to action
 *   .topnav--browse   solid, full-width compact bar with the search and wallet between links and
 *                     tools, its icons in one track, and a 69px height the sticky filters rely on
 *   .sitefoot--site / --home / --browse, likewise.
 */

/* ── keyboard access ──────────────────────────────────────────────────────── */
/* Off-screen until focused, so the first Tab on any page jumps past the header. */
.skip{position:absolute;left:12px;top:-52px;z-index:300;padding:10px 16px;border-radius:10px;
      background:var(--surface);border:1px solid var(--hair-2);color:var(--ink);font-size:14px;
      transition:top .18s var(--ease,cubic-bezier(.2,.8,.2,1))}
.skip:focus{top:12px}

/* A bar pinned to the foot of the screen ([data-foot-bar]: the cookie choice, the tour's offer)
   pads the page by its height while it shows, set by chrome.js, so the end of the page scrolls
   clear of it and a focused control is never scrolled in underneath it. */
html.has-foot-bar{padding-bottom:var(--foot-clear,0px);scroll-padding-bottom:var(--foot-clear,0px)}

/* ── the bar ──────────────────────────────────────────────────────────────── */
/* Every interactive target in the site and home bars is at least 44px in its smaller dimension
   where there is room for it, and never under the 24px WCAG 2.5.8 asks for. */
.topnav{position:sticky;top:0;z-index:60;background:var(--nav);
        -webkit-backdrop-filter:blur(22px) saturate(1.3);backdrop-filter:blur(22px) saturate(1.3);
        border-bottom:1px solid var(--hair)}
.topnav-row{max-width:1400px;margin:0 auto;padding:0 clamp(18px,3vw,34px);
            min-height:64px;display:flex;align-items:center;gap:clamp(14px,3vw,38px)}
.wordmark{font-family:var(--display);font-size:22px;letter-spacing:-.02em;color:var(--ink);
          white-space:nowrap;display:flex;align-items:center;min-height:44px;text-decoration:none}
.wordmark:hover{color:var(--ink)}
.wordmark sup{font-size:.42em;font-style:normal;font-family:var(--ui,system-ui);letter-spacing:0;
              vertical-align:.95em;margin-left:.06em}

.navlinks{display:flex;align-items:center;gap:clamp(10px,1.8vw,26px);font-size:14.5px;color:var(--muted)}
.navlinks a{color:inherit;text-decoration:none;white-space:nowrap;display:flex;align-items:center;
            min-height:44px;padding:0 2px;
            transition:color .22s ease,transform .22s var(--ease,cubic-bezier(.2,.8,.2,1))}
.navlinks a:hover,.navlinks a[aria-current]{color:var(--ink)}
.navlinks > a:hover{transform:translateY(-1px)}

.navtools{margin-left:auto;display:flex;align-items:center;gap:10px}
.navclock{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--faint);
          white-space:nowrap;font-variant-numeric:tabular-nums}
.navclock .dot{width:6px;height:6px;border-radius:3px;background:var(--accent);flex:0 0 auto}
.navclock .tz{color:var(--dim)}
.navicons{display:flex;align-items:center;gap:10px}

.themetoggle{width:52px;height:28px;border-radius:15px;border:1px solid var(--hair-2);
             background:var(--raised);position:relative;cursor:pointer;flex:0 0 auto}
.themetoggle > div{position:absolute;top:2px;left:2px;width:22px;height:22px;border-radius:12px;
                   background:var(--ink);transition:transform .32s var(--ease,cubic-bezier(.2,.8,.2,1))}

.iconbtn{position:relative;display:grid;place-items:center;width:36px;height:36px;border:0;
         border-radius:14px;background:transparent;color:var(--muted);cursor:pointer;
         font:inherit;transition:background .16s ease,color .16s ease}
.iconbtn:hover{background:var(--raised);color:var(--ink)}
.iconbtn .count{position:absolute;top:1px;right:1px;min-width:16px;height:16px;padding:0 4px;
                border-radius:8px;background:var(--fill);color:var(--on-fill);font-size:10.5px;
                font-weight:700;display:grid;place-items:center;font-variant-numeric:tabular-nums}
.iconbtn[data-empty="true"] .count{display:none}

/* Sign in, Sign out and Become a member: one pill shape, filled for the call, outlined otherwise. */
.navcta{font-family:var(--ui);height:40px;padding:0 19px;border-radius:21px;border:0;cursor:pointer;
        background:var(--fill);color:var(--on-fill);display:inline-flex;align-items:center;
        justify-content:center;font-size:14.5px;font-weight:600;white-space:nowrap;text-decoration:none;
        transition:transform .25s var(--ease,cubic-bezier(.2,.8,.2,1)),box-shadow .25s ease,border-color .25s ease}
.navcta:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(0,0,0,.3);color:var(--on-fill)}
.navcta--ghost{background:transparent;border:1px solid var(--hair-2);color:var(--ink);font-weight:500}
.navcta--ghost:hover{border-color:var(--ink);box-shadow:none;color:var(--ink)}

.navburger{display:none;width:44px;height:44px;align-items:center;justify-content:center;
           background:none;border:0;color:var(--ink);cursor:pointer;border-radius:10px}
.navburger:hover{background:var(--raised)}

/* The drawer's extra rows (downloads, account, sign in, join) exist only while it is a drawer. */
.navdrawer{display:none}
.navdrawer form{margin:0}
.navdrawer-btn{display:flex;align-items:center;width:100%;min-height:52px;padding:0 clamp(18px,4vw,34px);
               background:none;border:0;font:inherit;font-size:16px;color:inherit;cursor:pointer;text-align:left}
.navdrawer-btn:hover,.navdrawer-btn:focus-visible{background:var(--raised);color:var(--ink)}
.navdrawer .nd-join{display:none}

/* ── the Create menu ──────────────────────────────────────────────────────────
   Written to outrank `.navlinks a`, which would otherwise flatten each item into one line. */
.navmake{position:relative;display:inline-flex}
.navmake-btn{display:inline-flex;align-items:center;gap:5px;background:none;border:0;padding:0 2px;
             font:inherit;color:inherit;cursor:pointer;white-space:nowrap}
.navmake-btn:hover,.navmake-btn[aria-expanded="true"],.navmake-btn[aria-current]{color:var(--ink)}
.navmake-chev{transition:transform .2s ease;opacity:.65}
.navmake-btn[aria-expanded="true"] .navmake-chev{transform:rotate(180deg)}

.navmake-menu{position:absolute;left:50%;top:calc(100% + 12px);transform:translateX(-50%);
              width:320px;z-index:60;padding:8px;border-radius:16px;
              background:var(--surface);border:1px solid var(--hair);
              box-shadow:0 20px 50px rgba(0,0,0,.26);display:grid;gap:2px}
.navmake-menu[hidden]{display:none}
/* A small notch, so the card reads as belonging to the button above it. */
.navmake-menu::before{content:"";position:absolute;left:50%;top:-5px;width:10px;height:10px;
                      transform:translateX(-50%) rotate(45deg);background:var(--surface);
                      border-left:1px solid var(--hair);border-top:1px solid var(--hair);border-radius:2px}
.navmake-menu a.navmake-item{display:grid;gap:4px;align-items:start;white-space:normal;
                             min-height:0;padding:11px 13px;border-radius:11px;
                             text-decoration:none;color:var(--muted);transform:none;
                             transition:background-color .18s ease}
.navmake-menu a.navmake-item:hover,
.navmake-menu a.navmake-item:focus-visible,
.navmake-menu a.navmake-item[aria-current]{background:var(--raised)}
.navmake-name{display:inline-flex;align-items:center;gap:6px;font-size:14.5px;line-height:1.2;
              font-weight:600;letter-spacing:-.005em;color:var(--ink)}
.navmake-menu a.navmake-item[aria-current] .navmake-name{color:var(--accent)}
.navmake-spark{flex:none;color:var(--accent);opacity:.95}
.navmake-said{font-size:12px;line-height:1.45;color:var(--faint)}
.navmake-menu a.navmake-item:hover .navmake-said{color:var(--muted)}
/* A sub-item: Header video, under Spearhead Studio (17 Sep 2026). Indented with a small elbow
   that ties it to the entry above, and pulled up so the two read as one group. */
.navmake-menu a.navmake-item.navmake-sub{margin:-6px 0 2px 16px;padding:7px 13px 9px 12px;gap:2px}
.navmake-sub .navmake-name{font-size:13.5px;font-weight:500}
.navmake-branch{flex:none;width:9px;height:9px;margin:-5px 1px 0 0;border-left:1.5px solid var(--hair-2,var(--hair));
  border-bottom:1.5px solid var(--hair-2,var(--hair));border-bottom-left-radius:3px}
.navmake-vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ── the library switcher ─────────────────────────────────────────────────────
   partials/library-switcher.blade.php (23 Sep 2026). A pill naming the library, and a card
   listing it with the cities on the way. For now San Diego is the only choice: the others are
   disabled radios marked "Coming soon". It sits beside the search it scopes, at that search's
   height, and never in the header (Brady, 23 Sep 2026). */
.libsw{position:relative;flex:0 0 auto;text-align:left}
.libsw-btn{position:relative;display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 11px 0 10px;
           border-radius:17px;border:1px solid var(--hair-2);background:var(--raised);color:var(--ink);
           font:500 13px/1 var(--ui,system-ui);white-space:nowrap;cursor:pointer;
           transition:border-color .2s ease,background-color .2s ease}
/* 34px drawn, 44px to tap. */
.libsw-btn::after{content:"";position:absolute;inset:-5px -2px}
.libsw-btn:hover,.libsw-btn[aria-expanded="true"]{border-color:var(--ink)}
.libsw-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.libsw-pin{flex:none;color:var(--accent)}
.libsw-chev{flex:none;opacity:.65;transition:transform .2s ease}
.libsw-btn[aria-expanded="true"] .libsw-chev{transform:rotate(180deg)}

.libsw-menu{position:absolute;left:0;top:calc(100% + 10px);z-index:70;width:300px;max-width:calc(100vw - 24px);
            max-height:calc(100vh - 110px);overflow-y:auto;padding:8px;border-radius:16px;
            background:var(--surface);border:1px solid var(--hair);box-shadow:0 20px 50px rgba(0,0,0,.26);
            color:var(--ink);font-family:var(--ui,system-ui);text-shadow:none}
.libsw-menu[hidden]{display:none}
.libsw-list{border:0;margin:0;padding:0;min-width:0;display:grid;gap:1px}
.libsw-legend{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.libsw-opt{position:relative;display:flex;align-items:center;gap:10px;min-height:40px;padding:0 12px;
           border-radius:11px;font-size:14.5px;line-height:1.25}
/* The radios do the work (checked, disabled, arrow keys, what a screen reader says); the row is the look. */
.libsw-opt input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.libsw-opt--on{background:var(--raised);font-weight:600;cursor:default}
.libsw-opt--on:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:-2px}
.libsw-tick{flex:none;margin-left:auto;color:var(--accent)}
.libsw-opt--soon{color:var(--faint);cursor:not-allowed}
.libsw-soon{margin-left:auto;flex:none;padding:3px 8px;border-radius:999px;border:1px solid var(--hair-2);
            font-size:11px;font-weight:500;letter-spacing:.02em;color:var(--faint);white-space:nowrap}
.libsw-head{padding:12px 12px 4px;font-size:11px;font-weight:500;letter-spacing:1.2px;text-transform:uppercase;color:var(--faint)}

.libsw-foot{margin-top:6px;padding:6px 4px 2px;border-top:1px solid var(--hair)}
.libsw-ask{display:inline-flex;align-items:center;min-height:36px;padding:0 8px;border:0;border-radius:9px;background:none;
           color:var(--accent);font:600 13.5px/1 var(--ui,system-ui);cursor:pointer}
.libsw-ask:hover{background:var(--raised)}
.libsw-ask:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.libsw-notify{display:grid;gap:9px;padding:4px 8px 6px}
.libsw-notify[hidden]{display:none}
.libsw-field{display:grid;gap:4px;font-size:12px;color:var(--faint)}
/* 16px so a phone does not zoom the page when the field is tapped. */
.libsw-field input,.libsw-field select{width:100%;height:40px;padding:0 10px;border-radius:10px;border:1px solid var(--hair-2);
           background:var(--bg);color:var(--ink);font:16px var(--ui,system-ui);box-sizing:border-box}
.libsw-field input:focus-visible,.libsw-field select:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.libsw-send{height:40px;border:0;border-radius:12px;background:var(--fill);color:var(--on-fill);
            font:600 14.5px/1 var(--ui,system-ui);cursor:pointer}
.libsw-send[disabled]{opacity:.6;cursor:progress}
.libsw-send:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.libsw-fine{margin:0;font-size:12px;line-height:1.45;color:var(--faint)}
.libsw-said{margin:0;font-size:13px;line-height:1.45;color:var(--accent)}
.libsw-said:empty{display:none}
.libsw-said[data-state="error"]{color:#E5806B}
:root[data-theme="light"] .libsw-said[data-state="error"]{color:#A63A22}

/* Browse: inside its search box, at the left, where the magnifier would be. Browse's own
   stylesheet makes room for it in the field (--libsw-w, set by chrome.js). */
.libsw--search{position:absolute;left:5px;top:50%;transform:translateY(-50%);z-index:3}
.libsw--search .libsw-btn{height:32px;padding:0 10px 0 9px;border-radius:12px;font-size:13px;background:var(--raised)}
.libsw--search .libsw-word{display:none}
.libsw--search .libsw-btn::after{inset:-5px -2px}
.libsw--search .libsw-menu{top:calc(100% + 10px)}

/* Beside a page's own search field (Prints): the same height, radius and surface as that field. */
.libsw--field .libsw-btn{height:var(--pfind-h,58px);padding:0 16px 0 14px;border-radius:15px;gap:7px;font-size:14.5px;
  background:var(--surface);border:1px solid var(--hair-2)}
.libsw--field .libsw-btn::after{inset:0}
.libsw--field .libsw-menu{top:calc(100% + 8px);z-index:95}

/* Spearhead Scout: beside the ask field, in the field's own glass and at its height (--ai-line),
   a pill like the field and the Ask button. */
.libsw--ask .libsw-btn{height:var(--ai-line,46px);padding:0 16px 0 14px;border-radius:calc(var(--ai-line,46px) / 2);gap:7px;
  font-size:14px;color:#fff;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22)}
.libsw--ask .libsw-btn:hover,.libsw--ask .libsw-btn[aria-expanded="true"]{border-color:var(--accent-media,var(--accent))}
.libsw--ask .libsw-btn::after{inset:0}
.libsw--ask .libsw-pin{color:var(--accent-media,var(--accent))}
.libsw--ask .libsw-menu{top:calc(100% + 8px);z-index:95}

/* Spearhead Studio: a small pill at the right of the kicker row, on the dark card, its menu
   opening leftward under it so it stays inside the card. Spearhead Social's (title) is the same
   pill beside its own name. */
.libsw--kicker .libsw-btn,.libsw--title .libsw-btn{height:34px;padding:0 12px 0 10px;font-size:13px;color:#fff;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2)}
.libsw--kicker .libsw-btn:hover,.libsw--kicker .libsw-btn[aria-expanded="true"],
.libsw--title .libsw-btn:hover,.libsw--title .libsw-btn[aria-expanded="true"]{border-color:#7FE3D0}
.libsw--kicker .libsw-pin,.libsw--title .libsw-pin{color:#7FE3D0}
.libsw--kicker .libsw-menu,.libsw--title .libsw-menu{left:auto;right:0;top:calc(100% + 8px)}
@media (max-width:560px){ .libsw--kicker .libsw-word,.libsw--title .libsw-word{display:none} }

/* Home: the pill beside the hero search, in the same glass as the chips under it. */
.libsw--hero .libsw-btn{height:var(--hero-find-h,48px);padding:0 16px 0 14px;border-radius:clamp(14px,1.4vw,20px);gap:7px;font-size:14px;color:#fff;
  background:linear-gradient(rgba(255,255,255,.22),rgba(255,255,255,.11));border:.5px solid rgba(255,255,255,.4);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:inset 0 1px 0 rgba(255,255,255,.28)}
.libsw--hero .libsw-btn:hover,.libsw--hero .libsw-btn[aria-expanded="true"]{border-color:rgba(255,255,255,.8)}
.libsw--hero .libsw-btn::after{inset:0}
.libsw--hero .libsw-pin{color:var(--accent-media,var(--accent))}
.libsw--hero .libsw-menu{top:calc(100% + 8px);z-index:95}
@media (max-width:700px){
  .libsw--hero .libsw-menu{left:50%;transform:translateX(-50%)}
}

/* ── page modifiers ───────────────────────────────────────────────────────── */
/* Home: the bar sits over a full-bleed film, so it is solid rather than frosted. */
.topnav--home,.topnav--browse{background:var(--nav-solid,var(--nav));
                              -webkit-backdrop-filter:none;backdrop-filter:none}
.topnav--home .iconbtn{width:44px;height:44px}
.topnav--home .navcta{height:44px;border-radius:22px}
/* The page leads with one call; the account icon is the way in. */
.topnav--home .navauth-signin{display:none}

/* Browse: the grid is the page. A full-width bar, no clock, the search and credit wallet between
   the links and the tools, and saved/cart/downloads/account in one track. 69px tall: the sticky
   sidebar and filter row sit at top:69px. No backdrop-filter on this sticky bar: it made the
   browser composite the whole grid behind it, and past a certain height painting stopped. */
.topnav--browse .topnav-row{max-width:none;padding:13px 24px;min-height:0;gap:18px}
.topnav--browse .wordmark{font-size:21px;min-height:0}
.topnav--browse .navlinks{gap:18px;flex:0 0 auto}
.topnav--browse .navlinks a{min-height:42px;padding:0}
.topnav--browse .navtools{margin-left:0;gap:18px}
.topnav--browse .navclock{display:none}
.topnav--browse .navicons{gap:2px;height:42px;padding:3px;border-radius:17px;
                          background:var(--surface);border:1px solid var(--hair)}
.topnav--browse .iconbtn:hover{background:var(--thumb,var(--raised))}
.topnav--browse .navburger{width:42px;height:42px}
.topnav--browse .navauth{display:none}
@media (min-width:1700px){ .topnav--browse .navauth{display:inline-flex} }
@media (max-width:1400px){ .topnav--browse .navlinks{gap:14px} }

/* ── narrower windows ─────────────────────────────────────────────────────── */
/* The tools never shrink, so the row ran past the window between 901px and about 1240px on every
   page but home. The clock and the outlined Sign in step out first, then the links fold into
   the menu. */
@media (max-width:1240px){
  .navclock,.navauth-signin{display:none}
}
/* The site bar also carries Sign in, which squeezed onto two lines at 1280px; its clock goes first. */
@media (max-width:1340px){
  .topnav--site .navclock{display:none}
}

/* The drawer. Kept in the DOM and toggled with [hidden] so the markup order, and therefore the
   tab order, is the same on both layouts. chrome.js treats a visible burger as "drawer mode",
   so these breakpoints are the only place the switch is defined. Site and home fold at 1120px,
   Browse (which has the search and the library pill in the same row) at 1560px, so the search
   always keeps room to type; below 1060px its search takes a row of its own. The two blocks are
   the same rules. */
@media (max-width:1120px){
  .topnav:not(.topnav--browse) .topnav-row{gap:10px}
  .topnav:not(.topnav--browse) .navwide{display:none}
  .topnav:not(.topnav--browse) .navburger{display:flex}
  .topnav:not(.topnav--browse) .navlinks{position:absolute;left:0;right:0;top:100%;flex-direction:column;
    align-items:stretch;gap:0;background:var(--bg);border-bottom:1px solid var(--hair);
    box-shadow:0 18px 40px rgba(0,0,0,.24);padding:6px 0;max-height:calc(100vh - 80px);overflow-y:auto}
  .topnav:not(.topnav--browse) .navlinks[hidden]{display:none}
  .topnav:not(.topnav--browse) .navlinks a{padding:0 clamp(18px,4vw,34px);min-height:52px;font-size:16px;transform:none}
  .topnav:not(.topnav--browse) .navlinks a:hover,
  .topnav:not(.topnav--browse) .navlinks a:focus-visible{background:var(--raised);color:var(--ink)}
  .topnav:not(.topnav--browse) .navdrawer{display:block;border-top:1px solid var(--hair);margin-top:6px;padding-top:6px}
  .topnav:not(.topnav--browse) .navmake{display:block}
  .topnav:not(.topnav--browse) .navmake-btn{width:100%;justify-content:space-between;min-height:52px;
    padding:0 clamp(18px,4vw,34px);font-size:16px}
  .topnav:not(.topnav--browse) .navmake-menu{position:static;transform:none;width:auto;padding:0 0 8px;
    border:0;background:none;box-shadow:none}
  .topnav:not(.topnav--browse) .navmake-menu::before{display:none}
  .topnav:not(.topnav--browse) .navmake-menu a.navmake-item{padding:10px clamp(26px,5vw,42px);border-radius:0;min-height:0}
  .topnav:not(.topnav--browse) .navmake-menu a.navmake-item.navmake-sub{margin:-4px 0 2px;padding:6px clamp(26px,5vw,42px) 9px calc(clamp(26px,5vw,42px) + 16px)}
}
@media (max-width:1560px){
  .topnav--browse .navburger{display:flex}
  .topnav--browse .navlinks{position:absolute;left:0;right:0;top:100%;flex-direction:column;
    align-items:stretch;gap:0;background:var(--bg);border-bottom:1px solid var(--hair);
    box-shadow:0 18px 40px rgba(0,0,0,.24);padding:6px 0;max-height:calc(100vh - 130px);overflow-y:auto}
  .topnav--browse .navlinks[hidden]{display:none}
  .topnav--browse .navlinks a{padding:0 clamp(18px,4vw,34px);min-height:52px;font-size:16px;transform:none}
  .topnav--browse .navlinks a:hover,
  .topnav--browse .navlinks a:focus-visible{background:var(--raised);color:var(--ink)}
  .topnav--browse .navdrawer{display:block;border-top:1px solid var(--hair);margin-top:6px;padding-top:6px}
  .topnav--browse .navmake{display:block}
  .topnav--browse .navmake-btn{width:100%;justify-content:space-between;min-height:52px;
    padding:0 clamp(18px,4vw,34px);font-size:16px}
  .topnav--browse .navmake-menu{position:static;transform:none;width:auto;padding:0 0 8px;
    border:0;background:none;box-shadow:none}
  .topnav--browse .navmake-menu::before{display:none}
  .topnav--browse .navmake-menu a.navmake-item{padding:10px clamp(26px,5vw,42px);border-radius:0;min-height:0}
  .topnav--browse .navmake-menu a.navmake-item.navmake-sub{margin:-4px 0 2px;padding:6px clamp(26px,5vw,42px) 9px calc(clamp(26px,5vw,42px) + 16px)}
  /* The bar has no room for the calls here, so the drawer carries them. */
  .topnav--browse .navdrawer .nd-join{display:flex}
}
/* Browse keeps downloads and account in its track until the phone needs the room. */
@media (min-width:561px){ .topnav--browse .navdrawer .nd-icons{display:none} }
@media (max-width:1060px){
  .topnav--browse .topnav-row{flex-wrap:wrap;row-gap:9px}
  .topnav--browse .navtools{margin-left:auto}
}
@media (max-width:700px){
  .topnav--browse .topnav-row{padding:11px 14px;gap:11px}
  .topnav--browse .navtools{gap:11px}
}
@media (max-width:560px){
  .navcta{font-size:13px;padding:0 14px}
  .wordmark{font-size:19px}
  .topnav--browse .navwide{display:none}
}
@media (max-width:520px){
  /* The drawer carries the call instead: below this the bar ran past a phone held sideways. */
  .navauth-join{display:none}
  .topnav .navdrawer .nd-join{display:flex}
}
@media (max-width:360px){
  /* The smallest phones: the wordmark and the spacing give way before anything else does. */
  .topnav-row,.topnav--browse .topnav-row{gap:6px}
  .navicons{gap:4px}
  .wordmark,.topnav--browse .wordmark{font-size:17px}
  .topnav--home .iconbtn{width:40px}
}

/* ── the footer ───────────────────────────────────────────────────────────── */
.sitefoot{position:relative;z-index:2;padding:clamp(36px,5vw,68px) 0 clamp(28px,4vw,44px)}
.sitefoot-wrap{max-width:1400px;margin:0 auto;padding:0 clamp(18px,3vw,34px)}
.sitefoot-close{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:32px;
                padding-bottom:clamp(40px,6vw,80px);border-bottom:1px solid var(--hair)}
.sitefoot-head{font-family:var(--display);font-weight:var(--display-weight,400);font-size:clamp(34px,6vw,86px);
               line-height:.96;letter-spacing:-.03em;margin:0;max-width:16em;text-wrap:balance}
.sitefoot-head .em{font-style:italic;color:var(--accent)}
.sitefoot-acts{display:flex;flex-wrap:wrap;gap:11px}
.sitefoot-btn{font-family:var(--ui);height:48px;padding:0 26px;border-radius:14px;background:var(--fill);
              color:var(--on-fill);display:inline-flex;align-items:center;justify-content:center;
              font-size:15.5px;font-weight:600;text-decoration:none;border:0;
              transition:transform .25s var(--ease,cubic-bezier(.2,.8,.2,1)),box-shadow .25s ease,border-color .25s ease}
.sitefoot-btn:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(0,0,0,.3);color:var(--on-fill)}
.sitefoot-btn--ghost{background:transparent;border:1px solid var(--hair-2);color:var(--ink);font-weight:500}
.sitefoot-btn--ghost:hover{border-color:var(--ink);box-shadow:none;color:var(--ink)}
.sitefoot-base{display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between;
               padding-top:clamp(24px,3vw,36px);font-size:13px;color:var(--faint)}
.sitefoot-mark{font-family:var(--display);font-size:17px;color:var(--muted);letter-spacing:-.02em}
.sitefoot-mark sup{font-size:.42em;font-style:normal;font-family:var(--ui,system-ui);letter-spacing:0;
                   vertical-align:.95em;margin-left:.06em}
.sitefoot-links{display:flex;flex-wrap:wrap;gap:6px 18px;font-variant-numeric:tabular-nums}
.sitefoot-links a{text-decoration:none}
.sitefoot-back{font-size:13.5px;line-height:1.45;color:var(--faint)}

/* Home: the section above ends with its own padding. */
.sitefoot--home{padding-top:0}
/* Browse: no close; a hairline and one compact row across the full width. */
.sitefoot--browse{margin-top:40px;padding:26px 24px;border-top:1px solid var(--hair);z-index:auto}
.sitefoot--browse .sitefoot-wrap{max-width:none;padding:0}
.sitefoot--browse .sitefoot-base{padding-top:0;gap:20px}
/* The back office: one quiet line. */
.sitefoot--admin{padding:24px 0 32px}

/* The Spearhead Media mark beside the company line; takes the text color. */
.sm-mark{display:inline-block;width:1.1em;height:1.35em;vertical-align:-.36em;margin-right:.25em;background:currentColor;
  -webkit-mask:url(/img/spearhead-media-mark.png) center/contain no-repeat;mask:url(/img/spearhead-media-mark.png) center/contain no-repeat}
.sm-link{color:inherit;text-decoration:none}
.sm-link:hover{color:var(--ink)}

@media (prefers-reduced-motion:reduce){
  .libsw-btn,.libsw-chev,
  .skip,.navlinks a,.themetoggle > div,.navcta,.navmake-chev,.navmake-menu a.navmake-item,.sitefoot-btn{transition:none}
}

/* Beta: Spearhead Scout, Studio and Social while they are new (Brady, 5 Oct 2026), in the Create
   menu and on each page with a Send feedback link (partials/beta-note). */
.betatag{display:inline-flex;align-items:center;padding:1px 7px;border:1px solid var(--accent);border-radius:999px;
         font-family:var(--ui);font-size:10px;line-height:1.5;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
         color:var(--accent);white-space:nowrap}
.betanote{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 14px;font-size:13px;line-height:1.4;color:var(--muted)}
.betanote a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.betanote a:hover{color:var(--accent)}
.navmake-menu a.navmake-item{grid-template-columns:auto 1fr}
.navmake-menu a.navmake-item > .navmake-name{grid-column:1}
.navmake-menu a.navmake-item > .navmake-beta{grid-column:2;justify-self:start;align-self:center}
.navmake-menu a.navmake-item > .navmake-said{grid-column:1 / -1}

/* Prints coming soon (App\Prints\PrintSales): the Prints menu item and where a print would be bought. */
.navsoon{display:inline-block;margin-left:5px;padding:0 6px;border:1px solid var(--accent);border-radius:999px;
         font-size:9.5px;line-height:15px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);vertical-align:2px}
.prints-soon{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:12px 0 0;font-size:13.5px;line-height:1.45;color:var(--muted)}