/* pick-fit (Oct 15): each framed photo's box takes the photo's own shape, so nothing is cropped away.
   Keyed by image file, so a new pick in the same slot only needs its ratio changed here. */
figure:has(> img[src*="picks/solutions-faq."]),figure:has(img[src*="picks/solutions-faq."]){aspect-ratio:3/4!important;height:auto!important;max-height:none!important}
figure:has(img[src*="picks/about-practice."]){aspect-ratio:3/4!important;height:auto!important;min-height:0!important}
figure:has(img[src*="picks/proof-set."]){aspect-ratio:4/3!important;height:auto!important;min-height:0!important;align-self:start!important}
figure:has(img[src*="picks/facts-practice."]){aspect-ratio:4/3!important;height:auto!important;align-self:start!important}
figure:has(img[src*="picks/facts-field."]){aspect-ratio:16/9!important;height:auto!important;align-self:start!important}
/* contact-hero: removed from pick-fit Oct 15, the hero handles its own frame (options A/B/C in contact.html) */
figure:has(img[src*="picks/manifesto-body-1."]){aspect-ratio:3/2!important;height:auto!important;max-width:640px!important}
figure:has(img[src*="picks/manifesto-body-2."]){aspect-ratio:4/3!important;height:auto!important;max-width:640px!important}
figure:has(img[src*="/picks/"]) img,.portrait:has(img[src*="/picks/"]) img{width:100%!important;height:100%!important;object-fit:cover}

/* Vertical photos in wide bands (Oct 15): on desktop the photo gets its own right-hand panel,
   shown nearly whole, and the words move to the left. On phone the band is tall, so the photo fills it. */
@media (min-width:900px){
  /* Oct 15 pm (Kyle): a long, soft fade from the words into the photo, and the photo bright enough to read */
  .d-pedigree .d-set,.ds-way .ds-set,.fx-pilot .set{left:auto!important;right:0!important;width:62%!important;inset:0 0 0 auto!important;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.12) 12%,rgba(0,0,0,.42) 26%,rgba(0,0,0,.78) 40%,#000 54%);
    mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.12) 12%,rgba(0,0,0,.42) 26%,rgba(0,0,0,.78) 40%,#000 54%)}
  .d-pedigree .d-set img,.ds-way .ds-set img,.fx-pilot .set img{width:100%!important;height:100%!important;object-fit:cover!important;object-position:50% 18%!important;filter:brightness(1.12) contrast(1.06) saturate(.95)!important}
  .d-pedigree .d-grade,.ds-way .ds-grade,.fx-pilot .grade{opacity:.22!important}
  .d-pedigree .d-grade2,.ds-way .ds-grade2,.fx-pilot .grade2{opacity:.55!important}
  .d-pedigree .d-vig,.ds-way .ds-vig,.fx-pilot .vig{opacity:.4!important}
  .d-pedigree .d-w,.ds-way .ds-w,.fx-pilot .w{max-width:none!important;padding-left:max(40px,calc((100vw - 1240px)/2))!important;padding-right:46%!important;text-align:left!important;margin:0!important;box-sizing:border-box;width:100%!important}
  .d-pedigree .d-col{max-width:none!important;margin:0!important}
  .ds-way .ds-w h2,.ds-way .ds-p,.fx-pilot .w h2,.fx-pilot .w p{text-align:left!important;margin-left:0!important;margin-right:0!important;max-width:none!important}
  .ds-way .ds-acts,.fx-pilot .w .micro{justify-content:flex-start!important;text-align:left!important}
  .fx-pilot .w{align-items:flex-start!important}
}
@media (min-width:900px){.ds-way .ds-w h2 br{display:none}}

/* About, the accident band, round 3 (Kyle Oct 15 11:10: "this photo just doesn't work... a page full bleed, faint background
   image that bleeds stronger off to the right... an ER room bed or something, enigmatic"). The side photo is gone; an AI frame
   (no people) sits behind the whole band, faint on the left under the story, strongest at the right edge. */
#d .d-origin{position:relative;overflow:hidden}
#d .d-erbg{position:absolute;inset:0;z-index:0;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.12) 28%,rgba(0,0,0,.45) 52%,rgba(0,0,0,.85) 76%,#000 100%),linear-gradient(180deg,transparent 0,#000 12%,#000 86%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.12) 28%,rgba(0,0,0,.45) 52%,rgba(0,0,0,.85) 76%,#000 100%),linear-gradient(180deg,transparent 0,#000 12%,#000 86%,transparent 100%);
  -webkit-mask-composite:source-in;mask-composite:intersect}
#d .d-erbg img{width:100%;height:100%;object-fit:cover;object-position:85% 50%;opacity:.7;filter:saturate(.85) contrast(1.05);display:block}
#d .d-origin .d-two{grid-template-columns:minmax(0,60ch)!important;max-width:1120px}
#d .d-side--origin{display:none!important}
@media(max-width:760px){
  #d .d-erbg{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 10%,#000 90%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 10%,#000 90%,transparent 100%)}
  #d .d-erbg img{opacity:.3;object-position:80% 50%}
}

/* About pedigree, round 2 (Kyle Oct 15): a different photo (Kyle directing on the ANTi-SOCiAL set, already graded), shown wide
   behind the band at lower opacity, with a long, soft grade running from the words across into it. */
#d .d-pedigree .d-set img{object-position:70% 40%!important}
@media (min-width:900px){
  #d .d-pedigree .d-set{left:auto!important;right:0!important;inset:0 0 0 auto!important;width:56%!important;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.2) 8%,rgba(0,0,0,.5) 16%,rgba(0,0,0,.85) 26%,#000 36%)!important;
    mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.2) 8%,rgba(0,0,0,.5) 16%,rgba(0,0,0,.85) 26%,#000 36%)!important}
  #d .d-pedigree .d-set img{object-position:70% 40%!important;opacity:.78;filter:contrast(1.08) brightness(1.05)!important}
  #d .d-pedigree .d-grade{opacity:.28!important}
  #d .d-pedigree .d-grade2{opacity:.7!important}
  #d .d-pedigree .d-w{padding-right:44%!important}
}
/* phone: the pedigree photo was lost under a flat .72 plum; lift it so the director reads */
@media (max-width:899px){#d .d-pedigree .d-grade2{opacity:.72!important}#d .d-pedigree .d-set img{opacity:.85;filter:brightness(1.1)!important}#d .d-pedigree .d-grade{opacity:.3!important}}

/* About accident band, round 4 (Kyle Oct 15 5:25pm): "a ton more padding at the top and the bottom... I just want it to breathe",
   and "a full parallax" on the background. The frame is taller than the band and js/erbg-parallax.js slides it as the band scrolls. */
#d .d-origin{padding:240px 0 260px}
#d .d-erbg{inset:-22% 0}
#d .d-erbg img{will-change:transform;transform:translate3d(0,var(--erp,0px),0)}
@media(max-width:860px){#d .d-origin{padding:160px 0 170px}}
/* the frame box now runs 22% past the band, so the top/bottom fades move inside the visible band (band = 15%..85% of the box) */
#d .d-erbg{-webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.12) 28%,rgba(0,0,0,.45) 52%,rgba(0,0,0,.85) 76%,#000 100%),linear-gradient(180deg,transparent 0,transparent 15%,#000 32%,#000 68%,transparent 85%);
  mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.12) 28%,rgba(0,0,0,.45) 52%,rgba(0,0,0,.85) 76%,#000 100%),linear-gradient(180deg,transparent 0,transparent 15%,#000 32%,#000 68%,transparent 85%)}
@media(max-width:760px){#d .d-erbg{-webkit-mask-image:linear-gradient(180deg,transparent 15%,#000 28%,#000 72%,transparent 85%);mask-image:linear-gradient(180deg,transparent 15%,#000 28%,#000 72%,transparent 85%)}}
/* Oct 15 ~6pm (Kyle: "you zoomed in even further... looks like demon scratches"): parallax WITHOUT zoom. The frame is back at its
   round-3 framing (inset 0); js/erbg-parallax.js slides it only ±4% of the band, inside the top/bottom fades, so no edge shows. */
#d .d-erbg{inset:0;-webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.12) 28%,rgba(0,0,0,.45) 52%,rgba(0,0,0,.85) 76%,#000 100%),linear-gradient(180deg,transparent 0,transparent 5%,#000 18%,#000 82%,transparent 95%);
  mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.12) 28%,rgba(0,0,0,.45) 52%,rgba(0,0,0,.85) 76%,#000 100%),linear-gradient(180deg,transparent 0,transparent 5%,#000 18%,#000 82%,transparent 95%)}
@media(max-width:760px){#d .d-erbg{-webkit-mask-image:linear-gradient(180deg,transparent 5%,#000 16%,#000 84%,transparent 95%);mask-image:linear-gradient(180deg,transparent 5%,#000 16%,#000 84%,transparent 95%)}}
/* Oct 15 ~6:30pm (Kyle: "still totally static and boring... make it parallax and also zoom way out on the image"). The WHOLE frame
   now shows: it sits right-anchored at ~74% of the band width (no cover crop), feathered on all 4 edges, and js/erbg-parallax.js
   drifts it a long way against the scroll (it lags the page, so it stays in view longer). */
#d .d-erbg{inset:0;-webkit-mask-image:none;mask-image:none}
#d .d-erbg img{position:absolute;right:0;top:50%;width:min(74%,1400px);height:auto;aspect-ratio:2368/1920;object-fit:cover;object-position:50% 50%;
  transform:translate3d(0,calc(-50% + var(--erp,0px)),0);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.25) 22%,rgba(0,0,0,.8) 50%,#000 70%),linear-gradient(180deg,transparent 0,#000 22%,#000 78%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.25) 22%,rgba(0,0,0,.8) 50%,#000 70%),linear-gradient(180deg,transparent 0,#000 22%,#000 78%,transparent 100%);
  -webkit-mask-composite:source-in;mask-composite:intersect}
@media(max-width:760px){#d .d-erbg img{width:170%;right:-25%;opacity:.4;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 25%,#000 75%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 25%,#000 75%,transparent 100%)}}