/* Home hero: S3 "Half cut" (Stacy, 10 Oct: "use s3 half cut"). Built from docs/hero-treatments/slash-vertical/S3-half-cut.html. */
/* Full-bleed: the photo runs to the right edge of the screen. */
html{overflow-x:clip}
.cover3{margin-top:-48px;margin-bottom:40px;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
.cover3 .btn{margin:0;display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 24px;border-radius:999px;font-weight:800;font-size:18px;line-height:24px;text-decoration:none;border:2px solid transparent;white-space:nowrap}
.cover3 .btn-pink{background:var(--ht-primary);color:var(--ht-primary-ink)}
.cover3 .btn-line{background:transparent;border-color:var(--ht-ink);color:var(--ht-ink)}
/* ---------- Slash photo windows (shared by S1–S3) ---------- */
/* Lean = 20deg, the wordmark's own angle. Offset = tan(20deg) x height = 0.364 x height. */
.cover3 .win{position:absolute;overflow:hidden;background:var(--ht-panel);--ls:1;--rs:1}
.cover3 .sl{position:absolute;inset:0;opacity:0;transition:opacity .9s ease}
.cover3 .sl.on{opacity:1}
/* the blurred copy that fills corners when the faces need the photo a little smaller than the window */
.cover3 .sl .bg{position:absolute;left:-48px;top:-48px;width:calc(100% + 96px);height:calc(100% + 96px);object-fit:cover;filter:blur(28px) saturate(1.05);display:block}
.cover3 .sl .fg{position:absolute;left:0;top:0;width:100%;height:100%;max-width:none;display:block;object-fit:fill;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 var(--fl,0px),#000 calc(100% - var(--fr,0px)),transparent 100%),linear-gradient(to bottom,transparent 0,#000 var(--ft,0px),#000 calc(100% - var(--fb,0px)),transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent 0,#000 var(--fl,0px),#000 calc(100% - var(--fr,0px)),transparent 100%),linear-gradient(to bottom,transparent 0,#000 var(--ft,0px),#000 calc(100% - var(--fb,0px)),transparent 100%);
  mask-composite:intersect}
.cover3 .edge{position:absolute;background:var(--kc,var(--ht-primary));transition:background-color .9s ease}
.cover3 .pause{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:0;border-radius:999px;background:#22201F;color:#FFFFFF;font:inherit;font-weight:800;font-size:16px;line-height:24px;cursor:pointer;white-space:nowrap}
.cover3 .pause:focus-visible{outline:3px solid #FFFFFF;box-shadow:0 0 0 6px #22201F}
.cover3 .pause svg{width:16px;height:16px}
.cover3 .pause .i-play{display:none}.cover3 .pause[aria-pressed="true"] .i-play{display:block}.cover3 .pause[aria-pressed="true"] .i-pause{display:none}
.cover3 .cap{margin:0;font-size:16px;line-height:24px;color:var(--ht-soft)}
.cover3 .cap b{color:var(--ht-ink);font-weight:800}
.cover3 .cap a{color:var(--ht-ink);font-weight:700;text-underline-offset:4px}
@media (prefers-reduced-motion: reduce){.cover3 .sl,.cover3 .edge{transition:none}}

/* ---------- S3 · The Half Cut ---------- */
/* The photo takes the right half of the hero, from the header down to the list, and runs off the right edge
   of the screen. Only its left side is cut, at the slash angle. Laptop: 576 tall, offset 0.364 x 576 = 210px. */
.cover3{position:relative;overflow:clip;height:var(--H);--H:576px;--off:210px}
.cover3 .cut{position:absolute;top:0;bottom:0;right:0;left:calc(50% - 40px)}
.cover3 .cut .win{inset:0;--rs:0;--rb:72px;clip-path:polygon(var(--off) 0,100% 0,100% 100%,0 100%)}
.cover3 .cut .edge{top:0;bottom:0;left:-40px;width:calc(var(--off) + 16px);clip-path:polygon(var(--off) 0,calc(var(--off) + 16px) 0,16px 100%,0 100%)}
.cover3 .cap3{position:absolute;right:16px;bottom:16px;max-width:320px;margin:0;background:#22201F;color:#FFFFFF;border-radius:8px;padding:8px 12px;font-size:16px;line-height:24px}
.cover3 .cap3 b{color:#FFFFFF}
.cover3 .cap3 a{color:#FFFFFF;font-weight:700;text-underline-offset:4px}
.cover3 .cap3 a:focus-visible{outline-color:#FFFFFF}
.cover3 .copywrap{height:100%;display:flex;align-items:center}
.cover3 .copy3{position:relative;z-index:2;width:464px}
.cover3 .copy3 h1{margin:0;font-size:64px;line-height:64px;font-weight:800;letter-spacing:-.035em}
.cover3 .slab3{margin:0 0 24px}
.cover3 .stand{margin:0 0 24px;font-size:18px;line-height:28px}
.cover3 .acts{display:flex;flex-wrap:wrap;gap:16px;margin:0 0 32px}
.cover3 .picker{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.cover3 .thumbs{display:flex;gap:0}
.cover3 .th{width:48px;height:48px;padding:0;border:0;background:none;cursor:pointer;position:relative;display:inline-flex;align-items:center;justify-content:center}
.cover3 .th img{width:40px;height:48px;object-fit:cover;clip-path:polygon(17px 0,100% 0,23px 100%,0 100%);opacity:.6;transition:opacity .3s ease}
.cover3 .th:hover img{opacity:.85}
.cover3 .th[aria-pressed="true"] img{opacity:1}
.cover3 .picker .pause{margin-left:8px}

@media (max-width:1199px){
  .cover3{--H:512px;--off:186px}
  .cover3 .copy3{width:calc(50vw - 120px)}
  .cover3 .copy3 h1{font-size:48px;line-height:52px}
}
@media (max-width:899px){
  /* phone: the photo goes edge to edge, full portrait, and the headline sits in an ink slab
     whose right side is cut at the slash angle, overlapping the bottom of the photo. */
  .cover3{height:auto;padding-bottom:32px}
  .cover3 .cut{position:relative;left:0;height:480px}
  .cover3 .cut .win{--ls:0;--rb:104px;--rt:64px;clip-path:none}
  .cover3 .cut .edge{display:none}
  .cover3 .cap3{right:auto;left:16px;top:16px;bottom:auto;max-width:calc(100% - 32px)}
  .cover3 .copywrap{display:block;height:auto}
  .cover3 .copy3{width:auto}
  .cover3 .slab3{position:relative;margin:-96px 0 24px;padding:24px 96px 24px 0;color:#FFFFFF}
  .cover3 .slab3::before{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:-240px;right:88px;background:#22201F;transform:skewX(-20deg);transform-origin:0 100%}
  .cover3 .slab3::after{content:"";position:absolute;z-index:-1;top:0;bottom:0;right:60px;width:12px;background:var(--kc,var(--ht-primary));transform:skewX(-20deg);transform-origin:0 100%;transition:background-color .9s ease}
  .cover3 .copy3 h1{font-size:36px;line-height:40px;letter-spacing:-.03em}
  .cover3 .stand{display:none}
  .cover3 .acts{margin-bottom:24px}
  .cover3 .acts .btn{flex:1 1 0;padding:0 16px}
  .cover3 .picker{justify-content:space-between}
  .cover3 .picker .pause{margin-left:0}
}
@media (prefers-reduced-motion: reduce){.cover3 .th img,.cover3 .slab3::after{transition:none}}
/* "Your next /trip awaits.": the slash takes the photo's kind colour, the word fades as it changes. */
/* Always three lines, "Your next" / "/word" / "awaits." (Stacy, 10 Oct: a 2-to-3-line switch made the page jump). */
.cover3 .swap-w{display:block;white-space:nowrap}
.cover3 .swap-sl{color:var(--kc,var(--ht-primary));transition:color .9s ease}
.cover3 #swap-word{display:inline-block;transition:opacity .25s ease,transform .25s ease}
.cover3 #swap-word.out{opacity:0;transform:translateY(8px)}
@media (max-width:899px){.cover3 .swap-sl{color:var(--kc,#F06AA0)}}
@media (prefers-reduced-motion: reduce){.cover3 .swap-sl,.cover3 #swap-word{transition:none}}
/* "I'm looking for [kind], [when], [where]." (Stacy, 10 Oct): the search as one sentence under the headline. */
.cover3 .look{margin:24px 0 0}
.cover3 .look-s{font-size:28px;line-height:44px;font-weight:800;letter-spacing:-.01em;margin:0 0 24px}
.cover3 .look .blank{display:inline-block;position:relative}
.cover3 .look select{appearance:none;-webkit-appearance:none;font:inherit;color:inherit;background:transparent;border:0;border-bottom:4px solid var(--ht-ink);border-radius:0;padding:0 32px 0 0;margin:0;min-height:44px;cursor:pointer;max-width:100%;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 14px) 55%,calc(100% - 8px) 55%;background-size:6px 6px;background-repeat:no-repeat}
.cover3 .look select:focus-visible{outline:3px solid var(--ht-ink);outline-offset:4px}
.cover3 .look .comma{margin-right:8px}
@media (max-width:1199px){.cover3 .look-s{font-size:24px;line-height:40px}}
@media (max-width:899px){.cover3 .look{margin-top:0}.cover3 .look-s{font-size:22px;line-height:40px}.cover3 .look select{max-width:calc(100vw - 64px)}}
.cover3 .look .nb{white-space:nowrap}
/* The plain line inside the home heading (11 Oct): says what the site is, for people and for search. */
.cover3 .copy3 h1 .h1-sub{display:block;margin-top:16px;font-size:18px;line-height:28px;font-weight:400;letter-spacing:0}