/* Peacock refinements layered on top of Massively (assets/css/main.css).
   Delete the <link> to this file to get the stock template back. */

:root {
	--pk-deep:   #061826;
	--pk-navy:   #0b3a5b;
	--pk-blue:   #0e6a96;
	--pk-teal:   #0a8f8f;
	--pk-green:  #1f7a5c;
	--pk-violet: #3b2d6e;
	--pk-gold:   #c9a14a;
	--pk-ink:    #12303f;
}

/* 1. Background: peacock-feather gradient instead of the stock photo,
      keeping the template's dot-texture overlay. */
#wrapper > .bg {
	background-color: var(--pk-deep);
	background-image:
		url("../../images/overlay.png"),
		radial-gradient(ellipse 60% 45% at 18% 12%, rgba(10,143,143,.60), transparent 70%),
		radial-gradient(ellipse 50% 40% at 82% 30%, rgba(59,45,110,.55), transparent 70%),
		radial-gradient(ellipse 60% 45% at 30% 70%, rgba(31,122,92,.50), transparent 70%),
		radial-gradient(ellipse 40% 30% at 80% 85%, rgba(201,161,74,.22), transparent 70%),
		linear-gradient(165deg, #061826 0%, #0b3a5b 40%, #0a4a52 70%, #061826 100%);
	background-size: auto, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
}

/* 2. Accent colour: teal/gold instead of the template's cyan. */
#main a:not(.button):not(.image) { color: var(--pk-blue); }
#main a:not(.button):not(.image):hover { color: var(--pk-teal); }
.button.primary { background-color: var(--pk-navy); }
.button.primary:hover, .button:hover { background-color: var(--pk-teal) !important; color: #fff !important; box-shadow: none !important; }
#intro .button.primary { background-color: var(--pk-gold); color: var(--pk-deep) !important; }
#intro .button.primary:hover { background-color: #fff !important; color: var(--pk-deep) !important; }
#intro a:hover, #nav a:hover { color: var(--pk-gold) !important; }

/* 3. A thin feather-coloured stripe across the top of the white panel. */
#main { position: relative; }
#main::before {
	content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px;
	background: linear-gradient(90deg, var(--pk-navy), var(--pk-blue), var(--pk-teal), var(--pk-green), var(--pk-gold));
}

/* 4. Headlines and dates pick up the palette. */
#main h2 a, #main h2 { color: var(--pk-ink) !important; }
#main .post.featured h2 a {
	background: linear-gradient(90deg, var(--pk-navy), var(--pk-teal) 60%, var(--pk-green));
	-webkit-background-clip: text; background-clip: text; color: transparent !important;
}
header > .date { color: var(--pk-teal); letter-spacing: .12em; font-weight: 700; }
header.major > .date:before, header.major > .date:after { border-color: var(--pk-teal); }

/* 5. Softer images (rounded corners, gentle lift on hover). */
#main .image img { border-radius: 8px; transition: transform .3s ease, box-shadow .3s ease; }
#main a.image:hover img { transform: translateY(-3px); box-shadow: 0 14px 28px -14px rgba(6,24,38,.55); }

/* 6. Portrait: round, with a teal-to-gold ring. */
#intro img { border-radius: 50%; padding: 5px;
	background: conic-gradient(var(--pk-teal), var(--pk-blue), var(--pk-violet), var(--pk-green), var(--pk-gold), var(--pk-teal)); }

/* 7. Journal / venue pills under post headlines (borrowed from B). */
.pill { display: inline-block; font: 600 .62rem/1.9 "Source Sans Pro", Helvetica, sans-serif;
	letter-spacing: .1em; text-transform: uppercase; padding: 0 .7em; border-radius: 999px;
	color: #fff; background: var(--pk-teal); margin: 0 .25em; vertical-align: middle; }
.pill.gold { background: var(--pk-gold); color: var(--pk-deep); }
.pill.navy { background: var(--pk-navy); }

/* 8. "By the numbers" strip (borrowed from B). */
.stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; margin: 0 0 4rem; }
.stat { border-left: 4px solid var(--c, var(--pk-teal)); background: #f3f8f8; border-radius: 6px; padding: .9rem 1rem; line-height: 1.4; }
.stat b { display: block; font-family: "Merriweather", Georgia, serif; font-size: 1.6rem; color: var(--pk-ink); font-weight: 700; }
.stat span { font: .75rem "Source Sans Pro", Helvetica, sans-serif; text-transform: uppercase; letter-spacing: .08em; color: #5b6b74; }
@media screen and (max-width: 980px) { .stats { grid-template-columns: repeat(2, 1fr); } }

/* 9. Research group block (borrowed from B). */
.group h2 { text-align: center; }
.group > p { text-align: center; font-style: italic; }
.students { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; margin-bottom: 2rem; }
.student { border: 1px solid #dfe7ea; border-radius: 6px; padding: .6rem .9rem; line-height: 1.5; }
.student b { display: block; color: var(--pk-ink); }
.student span { font: .8rem "Source Sans Pro", Helvetica, sans-serif; color: #5b6b74; }
.student.now { border-left: 3px solid var(--pk-gold); }
@media screen and (max-width: 980px) { .students { grid-template-columns: 1fr 1fr; } }
@media screen and (max-width: 480px) { .students { grid-template-columns: 1fr; } }

/* 10. Footer/copyright tinted to match. */
#copyright { color: rgba(255,255,255,.7); }

/* 11. Student AAS abstracts, grouped by meeting. */
.abstracts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-bottom: 2rem; }
.meeting { border-top: 3px solid var(--pk-teal); padding-top: .75rem; }
.meeting:nth-child(2) { border-top-color: var(--pk-green); }
.meeting:nth-child(3) { border-top-color: var(--pk-gold); }
.meeting h4 { font-size: .75rem; letter-spacing: .1em; color: var(--pk-ink); margin-bottom: .5rem; }
.meeting ul { list-style: none; padding: 0; margin: 0; }
.meeting li { padding: .45rem 0; line-height: 1.5; font-size: .85rem; border-bottom: 1px solid #e6eef0; }
@media screen and (max-width: 980px) { .abstracts { grid-template-columns: 1fr; } }

/* 12. Fixed backdrop whose colours shift as you scroll:
       top = teal/navy, middle = sapphire/violet, bottom = emerald/gold.
       --pk-mid and --pk-end (0..1) are set by a tiny script in the page. */
#wrapper > .bg { position: fixed !important; width: 100vw; height: 100vh; transform: none !important; }
#wrapper > .bg::before, #wrapper > .bg::after { content: ""; position: absolute; inset: 0; pointer-events: none; transition: opacity .2s linear; }
#wrapper > .bg::before {
	opacity: var(--pk-mid, 0);
	background:
		radial-gradient(ellipse 55% 45% at 75% 20%, rgba(91,60,170,.70), transparent 70%),
		radial-gradient(ellipse 60% 50% at 20% 60%, rgba(14,106,150,.65), transparent 70%),
		radial-gradient(ellipse 40% 35% at 85% 85%, rgba(10,143,143,.40), transparent 70%),
		linear-gradient(180deg, #0a1640 0%, #1b1550 50%, #081a3a 100%);
}
#wrapper > .bg::after {
	opacity: var(--pk-end, 0);
	background:
		radial-gradient(ellipse 55% 45% at 25% 25%, rgba(31,122,92,.75), transparent 70%),
		radial-gradient(ellipse 50% 40% at 80% 75%, rgba(201,161,74,.45), transparent 70%),
		radial-gradient(ellipse 45% 40% at 70% 15%, rgba(10,143,143,.45), transparent 70%),
		linear-gradient(180deg, #06231f 0%, #0b3a33 55%, #1d2a12 100%);
}

/* 13. Frosted-glass main panel so the feathers show through. */
#main {
	background-color: rgba(255,255,255,.70) !important;
	-webkit-backdrop-filter: blur(18px) saturate(1.3);
	backdrop-filter: blur(18px) saturate(1.3);
	box-shadow: 0 30px 80px -30px rgba(0,0,0,.6);
}
.stat { background: rgba(255,255,255,.55); }
#main > * { border-top-color: rgba(18,48,63,.12) !important; }
#main > .posts > * { border-color: rgba(18,48,63,.12) !important; }