.download-page {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: white;
}

.download-page > .test-warning { flex: none; }
.download-main {
  --lamp-scale: .25;
  display: flex;
  flex-direction: column;
}

.download-stage {
  scroll-margin-top: 4rem;
  position: relative;
  isolation: isolate;
  container-type: size;
  display: grid;
  place-items: center;
  flex: none;
  min-width: 0;
  height: clamp(24rem, calc(100svh - 13rem), 44rem);
  min-height: 24rem;
  overflow: hidden;
}

.download-art { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.download-art img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: left bottom; }

.document-scene { position: absolute; inset: 0; z-index: -1; container-type: size; overflow: hidden; pointer-events: none; }

/* Match the former 667px lamp in the 1536x1024 cover image, then quarter it. */
.download-lamp {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: -1;
  width: max(43.424479cqw, 65.136719cqh);
  max-width: none;
  height: auto;
  transform: scale(var(--lamp-scale));
  transform-origin: left bottom;
  pointer-events: none;
}

.download-control { position: relative; isolation: isolate; max-width: calc(100% - 40px); text-align: center; }
/* Keep a solid reading core inside one irregular, feathered cloud. */
.download-control::before {
  content: "";
  position: absolute;
  inset: -6px;
  z-index: -1;
  pointer-events: none;
  border-radius: 18px 24px 16px 22px / 24px 16px 22px 18px;
  background: white;
  box-shadow: 0 0 16px 9px white;
}
.download-control::after {
  content: "";
  position: absolute;
  inset: -28px -18px;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(ellipse 38% 19% at 29% 18%, white 55%, rgb(255 255 255 / .8) 70%, rgb(255 255 255 / 0) 100%),
    radial-gradient(ellipse 27% 22% at 75% 20%, white 50%, rgb(255 255 255 / .7) 68%, rgb(255 255 255 / 0) 100%),
    radial-gradient(ellipse 23% 34% at 19% 55%, white 50%, rgb(255 255 255 / .8) 70%, rgb(255 255 255 / 0) 100%),
    radial-gradient(ellipse 24% 30% at 81% 62%, white 52%, rgb(255 255 255 / .7) 72%, rgb(255 255 255 / 0) 100%),
    radial-gradient(ellipse 39% 19% at 51% 81%, white 55%, rgb(255 255 255 / .8) 70%, rgb(255 255 255 / 0) 100%);
}
/* A tight glyph-following nimbus protects each text area, never the spaces between. */
.download-control > p,
.download-links a,
.document-inner h2,
.document-inner h3,
.document-inner p {
  text-shadow:
    -1px -1px 1px white, 0 -1px 1px white, 1px -1px 1px white,
    -1px 0 1px white, 1px 0 1px white,
    -1px 1px 1px white, 0 1px 1px white, 1px 1px 1px white,
    0 0 3px white;
}
.download-control .download-button { margin-inline: auto; }
.download-button {
  display: block;
  max-width: 100%;
  min-height: 64px;
  padding: 18px 30px;
  border: 2px solid var(--purple);
  border-radius: 4px;
  background: var(--purple);
  color: white;
  font: 700 1.125rem/1.5 Verdana, Arial, sans-serif;
  letter-spacing: 0;
  text-align: center;
  overflow-wrap: anywhere;
}
.download-button:disabled { opacity: 1; cursor: not-allowed; }
.download-button:not(:disabled) { cursor: pointer; }
.download-button:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }
#download-dialog {
  width: min(32rem, calc(100% - 32px));
  max-height: calc(100dvh - 32px);
  box-sizing: border-box;
  padding: 24px;
  border: 1px solid #b9bac2;
  border-radius: 6px;
  color: var(--ink);
  background: white;
  overflow: auto;
}
#download-dialog::backdrop { background: rgb(0 0 0 / .35); }
#download-dialog h2 { margin: 0 0 16px; font-size: 1.25rem; line-height: 1.4; }
#download-dialog p, #download-dialog label { font-size: .875rem; line-height: 1.6; overflow-wrap: anywhere; }
#download-dialog fieldset { margin: 20px 0 0; padding: 0; border: 0; }
#download-dialog legend { margin-bottom: 8px; font-size: .875rem; font-weight: 700; }
#download-dialog label { display: flex; align-items: start; gap: 10px; padding: 8px 0; }
#download-dialog input { flex: none; width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--purple); }
#download-dialog progress { width: 100%; height: 12px; accent-color: var(--purple); }
#download-dialog [role=status] { min-height: 2.8em; }
.download-legal { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.download-legal a { color: #513b88; text-decoration: underline; }
.download-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 12px; }
.download-actions button { min-height: 44px; padding: 8px 18px; border: 1px solid var(--purple); border-radius: 4px; font: inherit; cursor: pointer; }
.download-actions [type=submit] { background: var(--purple); color: white; }
.download-actions [type=submit]:disabled { opacity: .6; cursor: wait; }
.download-status {
  margin: 18px 0 0;
  color: var(--ink);
  font-size: .9375rem;
  line-height: 1.6;
  font-weight: 700;
}
.download-detail { margin-top: 6px; font-size: .8125rem; }
.download-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 24px; margin-top: 18px; font-size: .8125rem; }
.download-links a { min-height: 44px; display: inline-flex; align-items: center; }

.document-stage { position: relative; isolation: isolate; background: white; border-top: 4px solid var(--lime); padding: 36px 24px max(80px, calc(7.25vw + 24px)); }
.document-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background: url("original-stars-wide-20261024.png") left bottom / cover no-repeat;
  /* This fixed star-placement variation retains the original vivid diagonal fade. */
  clip-path: inset(0);
}
.document-inner { position: relative; isolation: isolate; width: min(100%, 36rem); margin-inline: auto; }
/* One shared cloud protects the introduction and all document rows. */
.document-inner::before {
  content: "";
  position: absolute;
  inset: -6px;
  z-index: -1;
  pointer-events: none;
  border-radius: 22px 16px 24px 18px / 18px 24px 16px 22px;
  background: white;
  box-shadow: 0 0 16px 9px white;
}
.document-inner::after {
  content: "";
  position: absolute;
  inset: -28px -18px;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(ellipse 38% 19% at 34% 18%, white 55%, rgb(255 255 255 / .8) 70%, rgb(255 255 255 / 0) 100%),
    radial-gradient(ellipse 27% 22% at 77% 22%, white 50%, rgb(255 255 255 / .7) 68%, rgb(255 255 255 / 0) 100%),
    radial-gradient(ellipse 23% 34% at 19% 58%, white 50%, rgb(255 255 255 / .8) 70%, rgb(255 255 255 / 0) 100%),
    radial-gradient(ellipse 24% 30% at 81% 60%, white 52%, rgb(255 255 255 / .7) 72%, rgb(255 255 255 / 0) 100%),
    radial-gradient(ellipse 39% 19% at 48% 81%, white 55%, rgb(255 255 255 / .8) 70%, rgb(255 255 255 / 0) 100%);
}
.document-inner > h2,
.document-inner > p { text-align: center; }
.document-stage h2 { font-size: 1.75rem; margin-bottom: 16px; }
.draft-notice { color: var(--warning); font-size: .875rem; font-weight: 700; }
.review-revision { margin-top: 10px; font-size: .8125rem; }
.document-note { max-width: 46rem; margin: 10px auto 0; font-size: .8125rem; }
.document-list { list-style: none; padding: 0; margin: 28px 0 0; border-top: 1px solid #9eafac; }
.document-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px 18px; padding: 24px 0; border-bottom: 1px solid #9eafac; }
.document-list h3 { margin: 0 0 6px; font-size: 1.125rem; line-height: 1.4; }
.document-list p { color: #355b55; font-size: .8125rem; }
.document-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.document-actions a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 18px; border: 2px solid var(--purple); border-radius: 4px; font-size: .875rem; font-weight: 700; text-decoration: none; }
.document-view { color: var(--purple); background: white; }
.document-download { color: white; background: var(--purple); }
.document-actions a:hover { text-decoration: underline; }
@media (max-width: 40rem) {
  .document-stage { padding-inline: 20px; }
  .document-list li { grid-template-columns: minmax(0, 1fr); }
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Full-bleed artwork covers both blocks at every aspect ratio. */
@media (max-aspect-ratio: 1/1) {
  .document-stage::before {
    background-image: url("original-stars-mobile-20261024.png");
  }
  /* The former portrait lamp occupied 582px of its 1024px-wide canvas. */
  .download-lamp { width: 56.835938cqw; }
  .download-button { padding-inline: 24px; }
}

/* Only the independent lamp changes scale on unusually wide windows. */
@media (min-aspect-ratio: 2/1) {
  .download-lamp { width: 65.136719cqh; }
}