/* A cover made from the author's characters, two voices and a changeable scene. */
.together-app:has(.together-hero) { max-width: var(--page-width); container-name: together-home; container-type: inline-size; }
.together-hero { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto; gap: 0 var(--space-8); align-items: center; padding-block: var(--space-6); }
.hero-intro { align-self: end; padding-bottom: var(--space-7); }
.together-hero h1 { font-size: clamp(2.25rem, 4vw, 3.5rem); line-height: 1.42; margin: 0 0 var(--space-5); }
.together-hero h1 > span { display: block; }
.hero-emphasis { color: var(--accent); text-decoration: underline; text-decoration-color: var(--rose); text-decoration-thickness: .2em; text-underline-offset: .12em; text-decoration-skip-ink: none; }
.hero-description { color: var(--muted); font-size: var(--text-lead); white-space: pre-line; margin: var(--space-5) 0 0; }
.hero-action { align-self: start; max-width: 27rem; }
.hero-action .primary { box-shadow: 0 3px 0 var(--focus); }
.hero-action .muted { margin-top: var(--space-4); font-size: var(--text-small); }
.together-hero .sample-scene { grid-column: 2; grid-row: 1 / 3; min-width: 0; padding: 0; overflow: hidden; border: var(--comic-line) solid var(--comic-frame); border-radius: var(--panel-radius); background: var(--white); box-shadow: 6px 6px 0 var(--rose); }
.scene-folio { display: flex; justify-content: space-between; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--line); font-size: var(--text-small); font-weight: 700; }
.scene-count { font-variant-numeric: tabular-nums; color: var(--accent); white-space: nowrap; }
.scene-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-1); padding: var(--space-3) var(--space-4); background: var(--paper); border-bottom: 1px solid var(--line); }
.scene-choice { min-width: 0; min-height: var(--touch); padding: var(--space-2); border-radius: .75rem; font-size: var(--text-small); color: var(--muted); transition: background-color var(--control-duration), color var(--control-duration); }
.scene-choice[aria-pressed="true"] { color: var(--accent); background: var(--rose); font-weight: 700; }
.scene-choice:hover:not([aria-pressed="true"]) { background: var(--white); color: var(--ink); }
.sample-canvas { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); isolation: isolate; padding: var(--space-5) var(--space-5) var(--space-4); }
.sample-canvas::before, .sample-canvas::after { position: absolute; content: ""; inset: 0 50% 0 0; background: #f0f6f8; z-index: -1; }
.sample-canvas::after { inset: 0 0 0 50%; background: #fcf0ef; border-left: 1px solid var(--line); }
.sample-canvas .speech { border: 1.5px solid var(--comic-frame); border-radius: 1rem; min-height: 4.25rem; line-height: 1.65; align-content: center; padding: var(--space-3); }
.sample-canvas .speech::after { content: ""; position: absolute; bottom: -.45rem; left: var(--space-5); width: .75rem; height: .75rem; transform: rotate(45deg); border: solid var(--comic-frame); border-width: 0 1.5px 1.5px 0; background: var(--white); }
.sample-canvas .speech-b { margin-top: var(--space-5); }
.sample-canvas .speech-b::after { left: auto; right: var(--space-5); }
.sample-canvas .stage { grid-column: 1 / -1; min-height: 0; gap: var(--space-6); margin: var(--space-4) 0 0; }
.sample-canvas .character { max-width: 10rem; }
.sample-canvas figcaption { margin-top: var(--space-3); font-size: .8125rem; color: var(--muted); }
.scene-caption { padding: var(--space-5) var(--space-5) 0; border-top: 1px solid var(--line); }
.scene-caption h2 { font-size: 1.375rem; margin: 0 0 var(--space-2); letter-spacing: -.035em; }
.scene-caption p { color: var(--muted); font-size: var(--text-small); margin: 0; min-height: 3.5rem; }
.sample-label { margin: 0; padding: var(--space-4) var(--space-5) var(--space-5); font-size: .75rem; color: var(--muted); }
.story-contents { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6); border-top: 1px solid var(--line); margin-top: var(--space-8); padding-top: var(--space-6); }
.story-contents h2 { font-size: var(--text-lead); margin: 0; }
.story-contents h3 { font-size: var(--text-body); margin: 0 0 var(--space-2); }
.story-contents p { color: var(--muted); font-size: var(--text-small); margin: 0; }
@media (max-width: 767px) {
  .together-app:has(.together-hero) { padding: var(--space-5) var(--space-5) calc(var(--space-8) * 2 + env(safe-area-inset-bottom)); }
  .hero-action { position: fixed; z-index: 5; bottom: 0; left: 0; right: 0; padding: var(--space-3) var(--space-5) max(var(--space-4), env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--paper); }
  .hero-action .muted { display: none; }
}
@container together-home (width < 36rem) {
  .together-hero { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-6); padding: 0; }
  .hero-intro { align-self: stretch; padding: 0; }
  .together-hero h1 { font-size: clamp(1.875rem, 7vw, 2.5rem); margin: 0; }
  .hero-description { font-size: var(--text-body); margin-top: var(--space-4); }
  .hero-action { align-self: stretch; max-width: none; }
  .together-hero .sample-scene { border-radius: var(--space-5); box-shadow: 4px 4px 0 var(--rose); }
  .scene-folio { padding: var(--space-3) var(--space-4); }
  .scene-choices { padding: var(--space-2); }
  .sample-canvas { padding: var(--space-4); gap: var(--space-3); }
  .sample-canvas .speech { font-size: .8125rem; padding: var(--space-2) var(--space-3); }
  .sample-canvas .stage { gap: var(--space-5); margin-top: var(--space-2); }
  .sample-canvas .character { max-width: 7rem; }
  .scene-caption { padding: var(--space-4) var(--space-4) 0; }
  .scene-caption h2 { font-size: var(--text-lead); }
  .sample-label { padding: var(--space-3) var(--space-4) var(--space-4); }
  .story-contents { grid-template-columns: 1fr; gap: var(--space-5); margin-top: var(--space-7); }
  .story-contents > div { display: flex; flex-wrap: wrap; gap: var(--space-3); }
  .story-contents h3 { flex: 0 1 8rem; margin: 0; }
  .story-contents p { flex: 1 1 10rem; }
}
@media (prefers-reduced-motion: reduce) { .scene-choice { transition: none; } }