/* App-wide mobile safety net.

   The three migrated stylesheets each handle their own layouts and already
   carry breakpoints; these are only the cross-cutting guards that stop content
   escaping the viewport on a phone. Deliberately narrow — anything layout
   specific belongs in the stylesheet that owns that layout. */

/* Media never wider than its column. */
img, svg, video, canvas { max-width: 100%; height: auto; }

/* Wide content scrolls inside itself instead of widening the page. */
pre { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.article-body table,
.prose table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Long URLs and unbroken strings wrap rather than pushing the layout out. */
p, li, dd, dt, blockquote, figcaption,
h1, h2, h3, h4, .lede, .section-sub { overflow-wrap: break-word; }

/* Grid/flex children default to min-width:auto, which lets long content refuse
   to shrink and blow out the track. */
.facts > li, .board-col, .card, .spend-card, .steps > li { min-width: 0; }

@media (max-width: 560px) {
  /* Full-width buttons read better than a ragged wrap on a phone. */
  .page-intro-actions .btn { width: 100%; justify-content: center; }
  .page-intro-actions { gap: 0.6rem; }
}

/* ---------- Workshop countdown ----------
   A four-across grid rather than a wrapping flex row: at phone widths four
   cells cannot fit, and flex-wrap left a lone "SECONDS" box on its own line. */
.pop-countdown{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0.7rem;margin-top:1.9rem;max-width:32rem;
}
.pop-countdown > div{
  background:rgba(19,57,28,0.55);
  border:1px solid rgba(233,237,217,0.22);
  border-radius:14px;padding:0.85rem 0.5rem;text-align:center;
}
.pop-count-num{
  font-family:Lora,Georgia,"Times New Roman",serif;
  font-size:2rem;line-height:1;color:#2FF141;font-variant-numeric:tabular-nums;
}
.pop-count-lbl{
  font-size:0.66rem;letter-spacing:0.1em;text-transform:uppercase;
  font-weight:700;color:rgba(233,237,217,0.72);margin-top:0.45rem;
}
@media (max-width:430px){
  .pop-countdown{grid-template-columns:repeat(2,minmax(0,1fr));max-width:22rem;}
  .pop-count-num{font-size:1.85rem;}
}

/* ---------- Protocols of Place artwork ----------
   The convener's save-the-date poster, cropped. The gradient sits over the
   photograph so the hero copy keeps its contrast at every viewport. */
.page-intro.pop-hero{
  position:relative;
  background-image:
    linear-gradient(172deg, rgba(10,26,16,0.80) 0%, rgba(13,30,19,0.62) 42%, rgba(19,57,28,0.82) 100%),
    url("/assets/img/protocols-of-place-hero.jpg");
  background-size:cover;
  background-position:center 42%;
  background-repeat:no-repeat;
}
@media (max-width:700px){
  .page-intro.pop-hero{background-position:60% 45%;}
}

.pop-figure{margin:0;}
.pop-figure img{
  display:block;width:100%;height:auto;
  border-radius:14px;border:1px solid rgba(20,32,26,0.12);
}
.pop-figure figcaption{
  margin-top:0.7rem;font-size:0.85rem;color:#5c6b5f;
}

.pop-poster{
  display:block;max-width:420px;margin:0;
}
.pop-poster img{
  display:block;width:100%;height:auto;border-radius:14px;
  box-shadow:0 18px 40px rgba(14,42,23,0.22);
}

/* ---------- Button rows ---------- */
.pop-actions{display:flex;flex-wrap:wrap;gap:0.7rem;}

/* ---------- Confirm-your-attendance block ----------
   The section heading is centred by .section-head, so the body is centred to
   match rather than sitting hard left with the poster stranded beside a wide
   empty gutter. The bullet list keeps its left alignment inside the centred
   box — centred bullets are harder to scan. */
.pop-rsvp{max-width:46em;margin-inline:auto;text-align:center;}
.pop-rsvp .callout{text-align:left;margin-inline:auto;}
.pop-rsvp .callout ul{display:inline-block;text-align:left;margin-inline:0;}
.pop-rsvp .pop-actions{justify-content:center;}
.pop-rsvp .pop-poster{margin-inline:auto;}
.pop-rsvp p{margin-inline:auto;}