/* Frames own their aspect ratio. Intrinsic HTML dimensions must not fix a
   responsive image's CSS height or let it enlarge a flex/grid track. */
.merida-feature{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);background:var(--brand-blue);color:#fff;margin:80px var(--gutter)}
.merida-photo{position:relative;min-width:0;aspect-ratio:1.15;overflow:hidden}
.merida-photo img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:53% 50%}
.merida-copy{align-self:center;padding:clamp(32px,4.5vw,80px)}
.merida-copy .eyebrow{color:var(--lime);font-size:11px;margin-bottom:25px}
.merida-copy h2{font-size:clamp(32px,3.4vw,58px);line-height:1.06;letter-spacing:-.035em;max-width:15ch;margin:0 0 24px;text-wrap:balance}
.merida-copy h2 span{display:block;color:#b9c2b7;font-size:.52em;letter-spacing:-.02em;line-height:1.25;margin-top:15px}
.merida-copy p{font-size:17px;line-height:1.65;max-width:35ch;color:#d0d6cd;text-wrap:pretty;margin:0 0 30px}
.merida-copy .button{font-size:13px;gap:20px}
.merida-feature :focus-visible{outline-color:var(--lime)}

.guide-grid,.journal-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:stretch}
.guide-grid>a,.journal-card{min-width:0;min-height:0;display:flex;flex-direction:column;align-items:stretch;padding:0 0 28px!important;overflow:hidden}
.guide-grid>a>img,.journal-card>img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;object-position:var(--photo-focus,50% 50%);flex:0 0 auto;margin:0 0 25px;min-height:0;max-height:none}
.guide-grid>a>.guide-label{font-size:10px;font-weight:700;line-height:1.5;letter-spacing:.1em;color:#596158;margin:0 26px 16px}
.guide-grid>a>h3{font-size:clamp(23px,2.15vw,34px);line-height:1.12;letter-spacing:-.025em;min-height:0;max-width:17ch;text-wrap:balance;margin:0 26px 24px}
.guide-grid>a>.round-arrow{position:static;inset:auto;align-self:flex-end;flex:none;display:grid;place-items:center;width:36px;height:36px;margin: auto 26px 0!important}
.journal-card>:not(img){margin-left:26px;margin-right:26px}
.journal-card>.eyebrow{font-size:10px;margin-top:0;margin-bottom:16px}
.journal-card h2{font-size:clamp(24px,2.15vw,34px);line-height:1.12;letter-spacing:-.025em;margin-top:0;margin-bottom:15px;text-wrap:balance}
.journal-card p{max-width:42ch;margin-top:0;margin-bottom:24px}
.journal-card .text-link{margin-top:auto;align-self:flex-start}

/* Source-specific focus keeps the subject visible in every use of these
   photographs, including native Ghost feature-image URLs. */
img[src*="hero-road"]{--photo-focus:68% 48%}
img[src*="hero-kids"]{--photo-focus:51% 66%}
img[src*="merida-trail"]{--photo-focus:53% 43%}
img[src*="merida-everyday"]{--photo-focus:53% 74%}
img[src*="merida-electric"]{--photo-focus:60% 45%}
img[src*="family-setup"]{--photo-focus:53% 61%}
img[src*="workshop-detail"]{--photo-focus:50% 52%}

.editorial-image{position:relative;isolation:isolate;width:calc(100% - 2 * var(--gutter));height:auto;max-width:1280px;margin:0 auto;aspect-ratio:16/9;max-height:none;overflow:hidden}
.editorial-image img{position:absolute;inset:0;display:block;width:100%;height:100%;max-height:none;object-fit:cover;object-position:var(--photo-focus,50% 50%)}
.story-photo{position:relative;aspect-ratio:1.15;min-width:0}
.story-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--photo-focus,50% 50%)}
.workshop-image{min-width:0}
.workshop-image img{width:100%;height:100%;object-fit:cover;object-position:var(--photo-focus,50% 50%)}
.prose img{max-width:100%;height:auto}
.hero-photo{width:100%;height:100%;object-fit:cover}
.hero-kids{object-position:51% 66%;transform:scale(1.35);transform-origin:30% 75%}
.hero-road{object-position:68% 48%}

@media(min-width:641px) and (max-width:1023px){
  .guide-grid,.journal-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
  .guide-grid>a>h3,.journal-card h2{font-size:28px}
}
@media(max-width:900px){
  .merida-feature{grid-template-columns:1fr;margin-block:60px}
  .merida-photo{aspect-ratio:3/2}
  .merida-copy{padding:38px;max-width:650px}
  .merida-copy h2{font-size:42px;max-width:18ch}
  .merida-copy p{max-width:46ch}
}
@media(max-width:640px){
  .guide-grid,.journal-list{grid-template-columns:1fr;gap:24px}
  .guide-grid>a>h3,.journal-card h2{font-size:28px;max-width:20ch}
  .guide-grid>a>img,.journal-card>img{aspect-ratio:3/2}
  .merida-feature{margin:48px var(--gutter)}
  .merida-copy{padding:30px 24px 34px}
  .merida-copy .eyebrow{font-size:9px;margin-bottom:20px}
  .merida-copy h2{font-size:34px}
  .merida-copy p{font-size:16px;line-height:1.65}
  .merida-copy .button{width:100%;justify-content:space-between;font-size:12px}
  .editorial-image,.story-photo{aspect-ratio:3/2}
  .editorial-image img[src*="hero-road"]{--photo-focus:68% 50%}
  .editorial-image img[src*="merida-trail"]{--photo-focus:53% 50%}
  .editorial-image img[src*="family-setup"]{--photo-focus:55% 60%}
  .hero-kids{object-position:42% 66%;transform:none}
  .hero-road{object-position:58% 48%}
}

/* Keep both riders in the independent homepage story crop. */
.story-photo img[src*="home-story"]{--photo-focus:85% 50%}