/* 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.
 */

/* ==========================================================================
   DESIGN PASS, 2026-08-23. Everything above this block is unchanged.
   ==========================================================================

   **The colours were already the app's. The type sizes were not.** They were
   0.875, 0.9375, 1.0625, 1.1875 and a clamp — five one-off numbers that arrived
   individually and were never a scale. `src/styles.css` has had a real scale all
   along (`--text-xs` to `--text-3xl`) and this file had never used it.

   **Named tokens now, taken from the app where they fit.** Two deliberate
   deviations, both recorded rather than silent:

   - **`--text-base` is 1.0625rem (17px), not the app's 1rem.** The owner's call
     on 2026-08-23, having read the pages. A phone app and a web page are read at
     different distances and 16px is at the small end for the web.
   - **`--text-md` stays 1.1875rem (19px) rather than the app's 1.125rem (18px).**
     Forced by the first: at a 17px base, an 18px heading is one pixel larger than
     body text and the hierarchy stops reading.

   The rest are the app's values exactly.

   **Spacing was deliberately NOT rescaled.** The app has `--space-1` to
   `--space-7` and this file uses rem margins that do not match them. Converting
   every margin would change the vertical rhythm of four pages **that no person
   has ever seen rendered** — the browser pane will not composite. Changing what
   cannot be checked is how something breaks invisibly. It is on the list for
   when somebody has looked. */

:root {
  color-scheme: dark;

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

  /* **Added from the app's palette, not invented.** `--chrome-line` is the
     app's border colour for places where `--line` disappears, and it is here for
     one job: the underline under a link.

     **Links on this site are the same colour as body text**, so the underline is
     the only thing that marks a link — which makes it a meaningful non-text
     element needing 3:1, not decoration. It was `--faint` at **2.67:1**, and
     that had been carried as a recorded exemption in the contrast checker since
     the checker was written. `--chrome-line` measures **3.16:1**.

     **The exemption is gone rather than re-explained**, and no colour was
     invented to do it: the app already owned one that passes. */
  --chrome-line: #606068;

  /* The focus ring, same as the app: `--focus: var(--fg)`. */
  --focus: var(--fg);

  /* The type scale. See the note above for the two deviations.

     **Shifted up one step on 2026-08-26**, base 17px → 19px and the two either
     side with it. The reason is in `--measure` below: the reading column was
     544px on a 1440px window and looked like a phone layout, and raising the
     type is what lets the column widen without the character count leaving the
     recommended band. **`--text-lg` and above are untouched app values.** */
  --text-sm: 0.875rem;     /* 15px — quiet text, the page date */
  --text-base: 1.125rem;   /* 19px — body */
  --text-md: 1.25rem;     /* 21px — the lede and section headings */
  --text-lg: 1.5rem;        /* app value */
  --text-xl: 1.75rem;       /* app value */
  --text-2xl: 2.25rem;      /* app value */
  --text-3xl: 2.75rem;      /* app value — the h1 ceiling */

  /* **The reading measure, narrowed from 38rem on 2026-08-23.**

     `docs/website.md` recorded "roughly 65 characters per line" as a fact. A
     direct measurement — walking a real paragraph with a text range and
     recording the index at which each rendered line breaks — gave **74 to 78**,
     maximum 86. The recorded figure had been estimated rather than measured.

     78 is inside the commonly recommended band and at the long end of it. **This
     value was set by measuring the result, not by arithmetic** — the figure it
     lands on is recorded in the design-pass note in `docs/website.md`.

     **The nav uses the same token.** The bar and the text column were two
     separate 38rem values before, which is the drift-by-duplication this project
     keeps removing everywhere else. */
  /* **Widened to 40rem on 2026-08-26, with the type raised in the same pass.**
     33rem at 17px measured 63 characters — correct, and 528px wide, which on a
     1440px window is 37% of the screen with nothing else reaching the edges.
     40rem at 19px measures about 68: the same band, a 640px column.

     **The measure is in characters and characters scale with type**, which is
     why this is not the symptom fix it looks like. Widening the column alone
     would have taken the line length back to the 74–78 that the 2026-08-23
     measurement narrowed it away from. */
  --measure: 38rem;

  /* **There was a --band token here for half a day and it is gone.** The bar
     and the footer put their contents in a 66rem container while the prose sat
     in 40rem, so the left edge of the text moved three times down one page.
     Both were centred, which is what made it hard to name and easy to see.
     The bands still reach the window - with their background. Their contents
     use --measure, the same column as the prose. */

  /* The app's tap-target floor. Apple's is 44, Android's 48; the app took 44
     and so does this. */
  --tap-target: 44px;
}

/* **The focus ring, copied from `src/styles.css` rather than designed.**
   The site had none at all — measured 2026-08-23 by walking every stylesheet
   rule looking for `:focus-visible` and finding none, so a keyboard reader got
   whatever the browser felt like, which on a near-black page can be invisible.

   The app's rule, and its reasoning, unchanged: **`:focus-visible` rather than
   `:focus`**, because `:focus` leaves a ring sitting on a control after a thumb
   has tapped it, which reads as stuck. **`:where()` keeps specificity at zero**
   so any rule below can override it without a fight. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

* {
  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: var(--text-base);
  line-height: 1.65;
  -webkit-text-size-adjust: 100%;
}

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

/* **The bar gained a background on 2026-08-26.** It always spanned the window,
   but its only visible mark was a hairline border and its contents sat in the
   same narrow column as the prose — so a 1425px bar held 528px of nav and
   marked itself with two-thirds of a pixel. Measured, not guessed.

   **Whetstone stays stark and this does not change that.** The band is the
   app's own `--surface`, one step off the page, with no gradient, no shadow and
   no rounding. The company page does the same job with different colour and a
   heavier brand line — Rule 2 is about the look, and machinery like a container
   width is explicitly shared. */
.bar {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  /* Vertical padding cut from 1rem to 0.5rem when the links grew to a 44px
     hit area, so the bar stays about the height it was: it measured 57px and
     lands at 60px rather than ballooning to 76px. */
  padding: 0.5rem 0;
}

.bar nav {
  margin: 0 auto;
  max-width: var(--measure);
  padding: 0 1.5rem;
  display: flex;
  gap: 1.5rem;
  font-size: var(--text-sm);
}

/* **44px tall, from 25px, on 2026-08-23.** Measured on the live site: the three
   nav links were 25px high — the only real controls on the site, and every one
   of them under the app's own `--tap-target` floor of 44px, which the app holds
   itself to in five places.

   **The height is the hit area, not the ink.** `align-items: center` keeps the
   label where it was and grows the target around it, so this costs vertical
   space in the bar and changes nothing about where the words sit. */
.bar a,
.bar [aria-current] {
  text-decoration: none;
  color: var(--dim);
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-target);
}

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

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

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

/* **Two containers since 2026-08-26**, and the build emits the same two class
   names for both sections. That is machinery, not identity — each stylesheet
   sets its own widths, colours and type against them. */

/* **LEFT-ALIGNED, NOT CENTRED — 2026-08-26, the owner s instruction.**
   Same change as the company stylesheet and for the same reason: every block on
   every page starts at one gutter on the left, capped in width so the line
   length stays readable. Nothing is centred. Do not re-centre this. */
.prose {
  margin: 0 auto;
  max-width: var(--measure);
  padding: 0 1.5rem;
}

.band-inner {
  margin: 0 auto;
  max-width: var(--measure);
  padding: 0 1.5rem;
}

main {
  padding: 3rem 0 4.5rem;
}

/* **The footer is a band, from 2026-08-26.** Its contents run to `--band` and
   its background reaches the window, so the page ends on something rather than
   trailing off into empty ground. */
footer {
  background: var(--surface);
  border-top: 1px solid var(--line);
  padding: 2.75rem 0 3rem;
}

h1 {
  /* 2rem is deliberately off-scale: it is the narrow-screen floor, and it is
     left at its measured value so the phone rendering did not change in a pass
     nobody could look at. The ceiling is the app scale. */
  font-size: clamp(2rem, 7vw, var(--text-3xl));
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0 0 1rem;
}

h2 {
  font-size: var(--text-md);
  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: var(--text-md);
  color: var(--fg);
}

.quiet {
  color: var(--dim);
  font-size: var(--text-sm);
}

/* 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: var(--text-sm);
  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(--chrome-line);
}

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 {
  color: var(--dim);
  font-size: var(--text-sm);
}

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

/* **`.rule` draws nothing now.** The band's own top border does that job at
   full width, which is the whole point of the band. The element is still
   emitted by the build for both stylesheets, so it is neutralised here rather
   than left to add a stray 2rem of space. */
footer .rule {
  border-top: 0;
  margin: 0;
}

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

  footer {
    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: var(--text-sm);
}

/* 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: var(--text-sm);
}

.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 {
  /* --text-lg, up from an off-scale 1.3125rem. A question is the thing the
     reader came to ask; it is doing more work than a section label. */
  font-size: var(--text-lg);
  letter-spacing: -0.01em;
  margin-top: 3rem;
}