.community-hero {
  position: relative;
  padding: 65px 0 55px;
  background:
    linear-gradient(90deg, rgba(18, 7, 31, 0.76), rgba(18, 7, 31, 0.2)),
    url("/assets/plates/day-full.webp") center 48% / cover;
  border-bottom: 1px solid var(--rule);
}
.community-hero .display {
  font-size: clamp(2.8rem, 5.7vw, 5.6rem);
  line-height: 0.98;
  margin: 22px 0 24px;
}
.community-hero .display strong {
  color: var(--peach);
}
.community-hero .wrap > p:last-child {
  max-width: 27em;
  color: var(--white);
  font-size: 1rem;
  line-height: 1.65;
}
.coast-note {
  position: absolute;
  right: var(--gutter);
  bottom: 24px;
  font-family: var(--mono);
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: rgba(253, 246, 250, 0.65);
}
.community-body {
  padding-top: 36px;
  padding-bottom: 65px;
}
.section-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
}
.section-top h2 {
  font-family: var(--display);
  font-stretch: 112%;
  font-weight: 500;
  font-size: 1.1rem;
}
.banner-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--mono);
  font-size: 0.65rem;
  color: var(--muted);
}
.banner-controls button {
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--white);
  width: 34px;
  height: 34px;
  cursor: pointer;
}
.banner-controls button:disabled {
  opacity: 0.35;
  cursor: default;
}
.featured-banner {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  min-height: 230px;
  border: 1px solid rgba(254, 190, 117, 0.3);
  background: linear-gradient(115deg, #28204b, var(--ink-deep));
  text-decoration: none;
  color: var(--white);
  overflow: hidden;
}
.featured-copy {
  padding: 30px 36px;
  align-self: center;
}
.featured-copy .overline {
  font-size: 0.55rem;
  line-height: 1.6;
  color: var(--peach);
  letter-spacing: 0.17em;
}
.featured-copy h3 {
  font-family: var(--display);
  font-stretch: 112%;
  font-weight: 500;
  font-size: clamp(1.4rem, 2.4vw, 2.2rem);
  line-height: 1.15;
  margin: 12px 0;
}
.featured-copy p {
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.65;
}
.featured-copy .banner-cta {
  display: block;
  color: var(--peach);
  margin-top: 20px;
  font-family: var(--mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
}
.featured-art {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.18);
  min-width: 0;
  max-height: 270px;
}
.featured-art img {
  height: 100%;
  width: 100%;
  object-fit: contain;
}
.featured-art:empty {
  background: url("/assets/plates/night.webp") center/cover;
}
.featured-banner:hover {
  border-color: var(--peach);
}
.calendar-section {
  margin-top: 42px;
}
.calendar-title {
  align-items: end;
}
.calendar-title h2 {
  font-size: clamp(1.9rem, 3vw, 2.6rem);
  margin-top: 10px;
}
.calendar-title > p {
  font-family: var(--mono);
  font-size: 0.64rem;
  color: var(--muted);
}
.calendar-intro {
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.7;
  max-width: 65em;
  margin-bottom: 24px;
}
.event-filters {
  display: grid;
  grid-template-columns: 1.5fr 1fr 0.7fr;
  gap: 14px;
  padding: 20px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.event-filters label {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.event-filters label > span {
  font-family: var(--mono);
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
}
.event-filters input,
.event-filters select {
  width: 100%;
  min-height: 44px;
  color: var(--white);
  background: #211135;
  border: 1px solid rgba(253, 246, 250, 0.2);
  border-radius: 0;
  padding: 10px 12px;
  font: inherit;
  font-size: 0.82rem;
  color-scheme: dark;
}
.event-filters input::placeholder {
  color: #ab9eb6;
}
.event-filters input:focus,
.event-filters select:focus {
  outline: 2px solid var(--peach);
  outline-offset: 2px;
}
.results-bar {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin: 18px 0;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.67rem;
}
.reset-filters {
  background: none;
  border: 0;
  padding: 0;
  color: var(--peach);
  font: inherit;
  cursor: pointer;
}
.event-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 28px;
}
.event-card {
  display: grid;
  grid-template-columns: 48px 1fr 18px;
  align-items: start;
  gap: 16px;
  padding: 22px 0;
  border-top: 1px solid var(--rule);
  color: var(--white);
  text-decoration: none;
  min-width: 0;
}
.event-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 3px;
  color: var(--peach);
  font-family: var(--mono);
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.event-date strong {
  font-family: var(--display);
  font-size: 1.65rem;
  line-height: 1.15;
  letter-spacing: 0;
  font-weight: 500;
}
.event-info {
  min-width: 0;
}
.event-info h3 {
  font-family: var(--display);
  font-stretch: 110%;
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.4;
  margin: 0 0 8px;
}
.event-info p {
  color: var(--muted);
  font-size: 0.77rem;
  line-height: 1.55;
  margin: 2px 0;
}
.event-info .event-source {
  color: var(--peach);
  font-family: var(--mono);
  font-size: 0.57rem;
  letter-spacing: 0.04em;
  margin-top: 9px;
}
.event-arrow {
  color: var(--peach);
}
.event-card:hover h3 {
  color: var(--peach);
}
.event-card:focus-visible,
.featured-banner:focus-visible {
  outline: 2px solid var(--peach);
  outline-offset: 4px;
}
.load-events {
  display: flex;
  margin: 28px auto 0;
}
.feed-message {
  padding: 24px;
  border: 1px solid var(--rule);
  color: var(--muted);
  line-height: 1.7;
}
.feed-message p {
  margin-bottom: 15px;
}
.feed-message .text-link {
  display: inline-block;
  margin-left: 20px;
}
.community-partners {
  border-top: 1px solid var(--rule);
  padding-top: 28px;
  margin-top: 42px;
  color: var(--muted);
  font-size: 0.86rem;
}
.community-partners > div {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 25px;
  margin: 14px 0 24px;
}
.community-partners a {
  color: var(--peach);
  text-decoration: none;
}
.community-partners small {
  font-size: 0.7rem;
}
.preview-note {
  border-left: 2px solid var(--peach);
  padding: 8px 14px;
  color: var(--muted);
  font-size: 0.75rem;
  margin-bottom: 24px;
}
[hidden] {
  display: none !important;
}
.region-links, .calendar-pagination, .breadcrumbs { display:flex; flex-wrap:wrap; gap:12px 24px; }
.region-links { margin:0 0 28px; font-size:.76rem; }
.region-links a, .calendar-pagination a, .breadcrumbs a { color:var(--peach); text-decoration:none; }
.calendar-pagination { justify-content:center; padding:28px 0 0; font-size:.82rem; }
.breadcrumbs { font-size:.7rem; margin-bottom:28px; line-height:1.6; }
.event-hero { padding:36px 0 40px; }
.event-hero .display { font-size:clamp(2.2rem,4.2vw,4rem); max-width:22ch; overflow-wrap:anywhere; }
.event-hero .wrap > p:last-child { max-width:50em; }
.event-detail-body { padding-top:32px; padding-bottom:50px; }
.event-facts { display:grid; grid-template-columns:1.1fr 1.3fr .8fr; gap:24px; padding:24px 0; border-bottom:1px solid var(--rule); }
.event-facts dt { font-family:var(--mono); font-size:.62rem; text-transform:uppercase; color:var(--peach); letter-spacing:.12em; margin-bottom:12px; }
.event-facts dd { margin:0; font-size:.95rem; line-height:1.65; }
.event-facts dd span { display:block; color:var(--muted); font-size:.8rem; }
.event-actions { display:flex; align-items:center; flex-wrap:wrap; gap:22px; margin:26px 0; }
.event-actions .text-link { font-size:.8rem; }
.event-about { max-width:75ch; margin:38px 0; }
.event-about h2, .related-events h2 { font-family:var(--display); font-weight:500; font-size:1.7rem; margin-bottom:20px; }
.event-about p { line-height:1.8; margin-bottom:18px; color:var(--muted); font-size:.96rem; }
.event-about .event-attribution { font-size:.76rem; border-left:2px solid var(--peach); padding-left:16px; }
.event-attribution a, .archive-note a { color:var(--peach); }
.archive-note { padding:18px; background:#28204b; font-size:.9rem; line-height:1.7; }
.compact-promo { margin:28px 0; border:1px solid rgba(254,190,117,.3); background:linear-gradient(115deg,#28204b,var(--ink-deep)); }
.compact-promo > a { display:flex; align-items:center; gap:24px; padding:18px 24px; color:var(--white); text-decoration:none; }
.compact-promo img { width:110px; height:45px; object-fit:contain; flex-shrink:0; }
.compact-promo .promo-event-art { width:120px; height:72px; object-fit:cover; }
.compact-promo a > span { display:flex; flex-direction:column; gap:6px; flex:1; min-width:0; }
.compact-promo small { color:var(--peach); font-family:var(--mono); font-size:.58rem; letter-spacing:.1em; line-height:1.6; text-transform:uppercase; }
.compact-promo strong { font-family:var(--display); font-weight:500; font-size:1.15rem; line-height:1.4; }
.compact-promo span > span { color:var(--muted); font-size:.76rem; line-height:1.5; }
.compact-promo b { color:var(--peach); font-size:.75rem; white-space:nowrap; font-weight:500; }
.compact-promo:hover { border-color:var(--peach); }
.related-events { margin:46px 0 30px; }
.related-events .overline { color:var(--peach); margin-bottom:12px; }
.event-detail .region-links { padding-top:22px; border-top:1px solid var(--rule); }
@media(max-width:760px) {
  .event-hero .display { font-size:2.4rem; }
  .event-facts { grid-template-columns:1fr; gap:20px; padding-top:0; }
  .compact-promo > a { gap:14px; padding:18px; flex-wrap:wrap; }
  .compact-promo img { width:80px; height:32px; }
  .compact-promo .promo-event-art { width:74px; height:65px; }
  .compact-promo b { margin-left:auto; }
  .compact-promo strong { font-size:1rem; }
  .event-actions .btn { width:100%; justify-content:center; font-size:.72rem; padding:14px 10px; }
  .event-about h2, .related-events h2 { font-size:1.4rem; }
}
@media (max-width: 760px) {
  .community-hero {
    padding: 42px 0 38px;
    background-image:
      linear-gradient(90deg, rgba(18, 7, 31, 0.72), rgba(18, 7, 31, 0.26)),
      url("/assets/plates/day-mobile.webp");
    background-position: center 55%;
  }
  .community-hero .display {
    margin: 20px 0;
    font-size: 3.2rem;
  }
  .community-hero .overline {
    font-size: 0.52rem;
    letter-spacing: 0.16em;
  }
  .coast-note {
    display: none;
  }
  .community-hero .wrap > p:last-child {
    font-size: 0.88rem;
    max-width: 24em;
  }
  .community-body {
    padding-top: 26px;
  }
  .community-page .page-nav {
    gap: 14px;
    padding-right: 0;
    border: 0;
  }
  .community-page .page-nav a {
    font-size: 0.56rem;
    letter-spacing: 0.12em;
  }
  .community-page .page-header-row {
    gap: 15px;
  }
  .community-page .page-header .brand img {
    height: 22px;
  }
  .community-page .header-cta {
    display: none;
  }
  .featured-banner {
    grid-template-columns: 1.3fr 1fr;
    min-height: 195px;
  }
  .featured-copy {
    padding: 20px 18px;
  }
  .featured-copy h3 {
    font-size: 1.3rem;
  }
  .featured-copy .overline {
    font-size: 0.48rem;
  }
  .featured-copy p {
    font-size: 0.72rem;
  }
  .featured-copy .banner-cta {
    font-size: 0.56rem;
    margin-top: 13px;
  }
  .featured-art {
    max-height: 240px;
  }
  .calendar-section {
    margin-top: 34px;
  }
  .calendar-title {
    display: block;
  }
  .calendar-title > p {
    margin-top: 12px;
    line-height: 1.8;
  }
  .calendar-intro {
    font-size: 0.8rem;
  }
  .event-filters {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .event-filters .search-field {
    grid-column: 1/-1;
  }
  .event-filters select {
    font-size: 0.75rem;
    padding: 10px 7px;
  }
  .event-list {
    grid-template-columns: 1fr;
  }
  .event-card {
    padding: 19px 0;
    gap: 13px;
  }
  .section-top h2 {
    font-size: 0.96rem;
  }
  .feed-message .text-link {
    margin: 18px 0 0;
    display: block;
  }
}
@media (max-width: 410px) {
  .community-hero .display {
    font-size: 2.8rem;
  }
  .featured-banner {
    grid-template-columns: 1fr;
  }
  .featured-art {
    display: none;
  }
  .featured-copy {
    padding: 22px;
  }
  .featured-copy h3 {
    font-size: 1.45rem;
  }
  .featured-copy p {
    font-size: 0.78rem;
  }
}
