/* D on white. Same structure as D, loaded on top of its stylesheet. White paper, black type, deep gold, and the only dark things are the windows. */
:root {
  --color-bg: #fff;
  --color-bg-elevated: #fff;
  --color-bg-card: #f6f4ee;
  --color-text: #0e0e0e;
  --color-text-secondary: rgba(14, 14, 14, .74);
  --color-text-muted: rgba(14, 14, 14, .58);
  /* Darker than the gold on black: small gold text has to reach 4.5:1 on white. */
  --color-accent: #a8861f;
  --color-accent-light: #8a6d1a;
  --color-accent-glow: rgba(168, 134, 31, .28);
}
html.opening::before { background: #fff; }
body { background: #fff; }

/* Header */
.logo-img { filter: none; }
html.fx .nav.scrolled { background: linear-gradient(rgba(255, 255, 255, .92), rgba(255, 255, 255, 0)); }
.nav-link, .nav-toggle span, .logo-img { transition: color .3s, background .3s, filter .3s; }
@media (max-width: 768px) { .nav-menu { background: #fff; } }
html.w-dark-top .nav.scrolled, html.d-gold .nav.scrolled { background: none; }
html.w-dark-top .nav-link { color: #fff; }
html.w-dark-top .logo-img { filter: invert(1); }
html.w-dark-top .nav-toggle span { background: #fff; }
html.w-dark-top .indicator-item { border-color: #fff; }
html.w-dark-top .indicator-item.active { background: #fff; box-shadow: none; }
.indicator-item.active { box-shadow: none; }
/* Small labels use the darker gold so they stay readable on white. */
.section-number { color: var(--color-accent-light); }

/* Hero */
.d-hero { background: #fff; }
.hero-sub, html.fx .hero-sub { color: var(--color-text); }
html.fx .hero-scroll span { color: var(--color-text-secondary); }
.d-pan { background: #fff; }
.d-line { background: #0e0e0e; }
.w-in { display: none; }
html.fx .d-hero .hero-content.w-in { display: block; z-index: 1; color: #fff; }
html.fx .d-hero .d-panels { z-index: 2; }
html.fx .w-clip { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
html.fx .d-letters { z-index: 4; }
html.fx .w-in .title-word { color: #fff; }
/* The bright gold is only for the part of the title that sits on the night view. */
html.fx .w-in .title-word.accent .ch { background: linear-gradient(135deg, #d4af37 0%, #f4d03f 100%); -webkit-background-clip: text; background-clip: text; }
.d-letters img { position: absolute; inset: 0; }
.d-letters .is-w { opacity: 0; }

/* Ribbon */
html.fx .d-rib { -webkit-text-stroke-color: rgba(138, 109, 26, .8); }

/* Service */
html.d-pin .d-biz__stage { background: #fff; }
html.d-pin .d-biz__count i { background: rgba(14, 14, 14, .2); }
.d-act__win { background: #0e0e0e; }
.d-act__whole { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; visibility: hidden; }
.d-act.is-contain .d-act__whole { object-fit: contain; }
.d-act__frame { border-color: #0e0e0e; transition: border-color .3s; }
/* The en-Taku mark is a link. The big title runs over the picture, so it must let clicks through to it. */
.d-act__win--link { display: block; cursor: pointer; }
.d-act__win--link:hover .d-act__frame { border-color: #f4d03f; }
.d-act__win--link:focus-visible { outline: 2px solid var(--color-accent-light); outline-offset: 4px; }
html.d-pin .d-act__text { pointer-events: none; }
html.d-pin .d-act__rest { pointer-events: auto; }
html.d-pin .d-act__en {
  background: linear-gradient(90deg, #8a6d1a 0, #a8861f var(--cut, 100%), #f4d03f var(--cut, 100%), #d4af37 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

/* Talents */
html.fx .d-tal__stage { background: #fff; }
html.fx .d-t__name { -webkit-text-stroke-color: #b08d24; }
.d-t__frame { border-color: #0e0e0e; }

/* News, Company */
.d-news__item { border-color: rgba(14, 14, 14, .3); }
.d-co dl > div::after { background: rgba(14, 14, 14, .3); }
.d-co dd a { border-color: rgba(14, 14, 14, .5); }

@media (max-width: 900px) { .d-co__logo { width: 150px; } }

/* Contact: black fills the white page, the one dark full screen at the very end. */
.d-end { background: #0e0e0e; color: #fff; }
html.fx .d-end { background: #fff; }
html.fx .d-end__sq { background: #0e0e0e; }
.d-end .section-number { color: #f4d03f; }
.d-end .section-heading { color: #fff; }
.d-end__t {
  background: linear-gradient(135deg, #d4af37 0%, #f4d03f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.d-end__btn { background: linear-gradient(135deg, #d4af37 0%, #f4d03f 100%); color: #000; }
html.d-gold .nav-link { color: #fff; }
html.d-gold .logo-img { filter: invert(1); }
html.d-gold .nav-toggle span { background: #fff; }
html.d-gold .indicator-item { border-color: #fff; }
html.d-gold .indicator-item.active { background: #fff; }

/* Footer: production has it on black with an inverted logo. */
.footer { background: #fff; border-top: 1px solid rgba(14, 14, 14, .14); }
.footer-logo img { filter: none; opacity: 1; }
.footer-top { border-bottom-color: rgba(14, 14, 14, .14); }
.footer-links a { color: var(--color-text-secondary); }
.footer-bottom p { color: var(--color-text-secondary); }

/* Without motion: the same page, still on white. */
html:not(.fx) .hero-bg-image { opacity: .12; }