/* Swell Otter site header and footer, shared by the article pages and stamped onto spot and region pages.
   Uses the colour tokens from spot.css. */
.site-head{position:sticky;top:0;z-index:30;background:var(--navy);color:var(--cream);padding-top:env(safe-area-inset-top,0px);box-shadow:0 3px 0 var(--mustard),0 6px 0 var(--orange),0 9px 0 var(--rust);margin-bottom:9px}
.site-in{max-width:1040px;margin:0 auto;padding:0 16px;display:flex;align-items:center;gap:18px;min-height:60px}
.site-logo{display:flex;align-items:center;gap:10px;text-decoration:none;flex:none}
.site-logo img{width:40px;height:40px;border-radius:50%;object-fit:cover;border:2px solid var(--cream);background:var(--cream)}
.site-logo b{font:400 23px/1 var(--display);color:var(--cream);text-shadow:2px 2px 0 var(--rust)}
.site-nav{display:flex;gap:4px;margin-left:auto}
.site-nav a{padding:8px 12px;border-radius:999px;font:800 12.5px var(--body);text-transform:uppercase;letter-spacing:.09em;color:var(--sand);text-decoration:none;white-space:nowrap}
.site-nav a:hover{background:rgba(255,255,255,.08);color:var(--cream)}
.site-nav a[aria-current="page"]{background:var(--mustard);color:var(--navy)}
#so-account:empty{display:none}
@media (max-width:640px){
  .site-head{position:relative}
  .site-in{flex-wrap:wrap;gap:0 10px;min-height:0;padding:10px 12px 8px}
  .site-logo b{font-size:21px}
  .site-nav{order:3;flex-basis:100%;margin:8px -4px 0;overflow-x:auto;scrollbar-width:none}
  .site-nav::-webkit-scrollbar{display:none}
  .site-nav a{padding:6px 10px;font-size:11.5px}
  #so-account{margin-left:auto}
}

.site-foot{background:var(--navy);color:var(--sand);border-top:6px solid var(--mustard);box-shadow:0 -6px 0 var(--orange),0 -12px 0 var(--rust);margin-top:12px;padding:0!important;font-size:14px}
.sf-in{max-width:1040px;margin:0 auto;padding:30px 16px 20px;display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr 1fr;gap:26px 28px}
.sf-brand p{margin:12px 0 0;line-height:1.55;color:var(--sand);max-width:30ch}
.sf-col h2{margin:4px 0 10px;font:900 12px var(--body);text-transform:uppercase;letter-spacing:.12em;color:var(--mustard)}
.sf-col ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.sf-col a{color:var(--cream);text-decoration:none;font-weight:600}
.sf-col a:hover{color:var(--mustard);text-decoration:underline}
.sf-news{grid-column:1/-1}
.sf-news:empty{display:none}
.sf-small{grid-column:1/-1;border-top:1px solid rgba(239,228,204,.18);padding-top:18px;font-size:12px;color:var(--sage)}
.sf-small p{margin:0 0 4px}
.sf-small a{color:var(--cream)}
/* One compact legal line: items separated by dots, wrapping cleanly on phones. */
.sf-small .sf-legal{margin:0;font-size:12px;line-height:1.6;color:var(--sage);text-wrap:pretty}
.sf-legal>span+span::before{content:"·";margin:0 7px;opacity:.6}
.sf-legal a,.sf-legal .so-ck-set{color:var(--sand);text-decoration:underline;text-decoration-color:rgba(239,228,204,.35);text-underline-offset:2px}
.sf-legal a:hover,.sf-legal .so-ck-set:hover{color:var(--cream);text-decoration-color:currentColor}
.site-foot>div{max-width:1040px}
@media (max-width:980px){.sf-in{grid-template-columns:repeat(4,1fr)}.sf-brand{grid-column:1/-1}}
@media (max-width:820px){.sf-in{grid-template-columns:1fr 1fr}}
@media (max-width:420px){.sf-in{grid-template-columns:1fr 1fr;gap:22px 16px;padding-top:24px}}

/* Breadcrumbs (Home > Regions > Region > Spot), shared by region, spot and article pages. */
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:nowrap;white-space:nowrap;align-items:center;gap:2px 0;font:700 11.5px/1.6 var(--narrow);text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.crumbs li{display:flex;align-items:center;min-width:0;flex:0 1 auto}
/* One line on every screen: the longest names (usually the region) shorten with an ellipsis instead of wrapping. */
.crumbs li>a,.crumbs li>span{display:block;overflow:hidden;text-overflow:ellipsis;min-width:0}
.crumbs li:first-child,.crumbs li:last-child{flex-shrink:0}
/* Phones: drop the "Regions" step on long trails, it is one tap away in the header nav. */
@media (max-width:640px){.crumbs li:nth-child(2):nth-last-child(n+3){display:none}}
.crumbs li+li::before{content:"";width:6px;height:6px;margin:0 9px 0 7px;border-right:2px solid var(--orange);border-top:2px solid var(--orange);transform:rotate(45deg);flex:none}
.crumbs a{color:var(--teal);text-decoration:none}
.crumbs a:hover{text-decoration:underline;text-underline-offset:3px}
.crumbs [aria-current]{color:var(--navy)}
.hub-wrap>.crumbs{padding-top:14px}
.crumbs-spot{padding:10px 14px 2px;background:var(--paper)}
@media (min-width:1000px){.site-in,.site-foot>.sf-in{max-width:1180px;padding-inline:28px}}

/* The home page keeps its own header markup (header.bar) but uses the same nav as every other page. */
.bar nav.site-nav{gap:4px;margin-left:auto;font:inherit;letter-spacing:normal}
.bar nav.site-nav a{color:var(--sand)}
.bar nav.site-nav a[aria-current="page"]{color:var(--navy)}

/* Short text pages (newsletter, privacy): a centred sheet on desktop instead of a phone-width strip. */
@media (min-width:1000px){
  .docpage main{max-width:860px;margin:30px auto 40px;border:2px solid var(--navy);border-radius:16px;box-shadow:6px 6px 0 var(--mustard);padding:18px 26px 10px}
}