/* Direction 02: four colored surfaces, with clearer tonal depth. */
:root { --gucci-tint: #e1e5df; --momoyan-tint: #cee8ed; --nakamon-tint: #edd3db; --tanaka-tint: #e8e9b7; }
.p-panels, .p-profile-sheet, .p-about, .p-movie, .p-journal, .l-footer { --muted: #303b3d; }
.p-about { background: var(--gucci-tint); }
.p-movie { background: var(--momoyan-tint); }
.p-journal { background: var(--nakamon-tint); }
.p-contact { background: var(--tanaka-tint); }
.p-contact p { color: var(--muted); }
.l-section, .p-journal .l-section, .p-contact { border: 0; }
.p-movie__figure { background: transparent; padding: 0; }
.p-movie__figure figcaption { border: 0; padding-top: 0; }
.p-article { border-color: #252c2d18; background: transparent; }
.p-article:last-child { border-bottom-color: #252c2d18; }
.l-footer { background: var(--tanaka-tint); }

/* Every section shares About's title, baseline and opposite Japanese caption. */
.c-section-heading { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; margin-bottom: var(--space-heading); }
.c-section-heading > .c-section-heading__title { color: var(--ink); font: 400 var(--type-section-label)/1.2 var(--latin); letter-spacing: -.025em; }
.c-section-heading__caption { color: var(--muted); font: 400 .8125rem/1.8 var(--sans); letter-spacing: .08em; }
.p-about__heading.c-section-heading { margin-bottom: 0; }
.p-journal .l-section-head { grid-template-columns: minmax(0, 1fr) auto; }
.p-contact__inner { grid-template-columns: minmax(0, 1fr); gap: 0; }
.p-contact__inner > .c-section-heading { grid-column: 1 / -1; }
.p-contact__inner > .c-contact-link { grid-column: 1; }
@media (max-width: 800px) {
  .c-section-heading { margin-bottom: var(--space-heading); }
  .c-section-heading > .c-section-heading__title { font-size: 1.75rem; }
}
@media (max-width: 480px) {
  .p-journal .l-section-head { grid-template-columns: minmax(0, 1fr); }
  .p-journal .l-section-head > :last-child { grid-column: 1; justify-self: start; }
}

/* One viewport-sized canvas is shared by the four surfaces. */
body { isolation: isolate; }
#main { isolation: auto; }
.c-tonal-background { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; visibility: hidden; }
.c-tonal-background canvas { display: block; width: 100%; height: 100%; }
.c-tonal-background.is-ready { visibility: visible; }
.p-about[data-tonal], .p-movie[data-tonal], .p-journal[data-tonal], .l-footer[data-tonal] { background: transparent; }

/* Native text and large hit areas stay steady; only the arrow and image respond. */
.c-link, .p-about__links a, .c-contact-link { border: 0; }
/* A visible text underline identifies destinations before hover or focus. */
.c-link, .p-about__links a, .p-journal__read, .p-journal__footer > .c-text-link { min-height: 48px; cursor: pointer; }
.c-link__label, .p-profile__links a > span:first-child, .p-index-article__link > span:first-child {
  text-decoration-line: underline; text-decoration-color: #252c2d90; text-decoration-thickness: 1px;
  text-underline-offset: .28em; text-decoration-skip-ink: auto;
  transition: text-decoration-color var(--motion-hover) var(--ease-out);
}
a:is(:hover, :focus-visible) > .c-link__label,
.p-profile__links a:is(:hover, :focus-visible) > span:first-child,
.p-index-article__link:is(:hover, :focus-visible) > span:first-child { text-decoration-color: currentColor; }
.c-link:is(:hover, :focus-visible), a.c-text-link:is(:hover, :focus-visible), .p-article__link:is(:hover, :focus-visible) h3 { color: var(--ink); }
.p-article__link .p-article__image img { transition: transform var(--motion-image) var(--ease-out); }
.p-article__link:is(:hover, :focus-visible) .p-article__image img { transform: scale(1.025); }
.p-movie__play { border: 0; transition: none; }
.p-movie__play:is(:hover, :focus-visible) { background: var(--paper); }
.p-movie__play > span { display: inline-block; transition: transform var(--motion-hover) var(--ease-out); }
.p-movie__play:is(:hover, :focus-visible) > span { transform: translateX(3px); }
.c-contact-link > span:last-child { transition: transform .6s cubic-bezier(.22, 1, .36, 1); }
.c-contact-link:is(:hover, :focus-visible) > span:last-child { transform: translateY(-2px); }
.c-arrow--reveal { position: relative; display: inline-block; flex-shrink: 0; width: 1.25em; height: 1.25em; overflow: hidden; vertical-align: middle; line-height: 1.25; font-weight: 400; }
.c-arrow--reveal > span { position: absolute; inset: 0; display: block; transition: transform var(--motion-hover) var(--ease-out), opacity var(--motion-fade) ease; }
.c-arrow--reveal > span:last-child { transform: translate(-110%, 110%); opacity: 0; }
a:is(:hover, :focus-visible) .c-arrow--reveal > span:first-child { transform: translate(110%, -110%); opacity: 0; }
a:is(:hover, :focus-visible) .c-arrow--reveal > span:last-child { transform: translate(0, 0); opacity: 1; }
a:is(:hover, :focus-visible) .c-arrow--reveal,
.p-about__links a:is(:hover, :focus-visible) > .c-arrow--reveal,
.p-profile__links a:is(:hover, :focus-visible) > .c-arrow--reveal,
.c-contact-link:is(:hover, :focus-visible) > .c-arrow--reveal { transform: none; background: transparent; color: inherit; }
.c-contact-link > .c-arrow--reveal { display: inline-block; width: 1.25em; height: 1.25em; }
a:active .c-arrow--reveal { opacity: .65; }
.p-movie .p-movie__play:active .p-movie__play-icon { transform: scale(.94); }
.p-profile__links a::after { display: none; }
.c-back-top { transition: transform var(--motion-hover) var(--ease-out); }
.c-back-top:is(:hover, :focus-visible) { transform: translateY(-3px); }

.c-header-link[href="#about"], .c-header-link[href="#introduction"] { --nav-color: var(--gucci); }
.c-header-link[href="#gallery"] { --nav-color: var(--momoyan); }
.c-header-link[href="#news"] { --nav-color: var(--nakamon); }
.c-header-link[href="#contact"] { --nav-color: var(--tanaka); }
@media (min-width: 801px) {
  .l-nav > .c-header-link::before { display: none; }
  .l-nav > .c-header-link::after { inset: 10px -9px auto auto; width: 5px; height: 5px; background: var(--nav-color); opacity: 0; transform: translateY(4px); transition: transform .6s cubic-bezier(.22, 1, .36, 1), opacity .4s; }
  .l-nav > .c-header-link:is(:hover, :focus-visible, [aria-current])::after { opacity: 1; transform: translateY(0); }
  .l-nav > .c-header-link:last-child { padding-left: 0; border-left: 0; }
  .l-nav .c-header-link__arrow, .l-nav .c-header-link__label > span:last-child { display: none; }
  .l-nav .c-header-link__label { overflow: visible; }
  .l-nav .c-header-link__label > span:first-child { transition: transform .6s cubic-bezier(.22, 1, .36, 1); }
  .l-nav > .c-header-link:is(:hover, :focus-visible) .c-header-link__label > span:first-child { transform: translateY(-2px); }
}
.l-header .c-wordmark__colors, .l-footer .c-wordmark__colors { display: flex; gap: 5px; margin-top: 12px; }
.c-wordmark__colors > i { display: block; width: 5px; height: 5px; background: var(--nakamon); }
.c-wordmark__colors > i:nth-child(2) { background: var(--momoyan); }
.c-wordmark__colors > i:nth-child(3) { background: var(--gucci); }
.c-wordmark__colors > i:nth-child(4) { background: var(--tanaka); }
.l-header .c-wordmark:is(:hover, :focus-visible) .c-wordmark__colors > i { transform: none; }
@media (prefers-reduced-motion: reduce), print {
  .c-tonal-background { display: none; }
  .p-about[data-tonal] { background: var(--gucci-tint); }
  .p-movie[data-tonal] { background: var(--momoyan-tint); }
  .p-journal[data-tonal] { background: var(--nakamon-tint); }
  .l-footer[data-tonal] { background: var(--tanaka-tint); }
  .c-link__label, .p-profile__links a > span:first-child, .p-index-article__link > span:first-child,
  .c-arrow--reveal > span, .p-movie__play > span, .c-contact-link > span:last-child, .p-article__link .p-article__image img, .c-back-top,
  .l-nav > .c-header-link::after, .l-nav .c-header-link__label > span:first-child { transition: none; }
}