/* Resources hub — mark-aligned chrome: full blueprint wireframe (CrossingBlueprintMark parity),
 * dryce-logo wordmark, Nexus_0-adjacent glow/lintel.
 *
 * Sophisticated tools used here (plain HTML/CSS, no build step):
 *   — inline SVG: concentric polygons, ray bursts, φ-length cardinal rays (76/φ), currentColor + tokens
 *   — design tokens via CSS custom properties + color-mix()
 *   — container-type / @container for responsive interior padding
 *   — conic-gradient / radial-gradient for spectrum washes (UI_ATMOSPHERE §2)
 *   — filter + slow keyframes for rim breath (disabled under prefers-reduced-motion)
 *   — transform + rotate for threshold diamond on lintel
 *   — :focus-visible / forced-colors fallbacks in dryce.css
 */

@keyframes rg-hub-rim-breathe {
  0%,
  100% {
    opacity: 0.34;
    filter: saturate(1) brightness(1) blur(22px);
  }

  50% {
    opacity: 0.76;
    filter: saturate(1.22) brightness(1.08) blur(24px);
  }
}

body.rg-hub .skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

body.rg-hub .skip-link:focus,
body.rg-hub .skip-link:focus-visible {
  position: fixed;
  left: max(1rem, env(safe-area-inset-left));
  top: max(1rem, env(safe-area-inset-top));
  z-index: 10000;
  width: auto;
  height: auto;
  clip: auto;
  overflow: visible;
  padding: 0.75rem 1.25rem;
  margin: 0;
  background: linear-gradient(
    165deg,
    color-mix(in srgb, var(--dryce-surface) 55%, var(--dryce-chamber)) 0%,
    color-mix(in srgb, var(--dryce-chamber) 40%, transparent) 100%
  );
  color: var(--text);
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.04em;
  text-decoration: none;
  border: 2px solid
    color-mix(in srgb, var(--color-signal) 55%, var(--dryce-joint));
  border-radius: 6px;
  box-shadow:
    var(--dryce-dim-inset-top),
    0 8px 28px color-mix(in srgb, var(--dryce-recess) 45%, transparent);
}

body.rg-hub {
  --rg-gap-xs: max(0.5rem, var(--space-2, 0.5rem));
  --rg-gap-sm: max(0.75rem, var(--space-3, 0.75rem));
  --rg-gap-md: max(1rem, var(--space-4, 1rem));
  --rg-gap-lg: max(1.5rem, var(--space-5, 1.5rem));
  --rg-hub-measure: min(var(--dryce-measure, 40rem), 100%);
}

body.rg-hub main {
  container-type: inline-size;
  container-name: rg-hub;
  scroll-margin-top: 1.25rem;
}

body.rg-hub .rg-hub-verify {
  margin: var(--rg-gap-md) 0 var(--rg-gap-lg);
  padding: var(--rg-gap-md) var(--rg-gap-lg);
  border-radius: clamp(14px, 0.28em + 3.5vw, 18px);
  border: 1px solid
    color-mix(in srgb, var(--dryce-mark-core) 24%, var(--dryce-joint));
  border-left: 4px solid var(--dryce-mark-core);
  background: linear-gradient(
    155deg,
    color-mix(in srgb, var(--dryce-mark-core) 8%, var(--dryce-chamber)) 0%,
    color-mix(in srgb, var(--dryce-chamber) 35%, transparent) 100%
  );
  box-shadow:
    var(--dryce-dim-inset-top),
    0 12px 32px color-mix(in srgb, var(--dryce-recess) 35%, transparent);
}

body.rg-hub .rg-hub-verify h2 {
  margin: 0 0 var(--rg-gap-sm);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--dryce-mark-core) 45%, var(--text));
  text-shadow: none;
}

body.rg-hub .rg-hub-verify ol {
  margin: 0;
  padding-left: 1.35rem;
  color: var(--text);
  font-size: 0.9375rem;
  line-height: 1.55;
}

body.rg-hub .rg-hub-verify li {
  margin: 0.35rem 0;
}

body.rg-hub .rg-hub-verify li::marker {
  color: color-mix(in srgb, var(--dryce-mark-aperture) 55%, var(--muted));
  font-weight: 700;
}

/* Crossing stack: glow → logo → lintel → title (matches production teaser ordering). */
body.rg-hub .rg-hub-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--rg-gap-sm);
  margin-bottom: var(--rg-gap-md);
  min-height: min(14rem, 48vw);
  justify-content: flex-end;
}

body.rg-hub .rg-hub-blueprint {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  color: color-mix(in srgb, var(--color-text) 52%, var(--cobalt) 22%);
  opacity: 0.42;
}

body.rg-hub .rg-hub-blueprint-svg {
  width: min(20rem, 88vw);
  height: auto;
  margin-top: -0.5rem;
}

body.rg-hub .rg-hub-blueprint-apex {
  fill: color-mix(in srgb, var(--color-signal) 90%, var(--color-text));
  opacity: 0.92;
}

body.rg-hub .rg-hub-brand-stack {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  z-index: 2;
}

body.rg-hub .rg-hub-logo-glow {
  position: absolute;
  inset: -28% -18% -24% -18%;
  z-index: 0;
  pointer-events: none;
  border-radius: 50%;
  opacity: 0.5;
  background:
    radial-gradient(
      circle,
      color-mix(in srgb, var(--dryce-mark-aperture) 22%, transparent) 0%,
      color-mix(in srgb, var(--dryce-mark-core) 12%, transparent) 42%,
      transparent 70%
    ),
    conic-gradient(
      from 220deg at 50% 48%,
      color-mix(in srgb, var(--cobalt) 20%, transparent) 0deg,
      color-mix(in srgb, var(--dryce-mark-core) 14%, transparent) 90deg,
      color-mix(in srgb, var(--dryce-mark-aperture) 16%, transparent) 180deg,
      color-mix(in srgb, var(--cobalt) 18%, transparent) 270deg,
      color-mix(in srgb, var(--dryce-mark-core) 14%, transparent) 360deg
    );
  animation: rg-hub-rim-breathe 52s ease-in-out infinite;
}

body.rg-hub .dryce-site-brand {
  position: relative;
  z-index: 2;
}

body.rg-hub .rg-hub-lintel {
  position: relative;
  z-index: 3;
  width: min(11rem, 54vw);
  height: 1px;
  margin-top: 0.35rem;
  border: none;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--dryce-mark-aperture) 58%, transparent),
    color-mix(in srgb, var(--dryce-mark-core) 42%, transparent),
    color-mix(in srgb, var(--dryce-mark-aperture) 52%, transparent),
    transparent
  );
  opacity: 0.72;
}

body.rg-hub .rg-hub-lintel::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 10px;
  translate: -50% -50%;
  rotate: 45deg;
  opacity: 0.55;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--dryce-mark-aperture) 70%, transparent),
    color-mix(in srgb, var(--dryce-mark-core) 65%, transparent)
  );
  box-shadow: 0 0 14px
    color-mix(in srgb, var(--dryce-mark-aperture) 35%, transparent);
}

body.rg-hub h1 {
  position: relative;
  z-index: 1;
  margin-top: var(--rg-gap-sm);
  color: var(--text);
  text-shadow:
    var(--dryce-dim-type-face),
    0 0 48px color-mix(in srgb, var(--dryce-mark-aperture) 18%, transparent);
}

@media (prefers-contrast: more) {
  body.rg-hub h1 {
    text-shadow: none;
  }

  body.rg-hub p.lede {
    color: var(--saffron);
  }
}

body.rg-hub p.lede {
  color: color-mix(in srgb, var(--dryce-mark-aperture) 72%, var(--saffron));
  text-wrap: pretty;
}

body.rg-hub .rg-hub-card {
  margin-top: var(--rg-gap-lg, 1.5rem);
  padding: var(--rg-gap-lg) var(--rg-gap-md) var(--rg-gap-lg);
  border: 1px solid
    color-mix(in srgb, var(--dryce-mark-core) 22%, var(--dryce-joint));
  border-radius: clamp(14px, 0.28em + 3.5vw, 18px);
  background: linear-gradient(
    168deg,
    color-mix(in srgb, var(--dryce-mark-aperture) 7%, var(--dryce-chamber)) 0%,
    color-mix(in srgb, var(--dryce-chamber) 52%, transparent) 46%,
    color-mix(in srgb, var(--dryce-mark-core) 9%, var(--dryce-chamber)) 100%
  );
  box-shadow:
    var(
      --dryce-dim-inset-top,
      inset 0 1px 0 color-mix(in srgb, var(--color-text) 8%, transparent)
    ),
    inset 0 1px 0 color-mix(in srgb, var(--color-text) 4%, transparent),
    0 18px 48px rgba(0, 0, 0, 0.28),
    inset 4px 0 0 color-mix(in srgb, var(--dryce-mark-core) 62%, transparent);
}

@container rg-hub (min-width: 28rem) {
  body.rg-hub .rg-hub-card {
    padding-inline: var(--rg-gap-lg);
  }
}

body.rg-hub .rg-hub-card h2 {
  margin-top: 0;
  margin-bottom: var(--rg-gap-sm, 0.75rem);
  color: color-mix(in srgb, var(--cobalt) 28%, var(--dryce-mark-aperture) 72%);
  text-shadow: var(--dryce-dim-type-gold);
}

/* Nav: harmonic accents derived from aperture/core only (no rainbow unrelated to mark). */
body.rg-hub nav a {
  color: color-mix(in srgb, var(--dryce-mark-aperture) 38%, var(--text));
  border-bottom-color: color-mix(
    in srgb,
    var(--dryce-mark-aperture) 42%,
    transparent
  );
}

body.rg-hub nav a:nth-of-type(odd):hover {
  color: color-mix(in srgb, var(--dryce-mark-aperture) 72%, var(--text));
}

body.rg-hub nav a:nth-of-type(even) {
  color: color-mix(in srgb, var(--dryce-mark-core) 45%, var(--text));
}

body.rg-hub nav a:nth-of-type(even):hover {
  color: color-mix(in srgb, var(--dryce-mark-core) 78%, var(--text));
}

body.rg-hub .rg-hub-card ul {
  margin: 0;
  padding-left: 1.25rem;
}

body.rg-hub .rg-hub-card li {
  margin-bottom: var(--rg-gap-sm, 0.75rem);
  color: var(--text);
}

body.rg-hub .rg-hub-card li::marker {
  color: color-mix(in srgb, var(--dryce-mark-core) 55%, var(--muted));
}

@media (prefers-reduced-motion: reduce) {
  body.rg-hub .rg-hub-logo-glow {
    animation: none;
    filter: blur(22px) saturate(1) brightness(1);
    opacity: 0.48;
  }

  body.rg-hub .rg-hub-blueprint {
    opacity: 0.28;
  }

  html {
    scroll-behavior: auto;
  }
}

@media (prefers-contrast: more) {
  body.rg-hub .rg-hub-blueprint {
    opacity: 0.55;
    color: var(--color-text);
  }

  body.rg-hub .rg-hub-verify {
    border-width: 2px;
  }

  body.rg-hub .rg-hub-verify h2 {
    color: var(--text);
  }
}