/* Let Safari display the actual page behind its safe areas, while keeping
   navigation and footer content clear of the notch and home indicator. */
@media (max-width:800px), (pointer:coarse){
 html[data-mobile-edges]{
  --safe-top:env(safe-area-inset-top,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
  --safe-left:env(safe-area-inset-left,0px);
  --safe-right:env(safe-area-inset-right,0px);
  --edge-top:#F6F4EF;
  --edge-bottom:#EAE5DC;
  --browser-surface:var(--edge-top);
  min-height:100%;
  /* Safari samples a solid document/body background, not this gradient.
     Keep both surfaces identical, including when the footer reaches view. */
  background:var(--browser-surface);
 }
 html[data-mobile-edges=home]{--edge-top:#e9e3da}
 html[data-mobile-edges][data-edge-zone=footer]{--browser-surface:var(--edge-bottom)}
 html[data-mobile-edges]>body{background:var(--browser-surface)}
 /* Interior content keeps its ivory independently of Safari's canvas. */
 html[data-mobile-edges=interior]>body>main{background:var(--edge-top)}
 html[data-mobile-edges] body>.header{
  padding-top:calc(20px + var(--safe-top));
  padding-left:max(24px,var(--safe-left));
  padding-right:max(24px,var(--safe-right));
 }
 html[data-mobile-edges] .collaboration-surface{padding-bottom:var(--safe-bottom)}
 html[data-mobile-edges] .collaboration-surface:after{
  content:'';position:absolute;inset:auto 0 0;height:calc(96px + var(--safe-bottom));
  background:linear-gradient(transparent,var(--edge-bottom) calc(100% - 24px - var(--safe-bottom)));pointer-events:none;
 }
 html[data-mobile-edges] .vb-scroll-menu,
 html[data-mobile-edges] .vb-menu-close{top:calc(20px + var(--safe-top));right:max(20px,var(--safe-right))}
 html[data-mobile-edges] .vb-menu-panel{padding-top:calc(112px + var(--safe-top));padding-bottom:calc(32px + var(--safe-bottom))}
}
@media(max-width:700px){
 html[data-mobile-edges=home] .atelier-hero{min-height:calc(940px + var(--safe-top))}
 html[data-mobile-edges=home] .atelier-hero:before{
  content:'';position:absolute;inset:0 0 auto;height:calc(160px + var(--safe-top));
  background:linear-gradient(var(--edge-top) calc(48px + var(--safe-top)),transparent);pointer-events:none;
 }
 html[data-mobile-edges=home] .atelier-label{top:calc(115px + var(--safe-top))}
 html[data-mobile-edges=home] .atelier-position{top:calc(119px + var(--safe-top))}
 html[data-mobile-edges=home] .bordeaux-pill{top:calc(220px + var(--safe-top))}
 html[data-mobile-edges=home] .atelier-scene{top:calc(263px + var(--safe-top))}
}
@media(max-width:380px){
 html[data-mobile-edges] body>.header{padding-left:max(18px,var(--safe-left));padding-right:max(18px,var(--safe-right))}
}

/* Project covers meet Safari's canvas in charcoal; the existing footer
   uses the same beige edge and observer as the other portfolio pages. */
@media (max-width:800px), (pointer:coarse){
 html[data-mobile-edges=case]{--edge-top:#1D211E}
 html[data-mobile-edges=case]>body>main{background:#F6F4EF}
 html[data-mobile-edges=case] body>.header{background:none}
 html[data-mobile-edges=case] .case-cover:after{
  content:'';position:absolute;inset:0 0 auto;height:calc(160px + var(--safe-top));
  background:linear-gradient(var(--edge-top) calc(48px + var(--safe-top)),transparent);pointer-events:none;
 }
 /* Replace the translucent top shade so it cannot tint the solid edge. */
 html[data-mobile-edges=case] .cs-hero-shade{background:linear-gradient(180deg,transparent 35%,#10130e80 100%)}
}
@media(max-width:800px){
 html[data-mobile-edges=case] .cs-hero-stage{height:calc(80svh + var(--safe-top));min-height:calc(540px + var(--safe-top))}
}