/* Site search: nav button, overlay and /search/ page. Brand palette: #1B4332 dark, #D4A373 gold, #F7F3EE cream. */
nav[aria-label="Main"] > div:first-child{justify-content:flex-start;gap:.5rem}
nav[aria-label="Main"] > div:first-child > a:first-child{margin-right:auto}
@media (min-width:768px){nav[aria-label="Main"] > div:first-child > div{margin-right:auto}}
.site-search-btn{display:inline-flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;flex:0 0 auto;border-radius:9999px;color:#1B4332;border:1px solid rgba(27,67,50,.25);background:transparent}
.site-search-btn:hover{background:#1B4332;color:#fff}
.site-search-btn:focus-visible,.ss-close:focus-visible,.ss-link:focus-visible,.ss-all:focus-visible,.ss-suggest a:focus-visible{outline:3px solid #D4A373;outline-offset:2px}
.site-search-btn svg{width:1.15rem;height:1.15rem}
html.ss-open,html.ss-open body{overflow:hidden}
.ss-overlay{position:fixed;inset:0;z-index:70;background:rgba(17,24,20,.55);display:flex;align-items:flex-start;justify-content:center;padding:5rem 1rem 1rem}
.ss-overlay[hidden]{display:none}
.ss-panel{width:100%;max-width:40rem;max-height:calc(100vh - 6rem);overflow:auto;background:#F7F3EE;color:#1a1a1a;border-radius:1.25rem;box-shadow:0 20px 50px rgba(0,0,0,.3);padding:1rem}
.ss-form{display:flex;gap:.5rem;align-items:center}
.ss-input{flex:1 1 auto;min-width:0;font:inherit;font-size:1rem;padding:.75rem 1rem;border:2px solid #1B4332;border-radius:9999px;background:#fff;color:#1a1a1a}
.ss-input:focus{outline:3px solid #D4A373;outline-offset:1px}
.ss-close{flex:0 0 auto;font:inherit;font-size:.875rem;font-weight:600;padding:.7rem 1rem;border-radius:9999px;border:1px solid #1B4332;background:transparent;color:#1B4332;cursor:pointer}
.ss-close:hover{background:#1B4332;color:#fff}
.ss-status{margin:.75rem .25rem .25rem;font-size:.875rem;color:#4b5563;min-height:1.25rem}
.ss-results{list-style:none;margin:0;padding:0}
.ss-results[hidden]{display:none}
.ss-item + .ss-item{border-top:1px solid rgba(0,0,0,.06)}
.ss-link{display:flex;gap:.75rem;align-items:flex-start;padding:.65rem .5rem;border-radius:.75rem;color:inherit;text-decoration:none}
.ss-link:hover,.ss-link:focus{background:#fff}
.ss-thumb{flex:0 0 auto;width:48px;height:48px;border-radius:.6rem;object-fit:cover;background:#e7e1d8}
.ss-thumb-none{display:block;background:linear-gradient(135deg,#1B4332,#2d6a4f)}
.ss-body{display:flex;flex-direction:column;min-width:0}
.ss-title{font-weight:600;color:#1B4332;line-height:1.3}
.ss-type{font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:#8a6a3f;margin-top:.15rem}
.ss-excerpt{font-size:.85rem;color:#4b5563;margin-top:.2rem;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ss-empty{padding:.75rem .5rem;font-size:.9rem}
.ss-suggest{margin-top:.4rem}
.ss-suggest a{color:#1B4332;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.ss-foot{margin:.75rem .25rem 0;font-size:.8rem;color:#6b7280}
.ss-all{color:#1B4332;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.ss-page{max-width:44rem;margin:0 auto}
.ss-page .ss-input{width:100%}
.ss-page .ss-excerpt{-webkit-line-clamp:3}
@media (max-width:767px){
  .ss-overlay{padding:0;align-items:stretch}
  .ss-panel{max-width:none;max-height:none;height:100%;border-radius:0;padding:.75rem}
  .ss-hint{display:none}
}
@media (max-width:400px){
  nav[aria-label="Main"] > div:first-child{gap:.35rem}
  .site-search-btn{width:2.25rem;height:2.25rem}
}
/* Shared main nav: the "Creative Playground" link (combined release, 9 Nov 2026). This file is loaded by every
   page that has the shared nav, so the fit rules live here. Between 768px and 1279px, the visible label shortens
   to "Playground" (its accessible name stays "Creative Playground" via aria-label) and the gaps tighten, so the row never overflows. */
.nav-cp{white-space:nowrap}
@media (max-width:1279px){.nav-cp .nav-cp-long{display:none}}
@media (min-width:768px) and (max-width:1023px){nav[aria-label="Main"] > div:first-child > div.md\:flex{gap:.7rem}}
@media (min-width:1024px) and (max-width:1151px){nav[aria-label="Main"] > div:first-child > div.md\:flex{gap:1rem}}
/* 768-899px only: the Join pill uses its existing short label ("Join", the same as on phones; aria-label unchanged) */
@media (min-width:768px) and (max-width:899px){nav[aria-label="Main"] .join-cta .jc-long{display:none}nav[aria-label="Main"] .join-cta .jc-short{display:inline}}