/* Protagonist Ink — Our Approach page.
   Loads after ../styles.css, which supplies the tokens, type, header, footer,
   buttons and the invitation with its form. This file adds only the page's own
   compositions, following the approved Notion wireframe (updated 11 Oct 2026):
   Opening → The people → Fast facts → How we work (the one ink field) →
   Capabilities → Invitation. Fast facts and How we work follow
   about-page-build-spec.md (Head to head, Editorial rows). */

/* Page grid. Kept separate from .grid, which the homepage forces to one column
   below 900px; this page recomposes tablet and phone section by section. */
.about-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }

.section-head { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }

/* ---------- FPO image slots ----------
   .media is the frame: ratio or height, corners, crop. The .fpo panel inside is
   the placeholder. To place a final asset, replace the .fpo element with
   <img src="…" alt="…" width="…" height="…"> and keep the .media wrapper, so
   the layout doesn't move. Proof fill, per the wireframe's system notes. */
.media { position: relative; overflow: hidden; border-radius: var(--radius-frame); background: var(--proof); }
.media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.media > picture { position: absolute; inset: 0; display: block; }
.media > picture > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fpo { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: var(--space-4); text-align: center; background: var(--proof); color: var(--ink); }
.fpo-label { max-width: 30ch; font-size: 16px; font-weight: 500; line-height: 1.35; text-wrap: balance; }
.fpo-note { max-width: 36ch; font-size: 14px; line-height: 1.45; text-wrap: balance; }

/* ---------- 1. Opening ----------
   The eyebrow, then the campfire illustration across all twelve columns, then
   the statement it sets up and a short lede. The illustration is a transparent
   PNG, so it sits straight on paper with no frame. */
.about-opening { padding-top: var(--space-6); }
.opening-illo { margin: 20px 0 0; display: flex; flex-direction: column; gap: 12px; }
/* Capped to the screen height so both lines of the headline land on the first
   screen of a laptop; on short screens it scales down, left-aligned with the
   text (its transparent ground keeps the leftover space invisible). */
.opening-illo img { display: block; width: 100%; height: auto; max-height: max(300px, calc(100svh - 380px)); object-fit: contain; object-position: left center; }
.opening-title { margin-top: var(--space-5); }
.opening-title > span { display: block; }
.opening-lede { margin-top: var(--space-5); max-width: 46ch; display: flex; flex-direction: column; gap: var(--space-3); font-size: clamp(20px, 1.7vw, 24px); line-height: 1.45; text-wrap: pretty; }
.opening-lede__turn { font-weight: 500; }

/* ---------- 2. The people ----------
   Alternating rows: Patrick's portrait in columns 1–4, Amy's in 9–12. The
   shared account sits below a hairline rule. */
.about-people { padding-top: var(--space-8); }
.founders { margin-top: var(--space-7); display: flex; flex-direction: column; gap: var(--space-7); }
.founder { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
.founder-portrait { grid-column: 1 / span 4; grid-row: 1; }
.founder-text { grid-column: 6 / span 7; grid-row: 1; max-width: 32em; padding-top: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); }
.founder--reverse .founder-portrait { grid-column: 9 / span 4; }
.founder--reverse .founder-text { grid-column: 1 / span 7; }
.media--portrait { aspect-ratio: 12 / 13; }
.founder-name { font-size: clamp(28px, 2.6vw, 40px); font-weight: 500; line-height: 1.12; letter-spacing: -0.015em; }
.founder-title { margin-top: -8px; font-size: 16px; line-height: 1.45; color: var(--graphite); }
.founder-account { font-size: 19px; line-height: 1.55; }
.founder-credit { margin-top: var(--space-2); padding-top: 14px;  }

.people-shared { margin-top: var(--space-7); padding-top: var(--space-5);  row-gap: var(--space-3); align-items: center; }
.people-shared__photo { grid-column: 1 / span 5; margin: 0; }
.people-shared__photo img { display: block; width: 100%; height: auto; border-radius: var(--radius-frame); }
.people-shared__lead { grid-column: 1 / span 4; font-size: 20px; font-weight: 500; line-height: 1.35; }
.people-shared__text { grid-column: 7 / span 6; font-size: clamp(20px, 1.7vw, 24px); line-height: 1.45; text-wrap: pretty; }

/* The spec's label for Fast facts and How we work: the site's .label at
   600 / 0.08em. The build ships Satoshi 400, 500 and 700, so 600 renders Bold. */
.label--strong { font-weight: 600; letter-spacing: 0.08em; }

/* ---------- Fast facts: "Head to head" ----------
   One category at a time: Pat's pick (cols 1–3), the illustration (4–9), Amy's
   pick (10–12, right-aligned). Under html.js the panels share one grid cell, so
   the section keeps its tallest panel's height and switching tabs never shifts
   the layout; outgoing and incoming panels crossfade over 200ms. Without JS the
   tabs stay hidden and the panels stack, each under its own h3. */
.ff { padding-block: calc(var(--space-8) + var(--space-3)); }
.ff-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-3) var(--space-6); border-bottom: 1px solid var(--rule); }
.ff-head .statement { padding-bottom: var(--space-4); }
.ff-tabs { display: none; }
/* Tabs sit on the header rule, so the active underline lands on it. */
.js .ff-tabs { display: flex; flex-wrap: wrap; column-gap: calc(var(--space-5) + var(--space-1)); margin-bottom: -1px; }
.ff-tab { min-height: var(--target-min); padding: var(--space-2) 0; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--graphite); font: 500 19px/1.2 var(--font-sans); cursor: pointer; }
.ff-tab:hover { color: var(--ink); }
.ff-tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--red); }

.ff-panel { position: relative; }
.ff-panel + .ff-panel { margin-top: var(--space-8); }
.ff-panel__name { margin-top: var(--space-6); font-size: 19px; font-weight: 500; line-height: 1.2; }
.ff-prompt { margin-top: var(--space-4); font-size: 17px; line-height: 1.5; color: var(--graphite); }
.js .ff-panels { display: grid; }
.js .ff-panel { grid-area: 1 / 1; margin-top: 0; opacity: 0; visibility: hidden; transition: opacity 200ms ease, visibility 0s linear 200ms; }
.js .ff-panel.is-active { opacity: 1; visibility: visible; transition: opacity 200ms ease; }
/* With tabs, the tab names the panel; the h3 stays for screen readers only. */
.js .ff-panel__name { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
  .js .ff-panel, .js .ff-panel.is-active { transition: none; }
}

.ff-faceoff { margin-top: calc(var(--space-5) + var(--space-2)); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: center; }
.ff-pick--pat { grid-column: 1 / span 3; }
.ff-figure { grid-column: 4 / span 6; }
.ff-pick--amy { grid-column: 10 / span 3; text-align: right; }
.ff-pick__label { color: var(--red); }
.ff-pick__title { margin-top: calc(var(--space-2) + var(--space-1)); font-family: var(--font-serif); font-size: clamp(36px, 3.6vw, 52px); line-height: 1.05; letter-spacing: -0.015em; text-wrap: balance; }
/* 5:4 frame. The 5:4 illustrations cover it; the square rewatch is contained so
   the raised arms and the feet stay in, its matte filling the sides. */
.ff-figure { position: relative; aspect-ratio: 5 / 4; overflow: hidden; border-radius: 16px; background: var(--illo-bg, var(--proof)); }
.ff-figure img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ff-figure--rewatch img { object-fit: contain; }
/* Matte colours from each illustration's own paper (spec values; not palette tokens). */
.ff-figure--soundtrack { --illo-bg: #F9E7C1; }
.ff-figure--rewatch { --illo-bg: #F3EEE4; }
.ff-figure--rabbithole { --illo-bg: #FBF4E1; }

/* Below 1024px the face-off recomposes: illustration full width, then Pat and
   Amy side by side, both left-aligned. */
@media (max-width: 1023px) {
  .ff-faceoff { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "fig fig" "pat amy"; column-gap: var(--space-4); row-gap: var(--space-5); align-items: start; }
  .ff-pick--pat { grid-area: pat; }
  .ff-figure { grid-area: fig; }
  .ff-pick--amy { grid-area: amy; text-align: left; }
  .ff-pick__title { font-size: 40px; }
}
@media (max-width: 767px) {
  .ff { padding-block: var(--space-8); }
  .ff-pick__title { font-size: clamp(28px, 8vw, 32px); }
}

/* ---------- How we work: "Editorial rows" (ink) ----------
   Three alternating image-and-text rows: figure 5 columns, text 6, one empty
   column between; row 2 flips. The DOM always runs figure then text, so phones
   stack figure, caption, h3, body. A row without a .how-figure goes type-only,
   text across columns 1–8. Text on ink is paper or paper-muted only; links keep
   the accessible red-on-ink tint on hover, with no underline change. */
.how { padding-block: calc(var(--space-8) + var(--space-4)); }
.how a:not(.btn):hover { color: var(--red-on-ink); }
.how-head { max-width: 900px; }
.how-title { margin-top: calc(var(--space-3) + var(--space-1)); font-size: clamp(44px, 5.6vw, 80px); line-height: 1.02; text-wrap: balance; }
.how-intro { margin-top: var(--space-4); max-width: 620px; font-size: 22px; line-height: 1.5; color: var(--paper-muted); }
.how-rows { margin-top: var(--space-8); }
.how-row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: center; }
.how-row + .how-row { margin-top: var(--space-8); }
.how-figure { grid-column: 1 / span 5; grid-row: 1; display: flex; flex-direction: column; gap: calc(var(--space-2) + var(--space-1)); }
.how-figure .media { aspect-ratio: 3 / 2; border-radius: 4px; }
.how-text { grid-column: 7 / span 6; grid-row: 1; }
.how-row--flip .how-figure { grid-column: 8 / span 5; }
.how-row--flip .how-text { grid-column: 1 / span 6; }
.how-row:not(:has(.how-figure)) .how-text { grid-column: 1 / span 8; }
.how-row__title { font-family: var(--font-sans); font-weight: 500; font-size: clamp(30px, 3.2vw, 46px); line-height: 1.06; letter-spacing: -0.015em; text-wrap: balance; }
.how-text p { margin-top: calc(var(--space-3) + var(--space-1)); max-width: 34em; font-size: 19px; line-height: 1.6; color: var(--paper-muted); }
.how-foot { margin-top: var(--space-8); padding-top: var(--space-5);  }
@media (max-width: 767px) {
  .how { padding-block: var(--space-8); }
  .how-intro { font-size: 20px; }
  .how-row { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-4); }
  .how-figure, .how-text, .how-row--flip .how-figure, .how-row--flip .how-text,
  .how-row:not(:has(.how-figure)) .how-text { grid-column: 1; grid-row: auto; }
  .how-row + .how-row { margin-top: var(--space-7); }
  .how-row__title { font-size: clamp(30px, 8vw, 32px); }
  .how-text p { font-size: 18px; }
}

/* ---------- 4. Capabilities ---------- */
.about-capabilities { padding-block: var(--space-8); }
.capabilities-intro { max-width: 32em; font-size: 19px; line-height: 1.55; color: var(--graphite); }
.cap-groups { margin-top: var(--space-7); row-gap: var(--space-6); }
.cap-group:nth-child(1) { grid-column: 1 / span 4; }
.cap-group:nth-child(2) { grid-column: 5 / span 4; }
.cap-group:nth-child(3) { grid-column: 9 / span 4; }
.cap-name { padding-bottom: var(--space-3);  font-size: clamp(24px, 2vw, 30px); font-weight: 500; line-height: 1.15; letter-spacing: -0.01em; }
.cap-list { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; font-size: 18px; line-height: 1.4; }
.cap-list li { position: relative; padding-left: 20px; }
.cap-list li::before { content: ""; position: absolute; left: 2px; top: 0.6em; width: 5px; height: 5px; border-radius: 50%; background: var(--graphite); }

/* ---------- Tablet and phone: recomposed, not shrunk ---------- */
@media (max-width: 899px) {
  .about-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .about-opening { padding-top: var(--space-5); }
  .opening-illo { margin-top: 16px; }
  .opening-title { margin-top: var(--space-4); }
  .opening-title > span { display: inline; }
  .opening-lede { margin-top: var(--space-4); }

  .about-people { padding-top: var(--space-8); }
  .founders { margin-top: var(--space-6); gap: var(--space-7); }
  /* Two columns on tablets, Amy's portrait still on the right. */
  .founder { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--space-4); }
  .founder--reverse { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .founder-portrait, .founder--reverse .founder-text { grid-column: 1; }
  .founder-text, .founder--reverse .founder-portrait { grid-column: 2; }
  .founder-text { padding-top: 0; }
  .founder-account { font-size: 18px; }
  .people-shared { margin-top: var(--space-7); padding-top: var(--space-4); }
  .people-shared__lead, .people-shared__text, .people-shared__photo { grid-column: 1 / -1; }
  .people-shared__photo { max-width: 520px; }
  .people-shared__text { max-width: 30em; }

  .about-capabilities { padding-block: var(--space-7) var(--space-8); }
  .cap-groups { margin-top: var(--space-6); }
  .cap-group:nth-child(n) { grid-column: span 4; }
}

/* Tablets keep the three capability columns side by side. */
@media (min-width: 600px) and (max-width: 899px) {
  .cap-groups { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cap-group:nth-child(n) { grid-column: auto; }
  .cap-list { font-size: 17px; }
}

/* Phones: one column. Each founder reads portrait, name, title, account, credit. */
@media (max-width: 599px) {
  .fpo { padding: var(--space-3); }
  .fpo-label { font-size: 15px; }
  .founders { gap: var(--space-7); }
  .founder, .founder--reverse { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-4); }
  .founder-portrait, .founder-text, .founder--reverse .founder-portrait, .founder--reverse .founder-text { grid-column: 1; grid-row: auto; }
  .cap-groups { row-gap: var(--space-6); }
}