/* story.css — report photography and report graphics.
   Loaded after styles.css, motion.css and access.css. Adds new selectors
   only, except the three backgrounds below. */

/* Grounds. Each extracted PNG is opaque and carries the PDF renderer's own
   background, one unit per channel off the matching token. The tokens stay
   as the colour audit recorded them; only the surfaces hosting a graphic
   take the PNG's exact value, so no graphic shows a rectangle edge. */
#process .card.pale{background:#DAEFF0}     /* team-chess         */
#reflection{background:#14152D}             /* insight-book       */
#diligence .mark-row{background:#FFF7EE}    /* diligence-calendar */

/* A mark sits directly on its chapter ground: no card, border or caption. */
.mark{display:block}

/* Chapter portraits. Captioned only where no cite beside the picture already
   names the subject, so the three people quoted beside theirs carry none: the
   quotation is the caption. */
.story-frame{border-radius:24px;overflow:hidden}
.story-frame>img{display:block;width:100%;height:100%;object-fit:cover}
.story-frame.is-square>img{height:auto;aspect-ratio:1/1}

/* Quote beside a photograph. */
.story-quote{border-left:2px solid #117971;padding-left:26px}
.story-quote cite,.quote-figure cite{flex-direction:column;gap:4px;font-size:13px;line-height:1.5}

/* Readiness, report page 3. A copy column and a portrait column; the copy
   sets the row height and the portrait stretches to it. */
.story-row{display:grid;grid-template-columns:1fr .62fr;gap:34px;align-items:stretch}
.story-copy{display:flex;flex-direction:column;gap:24px}
.story-row .story-frame{display:flex;min-height:330px}
#readiness .story-quote h3{margin-bottom:14px}
#readiness .story-quote p{font-family:'GT Alpina',Georgia,serif;font-size:20px;line-height:1.45;margin-bottom:20px}
#readiness .story-frame>img{object-position:center 12%}
/* Keep the portrait's intrinsic height from stretching the desktop row. */
@media screen and (min-width:701px){
.story-row .story-frame{position:relative}
.story-row .story-frame>img{position:absolute;inset:0 auto 0 -25%;width:125%;max-width:none}
#readiness .story-frame>img{object-position:center 18%}
}

/* Reflection, report page 10. A motif rather than evidence, so it stays
   secondary to the choices beside it. */
.reflection-mark{width:100%;max-width:470px;margin-top:34px}
@media(min-width:951px){
.reflection-mark{margin-top:90px}
}

/* One figure holds a person and the words credited to them — deal timing on
   report page 4, early advice on page 6. Keeping them in the same element is
   what stops a face from drifting away from its quotation. */
.quote-figure{display:grid;grid-template-columns:.42fr 1fr;gap:38px;align-items:center;margin-top:24px}
.quote-figure .story-frame>img{object-position:center 5%}
.quote-figure blockquote{border-left:2px solid #117971;padding-left:26px}
.quote-figure blockquote>p{font-family:'GT Alpina',Georgia,serif;font-size:31px;line-height:1.3;letter-spacing:-.01em;max-width:28ch;margin-bottom:18px}
.quote-figure small{display:block;font-size:12px;color:var(--muted);margin-top:15px}
/* Guy's evidence now precedes the guidance it supports, and the accordion
   keeps roughly the measure it had beside his portrait. */
#advice .quote-figure{margin-top:34px}
#advice .quote-figure blockquote{border-left-color:var(--orange)}
#advice .accordions{max-width:860px;margin-top:52px}

/* The right team, report page 14. The chess floats beside the paragraph the
   way a marginal figure sits in print, so the display heading keeps its
   width and the row grows only by the difference. */
.card-mark::after{content:'';display:block;clear:both}
.card-mark .mark{float:right;width:190px;margin:2px 0 6px 26px}

/* Due diligence, report page 5. */
#diligence .mark-row{display:grid;grid-template-columns:1fr .42fr;gap:40px;align-items:center;border-color:transparent}
#diligence .mark-row blockquote>p{font-family:'GT Alpina',Georgia,serif;font-size:33px;line-height:1.3;max-width:28ch;margin-bottom:18px}
#diligence .mark-row .mark{width:100%;max-width:296px;margin-left:auto}

/* Founder diversity, report page 13. The note and the quotation answering it
   come from the same report page, so they group; standing clear of the page
   12 portrait above, the credit beside them is the only name in reach. */
#next-chapter .text-link{margin-top:18px}
.founder-note{display:grid;grid-template-columns:.85fr 1fr;gap:36px;align-items:center;margin-top:48px;padding:30px 32px}
.founder-note>p{margin:0}
.founder-note blockquote{border-left:2px solid #b32137;padding-left:24px}
.founder-note blockquote>p{font-family:'GT Alpina',Georgia,serif;font-size:26px;line-height:1.32;letter-spacing:-.01em;margin-bottom:14px}
.founder-note cite{flex-direction:column;gap:4px;font-size:13px;line-height:1.5}

@media(max-width:950px){
.story-row{gap:26px}
.quote-figure{gap:28px}
.quote-figure blockquote>p{font-size:28px}
#diligence .mark-row{gap:28px}
#diligence .mark-row blockquote>p{font-size:30px}
.card-mark .mark{width:150px;margin-left:20px}
.founder-note{gap:28px}
.founder-note blockquote>p{font-size:24px}
}

@media(max-width:700px){
.story-row,.quote-figure,#diligence .mark-row,.founder-note{grid-template-columns:1fr;gap:26px}
.story-row .story-frame{min-height:0}
.story-frame{max-width:400px;margin-inline:auto}
.story-frame>img{height:auto;aspect-ratio:1/1.05}
.quote-figure blockquote>p,#diligence .mark-row blockquote>p{font-size:27px;max-width:none}
#diligence .mark-row .mark{max-width:280px;margin-inline:auto}
.card-mark .mark{float:none;width:168px;margin:24px auto 0}
.founder-note{margin-top:34px;padding:26px 24px}
.founder-note blockquote{padding-left:20px}
.founder-note blockquote>p{font-size:23px}
/* One column puts the motif between the explanation and the checkboxes, and
   the choices are the task, so the motif steps aside. */
.reflection-mark{display:none}
}

@media print{
/* The graphics carry a baked-in ground and would print as coloured
   rectangles on white paper. */
.mark{display:none!important}
.story-row,.story-copy,.quote-figure,#diligence .mark-row,.founder-note{display:block}
.story-row .story-frame,.quote-figure .story-frame{display:block;max-width:190px;min-height:0;margin:0 0 18px}
.story-frame>img{height:auto;aspect-ratio:1/1}
#diligence .mark-row{background:white!important;border-color:#999}
.story-quote,.quote-figure blockquote,.founder-note blockquote{border-left-color:#999}
.founder-note blockquote{margin-top:18px}
}