@import url("./tracking.css?v=20260906-2");
@import url("./components/editorial.css?v=20260907-10");

/*
  Navigation owns navigation only.
  Supporting-copy contrast is defined exclusively in tokens.css;
  editorial.css is reloaded here only as a final compatibility pass for legacy pages
  that still load page-specific CSS after himart-system.css.
*/

/* Portfolio global navigation — canonical source based on index.html. */
html body .top{
  position:fixed!important;
  z-index:50!important;
  inset:0 0 auto!important;
  display:grid!important;
  grid-template-columns:1fr auto 1fr!important;
  align-items:start!important;
  width:100%!important;
  height:auto!important;
  margin:0!important;
  padding:18px var(--pad,34px)!important;
  transform:none!important;
  color:#fff!important;
  mix-blend-mode:difference!important;
  pointer-events:none!important;
}
html body .top>*{pointer-events:auto!important}
html body .top .top-center{
  display:flex!important;
  align-items:flex-start!important;
  justify-content:center!important;
  gap:26px!important;
  margin:0!important;
  padding:0!important;
}
html body .top a{
  position:relative!important;
  display:inline-block!important;
  color:#fff!important;
  font-family:'Averta PE',Arial,sans-serif!important;
  font-size:12px!important;
  font-weight:400!important;
  line-height:1.25!important;
  letter-spacing:var(--hm-track-nav,-.011em)!important;
  text-decoration:none!important;
  text-transform:none!important;
  opacity:1!important;
}
html body .top a::after{
  content:""!important;
  position:absolute!important;
  right:100%!important;
  bottom:-3px!important;
  left:0!important;
  height:1px!important;
  background:currentColor!important;
  transition:right .3s!important;
}
html body .top a:hover::after,
html body .top a[aria-current="page"]::after{right:0!important}

/*
  Detail-page centering lock.
  Do NOT put grid-column on the generic .top-center: HOME keeps its legacy absolute centering contract.
  navigation.js assigns .portfolio-progress-page only to WORKS and project detail pages.
*/
html body.portfolio-progress-page>.top{z-index:2147483646!important}
html body.portfolio-progress-page>.top .top-center{
  position:static!important;
  grid-column:2!important;
  justify-self:center!important;
  transform:none!important;
}

@media(max-width:850px){
  html body .top{padding:17px 18px!important}
  html body .top .top-center{gap:22px!important}
  html body .top a{font-size:11px!important}
}

/* 2026-09-09 — REUSE 02.2 copy transition.
   The trust-state title/description must cross-dissolve in place when the circle fills blue.
   No vertical travel is allowed in either direction. The existing state classes from
   reuse-confidence-motion.js are intentionally preserved; this is a presentation-only override. */
html body.reuse-current .reuse-confidence-title,
html body.reuse-current .reuse-confidence-desc{
  transform:translateY(0)!important;
  transition:opacity .72s cubic-bezier(.4,0,.2,1)!important;
  will-change:opacity;
}
html body.reuse-current .reuse-confidence-title--base,
html body.reuse-current .reuse-confidence-desc--base{
  transform:translateY(0)!important;
  opacity:1;
}
html body.reuse-current .reuse-confidence-title--trust,
html body.reuse-current .reuse-confidence-desc--trust{
  transform:translateY(0)!important;
  opacity:0;
}
html body.reuse-current .reuse-confidence-node.is-copy-trust-active .reuse-confidence-title--base,
html body.reuse-current .reuse-confidence-node.is-copy-trust-active .reuse-confidence-desc--base{
  transform:translateY(0)!important;
  opacity:0;
}
html body.reuse-current .reuse-confidence-node.is-copy-trust-active .reuse-confidence-title--trust,
html body.reuse-current .reuse-confidence-node.is-copy-trust-active .reuse-confidence-desc--trust{
  transform:translateY(0)!important;
  opacity:1;
}

/* The focus-driven pulse uses these classes while the blue circle is being filled.
   Disable only the legacy copy-motion keyframes so the text itself remains stationary. */
html body.reuse-current .reuse-confidence-node.is-flow-pulse-trust .reuse-confidence-title--base,
html body.reuse-current .reuse-confidence-node.is-flow-pulse-trust .reuse-confidence-title--trust,
html body.reuse-current .reuse-confidence-node.is-flow-pulse-trust .reuse-confidence-desc--base,
html body.reuse-current .reuse-confidence-node.is-flow-pulse-trust .reuse-confidence-desc--trust,
html body.reuse-current .reuse-confidence-node.is-flow-trust-resetting .reuse-confidence-title--base,
html body.reuse-current .reuse-confidence-node.is-flow-trust-resetting .reuse-confidence-title--trust,
html body.reuse-current .reuse-confidence-node.is-flow-trust-resetting .reuse-confidence-desc--base,
html body.reuse-current .reuse-confidence-node.is-flow-trust-resetting .reuse-confidence-desc--trust{
  animation:none!important;
  transform:translateY(0)!important;
  transition:opacity .72s cubic-bezier(.4,0,.2,1)!important;
}

/* Blue fill state: keep the active copy fully visible and the inactive copy transparent. */
html body.reuse-current .reuse-confidence-node.is-flow-trust-held .reuse-confidence-title--base,
html body.reuse-current .reuse-confidence-node.is-flow-trust-held .reuse-confidence-desc--base{
  transform:translateY(0)!important;
  opacity:0!important;
}
html body.reuse-current .reuse-confidence-node.is-flow-trust-held .reuse-confidence-title--trust,
html body.reuse-current .reuse-confidence-node.is-flow-trust-held .reuse-confidence-desc--trust{
  transform:translateY(0)!important;
  opacity:1!important;
}

/* Reverse: when the circle returns to black, the two copies cross-dissolve in place. */
html body.reuse-current .reuse-confidence-node.is-flow-trust-resetting .reuse-confidence-title--base,
html body.reuse-current .reuse-confidence-node.is-flow-trust-resetting .reuse-confidence-desc--base{
  opacity:1!important;
}
html body.reuse-current .reuse-confidence-node.is-flow-trust-resetting .reuse-confidence-title--trust,
html body.reuse-current .reuse-confidence-node.is-flow-trust-resetting .reuse-confidence-desc--trust{
  opacity:0!important;
}

@media(prefers-reduced-motion:reduce){
  html body.reuse-current .reuse-confidence-title,
  html body.reuse-current .reuse-confidence-desc,
  html body.reuse-current .reuse-confidence-node.is-flow-trust-resetting .reuse-confidence-title--base,
  html body.reuse-current .reuse-confidence-node.is-flow-trust-resetting .reuse-confidence-title--trust,
  html body.reuse-current .reuse-confidence-node.is-flow-trust-resetting .reuse-confidence-desc--base,
  html body.reuse-current .reuse-confidence-node.is-flow-trust-resetting .reuse-confidence-desc--trust{
    transition:none!important;
  }
}