/* Shared top nav + footer (Warm Glass) — used on every page.
   Extracted from import.css / import-chrome.css; tokens are scoped so legacy pages are unaffected. */
.w-nav, .w-footer {
  --magenta: #ce3473; --ink-3: #4a4138; --muted: #635c50;
}
.w-nav a, .w-footer a { text-decoration: none; color: inherit; }
/* beat the global `a:not(.btn):hover` underline + link colour (colors_and_type.css) */
.w-nav a:not(.btn):hover, .w-nav a:not(.btn):focus, .w-footer a:not(.btn):hover, .w-footer a:not(.btn):focus { color: inherit; text-decoration: none; }
.w-nav, .w-footer { box-sizing: border-box; }
.w-nav *, .w-footer * { box-sizing: border-box; }

/* Home-page nav + footer controls (ported from components.css / index.html) for import.html.
   Tokens are scoped to the nav and footer so they don't affect the rest of this page. */
.w-nav, .w-footer {
  --paper: #FFFFFF; --ink: #15110D; --ink-3: #4A4138;
  --neutral-100: #F4F2EC; --neutral-200: #E8E4DA; --neutral-300: #D6D0C2;
  --marigold-ui: #E89A14; --r-pill: 999px;
  --dur-fast: 150ms; --dur-base: 240ms; --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Button (Ghost, md) */
.w-nav .btn, .w-footer .btn {
  --btn-pad-y: 8px; --btn-pad-x: 12px; --btn-fs: 15px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: 'Outfit', sans-serif; font-weight: 500; font-size: var(--btn-fs);
  letter-spacing: 0; line-height: 1;
  padding: var(--btn-pad-y) var(--btn-pad-x);
  border-radius: var(--r-pill); border: 1.5px solid transparent;
  cursor: pointer; white-space: nowrap; position: relative; user-select: none;
  background: transparent; color: var(--ink);
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.w-nav .btn:focus-visible, .w-footer .btn:focus-visible { outline: none; border-color: var(--marigold-ui); }
.w-nav .btn, .w-nav .btn:hover, .w-footer .btn, .w-footer .btn:hover { text-decoration: none; }
.w-nav .btn:hover, .w-footer .btn:hover { background: var(--neutral-100); color: var(--ink); }
.w-nav .btn:active, .w-footer .btn:active { background: var(--neutral-200); }
.btn--icon-end { padding-left: calc(var(--btn-pad-x) + 2px) !important; }
.w-nav .btn svg, .w-footer .btn svg { width: 18px; height: 18px; flex: none; }
.btn-label { overflow-wrap: anywhere; }

/* Footer layout */
.w-footer .foot-links { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.w-footer .btn .icon-check { display: none; }
.w-footer .btn.is-copied .icon-copy { display: none; }
.w-footer .btn.is-copied .icon-check { display: block; }
@media (max-width: 600px) {
  .w-footer .foot-links { gap: 6px 12px; width: 100%; }
  .w-footer .foot-links .btn { --btn-pad-x: 8px; }
}

/* Hamburger + mobile dropdown */
.site-nav__toggle {
  display: none; width: 44px; height: 44px; align-items: center; justify-content: center; padding: 0;
  background: #fff; border: 1.5px solid var(--neutral-300); border-radius: 999px; color: var(--ink);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.site-nav__toggle:hover { border-color: var(--ink); }
.site-nav__toggle:focus-visible { outline: 2px solid var(--marigold-ui); outline-offset: 3px; }
.site-nav__toggle svg { width: 22px; height: 22px; flex: none; }
.site-nav__toggle .icon-close { display: none; }
.site-nav__toggle[aria-expanded="true"] .icon-open { display: none; }
.site-nav__toggle[aria-expanded="true"] .icon-close { display: block; }
.w-nav__links { display: flex; align-items: center; gap: 8px; }
@media (max-width: 720px) {
  .w-nav__links { gap: 2px; }
  .w-nav__links .btn { --btn-pad-x: 10px; }
}
@media (max-width: 600px) {
  .site-nav__toggle { display: inline-flex; }
  .w-nav__links {
    position: absolute; top: calc(100% + 8px); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 4px; padding: 10px 16px 16px;
    background: #fff; border: 1px solid var(--neutral-200); border-radius: 16px;
    box-shadow: 0 10px 22px rgba(21, 17, 13, 0.10); display: none;
  }
  .w-nav__links[data-open] { display: flex; }
  .w-nav__links .btn { width: 100%; justify-content: flex-start; --btn-pad-y: 12px; --btn-pad-x: 14px; --btn-fs: 16px; }
  .w-nav__links .btn--icon-end { justify-content: space-between; padding-right: 14px; }
}

/* ── Nav ── */
.w-nav { position: sticky; top: 0; z-index: 10; max-width: 1312px; margin: 0 auto; padding: 20px 16px 0; }   /* bar = 1280 wide, wider than the padded content */
.w-nav__bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 10px 10px 24px; border-radius: 999px;
  background: rgba(255, 255, 255, .55);
  backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, .8);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 10px 30px -12px rgba(21, 17, 13, .18);
}
.w-logo { font-family: 'Syne', sans-serif; font-weight: 800; font-size: 24px; letter-spacing: -.02em; }
.w-logo span, .w-footer__logo span { color: var(--magenta); }

/* Nav links + footer actions reuse the home page's Ghost button (see import-chrome.css) */
.w-nav__bar { position: relative; }


/* ── Footer ── */
.w-footer {
  position: relative; padding: 28px 32px; border-radius: 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: #fff; border: 1px solid rgba(21, 17, 13, .06); box-shadow: 0 20px 40px -28px rgba(21, 17, 13, .25);
}
.w-footer__logo { font-family: 'Syne', sans-serif; font-weight: 800; font-size: 30px; letter-spacing: -.02em; display: block; }
.w-footer__copy { margin: 8px 0 0; font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--ink-3); }


.w-footer { width: calc(100% - 32px); max-width: 1280px; margin: 40px auto; }
@media (max-width: 720px) {
  .w-nav { padding: 12px 16px 0; }
  .w-footer { flex-direction: column; align-items: flex-start; padding: 24px; gap: 20px; }
}