:root { --watercolor-paper: #faf3e6; }

/* Give complete watercolor compositions their own space. */
.site-header { background: rgba(22, 26, 25, 0.96); }
.hero { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; min-height: auto; padding: 8rem var(--page-pad) 3rem; color: var(--ink); background: var(--watercolor-paper); }
.hero-art { position: relative; inset: auto; order: 2; width: 100%; aspect-ratio: 2 / 3; background-position: center; background-size: contain; background-repeat: no-repeat; transform: none; }
.hero-shade, .scroll-cue { display: none; }
.hero-content { order: 1; }
.hero-lede { color: #4e5551; }
.hero .button-quiet { border-color: rgba(22, 26, 25, 0.35); background: transparent; }
.hero .button-quiet:hover, .hero .button-quiet:focus-visible { border-color: var(--ink); background: #eee5d5; }

.portrait-card { min-height: 0; color: var(--ink); background: var(--watercolor-paper); }
.portrait-card img { position: static; display: block; width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: contain; }
.portrait-card:hover img { transform: none; }
.portrait-card::after { display: none; }
.portrait-card-copy { position: static; padding: 1.75rem clamp(1.5rem, 4vw, 3rem) 2.5rem; }
.portrait-card h2 { font-size: clamp(3rem, 7vw, 4.5rem); }
.portrait-card p { color: #555c58; }
.team-feature, .team-feature-copy { color: var(--ink); background: var(--watercolor-paper); }
.team-feature p { color: #555c58; }
.team-feature img, .ship-index img { object-fit: contain; background: var(--watercolor-paper); }

.character-portrait { min-height: 0; background: var(--watercolor-paper); }
.character-portrait img { display: block; width: 100%; height: auto; object-fit: contain; object-position: center; }
.ship-feature, .gallery-feature { min-height: 0; }
.ship-feature-art, .gallery-art { display: grid; align-items: center; min-height: 0; background: var(--watercolor-paper); }
.ship-feature-art img, .gallery-art img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: contain; }
.world-map-image { min-height: 0; aspect-ratio: 3 / 2; align-self: center; background-size: contain; background-repeat: no-repeat; background-color: var(--watercolor-paper); }
.world-map { background: var(--watercolor-paper); color: var(--ink); }
.world-map-copy p { color: #555c58; }
.world-feature { min-height: 0; padding: 0; color: var(--ink); background: var(--watercolor-paper); }
.world-feature-art { position: relative; inset: auto; aspect-ratio: 3 / 2; background-size: contain; background-position: center; background-repeat: no-repeat; transform: none; }
.world-feature-shade { display: none; }
.world-feature-copy { max-width: none; padding: clamp(3rem, 7vw, 6rem) var(--page-pad); }
.world-feature-copy p { color: #555c58; }
.world-feature .text-link, .world-map .text-link { color: #8e4c21; }

.book-two-fragments { align-items: start; }
.book-two-fragment { background: var(--watercolor-paper); }
.book-two-fragment::after { display: none; }
.book-two-fragment img { display: block; object-fit: contain; }
.book-two-fragment:hover img { transform: none; filter: none; }
.library-cover { display: flex; flex-direction: column; min-height: 0; color: var(--ink); background: var(--watercolor-paper); }
.library-cover img { position: static; display: block; height: auto; aspect-ratio: 2 / 3; object-fit: contain; opacity: 1; }
.library-cover::after { display: none; }
.library-copy { position: static; }
.library-copy p { color: #555c58; }
.library-copy .button-quiet { color: var(--ink); border-color: rgba(22, 26, 25, 0.35); background: transparent; }

.genre-hero-art { background-image: url("../img/ships/dark-siphon-watercolor.webp"); background-color: var(--watercolor-paper); background-size: contain; background-repeat: no-repeat; }
.combat-feature-art { display: grid; align-items: center; min-height: 0; background: var(--watercolor-paper); }
.combat-feature-art img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: contain; }
.reader-illustration img { height: auto; max-height: none; object-fit: contain; background: var(--watercolor-paper); }

@media (min-width: 900px) {
    .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 4vw; padding-top: 7rem; }
    .hero-art { background-position: center; max-height: 52rem; }
    .hero h1 { font-size: clamp(4.25rem, 9vw, 9rem); }
    .character-intro { min-height: 0; align-items: center; }
    .character-portrait, .ship-feature-art, .gallery-art, .combat-feature-art { min-height: 0; }
    .book-two-fragments { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .book-two-fragment { height: auto; aspect-ratio: 2 / 3; }
    .book-two-fragment.fragment-ship { grid-column: 1 / -1; height: auto; aspect-ratio: 3 / 2; }
    .world-feature { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); align-items: center; }
}