/* Automatic Light, Dusk and Dark variants for each Styling Easter Egg identity. */

/* Clouded */
html[data-style-experiment="clouded"][data-theme="light"] {
  color-scheme: light;
  --paper: #d9d5c9;
  --paper-deep: #bcc2bb;
  --paper-light: #eee9de;
  --ink: #172225;
  --ink-soft: #485557;
  --line: #7f8880;
  --mineral: #9a5f31;
  --mineral-deep: #6e4024;
  --night: #1a2527;
  --night-soft: #263235;
  --night-line: #566265;
  --white-soft: #f4ead9;
  --shadow: 0 24px 70px rgba(32, 40, 40, 0.18);
  --style-header: rgba(224, 221, 211, 0.96);
  --style-header-ink: #172225;
  --style-surface: rgba(239, 234, 222, 0.9);
  --style-surface-alt: rgba(195, 202, 195, 0.92);
  --style-heading: #172225;
  --style-heading-shadow: 0 1px 0 #f5efe3, 0 0 34px rgba(154, 95, 49, 0.12);
  --style-accent-contrast: #f8f0e2;
  --style-status: #e7ded0;
  --style-body-background:
    radial-gradient(circle at 75% 18%, rgba(181, 117, 59, 0.17), transparent 25rem),
    radial-gradient(circle at 18% 40%, rgba(104, 127, 119, 0.22), transparent 30rem),
    linear-gradient(145deg, #e5e0d4 0%, #c6cdc5 48%, #d7d1c5 100%);
}

html[data-style-experiment="clouded"][data-theme="dusk"] {
  color-scheme: dark;
  --paper: #242326;
  --paper-deep: #302d2d;
  --paper-light: #393532;
  --ink: #f2e5d3;
  --ink-soft: #c6b7a7;
  --line: #65584d;
  --mineral: #d69a56;
  --mineral-deep: #efbd79;
  --night: #111316;
  --night-soft: #1b1d20;
  --night-line: #49464a;
  --white-soft: #f7ebda;
  --shadow: 0 28px 85px rgba(0, 0, 0, 0.46);
  --style-header: rgba(27, 27, 30, 0.96);
  --style-header-ink: #f2e5d3;
  --style-surface: rgba(49, 45, 43, 0.9);
  --style-surface-alt: rgba(58, 51, 48, 0.95);
  --style-heading: #f3e6d4;
  --style-heading-shadow: 0 2px 0 #0d0e10, 0 0 38px rgba(214, 154, 86, 0.16);
  --style-accent-contrast: #171513;
  --style-status: #342f2d;
  --style-body-background:
    radial-gradient(circle at 76% 18%, rgba(219, 142, 69, 0.18), transparent 25rem),
    radial-gradient(circle at 18% 44%, rgba(108, 125, 120, 0.13), transparent 31rem),
    linear-gradient(145deg, #17191c 0%, #302a2b 49%, #17191c 100%);
}

html[data-style-experiment="clouded"][data-theme="dark"] {
  color-scheme: dark;
  --paper: #0d1517;
  --paper-deep: #172022;
  --paper-light: #202927;
  --ink: #efe5d5;
  --ink-soft: #b9afa0;
  --line: #4b5149;
  --mineral: #d19a55;
  --mineral-deep: #f2bd72;
  --night: #070c0e;
  --night-soft: #111718;
  --night-line: #39403c;
  --white-soft: #f5ead9;
  --shadow: 0 28px 90px rgba(0, 0, 0, 0.52);
  --style-header: rgba(7, 12, 14, 0.97);
  --style-header-ink: #efe5d5;
  --style-surface: rgba(11, 17, 18, 0.84);
  --style-surface-alt: rgba(20, 28, 29, 0.96);
  --style-heading: #f1e4d0;
  --style-heading-shadow: 0 2px 0 #000, 0 0 36px rgba(214, 148, 70, 0.12);
  --style-accent-contrast: #101517;
  --style-status: #18201f;
  --style-body-background:
    radial-gradient(circle at 75% 18%, rgba(214, 145, 70, 0.16), transparent 25rem),
    radial-gradient(circle at 18% 40%, rgba(132, 151, 137, 0.11), transparent 30rem),
    linear-gradient(145deg, #091012 0%, #152020 45%, #080d0f 100%);
}

/* Graffiti */
html[data-style-experiment="graffiti"][data-theme="light"] {
  color-scheme: light;
  --paper: #f5eadb;
  --paper-deep: #08a9cf;
  --paper-light: #fff7ea;
  --ink: #090b12;
  --ink-soft: #30313b;
  --line: #090b12;
  --mineral: #e5166f;
  --mineral-deep: #ff6f16;
  --night: #090b12;
  --night-soft: #171824;
  --night-line: #35c6e8;
  --white-soft: #fff8e9;
  --shadow: 11px 11px 0 #090b12;
  --style-header: #090b12;
  --style-header-ink: #fff8e9;
  --style-surface: #fff7ea;
  --style-surface-alt: #f7d545;
  --style-heading: #fff7e8;
  --style-heading-shadow: 7px 7px 0 #e5166f, 13px 13px 0 #08a9cf;
  --style-accent-contrast: #090b12;
  --style-status: #ffb66e;
  --style-body-background:
    radial-gradient(circle at 10% 16%, rgba(237, 21, 111, 0.24) 0 5rem, transparent 5.2rem),
    radial-gradient(circle at 92% 24%, rgba(0, 174, 213, 0.25) 0 8rem, transparent 8.2rem),
    linear-gradient(115deg, #f5eadb 0 46%, #ffd6bb 46% 52%, #f5eadb 52% 100%);
}

html[data-style-experiment="graffiti"][data-theme="dusk"] {
  color-scheme: dark;
  --paper: #24182b;
  --paper-deep: #173b52;
  --paper-light: #35213e;
  --ink: #fff1df;
  --ink-soft: #d9cadc;
  --line: #f14891;
  --mineral: #ff4a9a;
  --mineral-deep: #ff8936;
  --night: #100d18;
  --night-soft: #1c1727;
  --night-line: #31c6e9;
  --white-soft: #fff4e6;
  --shadow: 11px 11px 0 #090b12;
  --style-header: #100d18;
  --style-header-ink: #fff4e6;
  --style-surface: #35213e;
  --style-surface-alt: #173b52;
  --style-heading: #fff4e6;
  --style-heading-shadow: 7px 7px 0 #ff277f, 13px 13px 0 #16bddd;
  --style-accent-contrast: #100d18;
  --style-status: #503044;
  --style-body-background:
    radial-gradient(circle at 10% 16%, rgba(255, 39, 127, 0.29) 0 6rem, transparent 6.2rem),
    radial-gradient(circle at 92% 24%, rgba(22, 189, 221, 0.27) 0 9rem, transparent 9.2rem),
    linear-gradient(115deg, #25172b 0 46%, #482138 46% 52%, #142d42 52% 100%);
}

html[data-style-experiment="graffiti"][data-theme="dark"] {
  color-scheme: dark;
  --paper: #080910;
  --paper-deep: #101e2d;
  --paper-light: #17131f;
  --ink: #fff2e4;
  --ink-soft: #d4c8d5;
  --line: #ff3f93;
  --mineral: #ff3f93;
  --mineral-deep: #ff7b25;
  --night: #03040a;
  --night-soft: #0d0d16;
  --night-line: #21c6e8;
  --white-soft: #fff5e9;
  --shadow: 11px 11px 0 #000;
  --style-header: #03040a;
  --style-header-ink: #fff5e9;
  --style-surface: #17131f;
  --style-surface-alt: #101e2d;
  --style-heading: #fff5e9;
  --style-heading-shadow: 7px 7px 0 #ff1d79, 13px 13px 0 #00bfe5;
  --style-accent-contrast: #06070d;
  --style-status: #281625;
  --style-body-background:
    radial-gradient(circle at 10% 16%, rgba(255, 29, 121, 0.25) 0 6rem, transparent 6.2rem),
    radial-gradient(circle at 92% 24%, rgba(0, 191, 229, 0.24) 0 9rem, transparent 9.2rem),
    linear-gradient(115deg, #05060c 0 46%, #181020 46% 52%, #071624 52% 100%);
}

/* Faceted */
html[data-style-experiment="faceted"][data-theme="light"] {
  color-scheme: light;
  --paper: #d9dfe2;
  --paper-deep: #c4ccd0;
  --paper-light: #edf0ef;
  --ink: #172331;
  --ink-soft: #45515d;
  --line: #71808b;
  --mineral: #a85f34;
  --mineral-deep: #7e4225;
  --night: #172331;
  --night-soft: #263544;
  --night-line: #62717f;
  --white-soft: #f5eee5;
  --shadow: 0 20px 48px rgba(24, 38, 50, 0.2);
  --style-header: rgba(232, 236, 236, 0.97);
  --style-header-ink: #172331;
  --style-surface: linear-gradient(145deg, #edf0ef, #ced6d9);
  --style-surface-alt: #c5cdd1;
  --style-heading: #172331;
  --style-heading-shadow: 6px 6px 0 rgba(184, 111, 63, 0.34);
  --style-accent-contrast: #111b25;
  --style-status: #e0c2ad;
  --style-body-background:
    conic-gradient(from 28deg at 88% 14%, rgba(168, 95, 52, 0.19), transparent 0 13%, rgba(117, 132, 144, 0.2) 0 25%, transparent 0 100%),
    conic-gradient(from 210deg at 8% 62%, rgba(104, 120, 132, 0.21), transparent 0 16%, rgba(168, 95, 52, 0.1) 0 29%, transparent 0 100%),
    linear-gradient(145deg, #e6eaeb, #c9d0d4 52%, #e1e5e5);
}

html[data-style-experiment="faceted"][data-theme="dusk"] {
  color-scheme: dark;
  --paper: #272730;
  --paper-deep: #32313b;
  --paper-light: #3c3a45;
  --ink: #f2e8df;
  --ink-soft: #c4bec5;
  --line: #716674;
  --mineral: #cf8251;
  --mineral-deep: #efa875;
  --night: #151720;
  --night-soft: #20222d;
  --night-line: #57515f;
  --white-soft: #f6eee6;
  --shadow: 0 22px 58px rgba(0, 0, 0, 0.38);
  --style-header: rgba(27, 27, 35, 0.97);
  --style-header-ink: #f2e8df;
  --style-surface: linear-gradient(145deg, #3c3945, #242630);
  --style-surface-alt: #33313d;
  --style-heading: #f2e8df;
  --style-heading-shadow: 7px 7px 0 rgba(207, 130, 81, 0.42);
  --style-accent-contrast: #171820;
  --style-status: #3e3334;
  --style-body-background:
    conic-gradient(from 28deg at 88% 14%, rgba(207, 130, 81, 0.24), transparent 0 13%, rgba(103, 98, 117, 0.24) 0 25%, transparent 0 100%),
    conic-gradient(from 210deg at 8% 62%, rgba(77, 78, 95, 0.28), transparent 0 16%, rgba(207, 130, 81, 0.12) 0 29%, transparent 0 100%),
    linear-gradient(145deg, #20212a, #34303a 52%, #1b1e27);
}

html[data-style-experiment="faceted"][data-theme="dark"] {
  color-scheme: dark;
  --paper: #121a23;
  --paper-deep: #1c2733;
  --paper-light: #263442;
  --ink: #f0e7dc;
  --ink-soft: #b7bec5;
  --line: #516171;
  --mineral: #c77943;
  --mineral-deep: #e8a36b;
  --night: #091019;
  --night-soft: #131e29;
  --night-line: #3d4c5c;
  --white-soft: #f5eee5;
  --shadow: 0 22px 55px rgba(0, 0, 0, 0.38);
  --style-header: rgba(16, 25, 35, 0.97);
  --style-header-ink: #f0e7dc;
  --style-surface: linear-gradient(145deg, #263441, #17222d);
  --style-surface-alt: #1a2631;
  --style-heading: #f1e7dc;
  --style-heading-shadow: 7px 7px 0 rgba(199, 121, 67, 0.45);
  --style-accent-contrast: #0d151e;
  --style-status: #18232e;
  --style-body-background:
    conic-gradient(from 28deg at 88% 14%, rgba(199, 121, 67, 0.22), transparent 0 13%, rgba(89, 105, 120, 0.22) 0 25%, transparent 0 100%),
    conic-gradient(from 210deg at 8% 62%, rgba(64, 78, 92, 0.25), transparent 0 16%, rgba(199, 121, 67, 0.12) 0 29%, transparent 0 100%),
    linear-gradient(145deg, #0d151e, #1c2733 52%, #0e1720);
}

/* Flat Cartoon */
html[data-style-experiment="cartoon"][data-theme="light"] {
  color-scheme: light;
  --paper: #f5ead9;
  --paper-deep: #e8d2b8;
  --paper-light: #fff8ea;
  --ink: #172437;
  --ink-soft: #46515e;
  --line: #172437;
  --mineral: #d16f3e;
  --mineral-deep: #a64d2b;
  --night: #172437;
  --night-soft: #26384e;
  --night-line: #8090a2;
  --white-soft: #fff8ea;
  --shadow: 8px 8px 0 #172437;
  --style-header: #fff8ea;
  --style-header-ink: #172437;
  --style-surface: #fff8ea;
  --style-surface-alt: #dce4e6;
  --style-heading: #172437;
  --style-heading-shadow: 5px 5px 0 #e1ad82;
  --style-accent-contrast: #fff8ea;
  --style-status: #f2d6bd;
  --style-body-background:
    radial-gradient(circle at 14% 10%, rgba(209, 111, 62, 0.15) 0 10rem, transparent 10.2rem),
    radial-gradient(circle at 87% 26%, rgba(48, 78, 111, 0.15) 0 13rem, transparent 13.2rem),
    #f5ead9;
}

html[data-style-experiment="cartoon"][data-theme="dusk"] {
  color-scheme: dark;
  --paper: #3b313d;
  --paper-deep: #51404b;
  --paper-light: #5c4a54;
  --ink: #fff0df;
  --ink-soft: #d5c6cc;
  --line: #f0aa79;
  --mineral: #f39a62;
  --mineral-deep: #ffbd8d;
  --night: #242331;
  --night-soft: #313246;
  --night-line: #77768b;
  --white-soft: #fff3e3;
  --shadow: 8px 8px 0 #191b28;
  --style-header: #332b38;
  --style-header-ink: #fff0df;
  --style-surface: #554550;
  --style-surface-alt: #454b5b;
  --style-heading: #fff0df;
  --style-heading-shadow: 5px 5px 0 #b96948;
  --style-accent-contrast: #27202b;
  --style-status: #664c4a;
  --style-body-background:
    radial-gradient(circle at 14% 10%, rgba(243, 154, 98, 0.18) 0 10rem, transparent 10.2rem),
    radial-gradient(circle at 87% 26%, rgba(105, 112, 154, 0.19) 0 13rem, transparent 13.2rem),
    #3b313d;
}

html[data-style-experiment="cartoon"][data-theme="dark"] {
  color-scheme: dark;
  --paper: #142033;
  --paper-deep: #1d2d44;
  --paper-light: #263a52;
  --ink: #fff1df;
  --ink-soft: #c7d0d7;
  --line: #e58a57;
  --mineral: #f18a50;
  --mineral-deep: #ffb47e;
  --night: #08111f;
  --night-soft: #111f32;
  --night-line: #50647b;
  --white-soft: #fff3e4;
  --shadow: 8px 8px 0 #050b14;
  --style-header: #0d1828;
  --style-header-ink: #fff1df;
  --style-surface: #20334a;
  --style-surface-alt: #293f52;
  --style-heading: #fff1df;
  --style-heading-shadow: 5px 5px 0 #8d4c32;
  --style-accent-contrast: #101a29;
  --style-status: #3b3440;
  --style-body-background:
    radial-gradient(circle at 14% 10%, rgba(241, 138, 80, 0.16) 0 10rem, transparent 10.2rem),
    radial-gradient(circle at 87% 26%, rgba(82, 111, 149, 0.2) 0 13rem, transparent 13.2rem),
    #142033;
}

/* Shared application of the active identity and time mode. */
html[data-style-experiment] body {
  background: var(--style-body-background);
  color: var(--ink);
}

html[data-style-experiment] .site-header,
html[data-style-experiment] .site-header::before,
html[data-style-experiment] .site-nav {
  background: var(--style-header);
  color: var(--style-header-ink);
}

html[data-style-experiment] .brand-label,
html[data-style-experiment] .site-nav a,
html[data-style-experiment] .menu-toggle {
  color: inherit;
}

html[data-style-experiment] .hero h1,
html[data-style-experiment] .experiments-hero h1,
html[data-style-experiment] .section-heading h2,
html[data-style-experiment] .experiment-index-heading h2,
html[data-style-experiment] .experiment-section-heading h2,
html[data-style-experiment] .about-heading h2,
html[data-style-experiment] .contact-copy h2,
html[data-style-experiment] .experiments-close h2 {
  color: var(--style-heading);
  text-shadow: var(--style-heading-shadow);
}

html[data-style-experiment] .hero-lede,
html[data-style-experiment] .experiments-hero-lede,
html[data-style-experiment] .hero-panel,
html[data-style-experiment] .experiments-hero-panel,
html[data-style-experiment] .work-profile,
html[data-style-experiment] .rate-note,
html[data-style-experiment] .experiments-note-inner,
html[data-style-experiment] .service-card,
html[data-style-experiment] .story-card,
html[data-style-experiment] .experiment-card,
html[data-style-experiment] .engagement-row,
html[data-style-experiment] .contact-option,
html[data-style-experiment] .experiment-index-grid a {
  background: var(--style-surface);
  color: var(--ink);
  border-color: var(--line);
}

html[data-style-experiment] .proof-strip,
html[data-style-experiment] .about-section,
html[data-style-experiment] .experiments-note,
html[data-style-experiment] .experiments-close {
  background: var(--style-surface-alt);
  color: var(--ink);
  border-color: var(--line);
}

html[data-style-experiment] .section-stories,
html[data-style-experiment] .contact-section {
  background: var(--paper-light);
  color: var(--ink);
}

html[data-style-experiment] .section-dark,
html[data-style-experiment] .experiment-section-dark,
html[data-style-experiment] .site-footer {
  background: var(--night);
  color: var(--white-soft);
}

html[data-style-experiment] .eyebrow,
html[data-style-experiment] .section-number,
html[data-style-experiment] .panel-kicker,
html[data-style-experiment] .case-meta,
html[data-style-experiment] .experiment-meta,
html[data-style-experiment] .experiment-number,
html[data-style-experiment] .experiment-goal-label,
html[data-style-experiment] .contact-label {
  color: var(--mineral);
}

html[data-style-experiment] .button-primary {
  background: var(--mineral);
  color: var(--style-accent-contrast);
  border-color: var(--line);
}

html[data-style-experiment] .button-text,
html[data-style-experiment] .experiment-link,
html[data-style-experiment] .engagement-model-link,
html[data-style-experiment] .about-links a,
html[data-style-experiment] .rate-note a,
html[data-style-experiment] .nav-cta {
  color: var(--mineral-deep);
}

html[data-style-experiment] .story-outcome,
html[data-style-experiment] .experiment-goal > p:last-child,
html[data-style-experiment] .availability-status {
  background: var(--style-status);
  color: var(--ink);
  border-color: var(--line);
}

html[data-style-experiment] .story-outcome strong,
html[data-style-experiment] .story-outcome span,
html[data-style-experiment] .experiment-goal > p:last-child {
  color: inherit;
}

/* Identity-specific image tuning by time mode. */
html[data-style-experiment="clouded"][data-theme="light"] .hero::after,
html[data-style-experiment="clouded"][data-theme="light"] .experiments-hero::after {
  opacity: 0.5;
  filter: saturate(0.58) contrast(1.02) brightness(1.08);
}

html[data-style-experiment="clouded"][data-theme="dusk"] .hero::after,
html[data-style-experiment="clouded"][data-theme="dusk"] .experiments-hero::after {
  opacity: 0.58;
  filter: saturate(0.68) contrast(1.08) brightness(0.86);
}

html[data-style-experiment="clouded"][data-theme="dark"] .hero::after,
html[data-style-experiment="clouded"][data-theme="dark"] .experiments-hero::after {
  opacity: 0.72;
  filter: saturate(0.72) contrast(1.12) brightness(0.76);
}

html[data-style-experiment="graffiti"][data-theme="light"] .hero::before,
html[data-style-experiment="graffiti"][data-theme="light"] .experiments-hero::before {
  opacity: 1;
  filter: saturate(1.12) contrast(1.04);
}

html[data-style-experiment="graffiti"][data-theme="dusk"] .hero::before,
html[data-style-experiment="graffiti"][data-theme="dusk"] .experiments-hero::before {
  opacity: 0.68;
  filter: saturate(1.25) contrast(1.1) brightness(0.76);
}

html[data-style-experiment="graffiti"][data-theme="dark"] .hero::before,
html[data-style-experiment="graffiti"][data-theme="dark"] .experiments-hero::before {
  opacity: 0.58;
  filter: saturate(1.34) contrast(1.16) brightness(0.64);
}

html[data-style-experiment="faceted"][data-theme="light"] .hero::after,
html[data-style-experiment="faceted"][data-theme="light"] .experiments-hero::after {
  opacity: 0.6;
  filter: saturate(0.76) contrast(1.02) brightness(1.08);
}

html[data-style-experiment="faceted"][data-theme="light"] .hero::before,
html[data-style-experiment="faceted"][data-theme="light"] .experiments-hero::before {
  opacity: 0.25;
}

html[data-style-experiment="faceted"][data-theme="dusk"] .hero::after,
html[data-style-experiment="faceted"][data-theme="dusk"] .experiments-hero::after {
  opacity: 0.48;
  filter: saturate(0.86) contrast(1.06) brightness(0.82);
}

html[data-style-experiment="faceted"][data-theme="dusk"] .hero::before,
html[data-style-experiment="faceted"][data-theme="dusk"] .experiments-hero::before {
  opacity: 0.28;
}

html[data-style-experiment="faceted"][data-theme="dark"] .hero::after,
html[data-style-experiment="faceted"][data-theme="dark"] .experiments-hero::after {
  opacity: 0.4;
  filter: saturate(0.92) contrast(1.08) brightness(0.72);
}

html[data-style-experiment="faceted"][data-theme="dark"] .hero::before,
html[data-style-experiment="faceted"][data-theme="dark"] .experiments-hero::before {
  opacity: 0.2;
}

html[data-style-experiment="cartoon"][data-theme="light"] .hero::after,
html[data-style-experiment="cartoon"][data-theme="light"] .experiments-hero::after {
  opacity: 1;
  filter: none;
}

html[data-style-experiment="cartoon"][data-theme="dusk"] .hero::after,
html[data-style-experiment="cartoon"][data-theme="dusk"] .experiments-hero::after {
  opacity: 0.68;
  filter: saturate(0.78) contrast(1.04) brightness(0.78);
}

html[data-style-experiment="cartoon"][data-theme="dark"] .hero::after,
html[data-style-experiment="cartoon"][data-theme="dark"] .experiments-hero::after {
  opacity: 0.54;
  filter: saturate(0.68) contrast(1.08) brightness(0.66);
}

/* Preserve each identity's characteristic shadows in darker modes. */
html[data-style-experiment="graffiti"][data-theme="dusk"] .service-card,
html[data-style-experiment="graffiti"][data-theme="dusk"] .story-card,
html[data-style-experiment="graffiti"][data-theme="dusk"] .experiment-card,
html[data-style-experiment="graffiti"][data-theme="dusk"] .contact-option,
html[data-style-experiment="graffiti"][data-theme="dark"] .service-card,
html[data-style-experiment="graffiti"][data-theme="dark"] .story-card,
html[data-style-experiment="graffiti"][data-theme="dark"] .experiment-card,
html[data-style-experiment="graffiti"][data-theme="dark"] .contact-option {
  box-shadow: 10px 10px 0 #000;
}

html[data-style-experiment="cartoon"][data-theme="dusk"] .service-card,
html[data-style-experiment="cartoon"][data-theme="dusk"] .story-card,
html[data-style-experiment="cartoon"][data-theme="dusk"] .experiment-card,
html[data-style-experiment="cartoon"][data-theme="dusk"] .contact-option,
html[data-style-experiment="cartoon"][data-theme="dark"] .service-card,
html[data-style-experiment="cartoon"][data-theme="dark"] .story-card,
html[data-style-experiment="cartoon"][data-theme="dark"] .experiment-card,
html[data-style-experiment="cartoon"][data-theme="dark"] .contact-option {
  box-shadow: var(--shadow);
}