/* Little Coconut Pools: more breathing room (John, 2026-10-12: "it just feels a little cramped").
   Loaded after responsive.css on every page. Each section's top and bottom space is a named value
   (--pad-N, N being the design's original px), so the whole site's rhythm is tuned here. */
:root{
  --container-max:1280px;--container-pad:64px;--section-pad:120px;
  --pad-36:44px;--pad-56:72px;--pad-64:80px;--pad-72:96px;--pad-80:104px;--pad-88:112px;
  --pad-96:120px;--pad-104:128px;--pad-112:136px;--pad-120:144px;
}
/* a section's heading sits a little further from the words under it */
.eyebrow+h2,.eyebrow+h1{margin-bottom:20px!important}
@media (max-width:1023px){
  :root{--container-pad:40px;--section-pad:104px;
    --pad-36:36px;--pad-56:56px;--pad-64:72px;--pad-72:88px;--pad-80:96px;--pad-88:104px;
    --pad-96:104px;--pad-104:112px;--pad-112:112px;--pad-120:120px}
}
@media (max-width:640px){
  :root{--container-pad:20px;--section-pad:80px;
    --pad-36:32px;--pad-56:56px;--pad-64:64px;--pad-72:72px;--pad-80:72px;--pad-88:80px;
    --pad-96:80px;--pad-104:88px;--pad-112:88px;--pad-120:96px}
  .eyebrow+h2,.eyebrow+h1{margin-bottom:16px!important}
}