/* Opt-in dark red theme trial. The original light theme stays the default. */
:root.theme-red {
  color-scheme: dark;
  --paper: #09090b;
  --surface: #111114;
  --surface-alt: #1a171a;
  --ink: #f6f1f2;
  --muted: #aaa0a4;
  --body-muted: #d6cdd0;
  --line: #30272b;
  --accent: #ff4b5c;
  --action: #d92b42;
  --accent-soft: rgba(202, 27, 52, .16);
  --night: #070709;
  --night-muted: #c7b9bd;
  --accent-night: #ff6877;
}

:root.theme-red body {
  background:
    radial-gradient(ellipse 68% 28% at 72% 7%, rgba(171, 19, 43, .24), transparent 100%),
    radial-gradient(ellipse 66% 31% at 17% 66%, rgba(105, 13, 36, .12), transparent 100%),
    #09090b;
  background-attachment: fixed;
}

.theme-red a:focus-visible,
.theme-red button:focus-visible,
.theme-red summary:focus-visible { outline-color: #ff6877; }
.theme-red .topbar { border-bottom-color: var(--line); }
.theme-red .wordmark, .theme-red .nav a, .theme-red .footer-links a { color: var(--ink); }
.theme-red .wordmark small, .theme-red .hero-meta, .theme-red .hero-foot { color: var(--muted); }
.theme-red .mark { background: linear-gradient(145deg, #ff5867, #9c1430); color: #fff; }
.theme-red .nav a:hover, .theme-red .footer-links a:hover { color: var(--accent); }
.theme-red .nav-cta { border: 1px solid rgba(255, 93, 112, .62); border-radius: 999px; background: rgba(175, 25, 47, .13); color: var(--ink); }
.theme-red .nav-cta span, .theme-red .text-link span { color: var(--accent); }
.theme-red .button-primary { background: linear-gradient(105deg, #f04a5b, #a91532); box-shadow: 0 9px 28px rgba(196, 28, 54, .24); }
.theme-red .button-primary:hover { background: linear-gradient(105deg, #ff5b69, #bd1c3c); }
.theme-red .text-link { border-color: rgba(255, 91, 110, .5); color: var(--ink); }
.theme-red .hero h1 em,
.theme-red .section h2 em,
.theme-red .contact h2 em {
  color: #ff5968;
  background: linear-gradient(100deg, #ff9293 0%, #ff4d61 45%, #bd173a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.theme-red .hero-lede, .theme-red .hero-intro, .theme-red .section-note { color: var(--body-muted); }
.theme-red .hero-art { border-color: rgba(255, 99, 117, .32); background: linear-gradient(145deg, #171114, #0d0b0d); box-shadow: 18px 18px 0 rgba(157, 20, 45, .17); }
.theme-red .hero-video-poster { box-shadow: 0 24px 70px rgba(173, 19, 45, .2); }
.theme-red .hero-foot { border-color: var(--line); }
.theme-red .project-preview { background: #171316; }
.theme-red .project-card { color: var(--ink); }
.theme-red .project-card:hover .project-arrow { color: #ff7b85; }
.theme-red .reel-strip-head { border-color: var(--line); color: var(--muted); }
.theme-red .short-card { box-shadow: 0 12px 35px rgba(0, 0, 0, .28); }
.theme-red .about { background: linear-gradient(125deg, rgba(93, 13, 31, .28), rgba(10, 9, 11, .96) 60%), #0a090b; color: var(--ink); }
.theme-red .about .eyebrow, .theme-red .about-index { color: var(--muted); }
.theme-red .about-copy h2 em { color: var(--accent); }
.theme-red .about-copy p { color: var(--night-muted); }
.theme-red .about-copy .about-lede { color: var(--ink); }
.theme-red .edit-note.light { border-color: var(--line); color: var(--muted); }
.theme-red .light-link { border-color: rgba(255, 91, 110, .5); color: var(--accent); }
.theme-red .experience-grid article,
.theme-red .steps article { border: 1px solid rgba(255, 89, 108, .13); background: linear-gradient(145deg, rgba(32, 22, 26, .93), rgba(17, 16, 19, .96)); }
.theme-red .experience-grid article > span,
.theme-red .leadership-note > span,
.theme-red .experience-grid p,
.theme-red .leadership-note p,
.theme-red .steps p,
.theme-red .step-top,
.theme-red .service-list p,
.theme-red .service-list article > b,
.theme-red .faq-list details p { color: var(--muted); }
.theme-red .leadership-note,
.theme-red .service-list,
.theme-red .service-list article,
.theme-red .faq-list,
.theme-red .faq-list details { border-color: var(--line); }
.theme-red .service-list article > b,
.theme-red .faq-list summary span { color: var(--accent); }
.theme-red .brand-marquee { border-color: rgba(255, 82, 102, .22); background: rgba(16, 14, 16, .9); }
.theme-red .brand-logo { padding: 8px; border-radius: 12px; background: #f3efe9; box-shadow: 0 9px 26px rgba(0, 0, 0, .22); }
.theme-red .brand-logo img { mix-blend-mode: multiply; }
.theme-red .brand-wham img { max-height: 76px; }
.theme-red .brand-logo.brand-cafe-tunes { padding: 0; border: 1px solid rgba(255, 94, 111, .3); border-radius: 10px; background: transparent; box-shadow: none; }
.theme-red .brand-cafe-tunes img { width: 76px; height: 76px; max-height: 76px; mix-blend-mode: normal; }
.theme-red .brands-head h2 em { color: var(--accent); }
.theme-red .contact { background: linear-gradient(115deg, #250b13, #0a090b 63%, #17090d); color: var(--ink); }
.theme-red .contact .eyebrow,
.theme-red .contact-inner > p:not(.eyebrow),
.theme-red .contact-bottom { color: var(--night-muted); }
.theme-red .contact-bottom { border-color: var(--line); }
.theme-red .footer > small, .theme-red .footer > p { color: var(--muted); }
.theme-red .menu-toggle { border-color: var(--line); background: rgba(16, 14, 16, .92); }
.theme-red .menu-toggle span { background: var(--ink); }

@media (max-width: 760px) {
  .theme-red .nav { border-color: var(--line); background: #100d10; }
  .theme-red .nav a { color: var(--ink); }
}

@media (max-width: 600px) {
  .theme-red .brand-logo { padding: 6px; border-radius: 10px; }
  .theme-red .brand-cafe-tunes img { width: 66px; height: 66px; max-height: 66px; }
}