/* plum.science — shared theme (plum/amber identity derived from the lab logo) */

:root {
	--plum-800:#3a1230; --plum-700:#5e2455; --wine-600:#7c2a63;
	--amber-500:#e67e2e; --amber-400:#f2a65a; --blue-500:#3d6fa6;
	--paper:#f7f1ec; --card:#fffdfb; --ink:#22101b;
	--muted:#6d5c64; --hair:rgba(60,20,45,0.12);
	--bg:var(--paper); --fg:var(--ink); --accent:var(--amber-500);
	--accent-ink:#9a4a12; --card-bg:var(--card);
	--display:"Iowan Old Style","Charter","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
	--body:-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,system-ui,sans-serif;
	--pad:clamp(1.25rem,4vw,2.75rem);
	--maxw:1080px;
}
@media (prefers-color-scheme: dark) {
	:root { --bg:#1a0c16; --fg:#f2e6ec; --paper:#1a0c16; --card-bg:#271221;
		--muted:#b598a7; --hair:rgba(242,166,90,0.14); --accent-ink:var(--amber-400); }
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--fg);
	font-family:var(--body); font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased; }
.wrap { width:100%; max-width:var(--maxw); margin:0 auto; padding-inline:var(--pad); }
a { color:var(--accent-ink); text-underline-offset:3px; }
img { max-width:100%; }

h1,h2,h3 { font-family:var(--display); font-weight:600; text-wrap:balance; line-height:1.14; }
h4 { font-family:var(--body); }

/* ── Header ── */
header.site { position:sticky; top:0; z-index:20;
	background:color-mix(in srgb,var(--bg) 88%,transparent);
	backdrop-filter:blur(8px); border-bottom:1px solid var(--hair); }
header.site .wrap { display:flex; align-items:center; justify-content:space-between; min-height:66px; gap:1rem; }
.brand { display:flex; align-items:center; gap:0.6rem; text-decoration:none; color:var(--fg); }
.brand img { width:34px; height:34px; display:block; }
.brand b { font-family:var(--display); font-weight:600; font-size:1.05rem; letter-spacing:0.02em; }
nav.top { display:flex; gap:1.4rem; font-size:0.9rem; }
nav.top a { color:var(--muted); text-decoration:none; }
nav.top a:hover, nav.top a:focus-visible, nav.top a.active { color:var(--accent-ink); }
nav.top a.active { font-weight:600; }
.mnav { display:none; position:relative; }
.mnav summary { list-style:none; cursor:pointer; padding:0.4rem 0.55rem; border:1px solid var(--hair);
	border-radius:8px; color:var(--fg); font-size:1.1rem; line-height:1; }
.mnav summary::-webkit-details-marker { display:none; }
.mnav[open] > nav { display:flex; }
.mnav > nav { display:none; position:absolute; right:0; top:calc(100% + 8px); flex-direction:column;
	gap:0.25rem; background:var(--card-bg); border:1px solid var(--hair); border-radius:10px;
	padding:0.5rem; min-width:190px; box-shadow:0 12px 30px rgba(20,6,18,0.18); z-index:30; }
.mnav > nav a { color:var(--fg); text-decoration:none; padding:0.5rem 0.7rem; border-radius:7px; font-size:0.95rem; }
.mnav > nav a:hover, .mnav > nav a.active { background:color-mix(in srgb,var(--accent) 12%,transparent); color:var(--accent-ink); }
@media (max-width:680px) { nav.top { display:none; } .mnav { display:block; } }

/* ── Page header band ── */
main { display:block; }
.pagehead { padding-block:clamp(2rem,5vw,3.2rem) clamp(1rem,2.5vw,1.6rem); }
.pagehead .eyebrow { font-family:var(--body); text-transform:uppercase; letter-spacing:0.18em;
	font-size:0.72rem; font-weight:700; color:var(--accent-ink); margin:0 0 0.7rem; }
.pagehead h1 { font-size:clamp(2rem,4.6vw,3rem); margin:0; }
.pagehead h1::after { content:""; display:block; width:56px; height:3px; margin-top:0.9rem;
	background:var(--accent); border-radius:2px; }

/* ── Content ── */
.content { padding-bottom:clamp(2.5rem,6vw,4rem); }
.content h2 { font-size:1.5rem; margin:2.2rem 0 1rem; }
.content h3 { font-size:1.2rem; margin:1.6rem 0 0.6rem; }
.content h4 { text-transform:uppercase; letter-spacing:0.14em; font-size:0.74rem; font-weight:700;
	color:var(--accent-ink); margin:1.4rem 0 0.5rem; }
.content p { margin:0 0 1rem; }
.content ul, .content ol { margin:0 0 1rem; padding-left:1.2rem; }
.content li { margin:0 0 0.4rem; }
.content a { color:var(--accent-ink); }
.small { font-size:0.85rem; color:var(--muted); }
hr { border:none; border-top:1px solid var(--hair); margin:2.5rem 0; }
.content section > hr:last-child { display:none; }

/* Bluesky native image grid (1-4 photos) */
.bsky-imgs { margin-top:0.7em; border-radius:12px; overflow:hidden; display:grid; gap:3px; }
.bsky-imgs .bsky-img-cell { overflow:hidden; min-height:0; display:block;
	background:color-mix(in srgb,var(--blue-500) 10%,var(--card-bg)); }
.bsky-imgs img { width:100%; height:100%; object-fit:cover; display:block; }
.bsky-imgs-1 { grid-template-columns:1fr; }
.bsky-imgs-1 .bsky-img-cell { max-height:640px; }
.bsky-imgs-2 { grid-template-columns:1fr 1fr; aspect-ratio:2/1; }
.bsky-imgs-3 { grid-template-columns:1fr 1fr; aspect-ratio:2/1; }
.bsky-imgs-3 .bsky-img-cell:first-child { grid-row:span 2; }
.bsky-imgs-4 { grid-template-columns:1fr 1fr; aspect-ratio:3/2; }

/* Science highlights: alternating two-column */
.highlight { display:grid; grid-template-columns:1fr 1fr; gap:2.5rem; align-items:center; margin:0; }
.highlight .fig img { width:100%; border-radius:12px; display:block; border:1px solid var(--hair); }
.highlight .txt h3 { margin-top:0; }
.highlight .txt p:last-child { margin-bottom:0; }
.highlight.rev .fig { order:2; }
@media (max-width:760px) { .highlight { grid-template-columns:1fr; gap:1.25rem; } .highlight.rev .fig { order:0; } }

/* Float images (science) */
.image { display:block; }
.image img { border-radius:12px; display:block; }
.image.left { float:left; max-width:42%; margin:0.3rem 1.75rem 1rem 0; }
.image.right { float:right; max-width:42%; margin:0.3rem 0 1rem 1.75rem; }
.image.fit img { width:100%; }
@media (max-width:736px) { .image.left, .image.right { float:none; max-width:100%; margin:0 0 1.25rem; } }

/* Grid (theme-compatible: .row + .col-N + .col-N-medium) */
.row { display:flex; flex-wrap:wrap; margin:-0.75rem; }
.row > * { padding:0.75rem; }
.col-3 { width:25%; } .col-4 { width:33.3333%; } .col-6 { width:50%; }
.col-9 { width:75%; } .col-12 { width:100%; }
.gtr-uniform > * { } /* gutters handled by .row padding */
@media (max-width:820px) {
	.col-12-medium { width:100%; }
	.col-3.col-12-medium, .col-4.col-12-medium, .col-6.col-12-medium, .col-9.col-12-medium { width:100%; }
}

/* Cards / boxes */
.box { background:var(--card-bg); border:1px solid var(--hair); border-radius:14px; padding:1.5rem; }
.box.alt { background:none; border:none; padding:0; }
.profile-card { background:var(--card-bg); border:1px solid var(--hair); border-radius:16px; padding:1.5rem; }

/* Buttons / actions */
ul.actions { list-style:none; display:flex; gap:0.75rem; flex-wrap:wrap; padding:0; margin:0.5rem 0 1rem; }
ul.actions li { margin:0; }
ul.actions.fit { width:100%; }
ul.actions.fit li { flex:1; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:0.45rem;
	padding:0.62rem 1.2rem; border-radius:999px; font-size:0.9rem; font-weight:600; text-decoration:none;
	border:1px solid var(--hair); color:var(--fg); background:var(--card-bg); transition:all 0.15s; cursor:pointer; }
.button:hover { border-color:color-mix(in srgb,var(--accent) 55%,var(--hair)); color:var(--accent-ink); }
.button.primary { background:var(--amber-500); color:#2a1305; border-color:transparent; }
.button.primary:hover { background:var(--amber-400); color:#2a1305; }
.button.fit { width:100%; }

/* Social icons (inline SVG) */
ul.icons { list-style:none; display:flex; gap:0.9rem; padding:0; margin:1rem 0 0; }
ul.icons li { margin:0; }
ul.icons a { color:var(--muted); display:inline-flex; }
ul.icons a:hover { color:var(--accent-ink); }
ul.icons svg { width:20px; height:20px; fill:currentColor; }

/* ── Footer ── */
footer.site { border-top:1px solid var(--hair); margin-top:1rem; padding-block:2.5rem; color:var(--muted); }
footer.site .wrap { display:flex; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; align-items:center; }
footer.site .fnav { display:flex; gap:1.1rem; align-items:center; }
footer.site a { color:var(--muted); text-decoration:none; display:inline-flex; align-items:center; }
footer.site a:hover { color:var(--accent-ink); }
footer.site svg { width:18px; height:18px; fill:currentColor; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:3px; }