/* ==========================================================================
   8. Guides
   ========================================================================== */

.band.compact-guides { scroll-margin-top:85px; padding-block:3rem 5rem; }
.compact-guides .section-heading { max-width:none; margin-bottom:1.6rem; }
.compact-guides .section-intro { max-width:75ch; font-size:1.12rem; }
.compact-guides h2 { max-width:none; font-size:clamp(1.8rem,3.2vw,2.65rem); margin-bottom:0.75rem; }
.compact-guides h3 { font-size:1.5rem; }
.compact-guides .skill-name {
  color:var(--strand-deep);
  font-size:0.78rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:0.1em;
  margin-bottom:0.45rem;
}

.strand-reading { --strand:var(--strand-comprehension); --strand-deep:var(--strand-comprehension-deep); }
.strand-writing { --strand:var(--strand-writing); --strand-deep:var(--strand-writing-deep); }
.strand-grammar { --strand:var(--strand-grammar); --strand-deep:var(--strand-grammar-deep); }

.trio-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:2.4rem; }
.trio-person { position:relative; }
.trio-art {
  height:160px;
  display:grid;
  place-items:center start;
  position:relative;
  isolation:isolate;
  margin-bottom:1rem;
}

.guide-letter {
  position:absolute;
  top:-0.18em;
  right:-0.06em;
  z-index:0;
  font-family:var(--font-display);
  font-size:clamp(14rem, 34vw, 26rem);
  font-weight:700;
  line-height:1;
  color:var(--strand);
  opacity:0.14;
  pointer-events:none;
}

.trio-letter { top:-0.22em; right:calc(100% - 215px); font-size:200px; }
.trio-art img {
  height:160px;
  width:175px;
  object-fit:contain;
  object-position:left bottom;
  position:relative;
  filter:drop-shadow(var(--shadow-guide));
}
.trio-person h3 { margin-bottom:0.65rem; }
.trio-person .person-summary { margin-bottom:0; max-width:31ch; }

.guide-footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
  margin-top:1.5rem;
  border-top:1px solid var(--guide-rule);
  padding-top:1.1rem;
}
.guide-footer p { margin:0; max-width:52ch; font-size:0.94rem; }
.guide-footer .btn { flex-shrink:0; }

@media (min-width:640px) {
  .trio-grid { grid-template-rows:repeat(4, auto); row-gap:0; }
  .trio-person { display:grid; grid-row:span 4; grid-template-rows:subgrid; row-gap:0; }
  .trio-copy { display:grid; grid-row:span 3; grid-template-rows:subgrid; row-gap:0; }
}

@media (max-width:899px) {
  .trio-grid { column-gap:1.4rem; }
  .trio-art, .trio-art img { height:155px; }
  .trio-art img { width:175px; transform:translateX(-10px); }
  .trio-letter { right:-4px; font-size:176px; }
}

@media (max-width:639px) {
  .band.compact-guides { scroll-margin-top:70px; }
  .compact-guides h2 { font-size:2rem; }
  .compact-guides .section-intro { font-size:1.05rem; }
  .trio-grid { grid-template-columns:1fr; gap:1.25rem; }
  .trio-person { display:grid; grid-template-columns:95px minmax(0,1fr); gap:1rem; align-items:center; }
  .trio-art { height:130px; margin:0; }
  .trio-art img { width:95px; height:125px; transform:translateX(-6px); }
  .trio-letter { top:-0.23em; right:-12px; font-size:112px; }
  .trio-person h3 { font-size:1.25rem; margin-bottom:0.35rem; }
  .trio-person .skill-name { font-size:0.68rem; margin-bottom:0.25rem; }
  .trio-person .person-summary { font-size:0.92rem; line-height:1.5; }
  .guide-footer { flex-direction:column; align-items:flex-start; gap:1rem; }
}

/* ==========================================================================
   9. Method
   ========================================================================== */

.steps {
  list-style:none;
  display:grid;
  gap:1rem;
  padding:0;
  margin:0 0 2.5rem;
}

.step {
  --text-strong:var(--strand-deep);
  --text-body:var(--strand-deep);
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:1rem;
  padding:1.25rem;
  border-radius:var(--radius);
  background:var(--ppe-white);
  color:var(--text-body);
}

.step-number {
  display:grid;
  place-items:center;
  width:2.6rem; height:2.6rem;
  border-radius:50%;
  background:var(--strand);
  color:var(--ppe-white);
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.2rem;
}

.step h3 { font-size:1.2rem; margin-bottom:0.35rem; }
.step p { font-size:1rem; line-height:1.6; margin:0; }
.step .step-strand {
  margin-bottom:0.2rem;
  color:var(--strand-deep);
  font-size:0.72rem;
  font-weight:800;
  line-height:1.4;
  text-transform:uppercase;
  letter-spacing:0.1em;
}

.method-extras { display:grid; gap:1.6rem; }
.extra::before {
  content:'';
  display:block;
  width:2.5rem;
  height:4px;
  margin-bottom:0.9rem;
  border-radius:var(--radius-pill);
  background:var(--ppe-gold);
}
.extra h3 { font-size:1.25rem; margin-bottom:0.3rem; }
.extra p { margin:0; }

@media (min-width:900px) {
  .steps { grid-template-columns:repeat(5, 1fr); grid-template-rows:repeat(4, auto); gap:0 1rem; }
  .step { grid-row:span 4; grid-template-columns:none; grid-template-rows:subgrid; gap:0; padding:1.5rem; }
  .step-body { display:grid; grid-row:span 3; grid-template-rows:subgrid; }
  .step-number { margin-bottom:0.8rem; }

  .method-extras { grid-template-columns:repeat(3, 1fr); }
}

/* ==========================================================================
   10. Books
   ========================================================================== */

.book-grid { display:grid; gap:1.5rem; }

.book {
  position:relative;
  display:flex;
  flex-direction:column;
  padding:1.6rem;
  border-radius:var(--radius-lg);
  background:var(--surface-raised);
  box-shadow:var(--shadow-sm);
  border:1px solid var(--line);
}

.age-pill {
  display:inline-block;
  margin:0 0 1rem;
  padding:0.4rem 1rem;
  border-radius:var(--radius-pill);
  background:var(--surface-invert);
  color:var(--ppe-white);
  font-family:var(--font-display);
  font-size:var(--step-small);
  font-weight:600;
  transform:rotate(-1.5deg);
}

.book-cover {
  display:grid;
  place-items:center;
  width:min(100%, 15rem);
  aspect-ratio:452 / 640;
  margin:0 auto 1.25rem;
  border:2px dashed var(--line-strong);
  border-radius:var(--radius);
  background:var(--surface-mist);
}
.book-cover:has(img) { border:0; box-shadow:var(--shadow-sm); overflow:hidden; }
.book-cover img { width:100%; height:100%; object-fit:cover; }

.book-body { display:flex; flex-direction:column; flex:1; }
.book-body h3 { margin-bottom:0.3rem; }
.book-subtitle { margin:0; color:var(--text-muted); }
.book-body .btn { margin-top:auto; align-self:flex-start; }

.book-facts { list-style:none; padding:0; margin:1rem 0; }
.book-facts li { padding:0.45rem 0; border-top:1px solid var(--line); font-size:var(--step-small); }

.book-price { margin-bottom:1.1rem; }
.book-price p { margin:0; }

.price-label {
  font-family:var(--font-display);
  font-size:var(--step-small);
  font-weight:600;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--ppe-magenta);
}

.price-figures {
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:0.6rem;
  font-family:var(--font-display);
  font-size:1.5rem;
  font-weight:600;
  color:var(--text-strong);
}
.price-figures del,
.price-figures ins { text-decoration:none; }

.price-figures .price-was {
  font-size:1.1rem;
  color:var(--text-muted);
  text-decoration:line-through;
  text-decoration-color:var(--ppe-magenta);
  text-decoration-thickness:2px;
}
.price-figures .price-now { font-size:2rem; }

.price-badge {
  position:absolute;
  top:3.1rem;
  right:-0.5rem;
  display:grid;
  place-content:center;
  width:5.4rem;
  aspect-ratio:1;
  border-radius:50%;
  background:var(--ppe-magenta);
  color:var(--ppe-white);
  box-shadow:var(--shadow-pop);
  font-family:var(--font-display);
  font-size:1.6rem;
  font-weight:700;
  line-height:1;
  text-align:center;
  transform:rotate(12deg);
}
.price-badge span {
  display:block;
  font-size:0.85rem;
  font-weight:600;
  letter-spacing:0.08em;
  text-transform:uppercase;
}

@media (min-width:640px) {
  .book-grid { grid-template-columns:repeat(2, 1fr); }
}

/* ==========================================================================
   11. Authors
   ========================================================================== */

.author-grid { display:grid; gap:1.5rem; }

.author {
  position:relative;
  display:flex;
  flex-direction:column;
  padding:1.75rem;
  border-radius:var(--radius-lg);
  background:var(--surface-raised);
  box-shadow:var(--shadow-sm);
  text-align:center;
}

.author-portrait {
  width:min(100%, clamp(13rem, 24vw, 18rem));
  aspect-ratio:1;
  margin:0 auto 1.5rem;
}

.author-photo {
  display:grid;
  place-items:center;
  width:100%;
  height:100%;
  aspect-ratio:1;
  border:3px dashed var(--line-strong);
  border-radius:50%;
  background:var(--surface-mist);
}
.author-photo:has(img) { border:0; overflow:hidden; }
.author-photo img { width:100%; height:100%; object-fit:cover; object-position:50% 25%; }

.author-avatar {
  position:absolute;
  top:-1.25rem;
  right:-0.75rem;
  z-index:1;
  width:var(--author-avatar-size);
  height:var(--author-avatar-size);
  overflow:hidden;
  pointer-events:none;
  filter:drop-shadow(var(--shadow-guide));
  transform:rotate(4deg);
  transform-origin:50% 85%;
}
.author-avatar-left { left:-0.75rem; right:auto; transform:rotate(-4deg); }
.author-avatar img {
  width:200%;
  max-width:none;
  height:200%;
}
.js-motion .author-avatar img {
  animation:author-wave var(--author-wave-dur) steps(1, end) infinite;
  animation-play-state:paused;
}
.js-motion .author.is-in .author-avatar img { animation-play-state:running; }
.author:nth-child(2) .author-avatar img { animation-delay:var(--author-wave-delay); }

@keyframes author-wave {
  0%, 16%, 32%, 100% { transform:translate(0, 0); }
  4%, 20% { transform:translate(-50%, 0); }
  8%, 24% { transform:translate(0, -50%); }
  12%, 28% { transform:translate(-50%, -50%); }
}

.author h3 { margin-bottom:0.2rem; }
.author-business {
  font-family:var(--font-display);
  font-size:var(--step-small);
  font-weight:600;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--ppe-magenta);
  margin-bottom:0.8rem;
}
.author-bio {
  max-width:48ch;
  margin-inline:auto;
  color:var(--text-muted);
  text-align:left;
}
.author-bio p { margin:0; }
.author-bio p + p { margin-top:1rem; }

.author .social-links {
  justify-content:center;
  align-items:center;
  width:100%;
  padding-top:1.5rem;
  margin:auto 0 0;
}

@media (prefers-reduced-motion:reduce) {
  .js-motion .author-avatar img { animation:none; }
}

@media (min-width:640px) {
  .author-grid { grid-template-columns:repeat(2, 1fr); }
}

@media (min-width:900px) {
  .author-grid { gap:2.5rem; }
}

/* ==========================================================================
   12. Sample pages & form
   ========================================================================== */

.samples-inner { display:grid; gap:2.5rem; }

.samples-list { list-style:none; padding:0; margin:1.25rem 0 0; }
.samples-list li {
  position:relative;
  padding-left:1.8rem;
  margin-bottom:0.6rem;
}
.samples-list li::before {
  content:'';
  position:absolute;
  left:0; top:0.55em;
  width:0.85rem; height:0.85rem;
  border-radius:50%;
  background:var(--strand);
}

.sample-form {
  padding:1.9rem;
  border-radius:var(--radius-lg);
  background:var(--ppe-white);
  box-shadow:var(--shadow-lg);
  color:var(--ppe-ink);
  --text-muted:var(--text-muted-on-light);
}

.field { margin-bottom:1.15rem; border:0; padding:0; }

.field label,
.field legend {
  display:block;
  margin-bottom:0.35rem;
  font-weight:800;
  font-size:var(--step-small);
  color:var(--ppe-ink);
}

.field input[type="email"],
.field select {
  width:100%;
  padding:0.8rem 0.95rem;
  border:2px solid rgba(var(--rgb-ink),0.22);
  border-radius:var(--radius-sm);
  background:var(--ppe-white);
  font-family:var(--font-body);
  font-size:1rem;
  color:var(--ppe-ink);
}

.field select {
  appearance:none;
  padding-right:2.6rem;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ppe-ink) 50%),
    linear-gradient(135deg, var(--ppe-ink) 50%, transparent 50%);
  background-position:calc(100% - 1.35rem) 55%, calc(100% - 1rem) 55%;
  background-size:0.35rem 0.35rem;
  background-repeat:no-repeat;
  cursor:pointer;
}

.check {
  display:flex;
  align-items:center;
  gap:0.55rem;
  margin-bottom:0.35rem;
  font-weight:400;
  font-size:1rem;
  color:var(--ppe-ink);
}
.check input { width:1.15rem; height:1.15rem; accent-color:var(--ppe-magenta); }

.sample-form .btn { width:100%; }

.form-small { margin:0.9rem 0 0; font-size:var(--step-small); color:var(--text-muted); }

.form-status:empty { display:none; }
.form-status {
  margin:0.9rem 0 0;
  padding:0.75rem 0.95rem;
  border-radius:var(--radius-sm);
  background:var(--strand-comprehension-tint);
  color:var(--strand-comprehension-deep);
  font-size:var(--step-small);
  font-weight:700;
}
.form-status[data-state="error"] {
  background:var(--strand-grammar-tint);
  color:var(--strand-grammar-deep);
}

@media (min-width:640px) {
  .sample-form { padding:2.3rem; }
}

@media (min-width:900px) {
  .samples-inner { grid-template-columns:minmax(0,1fr) minmax(0,0.85fr); align-items:start; }
}

/* ==========================================================================
   13. Footer
   ========================================================================== */

.site-footer { padding-bottom:1.5rem; }

.footer-inner { display:grid; gap:2rem; }

.footer-brand img { height:62px; width:auto; filter:brightness(0) invert(1); }
.footer-brand p { margin-top:0.9rem; }

.footer-nav { display:grid; gap:0.5rem; }
.footer-nav a,
.footer-contact a {
  color:var(--ppe-white);
  font-family:var(--font-display);
  font-weight:500;
  text-decoration:none;
}

.footer-nav a:hover,
.footer-contact a:hover { color:var(--ppe-gold); }

.footer-legal {
  margin-top:2.5rem;
  padding-top:1.3rem;
  border-top:1px solid rgba(var(--rgb-white),0.18);
}
.footer-legal p { margin:0 0 0.4rem; font-size:var(--step-small); }
.footer-admin { margin-left:0.5rem; color:var(--text-on-invert-muted); }
.footer-admin:hover { color:var(--ppe-gold); }

@media (min-width:900px) {
  .footer-inner { grid-template-columns:2fr 1fr 1fr; }
}

/* ==========================================================================
   16. Reviews
   ========================================================================== */

.reviews { overflow-x:clip; }

.reviews-layout {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:"heading heading" "pile pile" "controls pause";
  align-items:center;
}
.reviews-layout .section-heading { grid-area:heading; margin-bottom:1.5rem; }

.review-pile {
  grid-area:pile;
  display:grid;
  padding:0.5rem 1rem 2rem;
}

.review-card {
  grid-area:1 / 1;
  perspective:1600px;
  transform:translate(-0.8rem, 0.9rem) rotate(-4deg);
}
.review-card[data-pos="0"] { transform:rotate(-1.5deg); }
.review-card[data-pos="1"] { transform:translate(0.8rem, 0.5rem) rotate(3deg); }
.review-card[data-pos="3"] { opacity:0; }

.review-card {
  --rule:1.875rem;
  --ink-x:2.6rem;
  --margin-x:1.85rem;
  --pad-r:1.4rem;
}

.review-card-inner {
  position:relative;
  height:100%;
  min-height:21rem;
  border-radius:var(--radius-paper);
  background:var(--surface-paper);
  box-shadow:var(--shadow-paper);
}

.review-face {
  display:flex;
  flex-direction:column;
  height:100%;
}
.is-flipped .review-front { visibility:hidden; }

.review-face::before {
  content:'';
  position:absolute;
  top:0;
  bottom:0;
  left:var(--margin-x);
  width:3px;
  background:var(--strand);
}

.review-face::after {
  content:'';
  position:absolute;
  top:calc(var(--rule) * 0.5);
  left:calc((var(--margin-x) - 0.85rem) / 2);
  width:0.85rem;
  height:0.85rem;
  border-radius:50%;
  background:var(--band);
  box-shadow:inset 0 1px 2px rgba(var(--rgb-ink),0.35);
}

.review-lines {
  flex:1;
  min-height:0;
  padding-block:var(--rule);
  background-image:repeating-linear-gradient(to bottom, transparent 0 calc(var(--rule) - 1px), var(--paper-rule) calc(var(--rule) - 1px) var(--rule));
  background-origin:content-box;
}
.review-lines > * { margin-left:var(--ink-x); margin-right:var(--pad-r); }

.review-callout {
  margin-top:0;
  margin-bottom:var(--rule);
  font-family:var(--font-display);
  font-size:1.5rem;
  font-weight:500;
  line-height:var(--rule);
  color:var(--strand-deep);
}
.review-callout::before { content:'\201C'; }
.review-callout::after { content:'\201D'; }

.review-lines > .review-credit { margin-right:5rem; }
.review-credit {
  margin-bottom:var(--rule);
  font-size:var(--step-small);
  line-height:var(--rule);
}
.review-credit .review-name { display:block; color:var(--text-strong); }
.review-credit .review-title { display:block; }

.review-flip {
  padding:0 1rem;
  border:2px solid var(--strand-deep);
  border-radius:var(--radius-pill);
  background:var(--surface-paper);
  color:var(--strand-deep);
  font-family:var(--font-display);
  font-size:var(--step-small);
  font-weight:600;
  line-height:calc(var(--rule) - 4px);
  cursor:pointer;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.review-flip:hover { background:var(--strand-deep); color:var(--ppe-white); }

.review-guide {
  position:absolute;
  right:-1rem;
  bottom:-1.4rem;
  width:6.5rem;
  transform:rotate(6deg);
  filter:drop-shadow(var(--shadow-guide));
  pointer-events:none;
}
.review-card:not([data-pos="0"]) .review-guide,
.review-card:not([data-pos="0"]) .review-lines > * { opacity:0; }

.review-back {
  position:absolute;
  inset:0;
}
.review-back[hidden] { display:none; }

.review-full {
  margin:0;
  padding-bottom:calc(var(--rule) * 3);
  overflow-y:auto;
  overscroll-behavior:contain;
  background-attachment:local;
  scrollbar-width:none;
  mask-image:linear-gradient(to bottom, rgb(var(--rgb-ink)) calc(100% - 2.5rem), transparent);
  font-size:0.95rem;
}
.review-full p {
  margin-top:0;
  margin-bottom:var(--rule);
  line-height:var(--rule);
  color:var(--text-body);
}
.review-full::-webkit-scrollbar { display:none; }
.review-full:focus-visible { outline-color:var(--strand-deep); outline-offset:-3px; }

.review-back.is-scrollable::before { opacity:0.3; }

.review-track {
  position:absolute;
  top:calc(var(--rule) * 0.5 + 1.5rem);
  bottom:0.9rem;
  left:calc(var(--margin-x) + 1.5px - 0.625rem);
  display:none;
  width:1.25rem;
  cursor:pointer;
  touch-action:none;
}
.review-back.is-scrollable .review-track { display:block; }

.review-thumb {
  position:absolute;
  left:0;
  right:0;
  cursor:grab;
}
.review-thumb:active { cursor:grabbing; }
.review-thumb::before {
  content:'';
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  width:7px;
  margin-left:-3.5px;
  border-radius:var(--radius-pill);
  background:var(--strand);
  transition:background var(--dur) var(--ease);
}
.review-track:hover .review-thumb::before { background:var(--strand-deep); }

.review-unflip {
  position:absolute;
  right:1.2rem;
  bottom:1.2rem;
  display:grid;
  place-items:center;
  width:2.75rem;
  height:2.75rem;
  padding:0;
}

.review-controls {
  grid-area:controls;
  display:flex;
  align-items:center;
  gap:0.9rem;
}
.review-controls[hidden],
.review-pause[hidden] { display:none; }

.review-button {
  display:grid;
  place-items:center;
  width:2.75rem;
  height:2.75rem;
  border:2px solid var(--text-strong);
  border-radius:50%;
  background:transparent;
  color:var(--text-strong);
  cursor:pointer;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.review-button:hover { background:var(--ppe-navy-deep); border-color:var(--ppe-navy-deep); color:var(--ppe-white); transform:translateY(-3px); }

.review-count {
  min-width:4.5ch;
  margin:0;
  font-family:var(--font-display);
  font-weight:600;
  color:var(--text-strong);
  text-align:center;
}

.review-pause {
  grid-area:pause;
  justify-self:end;
  display:grid;
  place-items:center;
  padding:0.5rem;
  border:0;
  border-radius:var(--radius-sm);
  background:transparent;
  color:var(--text-body);
  cursor:pointer;
  transition:color var(--dur) var(--ease);
}
.review-pause .icon { width:1rem; height:1rem; }
.review-pause:hover { color:var(--text-strong); }

.js-motion .review-card {
  transition:transform var(--dur-slow) var(--ease), opacity var(--dur-slow) var(--ease);
}
.js-motion .review-guide,
.js-motion .review-lines > * { transition:opacity var(--dur) var(--ease); }
.js-motion .review-card.is-tossed {
  transform:translateX(120%) rotate(14deg);
  opacity:0;
}

@media (max-width:899px) {
  .review-controls,
  .review-pause { margin-top:2rem; }
}

@media (min-width:900px) {
  .reviews-layout {
    grid-template-columns:minmax(0,5fr) minmax(0,7fr);
    grid-template-rows:auto 1fr auto;
    grid-template-areas:"heading pile" "controls pile" ". pause";
    column-gap:3rem;
    align-items:start;
  }
}

@media (max-width:639px) {
  .review-pile { padding-inline:0.4rem; }
  .review-card { --rule:1.625rem; --ink-x:2.1rem; --margin-x:1.45rem; --pad-r:1rem; }
  .review-callout { font-size:1.25rem; }
  .review-full { font-size:0.9rem; }
  .review-guide { width:5rem; right:-0.6rem; }
  .review-lines > .review-credit { margin-right:4rem; }
}