/* =========================================================================
   PERSEVERANCE PRINCIPLES -- /books/perseverance-principles/
   Rides on home.css (tokens, titles, reveal grammar, pp-cream); this
   sheet carries only the pbp-* chapters.
   ========================================================================= */

/* =========================================================================
   01 . HERO . the system, opened
   ========================================================================= */
.pbp-hero {
  background: #0A0807;
  min-height: 92svh;
  padding-block: clamp(150px, 19vh, 210px) clamp(90px, 12vh, 150px);
  position: relative; overflow: clip;
}
.pbp-hero::before {
  content: ''; position: absolute; inset: auto -20% -35%; height: 80%;
  pointer-events: none;
  background: radial-gradient(50% 60% at 50% 100%, rgba(193, 154, 75, 0.12) 0%, transparent 70%);
  animation: pp-halo-breathe 8s ease-in-out infinite;
}
.pbp-hero__inner {
  position: relative; z-index: 1;
  display: grid; align-items: center;
  grid-template-columns: minmax(0, 1.1fr) minmax(270px, 0.76fr);
  gap: clamp(24px, 3.2vw, 52px);
  translate: calc((var(--gx, 50vw) - 50vw) * 0.008) 0;
}
.pbp-hero__title {
  margin: var(--s-sm) 0 0;
  font-size: clamp(2.2rem, 4.9vw, 4.7rem); font-weight: 800; line-height: 1.05;
  letter-spacing: 0.01em; text-transform: uppercase;
  color: var(--cream, #F4E8DA);
}
/* Trava: o titulo nunca passa da largura da propria coluna, entao
   mudar o grid nao consegue mais cortar a ultima letra. */
.pbp-hero__lead { container-type: inline-size; }
@supports (container-type: inline-size) {
  .pbp-hero__title { font-size: min(clamp(2.2rem, 4.9vw, 4.7rem), 13cqw); }
}
.pbp-hero__l { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.pbp-hero__l i { display: inline-block; font-style: normal; }
.pbp-hero__l i {
  background: linear-gradient(110deg, #F4E8DA 34%, var(--light-gold, #F3D88E) 47%, var(--gold, #C19A4B) 53%, #F4E8DA 66%);
  background-size: 240% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: pbp-sheen 6.4s ease-in-out infinite 1.2s;
}
.pbp-hero__l:nth-child(2) i { animation-delay: 1.5s; }
@keyframes pbp-sheen {
  0% { background-position: 130% 0; }
  46%, 100% { background-position: -40% 0; }
}
.js .pbp-hero__title.reveal .pbp-hero__l i {
  translate: 0 112%;
  transition: translate 750ms var(--ease);
}
.js .pbp-hero__title.reveal.is-in .pbp-hero__l i { translate: 0 0; }
.js .pbp-hero__title.reveal.is-in .pbp-hero__l:nth-child(2) i { transition-delay: 150ms; }
.pbp-hero__sub {
  margin: var(--s-sm) 0 0;
  font-size: clamp(1.1rem, 1.7vw, 1.45rem); font-weight: 300; font-style: italic;
  color: var(--gold); text-wrap: pretty;
}
.pbp-hero__copy { margin-top: var(--s-md); display: grid; gap: 12px; }
.pbp-hero__copy p {
  margin: 0; max-width: min(58ch, 100%);
  font-size: clamp(1rem, 1.3vw, 1.15rem); line-height: 1.7;
  color: var(--ink-muted, #A79B8C); text-wrap: pretty;
}
.pbp-hero__copy i { font-style: italic; color: var(--cream, #F4E8DA); }
.pbp-hero__actions { margin-top: var(--s-md); }
.pbp-hero__meta {
  margin: var(--s-md) 0 0;
  font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(167, 155, 140, 0.75);
}

/* the drawn hardcover, under a ghost seven */
.pbp-hero__art {
  position: relative; min-height: 320px;
  translate: calc((var(--gx, 50vw) - 50vw) * -0.018) 0;
}
.pbp-hero__seven {
  position: absolute; top: 50%; left: 50%;
  translate: -50% -54%;
  font-size: clamp(16rem, 30vw, 26rem); font-weight: 800; font-style: italic;
  line-height: 1;
  color: transparent; -webkit-text-stroke: 1.5px rgba(193, 154, 75, 0.16);
  pointer-events: none; user-select: none;
}
.pbp-hero__art svg { position: relative; width: 100%; height: auto; overflow: visible; }
.pbp-b {
  stroke: rgba(193, 154, 75, 0.65); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 100; stroke-dashoffset: 100;
  animation: pbp-draw 1100ms var(--ease) forwards;
  animation-delay: var(--d, 0ms);
}
.pbp-b--thin { stroke-width: 1.2; stroke: rgba(193, 154, 75, 0.4); }
.pbp-b--gold {
  stroke: var(--light-gold, #F3D88E); stroke-width: 2.4;
  filter: drop-shadow(0 0 6px rgba(243, 216, 142, 0.5));
}
@keyframes pbp-draw { to { stroke-dashoffset: 0; } }

/* the cover itself: it stands in front of the drawing, lit and floating */
.pbp-hero__art { display: grid; place-items: center; }
.pbp-hero__art > * { grid-area: 1 / 1; }
.pbp-hero__blueprint { opacity: 0.5; translate: 14% -3%; scale: 0.92; }
.pbp-hero__cover {
  position: relative; z-index: 2;
  margin: 0; width: min(124%, 470px);
  translate: -10% 0;
  animation: pbp-cover-in 900ms var(--ease) 400ms backwards,
             pbp-float 9s ease-in-out 1.3s infinite;
}
@keyframes pbp-cover-in {
  from { opacity: 0; transform: translate3d(0, 26px, 0) scale(0.96); }
  to { opacity: 1; transform: none; }
}
.pbp-hero__cover img {
  display: block; width: 100%; height: auto;
  filter: drop-shadow(0 26px 46px rgba(0, 0, 0, 0.6));
}
.pbp-hero__cover::after {
  content: ''; position: absolute; inset: -12% -18%;
  z-index: -1; pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%, rgba(193, 154, 75, 0.22), transparent 70%);
}
@keyframes pbp-float {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-0.6deg); }
  50% { transform: translate3d(0, -14px, 0) rotate(0.6deg); }
}

/* the three shots: one cover, three ways it reaches a reader */
.pbp-formats__shots {
  display: flex; align-items: flex-end; flex-wrap: wrap;
  gap: clamp(20px, 4vw, 44px);
  margin-bottom: clamp(26px, 4vh, 44px);
}
.pbp-shot { margin: 0; display: grid; justify-items: center; gap: 12px; }
.pbp-shot__frame { position: relative; display: block; width: clamp(96px, 26vw, 150px); }
.pbp-shot__frame img { display: block; width: 100%; height: auto; }
.pbp-shot figcaption {
  font-size: 0.6875rem; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gold-deep, #7A5E20);
}
.pbp-shot--print .pbp-shot__frame img { filter: drop-shadow(0 12px 20px rgba(20, 16, 15, 0.28)); }
.pbp-shot--screen .pbp-shot__frame {
  padding: 10px 10px 22px;
  border: 1.5px solid rgba(122, 94, 32, 0.5);
  border-radius: 10px;
  background: rgba(122, 94, 32, 0.05);
}
.pbp-shot--screen .pbp-shot__frame::after {
  content: ''; position: absolute; left: 50%; bottom: 9px;
  translate: -50% 0;
  width: 34px; height: 2px; border-radius: 1px;
  background: rgba(122, 94, 32, 0.5);
}
.pbp-shot--audio .pbp-shot__frame img { filter: grayscale(0.35) drop-shadow(0 10px 18px rgba(20, 16, 15, 0.24)); }
.pbp-shot--audio .pbp-shot__frame i {
  position: absolute; top: 50%; right: -14px;
  translate: 0 -50%;
  width: 9px; height: 9px;
  border: 1.5px solid var(--gold, #C19A4B);
  border-left-color: transparent; border-bottom-color: transparent;
  border-radius: 0 100% 0 0;
  opacity: 0;
  animation: pbp-wave 2.6s ease-out infinite;
}
.pbp-shot--audio .pbp-shot__frame i:nth-child(3) { width: 15px; height: 15px; right: -20px; animation-delay: 0.35s; }
.pbp-shot--audio .pbp-shot__frame i:nth-child(4) { width: 21px; height: 21px; right: -26px; animation-delay: 0.7s; }
@keyframes pbp-wave {
  0% { opacity: 0; }
  30% { opacity: 0.9; }
  100% { opacity: 0; }
}

/* the buy floor: the cover stands beside the doors */
.pbp-buy__split {
  margin-top: var(--s-lg);
  display: grid; align-items: center;
  grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr);
  gap: clamp(30px, 5vw, 70px);
}
.pbp-buy__cover { margin: 0; position: relative; }
.pbp-buy__cover img {
  display: block; width: 100%; height: auto;
  rotate: -2.5deg;
  filter: drop-shadow(0 22px 40px rgba(0, 0, 0, 0.55));
  transition: rotate 600ms var(--ease), scale 600ms var(--ease);
}
.pbp-buy__split:hover .pbp-buy__cover img { rotate: 0deg; scale: 1.02; }
.pbp-buy__cover::after {
  content: ''; position: absolute; inset: -10% -14%;
  z-index: -1; pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%, rgba(193, 154, 75, 0.18), transparent 70%);
}
.pbp-buy__grid { margin-top: 0; }

/* =========================================================================
   02 . THE SYSTEM . built before it was written
   ========================================================================= */
.pbp-sys { padding-block: var(--s-xxl); position: relative; overflow: clip; }
.pbp-sys__ghost {
  position: absolute; top: clamp(16px, 4vh, 48px); right: -0.05em;
  font-size: clamp(6rem, 15vw, 14rem); font-weight: 800; font-style: italic;
  line-height: 1; letter-spacing: -0.02em;
  color: transparent; -webkit-text-stroke: 1px rgba(122, 94, 32, 0.13);
  pointer-events: none; user-select: none;
}
.pbp-sys__inner {
  position: relative;
  display: grid; align-items: start;
  grid-template-columns: minmax(240px, 0.52fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 100px);
}
.pbp-sys__rail { position: sticky; top: 110px; }
.pbp-sys__rail .pp-h2 { font-size: clamp(1.8rem, 3.1vw, 3.1rem); }

/* the tower: the system assembles from its foundation up */
.pbp-tower { margin-top: var(--s-md); width: min(100%, 210px); }
.pbp-tower svg { display: block; width: 100%; height: auto; overflow: visible; }
.pbp-tower__b, .pbp-tower__j {
  fill: none;
  stroke: var(--gold-deep, #7A5E20); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 100; stroke-dashoffset: 0;
  --p: clamp(0, calc((var(--rp, 0) - var(--t, 0)) * 7), 1);
}
.pbp-tower__j { stroke-width: 1.4; stroke: rgba(122, 94, 32, 0.5); }
.pbp-tower__b--top {
  stroke: var(--gold, #C19A4B); stroke-width: 2.4;
  filter: drop-shadow(0 0 6px rgba(193, 154, 75, 0.4));
}
.pbp-sys.is-ride :is(.pbp-tower__b, .pbp-tower__j) {
  stroke-dashoffset: calc((1 - var(--p, 1)) * 100);
}

.pbp-sys__body { display: grid; gap: clamp(18px, 2.6vh, 26px); }
.pbp-sys__body p {
  margin: 0; max-width: min(58ch, 100%);
  font-size: clamp(1rem, 1.3vw, 1.18rem); line-height: 1.75;
  color: #5C5044; text-wrap: pretty;
}
.pbp-sys__open { font-size: clamp(1.08rem, 1.5vw, 1.32rem); color: var(--ink); }

/* the three repeated acts, marked */
.pbp-sys__body em {
  font-style: normal; font-weight: 600;
  color: var(--gold-deep, #7A5E20);
  position: relative; z-index: 0;
}
.pbp-sys__body em::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 1.5px;
  border-radius: 1px;
  background: linear-gradient(90deg, var(--gold, #C19A4B), rgba(193, 154, 75, 0.25));
  transform: scaleX(var(--ep, 1)); transform-origin: left center;
}
.pbp-sys.is-ride .pbp-sys__body em { --ep: clamp(0, calc((var(--rp, 0) - 0.42) * 6), 1); }

/* the five pieces, one line each, hung on a spine */
.pbp-needs {
  list-style: none; margin: clamp(6px, 1.4vh, 14px) 0; padding: 0;
  display: grid;
  border-left: 1px solid var(--hairline, #DCCBB4);
}
.pbp-needs li {
  position: relative;
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(14px, 2vw, 22px); align-items: baseline;
  padding: clamp(11px, 1.7vh, 16px) 0 clamp(11px, 1.7vh, 16px) clamp(20px, 2.6vw, 32px);
  --p: clamp(0, calc((var(--rp, 0) - var(--t, 0)) * 7), 1);
  opacity: calc(0.24 + 0.76 * var(--p));
  transform: translateX(calc((1 - var(--p)) * 14px));
  transition: opacity 320ms var(--ease);
}
.pbp-needs li::before {
  content: ''; position: absolute; left: -4.5px; top: 1.5em;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--paper, #FBF4E9);
  border: 1.5px solid var(--gold-deep, #7A5E20);
  transform: scale(calc(0.5 + 0.5 * var(--p)));
}
.pbp-needs b {
  font-size: 0.6875rem; font-weight: 700; font-style: italic;
  letter-spacing: 0.1em;
  font-variant-numeric: tabular-nums;
  color: var(--gold, #C19A4B);
}
.pbp-needs span {
  font-size: clamp(1.02rem, 1.4vw, 1.22rem); line-height: 1.6;
  color: var(--ink); text-wrap: pretty;
}
.pbp-needs:has(li:hover) li:not(:hover) { opacity: 0.42; }

/* the law, standing alone */
.pbp-sys__law {
  max-width: min(30ch, 100%);
  font-size: clamp(1.3rem, 2.1vw, 1.85rem);
  line-height: 1.35; font-weight: 700;
  color: var(--ink);
}
.pbp-sys__pull em {
  font-style: italic; font-weight: 500;
  font-size: clamp(1.3rem, 2vw, 1.8rem); line-height: 1.4;
  color: var(--gold-deep, #7A5E20);
}
.pbp-sys__pull em::after { display: none; }

.pbp-sys.is-ride .pbp-sys__body > p {
  --p: clamp(0, calc((var(--rp, 0) - var(--t, 0)) * 5), 1);
  opacity: calc(0.22 + 0.78 * var(--p));
  transform: translateY(calc((1 - var(--p)) * 14px));
  filter: blur(calc((1 - var(--p)) * 4px));
}

/* =========================================================================
   03 . IS / ISN'T
   ========================================================================= */
.pbp-ledger { background: var(--bg); padding-block: var(--s-xxl); overflow: clip; }
.pbp-ledger__cols {
  margin-top: var(--s-lg);
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(36px, 6vw, 100px);
}
.pbp-ledger__head {
  margin: 0 0 clamp(16px, 2.4vh, 26px);
  font-size: clamp(1.15rem, 1.6vw, 1.4rem); font-weight: 700;
  color: var(--cream, #F4E8DA);
}
.pbp-ledger__list { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(14px, 2vh, 20px); }
.pbp-ledger__list li {
  display: flex; gap: 12px; align-items: baseline;
  font-size: clamp(0.98rem, 1.25vw, 1.1rem); line-height: 1.65;
  color: var(--ink-muted, #A79B8C); text-wrap: pretty;
}
.pbp-ledger__list--is svg {
  flex: 0 0 18px; width: 18px; height: 18px;
  translate: 0 2px; overflow: visible;
}
.pbp-ledger__list--is svg path {
  fill: none; stroke: var(--gold, #C19A4B); stroke-width: 2.6;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 100; stroke-dashoffset: 100;
}
.pbp-ledger__list--not li { color: rgba(167, 155, 140, 0.7); }
.pbp-ledger__list--not span { position: relative; }
.pbp-ledger__list--not span i {
  position: absolute; left: -0.5%; right: auto; top: 54%; height: 1.5px;
  width: 101%;
  background: rgba(95, 36, 28, 0.9);
  transform: scaleX(var(--p, 1)); transform-origin: left center;
  pointer-events: none;
}
.pbp-ledger.is-ride .pbp-ledger__list li {
  --p: clamp(0, calc((var(--rp, 0) - var(--t, 0)) * 6), 1);
  opacity: calc(0.25 + 0.75 * var(--p));
}
.pbp-ledger.is-ride .pbp-ledger__list--is svg path { stroke-dashoffset: calc((1 - var(--p, 1)) * 100); }
.pbp-ledger__goal {
  margin: var(--s-lg) auto 0; max-width: min(52ch, 100%);
  text-align: center;
  font-size: clamp(1.1rem, 1.6vw, 1.4rem); line-height: 1.6; font-weight: 300;
  color: rgba(244, 232, 218, 0.85); text-wrap: pretty;
}
.pbp-ledger__goal em { font-style: italic; color: var(--gold); }
.pbp-ledger.is-ride .pbp-ledger__goal {
  --p: clamp(0, calc((var(--rp, 0) - var(--t, 0)) * 5), 1);
  opacity: calc(0.22 + 0.78 * var(--p));
  transform: translateY(calc((1 - var(--p)) * 14px));
}

/* =========================================================================
   04 . THE SEVEN . the framework, one principle at a time
   ========================================================================= */
.pbp-seven { padding-block: var(--s-xxl); overflow: clip; }
.pbp-seven__inner {
  display: grid; align-items: start;
  grid-template-columns: minmax(240px, 0.5fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 110px);
}
.pbp-seven__rail { position: sticky; top: 110px; min-width: 0; }
.pbp-seven__rail .pp-h2 { font-size: clamp(1.7rem, 2.7vw, 2.7rem); }

/* the ruler: seven marks, and the one you are reading is lit */
.pbp-seven__meter {
  margin-top: var(--s-md);
  position: relative;
  display: grid; grid-template-columns: 2px auto;
  gap: clamp(14px, 1.8vw, 22px);
}
.pbp-seven__track {
  display: block; width: 2px;
  background: rgba(122, 94, 32, 0.18);
  border-radius: 1px; overflow: hidden;
}
.pbp-seven__track i {
  display: block; width: 100%; height: 100%;
  background: linear-gradient(to bottom, var(--gold, #C19A4B), var(--gold-deep, #7A5E20));
  transform: scaleY(var(--rp, 0)); transform-origin: top center;
}
.pbp-seven__ruler {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: clamp(10px, 1.8vh, 18px);
}
.pbp-seven__ruler li {
  display: flex; align-items: center; gap: 10px;
  /* aceso quando o scroll passa por ele; "atual" enquanto o proximo nao acende */
  /* o offset atrasa a regua para ela marcar o principio que esta legivel
     no centro da tela, e nao o que acabou de comecar a entrar por baixo. */
  --on: clamp(0, calc((var(--rp, 0) - var(--t, 0) - 0.075) * 9), 1);
  --nx: clamp(0, calc((var(--rp, 0) - var(--tn, 1) - 0.075) * 9), 1);
  --g: calc(var(--on) * (1 - var(--nx)));
}
.pbp-seven__ruler b {
  font-size: clamp(0.72rem, 0.95vw, 0.86rem); font-weight: 700; font-style: italic;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
  color: rgba(122, 94, 32, calc(0.26 + 0.34 * var(--on) + 0.4 * var(--g)));
  transform: scale(calc(1 + 0.3 * var(--g)));
  transform-origin: left center;
}
/* o traço cresce só no princípio atual */
.pbp-seven__ruler i {
  display: block; height: 1.5px; border-radius: 1px;
  width: calc(10px + 26px * var(--g));
  background: var(--gold, #C19A4B);
  opacity: calc(0.2 + 0.8 * var(--g));
}

/* the principles */
.pbp-seven__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: clamp(36px, 6vh, 62px);
}
.pbp-seven__item {
  position: relative; padding-left: clamp(92px, 10vw, 132px);
  padding-top: clamp(20px, 3vh, 32px);
  border-top: 1px solid var(--hairline, #DCCBB4);
  transition: opacity 320ms var(--ease);
}
.pbp-seven__item:first-child { border-top: 0; padding-top: 0; }
.pbp-seven__item::before {
  content: attr(data-n);
  position: absolute; left: 0; top: clamp(14px, 2.4vh, 26px);
  font-size: clamp(2.8rem, 4.6vw, 4.2rem); font-weight: 800; font-style: italic;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(122, 94, 32, calc(0.18 + 0.55 * var(--p, 1)));
}
.pbp-seven__item:first-child::before { top: -0.18em; }
.pbp-seven__item h3 {
  margin: 0;
  font-size: clamp(1.3rem, 2vw, 1.8rem); font-weight: 700; line-height: 1.25;
  color: var(--ink); text-wrap: balance;
}
.pbp-seven__item p {
  margin: 12px 0 0; max-width: min(56ch, 100%);
  font-size: clamp(0.98rem, 1.25vw, 1.1rem); line-height: 1.7;
  color: #5C5044; text-wrap: pretty;
}
/* the law that closes each principle, set apart */
.pbp-seven__law {
  margin-top: clamp(14px, 2vh, 20px) !important;
  padding-left: clamp(14px, 1.8vw, 20px);
  border-left: 2px solid rgba(193, 154, 75, calc(0.25 + 0.6 * var(--p, 1)));
}
.pbp-seven__law em {
  font-style: italic; font-weight: 500;
  font-size: clamp(1.02rem, 1.35vw, 1.18rem); line-height: 1.5;
  color: var(--gold-deep, #7A5E20);
}
.pbp-seven.is-ride .pbp-seven__item {
  --p: clamp(0, calc((var(--rp, 0) - var(--t, 0)) * 5), 1);
  opacity: calc(0.25 + 0.75 * var(--p));
  transform: translateY(calc((1 - var(--p)) * 16px));
  filter: blur(calc((1 - var(--p)) * 4px));
}
.pbp-seven__list:has(.pbp-seven__item:hover) .pbp-seven__item:not(:hover) { opacity: 0.45; }

/* =========================================================================
   05 . WHO FOR . the reader, named
   ========================================================================= */
.pbp-who {
  background: var(--bg); padding-block: var(--s-xxl);
  position: relative; overflow: clip;
}
/* the pronoun the whole section repeats, drifting behind it */
.pbp-who__ghost {
  position: absolute; top: 50%; right: -0.06em;
  translate: calc((var(--gx, 50vw) - 50vw) * 0.018) -50%;
  font-size: clamp(9rem, 26vw, 24rem);
  font-weight: 800; font-style: italic; line-height: 0.8;
  letter-spacing: -0.04em;
  color: transparent; -webkit-text-stroke: 1.5px rgba(193, 154, 75, 0.1);
  pointer-events: none; user-select: none;
}
.pbp-who__inner { position: relative; }
.pbp-who__head { max-width: min(30ch, 100%); }
.pbp-who__head .pp-h2 { font-size: clamp(1.9rem, 3.6vw, 3.4rem); }

/* five recognitions, one line each */
.pbp-who__list {
  list-style: none;
  margin: clamp(30px, 5vh, 54px) 0 0; padding: 0;
  display: grid;
  position: relative;
}
/* the spine, and the gold that fills it as the reader is named */
.pbp-who__list::before,
.pbp-who__list::after {
  content: ''; position: absolute; left: 0; top: 0;
  width: 1px; height: 100%;
  pointer-events: none;
}
.pbp-who__list::before { background: rgba(220, 203, 180, 0.16); }
.pbp-who__list::after {
  background: linear-gradient(to bottom, var(--gold, #C19A4B), rgba(193, 154, 75, 0.25));
  transform: scaleY(var(--fill, 1)); transform-origin: top center;
}
.pbp-who.is-ride .pbp-who__list::after {
  --fill: clamp(0, calc((var(--rp, 0) - 0.02) * 1.5), 1);
}

.pbp-who__list li {
  position: relative;
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  gap: clamp(12px, 1.8vw, 20px); align-items: baseline;
  padding: clamp(17px, 2.8vh, 28px) 0 clamp(17px, 2.8vh, 28px) clamp(22px, 3vw, 40px);
  --p: clamp(0, calc((var(--rp, 0) - var(--t, 0)) * 6), 1);
  opacity: calc(0.2 + 0.8 * var(--p));
  transform: translateX(calc((1 - var(--p)) * 16px));
  transition: opacity 320ms var(--ease), transform 420ms var(--ease);
}
/* the check drawn on the spine: this one is you */
.pbp-who__mark {
  position: absolute; left: -9px; top: calc(1.5em - 9px);
  width: 18px; height: 18px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--bg);
  border: 1.5px solid rgba(193, 154, 75, calc(0.35 + 0.65 * var(--p, 1)));
  transform: scale(calc(0.6 + 0.4 * var(--p)));
}
.pbp-who__mark svg { width: 11px; height: 11px; overflow: visible; }
.pbp-who__mark path {
  fill: none;
  stroke: var(--gold, #C19A4B); stroke-width: 3;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 100;
  stroke-dashoffset: calc((1 - var(--p, 1)) * 100);
}
.pbp-who__list b {
  font-size: 0.6875rem; font-weight: 700; font-style: italic;
  letter-spacing: 0.1em;
  font-variant-numeric: tabular-nums;
  color: rgba(193, 154, 75, 0.6);
}
.pbp-who__list p {
  margin: 0; max-width: min(50ch, 100%);
  font-size: clamp(1.2rem, 2.1vw, 1.9rem);
  line-height: 1.42; font-weight: 300;
  color: rgba(244, 232, 218, 0.88); text-wrap: pretty;
}
/* the pronoun that opens every line */
.pbp-who__list em {
  font-style: normal; font-weight: 700;
  color: var(--gold, #C19A4B);
}
.pbp-who__list i { font-style: italic; color: var(--light-gold, #F3D88E); }

/* reading one line dims the rest, and steps it forward */
.pbp-who__list:has(li:hover) li:not(:hover) { opacity: 0.3; }
.pbp-who__list li:hover { transform: translateX(8px); }
.pbp-who__list li:hover p { color: var(--cream, #F4E8DA); }
.pbp-who__list li:hover .pbp-who__mark {
  border-color: var(--gold, #C19A4B);
  background: var(--gold, #C19A4B);
}
.pbp-who__list li:hover .pbp-who__mark path { stroke: var(--black-0, #0A0807); }

@media (max-width: 720px) {
  .pbp-who__ghost { font-size: clamp(7rem, 40vw, 12rem); top: auto; bottom: 4%; translate: none; }
  .pbp-who__list li { grid-template-columns: auto minmax(0, 1fr); }
  .pbp-who__list b { grid-column: 1; }
  .pbp-who__list p { grid-column: 2; }
}
@media (prefers-reduced-motion: reduce) {
  .pbp-who__ghost { translate: 0 -50%; }
  .pbp-who__list li { transition: none; }
}

/* =========================================================================
   06 . ENDORSEMENTS
   ========================================================================= */
.pbp-endorse { background: var(--bg); padding-block: clamp(60px, 9vh, 110px) var(--s-xxl); overflow: clip; }
.pbp-endorse__rows { list-style: none; margin: var(--s-md) 0 0; padding: 0; }
.pbp-endorse__rows li {
  border-top: 1px solid rgba(220, 203, 180, 0.14);
  transition: opacity 320ms var(--ease);
}
.pbp-endorse__rows li:last-child { border-bottom: 1px solid rgba(220, 203, 180, 0.14); }
.pbp-endorse__rows span {
  display: block;
  padding: clamp(16px, 2.6vh, 26px) 0;
  font-size: clamp(1.8rem, 4.6vw, 4rem); font-weight: 800; line-height: 1.05;
  letter-spacing: 0.01em; text-transform: uppercase;
  color: var(--cream, #F4E8DA);
  transition: color 320ms var(--ease), translate 320ms var(--ease);
}
.pbp-endorse__rows li:hover span { color: var(--gold); translate: 12px 0; }
.pbp-endorse__rows:has(li:hover) li:not(:hover) { opacity: 0.35; }

/* =========================================================================
   07 . FORMATS . the colophon
   ========================================================================= */
.pbp-formats { padding-block: var(--s-xxl); overflow: clip; }
.pbp-formats__inner {
  display: grid; align-items: start;
  grid-template-columns: minmax(240px, 0.52fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 100px);
}
.pbp-formats__rail { position: sticky; top: 110px; }

/* one cover, three ways it reaches a reader */
.pbp-formats__shots {
  margin-top: var(--s-md);
  display: flex; align-items: flex-end; flex-wrap: wrap;
  gap: clamp(16px, 2.6vw, 28px);
}
.pbp-shot { margin: 0; display: grid; justify-items: center; gap: 10px; }
.pbp-shot__frame {
  position: relative; display: block; width: clamp(76px, 9vw, 104px);
  transition: translate 400ms var(--ease);
}
.pbp-shot__frame img { display: block; width: 100%; height: auto; }
.pbp-shot figcaption {
  font-size: 0.625rem; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gold-deep, #7A5E20);
}
.pbp-shot:hover .pbp-shot__frame { translate: 0 -6px; }
.pbp-shot--print .pbp-shot__frame img { filter: drop-shadow(0 12px 20px rgba(20, 16, 15, 0.28)); }
.pbp-shot--screen .pbp-shot__frame {
  padding: 8px 8px 18px;
  border: 1.5px solid rgba(122, 94, 32, 0.5);
  border-radius: 9px;
  background: rgba(122, 94, 32, 0.05);
}
.pbp-shot--screen .pbp-shot__frame::after {
  content: ''; position: absolute; left: 50%; bottom: 7px;
  translate: -50% 0;
  width: 26px; height: 2px; border-radius: 1px;
  background: rgba(122, 94, 32, 0.5);
}
.pbp-shot--audio .pbp-shot__frame img { filter: grayscale(0.35) drop-shadow(0 10px 18px rgba(20, 16, 15, 0.24)); }
.pbp-shot--audio .pbp-shot__frame i {
  position: absolute; top: 50%; right: -12px;
  translate: 0 -50%;
  width: 8px; height: 8px;
  border: 1.5px solid var(--gold, #C19A4B);
  border-left-color: transparent; border-bottom-color: transparent;
  border-radius: 0 100% 0 0;
  opacity: 0;
  animation: pbp-wave 2.6s ease-out infinite;
}
.pbp-shot--audio .pbp-shot__frame i:nth-child(3) { width: 13px; height: 13px; right: -17px; animation-delay: 0.35s; }
.pbp-shot--audio .pbp-shot__frame i:nth-child(4) { width: 18px; height: 18px; right: -22px; animation-delay: 0.7s; }
@keyframes pbp-wave {
  0% { opacity: 0; }
  30% { opacity: 0.9; }
  100% { opacity: 0; }
}
.pbp-formats.is-ride .pbp-shot {
  --p: clamp(0, calc((var(--rp, 0) - var(--t, 0)) * 8), 1);
  opacity: calc(0.2 + 0.8 * var(--p));
  translate: 0 calc((1 - var(--p)) * 10px);
}

/* the page count, in the rail */
.pbp-formats__pages {
  margin: var(--s-md) 0 0;
  display: flex; align-items: baseline; gap: 10px;
}
.pbp-formats__pages b {
  font-size: clamp(3rem, 6vw, 5rem); font-weight: 800; font-style: italic;
  line-height: 1;
  color: transparent; -webkit-text-stroke: 1.5px rgba(122, 94, 32, 0.3);
}
.pbp-formats__pages i {
  font-style: normal;
  font-size: 0.625rem; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: #8A7C6B;
}

/* the editions, one line each */
.pbp-formats__list {
  list-style: none; margin: 0; padding: 0;
  border-top: 1px solid var(--hairline, #DCCBB4);
}
.pbp-fmt {
  display: grid; align-items: center;
  grid-template-columns: clamp(26px, 3vw, 34px) minmax(0, 1fr) auto;
  gap: clamp(16px, 2.6vw, 34px);
  padding: clamp(16px, 2.6vh, 26px) 0;
  border-bottom: 1px solid var(--hairline, #DCCBB4);
  transition: opacity 320ms var(--ease);
}
.pbp-fmt__icon { width: 100%; height: auto; overflow: visible; }
.pbp-fmt__icon path {
  fill: none;
  stroke: var(--gold-deep, #7A5E20); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 100; stroke-dashoffset: 0;
}
.pbp-fmt__name h3 {
  margin: 0;
  font-size: clamp(1.05rem, 1.5vw, 1.3rem); font-weight: 700;
  color: var(--ink);
}
.pbp-fmt__name p {
  margin: 4px 0 0; max-width: 42ch;
  font-size: clamp(0.9rem, 1.05vw, 0.98rem); line-height: 1.55;
  color: #5C5044; text-wrap: pretty;
}
.pbp-fmt__spec { display: grid; justify-items: end; gap: 3px; text-align: right; }
.pbp-fmt__spec b {
  font-size: clamp(0.78rem, 0.95vw, 0.88rem); font-weight: 700;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
  color: var(--gold-deep, #7A5E20);
  white-space: nowrap;
}
.pbp-fmt__spec i {
  font-style: normal;
  font-size: 0.625rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: #8A7C6B;
  white-space: nowrap;
}
.pbp-formats.is-ride .pbp-fmt {
  --p: clamp(0, calc((var(--rp, 0) - var(--t, 0)) * 6), 1);
  opacity: calc(0.24 + 0.76 * var(--p));
  transform: translateY(calc((1 - var(--p)) * 12px));
}
.pbp-formats.is-ride .pbp-fmt__icon path { stroke-dashoffset: calc((1 - var(--p, 1)) * 100); }
.pbp-formats__list:has(.pbp-fmt:hover) .pbp-fmt:not(:hover) { opacity: 0.4; }

/* the disclosure: mandatory, and it looks it */
.pbp-formats__note {
  position: relative;
  margin-top: clamp(26px, 4vh, 40px);
  padding: clamp(20px, 2.8vh, 28px) clamp(20px, 2.8vw, 32px);
  border-left: 2px solid var(--gold-deep, #7A5E20);
  background: rgba(122, 94, 32, 0.055);
}
.pbp-formats__note-tag {
  display: inline-block; margin-bottom: 8px;
  font-size: 0.625rem; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: #8A7C6B;
}
.pbp-formats__note p {
  margin: 0;
  font-size: clamp(1rem, 1.3vw, 1.15rem); line-height: 1.55; font-weight: 600;
  color: var(--ink); text-wrap: pretty;
}
.pbp-formats__map {
  margin: clamp(20px, 3vh, 30px) 0 0; max-width: min(58ch, 100%);
  font-size: clamp(0.92rem, 1.1vw, 1rem); line-height: 1.7;
  color: #8A7C6B; text-wrap: pretty;
}
.pbp-formats__map em { font-style: normal; font-weight: 600; color: #5C5044; }
.pbp-formats.is-ride .pbp-formats__map {
  --p: clamp(0, calc((var(--rp, 0) - var(--t, 0)) * 5), 1);
  opacity: calc(0.3 + 0.7 * var(--p));
}

/* =========================================================================
   08 . BUY . the counter
   ========================================================================= */
.pbp-buy { background: var(--bg); padding-block: var(--s-xxl); overflow: clip; }
.pbp-buy__split {
  margin-top: var(--s-lg);
  display: grid; align-items: start;
  grid-template-columns: minmax(0, 0.32fr) minmax(0, 1fr);
  gap: clamp(30px, 5vw, 70px);
}
.pbp-buy__cover { margin: 0; position: relative; }
.pbp-buy__cover img {
  display: block; width: 100%; height: auto;
  rotate: -2.5deg;
  filter: drop-shadow(0 22px 40px rgba(0, 0, 0, 0.55));
  transition: rotate 600ms var(--ease), scale 600ms var(--ease);
}
.pbp-buy__split:hover .pbp-buy__cover img { rotate: 0deg; scale: 1.02; }
.pbp-buy__cover::after {
  content: ''; position: absolute; inset: -10% -14%;
  z-index: -1; pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%, rgba(193, 154, 75, 0.18), transparent 70%);
}

/* the doors */
.pbp-buy__grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid rgba(220, 203, 180, 0.14);
}
.pbp-door {
  position: relative; overflow: hidden;
  display: grid; align-items: center;
  grid-template-columns: clamp(22px, 2.2vw, 28px) minmax(0, 1fr) auto;
  gap: clamp(12px, 1.6vw, 18px);
  padding: clamp(16px, 2.4vh, 24px) clamp(12px, 1.6vw, 20px);
  border-bottom: 1px solid rgba(220, 203, 180, 0.14);
  font-size: clamp(0.92rem, 1.25vw, 1.12rem); font-weight: 700;
  letter-spacing: 0.02em; text-transform: uppercase;
  color: var(--cream, #F4E8DA); text-decoration: none;
  transition: color 300ms var(--ease), opacity 320ms var(--ease);
  --p: clamp(0, calc((var(--rp, 0) - var(--t, 0)) * 7), 1);
  opacity: calc(0.25 + 0.75 * var(--p));
}
.pbp-door:nth-child(odd) { border-right: 1px solid rgba(220, 203, 180, 0.14); }
/* the gold wash that opens the door from the left */
/* o wash fica no fundo da propria porta, nao atras da secao:
   com z-index negativo ele some por tras do background do pai. */
.pbp-door > * { position: relative; z-index: 1; }
.pbp-door::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(90deg, rgba(193, 154, 75, 0.16), transparent 70%);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 480ms var(--ease);
}
.pbp-door__ico { width: 100%; height: auto; overflow: visible; }
.pbp-door__ico path {
  fill: none;
  stroke: rgba(193, 154, 75, 0.55); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 100;
  stroke-dashoffset: calc((1 - var(--p, 1)) * 100);
  transition: stroke 300ms var(--ease);
}
.pbp-door b { font-weight: 700; }
.pbp-door__go {
  font-style: normal; color: var(--gold, #C19A4B);
  transition: translate 300ms var(--ease);
}
.pbp-door:hover { color: var(--gold, #C19A4B); }
.pbp-door:hover::before { transform: scaleX(1); }
.pbp-door:hover .pbp-door__ico path { stroke: var(--gold, #C19A4B); }
.pbp-door:hover .pbp-door__go { translate: 4px -4px; }
.pbp-buy__grid:has(.pbp-door:not(.pbp-door--soon):hover) .pbp-door:not(:hover) { opacity: 0.35; }

/* the two doors with no destination yet */
.pbp-door--soon { color: rgba(167, 155, 140, 0.5); cursor: default; }
.pbp-door--soon .pbp-door__ico path { stroke: rgba(167, 155, 140, 0.28); }
.pbp-door--soon .pbp-door__go {
  width: 14px; height: 1.5px; border-radius: 1px;
  background: rgba(167, 155, 140, 0.35);
}
.pbp-door--soon:hover { color: rgba(167, 155, 140, 0.5); }
.pbp-door--soon:hover::before { transform: scaleX(0); }

.pbp-buy__helper {
  margin: var(--s-md) 0 0;
  font-size: clamp(0.85rem, 1vw, 0.95rem); line-height: 1.6;
  color: rgba(167, 155, 140, 0.7); text-wrap: pretty;
}

/* =========================================================================
   09 . COMMITMENT . proceeds with a destination
   ========================================================================= */
.pbp-commit { background: var(--bg); padding-block: var(--s-xxl); position: relative; overflow: clip; }
.pbp-commit::before {
  content: ''; position: absolute; inset: auto -20% -35%; height: 80%;
  pointer-events: none;
  background: radial-gradient(50% 60% at 50% 100%, rgba(193, 154, 75, 0.1) 0%, transparent 70%);
  animation: pp-halo-breathe 9s ease-in-out infinite;
}
.pbp-commit__inner { position: relative; display: grid; justify-items: center; text-align: center; }

/* the span: drawn on arrival, crossed for good */
.pbp-commit__arc { width: min(320px, 68vw); margin-bottom: clamp(14px, 2.4vh, 24px); }
.pbp-commit__arc svg { display: block; width: 100%; height: auto; overflow: visible; }
.pbp-commit__deck {
  stroke: rgba(193, 154, 75, 0.28); stroke-width: 1.5; stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: calc((1 - clamp(0, calc(var(--rp, 0) * 2.2), 1)) * 100);
}
.pbp-commit__span {
  stroke: var(--gold, #C19A4B); stroke-width: 2; stroke-linecap: round;
  filter: drop-shadow(0 0 6px rgba(193, 154, 75, 0.4));
  stroke-dasharray: 100;
  stroke-dashoffset: calc((1 - clamp(0, calc((var(--rp, 0) - 0.08) * 2), 1)) * 100);
}
/* the two piers: the two organizations the span reaches */
.pbp-commit__pier {
  fill: var(--bg);
  stroke: var(--gold, #C19A4B); stroke-width: 1.6;
  transform-box: fill-box; transform-origin: center;
  transform: scale(clamp(0, calc((var(--rp, 0) - 0.04) * 5), 1));
}
.pbp-commit__pier--r { transform: scale(clamp(0, calc((var(--rp, 0) - 0.22) * 5), 1)); }
/* the light that keeps crossing */
.pbp-commit__run {
  fill: var(--light-gold, #F3D88E);
  filter: drop-shadow(0 0 6px rgba(243, 216, 142, 0.9));
  offset-path: path('M46 58 C 110 6, 210 6, 274 58');
  animation: pbp-commit-cross 6s linear infinite 1.4s;
  opacity: 0;
}
@keyframes pbp-commit-cross {
  0%   { offset-distance: 0%;   opacity: 0; }
  10%  { opacity: 1; }
  86%  { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}

.pbp-commit__lead {
  margin: var(--s-md) 0 0; max-width: min(46ch, 100%);
  font-size: clamp(1.15rem, 1.9vw, 1.65rem); line-height: 1.5; font-weight: 300;
  color: rgba(244, 232, 218, 0.9); text-wrap: pretty;
}
/* the two names the money reaches */
.pbp-commit__lead em {
  font-style: normal; font-weight: 700;
  color: var(--cream, #F4E8DA);
  position: relative;
}
.pbp-commit__lead em::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -3px; height: 1.5px;
  border-radius: 1px;
  background: linear-gradient(90deg, var(--gold, #C19A4B), rgba(193, 154, 75, 0.3));
  transform: scaleX(var(--np, 1)); transform-origin: left center;
}
.pbp-commit.is-ride .pbp-commit__lead em { --np: clamp(0, calc((var(--rp, 0) - 0.12) * 5), 1); }

.pbp-commit__body {
  margin: var(--s-md) 0 0; max-width: min(56ch, 100%);
  font-size: clamp(1rem, 1.3vw, 1.15rem); line-height: 1.7;
  color: var(--ink-muted, #A79B8C); text-wrap: pretty;
}
/* the three things that decided the choice */
.pbp-commit__body b { font-weight: 600; color: var(--gold, #C19A4B); }
/* the line that gives the commitment its reason */
.pbp-commit__body i {
  font-style: italic; font-weight: 500;
  font-size: 1.16em;
  color: var(--light-gold, #F3D88E);
}
.pbp-commit.is-ride :is(.pbp-commit__lead, .pbp-commit__body) {
  --p: clamp(0, calc((var(--rp, 0) - var(--t, 0)) * 5), 1);
  opacity: calc(0.24 + 0.76 * var(--p));
  transform: translateY(calc((1 - var(--p)) * 14px));
  filter: blur(calc((1 - var(--p)) * 4px));
}
.pbp-commit__cta { margin: var(--s-lg) 0 0; }

@media (prefers-reduced-motion: reduce) {
  .pbp-commit::before { animation: none; }
  .pbp-commit__run { animation: none; opacity: 0; }
}

/* =========================================================================
   10 . TOGETHER . the book, talked through
   ========================================================================= */
.pbp-together { padding-block: var(--s-xxl); overflow: clip; }
.pbp-together__inner { display: grid; justify-items: center; text-align: center; }

/* the two halves of the same sentence, set against each other */
.pbp-together__pair {
  margin-top: clamp(28px, 4.5vh, 48px);
  display: grid; align-items: center;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
  width: min(880px, 100%);
}
.pbp-tog {
  display: grid; justify-items: center; gap: clamp(14px, 2.2vh, 20px);
  --p: clamp(0, calc((var(--rp, 0) - var(--t, 0)) * 6), 1);
  opacity: calc(0.2 + 0.8 * var(--p));
  transform: translateY(calc((1 - var(--p)) * 14px));
  transition: opacity 320ms var(--ease);
}
.pbp-tog__ico { width: clamp(52px, 7vw, 72px); height: auto; overflow: visible; }
.pbp-tog__ico path {
  fill: none;
  stroke: rgba(122, 94, 32, 0.55); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 100;
  stroke-dashoffset: calc((1 - var(--p, 1)) * 100);
  transition: stroke 320ms var(--ease);
}
.pbp-tog p {
  margin: 0; max-width: min(22ch, 100%);
  font-size: clamp(1.15rem, 1.9vw, 1.6rem); line-height: 1.4; font-weight: 300;
  color: #5C5044; text-wrap: pretty;
}
.pbp-tog em { font-style: italic; font-weight: 500; color: var(--gold-deep, #7A5E20); }

/* the second half is the point of the section: it carries the weight */
.pbp-tog--on p { color: var(--ink); }
.pbp-tog--on .pbp-tog__ico path {
  stroke: var(--gold, #C19A4B); stroke-width: 2.2;
  filter: drop-shadow(0 0 5px rgba(193, 154, 75, 0.3));
}

/* the rule between them, drawn as the pair lands */
.pbp-tog__rule {
  display: block; width: 1px;
  height: clamp(70px, 12vh, 108px);
  background: linear-gradient(to bottom, transparent, var(--hairline, #DCCBB4) 22% 78%, transparent);
  transform: scaleY(clamp(0, calc((var(--rp, 0) - 0.1) * 4), 1));
}

.pbp-together__pair:has(.pbp-tog:hover) .pbp-tog:not(:hover) { opacity: 0.42; }

.pbp-together__actions { margin-top: clamp(30px, 5vh, 52px); justify-content: center; }
.btn--ghost-ink { border-color: rgba(122, 94, 32, 0.4); color: var(--ink); }
.btn--ghost-ink:hover { border-color: var(--gold-deep, #7A5E20); color: var(--gold-deep, #7A5E20); }

@media (max-width: 720px) {
  .pbp-together__pair { grid-template-columns: minmax(0, 1fr); gap: clamp(22px, 4vh, 34px); }
  .pbp-tog__rule { width: clamp(70px, 30vw, 120px); height: 1px; justify-self: center;
    background: linear-gradient(to right, transparent, var(--hairline, #DCCBB4) 22% 78%, transparent);
    transform: scaleX(clamp(0, calc((var(--rp, 0) - 0.1) * 4), 1)); }
}

/* =========================================================================
   11 . CLOSING . strength, not the feeling of it
   ========================================================================= */
.pbp-close { background: #0A0807; padding-block: var(--s-xxl); position: relative; overflow: clip; }
.pbp-close::before {
  content: ''; position: absolute; inset: auto -20% -35%; height: 80%;
  pointer-events: none;
  background: radial-gradient(50% 60% at 50% 100%, rgba(193, 154, 75, 0.13) 0%, transparent 70%);
  animation: pp-halo-breathe 8s ease-in-out infinite;
}
.pbp-close__inner { position: relative; display: grid; justify-items: center; text-align: center; }
.pbp-close .pp-h2 { max-width: min(22ch, 100%); }
/* the title turns on its own hinge: the first sentence recedes,
   the second one -- the instruction -- carries the weight. */
.pbp-close .pp-h2.is-words .w:nth-child(-n+6) i { color: rgba(244, 232, 218, 0.42); }
.pbp-close .pp-h2.is-words .w:nth-child(n+7) i { color: var(--cream, #F4E8DA); }

/* the five acts the book asks for */
.pbp-close__acts {
  list-style: none; margin: clamp(28px, 4.5vh, 46px) 0 0; padding: 0;
  display: grid; justify-items: center; gap: clamp(12px, 2vh, 18px);
}
.pbp-close__acts li {
  position: relative;
  display: flex; align-items: baseline; gap: clamp(10px, 1.4vw, 16px);
  --p: clamp(0, calc((var(--rp, 0) - var(--t, 0)) * 7), 1);
  opacity: calc(0.18 + 0.82 * var(--p));
  transform: translateY(calc((1 - var(--p)) * 10px));
  transition: opacity 300ms var(--ease);
}
/* the thread that ties one act to the next */
.pbp-close__acts li + li::before {
  content: ''; position: absolute; left: 50%; top: calc(-1 * clamp(12px, 2vh, 18px));
  translate: -50% 0;
  width: 1px; height: clamp(12px, 2vh, 18px);
  background: rgba(193, 154, 75, 0.4);
  transform: scaleY(var(--p, 1)); transform-origin: top center;
}
.pbp-close__acts b {
  font-size: 0.625rem; font-weight: 700; font-style: italic;
  letter-spacing: 0.1em;
  font-variant-numeric: tabular-nums;
  color: rgba(193, 154, 75, calc(0.3 + 0.6 * var(--p, 1)));
}
.pbp-close__acts span {
  font-size: clamp(1.05rem, 1.6vw, 1.35rem); line-height: 1.4; font-weight: 300;
  color: rgba(244, 232, 218, 0.85);
}
.pbp-close__acts:has(li:hover) li:not(:hover) { opacity: 0.4; }

/* the last word of the page */
.pbp-close__law {
  margin: clamp(30px, 5vh, 52px) 0 0;
  --p: clamp(0, calc((var(--rp, 0) - var(--t, 0)) * 5), 1);
  opacity: calc(0.2 + 0.8 * var(--p));
  transform: translateY(calc((1 - var(--p)) * 12px));
}
.pbp-close__law em {
  font-style: italic; font-weight: 500;
  font-size: clamp(1.5rem, 3vw, 2.5rem); line-height: 1.3;
  background: linear-gradient(110deg, #F3D88E 34%, #F4E8DA 48%, #E9BE6A 54%, #F3D88E 68%);
  background-size: 260% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: pbp-close-sheen 7s ease-in-out infinite 1.5s;
}
@keyframes pbp-close-sheen {
  0%        { background-position: 130% 0; }
  42%, 100% { background-position: -30% 0; }
}
.pbp-close__actions { margin-top: clamp(30px, 5vh, 50px); justify-content: center; }
.pbp-close__apply { margin: var(--s-md) 0 0; }
.pbp-close__apply a {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.6875rem; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gold); text-decoration: none;
  transition: color 300ms var(--ease);
}
.pbp-close__apply a:hover { color: var(--light-gold, #F3D88E); }
.pbp-close__apply i { font-style: normal; transition: translate 300ms var(--ease); }
.pbp-close__apply a:hover i { translate: 4px 0; }

@media (prefers-reduced-motion: reduce) {
  .pbp-close__law em { animation: none; -webkit-text-fill-color: var(--light-gold, #F3D88E); }
}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 900px) {
  .pbp-hero__inner { grid-template-columns: 1fr; }
  .pbp-hero__blueprint { display: none; }
  .pbp-hero__art { min-height: 0; margin-top: var(--s-md); }
  .pbp-hero__cover { width: min(76%, 320px); translate: 0 0; }
  .pbp-hero__seven { font-size: clamp(10rem, 42vw, 16rem); }
  .pbp-buy__split { grid-template-columns: 1fr; gap: var(--s-md); }
  .pbp-buy__cover { width: min(58%, 240px); justify-self: start; }
  .pbp-sys__inner, .pbp-seven__inner, .pbp-formats__inner { grid-template-columns: 1fr; gap: var(--s-lg); }
  .pbp-sys__rail { position: static; }
  .pbp-tower { width: min(62%, 190px); }
  .pbp-formats__rail { position: static; }
  .pbp-fmt { grid-template-columns: clamp(24px, 7vw, 32px) minmax(0, 1fr); gap: 16px; }
  .pbp-fmt__spec { grid-column: 2; justify-items: start; text-align: left; margin-top: 6px; }
  .pbp-seven__rail { position: static; }
  .pbp-seven__meter { display: none; }
  .pbp-ledger__cols { grid-template-columns: 1fr; gap: var(--s-lg); }
  .pbp-buy__grid { grid-template-columns: 1fr; }
  .pbp-door:nth-child(odd) { border-right: 0; }
  .pbp-door { padding-inline: 0; }
  .pbp-seven__item { padding-left: 0; }
  .pbp-seven__item::before { position: static; display: block; margin-bottom: 4px; font-size: 2.4rem; }
}

/* =========================================================================
   REDUCED MOTION
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  .pbp-hero::before, .pbp-commit::before, .pbp-close::before { animation: none; }
  .pbp-hero__l i { animation: none; }
  .pbp-b { animation: none; stroke-dashoffset: 0; }
  .pbp-hero__cover, .pbp-shot--audio .pbp-shot__frame i { animation: none; }
  .pbp-buy__cover img { transition: none; }
  .pbp-hero__inner, .pbp-hero__art { translate: none; }
  .js .pbp-hero__title.reveal .pbp-hero__l i { translate: none; transition: none; }
  .js .pbp-commit__arc :is(.pbp-commit__arc-deck, .pbp-commit__arc-span) { stroke-dashoffset: 0; transition: none; }
}

/* pf-hero-title-mobile: the single long word must fit a phone */
@media (max-width: 640px) {
  .pbp-hero__title { font-size: clamp(1.85rem, 8.6vw, 2.7rem); }
}