/* The public website — citadelofthemind.com
 *
 * **Dark only, and matching the app rather than resembling it.** Every colour
 * below is lifted from `src/styles.css`, so the site, the launcher icon, the
 * splash and the Play feature graphic are all the same near-black and the same
 * two greys. A brand that drifts by a few percent between surfaces looks wrong in
 * a way nobody can name.
 *
 * **`public/legal.css` is deliberately not this file and must not become it.**
 * The privacy policy and terms follow the reader's own light or dark preference,
 * because they have to work when opened cold from a store listing by somebody who
 * has never seen the app. Those are documents. These are pages.
 *
 * **No font is loaded.** `system-ui` on every platform, same as the app. See
 * `docs/font-assets.md`: linking a typeface from a CDN would send every visitor's
 * IP to a third party and make the privacy policy untrue in one line.
 *
 * **The root font size is never set**, so the reader's own browser and OS text
 * size reach the page. Same rule the legal pages follow.
 */

:root {
  color-scheme: dark;

  --bg: #0b0b0c;
  --surface: #141416;
  --line: #2a2a2e;
  --faint: #55555e;
  --dim: #8a8a90;
  --fg: #e8e8ea;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-text-size-adjust: 100%;
}

/* --- The bar ------------------------------------------------------------- */

.bar {
  border-bottom: 1px solid var(--line);
  padding: 1rem 1.25rem;
}

.bar nav {
  margin: 0 auto;
  max-width: 38rem;
  display: flex;
  gap: 1.5rem;
  font-size: 0.9375rem;
}

.bar a,
.bar [aria-current] {
  text-decoration: none;
  color: var(--dim);
}

.bar a:hover {
  color: var(--fg);
}

.bar [aria-current] {
  color: var(--fg);
}

/* --- The page ------------------------------------------------------------ */

main,
footer {
  margin: 0 auto;
  max-width: 38rem;
  padding: 0 1.25rem;
}

main {
  padding-top: 3rem;
  padding-bottom: 4rem;
}

h1 {
  font-size: clamp(2rem, 7vw, 2.75rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0 0 1rem;
}

h2 {
  font-size: 1.1875rem;
  line-height: 1.3;
  margin: 2.75rem 0 0.5rem;
}

p {
  margin: 0 0 1.15rem;
  /* Long words never widen the page on a narrow phone. */
  overflow-wrap: break-word;
}

.lede {
  font-size: 1.1875rem;
  color: var(--fg);
}

.quiet {
  color: var(--dim);
  font-size: 0.9375rem;
}

/* The stage of the thing, stated once as a fact. Not an apology, so it is not
   styled as a warning — a thin rule and the dim colour, and then the page
   carries on. */
.stage {
  color: var(--dim);
  font-size: 0.9375rem;
  border-left: 2px solid var(--faint);
  padding-left: 0.85rem;
  margin-bottom: 2rem;
}

.close {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  color: var(--dim);
}

a {
  color: var(--fg);
  text-underline-offset: 0.2em;
  text-decoration-color: var(--faint);
}

a:hover {
  text-decoration-color: var(--fg);
}

/* --- The mark ------------------------------------------------------------ */

.mark-row {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  margin-bottom: 2rem;
}

.wordmark {
  color: var(--fg);
  /* Height is set on the element; width follows from the viewBox so the word
     never stretches. */
  height: auto;
  max-width: 100%;
}

/* --- The foot ------------------------------------------------------------ */

footer {
  padding-bottom: 4rem;
  color: var(--dim);
  font-size: 0.9375rem;
}

footer strong {
  color: var(--fg);
  font-weight: 600;
}

footer .rule {
  border-top: 1px solid var(--line);
  margin: 0 0 2rem;
}

@media (max-width: 30rem) {
  main {
    padding-top: 2.25rem;
  }
}

/* --- Added 2026-08-20, with the evidence and methodology pages ------------ */

/* The nav gained two items and can no longer be assumed to fit on one line at
   375px. Wrapping is the honest fix; shrinking the type to avoid it is not. */
.bar nav {
  flex-wrap: wrap;
  row-gap: 0.5rem;
}

/* Text for anything that reads text rather than pictures. The product page's
   h1 is the wordmark, which is an image as far as a crawler or a screen reader
   is concerned — this is the app's settled name sitting behind it. Clipped
   rather than hidden, because `display: none` is not read out. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* When the h1 IS the mark row, the h1 type size must not push the row apart. */
h1.mark-row {
  font-size: 0;
  line-height: 0;
}

/* The date the copy was last written. Not the build date — a date that moved
   every rebuild would make every page look freshly revised.

   **It was --faint for about ten minutes and that was measurably wrong**:
   #55555e on #0b0b0c is 2.67:1, against the 4.5:1 that 14px text needs. It
   looked correct. --dim is 5.73:1 and is what every other quiet line on the
   site already uses. Fifth time measuring has caught something in this project
   that inspection approved. */
.page-date {
  margin-top: 3rem;
  color: var(--dim);
  font-size: 0.875rem;
}

/* The reference lists, on the evidence and methodology pages. Each entry is a
   citation and then a line saying what it settled, which is the rule both lists
   are held to: a reference with nothing to say is decoration. */
.refs {
  margin: 1.5rem 0 0;
  padding-left: 1.4rem;
  font-size: 0.9375rem;
}

.refs li {
  margin-bottom: 1.25rem;
}

.refs .cite {
  display: block;
  color: var(--dim);
}

.refs .why {
  display: block;
  margin-top: 0.35rem;
  color: var(--fg);
}

/* A question is a heading, and on the evidence page it is doing more work than
   a section label — it is what the reader came to ask. */
.qa-page h2 {
  font-size: 1.3125rem;
  letter-spacing: -0.01em;
  margin-top: 3rem;
}