/* The ILIONA family: one light split into rays.
   The group is the white light; each company is one band of its spectrum.
   Every ray has the same lightness and chroma, only the hue moves, so they
   read as one family on any ground. Each ray has an -ink twin, dark enough
   for text on a light ground (WCAG AA on #fff and on pale grounds).

   Copied into every site as /assets/family.css by tools/family.mjs:
   edit shared/family/family.css, never the copies. */
:root {
  --ray-group:  oklch(0.96 0.02 90);
  --ray-1108:   oklch(0.74 0.14 10);
  --ray-tdp5m:  oklch(0.78 0.12 150);
  --ray-priam:  oklch(0.80 0.15 75);
  --ray-net:    oklch(0.77 0.11 205);
  --ray-kyrena: oklch(0.72 0.13 250);

  --ray-group-ink:  oklch(0.40 0.03 90);
  --ray-1108-ink:   oklch(0.50 0.15 10);
  --ray-tdp5m-ink:  oklch(0.48 0.11 150);
  --ray-priam-ink:  oklch(0.52 0.12 72);
  --ray-net-ink:    oklch(0.48 0.09 215);
  --ray-kyrena-ink: oklch(0.48 0.14 255);
}

/* The family footer. A site sets, on .family or an ancestor:
   --family-ink (names), --family-dim (roles and domains, 4.5:1 on the ground),
   and --family-ground if the footer sits on a different ground from the page. */
.family {
  /* read through fallbacks, never declared here: a value declared on .family
     itself would hide the one a site sets on an ancestor */
  --_ink: var(--family-ink, currentColor);
  --_dim: var(--family-dim, color-mix(in oklab, currentColor 62%, transparent));
  font-family: inherit; /* each site is its own world: the footer speaks in its type */
  padding-block: 3.5rem 2.5rem;
  background: var(--family-ground, transparent);
}
.family-title {
  margin: 0 0 1.25rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--_dim);
}
/* a 44px target that takes no room: the padding is paid back by the margin */
.family-title a { display: inline-block; padding-block: 0.4em; margin-block: -0.4em; padding-block: calc((44px - 1lh) / 2); margin-block: calc((1lh - 44px) / 2); color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.25em; text-decoration-color: color-mix(in oklab, currentColor 40%, transparent); }
.family-title a:hover, .family-title a:focus-visible { color: var(--_ink); text-decoration-color: currentColor; }
/* focus rings in the ink, not the ray: the pale rays fall under 3:1 on light grounds */
.family-title a:focus-visible { outline: 2px solid var(--_ink); outline-offset: 4px; border-radius: 2px; }
.family-rays {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  --ray: var(--ray-group); /* the default ray, set on the list so each .ray-* entry can override it */
}
/* each entry spans four rows of the list (ray, name, role, domain) through
   subgrid, so a name that wraps onto two lines never pushes its role out of
   line with the others */
.family-rays > li {
  position: relative;
  min-width: 0;
  display: grid;
  grid-row: span 4;
  grid-template-rows: subgrid;
  row-gap: 0;
}
/* the spectrum: each company's band of the light, drawn as the top edge of its entry */
.family-rays > li::before {
  content: "";
  display: block;
  height: 2px;
  background: linear-gradient(90deg, var(--ray), color-mix(in oklab, var(--ray) 70%, transparent));
  opacity: 0.55;
  transition: opacity 0.4s, transform 0.4s;
  transform-origin: left;
}
/* the group is the white light: its band holds every company's ray, so it reads on any ground */
.family-rays > li.ray-group::before {
  background: linear-gradient(90deg, var(--ray-kyrena), var(--ray-net), var(--ray-tdp5m), var(--ray-priam), var(--ray-1108));
}
/* the current company: the same 2px band, lit; the shadow thickens it without moving the text */
.family-rays > li[aria-current="page"]::before { opacity: 1; box-shadow: 0 1px 0 var(--ray), 0 0 14px var(--ray); }
.family-rays > li:hover::before, .family-rays > li:focus-within::before { opacity: 1; }
.family-rays a, .family-rays .family-here {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  row-gap: 0.3rem;
  align-content: start;
  padding: 0.9rem 1rem 0.9rem 0;
  color: var(--_ink);
  text-decoration: none;
  min-height: 44px;
}
.family-rays a:focus-visible { outline: 2px solid var(--_ink); outline-offset: 4px; border-radius: 2px; }
.family-name { font-size: 0.875rem; font-weight: 600; letter-spacing: 0.02em; text-wrap: balance; }
.family-role { font-size: 0.8125rem; line-height: 1.35; color: var(--_dim); }
.family-domain { font-size: 0.75rem; color: var(--_dim); } /* the roles' colour, at full strength: 12px text needs 4.5:1 */
.family-rays a:hover .family-domain, .family-rays a:focus-visible .family-domain { color: var(--_ink); }
.family-company { margin: 2rem 0 0; font-size: 0.75rem; line-height: 1.5; color: var(--_dim); } /* the current company's facts line, generated */
.ray-group  { --ray: var(--ray-group); }
.ray-kyrena { --ray: var(--ray-kyrena); }
.ray-1108   { --ray: var(--ray-1108); }
.ray-tdp5m  { --ray: var(--ray-tdp5m); }
.ray-priam  { --ray: var(--ray-priam); }
.ray-net    { --ray: var(--ray-net); }
@media (max-width: 860px) {
  .family-rays { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 0.5rem; }
}
@media (max-width: 520px) {
  .family-rays { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .family-rays > li::before { transition: none; }
}