/* Shared site chrome. Kept separate from dashboard and guide-specific styles. */
.wn-header{color-scheme:light;background:#f4f4ee;color:#18332e;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;position:relative;z-index:30}
.wn-header *{box-sizing:border-box}
.wn-header-inner{max-width:1500px;margin:0 auto;padding:22px 34px 18px;display:flex;align-items:center;justify-content:space-between;gap:28px;border-bottom:1px solid #dfe4dc}
.wn-brand{display:inline-flex;align-items:center;gap:11px;flex-shrink:0;color:#18332e;text-decoration:none;font-size:16px;font-weight:800;letter-spacing:-.04em;white-space:nowrap}
.wn-brand-mark{display:grid;place-items:center;width:32px;height:32px;background:#285b4f;color:#d4ef7a;border-radius:50%;font-size:17px;letter-spacing:0}
.wn-brand-dot{color:#90a78b}
.wn-nav{display:flex;align-items:center;gap:8px}
.wn-nav a{display:block;text-decoration:none;color:#66736c;font-size:13px;font-weight:650;line-height:1.5;padding:11px 15px;border-radius:8px;white-space:nowrap;transition:background .15s,color .15s}
.wn-nav a:hover{background:#e9efdf;color:#285b4f}
.wn-nav a[aria-current="page"]{background:#285b4f;color:#fffefa}
.wn-brand:focus-visible,.wn-nav a:focus-visible{outline:2px solid #285b4f;outline-offset:4px}
.wn-page>.shell{padding-top:0}
.wn-wonders-section{max-width:1500px;margin:0 auto;padding:18px 34px;display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid #dfe4dc}
.wn-wonders-section .site-brand{color:#285b4f;font-size:12px}
.wn-wonders-section .site-brand{flex-shrink:0}
.wn-wonders-links{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:0 16px}
.wn-wonders-links a{display:inline-flex;align-items:center;min-height:44px;color:#66736c;font:600 12px/1.5 Inter,ui-sans-serif,system-ui,sans-serif;text-decoration:none;white-space:nowrap;border-bottom:2px solid transparent}
.wn-wonders-links a:hover,.wn-wonders-links a[aria-current="page"]{color:#285b4f;border-bottom-color:#285b4f}
.wn-wonders-links a:focus-visible{outline:2px solid #285b4f;outline-offset:4px}
@media(max-width:1050px){.wn-wonders-section{align-items:flex-start;flex-direction:column;gap:10px}.wn-wonders-links{justify-content:flex-start}}
.wn-wonders-page,.wn-wonders-page *{color-scheme:light!important}
.wn-guide-footer{max-width:1500px;margin:24px auto 0;padding:20px 34px 32px;border-top:1px solid #dfe4dc;display:flex;justify-content:space-between;gap:25px;color:#66736c;font:12px/1.7 Inter,ui-sans-serif,system-ui,sans-serif}
.wn-guide-footer p{margin:0;max-width:none;flex:1 1 auto;text-wrap:pretty}
.wn-guide-footer a{color:#285b4f;white-space:nowrap;text-underline-offset:3px}
.resources-hero{padding:62px 0 36px}
.resources-hero h1{font-size:clamp(42px,6vw,68px);line-height:1.1;margin:14px 0 20px}
.resources-hero p{font-size:16px;line-height:1.8;color:#66736c}
.resources-space{min-height:34vh;border-top:1px solid #dfe4dc}
@media(max-width:760px){.wn-header-inner{flex-wrap:wrap;gap:15px;padding:18px 18px 14px}.wn-nav{width:100%;justify-content:space-between;gap:3px}.wn-nav a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;font-size:11px;padding:9px 11px}.wn-wonders-section{padding:15px 18px}.wn-guide-footer{padding:18px;flex-direction:column;gap:12px}.resources-hero{padding-top:38px}.resources-space{min-height:26vh}}
@media(max-width:380px){.wn-nav a{font-size:11px;padding:9px 8px}}

/* Skip link — offscreen until keyboard focus, then a full-width bar that
   pushes the page down instead of covering the masthead */
.skip-link{position:fixed;left:0;right:0;top:0;z-index:200;transform:translateY(-120%);
  background:#285b4f;color:#fffefa;padding:14px 20px;text-align:center;
  font:800 13px/1.4 Inter,ui-sans-serif,system-ui,sans-serif;text-decoration:none;
  letter-spacing:.01em;box-shadow:0 4px 14px rgba(24,51,46,.28);transition:transform .12s ease}
.skip-link:focus,.skip-link:focus-visible{transform:translateY(0);outline:3px solid #d4ef7a;outline-offset:-3px}
body:has(.skip-link:focus){padding-top:46px}
@media(prefers-reduced-motion:reduce){.skip-link{transition:none}}
main:target{scroll-margin-top:16px}

/* Footer information links, added to every page footer. */
.foot-info { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; font-size: 11.5px; }
.foot-info a { color: var(--muted, #66736c); text-decoration: none; white-space: nowrap; }
.foot-info a:hover, .foot-info a:focus-visible { color: var(--green, #285b4f); text-decoration: underline; text-underline-offset: 2px; }
.foot-info a[aria-current="page"] { color: var(--green, #285b4f); font-weight: 700; }