/* Shared motion tokens and cross-document fades. Keep in sync with site-nav.css. */
:root {
  --motion-press: 90ms;
  --motion-fast: 160ms;
  --motion-base: 200ms;
  --motion-page: 260ms;
  --motion-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --motion-ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --motion-shift: 6px;
  --motion-press-scale: 0.97;
}
@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion="on"]) {
    --motion-shift: 0px;
    --motion-press-scale: 1;
  }
  :root:not([data-motion="on"])::view-transition-group(*) { animation-name: none; }
  :root:not([data-motion="on"])::view-transition-old(root), :root:not([data-motion="on"])::view-transition-new(root) { animation-name: none; }
}
:root[data-motion="off"] {
    --motion-shift: 0px;
    --motion-press-scale: 1;
  }
:root[data-motion="off"]::view-transition-group(*) { animation-name: none; }
:root[data-motion="off"]::view-transition-old(root), :root[data-motion="off"]::view-transition-new(root) { animation-name: none; }
@view-transition { navigation: auto; }
::view-transition { pointer-events: none; }
::view-transition-group(root) {
  animation-duration: var(--motion-fast);
  animation-timing-function: var(--motion-ease);
}
::view-transition-old(root) { animation-timing-function: var(--motion-ease-exit); }
@keyframes motion-fade-in {
  from { opacity: 0; }
}
@keyframes motion-drop-in {
  from { opacity: 0; translate: 0 calc(-1 * var(--motion-shift)); }
}
@keyframes motion-rise-in {
  from { opacity: 0; translate: 0 calc(3 * var(--motion-shift)); }
}
@keyframes motion-reveal-in {
  from { opacity: 0; translate: 0 calc(2 * var(--motion-shift)); }
}

/* The site's shared header and footer on the static pages in /public (Travel, Field Check, Project Hub).
   The App Router pages use src/components/site/SiteHeader.tsx and SiteFooter.tsx with the same links and look.
   Colors come from each page's own theme tokens, so light and dark follow the page. */
.site-head,
.site-foot,
.site-skip {
  --sn-fg: var(--foreground, #1c1814);
  --sn-muted: var(--muted-foreground, var(--muted, #78716c));
  --sn-line: var(--border, #e7e5e0);
  --sn-bg: var(--background, #faf8f4);
  --sn-card: var(--card, #ffffff);
  --sn-hover: var(--secondary, rgba(120, 113, 108, 0.12));
  --sn-accent: var(--accent, #b45309);
  --sn-mono: var(--font-mono, var(--mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace));
  box-sizing: border-box;
  font-family: var(--font-sans, var(--font, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif));
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}
.site-head *,
.site-foot * {
  box-sizing: border-box;
}

.site-skip {
  position: absolute;
  left: 16px;
  top: -64px;
  z-index: 100;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--sn-fg);
  color: var(--sn-bg);
  font-size: 14px;
  text-decoration: none;
}
.site-skip:focus {
  top: 12px;
}

/* Header */
.site-head {
  position: relative;
  z-index: 30;
  width: 100%;
  background: var(--sn-bg);
  border-bottom: 1px solid var(--sn-line);
  color: var(--sn-fg);
}
.site-head-in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 4px;
  max-width: 1152px; /* 72rem at 16px: pages here set their own root size */
  min-height: 56px;
  margin: 0 auto;
  padding: 0 24px;
}
.site-mark {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: 0 auto 0 -8px;
  padding: 0 8px;
  border-radius: 6px;
  color: var(--sn-fg);
  font-family: var(--sn-mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  transition: opacity var(--motion-base) var(--motion-ease);
}
.site-mark:hover {
  opacity: 0.7;
}
.site-links {
  display: flex;
  align-items: center;
  gap: 4px;
}
.site-links a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 12px;
  border-radius: 999px;
  color: var(--sn-muted);
  font-size: 14px;
  font-weight: 400;
  text-decoration: none;
  transition: color var(--motion-base) var(--motion-ease), background-color var(--motion-base) var(--motion-ease), opacity var(--motion-base) var(--motion-ease), scale var(--motion-base) var(--motion-ease);
}
.site-links a:hover,
.site-links a[aria-current] {
  color: var(--sn-fg);
}
.site-links a[aria-current] {
  font-weight: 500;
}
.site-menu {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--sn-fg);
  cursor: pointer;
}
.site-menu:hover {
  background: var(--sn-hover);
}
.site-menu svg {
  width: 20px;
  height: 20px;
}
.site-head.open {
  background: var(--sn-bg);
}
.site-scrim {
  animation: motion-fade-in var(--motion-base) var(--motion-ease);
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.2);
}
.dark .site-scrim {
  background: rgba(0, 0, 0, 0.5);
}
.site-head a:focus-visible,
.site-head button:focus-visible,
.site-foot a:focus-visible,
.site-skip:focus-visible {
  outline: 2px solid var(--sn-accent);
  outline-offset: 2px;
}

@media (min-width: 768px) {
  .site-head-in {
    padding: 0 48px;
  }
}
@media (min-width: 1024px) {
  .site-head-in {
    padding: 0 80px;
  }
}

/* Phones. With /demos/site-nav.js the sections fold into a menu, as on the other pages; with scripting off they
   wrap onto a second row. */
@media (max-width: 767px) {
  .site-head:not(.js) .site-links {
    order: 3;
    width: calc(100% + 24px);
    margin: 0 -12px 6px;
    justify-content: space-between;
  }
}
/* The script is deferred, so the page can paint before it runs. Where it will run, that first paint already has
   the folded header: the links are hidden and the Menu button's place (the last item, where the script appends
   it) is held by a 40px stand-in that draws the same icon. When the script adds .js and the real button, nothing
   moves. Browsers that do not know the scripting feature keep the two rows until the script runs. */
@media (max-width: 767px) and (scripting: enabled) {
  .site-head:not(.js) .site-links {
    display: none;
  }
  .site-head:not(.js) .site-head-in::after {
    content: "";
    flex: none;
    width: 40px;
    height: 40px;
    background: var(--sn-fg);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round'%3E%3Cpath d='M4 9h16M4 15h16'/%3E%3C/svg%3E") center / 20px 20px no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round'%3E%3Cpath d='M4 9h16M4 15h16'/%3E%3C/svg%3E") center / 20px 20px no-repeat;
  }
}
@media (max-width: 767px) {
  .site-head.js .site-links {
    display: none;
  }
  .site-head.js .site-menu {
    display: inline-flex;
  }
  .site-head.js.open .site-links {
    animation: motion-drop-in var(--motion-base) var(--motion-ease);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    padding: 8px 12px;
    background: var(--sn-bg);
    border-bottom: 1px solid var(--sn-line);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
  }
  .site-head.js.open .site-links a {
    min-height: 48px;
    padding: 0 12px;
    border-radius: 12px;
    font-size: 18px;
    font-weight: 500;
  }
  .site-head.js.open .site-links a:hover {
    background: var(--sn-hover);
  }
}

/* Footer */
.site-foot {
  display: block;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--sn-line);
  background: var(--sn-bg);
  color: var(--sn-muted);
  font-size: 14px;
}
.site-foot-in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  max-width: 1152px; /* 72rem at 16px: pages here set their own root size */
  margin: 0 auto;
  padding: 32px 24px;
}
.site-foot nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 4px;
}
.site-foot nav a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 12px;
  border-radius: 999px;
  color: var(--sn-muted);
  font-weight: 400;
  text-decoration: none;
  transition: color var(--motion-base) var(--motion-ease), background-color var(--motion-base) var(--motion-ease), opacity var(--motion-base) var(--motion-ease), scale var(--motion-base) var(--motion-ease);
}
.site-foot nav a:hover,
.site-foot nav a[aria-current] {
  color: var(--sn-fg);
}
.site-foot nav a[aria-current] {
  font-weight: 500;
}
.site-foot nav .site-home {
  gap: 8px;
  margin-right: 8px;
  padding: 0 16px;
  border: 1px solid var(--sn-line);
  background: var(--sn-card);
  color: var(--sn-fg);
  font-weight: 500;
}
.site-foot nav .site-home:hover {
  background: var(--sn-hover);
}
/* The same four-point star as the footer on the other pages. */
.site-home::before {
  content: "";
  width: 14px;
  height: 14px;
  background: var(--sn-accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2c.9 6.2 3.8 9.1 10 10-6.2.9-9.1 3.8-10 10-.9-6.2-3.8-9.1-10-10 6.2-.9 9.1-3.8 10-10Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2c.9 6.2 3.8 9.1 10 10-6.2.9-9.1 3.8-10 10-.9-6.2-3.8-9.1-10-10 6.2-.9 9.1-3.8 10-10Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.site-foot p {
  margin: 0;
  font-size: 12px;
}
.site-foot .site-credit {
  flex-basis: 100%;
}
/* Phones: the Home button on its own row, the four sections on the next, the copyright line under them. */
@media (max-width: 639px) {
  .site-foot-in {
    flex-direction: column;
    align-items: flex-start;
  }
  .site-foot nav {
    display: grid;
    grid-template-columns: repeat(4, auto);
    justify-content: start;
    gap: 12px 0;
  }
  .site-foot nav .site-home {
    grid-column: 1 / -1;
    justify-self: start;
    margin-right: 0;
  }
  .site-foot nav .site-home + a {
    margin-left: -12px;
  }
}
@media (min-width: 768px) {
  .site-foot-in {
    padding: 32px 48px;
  }
}
@media (min-width: 1024px) {
  .site-foot-in {
    padding: 32px 80px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion="on"]) .site-mark,:root:not([data-motion="on"])
  .site-links a,:root:not([data-motion="on"])
  .site-foot nav a {
    transition: none;
  }
}

:root[data-motion="off"] .site-mark,:root[data-motion="off"]
  .site-links a,:root[data-motion="off"]
  .site-foot nav a {
    transition: none;
  }

.site-menu, .site-foot nav .site-home {
  transition: background-color var(--motion-base) var(--motion-ease), scale var(--motion-base) var(--motion-ease);
}
.site-menu, .site-links a, .site-foot nav a, .site-mark { -webkit-tap-highlight-color: transparent; }
.site-menu:is(:active, [data-press-held]), .site-foot nav .site-home:is(:active, [data-press-held]) { scale: var(--motion-press-scale); transition-duration: var(--motion-press); }
.site-links a:is(:active, [data-press-held]), .site-foot nav a:not(.site-home):is(:active, [data-press-held]), .site-mark:is(:active, [data-press-held]) { opacity: 0.6; transition-duration: var(--motion-press); }

/* Travel place-card entry and press feedback; zero-specificity page scope. */
@media(min-width:900px){:where([data-travel]) #cardBody:not([hidden]){animation:motion-fade-in var(--motion-base) var(--motion-ease)}}
@media(max-width:899px){:where([data-travel]) .card.from-list:has(#cardBody:not([hidden])){animation:motion-rise-in var(--motion-base) var(--motion-ease)}}
:where([data-travel]) .cbtn,:where([data-travel]) .ctl button,:where([data-travel]) .chip,:where([data-travel]) .close,:where([data-travel]) #bFs,:where([data-travel]) #bFsExit{transition:scale var(--motion-base) var(--motion-ease);-webkit-tap-highlight-color:transparent}
:where([data-travel]) :is(.cbtn,.ctl button,.chip,.close,#bFs,#bFsExit):is(:active,[data-press-held]){scale:var(--motion-press-scale);transition-duration:var(--motion-press)}