/* The launch page's own styles.
 *
 * WHAT THIS FILE IS NOT. It is not a theme for the report. The sample
 * report pages load `assets/report.css` -- a verbatim copy of
 * `demo/static/style.css` -- and this file after it, and this file adds only
 * the landing-page furniture and a small number of overrides that are marked
 * as such. The report must look on this site exactly as it looks in the
 * application, because the whole point of showing it is that it is the real
 * thing.
 *
 * MOBILE FIRST. Every rule below is the phone layout; the two media queries
 * at the foot widen it. The report's own stylesheet already handles its
 * tables, which is most of the hard part.
 */

:root {
  --ink: #16140f;
  --ink-soft: #55504a;
  --ink-faint: #817a71;
  --paper: #fbf8f3;
  --paper-raised: #ffffff;
  --line: #e2dcd2;
  --accent: #7a4b1e;
  --accent-soft: #f2e6d8;
  --good: #3f6b4a;
  --poor: #8a3b32;
  --maxw: 44rem;
}

* { box-sizing: border-box; }

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

body.launch {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.6 ui-serif, Georgia, "Iowan Old Style", "Times New Roman", serif;
}

body.launch a { color: var(--accent); }

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 1.1rem;
}

/* ------------------------------------------------------------- the mast */

.mast {
  padding: 2.6rem 0 1.4rem;
  border-bottom: 1px solid var(--line);
}

.wordmark {
  font-size: 1.9rem;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0;
  font-weight: 600;
}

.wordmark-ta {
  margin: 0.3rem 0 0;
  font-size: 1.05rem;
  color: var(--ink-faint);
  /* No font is loaded for the Tamil script, for the same reason the
   * application loads none: this page makes no outbound request. If the
   * machine has no Tamil face the line comes out as boxes, which is a
   * visible failure rather than a silent one. */
  font-family: "Nirmala UI", "Latha", "Tamil Sangam MN", "Noto Sans Tamil",
               sans-serif;
}

/* The wordmark is a link back to the front page on every page but that one.
 * THIS IS A STYLESHEET RULE AND NOT A style="" ATTRIBUTE, and it was the
 * second kind until it reached production. The site is served with
 * `style-src 'self'` (see netlify.toml), which blocks inline style
 * attributes -- so the attribute shipped, was refused by the browser, and
 * the wordmark rendered as an underlined link. It worked locally because
 * python -m http.server sends no CSP. build.py now rejects the attribute. */
/* `.launch .wordmark a`, not `.wordmark a`: `body.launch a` above sets the
 * accent colour on every link, and at one class to two elements it beats a
 * single-class rule. Two classes here take it. The wordmark should read as
 * the wordmark, not as a link that happens to be large. */
.launch .wordmark a { color: inherit; text-decoration: none; }

.mast .domain {
  margin: 0.55rem 0 0;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-family: ui-sans-serif, system-ui, sans-serif;
}

/* ------------------------------------------------------------- sections */

.launch section { padding: 2.2rem 0; border-bottom: 1px solid var(--line); }
.launch section:last-of-type { border-bottom: 0; }

.launch h2 {
  font-size: 1.35rem;
  line-height: 1.25;
  margin: 0 0 0.9rem;
  font-weight: 600;
}

.launch h3 {
  font-size: 1.05rem;
  margin: 1.6rem 0 0.5rem;
  font-weight: 600;
}

.launch p { margin: 0 0 1rem; }

.lede {
  font-size: 1.18rem;
  line-height: 1.5;
}

.quiet {
  color: var(--ink-soft);
  font-size: 0.93rem;
}

.smallcaps {
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 0.6rem;
}

/* A pulled-out sentence from the project's own files. Not a testimonial;
 * there are none on this page and will not be until there is something
 * true to quote. */
blockquote.ours {
  margin: 1.2rem 0;
  padding: 0.9rem 1.1rem;
  background: var(--accent-soft);
  border-left: 3px solid var(--accent);
  font-size: 0.97rem;
}
blockquote.ours p:last-child { margin-bottom: 0; }
blockquote.ours cite {
  display: block;
  margin-top: 0.6rem;
  font-size: 0.8rem;
  font-style: normal;
  color: var(--ink-soft);
  font-family: ui-sans-serif, system-ui, sans-serif;
}

/* ------------------------------------------------------- measured figures */

.figures {
  list-style: none;
  padding: 0;
  margin: 1.2rem 0 0;
  display: grid;
  gap: 0.1rem;
  grid-template-columns: 1fr;
}

.figures li {
  display: flex;
  gap: 0.8rem;
  align-items: baseline;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--line);
}
.figures li:last-child { border-bottom: 0; }

.figures .n {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: 1.05rem;
  min-width: 4.6rem;
  text-align: right;
  flex: 0 0 auto;
}
.figures .n.absent { color: var(--ink-faint); font-weight: 400; }
.figures .what { flex: 1 1 auto; }
.figures .what small { display: block; color: var(--ink-faint); font-size: 0.8rem; }

/* The uncomfortable half of the figures, drawn the same size as the
 * flattering half. Drawing them smaller would be the whole problem. */
.figures.unflattering .n { color: var(--poor); }

/* --------------------------------------------------------------- samples */

.samples {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  margin: 1.2rem 0 0;
  padding: 0;
  list-style: none;
}

.sample-card {
  display: block;
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 1rem 1.05rem;
  text-decoration: none;
  color: inherit;
}
.sample-card:hover, .sample-card:focus-visible {
  border-color: var(--accent);
  outline: none;
}
.sample-card h3 { margin: 0 0 0.15rem; font-size: 1.05rem; }
.sample-card .born {
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 0.78rem;
  color: var(--ink-faint);
  margin: 0 0 0.7rem;
}
.sample-card dl {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.15rem 0.7rem;
  font-size: 0.87rem;
}
.sample-card dt { color: var(--ink-faint); }
.sample-card dd { margin: 0; }
.sample-card .go {
  display: inline-block;
  margin-top: 0.85rem;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 0.85rem;
  color: var(--accent);
  font-weight: 600;
}

/* A call to action. Shares the waitlist submit button's shape, because it
 * is the same promise in a different place and two different "primary
 * buttons" on one page is a page that has not decided what it wants. */
.cta { margin: 1.4rem 0 0.6rem; }

/* `.launch a.button`, not `a.button`. SECOND TIME THIS EXACT TRAP: the
 * `body.launch a` rule above sets the accent colour on every link, and at
 * one class to two elements it beats any single-class selector. Written as
 * `a.button` the label came out accent-brown on an accent-brown background
 * — a solid block with no visible text, which a screenshot catches and a
 * contrast checker would not, because the colours it compares are the ones
 * the rule INTENDED. Anything here that restyles a link needs two classes. */
.launch a.button {
  display: inline-block;
  padding: 0.8rem 1.35rem;
  font: 600 1rem/1 ui-sans-serif, system-ui, sans-serif;
  background: var(--accent);
  color: #fff;
  border-radius: 5px;
  text-decoration: none;
}
.launch a.button:hover,
.launch a.button:focus-visible { background: #5f3a16; }

/* ----------------------------------------------------------- the video */

/* CLICK TO PLAY, AND NOTHING LOADS BEFORE THE CLICK. The slot holds a
 * poster and a button; the <video> element is created by JavaScript on the
 * click. Nothing third-party is embedded, so there is no request to anyone
 * before the visitor asks for one -- and when the file is absent the slot
 * removes itself (see assets/video.js). */
.videoslot {
  margin: 1.2rem 0 0;
  background: #1b1915;
  border-radius: 6px;
  overflow: hidden;
  position: relative;
  aspect-ratio: 16 / 9;
}
.videoslot img, .videoslot video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.videoslot button.play {
  position: absolute;
  inset: 0;
  width: 100%;
  border: 0;
  background: rgba(16, 14, 11, 0.32);
  color: #fff;
  font: 600 1rem/1.2 ui-sans-serif, system-ui, sans-serif;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
}
.videoslot button.play:hover { background: rgba(16, 14, 11, 0.5); }
.videoslot button.play .disc {
  width: 3rem; height: 3rem;
  border-radius: 50%;
  background: #fff;
  color: #16140f;
  display: grid;
  place-items: center;
  font-size: 1.1rem;
}

/* --------------------------------------------------------- the waitlist */

.waitlist {
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 1.15rem;
}

.waitlist form { margin: 0; }

.waitlist label {
  display: block;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
}

.waitlist input[type="email"] {
  width: 100%;
  padding: 0.7rem 0.75rem;
  font: inherit;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--paper);
  color: inherit;
}
.waitlist input[type="email"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.waitlist button[type="submit"] {
  margin-top: 0.75rem;
  width: 100%;
  padding: 0.75rem 1rem;
  font: 600 1rem/1 ui-sans-serif, system-ui, sans-serif;
  background: var(--accent);
  color: #fff;
  border: 0;
  border-radius: 5px;
  cursor: pointer;
}
.waitlist button[type="submit"]:hover { background: #5f3a16; }

.waitlist .collects {
  margin: 1rem 0 0;
  padding: 0.85rem 0 0;
  border-top: 1px solid var(--line);
  font-size: 0.87rem;
  color: var(--ink-soft);
}
.waitlist .collects ul { margin: 0.4rem 0 0; padding-left: 1.1rem; }
.waitlist .collects li { margin: 0.2rem 0; }

/* Netlify's honeypot field. Hidden from sight and from assistive tech,
 * which is what the host's own documentation asks for. */
.hp { position: absolute; left: -9999px; }

/* -------------------------------------------------------------- footer */

.launch footer {
  padding: 2rem 0 3rem;
  font-size: 0.85rem;
  color: var(--ink-soft);
  border-top: 1px solid var(--line);
}
.launch footer p { margin: 0 0 0.6rem; }
.launch footer nav a { margin-right: 1rem; }

/* ------------------------------------------------- the report page chrome */

/* The banner above a sample report. The report below it is the
 * application's own markup and stylesheet, untouched. */
.samplebar {
  background: var(--accent-soft);
  border-bottom: 1px solid var(--line);
  padding: 0.9rem 0;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 0.88rem;
}
.samplebar .wrap { max-width: 64rem; }
.samplebar strong { display: block; font-size: 0.95rem; }
.samplebar nav { margin-top: 0.55rem; display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; }
.samplebar nav a { font-weight: 600; }
.samplebar .here { font-weight: 600; color: var(--ink-faint); }

.loading, .loadfail {
  max-width: var(--maxw);
  margin: 3rem auto;
  padding: 0 1.1rem;
  font-family: ui-sans-serif, system-ui, sans-serif;
  color: var(--ink-soft);
}
.loadfail { color: var(--poor); }

/* OVERRIDE, and it is the only one that touches the report. The
 * application's stylesheet is written for a page whose sections are
 * revealed by JavaScript; here the report is the page, so the top margin
 * that assumed a form above it is removed. Nothing about the report's own
 * typography, tables, charts or colours is changed. */
#report { margin-top: 0; }

/* ------------------------------------------------------------- wider */

@media (min-width: 34rem) {
  .wordmark { font-size: 2.4rem; }
  .lede { font-size: 1.3rem; }
  .figures { grid-template-columns: 1fr 1fr; gap: 0 2rem; }
  .samples { grid-template-columns: 1fr 1fr; }
  .waitlist button[type="submit"] { width: auto; }
}

@media (min-width: 52rem) {
  .mast { padding-top: 4rem; }
  .launch h2 { font-size: 1.5rem; }
  .samples { grid-template-columns: repeat(3, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}