/* Browser defaults previously supplied by Tailwind. No CSS framework is needed. */
*,::before,::after { box-sizing:border-box; border:0 solid; }
body { line-height:1.5; }
h1,h2,h3,h4,p { margin:0; }
button,input,select,textarea { font:inherit; color:inherit; }
button { background:transparent; }
img,svg { display:block; vertical-align:middle; }
img { max-width:100%; height:auto; }
[hidden] { display:none!important; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

:root { font-family: 'Plus Jakarta Sans', sans-serif; color-scheme: light; font-synthesis: none; text-rendering: optimizeLegibility; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 24px; }
body { margin: 0; min-width: 320px; -webkit-text-size-adjust: 100%; overflow-x: hidden; }
button, input, select, textarea { font: inherit; }
button, a, select { -webkit-tap-highlight-color: transparent; }
button, a { touch-action: manipulation; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }
a { color: inherit; text-decoration: none; }
button, input, select, a { outline-offset: 4px; }
:focus-visible { outline: 3px solid #6c94ff; }
::selection { background: #c5d8ff; color: #081739; }
.aona-app { --site-header-height:105px; overflow-x:clip; --blue:#1246ca; --blue-hover:#0c37ac; --ink:#0b163d; --muted:#465c83; --page:#eaf6ff; --surface:#fff; --line:#cbdcf4; --header:#fffef8; --topbar:#f3f6fc; background:var(--page); color:var(--ink); }
.aona-dark { --ink:#f6f5ed; --muted:#adbedc; --page:#0b1930; --surface:#12243f; --line:#304768; --header:#101f36; --topbar:var(--header); }
/* Action emphasis: deep cobalt for the main task, mid-blue for secondary tasks,
   and pale blue surfaces for selection and utility controls. */
.aona-app {
  --action-primary:#173eaa; --action-primary-hover:#102e86; --action-primary-text:#fff;
  --action-secondary:#4969cc; --action-secondary-hover:#3b58b3; --action-secondary-text:#fff;
  --action-soft:#e5edff; --action-soft-hover:#d6e3fc; --action-soft-text:#31528f;
  --action-selected:#d2e1fb; --action-selected-text:#244679;
  --action-border:#b7cae9; --action-icon:#536f9e; --action-link:#345995; --action-focus:#6183cf;
}
.aona-dark {
  --action-primary:#adc5ff; --action-primary-hover:#c6d6ff; --action-primary-text:#122448;
  --action-secondary:#496bb3; --action-secondary-hover:#5378c3; --action-secondary-text:#fff;
  --action-soft:#203756; --action-soft-hover:#2b476d; --action-soft-text:#ccddff;
  --action-selected:#2b446b; --action-selected-text:#d9e6ff;
  --action-border:#47628a; --action-icon:#a9bedf; --action-link:#b0c9f5; --action-focus:#92b5ff;
}
.aona-app :focus-visible { outline-color:var(--action-focus); }
.aona-app h1,.aona-app h2,.aona-app h3 { font-family:'Fraunces', Georgia, serif; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:12px; min-height:46px; border:1px solid transparent; border-radius:13px; padding:10px 20px; font-weight:650; font-size:14px; line-height:1.4; transition:background .18s, transform .18s, border-color .18s; white-space:nowrap; }
.button:active { transform:translateY(1px); }
.button-primary,.aona-app .action-primary { color:var(--action-primary-text); background:var(--action-primary); }
.button-primary:hover,.aona-app .action-primary:hover { background:var(--action-primary-hover); }
.aona-app .action-secondary { color:var(--action-secondary-text); background:var(--action-secondary); }
.aona-app .action-secondary:hover { background:var(--action-secondary-hover); }
.aona-app .action-soft { color:var(--action-soft-text); border-color:var(--action-border); background:var(--action-soft); }
.aona-app .action-soft:hover { background:var(--action-soft-hover); }
.aona-app .action-selected { color:var(--action-selected-text); border-color:var(--action-border); background:var(--action-selected); }
.aona-app .action-selected button:hover { color:var(--action-selected-text); background:var(--action-soft-hover); }
.add-gc-button { min-height:44px; padding:8px 14px; gap:6px; font-size:13px; border-radius:11px; }
.add-gc-button svg { width:16px; height:16px; }
.button-soft { color:var(--action-soft-text); border-color:var(--action-border); background:var(--action-soft); }
.button-soft:hover { background:var(--action-soft-hover); }
.icon-button { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-width:44px; min-height:44px; padding:8px; border:0; border-radius:10px; background:transparent; color:inherit; }
.icon-button:hover { color:var(--action-soft-text); background:var(--action-soft); }
/* Accessible Skip to Content link */
.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 50;
  padding: 12px 20px;
  background: var(--action-primary, #173eaa);
  color: var(--action-primary-text, #ffffff);
  font-size: 14px;
  font-weight: 700;
  border-radius: 0 0 12px 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  text-decoration: none;
  transition: top 0.16s ease;
}
.skip-link:focus,
.skip-link:focus-visible {
  top: 0;
  outline: 3px solid var(--action-focus, #6183cf);
  outline-offset: 3px;
}
.aona-dark .skip-link {
  background: #adc5ff;
  color: #122448;
}
.site-header { position:sticky; top:0; z-index:40; background:var(--topbar); border-bottom:1px solid var(--line); }
.header-inner { max-width:1440px; height:104px; margin:auto; padding:8px 48px; display:flex; align-items:center; gap:32px; }
.brand { display:block; flex:none; }
/* Display the supplied wordmark at its original aspect ratio. */
.brand-wordmark { display:block; width:132px; }
.brand-wordmark img { display:block; width:100%; height:auto; }
.aona-dark .brand-wordmark img {
  filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.45))
          drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6))
          brightness(1.3)
          contrast(1.15);
  transition: filter 0.2s ease;
}
.aona-dark .brand-wordmark:hover img {
  filter: drop-shadow(0 0 1.5px rgba(255, 255, 255, 0.65))
          drop-shadow(0 2px 4px rgba(0, 0, 0, 0.7))
          brightness(1.4)
          contrast(1.2);
}
.desktop-nav { margin-left:auto; }
.browse-link { display:flex; align-items:center; gap:10px; color:var(--action-link); font-size:15px; font-weight:700; padding:15px 0; border-bottom:3px solid var(--action-focus); }
.header-actions { display:flex; align-items:center; gap:18px; }
.saved-button { background:transparent; border:0; color:var(--ink); display:flex; align-items:center; justify-content:center; gap:9px; font-size:14px; min-width:44px; padding:10px 0; }
.saved-button.is-active { color:var(--action-link); }
.menu-toggle,.mobile-theme-toggle,.site-menu .mobile-saved-button { display:none; }
.site-menu { position:absolute; top:100%; right:max(20px,calc((100vw - 1344px)/2)); width:250px; padding:10px; background:var(--surface); border:1px solid var(--line); border-radius:0 0 18px 18px; box-shadow:0 14px 30px #07173818; z-index:39; }
.site-menu-backdrop { position:fixed; inset:0; z-index:38; background:rgba(8,23,57,0.35); backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px); }
.aona-dark .site-menu-backdrop { background:rgba(0,0,0,0.55); }
.site-menu a,.site-menu button { display:flex; align-items:center; gap:12px; padding:13px; min-height:48px; border:0; border-radius:8px; background:transparent; color:var(--ink); width:100%; font-size:14px; text-align:left; }
.site-menu a:hover,.site-menu button:hover { color:var(--action-soft-text); background:var(--action-soft); }
.site-menu button[aria-pressed=true] { color:var(--action-selected-text); background:var(--action-selected); }
.brand-hero { background:#1246ca; color:#fffef0; overflow:hidden; }
.aona-dark .brand-hero {
  background: radial-gradient(130% 120% at 75% 100%, #15346e 0%, #0d1e3d 50%, #09152b 100%);
  border-bottom: 1px solid #1f3759;
  color: #fffef0;
  position: relative;
}
.aona-dark .brand-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 18% 20%, rgba(23, 62, 170, 0.15) 0%, transparent 60%);
  pointer-events: none;
}
.aona-dark .hero-copy h1 {
  color: #fffef0;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}
.aona-dark .hero-copy p {
  color: #d2e2fa;
}
.hero-inner { position:relative; max-width:1440px; margin:auto; min-height:336px; padding:30px 48px 34px; }
.hero-copy { position:relative; z-index:2; width:62%; }
.hero-copy h1 { font-size:clamp(48px,5.8vw,80px); font-weight:800; line-height:1.02; letter-spacing:-3.6px; margin:0 0 18px; color:#fffef0; }
.hero-copy p { font-size:17px; line-height:1.55; max-width:590px; margin:0 0 20px; color:#f2f6ff; }
.hero-cta { border-radius:999px; background:#fffef0; color:#0b163d; padding:13px 25px; min-height:50px; font-size:17px; }
.hero-cta:hover { background:#e7efff; }
.hero-cat { position:absolute; bottom:0; right:100px; width:42%; height:auto; max-height:260px; object-fit:contain; object-position:bottom; }
.hero-note { position:absolute; right:30px; top:135px; font-size:12px; letter-spacing:2px; line-height:1.8; font-weight:600; transform:rotate(-12deg); text-transform:uppercase; }
.directory-layout { max-width:1440px; margin:auto; padding:42px 48px 72px; display:grid; grid-template-columns:218px minmax(0,1fr); gap:30px; scroll-margin-top:calc(var(--site-header-height) + 20px); }
.directory-sidebar { min-width:0; padding-top:1px; }
.category-nav { display:flex; flex-direction:column; gap:6px; }
.category-button { border:1px solid transparent; border-radius:13px; background:transparent; color:var(--ink); padding:12px 14px; display:flex; align-items:center; gap:12px; width:100%; min-height:46px; text-align:left; font-size:13px; line-height:1.4; }
.category-button:hover { color:var(--action-soft-text); background:var(--action-soft); }
.category-button.is-selected { background:var(--action-selected); color:var(--action-selected-text); border-color:var(--action-border); font-weight:650; }
.category-icon { width:21px; height:21px; flex:none; }
.category-count { display:none; }
.directory-content { min-width:0; }
.directory-controls { margin-bottom:16px; }
.directory-toolbar { display:flex; gap:24px; align-items:center; }
.directory-toolbar h2 { margin:0; font-size:32px; line-height:1.1; letter-spacing:-1.1px; font-weight:800; white-space:nowrap; }
.directory-search { display:flex; flex:1; align-items:center; gap:12px; padding:0 17px; background:var(--surface); border:1px solid var(--line); border-radius:999px; min-width:0; min-height:48px; color:#6a7e9f; }
.directory-search input { width:100%; min-width:0; height:48px; background:transparent; border:0; font-size:13px; color:var(--ink); outline:none; }
.directory-search:focus-within { border-color:var(--blue); outline:2px solid #7d9feb; outline-offset:2px; }
.directory-search input::placeholder { color:#7182a0; }
.mobile-search { display:none; }
.sort-control { display:flex; align-items:center; gap:10px; color:var(--muted); font-size:12px; white-space:nowrap; }
.filter-status { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:8px 0 -5px; color:var(--muted); font-size:11px; }
.view-switch { display:flex; gap:4px; align-items:center; }
.view-switch .icon-button { min-height:44px; min-width:44px; padding:8px; }
.view-switch [aria-pressed=true] { color:var(--action-selected-text); background:var(--action-selected); }
.cards-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.cards-list { grid-template-columns:minmax(0,1fr); }
.group-card { min-width:0; background:var(--surface); border:1px solid var(--line); border-radius:23px; padding:16px 16px 0; display:grid; grid-template-columns:132px minmax(0,1fr); column-gap:20px; row-gap:8px; transition:border-color .18s, box-shadow .18s; }
.group-card:hover { border-color:#88a8e3; box-shadow:0 5px 16px #1545a008; }
.group-cover { width:100%; height:172px; border-radius:16px; object-fit:cover; }
.group-info { min-width:0; display:flex; align-items:flex-start; flex-direction:column; }
.group-category { display:inline-block; font-size:11px; line-height:1.5; padding:3px 11px; border-radius:999px; background:#e2edff; color:#152952; margin:0 0 10px; }
.category-chillrandom,.category-memes { background:#fff0cf; }
.category-study,.category-anime { background:#dbeee5; }
.category-tech,.category-gaming { background:#d6edff; }
.group-info h3 { font-size:22px; font-weight:800; letter-spacing:-.7px; line-height:1.12; margin:0 0 7px; overflow-wrap:anywhere; }
.group-description { color:var(--muted); font-size:13px; line-height:1.5; margin:0 0 12px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.group-actions { display:flex; align-items:center; gap:10px; width:100%; margin-top:auto; }
.save-card { border:1px solid #9db8eb; border-radius:11px; min-width:40px; }
.save-card[aria-pressed=true] { background:#e1ecff; color:var(--blue); }
.join-button { flex:1; font-size:12px; min-width:0; gap:14px; padding:9px 10px; border-radius:11px; }
.card-extras { display:flex; grid-column:1/-1; justify-content:space-between; align-items:center; border-top:1px solid var(--line); margin-top:4px; color:var(--muted); gap:8px; }
.creator-handle { font-size:10px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.extra-actions { display:flex; }
.extra-actions .icon-button { font-size:10px; min-height:40px; min-width:36px; padding:7px; }
.like-button.is-liked { color:#bd4057; }
.list-card { grid-template-columns:150px minmax(0,1fr); }
.list-card .group-cover { height:160px; }
.list-card .group-actions { max-width:320px; }
.site-footer { border-top:1px solid var(--line); background:var(--header); padding:44px 48px 14px; }
.footer-inner,.footer-bottom { max-width:1344px; margin:auto; display:flex; justify-content:space-between; gap:40px; }
.footer-inner { padding-bottom:40px; }
.footer-logo { width:100px; height:auto; margin-bottom:15px; }
.site-footer p { font-size:13px; line-height:1.8; color:var(--muted); margin:8px 0 0; }
.site-footer strong { display:block; font-size:14px; margin-bottom:15px; }
.footer-links button { display:flex; justify-content:space-between; gap:40px; min-height:36px; align-items:center; font-size:13px; border:0; background:none; padding:0; }
.footer-note a { display:inline-flex; align-items:center; gap:10px; color:var(--action-link); font-size:13px; margin-top:20px; font-weight:650; }
.footer-bottom { padding-top:15px; border-top:1px solid var(--line); align-items:center; }
.footer-bottom p,.footer-bottom button { font-size:11px; }
.aona-app [role=dialog] h2,.aona-app [role=dialog] h3 { letter-spacing:-.5px; }
.aona-app [role=dialog] { border-color:var(--line); color:var(--ink); background:var(--surface); box-shadow:0 20px 90px #08173940; }
.overscroll-contain { overscroll-behavior:contain; }
.no-scrollbar::-webkit-scrollbar { display:none; }
.no-scrollbar { scrollbar-width:none; }
@media(min-width:1100px) { .menu-toggle { display:flex; width:36px; min-width:36px; } }
@media(max-width:1250px) and (min-width:761px) { .directory-layout { grid-template-columns:185px minmax(0,1fr); padding-left:28px; padding-right:28px; gap:24px; } .group-card { grid-template-columns:100px minmax(0,1fr); gap:12px; padding:12px 12px 0; } .directory-toolbar { flex-wrap:wrap; gap:14px; } .directory-toolbar h2 { font-size:29px; } .sort-control .sort-label { display:none; } .group-info h3 { font-size:21px; } .hero-inner,.header-inner { padding-left:32px; padding-right:32px; } .hero-copy h1 { font-size:67px; } }
@media(max-width:1099px) { .menu-toggle { display:flex; } .header-actions { gap:14px; } }
@media(max-width:760px) {
  html { scroll-padding-top:14px; }
  .header-inner { height:66px; padding:5px 20px; gap:12px; }
  .brand-wordmark { width:108px; }
  .desktop-nav,.desktop-action { display:none; }
  .header-actions { margin-left:auto; gap:8px; }
  .saved-button { display:none; }
  .mobile-theme-toggle,.site-menu .mobile-saved-button { display:flex; }
  .add-gc-button { padding:8px 10px; gap:5px; }
  .saved-button span { display:none; }
  .saved-button svg,.menu-toggle svg { width:24px; height:24px; }
  .site-menu { right:16px; }
  .hero-inner { min-height:0; padding:22px 24px 18px; }
  .hero-copy { width:100%; }
  .hero-copy h1 { font-size:clamp(35px,8.9vw,60px); line-height:1.04; letter-spacing:-1.4px; margin-bottom:13px; }
  .hero-copy p { max-width:100%; font-size:14px; line-height:1.5; margin-bottom:15px; }
  .hero-cta { min-height:44px; font-size:14px; padding:10px 15px; gap:9px; }
  .hero-cta svg { width:19px; height:19px; }
  .hero-cat { width:38%; right:0; bottom:0; max-height:95px; }
  .hero-note { display:none; }
  .directory-layout { padding:18px 16px 40px; display:flex; flex-direction:column; gap:0; }
  .directory-content { display:contents; }
  .directory-sidebar { order:2; margin:0 -16px 12px; padding:0; overflow:hidden; }
  .category-nav { display:flex; flex-direction:row; gap:8px; overflow-x:auto; padding:0 16px 4px; scrollbar-width:none; }
  .category-nav::-webkit-scrollbar { display:none; }
  .category-button { border:1px solid var(--line); border-radius:999px; background:#f5faff; padding:9px 16px; width:auto; white-space:nowrap; font-size:13px; flex:none; gap:9px; }
  .aona-dark .category-button { background:var(--surface); }
  .category-button.is-selected { background:var(--action-selected); color:var(--action-selected-text); border-color:var(--action-border); }
  .category-icon { width:19px; height:19px; }
  .directory-controls { order:1; margin-bottom:12px; }
  .directory-toolbar { display:grid; grid-template-columns:1fr auto; gap:13px 10px; }
  .directory-toolbar h2 { font-size:29px; letter-spacing:-.8px; }
  .directory-search { grid-row:2; grid-column:1/-1; gap:10px; padding:0 13px; min-height:44px; }
  .directory-search input { height:44px; font-size:13px; }
  .mobile-search { display:block; }
  .desktop-search { display:none; }
  .sort-control { justify-content:flex-end; }
  .sort-control .sort-label { display:none; }
  .filter-status { margin:5px 0 -8px; font-size:10px; }
  .view-switch .icon-button { min-width:44px; min-height:44px; padding:10px; }
  .directory-empty-state { order:3; }
  .cards-grid { order:3; grid-template-columns:minmax(0,1fr); gap:12px; }
  .group-card { grid-template-columns:102px minmax(0,1fr); column-gap:14px; row-gap:8px; padding:12px 12px 0; border-radius:20px; }
  .group-cover { height:147px; border-radius:13px; }
  .group-category { margin-bottom:7px; font-size:10px; padding:3px 9px; }
  .group-info h3 { font-size:21px; letter-spacing:-.55px; margin-bottom:6px; line-height:1.1; }
  .group-description { font-size:12px; line-height:1.45; -webkit-line-clamp:2; margin-bottom:9px; }
  .group-actions { gap:8px; }
  .save-card { min-width:36px; width:36px; padding:7px; }
  .join-button { font-size:11px; gap:8px; padding:8px; }
  .join-button svg { width:16px; }
  .card-extras { margin-top:0; }
  .extra-actions .icon-button { min-height:36px; }
  .site-footer { padding:30px 24px 16px; }
  .footer-inner { flex-wrap:wrap; gap:30px; }
  .footer-inner > div:first-child { flex:1; }
  .footer-note { display:none; }
  .footer-bottom { align-items:flex-start; gap:18px; }
  .footer-bottom p { flex:1; margin:0; }
  .footer-bottom button { white-space:nowrap; }
}
@media(max-width:360px) { .hero-inner { padding:19px 18px; } .hero-copy p { font-size:13px; } .hero-cat { width:33%; } .hero-cta { padding:9px 13px; font-size:12px; } .group-card { grid-template-columns:80px minmax(0,1fr); gap:10px; } .group-info h3 { font-size:19px; } .directory-toolbar h2 { font-size:26px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; animation:none!important; } }
/* Final fidelity and touch-target refinements. */
.hero-cat { max-height:none; }
.hero-copy h1 { font-variation-settings:'opsz' 9, 'SOFT' 100, 'WONK' 1; }
.extra-actions .icon-button { min-height:44px; min-width:44px; }
.view-switch .icon-button { min-height:44px; min-width:44px; }
@media(max-width:760px) {
  .aona-app { --site-header-height:61px; }
  .header-inner { height:60px; }
  .hero-inner { padding:18px 24px; }
  .hero-copy p { font-size:13px; line-height:1.5; }
  .hero-cat { width:40%; max-height:none; }
  .filter-status { display:none; }
  .directory-toolbar h2 { align-self:center; }
  .group-description { font-size:13px; }
  .save-card { min-width:44px; width:44px; }
  .group-card { grid-template-columns:102px minmax(0,1fr); }
  .extra-actions .icon-button { min-height:44px; min-width:44px; }
}
@media(max-width:350px) {
  .header-inner { padding-left:12px; padding-right:12px; gap:8px; }
}
@media(min-width:761px) {
  .hero-inner { padding-bottom:20px; }
  .hero-copy h1 { margin-bottom:14px; }
  .hero-copy p { font-size:16px; line-height:1.4; margin-bottom:14px; }
  .directory-controls { display:flex; align-items:center; gap:16px; margin-bottom:18px; }
  .directory-toolbar { flex:1; min-width:0; }
  .filter-status { flex:none; margin:0 0 6px; }
  .filter-status > span { display:none; }
  .sort-control { flex:none; }
  .view-switch .icon-button { min-width:44px; min-height:44px; }
}
.group-card { position:relative; padding-bottom:16px; }
.group-category { max-width:calc(100% - 30px); }
.card-extras { position:absolute; right:8px; top:4px; display:block; margin:0; border:0; z-index:3; }
.card-extras summary { list-style:none; min-width:36px; min-height:40px; color:var(--muted); }
.card-extras summary::-webkit-details-marker { display:none; }
.card-menu-content { display:flex; flex-direction:column; align-items:stretch; gap:3px; position:absolute; top:40px; right:0; min-width:205px; padding:10px; border:1px solid var(--line); border-radius:12px; background:var(--surface); box-shadow:0 8px 25px #1028501f; }
.card-menu-content .creator-handle { padding:3px 8px; }
.extra-actions { justify-content:space-between; }
@media(max-width:760px) {
  .group-card { padding-bottom:12px; }
  .group-cover { height:138px; }
  .group-info h3 { font-size:20px; }
  .hero-copy p { max-width:96%; margin-bottom:12px; }
  .hero-inner { padding-top:14px; padding-bottom:14px; }
  .directory-controls { margin-bottom:8px; }
  .directory-toolbar { gap:10px; }
  .directory-layout { padding-top:14px; }
  .directory-sidebar { margin-bottom:8px; }
}
@media(min-width:761px) and (max-width:1100px) {
  .cards-grid { grid-template-columns:minmax(0,1fr); }
  .hero-copy { width:72%; }
  .hero-copy h1 { font-size:clamp(44px,5.8vw,64px); letter-spacing:-2px; }
  .hero-copy p { max-width:440px; }
  .hero-cat { width:35%; right:30px; }
  .hero-note { display:none; }
  .directory-toolbar { justify-content:space-between; }
  .directory-search { order:3; flex-basis:100%; }
  .group-card { grid-template-columns:130px minmax(0,1fr); gap:18px; padding:16px; }
  .group-cover { height:170px; }
  .group-info h3 { font-size:25px; }
}

/* A single hero search replaces the CTA and directory search. */
.hero-search { display:flex; align-items:center; width:min(100%, 440px); min-height:52px; padding:4px 6px 4px 20px; border:1px solid transparent; border-radius:999px; background:#fffef0; color:#0b163d; }
.hero-search:focus-within { outline:3px solid #a8c4ff; outline-offset:4px; }
.hero-search input { width:100%; min-width:0; height:44px; border:0; outline:none; background:transparent; color:inherit; font-size:16px; }
.hero-search input::placeholder { color:#465572; opacity:1; }
.hero-search input::-webkit-search-cancel-button { display:none; }
.hero-search .icon-button { flex:none; }
.hero-search-submit { background:var(--action-soft); color:var(--action-soft-text); border-radius:50%; }
.aona-dark .hero-search {
  background: #14284b;
  border: 1px solid #335487;
  color: #f6f5ed;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
}
.aona-dark .hero-search:focus-within {
  outline: 3px solid #8cb3ff;
  outline-offset: 3px;
  border-color: #5580bf;
  background: #172d54;
}
.aona-dark .hero-search input {
  color: #f6f5ed;
}
.aona-dark .hero-search input::placeholder {
  color: #8da8d4;
  opacity: 1;
}
.aona-dark .hero-search-submit {
  background: #203c68;
  color: #adc5ff;
}
.aona-dark .hero-search-submit:hover {
  background: #2a4c82;
  color: #ffffff;
}
.directory-toolbar { justify-content:space-between; }
@media(max-width:760px) {
  .hero-search { position:relative; width:200px; max-width:100%; min-height:52px; padding:3px 12px 3px 4px; gap:4px; margin-top:0; }
  .hero-search:has(input:focus),.hero-search:has(input:not(:placeholder-shown)) { width:100%; }
  .hero-search input { font-size:16px; height:44px; }
  .hero-search .hero-search-submit { order:-1; background:transparent; color:inherit; }
  .aona-dark .hero-search .hero-search-submit { background:transparent; color:#adc5ff; }
  .hero-search .hero-search-submit:hover { background:var(--action-soft); color:var(--action-soft-text); }
  .hero-search-submit svg { width:19px; height:19px; }
  .hero-cat { bottom:0; width:40%; }
  .hero-copy p { max-width:96%; }
  .directory-toolbar { display:flex; }
}

.aona-app:has(.brand-hero.is-searching) .directory-layout { scroll-margin-top:calc(var(--site-header-height) + 90px); }
.brand-hero { transition:background-color .4s ease; }
.hero-intro { display:grid; grid-template-rows:1fr; opacity:1; filter:blur(0); transition:grid-template-rows .42s cubic-bezier(.22,1,.36,1), opacity .24s ease, filter .3s ease; }
.hero-intro-content { min-height:0; overflow:hidden; }
.hero-cat,.hero-note { transition:opacity .22s ease, filter .3s ease; }
.hero-search { transition:width .42s cubic-bezier(.22,1,.36,1), background-color .3s ease; }
.is-searching .hero-inner { min-height:0; padding-top:14px; padding-bottom:14px; }
.is-searching .hero-copy { width:100%; }
.brand-hero.is-searching { position:sticky; top:var(--site-header-height); z-index:35; background:var(--header); overflow:visible; }
.is-searching .hero-intro { grid-template-rows:0fr; opacity:0; filter:blur(8px); pointer-events:none; }
.is-searching .hero-cat,.is-searching .hero-note { opacity:0; filter:blur(8px); pointer-events:none; }
.is-searching .hero-search { width:100%; max-width:640px; margin-inline:auto; background:var(--surface); color:var(--ink); border-color:var(--line); }
.is-searching .hero-search input::placeholder { color:var(--muted); }
.is-searching .hero-search:focus-within { outline-width:2px; outline-offset:2px; }
.aona-dark .brand-hero.is-searching {
  background: var(--header, #101f36);
  border-bottom: 1px solid #233c61;
}
.aona-dark .is-searching .hero-search {
  background: #152745;
  border-color: #355380;
}

/* Carry the rounded editorial typography into the directory. */
.directory-toolbar { padding:2px 0 8px; border-bottom:0; gap:16px; }
.aona-app .directory-toolbar h2 { font-family:'Fraunces', Georgia, serif; font-size:32px; font-weight:800; font-variation-settings:'opsz' 9, 'SOFT' 100, 'WONK' 1; line-height:1.15; letter-spacing:-1px; color:var(--ink); white-space:normal; }
@media(max-width:760px) {
  .directory-controls { margin:6px 0 10px; }
  .directory-toolbar { padding:4px 0 6px; gap:12px; flex-wrap:nowrap; }
  .aona-app .directory-toolbar h2 { font-size:28px; letter-spacing:-.8px; }
  .sort-control { flex:none; }
  .directory-sidebar { margin-bottom:14px; }
}

/* Sort menu shares the directory action palette on every device. */
.sort-control { position:relative; }
.sort-trigger { display:flex; align-items:center; justify-content:space-between; gap:14px; min-height:44px; padding:10px 13px; border:1px solid var(--action-border); border-radius:12px; background:var(--surface); color:var(--ink); font-size:12px; cursor:pointer; }
.sort-trigger:hover,.sort-trigger[aria-expanded=true] { border-color:var(--action-focus); background:var(--action-soft); }
.sort-trigger svg { flex-shrink:0; transition:transform .16s ease; }
.sort-trigger[aria-expanded=true] svg { transform:rotate(180deg); }
.sort-menu { position:absolute; right:0; top:calc(100% + 8px); z-index:30; width:200px; max-width:calc(100vw - 32px); padding:6px; border:1px solid var(--action-border); border-radius:15px; background:var(--surface); box-shadow:0 12px 32px #10275024; }
.sort-option { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; min-height:44px; padding:10px 12px; border:0; border-radius:9px; background:transparent; color:var(--ink); font-size:13px; text-align:left; cursor:pointer; }
.sort-option.is-highlighted { background:var(--action-soft); color:var(--action-soft-text); }
.sort-option[aria-selected=true] { background:var(--action-selected); color:var(--action-selected-text); font-weight:700; }
.sort-option[aria-selected=true].is-highlighted { outline:1px solid var(--action-border); outline-offset:-1px; }
@media(max-width:760px) { .sort-trigger { font-size:11px; gap:8px; padding:10px; } }

/* Supplied no-results artwork includes its own title and supporting copy. */
.directory-empty-state { margin-top:24px; padding:24px; background:#fff; border-radius:24px; overflow:hidden; }
.no-results-illustration { display:block; width:100%; max-width:680px; height:auto; margin-inline:auto; }
@media(max-width:760px) {
  .directory-empty-state { margin-top:8px; padding:8px 0; border-radius:18px; }
}

/* Reserve separate space for the copy and artwork at every viewport width. */
.hero-inner { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:24px; align-items:end; }
.hero-copy { width:100%; min-width:0; }
.hero-copy h1 { font-size:clamp(36px,5.5vw,80px); }
.hero-cat { position:static; width:100%; align-self:end; margin-bottom:-20px; }
.hero-note { top:24px; right:30px; }
.is-searching .hero-inner { display:block; }
.is-searching .hero-cat,.is-searching .hero-note { display:none; }
@media(max-width:760px) {
  .hero-inner { grid-template-columns:minmax(0,1fr) minmax(0,.55fr); column-gap:12px; row-gap:0; }
  .hero-copy { display:contents; }
  .hero-intro { grid-column:1 / -1; }
  .hero-copy h1 { font-size:clamp(32px,8.9vw,60px); }
  .hero-copy p { max-width:100%; }
  .hero-search { grid-column:1; width:100%; min-width:0; }
  .hero-cat { grid-column:2; width:100%; margin-bottom:-14px; }
  .is-searching .hero-copy { display:block; }
}