/* The red edge uses a sampled half sine wave: flat at each end, rising on the right. */
html { scroll-padding-top: var(--header-offset, 120px); }
.site-header { position: sticky; top: 0; z-index: 30; background: var(--cream); box-shadow: 0 1px 0 #17271b10; }
.skip-link { z-index: 40; }
.hero { --wave-shape: polygon(0 0, 100% 0, 100% 0.000%, 98% 0.099%, 96% 0.394%, 94% 0.886%, 92% 1.571%, 90% 2.447%, 88% 3.511%, 86% 4.759%, 84% 6.185%, 82% 7.784%, 80% 9.549%, 78% 11.474%, 76% 13.552%, 74% 15.773%, 72% 18.129%, 70% 20.611%, 68% 23.209%, 66% 25.912%, 64% 28.711%, 62% 31.594%, 60% 34.549%, 58% 37.566%, 56% 40.631%, 54% 43.733%, 52% 46.860%, 50% 50.000%, 48% 53.140%, 46% 56.267%, 44% 59.369%, 42% 62.434%, 40% 65.451%, 38% 68.406%, 36% 71.289%, 34% 74.088%, 32% 76.791%, 30% 79.389%, 28% 81.871%, 26% 84.227%, 24% 86.448%, 22% 88.526%, 20% 90.451%, 18% 92.216%, 16% 93.815%, 14% 95.241%, 12% 96.489%, 10% 97.553%, 8% 98.429%, 6% 99.114%, 4% 99.606%, 2% 99.901%, 0% 100.000%); aspect-ratio: 1479 / 1064; min-height: 0; background: #d3222d; }
.hero-red { display: block; position: absolute; inset: 0 0 auto; height: 30%; z-index: 1; background: #d3222d; clip-path: none; pointer-events: none; }
.hero-red::after { content: ''; position: absolute; top: calc(100% - 1px); left: 0; width: 100%; height: 90%; background: inherit; clip-path: var(--wave-shape); }
.hero .hero-copy { padding: 3% 6.3%; min-height: 0; }
.hero h1 { white-space: normal; overflow-wrap: anywhere; }
.hero > .illustration, .hero > .handwritten { z-index: 3; pointer-events: none; }
.hero .sydney-note { bottom: 9%; }
.community-art-strip { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: center; gap: 20px; padding: 18px 0 36px; }
.community-art-strip img { width: 100%; height: 65px; object-fit: contain; mix-blend-mode: normal; }
@media (max-width: 900px) {
  .community-art-strip { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 22px 15px; padding-bottom: 30px; }
  .community-art-strip img { height: 48px; }
}

/* The opening photograph stays still beneath the fixed curve and illustrations. */
.hero-photo-static { position: absolute; inset: 30% 0 0; z-index: 0; overflow: hidden; background: url('assets/hero-harbour-clean.webp') center bottom / 100% auto no-repeat; }
.hero-photo-static.has-custom-photo { background: none; }
.hero-photo-static img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hero-wave { display: none; }
@media (max-width: 900px) {
  .hero-photo-static { position: relative; inset: auto; grid-area: 2 / 1; width: 100%; aspect-ratio: 4 / 3; background-size: 150% auto; }
  .hero-wave { display: block; grid-area: 2 / 1; position: relative; align-self: start; height: clamp(100px, 30vw, 180px); margin-top: -1px; background: #d3222d; clip-path: var(--wave-shape); z-index: 2; pointer-events: none; }
}