/* Ghyperion Industries — shared styles */

html, body { margin: 0; padding: 0; background: #090B0D; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
* { box-sizing: border-box; }

a { color: #7FB2CE; text-decoration: none; }
a:hover { color: #E4E8EB; }
a:focus-visible, [role="button"]:focus-visible { outline: 1px solid #7FB2CE; outline-offset: 4px; }
::selection { background: #7FB2CE; color: #090B0D; }

img, canvas { max-width: 100%; }

/* Hover inversions (nav/list links: ivory → accent; dim header links: dim → ivory) */
.hover-accent { transition: color 0.25s ease; }
.hover-accent:hover, .hover-accent:hover span { color: #7FB2CE !important; }
.hover-ivory { transition: color 0.3s ease; }
.hover-ivory:hover, .hover-ivory:hover span { color: #E4E8EB !important; }

/* Row links: the whole row shifts to accent on hover */
.row-link { transition: color 0.25s ease; }
.row-link:hover, .row-link:hover > span:not(.keep-color) { color: #7FB2CE !important; }

/* Dropdown menu (main page) */
#menu-panel[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ---------- Responsive (≤720px) ----------
   Desktop keeps the handoff's exact spacing; small screens tighten
   gutters and stack the grids. Inline styles carry the desktop values,
   hence the !important overrides here. */
@media (max-width: 720px) {
  .site-header { padding: 24px !important; flex-wrap: wrap; row-gap: 10px; }
  .container, .pad-x { padding-left: 24px !important; padding-right: 24px !important; }
  .hero-title { font-size: clamp(38px, 12vw, 190px) !important; }

  /* Dropdown menu: single column, scrollable if tall */
  .menu-grid { grid-template-columns: 1fr !important; gap: 36px !important; padding: 36px 24px 48px !important; }
  #menu-panel { max-height: calc(100vh - 90px); overflow-y: auto; }

  /* Section captions (e.g. "03 EMERGENCE" / "FIG. 01 …") may wrap */
  .caption-row { flex-wrap: wrap; row-gap: 8px; }

  /* Record tables: numeral + content column, details stack underneath */
  .sys-row, .row4 { grid-template-columns: 40px minmax(0, 1fr) !important; gap: 12px 20px !important; }
  .sys-row > :nth-child(n+3), .row4 > :nth-child(n+3) { grid-column: 2; }
  .cell-right { text-align: left !important; }

  .map-canvas { height: 72vw !important; min-height: 340px; }
}