/* Richer single-theme palette for the 2026 portfolio. */
:root {
  --canvas: #09131c;
  --canvas-soft: #0f1d28;
  --surface: #152735;
  --surface-2: #1b3040;
  --text: #f6fbff;
  --muted: #afc0cd;
  --line: rgba(155, 200, 226, 0.18);
  --accent: #48d7c8;
  --accent-2: #8a93ff;
  --focus: #7ce9dd;
}

/* CSP-safe accessibility text sizing: classes replace runtime inline styles. */
html.text-scale-90 { --text-scale: 0.9; }
html.text-scale-100 { --text-scale: 1; }
html.text-scale-110 { --text-scale: 1.1; }
html.text-scale-120 { --text-scale: 1.2; }
html.text-scale-130 { --text-scale: 1.3; }

/* Keep accessibility high-contrast mode authoritative. */
html.high-contrast {
  --canvas: #ffffff;
  --canvas-soft: #ffffff;
  --surface: #ffffff;
  --surface-2: #ffffff;
  --text: #000000;
  --muted: #000000;
  --line: #000000;
  --accent: #003b80;
  --accent-2: #000000;
  --focus: #000000;
}

body::before {
  background:
    radial-gradient(52rem 32rem at 8% -8%, rgba(72, 215, 200, 0.16), transparent 70%),
    radial-gradient(48rem 30rem at 94% 18%, rgba(138, 147, 255, 0.13), transparent 72%),
    radial-gradient(40rem 26rem at 50% 85%, rgba(40, 111, 158, 0.09), transparent 75%);
}

.nav-wrapper {
  background: color-mix(in srgb, var(--canvas) 86%, transparent);
  border-bottom-color: rgba(108, 177, 205, 0.2);
  backdrop-filter: blur(16px) saturate(125%);
}

.rb-work-grid,
.card,
.aside-panel,
.credential-panel,
.form-panel,
.summary-panel,
.case-facts,
.rb-close {
  border-color: rgba(112, 181, 210, 0.19);
}

.rb-work-primary,
.rb-work-secondary,
.card,
.aside-panel,
.credential-panel,
.form-panel {
  background: linear-gradient(145deg, rgba(20, 39, 53, 0.98), rgba(13, 29, 40, 0.98));
}

.rb-close {
  background:
    linear-gradient(135deg, rgba(72, 215, 200, 0.08), rgba(138, 147, 255, 0.055)),
    var(--canvas-soft);
}

.rb-tags span,
.tag,
.stat-pill {
  background: rgba(72, 215, 200, 0.035);
  border-color: rgba(115, 192, 210, 0.2);
}

.btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #071413;
}

.btn.secondary {
  background: rgba(138, 147, 255, 0.055);
  border-color: rgba(138, 147, 255, 0.22);
}

.eyebrow,
.rb-kicker,
.rb-work-index,
.rb-capability > span,
.case-study-row__mark {
  color: #64e2d5;
}

/* Keep portfolio copy readable and stop awkward single-word wraps. */
h1,
h2,
h3,
h4 {
  text-wrap: balance;
  hyphens: none;
}

p,
li,
.rb-work-copy,
.summary-row strong,
.rb-meta-row strong,
.case-fact strong,
.portfolio-console__value {
  text-wrap: pretty;
  hyphens: none;
}

.contact-link-row a,
.portfolio-console__value {
  overflow-wrap: anywhere;
}

.nav-links a,
.btn {
  white-space: nowrap;
}

/* The mobile menu should clearly become a close control when open. */
@media (max-width: 62rem) {
  .menu-toggle {
    position: relative;
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
  }

  .menu-toggle span {
    transform-origin: center;
    transition: transform 180ms ease, opacity 140ms ease, width 180ms ease;
  }

  .menu-toggle.active,
  .menu-toggle[aria-expanded="true"] {
    background: rgba(72, 215, 200, 0.08);
    border-color: rgba(100, 226, 213, 0.38);
    color: var(--accent);
  }

  .menu-toggle.active span:nth-child(1),
  .menu-toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(5.5px) rotate(45deg);
  }

  .menu-toggle.active span:nth-child(2),
  .menu-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0.35);
  }

  .menu-toggle.active span:nth-child(3),
  .menu-toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-5.5px) rotate(-45deg);
  }

  .nav-links a {
    white-space: normal;
    text-wrap: pretty;
  }
}

@media (hover: hover) and (pointer: fine) {
  .rb-work-primary:hover,
  .rb-work-secondary:hover,
  .card:hover,
  .case-study-row:hover {
    background-color: #172b39;
    border-color: rgba(86, 214, 203, 0.28);
  }
}

html.high-contrast body::before { display: none; }

html.high-contrast .menu-toggle.active,
html.high-contrast .menu-toggle[aria-expanded="true"] {
  background: #ffffff;
  border-color: #000000;
  color: #000000;
}

@media (prefers-reduced-motion: reduce) {
  .menu-toggle,
  .menu-toggle span {
    transition: none !important;
  }
}

/* Shared layout and accessible colour refinements. */
@media (min-width: 62.001rem) {
  .nav-glass { grid-template-columns: minmax(0, 1fr) auto; }
  .nav-links { justify-self: end; }
  .rb-hero, .page-hero, .hero-gradient, .case-hero {
    padding-block: clamp(3.5rem, 6vw, 5.5rem);
  }
  .rb-hero h1 { max-width: 15ch; font-size: clamp(3.5rem, 5.4vw, 5.2rem); line-height: 1.06; }
  .page-hero__copy h1, .hero-content h1, .case-hero__copy h1 {
    max-width: 19ch; font-size: clamp(2.7rem, 4.2vw, 4.2rem); line-height: 1.08;
  }
  .rb-hero-grid { align-items: center; }
}

.project-breadcrumb { padding-top: 1.5rem; }
.project-breadcrumb a, .case-jump-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--accent);
  text-underline-offset: 0.25em;
}
.project-breadcrumb + .case-hero,
.project-breadcrumb + .hero-gradient { padding-top: 1.5rem; }
.case-jump-links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin-bottom: 2rem; border-bottom: 1px solid var(--line); }
.form-panel .form-hint { margin: 0.4rem 0 0; color: var(--muted); font-size: 0.875rem; }
.form-panel input, .form-panel textarea { font-size: 1rem; }
:where(h2[id], section[id], form[id]) { scroll-margin-top: 1rem; }
.footer-inner { padding-right: 4rem; }

/* Fixed accents and gradients must not override high contrast colours. */
html.high-contrast :is(.eyebrow, .rb-kicker, .rb-work-index, .rb-capability > span, .case-study-row__mark) { color: var(--accent); }
html.high-contrast :is(.rb-close, .portfolio-console, .recruiter-brief__item, .hero-proofline li) {
  color: var(--text); background: var(--canvas); border-color: var(--line); box-shadow: none;
}
html.high-contrast .btn.primary { color: #fff; background: #003b80; }
html.high-contrast .portfolio-console__bar { color: var(--text); }

/* Navigation remains usable when JavaScript is unavailable. */
@media (max-width: 62rem) {
  html:not(.js) .menu-toggle { display: none; }
  html:not(.js) .nav-glass { flex-wrap: wrap; padding-block: 0.75rem; }
  html:not(.js) .nav-links {
    position: static; display: flex; flex-direction: row; flex-wrap: wrap;
    width: 100%; max-height: none; padding: 0; border: 0; box-shadow: none;
  }
  html:not(.js) .nav-links a { padding-inline: 0.65rem; border: 0; }
}
.nav-wrapper { padding: env(safe-area-inset-top) 0 0; }
.rb-close { padding: clamp(1.25rem, 3vw, 2.5rem); border: 1px solid var(--line); border-radius: var(--radius-lg); }
@media (min-width: 62.001rem) {
  .nav-links a.active { background: transparent; }
  .rb-work-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rb-work-stack { display: contents; }
  .rb-work-primary, .rb-work-secondary { min-height: 0; gap: 1.5rem; padding: 1.75rem; }
  .rb-work-primary > div:not(.rb-work-foot), .rb-work-secondary > div:not(.rb-work-foot) { flex: 1; }
  .rb-work-title, .rb-work-secondary .rb-work-title { font-size: clamp(1.5rem, 2.15vw, 2rem); line-height: 1.12; }
  .rb-work-signal { grid-template-columns: 1fr; }
  .rb-work-foot { margin-top: auto; }
}
/* Keep the spam trap outside the visible form layout. */
.form-panel input.visually-hidden { width: 1px; height: 1px; min-height: 0; padding: 0; border: 0; }