/* =============================================================================
   Leet Enterprises — Main Stylesheet
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Fonts
   ----------------------------------------------------------------------------- */

@font-face {
  font-family: 'Hack';
  src: url('/fonts/hack-regular-subset.woff2') format('woff2'),
       url('/fonts/hack-regular-subset.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Hack';
  src: url('/fonts/hack-bold-subset.woff2') format('woff2'),
       url('/fonts/hack-bold-subset.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* -----------------------------------------------------------------------------
   Design Tokens
   ----------------------------------------------------------------------------- */

:root {
  --color-bg: #0f0f0f;
  --color-surface: #1a1a1a;
  --color-text: #e4e4e4;
  /* RAISED FROM #888888, 2026-08-21 (Shannon: "too muted"). The old value was
     clearing WCAG AA and nothing more — 5.41:1 on the page ground and 4.91:1 on
     the card surface, against 4.5 required. This one clears AAA (7:1) on BOTH
     grounds: 8.06:1 on #0f0f0f and 7.32:1 on #1a1a1a. Measured, not picked.

     ⭐ AAA IS THE RIGHT BAR HERE RATHER THAN A FLOURISH. The body face is
     Atkinson Hyperlegible, chosen because the Braille Institute designed it for
     readers with low vision (see le.bom.atkinson.why, which says so on /bom) —
     serving that face at a barely-passing contrast is the site contradicting its
     own parts list.

     ⚠ IT IS 26 SELECTORS, INCLUDING NAV LINKS, THE FOOTER, BOTH HERO SECOND
     LINES AND EVERY SUB-BULLET. The hierarchy against body text survives the
     lift — 8.06 against #e4e4e4's 15.08 — but check a dense page (/thesis,
     /bom) before moving it again, not just the home page. */
  --color-text-muted: #a8a8a8;
  --color-accent: #2dd4bf;
  --color-border: #2a2a2a;

  --font-mono: 'Hack', monospace;
  /* Body text. Atkinson Hyperlegible is the portfolio's body face — designed by
     the Braille Institute for readers with low vision, with letterforms that
     stay distinct at small sizes. Self-hosted; see public/fonts/fonts.css.
     Chosen over Sora 2026-08-16; Sora's file, @font-face and OFL notice were
     all removed with it. */
  --font-sans: 'Atkinson Hyperlegible', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --container-max: 960px;
  --container-pad: 1.5rem;
}

/* -----------------------------------------------------------------------------
   Reset & Base
   ----------------------------------------------------------------------------- */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-sans);
  font-weight: 400;
  line-height: 1.6;
  color: var(--color-text);
  background-color: var(--color-bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a {
  color: var(--color-accent);
  text-decoration: none;
  transition: opacity 0.2s ease;
}

a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* -----------------------------------------------------------------------------
   Layout
   ----------------------------------------------------------------------------- */

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

.container--narrow {
  max-width: 720px;
}

.main {
  flex: 1;
}

/* -----------------------------------------------------------------------------
   Fade-in Animation
   ----------------------------------------------------------------------------- */

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.main {
  animation: fadeIn 0.6s ease-out;
}

/* -----------------------------------------------------------------------------
   Header
   ----------------------------------------------------------------------------- */

.header {
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--color-border);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header__logo {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.header__logo:hover {
  text-decoration: none;
  opacity: 0.8;
}

.header__logo-img {
  height: 28px;
  width: auto;
  filter: invert(1);
}

.header__wordmark-img {
  height: 14px;
  width: auto;
  margin-left: 0.75rem;
  filter: invert(1);
}

.nav {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.nav__link {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--color-text-muted);
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: color 0.2s ease;
}

.nav__link:hover {
  color: var(--color-text);
  text-decoration: none;
}

.nav__link--active {
  color: var(--color-accent);
}

/* -----------------------------------------------------------------------------
   Hero
   ----------------------------------------------------------------------------- */

.hero {
  padding: 6rem 0 4rem;
  text-align: center;
}

.hero__logo {
  margin-bottom: 3rem;
}

.hero__logo-img {
  height: 64px;
  width: auto;
  margin: 0 auto 1rem;
  filter: invert(1);
}

.hero__wordmark {
  display: block;
  font-family: var(--font-mono);
  font-size: 1.25rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  color: var(--color-text);
}

.hero__wordmark-img {
  height: 24px;
  width: auto;
  margin: 0 auto;
  filter: invert(1);
}

.hero__copy {
  /* Widened from 560px 2026-08-16. At 560 the measure was tight enough that
     every line broke near the same place and the centred block tapered into a
     wedge — legible, but it read as one continuous crawl rather than as
     paragraphs. */
  max-width: 680px;
  margin: 0 auto;
}

.hero__body {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-text-muted);
  /* The hero copy is a FIXED measure above mobile, so a break that orphans a
     word orphans it at every width — there is no reflow to rescue it. Balance
     evens the lines instead. Browsers without text-wrap ignore this and get the
     old ragged break, which is today's behaviour rather than a regression. */
  text-wrap: balance;
  margin-bottom: 1.5rem;
}

.hero__philosophy {
  font-family: var(--font-mono);
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 1.7;
  color: var(--color-text);
  margin-bottom: 1.5rem;
  text-wrap: balance;
}

.hero__aside {
  /* Same colour as .hero__body, one step smaller. It used to carry
     opacity: 0.7 as well, which composited #888888 down to roughly #646464 —
     3.24:1 against the background, under the 4.5:1 WCAG AA wants for body text.
     Size and the margin above carry the hierarchy instead; dimming the text was
     also working against Atkinson, which is here for legibility. */
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--color-text-muted);
  margin-bottom: 1.5rem;
  text-wrap: balance;
}

.hero__cta {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  color: var(--color-accent);
  letter-spacing: 0.02em;
}

/* -----------------------------------------------------------------------------
   Brand Cards
   ----------------------------------------------------------------------------- */

.brands {
  padding: 2rem 0 6rem;
}

/* Four tracks, each card spanning two.
   Two-up is pixel-identical to the `1fr 1fr` this replaces: a two-track span is
   two tracks plus the one gap between them, and two of those spans plus the gap
   between the cards comes to exactly four tracks and three gaps — the whole
   grid. What the extra tracks buy is the card left over on the last row. */
.brands__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

.brand-card {
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 2rem;
  text-decoration: none;
  color: var(--color-text);
  transition: border-color 0.2s ease, transform 0.2s ease;
}

/* A last card with no partner on its row starts one track in, which centres it
   at exactly the same width as the others: its left offset works out to one
   track plus one gap, and so does the space left over on its right.

   Expressed as parity rather than as "the third card" so that adding a fourth
   brand needs no CSS change — four cards go two-up twice with nothing left
   over, and a fifth would centre itself the same way this one does. */
.brand-card:last-child:nth-child(odd) {
  grid-column: 2 / span 2;
}

.brand-card:hover {
  border-color: var(--color-accent);
  transform: translateY(-2px);
  text-decoration: none;
}

.brand-card__logo {
  height: 48px;
  display: flex;
  align-items: center;
  margin-bottom: 1.25rem;
}

/* height, not max-height. Every brand's Affinity export declares
   width="100%" height="100%" with no intrinsic size, so inside this flex row a
   max-height leaves the box indeterminate and the logo collapses to nothing. */
.brand-card__img {
  height: 48px;
  width: auto;
  display: block;
}

/* Humble Genius's cream plaque. Their art is a single light-palette lockup —
   ink #1d2233 and red #BA0C1A on transparent — and their own dark theme puts it
   on a cream panel rather than shipping dark variants, so the brand red never
   sits on a dark ground (HG decision D-2026-07-20-01). Colours and geometry are
   transcribed from the HG theme's nav rule, scaled up for a 48px logo.

   This is intentionally the only plaque on the row: Lowkey Workshop's wordmark
   is drawn for dark grounds and needs no panel, and on a cream one its largest
   word would vanish.

   The padding makes the plaque 68px tall in a 48px row, so it overflows by 10px
   top and bottom. That is deliberate — it keeps the three descriptions on a
   shared baseline — and there is 2rem of card padding to absorb it. */
.brand-card__plaque {
  display: inline-flex;
  align-items: center;
  padding: 10px 16px;
  background: #FDF6E3;
  border-radius: 10px;
}

.brand-card__typemark {
  font-family: var(--font-mono);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: 0.02em;
}

.brand-card__desc {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--color-text-muted);
  margin-bottom: 1.25rem;
  flex: 1;
}

.brand-card__link {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--color-accent);
}

/* -----------------------------------------------------------------------------
   Browser SBOM table — /bom. Dormant until canon exports the copy.

   Ported from ../LowkeyWorkshopWebsite/public/css/styles.css onto this site's
   tokens. Scrolls inside its own wrapper so a narrow phone never scrolls the
   whole page sideways.
   ----------------------------------------------------------------------------- */

.bom-table-wrap {
  overflow-x: auto;
  margin: 2rem 0 0;
}

.bom {
  border-collapse: collapse;
  width: 100%;
  min-width: 520px;
  text-align: left;
  font-size: 0.95rem;
}

.bom th,
.bom td {
  border-bottom: 1px solid var(--color-border);
  padding: 1rem 1.1rem 1rem 0;
  vertical-align: top;
  font-weight: 400;
}

.bom thead th {
  border-bottom: 2px solid var(--color-accent);
  padding-bottom: 0.5rem;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.bom__name {
  color: var(--color-text);
  font-weight: 700;
}

.bom__version,
.bom__copyright,
.bom__note {
  display: block;
  color: var(--color-text-muted);
  font-weight: 400;
  font-size: 0.85rem;
  margin-top: 0.3rem;
}

/* The justification column — the only judgment on the page, so it reads as
   primary text rather than as a caption. */
.bom__why {
  color: var(--color-text);
  max-width: 34ch;
}

/* An optional per-row note: for facts that need explaining rather than
   correcting. Italic so it reads as an aside, not as more transcription. */
.bom__note {
  font-style: italic;
}

/* A served path is a long unbroken string, and it must not be what forces the
   horizontal scroll. */
.bom__served code {
  font-size: 0.82rem;
  color: var(--color-text-muted);
  overflow-wrap: anywhere;
}

/* -----------------------------------------------------------------------------
   Page (Privacy, Contact, 404)
   ----------------------------------------------------------------------------- */

.page {
  padding: 4rem 0 6rem;
}

.page--centered {
  text-align: center;
}

.page h1 {
  font-family: var(--font-mono);
  font-size: 1.75rem;
  font-weight: 700;
  margin-bottom: 2rem;
  letter-spacing: 0.02em;
}

.page h2 {
  font-family: var(--font-mono);
  font-size: 1.15rem;
  font-weight: 700;
  margin-top: 2.5rem;
  margin-bottom: 0.75rem;
  letter-spacing: 0.02em;
}

.page p {
  margin-bottom: 1rem;
  line-height: 1.7;
}

.page__updated {
  color: var(--color-text-muted);
  font-size: 0.85rem;
  margin-bottom: 2rem;
}

/* -----------------------------------------------------------------------------
   The thesis page — /thesis. Dormant until canon exports le.thesis.*.

   This is the longest page on the site by an order of magnitude (~2,050 words
   against ~150 for privacy), so it is set for sustained reading rather than
   scanning: the measure is tightened, the leading opened, and the section
   headings given enough space above them to act as rests.
   ----------------------------------------------------------------------------- */

/* ~68 characters at this size. .container--narrow is 720px, which is a
   comfortable measure for a page people scan and too wide for one they read. */
.thesis .container--narrow {
  max-width: 40rem;
}

.thesis p {
  line-height: 1.75;
  margin-bottom: 1.15rem;
}

.thesis h1 {
  margin-bottom: 0.5rem;
}

/* ⛔ NO .thesis__subtitle RULE — THE SUBTITLE MOVED TO ABOUT (2026-08-21). The
   h1 now sits directly above the opening paragraph. Removed rather than left
   matching nothing. ⚠ .thesis__intro below carries the spacing the subtitle used
   to provide under the heading. */

/* ⛔ THREE RULE GROUPS BELOW MATCH NOTHING ON /experiment SINCE 2026-08-23, AND
   ARE KEPT DELIBERATELY: .thesis__claim, .thesis__bridge, and the
   .thesis__sources / .thesis__backref pair. The claim came off the page when
   one-key-two-surfaces was retired; the diagnosis and both its footnoted sources
   left for the why-now paper. Their STRINGS are dormant in canon rather than
   deleted, and the why-now page will want this presentation when it renders
   them. ⚠ Deleting these rules is the same mistake as deleting the strings —
   and no check in this repo can see a missing style rule. Move them with the
   copy when that page is built; do not tidy them away before it exists. */

/* The thesis claim — set apart so it reads as the premise being stated, not as a
   second intro paragraph. Unused on /experiment; see above. */
.thesis__claim {
  font-size: 1.05rem;
  line-height: 1.75;
  margin-bottom: 2rem;
  padding-left: 1.15rem;
  border-left: 2px solid var(--color-accent);
}

.thesis__intro {
  font-size: 1.05rem;
  color: var(--color-text);
  /* Was 0 — the subtitle sat between this and the h1 and carried the gap. It
     left on 2026-08-21, so the opening paragraph inherits the separation rather
     than butting against the heading. */
  margin-top: 1.75rem;
}

/* The instrument map, directly under the claim and with NO heading — it is the
   second half of the opening, not a room. It gets no ornament on purpose: an
   accent bar or a box would read as a pull-quote and cut it off from the claim
   it belongs to. So it takes the page's ordinary paragraph rhythm, and the
   separation from what follows is the h2's own top margin doing its usual job.

   ⚠ paras() PUTS THE CLASS ON EVERY PARAGRAPH, not on a wrapper — so anything
   set here applies twice, and a bottom margin meant to close the section would
   also open a gap between the two paragraphs. That is why there is no bottom
   margin here. */
.thesis .thesis__instruments {
  margin-bottom: 1.15rem;
}

/* THE COMMITMENT EYEBROWS — Sufficiency · Accountability · Stewardship, one
   above each room's h2 (ruled 2026-08-23).

   ⛔ THE STRINGS ARE TITLE CASE IN CANON AND ARE SHOUTED HERE, not there. A
   capitalised string cannot be un-capitalised by a later design decision, and
   screen readers announce all-caps text differently — text-transform leaves the
   accessible name alone. ⛔ Do not "fix" canon to match what you see.

   It is mono, muted and tracked out: the same treatment as the nav, because it
   does the same job — orientation, not statement.

   ⚠ IT IS DOUBLE-CLASSED TO OUT-SPECIFY `.thesis p`, which sets a bottom margin
   this rule has to undo. `.thesis__label` alone loses to it — the same trap that
   caught .brand-statement__body. Do not simplify the selector. */
.thesis .thesis__label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-top: 3rem;
  margin-bottom: 0;
  line-height: 1.4;
}

/* An h2 that follows an eyebrow must not add its own top margin — the eyebrow
   already opened the room. Without this the label floats above a heading that
   has pushed itself 2.5rem away, and the pair stops reading as one unit. */
.thesis .thesis__label + h2 {
  margin-top: 0;
}

/* Mission and vision, with their labels.

   ⚠ IT LIVES IN THE /experiment BLOCK AND RENDERS ONLY ON /about. The pair used
   to render on both pages, and on 2026-08-21 the argument page stopped; the rules stayed
   here rather than being moved, because they are still un-namespaced on purpose
   and moving them would suggest they belong to a page. If a second page ever
   renders the pair again, nothing needs to change — which is the property this
   placement is protecting.

   NOT NAMESPACED TO A PAGE ON PURPOSE. One pair of canon keys gets one
   presentation; a page-local rule would be the same drift at the style layer
   that keying the strings twice would be at the copy layer. */
.brand-statement {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  /* ⛔ CENTRED AGAINST THE WHOLE STATEMENT, which is the point of the layout
     Shannon asked for: the label sits beside a block of two or three lines, not
     at the top of it. `center` is what makes the label find the middle of
     however many lines the statement wraps to at that width. */
  align-items: center;
  margin-bottom: 1.5rem;
}

/* Set in the heading family, like every other label on this site, and quiet
   enough that it introduces the statement rather than competing with it. */
.brand-statement__label {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  color: var(--color-text-muted);
}

/* ⛔ THE RULE MOVED HERE FROM .brand-statement. It has to sit BETWEEN the label
   and the text — on the container it would have run down the outside of the
   label instead, which is a different drawing.

   ⛔ THE DOUBLE-CLASS SELECTOR IS DELIBERATE AND IS NOT A STYLE TIC. Three page
   rules — `.page p`, `.thesis p` and `.about p, .founder p` — all set a bottom
   margin on paragraphs and all outrank a single class, so a plain
   `.brand-statement__body` loses to whichever page it lands on no matter where
   this sits in the file. That stray margin made the row taller than the text and
   pushed the vertically-centred label about 10px below the middle of its own
   statement, which is exactly the alignment this layout exists to get right. */
.brand-statement .brand-statement__body {
  border-left: 2px solid var(--color-accent);
  padding-left: 1.15rem;
  margin-bottom: 0;
}

/* The bridge to "why now", as the diagnosis's own closing aside. Quiet on
   purpose: the split is structural (POS-031 is independent of POS-027) and this
   had to read as an offer to go and check, not as a section the page was
   missing. ⚠ Unused since 2026-08-23 — the job passed to le.thesis.thesis.bridge,
   which is ordinary body copy under "A Better Trade" rather than an aside. Kept
   for the why-now page; see the note above .thesis__claim. */
.thesis__bridge {
  color: var(--color-text-muted);
  font-size: 0.95rem;
  margin-top: 1.75rem;
}

.thesis__deal-intro {
  margin-top: 1.75rem;
  margin-bottom: 0.75rem;
}

/* Each item is a bold lead-in followed by its explanation, so the list is set
   with room between items rather than tight — they are short paragraphs, not
   scannable bullets. */
.thesis__deal {
  list-style: none;
  padding-left: 0;
  margin: 0 0 1.5rem;
}

.thesis__deal li {
  position: relative;
  padding-left: 1.25rem;
  margin-bottom: 1rem;
  line-height: 1.7;
}

.thesis__deal li::before {
  content: "\2014";                 /* em dash */
  position: absolute;
  left: 0;
  color: var(--color-accent);
}

.thesis__deal strong {
  color: var(--color-text);
  font-weight: 700;
}

/* Footnote markers, resolved by footnotes() in server.js against the ids on the
   Sources list. Kept small and accent-coloured so they read as apparatus rather
   than as part of the sentence. */
.thesis__fn {
  font-size: 0.7em;
  line-height: 0;
  margin-left: 0.1em;
}

.thesis__fn a {
  color: var(--color-accent);
  text-decoration: none;
  padding: 0 0.15em;
}

.thesis__fn a:hover,
.thesis__fn a:focus {
  text-decoration: underline;
}

/* Sources. Smaller than the body because they are apparatus, but not muted —
   a page whose argument is that claims should be checkable cannot then set its
   own citations in grey. */
.thesis__sources {
  font-size: 0.9rem;
  line-height: 1.65;
  padding-left: 1.5rem;
  margin-top: 1rem;
}

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

.thesis__sources a {
  overflow-wrap: anywhere;
}

.thesis__backref {
  margin-left: 0.4rem;
  text-decoration: none;
  color: var(--color-text-muted);
}

.thesis__backref:hover,
.thesis__backref:focus {
  color: var(--color-accent);
}

/* An anchored jump should not land the target under the header. */
.thesis [id] {
  scroll-margin-top: 5rem;
}

/* ⛔ STACK BELOW 640px. A 6.5rem label column against a phone-width measure
   leaves the statement about 12 words wide and it breaks after every second
   word. The label goes above the rule and the statement keeps the full width. */
@media (max-width: 640px) {
  .brand-statement {
    grid-template-columns: 1fr;
    gap: 0.4rem;
  }

  .brand-statement__label {
    padding-left: 1.15rem;
  }
}

@media (max-width: 640px) {
  .brand-statement {
    padding-left: 0.9rem;
  }
  .thesis__sources {
    padding-left: 1.15rem;
  }
}

/* -----------------------------------------------------------------------------
   Contact scope

   Replaced the form and notice-box styles when the contact form was removed
   (2026-08-15). Nothing on the site posts anything any more, so .form,
   .form__field, .form__submit and .notice went with it rather than sitting
   here as dead rules waiting to be re-used by accident.
   ----------------------------------------------------------------------------- */

.contact__address {
  font-family: var(--font-mono);
  margin-bottom: 2rem;
}

.contact__scope {
  list-style: none;
  margin: 0 0 2rem;
  padding: 0;
}

.contact__scope li {
  position: relative;
  padding-left: 1.25rem;
  margin-bottom: 0.6rem;
  line-height: 1.7;
}

/* A marker rather than a bullet: the list is a set of doors, and the accent
   colour is what the rest of the site uses to mean "this one is for you". */
.contact__scope li::before {
  content: "\2013";
  position: absolute;
  left: 0;
  color: var(--color-accent);
}

.contact__elsewhere {
  font-size: 0.9rem;
  color: var(--color-text-muted, inherit);
  border-top: 1px solid var(--color-border);
  padding-top: 1.25rem;
}

/* -----------------------------------------------------------------------------
   Button
   ----------------------------------------------------------------------------- */

.btn {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  color: var(--color-accent);
  border: 1px solid var(--color-accent);
  border-radius: 4px;
  padding: 0.6rem 1.5rem;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}

.btn:hover {
  background: var(--color-accent);
  color: var(--color-bg);
  text-decoration: none;
}

/* -----------------------------------------------------------------------------
   Footer
   ----------------------------------------------------------------------------- */

.footer {
  border-top: 1px solid var(--color-border);
  padding: 2rem 0;
  margin-top: auto;
}

.footer__inner {
  text-align: center;
}

.footer__copyright {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin-bottom: 0.5rem;
}

.footer__links {
  margin-bottom: 0.75rem;
}

.footer__links a {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  transition: color 0.2s ease;
}

.footer__links a:hover {
  color: var(--color-accent);
  text-decoration: none;
}

.footer__sep {
  color: var(--color-border);
  margin: 0 0.5rem;
}

.footer__note {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  font-style: italic;
}

/* -----------------------------------------------------------------------------
   Responsive
   ----------------------------------------------------------------------------- */

@media (max-width: 640px) {
  /* The header is a space-between flex row: mark + wordmark on the left, nav on
     the right. Below roughly 400px there is not room for both, and the two
     collided — the wordmark ran under "Privacy" and rendered as
     "leet enterprisesivacy". Pre-existing, and invisible until someone looked
     at a phone.

     The wordmark goes rather than the mark: the mark alone identifies the site,
     and the full wordmark is the first thing in the hero immediately below. */
  .header__wordmark-img {
    display: none;
  }

  .nav {
    gap: 1.25rem;
  }

  .hero {
    padding: 4rem 0 3rem;
  }

  .hero__logo-img {
    height: 48px;
  }

  .hero__wordmark {
    font-size: 1.1rem;
  }

  .hero__wordmark-img {
    height: 20px;
  }

  .hero__philosophy {
    font-size: 1rem;
  }

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

  .brand-card,
  .brand-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .brands {
    padding: 1rem 0 4rem;
  }

  .page {
    padding: 3rem 0 4rem;
  }

  .page h1 {
    font-size: 1.4rem;
  }
}

/* -----------------------------------------------------------------------------
   ABOUT + FOUNDER

   Both are short pages of running prose and take .page's defaults. The only
   thing either adds is the measure — a page people read wants a narrower column
   than the 720px .container--narrow gives a page people scan, which is the same
   call /philosophy makes.
   ----------------------------------------------------------------------------- */

.about .container--narrow,
.founder .container--narrow {
  max-width: 40rem;
}

.about p,
.founder p {
  line-height: 1.75;
  margin-bottom: 1.15rem;
}

/* The line that closes About, to /thesis and /experiment. Quiet on purpose: an
   offer to go and read, not a summary of what is there.

   ⚠ A CONTACT POINTER BRIEFLY SHARED THIS RULE (2026-08-23). Contact rendered
   here as a full section, became a one-line pointer, and was then dropped
   outright the same night — /contact and the footer are its only homes. The
   .about__contact-link selector went with it rather than being left matching
   nothing; unlike the /experiment rules kept above, this one has no page waiting
   to want it back. */
.about__thesis-link {
  color: var(--color-text-muted);
  font-size: 0.95rem;
  margin-top: 1.75rem;
}

/* -----------------------------------------------------------------------------
   THE DOCTRINE  (/thesis)

   482 words that are mostly a list, which is the opposite of the argument page's
   long prose — so the type does less and the structure does more. The lists are
   the page; they get room, a hanging marker, and a second level that reads as
   elaboration rather than as more items.
   ----------------------------------------------------------------------------- */

.doctrine .container--narrow {
  max-width: 40rem;
}

.doctrine p {
  line-height: 1.75;
  margin-bottom: 1.15rem;
}

/* The definition of the phrase the company is named for. It is the one
   paragraph on the site that has to survive being read on its own. */
.doctrine__definition {
  font-size: 1.05rem;
  color: var(--color-text);
}

/* The claim — the hinge between the definition and the commitments, added in the
   v2 restructure. It replaced the muted transition line that stood here, and it
   is NOT muted: the old line only named the three commitments, this one states
   what the document claims, and it is the sentence a reader should carry away. */
.doctrine__claim {
  font-size: 1.05rem;
  line-height: 1.75;
  margin-bottom: 2.25rem;
  padding-bottom: 1.75rem;
  border-bottom: 1px solid var(--color-surface);
}

/* The outcomes section's own claim sentence, which restates the hinge as a
   bookend. The bold runs inline from canon; this only gives the paragraph room. */
.doctrine__follows-claim {
  margin-top: 1.75rem;
}

.doctrine__follows-claim strong {
  font-weight: 700;
}

.doctrine__lead {
  margin-bottom: 1rem;
}

.doctrine__list {
  list-style: none;
  padding-left: 1.25rem;
  margin-bottom: 1.75rem;
}

.doctrine__list li {
  position: relative;
  line-height: 1.7;
  margin-bottom: 0.7rem;
}

.doctrine__list li::before {
  content: "—";
  position: absolute;
  left: -1.25rem;
  color: var(--color-accent);
}

/* Second level. The marker changes and the ink drops, so a sub-bullet reads as
   elaboration of the line above it rather than as another commitment — which is
   the distinction the key names carry in canon (earnedGrowth under earned). */
.doctrine__list--sub {
  margin-top: 0.7rem;
  margin-bottom: 0;
  padding-left: 1.1rem;
}

.doctrine__list--sub li {
  color: var(--color-text-muted);
  font-size: 0.96rem;
}

.doctrine__list--sub li::before {
  content: "·";
  left: -1.1rem;
}

/* The close, which echoes the argument page's last line on purpose. Set apart
   above the mission and vision so the doctrine ends before the implementation
   begins. */
.doctrine__close {
  margin-top: 2.25rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--color-surface);
  font-size: 1.05rem;
}

.doctrine .brand-statement:first-of-type {
  margin-top: 2rem;
}

/* ⛔ NO .doctrine__intro RULE — THE INTRO IS CUT FROM THE PAGE (Shannon,
   2026-08-21 evening). /thesis is the artifact: title, byline, document, closer,
   hand-off line. The orientation line that stood here was the site's voice inside
   the document's frame; its style rule goes with it rather than sitting unused. */

/* THE EYEBROW ABOVE THE h1 — "The founder's thesis" (ruled 2026-08-23). Same
   device and same treatment as /experiment's commitment labels: mono, muted,
   tracked out, uppercased HERE and not in canon.

   ⚠ IT IS A SECOND COPY OF THE .thesis__label RULE, DELIBERATELY, AND THE TWO
   MUST BE CHANGED TOGETHER. They cannot share one selector cheaply: each is
   double-classed to out-specify its own page's `p` rule (`.thesis p` and
   `.doctrine p` both set a bottom margin the eyebrow has to undo), and the pages
   are separate blocks in this file. ⛔ If you restyle one eyebrow, restyle both —
   they are one device and a reader moves between the two pages in one click. */
.doctrine .doctrine__label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 0;
  line-height: 1.4;
}

/* The h1 must not add its own top margin under the eyebrow — the pair reads as
   one unit. ⚠ .doctrine__byline below carries margin-top: -1.25rem to pull
   itself up under the h1; that is unrelated and still correct. */
.doctrine .doctrine__label + h1 {
  margin-top: 0;
}

/* The byline. Structure, not voice — the document speaks as "a business" and
   this line says who wrote it, outside the text (the Agile-principles pattern).
   Set in the heading family and muted so it reads as the artifact's frame
   rather than as the first line of it.

   ⛔ NO COPYRIGHT OR LICENCE LINE SITS UNDER THIS until Shannon rules on one —
   personal © versus the LLC is an attorney question and CC BY-ND is a one-way
   door. If a rule for one is ever added, it belongs here. */
.doctrine__byline {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--color-text-muted);
  letter-spacing: 0.02em;
  margin-top: -1.25rem;
  margin-bottom: 2rem;
}

/* The hand-off to /experiment. The document ends at .doctrine__close; this is
   chrome after it, so it is set apart and quiet — the artifact should look
   finished before the site speaks again. */
.doctrine__handoff {
  margin-top: 2.25rem;
  color: var(--color-text-muted);
  font-size: 0.95rem;
}

/* -----------------------------------------------------------------------------
   HOME  (/)

   Pure orientation and routing (Shannon, 2026-08-21): two hero lines, the brands
   lead-in, the two brand cards, two doors. No definition — it lives on /thesis
   and the hero's term links there. Everything is centred; the page is
   deliberately small, and the type carries that — nothing competes with the
   first hero line, which is the only thing here that has to be read.
   ----------------------------------------------------------------------------- */

.hero--home {
  padding-bottom: 1.5rem;
}

/* A WIDER MEASURE THAN THE OLD HERO'S 680px, and the reason is the first line.
   At 680 it wrapped to two lines on every desktop width — the balance kept it
   tidy but it read as cramped in the largest type on the site. The line is ~53
   characters of mono; this gives it room to sit on one line above roughly 830px
   and to balance into two below that. */
.hero--home .hero__copy {
  max-width: 52rem;
}

/* The hero's first line, and the largest type on the site. It is the site map:
   both links live inside the sentence, so they are underlined on hover like any
   other link rather than dressed as buttons — the reader should feel they are
   reading a sentence that happens to be navigable, not looking at a menu. */
.home__hero-practice {
  font-family: var(--font-mono);
  font-size: 1.5rem;
  line-height: 1.4;
  letter-spacing: -0.01em;
  text-wrap: balance;
  margin-bottom: 1rem;
}

/* The <em> is the name of a document, not stress. Kept upright-adjacent by the
   mono face; the link colour is what marks it as reachable. */
.home__hero-practice em {
  font-style: italic;
}

/* The second line. Body face, quieter, and allowed to wrap to two lines — it is
   a sentence about what the company does, under a line about what it is. */
/* ⛔ margin-inline: auto IS LOAD-BEARING, not tidiness. This line takes a
   narrower measure than the line above it, and without the auto margins that
   narrower box sits flush left inside the centred hero — so the text centres
   itself against the wrong box and the two hero lines visibly disagree about
   where the middle of the page is. Any future max-width here needs the same
   pairing. */
.home__hero-build {
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--color-text-muted);
  max-width: 34rem;
  margin-inline: auto;
  text-wrap: pretty;
}

/* The statement introducing the brands. It sits in the slot the definition used
   to occupy — one line, centred, quiet, doing the job a heading would do without
   sounding like a filing category. */
.home-brands__lead {
  text-align: center;
  max-width: 34rem;
  /* ⛔ auto SIDE MARGINS ARE LOAD-BEARING, like .home__hero-build's. Without
     them the narrower box sits flush left inside the container and the centred
     text centres against the wrong box — which is exactly how this rendered when
     the rule was accidentally deleted and the element fell back to the default
     block layout. The 3.5rem below it separates the sentence from the cards it
     introduces; at 2.5rem it read as a caption stuck to the top card. */
  margin: 0 auto 3.5rem;
  color: var(--color-text-muted);
  line-height: 1.7;
}

/* ⛔ OVERRIDES .brands' 2rem/6rem. That padding was built for the old home,
   where the cards were the last thing on the page and needed room under them
   before the footer. Here they sit mid-page with the definition below, and the
   inherited 6rem left a void that read as the page having ended. */
.home-brands {
  padding: 2.5rem 0 5rem;
}

/* ⛔ NO .home-definition RULES — THE BLOCK IS GONE FROM HOME. Shannon cut the
   definition from the page on 2026-08-21; the definition's only home is /thesis
   and .doctrine__definition styles it there. The rules that stood here are
   removed rather than left matching nothing. */

/* ⛔ THE HOME BRANDS BLOCK HAS NO RULES OF ITS OWN. Shannon ruled 2026-08-21
   that home carries the same FULL cards as /brands, so it reuses .brands,
   .brands__grid and .brand-card — one presentation for one pair of strings, the
   same reasoning that keeps .brand-statement un-namespaced. The .home-strip__*
   rules that stood here were written for the three-line strip that ruling
   replaced, and are removed rather than left matching nothing. */

/* ⛔ NO .home-doors RULES — THE TWO DOOR BUTTONS ARE REMOVED FROM HOME (Shannon,
   2026-08-21 evening). The hero sentence already links to /thesis and /experiment
   from inside itself and the nav carries both, so the buttons were redundant
   routing. Home ends at the cards. */

/* -----------------------------------------------------------------------------
   BRANDS  (/brands)

   The cards moved here from the home page unchanged, so they keep .brands__grid
   and .brand-card. This block only makes room for the page heading above them.
   ----------------------------------------------------------------------------- */

/* The intro — the thing that makes this a page and not a reprint of the home
   page's card block. Given the reading measure the prose pages use, and left
   aligned: /brands is a page you read down, not a centred landing screen. */
.brands-page__intro {
  max-width: 38rem;
  line-height: 1.75;
  color: var(--color-text-muted);
  margin-bottom: 2.5rem;
}

.brands-page .brands__grid {
  margin-top: 1rem;
}

/* -----------------------------------------------------------------------------
   INVESTORS  (/investors)

   Footer-linked only. Nothing bespoke — it is a short prose page and .page
   carries it. The measure is tightened to match the other reading pages.
   ----------------------------------------------------------------------------- */

.investors .container--narrow {
  max-width: 40rem;
}

.investors p {
  line-height: 1.75;
  margin-bottom: 1.15rem;
}