body.variant-slate {
  --obsidian: #121315;
  --panel: #1b1c20;
  --ink: #151619;
  --bone: #f4efe6;
  --muted: #b7b3aa;
  --line: rgba(215, 180, 106, 0.2);
  --gold: #d7b46a;
  background: #121315;
}

body.variant-slate .tile-shell {
  background:
    radial-gradient(circle at 73% 8%, rgba(215, 180, 106, 0.11), transparent 22%),
    linear-gradient(135deg, #151619 0%, #1b1c20 48%, #111214 100%);
}

body.variant-slate .tile-hero {
  background:
    radial-gradient(circle at 74% 22%, rgba(215, 180, 106, 0.11), transparent 21%),
    linear-gradient(135deg, rgba(18, 19, 21, 0.98), rgba(28, 29, 33, 0.96));
}

body.variant-slate .hero-copy,
body.variant-slate .portfolio-columns > article,
body.variant-slate .type-tab,
body.variant-slate .case-strip,
body.variant-slate .rules-panel {
  border-color: rgba(215, 180, 106, 0.18);
  background: linear-gradient(180deg, rgba(35, 36, 40, 0.96), rgba(26, 27, 31, 0.96));
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.2);
}

body.variant-slate .hero-frame {
  background:
    linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, 0.78)),
    linear-gradient(118deg, rgba(244, 239, 230, 0.12), rgba(215, 180, 106, 0.1) 34%, rgba(7, 8, 10, 0.86)),
    #121315;
}

body.variant-slate h1 {
  font-family: "Hiragino Sans GB", "Microsoft YaHei", "PingFang SC", sans-serif;
  color: #fff7e8;
}

body.variant-brush {
  --obsidian: #0f1012;
  --panel: #18191d;
  --bone: #f6efe0;
  --muted: #c6bdae;
  --line: rgba(199, 158, 82, 0.22);
  --gold: #cda05a;
  background: #0f1012;
}

body.variant-brush .tile-shell {
  background:
    radial-gradient(circle at 82% 18%, rgba(171, 74, 52, 0.12), transparent 20%),
    radial-gradient(circle at 23% 18%, rgba(205, 160, 90, 0.1), transparent 20%),
    linear-gradient(135deg, #101113, #1a1815 52%, #0b0c0d);
}

body.variant-brush .tile-hero {
  background:
    repeating-linear-gradient(105deg, rgba(246, 239, 224, 0.035) 0 1px, transparent 1px 18px),
    linear-gradient(135deg, rgba(18, 18, 18, 0.96), rgba(28, 23, 18, 0.9));
}

body.variant-brush .hero-copy {
  background:
    radial-gradient(circle at 22% 8%, rgba(205, 160, 90, 0.14), transparent 28%),
    linear-gradient(180deg, rgba(31, 30, 29, 0.96), rgba(19, 18, 17, 0.96));
}

body.variant-brush h1 {
  font-family: "Songti SC", "Hiragino Mincho ProN", "PingFang SC", serif;
  font-size: 50px;
  font-weight: 900;
}

body.variant-brush .hero-frame {
  border-color: rgba(205, 160, 90, 0.38);
  background:
    linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, 0.82)),
    radial-gradient(circle at 70% 36%, rgba(171, 74, 52, 0.17), transparent 22%),
    repeating-linear-gradient(24deg, rgba(246, 239, 224, 0.055) 0 1px, transparent 1px 14px),
    linear-gradient(118deg, rgba(246, 239, 224, 0.1), rgba(38, 27, 18, 0.5), #0b0c0d);
}

body.variant-brush .project-list a,
body.variant-brush .type-tab,
body.variant-brush .case-media {
  background:
    linear-gradient(180deg, rgba(32, 29, 25, 0.94), rgba(15, 16, 18, 0.95));
}

body.variant-reel {
  --obsidian: #101316;
  --panel: #171b1f;
  --bone: #edf0ed;
  --muted: #aeb7b2;
  --line: rgba(112, 169, 164, 0.2);
  --gold: #d4b06a;
  --edit-blue: #70a9a4;
  background: #101316;
}

body.variant-reel .tile-shell {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 10%),
    radial-gradient(circle at 66% 12%, rgba(112, 169, 164, 0.12), transparent 20%),
    linear-gradient(135deg, #101316, #182026 48%, #0c0e10);
}

body.variant-reel .tile-hero {
  background:
    linear-gradient(90deg, rgba(8, 10, 12, 0.94), rgba(16, 19, 22, 0.72) 48%, rgba(8, 10, 12, 0.92)),
    repeating-linear-gradient(0deg, rgba(112, 169, 164, 0.04) 0 1px, transparent 1px 22px);
}

body.variant-reel .hero-frame {
  background:
    linear-gradient(180deg, transparent 47%, rgba(0, 0, 0, 0.82)),
    repeating-linear-gradient(90deg, rgba(112, 169, 164, 0.1) 0 1px, transparent 1px 70px),
    linear-gradient(120deg, rgba(237, 240, 237, 0.12), rgba(112, 169, 164, 0.12), rgba(0, 0, 0, 0.7)),
    #11161a;
}

body.variant-reel .play-mark {
  border-color: rgba(112, 169, 164, 0.7);
  box-shadow: 0 0 40px rgba(112, 169, 164, 0.18);
}

body.variant-reel .project-list a {
  grid-template-columns: 70px minmax(0, 1fr);
  background:
    linear-gradient(90deg, rgba(112, 169, 164, 0.08), rgba(255, 255, 255, 0.025));
}

body.variant-reel .project-list a::before {
  content: "";
  grid-column: 1;
  grid-row: 1 / span 3;
  width: 58px;
  aspect-ratio: 16 / 10;
  align-self: center;
  border-radius: 7px;
  border: 1px solid rgba(112, 169, 164, 0.24);
  background: linear-gradient(135deg, rgba(112, 169, 164, 0.2), rgba(212, 176, 106, 0.1));
}

body.variant-reel .project-list span,
body.variant-reel .project-list strong,
body.variant-reel .project-list p {
  grid-column: 2;
}

body.variant-agency {
  --obsidian: #f0ede6;
  --panel: #111;
  --ink: #0f0f0f;
  --bone: #111;
  --muted: rgba(17, 17, 17, 0.66);
  --line: rgba(17, 17, 17, 0.16);
  --gold: #b18a45;
  background: #f0ede6;
}

body.variant-agency .tile-shell {
  background:
    linear-gradient(90deg, rgba(17, 17, 17, 0.07) 0 30%, transparent 30%),
    #f0ede6;
}

body.variant-agency .tile-nav {
  color: #111;
  background: transparent;
}

body.variant-agency .tile-hero {
  background: transparent;
}

body.variant-agency .hero-copy,
body.variant-agency .portfolio-columns > article,
body.variant-agency .type-tab,
body.variant-agency .case-strip,
body.variant-agency .rules-panel {
  color: #111;
  border-color: rgba(17, 17, 17, 0.16);
  background: rgba(255, 255, 255, 0.58);
  box-shadow: none;
}

body.variant-agency h1 {
  font-family: "Avenir Next Condensed", "Arial Narrow", "PingFang SC", sans-serif;
  font-size: 58px;
  line-height: 0.96;
  text-transform: uppercase;
}

body.variant-agency .hero-copy p:last-child,
body.variant-agency .intro-copy,
body.variant-agency .project-list p,
body.variant-agency .type-tab p,
body.variant-agency .case-meta dd,
body.variant-agency .rules-panel p {
  color: rgba(17, 17, 17, 0.66);
}

body.variant-agency .hero-frame {
  border-color: rgba(17, 17, 17, 0.24);
  background:
    linear-gradient(180deg, transparent 42%, rgba(0, 0, 0, 0.84)),
    linear-gradient(135deg, rgba(17, 17, 17, 0.12), rgba(177, 138, 69, 0.12), #111);
}

body.variant-agency .project-list,
body.variant-agency .project-list a {
  border-color: rgba(17, 17, 17, 0.14);
}

body.variant-agency .project-list a {
  background: rgba(255, 255, 255, 0.55);
}