/* Coastal comfort art fit (client, 2026-10-28), desktop:
   - the framed photo, offset hairline included, stays inside the 1400px content box: its outer edge lines up with the
     right end of the stats row below; the square is a little smaller so the copy keeps its room;
   - the watercolour wash spreads left to about the middle of the copy and fades out softly on every edge
     (radial mask, no hard sides), centred on the photo. Loaded after cc-photo-frame-20261028.css. */
@media(min-width:1151px){
  .cc-intro__stage{--sq:clamp(460px,37.95cqw,690px);--off:26px}
  .cc-photo{right:calc(var(--cc-rail) + var(--off))}
  .cc-wash{
    --wl:calc(var(--cc-rail) - 40px);
    --wr:max(0px,calc(var(--cc-rail) - 140px));
    left:var(--wl);right:var(--wr);width:calc(100cqw - var(--wl) - var(--wr));
    top:calc(150px + 30px - 90px);height:calc(var(--sq) + 150px);
    object-fit:cover;object-position:50% 52%;opacity:1;
    -webkit-mask-image:radial-gradient(ellipse 50% 50% at 62% 50%,#000 30%,rgba(0,0,0,.6) 58%,transparent 96%);
            mask-image:radial-gradient(ellipse 50% 50% at 62% 50%,#000 30%,rgba(0,0,0,.6) 58%,transparent 96%);
  }
  .cc-gulls{right:calc(var(--cc-rail) + var(--off) + var(--sq) + 30px);top:calc(150px - 20px)}
}
@media(max-width:1150px){
  .cc-wash{-webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 38%,transparent 92%);mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 38%,transparent 92%)}
}
/* client 2026-10-28: wash ~30% more transparent */
.cc-intro .cc-wash{opacity:.7!important}
/* client 2026-10-28: the visible middle of the wash (the band between the copy and the photo) is much more
   transparent (~60% at its centre); edges keep their colour and still fade out. Two masks intersected:
   the soft outer fade, and a soft "hole" centred on that band. */
@media(min-width:1151px){
  .cc-intro .cc-wash{
    -webkit-mask-image:radial-gradient(ellipse 50% 50% at 62% 50%,#000 30%,rgba(0,0,0,.6) 58%,transparent 96%),radial-gradient(ellipse 20% 42% at 40% 50%,rgba(0,0,0,.38) 0%,rgba(0,0,0,.55) 45%,#000 100%);
    -webkit-mask-composite:source-in;
            mask-image:radial-gradient(ellipse 50% 50% at 62% 50%,#000 30%,rgba(0,0,0,.6) 58%,transparent 96%),radial-gradient(ellipse 20% 42% at 40% 50%,rgba(0,0,0,.38) 0%,rgba(0,0,0,.55) 45%,#000 100%);
            mask-composite:intersect;
  }
}