/* Home: preserve the OX500 and its buddy in the campaign photograph. */
.freedom-panorama--ox500{height:clamp(460px,42.85vw,900px);background:#043b45}
.freedom-panorama--ox500>img{top:0;height:100%;object-position:65% center;transform:translateY(var(--picture-offset,0px)) scale(1.04)}
.freedom-panorama--ox500 .freedom-panorama-copy{top:50%;transform:translateY(-50%);width:37%;max-width:660px}
.freedom-panorama--ox500 h2{font-size:clamp(46px,4.6vw,78px)}
.freedom-panorama--ox500 .freedom-panorama-copy h2+p{max-width:34ch}

/* An equipment detail anchors the practical safety introduction. */
.home-safety{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"heading heading" "visual copy";align-items:start;gap:48px clamp(32px,4.5vw,64px);padding:clamp(80px,6.25vw,100px) max(var(--gutter),calc((100% - 1280px)/2))}
.home-safety-heading{grid-area:heading;text-align:center}
.home-safety-visual{grid-area:visual;min-width:0;margin:0}
.home-safety-visual img{width:100%;height:auto}
.home-safety-visual figcaption{margin-top:16px;max-width:48ch;color:#566562;font-size:11px;line-height:1.65}
.home-safety-copy{grid-area:copy;min-width:0}
.home-safety h2{max-width:27ch;margin-inline:auto;font-size:clamp(40px,4.1vw,60px);text-wrap:balance}
.home-safety-intro{max-width:78ch;margin:24px auto 0;font-size:15px;line-height:1.8;color:#566562}
.home-safety-points{list-style:none;margin:0 0 32px;padding:0;border-top:1px solid #c5cfca}
.home-safety-points li{padding:18px 0;border-bottom:1px solid #c5cfca}
.home-safety-points h3{font-size:18px;line-height:1.4;letter-spacing:-.02em}
.home-safety-points p{margin-top:6px;color:#566562;font-size:13px;line-height:1.7}
.home-safety-copy .text-link{font-size:13px}

@media(min-width:601px) and (max-width:1000px){
  .freedom-panorama--ox500 .freedom-panorama-copy{width:39%;left:var(--gutter)}
  .freedom-panorama--ox500 h2{font-size:clamp(40px,4.6vw,48px)}
  .freedom-panorama--ox500 .freedom-panorama-copy h2+p{font-size:15px}
}
@media(max-width:900px){
  .home-safety{grid-template-columns:minmax(0,680px);grid-template-areas:"visual" "heading" "copy";justify-content:center;gap:30px;padding-top:50px;padding-bottom:80px}
  .home-safety-heading{text-align:left;margin-top:12px}
  .home-safety h2{max-width:16ch;margin-inline:0}
  .home-safety-intro{max-width:none;margin-inline:0}
}
@media(max-width:900px){
  .freedom-panorama--ox500{height:auto;display:flex;flex-direction:column}
  .freedom-panorama--ox500>img{position:relative;z-index:0;top:auto;height:clamp(280px,76.9vw,360px);object-position:80% center;transform:none;mask-image:none;opacity:1}
  .freedom-panorama--ox500:after{display:none}
  .freedom-panorama--ox500 .freedom-panorama-copy{position:relative;left:auto;right:auto;top:auto;bottom:auto;transform:none;width:100%;max-width:none;padding:38px 22px 65px}
  .freedom-panorama--ox500 h2{font-size:clamp(40px,10.8vw,60px)}
  .freedom-panorama--ox500 .freedom-panorama-copy h2+p{font-size:14px;max-width:34ch}
}
@media(max-width:600px){
  .home-safety{padding-inline:22px;gap:26px}
  .home-safety-heading{margin-top:9px}
  .home-safety h2{font-size:clamp(38px,10.2vw,56px)}
  .home-safety-intro{font-size:14px;margin-top:24px}
  .home-safety-points h3{font-size:17px}
}
@media(prefers-reduced-motion:reduce){.freedom-panorama--ox500>img{transform:none}}

/* Instagram: followers and latest posts of @_oxsea, photos copied on this site (docs/INSTAGRAM.md). */
.home-instagram{padding:var(--section-space) max(var(--gutter),calc((100% - 1440px)/2))}
.home-instagram-heading{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,400px);align-items:end;gap:40px 8vw;margin-bottom:clamp(40px,4vw,64px)}
.home-instagram-handle{display:inline-flex;align-items:center;gap:10px;margin-bottom:24px;font-size:13px;font-weight:600}
.home-instagram-handle .icon{width:20px;height:20px}
.home-instagram h2{font-size:clamp(48px,4.8vw,76px)}
.home-instagram-count{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 14px;margin-bottom:22px;padding-bottom:22px;border-bottom:1px solid #c5cfca}
.home-instagram-count strong{font-size:clamp(46px,4.2vw,64px);font-weight:500;line-height:1;letter-spacing:-.05em;white-space:nowrap}
.home-instagram-count span{max-width:17ch;color:#566562;font-size:14px;line-height:1.4}
.home-instagram-side>p:not(.home-instagram-count){color:#566562;font-size:15px;line-height:1.7}
.home-instagram-side .button{margin-top:26px}
.home-instagram-grid{display:grid;grid-template-columns:repeat(var(--instagram-tiles,6),minmax(0,1fr));gap:10px;margin:0;padding:0;list-style:none}
.home-instagram-grid a{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;border-radius:4px;background:#dfe3df}
.home-instagram-grid img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.home-instagram-grid a:after{content:'';position:absolute;inset:0;background:#080d10;opacity:0;transition:opacity .3s}
.home-instagram-type{position:absolute;top:10px;right:10px;z-index:1;display:flex;color:#fff;filter:drop-shadow(0 1px 2px #0009)}
.home-instagram-type .icon{width:18px;height:18px}
.home-instagram-type .icon path:only-child{fill:currentColor}
.home-instagram-hover{position:absolute;inset:0;z-index:1;display:grid;place-items:center;color:#fff;opacity:0;transition:opacity .3s}
.home-instagram-hover .icon{width:32px;height:32px}
.home-instagram-grid a:hover img,.home-instagram-grid a:focus-visible img{transform:scale(1.04)}
.home-instagram-grid a:hover:after,.home-instagram-grid a:focus-visible:after{opacity:.28}
.home-instagram-grid a:hover .home-instagram-hover,.home-instagram-grid a:focus-visible .home-instagram-hover{opacity:1}
.home-instagram-grid a:focus-visible{outline-offset:3px}

@media(max-width:1000px){
  .home-instagram-heading{grid-template-columns:minmax(0,1fr);align-items:start;gap:30px}
  .home-instagram-side{max-width:520px}
  .home-instagram-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:600px){
  .home-instagram{padding-inline:22px}
  .home-instagram-handle{margin-bottom:18px}
  .home-instagram h2{font-size:clamp(40px,10.8vw,56px)}
  .home-instagram-count strong{font-size:48px}
  .home-instagram-side>p:not(.home-instagram-count){font-size:14px}
  .home-instagram-side .button{width:100%;justify-content:space-between}
  .home-instagram-grid{gap:3px;margin-inline:-19px}
  .home-instagram-grid a{border-radius:0}
  .home-instagram-type{top:7px;right:7px}
  .home-instagram-type .icon{width:15px;height:15px}
}
@media(prefers-reduced-motion:reduce){.home-instagram-grid img{transition:none}.home-instagram-grid a:hover img,.home-instagram-grid a:focus-visible img{transform:none}}
