/* ============================================================
   CITY SIDE SAILORS — design system
   Palette pulled from the club graphic (rope navy, buoy orange,
   lake teal, sail gold, dock cream).
   ============================================================ */

:root{
  /* --- core palette, sampled from the logo --- */
  --navy:        #14283F;   /* rope / headline ink */
  --navy-deep:   #0D1D30;   /* footer, deep water */
  --orange:      #E8672A;   /* buoy body */
  --orange-dark: #C6501C;
  --gold:        #F0B94A;   /* sun */
  --teal:        #0F5573;   /* lake, under sail */
  --teal-light:  #DCEAEE;   /* section wash */
  --cream:       #F5F0E3;   /* page background, dock cream */
  --cream-deep:  #EAE2CC;
  --tan:         #E8C48A;   /* sail */
  --ink-soft:    #3C4A5A;

  --font-display: 'Fraunces', 'Georgia', serif;
  --font-body: 'Libre Franklin', -apple-system, sans-serif;
  --font-hand: 'Caveat', cursive;

  --radius: 14px;
  --shadow-soft: 0 10px 30px -12px rgba(13,29,48,0.25);
  --rope-repeat: 34px;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

body{
  margin:0;
  background: var(--cream);
  color: var(--navy);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
}

h1,h2,h3,h4{
  font-family: var(--font-display);
  color: var(--navy);
  line-height: 1.15;
  margin: 0 0 .5em;
  font-weight: 600;
}
h1{ font-size: clamp(2.4rem, 5vw, 3.6rem); font-weight: 700; }
h2{ font-size: clamp(1.8rem, 3.4vw, 2.4rem); }
h3{ font-size: 1.35rem; }

p{ margin: 0 0 1em; }
a{ color: var(--teal); text-decoration: none; }
a:hover{ color: var(--orange-dark); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

.container{
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
}

.hand{
  font-family: var(--font-hand);
  color: var(--orange-dark);
  font-size: 1.4em;
  font-weight: 600;
}

/* ---------- rope divider (signature motif) ---------- */
.rope-divider{
  height: 14px;
  background-image: repeating-linear-gradient(
    -45deg,
    var(--navy) 0 4px,
    transparent 4px 8px
  ),
  repeating-linear-gradient(
    45deg,
    var(--navy) 0 4px,
    transparent 4px 8px
  );
  background-size: var(--rope-repeat) var(--rope-repeat);
  background-position: 0 0, 0 0;
  opacity: .85;
}

/* ---------- header / nav ---------- */
.site-header{
  background: var(--cream);
  border-bottom: 3px solid var(--navy);
  position: sticky;
  top: 0;
  z-index: 50;
}
.site-header .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-top: 14px;
  padding-bottom: 14px;
  gap: 20px;
}
.brand{
  display:flex;
  align-items:center;
  gap: 14px;
  color: var(--navy);
}
.brand img{
  height: 56px;
  width: 56px;
  border-radius: 50%;
  border: 2px solid var(--navy);
}
.brand-text{ display:flex; flex-direction:column; line-height:1.1; }
.brand-text .name{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.35rem;
  color: var(--navy);
}
.brand-text .tag{
  font-family: var(--font-hand);
  color: var(--orange-dark);
  font-size: 1rem;
}

nav.main-nav ul{
  list-style:none;
  display:flex;
  gap: 6px;
  margin:0; padding:0;
  flex-wrap: wrap;
}
nav.main-nav a{
  display:inline-block;
  padding: 8px 14px;
  border-radius: 999px;
  color: var(--navy);
  font-weight: 600;
  font-size: .96rem;
  letter-spacing: .01em;
}
nav.main-nav a:hover{ background: var(--teal-light); color: var(--navy); }
nav.main-nav a.active{ background: var(--orange); color: #fff; }

.nav-toggle{
  display:none;
  background:none;
  border: 2px solid var(--navy);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 1.2rem;
  cursor:pointer;
  color: var(--navy);
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 12px 22px;
  border-radius: 999px;
  background: var(--orange);
  color:#fff;
  font-weight: 700;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 1rem;
  box-shadow: var(--shadow-soft);
  transition: transform .15s ease, background .15s ease;
}
.btn:hover{ background: var(--orange-dark); color:#fff; transform: translateY(-2px); }
.btn.secondary{
  background: transparent;
  color: var(--navy);
  border: 2px solid var(--navy);
  box-shadow:none;
}
.btn.secondary:hover{ background: var(--navy); color:#fff; }

/* ---------- hero ---------- */
.hero{
  background:
    radial-gradient(circle at 85% -10%, rgba(240,185,74,.35), transparent 45%),
    linear-gradient(180deg, var(--cream) 0%, var(--cream-deep) 100%);
  padding: 64px 0 56px;
  overflow: hidden;
}
.hero .container{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 48px;
  align-items:center;
}
.hero-eyebrow{
  font-family: var(--font-hand);
  font-size: 1.3rem;
  color: var(--orange-dark);
  display:block;
  margin-bottom: 6px;
}
.hero-art{
  border-radius: 50%;
  overflow:hidden;
  border: 6px solid #fff;
  box-shadow: var(--shadow-soft);
  aspect-ratio: 1;
  max-width: 380px;
  margin: 0 auto;
  background: var(--cream);
}
.hero-art img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transform: scale(0.99) translate(-1px, -10px);
  transform-origin: center;
}
.hero-actions{ display:flex; gap:14px; margin-top: 22px; flex-wrap: wrap; }

/* ---------- sections ---------- */
section.band{ padding: 56px 0; }
section.band.teal{ background: var(--teal-light); }
section.band.navy{ background: var(--navy); color: #EFEAE0; }
section.band.navy h2, section.band.navy h3{ color:#fff; }
section.band.navy a{ color: var(--gold); }

.section-head{ max-width: 680px; margin: 0 auto 34px; text-align:center; }
.section-head .kicker{
  font-family: var(--font-hand);
  color: var(--orange-dark);
  font-size: 1.2rem;
}

/* ---------- cards ---------- */
.card-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
.card{
  background: #fff;
  border-radius: var(--radius);
  padding: 26px;
  box-shadow: var(--shadow-soft);
  border: 1px solid rgba(20,40,63,.08);
}
.card .icon{
  width: 46px; height:46px;
  border-radius: 50%;
  background: var(--orange);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size: 1.2rem;
  margin-bottom: 14px;
}

/* ---------- buoy trail (signature element) ---------- */
.buoy-trail{
  display:flex;
  flex-wrap:wrap;
  gap: 14px;
  justify-content:center;
  margin: 30px 0;
}
.buoy{
  width: 58px; height:58px;
  border-radius: 50%;
  background: var(--orange);
  border: 3px solid var(--navy);
  color:#fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
  display:flex; align-items:center; justify-content:center;
  position: relative;
}
.buoy.done{ background: var(--teal); }
.buoy.done::after{
  content: "✓";
  position:absolute;
  top:-8px; right:-8px;
  background: var(--gold);
  color: var(--navy);
  width: 22px; height:22px;
  border-radius: 50%;
  font-size:.75rem;
  display:flex; align-items:center; justify-content:center;
  border: 2px solid var(--navy);
}

/* ---------- footer ---------- */
.site-footer{
  background: var(--navy-deep);
  color: #C8D2DC;
  padding: 44px 0 26px;
}
.site-footer a{ color: var(--tan); }
.footer-grid{
  display:grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 30px;
  margin-bottom: 26px;
}
.footer-grid h4{ color:#fff; font-family: var(--font-display); font-size:1.05rem; }
.footer-grid ul{ list-style:none; margin:0; padding:0; }
.footer-grid li{ margin-bottom:8px; }
.footer-bottom{
  border-top: 1px solid rgba(255,255,255,.15);
  padding-top: 18px;
  font-size: .85rem;
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap: 10px;
  color: #8FA0B0;
}

/* ---------- page header (interior pages) ---------- */
.page-hero{
  background: var(--navy);
  color:#fff;
  padding: 46px 0 40px;
  text-align:center;
}
.page-hero h1{ color:#fff; }
.page-hero p{ color: var(--tan); font-family: var(--font-hand); font-size: 1.3rem; margin:0; }

.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;
}

.contact-hero-image{
  display: block;
  width: 100%;
  max-width: 480px;
  height: auto;
  margin: 0 auto 32px;
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}

/* ---------- calendar ---------- */
.cal-header{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom: 18px;
}
.cal-header h2{ margin:0; }
.cal-nav{ display:flex; gap: 8px; }
.cal-nav a{
  border: 2px solid var(--navy);
  border-radius: 8px;
  padding: 6px 12px;
  font-weight:700;
  color: var(--navy);
}
.cal-nav a:hover{ background: var(--navy); color:#fff; }

.calendar{
  width:100%;
  border-collapse: collapse;
  background:#fff;
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow: var(--shadow-soft);
}
.calendar th{
  background: var(--navy);
  color:#fff;
  padding: 10px;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.calendar td{
  border: 1px solid var(--teal-light);
  vertical-align: top;
  height: 96px;
  width: 14.28%;
  padding: 6px;
  font-size: .85rem;
}
.calendar td.today{ background: #FFF7E6; }
.calendar td .daynum{ font-weight:700; color: var(--ink-soft); }
.calendar td.empty{ background: var(--cream); }
.event-pill{
  display:block;
  margin-top: 4px;
  background: var(--teal);
  color:#fff;
  border-radius: 6px;
  padding: 3px 6px;
  font-size: .72rem;
  line-height:1.25;
}
.event-pill.potluck{ background: var(--orange); }
.event-pill.regatta{ background: var(--gold); color: var(--navy); }

.event-list{ margin-top: 40px; display:flex; flex-direction:column; gap: 16px; }
.event-row{
  background:#fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 20px 24px;
  display:grid;
  grid-template-columns: 120px 1fr;
  gap: 20px;
}
.event-row.has-image{
  grid-template-columns: 120px 1fr 96px;
}
.event-row-photo{
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: 10px;
  display:block;
}
.add-to-cal{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: .85rem;
}
.add-to-cal-label{ color: var(--ink-soft); font-weight:600; }
.add-to-cal a{
  color: var(--teal);
  font-weight:700;
  padding: 3px 10px;
  border: 1px solid var(--teal);
  border-radius: 999px;
}
.add-to-cal a:hover{ background: var(--teal); color:#fff; }

/* ---------- past events ---------- */
.past-event-list{ margin-top: 48px; }
.past-event-row{
  display:flex;
  align-items:center;
  gap: 20px;
  background:#fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 16px 22px;
  margin-bottom: 14px;
  text-decoration:none;
  transition: transform .15s ease, box-shadow .15s ease;
}
.past-event-row[hidden]{ display:none; }
.past-event-row:hover{ transform: translateY(-2px); box-shadow: 0 14px 30px -14px rgba(20,40,63,.3); }
.past-event-info{ flex:1; min-width:0; }
.past-event-info h3{ margin:0 0 2px; color: var(--navy); }
.past-event-info p{ margin:0; color: var(--ink-soft); font-size:.9rem; }
.past-event-link-hint{
  flex-shrink:0;
  font-family: var(--font-hand);
  color: var(--orange-dark);
  font-size: 1.05rem;
  white-space: nowrap;
}
.past-event-row-no-photos{
  cursor: default;
}
.past-event-row-no-photos:hover{ transform:none; box-shadow: var(--shadow-soft); }
.past-event-row-no-photos .past-event-link-hint{
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 400;
  color: var(--ink-soft);
  font-size: .85rem;
}
#pastEventsToggle{ margin-top: 6px; }
.event-date-badge{
  background: var(--teal-light);
  border-radius: 10px;
  text-align:center;
  padding: 10px 6px;
  height: fit-content;
}
.event-date-badge .month{ font-size:.75rem; text-transform:uppercase; font-weight:700; color: var(--teal); }
.event-date-badge .day{ font-family: var(--font-display); font-size: 1.8rem; font-weight:700; color: var(--navy); }

/* ---------- gallery ---------- */
/* ---------- gallery event groups ---------- */
.gallery-event-group{ margin-bottom: 44px; scroll-margin-top: 110px; }
.gallery-event-group:last-child{ margin-bottom: 0; }
.gallery-event-heading{
  display:flex;
  align-items:center;
  gap: 16px;
  margin-bottom: 18px;
}
.gallery-event-date-badge{
  background: var(--teal-light);
  border-radius: 10px;
  text-align:center;
  padding: 8px 12px;
  min-width: 56px;
  flex-shrink: 0;
}
.gallery-event-date-badge .month{ display:block; font-size:.72rem; font-weight:700; color: var(--teal); letter-spacing:.04em; }
.gallery-event-date-badge .day{ display:block; font-family: var(--font-display); font-size: 1.5rem; font-weight:700; color: var(--navy); }
.gallery-event-subdate{ margin:0; color: var(--ink-soft); font-size: .92rem; }

.gallery-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.gallery-item{
  border-radius: 10px;
  overflow:hidden;
  aspect-ratio: 1;
  box-shadow: var(--shadow-soft);
  position:relative;
  background: var(--teal-light);
}
.gallery-item img{ width:100%; height:100%; object-fit:cover; display:block; }
.empty-state{
  text-align:center;
  padding: 60px 20px;
  background:#fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}
.empty-state .icon{ font-size: 3rem; margin-bottom: 12px; }

/* ---------- newsletters: magazine viewer ---------- */
.newsletter-viewer{
  background:#fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 18px 24px 20px;
  max-width: 940px;
  margin: 0 auto;
}
.newsletter-viewer-header{ text-align:center; margin-bottom: 10px; }
.newsletter-viewer-header h2{ margin-bottom: 2px; }
.newsletter-viewer-date{
  margin:0;
  font-family: var(--font-hand);
  color: var(--orange-dark);
  font-size: 1.1rem;
}
.newsletter-viewer-toolbar{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.newsletter-nav-btn{
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid var(--navy);
  background: var(--cream);
  color: var(--navy);
  font-size: 1.1rem;
  cursor:pointer;
  flex-shrink:0;
}
.newsletter-nav-btn:hover:not(:disabled){ background: var(--navy); color:#fff; }
.newsletter-nav-btn:disabled{ opacity:.35; cursor:not-allowed; }
.newsletter-page-info{ font-weight:600; color: var(--navy); font-size:.92rem; white-space:nowrap; }
.newsletter-toolbar-spacer{ flex:1; }
.newsletter-toolbar-btn{ padding: 9px 16px; font-size:.85rem; }
.newsletter-canvas-wrap{
  position:relative;
  background: var(--cream-deep);
  border-radius: 10px;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  min-height: 300px;
  padding: 20px;
  overflow:auto;
}
.newsletter-toolbar-btn[hidden]{ display:none; }
.newsletter-canvas-wrap:fullscreen{
  background: var(--navy-deep);
  padding: 40px;
  max-height: 100vh;
  align-items:center;
}
#nlCanvas{
  display:block;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  border-radius: 2px;
  background:#fff;
}
.newsletter-loading{
  position:absolute;
  color: var(--ink-soft);
  font-family: var(--font-hand);
  font-size: 1.2rem;
}
.newsletter-loading[hidden]{ display:none; }

/* ---------- newsletters: back-issue list ---------- */
.newsletter-list{ display:flex; flex-direction:column; gap: 16px; }
.newsletter-list-item{
  display:flex;
  align-items:center;
  gap: 20px;
  background:#fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 20px 24px;
  flex-wrap: wrap;
}
.newsletter-list-icon{
  font-size: 2rem;
  flex-shrink:0;
  width: 56px; height:56px;
  border-radius: 50%;
  background: var(--teal-light);
  display:flex; align-items:center; justify-content:center;
}
.newsletter-list-info{ flex:1; min-width:200px; }
.newsletter-list-info h3{ margin:0 0 2px; }
.newsletter-list-date{ margin:0 0 6px; color: var(--orange-dark); font-family: var(--font-hand); font-size:1.05rem; }
.newsletter-list-desc{ margin:0; color: var(--ink-soft); font-size:.9rem; }
.newsletter-list-actions{ display:flex; gap:10px; flex-shrink:0; flex-wrap:wrap; }
.newsletter-toast{
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--gold);
  color: var(--navy);
  font-weight: 700;
  font-size: .9rem;
  padding: 9px 20px;
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  z-index: 400;
}
.newsletter-toast[hidden]{ display:none; }

/* ---------- merch storefront ---------- */
.merch-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 28px;
}
.merch-card{
  background:#fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}
.merch-card:hover{ transform: translateY(-3px); box-shadow: 0 16px 34px -14px rgba(20,40,63,.35); }
.merch-card:focus-visible{ outline: 3px solid var(--gold); outline-offset: 2px; }
.merch-photo-wrap{
  position:relative;
  width:100%;
  aspect-ratio: 1;
  background: var(--teal-light);
  overflow:hidden;
}
.merch-photo-wrap img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.merch-photo-placeholder{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 3rem;
  color: var(--teal);
}
.merch-sold-out-ribbon{
  position:absolute;
  top: 24px;
  right: -46px;
  min-width: 170px;
  transform: rotate(45deg);
  background: var(--orange-dark);
  color:#fff;
  text-align:center;
  font-family: var(--font-display);
  font-weight:700;
  font-size: .85rem;
  letter-spacing: .03em;
  padding: 6px 14px;
  white-space: nowrap;
  box-shadow: 0 3px 10px rgba(0,0,0,.25);
  text-transform: uppercase;
}
.merch-info{
  padding: 20px;
  display:flex;
  flex-direction:column;
  gap: 8px;
  flex:1;
}
.merch-info h3{ margin:0; }
.merch-desc{ color: var(--ink-soft); font-size: .92rem; margin:0; flex:1; }
.merch-buy-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  margin-top: 8px;
}
.merch-price{
  font-family: var(--font-display);
  font-weight:700;
  font-size: 1.2rem;
  color: var(--navy);
}
.merch-buy-btn{
  background: var(--cream-deep);
  color: var(--ink-soft);
  border: 1px solid #ddd;
  border-radius: 999px;
  padding: 9px 18px;
  font-weight:700;
  font-size: .88rem;
  font-family: var(--font-body);
  cursor: not-allowed;
}

/* ---------- merch: featured product ---------- */
.merch-featured{
  position: relative;
  background:#fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  overflow:hidden;
  margin-bottom: 40px;
  cursor: pointer;
  border: 2px solid var(--gold);
  transition: transform .15s ease, box-shadow .15s ease;
}
.merch-featured:hover{ transform: translateY(-3px); box-shadow: 0 20px 40px -16px rgba(20,40,63,.4); }
.merch-featured:focus-visible{ outline: 3px solid var(--gold); outline-offset: 2px; }
.merch-featured-kicker{
  position:absolute;
  top: 16px; left: 16px;
  z-index: 2;
  background: var(--gold);
  color: var(--navy);
  font-weight:700;
  font-size: .82rem;
  padding: 5px 14px;
  border-radius: 999px;
  letter-spacing: .03em;
}
.merch-featured-inner{
  display:grid;
  grid-template-columns: 1fr 1fr;
}
.merch-featured-photo{
  position:relative;
  aspect-ratio: 1;
  background: var(--teal-light);
  overflow:hidden;
}
.merch-featured-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.merch-featured-info{
  padding: 30px 34px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap: 12px;
}
.merch-featured-info h2{ margin:0; }
.merch-featured-hint{
  margin: 4px 0 0;
  font-family: var(--font-hand);
  color: var(--orange-dark);
  font-size: 1.1rem;
}

/* ---------- merch: detail modal ---------- */
.merch-modal-overlay{
  position: fixed;
  inset: 0;
  background: rgba(13,29,48,.75);
  z-index: 300;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 24px;
}
.merch-modal-overlay[hidden]{ display:none; }
.merch-modal{
  background:#fff;
  border-radius: var(--radius);
  width: min(720px, 100%);
  max-height: 90vh;
  position: relative;
  display:grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,.4);
}
.merch-modal-close{
  position:absolute;
  top: 14px; right: 16px;
  z-index: 2;
  background: rgba(13,29,48,.55);
  color:#fff;
  border:none;
  border-radius: 50%;
  width: 36px; height: 36px;
  font-size: 1.4rem;
  line-height:1;
  cursor:pointer;
}
.merch-modal-photo{
  position:relative;
  background: var(--teal-light);
  aspect-ratio: 1;
  width: 100%;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}
.merch-modal-photo img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}
.merch-modal-photo img[hidden]{ display:none; }
.merch-modal-info{
  padding: 28px 30px;
  display:flex;
  flex-direction:column;
  gap: 12px;
  max-height: 90vh;
  overflow-y: auto;
}
.merch-modal-info h2{ margin:0; }
.merch-modal-desc{ color: var(--ink-soft); font-size: .96rem; line-height:1.6; }

/* ---------- gallery slideshow (auto-shuffling) ---------- */
.slideshow{
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  margin-bottom: 34px;
  background: var(--navy);
}
.slideshow-frame{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 7;
  min-height: 220px;
  background: #000;
}
.slideshow-img{
  position:absolute;
  inset: 0;
  width:100%;
  height:100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 1.1s ease;
}
.slideshow-img.is-active{ opacity: 1; }
.slideshow-caption{
  position:absolute;
  left:0; right:0; bottom:0;
  padding: 28px 22px 16px;
  background: linear-gradient(180deg, transparent, rgba(13,29,48,.85));
  color:#fff;
  font-family: var(--font-hand);
  font-size: 1.2rem;
  min-height: 20px;
}
.slideshow-pause{
  position:absolute;
  top: 14px; right: 14px;
  background: rgba(13,29,48,.55);
  color:#fff;
  border: none;
  border-radius: 50%;
  width: 38px; height:38px;
  cursor:pointer;
  font-size: .85rem;
  display:flex; align-items:center; justify-content:center;
}
.slideshow-pause:hover{ background: rgba(13,29,48,.8); }

/* ---------- lightbox ---------- */
.gallery-item{ cursor: pointer; }
.lightbox{
  position: fixed;
  inset: 0;
  background: rgba(13,29,48,.94);
  z-index: 200;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 40px;
}
.lightbox[hidden]{ display:none; }
.lightbox-figure{
  margin:0;
  max-width: min(900px, 90vw);
  max-height: 88vh;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.lightbox-img{
  max-width: 100%;
  max-height: 76vh;
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
  display:block;
}
.lightbox-img[hidden],
.lightbox-video-wrap[hidden]{
  display: none;
}
.lightbox-video-wrap{
  width: min(900px, 90vw);
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  overflow:hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.lightbox-video-wrap iframe{
  width:100%;
  height:100%;
  border:0;
  display:block;
}
.gallery-play-badge{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(13,29,48,.22);
  transition: background .15s ease;
}
.gallery-play-badge svg{
  width: 58px;
  height: auto;
  filter: drop-shadow(0 3px 8px rgba(0,0,0,.45));
  transition: transform .15s ease;
}
.gallery-item-video:hover .gallery-play-badge{ background: rgba(13,29,48,.35); }
.gallery-item-video:hover .gallery-play-badge svg{ transform: scale(1.08); }
.lightbox-toolbar{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 18px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.lightbox-caption{
  color:#fff;
  font-family: var(--font-hand);
  font-size: 1.25rem;
  text-align:center;
  min-height: 1.4em;
  margin: 0;
}
.lightbox-share{
  display:inline-flex;
  align-items:center;
  gap: 7px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.35);
  color:#fff;
  border-radius: 999px;
  padding: 7px 16px;
  font-family: var(--font-body);
  font-size: .88rem;
  font-weight:600;
  cursor:pointer;
  flex-shrink:0;
  transition: background .15s ease;
}
.lightbox-share:hover{ background: rgba(255,255,255,.26); }
.lightbox-toast{
  position:absolute;
  bottom: 28px;
  left:50%;
  transform: translateX(-50%);
  background: var(--gold);
  color: var(--navy);
  font-weight:700;
  font-size: .9rem;
  padding: 9px 20px;
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
}
.lightbox-toast[hidden]{ display:none; }
.lightbox-close{
  position:absolute;
  top: 20px; right: 24px;
  background:none;
  border:none;
  color:#fff;
  font-size: 2.2rem;
  line-height:1;
  cursor:pointer;
}
.lightbox-nav{
  position:absolute;
  top:50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,.12);
  border: none;
  color:#fff;
  width: 52px; height:52px;
  border-radius: 50%;
  font-size: 1.3rem;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.lightbox-nav:hover{ background: rgba(255,255,255,.25); }
.lightbox-prev{ left: 18px; }
.lightbox-next{ right: 18px; }

/* ---------- bylaws / regatta content ---------- */
.doc-content{
  background:#fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 44px;
  max-width: 800px;
  margin: 0 auto;
}
.doc-content h2{
  border-bottom: 2px solid var(--orange);
  padding-bottom: 8px;
  margin-top: 1.6em;
}
.doc-content h2:first-child{ margin-top:0; }
.doc-content .article-note{
  font-family: var(--font-hand);
  color: var(--orange-dark);
  font-size: 1.15rem;
}

.log-table{
  width:100%;
  border-collapse: collapse;
  margin: 20px 0;
}
.log-table th, .log-table td{
  border: 1px solid var(--teal-light);
  padding: 10px;
  text-align:left;
  font-size:.92rem;
}
.log-table th{ background: var(--teal); color:#fff; }

.riffraff-map-wrap{
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  border: 2px solid var(--navy);
  margin: 20px 0 10px;
}
#buoyMap{
  width: 100%;
  height: 420px;
}
.riffraff-map-caption{
  font-family: var(--font-hand);
  color: var(--orange-dark);
  font-size: 1.1rem;
  text-align:center;
  margin: 0 0 1.6em;
}
.leaflet-popup-content{ font-family: var(--font-body); }

.disclaimer-box{
  background: var(--cream-deep);
  border-left: 4px solid var(--orange);
  padding: 18px 22px;
  border-radius: 8px;
  font-size: .88rem;
  color: var(--ink-soft);
  margin-top: 30px;
}

/* ---------- admin ---------- */
.admin-panel{ max-width: 900px; margin: 0 auto; }
.admin-form{
  background:#fff;
  padding: 24px;
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  margin-bottom: 30px;
  display:grid;
  gap: 14px;
}
.form-grid-2col{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.admin-form label{ font-weight:700; font-size:.88rem; display:block; margin-bottom:4px; }
.admin-form input, .admin-form select, .admin-form textarea{
  width:100%;
  padding: 10px 12px;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: .95rem;
}
input[type="date"]{
  -webkit-appearance: none;
  appearance: none;
  background-color: #fff;
  box-sizing: border-box;
  color: var(--navy);
}
.admin-table{ width:100%; border-collapse: collapse; background:#fff; border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow-soft); }
.admin-table th, .admin-table td{ padding: 10px 14px; border-bottom: 1px solid var(--teal-light); text-align:left; font-size:.9rem; }
.admin-table th{ background: var(--navy); color:#fff; }
.admin-actions form{ display:inline; }
.flash{ padding: 12px 18px; border-radius: 8px; margin-bottom: 20px; font-weight:600; }
.flash.ok{ background:#DDF3E4; color:#1E6B3B; }
.flash.err{ background:#FBE0DC; color:#A6321B; }

/* ---------- rich text editor (mailing list composer) ---------- */
.rte-toolbar{
  display:flex;
  gap: 6px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.rte-toolbar button{
  background: var(--teal-light);
  border: 1px solid var(--teal);
  color: var(--teal);
  border-radius: 6px;
  padding: 6px 12px;
  font-size: .85rem;
  cursor: pointer;
  font-family: var(--font-body);
}
.rte-toolbar button:hover{ background: var(--teal); color:#fff; }
.rte-editor{
  min-height: 180px;
  padding: 14px 16px;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: .95rem;
  line-height: 1.6;
  color: var(--navy);
}
.rte-editor:empty::before{
  content: attr(data-placeholder);
  color: #999;
}
.rte-editor:focus{ outline: 2px solid var(--gold); outline-offset: 1px; }

/* ---------- mailing preview modal ---------- */
.mail-preview-overlay{
  position: fixed;
  inset: 0;
  background: rgba(13,29,48,.75);
  z-index: 300;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 24px;
}
.mail-preview-overlay[hidden]{ display:none; }
.mail-preview-modal{
  background:#fff;
  border-radius: var(--radius);
  width: min(680px, 100%);
  max-height: 92vh;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,.4);
}
.mail-preview-header{
  background: var(--navy);
  color:#fff;
  padding: 14px 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-family: var(--font-display);
  font-weight:700;
}
.mail-preview-header button{
  background:none;
  border:none;
  color:#fff;
  font-size: 1.6rem;
  line-height:1;
  cursor:pointer;
}
.mail-preview-body{
  flex: 1;
  overflow:auto;
  background: var(--cream-deep);
}
.mail-preview-body iframe{
  width:100%;
  height: 60vh;
  border:0;
  display:block;
}
.mail-preview-footer{
  padding: 14px 20px;
  border-top: 1px solid var(--teal-light);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  flex-wrap:wrap;
}
.mail-preview-note{ font-size:.8rem; color:var(--ink-soft); }

/* ---------- mailing list targeting controls ---------- */
.mail-target-options{
  display:flex;
  gap: 18px;
  flex-wrap: wrap;
  padding: 10px 0 4px;
}
.mail-target-options label{
  font-weight: 500;
  font-size: .92rem;
  display:flex;
  align-items:center;
  gap: 6px;
  cursor:pointer;
}
.mail-target-options input[type="radio"]{ width:auto; }
.mail-target-count{ color: var(--ink-soft); font-weight:400; }
.mail-specific-picker{
  margin-top: 10px;
  max-height: 220px;
  overflow-y: auto;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 10px 14px;
  background: var(--cream);
}
.mail-specific-row{
  display:flex;
  align-items:center;
  gap: 8px;
  padding: 6px 0;
  font-size: .9rem;
  cursor:pointer;
}
.mail-specific-row input[type="checkbox"]{ width:auto; }
.mail-specific-email{ color: var(--ink-soft); font-size: .82rem; }
.committee-badge{
  display:inline-block;
  background: var(--gold);
  color: var(--navy);
  font-size: .72rem;
  font-weight:700;
  padding: 2px 9px;
  border-radius: 999px;
}

/* ---------- gallery admin cards ---------- */
.gallery-admin-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 22px;
}
.gallery-admin-grid[hidden]{ display:none; }
.gallery-admin-card{
  background:#fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 14px;
  display:flex;
  flex-direction:column;
  gap: 10px;
}
.gallery-admin-thumb{
  width:100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 10px;
  display:block;
  background: var(--teal-light);
}
.gallery-admin-thumb-link{
  position: relative;
  display:block;
}
.gallery-admin-video-badge{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(13,29,48,.2);
  border-radius: 10px;
}
.gallery-admin-video-badge svg{
  width: 42px;
  height: auto;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.4));
}
.gallery-admin-rotate{
  display:flex;
  gap: 8px;
}
.gallery-admin-rotate form{ flex:1; }
.gallery-admin-rotate button{
  width:100%;
  background: var(--teal-light);
  border: 1px solid var(--teal);
  color: var(--teal);
  border-radius: 8px;
  padding: 7px 6px;
  font-size: .82rem;
  font-weight:600;
  cursor:pointer;
}
.gallery-admin-rotate button:hover{ background: var(--teal); color:#fff; }

.gallery-admin-reorder{
  display:flex;
  align-items:center;
  gap: 8px;
}
.gallery-admin-reorder form{ flex:1; }
.gallery-admin-reorder button{
  width:100%;
  background: var(--cream);
  border: 1px solid var(--navy);
  color: var(--navy);
  border-radius: 8px;
  padding: 6px 4px;
  font-size: .78rem;
  font-weight:600;
  cursor:pointer;
}
.gallery-admin-reorder button:hover:not(:disabled){ background: var(--navy); color:#fff; }
.gallery-admin-reorder button:disabled{ opacity: .35; cursor: not-allowed; }
.gallery-admin-position{
  flex-shrink: 0;
  font-size: .76rem;
  color: var(--ink-soft);
  white-space: nowrap;
}

/* ---------- gallery admin: Sort View ---------- */
.gallery-sort-toggle-row{
  display:flex;
  align-items:center;
  gap: 14px;
  margin: 24px 0 6px;
  flex-wrap: wrap;
}
.gallery-sort-hint{
  font-size: .85rem;
  color: var(--ink-soft);
  font-style: italic;
}

.gallery-save-all-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  flex-wrap: wrap;
  background: var(--teal-light);
  border: 1px solid var(--teal);
  border-radius: 10px;
  padding: 12px 18px;
  margin: 0 0 20px;
}
.gallery-save-all-bar span{
  font-size: .9rem;
  color: var(--navy);
}

.gallery-sort-list{
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
  background:#fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  overflow:hidden;
}
.gallery-sort-list[hidden]{ display:none; }
.gallery-sort-list.is-loading{ opacity: .55; pointer-events:none; }
.gallery-sort-item{
  display:flex;
  align-items:center;
  gap: 16px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--teal-light);
  background: #fff;
  cursor: grab;
}
.gallery-sort-item:last-child{ border-bottom:none; }
.gallery-sort-item.is-dragging{
  opacity: .4;
  cursor: grabbing;
}
.gallery-sort-handle{
  flex-shrink: 0;
  font-size: 1.2rem;
  color: var(--ink-soft);
  line-height:1;
  user-select: none;
}
.gallery-sort-item img{
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: 10px;
  flex-shrink: 0;
}
.gallery-sort-label{
  flex:1;
  font-size: .92rem;
  color: var(--navy);
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gallery-sort-controls{
  display:flex;
  gap: 6px;
  flex-shrink: 0;
}
.gallery-sort-controls button{
  width: 34px; height: 34px;
  background: var(--cream);
  border: 1px solid var(--navy);
  color: var(--navy);
  border-radius: 8px;
  font-size: 1rem;
  cursor: pointer;
}
.gallery-sort-controls button:hover{ background: var(--navy); color:#fff; }
.gallery-admin-details-form{
  display:flex;
  flex-direction: column;
  gap: 8px;
}
.gallery-admin-details-form input[type="text"],
.gallery-admin-details-form input[type="date"],
.gallery-admin-details-form select{
  width:100%;
  padding: 9px 10px;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: .9rem;
  background: #fff;
}
.gallery-admin-event-select{ border-color: var(--gold) !important; }
.gallery-admin-event-row{
  display:grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 8px;
}
.gallery-admin-details-form button{
  background: none;
  border: 1px solid var(--teal);
  color: var(--teal);
  border-radius: 8px;
  padding: 7px 14px;
  cursor:pointer;
  font-size: .85rem;
  font-weight:700;
  white-space: nowrap;
}
.gallery-admin-details-form button:hover{ background: var(--teal); color:#fff; }
.gallery-admin-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size: .82rem;
  color: var(--ink-soft);
}
.gallery-admin-delete{
  background:none;
  border:none;
  color: var(--orange-dark);
  cursor:pointer;
  font-weight:700;
  font-size: .82rem;
  padding:0;
}

/* ---------- responsive ---------- */
@media (max-width: 880px){
  .hero .container{ grid-template-columns: 1fr; text-align:center; }
  .hero-actions{ justify-content:center; }
  .card-grid{ grid-template-columns: 1fr; }
  .footer-grid{ grid-template-columns: 1fr; }
  .gallery-grid{ grid-template-columns: repeat(2,1fr); }
  .event-row{ grid-template-columns: 1fr; }
  .event-row.has-image{ grid-template-columns: 1fr; }
  .event-row-photo{ width:100%; height:180px; }
  .form-grid-2col{ grid-template-columns: 1fr; }
  .newsletter-viewer{ padding: 20px 16px; }
  .newsletter-canvas-wrap{ padding: 10px; min-height: 240px; max-height: 70vh; }
  .newsletter-list-item{ flex-direction:column; align-items:flex-start; text-align:left; }
  .newsletter-list-actions{ width:100%; }
  .newsletter-list-actions .btn{ flex:1; text-align:center; display:flex; align-items:center; justify-content:center; }
  nav.main-nav{
    display:none;
    position: absolute;
    top: 100%; left:0; right:0;
    background: var(--cream);
    border-bottom: 3px solid var(--navy);
    padding: 10px 24px 18px;
  }
  nav.main-nav.open{ display:block; }
  nav.main-nav ul{ flex-direction:column; }
  .nav-toggle{ display:inline-block; }
  .calendar td{ height:auto; min-height:56px; font-size:.72rem; }
  .doc-content{ padding: 26px; }
  .slideshow-frame{ aspect-ratio: 4 / 5; }
  .merch-featured-inner{ grid-template-columns: 1fr; }
  .merch-modal{ grid-template-columns: 1fr; max-height: 92vh; overflow-y: auto; }
  .merch-modal-photo{ aspect-ratio: 4/3; }
  .merch-modal-info{ max-height: none; overflow-y: visible; }
  #buoyMap{ height: 320px; }
  .lightbox{ padding: 16px; }
  .lightbox-nav{ width: 42px; height:42px; font-size: 1.1rem; }
  .lightbox-prev{ left: 6px; }
  .lightbox-next{ right: 6px; }
  .lightbox-close{ top: 10px; right: 14px; font-size: 1.9rem; }
}