/* MEMBER LANDING PAGE
   These styles are loaded only by join.html. Edit the dist/ copy when editing
   the finished website directly. Local fonts and colors match the nonprofit.
*/
body[data-page="join"] {
  --haven-night: #272238;
  --haven-cream: #fff5dc;
  --haven-gold: #dfc794;
  --haven-paper: #fffcf7;
  background: var(--haven-paper);
}
body[data-page="join"] .header-inner { height: 85px; }
body[data-page="join"] .brand { width: 156px; }
body[data-page="join"] .main-nav { gap: 35px; }
body[data-page="join"] .main-nav .nav-donate { display: flex; align-items: center; gap: 17px; background: var(--purple); }
body[data-page="join"] .main-nav .nav-donate .icon { width: 17px; }
.haven-section { padding-block: 98px; }
.haven-kicker { font-size: .74rem; text-transform: uppercase; letter-spacing: .19em; font-weight: 900; color: #875575; margin-bottom: 18px; }
.haven-hero { position: relative; isolation: isolate; min-height: 730px; min-height: max(730px, calc(100svh - 85px)); display: flex; align-items: flex-start; background: var(--haven-night); }
.haven-hero-image { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.haven-hero-image { object-fit: cover; object-position: right bottom; }
.haven-hero-content { position: absolute; inset-inline: 0; top: 62%; text-align: left; }
/* The lower-right headline has a small text shadow; the image stays unshaded. */
.haven-hero-copy { width: 43%; max-width: 525px; margin-left: auto; color: #fffaf2; text-shadow: 0 2px 4px #21172ddb, 0 0 16px #21172d70; }
.haven-welcome .haven-kicker, .haven-section-heading .haven-kicker, .haven-farewell .haven-kicker { margin-inline: auto; }
.haven-hero h1 { font-size: clamp(2.7rem, 3.65vw, 4rem); line-height: 1.1; letter-spacing: -.035em; }
.haven-button { display: inline-flex; align-items: center; justify-content: center; min-height: 55px; padding: 13px 26px; gap: 23px; border: 1px solid var(--haven-gold); border-radius: 5px; background: var(--haven-cream); color: #432846; font-size: .98rem; font-weight: 900; text-decoration: none; transition: transform .2s, background .2s, box-shadow .2s; box-shadow: 0 4px 18px #20132b0d; }
.haven-button .icon { width: 19px; }
.haven-button:hover { transform: translateY(-3px); background: #fffbe9; box-shadow: 0 8px 24px #20132b29; }
.icon-blossom { color: #ae5c83; }
.haven-ornament { display: flex; justify-content: center; align-items: center; gap: 20px; color: #be849a; margin-bottom: 29px; }
.haven-ornament span { width: 67px; height: 1px; background: currentColor; opacity: .6; }
.haven-ornament .icon { width: 30px; height: 30px; }
.haven-welcome { text-align: center; background: radial-gradient(ellipse at 50% 10%, #fcebdc88, transparent 66%); }
.haven-welcome h2 { font-size: clamp(2.4rem, 3.6vw, 3.6rem); }
.haven-intro { max-width: 700px; margin: 25px auto 0; color: var(--muted); font-size: 1.06rem; }
.haven-intro + .haven-intro { margin-top: 15px; }
.haven-welcome-body { display: grid; grid-template-columns: 1fr 1.12fr; gap: 65px; align-items: center; margin-top: 40px; text-align: left; }
.haven-welcome-body .haven-intro:first-child { margin-top: 0; }
.haven-company { border: 1px solid #e5d7cb; padding: 8px; background: #fffdf8; border-radius: 5px; transform: rotate(1deg); }
.haven-company img { width: 100%; aspect-ratio: 1.85; object-fit: cover; border-radius: 2px; }
.haven-company figcaption { text-align: center; padding: 12px 5px 5px; color: #805c6a; font-size: .8rem; font-weight: 800; }
.haven-welcome-notes { display: flex; justify-content: center; gap: 40px; margin-top: 39px; font-size: .87rem; font-weight: 800; color: var(--purple); }
.haven-welcome-notes span { display: inline-flex; align-items: center; gap: 9px; }
.haven-welcome-notes .icon { width: 19px; color: #a3647b; }
.haven-discover { background: #f1ecf4; }
.haven-discover-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 35px; padding-block: 47px 40px; }
.haven-discover-heading .haven-kicker { margin-bottom: 11px; }
.haven-discover-heading h2 { font-size: clamp(2.25rem, 3.2vw, 3.1rem); }
.haven-discover-heading > p { font-size: .94rem; color: var(--muted); padding-bottom: 5px; }
.haven-scenes { position: relative; }
.haven-scene { position: relative; isolation: isolate; min-height: 640px; display: flex; align-items: center; color: white; background: #272238; }
.haven-scene-image, .haven-scene-shade { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.haven-scene-image { object-fit: cover; object-position: center; }
.haven-scene-shade { background: linear-gradient(90deg, #201c2fec 0%, #201c2fc9 31%, #201c2f40 65%, #201c2f00 100%), linear-gradient(0deg, #201c2fc9, transparent 38%); }
.haven-scene-content { padding-block: 80px 130px; }
.haven-scene-content .haven-kicker { color: #f2d7a9; }
.haven-scene-content h3 { font-family: var(--display); font-weight: 400; font-size: clamp(2.5rem, 3.6vw, 3.65rem); line-height: 1.13; letter-spacing: -.025em; }
.haven-scene-content p:not(.haven-kicker) { max-width: 455px; margin-top: 23px; font-size: 1.02rem; color: #f7f0ef; }
.haven-scene-content p + p:not(.haven-kicker) { margin-top: 14px; }
.haven-scene-link { display: inline-flex; align-items: center; gap: 18px; min-height: 44px; color: #f6d9a3; font-weight: 900; text-decoration: none; margin-top: 23px; font-size: .95rem; }
.haven-scene-link:hover { text-decoration: underline; }
.haven-scene-caption { position: absolute; bottom: 38px; right: max(48px, calc((100% - 1240px) / 2)); color: #fff5dc; font-size: .73rem; background: #221c31a6; padding: 5px 12px; border-radius: 2px; }
.haven-scene-tabs { position: absolute; z-index: 2; left: max(48px, calc((100% - 1240px) / 2)); bottom: 35px; display: flex; border: 1px solid #cdbfa569; border-radius: 5px; background: #201c2fe6; }
.haven-scene-tabs button { border: 0; border-radius: 3px; background: transparent; color: #f4eade; padding: 15px 21px; min-height: 56px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-size: .84rem; font-weight: 800; }
.haven-scene-tabs button + button { border-left: 1px solid #cdbfa545; }
.haven-scene-tabs button .icon { width: 18px; }
.haven-scene-tabs button:hover { background: #504050; }
.haven-scene-tabs button[aria-selected="true"] { color: #432846; background: var(--haven-cream); }
.haven-hero :focus-visible { outline-color: var(--rose-dark); }
.haven-scenes :focus-visible, .haven-farewell :focus-visible { outline-color: #ffe1a3; }
.haven-scene[role="tabpanel"]:focus-visible { outline-offset: -5px; }
.haven-pace { background: #f4eff7; }
.haven-pace-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 100px; align-items: center; }
.haven-pace-intro h2 { font-size: clamp(2.25rem, 3.2vw, 3.15rem); }
.haven-pace-intro > p:not(.haven-kicker) { color: var(--muted); margin-top: 24px; }
.haven-pace-intro > p + p:not(.haven-kicker) { margin-top: 15px; }
.haven-pace-intro .text-link { margin-top: 24px; }
.haven-permissions article { display: flex; align-items: flex-start; gap: 25px; padding-block: 30px; }
.haven-permissions article + article { border-top: 1px solid #dcd2e3; }
.haven-permission-icon { flex-shrink: 0; width: 46px; height: 46px; display: grid; place-items: center; color: #97617d; border: 1px solid #c7b2c8; transform: rotate(45deg); border-radius: 8px; margin: 6px 6px 0; }
.haven-permission-icon .icon { transform: rotate(-45deg); }
.haven-permissions h3 { font-family: var(--display); font-weight: 400; font-size: 1.6rem; }
.haven-permissions p { margin-top: 11px; color: var(--muted); font-size: .98rem; }
.haven-section-heading { text-align: center; margin-bottom: 45px; }
.haven-section-heading h2 { font-size: clamp(2.4rem, 3.6vw, 3.5rem); }
.haven-section-heading > p:not(.haven-kicker) { margin: 22px auto 0; color: var(--muted); }
.haven-moment-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 29px; }
.haven-moment { color: var(--ink); text-decoration: none; }
.haven-moment-picture { position: relative; overflow: hidden; border-radius: 5px; }
.haven-moment-picture img { width: 100%; aspect-ratio: 1.42; object-fit: cover; transition: transform .35s; }
.haven-moment:hover .haven-moment-picture img { transform: scale(1.035); }
.haven-moment-picture > span { position: absolute; left: 15px; bottom: 14px; background: #fffcf5f2; color: #5b335a; font-size: .72rem; font-weight: 900; padding: 6px 12px; border-radius: 3px; }
.haven-moment-copy { padding: 23px 3px 8px; }
.haven-moment h3 { font-size: 1.21rem; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.haven-moment h3 .icon { width: 19px; color: #a3637e; }
.haven-moment:hover h3 { text-decoration: underline; text-underline-offset: 5px; }
.haven-moment p { font-size: .94rem; color: var(--muted); margin-top: 12px; }
.haven-calendar-link { display: flex; width: fit-content; margin: 33px auto 0; }
.haven-join { background: #f8ede6; border-block: 1px solid #eadcda; position: relative; }
.haven-steps { padding: 0; margin: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 52px; }
.haven-steps li { border-top: 1px solid #c7a9b4; padding-top: 22px; }
.haven-step-number { font-family: var(--display); font-size: 1.85rem; color: #966b7c; }
.haven-steps h3 { margin-top: 14px; font-size: 1.23rem; }
.haven-steps p { margin-top: 13px; font-size: .98rem; color: #645268; }
.haven-join-actions { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; margin-top: 43px; }
.haven-button-purple { background: var(--purple); color: white; border-color: var(--purple); }
.haven-button-purple:hover { background: #431257; }
.haven-button-outline { background: transparent; border-color: #92798f; color: var(--ink); }
.haven-join-note { text-align: center; margin: 20px auto 0; font-size: .82rem; color: #6b586b; }
.haven-help-note { display: flex; align-items: center; justify-content: center; gap: 13px; margin-top: 35px; padding-top: 26px; border-top: 1px solid #e3d0d0; font-size: .86rem; color: #685568; }
.haven-help-note .icon { width: 20px; color: #91627c; }
.haven-help-note p { max-width: none; }
.haven-help-note a { color: var(--purple); font-weight: 800; }
.haven-faq-layout { display: grid; grid-template-columns: .83fr 1.17fr; gap: 90px; }
.haven-faq-layout > div > h2 { font-size: clamp(2.3rem, 3vw, 3rem); }
.haven-faq-layout > div > p:not(.haven-kicker) { color: var(--muted); margin-top: 24px; }
.haven-faq details { border-bottom: 1px solid #ddd3df; }
.haven-faq details:first-child { border-top: 1px solid #ddd3df; }
.haven-faq summary { position: relative; font-size: 1rem; line-height: 1.55; font-weight: 900; cursor: pointer; list-style: none; padding: 22px 32px 22px 0; }
.haven-faq summary::-webkit-details-marker { display: none; }
.haven-faq summary::after { content: "+"; position: absolute; right: 3px; top: 19px; font-size: 1.4rem; font-weight: 400; color: #96677f; }
.haven-faq details[open] summary::after { content: "−"; }
.haven-faq details p { font-size: .96rem; color: var(--muted); padding: 0 25px 22px 0; }
.haven-faq details p + p { margin-top: -7px; }
.haven-farewell { position: relative; isolation: isolate; min-height: 560px; display: grid; place-items: center; background: var(--haven-night); color: white; text-align: center; }
.haven-farewell > img, .haven-farewell-shade { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.haven-farewell > img { object-fit: cover; object-position: center 55%; }
.haven-farewell-shade { background: linear-gradient(90deg, #211c336b, #211c33b8 35%, #211c33b8 65%, #211c336b), linear-gradient(0deg, #211c3380, #211c3329); }
.haven-farewell-content { padding-block: 75px; }
.haven-farewell .haven-ornament { color: #ecc3d1; }
.haven-farewell .icon-blossom { color: #fff1f5; }
.haven-farewell .haven-kicker { color: #f9e3ba; }
.haven-farewell h2 { font-size: clamp(2.7rem, 4.4vw, 4.4rem); }
.haven-farewell-content > p:not(.haven-kicker) { color: #fff8ef; margin: 22px auto 28px; }
.haven-nonprofit { background: #eee8f2; padding-block: 24px; }
.haven-nonprofit .container { display: flex; align-items: center; gap: 17px; }
.haven-nonprofit img { width: 38px; height: 38px; flex-shrink: 0; }
.haven-nonprofit p { font-size: .81rem; color: #67536f; max-width: none; }
.haven-nonprofit a { margin-left: auto; display: inline-flex; align-items: center; flex-shrink: 0; gap: 11px; font-size: .82rem; font-weight: 900; text-decoration: none; min-height: 44px; }
.haven-nonprofit .icon { width: 17px; }

@media (min-width: 1900px) {
  .haven-hero { min-height: 900px; }
}
@media (max-width: 1100px) {
  .haven-pace-layout, .haven-faq-layout { gap: 48px; }
  .haven-welcome-notes { gap: 25px; }
  .haven-scene-caption { right: 30px; bottom: 107px; }
  .haven-moment-grid { gap: 22px; }
  .haven-steps { gap: 30px; }
  .haven-nonprofit p { max-width: 57ch; }
}
@media (max-width: 960px) {
  .haven-hero { display: block; min-height: 0; background: var(--haven-paper); }
  .haven-hero-image { position: relative; inset: auto; width: 100%; height: auto; object-fit: contain; z-index: 0; }
  .haven-hero-content { position: static; text-align: center; padding-block: 36px 42px; }
  .haven-hero-copy { width: 100%; max-width: 590px; margin-inline: auto; color: var(--ink); text-shadow: none; }
  .haven-welcome-body { gap: 30px; }
  body[data-page="join"] .main-nav { gap: 0; }
  body[data-page="join"] .main-nav .nav-donate { margin-top: 10px; }
  .haven-discover-heading { align-items: flex-start; flex-direction: column; gap: 20px; }
  .haven-scene-content { padding-block: 70px 155px; }
  .haven-scene-shade { background: linear-gradient(90deg, #201c2fe8 0%, #201c2fba 45%, #201c2f33 100%), linear-gradient(0deg, #201c2fc9, transparent 45%); }
  .haven-scene-caption { right: 48px; bottom: 111px; }
  .haven-welcome-notes { flex-wrap: wrap; gap: 18px 30px; }
  .haven-nonprofit .container { flex-wrap: wrap; gap: 10px 15px; }
  .haven-nonprofit p { flex: 1; max-width: none; }
  .haven-nonprofit a { margin-left: 53px; }
}
@media (max-width: 700px) {
  .haven-welcome-body { grid-template-columns: 1fr; gap: 27px; margin-top: 26px; }
  .haven-company { transform: none; }
  .haven-company figcaption { font-size: .72rem; }
  .haven-section { padding-block: 64px; }
  body[data-page="join"] .header-inner { height: 76px; }
  body[data-page="join"] .brand { width: 140px; }
  .haven-kicker { font-size: .67rem; letter-spacing: .14em; }
  .haven-hero-content { padding-block: 30px 38px; }
  .haven-hero h1 { font-size: clamp(2.7rem, 10.2vw, 4.3rem); line-height: 1.09; }
  .haven-button { font-size: .91rem; gap: 16px; padding-inline: 20px; }
  .haven-welcome h2, .haven-section-heading h2 { font-size: clamp(2.2rem, 8vw, 2.85rem); }
  .haven-intro { font-size: .99rem; }
  .haven-welcome-notes { display: grid; justify-content: center; text-align: left; gap: 17px; font-size: .84rem; margin-top: 30px; }
  .haven-discover-heading { padding-block: 34px; gap: 17px; }
  .haven-discover-heading h2 { font-size: 2.2rem; }
  .haven-discover-heading > p { font-size: .93rem; }
  .haven-scene { min-height: 740px; align-items: flex-end; }
  .haven-scene-image { object-position: 64% center; }
  .haven-scene-shade { background: linear-gradient(180deg, #201c2f0d 0%, #201c2f7a 20%, #201c2feb 45%, #201c2ff5 100%); }
  .haven-scene-content { padding-block: 200px 157px; }
  .haven-scene-content h3 { font-size: clamp(2.2rem, 8.7vw, 2.85rem); }
  .haven-scene-content .haven-kicker { margin-bottom: 17px; font-size: .63rem; }
  .haven-scene-content p:not(.haven-kicker) { font-size: .94rem; margin-top: 19px; }
  .haven-scene-link { font-size: .87rem; margin-top: 15px; }
  .haven-scene-caption { left: 24px; right: auto; bottom: 106px; padding: 0; background: none; color: #e8d9cd; font-size: .67rem; }
  .haven-scene-tabs { bottom: 23px; left: 24px; right: 24px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .haven-scene-tabs button { flex-direction: column; gap: 4px; font-size: .67rem; padding: 10px 3px; min-height: 65px; line-height: 1.4; }
  .haven-scene-tabs button .icon { width: 18px; height: 18px; }
  .haven-pace-layout, .haven-faq-layout { grid-template-columns: 1fr; gap: 30px; }
  .haven-pace-intro h2 { font-size: 2.25rem; }
  .haven-pace-intro > p:not(.haven-kicker) { font-size: 1rem; }
  .haven-permissions article { gap: 22px; padding-block: 23px; }
  .haven-permissions h3 { font-size: 1.4rem; }
  .haven-permissions p { font-size: .94rem; }
  .haven-section-heading { margin-bottom: 32px; }
  .haven-section-heading > p:not(.haven-kicker) { font-size: .97rem; }
  .haven-moment-grid { grid-template-columns: 1fr; gap: 30px; }
  .haven-moment-picture img { aspect-ratio: 1.7; }
  .haven-moment-copy { padding-top: 20px; }
  .haven-moment h3 { font-size: 1.25rem; }
  .haven-moment p { font-size: .96rem; }
  .haven-steps { grid-template-columns: 1fr; gap: 25px; }
  .haven-steps li { position: relative; padding: 24px 0 0 51px; }
  .haven-step-number { position: absolute; left: 0; top: 23px; font-size: 1.6rem; line-height: 1.2; }
  .haven-steps h3 { margin: 0; font-size: 1.17rem; }
  .haven-steps p { font-size: .96rem; }
  .haven-join-actions { margin-top: 30px; }
  .haven-join-actions .haven-button { width: 100%; max-width: 370px; }
  .haven-join-note { font-size: .77rem; }
  .haven-help-note { align-items: flex-start; font-size: .86rem; }
  .haven-help-note .icon { margin-top: 4px; }
  .haven-faq-layout > div > h2 { font-size: 2.3rem; }
  .haven-faq summary { font-size: .98rem; padding-block: 21px; }
  .haven-faq details p { font-size: .95rem; }
  .haven-farewell { min-height: 530px; }
  .haven-farewell h2 { font-size: clamp(2.35rem, 9vw, 3.15rem); }
  .haven-farewell-content > p:not(.haven-kicker) { max-width: 26ch; font-size: 1rem; }
  .haven-nonprofit p { font-size: .78rem; flex: 1 1 calc(100% - 60px); }
}
@media (prefers-reduced-motion: reduce) {
  .haven-button, .haven-moment-picture img { transition: none; }
}