/* Shared stage + ask-row styles for /describe/ pages. Loaded after each page's inline styles. */
body { overflow-x:hidden; }

/* Even out wrapped lines so a heading never leaves one word alone on its last line. */
h1, .ctah, .cta p, .sub { text-wrap:balance; }
/* ...and never break inside the topic's own name ("2026 so far"). */
h1 em, .tname { white-space:nowrap; }

/* The cloud is the centrepiece: it breaks out of the text column onto a wide, tall stage. */
.cloudwrap { position:relative; left:50%; transform:translateX(-50%);
  width:min(1100px, calc(100vw - 44px)); max-width:none; margin:26px 0 34px; }
.cloudbox { background:#110F17; border:1px solid #322E44; border-radius:24px; padding:16px 18px 14px;
  min-height:clamp(320px, 58vh, 660px); display:flex; flex-direction:column;
  box-shadow:inset 0 1px 0 #1E1B2A; overflow:hidden; }
.cloud { flex:1; display:flex; flex-wrap:wrap; justify-content:center; align-content:center; align-items:center;
  gap:10px 26px; margin:0; padding:30px 10px; font-family:Georgia,serif; }
.cloud:empty { display:none; }
.cloud .w { display:inline-block; line-height:1.1; }
.cloud .w.fresh { animation:pop .7s ease-out; }
@keyframes pop { from { opacity:0; transform:scale(.6); } to { opacity:1; } }
.cloud .n { font-size:max(12px, .24em); color:#8B8698; vertical-align:super; margin-left:2px;
  font-family:-apple-system,sans-serif; font-weight:400; }
.whisper { margin:auto; padding:22px; }

/* On a wide screen the ask is one slim row, so the stage below it gets the screen. */
@media (min-width:760px) {
  #ask { position:relative; left:50%; transform:translateX(-50%);
    width:min(860px, calc(100vw - 44px)); max-width:none;
    display:grid; grid-template-columns:1fr 1fr 1fr auto; gap:0 10px; align-items:center; padding:14px 16px; }
  #ask input { grid-row:1; margin:0; }
  #ask #send { grid-row:1; grid-column:4; width:auto; margin:0; padding:13px 22px; white-space:nowrap; }
  #ask .err { grid-row:2; grid-column:1 / -1; margin:6px 2px 0; min-height:0; }
  #ask .err:empty { display:none; }
  #ask .muted { grid-row:3; grid-column:1 / -1; margin:8px 2px 0; text-align:center; }
}

/* On a phone the stage is shorter, so the ask and the cloud share the first screen. */
@media (max-width:640px) {
  main { padding-top:22px; }
  .mark { font-size:30px; }
  .wordmark { margin:4px 0 16px; font-size:16px; }
  h1 { font-size:29px; margin-bottom:8px; }
  .sub { font-size:15px; margin-bottom:14px; }
  #ask { padding:12px 14px; }
  #ask input { padding:11px 14px; margin-bottom:8px; }
  #ask #send { padding:13px; margin-top:0; }
  #ask .err:empty { display:none; }
  #ask .muted { margin-top:6px; font-size:12px; }
  .cloudwrap { width:calc(100vw - 28px); margin-top:16px; }
  .cloudbox { min-height:38vh; border-radius:20px; padding:14px 14px 12px; }
  .cloud { gap:8px 16px; padding:22px 4px; }
}