/* All In House — destination pages. Loads after /yachts/assets/site.css and only adds what a city page needs.
   RYI's single-destination skeleton, our identity: ink, full white (aih-white-and-readable), Perandory for names,
   Figtree for everything else. Nothing fixed, sticky or scroll-driven (aih-draft-3-rejected). */

/* hero: the city's name is the headline, set bottom-left so it never crosses the person in the frame */
.dhero{place-items:end start;text-align:left}
.dhero .hero__body{padding-bottom:clamp(56px,10vh,112px);max-width:46rem}
.dhero picture{position:absolute;inset:0}
/* on wide screens the dark sits behind the words only, so the person in the frame keeps the light */
@media (min-width:701px){.dhero.scrim::after{background:linear-gradient(180deg,rgba(10,10,11,.55) 0%,rgba(10,10,11,0) 20%),linear-gradient(90deg,rgba(10,10,11,.8) 0%,rgba(10,10,11,.44) 36%,rgba(10,10,11,0) 60%),linear-gradient(0deg,rgba(10,10,11,.5) 0%,rgba(10,10,11,0) 26%)}}
.dhero__name{font:400 clamp(84px,15vw,236px)/.84 var(--display);text-transform:uppercase;letter-spacing:.01em}
.dhero__lede{font-size:clamp(17px,1.4vw,20px);line-height:1.55;max-width:32rem;margin:24px 0 32px}

/* on a phone the words go in the sky at the top, above the person in the frame */
@media (max-width:700px){
  .dhero{place-items:start start}
  .dhero .hero__body{padding-top:104px;padding-bottom:0}
  .dhero__name{font-size:clamp(76px,24vw,110px)}
  .dhero__lede{font-size:16px;margin:16px 0 0;max-width:22rem}
  .dhero .btn{display:none}
  .dhero.scrim::after{background:linear-gradient(180deg,rgba(10,10,11,.8) 0%,rgba(10,10,11,.6) 34%,rgba(10,10,11,0) 58%),linear-gradient(0deg,rgba(10,10,11,.4) 0%,rgba(10,10,11,0) 22%)}
}

/* itineraries: photograph and text side by side, alternating */
.itins{padding:var(--pad) var(--gut)}
.itins>.title{margin-bottom:clamp(40px,5vw,72px)}
.itin{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,5vw,88px);align-items:center}
.itin+.itin{margin-top:clamp(64px,8vw,120px)}
.itin--r .itin__img{order:2}
.itin__img img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;background:var(--panel)}
.itin__title{font:400 clamp(40px,4.6vw,68px)/.92 var(--display);text-transform:uppercase}
.itin__text>p{font-size:18px;max-width:32rem;margin-top:20px}
.itin__text .btn{margin-top:34px}

/* the run sheet: the itinerary as it was actually run, one line a day */
.runsheet{margin-top:30px;max-width:34rem}
.runsheet div{display:grid;grid-template-columns:8.5rem minmax(0,1fr);gap:18px;border-top:1px solid var(--rule);padding:14px 0 15px}
.runsheet div:last-child{border-bottom:1px solid var(--rule)}
.runsheet dt{font:600 11px/1.9 var(--text);letter-spacing:.24em;text-transform:uppercase}
.runsheet dd{font-size:17px;line-height:1.5}
@media (max-width:820px){
  .itin{grid-template-columns:1fr}
  .itin--r .itin__img{order:0}
  .runsheet div{grid-template-columns:6.5rem minmax(0,1fr);gap:12px}
}

/* why: three tall photographs, as RYI sets them */
.why{padding:0 var(--gut) var(--pad)}
.why>.title{margin-bottom:clamp(36px,4vw,56px)}
.why__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.4vw,36px)}
.why__col img{width:100%;height:auto;aspect-ratio:9/20;object-fit:cover;background:var(--panel)}
.why__label{font:400 clamp(32px,2.8vw,42px)/1 var(--display);text-transform:uppercase;margin:24px 0 6px}
.why__col p{font-size:16px;margin-top:12px;max-width:26rem}
.why__link{display:inline-block;margin-top:16px;font:600 12px/1 var(--text);letter-spacing:.2em;text-transform:uppercase;text-underline-offset:6px}
@media (max-width:820px){
  .why{padding-right:0}
  .why__grid{display:grid;grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:78vw;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-right:var(--gut)}
  .why__grid::-webkit-scrollbar{display:none}
  .why__col{scroll-snap-align:start}
  .why__col img{aspect-ratio:9/14}
}

/* the rooms: the listing card at the venue's own proportion */
.room .card__frame{aspect-ratio:4/5}
.rail .room{min-width:0}
#rooms .rail__track{grid-auto-columns:min(74vw,360px)}
.room .card__name{font-size:clamp(28px,2.2vw,34px)}

/* what we handle here: a ledger */
.ledger{background:var(--panel);padding:var(--pad) var(--gut);display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(32px,5vw,80px)}
.ledger .btn{margin-top:30px}
.ledger ul{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:0 36px}
.ledger li{border-top:1px solid var(--rule);padding:18px 0 22px}
.ledger h3{font:400 clamp(26px,2.2vw,32px)/1 var(--display);text-transform:uppercase}
.ledger p{font-size:16px;margin-top:8px}
@media (max-width:820px){.ledger{grid-template-columns:1fr}.ledger ul{grid-template-columns:1fr}}

/* where to stay, when to go: full-bleed, text centred on an even wash */
.fullband{position:relative;min-height:100svh;display:grid;place-items:center;text-align:center;padding:clamp(96px,12vw,140px) var(--gut);overflow:hidden}
.scrim--flat::after{content:"";position:absolute;inset:0;background:rgba(10,10,11,.5);pointer-events:none}
.fullband__body{position:relative;z-index:1;max-width:64rem;width:100%}
.fullband__blocks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,48px);margin-top:44px;text-align:left}
.fullband__blocks div{border-top:1px solid var(--white);padding-top:18px}
.fullband__blocks h3{font:600 12px/1 var(--text);letter-spacing:.24em;text-transform:uppercase;margin-bottom:12px}
.fullband__blocks p{font-size:18px}
.fullband .btn{margin-top:44px}
.fullband__text{max-width:34rem;margin:22px auto 0}
.fullband__text p{font-size:19px}
.fullband__text p+p{margin-top:10px}

/* when to go: fifty-fifty, the dates on ink */
.season{display:grid;grid-template-columns:1fr 1fr;min-height:92svh}
.season__text{background:var(--panel);padding:var(--pad) var(--gut);display:flex;flex-direction:column;justify-content:center}
.season__text>p{font-size:18px;max-width:30rem;margin-top:16px}
.season__text>.title+p{margin-top:24px}
.season__img{position:relative;min-height:60svh}
.dates{margin-top:34px;max-width:34rem}
.dates div{display:flex;justify-content:space-between;align-items:baseline;gap:20px;border-top:1px solid var(--rule);padding:12px 0 13px}
.dates div:last-child{border-bottom:1px solid var(--rule)}
.dates dt{font-size:16px}
.dates dd{font:600 14px/1.6 var(--text);letter-spacing:.06em;white-space:nowrap}
@media (max-width:820px){
  .fullband__blocks{grid-template-columns:1fr}
  .season{grid-template-columns:1fr}
  .season__img{order:-1;min-height:0;aspect-ratio:4/5}
  .dates div{flex-direction:column;gap:2px}
  .dates dd{white-space:normal}
}

/* in their words: the review box from the home page, one box */
.words{padding:var(--pad) var(--gut);text-align:center}
.words__box{max-width:36rem;margin:24px auto 0;border:1px solid var(--white);padding:40px clamp(24px,4vw,44px) 34px;text-align:left}
.words__stars{display:flex;gap:5px;margin-bottom:18px}
.words__stars svg{width:15px;height:15px;fill:var(--white)}
.words__stars svg.is-off{fill:none;stroke:var(--white);stroke-width:1.4}
.words blockquote{font-size:clamp(18px,1.6vw,21px);line-height:1.55}
.words figcaption{margin-top:20px}
.words figcaption b{display:block;font-weight:600;font-size:16px}
.words figcaption span{display:block;margin-top:4px;font:400 13px/1.4 var(--text);letter-spacing:.14em;text-transform:uppercase}
.words__more{display:inline-block;margin-top:24px;font:600 12px/1 var(--text);letter-spacing:.2em;text-transform:uppercase;text-underline-offset:6px}

/* the index */
.dgrid{padding:var(--pad) var(--gut)}
.dcard .card__frame{aspect-ratio:4/5}

/* footer links */
.ft__links{display:flex;justify-content:center;flex-wrap:wrap;gap:8px 28px;margin-top:22px}
.ft__links a{font:600 12px/1 var(--text);letter-spacing:.2em;text-transform:uppercase}