/* Out of the Box with Genevieve
   Black and white, editorial and quiet. One serif with high contrast (like the logo),
   one clean sans for reading, one script used only for Genevieve's own voice. */
:root {
  --bg: #f9f6f7;       /* same as the box video background */
  --ink: #111111;
  --soft: #f9f6f7;     /* one background everywhere */
  --stage: #f8f6f7;
  --line: #e4e2df;
  --muted: #5d5b58;
  --on-ink: #ffffff;
  --font-display: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
  --font-body: "Jost", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --font-script: "Parisienne", "Snell Roundhand", cursive;
  --ease: cubic-bezier(.2, .7, .2, 1);
  color-scheme: light;
}

@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out .28s ease both; }
::view-transition-new(root) { animation: vt-in .45s var(--ease) both; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(8px); } }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font-body); font-size: 17px; line-height: 1.65; font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
img, video { max-width: 100%; }
.wrap {
  max-width: 1160px; margin-inline: auto;
  padding-left: max(20px, env(safe-area-inset-left, 0px));
  padding-right: max(20px, env(safe-area-inset-right, 0px));
}
@media (min-width: 900px) {
  .wrap { max-width: clamp(1320px, 82vw, 1680px); padding-left: clamp(51px, 8vw, 102px); padding-right: clamp(51px, 8vw, 102px); }
}
h1, h2, h3 { font-family: var(--font-display); font-weight: 500; line-height: 1.08; letter-spacing: -.01em; text-wrap: balance; margin: 0; }
h1 { font-size: clamp(2.6rem, 5.2vw, 4.4rem); }
h2 { font-size: clamp(2rem, 4vw, 3rem); }
h3 { font-size: 1.45rem; }
p { margin: 0; }
a { color: inherit; }
.eyebrow { font-size: .74rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.script { font-family: var(--font-script); font-weight: 400; line-height: 1; }
.muted { color: var(--muted); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }

/* Buttons and links */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  font: 500 .92rem/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase;
  padding: 1.15em 1.9em; border: 1px solid var(--ink); border-radius: 0;
  text-decoration: none; cursor: pointer; position: relative; overflow: hidden; isolation: isolate;
  background: var(--ink); color: var(--on-ink);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -14px rgba(0,0,0,.45); }
.btn-outline { background: transparent; color: var(--ink); }
.btn-light { background: var(--bg); color: var(--ink); border-color: var(--bg); }
.link {
  text-decoration: none; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; font-size: .85rem;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  padding-bottom: 4px; transition: background-size .45s var(--ease);
}
.link:hover { background-size: 0 1px; background-position: 100% 100%; }
.arrow { display: inline-block; }
.arrow { transition: transform .4s var(--ease); }
a:hover .arrow, button:hover .arrow { transform: translateX(4px); }
/* Give a box: letters hop one after another */
.chs { display: inline-block; white-space: nowrap; }
.ch { display: inline-block; white-space: pre; }
[data-donate]:hover .ch, [data-donate].hop .ch { animation: letter-hop .55s cubic-bezier(.3,.7,.4,1) both; animation-delay: calc(var(--i) * 45ms); }
[data-donate]:hover .arrow { transform: translateX(4px); transition-delay: .35s; }
@keyframes letter-hop { 0% { transform: translateY(0); } 35% { transform: translateY(-7px); } 65% { transform: translateY(1px); } 82% { transform: translateY(-1.5px); } 100% { transform: translateY(0); } }

/* Elephant line drawing */
.elephant { display: block; width: 100%; height: auto; overflow: visible; }
.elephant .ln { fill: var(--ele-fill, var(--bg)); stroke: var(--ele-stroke, var(--ink)); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.elephant .open { fill: none; }
.elephant .dot { fill: var(--ele-stroke, var(--ink)); stroke: none; }
.elephant .leg, .elephant .trunk { transform-box: fill-box; transition: transform .9s cubic-bezier(.45,.05,.25,1); }
.elephant.walking .leg { transform-box: fill-box; transform-origin: 50% 0; animation: step .5s ease-in-out infinite alternate; animation-delay: -.25s; }
.elephant.walking .leg.b { animation-delay: -.75s; }
.elephant.walking .torso { animation: bob .25s ease-in-out infinite alternate; }
@keyframes step { from { transform: rotate(-13deg); } to { transform: rotate(13deg); } }
@keyframes bob { to { transform: translateY(-1px); } }
@keyframes sway { from { transform: rotate(-5deg); } to { transform: rotate(6deg); } }

/* The wandering elephant */
.wanderer {
  position: fixed; left: 0; bottom: calc(-3px + env(safe-area-inset-bottom, 0px)); width: 66px; z-index: 30;
  pointer-events: none; will-change: transform; transform: translateX(-90px);
}
.wanderer .elephant { transition: transform .5s var(--ease); }
.wanderer.flip .elephant { transform: scaleX(-1); }
.wanderer.wave .trunk { transform: rotate(-38deg); transform-origin: 30% 22%; }
.wanderer { --dir: 1; }
.wanderer.flip { --dir: -1; }
.wanderer svg { pointer-events: auto; cursor: pointer; }
.wanderer.trumpet .trunk { transform: rotate(-40deg); transform-origin: 30% 22%; }
.wanderer.lift .trunk { transform: rotate(-14deg); transform-origin: 30% 22%; transition-duration: .7s; }
.wanderer.hop .elephant { animation: hop 1.1s var(--ease); }
@keyframes hop { 0%, 100% { translate: 0 0; } 18% { translate: 0 2px; scale: 1 .94; } 45% { translate: 0 -26px; scale: 1; } 70% { translate: 0 0; } 80% { translate: 0 1px; scale: 1 .96; } }
.fx { position: absolute; left: 80%; top: 10%; pointer-events: none; }
.wanderer.flip .fx.note { left: calc(100% - var(--x, 80%)); }
.wanderer.flip .fx.heart { left: calc(100% - var(--x, 45%)); }
.fx svg { display: block; width: 100%; height: auto; }
.fx path, .fx ellipse { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.fx.heart path { fill: var(--bg); }
.fx.note { filter: drop-shadow(0 0 .6px var(--bg)) drop-shadow(0 0 .6px var(--bg)); }
.fx.note ellipse { fill: var(--ink); }
.fx.heart { width: var(--w, 14px); top: -4px; left: var(--x, 45%); animation: float-up var(--t, 2.2s) var(--ease) forwards; }
.fx.note { width: var(--w, 13px); left: var(--x, 80%); animation: float-up var(--t, 1.9s) var(--ease) forwards; }
.fx.gift { width: 11px; left: 44%; top: 8%; animation: burst var(--t, 1.4s) cubic-bezier(.2,.7,.4,1) forwards; }
.wanderer.flip .fx.gift { left: 48%; }
.fx.gift rect, .fx.gift path { fill: var(--gift, var(--bg)); stroke: var(--ink); stroke-width: 1.6; stroke-linejoin: round; }
@keyframes burst {
  from { opacity: 0; transform: translate(0, 0) rotate(0) scale(.4); }
  12% { opacity: 1; }
  55% { opacity: 1; transform: translate(calc(var(--tx) * var(--dir)), var(--ty)) rotate(var(--rot)) scale(1); }
  to { opacity: 0; transform: translate(calc(var(--tx) * var(--dir) * 1.25), calc(var(--ty) + 34px)) rotate(calc(var(--rot) * 1.6)) scale(.9); }
}
@keyframes float-up { from { opacity: 0; transform: translate(0, 6px) scale(.5) rotate(0); } 20% { opacity: 1; } to { opacity: 0; transform: translate(calc(var(--dx, 0px) * var(--dir)), var(--rise, -48px)) scale(var(--s, 1.1)) rotate(var(--rot, 0deg)); } }
@media (max-width: 600px) { .wanderer { width: 50px; } }

/* Header */
header.site { background: var(--bg); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; view-transition-name: site-header; }
header.site .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 84px; }
.logo { position: relative; display: block; --dir: 1; }
.logo img { height: 50.8px; width: auto; display: block; }
/* Logo: on click, new rose stems grow out from the ends of the logo's sprigs */
.vine { position: absolute; top: calc(67% - 17px); width: 80px; height: 34px; pointer-events: none; }
.vine.left { right: calc(100% - 2px); }
.vine.right { left: calc(100% - 2px); transform: scaleX(-1); }
.vine svg { display: block; width: 100%; height: 100%; overflow: visible; }
.vine .stem { fill: none; stroke: var(--ink); stroke-width: .38; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; }
.vine .cup { fill: var(--ink); }
.vine .petal { fill: none; stroke: var(--bg); stroke-width: .7; stroke-linecap: round; }
.vine .bloom { transform: scale(0); }
.grown .vine .stem { stroke-dashoffset: 0; opacity: .78; transition: stroke-dashoffset 1.9s cubic-bezier(.35,.55,.25,1) calc(var(--d, 0s) + var(--seg, 0s)), opacity .01s linear calc(var(--d, 0s) + var(--seg, 0s)); }
.grown .vine .bloom { transform: scale(1); transition: transform .7s cubic-bezier(.3,1.5,.5,1) calc(var(--d, 0s) + var(--seg, 0s)); }
@media (max-width: 1000px) { .vine { width: 64px; height: 27.2px; top: calc(67% - 13.6px); } }
@media (max-width: 600px) { .vine.left { display: none; } .vine.right { width: 72px; height: 30.6px; top: calc(67% - 15.3px); } }
nav.main { display: flex; align-items: center; gap: 34px; }
nav.main > a:not(.btn) {
  text-decoration: none; font-size: .8rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; padding-bottom: 3px;
  transition: background-size .45s var(--ease);
}
nav.main > a:not(.btn):hover, nav.main > a[aria-current="page"] { background-size: 100% 1px; }
.nav-cta {
  text-decoration: none; font-size: .8rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  padding-bottom: 3px; border-bottom: 1.5px solid var(--ink);
}
.menu-toggle { display: none; background: none; border: 0; padding: 8px; cursor: pointer; color: var(--ink); }
.menu-toggle span { display: block; width: 24px; height: 1.5px; background: currentColor; margin: 6px 0; transition: transform .35s var(--ease), opacity .2s; }
@media (max-width: 1000px) {
  header.site .wrap { height: 72px; }
  .logo img { height: 40.4px; }
  .menu-toggle { display: block; }
  nav.main {
    position: absolute; top: 100%; left: 0; right: 0; background: var(--bg); border-bottom: 1px solid var(--line);
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 8px max(20px, env(safe-area-inset-right, 0px)) 24px max(20px, env(safe-area-inset-left, 0px));
    clip-path: inset(0 0 100% 0); transition: clip-path .5s var(--ease); visibility: hidden;
  }
  nav.main > a:not(.btn) { padding: 16px 0; border-bottom: 1px solid var(--line); background: none; font-size: .9rem; }
  nav.main .nav-cta { margin-top: 18px; align-self: flex-start; }
  header.site.open nav.main { clip-path: inset(0 0 0 0); visibility: visible; }
  header.site.open .menu-toggle span:first-child { transform: translateY(3.75px) rotate(45deg); }
  header.site.open .menu-toggle span:last-child { transform: translateY(-3.75px) rotate(-45deg); }
}

/* Page load + scroll reveal (content is visible by default; JS only hides what's below the fold) */
.rise { animation: rise 1s var(--ease) both; }
.rise.d1 { animation-delay: .1s; } .rise.d2 { animation-delay: .2s; } .rise.d3 { animation-delay: .32s; } .rise.d4 { animation-delay: .45s; }
@keyframes rise { from { opacity: 0; transform: translateY(22px); } }
.reveal { transition: opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.pre { opacity: 0; transform: translateY(28px); }

/* Sections */
section { position: relative; }
.pad { padding-block: clamp(64px, 9vw, 120px); }
.rule { border-top: 1px solid var(--line); }
.section-head { display: grid; gap: 16px; max-width: 680px; margin-bottom: 52px; }
.section-head p { color: var(--muted); font-size: 1.08rem; }
.dark { background: var(--ink); color: var(--on-ink); }
.dark .eyebrow, .dark .muted { color: #b5b3b0; }

/* Home: hero */
.hero .wrap { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(32px, 6vw, 80px); align-items: center; padding-block: clamp(34px, 5.95vw, 75px) clamp(40px, 7vw, 88px); }
.hero .lede { font-size: 1.2rem; color: var(--muted); max-width: 36ch; margin-top: 26px; }
.hero .hug { font-size: 2.7rem; margin-top: 22px; display: block; }
.hero .ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }
.stage {
  background: var(--bg); aspect-ratio: 1; width: 100%; max-width: 520px; justify-self: end; overflow: hidden;
  /* feather the edges so the video melts into the page */
  /* no edge fade or parallax: the video sits still and solid; its background already matches the page */
}
.stage video { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 860px) {
  .hero .wrap > div:first-child { text-align: center; }
  .hero-sub { text-align: center; }
  .hero-sub .lede { margin-inline: auto; }
  .hero-sub .ctas { justify-content: center; }
  .hero-sub .ctas .btn { min-width: 220px; }
}
@media (max-width: 860px) { .hero .wrap { grid-template-columns: 1fr; } .stage { justify-self: center; max-width: 440px; } .hero .hug { font-size: 2.3rem; } }

/* Home: the one box offer */
.offer { display: grid; grid-template-columns: .9fr 1.1fr; border: 1px solid var(--ink); }
.offer-price { padding: clamp(28px, 4vw, 52px); border-right: 1px solid var(--ink); display: flex; flex-direction: column; gap: 18px; }
.offer-price .amount { font-family: var(--font-display); font-size: clamp(3.4rem, 7vw, 5rem); line-height: 1; font-variant-numeric: lining-nums tabular-nums; }
.offer-price .per { font-size: .8rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.offer-price ul { list-style: none; margin: auto 0 0; padding: 18px 0 0; border-top: 1px solid var(--line); display: grid; gap: 8px; color: var(--muted); font-size: .98rem; }
.offer-price li::before { content: "—"; margin-right: 10px; color: var(--ink); }
.ways { display: grid; }
.way {
  display: block;
  padding: 30px clamp(24px, 4vw, 44px);
  border-bottom: 1px solid var(--line);
}
.way:last-child { border-bottom: 0; }
.way h3 { font-size: 1.6rem; }
.way p { margin-top: 6px; font-size: .97rem; }
.way .tagline { font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; margin-bottom: 8px; display: block; }
@media (max-width: 860px) { .offer { grid-template-columns: 1fr; } .offer-price { border-right: 0; border-bottom: 1px solid var(--ink); } }

/* Home: story teaser */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 7vw, 96px); align-items: center; }
.portrait { position: relative; overflow: hidden; }
.portrait img { display: block; width: 100%; height: auto; transition: transform 1.4s var(--ease); }
.portrait:hover img { transform: scale(1.03); }
.split .text { display: grid; gap: 22px; max-width: 54ch; }
.split .text p { color: var(--muted); }
.signature { font-size: 2.9rem; color: var(--ink); margin-top: 4px; }
.portrait-wrap { margin: 0; display: grid; gap: 14px; justify-items: center; }
.portrait-wrap .portrait { width: 100%; }
@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .split .text { justify-items: center; }
  .portrait-wrap { width: 100%; max-width: 440px; }
}

.facts { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.facts > div { padding: 40px 24px; text-align: center; border-right: 1px solid var(--line); }
.facts > div:last-child { border-right: 0; }
.facts b { display: block; font-family: var(--font-display); font-weight: 400; font-size: clamp(2.6rem, 5vw, 3.8rem); line-height: 1; font-variant-numeric: lining-nums tabular-nums; }
.facts span { display: block; margin-top: 12px; font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 640px) { .facts > div { padding: 28px 8px; } .facts span { letter-spacing: .1em; font-size: .68rem; } }

/* Events */
.event-list { border-top: 1px solid var(--ink); }
.event { display: grid; grid-template-columns: 110px 1fr auto; gap: 32px; align-items: center; padding-block: 30px; border-bottom: 1px solid var(--line); }
.event .date { font-variant-numeric: lining-nums tabular-nums; }
.event .m { display: block; font-size: .74rem; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.event .d { display: block; font-family: var(--font-display); font-size: 3rem; line-height: 1; }
.event h3 { font-size: 1.5rem; }
.event p { color: var(--muted); margin-top: 6px; max-width: 60ch; }
.event .when { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); text-align: right; white-space: nowrap; }
.empty { padding: 36px 0; color: var(--muted); border-bottom: 1px solid var(--line); }
.note-sample { display: inline-block; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; border: 1px dashed var(--muted); color: var(--muted); padding: 5px 10px; }
@media (max-width: 680px) { .event { grid-template-columns: 70px 1fr; gap: 18px; } .event .d { font-size: 2.2rem; } .event .when { grid-column: 2; text-align: left; white-space: normal; } }

/* Page hero (inner pages) */
.page-hero .wrap { padding-block: clamp(41px, 6.8vw, 88px) clamp(36px, 5vw, 64px); display: grid; gap: 20px; }
.page-hero p.lede { font-size: 1.2rem; color: var(--muted); max-width: 52ch; }

/* Forms */
.form { display: grid; gap: 30px; min-width: 0; }
.field { display: grid; gap: 8px; min-width: 0; }
.field label, .field legend, .step-title { font-size: .74rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 12px; }
legend { padding: 0; margin-bottom: 12px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 600px) { .row2 { grid-template-columns: 1fr; } }
input[type="text"], input[type="email"], input[type="tel"], select, textarea {
  width: 100%; font: 400 1.02rem/1.5 var(--font-body); color: var(--ink); background: transparent;
  border: 0; border-bottom: 1px solid #b9b6b2; border-radius: 0; padding: 10px 0; transition: border-color .3s;
}
textarea { min-height: 120px; resize: vertical; border: 1px solid #b9b6b2; padding: 14px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--ink); }
select { appearance: none; background: linear-gradient(45deg, transparent 50%, var(--ink) 50%) calc(100% - 10px) 55% / 6px 6px no-repeat, linear-gradient(-45deg, transparent 50%, var(--ink) 50%) calc(100% - 4px) 55% / 6px 6px no-repeat; padding-right: 28px; }
.hint { font-size: .86rem; color: var(--muted); }
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill input { position: absolute; opacity: 0; pointer-events: none; }
.pill span {
  display: inline-block; padding: .7em 1.2em; border: 1px solid #c9c6c2; cursor: pointer; font-size: .95rem;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s;
}
.pill span:hover { border-color: var(--ink); }
.pill input:checked + span { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.pill input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 3px; }
.form-note { padding: 16px 18px; background: var(--soft); font-size: .95rem; }

/* Contact page */
.contact-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(32px, 7vw, 96px); align-items: start; }
.info { display: grid; gap: 34px; }
.info h3 { font-size: .74rem; font-family: var(--font-body); font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.info p { font-size: 1.1rem; }
.sent { display: grid; gap: 14px; padding: 40px; border: 1px solid var(--ink); }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }

/* Story page */
.story-body { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(32px, 7vw, 96px); align-items: start; }
.story-body .portrait-wrap { position: sticky; top: 120px; align-self: start; }
.prose { display: grid; gap: 22px; max-width: 62ch; font-size: 1.08rem; }
.prose p { color: #383634; }
.prose .dropcap::first-letter { font-family: var(--font-display); float: left; font-size: 4.6rem; line-height: .82; padding: 8px 12px 0 0; }
blockquote.pull { margin: 18px 0; padding: 26px 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); font-family: var(--font-display); font-size: clamp(1.5rem, 2.8vw, 2rem); line-height: 1.3; }
@media (max-width: 860px) { .story-body { grid-template-columns: 1fr; } .story-body .portrait-wrap { position: static; max-width: 420px; margin-inline: auto; } }

/* Footer */
footer.site { background: var(--ink); color: #cfccc8; font-size: .94rem; }
footer.site .wrap { padding-block: clamp(64px, 9vw, 104px) 36px; display: grid; gap: 52px; }
.foot-cta { display: grid; grid-template-columns: auto 1fr auto; gap: clamp(24px, 5vw, 64px); align-items: center; padding-bottom: clamp(48px, 7vw, 72px); border-bottom: 1px solid #333; }
.foot-cta .ele-big { width: 150px; --ele-fill: var(--ink); --ele-stroke: var(--on-ink); }
.foot-cta h2 { color: var(--on-ink); max-width: 18ch; }
.foot-cta p { margin-top: 12px; max-width: 48ch; color: #b5b3b0; }
.foot-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; }
.foot-cols h4 { margin: 0 0 14px; font-size: .72rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--on-ink); }
.foot-cols a { text-decoration: none; display: block; padding: 2px 0; }
.foot-cols a:hover { color: var(--on-ink); }
.legal { border-top: 1px solid #333; padding-top: 28px; font-size: .78rem; line-height: 1.6; color: #9c9995; display: grid; gap: 10px; }
@media (max-width: 860px) {
  .foot-cta { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .foot-cta .ele-big { width: 110px; }
  .foot-cta h2, .foot-cta p { margin-inline: auto; }
}
@media (max-width: 560px) { .foot-cols { grid-template-columns: 1fr 1fr; } .foot-cols > div:last-child { grid-column: 1 / -1; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; }
  .reveal.pre { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

.give-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; margin-top: clamp(48px, 7vw, 80px); }
.give-cta h2 { font-size: 2rem; }
.give-cta p { margin-top: 8px; max-width: 52ch; }

/* Ways to give: three columns */
.trio { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); }
.trio article { display: grid; gap: 14px; align-content: start; padding: 40px clamp(20px, 3vw, 36px) 44px; border-right: 1px solid var(--line); min-width: 0; }
.trio article:last-child { border-right: 0; }
.trio h2 { font-size: clamp(1.7rem, 2.6vw, 2.1rem); }
@media (max-width: 860px) { .trio { grid-template-columns: 1fr; } .trio article { padding: 32px 20px; border-right: 0; border-bottom: 1px solid var(--line); } .trio article:last-child { border-bottom: 0; } }

/* Photos */
.photo-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 24px); }
.photo { margin: 0; display: grid; gap: 12px; min-width: 0; align-content: start; }
.photo img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.photo figcaption { font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(12px, 2vw, 20px); }
.gallery .photo img { aspect-ratio: 1; }
@media (max-width: 760px) { .photo-row { gap: 10px; } .photo-row figcaption { font-size: .58rem; letter-spacing: .1em; } .gallery { grid-template-columns: 1fr 1fr; } }
.h-small { font-size: clamp(1.6rem, 2.6vw, 2.2rem); }
.section-head:has(.h-small) { max-width: none; }
.nav-cta .arrow { margin-left: .45em; }
.vine .stem.main { stroke-width: .5; }
.vine .leaf { fill: none; stroke: var(--ink); stroke-width: .35; stroke-linejoin: round; opacity: .85; }
/* once grown, the new stems move in a faint breeze */
.vine .sway { transform-origin: 80px 17px; }
.grown .vine .sway { animation: breeze 7s ease-in-out 2.4s infinite alternate; }
.vine.right .sway { animation-delay: 3.4s; }
@keyframes breeze { from { transform: rotate(0deg); } 50% { transform: rotate(-1.8deg); } to { transform: rotate(1.2deg); } }
/* a soft silver glint sweeps across the lettering */
.logo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.9) 50%, transparent 62%) 130% 0 / 260% 100% no-repeat;
  -webkit-mask: url("img/logo.svg") 0 0 / 100% 100% no-repeat; mask: url("img/logo.svg") 0 0 / 100% 100% no-repeat;
}
.logo.shine::after { animation: sheen 1.8s cubic-bezier(.4,0,.2,1) .7s; }
@keyframes sheen { 0% { opacity: 1; background-position: 130% 0; } 100% { opacity: 1; background-position: -30% 0; } }

/* ------------------------------------------------------------------
   Motion layer: quiet, slow, and only when it helps.
   ------------------------------------------------------------------ */
/* Header tightens once you scroll, with a hairline that tracks reading progress */
header.site .wrap, .logo img { transition: height .5s var(--ease); }
header.site { transition: box-shadow .5s var(--ease); }
header.site.scrolled { box-shadow: 0 12px 30px -24px rgba(17,17,17,.35); }
header.site.scrolled .wrap { height: 68px; }
header.site.scrolled .logo img { height: 42.3px; }
@media (max-width: 1000px) { header.site.scrolled .wrap { height: 62px; } header.site.scrolled .logo img { height: 33.3px; } }
header.site::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--ink);
  transform: scaleX(var(--progress, 0)); transform-origin: left; opacity: .85;
}

/* Eyebrows get a hairline that draws in */
.eyebrow::before {
  content: ""; display: inline-block; width: 28px; height: 1px; background: currentColor;
  vertical-align: middle; margin-right: 14px; margin-top: -2px; transform-origin: left;
  transition: transform 1.1s var(--ease) .15s;
}
.reveal.pre .eyebrow::before, .pre > .eyebrow::before { transform: scaleX(0); }
.rise.eyebrow::before { animation: draw-x 1.2s var(--ease) .3s both; }
@keyframes draw-x { from { transform: scaleX(0); } }

/* Headings rise out of a mask */
.reveal h2 { transition: clip-path 1.2s var(--ease), transform 1.2s var(--ease); clip-path: inset(-20% -5% -30% -5%); }
.reveal.pre h2 { clip-path: inset(-20% -5% 100% -5%); transform: translateY(.45em); }

/* Photos settle into place, then breathe on hover */
.ph { display: block; overflow: hidden; }
.ph img { display: block; width: 100%; transition: transform 1.6s var(--ease); }
.ph img.zoom { scale: 1.2; }   /* "Packaged with care": brings the boxes in closer */
.reveal.pre .ph img, .reveal.pre.portrait-wrap img { transform: scale(1.08); }
.photo:hover .ph img, .event:hover .ph img { transform: scale(1.04); }
.portrait img { transition: transform 1.6s var(--ease); }

/* Events: rows warm up on hover */
.event { transition: border-color .5s var(--ease); }
.event:hover { border-bottom-color: var(--ink); }
.event h3 { transition: transform .5s var(--ease); }
.event:hover h3 { transform: translateX(4px); }
.event .ph img { height: 100%; object-fit: cover; }

/* Ways to give: a hairline draws under the title on hover */
.way, .trio article { position: relative; isolation: isolate; }
.way::before, .trio article::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: #f0eced; opacity: 0;
  transition: opacity .7s var(--ease);
}
.way:hover::before, .trio article:hover::before { opacity: 1; }
.way .tagline, .trio .eyebrow { transition: letter-spacing .7s var(--ease), color .7s var(--ease); }
.way:hover .tagline, .trio article:hover .eyebrow { letter-spacing: .26em; color: var(--ink); }

/* Pull quote rules draw from the center */
blockquote.pull { border: 0; position: relative; }
blockquote.pull::before, blockquote.pull::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: var(--ink); transition: transform 1.4s var(--ease) .1s; }
blockquote.pull::before { top: 0; } blockquote.pull::after { bottom: 0; }
blockquote.pull.pre::before, blockquote.pull.pre::after { transform: scaleX(0); }

/* Footer: the elephant lifts its trunk when you near the button */
.foot-cta .elephant .trunk { transform-box: fill-box; transform-origin: 30% 22%; transition: transform .7s var(--ease); }
.foot-cols > div { transition: opacity 1s var(--ease), transform 1s var(--ease); }
.foot-cols > div:nth-child(2) { transition-delay: .1s; } .foot-cols > div:nth-child(3) { transition-delay: .2s; }
.foot-cols.pre > div { opacity: 0; transform: translateY(16px); }

/* Hero video drifts a little slower than the page */

@media (prefers-reduced-motion: reduce) {
  header.site::after { display: none; }
  .reveal.pre h2 { clip-path: none; transform: none; }
  .foot-cols.pre > div { opacity: 1; transform: none; }
}

/* Paper grain: part of the backgrounds (not a full-screen layer), so phones colour the strip above
   the menu bar with the page's own off-white */
:root { --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .072 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
html { background-color: var(--bg); }
body { background: var(--grain) 0 0 / 220px 220px, var(--bg); }
header.site { background: var(--grain) 0 0 / 220px 220px, var(--bg); }
header.site::before { background: var(--grain) 0 0 / 220px 220px, var(--bg); }
footer.site { background: var(--grain) 0 0 / 220px 220px, var(--ink); }
/* the box video gets the same grain on top, so its background still blends into the page */
.stage { position: relative; }
.stage::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: var(--grain) 0 0 / 220px 220px; }

/* A little heart cursor over the elephant */
.wanderer svg { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='26' viewBox='-2 -2 28 26'%3E%3Cpath d='M12 20 C4 14 1 10 1 6.5 C1 3.4 3.4 1 6.3 1 C8.6 1 10.6 2.4 12 4.6 C13.4 2.4 15.4 1 17.7 1 C20.6 1 23 3.4 23 6.5 C23 10 20 14 12 20 Z' fill='%23f9f6f7' stroke='%23111' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") 14 12, pointer; }

/* 404: the elephant looks around for the missing page */
.lost .wrap { padding-block: clamp(64px, 10vw, 140px); display: grid; justify-items: center; text-align: center; gap: 20px; }
.lost .lede { font-size: 1.15rem; color: var(--muted); max-width: 46ch; }
.lost .ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 16px; }
.lost-ele { width: 170px; position: relative; margin-bottom: 14px; animation: look-around 6s ease-in-out infinite; }
.lost-ele::after {
  content: "?"; position: absolute; top: -34px; right: 6px; font-family: var(--font-display); font-size: 2.2rem; line-height: 1;
  animation: wonder 3s ease-in-out infinite;
}
.lost-ele .trunk { transform-box: fill-box; transform-origin: 30% 22%; animation: sniff 3s ease-in-out infinite; }
@keyframes look-around { 0%, 38% { transform: scaleX(1); } 46%, 84% { transform: scaleX(-1); } 92%, 100% { transform: scaleX(1); } }
@keyframes wonder { 0%, 100% { transform: translateY(0) rotate(-6deg); opacity: .9; } 50% { transform: translateY(-6px) rotate(8deg); opacity: 1; } }
@keyframes sniff { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-22deg); } }
@media (prefers-reduced-motion: reduce) { .lost-ele, .lost-ele::after, .lost-ele .trunk { animation: none; } }

/* Custom dropdown */
.cselect { position: relative; }
.cselect-native { position: absolute; inset: auto 0 0 0; height: 1px; opacity: 0; pointer-events: none; }
.cselect-btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font: 400 1.02rem/1.5 var(--font-body); color: var(--muted); background: transparent; text-align: left;
  border: 0; border-bottom: 1px solid #b9b6b2; border-radius: 0; padding: 10px 0; cursor: pointer;
  transition: border-color .3s var(--ease), color .3s var(--ease);
}
.cselect.has-value .cselect-btn { color: var(--ink); }
.cselect-btn:hover, .cselect.open .cselect-btn { border-color: var(--ink); }
.cselect-btn:focus-visible { outline: none; border-color: var(--ink); box-shadow: 0 1px 0 0 var(--ink); }
.cselect-chev { width: 11px; height: 8px; flex: none; transition: transform .45s var(--ease); }
.cselect-chev path, .cselect-list svg path { fill: none; stroke: var(--ink); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.cselect.open .cselect-chev { transform: rotate(180deg); }
.cselect-list {
  list-style: none; margin: 0; padding: 8px 0; position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 10;
  background: var(--bg); border: 1px solid var(--line); box-shadow: 0 22px 44px -28px rgba(17,17,17,.4);
  max-height: 280px; overflow-y: auto; outline: none;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .35s var(--ease), transform .45s var(--ease), visibility 0s linear .45s;
}
.cselect.open .cselect-list { opacity: 1; visibility: visible; transform: none; transition: opacity .35s var(--ease), transform .45s var(--ease); }
.cselect-list li {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 18px; cursor: pointer; font-size: .98rem; transition: background .25s var(--ease), padding-left .35s var(--ease);
}
.cselect-list li.active { background: #f0eced; padding-left: 22px; }
.cselect-list li svg { width: 12px; height: 10px; opacity: 0; transition: opacity .25s; }
.cselect-list li[aria-selected="true"] svg { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .cselect-list, .cselect.open .cselect-list { transition: none; transform: none; } }

/* Gallery: expandable grid + full-screen viewer */
.gallery .ph { border: 0; padding: 0; background: none; cursor: zoom-in; width: 100%; }
.gallery .extra { display: none; }
.gallery.expanded .extra { display: grid; animation: rise .8s var(--ease) both; }
.gallery.expanded .extra:nth-child(4n+2) { animation-delay: .06s; } .gallery.expanded .extra:nth-child(4n+3) { animation-delay: .12s; } .gallery.expanded .extra:nth-child(4n) { animation-delay: .18s; }
.gallery-more { margin: 36px auto 0; display: flex; width: fit-content; }
.lightbox {
  position: fixed; inset: 0; z-index: 80; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px;
  padding: max(24px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(24px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  background: rgba(17,17,17,.94); color: #f4f1f2; opacity: 0; transition: opacity .35s var(--ease);
}
.lightbox.open { opacity: 1; }
.lightbox figure { margin: 0; grid-column: 2; display: grid; justify-items: center; gap: 14px; min-width: 0; }
.lightbox img { max-width: 100%; max-height: 78vh; width: auto; height: auto; object-fit: contain; box-shadow: 0 30px 80px -30px rgba(0,0,0,.7); }
.lightbox img.in { animation: lb-in .5s var(--ease); }
@keyframes lb-in { from { opacity: 0; transform: scale(.985); } }
.lightbox figcaption { font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; color: #cfcbc8; }
.lb-nav, .lb-close { background: none; border: 1px solid rgba(255,255,255,.3); color: #fff; width: 48px; height: 48px; border-radius: 50%; font: 400 1.2rem/1 var(--font-body); cursor: pointer; transition: background .3s, border-color .3s; }
.lb-nav:hover, .lb-close:hover { background: rgba(255,255,255,.1); border-color: #fff; }
.lb-close { position: absolute; top: max(18px, env(safe-area-inset-top, 0px)); right: max(18px, env(safe-area-inset-right, 0px)); font-size: 1.6rem; }
.lb-count { position: absolute; left: 0; right: 0; bottom: max(14px, env(safe-area-inset-bottom, 0px)); margin: 0; text-align: center; font-size: .8rem; letter-spacing: .14em; color: #a9a5a2; font-variant-numeric: tabular-nums; }
.lb-nav { display: grid; place-items: center; }
.lb-nav svg { display: block; }
@media (max-width: 600px) {
  .lightbox { grid-template-columns: 1fr; }
  .lightbox figure { grid-column: 1; grid-row: 1; }
  .lb-nav { position: absolute; top: 50%; z-index: 2; width: 38px; height: 38px; margin-top: -19px; background: rgba(17,17,17,.45); border-color: rgba(255,255,255,.35); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
  .lb-prev { left: max(10px, env(safe-area-inset-left, 0px)); }
  .lb-next { right: max(10px, env(safe-area-inset-right, 0px)); }
  .lb-nav svg { width: 16px; height: 16px; }
}

/* Display type: Bodoni Moda at 500 with a sturdier optical size, so the hairlines read clearly */
h1, h2, h3, .offer-price .amount, .event .d, blockquote.pull, .prose .dropcap::first-letter, .lost-ele::after, .summary .amount {
  font-weight: 500; font-variation-settings: "opsz" 24;
}

/* Hero video: never shows controls or a play button, and can't be tapped */
.stage video { pointer-events: none; }
.stage video::-webkit-media-controls,
.stage video::-webkit-media-controls-panel,
.stage video::-webkit-media-controls-start-playback-button,
.stage video::-webkit-media-controls-overlay-play-button { display: none !important; -webkit-appearance: none; opacity: 0 !important; }

/* Hero video: larger; its empty edges match the page, so it can spill into the margin */
.hero { overflow-x: clip; }
@media (min-width: 861px) {
  .hero .wrap { grid-template-columns: 1.05fr .95fr; }
  .stage { width: 122%; max-width: 660px; margin-right: -8%; }
}
@media (max-width: 860px) { .stage { width: 118%; max-width: 560px; margin-right: 0; margin-inline: -9%; justify-self: center; } }

/* Revolving photo strip, directly under the events */
.marquee { position: relative; margin-top: clamp(40px, 6vw, 64px); }
.marquee-view {
  overflow: hidden;
}
.marquee-track { display: flex; gap: 14px; width: max-content; will-change: transform; }
.marquee a { display: block; width: clamp(150px, 18vw, 230px); flex: none; overflow: hidden; }
.marquee img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; transition: transform 1.2s var(--ease); }
.marquee a:hover img { transform: scale(1.05); }
.marquee a:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.mq-btn {
  position: absolute; top: 50%; z-index: 2; width: 32px; height: 46px; margin-top: -23px; padding: 10px;
  border: 0; background: none; cursor: pointer; color: #fff;
  opacity: 0; transition: opacity .4s var(--ease), transform .3s var(--ease);
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.55)) drop-shadow(0 0 10px rgba(0,0,0,.25));
}
.mq-btn svg { display: block; width: 100%; height: 100%; overflow: visible; }
.mq-btn path { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.mq-prev { left: max(10px, 2.5vw); } .mq-next { right: max(10px, 2.5vw); }
.marquee:hover .mq-btn, .mq-btn:focus-visible { opacity: 1; }
.mq-prev:hover { transform: translateX(-3px); } .mq-next:hover { transform: translateX(3px); }
.mq-btn:active { transform: scale(.9); }
.mq-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (hover: none) { .mq-btn { opacity: 1; width: 30px; height: 44px; margin-top: -22px; } }
.marquee.static .marquee-view { overflow-x: auto; }
.marquee.static .mq-btn { display: none; }

/* Walking elephant: a little more life */
.wanderer.arrive { animation: arrive 1.2s var(--ease) both; }
@keyframes arrive { from { opacity: 0; } }
.elephant .tail { transform-box: fill-box; transform-origin: 100% 0; }
.elephant .ear { transform-box: fill-box; transform-origin: 70% 10%; }
.elephant .eye { transform-box: fill-box; transform-origin: 50% 50%; transition: transform .08s; }
.wanderer.wag .tail { animation: wag .32s ease-in-out infinite alternate; }
.wanderer.flap .ear { animation: flap .45s ease-in-out 2 alternate; }
.wanderer.blink .eye { transform: scaleY(.15); }
.elephant.walking .tail { animation: sway-tail .9s ease-in-out infinite alternate; }
@keyframes wag { from { transform: rotate(-16deg); } to { transform: rotate(14deg); } }
@keyframes sway-tail { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } }
@keyframes flap { to { transform: rotate(-10deg) scaleX(.9); } }

/* A small handwritten word of encouragement */
.elephant-note {
  position: absolute; bottom: calc(100% + 6px); left: 50%; transform-origin: 50% 100%;
  white-space: nowrap; pointer-events: none;
  font-family: var(--font-script); font-size: 1.15rem; line-height: 1; color: var(--ink);
  padding: 6px 10px 4px; background: var(--bg); border: 1px solid var(--line); box-shadow: 0 8px 18px -12px rgba(17,17,17,.35);
  animation: note-pop .42s cubic-bezier(.2,1.4,.4,1) both;
}
.elephant-note.out { animation: note-drop .3s cubic-bezier(.5,0,.8,.4) both; }
@keyframes note-pop { from { opacity: 0; transform: translateX(-50%) translateY(8px) scale(.6); } to { opacity: 1; transform: translateX(-50%) scale(1); } }
@keyframes note-drop { from { opacity: 1; transform: translateX(-50%) scale(1); } to { opacity: 0; transform: translateX(-50%) translateY(6px) scale(.7); } }
@media (prefers-reduced-motion: reduce) { .elephant-note, .elephant-note.out { animation: none; transform: translateX(-50%); } }

/* Trunk: carried high, swinging gently all the time (uses `rotate`, so the poses below still apply on top) */
.elephant .trunk { transform-box: fill-box; transform-origin: 30% 22%; }
.elephant .trunk-swing { transform-box: fill-box; transform-origin: 30% 22%; transform: rotate(-38deg); animation: trunk-swing 3.4s ease-in-out infinite alternate; }
@keyframes trunk-swing { 0% { transform: rotate(-44deg); } 50% { transform: rotate(-33deg); } 100% { transform: rotate(-39deg); } }

/* Parts that move during the shout of joy */
.elephant .torso { transform-box: fill-box; transform-origin: 40% 88%; }
.elephant .eye { transform-box: fill-box; transform-origin: 50% 50%; }

/* Footer "Gift a box": no letter bounce */
footer.site [data-donate]:hover .ch { animation: none; }

.elephant .leg { transform-origin: 50% 0; }
.elephant .tail { transition: transform .6s cubic-bezier(.45,.05,.25,1); }
.wanderer.hop .elephant { animation: hop 1.2s cubic-bezier(.45,.05,.25,1); }
.wanderer .elephant { transition: transform .7s cubic-bezier(.45,.05,.25,1); }
.wanderer.flap .ear { animation: flap .6s cubic-bezier(.45,.05,.25,1) 2 alternate; }
.elephant .eye { transition: transform .14s ease-in-out; }

/* Logo sheen across the vines */
.vine .glint .stem { stroke: url(#vsheen0); }
.vine .glint * { pointer-events: none; }
.vine.left .glint .stem, .vine.left .glint .leaf { stroke: url(#vsheen0); }
.vine.right .glint .stem, .vine.right .glint .leaf { stroke: url(#vsheen1); }
.vine.left .glint .cup { fill: url(#vsheen0); }
.vine.right .glint .cup { fill: url(#vsheen1); }
.vine .glint .petal { display: none; }
.vine .glint .stem { opacity: 1; stroke-dashoffset: 0; stroke-width: .7; }
.vine .glint .bloom { transform: none; }
.logo:not(.grown) .vine .glint { display: none; }

/* Rose underline under Genevieve's signature: grows outward from the middle */
.signature { display: grid; justify-items: center; }
/* the logo's rose vine at 60% size, two lengths per side, so it keeps its shape and stays slim */
.sig-vines { position: relative; display: block; width: 240px; height: 21px; margin-top: -2px; pointer-events: none; }
.sig-vines .vine { top: 0; width: 60px; height: 25.5px; }
.sig-vines .vine.outer { --seg: 1.1s; }
.sig-vines .vine.left.outer { right: calc(50% + 59px); }
.sig-vines .vine.right.outer { left: calc(50% + 59px); }
.sig-vines .vine.left { right: 50%; left: auto; display: block; }
.sig-vines .vine.right { left: 50%; right: auto; }
.sig-vines .vine .glint { display: none; }
@media (max-width: 600px) { .sig-vines .vine.left { display: block; } .sig-vines .vine.right { width: 60px; height: 25.5px; top: 0; } }

/* Our impact */
.impact { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); }
.impact > div { display: grid; gap: 12px; align-content: start; padding: 34px 24px 36px; border-right: 1px solid var(--line); min-width: 0; }
.impact > div:first-child { padding-left: 0; }
.impact > div:last-child { border-right: 0; padding-right: 0; }
.impact b { font-family: var(--font-display); font-weight: 500; font-variation-settings: "opsz" 24; font-size: clamp(1.5rem, 2.3vw, 2.1rem); line-height: 1.12; text-wrap: balance; }
.impact span { font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); line-height: 1.6; }
.impact-inline { margin-top: clamp(56px, 8vw, 88px); }
@media (max-width: 860px) {
  .impact { grid-template-columns: 1fr 1fr; }
  .impact > div { padding: 26px 16px 28px; }
  .impact > div:nth-child(odd) { padding-left: 0; }
  .impact > div:nth-child(2) { border-right: 0; padding-right: 0; }
  .impact > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .impact > div:nth-child(3) { border-right: 1px solid var(--line); }
}

/* Names beside emails */
.person span { display: inline-block; min-width: 11.5em; color: var(--ink); }
footer.site .person span { color: #e9e6e3; min-width: 0; display: block; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; margin-top: 10px; }
footer.site .person:first-of-type span { margin-top: 0; }
.info .person { display: grid; gap: 2px; margin-bottom: 14px; }
.info .person span { min-width: 0; font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }

/* Our impact: heading matches the other section labels; a quiet hover */
.impact-sec .eyebrow, .impact-inline .eyebrow { font-size: 1.08rem; }
.impact > div { position: relative; isolation: isolate; }
.impact > div::before { content: ""; position: absolute; inset: 0; z-index: -1; background: #f0eced; opacity: 0; transition: opacity .7s var(--ease); }
.impact > div:first-child::before { left: -16px; } .impact > div:last-child::before { right: -16px; }
.impact b { transition: transform .7s var(--ease); }
.impact span { transition: color .7s var(--ease), letter-spacing .7s var(--ease); }
.impact > div::after { content: ""; position: absolute; left: 24px; right: 24px; bottom: -1px; height: 1px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform .8s var(--ease); }
.impact > div:first-child::after { left: 0; } .impact > div:last-child::after { right: 0; }
.impact > div:hover::before { opacity: 1; }
.impact > div:hover b { transform: translateY(-4px); }
.impact > div:hover span { color: var(--ink); letter-spacing: .24em; }
.impact > div:hover::after { transform: scaleX(1); }
@media (max-width: 860px) { .impact > div::after { left: 16px; right: 16px; } .impact > div:nth-child(odd)::after { left: 0; } .impact > div:nth-child(even)::after { right: 0; } }

.foot-cta p { max-width: none; }
@media (max-width: 860px) { .br-desk { display: none; } }
footer.site .foot-cols:first-child { padding-top: 0; }

/* Ways to Give footer: no call-to-action band, so the top space matches the gap above the bottom rule */
footer.site.no-cta .wrap { padding-top: 52px; }

/* Smaller dollar sign, aligned to the top of the numerals */
.cur { font-size: .5em; position: relative; top: -.485em; margin-right: .04em; }
.lede .cur, .foot-cta .cur, p .cur { top: -.38em; font-size: .6em; }

/* Phones: fill the strip above the sticky menu bar (under the clock and battery) so the page
   never shows through there while scrolling, or during the bounce at the top */
header.site::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 50vh;
  background: var(--bg); pointer-events: none;
}

/* No grey tap box on phones; links and buttons already have their own feedback */
a, button, label, .wanderer, .wanderer svg, .logo { -webkit-tap-highlight-color: transparent; }

/* Photos can't be selected, dragged, or long-pressed into a save menu */
img, video, .elephant { -webkit-user-select: none; user-select: none; -webkit-user-drag: none; -webkit-touch-callout: none; }

/* Text highlight: black on the light pages, light in the black footer */
::selection { background: var(--ink); color: var(--bg); }
footer.site ::selection, .lightbox ::selection { background: var(--bg); color: var(--ink); }

.btn[disabled] { opacity: .6; cursor: progress; }

/* roses already grown earlier in the visit: show them at once, without replaying the growth */
.logo.instant .vine .stem, .logo.instant .vine .bloom { transition: none !important; }
.amount .cur { font-size: .6em; top: -.425em; }

/* ---------- Newsletter ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.no-news .news-foot, .no-news .toggle, .no-news #welcome { display: none !important; }

/* footer signup */
.news-foot { display: grid; grid-template-columns: 1fr minmax(0, 1.1fr); gap: 16px 48px; align-items: center; padding-bottom: clamp(36px, 5vw, 52px); border-bottom: 1px solid #333; }
.news-foot h4 { margin: 0 0 6px; font-size: .72rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--on-ink); }
.news-foot p { color: #b5b3b0; margin: 0; }
.news-row { display: flex; gap: 12px; min-width: 0; }
.news-row input[type="email"] { flex: 1; min-width: 0; color: #f4f1f2; border-bottom-color: #555; }
.news-row input[type="email"]::placeholder { color: #8e8a87; }
.news-row input[type="email"]:focus { border-color: #f4f1f2; }
.news-foot .news-msg { grid-column: 2; color: #e9e6e3; font-size: .92rem; }
.news-foot.done .news-row { display: none; }
@media (max-width: 760px) { .news-foot { grid-template-columns: 1fr; } .news-foot .news-msg { grid-column: 1; } .news-row .btn { padding-inline: 1.2em; } }

/* welcome invite: a small card the elephant presents, bottom-left */
.welcome { position: fixed; z-index: 85; width: min(340px, calc(100vw - 32px)); left: 16px; bottom: 80px;
  opacity: 0; transform: translateY(10px) scale(.94); transform-origin: var(--tx, 40px) 100%;
  transition: opacity .45s var(--ease), transform .55s cubic-bezier(.3,1.3,.5,1); pointer-events: none; }
.welcome.open { opacity: 1; transform: none; pointer-events: auto; }
.welcome-card { position: relative; background: var(--grain) 0 0 / 220px 220px, var(--bg); border: 1px solid var(--line);
  padding: 22px 22px 12px; display: grid; gap: 8px; text-align: left; box-shadow: 0 24px 50px -24px rgba(17,17,17,.45); }
.welcome-card::after { content: ""; position: absolute; bottom: -7px; left: calc(var(--tx, 40px) - 7px); width: 13px; height: 13px;
  background: var(--grain) 0 0 / 220px 220px, var(--bg); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transform: rotate(45deg); }
.welcome-card .eyebrow { font-size: .68rem; }
.welcome-card .eyebrow::before { display: none; }
.welcome-card h2 { font-size: 1.5rem; padding-right: 20px; }
.welcome-card .muted { font-size: .92rem; line-height: 1.5; }
.welcome-form { display: grid; gap: 10px; margin-top: 6px; }
.welcome-form input[type="email"] { font-size: 1rem; padding: 8px 0; }
.welcome-form .btn { padding: .95em 1.2em; font-size: .8rem; }
.welcome-form.done input, .welcome-form.done button { display: none; }
.welcome-form .news-msg { font-size: .92rem; }
.welcome-close { position: absolute; top: 6px; right: 8px; background: none; border: 0; font-size: 1.4rem; line-height: 1; color: var(--muted); cursor: pointer; padding: 6px; }
.welcome-close:hover { color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .welcome { transition: none; } }

/* contact form toggle */
.toggle { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; font-size: .98rem; user-select: none; }
.toggle input { position: absolute; opacity: 0; pointer-events: none; }
.toggle .track { position: relative; width: 40px; height: 22px; border-radius: 22px; border: 1px solid #b9b6b2; background: var(--bg); transition: background .35s var(--ease), border-color .35s var(--ease); flex: none; }
.toggle .knob { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--ink); transition: transform .35s var(--ease), background .35s var(--ease); }
.toggle input:checked + .track { background: var(--ink); border-color: var(--ink); }
.toggle input:checked + .track .knob { transform: translateX(18px); background: var(--bg); }
.toggle input:focus-visible + .track { outline: 2px solid var(--ink); outline-offset: 3px; }
.welcome-card .eyebrow::before { display: none; }

/* the elephant wags its tail slowly while it waits beside the invite */
.welcome-waiting .wanderer .elephant .tail { animation: idle-wag 1.6s ease-in-out infinite; }
@keyframes idle-wag { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(7deg); } }
@media (prefers-reduced-motion: reduce) { .welcome-waiting .wanderer .elephant .tail { animation: none; } }

/* Church Center giving pop-up always sits above everything on our page */
iframe[src*="churchcenter.com"] { z-index: 2147483647 !important; }
.giving-open .welcome, .giving-open .wanderer { visibility: hidden !important; }

/* Church Center loading screen, restyled: soft dark wash and a thin white ring instead of the blue spinner */
body > div[style*="2147483646"] { background-color: rgba(17,17,17,.5) !important; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); animation: cc-fade .35s ease both; }
body > div[style*="2147483646"] > img { opacity: 0 !important; }
body > div[style*="2147483646"]::after {
  content: ""; position: fixed; left: 50%; top: 50%; width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.25); border-top-color: #fff; animation: cc-spin .9s linear infinite; }
@keyframes cc-spin { to { transform: rotate(360deg); } }
@keyframes cc-fade { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { body > div[style*="2147483646"]::after { animation-duration: 2.4s; } }

/* Center Church Center's giving form vertically on taller screens (its card is ~790px tall and sits 51px from the top).
   The strip above keeps the same dimmed backdrop as the rest of the page. */
@media (min-width: 700px) and (min-height: 900px) {
  html.giving-open #ChurchCenterModalIframeExistsInDOM { top: calc((100vh - 894px) / 2) !important; height: calc(100vh - (100vh - 894px) / 2) !important; }
}

.giving-ready body > div[style*="2147483646"]::after { opacity: 0; transition: opacity .25s ease; }

/* Ways to Give: the offer panel, with the full descriptions and a numbered list */
.offer-full .offer-price { padding: clamp(32px, 5vw, 64px); gap: 20px; }
.offer-full .offer-price .amount { font-size: clamp(4rem, 8vw, 6rem); }
.offer-full .offer-price > .muted { max-width: 30ch; font-size: 1.02rem; }
.offer-cta { margin-top: auto; padding-top: 28px; border-top: 1px solid var(--line); display: grid; gap: 14px; justify-items: start; }
.offer-cta .fine { margin: 0; font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.offer-full .way { display: grid; grid-template-columns: 52px 1fr; gap: 0 18px; padding: clamp(30px, 3.6vw, 42px) clamp(24px, 4vw, 48px); }
.offer-full .way .num { font-family: var(--font-display); font-size: 1.05rem; line-height: 1.9; color: var(--muted); font-variant-numeric: lining-nums; border-top: 1px solid var(--ink); align-self: start; padding-top: 6px; width: 28px; transition: width .7s var(--ease), color .7s var(--ease); }
.offer-full .way:hover .num { width: 44px; color: var(--ink); }
.offer-full .way h3 { font-size: clamp(1.6rem, 2.4vw, 1.9rem); }
.offer-full .way p { margin-top: 10px; font-size: 1rem; line-height: 1.65; max-width: 46ch; }
@media (max-width: 560px) { .offer-full .way { grid-template-columns: 1fr; } .offer-full .way .num { margin-bottom: 12px; } }

/* Newsletter thank-you page: the elephant cheers instead of searching */
.joy-ele { animation: joy-hop 2.6s var(--ease) infinite; }
.joy-ele::after { content: "\2665"; font-size: 1.7rem; top: -30px; right: 14px; }
.joy-ele .trunk { animation: trunk-up 2.6s ease-in-out infinite; }
@keyframes joy-hop { 0%, 60%, 100% { transform: translateY(0); } 70% { transform: translateY(-10px); } 80% { transform: translateY(0); } }
@keyframes trunk-up { 0%, 55%, 100% { transform: rotate(0); } 70%, 82% { transform: rotate(-38deg); } }
@media (prefers-reduced-motion: reduce) { .joy-ele, .joy-ele .trunk { animation: none; } }
.offer-full .way .way-note { margin-top: 14px; }
.way-note a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }