/* A little club-fair energy, without making the directory harder to use. */
:root { --lilac: #e8def1; --lime: #e8efb2; --peach: #f4cfb8; }
.hero {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  align-items: center;
  gap: 20px 12px;
  padding: 48px 5% 0;
  background: radial-gradient(ellipse at 70% 30%, #efe8f4 0, transparent 64%);
}
.hero-copy { position: relative; z-index: 1; min-width: 0; padding: 18px 0 32px; }
.hero-copy > .eyebrow { display: inline-flex; align-items: center; gap: 9px; font-size: 10px; letter-spacing: .13em; }
.little-star { font-size: 26px; line-height: 1; }
.hero h1 { font-size: clamp(46px, 5.1vw, 73px); line-height: 1.04; margin: 21px 0 24px; letter-spacing: -.045em; }
.hero h1 em { position: relative; }
.hero .intro { max-width: 450px; font-size: 16px; line-height: 1.8; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin: 27px 0 8px; }
.hero-actions .button { border-radius: 9px; font-size: 13px; font-weight: 650; padding: 14px 19px; box-shadow: 3px 3px 0 #cdbfda; }
.hero-actions .button span { margin-left: 13px; }
.surprise-button { background: var(--lime); border: 1px solid #c7cf9a; border-radius: 9px; font-size: 13px; height: auto; padding: 13px 17px; transform: rotate(-2deg); }
.surprise-button:hover { transform: rotate(1deg); background: #e0e99d; }
.hero .stats { gap: 18px; font-size: 10px; align-items: center; }
.hero .stats strong { font-size: 21px; }
.hero .stats span:last-child { max-width: 125px; line-height: 1.5; color: var(--muted); }
.hero-art { min-width: 0; position: relative; text-align: center; }
.hero-art > img { width: 100%; max-width: 600px; height: auto; display: block; margin: auto; }
.art-caption { display: block; font: italic 16px Georgia, serif; color: var(--purple); transform: rotate(-4deg); margin: -8px 0 25px; }
.site-header { padding-block: 23px; }
.site-header nav a { font-size: 12px; color: var(--muted); }
footer strong a { text-decoration: none; }
footer strong a:hover { text-decoration: underline; }
.choose-interest { padding: 44px 25px; text-align: center; border: 1px dashed #cdbedb; border-radius: 14px; background: #f4eff7; }
.choose-interest-star { display: block; color: var(--purple); font-size: 35px; margin-bottom: 15px; }
.choose-interest h3 { font: 400 25px/1.4 Georgia, serif; margin-bottom: 10px; }
.choose-interest p { font-size: 13px; line-height: 1.7; color: var(--muted); margin-bottom: 0; }
.directory { border-top: none; }
.section-heading h2::after { content: '✳'; display: inline-block; font-size: 27px; color: #86709e; margin-left: 14px; vertical-align: middle; }
.card { --card-accent: #bba2d1; position: relative; border-top: 4px solid var(--card-accent); padding: 24px; box-shadow: 0 3px 0 #eee9e1; }
.card[data-categories~="environment"] { --card-accent: #a9c3a1; }
.card[data-categories~="sports"] { --card-accent: #e6cc8e; }
.card[data-categories~="health"] { --card-accent: #e5b6c6; }
.card[data-categories~="media"] { --card-accent: #a1b9ca; }
.card[data-categories~="arts"] { --card-accent: #d9add0; }
.card-top { display: flex; gap: 15px; align-items: center; margin-bottom: 19px; }
.card-top .card-meta { flex: 1; min-width: 0; margin-bottom: 0; font-size: 10px; }
.card-category { color: #665073; line-height: 1.7; }
.card-category::before { content: ''; display: inline-block; width: 6px; height: 6px; background: var(--card-accent); border-radius: 50%; margin-right: 6px; vertical-align: 1px; }
.card-open { width: 29px; height: 29px; flex: 0 0 29px; display: grid; place-items: center; border: 1px solid #e5ddec; border-radius: 50%; color: var(--purple); background: #f7f3fa; font-size: 16px; text-decoration: none; }
.card-open:hover { color: white; background: var(--purple); border-color: var(--purple); }
.club-logo { width: 64px; height: 64px; flex: 0 0 64px; border: 1px solid #ddd5e4; border-radius: 14px; background: white; display: grid; place-items: center; padding: 4px; box-shadow: 2px 3px 0 #eee7f2; overflow: hidden; }
.club-logo img { width: 100%; height: 100%; object-fit: contain; border-radius: 10px; }
.club-logo-fallback { background: #eee6f5; color: var(--purple); font: 700 24px Georgia, serif; border-style: dashed; }
.card:nth-child(3n+2) .club-logo-fallback { background: #eef1d9; }
.card:nth-child(3n+3) .club-logo-fallback { background: #f7e6d8; }
.card h3 { font-size: 21px; }
.club-links { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; border-top: 1px dashed #e3dce9; padding-top: 15px; margin-top: 19px; font-size: 11px; }
.external-link { display: inline-flex; align-items: center; gap: 5px; padding: 7px 9px; background: #f4f1f7; border: 1px solid #e6dfed; border-radius: 6px; text-decoration: none; font-weight: 600; }
.external-link:hover { background: #e9e0f0; }
.external-link svg { fill: none; stroke: currentColor; stroke-width: 1.7; flex-shrink: 0; }
.external-link .icon-dot { fill: currentColor; stroke: none; }
.instagram-link { color: #85516d; background: #f8eef3; border-color: #efdae5; }
.hub-link { margin-left: auto; color: var(--muted); font-size: 10px; white-space: nowrap; }
.missing-links { color: var(--muted); font-size: 10px; line-height: 1.5; margin: 9px 0 0; }
.detail > .club-logo { width: 90px; height: 90px; margin-bottom: 24px; }
.detail > .club-links { justify-content: flex-start; border: 0; margin-top: 13px; padding-top: 0; }
.detail > .club-links .hub-link { display: none; }
.detail > .club-links .external-link { font-size: 13px; padding: 10px 14px; }
.related-heading { display: flex; align-items: center; gap: 13px; }
.related-heading .club-logo { width: 48px; height: 48px; flex-basis: 48px; border-radius: 10px; }
.related-heading h3 { margin-bottom: 0; }
.interest-browser { padding: 25px 0; border-block: 1px solid #ded5e6; background: #f1edde; }
.interest-heading { max-width: 1440px; margin: 0 auto 14px; padding: 0 5%; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.interest-heading .eyebrow { font-size: 9px; }
.interest-note { font-size: 11px; color: #716478; }
.interest-window { max-width: 1440px; margin: auto; padding: 4px 5%; }
.interest-set { display: flex; flex-wrap: wrap; gap: 10px; }
.interest-chip { display: inline-flex; gap: 10px; align-items: center; max-width: 100%; padding: 9px 10px 9px 16px; border: 1px solid #b7a4c8; border-radius: 30px; color: #503775; background: #fffdf7; text-decoration: none; font-size: 13px; font-weight: 600; }
.interest-count { min-width: 27px; height: 27px; padding: 0 6px; display: inline-grid; place-items: center; border-radius: 50px; background: #50377512; font-size: 11px; font-weight: 750; font-variant-numeric: tabular-nums; }
.interest-chip:hover .interest-count, .interest-chip[aria-current="true"] .interest-count { background: #ffffff26; }
.interest-chip:nth-child(4n+2) { background: #e6edb8; }
.interest-chip:nth-child(4n+3) { background: #efdeeb; }
.interest-chip:nth-child(4n) { background: #f5dfc4; }
.interest-chip:hover, .interest-chip[aria-current="true"] { color: white; background: var(--purple); border-color: var(--purple); }
#directory-title { scroll-margin-top: 25px; }
@media (max-width: 1050px) {
  .hero { gap: 0; }
  .hero h1 { font-size: 59px; }
  .hero .stats span:last-child { display: none; }
  .hero .intro { font-size: 14px; }
  .art-caption { font-size: 13px; }
}
@media (max-width: 700px) {
  .hero { grid-template-columns: 1fr; padding: 28px 6% 0; }
  .hero-copy { padding-bottom: 3px; }
  .hero h1 { font-size: clamp(45px, 9.6vw, 64px); }
  .hero .intro { font-size: 15px; }
  .hero-art { width: 100%; max-width: 410px; justify-self: center; margin-top: 10px; }
  .art-caption { font-size: 14px; margin-top: -10px; }
  .hero .stats { padding-top: 20px; }
}
@media (max-width: 640px) {
  .site-header { flex-direction: row; align-items: center; gap: 12px; }
  .wordmark { font-size: 13px; }
  .wordmark span { margin-left: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .card, .surprise-button { transition: none; }
  .card:hover, .surprise-button:hover { transform: none; }
}