/* Original NC artwork, framed in SVG without changing the supplied PNG. */
.brand { gap: 10px; margin: 0 4px 37px; font-size: 24px; letter-spacing: 2.1px; }
.brand-logo { width: 65px; height: 57px; overflow: visible; filter: drop-shadow(0 4px 12px #d55bab22); }
.brand-sub { letter-spacing: 2.2px; color: var(--muted); }
.mobile-brand { display: none; }
.footer-brand { display: flex; align-items: center; gap: 8px; }
.footer-brand svg { width: 34px; height: 30px; }
.hero { min-height: 340px; padding: 36px; }
.hero-art { mask-image: none; pointer-events: none; }
.hero-sunset { position: absolute; width: 390px; height: 390px; right: 34px; top: -24px; border-radius: 50%; background: radial-gradient(circle, #bb51ba20 0%, #e95ea815 40%, #f8b58309 61%, transparent 70%); }
.hero-grid { top: 52%; opacity: .45; transform: perspective(350px) rotateX(55deg) scale(1.8); transform-origin: center bottom; mask-image: linear-gradient(90deg, transparent 36%, #000); }
.hero-logo { position: absolute; width: 342px; height: 292px; right: 64px; top: 7px; filter: drop-shadow(0 16px 26px #10061655); }
.hero-cross { right: 30px; top: 24px; font-size: 25px; color: var(--peach, #ffb699); opacity: .8; }
.hero-coordinate { right: 20px; top: 102px; color: var(--muted); }
.hero-label { right: 34px; bottom: 22px; font-size: 7px; color: #d4b6d4; }
.hero-label > span:last-child { color: var(--peach, #ffb699); margin-left: 15px; }
.hero-content { max-width: 62%; }
.hero-content h1 > span { background: linear-gradient(100deg, #ed8dcd, #ffb699 90%); background-clip: text; -webkit-background-clip: text; color: transparent; }
.hero-stats .community-stat { max-width: 160px; line-height: 1.6; }

@media (min-width: 1600px) {
  .hero { min-height: 355px; }
  .hero-logo { width: 370px; height: 315px; right: 100px; }
  .hero-sunset { right: 90px; }
}
@media (max-width: 1200px) {
  .brand { margin-left: 0; margin-right: 0; font-size: 22px; gap: 8px; }
  .brand-logo { width: 56px; height: 50px; }
  .brand-sub { font-size: 7px; letter-spacing: 2px; }
  .hero { padding: 30px; min-height: 315px; }
  .hero-logo { width: 285px; height: 243px; right: 20px; top: 27px; }
  .hero-sunset { right: -40px; }
  .hero-coordinate { display: none; }
  .hero-content { max-width: 67%; }
  .hero-stats i:last-of-type { display: none; }
}
@media (min-width: 761px) and (max-width: 1000px) {
  .hero { min-height: 355px; }
  .hero-content { max-width: 100%; }
  .hero-logo { width: 177px; height: 151px; right: 8px; top: 190px; opacity: .8; }
  .hero-stats { max-width: 58%; }
  .hero-label { display: none; }
  .hero-sunset { width: 300px; height: 300px; right: -70px; top: 115px; }
}
@media (max-width: 760px) {
  .brand { gap: 10px; font-size: 25px; }
  .brand-logo { width: 65px; height: 57px; }
  .brand-sub { font-size: 8px; }
  .mobile-brand { display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
  .mobile-brand svg { width: 38px; height: 34px; }
  .topbar { gap: 9px; }
  .topbar-actions { margin-left: auto; }
  .hero { padding: 27px; min-height: 320px; }
  .hero-content { max-width: 100%; }
  .hero-logo { width: 210px; height: 179px; right: 15px; top: 119px; opacity: .9; }
  .hero-stats { max-width: 55%; margin-top: 29px; }
  .hero-stats .community-stat { display: none; }
  .hero-cross { right: 25px; top: 24px; }
  .hero-label { display: none; }
  .hero-sunset { right: -80px; top: 40px; }
}
@media (max-width: 550px) {
  .hero { min-height: 344px; padding: 25px 23px; }
  .hero-logo { width: 144px; height: 123px; right: 11px; top: 210px; opacity: 1; }
  .hero-stats { margin-top: 26px; gap: 13px; max-width: 57%; flex-wrap: wrap; }
  .hero-stats span { white-space: nowrap; }
  .hero-content h1 { font-size: clamp(34px, 10.5vw, 46px); }
  .hero-cross { font-size: 20px; right: 18px; top: 20px; }
  .hero-sunset { width: 280px; height: 280px; right: -60px; top: 125px; }
}
@media (max-width: 450px) {
  .topbar .breadcrumb { display: none; }
  .hero-content > .eyebrow { font-size: 7px; letter-spacing: 1px; }
  .hero-stats { display: grid; gap: 8px; }
  .hero-stats i { display: none; }
  .hero-logo { width: 142px; height: 121px; right: 6px; top: 216px; }
  .footer-brand { gap: 6px; }
  .main-footer > div { gap: 8px; }
}