/* D on white, with light instead of a photo. Sits on top of D's and D-white's stylesheets, and only touches the hero. */

/* Without WebGL the window still shows a stage: one soft pool of light on black. */
html.fx .d-hero .hero-video-bg {
  background: radial-gradient(52% 62% at 50% 26%, rgba(244, 208, 63, .62), rgba(212, 175, 55, .16) 48%, #0b0a08 76%);
}
/* Without motion there is no window at all, so the hero is simply the title on white. */
html:not(.fx) .d-hero .hero-video-bg { display: none; }

/* On the lit smoke the gold needs a little more air than on the night view. */
html.fx .w-in .title-word.accent .ch { background: linear-gradient(135deg, #e6c24a 0%, #ffe07a 100%); -webkit-background-clip: text; background-clip: text; }

/* The talents' background was a blur of the night photo. With no photo it is a pool of light, like the hero. */
.d-t__bg { background: radial-gradient(62% 72% at 50% 18%, rgba(244, 208, 63, .52), rgba(212, 175, 55, .14) 52%, rgba(212, 175, 55, 0) 78%), #0b0a08; }

/* Read by search engines and screen readers, not shown: the h1 names the company. */
.d-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* The first screen says in plain words who this is. */
.d-lead { margin-bottom: 18px; font-size: clamp(1rem, 1.2vw, 1.14rem); font-weight: 600; line-height: 1.6; font-feature-settings: "palt"; word-break: auto-phrase; }
.d-side li a { font-family: var(--font-primary); font-size: clamp(.95rem, 1.05vw, 1.02rem); letter-spacing: .04em; }
html:not(.fx) .d-side { display: none; }

/* Nothing meant to be read below 13px (production's labels were 10 to 12px). */
.section-number { font-size: .85rem; }
.section-heading { font-size: .9rem; }
.nav-link { font-size: .82rem; }
.hero-scroll span, html.fx .hero-scroll span { font-size: .82rem; }
.footer-links a { font-size: .85rem; }
.footer-bottom p { font-size: .82rem; }

/* Japanese headings break at word boundaries instead of leaving one stray character. */
.d-news__t, .d-act__h, .d-t__info h3, .about-title, .d-t__role { word-break: auto-phrase; text-wrap: balance; }

.d-end__btn { white-space: nowrap; padding: 0 clamp(20px, 5vw, 40px); }

@media (max-width: 900px) {
  /* Lead takes the place of the small "Service" label, so the list still fits. */
  .d-side--l .d-side__h { display: none; }
  .d-lead { margin-bottom: 4px; font-size: .95rem; }
  /* MANAGEMENT was wider than a 320px screen and pushed the whole page sideways. */
  .d-act__en { font-size: min(10.4vw, 4.4rem); }
  .d-act > *, .d-t > * { min-width: 0; }
}
@media (max-width: 900px) and (max-height: 700px) {
  .d-hero { --w: min(84vw, 44svh); }
}

/* Subpages on white. Production inverts this logo for its black pages, which on white turns it into a black square. */
.sidebar-logo img { filter: none; }
/* White on the darker gold is too faint for small text, so the button goes black. */
.btn-primary { background: #0e0e0e; color: #fff; }

/* ---------- theme additions ---------- */
/* A talent with no cut-out: their photo fills the square instead of stepping out of it. */
.d-t.is-photo .d-t__p { height: 100%; width: 100%; aspect-ratio: auto; object-fit: cover; }
.d-t.is-photo .d-t__clip { clip-path: inset(0); }

/* The pinned talents section scrolls 165svh per person (430svh for the two on the site today). */
html.fx .d-tal { height: calc(100svh + var(--n, 2) * 165svh); }

/* Older news under the newest one. */
.d-news__more { display: grid; grid-template-columns: 7.5em 1fr; gap: 16px; align-items: baseline; padding: 18px 0; border-bottom: 1px solid rgba(14, 14, 14, .18); font-size: clamp(1rem, 1.3vw, 1.15rem); transition: color .3s; }
.d-news__more time { font-family: var(--font-display); letter-spacing: .08em; color: var(--c-sub, #565656); }
.d-news__more:hover { color: var(--color-accent-light); }