/* RavenFix holding page.
   The name is set in IBM Plex Sans (OFL 1.1, /fonts/plex-sans-1.1.0/OFL.txt): IBM's own Latin1 woff2 files from the
   @ibm/plex-sans 1.1.0 release, unmodified and served from this site, so the page makes no third-party requests. */

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 600;
  font-display: block;
  src: url("/fonts/plex-sans-1.1.0/IBMPlexSans-SemiBold-Latin1.woff2") format("woff2");
  unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014,
    U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+FB01-FB02;
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/plex-sans-1.1.0/IBMPlexSans-Regular-Latin1.woff2") format("woff2");
  unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014,
    U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+FB01-FB02;
}

/* The launch film's stage: warm cream, deep ink, soft warm grey. Dark mode uses the app's dark ink surfaces and the
   mark's own dark drawing (brand/symbol-dark.svg). */
:root {
  color-scheme: light dark;
  --bg: #f5f0e6;
  --bg-light: #faf6ee;
  --bg-edge: #efe8da;
  --ink: #16202a;
  --soft: #65615b;
  --quiet: #6f6a62;
  --select: rgba(10, 106, 143, 0.18);

  /* The mark's drawn height (its ink, without the file's clear space). Everything in the lockup follows from it. */
  --h: clamp(40px, 15vw, 88px);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #10171e;
    --bg-light: #16202a;
    --bg-edge: #0c1217;
    --ink: #e4e9ee;
    --soft: #aeb8c3;
    --quiet: #8894a1;
    --select: rgba(63, 169, 214, 0.3);
  }
}

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

html {
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: radial-gradient(120% 85% at 50% 45%, var(--bg-light) 0%, var(--bg) 55%, var(--bg-edge) 100%);
  color: var(--ink);
  font-family: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--select);
}

/* The name and its descriptor sit at the true centre, like the film's end card; the note hangs below them. */
.hold {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32px 16px;
}

/* An empty space above the card and the note below it share the height equally, so the card is centred; on a short
   screen the note keeps its own height and the space above gives way first. */
.hold::before {
  content: "";
  flex: 1 1 0;
}

.card {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* The lockup, as the brand draws it (docs/UI-GUIDELINES.md, "Brand"): capitals 26 units tall against the mark's 48,
   centred on the mark, 0.42 of the mark's height after it, tracked by 6% of the cap height. Plex's cap height is
   0.698 em, so the font size is 26/48 / 0.698 = 0.776 of the mark. */
.lockup {
  margin: 0;
  display: flex;
  align-items: center;
  gap: calc(var(--h) * 0.42);
  font-size: calc(var(--h) * 0.776);
  font-weight: 600;
  line-height: 1;
}

.lockup a {
  display: flex;
  align-items: center;
  gap: inherit;
  color: inherit;
  text-decoration: none;
  border-radius: 4px;
}

.lockup a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 8px;
}

/* symbol.svg keeps a sixth of the mark's height as clear space on every side; the negative margin lets the layout
   measure the mark by its ink while the file is used exactly as drawn. */
.mark {
  display: block;
  width: calc(var(--h) * 4 / 3);
  height: calc(var(--h) * 4 / 3);
  margin: calc(var(--h) / -6);
}

.lockup picture {
  display: block;
  flex: none;
}

/* The name is measured by its ink, as the drawn lockup is: the R's left side bearing (0.082 em) and, after the x, its
   side bearing and the last letter's tracking (0.061 em) are taken back. With line-height 1, Plex's caps sit about
   0.03 em below the line's middle (ascent 1.025, descent 0.275, caps 0.698), so the name moves up to centre its
   capitals on the mark. Checked against brand/lockup.svg: within half a pixel at a 120 px mark. */
.name {
  display: block;
  letter-spacing: 0.0419em;
  margin: 0 -0.061em 0 -0.082em;
  transform: translateY(-0.032em);
  font-kerning: normal;
  white-space: nowrap;
}

.descriptor {
  margin: calc(var(--h) * 0.4) 0 0;
  font-weight: 400;
  font-size: max(1rem, calc(var(--h) * 0.217));
  letter-spacing: 0.01em;
  line-height: 1.3;
  color: var(--soft);
}

.note {
  flex: 1 1 0;
  margin: 0;
  padding-top: max(48px, calc(var(--h) * 1.05));
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
  color: var(--quiet);
  text-align: center;
}

.note a {
  color: var(--ink);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.note a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
  border-radius: 2px;
}