/* Default seated hero, styled before JavaScript enhances its motion. */
html.character-experience {
  --journey-ratio: 0.56640625;
  --journey-hero-height: clamp(24rem, 65svh, 39rem);
}

html.character-experience body {
  background-image:
    linear-gradient(var(--color-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--color-grid) 1px, transparent 1px);
  background-size: 100% var(--layout-grid-row), var(--col) 100%;
  background-position: left 0 top var(--seat-grid-y, 6rem), left var(--gutter) top 0;
}

html.character-experience .refined-header { color: var(--text); }
html.character-experience .refined-header a { text-shadow: none; }
html.character-experience .refined-header .nav-book { border-color: var(--rule); }

html.character-experience #top {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.8fr);
  column-gap: clamp(var(--space-8), 6vw, var(--space-24));
  row-gap: 0;
  min-height: 100svh;
  padding: var(--space-24) max(var(--gutter), calc((100vw - var(--layout-hero-max)) / 2)) 0;
  align-content: stretch;
  align-items: center;
  overflow: visible;
  background: none;
}

html.character-experience #top::before { display: none; }
html.character-experience #top .hero-copy {
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  max-width: 45rem;
  margin: 0;
  padding: var(--space-28) 0 var(--space-32);
  justify-items: start;
  text-align: left;
  gap: var(--space-group-gap);
}

html.character-experience #top .promise {
  max-width: 16ch;
  font-size: var(--type-hero);
  line-height: var(--type-line-hero);
  letter-spacing: var(--type-tracking-hero);
  color: var(--text);
}

html.character-experience #top .hero-line {
  max-width: 35ch;
  font-size: var(--type-hero-line);
  line-height: 1.6;
  color: var(--text-soft);
}

html.character-experience #top .hero-actions {
  justify-items: start;
  gap: var(--space-4);
  margin-top: 0.4rem;
}

html.character-experience #top .hero-note { color: var(--text-soft); }
html.character-experience .journey-orion {
  position: absolute;
  top: 8rem;
  left: max(var(--gutter), calc((100vw - var(--layout-hero-max)) / 2));
  width: clamp(7rem, 13vw, 12rem);
  height: 4.5rem;
  color: var(--ink);
  pointer-events: none;
}

html.character-experience .journey-orion svg { width: 100%; height: 100%; overflow: visible; }

/* The slot follows the cropped canvas; joint coordinates stay unchanged. */
html.character-experience #journey-hero-anchor {
  position: relative;
  aspect-ratio: 580 / 770;
  flex: none;
  pointer-events: none;
}

html.character-experience #journey-hero-anchor {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  align-self: end;
  width: min(100%, calc(var(--journey-hero-height) * var(--journey-ratio)));
  margin-bottom: var(--space-7);
}

html.character-experience #journey-actor,
html.character-experience #journey-actor svg { display: block; width: 100%; height: 100%; }

html.character-experience #journey-pause {
  position: absolute;
  left: var(--gutter);
  bottom: 1.75rem;
  z-index: 3;
  max-width: calc(100vw - 2rem);
  min-height: var(--control-target-min);
  padding: 0.65rem 0.9rem;
  border: var(--control-border-width) solid var(--rule);
  background: var(--paper);
  color: var(--text);
  font: var(--type-weight-regular) var(--type-meta) / 1.4 var(--sans);
  cursor: pointer;
}

html.character-experience #journey-pause[hidden] { display: none; }

@media (max-width: 1000px) {
  html.character-experience { --journey-hero-height: clamp(23rem, 57svh, 34rem); }
  html.character-experience #top { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.65fr); column-gap: var(--space-8); }
  html.character-experience #top .hero-copy { padding-block: var(--space-28); }
  html.character-experience #top .promise { font-size: var(--type-hero-tablet); }
}

@media (max-width: 720px) {
  html.character-experience { --journey-hero-height: 23rem; }
  html.character-experience #journey-pause { right: auto; left: 0.75rem; width: var(--control-target-min); height: var(--control-target-min); padding: 0; font-size: 0; }
  html.character-experience #journey-pause::before { content: 'Ⅱ'; font-size: var(--type-root); }
  html.character-experience #journey-pause[aria-pressed="true"]::before { content: '▷'; }
  html.character-experience body { background-size: 100% var(--layout-grid-row-mobile), var(--col) 100%; }
  html.character-experience #top {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    min-height: 0;
    padding: var(--space-26) var(--gutter) var(--space-10);
    align-content: start;
  }
  html.character-experience #top .hero-copy { padding: var(--space-5) 0 var(--space-4); gap: 1.1rem; }
  html.character-experience #top .promise { max-width: 17ch; font-size: var(--type-hero-mobile); }
  html.character-experience #top .hero-line { max-width: 32ch; font-size: var(--type-body); }
  html.character-experience #top .hero-actions { margin-top: var(--space-1); gap: 0.9rem; }
  html.character-experience .journey-orion { top: 4.9rem; width: 6rem; height: 2.4rem; }
  html.character-experience #journey-hero-anchor {
    grid-column: 1;
    grid-row: 2;
    width: clamp(11.5rem, 51vw, 13rem);
    max-width: 68%;
    margin-top: var(--space-1);
    margin-bottom: 0;
  }
}