/* Inline term/person definitions — hovered or focused triggers reveal a
   .hover-expansion at the end of their containing block. Touch devices
   tap-to-toggle. The expansion is part of normal flow, so the page
   itself grows when revealed; not a tooltip layer. */

.hover-term {
  position: relative;
  border-bottom: 1px dotted rgba(0, 0, 0, 0.45);
  outline: none;
  text-decoration: none;
  color: inherit;
  transition:
    border-bottom-color 320ms cubic-bezier(0.33, 1, 0.32, 1),
    border-bottom-style 260ms ease,
    color 280ms cubic-bezier(0.33, 1, 0.32, 1);
}

.nine-d-cta__trigger {
  cursor: pointer;
}

/* Netherite pickaxe on interactive targets — 24×24 PNG (fine pointer only).
   !important beats inline cursor:pointer on buttons/copy icons in page shells. */
@media (hover: hover) and (pointer: fine) {
  a[href]:not([aria-disabled="true"]),
  button:not(:disabled),
  [role="button"]:not([aria-disabled="true"]),
  summary,
  input[type="submit"]:not(:disabled),
  input[type="button"]:not(:disabled),
  input[type="reset"]:not(:disabled),
  input[type="checkbox"]:enabled,
  input[type="radio"]:enabled,
  input[type="file"]:enabled,
  label[for],
  select:not(:disabled) {
    cursor: url("/netherite-pickaxe-cursor.png") 2 2, pointer !important;
  }
}

.hover-term:hover,
.hover-term:focus-visible {
  border-bottom-color: rgba(0, 0, 0, 0.95);
  border-bottom-style: solid;
}

a.hover-term {
  /* Anchors that double as hover triggers should not show the default
     blue/underlined link style — the dotted underline is the affordance. */
  text-decoration: none;
}

.hover-expansion {
  display: block;
  max-height: 0;
  overflow: hidden;
  margin: 0;
  padding: 0;
  font-family: inherit;
  font-size: 0.94em;
  line-height: 1.5;
  color: rgba(40, 40, 40, 0.86);
  opacity: 0;
  user-select: text;
  /* Shorter transition (was 380–420 ms) — every animated property here is
     a layout/paint property, so a long transition paints every frame. 180 ms
     keeps the "page grows" feel without thrashing the renderer. */
  transition:
    max-height 180ms cubic-bezier(0.33, 1, 0.32, 1),
    margin 180ms cubic-bezier(0.33, 1, 0.32, 1),
    padding 180ms cubic-bezier(0.33, 1, 0.32, 1),
    opacity 160ms ease;
}
.hover-expansion[data-open="true"] {
  max-height: 320px;
  margin: 0.4em 0 0.6em;
  padding: 0.55em 0.85em;
  border-left: 2px solid rgba(0, 0, 0, 0.18);
  background: rgba(0, 0, 0, 0.025);
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .hover-term {
    transition-duration: 80ms;
    transition-timing-function: ease;
  }
  .hover-expansion {
    transition:
      max-height 180ms ease,
      margin 160ms ease,
      padding 160ms ease,
      opacity 120ms ease,
      border-color 120ms ease,
      background-color 120ms ease;
  }
}
.hover-expansion a {
  color: inherit;
  text-decoration: underline;
}

/* Lining numerals — legacy serif stacks sometimes use old-style “9”/“3”. lining-nums on
   article text; add explicit lnum on .hover-term spans where digits sit low. */
article.content,
article.content p,
article.content li {
  font-variant-numeric: lining-nums;
}
article.content .hover-term,
article.content a.hover-term {
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
}

/* Same fix outside article: hero strap, top-left brand, footer line, plot caption —
   those trees never inherited article.content. */
.nine-d-home-shell .logo-container .home-announcement,
.nine-d-home-shell .logo-container .home-announcement .pill,
.nine-d-home-shell .logo-container .home-announcement .announcement-text,
a.nine-d-top-left,
.nine-d-hero-num,
.memory-caption,
.memory-caption a,
body #footer,
body #footer span,
body #footer a {
  font-variant-numeric: lining-nums;
}

/* Footer — same GT America / sans stack as the “9D LABS” nav (a.nine-d-top-left).
   Base shell sets #footer to 15px and (narrow) #footer > div > span to 15px — override so
   location, © line, separators, and Terms/Privacy links share one size. */
body #footer,
body #footer a,
body #footer .nine-d-footer-loc,
body #footer .nine-d-footer-copy,
body #footer .footer-separator {
  font-family: var(--font-sans), ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 12px;
}

@media (max-width: 640px) {
  /* Shell CSS sets column layout + span { width: 100% }, which stacks each segment.
     Keep one horizontal row; scroll sideways on very narrow screens if needed. */
  body #footer > div {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: baseline !important;
    justify-content: flex-start !important;
    gap: 0.35rem !important;
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  body #footer > div::-webkit-scrollbar {
    display: none;
    height: 0;
  }
  body #footer > div > span {
    width: auto !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    font-size: 12px !important;
    padding: 0 !important;
  }
  body #footer > div > .footer-separator {
    display: inline !important;
    width: auto !important;
    flex-shrink: 0 !important;
  }
}

/* Footer line — shared with index + official/ pages */
.nine-d-footer-copy {
  color: #6a6a6a;
  letter-spacing: 0.03em;
  font-weight: 500;
}

/* Mobile nav — shell CSS uses z-index ~1000–1002 for the overlay and fixed bar.
   Full-bleed heroes, negative-margin stages (e.g. Memories), or compositor ordering can
   still steal taps on narrow viewports. Thin bars inside #menu-toggle are absolutely
   positioned spans; letting hits fall through to the <button> avoids flaky targeting. */
@media (max-width: 768px) {
  #header #site-header.site-header {
    z-index: 10050 !important;
    isolation: isolate;
    /* Lift the fixed mobile header to its own compositor layer so the
       browser doesn't repaint its strip on every scroll frame. */
    transform: translateZ(0);
    will-change: transform;
  }
  #menu-toggle.hamburger {
    touch-action: manipulation;
    position: relative;
    min-width: 44px;
    min-height: 44px;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
  }
  #menu-toggle.hamburger span {
    pointer-events: none;
  }
}