/* Homepage Sable reveal. The existing fitted-rover scene is treated as a
   full-height story image, with the character introduction carrying the other
   half of the composition. */

body .sable-home-intro{
  position:relative;
  overflow:hidden;
  padding:0;
  background:
    radial-gradient(circle at 88% 18%,rgba(227,148,51,.22),transparent 28%),
    linear-gradient(135deg,#082f42 0%,#0d4a61 52%,#0a354a 100%);
}
body .sable-home-intro::before{
  content:"SABLE";
  position:absolute;
  right:-.04em;
  bottom:-.22em;
  color:rgba(255,253,248,.035);
  font:700 clamp(150px,22vw,370px)/.8 "Cormorant Garamond",serif;
  letter-spacing:-.07em;
  pointer-events:none;
}
body .sable-home-stage{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(360px,.92fr) minmax(0,1.08fr);
  gap:clamp(54px,7vw,112px);
  align-items:stretch;
  min-height:0;
  padding:0;
}
body .sable-home-visual{
  display:block;
  align-self:stretch;
}
body .sable-home-image{
  position:relative;
  display:block;
  min-height:0;
  height:100%;
  overflow:hidden;
  border-radius:4px 4px 54px 4px;
  background:#092d3c;
  box-shadow:0 30px 70px rgba(2,22,31,.42);
}
body .sable-home-image::after{
  content:"";
  position:absolute;
  inset:0;
  border:1px solid rgba(255,253,248,.16);
  border-radius:inherit;
  box-shadow:inset 0 -90px 90px rgba(4,29,40,.12);
  pointer-events:none;
}
body .sable-home-image img{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 58%;
  transition:transform .35s ease;
}
body .sable-home-image:hover img{transform:scale(1.018)}
body .sable-home-image-note{
  position:absolute;
  z-index:2;
  top:clamp(26px,3vw,48px);
  left:clamp(24px,3vw,46px);
  color:#082f42;
  font:700 italic clamp(25px,2.1vw,34px)/1.1 "Segoe Print","Bradley Hand",cursive;
  letter-spacing:-.035em;
  text-shadow:0 1px 1px rgba(255,253,248,.7),0 2px 5px rgba(255,253,248,.42);
  transform:rotate(-4deg);
  transform-origin:left center;
  transition:transform .18s,color .18s;
}
body .sable-home-image-note::after{
  content:"";
  position:absolute;
  left:4%;
  right:-5%;
  bottom:-7px;
  height:3px;
  border-radius:50%;
  background:var(--sunset);
  transform:rotate(-1deg);
}
body .sable-home-image:hover .sable-home-image-note,
body .sable-home-image:focus-visible .sable-home-image-note{color:#061f2b;transform:rotate(-2deg) scale(1.025)}
body .sable-home-copy{
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  padding:36px 0;
}
body .sable-home-copy .section-label{margin-bottom:22px}
body .sable-home-copy h2{
  max-width:none;
  margin:0 0 28px;
  line-height:.82;
}
body .sable-home-copy h2 span{
  display:block;
  font:800 clamp(23px,2.1vw,34px)/1 "Inter",sans-serif;
  letter-spacing:.15em;
  text-transform:uppercase;
}
body .sable-home-copy h2 strong{
  display:block;
  margin-top:16px;
  color:var(--sand);
  font:600 italic clamp(96px,10vw,158px)/.68 "Cormorant Garamond",serif;
  letter-spacing:-.055em;
}
body .sable-home-copy .sable-home-tagline{
  max-width:17ch;
  margin:0 0 24px;
  color:var(--white);
  font:600 clamp(32px,3.4vw,52px)/1.04 "Cormorant Garamond",serif;
  letter-spacing:-.025em;
}
body .sable-home-copy p:not(.section-label):not(.sable-home-tagline){
  max-width:55ch;
  margin:0;
  color:rgba(255,253,248,.78);
  font-size:16px;
  line-height:1.75;
}

@media(max-width:900px){
  body .sable-home-stage{
    grid-template-columns:1fr;
    gap:44px;
    min-height:0;
    padding:0 0 56px;
  }
  body .sable-home-visual{width:min(100%,620px)}
  body .sable-home-image{min-height:560px}
  body .sable-home-copy{padding:40px 0 0}
  body .sable-home-copy h2 strong{font-size:clamp(90px,22vw,132px)}
}

@media(max-width:520px){
  body .sable-home-stage{gap:38px;padding:0 0 48px}
  body .sable-home-image{min-height:460px;border-radius:4px 4px 38px 4px}
  body .sable-home-image-note{top:24px;left:22px;font-size:25px}
  body .sable-home-copy .section-label{margin-bottom:18px}
  body .sable-home-copy h2{margin-bottom:24px}
  body .sable-home-copy h2 span{font-size:20px}
  body .sable-home-copy h2 strong{margin-top:12px;font-size:clamp(82px,27vw,116px)}
  body .sable-home-copy .sable-home-tagline{font-size:36px}
}