:root{
  /* Accessible terracotta for UI text and button surfaces. Keeps the same brand family
     while clearing WCAG AA against ivory and white. */
  --terracotta:#A7442A;
}

/* Safe-area support must also cover wide iPhones in landscape (812–932px). */
@media (max-width:980px){
  .site-header{
    padding-top:calc(12px + env(safe-area-inset-top));
    padding-left:max(clamp(18px,4vw,64px),env(safe-area-inset-left));
    padding-right:max(clamp(18px,4vw,64px),env(safe-area-inset-right));
  }

  .hero-copy,
  .section-shell,
  footer{
    padding-left:max(28px,env(safe-area-inset-left));
    padding-right:max(28px,env(safe-area-inset-right));
  }

  footer{
    padding-bottom:calc(30px + env(safe-area-inset-bottom));
  }
}

@media (max-width:720px){
  .site-header{
    padding-top:calc(10px + env(safe-area-inset-top));
    padding-left:max(14px,env(safe-area-inset-left));
    padding-right:max(14px,env(safe-area-inset-right));
  }

  .hero-copy,
  .section-shell{
    padding-left:max(20px,env(safe-area-inset-left));
    padding-right:max(20px,env(safe-area-inset-right));
  }

  footer{
    padding-left:max(20px,env(safe-area-inset-left));
    padding-right:max(20px,env(safe-area-inset-right));
    padding-bottom:calc(30px + env(safe-area-inset-bottom));
  }
}