/* ---- The hero (2026-10-10) ----
   The copy column on the dark ground, then the whole window, at one scale. The
   selectors that override `.a-appwin` carry it too (`.a-appwin.hero-…`), so they
   do not depend on this sheet loading after appwin.css. */

/* Centred over the centred window (owner, 2026-10-11). The install unit is
   centred as one block; inside it the command still reads from the left. */
.hero-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(2.5rem, 6vh, 4.25rem) var(--a-cell-pad) clamp(2.25rem, 5vh, 3.25rem);
  text-align: center;
}

.hero-copy .hero-install {
  text-align: left;
}

.hero-copy .hero-agents,
.hero-copy .hero-agents__marks {
  justify-content: center;
}

.hero-copy .hero-title {
  font-size: clamp(2.7rem, 4.5vw, 4.25rem);
}

.hero-copy .hero-install {
  margin-top: clamp(1.75rem, 4vh, 2.4rem);
}

.hero-copy .hero-agents {
  margin-top: clamp(1.4rem, 3vh, 1.9rem);
}

/* ---- The desk ----
   No painting: the window stands on the page ground under a light of its own
   (owner, 2026-10-13, picked from five candidates). A white cone falls from
   above and stops halfway down the window; the sides and the bottom share one
   tight gold halo with no offset, so the bottom hugs the window like the
   sides. The cone is `.hero-desk::before`, blurred and held behind the window
   by the desk's own stacking context. */

.hero-stage {
  position: relative;
  /* Room under the window for the halo to fall into before the first chapter
     (owner, 2026-10-13: the glow pressed against the paper without it). */
  padding: 0 var(--a-cell-pad) clamp(3rem, 7vh, 4.5rem);
}

.hero-desk {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  /* Wider than the 56rem `.a-appwin` is capped at (owner, 2026-10-13); the cap
     comes off the window just below. */
  width: 100%;
  max-width: 68rem;
  margin-inline: auto;
  /* The cone's top spread lives in this band. */
  padding-top: 3.25rem;
  isolation: isolate;
}

.hero-desk::before {
  position: absolute;
  z-index: 0;
  inset: -16% -12% 50%;
  background:
    radial-gradient(46% 62% at 50% 22%, rgb(255 255 255 / 28%), transparent 76%),
    radial-gradient(60% 50% at 50% 70%, color-mix(in srgb, var(--sg-yellow) 22%, transparent), transparent 72%);
  content: "";
  filter: blur(56px);
  pointer-events: none;
}

/* A near-black window on a near-black page: a light hairline marks its edge
   and the gold halo does the work the painting's cast shadow used to. */
.a-appwin.hero-window {
  max-width: none;
  border-color: rgb(255 255 255 / 18%);
  border-radius: 11px;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 10%),
    0 0 3.5rem 0.4rem color-mix(in srgb, var(--sg-yellow) 26%, transparent),
    0 0 1.2rem 0 color-mix(in srgb, var(--sg-yellow) 14%, transparent);
}

@media (prefers-reduced-motion: no-preference) {
  .hero-window {
    animation: hero-lift 760ms var(--hero-enter) 260ms both;
  }
}

@media (max-width: 47.5rem) {
  .hero-copy {
    padding: 2.15rem var(--a-cell-pad) 1.9rem;
  }

  /* The OS tabs are hidden here, so the facts are the row's only child. */
  .hero-copy .hero-install__meta,
  .hero-copy .hero-install__facts {
    justify-content: center;
  }

  .hero-desk {
    padding-top: 2.75rem;
  }

  .a-appwin.hero-window {
    border-radius: 7px;
  }

  /* appwin-tree.css floors the rail's type at 7-8.5px; the beat plays in the
     rail, so on a phone its rows have to stay readable. */
  .hero-window :is(.a-tree__name, .a-tree__project, .a-tree__checkoutname) {
    font-size: max(calc(12.5 * var(--u)), 10px);
  }

  .hero-window :is(.a-tree__sentence, .a-tree__count, .a-tree__panemsg) {
    font-size: max(calc(11 * var(--u)), 9px);
  }
}