/* Ring Sans © Ring LLC, supplied by Ring for this campaign only. */
@font-face {
  font-family: "Ring Sans";
  src: url("/assets/fonts/ring-sans-medium.woff2?v=830e63268a") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Ring Sans";
  src: url("/assets/fonts/ring-sans-light.woff2?v=17eab111e4") format("woff2");
  font-weight: 300;
  font-display: swap;
}

:root {
  --blue: #1998d5;
  --black: #000;
  --white: #fff;
  --font: "Ring Sans", system-ui, sans-serif;
  --column: 750px;
  --text-width: 30rem;
  --gutter: 40px;
  --nav-height: 64px;
  --medium: 500;
  --light: 300;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--black);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* No double-tap zoom on iOS (repeat taps on the doorbell and players); pinch zoom still works. */
  touch-action: manipulation;
}

body {
  margin: 0;
  overflow-x: clip;
  background: var(--black);
  color: var(--white);
  font-family: var(--font);
  font-weight: var(--medium);
  font-size: 16.6px;
  line-height: 21.8px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

[hidden] { display: none !important; }
img, svg { display: block; max-width: 100%; }
p, h1, h2, h3, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; }
a, button { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: 12px; top: -48px;
  z-index: 20;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--blue);
  color: var(--white);
  text-decoration: none;
}
.skip-link:focus { top: 12px; }

:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

/* ---------- Nav ---------- */

.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 10;
  height: calc(var(--nav-height) + env(safe-area-inset-top));
  padding-top: env(safe-area-inset-top);
  transition: background-color .25s ease, backdrop-filter .25s ease;
}
/* Dark shade behind the links over the hero, as in the concept (black to clear over 211 px,
   stops copied from the PSD's fade). Gives way to the solid bar once scrolled. */
.nav::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  z-index: -1;
  height: calc(211px + env(safe-area-inset-top));
  background: linear-gradient(rgb(0 0 0 / .94), rgb(0 0 0 / .62) 24%, rgb(0 0 0 / .28) 47%, rgb(0 0 0 / .08) 71%, transparent);
  pointer-events: none;
  transition: opacity .25s ease;
}
.nav.is-scrolled::before { opacity: 0; }
.nav.is-scrolled {
  background: rgb(0 0 0 / .82);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.nav nav {
  display: flex;
  justify-content: space-around;
  align-items: center;
  max-width: var(--column);
  height: var(--nav-height);
  margin: 0 auto;
  padding: 0 16px;
}
.nav a {
  padding: 10px 6px;
  font-size: 15.4px;
  line-height: 20px;
  text-decoration: none;
  white-space: nowrap;
}

section[id] { scroll-margin-top: var(--nav-height); }

/* ---------- Shared type ---------- */

.copy {
  max-width: var(--text-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
  text-align: center;
  box-sizing: content-box;
}
.copy--blue { color: var(--blue); }

.heading {
  font-size: 24.1px;
  line-height: 24.3px;
  letter-spacing: .01em;
  text-transform: uppercase;
  text-align: center;
  font-weight: var(--medium);
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 31px;
  padding: 6px 22px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  background: var(--blue);
  color: var(--white);
  font-size: 14.4px;
  line-height: 19px;
  text-decoration: none;
  transition: background-color .2s ease, transform .15s ease;
}
.button:hover { background: #2ba8e6; }
.button:active { transform: scale(.97); }

/* ---------- Hero ---------- */

/* The lettering sits above the house inside the image. The visual fades to black at the
   bottom and the intro text starts on top of it, as in the design (30 Sep). */
.hero { position: relative; }
.hero img {
  width: 100%;
  height: auto;
}
.hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 30%;
  background: linear-gradient(transparent, var(--black));
  pointer-events: none;
}
/* Text starts 373 px above the end of the 750 px wide visual. */
.intro { position: relative; margin-top: -49.7vw; }

/* ---------- Cases ---------- */

/* Positioned, so it paints above the hero where a short intro lets the heading reach into it. */
.cases { position: relative; margin-top: 48px; }
.section-head .heading { margin-bottom: 16px; text-wrap: balance; }

.case {
  max-width: var(--column);
  margin: 28px auto 0;
}
.case + .case { margin-top: 40px; }

/* Case name at the top of the visual. In one column the copy starts on the visual's black
   lower end (--art is where, as a share of the width); the image adds no height itself. */
.case__art { position: relative; }
.case__image { width: 100%; height: auto; }
@media (max-width: 999.98px) {
  .case { isolation: isolate; }
  .case__art { z-index: -1; padding-top: var(--art, 92.5%); }
  .case--2 .case__art { --art: 97.7%; }
  .case--3 .case__art { --art: 97%; }
  .case__image { position: absolute; inset: 0 0 auto; }
}

.case__head {
  position: absolute;
  inset: 5.2% 0 auto;
  font-weight: var(--medium);
  text-align: center;
}
.case__label {
  display: block;
  color: var(--blue);
  font-size: 18.7px;
  line-height: 25px;
  letter-spacing: .005em;
  text-transform: uppercase;
}
.case__title {
  display: block;
  font-size: 19px;
  line-height: 20px;
}

.case__body { text-align: center; }
.case--2 .case__body { --gutter: 36px; }

/* Case text: centred like the case name and the boxes. Light weight, a narrow column and
   balanced lines keep the shape even; the closing dare gets its own line in Medium. */
.case__body .copy {
  max-width: 21.5rem;
  padding-inline: 16px;
  font-weight: var(--light);
  font-size: 17.5px;
  line-height: 26px;
  text-wrap: balance;
}
.case__dare {
  display: block;
  margin-top: 10px;
  font-weight: var(--medium);
}

/* The main action of each case: clearly larger than the fact boxes above it. */
.case__body .button {
  min-height: 48px;
  margin-top: 24px;
  padding: 10px 30px;
  font-size: 17.5px;
  line-height: 22px;
  box-shadow: 0 6px 20px rgb(25 152 213 / .35);
}

/* Calendar choice under the case 3 button. */
.cal { position: relative; display: inline-block; }
.cal__menu {
  position: absolute;
  left: 50%;
  top: calc(100% + 10px);
  z-index: 5;
  width: 250px;
  translate: -50% 0;
  padding: 12px 8px 8px;
  border: 1px solid var(--blue);
  border-radius: 14px;
  background: #0b0b0c;
  box-shadow: 0 14px 40px rgb(0 0 0 / .7);
}
.cal__title { margin-bottom: 6px; color: #9fb4c2; font-size: 13px; line-height: 18px; font-weight: var(--light); }
.cal__menu a {
  display: block;
  padding: 11px 12px;
  border-radius: 9px;
  font-size: 16.6px;
  line-height: 22px;
  text-decoration: none;
}
.cal__menu a:hover, .cal__menu a:focus-visible { background: rgb(25 152 213 / .18); }
.cal__menu li + li { border-top: 1px solid #262629; }

/* Facts per case (the concept's info boxes), with an icon each: two to a row.
   An odd last one sits centred below. */
.facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  max-width: 400px;
  margin: 20px auto 0;
  padding: 0 16px;
}
.facts li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px 7px 10px;
  border: 1px solid rgb(25 152 213 / .45);
  border-radius: 12px;
  background: rgb(25 152 213 / .1);
  color: #d9eef9;
  font-size: 13.5px;
  line-height: 18px;
  text-align: left;
}
.facts li:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; }
.facts svg {
  flex: none;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: var(--blue);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Ring x Die drei ??? ---------- */

.ring { max-width: var(--column); margin: 48px auto 0; }

.ring__visual { width: 100%; height: auto; margin-top: 28px; }

.ring__copy { margin-top: 26px; --gutter: 33px; }

.quick-replies { margin-top: 34px; text-align: center; }
.quick-replies__title {
  font-size: 16.7px;
  line-height: 20.8px;
  font-weight: var(--medium);
}

/* Pick a detective, then one player for the chosen clip (the design's player, built live). */
.picks {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
}
.pick {
  min-width: 78px;
  padding: 7px 16px;
  border: 1px solid rgb(25 152 213 / .45);
  border-radius: 999px;
  background: rgb(25 152 213 / .1);
  color: #d9eef9;
  font-size: 14.4px;
  line-height: 19px;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, transform .15s ease;
}
.pick:hover { border-color: var(--blue); }
.pick:active { transform: scale(.97); }
.pick[aria-pressed="true"] { border-color: var(--blue); background: var(--blue); color: var(--white); }

.player {
  display: grid;
  grid-template-columns: 40px 1fr;
  column-gap: 14px;
  align-items: center;
  width: min(296px, calc(100% - 32px));
  margin: 14px auto 0;
  padding: 12px 14px 12px 12px;
  border: 1px solid #2c2c30;
  border-radius: 10px;
  background: #1c1c1f;
  text-align: left;
}
.player__toggle {
  position: relative;
  grid-row: 1 / 3;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--blue);
  cursor: pointer;
  transition: background-color .2s ease, transform .15s ease;
}
.player__toggle:hover { background: #2ba8e6; }
.player__toggle:active { transform: scale(.94); }
.player__toggle::before {
  content: "";
  position: absolute;
  left: 16px; top: 13px;
  border-style: solid;
  border-width: 7px 0 7px 11px;
  border-color: transparent transparent transparent var(--white);
}
.player.is-playing .player__toggle::before {
  left: 14px; top: 14px;
  width: 12px; height: 12px;
  border: 0;
  border-inline: 4px solid var(--white);
}
.player__meta { align-self: end; color: #b9b9bd; font-size: 11px; line-height: 14px; font-weight: var(--light); }
.player__title { align-self: start; font-size: 14.4px; line-height: 19px; }
.player__bar {
  grid-column: 1 / -1;
  height: 3px;
  margin-top: 10px;
  border-radius: 2px;
  background: #4b4b50;
  overflow: hidden;
}
.player__bar i {
  display: block;
  height: 100%;
  border-radius: 2px;
  background: var(--blue);
  transform-origin: 0 50%;
  transform: scaleX(0);
}

/* ---------- Books ---------- */

.books { max-width: var(--column); margin: 36px auto 0; }
.books__art { position: relative; }
.books__art img { width: 100%; height: auto; }
.books__title {
  position: absolute;
  inset: 28px 0 auto;
  white-space: nowrap;
}
.books__title img { display: inline-block; width: 46px; height: auto; margin: 0 2px; vertical-align: -3px; }
.books__copy { margin-top: 18px; text-wrap: balance; }
.books__lead { margin-bottom: 6px; font-size: 19px; line-height: 24px; }

/* ---------- Prizes ---------- */

.prizes { max-width: var(--column); margin: 34px auto 0; }
.prizes__visual { position: relative; max-width: var(--column); margin: 18px auto 0; }
.prizes__visual img { width: 100%; height: auto; }

/* Small blue labels with a pointer towards their product. */
.callout {
  position: absolute;
  padding: 5px 9px 6px;
  border-radius: 9px;
  background: var(--blue);
  color: var(--white);
  font-size: clamp(10.5px, 2.9vw, 14.4px);
  line-height: 1.22;
  text-align: left;
  text-wrap: balance;
  box-shadow: 0 4px 14px rgb(0 0 0 / .45);
}
.callout::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  background: inherit;
  rotate: 45deg;
}
.callout--box { left: 4%; top: 3%; max-width: 40%; }
.callout--box::after { left: 34%; bottom: -4px; }
.callout--bell { right: 8%; top: 12%; max-width: 45%; }
.callout--bell::after { right: 40%; bottom: -4px; }
.callout--music { left: 4%; bottom: 7%; max-width: 30%; }
.callout--music::after { right: -4px; top: calc(50% - 5px); }

/* ---------- Music ---------- */

.music { max-width: var(--column); margin: 31px auto 0; text-align: center; }
.music__title {
  font-size: 16.7px;
  line-height: 20px;
  letter-spacing: .01em;
  font-weight: var(--medium);
}
.music-card {
  width: min(313px, calc(100% - 2 * 32px));
  margin: 22px auto 0;
  padding: 14px 13px 13px;
  border: 1px solid #3a3a3e;
  border-radius: 10px;
  background: #232326;
  text-align: left;
  font-family: -apple-system, "Helvetica Neue", Arial, sans-serif;
}
.music-card__meta { color: #b9b9bd; font-size: 10.5px; line-height: 14px; font-weight: 400; }
.music-card__name { margin-top: 6px; font-size: 13px; line-height: 17px; font-weight: 700; }
.music-card__bar {
  display: block;
  height: 4px;
  margin-top: 13px;
  border-radius: 2px;
  background: linear-gradient(90deg, #1f8ff0 0 35%, #4b4b50 35%);
}

/* ---------- Footer ---------- */

.footer {
  max-width: var(--column);
  margin: 27px auto 0;
  padding-bottom: calc(32px + env(safe-area-inset-bottom));
  text-align: center;
}
.social { display: flex; justify-content: center; gap: 28px; }
.social a {
  display: grid;
  place-items: center;
  width: 43px;
  height: 43px;
  border-radius: 50%;
  background: var(--blue);
  color: var(--black);
  transition: background-color .2s ease;
}
.social a:hover { background: #2ba8e6; }
.social svg { width: 21px; height: 21px; fill: currentColor; }

.legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 24px;
  margin-top: 22px;
  font-size: 13px;
  line-height: 18px;
  font-weight: 300;
}
.legal a, .legal button {
  padding: 0;
  border: 0;
  background: none;
  color: #9a9a9e;
  font: inherit;
  text-decoration: none;
  cursor: pointer;
}
.legal a:hover, .legal button:hover { color: var(--white); }

/* Three notices side by side at every width. On phones they are three narrow columns
   in smaller type; from 760 px each takes its natural width. */
.credits {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 20px;
  padding: 0 16px;
  color: #77777b;
  font-size: 10.5px;
  line-height: 14px;
  font-weight: 300;
  text-wrap: balance;
}
@media (min-width: 760px) {
  .credits {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 36px;
    font-size: 12px;
    line-height: 17px;
  }
}

/* ---------- Cookie consent ---------- */

.consent {
  position: fixed;
  inset: auto 0 0;
  z-index: 30;
  max-width: var(--column);
  margin: 0 auto;
  padding: 20px 24px calc(18px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--blue);
  background: rgb(0 0 0 / .94);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  text-align: center;
}
.consent__title {
  font-size: 16.7px;
  line-height: 20.8px;
  letter-spacing: .01em;
  text-transform: uppercase;
  font-weight: var(--medium);
}
.consent__text {
  margin: 8px auto 16px;
  max-width: 34rem;
  color: #c9c9cd;
  font-weight: var(--light);
  font-size: 13.5px;
  line-height: 19px;
}
.consent__text a { color: var(--blue); }
.consent__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  max-width: 26rem;
  margin: 0 auto;
}
.consent__actions .button { min-height: 44px; }
.consent__link {
  margin-top: 10px;
  padding: 6px 10px;
  border: 0;
  background: none;
  color: #9a9a9e;
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.consent__link:hover { color: var(--white); }

.consent-dialog {
  width: calc(100% - 32px);
  max-width: 480px;
  padding: 24px;
  border: 1px solid var(--blue);
  border-radius: 12px;
  background: #0b0b0c;
  color: var(--white);
}
.consent-dialog::backdrop { background: rgb(0 0 0 / .72); }
.consent-dialog .consent__title { margin-bottom: 8px; text-align: center; }
.consent-dialog .consent__actions { grid-template-columns: 1fr; margin-top: 20px; }

.consent-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-top: 1px solid #262629;
  color: #c9c9cd;
  font-weight: var(--light);
  font-size: 13.5px;
  line-height: 19px;
}
.consent-option__name {
  display: block;
  margin-bottom: 3px;
  color: var(--white);
  font-weight: var(--medium);
  font-size: 15px;
}
.consent-option__always { flex: none; color: var(--blue); font-size: 12px; }

.switch {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  flex: none;
  width: 44px;
  height: 26px;
  margin: 0;
  border-radius: 999px;
  background: #3a3a3e;
  cursor: pointer;
  transition: background-color .2s ease;
}
.switch::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--white);
  transition: transform .2s ease;
}
.switch:checked { background: var(--blue); }
.switch:checked::before { transform: translateX(18px); }

/* ---------- Amazon Music embed ---------- */

.music-card__consent { margin-top: 12px; color: #b9b9bd; font-size: 10.5px; line-height: 14px; }
.music-card__load { margin-top: 10px; font-family: var(--font); }
.music-embed {
  display: block;
  width: min(480px, calc(100% - 64px));
  height: 352px;
  margin: 22px auto 0;
  border: 0;
  border-radius: 10px;
}

/* ---------- Legal pages ---------- */

.page {
  max-width: 42rem;
  margin: 0 auto;
  padding: calc(var(--nav-height) + 24px) 24px 48px;
  font-weight: 300;
  font-size: 15px;
  line-height: 1.55;
}
.page h1 { font-size: 24.1px; line-height: 1.2; font-weight: var(--medium); text-transform: uppercase; margin-bottom: 24px; }
.page h2 { font-size: 16.6px; font-weight: var(--medium); margin: 24px 0 6px; }
.page p + p { margin-top: 10px; }
.page a { color: var(--blue); }
.page__back { display: inline-block; margin-top: 32px; }

/* ---------- Desktop (secondary format) ---------- */

@media (min-width: 800px) {
  .hero img {
    aspect-ratio: 1782 / 1481;
    max-height: 100svh;
    object-fit: cover;
    object-position: 50% 0;
  }
  .intro { margin-top: -150px; }
  .case__image, .ring__visual, .books__art img, .prizes__visual img {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  }
}

/* Wide screens: visual and text side by side, so the page uses the width and gets shorter. */
@media (min-width: 1000px) {
  :root { --wide: 1120px; }
  .intro, .section-head .copy { --text-width: 44rem; }

  .case, .books {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    column-gap: 16px;
    max-width: var(--wide);
  }
  .case--2 .case__art { order: 2; }
  .books__copy { margin-top: 0; }

  .ring {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 16px;
    max-width: var(--wide);
  }
  .ring .section-head { grid-column: 1 / -1; }
  .ring__visual { grid-row: 2 / 4; align-self: center; }
  .ring__copy { align-self: end; margin-top: 0; }
  .quick-replies { align-self: start; }

  .footer { max-width: var(--wide); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}