/* About page (/about) — the one long-form, pre-auth surface the Club has.
   Everything structural (palette, radii, the three brand faces) comes from
   shared/styles.css; this file only sets the reading measure and the three
   section rhythms the app itself never needs.

   The canvas deliberately matches .landing's #F2E8D4 cream rather than the
   stone-textured in-app body: a reader arriving from the sign-in card should
   not feel like they changed products, and long prose on the mottled stone
   is measurably harder to read. */

.about-body {
  margin: 0;
  background: #F2E8D4;
  color: var(--ink);
  font-family: var(--font-ui);
  /* Long copy on a light ground: iOS renders -apple-system-ish stacks a shade
     heavy at this size, and the sandstone kit is already low-contrast. */
  -webkit-font-smoothing: antialiased;
}

.about {
  /* ~62 characters at the body size — the measure long prose actually reads
     at. The triad and the plan cards break out of it below via their own
     grids, so the column governs text and nothing else. */
  max-width: 660px;
  margin: 0 auto;
  padding: 0 22px max(48px, env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
}

/* ---------- masthead ---------- */

.about-masthead {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: max(20px, env(safe-area-inset-top, 0px)) 0 8px;
}

/* Sits above the crest, left-aligned against the reading column rather than
   centred with it: it is a way out, not part of the masthead composition. */
.about-back {
  align-self: flex-start;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--link);
  text-decoration: none;
  padding: 8px 2px;
  /* 44px of vertical target without 44px of visible chrome. */
  margin: -8px 0 12px;
}
.about-back:hover { color: #5C3F26; }

.about-crest {
  width: clamp(88px, 22vw, 132px);
  height: auto;
  margin: 0 0 18px;
}

/* White-label fallback: tenant.js unhides this and hides the crest when a
   licensee's name paints over the flagship's. */
.about-wordmark {
  font-family: var(--font-display);
  font-size: clamp(26px, 7vw, 38px);
  font-weight: 700;
  line-height: 1.12;
  color: #2E1C0E;
  margin: 0 0 18px;
}

.about-eyebrow {
  font-family: var(--font-display);
  font-size: clamp(15px, 4.2vw, 20px);
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #2E1C0E;
  /* Same hairline stroke the landing overline uses — The Seasons has genuinely
     thin strokes and reads light on cream without it. */
  -webkit-text-stroke: 0.3px #2E1C0E;
  margin: 0 0 6px;
}

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

.about-section { padding: 34px 0 6px; }

.about-kicker {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-dark);
  margin: 0 0 10px;
}

.about-title {
  font-family: var(--font-display);
  font-size: clamp(24px, 6.4vw, 34px);
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: 0.01em;
  color: #2E1C0E;
  margin: 0 0 16px;
}

.about-lede,
.about-prose {
  font-size: clamp(15px, 4vw, 17px);
  line-height: 1.62;
  color: #3A2A18;
  margin: 0 0 16px;
}
/* Emphasis inside the prose. The founder note leans on it — five of the six
   bolds land on the "simple X" repetition, which is the paragraph's whole
   rhythm, so the weight has to be visible at a glance while scanning.
   700 rather than 600: DM Sans ships 400/500/700 (see the @font-face block in
   styles.css), so 600 has no file and would synthesise — a smeared fake bold
   next to the real one everywhere else on the page. The colour steps up to the
   heading ink at the same time; on cream, weight alone reads weaker than it
   measures, and the darker ink is what makes the phrase pop out of the line. */
.about-prose strong,
.about-lede strong {
  font-weight: 700;
  color: #2E1C0E;
}

.about-rule {
  border: 0;
  border-top: 1px solid var(--hairline);
  margin: 34px 0 0;
}

/* ---------- philosophy triad ---------- */

.about-triad {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  margin-top: 26px;
}
/* Three abreast only where three columns still hold a readable line. Below
   that they stack, each keeping the copper rule as its left edge. */
@media (min-width: 720px) {
  .about-triad { grid-template-columns: repeat(3, 1fr); gap: 26px; }
}

.about-pillar {
  border-left: 2px solid var(--accent);
  padding-left: 14px;
}
.about-pillar h3 {
  font-family: var(--font-display);
  font-size: clamp(17px, 4.6vw, 19px);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #2E1C0E;
  margin: 0 0 7px;
}
.about-pillar p {
  font-size: 14.5px;
  line-height: 1.58;
  color: #4A3623;
  margin: 0;
}
/* The pillars carry bullets now, not prose. No disc: a marker plus the copper
   rule already down the left edge is two competing left margins in a column
   this narrow, and the rule is the one that ties the three pillars together.
   The list reads as short lines because they ARE short lines — the spacing
   between items is what separates them. */
.about-pillar ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.about-pillar li {
  font-size: 14.5px;
  line-height: 1.58;
  color: #4A3623;
  margin: 0 0 9px;
}
.about-pillar li:last-child { margin-bottom: 0; }

/* ---------- pricing ---------- */

.about-plans {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin: 24px 0 18px;
}
@media (min-width: 620px) {
  .about-plans { grid-template-columns: repeat(2, 1fr); }
}

.about-plan {
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 20px 20px 22px;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
}

.about-plan-name {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #2E1C0E;
  margin: 0 0 10px;
}

.about-plan-price {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 700;
  line-height: 1;
  color: var(--accent-dark);
  margin: 0;
}
.about-plan-cadence {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 8px 0 0;
}

.about-plan-allowance {
  font-size: 14.5px;
  line-height: 1.5;
  color: #3A2A18;
  margin: 14px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--hairline);
}

.about-plans-fallback,
.about-fineprint {
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
  margin: 0;
}
.about-plans-fallback { margin: 20px 0; }

/* ---------- about me ---------- */

/* The signature: Patrick's real signing mark, as vector art.
   It replaced a "— Patrick" line set in --font-script. That token names the
   wordmark's script face first, but those font files have never been committed
   (see the note above the DM Sans faces in styles.css), so the line resolved to
   Snell Roundhand on Apple devices and to the display serif everywhere else —
   it was never going to be a signature, only something shaped like one.

   Sized by HEIGHT with a width cap. Height is what makes a signature read as
   one; the cap is what stops a 5.9:1 mark running the full column on a narrow
   screen, where it would out-measure the prose it signs off. */
.about-signature {
  display: block;
  /* WIDTH-driven, height auto — never both. The crest on the landing shipped
     stretched exactly once by taking a width from one rule and a height from
     another, and `height` plus `max-width` is the same trap in one rule: when
     the cap binds it clamps the width while the height stays put, and a 5.9:1
     signature renders squashed. Width alone can only ever scale it.
     The block is 3.1:1 (341x110), so the range is set on width. Halved on
     Patrick's instruction (was clamp(232px, 70vw, 288px)): 144px now lands it
     at ~46px tall and 116px at ~37px.

     The old floor was 232px, and the note there claimed the envelope
     reference stopped being legible below it. Checked rather than assumed
     before halving: at 137px on a 3x phone the GUID still reads cleanly, and
     at 1x it is tight but present. So the floor was cautious, not a cliff —
     it is a texture at a glance and a string if you look, which is the right
     weight for something that should sign the page rather than dominate it. */
  width: clamp(116px, 35vw, 144px);
  height: auto;
  margin: 22px 0 0;
}

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

.about-foot {
  margin-top: 40px;
  padding-top: 26px;
  border-top: 1px solid var(--hairline);
  text-align: center;
}

.about-cta {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-dark);
  text-decoration: none;
  border: 1px solid var(--border-2);
  border-radius: 999px;
  padding: 13px 26px;
}
.about-cta:hover { background: var(--accent-soft); }

.about-copyright {
  margin: 22px 0 0;
  font-size: clamp(9px, 2.4vw, 11px);
  letter-spacing: 0.02em;
  color: rgba(58, 38, 20, 0.5);
  overflow-wrap: break-word;
}

@media (prefers-reduced-motion: no-preference) {
  .about-back, .about-cta { transition: color var(--dur-1) var(--ease), background var(--dur-1) var(--ease); }
}