/* ============================================================
   深氪 DEEPKR — site additions
   Loaded after the compiled Tailwind bundle (assets/css/site.css).
   Only add what the design system does not already provide.
   ============================================================ */

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

/* anchor offset for the 68px sticky header */
section[id],
footer[id] {
  scroll-margin-top: 84px;
}

body {
  font-family: Inter, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", var(--font-sans);
  color: var(--ink-900);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* header gets a hairline + shadow once the page is scrolled */
#site-header[data-scrolled="true"] {
  border-bottom-color: var(--line);
  box-shadow: 0 8px 24px rgb(16 24 40 / 6%);
}

/* dialogs */
dialog {
  outline: none;
}
dialog[open] {
  animation: dialog-in 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}
dialog::backdrop {
  backdrop-filter: blur(2px);
}
@keyframes dialog-in {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
body[data-locked="true"] {
  overflow: hidden;
}

/* nav link active state */
[data-nav-link][aria-current="true"] {
  color: var(--brand-700);
}

/* footer link hover keeps contrast on the blue panel */
footer a:focus-visible,
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--brand-500);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .hero-enter,
  .hero-panel-enter,
  .hero-flow-node,
  dialog[open] {
    animation: none !important;
  }
}

/* ------------------------------------------------------------
   Utility shims: a handful of small utilities used by the page
   that were not part of the compiled bundle.
   ------------------------------------------------------------ */
.bg-line { background-color: var(--line); }
.w-px { width: 1px; }
.h-px { height: 1px; }
.h-3 { height: 0.75rem; }
.py-10 { padding-block: 2.5rem; }
.w-\[132px\] { width: 132px; }
.w-\[210px\] { width: 210px; }
@media (min-width: 768px) {
  .md\:w-\[152px\] { width: 152px; }
}

/* text-link underline shims */
.underline{text-decoration-line:underline}
.decoration-1{text-decoration-thickness:1px}
.underline-offset-4{text-underline-offset:4px}
.decoration-white\/40{text-decoration-color:rgb(255 255 255 / 40%)}