*{box-sizing:border-box}
:root{
	/* New palette */
	--pastel-turquoise: #95DBDB; /* Pastel Turquoise */
	--matte-light:    #A7B7D1; /* Matte Light Blue */
	--cool-blue:      #45B3E0; /* Cool Blue */
	--misty-blue:     #B5C7EB; /* Misty Blue */

	--bg-1: var(--pastel-turquoise);
	--bg-2: var(--matte-light);
	--card-start: #FFFFFF;
	--card-end: #F6FBFF;
	--accent: var(--cool-blue);
	--accent-2: var(--misty-blue);
	--accent-3: #2E8FB0;

	/* page card colors (soothing alternate) */
	--page-card-start: #F6FFF9;
	--page-card-end: #ECF9F2;

	/* text color for good contrast */
	--text: #0B2833;

	/* glow colors (rgba of cool-blue) */
	--glow-strong: rgba(69,179,224,0.28);
	--glow-mid: rgba(69,179,224,0.14);
	--glow-faint: rgba(181,199,235,0.06);
}
/* Prevent horizontal scroll and ensure media fit */
html, body {max-width:100%;overflow-x:hidden}
img, svg, picture {max-width:100%;height:auto;display:block}
main, .main-wrap, #app {box-sizing:border-box}

/* Responsive layout adjustments */
header{padding:12px 10px}
nav{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* Main container responsive */
main#app, .main-wrap{max-width:980px;margin:18px auto;padding:0 16px}

/* Post list responsive rules */
.post-list{gap:14px}
.post-item{width:100%;min-height:64px}
.post-item h3{font-size:1.05rem}
.post-item p, .meta{font-size:0.95rem}

/* Accent strip smaller on narrow screens */
.post-item .accent-strip{width:6px}

/* Tappable nav links */
nav a{padding:10px 12px}

/* Mobile-specific: stack nav and tighten spacing */
@media (max-width:720px){
	header{padding:10px 8px}
	nav{flex-direction:column;align-items:stretch}
	nav a{display:block;width:100%;border-radius:0;text-align:center}
    main#app, .main-wrap{padding:0 12px;margin:12px auto}
    .post-item{padding:12px}
}

@media (max-width:420px){
	header h1{font-size:18px}
	.post-item h3{font-size:1rem}
	.meta{font-size:0.85rem}
	.post-content{padding:14px}
	.post-item .accent-strip{width:5px}
}
/* Calm, mindful background + base */
body{font-family:'Nunito Sans', system-ui,-apple-system,Segoe UI,Roboto,Arial;line-height:1.5;margin:0;color:var(--text);min-height:100vh;background:
	linear-gradient(180deg,var(--bg-1) 0%, var(--bg-2) 44%, #F8FBFF 100%) top center no-repeat;background-attachment: fixed}
header{background:linear-gradient(90deg,var(--cool-blue), var(--matte-light));color:#fff;padding:14px 14px 12px;position:relative;overflow:visible}
header::before{content:'';position:absolute;right:-6%;top:-6%;width:220px;height:220px;opacity:0.06;pointer-events:none}
header h1{margin:0;font-size:22px}
/* Title font: La Belle Aurore (from Google Fonts) */
header h1{margin:0;font-size:34px;font-family:'La Belle Aurore', cursive;letter-spacing:0.4px}
/* Title link styling: keep look but make it keyboard-focusable */
header h1 a{color:inherit;text-decoration:none;display:inline-block}
header h1 a:focus{outline:2px solid rgba(255,255,255,0.14);outline-offset:4px;border-radius:4px}
/* Layout: split header into left title/nav and right serenity prayer */
header{display:flex;align-items:flex-start;justify-content:space-between}
.brand{display:flex;align-items:center;gap:12px}
.site-logo{width:auto;height:auto;max-width:none;max-height:none;border:none;box-shadow:none;border-radius:0;flex-shrink:0;display:block}
.logo-link{display:inline-flex;align-items:center}
.header-left{display:flex;flex-direction:column}
nav{margin-top:10px}
/* menu toggle (hamburger) - hidden on wide screens */
.menu-toggle{display:none;background:transparent;border:2px solid rgba(255,255,255,0.12);color:#fff;padding:6px 10px;border-radius:8px;font-size:20px;cursor:pointer}
.menu-toggle:focus{outline:2px solid rgba(255,255,255,0.16);outline-offset:2px}
nav a{color:#F7FDFF;margin-right:14px;text-decoration:none;padding:6px 10px;border-radius:0;transition:transform .18s ease, color .18s ease;position:relative}

/* Underline indicator instead of rounded background */
nav a::after{content:'';position:absolute;left:12px;right:12px;bottom:6px;height:2px;background:transparent;transform:scaleX(0);transform-origin:left center;transition:transform .18s ease, background-color .18s ease}
nav a:hover, nav a:focus{transform:translateY(-2px)}
nav a:hover::after, nav a:focus::after, nav a.active::after{background:rgba(255,255,255,0.95);transform:scaleX(1)}

/* Serenity prayer block on the right side of the header */
.serenity{font-family:'La Belle Aurore', cursive;color:rgba(255,255,255,0.95);text-align:right;max-width:380px;margin-left:20px;padding-top:6px}
.serenity p{margin:0;line-height:1.02;font-size:clamp(18px,2.1vw,24px)}

@media (max-width:920px){
	/* keep prayer visible but reduce size and place below title/nav if space is tight */
	header{align-items:flex-start}
	.header-left{width:60%}
	.site-logo{width:auto;height:auto;max-width:none}
	.serenity{width:38%;font-size:14px}
}
@media (max-width:720px){
	/* place title and hamburger on the same line and hide serenity */
	header{flex-direction:column;align-items:flex-start}
	.header-left{width:100%;display:flex;flex-direction:row;align-items:center;justify-content:space-between;position:relative}
	.brand{gap:10px}
	/* Limit logo height on small screens so the hamburger stays visible */
	.site-logo{width:auto;height:auto;max-width:none;max-height:60px;flex-shrink:1}
	/* Hide the serenity prayer on small screens */
	.serenity{display:none}
	/* show hamburger and keep nav collapsed until toggled */
	/* position the hamburger absolutely at the right edge of the header
	   so it always aligns to the screen on mobile */
	.menu-toggle{display:inline-block;margin-top:0;position:absolute;right:12px;top:12px;z-index:95;margin-left:0}
	/* leave space on the right of the header-left so content doesn't
	   flow beneath the absolute-positioned hamburger */
	.header-left{padding-right:56px}
	/* dropdown menu anchored under the hamburger; nudge inward so it
	   appears next to the toggle and not flush to the viewport edge */
	nav{display:none;position:absolute;right:8px;top:calc(100% + 8px);min-width:160px;max-width:88vw;background:rgba(6,30,36,0.94);padding:6px;border-radius:10px;box-shadow:0 12px 36px rgba(3,18,24,0.36);z-index:80;transform-origin:top right;overflow:visible;border:1px solid rgba(255,255,255,0.04)}
	header.nav-open nav{display:flex;flex-direction:column;animation:dropdown .18s cubic-bezier(.2,.9,.3,1) forwards}
	header.nav-open nav a{display:block;padding:10px 16px;text-align:right;color:#fff;font-weight:600;font-size:18px;text-shadow:0 1px 2px rgba(0,0,0,0.45);border-radius:6px}
	header.nav-open nav a:focus{outline:2px solid rgba(255,255,255,0.12);outline-offset:2px}

	/* Remove underline/indicator on hover for mobile hamburger menu links */
	header.nav-open nav a::after,
	header.nav-open nav a:hover::after,
	header.nav-open nav a:focus::after {
		display: none;
		background: transparent;
		transform: scaleX(0);
	}
	/* keep title from overflowing */
	.header-left h1{margin:0;font-size:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}

@keyframes dropdown{
	0%{opacity:0;transform:translateY(-6px) scaleY(0.98)}
	100%{opacity:1;transform:translateY(0) scaleY(1)}
}
.main-wrap{max-width:880px;margin:28px auto;padding:0 16px}

/* Search box in the list header */
.search-wrap{display:flex;align-items:center}
.keyword-search{padding:8px 12px;border-radius:10px;border:1px solid rgba(11,40,51,0.06);background:linear-gradient(180deg,rgba(255,255,255,0.98),rgba(246,251,255,0.98));color:var(--text);min-width:220px;max-width:360px}
.keyword-search:focus{outline:2px solid var(--accent);box-shadow:0 6px 18px rgba(69,179,224,0.08)}
.keyword-search::placeholder{color:rgba(11,40,51,0.45)}

/* Post list styling */
.post-list{display:flex;flex-direction:column;gap:12px}
.post-item{background:linear-gradient(180deg,var(--card-start) 0%, var(--card-end) 100%);padding:14px;border-radius:12px;box-shadow:0 10px 28px rgba(11,40,51,0.06);transition:box-shadow .28s ease, background .6s ease, filter .28s ease;cursor:pointer;position:relative;overflow:visible}
.post-item::after{
	content:'';
	/* contain glow to just outside the card border */
	position:absolute;
	left:-8px;top:-8px;right:-8px;bottom:-8px;
	border-radius:16px;
	background:
 	  radial-gradient(circle at 20% 20%, var(--glow-mid) 0%, rgba(255,255,255,0) 28%),
 	  radial-gradient(circle at 80% 80%, var(--glow-faint) 0%, rgba(255,255,255,0) 38%);
	opacity:0;
 	transition:opacity .22s ease;
 	pointer-events:none;
 	z-index:0;
}
/* Strong static glow contained to border (no large spread) */
.post-item.hovered, .post-item:focus-within, .post-item:hover{
 	box-shadow:0 18px 40px var(--glow-strong), 0 6px 20px rgba(11,40,51,0.06);
 	filter:drop-shadow(0 12px 28px var(--glow-mid));
}
.post-item.hovered::after, .post-item:focus-within::after, .post-item:hover::after{opacity:1}
.post-item a{color:#123; text-decoration:none}
.post-item a:hover{text-decoration:underline}
.post-item.clicked{animation:calmClick .36s ease}
.post-item.hovered{ /* no pulsing motion, keep static glow */ }
.post-item.hovered::after{opacity:1}
.post-item h3{margin:0}
.meta{color:#667;font-size:13px;margin-top:6px}
.view.hidden{display:none}
.post-content{background:linear-gradient(180deg,#fff 0%, #fcffff 100%);padding:18px;border-radius:12px;box-shadow:0 8px 22px rgba(12,34,34,0.04)}
/* Fade-in overlay from glow color into full post */
.post-content{position:relative;overflow:hidden}
.post-content::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 15% 20%, var(--glow-strong) 0%, rgba(255,255,255,0.0) 30%), linear-gradient(120deg, rgba(181,199,235,0.06), rgba(69,179,224,0.04));z-index:2;opacity:1;transform:scale(1);transition:opacity 1.6s cubic-bezier(.2,.0,.1,1), transform 1.6s cubic-bezier(.2,.0,.1,1)}
.post-content .content-inner{position:relative;z-index:3;opacity:0;transform:translateY(10px);transition:opacity 1.2s cubic-bezier(.2,.0,.1,1), transform 1.2s cubic-bezier(.2,.0,.1,1)}
.post-content.entered::before{opacity:0;transform:scale(1.02)}
.post-content.entered .content-inner{opacity:1;transform:translateY(0)}

/* Page content: same rounded card feel as posts but a different soothing color */
.page-content{background:linear-gradient(180deg,var(--page-card-start) 0%, var(--page-card-end) 100%);padding:18px;border-radius:12px;box-shadow:0 8px 22px rgba(12,34,34,0.04)}
.page-content .content-inner{position:relative;z-index:3;opacity:0;transform:translateY(8px);transition:opacity 1.2s cubic-bezier(.2,.0,.1,1), transform 1.2s cubic-bezier(.2,.0,.1,1)}
.page-content.entered::before{opacity:0;transform:scale(1.02)}
.page-content.entered .content-inner{opacity:1;transform:translateY(0)}

/* Center and responsively size images inside post and page content */
.post-content .content img,
.page-content .content img {
	display: block;
	margin: 18px auto;
	/* Never exceed the readable column or the viewport */
	max-width: min(880px, 100%);
	width: auto; /* preserve intrinsic size when smaller than container */
	height: auto;
}

/* Center figures and captions produced by some markdown processors */
.post-content .content figure,
.page-content .content figure {
	display: block;
	margin: 0 auto 18px;
	text-align: center;
}
.post-content .content figcaption,
.page-content .content figcaption {
	font-size: 0.95rem;
	color: #576;
	margin-top: 6px;
}

/* Center plain paragraph captions immediately following images
   (for markdown that uses a separate italic paragraph instead of a <figure>/<figcaption>) */
.post-content .content img + p,
.page-content .content img + p {
    text-align: center;
    font-size: 0.95rem;
    color: #576;
    margin-top: 6px;
}

/* Center captions written as emphasized text inside the same paragraph as an image
   e.g. <p><img ...><em>Caption</em></p> */
.post-content .content p > img + em,
.page-content .content p > img + em {
	display: block;
	text-align: center;
	font-size: 0.95rem;
	color: #576;
	margin-top: 6px;
}

@media (prefers-reduced-motion: reduce){
	.post-content::before{transition:none;opacity:0}
	.post-content .content-inner{transition:none;opacity:1;transform:none}
}
/* Subtle animated gradient strip for accents */
.post-item .accent-strip{position:absolute;right:0;top:0;height:100%;width:6px;border-top-right-radius:12px;border-bottom-right-radius:12px;background:linear-gradient(180deg,var(--accent),var(--accent-2));transform-origin:center;opacity:.9;transition:transform .4s ease}
.post-item .accent-strip{position:absolute;right:0;top:0;height:100%;width:8px;border-top-right-radius:12px;border-bottom-right-radius:12px;background:linear-gradient(180deg,var(--accent-3),var(--accent));transform-origin:center;opacity:.95;transition:transform .4s ease}
.post-item:hover .accent-strip{transform:scaleY(1.07)}

/* Remove pulsing animation to avoid motion; use static stronger glow and border */


/* Remove background gradient motion for reduced motion and steadiness */
body::before{content:'';position:fixed;left:0;top:0;right:0;bottom:0;pointer-events:none;background:linear-gradient(120deg, rgba(143,199,183,0.03), rgba(111,180,162,0.02), rgba(200,245,230,0.02));background-size:200% 200%;opacity:1}
body::before{content:'';position:fixed;left:0;top:0;right:0;bottom:0;pointer-events:none;background:linear-gradient(120deg, rgba(149,219,219,0.03), rgba(167,183,209,0.02));background-size:200% 200%;opacity:1}

/* Strong glowing border using a blurred pseudo-element */
.post-item::before{content:'';position:absolute;inset:-6px;border-radius:16px;pointer-events:none;z-index:0;opacity:0;transition:opacity .28s ease, transform .28s ease;background:linear-gradient(90deg,var(--accent),var(--accent-2));filter:blur(10px)}
.post-item.hovered::before, .post-item:focus-within::before, .post-item:hover::before{opacity:0.9}
.post-item > *{position:relative;z-index:1}
footer{padding:18px;text-align:center;color:#666}
@media (max-width:600px){header h1{font-size:18px}}
@media (max-width:720px){header h1{font-size:28px}}

/* Calm click animation */
@keyframes calmClick{
	0%{transform:scale(1);box-shadow:0 6px 18px rgba(10,40,40,0.06)}
	50%{transform:scale(0.985);box-shadow:0 3px 10px rgba(10,40,40,0.04)}
	100%{transform:scale(1);box-shadow:0 6px 18px rgba(10,40,40,0.06)}
}

/* Accessibility focus */
a:focus{outline:2px solid rgba(100,160,140,0.24);outline-offset:4px}

/* Small screens adjust spacing */
@media (max-width:600px){header{padding:10px} .main-wrap{margin:18px auto}}