/* Penrose B3.1d: the human-approved local reading-flow proof, page-scoped.
   Desktop uses one editorial reading column; mobile retains its image-first stack. */

.b3-penrose .project-story{max-width:55rem;margin-inline:auto}
.b3-penrose .b3-reading-beat{display:flow-root;max-width:55rem}
.b3-penrose .b3-reading-beat>p{max-width:none}
.b3-penrose .b3-process-loop .project-sequence{display:block;list-style-type:decimal;padding-left:1.8rem}
.b3-penrose .b3-process-loop .project-sequence li{display:list-item;list-style-type:decimal}
.b3-penrose .refine-dialogue{max-width:46rem}
.b3-penrose #conversation>.b3-process-loop{max-width:58rem}

@media(min-width:900px){
  /* The smaller book photograph is in the middle of its paragraph flow. */
  .b3-penrose #context .b3-reading-beat>figure{
    float:right;width:18rem;max-width:43%;
    margin:.2rem 0 1rem 1.45rem;
  }
  /* The Penrose volume and George both become intentional large beats. */
  .b3-penrose #penrose>figure{
    display:block;float:none;width:min(100%,30rem);max-width:30rem;
    margin:1.1rem auto 1.5rem;
  }
  .b3-penrose #chapter-15 .b3-reading-beat>figure{
    float:none;display:block;width:min(100%,22rem);max-width:22rem;
    margin:.8rem auto 1.2rem;
  }
  .b3-penrose #context .project-photo img,
  .b3-penrose #penrose .project-photo img,
  .b3-penrose #chapter-15 .project-photo img{
    display:block;width:100%;max-width:100%;height:auto;
    max-height:none;object-fit:contain;background:transparent;
    margin-inline:auto;
  }
  .b3-penrose #context .project-photo figcaption,
  .b3-penrose #penrose .project-photo figcaption,
  .b3-penrose #chapter-15 .project-photo figcaption{
    max-width:28ch;margin:.45rem auto 0;text-align:center;
  }
  .b3-penrose #conversation .refine-dialogue{
    max-width:70ch;margin:1.15rem 0;padding:.5rem 0 .5rem 1.25rem;
    border-left:3px solid var(--gm-line,#c9b9c4);
    border-radius:0;background:transparent;box-shadow:none;
  }
  .b3-penrose .b3-process-loop{
    max-width:70ch;background:transparent;box-shadow:none;
    border-radius:0;border-left:2px solid var(--gm-line,#c9b9c4);
  }
}

/* Keep the accepted vertical, image-first mobile sequence. */
@media(max-width:650px){
  .b3-penrose #context .b3-reading-beat,
  .b3-penrose #chapter-15 .b3-reading-beat{display:flex;flex-direction:column}
  .b3-penrose #context .b3-reading-beat>figure,
  .b3-penrose #chapter-15 .b3-reading-beat>figure{
    order:-1;float:none;width:min(65%,16rem);max-width:100%;
    margin:0 auto 1.5rem;
  }
  .b3-penrose #context .b3-reading-beat>p,
  .b3-penrose #chapter-15 .b3-reading-beat>p{order:0;max-width:none}
}

/* Restore the warm B1/B2 reading canvas on this accepted case study. */
.b3-penrose{background:var(--gm-ivory)}


/* B3 reading rhythm v0.1
   Warm ivory = uninterrupted narrative; paper = selected explanatory panels.
   Use the existing design-system tokens, not per-project colours.
   Never stripe every section or box approved editorial imagery. */
.b3-penrose .project-story > :is(#lesson,#roles,#boundaries){
  background:var(--gm-paper);
  border:1px solid var(--gm-line);
  border-left:3px solid var(--gm-gold);
  border-radius:.75rem;
  box-shadow:0 .3rem 1.1rem rgba(52,38,30,.035);
  padding:clamp(1rem,2.25vw,1.65rem);
  margin-block:1.5rem;
}
.b3-penrose .project-story > :is(#lesson,#roles,#boundaries) > h2{
  margin-bottom:1rem;
}
.b3-penrose .project-story > :is(#lesson,#roles,#boundaries) .project-prose{
  max-width:70ch;
}
@media(max-width:650px){
  .b3-penrose .project-story > :is(#lesson,#roles,#boundaries){
    padding:1.15rem;
    margin-block:1.2rem;
    border-radius:.65rem;
  }
}

/* Penrose: one gentle conversation panel and two compact method panels.
   Leave book photographs and the Chapter 15 closing unboxed. */
.b3-penrose #conversation .refine-dialogue{
  max-width:70ch;
  margin:1.35rem 0;
  padding:1.15rem 1.4rem;
  background:var(--gm-paper);
  border:1px solid var(--gm-line);
  border-left:3px solid var(--gm-gold);
  border-radius:.75rem;
  box-shadow:0 .3rem 1.1rem rgba(52,38,30,.035);
}
.b3-penrose #conversation .b3-process-loop{
  max-width:70ch;
  background:var(--gm-paper);
  border:1px solid var(--gm-line);
  border-left:2px solid var(--gm-gold);
  border-radius:.6rem;
  padding:1rem 1.25rem;
  margin-block:1.1rem;
  box-shadow:none;
}
.b3-penrose #roles .project-artefact{
  margin:0;
  padding:0;
  background:transparent;
  border:0;
  box-shadow:none;
}
@media(max-width:650px){
  .b3-penrose #conversation .refine-dialogue,
  .b3-penrose #conversation .b3-process-loop{
    padding:1rem 1.1rem;
    margin-block:1rem;
  }
}

/* B3 final review: approved Westie introduction and closing illustration.
   Original two book photographs are retained and enlarged, not replaced. */
.b3-penrose #context>figure.b3-george-banner{
  width:min(100%,48rem);max-width:48rem;margin:1rem auto 1.6rem;
  text-align:center;
}
.b3-penrose #context>figure.b3-george-banner img{
  display:block;width:100%;max-height:29rem;object-fit:contain;height:auto;
  background:transparent;border-radius:.6rem;
}
.b3-penrose #chapter-15 .b3-reading-beat>figure.b3-george-scholar{
  display:block;float:none;width:min(100%,25rem);max-width:25rem;
  margin:1rem auto 1.2rem;
}
.b3-penrose #chapter-15 .b3-george-scholar img{
  display:block;width:100%;height:auto;object-fit:contain;
}
.b3-penrose .b3-george-banner figcaption,
.b3-penrose .b3-george-scholar figcaption{
  margin:.55rem auto 0;max-width:50ch;text-align:center;
}
@media(max-width:650px){
  .b3-penrose #context .b3-reading-beat>figure{
    width:min(85%,20rem);max-width:20rem;
  }
  .b3-penrose #context>figure.b3-george-banner{width:100%;margin:.8rem auto 1.25rem}
  .b3-penrose #context>figure.b3-george-banner img{max-height:21rem}
  .b3-penrose #chapter-15 .b3-reading-beat>figure.b3-george-scholar{
    order:0;width:min(100%,22rem);max-width:22rem;margin:1rem auto;
  }
}