@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,700;9..40,900&display=swap');

/* ============================================================
   buildwithems — Design Tokens
   ============================================================ */
:root {
  --bwe-blue:        #9DB9E6;
  --bwe-blue-deep:   #7A9DC8;
  --bwe-blue-soft:   #C2D4E9;

  --bwe-orange:      #D05020;
  --bwe-orange-deep: #A83D14;
  --bwe-orange-soft: #E89878;

  --bwe-cream:       #F0E0B0;

  --bwe-umber:       #3A2A1F;
  --bwe-umber-soft:  #5A4438;

  --bwe-paper:       #F8F1E4;
  --bwe-featured-bg: #FFF6E8;
  --bwe-danger:      #C0392B;
  --bwe-overlay:     rgba(58, 42, 31, 0.65);
  --bwe-ink:         #1A1410;

  --bg:              var(--bwe-blue);
  --surface:         var(--bwe-paper);
  --fg-1:            var(--bwe-umber);
  --fg-2:            var(--bwe-umber-soft);
  --accent:          var(--bwe-orange);
  --line:            var(--bwe-umber);

  --font-display: "DM Serif Display", "Playfair Display", Georgia, serif;
  --font-sans:    "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --fs-hero:    clamp(72px, 11vw, 168px);
  --fs-h1:      clamp(40px, 6vw, 72px);
  --fs-h2:      clamp(32px, 4vw, 52px);
  --fs-h3:      28px;
  --fs-body:    17px;
  --fs-small:   14px;
  --fs-caption: 12px;

  --lh-tight:  0.95;
  --lh-snug:   1.1;
  --lh-body:   1.55;

  --tracking-caps:  0.06em;
  --tracking-tight: -0.02em;

  --sp-1:  4px;  --sp-2:  8px;  --sp-3:  12px; --sp-4:  16px;
  --sp-5:  24px; --sp-6:  32px; --sp-7:  48px; --sp-8:  64px;

  --r-card:  12px;
  --r-input: 8px;
  --r-pill:  999px;

  --bw:     2px;
  --border: var(--bw) solid var(--bwe-umber);

  --shadow-sm: 3px 3px 0 var(--bwe-umber);
  --shadow:    4px 4px 0 var(--bwe-umber);
  --shadow-lg: 6px 6px 0 var(--bwe-umber);

  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 140ms;
  --dur-base: 240ms;
}

/* ============================================================
   Reset
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }
body {
  font-family: var(--font-sans);
  background: var(--bwe-paper);
  color: var(--bwe-umber);
  line-height: var(--lh-body);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font-family: var(--font-sans); cursor: pointer; border: none; background: none; }
input, select, textarea { font-family: var(--font-sans); font-size: inherit; }

/* ============================================================
   Layout
   ============================================================ */
.container { max-width: 1100px; margin: 0 auto; padding: 0 var(--sp-5); }

/* ============================================================
   Header
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--bwe-blue);
  border-bottom: var(--border);
}
.site-header .container {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  height: 64px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--bwe-umber);
  flex-shrink: 0;
}
.brand img { border-radius: 50%; border: var(--border); }
.brand span { font-style: italic; }

.nav { display: flex; gap: var(--sp-1); flex: 1; }
.nav a {
  font-size: var(--fs-caption);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--bwe-umber);
  padding: 6px 12px;
  border-radius: var(--r-pill);
  transition: background var(--dur-fast), color var(--dur-fast);
}
.nav a:hover { background: var(--bwe-umber); color: var(--bwe-paper); text-decoration: none; }
.nav a.active { background: var(--bwe-umber); color: var(--bwe-paper); }

.nav-cta {
  background: var(--bwe-orange);
  color: var(--bwe-cream);
  border: var(--border);
  border-radius: var(--r-pill);
  padding: 8px 18px;
  font-size: var(--fs-caption);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  box-shadow: var(--shadow-sm);
  flex-shrink: 0;
  transition: box-shadow var(--dur-fast), transform var(--dur-fast);
}
.nav-cta:hover { box-shadow: 1px 1px 0 var(--bwe-umber); transform: translate(2px, 2px); text-decoration: none; }
.nav-cta.sign-in { background: var(--bwe-paper); color: var(--bwe-orange); }
.nav .nav-subscribe-mobile { display: none; }

/* ============================================================
   Hero
   ============================================================ */
.hero {
  background: var(--bwe-blue);
  border-bottom: var(--border);
  padding: var(--sp-7) 0 var(--sp-7);
}
.hero .container {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-5);
}
.hero h1 {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-h1);
  font-weight: 400;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--bwe-umber);
  margin: 0 0 var(--sp-4);
}
.hero .sub {
  font-size: var(--fs-caption);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--bwe-umber);
}
.mascot { opacity: 0.9; flex-shrink: 0; }

/* ============================================================
   Page head (communities / about)
   ============================================================ */
.page-head {
  background: var(--bwe-blue);
  border-bottom: var(--border);
  padding: var(--sp-7) 0 var(--sp-6);
}
.page-head h1 {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-h1);
  font-weight: 400;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--bwe-umber);
  margin: 0 0 var(--sp-3);
}
.page-head p {
  font-size: var(--fs-caption);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--bwe-umber);
}

/* ============================================================
   Filter bar
   ============================================================ */
.filter-bar {
  position: sticky;
  top: 64px;
  z-index: 90;
  background: var(--bwe-paper);
  border-bottom: var(--border);
  padding: var(--sp-4) 0;
}
.filter-bar .container { display: flex; flex-direction: column; gap: var(--sp-3); }
.filter-bar-header { display: flex; align-items: center; gap: 12px; }
.filter-toggle-btn {
  background: none;
  border: 2px solid var(--bwe-umber);
  border-radius: var(--r-pill);
  padding: 5px 14px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
  color: var(--bwe-umber);
  transition: background 140ms;
}
.filter-toggle-btn:hover { background: var(--bwe-blue); }

.search {
  display: flex;
  align-items: center;
  gap: 10px;
  background: white;
  border: var(--border);
  border-radius: var(--r-pill);
  padding: 8px 16px;
  max-width: 480px;
}
.search svg {
  width: 18px;
  height: 18px;
  stroke: var(--bwe-umber-soft);
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}
.search input {
  border: none;
  outline: none;
  background: none;
  font-size: var(--fs-small);
  color: var(--bwe-umber);
  width: 100%;
}
.search input::placeholder { color: var(--bwe-umber-soft); }

.tag-pill {
  background: var(--bwe-paper);
  color: var(--bwe-umber);
  border: var(--border);
  border-radius: var(--r-pill);
  padding: 5px 14px;
  font-size: var(--fs-caption);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.tag-pill:hover { background: var(--bwe-umber); color: var(--bwe-paper); }
.tag-pill.on { background: var(--bwe-orange); color: var(--bwe-cream); border-color: var(--bwe-umber); }

.clear-btn {
  color: var(--bwe-umber-soft);
  font-size: var(--fs-caption);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 5px 8px;
}
.clear-btn:hover { color: var(--bwe-umber); }

/* ============================================================
   Events list
   ============================================================ */
.events { padding: var(--sp-6) 0 var(--sp-8); }

.events-month {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-h3);
  font-weight: 400;
  color: var(--bwe-orange);
  margin: var(--sp-6) 0 var(--sp-4);
  letter-spacing: var(--tracking-tight);
}

.event {
  display: flex;
  gap: var(--sp-5);
  align-items: flex-start;
  background: white;
  border: var(--border);
  border-radius: var(--r-card);
  padding: var(--sp-5);
  margin-bottom: var(--sp-3);
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: transform var(--dur-fast), box-shadow var(--dur-fast);
}
.event:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow-lg); }
.event.featured { background: var(--bwe-featured-bg); border-color: var(--bwe-orange); box-shadow: 4px 4px 0 var(--bwe-orange); }

.event-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--bwe-blue);
  border: var(--border);
  border-radius: var(--r-input);
  padding: 10px 14px;
  min-width: 64px;
  flex-shrink: 0;
  text-align: center;
}
.event-date .d {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 400;
  line-height: 1;
  color: var(--bwe-umber);
}
.event-date .m {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--bwe-umber);
  margin-top: 2px;
}

.event-body { flex: 1; min-width: 0; }
.event-body h3 { font-size: 17px; font-weight: 700; margin: 0 0 var(--sp-2); line-height: 1.3; color: var(--bwe-umber); }
.event-meta { display: flex; flex-wrap: wrap; gap: 6px; font-size: var(--fs-small); color: var(--bwe-umber-soft); margin-bottom: 10px; }
.event-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.event-tag {
  background: var(--bwe-blue);
  color: var(--bwe-umber);
  border: 1.5px solid var(--bwe-umber);
  border-radius: var(--r-pill);
  padding: 2px 10px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.event-actions {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  align-items: flex-end;
  flex-shrink: 0;
}
.save-btn {
  border: var(--border);
  border-radius: var(--r-pill);
  width: 36px;
  height: 36px;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bwe-umber-soft);
  transition: all var(--dur-fast);
}
.save-btn:hover { background: #FFE0E0; color: var(--bwe-danger); border-color: var(--bwe-danger); }
.save-btn.on { background: #FFE0E0; color: var(--bwe-danger); border-color: var(--bwe-danger); }

.event-rsvp {
  background: var(--bwe-orange);
  color: var(--bwe-cream);
  border: var(--border);
  border-radius: var(--r-pill);
  padding: 8px 14px;
  font-size: var(--fs-caption);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  box-shadow: var(--shadow-sm);
  white-space: nowrap;
  transition: box-shadow var(--dur-fast), transform var(--dur-fast);
}
.event-rsvp:hover { box-shadow: none; transform: translate(2px, 2px); text-decoration: none; }

.event-empty {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-h3);
  font-weight: 400;
  color: var(--bwe-umber-soft);
  text-align: center;
  padding: var(--sp-8) 0;
}

/* ============================================================
   Modal
   ============================================================ */
.modal-shell {
  position: fixed;
  inset: 0;
  background: var(--bwe-overlay);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-5);
}
.modal {
  background: var(--bwe-paper);
  border: var(--border);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 640px;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
}
.modal-close {
  position: absolute;
  top: var(--sp-4);
  right: var(--sp-4);
  background: var(--bwe-umber);
  color: var(--bwe-paper);
  border-radius: var(--r-pill);
  width: 32px;
  height: 32px;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.modal-close:hover { background: var(--bwe-ink); }

.modal-head {
  display: flex;
  gap: var(--sp-5);
  padding: var(--sp-5) var(--sp-5) var(--sp-4);
  border-bottom: var(--border);
  align-items: flex-start;
}
.stamp {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--bwe-blue);
  border: var(--border);
  border-radius: var(--r-input);
  padding: 10px 14px;
  min-width: 64px;
  flex-shrink: 0;
  text-align: center;
}
.stamp .d { font-family: var(--font-display); font-size: 28px; font-weight: 400; line-height: 1; }
.stamp .m { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; margin-top: 2px; }
.modal-head h2 { font-size: 20px; font-weight: 700; margin: 0 0 10px; line-height: 1.3; }
.modal-head .meta { display: flex; flex-wrap: wrap; gap: var(--sp-2); font-size: var(--fs-small); color: var(--bwe-umber-soft); }

.modal-body { padding: var(--sp-4) var(--sp-5) var(--sp-5); }
.modal-body .desc { font-size: 15px; line-height: 1.65; margin-bottom: var(--sp-4); color: var(--bwe-umber); }
.modal-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--sp-5); }
.modal-body h3 { font-size: var(--fs-caption); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: var(--sp-3); color: var(--bwe-umber-soft); }
.modal-photos { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-2); margin-bottom: var(--sp-5); }
.modal-photos img { width: 100%; height: 140px; object-fit: cover; border: var(--border); border-radius: var(--r-input); }
.modal-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: var(--border);
  padding-top: var(--sp-4);
}
.modal-foot .host { font-size: var(--fs-small); color: var(--bwe-umber-soft); }
.modal-foot .actions { display: flex; gap: var(--sp-2); align-items: center; }
.modal-rsvp {
  background: var(--bwe-orange);
  color: var(--bwe-cream);
  border: var(--border);
  border-radius: var(--r-pill);
  padding: 10px 20px;
  font-size: var(--fs-small);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur-fast), transform var(--dur-fast);
}
.modal-rsvp:hover { box-shadow: none; transform: translate(2px, 2px); text-decoration: none; }

/* ============================================================
   Communities
   ============================================================ */
.community-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--sp-4);
  padding: var(--sp-5) 0;
}
.community-card {
  background: white;
  border: var(--border);
  border-radius: var(--r-card);
  padding: var(--sp-5);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.community-logo {
  width: 52px;
  height: 52px;
  border-radius: var(--r-input);
  background: var(--bwe-blue);
  border: var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 17px;
  font-weight: 400;
  color: var(--bwe-umber);
  margin-bottom: var(--sp-1);
}
.community-card h3 { font-size: 16px; font-weight: 700; line-height: 1.3; }
.community-card p { font-size: var(--fs-small); color: var(--bwe-umber-soft); line-height: 1.5; flex: 1; }
.community-card .meta { font-size: var(--fs-caption); color: var(--bwe-umber-soft); display: flex; gap: var(--sp-1); }
.join-btn {
  background: var(--bwe-paper);
  color: var(--bwe-umber);
  border: var(--border);
  border-radius: var(--r-pill);
  padding: 8px 16px;
  font-size: var(--fs-caption);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  box-shadow: var(--shadow-sm);
  margin-top: var(--sp-1);
  align-self: flex-start;
  transition: all var(--dur-fast);
}
.join-btn:hover { background: var(--bwe-umber); color: var(--bwe-paper); box-shadow: none; }
.join-btn.on { background: var(--bwe-orange); color: var(--bwe-cream); }

/* ============================================================
   About
   ============================================================ */
.about {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: var(--sp-8);
  padding: var(--sp-7) 0 var(--sp-8);
  align-items: flex-start;
}
.photo {
  position: sticky;
  top: 88px;
  aspect-ratio: 3/4;
  background: var(--bwe-blue);
  border: var(--border);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.placeholder { font-family: var(--font-display); font-size: 64px; font-weight: 400; color: var(--bwe-umber); }
.ph-tag { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--bwe-umber-soft); margin-top: var(--sp-2); }
.about-prose h1 {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-h1);
  font-weight: 400;
  color: var(--bwe-orange);
  margin: 0 0 var(--sp-5);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
}
.about-prose h2 { font-size: var(--fs-h4); font-weight: 700; margin: var(--sp-6) 0 var(--sp-3); }
.about-prose p { font-size: 15px; line-height: 1.7; color: var(--bwe-umber); margin-bottom: var(--sp-4); }
.about-prose .lead { font-size: 17px; line-height: 1.6; font-weight: 500; }
.about-prose ul { padding-left: 20px; margin-bottom: var(--sp-4); }
.about-prose ul li { font-size: 15px; line-height: 1.7; margin-bottom: 6px; }

/* ============================================================
   Login
   ============================================================ */
.login-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bwe-blue);
  padding: var(--sp-5);
}
.login-card {
  background: var(--bwe-paper);
  border: var(--border);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-lg);
  padding: 40px;
  width: 100%;
  max-width: 420px;
}
.mascot-bubble { text-align: center; margin-bottom: var(--sp-4); }
.mascot-bubble img { width: 72px; height: 72px; margin: 0 auto; border-radius: 50%; border: var(--border); }
.login-card h1 {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 36px;
  font-weight: 400;
  color: var(--bwe-orange);
  text-align: center;
  margin-bottom: 6px;
  line-height: var(--lh-snug);
}
.login-card .sub { text-align: center; font-size: var(--fs-caption); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--bwe-umber-soft); margin-bottom: 28px; }

.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--sp-4); }
.field label { font-size: var(--fs-caption); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.field input, .field select, .field textarea {
  border: var(--border);
  border-radius: var(--r-input);
  padding: 10px 14px;
  font-size: var(--fs-small);
  background: white;
  color: var(--bwe-umber);
  outline: none;
  transition: border-color var(--dur-fast);
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--bwe-orange); }
.field textarea { min-height: 80px; resize: vertical; }

.login-btn {
  width: 100%;
  background: var(--bwe-orange);
  color: var(--bwe-cream);
  border: var(--border);
  border-radius: var(--r-pill);
  padding: 14px;
  font-size: var(--fs-small);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  box-shadow: var(--shadow);
  margin-top: var(--sp-2);
  transition: box-shadow var(--dur-fast), transform var(--dur-fast);
}
.login-btn:hover { box-shadow: var(--shadow-sm); transform: translate(1px, 1px); }
.login-err { color: #c0392b; font-size: var(--fs-small); font-weight: 700; margin-top: 10px; text-align: center; min-height: 20px; }
.login-hint { font-size: var(--fs-caption); color: var(--bwe-umber-soft); text-align: center; line-height: 1.55; margin-top: var(--sp-5); }
.back { text-align: center; margin-top: var(--sp-4); font-size: var(--fs-small); }
.back a { color: var(--bwe-orange); font-weight: 700; text-decoration: underline; }

/* ============================================================
   Admin bar
   ============================================================ */
.admin-bar {
  background: var(--bwe-umber);
  color: var(--bwe-paper);
  font-size: var(--fs-caption);
  font-weight: 700;
  padding: 8px 0;
  border-bottom: 2px solid var(--bwe-ink);
}
.admin-bar .container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--sp-2); }
.admin-bar a { color: var(--bwe-blue); text-decoration: underline; }
.admin-bar button { color: var(--bwe-blue); font-size: var(--fs-caption); font-weight: 700; text-decoration: underline; }

/* ============================================================
   Admin shell
   ============================================================ */
.admin-shell { padding: var(--sp-6) 0 var(--sp-8); }
.admin-shell h1 {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-h1);
  font-weight: 400;
  color: var(--bwe-orange);
  margin-bottom: 6px;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
}
.admin-shell .sub { font-size: var(--fs-caption); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--bwe-umber-soft); margin-bottom: var(--sp-5); }

.tabs { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-5); flex-wrap: wrap; }
.tab {
  background: var(--bwe-paper);
  color: var(--bwe-umber);
  border: var(--border);
  border-radius: var(--r-pill);
  padding: 8px 20px;
  font-size: var(--fs-small);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  box-shadow: var(--shadow-sm);
  transition: all var(--dur-fast);
}
.tab.on { background: var(--bwe-orange); color: var(--bwe-cream); box-shadow: none; }
.tab:hover:not(.on) { background: var(--bwe-umber); color: var(--bwe-paper); box-shadow: none; }

.panel { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); align-items: flex-start; }

.form-card {
  background: white;
  border: var(--border);
  border-radius: var(--r-card);
  padding: var(--sp-5);
  box-shadow: var(--shadow);
}
.form-card h2 { font-size: 18px; font-weight: 700; margin-bottom: var(--sp-5); }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--sp-3); }
.tag-picker { display: flex; flex-wrap: wrap; gap: 6px; }

.submit-btn {
  width: 100%;
  background: var(--bwe-orange);
  color: var(--bwe-cream);
  border: var(--border);
  border-radius: var(--r-pill);
  padding: 12px;
  font-size: var(--fs-small);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  box-shadow: var(--shadow-sm);
  margin-top: var(--sp-4);
  transition: box-shadow var(--dur-fast), transform var(--dur-fast);
}
.submit-btn:hover { box-shadow: none; transform: translate(2px, 2px); }

.toast { margin-top: 10px; font-size: var(--fs-small); font-weight: 700; min-height: 20px; color: transparent; transition: color var(--dur-base); }
.toast.on { color: #27ae60; }

.list-card {
  background: white;
  border: var(--border);
  border-radius: var(--r-card);
  padding: var(--sp-4);
  box-shadow: var(--shadow);
}
.list-card h3 { font-size: var(--fs-caption); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-caps); margin-bottom: var(--sp-4); color: var(--bwe-umber-soft); }
.list-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid #EEE;
}
.list-item:last-child { border-bottom: none; }
.list-item .t { font-size: var(--fs-small); font-weight: 700; margin-bottom: 2px; }
.list-item .m { font-size: var(--fs-caption); color: var(--bwe-umber-soft); }

.badge {
  display: inline-block;
  background: var(--bwe-orange);
  color: var(--bwe-cream);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: var(--r-pill);
  padding: 1px 7px;
}
.del {
  background: none;
  border: 1.5px solid #c0392b;
  color: #c0392b;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: var(--fs-caption);
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
  transition: all var(--dur-fast);
}
.del:hover { background: #c0392b; color: white; }

/* ============================================================
   Account
   ============================================================ */
.acct-shell { padding: var(--sp-6) 0 var(--sp-8); }
.acct-tabs { display: flex; gap: var(--sp-2); margin: var(--sp-4) 0 var(--sp-6); flex-wrap: wrap; }
.acct-tab {
  background: var(--bwe-paper);
  color: var(--bwe-umber);
  border: var(--border);
  border-radius: var(--r-pill);
  padding: 8px 18px;
  font-size: var(--fs-small);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  box-shadow: var(--shadow-sm);
  transition: all var(--dur-fast);
}
.acct-tab.on { background: var(--bwe-orange); color: var(--bwe-cream); box-shadow: none; }
.acct-tab:hover:not(.on) { background: var(--bwe-umber); color: var(--bwe-paper); box-shadow: none; }

.empty {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-h3);
  font-weight: 400;
  color: var(--bwe-umber-soft);
  padding: var(--sp-7) 0;
  text-align: center;
  line-height: 1.5;
}
.post-cta {
  display: inline-block;
  margin-top: var(--sp-3);
  font-style: normal;
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  background: var(--bwe-orange);
  color: var(--bwe-cream);
  border: var(--border);
  border-radius: var(--r-pill);
  padding: 8px 18px;
  box-shadow: var(--shadow-sm);
}
.post-cta:hover { text-decoration: none; box-shadow: none; transform: translate(2px, 2px); }

/* ============================================================
   Footer
   ============================================================ */
.site-footer {
  background: var(--bwe-orange);
  border-top: var(--border);
  padding: var(--sp-7) 0;
}
.site-footer .container { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-7); align-items: start; }
.site-footer h2 {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-h2);
  font-weight: 400;
  color: var(--bwe-cream);
  margin: 0 0 var(--sp-1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
}
.site-footer p { color: var(--bwe-cream); font-size: var(--fs-small); }
.links { display: flex; flex-direction: column; gap: var(--sp-2); }
.links a { color: var(--bwe-cream); font-size: var(--fs-small); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-caps); }
.links a:hover { text-decoration: underline; }
.legal { color: var(--bwe-cream); font-size: var(--fs-caption); margin-top: var(--sp-4); opacity: 0.75; }
.footer-btn {
  display: inline-block;
  background: var(--bwe-cream);
  color: var(--bwe-orange);
  border: var(--border);
  border-radius: var(--r-pill);
  padding: 12px 22px;
  font-weight: 700;
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.footer-btn:hover { box-shadow: 1px 1px 0 var(--bwe-umber); transform: translate(2px, 2px); }

/* ============================================================
   Nav toggle (hamburger)
   ============================================================ */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  border: var(--border);
  border-radius: var(--r-input);
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
  margin-left: auto;
}
.nav-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--bwe-umber);
  border-radius: 2px;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 820px) {
  .hero .container { flex-direction: column; gap: var(--sp-4); }
  .mascot { width: 160px !important; }
  .about { grid-template-columns: 1fr; gap: var(--sp-6); }
  .photo { position: static; aspect-ratio: 4/3; max-height: 300px; }
  .panel { grid-template-columns: 1fr; }
  .row2, .row3 { grid-template-columns: 1fr; }
  .site-footer .container { grid-template-columns: 1fr; gap: var(--sp-6); }
  .modal-photos { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  /* Navigation */
  .nav-toggle { display: flex; }
  .nav-cta { display: none; }
  .nav .nav-subscribe-mobile { display: none; }
  .nav.open .nav-subscribe-mobile { display: block; font-weight: 700; color: var(--bwe-orange) !important; }
  .nav {
    display: none;
    position: absolute;
    top: 64px;
    left: 0;
    right: 0;
    flex-direction: column;
    background: var(--bwe-blue);
    border-bottom: var(--border);
    padding: var(--sp-3) var(--sp-4) var(--sp-4);
    z-index: 99;
    gap: 2px;
    box-shadow: 0 4px 0 var(--bwe-umber);
  }
  .nav.open { display: flex; }
  .nav a { padding: 12px; }

  /* Hero */
  .hero { padding: var(--sp-5) 0; }
  .hero h1 { font-size: clamp(34px, 9vw, 56px); }
  .mascot { display: none; }

  /* Events — grid layout so buttons are always below content */
  .events { padding: var(--sp-4) 0 var(--sp-6); }
  .events-month { font-size: 22px; margin: var(--sp-4) 0 var(--sp-3); }
  .event {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas: "date body" "actions actions";
    gap: var(--sp-3);
    padding: var(--sp-3);
  }
  .event-date { grid-area: date; }
  .event-body { grid-area: body; min-width: 0; }
  .event-body h3 { font-size: 15px; overflow-wrap: break-word; word-break: break-word; }
  .event-meta { font-size: 12px; flex-wrap: wrap; overflow-wrap: break-word; }
  .event-actions {
    grid-area: actions;
    flex-direction: row;
    width: 100%;
    justify-content: flex-end;
    border-top: 1px solid rgba(58,42,31,0.12);
    padding-top: var(--sp-3);
  }

  /* Modal — slides up from bottom on mobile */
  .modal-shell { padding: var(--sp-3); align-items: flex-end; }
  .modal { border-radius: var(--r-card) var(--r-card) 0 0; max-height: 85vh; }
  .modal-head { flex-direction: column; gap: var(--sp-3); }
  .modal-head h2 { font-size: 17px; overflow-wrap: break-word; }

  /* Communities */
  .community-grid { grid-template-columns: 1fr; padding: var(--sp-3) 0; }

  /* Subscribe form */
  .subscribe-row { flex-direction: column !important; }
  .subscribe-row button { width: 100% !important; }
  .subscribe-row input { width: 100%; }
}

/* ============================================================
   Placeholder space reservations — prevent CLS on JS injection
   ============================================================ */
#bwe-header    { min-height: 66px; }  /* 64px container + 2px border */
#events-app    { min-height: 600px; }
#cal-app       { min-height: 500px; }
#community-app { min-height: 400px; }
#root          { min-height: 400px; }

@keyframes pulse {
  0%, 100% { opacity: 0.4; }
  50%       { opacity: 0.7; }
}