/* Botanical palette for the inner pages (Skin Cancer, Patients, Blog, letter). Loaded after styles.css. */
:root {
  --font: "Nunito", ui-rounded, "SF Pro Rounded", "Avenir Next Rounded", "Segoe UI", system-ui, sans-serif;
  --bg: #fbf8ee; --soft: #f1f5ec; --warm: #f5edd6; --line: #d9e5da; --link: #1f5a3f; --ink: #26313d; --navy: #182153; --muted: #55606b;
  --leaf: #1f5a3f; --leaf-dark: #163f2c; --sage: #e2ede4; --terra: #a8502f;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #fbf8ee; --soft: #f1f5ec; --warm: #f5edd6; --line: #d9e5da; --link: #1f5a3f; --ink: #26313d; --navy: #182153; --muted: #55606b; }
}
body { background: var(--bg); color: var(--ink); }
h1, h2, h3 { color: var(--navy); font-weight: 800; }
a { color: var(--leaf); }
a:hover { color: var(--leaf-dark); }
.site-header { background: color-mix(in srgb, var(--bg) 94%, transparent); border-bottom-color: var(--line); }
.nav a:hover, .nav a[aria-current="page"] { background: var(--sage); color: var(--navy); }
.btn, .call { background: var(--leaf); color: #fff !important; }
.btn:hover { background: var(--leaf-dark); }
.btn.ghost { background: transparent; color: var(--leaf) !important; border: 2px solid var(--leaf); }
.menu-btn { color: var(--leaf); }
.page-head { background: linear-gradient(180deg, #e3eee5 0%, var(--bg) 100%); }
.crumbs, .crumbs a { color: var(--muted); }
.notice { background: var(--warm); }
.resource-group > h2 { border-bottom-color: var(--leaf); }
.post-list a.card:hover { border-color: var(--leaf); }
.site-footer { background: #173f2e; color: #dbe9de; }
.site-footer a { color: #fff; }
.social a { border-color: rgba(251, 248, 238, .4); color: #fbf8ee; }
.social a:hover { background: rgba(251, 248, 238, .14); border-color: #fbf8ee; color: #fff; }
.page-head { position: relative; overflow: hidden; }
.page-head::before { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: min(36rem, 60%); background: url(/assets/plants/philodendron-band.jpg) center / cover; opacity: .2; -webkit-mask-image: linear-gradient(to left, #000 20%, transparent 100%); mask-image: linear-gradient(to left, #000 20%, transparent 100%); pointer-events: none; }
.page-head > * { position: relative; z-index: 1; }
:root { --navy-2: #2d3a78; --shadow: 0 1px 2px rgba(31, 90, 63, .08), 0 8px 24px rgba(31, 90, 63, .09); }

/* Motion: the same slow, calm zoom used on the home page quote band. Off for anyone whose system asks for reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .page-head::before { animation: kenburns 24s ease-in-out infinite alternate; }
}
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.07); } }

/* Photo credits: as small and quiet as attribution allows (still legible, still linked) */
.figs figcaption small { font-size: .62rem; line-height: 1.3; color: var(--muted); opacity: .8; margin-top: 1px; }
.prose .photo-credits-h { font-size: .7rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 2.2rem 0 .3rem; }
.photo-credits, .photo-credits li { font-size: .64rem; line-height: 1.35; color: var(--muted); opacity: .85; }
.photo-credits li { margin: 0 0 .15rem; }
.photo-credits a { color: inherit; }

/* Blog list cards: slightly lighter than the page so they read as cards */
.post-list a.card { background: #fffdf7; }
.post-list a.card:hover { box-shadow: var(--shadow); }

/* Logo in the header */
.brand { display: inline-flex; align-items: center; }
.brand img { display: block; height: 20px; width: auto; }
@media (max-width: 600px) { .brand img { height: 16px; } }