/* Handled — requests from members, as they sent them, and what we arranged.
   Sits on /yachts/assets/site.css (ink, full white, Perandory + Figtree). No photographs: the words are the picture.
   The one signature: a guest's message at display size, word for word with their own line breaks, answered "Handled".
   Perandory has no lower case, so the messages read in capitals like every other Perandory line on the site.
   No motion, nothing sticky (aih-draft-3-rejected). Every word full white (aih-white-and-readable). */

/* opening: the title on the left, the five trips on the page as a contents list on the right */
.hx{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(40px,5vw,80px);align-items:end;padding:clamp(150px,17vw,220px) var(--gut) clamp(64px,8vw,112px)}
.hx__lede{font-size:clamp(18px,1.5vw,21px);line-height:1.5;margin-top:30px}
.hx__lede span{display:block}
.hx__index ol{list-style:none;border-bottom:1px solid var(--rule)}
.hx__index a{display:grid;grid-template-columns:minmax(150px,3fr) minmax(0,8fr);align-items:baseline;gap:24px;padding:16px 0 14px;border-top:1px solid var(--rule);text-decoration:none}
.hx__when{font:600 12px/1.3 var(--text);letter-spacing:.24em;text-transform:uppercase}
.hx__where{font:400 clamp(26px,2.5vw,38px)/1 var(--display);text-transform:uppercase}
.hx__index a:hover .hx__where{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}

/* one trip: where and when on the left, the exchanges on the right */
.trip{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(32px,5vw,80px);padding:clamp(56px,7vw,104px) var(--gut);border-top:1px solid var(--rule);scroll-margin-top:24px}
.trip__when{font:600 12px/1.3 var(--text);letter-spacing:.24em;text-transform:uppercase;margin-bottom:18px}
.trip__where{font:400 clamp(44px,5vw,78px)/.9 var(--display);text-transform:uppercase;letter-spacing:.005em}
.trip__where span{display:block}
.trip__span{font:600 12px/1.3 var(--text);letter-spacing:.2em;text-transform:uppercase;margin-top:22px}
.trip__body{min-width:0}

/* the exchange: their words, then ours */
.ex+.ex{margin-top:clamp(48px,5.5vw,80px)}
.ex__ask p,.said p{position:relative}
.ex__ask p::before,.said p::before{content:"\201C";position:absolute;right:100%}
.ex__ask p{font:400 clamp(34px,4.3vw,64px)/1.04 var(--display);letter-spacing:.004em;overflow-wrap:break-word}
.ex__ask p::after{content:"\201D"}
.ex__reply{margin-top:24px;max-width:34rem;font-size:clamp(18px,1.45vw,21px);line-height:1.45}
.ex__reply b{display:block;font:600 11px/1 var(--text);letter-spacing:.28em;text-transform:uppercase;margin-bottom:12px}

/* also arranged: the rest of the trip, one line each */
.also{margin-top:clamp(52px,6vw,88px)}
.also__label{font:600 11px/1 var(--text);letter-spacing:.28em;text-transform:uppercase;margin-bottom:14px}
.also ul{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:0 36px}
.also li{border-top:1px solid var(--rule);padding:16px 0 18px;font-size:18px;line-height:1.4}

/* what they said afterwards */
.said{margin-top:clamp(48px,5.5vw,80px)}
.said p{font:400 clamp(26px,2.5vw,38px)/1.1 var(--display)}
.said p::after{content:"\201D"}
.said figcaption{font:600 11px/1 var(--text);letter-spacing:.28em;text-transform:uppercase;margin-top:16px}

.trip__body>.btn{margin-top:clamp(40px,4.5vw,64px)}

/* footer links: the destinations pages carry these in dest.css, which this page does not load */
.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}

@media (max-width:820px){
  .hx,.trip{grid-template-columns:1fr;gap:36px}
  .hx__index a{grid-template-columns:1fr;gap:10px}
  .also ul{grid-template-columns:1fr}
}