/* Ruby v66 — real five-light photographs, crop-safe olive motion, and precise
   right-aligned hero composition. Earlier site sections remain untouched. */

/* Keep each real photograph's original colour: the entire scene changes,
   including restaurant, trees, sea and sky, with no grading overlay. */
.ruby-five-lights .ruby-time-images>.ruby-photo-slide {
  background:transparent;
  will-change:opacity;
}
.ruby-five-lights .ruby-time-images>.ruby-photo-slide img {
  opacity:1!important;
  filter:none!important;
  transform:none!important;
  transition:none!important;
  object-fit:cover;
  object-position:center;
}
.ruby-five-lights .ruby-time-stage::after {
  inset:66% 0 0;
  background:linear-gradient(to bottom,transparent,rgba(7,10,12,.60));
}
.ruby-five-lights .ruby-time-stage::before {content:"RUBY / ISTANBUL · FIVE LIGHTS"}
.ruby-five-lights--mare .ruby-time-stage::before {content:"RUBY MARE / BODRUM · FIVE LIGHTS"}
.ruby-five-lights--mare {
  background:#111611;
}
.ruby-five-lights--mare .ruby-time-heading h2 i {color:#d0ac79}
.ruby-five-lights--mare .ruby-time-progress span {background:#d8b783}
.ruby-five-lights .ruby-time-clock {
  letter-spacing:-.055em;
  font-variant-numeric:tabular-nums;
}
.ruby-five-lights .ruby-time-photo-caption>span {white-space:nowrap}
.ruby-five-lights .ruby-time-step:focus-visible {
  outline:2px solid #dfbe8e;
  outline-offset:4px;
}

/* In both city heroes the overline, two-line title, description and CTA have
   ONE right edge: the right edge of the reservation button. */
.istanbul-hero .hero-inner.ruby-hero-copy,
.mare-main .mare-content.ruby-hero-copy {align-items:flex-end}
.istanbul-hero .ruby-hero-copy > :is(.ruby-hero-overline,h1,p,.ruby-hero-actions),
.mare-main .ruby-hero-copy > :is(.ruby-hero-overline,h1,p,.ruby-hero-actions) {
  text-align:right;
}
.istanbul-hero .ruby-hero-copy .ruby-hero-overline,
.mare-main .ruby-hero-copy .ruby-hero-overline {align-items:flex-end}
.istanbul-hero .ruby-hero-copy h1.ruby-hero-title,
.mare-main .ruby-hero-copy h1.ruby-hero-title {text-align:right}
.istanbul-hero .ruby-hero-copy>p,
.mare-main .ruby-hero-copy>p {text-align:right;margin-left:auto}
.istanbul-hero .ruby-hero-actions,
.mare-main .ruby-hero-actions {
  flex-direction:column;
  justify-content:flex-end;
  align-items:flex-end;
  gap:9px;
}
.istanbul-hero .ruby-hero-actions>.btn,
.mare-main .ruby-hero-actions>.btn {min-width:min(310px,100%);max-width:100%}
.istanbul-hero .ruby-hero-actions>.btn-text,
.mare-main .ruby-hero-actions>.btn-text {
  min-height:38px;
  justify-content:flex-end;
  text-align:right;
  max-width:100%;
}

/* The olive image originally started 38–48px *inside* the photo. Once its
   trunk swayed, that rectangle became visible against the real sky. Give the
   independent cutout ample overscan beyond both exposed frame boundaries. */
.ruby-scene-wrap--mare .ruby-olive-wind--canopy {
  animation:rubyOliveContainedBreeze 7.6s ease-in-out -2.1s infinite alternate;
}
.ruby-scene-wrap--mare .ruby-olive-wind--canopy img {
  left:calc(var(--ruby-olive-shift,0px) - 155px);
  top:-90px;
  width:113%;
  height:113%;
  max-width:none;
  -webkit-mask-image:none;
  mask-image:none;
}
.ruby-scene-wrap--mare .ruby-olive-wind--canopy {
  -webkit-mask-image:none;
  mask-image:none;
}

/* Subtle, individually timed warm candlelight; each SVG center is tied to a
   photographed Bodrum lantern/candle, in original 1672×941 coordinates. */
.ruby-scene-wrap--mare .ruby-mare-fixture {
  mix-blend-mode:screen;
  filter:drop-shadow(0 0 1px rgba(255,218,156,.15));
}
.mare-main .ruby-photo-svg {opacity:var(--ruby-scene-lights,.65);transition:opacity 2s ease}

@media(max-width:900px) {
  .ruby-scene-wrap--mare .ruby-olive-wind--canopy img {
    left:calc(var(--ruby-olive-shift,0px) - 170px);
    top:-95px;
    width:115%;
    height:115%;
  }
  .istanbul-hero .ruby-hero-actions,
  .mare-main .ruby-hero-actions {align-items:flex-end;justify-content:flex-end}
  .istanbul-hero .ruby-hero-actions>.btn,
  .mare-main .ruby-hero-actions>.btn {min-width:min(265px,100%)}
}
@media(max-width:640px) {
  .ruby-five-lights .ruby-time-stage {min-height:0;height:auto;aspect-ratio:16/9}
  .ruby-five-lights .ruby-time-heading h2 {font-size:clamp(41px,10.2vw,60px)}
  .ruby-five-lights .ruby-time-photo-caption strong {font-size:clamp(27px,8vw,37px)}
  .ruby-five-lights .ruby-time-step>span:last-child {font-size:9px;letter-spacing:.1em}
  .ruby-scene-wrap--mare .ruby-olive-wind--canopy img {
    left:calc(var(--ruby-olive-shift,0px) - 188px);
    top:-110px;
    width:117%;
    height:117%;
  }
  .istanbul-hero .ruby-hero-actions>.btn-text,
  .mare-main .ruby-hero-actions>.btn-text {font-size:9.5px}
}
@media(prefers-reduced-motion:reduce) {
  .ruby-five-lights .ruby-time-images>.ruby-photo-slide {transition:none!important}
  .ruby-scene-wrap--mare .ruby-mare-fixture {animation:none!important}
}

/* v67 · One exact right guide for all hero content. The guide equals the
   actual right padding of each header's RESERVATIONS button, not the former
   5.2vw copy gutter (which left the block 30–90px too far left). */
:root {--ruby-hero-header-right:47px}
@media(max-width:1150px) {:root{--ruby-hero-header-right:28px}}
@media(max-width:640px) {:root{--ruby-hero-header-right:21px}}

#istanbul-site .istanbul-hero .hero-inner.ruby-hero-copy,
#mare-site .mare-main .mare-content.ruby-hero-copy {
  padding-right:var(--ruby-hero-header-right);
  align-items:flex-end;
  text-align:right;
}

/* Give each line the same actual right boundary; a wide fixed-width h1 was
   previously overflowing its box and visually jumping back to the left. */
#istanbul-site .istanbul-hero .ruby-hero-copy > .ruby-hero-title,
#mare-site .mare-main .ruby-hero-copy > .ruby-hero-title {
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  align-self:flex-end;
  box-sizing:border-box;
  width:max-content;
  max-width:100%;
  margin:0 0 clamp(18px,2.7vh,29px) auto;
  padding:0;
  font-size:clamp(58px,6.1vw,112px);
  line-height:1.035;
  white-space:nowrap;
  text-align:right;
}
#istanbul-site .ruby-hero-copy > .ruby-hero-title > span,
#mare-site .ruby-hero-copy > .ruby-hero-title > span {
  display:block;
  flex:none;
  width:max-content;
  max-width:100%;
  margin:0;
  text-align:right;
}
#istanbul-site .ruby-hero-copy > :is(.ruby-hero-overline,p,.ruby-hero-actions),
#mare-site .ruby-hero-copy > :is(.ruby-hero-overline,p,.ruby-hero-actions) {
  width:min(610px,100%);
  max-width:100%;
  margin-left:auto;
  margin-right:0;
  text-align:right;
}
#istanbul-site .ruby-hero-copy > .ruby-hero-overline,
#mare-site .ruby-hero-copy > .ruby-hero-overline {align-items:flex-end}
#istanbul-site .ruby-hero-copy > .ruby-hero-actions,
#mare-site .ruby-hero-copy > .ruby-hero-actions {
  align-items:flex-end;
  justify-content:flex-end;
  flex-direction:column;
}
#istanbul-site .ruby-hero-copy .ruby-hero-actions > .btn,
#mare-site .ruby-hero-copy .ruby-hero-actions > .btn {
  box-sizing:border-box;
  width:min(335px,100%);
  min-width:0;
  margin-left:auto;
  margin-right:0;
}
#istanbul-site .ruby-hero-copy .ruby-hero-actions > .btn-text,
#mare-site .ruby-hero-copy .ruby-hero-actions > .btn-text {
  margin-left:auto;
  margin-right:0;
  text-align:right;
  justify-content:flex-end;
}

@media(max-width:900px) {
  #istanbul-site .istanbul-hero .ruby-hero-copy > .ruby-hero-title,
  #mare-site .mare-main .ruby-hero-copy > .ruby-hero-title {
    font-size:clamp(48px,8vw,80px);
  }
  #istanbul-site .ruby-hero-copy > :is(.ruby-hero-overline,p,.ruby-hero-actions),
  #mare-site .ruby-hero-copy > :is(.ruby-hero-overline,p,.ruby-hero-actions) {
    width:min(89%,500px);
  }
}
@media(max-width:640px) {
  #istanbul-site .istanbul-hero .ruby-hero-copy > .ruby-hero-title,
  #mare-site .mare-main .ruby-hero-copy > .ruby-hero-title {
    font-size:clamp(38px,9.6vw,64px);
  }
  #istanbul-site .ruby-hero-copy > :is(.ruby-hero-overline,p,.ruby-hero-actions),
  #mare-site .ruby-hero-copy > :is(.ruby-hero-overline,p,.ruby-hero-actions) {
    width:min(89%,470px);
  }
  #istanbul-site .ruby-hero-copy .ruby-hero-actions > .btn,
  #mare-site .ruby-hero-copy .ruby-hero-actions > .btn {width:min(290px,100%)}
}