/* ============================================
   Jigsaw & Gist — Be Trusted tier build
   Font stack: More Sugar (display, self-hosted) /
   Nunito Sans (body) / Manrope (structure)
   ============================================ */

@font-face {
  font-family: "More Sugar";
  src: url("../fonts/MoreSugar-Regular.otf") format("opentype"),
       url("../fonts/MoreSugar-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "More Sugar";
  src: url("../fonts/MoreSugar-Thin.otf") format("opentype"),
       url("../fonts/MoreSugar-Thin.ttf") format("truetype");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Brand palette */
  --deep-plum: #3F235E;
  --royal-purple: #6B3FA0;
  --lavender-mist: #E9DDF7;
  --warm-cream: #FFF9F4;
  --puzzle-sage: #B8D8C2;
  --cosy-blush: #F8E7EA;
  --gist-coral: #FF8FA3;
  --butter-yellow: #F6DFA4;

  /* Working tones derived from the palette */
  --text-body: #3A2C4A;
  --text-muted: #6B5C7C;
  --border-soft: #E3D6F0;
  --white: #FFFFFF;

  /* Type */
  --font-display: "More Sugar", "Nunito Sans", sans-serif;
  --font-body: "Nunito Sans", sans-serif;
  --font-structure: "Manrope", sans-serif;

  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 10px;
  --shadow-soft: 0 12px 32px rgba(63, 35, 94, 0.10);
  --container-width: 1160px;

  /* Single jigsaw-piece silhouette, used as a CSS mask so it can be
     recoloured per instance via background-color */
  --puzzle-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M0,0 L100,0 L100,35 A15,15 0 0,1 100,65 L100,100 L0,100 L0,65 A15,15 0 0,0 0,35 Z'/%3E%3C/svg%3E");
}

.puzzle-shape {
  -webkit-mask-image: var(--puzzle-mask);
  mask-image: var(--puzzle-mask);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.15rem;
  color: var(--text-body);
  background: var(--warm-cream);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-display);
  color: var(--deep-plum);
  line-height: 1.15;
  margin: 0 0 0.5em;
  font-weight: 400;
}

h1 { font-size: clamp(2.4rem, 5vw, 3.6rem); }
h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
h3 { font-size: clamp(1.25rem, 2.2vw, 1.6rem); }

p { margin: 0 0 1em; }

a { color: var(--royal-purple); }

img { max-width: 100%; display: block; }

.container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Skip link ---------- */
.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--deep-plum);
  color: var(--white);
  padding: 12px 20px;
  border-radius: 0 0 8px 0;
  z-index: 1000;
  font-family: var(--font-structure);
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus {
  left: 0;
}

/* ---------- Focus visibility (WCAG AA) ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.nav-toggle:focus-visible {
  outline: 3px solid var(--royal-purple);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- Announcement bar ---------- */
.announce-bar {
  display: block;
  background: var(--royal-purple);
  color: var(--white);
  text-align: center;
  padding: 10px 16px;
  font-family: var(--font-structure);
  font-weight: 600;
  font-size: 0.88rem;
  text-decoration: none;
}
.announce-bar:hover { background: var(--deep-plum); }

/* ---------- Header / nav ---------- */
.site-header {
  background: var(--warm-cream);
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid var(--border-soft);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  padding-bottom: 14px;
}
.logo-link { display: flex; align-items: center; }
.logo-link img { height: 34px; width: auto; }

.nav-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 1.8rem;
  color: var(--deep-plum);
  cursor: pointer;
  line-height: 1;
}

.nav-links {
  list-style: none;
  display: flex;
  gap: 28px;
  margin: 0;
  padding: 0;
  font-family: var(--font-structure);
  font-weight: 600;
  font-size: 0.95rem;
}
.nav-links a {
  color: var(--deep-plum);
  text-decoration: none;
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
}
.nav-links a:hover,
.nav-links a[aria-current="page"] {
  border-bottom-color: var(--royal-purple);
}

/* Groups nav-links + header-socials so the header keeps a clean two-item
   flex split (logo | everything-else) at any width. On mobile this wrapper
   is neutralised with display:contents so nav-links (position:absolute)
   and the hidden header-socials behave exactly as if they were direct
   children of .site-header .container again. */
.nav-group {
  display: flex;
  align-items: center;
}
@media (max-width: 1040px) {
  .nav-group { display: contents; }
}

.header-socials {
  display: none;
  list-style: none;
  align-items: center;
  gap: 14px;
  margin: 0 0 0 22px;
  padding: 0 0 0 22px;
  border-left: 2px solid var(--border-soft);
}
@media (min-width: 1041px) {
  .header-socials { display: flex; }
}
.header-socials a {
  display: flex;
  color: var(--deep-plum);
  transition: color 0.15s ease, transform 0.15s ease;
}
.header-socials a:hover {
  color: var(--royal-purple);
  transform: translateY(-2px);
}
.header-socials svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

/* ---------- Buttons (sticker style: solid border + hard offset shadow) ---------- */
.btn {
  display: inline-block;
  font-family: var(--font-structure);
  font-weight: 700;
  font-size: 1rem;
  padding: 14px 30px;
  border-radius: 999px;
  text-decoration: none;
  border: 2px solid var(--deep-plum);
  box-shadow: 4px 4px 0 var(--butter-yellow);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.btn:hover {
  transform: translate(3px, 3px);
  box-shadow: 1px 1px 0 var(--butter-yellow);
}
.btn:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--butter-yellow); }
/* A little extra snap on click, layered on top of the press-into-shadow
   hover above — added/removed by main.js after each click so it plays
   out fully even on buttons that navigate away immediately. */
@keyframes btn-pop {
  0% { transform: scale(1); }
  35% { transform: scale(0.93); }
  65% { transform: scale(1.06); }
  100% { transform: scale(1); }
}
.btn.btn-pop { animation: btn-pop 0.32s ease; }

.btn-primary {
  background: var(--royal-purple);
  color: var(--white);
}
.btn-primary:hover { background: var(--deep-plum); }

.btn-secondary {
  background: var(--white);
  color: var(--deep-plum);
}
.btn-secondary:hover { background: var(--lavender-mist); }

.btn-outline {
  background: var(--white);
  color: var(--royal-purple);
}
.btn-outline:hover { background: var(--lavender-mist); }

.btn-sm { padding: 10px 20px; font-size: 0.9rem; }

/* ---------- Hero ---------- */
.hero {
  padding: 72px 0 24px;
  position: relative;
  overflow: hidden;
}
/* The section right after a hero sits closest to the eyebrow/h1/hero-sub
   block, so it gets a smaller top padding than section-to-section gaps
   further down the page keep — otherwise short heroes (no buttons or
   photo, just the sub-line) leave an oversized gap before the first
   line of body copy. */
.hero + section {
  padding-top: 24px;
}
/* community.html's paragraph section is the one hero-adjacent section that's
   a real multi-paragraph block rather than a short sub-line — the tightened
   .hero + section top padding paired with the full default bottom padding
   left its text looking pushed toward the top instead of centred. Bring the
   bottom down to match. */
.community-intro {
  padding-bottom: 24px;
}
/* Puzzle-shaped background blobs removed for now — re-enable by uncommenting.
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  -webkit-mask-image: var(--puzzle-mask);
  mask-image: var(--puzzle-mask);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.hero::before {
  width: 220px;
  height: 220px;
  background: var(--butter-yellow);
  opacity: 0.4;
  top: -50px;
  right: -40px;
  transform: rotate(-18deg);
}
.hero::after {
  width: 150px;
  height: 150px;
  background: var(--gist-coral);
  opacity: 0.28;
  bottom: -40px;
  left: -30px;
  transform: rotate(30deg);
}
*/
.hero .container { position: relative; z-index: 1; }
.hero .eyebrow {
  font-family: var(--font-structure);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.8rem;
  color: var(--deep-plum);
  font-weight: 700;
  margin-bottom: 16px;
  display: inline-block;
  background: var(--butter-yellow);
  padding: 7px 14px;
  border-radius: 8px;
  transform: rotate(-1deg);
}
.hero-sub {
  font-size: 1.15rem;
  color: var(--text-muted);
  max-width: 46ch;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 28px;
}
.hero-photo-placeholder {
  margin-top: 40px;
}
/* Only the Home hero has a photo — pairs the text with it side by side
   without touching every other page's plain, single-column .hero .container. */
.hero-with-photo .container {
  display: flex;
  align-items: center;
  gap: 48px;
}
.hero-text {
  flex: 1;
  min-width: 0;
}
.hero-with-photo .hero-photo-placeholder {
  margin-top: 0;
  flex-shrink: 0;
  width: 380px;
}
@media (max-width: 880px) {
  .hero-with-photo .container {
    flex-direction: column;
    align-items: flex-start;
  }
  .hero-with-photo .hero-photo-placeholder {
    margin-top: 32px;
    width: 100%;
  }
}
.hero-photo {
  display: block;
  width: 100%;
  max-width: 480px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: 2px solid var(--deep-plum);
  border-radius: var(--radius-md);
  box-shadow: 6px 6px 0 var(--butter-yellow);
}

/* ---------- Placeholder / honesty tagging ---------- */
.placeholder-photo {
  background: repeating-linear-gradient(
    135deg,
    var(--lavender-mist),
    var(--lavender-mist) 12px,
    #f3ecfb 12px,
    #f3ecfb 24px
  );
  border: 2px dashed var(--royal-purple);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--deep-plum);
  font-family: var(--font-structure);
  font-weight: 600;
  font-size: 0.9rem;
  text-align: center;
  padding: 20px;
  min-height: 220px;
}

.placeholder-tag {
  display: inline-block;
  font-family: var(--font-structure);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--butter-yellow);
  color: #5C4A16;
  border: 1px dashed #B8912E;
  border-radius: 999px;
  padding: 4px 12px;
  margin-bottom: 10px;
}

/* ---------- Trust strip ---------- */
.trust-strip {
  background: var(--lavender-mist);
  background-image: radial-gradient(circle, rgba(107, 63, 160, 0.12) 2px, transparent 2px);
  background-size: 22px 22px;
  padding: 22px 0;
}
.trust-strip .container {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
  font-family: var(--font-structure);
  font-size: 0.95rem;
  color: var(--deep-plum);
}

/* ---------- Generic sections ---------- */
section { padding: 64px 0; }
.section-cream { background: var(--warm-cream); }
.section-lavender { background: var(--lavender-mist); }
.section-sage { background: var(--puzzle-sage); }
.section-blush { background: var(--cosy-blush); }
.section-plum { background: var(--deep-plum); color: var(--white); }
.section-plum h1, .section-plum h2, .section-plum h3 { color: var(--white); }
.section-plum .btn-secondary {
  color: var(--deep-plum);
  background: var(--warm-cream);
  border-color: var(--warm-cream);
  box-shadow: 4px 4px 0 var(--gist-coral);
}
.section-plum .btn-secondary:hover {
  background: var(--butter-yellow);
  border-color: var(--butter-yellow);
  box-shadow: 1px 1px 0 var(--gist-coral);
}

/* ---------- Newsletter ---------- */
.newsletter-section {
  position: relative;
  overflow: hidden;
}
/* Puzzle-shaped background blob removed for now — re-enable by uncommenting.
.newsletter-section::before {
  content: "";
  position: absolute;
  width: 200px;
  height: 200px;
  background: var(--butter-yellow);
  opacity: 0.18;
  top: -60px;
  right: 60px;
  transform: rotate(15deg);
  -webkit-mask-image: var(--puzzle-mask);
  mask-image: var(--puzzle-mask);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  pointer-events: none;
  z-index: 0;
}
*/
.newsletter-section .container { position: relative; z-index: 1; }
.newsletter-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.newsletter-inner h2 { margin-bottom: 6px; }
.newsletter-inner p {
  color: var(--lavender-mist);
  margin: 0;
  max-width: 46ch;
}

/* ---------- Single offer (Puzzle Social) ---------- */
.single-offer {
  max-width: 380px;
  margin: 36px auto 0;
}

/* ---------- Puzzle Partners ---------- */
.puzzle-partners .partners-inner {
  display: flex;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
}
.partners-logo-link {
  display: block;
  flex-shrink: 0;
}
.partners-logo {
  width: 180px;
  height: auto;
  transition: transform 0.15s ease;
}
.partners-logo-link:hover .partners-logo { transform: scale(1.04); }
.puzzle-partners h2 { margin-bottom: 10px; }
.puzzle-partners p {
  color: var(--text-muted);
  margin: 0;
  max-width: 60ch;
}
.puzzle-partners p + p {
  margin-top: 14px;
}

/* ---------- Bio (About page, "A bit about me") ---------- */
.bio-layout {
  display: flex;
  gap: 32px;
  align-items: flex-start;
  flex-wrap: wrap;
}
.bio-photo {
  width: 220px;
  height: 260px;
  object-fit: cover;
  border-radius: var(--radius-md);
  border: 2px solid var(--deep-plum);
  box-shadow: 6px 6px 0 var(--butter-yellow);
  flex-shrink: 0;
}
.bio-content {
  flex: 1;
  min-width: 260px;
}
.bio-content h2 { margin-top: 0; }
@media (max-width: 600px) {
  .bio-layout { flex-direction: column; align-items: center; text-align: center; }
  .bio-photo { width: 200px; height: 240px; }
}

.section-intro {
  max-width: 60ch;
  margin: 0 0 40px;
}
.section-intro p { color: var(--text-muted); }

/* ---------- Steps ---------- */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 40px;
}
.step-card {
  --card-shadow: var(--puzzle-sage);
  background: var(--white);
  border: 2px solid var(--deep-plum);
  border-radius: var(--radius-md);
  padding: 28px;
  box-shadow: 6px 6px 0 var(--card-shadow);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.step-card:hover {
  transform: translate(-3px, -3px) rotate(-0.5deg);
  box-shadow: 9px 9px 0 var(--card-shadow);
}
.step-card:nth-child(3n+1) { --card-shadow: var(--puzzle-sage); }
.step-card:nth-child(3n+2) { --card-shadow: var(--cosy-blush); }
.step-card:nth-child(3n+3) { --card-shadow: var(--butter-yellow); }
.step-number {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--deep-plum);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  margin-bottom: 14px;
}
.step-card:nth-child(3n+1) .step-number { background: var(--puzzle-sage); }
.step-card:nth-child(3n+2) .step-number { background: var(--cosy-blush); }
.step-card:nth-child(3n+3) .step-number { background: var(--butter-yellow); }

/* ---------- Card grids ---------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 28px;
  margin-top: 36px;
}
.offer-card, .story-card {
  --card-shadow: var(--puzzle-sage);
  background: var(--white);
  border: 2px solid var(--deep-plum);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 6px 6px 0 var(--card-shadow);
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.offer-card:hover, .story-card:hover {
  transform: translate(-3px, -3px) rotate(var(--card-tilt, -0.6deg));
  box-shadow: 9px 9px 0 var(--card-shadow);
}
.offer-card:nth-child(even), .story-card:nth-child(even) { --card-tilt: 0.6deg; }
.offer-card:nth-child(4n+1), .story-card:nth-child(3n+1) { --card-shadow: var(--puzzle-sage); }
.offer-card:nth-child(4n+2), .story-card:nth-child(3n+2) { --card-shadow: var(--cosy-blush); }
.offer-card:nth-child(4n+3), .story-card:nth-child(3n+3) { --card-shadow: var(--butter-yellow); }
.offer-card:nth-child(4n+4) { --card-shadow: var(--lavender-mist); }
.offer-card-body, .story-card-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.offer-meta {
  display: flex;
  gap: 14px;
  font-family: var(--font-structure);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--royal-purple);
}
.offer-card .placeholder-photo,
.story-card .placeholder-photo {
  min-height: 160px;
  border-radius: 0;
  border-width: 0 0 2px 0;
}

/* ---------- Events ---------- */
.event-date {
  display: inline-block;
  font-family: var(--font-structure);
  font-weight: 700;
  color: var(--white);
  background: var(--gist-coral);
  border-radius: 999px;
  padding: 5px 14px;
  font-size: 0.82rem;
  width: fit-content;
}
/* Static-first event promo: a square poster image (swapped monthly) is the
   entire event listing, rather than a text breakdown that needs updating
   every time. Both the poster and the button below link to the same
   booking page. */
.event-poster {
  max-width: 520px;
  margin: 0 auto;
  text-align: center;
}
.event-poster-link {
  display: block;
}
.event-poster-photo {
  aspect-ratio: 1 / 1;
  width: 100%;
  min-height: 0;
  display: block;
  border: 2px solid var(--deep-plum);
  border-radius: var(--radius-md);
  box-shadow: 6px 6px 0 var(--gist-coral);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.event-poster-link:hover .event-poster-photo {
  transform: translate(-3px, -3px);
  box-shadow: 9px 9px 0 var(--gist-coral);
}
.event-luma-embed {
  display: block;
  width: 100%;
  max-width: 600px;
  height: 450px;
  margin: 0 auto;
}
@media (max-width: 480px) {
  .event-luma-embed { height: 380px; }
}
.event-poster .event-closing {
  margin: 24px 0 20px;
}
.event-closing {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--deep-plum);
}
.workshops-note {
  max-width: 760px;
  margin-top: 48px;
}
.workshops-note p { color: var(--text-muted); }

/* ---------- FAQ ---------- */
.faq-list { margin-top: 32px; }
.faq-item {
  border-bottom: 1px solid var(--border-soft);
  padding: 18px 0;
}
.faq-item summary {
  font-family: var(--font-structure);
  font-weight: 700;
  color: var(--deep-plum);
  cursor: pointer;
  font-size: 1.05rem;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  font-size: 1.4rem;
  color: var(--royal-purple);
  margin-left: 12px;
}
.faq-item[open] summary::after { content: "\2212"; }
.faq-item p { margin-top: 12px; color: var(--text-muted); }

/* ---------- Quote / story cards ---------- */
.story-card blockquote {
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--deep-plum);
  margin: 0;
}
.story-card cite {
  font-style: normal;
  font-family: var(--font-structure);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* ---------- Forms ---------- */
.form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 20px;
}
.form-field label {
  font-family: var(--font-structure);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--deep-plum);
}
.form-field input,
.form-field select,
.form-field textarea {
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 12px 14px;
  border: 2px solid var(--deep-plum);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--text-body);
  box-shadow: 3px 3px 0 var(--lavender-mist);
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  border-color: var(--royal-purple);
  box-shadow: 3px 3px 0 var(--butter-yellow);
  outline: none;
}
.form-note {
  font-size: 0.85rem;
  color: var(--text-muted);
}
.checkbox-field {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 20px;
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--text-body);
  cursor: pointer;
}
.checkbox-field input[type="checkbox"] {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 2px;
  accent-color: var(--royal-purple);
  cursor: pointer;
}
.newsletter-signoff {
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--deep-plum);
  margin-top: 20px;
}
.form-success-message {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--deep-plum);
}
.form-error-message {
  font-family: var(--font-structure);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--gist-coral);
  margin-top: 16px;
}
.form-error-message a { color: inherit; }

/* ---------- Footer (rounded card inside the plum band) ---------- */
.site-footer {
  background: var(--deep-plum);
  color: var(--text-body);
  padding: 40px 0;
  margin-top: 0;
}
.site-footer .container {
  background: var(--warm-cream);
  border-radius: var(--radius-lg);
  padding: 40px 36px 26px;
}
.site-footer a { color: var(--deep-plum); }
.footer-top {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 32px;
  margin-bottom: 32px;
}
.footer-brand img { height: 30px; margin-bottom: 12px; }
.footer-signoff {
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--deep-plum);
}
/* On desktop the nav sits above the newsletter signup, both right-aligned
   as a column next to the logo/socials — matches the layout the client
   marked up directly on a screenshot. On mobile (see the 1040px breakpoint
   below) this reverts to plain full-width stacking. */
.footer-top-right {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 20px;
}
.footer-nav {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  font-family: var(--font-structure);
  font-size: 0.9rem;
  font-weight: 600;
}
.footer-nav a { text-decoration: none; }
.footer-nav a:hover { text-decoration: underline; }
.footer-newsletter {
  width: 100%;
  max-width: 100%;
  text-align: left;
}
.footer-newsletter h3 {
  font-size: 1.5rem;
  margin-bottom: 14px;
}
.footer-newsletter-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
  /* The heading above is allowed to run the full column width, but the
     inputs themselves look odd stretched that wide — capped to a normal
     form-row width instead. */
  max-width: 380px;
}
.footer-newsletter-fields input {
  flex: 1;
  min-width: 160px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  padding: 10px 14px;
  border: 2px solid var(--deep-plum);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--text-body);
  box-shadow: 3px 3px 0 var(--lavender-mist);
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.footer-newsletter-fields input:focus {
  border-color: var(--royal-purple);
  box-shadow: 3px 3px 0 var(--butter-yellow);
  outline: none;
}
.footer-newsletter .checkbox-field {
  margin-bottom: 12px;
  font-size: 0.82rem;
}
/* Desktop only: first name gets its own row, so the Join button sits
   directly beside the email field instead of wrapping under both inputs. */
@media (min-width: 1041px) {
  .footer-newsletter-fields input.footer-newsletter-name {
    flex: 1 1 100%;
  }
}
.footer-newsletter .form-success-message {
  font-size: 1.05rem;
}
.footer-newsletter .form-error-message {
  margin-top: 8px;
}
.footer-bottom {
  border-top: 1px solid var(--border-soft);
  padding-top: 20px;
  font-size: 0.8rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  font-family: var(--font-structure);
}
.footer-bottom a { text-decoration: underline; }
.footer-bottom-links {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.footer-socials {
  list-style: none;
  display: flex;
  gap: 12px;
  padding: 0;
  margin: 18px 0 0;
}
.footer-socials a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--deep-plum);
  box-shadow: 3px 3px 0 var(--butter-yellow);
  color: var(--deep-plum);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.footer-socials a:hover {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--butter-yellow);
  background: var(--lavender-mist);
}
.footer-socials svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

/* ---------- 404 ---------- */
.error-page {
  text-align: center;
  padding: 100px 0;
}

/* ---------- Gallery / marquee ---------- */
.gallery-section {
  position: relative;
  overflow: hidden;
}
/* Puzzle-shaped background blobs removed for now — re-enable by uncommenting.
.gallery-section::before,
.gallery-section::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  -webkit-mask-image: var(--puzzle-mask);
  mask-image: var(--puzzle-mask);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.gallery-section::before {
  width: 200px;
  height: 200px;
  background: var(--puzzle-sage);
  opacity: 0.3;
  top: -60px;
  left: -50px;
  transform: rotate(12deg);
}
.gallery-section::after {
  width: 160px;
  height: 160px;
  background: var(--lavender-mist);
  opacity: 0.5;
  bottom: -30px;
  right: -30px;
  transform: rotate(-20deg);
}
*/
.gallery-section .container { position: relative; z-index: 1; }

.marquee-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--white);
  border: 2px solid var(--royal-purple);
  color: var(--royal-purple);
  font-family: var(--font-structure);
  font-weight: 700;
  font-size: 0.85rem;
  padding: 8px 18px;
  border-radius: 999px;
  cursor: pointer;
  margin-top: 8px;
}
.marquee-toggle:hover { background: var(--lavender-mist); }

.marquee {
  overflow: hidden;
  margin-top: 32px;
  position: relative;
  z-index: 1;
}
.marquee-track {
  display: flex;
  width: max-content;
  gap: 20px;
  padding: 0 24px;
  animation: marquee-scroll 34s linear infinite;
}
.marquee:hover .marquee-track,
.marquee:focus-within .marquee-track,
.marquee.paused .marquee-track {
  animation-play-state: paused;
}
.marquee-slide {
  flex: 0 0 auto;
  width: clamp(220px, 26vw, 360px);
  position: relative;
}
.marquee-slide .placeholder-photo {
  height: 260px;
  min-height: 0;
  border-radius: var(--radius-md);
}
.marquee-photo {
  height: 260px;
  width: 100%;
  object-fit: cover;
  border-radius: var(--radius-md);
  display: block;
}
/* Decorative bottom gradient on every slide (captions removed) — a
   deeper, more saturated purple hue than the old caption backdrop,
   since it's now purely a visual accent rather than a text background. */
.marquee-slide::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 55%;
  background: linear-gradient(to top, rgba(107, 63, 160, 0.55), transparent);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  pointer-events: none;
}

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ---------- Scroll-linked puzzle background ----------
   Pairs of interlocking pieces are injected by main.js into every
   section (2 pairs on taller sections, 3 on very tall ones). Each pair
   connects along either a horizontal or vertical seam, sliding
   together as the section reaches mid-viewport and drifting apart as
   it scrolls away, plus a slow idle "breathe" so the page never looks
   static. Six placement spots and three size tiers keep the pattern
   from repeating identically down the page. Decorative only.
   Shape matches the Jigsaw & Gist link-in-bio page's puzzle pieces —
   short cubic-bezier corner cuts rather than large rounded-square
   corners, one main seam knob plus one off-centre secondary knob — see
   the big comment above initPuzzleBackground() in main.js for the full
   rationale (a large uniform corner radius was reading as "cloudy"
   rather than puzzle-like, independent of connector count). Horizontal
   placement (left/right) is computed there too, per section, from the
   actual margin outside .container, so pieces never sit behind the
   text column regardless of viewport width. */
.has-puzzle-pair {
  position: relative;
  overflow: hidden;
}
.has-puzzle-pair > .container {
  position: relative;
  z-index: 1;
}
.puzzle-pair {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
  transform: rotate(var(--pp-rot, 0deg)) scale(calc(var(--pp-scale, 1) * var(--pp-tier, 1)));
}
.pp-orient-h { width: 224px; height: 90px; }
.pp-orient-v { width: 90px; height: 224px; }

.pp-tier-sm { --pp-tier: 0.72; }
.pp-tier-md { --pp-tier: 1; }
.pp-tier-lg { --pp-tier: 1.35; }

/* left/right are set per-pair by layoutPairs() in main.js, computed
   from each section's actual margin outside its .container, not a
   fixed percentage — see the comment above initPuzzleBackground(). */
.pp-pos-tr { top: 24px; }
.pp-pos-bl { bottom: 24px; }
.pp-pos-tl { top: 24px; }
.pp-pos-br { bottom: 24px; }
.pp-pos-mr { top: 50%; margin-top: -45px; }
.pp-pos-ml { top: 50%; margin-top: -45px; }

/* Real SVG puzzle pieces — a 2px deep-plum stroke plus a hard offset
   drop-shadow, the exact same "sticker" treatment as every button and
   card on the site (see .btn / .offer-card), so the background pieces
   read as part of the same design system rather than a flat colour
   blob. filter:drop-shadow (not box-shadow) follows the piece's own
   silhouette, including its connectors, instead of its bounding box.
   Main connector is the same full-edge S-curve proven via
   isPointInFill to interlock exactly; the smaller decorative knob on
   one other edge is what makes a single piece read as "cut from a
   bigger puzzle" rather than a shape with one lump — it never needs to
   interlock with anything, it's texture only. */
.puzzle-bit {
  position: absolute;
  overflow: visible;
  will-change: transform;
  filter: drop-shadow(4px 4px 0 var(--pp-shadow, var(--butter-yellow)));
  animation: puzzle-idle 5.5s ease-in-out infinite;
  animation-delay: var(--pp-delay, 0s);
  /* Purely decorative (aria-hidden) but genuinely clickable — a small
     hover/click flourish, not something screen-reader or keyboard
     users need to reach, so no tabindex is added. */
  pointer-events: auto;
  cursor: pointer;
}
.puzzle-bit:hover {
  animation: puzzle-wiggle 0.5s ease-in-out infinite, puzzle-idle 5.5s ease-in-out infinite;
  animation-delay: 0s, var(--pp-delay, 0s);
}
.puzzle-bit.puzzle-pop {
  animation: puzzle-pop 0.5s ease;
}
/* Click-to-connect: added to the moving piece of a pair for the
   duration of its snap-together beat (see snapConnect() in main.js).
   The scroll-linked gap in update() sets transform directly on every
   scroll frame with no transition — deliberately instant, so it never
   lags behind the scroll position — so this class exists only to add
   a springy transition for the one-off click-triggered snap, then
   gets removed before the next scroll-driven update runs. */
.puzzle-bit.pp-snap {
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes puzzle-wiggle {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-7deg); }
  75% { transform: rotate(7deg); }
}
@keyframes puzzle-pop {
  0% { transform: scale(1) rotate(0deg); }
  30% { transform: scale(0.82) rotate(-10deg); }
  60% { transform: scale(1.18) rotate(8deg); }
  100% { transform: scale(1) rotate(0deg); }
}
.puzzle-bit path {
  fill: var(--pp-color, var(--lavender-mist));
  stroke: var(--deep-plum);
  stroke-width: 2;
  stroke-linejoin: round;
}
.pp-pos-tab-h { top: 0; left: 0; }
.pp-pos-notch-h { top: 0; left: 90px; }
.pp-pos-tab-v { top: 0; left: 0; }
.pp-pos-notch-v { top: 90px; left: 0; }

@keyframes puzzle-idle {
  0%, 100% { opacity: 0.65; }
  50% { opacity: 1; }
}

@media (max-width: 720px) {
  .puzzle-pair { --pp-scale: 0.6; }
  .pp-pos-mr, .pp-pos-ml { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .puzzle-bit { animation: none; }
}

/* ---------- Ticker band ---------- */
/* The whole band is a single link to the next event's Luma page. */
.ticker {
  display: block;
  background: var(--deep-plum);
  overflow: hidden;
  padding: 12px 0;
  text-decoration: none;
}
.ticker-track {
  display: flex;
  gap: 0;
  width: max-content;
  animation: marquee-scroll 30s linear infinite;
}
.ticker-track span {
  flex: 0 0 auto;
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--lavender-mist);
  padding-right: 2.5rem;
}
/* A lighter, brighter highlight on hover — near-white against the plum band. */
.ticker:hover .ticker-track span {
  color: var(--warm-cream);
}

/* ---------- Logbook (manual carousel) ---------- */
.logbook {
  margin-top: 56px;
  position: relative;
  z-index: 1;
}
.logbook-nav {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}
.logbook-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--deep-plum);
  box-shadow: 3px 3px 0 var(--gist-coral);
  color: var(--deep-plum);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.logbook-arrow:hover {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--gist-coral);
  background: var(--lavender-mist);
  color: var(--royal-purple);
}
.logbook-track {
  display: flex;
  gap: 28px;
  margin-top: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 6px;
  scrollbar-width: none;
}
.logbook-track::-webkit-scrollbar { display: none; }
.logbook-entry {
  background: var(--white);
  border: 2px solid var(--deep-plum);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 6px 6px 0 var(--gist-coral);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  flex: 0 0 clamp(260px, 40vw, 340px);
  scroll-snap-align: start;
}
.logbook-entry:nth-child(odd) { transform: rotate(-0.6deg); }
.logbook-entry:nth-child(even) { transform: rotate(0.6deg); }
.logbook-entry:hover {
  transform: translate(-3px, -3px) rotate(-0.6deg);
  box-shadow: 9px 9px 0 var(--gist-coral);
}
.logbook-entry .placeholder-photo {
  border-radius: 0;
  border-width: 0 0 2px 0;
  min-height: 200px;
}
/* One entry (the event we actually have photos from) gets a wider card
   with a photo mosaic instead of the usual single placeholder tile. */
.logbook-entry-gallery {
  flex-basis: min(520px, 88vw);
}
.logbook-photo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
}
.logbook-photo-btn {
  display: block;
  padding: 0;
  border: none;
  background: none;
  cursor: zoom-in;
  line-height: 0;
}
.logbook-photo-grid img {
  width: 100%;
  height: 140px;
  object-fit: cover;
  display: block;
}
@media (max-width: 600px) {
  .logbook-photo-grid { grid-template-columns: repeat(2, 1fr); }
  .logbook-photo-grid img { height: 130px; }
}
.logbook-entry-body {
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.logbook-entry-body h4 {
  font-family: var(--font-display);
  color: var(--deep-plum);
  font-size: 1.25rem;
  font-weight: 400;
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  .marquee-track, .ticker-track { animation: none; }
  .marquee-toggle { display: none; }
  .btn, .step-card, .offer-card, .story-card, .logbook-entry, .event-poster-photo { transition: none; }
  .btn-pop { animation: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  :root { --container-width: 940px; }
  .steps { grid-template-columns: repeat(3, 1fr); gap: 20px; }
}

@media (max-width: 1040px) {
  .nav-toggle { display: block; }
  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--warm-cream);
    flex-direction: column;
    gap: 0;
    padding: 8px 24px 20px;
    border-bottom: 1px solid var(--border-soft);
    display: none;
  }
  .nav-links.open { display: flex; }
  .nav-links li { width: 100%; }
  .nav-links a { display: block; padding: 12px 0; border-bottom: 1px solid var(--border-soft); }
  .steps { grid-template-columns: 1fr; }
  .footer-top { flex-direction: column; }
  .footer-top-right { align-items: stretch; width: 100%; }
  .footer-newsletter {
    width: 100%;
    padding-top: 20px;
    border-top: 1px solid var(--border-soft);
  }
}

@media (max-width: 720px) {
  .hero { padding: 48px 0 16px; }
  .hero::before { width: 160px; height: 160px; }
  .hero::after { width: 120px; height: 120px; }
  section { padding: 48px 0; }
  .hero + section { padding-top: 16px; }
  .community-intro { padding-bottom: 16px; }
  .marquee-slide .placeholder-photo { height: 200px; }
  .marquee-photo { height: 200px; }
}

@media (max-width: 600px) {
  .container { padding: 0 18px; }
  h1 { font-size: clamp(2rem, 8vw, 2.6rem); }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { text-align: center; }
  .card-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .marquee-track { gap: 14px; padding: 0 18px; }
  .marquee-slide .placeholder-photo { height: 170px; padding: 12px; }
  .marquee-photo { height: 170px; }
  .newsletter-inner { flex-direction: column; align-items: flex-start; }
  .newsletter-inner .btn { width: 100%; text-align: center; }
  .partners-inner { flex-direction: column; align-items: flex-start; }
  .site-footer .container { padding: 28px 20px 20px; }
  .site-footer { padding: 24px 0; }
  .ticker-track span { font-size: 1.05rem; }
}

@media (max-width: 400px) {
  .logo-link img { height: 28px; }
  .btn { padding: 12px 22px; font-size: 0.92rem; }
}

/* ---------- Photo lightbox ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(63, 35, 94, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.lightbox[hidden] { display: none; }
.lightbox-image {
  max-width: min(900px, 86vw);
  max-height: 78vh;
  object-fit: contain;
  border-radius: var(--radius-md);
  border: 2px solid var(--white);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}
.lightbox-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--deep-plum);
  color: var(--deep-plum);
  font-size: 1.1rem;
  cursor: pointer;
  box-shadow: 3px 3px 0 var(--gist-coral);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.lightbox-close:hover {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--gist-coral);
  background: var(--lavender-mist);
  color: var(--royal-purple);
}
.lightbox-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--deep-plum);
  color: var(--deep-plum);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 3px 3px 0 var(--gist-coral);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.lightbox-arrow:hover {
  transform: translateY(-50%) translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--gist-coral);
  background: var(--lavender-mist);
  color: var(--royal-purple);
}
.lightbox-prev { left: 20px; }
.lightbox-next { right: 20px; }
.lightbox-counter {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  color: var(--white);
  font-family: var(--font-structure);
  font-weight: 700;
  font-size: 0.85rem;
}
@media (max-width: 600px) {
  .lightbox-arrow { width: 40px; height: 40px; font-size: 1.1rem; }
  .lightbox-prev { left: 10px; }
  .lightbox-next { right: 10px; }
  .lightbox-close { top: 10px; right: 10px; }
}

/* ---------- Scroll to top ---------- */
.scroll-to-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--deep-plum);
  color: var(--deep-plum);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 3px 3px 0 var(--gist-coral);
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.scroll-to-top[hidden] { display: none; }
.scroll-to-top:hover {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--gist-coral);
  background: var(--lavender-mist);
  color: var(--royal-purple);
}
@media (max-width: 600px) {
  .scroll-to-top { right: 14px; bottom: 14px; width: 44px; height: 44px; font-size: 1.15rem; }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-to-top { transition: none; }
}