/* The light version of the site (THEME=light): white pages, black ink. Loaded after site.css, which stays the dark site.
   Four things stay black: the bar, the footer, the brand panel and the 404 page. The logo is drawn for black (a red Я and a
   white "!"), so those are its places. Each of them re-declares the dark palette, and everything written with the variables
   (site.css and this file) follows without a second rule. */

:root {
  --bg: #fff;
  --ink: #0a0a0c;
  --muted: #565660;
  --line: rgb(0 0 0 / 0.14);
}
.top, .foot, .panel-mark, .lost {
  --bg: #000;
  --ink: #fff;
  --muted: #a9a9b3;
  --line: rgb(255 255 255 / 0.16);
}
.top, .panel-mark, .lost { color: var(--ink); }
/* the footer and the 404 page take their black from the body in the dark site; here the body is white, so they paint it themselves */
.foot, .lost { background: var(--bg); }

:focus-visible { outline-color: var(--ink); }

.words li::before { background: var(--ink); }

/* ---- buttons --------------------------------------------------------------------------------- */
.button { border-color: color-mix(in srgb, var(--ink) 75%, transparent); color: var(--ink); }
.button:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.button-solid { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.button-solid:hover { background: color-mix(in srgb, var(--ink) 80%, var(--bg)); color: var(--bg); border-color: color-mix(in srgb, var(--ink) 80%, var(--bg)); }
.button-cta:hover { background: color-mix(in srgb, var(--ink) 80%, var(--bg)); color: var(--bg); border-color: color-mix(in srgb, var(--ink) 80%, var(--bg)); }

/* ---- the bar: always solid black, the page behind it is white (at the top of the home it would otherwise show through) ---- */
.top, .top.solid, body.inner .top {
  background: #000;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* ---- backdrops: the veil that lightens the part of the picture the text sits on is white here ---- */
.panel::before, .page-head::before {
  background:
    linear-gradient(90deg, rgb(255 255 255 / 0.9) 0%, rgb(255 255 255 / 0.62) 40%, rgb(255 255 255 / 0.06) 78%, transparent 100%),
    linear-gradient(0deg, rgb(255 255 255 / 0.7) 0%, transparent 42%);
}
.panel-right::before {
  background:
    linear-gradient(270deg, rgb(255 255 255 / 0.9) 0%, rgb(255 255 255 / 0.62) 40%, rgb(255 255 255 / 0.06) 78%, transparent 100%),
    linear-gradient(0deg, rgb(255 255 255 / 0.7) 0%, transparent 42%);
}
.panel-hero::before {
  background:
    linear-gradient(90deg, rgb(255 255 255 / 0.88) 0%, rgb(255 255 255 / 0.6) 34%, rgb(255 255 255 / 0.08) 62%, transparent 100%),
    linear-gradient(0deg, rgb(255 255 255 / 0.75) 0%, transparent 40%);
}
/* a photograph behind the title of a page: the veil is a little stronger on the text's side than the one the panels use */
.page-head:not(.page-head-scene)::before {
  background:
    linear-gradient(90deg, rgb(255 255 255 / 0.94) 0%, rgb(255 255 255 / 0.76) 42%, rgb(255 255 255 / 0.08) 78%, transparent 100%),
    linear-gradient(0deg, rgb(255 255 255 / 0.7) 0%, transparent 42%);
}
.page-head-scene::before { background: linear-gradient(0deg, rgb(255 255 255 / 0.98) 0%, rgb(255 255 255 / 0.9) 30%, rgb(255 255 255 / 0) 58%); }
.page-head-scene-side::before {
  background:
    linear-gradient(0deg, #fff 0, rgb(255 255 255 / 0) 84px),
    radial-gradient(ellipse 62% 70% at 6% 100%, rgb(255 255 255 / 0.94) 0%, rgb(255 255 255 / 0.78) 48%, rgb(255 255 255 / 0) 100%),
    linear-gradient(0deg, rgb(255 255 255 / 0.7) 0%, transparent 28%);
}
/* the banners of the inner pages are drawn white on black (scene.js): inverted, they are black ink on white */
.page-head-scene .bg-scene { filter: invert(1); }

/* ---- text over the backdrops ----------------------------------------------------------------- */
.hero-copy h1 { text-shadow: 0 0 30px rgb(255 255 255 / 0.9); }
.signature { color: rgb(10 10 12 / 0.9); text-shadow: 0 0 18px rgb(255 255 255 / 0.9); }
.hero-copy .lead { color: rgb(10 10 12 / 0.82); text-shadow: 0 0 18px rgb(255 255 255 / 0.9); }
.page-head .lead { color: rgb(10 10 12 / 0.82); }
.down { border-color: color-mix(in srgb, var(--ink) 50%, transparent); color: var(--ink); }
.down:hover { border-color: var(--ink); }

/* the line between two panels: a hairline in ink (the base file draws it white, for the dark panels) */
.panel-light + .panel, .panel + .panel-light { border-top-color: var(--line); }

/* ---- pages ----------------------------------------------------------------------------------- */
.steps li { border-top-color: color-mix(in srgb, var(--ink) 60%, transparent); }
.screen img { box-shadow: 0 22px 60px -28px rgb(0 0 0 / 0.4); }
.closing { background: var(--bg); }
.next:hover { color: var(--ink); }

@media (max-width: 960px) {
  .page-head-scene-side::before {
    background:
      linear-gradient(0deg, #fff 0, rgb(255 255 255 / 0) 84px),
      linear-gradient(0deg, rgb(255 255 255 / 0.95) 0%, rgb(255 255 255 / 0.7) 42%, rgb(255 255 255 / 0) 74%);
  }
  .panel-hero::before { background: linear-gradient(0deg, rgb(255 255 255 / 0.92) 0%, rgb(255 255 255 / 0.66) 48%, rgb(255 255 255 / 0.08) 82%); }
  /* a photograph behind text that now spans the whole width: the veil comes from below, where the text is */
  .panel-trust::before, .page-head:not(.page-head-scene)::before {
    background: linear-gradient(0deg, rgb(255 255 255 / 0.94) 0%, rgb(255 255 255 / 0.84) 42%, rgb(255 255 255 / 0.3) 74%, transparent 100%);
  }
}