/* Screenshot corrections, 10 Oct: ambient writing, side typography, cohesive Hermes animation. */
/* No framed terminal. Words type directly over the existing moving background. */
.gridspace { height: 790px; min-height: 790px; }
.gridspace .sys-terminal {
  top: 524px; left: 3%; width: min(53%,710px);
  min-height: 155px; height: auto; display: block;
  border: 0; border-left: 0; border-top: 0; border-bottom: 0;
  padding: 0; margin: 0; box-shadow: none;
  background: transparent; backdrop-filter: none; overflow: visible;
}
.gridspace .sys-terminal .sys-id,
.gridspace .sys-terminal .sys-lines { display: none !important; }
.gridspace .sys-terminal .sys-output {
  display: block; min-height: 150px; background: transparent; border: 0;
  font: 600 clamp(11px,.96vw,14px)/1.9 'Courier New',monospace;
  letter-spacing: .075em; color: #c0e5df; text-shadow: 0 1px 14px #020609e6;
  white-space: pre-wrap; overflow-wrap: normal;
}

/* Exactly one vertical annotation per side; remove the old redundant right label. */
.edge { display: none !important; }
.ex-rail {
  top: 155px; height: min(76vh,760px); min-height: 510px;
  max-height: none; font-size: 11px; line-height: 1.3;
  letter-spacing: .18em; font-weight: 600;
  background: transparent; padding: 0; border: 0;
  color: #c3e4dc; text-shadow: 0 0 7px #b7fae859;
}
.ex-rail::before { display:none !important; }
.ex-rail::after {
  content: ''; position: absolute; display:block;
  top: 0; bottom: 0; width: 1px; min-height: 100%;
  background: linear-gradient(180deg,transparent,#9ee9de 12%,#a8eae1 89%,transparent);
  opacity: .75;
}
.ex-rail-left { left: 15px; right: auto; border: 0; transform: rotate(180deg); }
.ex-rail-left::after { right: -25px; }
.ex-rail-right { right: 16px; left: auto; border: 0; transform: none; }
.ex-rail-right::after { left: -25px; }

/* Preserve the approved full Hermes composite, but animate her visibly as a unit.
   Independent head/torso transforms previously opened a visible shoulder seam. */
.character { top: 0; right: 6%; width: min(35vw,560px); height: 630px; transform: none !important; }
.character .portrait {
  display: block !important; opacity: 1;
  background-image: url('/approved-homepage-assets/hermes-approved-cutout.webp');
  background-position: center bottom; background-size: contain; background-repeat: no-repeat;
  transform-origin: 52% 58%;
  animation: hermesCohesiveIdle 5.6s ease-in-out infinite alternate !important;
  filter: contrast(1.06) brightness(1.04);
}
@keyframes hermesCohesiveIdle {
  0% { transform: translateY(3px) rotate(-.45deg); }
  100% { transform: translateY(-6px) rotate(.45deg); }
}
.character.activated .portrait, .character:hover .portrait {
  animation: hermesCohesiveIdle 5.6s ease-in-out infinite alternate !important;
  filter: contrast(1.09) brightness(1.14);
}
.character .head-figure,.character .body-figure { display: none !important; }
.character .glow { opacity:.2; animation: qualityGlow 6s ease-in-out infinite alternate; }
.character .core-light { opacity:.2; animation: qualityGlow 4.5s ease-in-out infinite alternate; }
.character-details { top: 51%; right: 1%; }
.hero-entry, .hero-entry.is-open { top: 654px; right: 6%; max-width: 37%; }

/* Separation between entire Hermes figure, her activation CTA and all card grids. */
.cards, .cards.home-grid, .cards.about-grid,
.cards.agent-grid, .cards.complete-levels { z-index: 7; margin-top: 0; }
.cards .agent, .cards .level-card { transform: none !important; }
@media (max-width: 1250px) {
  .gridspace { height: 795px; min-height: 795px; }
  .gridspace .sys-terminal { top: 540px; width: 56%; }
  .ex-rail { font-size: 10px; }
}
@media (max-width: 780px) {
  .gridspace { display:flex; flex-direction:column; height:auto; min-height:0; padding-bottom: 22px; }
  .gridspace .sys-terminal { position:relative; order: 2; top:auto; left:auto;
    width:100%; min-height:145px; margin:18px 0 22px; padding:0; }
  .gridspace .sys-terminal .sys-output { min-height: 130px; font-size: clamp(10px,2.65vw,12px); line-height:1.8; }
  .character { order:3; position:relative; top:auto; right:auto;
    width:min(95%,440px); height:450px; margin:0 auto; }
  .character-details { order:4; position:relative; top:auto; right:auto; }
  .hero-entry,.hero-entry.is-open { order:5; position:relative;
    top:auto; bottom:auto; right:auto; left:auto; max-width:95%; margin:12px auto; }
  .ex-rail { display:none; }
}
@media (prefers-reduced-motion:reduce) {
  .character .portrait, .character.activated .portrait { animation:none !important; transform:none !important; }
}