/* Light Meter Classic — the app's own palette, so the site and the app read as
   one thing: #ffcc00 on near-black, warnings in #ff9c6b. */

:root {
  --bg:        #0b0b0b;
  --panel:     #141414;
  --line:      #242424;
  --ink:       #f2f2f2;
  --ink-dim:   #9a9a9a;
  --ink-faint: #6f6f6f;
  --accent:    #ffcc00;
  --warm:      #ff9c6b;
  --measure:   38rem;
  --wide:      64rem;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 17px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

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

/* ---------------------------------------------------------------- chrome --- */

.masthead {
  border-bottom: 1px solid var(--line);
  background: rgba(11, 11, 11, .85);
  backdrop-filter: saturate(150%) blur(12px);
  position: sticky;
  top: 0;
  z-index: 10;
}

.masthead .inner {
  max-width: var(--wide);
  margin: 0 auto;
  padding: .9rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.wordmark {
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--ink);
  margin-right: auto;
}
.wordmark:hover { text-decoration: none; color: var(--accent); }

.masthead nav a {
  font-size: .95rem;
  color: var(--ink-dim);
}
.masthead nav a + a { margin-left: 1.25rem; }
.masthead nav a:hover { color: var(--accent); text-decoration: none; }

footer.site {
  border-top: 1px solid var(--line);
  margin-top: 5rem;
  padding: 2.5rem 1.25rem 4rem;
  color: var(--ink-faint);
  font-size: .9rem;
  text-align: center;
}
footer.site a { color: var(--ink-dim); }
footer.site a:hover { color: var(--accent); }
footer.site .links { margin-bottom: .9rem; }
footer.site .links a + a { margin-left: 1.25rem; }

/* ------------------------------------------------------------------ hero --- */

.hero {
  max-width: var(--wide);
  margin: 0 auto;
  padding: 5rem 1.25rem 3rem;
}

.hero h1 {
  font-size: clamp(2.2rem, 6vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -.03em;
  margin: 0 0 1rem;
}

.hero .lede {
  font-size: clamp(1.15rem, 2.4vw, 1.45rem);
  line-height: 1.45;
  color: var(--ink);
  max-width: 30ch;
  margin: 0 0 1.75rem;
}

.hero p {
  max-width: var(--measure);
  color: var(--ink-dim);
  margin: 0 0 1.1rem;
}

.rule {
  max-width: var(--wide);
  margin: 0 auto;
  padding: 0 1.25rem;
}
.rule hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 3rem 0 0;
}

/* -------------------------------------------------------------- features --- */

.feature {
  max-width: var(--wide);
  margin: 0 auto;
  padding: 4.5rem 1.25rem 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: center;
}

.feature h2 {
  font-size: clamp(1.5rem, 3.2vw, 2rem);
  line-height: 1.15;
  letter-spacing: -.02em;
  margin: 0 0 1rem;
}

.feature p { color: var(--ink-dim); margin: 0 0 1rem; max-width: var(--measure); }
.feature p:last-child { margin-bottom: 0; }
.feature strong { color: var(--ink); font-weight: 600; }

.pills {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.pills li {
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: 6px;
  padding: .35rem .75rem;
  font-size: .85rem;
  letter-spacing: .06em;
  color: var(--ink-dim);
}
.pills li.on {
  background: var(--accent);
  border-color: var(--accent);
  color: #101010;
  font-weight: 700;
}

/* The screenshot, framed just enough to read as a phone without pretending to
   be a photograph of one. */
.shot {
  justify-self: center;
  width: 100%;
  max-width: 280px;
  border: 1px solid var(--line);
  border-radius: 22px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .6);
}

@media (min-width: 46rem) {
  .feature {
    grid-template-columns: 1fr minmax(0, 300px);
    gap: 4rem;
    padding-top: 6rem;
  }
  .feature.flip .copy { order: 2; }
  .feature.flip .shot { order: 1; }
}

/* ----------------------------------------------------------------- prose --- */

/* The document pages get the same hero and rule as the front page, narrowed to
   the reading measure so every left edge on the page lines up. Without this
   they share the palette but not the shape, and read as a different site. */
.hero.doc, .rule.doc, .prose {
  max-width: var(--measure);
  margin-left: auto;
  margin-right: auto;
}

.hero.doc { padding-top: 4rem; padding-bottom: 2rem; }
.hero.doc h1 { font-size: clamp(2rem, 5vw, 2.8rem); }
.hero.doc .lede { margin-bottom: 1.25rem; max-width: none; }
.rule.doc hr { margin-top: 0; }

.prose { padding: 3.5rem 1.25rem 0; }

.prose h2 {
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 3rem 0 1rem;
}
.prose h2:first-child { margin-top: 0; }

.prose p, .prose li { color: var(--ink-dim); }
.prose p { margin: 0 0 1.1rem; }
.prose ul { padding-left: 1.15rem; margin: 0 0 1.1rem; }
.prose li { margin-bottom: .45rem; }
.prose strong { color: var(--ink); font-weight: 600; }

/* Questions as cards, echoing the panels the front page uses for its pills and
   screenshots, so the two pages share more than a colour. */
.qa {
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: 10px;
  padding: 1.25rem 1.35rem;
  margin-bottom: .85rem;
}
.qa h3 {
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 .6rem;
  letter-spacing: -.01em;
}
.qa p { margin: 0; }

.callout {
  border-left: 2px solid var(--accent);
  background: var(--panel);
  padding: 1.1rem 1.35rem;
  margin: 0 0 2rem;
  border-radius: 0 10px 10px 0;
}
.callout p { margin: 0; }

.muted { color: var(--ink-faint); }