/* ============================================================
   FLIBBR ABOUT — Tier-1 page-specific CSS

   Drives page-about.php — the firm story, the bench, how we
   engage, locations, and the quiet links rail.

   Lifted verbatim from flibbr-design-mockup-final-about.html
   (canonical locked 30 Apr 2026, v6).
   Source range: canon lines 1886–2223.

   .page-header* selectors are NOT in this file — they're in
   page-chassis.css (lifted from canon page.html) so all Tier-1
   templates share the same hero-frame chassis.

   Conditionally enqueued from functions.php on
   `is_page_template( 'page-about.php' )`.
   ============================================================ */

.firm-story {
  padding-block: var(--s-9);
  border-bottom: 1px solid var(--rule-soft);
}
.firm-story-grid {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--s-7);
  align-items: start;
}
@media (max-width: 880px) {
  .firm-story-grid { grid-template-columns: 1fr; gap: var(--s-5); }
}
.firm-story-label {
  font-family: var(--sans); font-weight: 600;
  font-size: 11px; line-height: 1.2;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-quiet);
  padding-top: var(--s-3);
  border-top: 1px solid var(--ink);
}
.firm-story-prose {
  max-width: 60ch;
}
/* v5 (30 Apr 2026): editorial breathing on the prose, lifted
   from v3. Inter-paragraph rhythm increased to --s-7,
   line-height up to 1.78, lede paragraph treatment, and the
   pull-quote sits in its own breathing room. */
.firm-story-prose > * + * { margin-top: var(--s-7); }
.firm-story-prose p {
  font-family: var(--serif); font-weight: 400;
  font-size: 19px; line-height: 1.78;
  color: var(--ink-soft);
  margin-bottom: 0; /* v0.5.30 fix: was `margin: 0` shorthand which
                       reset margin-top and broke the > * + * rule
                       above. Canon comment block (line 1910–1913)
                       intent: "Inter-paragraph rhythm increased to
                       --s-7." Splitting axes lets > * + * win. */
}
.firm-story-prose p em { font-style: italic; }
.firm-story-prose p strong { font-weight: 600; color: var(--ink); }

/* lede — the first paragraph reads slightly larger and warmer,
   setting a deliberate editorial entry to the story. */
.firm-story-prose p.lede {
  font-size: 22px; line-height: 1.65;
  color: var(--ink);
  font-weight: 400;
}

.firm-story-pull {
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1.4; color: var(--ink);
  border-left: 2px solid var(--accent);
  padding-left: var(--s-6);
  padding-block: var(--s-3);
  margin-block: var(--s-8) !important;  /* override > * + * rule
                                           so the pull breathes
                                           more than ordinary paras */
  max-width: 56ch;
}
.firm-story-pull em { font-style: normal; }  /* italic-within-italic
                                                drops back to roman
                                                (proper typography) */

/* the bench — Flibbrati teaser */
.bench {
  padding-block: var(--s-9);
  border-bottom: 1px solid var(--rule-soft);
}
.bench-intro {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--s-7);
  align-items: end;
  margin-bottom: var(--s-7);
}
@media (max-width: 880px) {
  .bench-intro { grid-template-columns: 1fr; gap: var(--s-5); align-items: start; }
}
.bench-headline {
  margin: 0;
  max-width: 18ch;
}
.bench-supporting {
  max-width: 44ch;
}
.bench-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--s-5);
  margin-top: var(--s-5);
}
@media (max-width: 880px) {
  .bench-grid { grid-template-columns: repeat(3, 1fr); gap: var(--s-4); }
}
@media (max-width: 540px) {
  .bench-grid { grid-template-columns: repeat(2, 1fr); }
}
.bench-card {
  text-decoration: none; color: inherit;
  display: flex; flex-direction: column;
  gap: var(--s-3);
}
.bench-portrait {
  aspect-ratio: 4/5;
  background: var(--paper-warm);
  border: 1px solid var(--rule);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}
.bench-portrait img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
/* v0.5.129: the "Flibbrati portrait" placeholder label shows only on the
   empty-state fill — suppressed once a real portrait image is present. */
.bench-portrait:not(.has-image)::after {
  content: "Flibbrati portrait";
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--sans); font-size: 10px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-quiet);
  text-align: center;
  padding: var(--s-3);
}
.bench-name {
  font-family: var(--serif); font-weight: 600;
  font-size: 15px; line-height: 1.2;
  color: var(--ink);
}
.bench-role {
  font-family: var(--sans); font-weight: 400;
  font-size: 12px; line-height: 1.4;
  color: var(--ink-quiet);
}
.bench-cta {
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  border-top: 1px solid var(--rule);
  display: flex; justify-content: space-between; align-items: baseline;
  flex-wrap: wrap;
  gap: var(--s-3);
}
.bench-cta-meta {
  font-family: var(--sans); font-weight: 400;
  font-size: 12px; color: var(--ink-quiet);
  letter-spacing: 0.06em; text-transform: uppercase;
}
.bench-cta-link {
  font-family: var(--sans); font-weight: 500;
  font-size: 14px; color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 2px;
  display: inline-flex; align-items: center; gap: 6px;
  transition: gap var(--motion-duration-ui) var(--motion-ease-ui);
}
.bench-cta-link::after {
  content: ""; display: inline-block;
  width: 0.85em; height: 0.85em;
  background-color: currentColor;
  -webkit-mask: var(--arrow-svg-right) no-repeat center / contain;
          mask: var(--arrow-svg-right) no-repeat center / contain;
  flex: none;
}
.bench-cta-link:hover { gap: 10px; }

/* how we work — engagement models + quiet stance */
.how-we-work {
  padding-block: var(--s-9);
  border-bottom: 1px solid var(--rule-soft);
}
.how-we-work-intro {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--s-7);
  align-items: end;
  margin-bottom: var(--s-7);
}
@media (max-width: 880px) {
  .how-we-work-intro { grid-template-columns: 1fr; gap: var(--s-5); align-items: start; }
}
.how-we-work-headline { margin: 0; max-width: 22ch; }
.how-we-work-supporting { max-width: 48ch; }

.engagement-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border-top: 1px solid var(--ink);
  border-left: 1px solid var(--rule);
}
@media (max-width: 720px) {
  .engagement-list { grid-template-columns: 1fr; }
}
.engagement-row {
  padding: var(--s-6) var(--s-6) var(--s-5);
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: var(--s-4) var(--s-4);
  background: var(--paper);
  transition: background var(--motion-duration-content) var(--motion-ease-content);
}
.engagement-row:hover { background: var(--paper-warm); }
.engagement-numeral {
  font-family: var(--serif); font-weight: 300;
  font-size: 38px; line-height: 0.9;
  color: var(--ink-quiet);
  grid-column: 1; grid-row: 1 / 3;
  padding-top: 2px;
}
.engagement-name {
  font-family: var(--serif); font-weight: 400;
  font-size: 22px; line-height: 1.2;
  color: var(--ink);
  grid-column: 2; grid-row: 1;
}
.engagement-name em { font-style: italic; }
.engagement-body {
  font-family: var(--serif); font-weight: 400;
  font-size: 16px; line-height: 1.55;
  color: var(--ink-soft);
  grid-column: 2; grid-row: 2;
}
.engagement-body em { font-style: italic; }

/* quiet stance below engagement models */
.stance {
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  border-top: 1px solid var(--rule);
  max-width: 56ch;
}
.stance p {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: 18px; line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
}
.stance p + p { margin-top: var(--s-3); }
.stance p strong { font-style: normal; font-weight: 600; color: var(--ink); }

/* locations */
.locations {
  padding-block: var(--s-9);
  border-bottom: 1px solid var(--rule-soft);
}
.locations-intro {
  margin-bottom: var(--s-7);
  display: flex; align-items: baseline; gap: var(--s-5);
  flex-wrap: wrap;
  padding-bottom: var(--s-5);
  border-bottom: 1px solid var(--rule);
}
.locations-headline { margin: 0; }
.locations-supporting {
  font-family: var(--serif); font-weight: 400; font-style: italic;
  font-size: 17px; line-height: 1.5;
  color: var(--ink-soft);
  max-width: 36ch;
}
.locations-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-7);
}
@media (max-width: 880px) {
  .locations-grid { grid-template-columns: 1fr; gap: var(--s-6); }
}
.location {
  display: flex; flex-direction: column;
  gap: var(--s-3);
}
.location-label {
  font-family: var(--sans); font-weight: 600;
  font-size: 11px; line-height: 1;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--ink);
}
.location-address {
  font-family: var(--sans); font-weight: 400;
  font-size: 14px; line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
}
.location-pending {
  font-family: var(--sans); font-style: italic;
  font-size: 13px; color: var(--ink-quiet);
}

/* quiet links rail
   v0.5.90 — rules lifted to assets/css/links-rail.css (shared
   with /contact/). Enqueued conditionally on /about/ via
   functions.php. Single source of truth — see
   flibbr-design-mockup-final-about.html v6 for canonical. */

/* G.3b — bench-cta-link tap-target */
@media (max-width: 880px) {
  .bench-cta-link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/* ============================================================
   v0.5.275 (Ship C corrective): mobile section-padding
   tightening — About-specific.

   The v0.5.274 base.css override only targeted .section
   (the chassis class), but About's sections use page-specific
   classes (.firm-story, .bench, .clientele-grid-compact,
   .how-we-work, .locations). This block collapses their 96/96
   padding to 48/48 at <=880px to match the chassis pattern.

   .clientele-grid-compact uses padding-block 96/0 — only the
   top reduces here; the 0-bottom is intentional (visual
   continuity with the section above).

   Placed at end-of-file per op-learning #G-source-order.
   ============================================================ */
@media (max-width: 880px) {
  .firm-story,
  .bench,
  .how-we-work,
  .locations {
    padding-block: var(--s-7);
  }
  .clientele-grid-compact {
    padding-top: var(--s-7);
  }
}

/* ============================================================
   v0.5.279: About — mobile typography refinement.

   Two mobile-only adjustments (<=880px) to make "The Story"
   prose feel less unset:

   1. Lede flattens to body. The desktop lede treatment
      (22px / 1.65 / --ink) draws the eye at desktop column
      width but creates an awkward narrow-column wrap at
      mobile, with the visual size break felt as a hierarchy
      glitch rather than as warmth. At mobile, lede matches
      body 19px / 1.78 / --ink-soft.

   2. text-wrap: pretty on all firm-story-prose paragraphs.
      Modern Chrome/Safari (Firefox in progress) algorithm
      prevents the last line of a paragraph being a single
      orphan word. Softens the rag without justifying.
      Graceful degradation: older browsers ignore.

   Desktop unchanged. Pull-quote treatment (.firm-story-pull)
   unchanged. Inter-paragraph rhythm unchanged (kept --s-7
   for now per editorial breathing intent).

   Placed at end-of-file per op-learning #G-source-order.
   ============================================================ */
@media (max-width: 880px) {
  .firm-story-prose p {
    text-wrap: pretty;
  }
  .firm-story-prose p.lede {
    font-size: 19px;
    line-height: 1.78;
    color: var(--ink-soft);
  }
}