/* Community — the Pulse as a trail across the basin, Discord, the Dudeist corner, contact over the ridges. */

.p-community .intro { padding-bottom: 0; }
.p-community .intro h1 { max-width: 10ch; }

/* the trail: entries are stops; JS draws one path through the dots */
.p-community .pulse-sec { padding-top: clamp(2rem, 6vw, 4rem); }
.p-community .trail { position: relative; margin-top: clamp(2rem, 6vw, 4rem); }
.p-community .trail-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.p-community .track { fill: none; stroke: var(--sand-deep); stroke-width: 2; stroke-dasharray: 2 7; stroke-linecap: round; }
.p-community .line { fill: none; stroke: var(--copper); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.p-community .pulse { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(3rem, 9vw, 7rem); position: relative; }
.p-community .stop { position: relative; padding-left: 2.6rem; max-width: 34rem; }
.p-community .dot {
  position: absolute; left: 0; top: .35rem; width: 1.1rem; height: 1.1rem; border-radius: 50%;
  border: 2.5px solid var(--dune); background: var(--sand);
  transition: background .35s var(--ease-out), border-color .35s, transform .35s var(--ease-out), box-shadow .35s;
}
.p-community .stop.is-lit .dot { background: var(--copper); border-color: var(--copper); transform: scale(1.25); box-shadow: 0 0 0 6px color-mix(in srgb, var(--copper) 22%, transparent); }
.p-community .stop time { display: block; font-weight: 600; color: var(--rust); font-size: .95rem; margin-bottom: .3rem; }
.p-community .stop h3 { font-size: clamp(1.5rem, 3vw, 2.1rem); margin-bottom: .4rem; }
.p-community .stop p { margin-bottom: .5rem; }
.p-community .stop a { font-weight: 600; }

@media (min-width: 52rem) {
  /* stops alternate sides; the dot sits on the inner edge so the trail runs the open lane between them */
  .p-community .stop { width: 46%; }
  .p-community .dot { top: .55rem; }
  .p-community .stop:nth-child(odd) { padding-left: 0; padding-right: 3rem; text-align: right; }
  .p-community .stop:nth-child(odd) .dot { left: auto; right: 0; }
  .p-community .stop:nth-child(odd) p { margin-left: auto; }
  .p-community .stop:nth-child(even) { padding-left: 3rem; margin-left: auto; margin-right: 4%; }
}

/* discord */
.p-community .discord-grid { display: grid; gap: 2rem; }
@media (min-width: 52rem) { .p-community .discord-grid { grid-template-columns: 1.2fr 1fr; align-items: center; gap: clamp(2rem, 6vw, 5rem); } }
.p-community .discord .lede { color: var(--bone-soft); }
.p-community .embed { max-width: 26rem; }
.p-community .embed iframe { width: 100%; height: 420px; border: 0; border-radius: var(--radius); }

/* dudeist corner */
.p-community .dude-grid { display: grid; gap: 2rem; }
@media (min-width: 56rem) { .p-community .dude-grid { grid-template-columns: 2fr 3fr; column-gap: clamp(2rem, 6vw, 5rem); } }
.p-community .three { list-style: none; margin: 0; padding: 0; counter-reset: held; }
.p-community .three li { position: relative; padding: 1.1rem 0 1.1rem 2.4rem; border-top: 1px solid var(--sand-deep); max-width: 38rem; font-size: 1.1rem; }
.p-community .three li::before { content: ""; position: absolute; left: .2rem; top: 1.65rem; width: 1rem; height: 1rem; border-radius: 50%; background: var(--copper); }
.p-community .three strong { display: block; font-family: var(--display); font-weight: 700; font-stretch: 110%; font-size: 1.3rem; line-height: 1.15; margin-bottom: .2rem; }
.p-community .abide { font-family: var(--display); font-weight: 800; font-stretch: 112%; font-size: clamp(1.8rem, 4vw, 2.8rem); line-height: 1; color: var(--rust); margin: .5rem 0 0; }
@media (min-width: 56rem) { .p-community .abide { grid-column: 2; } }

/* contact, with the ridges at the foot of the page */
.p-community .contact-sec { overflow: hidden; padding-bottom: calc(46vh + 3rem); }
.p-community .contact-grid { display: grid; gap: 2rem; position: relative; z-index: 1; }
@media (min-width: 56rem) { .p-community .contact-grid { grid-template-columns: 2fr 3fr; gap: clamp(2rem, 6vw, 5rem); } }
.p-community .form { max-width: 36rem; }
.p-community .form .btn-row { margin-top: 1.4rem; }
.p-community .contact-sec .ridges { z-index: 0; }
.p-community .ridges svg { overflow: visible; } /* ridge fills run below the box so the parallax lift never shows a gap */

@media (prefers-reduced-motion: reduce) {
  .p-community .dot { transition: none; }
}