/* Stage 7C: a typographic pause. Everything is scoped to this chapter. */
.pe-approach {
  --at-accent: #455e49; --at-line: #969f8d; --at-surface: #e4e6dc;
  --at-duration: 520ms; --at-ease: cubic-bezier(.22,.65,.25,1);
  display: block; padding: 0; background: var(--at-surface); color: var(--pe-ink);
  font-family: var(--pe-font-ui); scroll-margin-top: 6rem;
}
.pe-approach[data-principle=explain] { --at-accent: #716044; }
.pe-approach[data-principle=agree] { --at-accent: #405e5a; }
.pe-approach > .pe-shell { padding-block: 64px 52px; }
.pe-approach [hidden] { display: none !important; }
.pe-approach .at-meta { display: flex; justify-content: space-between; gap: 24px; color: #52604e; font-size: 10px; line-height: 1.7; text-transform: uppercase; letter-spacing: .13em; }
.pe-approach .at-meta p { margin: 0; }
.pe-approach .at-heading { display: grid; grid-template-columns: minmax(0,3fr) minmax(220px,1fr); align-items: end; gap: 40px; margin: 38px 0 54px; }
.pe-approach h2 { font: 400 clamp(66px,7.2vw,104px)/.96 var(--pe-font-display); letter-spacing: -.035em; margin: 0; }
.pe-approach h2 em { font: italic 400 1em/.96 var(--pe-font-display); color: #455e49; white-space: nowrap; }
.pe-approach .at-intro { font: 13px/1.85 var(--pe-font-ui); color: #475344; margin: 0 0 5px; max-width: 290px; }
.pe-approach .at-intro span { display: block; margin-top: 18px; }
.pe-approach .at-story { position: relative; }
.pe-approach :is(h2,h3,.at-step-label,.at-intro,.at-closing) { min-width: 0; overflow-wrap: anywhere; }
.pe-approach .at-selectors { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 40px; }
.pe-approach .at-selectors button { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: baseline; gap: 17px; width: 100%; min-height: 108px; padding: 12px 0 23px; border: 0; appearance: none; background: transparent; text-align: left; cursor: pointer; color: #596354; position: relative; transition: color var(--at-duration) var(--at-ease); }
.pe-approach .at-step-number { font: 400 64px/1 var(--pe-font-display); letter-spacing: -.05em; transition: transform var(--at-duration) var(--at-ease), color var(--at-duration) var(--at-ease); }
.pe-approach .at-step-label { font: 400 clamp(30px,2.9vw,43px)/1.1 var(--pe-font-display); letter-spacing: -.025em; }
.pe-approach .at-step-mark { font: 18px/1 var(--pe-font-ui); opacity: 0; transform: translate(-5px,5px); transition: opacity var(--at-duration) var(--at-ease), transform var(--at-duration) var(--at-ease); }
.pe-approach .at-selectors button[aria-pressed=true] { color: var(--at-accent); }
.pe-approach .at-selectors button[aria-pressed=true] .at-step-number { transform: translateY(-5px); }
.pe-approach .at-selectors button[aria-pressed=true] .at-step-label { font-style: italic; }
.pe-approach .at-selectors button[aria-pressed=true] .at-step-mark { opacity: 1; transform: none; }
.pe-approach .at-selectors button:hover { color: var(--pe-ink); }
.pe-approach button:focus-visible, .pe-approach a:focus-visible { outline: 2px solid #38563f; outline-offset: 6px; }
.pe-approach .at-thread { display: none; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 40px; border-top: 1px solid var(--at-line); }
.pe-approach[data-enhanced] .at-thread { display: grid; }
.pe-approach .at-thread span { height: 2px; background: var(--at-accent); transform: scaleX(0); transform-origin: left; transition: transform var(--at-duration) var(--at-ease), background-color var(--at-duration) var(--at-ease); }
.pe-approach[data-principle=listen] .at-thread span:nth-child(1), .pe-approach[data-principle=explain] .at-thread span:nth-child(2), .pe-approach[data-principle=agree] .at-thread span:nth-child(3) { transform: scaleX(1); }
.pe-approach .at-panels { padding-top: 44px; }
.pe-approach[data-enhanced] .at-panels { min-height: 296px; }
.pe-approach .at-principle { display: grid; grid-template-columns: minmax(0,1.65fr) minmax(0,1fr); column-gap: clamp(60px,9vw,130px); align-items: start; }
.pe-approach .at-principle + .at-principle { border-top: 1px solid var(--at-line); margin-top: 38px; padding-top: 38px; }
.pe-approach[data-enhanced] .at-principle { border: 0; margin: 0; padding: 0; }
.pe-approach .at-chapter { color: var(--at-accent); margin: 0 0 17px; font-size: 11px; line-height: 1.6; letter-spacing: .11em; text-transform: uppercase; }
.pe-approach h3 { font: 400 clamp(58px,5.3vw,78px)/.98 var(--pe-font-display); letter-spacing: -.032em; color: var(--at-accent); max-width: 650px; margin: 0; }
.pe-approach h3 > span { display: block; font-size: .58em; line-height: 1.15; margin-bottom: 8px; color: var(--pe-ink); letter-spacing: -.02em; }
.pe-approach h3 > em { display: block; font: italic 400 1em/.98 var(--pe-font-display); }
.pe-approach .at-reading { padding-top: 32px; min-width: 0; }
.pe-approach .at-body { color: #3e4c3e; font-size: 14px; line-height: 1.9; margin: 0; max-width: 430px; }
.pe-approach .at-permission { border-left: 1px solid var(--at-line); padding-left: 17px; color: #52604e; font-size: 12px; line-height: 1.8; margin: 22px 0 0; max-width: 350px; }
.pe-approach .at-outcome { font: 400 28px/1.15 var(--pe-font-display); letter-spacing: -.015em; color: var(--at-accent); margin: 24px 0 0; max-width: 400px; }
.pe-approach .at-story-foot { display: flex; align-items: center; justify-content: space-between; gap: 30px; margin-top: 16px; color: #52604e; font-size: 11px; line-height: 1.7; }
.pe-approach .at-more { display: flex; align-items: center; justify-content: space-between; gap: 44px; min-height: 44px; border-bottom: 1px solid var(--at-line); color: #334d39; text-decoration: none; font-size: 12px; line-height: 1.5; }
.pe-approach .at-more span { font-size: 18px; }
.pe-approach .at-closing { display: flex; justify-content: space-between; align-items: center; gap: 36px; border-top: 1px solid var(--at-line); margin-top: 38px; padding-top: 28px; }
.pe-approach .at-closing > p { font: 400 38px/1.05 var(--pe-font-display); margin: 0; letter-spacing: -.02em; }
.pe-approach .at-closing em { font: italic 400 1em/1.05 var(--pe-font-display); color: #455e49; }
.pe-approach .at-closing > div { max-width: 350px; }
.pe-approach .at-closing > div > p { font-size: 12px; line-height: 1.7; margin: 0 0 12px; color: #44543f; }
.pe-approach .at-closing small { display: block; max-width: 350px; font-size: 10px; line-height: 1.7; color: #52604e; margin-top: 10px; }
.pe-approach .at-announcement { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
/* One finite shared gesture; repeated selection does not restart it. */
.pe-approach[data-enhanced] .at-statement, .pe-approach[data-enhanced] .at-reading { animation: at-editorial-in var(--at-duration) var(--at-ease) both; }
.pe-approach[data-enhanced] .at-reading { animation-delay: 45ms; }
@keyframes at-editorial-in { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
.pe-approach[data-reveal-ready]:not([data-entered]) .at-heading, .pe-approach[data-reveal-ready]:not([data-entered]) .at-story { opacity: 0; transform: translateY(12px); }
.pe-approach[data-reveal-ready] .at-heading, .pe-approach[data-reveal-ready] .at-story { transition: opacity 600ms var(--at-ease), transform 600ms var(--at-ease); }
.pe-approach:focus-within .at-heading, .pe-approach:focus-within .at-story { opacity: 1 !important; transform: none !important; }
@media(max-width:1100px) {
  .pe-approach .at-heading { grid-template-columns: minmax(0,2.7fr) minmax(180px,1fr); gap: 26px; }
  .pe-approach h2 { font-size: 76px; }
  .pe-approach .at-selectors, .pe-approach .at-thread { gap: 26px; }
  .pe-approach .at-selectors button { gap: 12px; }
  .pe-approach .at-step-number { font-size: 55px; }
  .pe-approach .at-step-label { font-size: 33px; }
  .pe-approach .at-step-mark { display: none; }
  .pe-approach .at-principle { grid-template-columns: minmax(0,1.4fr) minmax(0,1fr); column-gap: 60px; }
  .pe-approach h3 { font-size: 62px; }
  .pe-approach[data-enhanced] .at-panels { min-height: 304px; }
}
@media(max-width:800px) {
  .pe-approach > .pe-shell { padding-block: 48px 42px; }
  .pe-approach .at-heading { grid-template-columns: minmax(0,1fr); gap: 24px; margin-block: 30px 38px; }
  .pe-approach .at-intro { max-width: 500px; }
  .pe-approach .at-intro br { display: none; }
  .pe-approach .at-intro span { margin-top: 5px; }
  .pe-approach .at-selectors button { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; min-height: 120px; }
  .pe-approach .at-step-label { font-size: 34px; }
  .pe-approach .at-principle { grid-template-columns: minmax(0,1.2fr) minmax(0,1fr); column-gap: 34px; }
  .pe-approach h3 { font-size: 58px; }
  .pe-approach .at-reading { padding-top: 32px; }
  .pe-approach .at-body { font-size: 13px; }
  .pe-approach .at-outcome { font-size: 26px; }
  .pe-approach[data-enhanced] .at-panels { min-height: 338px; }
}
@media(max-width:620px) {
  .pe-approach > .pe-shell { padding-block: 38px 36px; }
  .pe-approach .at-meta { display: block; font-size: 10px; letter-spacing: .08em; }
  .pe-approach .at-meta p + p { margin-top: 5px; }
  .pe-approach h2 { font-size: clamp(46px,13.9vw,72px); line-height: .98; }
  .pe-approach h2 em { display: block; white-space: normal; }
  .pe-approach .at-heading { gap: 20px; margin: 25px 0 28px; }
  .pe-approach .at-intro { font-size: 12px; max-width: 320px; line-height: 1.8; }
  .pe-approach .at-selectors, .pe-approach .at-thread { gap: 14px; }
  .pe-approach .at-selectors button { gap: 10px; padding: 8px 0 18px; min-height: 109px; }
  .pe-approach .at-step-number { font-size: 54px; }
  .pe-approach .at-step-label { font: 500 12px/1.5 var(--pe-font-ui); letter-spacing: 0; }
  .pe-approach .at-selectors button[aria-pressed=true] .at-step-label { font-style: normal; font-weight: 700; }
  .pe-approach .at-panels { padding-top: 26px; }
  .pe-approach[data-enhanced] .at-panels { min-height: 390px; }
  .pe-approach .at-principle { grid-template-columns: minmax(0,1fr); gap: 22px; }
  .pe-approach h3 { font-size: 47px; max-width: 340px; }
  .pe-approach .at-chapter { font-size: 10px; margin-bottom: 13px; }
  .pe-approach .at-reading { padding: 0 0 0 28px; border-left: 1px solid var(--at-line); }
  .pe-approach .at-body { font-size: 13px; line-height: 1.85; }
  .pe-approach .at-permission { border: 0; padding: 0; margin-top: 17px; font-size: 12px; }
  .pe-approach .at-outcome { font-size: 26px; margin-top: 20px; }
  .pe-approach .at-story-foot { display: block; margin-top: 19px; }
  .pe-approach .at-story-foot > span { display: none; }
  .pe-approach .at-more { justify-content: space-between; }
  .pe-approach .at-closing { flex-direction: column; align-items: start; gap: 22px; margin-top: 28px; padding-top: 25px; }
  .pe-approach .at-closing > p { font-size: 34px; }
  .pe-approach .at-closing > div { width: 100%; max-width: none; }
  .pe-approach .at-closing .pe-button { width: 100%; justify-content: space-between; }
  .pe-approach .at-closing small { font-size: 11px; }
}
.pe-approach[data-reduced] *, .pe-approach[data-reduced] *::before, .pe-approach[data-reduced] *::after { animation: none !important; transition: none !important; }
@media(prefers-reduced-motion:reduce) {
  .pe-approach *, .pe-approach *::before, .pe-approach *::after { animation: none !important; transition: none !important; }
  .pe-approach .at-heading, .pe-approach .at-story { opacity: 1 !important; transform: none !important; }
}