:root {
  --navy: #5c8a63;
  --navy-2: #35513a;
  --sky: #a9773f;
  --sky-soft: #f3ecdc;
  --sage-soft: #e4ecdd;
  --gold: #c99a44;
  --cream: #f6f1e5;
  --white: #ffffff;
  --ink: #23301f;
  --muted: #7c7565;
  --line: #e6ddc9;
  --soft: #efe8d8;
  --shadow: 0 20px 55px rgba(53, 81, 58, .16);
  --radius: 24px;
  --content: 1160px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--ink); background: var(--white); line-height: 1.55; }
a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
.skip-link { position: fixed; z-index: 9999; left: 16px; top: -70px; padding: 12px 18px; background: var(--navy); color: #fff; border-radius: 12px; transition: .2s; }
.skip-link:focus { top: 16px; }
.content-width { width: min(var(--content), calc(100% - 40px)); margin-inline: auto; }
.section-pad { padding: 104px 0; }
.section-tint, .soft-bg { background: var(--cream); }
.sage-bg { background: var(--sage-soft); }
.section-dark { background: var(--navy-2); color: #fff; }
.eyebrow { margin: 0 0 12px; font-size: .76rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; color: var(--navy); }
.eyebrow.light { color: #e7dcc0; }
.sage-bg .eyebrow { color: var(--navy-2); }
.section-heading { max-width: 760px; margin-bottom: 44px; }
.section-heading h2, .split-heading h2 { margin: 0; font-size: clamp(2.1rem, 4vw, 3.4rem); line-height: 1.05; letter-spacing: -.04em; }
.section-heading > p:last-child, .split-heading > p { color: var(--muted); font-size: 1.04rem; max-width: 680px; }

.cetele-banner { background: var(--navy-2); color: #fff; }
.cetele-banner-bar { width: min(1240px, calc(100% - 32px)); margin: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 20px; padding: 14px 0; }
.cetele-banner-text { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: .92rem; }
.cetele-banner-text strong { font-size: .95rem; }
.cetele-banner-text span { color: rgba(255,255,255,.68); }
.cetele-banner-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.cetele-fill-btn { border: none; border-radius: 999px; padding: 10px 18px; background: var(--gold); color: var(--navy-2); font-weight: 800; font-size: .82rem; cursor: pointer; white-space: nowrap; }
.cetele-fill-btn:hover { background: #dcae5c; }
.cetele-dismiss { width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(255,255,255,.3); background: transparent; color: #fff; font-size: .95rem; line-height: 1; cursor: pointer; display: grid; place-items: center; flex-shrink: 0; }
.cetele-dismiss:hover { background: rgba(255,255,255,.14); }
.cetele-banner-form { background: var(--navy-2); padding: 0 0 26px; }
.cetele-banner-form .calendar-embed { width: min(1240px, calc(100% - 32px)); margin: auto; }
.cetele-banner-form iframe { display: block; background: #fff; }
@media (max-width: 640px) {
  .cetele-banner-bar { flex-direction: column; align-items: flex-start; }
  .cetele-banner-actions { width: 100%; justify-content: space-between; }
}

.site-header { position: sticky; top: 0; z-index: 1000; background: rgba(255,255,255,.94); backdrop-filter: blur(16px); border-bottom: 1px solid rgba(232,224,205,.8); }
.nav-shell { height: 76px; width: min(1240px, calc(100% - 32px)); margin: auto; display: flex; align-items: center; gap: 32px; }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; min-width: max-content; }
.brand-mark { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: white; font-weight: 900; font-size: 1.2rem; background: linear-gradient(145deg, var(--sky), var(--navy)); box-shadow: 0 10px 24px rgba(92,138,99,.24); }
.brand-copy { display: flex; flex-direction: column; line-height: 1.1; }
.brand-copy strong { font-size: .85rem; letter-spacing: .05em; }
.brand-copy small { margin-top: 4px; font-size: .68rem; color: var(--muted); letter-spacing: .14em; }
.desktop-nav { margin-left: auto; display: flex; align-items: center; gap: 24px; }
.desktop-nav a { text-decoration: none; font-size: .88rem; font-weight: 700; color: #33402c; }
.desktop-nav a:hover { color: var(--sky); }
.nav-actions { display: flex; align-items: center; gap: 10px; }
.language-toggle { border: 1px solid var(--line); background: var(--soft); padding: 8px 11px; border-radius: 999px; display: flex; gap: 6px; align-items: center; cursor: pointer; font-weight: 800; font-size: .78rem; }
.lang-option { color: #a39683; }
.lang-option.active { color: var(--navy); }
.lang-divider { color: #cbbdad; }
.menu-toggle { width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 12px; background: white; display: none; align-items: center; justify-content: center; flex-direction: column; gap: 4px; cursor: pointer; }
.menu-toggle span { display: block; width: 18px; height: 2px; background: var(--navy); border-radius: 5px; }
.mobile-nav { display: none; padding: 0 20px 20px; gap: 8px; flex-direction: column; }
.mobile-nav a { padding: 12px 14px; border-radius: 12px; text-decoration: none; font-weight: 700; background: var(--soft); }
.mobile-nav.open { display: flex; }

.hero { position: relative; overflow: hidden; min-height: 620px; display: grid; align-items: center; background: radial-gradient(circle at 78% 24%, #e2ead9 0, #f7f3e7 33%, #fff 66%); }
.hero-grid { display: grid; grid-template-columns: 1.14fr .86fr; gap: 72px; align-items: center; position: relative; z-index: 2; }
.hero-copy h1 { margin: 0; font-size: clamp(2.7rem, 5.4vw, 4.6rem); line-height: 1; letter-spacing: -.045em; color: var(--navy-2); }
.hero-lead { margin: 28px 0 0; max-width: 620px; font-size: 1.12rem; color: var(--muted); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 20px; border-radius: 14px; text-decoration: none; font-weight: 800; border: 1px solid transparent; transition: transform .2s, box-shadow .2s, background .2s; }
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--navy); color: white; box-shadow: 0 12px 26px rgba(53,81,58,.22); }
.btn-primary:hover { background: var(--navy-2); }
.btn-ghost { border-color: var(--line); background: rgba(255,255,255,.7); }
.btn-ghost-dark { border: 1px solid var(--line); color: var(--navy); background: #fff; }
.btn-light { background: #fff; color: var(--navy); }
.hero-panel { background: rgba(255,255,255,.82); border: 1px solid rgba(232,220,206,.9); border-radius: 30px; padding: 24px; box-shadow: var(--shadow); backdrop-filter: blur(14px); }
.hero-panel-top { display: flex; justify-content: space-between; align-items: center; padding: 4px 3px 18px; }
.panel-kicker { font-size: .76rem; letter-spacing: .11em; text-transform: uppercase; font-weight: 850; color: var(--navy); }
.status-pill, .placeholder-chip { display: inline-flex; width: fit-content; padding: 7px 10px; border-radius: 999px; background: var(--sky-soft); color: var(--navy); font-size: .72rem; font-weight: 800; }
.quick-link { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 14px; text-decoration: none; padding: 18px 12px; border-top: 1px solid var(--line); }
.quick-link:hover strong { color: var(--sky); }
.quick-icon { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--navy); color: #fff; font-size: .72rem; font-weight: 900; }
.quick-link strong, .quick-link small { display: block; }
.quick-link strong { font-size: .95rem; }
.quick-link small { margin-top: 3px; color: var(--muted); font-size: .78rem; }
.hero-decor { position: absolute; border-radius: 50%; filter: blur(2px); pointer-events: none; }
.decor-one { width: 420px; height: 420px; right: -180px; top: -120px; background: rgba(169,119,63,.12); }
.decor-two { width: 160px; height: 160px; left: -60px; bottom: 40px; background: rgba(201,154,68,.16); }

.intro-strip { padding-top: 82px; }
.communication-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.contact-card { min-height: 200px; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; display: flex; flex-direction: column; align-items: flex-start; box-shadow: 0 12px 34px rgba(53,81,58,.07); }
.contact-card h3 { margin: 32px 0 8px; font-size: 1.2rem; }
.contact-card p { margin: 0 0 18px; color: var(--muted); font-size: .9rem; }
.number-badge { min-width: 42px; height: 42px; padding: 0 10px; border-radius: 11px; display: grid; place-items: center; background: var(--sky-soft); color: var(--navy); font-weight: 900; font-size: .78rem; }
.coordinator-card { background: var(--navy); border-color: var(--navy); color: white; }
.coordinator-card p { color: rgba(255,255,255,.72); }
.coordinator-card .number-badge { background: rgba(255,255,255,.14); color: #fff; }
.coordinator-card .placeholder-chip { background: rgba(255,255,255,.13); color: #fff; }
.card-label { font-size: .72rem !important; text-transform: uppercase; letter-spacing: .09em; margin-top: 34px !important; margin-bottom: 0 !important; }
.coordinator-card h3 { margin-top: 8px; }

.resource-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; }
.resource-card { text-decoration: none; background: #fff; min-height: 170px; padding: 24px; border-radius: var(--radius); display: flex; flex-direction: column; justify-content: space-between; border: 1px solid #e4e9dc; transition: transform .2s, box-shadow .2s; }
.resource-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.resource-card span { color: var(--sky); font-weight: 900; font-size: .8rem; }
.resource-card strong { margin-top: auto; font-size: 1.15rem; }
.resource-card small { color: var(--muted); margin-top: 8px; }

.need-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.need-card { background: white; padding: 26px; border-radius: var(--radius); border: 1px dashed #b7cbb4; min-height: 180px; }
.need-icon { width: 44px; height: 44px; border-radius: 13px; background: var(--sage-soft); color: var(--navy); display: grid; place-items: center; font-size: .72rem; font-weight: 900; }
.need-card h3 { margin: 30px 0 8px; font-size: 1.02rem; }
.need-card p { margin: 0; color: var(--muted); font-size: .88rem; }

.calendar-embed { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow); background: #fff; }
.calendar-embed iframe { display: block; }
.embed-link { display: block; position: relative; cursor: pointer; transition: transform .2s, box-shadow .2s; }
.embed-link:hover, .embed-link:focus-visible { transform: translateY(-4px); box-shadow: 0 24px 48px rgba(53,81,58,.2); }
.embed-link iframe { pointer-events: none; }
.embed-link-hint { position: absolute; top: 16px; right: 16px; width: 34px; height: 34px; border-radius: 50%; background: var(--navy); color: #fff; display: grid; place-items: center; font-size: .95rem; font-weight: 900; opacity: 0; transform: translateY(-4px); transition: opacity .2s, transform .2s; }
.embed-link:hover .embed-link-hint, .embed-link:focus-visible .embed-link-hint { opacity: 1; transform: none; }

.house-group-label { margin: 36px 0 14px; font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.section-heading + .house-group-label { margin-top: 0; }
.house-curtain { display: flex; align-items: flex-end; overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 34px 0 14px; }
.house-curtain-item { position: relative; flex: 1 1 0; min-width: 0; margin-left: -70px; border-radius: 14px; overflow: hidden; border: 3px solid #fff; background: #fff; transition: transform .2s ease; }
.house-curtain-item:first-child { margin-left: 0; }
.house-curtain-item img { display: block; width: 100%; height: 300px; object-fit: cover; background: #fff; }
.house-curtain-caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 46px 14px 14px; background: linear-gradient(to top, rgba(24,34,26,.9) 25%, rgba(24,34,26,0)); color: #fff; display: flex; flex-direction: column; gap: 4px; }
.house-curtain-caption strong { font-size: .92rem; font-weight: 800; }
.house-curtain-caption span { font-size: .76rem; line-height: 1.4; color: rgba(255,255,255,.9); }
.house-curtain-item:hover, .house-curtain-item:focus-within { transform: translateY(-10px) scale(1.03); z-index: 5; }
@media (max-width: 720px) {
  .house-curtain { scroll-snap-type: x proximity; gap: 14px; padding: 18px 4px 20px; }
  .house-curtain-item { flex: 0 0 auto; width: 220px; margin-left: 0; scroll-snap-align: start; }
  .house-curtain-item img { height: 280px; }
  .house-curtain-item:hover, .house-curtain-item:focus-within { transform: none; }
}

.library-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.library-grid .resource-card { min-height: 0; padding: 16px; flex-direction: row; align-items: center; gap: 12px; }
.library-grid .resource-card strong { margin-top: 0; font-size: 1rem; }
@media (max-width: 720px) {
  .library-grid { grid-auto-flow: column; grid-auto-columns: 170px; grid-template-columns: none; overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; gap: 10px; padding-bottom: 4px; }
  .library-grid .resource-card { scroll-snap-align: start; }
}

.resource-icon { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 11px; background: var(--sage-soft); color: var(--navy); }

.scroll-shell { position: relative; isolation: isolate; }
.scroll-arrow { display: none; appearance: none; -webkit-appearance: none; position: absolute; top: 50%; right: 14px; transform: translateY(-50%); width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; border: 1px solid rgba(255,255,255,.7); background: rgba(24,34,26,.78); color: #fff; align-items: center; justify-content: center; cursor: pointer; z-index: 20; padding: 0; line-height: 0; transition: opacity .25s ease; box-shadow: 0 8px 20px rgba(0,0,0,.38); backdrop-filter: blur(3px); }
.scroll-arrow svg { display: block; }
.scroll-arrow.at-end { opacity: 0; pointer-events: none; }
.scroll-arrow-hidden { display: none !important; }
@media (max-width: 720px) and (hover: none) and (pointer: coarse) { .scroll-arrow { display: flex; } }

.closing { background: linear-gradient(135deg, var(--navy-2), var(--navy)); color: white; text-align: center; }
.closing-inner { max-width: 780px; }
.closing h2 { margin: 0; font-size: clamp(2.4rem, 5.4vw, 4.4rem); line-height: .98; letter-spacing: -.05em; }
.closing p:not(.eyebrow) { max-width: 620px; margin: 22px auto 30px; color: rgba(255,255,255,.72); font-size: 1.02rem; }
footer { background: #17211a; color: rgba(255,255,255,.65); padding: 24px 0; font-size: .76rem; }
.footer-inner { display: flex; gap: 18px; justify-content: space-between; }

.reveal { opacity: 0; transform: translateY(14px); transition: opacity .55s ease, transform .55s ease; }
.reveal.visible { opacity: 1; transform: none; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

@media (max-width: 980px) {
  .desktop-nav { display: none; }
  .menu-toggle { display: flex; }
  .hero-grid { grid-template-columns: 1fr; gap: 42px; }
  .hero { min-height: auto; }
  .hero-panel { max-width: 680px; }
  .communication-grid, .resource-grid, .need-grid { grid-template-columns: repeat(2, 1fr); }
  /* .campaign-grid's own responsive rules live with the rest of its styles further
     down this file (after its base declaration) — a rule here would need to come
     AFTER that base rule in source order to ever win the cascade, since both have
     equal specificity; keeping them together avoids that trap recurring. */
}
@media (max-width: 720px) {
  .section-pad { padding: 76px 0; }
  .content-width { width: min(100% - 28px, var(--content)); }
  .nav-shell { width: calc(100% - 24px); height: 68px; }
  .brand-copy strong { font-size: .72rem; }
  .brand-copy small { font-size: .59rem; }
  .hero-grid { gap: 34px; }
  .hero-copy h1 { font-size: clamp(2.6rem, 14vw, 3.6rem); }
  .hero-lead { font-size: 1rem; }
  .communication-grid, .resource-grid, .need-grid { grid-template-columns: 1fr; }
  .footer-inner { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ------------------------------------------------- coordinator sign-in (discreet) */
.coord-toggle {
  position: fixed; z-index: 60; right: 14px; bottom: 14px;
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25);
  background: rgba(23,33,26,.55); color: rgba(255,255,255,.6); cursor: pointer;
  display: grid; place-items: center; opacity: .5;
  transition: opacity .2s ease, background .2s ease, color .2s ease;
}
.coord-toggle:hover, .coord-toggle[aria-expanded="true"] { opacity: 1; background: var(--navy); color: #fff; }
/* Confirmed coordinator of this page's section — a small gold tell, still corner-sized. */
.coord-toggle.is-coordinator { background: var(--gold); border-color: var(--gold); color: var(--navy-2); opacity: .85; }

.coord-panel {
  position: fixed; z-index: 60; right: 14px; bottom: 60px; width: 260px;
  background: #fff; color: var(--ink); border: 1px solid var(--line);
  border-radius: 14px; box-shadow: var(--shadow); padding: 14px;
  max-height: calc(100vh - 90px); overflow-y: auto;
}
.coord-panel p { margin: 0 0 10px; font-size: .78rem; color: var(--muted); }
.coord-panel .coord-email { font-size: .74rem; word-break: break-all; color: var(--navy-2); font-weight: 700; margin: 0 0 10px; }
.coord-panel .btn { min-height: 36px; padding: 0 14px; font-size: .78rem; width: 100%; cursor: pointer; }
.coord-panel .btn + .btn { margin-top: 8px; }

/* Super-admin-only coordinator management block inside the same popover. */
.coord-manage { border-top: 1px solid var(--line); margin: 4px 0 10px; padding-top: 10px; }
.coord-manage-head { font-size: .68rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.coord-manage-empty { font-size: .74rem; color: var(--muted); margin: 0 0 8px; }
.coord-manage-row { display: flex; align-items: center; gap: 6px; padding: 5px 0; border-bottom: 1px solid var(--line); }
.coord-manage-row:last-of-type { border-bottom: 0; }
.coord-manage-row span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .72rem; }
.coord-remove-btn { flex: none; border: 0; background: transparent; color: #b91c1c; cursor: pointer; font-size: .8rem; padding: 2px 4px; border-radius: 6px; }
.coord-remove-btn:hover { background: #fdecec; }
.coord-manage-add { display: flex; gap: 6px; margin: 8px 0 10px; }
.coord-manage-add input {
  flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 8px;
  padding: 6px 8px; font-size: .72rem; background: transparent;
}
.coord-manage-add input:focus { outline: none; border-color: var(--navy); }
.coord-manage-add .btn { width: auto; padding: 0 12px; }

/* ------------------------------------------------------------ active campaigns */
.campaign-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
/* Kept right after the base rule on purpose — a media-query override for the same
   selector only wins the cascade if it comes AFTER the plain rule in source order
   (equal specificity, last one wins); putting it up with the page's other shared
   breakpoints at ~line 190 silently lost to this base rule every time. Campaign
   flyers are portrait cards, unlike the text-heavy cards in .communication-grid/
   .resource-grid/.need-grid, so this deliberately never drops below 2 columns. */
@media (max-width: 980px) {
  .campaign-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .campaign-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}
.campaign-card { position: relative; }
.campaign-stack { position: relative; aspect-ratio: 3 / 4; }
/* --i (set inline per .campaign-page) drives both the resting "peek" offset and, on
   hover/select, how far each page fans out — a single-page campaign has only --i:0, so
   this and the hover rule below both always resolve to no offset at all for it, with no
   extra CSS. The transform lives on the wrapper, not the <img> itself, so a PDF page's
   badge (see below) rides along with its thumbnail as one unit. */
.campaign-page {
  position: absolute; inset: 0;
  z-index: calc(20 - var(--i, 0));
  transform: rotate(calc(var(--i, 0) * 3deg)) translate(calc(var(--i, 0) * 5px), calc(var(--i, 0) * -6px));
  transition: transform .25s ease;
}
.campaign-card:hover .campaign-page,
.campaign-card.is-selected .campaign-page {
  transform: rotate(calc(var(--i, 0) * 9deg)) translate(calc(var(--i, 0) * 16px), calc(var(--i, 0) * -14px));
}
.campaign-page img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  border-radius: var(--radius); background: #fff; cursor: pointer;
  box-shadow: 0 10px 26px rgba(53,81,58,.18); transition: box-shadow .25s ease;
}
.campaign-card:hover .campaign-page img,
.campaign-card.is-selected .campaign-page img { box-shadow: 0 16px 34px rgba(53,81,58,.28); }
.campaign-pdf-badge {
  position: absolute; bottom: 10px; right: 10px; pointer-events: none;
  background: var(--navy-2); color: #fff; font-size: .62rem; font-weight: 800;
  letter-spacing: .05em; padding: 3px 8px; border-radius: 6px;
}
/* A multi-page PDF's own "deck of cards" tell — two static offset card-edges peeking
   out from behind its thumbnail, fanning out a bit further on hover/select. Separate
   from .campaign-page's own --i-driven fan (that one separates distinct UPLOADED
   FILES; this is about pages WITHIN a single PDF file), so both can coexist. */
.campaign-page-deck::before, .campaign-page-deck::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 6px 16px rgba(53,81,58,.14); transition: transform .25s ease;
}
.campaign-page-deck::after { z-index: -2; }
.campaign-page-deck::before { transform: rotate(-4deg) translate(-3px, 4px); }
.campaign-page-deck::after { transform: rotate(4deg) translate(4px, 5px); }
.campaign-card:hover .campaign-page-deck::before,
.campaign-card.is-selected .campaign-page-deck::before { transform: rotate(-9deg) translate(-11px, 9px); }
.campaign-card:hover .campaign-page-deck::after,
.campaign-card.is-selected .campaign-page-deck::after { transform: rotate(10deg) translate(12px, 11px); }
.campaign-title { margin-top: 14px; font-weight: 800; font-size: .92rem; color: var(--navy-2); text-align: center; }
.campaign-remove-btn {
  position: absolute; top: -10px; right: -10px; z-index: 30;
  width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line);
  background: #fff; color: #b91c1c; cursor: pointer; display: grid; place-items: center;
  font-size: .85rem; box-shadow: 0 6px 16px rgba(0,0,0,.18);
  opacity: 0; transition: opacity .18s ease;
}
.campaign-card:hover .campaign-remove-btn,
.campaign-card.is-selected .campaign-remove-btn { opacity: 1; }
.campaign-empty { color: var(--muted); font-size: .92rem; text-align: center; padding: 8px 0 4px; }
.campaign-add-btn { margin-top: 26px; }
/* .btn sets display:inline-flex unconditionally, and — being an author rule — that
   overrides the browser's own default [hidden]{display:none} regardless of specificity
   (origin wins before specificity in the cascade), so campaigns.js's addBtn.hidden =
   true was silently doing nothing at all without this explicit override. */
.campaign-add-btn[hidden] { display: none; }

.campaign-lightbox {
  /* z-index above .site-header's 1000 — otherwise the sticky nav bar (which stays in
     its own stacking context) renders on TOP of the dimmed backdrop instead of being
     covered by it. Extra top padding (vs. the other three sides) keeps the enlarged
     image from crowding the very top edge of the viewport. */
  position: fixed; inset: 0; z-index: 1200; display: none;
  align-items: center; justify-content: center;
  background: rgba(23,33,26,.82); backdrop-filter: blur(4px); padding: 96px 24px 64px;
}
.campaign-lightbox.open { display: flex; }
.campaign-lightbox-inner { position: relative; max-width: 90vw; max-height: 90vh; display: flex; align-items: center; }
.campaign-lightbox-img { max-width: 78vw; max-height: 84vh; border-radius: 12px; box-shadow: 0 30px 70px rgba(0,0,0,.5); display: block; }
.campaign-lightbox-close {
  position: absolute; top: -18px; right: -18px; width: 36px; height: 36px; border-radius: 50%;
  border: 0; background: #fff; color: var(--navy-2); font-size: 1.2rem; line-height: 1;
  cursor: pointer; display: grid; place-items: center; box-shadow: 0 8px 20px rgba(0,0,0,.3);
}
.campaign-lightbox-count {
  position: absolute; bottom: -30px; left: 50%; transform: translateX(-50%);
  color: #fff; font-size: .78rem; font-weight: 700; letter-spacing: .04em;
}
.campaign-lightbox-pdf-link {
  position: absolute; bottom: -58px; left: 50%; transform: translateX(-50%);
  color: #fff; font-size: .82rem; font-weight: 700; text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.5); white-space: nowrap;
}
.campaign-lightbox-pdf-link:hover { border-bottom-color: #fff; }
@media (max-width: 640px) {
  .campaign-lightbox { padding: 76px 16px 56px; }
  .campaign-lightbox-close { top: 8px; right: 8px; }
}

.campaign-modal-back {
  position: fixed; inset: 0; z-index: 1210; display: flex; align-items: center; justify-content: center;
  background: rgba(23,33,26,.55); padding: 20px;
}
.campaign-modal { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 26px; width: 100%; max-width: 380px; }
.campaign-modal h3 { margin: 0 0 4px; font-size: 1.1rem; color: var(--navy-2); }
.campaign-field-label { display: block; font-size: .78rem; font-weight: 700; color: var(--muted); margin: 14px 0 6px; }
.campaign-modal input[type=text] {
  width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 9px 10px; font-size: .9rem; background: transparent;
}
.campaign-modal input[type=text]:focus { outline: none; border-color: var(--navy); }
.campaign-modal input[type=file] { width: 100%; font-size: .84rem; }
.campaign-modal-status { min-height: 18px; font-size: .8rem; color: var(--muted); margin: 10px 0 0; }
.campaign-modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.campaign-modal-actions .btn { width: auto; padding: 0 16px; }

/* Multi-page PDF scrollable viewer — same darkened/blurred backdrop language as
   .campaign-lightbox (and the same above-.site-header z-index), but the content is a
   scrollable card of rendered pages stacked top-to-bottom, not a single swapped image. */
.campaign-pdf-viewer {
  position: fixed; inset: 0; z-index: 1200; display: none;
  align-items: flex-start; justify-content: center;
  background: rgba(23,33,26,.82); backdrop-filter: blur(4px); padding: 96px 24px 40px;
}
.campaign-pdf-viewer.open { display: flex; }
.campaign-pdf-viewer-inner {
  background: #fff; border-radius: 16px; width: 100%; max-width: 720px;
  max-height: calc(100vh - 136px); display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 30px 70px rgba(0,0,0,.5);
}
.campaign-pdf-viewer-head {
  flex: none; display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-bottom: 1px solid var(--line);
}
.campaign-pdf-viewer-open { color: var(--navy); font-weight: 800; font-size: .82rem; text-decoration: none; }
.campaign-pdf-viewer-open:hover { text-decoration: underline; }
.campaign-pdf-viewer-close { border: 0; background: transparent; font-size: 1.3rem; line-height: 1; cursor: pointer; color: var(--muted); }
.campaign-pdf-viewer-scroll { overflow-y: auto; padding: 20px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.campaign-pdf-viewer-page { max-width: 100%; height: auto; box-shadow: 0 8px 20px rgba(0,0,0,.18); border-radius: 4px; }
.campaign-pdf-viewer-status { color: var(--muted); font-size: .86rem; text-align: center; padding: 20px 0; }
@media (max-width: 640px) {
  .campaign-pdf-viewer { padding: 76px 12px 24px; }
}