/* Shared header and footer for every page, including the demos.
   Prefixed "sh-" so it never collides with a demo's own styles. */
:root { --sh-bg: #F4F6F3; --sh-ink: #14211F; --sh-soft: #44524F; --sh-line: #DCE2DE; --sh-accent: #8B2635; }
:root[data-theme="dark"] { --sh-bg: #0E1513; --sh-ink: #E7EEEB; --sh-soft: #BAC6C2; --sh-line: #2A3833; --sh-accent: #E07C8A; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --sh-bg: #0E1513; --sh-ink: #E7EEEB; --sh-soft: #BAC6C2; --sh-line: #2A3833; --sh-accent: #E07C8A; } }

.sh-skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--sh-ink); color: var(--sh-bg); padding: 8px 12px; border-radius: 6px; }
.sh-skip:focus { left: 8px; }
.sh-head { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--sh-bg) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--sh-line); }
.sh-head .sh-in { max-width: 1120px; margin: 0 auto; padding: 14px 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px; justify-content: space-between; }
.sh-name { font: 600 1.15rem/1 'Bricolage Grotesque', system-ui, sans-serif; color: var(--sh-ink); text-decoration: none; letter-spacing: 0.01em; }
.sh-nav { display: flex; flex-wrap: wrap; gap: 4px 22px; align-items: center; font: 400 0.98rem/1.4 'Instrument Sans', system-ui, sans-serif; }
.sh-nav a { color: var(--sh-soft); text-decoration: none; padding: 4px 0; border-bottom: 2px solid transparent; }
.sh-nav a:hover { color: var(--sh-ink); }
.sh-nav a[aria-current="page"] { color: var(--sh-ink); border-bottom-color: var(--sh-accent); }
.sh-theme { font: 400 0.9rem 'Instrument Sans', system-ui, sans-serif; background: none; border: 1px solid var(--sh-line); color: var(--sh-soft); border-radius: 999px; padding: 4px 12px; cursor: pointer; }
.sh-theme:hover { color: var(--sh-ink); }
.sh-head a:focus-visible, .sh-theme:focus-visible, .sh-foot a:focus-visible { outline: 3px solid var(--sh-accent); outline-offset: 3px; }
@media (max-width: 640px) {
  .sh-head .sh-in { position: relative; display: block; padding: 10px 16px 0; }
  .sh-name { display: block; padding: 4px 0 10px; }
  .sh-theme { position: absolute; top: 10px; right: 16px; }
  header.sh-head nav.sh-nav { display: flex; flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; gap: 0 14px; padding: 0 0 8px !important; font-size: 0.92rem; scrollbar-width: none; justify-content: flex-start !important; }
  .sh-nav::-webkit-scrollbar { display: none; }
}

.sh-foot { border-top: 1px solid var(--sh-line); background: var(--sh-bg); color: var(--sh-soft); font: 400 0.95rem/1.6 'Instrument Sans', system-ui, sans-serif; }
.sh-foot .sh-in { max-width: 1120px; margin: 0 auto; padding: 32px 20px 44px; display: flex; flex-wrap: wrap; gap: 18px 40px; justify-content: space-between; }
.sh-foot a { color: var(--sh-ink); }
.sh-foot ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; }

/* Isolation: demo pages style bare "nav" and "header" elements; undo that here. */
header.sh-head { margin: 0 !important; padding: 0 !important; max-width: none !important; width: auto !important; text-align: left !important; }
header.sh-head nav.sh-nav { position: static !important; background: none !important; border: 0 !important; padding: 0 !important; margin: 0 !important; height: auto !important; width: auto !important; box-shadow: none !important; backdrop-filter: none !important; justify-content: flex-end; }
header.sh-head nav.sh-nav a { color: var(--sh-soft) !important; font-size: 0.98rem !important; }
header.sh-head nav.sh-nav a:hover, header.sh-head nav.sh-nav a[aria-current="page"] { color: var(--sh-ink) !important; }
header.sh-head .sh-name { color: var(--sh-ink) !important; }

.mark { display: inline-block; width: .95em; height: .95em; margin-right: .38em; vertical-align: -.12em; background: var(--sh-accent); -webkit-mask:url(/assets/mark.svg) center/contain no-repeat;mask:url(/assets/mark.svg) center/contain no-repeat; }