@import url("design-tokens.css");
@import url("design-primitives.css");

/*
  Research is a product surface, not a separate visual language. This layer
  maps its existing content to the shared Sedime foundations and components.
  It intentionally contains no content or layout-specific copy changes.
*/

:root {
  --research-surface-muted: color-mix(in srgb, var(--ds-mint) 54%, var(--ds-paper));
  --research-dark-muted: rgba(188, 212, 209, .92);
}

body {
  background: var(--ds-paper);
}

/* The floating product navigation is the same component used on the landing page. */
.ds-header .ds-nav {
  border-color: color-mix(in srgb, var(--ds-primary) 11%, transparent);
}

.research-nav-label {
  color: var(--ds-muted);
}

.research-hero {
  background:
    radial-gradient(circle at 77% 14%, rgba(21, 149, 141, .13), transparent 26%),
    linear-gradient(135deg, var(--research-surface-muted), var(--ds-peach) 65%, var(--ds-paper));
}

.research-hero-photo {
  border: 1px solid color-mix(in srgb, var(--ds-primary) 12%, transparent);
  box-shadow: var(--ds-shadow-lg);
}

.research-hero-photo figcaption {
  background: color-mix(in srgb, var(--ds-paper) 92%, transparent);
  box-shadow: var(--ds-shadow-md);
  backdrop-filter: blur(12px);
}

/* Raised information units use E1; full-width editorial sections deliberately stay E0. */
.research-principles .ds-card,
.research-role-grid .ds-card {
  border-color: var(--ds-line);
  box-shadow: var(--ds-shadow-sm);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.research-principles .ds-card:hover,
.research-role-grid .ds-card:hover {
  border-color: color-mix(in srgb, var(--ds-primary) 30%, var(--ds-line));
  box-shadow: var(--ds-shadow-md);
  transform: translateY(-2px);
}

.research-scope-card,
.research-participation-card,
.research-boundary-card {
  border-radius: var(--ds-radius-section);
  box-shadow: none;
}

.research-scope-card {
  background: var(--ds-ink);
}

.research-boundary-card {
  background: #10272b;
}

.research-participation-card {
  background: var(--ds-peach);
}

/* A paper interstitial resets the canvas between two macro-sections. */
.research-access-section {
  padding-top: 0;
}

.research-access-card {
  padding: clamp(36px, 5vw, 56px) 0;
  color: var(--ds-ink);
  background: transparent;
  border-top: 1px solid var(--ds-line);
  border-bottom: 1px solid var(--ds-line);
  border-radius: 0;
  box-shadow: none;
}

.research-access-card .ds-eyebrow { color: var(--ds-primary); }
.research-access-card h2 { color: var(--ds-ink); }
.research-access-card h2 em { color: var(--ds-primary); }

.research-section-heading > p:last-child,
.research-boundary-card li {
  color: var(--research-dark-muted);
}

.research-access-card p:not(.ds-eyebrow) { color: var(--ds-muted); }

.research-status > i {
  flex: 0 0 auto;
}

.research-privacy-link {
  text-underline-offset: 4px;
}

.research-access-card .ds-button--secondary {
  box-shadow: var(--ds-shadow-sm);
}

.research-footer {
  border-top: 1px solid rgba(255, 253, 248, .1);
}

/* Shared interaction contract: quiet by default, visible on keyboard focus. */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--ds-primary-bright) 55%, var(--ds-paper));
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .research-principles .ds-card,
  .research-role-grid .ds-card { transition: none; }
  .research-principles .ds-card:hover,
  .research-role-grid .ds-card:hover { transform: none; }
}

@media (max-width: 680px) {
  .research-hero-photo figcaption { backdrop-filter: none; }
  .research-principles .ds-card:hover,
  .research-role-grid .ds-card:hover { transform: none; }
}