/* ==========================================================================
   TradeForma — About page ("Private Trading House" edition)
   ========================================================================== */

/* Shared inset for every ruled block on this page: the statement, its
   supporting copy, and the credentials ledger all hang off one gold rule. */
.tf-about { --about-inset: clamp(1.4rem, 3vw, 2.6rem); }

.about-media { margin-top: clamp(2.5rem, 4vw, 4rem); }
.about-media picture {
  display: block;
  width: 100%;
}
.about-media img {
  width: 100%;
  aspect-ratio: 21 / 9;
  max-height: 46vh;
  object-fit: cover;
  object-position: center 30%;
  filter: grayscale(0.45) contrast(1.03) brightness(0.92) sepia(0.18);
}

/* Gold kicker dash — optically centred on the uppercase cap band, not on the
   flex line box (the 1.7 line-height sits the dash a pixel low at 12px). */
.tf-about .kicker::before { transform: translateY(-1px); }

/* About statement measure tuned for a three-line stack */
.tf-about .statement {
  max-width: 27ch;
}

/* Credentials ledger — a ruled ledger: each cell hangs off its own champagne
   hairline, and the first cell's rule lines up with the gold spine of the
   statement bar above so the two read as one continuous rule.
   Grid stays flush (no left margin) so the first rule sits on the content
   edge instead of indenting the whole block to a third left edge. */
/* Bottom padding pulled in hard: the ledger's closing rule now sits close to
   the "Why" band's gold rule below it, instead of leaving a full --sec of
   full-width dead space between two rules that read as one rhythm. */
.about-intro { padding-bottom: clamp(1.5rem, 2.5vw, 2.25rem); }
.creds-grid {
  list-style: none;
  margin: clamp(2.5rem, 4vw, 3.5rem) 0 0;
  /* The breath under the black rule belongs to the GRID, not the cells: the
     gold hairlines are borders on the cells, so padding here keeps them
     starting BELOW the rule with clear space above them, instead of hanging
     straight off it. Putting this padding on the cells makes the rule look
     like a comb. */
  padding: clamp(1.8rem, 3vw, 2.6rem) 0 1rem;
  border-top: 1px solid var(--ink);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem;
}
.creds-grid li {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  border-left: 1px solid var(--gold);
  padding-left: 1.1rem;
}
/* Ink values: the champagne accent is carried by the cell rules, so the
   ledger's typography stays at full contrast (ink on --paper is past 13:1). */
.creds-value {
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-weight: 500;
  font-variation-settings: "opsz" 32, "WONK" 0;
  font-size: 1.35rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-wrap: balance;
}
.creds-note {
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--smoke);
  text-wrap: pretty;
}

/* Why work with us — one ruled band instead of a two-column grid that left
   the left half empty once the heading scrolled off. The heading and the
   argument now share the left measure, so neither side reads as a vacant
   half, and the section opens on the gold rule it was missing. */
/* Top padding trimmed alongside .about-intro's bottom padding so the ledger ->
   "Why" gap returns to the page's original rhythm; an unequal split keeps the
   rule closer to the ledger it belongs to than to the heading below it. */
.about-why-sec { padding-block: clamp(2rem, 3vw, 2.75rem) clamp(3.5rem, 6vw, 5.5rem); }
.about-why {
  display: grid;
  grid-template-columns: minmax(0, 46ch) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 7rem);
  align-items: start;
  border-top: 1px solid var(--gold-deep);
  padding-top: 1.6rem;
}
.about-why h2 {
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-weight: 500;
  font-variation-settings: "opsz" 32, "WONK" 0;
  font-size: clamp(1.7rem, 2.2vw + 0.8rem, 2.6rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-wrap: balance;
  /* Foil rule capping the heading — the page's 2px gold bar set horizontally.
     Painted on the padding box so the heading's first line keeps the same
     baseline as the first line of the argument beside it. */
  background-image: linear-gradient(var(--gold), var(--gold));
  background-repeat: no-repeat;
  background-size: 100% 2px;
  background-position: 0 0;
  padding-top: 1.15rem;
}
.about-why p {
  color: var(--smoke);
  max-width: 56ch;
  text-wrap: pretty;
  padding-top: 1.15rem;
}

.about-cta {
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
/* Sign-off CTA aligns with the indented statement paragraph, not the edge */
.about-signoff .about-cta { margin-left: var(--about-inset); }

@media (max-width: 640px) {
  .about-signoff .about-cta { margin-left: 0; padding-left: var(--about-inset); }
}
@media (max-width: 820px) {
  .about-why { grid-template-columns: minmax(0, 1fr); gap: 1.6rem; }
  .about-why p { max-width: none; }
  .about-why-sec { padding-block: clamp(2.75rem, 8vw, 3.5rem); }
  .about-media img { aspect-ratio: 16 / 10; }
  .creds-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
  .creds-value { font-size: 1.2rem; }
}