/* H keeps G's flow and F's visual identity. Only its opening differs. */
.north-voyage .journal-hero{grid-template-areas:"copy gallery"}
.north-voyage .journal-hero-copy{grid-area:copy}
.north-voyage .journal-gallery{grid-area:gallery}
@media(max-width:700px){
 .north-voyage .journal-gallery{order:0;min-height:330px;height:auto}
 .north-voyage .journal-hero-copy{order:1;padding-block:22px 20px}
 /* The active caption determines the minimum space it needs at larger text
    settings. Keep the photograph and controls behind it, as in F. */
 .north-voyage .journal-slide{min-height:inherit;display:flex;flex-direction:column;justify-content:flex-end}
 .north-voyage .journal-slide.is-active{position:relative}
 .north-voyage .journal-slide img{position:absolute;inset:0;width:100%;height:100%}
 .north-voyage .journal-slide figcaption{position:relative;inset:auto;padding:70px 20px 82px;gap:6px}
 .north-voyage .journal-slide figcaption strong{font-size:1.45rem;line-height:1.25}
 .north-voyage .journal-slide figcaption>span:not(.f-slide-number){font-size:.875rem;line-height:1.5;max-width:43ch}
 .north-voyage .journal-slide figcaption>a{font-size:.75rem;line-height:1.4;min-height:24px}
 .north-voyage .f-slide-number{display:block;font-size:.875rem;line-height:1.5}
 .north-voyage .journal-controls{bottom:15px;left:16px;right:16px;gap:10px}
}
@media(max-width:370px){
 .north-voyage .journal-gallery{min-height:315px}
 .north-voyage .journal-slide figcaption{padding-inline:16px}
 .north-voyage .journal-controls{left:12px;right:12px;gap:7px}
}
@media(max-width:700px) and (max-height:700px){
 .north-voyage .journal-gallery{min-height:275px}
}