/* Ekstra Liv – main stylesheet. Mobile first. */

@font-face {
	font-family: 'Nunito';
	font-style: normal;
	font-weight: 400 900;
	font-display: swap;
	src: url('../fonts/nunito-latin.woff2') format('woff2');
}

:root {
	--green: #0F4540;
	--green-soft: #3D6560;      /* muted text, still AA on cream */
	--green-tint: #E2EDE7;      /* light green for sections and cards */
	--green-line: #C9DBD2;
	--coral: #FF7043;
	--coral-tint: #FFE3D8;
	--cream: #FBF3E0;
	--cream-dark: #F3E5C6;
	--paper: #FFFAF0;           /* card surface, a touch lighter than the page */
	--danger: #A3321A;

	--radius: 18px;
	--radius-sm: 10px;
	--shadow: 0 1px 2px rgba(15, 69, 64, .06), 0 8px 24px rgba(15, 69, 64, .07);
	--wrap: 1120px;
	--font: 'Nunito', 'Segoe UI', system-ui, -apple-system, sans-serif;
	--ease: cubic-bezier(.22, .8, .32, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html {
	font-size: 112.5%; /* 18px base */
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	font-family: var(--font);
	font-weight: 450;
	line-height: 1.65;
	color: var(--green);
	background: var(--cream);
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

main { flex: 1; }

h1, h2, h3 {
	font-weight: 850;
	line-height: 1.2;
	letter-spacing: -.01em;
	margin: 0 0 .6em;
}
h1 { font-size: clamp(2rem, 1.5rem + 2.2vw, 2.9rem); }
h2 { font-size: clamp(1.55rem, 1.3rem + 1.1vw, 2.1rem); }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1em; }

img, svg { max-width: 100%; }

a { color: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
	outline: 3px solid var(--coral);
	outline-offset: 3px;
	border-radius: 4px;
}

.wrap {
	width: 100%;
	max-width: var(--wrap);
	margin: 0 auto;
	padding: 0 20px;
}
.narrow { max-width: 760px; }
.center { text-align: center; }

.sr-only, .hp {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.skip {
	position: absolute;
	left: 12px; top: -60px;
	background: var(--green);
	color: var(--cream);
	padding: .5em 1em;
	border-radius: var(--radius-sm);
	z-index: 10;
}
.skip:focus { top: 12px; }

.muted { color: var(--green-soft); }
.lead { font-size: 1.12rem; }

/* ---------- Links and buttons ---------- */

.text-link, main p a:not(.btn), .post-text a {
	color: var(--green);
	font-weight: 700;
	text-decoration: underline;
	text-decoration-color: var(--coral);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
	transition: background-color .2s, text-decoration-color .2s;
	border-radius: 3px;
}
.text-link:hover, main p a:not(.btn):hover, .post-text a:hover {
	background: var(--coral-tint);
}

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .4em;
	min-height: 52px;
	padding: .65em 1.4em;
	font: inherit;
	font-weight: 800;
	font-size: 1.05rem;
	line-height: 1.2;
	text-decoration: none;
	color: var(--cream);
	background: var(--green);
	border: 2px solid var(--green);
	border-radius: 999px;
	cursor: pointer;
	transition: transform .25s var(--ease), box-shadow .25s var(--ease), background-color .2s, color .2s;
}
.btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 0 -2px var(--coral);
}
.btn:active { transform: translateY(0); box-shadow: none; }

/* Deep green on coral only reaches AA at large bold sizes, so keep this text big. */
.btn-coral {
	background: var(--coral);
	border-color: var(--coral);
	color: var(--green);
	font-size: 1.15rem;
	font-weight: 900;
}
.btn-coral:hover { box-shadow: 0 6px 0 -2px var(--cream); }

.btn-ghost {
	background: transparent;
	color: var(--green);
}
.btn-ghost:hover { background: var(--paper); }

.btn-light {
	background: var(--cream);
	border-color: var(--cream);
	color: var(--green);
}

.btn-danger {
	background: transparent;
	border-color: var(--danger);
	color: var(--danger);
}
.btn-danger:hover { background: var(--danger); color: #fff; box-shadow: none; }

.btn-small { min-height: 44px; padding: .45em 1.1em; font-size: .95rem; }

.link-button {
	font: inherit;
	font-weight: 700;
	color: var(--green);
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	text-decoration: underline;
	text-decoration-color: var(--coral);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

.actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 1.6em;
}
.actions.center { justify-content: center; }

/* ---------- Pixel heart ---------- */

.heart {
	display: block;
	image-rendering: pixelated;
}

/* ---------- Header ---------- */

.site-header {
	background: var(--green);
	color: var(--cream);
	position: sticky;
	top: 0;
	z-index: 5;
}
.header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 68px;
	gap: 16px;
}
.brand {
	display: flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	color: var(--cream);
}
/* The outline of the heart is deep green, so give it a cream plate on the green header. */
.brand-heart {
	width: 40px;
	height: 40px;
	padding: 5px;
	background: var(--cream);
	border-radius: 10px;
	transition: transform .35s var(--ease);
}
.brand:hover .brand-heart { transform: translateY(-3px) rotate(-4deg); }
.brand-name {
	font-weight: 900;
	font-size: 1.3rem;
	letter-spacing: -.01em;
}
.header-link {
	color: var(--cream);
	font: inherit;
	font-weight: 700;
	font-size: .95rem;
	text-decoration: none;
	padding: .5em 1em;
	border: 2px solid rgba(251, 243, 224, .35);
	border-radius: 999px;
	background: none;
	cursor: pointer;
	transition: border-color .2s, background-color .2s;
}
.header-link:hover { border-color: var(--coral); background: rgba(255, 112, 67, .12); }
.logout-form { margin: 0; }

.member-nav {
	background: #0B3834;
	border-top: 1px solid rgba(251, 243, 224, .1);
}
.member-nav .wrap {
	display: flex;
	gap: 4px;
	overflow-x: auto;
	scrollbar-width: none;
}
.member-nav a {
	flex: 0 0 auto;
	color: var(--cream);
	text-decoration: none;
	font-weight: 700;
	font-size: .95rem;
	padding: .75em .9em;
	border-bottom: 3px solid transparent;
	transition: border-color .2s;
}
.member-nav a:hover { border-bottom-color: rgba(255, 112, 67, .6); }
.member-nav a[aria-current="page"] { border-bottom-color: var(--coral); }

/* ---------- Hero ---------- */

.hero {
	position: relative;
	overflow: hidden;
	padding: 56px 0 72px;
	background:
		radial-gradient(ellipse 60% 50% at 15% 30%, rgba(255, 112, 67, .10), transparent 70%),
		radial-gradient(ellipse 45% 45% at 88% 55%, rgba(15, 69, 64, .06), transparent 70%),
		var(--cream);
}
.hero-inner {
	display: grid;
	gap: 40px;
	align-items: center;
	position: relative;
}
.logo { text-align: center; }
.logo-heart {
	position: relative;
	width: clamp(130px, 30vw, 190px);
	margin: 0 auto 18px;
}
.hero-heart {
	width: 100%;
	height: auto;
	filter: drop-shadow(0 10px 0 rgba(15, 69, 64, .08));
}
.logo-name {
	font-size: clamp(2.6rem, 2rem + 3vw, 4rem);
	font-weight: 900;
	margin: 0;
	letter-spacing: -.02em;
}
.logo-tagline {
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--green-soft);
	margin: .2em 0 0;
}
.headline {
	font-size: clamp(1.7rem, 1.3rem + 1.8vw, 2.5rem);
	font-weight: 900;
	line-height: 1.2;
	margin-bottom: .6em;
}
.headline::after {
	content: '';
	display: block;
	width: 72px;
	height: 6px;
	margin-top: .45em;
	background: var(--coral);
	border-radius: 3px;
}
.hero-text .lead { font-size: 1.15rem; max-width: 36em; }

/* "1UP" that floats up once when the heart lands. */
.oneup {
	position: absolute;
	top: -6px;
	right: -14px;
	font-weight: 900;
	font-size: 1rem;
	letter-spacing: .08em;
	color: var(--coral);
	opacity: 0;
	pointer-events: none;
}

/* Static pixel confetti, a quiet nod to old-school graphics. */
.pixels span {
	position: absolute;
	width: 14px;
	height: 14px;
	border-radius: 2px;
	background: var(--coral);
	opacity: .18;
}
.pixels span:nth-child(1) { top: 12%; left: 6%; }
.pixels span:nth-child(2) { top: 22%; left: 9%; width: 9px; height: 9px; background: var(--green); opacity: .12; }
.pixels span:nth-child(3) { top: 70%; left: 4%; width: 10px; height: 10px; }
.pixels span:nth-child(4) { top: 15%; right: 7%; background: var(--green); opacity: .1; }
.pixels span:nth-child(5) { bottom: 14%; right: 10%; width: 18px; height: 18px; }
.pixels span:nth-child(6) { bottom: 22%; right: 5%; width: 8px; height: 8px; background: var(--green); opacity: .14; }

@media (min-width: 900px) {
	.hero { padding: 96px 0 110px; }
	.hero-inner { grid-template-columns: 5fr 7fr; gap: 64px; }
}

/* ---------- Sections ---------- */

.section { padding: 64px 0; }
.section-tint { background: var(--green-tint); }
.section-green { background: var(--green); color: var(--cream); }
.section-green h2 { color: var(--cream); }

.split {
	display: grid;
	gap: 20px;
	max-width: 900px;
}
.split p { font-size: 1.08rem; }
.split-icon, .card-icon, .join-icon {
	width: 64px;
	height: 64px;
	display: grid;
	place-items: center;
	border-radius: 18px;
	background: var(--coral-tint);
	color: var(--green);
}
.section-tint .split-icon { background: var(--paper); }
.icon { width: 34px; height: 34px; }

@media (min-width: 720px) {
	.section { padding: 88px 0; }
	.split { grid-template-columns: 80px 1fr; gap: 32px; }
	.split-icon { width: 80px; height: 80px; border-radius: 22px; }
	.split-icon .icon { width: 42px; height: 42px; }
}

.cards {
	display: grid;
	gap: 24px;
}
@media (min-width: 820px) {
	.cards { grid-template-columns: 1fr 1fr; gap: 32px; }
}
.card {
	background: var(--paper);
	border: 1px solid var(--cream-dark);
	border-radius: var(--radius);
	padding: 32px 28px;
	box-shadow: var(--shadow);
	transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.card:hover { transform: translateY(-4px); box-shadow: 0 2px 4px rgba(15, 69, 64, .06), 0 16px 36px rgba(15, 69, 64, .1); }
.card-icon { margin-bottom: 20px; }

.join-icon {
	margin: 0 auto 20px;
	background: rgba(251, 243, 224, .1);
	color: var(--coral);
}
#bli-med p { font-size: 1.1rem; }
.join-mail {
	font-size: clamp(1.3rem, 1rem + 1.4vw, 1.8rem) !important;
	font-weight: 900;
	margin: 1.2em 0 .4em;
	word-break: break-word;
}
.section-green p a:not(.btn) {
	color: var(--cream);
}
.section-green p a:not(.btn):hover { background: rgba(255, 112, 67, .18); }
.closing {
	margin-top: 2em;
	font-weight: 800;
	font-size: 1.2rem !important;
	color: var(--coral);
}

/* ---------- Footer ---------- */

.site-footer {
	background: #0B3834;
	color: var(--cream);
	padding: 40px 0;
	font-size: .95rem;
}
.footer-inner {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	justify-content: space-between;
	align-items: center;
}
.footer-inner p { margin: 0; }
.footer-brand { display: flex; align-items: center; gap: 14px; }
.footer-heart {
	width: 44px;
	height: 44px;
	padding: 6px;
	background: var(--cream);
	border-radius: 10px;
}
.site-footer a {
	color: var(--cream);
	text-decoration-color: var(--coral);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
	font-weight: 700;
}

/* ---------- Motion ---------- */

/* Content is only hidden when JS is running, so it never stays invisible. */
.js .reveal {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity .9s var(--ease), transform .9s var(--ease);
}
.js .reveal.is-visible { opacity: 1; transform: none; }
.js .cards .reveal:nth-child(2) { transition-delay: .12s; }

.js .hero-heart { animation: pickup 1.1s var(--ease) .2s both; }
.js .oneup { animation: oneup 1.6s ease-out .9s both; }
.js .logo-name, .js .logo-tagline, .js .hero-text { animation: fade-up .9s var(--ease) both; }
.js .logo-name { animation-delay: .35s; }
.js .logo-tagline { animation-delay: .5s; }
.js .hero-text { animation-delay: .65s; }

@keyframes pickup {
	0%   { transform: translateY(-30px) scale(.6); opacity: 0; }
	45%  { transform: translateY(6px) scale(1.06); opacity: 1; }
	65%  { transform: translateY(-6px) scale(.98); }
	82%  { transform: translateY(2px) scale(1.02); }
	100% { transform: none; }
}
@keyframes oneup {
	0%   { opacity: 0; transform: translateY(8px); }
	25%  { opacity: 1; }
	100% { opacity: 0; transform: translateY(-34px); }
}
@keyframes fade-up {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation: none !important;
		transition: none !important;
	}
	.js .reveal { opacity: 1; transform: none; }
	.btn:hover, .card:hover, .brand:hover .brand-heart { transform: none; }
}

/* ---------- Simple pages and forms ---------- */

.page-simple main { background: var(--cream); }
.form-wrap { max-width: 560px; }

.form { display: flex; flex-direction: column; }
.form label {
	font-weight: 800;
	margin: 1.1em 0 .35em;
}
.form label:first-of-type { margin-top: 0; }
.form .btn { margin-top: 1.6em; align-self: flex-start; }

input[type="text"], input[type="email"], input[type="password"], input[type="search"],
input[type="date"], input[type="time"], select, textarea {
	width: 100%;
	font: inherit;
	font-size: 1rem;
	color: var(--green);
	background: #fff;
	border: 2px solid var(--green-line);
	border-radius: var(--radius-sm);
	padding: .7em .85em;
	min-height: 52px;
	transition: border-color .2s, box-shadow .2s;
}
input:focus, select:focus, textarea:focus {
	border-color: var(--green);
	box-shadow: 0 0 0 4px rgba(255, 112, 67, .25);
	outline: none;
}
textarea { resize: vertical; line-height: 1.55; }
input[type="file"] { font: inherit; font-size: .95rem; max-width: 100%; }

.hint { font-size: .9rem; color: var(--green-soft); margin: .4em 0 0; }
.optional { font-weight: 500; color: var(--green-soft); }
.check { display: flex; gap: .5em; align-items: center; font-weight: 600 !important; }
.check input { width: 22px; height: 22px; accent-color: var(--green); }
.form-links { margin-top: 1.8em; line-height: 2; }

.form-row { display: grid; gap: 0 16px; }
@media (min-width: 560px) { .form-row { grid-template-columns: 1fr 1fr; } }
.form-row label { margin-top: 1.1em !important; }

.notice {
	border-radius: var(--radius-sm);
	padding: 1em 1.2em;
	margin: 0 0 1.4em;
	border-left: 6px solid;
}
.notice ul { margin: 0; padding-left: 1.1em; }
.notice-ok { background: var(--green-tint); border-color: var(--green); }
.notice-error { background: #FCE4DC; border-color: var(--danger); color: #5E1D0F; }
.notice-tip { background: var(--paper); border-color: var(--coral); }
.notice-tip .text-link { margin-left: .3em; }

/* ---------- Member area ---------- */

.member-main { padding: 40px 0 72px; }
.member-main h1 { margin-bottom: .3em; }
.member-main .lead { color: var(--green-soft); margin-bottom: 1.6em; }

.panel {
	background: var(--paper);
	border: 1px solid var(--cream-dark);
	border-radius: var(--radius);
	padding: 24px;
	margin-bottom: 24px;
	box-shadow: var(--shadow);
}
.panel h2 { font-size: 1.35rem; }
.panel > :last-child { margin-bottom: 0; }

.dash { display: grid; gap: 0 24px; }
@media (min-width: 900px) {
	.dash { grid-template-columns: 1fr 1fr; }
	.dash .panel:first-child { grid-row: span 2; }
}
.event-date { font-weight: 800; color: var(--green); text-transform: capitalize; }

.title-row {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 1.4em;
}
.title-row .lead { margin-bottom: 0; }

.crumbs { margin-bottom: .6em; font-weight: 700; color: var(--green-soft); }
.crumbs a { color: var(--green-soft); }
.section-title { margin-top: 1.6em; }

.badge {
	display: inline-block;
	font-size: .78rem;
	font-weight: 800;
	padding: .1em .6em;
	border-radius: 999px;
	background: var(--coral-tint);
	color: var(--green);
	vertical-align: middle;
}
.badge-warn { background: #FCE4DC; color: var(--danger); }

.avatar {
	display: inline-grid;
	place-items: center;
	flex: 0 0 auto;
	border-radius: 50%;
	object-fit: cover;
	background: var(--green-tint);
	border: 3px solid var(--paper);
	box-shadow: 0 0 0 2px var(--green-line);
}
.avatar-sm { width: 44px; height: 44px; font-size: .9rem; }
.avatar-md { width: 64px; height: 64px; font-size: 1.2rem; }
.avatar-lg { width: 120px; height: 120px; font-size: 2.2rem; }
.avatar-initials { font-weight: 900; color: var(--green); }

.tags {
	list-style: none;
	padding: 0;
	margin: 0 0 .6em;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.tags a {
	display: inline-block;
	padding: .3em .85em;
	border-radius: 999px;
	background: var(--green-tint);
	color: var(--green);
	font-weight: 700;
	text-decoration: none;
	transition: background-color .2s, transform .2s var(--ease);
}
.tags a:hover { background: var(--coral-tint); transform: translateY(-1px); }
.tags a span { font-weight: 500; color: var(--green-soft); }
.tags-quiet { margin-bottom: 1.4em; }
.tags-small a { font-size: .85rem; padding: .2em .7em; }

/* Lists of threads */
.thread-list { list-style: none; padding: 0; margin: 0 0 1em; }
.thread-list li {
	display: flex;
	flex-direction: column;
	padding: 14px 0;
	border-bottom: 1px solid var(--cream-dark);
}
.thread-list li:last-child { border-bottom: 0; }
.thread-list:not(.compact) {
	background: var(--paper);
	border: 1px solid var(--cream-dark);
	border-radius: var(--radius);
	padding: 4px 24px;
	box-shadow: var(--shadow);
}
.thread-title {
	font-weight: 800;
	font-size: 1.1rem;
	color: var(--green);
	text-decoration: none;
}
.thread-title:hover { text-decoration: underline; text-decoration-color: var(--coral); text-decoration-thickness: 2px; }
.thread-list .muted { font-size: .92rem; }
.thread-list .muted a { color: var(--green-soft); font-weight: 700; }

.category-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; }
@media (min-width: 760px) { .category-list { grid-template-columns: 1fr 1fr; } }
.category {
	display: flex;
	flex-direction: column;
	height: 100%;
	gap: .3em;
	padding: 24px;
	background: var(--paper);
	border: 1px solid var(--cream-dark);
	border-left: 6px solid var(--coral);
	border-radius: var(--radius);
	text-decoration: none;
	color: var(--green);
	box-shadow: var(--shadow);
	transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.category:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(15, 69, 64, .06), 0 14px 30px rgba(15, 69, 64, .1); }
.category-name { font-weight: 900; font-size: 1.3rem; }
.category .muted { font-size: .9rem; margin-top: auto; padding-top: .4em; }

/* Posts */
.posts { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 16px; }
.post {
	display: grid;
	gap: 14px;
	background: var(--paper);
	border: 1px solid var(--cream-dark);
	border-radius: var(--radius);
	padding: 20px;
	box-shadow: var(--shadow);
	scroll-margin-top: 140px;
}
.post-author { display: flex; align-items: center; gap: 12px; }
.post-author > div { display: flex; flex-direction: column; line-height: 1.35; }
.post-author a { font-weight: 800; color: var(--green); text-decoration: none; }
.post-author .muted { font-size: .88rem; }
.post-author .badge { align-self: flex-start; margin-top: 2px; }
.post-meta { font-size: .88rem; margin-bottom: .5em; }
.post-text { overflow-wrap: anywhere; }
.post-actions { display: flex; gap: 20px; align-items: center; margin-top: 1em; font-size: .92rem; }
.post-actions form { margin: 0; }
.post:target { border-color: var(--coral); box-shadow: 0 0 0 3px var(--coral-tint), var(--shadow); }
@media (min-width: 760px) {
	.post { grid-template-columns: 170px 1fr; gap: 24px; padding: 24px; }
	.post-author { flex-direction: column; align-items: flex-start; border-right: 1px solid var(--cream-dark); padding-right: 16px; }
}

.reply h2 { font-size: 1.4rem; }

.pager {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 16px;
	margin: 0 0 24px;
	font-weight: 700;
}

/* Members */
.search {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	margin-bottom: 1.2em;
}
.search input { flex: 1 1 260px; }

.member-grid {
	list-style: none;
	padding: 0;
	margin: 0 0 24px;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 16px;
}
.member-card {
	background: var(--paper);
	border: 1px solid var(--cream-dark);
	border-radius: var(--radius);
	padding: 20px;
	box-shadow: var(--shadow);
	transition: transform .3s var(--ease);
}
.member-card:hover { transform: translateY(-3px); }
.member-card-link {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 4px;
	text-decoration: none;
	color: var(--green);
	margin-bottom: 12px;
}
.member-card-link .avatar { margin-bottom: 6px; }
.member-name { font-weight: 800; font-size: 1.1rem; }
.member-card .muted { font-size: .9rem; }
.member-card .tags { justify-content: center; margin: 0; }

.member-mini {
	list-style: none;
	padding: 0;
	margin: 0 0 1em;
	display: flex;
	flex-wrap: wrap;
	gap: 14px 18px;
}
.member-mini a {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--green);
	font-weight: 700;
	text-decoration: none;
}
.member-mini a:hover span { text-decoration: underline; text-decoration-color: var(--coral); }

/* Profile */
.profile-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px 28px;
	margin-bottom: 28px;
}
.profile-head h1 { margin-bottom: .1em; }
.profile-head p { margin-bottom: .5em; }
.avatar-edit { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-bottom: 1.4em; }
.avatar-edit label { margin-top: 0 !important; }
.admin-box { margin-top: 24px; padding-top: 24px; border-top: 1px dashed var(--green-line); }

/* Events */
.event { display: grid; gap: 20px; }
.event h2 { margin-bottom: .2em; }
@media (min-width: 640px) { .event { grid-template-columns: 96px 1fr; gap: 28px; } }
.event-when {
	width: 96px;
	height: 96px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	border-radius: 18px;
	background: var(--green);
	color: var(--cream);
	line-height: 1.05;
}
.event-day { font-size: 2.1rem; font-weight: 900; }
.event-month { font-size: .95rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--coral); }
.event-rsvp { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 1.2em 0; }
.event-rsvp p { margin: 0; }
.going-yes { font-weight: 800; }
.going-yes::before { content: '✓ '; color: var(--coral); }
.past-events { list-style: none; padding: 0; }
.past-events li { padding: 10px 0; border-bottom: 1px solid var(--cream-dark); display: flex; flex-wrap: wrap; gap: 4px 12px; }