/* Life So Far · lifesofar.app
   One design system for every page: a white page and quiet gray tiles (a
   near-black page in dark mode), system type, and the name outlined from
   XCharter beside its tile. No external requests and no web fonts.
   home.css adds the homepage's sections on top of this file. */

:root {
  color-scheme: light dark;
  --page: #ffffff;
  --tile: #f5f5f7;
  --tile-2: #ececf0;
  --ink: #1d1d1f;
  --ink-2: #6e6e73;
  --kraft: #8a6538;
  --rule: rgba(0, 0, 0, 0.1);
  --bezel: #1d1d1f;
  --bar: rgba(255, 255, 255, 0.78);
  --button: #1d1d1f;
  --button-ink: #ffffff;
  --shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.32);
  /* Older names, still used by the licenses page's own styles. */
  --amber: var(--kraft);
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --wrap: 1080px;
  --read: 700px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --c: 14.5px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --page: #0e0e10;
    --tile: #1c1c1e;
    --tile-2: #2c2c2e;
    --ink: #f5f5f7;
    --ink-2: #a1a1a6;
    --kraft: #d3b386;
    --rule: rgba(255, 255, 255, 0.12);
    --bezel: #2c2c2e;
    --bar: rgba(14, 14, 16, 0.72);
    --button: #f5f5f7;
    --button-ink: #1d1d1f;
    --shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.8);
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font: 17px/1.47 var(--sans);
  letter-spacing: -0.012em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; }
img, svg { display: block; }
img { max-width: 100%; height: auto; }
h1, h2, h3, p { margin: 0; }
h1, h2 { text-wrap: balance; }
p { text-wrap: pretty; }
.wrap { width: min(var(--wrap), calc(100% - 48px)); margin-inline: auto; }
.skip { position: absolute; left: 16px; top: -100px; z-index: 100; padding: 12px 16px; border-radius: 10px; background: var(--button); color: var(--button-ink); text-decoration: none; }
.skip:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--kraft); outline-offset: 3px; border-radius: 6px; }

/* The bar: the name beside its tile, three links, one button. */
.bar { position: sticky; top: 0; z-index: 20; background: var(--bar); -webkit-backdrop-filter: saturate(1.8) blur(20px); backdrop-filter: saturate(1.8) blur(20px); border-bottom: 1px solid var(--rule); }
.bar .wrap { display: flex; align-items: center; justify-content: space-between; height: 52px; }
.bar nav { display: flex; align-items: center; gap: 4px; font-size: 13px; }
.bar nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 11px; color: var(--ink-2); text-decoration: none; transition: color 0.2s; }
.bar nav a:hover { color: var(--ink); }
/* The name beside its tile, as the brand kit sets them: the tile 2.6 times the
   name's cap height (--c), 0.8 of it from the name, the capitals' middle on
   the tile's middle. The name is outlined from XCharter (assets/wordmark.svg). */
.brand { display: inline-flex; align-items: flex-start; min-height: 44px; padding-top: calc((44px - 2.6 * var(--c)) / 2); color: var(--ink); text-decoration: none; }
.brand picture { flex: none; }
.brand img { width: calc(2.6 * var(--c)); height: calc(2.6 * var(--c)); border-radius: 22.37%; box-shadow: 0 0 0 0.5px var(--rule); }
.brand svg { flex: none; width: calc(6.6205 * var(--c)); height: calc(1.1932 * var(--c)); margin: calc(0.6645 * var(--c)) 0 0 calc(0.76 * var(--c)); fill: currentColor; }

/* Buttons: one ink, a pill, a 44 point target. */
.btn { display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; min-height: 44px; padding: 0 22px; border-radius: 999px; background: var(--button); color: var(--button-ink); font: 500 17px/1 var(--sans); letter-spacing: -0.016em; text-decoration: none; transition: transform 0.25s var(--ease), opacity 0.2s; }
.btn:hover { opacity: 0.86; }
.btn:active { transform: scale(0.97); }
.bar .btn { position: relative; min-height: 30px; padding: 0 13px; margin-left: 8px; font-size: 12px; color: var(--button-ink); }
.bar .btn::before { content: ""; position: absolute; inset: -7px -2px; }
.bar nav a.btn:hover { color: var(--button-ink); }
.link { color: var(--kraft); text-decoration: none; }
.link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* The footer. */
.foot { margin-top: 120px; background: var(--tile); color: var(--ink-2); font-size: 13px; }
.foot .wrap { padding: 36px 0 30px; }
.foot .top { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; padding-bottom: 24px; border-bottom: 1px solid var(--rule); }
.foot .brand { --c: 12px; }
.foot .top p { margin-top: 10px; max-width: 30em; }
.foot nav { display: flex; flex-wrap: wrap; gap: 0 22px; }
.foot nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); text-decoration: none; }
.foot nav a:hover { text-decoration: underline; text-underline-offset: 3px; }
.foot .legal { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px; padding-top: 18px; }

/* Reading pages: privacy, terms, support, press, licenses. */
.doc { padding: 72px 0 0; }
.read { width: min(var(--read), calc(100% - 48px)); margin-inline: auto; }
.doc h1 { font: 600 clamp(36px, 6vw, 56px)/1.07 var(--display); letter-spacing: -0.03em; }
.doc .updated { color: var(--ink-2); font-size: 15px; margin: 14px 0 40px; }
.doc h2 { font: 600 clamp(24px, 3.4vw, 32px)/1.15 var(--display); letter-spacing: -0.022em; margin: 52px 0 14px; }
.doc h3 { font: 600 20px/1.25 var(--display); letter-spacing: -0.016em; margin: 32px 0 8px; }
.doc p, .doc li { color: var(--ink); font-size: 17px; line-height: 1.6; }
.doc p { margin: 0 0 16px; }
.doc a { color: var(--kraft); text-underline-offset: 3px; }
.doc ul, .doc ol { padding-left: 22px; margin: 0 0 18px; }
.doc li { margin: 8px 0; }
.doc li::marker { color: var(--ink-2); }
.doc strong { font-weight: 600; }
.doc em { font-style: normal; color: var(--ink-2); }
.doc code { font: 15px/1.4 ui-monospace, "SF Mono", Menlo, monospace; background: var(--tile); border-radius: 6px; padding: 1px 6px; }
.doc blockquote { margin: 0 0 24px; padding: 4px 0 4px 18px; border-left: 2px solid var(--kraft); color: var(--ink-2); }
.doc hr { border: 0; border-top: 1px solid var(--rule); margin: 44px 0; }
.callout { background: var(--tile); border-radius: 18px; padding: 20px 22px; margin: 24px 0; }
.callout p { margin: 0; }

/* Motion. Everything is visible without script or with Reduce Motion on;
   the page's script adds .motion to <html> only when motion is welcome, and
   marks each .reveal .is-in as it comes into view. */
.motion .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.9s var(--ease), transform 1.1s var(--ease); transition-delay: var(--delay, 0s); }
.motion .reveal.is-in { opacity: 1; transform: none; }
@media print {
  .motion .reveal { opacity: 1 !important; transform: none !important; }
  .bar, .skip { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

@media (max-width: 734px) {
  .wrap { width: calc(100% - 40px); }
  .bar nav a:not(.btn) { display: none; }
  .foot .top { flex-direction: column; }
  .doc { padding-top: 48px; }
  .read { width: calc(100% - 40px); }
}