.afa-home {
	--afa-home-green: var(--afa-color-primary, #2e5d5c);
	--afa-home-soft: color-mix(in srgb, var(--afa-home-green) 8%, var(--afa-color-surface, #fff));
	display: grid;
	gap: 28px;
	color: var(--afa-color-text, #222);
	container-type: inline-size;
	container-name: afa-home;
}
.afa-home *, .afa-home *::before, .afa-home *::after { box-sizing: border-box; }
.afa-home h2, .afa-home h3, .afa-home h4, .afa-home p { margin: 0; }
.afa-home h2 { font-size: clamp(1.65rem, 3vw, 2.35rem); line-height: 1.2; }
.afa-home h3 { font-size: 1.18rem; line-height: 1.35; }
.afa-home h4 { font-size: 1.02rem; line-height: 1.4; }
.afa-home a:not(.afa-portal__button) { color: var(--afa-home-green); text-decoration: none; }
.afa-home a:focus-visible { outline: 3px solid var(--afa-color-accent, #3fc2c4); outline-offset: 4px; border-radius: 6px; }
.afa-home .afa-home__welcome {
	padding: var(--afa-space-3) var(--afa-space-4);
	border: 1px solid color-mix(in srgb, var(--afa-home-green) 16%, transparent);
	border-radius: calc(var(--afa-radius) * 3);
	background: linear-gradient(115deg, var(--afa-home-soft), color-mix(in srgb, var(--afa-home-green) 12%, var(--afa-color-surface)));
}
.afa-home .afa-home__welcome > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); grid-template-areas: "eyebrow description" "greeting description"; gap: 4px var(--afa-space-4); align-items: center; }
.afa-home .afa-home__welcome .afa-home__eyebrow { grid-area: eyebrow; font-size: .65rem; line-height: 1.4; }
.afa-home .afa-home__welcome h2 { grid-area: greeting; color: var(--afa-home-green); font-size: clamp(1.3rem, 1.8vw, 1.65rem); line-height: 1.25; overflow-wrap: anywhere; }
.afa-home .afa-home__welcome > div > p:last-child { grid-area: description; max-width: 48ch; font-size: .9rem; line-height: 1.5; color: var(--afa-color-muted); }
.afa-home .afa-home__eyebrow { font-size: .75rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--afa-home-green); }
.afa-home .afa-home__layout { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(260px, 1fr); gap: 26px; align-items: start; }
.afa-home .afa-home__main, .afa-home .afa-home__aside { display: grid; gap: 26px; min-width: 0; }
.afa-home .afa-home__main { container: afa-home-main / inline-size; }
.afa-home .afa-home__main > section, .afa-home .afa-home__personal, .afa-home .afa-home__volunteers { display: grid; gap: 16px; }
.afa-home .afa-home__personal { --afa-home-panel-padding: 16px; --afa-home-panel-gap: 12px; }
.afa-home .afa-home__section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.afa-home .afa-home__section-head a { font-size: .86rem; font-weight: 600; }
.afa-home .afa-home__featured, .afa-home .afa-home__panel, .afa-home .afa-home__community {
	border: 1px solid var(--afa-color-border, #dce3df);
	border-radius: 20px;
	overflow: hidden;
	background: var(--afa-color-surface, #fff);
}
.afa-home .afa-home__featured { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr); min-height: clamp(170px, calc(100cqi / var(--afa-home-featured-ratio, 1.9)), var(--afa-home-featured-max-height, 360px)); border-radius: calc(var(--afa-radius) * 3); color: white; }
.afa-home .afa-home__featured-body { grid-area: 1 / 1; align-self: end; z-index: 1; display: grid; min-width: 0; gap: 6px; padding: 36px calc(var(--afa-space-4) + 52px) var(--afa-space-4) var(--afa-space-4); color: white; background: linear-gradient(180deg, transparent, rgb(0 0 0 / .15) 18px, rgb(0 0 0 / .6) 36px, rgb(0 0 0 / .72)); text-shadow: 0 1px 2px rgb(0 0 0 / .35); }
.afa-home .afa-home__featured > .afa-cover,
.afa-home .afa-home__featured > .afa-home__illustration { position: absolute; inset: 0; overflow: hidden; width: 100%; height: 100%; aspect-ratio: auto; min-height: 0; border-radius: 0; }
.afa-home .afa-home__featured > .afa-cover > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.afa-home .afa-home__featured-body .afa-home__eyebrow { font-size: .65rem; line-height: 1.4; color: inherit; }
.afa-home .afa-home__featured-body h4 { font-size: clamp(1.1rem, 3cqi, 1.5rem); line-height: 1.25; }
.afa-home .afa-home__featured-body > p:not(.afa-home__eyebrow) { font-size: .85rem; line-height: 1.5; }
.afa-home .afa-home__featured-arrow { position: absolute; z-index: 2; right: var(--afa-space-4); bottom: var(--afa-space-4); display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid currentColor; border-radius: 50%; background: transparent; color: white; transition: background-color 150ms ease, color 150ms ease; }
.afa-home .afa-home__featured:focus-visible { outline: 3px solid var(--afa-color-primary); outline-offset: 4px; }
.afa-home .afa-home__featured:focus-visible .afa-home__featured-arrow { background: white; color: var(--afa-home-green); }
.afa-home .afa-home__illustration { min-height: 175px; position: relative; overflow: hidden; background: color-mix(in srgb, var(--afa-home-green) 12%, #faf2dc); }
.afa-home .afa-home__illustration::before, .afa-home .afa-home__illustration::after { content: ""; position: absolute; width: 160px; height: 160px; border: 18px solid color-mix(in srgb, var(--afa-home-green) 45%, transparent); border-radius: 50%; bottom: -80px; left: 18%; }
.afa-home .afa-home__illustration::after { width: 240px; height: 240px; left: auto; right: -30px; bottom: -140px; border-width: 38px; }
.afa-home .afa-home__illustration span, .afa-home .afa-home__illustration b { position: absolute; color: var(--afa-home-green); font-size: 70px; line-height: 1; top: 30px; left: 24%; }
.afa-home .afa-home__illustration b { top: 48px; left: auto; right: 24%; font-size: 48px; }
.afa-home .afa-home__illustration i { position: absolute; width: 60px; height: 75px; border-radius: 40px 40px 6px 6px; background: color-mix(in srgb, var(--afa-home-green) 40%, #e6bb84); left: 48%; bottom: 0; transform: rotate(10deg); }
.afa-home .afa-home__panel { padding: var(--afa-home-panel-padding, 22px); display: grid; gap: var(--afa-home-panel-gap, 18px); }
.afa-home .afa-home__all-activities { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 38px; padding: 8px 16px; border-top: 1px solid var(--afa-color-border, #dce3df); font-size: .86rem; font-weight: 600; line-height: 1.4; }
.afa-home .afa-home__all-activities:focus-visible { outline-offset: -3px; }
.afa-home .afa-home__muted, .afa-home .afa-home__empty { color: var(--afa-color-muted, #666); }
.afa-home .afa-home__empty { padding: 16px; line-height: 1.6; }
.afa-home .afa-home__community { display: flex; align-items: center; gap: 18px; padding: 22px; }
.afa-home .afa-home__community > div { flex: 1; }
.afa-home .afa-home__community p { margin-top: 6px; color: var(--afa-color-muted, #666); font-size: .9rem; }
.afa-home .afa-home__community-icon { display: grid; place-content: center; flex-shrink: 0; width: 64px; height: 64px; border-radius: 16px; background: var(--afa-home-soft); font-size: 2rem; }
.afa-home .afa-home__own-task { display: grid; gap: 5px; font-size: .85rem; }
.afa-home .afa-home__own-task > strong { font-size: 1rem; line-height: 1.35; }
.afa-home .afa-home__own-task > span { color: var(--afa-color-muted); }
.afa-home .afa-home__own-task ~ .afa-home__own-task { border-top: 1px solid var(--afa-color-border, #dce3df); padding-top: 10px; }
.afa-home .afa-home__volunteers { container: afa-home-volunteers / inline-size; --afa-home-panel-padding: 0px; --afa-home-panel-gap: 0px; }
.afa-home .afa-home__volunteers .afa-home__opportunity {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 32px;
    grid-template-rows: auto auto auto;
    gap: 6px 12px;
    min-width: 0;
    padding: 14px;
    line-height: 1.3;
}
.afa-home .afa-home__opportunity + .afa-home__opportunity { border-top: 1px solid var(--afa-color-border, #dce3df); }
.afa-home .afa-home__volunteers .afa-home__opportunity-heading { grid-column: 1; display: grid; align-content: start; justify-items: start; gap: 2px; min-width: 0; }
.afa-home .afa-home__opportunity-meta, .afa-home .afa-home__opportunity > .afa-volunteer-progress { grid-column: 1 / -1; min-width: 0; }
.afa-home .afa-home__volunteers .afa-home__opportunity-event { margin: 0; color: var(--afa-color-muted); font-size: .85rem; line-height: 1.3; }
.afa-home .afa-home__volunteers .afa-home__opportunity-meta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px 10px; color: var(--afa-color-muted); font-size: .8125rem; line-height: 1.3; }
.afa-home .afa-home__opportunity-date { min-width: 0; }
.afa-home .afa-home__opportunity-start { display: var(--afa-home-volunteer-show-start, inline); }
.afa-home .afa-home__opportunity-range { display: var(--afa-home-volunteer-show-range, none); }
.afa-home .afa-home__opportunity h4 {
    color: var(--afa-color-text);
    font-size: 1rem;
    font-weight: 650;
    line-height: 1.3;
}
.afa-home .afa-home__opportunity > .afa-home__arrow { grid-column: 2; grid-row: 1; align-self: start; }
.afa-home .afa-home__volunteers .afa-volunteer-progress { margin: 0; gap: 6px; }
.afa-home .afa-home__volunteers .afa-volunteer-progress__header { gap: 4px 10px; }
.afa-home .afa-home__volunteers .afa-volunteer-progress__count, .afa-home .afa-home__volunteers .afa-volunteer-progress__remaining { font-size: .8125rem; line-height: 1.3; }
.afa-home .afa-home__volunteers .afa-volunteer-progress__remaining { color: var(--afa-color-muted); font-weight: 400; }
.afa-home .afa-home__volunteers .afa-volunteer-progress__bar { height: 6px; }
.afa-home .afa-home__volunteers .afa-volunteer-progress__detail { display: var(--afa-home-volunteer-show-minimum, none); font-size: .75rem; line-height: 1.3; }
.afa-home .afa-home__volunteers .afa-volunteer-progress__status { padding: 2px 8px; white-space: normal; font-size: .75rem; line-height: 1.3; }
.afa-home .afa-home__volunteers .afa-volunteer-progress--unlimited { display: grid; padding: 0; background: transparent; }
.afa-home .afa-home__volunteers .afa-volunteer-progress__icon { display: none; }
.afa-home .afa-home__volunteers .afa-volunteer-progress__unlimited-info { flex-direction: row; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 10px; }
.afa-home .afa-home__volunteers .afa-volunteer-progress__unlimited-count { font-size: .8rem; }
.afa-home .afa-home__volunteers .afa-volunteer-progress__unlimited-note { font-size: .75rem; }
.afa-home .afa-home__volunteers .afa-home__opportunity:focus-visible { outline-offset: -3px; }
.afa-home h4, .afa-home p, .afa-home a { overflow-wrap: anywhere; }
@media (hover: hover) {
	.afa-home .afa-home__featured:hover .afa-home__featured-arrow { background: white; color: var(--afa-home-green); }
	.afa-home .afa-home__community:hover, .afa-home .afa-home__opportunity:hover { background: var(--afa-home-soft); }
	.afa-home .afa-home__section-head a:hover { text-decoration: underline; }
}
@container (max-width: 780px) {
	.afa-home .afa-home__layout { grid-template-columns: 1fr; }
	.afa-home .afa-home__welcome > div { grid-template-columns: minmax(0, 1fr); grid-template-areas: "eyebrow" "greeting" "description"; }
}
@container afa-home-main (min-width: 480px) {
	.afa-home .afa-home__featured { --afa-home-featured-ratio: 2; }
}
@media (max-width: 767px) {
	.afa-home .afa-home__activities {
		--afa-home-activity-show-day: none;
		--afa-home-activity-show-start: inline;
		--afa-home-activity-show-range: none;
		--afa-home-activity-thumbnail: 50px;
		--afa-home-activity-text-gap: 2px;
		--afa-home-activity-line-height: 1.25;
		--afa-home-activity-padding: 10px 16px;
	}
}
@container afa-home (min-width: 1000px) {
	.afa-home .afa-home__featured { --afa-home-featured-ratio: 2.8; --afa-home-featured-max-height: 300px; }
}
@container afa-home-volunteers (min-width: 440px) {
	.afa-home .afa-home__volunteers > .afa-home__panel { --afa-home-volunteer-show-start: none; --afa-home-volunteer-show-range: inline; }
}
@media (min-width: 768px) {
	.afa-home .afa-home__volunteers > .afa-home__panel { --afa-home-volunteer-show-minimum: block; }
}
@media (max-width: 760px) {
	.afa-home .afa-home__layout { grid-template-columns: 1fr; }
	.afa-home .afa-home__panel { padding: var(--afa-home-panel-padding, 20px); }
	.afa-home .afa-home__illustration { min-height: 140px; }
}