/* QD repair 03 - Human only (loaded after qd-repair-02.css by stories/the-human-constellation/index.html).
   1. Enlarged-text reading flow, switched on by human-fit-03.js (data-qd-fit="flow") only when the pinned stages cannot hold the text.
   2. Measurement helper: transitions off while the guard measures.
   No words, artwork files or chapter order change. Font sizes are not set here: every line keeps the size it already has. */

#qd-human.qd-measuring *{transition:none!important}

/* ---- 1. reading flow ---- */
html body #qd-human[data-qd-fit="flow"] .qd-sr-flow{display:none!important}
html body #qd-human[data-qd-fit="flow"] :is(.rh-intro,.rh-space,.rh-question,.rh-wider,.rh-organizations){height:auto!important;min-height:0!important;padding-block:clamp(56px,11svh,140px)!important}
html body #qd-human[data-qd-fit="flow"] :is(.rh-intro-stage,.rh-space-field,.rh-question-stage,.rh-wider-stage,.rh-org-field){position:relative!important;top:auto!important;height:auto!important;min-height:0!important;overflow:visible!important;display:flex!important;flex-direction:column!important;justify-content:flex-start!important;align-items:flex-start!important;gap:clamp(40px,8svh,96px)!important}
html body #qd-human#qd-human[data-qd-fit="flow"] :is(.rh-intro-id,.rh-intro-line,.rh-space-label,.rh-space-lead,.rh-space-gift,.rh-space-tail,.rh-question-label,.rh-question-copy,.rh-wider-label,.rh-wider-copy,.rh-observer,.rh-org-opening,.rh-org-hinge,.rh-org-tail){position:static!important;inset:auto!important;transform:none!important;opacity:1!important;visibility:visible!important;margin:0!important;padding-top:0!important;width:auto!important;max-width:min(100%,max(46rem,26em))!important;text-align:left!important;align-self:flex-start!important}
html body #qd-human[data-qd-fit="flow"] :is(.rh-hero-wrap,.rh-question-art-wrap){position:static!important;inset:auto!important;transform:none!important;margin:0!important;width:min(100%,780px)!important;align-self:flex-start!important}
html body #qd-human[data-qd-fit="flow"] .rh-question-art-wrap{width:min(78%,430px)!important}
html body #qd-human[data-qd-fit="flow"] .rh-title{max-width:100%!important}
html body #qd-human[data-qd-fit="flow"] .rh-intro-id{max-width:100%!important} /* title block may use the full column so the title word does not break */
html body #qd-human[data-qd-fit="flow"] .rh-wider-copy{color:#fff!important}
html body #qd-human[data-qd-fit="flow"] .rh-observer{max-width:100%!important}
html body #qd-human[data-qd-fit="flow"] .rh-org-hinge p{max-width:100%!important}
/* the pinned "People who ..." stage is replaced by the page's own list of full sentences */
html body #qd-human[data-qd-fit="flow"] .people{height:auto!important;min-height:0!important;padding-block:clamp(56px,11svh,140px)!important}
html body #qd-human[data-qd-fit="flow"] .people-sticky{display:none!important}
html body #qd-human[data-qd-fit="flow"] .people-fallback{display:block!important;position:static!important;inset:auto!important;width:auto!important;height:auto!important;max-width:min(100%,max(48rem,26em))!important;margin:0 auto 0 0!important;padding:0 var(--pad)!important;overflow:visible!important;clip:auto!important;clip-path:none!important;white-space:normal!important;border:0!important}
html body #qd-human[data-qd-fit="flow"] .people-fallback .full{font-size:clamp(32px,4.7vw,54px);line-height:1.08;letter-spacing:-.045em;font-weight:500;margin:0 0 1.5em!important;max-width:100%!important;white-space:normal!important}
html body #qd-human[data-qd-fit="flow"] .people-fallback .full:last-child{margin-bottom:0!important}

/* ---- 3. no line may be cut off at the page edge ----
   Three short lines were set to white-space:nowrap. At larger text sizes they run past the column and the page edge,
   where body{overflow-x:hidden} hides the end of the word ("The environment matters." showed as "The environmen").
   They may now wrap; at ordinary sizes they still fit on one line, so nothing moves. */
html body #qd-human .conditions .matter,html body #qd-human .pivot-line.better,html body #qd-human .rh-org-hinge p{white-space:normal!important;overflow-wrap:break-word}

/* ---- 4. Human intro (staged desktop/tablet-landscape, >=981px): keep body-size intro passages and the subtitle clear of the hero
   artwork edge at every width.  The title alone may cross the art edge (its dark halo keeps it legible; measured in
   evidence/legib).  The hero art is only scaled down where the left text column would otherwise fall under ~330px. ---- */
@media (min-width:981px){
  html body #qd-human:not([data-qd-fit="flow"]) .rh-intro{
    --rh-hw:min(56vw,820px,calc(95vw - 2*var(--rh-edge) - 354px));
    --rh-lfree:calc(95.8vw - 2*var(--rh-edge) - var(--rh-hw) - 24px);
  }
  html body #qd-human:not([data-qd-fit="flow"]) .rh-hero-wrap{width:var(--rh-hw)}
  html body #qd-human:not([data-qd-fit="flow"]) .rh-line-one,
  html body #qd-human:not([data-qd-fit="flow"]) .rh-line-three{width:min(13em,35vw,var(--rh-lfree))!important;max-width:var(--rh-lfree)!important}
  html body #qd-human:not([data-qd-fit="flow"]) .rh-line-three{width:min(29rem,34vw,var(--rh-lfree))!important}
  html body #qd-human:not([data-qd-fit="flow"]) .rh-subtitle{max-width:min(26rem,var(--rh-lfree))}
}

/* ---- 5. Human, single-column layout (<=980px) only: a single word wider than the column (e.g. "Constellation" at doubled text on a 390px phone) wraps inside
   the word instead of running off the screen.  No effect while every word fits (ordinary sizes).  Not applied to the desktop staged scene, where the title deliberately runs past its box over the art. ---- */
@media (max-width:980px){
  html body #qd-human :is(h1,h2,h3,p,li,span,div,blockquote){overflow-wrap:break-word}
}

/* ---- 6. Team, single-column layout (<=980px): a stage whose text is taller than the screen (short screens: real 200% zoom,
   phone landscape, large text) grows to fit instead of clipping the last paragraph.  min-height keeps the C02 100svh stage,
   so phones where the text already fits render exactly as in C02. ---- */
@media (max-width:980px){
  html body #qd-team .sticky-stage{height:auto!important;min-height:100svh;overflow:visible!important}
}