/* The company page — citadelofthemind.com/
 *
 * **This is not Whetstone's stylesheet and must not become it.** `CLAUDE.md`
 * Rule 2: each product keeps a completely separate visual identity, and the
 * company is not a product. Until 2026-08-22 both were served one file called
 * `site.css`, which meant the company page looked like Whetstone because it was
 * literally wearing Whetstone's clothes.
 *
 * **It is short because the page is short.** Whetstone's stylesheet carries the
 * mark row, the wordmark, the reference lists and the question headings, none of
 * which exist here. Copying it wholesale and leaving the unused rules in would
 * be the same duplication in a different shape.
 *
 * ============================================================================
 * **PLACEHOLDER, LIKE THE FAVICON. THE COMPANY HAS NO BRANDING YET.**
 * ============================================================================
 *
 * The type and the layout are deliberately the plainest thing that reads well:
 * this is the design pass's starting point, not its output. What is NOT
 * provisional is the palette's contrast, which is measured below, and the two
 * rules this site does not bend:
 *
 * **No font is loaded.** `system-ui` everywhere. `docs/font-assets.md` in
 * Whetstone carries the rule: linking a typeface from a CDN would send every
 * visitor's IP to a third party and make the footer's claim untrue in one line.
 *
 * **The root font size is never set**, so the reader's own browser and OS text
 * size reach the page.
 */

:root {
  color-scheme: dark;

  /* **Its own near-black, with a trace of blue in it.** Whetstone's is #0b0b0c,
     taken from the app so the site, the icon and the splash cannot drift apart.
     The company has no app to match, so matching that value would be borrowing
     a product's palette rather than having one.

     **Contrast measured, not eyeballed** — `node tools/check-contrast.mjs`,
     run 2026-08-22:

       --fg    on --bg   15.46:1   (needs 4.5:1)  body text, headings, links
       --dim   on --bg    5.74:1   (needs 4.5:1)  quiet text, footer, page date
       --faint on --bg    3.49:1   (needs 3:1)    link underlines

     **The figures above were wrong when they were first written here**, because
     they were worked out by hand before the tool existed — 15.28 and 5.49.
     Close enough to look right, which is the whole problem. These are the
     tool's.

     **--faint started at #575c68 and measured 2.77:1**, under the 3:1 that a
     link underline needs — and on this site the underline is the only thing
     marking a link, since links are the same colour as body text. It is #666b7a
     now. The same colour in Whetstone's stylesheet is at 2.67:1 and is a known,
     recorded finding for the design pass rather than something to change
     unilaterally here: that palette is the app's. */
  --bg: #111318;
  --surface: #191c22;
  --line: #2b2f38;
  --faint: #666b7a;
  --dim: #8a8f9c;
  --fg: #e9eaee;

  /* --- The two widths, added 2026-08-26 -----------------------------------
     **The page used to have one width and it was the prose width**, so the
     header, the body and the footer were all 34rem and nothing on the page
     touched the sides of the window. At 1440px that is 37% of the viewport
     with 456px empty on either side, measured through the DOM.

     **The reading measure was not the fault and is not being abandoned.** It
     was set on 2026-08-23 by walking a paragraph and counting where lines
     broke, and it measured a median of 63 characters — mid-band against the
     recommended 45–75. Widening it alone would have traded a measured value
     for a symptom fix.

     **What changed instead is the type size, which lets the column grow while
     the character count stays put.** The measure is in characters; characters
     scale with type. 17px in 34rem gave 63 characters. 19px in 41rem gives
     about 70 — still mid-band, in a column 656px wide rather than 544px.

     **There is deliberately only one content width.** A `--band` token existed
     for half a day and is gone: see `.band-inner` below for why two widths made
     the text start in three different places down one page. The bands reach the
     window with their *background*; their contents sit in this same column. */
  --prose: 39rem;
  --pad: 1.5rem;
}

/* **The focus ring, added in the design pass 2026-08-23.** Same rule as
   Whetstone's pages and as the app itself — this is machinery rather than
   identity, so sharing it breaks no rule. Each section supplies its own `--fg`,
   so the ring is drawn in that section's own colour.

   The site had no focus style at all, which was found by walking every rule in
   every stylesheet looking for `:focus-visible` and finding none. A keyboard
   reader got the browser default, which on a near-black page can be invisible.

   `:focus-visible` and not `:focus`, so a ring never sits on a control after a
   thumb has tapped it. `:where()` keeps specificity at zero. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: 2px;
}

/* **Nothing else in this file was touched by the design pass, deliberately.**
   The type, the palette and the spacing here are a placeholder awaiting the
   company's branding, and quietly "improving" them would be making that
   decision by accident. There are no controls on this page to give a 44px hit
   area to — the only links are inline in text and in the footer. */

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  /* 19px, raised from 17px on 2026-08-26. See --prose above for why the type
     moved rather than the column. */
  font-size: 1.125rem;
  line-height: 1.65;
  -webkit-text-size-adjust: 100%;
  /* The page fills the window even when the content is short, so the footer
     band sits at the bottom rather than halfway up on the contact page. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

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

/* **Two containers, not one.** `.prose` is the reading column; `.band-inner`
   is the wide one the chrome uses. Everything that spans the window is a
   full-width element with one of these inside it. */

/* **LEFT-ALIGNED, NOT CENTRED — 2026-08-26, the owner's instruction, twice.**
   "Just make everything left justified like a normal person, not all this weird
   stuff."

   **Every content container starts at the same gutter on the left** and is
   capped in width so the line length stays readable. Nothing is centred. The
   empty space all falls on the right, which is the point: a reader's eye
   returns to one edge on every line, in every block, on every page.

   **This replaced a centred column that was measurably consistent and still
   looked wrong to the person looking at it.** Recorded because the temptation
   next time will be to re-centre it. */
.prose {
  margin: 0 auto;
  max-width: var(--prose);
  padding: 0 var(--pad);
}

/* **`.band-inner` is the same width as `.prose`, and that is the whole point —
   corrected 2026-08-26, hours after the bands were added.**

   It was `--band` (68rem) for half a day. The bands themselves were right: a
   background that reaches the window is what stopped the page looking like a
   strip. **What was wrong was putting their *contents* in a wider container
   than the prose.** Both were centred, so the left edge of the text jumped
   inward by about 200px at the header, back out at the footer, and in again for
   the body — three different starting positions down one page.

   **The owner's words: "Everything needs to be left-justified, or everything
   needs to be centered. Headers/Footers being one and the body being the other
   looks weird."** Exactly right, and it is the kind of fault no check here can
   see: every measurement passed, and the alignment was still wrong.

   **So: one column for all content, full-bleed backgrounds behind it.** */
.band-inner {
  margin: 0 auto;
  max-width: var(--prose);
  padding: 0 var(--pad);
}

main {
  flex: 1;
  padding-bottom: 4.5rem;
}

/* --- The header band ------------------------------------------------------
   **The company page had no header at all before 2026-08-26** — the first
   thing in the document was `main`. That is the single biggest reason the page
   read as a phone layout on a desktop: nothing anchored it to the window. */

.siteband {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.siteband .band-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4rem;
  flex-wrap: wrap;
}

.siteband .brand {
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: -0.01em;
  text-decoration: none;
  color: var(--fg);
  padding: 0.75rem 0;
}

.siteband nav {
  display: flex;
  gap: 1.5rem;
  font-size: 0.9375rem;
}

.siteband nav a,
.siteband nav [aria-current] {
  color: var(--dim);
  text-decoration: none;
  /* The tap-target floor, same as Whetstone's and the app's. */
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

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

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

/* --- The hero -------------------------------------------------------------
   **Full width, its own ground, and the h1 sits in the wide container rather
   than the reading column.** A heading is not prose and does not need a
   reading measure; keeping it inside one was part of what made the page look
   like a strip. */

.hero {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  padding: 5rem 0 4.5rem;
}

/* The company mark, above the name. Inline SVG, so it costs no request, and
   currentColor so it can never drift from the text it sits above.

   Sized in ch rather than px so it scales with the type the way the heading
   does — the 2026-08-26 lesson was that a measure and its type move together.
   The drawing is portrait, so height is set and width follows the viewBox. */
.hero .mark {
  display: block;
  height: clamp(4.5rem, 7vw, 6.5rem);
  width: auto;
  color: var(--fg);
  margin-bottom: 1.75rem;
}

.hero h1 {
  font-size: clamp(2rem, 4.5vw, 3rem);
  margin-bottom: 0.75rem;
}

.hero .lede {
  font-size: clamp(1.125rem, 1.5vw, 1.3125rem);
  color: var(--dim);
  margin: 0;
}

/* Prose that follows a hero starts clear of it. */
.hero + .prose,
main > .prose:first-child {
  padding-top: 3.5rem;
}

/* --- The product cards ----------------------------------------------------
   **One product today, and the grid is built for more.** A single card in a
   two-column grid sits in the left column at its natural width rather than
   stretching across, which is why `grid-template-columns` uses a fixed
   minimum rather than `1fr 1fr`. */

.cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18rem, 22rem));
  gap: 1.25rem;
}

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 1.5rem;
}

.card h3 {
  margin: 0 0 0.375rem;
  font-size: 1.25rem;
  line-height: 1.25;
}

.card h3 a {
  text-decoration: none;
}

.card h3 a:hover {
  text-decoration: underline;
  text-decoration-color: var(--faint);
}

.card p {
  margin: 0 0 0.75rem;
  color: var(--dim);
  font-size: 1rem;
}

.card .stage {
  margin: 0;
  font-size: 0.875rem;
  color: var(--faint);
}

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

h2 {
  /* 20px against an 18px body. At 19px it was one pixel larger than body
     text and the hierarchy stopped reading - the same fault whetstone.css
     records for its own scale. */
  font-size: 1.25rem;
  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.25rem;
  color: var(--fg);
}

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

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

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

/* The date the copy was last written. Not the build date. It is --dim rather
   than --faint, which is the fault measurement caught on Whetstone's pages:
   --faint at this size is 2.67:1 against 4.5:1 needed, and it looked fine. */
.page-date {
  margin-top: 3rem;
  color: var(--dim);
  font-size: 0.875rem;
}

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

/* **The footer is a band now, not a narrow column with a rule above it.** The
   `.rule` element it used to draw is gone — the band's own top border does that
   job at full width, which is the point. */

footer {
  background: var(--surface);
  border-top: 1px solid var(--line);
  color: var(--dim);
  font-size: 0.9375rem;
  padding: 2.75rem 0 3rem;
}

/* **Stacked, not a flex row — corrected 2026-08-26 in the same pass as the
   alignment fix.** The footer laid its three blocks out side by side, which put
   the address at the shared left edge and the email 272px to the right of it.
   That is a perfectly ordinary footer pattern and it was wrong *here*, for the
   same reason the bands were: this page has one column, and a reader coming
   down it should meet one left edge, not three.

   **It was also cramped**, once `.band-inner` narrowed from 68rem to the
   reading column. */
footer .band-inner {
  display: block;
}

footer p {
  margin: 0 0 1rem;
}

footer p:last-child {
  margin-bottom: 0;
}

/* `.rule` draws nothing now — the band's top border does it at full width. */
footer .rule {
  display: none;
}

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

/* --- Narrower than a laptop ----------------------------------------------
   **There used to be exactly one breakpoint, at 30rem**, which is why the
   layout was identical from 481px to 2560px. */

@media (max-width: 52rem) {
  .hero {
    padding: 3.5rem 0 3rem;
  }
}

@media (max-width: 40rem) {
  .siteband .band-inner {
    min-height: 3.5rem;
  }

  .siteband nav {
    gap: 1.25rem;
  }

  .hero {
    padding: 2.75rem 0 2.5rem;
  }

  .hero + .prose,
  main > .prose:first-child {
    padding-top: 2.25rem;
  }

  .cards {
    grid-template-columns: 1fr;
  }
}