/* GENERATED by landing/site/build.py from landing/site/site.css — DO NOT EDIT. */
@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("fonts/Newsreader.ttf") format("truetype"); }
@font-face { font-family: "Newsreader"; font-style: italic; font-weight: 200 800; font-display: swap; src: url("fonts/Newsreader-Italic.ttf") format("truetype"); }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("fonts/HankenGrotesk.ttf") format("truetype"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/IBMPlexMono-Regular.ttf") format("truetype"); }
@media (prefers-color-scheme: dark) {
  :root {
  /* surfaces + accent (the desktop has one surface: page = card) */
  --lh-page: #17130e;
  --lh-raised: #14110c;
  --lh-row-hover: #1b1712;
  --lh-selected: #201c17;
  --lh-row-pressed: #25211c;
  --lh-accent: #da6b2a;
  --lh-card: var(--lh-page);
  /* ramp */
  --lh-ink: #eae4df;
  --lh-ink-soft: #8d8883;
  --lh-muted: #6d6862;
  --lh-faint: #544f4a;
  --lh-faint-soft: #4d4843;
  --lh-faint-mid: #47433d;
  --lh-faintest: #423e38;
  --lh-ghost: #3c3732;
  --lh-on-ink: #000000;
  --lh-ink-rgb: 234 228 223;
  /* lines: registry alpha over this column's ink */
  --lh-separator-row-rule-foot-rule: rgba(234,228,223,.041);
  --lh-separator-light-calendar: rgba(234,228,223,.05);
  --lh-day-header-rule-wholly-empty-week: rgba(234,228,223,.079);
  --lh-nav-rule-group-rule: rgba(234,228,223,.088);
  --lh-card-border: rgba(234,228,223,.108);
  --lh-popover-border: rgba(234,228,223,.117);
  --lh-rule-strong-control-border: rgba(234,228,223,.131);
  --lh-day-header-rule-any-day-has-rows: rgba(234,228,223,.16);
  --lh-rule-row: var(--lh-separator-row-rule-foot-rule);
  --lh-rule-light: var(--lh-separator-light-calendar);
  --lh-rule-empty-week: var(--lh-day-header-rule-wholly-empty-week);
  --lh-nav-rule: var(--lh-nav-rule-group-rule);
  --lh-rule-strong: var(--lh-rule-strong-control-border);
  --lh-rule-section: var(--lh-day-header-rule-any-day-has-rows);
  /* area palette, turned for Linen: wheel -12.8788°, chroma × .9807 */
  --lh-area-terracotta: #a25f53;
  --lh-area-ochre: #9a6739;
  --lh-area-olive: #88712f;
  --lh-area-fern: #6c7c3d;
  --lh-area-jade: #498358;
  --lh-area-teal: #248577;
  --lh-area-harbour: #1b8292;
  --lh-area-denim: #3e7aa4;
  --lh-area-iris: #6170a9;
  --lh-area-amethyst: #7d67a1;
  --lh-area-mallow: #93608c;
  --lh-area-rose: #a05c70;
  --lh-area-none: var(--lh-muted);
  /* focus ring */
  --lh-focus-color: var(--lh-ink);
  }
}
/*
  getkontour.com — the page layer over tokens.css. Every value is a registry variable
  (--lh-*) or an ADDITION named --site-*, with its reason beside it. Same laws as
  landing/v2/shared/web.css: no shadow, no font beyond the three, no colour that is not a
  token, the accent never on links or headings.
*/

:root {
  color-scheme: light dark;
  --site-gutter: clamp(20px, 4vw, 44px);      /* web.css's gutter: band (20, the phone inset) to pane (44) */
  --site-top: clamp(44px, 9vw, 96px);         /* air above the title; pane (44) on a phone, a page-scale lead on a desk */
  --site-title-lh: 1.12;                      /* web.css's .web-h2 leading: heroDate is one line in the app, a title may wrap */
}

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

html {
  background: var(--lh-page);
  color: var(--lh-ink);
  font-family: var(--lh-serif);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
}

body { margin: 0; }

::selection { background: var(--lh-row-pressed); color: var(--lh-ink); }

:focus { outline: none; }
:focus-visible {
  outline: var(--lh-focus-width) solid var(--lh-focus-color);
  outline-offset: var(--lh-focus-offset);
}

a {                                                   /* a link in prose wears the section rule and keeps its ink */
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--lh-long-link-rule);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
  transition: text-decoration-color var(--lh-dur-arrive) var(--lh-ease-standard);
}
a:hover { text-decoration-color: currentColor; }

/* ---- masthead: the card label, alone ------------------------------------------------- */

.site-mast {
  max-width: calc(640px + 2 * var(--site-gutter));
  margin: 0 auto;
  padding: var(--lh-s-card) var(--site-gutter) 0;
}
.site-name {
  font-family: var(--lh-mono);
  font-size: 11px;                                    /* cardLabel */
  letter-spacing: .16em;
  color: var(--lh-ink-soft);
  text-decoration: none;
}

/* ---- the column: notes.reader's 640 measure -------------------------------------------- */

.site-column {
  max-width: calc(640px + 2 * var(--site-gutter));
  margin: 0 auto;
  padding: var(--site-top) var(--site-gutter) var(--lh-s-pane);
}

.site-title {                                         /* heroDate: Newsreader 500, -.015em, its 940 rung */
  margin: 0 0 var(--lh-s-section);
  font-family: var(--lh-serif);
  font-weight: 500;
  letter-spacing: -.015em;
  font-size: var(--lh-hero-date-940);
  line-height: var(--site-title-lh);
  text-wrap: balance;
}

/* ---- prose: notes.proseLongForm, block for block ---------------------------------------- */

.site-prose {
  font-size: var(--lh-long-px);
  line-height: var(--lh-long-lh);
  color: var(--lh-long-tone);
}
.site-prose p { margin: var(--lh-long-air-paragraph-above) 0 var(--lh-long-air-paragraph-below); }
.site-prose > p:first-child { color: var(--lh-ink-soft); }
.site-prose h2 {
  margin: var(--lh-long-air-h1-above) 0 var(--lh-long-air-h1-below);
  font-size: var(--lh-long-h1-px);
  font-weight: var(--lh-long-h1-weight);
  line-height: var(--lh-long-h1-lh);
}
.site-prose h3 {
  margin: var(--lh-long-air-h2-above) 0 var(--lh-long-air-h2-below);
  font-size: var(--lh-long-h2-px);
  font-weight: var(--lh-long-h2-weight);
  line-height: var(--lh-long-h2-lh);
}
.site-prose ul, .site-prose ol { margin: 0 0 var(--lh-long-air-paragraph-below); padding: 0; }
.site-prose ul { list-style: none; }
.site-prose ol { padding-left: var(--lh-long-ordered-indent); }
.site-prose li { margin: var(--lh-long-air-bullet-above) 0 var(--lh-long-air-bullet-below); }
.site-prose ul > li { position: relative; padding-left: var(--lh-long-bullet-indent); }
.site-prose ul > li::before {
  content: "•";
  position: absolute;
  left: 0;
  width: var(--lh-long-bullet-column);
  color: var(--lh-long-bullet-tone);
}
.site-prose ol > li::marker { color: var(--lh-long-bullet-tone); }
.site-prose strong { font-weight: 600; }
.site-prose code {
  font-family: var(--lh-mono);
  font-size: .82em;                                   /* codeRun's 14.5 against the 17.5 body */
}

/* ---- the placeholder at / --------------------------------------------------------------- */

.site-placeholder { padding-top: clamp(96px, 22vh, 220px); }   /* the name sits a third down, alone */
.site-line {
  margin: 0 0 var(--lh-s-card);
  font-size: var(--lh-long-px);
  line-height: var(--lh-long-lh);
  color: var(--lh-ink-soft);
}
.site-link {
  margin: 0;
  font-family: var(--lh-mono);
  font-size: 11px;                                    /* actionSecondary */
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* ---- /invite: two steps and the one button ---------------------------------------------- */

.site-prose [hidden] { display: none; }
.site-actions { margin: var(--lh-s-slot) 0 var(--lh-s-band); }
.site-button {                                        /* web.css's .web-button: the capture pill at target height, ink fill */
  display: inline-flex; align-items: center; justify-content: center;
  height: var(--lh-target);
  padding: 0 var(--lh-s-band);
  border: 0;
  border-radius: var(--lh-r-control);
  background: var(--lh-ink);
  color: var(--lh-on-ink);
  font-family: var(--lh-mono); font-weight: 400; font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--lh-dur-arrive) var(--lh-ease-standard);
}
.site-button:hover { background: var(--lh-ink-soft); }          /* web.css's addition: the app has no hover for an ink pill */
.site-button--quiet {                                 /* web.css's .web-button--quiet: the registry's bordered mono control */
  background: transparent;
  color: var(--lh-ink);
  border: 1px solid var(--lh-rule-strong);
}
.site-button--quiet:hover { background: var(--lh-row-hover); }
.site-code {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--lh-s-row);
}
.site-code code {
  overflow-wrap: anywhere;
  user-select: all;                                   /* one tap takes the whole code, for a paste into Settings */
}
.site-prose + .site-link { margin-top: var(--lh-s-section); }   /* the page's last line stands apart from the steps */