/* Dreamgrove site: shared look for the Updates and News pages (2026-11-14), and the top menu on every page.
   Same night-grove colours and fonts as the home page. */
:root {
  --night: #0E0A26;
  --dusk: #2A1E5C;
  --moon: #F6EED6;
  --mint: #7FD8BE;
  --firefly: #FFE08A;
  --lilac: #BFA8FF;
  --text: #E6DEFF;
  --muted: #A99FD0;
  --panel: rgba(20, 16, 52, 0.72);
  --edge: rgba(127, 216, 190, 0.35);
  --discord: #5865F2;
  --display: "Cormorant Garamond", "Palatino Linotype", "Book Antiqua", Georgia, serif;
  --body: "Nunito Sans", "Segoe UI", system-ui, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { background: var(--night); }
body {
  margin: 0; color: var(--text); font: 17px/1.6 var(--body);
  background: linear-gradient(180deg, var(--night) 0%, var(--dusk) 45%, #1B2350 80%, var(--night) 100%);
  min-height: 100vh;
}
a { color: var(--mint); }
.wrap { max-width: 860px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
code { font-family: Consolas, "Cascadia Mono", monospace; color: var(--mint); font-size: 0.92em; }

/* the top menu (also on the home page) */
.topnav { position: relative; z-index: 2; border-bottom: 1px solid rgba(191, 168, 255, 0.18); background: rgba(14, 10, 38, 0.6); backdrop-filter: blur(8px); }
.topnav .bar { max-width: 1120px; margin: 0 auto; padding: 10px max(16px, env(safe-area-inset-left, 0px)); display: flex; align-items: center; gap: 8px 20px; flex-wrap: wrap; }
.topnav .brand { font: 700 26px/1 var(--display); color: var(--moon); text-decoration: none; margin-right: auto; }
.topnav ul { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; list-style: none; }
.topnav ul a { display: block; padding: 6px 12px; border-radius: 8px; color: var(--text); text-decoration: none; font-weight: 600; font-size: 15px; }
.topnav ul a:hover { background: rgba(191, 168, 255, 0.12); }
.topnav ul a[aria-current="page"] { color: var(--night); background: var(--mint); }
.topnav ul a.discord { color: #fff; background: var(--discord); }
.topnav ul a.dl { color: var(--night); background: var(--firefly); }
.topnav a:focus-visible { outline: 3px solid var(--firefly); outline-offset: 2px; }

/* page heading */
.pagehead { padding-block: 56px 24px; }
.pagehead h1 { font: 700 clamp(44px, 8vw, 72px)/1 var(--display); margin: 0; color: var(--moon); }
.pagehead p { color: var(--muted); margin: 12px 0 0; max-width: 62ch; }

/* posts: one card per week (Updates) or per announcement (News) */
.posts { display: grid; gap: 24px; padding-bottom: 72px; }
.post { background: var(--panel); border: 1px solid var(--edge); border-radius: 16px; padding: 24px 26px; min-width: 0; }
.post time { display: block; color: var(--firefly); font-weight: 700; font-size: 14px; letter-spacing: 0.03em; text-transform: uppercase; }
.post h2 { font: 700 32px/1.15 var(--display); margin: 4px 0 12px; color: var(--moon); text-wrap: balance; }
.post h3 { font: 800 15px/1.3 var(--body); margin: 18px 0 6px; color: var(--lilac); text-transform: uppercase; letter-spacing: 0.04em; }
.post p { margin: 0 0 10px; }
.post ul { margin: 0; padding-left: 20px; }
.post li { margin-bottom: 6px; }
.post li::marker { color: var(--mint); }
.post strong { color: var(--moon); }
.note { border-left: 3px solid var(--lilac); padding: 10px 14px; background: rgba(191, 168, 255, 0.08); border-radius: 0 10px 10px 0; color: var(--text); margin: 0 0 28px; }

footer { padding-block: 24px 48px; text-align: center; color: var(--muted); font-size: 14px; }
@media (max-width: 560px) { .post { padding: 20px 18px; } .topnav .brand { font-size: 23px; } }