/* ============================================================
   SONIFY overrides & new pages
   styles.css is a verbatim copy of Sonara's stylesheet so it can be
   re-synced. Everything site-specific lives here.
   ============================================================ */

/* ----- Hero: longer title than "SONARA" ----- */
.hero-title {
  font-size: clamp(2.4rem, 6.5vw, 6.2rem);
  letter-spacing: 0.14em;
  white-space: nowrap;
}
.hero-expansion-lead { font-weight: 700; }
.hero-tagline { width: min(520px, 88vw); }

/* Last page in the configured order never shows the bottom fade. */
.section.is-last::after { display: none; }

/* ----- Shared page content wrapper (fade-up on reveal, like Sonara) ----- */
.pg-content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1240px;
  padding: 0 4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.4rem;
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}
.section.in-view .pg-content { opacity: 1; transform: translateY(0); }

.pg-head { text-align: center; max-width: 780px; }
.pg-head .section-label { margin-bottom: 1rem; }

.pg-title {
  font-size: clamp(1.8rem, 3vw, 2.7rem);
  font-weight: 300;
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin-bottom: 0.9rem;
}
.pg-title em { font-style: normal; color: var(--accent); }
.pg-title-lg { font-size: clamp(2.4rem, 4.4vw, 3.8rem); }

.pg-body {
  font-size: clamp(0.95rem, 1.15vw, 1.08rem);
  line-height: 1.65;
  color: var(--text-dim);
}
.pg-body em { color: var(--text); font-style: italic; }

.pg-caption {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  opacity: 0.75;
  text-align: center;
}
.pg-caption a { color: var(--accent); }

/* ----- YouTube facade ----- */
.yt {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  background: #000;
  cursor: pointer;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.08);
  transition: box-shadow 0.35s ease, transform 0.35s ease;
}
.yt:hover { box-shadow: 0 24px 70px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(212, 168, 67, 0.45), 0 0 40px rgba(212, 168, 67, 0.12); }
.yt img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0.82;
  transition: opacity 0.35s ease, transform 0.6s ease;
}
.yt:hover img { opacity: 0.95; transform: scale(1.02); }
.yt-play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  border: 1px solid rgba(212, 168, 67, 0.55);
  /* Faked frost (no backdrop-filter: it flickers over the animated page canvases):
     translucent base, denser center, soft inner edge. */
  background-color: rgba(6, 6, 8, 0.72);
  background-image: radial-gradient(circle, rgba(6, 6, 8, 0.35) 0%, rgba(6, 6, 8, 0) 72%);
  color: var(--accent);
  cursor: pointer;
  display: grid;
  place-items: center;
  padding-left: 6px;
  box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.35), 0 0 0 0 rgba(212, 168, 67, 0.35);
  transition: transform 0.25s ease, background-color 0.25s ease, box-shadow 0.6s ease;
}
.yt:hover .yt-play { transform: scale(1.08); background-color: rgba(44, 34, 12, 0.7); box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.25), 0 0 0 14px rgba(212, 168, 67, 0.08); }
.yt-label {
  position: absolute;
  left: 1.1rem;
  bottom: 0.95rem;
  right: 1.1rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: rgba(232, 230, 227, 0.85);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8);
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.yt iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.yt.yt-active img,
.yt.yt-active .yt-play,
.yt.yt-active .yt-label { display: none; }
.yt.yt-active { cursor: default; }

/* Single wide video: never taller than the viewport allows */
.yt-wide { max-width: min(1040px, calc((100vh - 400px) * 1.7778)); }

/* Two videos side by side */
.yt-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.25rem;
  width: 100%;
  max-width: 1200px;
}
.yt-fig { margin: 0; display: flex; flex-direction: column; gap: 0.9rem; }
.yt-fig .yt { max-width: calc((100vh - 470px) * 1.7778); margin: 0 auto; }
.yt-fig figcaption { display: flex; flex-direction: column; gap: 0.25rem; text-align: center; }
.yt-fig figcaption strong { font-weight: 500; font-size: 1.05rem; }
.yt-fig figcaption span {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--text-dim);
}

/* ----- Pop page: split layout ----- */
.pg-split {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 3.5rem;
  align-items: center;
  max-width: 1320px;
}
.pg-split .pg-left { display: flex; flex-direction: column; }
.pg-split .pg-left .section-label { margin-bottom: 0.9rem; }
.pg-split .pg-body { max-width: 560px; }
.pg-split .pg-right { display: flex; flex-direction: column; gap: 0.9rem; }
.pg-split .pg-right .yt { max-width: calc((100vh - 260px) * 1.7778); }

.pg-stats { display: flex; gap: 2.5rem; margin-top: 1.5rem; }
.pg-stat { display: flex; flex-direction: column; }
.pg-stat-n {
  font-size: 2rem;
  font-weight: 300;
  color: var(--accent);
  line-height: 1;
}
.pg-stat-l {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-top: 0.4rem;
}

.pg-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 1.75rem;
}
.pg-card {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 1.1rem 1.25rem;
  border-radius: 12px;
  background: rgba(18, 18, 26, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text);
  text-decoration: none;
  transition: border-color 0.3s ease, transform 0.3s ease, background 0.3s ease, opacity 0.3s;
}
.pg-card:hover { opacity: 1; border-color: rgba(212, 168, 67, 0.45); background: rgba(22, 22, 32, 0.85); transform: translateY(-2px); }
.pg-card strong { font-size: 1.15rem; font-weight: 500; }
.pg-card-kicker {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}
.pg-card-text { font-size: 0.88rem; line-height: 1.5; color: var(--text-dim); }
.pg-pending-note {
  display: none;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--coral);
  margin-top: 0.2rem;
}
.pg-card.is-pending .pg-pending-note { display: block; }
.pg-card.is-pending { cursor: default; }

/* Logo slots: <img> first; if it fails to load the wordmark sibling shows. */
.logo-slot { display: flex; align-items: center; min-height: 2rem; }
.logo-slot img { max-height: 2rem; max-width: 180px; object-fit: contain; display: block; }
.wordmark {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(232, 230, 227, 0.85);
  white-space: nowrap;
}
.wordmark-serif { font-family: Georgia, 'Times New Roman', serif; letter-spacing: 0.08em; font-size: 0.8rem; }
.wordmark-rs {
  font-family: 'Times New Roman', Georgia, serif;
  font-weight: 700;
  font-style: italic;
  font-size: 1.65rem;
  letter-spacing: -0.02em;
  text-transform: none;
  color: #fff;
}

/* ----- Synth page tweaks ----- */
#stem-music .music-subtitle { max-width: 640px; margin: 0 auto; }
.music-credit { margin-top: -0.75rem; }

/* ----- Work with Robert ----- */
#solar-flow-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}
.wwr-content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1320px;
  padding: 0 4rem;
  display: flex;
  flex-direction: column;
  gap: 2.25rem;
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}
.section.in-view .wwr-content { opacity: 1; transform: translateY(0); }

.wwr-top {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 3.5rem;
  align-items: center;
}
.wwr-photo {
  height: min(56vh, 560px);
  aspect-ratio: 2 / 3;
  border-radius: 18px;
  overflow: hidden;
  position: relative;
  box-shadow:
    0 0 0 1px rgba(212, 168, 67, 0.35),
    14px 0 70px rgba(212, 168, 67, 0.22),
    0 30px 80px rgba(0, 0, 0, 0.65);
}
.wwr-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 20%;
  display: block;
}
.wwr-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, transparent 70%, rgba(212, 168, 67, 0.14));
  pointer-events: none;
}

.wwr-right { display: flex; flex-direction: column; }
.wwr-right .section-label { margin-bottom: 0.9rem; }
.wwr-title {
  font-size: clamp(2.4rem, 4.5vw, 3.8rem);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.wwr-sub {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  line-height: 1.75;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  margin-top: 0.7rem;
}

.wwr-logos {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.8rem;
  margin-top: 1.9rem;
  max-width: 640px;
}
.wwr-logo {
  height: 66px;
  min-width: 100px;
  padding: 0.6rem 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 15, 20, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  transition: border-color 0.3s ease, background 0.3s ease;
}
.wwr-logo:hover { border-color: rgba(212, 168, 67, 0.4); background: rgba(20, 20, 28, 0.9); }
.wwr-logo img {
  max-height: 44px;
  max-width: 130px;
  object-fit: contain;
  display: block;
  opacity: 0.92;
  transition: opacity 0.35s ease;
}
.wwr-logo:hover img { opacity: 1; }
.wwr-logo .wordmark { text-align: center; white-space: normal; line-height: 1.35; font-size: 0.7rem; }

.wwr-bottom { display: flex; flex-direction: column; gap: 1.25rem; max-width: 900px; }
.wwr-body {
  font-size: clamp(1.05rem, 1.45vw, 1.3rem);
  line-height: 1.7;
  color: rgba(226, 216, 188, 0.94);
}
.wwr-cta { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.wwr-btn { font-size: 0.9rem; padding: 0.95rem 2.6rem; pointer-events: auto; }
.wwr-email {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  color: var(--text-dim);
}
.wwr-email:hover { color: var(--accent); opacity: 1; }

.form-embed { width: 100%; max-width: 760px; }
.form-embed iframe {
  width: 100%;
  height: min(60vh, 640px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  background: #fff;
}

.wwr-footer {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  opacity: 0.3;
  text-align: left;
}

/* ----- Narrow screens (site is desktop-first; keep it sane when squeezed) ----- */
@media (max-width: 1000px) {
  .pg-content, .wwr-content { padding: 0 1.5rem; }
  .yt-pair, .pg-split, .pg-cards { grid-template-columns: 1fr; }
  .wwr-top { grid-template-columns: 1fr; gap: 1.5rem; }
  .wwr-photo { height: 38vh; }
  .hero-title { white-space: normal; }
}

/* Logo variants: dark artwork on transparent → invert; artwork on a white box → invert + screen (box disappears) */
/* Color logos: dark artwork on transparent gets inverted to white; artwork on a white box keeps its colors
   by inverting twice through hue-rotate, with screen blending so the white box vanishes into the card. */
.wwr-logo img.logo-dark { filter: invert(1); }
.wwr-logo img.logo-onwhite { filter: invert(1) hue-rotate(180deg); mix-blend-mode: screen; }

/* The hidden attribute must win over any display rule (logo fallbacks rely on it). */
[hidden] { display: none !important; }

/* Bigger, less blown-out treatment for detailed seals */
.wwr-logo img.logo-seal { max-height: 54px; }
.wwr-logo img.logo-onwhite { max-height: 54px; }

/* ----- Meditate with the Sun card (third instrument card, links out) ----- */
.meditate-card { display: block; color: var(--text); text-decoration: none; }
.meditate-card:hover { opacity: 1; border-color: rgba(212, 168, 67, 0.4); }
.meditate-arrow { display: inline-block; color: var(--accent); transition: transform 0.3s ease; }
.meditate-card:hover .meditate-arrow { transform: translateX(4px); }

.meditate-visual {
  position: relative;
  background: radial-gradient(circle at 50% 50%, rgba(212, 168, 67, 0.10), rgba(6, 6, 8, 0) 65%), rgba(255, 255, 255, 0.02);
}
.sun-breath {
  position: relative;
  width: 150px;
  height: 150px;
  animation: sunBreath 11s ease-in-out infinite; /* ~5.5s in, 5.5s out */
}
.sun-ring, .sun-core {
  position: absolute;
  inset: 0;
  margin: auto;
  border-radius: 50%;
}
/* Five wavelengths: rings tinted like SDO's AIA channels */
.sun-ring { border: 1px solid; opacity: 0.55; }
.sun-ring.r1 { width: 56%;  height: 56%;  border-color: rgba(255, 206, 84, 0.9);  box-shadow: 0 0 14px rgba(255, 206, 84, 0.35); }
.sun-ring.r2 { width: 68%;  height: 68%;  border-color: rgba(233, 140, 60, 0.8); }
.sun-ring.r3 { width: 80%;  height: 80%;  border-color: rgba(206, 84, 72, 0.7); }
.sun-ring.r4 { width: 91%;  height: 91%;  border-color: rgba(150, 110, 200, 0.6); }
.sun-ring.r5 { width: 100%; height: 100%; border-color: rgba(90, 150, 220, 0.5); }
.sun-core {
  width: 40%;
  height: 40%;
  background: radial-gradient(circle at 45% 42%, #fff6d8 0%, #ffd66e 38%, #e08a2e 72%, rgba(224, 138, 46, 0) 100%);
  box-shadow: 0 0 30px rgba(255, 196, 80, 0.55), 0 0 70px rgba(212, 168, 67, 0.25);
}
.sun-ring.r2 { animation: ringDrift 11s ease-in-out infinite 0.4s; }
.sun-ring.r3 { animation: ringDrift 11s ease-in-out infinite 0.8s; }
.sun-ring.r4 { animation: ringDrift 11s ease-in-out infinite 1.2s; }
.sun-ring.r5 { animation: ringDrift 11s ease-in-out infinite 1.6s; }
@keyframes sunBreath {
  0%, 100% { transform: scale(0.82); }
  50%      { transform: scale(1); }
}
@keyframes ringDrift {
  0%, 100% { opacity: 0.25; }
  50%      { opacity: 0.7; }
}
@media (prefers-reduced-motion: reduce) {
  .sun-breath, .sun-ring { animation: none; }
}

/* Shimmer layer mirrors the title text from data-text (Sonara hardcodes 'SONARA'). */
.hero-title .glow-wrap::after { content: attr(data-text); }

/* Ghost jump link: quiet shortcut to the final page (one conversion point, two hallways) */
.ghost-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.6rem;
  padding: 0;
  border: 0;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(212, 168, 67, 0.62);
  background: transparent;
  transition: color 0.3s ease, border-color 0.3s ease, background 0.3s ease, opacity 0.3s ease;
}
.ghost-link:hover { opacity: 1; color: var(--accent); }
.ghost-arrow { transition: transform 0.3s ease; }
.ghost-link:hover .ghost-arrow { transform: translateX(3px); }

/* Hero hint auto-armed on load: chevron only until the solar wind is playing (then Sonara's show-copy reveals the data caption) */
.scroll-hint.chevron-only:not(.show-copy) .scroll-hint-text { opacity: 0 !important; filter: blur(6px) !important; }

/* ----- QR page (only with ?qr=1): quiet, on-brand, easy to scan ----- */
.page-qr { background: var(--bg); }
.qr-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 42% 48% at 50% 52%, rgba(212, 168, 67, 0.16), transparent 70%),
    radial-gradient(ellipse 70% 60% at 50% 110%, rgba(74, 143, 212, 0.10), transparent 70%);
}
.qr-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}
.section.in-view .qr-content { opacity: 1; transform: translateY(0); }
.qr-content .section-label { margin-bottom: 0.4rem; }
.qr-card {
  padding: clamp(10px, 1.6vh, 18px);
  background: #fff;
  border-radius: 14px;
  box-shadow:
    0 0 0 1px rgba(212, 168, 67, 0.4),
    0 0 60px rgba(212, 168, 67, 0.18),
    0 30px 80px rgba(0, 0, 0, 0.6);
}
.qr-img {
  width: min(34vh, 34vw, 320px);
  height: auto;
  display: block;
  image-rendering: pixelated; /* keep modules crisp when scaled */
}
.qr-caption {
  font-size: clamp(1.3rem, 2.2vw, 1.9rem);
  font-weight: 300;
  letter-spacing: 0.04em;
  color: var(--text);
  margin-top: 0.4rem;
}
.qr-sub { font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.18em; color: var(--accent); }

/* ----- Inline Google Form modal ----- */
html.modal-open { overflow: hidden !important; }
#form-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 3vh 2vw; opacity: 0; transition: opacity 0.25s ease; }
#form-modal.is-open { opacity: 1; }
.form-modal-backdrop { position: absolute; inset: 0; background: rgba(6, 6, 8, 0.88); }
.form-modal-panel {
  position: relative;
  width: min(760px, 100%);
  height: min(92vh, 900px);
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(212, 168, 67, 0.35);
  transform: translateY(12px);
  transition: transform 0.25s ease;
}
#form-modal.is-open .form-modal-panel { transform: translateY(0); }
.form-modal-bar { display: flex; align-items: center; gap: 1rem; padding: 0.6rem 0.75rem 0.6rem 1.1rem; background: var(--bg-card); color: var(--text); }
.form-modal-title { font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); flex: 1; }
.form-modal-newtab { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em; color: var(--text-dim); }
.form-modal-newtab:hover { color: var(--accent); opacity: 1; }
.form-modal-close { background: none; border: 0; color: var(--text); font-size: 1.6rem; line-height: 1; cursor: pointer; padding: 0 0.4rem; opacity: 0.7; }
.form-modal-close:hover { opacity: 1; }
.form-modal-panel .form-embed { flex: 1; max-width: none; min-height: 0; }
.form-modal-panel .form-embed iframe { width: 100%; height: 100%; border: 0; border-radius: 0; display: block; }

/* Video titles on page 3 link out; styled as the title itself, gold only on hover */
.fig-title-link { color: inherit; text-decoration: none; }
.fig-title-link:hover { opacity: 1; color: var(--accent); }

/* Play the Sun page: Sonara's purple theme warmed to the site's orange/gold */
#stem-music { --purple: #e8913c; }

/* ============================================================
   MOBILE (html.is-mobile, set once at load for phones <= 768px)
   Sonara locks phones out; here the lockout is replaced with a
   normal vertical scroll: every page stacks, full width, auto height.
   ============================================================ */
html.is-mobile { overflow: visible !important; overflow-y: auto !important; height: auto !important; scroll-snap-type: none !important; }
html.is-mobile body { overflow: visible !important; height: auto !important; }
.is-mobile #mobile-overlay { display: none !important; }
.is-mobile #vision, .is-mobile #education, .is-mobile #citizen-science,
.is-mobile #stem-music, .is-mobile #contact, .is-mobile #qr { display: flex !important; }
.is-mobile .dot-nav, .is-mobile .scroll-hint, .is-mobile .section-down-cue, .is-mobile #cursor-glow { display: none !important; }
.is-mobile .hero-tagline, .is-mobile .hero-expansion { display: block !important; }
.is-mobile .hero-audio-meta { display: flex !important; }

/* Sections: natural height, comfortable padding */
.is-mobile .section {
  height: auto !important;
  min-height: 0 !important;
  padding: 4.5rem 1.25rem;
  scroll-snap-align: none;
  overflow: hidden;
}
.is-mobile .section::before, .is-mobile .section::after { height: 10vh; }

/* Content always visible on phones (no scroll-snap reveal timing to rely on) */
.is-mobile .pg-content, .is-mobile .wwr-content, .is-mobile .music-content, .is-mobile .qr-content {
  opacity: 1 !important; transform: none !important; padding: 0; max-width: 100%;
}
.is-mobile .music-bg, .is-mobile .vision-bg { opacity: 1 !important; }

/* Hero: one full phone screen */
.is-mobile #hero { height: 100svh !important; min-height: 100svh !important; padding: 0; }
.is-mobile .hero-inner { padding: 1.5rem 1.25rem; }
.is-mobile .hero-title { font-size: 2.7rem; white-space: normal; letter-spacing: 0.12em; line-height: 1.05; }
.is-mobile .hero-expansion { font-size: 0.8rem; letter-spacing: 0.12em; }
.is-mobile .hero-tagline { font-size: 1rem; margin-bottom: 2rem; }

/* Type scale */
.is-mobile .section-label { font-size: 0.78rem; letter-spacing: 0.18em; margin-bottom: 0.9rem; }
.is-mobile .pg-head { max-width: 100%; }
.is-mobile .pg-title { font-size: 1.9rem; }
.is-mobile .pg-title-lg { font-size: 2.3rem; }
.is-mobile .pg-body { font-size: 1rem; }

/* Videos and split layouts stack */
.is-mobile .yt-wide, .is-mobile .yt-fig .yt, .is-mobile .pg-split .pg-right .yt { max-width: 100%; }
.is-mobile .yt-pair, .is-mobile .pg-split, .is-mobile .pg-cards, .is-mobile .wwr-top { grid-template-columns: 1fr; gap: 1.5rem; }
.is-mobile .pg-split .pg-body { max-width: 100%; }
.is-mobile .pg-stats { gap: 2rem; }
.is-mobile .yt-play { width: 68px; height: 68px; }

/* Play the Sun: cards stack; sequencer scrolls sideways so cells stay tappable */
.is-mobile .music-title { font-size: 2.4rem; }
.is-mobile .instruments-grid { grid-template-columns: 1fr !important; gap: 1.25rem; }
.is-mobile .seq-toolbar { flex-wrap: wrap; justify-content: center; }
.is-mobile .sequencer-visual { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.is-mobile .seq-grid { min-width: 560px; }
.is-mobile .sun-breath { width: 120px; height: 120px; }

/* Work with Robert: portrait centered, logos 2x4, CTA stacked */
.is-mobile #solar-flow-canvas { display: none; }
.is-mobile .wwr-content { gap: 1.75rem; }
.is-mobile .wwr-top { justify-items: center; text-align: center; }
.is-mobile .wwr-photo { height: auto; width: min(68vw, 300px); aspect-ratio: 2 / 3; }
.is-mobile .wwr-right { align-items: center; }
.is-mobile .wwr-title { font-size: 2rem; }
.is-mobile .wwr-sub { font-size: 0.72rem; line-height: 1.7; }
.is-mobile .wwr-logos { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; max-width: 100%; width: 100%; }
.is-mobile .wwr-logo { height: 58px; min-width: 0; padding: 0.4rem 0.5rem; }
.is-mobile .wwr-logo img { max-width: 100%; max-height: 38px; }
.is-mobile .wwr-logo .wordmark { font-size: 0.55rem; }
.is-mobile .wwr-body { font-size: 1.05rem; }
.is-mobile .wwr-cta { flex-direction: column; align-items: flex-start; gap: 0.9rem; }
.is-mobile .wwr-btn { width: 100%; text-align: center; }

/* ----- Mobile pass 2 ----- */
/* More room under the top fade so labels never sit in it */
.is-mobile .section { padding-top: 6.5rem; padding-bottom: 5rem; }
.is-mobile .section::before, .is-mobile .section::after { height: 6vh; }
.is-mobile #hero { padding-top: 0; padding-bottom: 0; }

/* Page 3 on phones: label, heading, sub-heading, the two videos. Nothing else. */
.is-mobile #vision .yt-fig figcaption, .is-mobile #vision .ghost-link { display: none !important; }

/* Golden hour on phones: label, title, video, stats, then the two cards. */
.is-mobile #citizen-science .pg-split { display: flex; flex-direction: column; gap: 1.25rem; }
.is-mobile #citizen-science .pg-left, .is-mobile #citizen-science .pg-right { display: contents; }
.is-mobile #citizen-science .section-label { order: 1; margin-bottom: 0; }
.is-mobile #citizen-science .pg-title { order: 2; margin-bottom: 0; }
.is-mobile #citizen-science .pg-right .yt { order: 3; }
.is-mobile #citizen-science .pg-stats { order: 4; margin-top: 0.25rem; }
.is-mobile #citizen-science .pg-cards { order: 5; margin-top: 0; }
.is-mobile #citizen-science .pg-body, .is-mobile #citizen-science .pg-right .pg-caption { display: none !important; }

/* ----- Mobile pass 3: Play the Sun ----- */
.is-mobile .seq-toolbar {
  justify-content: flex-start;
  padding-left: 0;
  margin-bottom: 0;
  position: relative;
  z-index: 2;
}
/* Grid fits inside the card border: no forced width, tighter gap and padding */
.is-mobile .sequencer-visual { overflow: hidden; }
.is-mobile .seq-grid { min-width: 0; gap: 2px; padding: 0.5rem 0.6rem 0.4rem; }
.is-mobile .seq-cell { min-width: 0; }
.is-mobile .seq-label { font-size: 0.6rem; padding-right: 4px; }
/* Shorter visuals (JS matches heights inline, so these need !important) */
.is-mobile .synth-visual { height: 110px !important; }
.is-mobile .catalog-visual { height: 120px !important; }
.is-mobile .synth-fx-btns { display: none !important; }
.is-mobile .sun-breath { width: 96px; height: 96px; }
/* Tighter card text */
.is-mobile .instrument-card h3 { padding: 0.9rem 1.15rem 0.35rem; font-size: 1rem; }
.is-mobile .instrument-card p { padding: 0 1.15rem 1rem; font-size: 0.85rem; line-height: 1.5; }
.is-mobile .music-content { gap: 1.5rem; }

/* Phone hero: show the data caption that fades up under Listen; keep the chevron hidden */
.is-mobile .scroll-hint { display: flex !important; }
.is-mobile .scroll-hint .section-down-chevron { display: none !important; }
.is-mobile .scroll-hint-text { font-size: 0.72rem; }

/* Phone: extra breathing room around the Listen to Space page */
.is-mobile #education { padding-top: 9rem; padding-bottom: 7.5rem; }
.is-mobile #education .pg-content { gap: 1.75rem; }

/* ----- Mobile pass 4: generous top/bottom room, videos as inset tiles ----- */
.is-mobile .section { padding-top: 8.5rem; padding-bottom: 7.5rem; }
.is-mobile .section::before, .is-mobile .section::after { height: 5vh; }
.is-mobile #hero { padding-top: 0; padding-bottom: 0; }
.is-mobile #education { padding-top: 9.5rem; padding-bottom: 8rem; }
.is-mobile #citizen-science { padding-top: 9.5rem; padding-bottom: 9rem; }
.is-mobile .yt { width: 92%; max-width: 92%; margin-inline: auto; border-radius: 12px; }
.is-mobile .yt-fig .yt, .is-mobile .pg-split .pg-right .yt { width: 92%; max-width: 92%; }

/* ----- Mobile pass 5 ----- */
/* Sonara sets page padding by id (#vision { padding: 0 } etc.), which outranks
   .is-mobile .section. Match that specificity so every page gets the same room. */
.is-mobile #vision, .is-mobile #stem-music, .is-mobile #contact, .is-mobile #qr,
.is-mobile #education, .is-mobile #citizen-science { padding: 9.5rem 1.25rem 8.5rem; }
.is-mobile #hero { padding: 0; }

/* Sequencer: 16 cells fit inside the card border, cells taller than wide so they stay tappable */
.is-mobile #stem-music { padding-left: 0.75rem; padding-right: 0.75rem; }
.is-mobile .seq-grid { gap: 2px; padding: 0.5rem 0.5rem 0.4rem; }
.is-mobile .seq-label { font-size: 0.55rem; padding-right: 3px; letter-spacing: 0; }
.is-mobile .seq-cell { aspect-ratio: auto; height: 26px; }

/* Keep the last page's footer close to the bottom of the mobile document. */
.is-mobile #pages > .section.is-last { padding-bottom: 1.5rem; }

/* ----- Rising starfield behind every page after the hero ----- */
.is-mobile #edu-canvas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.is-mobile #hero { background: var(--bg); z-index: 1; }   /* opaque hero hides the starfield until you scroll */
.is-mobile .page-qr { background: transparent; }
/* Phones: Connect link back under the Edgar Mitchell video */
.is-mobile #vision .ghost-link { display: inline-flex !important; }

/* Phones: no fade bands between pages, so the starfield runs continuously */
.is-mobile .section::before, .is-mobile .section::after { display: none !important; }

/* Phones: no fade bands between pages, so the starfield runs continuously */
.is-mobile .section::before, .is-mobile .section::after { display: none !important; }
/* Phones: Connect link last on the golden hour page */
.is-mobile #citizen-science .ghost-link { order: 6; }

/* Phones: Meditate with the Sun stands apart from the instruments, with room above and below */
.is-mobile .meditate-card { margin-top: 7rem; margin-bottom: 3rem; }

/* Phones: video tiles a touch wider */
.is-mobile .yt, .is-mobile .yt-fig .yt, .is-mobile .pg-split .pg-right .yt { width: 96%; max-width: 96%; }

/* Phones: Meditate with the Sun styled as its own section (label, big breathing sun, open layout) */
.is-mobile .meditate-card {
  margin-top: 11rem;
  margin-bottom: 3rem;
  background: transparent;
  border: 0;
  text-align: center;
  overflow: visible;
}
.is-mobile .meditate-card::before {
  content: 'Breathe';
  display: block;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.25rem;
}
.is-mobile .meditate-visual {
  height: 220px !important;
  border: 0;
  background: radial-gradient(circle at 50% 50%, rgba(212, 168, 67, 0.14), rgba(6, 6, 8, 0) 62%);
}
.is-mobile .meditate-card .sun-breath { width: 170px; height: 170px; }
.is-mobile .meditate-card h3 { font-size: 1.9rem; font-weight: 300; padding: 1.5rem 0 0.6rem; line-height: 1.1; }
.is-mobile .meditate-card p { font-size: 1.02rem; line-height: 1.6; padding: 0 0.5rem 0.5rem; color: var(--text-dim); }

/* ----- Phone hero: caption on one line; chevron just under the yellow ring ----- */
.is-mobile .scroll-hint-text { white-space: nowrap; }
.ring-chevron {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(min(var(--ring-bottom, 72svh), 100svh - 3.5rem) + 0.4rem);
  z-index: 2;
  display: flex;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 2.8s ease;
}
.ring-chevron.is-shown { opacity: 1; }
.ring-chevron .section-down-chevron { display: block; color: rgba(228, 188, 88, 0.96); }
.ring-chevron.is-pulsing .section-down-chevron { animation: hintPulse 1.7s ease-in-out infinite; }

/* Phones: hero dissolves into the starfield instead of ending on a hard line */
.is-mobile #hero {
  background: linear-gradient(to bottom, var(--bg) 0%, var(--bg) 94%, rgba(6, 6, 8, 0) 100%);
}
.is-mobile #hero-canvas {
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 94%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 94%, transparent 100%);
}

/* Phones: page gaps 40% tighter (was 9.5rem top / 8.5rem bottom) */
.is-mobile #vision, .is-mobile #stem-music, .is-mobile #contact, .is-mobile #qr,
.is-mobile #education, .is-mobile #citizen-science { padding-top: 6.27rem; padding-bottom: 5.61rem; }

/* Phones: no static glow wash on Play the Sun either (starfield only) */
.is-mobile .music-bg { display: none !important; }

/* Phones: email centered under the Start a conversation button */
.is-mobile .wwr-email { align-self: center; text-align: center; }

/* Logo tiles are credentials, not controls: no hover highlight, no pointer, no tap flash */
.wwr-logo, .wwr-logo:hover { border-color: rgba(255, 255, 255, 0.08); background: rgba(15, 15, 20, 0.78); cursor: default; }
.wwr-logo:hover img { opacity: 0.92; }
.wwr-logos, .wwr-logo, .wwr-logo img { -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; -webkit-user-drag: none; }
.wwr-logo img { pointer-events: none; }

/* Phones: 30% more room above Listen to Space (6.27rem -> 8.15rem) */
.is-mobile #education { padding-top: 8.15rem; }

/* Phones: taller waveform (110px -> 143px); wavetable list floats above the card instead of being clipped */
.is-mobile .synth-visual { height: 143px !important; overflow: visible; }
.is-mobile .instrument-card:has(.synth-visual) { overflow: visible; position: relative; z-index: 5; }
.is-mobile .synth-visual #synth-wave-canvas { border-radius: 12px 12px 0 0; }
.is-mobile .wt-list { z-index: 100; max-height: 60vh; overflow-y: auto; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.7); }

/* Phones: golden hour waveform is a band behind the Solar Sample Pack card (top set by js/sonify.js) */
.is-mobile #cs-canvas { inset: auto; left: 0; width: 100%; height: 240px; top: 50%; }
/* Phones: Rolling Stone card first, Solar Sample Pack second */
.is-mobile .pg-cards .pg-card-press { order: 1; }
.is-mobile .pg-cards [data-link="samplePack"] { order: 2; }

/* Phones: stats row centered; each label centered under its number */
.is-mobile #citizen-science .pg-stats { justify-content: center; align-self: center; }
.is-mobile .pg-stat { align-items: center; text-align: center; }

/* Meditate visual: the sun holds still, only the rings breathe in and out */
.sun-breath { animation: none; }
.sun-ring.r1 { animation: ringBreath 11s ease-in-out infinite 0s; }
.sun-ring.r2 { animation: ringBreath 11s ease-in-out infinite 0.4s; }
.sun-ring.r3 { animation: ringBreath 11s ease-in-out infinite 0.8s; }
.sun-ring.r4 { animation: ringBreath 11s ease-in-out infinite 1.2s; }
.sun-ring.r5 { animation: ringBreath 11s ease-in-out infinite 1.6s; }
@keyframes ringBreath {
  0%, 100% { transform: scale(0.78); opacity: 0.25; }
  50%      { transform: scale(1);    opacity: 0.7; }
}
@media (prefers-reduced-motion: reduce) {
  .sun-ring { animation: none !important; }
}

/* Meditate visual: let the sun's glow spill past its box instead of being clipped */
.meditate-card { overflow: visible; }
.meditate-visual { overflow: visible; border-radius: 12px 12px 0 0; }
.is-mobile .meditate-visual { height: 264px !important; } /* 20% taller than 220px */

/* Phones: 10% more room above Listen to Space (8.15rem -> 8.97rem) */
.is-mobile #education { padding-top: 8.97rem; }
/* Phones: 25% less room above Pop Production (6.27rem -> 4.7rem) */
.is-mobile #citizen-science { padding-top: 4.7rem; }

/* Phones: Breathe section 20% more room above (11rem -> 13.2rem), total gap below +10% (margin 3rem -> 4.5rem) */
.is-mobile .meditate-card { margin-top: 13.2rem; margin-bottom: 4.5rem; }
/* Phones: 15% more room above Breathe (13.2rem -> 15.18rem) */
.is-mobile .meditate-card { margin-top: 15.18rem; }

/* ============================================================
   Inline contact form (Work with Robert)
   ============================================================ */
/* Desktop: the last page grows to hold the form */
#contact { height: auto; min-height: 100vh; overflow: visible; padding-top: 6rem; padding-bottom: 4rem; }
.wwr-bottom { max-width: 780px; gap: 1.5rem; }

.cf-intro { font-size: 1rem; line-height: 1.7; color: var(--text-dim); }
.cf-intro .wwr-email { color: var(--accent); }
.cf { display: flex; flex-direction: column; gap: 1.6rem; width: 100%; }
.cf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.cf-field { display: flex; flex-direction: column; gap: 0.5rem; }
.cf-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.cf-label b { color: var(--accent); font-weight: 400; }
.cf input[type="text"], .cf input[type="email"], .cf textarea {
  width: 100%;
  background: rgba(10, 10, 14, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  padding: 0.8rem 0.95rem;
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 1rem;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.cf textarea { resize: vertical; min-height: 110px; line-height: 1.5; }
.cf input:focus, .cf textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(212, 168, 67, 0.15);
}
.cf-group { border: 0; margin: 0; padding: 0; min-width: 0; }
.cf-group legend { padding: 0; margin-bottom: 0.7rem; }
.cf-chips { display: flex; flex-wrap: wrap; gap: 0.55rem; }
.cf-chip { position: relative; }
.cf-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.cf-chip span {
  display: inline-block;
  padding: 0.55rem 1.05rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 100px;
  font-size: 0.9rem;
  color: var(--text-dim);
  background: rgba(10, 10, 14, 0.55);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.cf-chip:hover span { border-color: rgba(212, 168, 67, 0.45); color: var(--text); }
.cf-chip input:checked + span { border-color: var(--accent); color: var(--accent); background: rgba(212, 168, 67, 0.14); }
.cf-chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.cf-other, .cf-interest-other { margin-top: 0.85rem; max-width: 440px; }

.cf-invalid input, .cf-invalid textarea { border-color: var(--coral) !important; }
.cf-group.cf-invalid .cf-chip span { border-color: rgba(224, 120, 80, 0.65); }
.cf-invalid .cf-label, .cf-invalid legend { color: var(--coral); }

.cf-actions { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.cf-submit { pointer-events: auto; cursor: pointer; font-size: 0.9rem; padding: 0.95rem 3.2rem; }
.cf-submit:disabled { opacity: 0.6; cursor: default; }
.cf-status { font-size: 0.88rem; color: var(--text-dim); }
.cf-status.is-error { color: var(--coral); }
.cf-status a { color: var(--accent); text-decoration: underline; }

.cf-success {
  border: 1px solid rgba(212, 168, 67, 0.35);
  border-radius: 12px;
  padding: 1.5rem 1.75rem;
  background: rgba(18, 18, 26, 0.72);
}
.cf-success-title { font-size: 1.35rem; font-weight: 300; margin-bottom: 0.45rem; }
.cf-success-body { color: var(--text-dim); line-height: 1.6; }
.cf-success .wwr-email { color: var(--accent); }

/* Phones: one column, full-width chips for the long role options, 16px inputs (no iOS zoom) */
.is-mobile .cf-row { grid-template-columns: 1fr; }
.is-mobile .cf input[type="text"], .is-mobile .cf input[type="email"], .is-mobile .cf textarea { font-size: 16px; }
.is-mobile .cf-chips-stack { flex-direction: column; }
.is-mobile .cf-chips-stack .cf-chip span { display: block; width: 100%; }
.is-mobile .cf-submit { width: 100%; }
.is-mobile .cf-actions { flex-direction: column; align-items: stretch; }
.is-mobile .cf-intro { font-size: 0.95rem; }
.is-mobile .wwr-bottom { text-align: left; }

/* Readability: brighter secondary text site-wide (Sonara's #8a8a92 was too dim) */
:root { --text-dim: #bdbab4; }
.pg-caption { opacity: 0.9; }
.cf-hint { text-transform: none; letter-spacing: 0.02em; font-size: 0.72rem; margin-left: 0.4rem; opacity: 0.8; }

/* ----- Contact form, list layout (.cf--list): vertical checkboxes and radio buttons.
   Overrides the chip styles above; remove the class (style: 'chips') to get pills back. ----- */
.cf--list .cf-chips { flex-direction: column; flex-wrap: nowrap; gap: 0.15rem; }
.cf--list .cf-chip span {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.42rem 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--text);
  font-size: 1rem;
  line-height: 1.35;
}
.cf--list .cf-chip span::before {
  content: '';
  flex: none;
  width: 18px;
  height: 18px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 4px;
  background: rgba(10, 10, 14, 0.55) center / 12px 12px no-repeat;
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
.cf--list .cf-chip input[type="radio"] + span::before { border-radius: 50%; }
.cf--list .cf-chip:hover span { color: var(--text); }
.cf--list .cf-chip:hover span::before { border-color: rgba(212, 168, 67, 0.7); }
.cf--list .cf-chip input:checked + span { color: var(--text); background: none; border: 0; }
.cf--list .cf-chip input[type="checkbox"]:checked + span::before {
  border-color: var(--accent);
  background-color: var(--accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5' fill='none' stroke='%23060608' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.cf--list .cf-chip input[type="radio"]:checked + span::before {
  border-color: var(--accent);
  background-color: var(--accent);
  box-shadow: inset 0 0 0 4px #0b0b10;
}
.cf--list .cf-chip input:focus-visible + span { outline: none; }
.cf--list .cf-chip input:focus-visible + span::before { outline: 2px solid var(--accent); outline-offset: 2px; }
.cf--list .cf-group.cf-invalid .cf-chip span { border: 0; }
.cf--list .cf-group.cf-invalid .cf-chip span::before { border-color: var(--coral); }
.cf--list .cf-group legend { margin-bottom: 0.45rem; }
/* "Company or agency" + "Just curious" wrap together as one unit in the pill layout;
   in the list layout the wrapper is invisible and they stack like every other option */
.cf--list .cf-inline { display: contents; }
.cf--chips .cf-inline { display: flex; flex-wrap: nowrap; gap: 0.55rem; }
.cf--chips .cf-inline .cf-chip span { white-space: nowrap; }
/* Form uses the full content width (the 780px cap made it cramped) */
.wwr-bottom { max-width: none; }
/* Reasonable field widths now that the form spans the page */
.cf-row { grid-template-columns: repeat(2, minmax(0, 300px)); }
.cf > .cf-field { max-width: 624px; }
.is-mobile .cf-row { grid-template-columns: 1fr; }
.is-mobile .cf > .cf-field { max-width: none; }
/* Type scale: labels no longer read as fine print; inputs 16px everywhere (no iOS zoom); chips a notch up */
.cf-label { font-size: 0.84rem; letter-spacing: 0.12em; }
.cf-hint { font-size: 0.8rem; }
.cf input[type="text"], .cf input[type="email"], .cf textarea { font-size: 16px; }
.cf-chip span { font-size: 1rem; }
/* A little more air between questions (was 1.6rem) */
.cf { gap: 2.1rem; }
/* Question labels in gold (hint stays neutral so it reads as secondary) */
.cf-label { color: var(--accent); }
.cf-label .cf-hint { color: var(--text-dim); }
/* Message box a bit taller (was 110px min) */
.cf textarea { min-height: 160px; }
.cf textarea { resize: vertical; overflow-y: auto; }
/* Chips share the logo cards' geometry (10px radius) instead of full pills */
.cf--chips .cf-chip span { border-radius: 10px; }
/* Opening question above the form: set apart, gold italic */
.wwr-question {
  font-size: clamp(1.35rem, 2.1vw, 1.8rem);
  font-weight: 300;
  font-style: italic;
  line-height: 1.4;
  color: var(--accent);
  max-width: 900px;
  margin-bottom: 0.25rem;
}
.wwr-body { max-width: 900px; }
.is-mobile .wwr-question { font-size: 1.3rem; }
/* Question fits on one line on desktop */
.wwr-question { font-size: clamp(1rem, 1.5vw, 1.35rem); max-width: none; white-space: nowrap; }
.is-mobile .wwr-question { white-space: normal; font-size: 1.2rem; }
/* Question rolled into the paragraph: one block, a bit wider */
.wwr-body { max-width: 1100px; }
.wwr-body .wwr-question { font-size: inherit; line-height: inherit; white-space: normal; margin: 0; max-width: none; font-weight: 400; }
.is-mobile .wwr-body .wwr-question { font-size: inherit; }
/* Italic "?" leans into the following space; give it a little extra room */
.wwr-body .wwr-question { margin-right: 0.3em; }
/* Work with page only: momentum scrolling up inside it stops at its top edge. */
#contact { scroll-snap-stop: always; }
/* NASA video page: headline on one line on desktop */
#education .pg-head { max-width: none; }
#education .pg-title { white-space: nowrap; font-size: clamp(1.5rem, 2.6vw, 2.6rem); }
.is-mobile #education .pg-title { white-space: normal; font-size: 1.9rem; }

/* Desktop hero: the down arrow never falls below the bottom of the screen on short windows.
   Its gap under the caption shrinks so it stays ~3rem above the hero's bottom edge. */
html:not(.is-mobile) .scroll-hint .section-down-chevron {
  margin-top: min(12rem, max(0px, calc(100vh - var(--hero-scroll-hint-top, calc(100vh - 232px)) - 4.5rem)));
}

/* Desktop: bigger videos on the Sound as experience page */
html:not(.is-mobile) #vision .pg-content { max-width: 1560px; }
html:not(.is-mobile) #vision .yt-pair { max-width: 1480px; gap: 2.5rem; }
html:not(.is-mobile) #vision .yt-fig .yt { max-width: calc((100vh - 380px) * 1.7778); }

/* Meditate visual: real SDO sun image in place of the drawn core.
   The disk is ~80% of the image, so a 50%-wide image gives a ~40% disk (same as before). */
.sun-img {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 50%;
  height: 50%;
  display: block;
  pointer-events: none;
}
.sun-img img {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 50%;
  mix-blend-mode: screen; /* the image's black background disappears into the card */
  -webkit-mask-image: radial-gradient(circle, #000 58%, transparent 71%);
  mask-image: radial-gradient(circle, #000 58%, transparent 71%);
}

/* Rings breathe like orbits: each has its own innermost size so none ever touches
   the sun (disk ~40%) and no ring passes the one inside it. */
.sun-ring.r1 { --ring-min: 0.93; }  /* 56% -> 52% at its closest */
.sun-ring.r2 { --ring-min: 0.85; }  /* 68% -> 58% */
.sun-ring.r3 { --ring-min: 0.86; }  /* 80% -> 69% */
.sun-ring.r4 { --ring-min: 0.88; }  /* 91% -> 80% */
.sun-ring.r5 { --ring-min: 0.92; }  /* 100% -> 92% */
@keyframes ringBreath {
  0%, 100% { transform: scale(var(--ring-min, 0.9)); opacity: 0.25; }
  50%      { transform: scale(1);                    opacity: 0.7; }
}

/* Keep "Breathe it in." together; balance the lines so nothing is left alone */
.meditate-text { text-wrap: pretty; }

/* Meditate visual: no rings, just the sun, as large as the visual allows */
.sun-ring { display: none !important; }
.meditate-visual { background: none; }
.sun-breath { width: auto; height: 100%; aspect-ratio: 1 / 1; max-width: 100%; animation: none; }
.is-mobile .meditate-card .sun-breath { width: auto; height: 100%; }
.sun-img { width: 100%; height: 100%; }
/* Meditate card image: the sun fills the top of the card, cropped by the card's own
   corners like a photo header, fading softly into the card below. */
.meditate-card .meditate-visual {
  position: relative;
  overflow: hidden;
  padding: 0;
  border-radius: 12px 12px 0 0;
  background: #000;
}
.meditate-card .sun-breath { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; aspect-ratio: auto; }
.meditate-card .sun-img { position: absolute; inset: 0; margin: 0; width: 100%; height: 100%; }
.meditate-card .sun-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  border-radius: 0;
  mix-blend-mode: normal;
  -webkit-mask-image: none;
  mask-image: none;
  transform: scale(1.12);          /* a touch closer on the disk */
  transition: transform 1.2s ease;
}
.meditate-card:hover .sun-img img { transform: scale(1.16); }
.meditate-card .meditate-visual::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 38%;
  background: linear-gradient(to bottom, rgba(22, 22, 32, 0), #161620);
  pointer-events: none;
}
/* Phones: the card sits on the starfield, so the image is its own rounded tile */
.is-mobile .meditate-card .meditate-visual { height: 300px !important; border-radius: 14px; }
.is-mobile .meditate-card .meditate-visual::after { background: linear-gradient(to bottom, rgba(6, 6, 8, 0), rgba(6, 6, 8, 0.55)); }

/* Desktop, Play the Sun: taller cards, content lifted ~10% of the screen.
   The synth and Meditate visuals match the sequencer's height (main.js), so padding the
   sequencer makes all three taller together. */
html:not(.is-mobile) #stem-music .sequencer-visual { padding-block: 1.1rem; }
html:not(.is-mobile) #stem-music .instrument-card h3 { padding-top: 1.5rem; }
html:not(.is-mobile) #stem-music .instrument-card p { padding-bottom: 1.9rem; }
html:not(.is-mobile) #stem-music .music-content { margin-top: -10vh; }
/* Wide starfield frame: show the whole frame, sun a bit smaller, black matches the image edges */
.meditate-card .sun-img img { object-fit: contain; transform: scale(1); }
.meditate-card:hover .sun-img img { transform: scale(1.04); }
/* Field-level error message (e.g. malformed email) */
.cf-error { font-size: 0.85rem; color: var(--coral); line-height: 1.4; }
/* Desktop: the email message sits to the right of the email box, vertically centered on it */
html:not(.is-mobile) .cf-field:has(#cf-email-error) { position: relative; }
html:not(.is-mobile) #cf-email-error {
  position: absolute;
  left: calc(100% + 1rem);
  bottom: 0;
  height: calc(16px * 1.2 + 1.6rem + 2px);   /* matches the input height (16px text, 0.8rem padding, 1px borders) */
  display: flex;
  align-items: center;
  white-space: nowrap;
}
/* Natural scrolling inside the tall Work with page (class set by js/sonify.js) */
html.free-scroll { scroll-snap-type: none !important; }
/* Desktop: the message points back at the email box */
html:not(.is-mobile) #cf-email-error::before { content: '\2190'; margin-right: 0.45rem; }

/* Email message fades in and out quickly instead of popping */
#cf-email-error {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}
#cf-email-error.is-shown {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.2s ease, visibility 0s;
}
/* Phones: the message sits under the box, so it also opens and closes its space */
.is-mobile #cf-email-error { display: block; max-height: 0; overflow: hidden; transition: opacity 0.2s ease, max-height 0.2s ease, visibility 0s linear 0.2s; }
.is-mobile #cf-email-error.is-shown { max-height: 3em; transition: opacity 0.2s ease, max-height 0.2s ease, visibility 0s; }
/* Meditate card: looping sun video fills the card image area */
.meditate-card .sun-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
  display: block;
  pointer-events: none;
  transform: scale(1);
  transition: transform 1.2s ease;
}
.meditate-card:hover .sun-video { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) { .meditate-card .sun-video { transition: none; } }
/* Sun video scale is driven by js/sonify.js (rest 1.26, hover 1.4) */
.meditate-card .sun-video, .meditate-card:hover .sun-video { transition: none; }
/* Feedback glow canvas covers the image area; the video keeps playing beneath it */
.meditate-card .sun-trails { position: absolute; inset: 0; width: 100%; height: 100%; display: none; pointer-events: none; }
.meditate-card .trails-on .sun-trails { display: block; }
.meditate-card .trails-on .sun-video { opacity: 0.001; }

/* Desktop golden hour: more room for the video */
html:not(.is-mobile) #citizen-science .pg-split { max-width: 1560px; grid-template-columns: 0.8fr 1.2fr; gap: 3rem; }
html:not(.is-mobile) #citizen-science .pg-split .pg-right .yt { max-width: calc((100vh - 170px) * 1.7778); }

/* Share button + confirmation */
.seq-toolbar { position: relative; }
.seq-share-toast {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--accent);
  align-self: center;
  margin-left: 0.4rem;
  opacity: 0;
  transition: opacity 0.25s ease;
  white-space: nowrap;
}
.seq-share-toast.is-shown { opacity: 1; }