:root {
  --garden: #59ac77; --deep: #3a6f43; --deep-hover: #305d38;
  --pink: #fdaaaa; --blush: #ffd5d5; --ink: #203d27;
  --paper: #fffafa; --muted: #536658; --border: #dae5dc;
  --panel: #f0f6f1; --focus: #203d27;
  --radius-image: 26px; --radius-control: 18px;
}
:root { --ink:#203D27; --deep:#3A6F43; --pink:#FDAAAA; --blush:#FFD5D5; --line:#DAE5DC; --muted:#536658; }
body { margin:0; background:#FFFAFA; color:var(--ink); font-family:Arial, Helvetica, sans-serif; font-size:17px; line-height:1.65; }
a { color:var(--deep); text-underline-offset:4px; overflow-wrap:anywhere; }
a:hover { color:var(--ink); }
button,input { font:inherit; }
:focus-visible { outline:3px solid var(--ink); outline-offset:4px; }
.shell { width:min(100%,1320px); margin-inline:auto; padding-inline:24px; }
.site-header { display:flex; align-items:center; gap:20px; padding-block:26px; }
.brand { flex:0 0 210px; }
.brand img { width:100%; height:auto; }
.header-search { display:flex; flex:1; min-width:250px; background:#F0F6F1; border:1px solid var(--line); border-radius:24px; padding:6px; }
.header-search input { min-width:0; width:100%; border:0; background:transparent; padding:10px; border-radius:18px; color:var(--ink); }
.header-search input::placeholder { color:var(--muted); opacity:1; }
.header-search button { border:0; border-radius:18px; background:var(--deep); color:white; padding:8px 14px; }
.site-header nav { display:flex; flex-wrap:wrap; gap:4px; align-items:center; }
.site-header nav a { text-decoration:none; color:var(--ink); padding:9px 10px; border-radius:18px; font-size:15px; font-weight:700; }
.site-header nav a.active { background:var(--blush); }
.site-header nav a:hover { background:#F0F6F1; }
.skip-link { position:absolute; top:8px; left:24px; transform:translateY(-160%); background:var(--ink); color:white; padding:10px 20px; z-index:10; }
.skip-link:focus { transform:none; color:white; }
main { min-height:60vh; padding-block:36px 64px; }
h1,h2,h3 { font-weight:800; line-height:1.15; letter-spacing:-.025em; overflow-wrap:anywhere; }
h1 { font-size:clamp(36px,4vw,54px); margin-bottom:24px; }
h2 { font-size:32px; }
section { margin-top:48px; }
.resource-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:36px 28px; margin-block:28px; }
.resource-card { min-width:0; }
.card-media { position:relative; }
.card-media img { display:block; width:100%; height:auto; aspect-ratio:1.45; object-fit:cover; border-radius:26px; background:#F0F6F1; }
.save-button { position:absolute; top:14px; right:14px; border:1px solid var(--ink); border-radius:18px; background:var(--pink); color:var(--ink); padding:8px 17px; font-weight:700; }
.save-button:hover { background:var(--blush); }
.save-button[aria-pressed="true"] { background:var(--deep); color:white; }
.image-caption { font-size:13px; color:var(--muted); margin:10px 0 12px; }
.category-badge { display:inline-block; border-radius:20px; padding:3px 12px; background:var(--blush); font-size:14px; font-weight:700; }
.resource-card h2,.resource-card h3 { font-size:25px; line-height:1.25; margin:14px 0; }
.resource-card h2 a,.resource-card h3 a { text-decoration:none; color:var(--ink); }
.resource-card h2 a:hover,.resource-card h3 a:hover { text-decoration:underline; }
.card-basis { font-weight:700; font-size:15px; }
.card-facts { font-size:16px; margin-block:16px; }
.card-facts > div { border-top:1px solid var(--line); padding-block:9px; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.6fr); gap:12px; }
.card-facts dt { font-weight:700; }
.card-facts dd { margin:0; overflow-wrap:anywhere; }
.explore-link { font-weight:700; }
.site-footer { border-top:1px solid var(--line); padding-block:32px; }
.site-footer img { margin-right:12px; }
.site-footer nav { display:flex; gap:24px; flex-wrap:wrap; }
.save-help { margin-top:20px; color:var(--muted); font-size:15px; }
.save-status:not(:empty) { position:fixed; bottom:16px; left:50%; transform:translateX(-50%); width:max-content; max-width:calc(100% - 32px); padding:12px 20px; border-radius:18px; background:var(--ink); color:white; z-index:5; box-shadow:0 3px 14px #203D2733; }
[hidden] { display:none !important; }
@media (max-width:1150px) { .site-header { flex-wrap:wrap; } .site-header nav { width:100%; justify-content:center; } }
@media (max-width:991px) { .resource-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:600px) { .site-header { gap:16px; } .brand { flex-basis:220px; } .header-search { flex-basis:100%; min-width:0; } .site-header nav { justify-content:flex-start; gap:2px; } .site-header nav a { padding:8px; } .resource-grid { grid-template-columns:minmax(0,1fr); } .shell { padding-inline:20px; } }
@media (prefers-reduced-motion:no-preference) { a,button { transition:background-color .15s ease; } }

/* Retain Part 3 detail imagery and fact layout alongside shared cards. */
.resource-image { margin: 1.5rem 0; max-width: 600px; }
.resource-image img { display: block; width: 100%; height: auto; aspect-ratio: 3/2; object-fit: cover; border-radius: var(--radius-image); background: var(--panel); }
.resource-image figcaption { padding: .6rem .15rem 0; color: var(--muted); font-size: .94rem; line-height: 1.5; }
main > dl { max-width:700px; display:grid; grid-template-columns:minmax(120px,180px) minmax(0,1fr); gap:.4rem 1rem; }
main > dl dt { color:var(--muted); }
main > dl dd { margin:0; }
@media (max-width:600px) { main > dl { grid-template-columns:1fr; } }
