/* The Meeting Transcriber site, in the app's style: a page of a stenographer's pad. Tan paper, ruled
   lines the type sits on, blue-black ink, and one red rule. Red means recording, nowhere else. */

@font-face {
  font-family: "Geist";
  src: url("fonts/geist.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --paper: #efe6d2;
  --band: #e3d7bc;
  --rule: #d3c5a5;
  --ink: #1d2b3a;
  --ink-soft: #5d6b72;
  --red: #c8323c;
  --line: 32px; /* the ruling; body text sits one line per rule */
  --gutter: clamp(20px, 5vw, 64px);
  --font: "Geist", system-ui, -apple-system, sans-serif;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #1a1712;
    --band: #12100c;
    --rule: #322c22;
    --ink: #ece4d4;
    --ink-soft: #a59c8a;
    --red: #e4575f;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 17px/var(--line) var(--font);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 6px; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, p, ul, ol { margin: 0; }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 var(--gutter); }

/* Ruled paper: a rule at the bottom of every line. */
.ruled {
  background-image: repeating-linear-gradient(to bottom, transparent 0 calc(var(--line) - 1px), var(--rule) calc(var(--line) - 1px) var(--line));
}

/* ── Masthead ─────────────────────────────────────────────────────────────── */

.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
  padding: 0 var(--gutter);
  background: var(--band);
}
.brand { display: inline-flex; align-items: center; gap: 12px; font-weight: 600; font-size: 17px; text-decoration: none; white-space: nowrap; }
.brand img { width: 36px; height: 36px; filter: drop-shadow(0 1px 2px color-mix(in srgb, var(--ink) 30%, transparent)); }
.quiet-link { color: var(--ink-soft); font-size: 15px; font-weight: 500; text-decoration: none; }
.quiet-link:hover { color: var(--ink); text-decoration: underline; }

/* ── Hero: the headline written on the ruling ─────────────────────────────── */

.hero { padding-top: calc(var(--line) * 2.5); overflow: hidden; }
/* The headline is the page's title, above the ruling, like the top band of a steno page. */
h1 {
  font-size: clamp(44px, 7.4vw, 92px);
  line-height: 1.02;
  font-weight: 600;
  letter-spacing: -0.035em;
  padding-bottom: calc(var(--line) * 1.25);
}
.hero .ruled { padding: var(--line) 0; border-top: 2px solid var(--rule); } /* one ruled line below the trace */
/* Body text sits on the rules: the rule is the bottom of each line, nudged up under the baseline. */
.lede { max-width: 60ch; color: var(--ink); font-size: 19px; position: relative; top: 7px; }

/* Whole ruled lines tall (two, or three on phones), so the ruling below always ends on a rule. */
.get { display: flex; align-items: center; gap: 0 20px; min-height: calc(var(--line) * 2); margin-top: var(--line); }
.button {
  display: inline-flex;
  align-items: center;
  height: 52px;
  padding: 0 26px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-size: 17px;
  font-weight: 600;
  text-decoration: none;
}
.button:hover { background: color-mix(in srgb, var(--ink) 86%, var(--red)); }
.fine { color: var(--ink-soft); font-size: 14px; }
/* The version line sits on a rule: the first line of the download row, nudged down onto its rule. */
.get .fine { align-self: flex-start; line-height: var(--line); position: relative; top: 9px; }

/* The voice trace, drawn once from left to right as the page opens. */
.trace { display: block; width: 100%; height: calc(var(--line) * 4); margin-top: calc(var(--line) * 2); }
.trace .base { fill: var(--rule); }
.trace .ink { fill: var(--ink); }
.trace .dot { fill: var(--red); }
@media (prefers-reduced-motion: no-preference) {
  .trace .ink { clip-path: inset(0 100% 0 0); animation: write 2.6s cubic-bezier(0.45, 0, 0.25, 1) 0.3s forwards; }
  .trace .dot { opacity: 0; animation: appear 0.3s ease 2.8s forwards; }
}
@keyframes write { to { clip-path: inset(0 0 0 0); } }
@keyframes appear { to { opacity: 1; } }

/* ── The app window ───────────────────────────────────────────────────────── */

.shot { padding: var(--line) var(--gutter) calc(var(--line) * 3); }
.window {
  position: relative;
  max-width: 1120px;
  margin: 0 auto;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
  box-shadow: 0 30px 80px -30px color-mix(in srgb, var(--ink) 45%, transparent);
  background: var(--paper);
}
/* The screenshot leaves room for the window's traffic lights; draw them where macOS puts them. Sizes are in the
   app window's own pixels (it's 980 wide), scaled to the screenshot's width on screen, so they shrink with it and
   always stop short of the title. */
.window { container-type: inline-size; }
.lights {
  --app-px: calc(100cqw / 980);
  position: absolute;
  top: calc(24 * var(--app-px));
  left: calc(20 * var(--app-px));
  display: flex;
  gap: calc(8 * var(--app-px));
  z-index: 1;
}
.lights i { width: calc(12 * var(--app-px)); height: calc(12 * var(--app-px)); border-radius: 50%; background: #ec6a5e; }
.lights i:nth-child(2) { background: #f4bf4f; }
.lights i:nth-child(3) { background: #61c554; }

/* ── What it does: either side of the red rule, like the app ─────────────── */

.pad {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  max-width: 1120px;
  margin: 0 auto;
  padding: calc(var(--line) * 2) 0;
}
.side { padding: 0 var(--gutter); }
.side + .side { border-left: 2px solid var(--red); }
h2 { font-size: 20px; line-height: var(--line); font-weight: 600; letter-spacing: -0.01em; }
.side ul {
  list-style: none;
  padding: 0;
  margin-top: var(--line);
  background-image: repeating-linear-gradient(to bottom, transparent 0 calc(var(--line) - 1px), var(--rule) calc(var(--line) - 1px) var(--line));
}
.side li { max-width: 46ch; }
.side li + li { margin-top: var(--line); }

/* ── Chabi and install ────────────────────────────────────────────────────── */

.plan, .install { padding-top: calc(var(--line) * 2); padding-bottom: calc(var(--line) * 2); border-top: 1px solid var(--rule); }
.plan p, .install p { max-width: 64ch; margin-top: var(--line); }
.plan p + p { margin-top: calc(var(--line) / 2); }
.plan a { font-weight: 600; }

/* A real sequence, so it's numbered. */
.install ol { list-style: none; counter-reset: step; padding: 0; margin-top: var(--line); max-width: 68ch; }
.install li { counter-increment: step; position: relative; padding-left: 40px; }
.install li + li { margin-top: calc(var(--line) / 2); }
.install li::before { content: counter(step); position: absolute; left: 0; color: var(--red); font-weight: 600; font-variant-numeric: tabular-nums; }
.file { font-weight: 600; }

footer { padding-top: var(--line); padding-bottom: calc(var(--line) * 2); border-top: 1px solid var(--rule); color: var(--ink-soft); font-size: 15px; }

/* ── Phones: one column, the red rule becomes a divider ───────────────────── */

@media (max-width: 760px) {
  body { font-size: 16px; }
  .masthead .quiet-link { display: none; } /* the hero's button is right below */
  .lede { font-size: 17px; }
  .get { display: grid; justify-items: start; }
  .get .button { margin: 6px 0; } /* 52 + 12 = two lines */
  h1 { padding-bottom: var(--line); }
  .trace { height: calc(var(--line) * 3); margin-top: var(--line); }
  .pad { grid-template-columns: 1fr; padding: var(--line) 0; }
  .side + .side { border-left: 0; border-top: 2px solid var(--red); margin-top: var(--line); padding-top: var(--line); }
}