@font-face{
  font-family:"Manrope";
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url("./fonts/manrope-500.woff2") format("woff2");
}

/*
  IMPORTANT: every article rule is scoped to #widescreen so this file can be
  loaded on TimeOut without touching the site's header, logo, navigation or
  other editorial content.
*/
#widescreen,
#widescreen *,
#widescreen *::before,
#widescreen *::after{
  box-sizing:border-box !important;
}

#widescreen{
  --pad:48px;
  --gap:80px;
  --radius:24px;
  --text:25px;
  --lh:1.296;
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  padding:0 !important;
  background:#fff !important;
  color:#000 !important;
  font-family:"Manrope",Arial,sans-serif !important;
  font-weight:500 !important;
  font-style:normal !important;
  -webkit-font-smoothing:antialiased !important;
  text-rendering:optimizeLegibility !important;
  isolation:isolate !important;
  container-type:inline-size !important;
  container-name:widescreen !important;
}

#widescreen h1,
#widescreen h2,
#widescreen p,
#widescreen a,
#widescreen strong{
  font-family:"Manrope",Arial,sans-serif !important;
  font-style:normal !important;
  text-transform:none !important;
}

#widescreen h1,
#widescreen h2,
#widescreen p{
  margin:0 !important;
  padding:0 !important;
  color:inherit !important;
}

#widescreen a,
#widescreen a:visited{
  color:#A08CC0 !important;
}

#widescreen strong{
  font-weight:700 !important;
}

#widescreen.article,
#widescreen .article{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  overflow:hidden !important;
  background:#fff !important;
  padding:50px var(--pad) 0 !important;
  color:#000 !important;
  font-family:"Manrope",Arial,sans-serif !important;
  font-weight:500 !important;
}

/* Only images belonging to article media cards are normalized. Never style all img globally. */
#widescreen .media-card img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  object-fit:cover !important;
}

#widescreen .media-card{
  overflow:hidden !important;
  border-radius:var(--radius) !important;
  position:relative !important;
}

#widescreen .copy,
#widescreen .copy--wide,
#widescreen .copy-grid{
  font-size:var(--text) !important;
  line-height:var(--lh) !important;
  font-weight:500 !important;
  color:#000 !important;
}

#widescreen .copy p + p,
#widescreen .copy-grid p + p{
  margin-top:32px !important;
}

#widescreen .two-col{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
  column-gap:80px !important;
}

#widescreen .copy--wide{
  width:100% !important;
}

#widescreen .copy-grid{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
  column-gap:80px !important;
}

#widescreen .hero{
  height:calc(100vh - 140px) !important;
  min-height:560px !important;
}

#widescreen .hero picture{
  display:block !important;
  width:100% !important;
  height:100% !important;
}

#widescreen .hero img{object-position:center 40% !important;}

#widescreen .hero__shade{
  position:absolute !important;
  inset:0 !important;
  background:linear-gradient(153deg,rgba(0,0,0,.5) 18%,rgba(0,0,0,0) 54%) !important;
}

#widescreen .hero h1{
  position:absolute !important;
  top:17px !important;
  left:27px !important;
  right:20px !important;
  color:#fff !important;
  font-size:56px !important;
  line-height:58px !important;
  font-weight:700 !important;
  letter-spacing:-1.5px !important;
}

#widescreen .hero__author{
  position:absolute !important;
  left:24px !important;
  bottom:24px !important;
  color:#fff !important;
  font-size:18px !important;
  line-height:20px !important;
  font-weight:500 !important;
}

#widescreen .intro{margin-top:80px !important;align-items:center !important;}
#widescreen .copy--intro{min-height:643px !important;display:flex !important;flex-direction:column !important;justify-content:center !important;}
#widescreen .media-card--portrait{height:auto !important;aspect-ratio:630 / 643 !important;}
#widescreen .media-card--portrait img{object-position:center 31% !important;}
#widescreen .story-section{position:relative !important;}

#widescreen .section-title{
  height:257px !important;
  display:flex !important;
  align-items:center !important;
  position:relative !important;
}

#widescreen .section-title img{
  display:block !important;
  width:168px !important;
  height:227px !important;
  max-width:none !important;
  object-fit:contain !important;
  flex:0 0 auto !important;
  margin-left:0 !important;
  transform-origin:50% 55% !important;
  animation:fold8-alarm-vibrate 4.6s ease-in-out infinite !important;
  will-change:transform !important;
}

#widescreen .section-title h2{
  font-size:48px !important;
  line-height:50px !important;
  font-weight:700 !important;
  margin-left:6px !important;
  letter-spacing:-1px !important;
  color:#000 !important;
}

#widescreen .quick .section-title{margin-top:40px !important;}
#widescreen .quick .copy--wide{margin-top:-1px !important;}
#widescreen .two-col--quick{margin-top:27px !important;align-items:center !important;}
#widescreen .media-card--quick{height:auto !important;aspect-ratio:630 / 358 !important;}
#widescreen .media-card--quick img{object-position:center bottom !important;}
#widescreen .two-col--quick > .copy{min-height:368px !important;display:flex !important;flex-direction:column !important;justify-content:center !important;}
#widescreen .kids-section .section-title{margin-top:65px !important;}
#widescreen .two-col--kids{align-items:center !important;}
#widescreen .media-card--square{height:auto !important;aspect-ratio:630 / 643 !important;}
#widescreen .media-card--square img{object-position:center 15% !important;}
#widescreen .meetings-section .section-title{margin-top:68px !important;}
#widescreen .meetings-section .copy--wide{margin-top:-2px !important;}
#widescreen .media-card--meetings{margin-top:43px !important;}
#widescreen .media-card--meetings img{object-position:center 64% !important;}
#widescreen .meetings-after{margin-top:0 !important;padding-top:64px !important;}
#widescreen .camera-section .section-title{margin-top:61px !important;}
#widescreen .two-col--camera-top{align-items:center !important;}
#widescreen .media-card--camera-side{height:auto !important;aspect-ratio:630 / 486 !important;}
#widescreen .media-card--camera-side img{object-position:center 68% !important;}
#widescreen .copy-grid{margin-top:35px !important;align-items:start !important;}
#widescreen .copy-grid > p{margin-top:0 !important;align-self:start !important;}
#widescreen .copy-grid > p + p{margin-top:0 !important;}
#widescreen .media-card--cafe{margin-top:44px !important;}
#widescreen .media-card--cafe img{object-position:center 65% !important;}
#widescreen .review-section .section-title{margin-top:65px !important;}
#widescreen .review-intro{margin-top:-2px !important;}

#widescreen .review-images{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
  gap:50px !important;
  margin-top:42px !important;
}

#widescreen .review-images .media-card{height:auto !important;aspect-ratio:1 / 1 !important;}
#widescreen .review-after{margin-top:65px !important;}
#widescreen .evening-section .section-title{margin-top:64px !important;}
#widescreen .two-col--evening{align-items:center !important;}
#widescreen .media-card--evening{height:auto !important;aspect-ratio:630 / 739 !important;}
#widescreen .media-card--evening img{object-position:center 65% !important;}
#widescreen .footer-visual{margin-top:65px !important;margin-bottom:50px !important;}
#widescreen .footer-visual img{object-position:center bottom !important;}
#widescreen .footer-visual p{position:absolute !important;left:24px !important;bottom:24px !important;color:#fff !important;font-size:18px !important;line-height:20px !important;}
#widescreen .mobile-only,
#widescreen .mobile-copy{display:none !important;}

/* Preserve the exact Figma crops of the paired phone shots. */
@container widescreen (min-width:768px){
  #widescreen .media-card--meetings,
  #widescreen .media-card--cafe,
  #widescreen .footer-visual{
    width:100% !important;
    max-width:none !important;
    aspect-ratio:auto !important;
    height:min(calc((100vw - (var(--pad) * 2)) * 800 / 1340), 100vh) !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }

  #widescreen .review-images .media-card:first-child img{
    position:absolute !important;
    width:109.33% !important;
    height:auto !important;
    max-width:none !important;
    left:-9.33% !important;
    top:-34.12% !important;
    object-fit:initial !important;
    object-position:initial !important;
  }

  #widescreen .review-images .media-card:last-child img{
    position:absolute !important;
    width:107.86% !important;
    height:auto !important;
    max-width:none !important;
    left:-5.72% !important;
    top:-19.03% !important;
    object-fit:initial !important;
    object-position:initial !important;
  }

  #widescreen .parallax-media > img{
    transform:translate3d(0,var(--parallax-y,0px),0) scale(1.16) !important;
    transform-origin:center center !important;
    will-change:transform !important;
  }
}

/* Keep each time-card inside the article edge while retaining the Figma tilt. */
#widescreen .quick .section-title img{animation-delay:-.2s !important;}
#widescreen .kids-section .section-title img{animation-delay:-1s !important;}
#widescreen .meetings-section .section-title img{animation-delay:-1.8s !important;}
#widescreen .camera-section .section-title img{animation-delay:-2.6s !important;}
#widescreen .review-section .section-title img{animation-delay:-3.4s !important;}
#widescreen .evening-section .section-title img{animation-delay:-4.2s !important;}

@keyframes fold8-alarm-vibrate{
  0%,78%,100%{transform:translate3d(0,0,0) rotate(-8.56deg)}
  80%{transform:translate3d(-1.5px,0,0) rotate(-9.8deg)}
  82%{transform:translate3d(1.7px,-.3px,0) rotate(-7.25deg)}
  84%{transform:translate3d(-1.4px,.2px,0) rotate(-9.55deg)}
  86%{transform:translate3d(1.3px,0,0) rotate(-7.5deg)}
  88%{transform:translate3d(-.8px,0,0) rotate(-9.15deg)}
  90%{transform:translate3d(.6px,0,0) rotate(-8.05deg)}
  92%{transform:translate3d(0,0,0) rotate(-8.56deg)}
}

/* Text-only reveal; article photos themselves do not fade or hover. */
#widescreen.motion-ready .reveal-item,
.motion-ready #widescreen .reveal-item{
  opacity:0 !important;
  transform:translate3d(0,18px,0) !important;
  transition:opacity .65s ease,transform .65s cubic-bezier(.22,.61,.36,1) !important;
  transition-delay:var(--reveal-delay,0ms) !important;
  will-change:opacity,transform !important;
}
#widescreen.motion-ready .reveal-item.is-visible,
.motion-ready #widescreen .reveal-item.is-visible{
  opacity:1 !important;
  transform:translate3d(0,0,0) !important;
}
#widescreen.motion-ready .hero,
.motion-ready #widescreen .hero{
  opacity:0 !important;
  transform:scale(.995) !important;
  transition:opacity .75s ease,transform .9s cubic-bezier(.22,.61,.36,1) !important;
}
#widescreen.motion-ready .hero.is-visible,
.motion-ready #widescreen .hero.is-visible{
  opacity:1 !important;
  transform:scale(1) !important;
}

@container widescreen (max-width:767px){
  #widescreen .article{--radius:20px;--text:16px;--lh:normal;width:100% !important;padding:13px 9px 0 10px !important;overflow:hidden !important;}
  #widescreen .desktop-only{display:none !important;}
  #widescreen .two-col,
  #widescreen .copy-grid{display:flex !important;flex-direction:column !important;gap:0 !important;}
  #widescreen .copy{font-size:16px !important;line-height:normal !important;}
  #widescreen .desktop-copy{display:block !important;}
  #widescreen .copy p + p,
  #widescreen .copy-grid p + p{margin-top:19px !important;}
  #widescreen .hero{width:100% !important;height:calc(100svh - 140px) !important;min-height:560px !important;border-radius:20px !important;}
  #widescreen .hero img{object-position:center center !important;}
  #widescreen .hero__shade{display:none !important;}
  #widescreen .hero h1{top:17px !important;left:15px !important;right:17px !important;font-size:28px !important;line-height:30px !important;letter-spacing:-.6px !important;}
  #widescreen .hero__author{left:17px !important;bottom:21px !important;font-size:14px !important;line-height:18px !important;}
  #widescreen .intro{margin-top:41px !important;display:flex !important;flex-direction:column !important;}
  #widescreen .copy--intro{min-height:0 !important;display:block !important;width:100% !important;}
  #widescreen .media-card--portrait{order:2 !important;width:100% !important;aspect-ratio:1/1 !important;height:auto !important;margin-top:37px !important;}
  #widescreen .media-card--portrait img{object-position:center 28% !important;}
  #widescreen .section-title{width:100% !important;height:112px !important;}
  #widescreen .section-title img{width:90px !important;height:122px !important;margin-left:4px !important;object-fit:contain !important;}
  #widescreen .section-title h2{font-size:26px !important;line-height:28px !important;margin-left:1px !important;letter-spacing:-.4px !important;}
  #widescreen .quick .section-title{margin-top:30px !important;}
  #widescreen .quick > .copy--wide{display:block !important;width:100% !important;margin-top:20px !important;}
  #widescreen .two-col--quick{margin-top:35px !important;}
  #widescreen .media-card--quick{order:1 !important;width:100% !important;aspect-ratio:1/1 !important;height:auto !important;margin-top:0 !important;}
  #widescreen .two-col--quick > .copy{order:2 !important;display:block !important;width:100% !important;min-height:0 !important;margin-top:35px !important;}
  #widescreen .media-card--quick img{object-position:center 67% !important;}
  #widescreen .kids-section .section-title{margin-top:34px !important;}
  #widescreen .kids-section .section-title h2{width:274px !important;}
  #widescreen .two-col--kids > .copy{display:block !important;width:100% !important;margin-top:20px !important;}
  #widescreen .media-card--square{width:100% !important;aspect-ratio:1/1 !important;height:auto !important;margin-top:35px !important;}
  #widescreen .media-card--square img{object-position:center 18% !important;}
  #widescreen .meetings-section .section-title{margin-top:34px !important;}
  #widescreen .meetings-section .copy--wide{width:100% !important;margin-top:20px !important;}
  #widescreen .media-card--meetings{width:100% !important;aspect-ratio:1/1 !important;height:auto !important;margin-top:36px !important;}
  #widescreen .media-card--meetings img{object-position:center 62% !important;}
  #widescreen .meetings-after{width:100% !important;margin-top:35px !important;padding-top:0 !important;}
  #widescreen .camera-section .section-title{margin-top:34px !important;}
  #widescreen .two-col--camera-top > .copy{width:100% !important;margin-top:20px !important;}
  #widescreen .media-card--camera-side{width:100% !important;aspect-ratio:1/1 !important;height:auto !important;margin-top:35px !important;}
  #widescreen .media-card--camera-side img{object-position:center 72% !important;}
  #widescreen .copy-grid{width:100% !important;margin-top:35px !important;}
  #widescreen .copy-grid p + p{margin-top:19px !important;}
  #widescreen .media-card--cafe{width:100% !important;aspect-ratio:1/1 !important;height:auto !important;margin-top:35px !important;}
  #widescreen .media-card--cafe img{object-position:center 62% !important;}
  #widescreen .review-section .section-title{margin-top:34px !important;}
  #widescreen .review-section .section-title h2{width:274px !important;}
  #widescreen .review-intro{width:100% !important;margin-top:20px !important;}
  #widescreen .review-images{display:block !important;width:100% !important;margin-top:35px !important;}
  #widescreen .review-images .media-card{width:100% !important;aspect-ratio:1/1 !important;height:auto !important;}
  #widescreen .review-images .media-card:first-child img{object-position:40% 61% !important;}
  #widescreen .review-after{width:100% !important;margin-top:35px !important;}
  #widescreen .evening-section .section-title{margin-top:34px !important;}
  #widescreen .evening-section .section-title h2{width:274px !important;}
  #widescreen .two-col--evening .media-card--evening{order:1 !important;width:100% !important;aspect-ratio:1/1 !important;height:auto !important;margin-top:20px !important;}
  #widescreen .media-card--evening img{object-position:center 73% !important;}
  #widescreen .two-col--evening > .copy{order:2 !important;width:100% !important;margin-top:30px !important;}
  #widescreen .footer-visual{width:100% !important;aspect-ratio:1/1 !important;height:auto !important;margin-top:35px !important;margin-bottom:50px !important;}
  #widescreen .footer-visual img{object-position:center 74% !important;}
  #widescreen .footer-visual p{left:17px !important;bottom:15px !important;font-size:14px !important;line-height:18px !important;}
}

@media(prefers-reduced-motion:reduce){
  #widescreen .reveal-item,
  #widescreen .hero{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
    animation:none !important;
  }
  #widescreen .parallax-media > img{transform:none !important;will-change:auto !important;}
  #widescreen .section-title img{animation:none !important;transform:rotate(-8.56deg) !important;will-change:auto !important;}
}
