/* ModusBios homepage · A3 (Classical symmetry). Sizes and optical offsets: source/build_pages.py, README. */
:root {
  --royal: #17307E;
  --gold: #EDBF2A;
  --sym-h: min(40vh, calc(62vw * 0.92277), 430px);          /* D2 symbol height */
  --u: clamp(34px, calc(var(--sym-h) * 0.12), 50px);          /* link-mark unit (A2 sizing) */
  --gap: calc(var(--sym-h) * 0.42);                           /* symbol → links */
  --pitch: calc(var(--u) * 2.4);                          /* link centre to link centre */
  --pad: 10px;                                                /* invisible hit area around each mark */
  --dash: calc(var(--u) * 0.62);                              /* hover dash: clear of the focus ring */
}
@supports (height: 1svh) { :root { --sym-h: min(40svh, calc(62vw * 0.92277), 430px); } }
html {
  background: var(--royal);
  color-scheme: dark;
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
  forced-color-adjust: none;   /* high-contrast modes keep Royal, Gold and white (white marks would vanish on a forced white ground) */
}
html, body { margin: 0; height: 100%; }
body { background: var(--royal); -webkit-tap-highlight-color: transparent; }
main {
  box-sizing: border-box;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.group { display: flex; flex-direction: column; align-items: center; transform: translateY(-2.5%); }
h1 { margin: 0; line-height: 0; font-size: 0; }
.symbol { display: block; height: var(--sym-h); width: auto; }
nav { margin-top: var(--gap); display: flex; }
.cell { width: var(--pitch); display: flex; justify-content: center; }
.link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 48px;
  min-height: 48px;
  padding: var(--pad);
  margin: calc(-1 * var(--pad));
  border-radius: 12px;
  transition: transform .24s cubic-bezier(.2, .7, .2, 1);
}
.link img { display: block; width: auto; }
.play img { height: calc(var(--u) * 1.15); transform: translate(6.7%, 0%); }   /* optical centring */
.voyager img { height: calc(var(--u) * 1.2); transform: translate(-2.43%, -3.56%); }   /* optical centring */
/* hover: 2 px lift + short Gold dash below the row; nothing is applied to the artwork itself */
a.link::after {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(100% - var(--pad) + var(--dash));
  width: 18px;
  height: 2px;
  margin-left: -9px;
  border-radius: 1px;
  background: var(--gold);
  opacity: 0;
  transform: scaleX(.3);
  transition: opacity .24s ease, transform .24s cubic-bezier(.2, .7, .2, 1);
}
a.link:hover { transform: translateY(-2px); }
a.link:hover::after { opacity: 1; transform: scaleX(1); }
a.link:active { transform: translateY(0) scale(.97); }
a.link:focus { outline: none; }
a.link:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
@media (prefers-contrast: more) { a.link:focus-visible { outline-width: 3px; } }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.group > a { display: block; border-radius: 12px; }                       /* 404 page: the symbol links home */
.group > a:focus-visible { outline: 2px solid var(--gold); outline-offset: 8px; }
@media (prefers-reduced-motion: reduce) {
  .link, .link::after { transition: none; }
  a.link:hover, a.link:active { transform: none; }
}