/* Shared accessibility and phone refinements, loaded after each page's styles. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-x: hidden;
}

body {
  overflow-x: hidden;
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px)
    env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
}

@supports (overflow: clip) {
  html, body { overflow-x: clip; }
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--purple);
  outline-offset: 4px;
}

.skip-link { z-index: 20; }

.text-link,
#reset-poster,
#toggle-message-motion,
.sculpture-controls button,
.email-field button,
.petition-success button {
  min-height: 44px;
  min-width: 44px;
}

#reset-poster,
#toggle-message-motion,
.sculpture-controls button {
  padding: 10px 8px;
  font-size: 12px;
}

.poster,
.poster.dragging { touch-action: pan-y pinch-zoom; }

.petition-field input,
.petition-field textarea {
  min-width: 0;
  min-height: 48px;
  font-size: 16px;
}

.petition-field label { flex-wrap: wrap; row-gap: 4px; }
.petition-consent { min-height: 44px; padding: 10px 0; }
.petition-consent input { width: 24px; height: 24px; }
.petition-field-error { font-size: 14px; }
.petition-success:focus { outline: 3px solid var(--purple); outline-offset: 4px; }
.signature-heading { flex-wrap: wrap; }
.sculpture.is-ready .sculpture-loading { display: none; }

@media (hover: none) {
  .statement-strip:hover .message-track { animation-play-state: running; }
  .message-band.is-paused .message-track { animation-play-state: paused; }
}

@media (max-width: 700px) {
  .site-header nav { font-size: clamp(16px, 4.5vw, 20px); }
  .site-header nav a { min-width: 0; gap: 6px; }
}

@media (max-width: 650px) {
  .hero-copy { padding-top: 28px; }
  .hero-bottom .text-link, .idea-body .text-link {
    font-size: 12px;
    letter-spacing: .4px;
    gap: 16px;
  }
  .section-index, .art-definition h3 { font-size: 12px; }
  .poster-area { width: 74%; max-width: 300px; margin: 48px auto 28px; }
  .poster-coordinate { font-size: 12px; }
  .poster-caption { flex-wrap: wrap; font-size: 10px; gap: 5px 12px; }
  .poster-tools { flex-wrap: wrap; gap: 8px 16px; margin-left: 0; }
  .poster-tools .move-me-note { flex: 1 0 auto; white-space: nowrap; }
  .message-controls { margin-bottom: 0; padding-top: 12px; }
  .idea { padding-top: 60px; }
  .idea-body p { font-size: 16px; line-height: 1.7; }
  .idea-actions { align-items: flex-start; gap: 12px; flex-direction: column; }

  .sculpture-topline { font-size: 11px; flex-wrap: wrap; gap: 8px 20px; }
  .sculpture-stage { height: clamp(340px, 115vw, 470px); margin-top: 20px; }
  .sculpture-side-note { font-size: 12px; }
  .sculpture-bottomline p { font-size: 12px; line-height: 1.6; }
  .sculpture-bottomline p > span { font-size: 12px; max-width: none; }
  .sculpture-controls { flex-wrap: wrap; justify-content: flex-start; gap: 12px 24px; }
  .sculpture-status, .sculpture-no-script { font-size: 12px; }

  .join-heading { display: block; padding-bottom: 30px; }
  .join h2 { font-size: clamp(42px, 15vw, 80px); }
  .join-aside { position: static; width: auto; margin: 24px 0 0; padding: 0; transform: rotate(-2deg); }
  .join-aside p { display: inline-block; margin: 0; font-size: 18px; }
  .join-aside > span { display: inline-block; font-size: 36px; margin-left: 24px; }
  .signup-intro p { font-size: 16px; }
  .signup-row form label { font-size: 12px; }
  .email-field input { font-size: 16px; }
  .email-field input::placeholder { color: #615f58; }
  .email-field { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; border-bottom: 0; }
  .email-field input { border-bottom: 1px solid #62615b; }
  .email-field button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 12px 0;
    border-bottom: 1px solid #62615b;
    font-size: 14px;
  }
  .signup-note, .signup-status { font-size: 14px; line-height: 1.6; }
  footer { font-size: 12px; }

  .petition-topline { font-size: 11px; gap: 12px; }
  .petition-kicker { font-size: 11px; letter-spacing: .3px; }
  .petition-opening, .petition-demands p, .petition-pledge { font-size: 16px; }
  .petition-demands li { grid-template-columns: 27px minmax(0, 1fr); gap: 12px; }
  .demand-number { font-size: 11px; }
  .petition-signing { max-width: none; padding: 24px 18px; }
  .petition-signing-note, .petition-local-note { font-size: 14px; }
  .petition-tally > span, .petition-field label { font-size: 12px; }
  .petition-field label span { font-size: 11px; }
  .petition-consent span { font-size: 14px; }
  #petition-comment-limit { font-size: 12px; }
  .petition-submit { font-size: 16px; min-height: 52px; }
  .petition-form-status, .petition-feed-status { font-size: 14px; }
  .petition-supporters-heading { flex-wrap: wrap; gap: 8px; font-size: 12px; }
  .petition-supporters-heading > span { max-width: none; font-size: 12px; text-align: left; }
  .petition-comments h2 { font-size: 12px; }
  .petition-signature p { font-size: 16px; }
  .signature-heading time { font-size: 12px; }
  .petition-success p { font-size: 16px; }
  .petition-success button { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .poster-tools .move-me-note { transform: none; }
}

@media (forced-colors: active) {
  .petition-field input, .petition-field textarea, .petition-submit,
  .petition-signing, .petition-comment-card { border: 1px solid CanvasText; }
}