/* QD four-story repair 02 — layout-only overrides. No words, no artwork, no markup changes.
   Loaded after each chapter's own styles by Coast, Team and Human only (Return C04 and Home are untouched).
   Sections: 1 COAST  2 TEAM  3 HUMAN. */

/* ============ 1. COAST — phone: the "Then ..." headings no longer pin over scrolling text ============
   Root cause: the "mobile resonance" pass made .mobile-anchor position:sticky (top:13svh, z-index 4/5) with an opaque
   white background and a white box-shadow. The paragraph that follows it is a sibling in the same cluster, so while the
   heading is pinned the paragraph scrolls up underneath it (heading painted over text lines; later lines hidden behind
   the white plate and its 28px white shadow). The same plate also sat over the "Field Plate" label. A fade delay cannot
   fix that: the heading and the passage legitimately occupy the same screen band at the same time. The heading now stays
   in the reading flow directly above its passage. Type, size, spacing and words are unchanged. */
@media (max-width:980px){
  html body #qd-coast .mobile-anchor{position:relative!important;top:auto!important;z-index:auto!important;background:transparent!important;box-shadow:none!important}
  html body #qd-coast .mobile-anchor.repeat{z-index:auto!important}
  /* Second cause, found while testing: a later desktop rule (#qd-coast .recurrence-copy{height:58svh}) is not media-scoped and
     overrides the phone rule height:auto, so the two clusters overflow their box and the second cluster ("None of those moments
     was decisive." ... "Then the contour repeated.") runs down over the Field Plate section's label. The box now grows with its text;
     the section's own bottom padding is trimmed so the quiet space after it is about what the old layout showed. */
  html body #qd-coast .recurrence-copy{height:auto!important}
  html body #qd-coast .recurrence{padding-bottom:8svh!important}
}

/* ============ 2. TEAM — phone scale and spacing (<=600px). Words, images and desktop behaviour untouched ============
   Root cause: at phone width every thought was set at display size (31-68px, tracking -0.045em..-0.055em) and separated by
   8-15svh gaps and 14-16svh section padding, so one short sentence filled a screen and the next sat a full screen away; prose,
   emphasis and artwork labels were all 11-68px with no steady step between them. The "NEXT" gap was the sum of
   last item margin 14svh + closing padding 15svh + .end 20svh.
   Scale used here: label 12px / prose 18px / thought 24-26px / display 30-34px. Title and orientation line (shared entry system) unchanged. */
@media (max-width:600px){
  html body #qd-team{--r-lab:12px;--r-body:18px;--r-th:25px;--r-disp:32px;--r-sec:7svh;--r-gap:3svh}
  /* labels */
  html body #qd-team .kicker,html body #qd-team figcaption,html body #qd-team .midspan-note,html body #qd-team .holds-copy,html body #qd-team .closing-note{font-size:var(--r-lab)!important;line-height:1.5!important;letter-spacing:.14em!important;font-weight:500}
  html body #qd-team .kicker.section-label{margin-bottom:max(18px,2.4svh)}
  /* opening */
  html body #qd-team .opening{padding-block:48px 8svh}
  html body #qd-team .opening .question{margin-bottom:5svh!important}
  html body #qd-team .bearing p{font-size:var(--r-body);line-height:1.5;margin:0 0 .8em}
  html body #qd-team .bearing .needed{font-size:var(--r-disp);line-height:1.04;letter-spacing:-.035em;margin-block:.7em .75em}
  /* midspan study */
  html body #qd-team .midspan{padding-block:5svh 9svh}
  html body #qd-team .midspan-grid{gap:3svh}
  /* the stacked "short thought" sections */
  html body #qd-team .imperfect,html body #qd-team .context,html body #qd-team .questions,html body #qd-team .closing{padding-block:var(--r-sec)}
  html body #qd-team .imperfect .source-flow,html body #qd-team .context .source-flow,html body #qd-team .questions .source-flow{gap:var(--r-gap)}
  html body #qd-team .imperfect .source-flow p,html body #qd-team .context .source-flow p{font-size:var(--r-th);line-height:1.18;letter-spacing:-.025em;font-weight:500}
  html body #qd-team .imperfect .source-flow p:nth-child(3),html body #qd-team .imperfect .source-flow p:nth-child(4){font-size:var(--r-body);line-height:1.5;letter-spacing:0;font-weight:400}
  html body #qd-team .questions .source-flow p{font-size:var(--r-disp);line-height:1.08;letter-spacing:-.035em}
  /* support */
  html body #qd-team .support-pass02{padding-block:var(--r-sec)!important}
  html body #qd-team .support-pass02-grid{gap:5svh!important}
  html body #qd-team .support-head{gap:var(--r-gap)!important}
  html body #qd-team .support-head p{font-size:var(--r-body)!important;line-height:1.5!important;margin:0 0 .7em!important}
  html body #qd-team .support-head p:last-child{margin-bottom:0!important}
  html body #qd-team .support-seeing{gap:var(--r-gap)!important}
  html body #qd-team .support-seeing p{font-size:var(--r-th)!important;line-height:1.18!important;letter-spacing:-.025em!important;margin:0 0 var(--r-gap)!important}
  html body #qd-team .support-seeing p:last-child{margin-bottom:0!important}
  html body #qd-team .support-close{font-size:var(--r-body)!important;line-height:1.5!important;margin-top:0!important}
  html body #qd-team .support-witness,html body #qd-team .friction-witness,html body #qd-team .shared-witness{margin-block:0!important}
  /* friction */
  html body #qd-team .friction-pass02{padding-block:var(--r-sec)!important}
  html body #qd-team .friction-pass02-grid{gap:5svh!important}
  html body #qd-team .friction-anchor{font-size:var(--r-disp)!important;line-height:1.08!important;letter-spacing:-.035em!important;margin:0 0 var(--r-gap)!important}
  html body #qd-team .friction-aside{font-size:var(--r-body)!important;line-height:1.5!important;margin:0 0 var(--r-gap)!important}
  html body #qd-team .friction-reframe{font-size:var(--r-th)!important;line-height:1.2!important;margin:0 0 var(--r-gap)!important}
  html body #qd-team .friction-definition{font-size:var(--r-disp)!important;line-height:1.08!important;letter-spacing:-.035em!important;margin:0!important}
  /* shared field */
  html body #qd-team .shared{padding-block:var(--r-sec)!important}
  html body #qd-team .shared-intro{font-size:var(--r-body)!important;line-height:1.5!important;margin:0 0 var(--r-gap)!important}
  html body #qd-team .shared-witness{margin-bottom:var(--r-gap)!important}
  html body #qd-team .specialist{font-size:var(--r-th)!important;line-height:1.18!important;letter-spacing:-.025em!important;margin:0 0 var(--r-gap)!important}
  html body #qd-team .team-field{font-size:var(--r-disp)!important;line-height:1.08!important;letter-spacing:-.035em!important;margin:0!important}
  /* lost / changed shape */
  html body #qd-team .lost{padding-block:var(--r-sec)!important}
  html body #qd-team .lost-copy p{font-size:var(--r-body)!important;line-height:1.5!important;margin:0 0 var(--r-gap)!important}
  html body #qd-team .included{margin:0 0 var(--r-gap)!important}
  html body #qd-team .included p{font-size:var(--r-th)!important;line-height:1.18!important;letter-spacing:-.025em!important;margin:0!important}
  html body #qd-team .connect-copy{font-size:var(--r-body)!important;line-height:1.5!important;margin:0 0 var(--r-gap)!important}
  html body #qd-team .shape-carry p{font-size:var(--r-disp)!important;line-height:1.08!important;letter-spacing:-.035em!important;margin:0!important}
  /* where it holds */
  html body #qd-team .holds-art{padding-block:3svh 5svh!important}
  html body #qd-team .holds-art-grid{gap:2svh!important}
  /* gap / bridge thoughts (existing rules are !important) */
  html body #qd-team .gap-section{padding-block:var(--r-sec)!important}
  html body #qd-team .gap-section .source-flow{gap:var(--r-gap)!important}
  html body #qd-team .gap-section .source-flow p{font-size:var(--r-th)!important;line-height:1.2!important;letter-spacing:-.025em!important;font-weight:500!important}
  html body #qd-team .gap-section .source-flow p:first-child,html body #qd-team .gap-section .source-flow p:nth-child(2){font-size:var(--r-disp)!important;line-height:1.08!important;letter-spacing:-.035em!important}
  html body #qd-team .gap-section .source-flow p:last-child{font-size:var(--r-body)!important;line-height:1.5!important;font-weight:400!important;letter-spacing:0!important}
  /* limits and reach */
  html body #qd-team .limits{padding-block:var(--r-sec)!important}
  html body #qd-team .limits-copy p{font-size:var(--r-body)!important;line-height:1.5!important;margin:0 0 .6em!important}
  html body #qd-team .reach{font-size:var(--r-disp)!important;line-height:1.08!important;letter-spacing:-.035em!important;margin:var(--r-gap) 0!important}
  html body #qd-team .limits-end{display:block!important;gap:0!important;margin:0!important}
  html body #qd-team .limits-end p{font-size:var(--r-body)!important;line-height:1.5!important;margin:0 0 .7em!important}
  /* bridge closing: three images each with its line, then NEXT */
  html body #qd-team .closing{padding-block:var(--r-sec) 0!important}
  html body #qd-team .mobile-close-item{margin-bottom:5svh!important}
  html body #qd-team .mobile-close-item img{margin-bottom:2svh!important}
  html body #qd-team .mobile-close-item p{font-size:var(--r-disp)!important;line-height:1.06!important;letter-spacing:-.035em!important}
  html body #qd-team .end{min-height:0!important;height:0!important}
}

/* ============ 3. HUMAN — hierarchy; no word or artwork changes ============
   Root causes (all layout):
   a) Desktop "wider constellation": three prose paragraphs were absolutely placed at three different x/y anchors
      (left/top, right/middle, indented/bottom) and each stays on screen dimmed while the next arrives, so the eye has to
      zig-zag across the screen: Beyond home -> Some entered -> My colleagues. Phone did the same with growing left indents.
   b) "Question It": the display lines and prose columns were sized for the full stage but the centred artwork
      (47% / 440-520px) occupies that same band, so "question it.", "critique it.", the "They tell me ..." line and
      "I am incredibly thankful for that." ran 40-120px into the art edge.
   c) Prose was set at 18px in the pivot and closing blocks while neighbouring prose is 21-25px and display lines are 57-72px,
      so the key sentences ("For anyone else ...", "Before turning toward ...") read as footnotes next to their own headlines. */

/* a) desktop: one track, one path */
@media (min-width:981px){
  html body #qd-human .rh-wider-stage{display:flex!important;flex-direction:column!important;justify-content:center!important;align-items:flex-start!important;gap:clamp(20px,3.8svh,40px)!important}
  html body #qd-human .rh-wider-copy{position:static!important;inset:auto!important;transform:none!important;margin:0 0 0 calc(var(--rh-edge) - var(--pad))!important;width:min(44rem,50vw)!important;max-width:none!important;font-size:var(--rh-prose-tight)!important;line-height:1.5!important}
  /* b) keep every text column clear of the artwork: art is centred at 47% and clamp(300px,30vw,520px) wide */
  html body #qd-human .rh-question{--rh-art:clamp(300px,30vw,520px);--rh-lc:calc(47% - var(--rh-art)/2 - var(--rh-edge) - 36px);--rh-rc:calc(53% - var(--rh-art)/2 - var(--rh-edge) - 36px)}
  html body #qd-human .rh-question-art-wrap{width:var(--rh-art)!important}
  html body #qd-human .rh-q0,html body #qd-human .rh-q1,html body #qd-human .rh-q3,html body #qd-human .rh-q5{width:var(--rh-lc)!important;max-width:none!important}
  html body #qd-human .rh-q2{width:var(--rh-rc)!important;max-width:none!important}
  html body #qd-human .rh-q4{width:min(30rem,var(--rh-rc))!important;max-width:none!important}
  html body #qd-human .rh-q1,html body #qd-human .rh-q2{font-size:clamp(34px,4.1vw,76px)!important;line-height:.98!important}
  html body #qd-human .rh-q3{font-size:clamp(22px,2.05vw,36px)!important}
  html body #qd-human .rh-q5{font-size:clamp(28px,3.1vw,52px)!important}
  /* c) the pivot sentence joins the prose scale used elsewhere in Human */
  html body #qd-human .pivot .body p{font-size:clamp(21px,1.55vw,25px)!important;line-height:1.5!important;color:rgb(213,209,199)}
  html body #qd-human .closing-prose{font-size:clamp(20px,1.5vw,24px)!important}
}
/* phone / tablet: flatten the prose staircase; prose 20px like the other prose blocks */
@media (max-width:980px){
  html body #qd-human .rh-w2,html body #qd-human .rh-w3,html body #qd-human .rh-org-opening,html body #qd-human .rh-org-tail,html body #qd-human .rh-space-tail{margin-left:0!important}
  html body #qd-human .pivot .body p{font-size:var(--rh-mobile-prose,20px)!important;line-height:1.56!important;color:rgb(213,209,199)}
  html body #qd-human .closing-prose{font-size:var(--rh-mobile-prose,20px)!important;line-height:1.56!important}
}