@charset "UTF-8";
/* CSS Document */
/*--------------------------------------------*/

/* =========== CAST =========== */
/* CONTAINER ///////////////////////////////////*/
div.cast__container {  }
div.cast__gridBox { display: grid; grid-template-columns: 1fr 1.2fr; gap: 3rem; align-items: start; margin-bottom: 4rem; }
.cast__gridBox img { width: 100%; height: auto; object-fit: cover; }

@media screen and (max-width: 767px) { div.cast__gridBox { display: block; margin-bottom: 4rem; } .cast__gridBox img { margin-bottom: 20px; } }

/* TEXT ///////////////////////////////////*/
#CREW h4               { font-size: 2em; margin-bottom: 1rem; font-weight: var(--fw-bold); text-wrap:unset; }
#CREW section          { padding-block: 2rem; }
#CREW section .textBox p     { line-height: 1.8; margin-bottom: 1rem; max-width: 40em; }
#CREW section .textBox a     { text-decoration: underline; }
#CREW section .textBox small { font-size: .7em; }

/* filmography ///////////////////////////////////*/
.filmographyToggle { display: flex; align-items: center; gap: 0.5em; font-size: 1.2rem; font-weight: 600; background: none; border: none; padding: 0; cursor: pointer; }

.filmographyToggle::after { content: "＋"; font-size: 1.2rem; transition: transform 0.3s; }

.filmographyToggle.is-open::after { content: "－"; }

.filmography    { display: grid; grid-template-columns: 8rem 1fr; column-gap: 2rem; row-gap: 1.5rem; }
.filmography dt { font-weight: 600; opacity: 0.7; }
.filmography dd { margin: 0; line-height: 1.7; }

#crew_role { margin-left: 15vh; }