/* Place field guide: the map around a town and the questions its customers ask. Prefix pf-. --pb-accent set per page. */
.pf { padding: clamp(64px, 8vw, 110px) 0; border-block: 1px solid color-mix(in srgb, currentColor 16%, transparent); }
.pf *, .pf *::before { box-sizing: border-box; }
.pf :where(h2, h3, p, ol, ul) { margin: 0; }
.pf-shell { width: min(100%, 1240px); margin-inline: auto; padding-inline: clamp(16px, 4vw, 48px); }
.pf-kicker { font-size: 12px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: var(--pb-accent, currentColor); }
.pf h2 { margin-top: 12px; max-width: 24ch; font-size: clamp(2rem, 3.8vw, 3.4rem); line-height: 1.05; text-wrap: balance; }
.pf-lede { margin-top: 18px; max-width: 66ch; font-size: clamp(1.05rem, 1.3vw, 1.2rem); line-height: 1.65; }
.pf a { color: inherit; text-decoration: underline; text-decoration-color: var(--pb-accent, currentColor); text-underline-offset: 4px; text-decoration-thickness: 2px; }
.pf-say { font-weight: 600; }
.pf-num { font: 700 clamp(2rem, 3.4vw, 3rem)/1 Georgia, serif; color: var(--pb-accent, currentColor); }

/* ledger */
.pf-ledger { margin-top: clamp(28px, 4vw, 48px); border-top: 3px solid currentColor; }
.pf-ledger-head, .pf-ledger-row { display: grid; grid-template-columns: minmax(150px, .7fr) 1.2fr 1.3fr; gap: clamp(16px, 3vw, 44px); padding: 18px 0; border-bottom: 1px solid color-mix(in srgb, currentColor 20%, transparent); align-items: start; }
.pf-ledger-head { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; opacity: .7; padding-block: 12px; }
.pf-ledger-row b { font: 700 1.25rem/1.2 Georgia, serif; }
.pf-ledger-row p { font-size: 1rem; line-height: 1.55; }
.pf-ledger-row p:last-child { font-weight: 600; }

/* rings */
.pf-rings { margin-top: clamp(28px, 4vw, 48px); display: grid; gap: clamp(20px, 3vw, 36px); }
.pf-ring { display: grid; grid-template-columns: 170px 1fr 1fr; gap: 18px clamp(18px, 3vw, 40px); padding: clamp(18px, 2.4vw, 28px); border: 1px solid color-mix(in srgb, currentColor 22%, transparent); border-left: 6px solid var(--pb-accent, currentColor); background: color-mix(in srgb, currentColor 3%, transparent); }
.pf-ring-2 { margin-left: clamp(0px, 3vw, 44px); }
.pf-ring-3 { margin-left: clamp(0px, 6vw, 88px); }
.pf-ring-label { font: 700 1.4rem/1.1 Georgia, serif; grid-row: span 3; }
.pf-ring article { grid-column: 2 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 28px; align-items: start; padding-top: 10px; border-top: 1px solid color-mix(in srgb, currentColor 16%, transparent); }
.pf-ring article:first-of-type { border-top: 0; padding-top: 0; }
.pf-ring article h3 { grid-column: 1 / -1; font-size: 1.15rem; }
.pf-ring article p { font-size: .98rem; line-height: 1.55; }

/* split */
.pf-split { margin: clamp(28px, 4vw, 48px) 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 4vw, 56px) clamp(28px, 5vw, 72px); }
.pf-split li { display: grid; gap: 8px; padding-top: 16px; border-top: 3px solid var(--pb-accent, currentColor); }
.pf-split li:nth-child(even) { transform: translateY(clamp(0px, 3vw, 44px)); }
.pf-split h3 { font: 700 1.4rem/1.15 Georgia, serif; }
.pf-split p { line-height: 1.6; }

/* asks: chat */
.pf-asks-grid { margin-top: clamp(28px, 4vw, 48px); display: grid; gap: 18px; }
.pf-q { display: block; }
.pf-asks h3 { font-size: 1.1rem; line-height: 1.35; font-weight: 700; }
.pf-need { font-size: 1rem; line-height: 1.6; }
.pf-asks-chat .pf-asks-grid { max-width: 860px; }
.pf-asks-chat article { display: grid; gap: 10px; }
.pf-asks-chat h3 { justify-self: end; max-width: 80%; padding: 14px 18px; border-radius: 20px 20px 4px 20px; background: var(--pb-accent, currentColor); color: #fff; }
.pf-asks-chat .pf-need { justify-self: start; max-width: 88%; padding: 14px 18px; border-radius: 20px 20px 20px 4px; border: 1px solid color-mix(in srgb, currentColor 24%, transparent); background: color-mix(in srgb, currentColor 5%, transparent); }
/* asks: cards */
.pf-asks-cards .pf-asks-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 28px); }
.pf-asks-cards article { padding: clamp(20px, 2.6vw, 32px); border: 1px solid color-mix(in srgb, currentColor 22%, transparent); border-top: 6px solid var(--pb-accent, currentColor); display: grid; gap: 12px; align-content: start; }
.pf-asks-cards h3 { font: 700 1.3rem/1.25 Georgia, serif; }
/* asks: list */
.pf-asks-list .pf-asks-grid { gap: 0; border-top: 3px solid currentColor; }
.pf-asks-list article { display: grid; grid-template-columns: 80px minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(14px, 3vw, 40px); padding: 22px 0; border-bottom: 1px solid color-mix(in srgb, currentColor 20%, transparent); align-items: start; }
.pf-asks-list h3 { font: 700 1.3rem/1.25 Georgia, serif; }

@media (max-width: 860px) {
  .pf-ledger-head { display: none; }
  .pf-ledger-row { grid-template-columns: 1fr; gap: 8px; }
  .pf-ring { grid-template-columns: 1fr; margin-left: 0 !important; }
  .pf-ring-label { grid-row: auto; }
  .pf-ring article { grid-column: 1; grid-template-columns: 1fr; }
  .pf-split { grid-template-columns: 1fr; }
  .pf-split li:nth-child(even) { transform: none; }
  .pf-asks-cards .pf-asks-grid { grid-template-columns: 1fr; }
  .pf-asks-list article { grid-template-columns: 1fr; gap: 8px; }
  .pf-asks-chat h3, .pf-asks-chat .pf-need { max-width: 100%; }
}