/*
 * cantela.app: one stylesheet for every page.
 *
 * Colours are the app's own skies: Candy (src/theme/candy.ts), and Night Sky
 * (src/theme/night.ts) when the device is set to dark. The faces are the app's
 * own files, copied into /assets/fonts by scripts/site-build.mjs; body text is
 * the device's own sans, since only the bold weights of Nunito ship. Nothing
 * here, or anywhere on the site, loads from another origin.
 */

@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/Fraunces-SemiBold.ttf") format("truetype");
}

@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/Nunito-Bold.ttf") format("truetype");
}

/* Declared, and drawn by nothing yet: a browser only downloads a face a page uses. */
@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/assets/fonts/Nunito-ExtraBold.ttf") format("truetype");
}

/* ---- Candy ---- */

:root {
  color-scheme: light;

  /* backgroundGradient, top to bottom, and backgroundTints (lavender, mint) */
  --ground-1: #FFFFFF;
  --ground-2: #FFF0F6;
  --ground-3: #FFD9EA;
  --tint-1: #F1E6FF;
  --tint-2: #E4F7F2;

  --ink: #3A1F47;
  /* inkSecondary (#8A6A93) moved 30% toward ink: the token measures 3.6:1 on
     the pink foot of the ground, this measures 5.0:1. */
  --ink-secondary: #72547C;
  /* The accent never sets text on Candy (3.8:1 on white): it underlines and marks. */
  --accent: #E8407F;
  --positive: #34C9A0;

  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --rounded: "Nunito", ui-rounded, system-ui, sans-serif;
  --text: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ---- Night Sky ---- */

/* The app's faint star field is left out: drawn in CSS it repeats as a grid,
   and its dots land on the letters of a page of text. */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    --ground-1: #0E101F;
    --ground-2: #0E101F;
    --ground-3: #12142A;
    --tint-1: #161A33;
    --tint-2: #141B2E;

    --ink: #EFE6D2;
    --ink-secondary: rgba(239, 230, 210, 0.55);
    --accent: #E8407F;
    --positive: #34C9A0;
  }
}

/* ---- Ground and type ---- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background-color: var(--ground-2);
  color: var(--ink);
  font-family: var(--text);
  font-size: 1rem;
  line-height: 1.6;
  overflow-wrap: break-word;
}

/* The sky, held still behind the page as the app holds it behind a screen. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(62% 52% at 6% 100%, var(--tint-1), transparent),
    radial-gradient(52% 46% at 97% 97%, var(--tint-2), transparent),
    linear-gradient(var(--ground-1), var(--ground-2) 45%, var(--ground-3));
}

@media (min-width: 40em) {
  body {
    font-size: 1.0625rem;
  }
}

a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 0.09em;
  text-underline-offset: 0.2em;
}

a:hover {
  text-decoration-thickness: 0.15em;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* ---- Home: one calm screen ---- */

.home {
  display: flex;
  flex-direction: column;
}

.hero {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 36rem;
  margin: 0 auto;
  padding: 2.5rem 16px 1.5rem;
  text-align: center;
}

/* The mark's square carries air round the book for its glow; trim some of it. */
.hero-mark {
  width: clamp(8.5rem, 34vw, 10.5rem);
  margin: -0.75rem 0 -0.5rem;
}

.wordmark {
  margin: 0;
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(2.75rem, 2.1rem + 3.2vw, 3.75rem);
  line-height: 1.05;
  letter-spacing: -0.016em;
}

.promise {
  max-width: 22em;
  margin: 1.1rem 0 0;
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(1.1875rem, 1.05rem + 0.7vw, 1.4375rem);
  line-height: 1.35;
  text-wrap: balance;
}

.about {
  max-width: 31em;
  margin: 1rem 0 0;
  color: var(--ink-secondary);
  text-wrap: pretty;
}

.soon {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  margin: 1.75rem 0 0;
  color: var(--ink-secondary);
  font-family: var(--rounded);
  /* 700, not 800: the heavier face is 125 KB, too much for one small line. */
  font-weight: 700;
  font-size: 0.75rem;
  line-height: 1.4;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.soon::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--positive);
}

/* ---- Footer, on every page ---- */

.foot {
  padding-top: 0.5rem;
  padding-bottom: 1.25rem;
}

.home .foot {
  padding-inline: 16px;
}

.foot nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.5rem;
}

.home .foot nav {
  justify-content: center;
}

.foot a {
  display: inline-block;
  padding: 0.6rem 0.125rem;
  color: var(--ink-secondary);
  font-family: var(--rounded);
  font-weight: 700;
  font-size: 0.9375rem;
  text-decoration: none;
}

.foot a:hover,
.foot a[aria-current="page"] {
  color: var(--ink);
}

.foot a:hover {
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 0.12em;
}

/* ---- Pages: privacy, support, not found ---- */

.page {
  display: flex;
  flex-direction: column;
}

/* 32rem holds about 65 characters of body text a line. */
.wrap {
  width: 100%;
  max-width: calc(32rem + 32px);
  margin-inline: auto;
  padding-inline: 16px;
}

.top {
  padding-top: 1.25rem;
}

/* The wordmark as the logo sets it: the mark 0.95 of the type size tall, 0.3 of it away. */
.lockup {
  display: inline-flex;
  align-items: center;
  color: var(--ink);
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1;
  letter-spacing: -0.016em;
  text-decoration: none;
}

/* The mark's square carries air round the book: the margins put the book's
   ring on the page's edge and 0.3 of the type size from the name. They sit on
   the picture, since on the image they would shrink the box its max-width reads. */
.lockup picture {
  flex: none;
  margin: -4px 1px -4px -6px;
}

.lockup img {
  width: 30px;
  max-width: none;
}

.page main {
  flex: 1 0 auto;
  padding-top: 2rem;
  padding-bottom: 2.5rem;
}

.prose h1 {
  margin: 0 0 1rem;
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(2rem, 1.6rem + 2vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.prose h2 {
  margin: 2.25rem 0 0.5rem;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.3125rem;
  line-height: 1.25;
  text-wrap: balance;
}

.prose p,
.prose ul {
  margin: 0 0 1rem;
}

.prose ul {
  padding-left: 1.25rem;
}

.prose li {
  margin: 0.35rem 0;
  padding-left: 0.25rem;
}

.prose li::marker {
  color: var(--accent);
}

/* "Last updated", under the policy's title. */
.policy h1 + p {
  margin-bottom: 2rem;
  color: var(--ink-secondary);
  font-family: var(--rounded);
  font-weight: 700;
  font-size: 0.875rem;
}

@media print {
  body::before {
    display: none;
  }
}