/* ==========================================================================
   GnomeBoys — design tokens
   ========================================================================== */
:root {
  --purple: #7a3b8f;
  --purple-dark: #5e2c70;
  --teal: #1f7a8c;
  --teal-dark: #175d6b;
  --orange: #e08a2e;
  --orange-dark: #bd7122;
  --magenta: #c23e82;
  --magenta-dark: #9e2f66;
  --green: #4f9a44;
  --green-dark: #3c7a34;

  --ink: #2b2213;
  --cream: #faf4e6;
  --cream-dark: #f0e4c8;
  --white: #fffdf8;
  --wood-light: #ecd9ae;
  --wood-dark: #d9bd84;
  --nav-highlight: #ff4fa3;

  --font-display: "Fredoka", "Baloo 2", "Comic Sans MS", sans-serif;
  --font-body: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --radius-sm: 8px;
  --radius-md: 14px;
  --max-width: 1120px;
  --shadow-card: 0 10px 24px -14px rgba(43, 34, 19, 0.4);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--cream);
  color: var(--ink);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-display);
  color: var(--ink);
  line-height: 1.1;
  margin: 0 0 0.5em;
  font-weight: 600;
}

h1 { font-size: clamp(2.1rem, 4.2vw, 3.2rem); }
h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); }
h3 { font-size: 1.15rem; margin-bottom: 0.3em; }

p { margin: 0 0 1em; max-width: 62ch; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

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

:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }

/* ==========================================================================
   Reveal-on-scroll
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(16px) rotate(-0.6deg);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.reveal:nth-child(even) { transform: translateY(16px) rotate(0.6deg); }
.reveal.is-visible { opacity: 1; transform: translateY(0) rotate(0deg); }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.95rem;
  padding: 0.85em 1.5em;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }

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

.btn--whatsapp { background: #3f9142; color: var(--white); }
.btn--whatsapp::before {
  content: "";
  width: 16px; height: 16px; flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.45 1.32 4.95L2 22l5.29-1.39a9.9 9.9 0 0 0 4.75 1.21h.01c5.46 0 9.9-4.45 9.9-9.91C21.96 6.45 17.5 2 12.04 2zm5.8 14.17c-.24.68-1.4 1.3-1.93 1.38-.5.08-1.12.11-1.8-.12-.42-.14-.95-.31-1.64-.6-2.88-1.24-4.76-4.15-4.9-4.34-.14-.19-1.17-1.55-1.17-2.96 0-1.4.73-2.09 1-2.38.24-.26.53-.32.7-.32.18 0 .35 0 .5.01.16.01.38-.06.6.46.24.57.8 1.98.87 2.12.07.14.11.31.02.5-.09.19-.14.31-.28.47-.14.16-.29.36-.42.48-.14.13-.28.28-.12.55.16.28.72 1.19 1.55 1.93 1.06.95 1.96 1.24 2.24 1.38.28.14.44.12.6-.07.16-.19.68-.79.87-1.06.18-.27.36-.22.6-.13.24.09 1.53.72 1.79.85.26.13.44.2.5.31.07.11.07.63-.17 1.31z'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat; -webkit-mask-position: center;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.45 1.32 4.95L2 22l5.29-1.39a9.9 9.9 0 0 0 4.75 1.21h.01c5.46 0 9.9-4.45 9.9-9.91C21.96 6.45 17.5 2 12.04 2zm5.8 14.17c-.24.68-1.4 1.3-1.93 1.38-.5.08-1.12.11-1.8-.12-.42-.14-.95-.31-1.64-.6-2.88-1.24-4.76-4.15-4.9-4.34-.14-.19-1.17-1.55-1.17-2.96 0-1.4.73-2.09 1-2.38.24-.26.53-.32.7-.32.18 0 .35 0 .5.01.16.01.38-.06.6.46.24.57.8 1.98.87 2.12.07.14.11.31.02.5-.09.19-.14.31-.28.47-.14.16-.29.36-.42.48-.14.13-.28.28-.12.55.16.28.72 1.19 1.55 1.93 1.06.95 1.96 1.24 2.24 1.38.28.14.44.12.6-.07.16-.19.68-.79.87-1.06.18-.27.36-.22.6-.13.24.09 1.53.72 1.79.85.26.13.44.2.5.31.07.11.07.63-.17 1.31z'/%3E%3C/svg%3E");
  mask-repeat: no-repeat; mask-position: center;
}
.btn--whatsapp:hover { background: #337a36; }

.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--ghost:hover { background: rgba(43, 34, 19, 0.07); }

.btn--danger { background: transparent; color: #8a3324; border-color: #8a3324; border-radius: var(--radius-sm); }
.btn--danger:hover { background: rgba(138, 51, 36, 0.08); }

.btn--small { padding: 0.55em 1.1em; font-size: 0.85rem; }
.btn--full { width: 100%; justify-content: center; }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header { background: #000; color: var(--cream); }
.site-header__inner { display: flex; align-items: center; gap: 1.5rem; padding-block: 0.75rem; }
.brand {
  display: flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-display); font-size: 1.3rem; font-weight: 600;
  color: var(--white); margin-right: auto;
}

.site-nav { display: flex; gap: 1rem; flex-wrap: wrap; align-items: flex-start; margin-right: auto;}
.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  width: 80px;
  transition: color 0.15s ease;
}
.nav-item svg {
  width: 22px; height: 22px;
  stroke: currentColor; fill: none;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.nav-item:hover, .nav-item.is-active { color: var(--nav-highlight); }

@media (max-width: 760px) {
  .site-header__inner { flex-wrap: wrap; }
  .site-nav { order: 3; width: 100%; gap: 1.1rem; justify-content: center; padding-top: 0.5rem; }
  /* seven menu items: slightly narrower so they still fit 4 + 3 on a phone, not 3 + 3 + 1 */
  .site-nav { gap: 0.6rem 0.5rem; }
  .nav-item { width: 72px; }
}

/* ==========================================================================
   Home: banner + page card row
   ========================================================================== */
.home-banner-section { padding-block: 2.5rem 1rem; }
.home-banner { margin: 0 auto; max-width: 900px; }
.home-banner img { width: 100%; border-radius: 14px; box-shadow: var(--shadow-card); display: block; }

.page-card-section { padding-block: 1rem 4rem; }
.page-card-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.75rem;
}
.page-card {
  display: block;
  background: var(--white);
  padding: 7px 7px 10px;
  border-radius: 6px;
  box-shadow: var(--shadow-card);
  flex: 0 0 auto;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
/* Every card gets the same image height; width follows each poster's own proportions. */
.page-card img { height: 270px; width: auto; max-width: 100%; border-radius: 3px; display: block; }
.page-card:nth-child(1) { transform: rotate(-3deg); }
.page-card:nth-child(2) { transform: rotate(2deg); }
.page-card:nth-child(3) { transform: rotate(-2deg); }
.page-card:nth-child(4) { transform: rotate(3deg); }
.page-card:nth-child(5) { transform: rotate(-2.5deg); }
.page-card:hover { transform: translateY(-6px) rotate(0deg); box-shadow: 0 20px 34px -16px rgba(43, 34, 19, 0.5); }

@media (max-width: 760px) {
  .page-card-row {
    flex-direction: column;
    align-items: center;
    gap: 1.75rem;
  }
  .page-card img { height: 340px; }
}

/* ==========================================================================
   Sections + brush-stroke headers
   ========================================================================== */
.site-section { padding-block: 4.5rem; }
.site-section--tint { background: var(--cream-dark); }

.brush-header {
  display: inline-block;
  color: var(--white);
  padding: 0.5em 1.3em 0.6em;
  margin-bottom: 1.5rem;
  box-shadow: 0 8px 16px -8px rgba(43, 34, 19, 0.4);
}
.brush-header h2 { color: var(--white); margin: 0; }
.brush-header h1 { color: var(--white); margin: 0; font-size: clamp(1.5rem, 2.6vw, 2rem); }
.brush-header--purple { background: var(--purple); border-radius: 225px 15px 200px 15px / 15px 200px 15px 225px; transform: rotate(-1deg); }
.brush-header--teal { background: var(--teal); border-radius: 15px 200px 15px 225px / 200px 15px 225px 15px; transform: rotate(1deg); }
.brush-header--orange { background: var(--orange); border-radius: 200px 15px 225px 15px / 15px 225px 15px 200px; transform: rotate(-1deg); }
.brush-header--magenta { background: var(--magenta); border-radius: 15px 225px 15px 200px / 225px 15px 200px 15px; transform: rotate(1deg); }
.brush-header--green { background: var(--green); border-radius: 225px 200px 15px 15px / 15px 15px 200px 225px; transform: rotate(-1deg); }

.section-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}
.section-grid--reverse .section-grid__media { order: 2; }
@media (max-width: 820px) {
  .section-grid { grid-template-columns: 1fr; gap: 2rem; }
  .section-grid--reverse .section-grid__media { order: -1; }
}

.section-photo {
  background: var(--white);
  padding: 10px 10px 16px;
  border-radius: 4px;
  box-shadow: var(--shadow-card);
  max-width: 360px;
  margin: 0 auto;
}
.section-photo img { width: 100%; height: auto; display: block; border-radius: 2px; }
.section-photo--tilt-left { transform: rotate(-3deg); }
.section-photo--tilt-right { transform: rotate(3deg); }

.section-copy p:last-child { margin-bottom: 0; }

/* ==========================================================================
   Make Your Own Gnome — checklist
   ========================================================================== */
.checklist {
  list-style: none;
  margin: 1.75rem 0;
  padding: 0;
  display: grid;
  gap: 0.9rem;
}
.checklist li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-weight: 700;
  font-size: 1.02rem;
}
.checklist__check {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  background: var(--green);
  display: flex; align-items: center; justify-content: center;
}
.checklist__check svg { width: 15px; height: 15px; stroke: var(--white); fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

/* ==========================================================================
   Card grid (From the Bench gallery)
   ========================================================================== */
.filter-bar { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 2rem; justify-content: flex-end; }
@media (max-width: 640px) {
  .filter-bar { justify-content: center; }
}
.filter-chip {
  font-family: var(--font-body); font-size: 0.85rem; font-weight: 700;
  padding: 0.5em 1.1em; border-radius: 999px; border: 2px solid var(--magenta);
  background: transparent; color: var(--magenta-dark); cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.filter-chip:hover { background: rgba(194, 62, 130, 0.08); }
.filter-chip.is-active { background: var(--magenta); color: var(--white); border-color: var(--magenta); }

.empty-state {
  background: var(--white); border: 2px dashed var(--magenta);
  border-radius: var(--radius-md); padding: 2rem; text-align: center; color: var(--magenta-dark);
}

.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.75rem; }

.gnome-card {
  background: var(--white); border-radius: var(--radius-md); overflow: hidden;
  box-shadow: var(--shadow-card); display: flex; flex-direction: column;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.gnome-card:hover { transform: translateY(-5px); box-shadow: 0 20px 34px -16px rgba(43, 34, 19, 0.45); }

.gnome-card__image {
  aspect-ratio: 1 / 1; background: var(--cream-dark); overflow: hidden;
  display: block; width: 100%; padding: 0; border: 0; font: inherit; cursor: zoom-in;
}
.gnome-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.2s ease; }
.gnome-card__image:hover img { transform: scale(1.04); }

.gnome-card__body { padding: 1.1rem 1.25rem 1.4rem; }
.gnome-card__type { font-size: 0.78rem; font-weight: 700; color: var(--teal-dark); margin-bottom: 0.35em; }
.gnome-card__desc { font-size: 0.92rem; color: #4a4437; }
.gnome-card__footer { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-top: 0.75rem; }
.gnome-card__price { font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; color: var(--purple); }

/* ==========================================================================
   Lightbox
   ========================================================================== */
.lightbox { border: none; padding: 0; background: transparent; max-width: min(640px, 90vw); max-height: 90vh; border-radius: var(--radius-md); overflow: visible; }
.lightbox::backdrop { background: rgba(24, 20, 14, 0.78); }
.lightbox[open] .lightbox__panel { animation: lightbox-in 0.18s ease-out; }
@keyframes lightbox-in { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: scale(1); } }
.lightbox__panel { position: relative; background: var(--white); border-radius: var(--radius-md); overflow: hidden; max-height: 90vh; display: flex; flex-direction: column; }
.lightbox__image { width: 100%; max-height: 70vh; object-fit: contain; background: var(--cream-dark); }
.lightbox__caption { padding: 1rem 1.25rem 1.25rem; }
.lightbox__name { font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; color: var(--ink); margin: 0 0 0.2em; }
.lightbox__meta { font-size: 0.85rem; color: var(--teal-dark); margin: 0; }
.lightbox__close {
  position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; border-radius: 50%;
  background: var(--purple); color: var(--white); border: 2px solid var(--white);
  display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 1;
  box-shadow: 0 6px 14px -6px rgba(0, 0, 0, 0.5);
}
.lightbox__close:hover { background: var(--purple-dark); }

/* ==========================================================================
   Markets & Events calendar
   ========================================================================== */
.cal { max-width: 1000px; margin: 0 auto; }
.cal__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem 1.5rem; flex-wrap: wrap; margin-bottom: 0.9rem; }
.cal__head h1 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-bottom: 0.15em; }
.cal__hint { margin: 0; font-size: 0.92rem; color: #5a5445; }

.cal__nav { display: flex; align-items: center; gap: 0.5rem; }
.cal__btn {
  width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--ink); background: transparent;
  color: var(--ink); display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background-color 0.15s ease;
}
.cal__btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.cal__btn:hover:not(:disabled) { background: rgba(43, 34, 19, 0.08); }
.cal__btn:disabled { opacity: 0.3; cursor: default; }
.cal__today {
  font-family: var(--font-body); font-weight: 700; font-size: 0.88rem; padding: 0.55em 1.1em; border-radius: 999px;
  border: 2px solid var(--ink); background: var(--ink); color: var(--white); cursor: pointer;
}
.cal__today:hover { background: #000; }

.cal__legend { display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; margin-bottom: 1rem; font-size: 0.85rem; font-weight: 700; }
.cal__legend-item { display: flex; align-items: center; gap: 0.45rem; }
.cal__swatch { width: 18px; height: 18px; border-radius: 50%; background: var(--orange); }
.cal__swatch--today { background: transparent; box-shadow: inset 0 0 0 2.5px var(--purple); }

.cal-track {
  position: relative;
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 4px 0 16px;
  scrollbar-width: thin;
  scrollbar-color: var(--wood-dark) transparent;
}
.cal-month {
  flex: 0 0 100%;
  scroll-snap-align: start;
  background: var(--white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: 1.1rem 1rem 1.25rem;
}
@media (min-width: 820px) {
  .cal-month { flex-basis: calc((100% - 1.5rem) / 2); }
}
.cal-month__title {
  margin: 0 0 0.8rem; padding-bottom: 0.6rem; text-align: center; font-size: 1.25rem;
  border-bottom: 2px dashed var(--wood-dark);
}

.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-dow { text-align: center; font-size: 0.72rem; font-weight: 800; color: var(--teal-dark); padding-bottom: 0.25rem; }
.cal-day {
  aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%; background: transparent; padding: 0;
  font: inherit; font-size: 0.92rem; font-weight: 700; color: var(--ink);
}
.cal-day--past { color: rgba(43, 34, 19, 0.38); }
.cal-day--today { box-shadow: inset 0 0 0 2.5px var(--purple); }
.cal-day--booked { background: var(--orange); cursor: pointer; transition: transform 0.12s ease; }
.cal-day--booked:hover, .cal-day--booked:focus-visible { transform: scale(1.12); }
.cal-day--booked.cal-day--past { background: #f0d4ac; color: rgba(43, 34, 19, 0.65); }

.cal__foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem 1.5rem; margin-top: 0.5rem; }
.cal__foot .btn { margin-left: auto; flex-shrink: 0; }
.cal-empty { flex: 1; text-align: center; margin: 0; color: #5a5445; }
@media (max-width: 640px) {
  .cal__foot { flex-direction: column; }
  .cal__foot .btn { margin-left: 0; }
}
.cal-noscript { padding-left: 1.2rem; }

.cal-tooltip {
  position: fixed; z-index: 100; max-width: min(270px, calc(100vw - 16px));
  background: var(--ink); color: var(--cream); padding: 0.7rem 0.9rem; border-radius: 10px;
  font-size: 0.86rem; line-height: 1.4; pointer-events: none;
  box-shadow: 0 12px 24px -10px rgba(0, 0, 0, 0.55);
}
.cal-tooltip[hidden] { display: none; }
.cal-tooltip__date { font-family: var(--font-display); font-weight: 600; font-size: 0.98rem; color: var(--orange); margin-bottom: 0.3rem; }
.cal-tooltip__item { display: flex; flex-direction: column; }
.cal-tooltip__item + .cal-tooltip__item { margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px solid rgba(255, 255, 255, 0.18); }
.cal-tooltip__time { font-weight: 800; }

/* ==========================================================================
   Gallery Archive
   ========================================================================== */
.archive-intro { color: #5a5445; margin-bottom: 2.5rem; }
.archive-month { margin-bottom: 3rem; }
.archive-month:last-child { margin-bottom: 0; }
.archive-month__title {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.25rem 0.9rem;
  font-size: clamp(1.4rem, 2.4vw, 1.8rem); margin: 0 0 1rem; padding-bottom: 0.5rem;
  border-bottom: 2px dashed var(--wood-dark);
}
.archive-month__count { font-family: var(--font-body); font-size: 0.85rem; font-weight: 700; color: var(--teal-dark); }
.archive-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 1rem; }
.archive-photo {
  display: block; padding: 0; border: 0; background: var(--cream-dark); aspect-ratio: 4 / 3;
  border-radius: var(--radius-md); overflow: hidden; cursor: zoom-in; box-shadow: var(--shadow-card);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.archive-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.25s ease; }
.archive-photo:hover { transform: translateY(-3px); box-shadow: 0 18px 30px -16px rgba(43, 34, 19, 0.45); }
.archive-photo:hover img { transform: scale(1.04); }
@media (max-width: 520px) {
  .archive-grid { grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }
}

/* the archive's photo viewer: wider, with previous / next */
.lightbox--wide { max-width: min(980px, 94vw); }
.lightbox__stage { position: relative; height: min(70vh, 620px); background: var(--cream-dark); }
.lightbox__stage .lightbox__image { width: 100%; height: 100%; max-height: none; object-fit: contain; }
.lightbox__name[hidden] { display: none; }
.lightbox__nav {
  position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; border-radius: 50%;
  border: 2px solid var(--white); background: rgba(43, 34, 19, 0.65); color: var(--white);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.lightbox__nav:hover { background: rgba(43, 34, 19, 0.88); }
.lightbox__nav[hidden] { display: none; }
.lightbox__nav--prev { left: 10px; }
.lightbox__nav--next { right: 10px; }
.lightbox__nav svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { background: #000; color: var(--cream-dark); }

.footer-script {
  font-family: "Dancing Script", cursive;
  font-weight: 700;
  color: var(--nav-highlight);
  margin: 0;
  line-height: 1.2;
}
.footer-heart { color: var(--nav-highlight); }

/* ---- top tier: socials, tagline, decorative gnomes, wooden sign ---- */
.footer-top { padding-block: 0.5rem 1rem; }
.footer-top__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.75rem 2.5rem;
  text-align: center;
}

.footer-follow { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; }
.footer-follow .footer-script { font-size: 1.3rem; }
.footer-follow svg { width: 26px; height: 26px; stroke: var(--nav-highlight); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.footer-socials { display: flex; gap: 1.5rem; flex-wrap: wrap; justify-content: center; }
.footer-social { display: block; align-items: center; gap: 0.6rem; color: var(--white); text-align: -webkit-center;}
.footer-social__icon {
  width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.footer-social__icon svg { width: 19px; height: 19px; stroke: var(--white); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.footer-social__icon--instagram { background: linear-gradient(135deg, #f58529, #dd2a7b, #8134af, #515bd4); }
.footer-social__icon--tiktok { background: #161616; border: 1px solid rgba(255, 255, 255, 0.25); }
.footer-social__text { display: flex; flex-direction: column; line-height: 1.3; text-align: left; }
.footer-social__text strong { font-size: 0.88rem; }
.footer-social__text small { font-size: 0.7rem; color: rgba(255, 255, 255, 0.6); }

.footer-script--center { font-size: 1.6rem; }

.footer-gnomes { display: block; width: 15%; max-width: 100%; height: auto; }

.footer-sign {
  /* background: linear-gradient(180deg, var(--wood-light), var(--wood-dark));
  color: var(--ink);
  padding: 0.6rem 1.1rem;
  border-radius: 6px;
  border: 2px solid rgba(43, 34, 19, 0.3);
  box-shadow: var(--shadow-card); */
  transform: rotate(-2deg);
}
.footer-sign p {
  font-family: var(--font-display); font-weight: 600; font-size: 0.72rem;
  line-height: 1.5; letter-spacing: 0.02em; margin: 0;
}
.footer-sign .footer-heart { font-size: 0.8rem; color: #8a3324; }

/* ---- divider ---- */
.footer-divider {
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--nav-highlight) 20%, var(--nav-highlight) 80%, transparent);
  opacity: 0.55;
}

/* ---- main tier: brand, contact row, thanks ---- */
.footer-main { padding-block: 1.75rem; }
.footer-main__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.5rem 2.25rem;
  text-align: center;
}

.footer-brand { display: flex; align-items: center; gap: 0.75rem; }
.footer-brand__logo {
  width: 42px; height: 42px; border-radius: 50%; background: var(--orange); color: var(--white);
  font-family: var(--font-display); font-weight: 700; font-size: 1rem; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.footer-brand__name { font-family: var(--font-display); font-weight: 700; color: var(--orange); font-size: 1.1rem; margin: 0; text-align: left; }
.footer-brand__tag { font-size: 1.05rem; text-align: left; }

.footer-contact { display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: center; justify-content: center; }
.footer-contact__item { display: flex; align-items: center; gap: 0.4rem; color: var(--cream-dark); font-size: 0.85rem; font-weight: 700; max-width: 280px; text-align: left; }
.footer-contact__item svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
a.footer-contact__item:hover { color: var(--white); }
.footer-contact__icon--whatsapp {
  width: 16px; height: 16px; flex-shrink: 0; background-color: #3f9142;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.45 1.32 4.95L2 22l5.29-1.39a9.9 9.9 0 0 0 4.75 1.21h.01c5.46 0 9.9-4.45 9.9-9.91C21.96 6.45 17.5 2 12.04 2zm5.8 14.17c-.24.68-1.4 1.3-1.93 1.38-.5.08-1.12.11-1.8-.12-.42-.14-.95-.31-1.64-.6-2.88-1.24-4.76-4.15-4.9-4.34-.14-.19-1.17-1.55-1.17-2.96 0-1.4.73-2.09 1-2.38.24-.26.53-.32.7-.32.18 0 .35 0 .5.01.16.01.38-.06.6.46.24.57.8 1.98.87 2.12.07.14.11.31.02.5-.09.19-.14.31-.28.47-.14.16-.29.36-.42.48-.14.13-.28.28-.12.55.16.28.72 1.19 1.55 1.93 1.06.95 1.96 1.24 2.24 1.38.28.14.44.12.6-.07.16-.19.68-.79.87-1.06.18-.27.36-.22.6-.13.24.09 1.53.72 1.79.85.26.13.44.2.5.31.07.11.07.63-.17 1.31z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.45 1.32 4.95L2 22l5.29-1.39a9.9 9.9 0 0 0 4.75 1.21h.01c5.46 0 9.9-4.45 9.9-9.91C21.96 6.45 17.5 2 12.04 2zm5.8 14.17c-.24.68-1.4 1.3-1.93 1.38-.5.08-1.12.11-1.8-.12-.42-.14-.95-.31-1.64-.6-2.88-1.24-4.76-4.15-4.9-4.34-.14-.19-1.17-1.55-1.17-2.96 0-1.4.73-2.09 1-2.38.24-.26.53-.32.7-.32.18 0 .35 0 .5.01.16.01.38-.06.6.46.24.57.8 1.98.87 2.12.07.14.11.31.02.5-.09.19-.14.31-.28.47-.14.16-.29.36-.42.48-.14.13-.28.28-.12.55.16.28.72 1.19 1.55 1.93 1.06.95 1.96 1.24 2.24 1.38.28.14.44.12.6-.07.16-.19.68-.79.87-1.06.18-.27.36-.22.6-.13.24.09 1.53.72 1.79.85.26.13.44.2.5.31.07.11.07.63-.17 1.31z'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}

.footer-thanks { font-size: 1.25rem; }

/* ---- utility strip ---- */
.footer-utility { border-top: 1px solid rgba(255, 255, 255, 0.08); padding-block: 0.85rem; }
.footer-utility__inner {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
  gap: 0.5rem 1.5rem; font-size: 0.76rem; color: rgba(255, 255, 255, 0.4);
}
.footer-utility a { color: rgba(255, 255, 255, 0.4); }
.footer-utility a:hover { color: var(--white); }
.footer-utility__inner > div { display: flex; gap: 1.25rem; }

@media (max-width: 760px) {
  .footer-brand { flex-direction: column; text-align: center; }
  .footer-brand__name, .footer-brand__tag { text-align: center; }
}

/* ==========================================================================
   Admin — shared auth chrome
   ========================================================================== */
.admin-body { background: var(--cream-dark); }
.admin-auth { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 2rem; }
.admin-auth__card { background: var(--white); border-radius: var(--radius-md); box-shadow: var(--shadow-card); padding: 2.5rem; width: 100%; max-width: 500px; }
.brand--admin { color: var(--ink); margin-bottom: 1.5rem; }
.admin-auth__lede { font-size: 0.95rem; color: #5a5445; }
.admin-auth__back { display: inline-block; margin-top: 1.25rem; font-size: 0.88rem; color: var(--purple); border-bottom: 1px solid var(--purple); }

/* ==========================================================================
   Admin — dashboard
   ========================================================================== */
.admin-header { background: var(--ink); color: var(--white); }
.admin-header__inner { display: flex; align-items: center; justify-content: space-between; padding-block: 1rem; }
.admin-header .brand { color: var(--white); margin-right: 0; }
.admin-header__actions { display: flex; align-items: center; gap: 1.25rem; font-size: 0.9rem; }
.admin-header__actions a { color: var(--cream-dark); }
.admin-header__actions a:hover { color: var(--white); }
.admin-header .btn--ghost { color: var(--white); border-color: var(--cream-dark); }
.admin-header .btn--ghost:hover { background: rgba(255, 255, 255, 0.1); }

.admin-main { padding-block: 2.5rem 4rem; }
.admin-panel { background: var(--white); border-radius: var(--radius-md); padding: 1.75rem; box-shadow: var(--shadow-card); margin-bottom: 2rem; }
.admin-panel__hint { font-size: 0.88rem; color: var(--teal-dark); margin-top: -0.5rem; }

.admin-form--grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem 1.25rem; margin-top: 1rem; }
.field { display: flex; flex-direction: column; gap: 0.35rem; }
.field--full { grid-column: 1 / -1; }
.field--checkbox { flex-direction: row; align-items: center; gap: 0.5rem; }
.field label { font-size: 0.85rem; font-weight: 700; color: var(--ink); }
.field input[type="text"], .field input[type="number"], .field input[type="password"], .field input[type="file"], .field input[type="date"], .field input[type="time"], .field textarea {
  font-family: var(--font-body); font-size: 0.95rem; padding: 0.6em 0.75em;
  border: 1.5px solid var(--cream-dark); border-radius: var(--radius-sm); background: var(--cream); color: var(--ink);
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--orange); }
.field textarea { resize: vertical; }

.admin-form { max-width: 100%; }
.admin-form label { display: block; font-size: 0.85rem; font-weight: 700; color: var(--ink); margin-bottom: 0.35rem; }
.admin-form input[type="password"] { width: 100%; margin-bottom: 1.1rem; }

@media (max-width: 620px) { .admin-form--grid { grid-template-columns: 1fr; } }

.admin-list { display: flex; flex-direction: column; gap: 1rem; }
.admin-item {
  display: grid; grid-template-columns: 40px 72px 1fr auto; gap: 1rem; align-items: center;
  padding: 0.9rem; border: 1.5px solid var(--cream-dark); border-radius: var(--radius-md);
}
.admin-item__order { display: flex; justify-content: center; }
.admin-item__order form { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.order-btn {
  width: 28px; height: 22px; border: 1.5px solid var(--ink); background: var(--cream); color: var(--ink);
  border-radius: 4px; font-size: 0.65rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.order-btn:hover:not(:disabled) { background: var(--ink); color: var(--white); }
.order-btn:disabled { opacity: 0.3; cursor: default; }
.admin-item__position { font-family: var(--font-display); font-weight: 600; font-size: 0.85rem; color: var(--ink); }
.admin-item__thumb { width: 72px; height: 72px; object-fit: cover; border-radius: var(--radius-sm); background: var(--cream); }
.admin-item__name { font-weight: 700; margin: 0 0 0.2em; }
.admin-item__meta { font-size: 0.82rem; color: var(--teal-dark); margin: 0 0 0.2em; }
.admin-item__desc { font-size: 0.85rem; color: #5a5445; margin: 0; }
.admin-item__actions { display: flex; gap: 0.5rem; }
.admin-edit-form { grid-column: 1 / -1; border-top: 1.5px dashed var(--cream-dark); padding-top: 1rem; margin-top: 0.5rem; }
.admin-edit-form[hidden] { display: none; }

@media (max-width: 640px) {
  .admin-item { grid-template-columns: 34px 56px 1fr; }
  .admin-item__actions { grid-column: 1 / -1; }
}

/* ---- admin: section nav + event rows ---- */
.admin-nav { display: flex; gap: 1.25rem; margin-right: auto; margin-left: 1.5rem; }
.admin-nav a { color: var(--cream-dark); font-weight: 700; font-size: 0.92rem; padding-bottom: 3px; border-bottom: 2px solid transparent; }
.admin-nav a:hover { color: var(--white); }
.admin-nav a.is-active { color: var(--white); border-bottom-color: var(--nav-highlight); }
@media (max-width: 700px) {
  .admin-header__inner { flex-wrap: wrap; gap: 0.6rem 1rem; }
  .admin-nav { order: 3; width: 100%; margin: 0; }
}

.event-list { display: flex; flex-direction: column; gap: 0.75rem; }
.event-row {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.8rem 0.95rem; border: 1.5px solid var(--cream-dark); border-radius: var(--radius-md);
}
.event-row p { margin: 0; }
.event-row__date { font-weight: 800; }
.event-row__meta { font-size: 0.9rem; color: var(--teal-dark); }
.event-row--past { opacity: 0.65; }

/* ---- admin: gallery archive ---- */
.field__hint { font-size: 0.8rem; font-weight: 400; color: var(--teal-dark); line-height: 1.4; }
.field__hint.is-error { color: #8a3324; font-weight: 700; }
.admin-archive-month { margin-top: 1.75rem; }
.admin-archive-month h3 { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; font-size: 1.15rem; margin-bottom: 0.7rem; }
.admin-archive-month__count { font-family: var(--font-body); font-size: 0.82rem; font-weight: 700; color: var(--teal-dark); }
.admin-archive-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.9rem; }
.admin-archive-item {
  margin: 0; display: flex; flex-direction: column; background: var(--white);
  border: 1.5px solid var(--cream-dark); border-radius: var(--radius-md); overflow: hidden;
}
.admin-archive-item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; background: var(--cream-dark); }
.admin-archive-item figcaption { padding: 0.5rem 0.65rem 0; font-size: 0.8rem; color: var(--teal-dark); min-height: 1.5em; overflow-wrap: anywhere; }
.admin-archive-item form { padding: 0.5rem 0.65rem 0.65rem; margin-top: auto; }

/* ==========================================================================
   Notices / tags
   ========================================================================== */
.notice { padding: 0.75em 1em; border-radius: var(--radius-sm); font-size: 0.9rem; margin-bottom: 1.25rem; }
.notice--success { background: #e4efe2; color: #2b4a2f; border: 1px solid #b9d6b5; }
.notice--error { background: #f6dede; color: #7a2a22; border: 1px solid #e6b6ae; }
.notice--warn { background: #f6ecd2; color: #6b501a; border: 1px solid #e6d29e; }

.tag {
  display: inline-block; font-size: 0.7rem; font-weight: 700; color: var(--white);
  background: var(--green); padding: 0.15em 0.6em; border-radius: 999px; margin-left: 0.4em; vertical-align: middle;
}