/* Cards, grids, membership, newsletter, logbook, founder campaign */

.section,
section { padding: 88px 0; }

.cream-section { background: var(--cream-light); }

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 28px;
  margin-bottom: 34px;
}

.section-head .kicker {
  color: var(--copper);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .15em;
  font-size: 12px;
  margin-bottom: 10px;
}

.section-head p {
  max-width: 490px;
  margin: 0;
  color: rgba(23,49,61,.72);
  font-size: 17px;
}

.kicker {
  color: var(--copper);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .15em;
  font-size: 12px;
  margin-bottom: 10px;
}

.product-grid,
.story-grid,
.merch-grid,
.post-grid,
.social-grid {
  display: grid;
  gap: 22px;
}

.product-grid { grid-template-columns: repeat(3, 1fr); }
.story-grid { grid-template-columns: repeat(3, 1fr); }
.merch-grid { grid-template-columns: repeat(4, 1fr); }
.post-grid { grid-template-columns: repeat(3, 1fr); }
.social-grid { grid-template-columns: repeat(3, 1fr); }

.card {
  background: var(--paper);
  border: 1px solid rgba(23,57,73,.12);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 16px 38px rgba(23,57,73,.08);
}

.card-body { padding: 24px; }

.price-line {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  margin: 15px 0 20px;
  color: var(--brown);
  font-weight: 900;
}

.card p { color: rgba(23,49,61,.7); margin: 10px 0 0; }

.photo-card {
  height: 240px;
  position: relative;
  overflow: hidden;
  background: #517b84;
}

.photo-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 35%, transparent 0 38%, rgba(8,27,35,.36) 100%);
}

.mini-ocean {
  background:
    radial-gradient(circle at 74% 24%, rgba(242,204,126,.8), transparent 12%),
    linear-gradient(180deg, #dbad71 0 25%, #7a9894 26% 45%, #29556a 100%);
}

.mini-dock {
  background:
    linear-gradient(180deg, rgba(23,57,73,.25), rgba(23,57,73,.72)),
    repeating-linear-gradient(90deg, #7c5940 0 42px, #6b4b35 42px 48px),
    linear-gradient(180deg, #e7c88d 0 40%, #456b70 41% 100%);
}

.mini-camp {
  background:
    radial-gradient(circle at 25% 26%, rgba(255,235,167,.7), transparent 15%),
    linear-gradient(180deg, #d3945f 0 34%, #264d52 35% 68%, #452f26 69% 100%);
}

.mini-bale {
  position: absolute;
  width: 92px;
  height: 62px;
  border-radius: 13px;
  background: linear-gradient(90deg,#a98658,#d1b37a,#8f6b49);
  left: 50%;
  top: 53%;
  transform: translate(-50%,-50%) rotate(-8deg);
  box-shadow: 0 18px 24px rgba(0,0,0,.3);
  z-index: 2;
}

.mini-bale.two { left: 70%; top: 42%; transform: translate(-50%,-50%) rotate(12deg) scale(.78); opacity: .85; }
.mini-bale::after { content: "SGC"; position: absolute; inset: 0; display: grid; place-items: center; color: rgba(23,57,73,.62); font-family: var(--capstone); letter-spacing: .1em; }

.mug {
  position: absolute;
  left: 50%;
  top: 48%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 86px;
  height: 70px;
  border-radius: 0 0 22px 22px;
  background: var(--cream);
  box-shadow: 0 18px 24px rgba(0,0,0,.24);
}

.mug::after {
  content: "";
  position: absolute;
  right: -22px;
  top: 14px;
  width: 32px;
  height: 32px;
  border: 8px solid var(--cream);
  border-left: 0;
  border-radius: 0 20px 20px 0;
}

.steam {
  position: absolute;
  width: 12px;
  height: 54px;
  border-radius: 50%;
  border-left: 3px solid rgba(255,255,255,.65);
  z-index: 3;
  top: 48px;
}

.s1 { left: 45%; }
.s2 { left: 51%; top: 38px; }
.s3 { left: 57%; }

.patch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(82,127,104,.12);
  color: var(--green);
  font-size: 11px;
  letter-spacing: .1em;
  font-weight: 900;
  text-transform: uppercase;
}

.founders,
.bundle-section {
  background: var(--navy);
  color: var(--cream-light);
  position: relative;
  overflow: hidden;
}

.founders::before,
.bundle-section::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .16;
  background-image:
    radial-gradient(circle at 18% 20%, rgba(230,199,121,.55), transparent 18rem),
    linear-gradient(90deg, rgba(240,228,208,.07) 1px, transparent 1px),
    linear-gradient(rgba(240,228,208,.05) 1px, transparent 1px);
  background-size: auto, 46px 46px, 46px 46px;
}

.founders .wrap,
.bundle-section .wrap { position: relative; z-index: 1; }
.founders h2, .founders h3,
.bundle-section h2 { color: var(--cream-light); }
.founders .section-head p,
.bundle-section .section-head p { color: rgba(248,242,231,.75); }

.membership-grid,
.bundle-grid,
.split,
.newsletter-box,
.featured-grid,
.submit-grid {
  display: grid;
  gap: 26px;
  align-items: stretch;
}

.membership-grid { grid-template-columns: .9fr 1.1fr; }
.bundle-grid { grid-template-columns: repeat(2, 1fr); }
.split { grid-template-columns: 1.05fr .95fr; align-items: center; }
.newsletter-box { grid-template-columns: 1fr .88fr; align-items: center; }

.membership-card,
.bundle-card {
  border-radius: var(--radius-lg);
  padding: 30px;
  border: 1px solid rgba(240,228,208,.18);
  background: rgba(240,228,208,.08);
  box-shadow: 0 24px 54px rgba(0,0,0,.18);
}

.membership-card.featured { background: var(--cream); color: var(--navy); }
.membership-card.featured h3 { color: var(--navy); }

.bundle-card {
  background: var(--paper);
  color: var(--ink);
  overflow: hidden;
  padding: 0;
}

.bundle-card.featured { transform: translateY(-12px); }

.member-top,
.bundle-top {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 18px;
  margin-bottom: 12px;
}

.bundle-top {
  border-bottom: 1px solid rgba(23,57,73,.12);
  padding-bottom: 22px;
  margin-bottom: 22px;
}

.member-price,
.price { font-family: var(--capstone); font-size: 42px; line-height: .95; color: var(--copper); }

.member-limit {
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 900;
  color: var(--tan);
}

.featured .member-limit { color: var(--brown); }

.benefits,
.bundle-body ul {
  list-style: none;
  padding: 0;
  margin: 22px 0;
  display: grid;
  gap: 10px;
}

.benefits li,
.bundle-body li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.benefits li::before { content: "✦"; color: var(--tan); flex: 0 0 auto; }
.featured .benefits li::before { color: var(--copper); }
.bundle-body li::before { content: "⚓"; color: var(--green); font-size: 14px; margin-top: 2px; }

.bundle-body { padding: 32px; }

.story-panel {
  border-radius: var(--radius-lg);
  padding: 42px;
  background: var(--paper);
  border: 1px solid rgba(23,57,73,.11);
  box-shadow: var(--shadow);
}

.story-panel p { font-size: 18px; color: rgba(23,49,61,.72); }

.pullquote {
  border-left: 6px solid var(--copper);
  padding-left: 18px;
  margin: 26px 0;
  font-family: var(--capstone);
  font-size: 26px;
  line-height: 1.05;
  color: var(--navy);
}

.story-photo {
  height: 520px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  box-shadow: var(--shadow);
  background:
    radial-gradient(circle at 68% 20%, rgba(245,210,139,.9), transparent 11rem),
    linear-gradient(180deg, #d99e66 0 24%, #799d9a 25% 46%, #183949 100%);
}

.log-card {
  min-height: 330px;
  padding: 24px;
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  justify-content: end;
  color: var(--cream-light);
  position: relative;
  overflow: hidden;
  box-shadow: 0 16px 38px rgba(23,57,73,.12);
}

.log-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(180deg, transparent, rgba(14,43,56,.88));
}

.log-card > * { position: relative; z-index: 1; }
.log-card h3 { color: var(--cream-light); font-size: 28px; }
.log-card p { color: rgba(248,242,231,.78); }

.bg-bales {
  background:
    radial-gradient(circle at 72% 24%, rgba(241,204,127,.8), transparent 8rem),
    linear-gradient(180deg,#ca8656 0 24%,#608c8a 25% 50%, #173949 100%);
}

.bg-rope {
  background:
    linear-gradient(180deg, rgba(23,57,73,.05), rgba(23,57,73,.92)),
    repeating-linear-gradient(35deg, #8a6543 0 17px, #715137 17px 26px);
}

.bg-galley {
  background:
    linear-gradient(180deg, rgba(23,57,73,.08), rgba(23,57,73,.92)),
    radial-gradient(circle at 45% 30%, #f0e4d0 0 3.4rem, transparent 3.5rem),
    linear-gradient(180deg,#d99a61,#24515d);
}

.newsletter-box {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid rgba(23,57,73,.11);
  box-shadow: var(--shadow);
  background: var(--cream);
}

.newsletter-copy { padding: 48px; }
.newsletter-copy h2 { font-size: clamp(38px, 5vw, 64px); }

.signup {
  display: flex;
  gap: 10px;
  margin-top: 26px;
  max-width: 590px;
}

.signup input {
  flex: 1;
  min-height: 52px;
  border-radius: 999px;
  border: 2px solid rgba(23,57,73,.18);
  background: #fff8ed;
  padding: 0 20px;
  font-weight: 700;
  color: var(--navy);
  outline: none;
}

.newsletter-photo {
  height: 100%;
  min-height: 430px;
  position: relative;
  background:
    radial-gradient(circle at 70% 24%, rgba(255,223,156,.86), transparent 8rem),
    linear-gradient(180deg,#d69860 0 24%, #5f8584 25% 54%, #173949 100%);
}

.social-feed { padding: 0 0 88px; }
.social-card {
  min-height: 220px;
  border-radius: var(--radius-md);
  background: var(--paper);
  border: 1px solid rgba(23,57,73,.12);
  display: grid;
  place-items: center;
  color: rgba(23,49,61,.6);
  padding: 24px;
  text-align: center;
}

/* Logbook archive (V2 posts page) */
.sg-logbook-archive .hero-logbook {
  background: var(--navy);
  color: var(--cream-light);
  padding: 0;
}

.sg-logbook-archive .hero-inner {
  min-height: 560px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, .78fr);
  gap: 50px;
  align-items: center;
  padding: 70px 0;
}

.sg-logbook-archive .hero-copy {
  color: rgba(255,248,234,.84);
  font-size: 1.18rem;
  max-width: 660px;
  margin: 24px 0 30px;
}

.sg-logbook-archive .hero-visual {
  position: relative;
  min-height: 490px;
  border: 1px solid rgba(244,234,216,.25);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 34px 90px rgba(0,0,0,.34);
  background:
    linear-gradient(180deg, rgba(255,211,139,.52), transparent 25%),
    linear-gradient(180deg, #7c918b 0%, #1d5260 52%, #0d2b36 100%);
}

.content-band { padding: 88px 0; }

.post-card {
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--paper);
  border: 1px solid rgba(23,57,73,.12);
  box-shadow: 0 16px 38px rgba(23,57,73,.08);
  display: grid;
  grid-template-rows: 190px 1fr;
}

.post-image {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 26% 22%, rgba(255,248,236,.72), transparent 5rem),
    linear-gradient(180deg, #d18a4c 0, #66888a 38%, #1b5260 100%);
}

.post-body { padding: 26px; }

.post-meta {
  display: inline-flex;
  color: var(--copper);
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: .1em;
  font-weight: 900;
  margin-bottom: 10px;
}

.post-body h3 {
  margin: 0 0 8px;
  font-size: 1.3rem;
  line-height: 1;
  text-transform: uppercase;
}

.small-link { color: var(--copper); font-weight: 700; }

.faq-grid { display: grid; gap: 14px; }

.faq-grid details {
  background: var(--paper);
  border: 1px solid rgba(23,57,73,.13);
  border-radius: 22px;
  box-shadow: 0 10px 26px rgba(14,43,56,.07);
  overflow: hidden;
}

.faq-grid summary {
  list-style: none;
  padding: 20px 24px;
  cursor: pointer;
  font-weight: 900;
  color: var(--navy);
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: center;
}

.faq-grid summary::-webkit-details-marker { display: none; }
.faq-grid summary::after { content: "+"; font-family: var(--capstone); font-size: 28px; color: var(--copper); line-height: 1; }
.faq-grid details[open] summary::after { content: "–"; }
.faq-grid details p { padding: 0 24px 22px; color: rgba(23,49,61,.72); }

.page-content {
  background: var(--paper);
  border-radius: var(--radius-lg);
  padding: 42px;
  border: 1px solid rgba(23,57,73,.11);
  box-shadow: var(--shadow);
}

.post-nav {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid rgba(23,57,73,.12);
}

.contact-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 16px;
}