/*
Theme Name:        SCC Coastal
Theme URI:         https://scc.sarasotamarketing.com/
Author:            Sarasota Marketing
Author URI:        https://sarasotamarketing.com/
Description:       Custom classic theme for Sarasota Community Church. Coastal modern editorial design with palms-inspired palette, built for the SCC Sermons plugin.
Version:           0.1.3
Requires at least: 6.0
Tested up to:      6.9
Requires PHP:      7.4
License:           GPL-2.0-or-later
License URI:       https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:       scc-coastal
Tags:              custom, church, classic
*/

/* ============================================================
   Design tokens
   ============================================================ */
:root {
	/* Palette */
	--c-gulf:           #4A99AE;
	--c-gulf-deep:      #2C6B7E;
	--c-deep-gulf:      #1A3D4F;
	--c-deep-gulf-2:   #0E2A38;
	--c-sand:          #F2E8D5;
	--c-sand-warm:     #E8DCC2;
	--c-coral:         #E07856;
	--c-coral-deep:    #B85838;
	--c-coral-dark:    #4A1B0C;
	--c-paper:         #FBF8F2;
	--c-paper-dim:     #F5F1E8;

	--c-text:           var(--c-deep-gulf);
	--c-text-muted:    #5A7280;
	--c-text-faint:    #8A9CA7;
	--c-line:           rgba(26, 61, 79, 0.12);
	--c-line-strong:   rgba(26, 61, 79, 0.22);

	/* Typography */
	--ff-display: "Fraunces", "Iowan Old Style", "Source Serif Pro", Georgia, serif;
	--ff-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
	--ff-mono:    ui-monospace, "SF Mono", Menlo, monospace;

	/* Scale */
	--size-base: 17px;
	--lh-body:   1.65;
	--lh-tight:  1.15;

	/* Layout */
	--container:    1240px;
	--container-tight: 920px;
	--container-text:  680px;

	/* Spacing */
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-5: 1.5rem;
	--space-6: 2rem;
	--space-7: 3rem;
	--space-8: 4rem;
	--space-9: 6rem;
	--space-10: 8rem;

	/* Radius */
	--radius-sm: 6px;
	--radius:    12px;
	--radius-lg: 20px;
	--radius-pill: 100px;

	/* Motion */
	--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--dur:  240ms;
}

/* ============================================================
   Reset
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
	margin: 0;
	font-family: var(--ff-body);
	font-size: var(--size-base);
	line-height: var(--lh-body);
	color: var(--c-text);
	background: var(--c-paper);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}
img, svg, video, iframe { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; transition: color var(--dur) var(--ease); }
button { font: inherit; cursor: pointer; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-family: var(--ff-display); font-weight: 400; line-height: var(--lh-tight); letter-spacing: -0.01em; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

/* ============================================================
   Typography scale
   ============================================================ */
.t-display-xl { font-family: var(--ff-display); font-size: clamp(2.5rem, 6vw + 1rem, 5.5rem); line-height: 1; font-weight: 400; letter-spacing: -0.025em; }
.t-display    { font-family: var(--ff-display); font-size: clamp(2rem, 4vw + 0.5rem, 3.5rem); line-height: 1.05; font-weight: 400; letter-spacing: -0.02em; }
.t-h1         { font-family: var(--ff-display); font-size: clamp(1.75rem, 3vw + 0.5rem, 2.75rem); line-height: 1.1; }
.t-h2         { font-family: var(--ff-display); font-size: clamp(1.5rem, 2vw + 0.5rem, 2.25rem); line-height: 1.15; }
.t-h3         { font-family: var(--ff-display); font-size: 1.5rem; line-height: 1.25; }
.t-lede       { font-size: 1.25rem; line-height: 1.55; color: var(--c-text-muted); }
.t-eyebrow    { font-size: 0.75rem; font-weight: 500; letter-spacing: 0.08em; color: var(--c-gulf-deep); }
.t-meta       { font-size: 0.85rem; color: var(--c-text-muted); }
.t-italic     { font-style: italic; }

/* ============================================================
   Layout helpers
   ============================================================ */
.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--space-5); }
.container--tight { max-width: var(--container-tight); }
.container--text { max-width: var(--container-text); }

.section { padding: var(--space-8) 0; }
.section--lg { padding: var(--space-9) 0; }
.section--dark { background: var(--c-deep-gulf); color: var(--c-sand); }
.section--sand { background: var(--c-sand); }

.grid { display: grid; gap: var(--space-5); }
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
@media (min-width: 720px) {
	.grid-2 { grid-template-columns: repeat(2, 1fr); }
	.grid-3 { grid-template-columns: repeat(3, 1fr); }
}

/* ============================================================
   Header / nav
   ============================================================ */
.site-header {
	position: absolute;
	inset: 0 0 auto 0;
	z-index: 50;
	padding: var(--space-4) 0;
	color: var(--c-sand);
}
.site-header--solid {
	position: relative;
	background: var(--c-deep-gulf);
	color: var(--c-sand);
}
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); }

.site-brand { display: inline-flex; align-items: center; gap: 12px; }
.site-brand__logo { width: 40px; height: 40px; border-radius: 50%; background: var(--c-gulf); display: grid; place-items: center; flex-shrink: 0; }
.site-brand__logo svg { width: 26px; height: 26px; }
.site-brand__text { display: flex; flex-direction: column; line-height: 1.1; }
.site-brand__name { font-family: var(--ff-display); font-size: 1.15rem; color: inherit; }
.site-brand__tag { font-size: 0.7rem; letter-spacing: 0.06em; opacity: 0.75; }

/* Custom logo (uploaded via Customizer → Site Identity → Logo) */
.custom-logo-link {
	display: inline-flex;
	align-items: center;
	max-height: 52px;
}
.custom-logo-link img,
.custom-logo {
	max-height: 52px;
	width: auto;
	height: auto;
	display: block;
}
@media (max-width: 600px) {
	.custom-logo-link,
	.custom-logo-link img,
	.custom-logo { max-height: 40px; }
}
/* When custom logo is uploaded, hide the SVG-palm fallback text — the logo IS the wordmark */
body.has-custom-logo .site-brand__text { display: none; }

.site-nav { display: none; align-items: center; gap: var(--space-5); }
@media (min-width: 900px) { .site-nav { display: flex; } }
.site-nav a { font-size: 0.95rem; padding: 6px 4px; position: relative; white-space: nowrap; }
.site-nav a:hover { color: var(--c-coral); }
.site-nav .menu-item-has-children > a {
	display: inline-flex;
	align-items: baseline;
	gap: 4px;
}
.site-nav .menu-item-has-children > a::after {
	content: "▾";
	font-size: 0.7em;
	opacity: 0.6;
}
.site-nav ul { list-style: none; padding: 0; margin: 0; display: flex; gap: var(--space-5); align-items: center; }
.site-nav ul > li { flex-shrink: 0; }
.site-nav .sub-menu {
	position: absolute;
	top: 100%; left: 0;
	background: var(--c-deep-gulf);
	border-radius: var(--radius);
	padding: var(--space-3);
	flex-direction: column;
	gap: 0;
	min-width: 180px;
	display: none;
}
.site-nav .menu-item-has-children { position: relative; }
.site-nav .menu-item-has-children:hover .sub-menu,
.site-nav .menu-item-has-children:focus-within .sub-menu { display: flex; }
.site-nav .sub-menu a { padding: 8px 12px; border-radius: var(--radius-sm); display: block; }
.site-nav .sub-menu a:hover { background: var(--c-deep-gulf-2); }

.site-nav__cta {
	background: var(--c-coral);
	color: var(--c-coral-dark) !important;
	padding: 9px 18px;
	border-radius: var(--radius-pill);
	font-weight: 500;
	font-size: 0.9rem;
}
.site-nav__cta:hover { background: var(--c-coral-deep); color: var(--c-paper) !important; }

.menu-toggle {
	display: inline-grid; place-items: center;
	width: 44px; height: 44px;
	background: transparent;
	border: 1px solid rgba(255,255,255,0.25);
	border-radius: 50%;
	color: inherit;
}
@media (min-width: 900px) { .menu-toggle { display: none; } }

.mobile-nav {
	display: none;
	position: fixed;
	inset: 0;
	background: var(--c-deep-gulf);
	color: var(--c-sand);
	z-index: 100;
	padding: var(--space-7) var(--space-5);
	flex-direction: column;
	gap: var(--space-5);
	overflow-y: auto;
}
.mobile-nav.is-open { display: flex; }
.mobile-nav__close {
	align-self: flex-end;
	background: transparent;
	border: 1px solid rgba(255,255,255,0.25);
	color: inherit;
	width: 44px; height: 44px;
	border-radius: 50%;
}
.mobile-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.mobile-nav a { font-family: var(--ff-display); font-size: 2rem; }

/* ============================================================
   Buttons
   ============================================================ */
.btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 22px;
	border-radius: var(--radius-pill);
	border: 1px solid transparent;
	font-weight: 500;
	font-size: 0.95rem;
	transition: background var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease);
	cursor: pointer;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--c-coral); color: var(--c-coral-dark); }
.btn--primary:hover { background: var(--c-coral-deep); color: var(--c-paper); }
.btn--ghost { background: transparent; color: inherit; border-color: currentColor; opacity: 0.85; }
.btn--ghost:hover { opacity: 1; background: rgba(255,255,255,0.08); }
.btn--solid { background: var(--c-deep-gulf); color: var(--c-sand); }
.btn--solid:hover { background: var(--c-deep-gulf-2); }

.pill {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 5px 12px;
	border-radius: var(--radius-pill);
	background: var(--c-sand);
	color: var(--c-deep-gulf);
	font-size: 0.78rem;
	font-weight: 500;
}
.pill--live { background: var(--c-coral); color: var(--c-coral-dark); }
.pill--live::before {
	content: "";
	width: 6px; height: 6px;
	background: var(--c-coral-dark);
	border-radius: 50%;
	animation: pulse 1.8s var(--ease) infinite;
}
@keyframes pulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50% { opacity: 0.4; transform: scale(1.4); }
}

/* ============================================================
   Hero
   ============================================================ */
.hero {
	position: relative;
	min-height: 720px;
	background: var(--c-deep-gulf);
	color: var(--c-sand);
	overflow: hidden;
}
.hero__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
}
.hero__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}
.hero__inner {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: inherit;
	padding-top: var(--space-9);
	padding-bottom: var(--space-8);
	padding-left: var(--space-5);
	padding-right: var(--space-5);
}
.hero__content {
	background: rgba(26, 61, 79, 0.78);
	padding: var(--space-6) var(--space-5) var(--space-5);
	border-radius: var(--radius-lg);
	max-width: 620px;
}
.hero__live { margin-bottom: var(--space-5); }
.hero__headline {
	font-size: clamp(2.25rem, 4.5vw + 0.5rem, 4rem);
	margin-bottom: var(--space-3);
}
.hero__sub {
	color: rgba(242, 232, 213, 0.78);
	font-size: 1.05rem;
	max-width: 38ch;
	margin-bottom: var(--space-6);
}
.hero__ctas { display: flex; flex-wrap: wrap; gap: var(--space-3); }

@media (min-width: 900px) {
	.hero { min-height: 760px; }
	.hero__inner { padding-bottom: var(--space-9); }
	.hero__content {
		background: transparent;
		padding: 0 0 var(--space-3) 0;
		max-width: 680px;
	}
	.hero__inner::before {
		content: "";
		position: absolute;
		inset: auto 0 0 0;
		height: 70%;
		background: linear-gradient(to top, rgba(26,61,79,0.92), rgba(26,61,79,0));
		z-index: 1;
	}
	.hero__content { position: relative; z-index: 2; }
}

/* ============================================================
   Sermon card
   ============================================================ */
.sermon-card {
	display: flex;
	flex-direction: column;
	background: var(--c-sand);
	border-radius: var(--radius-lg);
	padding: var(--space-5);
	transition: transform var(--dur) var(--ease);
	color: var(--c-deep-gulf);
}
.sermon-card--with-image {
	padding: 0;
	overflow: hidden;
}
.sermon-card__image {
	position: relative;
	aspect-ratio: 16 / 10;
	background: var(--c-deep-gulf);
	overflow: hidden;
}
.sermon-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--dur) var(--ease);
}
.sermon-card:hover .sermon-card__image img { transform: scale(1.04); }
.sermon-card__play--overlay {
	position: absolute;
	left: 50%; top: 50%;
	transform: translate(-50%, -50%);
	width: 56px; height: 56px;
	background: rgba(26, 61, 79, 0.85);
	color: var(--c-paper);
	border-radius: 50%;
	display: grid; place-items: center;
	transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.sermon-card__play--overlay svg { width: 18px; height: 18px; fill: currentColor; margin-left: 3px; }
.sermon-card:hover .sermon-card__play--overlay {
	background: var(--c-coral);
	color: var(--c-coral-dark);
	transform: translate(-50%, -50%) scale(1.08);
}
.sermon-card--with-image .sermon-card__body { padding: var(--space-5); }
.sermon-card:hover { transform: translateY(-2px); }
.sermon-card__top { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.sermon-card__date { font-size: 0.78rem; color: var(--c-gulf-deep); letter-spacing: 0.08em; font-weight: 500; }
.sermon-card__passage { font-size: 0.78rem; color: var(--c-text-muted); }
.sermon-card__title { font-family: var(--ff-display); font-size: 1.5rem; line-height: 1.15; margin-bottom: var(--space-4); }
.sermon-card__speaker { display: flex; align-items: center; gap: 10px; font-size: 0.9rem; color: var(--c-text-muted); margin-bottom: var(--space-4); }
.sermon-card__avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--c-gulf); color: var(--c-paper); display: grid; place-items: center; font-size: 0.7rem; font-weight: 500; }
.sermon-card__foot { display: flex; align-items: center; gap: 10px; padding-top: var(--space-3); border-top: 1px solid var(--c-line); margin-top: auto; }
.sermon-card--with-image .sermon-card__foot { border-top: 0; padding-top: 0; }
.sermon-card__play {
	background: var(--c-deep-gulf);
	color: var(--c-paper);
	width: 36px; height: 36px;
	border-radius: 50%;
	display: grid; place-items: center;
	flex-shrink: 0;
	transition: background var(--dur) var(--ease);
}
.sermon-card:hover .sermon-card__play:not(.sermon-card__play--overlay) { background: var(--c-coral); color: var(--c-coral-dark); }
.sermon-card__play svg { width: 14px; height: 14px; fill: currentColor; }
.sermon-card__duration { font-size: 0.85rem; color: var(--c-text-muted); }

/* Sermon single hero image */
.sermon-hero {
	position: relative;
	aspect-ratio: 21 / 9;
	max-width: var(--container);
	margin: 0 auto var(--space-6);
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--c-deep-gulf);
}
.sermon-hero img { width: 100%; height: 100%; object-fit: cover; }

/* ============================================================
   Sermon single
   ============================================================ */
.sermon-single { padding: var(--space-7) 0 var(--space-8); }
.sermon-single__header { max-width: var(--container-text); margin: 0 auto var(--space-6); text-align: left; }
.sermon-single__date { font-size: 0.85rem; color: var(--c-gulf-deep); letter-spacing: 0.08em; font-weight: 500; margin-bottom: var(--space-3); }
.sermon-single__title { font-family: var(--ff-display); font-size: clamp(2rem, 4vw + 0.5rem, 3.5rem); line-height: 1.05; margin-bottom: var(--space-4); }
.sermon-single__meta { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); font-size: 0.95rem; color: var(--c-text-muted); }
.sermon-single__meta a { color: var(--c-gulf-deep); border-bottom: 1px solid currentColor; }
.sermon-single__meta a:hover { color: var(--c-coral-deep); }

.sermon-video {
	position: relative;
	max-width: var(--container-tight);
	margin: 0 auto var(--space-6);
	aspect-ratio: 16 / 9;
	background: var(--c-deep-gulf);
	border-radius: var(--radius);
	overflow: hidden;
}
.sermon-video iframe,
.sermon-video > * { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.sermon-audio {
	max-width: var(--container-text);
	margin: 0 auto var(--space-6);
	background: var(--c-sand);
	border-radius: var(--radius);
	padding: var(--space-4);
	display: flex; align-items: center; gap: var(--space-3);
}
.sermon-audio audio { flex: 1; min-width: 0; }
.sermon-audio__label { font-weight: 500; font-size: 0.9rem; }

.sermon-resources {
	max-width: var(--container-text);
	margin: 0 auto var(--space-6);
	display: flex; flex-wrap: wrap; gap: var(--space-3);
}
.sermon-resources a {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 10px 16px;
	background: var(--c-paper-dim);
	border: 1px solid var(--c-line);
	border-radius: var(--radius-pill);
	font-size: 0.9rem;
}
.sermon-resources a:hover { background: var(--c-sand); }

.sermon-description {
	max-width: var(--container-text);
	margin: 0 auto;
	font-size: 1.05rem;
	line-height: 1.7;
}
.sermon-description h2 { margin: var(--space-6) 0 var(--space-3); font-size: 1.5rem; }
.sermon-description p { margin: 0 0 var(--space-4); }
.sermon-description a { color: var(--c-gulf-deep); border-bottom: 1px solid currentColor; }

/* ============================================================
   Sermon archive
   ============================================================ */
.sermon-archive__head {
	padding: var(--space-9) 0 var(--space-6);
	background: var(--c-sand);
	text-align: center;
}
.sermon-archive__head h1 { font-size: clamp(2.5rem, 5vw + 0.5rem, 4rem); margin-bottom: var(--space-3); }
.sermon-archive__head p { color: var(--c-text-muted); max-width: 40ch; margin: 0 auto; font-size: 1.1rem; }
.sermon-archive__body { padding: var(--space-7) 0; }
.sermon-archive__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-4);
}
@media (min-width: 720px) { .sermon-archive__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .sermon-archive__grid { grid-template-columns: repeat(3, 1fr); } }

.sermon-filter {
	display: flex; flex-wrap: wrap; gap: var(--space-3);
	margin-bottom: var(--space-6);
	align-items: center;
}
.sermon-filter__group { display: flex; align-items: center; gap: 8px; }
.sermon-filter label { font-size: 0.78rem; color: var(--c-text-muted); letter-spacing: 0.04em; text-transform: uppercase; }
.sermon-filter select, .sermon-filter input[type="search"] {
	padding: 8px 14px;
	border: 1px solid var(--c-line);
	border-radius: var(--radius-pill);
	background: var(--c-paper);
	font: inherit;
	font-size: 0.9rem;
	color: var(--c-text);
	min-width: 160px;
}
.sermon-filter input[type="search"] { min-width: 220px; }
.sermon-filter select:focus, .sermon-filter input:focus { outline: 2px solid var(--c-gulf); outline-offset: 2px; }

/* Pagination */
.scc-pagination {
	display: flex; justify-content: center; gap: 8px;
	margin-top: var(--space-7);
	flex-wrap: wrap;
}
.scc-pagination .page-numbers {
	display: inline-grid; place-items: center;
	min-width: 40px; height: 40px; padding: 0 12px;
	border-radius: var(--radius-pill);
	border: 1px solid var(--c-line);
	font-size: 0.9rem;
	color: var(--c-text);
}
.scc-pagination .page-numbers.current { background: var(--c-deep-gulf); color: var(--c-paper); border-color: var(--c-deep-gulf); }
.scc-pagination .page-numbers:hover:not(.current) { background: var(--c-sand); }

/* ============================================================
   Footer
   ============================================================ */
.site-footer {
	background: var(--c-deep-gulf);
	color: var(--c-sand);
	padding: var(--space-8) 0 var(--space-5);
}
.site-footer__top {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-6);
	margin-bottom: var(--space-7);
}
@media (min-width: 720px) {
	.site-footer__top { grid-template-columns: 2fr 1fr 1fr; }
}
.site-footer__brand .site-brand__name { font-size: 1.4rem; }
.site-footer__brand p { margin-top: var(--space-3); color: rgba(242,232,213,0.7); max-width: 36ch; }
.site-footer__col h4 { font-family: var(--ff-display); font-size: 1.1rem; margin-bottom: var(--space-3); }
.site-footer__col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.site-footer__col a { color: rgba(242,232,213,0.85); font-size: 0.95rem; }
.site-footer__col a:hover { color: var(--c-coral); }
.site-footer__bottom {
	display: flex; flex-wrap: wrap; gap: var(--space-3);
	justify-content: space-between; align-items: center;
	padding-top: var(--space-5);
	border-top: 1px solid rgba(242,232,213,0.15);
	font-size: 0.85rem;
	color: rgba(242,232,213,0.6);
}

/* ============================================================
   Page / single
   ============================================================ */
.page-header { padding: var(--space-9) 0 var(--space-5); }
.page-header h1 { font-size: clamp(2rem, 4vw + 0.5rem, 3.5rem); margin-bottom: var(--space-3); }
.page-content {
	max-width: var(--container-text);
	margin: 0 auto;
	padding: var(--space-5) var(--space-5) var(--space-8);
	font-size: 1.05rem;
	line-height: 1.75;
}
.page-content h2 { font-family: var(--ff-display); font-size: 1.85rem; margin: var(--space-6) 0 var(--space-3); }
.page-content h3 { font-family: var(--ff-display); font-size: 1.4rem; margin: var(--space-5) 0 var(--space-3); }
.page-content p { margin: 0 0 var(--space-4); }
.page-content a { color: var(--c-gulf-deep); border-bottom: 1px solid currentColor; }
.page-content blockquote {
	margin: var(--space-5) 0;
	padding: var(--space-2) var(--space-5);
	border-left: 3px solid var(--c-coral);
	font-family: var(--ff-display);
	font-style: italic;
	font-size: 1.3rem;
	line-height: 1.4;
}

/* ============================================================
   Utilities
   ============================================================ */
.sr-only {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0,0,0,0);
	white-space: nowrap; border: 0;
}
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }

/* Selection */
::selection { background: var(--c-coral); color: var(--c-coral-dark); }