/* Preview site styles */
:root{
  --bg:#0b1a2f;            /* dark navy */
  --ink:#ffffff;            /* white text */
  --accent:#1aa3b3;
  --muted:rgba(255,255,255,.75);
  --nav-h:54px;             /* actual nav height used for hero calc */
  --radius:10px;
  --phi:1.61;
  --fs-medium:1rem;
  --fs-large:calc(var(--fs-medium) * var(--phi));
  --fs-very-large:calc(var(--fs-large) * var(--phi));
  --fs-extra-large:calc(var(--fs-very-large) * var(--phi));
  --hero-brand-size:clamp(1.4rem,2.5vw,2.1rem);
  --flickr-blue:#0063dc;
  --flickr-pink:#ff0084;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--ink);
  background:var(--bg);
  font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height:1.5;
}
body.mission-page{display:flex;flex-direction:column;min-height:100%}
main{max-width:none;margin:0}
/* Content area leaves room for fixed bottom nav */
.content{padding:1rem 1rem calc(var(--nav-h) + 1.25rem + env(safe-area-inset-bottom))}
header.site-header{text-align:center;padding:1rem 1rem 0}
h1{font-size:var(--fs-extra-large);margin:.5rem 0}
.lede{font-size:var(--fs-large);margin:.5rem 0 1rem;color:var(--muted)}
.mission-lead{padding:clamp(2rem,6vw,4rem) clamp(1rem,5vw,3.5rem) 0;text-align:center;display:flex;flex-direction:column;align-items:center;gap:1rem}
.brand-mark{display:flex;align-items:center;justify-content:center;gap:1rem;flex-wrap:wrap}
.mission-lead .brand-mark img{width:50pt;height:50pt;display:block}
.mission-lead .brand-name{font-size:28pt;letter-spacing:.02em;text-transform:none;font-weight:600}
.mission-quote{font-size:clamp(1rem,2.2vw,1.25rem);margin:1.2rem auto .9rem;max-width:40ch;color:var(--muted)}
.mission-body{max-width:48ch;margin:0 auto 2.25rem;font-size:clamp(1rem,2.4vw,1.25rem);color:var(--muted)}
.mission-content{flex:1;padding:0 clamp(1rem,6vw,4rem) calc(var(--nav-h) + 2rem + env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:1.5rem}
.mission-card{width:min(520px,100%)}
.mission-subhead{margin:1.5rem 0 .5rem;font-size:clamp(1.05rem,2.4vw,1.4rem);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.mission-cta-link{display:inline-flex;align-items:center;justify-content:center;margin-left:.4rem;vertical-align:middle}
.mission-cta-icon{width:24px;height:24px;display:inline-block;filter:invert(1) brightness(1.1)}
.object-list{margin:.75rem 0 1.5rem;padding-left:0;list-style:none;counter-reset:obj}
.object-list li{margin:.5rem 0;font-size:.95rem;line-height:1.5}
.object-list li::before{content:attr(data-label) " ";font-weight:600;letter-spacing:.02em;color:#fff}
.mission-socials{display:flex;align-items:center;justify-content:center;gap:.55rem;margin-top:.5rem;flex-wrap:wrap}
.mission-topics{width:min(520px,100%);display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center;margin-top:.5rem}
.mission-carousel{width:min(720px,100%);margin:.5rem auto 1rem;padding:.5rem}
.carousel{position:relative;max-width:100%;margin:0 auto;overflow:hidden;border:1px solid rgba(255,255,255,.15);border-radius:var(--radius);background:rgba(255,255,255,.04);transition:height .3s ease}
.carousel-track{display:grid;grid-template-columns:1fr;list-style:none;padding:0;margin:0;touch-action:pan-y;position:relative}
.slide{grid-area:1/1;opacity:0;pointer-events:none;transition:opacity .4s ease}
.slide[aria-current="true"]{opacity:1;pointer-events:auto;position:relative}
.slide img{display:block;width:100%;height:auto;max-height:60vh;object-fit:contain}
.carousel:fullscreen{background:#000;display:flex;align-items:center;justify-content:center;height:100vh;width:100vw}
.carousel:fullscreen .carousel-track{width:100%;height:100%;display:grid}
.carousel:fullscreen .slide{display:flex;align-items:center;justify-content:center}
.carousel:fullscreen .slide img{width:100vw;max-width:100vw;height:100vh;max-height:100vh;object-fit:contain}
.carousel:fullscreen .carousel-btn{position:fixed;top:50%;transform:translateY(-50%);}
.carousel:fullscreen .carousel-btn.prev{left:1rem}
.carousel:fullscreen .carousel-btn.next{right:1rem}
.carousel.carousel-faux-fullscreen{position:fixed;inset:0;z-index:1000;background:#000;display:flex;align-items:center;justify-content:center;width:100vw;height:100vh;padding:0;margin:0}
.carousel.carousel-faux-fullscreen .carousel-track{width:100%;height:100%;display:grid}
.carousel.carousel-faux-fullscreen .slide{display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none}
.carousel.carousel-faux-fullscreen .slide[aria-current="true"]{opacity:1;pointer-events:auto}
.carousel.carousel-faux-fullscreen .slide img{width:100vw;height:100vh;object-fit:contain}
.carousel.carousel-faux-fullscreen .carousel-btn{position:fixed;top:50%;transform:translateY(-50%);}
.carousel.carousel-faux-fullscreen .carousel-btn.prev{left:1rem}
.carousel.carousel-faux-fullscreen .carousel-btn.next{right:1rem}
.carousel-btn{position:absolute;top:50%;transform:translateY(-50%);background:rgba(7,17,34,.85);border:1px solid rgba(255,255,255,.6);color:#fff;font-size:2rem;line-height:1;padding:.2rem .6rem;border-radius:8px;cursor:pointer;box-shadow:0 4px 16px rgba(0,0,0,.45)}
.carousel-btn{z-index:5}
.carousel-btn:hover{background:rgba(7,17,34,.95);border-color:#fff}
.carousel-btn:focus{outline:2px solid #fff;outline-offset:2px}
.carousel-btn.prev{left:.5rem}
.carousel-btn.next{right:.5rem}
.topic-pill{padding:.5rem 1.5rem;border-radius:999px;font-size:.95rem;letter-spacing:.15em;text-transform:uppercase;font-weight:600;color:#0b1a2f;background:rgba(255,255,255,.9)}
.topic-pill.visiting{background:#f5d547}
.topic-pill.boating{background:#1aa3f3}
.topic-pill.watersports{background:#ff9330}
.topic-pill.nature{background:#4caf50}
.topic-pill.culture{background:#8d6e63;color:#fff}
.objects-list{counter-reset:object;list-style:none;padding-left:0;margin:1rem 0 0}
.objects-list > li{position:relative;padding-left:2.5rem;counter-increment:object;margin-bottom:.65rem;--object-num:counter(object)}
.objects-list > li::before{content:var(--object-num) ". ";position:absolute;left:0;font-weight:600;color:var(--muted)}
.objects-list ol{list-style:none;padding-left:0;margin:.65rem 0 0;counter-reset:sub-object}
.objects-list ol li{position:relative;padding-left:2.5rem;counter-increment:sub-object;margin-bottom:.55rem}
.objects-list ol li::before{content:var(--object-num) "." counter(sub-object) " ";position:absolute;left:0;font-weight:600;color:var(--muted)}
/* Hero background for pages that need it (home) */
.hero-bg{
  /* No shading overlay; just the image (with logo fallback) */
  background-image:
    url('../images/raster/hero.jpg'),
    url('../images/svg/boat_logo1%20(2).png');
  background-size: cover, 420px auto;     /* fill screen; logo as fallback */
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  background-color:#000;                  /* safety color while loading */
}
.hero-overlay{position:relative;display:flex;align-items:center;justify-content:center;height:100%;padding:clamp(1.25rem,5vw,3rem);text-align:left}
.hero-brand{position:absolute;top:clamp(1.75rem,4vw,3rem);left:clamp(1.75rem,4vw,3rem);display:flex;align-items:center;gap:.65rem;padding:0}
.hero-brand img{height:48px;width:auto;display:block;filter:drop-shadow(0 5px 15px rgba(0,0,0,.75))}
.hero-brand-name{font-size:var(--hero-brand-size);font-weight:600;letter-spacing:.04em;text-transform:none;text-shadow:0 5px 15px rgba(0,0,0,.75)}
.hero-phrases{position:absolute;top:clamp(9rem,15vw,13rem);left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:.5em;max-width:28ch;text-align:center;color:#fff;text-shadow:none}
.hero-phrase{position:static;transform:none;opacity:1;width:100%;padding:0 1rem;white-space:normal;text-align:center;line-height:1.2;animation:none}
.hero-phrase-accent{color:inherit}
.hero-socials{position:absolute;bottom:clamp(1.5rem,4vw,3rem);right:clamp(1.5rem,4vw,3rem);display:flex;align-items:center;gap:.55rem}
.hero-social-link{width:44px;height:44px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:rgba(7,17,34,.65);border:1px solid rgba(255,255,255,.22);color:#fff;text-decoration:none;backdrop-filter:saturate(180%) blur(6px);transition:transform .2s ease,border-color .2s ease,opacity .2s ease}
.hero-social-link:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.45)}
.hero-social-link svg{width:20px;height:20px;fill:currentColor}
.hero-social-link.flickr{background:rgba(7,17,34,.65)}
.hero-social-link.youtube{background:#ff0000;color:#fff}
.hero-social-link.facebook{background:#1877f2}
.hero-social-link.instagram{background:#d62976}
.hero-social-link.reddit{background:#ff4500}
.hero-social-link[data-disabled="true"]{opacity:.5;cursor:default;pointer-events:none}
.hero-flickr-icon{display:flex;align-items:center;gap:.18rem}
.hero-flickr-dot{width:.55rem;height:.55rem;border-radius:50%;box-shadow:0 0 4px rgba(0,0,0,.35)}
.hero-flickr-dot.blue{background:var(--flickr-blue)}
.hero-flickr-dot.pink{background:var(--flickr-pink)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.site-header.hero-bg{padding:2.5rem 1rem 1rem; min-height: 45vh; display:flex; flex-direction:column; align-items:center; justify-content:flex-end}
/* Full-viewport hero area above the fixed bottom nav */
.hero-full{min-height:calc(100vh - var(--nav-h) - env(safe-area-inset-bottom));height:calc(100vh - var(--nav-h) - env(safe-area-inset-bottom));}
@supports (height: 100svh){
  .hero-full{min-height:calc(100svh - var(--nav-h) - env(safe-area-inset-bottom));height:calc(100svh - var(--nav-h) - env(safe-area-inset-bottom));}
}
/* Bottom fixed nav */
.bottom-nav{position:fixed;left:0;right:0;bottom:0;min-height:var(--nav-h);display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:1rem;background:rgba(7,17,34,.95);border-top:1px solid rgba(255,255,255,.15);padding:clamp(.35rem,2vw,.9rem) clamp(1rem,4vw,2.5rem) calc(clamp(.35rem,2vw,.9rem) + env(safe-area-inset-bottom));-webkit-backdrop-filter:saturate(180%) blur(10px);backdrop-filter:saturate(180%) blur(10px)}
.bottom-nav a{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;color:#fff;text-decoration:none;flex:0 0 auto}
.bottom-nav a:hover{background:rgba(255,255,255,.18)}
.bottom-nav a.active{background:rgba(255,255,255,.28)}
.bottom-nav .nav-icon{width:24px;height:24px;display:block;filter:invert(1) brightness(1.1)}
.bottom-nav .nav-icon.nav-logo{width:32px;height:32px;border-radius:50%;filter:none;object-fit:contain}
/* Cards / sections */
.section{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius);padding:1rem;margin:0 0 1rem}
.tagline{display:block;font-size:clamp(1rem,2.5vw,1.35rem);text-transform:uppercase;letter-spacing:.18em;margin:0 auto .75rem;color:#fff;text-align:center;font-weight:500;text-shadow:none}
.hero-phrases .tagline{align-self:center;text-align:center;margin:0 auto .75rem;text-shadow:none}
.site-credit{display:block;font-size:.78rem;text-transform:uppercase;letter-spacing:.14em;color:rgba(255,255,255,.8);text-align:right;margin:1.75rem clamp(1rem,4vw,3rem) 0 auto}
.hero-full{position:relative}
.hero-full .site-credit{margin:0}
.about-page .site-credit{margin:1rem clamp(1rem,4vw,3rem) 0 auto}
/* Unified hero footer: socials left, credit right */
.hero-footer{position:absolute;left:0;right:0;bottom:.9rem;display:flex;justify-content:space-between;align-items:flex-end;padding:0 clamp(1.25rem,4vw,3rem);z-index:10;pointer-events:none}
.hero-footer .hero-socials{position:static;bottom:auto;right:auto;display:flex;align-items:center;gap:.55rem;pointer-events:auto}
.hero-footer .site-credit{margin:0;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:#fff;text-align:right;pointer-events:auto;font-weight:600;background:rgba(7,17,34,.65);padding:.4rem .7rem;border-radius:6px;text-shadow:0 2px 6px rgba(0,0,0,.7);white-space:nowrap}
/* Fallback credit outside hero if hero absolute fails */
.fallback-credit{display:block;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.75);text-align:right;margin:.5rem clamp(1rem,4vw,3rem) 0}
/* Global link color for better contrast */
a{color:#8bdbff;text-decoration:none}
a:hover{color:#b7e9ff;text-decoration:underline}
a:visited{color:#78c6eb}
.about-page .content a{color:#8bdbff;text-decoration:none;border-bottom:1px solid rgba(139,219,255,.5)}
.about-page .content a:hover{color:#b9e9ff;border-bottom-color:rgba(185,233,255,.85)}
/* Responsive tweaks */
@media (min-width:640px){.content{padding:2rem 1.5rem calc(var(--nav-h) + 2rem + env(safe-area-inset-bottom))}}

/* Stabilize layout to prevent sideways shift on scrollbar appearance */
html{scrollbar-gutter:stable}

/* Overrides: shrink visual nav height and reposition hero footer above nav */
.bottom-nav{height:54px;min-height:54px;padding:4px clamp(.75rem,4vw,2rem) calc(4px + env(safe-area-inset-bottom));gap:.75rem}
.bottom-nav a{width:44px;height:44px}
.bottom-nav .nav-icon{width:22px;height:22px}
.bottom-nav .nav-icon.nav-logo{width:30px;height:30px}
.hero-footer{bottom:.6rem;z-index:500}
.hero-footer{position:fixed !important;left:0;right:0;bottom:54px;display:flex;justify-content:space-between;align-items:flex-end;padding:0 clamp(1.25rem,4vw,3rem);z-index:900}
.about-page .site-credit{margin:1.5rem clamp(1rem,4vw,3rem) 0 auto}