/* CRUDO / 2026-09-08 — fillet + accent system v3
   One geometric radius for every rectangular UI surface.
   Circular controls remain circles by design. */
:root{
  --fillet:16px;
  --site-accent:#9f625d;
  --site-accent-rgb:159,98,93;
  --lime:var(--site-accent);
  --accent:var(--site-accent);
  --accent-soft-rgb:var(--site-accent-rgb);
  --lab-red:#d43b2d;
  --lab-red-rgb:212,59,45;
}

/* Same fillet on every rectangular component across the site. */
:where(
  .nav-contact,
  .primary-link,
  .mobile-menu,
  .hero-stage,
  .hero-reel,
  .brand-system,
  .work-card figure,
  .work-card figure>figcaption,
  .project-canvas,
  .story-frame,
  .story-frame--wide,
  .story-pair--reverse .story-frame,
  .experiment-view,
  .output-frame,
  .code-window,
  .orbit-field,
  .orbit-project
){border-radius:var(--fillet)!important}

/* Keep true circular elements circular; do not mix pill radii into the system. */
:where(
  .primary-link b,
  .footer-link span,
  .hero-controls button,
  .work-number,
  .orbit-core,
  .orbit-core::before,
  .orbit-core i,
  .orbit-project::before,
  .orbit-project::after,
  .attractor-cursor,
  .attractor-cursor::before,
  .attractor-cursor::after,
  .attractor-cursor i,
  .orbit-dot,
  .experiment-status i
){border-radius:50%!important}

/* Outside LAB the red is intentionally dusty and restrained. */
body:not(.experimental-page) .hero-glow{
  background:radial-gradient(circle,rgba(var(--site-accent-rgb),.19),rgba(var(--site-accent-rgb),0) 69%)!important;
  opacity:.42!important;
}
body:not(.experimental-page) .hero-overlay span:last-child,
body:not(.experimental-page) .primary-link b,
body:not(.experimental-page) .footer-link span,
body:not(.experimental-page) .entry-sequence b{
  color:inherit;
}

/* LAB owns the saturated red system. */
.experimental-page{
  --lime:var(--lab-red);
  --accent:var(--lab-red);
  --accent-soft-rgb:var(--lab-red-rgb);
}
.experimental-page :where(
  .desktop-nav a.is-active,
  .desktop-nav a:hover,
  .orbit-kicker strong,
  .project-back:hover,
  .project-ledger-dark span:nth-child(2),
  .project-cover-copy>p:first-child,
  .view-label span:first-child,
  .code-window>div b
){color:var(--lab-red)!important}
.experimental-page :where(
  .desktop-nav a::after,
  .experiment-card::after,
  .orbit-project:hover::after,
  .orbit-project:focus-visible::after
){background:var(--lab-red)!important}
.experimental-page :where(
  input[type="range"],
  input[type="checkbox"],
  input[type="radio"]
){accent-color:var(--lab-red)!important}

/* LAB front view: black-to-red atmosphere behind the active attractor. */
.experimental-index .orbit-stage{
  background:
    radial-gradient(circle at 50% 48%,rgba(var(--lab-red-rgb),.095) 0%,rgba(92,12,8,.072) 18%,rgba(15,4,3,.045) 34%,transparent 57%),
    radial-gradient(ellipse at 50% 52%,rgba(0,0,0,.08) 0%,rgba(0,0,0,.68) 72%,rgba(0,0,0,.92) 100%),
    #090908!important;
}
.experimental-index .attractor-cursor{
  background:
    radial-gradient(circle at center,
      rgba(var(--lab-red-rgb),.18) 0%,
      rgba(126,18,12,.15) 20%,
      rgba(30,5,4,.18) 42%,
      rgba(0,0,0,.12) 58%,
      rgba(0,0,0,0) 74%);
  box-shadow:
    0 0 42px rgba(var(--lab-red-rgb),.12),
    0 0 96px rgba(72,9,6,.18);
}
.experimental-index .attractor-cursor::before{background:radial-gradient(circle,rgba(var(--lab-red-rgb),.08),rgba(0,0,0,.11) 66%,transparent 72%)}

@media(max-width:850px){
  :where(
    .nav-contact,.primary-link,.mobile-menu,.hero-stage,.hero-reel,.brand-system,
    .work-card figure,.work-card figure>figcaption,.project-canvas,.story-frame,
    .story-frame--wide,.story-pair--reverse .story-frame,.experiment-view,
    .output-frame,.code-window,.orbit-field,.orbit-project
  ){border-radius:var(--fillet)!important}
}